'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-85d13173.js');
const getTranslation = require('./getTranslation-d40bbcba.js');
const partsExports = require('./partsExports-8da45cd3.js');
const utils = require('./utils-0ee5e6d7.js');

const klevuChatBubbleCss = ":host{position:relative;--background:var(--klevu-chat-bubble-background, var(--klevu-color-neutral-2));--background-remote:var(--klevu-chat-bubble-background-remote, var(--klevu-color-primary));--text-color:var(--klevu-chat-bubble-text-color, inherit);--text-color-remote:var(--klevu-chat-bubble-text-color-remote, var(--klevu-color-neutral-1));--border-radius:var(--klevu-chat-bubble-border-radius, var(--klevu-border-radius-m) var(--klevu-border-radius-m) 0 var(--klevu-border-radius-m));--border-radius-remote:var(--klevu-chat-bubble-border-radius-remote, var(--klevu-border-radius-m) var(--klevu-border-radius-m) var(--klevu-border-radius-m) 0)}:host(::after){content:\"\";clear:both}klevu-typography{float:right;padding:var(--klevu-spacing-04);background-color:var(--background);border-radius:var(--border-radius);color:var(--text-color);--klevu-typography-color:var(--text-color);line-height:1}:host(.remote) klevu-typography{float:left;background-color:var(--background-remote);border-radius:var(--border-radius-remote);color:var(--text-color-remote);--klevu-typography-color:var(--text-color-remote)}.positive_feedback,.negative_feedback{position:absolute;top:-12px;right:12px;height:24px;width:24px;color:white;border-radius:100%;display:flex;align-items:center;justify-content:center}.negative_feedback{background-color:var(--klevu-color-negative)}.positive_feedback{background-color:var(--klevu-color-positive)}.feedback_reasons{font-size:12px;clear:both;display:flex;gap:var(--klevu-spacing-03);flex-wrap:wrap;padding:var(--klevu-spacing-04)}";

const KlevuChatBubble = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.klevuMessageFeedbackReason = index.createEvent(this, "klevuMessageFeedbackReason", 7);
    this.remote = undefined;
    this.feedback = undefined;
    this.feedbackReasons = undefined;
    this.tRatingReason = getTranslation.getTranslation("chatBubble.tRatingReason");
  }
  render() {
    var _a, _b, _c;
    return (index.h(index.Host, { class: {
        remote: Boolean(this.remote),
      } }, index.h("div", { part: "chat-bubble-base" }, index.h("klevu-typography", { variant: "body-s" }, index.h("slot", null)), ((_a = this.feedback) === null || _a === void 0 ? void 0 : _a.thumbs) === "up" && (index.h("div", null, index.h("klevu-icon", { part: "chat-bubble-positive-feedback", class: "positive_feedback", name: "thumb_up" }))), ((_b = this.feedback) === null || _b === void 0 ? void 0 : _b.thumbs) === "down" && (index.h("klevu-icon", { part: "chat-bubble-negative-feedback", class: "negative_feedback", name: "thumb_down" })), !Boolean((_c = this.feedback) === null || _c === void 0 ? void 0 : _c.reason) && this.feedbackReasons && (index.h("div", { class: "feedback_reasons", part: "chat-bubble-feedback-reasons" }, index.h("span", null, this.tRatingReason), this.feedbackReasons.map((reason) => (index.h("klevu-button", { exportparts: partsExports.partsExports("klevu-button"), size: "tiny", isSecondary: true, onClick: () => {
        this.klevuMessageFeedbackReason.emit({ reason, feedback: this.feedback });
      } }, reason))))))));
  }
};
KlevuChatBubble.style = klevuChatBubbleCss;

const klevuChatLayoutCss = ":host{height:100%;display:flex !important;flex-direction:column;max-height:100vh;--chat-height:var( --klevu-chat-layout-height, 200px);--chat-max-height:var(--klevu-chat-layout-max-height, 100vh);--footer-border-top:var(--klevu-footer-border-top, 1px solid var(--klevu-color-neutral-3))}main{height:var(--chat-height);min-height:200px;max-height:var(--chat-max-height);flex-grow:1}footer{flex-shrink:0;margin-top:auto;padding-top:var(--klevu-spacing-04);border-top:var(--footer-border-top)}footer .inputs{display:flex;gap:var(--klevu-spacing-04)}footer klevu-textfield{width:100%}klevu-popup div[slot=\"content\"]{padding:var(--klevu-spacing-04)}";

var __classPrivateFieldGet$1 = (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$1 = (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 _KlevuChatLayout_instances, _KlevuChatLayout_scrollElement, _KlevuChatLayout_popupElement, _KlevuChatLayout_sendMessage;
const KlevuChatLayout = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.klevuChatLayoutMessageSent = index.createEvent(this, "klevuChatLayoutMessageSent", 7);
    _KlevuChatLayout_instances.add(this);
    _KlevuChatLayout_scrollElement.set(this, void 0);
    _KlevuChatLayout_popupElement.set(this, void 0);
    this.originElement = undefined;
    this.useNativeScrollbars = undefined;
    this.text = "";
    this.menuSlotCount = 0;
  }
  componentDidLoad() {
    var _a, _b, _c;
    // listen to updates to DOM in slot and scroll to bottom
    const mainSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("main slot");
    const observer = new MutationObserver(() => {
      this.scrollMainToBottom();
    });
    if (mainSlot) {
      observer.observe(mainSlot, { childList: true });
    }
    setTimeout(() => {
      this.scrollMainToBottom();
    }, 20);
    const menu = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("slot[name=menu]");
    this.menuSlotCount = (_c = menu === null || menu === void 0 ? void 0 : menu.assignedElements().length) !== null && _c !== void 0 ? _c : 0;
    menu === null || menu === void 0 ? void 0 : menu.addEventListener("slotchange", () => {
      var _a;
      this.menuSlotCount = (_a = menu === null || menu === void 0 ? void 0 : menu.assignedElements().length) !== null && _a !== void 0 ? _a : 0;
    });
  }
  /**
   * Scroll current chat to bottom of page
   */
  async scrollMainToBottom(behavior = "smooth") {
    var _a;
    const instance = await ((_a = __classPrivateFieldGet$1(this, _KlevuChatLayout_scrollElement, "f")) === null || _a === void 0 ? void 0 : _a.getInstance());
    if (instance === null || instance === void 0 ? void 0 : instance.customInstance) {
      setTimeout(() => {
        var _a;
        (_a = instance === null || instance === void 0 ? void 0 : instance.customInstance) === null || _a === void 0 ? void 0 : _a.update(true);
      }, 20);
      setTimeout(() => {
        var _a, _b;
        (_a = instance.customInstance) === null || _a === void 0 ? void 0 : _a.elements().viewport.scrollTo({
          top: (_b = instance.customInstance) === null || _b === void 0 ? void 0 : _b.elements().viewport.scrollHeight,
          behavior: behavior,
        });
      }, 20);
    }
    else if (instance === null || instance === void 0 ? void 0 : instance.nativeContainer) {
      setTimeout(() => {
        var _a;
        (_a = instance.nativeContainer) === null || _a === void 0 ? void 0 : _a.scroll({
          top: instance.nativeContainer.scrollHeight,
          behavior: behavior,
        });
      }, 20);
    }
  }
  /**
   * Close the popup menu
   */
  async closePopup() {
    var _a;
    (_a = __classPrivateFieldGet$1(this, _KlevuChatLayout_popupElement, "f")) === null || _a === void 0 ? void 0 : _a.closeModal();
  }
  render() {
    return (index.h(index.Host, null, index.h("header", null, index.h("slot", { name: "header" })), index.h("main", null, index.h("klevu-util-scrollbars", { overflowX: "hidden", overflowY: "scroll", useNative: this.useNativeScrollbars, ref: (el) => (__classPrivateFieldSet$1(this, _KlevuChatLayout_scrollElement, el, "f")) }, index.h("slot", null))), index.h("footer", null, index.h("slot", { name: "footer" }, index.h("slot", { name: "actions" }), index.h("div", { class: "inputs" }, this.menuSlotCount > 0 ? (index.h("klevu-popup", { exportparts: partsExports.partsExports("klevu-popup"), anchor: "top-start", ref: (el) => (__classPrivateFieldSet$1(this, _KlevuChatLayout_popupElement, el, "f")) }, index.h("div", { slot: "content" }, index.h("slot", { name: "menu" })), index.h("klevu-button", { exportparts: partsExports.partsExports("klevu-button"), slot: "origin", icon: "menu", isSecondary: true }))) : null, index.h("klevu-textfield", { exportparts: partsExports.partsExports("klevu-textfield"), variant: "pill", value: this.text, onKlevuTextChanged: (e) => {
        this.text = e.detail;
        e.preventDefault();
        return false;
      }, onKlevuTextEnterPressed: () => __classPrivateFieldGet$1(this, _KlevuChatLayout_instances, "m", _KlevuChatLayout_sendMessage).call(this) }), index.h("klevu-button", { originElement: this.originElement, exportparts: partsExports.partsExports("klevu-button"), icon: "send", onClick: () => __classPrivateFieldGet$1(this, _KlevuChatLayout_instances, "m", _KlevuChatLayout_sendMessage).call(this) }))))));
  }
  get el() { return index.getElement(this); }
};
_KlevuChatLayout_scrollElement = new WeakMap(), _KlevuChatLayout_popupElement = new WeakMap(), _KlevuChatLayout_instances = new WeakSet(), _KlevuChatLayout_sendMessage = function _KlevuChatLayout_sendMessage() {
  this.klevuChatLayoutMessageSent.emit(this.text);
  this.text = "";
};
KlevuChatLayout.style = klevuChatLayoutCss;

