@lukso/web-components 1.69.0 → 1.70.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 (69) hide show
  1. package/dist/components/index.cjs +8 -3
  2. package/dist/components/index.d.ts +1 -0
  3. package/dist/components/index.d.ts.map +1 -1
  4. package/dist/components/index.js +4 -3
  5. package/dist/components/lukso-button/index.cjs +1 -1
  6. package/dist/components/lukso-button/index.js +1 -1
  7. package/dist/components/lukso-card/index.cjs +54 -42
  8. package/dist/components/lukso-card/index.d.ts +1 -1
  9. package/dist/components/lukso-card/index.d.ts.map +1 -1
  10. package/dist/components/lukso-card/index.js +54 -42
  11. package/dist/components/lukso-checkbox/index.cjs +1 -1
  12. package/dist/components/lukso-checkbox/index.js +1 -1
  13. package/dist/components/lukso-footer/index.cjs +1 -1
  14. package/dist/components/lukso-footer/index.js +1 -1
  15. package/dist/components/lukso-icon/index.cjs +2 -2
  16. package/dist/components/lukso-icon/index.js +2 -2
  17. package/dist/components/lukso-image/index.cjs +127 -0
  18. package/dist/components/lukso-image/index.d.ts +20 -0
  19. package/dist/components/lukso-image/index.d.ts.map +1 -0
  20. package/dist/components/lukso-image/index.js +125 -0
  21. package/dist/components/lukso-image/lukso-image.stories.d.ts +14 -0
  22. package/dist/components/lukso-image/lukso-image.stories.d.ts.map +1 -0
  23. package/dist/components/lukso-input/index.cjs +1 -1
  24. package/dist/components/lukso-input/index.js +1 -1
  25. package/dist/components/lukso-modal/index.cjs +1 -1
  26. package/dist/components/lukso-modal/index.js +1 -1
  27. package/dist/components/lukso-navbar/index.cjs +3 -3
  28. package/dist/components/lukso-navbar/index.js +3 -3
  29. package/dist/components/lukso-profile/index.cjs +13 -18
  30. package/dist/components/lukso-profile/index.d.ts.map +1 -1
  31. package/dist/components/lukso-profile/index.js +13 -18
  32. package/dist/components/lukso-profile/lukso-profile.stories.d.ts.map +1 -1
  33. package/dist/components/lukso-progress/index.cjs +2 -2
  34. package/dist/components/lukso-progress/index.js +2 -2
  35. package/dist/components/lukso-sanitize/index.cjs +1 -1
  36. package/dist/components/lukso-sanitize/index.js +1 -1
  37. package/dist/components/lukso-search/index.cjs +4 -3
  38. package/dist/components/lukso-search/index.js +4 -3
  39. package/dist/components/lukso-select/index.cjs +4 -3
  40. package/dist/components/lukso-select/index.js +4 -3
  41. package/dist/components/lukso-share/index.cjs +1 -1
  42. package/dist/components/lukso-share/index.js +1 -1
  43. package/dist/components/lukso-switch/index.cjs +2 -2
  44. package/dist/components/lukso-switch/index.js +2 -2
  45. package/dist/components/lukso-tag/index.cjs +2 -2
  46. package/dist/components/lukso-tag/index.js +2 -2
  47. package/dist/components/lukso-terms/index.cjs +2 -2
  48. package/dist/components/lukso-terms/index.js +2 -2
  49. package/dist/components/lukso-test/index.cjs +1 -1
  50. package/dist/components/lukso-test/index.js +1 -1
  51. package/dist/components/lukso-tooltip/index.cjs +2 -2
  52. package/dist/components/lukso-tooltip/index.js +2 -2
  53. package/dist/components/lukso-username/index.cjs +2 -2
  54. package/dist/components/lukso-username/index.js +2 -2
  55. package/dist/components/lukso-wizard/index.cjs +1 -1
  56. package/dist/components/lukso-wizard/index.js +1 -1
  57. package/dist/index-5e074b8e.cjs +46 -0
  58. package/dist/{index-5bfb2237.cjs → index-733d3158.cjs} +1 -1
  59. package/dist/index-a68aad08.js +39 -0
  60. package/dist/{index-cb570192.js → index-b434231b.js} +1 -1
  61. package/dist/index.cjs +8 -3
  62. package/dist/index.js +4 -3
  63. package/dist/shared/tailwind-element/index.cjs +1 -1
  64. package/dist/shared/tailwind-element/index.js +1 -1
  65. package/dist/{style-map-e1ea4b4f.js → style-map-43a6ddb8.js} +1 -1
  66. package/dist/{style-map-36078d57.cjs → style-map-6443acae.cjs} +1 -1
  67. package/package.json +6 -1
  68. package/dist/index-806013c2.js +0 -39
  69. package/dist/index-f0846b77.cjs +0 -46
