packages/common/dbp-common-demo.js

-import {i18n} from './i18n.js';
+import {createInstance} from './src/i18n.js';
 import {css, html, LitElement} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from './utils.js';
@@ -8,7 +8,8 @@ import {getIconCSS, Icon, MiniSpinner, Button, LoadingButton, Spinner, InlineNot
 export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.noAuth = false;
     }
 
@@ -39,7 +40,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
 
     connectedCallback() {
         super.connectedCallback();
-        i18n.changeLanguage(this.lang);
+        this._i18n.changeLanguage(this.lang);
 
         this.updateComplete.then(()=>{
         });

packages/common/error.js

 import {send as notify} from './notification';
-import {i18n} from "./i18n";
+import {createInstance} from "./src/i18n";
 
 /**
  * Escapes html
@@ -39,14 +39,17 @@ export const errorMixin = {
      * @param textStatus
      * @param errorThrown
      * @param icon
+     * @param lang
      */
-    handleXhrError(jqXHR, textStatus, errorThrown, icon = "sad") {
+    handleXhrError(jqXHR, textStatus, errorThrown, icon = "sad", lang = "de") {
         // return if user aborted the request
         if (textStatus === "abort") {
             return;
         }
 
         let body;
+        const i18n = createInstance();
+        i18n.changeLanguage(lang);
 
         if (jqXHR.responseJSON !== undefined && jqXHR.responseJSON["hydra:description"] !== undefined) {
             // response is a JSON-LD
@@ -86,14 +89,17 @@ export const errorMixin = {
      * @param error
      * @param summary
      * @param icon
+     * @param lang
      */
-    handleFetchError: async function (error, summary = "", icon = "sad") {
+    handleFetchError: async function (error, summary = "", icon = "sad", lang = "de") {
         // return if user aborted the request
         if (error.name === "AbortError") {
             return;
         }
 
         let body;
+        const i18n = createInstance();
+        i18n.changeLanguage(lang);
 
         try {
             await error.json().then((json) => {

packages/common/i18next-scanner.config.js

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

packages/common/i18next.js

@@ -100,20 +100,24 @@ export function createInstance(languages, lng, fallback, namespace) {
  * object is equal to removing all overrides.
  *
  * @param {i18next.i18n} i18n - The i18next instance
- * @param {object} overrides - The override data in the following format: "{language: {namespace: {key: value}}}"
+ * @param {HTMLElement} element - The element at which the overrides are targeted
+ * @param {object} overrides - The override data in the following format: "{language: {tag-name: {key: value}}}"
  */
-export function setOverrides(i18n, overrides) {
+export function setOverrides(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) {
         i18n.removeResourceBundle(lng, overrideNamespace);
-        if (overrides[lng] === undefined || overrides[lng][namespace] === undefined)
+        if (overrides[lng] === undefined || overrides[lng][tagName] === undefined)
             continue;
-        let resources = overrides[lng][namespace];
+        let resources = overrides[lng][tagName];
         hasOverrides = true;
         i18n.addResourceBundle(lng, overrideNamespace, resources);
     }

packages/common/jsonld.js

 import {send as notify} from './notification';
 import * as utils from "./utils";
-import {i18n} from "./i18n";
+import {createInstance} from "./src/i18n";
 
 export default class JSONLD {
     constructor(baseApiUrl, entities) {
@@ -43,9 +43,7 @@ export default class JSONLD {
     }
 
     static _initialize(apiUrl, successFnc, failureFnc, lang = 'de') {
-        if (lang !== 'de') {
-            i18n.changeLanguage(lang);
-        }
+        JSONLD._i18n.changeLanguage(lang);
 
         // if init api call was already successfully finished execute the success function
         if (JSONLD.instances[apiUrl] !== undefined) {
@@ -72,6 +70,7 @@ export default class JSONLD {
 
     static _doInitialization(apiUrl) {
         const xhr = new XMLHttpRequest();
+        const i18n = JSONLD._i18n;
         xhr.open("GET", apiUrl, true);
 
         xhr.onreadystatechange = function () {
@@ -170,6 +169,7 @@ export default class JSONLD {
      * @param message
      */
     static _executeFailureFunctions(apiUrl, message = "") {
+        const i18n = JSONLD._i18n;
         if (JSONLD.failureFunctions[apiUrl] !== undefined) {
             for (const fnc of JSONLD.failureFunctions[apiUrl]) {
                 if (typeof fnc == 'function') {
@@ -297,6 +297,7 @@ export default class JSONLD {
     }
 }
 
+JSONLD._i18n = createInstance();
 JSONLD.instances = {};
 JSONLD.successFunctions = {};
 JSONLD.failureFunctions = {};

packages/common/package.json

@@ -25,9 +25,11 @@
     "rollup": "^2.33.3",
     "rollup-plugin-copy": "^3.1.0",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-serve": "^1.0.1"
+    "rollup-plugin-serve": "^1.0.1",
+    "i18next-scanner": "^3.0.0"
   },
   "scripts": {
+    "i18next": "i18next-scanner",
     "clean": "rm dist/*",
     "build": "rollup -c",
     "build-test": "rollup -c --environment BUILD:test",

packages/common/i18n.js → packages/common/src/i18n.js

-import {createInstance} from './i18next.js';
+import {createInstance as _createInstance} from '../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
+export function createInstance() {
+    return _createInstance({en: en, de: de}, 'de', 'en');
+}
\ No newline at end of file

packages/common/test/i18next.js

@@ -49,22 +49,23 @@ suite('i18next', () => {
     });
 
     test('overrides', () => {
-        let namespace = 'ns';
+        let namespace = 'some-ns';
+        let element = document.createElement(namespace);
         var inst = i18next.createInstance({en:  {foo: 'bar'}}, 'en', 'en', namespace);
         assert.equal(inst.t('foo'), 'bar');
         assert.equal(inst.t('quux'), 'quux');
-        i18next.setOverrides(inst, {en: {[namespace]: {quux: 'bla'}}});
+        i18next.setOverrides(inst, element, {en: {[namespace]: {quux: 'bla'}}});
         assert.equal(inst.t('quux'), 'bla');
         assert.equal(inst.t('foo'), 'bar');
-        i18next.setOverrides(inst, {en: {[namespace]: {}}});
+        i18next.setOverrides(inst, element, {en: {[namespace]: {}}});
         assert.equal(inst.t('quux'), 'quux');
         assert.equal(inst.t('foo'), 'bar');
-        i18next.setOverrides(inst, {en: {[namespace]: {foo: 'hmm'}}});
+        i18next.setOverrides(inst, element, {en: {[namespace]: {foo: 'hmm'}}});
         assert.equal(inst.t('foo'), 'hmm');
-        i18next.setOverrides(inst, {en: {[namespace]: {quux: 'bla'}}});
+        i18next.setOverrides(inst, element, {en: {[namespace]: {quux: 'bla'}}});
         assert.equal(inst.t('foo'), 'bar');
         assert.equal(inst.t('quux'), 'bla');
-        i18next.setOverrides(inst, {});
+        i18next.setOverrides(inst, element, {});
         assert.equal(inst.t('foo'), 'bar');
         assert.equal(inst.t('quux'), 'quux');
     });

packages/data-table-view/i18next-scanner.config.js

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

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

@@ -7,7 +7,7 @@ import bttn from 'datatables.net-buttons-dt';
 import bttn2 from 'datatables.net-buttons';
 import bttnHtml5 from 'datatables.net-buttons/js/buttons.html5.js';
 import bttnPrint from 'datatables.net-buttons/js/buttons.print.js';
-import {i18n} from './i18n';
+import {createInstance} from './i18n';
 import {css, html, unsafeCSS} from 'lit-element';
 import de from '../assets/datatables/i18n/German';
 import en from '../assets/datatables/i18n/English';
@@ -28,7 +28,8 @@ bttnPrint(window, $);
 export class DataTableView extends AdapterLitElement {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         // datatable properties
         this.table = null;
         this.responsive = null;
@@ -100,6 +101,7 @@ export class DataTableView extends AdapterLitElement {
 
     set_datatable(data, languageChange = false) {
         const lang_obj = this.lang === 'de' ? de : en;
+        const i18n = this._i18n;
 
         if (typeof this.columns === 'undefined' || !this.columns.length) {
             if (data.length)
@@ -229,7 +231,7 @@ export class DataTableView extends AdapterLitElement {
 
         changedProperties.forEach((oldValue, propName) => {
             if (propName === "lang") {
-                i18n.changeLanguage(this.lang).catch(e => { console.log(e);});
+                this._i18n.changeLanguage(this.lang).catch(e => { console.log(e);});
                 languageChange = true;
             }
         });

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

 import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
 import {DataTableView} from './data-table-view.js';
-import {i18n} from './i18n';
+import {createInstance} from './i18n';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from '@dbp-toolkit/common/utils';
@@ -10,7 +10,8 @@ import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
 export class DataTableViewDemo extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         this.noAuth = false;
     }
@@ -100,7 +101,7 @@ export class DataTableViewDemo extends ScopedElementsMixin(DBPLitElement) {
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             if (propName === "lang") {
-                i18n.changeLanguage(this.lang);
+                this._i18n.changeLanguage(this.lang);
             }
         });
 

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

-import i18next from 'i18next';
+import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
 
 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};
+export function createInstance() {
+    return _createInstance({en: en, de: de}, 'de', 'en');
+}
\ No newline at end of file

packages/data-table-view/src/i18n/de/translation.json

@@ -3,4 +3,4 @@
   "export-excel": "Excel Export",
   "export-csv": "CSV Export",
   "column-search-placeholder": "Nach {{fieldName}} suchen"
-}
\ No newline at end of file
+}

packages/data-table-view/src/i18n/en/translation.json

@@ -3,4 +3,4 @@
   "export-excel": "Excel Export",
   "export-csv": "CSV Export",
   "column-search-placeholder": "Search for {{fieldName}}"
-}
\ No newline at end of file
+}

packages/file-handling/i18next-scanner.config.js

@@ -6,6 +6,7 @@ module.exports = {
     options: {
         debug: false,
         removeUnusedKeys: true,
+        func: {list: ['i18n.t', '_i18n.t']},
         lngs: ['en','de'],
         resource: {
             loadPath: 'src/i18n/{{lng}}/{{ns}}.json',

packages/file-handling/src/clipboard.js

-import {i18n} from './i18n';
+import {createInstance} from './i18n';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from '@dbp-toolkit/common/utils';
@@ -20,7 +20,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
 
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.allowedMimeTypes = '*/*';
         this.clipboardFiles = {files: ''};
         this.clipboardSelectBtnDisabled = true;
@@ -29,6 +30,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
         this.filesToSave = [];
         this.numberOfSelectedFiles = 0;
         this.enabledTargets = 'local';
+        this.countUploadFiles = 0;
+        this.buttonsDisabled = false;
 
         this.nextcloudWebAppPasswordURL = "";
         this.nextcloudWebDavURL = "";
@@ -56,11 +59,12 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
             ...super.properties,
             lang: { type: String },
             allowedMimeTypes: { type: String, attribute: 'allowed-mime-types' },
-            clipboardSelectBtnDisabled: { type: Boolean, attribute: true },
+            clipboardSelectBtnDisabled: { type: Boolean },
             clipboardFiles: {type: Object, attribute: 'clipboard-files' },
             filesToSave: {type: Array, attribute: 'files-to-save' },
             numberOfSelectedFiles: {type: Number, attribute: false },
             enabledTargets: {type: String, attribute: 'enabled-targets'},
+            buttonsDisabled: {type: Boolean },
 
             nextcloudWebAppPasswordURL: { type: String, attribute: 'nextcloud-auth-url' },
             nextcloudWebDavURL: { type: String, attribute: 'nextcloud-web-dav-url' },
@@ -78,18 +82,22 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
         return this.shadowRoot === null ? this.querySelector(selector) : this.shadowRoot.querySelector(selector);
     }
 
+    _a(selector) {
+        return this.shadowRoot === null ? this.querySelectorAll(selector) : this.shadowRoot.querySelectorAll(selector);
+    }
+
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case "lang":
-                    i18n.changeLanguage(this.lang);
+                    this._i18n.changeLanguage(this.lang);
                     break;
                 case "clipboardFiles":
                     this.generateClipboardTable();
+
                     break;
             }
         });
-
         super.update(changedProperties);
     }
 
@@ -102,17 +110,22 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
         }
     }
 
+    toggleCollapse(e) {
+        const table = this.tabulatorTable;
+        setTimeout(function() {
+            table.redraw();
+        }, 0);
+    }
 
 
     connectedCallback() {
+        const i18n = this._i18n;
         super.connectedCallback();
         const that = this;
         this.updateComplete.then(() => {
 
             // see: http://tabulator.info/docs/4.7
             this.tabulatorTable = new Tabulator(this._("#clipboard-content-table"), {//if you delete the wrapper around the table you need to set a heigh here
-                maxHeight:"100%",
-                height:"100%",
                 layout: "fitColumns",
                 selectable: true,
                 selectableRangeMode: "drag",
@@ -324,6 +337,17 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
             if (this.tabulatorTable !== null) {
                 this.tabulatorTable.clearData();
                 this.tabulatorTable.setData(data);
+
+                const that = this;
+                setTimeout(function(){
+                    if (that._('.tabulator-responsive-collapse-toggle-open')) {
+                        that._a('.tabulator-responsive-collapse-toggle-open').forEach(element => element.addEventListener("click", that.toggleCollapse.bind(that)));
+                    }
+
+                    if (that._('.tabulator-responsive-collapse-toggle-close')) {
+                        that._a('.tabulator-responsive-collapse-toggle-close').forEach(element => element.addEventListener("click", that.toggleCollapse.bind(that)));
+                    }
+                }, 0);
             }
         }
         if (this._("#select_all")) {
@@ -337,6 +361,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
      * @param files
      */
     async sendClipboardFiles(files) {
+        const i18n = this._i18n;
         for (let i = 0; i < files.length; i ++) {
             await this.sendFileEvent(files[i].file);
         }
@@ -363,6 +388,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
      * @param event
      */
     onReceiveBeforeUnload(event) {
+        const i18n = this._i18n;
 
         // we don't need to stop if there are no signed files
         if (this.clipboardFiles.files.length === 0) {
@@ -417,6 +443,14 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
                 {  bubbles: true, composed: true });
             this.dispatchEvent(event);
         }
+
+        this.countUploadFiles += 1;
+        if (this.countUploadFiles === event.detail.maxUpload) {
+            this.buttonsDisabled = false;
+            this.countUploadFiles = 0;
+        } else {
+            this.buttonsDisabled = true;
+        }
     }
 
     /**
@@ -425,6 +459,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
      */
     saveFilesToClipboard()
     {
+        const i18n = this._i18n;
+
         //save it
         let data = {};
         let files = [];
@@ -455,6 +491,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
      * @param event
      */
     finishedSaveFilesToClipboard(event) {
+        const i18n = this._i18n;
         send({
             "summary": i18n.t('clipboard.saved-files-title', {count: event.detail.count}),
             "body": i18n.t('clipboard.saved-files-body', {count: event.detail.count}),
@@ -491,6 +528,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
      *
      */
     clearClipboard() {
+        const i18n = this._i18n;
+
         if (this.tabulatorTable && this.tabulatorTable.getSelectedData().length > 0) {
             let count = this.tabulatorTable.getSelectedData().length;
             this.tabulatorTable.deleteRow(this.tabulatorTable.getSelectedRows());
@@ -526,12 +565,15 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
      * @returns {html}
      */
     getAdditionalButtons() {
+        const i18n = this._i18n;
         let buttonsAreDisabled = this.clipboardFiles.files.length === 0 ? true : this.clipboardSelectBtnDisabled;
+        buttonsAreDisabled = this.buttonsDisabled ? true : buttonsAreDisabled;
         return html`
             <div class="flex-container additional-button-container">
                         <div class="btn-flex-container-mobile">
                             <button @click="${() => { this.openFileSource(); }}"
-                                    class="button ${classMap({hidden: this.mode === MODE_FILE_SINK || this.mode === MODE_FILE_SOURCE})}" title="${i18n.t('clipboard.add-files')}">
+                                    class="button ${classMap({hidden: this.mode === MODE_FILE_SINK || this.mode === MODE_FILE_SOURCE})}" title="${i18n.t('clipboard.add-files')}"
+                                    ?disabled="${this.buttonsDisabled}">
                                 <dbp-icon class="nav-icon" name="clipboard"></dbp-icon> ${i18n.t('clipboard.add-files-btn')}
                             </button>
                             <button @click="${() => { this.clearClipboard(); }}"
@@ -590,6 +632,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
      * @returns {html}
      */
     getClipboardSink() {
+        const i18n = this._i18n;
         const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
         return html`
             <div class="wrapper">
@@ -624,6 +667,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
      */
     getClipboardSource() {
         const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
+        const i18n = this._i18n;
         return html`
             <div class="wrapper">
                 <div class="content">

packages/file-handling/src/dbp-file-handling-lit-element.js

+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import DBPLitElement from "../../common/dbp-lit-element";
+
+export default class DbpFileHandlingLitElement extends ScopedElementsMixin(DBPLitElement) {
+    constructor() {
+        super();
+
+    }
+
+    static get properties() {
+        return {
+            ...super.properties,
+        };
+    }
+
+    /**
+     * Handles the scroll of the current element and displays the right and/or the left paddle
+     * to match the scrolling position
+     *
+     * @param e
+     */
+    handleScroll(e) {
+        if (!this._(".right-paddle") || !this._(".left-paddle"))
+            return;
+        let horizontal = e.currentTarget.scrollLeft;
+        let scrollWidth = e.currentTarget.scrollWidth - e.currentTarget.clientWidth; //e.currentTarget.scrollLeftMax isn't support except firefox
+        if(horizontal > 0) {
+            this._(".left-paddle").classList.remove("hidden");
+        }
+        if (horizontal < scrollWidth) {
+            this._(".right-paddle").classList.remove("hidden");
+        }
+
+        if (horizontal >= scrollWidth) {
+            this._(".right-paddle").classList.add("hidden");
+        }
+
+        if (horizontal <= 0) {
+            this._(".left-paddle").classList.add("hidden");
+        }
+    }
+
+    /**
+     * Scrolls smooth to the maximum right of an given element
+     *
+     * @param element
+     */
+    handleScrollRight(element) {
+        const maxwidth = element.scrollWidth - element.clientWidth;
+        let container = element;
+        let scrollAmount = 0;
+        let slideTimer = setInterval(function(){
+            container.scrollLeft += 10;
+            scrollAmount += 10;
+            if(scrollAmount >= maxwidth){
+                window.clearInterval(slideTimer);
+            }
+        }, 25);
+    }
+
+    /**
+     * Scrolls smooth to the min left of an given element
+     *
+     * @param element
+     */
+    handleScrollLeft(element) {
+        const minwidth = 0;
+        let container = element;
+        let scrollAmount = element.scrollWidth - element.clientWidth;
+        let slideTimer = setInterval(function(){
+            container.scrollLeft -= 10;
+            scrollAmount -= 10;
+            if(scrollAmount <= minwidth){
+                window.clearInterval(slideTimer);
+            }
+        }, 25);
+    }
+
+}
\ No newline at end of file

packages/file-handling/src/demo.js

-import {i18n} from './i18n';
+import {createInstance} from './i18n';
 import {html, LitElement} from 'lit-element';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
@@ -9,7 +9,8 @@ import * as commonUtils from '@dbp-toolkit/common/utils';
 export class FileSourceDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.url = '';
         this.selectedFiles = [];
         this.selectedFilesCount = 0;
@@ -46,7 +47,7 @@ export class FileSourceDemo extends ScopedElementsMixin(LitElement) {
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             if (propName === "lang") {
-                i18n.changeLanguage(this.lang);
+                this._i18n.changeLanguage(this.lang);
             }
         });
 
@@ -77,6 +78,8 @@ export class FileSourceDemo extends ScopedElementsMixin(LitElement) {
     }
 
     render() {
+        const i18n = this._i18n;
+
         return html`
             <style>
                 dbp-file-source.clean {