import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { p as parts } from './parts.js';
import { g as globalExportedParts } from './utils.js';
import { K as KlevuInit } from './klevu-init2.js';
import { d as defineCustomElement$g } from './klevu-accordion2.js';
import { d as defineCustomElement$f } from './klevu-button2.js';
import { d as defineCustomElement$e } from './klevu-checkbox2.js';
import { d as defineCustomElement$d } from './klevu-drawer2.js';
import { d as defineCustomElement$c } from './klevu-dropdown2.js';
import { d as defineCustomElement$b } from './klevu-facet2.js';
import { d as defineCustomElement$a } from './klevu-facet-list2.js';
import { d as defineCustomElement$9 } from './klevu-layout-results2.js';
import { d as defineCustomElement$8 } from './klevu-pagination2.js';
import { d as defineCustomElement$7 } from './klevu-product2.js';
import { d as defineCustomElement$6 } from './klevu-product-grid2.js';
import { d as defineCustomElement$5 } from './klevu-slider2.js';
import { d as defineCustomElement$4 } from './klevu-sort2.js';
import { d as defineCustomElement$3 } from './klevu-typography2.js';
import { d as defineCustomElement$2 } from './klevu-util-viewport2.js';
import { F as FilterManager } from './filterManager.js';
import { K as KlevuFetch, a as applyFilterWithManager } from './applyFilterWithManager.js';
import { c as categoryMerchandising, s as sendMerchandisingViewEvent } from './categoryMerchandising.js';
import { l as listFilters } from './listFilters.js';

const klevuMerchandisingCss = ".header{display:flex;justify-content:space-between;width:100%}.footer{display:flex;justify-content:center}.footer .klevu-pagination{padding:var(--klevu-spacing-03) 0}";

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 _KlevuMerchandising_instances, _KlevuMerchandising_viewportUtil, _KlevuMerchandising_layoutElement, _KlevuMerchandising_resultObject, _KlevuMerchandising_clickEvent, _KlevuMerchandising_initialFetch, _KlevuMerchandising_loadMore, _KlevuMerchandising_paginationChange, _KlevuMerchandising_sortChanged, _KlevuMerchandising_sizeChange, _KlevuMerchandising_applyFilters, _KlevuMerchandising_internalRenderProductSlot;
const KlevuMerchandising$1 = /*@__PURE__*/ proxyCustomElement(class KlevuMerchandising extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    _KlevuMerchandising_instances.add(this);
    _KlevuMerchandising_viewportUtil.set(this, void 0);
    _KlevuMerchandising_layoutElement.set(this, void 0);
    _KlevuMerchandising_resultObject.set(this, void 0);
    _KlevuMerchandising_clickEvent.set(this, void 0);
    this.usePagination = undefined;
    this.limit = 24;
    this.category = undefined;
    this.categoryTitle = undefined;
    this.sort = undefined;
    this.filterCount = undefined;
    this.options = undefined;
    this.filterCustomOrder = undefined;
    this.sortOptions = undefined;
    this.currentViewPortSize = undefined;
    this.results = [
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
    ];
    this.manager = new FilterManager();
    this.renderProductSlot = undefined;
  }
  async connectedCallback() {
    await KlevuInit.ready();
    await __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_initialFetch).call(this);
  }
  async watchPropHandler(newValue, oldValue) {
    if (newValue !== oldValue) {
      this.manager.clear();
      await __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_initialFetch).call(this);
    }
  }
  productClickHandler(event) {
    var _a;
    if (!event.detail.product.id || !event.detail.product.itemGroupId) {
      return;
    }
    if (__classPrivateFieldGet(this, _KlevuMerchandising_clickEvent, "f")) {
      __classPrivateFieldGet(this, _KlevuMerchandising_clickEvent, "f").call(this, (_a = event.detail.product) === null || _a === void 0 ? void 0 : _a.id, this.categoryTitle, event.detail.product.itemGroupId);
    }
  }
  async componentDidLoad() {
    this.currentViewPortSize = await __classPrivateFieldGet(this, _KlevuMerchandising_viewportUtil, "f").getCurrentSize();
  }
  render() {
    var _a, _b, _c;
    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, _KlevuMerchandising_instances, "m", _KlevuMerchandising_sizeChange).bind(this), ref: (el) => (__classPrivateFieldSet(this, _KlevuMerchandising_viewportUtil, el, "f")) }), h("klevu-layout-results", { exportparts: globalExportedParts, ref: (el) => (__classPrivateFieldSet(this, _KlevuMerchandising_layoutElement, el, "f")) }, h("klevu-facet-list", { slot: "sidebar", accordion: true, customOrder: this.filterCustomOrder, exportparts: globalExportedParts, manager: this.manager, useApplyButton: isMobile, onKlevuApplyFilters: __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_applyFilters).bind(this) }), h("div", { slot: "header", class: "header" }, h("klevu-typography", { variant: "h1" }, this.categoryTitle), h("klevu-sort", { variant: "inline", exportparts: globalExportedParts, onKlevuSortChanged: __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_sortChanged).bind(this), options: this.sortOptions })), h("klevu-product-grid", { slot: "content" }, this.results.map((p) => (h("klevu-product", { product: p, fixedWidth: true, exportparts: parts["klevu-product"] }, __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_internalRenderProductSlot).call(this, p, "top"), __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_internalRenderProductSlot).call(this, p, "image"), __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_internalRenderProductSlot).call(this, p, "info"), __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_internalRenderProductSlot).call(this, p, "bottom"))))), h("div", { slot: "footer", class: "footer" }, this.usePagination && __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f") ? (h("klevu-pagination", { exportparts: globalExportedParts, queryResult: __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f"), onKlevuPaginationChange: __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_paginationChange).bind(this) })) : ((_c = __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f")) === null || _c === void 0 ? void 0 : _c.next) ? (h("klevu-button", { onClick: __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_loadMore).bind(this) }, "Load more")) : null))));
  }
  get el() { return this; }
  static get watchers() { return {
    "category": ["watchPropHandler"]
  }; }
  static get style() { return klevuMerchandisingCss; }
}, [1, "klevu-merchandising", {
    "usePagination": [4, "use-pagination"],
    "limit": [2],
    "category": [1],
    "categoryTitle": [1, "category-title"],
    "sort": [1],
    "filterCount": [2, "filter-count"],
    "options": [16],
    "filterCustomOrder": [16],
    "sortOptions": [16],
    "renderProductSlot": [16],
    "currentViewPortSize": [32],
    "results": [32],
    "manager": [32]
  }, [[0, "productClick", "productClickHandler"]]]);
