@lukso/web-components 1.177.0 → 1.178.0

package/dist/chunks/index-BvBAD4cf.js

@@ -1,818 +0,0 @@
-'use strict';
-
-const makeBlockie = require('ethereum-blockies-base64');
-const lit = require('lit');
-const decorators_js = require('lit/decorators.js');
-const tailwindVariants = require('tailwind-variants');
-const index = require('./index-7BmB6zet.js');
-require('../components/lukso-dropdown/index.cjs');
-require('../components/lukso-dropdown-option/index.cjs');
-require('../components/lukso-icon/index.cjs');
-require('../components/lukso-input/index.cjs');
-require('../components/lukso-profile/index.cjs');
-require('../components/lukso-tag/index.cjs');
-const components_luksoUsername_index = require('./index-CFhB5vC2.js');
-require('../components/lukso-tooltip/index.cjs');
-require('../tailwind-config.cjs');
-require('./index-oDo-wiUs.js');
-require('./cn-BkQsgCJ9.js');
-require('viem');
-const uniqId = require('./uniq-id-Cszs24DQ.js');
-
-const style = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n:host {\n  display: inline-flex;\n}\n\n:host([is-full-width]) {\n  width: 100%;\n  display: flex;\n}\n";
-
-var STANDARDS = /* @__PURE__ */ ((STANDARDS2) => {
-  STANDARDS2["EOA"] = "EOA";
-  STANDARDS2["LSP3"] = "LSP0ERC725Account";
-  STANDARDS2["LSP7"] = "LSP7DigitalAsset";
-  STANDARDS2["LSP8"] = "LSP8IdentifiableDigitalAsset";
-  STANDARDS2["UNKNOWN"] = "UnknownContract";
-  return STANDARDS2;
-})(STANDARDS || {});
-var SEARCH_RESULT_TYPES = /* @__PURE__ */ ((SEARCH_RESULT_TYPES2) => {
-  SEARCH_RESULT_TYPES2["STRING"] = "string";
-  SEARCH_RESULT_TYPES2["PROFILE"] = "profile";
-  SEARCH_RESULT_TYPES2["ASSET"] = "asset";
-  SEARCH_RESULT_TYPES2["APP"] = "app";
-  SEARCH_RESULT_TYPES2["UNIVERSAL_NAME"] = "universal-name";
-  SEARCH_RESULT_TYPES2["RECENT_SEARCH"] = "recent-search";
-  return SEARCH_RESULT_TYPES2;
-})(SEARCH_RESULT_TYPES || {});
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-exports.LuksoSearch = class LuksoSearch extends index.TailwindStyledElement(style) {
-  constructor() {
-    super();
-    this.value = "";
-    this.name = "";
-    this.placeholder = "";
-    this.label = "";
-    this.groupLabels = JSON.stringify({
-      [SEARCH_RESULT_TYPES.UNIVERSAL_NAME]: "Universal Names",
-      [SEARCH_RESULT_TYPES.PROFILE]: "Profiles",
-      [SEARCH_RESULT_TYPES.ASSET]: "Assets",
-      [SEARCH_RESULT_TYPES.APP]: "Apps",
-      [SEARCH_RESULT_TYPES.STRING]: "Other",
-      [SEARCH_RESULT_TYPES.RECENT_SEARCH]: "Recent searches"
-    });
-    this.availableText = "Available";
-    this.unavailableText = "Registered";
-    this.autocomplete = "off";
-    this.id = "";
-    this.description = "";
-    this.error = "";
-    this.customClass = "";
-    this.isFullWidth = false;
-    this.isReadonly = false;
-    this.isDisabled = false;
-    this.autofocus = false;
-    this.borderless = false;
-    this.results = "";
-    this.rightIcon = "search";
-    this.debounce = 700;
-    this.isSearching = false;
-    this.noResultsText = "";
-    this.showNoResults = false;
-    this.hideLoading = false;
-    this.hasReset = false;
-    this.keepValueOnEscapeHit = false;
-    this.selected = void 0;
-    this.size = "large";
-    this.maxHeight = void 0;
-    this.withGroupLabels = false;
-    this.isDebouncing = false;
-    this.resultsParsed = [];
-    this.styles = tailwindVariants.tv({
-      slots: {
-        loading: "bg-neutral-95 w-full animate-pulse animation-delay-none"
-      },
-      variants: {
-        size: {
-          small: {
-            loading: "h-7 rounded-4"
-          },
-          medium: {
-            loading: "h-10 rounded-8"
-          },
-          large: {
-            loading: "h-10 rounded-8"
-          },
-          "x-large": {
-            loading: "h-12 rounded-8"
-          }
-        }
-      }
-    });
-    this.dropdownSize = {
-      small: "small",
-      medium: "medium",
-      large: "medium",
-      "x-large": "medium"
-    };
-    this.profileSize = {
-      small: "2x-small",
-      medium: "x-small",
-      large: "x-small",
-      "x-large": "small"
-    };
-    this.usernameSize = {
-      small: "small",
-      medium: "medium",
-      large: "medium",
-      "x-large": "x-large"
-    };
-    this.textSize = {
-      small: "text-12",
-      medium: "text-14",
-      large: "text-14",
-      "x-large": "text-16"
-    };
-    if (!this.id) {
-      this.id = uniqId.uniqId();
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("click", this.handleOutsideDropdownClick.bind(this));
-    window.addEventListener("keydown", this.handleDropdownKeydown.bind(this));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("click", this.handleOutsideDropdownClick);
-    window.removeEventListener("keydown", this.handleDropdownKeydown);
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("selected")) {
-      const selectedOption = this.shadowRoot?.querySelector(
-        `[data-index="${changedProperties.get("selected")}"`
-      );
-      if (selectedOption) {
-        if ("scrollIntoViewIfNeeded" in selectedOption && typeof selectedOption.scrollIntoViewIfNeeded === "function") {
-          selectedOption.scrollIntoViewIfNeeded();
-        } else {
-          selectedOption.scrollIntoView({
-            behavior: "smooth",
-            block: "center"
-          });
-        }
-      }
-    }
-  }
-  resultsTemplate() {
-    const resultTemplates = [];
-    this.resultsParsed = JSON.parse(this.results);
-    const groupLabelsParsed = JSON.parse(this.groupLabels);
-    for (const result of Object.entries(this.resultsParsed)) {
-      const index = Number(result[0]);
-      if (this.withGroupLabels) {
-        const currentType = result[1].type;
-        const prevType = index > 0 ? this.resultsParsed[index - 1].type : null;
-        if (index === 0 || currentType !== prevType) {
-          let headerText = "";
-          switch (currentType) {
-            case SEARCH_RESULT_TYPES.UNIVERSAL_NAME:
-              headerText = groupLabelsParsed[SEARCH_RESULT_TYPES.UNIVERSAL_NAME];
-              break;
-            case SEARCH_RESULT_TYPES.PROFILE:
-              headerText = groupLabelsParsed[SEARCH_RESULT_TYPES.PROFILE];
-              break;
-            case SEARCH_RESULT_TYPES.ASSET:
-              headerText = groupLabelsParsed[SEARCH_RESULT_TYPES.ASSET];
-              break;
-            case SEARCH_RESULT_TYPES.APP:
-              headerText = groupLabelsParsed[SEARCH_RESULT_TYPES.APP];
-              break;
-            case SEARCH_RESULT_TYPES.RECENT_SEARCH:
-              headerText = groupLabelsParsed[SEARCH_RESULT_TYPES.RECENT_SEARCH];
-              break;
-            default:
-              headerText = groupLabelsParsed[SEARCH_RESULT_TYPES.STRING];
-              break;
-          }
-          resultTemplates.push(
-            lit.html`<div
-              class="${index === 0 ? "mb-1 pb-1" : "my-1 py-1"} text-neutral-35 paragraph-inter-12-medium tracking-wider border-b border-b-neutral-95 text-left"
-            >
-              ${headerText}
-            </div>`
-          );
-        }
-      }
-      switch (result[1].type) {
-        // UniversalName result
-        case SEARCH_RESULT_TYPES.UNIVERSAL_NAME:
-          resultTemplates.push(
-            this.resultUniversalNameTemplate(result[1], index)
-          );
-          break;
-        // Profile result
-        case SEARCH_RESULT_TYPES.PROFILE:
-          resultTemplates.push(this.resultProfileTemplate(result[1], index));
-          break;
-        // Asset result
-        case SEARCH_RESULT_TYPES.ASSET:
-          resultTemplates.push(this.resultAssetTemplate(result[1], index));
-          break;
-        // App result
-        case SEARCH_RESULT_TYPES.APP:
-          resultTemplates.push(this.resultAppTemplate(result[1], index));
-          break;
-        // Recent searches result
-        case SEARCH_RESULT_TYPES.RECENT_SEARCH:
-          resultTemplates.push(this.resultRecentSearchTemplate(result[1]));
-          break;
-        // Default string result
-        default:
-          resultTemplates.push(this.resultStringTemplate(result[1], index));
-          break;
-      }
-    }
-    return lit.html`<lukso-dropdown
-      size=${this.dropdownSize[this.size]}
-      is-open=${this.resultsParsed.length > 0}
-      is-open-on-outside-click
-      is-full-width
-      max-height=${this.maxHeight || lit.nothing}
-      >${resultTemplates}</lukso-dropdown
-    >`;
-  }
-  noResultsTemplate() {
-    return lit.html`<lukso-dropdown
-      size=${this.dropdownSize[this.size]}
-      is-open
-      is-open-on-outside-click
-      is-full-width
-      >${lit.html`<div class="paragraph-inter-14-semi-bold text-neutral-20 pl-1">
-        ${this.noResultsText}
-      </div>`}</lukso-dropdown
-    >`;
-  }
-  loadingTemplate() {
-    const { loading } = this.styles({
-      size: this.size
-    });
-    if (this.showNoResults) {
-      return lit.html`<lukso-dropdown
-        size=${this.dropdownSize[this.size]}
-        is-open
-        is-open-on-outside-click
-        is-full-width
-        >${lit.html`
-          <div role="status" class="flex flex-col gap-1">
-            <div class=${loading()}></div>
-          </div>
-        `}</lukso-dropdown
-      >`;
-    }
-    if (this.resultsParsed.length === 0 || this.resultsParsed.length > 5) {
-      return lit.html`<lukso-dropdown
-        size=${this.dropdownSize[this.size]}
-        is-open
-        is-open-on-outside-click
-        is-full-width
-        >${lit.html`
-          <div role="status" class="flex flex-col gap-1">
-            ${[...Array(5)].map(() => lit.html`<div class=${loading()}></div>`)}
-          </div>
-        `}</lukso-dropdown
-      >`;
-    }
-    return lit.html`<lukso-dropdown
-      size=${this.dropdownSize[this.size]}
-      is-open
-      is-open-on-outside-click
-      is-full-width
-      >${lit.html`
-        <div role="status" class="flex flex-col gap-1">
-          ${this.resultsParsed.map(() => lit.html`<div class=${loading()}></div>`)}
-        </div>
-      `}</lukso-dropdown
-    >`;
-  }
-  resultStringTemplate(result, index) {
-    const dropdownSize = this.size === "large" || this.size === "x-large" ? "medium" : this.size;
-    return lit.html`<lukso-dropdown-option
-      data-id="${result.id}"
-      data-index="${index + 1}"
-      ?is-selected=${this.selected === index + 1}
-      size=${dropdownSize}
-      @click=${() => this.handleSelect(result)}
-    >
-      ${result.value}
-    </lukso-dropdown-option>`;
-  }
-  resultUniversalNameTemplate(result, index) {
-    const tag = lit.html`<lukso-tag
-      is-rounded
-      background-color="${result.status ? "green-95" : "neutral-95"}"
-      text-color="${result.status ? "green-45" : "neutral-60"}"
-      >${!!result.status ? this.availableText : this.unavailableText}</lukso-tag
-    >`;
-    return lit.html`<lukso-dropdown-option
-      data-id="${result.id}"
-      data-index="${index + 1}"
-      ?is-selected=${this.selected === index + 1}
-      size=${this.dropdownSize[this.size]}
-      @click=${() => this.handleSelect(result)}
-    >
-      <div class="flex flex-row items-center justify-between w-full">
-        <div class="paragraph-inter-14-semi-bold">${result.value}</div>
-        ${tag}
-      </div>
-    </lukso-dropdown-option>`;
-  }
-  resultProfileTemplate(result, index) {
-    const eoaProfilePicture = lit.html`<lukso-profile
-      profile-address="${result.address}"
-      profile-url="${result.address ? makeBlockie(result.address) : ""}"
-      size=${this.profileSize[this.size]}
-    ></lukso-profile>`;
-    const lsp3ProfilePicture = lit.html`<lukso-profile
-      profile-address="${result.address}"
-      profile-url="${result.image}"
-      size=${this.profileSize[this.size]}
-      has-identicon
-    ></lukso-profile>`;
-    const standard = result.standard || STANDARDS.LSP3;
-    const profilePicture = standard !== STANDARDS.LSP3 ? eoaProfilePicture : lsp3ProfilePicture;
-    const upProfileUsername = lit.html`<lukso-username
-      name="${result.name?.toLowerCase() || "anonymous-profile"}"
-      address="${result.address}"
-      name-color="neutral-20"
-      max-width="300"
-      size=${this.usernameSize[this.size]}
-      ?hide-prefix="${!result.name}"
-      class="ml-1"
-    ></lukso-username>`;
-    const eoaUsername = lit.html`<lukso-username
-      name="${components_luksoUsername_index.sliceAddress(result.address, 8)}"
-      address="__EOA"
-      name-color="neutral-20"
-      max-width="300"
-      size=${this.usernameSize[this.size]}
-      hide-prefix
-      class="ml-1"
-    ></lukso-username>`;
-    const scUsername = lit.html`<lukso-username
-      name="${components_luksoUsername_index.sliceAddress(result.address, 8)}"
-      address=""
-      name-color="neutral-20"
-      max-width="300"
-      size=${this.usernameSize[this.size]}
-      hide-prefix
-      class="ml-1"
-    ></lukso-username>`;
-    let profileName = scUsername;
-    if (standard === STANDARDS.EOA) {
-      profileName = eoaUsername;
-    } else if (standard === STANDARDS.LSP3) {
-      profileName = upProfileUsername;
-    }
-    return lit.html`<lukso-dropdown-option
-      data-id="${result.address}"
-      data-index="${index + 1}"
-      ?is-selected=${this.selected === index + 1}
-      size=${this.dropdownSize[this.size]}
-      @click=${() => this.handleSelect(result)}
-    >
-      ${profilePicture} ${profileName}
-    </lukso-dropdown-option>`;
-  }
-  resultAssetTemplate(result, index) {
-    return lit.html`<lukso-dropdown-option
-      data-id="${result.address}"
-      data-index="${index + 1}"
-      ?is-selected=${this.selected === index + 1}
-      size=${this.dropdownSize[this.size]}
-      @click=${() => this.handleSelect(result)}
-    >
-      <lukso-profile
-        profile-address="${result.address}"
-        profile-url="${result.image}"
-        placeholder="/assets/images/token-default.svg"
-        size=${this.profileSize[this.size]}
-      ></lukso-profile>
-      <span class="paragraph-inter-14-semi-bold ${this.textSize[this.size]}"
-        >${result.name}
-        <span
-          class="text-neutral-60 paragraph-inter-14-regular ${this.textSize[this.size]}"
-          >${result.symbol}</span
-        ></span
-      >
-    </lukso-dropdown-option>`;
-  }
-  resultAppTemplate(result, index) {
-    return lit.html`<lukso-dropdown-option
-      data-id="${result.address}"
-      data-index="${index + 1}"
-      ?is-selected=${this.selected === index + 1}
-      size=${this.dropdownSize[this.size]}
-      @click=${() => this.handleSelect(result)}
-    >
-      <lukso-profile
-        profile-address="${result.address}"
-        profile-url="${result.image}"
-        size=${this.profileSize[this.size]}
-      ></lukso-profile>
-      <span class="paragraph-inter-14-semi-bold ${this.textSize[this.size]}"
-        >${result.name}
-      </span>
-    </lukso-dropdown-option>`;
-  }
-  resultRecentSearchTemplate(result) {
-    const recentSearchTemplates = [];
-    for (const recentSearch of result.value) {
-      switch (recentSearch.type) {
-        case SEARCH_RESULT_TYPES.PROFILE: {
-          const eoaProfilePicture = lit.html`<lukso-tooltip
-            show-delay="2000"
-            class="flex"
-          >
-            <div slot="text">
-              <lukso-username
-                name="${components_luksoUsername_index.sliceAddress(recentSearch.address, 8)}"
-                address="__EOA"
-                name-color="neutral-20"
-                max-width="300"
-                size="x-small"
-                hide-prefix
-                class="ml-1"
-              ></lukso-username>
-            </div>
-            <lukso-profile
-              profile-address="${recentSearch.address}"
-              profile-url="${recentSearch.address ? makeBlockie(recentSearch.address) : ""}"
-              size=${this.profileSize[this.size]}
-              class="cursor-pointer transition hover:scale-[1.02]"
-              @click=${() => this.handleSelect(recentSearch)}
-            ></lukso-profile
-          ></lukso-tooltip>`;
-          const lsp3ProfilePicture = lit.html`<lukso-tooltip
-            show-delay="2000"
-            class="flex"
-          >
-            <div slot="text">
-              <lukso-username
-                name="${recentSearch.name?.toLowerCase() || "anonymous-profile"}"
-                address="${recentSearch.address}"
-                name-color="neutral-20"
-                max-width="300"
-                size="x-small"
-                ?hide-prefix="${!recentSearch.name}"
-                class="ml-1"
-              ></lukso-username>
-            </div>
-            <lukso-profile
-              profile-address="${recentSearch.address}"
-              profile-url="${recentSearch.image}"
-              size=${this.profileSize[this.size]}
-              has-identicon
-              class="cursor-pointer transition hover:scale-[1.02]"
-              @click=${() => this.handleSelect(recentSearch)}
-            ></lukso-profile
-          ></lukso-tooltip>`;
-          const standard = recentSearch.standard || STANDARDS.LSP3;
-          const profilePicture = standard !== STANDARDS.LSP3 ? eoaProfilePicture : lsp3ProfilePicture;
-          recentSearchTemplates.push(profilePicture);
-          break;
-        }
-        case SEARCH_RESULT_TYPES.ASSET: {
-          const asset = lit.html`<lukso-tooltip show-delay="2000" class="flex">
-            <div slot="text">
-              <span class="font-600"
-                >${recentSearch.name}
-                <span class="text-neutral-60"
-                  >${recentSearch.symbol}</span
-                ></span
-              >
-            </div>
-            <lukso-profile
-              profile-address="${recentSearch.address}"
-              profile-url="${recentSearch.image}"
-              placeholder="/assets/images/token-default.svg"
-              size=${this.profileSize[this.size]}
-              class="cursor-pointer transition hover:scale-[1.02]"
-              @click=${() => this.handleSelect(recentSearch)}
-            ></lukso-profile
-          ></lukso-tooltip>`;
-          recentSearchTemplates.push(asset);
-          break;
-        }
-        case SEARCH_RESULT_TYPES.APP: {
-          const app = lit.html`<lukso-tooltip show-delay="2000" class="flex">
-            <div slot="text">
-              <span class="font-600">${recentSearch.name}</span>
-            </div>
-            <lukso-profile
-              profile-address="${recentSearch.address}"
-              profile-url="${recentSearch.image}"
-              size=${this.profileSize[this.size]}
-              class="cursor-pointer transition hover:scale-[1.02]"
-              @click=${() => this.handleSelect(recentSearch)}
-            ></lukso-profile
-          ></lukso-tooltip>`;
-          recentSearchTemplates.push(app);
-          break;
-        }
-      }
-    }
-    return lit.html`<div class="flex gap-4 mx-3 my-2">
-      ${recentSearchTemplates}
-    </div>`;
-  }
-  async handleOutsideDropdownClick(event) {
-    const element = event.target;
-    let currentElement = element;
-    while (currentElement) {
-      if (currentElement === this) {
-        return;
-      }
-      if (currentElement?.dataset?.component === "lukso-search") {
-        return;
-      }
-      currentElement = currentElement.parentElement;
-    }
-    this.results = "";
-    const clickEvent = new CustomEvent("on-outside-click", {
-      detail: {
-        event
-      },
-      bubbles: false,
-      composed: true
-    });
-    this.dispatchEvent(clickEvent);
-  }
-  async handleDropdownKeydown(event) {
-    if (event.key === "ArrowUp" && this.selected && this.selected > 1 && this.resultsParsed?.length) {
-      event.preventDefault();
-      this.selected = this.selected - 1;
-    }
-    if (event.key === "ArrowDown" && this.resultsParsed?.length) {
-      event.preventDefault();
-      if (!this.selected) {
-        this.selected = 1;
-      } else if (this.selected < this.resultsParsed.length) {
-        this.selected = this.selected + 1;
-      }
-    }
-    if (event.key === "Enter" && this.resultsParsed?.length) {
-      if (this.selected) {
-        const selectedResult = this.resultsParsed[this.selected - 1];
-        await this.handleSelect(selectedResult);
-      }
-    }
-    if (event.key === "Escape") {
-      this.results = "";
-    }
-  }
-  async handleSelect(result) {
-    await this.updateComplete;
-    const selectEvent = new CustomEvent("on-select", {
-      detail: {
-        value: result
-      },
-      bubbles: false,
-      composed: true
-    });
-    this.dispatchEvent(selectEvent);
-  }
-  async handleBlur(event) {
-    event.stopPropagation();
-    await this.updateComplete;
-    const target = event.target;
-    const blurEvent = new CustomEvent("on-blur", {
-      detail: {
-        value: target.value,
-        event
-      },
-      bubbles: false,
-      composed: true
-    });
-    this.dispatchEvent(blurEvent);
-  }
-  async handleInputClick(event) {
-    event.stopPropagation();
-    await this.updateComplete;
-    const target = event.target;
-    const clickEvent = new CustomEvent("on-input-click", {
-      detail: {
-        value: target.value,
-        event
-      },
-      bubbles: false,
-      composed: true
-    });
-    this.dispatchEvent(clickEvent);
-  }
-  async handleKeyUp(event) {
-    event.stopPropagation();
-    await this.updateComplete;
-    const value = event?.detail?.value;
-    if (!this.keepValueOnEscapeHit && event?.detail?.event?.key === "Escape") {
-      this.value = "";
-      event.detail.value = "";
-      this.handleSearch(event);
-    }
-    const keyEvent = new CustomEvent("on-key-up", {
-      detail: {
-        value,
-        event
-      },
-      bubbles: true,
-      composed: true
-    });
-    this.dispatchEvent(keyEvent);
-  }
-  async handleReset(event) {
-    if (!this.hasReset) {
-      return;
-    }
-    await this.updateComplete;
-    this.value = "";
-    const target = event.target;
-    const clickEvent = new CustomEvent("on-reset", {
-      detail: {
-        value: target.value,
-        event
-      },
-      bubbles: false,
-      composed: true
-    });
-    this.dispatchEvent(clickEvent);
-  }
-  async searchDebounce(searchTerm) {
-    await this.updateComplete;
-    this.value = searchTerm;
-    this.debounceTimer = setTimeout(() => {
-      const changeEvent = new CustomEvent("on-search", {
-        detail: {
-          value: searchTerm
-        },
-        bubbles: false,
-        composed: true
-      });
-      this.dispatchEvent(changeEvent);
-      this.isDebouncing = false;
-    }, this.debounce);
-  }
-  handleSearch(event) {
-    if (this.isDebouncing) {
-      clearTimeout(this.debounceTimer);
-    }
-    this.isDebouncing = true;
-    const target = event.target;
-    this.searchDebounce(target.value);
-  }
-  render() {
-    return lit.html`
-      <div class="relative w-full">
-        <lukso-input
-          name=${this.name}
-          type="text"
-          .value=${this.value}
-          placeholder=${this.placeholder}
-          autocomplete=${this.autocomplete}
-          label=${this.label}
-          description=${this.description}
-          error=${this.error}
-          custom-class=${this.customClass}
-          id="search-${this.id}"
-          size=${this.size}
-          data-component="lukso-search"
-          right-icon="${this.hasReset && this.value ? "close-sm" : this.rightIcon}"
-          ?is-right-icon-clickable=${this.hasReset && this.value}
-          ?autofocus=${this.autofocus}
-          ?is-readonly=${this.isReadonly}
-          ?is-disabled=${this.isDisabled}
-          ?is-full-width=${this.isFullWidth}
-          keep-focus-on-escape
-          @on-input=${this.handleSearch}
-          @on-blur=${this.handleBlur}
-          @on-input-click=${this.handleInputClick}
-          @on-right-icon-click=${this.handleReset}
-          @on-key-up=${this.handleKeyUp}
-        ></lukso-input>
-        <!-- results dropdown -->
-        ${this.results && !(this.isSearching || this.isDebouncing) ? this.resultsTemplate() : lit.nothing}
-        <!-- no results dropdown -->
-        ${this.showNoResults && !(this.isSearching || this.isDebouncing) ? this.noResultsTemplate() : lit.nothing}
-        <!-- loading dropdown -->
-        ${!this.hideLoading && this.value && (this.isSearching || this.isDebouncing) ? this.loadingTemplate() : lit.nothing}
-      </div>
-    `;
-  }
-};
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.LuksoSearch.prototype, "value", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.LuksoSearch.prototype, "name", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.LuksoSearch.prototype, "placeholder", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.LuksoSearch.prototype, "label", 2);
-__decorateClass([
-  decorators_js.property({ type: String, attribute: "group-labels" })
-], exports.LuksoSearch.prototype, "groupLabels", 2);
-__decorateClass([
-  decorators_js.property({ type: String, attribute: "available-text" })
-], exports.LuksoSearch.prototype, "availableText", 2);
-__decorateClass([
-  decorators_js.property({ type: String, attribute: "unavailable-text" })
-], exports.LuksoSearch.prototype, "unavailableText", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.LuksoSearch.prototype, "autocomplete", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.LuksoSearch.prototype, "id", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.LuksoSearch.prototype, "description", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.LuksoSearch.prototype, "error", 2);
-__decorateClass([
-  decorators_js.property({ type: String, attribute: "custom-class" })
-], exports.LuksoSearch.prototype, "customClass", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, attribute: "is-full-width" })
-], exports.LuksoSearch.prototype, "isFullWidth", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, attribute: "is-readonly" })
-], exports.LuksoSearch.prototype, "isReadonly", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
-], exports.LuksoSearch.prototype, "isDisabled", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean })
-], exports.LuksoSearch.prototype, "autofocus", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean })
-], exports.LuksoSearch.prototype, "borderless", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.LuksoSearch.prototype, "results", 2);
-__decorateClass([
-  decorators_js.property({ type: String, attribute: "right-icon" })
-], exports.LuksoSearch.prototype, "rightIcon", 2);
-__decorateClass([
-  decorators_js.property({ type: Number })
-], exports.LuksoSearch.prototype, "debounce", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, attribute: "is-searching" })
-], exports.LuksoSearch.prototype, "isSearching", 2);
-__decorateClass([
-  decorators_js.property({ type: String, attribute: "no-results-text" })
-], exports.LuksoSearch.prototype, "noResultsText", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, attribute: "show-no-results" })
-], exports.LuksoSearch.prototype, "showNoResults", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, attribute: "hide-loading" })
-], exports.LuksoSearch.prototype, "hideLoading", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, attribute: "has-reset" })
-], exports.LuksoSearch.prototype, "hasReset", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, attribute: "keep-value-on-escape-hit" })
-], exports.LuksoSearch.prototype, "keepValueOnEscapeHit", 2);
-__decorateClass([
-  decorators_js.property({ type: Number })
-], exports.LuksoSearch.prototype, "selected", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.LuksoSearch.prototype, "size", 2);
-__decorateClass([
-  decorators_js.property({ type: Number, attribute: "max-height" })
-], exports.LuksoSearch.prototype, "maxHeight", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, attribute: "with-group-labels" })
-], exports.LuksoSearch.prototype, "withGroupLabels", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.LuksoSearch.prototype, "isDebouncing", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.LuksoSearch.prototype, "debounceTimer", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.LuksoSearch.prototype, "resultsParsed", 2);
-exports.LuksoSearch = __decorateClass([
-  index.safeCustomElement("lukso-search")
-], exports.LuksoSearch);
-
-exports.SEARCH_RESULT_TYPES = SEARCH_RESULT_TYPES;
-exports.STANDARDS = STANDARDS;