@luftborn/custom-elements 1.4.0 → 2.0.0

package/package.json

@@ -1,38 +1,38 @@
-{
-	"name": "@luftborn/custom-elements",
-	"version": "1.4.0",
-	"description": "custom HTML elements for the form builder application ",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
-		"prepublish": "tsc --declaration"
-	},
-	"main": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"author": "Luftborn",
-	"license": "ISC",
-	"bundledDependencies": [
-		"@webcomponents/webcomponentsjs"
-	],
-	"dependencies": {
-		"@types/googlemaps": "^3.39.6",
-		"@webcomponents/custom-elements": "^1.4.1",
-		"@webcomponents/webcomponentsjs": "^2.4.3",
-		"intl-tel-input": "^16.0.8",
-		"restore": "^0.3.0"
-	},
-	"devDependencies": {
-		"@babel/core": "^7.10.0",
-		"@types/node": "^14.0.5",
-		"babelify": "~10.0.0",
-		"browserify": "~16.5.1",
-		"gulp": "^4.0.2",
-		"gulp-rename": "~1.4.0",
-		"gulp-sourcemaps": "~2.6.5",
-		"gulp-uglify": "~3.0.2",
-		"gulp-webserver": "~0.9.1",
-		"tsify": "~4.0.1",
-		"typescript": "4.4.3",
-		"vinyl-buffer": "~1.0.1",
-		"vinyl-source-stream": "~2.0.0"
-	}
-}
+{
+	"name": "@luftborn/custom-elements",
+	"version": "2.0.0",
+	"description": "custom HTML elements for the form builder application ",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"prepublish": "tsc --declaration"
+	},
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"author": "Luftborn",
+	"license": "ISC",
+	"bundledDependencies": [
+		"@webcomponents/webcomponentsjs"
+	],
+	"dependencies": {
+		"@types/googlemaps": "^3.39.6",
+		"@webcomponents/custom-elements": "^1.4.1",
+		"@webcomponents/webcomponentsjs": "^2.4.3",
+		"intl-tel-input": "^16.0.8",
+		"restore": "^0.3.0"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.10.0",
+		"@types/node": "^14.0.5",
+		"babelify": "~10.0.0",
+		"browserify": "~16.5.1",
+		"gulp": "^4.0.2",
+		"gulp-rename": "~1.4.0",
+		"gulp-sourcemaps": "~2.6.5",
+		"gulp-uglify": "~3.0.2",
+		"gulp-webserver": "~0.9.1",
+		"tsify": "~4.0.1",
+		"typescript": "4.4.3",
+		"vinyl-buffer": "~1.0.1",
+		"vinyl-source-stream": "~2.0.0"
+	}
+}

package/src/custom-form.ts

