import { r as registerInstance, c as createEvent, h, H as Host } from './index-e582ed08.js';
import { g as getTranslation } from './getTranslation-f7bfa845.js';
import { p as partsExports } from './partsExports-48dff18e.js';
import { j as KlevuLastSearches, g as KlevuTypeOfRecord, c as KlevuFetch, k as KlevuSearchSorting } from './klevuFetch-ab326dc0.js';
import { K as KlevuInit, m as KlevuKMCSettings } from './klevu-init-ea2d74dc.js';
import { d as debounce, s as stripTags } from './utils-e68d78f6.js';
import { g as getKMCSettings } from './getKMCSettings-cd5894f5.js';
import { s as search } from './search-58784dca.js';
import { s as suggestions } from './suggestions-e0f00250.js';
import { s as sendSearchEvent } from './sendSearchEvent-eae14fb3.js';
import { p as personalisation } from './personalisation-a27d067d.js';
import { k as klaviyo } from './klaviyo-f6575e8f.js';
import './KlevuApiRawResponse-82e24d1e.js';
import './KlevuDomEvents-062429b2.js';

var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
/**
 * If original query doesn't return enough results then fallback query is run added to results
 *
 * @category Modifier
 * @param func
 * @returns
 */
function fallback(func, options) {
    var _a;
    if (((_a = func.queries) === null || _a === void 0 ? void 0 : _a.length) !== 1) {
        throw new Error("Fallback modifier can only be applied to single query");
    }
    const fallbackQuery = func.queries[0];
    fallbackQuery.isFallbackQuery = true;
    return {
        klevuModifierId: "fallback",
        modifyAfter: (queries) => __awaiter(this, void 0, void 0, function* () {
            const copy = Array.from(queries);
            for (const query of copy) {
                if (!query.id || query.isFallbackQuery === true) {
                    continue;
                }
                fallbackQuery.id = `${query.id}-fallback`;
                if (!query.settings) {
                    query.settings = {};
                }
                query.settings.fallbackQueryId = fallbackQuery.id;
                query.settings.fallbackWhenCountLessThan =
                    options === null || options === void 0 ? void 0 : options.runWhenLessThanResults;
                copy.push(fallbackQuery);
            }
            return copy;
        }),
    };
}

const klevuCmsListCss = ":host{display:block}klevu-typography.caption{margin-bottom:var(--klevu-spacing-02)}";

const KlevuCmsList = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuCmsPageClick = createEvent(this, "klevuCmsPageClick", 7);
    this.pages = undefined;
    this.link = undefined;
    this.tCaption = getTranslation("cmsList.tCaption");
  }
  render() {
    var _a;
    return (h(Host, null, h("klevu-typography", { class: "caption", variant: "h3", part: "cms-list-caption" }, this.tCaption), (_a = this.pages) === null || _a === void 0 ? void 0 :
      _a.map((page) => {
        if (this.link) {
          return (h("klevu-list", { url: page.url, condensed: true, noXPadding: true, exportparts: partsExports("klevu-list") }, h("span", { slot: "primary" }, page.name)));
        }
        return (h("klevu-list", { onClick: () => this.klevuCmsPageClick.emit(page), exportparts: partsExports("klevu-list"), condensed: true, noXPadding: true }, h("span", { slot: "primary" }, page.name)));
      })));
  }
};
KlevuCmsList.style = klevuCmsListCss;

const klevuLatestSearchesCss = ":host{display:block}klevu-typography.caption{display:block;margin-bottom:var(--klevu-spacing-02)}klevu-list:hover{cursor:pointer;background:var(--klevu-color-neutral-2)}";

