Fix demo page

demo/.cert/server.cert

+-----BEGIN CERTIFICATE-----
+MIIB+zCCAWSgAwIBAgIJK4ZWtXTSz2GzMA0GCSqGSIb3DQEBCwUAMBwxGjAYBgNV
+BAMTEWRicC1kZXYubG9jYWxob3N0MB4XDTIwMTAyODE0MzAxNVoXDTQ4MDMxNDE0
+MzAxNVowHDEaMBgGA1UEAxMRZGJwLWRldi5sb2NhbGhvc3QwgZ8wDQYJKoZIhvcN
+AQEBBQADgY0AMIGJAoGBAL7Eb+sioAPQxMfHAVY7pzkeMPMsf3oKA9BepNjIXv2z
+FkWMwpH/+UoKyYwYG0lE+aTS26nUgVVXQMtWReUEBKtxFVzQpcbqNy22vS88Jigs
+zIuricui2o9nK46hlVMXI5yDz2lIElFTifxYqrjrpVki+khILldYmlRyoTowrraX
+AgMBAAGjRTBDMAwGA1UdEwQFMAMBAf8wCwYDVR0PBAQDAgL0MCYGA1UdEQQfMB2G
+G2h0dHA6Ly9leGFtcGxlLm9yZy93ZWJpZCNtZTANBgkqhkiG9w0BAQsFAAOBgQCB
+YmWmKGradZOEndfQi/GELG3yqWdxy8wXPHm86V1unvMEkaYaj3svRyYjwob5YaJ5
+GBboxWfYTo1YlzqK37RgythSCylmeEjpMr/dx8o+XdtTnSASNPoGvh5XGReWZKbw
+Z82efBk4FFmIgDFtcZJ/QD7XfAATH5O7o+NS+VPmtg==
+-----END CERTIFICATE-----

demo/.cert/server.key

+-----BEGIN RSA PRIVATE KEY-----
+MIICXQIBAAKBgQC+xG/rIqAD0MTHxwFWO6c5HjDzLH96CgPQXqTYyF79sxZFjMKR
+//lKCsmMGBtJRPmk0tup1IFVV0DLVkXlBASrcRVc0KXG6jcttr0vPCYoLMyLq4nL
+otqPZyuOoZVTFyOcg89pSBJRU4n8WKq466VZIvpISC5XWJpUcqE6MK62lwIDAQAB
+AoGBAJ1BQSELwexjRFOK8MctFYQ4JxHONKddahdybWFmiyeHYWyjxCCmadFnYw1h
+Md0MRt5gE0PEMXkwG/GChMtsrItaj9XEK41vlxo0V80kj/QhAUnX00T1RpajX4mI
+pm99ioR8KHyL3akPm5pvUrb+Wl3SvoLvxwfQn2sz5OInrrTBAkEA4p4n3USNqXHa
+NMQmbiGjDPp1qGyOpZkJsIjuIUnyZTSQ8Uxj8vDhkrWmqBUwjLchEXZabkugMsWp
+Y8i6Yer4bQJBANeAV2QdePaZYY4+7oNZvIFCW/L6h11DSRZm+QSY5q9O+8U/nXqc
+uz4/m5SLfqk50+0j1zCJU+dIzbDxyzmgUJMCQQDIzgvU7WH5u4D3MLg87mFkpqqL
+S2Y7JpiHbU5VAQlg1Gt65Y3LP9ciAQRj/CLBDaSnrJAFG84gLzYhzUQab/MhAkBZ
+4/4QE78mVfp8hEGnZqIb5NtH8jrOq0dsYc2TnlfzXmXk9FEzGPd90riJ8NoHqsh8
+zYtwgogOHK84FNPpmLajAkAKbxZk94jR7Rehyzr8n/ptsILJJeyiDoixXrTMerIS
+H/Dvgoby1xgpIwYL99HzxtS9HjL+kSZq4cTY7uGVXbsk
+-----END RSA PRIVATE KEY-----

demo/README.md

