added form validators

src/components/app-dropdown/AppDropdownElement.ts

@@ -1,10 +1,10 @@
 import { attr, controller, target } from '@github/catalyst';
-import { findMethod, firstUpper } from 'core/utils';
-import { html } from 'lit-html';
+import { closest, findMethod, firstUpper } from 'core/utils';
+import { html } from 'core/utils';
 import randomId from 'core/utils/random-id';
-import validator from 'validator';
 import { validatorErrors } from 'core/constants';
-import { BaseComponentElement } from 'common/';
+import { BaseComponentElement, Validator } from 'common/';
+import { AppFormElement } from 'components/app-form/AppFormElement';
 
 @controller
 class AppDropdownElement extends BaseComponentElement {
@@ -13,12 +13,12 @@ class AppDropdownElement extends BaseComponentElement {
 	@attr rules: string;
 	@target main: HTMLElement;
 	@target inp: HTMLElement;
+	@target dropdowncontainer: HTMLElement;
 	@attr displaykey: string = 'name';
 	@attr valuekey: string = 'id';
 	@attr fetch: string;
-	fetchFunc: any;
+	@closest appForm: AppFormElement;
 
-	error: boolean;
 	errorMessage: string;
 
 	searchPhrase: string;
@@ -32,10 +32,56 @@ class AppDropdownElement extends BaseComponentElement {
 	totalItems: number;
 	page: number = 1;
 	rpp: number = 30;
+	validator: Validator;
 
 	constructor() {
 		super();
 	}
+
+	updateCallback = () => {
+		this.dropdowncontainer?.scrollIntoView();
+	};
+
+	public elementConnected = (): void => {
+		this.validator = new Validator(this, this.appForm, this.rules);
+		this.randId = `${name}${randomId()}`;
+		this.update();
+
+		const options = {
+			rpp: this.rpp,
+			page: this.page,
+		};
+		this.getItems(options);
+	};
+
+	attributeChangedCallback(): void {
+		this.update();
+	}
+
+	setError = (error) => {
+		this.validator.error = error;
+	};
+
+	get error(): string {
+		return this.validator?.error;
+	}
+
+	get isValid(): boolean {
+		return this.validator?.valid;
+	}
+
+	get required(): boolean {
+		return this.rules.includes('required');
+	}
+
+	get _value() {
+		return this.value;
+	}
+
+	validate = (): boolean => {
+		return this.validator.validate();
+	};
+
 	getItems = async (options?: any): Promise<void> => {
 		if (typeof this.fetchFunc !== 'function') return;
 		try {
@@ -68,8 +114,6 @@ class AppDropdownElement extends BaseComponentElement {
 			return value == item[valuekey];
 		});
 
-		console.log(item, value, valuekey);
-
 		return item;
 	}
 
@@ -83,61 +127,16 @@ class AppDropdownElement extends BaseComponentElement {
 		return values;
 	}
 
-	public elementConnected = (): void => {
-		this.randId = `${name}${randomId()}`;
-		this.fetchFunc = findMethod(this.fetch, this.appMain);
-		this.update();
+	get fetchFunc() {
+		return findMethod(this.fetch, this.appMain);
+	}
 
-		const options = {
-			rpp: this.rpp,
-			page: this.page,
-		};
-		this.getItems(options);
+	setOpen = (isOpen) => {
+		this.isOpen = isOpen;
 	};
 
-	attributeChangedCallback(): void {
-		this.update();
-	}
-
-	get valid(): boolean {
-		return !!this.error;
-	}
-
-	get required(): boolean {
-		return this.rules.includes('required');
-	}
-
-	validate(): boolean {
-		let _return = true;
-		const rules = this.rules?.split('|').filter((a) => a);
-		const value = (this.inp as HTMLSelectElement)?.value;
-		rules
-			.slice()
-			.reverse()
-			.forEach((rule) => {
-				let valid = true;
-				if (rule == 'required') {
-					if (value === '') valid = false;
-				} else {
-					if (validator.hasOwnProperty(rule)) {
-						valid = validator?.[rule]?.(value);
-					}
-				}
-				if (!valid) {
-					const error = validatorErrors[rule]?.replaceAll('{- name}', firstUpper(this.name?.toString()));
-					_return = false;
-					this.error = error;
-				}
-			});
-		if (_return) {
-			this.error = null;
-		}
-		this.update();
-		return _return;
-	}
-
 	openDropdown = () => {
-		this.isOpen = true;
+		this.setOpen(true);
 	};
 
 	stopPropagation = (e) => {
@@ -146,24 +145,24 @@ class AppDropdownElement extends BaseComponentElement {
 
 	toggleDropdown = () => {
 		const isOpen = this.isOpen;
-		this.isOpen = !isOpen;
+		this.setOpen(!isOpen);
 	};
 
 	itemSelected = (e) => {
 		const value = (e.target as HTMLSpanElement).getAttribute('data-value');
-		this.value = value;
-		this.isOpen = false;
+		this.setOpen(false);
+		this.setValue(value);
+		this.appForm?.inputChange(e);
 	};
 
-	get _value() {
-		return this.value;
-	}
+	setValue = (value) => {
+		this.value = value;
+		this.update();
+	};
 
 	render = () => {
 		const { label, error, errorMessage, isOpen, searchPhrase, items, selectedItem, displaykey, valuekey } = this;
 
-		console.log(isOpen);
-
 		const renderItem = (item) => {
 			return html` <li
 				class="dropdown-custom-listitem ${selectedItem?.[valuekey] == item[valuekey] ? '--selected' : ''}"
@@ -175,7 +174,7 @@ class AppDropdownElement extends BaseComponentElement {
 		};
 
 		const renderItems = (_items) => {
-			return _items.map((item) => renderItem(item));
+			return _items?.map((item) => renderItem(item));
 		};
 
 		return html`
@@ -183,12 +182,12 @@ class AppDropdownElement extends BaseComponentElement {
 				<label app-action="click:app-dropdown#openDropdown">
 					${label ? html`<div>${label}</div>` : html``}
 					<div class="dropdown-custom" app-action="click:app-dropdown#stopPropagation">
-						<div class="dropdown-custom-top" app-action="click:app-dropdown#toggleDropdown">
+						<div class="dropdown-custom-top${isOpen ? ' --open' : ''}" app-action="click:app-dropdown#toggleDropdown">
 							<span class="dropdown-custom-fieldname">${selectedItem ? selectedItem[displaykey] : 'Select'}</span>
 						</div>
 						${isOpen
 							? html`
-									<div class="dropdown-custom-open">
+									<div class="dropdown-custom-open" data-target="app-dropdown.dropdowncontainer">
 										<input
 											class="dropdown-custom-search"
 											type="text"

src/components/app-form/AppFormElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult, unsafeHTML } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
 import { InputFieldElement } from 'components/input-field/InputFieldElement';
@@ -20,6 +20,10 @@ class AppFormElement extends BaseComponentElement {
 		super();
 	}
 
+	get submitFunc() {
+		return findMethod(this.custom, this.appMain);
+	}
+
 	public inputChange = (e) => {
 		this.validate();
 		this.update();
@@ -30,19 +34,19 @@ class AppFormElement extends BaseComponentElement {
 		if (!this.valid) {
 			return;
 		}
-		const actionString = this.custom;
-		const submitFunc = findMethod(actionString, this.appMain);
-		submitFunc?.(this.values);
+		this.submitFunc?.(this.values);
 		return false;
 	};
 
 	public validate = () => {
-		this.isValid = true;
+		const validArr = [];
 		this.inputField?.forEach((input) => {
-			if (input?.error) {
-				this.isValid = false;
-			}
+			validArr.push(input?.validate());
 		});
+		this.appDropdown?.forEach((input) => {
+			validArr.push(input?.validate());
+		});
+		this.isValid = !validArr?.includes(false);
 	};
 
 	public setError = (error) => {
@@ -75,6 +79,19 @@ class AppFormElement extends BaseComponentElement {
 		return formObject;
 	}
 
+	getInput = (name: string): InputFieldElement | AppDropdownElement => {
+		let formObject;
+		this.inputField.forEach((input: InputFieldElement) => {
+			const inputType = input;
+			if (inputType.name === name) formObject = inputType;
+		});
+		this.appDropdown.forEach((input: AppDropdownElement) => {
+			const inputType = input;
+			if (inputType.name === name) formObject = inputType;
+		});
+		return formObject;
+	};
+
 	get valid() {
 		let _valid = 0;
 		this.inputField?.forEach((input) => {

src/components/app-link/AppLinkElement.ts

@@ -1,6 +1,6 @@
 import { attr, controller, target } from '@github/catalyst';
 import { isTrue } from 'core/utils';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { AppMainElement } from 'components/app-main/AppMainElement';
 import { RouterService } from 'core/services';
 import { BaseComponentElement } from 'common/';

src/components/app-loader/AppLoaderElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from '@github/catalyst';
-import { html } from 'lit-html';
+import { html } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 
 @controller

src/components/app-menu/AppMenuElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { AppMainElement } from 'components/app-main/AppMainElement';
 import { MenuItemElement } from 'components/menu-item/MenuItemElement';
@@ -78,7 +78,7 @@ class AppMenuElement extends BaseComponentElement {
 		}
 	};
 
-	modalTransaction = (): void => {
+	modalTransaction = (s): void => {
 		const _modal = this.appMain.appModal;
 		if (_modal) {
 			this.appMain.closeModal();

src/components/app-pagination/AppPaginationElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
 

src/components/circle-loader/CircleLoaderElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller } from '@github/catalyst';
-import { html } from 'lit-html';
+import { html } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 
 @controller

src/components/input-field/InputFieldElement.ts

@@ -1,12 +1,11 @@
 import { attr, controller, target } from '@github/catalyst';
 import { closest, firstUpper } from 'core/utils';
-import { html, TemplateResult } from 'lit-html';
-import { RouterService } from 'core/services';
+import { html, TemplateResult } from 'core/utils';
 import randomId from 'core/utils/random-id';
-import validator from 'validator';
 import { validatorErrors } from 'core/constants';
-import { BaseComponentElement } from 'common/';
+import { BaseComponentElement, Validator } from 'common/';
 import { AppFormElement } from 'components/app-form/AppFormElement';
+import { validator } from 'core/utils';
 
 @controller
 class InputFieldElement extends BaseComponentElement {
@@ -17,21 +16,33 @@ class InputFieldElement extends BaseComponentElement {
 	@target main: HTMLElement;
 	@target inp: HTMLElement;
 	@closest appForm: AppFormElement;
-	error: string;
+	valid: boolean;
 	displayError: boolean;
 	randId: string;
+
+	validator: Validator;
+
 	constructor() {
 		super();
 	}
 
 	public elementConnected = (): void => {
+		this.validator = new Validator(this, this.appForm, this.rules);
 		this.randId = `${name}${randomId()}`;
 		this.update();
 		this.validate();
 	};
 
-	get valid(): boolean {
-		return !!this.error;
+	setError = (error) => {
+		this.validator.error = error;
+	};
+
+	get error(): string {
+		return this.validator.error;
+	}
+
+	get isValid(): boolean {
+		return this.validator.valid;
 	}
 
 	get required(): boolean {
@@ -43,31 +54,7 @@ class InputFieldElement extends BaseComponentElement {
 	}
 
 	validate = (): boolean => {
-		let _return = true;
-		const rules = this.rules?.split('|').filter((a) => a);
-		const value = (this.inp as HTMLInputElement)?.value;
-		rules
-			.slice()
-			.reverse()
-			.forEach((rule) => {
-				let valid = true;
-				if (rule == 'required') {
-					if (value === '') valid = false;
-				} else {
-					if (validator.hasOwnProperty(rule)) {
-						valid = validator?.[rule]?.(value);
-					}
-				}
-				if (!valid) {
-					const error = validatorErrors[rule]?.replaceAll('{- name}', firstUpper(this.name?.toString()));
-					_return = false;
-					this.error = error;
-				}
-			});
-		if (_return) {
-			this.error = null;
-		}
-		return _return;
+		return this.validator.validate();
 	};
 
 	validateDisplay = () => {

src/components/menu-item/MenuItemElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { AppMainElement } from 'components/app-main/AppMainElement';
 import { BaseComponentElement } from 'common/';
 

src/components/wallet-header/WalletHeaderElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
 import { findMethod } from 'core/utils';
@@ -26,13 +26,14 @@ class WalletHeaderElement extends BaseComponentElement {
 		this.update();
 	}
 
-	executeFetch = async (options?): Promise<void> => {
-		const actionString = this.custom;
-		const submitFunc = findMethod(actionString, this.appMain);
+	get submitFunc() {
+		return findMethod(this.custom, this.appMain);
+	}
 
+	executeFetch = async (options?): Promise<void> => {
 		try {
 			this.loader?.start?.();
-			await submitFunc(options);
+			await this.submitFunc(options);
 			this.loader?.stop?.();
 		} catch (err) {
 			this.loader?.stop?.();