var __classPrivateFieldGet$5 = (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 _KlevuLatestSearches_instances, _KlevuLatestSearches_lastSearchClick;
const KlevuLatestSearches = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuLastSearchClicked = createEvent(this, "klevuLastSearchClicked", 7);
    _KlevuLatestSearches_instances.add(this);
    this.tCaption = getTranslation("latestSearches.tCaption");
    this.lastSearches = [];
  }
  async connectedCallback() {
    this.lastSearches = KlevuLastSearches.get().map((s) => s.term);
  }
  render() {
    if (this.lastSearches.length === 0) {
      return null;
    }
    return (h(Host, null, h("klevu-typography", { variant: "h3", class: "caption", part: "latest-searches-caption" }, this.tCaption), this.lastSearches.map((ls) => (h("klevu-list", { condensed: true, noXPadding: true, onClick: () => __classPrivateFieldGet$5(this, _KlevuLatestSearches_instances, "m", _KlevuLatestSearches_lastSearchClick).call(this, ls), exportparts: partsExports("klevu-list") }, h("span", { slot: "primary" }, ls))))));
  }
};
_KlevuLatestSearches_instances = new WeakSet(), _KlevuLatestSearches_lastSearchClick = function _KlevuLatestSearches_lastSearchClick(suggestion) {
  this.klevuLastSearchClicked.emit(suggestion);
};
KlevuLatestSearches.style = klevuLatestSearchesCss;

const klevuPaginationCss = ":host{--selected-color:var(--klevu-pagination-selected-color, var(--klevu-color-primary))}:host div{display:flex;gap:var(--klevu-spacing-03);justify-content:center;flex-wrap:wrap}span,klevu-icon{display:flex;height:32px;width:32px;color:var(--klevu-color-neutral-8);border-radius:var(--klevu-border-radius-m);justify-content:center;align-items:center;font-size:var(--klevu-body-s-size);box-sizing:border-box}span.current{font-weight:bold;cursor:inherit;border:1px solid var(--selected-color);color:var(--selected-color)}span:not(.disabled):not(.current):hover,klevu-icon:not(.disabled):not(.current):hover{color:var(--selected-color);background-color:var(--klevu-color-neutral-2);cursor:pointer}span.disabled,klevu-icon.disabled{opacity:var(--klevu-opacity-disabled);cursor:inherit}span.dots{width:auto}@media (max-width: 600px){:host{gap:var(--klevu-spacing-02)}}";