@@ -19,3 +19,16 @@ You can then open <http://127.0.0.1:8001/>.
 1) Add demo activity path to `input` list of `rollup.config.js`
 2) Create `assets/*.metadata.json` file like `assets/file-handling.metadata.json`
 3) Reference in `assets/*.metadata.json` file in the `activities` part of `assets/dbp-toolkit-demo.topic.metadata.json.ejs`
+
+## Importing demo activities
+- imported demo activity has to be a `export class`
+- Add the line`import readme from 'path-to-activity/README.md';`
+    - example: `import readme from 'dbp-person-select/README.md';`
+- Add the line `import {ExportclassName} from 'path-to-activity/src/activity-name';`
+    - example: `import {PersonSelectDemo} from 'dbp-person-select/src/dbp-person-select-demo';`
+- Add the class to scopedElements
+    - example ` static get scopedElements() {
+                       return {
+                         'dbp-person-select-demo': PersonSelectDemo,
+                       };
+                   }'`
\ No newline at end of file

demo/assets/common.metadata.json

 {
-  "element": "dbp-common-demo",
-  "module_src": "dbp-common-demo.js",
+  "element": "dbp-common-demo-activity",
+  "module_src": "dbp-common-demo-activity.js",
   "routing_name": "common",
   "name": {
     "de": "Common",

demo/assets/data-table-view.metadata.json

+{
+  "element": "dbp-data-table-view-demo-activity",
+  "module_src": "dbp-data-table-view-demo-activity.js",
+  "routing_name": "data-table-view",
+  "name": {
+    "de": "Data Table View",
+    "en": "Data table view"
+  },
+  "short_name": {
+    "de": "Data Table View",
+    "en": "Data table view"
+  },
+  "description": {
+    "de": "DataTable: mit Daten, Paginierung, Such- und Exportfunktion",
+    "en": "DataTable: with data, paging and searching AND exportable"
+  }
+}

demo/assets/dbp-toolkit-demo.topic.metadata.json.ejs

@@ -16,7 +16,14 @@
     {"path": "person-select.metadata.json"},
     {"path": "knowledge-base-web-page-element-view.metadata.json"},
     {"path": "common.metadata.json"},
-    {"path": "qr-code-scanner.metadata.json"}
+    {"path": "qr-code-scanner.metadata.json"},
+    {"path": "notification.metadata.json"},
+    {"path": "data-table-view.metadata.json"},
+    {"path": "language-select.metadata.json"},
+    {"path": "location-select.metadata.json"},
+    {"path": "matomo.metadata.json"},
+    {"path": "person-profile.metadata.json"},
+    {"path": "file-handling.metadata.json"}
   ],
   "attributes": []
 }
\ No newline at end of file

demo/assets/file-handling.metadata.json

+{
+  "element": "dbp-file-handling-demo-activity",
+  "module_src": "dbp-file-handling-demo-activity.js",
+  "routing_name": "file-handling",
+  "name": {
+    "de": "File Handling",
+    "en": "file handling"
+  },
+  "short_name": {
+    "de": "File Handling",
+    "en": "file handling"
+  },
+  "description": {
+    "de": "Web Componente für file sink und file source. Für mehrere verschiedenen Quellen.",
+    "en": "Web components for file sink and file source. For several different sources."
+  }
+}

