Move component to common

packages/common/dbp-common-demo.js

@@ -3,7 +3,7 @@ import {css, html, LitElement} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from './utils.js';
 import * as commonStyles from './styles.js';
-import {getIconCSS, Icon, MiniSpinner, Button, Spinner} from './index.js';
+import {getIconCSS, Icon, MiniSpinner, Button, Spinner, InlineNotification} from './index.js';
 
 export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
@@ -19,6 +19,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
             'dbp-spinner': Spinner,
             'dbp-button': Button,
             'dbp-auth': customElements.get('dbp-auth'),
+            'dbp-inline-notification': InlineNotification,
         };
     }
 
@@ -174,6 +175,16 @@ html {
 }
 &lt;/style&gt;</pre>
                 </div>
+                <div class="content">
+                    <h2>Inline Notification</h2>
+                    <div class="control">
+                        <dbp-inline-notification body="Item <b>foo</b> was deleted!" type="primary"></dbp-inline-notification><br>
+                        <dbp-inline-notification summary="Item foo was deleted."></dbp-inline-notification><br>
+                        <dbp-inline-notification summary="Item deleted" body="Item <b>foo</b> was deleted!" type="success"></dbp-inline-notification><br>
+                        <dbp-inline-notification summary="Item deleted" body="Item <b>foo</b> was deleted!" type="danger"></dbp-inline-notification><br>
+                        <dbp-inline-notification summary="Item deleted" body="Item <b>foo</b> was deleted!" type="warning"></dbp-inline-notification>
+                    </div>
+                </div>
             </section>
         `;
     }

packages/common/index.js

@@ -4,9 +4,11 @@ import {getIconSVGURL, getIconCSS, Icon} from './src/icon.js';
 import {MiniSpinner} from './src/mini-spinner.js';
 import {Button, LoadingButton} from './src/button.js';
 import {Spinner} from './src/spinner.js';
+import {InlineNotification} from './src/inline-notification.js';
 
 export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
 export {getIconSVGURL, getIconCSS, Icon};
 export {MiniSpinner};
 export {Button, LoadingButton};
 export {Spinner};
+export {InlineNotification};
\ No newline at end of file

packages/inline-notification/src/inline-notification.js → packages/common/src/inline-notification.js

-import {i18n} from './i18n';
-import {createUUID} from './utils'
+import {i18n} from '../i18n';
+import {createUUID} from '../utils'
 import {css, html} from 'lit-element';
-import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
-import * as commonStyles from '@dbp-toolkit/common/styles';
+import DBPLitElement from '../dbp-lit-element';
+import * as commonStyles from '../styles';
 
 /**
- * Inline Notification web component
+ * Inline Notification
+ * 
+ * Summary can be a string or empty
+ * 
+ * Body can be a string, html or empty
+ * 
+ * Type can be primary/info/success/warning/danger (default: info)
+ *  
  */
 export class InlineNotification extends DBPLitElement {
     constructor() {
@@ -65,7 +72,7 @@ export class InlineNotification extends DBPLitElement {
         return html`
             <div class="columns">
                 <div class="column">
-                    <div id="inline-notification-${ notificationId }" class="notification is-${ this.type }">
+                    <div id="inline-notification-${ notificationId }" class="notification is-${ this.type !== '' ? this.type : 'info' }">
                         ${ this.summary !== '' ? html`<h3>${ this.summary }</h3>` : `` }
                         ${ bodyHtml }
                     </div>

packages/common/utils.js

@@ -362,3 +362,19 @@ export const getBaseName = (str) => {
 export const getFileExtension = (str) => {
     return str.split('.').pop();
 };
+
+/**
+  * Creates a UUID
+  *
+  * @returns {string}
+  */
+export const createUUID = () => {
+    let dt = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = (dt + Math.random()*16)%16 | 0;
+        dt = Math.floor(dt/16);
+        return (c==='x' ? r :(r&0x3|0x8)).toString(16);
+    });
+
+    return uuid;
+};

packages/inline-notification/.gitignore

-dist
-node_modules
-.idea
-npm-debug.log
-package-lock.json

packages/inline-notification/README.md