_KlevuMerchandising_viewportUtil = new WeakMap(), _KlevuMerchandising_layoutElement = new WeakMap(), _KlevuMerchandising_resultObject = new WeakMap(), _KlevuMerchandising_clickEvent = new WeakMap(), _KlevuMerchandising_instances = new WeakSet(), _KlevuMerchandising_initialFetch = async function _KlevuMerchandising_initialFetch() {
  var _a, _b, _c, _d;
  const result = await KlevuFetch(categoryMerchandising(this.category, Object.assign({ limit: this.limit, sort: this.sort }, this.options), sendMerchandisingViewEvent(this.categoryTitle), listFilters({
    filterManager: this.manager,
    limit: this.filterCount,
    rangeFilterSettings: [
      {
        key: "klevu_price",
        minMax: true,
      },
    ],
  }), applyFilterWithManager(this.manager)));
  __classPrivateFieldSet(this, _KlevuMerchandising_resultObject, result.queriesById("categoryMerchandising"), "f");
  this.results = (_b = (_a = __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f")) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : [];
  __classPrivateFieldSet(this, _KlevuMerchandising_clickEvent, (_d = (_c = __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f")) === null || _c === void 0 ? void 0 : _c.getCategoryMerchandisingClickSendEvent) === null || _d === void 0 ? void 0 : _d.call(_c), "f");
}, _KlevuMerchandising_loadMore = async function _KlevuMerchandising_loadMore() {
  var _a, _b, _c, _d, _e;
  if (!((_a = __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f")) === null || _a === void 0 ? void 0 : _a.next)) {
    return;
  }
  const nextResultObject = await __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f").next();
  __classPrivateFieldSet(this, _KlevuMerchandising_resultObject, nextResultObject.queriesById("categoryMerchandising"), "f");
  this.results = [...this.results, ...((_c = (_b = __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f")) === null || _b === void 0 ? void 0 : _b.records) !== null && _c !== void 0 ? _c : [])];
  __classPrivateFieldSet(this, _KlevuMerchandising_clickEvent, (_e = (_d = __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f")) === null || _d === void 0 ? void 0 : _d.getCategoryMerchandisingClickSendEvent) === null || _e === void 0 ? void 0 : _e.call(_d), "f");
}, _KlevuMerchandising_paginationChange = async function _KlevuMerchandising_paginationChange(event) {
  var _a, _b, _c, _d, _e;
  if (!((_a = __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f")) === null || _a === void 0 ? void 0 : _a.getPage)) {
    return;
  }
  const nextResultObject = await __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f").getPage({ pageIndex: event.detail - 1 });
  __classPrivateFieldSet(this, _KlevuMerchandising_resultObject, nextResultObject.queriesById("categoryMerchandising"), "f");
  this.results = (_c = (_b = __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f")) === null || _b === void 0 ? void 0 : _b.records) !== null && _c !== void 0 ? _c : [];
  __classPrivateFieldSet(this, _KlevuMerchandising_clickEvent, (_e = (_d = __classPrivateFieldGet(this, _KlevuMerchandising_resultObject, "f")) === null || _d === void 0 ? void 0 : _d.getCategoryMerchandisingClickSendEvent) === null || _e === void 0 ? void 0 : _e.call(_d), "f");
}, _KlevuMerchandising_sortChanged = async function _KlevuMerchandising_sortChanged(event) {
  this.sort = event.detail;
  await __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_initialFetch).call(this);
}, _KlevuMerchandising_sizeChange = function _KlevuMerchandising_sizeChange(event) {
  this.currentViewPortSize = event.detail;
}, _KlevuMerchandising_applyFilters = function _KlevuMerchandising_applyFilters() {
  __classPrivateFieldGet(this, _KlevuMerchandising_instances, "m", _KlevuMerchandising_initialFetch).call(this);
  __classPrivateFieldGet(this, _KlevuMerchandising_layoutElement, "f").closeDrawer();
}, _KlevuMerchandising_internalRenderProductSlot = function _KlevuMerchandising_internalRenderProductSlot(product, slot) {
  if (!this.renderProductSlot || !product) {
    return null;
  }
  const content = this.renderProductSlot(product, slot);
  if (content === null) {
    return null;
  }
  if (typeof content === "string") {
    return h("div", { slot: slot, innerHTML: content });
  }
  return (h("div", { slot: slot, ref: (el) => {
      if (!el) {
        return;
      }
      el.innerHTML = "";
      el.appendChild(content);
    } }));
};
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-merchandising", "klevu-accordion", "klevu-button", "klevu-checkbox", "klevu-drawer", "klevu-dropdown", "klevu-facet", "klevu-facet-list", "klevu-layout-results", "klevu-pagination", "klevu-product", "klevu-product-grid", "klevu-slider", "klevu-sort", "klevu-typography", "klevu-util-viewport"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-merchandising":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuMerchandising$1);
      }
      break;
    case "klevu-accordion":
      if (!customElements.get(tagName)) {
        defineCustomElement$g();
      }
      break;
    case "klevu-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$f();
      }
      break;
    case "klevu-checkbox":
      if (!customElements.get(tagName)) {
        defineCustomElement$e();
      }
      break;
    case "klevu-drawer":
      if (!customElements.get(tagName)) {
        defineCustomElement$d();
      }
      break;
    case "klevu-dropdown":
      if (!customElements.get(tagName)) {
        defineCustomElement$c();
      }
      break;
    case "klevu-facet":
      if (!customElements.get(tagName)) {
        defineCustomElement$b();
      }
      break;
    case "klevu-facet-list":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "klevu-layout-results":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "klevu-pagination":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "klevu-product":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "klevu-product-grid":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "klevu-slider":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "klevu-sort":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "klevu-util-viewport":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const KlevuMerchandising = KlevuMerchandising$1;
const defineCustomElement = defineCustomElement$1;

export { KlevuMerchandising, defineCustomElement };

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