const klevuChatMessagesCss = ":host{display:flex;flex-direction:column;gap:var(--klevu-spacing-04);word-break:break-word}.message-container{display:flex;flex-direction:row;align-items:center}.feedback{display:flex}.feedback klevu-icon{font-size:22px;padding:6px;cursor:pointer;position:relative}.feedback klevu-icon:first-child{color:var(--klevu-color-positive)}.feedback klevu-icon:last-child{color:var(--klevu-color-negative)}.feedback-hide{opacity:0}.end-spacer{height:var(--klevu-spacing-04);width:100%;display:var(--end-spacer-display)}.filteractions{display:flex;flex-wrap:wrap;gap:var(--klevu-spacing-02)}.productactions{display:flex;flex-direction:column;gap:var(--klevu-spacing-02)}a{color:var(--klevu-chat-bubble-text-color-remote, var(--klevu-color-neutral-1))}klevu-product{--klevu-product-details-spacing:1px}klevu-button{--klevu-button-cursor-hover:pointer}";

const KlevuChatMessages = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.klevuChatProductClick = index.createEvent(this, "klevuChatProductClick", 7);
    this.klevuSelectFilter = index.createEvent(this, "klevuSelectFilter", 7);
    this.klevuSelectProductOption = index.createEvent(this, "klevuSelectProductOption", 7);
    this.klevuMessageFeedback = index.createEvent(this, "klevuMessageFeedback", 7);
    this.feedbackReasons = ["Irrelevant", "Incorrect", "Offensive", "Other"];
    this.messages = [];
    this.feedbacks = undefined;
    this.enableMessageFeedback = undefined;
    this.showFeedbackFor = undefined;
    this.handleTypeWriterEffectEnds = undefined;
    this.speed = 10;
    this.scrollBottom = undefined;
    this.centerNextPrev = true;
    this.lastMessageDisplayedText = "";
    this.typeWriterEnds = true;
  }
  watchPropHandler(newValue, oldValue) {
    var _a, _b, _c;
    const lastItem = newValue[newValue.length - 1] || null;
    const lastItemOld = oldValue[oldValue.length - 1] || null;
    this.lastMessageDisplayedText = "";
    this.typeWriterEnds = true;
    if (this.speed > 0 && (lastItem === null || lastItem === void 0 ? void 0 : lastItem.message) && lastItemOld && ((_a = lastItemOld === null || lastItemOld === void 0 ? void 0 : lastItemOld.message) === null || _a === void 0 ? void 0 : _a.value) !== ((_b = lastItem.message) === null || _b === void 0 ? void 0 : _b.value)) {
      this.typeWriterEnds = false;
      (_c = this.handleTypeWriterEffectEnds) === null || _c === void 0 ? void 0 : _c.call(this, true);
      this.startTyping(utils.markdown(lastItem.message.value));
    }
  }
  startTyping(text) {
    let index = 0;
    if (text.length > 500) {
      this.speed = 5;
    }
    const type = () => {
      var _a, _b;
      if (index < text.length && !this.typeWriterEnds) {
        (_a = this.scrollBottom) === null || _a === void 0 ? void 0 : _a.call(this);
        this.lastMessageDisplayedText += text.charAt(index);
        index++;
        setTimeout(type, this.speed);
      }
      else {
        this.typeWriterEnds = true;
        (_b = this.handleTypeWriterEffectEnds) === null || _b === void 0 ? void 0 : _b.call(this, false);
        this.lastMessageDisplayedText = text;
      }
    };
    type();
  }
  render() {
    return (index.h(index.Host, null, this.messages.map((message, index$1) => {
      var _a, _b;
      if ("message" in message) {
        const givenFeedback = (_a = this.feedbacks) === null || _a === void 0 ? void 0 : _a.find((f) => f.id === message.message.id);
        const isLastMessage = this.messages.length - 1 === index$1;
        const showFeedback = this.showFeedbackFor === message.message.id && !Boolean(givenFeedback === null || givenFeedback === void 0 ? void 0 : givenFeedback.reason);
        let htmlMessage = "";
        if (index$1 === this.messages.length - 1 && this.lastMessageDisplayedText) {
          htmlMessage = this.lastMessageDisplayedText;
        }
        else {
          htmlMessage = utils.markdown(message.message.value);
        }
        return (index.h(index.Fragment, null, index.h("div", { class: "message-container" }, index.h("klevu-chat-bubble", { exportparts: partsExports.partsExports("klevu-chat-bubble"), feedback: message.message.collectFeedback ? givenFeedback : undefined, feedbackReasons: showFeedback ? this.feedbackReasons : undefined, remote: true, innerHTML: htmlMessage }), this.enableMessageFeedback && message.message.collectFeedback && !givenFeedback && isLastMessage && (index.h("div", { class: `feedback ${!this.typeWriterEnds ? "feedback-hide" : ""}` }, index.h("klevu-icon", { name: "thumb_up", onClick: () => this.klevuMessageFeedback.emit({ feedback: "up", message: message.message }) }), index.h("klevu-icon", { name: "thumb_down", onClick: () => this.klevuMessageFeedback.emit({ feedback: "down", message: message.message }) })))), message.message.note && (index.h("klevu-typography", { style: {
            "--klevu-typography-color": "var(--klevu-color-neutral-6)",
          }, variant: "body-xs" }, message.message.note))));
      }
      if ("filter" in message) {
        return (index.h(index.Fragment, null, message.filter.settings.label && (index.h("klevu-chat-bubble", { remote: true }, message.filter.settings.label)), index.h("div", { class: "filteractions" }, message.filter.options.map((o) => (index.h("klevu-button", { isSecondary: true, exportparts: partsExports.partsExports("klevu-button"), disabled: this.messages.length - 1 !== index$1, onClick: () => {
            if (this.messages.length - 1 === index$1) {
              this.klevuSelectFilter.emit({
                message: message,
                filter: o,
              });
            }
          } }, o.name)))), message.filter.note && (index.h("klevu-typography", { style: {
            "--klevu-typography-color": "var(--klevu-color-neutral-6)",
          }, variant: "body-xs" }, message.filter.note))));
      }
      if ("productData" in message) {
        return (index.h("div", null, index.h("klevu-slides", { centerNextPrev: this.centerNextPrev, exportparts: partsExports.partsExports("klevu-slides"), style: {
            "--klevu-slides-item-width": "188px",
            "--klevu-product-grid-spacing": "var(--klevu-spacing-04)",
          } }, message.productData.products.map((product) => (index.h("klevu-product", { product: product, hideSwatches: true, hideDescription: true, hidePrice: true, showAddToCart: false, showRatings: false, onKlevuProductClick: (event) => {
            event.preventDefault();
            event.stopPropagation();
            this.klevuChatProductClick.emit({
              product,
            });
            return false;
          }, style: {
            "text-align": "center",
          }, exportparts: partsExports.partsExports("klevu-product") }, index.h("div", { slot: "bottom", class: "productactions" }, product.options.map((option) => (index.h("klevu-button", { exportparts: partsExports.partsExports("klevu-button"), fullWidth: true, isSecondary: true, onClick: () => {
            this.klevuSelectProductOption.emit({
              product,
              option,
            });
          } }, option.name)))))))), message.productData.note && (index.h("klevu-typography", { style: {
            "--klevu-typography-color": "var(--klevu-color-neutral-6)",
          }, variant: "body-xs" }, message.productData.note))));
      }
      if ("local" in message) {
        return index.h("klevu-chat-bubble", null, (_b = message.local) === null || _b === void 0 ? void 0 : _b.message);
      }
    }), index.h("slot", { name: "chat-messages-after" }), index.h("div", { class: "end-spacer" }, "\u00A0")));
  }
  static get watchers() { return {
    "messages": ["watchPropHandler"]
  }; }
};
KlevuChatMessages.style = klevuChatMessagesCss;

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)}.gridButtons{display:block;position:relative;width:100%}.gridButtons klevu-util-scrollbars{width:100%;overflow:hidden}.gridButtons .left klevu-button,.gridButtons .right klevu-button{position:absolute;top:55px;background-color:#fff;height:100px;display:flex;align-items:center;justify-content:center;width:45px;text-align:center;box-shadow:0 1px 3px #888;z-index:1000}.gridButtons .right klevu-button{right:0px}.gridButtons .left{float:left}.gridButtons .right{float:right}.gridButtons{--klevu-button-background-color:var(--klevu-product-query-submit-button-background-color, #ffffff);--klevu-button-background-hover:var(--klevu-product-query-submit-button-background-hover, #ffffff);--klevu-button-icon-color:var(--klevu-product-query-icon-color, #5f636866)}.gridButtons klevu-button.hidden{display:none}@media (max-width: 600px){.gridButtons klevu-button{display:none}}";

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_previousButton, _KlevuSlides_nextButton, _KlevuSlides_validateNavigation, _KlevuSlides_prev, _KlevuSlides_next, _KlevuSlides_attachEventListener, _KlevuSlides_calcAmountToSlide;
const KlevuSlides = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    _KlevuSlides_instances.add(this);
    _KlevuSlides_gap.set(this, 0);
    _KlevuSlides_slotElement.set(this, void 0);
    _KlevuSlides_scrollElement.set(this, void 0);
    _KlevuSlides_previousButton.set(this, void 0);
    _KlevuSlides_nextButton.set(this, void 0);
    _KlevuSlides_validateNavigation.set(this, async () => {
      var _a, _b, _c, _d, _e;
      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();
        const amountToSlide = await __classPrivateFieldGet(this, _KlevuSlides_instances, "m", _KlevuSlides_calcAmountToSlide).call(this);
        const hideNext = elements.viewport.scrollLeft + elements.viewport.clientWidth + amountToSlide >=
          elements.viewport.scrollWidth + amountToSlide;
        if (hideNext) {
          (_b = __classPrivateFieldGet(this, _KlevuSlides_nextButton, "f")) === null || _b === void 0 ? void 0 : _b.classList.add("hidden");
        }
        else {
          (_c = __classPrivateFieldGet(this, _KlevuSlides_nextButton, "f")) === null || _c === void 0 ? void 0 : _c.classList.remove("hidden");
        }
        if (elements.viewport.scrollLeft === 0) {
          (_d = __classPrivateFieldGet(this, _KlevuSlides_previousButton, "f")) === null || _d === void 0 ? void 0 : _d.classList.add("hidden");
        }
        else {
          (_e = __classPrivateFieldGet(this, _KlevuSlides_previousButton, "f")) === null || _e === void 0 ? void 0 : _e.classList.remove("hidden");
        }
      }
    });
    _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",
        });
      }
    });
    _KlevuSlides_attachEventListener.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.addEventListener("scrollend", __classPrivateFieldGet(this, _KlevuSlides_validateNavigation, "f"));
      }
      else if (instance === null || instance === void 0 ? void 0 : instance.nativeContainer) {
        instance.nativeContainer.addEventListener("scrollend", __classPrivateFieldGet(this, _KlevuSlides_validateNavigation, "f"));
      }
    });
    this.heading = undefined;
    this.slideFullWidth = undefined;
    this.hideNextPrev = undefined;
    this.centerNextPrev = 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");
    }
  }
  componentDidLoad() {
    __classPrivateFieldGet(this, _KlevuSlides_validateNavigation, "f").call(this);
    __classPrivateFieldGet(this, _KlevuSlides_attachEventListener, "f").call(this);
  }
  render() {
    return (index.h(index.Host, null, this.centerNextPrev ? (index.h("div", { part: "slides-base" }, this.heading === undefined || !this.hideNextPrev ? (index.h("header", null, index.h("klevu-typography", { variant: "h2", part: "slides-heading" }, this.heading))) : null, index.h("div", { class: "gridButtons" }, this.hideNextPrev ? null : (index.h("div", { class: "left" }, index.h("klevu-button", { exportparts: partsExports.partsExports("klevu-button"), part: "slides-previous-button", class: "prev", icon: "chevron_left", onClick: __classPrivateFieldGet(this, _KlevuSlides_prev, "f").bind(this), ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_previousButton, el, "f")) }))), index.h("klevu-util-scrollbars", { overflowY: "scroll", ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_scrollElement, el, "f")) }, index.h("div", { class: { slides: true } }, index.h("slot", { ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_slotElement, el, "f")) }))), this.hideNextPrev ? null : (index.h("div", { class: "right" }, index.h("klevu-button", { exportparts: partsExports.partsExports("klevu-button"), part: "slides-next-button", class: "next", icon: "chevron_right", onClick: __classPrivateFieldGet(this, _KlevuSlides_next, "f").bind(this), ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_nextButton, el, "f")) })))))) : (index.h("div", { part: "slides-base" }, this.heading === undefined || !this.hideNextPrev ? (index.h("header", null, index.h("klevu-typography", { variant: "h2", part: "slides-heading" }, this.heading), this.hideNextPrev ? null : (index.h("div", null, index.h("klevu-button", { exportparts: partsExports.partsExports("klevu-button"), part: "slides-previous-button", class: "prev", icon: "chevron_left", onClick: __classPrivateFieldGet(this, _KlevuSlides_prev, "f").bind(this), ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_previousButton, el, "f")) }), index.h("klevu-button", { exportparts: partsExports.partsExports("klevu-button"), part: "slides-next-button", class: "next", icon: "chevron_right", onClick: __classPrivateFieldGet(this, _KlevuSlides_next, "f").bind(this), ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_nextButton, el, "f")) }))))) : null, index.h("klevu-util-scrollbars", { overflowY: "scroll", ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_scrollElement, el, "f")) }, index.h("div", { class: { slides: true } }, index.h("slot", { ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_slotElement, el, "f")) })))))));
  }
};
_KlevuSlides_gap = new WeakMap(), _KlevuSlides_slotElement = new WeakMap(), _KlevuSlides_scrollElement = new WeakMap(), _KlevuSlides_previousButton = new WeakMap(), _KlevuSlides_nextButton = new WeakMap(), _KlevuSlides_validateNavigation = new WeakMap(), _KlevuSlides_prev = new WeakMap(), _KlevuSlides_next = new WeakMap(), _KlevuSlides_attachEventListener = 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;
};
KlevuSlides.style = klevuSlidesCss;

exports.klevu_chat_bubble = KlevuChatBubble;
exports.klevu_chat_layout = KlevuChatLayout;
exports.klevu_chat_messages = KlevuChatMessages;
exports.klevu_slides = KlevuSlides;

//# sourceMappingURL=klevu-chat-bubble_4.cjs.entry.js.map