@record-evolution/widget-value 1.1.7 → 1.1.9

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-value",
     "license": "MIT",
     "author": "widget-value",
-    "version": "1.1.7",
+    "version": "1.1.9",
     "engines": {
         "node": "18.18.2",
         "npm": ">=10.0.2"
@@ -17,44 +17,41 @@
     ],
     "scripts": {
         "analyze": "cem analyze --litelement",
-        "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+        "start": "concurrently -k -r \"npm run watch\" \"wds\"",
         "build": "rollup -c rollup.config.js",
         "watch": "rollup -w -c rollup.config.js",
         "link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-value",
         "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-value && npm i @record-evolution/widget-value",
         "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
         "start:build": "npm run build && es-dev-server --root-dir dist --app-index index.html --compatibility none --open",
-        "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-        "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
-        "release": "npm version patch --tag-version-prefix='' && git push && git push --tag"
+        "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag"
     },
     "dependencies": {
-        "@material/web": "^2.2.0",
-        "lit": "^3.2.0"
+        "lit": "^3.3.0"
     },
     "devDependencies": {
-        "@custom-elements-manifest/analyzer": "^0.10.3",
+        "@custom-elements-manifest/analyzer": "^0.10.4",
         "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-commonjs": "^28.0.0",
-        "@rollup/plugin-node-resolve": "^15.3.0",
-        "@rollup/plugin-replace": "^6.0.1",
-        "@rollup/plugin-typescript": "^12.1.0",
-        "@typescript-eslint/eslint-plugin": "^8.8.0",
-        "@typescript-eslint/parser": "^8.8.0",
+        "@rollup/plugin-commonjs": "^28.0.6",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-typescript": "^12.1.3",
+        "@typescript-eslint/eslint-plugin": "^8.34.1",
+        "@typescript-eslint/parser": "^8.34.1",
         "@web/dev-server": "^0.4.6",
-        "concurrently": "^9.0.1",
+        "concurrently": "^9.1.2",
         "deepmerge": "^4.3.1",
         "es-dev-server": "^2.1.0",
-        "eslint": "^9.11.1",
-        "eslint-config-prettier": "^9.1.0",
-        "husky": "^9.1.6",
-        "json-schema-to-typescript": "^15.0.2",
-        "lint-staged": "^15.2.10",
-        "prettier": "^3.3.3",
+        "eslint": "^9.29.0",
+        "eslint-config-prettier": "^10.1.5",
+        "husky": "^9.1.7",
+        "json-schema-to-typescript": "^15.0.4",
+        "lint-staged": "^16.1.2",
+        "prettier": "^3.5.3",
         "rimraf": "^6.0.1",
-        "rollup": "^4.24.0",
-        "tslib": "^2.7.0",
-        "typescript": "^5.6.2"
+        "rollup": "^4.43.0",
+        "tslib": "^2.8.1",
+        "typescript": "^5.8.3"
     },
     "repository": {
         "type": "git",

package/src/default-data.json

@@ -1,5 +1,6 @@
 {
-    "settings": {},
+    "title": "Title",
+    "subTitle": "Subtitle",
     "dataseries": [
         {
             "label": "Temperature",

package/src/widget-value.ts

@@ -5,22 +5,26 @@ import { InputData } from './definition-schema.js'
 
 type Dataseries = Exclude<InputData['dataseries'], undefined>[number] & { needleValue?: number }
 type Data = Exclude<Dataseries['data'], undefined>[number]
-
+type Theme = {
+    theme_name: string
+    theme_object: any
+}
 export class WidgetValue extends LitElement {
     @property({ type: Object })
     inputData?: InputData
 
+    @property({ type: Object })
+    theme?: Theme
+
     @state()
     private dataSets: Map<string, Dataseries> = new Map()
 
     @state()
     private textActive: boolean = true
 
-    @state()
-    private numberText?: HTMLDivElement[]
-
-    @state()
-    private labelText?: HTMLDivElement[]
+    @state() private themeBgColor?: string
+    @state() private themeTitleColor?: string
+    @state() private themeSubtitleColor?: string
 
     version: string = 'versionplaceholder'
 
@@ -56,6 +60,15 @@ export class WidgetValue extends LitElement {
             this.applyInputData()
         }
 
+        if (changedProperties.has('theme')) {
+            const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
+            const cssBgColor = getComputedStyle(this).getPropertyValue('--re-background-color').trim()
+            this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
+            this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
+            this.themeSubtitleColor =
+                cssTextColor || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor
+        }
+
         super.update(changedProperties)
     }
 
@@ -127,7 +140,8 @@ export class WidgetValue extends LitElement {
             const numberText = n.querySelector('.current-value') as HTMLDivElement
             numberText.setAttribute(
                 'style',
-                `font-size: ${32 * modifier}px; ${ds?.styling?.valueColor ? 'color: ' + ds?.styling?.valueColor : ''}`
+                `font-size: ${32 * modifier}px; 
+                color: ${ds?.styling?.valueColor || this.themeTitleColor};`
             )
         })
 
@@ -137,12 +151,14 @@ export class WidgetValue extends LitElement {
             const labelText = n.querySelector('.label') as HTMLDivElement
             labelText.setAttribute(
                 'style',
-                `font-size: ${26 * modifier}px; ${ds?.styling?.labelColor ? 'color: ' + ds?.styling?.labelColor : ''}`
+                `font-size: ${26 * modifier}px; 
+                color: ${ds?.styling?.labelColor || this.themeSubtitleColor};`
             )
             const unitText = n.querySelector('.unit') as HTMLDivElement
             unitText.setAttribute(
                 'style',
-                `font-size: ${26 * modifier}px; ${ds?.styling?.labelColor ? 'color: ' + ds?.styling?.labelColor : ''}`
+                `font-size: ${26 * modifier}px; 
+                color: ${ds?.styling?.labelColor || this.themeSubtitleColor};`
             )
         })
 
@@ -231,7 +247,6 @@ export class WidgetValue extends LitElement {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            color: var(--re-text-color, #000) !important;
         }
         p {
             margin: 10px 0 0 0;
@@ -241,7 +256,6 @@ export class WidgetValue extends LitElement {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            color: var(--re-text-color, #000) !important;
         }
 
         .value-container {
@@ -269,14 +283,12 @@ export class WidgetValue extends LitElement {
             font-size: 32px;
             font-weight: 600;
             white-space: nowrap;
-            color: var(--re-text-color, #000);
         }
 
         .label,
         .unit {
             font-weight: 300;
             font-size: 26px;
-            color: var(--re-text-color, #000);
             white-space: nowrap;
         }
 
@@ -295,7 +307,6 @@ export class WidgetValue extends LitElement {
 
         .no-data {
             font-size: 20px;
-            color: var(--re-text-color, #000);
             display: flex;
             height: 100%;
             width: 100%;
@@ -307,10 +318,19 @@ export class WidgetValue extends LitElement {
 
     render() {
         return html`
-            <div class="wrapper">
+            <div
+                class="wrapper"
+                style="background-color: ${this.themeBgColor}; color: ${this.themeTitleColor}"
+            >
                 <header>
                     <h3 class="paging" ?active=${this.inputData?.title}>${this.inputData?.title}</h3>
-                    <p class="paging" ?active=${this.inputData?.subTitle}>${this.inputData?.subTitle}</p>
+                    <p
+                        class="paging"
+                        ?active=${this.inputData?.subTitle}
+                        style="color: ${this.themeSubtitleColor}"
+                    >
+                        ${this.inputData?.subTitle}
+                    </p>
                 </header>
                 <div class="sizing-container">
                     ${repeat(
@@ -320,7 +340,11 @@ export class WidgetValue extends LitElement {
                             return html`
                                 <div class="single-value" label="${label}">
                                     <div class="label paging" ?active=${this.textActive}>${label}</div>
-                                    <span class="current-value paging" ?active=${this.textActive}>
+                                    <span
+                                        class="current-value paging"
+                                        ?active=${this.textActive}
+                                        style="color: ${this.themeTitleColor}"
+                                    >
                                         ${isNaN(ds.needleValue ?? 0) || ds.needleValue === undefined
                                             ? ''
                                             : ds.needleValue.toFixed(Math.max(0, ds.precision ?? 0))}
@@ -340,7 +364,11 @@ export class WidgetValue extends LitElement {
                             return html`
                                 <div class="single-value" label="${label}">
                                     <div class="label paging" ?active=${this.textActive}>${label}</div>
-                                    <span class="current-value paging" ?active=${this.textActive}>
+                                    <span
+                                        class="current-value paging"
+                                        ?active=${this.textActive}
+                                        style="color: ${this.themeTitleColor}"
+                                    >
                                         ${isNaN(ds.needleValue ?? 0) || ds.needleValue === undefined
                                             ? ''
                                             : ds.needleValue.toFixed(Math.max(0, ds.precision ?? 0))}