var __classPrivateFieldSet = (this && this.__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 = (this && this.__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;
import { h, Host } from "@stencil/core";
/**
 * Component to create offscreen drawer on left or right side of the screen
 *
 * @slot origin - When origin element is clicked then content is shown
 * @slot content - Content to display in drawer
 * @cssprop --klevu-drawer-max-width max-content maxium width of drawer content
 * @cssprop --klevu-drawer-background-color rgba(0,0,0,0.2) color of backround overlay
 */
export class KlevuDrawer {
  constructor() {
    _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));
  }
  static get is() { return "klevu-drawer"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-drawer.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-drawer.css"]
    };
  }
  static get properties() {
    return {
      "startOpen": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Start side drawer open"
        },
        "attribute": "start-open",
        "reflect": false
      },
      "background": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Display dim background on top of other content"
        },
        "attribute": "background",
        "reflect": false
      },
      "closeAtOutsideClick": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Close by clicking outside of drawer"
        },
        "attribute": "close-at-outside-click",
        "reflect": false,
        "defaultValue": "true"
      },
      "insertYPadding": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Add little bit of padding to content of drawer"
        },
        "attribute": "insert-y-padding",
        "reflect": false
      },
      "anchor": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"right\" | \"left\"",
          "resolved": "\"left\" | \"right\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Anchor to right or left side of the page"
        },
        "attribute": "anchor",
        "reflect": false,
        "defaultValue": "\"right\""
      }
    };
  }
  static get states() {
    return {
      "open": {}
    };
  }
  static get methods() {
    return {
      "openModal": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      },
      "closeModal": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "el"; }
}
_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();
  }
};
//# sourceMappingURL=klevu-drawer.js.map
