@record-evolution/widget-image 1.1.3 → 1.1.5
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 +10 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/widget-image.js +296 -246
- 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 +40 -15
package/src/widget-image.ts
CHANGED
|
@@ -1,13 +1,36 @@
|
|
|
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
|
+
|
|
15
|
+
@state() private themeBgColor?: string
|
|
16
|
+
@state() private themeTitleColor?: string
|
|
17
|
+
@state() private themeSubtitleColor?: string
|
|
18
|
+
|
|
9
19
|
version: string = 'versionplaceholder'
|
|
10
20
|
|
|
21
|
+
update(changedProperties: Map<string, any>) {
|
|
22
|
+
if (changedProperties.has('theme')) {
|
|
23
|
+
const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
|
|
24
|
+
const cssBgColor = getComputedStyle(this).getPropertyValue('--re-background-color').trim()
|
|
25
|
+
this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
|
|
26
|
+
this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
|
|
27
|
+
this.themeSubtitleColor =
|
|
28
|
+
cssTextColor || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
super.update(changedProperties)
|
|
32
|
+
}
|
|
33
|
+
|
|
11
34
|
static styles = css`
|
|
12
35
|
:host {
|
|
13
36
|
display: block;
|
|
@@ -35,7 +58,6 @@ export class WidgetImage extends LitElement {
|
|
|
35
58
|
overflow: hidden;
|
|
36
59
|
text-overflow: ellipsis;
|
|
37
60
|
white-space: nowrap;
|
|
38
|
-
color: var(--re-text-color, #000) !important;
|
|
39
61
|
}
|
|
40
62
|
p {
|
|
41
63
|
margin: 10px 0 0 0;
|
|
@@ -45,7 +67,6 @@ export class WidgetImage extends LitElement {
|
|
|
45
67
|
overflow: hidden;
|
|
46
68
|
text-overflow: ellipsis;
|
|
47
69
|
white-space: nowrap;
|
|
48
|
-
color: var(--re-text-color, #000) !important;
|
|
49
70
|
}
|
|
50
71
|
|
|
51
72
|
.img-container {
|
|
@@ -61,7 +82,6 @@ export class WidgetImage extends LitElement {
|
|
|
61
82
|
}
|
|
62
83
|
.no-data {
|
|
63
84
|
font-size: 20px;
|
|
64
|
-
color: var(--re-text-color, #000);
|
|
65
85
|
display: flex;
|
|
66
86
|
height: 100%;
|
|
67
87
|
width: 100%;
|
|
@@ -72,31 +92,36 @@ export class WidgetImage extends LitElement {
|
|
|
72
92
|
`
|
|
73
93
|
|
|
74
94
|
render() {
|
|
75
|
-
if (this.inputData?.title?.color)
|
|
76
|
-
this.style.setProperty('--re-user-h2-color', this.inputData?.title?.color)
|
|
77
|
-
if (this.inputData?.subTitle?.color)
|
|
78
|
-
this.style.setProperty('--re-user-p-color', this.inputData?.subTitle?.color)
|
|
79
|
-
|
|
80
95
|
return html`
|
|
81
|
-
<div class="wrapper">
|
|
96
|
+
<div class="wrapper" style="background-color: ${this.themeBgColor}">
|
|
82
97
|
<h3
|
|
83
98
|
class="paging"
|
|
84
99
|
?active=${this.inputData?.title?.text}
|
|
85
100
|
style="font-size: ${this.inputData?.title?.fontSize};
|
|
86
|
-
|
|
87
|
-
|
|
101
|
+
font-weight: ${this.inputData?.title?.fontWeight};
|
|
102
|
+
background-color: ${this.inputData?.title?.backgroundColor};
|
|
103
|
+
color: ${this.inputData?.title?.color ?? this.themeTitleColor};"
|
|
88
104
|
>
|
|
89
105
|
${this.inputData?.title?.text}
|
|
90
106
|
</h3>
|
|
91
107
|
<p
|
|
92
108
|
class="paging"
|
|
93
109
|
?active=${this.inputData?.subTitle?.text}
|
|
94
|
-
style="font-size: ${this.inputData?.subTitle?.fontSize};
|
|
95
|
-
?.subTitle?.fontWeight};
|
|
110
|
+
style="font-size: ${this.inputData?.subTitle?.fontSize};
|
|
111
|
+
font-weight: ${this.inputData?.subTitle?.fontWeight};
|
|
112
|
+
color: ${this.inputData?.subTitle?.color ?? this.themeSubtitleColor};"
|
|
96
113
|
>
|
|
97
114
|
${this.inputData?.subTitle?.text}
|
|
98
115
|
</p>
|
|
99
|
-
<div
|
|
116
|
+
<div
|
|
117
|
+
class="paging no-data"
|
|
118
|
+
?active=${!this.inputData?.imageLink}
|
|
119
|
+
style="font-size: ${this.inputData?.title?.fontSize};
|
|
120
|
+
font-weight: ${this.inputData?.title?.fontWeight};
|
|
121
|
+
color: ${this.inputData?.title?.color ?? this.themeTitleColor};"
|
|
122
|
+
>
|
|
123
|
+
No Image
|
|
124
|
+
</div>
|
|
100
125
|
<div class="img-container paging" ?active="${this.inputData?.imageLink}">
|
|
101
126
|
<img src="${this.inputData?.imageLink ?? ''}" alt="Image Widget" />
|
|
102
127
|
</div>
|