Add translation overrides to theme-switcher-demo activity

packages/theme-switcher/src/demo.js

-import {createInstance} from './i18n';
+import {createInstance, setOverridesByGlobalCache} from './i18n';
 import {html, LitElement} from 'lit';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {ThemeSwitcher} from './theme-switcher';
@@ -12,6 +12,7 @@ export class ThemeSwitcherDemo extends ScopedElementsMixin(LitElement) {
         this.url = '';
         this.selectedFiles = [];
         this.selectedFilesCount = 0;
+        this.langDir = '';
     }
 
     static get scopedElements() {
@@ -23,11 +24,15 @@ export class ThemeSwitcherDemo extends ScopedElementsMixin(LitElement) {
     static get properties() {
         return {
             lang: {type: String},
+            langDir: {type: String, attribute: "lang-dir"},
         };
     }
 
     connectedCallback() {
         super.connectedCallback();
+        if (this.langDir) {
+          setOverridesByGlobalCache(this._i18n, this);
+        }
     }
 
     update(changedProperties) {

toolkit-showcase/assets/translation-overrides/de/translation.json

@@ -2,9 +2,14 @@
     "dbp-translation": {
       "toolkit-showcase": "Dieser Text wird mithilfe von i18n aus einer benutzerdefinierten Sprachdatei gelesen und ins Englische übersetzt wenn man die Sprache auf Englisch stellt.",
       "toolkit-showcase-link": "Es können sogar links mittels <a href=\"{{- link1}}\">interpolation</a> und escaping dargestellt werden.",
-      "color-mode": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden."
+      "color-mode": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden.",
+      "intro": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden."
     },
     "dbp-theme-switcher": {
-      "color-mode": "Theme ändern"
+      "color-mode": "Theme ändern",
+      "intro": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden."
+    },
+    "dbp-theme-switcher-demo": {
+      "intro": "Mit dem Theme-Switcher können Sie zwischen unterschiedlichen Farb-Themes umschalten, wie z.B. zwischen Light- und Dark Mode."
     }
 }

toolkit-showcase/assets/translation-overrides/en/translation.json

@@ -2,9 +2,14 @@
     "dbp-translation": {
       "toolkit-showcase": "This text will be translated to german using i18n with a user defined language file when the language is changed to german.",
       "toolkit-showcase-link": "Furthermore its possible to display links through <a href=\"{{- link1}}\">interpolation</a> and escaping.",
-      "color-mode": "This text is not supposed to be displayed. It is only here for testing."
+      "color-mode": "This text is not supposed to be displayed. It is only here for testing.",
+      "intro": "This text is not supposed to be displayed. It is only here for testing."
     },
     "dbp-theme-switcher": {
-      "color-mode": "Change theme"
+      "color-mode": "Change theme",
+      "intro": "This text is not supposed to be displayed. It is only here for testing."
+    },
+    "dbp-theme-switcher-demo": {
+      "intro": "With the theme-switcher you can switch between multiple themes. For example, between Light Mode and Dark Mode."
     }
 }

toolkit-showcase/src/dbp-theme-switcher-demo-activity.js

@@ -12,6 +12,7 @@ export class DbpThemeSwitcherDemoActivity extends ScopedElementsMixin(AdapterLit
     constructor() {
         super();
         this.lang = 'en';
+        this.langDir = '';
     }
 
     static get scopedElements() {
@@ -24,6 +25,7 @@ export class DbpThemeSwitcherDemoActivity extends ScopedElementsMixin(AdapterLit
         return {
             ...super.properties,
             lang: {type: String},
+            langDir: {type: String, attribute: "lang-dir"},
         };
     }
 
@@ -58,7 +60,7 @@ export class DbpThemeSwitcherDemoActivity extends ScopedElementsMixin(AdapterLit
     render() {
         return html`
             ${unsafeHTML(readme)}
-            <dbp-theme-switcher-demo id="demo" lang="${this.lang}"></dbp-theme-switcher-demo>
+            <dbp-theme-switcher-demo id="demo" lang="${this.lang}" lang-dir="${this.langDir}"></dbp-theme-switcher-demo>
         `;
     }
 }