'use strict';

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

const index = require('./index-a7b0c73d.js');
const core = require('@sankhyalabs/core');
const index$1 = require('./index-1be40f19.js');

const ezSearchResultListCss = ":host{--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--small, 6px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px)}.list-options{position:relative;z-index:var(--more-visible, 2);margin:var(--space--small) 0px;padding:0px;padding-inline-start:0px;box-sizing:border-box;width:100%;height:100%;max-height:350px;min-width:150px;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;margin:var(--space--medium) 0px;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.loading__container{display:flex;flex-direction:column;margin:var(--space--small)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.preselected{background-color:var(--background--medium)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}";

const EzSearchResultList = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.changeValue = index.createEvent(this, "changeValue", 7);
    this._startHighlightTag = "<span class='card-item__highlight'>";
    this._endHighlightTag = "</span>";
    this.showLoading = undefined;
    this.visibleOptions = [];
    this.value = undefined;
    this.showOptionValue = true;
    this._preSelection = undefined;
  }
  observerVisivleOptions(newValue) {
    if (newValue.length) {
      this.preSelectItemByIndex(0);
    }
  }
  async nextOption() {
    const newPreSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this.visibleOptions.length - 1);
    this.preSelectItemByIndex(newPreSelection);
  }
  async previousOption() {
    const newPreSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
    this.preSelectItemByIndex(newPreSelection);
  }
  preSelectItemByIndex(newIndex) {
    this._preSelection = newIndex;
    const option = this.visibleOptions[newIndex];
    this.scrollToOption(option);
  }
  selectOption(newOption) {
    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: newOption === null || newOption === void 0 ? void 0 : newOption.value, label: newOption === null || newOption === void 0 ? void 0 : newOption.label });
    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: this.removeHighLight(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: this.removeHighLight(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
    this.changeValue.emit(newOptionsFormatted);
  }
  removeHighLight(text) {
    if (!text || typeof text !== 'string') {
      return text;
    }
    const startHighlight = new RegExp(this._startHighlightTag, 'g');
    const endHighlight = new RegExp(this._endHighlightTag, 'g');
    return text.replace(startHighlight, '').replace(endHighlight, '');
  }
  createAndSelectOption(detail) {
    let { key, title } = detail;
    key = String(key !== null && key !== void 0 ? key : "");
    title = core.StringUtils.decodeHtmlEntities(title);
    const option = {
      value: this.removeHighLight(key),
      label: this.removeHighLight(title)
    };
    this.selectOption(option);
  }
  scrollToOption(opt) {
    if (!(opt === null || opt === void 0 ? void 0 : opt.value) || !this._optionsList)
      return;
    window.requestAnimationFrame(() => {
      var _a;
      const currentValue = String((_a = opt === null || opt === void 0 ? void 0 : opt.value) !== null && _a !== void 0 ? _a : "");
      const liElem = currentValue
        ? this._optionsList.querySelector(`div#item_${currentValue.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
        : undefined;
      if (liElem) {
        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
      }
    });
  }
  buildItem(opt, index$1) {
    var _a;
    opt.label = opt.label || opt.value;
    const card = {
      key: String((_a = opt.presentationValue) !== null && _a !== void 0 ? _a : ""),
      title: opt.presentationLabel,
      details: opt.details
    };
    return index.h("div", { style: { "height": "100%" }, class: index$1 === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createAndSelectOption(card), onMouseOver: () => { this._preSelection = index$1; } }, index.h("ez-card-item", { item: card, compacted: true, enableKey: this.showOptionValue }));
  }
  async selectCurrentItem() {
    this.selectOption(this.visibleOptions[this._preSelection]);
  }
  async cancelSelection() {
    this.cancelPreselection();
  }
  cancelPreselection() {
    this._preSelection = undefined;
  }
  canShowListOptions() {
    return !this.showLoading && this.visibleOptions.length > 0;
  }
  async componentWillLoad() {
    this.i18n = await index$1.initI18n();
  }
  render() {
    return (index.h(index.Host, null, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
      && this.visibleOptions.length === 0
      && index.h("div", { class: "message" }, index.h("span", { class: "message__no-result" }, this.i18n("ez-search-plus.emptyList"))), this.showLoading && (index.h("div", { class: "loading__container" }, index.h("ez-skeleton", { count: 4, height: '20px' }))), this.canShowListOptions() && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
  }
  static get watchers() { return {
    "visibleOptions": ["observerVisivleOptions"]
  }; }
};
EzSearchResultList.style = ezSearchResultListCss;

exports.ez_search_result_list = EzSearchResultList;
