@lukso/web-components 1.172.17 → 1.172.19

package/dist/chunks/index-BSaCYACP.js

@@ -0,0 +1,38 @@
+import { directive, Directive, PartType } from 'lit/directive.js';
+import { nothing } from 'lit-html';
+
+class CustomClassMapDirective extends Directive {
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== PartType.ATTRIBUTE || partInfo.name !== "class" || partInfo.strings?.length > 2) {
+      throw new Error(
+        "`customClassMap()` can only be used in the `class` attribute and must be the only part in the attribute."
+      );
+    }
+  }
+  render(classInfoList) {
+    return " " + Object.keys(classInfoList).filter((key) => classInfoList[key]).join(" ") + " ";
+  }
+}
+const customClassMap = directive(CustomClassMapDirective);
+
+class CustomStyleMapDirective extends Directive {
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== PartType.ATTRIBUTE || partInfo.name !== "style" || partInfo.strings?.length > 2) {
+      throw new Error(
+        "`customStyleMap()` can only be used in the `style` attribute and must be the only part in the attribute."
+      );
+    }
+  }
+  render(styleInfoList) {
+    const styles = Object.keys(styleInfoList).filter((key) => styleInfoList[key]);
+    if (styles.length === 0) {
+      return nothing;
+    }
+    return ` ${styles.join("; ")} `;
+  }
+}
+const customStyleMap = directive(CustomStyleMapDirective);
+
+export { customStyleMap as a, customClassMap as c };

package/dist/chunks/{index-DIHXzSqi.js → index-BdDs1GTr.js}

@@ -11,7 +11,7 @@ require('../components/lukso-icon/index.cjs');
 require('../components/lukso-input/index.cjs');
 require('../components/lukso-profile/index.cjs');
 require('../components/lukso-tag/index.cjs');
-const components_luksoUsername_index = require('./index-y7UFhQ9u.js');
+const components_luksoUsername_index = require('./index-DfEZ5Urq.js');
 require('../components/lukso-tooltip/index.cjs');
 require('../tailwind-config.cjs');
 require('./index-oDo-wiUs.js');

package/dist/chunks/{index-Chs3AjPK.js → index-BptDRJ4b.js}

@@ -1,11 +1,11 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { E } from './directive-DUHAbymA.js';
+import { nothing } from 'lit-html';
 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 { a as customStyleMap } from './index-BSaCYACP.js';
 import '../tailwind-config.js';
 import './index-CSnDkMHN.js';
 import { c as cn } from './cn-Df_5FiGi.js';
@@ -136,7 +136,7 @@ let LuksoUsername = class extends TailwindStyledElement(style) {
       [`color: var(--${this.nameColor})`]: this.nameColor !== ""
     })}
     >
