@nuralyui/image 0.0.3 → 0.0.4
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/image.component.d.ts +5 -1
- package/image.component.d.ts.map +1 -1
- package/image.component.js +33 -9
- package/image.component.js.map +1 -1
- package/image.style.d.ts.map +1 -1
- package/image.style.js +73 -0
- package/image.style.js.map +1 -1
- package/package.json +1 -1
package/image.component.d.ts
CHANGED
|
@@ -2,14 +2,18 @@ import { LitElement, PropertyValues } from "lit";
|
|
|
2
2
|
export declare class HyImage extends LitElement {
|
|
3
3
|
static styles: import("lit").CSSResult;
|
|
4
4
|
src: string;
|
|
5
|
-
fallback:
|
|
5
|
+
fallback: string;
|
|
6
6
|
width: string;
|
|
7
7
|
height: string;
|
|
8
8
|
alt: string;
|
|
9
|
+
previewable: boolean;
|
|
9
10
|
image: string;
|
|
11
|
+
showPreview: boolean;
|
|
10
12
|
defaultFallBack: string;
|
|
11
13
|
willUpdate(_changedProperties: PropertyValues): void;
|
|
12
14
|
private handleError;
|
|
15
|
+
private _showPreview;
|
|
16
|
+
private _closePreview;
|
|
13
17
|
render(): import("lit").TemplateResult<1>;
|
|
14
18
|
}
|
|
15
19
|
//# sourceMappingURL=image.component.d.ts.map
|
package/image.component.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.component.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"image.component.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIvD,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAU;IAGhC,GAAG,EAAG,MAAM,CAAC;IAGb,QAAQ,EAAI,MAAM,CAAC;IAGnB,KAAK,SAAU;IAGf,MAAM,SAAU;IAGhB,GAAG,SAAM;IAGT,WAAW,UAAS;IAGpB,KAAK,SAAM;IAGX,WAAW,UAAS;IAEpB,eAAe,SAAwsC;IAE9sC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAM7D,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAIZ,MAAM;CAoBhB"}
|
package/image.component.js
CHANGED
|
@@ -10,11 +10,12 @@ import styles from './image.style.js';
|
|
|
10
10
|
let HyImage = class HyImage extends LitElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
|
-
this.fallback = null;
|
|
14
13
|
this.width = 'auto';
|
|
15
14
|
this.height = 'auto';
|
|
16
15
|
this.alt = '';
|
|
16
|
+
this.previewable = false;
|
|
17
17
|
this.image = '';
|
|
18
|
+
this.showPreview = false;
|
|
18
19
|
this.defaultFallBack = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg==';
|
|
19
20
|
}
|
|
20
21
|
willUpdate(_changedProperties) {
|
|
@@ -37,16 +38,33 @@ let HyImage = class HyImage extends LitElement {
|
|
|
37
38
|
this.image = this.defaultFallBack;
|
|
38
39
|
}
|
|
39
40
|
}
|
|
41
|
+
_showPreview() {
|
|
42
|
+
if (this.previewable) {
|
|
43
|
+
this.showPreview = true;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
_closePreview() {
|
|
47
|
+
this.showPreview = false;
|
|
48
|
+
}
|
|
40
49
|
render() {
|
|
41
50
|
return html `
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
51
|
+
<div class="image-container">
|
|
52
|
+
<img
|
|
53
|
+
src=${this.image}
|
|
54
|
+
@error=${this.handleError}
|
|
55
|
+
@click=${this._showPreview}
|
|
56
|
+
style="width:${this.width}; height:${this.height}; cursor: ${this.previewable ? 'pointer' : 'default'}"
|
|
57
|
+
alt=${this.alt}
|
|
47
58
|
/>
|
|
48
|
-
|
|
49
|
-
|
|
59
|
+
|
|
60
|
+
${this.showPreview ? html `
|
|
61
|
+
<div class="preview-modal" @click=${this._closePreview}>
|
|
62
|
+
<button class="preview-close">×</button>
|
|
63
|
+
<img src="${this.image}" alt="${this.alt}" />
|
|
64
|
+
</div>
|
|
65
|
+
` : ''}
|
|
66
|
+
</div>
|
|
67
|
+
`;
|
|
50
68
|
}
|
|
51
69
|
};
|
|
52
70
|
HyImage.styles = styles;
|
|
@@ -54,7 +72,7 @@ __decorate([
|
|
|
54
72
|
property()
|
|
55
73
|
], HyImage.prototype, "src", void 0);
|
|
56
74
|
__decorate([
|
|
57
|
-
property()
|
|
75
|
+
property({ type: String })
|
|
58
76
|
], HyImage.prototype, "fallback", void 0);
|
|
59
77
|
__decorate([
|
|
60
78
|
property()
|
|
@@ -65,9 +83,15 @@ __decorate([
|
|
|
65
83
|
__decorate([
|
|
66
84
|
property()
|
|
67
85
|
], HyImage.prototype, "alt", void 0);
|
|
86
|
+
__decorate([
|
|
87
|
+
property({ type: Boolean })
|
|
88
|
+
], HyImage.prototype, "previewable", void 0);
|
|
68
89
|
__decorate([
|
|
69
90
|
state()
|
|
70
91
|
], HyImage.prototype, "image", void 0);
|
|
92
|
+
__decorate([
|
|
93
|
+
state()
|
|
94
|
+
], HyImage.prototype, "showPreview", void 0);
|
|
71
95
|
HyImage = __decorate([
|
|
72
96
|
customElement('hy-image')
|
|
73
97
|
], HyImage);
|
package/image.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.component.js","sourceRoot":"","sources":["../../../src/components/image/image.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"image.component.js","sourceRoot":"","sources":["../../../src/components/image/image.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAGtC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QAUE,UAAK,GAAG,MAAM,CAAC;QAGf,WAAM,GAAG,MAAM,CAAC;QAGhB,QAAG,GAAG,EAAE,CAAC;QAGT,gBAAW,GAAG,KAAK,CAAC;QAGpB,UAAK,GAAG,EAAE,CAAC;QAGX,gBAAW,GAAG,KAAK,CAAC;QAEpB,oBAAe,GAAG,osCAAosC,CAAC;IAuDztC,CAAC;IArDU,UAAU,CAAC,kBAAkC;QACpD,IAAI,kBAAkB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SACvB;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE;YAC5C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,KAAK,EAAE,uBAAuB,IAAI,CAAC,KAAK,EAAE;aAC3C;SACF,CAAC,CAAC,CAAC;QAEJ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,EAAE;YACvF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;SAC5B;aACI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,EAAE;YAC3C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC;SACnC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,KAAK;mBACP,IAAI,CAAC,WAAW;mBAChB,IAAI,CAAC,YAAY;yBACX,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBAC/F,IAAI,CAAC,GAAG;;;UAGd,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;8CACa,IAAI,CAAC,aAAa;;wBAExC,IAAI,CAAC,KAAK,UAAU,IAAI,CAAC,GAAG;;SAE3C,CAAC,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;CACF,CAAA;AAjFiB,cAAM,GAAG,MAAO,CAAA;AAGhC;IADC,QAAQ,EAAE;oCACE;AAGb;IADC,QAAQ,CAAC,EAAC,IAAI,EAAG,MAAM,EAAC,CAAC;yCACP;AAGnB;IADC,QAAQ,EAAE;sCACI;AAGf;IADC,QAAQ,EAAE;uCACK;AAGhB;IADC,QAAQ,EAAE;oCACF;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACR;AAGpB;IADC,KAAK,EAAE;sCACG;AAGX;IADC,KAAK,EAAE;4CACY;AAzBT,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAkFnB;SAlFY,OAAO","sourcesContent":["import { LitElement, PropertyValues, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport styles from './image.style.js';\n\n@customElement('hy-image')\nexport class HyImage extends LitElement {\n static override styles = styles;\n\n @property()\n src!: string;\n\n @property({type : String})\n fallback! : string;\n\n @property()\n width = 'auto';\n\n @property()\n height = 'auto';\n\n @property()\n alt = '';\n\n @property({ type: Boolean })\n previewable = false;\n\n @state()\n image = '';\n\n @state()\n showPreview = false;\n\n defaultFallBack = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg==';\n\n override willUpdate(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('fallback') || _changedProperties.has('src')) {\n this.image = this.src;\n }\n }\n\n private handleError() {\n this.dispatchEvent(new CustomEvent('onError', {\n bubbles: true,\n composed: true,\n detail: {\n error: `error loading image ${this.image}`\n }\n }));\n\n if (this.fallback && this.image !== this.fallback && this.image != this.defaultFallBack) {\n this.image = this.fallback;\n }\n else if (this.image != this.defaultFallBack) {\n this.image = this.defaultFallBack;\n }\n }\n\n private _showPreview() {\n if (this.previewable) {\n this.showPreview = true;\n }\n }\n\n private _closePreview() {\n this.showPreview = false;\n }\n\n override render() {\n return html`\n <div class=\"image-container\">\n <img\n src=${this.image}\n @error=${this.handleError}\n @click=${this._showPreview}\n style=\"width:${this.width}; height:${this.height}; cursor: ${this.previewable ? 'pointer' : 'default'}\"\n alt=${this.alt}\n />\n\n ${this.showPreview ? html`\n <div class=\"preview-modal\" @click=${this._closePreview}>\n <button class=\"preview-close\">×</button>\n <img src=\"${this.image}\" alt=\"${this.alt}\" />\n </div>\n ` : ''}\n </div>\n `;\n }\n}"]}
|
package/image.style.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.style.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":";AAEA,
|
|
1
|
+
{"version":3,"file":"image.style.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":";AAEA,wBAgFC"}
|
package/image.style.js
CHANGED
|
@@ -6,5 +6,78 @@ img{
|
|
|
6
6
|
border-bottom-left-radius: var(--hybrid-image-border-bottom-left-radius,var(--hybrid-image-local-border-bottom-left-radius));
|
|
7
7
|
border-bottom-right-radius: var(--hybrid-image-border-bottom-right-radius,var(--hybrid-image-local-border-bottom-right-radius));
|
|
8
8
|
}
|
|
9
|
+
.image-container {
|
|
10
|
+
position: relative;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
img {
|
|
14
|
+
display: block;
|
|
15
|
+
max-width: 100%;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.preview-modal {
|
|
19
|
+
position: fixed;
|
|
20
|
+
top: 0;
|
|
21
|
+
left: 0;
|
|
22
|
+
right: 0;
|
|
23
|
+
bottom: 0;
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
background-color: rgba(0, 0, 0, 0.7);
|
|
28
|
+
z-index: 1000;
|
|
29
|
+
animation: fadeIn 0.3s ease;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.preview-modal img {
|
|
33
|
+
max-width: 90%;
|
|
34
|
+
max-height: 90%;
|
|
35
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
36
|
+
border-radius: 4px;
|
|
37
|
+
animation: zoomIn 0.3s ease;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.preview-close {
|
|
41
|
+
position: absolute;
|
|
42
|
+
top: 20px;
|
|
43
|
+
right: 20px;
|
|
44
|
+
width: 40px;
|
|
45
|
+
height: 40px;
|
|
46
|
+
background: rgba(255, 255, 255, 0.2);
|
|
47
|
+
border: none;
|
|
48
|
+
border-radius: 50%;
|
|
49
|
+
color: white;
|
|
50
|
+
font-size: 24px;
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
outline: none;
|
|
56
|
+
transition: background-color 0.3s;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.preview-close:hover {
|
|
60
|
+
background: rgba(255, 255, 255, 0.4);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@keyframes fadeIn {
|
|
64
|
+
from {
|
|
65
|
+
opacity: 0;
|
|
66
|
+
}
|
|
67
|
+
to {
|
|
68
|
+
opacity: 1;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@keyframes zoomIn {
|
|
73
|
+
from {
|
|
74
|
+
transform: scale(0.9);
|
|
75
|
+
opacity: 0;
|
|
76
|
+
}
|
|
77
|
+
to {
|
|
78
|
+
transform: scale(1);
|
|
79
|
+
opacity: 1;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
9
82
|
`;
|
|
10
83
|
//# sourceMappingURL=image.style.js.map
|
package/image.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.style.js","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAgB,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"image.style.js","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAgB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFlB,CAAA","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\nimg{\n border-top-left-radius:var(--hybrid-image-border-top-left-radius,var(--hybrid-image-local-border-top-left-radius)) ;\n border-top-right-radius: var(--hybrid-image-border-top-right-radius,var(--hybrid-image-local-border-top-right-radius));\n border-bottom-left-radius: var(--hybrid-image-border-bottom-left-radius,var(--hybrid-image-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--hybrid-image-border-bottom-right-radius,var(--hybrid-image-local-border-bottom-right-radius));\n}\n.image-container {\n position: relative;\n }\n\n img {\n display: block;\n max-width: 100%;\n }\n\n .preview-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 1000;\n animation: fadeIn 0.3s ease;\n }\n\n .preview-modal img {\n max-width: 90%;\n max-height: 90%;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n animation: zoomIn 0.3s ease;\n }\n\n .preview-close {\n position: absolute;\n top: 20px;\n right: 20px;\n width: 40px;\n height: 40px;\n background: rgba(255, 255, 255, 0.2);\n border: none;\n border-radius: 50%;\n color: white;\n font-size: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n outline: none;\n transition: background-color 0.3s;\n }\n\n .preview-close:hover {\n background: rgba(255, 255, 255, 0.4);\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes zoomIn {\n from {\n transform: scale(0.9);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n }\n`"]}
|