import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { s as stripTags } from './utils.js';
import { p as partsExports } from './partsExports.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 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 = /*@__PURE__*/ proxyCustomElement(class KlevuSuggestionsList extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    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)) }))))));
  }
  static get style() { return klevuSuggestionsListCss; }
}, [1, "klevu-suggestions-list", {
    "caption": [1],
    "suggestions": [16]
  }]);
_KlevuSuggestionsList_instances = new WeakSet(), _KlevuSuggestionsList_suggestionClick = function _KlevuSuggestionsList_suggestionClick(suggestion) {
  this.klevuSuggestionClicked.emit(suggestion);
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-suggestions-list", "klevu-icon", "klevu-list", "klevu-typography"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-suggestions-list":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuSuggestionsList);
      }
      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 { KlevuSuggestionsList as K, defineCustomElement as d };

//# sourceMappingURL=klevu-suggestions-list2.js.map