-      ${this.hidePrefix ? E : this.prefix}${name}
+      ${this.hidePrefix ? nothing : this.prefix}${name}
     </div>`;
   }
   addressTemplate(styles) {

package/dist/chunks/{index-DsmwLJjR.js → index-DNzK6-9T.js}

@@ -9,7 +9,7 @@ import '../components/lukso-icon/index.js';
 import '../components/lukso-input/index.js';
 import '../components/lukso-profile/index.js';
 import '../components/lukso-tag/index.js';
-import { s as sliceAddress } from './index-Chs3AjPK.js';
+import { s as sliceAddress } from './index-BptDRJ4b.js';
 import '../components/lukso-tooltip/index.js';
 import '../tailwind-config.js';
 import './index-CSnDkMHN.js';

package/dist/chunks/{index-y7UFhQ9u.js → index-DfEZ5Urq.js}

@@ -2,12 +2,12 @@
 
 const lit = require('lit');
 const decorators_js = require('lit/decorators.js');
-const directive = require('./directive-CY66atYi.js');
+const litHtml = require('lit-html');
 const tailwindVariants = require('tailwind-variants');
 const web3Utils = require('web3-utils');
 const viem = require('viem');
 const index = require('./index-BBPgtFEP.js');
-const index$1 = require('./index-DvLZWpq9.js');
+const index$1 = require('./index-DvBRl_q4.js');
 require('../tailwind-config.cjs');
 require('./index-oDo-wiUs.js');
 const cn = require('./cn-JMx_imgS.js');
@@ -138,7 +138,7 @@ exports.LuksoUsername = class LuksoUsername extends index.TailwindStyledElement(
       [`color: var(--${this.nameColor})`]: this.nameColor !== ""
     })}
     >
-      ${this.hidePrefix ? directive.E : this.prefix}${name}
+      ${this.hidePrefix ? litHtml.nothing : this.prefix}${name}
     </div>`;
   }
   addressTemplate(styles) {

package/dist/chunks/index-DvBRl_q4.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const directive_js = require('lit/directive.js');
+const litHtml = require('lit-html');
+
+class CustomClassMapDirective extends directive_js.Directive {
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== directive_js.PartType.ATTRIBUTE || partInfo.name !== "class" || partInfo.strings?.length > 2) {
+      throw new Error(
+        "`customClassMap()` can only be used in the `class` attribute and must be the only part in the attribute."
+      );
+    }
+  }
+  render(classInfoList) {
+    return " " + Object.keys(classInfoList).filter((key) => classInfoList[key]).join(" ") + " ";
+  }
+}
+const customClassMap = directive_js.directive(CustomClassMapDirective);
+
+class CustomStyleMapDirective extends directive_js.Directive {
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== directive_js.PartType.ATTRIBUTE || partInfo.name !== "style" || partInfo.strings?.length > 2) {
+      throw new Error(
+        "`customStyleMap()` can only be used in the `style` attribute and must be the only part in the attribute."
+      );
+    }
+  }
+  render(styleInfoList) {
+    const styles = Object.keys(styleInfoList).filter((key) => styleInfoList[key]);
+    if (styles.length === 0) {
+      return litHtml.nothing;
+    }
+    return ` ${styles.join("; ")} `;
+  }
+}
+const customStyleMap = directive_js.directive(CustomStyleMapDirective);
+
+exports.customClassMap = customClassMap;
+exports.customStyleMap = customStyleMap;

package/dist/components/index.cjs

@@ -28,7 +28,7 @@ const components_luksoQrCode_index = require('./lukso-qr-code/index.cjs');
 const components_luksoRadio_index = require('./lukso-radio/index.cjs');
 const components_luksoRadioGroup_index = require('./lukso-radio-group/index.cjs');
 const components_luksoSanitize_index = require('../chunks/index-Dh7fuono.js');
-const components_luksoSearch_index = require('../chunks/index-DIHXzSqi.js');
+const components_luksoSearch_index = require('../chunks/index-BdDs1GTr.js');
 const components_luksoSelect_index = require('./lukso-select/index.cjs');
 const components_luksoShare_index = require('./lukso-share/index.cjs');
 const components_luksoSwitch_index = require('./lukso-switch/index.cjs');
@@ -36,7 +36,7 @@ const components_luksoTag_index = require('./lukso-tag/index.cjs');
 const components_luksoTerms_index = require('./lukso-terms/index.cjs');
 const components_luksoTextarea_index = require('./lukso-textarea/index.cjs');
 const components_luksoTooltip_index = require('./lukso-tooltip/index.cjs');
-const components_luksoUsername_index = require('../chunks/index-y7UFhQ9u.js');
+const components_luksoUsername_index = require('../chunks/index-DfEZ5Urq.js');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
 
 

package/dist/components/index.js

@@ -24,7 +24,7 @@ export { LuksoQrCode } from './lukso-qr-code/index.js';
 export { LuksoRadio } from './lukso-radio/index.js';
 export { LuksoRadioGroup } from './lukso-radio-group/index.js';
 export { D as DEFAULT_OPTIONS, L as LuksoSanitize, N as NO_HTML_TAGS_OPTIONS } from '../chunks/index-CA_aKopU.js';
