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.C2s3pHG4.js";
import { c as f } from "./custom-element.L4WJXn1j.js";
import { L as z } from "./i18n.BABe9hN4.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.CAa1kvwe.js";
import w from "../components/input.js";
import { C as I } from "./option.DGXQzdtb.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;
    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 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 _ {
  constructor() {
    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 _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 m((this.currentPage - 1) * this.pageSize + 1, 0, this.count);
  }
  get pageEnd() {
    return m(this.currentPage * this.pageSize, 0, this.count);
  }
  get prevDisabled() {
    return this.currentPage <= p;
  }
  get nextDisabled() {
    return this.currentPage >= this._pageCount;
  }
  get hasMultiplePages() {
    return this._pageCount > 1;
  }
  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.currentPage = p);
  }
  handleFirst() {
    this.currentPage = p;
  }
  handleBack() {
    this.currentPage = Math.max(p, this.currentPage - 1);
  }
  handleForward() {
    this.currentPage = Math.min(this._pageCount, this.currentPage + 1);
  }
  handleLast() {
    this.currentPage = this._pageCount;
  }
  commitPageInputValue() {
    const t = Number.parseInt(this._pageInputValue, 10);
    if (!Number.isFinite(t)) {
      this._pageInputValue = this.currentPage.toString();
      return;
    }
    this.currentPage = this.normalizePage(t), this._pageInputValue = this.currentPage.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.currentPage.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>`;
  }
  handlePageChange() {
    this._pageInputValue = this.currentPage.toString(), this.emit("cx-page-change", {
      detail: {
        pageIndex: this.currentPage
      }
    });
  }
  handlePageSizeChange() {
    this.emit("cx-page-size-change", {
      detail: {
        pageSize: this.pageSize
      }
    });
  }
  handlePageClick(t) {
    const n = t.target?.dataset.page;
    n && (this.currentPage = this.normalizePage(Number(n)));
  }
  renderPageButton(t) {
    return s`<cx-button data-page=${t} variant="text" size="small" class=${$({
      pagination__page: !0,
      "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), 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.currentPage <= i ? this.paginationButtonCount : this.currentPage + i
    );
    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 ? 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 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}>${x(
        this.pageSizeOptions,
        (t) => t,
        (t) => s`<cx-option value=${t}>${t}</cx-option>`
      )}</cx-select></label>`
    )}
        ${g(
      this.paginationCounter === l.Both || this.paginationCounter === l.Rows,
      () => this.renderRowCount(),
      () => this.renderPageCount()
    )}
        ${g(
      this.hasMultiplePages,
      () => s`<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 === l.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 = M;
e.dependencies = {
  "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([
  o({ type: Number })
], e.prototype, "count", 2);
a([
  o({
    attribute: "page-size-options",
    converter: {
      fromAttribute: (t) => {
        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(" ")
    },
    type: String
  })
], e.prototype, "pageSizeOptions", 2);
a([
  o({ attribute: "page-size", type: Number })
], e.prototype, "pageSize", 2);
a([
  o({ type: String })
], e.prototype, "label", 2);
a([
  o({ attribute: "show-first", type: Boolean })
], e.prototype, "showFirst", 2);
a([
  o({ attribute: "show-last", type: Boolean })
], e.prototype, "showLast", 2);
a([
  o({ attribute: "show-pagination-buttons", type: Boolean })
], e.prototype, "showPaginationButtons", 2);
a([
  o({ attribute: "pagination-button-count", type: Number })
], e.prototype, "paginationButtonCount", 2);
a([
  o({ attribute: "pagination-counter", type: String })
], e.prototype, "paginationCounter", 2);
a([
  o({ attribute: "show-pagination-input", type: Boolean })
], e.prototype, "showPaginationInput", 2);
a([
  o({ attribute: "back-icon-name", type: String })
], e.prototype, "backIconName", 2);
a([
  o({ attribute: "next-icon-name", type: String })
], e.prototype, "nextIconName", 2);
a([
  o({ attribute: "icon-button-size", type: String })
], e.prototype, "iconButtonSize", 2);
a([
  o({ attribute: "current-page", reflect: !0, type: Number })
], e.prototype, "currentPage", 2);
a([
  S()
], e.prototype, "_pageInputValue", 2);
a([
  d("currentPage", { waitUntilFirstUpdate: !0 })
], e.prototype, "handlePageChange", 1);
a([
  d("pageSize", { waitUntilFirstUpdate: !0 })
], e.prototype, "handlePageSizeChange", 1);
e = a([
  f("cx-pagination")
], e);
export {
  e as C,
  l as P
};
