@lukso/web-components 1.6.3 → 1.7.4

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

@@ -0,0 +1,143 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared_tailwindElement_index = require('../../index-4a1ee696.cjs');
+const directive = require('../../directive-db00f5fb.cjs');
+const styleMap = require('../../style-map-17d4829d.cjs');
+const index = require('../../index-7dc05ee5.cjs');
+require('../lukso-profile/index.cjs');
+
+const style = ":host {\n  width: 100%;\n}\n\n:host([is-fixed-width]) {\n  width: inherit;\n}";
+
+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.isFixedWidth = false;
+    this.isFixedHeight = false;
+    this.defaultStyles = `rounded-3xl  shadow-pink-drop-shadow-2xl`;
+  }
+  basicTemplate() {
+    return shared_tailwindElement_index.y`
+      <div
+        data-testid="card"
+        class="bg-neutral-100 ${index.customClassMap({
+      [this.defaultStyles]: true,
+      ["w-[362px]"]: this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight
+    })}"
+      >
+        <slot name="content"></slot>
+      </div>
+    `;
+  }
+  withHeaderTemplate() {
+    return shared_tailwindElement_index.y`
+      <div
+        data-testid="card"
+        class="bg-neutral-98 grid grid-rows-[auto,1fr] ${index.customClassMap({
+      [this.defaultStyles]: true,
+      ["w-[362px]"]: this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight
+    })}"
+      >
+        <div>
+          <slot name="header"></slot>
+        </div>
+        <div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-3xl">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+  profileTemplate() {
+    return shared_tailwindElement_index.y`
+      <div
+        data-testid="card"
+        class="bg-neutral-98 grid grid-rows-[auto,1fr] ${index.customClassMap({
+      [this.defaultStyles]: true,
+      ["w-[362px]"]: this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight
+    })}"
+      >
+        <div
+          style=${styleMap.i({
+      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>
+        <div
+          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-3xl 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"
+          >
+            <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>
+    `;
+  }
+  render() {
+    switch (this.variant) {
+      case "with-header":
+        return this.withHeaderTemplate();
+      case "profile":
+        return this.profileTemplate();
+      default:
+        return this.basicTemplate();
+    }
+  }
+};
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoCard.prototype, "variant", 2);
+__decorateClass([
+  directive.e({ type: String, attribute: "background-url" })
+], exports.LuksoCard.prototype, "backgroundUrl", 2);
+__decorateClass([
+  directive.e({ type: String, attribute: "profile-url" })
+], exports.LuksoCard.prototype, "profileUrl", 2);
+__decorateClass([
+  directive.e({ type: String, attribute: "profile-address" })
+], exports.LuksoCard.prototype, "profileAddress", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-fixed-width" })
+], exports.LuksoCard.prototype, "isFixedWidth", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-fixed-height" })
+], exports.LuksoCard.prototype, "isFixedHeight", 2);
+exports.LuksoCard = __decorateClass([
+  directive.e$1("lukso-card")
+], exports.LuksoCard);