@alegendstale/holly-components/dist/components/carousel-scroller/carousel-scroller.js

Reusable UI components created using lit

import { LitElement as c, html as u } from "lit";
import { query as d, customElement as C } from "lit/decorators.js";
import a from "./carousel-scroller.styles.js";
var _ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (e, l, o, r) => {
  for (var t = r > 1 ? void 0 : r ? S(l, o) : l, i = e.length - 1, n; i >= 0; i--)
    (n = e[i]) && (t = (r ? n(l, o, t) : n(t)) || t);
  return r && t && _(l, o, t), t;
};
let s = class extends c {
  constructor() {
    super(...arguments), this.slotChildren = [], this._currentSlide = 0;
  }
  render() {
    return u`
			<div class="container">
				<button @click=${this.scrollToPrevSlide}><</button>
				<button @click=${this.scrollToNextSlide}>></button>
				<div>
					<slot
						@slotchange=${this.handleSlotChange}
					>
					</slot>
				</div>
			</div>
		`;
  }
  /** @internal */
  handleSlotChange() {
    const e = this.slotEl.assignedElements({ flatten: !0 });
    this.slotChildren = e;
  }
  /** Gets the current slide.
   * @returns HTMLElement
   */
  getCurrentSlide() {
    return this.slotChildren[this._currentSlide - 1];
  }
  /** Scrolls to the slide before the current slide. */
  scrollToPrevSlide() {
    this.slotChildren.length !== 0 && (this._currentSlide = (this._currentSlide - 1 + this.slotChildren.length) % this.slotChildren.length, this._scrollToCurrent());
  }
  /** Scrolls to the slide after the current slide. */
  scrollToNextSlide() {
    this.slotChildren.length !== 0 && (this._currentSlide = (this._currentSlide + 1) % this.slotChildren.length, this._scrollToCurrent());
  }
  _scrollToCurrent() {
    this.slotChildren[this._currentSlide]?.scrollIntoView({
      behavior: "smooth",
      block: "nearest"
    });
  }
};
s.styles = [a];
h([
  d("slot")
], s.prototype, "slotEl", 2);
s = h([
  C("carousel-scroller")
], s);
export {
  s as CarouselScroller
};