@record-evolution/widget-mapbox 1.5.3 → 1.5.5

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-mapbox",
     "license": "MIT",
     "author": "widget-mapbox",
-    "version": "1.5.3",
+    "version": "1.5.5",
     "type": "module",
     "main": "dist/widget-mapbox.js",
     "types": "dist/src/widget-mapbox.d.ts",
@@ -13,51 +13,49 @@
     ],
     "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-mapbox",
         "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-mapbox && npm i @record-evolution/widget-mapbox",
         "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
-        "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",
         "cors": "gcloud storage buckets update gs://reswarm-images --cors-file=src/cors-config.json"
     },
     "dependencies": {
-        "@types/geojson": "^7946.0.14",
-        "@types/mapbox-gl": "^3.4.0",
-        "lit": "^3.2.0",
-        "mapbox-gl": "^3.7.0",
+        "@types/geojson": "^7946.0.16",
+        "@types/mapbox-gl": "^3.4.1",
+        "lit": "^3.3.0",
+        "mapbox-gl": "^3.13.0",
         "tinycolor2": "^1.6.0"
     },
     "devDependencies": {
-        "@babel/plugin-syntax-import-assertions": "^7.25.7",
-        "@custom-elements-manifest/analyzer": "^0.10.3",
+        "@babel/plugin-syntax-import-assertions": "^7.27.1",
+        "@custom-elements-manifest/analyzer": "^0.10.4",
         "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-commonjs": "^28.0.0",
+        "@rollup/plugin-commonjs": "^28.0.6",
         "@rollup/plugin-json": "^6.1.0",
-        "@rollup/plugin-node-resolve": "^15.3.0",
-        "@rollup/plugin-replace": "^6.0.1",
-        "@rollup/plugin-typescript": "^12.1.0",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-typescript": "^12.1.3",
         "@types/glob": "^8.1.0",
         "@types/tinycolor2": "^1.4.6",
-        "@typescript-eslint/eslint-plugin": "^8.8.0",
-        "@typescript-eslint/parser": "^8.8.0",
+        "@typescript-eslint/eslint-plugin": "^8.34.1",
+        "@typescript-eslint/parser": "^8.34.1",
         "@web/dev-server": "^0.4.6",
-        "concurrently": "^9.0.1",
-        "eslint": "^9.12.0",
-        "eslint-config-prettier": "^9.1.0",
-        "glob": "^11.0.0",
-        "husky": "^9.1.6",
-        "json-schema-to-typescript": "^15.0.2",
-        "lint-staged": "^15.2.10",
-        "minimatch": "3.1.2",
-        "prettier": "^3.3.3",
-        "rollup": "^4.24.0",
+        "concurrently": "^9.1.2",
+        "eslint": "^9.29.0",
+        "eslint-config-prettier": "^10.1.5",
+        "glob": "^11.0.3",
+        "husky": "^9.1.7",
+        "json-schema-to-typescript": "^15.0.4",
+        "lint-staged": "^16.1.2",
+        "minimatch": "10.0.3",
+        "prettier": "^3.5.3",
+        "rollup": "^4.43.0",
         "rollup-plugin-copy": "^3.5.0",
-        "tslib": "^2.7.0",
-        "typescript": "5.3.2"
+        "tslib": "^2.8.1",
+        "typescript": "5.8.3"
     },
     "repository": {
         "type": "git",

package/src/default-data.json

@@ -1,4 +1,6 @@
 {
+    "title": "Test",
+    "subTitle": "Subtitle",
     "style": "light-v11",
     "showLegend": false,
     "follow": false,

package/src/widget-mapbox.ts

@@ -10,10 +10,17 @@ import { LayerBaseColor, InputData } from './definition-schema.js'
 
 type Dataseries = Exclude<InputData['dataseries'], undefined>[number]
 type Point = Exclude<Dataseries['data'], undefined>[number]
-
+type Theme = {
+    theme_name: string
+    theme_object: any
+}
 export class WidgetMapbox extends LitElement {
     @property({ type: Object })
     inputData?: InputData
+
+    @property({ type: Object })
+    theme?: Theme
+
     @state()
     private map: any | undefined = undefined
 
@@ -26,6 +33,10 @@ export class WidgetMapbox extends LitElement {
     @state()
     colors: any = new Map()
 
+    @state() private themeBgColor?: string
+    @state() private themeTitleColor?: string
+    @state() private themeSubtitleColor?: string
+
     public version: string = 'versionplaceholder'
     private mapLoaded: boolean = false
     private resizeObserver: ResizeObserver
@@ -52,16 +63,31 @@ export class WidgetMapbox extends LitElement {
         if (changedProperties.has('inputData')) {
             this.transformInputData()
         }
+
+        if (changedProperties.has('theme')) {
+            this.registerTheme(this.theme)
+        }
+
         super.update(changedProperties)
     }
 
     firstUpdated() {
+        this.registerTheme(this.theme)
         this.transformInputData()
         this.createMap()
         this.resizeObserver.observe(this.map._container)
         this.fitBounds()
     }
 
+    registerTheme(theme?: 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
+    }
+
     updateMap() {
         if (this.customDebounce) clearTimeout(this.customDebounce)
 
@@ -539,9 +565,7 @@ export class WidgetMapbox extends LitElement {
     static styles = css`
         :host {
             display: block;
-            color: var(--re-bar-text-color, #000);
             font-family: sans-serif;
-            padding: 16px;
             box-sizing: border-box;
             margin: auto;
         }
@@ -576,6 +600,8 @@ export class WidgetMapbox extends LitElement {
         .wrapper {
             display: flex;
             flex-direction: column;
+            box-sizing: border-box;
+            padding: 16px;
             height: 100%;
             width: 100%;
         }
@@ -606,7 +632,6 @@ export class WidgetMapbox extends LitElement {
 
         .no-data {
             font-size: 20px;
-            color: var(--re-text-color, #000);
             display: flex;
             height: 100%;
             width: 100%;
@@ -622,11 +647,20 @@ export class WidgetMapbox extends LitElement {
                 href="https://api.mapbox.com/mapbox-gl-js/v${mapboxgl.version}/mapbox-gl.css"
                 rel="stylesheet"
             />
-            <div class="wrapper">
+            <div
+                class="wrapper"
+                style="background-color: ${this.themeBgColor}; color: ${this.themeTitleColor}"
+            >
                 <header class="paging" ?active=${this.inputData?.title || this.inputData?.subTitle}>
                     <div class="title">
                         <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>
                     </div>
                     <div class="legend paging" ?active=${this?.inputData?.showLegend}>
                         ${repeat(