@lukso/web-components 1.15.0 → 1.17.0

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

@@ -1,5 +1,6 @@
-import { a as TailwindElement, y } from '../../index-92dc4a16.js';
+import { a as TailwindElement, y } from '../../index-7a686142.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';
 
 var __defProp = Object.defineProperty;
@@ -20,7 +21,7 @@ let LuksoNavbar = class extends TailwindElement {
     this.isCenter = false;
     this.isSticky = false;
     this.isTransparent = false;
-    this.defaultStyles = `bg-neutral-100 shadow-pink-drop-shadow h-78 flex`;
+    this.isMenuOpen = false;
     this.centerStyles = `justify-center`;
     this.stickyStyles = `sticky top-0 z-[1000]`;
     this.transparentStyles = `!bg-transparent !shadow-none`;
@@ -32,16 +33,57 @@ let LuksoNavbar = class extends TailwindElement {
     });
     this.dispatchEvent(event);
   }
+  handleMenuToggle() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+  desktopMenuTemplate() {
+    return y`<div
+      class="w-full items-center justify-end pr-10 no-underline hidden md:flex"
+    >
+      <slot name="desktop"></slot>
+    </div>`;
+  }
+  mobileMenuTemplate() {
+    return y`<div
+      class="w-full items-center justify-end pr-6 flex md:hidden"
+    >
+      <div
+        class="flex items-center justify-center w-8 h-8 cursor-pointer"
+        @click=${this.handleMenuToggle}
+      >
+        <div
+          class="w-[18px] h-[2px] rounded-4 bg-neutral-20 transition-all
+        before:content-[''] before:absolute before:w-[18px] before:h-[2px] before:bg-neutral-20 before:rounded-4 before:transition-all before:-translate-y-[6px]
+        after:content-[''] after:absolute after:w-[18px] after:h-[2px] after:bg-neutral-20 after:rounded-4 after:transition-all after:translate-y-[6px]
+        ${customClassMap({
+      "!bg-transparent before:rotate-[45deg] before:!-translate-y-[0px] after:-rotate-[45deg] after:!translate-y-[0px]": this.isMenuOpen
+    })}
+      "
+        ></div>
+      </div>
+      <div
+        class="fixed top-[78px] left-0 w-full h-full bg-neutral-100 z-[1000] justify-center
+      items-center flex md:hidden
+    ${customClassMap({
+      "animate-fade-in animation-duration-150": this.isMenuOpen,
+      "!hidden": !this.isMenuOpen
+    })}"
+        @click=${this.handleMenuToggle}
+      >
+        <slot name="mobile"></slot>
+      </div>
+    </div>`;
+  }
   render() {
     return y`
       <nav
         data-testid="navbar"
-        class=${customClassMap({
-      [this.defaultStyles]: true,
+        class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex
+        ${customClassMap({
       [this.centerStyles]: this.isCenter,
       [this.stickyStyles]: this.isSticky,
       [this.transparentStyles]: this.isTransparent
-    })}
+    })}"
       >
         <div
           class="flex items-center px-7 h-full cursor-pointer sm:px-10"
@@ -55,7 +97,7 @@ let LuksoNavbar = class extends TailwindElement {
             <span>${this.title}</span>
           </div>
         </div>
-        <slot></slot>
+        ${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}
       </nav>
     `;
   }