var __classPrivateFieldGet$4 = (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 _KlevuPagination_instances, _KlevuPagination_handlePageChange, _KlevuPagination_updateUrl;
const KlevuPagination = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuPaginationChange = createEvent(this, "klevuPaginationChange", 7);
    _KlevuPagination_instances.add(this);
    this.current = undefined;
    this.min = undefined;
    this.max = undefined;
    this.queryResult = undefined;
    this.shouldUpdateUrlForPage = undefined;
  }
  async watchPropHandler(newQueryResult, oldQueryResult) {
    if (newQueryResult.meta.offset !== oldQueryResult.meta.offset) {
      if (this.shouldUpdateUrlForPage && (!newQueryResult.meta.offset || newQueryResult.meta.offset === 0)) {
        const urlSearchParams = new URLSearchParams(window.location.search);
        urlSearchParams.delete("klevu_page");
        __classPrivateFieldGet$4(this, _KlevuPagination_instances, "m", _KlevuPagination_updateUrl).call(this, urlSearchParams);
      }
    }
  }
  componentDidLoad() {
    if (!this.shouldUpdateUrlForPage) {
      return;
    }
    const urlSearchParams = new URLSearchParams(window.location.search);
    const page = urlSearchParams.get("klevu_page");
    if (page && +page > 0) {
      this.klevuPaginationChange.emit(+page);
    }
  }
  render() {
    let min, max, current;
    if (this.queryResult) {
      min = 1;
      max = Math.floor(this.queryResult.meta.totalResultsFound / this.queryResult.meta.noOfResults) + 1;
      current = Math.floor(this.queryResult.meta.offset / this.queryResult.meta.noOfResults) + 1;
    }
    else {
      if ([this.current, this.max, this.min].some((i) => i === undefined)) {
        throw new Error("queryResult or current, min & max needs to be defined");
      }
      min = this.min;
      max = this.max;
      current = this.current;
    }
    let pages = [];
    for (let i = min; i <= max; i++) {
      pages.push(i);
    }
    if (pages.length > 8) {
      let startIndex = min + 1;
      let endIndex = max - 1;
      let currentStartIndex = current > 3 ? current - 1 : 0;
      let currentEndIndex = current < endIndex - 1 ? currentStartIndex + 2 : endIndex - 1;
      if (currentStartIndex < startIndex) {
        currentStartIndex = startIndex + 1;
        currentEndIndex = currentStartIndex + 2;
      }
      pages = [];
      for (let i = min; i <= startIndex; i++) {
        pages.push(i);
      }
      if (startIndex + 1 < currentStartIndex) {
        pages.push(-1);
      }
      for (let i = currentStartIndex; i <= currentEndIndex; i++) {
        pages.push(i);
      }
      if (currentEndIndex + 1 < endIndex) {
        pages.push(-1);
      }
      for (let i = endIndex; i <= max; i++) {
        pages.push(i);
      }
    }
    return (h(Host, null, h("div", { part: "pagination-base" }, h("klevu-icon", { class: {
        disabled: current === min,
      }, onClick: () => current !== min && __classPrivateFieldGet$4(this, _KlevuPagination_instances, "m", _KlevuPagination_handlePageChange).call(this, current - 1), name: "navigate_before", part: "pagination-navigation-previous" }), pages.map((i) => {
      if (i == -1) {
        return h("span", { class: "disabled dots" }, "...");
      }
      return (h("span", { class: {
          current: current === i,
        }, onClick: () => current !== i && __classPrivateFieldGet$4(this, _KlevuPagination_instances, "m", _KlevuPagination_handlePageChange).call(this, i), part: "pagination-page-number" }, i));
    }), h("klevu-icon", { class: {
        disabled: current === max,
      }, onClick: () => current !== max && __classPrivateFieldGet$4(this, _KlevuPagination_instances, "m", _KlevuPagination_handlePageChange).call(this, current + 1), name: "navigate_next", part: "pagination-navigation-next" }))));
  }
  static get watchers() { return {
    "queryResult": ["watchPropHandler"]
  }; }
};
_KlevuPagination_instances = new WeakSet(), _KlevuPagination_handlePageChange = function _KlevuPagination_handlePageChange(page) {
  this.klevuPaginationChange.emit(page);
  if (this.shouldUpdateUrlForPage) {
    const urlSearchParams = new URLSearchParams(window.location.search);
    urlSearchParams.set("klevu_page", `${page}`);
    __classPrivateFieldGet$4(this, _KlevuPagination_instances, "m", _KlevuPagination_updateUrl).call(this, urlSearchParams);
  }
}, _KlevuPagination_updateUrl = function _KlevuPagination_updateUrl(urlSearchParams) {
  window.history.pushState({}, "", "?" + urlSearchParams.toString());
};
KlevuPagination.style = klevuPaginationCss;

const klevuPopularSearchesCss = ":host{display:block}klevu-typography.caption{display:block;margin-bottom:var(--klevu-spacing-02)}klevu-list:hover{cursor:pointer;background:var(--klevu-color-neutral-2)}";

var __classPrivateFieldGet$3 = (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 _KlevuPopularSearches_instances, _KlevuPopularSearches_popularSearchClick;
const KlevuPopularSearches = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuPopularSearchClicked = createEvent(this, "klevuPopularSearchClicked", 7);
    _KlevuPopularSearches_instances.add(this);
    this.tCaption = getTranslation("popularSearches.tCaption");
    this.popularSearches = [];
  }
  async connectedCallback() {
    var _a, _b;
    await KlevuInit.ready();
    try {
      const settings = await KlevuKMCSettings();
      this.popularSearches = (_b = (_a = settings.root) === null || _a === void 0 ? void 0 : _a.klevu_webstorePopularTerms) !== null && _b !== void 0 ? _b : [];
    }
    catch (_c) { }
  }
  render() {
    if (this.popularSearches.length == 0) {
      return null;
    }
    return (h(Host, null, h("div", { part: "popular-searches-base" }, h("klevu-typography", { class: "caption", variant: "h3", part: "popular-searches-caption" }, this.tCaption), this.popularSearches.map((s) => (h("klevu-list", { condensed: true, noXPadding: true, onClick: () => __classPrivateFieldGet$3(this, _KlevuPopularSearches_instances, "m", _KlevuPopularSearches_popularSearchClick).call(this, s), exportparts: partsExports("klevu-list") }, h("span", { part: "popular-searches-list-item", slot: "primary" }, s)))))));
  }
};
_KlevuPopularSearches_instances = new WeakSet(), _KlevuPopularSearches_popularSearchClick = function _KlevuPopularSearches_popularSearchClick(suggestion) {
  this.klevuPopularSearchClicked.emit(suggestion);
};
KlevuPopularSearches.style = klevuPopularSearchesCss;

