@lukso/web-components 1.74.3 → 1.75.0

package/dist/components/lukso-input/index.cjs

@@ -51,6 +51,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     this.borderless = false;
     this.size = "medium";
     this.rightIcon = "";
+    this.isRightIconClickable = false;
     this.hasHocus = false;
     this.hasHighlight = false;
     this.inputStyles = index.ce({
@@ -115,6 +116,9 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
             unit: "h-[48px] paragraph-inter-12-regular px-3.5 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
             rightIcon: "right-3"
           }
+        },
+        isRightIconClickable: {
+          true: { rightIcon: "cursor-pointer" }
         }
       },
       compoundVariants: [
@@ -224,6 +228,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
       name=${this.rightIcon}
       size=${this.size}
       class=${styles}
+      @click=${this.handleRightIconClick}
     ></lukso-icon>`;
   }
   handleFocus() {
@@ -348,6 +353,17 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     });
     this.dispatchEvent(clickEvent);
   }
+  handleRightIconClick() {
+    const input = this.shadowRoot?.querySelector("input");
+    const clickEvent = new CustomEvent("on-right-icon-click", {
+      detail: {
+        input
+      },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(clickEvent);
+  }
   render() {
     const { wrapper, input, unit, rightIcon } = this.inputStyles({
       hasError: this.error !== "",
@@ -358,7 +374,8 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
       isFullWidth: this.isFullWidth,
       hasUnit: this.unit !== "",
       size: this.size,
-      hasRightIcon: this.rightIcon !== ""
+      hasRightIcon: this.rightIcon !== "",
+      isRightIconClickable: this.isRightIconClickable
     });
     return shared_tailwindElement_index.x`
       <div class="w-[inherit]">
@@ -442,6 +459,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.n({ type: String, attribute: "right-icon" })
 ], exports.LuksoInput.prototype, "rightIcon", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "is-right-icon-clickable" })
+], exports.LuksoInput.prototype, "isRightIconClickable", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoInput.prototype, "hasHocus", 2);

package/dist/components/lukso-input/index.d.ts

@@ -23,6 +23,7 @@ export declare class LuksoInput extends LuksoInput_base {
     borderless: boolean;
     size: InputSize;
     rightIcon: string;
+    isRightIconClickable: boolean;
     private hasHocus;
     private hasHighlight;
     private inputStyles;
@@ -43,6 +44,7 @@ export declare class LuksoInput extends LuksoInput_base {
     private handleMouseOut;
     private handleUnitClick;
     private handleInputClick;
+    private handleRightIconClick;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/components/lukso-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/index.ts"],"names":[],"mappings":"AAMA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAE/C,qBACa,UAAW,SAAQ,eAA4B;IAE1D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,IAAI,SAAS;IAGb,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAO;IAGnB,EAAE,SAAK;IAGP,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,UAAU,UAAQ;IAGlB,IAAI,EAAE,SAAS,CAAW;IAG1B,SAAS,SAAK;IAGd,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,WAAW,CAqGjB;IAGF,aAAa,CAAC,MAAM,EAAE,MAAM;IAgC5B,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY,CAAC,MAAM,EAAE,MAAM;IAW3B,iBAAiB,CAAC,MAAM,EAAE,MAAM;IAQhC,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAcX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;YAaT,gBAAgB;IAc9B,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/index.ts"],"names":[],"mappings":"AAMA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAE/C,qBACa,UAAW,SAAQ,eAA4B;IAE1D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,IAAI,SAAS;IAGb,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAO;IAGnB,EAAE,SAAK;IAGP,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,UAAU,UAAQ;IAGlB,IAAI,EAAE,SAAS,CAAW;IAG1B,SAAS,SAAK;IAGd,oBAAoB,UAAQ;IAG5B,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,WAAW,CAwGjB;IAGF,aAAa,CAAC,MAAM,EAAE,MAAM;IAgC5B,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY,CAAC,MAAM,EAAE,MAAM;IAW3B,iBAAiB,CAAC,MAAM,EAAE,MAAM;IAShC,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAcX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;YAaT,gBAAgB;IAc9B,OAAO,CAAC,oBAAoB;IAY5B,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

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

@@ -47,6 +47,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
     this.borderless = false;
     this.size = "medium";
     this.rightIcon = "";
+    this.isRightIconClickable = false;
     this.hasHocus = false;
     this.hasHighlight = false;
     this.inputStyles = ce({
@@ -111,6 +112,9 @@ let LuksoInput = class extends TailwindStyledElement(style) {
             unit: "h-[48px] paragraph-inter-12-regular px-3.5 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
             rightIcon: "right-3"
           }
+        },
+        isRightIconClickable: {
+          true: { rightIcon: "cursor-pointer" }
         }
       },
       compoundVariants: [
@@ -220,6 +224,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
       name=${this.rightIcon}
       size=${this.size}
       class=${styles}
+      @click=${this.handleRightIconClick}
     ></lukso-icon>`;
   }
   handleFocus() {
@@ -344,6 +349,17 @@ let LuksoInput = class extends TailwindStyledElement(style) {
     });
     this.dispatchEvent(clickEvent);
   }
+  handleRightIconClick() {
+    const input = this.shadowRoot?.querySelector("input");
+    const clickEvent = new CustomEvent("on-right-icon-click", {
+      detail: {
+        input
+      },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(clickEvent);
+  }
   render() {
     const { wrapper, input, unit, rightIcon } = this.inputStyles({
       hasError: this.error !== "",
@@ -354,7 +370,8 @@ let LuksoInput = class extends TailwindStyledElement(style) {
       isFullWidth: this.isFullWidth,
       hasUnit: this.unit !== "",
       size: this.size,
-      hasRightIcon: this.rightIcon !== ""
+      hasRightIcon: this.rightIcon !== "",
+      isRightIconClickable: this.isRightIconClickable
     });
     return x`
       <div class="w-[inherit]">
@@ -438,6 +455,9 @@ __decorateClass([
 __decorateClass([
   n({ type: String, attribute: "right-icon" })
 ], LuksoInput.prototype, "rightIcon", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-right-icon-clickable" })
+], LuksoInput.prototype, "isRightIconClickable", 2);
 __decorateClass([
   t()
 ], LuksoInput.prototype, "hasHocus", 2);

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-input.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/lukso-input.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IA8PX,CAAA;AAED,eAAe,IAAI,CAAA;AA2DnB,8CAA8C;AAC9C,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,gDAAgD;AAChD,eAAO,MAAM,eAAe,KAAoB,CAAA;AAKhD,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,uDAAuD;AACvD,eAAO,MAAM,mBAAmB,KAAoB,CAAA;AAMpD,qCAAqC;AACrC,eAAO,MAAM,UAAU,KAAoB,CAAA;AAO3C,oCAAoC;AACpC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAKrC,+FAA+F;AAC/F,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,gEAAgE;AAChE,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,oMAAoM;AACpM,eAAO,MAAM,WAAW,KAAoB,CAAA;AAO5C,sEAAsE;AACtE,eAAO,MAAM,UAAU,KAAoB,CAAA;AAM3C,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,gDAAgD;AAChD,eAAO,MAAM,SAAS,KAAoB,CAAA"}
+{"version":3,"file":"lukso-input.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/lukso-input.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAiRX,CAAA;AAED,eAAe,IAAI,CAAA;AA+DnB,8CAA8C;AAC9C,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,gDAAgD;AAChD,eAAO,MAAM,eAAe,KAAoB,CAAA;AAKhD,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,uDAAuD;AACvD,eAAO,MAAM,mBAAmB,KAAoB,CAAA;AAMpD,qCAAqC;AACrC,eAAO,MAAM,UAAU,KAAoB,CAAA;AAO3C,oCAAoC;AACpC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAKrC,+FAA+F;AAC/F,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,gEAAgE;AAChE,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,oMAAoM;AACpM,eAAO,MAAM,WAAW,KAAoB,CAAA;AAO5C,sEAAsE;AACtE,eAAO,MAAM,UAAU,KAAoB,CAAA;AAM3C,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,gDAAgD;AAChD,eAAO,MAAM,SAAS,KAAoB,CAAA"}

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

@@ -55,6 +55,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     this.noResultsText = "";
     this.showNoResults = false;
     this.hideLoading = false;
+    this.hasReset = false;
     this.selected = void 0;
     this.size = "medium";
     this.isDebouncing = false;
@@ -289,6 +290,23 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     });
     this.dispatchEvent(clickEvent);
   }
+  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;
@@ -328,7 +346,8 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
           id=${this.id}
           size=${this.size}
           data-component="lukso-search"
-          right-icon="search"
+          right-icon="${this.hasReset && this.value ? "close-sm" : "search"}"
+          ?is-right-icon-clickable=${this.hasReset && this.value}
           ?autofocus=${this.autofocus}
           ?readonly=${this.isReadonly}
           ?disabled=${this.isDisabled}
@@ -336,6 +355,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
           @on-input=${this.handleSearch}
           @on-blur=${this.handleBlur}
           @on-input-click=${this.handleInputClick}
+          @on-right-icon-click=${this.handleReset}
         ></lukso-input>
         <!-- results dropdown -->
         ${this.results && !(this.isSearching || this.isDebouncing) ? this.resultsTemplate() : shared_tailwindElement_index.A}
@@ -407,6 +427,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.n({ type: Boolean, attribute: "hide-loading" })
 ], exports.LuksoSearch.prototype, "hideLoading", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "has-reset" })
