diff --git a/packages/language-select/assets/index.html b/packages/language-select/assets/index.html
index 41d0d5e54aa7fcb16545bd7df93b05118db5b3b9..40d6e96c3ad87e44092cc0c95613afe417c96b54 100644
--- a/packages/language-select/assets/index.html
+++ b/packages/language-select/assets/index.html
@@ -11,11 +11,15 @@
</head>
<body>
- <vpu-language-select></vpu-language-select>
-
+ Select 1: <vpu-language-select></vpu-language-select>
+ <br>
+ <br>
+ Select 2: <vpu-language-select></vpu-language-select>
+ <br>
<br>
+ Current language 1: <vpu-language-select-demo></vpu-language-select-demo>
<br>
<br>
- Current language: <vpu-language-select-demo></vpu-language-select-demo>
+ Current language 2: <vpu-language-select-demo></vpu-language-select-demo>
</body>
</html>
diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js
index 02087b71856a4b13e53e62b4c76b962130470421..bb365287a206da472ff674c11e92df6c586d754c 100644
--- a/packages/language-select/src/language-select.js
+++ b/packages/language-select/src/language-select.js
@@ -13,6 +13,8 @@ class LanguageSelect extends LitElement {
i18n.t('de');
i18n.t('en');
+
+ this.onExternalChange = this.onExternalChange.bind(this);
}
static get properties() {
@@ -54,7 +56,21 @@ class LanguageSelect extends LitElement {
`;
}
- updated(changedProperties) {
+ onExternalChange(e) {
+ this.lang = e.detail.lang
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ window.addEventListener('vpu-language-changed', this.onExternalChange);
+ }
+
+ disconnectedCallback() {
+ document.removeEventListener('vpu-language-changed', this.onExternalChange);
+ super.disconnectedCallback();
+ }
+
+ update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === 'lang') {
const event = new CustomEvent("vpu-language-changed", {
@@ -64,11 +80,10 @@ class LanguageSelect extends LitElement {
window.dispatchEvent(event);
i18n.changeLanguage(this.lang);
- this.requestUpdate();
}
});
- super.updated(changedProperties);
+ super.update(changedProperties);
}
onSelectChange(e) {