@@ -0,0 +1,127 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
6
+ const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
7
+ const state = require('../../state-f73a8b4f.cjs');
8
+ const styleMap = require('../../style-map-6443acae.cjs');
9
+ const index = require('../../index-66211c85.cjs');
10
+ require('../../directive-8278ab14.cjs');
11
+
12
+ var __defProp = Object.defineProperty;
13
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
14
+ var __decorateClass = (decorators, target, key, kind) => {
15
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
16
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
17
+ if (decorator = decorators[i])
18
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
19
+ if (kind && result)
20
+ __defProp(target, key, result);
21
+ return result;
22
+ };
23
+ exports.LuksoImage = class LuksoImage extends shared_tailwindElement_index.TailwindElement {
24
+ constructor() {
25
+ super(...arguments);
26
+ this.src = "";
27
+ this.placeholder = "";
28
+ this.isLoading = true;
29
+ this.resolvedPlaceholder = "";
30
+ this.hasError = false;
31
+ this.imageStyles = index.ie({
32
+ slots: {
33
+ wrapper: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
34
+ image: "object-cover opacity-0 size-full"
35
+ },
36
+ variants: {
37
+ isLoading: {
38
+ true: {}
39
+ },
40
+ hasError: {
41
+ true: {}
42
+ }
43
+ },
44
+ compoundVariants: [
45
+ {
46
+ isLoading: false,
47
+ hasError: false,
48
+ class: {
49
+ image: "animate-fade-in animation-fill-forwards"
50
+ }
51
+ },
52
+ {
53
+ isLoading: true,
54
+ hasError: false,
55
+ class: {
56
+ wrapper: "animate-pulse"
57
+ }
58
+ },
59
+ {
60
+ isLoading: false,
61
+ hasError: true,
62
+ class: {
63
+ image: "opacity-0"
64
+ }
65
+ }
66
+ ]
67
+ });
68
+ }
69
+ handleLoad() {
70
+ this.isLoading = false;
71
+ this.hasError = false;
72
+ }
73
+ handleError() {
74
+ this.isLoading = false;
75
+ this.hasError = true;
76
+ }
77
+ async willUpdate(changedProperties) {
78
+ if (changedProperties.has("hasError")) {
79
+ if (this.hasError) {
80
+ this.resolvedPlaceholder = this.placeholder;
81
+ } else {
82
+ this.resolvedPlaceholder = "";
83
+ }
84
+ await this.updateComplete;
85
+ }
86
+ }
87
+ render() {
88
+ const { wrapper, image } = this.imageStyles({
89
+ isLoading: this.isLoading,
90
+ hasError: this.hasError
91
+ });
92
+ return shared_tailwindElement_index.x`
93
+ <div
94
+ class=${wrapper()}
95
+ style=${styleMap.o({
96
+ backgroundImage: `url('${this.resolvedPlaceholder}')`
97
+ })}
98
+ >
99
+ <img
100
+ src=${this.src}
101
+ class=${image()}
102
+ loading="lazy"
103
+ @load=${this.handleLoad}
104
+ @error=${this.handleError}
105
+ />
106
+ </div>
107
+ `;
108
+ }
109
+ };
110
+ __decorateClass([
111
+ queryAssignedElements.n({ type: String })
112
+ ], exports.LuksoImage.prototype, "src", 2);
113
+ __decorateClass([
114
+ queryAssignedElements.n({ type: String })
115
+ ], exports.LuksoImage.prototype, "placeholder", 2);
116
+ __decorateClass([
117
+ state.t()
118
+ ], exports.LuksoImage.prototype, "isLoading", 2);
119
+ __decorateClass([
120
+ state.t()
121
+ ], exports.LuksoImage.prototype, "resolvedPlaceholder", 2);
122
+ __decorateClass([
123
+ state.t()
124
+ ], exports.LuksoImage.prototype, "hasError", 2);
125
+ exports.LuksoImage = __decorateClass([
126
+ queryAssignedElements.e("lukso-image")
127
+ ], exports.LuksoImage);
@@ -0,0 +1,20 @@
1
+ import { type PropertyValues } from 'lit';
2
+ import { TailwindElement } from '../../shared/tailwind-element';
3
+ export declare class LuksoImage extends TailwindElement {
4
+ src: string;
5
+ placeholder: string;
6
+ isLoading: boolean;
7
+ resolvedPlaceholder: string;
8
+ hasError: boolean;
9
+ private handleLoad;
10
+ private handleError;
11
+ willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
12
+ private imageStyles;
13
+ render(): import("lit-html").TemplateResult<1>;
14
+ }
15
+ declare global {
16
+ interface HTMLElementTagNameMap {
17
+ 'lukso-image': LuksoImage;
18
+ }
19
+ }
20
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,125 @@
1
+ import { a as TailwindElement, x } from '../../index-a68aad08.js';
2
+ import { n, e } from '../../query-assigned-elements-5d94572f.js';
3
+ import { t } from '../../state-0a779257.js';
4
+ import { o } from '../../style-map-43a6ddb8.js';
5
+ import { i as ie } from '../../index-faa8c4ae.js';
6
+ import '../../directive-2bb7789e.js';
7
+
8
+ var __defProp = Object.defineProperty;
9
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
10
+ var __decorateClass = (decorators, target, key, kind) => {
11
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
12
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
13
+ if (decorator = decorators[i])
14
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
15
+ if (kind && result)
16
+ __defProp(target, key, result);
17
+ return result;
18
+ };
19
+ let LuksoImage = class extends TailwindElement {
20
+ constructor() {
21
+ super(...arguments);
22
+ this.src = "";
23
+ this.placeholder = "";
24
+ this.isLoading = true;
25
+ this.resolvedPlaceholder = "";
26
+ this.hasError = false;
27
+ this.imageStyles = ie({
28
+ slots: {
29
+ wrapper: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
30
+ image: "object-cover opacity-0 size-full"
31
+ },
32
+ variants: {
33
+ isLoading: {
34
+ true: {}
35
+ },
36
+ hasError: {
37
+ true: {}
38
+ }
39
+ },
40
+ compoundVariants: [
41
+ {
42
+ isLoading: false,
43
+ hasError: false,
44
+ class: {
45
+ image: "animate-fade-in animation-fill-forwards"
46
+ }
47
+ },
48
+ {
49
+ isLoading: true,
50
+ hasError: false,
51
+ class: {
52
+ wrapper: "animate-pulse"
53
+ }
54
+ },
55
+ {
56
+ isLoading: false,
57
+ hasError: true,
58
+ class: {
59
+ image: "opacity-0"
60
+ }
61
+ }
62
+ ]
63
+ });
64
+ }
65
+ handleLoad() {
66
+ this.isLoading = false;
67
+ this.hasError = false;
68
+ }
69
+ handleError() {
70
+ this.isLoading = false;
71
+ this.hasError = true;
72
+ }
73
+ async willUpdate(changedProperties) {
74
+ if (changedProperties.has("hasError")) {
75
+ if (this.hasError) {
76
+ this.resolvedPlaceholder = this.placeholder;
77
+ } else {
78
+ this.resolvedPlaceholder = "";
79
+ }
80
+ await this.updateComplete;
81
+ }
82
+ }
83
+ render() {
84
+ const { wrapper, image } = this.imageStyles({
85
+ isLoading: this.isLoading,
86
+ hasError: this.hasError
87
+ });
88
+ return x`
89
+ <div
90
+ class=${wrapper()}
91
+ style=${o({
92
+ backgroundImage: `url('${this.resolvedPlaceholder}')`
93
+ })}
94
+ >
95
+ <img
96
+ src=${this.src}
97
+ class=${image()}
98
+ loading="lazy"
99
+ @load=${this.handleLoad}
100
+ @error=${this.handleError}
101
+ />
102
+ </div>
103
+ `;
104
+ }
105
+ };
106
+ __decorateClass([
107
+ n({ type: String })
108
+ ], LuksoImage.prototype, "src", 2);
109
+ __decorateClass([
110
+ n({ type: String })
111
+ ], LuksoImage.prototype, "placeholder", 2);
112
+ __decorateClass([
113
+ t()
114
+ ], LuksoImage.prototype, "isLoading", 2);
115
+ __decorateClass([
116
+ t()
117
+ ], LuksoImage.prototype, "resolvedPlaceholder", 2);
118
+ __decorateClass([
119
+ t()
120
+ ], LuksoImage.prototype, "hasError", 2);
121
+ LuksoImage = __decorateClass([
122
+ e("lukso-image")
123
+ ], LuksoImage);
124
+
125
+ export { LuksoImage };
@@ -0,0 +1,14 @@
1
+ import type { Meta } from '@storybook/web-components';
2
+ /**
3
+ * Documentation and examples of `lukso-image` component. This is very primitive component that main goal is to
4
+ * handle error/loading states and provide ability to customize placeholder image.
5
+ */
6
+ declare const meta: Meta;
7
+ export default meta;
8
+ /** Example of image with fixed size.*/
9
+ export declare const DefaultImage: any;
10
+ /** Example of image with rounded corners.*/
11
+ export declare const RoundedCorners: any;
12
+ /** Example of image with custom placeholder.*/
13
+ export declare const CustomPlaceholder: any;
14
+ //# sourceMappingURL=lukso-image.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"lukso-image.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-image/lukso-image.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IA+BX,CAAA;AAED,eAAe,IAAI,CAAA;AAWnB,uCAAuC;AACvC,eAAO,MAAM,YAAY,KAA2B,CAAA;AAKpD,4CAA4C;AAC5C,eAAO,MAAM,cAAc,KAA2B,CAAA;AAKtD,+CAA+C;AAC/C,eAAO,MAAM,iBAAiB,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-f0846b77.cjs');
5
+ const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
7
7
  const state = require('../../state-f73a8b4f.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x, A } from '../../index-806013c2.js';
1
+ import { a as TailwindElement, x, A } from '../../index-a68aad08.js';
2
2
  import { n, e } from '../../query-assigned-elements-5d94572f.js';
3
3
  import { t } from '../../state-0a779257.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.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-f0846b77.cjs');
