@lukso/web-components 1.119.0 → 1.120.0

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

@@ -1,16 +1,17 @@
-import { T as TailwindStyledElement, x, E } from '../../index-92dc158d.js';
-import { n, t } from '../../property-eaa52bd9.js';
-import { r } from '../../state-1fc9a224.js';
+import { T as TailwindStyledElement, x, E } from '../../index-c074fb48.js';
+import { n, t } from '../../property-db140eda.js';
+import { r } from '../../state-13f19dcc.js';
 import { c as ce } from '../../index-d14b6a34.js';
-import { m as makeBlockie } from '../../index-ff8d75cd.js';
+import { m as makeBlockie } from '../../index-0fc204c6.js';
 import '../lukso-icon/index.js';
 import '../lukso-username/index.js';
-import { u as uniqId } from '../../index-12775596.js';
+import '../lukso-dropdown/index.js';
 import '../lukso-dropdown-option/index.js';
+import { u as uniqId } from '../../uniq-id-ce2d165c.js';
 import '../lukso-image/index.js';
-import '../../style-map-5aef4b6f.js';
+import '../../style-map-3fe95282.js';
 import '../../directive-2bb7789e.js';
-import '../../index-7bb28a79.js';
+import '../../index-81a8cb3d.js';
 import '../../tailwind-config.js';
 import '../../cn-90c03edf.js';
 
