xconcepts-dynamic-form - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/cjs/dynamic-form.cjs.entry.js

@@ -31,4 +31,6 @@ 'use strict';
   handleClearInput(input) {
-    let inp = document.getElementById(input.name);
-    inp.value = "";
+    if (!this.isFormSubmitted) {
+      let inp = document.getElementById(input.name);
+      inp.value = "";
+    }
   }
@@ -38,2 +40,5 @@ handleSubmit(event) {
     event.preventDefault();
+    if (this.isFormSubmitted) {
+      return '';
+    }
     this.formErrors = {};
@@ -61,2 +66,3 @@ this.formError = false;
       const data = Object.fromEntries(formData.entries());
+      this.isFormSubmitted = true;
       // console.log(formData);
@@ -76,6 +82,2 @@ this.formSubmitted.emit(data);
   }
-  renderFormGroup(input) {
-    let html = (index.h("div", { class: "form-group" }, index.h("div", { class: "label-flex" }, index.h("label", null, input.label, " ", this.renderAsterisk(input)), index.h("div", { class: "ms-auto" }, this.formErrors[input.name] ? index.h("span", { class: "text-danger" }, index.h("small", null, "mandatory")) : '')), index.h("div", { class: "input-group" }, index.h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none' }), index.h("div", { class: "input-group-append" }, index.h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, index.h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" })))))));
-    return html;
-  }
   renderFormLabel(input) {
@@ -87,7 +89,7 @@ let label = (index.h("div", { class: "label-flex" }, index.h("label", null, input.label, " ", this.renderAsterisk(input)), index.h("div", { class: "ms-auto" }, this.formErrors[input.name] ? index.h("span", { class: "text-danger" }, index.h("small", null, "mandatory")) : '')));
     var _a;
-    return (index.h("div", { class: "input-group" }, index.h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString() }), index.h("div", { class: "input-group-append" }, index.h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, index.h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (index.h("div", { class: "input-group" }, index.h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), disabled: this.isFormSubmitted }), index.h("div", { class: "input-group-append" }, index.h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, index.h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
   renderSelectControl(input) {
     var _a;
-    return (index.h("div", { class: "input-group" }, index.h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString() }, index.h("option", { value: "" }, "Select"), input.options.map((option) => (index.h("option", { value: option[input.key] }, option[input.keyName]))))));
+    return (index.h("div", { class: "input-group" }, index.h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, index.h("option", { value: "" }, "Select"), input.options.map((option) => (index.h("option", { value: option[input.key] }, option[input.keyName]))))));
   }
@@ -98,3 +100,3 @@ renderRadioControl(input) {
       var _a;
-      return (index.h("label", { class: "radio-item" }, index.h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key], autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: option[input.key] }), index.h("div", { class: "radio-circle" }), index.h("div", { class: "radio-label" }, option[input.keyName]))
+      return (index.h("label", { class: "radio-item" }, index.h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key], autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), index.h("div", { class: "radio-circle" }), index.h("div", { class: "radio-label" }, option[input.keyName]))
       // <option value={option[input.key]}>{option[input.keyName]}</option>
@@ -107,3 +109,3 @@ );
     // console.log(input);
-    return (index.h("div", { class: "input-group" }, index.h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, index.h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: "on" }), index.h("div", { class: "checkbox-square" }), index.h("div", { class: "checkbox-label" }, input.label), index.h("div", null, this.formErrors[input.name] ? index.h("span", { class: "text-danger" }, index.h("small", null, "mandatory")) : ''))));
+    return (index.h("div", { class: "input-group" }, index.h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, index.h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), index.h("div", { class: "checkbox-square" }), index.h("div", { class: "checkbox-label" }, input.label), index.h("div", null, this.formErrors[input.name] ? index.h("span", { class: "text-danger" }, index.h("small", null, "mandatory")) : ''))));
   }
@@ -127,4 +129,10 @@ renderInputGroup(input) {
   }
