@record-evolution/widget-image 1.1.2 → 1.1.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/dist/src/widget-image.d.ts +6 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/widget-image.js +263 -242
- package/dist/widget-image.js.map +1 -1
- package/package.json +14 -14
- package/src/default-data.json +3 -3
- package/src/definition-schema.d.ts +9 -3
- package/src/widget-image.ts +27 -11
package/src/widget-image.ts
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { html, css, LitElement } from 'lit'
|
|
2
2
|
import { property, state } from 'lit/decorators.js'
|
|
3
3
|
import { ConfigureTheImage } from './definition-schema.js'
|
|
4
|
-
|
|
4
|
+
type Theme = {
|
|
5
|
+
theme_name: string
|
|
6
|
+
theme_object: any
|
|
7
|
+
}
|
|
5
8
|
export class WidgetImage extends LitElement {
|
|
6
9
|
@property({ type: Object })
|
|
7
10
|
inputData?: ConfigureTheImage
|
|
8
11
|
|
|
12
|
+
@property({ type: Object })
|
|
13
|
+
theme?: Theme
|
|
14
|
+
|
|
9
15
|
version: string = 'versionplaceholder'
|
|
10
16
|
|
|
11
17
|
static styles = css`
|
|
@@ -14,6 +20,7 @@ export class WidgetImage extends LitElement {
|
|
|
14
20
|
font-family: sans-serif;
|
|
15
21
|
box-sizing: border-box;
|
|
16
22
|
margin: auto;
|
|
23
|
+
background-color: var(--re-background-color, #fff);
|
|
17
24
|
}
|
|
18
25
|
|
|
19
26
|
.paging:not([active]) {
|
|
@@ -35,7 +42,7 @@ export class WidgetImage extends LitElement {
|
|
|
35
42
|
overflow: hidden;
|
|
36
43
|
text-overflow: ellipsis;
|
|
37
44
|
white-space: nowrap;
|
|
38
|
-
color: var(--re-text-color, #000)
|
|
45
|
+
color: var(--re-text-color, #000);
|
|
39
46
|
}
|
|
40
47
|
p {
|
|
41
48
|
margin: 10px 0 0 0;
|
|
@@ -45,7 +52,7 @@ export class WidgetImage extends LitElement {
|
|
|
45
52
|
overflow: hidden;
|
|
46
53
|
text-overflow: ellipsis;
|
|
47
54
|
white-space: nowrap;
|
|
48
|
-
color: var(--re-text-color, #000)
|
|
55
|
+
color: var(--re-text-color, #000);
|
|
49
56
|
}
|
|
50
57
|
|
|
51
58
|
.img-container {
|
|
@@ -59,22 +66,29 @@ export class WidgetImage extends LitElement {
|
|
|
59
66
|
height: 100%;
|
|
60
67
|
object-fit: contain;
|
|
61
68
|
}
|
|
69
|
+
.no-data {
|
|
70
|
+
font-size: 20px;
|
|
71
|
+
color: var(--re-text-color, #000);
|
|
72
|
+
display: flex;
|
|
73
|
+
height: 100%;
|
|
74
|
+
width: 100%;
|
|
75
|
+
text-align: center;
|
|
76
|
+
align-items: center;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
}
|
|
62
79
|
`
|
|
63
80
|
|
|
64
81
|
render() {
|
|
65
|
-
if (this.inputData?.title?.color)
|
|
66
|
-
this.style.setProperty('--re-user-h2-color', this.inputData?.title?.color)
|
|
67
|
-
if (this.inputData?.subTitle?.color)
|
|
68
|
-
this.style.setProperty('--re-user-p-color', this.inputData?.subTitle?.color)
|
|
69
|
-
|
|
70
82
|
return html`
|
|
71
|
-
<div class="wrapper">
|
|
83
|
+
<div class="wrapper" style="background-color: ${this.theme?.theme_object?.backgroundColor}">
|
|
72
84
|
<h3
|
|
73
85
|
class="paging"
|
|
74
86
|
?active=${this.inputData?.title?.text}
|
|
75
87
|
style="font-size: ${this.inputData?.title?.fontSize};
|
|
76
88
|
font-weight: ${this.inputData?.title?.fontWeight};
|
|
77
|
-
background-color: ${this.inputData?.title?.backgroundColor
|
|
89
|
+
background-color: ${this.inputData?.title?.backgroundColor ??
|
|
90
|
+
this.theme?.theme_object?.backgroundColor};
|
|
91
|
+
color: ${this.inputData?.title?.color ?? this.theme?.theme_object?.title.textStyle.color};"
|
|
78
92
|
>
|
|
79
93
|
${this.inputData?.title?.text}
|
|
80
94
|
</h3>
|
|
@@ -82,10 +96,12 @@ export class WidgetImage extends LitElement {
|
|
|
82
96
|
class="paging"
|
|
83
97
|
?active=${this.inputData?.subTitle?.text}
|
|
84
98
|
style="font-size: ${this.inputData?.subTitle?.fontSize}; font-weight: ${this.inputData
|
|
85
|
-
?.subTitle?.fontWeight};
|
|
99
|
+
?.subTitle?.fontWeight}; color: ${this.inputData?.subTitle?.color ??
|
|
100
|
+
this.theme?.theme_object?.title.textStyle.color};"
|
|
86
101
|
>
|
|
87
102
|
${this.inputData?.subTitle?.text}
|
|
88
103
|
</p>
|
|
104
|
+
<div class="paging no-data" ?active=${!this.inputData?.imageLink}>No Image</div>
|
|
89
105
|
<div class="img-container paging" ?active="${this.inputData?.imageLink}">
|
|
90
106
|
<img src="${this.inputData?.imageLink ?? ''}" alt="Image Widget" />
|
|
91
107
|
</div>
|