Feature/dw composite form

.gitignore

@@ -1,3 +1,4 @@
 /node_modules/
 /.project
-/.history/
+/.history/
+package-lock.json

README.md

@@ -124,3 +124,30 @@ dw-form-field {
   font-size: 18px;
 }
 ```
+
+# dw-composite-form-element
+- It's a custom form element. As it's name suggests, used to create a form-element which is composed of other form-elements.
+- All the elements for the composition are identified from either local-dom (When used by extending this class) or light-dom.
+- Data-type of the `value` property is `Object`. Object's key represents name of the inner form-element & value represents value of that inner form element.
+- When `validate()` of this element is called, it invokes `validate()` of all the inner form elements.
+- Fires `value-changed` event when it's value is changed. (OR in other word, `value` of any inner form element is changed).
+
+## Installation
+```html
+  npm install --save @dreamworld/dw-form
+```
+
+## Usage (Composition or light-dom)
+
+```js
+  @import '@dreamworld/dw-form/dw-composite-form-element'
+```
+
+```html
+<dw-composite-form-element>
+  <dw-input></dw-input>
+</dw-composite-form-element>
+```
+
+## Usage (Extension)
+- Create a new form element by extending the class `DwCompositeFormElement` and in the `render()` template render all the children elements.

demo/dw-composite-form-element-demo.js

@@ -0,0 +1,87 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import { css, LitElement, html } from 'lit-element';
+import '../dw-composite-form-element'; 
+import '@dreamworld/dw-input';
+import { flexLayout } from '@dreamworld/flex-layout/flex-layout';
+
+export class DwCompositeFormElementDemo extends LitElement {
+  static get styles() {
+    return [
+      flexLayout,
+      css`
+        :host {
+          display: block;
+        }
+        .seprator {
+          margin-right: 24px;
+        }
+        dw-input {
+          width: 300px;
+        }
+      `
+    ];
+  }
+
+  static get properties() {
+    return {
+      _inputs: { type: Object }
+    };
+  }
+
+
+  render() {
+    return html`
+      <dw-composite-form-element @value-changed="${this._onValueChanged}" .inputValue="${this._inputs}">
+        <section class="layout horizontal">
+          <dw-input
+            class="seprator"
+            label="Input text"
+            required
+            .index="${0}"
+            errorMessage="required"
+            placeholder="Enter text"
+            name="input1">
+          </dw-input>
+          <dw-input
+           class="seprator"
+            label="Input text"
+            .index="${1}"
+            placeholder="Enter text"
+            name="input2">
+          </dw-input>
+          <dw-input
+            label="Input text"
+            .index="${2}"
+            placeholder="Enter text"
+            name="input3">
+          </dw-input>
+        </section>
+      </dw-composite-form-element>
+    `
+  }
+
+  _onValueChanged(e) {
+    console.log(e.detail.value);
+  }
+
+  constructor() {
+    super();
+
+    this._inputs = {
+      'input1': 'input 1',
+      'input2': 'input 2',
+      'input3': 'input 2'
+    }
+  }
+}
+
+window.customElements.define('dw-composite-form-element-demo', DwCompositeFormElementDemo);

demo/index.html

@@ -15,7 +15,7 @@
     <title>dw-form and dw-form-field demo</title>
     <script type="module" src="./dw-form-demo.js"></script>
     <script type="module" src="./dw-form-field-demo.js"></script>
-
+    <script type="module" src="./dw-composite-form-element-demo.js"></script>
     <style>
       body {
         margin: 24px;
@@ -33,5 +33,8 @@ <h1>Form field element demo</h1>
 
     <h1>Form demo</h1>
     <dw-form-demo></dw-form-demo>
+
+    <h1>Form composite element</h1>
+    <dw-composite-form-element-demo></dw-composite-form-element-demo>
   </body>
 </html>

dw-composite-form-element.js

@@ -0,0 +1,199 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import { css, LitElement, html } from 'lit-element';
+
+// These are lodash element needed by this element.
+import debounce  from 'lodash-es/debounce';
+
+// These are dw element needed by this element.
+import { DwFormElement } from './dw-form-element';
+
+export class DwCompositeFormElement extends DwFormElement(LitElement) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+        }
+      `
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * value of element
+       */
+      value: { type: Object },
+
+      /**
+       * Input Property
+       * Used to set pre-filled value of the element
+       */
+      inputValue: { type: Object }
+    }
+  }
+
+  render() {
+    return html`
+      <slot></slot>
+    `
+  }
+
+  constructor() {
+    super();
+    this._elements = [];
+    this.value = {};
+    this.inputValue = {};
+    this._dispatchValueChangeEvent = debounce(this._dispatchValueChangeEvent, 100);
+    this._onElementValueChange = this._onElementValueChange.bind(this);
+    this._onElementCheckedChange = this._onElementCheckedChange.bind(this);
+    this._onRegisterDwFormElement = this._onRegisterDwFormElement.bind(this);
+    this._onUnregisterDwFormElement = this._onUnregisterDwFormElement.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('register-dw-form-element', this._onRegisterDwFormElement);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback && super.disconnectedCallback();
+    this.removeEventListener('register-dw-form-element', this._onRegisterDwFormElement);
+    this._elements.forEach((element) => {
+      this._unbindValueChangedEvents(element);
+    });
+    this._elements = [];
+  }
+
+  /**
+   * @param {Object} val 
+   */
+  set inputValue(val) {
+    if (val === this._inputValue) {
+      return;
+    }
+
+    let oldValue = this._inputValue;
+    this._inputValue = val;
+    this.value = { ...val };
+    this._setChildElementValue();
+    this.requestUpdate('inputValue', oldValue);
+  }
+
+  /**
+   * get value
+   */
+  get inputValue() {
+    return this._inputValue;
+  }
+
+  _onRegisterDwFormElement(e) {
+    let element = e.composedPath()[0];
+
+    if (element === this) {
+      return;
+    }
+
+    element.addEventListener('value-changed', this._onElementValueChange);
+    element.addEventListener('checked-changed', this._onElementCheckedChange);
+    element.addEventListener('unregister-dw-form-element', this._onUnregisterDwFormElement);
+    this._elements.push(element);
+
+    /**
+     * call this function here because
+     * This element value is set first after child element `register-dw-form-element` event is dispatched.
+     * So sometimes child element value is not shown as prefilled.
+     */
+    this._setChildElementValue(); 
+  }
+
+  _onUnregisterDwFormElement(e) {
+    let element = e.target;
+    if (this._elements.indexOf(element) != -1) {
+      this._elements.splice(element.index, 1);
+    }
+    this._unbindValueChangedEvents(element);
+
+  }
+
+  _unbindValueChangedEvents(element) {
+    element.removeEventListener('value-changed', this._onElementValueChange);
+    element.removeEventListener('checked-changed', this._onElementCheckedChange);
+  }
+
+  /**
+   * set child element value.
+   */
+  _setChildElementValue() {
+    if (!this.value || !Object.keys(this.value).length) {
+      return;
+    }
+
+    this._elements.forEach((element) => {
+      let name = element.name;
+      element.value = this.value[name];
+    });
+  }
+
+  /**
+   * fire `form-value-changed` event and set `value` property.
+   * @param {Object} e - Event data. 
+   */
+  _onElementValueChange(e) {
+    let value = e.target.value;
+    let name = e.target.name;
+
+    this.value[name] = value;
+    this._dispatchValueChangeEvent();
+  }
+
+  /**
+  * fire `form-value-changed` event and set `value` property.
+  * @param {Object} e - Event data. 
+  */
+  _onElementCheckedChange(e) {
+    let value = e.target.checked;
+    let name = e.target.name;
+
+    this.value[name] = value;
+    this._dispatchValueChangeEvent();
+  }
+
+  /**
+   * dispatch `form-value-changed` event.
+   */
+  _dispatchValueChangeEvent() {
+    this.dispatchEvent(new CustomEvent('value-changed', { detail: { value: this.value } }));
+  }
+
+  /**
+   * It's return true if all children element validate method is true, otherwise return false.
+   * @return {Boolean}
+   */
+  validate() {
+    let bValidate = true;
+
+    this._elements.forEach((element) => {
+      if (!element.validate || typeof element.validate !== 'function') {
+        return;
+      }
+
+      if (!element.validate()) {
+        bValidate = false;
+      }
+    });
+
+    return bValidate;
+  }
+}
+
+window.customElements.define('dw-composite-form-element', DwCompositeFormElement);

package.json

@@ -22,12 +22,14 @@
   "homepage": "https://github.com/DreamworldSolutions/dw-form#README",
   "dependencies": {
     "@material/mwc-formfield": "^0.6.0",
-    "lit-element": "^2.0.1"
+    "lit-element": "^2.0.1",
+    "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "semantic-release": "beta",
-    "@dreamworld/dw-input": "^1.0.0",
-    "@dreamworld/dw-checkbox": "^1.0.3"
+    "@dreamworld/dw-checkbox": "^1.0.3",
+    "@dreamworld/dw-input": "^1.5.0",
+    "@dreamworld/flex-layout": "^1.1.0",
+    "semantic-release": "beta"
   },
   "publishConfig": {
     "access": "public"