const klevuProductGridCss = ":host{--grid-spacing:var(--klevu-product-grid-spacing, var(--klevu-spacing-05));--product-width:var(--klevu-product-grid-product-width, 250px)}.gridcontainer{display:grid;grid-gap:var(--grid-spacing);grid-template-columns:repeat(auto-fill, minmax(var(--product-width), 1fr))}";

const KlevuProductGrid = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.itemsPerRow = undefined;
  }
  render() {
    const style = {};
    if (this.itemsPerRow) {
      style.gridTemplateColumns = `repeat(${this.itemsPerRow}, 1fr)`;
    }
    return (h(Host, null, h("div", { class: "gridcontainer", style: style, part: "product-grid-base" }, h("slot", null))));
  }
};
KlevuProductGrid.style = klevuProductGridCss;

const klevuSearchFieldCss = ":host{display:flex}div{position:relative}klevu-textfield{width:100%}klevu-button{margin-left:var(--klevu-spacing-04)}";

var __classPrivateFieldSet$1 = (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 __classPrivateFieldGet$2 = (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 _KlevuSearchField_instances, _KlevuSearchField_lastQueryResult, _KlevuSearchField_doSearch, _KlevuSearchField_handleChange, _KlevuSearchField_handleSearchClick, _KlevuSearchField_searchFieldVariantToTextFieldVariant;
const KlevuSearchField = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuSearchResults = createEvent(this, "klevuSearchResults", 7);
    this.klevuSearchSuggestions = createEvent(this, "klevuSearchSuggestions", 7);
    this.klevuSearchClick = createEvent(this, "klevuSearchClick", 7);
    _KlevuSearchField_instances.add(this);
    _KlevuSearchField_lastQueryResult.set(this, void 0);
    _KlevuSearchField_doSearch.set(this, debounce(async (term) => {
      if (term.length < 3) {
        return;
      }
      const searchModifiers = [];
      // if fallback term is defined use it to search
      if (this.fallbackTerm && this.searchProducts) {
        searchModifiers.push(fallback(search(this.fallbackTerm, {
          limit: this.limit,
        })));
      }
      if (this.sendAnalytics) {
        searchModifiers.push(sendSearchEvent());
      }
      if (this.usePersonalisation) {
        searchModifiers.push(personalisation());
      }
      if (this.useKlaviyo) {
        searchModifiers.push(klaviyo());
      }
      const allSearchQueries = [];
      if (this.searchProducts) {
        allSearchQueries.push(search(term, Object.assign({ limit: this.limit, typeOfRecords: [KlevuTypeOfRecord.Product], sort: this.sort }, this.options), ...searchModifiers));
      }
      if (this.searchCmsPages) {
        allSearchQueries.push(search(term, { id: "cmsSearch", limit: this.limit, typeOfRecords: [KlevuTypeOfRecord.Cms], sort: this.sort }));
      }
      if (this.searchCategories) {
        allSearchQueries.push(search(term, {
          id: "categorySearch",
          limit: this.limit,
          typeOfRecords: [KlevuTypeOfRecord.Category],
          sort: this.sort,
        }));
      }
      if (this.searchSuggestions) {
        allSearchQueries.push(suggestions(term));
      }
      if (allSearchQueries.length === 0) {
        throw new Error("You need specify at least one thing to search");
      }
      this.isLoading = true;
      const result = await KlevuFetch(...allSearchQueries);
      this.isLoading = false;
      __classPrivateFieldSet$1(this, _KlevuSearchField_lastQueryResult, {
        fallback: result.queryExists("search-fallback") ? result.queriesById("search-fallback") : undefined,
        search: result.queryExists("search") ? result.queriesById("search") : undefined,
        category: result.queryExists("categorySearch") ? result.queriesById("categorySearch") : undefined,
        cms: result.queryExists("cmsSearch") ? result.queriesById("cmsSearch") : undefined,
      }, "f");
      this.klevuSearchResults.emit(__classPrivateFieldGet$2(this, _KlevuSearchField_lastQueryResult, "f"));
      const suggestionsResult = result.suggestionsById("suggestions");
      if (suggestionsResult) {
        this.klevuSearchSuggestions.emit(suggestionsResult.suggestions.map((s) => s.suggest));
      }
    }, 500)
    /**
     * Fetch next page of results from previous query
     *
     * @param type what type of content to get page from
     * @param pageIndex from what page. If empty next page is fetched
     */
    );
    _KlevuSearchField_handleChange.set(this, (event) => {
      this.term = event.detail;
    });
    _KlevuSearchField_handleSearchClick.set(this, () => {
      this.klevuSearchClick.emit(this.term);
    });
    this.term = "";
    this.tPlaceholder = getTranslation("searchField.tPlaceholder");
    this.tSearchText = getTranslation("searchField.tSearchText");
    this.limit = 10;
    this.fallbackTerm = undefined;
    this.searchProducts = undefined;
    this.searchSuggestions = undefined;
    this.searchCategories = undefined;
    this.searchCmsPages = undefined;
    this.sendAnalytics = undefined;
    this.sort = undefined;
    this.variant = "default";
    this.usePersonalisation = undefined;
    this.useKlaviyo = undefined;
    this.options = undefined;
    this.useLoadingIndicator = false;
    this.isLoading = false;
  }
  async connectedCallback() {
    var _a, _b;
    await KlevuInit.ready();
    const settings = getKMCSettings();
    if (this.usePersonalisation === undefined && (settings === null || settings === void 0 ? void 0 : settings.klevu_uc_userOptions.enablePersonalisationInSearch)) {
      this.usePersonalisation = true;
    }
    if (this.useKlaviyo === undefined && ((_b = (_a = settings === null || settings === void 0 ? void 0 : settings.klevu_connectors) === null || _a === void 0 ? void 0 : _a.klaviyo) === null || _b === void 0 ? void 0 : _b.enabled)) {
      this.useKlaviyo = true;
    }
    if (this.term !== undefined) {
      await __classPrivateFieldGet$2(this, _KlevuSearchField_doSearch, "f").call(this, this.term);
    }
  }
  /**
   * Programmatically trigger search
   *
   * @param term What to search
   */
  async makeSearch(term) {
    this.term = term;
    await __classPrivateFieldGet$2(this, _KlevuSearchField_doSearch, "f").call(this, term);
  }
  /**
   * Fetch next page of results from previous query
   *
   * @param type what type of content to get page from
   * @param pageIndex from what page. If empty next page is fetched
   */
  async getPage(type, pageIndex) {
    if (!__classPrivateFieldGet$2(this, _KlevuSearchField_lastQueryResult, "f")) {
      throw new Error("No search results to get page from");
    }
    switch (type) {
      case "search": {
        const res = __classPrivateFieldGet$2(this, _KlevuSearchField_lastQueryResult, "f").search;
        if (res && res.getPage) {
          const result = await res.getPage({ pageIndex });
          __classPrivateFieldGet$2(this, _KlevuSearchField_lastQueryResult, "f").search = result === null || result === void 0 ? void 0 : result.queriesById("search");
          this.klevuSearchResults.emit({
            search: result === null || result === void 0 ? void 0 : result.queriesById("search"),
          });
        }
      }
      case "category": {
        const res = __classPrivateFieldGet$2(this, _KlevuSearchField_lastQueryResult, "f").category;
        if (res && res.getPage) {
          const result = await res.getPage({ pageIndex });
          __classPrivateFieldGet$2(this, _KlevuSearchField_lastQueryResult, "f").category = result === null || result === void 0 ? void 0 : result.queriesById("categorySearch");
          this.klevuSearchResults.emit({
            category: result === null || result === void 0 ? void 0 : result.queriesById("categorySearch"),
          });
        }
      }
      case "cms": {
        const res = __classPrivateFieldGet$2(this, _KlevuSearchField_lastQueryResult, "f").cms;
        if (res && res.getPage) {
          const result = await res.getPage({ pageIndex });
          __classPrivateFieldGet$2(this, _KlevuSearchField_lastQueryResult, "f").cms = result === null || result === void 0 ? void 0 : result.queriesById("cmsSearch");
          this.klevuSearchResults.emit({
            cms: result === null || result === void 0 ? void 0 : result.queriesById("cmsSearch"),
          });
        }
      }
    }
  }
  /**
   * Fetches query result from last request
   *
   * @param type type of query result
   * @returns
   */
  async getQueryResult(type) {
    if (!__classPrivateFieldGet$2(this, _KlevuSearchField_lastQueryResult, "f")) {
      throw new Error("No search results to get query results");
    }
    return __classPrivateFieldGet$2(this, _KlevuSearchField_lastQueryResult, "f")[type];
  }
  async propsChanged() {
    __classPrivateFieldGet$2(this, _KlevuSearchField_doSearch, "f").call(this, this.term);
  }
  async termChanged() {
    __classPrivateFieldGet$2(this, _KlevuSearchField_doSearch, "f").call(this, this.term);
  }
  render() {
    return (h(Host, null, h("klevu-textfield", { exportparts: partsExports("klevu-textfield"), value: this.term, placeholder: this.tPlaceholder, onKlevuTextChanged: __classPrivateFieldGet$2(this, _KlevuSearchField_handleChange, "f").bind(this), onKlevuTextEnterPressed: __classPrivateFieldGet$2(this, _KlevuSearchField_handleSearchClick, "f").bind(this), "aria-role": "search", variant: __classPrivateFieldGet$2(this, _KlevuSearchField_instances, "m", _KlevuSearchField_searchFieldVariantToTextFieldVariant).call(this), icon: "search" }, h("slot", { name: "end-of-input", slot: "end" }, this.useLoadingIndicator && this.isLoading ? h("klevu-loading-indicator", null) : "")), this.variant === "default" && (h("klevu-button", { exportparts: partsExports("klevu-button"), onClick: __classPrivateFieldGet$2(this, _KlevuSearchField_handleSearchClick, "f").bind(this) }, this.tSearchText))));
  }
  static get watchers() { return {
    "sort": ["propsChanged"],
    "term": ["termChanged"]
  }; }
};
_KlevuSearchField_lastQueryResult = new WeakMap(), _KlevuSearchField_doSearch = new WeakMap(), _KlevuSearchField_handleChange = new WeakMap(), _KlevuSearchField_handleSearchClick = new WeakMap(), _KlevuSearchField_instances = new WeakSet(), _KlevuSearchField_searchFieldVariantToTextFieldVariant = function _KlevuSearchField_searchFieldVariantToTextFieldVariant() {
  switch (this.variant) {
    case "default":
      return "default";
    case "default-no-button":
      return "default";
    case "pill":
      return "pill";
  }
};
KlevuSearchField.style = klevuSearchFieldCss;

