fix(core): update

package.json

@@ -13,20 +13,20 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.87",
+    "@designestate/dees-domtools": "^1.0.88",
     "@designestate/dees-element": "^1.0.19",
     "@designestate/dees-wcctools": "^1.0.57",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "typescript": "^4.2.4"
+    "typescript": "^4.3.5"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.25",
+    "@gitzone/tsbuild": "^2.1.26",
-    "@gitzone/tsbundle": "^1.0.80",
+    "@gitzone/tsbundle": "^1.0.84",
-    "@gitzone/tstest": "^1.0.52",
+    "@gitzone/tstest": "^1.0.54",
-    "@gitzone/tswatch": "^1.0.52",
+    "@gitzone/tswatch": "^1.0.56",
     "@pushrocks/projectinfo": "^4.0.5",
     "@pushrocks/tapbundle": "^3.2.14",
     "tslint": "^6.1.3",

ts_web/elements/dees-form.ts

@@ -1,9 +1,12 @@
-import { customElement, html, TemplateResult, LitElement } from 'lit-element';
+import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
 
 import { DeesInputCheckbox } from './dees-input-checkbox';
 import { DeesInputText } from './dees-input-text';
 import { DeesInputQuantitySelector } from './dees-input-quantityselector';
 import { DeesInputRadio } from './dees-input-radio';
+import * as domtools from '@designestate/dees-domtools';
+
+export type TFormElement = Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio>;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -12,7 +15,7 @@ declare global {
 }
 
 @customElement('dees-form')
-export class DeesForm extends LitElement {
+export class DeesForm extends DeesElement {
   public static demo = () => html`
     <dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px">
       <dees-input-text key="hello1" label="a text"></dees-input-text>
@@ -23,6 +26,7 @@ export class DeesForm extends LitElement {
     `;
 
   public name: string = 'myform';
+  public changeSubject = new domtools.rxjs.Subject();
 
   public render(): TemplateResult {
     return html`
@@ -35,18 +39,40 @@ export class DeesForm extends LitElement {
     `;
   }
 
-  public async gatherAndDispatch() {
+  public firstUpdated() {
+    const formChildren = this.getFormChildren();
+    for (const child of formChildren) {
+      child.changeSubject.subscribe(async (elementArg: TFormElement) => {
+        const valueObject = await this.gatherData();
+        this.changeSubject.next(valueObject);
+        console.log(valueObject);
+      })
+    }
+  }
 
-    const children: Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio> = this.children as any;
+  public getFormChildren() {
-    const valueObject: { [key: string]: string | number | boolean} = {};
+    const children: Array<DeesElement> = this.children as any;
+    const formChildren: TFormElement = [];
+    
     for (const child of children) {
       if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
-        valueObject[child.key] = child.value;
+        formChildren.push(child);
       }
     }
+    return formChildren;
+  }
 
+  public async gatherData() {
+    const children = this.getFormChildren();
+    const valueObject: { [key: string]: string | number | boolean} = {};
+    for (const child of children) {
+      valueObject[child.key] = child.value;
+    }
+    return valueObject;
+  }
 
-    console.log(valueObject);
+  public async gatherAndDispatch() {
+    const valueObject = await this.gatherData();
     const formDataEvent = new CustomEvent('formData', {
       detail: {
         data: valueObject

ts_web/elements/dees-input-checkbox.ts

@@ -9,7 +9,11 @@ declare global {
 
 @customElement('dees-input-checkbox')
 export class DeesInputCheckbox extends DeesElement {
+  // STATIC
   public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
+  
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
 
   @property()
   public key: string;
@@ -20,6 +24,7 @@ export class DeesInputCheckbox extends DeesElement {
   @property()
   public value: boolean = false;
 
+
   public render(): TemplateResult {
     return html`
       ${domtools.elementBasic.styles}
@@ -129,5 +134,6 @@ export class DeesInputCheckbox extends DeesElement {
         bubbles: true,
       })
     );
+    this.changeSubject.next(this);
   }
 }

ts_web/elements/dees-input-dropdown.ts

@@ -1,5 +1,4 @@
 import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
-
 import * as domtools from '@designestate/dees-domtools';
 
 declare global {
@@ -12,6 +11,9 @@ declare global {
 export class DeesInputDropdown extends LitElement {
   public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`
 
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
   @property()
   public label: string = 'Label';
 
@@ -116,6 +118,7 @@ export class DeesInputDropdown extends LitElement {
       bubbles: true
     }));
     this.toggleSelectionBox();
+    this.changeSubject.next(this);
   }
 
   public toggleSelectionBox() {

ts_web/elements/dees-input-fileupload.ts

@@ -9,6 +9,8 @@ import {
   cssManager,
 } from '@designestate/dees-element';
 
+import * as domtools from '@designestate/dees-domtools';
+
 declare global {
   interface HTMLElementTagNameMap {
     'dees-input-fileupload': DeesInputFileupload;
@@ -19,6 +21,9 @@ declare global {
 export class DeesInputFileupload extends DeesElement {
   public static demo = () => html`<dees-input-fileupload></dees-input-fileupload>`;
 
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
   @property({
     type: String,
   })
@@ -96,6 +101,7 @@ export class DeesInputFileupload extends DeesElement {
   public async updateValue(eventArg: Event) {
     const target: any = eventArg.target;
     this.value = target.value;
+    this.changeSubject.next(this);
   }
 
   public firstUpdated() {

ts_web/elements/dees-input-quantityselector.ts

@@ -11,6 +11,9 @@ declare global {
 export class DeesInputQuantitySelector extends DeesElement {
   public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
 
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
   @property()
   public key: string;
 
@@ -81,6 +84,7 @@ export class DeesInputQuantitySelector extends DeesElement {
 
   public increase () {
     this.value++;
+    this.changeSubject.next(this);
   }
 
   public decrease () {
@@ -89,5 +93,6 @@ export class DeesInputQuantitySelector extends DeesElement {
     } else {
       // nothing to do here
     }
+    this.changeSubject.next(this);
   }
 }

ts_web/elements/dees-input-radio.ts

@@ -1,4 +1,5 @@
 import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
+import * as domtools from '@designestate/dees-domtools';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -10,6 +11,9 @@ declare global {
 export class DeesInputRadio extends LitElement {
   public static demo = () => html`<dees-input-radio></dees-input-radio>`;
 
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
   @property()
   public key: string;
 
@@ -102,5 +106,6 @@ export class DeesInputRadio extends LitElement {
       detail: this.value,
       bubbles: true
     }));
+    this.changeSubject.next(this);
   }
 }

ts_web/elements/dees-input-text.ts

@@ -1,4 +1,5 @@
 import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
+import * as domtools from '@designestate/dees-domtools';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -10,6 +11,9 @@ declare global {
 export class DeesInputText extends DeesElement {
   public static demo = () => html`<dees-input-text></dees-input-text>`;
 
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
   @property()
   public label: string = 'Label';
 
@@ -75,6 +79,6 @@ export class DeesInputText extends DeesElement {
   public async updateValue(eventArg: Event) {
     const target: any = eventArg.target;
     this.value = target.value;
-
+    this.changeSubject.next(this);
   }
 }

ts_web/themelogic/index.ts

@@ -1 +0,0 @@
-export {}