@@ -1,140 +1,140 @@
-import { CustomInputElement } from './framework/CustomInputElement';
-import { FileFieldElement } from './elements/FileField/FileFieldElement';
-import ArrayUtil from './framework/Utilities/ArrayUtil';
-import MakeRequest from './framework/Utilities/MakeRequest';
-
-export class CustomForm {
-	action: string;
-	method: string;
-	_nativeInputs: HTMLInputElement[];
-
-	public onsubmit: ((this: CustomForm, promise: Promise<any>) => any) | null;
-
-	constructor(private form: HTMLFormElement) {
-		this.action = form.action || '';
-		this.method = form.method || 'get';
-		this.attachForm();
-		this.binGroupsToDependency();
-	}
-
-	get inputs(): CustomInputElement[] {
-		return ArrayUtil.FromNodeList(this.form.querySelectorAll('.group-container:not([hidden]) [custom-input]:not([hidden])'));
-	}
-	get nativeInputs(): HTMLInputElement[] {
-		this._nativeInputs =
-			this._nativeInputs ||
-			ArrayUtil.FromNodeList(this.form.querySelectorAll('input'));
-		return this._nativeInputs;
-	}
-
-	get hasFiles(): boolean {
-		return this.inputs.some(input => input instanceof FileFieldElement);
-	}
-
-	attachForm() {
-		this.form.onsubmit = event => {
-			event.preventDefault();
-			let valid = this.validate();
-			if (valid) {
-				if (this.onsubmit) {
-					this.onsubmit(this.submit());
-				}
-			}
-		};
-	}
-
-	validate(): boolean {
-		this.inputs.forEach(input => (<CustomInputElement>input).validate());
-		return this.inputs.every(input => (<CustomInputElement>input).valid);
-	}
-
-	submit(): Promise<any> {
-		let formData = {};
-		const headers: any = {};
-		this.inputs.map(i => (formData[i.name] = i.value));
-		formData = this.extractData();
-		return new MakeRequest(this.action, this.method, headers).send(
-			formData,
-		);
-	}
-	private extractData(): FormData {
-		const formData: FormData = new FormData();
-		for (const input of this.inputs) {
-			if (input instanceof FileFieldElement) {
-				for (let index = 0; index < input.value.length; index++) {
-					const file = input.value[index];
-					formData.append(input.name, file, file.name);
-				}
-			} else {
-				formData.append(`Values[${input.name}]`, input.value);
-			}
-		}
-		for (const input of this.nativeInputs) {
-			if (input.name) {
-				formData.append(input.name, input.value);
-			}
-		}
-		return formData;
-	}
-
-	private binGroupsToDependency() {
-		let groupContainers = this.form.querySelectorAll('div.group-container:not([data-depends-on=""])',
-		);
-		groupContainers.forEach((element: HTMLElement) => {
-			let dependentField = element.getAttribute('data-depends-on');
-			let dependentValue = element.getAttribute('data-dependent-value');
-			let customElement: CustomInputElement = document.forms[0].querySelector(`[name="${dependentField}"]`) as CustomInputElement;
-			element.setAttribute("hidden", "");
-			customElement.onChange.on(event => {
-				if (event.value === dependentValue || event.value.indexOf(dependentValue) >= 0) {
-					this.showGroupAndItsDependencies(element);
-				} else {
-					this.hideGroupAndItsDependencies(element);
-				}
-			});
-		});
-	}
-
-	private hideGroupAndItsDependencies(group: Element) {
-		const inputElementsInsideGroup = this.inputs.filter(input => this.isDescendant(group, input));
-		group.setAttribute("hidden", "");
-		let groupContainers = this.form.querySelectorAll('div.group-container:not([data-depends-on=""])');
-		groupContainers.forEach(otherGroup => {
-			if (otherGroup !== group) {
-				let groupDependsOnField = otherGroup.getAttribute('data-depends-on');
-				inputElementsInsideGroup.forEach(input => {
-					if (input.name === groupDependsOnField) {
-						this.hideGroupAndItsDependencies(otherGroup);
-					}
-				});
-			}
-		});
-	}
-	private showGroupAndItsDependencies(group: Element) {
-		group.removeAttribute("hidden");
-		const inputElementsInsideGroup = this.inputs.filter(input => this.isDescendant(group, input));
-		let groupContainers = this.form.querySelectorAll('div.group-container:not([data-depends-on=""])');
-		groupContainers.forEach(otherGroup => {
-			if (otherGroup !== group) {
-				let groupDependsOnField = otherGroup.getAttribute('data-depends-on');
-				let dependentValue = otherGroup.getAttribute('data-dependent-value');
-				inputElementsInsideGroup.forEach(input => {
-					if (input.name === groupDependsOnField && (input.value === dependentValue || input.value.indexOf(dependentValue) >= 0)) {
-						this.showGroupAndItsDependencies(otherGroup);
-					}
-				});
-			}
-		});
-	}
-	private isDescendant(parent: Element, child: Element) {
-		var node = child.parentNode;
-		while (node != null) {
-			if (node === parent) {
-				return true;
-			}
-			node = node.parentElement;
-		}
-		return false;
-	}
-
-}
+import { CustomInputElement } from './framework/CustomInputElement';
+import { FileFieldElement } from './elements/FileField/FileFieldElement';
+import ArrayUtil from './framework/Utilities/ArrayUtil';
+import MakeRequest from './framework/Utilities/MakeRequest';
+
+export class CustomForm {
+	action: string;
+	method: string;
+	_nativeInputs: HTMLInputElement[];
+
+	public onsubmit: ((this: CustomForm, promise: Promise<any>) => any) | null;
+
+	constructor(private form: HTMLFormElement) {
+		this.action = form.action || '';
+		this.method = form.method || 'get';
+		this.attachForm();
+		this.binGroupsToDependency();
+	}
+
+	get inputs(): CustomInputElement[] {
+		return ArrayUtil.FromNodeList(this.form.querySelectorAll('.group-container:not([hidden]) [custom-input]:not([hidden])'));
+	}
+	get nativeInputs(): HTMLInputElement[] {
+		this._nativeInputs =
+			this._nativeInputs ||
+			ArrayUtil.FromNodeList(this.form.querySelectorAll('input'));
+		return this._nativeInputs;
+	}
+
+	get hasFiles(): boolean {
+		return this.inputs.some(input => input instanceof FileFieldElement);
+	}
+
+	attachForm() {
+		this.form.onsubmit = event => {
+			event.preventDefault();
+			let valid = this.validate();
+			if (valid) {
+				if (this.onsubmit) {
+					this.onsubmit(this.submit());
+				}
+			}
+		};
+	}
+
+	validate(): boolean {
+		this.inputs.forEach(input => (<CustomInputElement>input).validate());
+		return this.inputs.every(input => (<CustomInputElement>input).valid);
+	}
+
+	submit(): Promise<any> {
+		let formData = {};
+		const headers: any = {};
+		this.inputs.map(i => (formData[i.name] = i.value));
+		formData = this.extractData();
+		return new MakeRequest(this.action, this.method, headers).send(
+			formData,
+		);
+	}
+	private extractData(): FormData {
+		const formData: FormData = new FormData();
+		for (const input of this.inputs) {
+			if (input instanceof FileFieldElement) {
+				for (let index = 0; index < input.value.length; index++) {
+					const file = input.value[index];
+					formData.append(input.name, file, file.name);
+				}
+			} else {
+				formData.append(`Values[${input.name}]`, input.value);
+			}
+		}
+		for (const input of this.nativeInputs) {
+			if (input.name) {
+				formData.append(input.name, input.value);
+			}
+		}
+		return formData;
+	}
+
+	private binGroupsToDependency() {
+		let groupContainers = this.form.querySelectorAll('div.group-container:not([data-depends-on=""])',
+		);
+		groupContainers.forEach((element: HTMLElement) => {
+			let dependentField = element.getAttribute('data-depends-on');
+			let dependentValue = element.getAttribute('data-dependent-value');
+			let customElement: CustomInputElement = document.forms[0].querySelector(`[name="${dependentField}"]`) as CustomInputElement;
+			element.setAttribute("hidden", "");
+			customElement.onChange.on(event => {
+				if (event.value === dependentValue || event.value.indexOf(dependentValue) >= 0) {
+					this.showGroupAndItsDependencies(element);
+				} else {
+					this.hideGroupAndItsDependencies(element);
+				}
+			});
+		});
+	}
+
+	private hideGroupAndItsDependencies(group: Element) {
+		const inputElementsInsideGroup = this.inputs.filter(input => this.isDescendant(group, input));
+		group.setAttribute("hidden", "");
+		let groupContainers = this.form.querySelectorAll('div.group-container:not([data-depends-on=""])');
+		groupContainers.forEach(otherGroup => {
+			if (otherGroup !== group) {
+				let groupDependsOnField = otherGroup.getAttribute('data-depends-on');
+				inputElementsInsideGroup.forEach(input => {
+					if (input.name === groupDependsOnField) {
+						this.hideGroupAndItsDependencies(otherGroup);
+					}
+				});
+			}
+		});
+	}
+	private showGroupAndItsDependencies(group: Element) {
+		group.removeAttribute("hidden");
+		const inputElementsInsideGroup = this.inputs.filter(input => this.isDescendant(group, input));
+		let groupContainers = this.form.querySelectorAll('div.group-container:not([data-depends-on=""])');
+		groupContainers.forEach(otherGroup => {
+			if (otherGroup !== group) {
+				let groupDependsOnField = otherGroup.getAttribute('data-depends-on');
+				let dependentValue = otherGroup.getAttribute('data-dependent-value');
+				inputElementsInsideGroup.forEach(input => {
+					if (input.name === groupDependsOnField && (input.value === dependentValue || input.value.indexOf(dependentValue) >= 0)) {
+						this.showGroupAndItsDependencies(otherGroup);
+					}
+				});
+			}
+		});
+	}
+	private isDescendant(parent: Element, child: Element) {
+		var node = child.parentNode;
+		while (node != null) {
+			if (node === parent) {
+				return true;
+			}
+			node = node.parentElement;
+		}
+		return false;
+	}
+
+}