Refactoring vpu to dbp for file-handling (#2)

packages/file-handling/.gitlab-ci.yml

@@ -3,7 +3,7 @@ image: debian:buster
 before_script:
   - apt update
   - apt install -y git
-  - "sed -i 's|git@gitlab.tugraz.at:VPU|../..|g' .gitmodules"
+  - "sed -i 's|git@gitlab.tugraz.at:dbp|../..|g' .gitmodules"
   - git submodule sync
   - git submodule update --init
 

packages/file-handling/README.md

 # File handling web components
 
-[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/FileHandling)
+[GitLab Repository](https://gitlab.tugraz.at/dbp/web-components/FileHandling)
 
 ## FileSource
 
@@ -10,42 +10,42 @@ files from a [Nextcloud](https://nextcloud.com/) instance.
 ### Usage
 
 ```html
-<vpu-file-source></vpu-file-source>
+<dbp-file-source></dbp-file-source>
 ```
 
 ### Attributes
 
 - `lang` (optional, default: `de`): set to `de` or `en` for German or English
-    - example `<vpu-file-source lang="de"></vpu-file-source>`
+    - example `<dbp-file-source lang="de"></dbp-file-source>`
 - `allowed-mime-types` (optional): if set accepts only files matching mime types
-    - example `<vpu-file-source allowed-mime-types='application/pdf'></vpu-file-source>` ... PDFs only
-    - example `<vpu-file-source allowed-mime-types='image/*'></vpu-file-source>` ... images (of all sub types) only
-    - example `<vpu-file-source allowed-mime-types='image/png,text/plain'></vpu-file-source>` ... PNGs or TXTs only
-    - example `<vpu-file-source allowed-mime-types='*/*'></vpu-file-source>` ... all file types (default)
+    - example `<dbp-file-source allowed-mime-types='application/pdf'></dbp-file-source>` ... PDFs only
+    - example `<dbp-file-source allowed-mime-types='image/*'></dbp-file-source>` ... images (of all sub types) only
+    - example `<dbp-file-source allowed-mime-types='image/png,text/plain'></dbp-file-source>` ... PNGs or TXTs only
+    - example `<dbp-file-source allowed-mime-types='*/*'></dbp-file-source>` ... all file types (default)
 - `enabled-sources` (optional, default: `local`): sets which sources are enabled
     - you can use `local` and `nextcloud`
-    - example `<vpu-file-source enabled-sources="local,nextcloud"></vpu-file-source>`
+    - example `<dbp-file-source enabled-sources="local,nextcloud"></dbp-file-source>`
 - `disabled` (optional): disable input control
-    - example `<vpu-file-source disabled></vpu-file-source>`
+    - example `<dbp-file-source disabled></dbp-file-source>`
 - `decompress-zip` (optional): decompress zip file and send the contained files (including files in folders)
-    - example `<vpu-file-source decompress-zip></vpu-file-source>`
+    - example `<dbp-file-source decompress-zip></dbp-file-source>`
     - mime types of `allowed-mime-types` will also be checked for the files in the zip file
 - `nextcloud-auth-url` (optional): Nextcloud Auth Url to use with the Nextcloud file picker
-    - example `<vpu-file-source nextcloud-auth-url="http://localhost:8081/index.php/apps/webapppassword"></vpu-file-source>`
+    - example `<dbp-file-source nextcloud-auth-url="http://localhost:8081/index.php/apps/webapppassword"></dbp-file-source>`
     - `nextcloud-web-dav-url` also needs to be set for the Nextcloud file picker to be active
 - `nextcloud-web-dav-url` (optional): Nextcloud WebDav Url to use with the Nextcloud file picker
-    - example `<vpu-file-source nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"></vpu-file-source>`
+    - example `<dbp-file-source nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"></dbp-file-source>`
     - `nextcloud-auth-url` also needs to be set for the Nextcloud file picker to be active
 - `dialog-open` (optional): if this attribute is set the dialog for selecting local or Nextcloud files will open
-    - example `<vpu-file-source dialog-open></vpu-file-source>`
+    - example `<dbp-file-source dialog-open></dbp-file-source>`
 - `text` (optional): the text that is shown above the button to select files
-    - example `<vpu-file-source text="Please select some files"></vpu-file-source>`
+    - example `<dbp-file-source text="Please select some files"></dbp-file-source>`
 - `button-label` (optional): the text that is shown on the button to select files
-    - example `<vpu-file-source button-label="Select files"></vpu-file-source>`
+    - example `<dbp-file-source button-label="Select files"></dbp-file-source>`
 
 ### Outgoing Events
 
-#### `vpu-file-source-file-selected`
+#### `dbp-file-source-file-selected`
 
 This event is sent if a file was selected.
 
@@ -58,28 +58,28 @@ This web component is able to receive files and present as them as ZIP file down
 ### Usage
 
 ```html
-<vpu-file-sink></vpu-file-sink>
+<dbp-file-sink></dbp-file-sink>
 ```
 
 ### Attributes
 
 - `lang` (optional, default: `de`): set to `de` or `en` for German or English
-    - example `<vpu-file-sink lang="de"></vpu-file-sink>`
+    - example `<dbp-file-sink lang="de"></dbp-file-sink>`
 - `enabled-destinations` (optional, default: `local`): sets which destination are enabled
     - you can use `local` and `nextcloud`
-    - example `<vpu-file-sink enabled-destinations="local,nextcloud"></vpu-file-sink>`
+    - example `<dbp-file-sink enabled-destinations="local,nextcloud"></dbp-file-sink>`
 - `filename` (optional, default: `files.zip`): sets a file name to use for downloading the zip file
-    - example `<vpu-file-sink filename="signed-documents.zip"></vpu-file-sink>`
+    - example `<dbp-file-sink filename="signed-documents.zip"></dbp-file-sink>`
 - `nextcloud-auth-url` (optional): Nextcloud Auth Url to use with the Nextcloud file picker
-    - example `<vpu-file-sink nextcloud-auth-url="http://localhost:8081/index.php/apps/webapppassword"></vpu-file-sink>`
+    - example `<dbp-file-sink nextcloud-auth-url="http://localhost:8081/index.php/apps/webapppassword"></dbp-file-sink>`
     - `nextcloud-web-dav-url` also needs to be set for the Nextcloud file picker to be active
 - `nextcloud-web-dav-url` (optional): Nextcloud WebDav Url to use with the Nextcloud file picker
-    - example `<vpu-file-sink nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"></vpu-file-sink>`
+    - example `<dbp-file-sink nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"></dbp-file-sink>`
     - `nextcloud-auth-url` also needs to be set for the Nextcloud file picker to be active
 - `text` (optional): the text that is shown above the button to download the zip file
-    - example `<vpu-file-sink text="Download files as ZIP-file"></vpu-file-sink>`
+    - example `<dbp-file-sink text="Download files as ZIP-file"></dbp-file-sink>`
 - `button-label` (optional): the text that is shown on the button to download the zip file
-    - example `<vpu-file-sink button-label="Download files"></vpu-file-sink>`
+    - example `<dbp-file-sink button-label="Download files"></dbp-file-sink>`
 
 ### Properties
 
@@ -90,7 +90,7 @@ This web component is able to receive files and present as them as ZIP file down
 
 ```bash
 # get the source code
-git clone git@gitlab.tugraz.at:VPU/WebComponents/FileHandling.git
+git clone git@gitlab.tugraz.at:dbp/web-components/FileHandling.git
 cd FileHandling
 git submodule update --init
 
@@ -104,5 +104,5 @@ npm run watch-local
 Jump to <http://localhost:8002> and you should get a demo page.
 
 To use the Nextcloud functionality you need a running Nextcloud server with the
-[webapppassword](https://gitlab.tugraz.at/VPU/Middleware/Nextcloud/webapppassword) Nextcloud app like this
-[Nextcloud Development Environment](https://gitlab.tugraz.at/VPU/Middleware/Nextcloud/webapppassword/-/tree/master/docker). 
+[webapppassword](https://gitlab.tugraz.at/DBP/Middleware/Nextcloud/webapppassword) Nextcloud app like this
+[Nextcloud Development Environment](https://gitlab.tugraz.at/DBP/Middleware/Nextcloud/webapppassword/-/tree/master/docker). 

packages/file-handling/assets/index.html

@@ -2,9 +2,9 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <script type="module" id="vpu-file-source-src" src="demo.js"></script>
+    <script type="module" id="dbp-file-source-src" src="demo.js"></script>
     <style>
-      vpu-file-source-demo {
+      dbp-file-source-demo {
           --FUBorderWidth: 2px;
           --FUBorderStyle: dotted;
           --FUBorderColor: #555;
@@ -18,6 +18,6 @@
     </style>
 </head>
 <body>
-    <vpu-file-source-demo lang="de"></vpu-file-source-demo>
+    <dbp-file-source-demo lang="de"></dbp-file-source-demo>
 </body>
 </html>

packages/file-handling/package.json

 {
-  "name": "vpu-file-handling",
+  "name": "dbp-file-handling",
   "version": "1.0.0",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
@@ -23,7 +23,7 @@
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^6.1.0",
-    "vpu-common": "^1.0.0"
+    "dbp-common": "^1.0.0"
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^1.0.8",

packages/file-handling/rollup.config.js

@@ -15,7 +15,7 @@ let nextcloudBaseURL = 'https://cloud.tugraz.at';
 let nextcloudFileURL = nextcloudBaseURL + '/apps/files/?dir=';
 
 export default {
-    input: (build !== 'test') ? ['src/demo.js', 'src/vpu-file-source.js'] : glob.sync('test/**/*.js'),
+    input: (build !== 'test') ? ['src/demo.js', 'src/dbp-file-source.js'] : glob.sync('test/**/*.js'),
     output: {
         dir: 'dist',
         entryFileNames: '[name].js',
@@ -40,8 +40,8 @@ export default {
             targets: [
                 {src: 'assets/index.html', dest: 'dist'},
                 {src: 'assets/favicon.ico', dest: 'dist'},
-                {src: '../../node_modules/material-design-icons-svg/paths/*.json', dest: 'dist/local/vpu-common/icons'},
-                {src: '../../node_modules/tabulator-tables/dist/css', dest: 'dist/local/vpu-file-source/tabulator-tables'},
+                {src: '../../node_modules/material-design-icons-svg/paths/*.json', dest: 'dist/local/dbp-common/icons'},
+                {src: '../../node_modules/tabulator-tables/dist/css', dest: 'dist/local/dbp-file-source/tabulator-tables'},
             ],
         }),
         (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false

packages/file-handling/src/dbp-file-sink.js

+import * as commonUtils from "dbp-common/utils";
+import {FileSink} from './file-sink';
+
+commonUtils.defineCustomElement('dbp-file-sink', FileSink);

packages/file-handling/src/dbp-file-source.js

+import * as commonUtils from "dbp-common/utils";
+import {FileSource} from './file-source';
+
+commonUtils.defineCustomElement('dbp-file-source', FileSource);

packages/file-handling/src/vpu-nextcloud-file-picker.js → packages/file-handling/src/dbp-nextcloud-file-picker.js

 import {i18n} from './i18n';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
-import VPULitElement from 'vpu-common/vpu-lit-element';
-import {Icon, MiniSpinner} from 'vpu-common';
-import * as commonUtils from 'vpu-common/utils';
-import * as commonStyles from 'vpu-common/styles';
+import DBPLitElement from 'dbp-common/dbp-lit-element';
+import {Icon, MiniSpinner} from 'dbp-common';
+import * as commonUtils from 'dbp-common/utils';
+import * as commonStyles from 'dbp-common/styles';
 import {createClient} from 'webdav/web';
 import {classMap} from 'lit-html/directives/class-map.js';
-import {humanFileSize} from 'vpu-common/i18next';
+import {humanFileSize} from 'dbp-common/i18next';
 import Tabulator from 'tabulator-tables';
 import nextcloudFileURL from 'consts:nextcloudFileURL';
 
 /**
  * NextcloudFilePicker web component
  */
-export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
+export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
         this.lang = 'de';
@@ -37,8 +37,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
 
     static get scopedElements() {
         return {
-            'vpu-icon': Icon,
-            'vpu-mini-spinner': MiniSpinner,
+            'dbp-icon': Icon,
+            'dbp-mini-spinner': MiniSpinner,
         };
     }
 
@@ -91,7 +91,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
                 selectableRangeMode: "drag",
                 columns: [
                     {title: "", field: "type", align:"center", headerSort:false, width:50, formatter: (cell, formatterParams, onRendered) => {
-                            const icon_tag =  that.constructor.getScopedTagName("vpu-icon");
+                            const icon_tag =  that.constructor.getScopedTagName("dbp-icon");
                             let icon = `<${icon_tag} name="empty-file"></${icon_tag}>`;
                             return (cell.getValue() === "directory") ? `<${icon_tag} name="folder"></${icon_tag}>` : icon;
                         }},
@@ -262,7 +262,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
                 this.webDavClient = null;
                 let reloadButton = html`<button class="button"
                             title="${i18n.t('nextcloud-file-picker.refresh-nextcloud-file-picker')}"
-                            @click="${async () => { this.openFilePicker(); } }"><vpu-icon name="reload"></button>`;
+                            @click="${async () => { this.openFilePicker(); } }"><dbp-icon name="reload"></button>`;
                 this.statusText = reloadButton;
         });
 
@@ -290,7 +290,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
 
                 // send event
                 const data = {"file": file, "data": fileData};
-                const event = new CustomEvent("vpu-nextcloud-file-picker-file-downloaded",
+                const event = new CustomEvent("dbp-nextcloud-file-picker-file-downloaded",
                     { "detail": data, bubbles: true, composed: true });
                 this.dispatchEvent(event);
 
@@ -320,7 +320,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
      */
     getBreadcrumb() {
         let htmlpath = [];
-        htmlpath[0] =  html`<a @click="${() => { this.loadDirectory("/"); }}" title="${i18n.t('nextcloud-file-picker.folder-home')}"><vpu-icon name="home"></vpu-icon> ${this.nextcloudName}</a>`;
+        htmlpath[0] =  html`<a @click="${() => { this.loadDirectory("/"); }}" title="${i18n.t('nextcloud-file-picker.folder-home')}"><dbp-icon name="home"></dbp-icon> ${this.nextcloudName}</a>`;
         const directories = this.directoryPath.split('/');
         if(directories[1] === "")
         {
@@ -530,7 +530,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
     }
 
     render() {
-        const tabulatorCss = commonUtils.getAssetURL('local/vpu-file-source/tabulator-tables/css/tabulator.min.css');
+        const tabulatorCss = commonUtils.getAssetURL('local/dbp-file-source/tabulator-tables/css/tabulator.min.css');
         console.log("tabulatorCss", tabulatorCss);
 
         return html`
@@ -539,7 +539,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
                 <div class="nextcloud-header">
                     <button class="button is-small ${classMap({hidden: !this.isPickerActive})}"
                         title="${i18n.t('nextcloud-file-picker.folder-up')}"
-                        @click="${() => { this.loadDirectory(this.getParentDirectoryPath()); }}"><vpu-icon name="arrow-left"></vpu-icon></button>
+                        @click="${() => { this.loadDirectory(this.getParentDirectoryPath()); }}"><dbp-icon name="arrow-left"></dbp-icon></button>
                     <div class="nextcloud-logo ${classMap({"nextcloud-logo-sm": this.isPickerActive})}">
                          ${this.getCloudLogo()}
                     </div>
@@ -578,7 +578,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
                         <button class="button select-button is-primary"
                                 @click="${() => { this.downloadFiles(this.tabulatorTable.getSelectedData()); }}">${i18n.t('nextcloud-file-picker.select-files')}</button>
                         <div class="block ${classMap({hidden: this.statusText === ""})}">
-                            <vpu-mini-spinner style="font-size: 0.7em"></vpu-mini-spinner>
+                            <dbp-mini-spinner style="font-size: 0.7em"></dbp-mini-spinner>
                             ${this.statusText}
                         </div>
                        

packages/file-handling/src/demo.js

@@ -3,7 +3,7 @@ import {html, LitElement} from 'lit-element';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {FileSource} from './file-source.js';
-import * as commonUtils from 'vpu-common/utils';
+import * as commonUtils from 'dbp-common/utils';
 
 class FileSourceDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
@@ -14,7 +14,7 @@ class FileSourceDemo extends ScopedElementsMixin(LitElement) {
 
     static get scopedElements() {
         return {
-          'vpu-file-source': FileSource,
+          'dbp-file-source': FileSource,
         };
     }
 
@@ -29,9 +29,9 @@ class FileSourceDemo extends ScopedElementsMixin(LitElement) {
         super.connectedCallback();
 
         this.updateComplete.then(() => {
-            this.shadowRoot.querySelectorAll('vpu-file-source')
+            this.shadowRoot.querySelectorAll('dbp-file-source')
                 .forEach(element => {
-                    element.addEventListener('vpu-file-source-file-finished', this.addLogEntry.bind(this));
+                    element.addEventListener('dbp-file-source-file-finished', this.addLogEntry.bind(this));
                 });
         });
     }
@@ -57,7 +57,7 @@ class FileSourceDemo extends ScopedElementsMixin(LitElement) {
     render() {
         return html`
             <style>
-                vpu-file-source.clean {
+                dbp-file-source.clean {
                     --FUBorderWidth: initial;
                     --FUBorderStyle: initial;
                     --FUBorderColor: initial;
@@ -67,7 +67,7 @@ class FileSourceDemo extends ScopedElementsMixin(LitElement) {
                     --FUPadding: initial;
                     --FUWidth: initial;
                 }
-                vpu-file-source.opt {
+                dbp-file-source.opt {
                     --FUBorder: 2px solid blue;
                 }
             </style>
@@ -80,20 +80,20 @@ class FileSourceDemo extends ScopedElementsMixin(LitElement) {
                 <div class="content">
                     <h2 class="subtitle">Send files via event</h2>
                     <p>There is no restriction for a specific file type:</p>
-                    <vpu-file-source lang="de" url="${this.url}" allowed-mime-types="*/*"></vpu-file-source>
+                    <dbp-file-source lang="de" url="${this.url}" allowed-mime-types="*/*"></dbp-file-source>
                     <p>Only images are allowed here (JPG, PNG, GIF, TIF, ...):</p>
-                    <vpu-file-source lang="de" url="${this.url}" allowed-mime-types="image/*"
-                        text="Abgabe nur für Bilder "></vpu-file-source>
+                    <dbp-file-source lang="de" url="${this.url}" allowed-mime-types="image/*"
+                        text="Abgabe nur für Bilder "></dbp-file-source>
                     <p>This is for PDF only:</p>
-                    <vpu-file-source lang="de" url="${this.url}" allowed-mime-types="application/pdf"
-                        text="Einreichung als PDF" button-label="PDF auswählen"></vpu-file-source>
+                    <dbp-file-source lang="de" url="${this.url}" allowed-mime-types="application/pdf"
+                        text="Einreichung als PDF" button-label="PDF auswählen"></dbp-file-source>
                      <p>Text and images (JPG, PNG, GIF, TIF, ...) :</p>
-                    <vpu-file-source lang="de" url="${this.url}" allowed-mime-types="text/plain,image/*"
-                        text="Abgabe für Text und Bilder "></vpu-file-source>
+                    <dbp-file-source lang="de" url="${this.url}" allowed-mime-types="text/plain,image/*"
+                        text="Abgabe für Text und Bilder "></dbp-file-source>
                </div>
             </section>
         `;
     }
 }
 
-commonUtils.defineCustomElement('vpu-file-source-demo', FileSourceDemo);
+commonUtils.defineCustomElement('dbp-file-source-demo', FileSourceDemo);

packages/file-handling/src/file-sink.js

 import {i18n} from './i18n';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
-import VPULitElement from 'vpu-common/vpu-lit-element';
-import * as commonUtils from "vpu-common/utils";
-import {Icon, MiniSpinner} from 'vpu-common';
-import * as commonStyles from 'vpu-common/styles';
-import {NextcloudFilePicker} from "./vpu-nextcloud-file-picker";
+import DBPLitElement from 'dbp-common/dbp-lit-element';
+import * as commonUtils from "dbp-common/utils";
+import {Icon, MiniSpinner} from 'dbp-common';
+import * as commonStyles from 'dbp-common/styles';
+import {NextcloudFilePicker} from "./dbp-nextcloud-file-picker";
 import {classMap} from 'lit-html/directives/class-map.js';
 import FileSaver from 'file-saver';
 import MicroModal from "./micromodal.es";
@@ -14,7 +14,7 @@ import MicroModal from "./micromodal.es";
 /**
  * FileSink web component
  */
-export class FileSink extends ScopedElementsMixin(VPULitElement) {
+export class FileSink extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
         this.lang = 'de';
@@ -31,9 +31,9 @@ export class FileSink extends ScopedElementsMixin(VPULitElement) {
 
     static get scopedElements() {
         return {
-            'vpu-icon': Icon,
-            'vpu-mini-spinner': MiniSpinner,
-            'vpu-nextcloud-file-picker': NextcloudFilePicker,
+            'dbp-icon': Icon,
+            'dbp-mini-spinner': MiniSpinner,
+            'dbp-nextcloud-file-picker': NextcloudFilePicker,
         };
     }
 
@@ -158,12 +158,12 @@ export class FileSink extends ScopedElementsMixin(VPULitElement) {
                             <div title="${i18n.t('file-sink.nav-local')}"
                                  @click="${() => { this.activeDestination = "local"; }}"
                                  class="${classMap({"active": this.activeDestination === "local", hidden: !this.hasEnabledDestination("local")})}">
-                                <vpu-icon class="nav-icon" name="laptop"></vpu-icon>
+                                <dbp-icon class="nav-icon" name="laptop"></dbp-icon>
                             </div>
                             <div title="Nextcloud"
                                  @click="${() => { this.activeDestination = "nextcloud"; }}"
                                  class="${classMap({"active": this.activeDestination === "nextcloud", hidden: !this.hasEnabledDestination("nextcloud")})}">
-                                <vpu-icon class="nav-icon" name="cloud"></vpu-icon>
+                                <dbp-icon class="nav-icon" name="cloud"></dbp-icon>
                             </div>
                         </nav>
                         <main class="modal-content" id="modal-picker-content">
@@ -181,7 +181,7 @@ export class FileSink extends ScopedElementsMixin(VPULitElement) {
                                 </div>
                             </div>
                             <div class="source-main ${classMap({"hidden": this.activeDestination !== "nextcloud"})}">
-                                <vpu-nextcloud-file-picker id="nextcloud-file-picker"
+                                <dbp-nextcloud-file-picker id="nextcloud-file-picker"
                                                            class="${classMap({hidden: this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}"
                                                            directories-only
                                                            max-selected-items="1"
@@ -190,9 +190,9 @@ export class FileSink extends ScopedElementsMixin(VPULitElement) {
                                                            lang="${this.lang}"
                                                            auth-url="${this.nextcloudAuthUrl}"
                                                            web-dav-url="${this.nextcloudWebDavUrl}"
-                                                           @vpu-nextcloud-file-picker-file-downloaded="${(event) => {
+                                                           @dbp-nextcloud-file-picker-file-downloaded="${(event) => {
                                                                this.uploadToNextcloud(event.detail.file);
-                                                           }}"></vpu-nextcloud-file-picker>
+                                                           }}"></dbp-nextcloud-file-picker>
                             </div>
                         </main>
                     </div>

packages/file-handling/src/file-source.js

 import {i18n} from './i18n';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
-import VPULitElement from 'vpu-common/vpu-lit-element';
-import * as commonUtils from "vpu-common/utils";
-import {Icon, MiniSpinner} from 'vpu-common';
-import * as commonStyles from 'vpu-common/styles';
-import {NextcloudFilePicker} from "./vpu-nextcloud-file-picker";
+import DBPLitElement from 'dbp-common/dbp-lit-element';
+import * as commonUtils from "dbp-common/utils";
+import {Icon, MiniSpinner} from 'dbp-common';
+import * as commonStyles from 'dbp-common/styles';
+import {NextcloudFilePicker} from "./dbp-nextcloud-file-picker";
 import {classMap} from 'lit-html/directives/class-map.js';
 import MicroModal from './micromodal.es'
 
@@ -30,7 +30,7 @@ function mimeTypesToAccept(mimeTypes) {
 /**
  * FileSource web component
  */
-export class FileSource extends ScopedElementsMixin(VPULitElement) {
+export class FileSource extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
         this.lang = 'de';
@@ -51,9 +51,9 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
 
     static get scopedElements() {
         return {
-            'vpu-icon': Icon,
-            'vpu-mini-spinner': MiniSpinner,
-            'vpu-nextcloud-file-picker': NextcloudFilePicker,
+            'dbp-icon': Icon,
+            'dbp-mini-spinner': MiniSpinner,
+            'dbp-nextcloud-file-picker': NextcloudFilePicker,
         };
     }
 
@@ -169,7 +169,7 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
      */
     async handleFiles(files) {
         console.log('handleFiles: files.length = ' + files.length);
-        // this.dispatchEvent(new CustomEvent("vpu-file-source-selection-start",
+        // this.dispatchEvent(new CustomEvent("dbp-file-source-selection-start",
         //     { "detail": {}, bubbles: true, composed: true }));
 
         await commonUtils.asyncArrayForEach(files, async (file) => {
@@ -192,7 +192,7 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
             await this.sendFileEvent(file);
         });
 
-        // this.dispatchEvent(new CustomEvent("vpu-file-source-selection-finished",
+        // this.dispatchEvent(new CustomEvent("dbp-file-source-selection-finished",
         //     { "detail": {}, bubbles: true, composed: true }));
 
         this.closeDialog();
@@ -203,7 +203,7 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
      */
     sendFileEvent(file) {
         const data = {"file": file};
-        const event = new CustomEvent("vpu-file-source-file-selected", { "detail": data, bubbles: true, composed: true });
+        const event = new CustomEvent("dbp-file-source-file-selected", { "detail": data, bubbles: true, composed: true });
         this.dispatchEvent(event);
     }
 
@@ -302,7 +302,7 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
             data.file = file;
         }
 
-        const event = new CustomEvent("vpu-file-source-file-finished", { "detail": data, bubbles: true, composed: true });
+        const event = new CustomEvent("dbp-file-source-file-finished", { "detail": data, bubbles: true, composed: true });
         this.dispatchEvent(event);
     }
 
@@ -392,12 +392,12 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
                             <div title="${i18n.t('file-source.nav-local')}"
                                  @click="${() => { this.activeSource = "local"; }}"
                                  class="${classMap({"active": this.activeSource === "local", hidden: !this.hasEnabledSource("local")})}">
-                                <vpu-icon class="nav-icon" name="laptop"></vpu-icon>
+                                <dbp-icon class="nav-icon" name="laptop"></dbp-icon>
                             </div>
                             <div title="Nextcloud"
                                  @click="${() => { this.activeSource = "nextcloud"; }}"
                                  class="${classMap({"active": this.activeSource === "nextcloud", hidden: !this.hasEnabledSource("nextcloud")})}">
-                                <vpu-icon class="nav-icon" name="cloud"></vpu-icon>
+                                <dbp-icon class="nav-icon" name="cloud"></dbp-icon>
                             </div>
                         </nav>
                         <main class="modal-content" id="modal-picker-content">
@@ -419,7 +419,7 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
                                 </div>
                             </div>
                             <div class="source-main ${classMap({"hidden": this.activeSource !== "nextcloud"})}">
-                                <vpu-nextcloud-file-picker id="nextcloud-file-picker"
+                                <dbp-nextcloud-file-picker id="nextcloud-file-picker"
                                        class="${classMap({hidden: this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}"
                                        ?disabled="${this.disabled}"
                                        lang="${this.lang}"
@@ -427,9 +427,9 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
                                        web-dav-url="${this.nextcloudWebDavUrl}"
                                        nextcloud-name="${this.nextcloudName}"
                                        allowed-mime-types="${this.allowedMimeTypes}"
-                                       @vpu-nextcloud-file-picker-file-downloaded="${(event) => {
+                                       @dbp-nextcloud-file-picker-file-downloaded="${(event) => {
                                     this.sendFileEvent(event.detail.file);
-                                }}"></vpu-nextcloud-file-picker>
+                                }}"></dbp-nextcloud-file-picker>
                             </div>
                         </main>
                     </div>

packages/file-handling/src/i18n.js

-import {createInstance} from 'vpu-common/i18next.js';
+import {createInstance} from 'dbp-common/i18next.js';
 
 import de from './i18n/de/translation.json';
 import en from './i18n/en/translation.json';

packages/file-handling/src/vpu-file-sink.js

-import * as commonUtils from "vpu-common/utils";
-import {FileSink} from './file-sink';
-
-commonUtils.defineCustomElement('vpu-file-sink', FileSink);

packages/file-handling/src/vpu-file-source.js

-import * as commonUtils from "vpu-common/utils";
-import {FileSource} from './file-source';
-
-commonUtils.defineCustomElement('vpu-file-source', FileSource);

packages/file-handling/test/unit.js

-import '../src/vpu-file-source';
+import '../src/dbp-file-source';
 import '../src/demo';
 
-describe('vpu-file-source basics', () => {
+describe('dbp-file-source basics', () => {
   let node;
 
   beforeEach(async () => {
-    node = document.createElement('vpu-file-source');
+    node = document.createElement('dbp-file-source');
     document.body.appendChild(node);
     await node.updateComplete;
   });
@@ -19,11 +19,11 @@ describe('vpu-file-source basics', () => {
   });
 });
 
-describe('vpu-file-source demo', () => {
+describe('dbp-file-source demo', () => {
   let node;
 
   beforeEach(async () => {
-    node = document.createElement('vpu-file-source-demo');
+    node = document.createElement('dbp-file-source-demo');
     document.body.appendChild(node);
     await node.updateComplete;
   });