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

const klevuChatLayoutCss = ":host{height:100%;display:flex;flex-direction:column;max-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--klevu-spacing-02) var(--klevu-spacing-02)}main{flex:1;overflow:hidden}main slot{display:flex;gap:var(--klevu-spacing-04);flex-direction:column;height:100%;padding:var(--klevu-spacing-02)}footer{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%}";

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 _KlevuChatLayout_instances, _KlevuChatLayout_scrollElement, _KlevuChatLayout_popupElement, _KlevuChatLayout_sendMessage;
const KlevuChatLayout = /*@__PURE__*/ proxyCustomElement(class KlevuChatLayout extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.klevuChatLayoutMessageSent = createEvent(this, "klevuChatLayoutMessageSent", 7);
    this.klevuChatLayoutClose = createEvent(this, "klevuChatLayoutClose", 7);
    _KlevuChatLayout_instances.add(this);
    _KlevuChatLayout_scrollElement.set(this, void 0);
    _KlevuChatLayout_popupElement.set(this, void 0);
    this.showLoading = false;
    this.showClose = false;
    this.text = "";
  }
  componentDidLoad() {
    var _a;
    // listen to updates to DOM in slot and scroll to bottom
    const main = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("slot");
    const observer = new MutationObserver(() => {
      this.scrollMainToBottom();
    });
    if (main) {
      observer.observe(main, { childList: true });
    }
    setTimeout(() => {
      this.scrollMainToBottom();
    }, 20);
  }
  /**
   * Scroll current chat to bottom of page
   */
  async scrollMainToBottom() {
    var _a;
    const instance = await ((_a = __classPrivateFieldGet(this, _KlevuChatLayout_scrollElement, "f")) === null || _a === void 0 ? void 0 : _a.getInstance());
    if (instance) {
      setTimeout(() => {
        instance.elements().viewport.scrollTo({
          top: instance.elements().viewport.scrollHeight,
          behavior: "smooth",
        });
      }, 20);
    }
  }
  /**
   * Close the popup menu
   */
  async closePopup() {
    var _a;
    (_a = __classPrivateFieldGet(this, _KlevuChatLayout_popupElement, "f")) === null || _a === void 0 ? void 0 : _a.closeModal();
  }
  render() {
    return (h(Host, null, h("header", null, h("klevu-typography", { variant: "body-m-bold" }, "MOI"), this.showClose && (h("klevu-button", { onClick: () => this.klevuChatLayoutClose.emit(), size: "small", exportparts: globalExportedParts, icon: "close", isSecondary: true }))), h("main", null, h("klevu-util-scrollbars", { overflowX: "hidden", overflowY: "scroll", ref: (el) => (__classPrivateFieldSet(this, _KlevuChatLayout_scrollElement, el, "f")) }, h("slot", null))), h("footer", null, h("slot", { name: "actions" }), h("div", { class: "inputs" }, h("klevu-popup", { anchor: "top-start", ref: (el) => (__classPrivateFieldSet(this, _KlevuChatLayout_popupElement, el, "f")) }, h("div", { slot: "content" }, h("slot", { name: "menu" })), h("klevu-button", { slot: "origin", exportparts: globalExportedParts, icon: "menu", isSecondary: true })), h("klevu-textfield", { variant: "pill", value: this.text, onKlevuTextChanged: (e) => {
        this.text = e.detail;
        e.preventDefault();
        return false;
      }, onKlevuTextEnterPressed: () => __classPrivateFieldGet(this, _KlevuChatLayout_instances, "m", _KlevuChatLayout_sendMessage).call(this) }), h("klevu-button", { exportparts: globalExportedParts, icon: "send", onClick: () => __classPrivateFieldGet(this, _KlevuChatLayout_instances, "m", _KlevuChatLayout_sendMessage).call(this) })))));
  }
  get el() { return this; }
  static get style() { return klevuChatLayoutCss; }
}, [1, "klevu-chat-layout", {
    "showLoading": [4, "show-loading"],
    "showClose": [4, "show-close"],
    "text": [32],
    "scrollMainToBottom": [64],
    "closePopup": [64]
  }]);
_KlevuChatLayout_scrollElement = new WeakMap(), _KlevuChatLayout_popupElement = new WeakMap(), _KlevuChatLayout_instances = new WeakSet(), _KlevuChatLayout_sendMessage = function _KlevuChatLayout_sendMessage() {
  this.klevuChatLayoutMessageSent.emit(this.text);
  this.text = "";
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-chat-layout", "klevu-button", "klevu-popup", "klevu-textfield", "klevu-typography", "klevu-util-scrollbars"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-chat-layout":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuChatLayout);
      }
      break;
    case "klevu-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "klevu-popup":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "klevu-textfield":
      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 { KlevuChatLayout as K, defineCustomElement as d };

//# sourceMappingURL=klevu-chat-layout2.js.map