packages/notification/src/notification.js

-import {i18n} from './i18n';
+import {createInstance} from './i18n';
 import {createUUID} from './utils';
 import {css, html} from 'lit-element';
 import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
@@ -10,7 +10,8 @@ import * as commonStyles from '@dbp-toolkit/common/styles';
 export class Notification extends DBPLitElement {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
     }
 
     /**
@@ -25,7 +26,6 @@ export class Notification extends DBPLitElement {
 
     connectedCallback() {
         super.connectedCallback();
-        i18n.changeLanguage(this.lang);
         const that = this;
 
         window.addEventListener("dbp-notification-send", (e) => {
@@ -63,9 +63,6 @@ export class Notification extends DBPLitElement {
             // mark the event as handled
             e.preventDefault();
         });
-
-        this.updateComplete.then(()=>{
-        });
     }
 
     removeMessageId(messageElementId) {

packages/organization-select/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/organization-select/src/dbp-organization-select-demo.js

-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {OrganizationSelect} from './organization-select.js';
@@ -10,7 +10,8 @@ import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
 export class OrganizationSelectDemo extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         this.noAuth = false;
     }
@@ -32,12 +33,11 @@ export class OrganizationSelectDemo extends ScopedElementsMixin(DBPLitElement) {
         };
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-        i18n.changeLanguage(this.lang);
-
-        this.updateComplete.then(()=>{
-        });
+    update(changedProperties) {
+        if (changedProperties.has("lang")) {
+            this._i18n.changeLanguage(this.lang);
+        }
+        super.update(changedProperties);
     }
 
     static get styles() {

packages/organization-select/src/i18n.js

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

packages/organization-select/src/i18n/de/translation.json

 {
   "select-organization": {
     "placeholder": "Bitte wählen Sie ein Institut aus",
-    "loading": "Wird geladen...",
-    "load-error": "Fehler beim Laden der Organisation"
+    "loading": "Wird geladen..."
   }
 }

packages/organization-select/src/i18n/en/translation.json

 {
   "select-organization": {
     "placeholder": "Please select an organization",
-    "loading": "Loading...",
-    "load-error": "Error loading the organization"
+    "loading": "Loading..."
   }
 }

packages/organization-select/src/organization-select.js

 import $ from 'jquery';
 import select2 from 'select2';
 import select2CSSPath from 'select2/dist/css/select2.min.css';
-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {css, html} from 'lit-element';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 import * as commonStyles from '@dbp-toolkit/common/styles';
@@ -16,7 +16,8 @@ export class OrganizationSelect extends AdapterLitElement {
     constructor() {
         super();
         this.auth = {};
-        this.lang = i18n.language;
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         this.jsonld = null;
         this.organizations = [];
@@ -93,6 +94,7 @@ export class OrganizationSelect extends AdapterLitElement {
     }
 
     async updateSelect2() {
+        const i18n = this._i18n;
         await this.updateComplete;
 
         const $select = this.$('#' + this.selectId);
@@ -181,7 +183,7 @@ export class OrganizationSelect extends AdapterLitElement {
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case "lang":
-                    i18n.changeLanguage(this.lang);
+                    this._i18n.changeLanguage(this.lang);
                     this.updateSelect2();
                     break;
                 case "value": {

packages/person-profile/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/person-profile/src/dbp-person-profile-demo.js

 import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
@@ -12,7 +12,8 @@ import {PersonSelect} from '@dbp-toolkit/person-select';
 export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         this.person = '';
         this.selectedPerson = '';
@@ -42,6 +43,10 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
     }
 
     update(changedProperties) {
+        if (changedProperties.has("lang")) {
+            this._i18n.changeLanguage(this.lang);
+        }
+
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case 'auth':
@@ -61,7 +66,6 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
 
     connectedCallback() {
         super.connectedCallback();
-        i18n.changeLanguage(this.lang);
         const that = this;
 
         this.updateComplete.then(()=>{

packages/person-profile/src/i18n.js

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

packages/person-profile/src/person-profile.js

 
 import JSONLD from '@dbp-toolkit/common/jsonld';
 import {css, html} from 'lit-element';
-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 
@@ -10,7 +10,8 @@ export class PersonProfile extends DBPLitElement {
 
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         this.jsonld = null;
         this.value = '';
@@ -29,18 +30,11 @@ export class PersonProfile extends DBPLitElement {
         };
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-
-        this.updateComplete.then(()=>{
-        });
-    }
-
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case "lang":
-                    i18n.changeLanguage(this.lang);
+                    this._i18n.changeLanguage(this.lang);
                     break;
                 case "entryPointUrl": {
                     const that = this;
@@ -83,6 +77,7 @@ export class PersonProfile extends DBPLitElement {
     }
 
     render() {
+        const i18n = this._i18n;
         let role = i18n.t('person-profile.unknown');
         if (this.person !== null && this.person.roles !== undefined) {
             // roles are only defined for self-disclosure

packages/person-select/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/person-select/src/dbp-person-select-demo.js

-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {PersonSelect} from './person-select.js';
@@ -10,7 +10,8 @@ import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
 export class PersonSelectDemo extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         this.noAuth = false;
     }
@@ -32,14 +33,6 @@ export class PersonSelectDemo extends ScopedElementsMixin(DBPLitElement) {
         };
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-        i18n.changeLanguage(this.lang);
-
-        this.updateComplete.then(()=>{
-        });
-    }
-
     static get styles() {
         // language=css
         return [
@@ -52,6 +45,13 @@ export class PersonSelectDemo extends ScopedElementsMixin(DBPLitElement) {
         ];
     }
 
+    update(changedProperties) {
+        if (changedProperties.has("lang")) {
+            this._i18n.changeLanguage(this.lang);
+        }
+        super.update(changedProperties);
+    }
+
     getAuthComponentHtml() {
         return this.noAuth ? html`<dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>` : html`
             <div class="container">

packages/person-select/src/i18n.js

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

packages/person-select/src/i18n/de/translation.json

 {
   "person-select": {
     "placeholder": "Bitte wählen Sie eine Person aus",
-    "error-summary": "Ein Fehler ist aufgetreten",
     "login-required": "Anmeldung erforderlich"
   }
 }

packages/person-select/src/i18n/en/translation.json

 {
   "person-select": {
     "placeholder": "Please select a person",
-    "error-summary": "An error occurred",
     "login-required": "Login required"
   }
 }

packages/person-select/src/person-select.js

@@ -6,7 +6,7 @@ import select2LangEn from './i18n/en/select2';
 import JSONLD from '@dbp-toolkit/common/jsonld';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {Icon} from '@dbp-toolkit/common';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 import * as commonStyles from '@dbp-toolkit/common/styles';
@@ -29,7 +29,8 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) {
         super();
         Object.assign(PersonSelect.prototype, errorUtils.errorMixin);
         this.auth = {};
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         this.jsonld = null;
         this.$select = null;
@@ -129,6 +130,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) {
      * @param ignorePreset
      */
     initSelect2(ignorePreset = false) {
+        const i18n = this._i18n;
         const that = this;
         const $this = $(this);
 
@@ -155,7 +157,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) {
             width: '100%',
             language: this.lang === "de" ? select2LangDe() : select2LangEn(),
             minimumInputLength: 2,
-            placeholder: i18n.t(this.authenticated() ? 'person-select.placeholder' : 'person-select.login-required'),
+            placeholder: this.authenticated() ? i18n.t('person-select.placeholder') : i18n.t('person-select.login-required'),
             dropdownParent: this.$('#person-select-dropdown'),
             ajax: {
                 delay: 500,
@@ -277,7 +279,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) {
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case "lang":
-                    i18n.changeLanguage(this.lang);
+                    this._i18n.changeLanguage(this.lang);
 
                     if (this.select2IsInitialized()) {
                         // no other way to set an other language at runtime did work
@@ -361,6 +363,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) {
     }
 
     render() {
+        const i18n = this._i18n;
         const select2CSS = commonUtils.getAssetURL(select2CSSPath);
         return html`
             <link rel="stylesheet" href="${select2CSS}">

packages/provider/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/provider/src/dbp-provider-demo.js

-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
@@ -14,7 +14,8 @@ class ProviderDemo extends ScopedElementsMixin(DBPLitElement) {
 
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
     }
 
     static get scopedElements() {
@@ -35,18 +36,12 @@ class ProviderDemo extends ScopedElementsMixin(DBPLitElement) {
         };
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-        i18n.changeLanguage(this.lang);
-
-    }
-
     attributeChangedCallback(name, oldValue, newValue) {
         console.debug('ProviderDemo (' + this.id + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
         switch(name) {
             case 'lang':
                 this.lang = newValue;
-                i18n.changeLanguage(this.lang);
+                this._i18n.changeLanguage(this.lang);
                 break;
             default:
                 super.attributeChangedCallback(name, oldValue, newValue);
@@ -71,6 +66,7 @@ class ProviderDemo extends ScopedElementsMixin(DBPLitElement) {
     }
 
     render() {
+        const i18n = this._i18n;
         return html`
             <section class="section">
                 <p>${i18n.t('demo.provider_description', {id: "root", description: "is the top most in hierarchy"})}</p>
@@ -142,7 +138,8 @@ class DemoConsumer extends DBPLitElement {
     constructor() {
         super();
 
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         // default values
         this.foo = 100;
@@ -157,7 +154,6 @@ class DemoConsumer extends DBPLitElement {
 
     connectedCallback() {
         super.connectedCallback();
-        i18n.changeLanguage(this.lang);
         console.debug('DemoConsumer(' + this.id + ') connectedCallback()');
         this.render();
     }
@@ -184,7 +180,7 @@ class DemoConsumer extends DBPLitElement {
         switch(name) {
             case 'lang':
                 this.lang = newValue;
-                i18n.changeLanguage(this.lang);
+                this._i18n.changeLanguage(this.lang);
                 break;
             case 'foo':
                 this.foo = parseInt(newValue);
@@ -209,6 +205,7 @@ class DemoConsumer extends DBPLitElement {
     }
 
     render() {
+        const i18n = this._i18n;
         if (! this.connected) {
             return `not connected!`;
         }

packages/provider/src/i18n.js

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