"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var src_exports = {};
__export(src_exports, {
  Carousel: () => Carousel,
  Cube: () => Cube,
  Fade: () => Fade,
  SliderControls: () => SliderControls,
  Tile: () => Tile
});
module.exports = __toCommonJS(src_exports);

// ../slider/dist/esm/effects/carousel-slider.js
function applyCss(el, styles) {
  Object.keys(styles).forEach((key) => el.style.setProperty(key, styles[key]));
}
var SLIDE_STYLES = [
  "left",
  "position",
  "top",
  "transform",
  "transition",
  "visibility",
  "z-index"
];
var BOX_STYLES = ["overflow", "position"];
var CarouselSlider = class {
  options;
  transitionTimer = 0;
  asyncTimer = 0;
  constructor(options) {
    this.options = {
      cover: options?.cover === true,
      timingFunction: options?.timingFunction || "ease-in-out"
    };
  }
  initialize(el, slides, stateStore, options) {
    stateStore.storeStyles(slides, SLIDE_STYLES);
    stateStore.storeStyles(el, BOX_STYLES);
    applyCss(el, {
      overflow: "hidden"
    });
    if ("static inherit".indexOf(getComputedStyle(el).position) !== -1) {
      applyCss(el, { position: "relative" });
    }
    slides.forEach((slide, index) => {
      applyCss(slide, {
        left: "0",
        position: "absolute",
        top: "0",
        transform: `translateX(${slide.offsetWidth}px)`,
        transition: "initial",
        visibility: "hidden",
        "z-index": "1"
      });
      if (index === options.startIndex) {
        applyCss(slide, {
          transform: "translateX(0px)",
          visibility: "visible",
          "z-index": "2"
        });
      }
    });
  }
  destroy() {
    window.clearTimeout(this.transitionTimer);
    window.clearTimeout(this.asyncTimer);
  }
  transition(settings) {
    return new Promise((resolve) => {
      const currentSlide = settings.slides[settings.currentIndex];
      const currentSlideWidth = `${currentSlide.offsetWidth}px`;
      const nextSlide = settings.slides[settings.nextIndex];
      const nextSlideWidth = `${nextSlide.offsetWidth}px`;
      applyCss(nextSlide, {
        transform: `translateX(${settings.isPrevious ? "-" + nextSlideWidth : nextSlideWidth})`
      });
      this.asyncTimer = window.setTimeout(() => {
        applyCss(nextSlide, {
          transform: "translateX(0px)",
          transition: `transform ${settings.speed}ms ${this.options.timingFunction}`,
          visibility: "visible",
          "z-index": "2"
        });
        applyCss(currentSlide, {
          transform: this.options.cover ? "translateX(0px)" : `translateX(${settings.isPrevious ? currentSlideWidth : "-" + currentSlideWidth})`,
          transition: this.options.cover ? "initial" : `transform ${settings.speed}ms ${this.options.timingFunction}`,
          visibility: "visible",
          "z-index": "1"
        });
        this.transitionTimer = window.setTimeout(() => {
          applyCss(currentSlide, {
            transform: `translateX(${currentSlideWidth})`,
            transition: "initial",
            visibility: "hidden"
          });
          resolve();
        }, settings.speed);
      }, 0);
    });
  }
};

