@orangelogic/design-system 2.78.0 → 2.79.0

package/library/chunks/component.styles.DMSLciL5.js

@@ -1,71 +0,0 @@
-import { i as t } from "./lit-element.jLBm65_O.js";
-const o = t`
-  :host {
-    box-sizing: border-box;
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit;
-  }
-
-  [hidden],
-  :not(:defined):not(video-js) {
-    display: initial;
-    visibility: hidden !important;
-    width: 0 !important;
-    height: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    border: none !important;
-  }
-
-  ::-webkit-scrollbar {
-    width: 17px;
-    height: 17px;
-  }
-
-  ::-webkit-scrollbar-button:decrement {
-    height: 0;
-  }
-
-  ::-webkit-scrollbar-button:increment {
-    height: 0;
-  }
-
-  ::-webkit-scrollbar-button:decrement:horizontal {
-    width: 0;
-  }
-
-  ::-webkit-scrollbar-button:increment:horizontal {
-    width: 0;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 13px;
-    background: var(--cx-color-neutral-400);
-    background-clip: padding-box;
-    border: 7px solid rgba(0, 0, 0, 0);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--cx-color-neutral-500);
-    background-clip: padding-box;
-    border: 4px solid rgba(0, 0, 0, 0);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    min-height: 50px;
-  }
-
-  ::-webkit-scrollbar-button:vertical:start:increment,
-  ::-webkit-scrollbar-button:vertical:end:decrement,
-  ::-webkit-scrollbar-button:horizontal:start:increment,
-  ::-webkit-scrollbar-button:horizontal:end:decrement {
-    display: none;
-  }
-`;
-export {
-  o as c
-};

package/library/chunks/confirm-popover.BNjRvnN0.js

