@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.
- package/dist/components/index.cjs +8 -3
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +4 -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 +54 -42
- package/dist/components/lukso-card/index.d.ts +1 -1
- package/dist/components/lukso-card/index.d.ts.map +1 -1
- package/dist/components/lukso-card/index.js +54 -42
- 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-image/index.cjs +127 -0
- package/dist/components/lukso-image/index.d.ts +20 -0
- package/dist/components/lukso-image/index.d.ts.map +1 -0
- package/dist/components/lukso-image/index.js +125 -0
- package/dist/components/lukso-image/lukso-image.stories.d.ts +14 -0
- package/dist/components/lukso-image/lukso-image.stories.d.ts.map +1 -0
- 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 +3 -3
- package/dist/components/lukso-navbar/index.js +3 -3
- package/dist/components/lukso-profile/index.cjs +13 -18
- package/dist/components/lukso-profile/index.d.ts.map +1 -1
- package/dist/components/lukso-profile/index.js +13 -18
- package/dist/components/lukso-profile/lukso-profile.stories.d.ts.map +1 -1
- 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 +4 -3
- package/dist/components/lukso-search/index.js +4 -3
- package/dist/components/lukso-select/index.cjs +4 -3
- package/dist/components/lukso-select/index.js +4 -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 +2 -2
- package/dist/components/lukso-tooltip/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 +1 -1
- package/dist/components/lukso-wizard/index.js +1 -1
- package/dist/index-5e074b8e.cjs +46 -0
- package/dist/{index-5bfb2237.cjs → index-733d3158.cjs} +1 -1
- package/dist/index-a68aad08.js +39 -0
- package/dist/{index-cb570192.js → index-b434231b.js} +1 -1
- package/dist/index.cjs +8 -3
- package/dist/index.js +4 -3
- package/dist/shared/tailwind-element/index.cjs +1 -1
- package/dist/shared/tailwind-element/index.js +1 -1
- package/dist/{style-map-e1ea4b4f.js → style-map-43a6ddb8.js} +1 -1
- package/dist/{style-map-36078d57.cjs → style-map-6443acae.cjs} +1 -1
- package/package.json +6 -1
- package/dist/index-806013c2.js +0 -39
- 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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
11
|
+
require('../../style-map-6443acae.cjs');
|
|
12
12
|
require('../../directive-8278ab14.cjs');
|
|
13
|
-
require('../../index-
|
|
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-
|
|
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-
|
|
7
|
+
import '../../style-map-43a6ddb8.js';
|
|
8
8
|
import '../../directive-2bb7789e.js';
|
|
9
|
-
import '../../index-
|
|
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-
|
|
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: "
|
|
475
|
-
profile: "
|
|
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
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
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":"
|
|
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-
|
|
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: "
|
|
471
|
-
profile: "
|
|
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
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
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,
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
13
|
+
require('../../style-map-6443acae.cjs');
|
|
14
14
|
require('../../index-66211c85.cjs');
|
|
15
|
-
require('
|
|
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-
|
|
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-
|
|
9
|
+
import '../../style-map-43a6ddb8.js';
|
|
10
10
|
import '../../index-faa8c4ae.js';
|
|
11
|
-
import '
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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}";
|
|
@@ -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-5e074b8e.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
|
|
7
|
-
const styleMap = require('../../style-map-
|
|
7
|
+
const styleMap = require('../../style-map-6443acae.cjs');
|
|
8
8
|
const index = require('../../index-e9668573.cjs');
|
|
9
9
|
require('../../directive-8278ab14.cjs');
|
|
10
10
|
|