import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const klevuDrawerCss = ":host{display:block;--klevu-drawer-ypadding:var(--klevu-spacing-07)}.drawer{position:fixed;top:0;height:100vh;max-width:var(--klevu-drawer-max-width, max-content);z-index:1000;background:#fff;transition:left 0.4s, right 0.4s}.drawer.left{left:-100%;border-right:1px solid var(--klevu-color-border);padding-right:var(--klevu-spacing-04)}.drawer.right{right:-100%;border-left:1px solid var(--klevu-color-border);padding-left:var(--klevu-spacing-04)}.drawer.left.show{left:0}.drawer.right.show{right:0}.background{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--klevu-drawer-background-color, rgba(0, 0, 0, 0.2));z-index:999}.background.show{display:block}.innercontainer{height:100%;width:100%;overflow-y:scroll}.insertypadding{padding:0 var(--klevu-drawer-ypadding)}";

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 __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 _KlevuDrawer_instances, _KlevuDrawer_originalOverflow, _KlevuDrawer_openEvent, _KlevuDrawer_closeEvent;
const KlevuDrawer = /*@__PURE__*/ proxyCustomElement(class KlevuDrawer extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    _KlevuDrawer_instances.add(this);
    _KlevuDrawer_originalOverflow.set(this, void 0);
    this.startOpen = undefined;
    this.background = undefined;
    this.closeAtOutsideClick = true;
    this.insertYPadding = undefined;
    this.anchor = "right";
    this.open = false;
  }
  async openModal() {
    document.body.style.overflowX = "inherit";
    this.open = true;
    __classPrivateFieldSet(this, _KlevuDrawer_originalOverflow, document.body.style.overflow, "f");
    document.body.style.overflow = "hidden";
  }
  async closeModal() {
    document.body.style.overflowX = "none";
    this.open = false;
    document.body.style.overflow = __classPrivateFieldGet(this, _KlevuDrawer_originalOverflow, "f");
  }
  connectedCallback() {
    var _a;
    if (this.startOpen) {
      this.openModal();
    }
    (_a = this.el) === null || _a === void 0 ? void 0 : _a.addEventListener("click", __classPrivateFieldGet(this, _KlevuDrawer_instances, "m", _KlevuDrawer_openEvent).bind(this));
    if (this.closeAtOutsideClick) {
      document.addEventListener("click", __classPrivateFieldGet(this, _KlevuDrawer_instances, "m", _KlevuDrawer_closeEvent).bind(this));
    }
  }
  detachedCallback() {
    var _a;
    document.removeEventListener("click", __classPrivateFieldGet(this, _KlevuDrawer_instances, "m", _KlevuDrawer_closeEvent));
    (_a = this.el) === null || _a === void 0 ? void 0 : _a.removeEventListener("click", __classPrivateFieldGet(this, _KlevuDrawer_instances, "m", _KlevuDrawer_openEvent));
  }
  render() {
    return (h(Host, null, h("slot", { name: "origin" }), h("div", { class: {
        drawer: true,
        show: this.open,
        left: this.anchor === "left",
        right: this.anchor === "right",
      } }, h("div", { class: { innercontainer: true, insertypadding: Boolean(this.insertYPadding) } }, h("slot", { name: "content" }))), this.background ? (h("div", { onClick: this.closeModal.bind(this), class: { background: true, show: this.open } })) : null));
  }
  get el() { return this; }
  static get style() { return klevuDrawerCss; }
}, [1, "klevu-drawer", {
    "startOpen": [4, "start-open"],
    "background": [4],
    "closeAtOutsideClick": [4, "close-at-outside-click"],
    "insertYPadding": [4, "insert-y-padding"],
    "anchor": [1],
    "open": [32],
    "openModal": [64],
    "closeModal": [64]
  }]);
_KlevuDrawer_originalOverflow = new WeakMap(), _KlevuDrawer_instances = new WeakSet(), _KlevuDrawer_openEvent = function _KlevuDrawer_openEvent(event) {
  if (event.composedPath().some((el) => el.name === "origin")) {
    this.openModal();
  }
}, _KlevuDrawer_closeEvent = function _KlevuDrawer_closeEvent(event) {
  if (!event.composedPath().some((el) => el === this.el)) {
    this.closeModal();
  }
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-drawer"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-drawer":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuDrawer);
      }
      break;
  } });
}
defineCustomElement();

export { KlevuDrawer as K, defineCustomElement as d };

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