@@ -1,288 +0,0 @@
-import { C as _ } from "./button.DS64Tr8Z.js";
-import { C as u, D as h } from "./dialog.BdXQkCKY.js";
-import g from "../components/dropdown.js";
-import { C as x } from "./typography.oDzoLbZS.js";
-import { n as e, C as b } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as y } from "./component.styles.DMSLciL5.js";
-import { c as w } from "./custom-element.L4WJXn1j.js";
-import { L as $ } from "./i18n.BUW7B9hr.js";
-import { i as z, x as d } from "./lit-element.jLBm65_O.js";
-import { e as m } from "./query.BBf1UFkC.js";
-import { e as a } from "./class-map.BiVq-cVR.js";
-var f = /* @__PURE__ */ ((t) => (t.Horizontal = "horizontal", t.HorizontalReverse = "horizontal-reverse", t.Vertical = "vertical", t.VerticalReverse = "vertical-reverse", t))(f || {}), v = /* @__PURE__ */ ((t) => (t.Center = "center", t.End = "end", t.Start = "start", t))(v || {});
-const S = z`
-  .confirm-popover--dropdown .confirm-popover__dropdown-content {
-    display: flex;
-    flex-direction: column;
-    padding: var(--cx-spacing-medium);
-    width: max-content;
-    text-align: center;
-  }
-
-  .confirm-popover cx-divider {
-    --spacing: var(--cx-spacing-medium);
-  }
-
-  .confirm-popover .confirm-popover__actions {
-    display: flex;
-    gap: var(--cx-spacing-medium);
-  }
-
-  .confirm-popover--dialog {
-    --width: var(--confirm-popover-dialog-width);
-  }
-
-  /** Horizontal direction */
-  .confirm-popover__actions--direction-horizontal {
-    flex-direction: row;
-  }
-
-  .confirm-popover__actions--direction-horizontal-reverse {
-    flex-direction: row-reverse;
-  }
-
-  .confirm-popover__actions--direction-horizontal.confirm-popover__actions--alignment-end,
-  .confirm-popover__actions--direction-horizontal-reverse.confirm-popover__actions--alignment-start {
-    justify-content: flex-end;
-  }
-
-  .confirm-popover__actions--direction-horizontal.confirm-popover__actions--alignment-start,
-  .confirm-popover__actions--direction-horizontal-reverse.confirm-popover__actions--alignment-end {
-    justify-content: flex-start;
-  }
-
-  .confirm-popover__actions--direction-horizontal.confirm-popover__actions--alignment-center,
-  .confirm-popover__actions--direction-horizontal-reverse.confirm-popover__actions--alignment-center {
-    justify-content: center;
-  }
-
-  /** Vertical direction */
-  .confirm-popover__actions--direction-vertical {
-    flex-direction: column;
-  }
-
-  .confirm-popover__actions--direction-vertical-reverse {
-    flex-direction: column-reverse;
-  }
-
-  .confirm-popover__actions--direction-vertical.confirm-popover__actions--alignment-start,
-  .confirm-popover__actions--direction-vertical-reverse.confirm-popover__actions--alignment-start {
-    align-items: flex-start;
-  }
-
-  .confirm-popover__actions--direction-vertical.confirm-popover__actions--alignment-end,
-  .confirm-popover__actions--direction-vertical-reverse.confirm-popover__actions--alignment-end {
-    align-items: flex-end;
-  }
-
-  .confirm-popover__actions--direction-vertical.confirm-popover__actions--alignment-center,
-  .confirm-popover__actions--direction-vertical-reverse.confirm-popover__actions--alignment-center {
-    align-items: center;
-  }
-
-  /** Dropdown variant */
-  .confirm-popover--dropdown .confirm-popover__actions {
-    justify-content: center;
-    margin-top: var(--cx-spacing-small);
-  }
-
-  /** Buttons */
-  .confirm-popover__confirm-button {
-    --background-color: var(
-      --confirm-button-background-color,
-      var(--cx-color-danger)
-    );
-    --color: var(--confirm-button-color, var(--cx-color-neutral-0));
-  }
-
-  .confirm-popover__cancel-button {
-    --background-color: var(
-      --cancel-button-background-color,
-      var(--cx-color-primary-500)
-    );
-    --color: var(--cancel-button-color, var(--cx-color-neutral-0));
-  }
-`;
-var D = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (t, n, s, c) => {
-  for (var i = c > 1 ? void 0 : c ? C(n, s) : n, p = t.length - 1, l; p >= 0; p--)
-    (l = t[p]) && (i = (c ? l(n, s, i) : l(i)) || i);
-  return c && i && D(n, s, i), i;
-};
-let o = class extends b {
-  constructor() {
-    super(...arguments), this.localize = new $(this), this.message = "", this.disabled = !1, this.buttonsDirection = f.Horizontal, this.buttonsAlignment = v.End, this.dividerPosition = h.Header, this.dialogLabel = "", this.confirmText = "", this.cancelText = "", this.variant = "dropdown", this.boundary = document.body;
-  }
-  get open() {
-    return this.variant === "dialog" ? this.dialog.open : this.dropdown.open;
-  }
-  hide() {
-    this.variant === "dialog" ? this.dialog.hide() : this.dropdown.hide();
-  }
-  show() {
-    this.variant === "dialog" ? this.dialog.show() : this.dropdown.show();
-  }
-  confirm() {
-    this.emit("cx-confirm").defaultPrevented || this.hide();
-  }
-  cancel() {
-    this.emit("cx-cancel").defaultPrevented || this.hide();
-  }
-  handleSlotClick() {
-    if (this.disabled) {
-      this.confirm();
-      return;
-    }
-    this.variant === "dialog" && (this.dialog.open ? this.dialog.hide() : this.dialog.show());
-  }
-  renderSlot() {
-    return d`<slot
-      class="confirm-popover__trigger"
-      name="trigger"
-      slot="trigger"
-      @click=${this.handleSlotClick}
-    ></slot>`;
-  }
-  renderDialog() {
-    return d`${this.renderSlot()}
-      <cx-dialog
-        part="dialog"
-        label=${this.dialogLabel || this.localize.term("confirm")}
-        divider-position=${this.dividerPosition}
-        .boundary=${this.boundary}
-        class=${a({
-      "confirm-popover": !0,
-      "confirm-popover--dialog": !0
-    })}
-      >
-        <cx-typography variant="body2">${this.message}</cx-typography>
-        <div
-          part="actions"
-          class=${a({
-      "confirm-popover__actions": !0,
-      [`confirm-popover__actions--direction-${this.buttonsDirection}`]: !0,
-      [`confirm-popover__actions--alignment-${this.buttonsAlignment}`]: !0
-    })}
-          slot="footer"
-        >
-          <cx-button
-            part="confirm-button"
-            class="confirm-popover__confirm-button"
-            @click=${this.confirm}
-            variant="custom"
-          >
-            ${this.confirmText || this.localize.term("confirm")}
-          </cx-button>
-          <cx-button
-            part="cancel-button"
-            class="confirm-popover__cancel-button"
-            @click=${this.cancel}
-            variant="custom"
-          >
-            ${this.cancelText || this.localize.term("cancel")}
-          </cx-button>
-        </div>
-        <div part="footer" class="confirm-popover__footer">
-          <slot name="footer"></slot>
-        </div>
-      </cx-dialog>`;
-  }
-  renderDropdown() {
-    return d`<cx-dropdown
-      part="dropdown"
-      class=${a({
-      "confirm-popover": !0,
-      "confirm-popover--dropdown": !0
-    })}
-      no-header
-      ?disabled=${this.disabled}
-      ?hoist=${!this.boundary || this.boundary === document.body}
-    >
-      ${this.renderSlot()}
-      <div class="confirm-popover__dropdown-content">
-        <cx-typography variant="body2">${this.message}</cx-typography>
-        <div
-          part="actions"
-          class=${a({
-      "confirm-popover__actions": !0,
-      [`confirm-popover__actions--direction-${this.buttonsDirection}`]: !0
-      /** Dropdown variant alignment is always center */
-    })}
-          slot="footer"
-        >
-          <cx-button
-            part="confirm-button"
-            class="confirm-popover__confirm-button"
-            @click=${this.confirm}
-            variant="custom"
-          >
-            ${this.confirmText || this.localize.term("confirm")}
-          </cx-button>
-          <cx-button
-            part="cancel-button"
-            class="confirm-popover__cancel-button"
-            @click=${this.cancel}
-            variant="custom"
-          >
-            ${this.cancelText || this.localize.term("cancel")}
-          </cx-button>
-        </div>
-        <div part="footer" class="confirm-popover__footer" slot="footer">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-    </cx-dropdown>`;
-  }
-  render() {
-    return this.variant === "dialog" ? this.renderDialog() : this.renderDropdown();
-  }
-};
-o.styles = [y, S];
-o.dependencies = {
-  "cx-button": _,
-  "cx-dialog": u,
-  "cx-dropdown": g,
-  "cx-typography": x
-};
-r([
-  m("cx-dropdown")
-], o.prototype, "dropdown", 2);
-r([
-  m("cx-dialog")
-], o.prototype, "dialog", 2);
-r([
-  e({ reflect: !0, type: String })
-], o.prototype, "message", 2);
-r([
-  e({ reflect: !0, type: Boolean })
-], o.prototype, "disabled", 2);
-r([
-  e({ attribute: "buttons-direction", reflect: !0, type: String })
-], o.prototype, "buttonsDirection", 2);
-r([
-  e({ attribute: "buttons-alignment", reflect: !0, type: String })
-], o.prototype, "buttonsAlignment", 2);
-r([
-  e({ attribute: "divider-position", reflect: !0, type: String })
-], o.prototype, "dividerPosition", 2);
-r([
-  e({ attribute: "dialog-label", reflect: !0, type: String })
-], o.prototype, "dialogLabel", 2);
-r([
-  e({ attribute: "confirm-text", reflect: !0, type: String })
-], o.prototype, "confirmText", 2);
-r([
-  e({ attribute: "cancel-text", reflect: !0, type: String })
-], o.prototype, "cancelText", 2);
-r([
-  e({ reflect: !0 })
-], o.prototype, "variant", 2);
-r([
-  e({ type: Object })
-], o.prototype, "boundary", 2);
-o = r([
-  w("cx-confirm-popover")
-], o);
-export {
-  o as C,
-  f as a
-};

