dees-catalog/ts_web/elements/dees-form.ts

import { customElement, html, TemplateResult, LitElement } from 'lit-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';

declare global {
  interface HTMLElementTagNameMap {
    'dees-form': DeesForm;
  }
}

@customElement('dees-form')
export class DeesForm extends LitElement {
  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>
      <dees-input-text key="hello2" label="also a text"></dees-input-text>
      <dees-input-checkbox key="hello3" label="another text"></dees-input-checkbox>
      <dees-form-submit>Submit</dees-form-submit>
    </dees-form>
    `;

  public name: string = 'myform';

  public render(): TemplateResult {
    return html`
      <style>
        :host {
          display: contents;
        }
      </style>
      <slot></slot>
    `;
  }

  public async gatherAndDispatch() {

    const children: Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio> = this.children as any;
    const valueObject: { [key: string]: string | number | boolean} = {};
    for (const child of children) {
      if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
        valueObject[child.key] = child.value;
      }
    }


    console.log(valueObject);
    const formDataEvent = new CustomEvent('formData', {
      detail: {
        data: valueObject
      },
      bubbles: true
    });
    this.dispatchEvent(formDataEvent);
  }
}