+  renderButton() {
+    if (this.isFormSubmitted) {
+      return '';
+    }
+    return (index.h("button", { type: "submit" }, "Submit"));
+  }
   render() {
-    return (index.h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (index.h("div", { class: "form-group" }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input)))), index.h("button", { type: "submit" }, "Submit")));
+    return (index.h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (index.h("div", { class: "form-group" }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input)))), this.renderButton()));
   }
@@ -131,0 +139,0 @@ get elm() { return index.getElement(this); }

dist/collection/components/dynamic-form/dynamic-form.js

@@ -22,4 +22,6 @@ import { h } from '@stencil/core';
   handleClearInput(input) {
-    let inp = document.getElementById(input.name);
-    inp.value = "";
+    if (!this.isFormSubmitted) {
+      let inp = document.getElementById(input.name);
+      inp.value = "";
+    }
   }
@@ -29,2 +31,5 @@ handleSubmit(event) {
     event.preventDefault();
+    if (this.isFormSubmitted) {
+      return '';
+    }
     this.formErrors = {};
@@ -52,2 +57,3 @@ this.formError = false;
       const data = Object.fromEntries(formData.entries());
+      this.isFormSubmitted = true;
       // console.log(formData);
@@ -67,6 +73,2 @@ this.formSubmitted.emit(data);
   }
-  renderFormGroup(input) {
-    let html = (h("div", { class: "form-group" }, h("div", { class: "label-flex" }, h("label", null, input.label, " ", this.renderAsterisk(input)), h("div", { class: "ms-auto" }, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : '')), h("div", { class: "input-group" }, h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none' }), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" })))))));
-    return html;
-  }
   renderFormLabel(input) {
@@ -78,7 +80,7 @@ let label = (h("div", { class: "label-flex" }, h("label", null, input.label, " ", this.renderAsterisk(input)), h("div", { class: "ms-auto" }, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : '')));
     var _a;
-    return (h("div", { class: "input-group" }, h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString() }), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (h("div", { class: "input-group" }, h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), disabled: this.isFormSubmitted }), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
   renderSelectControl(input) {
     var _a;
-    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString() }, h("option", { value: "" }, "Select"), input.options.map((option) => (h("option", { value: option[input.key] }, option[input.keyName]))))));
+    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, h("option", { value: "" }, "Select"), input.options.map((option) => (h("option", { value: option[input.key] }, option[input.keyName]))))));
   }
@@ -89,3 +91,3 @@ renderRadioControl(input) {
       var _a;
-      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key], autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: option[input.key] }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
+      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key], autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
       // <option value={option[input.key]}>{option[input.keyName]}</option>
@@ -98,3 +100,3 @@ );
     // console.log(input);
-    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: "on" }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
+    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
   }
@@ -118,4 +120,10 @@ renderInputGroup(input) {
   }
+  renderButton() {
+    if (this.isFormSubmitted) {
+      return '';
+    }
+    return (h("button", { type: "submit" }, "Submit"));
+  }
   render() {
-    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (h("div", { class: "form-group" }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input)))), h("button", { type: "submit" }, "Submit")));
+    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (h("div", { class: "form-group" }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input)))), this.renderButton()));
   }
@@ -122,0 +130,0 @@ static get is() { return "dynamic-form"; }

dist/components/dynamic-form.js

@@ -28,4 +28,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
   handleClearInput(input) {
-    let inp = document.getElementById(input.name);
-    inp.value = "";
+    if (!this.isFormSubmitted) {
+      let inp = document.getElementById(input.name);
+      inp.value = "";
+    }
   }
@@ -35,2 +37,5 @@ handleSubmit(event) {
     event.preventDefault();
+    if (this.isFormSubmitted) {
+      return '';
+    }
     this.formErrors = {};
@@ -58,2 +63,3 @@ this.formError = false;
       const data = Object.fromEntries(formData.entries());
+      this.isFormSubmitted = true;
       // console.log(formData);
@@ -73,6 +79,2 @@ this.formSubmitted.emit(data);
   }