package/library/chunks/dot-pagination.CIVxMAAS.js

@@ -1,325 +0,0 @@
-import { n as a, C as P } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as F } from "./component.styles.DMSLciL5.js";
-import { O as C } from "./index.Cpamj0jB.js";
-import { c as z } from "./custom-element.L4WJXn1j.js";
-import { L as S } from "./i18n.BUW7B9hr.js";
-import { w as m } from "./watch.BCJD77bD.js";
-import { i as O, x as y } from "./lit-element.jLBm65_O.js";
-import { r as j } from "./state.CSDxrqLd.js";
-import { e as H } from "./query.BBf1UFkC.js";
-import { r as K } from "./query-all.i3PyvTUQ.js";
-import { e as L } from "./class-map.BiVq-cVR.js";
-import { o as E } from "./if-defined.BRoBj_Rp.js";
-import { o as D } from "./map.D8heArFD.js";
-import { n as w } from "./when.Dr1es41R.js";
-import R from "../components/tooltip.js";
-const T = O`
-  :host {
-    display: inline-block;
-  }
-
-  :host([orientation='vertical']) {
-    height: 100%;
-  }
-
-  :host([orientation='vertical']) .dot-pagination {
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .dot-pagination {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: var(--cx-spacing-small);
-  }
-
-  .dot-pagination__dot {
-    display: block;
-    cursor: pointer;
-    background: none;
-    border: 0;
-    border-radius: var(--cx-border-radius-circle);
-    width: var(--cx-spacing-small);
-    height: var(--cx-spacing-small);
-    background-color: var(--cx-color-neutral-300);
-    padding: 0;
-    margin: 0;
-  }
-
-  .dot-pagination__dot--active {
-    background-color: var(--cx-color-neutral-500);
-  }
-
-  .dot-pagination__dot--transitioning {
-    cursor: default;
-    opacity: 0.5;
-  }
-
-  .dot-pagination__ellipsis {
-    color: var(--cx-color-neutral-400);
-    font-size: var(--cx-font-size-small);
-    font-weight: var(--cx-font-weight-medium);
-    user-select: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: var(--cx-spacing-small);
-    height: var(--cx-spacing-small);
-  }
-
-  /* Focus styles */
-  .dot-pagination__dot:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  /* Responsive adjustments */
-  @media (max-width: 640px) {
-    .dot-pagination {
-      gap: var(--cx-spacing-x-small);
-      padding: var(--cx-spacing-medium);
-    }
-  }
-
-  /* High contrast mode support */
-  @media (prefers-contrast: high) {
-    .dot-pagination__dot {
-      border: 1px solid var(--cx-color-neutral-600);
-    }
-
-    .dot-pagination__dot--active {
-      border-color: var(--cx-color-neutral-700);
-    }
-  }
-
-  /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    .dot-pagination__dot {
-      transition: none;
-    }
-  }
-`;
-var B = Object.defineProperty, V = Object.getOwnPropertyDescriptor, i = (t, n, e, c) => {
-  for (var l = c > 1 ? void 0 : c ? V(n, e) : n, r = t.length - 1, s; r >= 0; r--)
-    (s = t[r]) && (l = (c ? s(n, e, l) : s(l)) || l);
-  return c && l && B(n, e, l), l;
-};
-let o = class extends P {
-  constructor() {
-    super(...arguments), this.localize = new S(this), this.activeIndex = 0, this.totalItemsCount = 0, this.visibleItemsCount = 1, this.step = 1, this.centerDots = 5, this.frontDots = 3, this.backDots = 3, this.loop = !1, this.orientation = C.Horizontal, this.transitioning = !1, this.tooltipPlacement = void 0, this.tooltipDescription = void 0, this.description = void 0, this.controlIds = [], this.dots = {
-      back: [],
-      backEllipsis: !1,
-      center: [],
-      front: [],
-      frontEllipsis: !1
-    };
-  }
-  calculateDots() {
-    const {
-      activeIndex: t,
-      backDots: n,
-      centerDots: e,
-      frontDots: c,
-      loop: l,
-      step: r,
-      totalItemsCount: s,
-      visibleItemsCount: p
-    } = this, U = s % p !== 0 ? Math.ceil(s / p) * p : s, f = l ? U : s, I = f - s, $ = l ? f : f - (p - r), M = I >= r ? $ - I : $, g = s > 0 ? Math.max(1, Math.ceil(M / r)) : 0, v = Math.floor(e / 2), _ = Math.floor(t / r), d = {
-      back: [],
-      backEllipsis: !1,
-      center: [],
-      front: [],
-      frontEllipsis: !1
-    }, N = c + e + n, x = l ? f : Math.max(0, f - p);
-    if (g <= N)
-      d.front = Array.from(
-        { length: g },
-        (u, h) => Math.min(h * r, x)
-      );
-    else {
-      d.frontEllipsis = _ > c + v, d.backEllipsis = _ < g - n - v - 1, d.front = Array.from(
-        { length: c },
-        (k, b) => Math.min(b * r, x)
-      ), d.back = Array.from(
-        { length: n },
-        (k, b) => Math.min((g - n + b) * r, x)
-      );
-      let u, h;
-      d.frontEllipsis ? d.backEllipsis ? (u = _ - v, h = u + e) : (h = g - n, u = h - e) : (u = c, h = u + e), d.center = Array.from({ length: h - u }, (k, b) => {
-        const A = (u + b) * r;
-        return Math.min(A, x);
-      });
-    }
-    this.dots = d;
-  }
-  /**
-   * Carousel focus active item when key is pressed from pagination
-   */
-  focus() {
-    this.activeDot?.focus();
-  }
-  handleDotClick(t) {
-    const n = t.currentTarget, e = Number(n.dataset.index);
-    e === this.activeIndex || isNaN(e) || (this.activeIndex = e, this.emit("cx-dot-pagination-change", {
-      detail: {
-        active: e
-      }
-    }));
-  }
-  handleKeyDown(t) {
-    const n = t.target;
-    if (t.key === "Enter" || t.key === " ") {
-      t.preventDefault(), n.click();
-      return;
-    }
-    const e = this.orientation === C.Horizontal, c = e ? ["ArrowRight"] : ["ArrowDown"], l = e ? ["ArrowLeft"] : ["ArrowUp"];
-    if (![...c, ...l].includes(t.key))
-      return;
-    t.preventDefault(), t.stopPropagation();
-    const r = Array.from(this.allDots), s = r.indexOf(n);
-    if (s === -1)
-      return;
-    let p = c.includes(t.key) ? s + 1 : s - 1;
-    this.loop ? p = (p + r.length) % r.length : p = Math.max(0, Math.min(p, r.length - 1)), r[p]?.focus();
-  }
-  handleFocus() {
-    this.emit("cx-dot-pagination-focus");
-  }
-  renderEllipsis() {
-    return y`
-      <span part="ellipsis" class="dot-pagination__ellipsis" aria-hidden="true">
-        •••
-      </span>
-    `;
-  }
-  renderDot(t) {
-    const n = t + 1, e = y`
-      <button
-        part="dot${this.activeIndex === t ? " dot--active" : ""}"
-        class=${L({
-      "dot-pagination__dot": !0,
-      "dot-pagination__dot--active": t === this.activeIndex,
-      "dot-pagination__dot--transitioning": this.transitioning
-    })}
-        role="tab"
-        type="button"
-        aria-selected=${t === this.activeIndex ? "true" : "false"}
-        aria-label=${this.localize.term("slideNum", n)}
-        aria-controls=${E(this.controlIds[t])}
-        tabindex="0"
-        data-index=${t}
-        ?disabled=${this.transitioning}
-        @click=${this.handleDotClick}
-        @keydown=${this.handleKeyDown}
-        @focus=${this.handleFocus}
-      ></button>
-    `;
-    return w(
-      this.tooltipPlacement,
-      () => y`
-        <cx-tooltip
-          content=${this.tooltipDescription || t + 1}
-          placement=${this.tooltipPlacement}
-        >
-          ${e}
-        </cx-tooltip>
-      `,
-      () => e
-    );
-  }
-  render() {
-    return y`
-      <div
-        part="base"
-        class="dot-pagination"
-        role="tablist"
-        aria-roledescription=${E(this.description || void 0)}
-        aria-label=${this.localize.term("pagination")}
-      >
-        ${D(this.dots.front, (t) => this.renderDot(t))}
-        ${w(this.dots.frontEllipsis, () => this.renderEllipsis())}
-        ${D(this.dots.center, (t) => this.renderDot(t))}
-        ${w(this.dots.backEllipsis, () => this.renderEllipsis())}
-        ${D(this.dots.back, (t) => this.renderDot(t))}
-      </div>
-    `;
-  }
-};
-o.styles = [F, T];
-o.dependencies = { "cx-tooltip": R };
-i([
-  H(".dot-pagination__dot--active")
-], o.prototype, "activeDot", 2);
-i([
-  K(".dot-pagination__dot")
-], o.prototype, "allDots", 2);
-i([
-  a({ attribute: "active-index", reflect: !0, type: Number })
-], o.prototype, "activeIndex", 2);
-i([
-  a({ attribute: "total-items-count", reflect: !0, type: Number })
-], o.prototype, "totalItemsCount", 2);
-i([
-  a({ attribute: "visible-items-count", reflect: !0, type: Number })
-], o.prototype, "visibleItemsCount", 2);
-i([
-  a({ reflect: !0, type: Number })
-], o.prototype, "step", 2);
-i([
-  a({ attribute: "center-dots", reflect: !0, type: Number })
-], o.prototype, "centerDots", 2);
-i([
-  a({ attribute: "front-dots", reflect: !0, type: Number })
-], o.prototype, "frontDots", 2);
-i([
-  a({ attribute: "back-dots", reflect: !0, type: Number })
-], o.prototype, "backDots", 2);
-i([
-  a({ reflect: !0, type: Boolean })
-], o.prototype, "loop", 2);
-i([
-  a({ reflect: !0, type: String })
-], o.prototype, "orientation", 2);
-i([
-  a({ reflect: !0, type: Boolean })
-], o.prototype, "transitioning", 2);
-i([
-  a({ attribute: "tooltip-placement", reflect: !0, type: String })
-], o.prototype, "tooltipPlacement", 2);
-i([
-  a({ attribute: "tooltip-description", reflect: !0, type: String })
-], o.prototype, "tooltipDescription", 2);
-i([
-  a({ reflect: !0, type: String })
-], o.prototype, "description", 2);
-i([
-  a({
-    attribute: "control-ids",
-    converter: {
-      fromAttribute: (t) => t?.split(" ") ?? [],
-      toAttribute: (t) => t.join(" ")
-    },
-    reflect: !0
-  })
-], o.prototype, "controlIds", 2);
-i([
-  j()
-], o.prototype, "dots", 2);
-i([
-  m("centerDots", { waitUntilFirstUpdate: !0 }),
-  m("frontDots", { waitUntilFirstUpdate: !0 }),
-  m("backDots", { waitUntilFirstUpdate: !0 }),
-  m("activeIndex", { waitUntilFirstUpdate: !0 }),
-  m("step", { waitUntilFirstUpdate: !0 }),
-  m("visibleItemsCount", { waitUntilFirstUpdate: !0 }),
-  m("loop", { waitUntilFirstUpdate: !0 }),
-  m("totalItemsCount")
-], o.prototype, "calculateDots", 1);
-o = i([
-  z("cx-dot-pagination")
-], o);
-export {
-  o as C,
-  T as d
-};