-# Inline Notification Web Component
-
-## Usage
-
-```html
-<dbp-inline-notification></dbp-inline-notification>
-```
-
-## Attributes
-
-- `lang` (optional, default: `de`): set to `de` or `en` for German or English
-    - example `<dbp-inline-notification lang="de" ></dbp-inline-notification>`
-- `type` (optional, default: `info`): set to `primary`, `info`, `success`, `danger`, `warning`
-    - example `<dbp-inline-notification lang="de" type="" ></dbp-inline-notification>`
-- `summary` (optional): set to a specific text for an optional summary headline
-    - example `<dbp-inline-notification summary="Item deleted"></dbp-inline-notification>`
-- `body` : can be set to a specific text and/or HTML.
-    - example `<dbp-inline-notification body="Item <b>foo</b> was deleted"></dbp-inline-notification>`
-
-
-## Local development
-
-```bash
-# get the source
-git clone git@gitlab.tugraz.at:dbp/web-components/toolkit.git
-cd toolkit/packages/inline-notification
-
-# install dependencies
-yarn install
-
-# constantly build dist/bundle.js and run a local web-server on port 8002 
-yarn run watch
-
-# run tests
-yarn test
-
-# build local packages in dist directory
-yarn run build
-```
-
-Jump to <http://localhost:8002> and you should get a demo page.

packages/inline-notification/assets/index.html

-<!doctype html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <script type="module" src="dbp-inline-notification-demo.js"></script>
-</head>
-
-<body>
-
-<dbp-inline-notification-demo lang="de"></dbp-inline-notification-demo>
-
-</body>
-</html>

packages/inline-notification/i18next-scanner.config.js

-module.exports = {
-    input: [
-        'src/*.js',
-    ],
-    output: './',
-    options: {
-        debug: false,
-        removeUnusedKeys: true,
-        lngs: ['en','de'],
-        resource: {
-            loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
-            savePath: 'src/i18n/{{lng}}/{{ns}}.json'
-        },
-    },
-}

packages/inline-notification/karma.conf.js

-// Trick to use the auto-downloaded puppeteer chrome binary
-process.env.CHROME_BIN = require('puppeteer').executablePath();
-
-module.exports = function(config) {
-  config.set({
-    basePath: 'dist',
-    frameworks: ['mocha', 'chai'],
-    files: [
-      {pattern: './*.js', included: true, watched: true, served: true, type: 'module'},
-      {pattern: './**/*', included: false, watched: true, served: true},
-    ],
-    autoWatch: true,
-    browsers: ['ChromeHeadlessNoSandbox'],
-    customLaunchers: {
-      ChromeHeadlessNoSandbox: {
-        base: 'ChromeHeadless',
-        flags: ['--no-sandbox']
-      }
-    },
-    singleRun: false,
-    logLevel: config.LOG_ERROR
-  });
-}

packages/inline-notification/package.json

-{
-  "name": "dbp-inline-notification",
-  "version": "1.0.0",
-  "main": "src/index.js",
-  "license": "LGPL-2.1-or-later",
-  "private": true,
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^15.1.0",
-    "@rollup/plugin-json": "^4.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-url": "^5.0.1",
-    "chai": "^4.2.0",
-    "i18next-scanner": "^2.10.2",
-    "karma": "^5.1.0",
-    "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^3.0.0",
-    "karma-mocha": "^2.0.1",
-    "mocha": "^8.0.1",
-    "puppeteer": "^5.3.1",
-    "rollup": "^2.19.0",
-    "rollup-plugin-consts": "^1.0.1",
-    "rollup-plugin-copy": "^3.1.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-serve": "^1.0.1",
-    "rollup-plugin-terser": "^7.0.2"
-  },
-  "dependencies": {
-    "@open-wc/scoped-elements": "^1.1.1",
-    "@dbp-toolkit/common": "^0.1.0",
-    "lit-element": "^2.3.1"
-  },
-  "scripts": {
-    "clean": "rm dist/*",
-    "build": "npm run build-local",
-    "build-local": "rollup -c",
-    "build-dev": "rollup -c --environment BUILD:development",
-    "build-prod": "rollup -c --environment BUILD:production",
-    "build-demo": "rollup -c --environment BUILD:demo",
-    "build-test": "rollup -c --environment BUILD:test",
-    "i18next": "i18next-scanner",
-    "watch": "npm run watch-local",
-    "watch-local": "rollup -c --watch",
-    "watch-dev": "rollup -c --watch --environment BUILD:development",
-    "test": "npm run build-test && karma start --singleRun"
-  }
-}

packages/inline-notification/rollup.config.js

-import glob from 'glob';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-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 url from "@rollup/plugin-url";
-import consts from 'rollup-plugin-consts';
-import del from 'rollup-plugin-delete';
-
-const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
-console.log("build: " + build);
-
-export default {
-    input: (build != 'test') ? ['src/dbp-inline-notification.js', 'src/dbp-inline-notification-demo.js'] : glob.sync('test/**/*.js'),
-    output: {
-        dir: 'dist',
-        entryFileNames: '[name].js',
-        chunkFileNames: 'shared/[name].[hash].[format].js',
-        format: 'esm',
-        sourcemap: true
-    },
-    plugins: [
-        del({
-            targets: 'dist/*'
-        }),
-        consts({
-            environment: build,
-        }),
-        resolve(),
-        commonjs(),
-        json(),
-        url({
-            limit: 0,
-            emitFiles: true,
-            fileName: 'shared/[name].[hash][extname]'
-        }),
-        (build !== 'local' && build !== 'test') ? terser() : false,
-        copy({
-            targets: [
-                {src: 'assets/index.html', dest: 'dist'},
-                {src: 'assets/favicon.ico', dest: 'dist'},
-            ]
-        }),
-        (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
-    ]
-};

packages/inline-notification/src/dbp-inline-notification-demo.js

-import {i18n} from './i18n';
-import {css, html, LitElement} from 'lit-element';
-import {ScopedElementsMixin} from '@open-wc/scoped-elements';
-import {InlineNotification} from './inline-notification.js';
-import * as commonUtils from '@dbp-toolkit/common/utils';
-import * as commonStyles from "@dbp-toolkit/common/styles";
-
-export class InlineNotificationDemo extends ScopedElementsMixin(LitElement) {
-    constructor() {
-        super();
-        this.lang = 'de';
-        this.isNotificationVisible = false;
-    }
-
-    static get scopedElements() {
-        return {
-          'dbp-inline-notification': InlineNotification,
-        };
-      }
-
-    static get properties() {
-        return {
-            lang: { type: String },
-            isNotificationVisible: { type: Boolean, attribute: false }
-        };
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        i18n.changeLanguage(this.lang);
-
-        this.updateComplete.then(()=>{
-        });
-    }
-
-    showNotification() {
-        this.isNotificationVisible ? this.isNotificationVisible = false : this.isNotificationVisible = true;
-    }
-
-    static get styles() {
-        // language=css
-        return css`
-            ${commonStyles.getThemeCSS()}
-            ${commonStyles.getGeneralCSS()}
-            ${commonStyles.getButtonCSS()}
-        `;
-    }
-
-    render() {
-        const types = ["primary", "info", "success", "danger", "warning"];
-
-        return html`
-            <section class="section">
-                <div class="container">
-                    <h1 class="title">Inline-Notification-Demo</h1>
-                </div>
-                <div class="container">
-                    <div class="columns is-vcentered">
-                        <div class="column">
-                            <button id="send-button" @click="${this.showNotification}" class="button">${i18n.t('show')}</button>
-                            <br><br>
-                            ${this.isNotificationVisible ? html`
-                                <dbp-inline-notification summary="Item deleted" body="Item <b>${Math.random().toString(36).substring(7)}</b> foo was deleted!" type="${types[Math.floor(Math.random() * types.length)]}"></dbp-inline-notification>
-                            `: ``}
-                        </div>
-                    </div>
-                </div>
-            </section>
-        `;
-    }
-}
-
-commonUtils.defineCustomElement('dbp-inline-notification-demo', InlineNotificationDemo);

packages/inline-notification/src/dbp-inline-notification.js

-import * as commonUtils from '@dbp-toolkit/common/utils';
-import {InlineNotification} from './inline-notification.js';
-
-commonUtils.defineCustomElement('dbp-inline-notification', InlineNotification);

packages/inline-notification/src/i18n.js

-import {createInstance} from '@dbp-toolkit/common/i18next.js';
-
-import de from './i18n/de/translation.json';
-import en from './i18n/en/translation.json';
-
-export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file

packages/inline-notification/src/i18n/de/translation.json

-{
-  "show": "anzeigen"
-}

packages/inline-notification/src/i18n/en/translation.json

-{
-  "show": "show"
-}

packages/inline-notification/src/index.js

-import {InlineNotification} from './inline-notification.js';
-
-export {InlineNotification};
\ No newline at end of file

packages/inline-notification/src/utils.js

-export const createUUID = () => {
-    let dt = new Date().getTime();
-    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        const r = (dt + Math.random()*16)%16 | 0;
-        dt = Math.floor(dt/16);
-        return (c==='x' ? r :(r&0x3|0x8)).toString(16);
-    });
-
-    return uuid;
-};
-