@lukso/web-components 1.141.0 → 1.141.1

package/dist/index-9fZwHYlC.js

@@ -0,0 +1,680 @@
+import { m as makeBlockie } from './index-C2gvsCnK.js';
+import { T as TailwindStyledElement, x, E } from './index-Ctu_Y4Qk.js';
+import { n, t } from './property-B5uoP6xb.js';
+import { r } from './state-THRbrpGV.js';
+import { c as ce } from './index-B9iart53.js';
+import './components/lukso-dropdown/index.js';
+import './components/lukso-dropdown-option/index.js';
+import './components/lukso-icon/index.js';
+import './components/lukso-input/index.js';
+import './components/lukso-tag/index.js';
+import { s as sliceAddress } from './index-omLmsjy0.js';
+import './tailwind-config.js';
+import './cn-Cu9aP49j.js';
+
+const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\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";
+  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;
+};
+let LuksoSearch = class extends TailwindStyledElement(style) {
+  constructor() {
+    super(...arguments);
+    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"
+    });
+    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.isDebouncing = false;
+    this.resultsParsed = [];
+    this.styles = ce({
+      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: "large",
+      "x-large": "x-large"
+    };
+    this.textSize = {
+      small: "text-12",
+      medium: "text-14",
+      large: "text-16",
+      "x-large": "text-16"
+    };
+  }
+  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);
+    const types = this.resultsParsed.map((r) => r.type);
+    const isMixedTypes = new Set(types).size > 1;
+    for (const result of Object.entries(this.resultsParsed)) {
+      const index = Number(result[0]);
+      if (isMixedTypes) {
+        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;
+            default:
+              headerText = groupLabelsParsed[SEARCH_RESULT_TYPES.STRING];
+              break;
+          }
+          resultTemplates.push(
+            x`<div
+              class="py-1 my-1 text-neutral-35 paragraph-inter-12-medium tracking-wider border-b border-b-neutral-95"
+            >
+              ${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;
+        // Default string result
+        default:
+          resultTemplates.push(this.resultStringTemplate(result[1], index));
+          break;
+      }
+    }
+    return x`<lukso-dropdown
+      size=${this.dropdownSize[this.size]}
+      is-open
+      is-open-on-outside-click
+      is-full-width
+      max-height=${this.maxHeight || E}
+      >${resultTemplates}</lukso-dropdown
+    >`;
+  }
+  noResultsTemplate() {
+    return x`<lukso-dropdown
+      size=${this.dropdownSize[this.size]}
+      is-open
+      is-open-on-outside-click
+      is-full-width
+      >${x`<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 x`<lukso-dropdown
+        size=${this.dropdownSize[this.size]}
+        is-open
+        is-open-on-outside-click
+        is-full-width
+        >${x`
+          <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 x`<lukso-dropdown
+        size=${this.dropdownSize[this.size]}
+        is-open
+        is-open-on-outside-click
+        is-full-width
+        >${x`
+          <div role="status" class="flex flex-col gap-1">
+            ${[...Array(5)].map(() => x`<div class=${loading()}></div>`)}
+          </div>
+        `}</lukso-dropdown
+      >`;
+    }
+    return x`<lukso-dropdown
+      size=${this.dropdownSize[this.size]}
+      is-open
+      is-open-on-outside-click
+      is-full-width
+      >${x`
+        <div role="status" class="flex flex-col gap-1">
+          ${this.resultsParsed.map(() => x`<div class=${loading()}></div>`)}
+        </div>
+      `}</lukso-dropdown
+    >`;
+  }
+  resultStringTemplate(result, index) {
+    const dropdownSize = this.size === "large" || this.size === "x-large" ? "medium" : this.size;
+    return x`<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 = x`<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 x`<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 = x`<lukso-profile
+      profile-address="${result.address}"
+      profile-url="${result.address ? makeBlockie(result.address) : ""}"
+      size=${this.profileSize[this.size]}
+    ></lukso-profile>`;
+    const lsp3ProfilePicture = x`<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 = x`<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 = x`<lukso-username
+      name="${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 = x`<lukso-username
+      name=""
+      address="${sliceAddress(result.address, 8)}"
+      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 x`<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 x`<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 x`<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>`;
+  }
+  async handleOutsideDropdownClick(event) {
+    const element = event.target;
+    if (element?.dataset?.component === "lukso-search") {
+      return;
+    }
+    this.results = "";
+  }
+  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 x`
+      <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=${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() : E}
+        <!-- no results dropdown -->
+        ${this.showNoResults && !(this.isSearching || this.isDebouncing) ? this.noResultsTemplate() : E}
+        <!-- loading dropdown -->
+        ${!this.hideLoading && this.value && (this.isSearching || this.isDebouncing) ? this.loadingTemplate() : E}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  n({ type: String })
+], LuksoSearch.prototype, "value", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSearch.prototype, "name", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSearch.prototype, "placeholder", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSearch.prototype, "label", 2);
+__decorateClass([
+  n({ type: String, attribute: "group-labels" })
+], LuksoSearch.prototype, "groupLabels", 2);
+__decorateClass([
+  n({ type: String, attribute: "available-text" })
+], LuksoSearch.prototype, "availableText", 2);
+__decorateClass([
+  n({ type: String, attribute: "unavailable-text" })
+], LuksoSearch.prototype, "unavailableText", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSearch.prototype, "autocomplete", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSearch.prototype, "id", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSearch.prototype, "description", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSearch.prototype, "error", 2);
+__decorateClass([
+  n({ type: String, attribute: "custom-class" })
+], LuksoSearch.prototype, "customClass", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-full-width" })
+], LuksoSearch.prototype, "isFullWidth", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-readonly" })
+], LuksoSearch.prototype, "isReadonly", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-disabled" })
+], LuksoSearch.prototype, "isDisabled", 2);
+__decorateClass([
+  n({ type: Boolean })
+], LuksoSearch.prototype, "autofocus", 2);
+__decorateClass([
+  n({ type: Boolean })
+], LuksoSearch.prototype, "borderless", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSearch.prototype, "results", 2);
+__decorateClass([
+  n({ type: String, attribute: "right-icon" })
+], LuksoSearch.prototype, "rightIcon", 2);
+__decorateClass([
+  n({ type: Number })
+], LuksoSearch.prototype, "debounce", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-searching" })
+], LuksoSearch.prototype, "isSearching", 2);
+__decorateClass([
+  n({ type: String, attribute: "no-results-text" })
+], LuksoSearch.prototype, "noResultsText", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "show-no-results" })
+], LuksoSearch.prototype, "showNoResults", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "hide-loading" })
+], LuksoSearch.prototype, "hideLoading", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "has-reset" })
+], LuksoSearch.prototype, "hasReset", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "keep-value-on-escape-hit" })
+], LuksoSearch.prototype, "keepValueOnEscapeHit", 2);
+__decorateClass([
+  n({ type: Number })
+], LuksoSearch.prototype, "selected", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSearch.prototype, "size", 2);
+__decorateClass([
+  n({ type: Number, attribute: "max-height" })
+], LuksoSearch.prototype, "maxHeight", 2);
+__decorateClass([
+  r()
+], LuksoSearch.prototype, "isDebouncing", 2);
+__decorateClass([
+  r()
+], LuksoSearch.prototype, "debounceTimer", 2);
+__decorateClass([
+  r()
+], LuksoSearch.prototype, "resultsParsed", 2);
+LuksoSearch = __decorateClass([
+  t("lukso-search")
+], LuksoSearch);
+
+export { LuksoSearch as L, STANDARDS as S, SEARCH_RESULT_TYPES as a };