changes to structure

src/components/app-dropdown/AppDropdownElement.ts

@@ -1,12 +1,10 @@
-import { attr, controller, target } from '@github/catalyst';
-import { closest, findMethod, firstUpper } from 'core/utils';
-import { html } from 'core/utils';
+import { closest, findMethod, attr, controller, target } from 'core/utils';
 import randomId from 'core/utils/random-id';
-import { validatorErrors } from 'core/constants';
 import { BaseComponentElement, Validator } from 'common/';
 import { AppFormElement } from 'components/app-form/AppFormElement';
+import { AppDropdownElementTemplate } from 'components/app-dropdown';
 
-@controller
+@controller('app-dropdown')
 class AppDropdownElement extends BaseComponentElement {
 	@attr name: string;
 	@attr label: string;
@@ -82,7 +80,7 @@ class AppDropdownElement extends BaseComponentElement {
 	}
 
 	get required(): boolean {
-		return this.rules.includes('required');
+		return this.rules?.includes('required');
 	}
 
 	get _value() {
@@ -191,67 +189,21 @@ class AppDropdownElement extends BaseComponentElement {
 	setItemValue = (itemValue) => {
 		this.itemValue = itemValue;
 		this.update();
-	}
-
-	render = () => {
-		const { label, error, errorMessage, isOpen, searchPhrase, items, selectedItem, displaykey, valuekey } = this;
-
-		const renderMessage = (label: string) => {
-			if (label) {
-				return html`<label app-action="click:app-dropdown#openDropdown">${label}${this.required ? ' (*)' : ''}</label>`;
-			}
-			return html``;
-		};
-
-		const renderError = (error: string) => {
-			if (error) {
-				return html`<div class="input-error"><span>${error}</span></div>`;
-			}
-			return html``;
-		};
-
-		const renderItem = (item) => {
-			return html` <li
-				class="dropdown-custom-listitem ${selectedItem?.[valuekey] == item[valuekey] ? '--selected' : ''}"
-				app-action="click:app-dropdown#itemSelected"
-				data-value="${item[valuekey]}"
-			>
-				${item[displaykey]}
-			</li>`;
-		};
-
-		const renderItems = (_items) => {
-			return _items?.map((item) => renderItem(item));
-		};
-
-		return html`
-			<div class="app-dropdown">
-				${renderMessage(this.label)} ${renderError(this.error)}
-				<div class="dropdown-custom">
-					<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" data-target="app-dropdown.dropdowncontainer">
-									<input
-										class="dropdown-custom-search"
-										type="text"
-										value="${searchPhrase || ''}"
-										id="${this.randId}"
-										app-action="input:app-dropdown#phraseChange"
-										autofocus
-									/>
-									<ul class="dropdown-custom-list">
-										${renderItems(items)}
-									</ul>
-								</div>
-						  `
-						: html``}
-				</div>
-			</div>
-		`;
 	};
+
+	render = () =>
+		AppDropdownElementTemplate({
+			label: this.label,
+			error: this.error,
+			randId: this.randId,
+			required: this.required,
+			isOpen: this.isOpen,
+			searchPhrase: this.searchPhrase,
+			items: this.items,
+			selectedItem: this.selectedItem,
+			displaykey: this.displaykey,
+			valuekey: this.valuekey,
+		});
 }
 
 export type { AppDropdownElement };

src/components/app-dropdown/AppDropdownElementTemplate.ts

@@ -0,0 +1,61 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { label, error, randId, required, isOpen, searchPhrase, items, selectedItem, displaykey, valuekey } = props;
+
+	const renderMessage = (label: string) => {
+		if (label) {
+			return html`<label app-action="click:app-dropdown#openDropdown">${label}${required ? ' (*)' : ''}</label>`;
+		}
+		return nothing;
+	};
+
+	const renderError = (error: string) => {
+		if (error) {
+			return html`<div class="input-error"><span>${error}</span></div>`;
+		}
+		return nothing;
+	};
+
+	const renderItem = (item) => {
+		return html` <li
+			class="dropdown-custom-listitem ${selectedItem?.[valuekey] == item[valuekey] ? '--selected' : ''}"
+			app-action="click:app-dropdown#itemSelected"
+			data-value="${item[valuekey]}"
+		>
+			${item[displaykey]}
+		</li>`;
+	};
+
+	const renderItems = (_items) => {
+		return _items?.map((item) => renderItem(item));
+	};
+
+	return html`
+		<div class="app-dropdown">
+			${renderMessage(label)} ${renderError(error)}
+			<div class="dropdown-custom">
+				<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" data-target="app-dropdown.dropdowncontainer">
+								<input
+									class="dropdown-custom-search"
+									type="text"
+									value="${searchPhrase || ''}"
+									id="${randId}"
+									app-action="input:app-dropdown#phraseChange"
+									autofocus
+								/>
+								<ul class="dropdown-custom-list">
+									${renderItems(items)}
+								</ul>
+							</div>
+					  `
+					: nothing}
+			</div>
+		</div>
+	`;
+};

src/components/app-dropdown/index.ts

@@ -0,0 +1,2 @@
+export { default as AppDropdownElementTemplate } from './AppDropdownElementTemplate';
+export * from './AppDropdownElement';

src/components/app-form/AppFormElement.ts

@@ -1,11 +1,11 @@
-import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, attr, controller, target } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
 import { InputFieldElement } from 'components/input-field/InputFieldElement';
-import { findMethod, isTrue, querys } from 'core/utils';
+import { findMethod, querys } from 'core/utils';
+import { AppFormElementTemplate } from 'components/app-form';
 
-@controller
+@controller('app-form')
 class AppFormElement extends BaseComponentElement {
 	@target formElement: HTMLElement;
 	@target innerSlot: HTMLElement;
@@ -85,18 +85,18 @@ class AppFormElement extends BaseComponentElement {
 	set = (data): any => {
 		for (let i = 0; i < this.inputField.length; i++) {
 			const input = this.inputField[i];
-			if(data?.[input.name]) {
-				input._value = data[input.name]
-				this.update()
+			if (data?.[input.name]) {
+				input._value = data[input.name];
+				this.update();
 			}
 		}
 		this.appDropdown?.forEach((input: AppDropdownElement) => {
-			if(data?.[input.name]) {
-				input.setValue(data[input.name])
-				this.update()
+			if (data?.[input.name]) {
+				input.setValue(data[input.name]);
+				this.update();
 			}
 		});
-	}
+	};
 
 	getInput = (name: string): InputFieldElement | AppDropdownElement => {
 		let formObject;
@@ -123,48 +123,14 @@ class AppFormElement extends BaseComponentElement {
 		}
 	};
 
-	render = (): TemplateResult => {
-		const renderSubmit = (valid: boolean) => {
-			if (!valid) {
-				return html`
-					<button class="btn btn-squared btn-primary --submit disabled" type="submit" disabled>Submit</button>
-				`;
-			}
-			return html` <button class="btn btn-squared btn-primary --submit" type="submit">Submit</button> `;
-		};
-		const renderError = (error: string) => {
-			if (error) {
-				return html`<span>${error}</span>`;
-			}
-			return html``;
-		};
-		const renderCancel = (hasCancel: boolean) => {
-			if (hasCancel) {
-				return html`<button class="btn btn-squared btn-red --cancel" type="button" app-action="click:app-form#goBack">
-					Cancel
-				</button>`;
-			}
-			return html``;
-		};
-
-		return html`
-			<div class="app-form">
-				<form
-					app-action="submit:app-form#onSubmit"
-					data-target="app-form.formElement"
-					autocomplete="on"
-					method="POST"
-					action="javascript:void(0)"
-				>
-					${this.renderInput ? this.customRender() : html`<slot data-target="app-form.innerSlot"></slot>`}
-					${renderError(this.error)}
-					<div class="form-buttons">
-						<div class="button-content">${renderSubmit(this.isValid)}${renderCancel(isTrue(this.hasCancel))}</div>
-					</div>
-				</form>
-			</div>
-		`;
-	};
+	render = (): TemplateResult =>
+		AppFormElementTemplate({
+			renderInput: this.renderInput,
+			customRender: this.customRender,
+			error: this.error,
+			isValid: this.isValid,
+			hasCancel: this.hasCancel,
+		});
 }
 
 export type { AppFormElement };

src/components/app-form/AppFormElementTemplate.ts

@@ -0,0 +1,44 @@
+import { html, isTrue, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { renderInput, customRender, error, isValid, hasCancel } = props;
+	const renderSubmit = (valid: boolean) => {
+		if (!valid) {
+			return html`
+				<button class="btn btn-squared btn-primary --submit disabled" type="submit" disabled>Submit</button>
+			`;
+		}
+		return html` <button class="btn btn-squared btn-primary --submit" type="submit">Submit</button> `;
+	};
+	const renderError = (error: string) => {
+		if (error) {
+			return html`<span>${error}</span>`;
+		}
+		return html``;
+	};
+	const renderCancel = (hasCancel: boolean) => {
+		if (hasCancel) {
+			return html`<button class="btn btn-squared btn-red --cancel" type="button" app-action="click:app-form#goBack">
+				Cancel
+			</button>`;
+		}
+		return html``;
+	};
+
+	return html`
+		<div class="app-form">
+			<form
+				app-action="submit:app-form#onSubmit"
+				data-target="app-form.formElement"
+				autocomplete="on"
+				method="POST"
+				action="javascript:void(0)"
+			>
+				${renderInput ? customRender() : html`<slot data-target="app-form.innerSlot"></slot>`} ${renderError(error)}
+				<div class="form-buttons">
+					<div class="button-content">${renderSubmit(isValid)}${renderCancel(isTrue(hasCancel))}</div>
+				</div>
+			</form>
+		</div>
+	`;
+};

src/components/app-form/index.ts

@@ -0,0 +1,2 @@
+export { default as AppFormElementTemplate } from './AppFormElementTemplate';
+export * from './AppFormElement';

src/components/app-link/AppLinkElement.ts

@@ -1,11 +1,10 @@
-import { attr, controller, target } from '@github/catalyst';
 import { isTrue } from 'core/utils';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, attr, controller, target } from 'core/utils';
 import { AppMainElement } from 'components/app-main/AppMainElement';
-import { RouterService } from 'core/services';
 import { BaseComponentElement } from 'common/';
+import { AppLinkElementTemplate } from 'components/app-link';
 
-@controller
+@controller('app-link')
 class AppLinkElement extends BaseComponentElement {
 	@attr to: string;
 	@attr goBack: string;
@@ -36,7 +35,7 @@ class AppLinkElement extends BaseComponentElement {
 	};
 
 	attributeChangedCallback(changed) {
-		if(this.initialized && changed == 'data-title') {
+		if (this.initialized && changed == 'data-title') {
 			this.update();
 		}
 	}
@@ -58,23 +57,14 @@ class AppLinkElement extends BaseComponentElement {
 		return false;
 	}
 
-	render = (): TemplateResult => {
-		return html`${this.disabled
-			? html`<a
-					class="btn btn-link btn-disabled${this.className ? ` ${this.className}` : ''}"
-					data-target="app-link.main"
-					style="color:grey"
-					><span class="link-text">${this.title}</span></a
-			  >`
-			: html`<a
-					class="btn btn-link${this.className ? ` ${this.className}` : ''}"
-					data-target="app-link.main"
-					app-action="click:app-link#goTo ${this.customAction ? this.customAction : ''}"
-					href="${this.to}"
-					style="text-decoration: underline; cursor: pointer;"
-					><span class="link-text">${this.title}</span></a
-			  >`}`;
-	};
+	render = (): TemplateResult =>
+		AppLinkElementTemplate({
+			disabled: this.disabled,
+			className: this.classList,
+			title: this.title,
+			customAction: this.customAction,
+			to: this.to,
+		});
 }
 
 export type { AppLinkElement };

src/components/app-link/AppLinkElementTemplate.ts

@@ -0,0 +1,18 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default ({ disabled, className, title, customAction, to }): TemplateResult =>
+	html`${disabled
+		? html`<a
+				class="btn btn-link btn-disabled${className ? ` ${className}` : ''}"
+				data-target="app-link.main"
+				style="color:grey"
+				><span class="link-text">${title}</span></a
+		  >`
+		: html`<a
+				class="btn btn-link${className ? ` ${className}` : ''}"
+				data-target="app-link.main"
+				app-action="click:app-link#goTo ${customAction ? customAction : ''}"
+				href="${to}"
+				style="text-decoration: underline; cursor: pointer;"
+				><span class="link-text">${title}</span></a
+		  >`}`;

src/components/app-link/index.ts

@@ -0,0 +1,2 @@
+export { default as AppLinkElementTemplate } from './AppLinkElementTemplate';
+export * from './AppLinkElement';

src/components/app-loader/AppLoaderElement.ts

@@ -1,8 +1,8 @@
-import { controller, target } from '@github/catalyst';
-import { html } from 'core/utils';
+import { controller } from 'core/utils';
 import { BaseComponentElement } from 'common/';
+import AppLoaderElementTemplate from './AppLoaderElementTemplate';
 
-@controller
+@controller('app-loader')
 class AppLoaderElement extends BaseComponentElement {
 	private finished: boolean = true;
 	private _loading: number = 0;
@@ -42,19 +42,7 @@ class AppLoaderElement extends BaseComponentElement {
 		this.update();
 	};
 
-	render = () => {
-		const renderLoader = (finished: boolean, loading: boolean) => {
-			if (!finished && !loading) {
-				return html`<div class="loader --removing"></div>`;
-			} else if (loading) {
-				return html`<div class="loader --loading"></div>`;
-			}
-			return html``;
-		};
-		return html`<div class="loader-wrapper">
-			<div class="loader-relative">${renderLoader(this.finished, this.loading)}</div>
-		</div>`;
-	};
+	render = () => AppLoaderElementTemplate({ finished: this.finished, loading: this.loading });
 }
 
 export type { AppLoaderElement };

src/components/app-loader/AppLoaderElementTemplate.ts

@@ -0,0 +1,16 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { finished, loading } = props;
+	const renderLoader = (finished: boolean, loading: boolean) => {
+		if (!finished && !loading) {
+			return html`<div class="loader --removing"></div>`;
+		} else if (loading) {
+			return html`<div class="loader --loading"></div>`;
+		}
+		return nothing;
+	};
+	return html`<div class="loader-wrapper">
+		<div class="loader-relative">${renderLoader(finished, loading)}</div>
+	</div>`;
+};

src/components/app-loader/index.ts

@@ -0,0 +1,2 @@
+export { default as AppLoaderElementTemplate } from './AppLoaderElementTemplate';
+export * from './AppLoaderElement';

src/components/app-main/AppMainElement.ts

@@ -1,13 +1,12 @@
-import { controller, target } from '@github/catalyst';
 import { AppService, HttpClient, RouterService } from 'core/services';
 import { AuthStore } from 'core/store';
 import { AppModalElement, AppRootElement } from 'components/';
-import { closest } from 'core/utils';
+import { closest, controller, target } from 'core/utils';
 import { AppLoaderElement } from 'components/app-loader/AppLoaderElement';
 import { ToastPortalElement } from 'components/toast-portal/ToastPortalElement';
 import { BasePageElement } from 'common/';
 
-@controller
+@controller('app-main')
 class AppMainElement extends HTMLElement {
 	public routerService: RouterService;
 	public authStore: AuthStore;

src/components/app-main/index.ts

@@ -0,0 +1 @@
+export * from './AppMainElement';

src/components/app-menu/AppMenuElement.ts

@@ -1,11 +1,11 @@
-import { controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { html, TemplateResult, controller, target } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { AppMainElement } from 'components/app-main/AppMainElement';
 import { MenuItemElement } from 'components/menu-item/MenuItemElement';
 import { WalletService } from 'services/';
+import AppMenuElementTemplate from './AppMenuElementTemplate';
 
-@controller
+@controller('app-menu')
 class AppMenuElement extends BaseComponentElement {
 	private walletService: WalletService;
 	private walletData: Array<any>;
@@ -96,61 +96,8 @@ class AppMenuElement extends BaseComponentElement {
 		}
 	};
 
-	render = (): TemplateResult => {
-		const { isAuth, totalWallets, walletData } = this;
-
-		const regularMenu = (path: string, title: string, action?: string, className?: string): TemplateResult => {
-			if (action) {
-				return html`
-					<menu-item class="${className || ''}" data-path="${path}" data-customaction="${action}" data-title="${title}"></menu-item>
-				`;
-			}
-			return html`<menu-item class="${className || ''}" data-path="${path}" data-title="${title}"></menu-item>`;
-		};
-		const menuButton = (title: string, action?: string): TemplateResult => {
-			return html` <div class="menu-item --retract" data-target="menu-item.itemEl">
-				<button class="btn btn-link" data-target="app-link.main" app-action="${action}">
-					${title}<span class="pseudo"></span>
-				</button>
-			</div>`;
-		};
-		const authMenu = (path: string, title: string, action?: string, className?: string): TemplateResult => {
-			if (isAuth) {
-				return regularMenu(path, title, action, className);
-			}
-			return html``;
-		};
-		const notAuthMenu = (path: string, title: string, action?: string): TemplateResult => {
-			if (!isAuth) {
-				return regularMenu(path, title, action);
-			}
-			return html``;
-		};
-		const renderWallets = (wallets: Array<any>) => {
-			if (isAuth && totalWallets > 0) {
-				return html`<div class="menu-item divider"></div>
-					${wallets.map((wallet) => regularMenu(`/wallet/${wallet.id}`, wallet.name, '', '--wallet'))}`;
-			}
-			return html``;
-		};
-		const menuHeader = (title) =>
-			html`<div class="menu-item menu-header"><span class="link-text">${title}</span></div>`;
-
-		return html`
-			<div data-target="app-menu.sidebar">
-				<div class="content">
-					${menuHeader(__CONFIG__.appName)} ${regularMenu('/', 'Home')}
-					${authMenu('/history', 'Transaction History', 'click:app-menu#modalTransaction')}
-					${authMenu('/subscriptions', 'Subscriptions', 'click:app-menu#modalSubscription')}
-					${authMenu('/wallet/all', 'My Wallets', 'click:app-menu#modalWallet')} ${renderWallets(walletData)}
-					<span class="menu-item divider"></span>
-					${authMenu('/logout', 'Logout', '', '--logout')} ${notAuthMenu('/login', 'Login')}
-					${notAuthMenu('/register', 'Register')}
-				</div>
-				<div class="footer">${menuButton('Retract', 'click:menu-layout#retractMenu')}</div>
-			</div>
-		`;
-	};
+	render = (): TemplateResult =>
+		AppMenuElementTemplate({ isAuth: this.isAuth, totalWallets: this.totalWallets, walletData: this.walletData });
 }
 
 export type { AppMenuElement };

src/components/app-menu/AppMenuElementTemplate.ts

@@ -0,0 +1,61 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { isAuth, totalWallets, walletData } = props;
+
+	const regularMenu = (path: string, title: string, action?: string, className?: string): TemplateResult => {
+		if (action) {
+			return html`
+				<menu-item
+					class="${className || ''}"
+					data-path="${path}"
+					data-customaction="${action}"
+					data-title="${title}"
+				></menu-item>
+			`;
+		}
+		return html`<menu-item class="${className || ''}" data-path="${path}" data-title="${title}"></menu-item>`;
+	};
+	const menuButton = (title: string, action?: string): TemplateResult => {
+		return html` <div class="menu-item --retract" data-target="menu-item.itemEl">
+			<button class="btn btn-link" data-target="app-link.main" app-action="${action}">
+				${title}<span class="pseudo"></span>
+			</button>
+		</div>`;
+	};
+	const authMenu = (path: string, title: string, action?: string, className?: string): TemplateResult => {
+		if (isAuth) {
+			return regularMenu(path, title, action, className);
+		}
+		return html``;
+	};
+	const notAuthMenu = (path: string, title: string, action?: string): TemplateResult => {
+		if (!isAuth) {
+			return regularMenu(path, title, action);
+		}
+		return html``;
+	};
+	const renderWallets = (wallets: Array<any>) => {
+		if (isAuth && totalWallets > 0) {
+			return html`<div class="menu-item divider"></div>
+				${wallets.map((wallet) => regularMenu(`/wallet/${wallet.id}`, wallet.name, '', '--wallet'))}`;
+		}
+		return nothing;
+	};
+	const menuHeader = (title) => html`<div class="menu-item menu-header"><span class="link-text">${title}</span></div>`;
+
+	return html`
+		<div data-target="app-menu.sidebar">
+			<div class="content">
+				${menuHeader(__CONFIG__.appName)} ${regularMenu('/', 'Home')}
+				${authMenu('/history', 'Transaction History', 'click:app-menu#modalTransaction')}
+				${authMenu('/subscriptions', 'Subscriptions', 'click:app-menu#modalSubscription')}
+				${authMenu('/wallet/all', 'My Wallets', 'click:app-menu#modalWallet')} ${renderWallets(walletData)}
+				<span class="menu-item divider"></span>
+				${authMenu('/logout', 'Logout', '', '--logout')} ${notAuthMenu('/login', 'Login')}
+				${notAuthMenu('/register', 'Register')}
+			</div>
+			<div class="footer">${menuButton('Retract', 'click:menu-layout#retractMenu')}</div>
+		</div>
+	`;
+};

src/components/app-menu/index.ts

@@ -0,0 +1,2 @@
+export { default as AppMenuElementTemplate } from './AppMenuElementTemplate';
+export * from './AppMenuElement';

src/components/app-modal/AppModalElement.ts

@@ -1,7 +1,7 @@
-import { controller, target } from '@github/catalyst';
+import { controller, target } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 
-@controller
+@controller('app-modal')
 class AppModalElement extends BaseComponentElement {
 	@target modalElement: HTMLElement;
 	@target modalContent: HTMLElement;

src/components/app-modal/index.ts

@@ -0,0 +1 @@
+export * from './AppModalElement';

src/components/app-pagination/AppPaginationElement.ts

@@ -1,10 +1,8 @@
-import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { attr, controller, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
-import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
-import dayjs from 'dayjs';
+import { AppPaginationElementTemplate } from 'components/app-pagination';
 
-@controller
+@controller('app-pagination')
 class AppPaginationElement extends BaseComponentElement {
 	public items: Array<any>;
 	@attr page: number;
@@ -47,10 +45,10 @@ class AppPaginationElement extends BaseComponentElement {
 	defaultFetch = () => {
 		const options = {
 			rpp: this.rpp || 10,
-			page: 1
-		}
+			page: 1,
+		};
 		this.executeFetch(options);
-	}
+	};
 
 	setCustomRenderItems = (customRenderItems: () => TemplateResult) => {
 		this.customRenderItems = customRenderItems;
@@ -109,96 +107,25 @@ class AppPaginationElement extends BaseComponentElement {
 			this.appMain.closeModal();
 		} else {
 			this.appMain.createModal('transaction-edit', {
-				id: id
+				id: id,
 			});
 		}
-	}
-
-	render = (): TemplateResult => {
-		const { rpp, totalItems, page, items } = this;
-
-		const renderItem = this.customRenderItem
-			? this.customRenderItem
-			: (item, iter) => html`<tr class="${this.colLayout ? this.colLayout : ''}">
-					<td class="--left">${dayjs(item.transactionDate).format("MMM DD 'YY")}</td>
-					<td class="--left">${item.description}</td>
-					<td class="balance-cell --right">
-						<span
-							class="balance ${item.amount > 0 && item?.transactionType?.type != 'expense'
-								? '--positive'
-								: '--negative'}"
-						>
-							${item?.transactionType?.type == 'expense' ? '- ' : ''}
-							${Number(item.amount).toLocaleString('en-US', {
-								maximumFractionDigits: 2,
-								minimumFractionDigits: 2,
-							})}
-						</span>
-						<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
-					</td>
-					<td class="--right">
-						<span><button class="btn btn-rounded btn-gray" @click=${() => this.transactionEdit(item.id)}}>Edit</button></span>
-					</td>
-			  </tr>`;
-
-		const renderItems = this.customRenderItems
-			? this.customRenderItems
-			: () => {
-					if (this.loader && this.loader.loading && !this.initial) {
-						return html``;
-					} else {
-						if (items?.length > 0) {
-							return items?.map((item, iter) => renderItem(item, iter));
-						}
-						return html`<tr>
-							<td>No data</td>
-						</tr>`;
-					}
-			  };
-
-		const renderPagination = () => {
-			if (totalItems > items?.length) {
-				const pageRange = Math.ceil(totalItems / rpp);
-				return html`
-					<div class="paginate">
-						<span class="--total">(${items?.length}) / ${totalItems} Total Items</span>
-						<div class="--footer">
-							<span class="--pages">Page ${page} of ${pageRange}</span>
-							${page <= 1 || this.loader.loading
-								? html` <button
-										class="btn btn-primary btn-squared disabled"
-										disabled
-										app-action="click:app-pagination#pageBack"
-								  >
-										Prev
-								  </button>`
-								: html` <button class="btn btn-primary btn-squared" app-action="click:app-pagination#pageBack">
-										Prev
-								  </button>`}
-							${page >= pageRange || this.loader.loading
-								? html` <button
-										class="btn btn-primary btn-squared disabled"
-										disabled
-										app-action="click:app-pagination#pageNext"
-								  >
-										Next
-								  </button>`
-								: html`<button class="btn btn-primary btn-squared" app-action="click:app-pagination#pageNext">
-										Next
-								  </button>`}
-						</div>
-					</div>
-				`;
-			}
-		};
-
-		return html`<div class="app-pagination">
-			<table class="${this.tableLayout} ${this.loader && this.loader.loading ? '--loading' : ''}">
-				${renderItems()} ${renderPagination()}
-			</table>
-			${this.loader && this.loader.loading ? html`<circle-loader></circle-loader>` : html``}
-		</div>`;
 	};
+
+	render = (): TemplateResult =>
+		AppPaginationElementTemplate({
+			rpp: this.rpp,
+			totalItems: this.totalItems,
+			page: this.page,
+			items: this.items,
+			customRenderItem: this.customRenderItem,
+			colLayout: this.colLayout,
+			transactionEdit: this.transactionEdit,
+			customRenderItems: this.customRenderItems,
+			loader: this.loader,
+			initial: this.initial,
+			tableLayout: this.tableLayout,
+		});
 }
 
 export type { AppPaginationElement };

src/components/app-pagination/AppPaginationElementTemplate.ts

@@ -0,0 +1,100 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+import dayjs from 'dayjs';
+
+export default (props): TemplateResult => {
+	const {
+		rpp,
+		totalItems,
+		page,
+		items,
+		customRenderItem,
+		colLayout,
+		transactionEdit,
+		customRenderItems,
+		loader,
+		initial,
+		tableLayout,
+	} = props;
+
+	const renderItem = customRenderItem
+		? customRenderItem
+		: (item, iter) => html`<tr class="${colLayout ? colLayout : ''}">
+				<td class="--left">${dayjs(item.transactionDate).format("MMM DD 'YY")}</td>
+				<td class="--left">${item.description}</td>
+				<td class="balance-cell --right">
+					<span
+						class="balance ${item.amount > 0 && item?.transactionType?.type != 'expense' ? '--positive' : '--negative'}"
+					>
+						${item?.transactionType?.type == 'expense' ? '- ' : ''}
+						${Number(item.amount).toLocaleString('en-US', {
+							maximumFractionDigits: 2,
+							minimumFractionDigits: 2,
+						})}
+					</span>
+					<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
+				</td>
+				<td class="--right">
+					<span
+						><button class="btn btn-rounded btn-gray" @click="${() => transactionEdit(item.id)}}">Edit</button></span
+					>
+				</td>
+		  </tr>`;
+
+	const renderItems = customRenderItems
+		? customRenderItems
+		: () => {
+				if (loader && loader.loading && !initial) {
+					return nothing;
+				} else {
+					if (items?.length > 0) {
+						return items?.map((item, iter) => renderItem(item, iter));
+					}
+					return html`<tr>
+						<td>No data</td>
+					</tr>`;
+				}
+		  };
+
+	const renderPagination = () => {
+		if (totalItems > items?.length) {
+			const pageRange = Math.ceil(totalItems / rpp);
+			return html`
+				<div class="paginate">
+					<span class="--total">(${items?.length}) / ${totalItems} Total Items</span>
+					<div class="--footer">
+						<span class="--pages">Page ${page} of ${pageRange}</span>
+						${page <= 1 || loader.loading
+							? html` <button
+									class="btn btn-primary btn-squared disabled"
+									disabled
+									app-action="click:app-pagination#pageBack"
+							  >
+									Prev
+							  </button>`
+							: html` <button class="btn btn-primary btn-squared" app-action="click:app-pagination#pageBack">
+									Prev
+							  </button>`}
+						${page >= pageRange || loader.loading
+							? html` <button
+									class="btn btn-primary btn-squared disabled"
+									disabled
+									app-action="click:app-pagination#pageNext"
+							  >
+									Next
+							  </button>`
+							: html`<button class="btn btn-primary btn-squared" app-action="click:app-pagination#pageNext">
+									Next
+							  </button>`}
+					</div>
+				</div>
+			`;
+		}
+	};
+
+	return html`<div class="app-pagination">
+		<table class="${tableLayout} ${loader && loader.loading ? '--loading' : ''}">
+			${renderItems()} ${renderPagination()}
+		</table>
+		${loader && loader.loading ? html`<circle-loader></circle-loader>` : nothing}
+	</div>`;
+};

src/components/app-pagination/index.ts

@@ -0,0 +1,2 @@
+export { default as AppPaginationElementTemplate } from './AppPaginationElementTemplate';
+export * from './AppPaginationElement';

src/components/app-root/index.ts

@@ -0,0 +1 @@
+export * from './AppRootElement';

src/components/app-shadow/AppShadowElement.ts

@@ -1,11 +1,10 @@
-import { controller } from '@github/catalyst';
-import { AppMainElement } from 'components/app-main/AppMainElement';
+import { controller } from 'core/utils';
 import style from 'styles/main.scss';
 
 (function () {
 	const _shadow = new WeakMap();
 
-	@controller
+	@controller('app-shadow')
 	class AppShadowElement extends HTMLElement {
 		constructor() {
 			super();
@@ -15,7 +14,6 @@ import style from 'styles/main.scss';
 		connectedCallback() {
 			const _root = _shadow.get(this);
 			const _appMain = document.createElement('app-main');
-			(_appMain as AppMainElement).shadow = _root;
 			const _style = document.createElement('style');
 			_style.innerHTML = style;
 

src/components/app-shadow/index.ts

@@ -0,0 +1 @@
+export * from './AppShadowElement';

src/components/app-slot/AppSlotElement.ts

@@ -1,7 +1,7 @@
-import { controller, target } from '@github/catalyst';
+import { controller, target } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 
-@controller
+@controller('app-slot')
 class AppSlotElement extends BaseComponentElement {
 	@target slotElement: HTMLElement;
 	constructor() {

src/components/app-slot/index.ts

@@ -0,0 +1 @@
+export * from './AppSlotElement';

src/components/circle-loader/CircleLoaderElement.ts

@@ -1,8 +1,8 @@
-import { attr, controller } from '@github/catalyst';
-import { html } from 'core/utils';
+import { attr, controller, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
+import { CircleLoaderElementTemplate } from 'components/circle-loader';
 
-@controller
+@controller('circle-loader')
 class CircleLoaderElement extends BaseComponentElement {
 	@attr size: string;
 	constructor() {
@@ -13,9 +13,7 @@ class CircleLoaderElement extends BaseComponentElement {
 		this.update();
 	};
 
-	render = () => {
-		return html`<div class="circle-loader ${this.size ? `-${this.size}` : ''}"></div>`;
-	};
+	render = (): TemplateResult => CircleLoaderElementTemplate({ size: this.size });
 }
 
 export type { CircleLoaderElement };

src/components/circle-loader/CircleLoaderElementTemplate.ts

@@ -0,0 +1,3 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default ({ size }): TemplateResult => html`<div class="circle-loader ${size ? `-${size}` : ''}"></div>`;

src/components/circle-loader/index.ts

@@ -0,0 +1,2 @@
+export { default as CircleLoaderElementTemplate } from './CircleLoaderElementTemplate';
+export * from './CircleLoaderElement';

src/components/index.ts

@@ -1,18 +1,18 @@
-export * from './app-link/AppLinkElement';
-export * from './menu-item/MenuItemElement';
-export * from './app-pagination/AppPaginationElement';
-export * from './app-modal/AppModalElement';
-export * from './app-root/AppRootElement';
-export * from './app-slot/AppSlotElement';
-export * from './app-menu/AppMenuElement';
-export * from './input-field/InputFieldElement';
-export * from './app-dropdown/AppDropdownElement';
-export * from './app-loader/AppLoaderElement';
-export * from './circle-loader/CircleLoaderElement';
-export * from './app-form/AppFormElement';
-export * from './wallet-header/WalletHeaderElement';
-export * from './toast-portal/ToastPortalElement';
+export * from './app-link';
+export * from './menu-item';
+export * from './app-pagination';
+export * from './app-modal';
+export * from './app-root';
+export * from './app-slot';
+export * from './app-menu';
+export * from './input-field';
+export * from './app-dropdown';
+export * from './app-loader';
+export * from './circle-loader';
+export * from './app-form';
+export * from './wallet-header';
+export * from './toast-portal';
 
 // LAST
-export * from './app-main/AppMainElement';
-export * from './app-shadow/AppShadowElement';
+export * from './app-main';
+export * from './app-shadow';

src/components/input-field/InputFieldElement.ts

@@ -1,13 +1,10 @@
-import { attr, controller, target } from '@github/catalyst';
-import { closest, firstUpper } from 'core/utils';
-import { html, TemplateResult } from 'core/utils';
+import { closest, attr, controller, target, html, TemplateResult } from 'core/utils';
 import randomId from 'core/utils/random-id';
-import { validatorErrors } from 'core/constants';
 import { BaseComponentElement, Validator } from 'common/';
 import { AppFormElement } from 'components/app-form/AppFormElement';
-import { validator } from 'core/utils';
+import { InputFieldElementTemplate } from 'components/input-field';
 
-@controller
+@controller('input-field')
 class InputFieldElement extends BaseComponentElement {
 	@attr name: string;
 	@attr type: string;
@@ -34,7 +31,6 @@ class InputFieldElement extends BaseComponentElement {
 		this.validator = new Validator(this, this.appForm, this.rules);
 		this.randId = `${name}${randomId()}`;
 		this.update();
-		//this.validate();
 	};
 
 	attributeChangedCallback() {
@@ -54,7 +50,7 @@ class InputFieldElement extends BaseComponentElement {
 	}
 
 	get required(): boolean {
-		return this.rules.includes('required');
+		return this.rules?.includes('required');
 	}
 
 	get _value() {
@@ -63,16 +59,16 @@ class InputFieldElement extends BaseComponentElement {
 		}
 		return (this.inp as HTMLInputElement)?.value;
 	}
-	
+
 	get _disabled() {
-		return this.disabled == "true" 
+		return this.disabled == 'true';
 	}
 
 	set _value(value) {
 		if (this.type == 'checkbox') {
-			(this.inp as HTMLInputElement).checked = (value as boolean);
+			(this.inp as HTMLInputElement).checked = value as boolean;
 		} else {
-			(this.inp as HTMLInputElement).value = (value as string);
+			(this.inp as HTMLInputElement).value = value as string;
 		}
 	}
 
@@ -103,62 +99,20 @@ class InputFieldElement extends BaseComponentElement {
 		if (!this.changed && e?.target?.value) {
 			this.changed = true;
 		}
-		//this.validate();
 		this.appForm?.inputChange(e);
 	};
 
-	render = (): TemplateResult => {
-		const renderMessage = (label: string) => {
-			if (this.label) {
-				return html`<label for="${this.randId}">${this.label}${this.required ? ' (*)' : ''}</label>`;
-			}
-			return html``;
-		};
-
-		const renderError = (error: string) => {
-			if (error) {
-				return html`<div class="input-error"><span>${error}</span></div>`;
-			}
-			return html``;
-		};
-
-		const renderInput = (type) => {
-			if (this.pattern) {
-				return html` <input
-					name="${this.name}"
-					autocomplete="${this.name}"
-					type="${this.type}"
-					pattern="${this.pattern}"
-					step="0.01"
-					data-target="input-field.inp"
-					id="${this.randId}"
-					?disabled=${this._disabled}
-					app-action=" input:input-field#inputChange blur:input-field#validateDisplay
-				${this.customAction ? this.customAction : ''} "
-				/>`;
-			}
-			return html` <input
-				name="${this.name}"
-				autocomplete="${this.name}"
-				type="${this.type}"
-				data-target="input-field.inp"
-				?disabled=${this._disabled}
-				id="${this.randId}"
-				app-action="
-                    input:input-field#inputChange
-                    blur:input-field#validateDisplay
-					${this.customAction ? this.customAction : ''}
-                "
-			/>`;
-		};
-
-		return html`<div
-			class="input-main${this.type === 'checkbox' ? ' input-main--checkbox' : ''}"
-			data-target="input-field.main"
-		>
-			${renderMessage(this.label)}${renderError(this.error)} ${renderInput(this.type)}
-		</div>`;
-	};
+	render = (): TemplateResult =>
+		InputFieldElementTemplate({
+			randId: this.randId,
+			required: this.required,
+			pattern: this.pattern,
+			_disabled: this._disabled,
+			customAction: this.customAction,
+			type: this.type,
+			error: this.error,
+			label: this.label,
+		});
 }
 
 export type { InputFieldElement };

src/components/input-field/InputFieldElementTemplate.ts

@@ -0,0 +1,55 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { randId, required, pattern, _disabled, customAction, type, error, label } = props;
+	const renderMessage = (label: string) => {
+		if (label) {
+			return html`<label for="${randId}">${label}${required ? ' (*)' : ''}</label>`;
+		}
+		return nothing;
+	};
+
+	const renderError = (error: string) => {
+		if (error) {
+			return html`<div class="input-error"><span>${error}</span></div>`;
+		}
+		return nothing;
+	};
+
+	const renderInput = (type) => {
+		if (pattern) {
+			return html` <input
+				name="${name}"
+				autocomplete="${name}"
+				type="${type}"
+				pattern="${pattern}"
+				step="0.01"
+				data-target="input-field.inp"
+				id="${randId}"
+				?disabled=${_disabled}
+				app-action=" input:input-field#inputChange blur:input-field#validateDisplay
+				${customAction ? customAction : ''} "
+			/>`;
+		}
+		return html` <input
+			name="${name}"
+			autocomplete="${name}"
+			type="${type}"
+			data-target="input-field.inp"
+			?disabled=${_disabled}
+			id="${randId}"
+			app-action="
+                    input:input-field#inputChange
+                    blur:input-field#validateDisplay
+					${customAction ? customAction : ''}
+                "
+		/>`;
+	};
+
+	return html`<div
+		class="input-main${type === 'checkbox' ? ' input-main--checkbox' : ''}"
+		data-target="input-field.main"
+	>
+		${renderMessage(label)}${renderError(error)} ${renderInput(type)}
+	</div>`;
+};

src/components/input-field/index.ts

@@ -0,0 +1,2 @@
+export { default as InputFieldElementTemplate } from './InputFieldElementTemplate';
+export * from './InputFieldElement';

src/components/menu-item/MenuItemElement.ts

@@ -1,11 +1,11 @@
-import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, attr, controller, target } from 'core/utils';
 import { AppMainElement } from 'components/app-main/AppMainElement';
 import { BaseComponentElement } from 'common/';
 import { deviceWidths } from 'core/constants';
 import { MenuLayoutElement } from 'layouts/';
+import { MenuItemElementTemplate } from 'components/menu-item';
 
-@controller
+@controller('menu-item')
 class MenuItemElement extends BaseComponentElement {
 	@attr path: string;
 	@attr title: string;
@@ -32,7 +32,7 @@ class MenuItemElement extends BaseComponentElement {
 	};
 
 	attributeChangedCallback(changed) {
-		if(this.initialized && changed == 'data-title') {
+		if (this.initialized && changed == 'data-title') {
 			this.update();
 		}
 	}
@@ -47,17 +47,14 @@ class MenuItemElement extends BaseComponentElement {
 		}
 	};
 
-	render = (): TemplateResult => {
-		return html`
-			<div class="${this.current ? 'selected ' : ''}menu-item" data-target="menu-item.itemEl">
-				<app-link class="${this.className}" data-to="${this.path}" data-custom-action="click:menu-item#itemClick" data-title="${this.title}"></app-link
-				>
-				${this.customaction
-					? html`<div data-target="menu-item.customButton" app-action="${this.customaction}">+</div>`
-					: html``}
-			</div>
-		`;
-	};
+	render = (): TemplateResult =>
+		MenuItemElementTemplate({
+			current: this.current,
+			className: this.className,
+			path: this.path,
+			title: this.title,
+			customaction: this.customaction,
+		});
 }
 
 export type { MenuItemElement };

src/components/menu-item/MenuItemElementTemplate.ts

@@ -0,0 +1,13 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default ({ current, className, path, title, customaction }): TemplateResult => html`
+	<div class="${current ? 'selected ' : ''}menu-item" data-target="menu-item.itemEl">
+		<app-link
+			class="${className}"
+			data-to="${path}"
+			data-custom-action="click:menu-item#itemClick"
+			data-title="${title}"
+		></app-link>
+		${customaction ? html`<div data-target="menu-item.customButton" app-action="${customaction}">+</div>` : html``}
+	</div>
+`;

src/components/menu-item/index.ts

@@ -0,0 +1,2 @@
+export { default as MenuItemElementTemplate } from './MenuItemElementTemplate';
+export * from './MenuItemElement';

src/components/toast-portal/ToastPortalElement.ts

@@ -1,8 +1,8 @@
-import { controller, targets } from '@github/catalyst';
-import { delay, html, Timer } from 'core/utils';
+import { Timer, controller, targets } from 'core/utils';
 import { BaseComponentElement } from 'common/';
+import { ToastPortalElementTemplate } from 'components/toast-portal';
 
-@controller
+@controller('toast-portal')
 class ToastPortalElement extends BaseComponentElement {
 	@targets toastElement: HTMLElement;
 	toasts: Array<Toast> = [];
@@ -26,10 +26,6 @@ class ToastPortalElement extends BaseComponentElement {
 				}
 			}, 5000);
 		}
-		// const interval = setInterval(() => {
-		// 	this.popToast();
-		// 	clearInterval(interval);
-		// }, 5000);
 		this.update();
 	};
 
@@ -41,30 +37,10 @@ class ToastPortalElement extends BaseComponentElement {
 		this.update();
 	};
 
-	render = () => {
-		const renderToast = (note: string, type: string) => {
-			const message = () =>
-				html`
-					<div class="toast ${type ? `--${type}` : '--default'}">
-						<span class="toast-text">${note}</span>
-					</div>
-				`;
-			return html`${message()}`;
-		};
-
-		const renderToasts = (toasts: Array<Toast>) => {
-			if (toasts) {
-				return html`<div class="toast-list">
-					${toasts.map(({ type, message }, i) => (i < 3 ? renderToast(message, type) : html``))}
-				</div>`;
-			}
-			return html``;
-		};
-		return html`<div class="toast-portal">${renderToasts(this.toasts)}</div>`;
-	};
+	render = () => ToastPortalElementTemplate({ toasts: this.toasts });
 }
 
-type Toast = {
+export type Toast = {
 	type: string;
 	message: string;
 };

src/components/toast-portal/ToastPortalElementTemplate.ts

@@ -0,0 +1,25 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+import { Toast } from './';
+
+export default (props): TemplateResult => {
+	const { toasts } = props;
+	const renderToast = (note: string, type: string) => {
+		const message = () =>
+			html`
+				<div class="toast ${type ? `--${type}` : '--default'}">
+					<span class="toast-text">${note}</span>
+				</div>
+			`;
+		return html`${message()}`;
+	};
+
+	const renderToasts = (toasts: Array<Toast>) => {
+		if (toasts) {
+			return html`<div class="toast-list">
+				${toasts.map(({ type, message }, i) => (i < 3 ? renderToast(message, type) : nothing))}
+			</div>`;
+		}
+		return nothing;
+	};
+	return html`<div class="toast-portal">${renderToasts(toasts)}</div>`;
+};

src/components/toast-portal/index.ts

@@ -0,0 +1,2 @@
+export { default as ToastPortalElementTemplate } from './ToastPortalElementTemplate';
+export * from './ToastPortalElement';

src/components/wallet-header/WalletHeaderElement.ts

@@ -1,8 +1,7 @@
-import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, attr, controller } from 'core/utils';
 import { BaseComponentElement } from 'common/';
-import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
 import { findMethod } from 'core/utils';
+import { WalletHeaderElementTemplate } from 'components/wallet-header';
 
 @controller
 class WalletHeaderElement extends BaseComponentElement {
@@ -44,31 +43,15 @@ class WalletHeaderElement extends BaseComponentElement {
 		}
 	};
 
-	render = (): TemplateResult => {
-		const { currentBalance, currency, lastMonth, nextMonth } = this;
-
-		const renderItem = (header, balance, currency) => html`<div class="header-item">
-			<div class="--header">${header}</div>
-			<div class="--content">
-				<span class="--balance ${balance > 0 ? '--positive' : '--negative'}"
-					>${Number(balance).toLocaleString('en-US', { maximumFractionDigits: 2, minimumFractionDigits: 2 })}</span
-				><span class="--currency">(${currency})</span>
-			</div>
-		</div>`;
-
-		const renderHeader = () => {
-			if (this.loader && this.loader.loading && !this.initial) {
-				return html``;
-			}
-			return html`${renderItem('Last Month', lastMonth, currency)}${renderItem(
-				'Current Balance',
-				currentBalance,
-				currency
-			)}${renderItem('Next Month', nextMonth, currency)}`;
-		};
-
-		return html`<div class="wallet-header">${renderHeader()}</div>`;
-	};
+	render = (): TemplateResult =>
+		WalletHeaderElementTemplate({
+			currentBalance: this.currentBalance,
+			currency: this.currency,
+			lastMonth: this.lastMonth,
+			nextMonth: this.nextMonth,
+			loader: this.loader,
+			initial: this.initial,
+		});
 }
 
 export type { WalletHeaderElement };

src/components/wallet-header/WalletHeaderElementTemplate.ts

@@ -0,0 +1,27 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { currentBalance, currency, lastMonth, nextMonth, loader, initial } = props;
+
+	const renderItem = (header, balance, currency) => html`<div class="header-item">
+		<div class="--header">${header}</div>
+		<div class="--content">
+			<span class="--balance ${balance > 0 ? '--positive' : '--negative'}"
+				>${Number(balance).toLocaleString('en-US', { maximumFractionDigits: 2, minimumFractionDigits: 2 })}</span
+			><span class="--currency">(${currency})</span>
+		</div>
+	</div>`;
+
+	const renderHeader = () => {
+		if (loader && loader.loading && !initial) {
+			return nothing;
+		}
+		return html`${renderItem('Last Month', lastMonth, currency)}${renderItem(
+			'Current Balance',
+			currentBalance,
+			currency
+		)}${renderItem('Next Month', nextMonth, currency)}`;
+	};
+
+	return html`<div class="wallet-header">${renderHeader()}</div>`;
+};

src/components/wallet-header/index.ts

@@ -0,0 +1,2 @@
+export { default as WalletHeaderElementTemplate } from './WalletHeaderElementTemplate';
+export * from './WalletHeaderElement';

src/core/utils/library.ts

@@ -1,3 +1,44 @@
-import { attr, controller, target, targets} from '@github/catalyst';
+import { attr, target, targets, register } from '@github/catalyst';
+import { bind, bindShadow } from '@github/catalyst/lib/bind';
+import { autoShadowRoot } from '@github/catalyst/lib/auto-shadow-root';
+import { defineObservedAttributes, initializeAttrs } from '@github/catalyst/lib/attr';
 
-export { attr, controller, target, targets } 
+import { CustomElement } from '@github/catalyst/lib/custom-element';
+
+function controller(customElement: CustomElement | string): void | any {
+	if (typeof customElement == 'string') {
+		return function (classObject: CustomElement) {
+			const connect = classObject.prototype.connectedCallback;
+			classObject.prototype.connectedCallback = function (this: HTMLElement) {
+				this.toggleAttribute('data-catalyst', true);
+				autoShadowRoot(this);
+				initializeAttrs(this);
+				bind(this);
+				if (connect) connect.call(this);
+				if (this.shadowRoot) bindShadow(this.shadowRoot);
+			};
+			defineObservedAttributes(classObject);
+			if (!window.customElements.get(customElement)) {
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
+				window[classObject.name] = classObject;
+				window.customElements.define(customElement, classObject);
+			}
+		};
+	} else {
+		const classObject = customElement;
+		const connect = classObject.prototype.connectedCallback;
+		classObject.prototype.connectedCallback = function (this: HTMLElement) {
+			this.toggleAttribute('data-catalyst', true);
+			autoShadowRoot(this);
+			initializeAttrs(this);
+			bind(this);
+			if (connect) connect.call(this);
+			if (this.shadowRoot) bindShadow(this.shadowRoot);
+		};
+		defineObservedAttributes(classObject);
+		register(classObject);
+	}
+}
+
+export { attr, controller, target, targets };

src/core/utils/templating.ts

@@ -1,3 +1,3 @@
-import { render, html, TemplateResult, directive, isPrimitive } from 'lit-html';
+import { render, html, TemplateResult, directive, isPrimitive, nothing } from 'lit-html';
 
-export { render, html, TemplateResult, directive, isPrimitive };
+export { render, html, TemplateResult, directive, isPrimitive, nothing };

src/pages/history-page/HistoryPageElement.ts

@@ -1,10 +1,10 @@
-import { controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, controller, target } from 'core/utils';
 import { TransactionsService } from 'services/';
 import { AppMainElement, AppPaginationElement } from 'components/';
 import { BasePageElement } from 'common/';
+import { HistoryPageElementTemplate } from 'pages/history-page';
 
-@controller
+@controller('history-page')
 class HistoryPageElement extends BasePageElement {
 	private transactionsService: TransactionsService;
 	@target pagination: AppPaginationElement;
@@ -48,18 +48,8 @@ class HistoryPageElement extends BasePageElement {
 		}
 	};
 
-	render = (): TemplateResult => {
-		const renderWallet = () => {
-			if (this.routerService?.routerState?.data?.walletId) {
-				return html`<span>${this.routerService?.routerState?.data?.walletId}</span>`;
-			}
-			return html``;
-		};
-		return html`<div>
-			${renderWallet()}
-			<app-pagination data-target="history-page.pagination"></app-pagination>
-		</div>`;
-	};
+	render = (): TemplateResult =>
+		HistoryPageElementTemplate({ walletId: this.routerService?.routerState?.data?.walletId });
 }
 
 export type { HistoryPageElement };

src/pages/history-page/HistoryPageElementTemplate.ts

@@ -0,0 +1,16 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { walletId } = props;
+	const renderWallet = () => {
+		if (walletId) {
+			return html`<span>${walletId}</span>`;
+		}
+		return nothing;
+	};
+
+	return html`<div>
+		${renderWallet()}
+		<app-pagination data-target="history-page.pagination"></app-pagination>
+	</div>`;
+};

src/pages/history-page/index.ts

@@ -0,0 +1,2 @@
+export { default as HistoryPageElementTemplate } from './HistoryPageElementTemplate';
+export * from './HistoryPageElement';

src/pages/home-page/HomePageElement.ts

@@ -1,10 +1,10 @@
-import { controller, target } from '@github/catalyst';
-import { html, TemplateResult, until } from 'core/utils';
+import { TemplateResult, controller, target } from 'core/utils';
 import { WalletService } from 'services/';
 import { AppMainElement, WalletHeaderElement } from 'components/';
 import { BasePageElement } from 'common/';
+import { HomePageElementTemplate } from 'pages/home-page';
 
-@controller
+@controller('home-page')
 class HomePageElement extends BasePageElement {
 	@target walletHeader: WalletHeaderElement;
 	private walletService: WalletService;
@@ -42,18 +42,7 @@ class HomePageElement extends BasePageElement {
 		this.walletHeader.nextMonth = header.nextMonth || '0';
 	};
 
-	render = (): TemplateResult => {
-		return html`
-			<wallet-header
-				data-target="home-page.walletHeader"
-				data-current-balance="0"
-				data-last-month="0"
-				data-next-month="0"
-				data-currency="0"
-				data-custom="home-page#getBalance"
-			></wallet-header>
-		`;
-	};
+	render = (): TemplateResult => HomePageElementTemplate();
 }
 
 export { HomePageElement };

src/pages/home-page/HomePageElementTemplate.ts

@@ -0,0 +1,12 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default (): TemplateResult => html`
+	<wallet-header
+		data-target="home-page.walletHeader"
+		data-current-balance="0"
+		data-last-month="0"
+		data-next-month="0"
+		data-currency="0"
+		data-custom="home-page#getBalance"
+	></wallet-header>
+`;

src/pages/home-page/index.ts

@@ -0,0 +1,2 @@
+export { default as HomePageElementTemplate } from './HomePageElementTemplate';
+export * from './HomePageElement';

src/pages/index.ts

@@ -1,15 +1,15 @@
-export * from './logout-page/LogoutPageElement';
-export * from './home-page/HomePageElement';
-export * from './register-page/RegisterPageElement';
-export * from './login-page/LoginPageElement';
-export * from './not-found/NotFoundElement';
-export * from './history-page/HistoryPageElement';
-export * from './wallet-list/WalletListElement';
-export * from './wallet-create/WalletCreateElement';
-export * from './transaction-create/TransactionCreateElement';
-export * from './subscription-create/SubscriptionCreateElement';
-export * from './subscription-list/SubscriptionListElement';
-export * from './wallet-page/WalletPageElement';
-export * from './subscription-edit/SubscriptionEditElement';
-export * from './transaction-edit/TransactionEditElement';
-export * from './wallet-edit/WalletEditElement';
+export * from './logout-page';
+export * from './home-page';
+export * from './register-page';
+export * from './login-page';
+export * from './not-found';
+export * from './history-page';
+export * from './wallet-list';
+export * from './wallet-create';
+export * from './transaction-create';
+export * from './subscription-create';
+export * from './subscription-list';
+export * from './wallet-page';
+export * from './subscription-edit';
+export * from './transaction-edit';
+export * from './wallet-edit';

src/pages/login-page/LoginFormTemplate.ts

@@ -0,0 +1,25 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default (): TemplateResult => html` <input-field
+		data-type="email"
+		data-name="email"
+		data-label="E-mail"
+		data-targets="login-page.inputs"
+		data-rules="required|is_email"
+	></input-field>
+	<input-field
+		data-type="password"
+		data-name="password"
+		data-label="Password"
+		data-targets="login-page.inputs"
+		data-rules="required"
+	>
+	</input-field>
+	<input-field
+		data-type="checkbox"
+		data-name="rememberMe"
+		data-label="Remember me"
+		data-targets="login-page.inputs"
+		data-rules=""
+	>
+	</input-field>`;

src/pages/login-page/LoginPageElement.ts

@@ -1,12 +1,11 @@
-import { targets, controller, target } from '@github/catalyst';
-//import { html, TemplateResult } from "core/utils";
-import { html, render, TemplateResult } from 'core/utils';
+import { TemplateResult, targets, controller, target } from 'core/utils';
 import { AuthService } from 'services/';
 import { AppFormElement, InputFieldElement } from 'components/';
-import { RouterService } from 'core/services';
 import { BasePageElement } from 'common/';
+import LoginFormTemplate from './LoginFormTemplate';
+import LoginPageElementTemplate from './LoginPageElementTemplate';
 
-@controller
+@controller('login-page')
 class LoginPageElement extends BasePageElement {
 	@targets inputs: Array<InputFieldElement>;
 	@target appForm: AppFormElement;
@@ -82,45 +81,9 @@ class LoginPageElement extends BasePageElement {
 		return _return;
 	}
 
-	renderForms = () => {
-		return html` <input-field
-				data-type="email"
-				data-name="email"
-				data-label="E-mail"
-				data-targets="login-page.inputs"
-				data-rules="required|is_email"
-			></input-field>
-			<input-field
-				data-type="password"
-				data-name="password"
-				data-label="Password"
-				data-targets="login-page.inputs"
-				data-rules="required"
-			>
-			</input-field>
-			<input-field
-				data-type="checkbox"
-				data-name="rememberMe"
-				data-label="Remember me"
-				data-targets="login-page.inputs"
-				data-rules=""
-			>
-			</input-field>`;
-	};
+	renderForms = (): TemplateResult => LoginFormTemplate();
 
-	render = (): TemplateResult => {
-		return html`
-			<app-form
-				data-custom="login-page#onSubmit"
-				data-target="login-page.appForm"
-				data-render-input="login-page#renderForms"
-			>
-			</app-form>
-			<div>
-				<app-link data-to="/register" data-title="Create new account"></app-link>
-			</div>
-		`;
-	};
+	render = (): TemplateResult => LoginPageElementTemplate();
 }
 
 export type { LoginPageElement };

src/pages/login-page/LoginPageElementTemplate.ts

@@ -0,0 +1,13 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default (): TemplateResult => html`
+	<app-form
+		data-custom="login-page#onSubmit"
+		data-target="login-page.appForm"
+		data-render-input="login-page#renderForms"
+	>
+	</app-form>
+	<div>
+		<app-link data-to="/register" data-title="Create new account"></app-link>
+	</div>
+`;

src/pages/login-page/index.ts

@@ -0,0 +1,3 @@
+export { default as LoginFormTemplate } from './LoginFormTemplate';
+export { default as LoginPageElementTemplate } from './LoginPageElementTemplate';
+export * from './LoginPageElement';

src/pages/logout-page/LogoutPageElement.ts

@@ -1,8 +1,8 @@
-import { controller } from '@github/catalyst';
+import { controller } from 'core/utils';
 import { AuthService } from 'services/';
 import { BasePageElement } from 'common/';
 
-@controller
+@controller('logout-page')
 class LogoutPageElement extends BasePageElement {
 	authService: AuthService;
 	constructor() {

src/pages/logout-page/index.ts

@@ -0,0 +1 @@
+export * from './LogoutPageElement';

src/pages/not-found/NotFoundElement.ts

@@ -1,8 +1,8 @@
-import { controller } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, controller } from 'core/utils';
 import { BasePageElement } from 'common/';
+import { NotFoundElementTemplate } from 'pages/not-found';
 
-@controller
+@controller('not-found')
 class NotFoundElement extends BasePageElement {
 	constructor() {
 		super({
@@ -13,12 +13,7 @@ class NotFoundElement extends BasePageElement {
 		this.update();
 	};
 
-	render = (): TemplateResult => {
-		return html`
-			<div>404 - Page not found</div>
-			<div><app-link data-to="/" data-title="Homepage"></app-link></div>
-		`;
-	};
+	render = (): TemplateResult => NotFoundElementTemplate();
 }
 
 export type { NotFoundElement };

src/pages/not-found/NotFoundElementTemplate.ts

@@ -0,0 +1,6 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default (): TemplateResult => html`
+	<div>404 - Page not found</div>
+	<div><app-link data-to="/" data-title="Homepage"></app-link></div>
+`;

src/pages/not-found/index.ts

@@ -0,0 +1,2 @@
+export { default as NotFoundElementTemplate } from './NotFoundElementTemplate';
+export * from './NotFoundElement';

src/pages/register-page/RegisterPageElement.ts

@@ -1,10 +1,10 @@
-import { targets, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, targets, controller, target } from 'core/utils';
 import { AuthService } from 'services/';
 import { AppFormElement, InputFieldElement } from 'components/';
 import { BasePageElement } from 'common/';
+import { RegisterPageElementTemplate } from 'pages/register-page';
 
-@controller
+@controller('register-page')
 class RegisterPageElement extends BasePageElement {
 	@targets inputs: Array<InputFieldElement>;
 	@target appForm: AppFormElement;
@@ -60,41 +60,7 @@ class RegisterPageElement extends BasePageElement {
 		return _return;
 	}
 
-	render = (): TemplateResult => {
-		return html`
-			<app-form data-custom="register-page#onSubmit" data-has-cancel="true" data-target="register-page.appForm">
-				<input-field
-					data-type="text"
-					data-name="username"
-					data-label="Username"
-					data-targets="register-page.inputs"
-					data-rules="required"
-				></input-field>
-				<input-field
-					data-type="email"
-					data-name="email"
-					data-label="E-mail"
-					data-targets="register-page.inputs"
-					data-rules="required|is_email"
-				></input-field>
-				<input-field
-					data-type="password"
-					data-name="password"
-					data-label="Password"
-					data-targets="register-page.inputs"
-					data-rules="required"
-				>
-				</input-field>
-				<input-field
-					data-type="password"
-					data-name="confirmpassword"
-					data-label="Confirm Password"
-					data-targets="register-page.inputs"
-					data-rules="required|is_same[field(password)]"
-				>
-			</app-form>
-		`;
-	};
+	render = (): TemplateResult => RegisterPageElementTemplate();
 }
 
 export type { RegisterPageElement };

src/pages/register-page/RegisterPageElementTemplate.ts

@@ -0,0 +1,37 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default (): TemplateResult => {
+	return html`
+			<app-form data-custom="register-page#onSubmit" data-has-cancel="true" data-target="register-page.appForm">
+				<input-field
+					data-type="text"
+					data-name="username"
+					data-label="Username"
+					data-targets="register-page.inputs"
+					data-rules="required"
+				></input-field>
+				<input-field
+					data-type="email"
+					data-name="email"
+					data-label="E-mail"
+					data-targets="register-page.inputs"
+					data-rules="required|is_email"
+				></input-field>
+				<input-field
+					data-type="password"
+					data-name="password"
+					data-label="Password"
+					data-targets="register-page.inputs"
+					data-rules="required"
+				>
+				</input-field>
+				<input-field
+					data-type="password"
+					data-name="confirmpassword"
+					data-label="Confirm Password"
+					data-targets="register-page.inputs"
+					data-rules="required|is_same[field(password)]"
+				>
+			</app-form>
+		`;
+};

src/pages/register-page/index.ts

@@ -0,0 +1,2 @@
+export { default as RegisterPageElementTemplate } from './RegisterPageElementTemplate';
+export * from './RegisterPageElement';

src/pages/subscription-create/SubscriptionCreateElement.ts

@@ -1,5 +1,4 @@
-import { targets, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { html, TemplateResult, targets, controller, target } from 'core/utils';
 import {
 	AuthService,
 	SubscriptionService,
@@ -12,9 +11,10 @@ import { BasePageElement } from 'common/';
 import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
+import { SubscriptionCreateFormTemplate, SubscriptionCreateElementTemplate } from 'pages/subscription-create';
 dayjs.extend(utc);
 
-@controller
+@controller('subscription-create')
 class SubscriptionCreateElement extends BasePageElement {
 	@targets inputs: Array<InputFieldElement | AppDropdownElement>;
 	@target appForm: AppFormElement;
@@ -174,86 +174,14 @@ class SubscriptionCreateElement extends BasePageElement {
 		this.appForm.update();
 	};
 
-	renderForms = () => {
-		const renderInput = (type, name, label, rules, hide?, customAction?) => {
-			if (hide) {
-				return null;
-			}
-			return html`<input-field
-				data-type="${type}"
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="subscription-create.inputs"
-				data-rules="${rules}"
-				data-custom-action="${customAction || ''}"
-			></input-field>`;
-		};
+	renderForms = (): TemplateResult =>
+		SubscriptionCreateFormTemplate({
+			hasEndCheck: this.hasEndCheck,
+			walletData: this.walletData,
+			errorMessage: this.errorMessage,
+		});
 
-		const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
-			if (hide) {
-				return html``;
-			}
-			return html`<input-field
-				data-type="number"
-				data-pattern="${pattern}"
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="transaction-create.inputs"
-				data-rules="${rules}"
-				custom-action="${customAction}"
-			></input-field>`;
-		};
-
-		const renderDropdown = (fetch, name, label, rules, hide?) => {
-			if (hide) {
-				return html``;
-			}
-			return html`<app-dropdown
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="subscription-create.inputs"
-				data-rules="${rules}"
-				data-fetch="${fetch}"
-			></app-dropdown>`;
-		};
-		return html`
-				<div slot="inputs">
-					${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
-					${renderInput('text', 'description', 'Description', 'required')}
-					${renderInput('date', 'startDate', 'Start date', 'required')}
-					${renderInput('checkbox', 'hasEnd', 'Existing End Date', '', false, 'change:subscription-create#onCheck')}
-					${renderInput(
-						'date',
-						'endDate',
-						'End date',
-						'required|is_after[field(startDate)]',
-						!(this.hasEndCheck?.inp as HTMLInputElement)?.checked
-					)}
-					${renderDropdown(
-						'subscription-create#getWallets',
-						'wallet',
-						'Wallet',
-						'required',
-						this.walletData && this.walletData.walletId
-					)}
-					${renderDropdown('subscription-create#getTypes', 'transactionType', 'Transaction Type', 'required')}
-					${renderInput('number', 'customRange', 'Every', 'required')}
-					${renderDropdown('subscription-create#getSubs', 'subscriptionType', 'Subscription Type', 'required')}
-					${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}</template
-				>`;
-	};
-
-	render = (): TemplateResult => {
-		return html`
-			<app-form
-				data-custom="subscription-create#onSubmit"
-				data-has-cancel="true"
-				data-target="subscription-create.appForm"
-				data-render-input="subscription-create#renderForms"
-			>
-			</app-form>
-		`;
-	};
+	render = (): TemplateResult => SubscriptionCreateElementTemplate();
 }
 
 export type { SubscriptionCreateElement };

src/pages/subscription-create/SubscriptionCreateElementTemplate.ts

@@ -0,0 +1,11 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default (): TemplateResult => html`
+	<app-form
+		data-custom="subscription-create#onSubmit"
+		data-has-cancel="true"
+		data-target="subscription-create.appForm"
+		data-render-input="subscription-create#renderForms"
+	>
+	</app-form>
+`;

src/pages/subscription-create/SubscriptionCreateFormTemplate.ts

@@ -0,0 +1,65 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { hasEndCheck, walletData, errorMessage } = props;
+	const renderInput = (type, name, label, rules, hide?, customAction?) => {
+		if (hide) {
+			return null;
+		}
+		return html`<input-field
+			data-type="${type}"
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="subscription-create.inputs"
+			data-rules="${rules}"
+			data-custom-action="${customAction || ''}"
+		></input-field>`;
+	};
+
+	const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
+		if (hide) {
+			return nothing;
+		}
+		return html`<input-field
+			data-type="number"
+			data-pattern="${pattern}"
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="transaction-create.inputs"
+			data-rules="${rules}"
+			custom-action="${customAction}"
+		></input-field>`;
+	};
+
+	const renderDropdown = (fetch, name, label, rules, hide?) => {
+		if (hide) {
+			return nothing;
+		}
+		return html`<app-dropdown
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="subscription-create.inputs"
+			data-rules="${rules}"
+			data-fetch="${fetch}"
+		></app-dropdown>`;
+	};
+	return html`
+				<div slot="inputs">
+					${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
+					${renderInput('text', 'description', 'Description', 'required')}
+					${renderInput('date', 'startDate', 'Start date', 'required')}
+					${renderInput('checkbox', 'hasEnd', 'Existing End Date', '', false, 'change:subscription-create#onCheck')}
+					${renderInput(
+						'date',
+						'endDate',
+						'End date',
+						'required|is_after[field(startDate)]',
+						!(hasEndCheck?.inp as HTMLInputElement)?.checked
+					)}
+					${renderDropdown('subscription-create#getWallets', 'wallet', 'Wallet', 'required', walletData && walletData.walletId)}
+					${renderDropdown('subscription-create#getTypes', 'transactionType', 'Transaction Type', 'required')}
+					${renderInput('number', 'customRange', 'Every', 'required')}
+					${renderDropdown('subscription-create#getSubs', 'subscriptionType', 'Subscription Type', 'required')}
+					${errorMessage ? html`<div>${errorMessage}</div>` : nothing}</template
+				>`;
+};

src/pages/subscription-create/index.ts

@@ -0,0 +1,3 @@
+export { default as SubscriptionCreateFormTemplate } from './SubscriptionCreateFormTemplate';
+export { default as SubscriptionCreateElementTemplate } from './SubscriptionCreateElementTemplate';
+export * from './SubscriptionCreateElement';

src/pages/subscription-edit/SubscriptionEditElement.ts

@@ -1,5 +1,4 @@
-import { targets, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { html, TemplateResult, targets, controller, target } from 'core/utils';
 import {
 	AuthService,
 	SubscriptionService,
@@ -12,9 +11,10 @@ import { BasePageElement } from 'common/';
 import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
+import { SubscriptionEditElementTemplate, SubscriptionEditFormTemplate } from 'pages/subscription-edit';
 dayjs.extend(utc);
 
-@controller
+@controller('subscription-edit')
 class SubscriptionEditElement extends BasePageElement {
 	@targets inputs: Array<InputFieldElement | AppDropdownElement>;
 	@target appForm: AppFormElement;
@@ -86,7 +86,7 @@ class SubscriptionEditElement extends BasePageElement {
 	getSubscription = async (id) => {
 		try {
 			const response = await this.subscriptionService.get(id, {
-				embed: 'Wallet'
+				embed: 'Wallet',
 			});
 			const wallet = this.appForm.getInput('wallet');
 			if (wallet) {
@@ -95,10 +95,8 @@ class SubscriptionEditElement extends BasePageElement {
 			response.wallet = response.walletId;
 			response.endDate = dayjs(response.endDate).format('YYYY-MM-DD');
 			this.appForm.set(response);
-		} catch (err) {
-
-		}
-	}
+		} catch (err) {}
+	};
 
 	getWallets = async (options): Promise<void> => {
 		try {
@@ -127,12 +125,7 @@ class SubscriptionEditElement extends BasePageElement {
 				return;
 			}
 
-			const {
-				description: description,
-				wallet: walletId,
-				amount,
-				endDate,
-			} = values;
+			const { description: description, wallet: walletId, amount, endDate } = values;
 
 			const endDateFormat = dayjs(endDate).utc(true).format();
 
@@ -181,80 +174,14 @@ class SubscriptionEditElement extends BasePageElement {
 		this.appForm.update();
 	};
 
-	renderForms = () => {
-		const renderInput = (type, name, label, rules, hide?, customAction?) => {
-			return html`<input-field
-				data-type="${type}"
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="subscription-edit.inputs"
-				data-rules="${rules}"
-				data-custom-action="${customAction || ''}"
-				data-disabled="${hide}"
-			></input-field>`;
-		};
+	renderForms = () =>
+		SubscriptionEditFormTemplate({
+			hasEndCheck: this.hasEndCheck,
+			walletData: this.walletData,
+			errorMessage: this.errorMessage,
+		});
 
-		const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
-			if (hide) {
-				return html``;
-			}
-			return html`<input-field
-				data-type="number"
-				data-pattern="${pattern}"
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="subscription-edit.inputs"
-				data-rules="${rules}"
-				custom-action="${customAction}"
-			></input-field>`;
-		};
-
-		const renderDropdown = (fetch, name, label, rules, hide?) => {
-			if (hide) {
-				return html``;
-			}
-			return html`<app-dropdown
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="subscription-edit.inputs"
-				data-rules="${rules}"
-				data-fetch="${fetch}"
-			></app-dropdown>`;
-		};
-		return html`
-				<div slot="inputs">
-					${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
-					${renderInput('text', 'description', 'Description', 'required')}
-					${renderInput('checkbox', 'hasEnd', 'Existing End Date', '', false, 'change:subscription-edit#onCheck')}
-					${renderInput(
-						'date',
-						'endDate',
-						'End date',
-						'required',
-						!(this.hasEndCheck?.inp as HTMLInputElement)?.checked
-					)}
-					${renderDropdown(
-						'subscription-edit#getWallets',
-						'wallet',
-						'Wallet',
-						'required',
-						this.walletData && this.walletData.walletId
-					)}
-					${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}</template
-				>`;
-	};
-
-	render = (): TemplateResult => {
-		return html`
-			<app-form
-				data-custom="subscription-edit#onSubmit"
-				data-has-cancel="true"
-				data-target="subscription-edit.appForm"
-				data-render-input="subscription-edit#renderForms"
-			>
-			</app-form>
-		`;
-	};
+	render = (): TemplateResult => SubscriptionEditElementTemplate();
 }
 
 export type { SubscriptionEditElement };

src/pages/subscription-edit/SubscriptionEditElementTemplate.ts

@@ -0,0 +1,11 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default (): TemplateResult => html`
+	<app-form
+		data-custom="subscription-edit#onSubmit"
+		data-has-cancel="true"
+		data-target="subscription-edit.appForm"
+		data-render-input="subscription-edit#renderForms"
+	>
+	</app-form>
+`;

src/pages/subscription-edit/SubscriptionEditFormTemplate.ts

@@ -0,0 +1,53 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { hasEndCheck, walletData, errorMessage } = props;
+	const renderInput = (type, name, label, rules, hide?, customAction?) => {
+		return html`<input-field
+			data-type="${type}"
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="subscription-edit.inputs"
+			data-rules="${rules}"
+			data-custom-action="${customAction || ''}"
+			data-disabled="${hide}"
+		></input-field>`;
+	};
+
+	const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
+		if (hide) {
+			return nothing;
+		}
+		return html`<input-field
+			data-type="number"
+			data-pattern="${pattern}"
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="subscription-edit.inputs"
+			data-rules="${rules}"
+			custom-action="${customAction}"
+		></input-field>`;
+	};
+
+	const renderDropdown = (fetch, name, label, rules, hide?) => {
+		if (hide) {
+			return nothing;
+		}
+		return html`<app-dropdown
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="subscription-edit.inputs"
+			data-rules="${rules}"
+			data-fetch="${fetch}"
+		></app-dropdown>`;
+	};
+	return html`
+				<div slot="inputs">
+					${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
+					${renderInput('text', 'description', 'Description', 'required')}
+					${renderInput('checkbox', 'hasEnd', 'Existing End Date', '', false, 'change:subscription-edit#onCheck')}
+					${renderInput('date', 'endDate', 'End date', 'required', !(hasEndCheck?.inp as HTMLInputElement)?.checked)}
+					${renderDropdown('subscription-edit#getWallets', 'wallet', 'Wallet', 'required', walletData && walletData.walletId)}
+					${errorMessage ? html`<div>${errorMessage}</div>` : nothing}</template
+				>`;
+};

src/pages/subscription-edit/index.ts

@@ -0,0 +1,3 @@
+export { default as SubscriptionEditFormTemplate } from './SubscriptionEditFormTemplate';
+export { default as SubscriptionEditElementTemplate } from './SubscriptionEditElementTemplate';
+export * from './SubscriptionEditElement';

src/pages/subscription-list/SubscriptionListElement.ts

@@ -1,11 +1,11 @@
-import { controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { html, TemplateResult, controller, target } from 'core/utils';
 import { SubscriptionService } from 'services/';
 import { AppMainElement, AppPaginationElement } from 'components/';
 import { BasePageElement } from 'common/';
 import dayjs from 'dayjs';
+import { SubscriptionListElementTemplate } from 'pages/subscription-list';
 
-@controller
+@controller('subscription-list')
 class SubscriptionListElement extends BasePageElement {
 	private subscriptionService: SubscriptionService;
 	@target pagination: AppPaginationElement;
@@ -39,17 +39,17 @@ class SubscriptionListElement extends BasePageElement {
 			this.appMain.closeModal();
 		} else {
 			this.appMain.createModal('subscription-edit', {
-				id: id
+				id: id,
 			});
 		}
-	}
+	};
 
 	subscriptionEnd = async (id) => {
 		if (confirm('Are you sure you want to end this subscription?')) {
 			await this.subscriptionService.endSubscription(id);
 			this.appMain.triggerTransactionUpdate();
 		}
-	}
+	};
 
 	renderSubscription = (item) => html`<tr class="col-subscription">
 		<td class="--left">${dayjs(item.lastTransactionDate).format("MMM DD 'YY")}</td>
@@ -68,12 +68,20 @@ class SubscriptionListElement extends BasePageElement {
 			</span>
 			<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
 		</td>
-		${item.hasEnd ? html`` : html`
-		<td class="--right">
-			<span><button class="btn btn-rounded btn-gray" @click=${() => this.subscriptionEdit(item.id)}}>Edit</button></span>
-			<span><button class="btn btn-rounded btn-alert"  @click=${() => this.subscriptionEnd(item.id)}}>End</button></span>
-		</td>`
-		}
+		${item.hasEnd
+			? html``
+			: html` <td class="--right">
+					<span
+						><button class="btn btn-rounded btn-gray" @click="${() => this.subscriptionEdit(item.id)}}">
+							Edit
+						</button></span
+					>
+					<span
+						><button class="btn btn-rounded btn-alert" @click="${() => this.subscriptionEnd(item.id)}}">
+							End
+						</button></span
+					>
+			  </td>`}
 	</tr>`;
 
 	getSubscriptions = async (options): Promise<any> => {
@@ -113,21 +121,8 @@ class SubscriptionListElement extends BasePageElement {
 		}
 	};
 
-	render = (): TemplateResult => {
-		const renderWallet = () => {
-			if (this.routerService?.routerState?.data?.walletId) {
-				return html`<span>${this.routerService?.routerState?.data?.walletId}</span>`;
-			}
-			return html``;
-		};
-		return html`<div>
-			${renderWallet()}
-			<app-pagination
-				data-target="subscription-list.pagination"
-				data-table-layout="subscription-table"
-			></app-pagination>
-		</div>`;
-	};
+	render = (): TemplateResult =>
+		SubscriptionListElementTemplate({ walletId: this.routerService?.routerState?.data?.walletId });
 }
 
 export type { SubscriptionListElement };

src/pages/subscription-list/SubscriptionListElementTemplate.ts

@@ -0,0 +1,15 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { walletId } = props;
+	const renderWallet = () => {
+		if (walletId) {
+			return html`<span>${walletId}</span>`;
+		}
+		return nothing;
+	};
+	return html`<div>
+		${renderWallet()}
+		<app-pagination data-target="subscription-list.pagination" data-table-layout="subscription-table"></app-pagination>
+	</div>`;
+};

src/pages/subscription-list/index.ts

@@ -0,0 +1,2 @@
+export { default as SubscriptionListElementTemplate } from './SubscriptionListElementTemplate';
+export * from './SubscriptionListElement';

src/pages/transaction-create/TransactionCreateElement.ts

@@ -1,15 +1,14 @@
-import { targets, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, targets, controller, target } from 'core/utils';
 import { AuthService, TransactionsService, TransactionTypeService, WalletService } from 'services/';
 import { AppFormElement, InputFieldElement } from 'components/';
-import { RouterService } from 'core/services';
 import { BasePageElement } from 'common/';
 import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
+import { TransactionCreateElementTemplate } from 'pages/transaction-create';
 dayjs.extend(utc);
 
-@controller
+@controller('transaction-create')
 class TransactionCreateElement extends BasePageElement {
 	@targets inputs: Array<InputFieldElement | AppDropdownElement>;
 	@target appForm: AppFormElement;
@@ -138,76 +137,8 @@ class TransactionCreateElement extends BasePageElement {
 		return _return;
 	}
 
-	render = (): TemplateResult => {
-		const renderInput = (type, name, label, rules, hide?, customAction?) => {
-			if (hide) {
-				return html``;
-			}
-			return html`<input-field
-				data-type="${type}"
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="transaction-create.inputs"
-				data-rules="${rules}"
-				custom-action="${customAction}"
-			></input-field>`;
-		};
-
-		const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
-			if (hide) {
-				return html``;
-			}
-			return html`<input-field
-				data-type="number"
-				data-pattern="${pattern}"
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="transaction-create.inputs"
-				data-rules="${rules}"
-				custom-action="${customAction}"
-			></input-field>`;
-		};
-
-		const renderDropdown = (fetch, name, label, rules, hide?) => {
-			if (hide) {
-				return html``;
-			}
-			return html`<app-dropdown
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="transaction-create.inputs"
-				data-rules="${rules}"
-				data-fetch="${fetch}"
-			></app-dropdown>`;
-		};
-
-		return html`
-			<app-form
-				data-custom="transaction-create#onSubmit"
-				data-has-cancel="true"
-				data-target="transaction-create.appForm"
-			>
-				${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
-				${renderInput('text', 'description', 'Description', 'required')}
-				${renderInput('date', 'transactionDate', 'Transaction date', 'required')}
-				${renderDropdown(
-					'transaction-create#getWallets',
-					'wallet',
-					'Wallet',
-					'required',
-					this.walletData && this.walletData.walletId
-				)}
-				${renderDropdown(
-					'transaction-create#getTypes',
-					'transactionType',
-					'Transaction Type',
-					'required',
-					this.walletData && this.walletData.walletId
-				)}
-				${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
-			</app-form>
-		`;
-	};
+	render = (): TemplateResult =>
+		TransactionCreateElementTemplate({ errorMessage: this.errorMessage, walletData: this.walletData });
 }
 
 export type { TransactionCreateElement };

src/pages/transaction-create/TransactionCreateElementTemplate.ts

@@ -0,0 +1,69 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { errorMessage, walletData } = props;
+	const renderInput = (type, name, label, rules, hide?, customAction?) => {
+		if (hide) {
+			return nothing;
+		}
+		return html`<input-field
+			data-type="${type}"
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="transaction-create.inputs"
+			data-rules="${rules}"
+			custom-action="${customAction}"
+		></input-field>`;
+	};
+
+	const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
+		if (hide) {
+			return nothing;
+		}
+		return html`<input-field
+			data-type="number"
+			data-pattern="${pattern}"
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="transaction-create.inputs"
+			data-rules="${rules}"
+			custom-action="${customAction}"
+		></input-field>`;
+	};
+
+	const renderDropdown = (fetch, name, label, rules, hide?) => {
+		if (hide) {
+			return nothing;
+		}
+		return html`<app-dropdown
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="transaction-create.inputs"
+			data-rules="${rules}"
+			data-fetch="${fetch}"
+		></app-dropdown>`;
+	};
+
+	return html`
+		<app-form data-custom="transaction-create#onSubmit" data-has-cancel="true" data-target="transaction-create.appForm">
+			${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
+			${renderInput('text', 'description', 'Description', 'required')}
+			${renderInput('date', 'transactionDate', 'Transaction date', 'required')}
+			${renderDropdown(
+				'transaction-create#getWallets',
+				'wallet',
+				'Wallet',
+				'required',
+				walletData && walletData.walletId
+			)}
+			${renderDropdown(
+				'transaction-create#getTypes',
+				'transactionType',
+				'Transaction Type',
+				'required',
+				walletData && walletData.walletId
+			)}
+			${errorMessage ? html`<div>${errorMessage}</div>` : nothing}
+		</app-form>
+	`;
+};

src/pages/transaction-create/index.ts

@@ -0,0 +1,2 @@
+export { default as TransactionCreateElementTemplate } from './TransactionCreateElementTemplate';
+export * from './TransactionCreateElement';

src/pages/transaction-edit/TransactionEditElement.ts

@@ -1,14 +1,14 @@
-import { targets, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, targets, controller, target } from 'core/utils';
 import { AuthService, TransactionsService, TransactionTypeService, WalletService } from 'services/';
 import { AppFormElement, InputFieldElement } from 'components/';
 import { BasePageElement } from 'common/';
 import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
+import { TransactionEditElementTemplate } from 'pages/transaction-edit';
 dayjs.extend(utc);
 
-@controller
+@controller('transaction-edit')
 class TransactionEditElement extends BasePageElement {
 	@targets inputs: Array<InputFieldElement | AppDropdownElement>;
 	@target appForm: AppFormElement;
@@ -31,7 +31,7 @@ class TransactionEditElement extends BasePageElement {
 		this.authService = new AuthService(this.appMain.appService);
 		this.walletData = this.getData();
 		this.update();
-		this.getTransaction(this.walletData?.id)
+		this.getTransaction(this.walletData?.id);
 		if (this.walletData && this.walletData.walletId) {
 			this.setTransactionType();
 		} else {
@@ -42,7 +42,7 @@ class TransactionEditElement extends BasePageElement {
 	getTransaction = async (id) => {
 		try {
 			const response = await this.transactionService.get(id, {
-				embed: 'Wallet,TransactionType'
+				embed: 'Wallet,TransactionType',
 			});
 			const wallet = this.appForm.getInput('wallet');
 			if (wallet) {
@@ -56,10 +56,8 @@ class TransactionEditElement extends BasePageElement {
 			response.transactionType = response.transactionTypeId;
 			response.transactionDate = dayjs(response.transactionDate).format('YYYY-MM-DD');
 			this.appForm.set(response);
-		} catch (err) {
-
-		}
-	}
+		} catch (err) {}
+	};
 
 	get nameInput(): InputFieldElement | AppDropdownElement {
 		for (const i in this.inputs) {
@@ -159,76 +157,8 @@ class TransactionEditElement extends BasePageElement {
 		return _return;
 	}
 
-	render = (): TemplateResult => {
-		const renderInput = (type, name, label, rules, hide?, customAction?) => {
-			if (hide) {
-				return html``;
-			}
-			return html`<input-field
-				data-type="${type}"
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="transaction-edit.inputs"
-				data-rules="${rules}"
-				custom-action="${customAction}"
-			></input-field>`;
-		};
-
-		const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
-			if (hide) {
-				return html``;
-			}
-			return html`<input-field
-				data-type="number"
-				data-pattern="${pattern}"
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="transaction-edit.inputs"
-				data-rules="${rules}"
-				custom-action="${customAction}"
-			></input-field>`;
-		};
-
-		const renderDropdown = (fetch, name, label, rules, hide?) => {
-			if (hide) {
-				return html``;
-			}
-			return html`<app-dropdown
-				data-name="${name}"
-				data-label="${label}"
-				data-targets="transaction-edit.inputs"
-				data-rules="${rules}"
-				data-fetch="${fetch}"
-			></app-dropdown>`;
-		};
-
-		return html`
-			<app-form
-				data-custom="transaction-edit#onSubmit"
-				data-has-cancel="true"
-				data-target="transaction-edit.appForm"
-			>
-				${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
-				${renderInput('text', 'description', 'Description', 'required')}
-				${renderInput('date', 'transactionDate', 'Transaction date', 'required')}
-				${renderDropdown(
-					'transaction-edit#getWallets',
-					'wallet',
-					'Wallet',
-					'required',
-					this.walletData && this.walletData.walletId
-				)}
-				${renderDropdown(
-					'transaction-edit#getTypes',
-					'transactionType',
-					'Transaction Type',
-					'required',
-					this.walletData && this.walletData.walletId
-				)}
-				${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
-			</app-form>
-		`;
-	};
+	render = (): TemplateResult =>
+		TransactionEditElementTemplate({ errorMessage: this.errorMessage, walletData: this.walletData });
 }
 
 export type { TransactionEditElement };

src/pages/transaction-edit/TransactionEditElementTemplate.ts

@@ -0,0 +1,69 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { errorMessage, walletData } = props;
+	const renderInput = (type, name, label, rules, hide?, customAction?) => {
+		if (hide) {
+			return nothing;
+		}
+		return html`<input-field
+			data-type="${type}"
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="transaction-edit.inputs"
+			data-rules="${rules}"
+			custom-action="${customAction}"
+		></input-field>`;
+	};
+
+	const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
+		if (hide) {
+			return nothing;
+		}
+		return html`<input-field
+			data-type="number"
+			data-pattern="${pattern}"
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="transaction-edit.inputs"
+			data-rules="${rules}"
+			custom-action="${customAction}"
+		></input-field>`;
+	};
+
+	const renderDropdown = (fetch, name, label, rules, hide?) => {
+		if (hide) {
+			return nothing;
+		}
+		return html`<app-dropdown
+			data-name="${name}"
+			data-label="${label}"
+			data-targets="transaction-edit.inputs"
+			data-rules="${rules}"
+			data-fetch="${fetch}"
+		></app-dropdown>`;
+	};
+
+	return html`
+		<app-form data-custom="transaction-edit#onSubmit" data-has-cancel="true" data-target="transaction-edit.appForm">
+			${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
+			${renderInput('text', 'description', 'Description', 'required')}
+			${renderInput('date', 'transactionDate', 'Transaction date', 'required')}
+			${renderDropdown(
+				'transaction-edit#getWallets',
+				'wallet',
+				'Wallet',
+				'required',
+				walletData && walletData.walletId
+			)}
+			${renderDropdown(
+				'transaction-edit#getTypes',
+				'transactionType',
+				'Transaction Type',
+				'required',
+				walletData && walletData.walletId
+			)}
+			${errorMessage ? html`<div>${errorMessage}</div>` : nothing}
+		</app-form>
+	`;
+};

src/pages/transaction-edit/index.ts

@@ -0,0 +1,2 @@
+export { default as TransactionEditElementTemplate } from './TransactionEditElementTemplate';
+export * from './TransactionEditElement';

src/pages/wallet-create/WalletCreateElement.ts

@@ -1,11 +1,10 @@
-import { targets, controller } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { html, TemplateResult, targets, controller } from 'core/utils';
 import { AuthService, WalletService } from 'services/';
 import { InputFieldElement } from 'components/';
-import { RouterService } from 'core/services';
 import { BasePageElement } from 'common/';
+import { WalletCreateElementTemplate } from 'pages/wallet-create';
 
-@controller
+@controller('wallet-create')
 class WalletCreateElement extends BasePageElement {
 	@targets inputs: Array<InputFieldElement>;
 	private walletService: WalletService;
@@ -68,20 +67,7 @@ class WalletCreateElement extends BasePageElement {
 		return _return;
 	}
 
-	render = (): TemplateResult => {
-		return html`
-			<app-form data-custom="wallet-create#onSubmit" data-has-cancel="true">
-				<input-field
-					data-type="text"
-					data-name="name"
-					data-label="Name"
-					data-targets="wallet-create.inputs"
-					data-rules="required"
-				></input-field>
-				${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
-			</app-form>
-		`;
-	};
+	render = (): TemplateResult => WalletCreateElementTemplate({ errorMessage: this.errorMessage });
 }
 
 export type { WalletCreateElement };

src/pages/wallet-create/WalletCreateElementTemplate.ts

@@ -0,0 +1,14 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default ({ errorMessage }): TemplateResult => html`
+	<app-form data-custom="wallet-create#onSubmit" data-has-cancel="true">
+		<input-field
+			data-type="text"
+			data-name="name"
+			data-label="Name"
+			data-targets="wallet-create.inputs"
+			data-rules="required"
+		></input-field>
+		${errorMessage ? html`<div>${errorMessage}</div>` : html``}
+	</app-form>
+`;

src/pages/wallet-create/index.ts

@@ -0,0 +1,2 @@
+export { default as WalletCreateElementTemplate } from './WalletCreateElementTemplate';
+export * from './WalletCreateElement';

src/pages/wallet-edit/WalletEditElement.ts

@@ -1,10 +1,10 @@
-import { targets, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, targets, controller, target } from 'core/utils';
 import { AuthService, WalletService } from 'services/';
-import { AppDropdownElement, AppFormElement, InputFieldElement } from 'components/';
+import { AppFormElement, InputFieldElement } from 'components/';
 import { BasePageElement } from 'common/';
+import { WalletEditElementTemplate } from 'pages/wallet-edit';
 
-@controller
+@controller('wallet-edit')
 class WalletEditElement extends BasePageElement {
 	@targets inputs: Array<InputFieldElement>;
 	@target appForm: AppFormElement;
@@ -22,17 +22,15 @@ class WalletEditElement extends BasePageElement {
 		this.authService = new AuthService(this.appMain.appService);
 		this.walletData = this.getData();
 		this.update();
-		this.getWallet(this.walletData?.id)
+		this.getWallet(this.walletData?.id);
 	};
 
 	getWallet = async (id) => {
 		try {
 			const response = await this.walletService.get(id, null);
 			this.appForm.set(response);
-		} catch (err) {
-
-		}
-	}
+		} catch (err) {}
+	};
 
 	get nameInput(): InputFieldElement {
 		for (const i in this.inputs) {
@@ -78,21 +76,7 @@ class WalletEditElement extends BasePageElement {
 		return _return;
 	}
 
-	render = (): TemplateResult => {
-		return html`
-			<app-form data-custom="wallet-edit#onSubmit" data-has-cancel="true" 
-			data-target="wallet-edit.appForm">
-				<input-field
-					data-type="text"
-					data-name="name"
-					data-label="Name"
-					data-targets="wallet-edit.inputs"
-					data-rules="required"
-				></input-field>
-				${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
-			</app-form>
-		`;
-	};
+	render = (): TemplateResult => WalletEditElementTemplate({ errorMessage: this.errorMessage });
 }
 
 export type { WalletEditElement };

src/pages/wallet-edit/WalletEditElementTemplate.ts

@@ -0,0 +1,14 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default ({ errorMessage }): TemplateResult => html`
+	<app-form data-custom="wallet-edit#onSubmit" data-has-cancel="true" data-target="wallet-edit.appForm">
+		<input-field
+			data-type="text"
+			data-name="name"
+			data-label="Name"
+			data-targets="wallet-edit.inputs"
+			data-rules="required"
+		></input-field>
+		${errorMessage ? html`<div>${errorMessage}</div>` : html``}
+	</app-form>
+`;

src/pages/wallet-edit/index.ts

@@ -0,0 +1,2 @@
+export { default as WalletEditElementTemplate } from './WalletEditElementTemplate';
+export * from './WalletEditElement';

src/pages/wallet-list/WalletListElement.ts

@@ -1,10 +1,10 @@
-import { targets, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { html, TemplateResult, targets, controller, target } from 'core/utils';
 import { AuthService, WalletService } from 'services/';
 import { AppMainElement, AppPaginationElement, InputFieldElement } from 'components/';
 import { BasePageElement } from 'common/';
+import { WalletListElementTemplate } from 'pages/wallet-list';
 
-@controller
+@controller('wallet-list')
 class WalletListElement extends BasePageElement {
 	@targets inputs: Array<InputFieldElement>;
 	private walletService: WalletService;
@@ -27,11 +27,11 @@ class WalletListElement extends BasePageElement {
 
 	elementDisconnected = (appMain: AppMainElement) => {
 		appMain?.removeEventListener('walletupdate', this.updateToken);
-	}
+	};
 
 	get updateToken() {
 		return this.pagination?.defaultFetch;
-	} 
+	}
 
 	getWallets = async (options): Promise<any> => {
 		try {
@@ -48,21 +48,21 @@ class WalletListElement extends BasePageElement {
 			this.appMain.closeModal();
 		} else {
 			this.appMain.createModal('wallet-edit', {
-				id: id
+				id: id,
 			});
 		}
-	}
-
-	renderItem = (item): TemplateResult => html`<tr class="col-wallet">
-		<td><app-link class="wallet-item" data-to="/wallet/${item.id}" data-title="${item.name}"></app-link></td>
-		<td class="--right">
-			<span><button class="btn btn-rounded btn-gray" @click=${() => this.walletEdit(item.id)}}>Edit</button></span>
-		</td>
-	</tr>`;
-
-	render = (): TemplateResult => {
-		return html` <app-pagination data-target="wallet-list.pagination"></app-pagination> `;
 	};
+
+	renderItem = (item): TemplateResult => WalletListItemTemplate({ item, walletEdit: this.walletEdit });
+
+	render = (): TemplateResult => WalletListElementTemplate();
 }
 
 export type { WalletListElement };
+
+const WalletListItemTemplate = ({ item, walletEdit }): TemplateResult => html`<tr class="col-wallet">
+	<td><app-link class="wallet-item" data-to="/wallet/${item.id}" data-title="${item.name}"></app-link></td>
+	<td class="--right">
+		<span><button class="btn btn-rounded btn-gray" @click="${() => walletEdit(item.id)}}">Edit</button></span>
+	</td>
+</tr>`;

src/pages/wallet-list/WalletListElementTemplate.ts

@@ -0,0 +1,3 @@
+import { html, TemplateResult } from 'core/utils';
+
+export default (): TemplateResult => html`<app-pagination data-target="wallet-list.pagination"></app-pagination>`;

src/pages/wallet-list/index.ts

@@ -0,0 +1,2 @@
+export { default as WalletListElementTemplate } from './WalletListElementTemplate';
+export * from './WalletListElement';

src/pages/wallet-page/WalletPageElement.ts

@@ -1,11 +1,11 @@
-import { controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { html, TemplateResult, controller, target } from 'core/utils';
 import { SubscriptionService, TransactionsService, WalletService } from 'services/';
 import { AppMainElement, AppPaginationElement, WalletHeaderElement } from 'components/';
 import { BasePageElement } from 'common/';
 import dayjs from 'dayjs';
+import { WalletPageElementTemplate } from 'pages/wallet-page';
 
-@controller
+@controller('wallet-page')
 class WalletPageElement extends BasePageElement {
 	private transactionsService: TransactionsService;
 	private subscriptionService: SubscriptionService;
@@ -17,18 +17,18 @@ class WalletPageElement extends BasePageElement {
 	walletTitle: string;
 	constructor() {
 		super({
-			title: 'Wallet'
+			title: 'Wallet',
 		});
 	}
 
-	get pageTitle(){
+	get pageTitle() {
 		if (this.walletTitle) {
-			return `Wallet - ${this.walletTitle}`
+			return `Wallet - ${this.walletTitle}`;
 		}
-		return 'Wallet'
+		return 'Wallet';
 	}
 
-	elementConnected = async(): Promise<void> => {
+	elementConnected = async (): Promise<void> => {
 		this.walletService = new WalletService(this.appMain?.appService);
 		this.transactionsService = new TransactionsService(this.appMain?.appService);
 		this.subscriptionService = new SubscriptionService(this.appMain?.appService);
@@ -77,7 +77,7 @@ class WalletPageElement extends BasePageElement {
 		}
 	};
 
-	getWallet = async() => {
+	getWallet = async () => {
 		try {
 			const id = this.walletId;
 			const response = await this.walletService.get(id, null);
@@ -86,7 +86,7 @@ class WalletPageElement extends BasePageElement {
 			throw err;
 		}
 		this.update();
-	}
+	};
 
 	subscriptionEdit = (id) => {
 		const _modal = this.appMain.appModal;
@@ -94,42 +94,24 @@ class WalletPageElement extends BasePageElement {
 			this.appMain.closeModal();
 		} else {
 			this.appMain.createModal('subscription-edit', {
-				id: id
+				id: id,
 			});
 		}
-	}
+	};
 
 	subscriptionEnd = async (id) => {
 		if (confirm('Are you sure you want to end this subscription?')) {
 			await this.subscriptionService.endSubscription(id);
 			this.appMain.triggerTransactionUpdate();
 		}
-	}
+	};
 
-	renderSubscription = (item) => html`<tr class="col-subscription">
-		<td class="--left">${dayjs(item.lastTransactionDate).format("MMM DD 'YY")}</td>
-		<td class="--left">every ${item.customRange} ${item.rangeName}</td>
-		<td class="--left">${item.description}</td>
-		<td class="--left">${dayjs(item.nextTransaction).format("MMM DD 'YY")}</td>
-		<td class="balance-cell --right">
-			<span
-				class="balance ${item.amount > 0 && item?.transactionType?.type != 'expense' ? '--positive' : '--negative'}"
-			>
-				${item?.transactionType?.type == 'expense' ? '- ' : ''}
-				${Number(item.amount).toLocaleString('en-US', {
-					maximumFractionDigits: 2,
-					minimumFractionDigits: 2,
-				})}
-			</span>
-			<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
-		</td>
-		${item.hasEnd ? html`` : html`
-		<td class="--right">
-			<span><button class="btn btn-rounded btn-gray" @click=${() => this.subscriptionEdit(item.id)}}>Edit</button></span>
-			<span><button class="btn btn-rounded btn-alert"  @click=${() => this.subscriptionEnd(item.id)}}>End</button></span>
-		</td>`
-		}
-	</tr>`;
+	renderSubscription = (item) =>
+		WalletPageSubscriptionTemplate({
+			item,
+			subscriptionEnd: this.subscriptionEnd,
+			subscriptionEdit: this.subscriptionEdit,
+		});
 
 	getSubscriptions = async (options): Promise<any> => {
 		try {
@@ -221,49 +203,45 @@ class WalletPageElement extends BasePageElement {
 			});
 		}
 	};
-	
+
 	walletEdit = () => {
 		const _modal = this.appMain.appModal;
 		if (_modal) {
 			this.appMain.closeModal();
 		} else {
 			this.appMain.createModal('wallet-edit', {
-				id: this.routerService?.routerState?.data?.walletId
+				id: this.routerService?.routerState?.data?.walletId,
 			});
 		}
-	}
-
-	render = (): TemplateResult => {
-		const renderHeader = () => html`<wallet-header
-			data-target="wallet-page.walletHeader"
-			data-current-balance="0"
-			data-last-month="0"
-			data-next-month="0"
-			data-currency="0"
-			data-custom="wallet-page#getBalance"
-		></wallet-header>`;
-
-		const renderWallet = () => {
-			if (this.routerService?.routerState?.data?.walletId) {
-				return html`<div class="wallet-buttons">
-				<button class="btn btn-squared btn-gray" app-action="click:wallet-page#walletEdit">Edit Wallet</button>
-					<div class="button-group">
-						<button class="btn btn-squared btn-primary" app-action="click:wallet-page#newSub">New Subscription</button>
-						<button class="btn btn-squared btn-red" app-action="click:wallet-page#newExpense">New Expense</button>
-						<button class="btn btn-squared btn-green" app-action="click:wallet-page#newGain">New Gain</button>
-					</div>
-				</div>`;
-			}
-			return html``;
-		};
-		return html`<div>
-			${renderHeader()} ${renderWallet()}
-			<h2>Transactions</h2>
-			<app-pagination data-target="wallet-page.pagination"></app-pagination>
-			<h2>Subscriptions</h2>
-			<app-pagination data-target="wallet-page.paginationSub" data-table-layout="subscription-table"></app-pagination>
-		</div>`;
 	};
+
+	render = (): TemplateResult =>
+		WalletPageElementTemplate({ walletId: this.routerService?.routerState?.data?.walletId });
 }
 
+const WalletPageSubscriptionTemplate = ({ item, subscriptionEdit, subscriptionEnd }): TemplateResult => html`<tr
+	class="col-subscription"
+>
+	<td class="--left">${dayjs(item.lastTransactionDate).format("MMM DD 'YY")}</td>
+	<td class="--left">every ${item.customRange} ${item.rangeName}</td>
+	<td class="--left">${item.description}</td>
+	<td class="--left">${dayjs(item.nextTransaction).format("MMM DD 'YY")}</td>
+	<td class="balance-cell --right">
+		<span class="balance ${item.amount > 0 && item?.transactionType?.type != 'expense' ? '--positive' : '--negative'}">
+			${item?.transactionType?.type == 'expense' ? '- ' : ''}
+			${Number(item.amount).toLocaleString('en-US', {
+				maximumFractionDigits: 2,
+				minimumFractionDigits: 2,
+			})}
+		</span>
+		<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
+	</td>
+	${item.hasEnd
+		? html``
+		: html` <td class="--right">
+				<span><button class="btn btn-rounded btn-gray" @click="${() => subscriptionEdit(item.id)}}">Edit</button></span>
+				<span><button class="btn btn-rounded btn-alert" @click="${() => subscriptionEnd(item.id)}}">End</button></span>
+		  </td>`}
+</tr>`;
+
 export type { WalletPageElement };

src/pages/wallet-page/WalletPageElementTemplate.ts

@@ -0,0 +1,34 @@
+import { html, nothing, TemplateResult } from 'core/utils';
+
+export default (props): TemplateResult => {
+	const { walletId } = props;
+	const renderHeader = () => html`<wallet-header
+		data-target="wallet-page.walletHeader"
+		data-current-balance="0"
+		data-last-month="0"
+		data-next-month="0"
+		data-currency="0"
+		data-custom="wallet-page#getBalance"
+	></wallet-header>`;
+
+	const renderWallet = () => {
+		if (walletId) {
+			return html`<div class="wallet-buttons">
+				<button class="btn btn-squared btn-gray" app-action="click:wallet-page#walletEdit">Edit Wallet</button>
+				<div class="button-group">
+					<button class="btn btn-squared btn-primary" app-action="click:wallet-page#newSub">New Subscription</button>
+					<button class="btn btn-squared btn-red" app-action="click:wallet-page#newExpense">New Expense</button>
+					<button class="btn btn-squared btn-green" app-action="click:wallet-page#newGain">New Gain</button>
+				</div>
+			</div>`;
+		}
+		return nothing;
+	};
+	return html`<div>
+		${renderHeader()} ${renderWallet()}
+		<h2>Transactions</h2>
+		<app-pagination data-target="wallet-page.pagination"></app-pagination>
+		<h2>Subscriptions</h2>
+		<app-pagination data-target="wallet-page.paginationSub" data-table-layout="subscription-table"></app-pagination>
+	</div>`;
+};

src/pages/wallet-page/index.ts

@@ -0,0 +1,2 @@
+export { default as WalletPageElementTemplate } from './WalletPageElementTemplate';
+export * from './WalletPageElement';