@lukso/web-components 1.31.1 → 1.32.0

package/dist/components/index.cjs

@@ -20,11 +20,11 @@ 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-6683f423.cjs');
+const shared_tailwindElement_index = require('../index-1c3e0838.cjs');
 require('../directive-db00f5fb.cjs');
 require('../state-a62a7d5d.cjs');
 require('../index-7dc05ee5.cjs');
-require('../style-map-11254084.cjs');
+require('../style-map-a55221fe.cjs');
 require('../style-map-ce3031bc.cjs');
 
 

package/dist/components/index.js

@@ -16,9 +16,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-2754b007.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-e26b8ca5.js';
 import '../directive-9ec64c08.js';
 import '../state-7fde94d1.js';
 import '../index-714323c9.js';
-import '../style-map-abc9b925.js';
+import '../style-map-5f187498.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-6683f423.cjs');
+const shared_tailwindElement_index = require('../../index-1c3e0838.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-2754b007.js';
+import { T as TailwindStyledElement, x } from '../../index-e26b8ca5.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-card/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6683f423.cjs');
+const shared_tailwindElement_index = require('../../index-1c3e0838.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-11254084.cjs');
+const styleMap = require('../../style-map-a55221fe.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-profile/index.cjs');
 
@@ -129,12 +129,67 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       </div>
     `;
   }
+  profile2Template() {
+    return shared_tailwindElement_index.x`
+      <div
+        data-testid="card"
+        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${index.customClassMap({
+      [this.mediumStyles]: !this.customClass && this.size === "medium",
+      [this.smallStyles]: !this.customClass && this.size === "small",
+      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
+      [this.customClass]: !!this.customClass,
+      ["w-[362px]"]: this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight,
+      ["w-full"]: this.isFullWidth
+    })}"
+      >
+        <div
+          style=${styleMap.o({
+      backgroundImage: `url(${this.backgroundUrl})`
+    })}
+          class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative"
+        >
+          <div
+            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10 absolute opacity-10"
+          ></div>
+          <div>
+            <slot name="header"></slot>
+          </div>
+        </div>
+        <div class="grid grid-rows-[max-content,auto]">
+          <div class="bg-neutral-100 shadow-neutral-drop-shadow relative">
+            <lukso-profile
+              profile-url=${this.profileUrl}
+              size="large"
+              profile-address=${this.profileAddress}
+              has-identicon
+              class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
+            ></lukso-profile>
+            <div
+              class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
+            >
+              <div
+                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]
+              shadow-neutral-above-shadow-1xl"
+              ></div>
+            </div>
+            <slot name="content"></slot>
+          </div>
+          <div class="bg-neutral-97 rounded-b-24">
+            <slot name="bottom"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
   render() {
     switch (this.variant) {
       case "with-header":
         return this.withHeaderTemplate();
       case "profile":
         return this.profileTemplate();
+      case "profile-2":
+        return this.profile2Template();
       default:
         return this.basicTemplate();
     }

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

@@ -1,4 +1,4 @@
-export type CardVariants = 'basic' | 'with-header' | 'profile';
+export type CardVariants = 'basic' | 'with-header' | 'profile' | 'profile-2';
 export type CardSizes = 'small' | 'medium';
 declare const LuksoCard_base: typeof import("lit").LitElement;
 export declare class LuksoCard extends LuksoCard_base {
@@ -18,6 +18,7 @@ export declare class LuksoCard extends LuksoCard_base {
     basicTemplate(): import("lit").TemplateResult<1>;
     withHeaderTemplate(): import("lit").TemplateResult<1>;
     profileTemplate(): import("lit").TemplateResult<1>;
+    profile2Template(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x } from '../../index-2754b007.js';
+import { T as TailwindStyledElement, x } from '../../index-e26b8ca5.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-abc9b925.js';
+import { o } from '../../style-map-5f187498.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 import '../lukso-profile/index.js';
 
@@ -125,12 +125,67 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       </div>
     `;
   }
+  profile2Template() {
+    return x`
+      <div
+        data-testid="card"
+        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${customClassMap({
+      [this.mediumStyles]: !this.customClass && this.size === "medium",
+      [this.smallStyles]: !this.customClass && this.size === "small",
+      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
+      [this.customClass]: !!this.customClass,
+      ["w-[362px]"]: this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight,
+      ["w-full"]: this.isFullWidth
+    })}"
+      >
+        <div
+          style=${o({
+      backgroundImage: `url(${this.backgroundUrl})`
+    })}
+          class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative"
+        >
+          <div
+            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10 absolute opacity-10"
+          ></div>
+          <div>
+            <slot name="header"></slot>
+          </div>
+        </div>
+        <div class="grid grid-rows-[max-content,auto]">
+          <div class="bg-neutral-100 shadow-neutral-drop-shadow relative">
+            <lukso-profile
+              profile-url=${this.profileUrl}
+              size="large"
+              profile-address=${this.profileAddress}
+              has-identicon
+              class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
+            ></lukso-profile>
+            <div
+              class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
+            >
+              <div
+                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]
+              shadow-neutral-above-shadow-1xl"
+              ></div>
+            </div>
+            <slot name="content"></slot>
+          </div>
+          <div class="bg-neutral-97 rounded-b-24">
+            <slot name="bottom"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
   render() {
     switch (this.variant) {
       case "with-header":
         return this.withHeaderTemplate();
       case "profile":
         return this.profileTemplate();
+      case "profile-2":
+        return this.profile2Template();
       default:
         return this.basicTemplate();
     }

package/dist/components/lukso-card/lukso-card.stories.d.ts

@@ -14,6 +14,8 @@ export declare const CardWithHeader: any;
 export declare const CardWithCustomHeader: any;
 /** Example of `profile` variant. This variant additionally uses `background-url`, `profile-url` and `profile-address` properties.  */
 export declare const ProfileCard: any;
+/** Example of `profile-2` variant.  */
+export declare const Profile2Card: any;
 /** You can customize card with `custom-class` property, it will be used instead of default styles.  */
 export declare const CustomCard: any;
 /** You can select card size with `size` property.  */

package/dist/components/lukso-card/lukso-card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/lukso-card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB,qJAAqJ;AACrJ,QAAA,MAAM,IAAI,EAAE,IA4IX,CAAA;AAED,eAAe,IAAI,CAAA;AAsFnB,iDAAiD;AACjD,eAAO,MAAM,WAAW,KAA2B,CAAA;AAQnD,qGAAqG;AACrG,eAAO,MAAM,SAAS,KAA2B,CAAA;AAYjD,kGAAkG;AAClG,eAAO,MAAM,aAAa,KAA2B,CAAA;AAWrD,wCAAwC;AACxC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAatD,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,KAAgC,CAAA;AAajE,sIAAsI;AACtI,eAAO,MAAM,WAAW,KAA2B,CAAA;AAmBnD,uGAAuG;AACvG,eAAO,MAAM,UAAU,KAA2B,CAAA;AAalD,sDAAsD;AACtD,eAAO,MAAM,SAAS,KAA2B,CAAA;AAKjD,sEAAsE;AACtE,eAAO,MAAM,aAAa,KAA2B,CAAA"}
+{"version":3,"file":"lukso-card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/lukso-card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB,qJAAqJ;AACrJ,QAAA,MAAM,IAAI,EAAE,IA8IX,CAAA;AAED,eAAe,IAAI,CAAA;AAwFnB,iDAAiD;AACjD,eAAO,MAAM,WAAW,KAA2B,CAAA;AAQnD,qGAAqG;AACrG,eAAO,MAAM,SAAS,KAA2B,CAAA;AAYjD,kGAAkG;AAClG,eAAO,MAAM,aAAa,KAA2B,CAAA;AAWrD,wCAAwC;AACxC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAatD,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,KAAgC,CAAA;AAajE,sIAAsI;AACtI,eAAO,MAAM,WAAW,KAA2B,CAAA;AAmBnD,uCAAuC;AACvC,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,uGAAuG;AACvG,eAAO,MAAM,UAAU,KAA2B,CAAA;AAalD,sDAAsD;AACtD,eAAO,MAAM,SAAS,KAA2B,CAAA;AAKjD,sEAAsE;AACtE,eAAO,MAAM,aAAa,KAA2B,CAAA"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6683f423.cjs');
+const shared_tailwindElement_index = require('../../index-1c3e0838.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
@@ -22,26 +22,19 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
   constructor() {
     super(...arguments);
     this.name = "";
-    this.label = "";
     this.id = "";
     this.ref = void 0;
     this.type = "text";
     this.size = "medium";
     this.error = "";
-    this.profileUrl = "";
-    this.profileAddress = "";
-    this.hasIdenticon = false;
-    this.upUsername = "";
-    this.upAddress = "";
+    this.checked = false;
     this.customClass = "";
     this.isReadonly = false;
     this.isDisabled = false;
-    this.isChecked = false;
     this.hasFocus = false;
-    this.hasChecked = false;
     this.hasHighlight = false;
     this.defaultContainerStyles = `
-        flex items-center
+        flex items-center gap-2
         border border-solid border-neutral-100      
         select-none  
     `;
@@ -52,7 +45,7 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
         opacity-0
     `;
     this.defaultLabelStyles = `
-    pl-2 text-neutral-20 block
+    text-neutral-20 block
     `;
     this.defaultCheckboxStyles = `
     relative
@@ -61,25 +54,14 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
     border border-solid rounded-md
     outline-none transition transition-all duration-150 appearance-none`;
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.hasChecked = this.isChecked;
-  }
-  attributeChangedCallback(name, _old, value) {
-    super.attributeChangedCallback(name, _old, value);
-    if (name === "is-checked") {
-      this.hasChecked = this.isChecked;
-      this.requestUpdate();
-    }
-  }
   checkedIconTemplate() {
     return shared_tailwindElement_index.x`
       <lukso-icon
         class=${index.customClassMap({
-      hidden: !this.hasChecked
+      hidden: !this.checked
     })}
         name="tick"
-        color="neutral-20"
+        color=${this.isDisabled ? "neutral-60" : "neutral-20"}
       ></lukso-icon>
     `;
   }
@@ -90,9 +72,7 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
       [this.defaultCheckboxStyles]: true,
       [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
       [this.error === "" ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
-      ["cursor-not-allowed text-neutral-60"]: this.isDisabled,
-      ["text-neutral-20"]: !this.isDisabled,
-      ["cursor-not-allowed"]: this.isReadonly,
+      ["border-neutral-60"]: this.isDisabled,
       ["h-[40px] w-[40px]"]: this.size === "medium",
       ["h-[32px] w-[32px]"]: this.size === "small",
       ["h-[28px] w-[28px]"]: this.size === "x-small",
@@ -108,16 +88,18 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
     return shared_tailwindElement_index.x`
       <input
         name=${this.name}
-        ?checked=${this.hasChecked ? "checked" : void 0}
+        ?checked=${this.checked ? "checked" : void 0}
         type="checkbox"
         class=${index.customClassMap({
-      [this.defaultInputStyles]: true
+      [this.defaultInputStyles]: true,
+      ["text-neutral-60"]: this.isDisabled
     })}
         ref=${this.ref}
         id=${id}
         data-testid=${this.name ? `input-${this.name}` : "input"}
         ?disabled=${this.isDisabled ? true : void 0}
-        @change=${this.handleChange}
+        ?readonly=${this.isReadonly ? true : void 0}
+        @change=${!this.isReadonly ? this.handleChange : "return false;"}
       />
     `;
   }
@@ -135,61 +117,18 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
       [this.defaultLabelStyles]: true,
       ["paragraph-inter-16-regular"]: this.size === "medium" || this.size === "small",
       ["paragraph-inter-12-semi-bold"]: this.size === "x-small",
-      ["text-red-65"]: this.error !== ""
+      ["text-red-65"]: this.error !== "",
+      ["text-neutral-60"]: this.isDisabled
     })}
-        >${this.label}</span
       >
-    `;
-  }
-  profileTemplate() {
-    let size;
-    switch (this.size) {
-      case "medium":
-        size = "small";
-        break;
-      case "small":
-      case "x-small":
-      default:
-        size = "x-small";
-        break;
-    }
-    return shared_tailwindElement_index.x`
-      <lukso-profile
-        class="ml-2"
-        profile-url=${this.profileUrl}
-        profile-address=${this.profileAddress}
-        has-identicon=${this.hasIdenticon}
-        size=${size}
-      ></lukso-profile>
-    `;
-  }
-  usernameTemplate() {
-    let size;
-    switch (this.size) {
-      case "medium":
-        size = "large";
-        break;
-      case "small":
-        size = "small";
-        break;
-      case "x-small":
-      default:
-        size = "x-small";
-        break;
-    }
-    return shared_tailwindElement_index.x`
-      <lukso-username
-        class="ml-2"
-        name=${this.upUsername}
-        address=${this.upAddress}
-        size=${size}
-      ></lukso-username>
+        <slot></slot>
+      </span>
     `;
   }
   profileUsernameTemplate() {
     return shared_tailwindElement_index.x`
-      <div class="flex items-center">
-        ${this.profileTemplate()} ${this.usernameTemplate()}
+      <div class="flex items-center text-neutral-20 gap-2 justify-center">
+        <slot></slot>
       </div>
     `;
   }
@@ -198,7 +137,10 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
       <div>
         <label
           for=${this.name}
-          class=${this.defaultContainerStyles}
+          class=${index.customClassMap({
+      [this.defaultContainerStyles]: true,
+      ["cursor-not-allowed"]: this.isDisabled || this.isReadonly
+    })}
           @mouseenter=${this.handleMouseOver}
           @mouseleave=${this.handleMouseOut}
         >
@@ -210,16 +152,18 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
   }
   handleChange(event) {
     const target = event.target;
-    const changeEvent = new CustomEvent("on-change", {
-      detail: {
-        value: target.value,
-        event
-      },
-      bubbles: false,
-      composed: true
-    });
-    this.hasChecked = !this.hasChecked;
-    this.dispatchEvent(changeEvent);
+    this.checked = target.checked;
+    this.dispatchEvent(
+      new CustomEvent("on-change", {
+        detail: {
+          value: target.value,
+          checked: target.checked,
+          event
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   handleMouseOver() {
     if (!this.isReadonly && !this.isDisabled) {
@@ -235,9 +179,6 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
 __decorateClass([
   directive.e({ type: String })
 ], exports.LuksoCheckbox.prototype, "name", 2);
-__decorateClass([
-  directive.e({ type: String })
-], exports.LuksoCheckbox.prototype, "label", 2);
 __decorateClass([
   directive.e({ type: String })
 ], exports.LuksoCheckbox.prototype, "id", 2);
@@ -254,20 +195,8 @@ __decorateClass([
   directive.e({ type: String })
 ], exports.LuksoCheckbox.prototype, "error", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "profile-url" })
-], exports.LuksoCheckbox.prototype, "profileUrl", 2);
-__decorateClass([
-  directive.e({ type: String, attribute: "profile-address" })
-], exports.LuksoCheckbox.prototype, "profileAddress", 2);
-__decorateClass([
-  directive.e({ type: Boolean, attribute: "has-identicon" })
-], exports.LuksoCheckbox.prototype, "hasIdenticon", 2);
-__decorateClass([
-  directive.e({ type: String, attribute: "up-username" })
-], exports.LuksoCheckbox.prototype, "upUsername", 2);
-__decorateClass([
-  directive.e({ type: String, attribute: "up-address" })
-], exports.LuksoCheckbox.prototype, "upAddress", 2);
+  directive.e({ type: Boolean })
+], exports.LuksoCheckbox.prototype, "checked", 2);
 __decorateClass([
   directive.e({ type: String, attribute: "custom-class" })
 ], exports.LuksoCheckbox.prototype, "customClass", 2);
@@ -277,15 +206,9 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoCheckbox.prototype, "isDisabled", 2);
-__decorateClass([
-  directive.e({ type: Boolean, attribute: "is-checked" })
-], exports.LuksoCheckbox.prototype, "isChecked", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoCheckbox.prototype, "hasFocus", 2);
-__decorateClass([
-  state.t()
-], exports.LuksoCheckbox.prototype, "hasChecked", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoCheckbox.prototype, "hasHighlight", 2);

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

@@ -3,37 +3,26 @@ export type CheckboxSize = 'x-small' | 'small' | 'medium';
 export type CheckboxType = 'text' | 'profile';
 export declare class LuksoCheckbox extends TailwindElement {
     name: string;
-    label: string;
     id: string;
     ref: string | undefined;
     type: CheckboxType;
     size: CheckboxSize;
     error: string;
-    profileUrl: string;
-    profileAddress: string;
-    hasIdenticon: boolean;
-    upUsername: string;
-    upAddress: string;
+    checked: boolean;
     customClass: string;
     isReadonly: boolean;
     isDisabled: boolean;
-    isChecked: boolean;
     private hasFocus;
-    private hasChecked;
     private hasHighlight;
     private defaultContainerStyles;
     private defaultInputStyles;
     private defaultLabelStyles;
     private defaultCheckboxStyles;
-    connectedCallback(): void;
-    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     checkedIconTemplate(): unknown;
     checkboxTemplate(): unknown;
     inputTemplate(): import("lit").TemplateResult<1>;
     errorTemplate(): import("lit").TemplateResult<1>;
     labelTemplate(): import("lit").TemplateResult<1>;
-    profileTemplate(): import("lit").TemplateResult<1>;
-    usernameTemplate(): import("lit").TemplateResult<1>;
     profileUsernameTemplate(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
     private handleChange;