5
+ const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
7
7
  const index = require('../../index-e9668573.cjs');
8
8
  require('../../directive-8278ab14.cjs');
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x } from '../../index-806013c2.js';
1
+ import { a as TailwindElement, x } from '../../index-a68aad08.js';
2
2
  import { n, e } from '../../query-assigned-elements-5d94572f.js';
3
3
  import { c as customClassMap } from '../../index-5e194caf.js';
4
4
  import '../../directive-2bb7789e.js';
@@ -2,15 +2,15 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-f0846b77.cjs');
5
+ const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
7
7
  const state = require('../../state-f73a8b4f.cjs');
8
8
  const index = require('../../index-66211c85.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-tag/index.cjs');
11
- require('../../style-map-36078d57.cjs');
11
+ require('../../style-map-6443acae.cjs');
12
12
  require('../../directive-8278ab14.cjs');
13
- require('../../index-5bfb2237.cjs');
13
+ require('../../index-733d3158.cjs');
14
14
 
15
15
  var __defProp = Object.defineProperty;
16
16
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1,12 +1,12 @@
1
- import { a as TailwindElement, x, A } from '../../index-806013c2.js';
1
+ import { a as TailwindElement, x, A } from '../../index-a68aad08.js';
2
2
  import { n, e } from '../../query-assigned-elements-5d94572f.js';
