// src/SliderControls.ts
var template = document.createElement("template");
template.innerHTML = `
<div part="container">
  <div part="slider">
    <slot id="slider"></slot>
  </div>

  <div part="controls">
    <slot name="prev-btn">
      <button part="prev-btn nav-btn" type="button" aria-label="Previous"></button>
    </slot>
    <slot name="next-btn">
      <button part="next-btn nav-btn" type="button" aria-label="Next"></button>
    </slot>
  </div>

  <slot name="index" part="index"></slot>
</div>
`;
var incrementingId = 1;
var SliderControls = class extends HTMLElement {
  #slider;
  connectedCallback() {
    this.setAttribute("aria-roledescription", "carousel");
    const shadow = this.attachShadow({ mode: "open" });
    const tree = template.content.cloneNode(true);
    const sliderSlot = tree.querySelector("#slider");
    sliderSlot?.addEventListener("slotchange", () => {
      const sliderComponent = sliderSlot.assignedElements()[0];
      if (!sliderComponent.id) {
        sliderComponent.id = `bs-slider-${incrementingId++}`;
      }
      this.#slider = sliderComponent?.slider;
      this.#slider?.addEventListener("after", ({ currentIndex }) => {
        indexSlot?.querySelectorAll("button").forEach((b, index) => {
          const isActive = index === currentIndex;
          b.setAttribute("aria-pressed", isActive ? "true" : "false");
          b.setAttribute("part", isActive ? "index-btn active" : "index-btn");
        });
      });
      const indexSlot = shadow.querySelector('slot[name="index"]');
      const slides = Array.from(this.#slider?.el.children || []).filter(
        (el) => el instanceof HTMLElement
      );
      if (slides.length > 1) {
        const frag = document.createDocumentFragment();
        for (let i = 0; i < slides.length; i++) {
          const btn = document.createElement("button");
          btn.setAttribute("aria-label", `View slide ${i + 1}`);
          btn.setAttribute(
            "part",
            i === this.#slider?.activeIndex ? "index-btn active" : "index-btn"
          );
          btn.setAttribute("type", "button");
          btn.setAttribute("aria-controls", sliderComponent.id);
          btn.addEventListener("click", () => {
            this.#slider?.skipTo(i).then();
          });
          frag.appendChild(btn);
        }
        indexSlot?.appendChild(frag);
      }
      indexSlot?.addEventListener("slotchange", () => {
        const index = indexSlot.assignedElements()[0];
        if (index.hasChildNodes()) {
          index.childNodes.forEach((node, index2) => {
            node.addEventListener("click", () => this.#slider?.skipTo(index2));
          });
        }
      });
    });
    const prevBtnSlot = tree.querySelector(
      'slot[name="prev-btn"]'
    );
    prevBtnSlot?.querySelector("button")?.addEventListener("click", () => this.#slider?.prev());
    prevBtnSlot?.addEventListener("slotchange", () => {
      const button = prevBtnSlot.assignedElements()[0];
      button?.addEventListener("click", () => {
        this.#slider?.prev();
      });
    });
    const nextBtnSlot = tree.querySelector(
      'slot[name="next-btn"]'
    );
    nextBtnSlot?.querySelector("button")?.addEventListener("click", () => this.#slider?.next());
    nextBtnSlot?.addEventListener("slotchange", () => {
      const button = nextBtnSlot.assignedElements()[0];
      button?.addEventListener("click", () => {
        this.#slider?.next();
      });
    });
    shadow.appendChild(tree);
  }
  disconnectedCallback() {
    this.#slider = void 0;
  }
};
if (typeof customElements !== "undefined") {
  customElements.define("bs-slider-controls", SliderControls);
}
export {
  SliderControls as default
};
