diff --git a/packages/provider/src/consumer-demo.js b/packages/provider/src/consumer-demo.js
new file mode 100644
index 0000000000000000000000000000000000000000..cfd6b499c2696361365313dca8e326771d2ac0d0
--- /dev/null
+++ b/packages/provider/src/consumer-demo.js
@@ -0,0 +1,96 @@
+import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
+import {i18n} from "./i18n";
+import {html} from "lit-element";
+
+
+export class DemoConsumer extends DBPLitElement {
+ constructor() {
+ super();
+
+ this.lang = 'de';
+ // default values
+ this.foo = 100;
+ this.bar = 900;
+ this.borderColor = 'green';
+
+ this.status = 'local';
+
+ console.log('DemoConsumer constructor()');
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ i18n.changeLanguage(this.lang);
+ console.log('DemoConsumer(' + this.id + ') connectedCallback()');
+ this.render();
+ }
+
+ static get properties() {
+ return {
+ ...super.properties,
+ lang: { type: String },
+ foo: { type: String },
+ bar: { type: String },
+ gong: { type: String },
+ borderColor: { type: String, attribute: 'border-color' },
+ };
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (oldValue === newValue) {
+ return;
+ }
+
+ console.log('DemoConsumer(' + this.id + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
+ switch(name) {
+ case 'lang':
+ this.lang = newValue;
+ i18n.changeLanguage(this.lang);
+ break;
+ case 'foo':
+ this.foo = parseInt(newValue);
+ break;
+ case 'bar':
+ this.bar = parseInt(newValue);
+ break;
+ case 'status':
+ this.status = newValue;
+ break;
+ case 'border-color':
+ this['border-color'] = newValue;
+ break;
+ default:
+ super.attributeChangedCallback(name, oldValue, newValue);
+ }
+ this.render();
+ }
+
+ get id() {
+ return this.getAttribute('id');
+ }
+
+ render() {
+ if (! this.connected) {
+ return `not connected!`;
+ }
+ console.log('DemoConsumer(' + this.id + ') render()');
+
+ const sum = this.foo + this.bar;
+ return html`
+ <div style="border: ${this['border-color']} dotted; padding: 10px;">
+ <table style="width:200px;">
+ <tr style="background-color: #aaa;">
+ <th style="text-align: left;">${i18n.t('consumer.item')}</th>
+ <th style="text-align: right;">${i18n.t('consumer.price')}</th>
+ </tr>
+ <tr><td>foo</td><td style="text-align: right;">${this.foo}</td></tr>
+ <tr><td>bar</td><td style="text-align: right;">${this.bar}</td></tr>
+ <tr><td>${i18n.t('consumer.sum')}</td><td style="text-align: right;">${sum}</td></tr>
+ </table>
+ <p>Status: <b>${this.status}</b></p>
+ </div>
+ `;
+ }
+}
+
+customElements.define('dbp-consumer', DemoConsumer);
diff --git a/packages/provider/src/dbp-provider-demo.js b/packages/provider/src/dbp-provider-demo.js
index d2277a784323c7cfea7afebc87e65002d3cd4401..2a6200880318edc3c2f51262dbfd3046167560a7 100644
--- a/packages/provider/src/dbp-provider-demo.js
+++ b/packages/provider/src/dbp-provider-demo.js
@@ -7,7 +7,7 @@ import * as commonStyles from '@dbp-toolkit/common/styles';
import {Provider} from '@dbp-toolkit/provider';
import {LanguageSelect} from '@dbp-toolkit/language-select';
import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
-
+import {DemoConsumer} from './consumer-demo'
class ProviderDemo extends ScopedElementsMixin(DBPLitElement) {
@@ -114,97 +114,3 @@ class ProviderDemo extends ScopedElementsMixin(DBPLitElement) {
}
commonUtils.defineCustomElement('dbp-provider-demo', ProviderDemo);
-
-// =======================================================
-
-class DemoConsumer extends DBPLitElement {
- constructor() {
- super();
-
- this.lang = 'de';
- // default values
- this.foo = 100;
- this.bar = 900;
- this.borderColor = 'green';
-
- this.status = 'local';
-
- console.log('DemoConsumer constructor()');
- }
-
- connectedCallback() {
- super.connectedCallback();
- i18n.changeLanguage(this.lang);
- console.log('DemoConsumer(' + this.id + ') connectedCallback()');
- this.render();
- }
-
- static get properties() {
- return {
- ...super.properties,
- lang: { type: String },
- foo: { type: String },
- bar: { type: String },
- gong: { type: String },
- borderColor: { type: String, attribute: 'border-color' },
- };
- }
-
- attributeChangedCallback(name, oldValue, newValue) {
- if (oldValue === newValue) {
- return;
- }
-
- console.log('DemoConsumer(' + this.id + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
- switch(name) {
- case 'lang':
- this.lang = newValue;
- i18n.changeLanguage(this.lang);
- break;
- case 'foo':
- this.foo = parseInt(newValue);
- break;
- case 'bar':
- this.bar = parseInt(newValue);
- break;
- case 'status':
- this.status = newValue;
- break;
- case 'border-color':
- this['border-color'] = newValue;
- break;
- default:
- super.attributeChangedCallback(name, oldValue, newValue);
- }
- this.render();
- }
-
- get id() {
- return this.getAttribute('id');
- }
-
- render() {
- if (! this.connected) {
- return `not connected!`;
- }
- console.log('DemoConsumer(' + this.id + ') render()');
-
- const sum = this.foo + this.bar;
- return html`
- <div style="border: ${this['border-color']} dotted; padding: 10px;">
- <table style="width:200px;">
- <tr style="background-color: #aaa;">
- <th style="text-align: left;">${i18n.t('consumer.item')}</th>
- <th style="text-align: right;">${i18n.t('consumer.price')}</th>
- </tr>
- <tr><td>foo</td><td style="text-align: right;">${this.foo}</td></tr>
- <tr><td>bar</td><td style="text-align: right;">${this.bar}</td></tr>
- <tr><td>${i18n.t('consumer.sum')}</td><td style="text-align: right;">${sum}</td></tr>
- </table>
- <p>Status: <b>${this.status}</b></p>
- </div>
- `;
- }
-}
-
-customElements.define('dbp-consumer', DemoConsumer);
diff --git a/packages/provider/src/dbp-provider-demo2.js b/packages/provider/src/dbp-provider-demo2.js
index 8369171b2ce50cf9b68c08f41dcc81e4ed207efc..f1ad299d7c75233bccfcac7179e0c051fad43c8c 100644
--- a/packages/provider/src/dbp-provider-demo2.js
+++ b/packages/provider/src/dbp-provider-demo2.js
@@ -7,6 +7,7 @@ import * as commonStyles from '@dbp-toolkit/common/styles';
import {Provider} from '@dbp-toolkit/provider';
import {LanguageSelect} from '@dbp-toolkit/language-select';
import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
+import {DemoConsumer} from './consumer-demo'
class ProviderDemo2 extends ScopedElementsMixin(DBPLitElement) {
@@ -22,7 +23,7 @@ class ProviderDemo2 extends ScopedElementsMixin(DBPLitElement) {
'dbp-login-button': LoginButton,
'dbp-language-select': LanguageSelect,
'dbp-provider': Provider,
- 'dbp-consumer2': DemoConsumer2,
+ 'dbp-consumer': DemoConsumer,
};
}
@@ -82,8 +83,8 @@ class ProviderDemo2 extends ScopedElementsMixin(DBPLitElement) {
<div class="container">
<h2>${i18n.t('demo.consumer')}</h2>
<p>${i18n.t('demo.consumer_description', {id: "c1", subscriptions: "border-color, lang"})}</p>
- <pre><dbp-consumer2 id="c1" subscribe="border-color:bc,lang:lang" ></dbp-consumer></pre>
- <dbp-consumer2 id="c1" subscribe="border-color:bc,lang:lang"></dbp-consumer2>
+ <pre><dbp-consumer id="c1" subscribe="border-color:bc,lang:lang" ></dbp-consumer></pre>
+ <dbp-consumer id="c1" subscribe="border-color:bc,lang:lang"></dbp-consumer>
</div>
</section>
`;
@@ -91,98 +92,3 @@ class ProviderDemo2 extends ScopedElementsMixin(DBPLitElement) {
}
commonUtils.defineCustomElement('dbp-provider-demo2', ProviderDemo2);
-
-// =======================================================
-
-class DemoConsumer2 extends DBPLitElement {
- constructor() {
- super();
-
- this.lang = 'de';
- // default values
- this.foo = 100;
- this.bar = 900;
- this.borderColor = 'green';
-
- this.status = 'local';
-
- console.log('DemoConsumer2 constructor()');
- }
-
- connectedCallback() {
- super.connectedCallback();
- i18n.changeLanguage(this.lang);
- console.log('DemoConsumer2(' + this.id + ') connectedCallback()');
- this.render();
- }
-
- static get properties() {
- return {
- ...super.properties,
- lang: { type: String },
- foo: { type: String },
- bar: { type: String },
- gong: { type: String },
- borderColor: { type: String, attribute: 'border-color' },
- };
- }
-
- attributeChangedCallback(name, oldValue, newValue) {
- if (oldValue === newValue) {
- return;
- }
-
- console.log('DemoConsumer2(' + this.id + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
- switch(name) {
- case 'lang':
- this.lang = newValue;
- i18n.changeLanguage(this.lang);
- break;
- case 'foo':
- this.foo = parseInt(newValue);
- break;
- case 'bar':
- this.bar = parseInt(newValue);
- break;
- case 'status':
- this.status = newValue;
- break;
- case 'border-color':
- this['border-color'] = newValue;
- break;
- default:
- super.attributeChangedCallback(name, oldValue, newValue);
- }
- this.render();
- }
-
- get id() {
- return this.getAttribute('id');
- }
-
- render() {
- if (! this.connected) {
- return `not connected!`;
- }
- console.log('DemoConsumer2(' + this.id + ') render()');
-
- const sum = this.foo + this.bar;
- return html`
- <div style="border: ${this['border-color']} dotted; padding: 10px;">
- <table style="width:200px;">
- <tr style="background-color: #aaa;">
- <th style="text-align: left;">${i18n.t('consumer.item')}</th>
- <th style="text-align: right;">${i18n.t('consumer.price')}</th>
- </tr>
- <tr><td>foo</td><td style="text-align: right;">${this.foo}</td></tr>
- <tr><td>bar</td><td style="text-align: right;">${this.bar}</td></tr>
- <tr><td>${i18n.t('consumer.sum')}</td><td style="text-align: right;">${sum}</td></tr>
- </table>
- <p>Status: <b>${this.status}</b></p>
- </div>
- `;
- }
-
-}
-
-customElements.define('dbp-consumer2', DemoConsumer2);