@lukso/web-components 1.51.4 → 1.51.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{index-055eb9cc.js → cn-3e29cec8.js} +1 -330
- package/dist/{index-de804529.cjs → cn-98077c72.cjs} +3 -332
- package/dist/components/index.cjs +5 -4
- package/dist/components/index.js +5 -4
- package/dist/components/lukso-button/index.cjs +1 -1
- package/dist/components/lukso-button/index.js +1 -1
- package/dist/components/lukso-card/index.cjs +325 -10
- package/dist/components/lukso-card/index.js +329 -5
- package/dist/components/lukso-checkbox/index.cjs +1 -1
- package/dist/components/lukso-checkbox/index.js +1 -1
- package/dist/components/lukso-footer/index.cjs +1 -1
- package/dist/components/lukso-footer/index.js +1 -1
- package/dist/components/lukso-icon/index.cjs +2 -2
- package/dist/components/lukso-icon/index.js +2 -2
- package/dist/components/lukso-input/index.cjs +1 -1
- package/dist/components/lukso-input/index.js +1 -1
- package/dist/components/lukso-modal/index.cjs +1 -1
- package/dist/components/lukso-modal/index.js +1 -1
- package/dist/components/lukso-navbar/index.cjs +2 -2
- package/dist/components/lukso-navbar/index.js +2 -2
- package/dist/components/lukso-profile/index.cjs +2 -2
- package/dist/components/lukso-profile/index.js +2 -2
- package/dist/components/lukso-progress/index.cjs +26 -13
- package/dist/components/lukso-progress/index.d.ts +2 -1
- package/dist/components/lukso-progress/index.d.ts.map +1 -1
- package/dist/components/lukso-progress/index.js +26 -13
- package/dist/components/lukso-progress/lukso-progress.stories.d.ts.map +1 -1
- package/dist/components/lukso-sanitize/index.cjs +1 -1
- package/dist/components/lukso-sanitize/index.js +1 -1
- package/dist/components/lukso-search/index.cjs +3 -3
- package/dist/components/lukso-search/index.js +3 -3
- package/dist/components/lukso-select/index.cjs +3 -3
- package/dist/components/lukso-select/index.js +3 -3
- package/dist/components/lukso-share/index.cjs +1 -1
- package/dist/components/lukso-share/index.js +1 -1
- package/dist/components/lukso-switch/index.cjs +2 -2
- package/dist/components/lukso-switch/index.js +2 -2
- package/dist/components/lukso-tag/index.cjs +2 -2
- package/dist/components/lukso-tag/index.js +2 -2
- package/dist/components/lukso-terms/index.cjs +2 -2
- package/dist/components/lukso-terms/index.js +2 -2
- package/dist/components/lukso-test/index.cjs +1 -1
- package/dist/components/lukso-test/index.js +1 -1
- package/dist/components/lukso-tooltip/index.cjs +1 -1
- package/dist/components/lukso-tooltip/index.js +1 -1
- package/dist/components/lukso-username/index.cjs +2 -2
- package/dist/components/lukso-username/index.js +2 -2
- package/dist/components/lukso-wizard/index.cjs +1 -1
- package/dist/components/lukso-wizard/index.js +1 -1
- package/dist/{index-92b65473.js → index-04d11436.js} +1 -1
- package/dist/{index-d548eac4.cjs → index-997f3f0e.cjs} +1 -1
- package/dist/{index-18c0f1ef.cjs → index-beb7703d.cjs} +1 -1
- package/dist/{index-1280bfb4.js → index-ee4182e6.js} +1 -1
- package/dist/index.cjs +6 -5
- package/dist/index.js +5 -4
- package/dist/shared/tailwind-element/index.cjs +1 -1
- package/dist/shared/tailwind-element/index.js +1 -1
- package/dist/{style-map-be0fc31f.js → style-map-5be28c06.js} +1 -1
- package/dist/{style-map-02fa5128.cjs → style-map-671a0511.cjs} +1 -1
- package/package.json +1 -1
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x } from './index-92b65473.js';
|
|
2
|
-
import { n, e } from './query-assigned-elements-5d94572f.js';
|
|
3
|
-
import { o } from './style-map-be0fc31f.js';
|
|
4
|
-
import './components/lukso-profile/index.js';
|
|
5
|
-
import './color-palette.js';
|
|
6
|
-
import { c as customStyleMap } from './index-1280bfb4.js';
|
|
7
|
-
|
|
8
|
-
const style = ":host {\n display: inline-flex;\n width: 100%;\n}\n\n:host([width]) {\n width: inherit;\n}";
|
|
9
|
-
|
|
10
1
|
import.meta.url.replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
|
|
11
2
|
|
|
12
3
|
import.meta.url.replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
|
|
@@ -2538,324 +2529,4 @@ const cn = (...inputs) => {
|
|
|
2538
2529
|
return twMerge(clsx(inputs));
|
|
2539
2530
|
};
|
|
2540
2531
|
|
|
2541
|
-
|
|
2542
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
2543
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
2544
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
2545
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
2546
|
-
if (decorator = decorators[i])
|
|
2547
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
2548
|
-
if (kind && result)
|
|
2549
|
-
__defProp(target, key, result);
|
|
2550
|
-
return result;
|
|
2551
|
-
};
|
|
2552
|
-
let LuksoCard = class extends TailwindStyledElement(style) {
|
|
2553
|
-
constructor() {
|
|
2554
|
-
super(...arguments);
|
|
2555
|
-
this.variant = "basic";
|
|
2556
|
-
this.backgroundUrl = "";
|
|
2557
|
-
this.profileUrl = "";
|
|
2558
|
-
this.profileAddress = "";
|
|
2559
|
-
this.width = void 0;
|
|
2560
|
-
this.height = void 0;
|
|
2561
|
-
this.customClass = "";
|
|
2562
|
-
this.headerClass = "";
|
|
2563
|
-
this.size = "medium";
|
|
2564
|
-
this.isHoverable = false;
|
|
2565
|
-
this.mediumStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
|
|
2566
|
-
this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
|
|
2567
|
-
this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
|
|
2568
|
-
}
|
|
2569
|
-
backgroundImageOrGradient() {
|
|
2570
|
-
const opacity = "80";
|
|
2571
|
-
const gradientStart = `#${this.profileAddress.slice(2, 8)}${opacity}`;
|
|
2572
|
-
const gradientEnd = `#${this.profileAddress.slice(36, 42)}${opacity}`;
|
|
2573
|
-
if (this.backgroundUrl) {
|
|
2574
|
-
return `url(${this.backgroundUrl})`;
|
|
2575
|
-
}
|
|
2576
|
-
return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
|
|
2577
|
-
}
|
|
2578
|
-
basicTemplate() {
|
|
2579
|
-
return x`
|
|
2580
|
-
<div
|
|
2581
|
-
data-testid="card"
|
|
2582
|
-
style=${customStyleMap({
|
|
2583
|
-
[`min-height: ${this.height}px`]: !!this.height,
|
|
2584
|
-
[`width: ${this.width}px`]: !!this.width
|
|
2585
|
-
})}
|
|
2586
|
-
class=${cn("bg-neutral-100", {
|
|
2587
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2588
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2589
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2590
|
-
[this.customClass]: !!this.customClass,
|
|
2591
|
-
"w-full": !this.width
|
|
2592
|
-
})}
|
|
2593
|
-
>
|
|
2594
|
-
<slot name="content"></slot>
|
|
2595
|
-
</div>
|
|
2596
|
-
`;
|
|
2597
|
-
}
|
|
2598
|
-
withHeaderTemplate() {
|
|
2599
|
-
return x`
|
|
2600
|
-
<div
|
|
2601
|
-
data-testid="card"
|
|
2602
|
-
style=${o({
|
|
2603
|
-
minHeight: `${this.height}px`,
|
|
2604
|
-
width: `${this.width}px`
|
|
2605
|
-
})}
|
|
2606
|
-
class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden", {
|
|
2607
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2608
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2609
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2610
|
-
[this.customClass]: !!this.customClass,
|
|
2611
|
-
"w-full": !this.width
|
|
2612
|
-
})}
|
|
2613
|
-
>
|
|
2614
|
-
<div class=${this.headerClass}>
|
|
2615
|
-
<slot name="header"></slot>
|
|
2616
|
-
</div>
|
|
2617
|
-
<div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24">
|
|
2618
|
-
<slot name="content"></slot>
|
|
2619
|
-
</div>
|
|
2620
|
-
</div>
|
|
2621
|
-
`;
|
|
2622
|
-
}
|
|
2623
|
-
profileTemplate() {
|
|
2624
|
-
return x`
|
|
2625
|
-
<div
|
|
2626
|
-
data-testid="card"
|
|
2627
|
-
style=${customStyleMap({
|
|
2628
|
-
[`min-height: ${this.height}px`]: !!this.height,
|
|
2629
|
-
[`width: ${this.width}px`]: !!this.width
|
|
2630
|
-
})}
|
|
2631
|
-
class=${cn("bg-neutral-100 grid", {
|
|
2632
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2633
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2634
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2635
|
-
[this.customClass]: !!this.customClass,
|
|
2636
|
-
"w-full": !this.width
|
|
2637
|
-
})}
|
|
2638
|
-
>
|
|
2639
|
-
<div
|
|
2640
|
-
style=${o({
|
|
2641
|
-
backgroundImage: this.backgroundImageOrGradient()
|
|
2642
|
-
})}
|
|
2643
|
-
class=${cn(
|
|
2644
|
-
"row-end-1 col-span-1 col-end-1 row-span-1 h-full w-full bg-center bg-cover rounded-24 relative",
|
|
2645
|
-
this.headerClass
|
|
2646
|
-
)}
|
|
2647
|
-
>
|
|
2648
|
-
${this.backgroundUrl && x` <div
|
|
2649
|
-
class="h-full full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
|
|
2650
|
-
></div>`}
|
|
2651
|
-
<div>
|
|
2652
|
-
<slot name="header"></slot>
|
|
2653
|
-
</div>
|
|
2654
|
-
</div>
|
|
2655
|
-
<div
|
|
2656
|
-
class="grid grid-rows-[1fr,auto] row-end-1 col-span-1 col-end-1 row-span-1"
|
|
2657
|
-
>
|
|
2658
|
-
<div></div>
|
|
2659
|
-
<div class="bg-neutral-100 rounded-24 relative">
|
|
2660
|
-
<lukso-profile
|
|
2661
|
-
profile-url=${this.profileUrl}
|
|
2662
|
-
size="large"
|
|
2663
|
-
profile-address=${this.profileAddress}
|
|
2664
|
-
has-identicon
|
|
2665
|
-
class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
|
|
2666
|
-
></lukso-profile>
|
|
2667
|
-
<div
|
|
2668
|
-
class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-3"
|
|
2669
|
-
>
|
|
2670
|
-
<div
|
|
2671
|
-
class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
|
|
2672
|
-
></div>
|
|
2673
|
-
</div>
|
|
2674
|
-
<slot name="content"></slot>
|
|
2675
|
-
</div>
|
|
2676
|
-
</div>
|
|
2677
|
-
</div>
|
|
2678
|
-
`;
|
|
2679
|
-
}
|
|
2680
|
-
profile2Template() {
|
|
2681
|
-
return x`
|
|
2682
|
-
<div
|
|
2683
|
-
data-testid="card"
|
|
2684
|
-
style=${customStyleMap({
|
|
2685
|
-
[`min-height: ${this.height}px`]: !!this.height,
|
|
2686
|
-
[`width: ${this.width}px`]: !!this.width
|
|
2687
|
-
})}
|
|
2688
|
-
class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
|
|
2689
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2690
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2691
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2692
|
-
[this.customClass]: !!this.customClass,
|
|
2693
|
-
["w-full"]: !this.width
|
|
2694
|
-
})}
|
|
2695
|
-
>
|
|
2696
|
-
<div
|
|
2697
|
-
style=${o({
|
|
2698
|
-
backgroundImage: this.backgroundImageOrGradient()
|
|
2699
|
-
})}
|
|
2700
|
-
class=${cn(
|
|
2701
|
-
"min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-100",
|
|
2702
|
-
this.headerClass
|
|
2703
|
-
)}
|
|
2704
|
-
>
|
|
2705
|
-
${this.backgroundUrl && x`<div
|
|
2706
|
-
class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
|
|
2707
|
-
></div>`}
|
|
2708
|
-
<div>
|
|
2709
|
-
<slot name="header"></slot>
|
|
2710
|
-
</div>
|
|
2711
|
-
</div>
|
|
2712
|
-
<div class="grid grid-rows-[max-content,auto]">
|
|
2713
|
-
<div class="bg-neutral-100 relative">
|
|
2714
|
-
<lukso-profile
|
|
2715
|
-
profile-url=${this.profileUrl}
|
|
2716
|
-
size="large"
|
|
2717
|
-
profile-address=${this.profileAddress}
|
|
2718
|
-
has-identicon
|
|
2719
|
-
class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
|
|
2720
|
-
></lukso-profile>
|
|
2721
|
-
<div
|
|
2722
|
-
class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
|
|
2723
|
-
>
|
|
2724
|
-
<div
|
|
2725
|
-
class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
|
|
2726
|
-
></div>
|
|
2727
|
-
</div>
|
|
2728
|
-
<slot name="content"></slot>
|
|
2729
|
-
</div>
|
|
2730
|
-
<div
|
|
2731
|
-
class="bg-neutral-97 rounded-b-24 shadow-neutral-inner-shadow-top"
|
|
2732
|
-
>
|
|
2733
|
-
<slot name="bottom"></slot>
|
|
2734
|
-
</div>
|
|
2735
|
-
</div>
|
|
2736
|
-
</div>
|
|
2737
|
-
`;
|
|
2738
|
-
}
|
|
2739
|
-
heroTemplate() {
|
|
2740
|
-
return x`
|
|
2741
|
-
<div
|
|
2742
|
-
data-testid="card"
|
|
2743
|
-
style=${customStyleMap({
|
|
2744
|
-
[`min-height: ${this.height}px`]: !!this.height,
|
|
2745
|
-
[`width: ${this.width}px`]: !!this.width
|
|
2746
|
-
})}
|
|
2747
|
-
class=${cn("h-[240px] flex bg-neutral-100", {
|
|
2748
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2749
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2750
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2751
|
-
[this.customClass]: !!this.customClass,
|
|
2752
|
-
["w-full"]: !this.width
|
|
2753
|
-
})}
|
|
2754
|
-
>
|
|
2755
|
-
<div
|
|
2756
|
-
style=${o({
|
|
2757
|
-
backgroundImage: `url(${this.backgroundUrl})`
|
|
2758
|
-
})}
|
|
2759
|
-
class="h-full w-full -mb-6 bg-center bg-cover rounded-24 relative"
|
|
2760
|
-
>
|
|
2761
|
-
${this.backgroundUrl && x`<div
|
|
2762
|
-
class="h-full w-full rounded-24 bg-neutral-20/10 absolute"
|
|
2763
|
-
></div>`}
|
|
2764
|
-
<div
|
|
2765
|
-
class="h-full w-full flex flex-col items-center justify-center absolute"
|
|
2766
|
-
>
|
|
2767
|
-
<slot name="content"></slot>
|
|
2768
|
-
</div>
|
|
2769
|
-
</div>
|
|
2770
|
-
</div>
|
|
2771
|
-
`;
|
|
2772
|
-
}
|
|
2773
|
-
dappTemplate() {
|
|
2774
|
-
return x`
|
|
2775
|
-
<div
|
|
2776
|
-
data-testid="card"
|
|
2777
|
-
style=${customStyleMap({
|
|
2778
|
-
[`min-height: ${this.height}px`]: !!this.height,
|
|
2779
|
-
[`width: ${this.width}px`]: !!this.width
|
|
2780
|
-
})}
|
|
2781
|
-
class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
|
|
2782
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2783
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2784
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2785
|
-
[this.customClass]: !!this.customClass,
|
|
2786
|
-
["w-full"]: !this.width
|
|
2787
|
-
})}
|
|
2788
|
-
>
|
|
2789
|
-
<div
|
|
2790
|
-
style=${o({
|
|
2791
|
-
backgroundImage: this.backgroundImageOrGradient()
|
|
2792
|
-
})}
|
|
2793
|
-
class=${cn(
|
|
2794
|
-
"min-h-[240px] bg-center bg-cover rounded-[24px_24px_0_0] relative",
|
|
2795
|
-
this.headerClass
|
|
2796
|
-
)}
|
|
2797
|
-
>
|
|
2798
|
-
<div>
|
|
2799
|
-
<slot name="header"></slot>
|
|
2800
|
-
</div>
|
|
2801
|
-
</div>
|
|
2802
|
-
<div
|
|
2803
|
-
class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-[0_0_24px_24px] relative"
|
|
2804
|
-
>
|
|
2805
|
-
<slot name="content"></slot>
|
|
2806
|
-
</div>
|
|
2807
|
-
</div>
|
|
2808
|
-
`;
|
|
2809
|
-
}
|
|
2810
|
-
render() {
|
|
2811
|
-
switch (this.variant) {
|
|
2812
|
-
case "with-header":
|
|
2813
|
-
return this.withHeaderTemplate();
|
|
2814
|
-
case "profile":
|
|
2815
|
-
return this.profileTemplate();
|
|
2816
|
-
case "profile-2":
|
|
2817
|
-
return this.profile2Template();
|
|
2818
|
-
case "hero":
|
|
2819
|
-
return this.heroTemplate();
|
|
2820
|
-
case "dapp":
|
|
2821
|
-
return this.dappTemplate();
|
|
2822
|
-
default:
|
|
2823
|
-
return this.basicTemplate();
|
|
2824
|
-
}
|
|
2825
|
-
}
|
|
2826
|
-
};
|
|
2827
|
-
__decorateClass([
|
|
2828
|
-
n({ type: String })
|
|
2829
|
-
], LuksoCard.prototype, "variant", 2);
|
|
2830
|
-
__decorateClass([
|
|
2831
|
-
n({ type: String, attribute: "background-url" })
|
|
2832
|
-
], LuksoCard.prototype, "backgroundUrl", 2);
|
|
2833
|
-
__decorateClass([
|
|
2834
|
-
n({ type: String, attribute: "profile-url" })
|
|
2835
|
-
], LuksoCard.prototype, "profileUrl", 2);
|
|
2836
|
-
__decorateClass([
|
|
2837
|
-
n({ type: String, attribute: "profile-address" })
|
|
2838
|
-
], LuksoCard.prototype, "profileAddress", 2);
|
|
2839
|
-
__decorateClass([
|
|
2840
|
-
n({ type: Number })
|
|
2841
|
-
], LuksoCard.prototype, "width", 2);
|
|
2842
|
-
__decorateClass([
|
|
2843
|
-
n({ type: Number })
|
|
2844
|
-
], LuksoCard.prototype, "height", 2);
|
|
2845
|
-
__decorateClass([
|
|
2846
|
-
n({ type: String, attribute: "custom-class" })
|
|
2847
|
-
], LuksoCard.prototype, "customClass", 2);
|
|
2848
|
-
__decorateClass([
|
|
2849
|
-
n({ type: String, attribute: "header-class" })
|
|
2850
|
-
], LuksoCard.prototype, "headerClass", 2);
|
|
2851
|
-
__decorateClass([
|
|
2852
|
-
n({ type: String })
|
|
2853
|
-
], LuksoCard.prototype, "size", 2);
|
|
2854
|
-
__decorateClass([
|
|
2855
|
-
n({ type: Boolean, attribute: "is-hoverable" })
|
|
2856
|
-
], LuksoCard.prototype, "isHoverable", 2);
|
|
2857
|
-
LuksoCard = __decorateClass([
|
|
2858
|
-
e("lukso-card")
|
|
2859
|
-
], LuksoCard);
|
|
2860
|
-
|
|
2861
|
-
export { LuksoCard as L, cn as c };
|
|
2532
|
+
export { cn as c };
|
|
@@ -1,20 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const shared_tailwindElement_index = require('./index-d548eac4.cjs');
|
|
4
|
-
const queryAssignedElements = require('./query-assigned-elements-1d5d9d4c.cjs');
|
|
5
|
-
const styleMap = require('./style-map-02fa5128.cjs');
|
|
6
|
-
require('./components/lukso-profile/index.cjs');
|
|
7
|
-
require('./color-palette.cjs');
|
|
8
|
-
const index = require('./index-18c0f1ef.cjs');
|
|
9
|
-
|
|
10
3
|
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index-de804529.cjs', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
|
|
4
|
+
(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('cn-98077c72.cjs', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
|
|
14
5
|
|
|
15
|
-
(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('
|
|
6
|
+
(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('cn-98077c72.cjs', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
|
|
16
7
|
|
|
17
|
-
(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('
|
|
8
|
+
(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('cn-98077c72.cjs', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
|
|
18
9
|
|
|
19
10
|
/**
|
|
20
11
|
* The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
|
|
@@ -2541,324 +2532,4 @@ const cn = (...inputs) => {
|
|
|
2541
2532
|
return twMerge(clsx(inputs));
|
|
2542
2533
|
};
|
|
2543
2534
|
|
|
2544
|
-
var __defProp = Object.defineProperty;
|
|
2545
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
2546
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
2547
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
2548
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
2549
|
-
if (decorator = decorators[i])
|
|
2550
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
2551
|
-
if (kind && result)
|
|
2552
|
-
__defProp(target, key, result);
|
|
2553
|
-
return result;
|
|
2554
|
-
};
|
|
2555
|
-
exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.TailwindStyledElement(style) {
|
|
2556
|
-
constructor() {
|
|
2557
|
-
super(...arguments);
|
|
2558
|
-
this.variant = "basic";
|
|
2559
|
-
this.backgroundUrl = "";
|
|
2560
|
-
this.profileUrl = "";
|
|
2561
|
-
this.profileAddress = "";
|
|
2562
|
-
this.width = void 0;
|
|
2563
|
-
this.height = void 0;
|
|
2564
|
-
this.customClass = "";
|
|
2565
|
-
this.headerClass = "";
|
|
2566
|
-
this.size = "medium";
|
|
2567
|
-
this.isHoverable = false;
|
|
2568
|
-
this.mediumStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
|
|
2569
|
-
this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
|
|
2570
|
-
this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
|
|
2571
|
-
}
|
|
2572
|
-
backgroundImageOrGradient() {
|
|
2573
|
-
const opacity = "80";
|
|
2574
|
-
const gradientStart = `#${this.profileAddress.slice(2, 8)}${opacity}`;
|
|
2575
|
-
const gradientEnd = `#${this.profileAddress.slice(36, 42)}${opacity}`;
|
|
2576
|
-
if (this.backgroundUrl) {
|
|
2577
|
-
return `url(${this.backgroundUrl})`;
|
|
2578
|
-
}
|
|
2579
|
-
return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
|
|
2580
|
-
}
|
|
2581
|
-
basicTemplate() {
|
|
2582
|
-
return shared_tailwindElement_index.x`
|
|
2583
|
-
<div
|
|
2584
|
-
data-testid="card"
|
|
2585
|
-
style=${index.customStyleMap({
|
|
2586
|
-
[`min-height: ${this.height}px`]: !!this.height,
|
|
2587
|
-
[`width: ${this.width}px`]: !!this.width
|
|
2588
|
-
})}
|
|
2589
|
-
class=${cn("bg-neutral-100", {
|
|
2590
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2591
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2592
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2593
|
-
[this.customClass]: !!this.customClass,
|
|
2594
|
-
"w-full": !this.width
|
|
2595
|
-
})}
|
|
2596
|
-
>
|
|
2597
|
-
<slot name="content"></slot>
|
|
2598
|
-
</div>
|
|
2599
|
-
`;
|
|
2600
|
-
}
|
|
2601
|
-
withHeaderTemplate() {
|
|
2602
|
-
return shared_tailwindElement_index.x`
|
|
2603
|
-
<div
|
|
2604
|
-
data-testid="card"
|
|
2605
|
-
style=${styleMap.o({
|
|
2606
|
-
minHeight: `${this.height}px`,
|
|
2607
|
-
width: `${this.width}px`
|
|
2608
|
-
})}
|
|
2609
|
-
class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden", {
|
|
2610
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2611
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2612
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2613
|
-
[this.customClass]: !!this.customClass,
|
|
2614
|
-
"w-full": !this.width
|
|
2615
|
-
})}
|
|
2616
|
-
>
|
|
2617
|
-
<div class=${this.headerClass}>
|
|
2618
|
-
<slot name="header"></slot>
|
|
2619
|
-
</div>
|
|
2620
|
-
<div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24">
|
|
2621
|
-
<slot name="content"></slot>
|
|
2622
|
-
</div>
|
|
2623
|
-
</div>
|
|
2624
|
-
`;
|
|
2625
|
-
}
|
|
2626
|
-
profileTemplate() {
|
|
2627
|
-
return shared_tailwindElement_index.x`
|
|
2628
|
-
<div
|
|
2629
|
-
data-testid="card"
|
|
2630
|
-
style=${index.customStyleMap({
|
|
2631
|
-
[`min-height: ${this.height}px`]: !!this.height,
|
|
2632
|
-
[`width: ${this.width}px`]: !!this.width
|
|
2633
|
-
})}
|
|
2634
|
-
class=${cn("bg-neutral-100 grid", {
|
|
2635
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2636
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2637
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2638
|
-
[this.customClass]: !!this.customClass,
|
|
2639
|
-
"w-full": !this.width
|
|
2640
|
-
})}
|
|
2641
|
-
>
|
|
2642
|
-
<div
|
|
2643
|
-
style=${styleMap.o({
|
|
2644
|
-
backgroundImage: this.backgroundImageOrGradient()
|
|
2645
|
-
})}
|
|
2646
|
-
class=${cn(
|
|
2647
|
-
"row-end-1 col-span-1 col-end-1 row-span-1 h-full w-full bg-center bg-cover rounded-24 relative",
|
|
2648
|
-
this.headerClass
|
|
2649
|
-
)}
|
|
2650
|
-
>
|
|
2651
|
-
${this.backgroundUrl && shared_tailwindElement_index.x` <div
|
|
2652
|
-
class="h-full full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
|
|
2653
|
-
></div>`}
|
|
2654
|
-
<div>
|
|
2655
|
-
<slot name="header"></slot>
|
|
2656
|
-
</div>
|
|
2657
|
-
</div>
|
|
2658
|
-
<div
|
|
2659
|
-
class="grid grid-rows-[1fr,auto] row-end-1 col-span-1 col-end-1 row-span-1"
|
|
2660
|
-
>
|
|
2661
|
-
<div></div>
|
|
2662
|
-
<div class="bg-neutral-100 rounded-24 relative">
|
|
2663
|
-
<lukso-profile
|
|
2664
|
-
profile-url=${this.profileUrl}
|
|
2665
|
-
size="large"
|
|
2666
|
-
profile-address=${this.profileAddress}
|
|
2667
|
-
has-identicon
|
|
2668
|
-
class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
|
|
2669
|
-
></lukso-profile>
|
|
2670
|
-
<div
|
|
2671
|
-
class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-3"
|
|
2672
|
-
>
|
|
2673
|
-
<div
|
|
2674
|
-
class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
|
|
2675
|
-
></div>
|
|
2676
|
-
</div>
|
|
2677
|
-
<slot name="content"></slot>
|
|
2678
|
-
</div>
|
|
2679
|
-
</div>
|
|
2680
|
-
</div>
|
|
2681
|
-
`;
|
|
2682
|
-
}
|
|
2683
|
-
profile2Template() {
|
|
2684
|
-
return shared_tailwindElement_index.x`
|
|
2685
|
-
<div
|
|
2686
|
-
data-testid="card"
|
|
2687
|
-
style=${index.customStyleMap({
|
|
2688
|
-
[`min-height: ${this.height}px`]: !!this.height,
|
|
2689
|
-
[`width: ${this.width}px`]: !!this.width
|
|
2690
|
-
})}
|
|
2691
|
-
class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
|
|
2692
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2693
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2694
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2695
|
-
[this.customClass]: !!this.customClass,
|
|
2696
|
-
["w-full"]: !this.width
|
|
2697
|
-
})}
|
|
2698
|
-
>
|
|
2699
|
-
<div
|
|
2700
|
-
style=${styleMap.o({
|
|
2701
|
-
backgroundImage: this.backgroundImageOrGradient()
|
|
2702
|
-
})}
|
|
2703
|
-
class=${cn(
|
|
2704
|
-
"min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-100",
|
|
2705
|
-
this.headerClass
|
|
2706
|
-
)}
|
|
2707
|
-
>
|
|
2708
|
-
${this.backgroundUrl && shared_tailwindElement_index.x`<div
|
|
2709
|
-
class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
|
|
2710
|
-
></div>`}
|
|
2711
|
-
<div>
|
|
2712
|
-
<slot name="header"></slot>
|
|
2713
|
-
</div>
|
|
2714
|
-
</div>
|
|
2715
|
-
<div class="grid grid-rows-[max-content,auto]">
|
|
2716
|
-
<div class="bg-neutral-100 relative">
|
|
2717
|
-
<lukso-profile
|
|
2718
|
-
profile-url=${this.profileUrl}
|
|
2719
|
-
size="large"
|
|
2720
|
-
profile-address=${this.profileAddress}
|
|
2721
|
-
has-identicon
|
|
2722
|
-
class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
|
|
2723
|
-
></lukso-profile>
|
|
2724
|
-
<div
|
|
2725
|
-
class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
|
|
2726
|
-
>
|
|
2727
|
-
<div
|
|
2728
|
-
class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
|
|
2729
|
-
></div>
|
|
2730
|
-
</div>
|
|
2731
|
-
<slot name="content"></slot>
|
|
2732
|
-
</div>
|
|
2733
|
-
<div
|
|
2734
|
-
class="bg-neutral-97 rounded-b-24 shadow-neutral-inner-shadow-top"
|
|
2735
|
-
>
|
|
2736
|
-
<slot name="bottom"></slot>
|
|
2737
|
-
</div>
|
|
2738
|
-
</div>
|
|
2739
|
-
</div>
|
|
2740
|
-
`;
|
|
2741
|
-
}
|
|
2742
|
-
heroTemplate() {
|
|
2743
|
-
return shared_tailwindElement_index.x`
|
|
2744
|
-
<div
|
|
2745
|
-
data-testid="card"
|
|
2746
|
-
style=${index.customStyleMap({
|
|
2747
|
-
[`min-height: ${this.height}px`]: !!this.height,
|
|
2748
|
-
[`width: ${this.width}px`]: !!this.width
|
|
2749
|
-
})}
|
|
2750
|
-
class=${cn("h-[240px] flex bg-neutral-100", {
|
|
2751
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2752
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2753
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2754
|
-
[this.customClass]: !!this.customClass,
|
|
2755
|
-
["w-full"]: !this.width
|
|
2756
|
-
})}
|
|
2757
|
-
>
|
|
2758
|
-
<div
|
|
2759
|
-
style=${styleMap.o({
|
|
2760
|
-
backgroundImage: `url(${this.backgroundUrl})`
|
|
2761
|
-
})}
|
|
2762
|
-
class="h-full w-full -mb-6 bg-center bg-cover rounded-24 relative"
|
|
2763
|
-
>
|
|
2764
|
-
${this.backgroundUrl && shared_tailwindElement_index.x`<div
|
|
2765
|
-
class="h-full w-full rounded-24 bg-neutral-20/10 absolute"
|
|
2766
|
-
></div>`}
|
|
2767
|
-
<div
|
|
2768
|
-
class="h-full w-full flex flex-col items-center justify-center absolute"
|
|
2769
|
-
>
|
|
2770
|
-
<slot name="content"></slot>
|
|
2771
|
-
</div>
|
|
2772
|
-
</div>
|
|
2773
|
-
</div>
|
|
2774
|
-
`;
|
|
2775
|
-
}
|
|
2776
|
-
dappTemplate() {
|
|
2777
|
-
return shared_tailwindElement_index.x`
|
|
2778
|
-
<div
|
|
2779
|
-
data-testid="card"
|
|
2780
|
-
style=${index.customStyleMap({
|
|
2781
|
-
[`min-height: ${this.height}px`]: !!this.height,
|
|
2782
|
-
[`width: ${this.width}px`]: !!this.width
|
|
2783
|
-
})}
|
|
2784
|
-
class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
|
|
2785
|
-
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
2786
|
-
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
2787
|
-
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
2788
|
-
[this.customClass]: !!this.customClass,
|
|
2789
|
-
["w-full"]: !this.width
|
|
2790
|
-
})}
|
|
2791
|
-
>
|
|
2792
|
-
<div
|
|
2793
|
-
style=${styleMap.o({
|
|
2794
|
-
backgroundImage: this.backgroundImageOrGradient()
|
|
2795
|
-
})}
|
|
2796
|
-
class=${cn(
|
|
2797
|
-
"min-h-[240px] bg-center bg-cover rounded-[24px_24px_0_0] relative",
|
|
2798
|
-
this.headerClass
|
|
2799
|
-
)}
|
|
2800
|
-
>
|
|
2801
|
-
<div>
|
|
2802
|
-
<slot name="header"></slot>
|
|
2803
|
-
</div>
|
|
2804
|
-
</div>
|
|
2805
|
-
<div
|
|
2806
|
-
class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-[0_0_24px_24px] relative"
|
|
2807
|
-
>
|
|
2808
|
-
<slot name="content"></slot>
|
|
2809
|
-
</div>
|
|
2810
|
-
</div>
|
|
2811
|
-
`;
|
|
2812
|
-
}
|
|
2813
|
-
render() {
|
|
2814
|
-
switch (this.variant) {
|
|
2815
|
-
case "with-header":
|
|
2816
|
-
return this.withHeaderTemplate();
|
|
2817
|
-
case "profile":
|
|
2818
|
-
return this.profileTemplate();
|
|
2819
|
-
case "profile-2":
|
|
2820
|
-
return this.profile2Template();
|
|
2821
|
-
case "hero":
|
|
2822
|
-
return this.heroTemplate();
|
|
2823
|
-
case "dapp":
|
|
2824
|
-
return this.dappTemplate();
|
|
2825
|
-
default:
|
|
2826
|
-
return this.basicTemplate();
|
|
2827
|
-
}
|
|
2828
|
-
}
|
|
2829
|
-
};
|
|
2830
|
-
__decorateClass([
|
|
2831
|
-
queryAssignedElements.n({ type: String })
|
|
2832
|
-
], exports.LuksoCard.prototype, "variant", 2);
|
|
2833
|
-
__decorateClass([
|
|
2834
|
-
queryAssignedElements.n({ type: String, attribute: "background-url" })
|
|
2835
|
-
], exports.LuksoCard.prototype, "backgroundUrl", 2);
|
|
2836
|
-
__decorateClass([
|
|
2837
|
-
queryAssignedElements.n({ type: String, attribute: "profile-url" })
|
|
2838
|
-
], exports.LuksoCard.prototype, "profileUrl", 2);
|
|
2839
|
-
__decorateClass([
|
|
2840
|
-
queryAssignedElements.n({ type: String, attribute: "profile-address" })
|
|
2841
|
-
], exports.LuksoCard.prototype, "profileAddress", 2);
|
|
2842
|
-
__decorateClass([
|
|
2843
|
-
queryAssignedElements.n({ type: Number })
|
|
2844
|
-
], exports.LuksoCard.prototype, "width", 2);
|
|
2845
|
-
__decorateClass([
|
|
2846
|
-
queryAssignedElements.n({ type: Number })
|
|
2847
|
-
], exports.LuksoCard.prototype, "height", 2);
|
|
2848
|
-
__decorateClass([
|
|
2849
|
-
queryAssignedElements.n({ type: String, attribute: "custom-class" })
|
|
2850
|
-
], exports.LuksoCard.prototype, "customClass", 2);
|
|
2851
|
-
__decorateClass([
|
|
2852
|
-
queryAssignedElements.n({ type: String, attribute: "header-class" })
|
|
2853
|
-
], exports.LuksoCard.prototype, "headerClass", 2);
|
|
2854
|
-
__decorateClass([
|
|
2855
|
-
queryAssignedElements.n({ type: String })
|
|
2856
|
-
], exports.LuksoCard.prototype, "size", 2);
|
|
2857
|
-
__decorateClass([
|
|
2858
|
-
queryAssignedElements.n({ type: Boolean, attribute: "is-hoverable" })
|
|
2859
|
-
], exports.LuksoCard.prototype, "isHoverable", 2);
|
|
2860
|
-
exports.LuksoCard = __decorateClass([
|
|
2861
|
-
queryAssignedElements.e("lukso-card")
|
|
2862
|
-
], exports.LuksoCard);
|
|
2863
|
-
|
|
2864
2535
|
exports.cn = cn;
|