@lukso/web-components 1.172.13 → 1.172.14

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

@@ -1,8 +1,8 @@
-import { T as TailwindElement, x, E } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
 import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { TailwindElement } from '../../shared/tailwind-element/index.js';
 import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
 
@@ -31,7 +31,7 @@ let LuksoNavbar = class extends TailwindElement {
     this.mobileBreakpoint = "md";
     this.isMenuOpen = false;
     this.defaultLogoUrl = "/assets/images/up-logo.png";
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         wrapper: "h-78 grid items-center",
         mobileMenuWrapper: "items-center justify-end pr-6 flex gap-2",
@@ -143,21 +143,21 @@ let LuksoNavbar = class extends TailwindElement {
     }
   }
   desktopMenuTemplate(styles) {
-    return x` <div class=${styles.desktopMenuWrapper()}>
+    return html` <div class=${styles.desktopMenuWrapper()}>
       <slot name="desktop-menu"></slot>
     </div>`;
   }
   desktopCenterTemplate(styles) {
-    return x`<div class=${styles.desktopCenterWrapper()}>
+    return html`<div class=${styles.desktopCenterWrapper()}>
         <slot name="desktop-center"></slot>
       </div>
       <div class=${styles.desktopCenterPlaceholder()}></div>`;
   }
   mobileMenuTemplate(styles) {
-    return x`<div class=${styles.mobileMenuWrapper()}>
+    return html`<div class=${styles.mobileMenuWrapper()}>
       <slot name="mobile-menu"></slot>
 
-      ${this.hasMobileDropdownMenu ? x` <div
+      ${this.hasMobileDropdownMenu ? html` <div
               class="flex items-center justify-center w-8 h-8 cursor-pointer"
               @click=${this.handleMenuToggle}
             >
@@ -168,11 +168,11 @@ let LuksoNavbar = class extends TailwindElement {
               @click=${this.handleMenuToggle}
             >
               <slot name="mobile-dropdown"></slot>
-            </div>` : E}
+            </div>` : nothing}
     </div>`;
   }
   brandTemplate() {
-    return x`
+    return html`
       <div class="flex items-center px-6 md:px-10 h-[inherit]">
         <div class="flex cursor-pointer group" @click=${this.handleBrandClick}>
           <img
@@ -186,11 +186,11 @@ let LuksoNavbar = class extends TailwindElement {
           >
             <span>${this.title}</span>
           </div>
-          ${this.isTestnet ? x`<lukso-tag background-color="yellow-65" class="ml-2">
+          ${this.isTestnet ? html`<lukso-tag background-color="yellow-65" class="ml-2">
                 TESTNET
-              </lukso-tag>` : E}
+              </lukso-tag>` : nothing}
         </div>
-        ${this.icon ? x`<div
+        ${this.icon ? html`<div
               class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
             >
               <lukso-icon
@@ -199,12 +199,12 @@ let LuksoNavbar = class extends TailwindElement {
                 color="purple-51"
                 @click=${this.handleIconClick}
               ></lukso-icon>
-            </div>` : E}
+            </div>` : nothing}
       </div>
     `;
   }
   menuTemplate(styles) {
-    return x`<div class="flex items-center justify-end">
+    return html`<div class="flex items-center justify-end">
       ${this.desktopMenuTemplate(styles)} ${this.mobileMenuTemplate(styles)}
     </div>`;
   }
@@ -216,47 +216,47 @@ let LuksoNavbar = class extends TailwindElement {
       mobileBreakpoint: this.mobileBreakpoint,
       isMenuOpen: this.isMenuOpen
     });
-    return x`
+    return html`
       <nav data-testid="navbar" class=${styles.wrapper()}>
         ${this.brandTemplate()}
-        ${this.isCenter ? E : this.desktopCenterTemplate(styles)}
-        ${this.isCenter ? E : this.hasMenu ? this.menuTemplate(styles) : E}
+        ${this.isCenter ? nothing : this.desktopCenterTemplate(styles)}
+        ${this.isCenter ? nothing : this.hasMenu ? this.menuTemplate(styles) : nothing}
       </nav>
     `;
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoNavbar.prototype, "title", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-center" })
+  property({ type: Boolean, attribute: "is-center" })
 ], LuksoNavbar.prototype, "isCenter", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-sticky" })
+  property({ type: Boolean, attribute: "is-sticky" })
 ], LuksoNavbar.prototype, "isSticky", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-transparent" })