@@ -72,6 +114,9 @@ __decorateClass([
 __decorateClass([
   e({ type: Boolean, attribute: "is-transparent" })
 ], LuksoNavbar.prototype, "isTransparent", 2);
+__decorateClass([
+  t()
+], LuksoNavbar.prototype, "isMenuOpen", 2);
 LuksoNavbar = __decorateClass([
   e$1("lukso-navbar")
 ], LuksoNavbar);

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-49e68682.cjs');
+const shared_tailwindElement_index = require('../../index-0f13d58e.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-917244c9.cjs');
+const styleMap = require('../../style-map-0d95bd3c.cjs');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, y } from '../../index-92dc4a16.js';
+import { a as TailwindElement, y } from '../../index-7a686142.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-21d737a8.js';
+import { i } from '../../style-map-9d612f4e.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

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

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared_tailwindElement_index = require('../../index-0f13d58e.cjs');
+const directive = require('../../directive-db00f5fb.cjs');
+const styleMap = require('../../style-map-0d95bd3c.cjs');
+const index = require('../../index-7dc05ee5.cjs');
+
+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.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.min = 0;
+    this.max = 100;
+    this.current = 0;
+    this.variant = "success";
+  }
+  progressWidth() {
+    return this.current / this.max * 100;
+  }
+  render() {
+    return shared_tailwindElement_index.y`
+      <div
+        data-testid="progress"
+        class='w-full h-[12px] shadow-neutral-inner-shadow rounded-24 bg-neutral-95'
+      >
+        <div
+          class="h-[12px] rounded-s-24 rounded-e-16 border border-solid transition-all w-[1%] ${index.customClassMap(
+      {
+        "bg-green-85 border-green-54": !!this.variant || this.variant === "success",
+        "bg-red-85 border-red-65": this.variant === "error"
+      }
+    )}"
+          style=${styleMap.i({
+      width: `${this.progressWidth()}%`
+    })}
+        >
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  directive.e({ type: Number })
+], exports.LuksoProgress.prototype, "min", 2);
+__decorateClass([
+  directive.e({ type: Number })
+], exports.LuksoProgress.prototype, "max", 2);
+__decorateClass([
+  directive.e({ type: Number })
+], exports.LuksoProgress.prototype, "current", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoProgress.prototype, "variant", 2);
+exports.LuksoProgress = __decorateClass([
+  directive.e$1("lukso-progress")
+], exports.LuksoProgress);

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

@@ -0,0 +1,16 @@
+import { TailwindElement } from '../../shared/tailwind-element';
+export declare type ProgressVariant = 'success' | 'error';
+export declare class LuksoProgress extends TailwindElement {
+    min: number;
+    max: number;
+    current: number;
+    variant: ProgressVariant;
+    private progressWidth;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lukso-progress': LuksoProgress;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/lukso-progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,oBAAY,eAAe,GAAG,SAAS,GAAG,OAAO,CAAA;AAEjD,qBACa,aAAc,SAAQ,eAAe;IAEhD,GAAG,SAAI;IAGP,GAAG,SAAM;IAGT,OAAO,SAAI;IAGX,OAAO,EAAE,eAAe,CAAY;IAEpC,OAAO,CAAC,aAAa;IAIrB,MAAM;CAuBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

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

@@ -0,0 +1,67 @@
+import { a as TailwindElement, y } from '../../index-7a686142.js';
+import { e, a as e$1 } from '../../directive-9ec64c08.js';
+import { i } from '../../style-map-9d612f4e.js';
+import { c as customClassMap } from '../../index-714323c9.js';
+
+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 LuksoProgress = class extends TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.min = 0;
+    this.max = 100;
+    this.current = 0;
+    this.variant = "success";
+  }
+  progressWidth() {
+    return this.current / this.max * 100;
+  }
+  render() {
+    return y`
+      <div
+        data-testid="progress"
+        class='w-full h-[12px] shadow-neutral-inner-shadow rounded-24 bg-neutral-95'
+      >
+        <div
+          class="h-[12px] rounded-s-24 rounded-e-16 border border-solid transition-all w-[1%] ${customClassMap(
+      {
+        "bg-green-85 border-green-54": !!this.variant || this.variant === "success",
+        "bg-red-85 border-red-65": this.variant === "error"
+      }
+    )}"
+          style=${i({
+      width: `${this.progressWidth()}%`
+    })}
+        >
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  e({ type: Number })
+], LuksoProgress.prototype, "min", 2);
+__decorateClass([
+  e({ type: Number })
+], LuksoProgress.prototype, "max", 2);
+__decorateClass([
+  e({ type: Number })
+], LuksoProgress.prototype, "current", 2);
+__decorateClass([
+  e({ type: String })
+], LuksoProgress.prototype, "variant", 2);
+LuksoProgress = __decorateClass([
+  e$1("lukso-progress")
+], LuksoProgress);
+
+export { LuksoProgress };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-49e68682.cjs');
+const shared_tailwindElement_index = require('../../index-0f13d58e.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 
 /**

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

@@ -1,4 +1,4 @@
-import { c as b, x, a as TailwindElement, y } from '../../index-92dc4a16.js';
+import { c as b, x, a as TailwindElement, y } from '../../index-7a686142.js';
 import { i, t, b as e$1, e as e$2, a as e$3 } from '../../directive-9ec64c08.js';
 
 /**

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-49e68682.cjs');
+const shared_tailwindElement_index = require('../../index-0f13d58e.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-917244c9.cjs');
+const styleMap = require('../../style-map-0d95bd3c.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
 var __defProp = Object.defineProperty;

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, y } from '../../index-92dc4a16.js';
+import { a as TailwindElement, y } from '../../index-7a686142.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-21d737a8.js';
+import { i } from '../../style-map-9d612f4e.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
 var __defProp = Object.defineProperty;

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-49e68682.cjs');
+const shared_tailwindElement_index = require('../../index-0f13d58e.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-sanitize/index.cjs');
-require('../../style-map-917244c9.cjs');
+require('../../style-map-0d95bd3c.cjs');
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -1,10 +1,10 @@
-import { T as TailwindStyledElement, y } from '../../index-92dc4a16.js';
+import { T as TailwindStyledElement, y } from '../../index-7a686142.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';
 import '../lukso-icon/index.js';
 import '../lukso-sanitize/index.js';
-import '../../style-map-21d737a8.js';
+import '../../style-map-9d612f4e.js';
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-49e68682.cjs');
+const shared_tailwindElement_index = require('../../index-0f13d58e.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 
 /**

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

@@ -1,4 +1,4 @@
-import { x as x$2, T as TailwindStyledElement, y } from '../../index-92dc4a16.js';
+import { x as x$2, T as TailwindStyledElement, y } from '../../index-7a686142.js';
 import { b as e$3, i as i$3, t as t$3, e as e$4, a as e$5 } from '../../directive-9ec64c08.js';
 
 /**

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-49e68682.cjs');
+const shared_tailwindElement_index = require('../../index-0f13d58e.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-917244c9.cjs');
+const styleMap = require('../../style-map-0d95bd3c.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, y } from '../../index-92dc4a16.js';
+import { a as TailwindElement, y } from '../../index-7a686142.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-21d737a8.js';
+import { i } from '../../style-map-9d612f4e.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {

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

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

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

@@ -1,4 +1,4 @@
-import { L, x, a as TailwindElement, y } from '../../index-92dc4a16.js';
+import { L, x, a as TailwindElement, y } from '../../index-7a686142.js';
 import { b as e, i, t, e as e$1, a as e$2 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';