@lukso/web-components 1.51.5 → 1.51.6

package/dist/components/index.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const components_luksoButton_index = require('./lukso-button/index.cjs');
-const components_luksoCard_index = require('../index-619f20e8.cjs');
+const components_luksoCard_index = require('./lukso-card/index.cjs');
 const components_luksoCheckbox_index = require('./lukso-checkbox/index.cjs');
 const components_luksoFooter_index = require('./lukso-footer/index.cjs');
 const components_luksoIcon_index = require('./lukso-icon/index.cjs');
@@ -24,6 +24,7 @@ const components_luksoTooltip_index = require('./lukso-tooltip/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-997f3f0e.cjs');
+require('../cn-98077c72.cjs');
 require('../query-assigned-elements-1d5d9d4c.cjs');
 require('../state-f73a8b4f.cjs');
 require('../index-e9668573.cjs');

package/dist/components/index.js

@@ -1,5 +1,5 @@
 export { LuksoButton } from './lukso-button/index.js';
-export { L as LuksoCard } from '../index-b83c7efa.js';
+export { LuksoCard } from './lukso-card/index.js';
 export { LuksoCheckbox } from './lukso-checkbox/index.js';
 export { LuksoFooter } from './lukso-footer/index.js';
 export { LuksoIcon } from './lukso-icon/index.js';
@@ -20,6 +20,7 @@ export { LuksoTooltip } from './lukso-tooltip/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-04d11436.js';
+import '../cn-3e29cec8.js';
 import '../query-assigned-elements-5d94572f.js';
 import '../state-0a779257.js';
 import '../index-5e194caf.js';

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-997f3f0e.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
+const styleMap = require('../../style-map-671a0511.cjs');
 require('../lukso-profile/index.cjs');
 require('../../color-palette.cjs');
-require('../../index-beb7703d.cjs');
+const cn = require('../../cn-98077c72.cjs');
+const index = require('../../index-beb7703d.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);