+], exports.LuksoSearch.prototype, "hasReset", 2);
 __decorateClass([
   queryAssignedElements.n({ type: Number })
 ], exports.LuksoSearch.prototype, "selected", 2);

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

@@ -32,6 +32,7 @@ export declare class LuksoSearch extends LuksoSearch_base {
     noResultsText: string;
     showNoResults: boolean;
     hideLoading: boolean;
+    hasReset: boolean;
     selected: any;
     size: InputSize;
     private isDebouncing;
@@ -54,6 +55,7 @@ export declare class LuksoSearch extends LuksoSearch_base {
     private handleSelect;
     private handleBlur;
     private handleInputClick;
+    private handleReset;
     private searchDebounce;
     private handleSearch;
     render(): TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAiB,MAAM,KAAK,CAAA;AAK7E,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,0BAA0B,CAAA;AAGjC,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;;AAEnE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAQ;IAGpB,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,SAAM;IAGd,WAAW,UAAQ;IAGnB,aAAa,SAAK;IAGlB,aAAa,UAAQ;IAGrB,WAAW,UAAQ;IAGnB,QAAQ,MAAY;IAGpB,IAAI,EAAE,SAAS,CAAW;IAG1B,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAgB;IAGrC,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,WAAW,CAkBjB;IAEF,OAAO,CAAC,YAAY,CAwBlB;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwBlD,eAAe;IAqBf,iBAAiB;IAQjB,eAAe;IA+Bf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAgB9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;YA4BlD,0BAA0B;YAU1B,qBAAqB;YAiCrB,YAAY;YAYZ,UAAU;YAcV,gBAAgB;YAchB,cAAc;IAiB5B,OAAO,CAAC,YAAY;IAUpB,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAiB,MAAM,KAAK,CAAA;AAK7E,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,0BAA0B,CAAA;AAGjC,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;;AAEnE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAQ;IAGpB,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,SAAM;IAGd,WAAW,UAAQ;IAGnB,aAAa,SAAK;IAGlB,aAAa,UAAQ;IAGrB,WAAW,UAAQ;IAGnB,QAAQ,UAAQ;IAGhB,QAAQ,MAAY;IAGpB,IAAI,EAAE,SAAS,CAAW;IAG1B,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAgB;IAGrC,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,WAAW,CAkBjB;IAEF,OAAO,CAAC,YAAY,CAwBlB;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwBlD,eAAe;IAqBf,iBAAiB;IAQjB,eAAe;IA+Bf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAgB9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;YA4BlD,0BAA0B;YAU1B,qBAAqB;YAiCrB,YAAY;YAYZ,UAAU;YAcV,gBAAgB;YAchB,WAAW;YAmBX,cAAc;IAiB5B,OAAO,CAAC,YAAY;IAUpB,MAAM;CA4CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -51,6 +51,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     this.noResultsText = "";
     this.showNoResults = false;
     this.hideLoading = false;
+    this.hasReset = false;
     this.selected = void 0;
     this.size = "medium";
     this.isDebouncing = false;
@@ -285,6 +286,23 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     });
     this.dispatchEvent(clickEvent);
   }
+  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;
@@ -324,7 +342,8 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
           id=${this.id}
           size=${this.size}
           data-component="lukso-search"
-          right-icon="search"
+          right-icon="${this.hasReset && this.value ? "close-sm" : "search"}"
+          ?is-right-icon-clickable=${this.hasReset && this.value}
           ?autofocus=${this.autofocus}
           ?readonly=${this.isReadonly}
           ?disabled=${this.isDisabled}
@@ -332,6 +351,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
           @on-input=${this.handleSearch}
           @on-blur=${this.handleBlur}
           @on-input-click=${this.handleInputClick}
+          @on-right-icon-click=${this.handleReset}
         ></lukso-input>
         <!-- results dropdown -->
         ${this.results && !(this.isSearching || this.isDebouncing) ? this.resultsTemplate() : A}
@@ -403,6 +423,9 @@ __decorateClass([
 __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: Number })
 ], LuksoSearch.prototype, "selected", 2);

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,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"}
+{"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,IA+RX,CAAA;AAED,eAAe,IAAI,CAAA;AAwFnB,+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"}

package/dist/components/lukso-select/index.cjs

