@lukso/web-components 1.43.0 → 1.45.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 const state = require('../../state-51b50a6b.cjs');
 const index = require('../../index-e9668573.cjs');
@@ -10,7 +10,7 @@ require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-c00f9dd9.cjs');
+require('../../style-map-f36ae803.cjs');
 
 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,6 +47,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     this.isSearching = false;
     this.noResultsText = "";
     this.showNoResults = false;
+    this.selected = void 0;
     this.hasFocus = false;
     this.hasHighlight = false;
     this.isDebouncing = false;
@@ -56,6 +57,20 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     border-solid h-[48px] placeholder:text-neutral-70
     outline-none transition transition-all duration-150 appearance-none rounded-12`;
   }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("selected")) {
+      const selectedOption = this.shadowRoot?.querySelector(
+        `[data-index="${changedProperties.get("selected")}"`
+      );
+      if (selectedOption) {
+        selectedOption.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "nearest"
+        });
+      }
+    }
+  }
   inputTemplate() {
     return shared_tailwindElement_index.x`
       <input
@@ -84,6 +99,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
         @focus=${this.handleFocus}
         @input=${this.handleSearch}
         @blur=${this.handleBlur}
+        @click=${this.handleInputClick}
         @mouseenter=${this.handleMouseOver}
         @mouseleave=${this.handleMouseOut}
       />
@@ -114,10 +130,11 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     const resultTemplates = [];
     this.resultsParsed = JSON.parse(this.results);
     for (const result of Object.entries(this.resultsParsed)) {
+      const index = Number(result[0]);
       if ("value" in result[1]) {
-        resultTemplates.push(this.resultStringTemplate(result[1]));
+        resultTemplates.push(this.resultStringTemplate(result[1], index));
       } else if ("address" in result[1]) {
-        resultTemplates.push(this.resultProfileTemplate(result[1]));
+        resultTemplates.push(this.resultProfileTemplate(result[1], index));
       } else {
         console.error("Unknown result type", result);
       }
@@ -169,19 +186,29 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
       ${innerTemplate}
     </div>`;
   }
-  resultStringTemplate(result) {
+  resultStringTemplate(result, index$1) {
     return shared_tailwindElement_index.x`<div
       data-id="${result.id}"
-      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer hover:bg-neutral-98 rounded-8 p-2"
+      data-index="${index$1 + 1}"
+      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer hover:bg-neutral-98 rounded-8 p-2 ${index.customClassMap(
+      {
+        ["bg-neutral-98"]: this.selected === index$1 + 1
+      }
+    )}'"
       @click=${() => this.handleSelect(result)}
     >
       ${result.value}
     </div>`;
   }
-  resultProfileTemplate(result) {
+  resultProfileTemplate(result, index$1) {
     return shared_tailwindElement_index.x`<div
       data-id="${result.address}"
-      class="cursor-pointer hover:bg-neutral-98 rounded-8 p-2 flex gap-2 items-center"
+      data-index="${index$1 + 1}"
+      class="cursor-pointer hover:bg-neutral-98 rounded-8 p-2 flex gap-2 items-center ${index.customClassMap(
+      {
+        ["bg-neutral-98"]: this.selected === index$1 + 1
+      }
+    )}"
       @click=${() => this.handleSelect(result)}
     >
       <lukso-profile
