fix: update widget-textbox version and refactor theme registration logic

Author: Marko Petzold

demo/index.html

@@ -32,10 +32,10 @@
             const theme = { theme_name: 'vintage', theme_object: themeObject }
             render(
                 html`
-                    <widget-textbox-1.1.2 .theme="${theme}" .inputData=${data}>
+                    <widget-textbox-1.1.3 .theme="${theme}" .inputData=${data}>
                         web component is not registered. Make sure to use the tag with the correct version
                         string from the package.json
-                    </widget-textbox-1.1.2>
+                    </widget-textbox-1.1.3>
                 `,
                 document.getElementById('demo')
             )

src/widget-textbox.ts

@@ -1,4 +1,4 @@
-import { html, css, LitElement } from 'lit'
+import { html, css, LitElement, PropertyValues } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { TextboxConfiguration } from './definition-schema.js'
 
@@ -21,17 +21,25 @@ export class WidgetTextbox extends LitElement {
 
     update(changedProperties: Map<string, any>) {
         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
+            this.registerTheme(this.theme)
         }
 
         super.update(changedProperties)
     }
 
+    protected firstUpdated(_changedProperties: PropertyValues): void {
+        this.registerTheme(this.theme)
+    }
+
+    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
+    }
+
     static styles = css`
         :host {
             display: block;