@orangelogic/design-system 2.84.0 → 2.85.0

package/library/chunks/{color-swatch-group.P7OmP2yj.js → color-swatch-group.DPGjdQIL.js}

@@ -1,5 +1,5 @@
 import z from "../components/space.js";
-import { C as $ } from "./table.Hdu2SawG.js";
+import { C as $ } from "./table.vctaA5cg.js";
 import { C as k } from "./typography.DJC_UXgs.js";
 import { n as h, C as F } from "./lib-cortex-element.CVMmyPMC.js";
 import { C, a as g } from "./color-swatch.hsIcIXE-.js";

package/library/chunks/{list-editor.DG60pYw-.js → list-editor.DnLRd7ks.js}

@@ -9,7 +9,7 @@ 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.Hdu2SawG.js";
+import { C as H, H as V } from "./table.vctaA5cg.js";
 import { C as L } from "./typography.DJC_UXgs.js";
 import { n as o, C as T } from "./lib-cortex-element.CVMmyPMC.js";
 import W from "../components/dynamic-select.js";

package/library/chunks/{pagination._JRGq9Ld.js → pagination.DC9JIt4s.js}

@@ -1,25 +1,25 @@
-import _ from "../components/space.js";
-import { n, C as b } from "./lib-cortex-element.CVMmyPMC.js";
-import { C as y, I } from "./icon-button.BpwPU4Vg.js";
+import b from "../components/space.js";
+import { n as o, C as _ } from "./lib-cortex-element.CVMmyPMC.js";
+import { C as P, I as y } from "./icon-button.BpwPU4Vg.js";
 import { c as f } from "./custom-element.L4WJXn1j.js";
-import { L as C } from "./i18n.CgwQHLcP.js";
-import { c as l } from "./math.DqTA6ya4.js";
-import { w as x } from "./watch.BCJD77bD.js";
-import { i as z, x as p } 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 r } from "./when.Dr1es41R.js";
-import { C as $ } from "./button.BrIJPc2a.js";
-import v from "../components/input.js";
-import { C as w } from "./option.T4KSh5qy.js";
-import P from "../components/select.js";
-import B from "../components/tooltip.js";
-import { C as N } from "./typography.DJC_UXgs.js";
-import { c as k } from "./component.styles.CRO4Odto.js";
-var c = /* @__PURE__ */ ((t) => (t.Both = "both", t.Pages = "pages", t.Rows = "rows", t))(c || {});
-const O = z`
-  ${k}
+import { L as z } from "./i18n.CgwQHLcP.js";
+import { c as m } from "./math.DqTA6ya4.js";
+import { w as d } from "./watch.BCJD77bD.js";
+import { i as C, x as s } from "./lit-element.jLBm65_O.js";
+import { r as S } from "./state.CSDxrqLd.js";
+import { e as $ } from "./class-map.BiVq-cVR.js";
+import { c as x } from "./repeat.DbF2p5ae.js";
+import { n as g } from "./when.Dr1es41R.js";
+import { C as v } from "./button.BrIJPc2a.js";
+import w from "../components/input.js";
+import { C as I } from "./option.T4KSh5qy.js";
+import B from "../components/select.js";
+import N from "../components/tooltip.js";
+import { C as k } from "./typography.DJC_UXgs.js";
+import { c as F } from "./component.styles.CRO4Odto.js";
+var l = /* @__PURE__ */ ((t) => (t.Both = "both", t.Pages = "pages", t.Rows = "rows", t))(l || {});
+const p = 1, M = C`
+  ${F}
 
   :host {
     --width: 100px;
@@ -94,63 +94,66 @@ const O = z`
     color: var(--cx-color-primary);
   }
 `;
-var M = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (t, i, s, g) => {
-  for (var o = g > 1 ? void 0 : g ? D(i, s) : i, h = t.length - 1, u; h >= 0; h--)
-    (u = t[h]) && (o = (g ? u(i, s, o) : u(o)) || o);
-  return g && o && M(i, s, o), o;
+var O = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (t, i, n, c) => {
+  for (var r = c > 1 ? void 0 : c ? D(i, n) : i, u = t.length - 1, h; u >= 0; u--)
+    (h = t[u]) && (r = (c ? h(i, n, r) : h(r)) || r);
+  return c && r && O(i, n, r), r;
 };
-let e = class extends b {
+let e = class extends _ {
   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();
+    super(...arguments), this.localize = new z(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 = l.Rows, this.showPaginationInput = !1, this.backIconName = "chevron_left", this.nextIconName = "chevron_right", this.iconButtonSize = y.Medium, this.currentPage = p, this._pageInputValue = p.toString();
   }
-  get pageIndex() {
-    return this._pageIndex;
-  }
-  set pageIndex(t) {
-    this._pageIndex = l(t, 1, this._pageCount);
+  get _pageCount() {
+    const t = Number.isFinite(this.pageSize) && this.pageSize > 0 ? this.pageSize : 1;
+    return Math.max(1, Math.ceil(this.count / t));
   }
   get pageStart() {
-    return l((this._pageIndex - 1) * this.pageSize + 1, 0, this.count);
+    return m((this.currentPage - 1) * this.pageSize + 1, 0, this.count);
   }
   get pageEnd() {
-    return l(this._pageIndex * this.pageSize, 0, this.count);
+    return m(this.currentPage * this.pageSize, 0, this.count);
   }
   get prevDisabled() {
-    return this._pageIndex <= 1;
+    return this.currentPage <= p;
   }
   get nextDisabled() {
-    return this._pageIndex >= this._pageCount;
+    return this.currentPage >= this._pageCount;
   }
   get hasMultiplePages() {
     return this._pageCount > 1;
   }
-  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);
+  normalizePage(t) {
+    return Number.isFinite(t) ? m(Math.trunc(t), p, this._pageCount) : p;
+  }
+  willUpdate(t) {
+    if (t.has("count") || t.has("pageSize") || t.has("currentPage")) {
+      const i = this.normalizePage(this.currentPage);
+      i !== this.currentPage && (this.currentPage = i);
+    }
   }
   handlePageSizeSelectChange(t) {
     const i = t.target;
-    i && (this.pageSize = Number(i.value), this.pageIndex = 1);
+    i && (this.pageSize = Number(i.value), this.currentPage = p);
   }
   handleFirst() {
-    this._pageIndex = 1;
+    this.currentPage = p;
   }
   handleBack() {
-    this._pageIndex -= 1, this._pageIndex < 1 && this.handleFirst();
+    this.currentPage = Math.max(p, this.currentPage - 1);
   }
   handleForward() {
-    this._pageIndex += 1, this._pageIndex > this._pageCount && this.handleLast();
+    this.currentPage = Math.min(this._pageCount, this.currentPage + 1);
   }
   handleLast() {
-    this._pageIndex = this._pageCount;
+    this.currentPage = this._pageCount;
   }
   commitPageInputValue() {
     const t = Number.parseInt(this._pageInputValue, 10);
     if (!Number.isFinite(t)) {
-      this._pageInputValue = this.pageIndex.toString();
+      this._pageInputValue = this.currentPage.toString();
       return;
     }
-    this.pageIndex = l(t, 1, this._pageCount), this._pageInputValue = this.pageIndex.toString();
+    this.currentPage = this.normalizePage(t), this._pageInputValue = this.currentPage.toString();
   }
   handlePageInput(t) {
     const i = t.target;
@@ -160,57 +163,54 @@ let e = class extends b {
     t.key === "Enter" && (t.preventDefault(), this.commitPageInputValue());
   }
   handlePageInputBlur() {
-    this._pageInputValue = this.pageIndex.toString();
+    this._pageInputValue = this.currentPage.toString();
   }
   renderCounterInput() {
-    return p`<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();
+    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>`;
   }
   handlePageChange() {
-    this._pageInputValue = this.pageIndex.toString(), this.emit("cx-page-change", {
+    this._pageInputValue = this.currentPage.toString(), this.emit("cx-page-change", {
       detail: {
-        pageIndex: this._pageIndex
+        pageIndex: this.currentPage
       }
     });
   }
   handlePageSizeChange() {
-    this.updatePageCount(), this.emit("cx-page-size-change", {
+    this.emit("cx-page-size-change", {
       detail: {
         pageSize: this.pageSize
       }
     });
   }
   handlePageClick(t) {
-    const i = t.target;
-    i && (this.pageIndex = Number(i.dataset.page));
+    const n = t.target?.dataset.page;
+    n && (this.currentPage = this.normalizePage(Number(n)));
   }
   renderPageButton(t) {
-    return p`<cx-button data-page=${t} variant="text" size="small" class=${S({
+    return s`<cx-button data-page=${t} variant="text" size="small" class=${$({
       pagination__page: !0,
-      "pagination__page--active": t === this.pageIndex
+      "pagination__page--active": t === this.currentPage
     })}>${t}</cx-button>`;
   }
   renderPageButtons() {
-    const t = Math.floor((this.paginationButtonCount - 1) / 2), i = Math.ceil((this.paginationButtonCount - 1) / 2), s = Math.max(
-      1,
-      this._pageCount - this.pageIndex + t + 1 < this.paginationButtonCount ? this._pageCount - this.paginationButtonCount + 1 : this.pageIndex - t
-    ), g = Math.min(
+    const t = Math.floor((this.paginationButtonCount - 1) / 2), i = Math.ceil((this.paginationButtonCount - 1) / 2), n = Math.max(
+      p,
+      this._pageCount - this.currentPage + t + 1 < this.paginationButtonCount ? this._pageCount - this.paginationButtonCount + 1 : this.currentPage - t
+    ), c = Math.min(
       this._pageCount,
-      this.pageIndex <= i ? this.paginationButtonCount : this.pageIndex + i
+      this.currentPage <= i ? this.paginationButtonCount : this.currentPage + i
     );
-    return p`<div class="pagination__pages" @click=${this.handlePageClick}>${m(
-      Array.from({ length: g - s + 1 }, (o, h) => h + s),
-      (o) => o,
-      (o) => this.renderPageButton(o)
+    return s`<div class="pagination__pages" @click=${this.handlePageClick}>${x(
+      Array.from({ length: c - n + 1 }, (r, u) => u + n),
+      (r) => r,
+      (r) => this.renderPageButton(r)
     )}</div>`;
   }
   renderPageCount() {
-    return !this.showPaginationInput || !this.hasMultiplePages ? p`<cx-typography variant="body3" class="pagination_count">${this.localize.term("itemOfTotal", this.pageIndex, this._pageCount)}</cx-typography>` : p`<cx-space class="pagination_count">${this.renderCounterInput()}<cx-typography variant="body3">${this.localize.term("itemOfTotal", "", this._pageCount)}</cx-typography></cx-space>`;
+    return !this.showPaginationInput || !this.hasMultiplePages ? s`<cx-typography variant="body3" class="pagination_count">${this.localize.term("itemOfTotal", this.currentPage, this._pageCount)}</cx-typography>` : s`<cx-space class="pagination_count">${this.renderCounterInput()}<cx-typography variant="body3">${this.localize.term("itemOfTotal", "", this._pageCount)}</cx-typography></cx-space>`;
   }
   renderRowCount() {
-    return p`<cx-typography variant="body3" class="pagination_count">${this.localize.term(
+    return s`<cx-typography variant="body3" class="pagination_count">${this.localize.term(
       "itemRangeOfTotal",
       this.pageStart,
       this.pageEnd,
@@ -218,55 +218,55 @@ let e = class extends b {
     )}</cx-typography>`;
   }
   render() {
-    return p`<div class="pagination">${r(
+    return s`<div class="pagination">${g(
       this.pageSizeOptions.length > 1,
-      () => p`<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(
+      () => 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}>${x(
         this.pageSizeOptions,
         (t) => t,
-        (t) => p`<cx-option value=${t}>${t}</cx-option>`
+        (t) => s`<cx-option value=${t}>${t}</cx-option>`
       )}</cx-select></label>`
     )}
-        ${r(
-      this.paginationCounter === c.Both || this.paginationCounter === c.Rows,
+        ${g(
+      this.paginationCounter === l.Both || this.paginationCounter === l.Rows,
       () => this.renderRowCount(),
       () => this.renderPageCount()
     )}
-        ${r(
+        ${g(
       this.hasMultiplePages,
-      () => p`<div class="pagination__navigation-buttons">${r(
+      () => s`<div class="pagination__navigation-buttons">${g(
         this.showFirst,
-        () => p`<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>${r(
-        this.paginationCounter === c.Both,
+        () => 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 === l.Both,
         () => this.renderPageCount()
       )}
-              ${r(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>${r(
+              ${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,
-        () => p`<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>`
+        () => 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.styles = M;
 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
+  "cx-button": v,
+  "cx-icon-button": P,
+  "cx-input": w,
+  "cx-option": I,
+  "cx-select": B,
+  "cx-space": b,
+  "cx-tooltip": N,
+  "cx-typography": k
 };
 a([
-  n({ type: Number })
+  o({ type: Number })
 ], e.prototype, "count", 2);
 a([
-  n({
+  o({
     attribute: "page-size-options",
     converter: {
       fromAttribute: (t) => {
-        const i = (t ?? "").trim().split(/\s+/).map((s) => Number.parseInt(s, 10)).filter((s) => Number.isFinite(s) && s > 0);
+        const i = (t ?? "").trim().split(/\s+/).map((n) => Number.parseInt(n, 10)).filter((n) => Number.isFinite(n) && n > 0);
         return i.length ? i : [];
       },
       toAttribute: (t) => t.join(" ")
@@ -275,60 +275,54 @@ a([
   })
 ], e.prototype, "pageSizeOptions", 2);
 a([
-  n({ attribute: "page-size", type: Number })
+  o({ attribute: "page-size", type: Number })
 ], e.prototype, "pageSize", 2);
 a([
-  n({ type: String })
+  o({ type: String })
 ], e.prototype, "label", 2);
 a([
-  n({ attribute: "show-first", type: Boolean })
+  o({ attribute: "show-first", type: Boolean })
 ], e.prototype, "showFirst", 2);
 a([
-  n({ attribute: "show-last", type: Boolean })
+  o({ attribute: "show-last", type: Boolean })
 ], e.prototype, "showLast", 2);
 a([
-  n({ attribute: "show-pagination-buttons", type: Boolean })
+  o({ attribute: "show-pagination-buttons", type: Boolean })
 ], e.prototype, "showPaginationButtons", 2);
 a([
-  n({ attribute: "pagination-button-count", type: Number })
+  o({ attribute: "pagination-button-count", type: Number })
 ], e.prototype, "paginationButtonCount", 2);
 a([
-  n({ attribute: "pagination-counter", type: String })
+  o({ attribute: "pagination-counter", type: String })
 ], e.prototype, "paginationCounter", 2);
 a([
-  n({ attribute: "show-pagination-input", type: Boolean })
+  o({ attribute: "show-pagination-input", type: Boolean })
 ], e.prototype, "showPaginationInput", 2);
 a([
-  n({ attribute: "back-icon-name", type: String })
+  o({ attribute: "back-icon-name", type: String })
 ], e.prototype, "backIconName", 2);
 a([
-  n({ attribute: "next-icon-name", type: String })
+  o({ attribute: "next-icon-name", type: String })
 ], e.prototype, "nextIconName", 2);
 a([
-  n({ attribute: "icon-button-size", type: String })
+  o({ attribute: "icon-button-size", type: String })
 ], e.prototype, "iconButtonSize", 2);
 a([
-  d()
-], e.prototype, "_pageIndex", 2);
+  o({ attribute: "current-page", reflect: !0, type: Number })
+], e.prototype, "currentPage", 2);
 a([
-  d()
-], e.prototype, "_pageCount", 2);
-a([
-  d()
+  S()
 ], e.prototype, "_pageInputValue", 2);
 a([
-  x("count")
-], e.prototype, "handleCountChange", 1);
-a([
-  x(["_pageIndex"])
+  d("currentPage", { waitUntilFirstUpdate: !0 })
 ], e.prototype, "handlePageChange", 1);
 a([
-  x(["pageSize"])
+  d("pageSize", { waitUntilFirstUpdate: !0 })
 ], e.prototype, "handlePageSizeChange", 1);
 e = a([
   f("cx-pagination")
 ], e);
 export {
   e as C,
-  c as P
+  l as P
 };