@orangelogic/design-system 2.70.0 → 2.71.0

package/library/chunks/pagination.DPQn2fKX.js

@@ -1,341 +0,0 @@
-import { n as p, C as _ } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as b } from "./custom-element.L4WJXn1j.js";
-import { L as C } from "./i18n.C0iakJkV.js";
-import { c } from "./math.DqTA6ya4.js";
-import { w as d } from "./watch.BCJD77bD.js";
-import { i as y, x as s } from "./lit-element.jLBm65_O.js";
-import { r as m } from "./state.CSDxrqLd.js";
-import { e as f } from "./class-map.BiVq-cVR.js";
-import { c as x } from "./repeat.DbF2p5ae.js";
-import { n as h } from "./when.Dr1es41R.js";
-import { C as z } from "./button.CAAJPQFu.js";
-import v from "../components/icon-button.js";
-import { C as $ } from "./option.ByVbmxUQ.js";
-import S from "../components/select.js";
-import w from "../components/tooltip.js";
-import { C as I } from "./typography.oDzoLbZS.js";
-import { c as P } from "./component.styles.DMSLciL5.js";
-var l = /* @__PURE__ */ ((t) => (t.Both = "both", t.Pages = "pages", t.Rows = "rows", t))(l || {});
-const B = y`
-  ${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 _ {
-  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 = 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([
-  b("cx-pagination")
-], e);
-export {
-  e as C,
-  l as P
-};