-export { L as LuksoSearch } from '../chunks/index-DsmwLJjR.js';
+export { L as LuksoSearch } from '../chunks/index-DNzK6-9T.js';
 export { LuksoSelect } from './lukso-select/index.js';
 export { LuksoShare } from './lukso-share/index.js';
 export { LuksoSwitch } from './lukso-switch/index.js';
@@ -32,5 +32,5 @@ export { LuksoTag } from './lukso-tag/index.js';
 export { LuksoTerms } from './lukso-terms/index.js';
 export { LuksoTextarea } from './lukso-textarea/index.js';
 export { LuksoTooltip } from './lukso-tooltip/index.js';
-export { L as LuksoUsername } from '../chunks/index-Chs3AjPK.js';
+export { L as LuksoUsername } from '../chunks/index-BptDRJ4b.js';
 export { LuksoWizard } from './lukso-wizard/index.js';

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

@@ -2,7 +2,7 @@ import { InputSize } from '../../shared/types';
 export type ButtonVariant = 'primary' | 'secondary' | 'landing' | 'text' | 'nav-button' | 'nav-text' | 'link' | 'success' | 'danger' | 'warning';
 export type ButtonType = 'submit' | 'reset' | 'button';
 export type LinkTarget = '_blank' | '_self' | '_parent' | '_top';