3
3
  import { t } from '../../state-0a779257.js';
4
4
  import { i as ie } from '../../index-faa8c4ae.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-tag/index.js';
7
- import '../../style-map-e1ea4b4f.js';
7
+ import '../../style-map-43a6ddb8.js';
8
8
  import '../../directive-2bb7789e.js';
9
- import '../../index-cb570192.js';
9
+ import '../../index-b434231b.js';
10
10
 
11
11
  var __defProp = Object.defineProperty;
12
12
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -2,10 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-f0846b77.cjs');
5
+ const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
7
- const styleMap = require('../../style-map-36078d57.cjs');
8
7
  const index = require('../../index-66211c85.cjs');
8
+ require('../lukso-image/index.cjs');
9
+ require('../../state-f73a8b4f.cjs');
10
+ require('../../style-map-6443acae.cjs');
9
11
  require('../../directive-8278ab14.cjs');
10
12
 
11
13
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -471,8 +473,8 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
471
473
  this.placeholder = "/assets/images/profile-default.svg";
472
474
  this.profileStyles = index.ie({
473
475
  slots: {
474
- wrapper: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 outline outline-2 outline-neutral-100",
475
- profile: "bg-[50%] bg-no-repeat bg-cover relative",
476
+ wrapper: "outline outline-2 outline-neutral-100 relative",
477
+ profile: "overflow-hidden",
476
478
  identicon: "absolute shadow-shadow-1xl rounded-full outline outline-neutral-100 right-0 bottom-0"
477
479
  },
478
480
  variants: {
@@ -563,21 +565,14 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
563
565
  isSquare: this.isSquare
564
566
  });
565
567
  return shared_tailwindElement_index.x`
566
- <div
567
- data-testid="profile"
568
- style=${styleMap.o({
569
- backgroundImage: `url('${this.placeholder}')`
570
- })}
571
- class=${wrapper()}
572
- >
573
- <div
574
- style=${styleMap.o({
575
- backgroundImage: `url('${this.profileUrl}')`
576
- })}
577
- class=${profile()}
578
- >
579
- ${this.identicon() ? shared_tailwindElement_index.x`<img src=${this.identicon()} class=${identicon()} />` : ""}
568
+ <div data-testid="profile" class=${wrapper()}>
569
+ <div class=${profile()}>
570
+ <lukso-image
571
+ src=${this.profileUrl}
572
+ placeholder=${this.placeholder}
573
+ ></lukso-image>
580
574
  </div>
575
+ ${this.identicon() ? shared_tailwindElement_index.x`<img src=${this.identicon()} class=${identicon()} />` : ""}
581
576
  </div>
582
577
  `;
583
578
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AAE9E,qBACa,YAAa,SAAQ,eAAe;IAE/C,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,IAAI,EAAE,WAAW,CAAU;IAG3B,QAAQ,UAAQ;IAGhB,WAAW,SAAuC;IAElD,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,aAAa,CAqFnB;IAEF,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,0BAA0B,CAAA;AAEjC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AAE9E,qBACa,YAAa,SAAQ,eAAe;IAE/C,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,IAAI,EAAE,WAAW,CAAU;IAG3B,QAAQ,UAAQ;IAGhB,WAAW,SAAuC;IAElD,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,aAAa,CAoFnB;IAEF,MAAM;CAoBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}
@@ -1,7 +1,9 @@
1
- import { a as TailwindElement, x } from '../../index-806013c2.js';
1
+ import { a as TailwindElement, x } from '../../index-a68aad08.js';
2
2
  import { n, e } from '../../query-assigned-elements-5d94572f.js';
