@orangelogic/design-system 2.70.0 → 2.71.0

package/library/chunks/{list-editor.CIAAFPco.js → list-editor.rlWs0RYN.js}

@@ -1,22 +1,22 @@
-import { C as _ } from "./button.CAAJPQFu.js";
-import { C as q, D as G } from "./dialog.qSV5AjOE.js";
+import { C as _ } from "./button.D6S0sAOO.js";
+import { C as q, D as G } from "./dialog.n5g61iHs.js";
 import j from "../components/grid.js";
 import P from "../components/grid-item.js";
 import S from "../components/input.js";
 import R from "../components/line-clamp.js";
-import { C as F } from "./option.ByVbmxUQ.js";
+import { C as F } from "./option.CgM5bwtt.js";
 import B from "../components/radio.js";
 import K from "../components/radio-group.js";
 import U from "../components/select.js";
 import E from "../components/space.js";
-import { C as H, H as V } from "./table.wVHv1Xze.js";
+import { C as H, H as V } from "./table.DNwNmw8a.js";
 import { C as L } from "./typography.oDzoLbZS.js";
 import { n as o, C as T } from "./lib-cortex-element.CVMmyPMC.js";
 import W from "../components/dynamic-select.js";
 import { c as D } from "./component.styles.DMSLciL5.js";
 import { c as M } from "./custom-element.L4WJXn1j.js";
 import { d as J } from "./debounce.DaHuiSGU.js";
-import { L as z } from "./i18n.C0iakJkV.js";
+import { L as z } from "./i18n.BU7mYVLM.js";
 import { w as g } from "./watch.BCJD77bD.js";
 import { a as X } from "./_commonjsHelpers.DQNKXVTB.js";
 import { i as O, x as l } from "./lit-element.jLBm65_O.js";
@@ -28,8 +28,8 @@ import { o as Q } from "./map.D8heArFD.js";
 import { c as b } from "./repeat.DbF2p5ae.js";
 import { n as N } from "./when.Dr1es41R.js";
 import { t as ee } from "./toString.CL_lYXbK.js";
-import ae from "../components/icon-button.js";
-import { C as te } from "./image.B3WjaCXP.js";
+import { C as ae } from "./icon-button.Dxz2J4cg.js";
+import { C as te } from "./image.Q7doiTcu.js";
 import { a as ie, D as $ } from "./asset.CG_yXtWK.js";
 import { a as ne } from "./index.Cpamj0jB.js";
 import { A as v } from "./content-builder.B4Tqoc6M.js";

package/library/chunks/{option.ByVbmxUQ.js → option.CgM5bwtt.js}

@@ -1,7 +1,7 @@
 import { n as s, C as x } from "./lib-cortex-element.CVMmyPMC.js";
 import { c as m } from "./component.styles.DMSLciL5.js";
 import { c as v } from "./custom-element.L4WJXn1j.js";
-import { L as g } from "./i18n.C0iakJkV.js";
+import { L as g } from "./i18n.BU7mYVLM.js";
 import { w as d } from "./watch.BCJD77bD.js";
 import { i as b, x as h } from "./lit-element.jLBm65_O.js";
 import { r as f } from "./state.CSDxrqLd.js";

package/library/chunks/pagination.I2BZVSB2.js

