@lukso/web-components 1.72.0 → 1.74.0

package/dist/components/lukso-search/index.js

@@ -1,16 +1,19 @@
-import { T as TailwindStyledElement, x, A } from '../../index-bf6e0a1d.js';
+import { T as TailwindStyledElement, x, A } from '../../index-09db75ee.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
-import { c as customClassMap } from '../../index-5e194caf.js';
+import { c as ce } from '../../index-ca8e900d.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
-import '../../directive-2bb7789e.js';
-import '../../style-map-c66282ea.js';
-import '../../index-ca8e900d.js';
+import '../lukso-input/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
+import '../../style-map-3669b30c.js';
+import '../../directive-2bb7789e.js';
 import '../lukso-image/index.js';
-import '../../index-8c727f4c.js';
+import '../../index-5e194caf.js';
+import '../../index-dfdfb6fe.js';
+import '../../tailwind-config.js';
+import '../../cn-b54dcc61.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}";
 
@@ -47,15 +50,54 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     this.isSearching = false;
     this.noResultsText = "";
     this.showNoResults = false;
+    this.hideLoading = false;
     this.selected = void 0;
-    this.hasFocus = false;
-    this.hasHighlight = false;
+    this.size = "medium";
     this.isDebouncing = false;
     this.resultsParsed = [];
     this.searchTerm = "";
-    this.defaultInputStyles = `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-10
-    border-solid h-[48px] placeholder:text-neutral-70
-    outline-none transition transition-all duration-150 appearance-none rounded-12`;
+    this.inputStyles = ce({
+      slots: {
+        dropdownWrapper: "bg-neutral-100 border border-neutral-90 shadow-1xl z-50 flex absolute w-full flex-col gap-1 overflow-y-auto max-h-64",
+        loading: "bg-neutral-95 w-full animate-pulse animation-delay-none"
+      },
+      variants: {
+        size: {
+          small: {
+            dropdownWrapper: "rounded-8 p-2 mt-1",
+            loading: "h-7 rounded-4"
+          },
+          medium: {
+            dropdownWrapper: "rounded-12 p-3 mt-2",
+            loading: "h-10 rounded-8"
+          }
+        }
+      }
+    });
+    this.resultStyles = ce({
+      slots: {
+        resultString: "text-neutral-20 cursor-pointer hover:bg-neutral-98",
+        resultProfile: "cursor-pointer hover:bg-neutral-98 flex gap-2 items-center"
+      },
+      variants: {
+        selected: {
+          true: {
+            resultString: "bg-neutral-98",
+            resultProfile: "bg-neutral-98"
+          }
+        },
+        size: {
+          small: {
+            resultString: "paragraph-inter-12-regular rounded-4 py-1 px-2",
+            resultProfile: "rounded-4 py-1 px-2"
+          },
+          medium: {
+            resultString: "paragraph-inter-14-regular rounded-8 p-2",
+            resultProfile: "rounded-8 p-2"
+          }
+        }
+      }
+    });
   }
   connectedCallback() {
     super.connectedCallback();
@@ -84,62 +126,6 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       }
     }
   }