const klevuSortCss = ":host{display:block}";

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 __classPrivateFieldGet$1 = (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 _KlevuSort_instances, _KlevuSort_selected, _KlevuSort_onChange;
const KlevuSort = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuSortChanged = createEvent(this, "klevuSortChanged", 7);
    _KlevuSort_instances.add(this);
    _KlevuSort_selected.set(this, KlevuSearchSorting.Relevance);
    this.variant = "default";
    this.options = [
      { value: KlevuSearchSorting.Relevance, text: getTranslation("sort.tRelevance") },
      { value: KlevuSearchSorting.NameAsc, text: getTranslation("sort.tNameAsc") },
      { value: KlevuSearchSorting.NameDesc, text: getTranslation("sort.tNameDesc") },
      { value: KlevuSearchSorting.NewArrivalAsc, text: getTranslation("sort.tNewArrivalsAsc") },
      { value: KlevuSearchSorting.NewArrivalDesc, text: getTranslation("sort.tNewArrivalsDesc") },
      { value: KlevuSearchSorting.PriceAsc, text: getTranslation("sort.tPriceAsc") },
      { value: KlevuSearchSorting.PriceDesc, text: getTranslation("sort.tPriceDesc") },
      { value: KlevuSearchSorting.RatingAsc, text: getTranslation("sort.tRatingAsc") },
      { value: KlevuSearchSorting.RatingDesc, text: getTranslation("sort.tRatingDesc") },
    ];
  }
  render() {
    return (h(Host, null, h("klevu-dropdown", { exportparts: partsExports("klevu-dropdown"), name: "sort", options: this.options, selected: __classPrivateFieldGet$1(this, _KlevuSort_selected, "f"), variant: this.variant, onKlevuDropdownChanged: __classPrivateFieldGet$1(this, _KlevuSort_instances, "m", _KlevuSort_onChange).bind(this) })));
  }
};
_KlevuSort_selected = new WeakMap(), _KlevuSort_instances = new WeakSet(), _KlevuSort_onChange = function _KlevuSort_onChange(event) {
  const newSort = event.detail;
  __classPrivateFieldSet(this, _KlevuSort_selected, newSort, "f");
  this.klevuSortChanged.emit(newSort);
};
KlevuSort.style = klevuSortCss;

