@lukso/web-components 1.51.5 → 1.52.0

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

@@ -10,6 +10,10 @@ export declare const Secondary: any;
 export declare const Landing: any;
 /** Example of `text` variant.  */
 export declare const Text: any;
+/** Example of `nav-button` variant.  */
+export declare const NavButton: any;
+/** Example of `nav-text` variant.  */
+export declare const NavText: any;
 /** If you need button to take full width of the parent element add `is-full-width` property. */
 export declare const FullWidth: any;
 /** In order to have disabled button add `disabled` property. */

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-button/lukso-button.stories.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,eAAe,CAAA;AAEtB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAiMX,CAAA;AAED,eAAe,IAAI,CAAA;AA4DnB,oDAAoD;AACpD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAexC,sCAAsC;AACtC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAW1C,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAWxC,kCAAkC;AAClC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAWrC,gGAAgG;AAChG,eAAO,MAAM,SAAS,KAAoB,CAAA;AAW1C,gEAAgE;AAChE,eAAO,MAAM,cAAc,KAAoB,CAAA;AAa/C,6GAA6G;AAC7G,eAAO,MAAM,UAAU,KAAoB,CAAA;AAc3C;;GAEG;AACH,eAAO,MAAM,eAAe,KAA6B,CAAA;AAazD;4FAC4F;AAC5F,eAAO,MAAM,IAAI,KAAoB,CAAA;AAerC;GACG;AACH,eAAO,MAAM,aAAa,KAAoB,CAAA;AAc9C,uEAAuE;AACvE,eAAO,MAAM,iBAAiB,KAAoB,CAAA;AAalD,iDAAiD;AACjD,eAAO,MAAM,aAAa,KAAoB,CAAA"}
+{"version":3,"file":"lukso-button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-button/lukso-button.stories.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,eAAe,CAAA;AAEtB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAoMX,CAAA;AAED,eAAe,IAAI,CAAA;AAyCnB,oDAAoD;AACpD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAexC,sCAAsC;AACtC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAW1C,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAWxC,kCAAkC;AAClC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAWrC,wCAAwC;AACxC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,sCAAsC;AACtC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,gGAAgG;AAChG,eAAO,MAAM,SAAS,KAAoB,CAAA;AAW1C,gEAAgE;AAChE,eAAO,MAAM,cAAc,KAAoB,CAAA;AAa/C,6GAA6G;AAC7G,eAAO,MAAM,UAAU,KAAoB,CAAA;AAc3C;;GAEG;AACH,eAAO,MAAM,eAAe,KAAoB,CAAA;AAahD;4FAC4F;AAC5F,eAAO,MAAM,IAAI,KAAoB,CAAA;AAerC;GACG;AACH,eAAO,MAAM,aAAa,KAAoB,CAAA;AAc9C,uEAAuE;AACvE,eAAO,MAAM,iBAAiB,KAAoB,CAAA;AAalD,iDAAiD;AACjD,eAAO,MAAM,aAAa,KAAoB,CAAA"}

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

