add helper methods and event handlers

Author: Graham Butler

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@author.io/element-control",
-  "version": "1.0.15",
+  "version": "1.1.0",
   "description": "author-control custom element (web component).",
   "main": "dist/author-control.min.js",
   "scripts": {

showroom/src/index.html

@@ -36,7 +36,7 @@ <h2 class="hidden">Navigation</h2>
     </header>
 
     <main>
-      <div class="content">
+      <form class="content">
         <author-control class="theme">
           <label>Theme</label>
           <select placeholder="Select a Theme">
@@ -46,35 +46,56 @@ <h2 class="hidden">Navigation</h2>
           </select>
         </author-control>
 
-        <author-control>
-          <label>Datalist</label>
-          <input type="text">
-          <datalist>
+        <author-control id="input">
+          <label>Text Input</label>
+          <input type="text" required>
+        </author-control>
+
+        <author-control id="textarea">
+          <label>Textarea</label>
+          <textarea rows="8"></textarea>
+        </author-control>
+
+        <author-control id="select">
+          <label>Select Menu</label>
+
+          <select placeholder="Select an Option">
             <option value="1">Option 1</option>
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
-          </datalist>
+
+            <optgroup label="Grouped Options">
+              <option value="4">Option 4</option>
+              <option value="5">Option 5</option>
+              <option value="6">Option 6</option>
+            </optgroup>
+          </select>
         </author-control>
 
-        <author-control>
-          <label>Text Input</label>
+        <author-control id="datalist">
+          <div class="label-wrapper">
+            <label>Datalist</label>
+          </div>
+
           <input type="text">
+          <datalist>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+          </datalist>
         </author-control>
 
-        <author-control>
-          <label>Textarea</label>
-          <textarea rows="8"></textarea>
-        </author-control>
+        <button type="submit" class="submit">Submit</button>
 
-        <author-control>
+        <!-- <author-control>
           <div class="label-wrapper">
             <label>Text Input</label>
           </div>
           <div class="input-wrapper">
             <input type="text">
           </div>
-        </author-control>
-      </div>
+        </author-control> -->
+      </form>
     </main>
   </body>
 

showroom/src/js/index.js

@@ -3,14 +3,27 @@ const Demo = new NGNX.VIEW.Registry({
   namespace: 'demo.',
 
   references: {
-    content: 'main .content'
+    content: 'main .content',
+    input: '#input',
+    textarea: '#textarea',
+    datalist: '#datalist',
+    select: '#select',
+    submitButton: 'button.submit'
   },
 
   templates: {
     select: './js/templates/select.html'
   },
 
   init () {
-    this.render('select', {}, this.ref.content.element)
+    window.input = this.ref.input
+    window.textarea = this.ref.textarea
+    window.datalist = this.ref.datalist
+    window.select = this.ref.select
+
+    input.on('invalid', evt => console.log(evt))
+
+    // setTimeout(() => select.element.input.focus(), 2000)
+    // this.render('select', {}, this.ref.content.element)
   }
 })

src/element.js

@@ -126,7 +126,7 @@ class AuthorFormControlElement extends AuthorBaseElement(HTMLElement) {
             return
 
           default: if (node.children.length > 0) {
-            return Array.from(node.children).forEach(child => this.PRIVATE.catalogChild(child))
+            Array.from(node.children).forEach(child => this.PRIVATE.catalogChild(child))
           }
         }
       },
@@ -173,6 +173,48 @@ class AuthorFormControlElement extends AuthorBaseElement(HTMLElement) {
             break
         }
 
+        this.UTIL.registerListener(this.input, 'invalid', evt => this.emit('invalid', {}))
+
+        switch (this.type) {
+          case 'input':
+          case 'textarea':
+            // this.UTIL.defineProperties({
+            //   leng
+            // })
+
+            break
+
+          case 'select':
+          case 'datalist':
+            this.UTIL.defineProperties({
+              length: {
+                readonly: true,
+                get: () => this.input.length
+              },
+
+              selectedIndex: {
+                set: value => this.input.selectedIndex = value,
+                get: () => this.input.selectedIndex
+              }
+            })
+
+            ;[
+              'add',
+              'deselectAll',
+              'addFilter',
+              'hasFilter',
+              'removeAllFilters',
+              'removeFilter',
+              'item',
+              'namedItem',
+              'remove',
+              'reportValidity',
+              'setCustomValidity'
+            ].forEach(method => this[method] = (...args) => this.input[method](...args))
+
+            break
+        }
+
         this.PRIVATE.initialized = true
         this.emit('initialized')
       },
@@ -263,6 +305,30 @@ class AuthorFormControlElement extends AuthorBaseElement(HTMLElement) {
   static get observedAttributes () {
     return ['disabled']
   }
+
+  get value () {
+    return this.input.value
+  }
+
+  blur () {
+    this.input.blur()
+  }
+
+  checkValidity () {
+    this.input.checkValidity()
+  }
+
+  clear () {
+    if ('clear' in this.input) {
+      return this.input.clear()
+    }
+
+    this.input.value = ''
+  }
+
+  focus () {
+    this.input.focus()
+  }
 }
 
 customElements.define('author-control', AuthorFormControlElement)