@stihl-design-system/components/chunks/Pagination.BrOMUJMi.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsx as N, jsxs as Ae } from "react/jsx-runtime";
import { d as Be } from "./index.cKLI89Eg.js";
import { c as D } from "./index.DQOqod3i.js";
import { isValidElement as fe, useState as _e, useEffect as ve, cloneElement as be } from "react";
import { f as ze } from "./AriaLiveRegions.utils.xoETe2Ps.js";
import { D as Ne } from "./Button.CCol--xy.js";
import { D as De } from "./LinkButton.BxG7fx1O.js";
import { g as v, r as ge } from "./helpers.CexwVao7.js";
import { u as Ie } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
import { t as Te } from "./translate.DSb-TdWR.js";
import '../assets/Pagination.DH71DZ0j.css';const Me = "ds-pagination_list_1u9zx_1", Ce = "ds-pagination_list--center_1u9zx_8", Le = "ds-pagination_list--right_1u9zx_11", Oe = "ds-pagination_item_1u9zx_15", $e = "ds-pagination_item-prev-button-wrapper_1u9zx_19", Fe = "ds-pagination_item-next-button-wrapper_1u9zx_22", Re = "ds-pagination_prev-next-button_1u9zx_26", We = "ds-pagination_prev-next-button--dark_1u9zx_58", Ve = "ds-pagination_page-button_1u9zx_87", je = "ds-pagination_page-button--dark_1u9zx_138", Ge = "ds-pagination_page-button--active_1u9zx_174", Qe = "ds-pagination_page-button--active--dark_1u9zx_201", Ue = "ds-pagination_ellipsis_1u9zx_210", qe = "ds-pagination_ellipsis--dark_1u9zx_217", Ye = "ds-pagination_divider_1u9zx_221", He = "ds-pagination_divider--dark_1u9zx_233", Je = "ds-pagination_wrapper-focus_1u9zx_242", Ke = "ds-pagination_wrapper-focus--dark_1u9zx_270", t = {
  list: Me,
  listCenter: Ce,
  listRight: Le,
  item: Oe,
  itemPrevButtonWrapper: $e,
  itemNextButtonWrapper: Fe,
  prevNextButton: Re,
  prevNextButtonDark: We,
  pageButton: Ve,
  pageButtonDark: je,
  pageButtonActive: Ge,
  pageButtonActiveDark: Qe,
  ellipsis: Ue,
  ellipsisDark: qe,
  divider: Ye,
  dividerDark: He,
  wrapperFocus: Je,
  wrapperFocusDark: Ke
}, ke = "(max-width: 518px)", xe = "(max-width: 428px)", we = () => typeof window > "u" ? 9 : window.matchMedia(xe).matches ? 5 : window.matchMedia(ke).matches ? 7 : 9, Xe = (s, e, a) => {
  const o = [];
  if (s <= a) {
    for (let i = 0; i < s; i++)
      o.push({
        type: "page",
        pageIndex: i
      });
    return o;
  }
  const g = a - 4;
  let l = e - Math.floor((g - 1) / 2), d = l + g - 1;
  l <= 2 && (l = 1, d = a - 3), d >= s - 3 && (d = s - 2, l = s - a + 2);
  const c = [0];
  for (let i = l; i <= d; i++)
    c.push(i);
  return c.push(s - 1), c.forEach((i, k) => {
    const w = c[k - 1];
    w !== void 0 && i - w > 1 && o.push({
      type: "ellipsis",
      id: `ellipsis-${w}-${i}`
    }), o.push({
      type: "page",
      pageIndex: i
    });
  }), o;
}, Ze = (s) => {
  const e = [];
  return s.forEach((a, o) => {
    o > 0 && e.push({
      type: "divider",
      id: `divider-${o}`
    }), e.push(a);
  }), e;
}, et = (s, e, a) => Ze(Xe(s, e, a)), tt = {
  previousPage: "Previous page",
  nextPage: "Next page",
  page: "Page {pageNumber}",
  pageOf: "Page {currentPage} of {totalPages} loaded"
}, at = {
  previousPage: "Vorherige Seite",
  nextPage: "Nächste Seite",
  page: "Seite {pageNumber}",
  pageOf: "Seite {currentPage} von {totalPages} geladen"
}, Pe = {
  en: tt,
  de: at
}, it = ({
  activePageIndex: s,
  aria: e,
  itemsPerPage: a,
  links: o,
  totalItemsCount: g
}) => {
  if (!e || typeof e != "object" || Object.keys(e).length === 0 || !e["aria-label"] && !e["aria-labelledby"] || e["aria-label"]?.trim() === "" && e["aria-labelledby"]?.trim() === "")
    throw new Error(v("DSPagination", 'A valid "aria-label" or "aria-labelledby" property is required. Ensure the "aria" prop is a non-empty object and includes either "aria-label" or "aria-labelledby" with a non-empty string value.'));
  if (typeof g != "number" || Number.isNaN(g))
    throw new Error(v("DSPagination", ge("totalItemsCount", "DSPagination")));
  if (g < 0)
    throw new Error(v("DSPagination", 'The "totalItemsCount" prop must be zero or a positive number.'));
  if (typeof a != "number" || Number.isNaN(a))
    throw new Error(v("DSPagination", ge("itemsPerPage", "DSPagination")));
  if (a <= 0)
    throw new Error(v("DSPagination", 'The "itemsPerPage" prop must be greater than 0.'));
  if (typeof s != "number" || Number.isNaN(s) || !Number.isInteger(s))
    throw new Error(v("DSPagination", ge("activePageIndex", "DSPagination")));
  const l = Math.max(1, Math.ceil(g / Math.max(1, a)));
  if (s < 0 || s > l - 1)
    throw new Error(v("DSPagination", `The "activePageIndex" must be between 0 and ${l - 1}.`));
  if (o && !Array.isArray(o))
    throw new Error(v("DSPagination", 'The "links" prop must be an array when provided.'));
  Array.isArray(o) && o.forEach(({
    href: d,
    wrapper: c
  }, i) => {
    if (c && !fe(c))
      throw new Error(v("DSPagination", `The link with label "${i + 1}" provided an invalid ReactElement as wrapper property.`));
    c && d && console.warn(v("DSPagination", `The link with label "${i + 1}" has both a wrapper and an href property. Please use only one.`)), c && fe(c) && c.props?.children && console.warn(v("DSPagination", `The link with label "${i + 1}" contains a wrapper with children. Please remove the children, as they will be replaced.`));
  });
}, ht = (s) => {
  const e = Be.c(82);
  let a, o, g, l, d, c, i, k, w, F, R, j;
  e[0] !== s ? ({
    aria: a,
    activePageIndex: i,
    itemsPerPage: g,
    totalItemsCount: R,
    className: o,
    alignment: k,
    lang: w,
    links: l,
    theme: F,
    translations: j,
    onPageChange: d,
    ...c
  } = s, e[0] = s, e[1] = a, e[2] = o, e[3] = g, e[4] = l, e[5] = d, e[6] = c, e[7] = i, e[8] = k, e[9] = w, e[10] = F, e[11] = R, e[12] = j) : (a = e[1], o = e[2], g = e[3], l = e[4], d = e[5], c = e[6], i = e[7], k = e[8], w = e[9], F = e[10], R = e[11], j = e[12]);
  const x = i === void 0 ? 0 : i, he = k === void 0 ? "right" : k, G = w === void 0 ? "en" : w, f = F === void 0 ? "light" : F, m = f === "dark", P = typeof d == "function", [Se, me] = _e(x), r = P ? x : Se, [oe, ye] = _e(we);
  let Q, U;
  e[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (Q = () => {
    const n = window.matchMedia(ke), p = window.matchMedia(xe), u = () => {
      ye(we());
    };
    return n.addEventListener("change", u), p.addEventListener("change", u), () => {
      n.removeEventListener("change", u), p.removeEventListener("change", u);
    };
  }, U = [], e[13] = Q, e[14] = U) : (Q = e[13], U = e[14]), Ie(Q, U), process.env.NODE_ENV !== "production" && it({
    aria: a,
    itemsPerPage: g,
    totalItemsCount: R,
    activePageIndex: x,
    links: l
  });
  const _ = Math.max(1, Math.ceil(R / Math.max(1, g))), le = j || Pe[G] || Pe.en;
  let q;
  e[15] !== G || e[16] !== le ? (q = Te(le, G), e[15] = G, e[16] = le, e[17] = q) : q = e[17];
  const h = q;
  let Y, H;
  e[18] !== r || e[19] !== h || e[20] !== _ ? (Y = () => {
    const n = h("pageOf", {
      currentPage: r + 1,
      totalPages: _
    });
    ze(n, "DSPagination");
  }, H = [r, _, h], e[18] = r, e[19] = h, e[20] = _, e[21] = Y, e[22] = H) : (Y = e[21], H = e[22]), ve(Y, H);
  let J, K;
  e[23] !== x || e[24] !== P ? (J = () => {
    P || me(x);
  }, K = [x, P], e[23] = x, e[24] = P, e[25] = J, e[26] = K) : (J = e[25], K = e[26]), ve(J, K);
  let X;
  e[27] !== r || e[28] !== _ || e[29] !== oe ? (X = et(_, r, oe), e[27] = r, e[28] = _, e[29] = oe, e[30] = X) : X = e[30];
  const ce = X;
  let Z;
  e[31] !== r || e[32] !== P || e[33] !== d ? (Z = (n, p) => {
    if (!p.defaultPrevented && n !== r) {
      if (P) {
        d?.(n);
        return;
      }
      me(n);
    }
  }, e[31] = r, e[32] = P, e[33] = d, e[34] = Z) : Z = e[34];
  const E = Z;
  let ee;
  e[35] !== r || e[36] !== E || e[37] !== l || e[38] !== h || e[39] !== f ? (ee = (n) => {
    const {
      href: p,
      wrapper: u
    } = l?.[n] || {}, L = f === "dark", O = `${n + 1}`, $ = n === r, b = h("page", {
      pageNumber: O
    }), V = $ ? "page" : void 0, se = D(t.pageButton, {
      [t.pageButtonDark]: L,
      [t.pageButtonActive]: $,
      [t.pageButtonActiveDark]: $ && L
    }), S = (Ee) => {
      E(n, Ee);
    }, y = /* @__PURE__ */ N(De, { className: se, size: "small", variant: "ghost", theme: f, href: u ? void 0 : p, "aria-label": u ? void 0 : b, "aria-current": u ? void 0 : V, onClick: u ? void 0 : S, children: O });
    return u ? be(u, {
      "aria-label": b,
      "aria-current": V,
      className: D(u.props.className, t.wrapperFocus, {
        [t.wrapperFocusDark]: L
      }),
      onClick: S,
      children: y
    }) : p ? y : /* @__PURE__ */ N(Ne, { type: "button", className: se, "aria-label": b, "aria-current": V, size: "small", variant: "ghost", theme: f, onClick: S, children: O });
  }, e[35] = r, e[36] = E, e[37] = l, e[38] = h, e[39] = f, e[40] = ee) : ee = e[40];
  const W = ee;
  let te;
  e[41] !== E || e[42] !== l || e[43] !== f ? (te = (n, p, u, L, O) => {
    const {
      href: $,
      wrapper: b
    } = l?.[n] || {}, V = !L && l && ($ || b), se = f === "dark", S = (y) => {
      E(n, y);
    };
    if (V) {
      const y = /* @__PURE__ */ N(De, { className: O, iconName: p, hideLabel: !0, size: "small", variant: "filled", theme: f, href: b ? void 0 : $, onClick: b ? void 0 : S, children: u });
      return b ? be(b, {
        className: D(b.props.className, t.wrapperFocus, {
          [t.wrapperFocusDark]: se
        }),
        children: y,
        onClick: S
      }) : y;
    }
    return /* @__PURE__ */ N(Ne, { type: "button", className: O, iconName: p, disabled: L, hideLabel: !0, variant: "filled", size: "small", theme: f, onClick: S, children: u });
  }, e[41] = E, e[42] = l, e[43] = f, e[44] = te) : te = e[44];
  const A = te, pe = he === "center", ue = he === "right";
  let ae;
  e[45] !== pe || e[46] !== ue ? (ae = D(t.list, {
    [t.listCenter]: pe,
    [t.listRight]: ue
  }), e[45] = pe, e[46] = ue, e[47] = ae) : ae = e[47];
  const de = ae;
  let ie;
  e[48] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (ie = D(t.item, t.itemPrevButtonWrapper), e[48] = ie) : ie = e[48];
  let B;
  e[49] !== r || e[50] !== m || e[51] !== A || e[52] !== h ? (B = A(Math.max(0, r - 1), "chevron-left", h("previousPage"), r === 0, D(t.prevNextButton, {
    [t.prevNextButtonDark]: m
  })), e[49] = r, e[50] = m, e[51] = A, e[52] = h, e[53] = B) : B = e[53];
  let z;
  e[54] !== B ? (z = /* @__PURE__ */ N("li", { className: ie, children: B }), e[54] = B, e[55] = z) : z = e[55];
  let I;
  if (e[56] !== m || e[57] !== ce || e[58] !== W) {
    let n;
    e[60] !== m || e[61] !== W ? (n = (p) => p.type === "page" ? /* @__PURE__ */ N("li", { className: t.item, children: W(p.pageIndex) }, `page-${p.pageIndex}`) : p.type === "ellipsis" ? /* @__PURE__ */ N("li", { className: D(t.item, t.ellipsis, {
      [t.ellipsisDark]: m
    }), "aria-hidden": "true", children: "…" }, p.id) : /* @__PURE__ */ N("li", { className: D(t.divider, {
      [t.dividerDark]: m
    }), "aria-hidden": "true" }, p.id), e[60] = m, e[61] = W, e[62] = n) : n = e[62], I = ce.map(n), e[56] = m, e[57] = ce, e[58] = W, e[59] = I;
  } else
    I = e[59];
  let re;
  e[63] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (re = D(t.item, t.itemNextButtonWrapper), e[63] = re) : re = e[63];
  let T;
  e[64] !== r || e[65] !== m || e[66] !== A || e[67] !== h || e[68] !== _ ? (T = A(Math.min(_ - 1, r + 1), "chevron-right", h("nextPage"), r >= _ - 1, D(t.prevNextButton, {
    [t.prevNextButtonDark]: m
  })), e[64] = r, e[65] = m, e[66] = A, e[67] = h, e[68] = _, e[69] = T) : T = e[69];
  let M;
  e[70] !== T ? (M = /* @__PURE__ */ N("li", { className: re, children: T }), e[70] = T, e[71] = M) : M = e[71];
  let C;
  e[72] !== de || e[73] !== z || e[74] !== I || e[75] !== M ? (C = /* @__PURE__ */ Ae("ul", { className: de, children: [
    z,
    I,
    M
  ] }), e[72] = de, e[73] = z, e[74] = I, e[75] = M, e[76] = C) : C = e[76];
  let ne;
  return e[77] !== a || e[78] !== o || e[79] !== c || e[80] !== C ? (ne = /* @__PURE__ */ N("nav", { className: o, ...c, ...a, children: C }), e[77] = a, e[78] = o, e[79] = c, e[80] = C, e[81] = ne) : ne = e[81], ne;
};
export {
  ht as D,
  ke as a,
  xe as b,
  Pe as c,
  at as d,
  tt as e,
  Ze as f,
  Xe as g,
  et as h,
  we as i,
  it as v
};