feat(HXFileTileElement): add declarative functionality

* Add `dismiss()` to simulate clicking the "X"
* Refactor source to better organize contents

Author: Ryan A. Johnson

docs/elements/hx-file-tile/index.html

@@ -9,7 +9,7 @@
 
   <section>
     <p>
-      The custom <code>{{page.title}}</code> element describes the states of 
+      The custom <code>{{page.title}}</code> element describes the states of
       a downloadable asset.
     </p>
 
@@ -38,6 +38,14 @@
       </hx-def>
     </hx-dl>
   </section>
+
+  <section>
+    <h2 id="methods">Methods</h2>
+    <dl>
+      <dt>dismiss()</dt>
+      <dd>Simulates a mouse click on the dismiss button (i.e., clicking the "X")</dd>
+    </dl>
+  </section>
 {% endblock %}
 
 {% block attributes %}

src/helix-ui/elements/HXFileTileElement.js

@@ -32,7 +32,7 @@ export class HXFileTileElement extends HXElement {
             'icon',
             'name',
         ];
-    }//$observedAttributes
+    }
 
     $onAttributeChange (attr, oldVal, newVal) {
         switch (attr) {
@@ -53,42 +53,48 @@ export class HXFileTileElement extends HXElement {
                 this._elExt.innerText = this._extension || '';
                 break;
         }
-    }//$onAttributeChange
+    }
 
-    // GETTERS
+    /**
+     * Icon to appear within the empty file icon.
+     * @type {String}
+     */
     get icon () {
         return this.getAttribute('icon');
     }
-
-    get name () {
-        return this.getAttribute('name');
-    }
-
-    get href () {
-        return this.getAttribute('href');
-    }
-
-    get loading () {
-        return this.hasAttribute('loading');
-    }
-
-    get valid () {
-        return !this.hasAttribute('invalid');
-    }
-
-    // SETTERS
     set icon (newVal) {
         this.setAttribute('icon', newVal);
     }
 
+    /**
+     * File name
+     * @type {String}
+     */
+    get name () {
+        return this.getAttribute('name');
+    }
     set name (newVal) {
         this.setAttribute('name', newVal);
     }
 
+    /**
+     * URL to download the file
+     * @type {String}
+     */
+    get href () {
+        return this.getAttribute('href');
+    }
     set href (newVal) {
         this.setAttribute('href', newVal);
     }
 
+    /**
+     * @default false
+     * @type {Boolean}
+     */
+    get loading () {
+        return this.hasAttribute('loading');
+    }
     set loading (newVal) {
         if (newVal) {
             this.setAttribute('loading', '');
@@ -97,6 +103,13 @@ export class HXFileTileElement extends HXElement {
         }
     }
 
+    /**
+     * @default true
+     * @type {Boolean}
+     */
+    get valid () {
+        return !this.hasAttribute('invalid');
+    }
     set valid (newVal) {
         if (newVal) {
             this.removeAttribute('invalid');
@@ -105,6 +118,31 @@ export class HXFileTileElement extends HXElement {
         }
     }
 
+    /**
+     * Simulates clicking "X" (i.e., the dismiss button)
+     */
+    dismiss () {
+        if (this.loading || !this.valid) {
+            if (this.$emit('cancel')) {
+                this.remove();
+            }
+        } else {
+            if (this.$emit('delete')) {
+                // only if event was not canceled by consumer
+                this.remove();
+            }
+        }
+    }
+
+    /**
+     * https://regex101.com/r/K8XCbn/2
+     * @private
+     */
+    get _extension () {
+        let re = /(?:\.([^.]+))?$/;
+        return re.exec(this.name)[1];
+    }
+
     /** @private */
     get _btnDismiss () {
         return this.shadowRoot.getElementById('hxDismiss');
@@ -125,26 +163,9 @@ export class HXFileTileElement extends HXElement {
         return this.shadowRoot.getElementById('hxLink');
     }
 
-    /** @private */
-    // https://regex101.com/r/K8XCbn/2
-    get _extension () {
-        let re = /(?:\.([^.]+))?$/;
-        return re.exec(this.name)[1];
-    }
-
     /** @private */
     _onDismiss (evt) {
         evt.preventDefault();
-
-        if (this.loading || !this.valid) {
-            if (this.$emit('cancel')) {
-                this.remove();
-            }
-        } else {
-            if (this.$emit('delete')) {
-                // only if event was not canceled by consumer
-                this.remove();
-            }
-        }
+        this.dismiss();
     }
 }