@lukso/web-components 1.50.0 → 1.51.0

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('./lukso-card/index.cjs');
+const components_luksoCard_index = require('../index-87e624a1.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');
@@ -23,12 +23,13 @@ const components_luksoTest_index = require('./lukso-test/index.cjs');
 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-ae293272.cjs');
+const shared_tailwindElement_index = require('../index-aaa67d55.cjs');
 require('../query-assigned-elements-1d5d9d4c.cjs');
 require('../state-f73a8b4f.cjs');
 require('../index-e9668573.cjs');
 require('../directive-8278ab14.cjs');
-require('../style-map-761568c8.cjs');
+require('../style-map-74906707.cjs');
+require('../color-palette.cjs');
 
 
 

package/dist/components/index.js

@@ -1,5 +1,5 @@
 export { LuksoButton } from './lukso-button/index.js';
-export { LuksoCard } from './lukso-card/index.js';
+export { L as LuksoCard } from '../index-d0d67b5f.js';
 export { LuksoCheckbox } from './lukso-checkbox/index.js';
 export { LuksoFooter } from './lukso-footer/index.js';
 export { LuksoIcon } from './lukso-icon/index.js';
@@ -19,9 +19,10 @@ export { LuksoTest } from './lukso-test/index.js';
 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-a134c0a6.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-2f5488b6.js';
 import '../query-assigned-elements-5d94572f.js';
 import '../state-0a779257.js';
 import '../index-5e194caf.js';
 import '../directive-2bb7789e.js';
-import '../style-map-f7c09fa5.js';
+import '../style-map-88b4d8ad.js';
+import '../color-palette.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-ae293272.cjs');
+const shared_tailwindElement_index = require('../../index-aaa67d55.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-a134c0a6.js';
+import { T as TailwindStyledElement, x } from '../../index-2f5488b6.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { c as customClassMap } from '../../index-5e194caf.js';

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

@@ -2,303 +2,18 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-ae293272.cjs');
-const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-761568c8.cjs');
-const index = require('../../index-e9668573.cjs');
+require('../../index-aaa67d55.cjs');
+require('../../query-assigned-elements-1d5d9d4c.cjs');
+require('../../style-map-74906707.cjs');
+require('../../index-e9668573.cjs');
+const components_luksoCard_index = require('../../index-87e624a1.cjs');
 require('../lukso-profile/index.cjs');
+require('../../color-palette.cjs');
 require('../../directive-8278ab14.cjs');
 
-const style = ":host {\n  display: flex;\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.customClass = "";
-    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"
-        class="bg-neutral-100 ${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,
-      ["w-full"]: !this.isFixedWidth,
-      ["min-h-[534px]"]: this.isFixedHeight
-    })}"
-      >
-        <slot name="content"></slot>
-      </div>
-    `;
-  }
-  withHeaderTemplate() {
-    return shared_tailwindElement_index.x`
-      <div
-        data-testid="card"
-        class="bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden ${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,
-        ["w-full"]: !this.isFixedWidth,
-        ["min-h-[534px]"]: this.isFixedHeight
-      }
-    )}"
-      >
-        <div>
-          <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"
-        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,
-      ["w-full"]: !this.isFixedWidth,
-      ["min-h-[534px]"]: this.isFixedHeight
-    })}"
-      >
-        <div
-          style=${styleMap.o({
-      backgroundImage: this.backgroundImageOrGradient()
-    })}
-          class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative"
-        >
-          ${this.backgroundUrl && shared_tailwindElement_index.x` <div
-            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
-          ></div>`}
-          <div>
-            <slot name="header"></slot>
-          </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-2"
-          >
-            <div
-              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
-            ></div>
-          </div>
-          <slot name="content"></slot>
-        </div>
-      </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,
-      ["w-full"]: !this.isFixedWidth,
-      ["min-h-[534px]"]: this.isFixedHeight
-    })}"
-      >
-        <div
-          style=${styleMap.o({
-      backgroundImage: this.backgroundImageOrGradient()
-    })}
-          class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-100"
-        >
-          ${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"
-        class="h-[240px] flex bg-neutral-100 ${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,
-      ["w-full"]: !this.isFixedWidth,
-      ["min-h-[534px]"]: this.isFixedHeight
-    })}"
-      >
-        <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"
-        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,
-      ["w-full"]: !this.isFixedWidth,
-      ["min-h-[534px]"]: this.isFixedHeight
-    })}"
-      >
-        <div
-          style=${styleMap.o({
-      backgroundImage: this.backgroundImageOrGradient()
-    })}
-          class="min-h-[240px] bg-center bg-cover rounded-[24px_24px_0_0] relative"
-        >
-          <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: Boolean, attribute: "is-fixed-width" })
-], exports.LuksoCard.prototype, "isFixedWidth", 2);
-__decorateClass([
-  queryAssignedElements.n({ type: Boolean, attribute: "is-fixed-height" })
-], exports.LuksoCard.prototype, "isFixedHeight", 2);
-__decorateClass([
-  queryAssignedElements.n({ type: String, attribute: "custom-class" })
-], exports.LuksoCard.prototype, "customClass", 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);
+
+Object.defineProperty(exports, 'LuksoCard', {
+	enumerable: true,
+	get: () => components_luksoCard_index.LuksoCard
+});

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

@@ -9,6 +9,7 @@ export declare class LuksoCard extends LuksoCard_base {
     isFixedWidth: boolean;
     isFixedHeight: boolean;
     customClass: string;
+    headerClass: string;
     size: CardSizes;
     isHoverable: boolean;
     private mediumStyles;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/index.ts"],"names":[],"mappings":"AAOA,OAAO,4BAA4B,CAAA;AAEnC,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,MAAM,GACN,MAAM,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;;AAE1C,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,aAAa,UAAQ;IAGrB,WAAW,SAAK;IAGhB,IAAI,EAAE,SAAS,CAAW;IAG1B,WAAW,UAAQ;IAEnB,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,WAAW,CAA0C;IAC7D,OAAO,CAAC,gBAAgB,CAAmE;IAE3F,OAAO,CAAC,yBAAyB;IAYjC,aAAa;IAmBb,kBAAkB;IA0BlB,eAAe;IAiDf,gBAAgB;IAwDhB,YAAY;IAkCZ,YAAY;IAiCZ,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/index.ts"],"names":[],"mappings":"AAOA,OAAO,4BAA4B,CAAA;AAGnC,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,MAAM,GACN,MAAM,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;;AAE1C,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,aAAa,UAAQ;IAGrB,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,IAAI,EAAE,SAAS,CAAW;IAG1B,WAAW,UAAQ;IAEnB,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,WAAW,CAA0C;IAC7D,OAAO,CAAC,gBAAgB,CAAmE;IAE3F,OAAO,CAAC,yBAAyB;IAYjC,aAAa;IAmBb,kBAAkB;IA0BlB,eAAe;IAoDf,gBAAgB;IA2DhB,YAAY;IAkCZ,YAAY;IAoCZ,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}