@lukso/web-components 1.27.0 → 1.29.0

package/dist/components/index.cjs

@@ -18,11 +18,12 @@ const components_luksoTerms_index = require('./lukso-terms/index.cjs');
 const components_luksoTest_index = require('./lukso-test/index.cjs');
 const components_luksoUsername_index = require('./lukso-username/index.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-430746dd.cjs');
+const shared_tailwindElement_index = require('../index-c600bfd6.cjs');
 require('../directive-db00f5fb.cjs');
 require('../state-a62a7d5d.cjs');
 require('../index-7dc05ee5.cjs');
-require('../style-map-3b3cdad1.cjs');
+require('../style-map-09c2cd24.cjs');
+require('../style-map-ce3031bc.cjs');
 
 
 

package/dist/components/index.js

@@ -14,8 +14,9 @@ export { LuksoTerms } from './lukso-terms/index.js';
 export { LuksoTest } from './lukso-test/index.js';
 export { LuksoUsername } from './lukso-username/index.js';
 export { LuksoWizard } from './lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from '../index-1fd66a06.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-90c43338.js';
 import '../directive-9ec64c08.js';
 import '../state-7fde94d1.js';
 import '../index-714323c9.js';
-import '../style-map-a05761f1.js';
+import '../style-map-105316ca.js';
+import '../style-map-06219dec.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-430746dd.cjs');
+const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
@@ -37,6 +37,8 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
     this.rel = "";
     this.loadingText = "";
     this.customClass = "";
+    this.isActive = false;
+    this.count = "";
     this.isPressed = false;
     this.noTransition = false;
     this.timer = 0;
@@ -109,6 +111,18 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
       ></lukso-icon>
       ${this.loadingText}`;
   }
+  counterTemplate() {
+    return shared_tailwindElement_index.x`
+      <span
+        class=${index.customClassMap({
+      "ml-2 border border-neutral-20 rounded-4 px-[2px] py-[1px] paragraph-inter-10-semi-bold": true,
+      ["text-neutral-100 bg-neutral-20"]: this.isActive,
+      ["text-neutral-20 bg-neutral-100"]: !this.isActive
+    })}
+        >${this.count}</span
+      >
+    `;
+  }
   buttonTemplate() {
     return shared_tailwindElement_index.x`
       <button
@@ -127,6 +141,7 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
       [this.longPressStyles]: this.isLongPress,
       [this.pressedStyles]: this.isPressed,
       [this.noTransitionStyles]: this.noTransition,
+      ["!border-neutral-20"]: this.isActive && this.variant === "secondary",
       [this.customClass]: !!this.customClass
     })}
         @mousedown=${this.handleMouseDown}
@@ -134,6 +149,7 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
         @mouseleave=${this.handleMouseUp}
       >
         ${this.isLoading ? this.loadingTemplate() : shared_tailwindElement_index.x`<slot></slot>`}
+        ${this.count ? this.counterTemplate() : ""}
       </button>
     `;
   }
@@ -151,6 +167,7 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
       [this.textStyles]: this.variant === "text",
       [this.linkStyles]: this.variant === "text",
       ["w-full"]: this.isFullWidth,
+      ["!border-neutral-20"]: this.isActive && this.variant === "secondary",
       [this.customClass]: !!this.customClass
     })}
         href=${this.href}
@@ -204,6 +221,12 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: String, attribute: "custom-class" })
 ], exports.LuksoButton.prototype, "customClass", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-active" })
+], exports.LuksoButton.prototype, "isActive", 2);
+__decorateClass([
+  directive.e({ type: Number })
+], exports.LuksoButton.prototype, "count", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoButton.prototype, "isPressed", 2);

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-1fd66a06.js';
+import { T as TailwindStyledElement, x } from '../../index-90c43338.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { t } from '../../state-7fde94d1.js';
 import { c as customClassMap } from '../../index-714323c9.js';
@@ -33,6 +33,8 @@ let LuksoButton = class extends TailwindStyledElement(style) {
     this.rel = "";
     this.loadingText = "";
     this.customClass = "";
+    this.isActive = false;
+    this.count = "";
     this.isPressed = false;
     this.noTransition = false;
     this.timer = 0;
@@ -105,6 +107,18 @@ let LuksoButton = class extends TailwindStyledElement(style) {
       ></lukso-icon>
       ${this.loadingText}`;
   }