// ../slider/dist/esm/box-slider.js
var StateStore = class {
  elementStore;
  constructor() {
    this.elementStore = [];
  }
  storeStyles(elements, styles) {
    this.applyToElements(elements, (el, elementStore) => {
      const computedStyles = getComputedStyle(el);
      styles.forEach(
        (p) => elementStore.styles[p] = computedStyles.getPropertyValue(p)
      );
    });
  }
  storeAttributes(elements, attributes) {
    this.applyToElements(elements, (el, elementStore) => {
      attributes.forEach(
        (attribute) => elementStore.attributes[attribute] = el.getAttribute(attribute)
      );
    });
  }
  revert() {
    this.elementStore.forEach((elementStore) => {
      Object.keys(elementStore.styles).forEach(
        (property) => elementStore.el.style.setProperty(
          property,
          elementStore.styles[property]
        )
      );
      Object.keys(elementStore.attributes).forEach((attribute) => {
        const cachedValue = elementStore.attributes[attribute];
        if (attribute === null || attribute === "") {
          elementStore.el.removeAttribute(attribute);
        } else if (cachedValue !== null) {
          elementStore.el.setAttribute(attribute, cachedValue);
        }
      });
    });
    this.elementStore = [];
  }
  applyToElements(elements, fn) {
    ;
    (Array.isArray(elements) ? elements : [elements]).forEach((el) => {
      let elementStore = this.elementStore.find((s) => s.el === el);
      if (!elementStore) {
        elementStore = { el, styles: {}, attributes: {} };
        this.elementStore.push(elementStore);
      }
      fn(el, elementStore);
    });
  }
};
var boxSliders = [];
var resizeObserver;
if (typeof ResizeObserver !== "undefined") {
  resizeObserver = new ResizeObserver((sliderElements) => {
    sliderElements.forEach(
      (sliderEl) => boxSliders.find((bs) => bs.el === sliderEl.target)?.reset()
    );
  });
}
var responder = {
  add(boxSlider) {
    boxSliders.push(boxSlider);
    resizeObserver?.observe(boxSlider.el);
  },
  remove(boxSlider) {
    resizeObserver?.unobserve(boxSlider.el);
    boxSliders = boxSliders.filter((b) => b !== boxSlider);
  }
};
var createQueue = () => {
  const queue = [];
  const run = () => {
    const fn = queue[0];
    if (fn) {
      fn().then(() => {
        queue.shift();
        run();
      });
    }
  };
  return {
    push(fn) {
      queue.push(fn);
      if (queue.length === 1) {
        run();
      }
    },
    clear() {
      queue.length = 0;
    }
  };
};
var defaultOptions = Object.freeze({
  autoScroll: true,
  pauseOnHover: false,
  speed: 800,
  startIndex: 0,
  swipe: true,
  swipeTolerance: 30,
  timeout: 5e3
});
var BoxSlider = class {
  _activeIndex;
  _el;
  _effect;
  _stateStore;
  options;
  slides;
  autoScrollTimer;
  eventListeners;
  elListeners;
  isDestroyed;
  transitionQueue;
  get activeIndex() {
    return this._activeIndex;
  }
  get el() {
    if (this._el === void 0) {
      throw new Error("Slider element is undefined");
    }
    return this._el;
  }
  get length() {
    return this.slides.length;
  }
  getOption(key) {
    return this.options[key];
  }
  get stateStore() {
    if (this._stateStore === void 0) {
      throw new Error(
        "State store is undefined, are you trying to interact with a destroyed slider?"
      );
    }
    return this._stateStore;
  }
  get effect() {
    if (this._effect === void 0) {
      throw new Error(
        "Slide effect is undefined, are you trying to interact with a destroyed slider?"
      );
    }
    return this._effect;
  }
  constructor(el, effect, options) {
    this._el = el;
    this._stateStore = new StateStore();
    this.transitionQueue = createQueue();
    this.slides = [];
    this.eventListeners = {};
    this.elListeners = {};
    this.isDestroyed = false;
    this.options = {
      autoScroll: true,
      speed: 800,
      timeout: 5e3,
      pauseOnHover: false,
      startIndex: 0,
      swipe: true,
      swipeTolerance: 30,
      ...options
    };
    this._activeIndex = this.options.startIndex;
    this.init(effect);
    if (this.slides.length < this.activeIndex) {
      this.destroy();
      throw new Error(
        `Start index option is out of bounds - slides=${this.slides.length} start=${this.activeIndex}`
      );
    }
    this.applyEventListeners();
    responder.add(this);
  }
  reset(options, effect) {
    this.stopAutoScroll();
    this.effect.destroy && this.effect.destroy(this.el);
    this.stateStore.revert();
    this.options = {
      ...this.options,
      ...options
    };
    if (options?.startIndex !== void 0 && !isNaN(options.startIndex)) {
      this._activeIndex = options.startIndex;
    }
    this.init(effect || this.effect);
  }
  next() {
    return this.skipTo(
      this.activeIndex === this.slides.length - 1 ? 0 : this.activeIndex + 1,
      false
    );
  }
  prev() {
    return this.skipTo(
      this.activeIndex === 0 ? this.slides.length - 1 : this.activeIndex - 1
    );
  }
  skipTo(nextIndex, backwards) {
    return new Promise((resolve) => {
      this.transitionQueue.push(async () => {
        await this.transitionTo(
          nextIndex,
          backwards === void 0 ? nextIndex < this.activeIndex : backwards
        );
        resolve();
      });
    });
  }
  pause() {
    this.options.autoScroll = false;
    if (this.autoScrollTimer) {
      this.stopAutoScroll();
      this.emit("pause");
    }
    return this;
  }
  play() {
    this.options.autoScroll = true;
    this.setAutoScroll();
    this.emit("play");
    return this;
  }
  addEventListener(ev, callback) {
    if (!Array.isArray(this.eventListeners[ev])) {
      this.eventListeners[ev] = [];
    }
    this.eventListeners[ev].push(callback);
    return this;
  }
  removeEventListener(ev, callback) {
    const listeners = this.eventListeners[ev]?.filter(
      (cb) => cb !== callback
    );
    this.eventListeners[ev] = listeners;
    return this;
  }
  destroy() {
    this.isDestroyed = true;
    this.stopAutoScroll();
    if (this.effect.destroy) {
      this.effect.destroy(this.el);
    }
    this.stateStore.revert();
    this.transitionQueue.clear();
    responder.remove(this);
    this.emit("destroy");
    this.eventListeners = {};
    Object.keys(this.elListeners).forEach(
      (ev) => this.elListeners[ev].forEach(
        (listener) => this.el.removeEventListener(ev, listener)
      )
    );
    this.elListeners = {};
    delete this._el;
    delete this._stateStore;
    delete this._effect;
    this.slides.length = 0;
  }
  init(effect) {
    this._effect = effect;
    this.slides = this.getSlides();
    this.effect.initialize(this.el, this.slides, this.stateStore, {
      ...this.options,
      startIndex: this.activeIndex
    });
    this.addAriaAttributes();
    if (this.options.autoScroll) {
      this.setAutoScroll();
    }
  }
  addAriaAttributes() {
    this.stateStore.storeAttributes(this.el, ["aria-live"]);
    this.el.setAttribute("aria-live", "polite");
    this.stateStore.storeAttributes(this.slides, ["aria-roledescription"]);
    this.slides.forEach(
      (slide) => slide.setAttribute("aria-roledescription", "slide")
    );
  }
  getSlides() {
    return Array.from(this.el.children).filter(
      (child) => child instanceof HTMLElement
    );
  }
  transitionTo(nextIndex, backwards) {
    return new Promise((resolve, reject) => {
      if (this.isDestroyed || nextIndex === this.activeIndex) {
        return resolve();
      }
      if (nextIndex < 0 || nextIndex >= this.slides.length) {
        return reject(new Error(`${nextIndex} is not a valid slide index`));
      }
      this.stopAutoScroll();
      const settings = {
        el: this.el,
        slides: this.slides,
        speed: this.options.speed,
        currentIndex: this.activeIndex,
        isPrevious: backwards,
        nextIndex
      };
      this._activeIndex = nextIndex;
      this.emit("before", {
        currentIndex: settings.currentIndex,
        nextIndex: settings.nextIndex,
        speed: settings.speed
      });
      this.effect.transition(settings).then(() => {
        if (this.options.autoScroll) {
          this.setAutoScroll();
        }
        this.emit("after");
        resolve();
      });
    });
  }
  stopAutoScroll() {
    window.clearTimeout(this.autoScrollTimer);
  }
  emit(ev, payload) {
    const handlers = this.eventListeners[ev];
    if (ev === "destroy") {
      const destroyHandlers = handlers;
      destroyHandlers?.forEach((cb) => cb());
    } else {
      handlers?.forEach(
        (cb) => cb({
          currentIndex: this.activeIndex,
          speed: this.options.speed,
          ...payload
        })
      );
    }
  }
  setAutoScroll() {
    this.stopAutoScroll();
    window.requestAnimationFrame(() => {
      if (!this._el) {
        return;
      }
      this.el.setAttribute("aria-live", "off");
      this.autoScrollTimer = window.setTimeout(
        () => this.next(),
        this.options.timeout
      );
    });
  }
  addElListener(ev, handler) {
    this.el.addEventListener(ev, handler);
    this.elListeners[ev] = this.elListeners[ev] || [];
    this.elListeners[ev].push(handler);
  }
  applyEventListeners() {
    this.addElListener("pointerenter", () => {
      if (this.options.autoScroll && this.options.pauseOnHover) {
        this.pause();
      }
    });
    this.addElListener("pointerleave", () => {
      if (this.options.autoScroll && this.options.pauseOnHover) {
        this.play();
      }
    });
    if (this.options.swipe) {
      this.addSwipeNavigation();
    }
  }
  addSwipeNavigation() {
    let pointerTraceX = 0;
    this.addElListener("pointerdown", (ev) => {
      pointerTraceX = ev.clientX;
    });
    this.addElListener("pointerup", (ev) => {
      const distanceX = ev.clientX - pointerTraceX;
      if (Math.abs(distanceX) >= this.options.swipeTolerance) {
        if (distanceX > 0) {
          this.prev();
        } else {
          this.next();
        }
        ev.stopPropagation();
      }
    });
  }
};

