var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a getter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
  if (kind === "m")
    throw new TypeError("Private method is not writable");
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a setter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _KlevuSlides_instances, _KlevuSlides_gap, _KlevuSlides_slotElement, _KlevuSlides_scrollElement, _KlevuSlides_prev, _KlevuSlides_next, _KlevuSlides_calcAmountToSlide;
import { h, Host } from "@stencil/core";
import { partsExports } from "../../utils/partsExports";
/**
 * Horizontal slides component. Can be used to display a list of items horizontally. Has optional title and next/prev buttons.
 * @csspart slides-base The container for the slides component
 * @csspart slides-heading The heading of the slides
 * @csspart slides-previous-button The previous button
 * @csspart slides-next-button The next button
 */
export class KlevuSlides {
  constructor() {
    _KlevuSlides_instances.add(this);
    _KlevuSlides_gap.set(this, 0);
    _KlevuSlides_slotElement.set(this, void 0);
    _KlevuSlides_scrollElement.set(this, void 0);
    _KlevuSlides_prev.set(this, async () => {
      var _a;
      const instance = await ((_a = __classPrivateFieldGet(this, _KlevuSlides_scrollElement, "f")) === null || _a === void 0 ? void 0 : _a.getInstance());
      if (instance === null || instance === void 0 ? void 0 : instance.customInstance) {
        const elements = instance.customInstance.elements();
        elements.viewport.scrollTo({
          left: elements.viewport.scrollLeft - (await __classPrivateFieldGet(this, _KlevuSlides_instances, "m", _KlevuSlides_calcAmountToSlide).call(this)),
          behavior: "smooth",
        });
      }
      else if (instance === null || instance === void 0 ? void 0 : instance.nativeContainer) {
        instance.nativeContainer.scroll({
          left: instance.nativeContainer.scrollLeft - (await __classPrivateFieldGet(this, _KlevuSlides_instances, "m", _KlevuSlides_calcAmountToSlide).call(this)),
          behavior: "smooth",
        });
      }
    });
    _KlevuSlides_next.set(this, async () => {
      var _a;
      const instance = await ((_a = __classPrivateFieldGet(this, _KlevuSlides_scrollElement, "f")) === null || _a === void 0 ? void 0 : _a.getInstance());
      if (instance === null || instance === void 0 ? void 0 : instance.customInstance) {
        const elements = instance.customInstance.elements();
        elements.viewport.scrollTo({
          left: elements.viewport.scrollLeft + (await __classPrivateFieldGet(this, _KlevuSlides_instances, "m", _KlevuSlides_calcAmountToSlide).call(this)),
          behavior: "smooth",
        });
      }
      else if (instance === null || instance === void 0 ? void 0 : instance.nativeContainer) {
        instance.nativeContainer.scroll({
          left: instance.nativeContainer.scrollLeft + (await __classPrivateFieldGet(this, _KlevuSlides_instances, "m", _KlevuSlides_calcAmountToSlide).call(this)),
          behavior: "smooth",
        });
      }
    });
    this.heading = undefined;
    this.slideFullWidth = undefined;
    this.hideNextPrev = undefined;
  }
  connectedCallback() {
    __classPrivateFieldSet(this, _KlevuSlides_gap, parseInt(getComputedStyle(document.documentElement).getPropertyValue("--klevu-spacing-05")), "f");
    if (isNaN(__classPrivateFieldGet(this, _KlevuSlides_gap, "f"))) {
      __classPrivateFieldSet(this, _KlevuSlides_gap, 0, "f");
    }
  }
  render() {
    return (h(Host, null, h("div", { part: "slides-base" }, this.heading === undefined || !this.hideNextPrev ? (h("header", null, h("klevu-typography", { variant: "h2", part: "slides-heading" }, this.heading), this.hideNextPrev ? null : (h("div", null, h("klevu-button", { exportparts: partsExports("klevu-button"), part: "slides-previous-button", class: "prev", icon: "chevron_left", onClick: __classPrivateFieldGet(this, _KlevuSlides_prev, "f").bind(this) }), h("klevu-button", { exportparts: partsExports("klevu-button"), part: "slides-next-button", class: "next", icon: "chevron_right", onClick: __classPrivateFieldGet(this, _KlevuSlides_next, "f").bind(this) }))))) : null, h("klevu-util-scrollbars", { overflowY: "scroll", ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_scrollElement, el, "f")) }, h("div", { class: { slides: true } }, h("slot", { ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_slotElement, el, "f")) }))))));
  }
  static get is() { return "klevu-slides"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-slides.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-slides.css"]
    };
  }
  static get properties() {
    return {
      "heading": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Heading for the slides component"
        },
        "attribute": "heading",
        "reflect": false
      },
      "slideFullWidth": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "When clicking next/prev buttons should scroll full width of container"
        },
        "attribute": "slide-full-width",
        "reflect": false
      },
      "hideNextPrev": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Hides next and previous buttons"
        },
        "attribute": "hide-next-prev",
        "reflect": false
      }
    };
  }
}
_KlevuSlides_gap = new WeakMap(), _KlevuSlides_slotElement = new WeakMap(), _KlevuSlides_scrollElement = new WeakMap(), _KlevuSlides_prev = new WeakMap(), _KlevuSlides_next = new WeakMap(), _KlevuSlides_instances = new WeakSet(), _KlevuSlides_calcAmountToSlide = async function _KlevuSlides_calcAmountToSlide() {
  var _a, _b, _c, _d;
  let w;
  if (this.slideFullWidth) {
    const cont = await ((_a = __classPrivateFieldGet(this, _KlevuSlides_scrollElement, "f")) === null || _a === void 0 ? void 0 : _a.getContainer());
    if (cont) {
      w = cont.clientWidth;
    }
  }
  else {
    w = ((_d = (_c = (_b = __classPrivateFieldGet(this, _KlevuSlides_slotElement, "f")) === null || _b === void 0 ? void 0 : _b.assignedElements().at(0)) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 200) + __classPrivateFieldGet(this, _KlevuSlides_gap, "f");
  }
  return w !== null && w !== void 0 ? w : 200;
};
//# sourceMappingURL=klevu-slides.js.map
