react-book-reader 1.0.0

package/lib/paginator-zvlJVmJl.js

@@ -0,0 +1,722 @@
+var Zt = Object.defineProperty;
+var te = (o, s, t) => s in o ? Zt(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
+var Ft = (o, s, t) => (te(o, typeof s != "symbol" ? s + "" : s, t), t), $t = (o, s, t) => {
+  if (!s.has(o))
+    throw TypeError("Cannot " + t);
+};
+var e = (o, s, t) => ($t(o, s, "read from private field"), t ? t.call(o) : s.get(o)), l = (o, s, t) => {
+  if (s.has(o))
+    throw TypeError("Cannot add the same private member more than once");
+  s instanceof WeakSet ? s.add(o) : s.set(o, t);
+}, g = (o, s, t, i) => ($t(o, s, "write to private field"), i ? i.call(o, t) : s.set(o, t), t);
+var c = (o, s, t) => ($t(o, s, "access private method"), t);
+const ee = (o) => new Promise((s) => setTimeout(s, o)), ie = (o, s, t) => {
+  let i;
+  return (...n) => {
+    const r = () => {
+      i = null, t || o(...n);
+    }, h = t && !i;
+    i && clearTimeout(i), i = setTimeout(r, s), h && o(...n);
+  };
+}, se = (o, s, t) => t * (s - o) + o, ne = (o) => 1 - (1 - o) * (1 - o), re = (o, s, t, i, n) => new Promise((r) => {
+  let h;
+  const a = (d) => {
+    h ?? (h = d);
+    const u = Math.min(1, (d - h) / t);
+    n(se(o, s, i(u))), u < 1 ? requestAnimationFrame(a) : r();
+  };
+  requestAnimationFrame(a);
+}), oe = (o) => {
+  if (!(o != null && o.collapsed))
+    return o;
+  const { endOffset: s, endContainer: t } = o;
+  if (t.nodeType === 1)
+    return t;
+  if (s + 1 < t.length)
+    o.setEnd(t, s + 1);
+  else if (s > 1)
+    o.setStart(t, s - 1);
+  else
+    return t.parentNode;
+  return o;
+}, wt = (o, s, t, i = t) => {
+  const n = o.createRange();
+  return n.setStart(s, t), n.setEnd(s, i), n;
+}, St = (o, s, t, i = 0, n = s.nodeValue.length) => {
+  if (n - i === 1)
+    return t(wt(o, s, i), wt(o, s, n)) < 0 ? i : n;
+  const r = Math.floor(i + (n - i) / 2), h = t(wt(o, s, i, r), wt(o, s, r, n));
+  return h < 0 ? St(o, s, t, i, r) : h > 0 ? St(o, s, t, r, n) : r;
+}, {
+  SHOW_ELEMENT: he,
+  SHOW_TEXT: ae,
+  SHOW_CDATA_SECTION: le,
+  FILTER_ACCEPT: jt,
+  FILTER_REJECT: Dt,
+  FILTER_SKIP: Wt
+} = NodeFilter, ce = he | ae | le, qt = (o, s, t, i) => {
+  const n = (f) => {
+    var C, b;
+    const x = (C = f.localName) == null ? void 0 : C.toLowerCase();
+    if (x === "script" || x === "style")
+      return Dt;
+    if (f.nodeType === 1) {
+      const { left: _, right: I } = i(f.getBoundingClientRect());
+      if (I < s || _ > t)
+        return Dt;
+      if (_ >= s && I <= t)
+        return jt;
+    } else {
+      if (!((b = f.nodeValue) != null && b.trim()))
+        return Wt;
+      const _ = o.createRange();
+      _.selectNodeContents(f);
+      const { left: I, right: vt } = i(_.getBoundingClientRect());
+      if (vt >= s && I <= t)
+        return jt;
+    }
+    return Wt;
+  }, r = o.createTreeWalker(o.body, ce, { acceptNode: n }), h = [];
+  for (let f = r.nextNode(); f; f = r.nextNode())
+    h.push(f);
+  const a = h[0] ?? o.body, d = h[h.length - 1] ?? a, u = a.nodeType === 1 ? 0 : St(o, a, (f, x) => {
+    const C = i(f.getBoundingClientRect()), b = i(x.getBoundingClientRect());
+    return C.right < s && b.left > s ? 0 : b.left > s ? -1 : 1;
+  }), w = d.nodeType === 1 ? 0 : St(o, d, (f, x) => {
+    const C = i(f.getBoundingClientRect()), b = i(x.getBoundingClientRect());
+    return C.right < t && b.left > t ? 0 : b.left > t ? -1 : 1;
+  }), p = o.createRange();
+  return p.setStart(a, u), p.setEnd(d, w), p;
+}, de = (o) => {
+  const { defaultView: s } = o, { writingMode: t, direction: i } = s.getComputedStyle(o.body), n = t === "vertical-rl" || t === "vertical-lr", r = o.body.dir === "rtl" || i === "rtl" || o.documentElement.dir === "rtl";
+  return { vertical: n, rtl: r };
+}, Mt = (o) => {
+  const s = o.defaultView.getComputedStyle(o.body);
+  return s.backgroundColor === "rgba(0, 0, 0, 0)" && s.backgroundImage === "none" ? o.defaultView.getComputedStyle(o.documentElement).background : s.background;
+}, Ht = (o, s) => Array.from({ length: o }, () => {
+  const t = document.createElement("div"), i = document.createElement("div");
+  return t.append(i), i.setAttribute("part", s), t;
+}), it = (o, s) => {
+  const { style: t } = o;
+  for (const [i, n] of Object.entries(s))
+    t.setProperty(i, n, "important");
+};
+var rt, E, y, ot, v, S, ht, Y, $, J;
+class ue {
+  constructor({ container: s, onExpand: t }) {
+    l(this, rt, new ResizeObserver(() => this.expand()));
+    l(this, E, document.createElement("div"));
+    l(this, y, document.createElement("iframe"));
+    l(this, ot, document.createRange());
+    l(this, v, void 0);
+    l(this, S, !1);
+    l(this, ht, !1);
+    l(this, Y, !0);
+    l(this, $, void 0);
+    l(this, J, {});
+    this.container = s, this.onExpand = t, e(this, y).setAttribute("part", "filter"), e(this, E).append(e(this, y)), Object.assign(e(this, E).style, {
+      boxSizing: "content-box",
+      position: "relative",
+      overflow: "hidden",
+      flex: "0 0 auto",
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }), Object.assign(e(this, y).style, {
+      overflow: "hidden",
+      border: "0",
+      display: "none",
+      width: "100%",
+      height: "100%"
+    }), e(this, y).setAttribute("sandbox", "allow-same-origin allow-scripts"), e(this, y).setAttribute("scrolling", "no");
+  }
+  get element() {
+    return e(this, E);
+  }
+  get document() {
+    return e(this, y).contentDocument;
+  }
+  async load(s, t, i) {
+    if (typeof s != "string")
+      throw new Error(`${s} is not string`);
+    return new Promise((n) => {
+      e(this, y).addEventListener("load", () => {
+        const r = this.document;
+        t == null || t(r), e(this, y).style.display = "block";
+        const { vertical: h, rtl: a } = de(r), d = Mt(r);
+        e(this, y).style.display = "none", g(this, S, h), g(this, ht, a), e(this, ot).selectNodeContents(r.body);
+        const u = i == null ? void 0 : i({ vertical: h, rtl: a, background: d });
+        e(this, y).style.display = "block", this.render(u), e(this, rt).observe(r.body), r.fonts.ready.then(() => this.expand()), n();
+      }, { once: !0 }), e(this, y).src = s;
+    });
+  }
+  render(s) {
+    s && (g(this, Y, s.flow !== "scrolled"), g(this, J, s), e(this, Y) ? this.columnize(s) : this.scrolled(s));
+  }
+  scrolled({ gap: s, columnWidth: t }) {
+    const i = e(this, S), n = this.document;
+    it(n.documentElement, {
+      "box-sizing": "border-box",
+      padding: i ? `${s}px 0` : `0 ${s}px`,
+      "column-width": "auto",
+      height: "auto",
+      width: "auto"
+    }), it(n.body, {
+      [i ? "max-height" : "max-width"]: `${t}px`,
+      margin: "auto"
+    }), this.setImageSize(), this.expand();
+  }
+  columnize({ width: s, height: t, gap: i, columnWidth: n }) {
+    const r = e(this, S);
+    g(this, $, r ? t : s);
+    const h = this.document;
+    it(h.documentElement, {
+      "box-sizing": "border-box",
+      "column-width": `${Math.trunc(n)}px`,
+      "column-gap": `${i}px`,
+      "column-fill": "auto",
+      ...r ? { width: `${s}px` } : { height: `${t}px` },
+      padding: r ? `${i / 2}px 0` : `0 ${i / 2}px`,
+      overflow: "hidden",
+      // force wrap long words
+      "overflow-wrap": "break-word",
+      // reset some potentially problematic props
+      position: "static",
+      border: "0",
+      margin: "0",
+      "max-height": "none",
+      "max-width": "none",
+      "min-height": "none",
+      "min-width": "none",
+      // fix glyph clipping in WebKit
+      "-webkit-line-box-contain": "block glyphs replaced"
+    }), it(h.body, {
+      "max-height": "none",
+      "max-width": "none",
+      margin: "0"
+    }), this.setImageSize(), this.expand();
+  }
+  setImageSize() {
+    const { width: s, height: t, margin: i } = e(this, J), n = e(this, S), r = this.document;
+    for (const h of r.body.querySelectorAll("img, svg, video")) {
+      const { maxHeight: a, maxWidth: d } = r.defaultView.getComputedStyle(h);
+      it(h, {
+        "max-height": n ? a !== "none" && a !== "0px" ? a : "100%" : `${t - i * 2}px`,
+        "max-width": n ? `${s - i * 2}px` : d !== "none" && d !== "0px" ? d : "100%",
+        "object-fit": "contain",
+        "page-break-inside": "avoid",
+        "break-inside": "avoid",
+        "box-sizing": "border-box"
+      });
+    }
+  }
+  expand() {
+    const { documentElement: s } = this.document;
+    if (e(this, Y)) {
+      const t = e(this, S) ? "height" : "width", i = e(this, S) ? "width" : "height", n = e(this, ot).getBoundingClientRect(), r = s.getBoundingClientRect(), a = (e(this, S) ? 0 : e(this, ht) ? r.right - n.right : n.left - r.left) + n[t], u = Math.ceil(a / e(this, $)) * e(this, $);
+      e(this, E).style.padding = "0", e(this, y).style[t] = `${u}px`, e(this, E).style[t] = `${u + e(this, $) * 2}px`, e(this, y).style[i] = "100%", e(this, E).style[i] = "100%", s.style[t] = `${e(this, $)}px`, e(this, v) && (e(this, v).element.style.margin = "0", e(this, v).element.style.left = e(this, S) ? "0" : `${e(this, $)}px`, e(this, v).element.style.top = e(this, S) ? `${e(this, $)}px` : "0", e(this, v).element.style[t] = `${u}px`, e(this, v).redraw());
+    } else {
+      const t = e(this, S) ? "width" : "height", i = e(this, S) ? "height" : "width", r = s.getBoundingClientRect()[t], { margin: h } = e(this, J), a = e(this, S) ? `0 ${h}px` : `${h}px 0`;
+      e(this, E).style.padding = a, e(this, y).style[t] = `${r}px`, e(this, E).style[t] = `${r}px`, e(this, y).style[i] = "100%", e(this, E).style[i] = "100%", e(this, v) && (e(this, v).element.style.margin = a, e(this, v).element.style.left = "0", e(this, v).element.style.top = "0", e(this, v).element.style[t] = `${r}px`, e(this, v).redraw());
+    }
+    this.onExpand();
+  }
+  set overlayer(s) {
+    g(this, v, s), e(this, E).append(s.element);
+  }
+  get overlayer() {
+    return e(this, v);
+  }
+  destroy() {
+    this.document && e(this, rt).unobserve(this.document.body);
+  }
+}
+rt = new WeakMap(), E = new WeakMap(), y = new WeakMap(), ot = new WeakMap(), v = new WeakMap(), S = new WeakMap(), ht = new WeakMap(), Y = new WeakMap(), $ = new WeakMap(), J = new WeakMap();
+var B, at, j, z, L, D, m, T, k, A, M, P, K, W, lt, ct, dt, U, V, q, Z, Et, Xt, ut, At, gt, Pt, mt, Rt, pt, It, H, st, zt, Gt, N, X, O, G, Ct, Yt, Tt, Jt, Q, nt, ft, Bt, yt, Lt, tt, bt, _t, Kt, kt, Ut, R, F, xt, Vt;
+class Qt extends HTMLElement {
+  constructor() {
+    super();
+    l(this, Et);
+    l(this, ut);
+    l(this, gt);
+    l(this, mt);
+    l(this, pt);
+    // allows one to process rects as if they were LTR and horizontal
+    l(this, H);
+    l(this, zt);
+    l(this, N);
+    l(this, O);
+    l(this, Ct);
+    l(this, Tt);
+    l(this, Q);
+    l(this, ft);
+    l(this, yt);
+    l(this, tt);
+    l(this, _t);
+    l(this, kt);
+    l(this, R);
+    l(this, xt);
+    l(this, B, this.attachShadow({ mode: "closed" }));
+    l(this, at, new ResizeObserver(() => this.render()));
+    l(this, j, void 0);
+    l(this, z, void 0);
+    l(this, L, void 0);
+    l(this, D, void 0);
+    l(this, m, void 0);
+    l(this, T, !1);
+    l(this, k, !1);
+    l(this, A, 0);
+    l(this, M, -1);
+    l(this, P, 0);
+    // anchor view to a fraction (0-1), Range, or Element
+    l(this, K, !1);
+    l(this, W, !1);
+    // while true, prevent any further navigation
+    l(this, lt, void 0);
+    l(this, ct, /* @__PURE__ */ new WeakMap());
+    l(this, dt, matchMedia("(prefers-color-scheme: dark)"));
+    l(this, U, void 0);
+    l(this, V, void 0);
+    l(this, q, void 0);
+    l(this, Z, void 0);
+    e(this, B).innerHTML = `<style>
+        :host {
+            --_gap: 7%;
+            --_margin: 48px;
+            --_max-inline-size: 720px;
+            --_max-block-size: 1440px;
+            --_max-column-count: 2;
+            --_vertical: 0;
+            --_half-gap: calc(var(--_gap) / 2);
+            --_max-width: calc(
+                var(--_vertical) * var(--_max-block-size)
+                + (1 - var(--_vertical)) * var(--_max-inline-size) * var(--_max-column-count)
+            );
+            --_max-height: calc(
+                var(--_vertical) * var(--_max-inline-size) * var(--_max-column-count)
+                + (1 - var(--_vertical)) * var(--_max-block-size)
+            );
+            display: grid;
+            grid-template-columns:
+                minmax(var(--_half-gap), 1fr)
+                minmax(0, var(--_max-width))
+                minmax(var(--_half-gap), 1fr);
+            grid-template-rows:
+                minmax(var(--_margin), 1fr)
+                minmax(0, var(--_max-height))
+                minmax(var(--_margin), 1fr);
+            box-sizing: border-box;
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+        }
+        #background {
+            grid-column-start: 1;
+            grid-column-end: 4;
+            grid-row-start: 1;
+            grid-row-end: 4;
+        }
+        #container {
+            grid-column-start: 2;
+            grid-row-start: 2;
+            overflow: hidden;
+        }
+        :host([flow="scrolled"]) #container {
+            grid-column-start: 1;
+            grid-column-end: 4;
+            grid-row-start: 1;
+            grid-row-end: 4;
+            overflow: auto;
+        }
+        #header {
+            grid-column-start: 2;
+            grid-row-start: 1;
+        }
+        #footer {
+            grid-column-start: 2;
+            grid-row-start: 3;
+            align-self: end;
+        }
+        #header, #footer {
+            display: grid;
+            height: var(--_margin);
+        }
+        :is(#header, #footer) > * {
+            display: flex;
+            align-items: center;
+            min-width: 0;
+        }
+        :is(#header, #footer) > * > * {
+            width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-align: center;
+            font-size: .75em;
+            opacity: .6;
+        }
+        </style>
+        <div id="background" part="filter"></div>
+        <div id="header"></div>
+        <div id="container"></div>
+        <div id="footer"></div>
+        `, g(this, j, e(this, B).getElementById("background")), g(this, z, e(this, B).getElementById("container")), g(this, L, e(this, B).getElementById("header")), g(this, D, e(this, B).getElementById("footer")), e(this, at).observe(e(this, z)), e(this, z).addEventListener("scroll", ie(() => {
+      this.scrolled && (e(this, K) ? g(this, K, !1) : c(this, Q, nt).call(this, "scroll"));
+    }, 250));
+    const t = { passive: !1 };
+    this.addEventListener("touchstart", c(this, gt, Pt).bind(this), t), this.addEventListener("touchmove", c(this, mt, Rt).bind(this), t), this.addEventListener("touchend", c(this, pt, It).bind(this)), this.addEventListener("load", ({ detail: { doc: i } }) => {
+      i.addEventListener("touchstart", c(this, gt, Pt).bind(this), t), i.addEventListener("touchmove", c(this, mt, Rt).bind(this), t), i.addEventListener("touchend", c(this, pt, It).bind(this));
+    }), g(this, U, () => {
+      e(this, m) && (e(this, j).style.background = Mt(e(this, m).document));
+    }), e(this, dt).addEventListener("change", e(this, U));
+  }
+  attributeChangedCallback(t, i, n) {
+    switch (t) {
+      case "flow":
+        this.render();
+        break;
+      case "gap":
+      case "margin":
+      case "max-block-size":
+      case "max-column-count":
+        this.style.setProperty("--_" + t, n);
+        break;
+      case "max-inline-size":
+        this.style.setProperty("--_" + t, n), this.render();
+        break;
+    }
+  }
+  open(t) {
+    this.bookDir = t.dir, this.sections = t.sections;
+  }
+  render() {
+    e(this, m) && (e(this, m).render(c(this, ut, At).call(this, {
+      vertical: e(this, T),
+      rtl: e(this, k)
+    })), this.scrollToAnchor(e(this, P)));
+  }
+  get scrolled() {
+    return this.getAttribute("flow") === "scrolled";
+  }
+  get scrollProp() {
+    const { scrolled: t } = this;
+    return e(this, T) ? t ? "scrollLeft" : "scrollTop" : t ? "scrollTop" : "scrollLeft";
+  }
+  get sideProp() {
+    const { scrolled: t } = this;
+    return e(this, T) ? t ? "width" : "height" : t ? "height" : "width";
+  }
+  get size() {
+    return e(this, z).getBoundingClientRect()[this.sideProp];
+  }
+  get viewSize() {
+    return e(this, m).element.getBoundingClientRect()[this.sideProp];
+  }
+  get start() {
+    return Math.abs(e(this, z)[this.scrollProp]);
+  }
+  get end() {
+    return this.start + this.size;
+  }
+  get page() {
+    return Math.floor((this.start + this.end) / 2 / this.size);
+  }
+  get pages() {
+    return Math.round(this.viewSize / this.size);
+  }
+  scrollBy(t, i) {
+    const n = e(this, T) ? i : t, r = e(this, z), { scrollProp: h } = this, [a, d, u] = e(this, V), w = e(this, k), p = w ? a - u : a - d, f = w ? a + d : a + u;
+    r[h] = Math.max(p, Math.min(
+      f,
+      r[h] + n
+    ));
+  }
+  snap(t, i) {
+    const n = e(this, T) ? i : t, [r, h, a] = e(this, V), { start: d, end: u, pages: w, size: p } = this, f = Math.abs(r) - h, x = Math.abs(r) + a, C = n * (e(this, k) ? -p : p), b = Math.floor(
+      Math.max(f, Math.min(x, (d + u) / 2 + (isNaN(C) ? 0 : C))) / p
+    );
+    c(this, O, G).call(this, b, "snap").then(() => {
+      const _ = b <= 0 ? -1 : b >= w - 1 ? 1 : null;
+      if (_)
+        return c(this, tt, bt).call(this, {
+          index: c(this, R, F).call(this, _),
+          anchor: _ < 0 ? () => 1 : () => 0
+        });
+    });
+  }
+  async scrollToAnchor(t, i) {
+    var d, u;
+    g(this, P, t);
+    const n = (u = (d = oe(t)) == null ? void 0 : d.getClientRects) == null ? void 0 : u.call(d);
+    if (n) {
+      const w = Array.from(n).find((p) => p.width > 0 && p.height > 0) || n[0];
+      if (!w)
+        return;
+      await c(this, zt, Gt).call(this, w, "anchor"), i && c(this, Ct, Yt).call(this);
+      return;
+    }
+    if (this.scrolled) {
+      await c(this, N, X).call(this, t * this.viewSize, "anchor");
+      return;
+    }
+    const { pages: r } = this;
+    if (!r)
+      return;
+    const h = r - 2, a = Math.round(t * (h - 1));
+    await c(this, O, G).call(this, a + 1, "anchor");
+  }
+  async goTo(t) {
+    if (e(this, W))
+      return;
+    const i = await t;
+    if (c(this, yt, Lt).call(this, i.index))
+      return c(this, tt, bt).call(this, i);
+  }
+  get atStart() {
+    return c(this, R, F).call(this, -1) == null && this.page <= 1;
+  }
+  get atEnd() {
+    return c(this, R, F).call(this, 1) == null && this.page >= this.pages - 2;
+  }
+  prev(t) {
+    return c(this, xt, Vt).call(this, -1, t);
+  }
+  next(t) {
+    return c(this, xt, Vt).call(this, 1, t);
+  }
+  prevSection() {
+    return this.goTo({ index: c(this, R, F).call(this, -1) });
+  }
+  nextSection() {
+    return this.goTo({ index: c(this, R, F).call(this, 1) });
+  }
+  firstSection() {
+    const t = this.sections.findIndex((i) => i.linear !== "no");
+    return this.goTo({ index: t });
+  }
+  lastSection() {
+    const t = this.sections.findLastIndex((i) => i.linear !== "no");
+    return this.goTo({ index: t });
+  }
+  getContents() {
+    return e(this, m) ? [{
+      index: e(this, M),
+      overlayer: e(this, m).overlayer,
+      doc: e(this, m).document
+    }] : [];
+  }
+  setStyles(t) {
+    var h, a, d, u, w;
+    g(this, lt, t);
+    const i = e(this, ct).get((h = e(this, m)) == null ? void 0 : h.document);
+    if (!i)
+      return;
+    const [n, r] = i;
+    if (Array.isArray(t)) {
+      const [p, f] = t;
+      n.textContent = p, r.textContent = f;
+    } else
+      r.textContent = t;
+    e(this, j).style.background = Mt(e(this, m).document), (w = (u = (d = (a = e(this, m)) == null ? void 0 : a.document) == null ? void 0 : d.fonts) == null ? void 0 : u.ready) == null || w.then(() => e(this, m).expand());
+  }
+  destroy() {
+    var t, i;
+    e(this, at).unobserve(this), e(this, m).destroy(), g(this, m, null), (i = (t = this.sections[e(this, M)]) == null ? void 0 : t.unload) == null || i.call(t), e(this, dt).removeEventListener("change", e(this, U));
+  }
+}
+B = new WeakMap(), at = new WeakMap(), j = new WeakMap(), z = new WeakMap(), L = new WeakMap(), D = new WeakMap(), m = new WeakMap(), T = new WeakMap(), k = new WeakMap(), A = new WeakMap(), M = new WeakMap(), P = new WeakMap(), K = new WeakMap(), W = new WeakMap(), lt = new WeakMap(), ct = new WeakMap(), dt = new WeakMap(), U = new WeakMap(), V = new WeakMap(), q = new WeakMap(), Z = new WeakMap(), Et = new WeakSet(), Xt = function() {
+  return e(this, m) && (e(this, m).destroy(), e(this, z).removeChild(e(this, m).element)), g(this, m, new ue({
+    container: this,
+    onExpand: () => this.scrollToAnchor(e(this, P))
+  })), e(this, z).append(e(this, m).element), e(this, m);
+}, ut = new WeakSet(), At = function({ vertical: t, rtl: i, background: n }) {
+  g(this, T, t), g(this, k, i), this.style.setProperty("--_vertical", t ? 1 : 0), e(this, j).style.background = n;
+  const { width: r, height: h } = e(this, z).getBoundingClientRect(), a = t ? h : r, d = getComputedStyle(this), u = parseFloat(d.getPropertyValue("--_max-inline-size")), w = parseInt(d.getPropertyValue("--_max-column-count")), p = parseFloat(d.getPropertyValue("--_margin"));
+  g(this, A, p);
+  const f = parseFloat(d.getPropertyValue("--_gap")) / 100, x = -f / (f - 1) * a, C = this.getAttribute("flow");
+  if (C === "scrolled") {
+    this.setAttribute("dir", t ? "rtl" : "ltr"), this.style.padding = "0";
+    const et = u;
+    return this.heads = null, this.feet = null, e(this, L).replaceChildren(), e(this, D).replaceChildren(), { flow: C, margin: p, gap: x, columnWidth: et };
+  }
+  const b = Math.min(w, Math.ceil(a / u)), _ = a / b - x;
+  this.setAttribute("dir", i ? "rtl" : "ltr");
+  const I = t ? Math.min(2, Math.ceil(r / u)) : b, vt = {
+    gridTemplateColumns: `repeat(${I}, 1fr)`,
+    gap: `${x}px`,
+    padding: t ? "0" : `0 ${x / 2}px`,
+    direction: this.bookDir === "rtl" ? "rtl" : "ltr"
+  };
+  Object.assign(e(this, L).style, vt), Object.assign(e(this, D).style, vt);
+  const Nt = Ht(I, "head"), Ot = Ht(I, "foot");
+  return this.heads = Nt.map((et) => et.children[0]), this.feet = Ot.map((et) => et.children[0]), e(this, L).replaceChildren(...Nt), e(this, D).replaceChildren(...Ot), { height: h, width: r, margin: p, gap: x, columnWidth: _ };
+}, gt = new WeakSet(), Pt = function(t) {
+  const i = t.changedTouches[0];
+  g(this, q, {
+    x: i == null ? void 0 : i.screenX,
+    y: i == null ? void 0 : i.screenY,
+    t: t.timeStamp,
+    vx: 0,
+    xy: 0
+  });
+}, mt = new WeakSet(), Rt = function(t) {
+  const i = e(this, q);
+  if (i.pinched || (i.pinched = globalThis.visualViewport.scale > 1, this.scrolled || i.pinched))
+    return;
+  if (t.touches.length > 1) {
+    e(this, Z) && t.preventDefault();
+    return;
+  }
+  t.preventDefault();
+  const n = t.changedTouches[0], r = n.screenX, h = n.screenY, a = i.x - r, d = i.y - h, u = t.timeStamp - i.t;
+  i.x = r, i.y = h, i.t = t.timeStamp, i.vx = a / u, i.vy = d / u, g(this, Z, !0), this.scrollBy(a, d);
+}, pt = new WeakSet(), It = function() {
+  g(this, Z, !1), !this.scrolled && requestAnimationFrame(() => {
+    globalThis.visualViewport.scale === 1 && this.snap(e(this, q).vx, e(this, q).vy);
+  });
+}, H = new WeakSet(), st = function() {
+  if (this.scrolled) {
+    const i = this.viewSize, n = e(this, A);
+    return e(this, T) ? ({ left: r, right: h }) => ({ left: i - h - n, right: i - r - n }) : ({ top: r, bottom: h }) => ({ left: r + n, right: h + n });
+  }
+  const t = this.pages * this.size;
+  return e(this, k) ? ({ left: i, right: n }) => ({ left: t - n, right: t - i }) : e(this, T) ? ({ top: i, bottom: n }) => ({ left: i, right: n }) : (i) => i;
+}, zt = new WeakSet(), Gt = async function(t, i) {
+  if (this.scrolled) {
+    const r = c(this, H, st).call(this)(t).left - e(this, A);
+    return c(this, N, X).call(this, r, i);
+  }
+  const n = c(this, H, st).call(this)(t).left + e(this, A) / 2;
+  return c(this, O, G).call(this, Math.floor(n / this.size) + (e(this, k) ? -1 : 1), i);
+}, N = new WeakSet(), X = async function(t, i, n) {
+  const r = e(this, z), { scrollProp: h, size: a } = this;
+  if (r[h] === t) {
+    g(this, V, [t, this.atStart ? 0 : a, this.atEnd ? 0 : a]), c(this, Q, nt).call(this, i);
+    return;
+  }
+  if (this.scrolled && e(this, T) && (t = -t), (i === "snap" || n) && this.hasAttribute("animated"))
+    return re(
+      r[h],
+      t,
+      300,
+      ne,
+      (d) => r[h] = d
+    ).then(() => {
+      g(this, V, [t, this.atStart ? 0 : a, this.atEnd ? 0 : a]), c(this, Q, nt).call(this, i);
+    });
+  r[h] = t, g(this, V, [t, this.atStart ? 0 : a, this.atEnd ? 0 : a]), c(this, Q, nt).call(this, i);
+}, O = new WeakSet(), G = async function(t, i, n) {
+  const r = this.size * (e(this, k) ? -t : t);
+  return c(this, N, X).call(this, r, i, n);
+}, Ct = new WeakSet(), Yt = function() {
+  const { defaultView: t } = e(this, m).document;
+  if (e(this, P).startContainer) {
+    const i = t.getSelection();
+    i.removeAllRanges(), i.addRange(e(this, P));
+  }
+}, Tt = new WeakSet(), Jt = function() {
+  if (this.scrolled)
+    return qt(
+      e(this, m).document,
+      this.start + e(this, A),
+      this.end - e(this, A),
+      c(this, H, st).call(this)
+    );
+  const t = e(this, k) ? -this.size : this.size;
+  return qt(
+    e(this, m).document,
+    this.start - t,
+    this.end - t,
+    c(this, H, st).call(this)
+  );
+}, Q = new WeakSet(), nt = function(t) {
+  const i = c(this, Tt, Jt).call(this);
+  t !== "anchor" ? g(this, P, i) : g(this, K, !0);
+  const n = e(this, M), r = { reason: t, range: i, index: n };
+  if (this.scrolled)
+    r.fraction = this.start / this.viewSize;
+  else if (this.pages > 0) {
+    const { page: h, pages: a } = this;
+    e(this, L).style.visibility = h > 1 ? "visible" : "hidden", r.fraction = (h - 1) / (a - 2), r.size = 1 / (a - 2);
+  }
+  this.dispatchEvent(new CustomEvent("relocate", { detail: r }));
+}, ft = new WeakSet(), Bt = async function(t) {
+  const { index: i, src: n, anchor: r, onLoad: h, select: a } = await t;
+  if (g(this, M, i), n) {
+    const d = c(this, Et, Xt).call(this), u = (p) => {
+      if (p.head) {
+        const f = p.createElement("style");
+        p.head.prepend(f);
+        const x = p.createElement("style");
+        p.head.append(x), e(this, ct).set(p, [f, x]);
+      }
+      h == null || h({ doc: p, index: i });
+    }, w = c(this, ut, At).bind(this);
+    await d.load(n, u, w), this.dispatchEvent(new CustomEvent("create-overlayer", {
+      detail: {
+        doc: d.document,
+        index: i,
+        attach: (p) => d.overlayer = p
+      }
+    })), g(this, m, d);
+  }
+  await this.scrollToAnchor((typeof r == "function" ? r(e(this, m).document) : r) ?? 0, a);
+}, yt = new WeakSet(), Lt = function(t) {
+  return t >= 0 && t <= this.sections.length - 1;
+}, tt = new WeakSet(), bt = async function({ index: t, anchor: i, select: n }) {
+  if (t === e(this, M))
+    await c(this, ft, Bt).call(this, { index: t, anchor: i, select: n });
+  else {
+    const r = e(this, M), h = (a) => {
+      var d, u;
+      (u = (d = this.sections[r]) == null ? void 0 : d.unload) == null || u.call(d), this.setStyles(e(this, lt)), this.dispatchEvent(new CustomEvent("load", { detail: a }));
+    };
+    await c(this, ft, Bt).call(this, Promise.resolve(this.sections[t].load()).then((a) => ({ index: t, src: a, anchor: i, onLoad: h, select: n })).catch((a) => (console.warn(a), console.warn(new Error(`Failed to load section ${t}`)), {})));
+  }
+}, _t = new WeakSet(), Kt = function(t) {
+  if (!e(this, m))
+    return !0;
+  if (this.scrolled)
+    return this.start > 0 ? c(this, N, X).call(this, Math.max(0, this.start - (t ?? this.size)), null, !0) : !0;
+  if (this.atStart)
+    return;
+  const i = this.page - 1;
+  return c(this, O, G).call(this, i, "page", !0).then(() => i <= 0);
+}, kt = new WeakSet(), Ut = function(t) {
+  if (!e(this, m))
+    return !0;
+  if (this.scrolled)
+    return this.viewSize - this.end > 2 ? c(this, N, X).call(this, Math.min(this.viewSize, t ? this.start + t : this.end), null, !0) : !0;
+  if (this.atEnd)
+    return;
+  const i = this.page + 1, n = this.pages;
+  return c(this, O, G).call(this, i, "page", !0).then(() => i >= n - 1);
+}, R = new WeakSet(), F = function(t) {
+  var i;
+  for (let n = e(this, M) + t; c(this, yt, Lt).call(this, n); n += t)
+    if (((i = this.sections[n]) == null ? void 0 : i.linear) !== "no")
+      return n;
+}, xt = new WeakSet(), Vt = async function(t, i) {
+  if (e(this, W))
+    return;
+  g(this, W, !0);
+  const n = t === -1, r = await (n ? c(this, _t, Kt).call(this, i) : c(this, kt, Ut).call(this, i));
+  r && await c(this, tt, bt).call(this, {
+    index: c(this, R, F).call(this, t),
+    anchor: n ? () => 1 : () => 0
+  }), (r || !this.hasAttribute("animated")) && await ee(100), g(this, W, !1);
+}, Ft(Qt, "observedAttributes", [
+  "flow",
+  "gap",
+  "margin",
+  "max-inline-size",
+  "max-block-size",
+  "max-column-count"
+]);
+customElements.define("foliate-paginator", Qt);
+export {
+  Qt as Paginator
+};