// src/Slider.ts
function camelize(str) {
  return str.replace(/-./g, (m) => m[1].toUpperCase());
}
function getNumericAttribute(el, attribute, defaultValue) {
  const attributeValue = el.getAttribute(attribute);
  let value = NaN;
  if (attributeValue !== null) {
    value = parseInt(attributeValue, 10);
  }
  return isNaN(value) ? defaultValue : value;
}
function getBbooleanAttribute(el, attribute, defaultValue) {
  if (el.hasAttribute(attribute)) {
    return el.getAttribute(attribute) !== "false";
  }
  return defaultValue;
}
var BOOLEAN_ATTRIBUTES = ["auto-scroll", "pause-on-hover"];
var NUMBER_ATTRIBUTES = [
  "speed",
  "timeout",
  "start-index",
  "swipe",
  "swipe-tolerance"
];
var SLIDER_ATTRIBUTES = [...BOOLEAN_ATTRIBUTES, ...NUMBER_ATTRIBUTES];
var Slider = class extends HTMLElement {
  #slider;
  get slider() {
    return this.#slider;
  }
  get autoScroll() {
    return getBbooleanAttribute(this, "auto-scroll", defaultOptions.autoScroll);
  }
  get pauseOnHover() {
    return getBbooleanAttribute(
      this,
      "pause-on-hover",
      defaultOptions.pauseOnHover
    );
  }
  get speed() {
    return getNumericAttribute(this, "speed", defaultOptions.speed);
  }
  get startIndex() {
    return getNumericAttribute(this, "start-index", defaultOptions.startIndex);
  }
  get swipe() {
    return getBbooleanAttribute(this, "swipe", defaultOptions.swipe);
  }
  get swipeTolerance() {
    return getNumericAttribute(
      this,
      "swipe-tolerance",
      defaultOptions.swipeTolerance
    );
  }
  get timeout() {
    return getNumericAttribute(this, "timeout", defaultOptions.timeout);
  }
  get options() {
    return {
      autoScroll: this.autoScroll,
      pauseOnHover: this.pauseOnHover,
      speed: this.speed,
      startIndex: this.startIndex,
      swipe: this.swipe,
      swipeTolerance: this.swipeTolerance,
      timeout: this.timeout
    };
  }
  init(effect) {
    const slider = new BoxSlider(this, effect, this.options);
    const events = [
      "play",
      "pause",
      "before",
      "after",
      "destroy"
    ];
    events.forEach(
      (ev) => slider.addEventListener(
        ev,
        (detail) => this.dispatchEvent(new CustomEvent(ev, { detail }))
      )
    );
    this.#slider = slider;
  }
  reset(options, effect) {
    this.slider?.reset(options, effect);
  }
  attributeChangedCallback(name) {
    if (SLIDER_ATTRIBUTES.includes(name)) {
      const propName = camelize(name);
      this.reset({ [propName]: this[propName] });
    }
  }
  disconnectedCallback() {
    this.slider?.destroy();
    this.#slider = void 0;
  }
};

