Move the demo example code into the demo component

be629649 · Reiter, Christoph · 407858a3 · be629649 · be629649 · be629649
Commit be629649 authored 5 years ago by Reiter, Christoph
--- 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>
--- 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);
--- 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);