packages/auth/src/i18n/en/translation.json

 {
     "login": "Login",
+    "login-failed": "Communication with the login server failed",
     "logout": "Logout"
 }

packages/common/components.js

@@ -7,6 +7,7 @@ import {
     MiniSpinner,
     Spinner,
     Translated,
+    Translation
 } from './index';
 
 commonUtils.defineCustomElement('dbp-mini-spinner', MiniSpinner);
@@ -16,3 +17,4 @@ commonUtils.defineCustomElement('dbp-button', Button);
 commonUtils.defineCustomElement('dbp-loading-button', LoadingButton);
 commonUtils.defineCustomElement('dbp-inline-notification', InlineNotification);
 commonUtils.defineCustomElement('dbp-translated', Translated);
+commonUtils.defineCustomElement('dbp-translation', Translation);

packages/common/dbp-common-demo.js

@@ -12,14 +12,18 @@ import {
     Spinner,
     InlineNotification,
     Translated,
+    Translation,
 } from './index.js';
 
+
+
 export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
         super();
         this._i18n = createInstance();
         this.lang = this._i18n.language;
         this.noAuth = false;
+        this.langDir = '';
     }
 
     static get scopedElements() {
@@ -31,6 +35,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
             'dbp-loading-button': LoadingButton,
             'dbp-inline-notification': InlineNotification,
             'dbp-translated': Translated,
+            'dbp-translation': Translation
         };
 
         if (customElements.get('dbp-auth')) {
@@ -44,6 +49,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
         return {
             lang: {type: String},
             noAuth: {type: Boolean, attribute: 'no-auth'},
+            langDir: {type: String, attribute: 'lang-dir'},
         };
     }
 
@@ -113,7 +119,10 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
               `;
     }
 
-    buttonClickHandler() {
+    buttonClickHandler(e) {
+        // add class to button to end2end test if button was clicked
+        e.target.classList.add('button-clicked');
+
         setTimeout(() => {
             const scopedTagName = this.getScopedTagName('dbp-button');
             this.shadowRoot.querySelector(scopedTagName).stop();
@@ -294,6 +303,11 @@ html {
                             </div>
                         </dbp-translated>
                     </div>
+                    <div class="control" id="dbp-translation-demo">
+                        <dbp-translation key="toolkit-showcase" subscribe="lang, lang-dir"></dbp-translation>
+                        <dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-dir" unsafe></dbp-translation>
+                        <dbp-translation key="abc" subscribe="lang, lang-dir"></dbp-translation>
+                    </div>
                 </div>
             </section>
         `;

packages/common/dbp-lit-element.js