-  inputTemplate() {
-    return x`
-      <input
-        name=${this.name}
-        type="text"
-        .value=${this.value}
-        placeholder=${this.placeholder}
-        ?autofocus=${this.autofocus}
-        autocomplete=${this.autocomplete}
-        id=${this.id || this.name}
-        data-testid=${this.name ? `input-${this.name}` : "input"}
-        data-component="lukso-search"
-        ?readonly=${this.isReadonly ? true : void 0}
-        ?disabled=${this.isDisabled ? true : void 0}
-        class=${customClassMap({
-      [this.defaultInputStyles]: true,
-      [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
-      [this.error === "" ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
-      ["w-full"]: this.isFullWidth,
-      ["w-[350px]"]: !this.isFullWidth,
-      ["cursor-not-allowed text-neutral-60"]: this.isDisabled,
-      ["text-neutral-20"]: !this.isDisabled,
-      ["cursor-not-allowed"]: this.isReadonly,
-      [this.customClass]: !!this.customClass,
-      [this.borderless ? "border-0" : "border"]: true
-    })}
-        @focus=${this.handleFocus}
-        @input=${this.handleSearch}
-        @blur=${this.handleBlur}
-        @click=${this.handleInputClick}
-        @mouseenter=${this.handleMouseOver}
-        @mouseleave=${this.handleMouseOut}
-      />
-    `;
-  }
-  labelTemplate() {
-    return x`
-      <label
-        for=${this.name}
-        class="heading-inter-14-bold text-neutral-20 pb-2 block"
-        >${this.label}</label
-      >
-    `;
-  }
-  descriptionTemplate() {
-    return x`
-      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
-        ${this.description ?? A}
-      </div>
-    `;
-  }
-  errorTemplate() {
-    return x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
-      ${this.error}
-    </div>`;
-  }
   resultsTemplate() {
     const resultTemplates = [];
     this.resultsParsed = JSON.parse(this.results);
@@ -163,66 +149,58 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     )}`;
   }
   loadingTemplate() {
+    const { loading } = this.inputStyles({
+      size: this.size
+    });
     if (this.showNoResults) {
       return x`${this.dropdownWrapperTemplate(x`
         <div role="status" class="flex flex-col gap-1">
-          <div
-            class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
-          ></div>
+          <div class=${loading()}></div>
         </div>
       `)}`;
     }
     if (this.resultsParsed.length === 0 || this.resultsParsed.length > 5) {
       return x`${this.dropdownWrapperTemplate(x`
         <div role="status" class="flex flex-col gap-1">
-          ${[...Array(5)].map(
-        () => x`<div
-                class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
-              ></div>`
-      )}
+          ${[...Array(5)].map(() => x`<div class=${loading()}></div>`)}
         </div>
       `)}`;
     }
     return x`${this.dropdownWrapperTemplate(x`
       <div role="status" class="flex flex-col gap-1">
-        ${this.resultsParsed.map(
-      () => x`<div
-              class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
-            ></div>`
-    )}
+        ${this.resultsParsed.map(() => x`<div class=${loading()}></div>`)}
       </div>
     `)}`;
   }
   dropdownWrapperTemplate(innerTemplate) {
-    return x`<div
-      class="bg-neutral-100 border border-neutral-90 shadow-1xl rounded-12 p-3 mt-2 z-50 flex absolute w-full flex-col gap-1 overflow-y-auto max-h-64"
-    >
-      ${innerTemplate}
-    </div>`;
+    const { dropdownWrapper } = this.inputStyles({
+      size: this.size
+    });
+    return x`<div class=${dropdownWrapper()}>${innerTemplate}</div>`;
   }
   resultStringTemplate(result, index) {
+    const { resultString } = this.resultStyles({
+      selected: this.selected === index + 1,
+      size: this.size
+    });
     return x`<div
       data-id="${result.id}"
       data-index="${index + 1}"
-      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer hover:bg-neutral-98 rounded-8 p-2 ${customClassMap(
-      {
-        ["bg-neutral-98"]: this.selected === index + 1
-      }
-    )}"
+      class=${resultString()}
       @click=${() => this.handleSelect(result)}
     >
       ${result.value}
     </div>`;
   }
   resultProfileTemplate(result, index) {
+    const { resultProfile } = this.resultStyles({
+      selected: this.selected === index + 1,
+      size: this.size
+    });
     return x`<div
       data-id="${result.address}"
       data-index="${index + 1}"
-      class="cursor-pointer hover:bg-neutral-98 rounded-8 p-2 flex gap-2 items-center ${customClassMap(
-      {
-        ["bg-neutral-98"]: this.selected === index + 1
-      }
-    )}"
+      class=${resultProfile()}
       @click=${() => this.handleSelect(result)}
     >
       <lukso-profile
@@ -281,16 +259,8 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     });
     this.dispatchEvent(selectEvent);
   }
-  handleFocus() {
-    if (!this.isReadonly && !this.isDisabled) {
-      this.hasFocus = true;
-      this.hasHighlight = true;
-    }
-  }
   async handleBlur(event) {
     await this.updateComplete;
-    this.hasFocus = false;
-    this.hasHighlight = false;
     const target = event.target;
     const blurEvent = new CustomEvent("on-blur", {
       detail: {
@@ -313,7 +283,6 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       bubbles: false,
       composed: true
     });
-    this.handleSearch(event);
     this.dispatchEvent(clickEvent);
   }
   async searchDebounce(searchTerm) {
@@ -339,40 +308,37 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     const target = event.target;
     this.searchDebounce(target.value);
   }
-  handleMouseOver() {
-    if (!this.isReadonly && !this.isDisabled) {
-      this.hasHighlight = true;
-    }
-  }
-  handleMouseOut() {
-    if (!this.hasFocus) {
-      this.hasHighlight = false;
-    }
-  }
   render() {
     return x`
       <div class="relative w-full">
-        ${this.label ? this.labelTemplate() : A}
-        ${this.description ? this.descriptionTemplate() : A}
-        <div class="flex relative items-center">
-          ${this.inputTemplate()}
-          <lukso-icon
-            name="search"
-            class="absolute right-0 mr-3 ${customClassMap({
-      ["opacity-60 cursor-not-allowed"]: this.isDisabled,
-      ["cursor-not-allowed"]: this.isReadonly
-    })}"
-            @mouseenter=${this.handleMouseOver}
-          ></lukso-icon>
-        </div>
+        <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="search"
+          ?autofocus=${this.autofocus}
+          ?readonly=${this.isReadonly}
+          ?disabled=${this.isDisabled}
+          ?is-full-width=${this.isFullWidth}
+          @on-input=${this.handleSearch}
+          @on-blur=${this.handleBlur}
+          @on-input-click=${this.handleInputClick}
+        ></lukso-input>
         <!-- results dropdown -->
         ${this.results && !(this.isSearching || this.isDebouncing) ? this.resultsTemplate() : A}
         <!-- no results dropdown -->
         ${this.showNoResults && !(this.isSearching || this.isDebouncing) ? this.noResultsTemplate() : A}
         <!-- loading dropdown -->
