// src/Tile.ts
import TileSlider from "@boxslider/slider/effects/Tile";

// src/Slider.ts
import BoxSlider, { defaultOptions } from "@boxslider/slider/BoxSlider";
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/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);
}
export {
  TILE_ATTRIBUTES,
  Tile as default
};
