export class UiElement { constructor(private elementID, private containerID, private viewClass) { } private getContainer() { return document.getElementById(this.containerID); } public createElement(html: string) { const container = this.getContainer(); if (container) { container.appendChild(this.getElement(html)); } // this.registerEvents(onConfirm, onCancel); } public delete() { const element = document.getElementById(this.elementID); if (element) { element.remove(); } } public onClicked(listener: any) { this.registerEvent('click', listener); } public onChanged(listener: any) { this.registerEvent('change', listener); } public onBlur(listener: any) { this.registerEvent('blur', listener); } private registerEvent(event: string, listener: any) { const element = document.getElementById(this.elementID); element.addEventListener(event, (e) => { if (listener) { listener(); } e.stopImmediatePropagation(); }); } private getElement(html: string) { const elemDiv = document.createElement('div'); //elemDiv.id = this.elementID; elemDiv.className = this.viewClass; elemDiv.innerHTML = html; return elemDiv; } public getValue() { return (document.getElementById(this.elementID) as HTMLInputElement).value; } }