// src/Carousel.ts
var CAROUSEL_ATTRIBUTES = ["cover", "timing-function"];
var Carousel = class extends Slider {
  static observedAttributes = [...SLIDER_ATTRIBUTES, ...CAROUSEL_ATTRIBUTES];
  get cover() {
    return getBbooleanAttribute(this, "cover", false);
  }
  get timingFunction() {
    return this.getAttribute("timing-function") || "ease-out";
  }
  connectedCallback() {
    this.init(
      new CarouselSlider({
        cover: this.cover,
        timingFunction: this.timingFunction
      })
    );
  }
  attributeChangedCallback(name) {
    if (CAROUSEL_ATTRIBUTES.includes(name)) {
      const propName = camelize(name);
      this.reset(
        { [propName]: this[propName] },
        new CarouselSlider({
          cover: this.cover,
          timingFunction: this.timingFunction
        })
      );
    } else {
      super.attributeChangedCallback(name);
    }
  }
};
if (typeof customElements !== "undefined") {
  customElements.define("bs-carousel", Carousel);
}

// ../slider/dist/esm/effects/cube-slider.js
function applyCss2(el, styles) {
  Object.keys(styles).forEach((key) => el.style.setProperty(key, styles[key]));
}
var SLIDE_STYLES2 = ["left", "position", "top", "transform", "z-index"];
var BOX_STYLES2 = [
  "left",
  "overflow",
  "position",
  "top",
  "transform",
  "transform-style",
  "transition",
  "z-index"
];
var VIEWPORT_STYLES = ["overflow", "perspective", "position"];
var CubeSlider = class {
  options;
  translateZ;
  transitionTimer = 0;
  constructor(options) {
    this.options = {
      direction: options?.direction || "horizontal",
      perspective: options?.perspective || 1e3
    };
  }
  initialize(el, slides, stateStore, options) {
    const width = el.offsetWidth;
    const height = el.offsetHeight;
    const perspective = `${this.options.perspective}px`;
    const viewport = el.parentElement;
    if (viewport == null) {
      throw new Error("Unable to locate viewport element for Cube slider");
    }
    this.translateZ = this.options.direction === "vertical" ? height / 2 : width / 2;
    stateStore.storeStyles(slides, SLIDE_STYLES2);
    stateStore.storeStyles(el, BOX_STYLES2);
    stateStore.storeStyles(viewport, VIEWPORT_STYLES);
    slides.forEach(
      (slide) => applyCss2(slide, {
        left: "0",
        position: "absolute",
        top: "0"
      })
    );
    applyCss2(el, {
      left: "0",
      overflow: "visible",
      position: "absolute",
      top: "0"
    });
    if (["absolute", "fixed", "relative"].indexOf(
      getComputedStyle(viewport).position
    ) === -1) {
      applyCss2(viewport, { position: "relative" });
    }
    applyCss2(viewport, {
      overflow: "visible",
      perspective
    });
    applyCss2(slides[options.startIndex || 0], {
      transform: `${this.rotation(0)} translate3d(0, 0, ${this.translateZ}px)`
    });
    applyCss2(el, {
      "transform-style": "preserve-3d",
      transform: `translate3d(0, 0, -${this.translateZ}px)`
    });
    this.transitionTimer = window.setTimeout(
      () => applyCss2(el, {
        transition: `transform ${options.speed}ms`
      }),
      50
    );
  }
  transition(settings) {
    return new Promise((resolve) => {
      const angle = settings.isPrevious ? 90 : -90;
      applyCss2(settings.slides[settings.nextIndex], {
        transform: `${this.rotation(-angle)} translate3d(0, 0, ${this.translateZ}px)`,
        "z-index": "2"
      });
      applyCss2(settings.el, {
        transition: `transform ${settings.speed}ms`,
        transform: `translate3d(0, 0, -${this.translateZ}px) ${this.rotation(
          angle
        )}`
      });
      this.transitionTimer = window.setTimeout(() => {
        settings.slides.forEach((s, index) => {
          if (index !== settings.nextIndex) {
            applyCss2(s, { transform: "initial" });
          }
        });
        applyCss2(settings.el, {
          transition: "initial",
          transform: `translate3d(0, 0, -${this.translateZ}px) ${this.rotation(
            0
          )}`
        });
        applyCss2(settings.slides[settings.nextIndex], {
          transform: `${this.rotation(0)} translate3d(0, 0, ${this.translateZ}px)`,
          "z-index": "1"
        });
        resolve();
      }, settings.speed);
    });
  }
  destroy() {
    window.clearTimeout(this.transitionTimer);
  }
  rotation(angle) {
    return `rotate3d(${this.options.direction === "vertical" ? "1, 0, 0" : "0, 1, 0"}, ${angle}deg)`;
  }
};

// src/Cube.ts
var CUBE_ATTRIBUTES = ["direction", "perspective"];
var Cube = class extends Slider {
  static observedAttributes = [...SLIDER_ATTRIBUTES, ...CUBE_ATTRIBUTES];
  get direction() {
    const propDirection = this.getAttribute("direction")?.trim();
    if (propDirection === "horizontal" || propDirection === "vertical") {
      return propDirection;
    }
    return "horizontal";
  }
  get perspective() {
    return getNumericAttribute(this, "perspective", 1e3);
  }
  attributeChangedCallback(name) {
    if (CUBE_ATTRIBUTES.includes(name)) {
      const propName = camelize(name);
      this.reset(
        { [propName]: this[propName] },
        new CubeSlider({
          direction: this.direction,
          perspective: this.perspective
        })
      );
    } else {
      super.attributeChangedCallback(name);
    }
  }
  connectedCallback() {
    this.init(
      new CubeSlider({
        direction: this.direction,
        perspective: this.perspective
      })
    );
  }
};
if (typeof customElements !== "undefined") {
  customElements.define("bs-cube", Cube);
}

// ../slider/dist/esm/effects/fade-slider.js
function applyCss3(el, styles) {
  Object.keys(styles).forEach((key) => el.style.setProperty(key, styles[key]));
}
var SLIDE_STYLES3 = [
  "display",
  "height",
  "left",
  "opacity",
  "position",
  "top",
  "transition",
  "width",
  "z-index"
];
var BOX_STYLES3 = ["height", "overflow", "position"];
var FadeSlider = class {
  options;
  transitionTimer = 0;
  constructor(options) {
    this.options = {
      timingFunction: options?.timingFunction || "ease-in"
    };
  }
  initialize(el, slides, styleStore, options) {
    styleStore.storeStyles(slides, SLIDE_STYLES3);
    styleStore.storeStyles(el, BOX_STYLES3);
    if ("static inherit".indexOf(getComputedStyle(el).position) !== -1) {
      applyCss3(el, { position: "relative" });
    }
    applyCss3(el, {
      height: `${slides[options.startIndex || 0].offsetHeight}px`,
      overflow: "hidden"
    });
    slides.forEach((slide, index) => {
      applyCss3(slide, {
        height: "100%",
        left: "0",
        opacity: "2",
        position: "absolute",
        top: "0",
        transition: `opacity ${options.speed}ms ${this.options.timingFunction}`,
        width: "100%",
        "z-index": "2"
      });
      if (index !== options.startIndex) {
        applyCss3(slide, { opacity: "0", "z-index": "1" });
      }
    });
  }
  transition(settings) {
    return new Promise((resolve) => {
      const currentSlide = settings.slides[settings.currentIndex];
      const nextSlide = settings.slides[settings.nextIndex];
      applyCss3(currentSlide, { "z-index": "1", opacity: "0" });
      applyCss3(nextSlide, { "z-index": "2", opacity: "1" });
      this.transitionTimer = window.setTimeout(resolve, settings.speed);
    });
  }
  destroy() {
    window.clearTimeout(this.transitionTimer);
  }
};

// src/Fade.ts
var FADE_ATTRIBUTES = ["timing-function"];
var Fade = class extends Slider {
  static observedAttributes = [...SLIDER_ATTRIBUTES, ...FADE_ATTRIBUTES];
  get timingFunction() {
    return this.getAttribute("timing-function")?.trim() || "ease-in-out";
  }
  attributeChangedCallback(name) {
    if (FADE_ATTRIBUTES.includes(name)) {
      const propName = camelize(name);
      this.reset(
        { [propName]: this[propName] },
        new FadeSlider({
          timingFunction: this.timingFunction
        })
      );
    } else {
      super.attributeChangedCallback(name);
    }
  }
  connectedCallback() {
    this.init(
      new FadeSlider({
        timingFunction: this.timingFunction
      })
    );
  }
};
if (typeof customElements !== "undefined") {
  customElements.define("bs-fade", Fade);
}

// ../slider/dist/esm/effects/tile/tile-slider.js
function applyCss4(el, styles) {
  Object.keys(styles).forEach((key) => el.style.setProperty(key, styles[key]));
}
var TILE_CLASS = "bs-tile";
var FRONT_FACE_CLASS = "bs-tile-front";
var BACK_FACE_CLASS = "bs-tile-back";
var FadeTransition = class {
  createTile(tileSettings) {
    const tile = document.createElement("div");
    const front = document.createElement("div");
    const back = document.createElement("div");
    const faces = [front, back];
    tile.classList.add(tileSettings.tileClass);
    applyCss4(tile, {
      height: `${tileSettings.height}px`,
      left: `${tileSettings.fromLeft}px`,
      overflow: "hidden",
      position: "absolute",
      top: `${tileSettings.fromTop}px`,
      width: `${tileSettings.width}px`
    });
    faces.forEach((face) => {
      applyCss4(face, {
        height: `${tileSettings.boxHeight}px`,
        left: `-${tileSettings.fromLeft}px`,
        position: "absolute",
        top: `-${tileSettings.fromTop}px`,
        transition: "opacity 400ms",
        width: `${tileSettings.boxWidth}px`
      });
    });
    applyCss4(back, { opacity: "0" });
    front.classList.add(tileSettings.frontClass);
    tile.appendChild(front);
    back.classList.add(tileSettings.backClass);
    tile.appendChild(back);
    return tile;
  }
  transition(tile, nextFace) {
    const front = tile.querySelector(`.${FRONT_FACE_CLASS}`);
    const back = tile.querySelector(`.${BACK_FACE_CLASS}`);
    applyCss4(front, { opacity: nextFace === "front" ? "1" : "0" });
    applyCss4(back, { opacity: nextFace === "front" ? "0" : "1" });
  }
  setTileFace(slide, tileFace) {
    const clone = slide.cloneNode(true);
    clone.removeAttribute("style");
    tileFace.replaceChildren(clone);
  }
};
var fade_transition_default = FadeTransition;
var FlipTransition = class {
  createTile(tileSettings) {
    const tileHolder = document.createElement("div");
    const tile = document.createElement("div");
    const front = document.createElement("div");
    const frontFace = document.createElement("div");
    const back = document.createElement("div");
    const backFace = document.createElement("div");
    const faces = [frontFace, backFace];
    applyCss4(tileHolder, {
      height: `${tileSettings.height}px`,
      left: `${tileSettings.fromLeft}px`,
      perspective: "300px",
      position: "absolute",
      top: `${tileSettings.fromTop}px`,
      width: `${tileSettings.width}px`,
      "z-index": `${tileSettings.zIndex}`
    });
    tile.classList.add(tileSettings.tileClass);
    applyCss4(tile, {
      height: "100%",
      position: "relative",
      "transform-style": "preserve-3d",
      transition: `transform ${tileSettings.speed}ms`,
      width: "100%"
    });
    tileHolder.appendChild(tile);
    faces.forEach(
      (face) => applyCss4(face, {
        height: `${tileSettings.boxHeight}px`,
        left: `-${tileSettings.fromLeft}px`,
        position: "absolute",
        top: `-${tileSettings.fromTop}px`,
        width: `${tileSettings.boxWidth}px`
      })
    );
    applyCss4(front, {
      "backface-visibility": "hidden",
      inset: "0",
      overflow: "clip",
      position: "absolute"
    });
    applyCss4(back, {
      "backface-visibility": "hidden",
      inset: "0",
      overflow: "clip",
      position: "absolute",
      transform: "rotateY(180deg)"
    });
    front.appendChild(frontFace);
    front.classList.add(tileSettings.frontClass);
    tile.appendChild(front);
    back.appendChild(backFace);
    back.classList.add(tileSettings.backClass);
    tile.appendChild(back);
    return tileHolder;
  }
  transition(tile, nextFace) {
    applyCss4(tile, {
      transform: `rotateY(${nextFace === "back" ? 180 : 0}deg)`
    });
  }
  setTileFace(slide, tileFace) {
    const clone = slide.cloneNode(true);
    clone.removeAttribute("style");
    tileFace.firstChild.replaceChildren(clone);
  }
};
var flip_transition_default = FlipTransition;
var defaultOptions2 = {
  tileEffect: "flip",
  rows: 8,
  rowOffset: 50
};
var SLIDE_STYLES4 = [
  "position",
  "clip",
  "height",
  "width",
  "margin",
  "padding",
  "border"
];
var BOX_STYLES4 = ["height", "position"];
var TileSlider = class {
  rowCount;
  rowOffset;
  tileEffect;
  _tileWrapper;
  tileTransition;
  grid;
  activeFace;
  rowTimers = [];
  tileTimers = [];
  get tileWrapper() {
    if (this._tileWrapper === void 0) {
      throw new Error("TileWrapper is undefined");
    }
    return this._tileWrapper;
  }
  constructor(options) {
    this.tileEffect = options?.tileEffect || defaultOptions2.tileEffect;
    this.rowCount = options?.rows || defaultOptions2.rows;
    this.rowOffset = options?.rowOffset || defaultOptions2.rowOffset;
    this.activeFace = "front";
    this.tileTransition = this.tileEffect === "fade" ? new fade_transition_default() : new flip_transition_default();
  }
  initialize(el, slides, stateStore, options) {
    const slide = slides[options.startIndex || 0];
    const fragment = document.createDocumentFragment();
    stateStore.storeStyles(el, BOX_STYLES4);
    stateStore.storeStyles(slides, SLIDE_STYLES4);
    this.grid = this.calculateGrid(el, slides);
    if (this._tileWrapper) {
      this.destroy(el);
    }
    const tileWrapper = document.createElement("div");
    tileWrapper.setAttribute("aria-hidden", "true");
    el.appendChild(tileWrapper);
    this._tileWrapper = tileWrapper;
    if ("fixed absolute relative".indexOf(getComputedStyle(el).position) === -1) {
      applyCss4(el, { position: "relative" });
    }
    applyCss4(el, {
      height: `${el.offsetHeight}px`
    });
    applyCss4(this.tileWrapper, {
      position: "absolute",
      top: "0",
      left: "0",
      width: "100%",
      height: "100%"
    });
    const totalTiles = this.grid.rows * this.grid.cols;
    for (let i = 0; i < this.grid.rows; ++i) {
      const fromTop = i * this.grid.tileHeight;
      for (let j = 0; j < this.grid.cols; ++j) {
        const tile = this.tileTransition.createTile({
          backClass: `${TILE_CLASS}-back`,
          boxWidth: el.offsetWidth,
          boxHeight: el.offsetHeight,
          fromTop,
          fromLeft: j * this.grid.tileWidth,
          frontClass: `${TILE_CLASS}-front`,
          height: this.grid.tileHeight,
          speed: (options.speed - this.rowOffset * (this.grid.rows - 1)) / this.grid.cols,
          tileClass: TILE_CLASS,
          width: this.grid.tileWidth,
          zIndex: totalTiles - (i + j)
        });
        fragment.appendChild(tile);
        this.tileTransition.setTileFace(
          slide,
          tile.querySelector(`.${FRONT_FACE_CLASS}`)
        );
      }
    }
    slides.forEach(
      (s) => applyCss4(s, {
        position: "absolute",
        clip: "rect(0 0 0 0)",
        height: "1px",
        width: "1px",
        margin: "-1px",
        padding: "0",
        border: "0"
      })
    );
    this.tileWrapper.appendChild(fragment);
  }
  transition(settings) {
    return new Promise((resolve) => {
      const tiles = this.tileWrapper.querySelectorAll(`.${TILE_CLASS}`);
      const rowInterval = this.rowOffset;
      const tileInterval = (settings.speed - rowInterval * (this.grid.rows - 1)) / this.grid.cols;
      const nextFace = this.activeFace === "front" ? "back" : "front";
      this.rowTimers.length = 0;
      this.tileTimers.length = 0;
      this.tileWrapper.querySelectorAll(
        `.${nextFace === "front" ? FRONT_FACE_CLASS : BACK_FACE_CLASS}`
      ).forEach(
        (tile) => this.tileTransition.setTileFace(
          settings.slides[settings.nextIndex],
          tile
        )
      );
      for (let i = 0; i < this.grid.rows; ++i) {
        let j = i * this.grid.cols;
        let timerIndex = 0;
        const rowEnd = j + this.grid.cols;
        const rowTimeout = i * rowInterval;
        this.rowTimers.push(
          window.setTimeout(() => {
            for (; j < rowEnd; ++j) {
              const tileTimeout = timerIndex * tileInterval;
              const tile = tiles[j];
              this.tileTimers.push(
                window.setTimeout(() => {
                  this.tileTransition.transition(tile, nextFace);
                  if (tile === tiles[tiles.length - 1]) {
                    this.activeFace = nextFace;
                    resolve();
                  }
                }, tileTimeout)
              );
              timerIndex += 1;
            }
          }, rowTimeout)
        );
      }
    });
  }
  destroy(el) {
    el.removeChild(this.tileWrapper);
    delete this._tileWrapper;
    this.rowTimers.forEach(window.clearTimeout);
    this.tileTimers.forEach(window.clearTimeout);
  }
  calculateGrid(el, slides) {
    const height = slides[0].offsetHeight;
    const width = slides[0].offsetWidth;
    const rows = this.rowCount;
    const tileHeight = Math.ceil(height / rows);
    const cols = Math.floor(el.offsetWidth / tileHeight);
    const tileWidth = Math.ceil(width / cols);
    return { cols, rows, tileHeight, tileWidth };
  }
};

// src/Tile.ts
var TILE_ATTRIBUTES = ["rows", "row-offset", "tile-effect"];
var Tile = class extends Slider {
  static observedAttributes = [...SLIDER_ATTRIBUTES, ...TILE_ATTRIBUTES];
  get rows() {
    return getNumericAttribute(this, "rows", 8);
  }
  get rowOffset() {
    return getNumericAttribute(this, "row-offset", 50);
  }
  get tileEffect() {
    return this.getAttribute("tile-effect") || "fade";
  }
  attributeChangedCallback(name) {
    if (TILE_ATTRIBUTES.includes(name)) {
      const propName = camelize(name);
      this.reset(
        { [propName]: this[propName] },
        new TileSlider({
          rows: this.rows,
          rowOffset: this.rowOffset,
          tileEffect: this.tileEffect
        })
      );
    } else {
      super.attributeChangedCallback(name);
    }
  }
  connectedCallback() {
    this.init(
      new TileSlider({
        rows: this.rows,
        rowOffset: this.rowOffset,
        tileEffect: this.tileEffect
      })
    );
  }
};
if (typeof customElements !== "undefined") {
  customElements.define("bs-tile", Tile);
}

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

  <div  part="play-btn-container">
    <slot name="play-btn">
      <button part="btn play-btn"></button>
    </slot>
  </div>

  <div part="controls-container">
    <slot name="prev-btn">
      <button part="prev-btn btn"></button>
    </slot>
    <slot name="next-btn">
      <button part="next-btn btn"></button>
    </slot>
  </div>

  <div part="index-container">
    <slot name="index"></slot>
  </div>