3
- import { o } from '../../style-map-e1ea4b4f.js';
4
3
  import { i as ie } from '../../index-faa8c4ae.js';
4
+ import '../lukso-image/index.js';
5
+ import '../../state-0a779257.js';
6
+ import '../../style-map-43a6ddb8.js';
5
7
  import '../../directive-2bb7789e.js';
6
8
 
7
9
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -467,8 +469,8 @@ let LuksoProfile = class extends TailwindElement {
467
469
  this.placeholder = "/assets/images/profile-default.svg";
468
470
  this.profileStyles = ie({
469
471
  slots: {
470
- wrapper: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 outline outline-2 outline-neutral-100",
471
- profile: "bg-[50%] bg-no-repeat bg-cover relative",
472
+ wrapper: "outline outline-2 outline-neutral-100 relative",
473
+ profile: "overflow-hidden",
472
474
  identicon: "absolute shadow-shadow-1xl rounded-full outline outline-neutral-100 right-0 bottom-0"
473
475
  },
474
476
  variants: {
@@ -559,21 +561,14 @@ let LuksoProfile = class extends TailwindElement {
559
561
  isSquare: this.isSquare
560
562
  });
561
563
  return x`
562
- <div
563
- data-testid="profile"
564
- style=${o({
565
- backgroundImage: `url('${this.placeholder}')`
566
- })}
567
- class=${wrapper()}
568
- >
569
- <div
570
- style=${o({
571
- backgroundImage: `url('${this.profileUrl}')`
572
- })}
573
- class=${profile()}
574
- >
575
- ${this.identicon() ? x`<img src=${this.identicon()} class=${identicon()} />` : ""}
564
+ <div data-testid="profile" class=${wrapper()}>
565
+ <div class=${profile()}>
566
+ <lukso-image
567
+ src=${this.profileUrl}
568
+ placeholder=${this.placeholder}
569
+ ></lukso-image>
576
570
  </div>
571
+ ${this.identicon() ? x`<img src=${this.identicon()} class=${identicon()} />` : ""}
577
572
  </div>
578
573
  `;
579
574
  }
@@ -1 +1 @@
1
- {"version":3,"file":"lukso-profile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/lukso-profile.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAuFX,CAAA;AAED,eAAe,IAAI,CAAA;AAmBnB,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,wDAAwD;AACxD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,0EAA0E;AAC1E,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,0FAA0F;AAC1F,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,oEAAoE;AACpE,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,6EAA6E;AAC7E,eAAO,MAAM,WAAW,KAAoB,CAAA"}
1
+ {"version":3,"file":"lukso-profile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/lukso-profile.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAwFX,CAAA;AAED,eAAe,IAAI,CAAA;AAmBnB,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,wDAAwD;AACxD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,0EAA0E;AAC1E,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,0FAA0F;AAC1F,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,oEAAoE;AACpE,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,6EAA6E;AAC7E,eAAO,MAAM,WAAW,KAAoB,CAAA"}
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-f0846b77.cjs');
5
+ const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
7
- const styleMap = require('../../style-map-36078d57.cjs');
7
+ const styleMap = require('../../style-map-6443acae.cjs');
8
8
  require('../../tailwind-config.cjs');
9
9
  const cn = require('../../cn-5a985a94.cjs');
10
10
  require('../../directive-8278ab14.cjs');
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x } from '../../index-806013c2.js';
1
+ import { a as TailwindElement, x } from '../../index-a68aad08.js';
2
2
  import { n, e } from '../../query-assigned-elements-5d94572f.js';
3
- import { o } from '../../style-map-e1ea4b4f.js';
3
+ import { o } from '../../style-map-43a6ddb8.js';
4
4
  import '../../tailwind-config.js';
5
5
  import { c as cn } from '../../cn-e708e7fa.js';
6
6
  import '../../directive-2bb7789e.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-f0846b77.cjs');
