@orangelogic/design-system 2.57.0 → 2.58.0

package/library/chunks/pagination.Bp5dTjrN.js

@@ -0,0 +1,339 @@
+import { i as _, n as p, C as b, x as s, c as C } from "./custom-element.vnXBMQxc.js";
+import { L as y } from "./i18n.DwnDne7p.js";
+import { c } from "./math.DqTA6ya4.js";
+import { w as d } from "./watch.BCJD77bD.js";
+import { r as m } from "./state.Cw55xXlb.js";
+import { e as f } from "./class-map.CoZTSvbM.js";
+import { c as x } from "./repeat.CauKaXyy.js";
+import { n as h } from "./when.Dr1es41R.js";
+import { C as z } from "./button.kTTrlOjj.js";
+import v from "../components/icon-button.js";
+import { C as $ } from "./option.B4tI5rHw.js";
+import { C as S } from "./select.D_Ee1gDW.js";
+import w from "../components/tooltip.js";
+import { C as I } from "./typography.BFpl0WMA.js";
+import { c as P } from "./component.styles.CI-v8BZa.js";
+var l = /* @__PURE__ */ ((t) => (t.Both = "both", t.Pages = "pages", t.Rows = "rows", t))(l || {});
+const B = _`
+  ${P}
+
+  :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__page--active::part(base) {
+    color: var(--cx-color-primary);
+  }
+`;
+var O = Object.defineProperty, F = Object.getOwnPropertyDescriptor, i = (t, a, o, r) => {
+  for (var n = r > 1 ? void 0 : r ? F(a, o) : a, g = t.length - 1, u; g >= 0; g--)
+    (u = t[g]) && (n = (r ? u(a, o, n) : u(n)) || n);
+  return r && n && O(a, o, n), n;
+};
+let e = class extends b {
+  constructor() {
+    super(...arguments), this.localize = new y(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._pageIndex = 1, this._pageCount = Math.max(1, Math.ceil(this.count / this.pageSize));
+  }
+  get pageIndex() {
+    return this._pageIndex;
+  }
+  set pageIndex(t) {
+    this._pageIndex = c(t, 1, this._pageCount);
+  }
+  get pageStart() {
+    return c((this._pageIndex - 1) * this.pageSize + 1, 0, this.count);
+  }
+  get pageEnd() {
+    return c(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 = c(this.pageIndex, 1, this._pageCount);
+  }
+  handlePageSizeSelectChange(t) {
+    const a = t.target;
+    a && (this.pageSize = Number(a.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;
+  }
+  async handleCountChange() {
+    this.updatePageCount();
+  }
+  handlePageChange() {
+    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 a = t.target;
+    a && (this.pageIndex = Number(a.dataset.page));
+  }
+  renderPageButton(t) {
+    return s`
+      <cx-button
+        data-page=${t}
+        variant="text"
+        size="small"
+        class=${f({
+      pagination__page: !0,
+      "pagination__page--active": t === this.pageIndex
+    })}
+      >
+        ${t}
+      </cx-button>
+    `;
+  }
+  renderPageButtons() {
+    const t = Math.floor((this.paginationButtonCount - 1) / 2), a = Math.ceil((this.paginationButtonCount - 1) / 2), o = 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 <= a ? this.paginationButtonCount : this.pageIndex + a
+    );
+    return s`
+      <div class="pagination__pages" @click=${this.handlePageClick}>
+        ${x(
+      Array.from({ length: r - o + 1 }, (n, g) => g + o),
+      (n) => n,
+      (n) => this.renderPageButton(n)
+    )}
+      </div>
+    `;
+  }
+  renderPageCount() {
+    return 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">
+        ${h(
+      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}
+              >
+                ${x(
+        this.pageSizeOptions,
+        (t) => t,
+        (t) => s`
+                    <cx-option value=${t}>${t}</cx-option>
+                  `
+      )}
+              </cx-select>
+            </label>
+          `
+    )}
+        ${h(
+      this.paginationCounter === l.Both || this.paginationCounter === l.Rows,
+      () => this.renderRowCount(),
+      () => this.renderPageCount()
+    )}
+        <div class="pagination__navigation-buttons">
+          ${h(
+      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"
+                  ?disabled=${this.prevDisabled}
+                  @click=${this.handleFirst}
+                ></cx-icon-button>
+              </cx-tooltip>
+            `
+    )}
+          <cx-tooltip hoist content=${this.localize.term("previous")}>
+            <cx-icon-button
+              class="pagination__back"
+              label=${this.localize.term("previous")}
+              name="chevron_left"
+              ?disabled=${this.prevDisabled}
+              @click=${this.handleBack}
+            ></cx-icon-button>
+          </cx-tooltip>
+          ${h(
+      this.paginationCounter === l.Both,
+      () => this.renderPageCount()
+    )}
+          ${h(this.showPaginationButtons, () => this.renderPageButtons())}
+          <cx-tooltip hoist content=${this.localize.term("next")}>
+            <cx-icon-button
+              class="pagination__forward"
+              label=${this.localize.term("next")}
+              name="chevron_right"
+              ?disabled=${this.nextDisabled}
+              @click=${this.handleForward}
+            ></cx-icon-button>
+          </cx-tooltip>
+          ${h(
+      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"
+                  ?disabled=${this.nextDisabled}
+                  @click=${this.handleLast}
+                ></cx-icon-button>
+              </cx-tooltip>
+            `
+    )}
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = B;
+e.dependencies = {
+  "cx-button": z,
+  "cx-icon-button": v,
+  "cx-option": $,
+  "cx-select": S,
+  "cx-tooltip": w,
+  "cx-typography": I
+};
+i([
+  p({ type: Number })
+], e.prototype, "count", 2);
+i([
+  p({
+    attribute: "page-size-options",
+    converter: {
+      fromAttribute: (t) => {
+        const a = (t ?? "").trim().split(/\s+/).map((o) => Number.parseInt(o, 10)).filter((o) => Number.isFinite(o) && o > 0);
+        return a.length ? a : [];
+      },
+      toAttribute: (t) => t.join(" ")
+    },
+    type: String
+  })
+], e.prototype, "pageSizeOptions", 2);
+i([
+  p({ attribute: "page-size", type: Number })
+], e.prototype, "pageSize", 2);
+i([
+  p({ type: String })
+], e.prototype, "label", 2);
+i([
+  p({ attribute: "show-first", type: Boolean })
+], e.prototype, "showFirst", 2);
+i([
+  p({ attribute: "show-last", type: Boolean })
+], e.prototype, "showLast", 2);
+i([
+  p({ attribute: "show-pagination-buttons", type: Boolean })
+], e.prototype, "showPaginationButtons", 2);
+i([
+  p({ attribute: "pagination-button-count", type: Number })
+], e.prototype, "paginationButtonCount", 2);
+i([
+  p({ attribute: "pagination-counter", type: String })
+], e.prototype, "paginationCounter", 2);
+i([
+  m()
+], e.prototype, "_pageIndex", 2);
+i([
+  m()
+], e.prototype, "_pageCount", 2);
+i([
+  d("count")
+], e.prototype, "handleCountChange", 1);
+i([
+  d(["_pageIndex"])
+], e.prototype, "handlePageChange", 1);
+i([
+  d(["pageSize"])
+], e.prototype, "handlePageSizeChange", 1);
+e = i([
+  C("cx-pagination")
+], e);
+export {
+  e as C,
+  l as P
+};

package/library/chunks/{popup.BE5MfEQJ.js → popup.CQSGj4zE.js}

@@ -6,7 +6,7 @@ import { o as Lt } from "./if-defined.MfEgpxEN.js";
 import { o as se } from "./style-map.CZovMmo_.js";
 import { i as mt, p as ne, f as We, a as qe } from "./browser.Va59Ix3P.js";
 import { c as ye } from "./component.styles.CI-v8BZa.js";
-import { L as Ve } from "./i18n.dCiJrmqj.js";
+import { L as Ve } from "./i18n.DwnDne7p.js";
 import { e as Dt } from "./class-map.CoZTSvbM.js";
 import { n as Ue } from "./when.Dr1es41R.js";
 /**

package/library/chunks/{select.xBh4yerC.js → select.D_Ee1gDW.js}

@@ -6,8 +6,8 @@ import { f as L } from "./form-control.styles.NE2Q-quE.js";
 import { s as w, a as x, g as y, b as v } from "./animation-registry.DavRkTTr.js";
 import { d as $ } from "./default-value.CIKAvD5l.js";
 import { w as _ } from "./event.mFzZi4sr.js";
-import { F as E } from "./form.DycFDdkp.js";
-import { L as T } from "./i18n.dCiJrmqj.js";
+import { F as E } from "./form.D1R9s3Mf.js";
+import { L as T } from "./i18n.DwnDne7p.js";
 import { s as A } from "./scroll.DwPiX2Ox.js";
 import { H as B } from "./slot.DJLm4Dig.js";
 import { w as h } from "./watch.BCJD77bD.js";
@@ -17,8 +17,8 @@ import { e as b } from "./class-map.CoZTSvbM.js";
 import { o as F } from "./unsafe-html.DyO9_Rsq.js";
 import { n as m } from "./when.Dr1es41R.js";
 import V from "../components/icon.js";
-import { C as d } from "./option.CJ1p2V0m.js";
-import { C as P } from "./popup.BE5MfEQJ.js";
+import { C as d } from "./option.B4tI5rHw.js";
+import { C as P } from "./popup.CQSGj4zE.js";
 import M from "../components/spinner.js";
 import U from "../components/tag.js";
 const N = () => navigator.userAgent.includes("Cortex") || navigator.userAgent.includes("Photoshop") || navigator.userAgent.includes("AfterEffect") || navigator.userAgent.includes("Illustrator"), R = (e) => !(document.createElement(e.tagName).constructor === HTMLElement || customElements.get(e.tagName.toLowerCase())), W = S`
@@ -454,7 +454,6 @@ const N = () => navigator.userAgent.includes("Cortex") || navigator.userAgent.in
     flex-direction: column;
     flex: 1;
     width: 0;
-    height: 100%;
   }
 
   .input-container__display-value {
@@ -1106,7 +1105,7 @@ let i = class extends k {
                   part="display-input"
                   class=${b({
       "select__display-input": !0,
-      "select__display-input--hidden": (this.multiple || this.useTag) && !this.hasFocus,
+      "select__display-input--hidden": (this.multiple || this.useTag) && !this.hasFocus && !c,
       "select__display-input--large": this.size === "large",
       "select__display-input--medium": this.size === "medium",
       "select__display-input--small": this.size === "small"

package/library/chunks/{string.DPf4puTr.js → string.BF2AikHa.js}

@@ -1,13 +1,13 @@
 import { p } from "./purify.es.BGaRrCfO.js";
 var m = /* @__PURE__ */ ((t) => (t.Asset = "asset", t.Folder = "folder", t.Link = "link", t.Page = "page", t.Space = "space", t))(m || {}), S = /* @__PURE__ */ ((t) => (t.Default = "default", t.Overlay = "overlay", t))(S || {}), h = /* @__PURE__ */ ((t) => (t.Always = "always", t.OnHover = "on-hover", t))(h || {}), g = /* @__PURE__ */ ((t) => (t.Track = "track", t.Transition = "transition", t))(g || {}), u = /* @__PURE__ */ ((t) => (t.Frames = "Frames", t.SMPTE = "SMPTE", t.Standard = "Standard", t))(u || {});
 const P = 50;
-function v(t) {
+function w(t) {
   if (typeof t != "string")
     return null;
   const n = t.trim(), r = n.charAt(0).toUpperCase(), e = n.slice(1);
   return `${r}${e}`;
 }
-const w = (t, n, r, e) => t && t.length > n ? t.substring(0, r) + " ... " + t.substring(t.length - e, t.length) : t, I = (t) => t ? t.replaceAll(/([a-z0-9])([A-Z])/g, "$1 $2").replaceAll(/([A-Z])([A-Z][a-z])/g, "$1 $2").replaceAll(/([a-zA-Z])([0-9])/g, "$1 $2").replaceAll(/([0-9])([a-zA-Z])/g, "$1 $2").replaceAll(/\s+/g, " ").trim().toLowerCase() : "";
+const I = (t, n, r, e) => t && t.length > n ? t.substring(0, r) + " ... " + t.substring(t.length - e, t.length) : t, v = (t) => t ? t.replaceAll(/([a-z0-9])([A-Z])/g, "$1 $2").replaceAll(/([A-Z])([A-Z][a-z])/g, "$1 $2").replaceAll(/([a-zA-Z])([0-9])/g, "$1 $2").replaceAll(/([0-9])([a-zA-Z])/g, "$1 $2").replaceAll(/\s+/g, " ").trim().toLowerCase() : "";
 function x(t, n = {}) {
   const {
     frameRate: r = 24,
@@ -115,6 +115,9 @@ function H(t) {
   });
 }
 function O(t) {
+  return t == null || t === "" ? " " : String(t);
+}
+function Z(t) {
   return typeof t != "string" ? !1 : Object.values(m).includes(t);
 }
 export {
@@ -122,15 +125,16 @@ export {
   S as G,
   g as M,
   u as T,
-  h as a,
-  m as b,
-  I as c,
-  k as d,
+  O as a,
+  h as b,
+  m as c,
+  v as d,
   L as e,
   x as f,
-  O as i,
+  k as g,
+  Z as i,
   z as p,
   H as s,
-  w as t,
-  v as u
+  I as t,
+  w as u
 };

package/library/chunks/{tab-group.CjvHb3OJ.js → tab-group.CT6rt4_n.js}

@@ -1,10 +1,10 @@
 import In from "../components/resize-observer.js";
 import { i as Fn, n as wt, C as Ln, x as $t, c as $n } from "./custom-element.vnXBMQxc.js";
 import { c as Nn } from "./component.styles.CI-v8BZa.js";
-import { L as Bn } from "./i18n.dCiJrmqj.js";
+import { L as Bn } from "./i18n.DwnDne7p.js";
 import { s as Zi } from "./scroll.DwPiX2Ox.js";
 import { w as ft } from "./watch.BCJD77bD.js";
-import { i as Wn } from "./dom.CaZCTJCL.js";
+import { i as Wn } from "./dom.Dc-BF08t.js";
 import { s as Vn } from "./parse.Cu5nBDTb.js";
 import { r as at } from "./state.Cw55xXlb.js";
 import { t as Un } from "./event-options.CYHYGOd8.js";
@@ -15,7 +15,7 @@ import { i as Ji } from "./guard.BDP4A85K.js";
 import { o as tr } from "./map.D8heArFD.js";
 import { o as Ue } from "./style-map.CZovMmo_.js";
 import { n as Pe } from "./when.Dr1es41R.js";
-import { C as Yn } from "./button.2-Io1Wm4.js";
+import { C as Yn } from "./button.kTTrlOjj.js";
 import Xn from "../components/dropdown.js";
 import qn from "../components/icon-button.js";
 import Gn from "../components/menu.js";