@@ -112,10 +112,10 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     });
     this.optionsStyles = index.ce({
       base: `text-neutral-20 cursor-pointer
-      whitespace-nowrap hover:bg-neutral-98 flex items-center truncate`,
+      whitespace-nowrap flex items-center truncate`,
       variants: {
         isSelected: {
-          true: "bg-neutral-95 hover:bg-neutral-95"
+          true: "bg-neutral-95"
         },
         isActive: {
           true: "bg-neutral-98"
@@ -131,7 +131,8 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
           true: "opacity-60 cursor-not-allowed"
         },
         isReadonly: {
-          true: "cursor-not-allowed"
+          true: "cursor-not-allowed",
+          false: "hover:bg-neutral-98"
         }
       },
       compoundVariants: [
@@ -144,6 +145,11 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
           isGroup: true,
           size: "medium",
           class: "pl-4"
+        },
+        {
+          isReadonly: false,
+          isSelected: true,
+          class: "hover:bg-neutral-95"
         }
       ]
     });

package/dist/components/lukso-select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAiB,MAAM,KAAK,CAAA;AAK7E,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AAIpC,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,YAAY,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,yBAAyB,CAAA;;AAE7B,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,MAAY;IAGpB,MAAM,UAAQ;IAGd,OAAO,UAAQ;IAGf,WAAW,UAAQ;IAGnB,OAAO,UAAQ;IAGf,IAAI,EAAE,SAAS,CAAW;IAG1B,oBAAoB,UAAQ;IAG5B,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,WAAW,CAAwC;;IAU3D,OAAO,CAAC,WAAW,CAyBjB;IAEF,OAAO,CAAC,aAAa,CAanB;IAEF,OAAO,CAAC,qBAAqB,CAe3B;IAEF,OAAO,CAAC,aAAa,CAoCnB;IAEF,OAAO,CAAC,UAAU,CAchB;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IA0ClD,aAAa;IA4Bb,8BAA8B;IAS9B,aAAa;IAQb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAoBf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IAWxD,2BAA2B,CACzB,MAAM,EAAE,yBAAyB,EACjC,KAAK,EAAE,MAAM;IAef,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAsB9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;IAqBhE,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,qBAAqB;IA2D7B,OAAO,CAAC,0BAA0B;YAUpB,qBAAqB;YAqCrB,YAAY;YAiBZ,UAAU;IAcxB,OAAO,CAAC,WAAW;IAQnB,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAiB,MAAM,KAAK,CAAA;AAK7E,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AAIpC,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,YAAY,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,yBAAyB,CAAA;;AAE7B,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,MAAY;IAGpB,MAAM,UAAQ;IAGd,OAAO,UAAQ;IAGf,WAAW,UAAQ;IAGnB,OAAO,UAAQ;IAGf,IAAI,EAAE,SAAS,CAAW;IAG1B,oBAAoB,UAAQ;IAG5B,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,WAAW,CAAwC;;IAU3D,OAAO,CAAC,WAAW,CAyBjB;IAEF,OAAO,CAAC,aAAa,CAanB;IAEF,OAAO,CAAC,qBAAqB,CAe3B;IAEF,OAAO,CAAC,aAAa,CA0CnB;IAEF,OAAO,CAAC,UAAU,CAchB;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IA0ClD,aAAa;IA4Bb,8BAA8B;IAS9B,aAAa;IAQb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAoBf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IAWxD,2BAA2B,CACzB,MAAM,EAAE,yBAAyB,EACjC,KAAK,EAAE,MAAM;IAef,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAsB9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;IAqBhE,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,qBAAqB;IA2D7B,OAAO,CAAC,0BAA0B;YAUpB,qBAAqB;YAqCrB,YAAY;YAiBZ,UAAU;IAcxB,OAAO,CAAC,WAAW;IAQnB,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -108,10 +108,10 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     });
     this.optionsStyles = ce({
       base: `text-neutral-20 cursor-pointer
-      whitespace-nowrap hover:bg-neutral-98 flex items-center truncate`,
+      whitespace-nowrap flex items-center truncate`,
       variants: {
         isSelected: {
-          true: "bg-neutral-95 hover:bg-neutral-95"
+          true: "bg-neutral-95"
         },
         isActive: {
           true: "bg-neutral-98"
@@ -127,7 +127,8 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
           true: "opacity-60 cursor-not-allowed"
         },
         isReadonly: {
-          true: "cursor-not-allowed"
+          true: "cursor-not-allowed",
+          false: "hover:bg-neutral-98"
         }
       },
       compoundVariants: [
@@ -140,6 +141,11 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
           isGroup: true,
           size: "medium",
           class: "pl-4"
+        },
+        {
+          isReadonly: false,
+          isSelected: true,
+          class: "hover:bg-neutral-95"
         }
       ]
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.74.3",
+  "version": "1.75.0",
   "type": "module",
   "files": [
     "dist",