const klevuSuggestionsListCss = ":host{display:block}klevu-typography.caption{display:block;margin-bottom:var(--klevu-spacing-04)}klevu-list:hover{cursor:pointer;background:var(--klevu-color-neutral-2)}";

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 _KlevuSuggestionsList_instances, _KlevuSuggestionsList_suggestionClick;
const KlevuSuggestionsList = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuSuggestionClicked = createEvent(this, "klevuSuggestionClicked", 7);
    _KlevuSuggestionsList_instances.add(this);
    this.caption = "Search suggestions";
    this.suggestions = [];
  }
  render() {
    if (this.suggestions.length === 0)
      return null;
    return (h(Host, null, h("klevu-typography", { class: "caption", variant: "h3", part: "suggestions-list-caption" }, this.caption), this.suggestions.map((s) => (h("klevu-list", { condensed: true, noXPadding: true, exportparts: partsExports("klevu-list") }, h("span", { slot: "primary", innerHTML: s, onClick: () => __classPrivateFieldGet(this, _KlevuSuggestionsList_instances, "m", _KlevuSuggestionsList_suggestionClick).call(this, stripTags(s)) }))))));
  }
};
_KlevuSuggestionsList_instances = new WeakSet(), _KlevuSuggestionsList_suggestionClick = function _KlevuSuggestionsList_suggestionClick(suggestion) {
  this.klevuSuggestionClicked.emit(suggestion);
};
KlevuSuggestionsList.style = klevuSuggestionsListCss;