5
+ const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
7
7
  const directive = require('../../directive-8278ab14.cjs');
8
8
 
@@ -1,4 +1,4 @@
1
- import { A, b as T, a as TailwindElement, x } from '../../index-806013c2.js';
1
+ import { A, b as T, a as TailwindElement, x } from '../../index-a68aad08.js';
2
2
  import { n, e as e$2 } from '../../query-assigned-elements-5d94572f.js';
3
3
  import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
4
4
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-f0846b77.cjs');
5
+ const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
7
7
  const state = require('../../state-f73a8b4f.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
@@ -10,9 +10,10 @@ require('../lukso-icon/index.cjs');
10
10
  require('../lukso-profile/index.cjs');
11
11
  require('../lukso-username/index.cjs');
12
12
  require('../../directive-8278ab14.cjs');
13
- require('../../style-map-36078d57.cjs');
13
+ require('../../style-map-6443acae.cjs');
14
14
  require('../../index-66211c85.cjs');
15
- require('../../index-5bfb2237.cjs');
15
+ require('../lukso-image/index.cjs');
16
+ require('../../index-733d3158.cjs');
16
17
 
17
18
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
18
19
 
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x, A } from '../../index-806013c2.js';
1
+ import { T as TailwindStyledElement, x, A } from '../../index-a68aad08.js';
2
2
  import { n, e } from '../../query-assigned-elements-5d94572f.js';