-import {AdapterLitElement} from './src/adapter-lit-element';
+import {AdapterLitElement} from './src/adapter-lit-element.js';
 
 export default class DBPLitElement extends AdapterLitElement {
     constructor() {
@@ -31,6 +31,12 @@ export default class DBPLitElement extends AdapterLitElement {
             : this.shadowRoot.querySelector(selector);
     }
 
+    _a(selector) {
+        return this.shadowRoot === null
+            ? this.querySelectorAll(selector)
+            : this.shadowRoot.querySelectorAll(selector);
+    }
+
     firstUpdated() {
         super.firstUpdated();
         this._renderDone = true;

packages/common/i18next.js

@@ -124,3 +124,35 @@ export function setOverrides(i18n, element, overrides) {
     }
     i18n.setDefaultNamespace(hasOverrides ? overrideNamespace : namespace);
 }
+
+/**
+ * Sets translation overrides for the given i18next instance. Any previously
+ * applied overrides will be removed first. So calling this with an empty overrides
+ * object is equal to removing all overrides.
+ * Expects overrides as promise and requests update after overrides have been set.
+ *
+ * @param {i18next.i18n} i18n - The i18next instance
+ * @param {HTMLElement} element - The element at which the overrides are targeted
+ * @param {object} overrides - The override data as promise
+ */
+export async function setOverridesByPromise(i18n, element, overrides) {
+    // We add a special namespace which gets used with priority and falls back
+    // to the original one. This way we an change the overrides at runtime
+    // and can even remove them.
+
+    // The scoped mixin saves the real tag name under data-tag-name
+    let tagName = ((element.dataset && element.dataset.tagName) || element.tagName).toLowerCase();
+    let namespace = i18n.options.fallbackNS;
+    let overrideNamespace = getOverrideNamespace(namespace);
+    let hasOverrides = false;
+    for (let lng of i18n.languages) {
+        overrides[lng] = await overrides[lng];
+        i18n.removeResourceBundle(lng, overrideNamespace);
+        if (overrides[lng] === undefined || overrides[lng][tagName] === undefined) continue;
+        let resources = overrides[lng][tagName];
+        hasOverrides = true;
+        i18n.addResourceBundle(lng, overrideNamespace, resources);
+    }
+    i18n.setDefaultNamespace(hasOverrides ? overrideNamespace : namespace);
+    element.requestUpdate();
+}

packages/common/index.js

@@ -6,6 +6,7 @@ import {Button, LoadingButton} from './src/button.js';
 import {Spinner} from './src/spinner.js';
 import {InlineNotification} from './src/inline-notification.js';
 import {Translated} from './src/translated';
+import {Translation} from './src/translation';
 import {AdapterLitElement} from './src/adapter-lit-element.js';
 
 export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
@@ -14,7 +15,7 @@ export {MiniSpinner};
 export {Button, LoadingButton};
 export {Spinner};
 export {InlineNotification};
-export {Translated};
+export {Translated, Translation};
 export * from './src/logger.js';
 export * from './src/utils.js';
 export {AdapterLitElement};

packages/common/package.json

 {
     "name": "@dbp-toolkit/common",
     "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/common",
-    "version": "0.3.1",
+    "version": "0.3.3",
     "module": "index.js",
     "license": "LGPL-2.1-or-later",
     "repository": {
@@ -11,7 +11,7 @@
     },
     "devDependencies": {
         "@esm-bundle/chai": "^4.2.0",
-        "@rollup/plugin-commonjs": "^21.0.0",
+        "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^13.0.0",
         "eslint": "^8.0.0",
@@ -21,7 +21,7 @@
         "karma-chrome-launcher": "^3.0.0",
         "karma-firefox-launcher": "^2.1.0",
         "karma-mocha": "^2.0.1",
-        "mocha": "^9.0.0",
+        "mocha": "^10.0.0",
         "playwright-core": "^1.20.2",
         "prettier": "^2.5.1",
         "rollup": "^2.33.3",

packages/common/src/button.js

@@ -20,6 +20,17 @@ export class Button extends ScopedElementsMixin(LitElement) {
         this.spinner = false;
         this.noSpinnerOnClick = false;
         this.disabled = false;
+
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1061240#c12
+        this.addEventListener('click', (e) => {
+            if (this.disabled) {
+                e.stopImmediatePropagation();
+            }
+
+            if (!this.noSpinnerOnClick) {
+                this.start();
+            }
+        });
     }
 
     static get scopedElements() {
@@ -42,12 +53,6 @@ export class Button extends ScopedElementsMixin(LitElement) {
         };
     }
 
-    clickHandler() {
-        if (!this.noSpinnerOnClick) {
-            this.start();
-        }
-    }
-
     start() {
         this.spinner = true;
         this.disabled = true;
@@ -77,7 +82,6 @@ export class Button extends ScopedElementsMixin(LitElement) {
     render() {
         return html`
             <button
-                @click="${this.clickHandler}"
                 class="button ${this.type}"
                 ?disabled="${this.disabled}">
                 ${this.value}

packages/common/src/i18n.js

-import {createInstance as _createInstance} from '../i18next.js';
+import {createInstance as _createInstance, setOverridesByPromise} from '../i18next.js';
 
 import de from './i18n/de/translation.json';
 import en from './i18n/en/translation.json';
@@ -6,3 +6,9 @@ import en from './i18n/en/translation.json';
 export function createInstance() {
     return _createInstance({en: en, de: de}, 'de', 'en');
 }
+
+export function createInstanceGivenResources(en, de) {
+    return _createInstance({en: en, de: de}, 'de', 'en');
+}
+
+export {setOverridesByPromise};

packages/common/src/icon.js

@@ -58,8 +58,11 @@ export class Icon extends LitElement {
                 background-color: currentColor;
                 mask-repeat: no-repeat;
                 mask-position: center;
+                mask-size: 100% 100%;
                 -webkit-mask-repeat: no-repeat;
                 -webkit-mask-position: center;
+                -webkit-mask-size: 100% 100%;
+                
             }
         `;
     }

packages/common/src/translation.js

+import {css, html} from 'lit';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import DBPLitElement from '../dbp-lit-element';
+import {createInstanceGivenResources, setOverridesByPromise} from './i18n.js';
+
+// global variable as cache for translations
+const translationCache = {};
+
+// fetches overrides for given language
+async function fetchOverridesByLanguage(overrides, lng) {
+  let result = await
+      fetch(overrides + lng +'/translation.json', {
+          headers: {'Content-Type': 'application/json'},
+      });
+  let json = await result.json();
+  return json;
+}
+
+// handles translation cache promises
+async function cacheOverrides(overridesFile, lng) {
+  // use global var as cache
+  if (translationCache[lng] === undefined) {
+    // get translation.json for each lang
+    let response = fetchOverridesByLanguage(overridesFile, lng);
+    translationCache[lng] = response;
+    return response;
+  } else {
+    return translationCache[lng];
+  }
+}
+
+export class Translation extends DBPLitElement {
+    constructor() {
+        super();
+        this.key = '';
+        this.lang = '';
+        this.interpolation = '';
+        this.langDir = '';
+        this.unsafe = false;
+    }
+
+    static get properties() {
+        return {
+            ...super.properties,
+            key: {type: String},
+            lang: {type: String},
+            interpolation: {type: Object, attribute: 'var'},
+            unsafe: {type: Boolean, attribute: 'unsafe'},
+            langDir: {type: String, attribute: 'lang-dir'},
+        };
+    }
+
+    static get styles() {
+        // language=css
+        return css`
+            .hidden {
+                display: none;
+            }
+        `;
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      // init objects with empty string as value for key
+      const de = {};
+      const en = {};
+      de[this.key] = "";
+      en[this.key] = "";
+
+      // create i18n instance with given translations
+      this._i18n = createInstanceGivenResources(en, de);
+
+      if (this.langDir) {
+        for(let lng of this._i18n.languages) {
+          cacheOverrides(this.langDir, lng);
+          setOverridesByPromise(this._i18n, this, translationCache);
+        }
+      }
+    }
+
+    update(changedProperties) {
+        let lang = this.lang;
+        changedProperties.forEach((oldValue, propName) => {
+            switch (propName) {
+                case 'lang':
+                    this._i18n.changeLanguage(lang);
+                    break;
+            }
+        });
+
+        super.update(changedProperties);
+    }
+
+    render() {
+        // request to i18n translation
+        const translation = (() => {
+          if (this.interpolation && this.unsafe)
+            return unsafeHTML(this._i18n.t(this.key, this.interpolation));
+          else if (this.interpolation)
+            return this._i18n.t(this.key, this.interpolation);
+          else
+            return this._i18n.t(this.key);
+        })();
+
+        // if translation == "" key was not found
+        let key = "";
+        if (translation != "") {
+          key = unsafeHTML("<!-- key: " + this.key + "-->");
+        } else {
+          key = unsafeHTML("<!-- key \"" + this.key + "\" not found! -->");
+        }
+
+        // load translation text
+        return html`
+            ${key}
+            ${translation}
+        `;
+    }
+}

packages/common/styles.js

@@ -15,10 +15,10 @@ export function getThemeCSS() {
                     var(--dbp-override-background, #ffffff
             );
             --dbp-content: 
-                    var(--dbp-override-content, #000000
+                    var(--dbp-override-content, #222120
             );
             --dbp-content-surface: 
-                    var(--dbp-override-content-surface, 
+                    var(--dbp-override-content-surface,
                     var(--dbp-content)
             );
             --dbp-on-content-surface: 
@@ -26,13 +26,13 @@ export function getThemeCSS() {
                     var(--dbp-background)
             );
             --dbp-border: 
-                    var(--dbp-override-border, 1px solid #000000
+                    var(--dbp-override-border, 1px solid #222120
             );
             --dbp-border-radius: 
                     var(--dbp-override-border-radius, 0px
             );
             --dbp-primary: 
-                    var(--dbp-override-primary,  #2a4491
+                    var(--dbp-override-primary,  #3775c1
             );
             --dbp-primary-surface:
                     var(--dbp-override-primary-surface, 
@@ -44,10 +44,10 @@ export function getThemeCSS() {
             );
             --dbp-primary-surface-border-color: 
                     var(--dbp-override-primary-surface-border-color, 
-                    var(--dbp-primary-surface)
+                    var(--dbp-primary)
             );
             --dbp-secondary: 
-                    var(--dbp-override-secondary, var(--dbp-content)
+                    var(--dbp-override-secondary, #222120
             );
             --dbp-secondary-surface:
                     var(--dbp-override-secondary-surface,
@@ -59,40 +59,40 @@ export function getThemeCSS() {
             );
             --dbp-secondary-surface-border-color: 
                     var(--dbp-override-secondary-surface-border-color,
-                    var(--dbp-secondary-surface)            
+                    var(--dbp-secondary)
             );
             --dbp-muted: 
                     var(--dbp-override-muted, #767676
             );
-            --dbp-muted-surface: 
+            --dbp-muted-surface:
                     var(--dbp-override-muted-surface,
                     var(--dbp-muted)
             );
-            --dbp-on-muted-surface: 
+            --dbp-on-muted-surface:
                     var(--dbp-override-on-muted-surface,
                     var(--dbp-on-content-surface)
             );
             --dbp-muted-surface-border-color:
                     var(--dbp-override-muted-surface-border-color,
-                    var(--dbp-muted-surface)
+                    var(--dbp-muted)
             );
-            --dbp-accent: 
-                    var(--dbp-override-accent, #c24f68
+            --dbp-accent:
+                    var(--dbp-override-accent, #9e1e4d
             );
-            --dbp-accent-surface: 
+            --dbp-accent-surface:
                     var(--dbp-override-accent-surface,
                     var(--dbp-accent)
             );
-            --dbp-on-accent-surface: 
+            --dbp-on-accent-surface:
                     var(--dbp-override-on-accent-surface,
                     var(--dbp-on-content-surface)
             );
             --dbp-accent-surface-border-color:
                     var(--dbp-override-accent-surface-border-color,
-                    var(--dbp-accent-surface)
+                    var(--dbp-accent)
             );
-            --dbp-info: var(
-                    --dbp-override-info, #2a4491
+            --dbp-info:
+                    var(--dbp-override-info, #38808a
             );
             --dbp-info-surface:
                     var(--dbp-override-info-surface,
@@ -104,10 +104,10 @@ export function getThemeCSS() {
             );
             --dbp-info-surface-border-color:
                     var(--dbp-override-info-surface-border-color,
-                    var(--dbp-info-surface)
+                    var(--dbp-info)
             );
-            --dbp-success: 
-                    var(--dbp-override-success, #188018
+            --dbp-success:
+                    var(--dbp-override-success, #338555
             );
             --dbp-success-surface:
                     var(--dbp-override-success-surface,
@@ -119,10 +119,10 @@ export function getThemeCSS() {
             );
             --dbp-success-surface-border-color:
                     var(--dbp-override-success-surface-border-color,
-                    var(--dbp-success-surface)
+                    var(--dbp-success)
             );
-            --dbp-warning: 
-                    var(--dbp-override-warning, #c15500
+            --dbp-warning:
+                    var(--dbp-override-warning, #bf8808
             );
             --dbp-warning-surface:
                     var(--dbp-override-warning-surface,
@@ -134,10 +134,10 @@ export function getThemeCSS() {
             );
             --dbp-warning-surface-border-color:
                     var(--dbp-override-warning-surface-border-color,
-                    var(--dbp-warning-surface)
+                    var(--dbp-warning)
             );
-            --dbp-danger: 
-                    var(--dbp-override-danger, #de3535
+            --dbp-danger:
+                    var(--dbp-override-danger, #cc3232
             );
             --dbp-danger-surface:
                     var(--dbp-override-danger-surface,
@@ -149,12 +149,12 @@ export function getThemeCSS() {
             );
             --dbp-danger-surface-border-color:
                     var(--dbp-override-danger-surface-border-color,
-                    var(--dbp-danger-surface)
+                    var(--dbp-danger)
             );
-            --dbp-hover-background-color: 
+            --dbp-hover-background-color:
                     var(--dbp-override-hover-background-color
             );
-            --dbp-hover-color: 
+            --dbp-hover-color:
                     var(--dbp-override-hover-color
             );
         }

packages/data-table-view/package.json

 {
     "name": "@dbp-toolkit/data-table-view",
     "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/data-table-view",
-    "version": "0.3.0",
+    "version": "0.3.1",
     "main": "src/index.js",
     "license": "LGPL-2.1-or-later",
     "repository": {
@@ -15,18 +15,18 @@
     },
     "devDependencies": {
         "@esm-bundle/chai": "^4.2.0",
-        "@rollup/plugin-commonjs": "^21.0.0",
+        "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^13.0.0",
-        "@rollup/plugin-url": "^6.0.0",
+        "@rollup/plugin-url": "^7.0.0",
         "eslint": "^8.0.0",
         "eslint-plugin-jsdoc": "^39.0.0",
-        "glob": "^7.1.6",
+        "glob": "^8.0.0",
         "i18next-parser": "^6.3.0",
         "karma": "^6.0.0",
         "karma-chrome-launcher": "^3.0.0",
         "karma-mocha": "^2.0.1",
-        "mocha": "^9.0.0",
+        "mocha": "^10.0.0",
         "playwright-core": "^1.20.2",
         "prettier": "^2.5.1",
         "rollup": "^2.33.3",
@@ -36,8 +36,8 @@
         "rollup-plugin-terser": "^7.0.2"
     },
     "dependencies": {
-        "@dbp-toolkit/auth": "^0.3.0",
-        "@dbp-toolkit/common": "^0.3.0",
+        "@dbp-toolkit/auth": "^0.3.1",
+        "@dbp-toolkit/common": "^0.3.3",
         "@open-wc/scoped-elements": "^2.1.0",
         "datatables.net-buttons": "^2.0.0",
         "datatables.net-buttons-dt": "^2.0.0",

packages/data-table-view/src/data-table-view.js

@@ -15,7 +15,7 @@ import {getIconSVGURL} from '@dbp-toolkit/common';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 import {name as pkgName} from './../package.json';
-import {AdapterLitElement} from '@dbp-toolkit/provider/src/adapter-lit-element';
+import {AdapterLitElement} from '@dbp-toolkit/common';
 
 dt(window, $);
 resp(window, $);

packages/file-handling/package.json

 {
     "name": "@dbp-toolkit/file-handling",
     "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/file-handling",
-    "version": "0.3.3",
+    "version": "0.3.4",
     "main": "src/index.js",
     "license": "LGPL-2.1-or-later",
     "repository": {
@@ -15,7 +15,7 @@
     },
     "devDependencies": {
         "@esm-bundle/chai": "^4.2.0",
-        "@rollup/plugin-commonjs": "^21.0.0",
+        "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-json": "^4.0.2",
         "@rollup/plugin-node-resolve": "^13.0.0",
         "eslint": "^8.0.0",
@@ -25,7 +25,7 @@
         "karma-chrome-launcher": "^3.0.0",
         "karma-firefox-launcher": "^2.1.0",
         "karma-mocha": "^2.0.0",
-        "mocha": "^9.0.0",
+        "mocha": "^10.0.0",
         "playwright-core": "^1.20.2",
         "prettier": "^2.5.1",
         "rollup": "^2.33.3",
@@ -35,7 +35,7 @@
         "rollup-plugin-terser": "^7.0.2"
     },
     "dependencies": {
-        "@dbp-toolkit/common": "^0.3.0",
+        "@dbp-toolkit/common": "^0.3.3",
         "@open-wc/scoped-elements": "^2.1.0",
         "file-saver": "^2.0.2",
         "i18next": "^21.4.2",

packages/file-handling/src/clipboard.js

@@ -9,7 +9,7 @@ import {TabulatorFull as Tabulator} from 'tabulator-tables';
 import {humanFileSize} from '@dbp-toolkit/common/i18next';
 import {name as pkgName} from '@dbp-toolkit/file-handling/package.json';
 import {send} from '@dbp-toolkit/common/notification';
-import {AdapterLitElement} from '@dbp-toolkit/provider/src/adapter-lit-element';
+import {AdapterLitElement} from '@dbp-toolkit/common';
 import {classMap} from 'lit/directives/class-map.js';
 
 const MODE_TABLE_ONLY = 'table-only';
@@ -237,7 +237,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
             this.tabulatorTable.on("tableBuilt", this.tableBuiltFunction.bind(this));
             this.tabulatorTable.on("rowClick", this.rowClickFunction.bind(this));
             this.tabulatorTable.on("rowSelectionChanged", this.rowSelectionChangedFunction.bind(this));
-            this.tabulatorTable.on("dataLoaded", this.dataLoadedFunction.bind(this));
+            this.tabulatorTable.on("dataChanged", this.dataChangedFunction.bind(this));
         });
 
         //Register only one beforeunload Event for the clipboard warning
@@ -292,7 +292,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
         }
     }
 
-    dataLoadedFunction() {
+    dataChangedFunction() {
         if (this.tabulatorTable !== null) {
 
             const that = this;
@@ -328,7 +328,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
         this.tabulatorTable.off("tableBuilt");
         this.tabulatorTable.off("rowClick");
         this.tabulatorTable.off("rowSelectionChanged");
-        this.tabulatorTable.off("dataLoaded");
+        this.tabulatorTable.off("dataChanged");
     }
 
     /**
@@ -409,7 +409,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
 
     /**
      * If clipboard files and the tabulator table exists, then clear the table and sets the new data
-     *
+     *s
      */
     generateClipboardTable() {
         this.numberOfSelectedFiles = 0;
@@ -428,10 +428,20 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
             this.tabulatorTable.clearData();
             this.tabulatorTable.setData(data);
 
+            if(this.clipboardFiles.files.length > 0) {
+                let placeholders = this._a(".tabulator-placeholder");
+                if(placeholders)
+                    placeholders.forEach(placeholder => placeholder.style.display = "none");
+            } else {
+                let placeholders = this._a(".tabulator-placeholder");
+                if(placeholders)
+                    placeholders.forEach(placeholder => placeholder.style.display = "inherit");
+            }
         }
         if (this._('#select_all')) {
             this._('#select_all').checked = false;
         }
+
     }
 
     /**
@@ -442,7 +452,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
     async sendClipboardFiles(files) {
         const i18n = this._i18n;
         for (let i = 0; i < files.length; i++) {
-            await this.sendFileEvent(files[i].file);
+            await this.sendFileEvent(files[i].file, files.length);
         }
         this.tabulatorTable.deselectRow();
         send({
@@ -453,8 +463,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
         });
     }
 
-    async sendFileEvent(file) {
-        const data = {file: file, data: file};
+    async sendFileEvent(file, maxFiles) {
+        const data = {file: file, data: file, maxUpload: maxFiles};
         const event = new CustomEvent('dbp-clipboard-file-picker-file-downloaded', {
             detail: data,
             bubbles: true,
@@ -517,6 +527,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
         } else {
             files = files.concat(event.detail.file);
         }
+
         this.filesToSave = files;
         if (files && files.length !== 0) {
             data = {files: files};
@@ -908,24 +919,6 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
                 justify-content: space-between;
             }
 
-            .tabulator .tabulator-tableHolder .tabulator-placeholder span {
-                margin: initial;
-            }
-/*
-            .checkmark {
-                height: 20px;
-                width: 20px;
-                left: 11px;
-                top: 4px;
-            }
-
-            .button-container .checkmark::after {
-                left: 8px;
-                top: 3px;
-                width: 4px;
-                height: 11px;
-            }*/
-
             .table-wrapper {
                 position: relative;
             }
@@ -987,22 +980,6 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
                     display: block;
                 }
 
-            /*    .checkmark {
-                    height: 25px;
-                    width: 25px;
-                    left: 9px;
-                    top: 2px;
-                }
-
-
-                .button-container .checkmark::after {
-                    left: 8px;
-                    top: 2px;
-                    width: 8px;
-                    height: 15px;
-                }
-*/
-
                 .btn-flex-container-mobile {
                     flex-direction: column;
                 }

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

@@ -548,7 +548,7 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
                     nextcloud-file-url="${this.nextcloudFileURL}"
                     allowed-mime-types="${this.allowedMimeTypes}"
                     @dbp-clipboard-file-picker-file-downloaded="${(event) => {
-                        this.sendFileEvent(event.detail.file);
+                        this.sendFileEvent(event.detail.file, event.detail.maxUpload);
                     }}"></dbp-clipboard>
             `;
         }

packages/file-handling/src/nextcloud-file-picker.js

@@ -1422,6 +1422,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                     `;
                     this.loading = false;
                     this.statusText = reloadButton;
+                    this.sendSetPropertyEvent('analytics-event', {
+                        category: 'FileHandlingNextcloud',
+                        action: 'WebdavClientError',
+                    });
                 }
             });
     }