-        ${this.value && (this.isSearching || this.isDebouncing) ? this.loadingTemplate() : A}
-        <!-- error -->
-        ${this.error ? this.errorTemplate() : A}
+        ${!this.hideLoading && this.value && (this.isSearching || this.isDebouncing) ? this.loadingTemplate() : A}
       </div>
     `;
   }
@@ -434,15 +400,15 @@ __decorateClass([
 __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: Number })
 ], LuksoSearch.prototype, "selected", 2);
 __decorateClass([
-  t()
-], LuksoSearch.prototype, "hasFocus", 2);
-__decorateClass([
-  t()
-], LuksoSearch.prototype, "hasHighlight", 2);
+  n({ type: String })
+], LuksoSearch.prototype, "size", 2);
 __decorateClass([
   t()
 ], LuksoSearch.prototype, "isDebouncing", 2);

package/dist/components/lukso-search/lukso-search.stories.d.ts

@@ -12,4 +12,6 @@ export declare const SearchingState: any;
 export declare const NoResults: any;
 /** Example of selected option.  */
 export declare const SelectedOption: any;
+/** Example of small search.  */
+export declare const Small: any;
 //# sourceMappingURL=lukso-search.stories.d.ts.map

package/dist/components/lukso-search/lukso-search.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-search.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/lukso-search.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB,mHAAmH;AACnH,QAAA,MAAM,IAAI,EAAE,IA6OX,CAAA;AAED,eAAe,IAAI,CAAA;AA8EnB,+CAA+C;AAC/C,eAAO,MAAM,aAAa,KAAoB,CAAA;AAM9C,gDAAgD;AAChD,eAAO,MAAM,aAAa,KAAoB,CAAA;AAsB9C,0FAA0F;AAC1F,eAAO,MAAM,cAAc,KAAoB,CAAA;AAQ/C,mJAAmJ;AACnJ,eAAO,MAAM,SAAS,KAAoB,CAAA;AAQ1C,mCAAmC;AACnC,eAAO,MAAM,cAAc,KAAoB,CAAA"}
+{"version":3,"file":"lukso-search.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/lukso-search.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB,mHAAmH;AACnH,QAAA,MAAM,IAAI,EAAE,IA4QX,CAAA;AAED,eAAe,IAAI,CAAA;AAoFnB,+CAA+C;AAC/C,eAAO,MAAM,aAAa,KAAoB,CAAA;AAM9C,gDAAgD;AAChD,eAAO,MAAM,aAAa,KAAoB,CAAA;AAsB9C,0FAA0F;AAC1F,eAAO,MAAM,cAAc,KAAoB,CAAA;AAQ/C,mJAAmJ;AACnJ,eAAO,MAAM,SAAS,KAAoB,CAAA;AAQ1C,mCAAmC;AACnC,eAAO,MAAM,cAAc,KAAoB,CAAA;AAM/C,gCAAgC;AAChC,eAAO,MAAM,KAAK,KAAoB,CAAA"}