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 _KlevuLayoutResults_instances, _KlevuLayoutResults_sizeChange;
import { Host, h } from "@stencil/core";
/**
 * Generic layout used in merchansiding and search landing page
 *
 * @slot sidebar - Sidebar
 * @slot header - Header area above the content
 * @slot content - Main content
 * @slot footer - Footer are below the content
 */
export class KlevuLayoutResults {
  constructor() {
    _KlevuLayoutResults_instances.add(this);
    this.currentViewPortSize = undefined;
  }
  async componentDidLoad() {
    this.currentViewPortSize = await this.viewportUtil.getCurrentSize();
  }
  /**
   * Can be used to close the drawer programmatically
   */
  async closeDrawer() {
    var _a;
    (_a = this.drawerElement) === null || _a === void 0 ? void 0 : _a.closeModal();
  }
  render() {
    var _a, _b;
    const isMobile = ((_a = this.currentViewPortSize) === null || _a === void 0 ? void 0 : _a.name) === "xs" || ((_b = this.currentViewPortSize) === null || _b === void 0 ? void 0 : _b.name) === "sm";
    return (h(Host, null, h("klevu-util-viewport", { onSizeChanged: __classPrivateFieldGet(this, _KlevuLayoutResults_instances, "m", _KlevuLayoutResults_sizeChange).bind(this), ref: (el) => (this.viewportUtil = el) }), h("header", { class: "header" }, h("slot", { name: "header" }), isMobile ? (h("klevu-button", { onClick: async (event) => {
        var _a;
        await ((_a = this.drawerElement) === null || _a === void 0 ? void 0 : _a.openModal());
        event.stopPropagation();
        return false;
      } }, h("klevu-icon", { name: "menu" }))) : null), h("div", { class: "container" }, isMobile ? (h("klevu-drawer", { ref: (el) => (this.drawerElement = el), insertYPadding: true, background: true }, h("slot", { slot: "content", name: "sidebar" }))) : (h("aside", { class: "sidebar" }, h("slot", { name: "sidebar" }))), h("main", null, h("section", { class: "content" }, h("slot", { name: "content" })), h("footer", { class: "footer" }, h("slot", { name: "footer" }))))));
  }
  static get is() { return "klevu-layout-results"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-layout-results.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-layout-results.css"]
    };
  }
  static get states() {
    return {
      "currentViewPortSize": {}
    };
  }
  static get methods() {
    return {
      "closeDrawer": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Can be used to close the drawer programmatically",
          "tags": []
        }
      }
    };
  }
}
_KlevuLayoutResults_instances = new WeakSet(), _KlevuLayoutResults_sizeChange = function _KlevuLayoutResults_sizeChange(event) {
  this.currentViewPortSize = event.detail;
};
//# sourceMappingURL=klevu-layout-results.js.map
