import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-439360eb.js';

const klevuChatLayoutCss = ":host{height:100%;display:flex;flex-direction:column;max-height:100vh}main{height:200px;flex-grow:1}footer{flex-shrink:0;margin-top:auto;padding-top:var(--klevu-spacing-04);border-top:1px solid var(--klevu-color-neutral-3)}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) {
    registerInstance(this, hostRef);
    this.klevuChatLayoutMessageSent = createEvent(this, "klevuChatLayoutMessageSent", 7);
    _KlevuChatLayout_instances.add(this);
    _KlevuChatLayout_scrollElement.set(this, void 0);
    _KlevuChatLayout_popupElement.set(this, void 0);
    this.showLoading = false;
    this.elementForHeightCalculation = 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) {
      instance.update(true);
      setTimeout(() => {
        instance.elements().viewport.scrollTo({
          top: instance.elements().viewport.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 (h(Host, null, h("header", null, h("slot", { name: "header" })), h("main", null, h("klevu-util-scrollbars", { overflowX: "hidden", overflowY: "scroll", ref: (el) => (__classPrivateFieldSet$1(this, _KlevuChatLayout_scrollElement, el, "f")) }, h("slot", null))), h("footer", null, h("slot", { name: "footer" }, h("slot", { name: "actions" }), h("div", { class: "inputs" }, this.menuSlotCount > 0 ? (h("klevu-popup", { anchor: "top-start", ref: (el) => (__classPrivateFieldSet$1(this, _KlevuChatLayout_popupElement, el, "f")) }, h("div", { slot: "content" }, h("slot", { name: "menu" })), h("klevu-button", { slot: "origin", icon: "menu", isSecondary: true }))) : null, h("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) }), h("klevu-button", { icon: "send", onClick: () => __classPrivateFieldGet$1(this, _KlevuChatLayout_instances, "m", _KlevuChatLayout_sendMessage).call(this) }))))));
  }
  get el() { return 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)}.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)}.end-spacer{height:var(--klevu-spacing-04);width:100%}.filteractions{display:flex;flex-wrap:wrap;gap:var(--klevu-spacing-02)}.productactions{display:flex;flex-direction:column;gap:var(--klevu-spacing-02)}";

const KlevuChatMessages = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuChatProductClick = createEvent(this, "klevuChatProductClick", 7);
    this.klevuSelectFilter = createEvent(this, "klevuSelectFilter", 7);
    this.klevuSelectProductOption = createEvent(this, "klevuSelectProductOption", 7);
    this.klevuMessageFeedback = createEvent(this, "klevuMessageFeedback", 7);
    this.feedbackReasons = ["Irrelevant", "Incorrect", "Offensive", "Other"];
    this.messages = [];
    this.feedbacks = undefined;
    this.enableMessageFeedback = undefined;
    this.showFeedbackFor = undefined;
  }
  render() {
    return (h(Host, null, this.messages.map((message, index) => {
      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;
        const showFeedback = this.showFeedbackFor === message.message.id && !Boolean(givenFeedback === null || givenFeedback === void 0 ? void 0 : givenFeedback.reason);
        return (h(Fragment, null, h("div", { class: "message-container" }, h("klevu-chat-bubble", { feedback: message.message.collectFeedback ? givenFeedback : undefined, feedbackReasons: showFeedback ? this.feedbackReasons : undefined, remote: true }, message.message.value), this.enableMessageFeedback && message.message.collectFeedback && !givenFeedback && isLastMessage && (h("div", { class: "feedback" }, h("klevu-icon", { name: "thumb_up", onClick: () => this.klevuMessageFeedback.emit({ feedback: "up", message: message.message }) }), h("klevu-icon", { name: "thumb_down", onClick: () => this.klevuMessageFeedback.emit({ feedback: "down", message: message.message }) })))), message.message.note && (h("klevu-typography", { style: {
            "--klevu-typography-color": "var(--klevu-color-neutral-6)",
          }, variant: "body-xs" }, message.message.note))));
      }
      if ("filter" in message) {
        return (h(Fragment, null, message.filter.settings.label && (h("klevu-chat-bubble", { remote: true }, message.filter.settings.label)), h("div", { class: "filteractions" }, message.filter.options.map((o) => (h("klevu-button", { isSecondary: true, disabled: this.messages.length - 1 !== index, onClick: () => {
            if (this.messages.length - 1 === index) {
              this.klevuSelectFilter.emit({
                message: message,
                filter: o,
              });
            }
          } }, o.name)))), message.filter.note && (h("klevu-typography", { style: {
            "--klevu-typography-color": "var(--klevu-color-neutral-6)",
          }, variant: "body-xs" }, message.filter.note))));
      }
      if ("productData" in message) {
        return (h("div", null, h("klevu-slides", { style: {
            "--klevu-slides-item-width": "200px;",
          } }, message.productData.products.map((product) => (h("klevu-product", { product: product, hideSwatches: true, onKlevuProductClick: (event) => {
            event.preventDefault();
            event.stopPropagation();
            this.klevuChatProductClick.emit({
              product,
            });
            return false;
          } }, h("div", { slot: "bottom", class: "productactions" }, product.options.map((option) => (h("klevu-button", { fullWidth: true, isSecondary: true, onClick: () => {
            this.klevuSelectProductOption.emit({
              product,
              option,
            });
          } }, option.name)))))))), message.productData.note && (h("klevu-typography", { style: {
            "--klevu-typography-color": "var(--klevu-color-neutral-6)",
          }, variant: "body-xs" }, message.productData.note))));
      }
      if ("local" in message) {
        return h("klevu-chat-bubble", null, (_b = message.local) === null || _b === void 0 ? void 0 : _b.message);
      }
    }), h("slot", { name: "after-messages" }), h("div", { class: "end-spacer" }, "\u00A0")));
  }
};
KlevuChatMessages.style = klevuChatMessagesCss;

const klevuLoadingIndicatorCss = ":host{display:inline-block;--klevu-loading-indicator-color:var(--klevu-color-primary);height:16px;width:50px;position:relative}.dot-pulse{position:relative;left:-9980px;top:3px;width:10px;height:10px;border-radius:5px;background-color:var(--klevu-loading-indicator-color);color:var(--klevu-loading-indicator-color);box-shadow:9999px 0 0 -5px;animation:dot-pulse 1.5s infinite linear;animation-delay:0.25s}.dot-pulse::before,.dot-pulse::after{content:\"\";display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background-color:var(--klevu-loading-indicator-color);color:var(--klevu-loading-indicator-color)}.dot-pulse::before{box-shadow:9984px 0 0 -5px;animation:dot-pulse-before 1.5s infinite linear;animation-delay:0s}.dot-pulse::after{box-shadow:10014px 0 0 -5px;animation:dot-pulse-after 1.5s infinite linear;animation-delay:0.5s}@keyframes dot-pulse-before{0%{box-shadow:9984px 0 0 -5px}30%{box-shadow:9984px 0 0 2px}60%,100%{box-shadow:9984px 0 0 -5px}}@keyframes dot-pulse{0%{box-shadow:9999px 0 0 -5px}30%{box-shadow:9999px 0 0 2px}60%,100%{box-shadow:9999px 0 0 -5px}}@keyframes dot-pulse-after{0%{box-shadow:10014px 0 0 -5px}30%{box-shadow:10014px 0 0 2px}60%,100%{box-shadow:10014px 0 0 -5px}}";

const KlevuLoadingIndicator = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("div", { class: "dot-pulse" })));
  }
};
KlevuLoadingIndicator.style = klevuLoadingIndicatorCss;

const klevuModalCss = ":host{display:block}dialog{border:none !important;border-radius:var(--klevu-border-radius-m);padding:var(--klevu-spacing-04);box-shadow:var(--klevu-elevation-1)}main{padding:var(--klevu-spacing-04) 0}header{display:flex;justify-content:space-between;align-items:center}button{border:none;background-color:transparent;appearance:none;border-radius:100%;height:30px;width:30px}";

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 _KlevuModal_instances, _KlevuModal_dialogRef, _KlevuModal_close;
const KlevuModal = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuCloseModal = createEvent(this, "klevuCloseModal", 7);
    _KlevuModal_instances.add(this);
    _KlevuModal_dialogRef.set(this, void 0);
    this.startOpen = false;
  }
  componentDidLoad() {
    if (this.startOpen) {
      this.openModal();
    }
  }
  /**
   * Opens the modal.
   */
  async openModal() {
    var _a;
    (_a = __classPrivateFieldGet(this, _KlevuModal_dialogRef, "f")) === null || _a === void 0 ? void 0 : _a.showModal();
  }
  /**
   * Closes the modal.
   */
  async closeModal() {
    var _a;
    (_a = __classPrivateFieldGet(this, _KlevuModal_dialogRef, "f")) === null || _a === void 0 ? void 0 : _a.close();
  }
  render() {
    return (h(Host, null, h("dialog", { ref: (el) => (__classPrivateFieldSet(this, _KlevuModal_dialogRef, el, "f")), onCancel: __classPrivateFieldGet(this, _KlevuModal_instances, "m", _KlevuModal_close).bind(this) }, h("header", null, h("slot", { name: "header" }), h("form", { method: "dialog", onSubmit: __classPrivateFieldGet(this, _KlevuModal_instances, "m", _KlevuModal_close).bind(this) }, h("button", null, h("klevu-icon", { name: "close" })))), h("main", null, h("slot", null)))));
  }
};
_KlevuModal_dialogRef = new WeakMap(), _KlevuModal_instances = new WeakSet(), _KlevuModal_close = function _KlevuModal_close(e) {
  const event = this.klevuCloseModal.emit();
  if (event.defaultPrevented) {
    e.preventDefault();
  }
};
KlevuModal.style = klevuModalCss;

export { KlevuChatLayout as klevu_chat_layout, KlevuChatMessages as klevu_chat_messages, KlevuLoadingIndicator as klevu_loading_indicator, KlevuModal as klevu_modal };

//# sourceMappingURL=klevu-chat-layout_4.entry.js.map