fix(core): update

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;
-    const valueObject: { [key: string]: string | number | boolean} = {};
+  public getFormChildren() {
+    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