demo/assets/knowledge-base-web-page-element-view.metadata.json

 {
-  "element": "dbp-knowledge-base-web-page-element-view-demo",
-  "module_src": "dbp-knowledge-base-web-page-element-view-demo.js",
+  "element": "dbp-knowledge-base-web-page-element-view-demo-activity",
+  "module_src": "dbp-knowledge-base-web-page-element-view-demo-activity.js",
   "routing_name": "knowledge-base-web-page-element-view",
   "name": {
     "de": "dbp-knowledge-base-web-page-element-view",

demo/assets/language-select.metadata.json

+{
+  "element": "dbp-language-select-demo-activity",
+  "module_src": "dbp-language-select-demo-activity.js",
+  "routing_name": "language-select",
+  "name": {
+    "de": "Sprachauswahl",
+    "en": "Language select"
+  },
+  "short_name": {
+    "de": "Sprachauswahl",
+    "en": "Language select"
+  },
+  "description": {
+    "de": "Sprachauswahl Web Component",
+    "en": "Language select web component"
+  }
+}

demo/assets/location-select.metadata.json

+{
+  "element": "dbp-location-select-demo-activity",
+  "module_src": "dbp-location-select-demo-activity.js",
+  "routing_name": "location-select",
+  "name": {
+    "de": "Ortauswahl",
+    "en": "Location select"
+  },
+  "short_name": {
+    "de": "Ortauswahl",
+    "en": "Location select"
+  },
+  "description": {
+    "de": "Ort Web Component",
+    "en": "location select web component"
+  }
+}

demo/assets/matomo.metadata.json

+{
+  "element": "dbp-matomo-demo-activity",
+  "module_src": "dbp-matomo-demo-activity.js",
+  "routing_name": "matomo",
+  "name": {
+    "de": "Matomo",
+    "en": "Matomo"
+  },
+  "short_name": {
+    "de": "Matomo",
+    "en": "Matomo"
+  },
+  "description": {
+    "de": "Matomo Web Component",
+    "en": "Matomo web component"
+  }
+}

demo/assets/notification.metadata.json

+{
+  "element": "dbp-notification-demo-activity",
+  "module_src": "dbp-notification-demo-activity.js",
+  "routing_name": "notification",
+  "name": {
+    "de": "Benachrichtigungen",
+    "en": "Notification"
+  },
+  "short_name": {
+    "de": "Benachrichtigungen",
+    "en": "Notification"
+  },
+  "description": {
+    "de": "Zeigt eine Benachrichtigung an",
+    "en": "Shows a message"
+  }
+}

demo/assets/person-profile.metadata.json

+{
+  "element": "dbp-person-profile-demo-activity",
+  "module_src": "dbp-person-profile-demo-activity.js",
+  "routing_name": "person-profile",
+  "name": {
+    "de": "Personenprofil",
+    "en": "Person profile"
+  },
+  "short_name": {
+    "de": "Personenprofil",
+    "en": "Person profile"
+  },
+  "description": {
+    "de": "Gemeinsame Web Components",
+    "en": "Person profile web components"
+  }
+}

demo/rollup.config.js

@@ -261,6 +261,7 @@ Dependencies:
                 {src: 'assets/*.metadata.json', dest: 'dist'},
                 {src: 'node_modules/dbp-common/assets/icons/*.svg', dest: 'dist/local/dbp-common/icons'},
                 {src: 'node_modules/tabulator-tables/dist/css', dest: 'dist/local/dbp-file-source/tabulator-tables'},
+                {src: 'node_modules/qr-scanner/qr-scanner-worker.*', dest: 'dist/local/qr-code-scanner'},
             ],
         }),
         useBabel && babel({

demo/src/dbp-demo-template.js

+import {css, html, LitElement} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+//import {ClassName} from 'dbp-package-name/src/dbp-demo-activity-name'; TODO
+import * as commonUtils from 'dbp-common/utils';
+import * as commonStyles from 'dbp-common/styles';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+// import readme from 'dbp-class-name/README.md'; TODO
+import highlightCSSPath from 'highlight.js/styles/default.css';
+import * as demoStyles from "./styles";
+
+class DbpActivityNameDemoActivity extends ScopedElementsMixin(LitElement) { //TODO
+    static get scopedElements() {
+        return {
+            // TODO
+            //'dbp-class-name-demo': ClassName,
+        };
+    }
+
+    static get properties() {
+        return {
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.updateComplete.then(()=>{
+        });
+    }
+
+    static get styles() {
+        // language=css
+        return [
+            commonStyles.getThemeCSS(),
+            commonStyles.getGeneralCSS(),
+            demoStyles.getDemoCSS(),
+            css`
+            h1.title {margin-bottom: 1em;}
+            div.container {margin-bottom: 1.5em;}
+
+            #demo{
+                display: block;
+                padding-top: 50px;
+            }
+            
+            `
+        ];
+    }
+
+    render() {
+        return html`
+             <!--
+                TODO
+                ${unsafeHTML(readme)}
+                <dbp-class-name-demo id="demo" lang="en"></dbp-class-name-demo>
+            -->
+        `;
+    }
+}
+
+//commonUtils.defineCustomElement('dbp-class-name-demo-activity', DbpClassNameDemoActivity); TODO

demo/src/dbp-knowledge-base-web-page-element-view-demo-activity.js

+import {css, html, LitElement} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {KnowledgeBaseWebPageElementViewDemo} from 'dbp-knowledge-base-web-page-element-view/src/dbp-knowledge-base-web-page-element-view-demo';
+import * as commonUtils from 'dbp-common/utils';
+import * as commonStyles from 'dbp-common/styles';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+import readme from 'dbp-knowledge-base-web-page-element-view/README.md';
+import highlightCSSPath from 'highlight.js/styles/default.css';
+import * as demoStyles from "./styles";
+
+class KnowledgeBaseWebPageElementViewDemoActivity extends ScopedElementsMixin(LitElement) {
+    static get scopedElements() {
+        return {
+            'dbp-knowledge-base-web-page-element-view-demo': KnowledgeBaseWebPageElementViewDemo,
+        };
+    }
+
+    static get properties() {
+        return {
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.updateComplete.then(()=>{
+        });
+    }
+
+    static get styles() {
+        // language=css
+        return [
+            commonStyles.getThemeCSS(),
+            commonStyles.getGeneralCSS(),
+            demoStyles.getDemoCSS(),
+            css`
+            h1.title {margin-bottom: 1em;}
+            div.container {margin-bottom: 1.5em;}
+
+            #demo{
+                display: block;
+                padding-top: 50px;
+            }
+            
+            `
+        ];
+    }
+
+    render() {
+        return html`
+                ${unsafeHTML(readme)}
+                <dbp-knowledge-base-web-page-element-view-demo id="demo" lang="en"></dbp-knowledge-base-web-page-element-view-demo>
+        `;
+    }
+}
+
+commonUtils.defineCustomElement('dbp-knowledge-base-web-page-element-view-demo-activity', KnowledgeBaseWebPageElementViewDemoActivity);

demo/src/dbp-matomo-demo-activity.js

+import {css, html, LitElement} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {MatomoDemo} from 'dbp-matomo/src/dbp-matomo-demo';
+import * as commonUtils from 'dbp-common/utils';
+import * as commonStyles from 'dbp-common/styles';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+import readme from 'dbp-matomo/README.md';
+import highlightCSSPath from 'highlight.js/styles/default.css';
+import * as demoStyles from "./styles";
+
+class DbpMatomoDemoActivity extends ScopedElementsMixin(LitElement) {
+    static get scopedElements() {
+        return {
+            'dbp-matomo-demo': MatomoDemo,
+        };
+    }
+
+    static get properties() {
+        return {
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.updateComplete.then(()=>{
+        });
+    }
+
+    static get styles() {
+        // language=css
+        return [
+            commonStyles.getThemeCSS(),
+            commonStyles.getGeneralCSS(),
+            demoStyles.getDemoCSS(),
+            css`
+            h1.title {margin-bottom: 1em;}
+            div.container {margin-bottom: 1.5em;}
+
+            #demo{
+                display: block;
+                padding-top: 50px;
+            }
+            
+            `
+        ];
+    }
+
+    render() {
+        return html`
+               ${unsafeHTML(readme)}
+                <dbp-matomo-demo id="demo" lang="en"></dbp-matomo-demo>
+        `;
+    }
+}
+
+commonUtils.defineCustomElement('dbp-matomo-demo-activity', DbpMatomoDemoActivity);

demo/src/dbp-notification-demo-activity.js

+import {css, html, LitElement} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {NotificationDemo} from 'dbp-notification/src/dbp-notification-demo';
+import * as commonUtils from 'dbp-common/utils';
+import * as commonStyles from 'dbp-common/styles';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+import readme from 'dbp-notification/README.md';
+import highlightCSSPath from 'highlight.js/styles/default.css';
+import * as demoStyles from "./styles";
+
+class DbpNotificationDemoActivity extends ScopedElementsMixin(LitElement) {
+    static get scopedElements() {
+        return {
+            'dbp-notification-demo': NotificationDemo,
+        };
+    }
+
+    static get properties() {
+        return {
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.updateComplete.then(()=>{
+        });
+    }
+
+    static get styles() {
+        // language=css
+        return [
+            commonStyles.getThemeCSS(),
+            commonStyles.getGeneralCSS(),
+            demoStyles.getDemoCSS(),
+            css`
+            h1.title {margin-bottom: 1em;}
+            div.container {margin-bottom: 1.5em;}
+
+            #demo{
+                display: block;
+                padding-top: 50px;
+            }
+            
+            `
+        ];
+    }
+
+    render() {
+        return html`
+                ${unsafeHTML(readme)}
+                <dbp-notification-demo id="demo" lang="en"></dbp-notification-demo>
+        `;
+    }
+}
+
+commonUtils.defineCustomElement('dbp-notification-demo-activity', DbpNotificationDemoActivity);

demo/src/dbp-person-profile-demo-activity.js

+import {css, html, LitElement} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {PersonProfileDemo} from 'dbp-person-profile/src/dbp-person-profile-demo';
+import * as commonUtils from 'dbp-common/utils';
+import * as commonStyles from 'dbp-common/styles';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+import readme from 'dbp-person-profile/README.md';
+import highlightCSSPath from 'highlight.js/styles/default.css';
+import * as demoStyles from "./styles";
+
+class DbpPersonProfileDemoActivity extends ScopedElementsMixin(LitElement) {
+    static get scopedElements() {
+        return {
+            'dbp-person-profile-demo': PersonProfileDemo,
+        };
+    }
+
+    static get properties() {
+        return {
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.updateComplete.then(()=>{
+        });
+    }
+
+    static get styles() {
+        // language=css
+        return [
+            commonStyles.getThemeCSS(),
+            commonStyles.getGeneralCSS(),
+            demoStyles.getDemoCSS(),
+            css`
+            h1.title {margin-bottom: 1em;}
+            div.container {margin-bottom: 1.5em;}
+
+            #demo{
+                display: block;
+                padding-top: 50px;
+            }
+            
+            `
+        ];
+    }
+
+    render() {
+        return html`
+                ${unsafeHTML(readme)}
+                <dbp-person-profile-demo id="demo" lang="en"></dbp-person-profile-demo>
+
+        `;
+    }
+}
+
+commonUtils.defineCustomElement('dbp-person-profile-demo-activity', DbpPersonProfileDemoActivity);

demo/src/dbp-person-select-demo-activity.js

 import {css, html, LitElement} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
-import * as PersonSelectDemo from 'dbp-person-select/src/dbp-person-select-demo';
+import {PersonSelectDemo} from 'dbp-person-select/src/dbp-person-select-demo';
 import * as commonUtils from 'dbp-common/utils';
 import * as commonStyles from 'dbp-common/styles';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import readme from 'dbp-person-select/README.md';
 import highlightCSSPath from 'highlight.js/styles/default.css';
+import * as demoStyles from "./styles";
 
 class DbpPersonSelectDemoActivity extends ScopedElementsMixin(LitElement) {
     static get scopedElements() {
@@ -31,19 +32,24 @@ class DbpPersonSelectDemoActivity extends ScopedElementsMixin(LitElement) {
         return [
             commonStyles.getThemeCSS(),
             commonStyles.getGeneralCSS(),
+            demoStyles.getDemoCSS(),
             css`
             h1.title {margin-bottom: 1em;}
             div.container {margin-bottom: 1.5em;}
+
+            #demo{
+                display: block;
+                padding-top: 50px;
+            }
+            
             `
         ];
     }
 
     render() {
         return html`
-            xxx
-            <dbp-person-select-demo lang="en"></dbp-person-select-demo>
-            yyy
             ${unsafeHTML(readme)}
+            <dbp-person-select-demo id="demo" lang="en"></dbp-person-select-demo>
         `;
     }
 }