'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7e93c7c3.js');
const parts = require('./parts-b3976bda.js');
const utils = require('./utils-4717dffd.js');
const klevuInit = require('./klevu-init-6bdf905b.js');
const applyFilterWithManager = require('./applyFilterWithManager-99cf7595.js');
const search = require('./search-75a2e649.js');
require('./isBrowser-a8464358.js');
require('./KlevuSearchSorting-3cce1bed.js');

/**
 * Create a trending products search query. Id for this query is `trendingProducts`
 *
 * @category Query
 * @param options {@link search}
 * @returns See {@link KlevuFetchFunction}
 *
 * @example Simple example
 * ```
 * const result = await KlevuFetch(
 *  trendingProducts()
 * )
 *
 * console.log(result.getQueries("trendingProducts").records)
 * ```
 */
function trendingProducts(options, ...modifiers) {
    return search.search("*", Object.assign({ id: "trendingProducts", typeOfRecords: [applyFilterWithManager.KlevuTypeOfRecord.Product] }, options), ...modifiers);
}

const klevuQuicksearchCss = ":host{display:block;}.content{display:flex}.content aside{width:240px;flex-shrink:0;padding-right:var(--klevu-spacing-04);border-right:1px solid var(--klevu-color-border);margin-right:var(--klevu-spacing-04)}klevu-suggestions-list,klevu-popular-searches,klevu-cms-list{margin-bottom:var(--klevu-spacing-05)}klevu-product-grid.desktop{width:600px}.content section{max-width:600px;min-width:300px}.desktop{display:initial}.mobile{display:none}.resultheader{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--klevu-spacing-05)}klevu-pagination{margin-top:var(--klevu-spacing-05)}.tabrow{border-bottom:1px solid var(--klevu-color-neutral-5)}.tabrow klevu-tab{position:relative;bottom:-1px}klevu-moi{position:fixed;top:0;left:0;height:100vh;width:100vw;background-color:#fff;box-sizing:border-box;padding:var(--klevu-spacing-03);z-index:10000}.content aside klevu-button{display:none}@media (max-width: 600px){.desktop{display:none}.mobile{display:initial}klevu-product-grid.mobile{display:flex}.content{flex-direction:column;left:0;width:calc(100vw - 60px)}.content aside{width:100%;border:none}.content aside klevu-button{display:block;float:right}}";

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 _KlevuQuicksearch_instances, _KlevuQuicksearch_searchField, _KlevuQuicksearch_searchPageChange, _KlevuQuicksearch_internalRenderProductSlot, _KlevuQuicksearch_onPopupOpen, _KlevuQuicksearch_startSearch, _KlevuQuicksearch_renderResultPage, _KlevuQuicksearch_renderTrendingPage;
const KlevuQuicksearch = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    _KlevuQuicksearch_instances.add(this);
    _KlevuQuicksearch_searchField.set(this, void 0);
    this.fallbackTerm = undefined;
    this.popupAnchor = "bottom-end";
    this.searchCategories = undefined;
    this.searchCmsPages = undefined;
    this.placeholder = undefined;
    this.searchText = undefined;
    this.searchFieldVariant = "pill";
    this.resultVariant = "simple";
    this.simpleResultCount = 3;
    this.fullResultCount = 9;
    this.enableChat = undefined;
    this.renderProductSlot = undefined;
    this.products = [];
    this.trendingProducts = [
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
    ];
    this.suggestions = [];
    this.cmsPages = undefined;
    this.categories = undefined;
    this.queryResult = undefined;
    this.searchSort = undefined;
    this.lastClickedProducts = undefined;
    this.activeTab = "trending";
    this.chat = false;
  }
  async onTextChange(event) {
    if (event.detail.length === 0) {
      this.suggestions = [];
      this.products = [];
    }
  }
  async onResults(event) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
    this.clickEvent = (_b = (_a = event.detail.search) === null || _a === void 0 ? void 0 : _a.getSearchClickSendEvent) === null || _b === void 0 ? void 0 : _b.call(_a);
    if (((_c = event.detail.search) === null || _c === void 0 ? void 0 : _c.records.length) === 0) {
      this.products = (_d = event.detail.fallback) === null || _d === void 0 ? void 0 : _d.records;
    }
    else {
      this.products = (_e = event.detail.search) === null || _e === void 0 ? void 0 : _e.records;
    }
    this.cmsPages = (_f = event.detail.cms) === null || _f === void 0 ? void 0 : _f.records;
    this.categories = (_g = event.detail.category) === null || _g === void 0 ? void 0 : _g.records;
    (_h = this.popup) === null || _h === void 0 ? void 0 : _h.openModal();
    this.queryResult = await ((_j = __classPrivateFieldGet(this, _KlevuQuicksearch_searchField, "f")) === null || _j === void 0 ? void 0 : _j.getQueryResult("search"));
  }
  async onSuggestions(event) {
    this.suggestions = event.detail;
  }
  onProductClick(event) {
    var _a, _b;
    const { product } = event.detail;
    (_a = this.popup) === null || _a === void 0 ? void 0 : _a.closeModal();
    if (product.id) {
      (_b = this.clickEvent) === null || _b === void 0 ? void 0 : _b.call(this, product.id, product.itemGroupId || product.id);
    }
  }
  onChatLayoutClose() {
    this.chat = false;
  }
  async connectedCallback() {
    await klevuInit.KlevuInit.ready();
    const trendingProductsQuery = await applyFilterWithManager.KlevuFetch(trendingProducts({
      limit: this.simpleResultCount,
    }));
    const resultObject = trendingProductsQuery.queriesById("trendingProducts");
    if (resultObject) {
      this.trendingProducts = resultObject.records;
    }
  }
  render() {
    var _a, _b;
    return (index.h(index.Host, null, index.h("klevu-popup", { anchor: this.popupAnchor, ref: (el) => (this.popup = el), fullwidthContent: true, openAtFocus: true, onKlevuPopupOpen: __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_onPopupOpen).bind(this), elevation: 2 }, index.h("klevu-search-field", { ref: (el) => (__classPrivateFieldSet(this, _KlevuQuicksearch_searchField, el, "f")), limit: this.resultVariant === "simple" ? this.simpleResultCount : this.fullResultCount, sort: this.searchSort, slot: "origin", searchProducts: true, searchSuggestions: true, searchText: this.searchText, placeholder: this.placeholder, "fallback-term": this.fallbackTerm, searchCmsPages: this.searchCmsPages, searchCategories: this.searchCategories, onFocus: () => { var _a; return (_a = this.popup) === null || _a === void 0 ? void 0 : _a.openModal(); }, exportparts: utils.globalExportedParts, variant: this.searchFieldVariant }), index.h("div", { class: "content", slot: "content" }, ((_a = this.products) !== null && _a !== void 0 ? _a : []).length > 0
      ? __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_renderResultPage).call(this)
      : ((_b = this.products) === null || _b === void 0 ? void 0 : _b.length) === 0 && this.trendingProducts.length > 0
        ? __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_renderTrendingPage).call(this)
        : null)), this.chat && index.h("klevu-moi", { showClose: true, exportparts: utils.globalExportedParts })));
  }
};
_KlevuQuicksearch_searchField = new WeakMap(), _KlevuQuicksearch_instances = new WeakSet(), _KlevuQuicksearch_searchPageChange = async function _KlevuQuicksearch_searchPageChange(event) {
  var _a;
  if (!__classPrivateFieldGet(this, _KlevuQuicksearch_searchField, "f")) {
    return;
  }
  __classPrivateFieldGet(this, _KlevuQuicksearch_searchField, "f").getPage("search", event.detail - 1);
  this.queryResult = await ((_a = __classPrivateFieldGet(this, _KlevuQuicksearch_searchField, "f")) === null || _a === void 0 ? void 0 : _a.getQueryResult("search"));
}, _KlevuQuicksearch_internalRenderProductSlot = function _KlevuQuicksearch_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 index.h("div", { slot: slot, innerHTML: content });
  }
  return (index.h("div", { slot: slot, ref: (el) => {
      if (!el) {
        return;
      }
      el.innerHTML = "";
      el.appendChild(content);
    } }));
}, _KlevuQuicksearch_onPopupOpen = function _KlevuQuicksearch_onPopupOpen() {
  this.lastClickedProducts = applyFilterWithManager.KlevuLastClickedProducts.getProducts(3);
}, _KlevuQuicksearch_startSearch = function _KlevuQuicksearch_startSearch(term) {
  var _a;
  this.products = [undefined, undefined, undefined];
  (_a = __classPrivateFieldGet(this, _KlevuQuicksearch_searchField, "f")) === null || _a === void 0 ? void 0 : _a.makeSearch(term);
}, _KlevuQuicksearch_renderResultPage = function _KlevuQuicksearch_renderResultPage() {
  var _a, _b, _c;
  return (index.h(index.Fragment, null, index.h("aside", null, index.h("klevu-suggestions-list", { exportparts: utils.globalExportedParts, suggestions: this.suggestions, onKlevuSuggestionClicked: (event) => __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_startSearch).call(this, event.detail) }), this.cmsPages && this.cmsPages.length > 0 && index.h("klevu-cms-list", { pages: this.cmsPages, link: true }), this.categories && this.categories.length > 0 && (index.h("klevu-cms-list", { pages: this.categories, caption: "Categories", link: true }))), index.h("section", null, this.resultVariant === "full" && (index.h(index.Fragment, null, index.h("div", { class: "resultheader" }, index.h("klevu-typography", { variant: "h3" }, "Search results"), index.h("klevu-sort", { variant: "inline", exportparts: utils.globalExportedParts, onKlevuSortChanged: (event) => (this.searchSort = event.detail) })), index.h("klevu-product-grid", { class: "desktop", itemsPerRow: 3 }, (_a = this.products) === null || _a === void 0 ? void 0 : _a.map((p) => (index.h("klevu-product", { product: p, fixedWidth: true, variant: "small", exportparts: parts.parts["klevu-product"] }, __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "top"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "image"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "info"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "bottom"))))), index.h("klevu-product-grid", { class: "mobile" }, (_b = this.products) === null || _b === void 0 ? void 0 : _b.map((p) => (index.h("klevu-product", { product: p, fixedWidth: true, variant: "line", exportparts: parts.parts["klevu-product"] }, __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "top"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "image"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "info"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "bottom"))))), index.h("klevu-pagination", { exportparts: utils.globalExportedParts, queryResult: this.queryResult, onKlevuPaginationChange: __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_searchPageChange).bind(this) }))), this.resultVariant === "simple" && (index.h(index.Fragment, null, index.h("div", { class: "resultheader" }, index.h("klevu-typography", { variant: "h3" }, "Search results")), index.h("div", { class: "lineproducts" }, (_c = this.products) === null || _c === void 0 ? void 0 : _c.map((p) => (index.h("klevu-product", { product: p, variant: "line", exportparts: parts.parts["klevu-product"] }, __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "top"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "image"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "info"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "bottom"))))))))));
}, _KlevuQuicksearch_renderTrendingPage = function _KlevuQuicksearch_renderTrendingPage() {
  var _a, _b, _c, _d, _e;
  return (index.h(index.Fragment, null, index.h("aside", null, this.enableChat && (index.h("klevu-button", { size: "small", onClick: () => (this.chat = true) }, "Start chat")), index.h("klevu-popular-searches", { onKlevuPopularSearchClicked: (event) => __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_startSearch).call(this, event.detail) }), index.h("klevu-latest-searches", { exportparts: utils.globalExportedParts, onKlevuLastSearchClicked: (event) => __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_startSearch).call(this, event.detail) })), index.h("section", null, index.h("div", { class: "tabrow" }, index.h("klevu-tab", { caption: "Trending", active: this.activeTab === "trending", onClick: () => (this.activeTab = "trending") }), index.h("klevu-tab", { caption: `Recently viewed (${(_b = (_a = this.lastClickedProducts) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0})`, active: this.activeTab === "last", onClick: () => {
      var _a;
      if (((_a = this.lastClickedProducts) === null || _a === void 0 ? void 0 : _a.length) === 0) {
        return;
      }
      this.activeTab = "last";
    }, disabled: ((_c = this.lastClickedProducts) === null || _c === void 0 ? void 0 : _c.length) === 0 })), this.activeTab === "trending" && (index.h(index.Fragment, null, (_d = this.trendingProducts) === null || _d === void 0 ? void 0 : _d.map((p) => (index.h("klevu-product", { product: p, variant: "line", exportparts: parts.parts["klevu-product"] }, __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "top"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "image"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "info"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "bottom")))))), this.activeTab === "last" && (index.h(index.Fragment, null, (_e = this.lastClickedProducts) === null || _e === void 0 ? void 0 : _e.map((p) => (index.h("klevu-product", { product: p, variant: "line", exportparts: parts.parts["klevu-product"] }, __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "top"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "image"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "info"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "bottom")))))))));
};
KlevuQuicksearch.style = klevuQuicksearchCss;

exports.klevu_quicksearch = KlevuQuicksearch;

//# sourceMappingURL=klevu-quicksearch.cjs.entry.js.map