import { n as s, C as P } from "./lib-cortex-element.CVMmyPMC.js";
import { c as z } from "./component.styles.CRO4Odto.js";
import { O as C } from "./index.Cpamj0jB.js";
import { c as F } from "./custom-element.L4WJXn1j.js";
import { L as S } from "./i18n.BABe9hN4.js";
import { w as f } from "./watch.BCJD77bD.js";
import { i as O, x as y } from "./lit-element.jLBm65_O.js";
import { r as j } from "./state.CSDxrqLd.js";
import { e as K } from "./query.BBf1UFkC.js";
import { r as H } from "./query-all.i3PyvTUQ.js";
import { e as L } from "./class-map.BiVq-cVR.js";
import { o as E } from "./if-defined.BRoBj_Rp.js";
import { o as D } from "./map.D8heArFD.js";
import { n as w } from "./when.Dr1es41R.js";
import T from "../components/tooltip.js";
const B = O`:host{display:inline-block}:host([orientation=vertical]){height:100%}:host([orientation=vertical]) .dot-pagination{flex-direction:column;height:100%}.dot-pagination{justify-content:center;gap:var(--cx-spacing-small);flex-wrap:wrap;display:flex}.dot-pagination__dot{cursor:pointer;border-radius:var(--cx-border-radius-circle);width:var(--cx-spacing-small);height:var(--cx-spacing-small);background:0 0;background-color:var(--cx-color-neutral-300);border:0;margin:0;padding:0;display:block}.dot-pagination__dot--active{background-color:var(--cx-color-neutral-500)}.dot-pagination__dot--transitioning{cursor:default;opacity:.5}.dot-pagination__ellipsis{color:var(--cx-color-neutral-400);font-size:var(--cx-font-size-small);font-weight:var(--cx-font-weight-medium);user-select:none;min-width:var(--cx-spacing-small);height:var(--cx-spacing-small);justify-content:center;align-items:center;display:flex}.dot-pagination__dot:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}@media (width<=640px){.dot-pagination{gap:var(--cx-spacing-x-small);padding:var(--cx-spacing-medium)}}@media (prefers-contrast:high){.dot-pagination__dot{border:1px solid var(--cx-color-neutral-600)}.dot-pagination__dot--active{border-color:var(--cx-color-neutral-700)}}@media (prefers-reduced-motion:reduce){.dot-pagination__dot{transition:none}}`;
var R = Object.defineProperty, V = Object.getOwnPropertyDescriptor, i = (t, n, e, c) => {
  for (var l = c > 1 ? void 0 : c ? V(n, e) : n, r = t.length - 1, a; r >= 0; r--)
    (a = t[r]) && (l = (c ? a(n, e, l) : a(l)) || l);
  return c && l && R(n, e, l), l;
};
let o = class extends P {
  constructor() {
    super(...arguments), this.localize = new S(this), this.activeIndex = 0, this.totalItemsCount = 0, this.visibleItemsCount = 1, this.step = 1, this.centerDots = 5, this.frontDots = 3, this.backDots = 3, this.loop = !1, this.orientation = C.Horizontal, this.transitioning = !1, this.tooltipPlacement = void 0, this.tooltipDescription = void 0, this.description = void 0, this.controlIds = [], this.dots = {
      back: [],
      backEllipsis: !1,
      center: [],
      front: [],
      frontEllipsis: !1
    };
  }
  calculateDots() {
    const {
      activeIndex: t,
      backDots: n,
      centerDots: e,
      frontDots: c,
      loop: l,
      step: r,
      totalItemsCount: a,
      visibleItemsCount: p
    } = this, U = a % p !== 0 ? Math.ceil(a / p) * p : a, m = l ? U : a, I = m - a, $ = l ? m : m - (p - r), M = I >= r ? $ - I : $, g = a > 0 ? Math.max(1, Math.ceil(M / r)) : 0, v = Math.floor(e / 2), _ = Math.floor(t / r), d = {
      back: [],
      backEllipsis: !1,
      center: [],
      front: [],
      frontEllipsis: !1
    }, N = c + e + n, x = l ? m : Math.max(0, m - p);
    if (g <= N)
      d.front = Array.from(
        { length: g },
        (u, h) => Math.min(h * r, x)
      );
    else {
      d.frontEllipsis = _ > c + v, d.backEllipsis = _ < g - n - v - 1, d.front = Array.from(
        { length: c },
        (k, b) => Math.min(b * r, x)
      ), d.back = Array.from(
        { length: n },
        (k, b) => Math.min((g - n + b) * r, x)
      );
      let u, h;
      d.frontEllipsis ? d.backEllipsis ? (u = _ - v, h = u + e) : (h = g - n, u = h - e) : (u = c, h = u + e), d.center = Array.from({ length: h - u }, (k, b) => {
        const A = (u + b) * r;
        return Math.min(A, x);
      });
    }
    this.dots = d;
  }
  /**
   * Carousel focus active item when key is pressed from pagination
   */
  focus() {
    this.activeDot?.focus();
  }
  handleDotClick(t) {
    const n = t.currentTarget, e = Number(n.dataset.index);
    e === this.activeIndex || isNaN(e) || (this.activeIndex = e, this.emit("cx-dot-pagination-change", {
      detail: {
        active: e
      }
    }));
  }
  handleKeyDown(t) {
    const n = t.target;
    if (t.key === "Enter" || t.key === " ") {
      t.preventDefault(), n.click();
      return;
    }
    const e = this.orientation === C.Horizontal, c = e ? ["ArrowRight"] : ["ArrowDown"], l = e ? ["ArrowLeft"] : ["ArrowUp"];
    if (![...c, ...l].includes(t.key))
      return;
    t.preventDefault(), t.stopPropagation();
    const r = Array.from(this.allDots), a = r.indexOf(n);
    if (a === -1)
      return;
    let p = c.includes(t.key) ? a + 1 : a - 1;
    this.loop ? p = (p + r.length) % r.length : p = Math.max(0, Math.min(p, r.length - 1)), r[p]?.focus();
  }
  handleFocus() {
    this.emit("cx-dot-pagination-focus");
  }
  renderEllipsis() {
    return y`<span part="ellipsis" class="dot-pagination__ellipsis" aria-hidden="true">
        •••
      </span>`;
  }
  renderDot(t) {
    const n = t + 1, e = y`<button part="dot${this.activeIndex === t ? " dot--active" : ""}" class=${L({
      "dot-pagination__dot": !0,
      "dot-pagination__dot--active": t === this.activeIndex,
      "dot-pagination__dot--transitioning": this.transitioning
    })} role="tab" type="button" aria-selected=${t === this.activeIndex ? "true" : "false"} aria-label=${this.localize.term("slideNum", n)} aria-controls=${E(this.controlIds[t])} tabindex="0" data-index=${t} ?disabled=${this.transitioning} @click=${this.handleDotClick} @keydown=${this.handleKeyDown} @focus=${this.handleFocus}></button>`;
    return w(
      this.tooltipPlacement,
      () => y`<cx-tooltip content=${this.tooltipDescription || t + 1} placement=${this.tooltipPlacement}>${e}</cx-tooltip>`,
      () => e
    );
  }
  render() {
    return y`<div part="base" class="dot-pagination" role="tablist" aria-roledescription=${E(this.description || void 0)} aria-label=${this.localize.term("pagination")}>${D(this.dots.front, (t) => this.renderDot(t))}
        ${w(this.dots.frontEllipsis, () => this.renderEllipsis())}
        ${D(this.dots.center, (t) => this.renderDot(t))}
        ${w(this.dots.backEllipsis, () => this.renderEllipsis())}
        ${D(this.dots.back, (t) => this.renderDot(t))}</div>`;
  }
};
o.styles = [z, B];
o.dependencies = { "cx-tooltip": T };
i([
  K(".dot-pagination__dot--active")
], o.prototype, "activeDot", 2);
i([
  H(".dot-pagination__dot")
], o.prototype, "allDots", 2);
i([
  s({ attribute: "active-index", reflect: !0, type: Number })
], o.prototype, "activeIndex", 2);
i([
  s({ attribute: "total-items-count", reflect: !0, type: Number })
], o.prototype, "totalItemsCount", 2);
i([
  s({ attribute: "visible-items-count", reflect: !0, type: Number })
], o.prototype, "visibleItemsCount", 2);
i([
  s({ reflect: !0, type: Number })
], o.prototype, "step", 2);
i([
  s({ attribute: "center-dots", reflect: !0, type: Number })
], o.prototype, "centerDots", 2);
i([
  s({ attribute: "front-dots", reflect: !0, type: Number })
], o.prototype, "frontDots", 2);
i([
  s({ attribute: "back-dots", reflect: !0, type: Number })
], o.prototype, "backDots", 2);
i([
  s({ reflect: !0, type: Boolean })
], o.prototype, "loop", 2);
i([
  s({ reflect: !0, type: String })
], o.prototype, "orientation", 2);
i([
  s({ reflect: !0, type: Boolean })
], o.prototype, "transitioning", 2);
i([
  s({ attribute: "tooltip-placement", reflect: !0, type: String })
], o.prototype, "tooltipPlacement", 2);
i([
  s({ attribute: "tooltip-description", reflect: !0, type: String })
], o.prototype, "tooltipDescription", 2);
i([
  s({ reflect: !0, type: String })
], o.prototype, "description", 2);
i([
  s({
    attribute: "control-ids",
    converter: {
      fromAttribute: (t) => t?.split(" ") ?? [],
      toAttribute: (t) => t.join(" ")
    },
    reflect: !0
  })
], o.prototype, "controlIds", 2);
i([
  j()
], o.prototype, "dots", 2);
i([
  f("centerDots", { waitUntilFirstUpdate: !0 }),
  f("frontDots", { waitUntilFirstUpdate: !0 }),
  f("backDots", { waitUntilFirstUpdate: !0 }),
  f("activeIndex", { waitUntilFirstUpdate: !0 }),
  f("step", { waitUntilFirstUpdate: !0 }),
  f("visibleItemsCount", { waitUntilFirstUpdate: !0 }),
  f("loop", { waitUntilFirstUpdate: !0 }),
  f("totalItemsCount")
], o.prototype, "calculateDots", 1);
o = i([
  F("cx-dot-pagination")
], o);
export {
  o as C,
  B as d
};