@@ -2,19 +2,334 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-require('../../index-997f3f0e.cjs');
-require('../../query-assigned-elements-1d5d9d4c.cjs');
-require('../../style-map-671a0511.cjs');
-const components_luksoCard_index = require('../../index-619f20e8.cjs');
+const shared_tailwindElement_index = require('../../index-f426e548.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
+const styleMap = require('../../style-map-1175c018.cjs');
 require('../lukso-profile/index.cjs');
-require('../../color-palette.cjs');
-require('../../index-beb7703d.cjs');
+require('../../tailwind-config.cjs');
+const cn = require('../../cn-312c6e88.cjs');
+const index = require('../../index-ace51f33.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../index-e9668573.cjs');
 
+const style = ":host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host([width]) {\n  width: inherit;\n}";
 
-
-Object.defineProperty(exports, 'LuksoCard', {
-	enumerable: true,
-	get: () => components_luksoCard_index.LuksoCard
-});
+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.LuksoCard = class LuksoCard extends shared_tailwindElement_index.TailwindStyledElement(style) {
+  constructor() {
+    super(...arguments);
+    this.variant = "basic";
+    this.backgroundUrl = "";
+    this.profileUrl = "";
+    this.profileAddress = "";
+    this.width = void 0;
+    this.height = void 0;
+    this.customClass = "";
+    this.headerClass = "";
+    this.size = "medium";
+    this.isHoverable = false;
+    this.mediumStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
+    this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
+    this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
+  }
+  backgroundImageOrGradient() {
+    const opacity = "80";
+    const gradientStart = `#${this.profileAddress.slice(2, 8)}${opacity}`;
+    const gradientEnd = `#${this.profileAddress.slice(36, 42)}${opacity}`;
+    if (this.backgroundUrl) {
+      return `url(${this.backgroundUrl})`;
+    }
+    return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
+  }
+  basicTemplate() {
+    return shared_tailwindElement_index.x`
+      <div
+        data-testid="card"
+        style=${index.customStyleMap({
+      [`min-height: ${this.height}px`]: !!this.height,
+      [`width: ${this.width}px`]: !!this.width
+    })}
+        class=${cn.cn("bg-neutral-100", {
+      [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-full": !this.width
+    })}
+      >
+        <slot name="content"></slot>
+      </div>
+    `;
+  }
+  withHeaderTemplate() {
+    return shared_tailwindElement_index.x`
+      <div
+        data-testid="card"
+        style=${styleMap.o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn.cn("bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden", {
+      [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-full": !this.width
+    })}
+      >
+        <div class=${this.headerClass}>
+          <slot name="header"></slot>
+        </div>
+        <div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+  profileTemplate() {
+    return shared_tailwindElement_index.x`
+      <div
+        data-testid="card"
+        style=${index.customStyleMap({
+      [`min-height: ${this.height}px`]: !!this.height,
+      [`width: ${this.width}px`]: !!this.width
+    })}
+        class=${cn.cn("bg-neutral-100 grid", {
+      [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-full": !this.width
+    })}
+      >
+        <div
+          style=${styleMap.o({
+      backgroundImage: this.backgroundImageOrGradient()
+    })}
+          class=${cn.cn(
+      "row-end-1 col-span-1 col-end-1 row-span-1 h-full w-full bg-center bg-cover rounded-24 relative",
+      this.headerClass
+    )}
+        >
+          ${this.backgroundUrl && shared_tailwindElement_index.x` <div
+            class="h-full full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
+          ></div>`}
+          <div>
+            <slot name="header"></slot>
+          </div>
+        </div>
+        <div
+          class="grid grid-rows-[1fr,auto] row-end-1 col-span-1 col-end-1 row-span-1"
+        >
+          <div></div>
+          <div class="bg-neutral-100 rounded-24 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-3"
+            >
+              <div
+                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
+              ></div>
+            </div>
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  profile2Template() {
+    return shared_tailwindElement_index.x`
+      <div
+        data-testid="card"
+        style=${index.customStyleMap({
+      [`min-height: ${this.height}px`]: !!this.height,
+      [`width: ${this.width}px`]: !!this.width
+    })}
+        class=${cn.cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
+      [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-full"]: !this.width
+    })}
+      >
+        <div
+          style=${styleMap.o({
+      backgroundImage: this.backgroundImageOrGradient()
+    })}
+          class=${cn.cn(
+      "min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-100",
+      this.headerClass
+    )}
+        >
+          ${this.backgroundUrl && shared_tailwindElement_index.x`<div
+            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
+          ></div>`}
+          <div>
+            <slot name="header"></slot>
+          </div>
+        </div>
+        <div class="grid grid-rows-[max-content,auto]">
+          <div class="bg-neutral-100 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]"
+              ></div>
+            </div>
+            <slot name="content"></slot>
+          </div>
+          <div
+            class="bg-neutral-97 rounded-b-24 shadow-neutral-inner-shadow-top"
+          >
+            <slot name="bottom"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  heroTemplate() {
+    return shared_tailwindElement_index.x`
+      <div
+        data-testid="card"
+        style=${index.customStyleMap({
+      [`min-height: ${this.height}px`]: !!this.height,
+      [`width: ${this.width}px`]: !!this.width
+    })}
+        class=${cn.cn("h-[240px] flex bg-neutral-100", {
+      [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-full"]: !this.width
+    })}
+      >
+        <div
+          style=${styleMap.o({
+      backgroundImage: `url(${this.backgroundUrl})`
+    })}
+          class="h-full w-full -mb-6 bg-center bg-cover rounded-24 relative"
+        >
+          ${this.backgroundUrl && shared_tailwindElement_index.x`<div
+            class="h-full w-full rounded-24 bg-neutral-20/10 absolute"
+          ></div>`}
+          <div
+            class="h-full w-full flex flex-col items-center justify-center  absolute"
+          >
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  dappTemplate() {
+    return shared_tailwindElement_index.x`
+      <div
+        data-testid="card"
+        style=${index.customStyleMap({
+      [`min-height: ${this.height}px`]: !!this.height,
+      [`width: ${this.width}px`]: !!this.width
+    })}
+        class=${cn.cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
+      [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-full"]: !this.width
+    })}
+      >
+        <div
+          style=${styleMap.o({
+      backgroundImage: this.backgroundImageOrGradient()
+    })}
+          class=${cn.cn(
+      "min-h-[240px] bg-center bg-cover rounded-[24px_24px_0_0] relative",
+      this.headerClass
+    )}
+        >
+          <div>
+            <slot name="header"></slot>
+          </div>
+        </div>
+        <div
+          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-[0_0_24px_24px] relative"
+        >
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    switch (this.variant) {
+      case "with-header":
+        return this.withHeaderTemplate();
+      case "profile":
+        return this.profileTemplate();
+      case "profile-2":
+        return this.profile2Template();
+      case "hero":
+        return this.heroTemplate();
+      case "dapp":
+        return this.dappTemplate();
+      default:
+        return this.basicTemplate();
+    }
+  }
+};
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoCard.prototype, "variant", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String, attribute: "background-url" })
+], exports.LuksoCard.prototype, "backgroundUrl", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String, attribute: "profile-url" })
+], exports.LuksoCard.prototype, "profileUrl", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String, attribute: "profile-address" })
+], exports.LuksoCard.prototype, "profileAddress", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Number })
+], exports.LuksoCard.prototype, "width", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Number })
+], exports.LuksoCard.prototype, "height", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String, attribute: "custom-class" })
+], exports.LuksoCard.prototype, "customClass", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String, attribute: "header-class" })
+], exports.LuksoCard.prototype, "headerClass", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoCard.prototype, "size", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "is-hoverable" })
+], exports.LuksoCard.prototype, "isHoverable", 2);
+exports.LuksoCard = __decorateClass([
+  queryAssignedElements.e("lukso-card")
+], exports.LuksoCard);