</div>
`;
var incrementingId = 1;
var SliderControls = class extends HTMLElement {
  #sliderElement = null;
  #mutationObserver;
  #hasBeenInteractedWith = false;
  constructor() {
    super();
    this.#mutationObserver = new MutationObserver(() => {
      this.#init();
    });
  }
  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });
    shadow.appendChild(template.content.cloneNode(true));
    const sliderSlot = shadow.querySelector("#slider");
    if (!this.hasAttribute("aria-roledescription")) {
      this.setAttribute("aria-roledescription", "carousel");
    }
    this.#initializeControl(
      shadow.querySelector('slot[name="prev-btn"]'),
      () => this.#sliderElement?.slider?.prev(),
      { "aria-label": this.#prevBtnLabel() }
    );
    this.#initializeControl(
      shadow.querySelector('slot[name="next-btn"]'),
      () => this.#sliderElement?.slider?.next(),
      { "aria-label": this.#nextBtnLabel() }
    );
    this.#initPlayBtnSlot();
    this.#initIndexSlot();
    sliderSlot?.addEventListener("slotchange", () => this.#init());
  }
  #init() {
    this.#mutationObserver.disconnect();
    const sliderSlotRoot = this.shadowRoot?.querySelector("#slider")?.assignedElements()[0];
    const isSliderElement = sliderSlotRoot.tagName.toLowerCase().startsWith("bs-");
    if (isSliderElement) {
      this.#sliderElement = sliderSlotRoot;
    } else {
      this.#mutationObserver.observe(sliderSlotRoot, {
        subtree: true,
        childList: true
      });
      this.#sliderElement = sliderSlotRoot.querySelector(
        "bs-carousel, bs-cube, bs-fade, bs-tile"
      );
    }
    if (this.#sliderElement?.slider) {
      let sliderId = this.#sliderElement?.id;
      if (!sliderId) {
        sliderId = `bs-slider-${incrementingId++}`;
        this.#sliderElement.id = sliderId;
      }
      this.shadowRoot?.querySelectorAll('[part~="btn"]').forEach((btn) => {
        btn.setAttribute("aria-controls", sliderId);
      });
      this.#setPlayBtnState();
      this.#sliderElement?.slider.addEventListener(
        "play",
        () => this.#setPlayBtnState()
      );
      this.#sliderElement?.slider.addEventListener(
        "pause",
        () => this.#setPlayBtnState()
      );
      this.#addIndexPips();
      this.#sliderElement?.slider.addEventListener(
        "before",
        ({ currentIndex, nextIndex }) => {
          this.#setIndexPipState(currentIndex, nextIndex);
        }
      );
    }
  }
  #initializeControl(slot, clickHandler, attributes = {}) {
    const defaultButton = slot.querySelector('[part~="btn"]');
    if (defaultButton) {
      for (const [key, value] of Object.entries(attributes)) {
        defaultButton.setAttribute(key, value);
      }
    }
    slot.addEventListener("click", (ev) => {
      this.#hasBeenInteractedWith = true;
      this.#sliderElement?.slider?.pause();
      clickHandler(ev);
    });
    slot.addEventListener("focusin", () => {
      if (!this.#hasBeenInteractedWith) {
        this.#sliderElement?.slider?.pause();
      }
    });
  }
  #initIndexSlot() {
    const indexSlot = this.shadowRoot?.querySelector('slot[name="index"]');
    if (indexSlot) {
      indexSlot?.addEventListener("click", (ev) => {
        const container = indexSlot.assignedElements()[0] ?? indexSlot;
        if (container) {
          const index = Array.from(
            container.querySelectorAll("button")
          ).indexOf(ev.target);
          if (index > -1) {
            this.#hasBeenInteractedWith = true;
            this.#sliderElement?.slider?.pause();
            this.#sliderElement?.slider?.skipTo(index);
          }
        }
      });
      indexSlot?.addEventListener("slotchange", () => {
        const container = indexSlot.assignedElements()[0];
        if (container) {
          const buttons = container.querySelectorAll("button");
          const slider = this.#sliderElement?.slider;
          if (slider && buttons) {
            buttons.forEach((btn, index) => {
              btn.setAttribute(
                "aria-pressed",
                index === slider.activeIndex ? "true" : "false"
              );
            });
          }
        }
      });
    }
  }
  #addIndexPips() {
    const indexSlot = this.shadowRoot?.querySelector('slot[name="index"]');
    if (indexSlot) {
      this.#clearIndexPips();
      const slideCount = this.#sliderElement?.slider?.length ?? 0;
      if (slideCount > 1 && !this.hasAttribute("disable-index")) {
        const frag = document.createDocumentFragment();
        const labelTemplate = this.getAttribute("index-btn-label") ?? "View slide %d";
        for (let i = 0; i < slideCount; i++) {
          const btn = document.createElement("button");
          const isActive = i === this.#sliderElement.slider.activeIndex;
          const label = labelTemplate.replace(/%d/g, `${i + 1}`);
          btn.setAttribute("aria-label", label);
          btn.setAttribute("aria-pressed", isActive ? "true" : "false");
          btn.setAttribute("aria-controls", this.#sliderElement.id);
          btn.setAttribute("part", isActive ? "index-btn active" : "index-btn");
          btn.setAttribute("type", "button");
          frag.appendChild(btn);
        }
        indexSlot?.appendChild(frag);
      }
    }
  }
  #setIndexPipState(currentIndex, nextIndex) {
    const indexSlot = this.shadowRoot?.querySelector('slot[name="index"]');
    if (indexSlot) {
      const container = indexSlot?.assignedElements()[0] ?? indexSlot;
      const buttons = container?.querySelectorAll("button");
      const currentBtn = buttons?.item(currentIndex);
      const nextBtn = buttons?.item(nextIndex ?? -1);
      if (currentBtn) {
        currentBtn.setAttribute("aria-pressed", "false");
        if (currentBtn.hasAttribute("part")) {
          currentBtn.setAttribute("part", "index-btn");
        }
      }
      if (nextBtn) {
        nextBtn.setAttribute("aria-pressed", "true");
        if (nextBtn.hasAttribute("part")) {
          nextBtn.setAttribute("part", "index-btn active");
        }
      }
    }
  }
  #clearIndexPips() {
    const indexSlot = this.shadowRoot?.querySelector('slot[name="index"]');
    if (indexSlot) {
      const assignedElements = indexSlot?.assignedElements() ?? [];
      indexSlot?.querySelectorAll("button").forEach((btn) => {
        if (!assignedElements.includes(btn)) {
          indexSlot.removeChild(btn);
        }
      });
    }
  }
  #initPlayBtnSlot() {
    const slot = this.shadowRoot?.querySelector(
      'slot[name="play-btn"]'
    );
    if (slot) {
      slot.addEventListener("slotchange", () => {
        this.#setPlayBtnState();
      });
      slot.addEventListener("click", () => {
        this.#hasBeenInteractedWith = true;
        if (this.#sliderElement?.slider?.getOption("autoScroll")) {
          this.#sliderElement?.slider?.pause();
        } else {
          this.#sliderElement?.slider?.play();
        }
      });
    }
  }
  #setPlayBtnState() {
    const slot = this.shadowRoot?.querySelector(
      'slot[name="play-btn"]'
    );
    if (slot) {
      const button = slot.assignedElements()[0] ?? slot.querySelector('[part~="btn"]');
      button.setAttribute(
        "aria-label",
        this.#sliderElement?.slider?.getOption("autoScroll") ? this.#pauseButtonLabel() : this.#playButtonLabel()
      );
      button?.setAttribute(
        "part",
        this.#sliderElement?.slider?.getOption("autoScroll") ? "btn play-btn pause" : "btn play-btn"
      );
    }
  }
  #nextBtnLabel() {
    return this.getAttribute("next-btn-label") ?? "Next";
  }
  #prevBtnLabel() {
    return this.getAttribute("prev-btn-label") ?? "Previous";
  }
  #playButtonLabel() {
    return this.getAttribute("play-btn-label") ?? "Start slide auto scroll";
  }
  #pauseButtonLabel() {
    return this.getAttribute("pause-btn-label") ?? "Stop slide auto scroll";
  }
};
if (typeof customElements !== "undefined") {
  customElements.define("bs-slider-controls", SliderControls);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Carousel,
  Cube,
  Fade,
  SliderControls,
  Tile
});