-declare const LuksoButton_base: any;
+declare const LuksoButton_base: import('@lukso/core').ThemeMixinConstructor<typeof import('lit').LitElement>;
 export declare class LuksoButton extends LuksoButton_base {
     variant: ButtonVariant;
     size: InputSize;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const makeBlockie = require('ethereum-blockies-base64');
 const lit = require('lit');
 const decorators_js = require('lit/decorators.js');
-const styleMap = require('../../chunks/style-map-AEeBQfPb.js');
+const styleMap_js = require('lit/directives/style-map.js');
 const tailwindVariants = require('tailwind-variants');
 const index = require('../../chunks/index-BBPgtFEP.js');
 require('../lukso-profile/index.cjs');
@@ -14,7 +14,7 @@ require('../../chunks/index-oDo-wiUs.js');
 const cn = require('../../chunks/cn-JMx_imgS.js');
 const viem = require('viem');
 require('axe-core');
-const index$1 = require('../../chunks/index-DvLZWpq9.js');
+const index$1 = require('../../chunks/index-DvBRl_q4.js');
 require('../lukso-image/index.cjs');
 
 const backgroundGradient = (address) => {
@@ -128,7 +128,7 @@ exports.LuksoCard = class LuksoCard extends index.TailwindStyledElement(style) {
     return lit.html`
       <div
         data-testid="card"
-        style=${styleMap.o({
+        style=${styleMap_js.styleMap({
       minHeight: `${this.height}px`,
       width: `${this.width}px`
     })}
@@ -163,7 +163,7 @@ exports.LuksoCard = class LuksoCard extends index.TailwindStyledElement(style) {
         class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
-          style=${styleMap.o({
+          style=${styleMap_js.styleMap({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn.cn(
@@ -227,7 +227,7 @@ exports.LuksoCard = class LuksoCard extends index.TailwindStyledElement(style) {
         class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
-          style=${styleMap.o({
+          style=${styleMap_js.styleMap({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn.cn(
@@ -296,7 +296,7 @@ exports.LuksoCard = class LuksoCard extends index.TailwindStyledElement(style) {
         class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
-          style=${styleMap.o({
+          style=${styleMap_js.styleMap({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn.cn(
@@ -387,7 +387,7 @@ exports.LuksoCard = class LuksoCard extends index.TailwindStyledElement(style) {
         class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
-          style=${styleMap.o({
+          style=${styleMap_js.styleMap({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn.cn(

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

@@ -1,7 +1,7 @@
 import makeBlockie from 'ethereum-blockies-base64';
 import { html, nothing } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
-import { o } from '../../chunks/style-map-auscxO0L.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { tv } from 'tailwind-variants';
 import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
 import '../lukso-profile/index.js';
@@ -10,7 +10,7 @@ import '../../chunks/index-CSnDkMHN.js';
 import { c as cn } from '../../chunks/cn-Df_5FiGi.js';
 import { isAddress } from 'viem';
 import 'axe-core';
-import { c as customStyleMap } from '../../chunks/index-CqZm8OfY.js';
+import { a as customStyleMap } from '../../chunks/index-BSaCYACP.js';
 import '../lukso-image/index.js';
 
 const backgroundGradient = (address) => {
@@ -124,7 +124,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     return html`
       <div
         data-testid="card"
-        style=${o({
+        style=${styleMap({
       minHeight: `${this.height}px`,
       width: `${this.width}px`
     })}
@@ -159,7 +159,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o({
+          style=${styleMap({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
@@ -223,7 +223,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o({
+          style=${styleMap({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
@@ -292,7 +292,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o({
+          style=${styleMap({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
@@ -383,7 +383,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o({
+          style=${styleMap({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(

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

@@ -5,8 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const lit = require('lit');
 const decorators_js = require('lit/decorators.js');
 const index = require('../../chunks/index-BBPgtFEP.js');
-const index$1 = require('../../chunks/index-BOEPqh0N.js');
-require('../../chunks/directive-CY66atYi.js');
+const index$1 = require('../../chunks/index-DvBRl_q4.js');
 require('../lukso-form-description/index.cjs');
 require('../lukso-form-error/index.cjs');
 

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

@@ -1,8 +1,7 @@
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { T as TailwindElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
-import { c as customClassMap } from '../../chunks/index-C5S-_QDF.js';
-import '../../chunks/directive-DUHAbymA.js';
+import { c as customClassMap } from '../../chunks/index-BSaCYACP.js';
 import '../lukso-form-description/index.js';
 import '../lukso-form-error/index.js';
 

package/dist/components/lukso-color-picker/index.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const lit = require('lit');
 const decorators_js = require('lit/decorators.js');
 const tailwindVariants = require('tailwind-variants');
-const styleMap = require('../../chunks/style-map-AEeBQfPb.js');
+const styleMap_js = require('lit/directives/style-map.js');
 const index = require('../../chunks/index-BBPgtFEP.js');
 require('../../tailwind-config.cjs');
 require('../../chunks/index-oDo-wiUs.js');
@@ -183,7 +183,7 @@ exports.LuksoColorPicker = class LuksoColorPicker extends index.TailwindStyledEl
   colorPickerTemplate(styles, colorInputStyles) {
     return lit.html`<div
       class=${styles}
-      style=${styleMap.o({
+      style=${styleMap_js.styleMap({
       backgroundColor: `${this.value}`
     })}
     >

package/dist/components/lukso-color-picker/index.js

@@ -1,7 +1,7 @@
 import { nothing, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { tv } from 'tailwind-variants';
-import { o } from '../../chunks/style-map-auscxO0L.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
 import '../../tailwind-config.js';
 import '../../chunks/index-CSnDkMHN.js';
@@ -179,7 +179,7 @@ let LuksoColorPicker = class extends TailwindStyledElement(style) {
   colorPickerTemplate(styles, colorInputStyles) {
     return html`<div
       class=${styles}
-      style=${o({
+      style=${styleMap({
       backgroundColor: `${this.value}`
     })}
     >

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

@@ -8,7 +8,7 @@ const tailwindVariants = require('tailwind-variants');
 const index = require('../../chunks/index-BBPgtFEP.js');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
-require('../../chunks/index-y7UFhQ9u.js');
+require('../../chunks/index-DfEZ5Urq.js');
 const uniqId = require('../../chunks/uniq-id-Cszs24DQ.js');
 
 const debounceFunction = (func, timeout = 100) => {

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

@@ -4,7 +4,7 @@ import { tv } from 'tailwind-variants';
 import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
-import '../../chunks/index-Chs3AjPK.js';
+import '../../chunks/index-BptDRJ4b.js';
 import { u as uniqId } from '../../chunks/uniq-id-CGUN-pJV.js';
 
 const debounceFunction = (func, timeout = 100) => {