-  renderFormGroup(input) {
-    let html = (h("div", { class: "form-group" }, h("div", { class: "label-flex" }, h("label", null, input.label, " ", this.renderAsterisk(input)), h("div", { class: "ms-auto" }, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : '')), h("div", { class: "input-group" }, h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none' }), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" })))))));
-    return html;
-  }
   renderFormLabel(input) {
@@ -84,7 +86,7 @@ let label = (h("div", { class: "label-flex" }, h("label", null, input.label, " ", this.renderAsterisk(input)), h("div", { class: "ms-auto" }, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : '')));
     var _a;
-    return (h("div", { class: "input-group" }, h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString() }), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (h("div", { class: "input-group" }, h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), disabled: this.isFormSubmitted }), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
   renderSelectControl(input) {
     var _a;
-    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString() }, h("option", { value: "" }, "Select"), input.options.map((option) => (h("option", { value: option[input.key] }, option[input.keyName]))))));
+    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, h("option", { value: "" }, "Select"), input.options.map((option) => (h("option", { value: option[input.key] }, option[input.keyName]))))));
   }
@@ -95,3 +97,3 @@ renderRadioControl(input) {
       var _a;
-      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key], autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: option[input.key] }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
+      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key], autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
       // <option value={option[input.key]}>{option[input.keyName]}</option>
@@ -104,3 +106,3 @@ );
     // console.log(input);
-    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: "on" }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
+    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
   }
@@ -124,4 +126,10 @@ renderInputGroup(input) {
   }
+  renderButton() {
+    if (this.isFormSubmitted) {
+      return '';
+    }
+    return (h("button", { type: "submit" }, "Submit"));
+  }
   render() {
-    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (h("div", { class: "form-group" }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input)))), h("button", { type: "submit" }, "Submit")));
+    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (h("div", { class: "form-group" }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input)))), this.renderButton()));
   }
@@ -128,0 +136,0 @@ get elm() { return this; }

dist/dynamic-form-builder/dynamic-form-builder.esm.js

@@ -1,2 +0,2 @@
-import{p as r,b as e}from"./p-8e191ad5.js";export{s as setNonce}from"./p-8e191ad5.js";const a=()=>{const e=import.meta.url;const a={};if(e!==""){a.resourcesUrl=new URL(".",e).href}return r(a)};a().then((r=>e([["p-a2b7d4a3",[[0,"date-picker",{selectedDate:[32]}]]],["p-3189010e",[[0,"dynamic-form",{formData:[16],formErrors:[32],formError:[32],isFormSubmitted:[32]}]]],["p-da97c790",[[0,"input-control",{isFormError:[4,"is-form-error"],inputData:[16]}]]],["p-81455fd1",[[0,"date-picker-calendar",{selectedDate:[16],currentMonth:[32]}]]],["p-f7fb2ca1",[[1,"date-picker-overlay",{target:[16],displayDate:[16],showCalendar:[32]}]]]],r)));
+import{p as r,b as e}from"./p-8e191ad5.js";export{s as setNonce}from"./p-8e191ad5.js";const a=()=>{const e=import.meta.url;const a={};if(e!==""){a.resourcesUrl=new URL(".",e).href}return r(a)};a().then((r=>e([["p-a2b7d4a3",[[0,"date-picker",{selectedDate:[32]}]]],["p-f7ac8193",[[0,"dynamic-form",{formData:[16],formErrors:[32],formError:[32],isFormSubmitted:[32]}]]],["p-da97c790",[[0,"input-control",{isFormError:[4,"is-form-error"],inputData:[16]}]]],["p-81455fd1",[[0,"date-picker-calendar",{selectedDate:[16],currentMonth:[32]}]]],["p-f7fb2ca1",[[1,"date-picker-overlay",{target:[16],displayDate:[16],showCalendar:[32]}]]]],r)));
 //# sourceMappingURL=dynamic-form-builder.esm.js.map

