@lukso/web-components 1.38.0 → 1.40.0
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/components/index.cjs +3 -3
- package/dist/components/index.js +3 -3
- 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 +60 -15
- package/dist/components/lukso-card/index.d.ts +3 -1
- package/dist/components/lukso-card/index.d.ts.map +1 -1
- package/dist/components/lukso-card/index.js +60 -15
- package/dist/components/lukso-card/lukso-card.stories.d.ts +3 -1
- package/dist/components/lukso-card/lukso-card.stories.d.ts.map +1 -1
- 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 +2 -2
- package/dist/components/lukso-progress/index.js +2 -2
- 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 +2 -2
- package/dist/components/lukso-search/index.js +2 -2
- 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 +2 -2
- package/dist/components/lukso-test/index.js +2 -2
- 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 +2 -2
- package/dist/components/lukso-wizard/index.js +2 -2
- package/dist/{directive-helpers-62f67958.js → directive-helpers-294cf70c.js} +1 -1
- package/dist/{directive-helpers-318104fe.cjs → directive-helpers-38cb10eb.cjs} +1 -1
- package/dist/{index-28abd85e.js → index-211c8050.js} +1 -1
- package/dist/{index-bbe1e310.cjs → index-b3762a1f.cjs} +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.js +3 -3
- package/dist/shared/tailwind-element/index.cjs +1 -1
- package/dist/shared/tailwind-element/index.js +1 -1
- package/dist/{style-map-912887dd.js → style-map-1398bfd6.js} +1 -1
- package/dist/{style-map-2f7b12e2.cjs → style-map-cc5b37cd.cjs} +1 -1
- package/dist/styles/main.css +3 -0
- package/dist/styles/main.css.map +1 -1
- package/package.json +1 -1
- package/tools/sass/main.scss +4 -0
- package/tools/styles/main.css +3 -0
|
@@ -21,12 +21,12 @@ const components_luksoTerms_index = require('./lukso-terms/index.cjs');
|
|
|
21
21
|
const components_luksoTest_index = require('./lukso-test/index.cjs');
|
|
22
22
|
const components_luksoUsername_index = require('./lukso-username/index.cjs');
|
|
23
23
|
const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
|
|
24
|
-
const shared_tailwindElement_index = require('../index-
|
|
24
|
+
const shared_tailwindElement_index = require('../index-b3762a1f.cjs');
|
|
25
25
|
require('../directive-db00f5fb.cjs');
|
|
26
26
|
require('../state-a62a7d5d.cjs');
|
|
27
27
|
require('../index-7dc05ee5.cjs');
|
|
28
|
-
require('../style-map-
|
|
29
|
-
require('../directive-helpers-
|
|
28
|
+
require('../style-map-cc5b37cd.cjs');
|
|
29
|
+
require('../directive-helpers-38cb10eb.cjs');
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
package/dist/components/index.js
CHANGED
|
@@ -17,9 +17,9 @@ export { LuksoTerms } from './lukso-terms/index.js';
|
|
|
17
17
|
export { LuksoTest } from './lukso-test/index.js';
|
|
18
18
|
export { LuksoUsername } from './lukso-username/index.js';
|
|
19
19
|
export { LuksoWizard } from './lukso-wizard/index.js';
|
|
20
|
-
export { a as TailwindElement, T as TailwindStyledElement } from '../index-
|
|
20
|
+
export { a as TailwindElement, T as TailwindStyledElement } from '../index-211c8050.js';
|
|
21
21
|
import '../directive-9ec64c08.js';
|
|
22
22
|
import '../state-7fde94d1.js';
|
|
23
23
|
import '../index-714323c9.js';
|
|
24
|
-
import '../style-map-
|
|
25
|
-
import '../directive-helpers-
|
|
24
|
+
import '../style-map-1398bfd6.js';
|
|
25
|
+
import '../directive-helpers-294cf70c.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
7
|
const state = require('../../state-a62a7d5d.cjs');
|
|
8
8
|
const index = require('../../index-7dc05ee5.cjs');
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x } from '../../index-211c8050.js';
|
|
2
2
|
import { e, a as e$1 } from '../../directive-9ec64c08.js';
|
|
3
3
|
import { t } from '../../state-7fde94d1.js';
|
|
4
4
|
import { c as customClassMap } from '../../index-714323c9.js';
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
|
-
const styleMap = require('../../style-map-
|
|
7
|
+
const styleMap = require('../../style-map-cc5b37cd.cjs');
|
|
8
8
|
const index = require('../../index-7dc05ee5.cjs');
|
|
9
9
|
require('../lukso-profile/index.cjs');
|
|
10
10
|
|
|
@@ -37,6 +37,15 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
|
|
|
37
37
|
this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
|
|
38
38
|
this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
|
|
39
39
|
}
|
|
40
|
+
backgroundImageOrGradient() {
|
|
41
|
+
const opacity = "80";
|
|
42
|
+
const gradientStart = `#${this.profileAddress.slice(2, 8)}${opacity}`;
|
|
43
|
+
const gradientEnd = `#${this.profileAddress.slice(36, 42)}${opacity}`;
|
|
44
|
+
if (this.backgroundUrl) {
|
|
45
|
+
return `url(${this.backgroundUrl})`;
|
|
46
|
+
}
|
|
47
|
+
return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
|
|
48
|
+
}
|
|
40
49
|
basicTemplate() {
|
|
41
50
|
return shared_tailwindElement_index.x`
|
|
42
51
|
<div
|
|
@@ -98,13 +107,13 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
|
|
|
98
107
|
>
|
|
99
108
|
<div
|
|
100
109
|
style=${styleMap.o({
|
|
101
|
-
backgroundImage:
|
|
110
|
+
backgroundImage: this.backgroundImageOrGradient()
|
|
102
111
|
})}
|
|
103
|
-
class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative
|
|
112
|
+
class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative"
|
|
104
113
|
>
|
|
105
|
-
${this.backgroundUrl
|
|
106
|
-
|
|
107
|
-
|
|
114
|
+
${this.backgroundUrl && shared_tailwindElement_index.x` <div
|
|
115
|
+
class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
|
|
116
|
+
></div>`}
|
|
108
117
|
<div>
|
|
109
118
|
<slot name="header"></slot>
|
|
110
119
|
</div>
|
|
@@ -150,13 +159,13 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
|
|
|
150
159
|
>
|
|
151
160
|
<div
|
|
152
161
|
style=${styleMap.o({
|
|
153
|
-
backgroundImage:
|
|
162
|
+
backgroundImage: this.backgroundImageOrGradient()
|
|
154
163
|
})}
|
|
155
|
-
class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-
|
|
164
|
+
class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-100"
|
|
156
165
|
>
|
|
157
|
-
${this.backgroundUrl
|
|
158
|
-
|
|
159
|
-
|
|
166
|
+
${this.backgroundUrl && shared_tailwindElement_index.x`<div
|
|
167
|
+
class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
|
|
168
|
+
></div>`}
|
|
160
169
|
<div>
|
|
161
170
|
<slot name="header"></slot>
|
|
162
171
|
</div>
|
|
@@ -206,9 +215,9 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
|
|
|
206
215
|
})}
|
|
207
216
|
class="h-full w-full -mb-6 bg-center bg-cover rounded-24 relative"
|
|
208
217
|
>
|
|
209
|
-
${this.backgroundUrl
|
|
210
|
-
|
|
211
|
-
|
|
218
|
+
${this.backgroundUrl && shared_tailwindElement_index.x`<div
|
|
219
|
+
class="h-full w-full rounded-24 bg-neutral-20/10 absolute"
|
|
220
|
+
></div>`}
|
|
212
221
|
<div
|
|
213
222
|
class="h-full w-full flex flex-col items-center justify-center absolute"
|
|
214
223
|
>
|
|
@@ -218,6 +227,40 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
|
|
|
218
227
|
</div>
|
|
219
228
|
`;
|
|
220
229
|
}
|
|
230
|
+
dappTemplate() {
|
|
231
|
+
return shared_tailwindElement_index.x`
|
|
232
|
+
<div
|
|
233
|
+
data-testid="card"
|
|
234
|
+
class="bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden ${index.customClassMap(
|
|
235
|
+
{
|
|
236
|
+
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
237
|
+
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
238
|
+
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
239
|
+
[this.customClass]: !!this.customClass,
|
|
240
|
+
["w-[362px]"]: this.isFixedWidth,
|
|
241
|
+
["w-full"]: !this.isFixedWidth,
|
|
242
|
+
["min-h-[534px]"]: this.isFixedHeight
|
|
243
|
+
}
|
|
244
|
+
)}"
|
|
245
|
+
>
|
|
246
|
+
<div
|
|
247
|
+
style=${styleMap.o({
|
|
248
|
+
backgroundImage: this.backgroundImageOrGradient()
|
|
249
|
+
})}
|
|
250
|
+
class="min-h-[240px] bg-center bg-cover rounded-[24px_24px_0_0] relative"
|
|
251
|
+
>
|
|
252
|
+
<div>
|
|
253
|
+
<slot name="header"></slot>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
<div
|
|
257
|
+
class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-[0_0_24px_24px] relative"
|
|
258
|
+
>
|
|
259
|
+
<slot name="content"></slot>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
`;
|
|
263
|
+
}
|
|
221
264
|
render() {
|
|
222
265
|
switch (this.variant) {
|
|
223
266
|
case "with-header":
|
|
@@ -228,6 +271,8 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
|
|
|
228
271
|
return this.profile2Template();
|
|
229
272
|
case "hero":
|
|
230
273
|
return this.heroTemplate();
|
|
274
|
+
case "dapp":
|
|
275
|
+
return this.dappTemplate();
|
|
231
276
|
default:
|
|
232
277
|
return this.basicTemplate();
|
|
233
278
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type CardVariants = 'basic' | 'with-header' | 'profile' | 'profile-2' | 'hero';
|
|
1
|
+
export type CardVariants = 'basic' | 'with-header' | 'profile' | 'profile-2' | 'hero' | 'dapp';
|
|
2
2
|
export type CardSizes = 'small' | 'medium';
|
|
3
3
|
declare const LuksoCard_base: typeof import("lit").LitElement;
|
|
4
4
|
export declare class LuksoCard extends LuksoCard_base {
|
|
@@ -14,11 +14,13 @@ export declare class LuksoCard extends LuksoCard_base {
|
|
|
14
14
|
private mediumStyles;
|
|
15
15
|
private smallStyles;
|
|
16
16
|
private smallHoverStyles;
|
|
17
|
+
private backgroundImageOrGradient;
|
|
17
18
|
basicTemplate(): import("lit").TemplateResult<1>;
|
|
18
19
|
withHeaderTemplate(): import("lit").TemplateResult<1>;
|
|
19
20
|
profileTemplate(): import("lit").TemplateResult<1>;
|
|
20
21
|
profile2Template(): import("lit").TemplateResult<1>;
|
|
21
22
|
heroTemplate(): import("lit").TemplateResult<1>;
|
|
23
|
+
dappTemplate(): import("lit").TemplateResult<1>;
|
|
22
24
|
render(): import("lit").TemplateResult<1>;
|
|
23
25
|
}
|
|
24
26
|
declare global {
|
|
@@ -1 +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,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,aAAa;IAmBb,kBAAkB;IA0BlB,eAAe;
|
|
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;IAsDf,gBAAgB;IAwDhB,YAAY;IAkCZ,YAAY;IAmCZ,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x } from '../../index-211c8050.js';
|
|
2
2
|
import { e, a as e$1 } from '../../directive-9ec64c08.js';
|
|
3
|
-
import { o } from '../../style-map-
|
|
3
|
+
import { o } from '../../style-map-1398bfd6.js';
|
|
4
4
|
import { c as customClassMap } from '../../index-714323c9.js';
|
|
5
5
|
import '../lukso-profile/index.js';
|
|
6
6
|
|
|
@@ -33,6 +33,15 @@ let LuksoCard = class extends TailwindStyledElement(style) {
|
|
|
33
33
|
this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
|
|
34
34
|
this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
|
|
35
35
|
}
|
|
36
|
+
backgroundImageOrGradient() {
|
|
37
|
+
const opacity = "80";
|
|
38
|
+
const gradientStart = `#${this.profileAddress.slice(2, 8)}${opacity}`;
|
|
39
|
+
const gradientEnd = `#${this.profileAddress.slice(36, 42)}${opacity}`;
|
|
40
|
+
if (this.backgroundUrl) {
|
|
41
|
+
return `url(${this.backgroundUrl})`;
|
|
42
|
+
}
|
|
43
|
+
return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
|
|
44
|
+
}
|
|
36
45
|
basicTemplate() {
|
|
37
46
|
return x`
|
|
38
47
|
<div
|
|
@@ -94,13 +103,13 @@ let LuksoCard = class extends TailwindStyledElement(style) {
|
|
|
94
103
|
>
|
|
95
104
|
<div
|
|
96
105
|
style=${o({
|
|
97
|
-
backgroundImage:
|
|
106
|
+
backgroundImage: this.backgroundImageOrGradient()
|
|
98
107
|
})}
|
|
99
|
-
class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative
|
|
108
|
+
class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative"
|
|
100
109
|
>
|
|
101
|
-
${this.backgroundUrl
|
|
102
|
-
|
|
103
|
-
|
|
110
|
+
${this.backgroundUrl && x` <div
|
|
111
|
+
class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
|
|
112
|
+
></div>`}
|
|
104
113
|
<div>
|
|
105
114
|
<slot name="header"></slot>
|
|
106
115
|
</div>
|
|
@@ -146,13 +155,13 @@ let LuksoCard = class extends TailwindStyledElement(style) {
|
|
|
146
155
|
>
|
|
147
156
|
<div
|
|
148
157
|
style=${o({
|
|
149
|
-
backgroundImage:
|
|
158
|
+
backgroundImage: this.backgroundImageOrGradient()
|
|
150
159
|
})}
|
|
151
|
-
class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-
|
|
160
|
+
class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-100"
|
|
152
161
|
>
|
|
153
|
-
${this.backgroundUrl
|
|
154
|
-
|
|
155
|
-
|
|
162
|
+
${this.backgroundUrl && x`<div
|
|
163
|
+
class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
|
|
164
|
+
></div>`}
|
|
156
165
|
<div>
|
|
157
166
|
<slot name="header"></slot>
|
|
158
167
|
</div>
|
|
@@ -202,9 +211,9 @@ let LuksoCard = class extends TailwindStyledElement(style) {
|
|
|
202
211
|
})}
|
|
203
212
|
class="h-full w-full -mb-6 bg-center bg-cover rounded-24 relative"
|
|
204
213
|
>
|
|
205
|
-
${this.backgroundUrl
|
|
206
|
-
|
|
207
|
-
|
|
214
|
+
${this.backgroundUrl && x`<div
|
|
215
|
+
class="h-full w-full rounded-24 bg-neutral-20/10 absolute"
|
|
216
|
+
></div>`}
|
|
208
217
|
<div
|
|
209
218
|
class="h-full w-full flex flex-col items-center justify-center absolute"
|
|
210
219
|
>
|
|
@@ -214,6 +223,40 @@ let LuksoCard = class extends TailwindStyledElement(style) {
|
|
|
214
223
|
</div>
|
|
215
224
|
`;
|
|
216
225
|
}
|
|
226
|
+
dappTemplate() {
|
|
227
|
+
return x`
|
|
228
|
+
<div
|
|
229
|
+
data-testid="card"
|
|
230
|
+
class="bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden ${customClassMap(
|
|
231
|
+
{
|
|
232
|
+
[this.mediumStyles]: !this.customClass && this.size === "medium",
|
|
233
|
+
[this.smallStyles]: !this.customClass && this.size === "small",
|
|
234
|
+
[this.smallHoverStyles]: this.isHoverable && this.size === "small",
|
|
235
|
+
[this.customClass]: !!this.customClass,
|
|
236
|
+
["w-[362px]"]: this.isFixedWidth,
|
|
237
|
+
["w-full"]: !this.isFixedWidth,
|
|
238
|
+
["min-h-[534px]"]: this.isFixedHeight
|
|
239
|
+
}
|
|
240
|
+
)}"
|
|
241
|
+
>
|
|
242
|
+
<div
|
|
243
|
+
style=${o({
|
|
244
|
+
backgroundImage: this.backgroundImageOrGradient()
|
|
245
|
+
})}
|
|
246
|
+
class="min-h-[240px] bg-center bg-cover rounded-[24px_24px_0_0] relative"
|
|
247
|
+
>
|
|
248
|
+
<div>
|
|
249
|
+
<slot name="header"></slot>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
<div
|
|
253
|
+
class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-[0_0_24px_24px] relative"
|
|
254
|
+
>
|
|
255
|
+
<slot name="content"></slot>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
`;
|
|
259
|
+
}
|
|
217
260
|
render() {
|
|
218
261
|
switch (this.variant) {
|
|
219
262
|
case "with-header":
|
|
@@ -224,6 +267,8 @@ let LuksoCard = class extends TailwindStyledElement(style) {
|
|
|
224
267
|
return this.profile2Template();
|
|
225
268
|
case "hero":
|
|
226
269
|
return this.heroTemplate();
|
|
270
|
+
case "dapp":
|
|
271
|
+
return this.dappTemplate();
|
|
227
272
|
default:
|
|
228
273
|
return this.basicTemplate();
|
|
229
274
|
}
|
|
@@ -14,8 +14,10 @@ export declare const CardWithCustomHeader: any;
|
|
|
14
14
|
export declare const ProfileCard: any;
|
|
15
15
|
/** Example of `profile-2` variant. */
|
|
16
16
|
export declare const Profile2Card: any;
|
|
17
|
-
/** Example of `hero` variant
|
|
17
|
+
/** Example of `hero` variant. */
|
|
18
18
|
export declare const HeroCard: any;
|
|
19
|
+
/** Example of `dapp` variant. */
|
|
20
|
+
export declare const DappCard: any;
|
|
19
21
|
/** You can customize card with `custom-class` property, it will be used instead of default styles. */
|
|
20
22
|
export declare const CustomCard: any;
|
|
21
23
|
/** You can select card size with `size` property. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lukso-card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/lukso-card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,kBAAkB,CAAA;AACzB,OAAO,mBAAmB,CAAA;AAE1B,qJAAqJ;AACrJ,QAAA,MAAM,IAAI,EAAE,IA8HX,CAAA;AAED,eAAe,IAAI,CAAA;AAsInB,iDAAiD;AACjD,eAAO,MAAM,WAAW,KAA2B,CAAA;AAQnD,0HAA0H;AAC1H,eAAO,MAAM,SAAS,KAA2B,CAAA;AAYjD,wCAAwC;AACxC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAatD,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,KAAgC,CAAA;AAajE,sIAAsI;AACtI,eAAO,MAAM,WAAW,KAA2B,CAAA;AAmBnD,uCAAuC;AACvC,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,
|
|
1
|
+
{"version":3,"file":"lukso-card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/lukso-card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,kBAAkB,CAAA;AACzB,OAAO,mBAAmB,CAAA;AAE1B,qJAAqJ;AACrJ,QAAA,MAAM,IAAI,EAAE,IA8HX,CAAA;AAED,eAAe,IAAI,CAAA;AAsInB,iDAAiD;AACjD,eAAO,MAAM,WAAW,KAA2B,CAAA;AAQnD,0HAA0H;AAC1H,eAAO,MAAM,SAAS,KAA2B,CAAA;AAYjD,wCAAwC;AACxC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAatD,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,KAAgC,CAAA;AAajE,sIAAsI;AACtI,eAAO,MAAM,WAAW,KAA2B,CAAA;AAmBnD,uCAAuC;AACvC,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,kCAAkC;AAClC,eAAO,MAAM,QAAQ,KAAwB,CAAA;AAK7C,kCAAkC;AAClC,eAAO,MAAM,QAAQ,KAA2B,CAAA;AAKhD,uGAAuG;AACvG,eAAO,MAAM,UAAU,KAA2B,CAAA;AAalD,sDAAsD;AACtD,eAAO,MAAM,SAAS,KAA2B,CAAA;AAKjD,sEAAsE;AACtE,eAAO,MAAM,aAAa,KAA2B,CAAA"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
7
|
const state = require('../../state-a62a7d5d.cjs');
|
|
8
8
|
const index = require('../../index-7dc05ee5.cjs');
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as TailwindElement, x, A } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x, A } from '../../index-211c8050.js';
|
|
2
2
|
import { e, a as e$1 } from '../../directive-9ec64c08.js';
|
|
3
3
|
import { t } from '../../state-7fde94d1.js';
|
|
4
4
|
import { c as customClassMap } from '../../index-714323c9.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
7
|
require('../lukso-share/index.cjs');
|
|
8
8
|
require('../../index-7dc05ee5.cjs');
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
|
-
const styleMap = require('../../style-map-
|
|
7
|
+
const styleMap = require('../../style-map-cc5b37cd.cjs');
|
|
8
8
|
|
|
9
9
|
const style = ":host {\n display: inline-flex\n}";
|
|
10
10
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { x, T as TailwindStyledElement } from '../../index-
|
|
1
|
+
import { x, T as TailwindStyledElement } from '../../index-211c8050.js';
|
|
2
2
|
import { e, a as e$1 } from '../../directive-9ec64c08.js';
|
|
3
|
-
import { o } from '../../style-map-
|
|
3
|
+
import { o } from '../../style-map-1398bfd6.js';
|
|
4
4
|
|
|
5
5
|
const style = ":host {\n display: inline-flex\n}";
|
|
6
6
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
7
|
const state = require('../../state-a62a7d5d.cjs');
|
|
8
8
|
const index = require('../../index-7dc05ee5.cjs');
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as TailwindElement, x, A } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x, A } from '../../index-211c8050.js';
|
|
2
2
|
import { e, a as e$1 } from '../../directive-9ec64c08.js';
|
|
3
3
|
import { t } from '../../state-7fde94d1.js';
|
|
4
4
|
import { c as customClassMap } from '../../index-714323c9.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
7
|
const index = require('../../index-7dc05ee5.cjs');
|
|
8
8
|
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
7
|
const state = require('../../state-a62a7d5d.cjs');
|
|
8
8
|
const index = require('../../index-7dc05ee5.cjs');
|
|
9
9
|
require('../lukso-icon/index.cjs');
|
|
10
10
|
require('../lukso-tag/index.cjs');
|
|
11
|
-
require('../../style-map-
|
|
11
|
+
require('../../style-map-cc5b37cd.cjs');
|
|
12
12
|
|
|
13
13
|
var __defProp = Object.defineProperty;
|
|
14
14
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { a as TailwindElement, x } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x } from '../../index-211c8050.js';
|
|
2
2
|
import { e, a as e$1 } from '../../directive-9ec64c08.js';
|
|
3
3
|
import { t } from '../../state-7fde94d1.js';
|
|
4
4
|
import { c as customClassMap } from '../../index-714323c9.js';
|
|
5
5
|
import '../lukso-icon/index.js';
|
|
6
6
|
import '../lukso-tag/index.js';
|
|
7
|
-
import '../../style-map-
|
|
7
|
+
import '../../style-map-1398bfd6.js';
|
|
8
8
|
|
|
9
9
|
var __defProp = Object.defineProperty;
|
|
10
10
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
|
-
const styleMap = require('../../style-map-
|
|
7
|
+
const styleMap = require('../../style-map-cc5b37cd.cjs');
|
|
8
8
|
const index = require('../../index-7dc05ee5.cjs');
|
|
9
9
|
|
|
10
10
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { a as TailwindElement, x } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x } from '../../index-211c8050.js';
|
|
2
2
|
import { e, a as e$1 } from '../../directive-9ec64c08.js';
|
|
3
|
-
import { o } from '../../style-map-
|
|
3
|
+
import { o } from '../../style-map-1398bfd6.js';
|
|
4
4
|
import { c as customClassMap } from '../../index-714323c9.js';
|
|
5
5
|
|
|
6
6
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
|
-
const styleMap = require('../../style-map-
|
|
7
|
+
const styleMap = require('../../style-map-cc5b37cd.cjs');
|
|
8
8
|
const index = require('../../index-7dc05ee5.cjs');
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { a as TailwindElement, x } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x } from '../../index-211c8050.js';
|
|
2
2
|
import { e, a as e$1 } from '../../directive-9ec64c08.js';
|
|
3
|
-
import { o } from '../../style-map-
|
|
3
|
+
import { o } from '../../style-map-1398bfd6.js';
|
|
4
4
|
import { c as customClassMap } from '../../index-714323c9.js';
|
|
5
5
|
|
|
6
6
|
var __defProp = Object.defineProperty;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
7
|
const state = require('../../state-a62a7d5d.cjs');
|
|
8
8
|
const index = require('../../index-7dc05ee5.cjs');
|
|
9
9
|
require('../lukso-icon/index.cjs');
|
|
10
10
|
require('../lukso-profile/index.cjs');
|
|
11
11
|
require('../lukso-username/index.cjs');
|
|
12
|
-
require('../../style-map-
|
|
12
|
+
require('../../style-map-cc5b37cd.cjs');
|
|
13
13
|
|
|
14
14
|
const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
|
|
15
15
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x, A } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x, A } from '../../index-211c8050.js';
|
|
2
2
|
import { e, a as e$1 } from '../../directive-9ec64c08.js';
|
|
3
3
|
import { t } from '../../state-7fde94d1.js';
|
|
4
4
|
import { c as customClassMap } from '../../index-714323c9.js';
|
|
5
5
|
import '../lukso-icon/index.js';
|
|
6
6
|
import '../lukso-profile/index.js';
|
|
7
7
|
import '../lukso-username/index.js';
|
|
8
|
-
import '../../style-map-
|
|
8
|
+
import '../../style-map-1398bfd6.js';
|
|
9
9
|
|
|
10
10
|
const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
|
|
11
11
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
7
|
const index = require('../../index-7dc05ee5.cjs');
|
|
8
8
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x } from '../../index-211c8050.js';
|
|
2
2
|
import { e, a as e$1 } from '../../directive-9ec64c08.js';
|
|
3
3
|
import { c as customClassMap } from '../../index-714323c9.js';
|
|
4
4
|
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
|
-
const styleMap = require('../../style-map-
|
|
7
|
+
const styleMap = require('../../style-map-cc5b37cd.cjs');
|
|
8
8
|
const index = require('../../index-7dc05ee5.cjs');
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { a as TailwindElement, x } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x } from '../../index-211c8050.js';
|
|
2
2
|
import { e, a as e$1 } from '../../directive-9ec64c08.js';
|
|
3
|
-
import { o } from '../../style-map-
|
|
3
|
+
import { o } from '../../style-map-1398bfd6.js';
|
|
4
4
|
import { c as customClassMap } from '../../index-714323c9.js';
|
|
5
5
|
|
|
6
6
|
var __defProp = Object.defineProperty;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
|
|
6
6
|
const directive = require('../../directive-db00f5fb.cjs');
|
|
7
|
-
const styleMap = require('../../style-map-
|
|
7
|
+
const styleMap = require('../../style-map-cc5b37cd.cjs');
|
|
8
8
|
const index = require('../../index-7dc05ee5.cjs');
|
|
9
9
|
|
|
10
10
|
const style = ":host {\n display: inline-flex\n}";
|