import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$4 } from './klevu-button2.js';
import { d as defineCustomElement$3 } from './klevu-drawer2.js';
import { d as defineCustomElement$2 } from './klevu-typography2.js';
import { d as defineCustomElement$1 } from './klevu-util-viewport2.js';

const klevuLayoutResultsCss = ":host{display:block}.container{display:flex;flex-direction:row;width:100%;gap:var(--klevu-spacing-04)}.sidebar{width:300px}main{width:100%}.header{margin:var(--klevu-spacing-04) 0;display:flex}.header slot{width:100%}.header klevu-button{margin-left:auto}.footer{margin-top:var(--klevu-spacing-04);width:100%}@media (max-width: 511px){.container{flex-direction:column;gap:0}.sidebar{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 _KlevuLayoutResults_instances, _KlevuLayoutResults_sizeChange;
const KlevuLayoutResults = /*@__PURE__*/ proxyCustomElement(class KlevuLayoutResults extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    _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("span", { part: "material-icon" }, "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 style() { return klevuLayoutResultsCss; }
}, [1, "klevu-layout-results", {
    "currentViewPortSize": [32],
    "closeDrawer": [64]
  }]);
_KlevuLayoutResults_instances = new WeakSet(), _KlevuLayoutResults_sizeChange = function _KlevuLayoutResults_sizeChange(event) {
  this.currentViewPortSize = event.detail;
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-layout-results", "klevu-button", "klevu-drawer", "klevu-typography", "klevu-util-viewport"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-layout-results":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuLayoutResults);
      }
      break;
    case "klevu-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "klevu-drawer":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "klevu-util-viewport":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuLayoutResults as K, defineCustomElement as d };

//# sourceMappingURL=klevu-layout-results2.js.map