Added form elements

Author: djthorpe

src/component/form/FormElement.js

@@ -0,0 +1,43 @@
+
+import { LitElement, html, css } from 'lit';
+
+/**
+ * FormElement
+ */
+export class FormElement extends LitElement {
+    constructor() {
+        super();
+        // Default properties
+        this.name = 'wc-form';
+        this.method = "POST";
+        this.action = "#";
+    }
+    static get properties() {
+        return {
+            /**
+             * Name of the form
+             * @type {String}
+             */
+            name: { type: String },
+
+            /**
+             * The method for submitting the form (POST or GET)
+             * @type {string}
+             */
+            method: { type: String },
+
+            /**
+             * The action when submitting the form
+             * @type {string}
+             */
+            action: { type: String },
+        };
+    }
+    render() {
+        return html`
+            <form method="${this.method}" action="${this.action}"><slot></slot></form>
+          `;
+    }
+}
+
+customElements.define('wc-form', FormElement);

src/component/form/FormInputElement.js

@@ -98,6 +98,15 @@ <h1>Modal</h1>
             </div>
         </wc-sidemodal>
     </div>
+    <hr>
+
+    <div class="container">
+        <wc-form>
+            <h1>Form</h1>
+            <wc-form-input name="name" label="Name" placeholder="Enter your name" required></wc-form-input>
+        </wc-form>
+    </div>
+
 </body>
 
 </html>

src/index.html

@@ -17,13 +17,17 @@ import './component/icon/IconElement';
 import './component/nav/NavBarElement';
 import './component/nav/NavItemElement';
 
-// Modals
+// Modal Elements
 import './component/modal/ModalElement';
 import './component/modal/SideModalElement';
 
+// Form Elements
+import './component/form/FormElement';
+
 // CSS
 import './css/core.css';
 import './css/document.css';
 
+// Other
 import './esbuild.js';
 import './test.js';