+  counterTemplate() {
+    return x`
+      <span
+        class=${customClassMap({
+      "ml-2 border border-neutral-20 rounded-4 px-[2px] py-[1px] paragraph-inter-10-semi-bold": true,
+      ["text-neutral-100 bg-neutral-20"]: this.isActive,
+      ["text-neutral-20 bg-neutral-100"]: !this.isActive
+    })}
+        >${this.count}</span
+      >
+    `;
+  }
   buttonTemplate() {
     return x`
       <button
@@ -123,6 +137,7 @@ let LuksoButton = class extends TailwindStyledElement(style) {
       [this.longPressStyles]: this.isLongPress,
       [this.pressedStyles]: this.isPressed,
       [this.noTransitionStyles]: this.noTransition,
+      ["!border-neutral-20"]: this.isActive && this.variant === "secondary",
       [this.customClass]: !!this.customClass
     })}
         @mousedown=${this.handleMouseDown}
@@ -130,6 +145,7 @@ let LuksoButton = class extends TailwindStyledElement(style) {
         @mouseleave=${this.handleMouseUp}
       >
         ${this.isLoading ? this.loadingTemplate() : x`<slot></slot>`}
+        ${this.count ? this.counterTemplate() : ""}
       </button>
     `;
   }
@@ -147,6 +163,7 @@ let LuksoButton = class extends TailwindStyledElement(style) {
       [this.textStyles]: this.variant === "text",
       [this.linkStyles]: this.variant === "text",
       ["w-full"]: this.isFullWidth,
+      ["!border-neutral-20"]: this.isActive && this.variant === "secondary",
       [this.customClass]: !!this.customClass
     })}
         href=${this.href}
@@ -200,6 +217,12 @@ __decorateClass([
 __decorateClass([
   e({ type: String, attribute: "custom-class" })
 ], LuksoButton.prototype, "customClass", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "is-active" })
+], LuksoButton.prototype, "isActive", 2);
+__decorateClass([
+  e({ type: Number })
+], LuksoButton.prototype, "count", 2);
 __decorateClass([
   t()
 ], LuksoButton.prototype, "isPressed", 2);

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-430746dd.cjs');
+const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-3b3cdad1.cjs');
+const styleMap = require('../../style-map-09c2cd24.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-profile/index.cjs');
 

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x } from '../../index-1fd66a06.js';
+import { T as TailwindStyledElement, x } from '../../index-90c43338.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-a05761f1.js';
+import { o } from '../../style-map-105316ca.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 import '../lukso-profile/index.js';
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-430746dd.cjs');
+const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-3b3cdad1.cjs');
+const styleMap = require('../../style-map-09c2cd24.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
 

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

@@ -1,6 +1,6 @@
-import { x, T as TailwindStyledElement } from '../../index-1fd66a06.js';
+import { x, T as TailwindStyledElement } from '../../index-90c43338.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-a05761f1.js';
+import { o } from '../../style-map-105316ca.js';
 
 const style = ":host {\n    display: inline-flex\n}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-430746dd.cjs');
+const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
@@ -48,7 +48,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     this.defaultUnitStyles = `paragraph-inter-12-regular text-neutral-60 flex px-3.5 items-center relative
     border border-solid h-[48px] transition transition-all duration-150
     rounded-r-12 border-l-0 before:bg-neutral-90 before:absolute before:top-[calc(50%-12px)] before:left-0
-    before:w-[1px] before:h-[24px] whitespace-nowrap`;
+    before:w-[1px] before:h-[24px] whitespace-nowrap cursor-pointer`;
   }
   // @input works better in vue
   inputTemplate() {
@@ -124,6 +124,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     })}
       @mouseenter=${this.handleMouseOver}
       @mouseleave=${this.handleMouseOut}
+      @click=${this.handleUnitClick}
     >
       ${this.unit}
     </div>`;
@@ -218,6 +219,18 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
       this.hasHighlight = false;
     }
   }
