@lukso/web-components 1.71.2 → 1.71.3

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 (4) hide show
  1. package/dist/components/lukso-image/index.cjs +17 -14
  2. package/dist/components/lukso-image/index.d.ts.map +1 -1
  3. package/dist/components/lukso-image/index.js +17 -14
  4. package/package.json +1 -1
package/dist/components/lukso-image/index.cjs CHANGED
@@ -30,7 +30,8 @@ exports.LuksoImage = class LuksoImage extends shared_tailwindElement_index.Tailw
30
30
  this.hasError = false;
31
31
  this.imageStyles = index.ie({
32
32
  slots: {
33
- wrapper: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
33
+ wrapper: "size-full bg-neutral-100",
34
+ placeholder: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
34
35
  image: "object-cover opacity-0 size-full"
35
36
  },
36
37
  variants: {
@@ -53,7 +54,7 @@ exports.LuksoImage = class LuksoImage extends shared_tailwindElement_index.Tailw
53
54
  isLoading: true,
54
55
  hasError: false,
55
56
  class: {
56
- wrapper: "animate-pulse"
57
+ placeholder: "animate-pulse"
57
58
  }
58
59
  },
59
60
  {
@@ -85,24 +86,26 @@ exports.LuksoImage = class LuksoImage extends shared_tailwindElement_index.Tailw
85
86
  }
86
87
  }
87
88
  render() {
88
- const { wrapper, image } = this.imageStyles({
89
+ const { wrapper, placeholder, image } = this.imageStyles({
89
90
  isLoading: this.isLoading,
90
91
  hasError: this.hasError
91
92
  });
92
93
  return shared_tailwindElement_index.x`
93
- <div
94
- class=${wrapper()}
95
- style=${styleMap.o({
94
+ <div class=${wrapper()}>
95
+ <div
96
+ class=${placeholder()}
97
+ style=${styleMap.o({
96
98
  backgroundImage: `url('${this.resolvedPlaceholder}')`
97
99
  })}
98
- >
99
- <img
100
- src=${this.src}
101
- class=${image()}
102
- loading="lazy"
103
- @load=${this.handleLoad}
104
- @error=${this.handleError}
105
- />
100
+ >
101
+ <img
102
+ src=${this.src}
103
+ class=${image()}
104
+ loading="lazy"
105
+ @load=${this.handleLoad}
106
+ @error=${this.handleError}
107
+ />
108
+ </div>
106
109
  </div>
107
110
  `;
108
111
  }
package/dist/components/lukso-image/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAA;AAK/C,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,qBACa,UAAW,SAAQ,eAAe;IAE7C,GAAG,SAAK;IAGR,WAAW,SAAK;IAGhB,SAAS,UAAO;IAGhB,mBAAmB,SAAK;IAGxB,QAAQ,UAAQ;IAEhB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAKb,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAYxD,OAAO,CAAC,WAAW,CAqCjB;IAEF,MAAM;CAuBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAA;AAK/C,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,qBACa,UAAW,SAAQ,eAAe;IAE7C,GAAG,SAAK;IAGR,WAAW,SAAK;IAGhB,SAAS,UAAO;IAGhB,mBAAmB,SAAK;IAGxB,QAAQ,UAAQ;IAEhB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAKb,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAYxD,OAAO,CAAC,WAAW,CAsCjB;IAEF,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
package/dist/components/lukso-image/index.js CHANGED
@@ -26,7 +26,8 @@ let LuksoImage = class extends TailwindElement {
26
26
  this.hasError = false;
27
27
  this.imageStyles = ie({
28
28
  slots: {
29
- wrapper: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
29
+ wrapper: "size-full bg-neutral-100",
30
+ placeholder: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
30
31
  image: "object-cover opacity-0 size-full"
31
32
  },
32
33
  variants: {
@@ -49,7 +50,7 @@ let LuksoImage = class extends TailwindElement {
49
50
  isLoading: true,
50
51
  hasError: false,
51
52
  class: {
52
- wrapper: "animate-pulse"
53
+ placeholder: "animate-pulse"
53
54
  }
54
55
  },
55
56
  {
@@ -81,24 +82,26 @@ let LuksoImage = class extends TailwindElement {
81
82
  }
82
83
  }
83
84
  render() {
84
- const { wrapper, image } = this.imageStyles({
85
+ const { wrapper, placeholder, image } = this.imageStyles({
85
86
  isLoading: this.isLoading,
86
87
  hasError: this.hasError
87
88
  });
88
89
  return x`
89
- <div
90
- class=${wrapper()}
91
- style=${o({
90
+ <div class=${wrapper()}>
91
+ <div
92
+ class=${placeholder()}
93
+ style=${o({
92
94
  backgroundImage: `url('${this.resolvedPlaceholder}')`
93
95
  })}
94
- >
95
- <img
96
- src=${this.src}
97
- class=${image()}
98
- loading="lazy"
99
- @load=${this.handleLoad}
100
- @error=${this.handleError}
101
- />
96
+ >
97
+ <img
98
+ src=${this.src}
99
+ class=${image()}
100
+ loading="lazy"
101
+ @load=${this.handleLoad}
102
+ @error=${this.handleError}
103
+ />
104
+ </div>
102
105
  </div>
103
106
  `;
104
107
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lukso/web-components",
3
- "version": "1.71.2",
3
+ "version": "1.71.3",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist",