diff --git a/packages/language-select/assets/index.html b/packages/language-select/assets/index.html
index 3c2b6d66a671e008550e8d421100140968757ad7..b993bba4d8a930b169c0cae8149de3533fc316ca 100644
--- a/packages/language-select/assets/index.html
+++ b/packages/language-select/assets/index.html
@@ -11,15 +11,6 @@
</head>
<body>
- 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 2: <vpu-language-select-demo></vpu-language-select-demo>
+ <vpu-language-select-demo></vpu-language-select-demo>
</body>
</html>
diff --git a/packages/language-select/src/vpu-language-select-demo.js b/packages/language-select/src/vpu-language-select-demo.js
index d5d7ea769eafa63c90f05cb1a0c81a429475173d..b6368212ed5b1d5b778b51574560efd37663f89e 100644
--- a/packages/language-select/src/vpu-language-select-demo.js
+++ b/packages/language-select/src/vpu-language-select-demo.js
@@ -2,7 +2,7 @@ import {html, LitElement} from 'lit-element';
import './vpu-language-select.js';
import * as commonUtils from 'vpu-common/utils';
-class LanguageSelectDemo extends LitElement {
+class LanguageSelectDisplay extends LitElement {
constructor() {
super();
@@ -35,4 +35,28 @@ class LanguageSelectDemo extends LitElement {
}
}
+commonUtils.defineCustomElement('vpu-language-select-display', LanguageSelectDisplay);
+
+class LanguageSelectDemo extends LitElement {
+
+ constructor() {
+ super();
+ }
+
+ render() {
+ return html`
+ 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-display></vpu-language-select-display>
+ <br>
+ <br>
+ Current language 2: <vpu-language-select-display></vpu-language-select-display>
+ `;
+ }
+}
+
commonUtils.defineCustomElement('vpu-language-select-demo', LanguageSelectDemo);
diff --git a/packages/language-select/src/vpu-language-select.js b/packages/language-select/src/vpu-language-select.js
index d17959c9442711157a4f158c1d28c59901382b3b..16894aab7ffc9003a4902452234e9d59f66ebc5b 100644
--- a/packages/language-select/src/vpu-language-select.js
+++ b/packages/language-select/src/vpu-language-select.js
@@ -55,6 +55,7 @@ class LanguageSelect extends LitElement {
if (oldValue !== value) {
const event = new CustomEvent("vpu-language-changed", {
bubbles: true,
+ composed: true,
detail: {'lang': value}
});
this.dispatchEvent(event);