@@ -0,0 +1,430 @@
+import _ from "../components/space.js";
+import { n, C as b } from "./lib-cortex-element.CVMmyPMC.js";
+import { C as y, I } from "./icon-button.Dxz2J4cg.js";
+import { c as f } from "./custom-element.L4WJXn1j.js";
+import { L as C } from "./i18n.BU7mYVLM.js";
+import { c as l } from "./math.DqTA6ya4.js";
+import { w as x } from "./watch.BCJD77bD.js";
+import { i as z, x as s } from "./lit-element.jLBm65_O.js";
+import { r as d } from "./state.CSDxrqLd.js";
+import { e as S } from "./class-map.BiVq-cVR.js";
+import { c as m } from "./repeat.DbF2p5ae.js";
+import { n as g } from "./when.Dr1es41R.js";
+import { C as $ } from "./button.D6S0sAOO.js";
+import v from "../components/input.js";
+import { C as w } from "./option.CgM5bwtt.js";
+import P from "../components/select.js";
+import B from "../components/tooltip.js";
+import { C as N } from "./typography.oDzoLbZS.js";
+import { c as k } from "./component.styles.DMSLciL5.js";
+var c = /* @__PURE__ */ ((t) => (t.Both = "both", t.Pages = "pages", t.Rows = "rows", t))(c || {});
+const O = z`
+  ${k}
+
+  :host {
+    --width: 100px;
+    display: block;
+    width: fit-content;
+  }
+
+  cx-typography::part(base) {
+    margin-block: 0;
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--cx-spacing-small);
+    font-size: var(--cx-font-size-small);
+  }
+
+  .pagination .pagination__label__container {
+    display: inline-flex;
+    gap: var(--cx-spacing-small);
+    align-items: center;
+  }
+
+  .pagination .pagination__select::part(combobox) {
+    width: var(--width);
+  }
+
+  .pagination .pagination__navigation-buttons {
+    display: flex;
+    align-items: center;
+    gap: 0;
+  }
+
+  .pagination .pagination_count,
+  .pagination .pagination__pages {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .pagination .pagination_count {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cx-spacing-3x-small);
+  }
+
+  .pagination .pagination__page-input {
+    font-weight: var(--cx-font-weight-medium);
+    --cx-input-border-color: transparent;
+  }
+
+  .pagination .pagination__page-input::part(base) {
+    border-radius: var(--cx-border-radius-small);
+    font-size: var(--pagination-input-font-size, var(--cx-input-font-size-small));
+  }
+
+  .pagination .pagination__page-input::part(form-control) {
+    margin: 0;
+  }
+
+  .pagination .pagination__page-input::part(form-control-input) {
+    min-width: 0;
+  }
+
+  .pagination .pagination__page-input::part(input),
+  .pagination .pagination__page-input::part(auto-grow-mirror) {
+    text-align: center;
+    padding: 0 var(--cx-spacing-2x-small);
+    line-height: 1;
+  }
+
+  .pagination__page--active::part(base) {
+    color: var(--cx-color-primary);
+  }
+`;
+var D = Object.defineProperty, F = Object.getOwnPropertyDescriptor, a = (t, i, p, r) => {
+  for (var o = r > 1 ? void 0 : r ? F(i, p) : i, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (o = (r ? u(i, p, o) : u(o)) || o);
+  return r && o && D(i, p, o), o;
+};
+let e = class extends b {
+  constructor() {
+    super(...arguments), this.localize = new C(this), this.count = 0, this.pageSizeOptions = [10, 20, 50, 100], this.pageSize = this.pageSizeOptions[0], this.label = this.localize.term("rowsPerPage"), this.showFirst = !1, this.showLast = !1, this.showPaginationButtons = !1, this.paginationButtonCount = 5, this.paginationCounter = c.Rows, this.showPaginationInput = !1, this.backIconName = "chevron_left", this.nextIconName = "chevron_right", this.iconButtonSize = I.Medium, this._pageIndex = 1, this._pageCount = Math.max(1, Math.ceil(this.count / this.pageSize)), this._pageInputValue = this._pageIndex.toString();
+  }
+  get pageIndex() {
+    return this._pageIndex;
+  }
+  set pageIndex(t) {
+    this._pageIndex = l(t, 1, this._pageCount);
+  }
+  get pageStart() {
+    return l((this._pageIndex - 1) * this.pageSize + 1, 0, this.count);
+  }
+  get pageEnd() {
+    return l(this._pageIndex * this.pageSize, 0, this.count);
+  }
+  get prevDisabled() {
+    return this._pageIndex <= 1;
+  }
+  get nextDisabled() {
+    return this._pageIndex >= this._pageCount;
+  }
+  updatePageCount() {
+    const t = Number.isFinite(this.pageSize) && this.pageSize > 0 ? this.pageSize : 1;
+    this._pageCount = Math.max(1, Math.ceil(this.count / t)), this.pageIndex = l(this.pageIndex, 1, this._pageCount);
+  }
+  handlePageSizeSelectChange(t) {
+    const i = t.target;
+    i && (this.pageSize = Number(i.value), this.pageIndex = 1);
+  }
+  handleFirst() {
+    this._pageIndex = 1;
+  }
+  handleBack() {
+    this._pageIndex -= 1, this._pageIndex < 1 && this.handleFirst();
+  }
+  handleForward() {
+    this._pageIndex += 1, this._pageIndex > this._pageCount && this.handleLast();
+  }
+  handleLast() {
+    this._pageIndex = this._pageCount;
+  }
+  commitPageInputValue() {
+    const t = Number.parseInt(this._pageInputValue, 10);
+    if (!Number.isFinite(t)) {
+      this._pageInputValue = this.pageIndex.toString();
+      return;
+    }
+    this.pageIndex = l(t, 1, this._pageCount), this._pageInputValue = this.pageIndex.toString();
+  }
+  handlePageInput(t) {
+    const i = t.target;
+    i && (this._pageInputValue = i.value);
+  }
+  handlePageInputKeyDown(t) {
+    t.key === "Enter" && (t.preventDefault(), this.commitPageInputValue());
+  }
+  handlePageInputBlur() {
+    this._pageInputValue = this.pageIndex.toString();
+  }
+  renderCounterInput() {
+    return s`<cx-input
+      part="pagination-input"
+      class="pagination__page-input"
+      type="text"
+      size="small"
+      auto-grow
+      inputmode="numeric"
+      pattern="[0-9]*"
+      aria-label=${this.localize.term("jump")}
+      .value=${this._pageInputValue}
+      @cx-input=${this.handlePageInput}
+      @keydown=${this.handlePageInputKeyDown}
+      @cx-blur=${this.handlePageInputBlur}
+    ></cx-input>`;
+  }
+  async handleCountChange() {
+    this.updatePageCount();
+  }
+  handlePageChange() {
+    this._pageInputValue = this.pageIndex.toString(), this.emit("cx-page-change", {
+      detail: {
+        pageIndex: this._pageIndex
+      }
+    });
+  }
+  handlePageSizeChange() {
+    this.updatePageCount(), this.emit("cx-page-size-change", {
+      detail: {
+        pageSize: this.pageSize
+      }
+    });
+  }
+  handlePageClick(t) {
+    const i = t.target;
+    i && (this.pageIndex = Number(i.dataset.page));
+  }
+  renderPageButton(t) {
+    return s`
+      <cx-button
+        data-page=${t}
+        variant="text"
+        size="small"
+        class=${S({
+      pagination__page: !0,
+      "pagination__page--active": t === this.pageIndex
+    })}
+      >
+        ${t}
+      </cx-button>
+    `;
+  }
+  renderPageButtons() {
+    const t = Math.floor((this.paginationButtonCount - 1) / 2), i = Math.ceil((this.paginationButtonCount - 1) / 2), p = Math.max(
+      1,
+      this._pageCount - this.pageIndex + t + 1 < this.paginationButtonCount ? this._pageCount - this.paginationButtonCount + 1 : this.pageIndex - t
+    ), r = Math.min(
+      this._pageCount,
+      this.pageIndex <= i ? this.paginationButtonCount : this.pageIndex + i
+    );
+    return s`
+      <div class="pagination__pages" @click=${this.handlePageClick}>
+        ${m(
+      Array.from({ length: r - p + 1 }, (o, h) => h + p),
+      (o) => o,
+      (o) => this.renderPageButton(o)
+    )}
+      </div>
+    `;
+  }
+  renderPageCount() {
+    return this.showPaginationInput ? s`<cx-space class="pagination_count">
+      ${this.renderCounterInput()}
+      <cx-typography variant="body3">${this.localize.term("itemOfTotal", "", this._pageCount)}</cx-typography>
+    </cx-space>` : s`<cx-typography variant="body3" class="pagination_count">
+        ${this.localize.term("itemOfTotal", this.pageIndex, this._pageCount)}
+      </cx-typography>`;
+  }
+  renderRowCount() {
+    return s`<cx-typography variant="body3" class="pagination_count">
+      ${this.localize.term(
+      "itemRangeOfTotal",
+      this.pageStart,
+      this.pageEnd,
+      this.count
+    )}
+    </cx-typography>`;
+  }
+  render() {
+    return s`
+      <div class="pagination">
+        ${g(
+      this.pageSizeOptions.length > 1,
+      () => s`
+            <label class="pagination__label__container">
+              <cx-typography variant="body3" class="pagination__label">
+                ${this.label}
+              </cx-typography>
+              <cx-select
+                class="pagination__select"
+                size="small"
+                hoist
+                value=${this.pageSize.toString()}
+                @cx-change=${this.handlePageSizeSelectChange}
+              >
+                ${m(
+        this.pageSizeOptions,
+        (t) => t,
+        (t) => s`
+                    <cx-option value=${t}>${t}</cx-option>
+                  `
+      )}
+              </cx-select>
+            </label>
+          `
+    )}
+        ${g(
+      this.paginationCounter === c.Both || this.paginationCounter === c.Rows,
+      () => this.renderRowCount(),
+      () => this.renderPageCount()
+    )}
+        <div class="pagination__navigation-buttons">
+          ${g(
+      this.showFirst,
+      () => s`
+              <cx-tooltip hoist content=${this.localize.term("first")}>
+                <cx-icon-button
+                  class="pagination__first"
+                  label=${this.localize.term("first")}
+                  name="first_page"
+                  size=${this.iconButtonSize}
+                  ?disabled=${this.prevDisabled}
+                  @click=${this.handleFirst}
+                ></cx-icon-button>
+              </cx-tooltip>
+            `
+    )}
+          <cx-tooltip hoist content=${this.localize.term("previous")}>
+            <cx-icon-button
+              part="back-icon"
+              class="pagination__back"
+              label=${this.localize.term("previous")}
+              name=${this.backIconName}
+              size=${this.iconButtonSize}
+              ?disabled=${this.prevDisabled}
+              @click=${this.handleBack}
+            ></cx-icon-button>
+          </cx-tooltip>
+          ${g(
+      this.paginationCounter === c.Both,
+      () => this.renderPageCount()
+    )}
+          ${g(this.showPaginationButtons, () => this.renderPageButtons())}
+          <cx-tooltip hoist content=${this.localize.term("next")}>
+            <cx-icon-button
+              part="next-icon"
+              class="pagination__forward"
+              label=${this.localize.term("next")}
+              name=${this.nextIconName}
+              size=${this.iconButtonSize}
+              ?disabled=${this.nextDisabled}
+              @click=${this.handleForward}
+            ></cx-icon-button>
+          </cx-tooltip>
+          ${g(
+      this.showLast,
+      () => s`
+              <cx-tooltip hoist content=${this.localize.term("last")}>
+                <cx-icon-button
+                  class="pagination__last"
+                  label=${this.localize.term("last")}
+                  name="last_page"
+                  size=${this.iconButtonSize}
+                  ?disabled=${this.nextDisabled}
+                  @click=${this.handleLast}
+                ></cx-icon-button>
+              </cx-tooltip>
+            `
+    )}
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = O;
+e.dependencies = {
+  "cx-button": $,
+  "cx-icon-button": y,
+  "cx-input": v,
+  "cx-option": w,
+  "cx-select": P,
+  "cx-space": _,
+  "cx-tooltip": B,
+  "cx-typography": N
+};
+a([
+  n({ type: Number })
+], e.prototype, "count", 2);
+a([
+  n({
+    attribute: "page-size-options",
+    converter: {
+      fromAttribute: (t) => {
+        const i = (t ?? "").trim().split(/\s+/).map((p) => Number.parseInt(p, 10)).filter((p) => Number.isFinite(p) && p > 0);
+        return i.length ? i : [];
+      },
+      toAttribute: (t) => t.join(" ")
+    },
+    type: String
+  })
+], e.prototype, "pageSizeOptions", 2);
+a([
+  n({ attribute: "page-size", type: Number })
+], e.prototype, "pageSize", 2);
+a([
+  n({ type: String })
+], e.prototype, "label", 2);
+a([
+  n({ attribute: "show-first", type: Boolean })
+], e.prototype, "showFirst", 2);
+a([
+  n({ attribute: "show-last", type: Boolean })
+], e.prototype, "showLast", 2);
+a([
+  n({ attribute: "show-pagination-buttons", type: Boolean })
+], e.prototype, "showPaginationButtons", 2);
+a([
+  n({ attribute: "pagination-button-count", type: Number })
+], e.prototype, "paginationButtonCount", 2);
+a([
+  n({ attribute: "pagination-counter", type: String })
+], e.prototype, "paginationCounter", 2);
+a([
+  n({ attribute: "show-pagination-input", type: Boolean })
+], e.prototype, "showPaginationInput", 2);
+a([
+  n({ attribute: "back-icon-name", type: String })
+], e.prototype, "backIconName", 2);
+a([
+  n({ attribute: "next-icon-name", type: String })
+], e.prototype, "nextIconName", 2);
+a([
+  n({ attribute: "icon-button-size", type: String })
+], e.prototype, "iconButtonSize", 2);
+a([
+  d()
+], e.prototype, "_pageIndex", 2);
+a([
+  d()
+], e.prototype, "_pageCount", 2);
+a([
+  d()
+], e.prototype, "_pageInputValue", 2);
+a([
+  x("count")
+], e.prototype, "handleCountChange", 1);
+a([
+  x(["_pageIndex"])
+], e.prototype, "handlePageChange", 1);
+a([
+  x(["pageSize"])
+], e.prototype, "handlePageSizeChange", 1);
+e = a([
+  f("cx-pagination")
+], e);
+export {
+  e as C,
+  c as P
+};

package/library/chunks/{tab-group.1h51o_Ly.js → tab-group.euL1exrl.js}

@@ -2,7 +2,7 @@ import In from "../components/resize-observer.js";
 import { n as wt, C as Fn } from "./lib-cortex-element.CVMmyPMC.js";
 import { c as Ln } from "./component.styles.DMSLciL5.js";
 import { c as $n } from "./custom-element.L4WJXn1j.js";
-import { L as Nn } from "./i18n.C0iakJkV.js";
+import { L as Nn } from "./i18n.BU7mYVLM.js";
 import { s as Zi } from "./scroll.xtO5yojm.js";
 import { w as ft } from "./watch.BCJD77bD.js";
 import { i as Bn } from "./dom.BQVKDNd8.js";
@@ -17,9 +17,9 @@ import { i as Ji } from "./guard.D4axKaMo.js";
 import { o as tr } from "./map.D8heArFD.js";
 import { o as Ue } from "./style-map.llVFPd__.js";
 import { n as Pe } from "./when.Dr1es41R.js";
-import { C as Yn } from "./button.CAAJPQFu.js";
+import { C as Yn } from "./button.D6S0sAOO.js";
 import Xn from "../components/dropdown.js";
-import qn from "../components/icon-button.js";
+import { C as qn } from "./icon-button.Dxz2J4cg.js";
 import Gn from "../components/menu.js";
 import Kn from "../components/menu-item.js";
 import jn from "../components/tab.js";