const klevuTabCss = ":host{display:inline-block;--color:var(--klevu-tab-color, var(--klevu-color-primary));--padding:var(--klevu-tab-padding, var(--klevu-spacing-04))}button{display:inline-block;position:relative;transition:transform 100ms;border:0;padding:0;margin:0;height:calc(var(--klevu-size-m) * 2);background:transparent;border-bottom:1px solid var(--klevu-color-neutral-5);padding-bottom:1px}button klevu-typography{border-radius:var(--klevu-border-radius-m);color:var(--klevu-color-neutral-7);display:block;padding:0 calc(var(--padding) * 2);height:calc(100% - 4px);display:flex;align-items:center}button:focus{outline:0}button.active{border-bottom:2px solid var(--color);padding-bottom:0}button.active klevu-typography{color:var(--klevu-color-neutral-8)}button:hover klevu-typography{background:var(--klevu-color-neutral-2)}button:disabled klevu-typography{color:var(--klevu-color-neutral-7)}button:focus klevu-typography{outline-offset:-2px;outline:2px solid var(--color)}";

const KlevuTab = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.caption = undefined;
    this.active = undefined;
    this.disabled = undefined;
  }
  render() {
    return (h(Host, null, h("button", { class: {
        active: Boolean(this.active),
      }, disabled: Boolean(this.disabled), part: "tab-base" }, h("klevu-typography", { part: "tab-caption", variant: "body-s" }, this.caption))));
  }
};
KlevuTab.style = klevuTabCss;

export { KlevuCmsList as klevu_cms_list, KlevuLatestSearches as klevu_latest_searches, KlevuPagination as klevu_pagination, KlevuPopularSearches as klevu_popular_searches, KlevuProductGrid as klevu_product_grid, KlevuSearchField as klevu_search_field, KlevuSort as klevu_sort, KlevuSuggestionsList as klevu_suggestions_list, KlevuTab as klevu_tab };

//# sourceMappingURL=klevu-cms-list_9.entry.js.map