Port to scoped elements

packages/notification/package.json

@@ -20,12 +20,12 @@
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^5.1.1",
     "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-url": "^2.2.2",
     "i18next-scanner": "^2.10.2",
     "vpu-common": "file:./vendor/common"
   },
   "dependencies": {
+    "@open-wc/scoped-elements": "^1.0.8",
     "lit-element": "^2.1.0"
   },
   "scripts": {

packages/notification/rollup.config.js

+import glob from 'glob';
 import path from 'path';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
@@ -5,7 +6,6 @@ import copy from 'rollup-plugin-copy';
 import {terser} from "rollup-plugin-terser";
 import json from 'rollup-plugin-json';
 import serve from 'rollup-plugin-serve';
-import multiEntry from 'rollup-plugin-multi-entry';
 import url from "rollup-plugin-url";
 import consts from 'rollup-plugin-consts';
 import del from 'rollup-plugin-delete';
@@ -14,7 +14,7 @@ const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : '
 console.log("build: " + build);
 
 export default {
-    input: (build != 'test') ? ['src/vpu-notification.js', 'src/vpu-notification-demo.js'] : 'test/**/*.js',
+    input: (build != 'test') ? ['src/vpu-notification.js', 'src/vpu-notification-demo.js'] : glob.sync('test/**/*.js'),
     output: {
         dir: 'dist',
         entryFileNames: '[name].js',
@@ -26,7 +26,6 @@ export default {
         del({
             targets: 'dist/*'
         }),
-        (build == 'test') ? multiEntry() : false,
         consts({
             environment: build,
         }),

packages/notification/src/index.js

+import {Notification} from './notification.js';
+
+export {Notification};
\ No newline at end of file

packages/notification/src/notification.js

+import {i18n} from './i18n';
+import {createUUID} from './utils'
+import {css, html} from 'lit-element';
+import VPULitElement from 'vpu-common/vpu-lit-element';
+import * as commonUtils from 'vpu-common/utils';
+import * as commonStyles from 'vpu-common/styles';
+
+/**
+ * Notification web component
+ */
+export class Notification extends VPULitElement {
+    constructor() {
+        super();
+        this.lang = 'de';
+    }
+
+    /**
+     * See: https://lit-element.polymer-project.org/guide/properties#initialize
+     */
+    static get properties() {
+        return {
+            lang: { type: String },
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        i18n.changeLanguage(this.lang);
+        const that = this;
+
+        const listener = window.addEventListener("vpu-notification-send", (e) => {
+            if (typeof e.detail === 'undefined') {
+                return;
+            }
+
+            that.notificationBlock = that._("#notification");
+            const notificationId = `notification-${createUUID()}`;
+
+            const type = typeof e.detail.type !== 'undefined' ? e.detail.type : "info";
+            const body = typeof e.detail.body !== 'undefined' ? e.detail.body : "";
+            const summary = typeof e.detail.summary !== 'undefined' ? e.detail.summary : "";
+            const timeout = typeof e.detail.timeout !== 'undefined' ? e.detail.timeout : 0;
+            const icon = typeof e.detail.icon !== 'undefined' ? e.detail.icon : '';
+            const iconHTML = icon !== '' ? `<vpu-icon name="${icon}"></vpu-icon>` : "";
+            const summaryHTML = summary !== "" ? `<h3>${summary}</h3>` : "";
+
+            that.notificationBlock.innerHTML = `
+                <div id="${notificationId}" class="notification is-${type}">
+                    <button id="${notificationId}-button" onclick="parentNode.parentNode.removeChild(parentNode)" class="delete"></button>
+                    ${summaryHTML}
+                    ${iconHTML} ${body}
+                </div>
+            ` + that.notificationBlock.innerHTML;
+
+            const messageId = `#${notificationId}`;
+
+            if (timeout > 0) {
+                setTimeout(() => {
+                    that.removeMessageId(messageId);
+                }, timeout * 1000);
+            }
+
+            // mark the event as handled
+            e.preventDefault();
+        });
+
+        this.updateComplete.then(()=>{
+        });
+    }
+
+    removeMessageId(messageElementId) {
+        const element = this._(messageElementId);
+
+        if (element) {
+            this.notificationBlock.removeChild(element);
+        }
+    }
+
+    static get styles() {
+        // language=css
+        return css`
+            ${commonStyles.getThemeCSS()}
+            ${commonStyles.getGeneralCSS()}
+            ${commonStyles.getNotificationCSS()}
+
+            .notification:not(:last-child) {
+                margin-bottom: 1.5rem;
+            }
+
+            .notification h3 {
+                font-weight: bold;
+                margin-bottom: 3px;
+            }
+
+            .delete, .modal-close {
+                -moz-appearance: none;
+                -webkit-appearance: none;
+                background-color: rgba(10,10,10,.2);
+                border: none;
+                border-radius: 290486px;
+                cursor: pointer;
+                pointer-events: auto;
+                display: inline-block;
+                flex-grow: 0;
+                flex-shrink: 0;
+                font-size: 0;
+                height: 20px;
+                max-height: 20px;
+                max-width: 20px;
+                min-height: 20px;
+                min-width: 20px;
+                outline: 0;
+                position: relative;
+                vertical-align: top;
+                width: 20px;
+            }
+
+            .delete::before, .modal-close::before, .delete::after, .modal-close::after {
+                background-color: white;
+                content: "";
+                display: block;
+                left: 50%;
+                position: absolute;
+                top: 50%;
+                -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+                        transform: translateX(-50%) translateY(-50%) rotate(45deg);
+                -webkit-transform-origin: center center;
+                        transform-origin: center center;
+            }
+
+            .delete::before, .modal-close::before {
+                height: 2px;
+                width: 50%;
+            }
+
+            .delete::after, .modal-close::after {
+                height: 50%;
+                width: 2px;
+            }
+
+            .delete:hover, .modal-close:hover, .delete:focus, .modal-close:focus {
+                background-color: rgba(10, 10, 10, 0.3);
+            }
+
+            .delete:active, .modal-close:active {
+                background-color: rgba(10, 10, 10, 0.4);
+            }
+
+            #notification {
+                position: fixed; top: 0; max-width: 500px; margin: 0.75em auto; left: 0; right: 0; z-index: 1000; padding: 0;
+            }
+
+            .notification h3 {
+                margin: 0 0 3px 0;
+                font: inherit;
+                font-weight: bold; 
+            }
+        `;
+    }
+
+    render() {
+        commonUtils.initAssetBaseURL('vpu-notification-src');
+
+        return html`
+            <div class="columns">
+                <div class="column" id="notification">
+                </div>
+            </div>
+        `;
+    }
+}
\ No newline at end of file

packages/notification/src/vpu-notification-demo.js

 import {i18n} from './i18n';
 import {send as notify} from 'vpu-common/notification';
 import {css, html, LitElement} from 'lit-element';
-import './vpu-notification';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {Notification} from './notification.js';
 import * as commonUtils from 'vpu-common/utils';
 import * as commonStyles from "vpu-common/styles";
 
-class NotificationDemo extends LitElement {
+class NotificationDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
         super();
         this.lang = 'de';
     }
 
+    static get scopedElements() {
+        return {
+          'vpu-notification': Notification,
+        };
+      }
+
     static get properties() {
         return {
             lang: { type: String },

packages/notification/src/vpu-notification.js

-import {i18n} from './i18n';
-import {createUUID} from './utils'
-import {css, html} from 'lit-element';
-import VPULitElement from 'vpu-common/vpu-lit-element';
 import * as commonUtils from 'vpu-common/utils';
-import * as commonStyles from 'vpu-common/styles';
-import { send } from 'vpu-common/notification';
+import {Notification} from './notification.js';
 
-export { send };
-
-/**
- * Notification web component
- */
-class VPUNotification extends VPULitElement {
-    constructor() {
-        super();
-        this.lang = 'de';
-    }
-
-    /**
-     * See: https://lit-element.polymer-project.org/guide/properties#initialize
-     */
-    static get properties() {
-        return {
-            lang: { type: String },
-        };
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        i18n.changeLanguage(this.lang);
-        const that = this;
-
-        const listener = window.addEventListener("vpu-notification-send", (e) => {
-            if (typeof e.detail === 'undefined') {
-                return;
-            }
-
-            that.notificationBlock = that._("#notification");
-            const notificationId = `notification-${createUUID()}`;
-
-            const type = typeof e.detail.type !== 'undefined' ? e.detail.type : "info";
-            const body = typeof e.detail.body !== 'undefined' ? e.detail.body : "";
-            const summary = typeof e.detail.summary !== 'undefined' ? e.detail.summary : "";
-            const timeout = typeof e.detail.timeout !== 'undefined' ? e.detail.timeout : 0;
-            const icon = typeof e.detail.icon !== 'undefined' ? e.detail.icon : '';
-            const iconHTML = icon !== '' ? `<vpu-icon name="${icon}"></vpu-icon>` : "";
-            const summaryHTML = summary !== "" ? `<h3>${summary}</h3>` : "";
-
-            that.notificationBlock.innerHTML = `
-                <div id="${notificationId}" class="notification is-${type}">
-                    <button id="${notificationId}-button" onclick="parentNode.parentNode.removeChild(parentNode)" class="delete"></button>
-                    ${summaryHTML}
-                    ${iconHTML} ${body}
-                </div>
-            ` + that.notificationBlock.innerHTML;
-
-            const messageId = `#${notificationId}`;
-
-            if (timeout > 0) {
-                setTimeout(() => {
-                    that.removeMessageId(messageId);
-                }, timeout * 1000);
-            }
-
-            // mark the event as handled
-            e.preventDefault();
-        });
-
-        this.updateComplete.then(()=>{
-        });
-    }
-
-    removeMessageId(messageElementId) {
-        const element = this._(messageElementId);
-
-        if (element) {
-            this.notificationBlock.removeChild(element);
-        }
-    }
-
-    static get styles() {
-        // language=css
-        return css`
-            ${commonStyles.getThemeCSS()}
-            ${commonStyles.getGeneralCSS()}
-            ${commonStyles.getNotificationCSS()}
-
-            .notification:not(:last-child) {
-                margin-bottom: 1.5rem;
-            }
-
-            .notification h3 {
-                font-weight: bold;
-                margin-bottom: 3px;
-            }
-
-            .delete, .modal-close {
-                -moz-appearance: none;
-                -webkit-appearance: none;
-                background-color: rgba(10,10,10,.2);
-                border: none;
-                border-radius: 290486px;
-                cursor: pointer;
-                pointer-events: auto;
-                display: inline-block;
-                flex-grow: 0;
-                flex-shrink: 0;
-                font-size: 0;
-                height: 20px;
-                max-height: 20px;
-                max-width: 20px;
-                min-height: 20px;
-                min-width: 20px;
-                outline: 0;
-                position: relative;
-                vertical-align: top;
-                width: 20px;
-            }
-
-            .delete::before, .modal-close::before, .delete::after, .modal-close::after {
-                background-color: white;
-                content: "";
-                display: block;
-                left: 50%;
-                position: absolute;
-                top: 50%;
-                -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-                        transform: translateX(-50%) translateY(-50%) rotate(45deg);
-                -webkit-transform-origin: center center;
-                        transform-origin: center center;
-            }
-
-            .delete::before, .modal-close::before {
-                height: 2px;
-                width: 50%;
-            }
-
-            .delete::after, .modal-close::after {
-                height: 50%;
-                width: 2px;
-            }
-
-            .delete:hover, .modal-close:hover, .delete:focus, .modal-close:focus {
-                background-color: rgba(10, 10, 10, 0.3);
-            }
-
-            .delete:active, .modal-close:active {
-                background-color: rgba(10, 10, 10, 0.4);
-            }
-
-            #notification {
-                position: fixed; top: 0; max-width: 500px; margin: 0.75em auto; left: 0; right: 0; z-index: 1000; padding: 0;
-            }
-
-            .notification h3 {
-                margin: 0 0 3px 0;
-                font: inherit;
-                font-weight: bold; 
-            }
-        `;
-    }
-
-    render() {
-        commonUtils.initAssetBaseURL('vpu-notification-src');
-
-        return html`
-            <div class="columns">
-                <div class="column" id="notification">
-                </div>
-            </div>
-        `;
-    }
-}
-
-commonUtils.defineCustomElement('vpu-notification', VPUNotification);
+commonUtils.defineCustomElement('vpu-notification', Notification);