import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { g as globalExportedParts } from './utils.js';
import { d as defineCustomElement$3 } from './klevu-button2.js';
import { d as defineCustomElement$2 } from './klevu-typography2.js';
import { d as defineCustomElement$1 } from './klevu-util-scrollbars2.js';

const klevuSlidesCss = ":host{display:block;--item-width:var(--klevu-slides-item-width, inherit)}.slides{display:flex;gap:var(--klevu-spacing-05);flex-shrink:0}.slides slot::slotted(*){flex-shrink:0;width:var(--item-width)}header{display:flex;justify-content:space-between;align-items:center}header div klevu-button{margin-left:var(--klevu-spacing-04)}";

var __classPrivateFieldGet = (undefined && undefined.__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 = (undefined && undefined.__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;
const KlevuSlides = /*@__PURE__*/ proxyCustomElement(class KlevuSlides extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    _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) {
        instance.elements().viewport.scrollTo({
          left: instance.elements().viewport.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) {
        instance.elements().viewport.scrollTo({
          left: instance.elements().viewport.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, this.heading === undefined || !this.hideNextPrev ? (h("header", null, h("klevu-typography", { variant: "h2" }, this.heading), this.hideNextPrev ? null : (h("div", null, h("klevu-button", { exportparts: globalExportedParts, class: "prev", icon: "chevron_left", onClick: __classPrivateFieldGet(this, _KlevuSlides_prev, "f").bind(this), isSecondary: true }), h("klevu-button", { exportparts: globalExportedParts, class: "next", icon: "chevron_right", onClick: __classPrivateFieldGet(this, _KlevuSlides_next, "f").bind(this), isSecondary: true }))))) : 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 style() { return klevuSlidesCss; }
}, [1, "klevu-slides", {
    "heading": [1],
    "slideFullWidth": [4, "slide-full-width"],
    "hideNextPrev": [4, "hide-next-prev"]
  }]);
_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;
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-slides", "klevu-button", "klevu-typography", "klevu-util-scrollbars"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-slides":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuSlides);
      }
      break;
    case "klevu-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "klevu-util-scrollbars":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuSlides as K, defineCustomElement as d };

//# sourceMappingURL=klevu-slides2.js.map