@lukso/web-components 1.38.0 → 1.39.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.
Files changed (5) hide show
  1. package/dist/components/lukso-card/index.cjs +13 -4
  2. package/dist/components/lukso-card/index.d.ts +1 -0
  3. package/dist/components/lukso-card/index.d.ts.map +1 -1
  4. package/dist/components/lukso-card/index.js +13 -4
  5. package/package.json +1 -1
package/dist/components/lukso-card/index.cjs CHANGED
@@ -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,9 +107,9 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
98
107
  >
99
108
  <div
100
109
  style=${styleMap.o({
101
- backgroundImage: `url(${this.backgroundUrl})`
110
+ backgroundImage: this.backgroundImageOrGradient()
102
111
  })}
103
- class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-90"
112
+ class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative"
104
113
  >
105
114
  ${this.backgroundUrl ? shared_tailwindElement_index.x` <div
106
115
  class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
@@ -150,9 +159,9 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
150
159
  >
151
160
  <div
152
161
  style=${styleMap.o({
153
- backgroundImage: `url(${this.backgroundUrl})`
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-90"
164
+ class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-100"
156
165
  >
157
166
  ${this.backgroundUrl ? shared_tailwindElement_index.x`<div
158
167
  class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
package/dist/components/lukso-card/index.d.ts CHANGED
@@ -14,6 +14,7 @@ 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>;
package/dist/components/lukso-card/index.d.ts.map CHANGED
@@ -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;IAuDf,gBAAgB;IAyDhB,YAAY;IAmCZ,MAAM;CAeP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
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,OAAO,CAAC,yBAAyB;IAYjC,aAAa;IAmBb,kBAAkB;IA0BlB,eAAe;IAuDf,gBAAgB;IAyDhB,YAAY;IAmCZ,MAAM;CAeP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
package/dist/components/lukso-card/index.js CHANGED
@@ -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,9 +103,9 @@ let LuksoCard = class extends TailwindStyledElement(style) {
94
103
  >
95
104
  <div
96
105
  style=${o({
97
- backgroundImage: `url(${this.backgroundUrl})`
106
+ backgroundImage: this.backgroundImageOrGradient()
98
107
  })}
99
- class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-90"
108
+ class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative"
100
109
  >
101
110
  ${this.backgroundUrl ? x` <div
102
111
  class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
@@ -146,9 +155,9 @@ let LuksoCard = class extends TailwindStyledElement(style) {
146
155
  >
147
156
  <div
148
157
  style=${o({
149
- backgroundImage: `url(${this.backgroundUrl})`
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-90"
160
+ class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-100"
152
161
  >
153
162
  ${this.backgroundUrl ? x`<div
154
163
  class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lukso/web-components",
3
- "version": "1.38.0",
3
+ "version": "1.39.0",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist",