diff --git a/packages/notification/.gitignore b/packages/notification/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..f61d5b290ea7cec0969dd9a40b8d9e3358438c32
--- /dev/null
+++ b/packages/notification/.gitignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+.idea
+npm-debug.log
\ No newline at end of file
diff --git a/packages/notification/.gitmodules b/packages/notification/.gitmodules
new file mode 100644
index 0000000000000000000000000000000000000000..d423707d751b13b5f0d8462cdba7290860dac1e7
--- /dev/null
+++ b/packages/notification/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "vendor/common"]
+ path = vendor/common
+ url = git@gitlab.tugraz.at:VPU/WebComponents/Common.git
diff --git a/packages/notification/README.md b/packages/notification/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..2d169fba91e3dc3833949ff62008ee2586f716df
--- /dev/null
+++ b/packages/notification/README.md
@@ -0,0 +1,53 @@
+## VPU Notification Web Component
+
+[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/Notification)
+
+## Usage
+
+```html
+<vpu-notification></vpu-notification>
+```
+
+## Attributes
+
+- `lang` (optional, default: `de`): set to `de` or `en` for German or English
+ - example `<vpu-notification lang="de" client-id="my-client-id"></vpu-notification>`
+
+## Events to dispatch
+
+### Sending notifications
+
+`vpu-notification-send` sends a notification to the web component
+
+```javascript
+event = new CustomEvent("vpu-notification-send", {
+ bubbles: true,
+ cancelable: true,
+ detail: {
+ "summary": "Item deleted",
+ "body": "Item foo was deleted!",
+ "timeout": 5,
+ },
+});
+```
+
+## Local development
+
+```bash
+# get the source
+git clone git@gitlab.tugraz.at:VPU/WebComponents/Notification.git
+cd Notification
+git submodule update --init
+
+# we are creating the symbolic links to our git sub-modules
+# (there was no proper script to do this automatically before a "node install"
+npm run setup
+
+# install dependencies
+npm install
+
+# constantly build dist/bundle.js and run a local web-server on port 8002
+npm run watch-local
+```
+
+Jump to <http://localhost:8002> and you should get a demo page.
diff --git a/packages/notification/favicon.ico b/packages/notification/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f6cf22d1afc22f071d2b64c7779bc5214c3adae5
Binary files /dev/null and b/packages/notification/favicon.ico differ
diff --git a/packages/notification/i18n.js b/packages/notification/i18n.js
new file mode 100644
index 0000000000000000000000000000000000000000..a2380632e7095df7cc09dddf372598f5d6b5898c
--- /dev/null
+++ b/packages/notification/i18n.js
@@ -0,0 +1,29 @@
+import i18next from 'i18next';
+
+import de from './i18n/de/translation.json';
+import en from './i18n/en/translation.json';
+
+const i18n = i18next.createInstance();
+
+i18n.init({
+ lng: 'de',
+ fallbackLng: ['de'],
+ debug: false,
+ initImmediate: false, // Don't init async
+ resources: {
+ en: {translation: en},
+ de: {translation: de}
+ },
+});
+
+console.assert(i18n.isInitialized);
+
+function dateTimeFormat(date, options) {
+ return new Intl.DateTimeFormat(i18n.languages, options).format(date);
+}
+
+function numberFormat(number, options) {
+ return new Intl.NumberFormat(i18n.languages, options).format(number);
+}
+
+export {i18n, dateTimeFormat, numberFormat};
diff --git a/packages/notification/i18n/de/translation.json b/packages/notification/i18n/de/translation.json
new file mode 100644
index 0000000000000000000000000000000000000000..2c63c0851048d8f7bff41ecf0f8cee05f52fd120
--- /dev/null
+++ b/packages/notification/i18n/de/translation.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/packages/notification/i18n/en/translation.json b/packages/notification/i18n/en/translation.json
new file mode 100644
index 0000000000000000000000000000000000000000..2c63c0851048d8f7bff41ecf0f8cee05f52fd120
--- /dev/null
+++ b/packages/notification/i18n/en/translation.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/packages/notification/i18next-scanner.config.js b/packages/notification/i18next-scanner.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..6c112e37f5c104b78cb42d2fc021fd1adbb9cc47
--- /dev/null
+++ b/packages/notification/i18next-scanner.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+ input: [
+ '*.js',
+ ],
+ output: './',
+ options: {
+ debug: false,
+ removeUnusedKeys: true,
+ sort: true,
+ lngs: ['en','de'],
+ },
+}
diff --git a/packages/notification/index.html b/packages/notification/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..f49760b29adff158d6279c6f74b3c51d3e31a0b1
--- /dev/null
+++ b/packages/notification/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <script src="webcomponents-loader.js"></script>
+ <script type="module" id="vpu-notification-wc-src" src="bundle.js"></script>
+</head>
+
+<body>
+
+<vpu-notification-demo lang="de"></vpu-notification-demo>
+
+</body>
+</html>
diff --git a/packages/notification/index.js b/packages/notification/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..acd0529d1e873071c8cd9a60b000a05e8fdc8e18
--- /dev/null
+++ b/packages/notification/index.js
@@ -0,0 +1,2 @@
+import './vpu-notification';
+import './vpu-notification-demo';
diff --git a/packages/notification/package.json b/packages/notification/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..da74c6d1d93de4031b44f1ba6e0bfd94890dc8c6
--- /dev/null
+++ b/packages/notification/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "vpu-notification",
+ "version": "1.0.0",
+ "devDependencies": {
+ "node-sass": "^4.12.0",
+ "rollup": "^1.11.3",
+ "rollup-plugin-commonjs": "^9.3.4",
+ "rollup-plugin-copy": "^2.0.1",
+ "rollup-plugin-node-resolve": "^4.2.3",
+ "rollup-plugin-postcss": "^2.0.3",
+ "rollup-plugin-serve": "^1.0.1",
+ "rollup-plugin-terser": "^4.0.4",
+ "rollup-plugin-json": "^4.0.0",
+ "rollup-plugin-replace": "^2.2.0",
+ "i18next-scanner": "^2.10.2"
+ },
+ "dependencies": {
+ "@webcomponents/webcomponentsjs": "^2.2.10",
+ "i18next": "^17.0.3",
+ "lit-element": "^2.1.0",
+ "vpu-common": "*"
+ },
+ "scripts": {
+ "setup": "mkdir -p node_modules && cd node_modules && ln -sfn ../vendor/common vpu-common",
+ "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",
+ "i18next": "i18next-scanner",
+ "watch": "npm run watch-local",
+ "watch-local": "rollup -c --watch",
+ "watch-dev": "rollup -c --watch --environment BUILD:development"
+ }
+}
diff --git a/packages/notification/rollup.config.js b/packages/notification/rollup.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..9db64d44ecc3219916b717ff10c9b5e8d8d6f687
--- /dev/null
+++ b/packages/notification/rollup.config.js
@@ -0,0 +1,43 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+import {terser} from "rollup-plugin-terser";
+import json from 'rollup-plugin-json';
+import replace from "rollup-plugin-replace";
+import serve from 'rollup-plugin-serve';
+
+const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
+console.log("build: " + build);
+
+export default {
+ input: 'index.js',
+ output: {
+ file: 'dist/bundle.js',
+ format: 'esm'
+ },
+ plugins: [
+ resolve(),
+ commonjs(),
+ json(),
+ replace({
+ "process.env.BUILD": '"' + build + '"',
+ }),
+ postcss({
+ inject: false,
+ minimize: false,
+ plugins: []
+ }),
+ (build !== 'local') ? terser() : false,
+ copy({
+ targets: [
+ 'index.html',
+ 'favicon.ico',
+ 'node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js',
+ 'node_modules/@webcomponents/webcomponentsjs/bundles',
+ ],
+ outputFolder: 'dist'
+ }),
+ (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
+ ]
+};
diff --git a/packages/notification/vpu-notification-demo.js b/packages/notification/vpu-notification-demo.js
new file mode 100644
index 0000000000000000000000000000000000000000..a374beb0373477a25029e6aaf32866b8ded6ae8e
--- /dev/null
+++ b/packages/notification/vpu-notification-demo.js
@@ -0,0 +1,42 @@
+import {i18n} from './i18n.js';
+import {html, LitElement} from 'lit-element';
+
+class NotificationDemo extends LitElement {
+ constructor() {
+ super();
+ this.lang = 'de';
+ }
+
+ static get properties() {
+ return {
+ lang: { type: String },
+ };
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ i18n.changeLanguage(this.lang);
+
+ this.updateComplete.then(()=>{
+ });
+ }
+
+ render() {
+ return html`
+ <style>
+ </style>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+
+ <section class="section">
+ <div class="container">
+ <h1 class="title">Notification-Demo</h1>
+ </div>
+ <div class="container">
+ <vpu-notification lang="${this.lang}"></vpu-notification>
+ </div>
+ </section>
+ `;
+ }
+}
+
+customElements.define('vpu-notification-demo', NotificationDemo);
diff --git a/packages/notification/vpu-notification.js b/packages/notification/vpu-notification.js
new file mode 100644
index 0000000000000000000000000000000000000000..2496c6298e751ce314406fafc86c39dca320dcfd
--- /dev/null
+++ b/packages/notification/vpu-notification.js
@@ -0,0 +1,54 @@
+import {i18n} from './i18n.js';
+import {html, LitElement} from 'lit-element';
+
+/**
+ * Keycloak auth web component
+ * https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter
+ *
+ * Dispatches an event `vpu-notification-init` and sets some global variables:
+ * window.VPUNotificationSubject: Keycloak username
+ * window.VPUNotificationToken: Keycloak token to send with your requests
+ * window.VPUUserFullName: Full name of the user
+ * window.VPUPersonId: Person identifier of the user
+ * window.VPUPerson: Person json object of the user (optional, enable by setting the `load-person` attribute,
+ * which will dispatch a `vpu-notification-person-init` event when loaded)
+ */
+class VPUNotification extends LitElement {
+ 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);
+
+ this.updateComplete.then(()=>{
+ });
+ }
+
+ render() {
+ return html`
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+ <style>
+ </style>
+
+ <div class="columns">
+ <div class="column">
+ TODO
+ </div>
+ </div>
+ `;
+ }
+}
+
+customElements.define('vpu-notification', VPUNotification);