dist/esm/dynamic-form.entry.js

@@ -27,4 +27,6 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './index-97d7affa.js';
   handleClearInput(input) {
-    let inp = document.getElementById(input.name);
-    inp.value = "";
+    if (!this.isFormSubmitted) {
+      let inp = document.getElementById(input.name);
+      inp.value = "";
+    }
   }
@@ -34,2 +36,5 @@ handleSubmit(event) {
     event.preventDefault();
+    if (this.isFormSubmitted) {
+      return '';
+    }
     this.formErrors = {};
@@ -57,2 +62,3 @@ this.formError = false;
       const data = Object.fromEntries(formData.entries());
+      this.isFormSubmitted = true;
       // console.log(formData);
@@ -72,6 +78,2 @@ this.formSubmitted.emit(data);
   }
-  renderFormGroup(input) {
-    let html = (h("div", { class: "form-group" }, h("div", { class: "label-flex" }, h("label", null, input.label, " ", this.renderAsterisk(input)), h("div", { class: "ms-auto" }, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : '')), h("div", { class: "input-group" }, h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none' }), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" })))))));
-    return html;
-  }
   renderFormLabel(input) {
@@ -83,7 +85,7 @@ let label = (h("div", { class: "label-flex" }, h("label", null, input.label, " ", this.renderAsterisk(input)), h("div", { class: "ms-auto" }, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : '')));
     var _a;
-    return (h("div", { class: "input-group" }, h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString() }), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (h("div", { class: "input-group" }, h("input", { type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onInput: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), disabled: this.isFormSubmitted }), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
   renderSelectControl(input) {
     var _a;
-    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString() }, h("option", { value: "" }, "Select"), input.options.map((option) => (h("option", { value: option[input.key] }, option[input.keyName]))))));
+    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, h("option", { value: "" }, "Select"), input.options.map((option) => (h("option", { value: option[input.key] }, option[input.keyName]))))));
   }
@@ -94,3 +96,3 @@ renderRadioControl(input) {
       var _a;
-      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key], autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: option[input.key] }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
+      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key], autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
       // <option value={option[input.key]}>{option[input.keyName]}</option>
@@ -103,3 +105,3 @@ );
     // console.log(input);
-    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: "on" }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
+    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: input.required, onChange: (event) => this.handleInput(event, input.name), id: input.name, autoComplete: 'none', "data-error": (_a = this.formErrors[input.name]) === null || _a === void 0 ? void 0 : _a.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
   }
@@ -123,4 +125,10 @@ renderInputGroup(input) {
   }
+  renderButton() {
+    if (this.isFormSubmitted) {
+      return '';
+    }
+    return (h("button", { type: "submit" }, "Submit"));
+  }
   render() {
-    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (h("div", { class: "form-group" }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input)))), h("button", { type: "submit" }, "Submit")));
+    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (h("div", { class: "form-group" }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input)))), this.renderButton()));
   }
@@ -127,0 +135,0 @@ get elm() { return getElement(this); }

dist/types/components/dynamic-form/dynamic-form.d.ts

@@ -11,5 +11,4 @@ import { EventEmitter } from '../../stencil-public-runtime';
   handleClearInput(input: any): void;
-  handleSubmit(event: any): void;
+  handleSubmit(event: any): string;
   renderAsterisk(input: any): any;
-  renderFormGroup(input: any): any;
   renderFormLabel(input: any): any;
@@ -21,3 +20,4 @@ renderInputControl(input: any): any;
   renderInputGroup(input: any): any;
+  renderButton(): any;
   render(): any;
 }

package.json

 {
   "name": "xconcepts-dynamic-form",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Stencil Component Starter",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

25380

increased by0.08%

Worsened metrics

Total package byte prevSize

4701717

decreased by-0.21%

No dependency changes