@lukso/web-components 1.172.13 → 1.172.17

package/dist/chunks/{index-DG4rMUh3.js → index-BOEPqh0N.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const directive = require('./directive-DT5Y-Nw0.js');
+const directive = require('./directive-CY66atYi.js');
 
 class CustomClassMapDirective extends directive.i {
   constructor(partInfo) {

package/dist/chunks/index-Bm2Lo_3c.js

@@ -0,0 +1,6 @@
+'use strict';
+
+require('./index-oDo-wiUs.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('chunks/index-Bm2Lo_3c.js', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");

package/dist/chunks/{index-F8ll4iy2.js → index-C5S-_QDF.js}

@@ -1,4 +1,4 @@
-import { e, i, t } from './directive-BKuZRRPO.js';
+import { e, i, t } from './directive-DUHAbymA.js';
 
 class CustomClassMapDirective extends i {
   constructor(partInfo) {

package/dist/chunks/{index-B_H2eYG_.js → index-CA_aKopU.js}

@@ -1,7 +1,7 @@
-import { b as TailwindStyledElement, x } from './index-5X9ujrWL.js';
-import { n } from './property-DfumgIL6.js';
-import { o } from './unsafe-html-BHBLEMoa.js';
-import { s as safeCustomElement } from './safe-custom-element-qdGIR_v6.js';
+import { html as html$2 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { a as TailwindStyledElement, s as safeCustomElement } from './index-DluTRl1F.js';
 
 /*! @license DOMPurify 3.2.7 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.7/LICENSE */
 
@@ -1386,19 +1386,19 @@ let LuksoSanitize = class extends TailwindStyledElement(style) {
   // in order to show HTML we  need to use unsafeHTML directive.
   // This is safe since we already sanitized content
   render() {
-    return this.isPre ? x`<!-- prettier-ignore -->
+    return this.isPre ? html$2`<!-- prettier-ignore -->
           <div
-      class='whitespace-pre-wrap'>${o(this.sanitize())}</div>` : x`${o(this.sanitize())}`;
+      class='whitespace-pre-wrap'>${unsafeHTML(this.sanitize())}</div>` : html$2`${unsafeHTML(this.sanitize())}`;
   }
 };
 __decorateClass([
-  n({ type: String, attribute: "html-content" })
+  property({ type: String, attribute: "html-content" })
 ], LuksoSanitize.prototype, "htmlContent", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-pre" })
+  property({ type: Boolean, attribute: "is-pre" })
 ], LuksoSanitize.prototype, "isPre", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "strip-html-tags" })
+  property({ type: Boolean, attribute: "strip-html-tags" })
 ], LuksoSanitize.prototype, "stripHtmlTags", 2);
 LuksoSanitize = __decorateClass([
   safeCustomElement("lukso-sanitize")

package/dist/chunks/index-CSnDkMHN.js

@@ -0,0 +1,5 @@
+import.meta.url.replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
+
+import.meta.url.replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
+
+import.meta.url.replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");

package/dist/chunks/index-Chs3AjPK.js

@@ -0,0 +1,212 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { E } from './directive-DUHAbymA.js';
+import { tv } from 'tailwind-variants';
+import { toChecksumAddress } from 'web3-utils';
+import { isAddress } from 'viem';
+import { a as TailwindStyledElement, s as safeCustomElement } from './index-DluTRl1F.js';
+import { c as customStyleMap } from './index-CqZm8OfY.js';
+import '../tailwind-config.js';
+import './index-CSnDkMHN.js';
+import { c as cn } from './cn-Df_5FiGi.js';
+import 'axe-core';
+
+const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {
+  if (!address || typeof address !== "string") {
+    return "";
+  }
+  let sliceAddress2 = "";
+  const effectiveEndSliceBy = endSliceBy || startSliceBy;
+  if (address.length < startSliceBy + effectiveEndSliceBy) {
+    return address;
+  }
+  sliceAddress2 = address.length > startSliceBy + 2 ? `${address.slice(0, startSliceBy + 2)}...${address.slice(
+    -effectiveEndSliceBy
+  )}` : address;
+  return sliceAddress2;
+};
+
+const style = ":host {\n    display: inline-flex\n}";
+
+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 LuksoUsername = class extends TailwindStyledElement(style) {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.address = "";
+    this.maxWidth = 200;
+    this.size = "large";
+    this.sliceBy = 8;
+    this.addressColor = "";
+    this.nameColor = "";
+    this.customClass = "";
+    this.hidePrefix = false;
+    this.prefix = "@";
+    this.noTransform = false;
+    /** Width of the first 4 bytes of the address */
+    this.bytesWidth = 52;
+    this.styles = tv({
+      slots: {
+        wrapper: "inline-flex",
+        name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
+        address: "inline-block",
+        bytes: "inline-block"
+      },
+      variants: {
+        size: {
+          "2x-small": {
+            wrapper: "paragraph-ptmono-10-bold"
+          },
+          "x-small": {
+            wrapper: "paragraph-ptmono-10-bold"
+          },
+          small: {
+            wrapper: "paragraph-ptmono-12-bold"
+          },
+          medium: {
+            wrapper: "paragraph-ptmono-14-bold"
+          },
+          large: {
+            wrapper: "paragraph-ptmono-16-bold"
+          },
+          "x-large": {
+            wrapper: "paragraph-ptmono-24-bold"
+          },
+          "2x-large": {
+            wrapper: "paragraph-ptmono-24-bold"
+          }
+        },
+        hasNameColor: {
+          false: {
+            name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
+          }
+        },
+        hasAddressColor: {
+          false: {
+            address: "text-neutral-20",
+            bytes: "text-neutral-60"
+          }
+        }
+      }
+    });
+  }
+  transformName(name) {
+    if (this.noTransform) {
+      return name;
+    }
+    return name?.toLowerCase();
+  }
+  transformAddress(address) {
+    if (this.noTransform || !isAddress(address)) {
+      return address;
+    }
+    try {
+      return toChecksumAddress(address);
+    } catch (error) {
+      console.warn(error);
+      return address;
+    }
+  }
+  addressBytesTemplate(styles) {
+    const address = this.transformAddress(this.address);
+    return html`<div
+      class=${styles}
+      style=${customStyleMap({
+      [`color: var(--${this.addressColor})`]: this.addressColor !== ""
+    })}
+    >
+      #${address.slice(2, 6)}
+    </div>`;
+  }
+  nameTemplate(styles) {
+    const name = this.transformName(this.name);
+    return html`<div
+      class=${styles}
+      style=${customStyleMap({
+      [`max-width: ${this.maxWidth - (this.address ? this.bytesWidth : 0)}px`]: true,
+      [`color: var(--${this.nameColor})`]: this.nameColor !== ""
+    })}
+    >
+      ${this.hidePrefix ? E : this.prefix}${name}
+    </div>`;
+  }
+  addressTemplate(styles) {
+    const address = this.transformAddress(this.address);
+    return html`<div
+      class=${styles}
+      style=${customStyleMap({
+      [`color: var(--${this.addressColor})`]: this.addressColor !== ""
+    })}
+    >
+      ${sliceAddress(address, this.sliceBy, this.sliceBy)}
+    </div>`;
+  }
+  render() {
+    const { wrapper, name, address, bytes } = this.styles({
+      size: this.size,
+      hasNameColor: this.nameColor !== "",
+      hasAddressColor: this.addressColor !== ""
+    });
+    const template = (() => {
+      if (this.name && this.address) {
+        return html`${this.nameTemplate(name())}${this.addressBytesTemplate(
+          bytes()
+        )}`;
+      }
+      if (this.name) {
+        return this.nameTemplate(name());
+      }
+      if (this.address) {
+        return this.addressTemplate(address());
+      }
+    })();
+    return html`<div class=${cn(wrapper(), this.customClass)}>${template}</div>`;
+  }
+};
+__decorateClass([
+  property({ type: String })
+], LuksoUsername.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], LuksoUsername.prototype, "address", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-width" })
+], LuksoUsername.prototype, "maxWidth", 2);
+__decorateClass([
+  property({ type: "string" })
+], LuksoUsername.prototype, "size", 2);
+__decorateClass([
+  property({ type: Number, attribute: "slice-by" })
+], LuksoUsername.prototype, "sliceBy", 2);
+__decorateClass([
+  property({ type: String, attribute: "address-color" })
+], LuksoUsername.prototype, "addressColor", 2);
+__decorateClass([
+  property({ type: String, attribute: "name-color" })
+], LuksoUsername.prototype, "nameColor", 2);
+__decorateClass([
+  property({ type: String, attribute: "custom-class" })
+], LuksoUsername.prototype, "customClass", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-prefix" })
+], LuksoUsername.prototype, "hidePrefix", 2);
+__decorateClass([
+  property({ type: String })
+], LuksoUsername.prototype, "prefix", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-transform" })
+], LuksoUsername.prototype, "noTransform", 2);
+LuksoUsername = __decorateClass([
+  safeCustomElement("lukso-username")
+], LuksoUsername);
+
+export { LuksoUsername as L, sliceAddress as s };

package/dist/chunks/{index-CZGvLdJ0.js → index-CqZm8OfY.js}

@@ -1,5 +1,4 @@
-import { E } from './index-5X9ujrWL.js';
-import { e, i, t } from './directive-BKuZRRPO.js';
+import { e, i, t, E } from './directive-DUHAbymA.js';
 
 class CustomStyleMapDirective extends i {
   constructor(partInfo) {