@@ -199,7 +226,8 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
       ></lukso-username>
     </div>`;
   }
-  handleSelect(result) {
+  async handleSelect(result) {
+    await this.updateComplete;
     const selectEvent = new CustomEvent("on-select", {
       detail: {
         value: result
@@ -215,7 +243,8 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
       this.hasHighlight = true;
     }
   }
-  handleBlur(event) {
+  async handleBlur(event) {
+    await this.updateComplete;
     this.hasFocus = false;
     this.hasHighlight = false;
     const target = event.target;
@@ -229,7 +258,21 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     });
     this.dispatchEvent(blurEvent);
   }
-  searchDebounce(searchTerm) {
+  async handleInputClick(event) {
+    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 searchDebounce(searchTerm) {
+    await this.updateComplete;
     this.value = searchTerm;
     this.debounceTimer = setTimeout(() => {
       const changeEvent = new CustomEvent("on-search", {
@@ -346,6 +389,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.e({ type: Boolean, attribute: "show-no-results" })
 ], exports.LuksoSearch.prototype, "showNoResults", 2);
+__decorateClass([
+  queryAssignedElements.e({ type: Number })
+], exports.LuksoSearch.prototype, "selected", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoSearch.prototype, "hasFocus", 2);

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

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { Address } from '../../shared/types';
 export type SearchStringResult = {
     id?: string;
@@ -31,6 +31,7 @@ export declare class LuksoSearch extends LuksoSearch_base {
     isSearching: boolean;
     noResultsText: string;
     showNoResults: boolean;
+    selected: any;
     private hasFocus;
     private hasHighlight;
     private isDebouncing;
@@ -38,6 +39,7 @@ export declare class LuksoSearch extends LuksoSearch_base {
     private resultsParsed;
     private searchTerm;
     private defaultInputStyles;
+    willUpdate(changedProperties: PropertyValues<this>): void;
     inputTemplate(): TemplateResult<1>;
     labelTemplate(): TemplateResult<1>;
     descriptionTemplate(): TemplateResult<1>;
@@ -46,11 +48,12 @@ export declare class LuksoSearch extends LuksoSearch_base {
     noResultsTemplate(): TemplateResult<1>;
     loadingTemplate(): TemplateResult<1>;
     dropdownWrapperTemplate(innerTemplate: TemplateResult<1> | TemplateResult<1>[]): TemplateResult<1>;
-    resultStringTemplate(result: SearchStringResult): TemplateResult<1>;
-    resultProfileTemplate(result: SearchProfileResult): TemplateResult<1>;
+    resultStringTemplate(result: SearchStringResult, index: number): TemplateResult<1>;
+    resultProfileTemplate(result: SearchProfileResult, index: number): TemplateResult<1>;
     private handleSelect;
     private handleFocus;
     private handleBlur;
+    private handleInputClick;
     private searchDebounce;
     private handleSearch;
     private handleMouseOver;

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,cAAc,EAAiB,MAAM,KAAK,CAAA;AAMnD,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,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,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAgB;IAGrC,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,kBAAkB,CAEuD;IAEjF,aAAa;IAoCb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAmBf,iBAAiB;IAQjB,eAAe;IAuCf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB;IAU/C,qBAAqB,CAAC,MAAM,EAAE,mBAAmB;IAsBjD,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,MAAM;CAiCP;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,cAAc,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAA;AAMnE,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,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,QAAQ,MAAY;IAGpB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAgB;IAGrC,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,kBAAkB,CAEuD;IAEjF,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAiBlD,aAAa;IAqCb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAqBf,iBAAiB;IAQjB,eAAe;IAuCf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAe9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;YA2BlD,YAAY;IAY1B,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,gBAAgB;YAchB,cAAc;IAiB5B,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-5b6b1166.js';
+import { T as TailwindStyledElement, x, A } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
 import { t } from '../../state-02a92ffa.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
@@ -6,7 +6,7 @@ import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-6cdbbb8b.js';
+import '../../style-map-bcba103a.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}";
 
@@ -43,6 +43,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     this.isSearching = false;
     this.noResultsText = "";
     this.showNoResults = false;
+    this.selected = void 0;
     this.hasFocus = false;
     this.hasHighlight = false;
     this.isDebouncing = false;
@@ -52,6 +53,20 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     border-solid h-[48px] placeholder:text-neutral-70
     outline-none transition transition-all duration-150 appearance-none rounded-12`;
   }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("selected")) {
+      const selectedOption = this.shadowRoot?.querySelector(
+        `[data-index="${changedProperties.get("selected")}"`
+      );
+      if (selectedOption) {
+        selectedOption.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "nearest"
+        });
+      }
+    }
+  }
   inputTemplate() {
     return x`
       <input
@@ -80,6 +95,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
         @focus=${this.handleFocus}
         @input=${this.handleSearch}
         @blur=${this.handleBlur}
+        @click=${this.handleInputClick}
         @mouseenter=${this.handleMouseOver}
         @mouseleave=${this.handleMouseOut}
       />
@@ -110,10 +126,11 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     const resultTemplates = [];
     this.resultsParsed = JSON.parse(this.results);
     for (const result of Object.entries(this.resultsParsed)) {
+      const index = Number(result[0]);
       if ("value" in result[1]) {
-        resultTemplates.push(this.resultStringTemplate(result[1]));
+        resultTemplates.push(this.resultStringTemplate(result[1], index));
       } else if ("address" in result[1]) {
-        resultTemplates.push(this.resultProfileTemplate(result[1]));
+        resultTemplates.push(this.resultProfileTemplate(result[1], index));
       } else {
         console.error("Unknown result type", result);
       }
@@ -165,19 +182,29 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       ${innerTemplate}
     </div>`;
   }