@@ -28,84 +29,84 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let LuksoSelect = class extends TailwindStyledElement(style) {
+  value = "";
+  placeholder = "";
+  label = "";
+  id = "";
+  description = "";
+  error = "";
+  isFullWidth = false;
+  isReadonly = false;
+  isDisabled = false;
+  borderless = false;
+  options = "";
+  selected = void 0;
+  isOpen = false;
+  openTop = false;
+  isLargeIcon = false;
+  isRight = false;
+  size = "medium";
+  showSelectionCounter = false;
+  optionsParsed = [];
+  valueParsed = void 0;
   constructor() {
     super();
-    this.value = "";
-    this.placeholder = "";
-    this.label = "";
-    this.id = "";
-    this.description = "";
-    this.error = "";
-    this.isFullWidth = false;
-    this.isReadonly = false;
-    this.isDisabled = false;
-    this.borderless = false;
-    this.options = "";
-    this.selected = void 0;
-    this.isOpen = false;
-    this.openTop = false;
-    this.isLargeIcon = false;
-    this.isRight = false;
-    this.size = "medium";
-    this.showSelectionCounter = false;
-    this.optionsParsed = [];
-    this.valueParsed = void 0;
-    this.inputStyles = ce({
-      base: `bg-neutral-100
+    if (!this.id) {
+      this.id = uniqId();
+    }
+  }
+  inputStyles = ce({
+    base: `bg-neutral-100
       border border-solid placeholder:text-neutral-70 select-none whitespace-nowrap
       outline-none transition transition-all duration-150 appearance-none
       text-neutral-20 cursor-pointer border-neutral-90 group-hover:border-neutral-35
       flex items-center`,
-      variants: {
-        isFullWidth: {
-          true: "w-full"
-        },
-        isDisabled: {
-          true: "cursor-not-allowed text-neutral-60 group-hover:border-neutral-90"
-        },
-        hasError: {
-          true: "border-red-85 group-hover:border-red-65"
-        },
-        borderless: {
-          true: "border-0"
-        },
-        size: {
-          small: "h-[28px] px-3 py-2 pr-8 paragraph-inter-12-regular rounded-8",
-          medium: "h-[48px] px-4 py-3 pr-11 paragraph-inter-14-regular rounded-12"
-        }
+    variants: {
+      isFullWidth: {
+        true: "w-full"
+      },
+      isDisabled: {
+        true: "cursor-not-allowed text-neutral-60 group-hover:border-neutral-90"
+      },
+      hasError: {
+        true: "border-red-85 group-hover:border-red-65"
+      },
+      borderless: {
+        true: "border-0"
+      },
+      size: {
+        small: "h-[28px] px-3 py-2 pr-8 paragraph-inter-12-regular rounded-8",
+        medium: "h-[48px] px-4 py-3 pr-11 paragraph-inter-14-regular rounded-12"
       }
-    });
-    this.counterStyles = ce({
-      base: "border border-neutral-20",
-      variants: {
-        isDisabled: {
-          true: "opacity-60 cursor-not-allowed"
-        },
-        size: {
-          small: "paragraph-inter-10-semi-bold rounded-4 py-[1px] px-[5px] ml-1.5",
-          medium: "paragraph-inter-14-semi-bold rounded-8 py-[2px] px-[10px] ml-3"
-        }
+    }
+  });
+  counterStyles = ce({
+    base: "border border-neutral-20",
+    variants: {
+      isDisabled: {
+        true: "opacity-60 cursor-not-allowed"
+      },
+      size: {
+        small: "paragraph-inter-10-semi-bold rounded-4 py-[1px] px-[5px] ml-1.5",
+        medium: "paragraph-inter-14-semi-bold rounded-8 py-[2px] px-[10px] ml-3"
       }
-    });
-    this.iconStyles = ce({
-      base: "absolute right-0 transition cursor-pointer",
-      variants: {
-        isDisabled: {
-          true: "opacity-60 cursor-not-allowed"
-        },
-        isOpen: {
-          true: "rotate-180"
-        },
-        size: {
-          small: "mr-2",
-          medium: "mr-3"
-        }
+    }
+  });
+  iconStyles = ce({
+    base: "absolute right-0 transition cursor-pointer",
+    variants: {
+      isDisabled: {
+        true: "opacity-60 cursor-not-allowed"
+      },
+      isOpen: {
+        true: "rotate-180"
+      },
+      size: {
+        small: "mr-2",
+        medium: "mr-3"
       }
-    });
-    if (!this.id) {
-      this.id = uniqId();
     }
-  }
+  });
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("click", this.handleOutsideDropdownClick.bind(this));

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-68c61387.cjs');
-const property = require('../../property-bf2eee83.cjs');
+const shared_tailwindElement_index = require('../../index-f785b4c0.cjs');
+const property = require('../../property-0715f936.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -19,31 +19,28 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 exports.LuksoShare = class LuksoShare extends shared_tailwindElement_index.TailwindStyledElement(style) {
-  constructor() {
-    super(...arguments);
-    this.customStyle = "";
-    this.providers = "";
-    this.defaultProviders = [
-      "twitter",
-      "instagram",
-      "linkedin",
-      "telegram",
-      "discord",
-      "reddit",
-      "medium",
-      "github"
-    ];
-    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",
-      discord: "https://discord.gg/lukso",
-      reddit: "https://www.reddit.com/r/lukso",
-      medium: "https://medium.com/lukso",
-      github: "https://github.com/lukso-network"
-    };
-  }
+  customStyle = "";
+  providers = "";
+  defaultProviders = [
+    "twitter",
+    "instagram",
+    "linkedin",
+    "telegram",
+    "discord",
+    "reddit",
+    "medium",
+    "github"
+  ];
+  defaultProviderLinks = {
+    twitter: "https://twitter.com/ERC725Account",
+    instagram: "https://www.instagram.com/lukso",
+    linkedin: "https://linkedin.com/company/lukso",
+    telegram: "https://t.me/LUKSO_News",
+    discord: "https://discord.gg/lukso",
+    reddit: "https://www.reddit.com/r/lukso",
+    medium: "https://medium.com/lukso",
+    github: "https://github.com/lukso-network"
+  };
   linkTemplate(name, url) {
     return shared_tailwindElement_index.x`<a
       href=${url}

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

@@ -1,5 +1,5 @@
-import { T as TailwindStyledElement, x } from '../../index-92dc158d.js';
-import { n, t } from '../../property-eaa52bd9.js';
+import { T as TailwindStyledElement, x } from '../../index-c074fb48.js';
+import { n, t } from '../../property-db140eda.js';
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -15,31 +15,28 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let LuksoShare = class extends TailwindStyledElement(style) {
-  constructor() {
-    super(...arguments);
-    this.customStyle = "";
-    this.providers = "";
-    this.defaultProviders = [
-      "twitter",
-      "instagram",
-      "linkedin",
-      "telegram",
-      "discord",
-      "reddit",
-      "medium",
-      "github"
-    ];
-    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",
-      discord: "https://discord.gg/lukso",
-      reddit: "https://www.reddit.com/r/lukso",
-      medium: "https://medium.com/lukso",
-      github: "https://github.com/lukso-network"
-    };
-  }
+  customStyle = "";
+  providers = "";
+  defaultProviders = [
+    "twitter",
+    "instagram",
+    "linkedin",
+    "telegram",
+    "discord",
+    "reddit",
+    "medium",
+    "github"
+  ];
+  defaultProviderLinks = {
+    twitter: "https://twitter.com/ERC725Account",
+    instagram: "https://www.instagram.com/lukso",
+    linkedin: "https://linkedin.com/company/lukso",
+    telegram: "https://t.me/LUKSO_News",
+    discord: "https://discord.gg/lukso",
+    reddit: "https://www.reddit.com/r/lukso",
+    medium: "https://medium.com/lukso",
+    github: "https://github.com/lukso-network"
+  };
   linkTemplate(name, url) {
     return x`<a
       href=${url}

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-68c61387.cjs');
-const property = require('../../property-bf2eee83.cjs');
-const styleMap = require('../../style-map-8e54f508.cjs');
-const index = require('../../index-e9668573.cjs');
+const shared_tailwindElement_index = require('../../index-f785b4c0.cjs');
+const property = require('../../property-0715f936.cjs');
+const styleMap = require('../../style-map-074a8e8b.cjs');
+const index = require('../../index-2b104ecb.cjs');
+const uniqId = require('../../uniq-id-f0b18085.cjs');
 require('../../directive-8278ab14.cjs');
 
 var __defProp = Object.defineProperty;
@@ -19,18 +20,18 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const DEFAULT_COLOR = "green-54";
 exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.TailwindElement {
-  constructor() {
-    super(...arguments);
-    this.color = "green-54";
-    this.isChecked = false;
-    this.isDisabled = false;
-    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`;
-  }
+  color = DEFAULT_COLOR;
+  id = "";
+  name = "switch";
+  label = "";
+  description = "";
+  error = "";
+  isChecked = false;
+  isDisabled = false;
   async handleChange(event) {
     const target = event.target;
-    this.isChecked = target.checked;
     await this.updateComplete;
     const changeEvent = new CustomEvent("on-change", {
       detail: {
@@ -42,41 +43,122 @@ exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.Tai
     });
     this.dispatchEvent(changeEvent);
   }
-  render() {
+  constructor() {
+    super();
+    if (!this.id) {
+      this.id = `switch-${uniqId.uniqId()}`;
+    }
+  }
+  styles = index.ce({
+    slots: {
+      label: "transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10",
+      input: "absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in"
+    },
+    variants: {
+      isChecked: {
+        true: {
+          input: "translate-x-4"
+        },
+        false: {
+          label: "bg-neutral-90",
+          input: "border-neutral-90"
+        }
+      },
+      isDisabled: {
+        true: {
+          label: "opacity-70 cursor-not-allowed",
+          input: "cursor-not-allowed"
+        },
+        false: {
+          label: "cursor-pointer",
+          input: "cursor-pointer"
+        }
+      },
+      hasError: {
+        true: {
+          label: "!bg-red-65",
+          input: "!border-red-65"
+        }
+      }
+    }
+  });
+  labelTemplate() {
     return shared_tailwindElement_index.x`
-      <label
-        for="switch"
-        class=${index.customClassMap({
-      [this.defaultLabelStyles]: true
-    })}
-        style=${styleMap.o({
-      backgroundColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
-      opacity: this.isDisabled ? 0.7 : 1,
-      cursor: this.isDisabled ? "not-allowed" : "pointer"
-    })}
+      <div
+        class="heading-inter-14-bold text-neutral-20 pb-2 block"
+        >${this.label}</label
       >
-        <input
-          type="checkbox"
-          id="switch"
-          ?checked=${this.isChecked}
-          ?disabled=${this.isDisabled}
-          class=${index.customClassMap({
-      [this.defaultInputStyles]: true,
-      ["translate-x-4"]: this.isChecked
+    `;
+  }
+  descriptionTemplate() {
+    return shared_tailwindElement_index.x`
+      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
+        ${this.description ?? shared_tailwindElement_index.E}
+      </div>
+    `;
+  }
+  errorTemplate() {
+    return shared_tailwindElement_index.x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
+      ${this.error}
+    </div>`;
+  }
+  render() {
+    const { label, input } = this.styles({
+      isChecked: this.isChecked,
+      isDisabled: this.isDisabled,
+      hasError: this.error !== ""
+    });
+    if (!this.color) {
+      this.color = DEFAULT_COLOR;
+    }
+    return shared_tailwindElement_index.x`
+      <label for=${this.id} class="w-[inherit]">
+        ${this.label ? this.labelTemplate() : shared_tailwindElement_index.E}
+        ${this.description ? this.descriptionTemplate() : shared_tailwindElement_index.E}
+        <div class="flex">
+          <div
+            class=${label()}
+            style=${styleMap.o({
+      backgroundColor: `var(--${this.isChecked ? this.color : "neutral-90"})`
     })}
-          style=${styleMap.o({
-      borderColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
-      cursor: this.isDisabled ? "not-allowed" : "pointer"
+          >
+            <input
+              type="checkbox"
+              id=${this.id}
+              name=${this.name}
+              ?checked=${this.isChecked}
+              ?disabled=${this.isDisabled}
+              class=${input()}
+              style=${styleMap.o({
+      borderColor: `var(--${this.isChecked ? this.color : "neutral-90"})`
     })}
-          @change=${this.handleChange}
-        />
-      </label>
+              @change=${this.handleChange}
+            />
+          </label>
+        </div>
+        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.E}
+      </div>
     `;
   }
 };
 __decorateClass([
   property.n({ type: String })
 ], exports.LuksoSwitch.prototype, "color", 2);
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoSwitch.prototype, "id", 2);
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoSwitch.prototype, "name", 2);
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoSwitch.prototype, "label", 2);
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoSwitch.prototype, "description", 2);
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoSwitch.prototype, "error", 2);
 __decorateClass([
   property.n({ type: Boolean, attribute: "is-checked" })
 ], exports.LuksoSwitch.prototype, "isChecked", 2);

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

@@ -1,11 +1,19 @@
 import { TailwindElement } from '../../shared/tailwind-element';
 export declare class LuksoSwitch extends TailwindElement {
     color: string;
-    private isChecked;
-    private isDisabled;
+    id: string;
+    name: string;
+    label: string;
+    description: string;
+    error: string;
+    isChecked: boolean;
+    isDisabled: boolean;
     private handleChange;
-    private defaultLabelStyles;
-    private defaultInputStyles;
+    constructor();
+    private styles;
+    labelTemplate(): import("lit-html").TemplateResult<1>;
+    descriptionTemplate(): import("lit-html").TemplateResult<1>;
+    errorTemplate(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-switch/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAI3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAgB;IAGrB,EAAE,SAAK;IAGP,IAAI,SAAW;IAGf,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,SAAS,UAAQ;IAMjB,UAAU,UAAQ;YAEJ,YAAY;;IAsB1B,OAAO,CAAC,MAAM,CAkCZ;IAEF,aAAa;IASb,mBAAmB;IAQnB,aAAa;IAMb,MAAM;CA4CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}