+  property({ type: Boolean, attribute: "is-transparent" })
 ], LuksoNavbar.prototype, "isTransparent", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-testnet" })
+  property({ type: Boolean, attribute: "is-testnet" })
 ], LuksoNavbar.prototype, "isTestnet", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoNavbar.prototype, "icon", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "has-menu" })
+  property({ type: Boolean, attribute: "has-menu" })
 ], LuksoNavbar.prototype, "hasMenu", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "has-mobile-dropdown-menu" })
+  property({ type: Boolean, attribute: "has-mobile-dropdown-menu" })
 ], LuksoNavbar.prototype, "hasMobileDropdownMenu", 2);
 __decorateClass([
-  n({ type: String, attribute: "logo-url" })
+  property({ type: String, attribute: "logo-url" })
 ], LuksoNavbar.prototype, "logoUrl", 2);
 __decorateClass([
-  n({ type: String, attribute: "mobile-breakpoint" })
+  property({ type: String, attribute: "mobile-breakpoint" })
 ], LuksoNavbar.prototype, "mobileBreakpoint", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoNavbar.prototype, "isMenuOpen", 2);
 LuksoNavbar = __decorateClass([
   safeCustomElement("lukso-navbar")

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
-const property = require('../../chunks/property-D6IL6zax.js');
-const state = require('../../chunks/state-CFjY89m3.js');
-const index = require('../../chunks/index-CaJky2qL.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
 const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-button/index.cjs');
 
@@ -30,7 +30,7 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
     this.currentPage = 1;
     this.totalPages = 0;
     this.isMobile = false;
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         wrapper: "flex gap-2",
         ellipsis: "items-center flex justify-center",
@@ -125,7 +125,7 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
     return this.size === "small" ? "medium" : "large";
   }
   prevPageTemplate() {
-    return shared_tailwindElement_index.x`<lukso-button
+    return lit.html`<lukso-button
       size=${this.size}
       variant=${this.variant}
       is-icon
@@ -140,7 +140,7 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
     </lukso-button>`;
   }
   nextPageTemplate() {
-    return shared_tailwindElement_index.x`<lukso-button
+    return lit.html`<lukso-button
       size=${this.size}
       variant=${this.variant}
       is-icon
@@ -158,12 +158,12 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
     const numberTemplates = [];
     for (const item of this.pagination.items) {
       if (item === "...") {
-        numberTemplates.push(shared_tailwindElement_index.x` <div class=${ellipsisStyles}>...</div> `);
+        numberTemplates.push(lit.html` <div class=${ellipsisStyles}>...</div> `);
         continue;
       }
       if (typeof item === "number") {
         numberTemplates.push(
-          shared_tailwindElement_index.x`<lukso-button
+          lit.html`<lukso-button
             size=${this.size}
             variant=${this.variant}
             ?disabled=${this.currentPage === item}
@@ -182,7 +182,7 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
     const { wrapper, ellipsis, numbers } = this.styles({
       size: this.size
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class=${wrapper()}>
         ${this.prevPageTemplate()}
         ${this.numbersTemplate(ellipsis(), numbers())}
@@ -192,22 +192,22 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoPagination.prototype, "variant", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoPagination.prototype, "size", 2);
 __decorateClass([
-  property.n({ type: Number, attribute: "current-page" })
+  decorators_js.property({ type: Number, attribute: "current-page" })
 ], exports.LuksoPagination.prototype, "currentPage", 2);
 __decorateClass([
-  property.n({ type: Number, attribute: "total-pages" })
+  decorators_js.property({ type: Number, attribute: "total-pages" })
 ], exports.LuksoPagination.prototype, "totalPages", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-mobile" })
+  decorators_js.property({ type: Boolean, attribute: "is-mobile" })
 ], exports.LuksoPagination.prototype, "isMobile", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoPagination.prototype, "pagination", 2);
 exports.LuksoPagination = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-pagination")

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

@@ -1,8 +1,8 @@
-import { b as TailwindStyledElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
 import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { TailwindStyledElement } from '../../shared/tailwind-element/index.js';
 import '../lukso-icon/index.js';
 import '../lukso-button/index.js';
 
@@ -26,7 +26,7 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
     this.currentPage = 1;
     this.totalPages = 0;
     this.isMobile = false;
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         wrapper: "flex gap-2",
         ellipsis: "items-center flex justify-center",
@@ -121,7 +121,7 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
     return this.size === "small" ? "medium" : "large";
   }
   prevPageTemplate() {
-    return x`<lukso-button
+    return html`<lukso-button
       size=${this.size}
       variant=${this.variant}
       is-icon
@@ -136,7 +136,7 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
     </lukso-button>`;
   }
   nextPageTemplate() {
-    return x`<lukso-button
+    return html`<lukso-button
       size=${this.size}
       variant=${this.variant}
       is-icon
@@ -154,12 +154,12 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
     const numberTemplates = [];
     for (const item of this.pagination.items) {
       if (item === "...") {
-        numberTemplates.push(x` <div class=${ellipsisStyles}>...</div> `);
+        numberTemplates.push(html` <div class=${ellipsisStyles}>...</div> `);
         continue;
       }
       if (typeof item === "number") {
         numberTemplates.push(
-          x`<lukso-button
+          html`<lukso-button
             size=${this.size}
             variant=${this.variant}
             ?disabled=${this.currentPage === item}
@@ -178,7 +178,7 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
     const { wrapper, ellipsis, numbers } = this.styles({
       size: this.size
     });
-    return x`
+    return html`
       <div class=${wrapper()}>
         ${this.prevPageTemplate()}
         ${this.numbersTemplate(ellipsis(), numbers())}
@@ -188,22 +188,22 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoPagination.prototype, "variant", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoPagination.prototype, "size", 2);
 __decorateClass([
-  n({ type: Number, attribute: "current-page" })
+  property({ type: Number, attribute: "current-page" })
 ], LuksoPagination.prototype, "currentPage", 2);
 __decorateClass([
-  n({ type: Number, attribute: "total-pages" })
+  property({ type: Number, attribute: "total-pages" })
 ], LuksoPagination.prototype, "totalPages", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-mobile" })
+  property({ type: Boolean, attribute: "is-mobile" })
 ], LuksoPagination.prototype, "isMobile", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoPagination.prototype, "pagination", 2);
 LuksoPagination = __decorateClass([
   safeCustomElement("lukso-pagination")

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

@@ -2,16 +2,167 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-require('../../chunks/index-BxQ_0s_1.js');
-require('../../chunks/property-D6IL6zax.js');
-const components_luksoProfile_index = require('../../chunks/index-BAf8Hzhe.js');
-require('../../chunks/index-CaJky2qL.js');
-require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const makeBlockie = require('ethereum-blockies-base64');
+const tailwindVariants = require('tailwind-variants');
+const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 require('../lukso-image/index.cjs');
 
-
-
-Object.defineProperty(exports, "LuksoProfile", {
-	enumerable: true,
-	get: () => components_luksoProfile_index.LuksoProfile
-});
+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;
+};
+exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.profileUrl = "";
+    this.profileAddress = "";
+    this.hasIdenticon = false;
+    this.size = "large";
+    this.isSquare = false;
+    this.placeholder = "/assets/images/profile-default.svg";
+    this.profileStyles = tailwindVariants.tv({
+      slots: {
+        wrapper: "outline outline-2 outline-neutral-100 relative",
+        profile: "overflow-hidden",
+        identicon: "absolute shadow-shadow-1xl rounded-full outline outline-neutral-100 right-0 bottom-0"
+      },
+      variants: {
+        isSquare: {
+          false: {
+            wrapper: "rounded-full",
+            profile: "rounded-full"
+          }
+        },
+        size: {
+          "2x-small": {
+            wrapper: "w-4 h-4",
+            profile: "w-4 h-4",
+            identicon: "w-2 h-2 outline-1"
+          },
+          "x-small": {
+            wrapper: "w-6 h-6",
+            profile: "w-6 h-6",
+            identicon: "w-3 h-3 outline-1"
+          },
+          small: {
+            wrapper: "w-10 h-10",
+            profile: "w-10 h-10",
+            identicon: "w-4 h-4 outline-2"
+          },
+          medium: {
+            wrapper: "w-14 h-14",
+            profile: "w-14 h-14",
+            identicon: "w-5 h-5 outline-2"
+          },
+          large: {
+            wrapper: "w-20 h-20",
+            profile: "w-20 h-20",
+            identicon: "w-6 h-6 outline-2"
+          },
+          "x-large": {
+            wrapper: "w-24 h-24",
+            profile: "w-24 h-24",
+            identicon: "w-7 h-7 outline-2"
+          },
+          "2x-large": {
+            wrapper: "w-30 h-30",
+            profile: "w-30 h-30",
+            identicon: "w-9 h-9 outline-[2.5px]"
+          }
+        }
+      },
+      compoundVariants: [
+        {
+          isSquare: true,
+          size: ["2x-small", "x-small"],
+          class: {
+            wrapper: "rounded-[2px]",
+            profile: "rounded-[2px]"
+          }
+        },
+        {
+          isSquare: true,
+          size: "small",
+          class: {
+            wrapper: "rounded-4",
+            profile: "rounded-4"
+          }
+        },
+        {
+          isSquare: true,
+          size: "medium",
+          class: {
+            wrapper: "rounded-8",
+            profile: "rounded-8"
+          }
+        },
+        {
+          isSquare: true,
+          size: "large",
+          class: {
+            wrapper: "rounded-[10px]",
+            profile: "rounded-[10px]"
+          }
+        },
+        {
+          isSquare: true,
+          size: ["2x-large", "x-large"],
+          class: {
+            wrapper: "rounded-12",
+            profile: "rounded-12"
+          }
+        }
+      ]
+    });
+  }
+  identicon() {
+    return this.hasIdenticon && this.profileAddress ? makeBlockie(this.profileAddress) : "";
+  }
+  render() {
+    const { wrapper, profile, identicon } = this.profileStyles({
+      size: this.size,
+      isSquare: this.isSquare
+    });
+    return lit.html`
+      <div data-testid="profile" class=${wrapper()}>
+        <div class=${profile()}>
+          <lukso-image
+            src=${this.profileUrl}
+            placeholder=${this.placeholder}
+          ></lukso-image>
+        </div>
+        ${this.identicon() ? lit.html`<img src=${this.identicon()} class=${identicon()} alt="" />` : ""}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "profile-url", reflect: true })
+], exports.LuksoProfile.prototype, "profileUrl", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "profile-address", reflect: true })
+], exports.LuksoProfile.prototype, "profileAddress", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "has-identicon", reflect: true })
+], exports.LuksoProfile.prototype, "hasIdenticon", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.LuksoProfile.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "is-square" })
+], exports.LuksoProfile.prototype, "isSquare", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.LuksoProfile.prototype, "placeholder", 2);
+exports.LuksoProfile = __decorateClass([
+  safeCustomElement.safeCustomElement("lukso-profile")
+], exports.LuksoProfile);