xconcepts-dynamic-form - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

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

@@ -66,5 +66,12 @@ 'use strict';
   }
+  getPattern(val) {
+    const patternString = val.replace(/^\/|\/$/g, ''); // Remove enclosing slashes
+    const regexPattern = new RegExp(patternString);
+    return regexPattern;
+  }
   renderInputControl(input) {
     var _a, _b;
-    return (index.h("div", { class: "input-group" }, index.h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), 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" }))))));
+    // let pattern: any = input.validation.pattern ? this.getPattern(input.validation.pattern) : '';
+    // let pattern: any = input.validation.pattern ? input.validation.pattern : '';
+    return (index.h("div", { class: "input-group" }, index.h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}), (input.validation.step ? { step: input.validation.step } : {}))), 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" }))))));
   }
@@ -111,2 +118,3 @@ renderSelectControl(input) {
     this.formError = false;
+    console.log(input);
     // this.formErrors[inputName] = !event.target.validity.valid;
@@ -118,2 +126,3 @@ let inputName = input.name;
     let validationObject = xInput.validity ? xInput.validity : {};
+    console.log(validationObject);
     for (const key in validationObject) {
@@ -120,0 +129,0 @@ if (key !== "valid" && validationObject[key]) {

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

@@ -57,5 +57,12 @@ import { h } from '@stencil/core';
   }
+  getPattern(val) {
+    const patternString = val.replace(/^\/|\/$/g, ''); // Remove enclosing slashes
+    const regexPattern = new RegExp(patternString);
+    return regexPattern;
+  }
   renderInputControl(input) {
     var _a, _b;
-    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), 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" }))))));
+    // let pattern: any = input.validation.pattern ? this.getPattern(input.validation.pattern) : '';
+    // let pattern: any = input.validation.pattern ? input.validation.pattern : '';
+    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}), (input.validation.step ? { step: input.validation.step } : {}))), 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" }))))));
   }
@@ -102,2 +109,3 @@ renderSelectControl(input) {
     this.formError = false;
+    console.log(input);
     // this.formErrors[inputName] = !event.target.validity.valid;
@@ -109,2 +117,3 @@ let inputName = input.name;
     let validationObject = xInput.validity ? xInput.validity : {};
+    console.log(validationObject);
     for (const key in validationObject) {
@@ -111,0 +120,0 @@ if (key !== "valid" && validationObject[key]) {

dist/components/dynamic-form.js

@@ -63,5 +63,12 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
   }
+  getPattern(val) {
+    const patternString = val.replace(/^\/|\/$/g, ''); // Remove enclosing slashes
+    const regexPattern = new RegExp(patternString);
+    return regexPattern;
+  }
   renderInputControl(input) {
     var _a, _b;
-    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), 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" }))))));
+    // let pattern: any = input.validation.pattern ? this.getPattern(input.validation.pattern) : '';
+    // let pattern: any = input.validation.pattern ? input.validation.pattern : '';
+    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}), (input.validation.step ? { step: input.validation.step } : {}))), 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" }))))));
   }
@@ -108,2 +115,3 @@ renderSelectControl(input) {
     this.formError = false;
+    console.log(input);
     // this.formErrors[inputName] = !event.target.validity.valid;
@@ -115,2 +123,3 @@ let inputName = input.name;
     let validationObject = xInput.validity ? xInput.validity : {};
+    console.log(validationObject);
     for (const key in validationObject) {
@@ -117,0 +126,0 @@ if (key !== "valid" && validationObject[key]) {

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

@@ -1,2 +0,2 @@
-import{p as r,b as e}from"./p-daf508c1.js";export{s as setNonce}from"./p-daf508c1.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-3c7e69bf",[[0,"date-picker",{selectedDate:[32]}]]],["p-7912facf",[[0,"dynamic-form",{formData:[16],index:[2],isDisabled:[4,"is-disabled"],formErrors:[32],formError:[32],isFormSubmitted:[32],formErrorsMessage:[32]}]]],["p-f78500b8",[[0,"input-control",{isFormError:[4,"is-form-error"],inputData:[16]}]]],["p-830079a4",[[0,"date-picker-calendar",{selectedDate:[16],currentMonth:[32]}]]],["p-47bdd52d",[[1,"date-picker-overlay",{target:[16],displayDate:[16],showCalendar:[32]}]]]],r)));
+import{p as r,b as e}from"./p-daf508c1.js";export{s as setNonce}from"./p-daf508c1.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-3c7e69bf",[[0,"date-picker",{selectedDate:[32]}]]],["p-590d0d25",[[0,"dynamic-form",{formData:[16],index:[2],isDisabled:[4,"is-disabled"],formErrors:[32],formError:[32],isFormSubmitted:[32],formErrorsMessage:[32]}]]],["p-f78500b8",[[0,"input-control",{isFormError:[4,"is-form-error"],inputData:[16]}]]],["p-830079a4",[[0,"date-picker-calendar",{selectedDate:[16],currentMonth:[32]}]]],["p-47bdd52d",[[1,"date-picker-overlay",{target:[16],displayDate:[16],showCalendar:[32]}]]]],r)));
 //# sourceMappingURL=dynamic-form-builder.esm.js.map

dist/esm/dynamic-form.entry.js

@@ -62,5 +62,12 @@ import { r as registerInstance, c as createEvent, h } from './index-dce6ad62.js';
   }
+  getPattern(val) {
+    const patternString = val.replace(/^\/|\/$/g, ''); // Remove enclosing slashes
+    const regexPattern = new RegExp(patternString);
+    return regexPattern;
+  }
   renderInputControl(input) {
     var _a, _b;
-    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), 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" }))))));
+    // let pattern: any = input.validation.pattern ? this.getPattern(input.validation.pattern) : '';
+    // let pattern: any = input.validation.pattern ? input.validation.pattern : '';
+    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}), (input.validation.step ? { step: input.validation.step } : {}))), 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" }))))));
   }
@@ -107,2 +114,3 @@ renderSelectControl(input) {
     this.formError = false;
+    console.log(input);
     // this.formErrors[inputName] = !event.target.validity.valid;
@@ -114,2 +122,3 @@ let inputName = input.name;
     let validationObject = xInput.validity ? xInput.validity : {};
+    console.log(validationObject);
     for (const key in validationObject) {
@@ -116,0 +125,0 @@ if (key !== "valid" && validationObject[key]) {

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

@@ -16,2 +16,3 @@ import { EventEmitter } from '../../stencil-public-runtime';
   renderInputGroup(input: any): any;
+  getPattern(val: any): RegExp;
   renderInputControl(input: any): any;
@@ -18,0 +19,0 @@ renderSelectControl(input: any): any;

package.json

 {
   "name": "xconcepts-dynamic-form",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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

Total package byte prevSize

4812577

increased by0.14%

Lines of code

26151

increased by0.14%

No dependency changes