-  resultStringTemplate(result) {
+  resultStringTemplate(result, index) {
     return x`<div
       data-id="${result.id}"
-      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer hover:bg-neutral-98 rounded-8 p-2"
+      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
+      }
+    )}'"
       @click=${() => this.handleSelect(result)}
     >
       ${result.value}
     </div>`;
   }
-  resultProfileTemplate(result) {
+  resultProfileTemplate(result, index) {
     return x`<div
       data-id="${result.address}"
-      class="cursor-pointer hover:bg-neutral-98 rounded-8 p-2 flex gap-2 items-center"
+      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
+      }
+    )}"
       @click=${() => this.handleSelect(result)}
     >
       <lukso-profile
@@ -195,7 +222,8 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       ></lukso-username>
     </div>`;
   }
-  handleSelect(result) {
+  async handleSelect(result) {
+    await this.updateComplete;
     const selectEvent = new CustomEvent("on-select", {
       detail: {
         value: result
@@ -211,7 +239,8 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       this.hasHighlight = true;
     }
   }
-  handleBlur(event) {
+  async handleBlur(event) {
+    await this.updateComplete;
     this.hasFocus = false;
     this.hasHighlight = false;
     const target = event.target;
@@ -225,7 +254,21 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     });
     this.dispatchEvent(blurEvent);
   }
-  searchDebounce(searchTerm) {
+  async handleInputClick(event) {
+    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 searchDebounce(searchTerm) {
+    await this.updateComplete;
     this.value = searchTerm;
     this.debounceTimer = setTimeout(() => {
       const changeEvent = new CustomEvent("on-search", {
@@ -342,6 +385,9 @@ __decorateClass([
 __decorateClass([
   e({ type: Boolean, attribute: "show-no-results" })
 ], LuksoSearch.prototype, "showNoResults", 2);
+__decorateClass([
+  e({ type: Number })
+], LuksoSearch.prototype, "selected", 2);
 __decorateClass([
   t()
 ], LuksoSearch.prototype, "hasFocus", 2);

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

@@ -10,4 +10,6 @@ export declare const ProfileSearch: any;
 export declare const SearchingState: any;
 /** To show that search hes no results add `show-no-results` attribute. You can also customize no results text with `no-results-text` attribute. */
 export declare const NoResults: any;
+/** Example of selected option.  */
+export declare const SelectedOption: 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":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAEhB,mHAAmH;AACnH,QAAA,MAAM,IAAI,EAAE,IAsOX,CAAA;AAED,eAAe,IAAI,CAAA;AA4EnB,+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"}
+{"version":3,"file":"lukso-search.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/lukso-search.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,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"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -32,8 +32,8 @@ exports.LuksoShare = class LuksoShare extends shared_tailwindElement_index.Tailw
       "medium",
       "github"
     ];
-    this.urls = {
-      twitter: "https://twitter.com/lukso_io",
+    this.defaultProviderLinks = {
+      twitter: "https://twitter.com/ERC725Account",
       instagram: "https://www.instagram.com/lukso",
       linkedin: "https://linkedin.com/company/lukso",
       telegram: "https://t.me/LUKSO_News",
@@ -54,7 +54,13 @@ exports.LuksoShare = class LuksoShare extends shared_tailwindElement_index.Tailw
   render() {
     const linkTemplates = [];
     for (const provider of this.providers) {
-      linkTemplates.push(this.linkTemplate(provider, this.urls[provider]));
+      if (typeof provider === "string") {
+        linkTemplates.push(
+          this.linkTemplate(provider, this.defaultProviderLinks[provider])
+        );
+      } else {
+        linkTemplates.push(this.linkTemplate(provider.name, provider.url));
+      }
     }
     return shared_tailwindElement_index.x`<div
       class="grid gap-2 sm:gap-4"

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

@@ -1,14 +1,18 @@
-export type Provider = 'twitter' | 'instagram' | 'linkedin' | 'telegram' | 'discord' | 'reddit' | 'medium' | 'github';
+export type ProviderName = 'twitter' | 'instagram' | 'linkedin' | 'telegram' | 'discord' | 'reddit' | 'medium' | 'github';
 export type Url = `https://${string}`;
 export type ProviderLinks = {
-    [key in Provider]: Url;
+    [key in ProviderName]: Url;
+};
+export type ProviderObject = {
+    name: ProviderName;
+    url: Url;
 };
 declare const LuksoShare_base: typeof import("lit").LitElement;
 export declare class LuksoShare extends LuksoShare_base {
     customStyle: string;
-    providers: Provider[];
-    private urls;
-    linkTemplate(name: Provider, url: Url): import("lit").TemplateResult<1>;
+    providers: ProviderName[] | ProviderObject[];
+    private defaultProviderLinks;
+    linkTemplate(name: ProviderName, url: Url): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-share/index.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,QAAQ,CAAA;AAEZ,MAAM,MAAM,GAAG,GAAG,WAAW,MAAM,EAAE,CAAA;AAErC,MAAM,MAAM,aAAa,GAAG;KACzB,GAAG,IAAI,QAAQ,GAAG,GAAG;CACvB,CAAA;;AAED,qBACa,UAAW,SAAQ,eAA4B;IAE1D,WAAW,SAAK;IAGhB,SAAS,EAAE,QAAQ,EAAE,CASpB;IAED,OAAO,CAAC,IAAI,CASX;IAED,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG;IASrC,MAAM;CAeP;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-share/index.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,QAAQ,CAAA;AAEZ,MAAM,MAAM,GAAG,GAAG,WAAW,MAAM,EAAE,CAAA;AAErC,MAAM,MAAM,aAAa,GAAG;KACzB,GAAG,IAAI,YAAY,GAAG,GAAG;CAC3B,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAA;IAClB,GAAG,EAAE,GAAG,CAAA;CACT,CAAA;;AAED,qBACa,UAAW,SAAQ,eAA4B;IAE1D,WAAW,SAAK;IAGhB,SAAS,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAS3C;IAED,OAAO,CAAC,oBAAoB,CAS3B;IAED,YAAY,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG;IASzC,MAAM;CAqBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-5b6b1166.js';
+import { T as TailwindStyledElement, x } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -28,8 +28,8 @@ let LuksoShare = class extends TailwindStyledElement(style) {
       "medium",
       "github"
     ];
-    this.urls = {
-      twitter: "https://twitter.com/lukso_io",
+    this.defaultProviderLinks = {
+      twitter: "https://twitter.com/ERC725Account",
       instagram: "https://www.instagram.com/lukso",
       linkedin: "https://linkedin.com/company/lukso",
       telegram: "https://t.me/LUKSO_News",
@@ -50,7 +50,13 @@ let LuksoShare = class extends TailwindStyledElement(style) {
   render() {
     const linkTemplates = [];
     for (const provider of this.providers) {
-      linkTemplates.push(this.linkTemplate(provider, this.urls[provider]));
+      if (typeof provider === "string") {
+        linkTemplates.push(
+          this.linkTemplate(provider, this.defaultProviderLinks[provider])
+        );
+      } else {
+        linkTemplates.push(this.linkTemplate(provider.name, provider.url));
+      }
     }
     return x`<div
       class="grid gap-2 sm:gap-4"

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

@@ -8,4 +8,14 @@ export declare const Default: any;
 export declare const CustomStyle: any;
 /** With `providers` attribute pick only providers that you want, you can also control order this way. Use `JSON.stringify` to encode `array`. */
 export declare const LimitProviders: any;
+/** If you want overwrite default provider link instead of using just `ProviderName` then pass it as the `ProviderObject`:
+ *
+```json
+{
+  name: 'twitter',
+  url: 'https://twitter.com/lukso_io'
+}
+```
+*/
+export declare const CustomProviderLink: any;
 //# sourceMappingURL=lukso-share.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-share.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-share/lukso-share.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB,8DAA8D;AAC9D,QAAA,MAAM,IAAI,EAAE,IAoCX,CAAA;AAED,eAAe,IAAI,CAAA;AAQnB,iDAAiD;AACjD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAExC,2EAA2E;AAC3E,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,iJAAiJ;AACjJ,eAAO,MAAM,cAAc,KAAoB,CAAA"}
+{"version":3,"file":"lukso-share.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-share/lukso-share.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB,8DAA8D;AAC9D,QAAA,MAAM,IAAI,EAAE,IAyCX,CAAA;AAED,eAAe,IAAI,CAAA;AAQnB,iDAAiD;AACjD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAExC,2EAA2E;AAC3E,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,iJAAiJ;AACjJ,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C;;;;;;;;EAQE;AACF,eAAO,MAAM,kBAAkB,KAAoB,CAAA"}

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
-const styleMap = require('../../style-map-c00f9dd9.cjs');
+const styleMap = require('../../style-map-f36ae803.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 
@@ -28,9 +28,10 @@ exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.Tai
     this.defaultLabelStyles = `transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10`;
     this.defaultInputStyles = `absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in`;
   }
-  handleChange(event) {
-    this.isChecked = !this.isChecked;
+  async handleChange(event) {
     const target = event.target;
+    this.isChecked = target.checked;
+    await this.updateComplete;
     const changeEvent = new CustomEvent("on-change", {
       detail: {
         value: target.checked,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-switch/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAa;IAGlB,OAAO,CAAC,SAAS,CAAQ;IAMzB,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,kBAAkB,CAAsG;IAEhI,OAAO,CAAC,kBAAkB,CAA0G;IAEpI,MAAM;CAiCP;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-switch/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAa;IAGlB,OAAO,CAAC,SAAS,CAAQ;IAMzB,OAAO,CAAC,UAAU,CAAQ;YAEZ,YAAY;IAe1B,OAAO,CAAC,kBAAkB,CAAsG;IAEhI,OAAO,CAAC,kBAAkB,CAA0G;IAEpI,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-5b6b1166.js';
+import { a as TailwindElement, x } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
-import { o } from '../../style-map-6cdbbb8b.js';
+import { o } from '../../style-map-bcba103a.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 
@@ -24,9 +24,10 @@ let LuksoSwitch = class extends TailwindElement {
     this.defaultLabelStyles = `transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10`;
     this.defaultInputStyles = `absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in`;
   }
-  handleChange(event) {
-    this.isChecked = !this.isChecked;
+  async handleChange(event) {
     const target = event.target;
+    this.isChecked = target.checked;
+    await this.updateComplete;
     const changeEvent = new CustomEvent("on-change", {
       detail: {
         value: target.checked,

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
-const styleMap = require('../../style-map-c00f9dd9.cjs');
+const styleMap = require('../../style-map-f36ae803.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x } from '../../index-5b6b1166.js';
+import { T as TailwindStyledElement, x } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
-import { o } from '../../style-map-6cdbbb8b.js';
+import { o } from '../../style-map-bcba103a.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 const state = require('../../state-51b50a6b.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-sanitize/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-c00f9dd9.cjs');
+require('../../style-map-f36ae803.cjs');
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -1,11 +1,11 @@
-import { T as TailwindStyledElement, x } from '../../index-5b6b1166.js';
+import { T as TailwindStyledElement, x } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
 import { t } from '../../state-02a92ffa.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../lukso-icon/index.js';
 import '../lukso-sanitize/index.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-6cdbbb8b.js';
+import '../../style-map-bcba103a.js';
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 const directive = require('../../directive-8278ab14.cjs');
-const directiveHelpers = require('../../directive-helpers-b2851157.cjs');
+const directiveHelpers = require('../../directive-helpers-c00f5d40.cjs');
 
 /**
  * @license

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

@@ -1,7 +1,7 @@
-import { c as A$1, b as T, T as TailwindStyledElement, x as x$1 } from '../../index-5b6b1166.js';
+import { c as A$1, b as T, T as TailwindStyledElement, x as x$1 } from '../../index-51cfbd32.js';
 import { e as e$2, a as e$3 } from '../../query-assigned-elements-e36df787.js';
 import { i as i$1, t as t$1, e as e$1 } from '../../directive-2bb7789e.js';
-import { e } from '../../directive-helpers-422da386.js';
+import { e } from '../../directive-helpers-63c6ddf6.js';
 
 /**
  * @license

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
-const styleMap = require('../../style-map-c00f9dd9.cjs');
+const styleMap = require('../../style-map-f36ae803.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x, c as A } from '../../index-5b6b1166.js';
+import { T as TailwindStyledElement, x, c as A } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
-import { o } from '../../style-map-6cdbbb8b.js';
+import { o } from '../../style-map-bcba103a.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';