Add dbp-translated documentation and demonstration

packages/common/README.md

@@ -20,3 +20,19 @@ Variables like `--dbp-override-icon-<icon-name>` can be used to override the ico
 
 Example CSS: `html { --dbp-override-icon-cloud: url(/icons/cloud.svg); }`
 
+## Translated Web Component
+
+You can use this web component to show translated html.
+
+```html
+<dbp-translated subscribe="lang">
+    <div slot="de">
+        Dieser Text is Deutsch und wird Englisch werden wenn man die Sprache auf Englisch stellt.
+    </div>
+    <div slot="en">
+        This text is English and will be German if the language is changed to German.
+    </div>
+</dbp-translated>
+```
+
+The English or German text will be shown according to the `lang` attribute. 

packages/common/dbp-common-demo.js

@@ -3,7 +3,7 @@ import {css, html, LitElement} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from './utils.js';
 import * as commonStyles from './styles.js';
-import {getIconCSS, Icon, MiniSpinner, Button, LoadingButton, Spinner, InlineNotification} from './index.js';
+import {getIconCSS, Icon, MiniSpinner, Button, LoadingButton, Spinner, InlineNotification, Translated} from './index.js';
 
 export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
@@ -21,6 +21,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
             'dbp-loading-button': LoadingButton,
             'dbp-auth': customElements.get('dbp-auth'),
             'dbp-inline-notification': InlineNotification,
+            'dbp-translated': Translated,
         };
     }
 
@@ -197,6 +198,19 @@ html {
                         <dbp-inline-notification summary="Item deleted" body="Item <b>foo</b> was deleted!" type="warning"></dbp-inline-notification>
                     </div>
                 </div>
+                <div class="content">
+                    <h2>Translated text</h2>
+                    <div class="control" id="dbp-translated-demo">
+                        <dbp-translated subscribe="lang">
+                            <div slot="de">
+                                Dieser Text is Deutsch und wird Englisch werden wenn man die Sprache auf Englisch stellt.
+                            </div>
+                            <div slot="en">
+                                This text is English and will be German if the language is changed to German.
+                            </div>
+                        </dbp-translated>
+                    </div>
+                </div>
             </section>
         `;
     }

packages/common/index.js

@@ -5,6 +5,7 @@ import {MiniSpinner} from './src/mini-spinner.js';
 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";
 
 export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
 export {getIconSVGURL, getIconCSS, Icon};
@@ -12,5 +13,6 @@ export {MiniSpinner};
 export {Button, LoadingButton};
 export {Spinner};
 export {InlineNotification};
+export {Translated};
 export * from './src/logger.js';
 export {AdapterLitElement} from './src/adapter-lit-element.js';
\ No newline at end of file