+  handleUnitClick() {
+    const input = this.shadowRoot?.querySelector("input");
+    const clickEvent = new CustomEvent("on-unit-click", {
+      detail: {
+        input
+      },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(clickEvent);
+    input.focus();
+  }
   render() {
     return shared_tailwindElement_index.x`
       <div>

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x, A } from '../../index-1fd66a06.js';
+import { a as TailwindElement, x, A } from '../../index-90c43338.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { t } from '../../state-7fde94d1.js';
 import { c as customClassMap } from '../../index-714323c9.js';
@@ -44,7 +44,7 @@ let LuksoInput = class extends TailwindElement {
     this.defaultUnitStyles = `paragraph-inter-12-regular text-neutral-60 flex px-3.5 items-center relative
     border border-solid h-[48px] transition transition-all duration-150
     rounded-r-12 border-l-0 before:bg-neutral-90 before:absolute before:top-[calc(50%-12px)] before:left-0
-    before:w-[1px] before:h-[24px] whitespace-nowrap`;
+    before:w-[1px] before:h-[24px] whitespace-nowrap cursor-pointer`;
   }
   // @input works better in vue
   inputTemplate() {
@@ -120,6 +120,7 @@ let LuksoInput = class extends TailwindElement {
     })}
       @mouseenter=${this.handleMouseOver}
       @mouseleave=${this.handleMouseOut}
+      @click=${this.handleUnitClick}
     >
       ${this.unit}
     </div>`;
@@ -214,6 +215,18 @@ let LuksoInput = class extends TailwindElement {
       this.hasHighlight = false;
     }
   }
+  handleUnitClick() {
+    const input = this.shadowRoot?.querySelector("input");
+    const clickEvent = new CustomEvent("on-unit-click", {
+      detail: {
+        input
+      },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(clickEvent);
+    input.focus();
+  }
   render() {
     return x`
       <div>

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-430746dd.cjs');
+const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-1fd66a06.js';
+import { a as TailwindElement, x } from '../../index-90c43338.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-430746dd.cjs');
+const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-1fd66a06.js';
+import { a as TailwindElement, x } from '../../index-90c43338.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { t } from '../../state-7fde94d1.js';
 import { c as customClassMap } from '../../index-714323c9.js';

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

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-430746dd.cjs');
+const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-3b3cdad1.cjs');
+const styleMap = require('../../style-map-09c2cd24.cjs');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-var mainExports = {};
-var main = {
-  get exports(){ return mainExports; },
-  set exports(v){ mainExports = v; },
-};
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var main = {exports: {}};
 
 (function (module, exports) {
 	(function webpackUniversalModuleDefinition(root, factory) {
@@ -444,6 +444,9 @@ var main = {
 	});
 } (main));
 
+var mainExports = main.exports;
+const makeBlockie = /*@__PURE__*/getDefaultExportFromCjs(mainExports);
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -493,7 +496,7 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
     return this.sizes[this.size].identiconSize;
   }
   identicon() {
-    return this.hasIdenticon && this.profileAddress && this.identiconSize() ? mainExports(this.profileAddress) : "";
+    return this.hasIdenticon && this.profileAddress && this.identiconSize() ? makeBlockie(this.profileAddress) : "";
   }
   render() {
     return shared_tailwindElement_index.x`

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

@@ -1,14 +1,14 @@
-import { a as TailwindElement, x } from '../../index-1fd66a06.js';
+import { a as TailwindElement, x } from '../../index-90c43338.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-a05761f1.js';
+import { o } from '../../style-map-105316ca.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-var mainExports = {};
-var main = {
-  get exports(){ return mainExports; },
-  set exports(v){ mainExports = v; },
-};
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var main = {exports: {}};
 
 (function (module, exports) {
 	(function webpackUniversalModuleDefinition(root, factory) {
@@ -440,6 +440,9 @@ var main = {
 	});
 } (main));
 
+var mainExports = main.exports;
+const makeBlockie = /*@__PURE__*/getDefaultExportFromCjs(mainExports);
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -489,7 +492,7 @@ let LuksoProfile = class extends TailwindElement {
     return this.sizes[this.size].identiconSize;
   }
   identicon() {
-    return this.hasIdenticon && this.profileAddress && this.identiconSize() ? mainExports(this.profileAddress) : "";
+    return this.hasIdenticon && this.profileAddress && this.identiconSize() ? makeBlockie(this.profileAddress) : "";
   }
   render() {
     return x`

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-430746dd.cjs');
+const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-3b3cdad1.cjs');
+const styleMap = require('../../style-map-ce3031bc.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
 var __defProp = Object.defineProperty;

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-1fd66a06.js';
+import { a as TailwindElement, x } from '../../index-90c43338.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-a05761f1.js';
+import { o } from '../../style-map-06219dec.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
 var __defProp = Object.defineProperty;