import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { K as KlevuInit, j as KlevuKMCSettings } from './klevu-init2.js';
import { g as getTranslation } from './getTranslation.js';
import { d as defineCustomElement$3 } from './klevu-icon2.js';
import { d as defineCustomElement$2 } from './klevu-list2.js';
import { d as defineCustomElement$1 } from './klevu-typography2.js';

const klevuPopularSearchesCss = ":host{display:block}klevu-typography.caption{margin-bottom:var(--klevu-spacing-02)}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 _KlevuPopularSearches_instances, _KlevuPopularSearches_popularSearchClick;
const KlevuPopularSearches = /*@__PURE__*/ proxyCustomElement(class KlevuPopularSearches extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    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("klevu-typography", { class: "caption", variant: "h3" }, this.tCaption), this.popularSearches.map((s) => (h("klevu-list", { condensed: true, noXPadding: true, onClick: () => __classPrivateFieldGet(this, _KlevuPopularSearches_instances, "m", _KlevuPopularSearches_popularSearchClick).call(this, s) }, h("span", { slot: "primary" }, s))))));
  }
  static get style() { return klevuPopularSearchesCss; }
}, [1, "klevu-popular-searches", {
    "tCaption": [8, "t-caption"],
    "popularSearches": [32]
  }]);
_KlevuPopularSearches_instances = new WeakSet(), _KlevuPopularSearches_popularSearchClick = function _KlevuPopularSearches_popularSearchClick(suggestion) {
  this.klevuPopularSearchClicked.emit(suggestion);
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-popular-searches", "klevu-icon", "klevu-list", "klevu-typography"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-popular-searches":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuPopularSearches);
      }
      break;
    case "klevu-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "klevu-list":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuPopularSearches as K, defineCustomElement as d };

//# sourceMappingURL=klevu-popular-searches2.js.map