3
3
  import { t } from '../../state-0a779257.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
@@ -6,9 +6,10 @@ import '../lukso-icon/index.js';
6
6
  import '../lukso-profile/index.js';
7
7
  import '../lukso-username/index.js';
8
8
  import '../../directive-2bb7789e.js';
9
- import '../../style-map-e1ea4b4f.js';
9
+ import '../../style-map-43a6ddb8.js';
10
10
  import '../../index-faa8c4ae.js';
11
- import '../../index-cb570192.js';
11
+ import '../lukso-image/index.js';
12
+ import '../../index-b434231b.js';
12
13
 
13
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}";
14
15
 
@@ -2,17 +2,18 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-f0846b77.cjs');
5
+ const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
7
7
  const state = require('../../state-f73a8b4f.cjs');
8
8
  const index = require('../../index-66211c85.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-36078d57.cjs');
12
+ require('../../style-map-6443acae.cjs');
13
13
  require('../../directive-8278ab14.cjs');
14
+ require('../lukso-image/index.cjs');
14
15
  require('../../index-e9668573.cjs');
15
- require('../../index-5bfb2237.cjs');
16
+ require('../../index-733d3158.cjs');
16
17
 
17
18
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
18
19
 
@@ -1,14 +1,15 @@
1
- import { T as TailwindStyledElement, x, A } from '../../index-806013c2.js';
1
+ import { T as TailwindStyledElement, x, A } from '../../index-a68aad08.js';
2
2
  import { n, e } from '../../query-assigned-elements-5d94572f.js';
3
3
  import { t } from '../../state-0a779257.js';
4
4
  import { i as ie } from '../../index-faa8c4ae.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-e1ea4b4f.js';
8
+ import '../../style-map-43a6ddb8.js';
9
9
  import '../../directive-2bb7789e.js';
10
+ import '../lukso-image/index.js';
10
11
  import '../../index-5e194caf.js';
11
- import '../../index-cb570192.js';
12
+ import '../../index-b434231b.js';
12
13
 
13
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}";
14
15
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-f0846b77.cjs');
5
+ const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
7
7
 
8
8
  const style = ":host {\n display: inline-flex\n}";
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x } from '../../index-806013c2.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-a68aad08.js';
2
2
  import { n, e } from '../../query-assigned-elements-5d94572f.js';
3
3
 
4
4
  const style = ":host {\n display: inline-flex\n}";
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-f0846b77.cjs');
5
+ const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
7
- const styleMap = require('../../style-map-36078d57.cjs');
7
+ const styleMap = require('../../style-map-6443acae.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../../directive-8278ab14.cjs');
10
10