@brandup/ui-textbox 1.0.14

package/README.md

@@ -0,0 +1,27 @@
+# brandup-ui-textbox
+
+[![Build Status](https://dev.azure.com/brandup/BrandUp%20Core/_apis/build/status%2FBrandUp%2Fbrandup-ui-kit?branchName=master)]()
+
+## Installation
+
+Install NPM package [@brandup/ui-textbox](https://www.npmjs.com/package/@brandup/ui-textbox).
+
+```
+npm i @brandup/ui-textbox@latest
+```
+
+## TextBox
+
+`Textbox` - это класс компонента для ввода текста, который расширяет возможности стандартных элементов `input` и `textarea`.
+Наследуется от `InputControl`.
+
+```html
+<input id="name" type="text" />
+```
+
+```TypeScript
+const inputElem = document.getElementById("name");
+const textbox = new Textbox(inputElem);
+
+textbox.on(CHANGE_EVENT, (e: ChangeEventData) => { });
+```

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@brandup/ui-textbox",
+  "description": "Textbox control type and styles.",
+  "keywords": [
+    "brandup",
+    "javascript",
+    "typescript",
+    "ui"
+  ],
+  "author": {
+    "name": "Dmitry Kovyazin",
+    "email": "it@brandup.online"
+  },
+  "homepage": "https://github.com/brandup-online/brandup-ui/npm/brandup-ui-textbox",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brandup-online/brandup-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/brandup-online/brandup-ui/issues",
+    "email": "it@brandup.online"
+  },
+  "license": "Apache-2.0",
+  "version": "1.0.14",
+  "main": "source/index.ts",
+  "types": "source/index.ts",
+  "dependencies": {
+    "@brandup/ui": "^1.0.32",
+    "@brandup/ui-dom": "^1.0.32",
+    "@brandup/ui-helpers": "^1.0.32",
+    "@brandup/ui-input": "^1.0.14",
+    "@brandup/ui-kit": "^1.0.14"
+  },
+  "files": [
+    "source",
+    "README.md"
+  ]
+}

package/source/index.ts

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

package/source/svg/copy.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 26 26" >
+<path d="M5.8 4C4.8055 4 4 4.8055 4 5.8V18.4H5.8V5.8H18.4V4H5.8ZM9.4 7.6C8.4055 7.6 7.6 8.4055 7.6 9.4V20.2C7.6 21.1945 8.4055 22 9.4 22H20.2C21.1945 22 22 21.1945 22 20.2V9.4C22 8.4055 21.1945 7.6 20.2 7.6H9.4ZM9.4 9.4H20.2V20.2H9.4V9.4Z" />
+</svg>

package/source/svg/tick.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 42 42" >
+<path d="M37.2371 8.00075C36.7922 8.01416 36.37 8.20224 36.0599 8.52514L15.0108 29.8187L5.94773 20.6504C5.78995 20.4841 5.60097 20.3514 5.39185 20.26C5.18273 20.1686 4.95768 20.1203 4.72988 20.1179C4.50207 20.1156 4.2761 20.1592 4.06518 20.2463C3.85427 20.3334 3.66266 20.4623 3.50157 20.6252C3.34048 20.7882 3.21315 20.982 3.12704 21.1954C3.04093 21.4087 2.99777 21.6373 3.00009 21.8678C3.00241 22.0982 3.05015 22.3259 3.14054 22.5375C3.23092 22.749 3.36212 22.9402 3.52645 23.0998L13.8002 33.4929C14.1213 33.8176 14.5568 34 15.0108 34C15.4648 34 15.9003 33.8176 16.2214 33.4929L38.4811 10.9745C38.7286 10.7312 38.8976 10.418 38.966 10.0759C39.0344 9.73372 38.9991 9.37865 38.8646 9.05718C38.7301 8.73571 38.5028 8.46284 38.2123 8.27433C37.9219 8.08582 37.582 7.99046 37.2371 8.00075Z" />
+</svg>

package/source/textbox.less

@@ -0,0 +1,264 @@
+:root {
+	--textbox-maxheight: 200px;
+	--textbox-multyline-height: 100px;
+}
+
+.ui-textbox {
+	min-height: var(--input-height);
+	max-height: var(--textbox-maxheight);
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: stretch;
+	position: relative;
+	background-color: var(--input-fill);
+	border-radius: var(--input-border-radius); // чтобы заливка при состояниях не выходила за пределы импута
+	box-sizing: border-box;
+	outline: none;
+	transition: background-color ease 60ms;
+	line-height: var(--input-line-height);
+	font-size: var(--input-font-size);
+	font-weight: var(--input-font-weight);
+	color: var(--input-color);
+
+	--svg-fill: var(--input-color);
+	--svg-size: 18px;
+
+	& .decorator {
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		border: var(--input-border-type) var(--input-border-width) var(--input-border-color);
+		border-radius: var(--input-border-radius);
+		z-index: 1;
+		box-sizing: border-box;
+		transition: border-color ease 120ms;
+	}
+
+	& .editor {
+		flex: 1 1 auto;
+		display: flex;
+		flex-flow: row nowrap;
+		gap: 15px;
+		padding: calc((var(--input-height) - var(--input-line-height)) / 2) var(--input-padding-lr);
+		box-sizing: border-box;
+		cursor: text;
+		position: relative;
+		overflow-y: auto;
+		z-index: 2;
+		margin-right: 5px;
+		padding-right: calc(var(--input-padding-lr) - 5px);
+		scrollbar-width: 6px;
+
+		&::-webkit-scrollbar {
+			width: 6px;
+			background: none;
+		}
+
+		&::-webkit-scrollbar-track {
+			border-radius: 3px;
+			background-color: transparent;
+			margin: 6px 0;
+			cursor: default;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-color: #8696a0;
+			border-radius: 3px;
+			cursor: default;
+		}
+	}
+
+	& .input {
+		appearance: none;
+		position: relative;
+		flex: 1 1 auto;
+		box-sizing: border-box;
+		word-wrap: anywhere;
+		outline: none;
+
+		&:empty {
+			&:after {
+				content: attr(data-placeholder);
+				display: block;
+				position: absolute;
+				left: 0;
+				top: 0;
+				right: 0;
+				color: var(--placeholder-color);
+				font-weight: var(--placeholder-font-weight);
+				font-style: var(--placeholder-font-style);
+				box-sizing: border-box;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+
+			& ~ .symbols {
+				display: none;
+			}
+		}
+	}
+
+	& .symbols {
+		flex: 0 0 auto;
+		display: none;
+		font-size: 13px;
+		font-weight: 400;
+		z-index: 5;
+		user-select: none;
+		color: #656565;
+		opacity: 0.8;
+	}
+
+	& .actions {
+		flex: 0 0 auto;
+		position: relative;
+		z-index: 4;
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+		height: var(--input-height);
+
+		& button {
+			display: flex;
+			flex-flow: row nowrap;
+			justify-content: center;
+			align-items: center;
+			width: var(--input-height);
+			height: var(--input-height);
+			background: transparent;
+			border: none;
+			padding: 0;
+			margin: 0;
+			outline: none;
+			transition: all ease 100ms;
+		}
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	// мультистроковый режим
+	&.multyline {
+		// data-multyline == true
+		min-height: var(--textbox-multyline-height);
+
+		& .editor {
+			flex-direction: column;
+			gap: 2px;
+		}
+
+		& .input {
+			flex: 1 10 auto;
+
+			&:empty {
+				&:after {
+					white-space: normal;
+					text-overflow: unset;
+				}
+			}
+		}
+	}
+
+	// включен счётчик символов
+	&.counter {
+		// data-symbolcounter == true
+
+		& .symbols {
+			display: block;
+		}
+
+		& .actions {
+			margin-left: -10px;
+		}
+	}
+
+	&:hover {
+		--input-border-color: var(--hover--input-border-color);
+		--input-fill: var(--hover--input-fill);
+		--input-color: var(--hover--input-color);
+		--svg-fill: var(--hover--input-color);
+	}
+
+	&.focused {
+		--input-border-color: var(--focus--input-border-color);
+		--input-fill: var(--focus--input-fill);
+		--input-color: var(--focus--input-color);
+		--svg-fill: var(--focus--input-color);
+	}
+
+	&.readonly {
+		--input-fill: var(--readonly--input-fill);
+		--input-color: var(--readonly--input-color);
+		--svg-fill: var(--readonly--input-color);
+	}
+
+	&.disabled {
+		--input-border-color: var(--disabled--input-border-color);
+		--input-fill: var(--disabled--input-fill);
+		--input-color: var(--disabled--input-color);
+		--svg-fill: var(--disabled--input-color);
+
+		& .editor {
+			user-select: none;
+			cursor: default;
+		}
+
+		& .actions {
+			& button {
+				cursor: default;
+
+				& svg {
+					fill: var(--disabled--input-color);
+				}
+			}
+		}
+	}
+
+	&.invalid {
+		--input-border-color: var(--invalid--input-border-color);
+		--input-fill: var(--invalid--input-fill);
+		--input-color: var(--invalid--input-color);
+		--placeholder-color: var(--invalid--input-color);
+		--svg-fill: var(--invalid--input-color);
+
+		& .decorator {
+			transition-delay: 0;
+		}
+	}
+
+	&.incorrect {
+		--input-fill: var(--incorrect--input-fill);
+		--input-color: var(--incorrect--input-color);
+		--svg-fill: var(--incorrect--input-color);
+
+		& .decorator {
+			transition-delay: 0;
+		}
+	}
+}
+
+.textbox-input {
+	opacity: 0;
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	outline: none;
+	visibility: collapse;
+}
+
+textarea.textbox-input ~ .textbox-miniature {
+	min-height: 100px;
+}
+
+.textbox-miniature {
+	border: var(--input-border-type) var(--input-border-width) var(--input-border-color);
+	border-radius: var(--input-border-radius);
+	height: var(--input-height);
+	background: white;
+	box-sizing: border-box;
+}

package/source/textbox.ts

@@ -0,0 +1,487 @@
+import "./textbox.less"; // стили компонента
+
+import { InputControl } from "@brandup/ui-input";
+import { IS_TOUCH_DEVICE } from "@brandup/ui-kit";
+import { DOM } from "@brandup/ui-dom";
+import { FuncHelper } from "@brandup/ui-helpers";
+import copyIcon from "./svg/copy.svg";
+import doneIcon from "./svg/tick.svg";
+
+export const ROOT_CLASS = "ui-textbox";
+export const INPUT_CLASS = "textbox-input";
+export const MINIATURE_CLASS = "textbox-miniature";
+export const CHANGE_EVENT = "textbox-change";
+export const MAX_EMAIL_LENGTH = 256; // https://www.rfc-editor.org/rfc/rfc5321#section-4.5.3
+
+export type TextBoxType = "text" | "email" | "url" | "tel" | "number";
+
+export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAreaElement> {
+	private __inputElem: HTMLElement;
+	private __actionsElem: HTMLElement;
+	private __symbolsCountElem?: HTMLElement;
+
+	readonly type: TextBoxType;
+	readonly allowEmptyStrings: boolean;
+	readonly multyline: boolean;
+	readonly placeholder: string | null;
+	readonly copyButton: boolean;
+	readonly maxlength: number;
+	readonly inputmode: string;
+	readonly symbolCounter: boolean;
+	readonly autoFocus: boolean;
+
+	get typeName(): string { return "BrandUp.TextBox"; }
+
+	constructor(valueElem: HTMLInputElement | HTMLTextAreaElement) {
+		super(valueElem);
+
+		if (this.__valueElem instanceof HTMLInputElement) {
+			switch (this.__valueElem.type) {
+				case "text":
+					this.type = "text";
+					break;
+				case "email":
+					this.type = "email";
+
+					if (!this.__valueElem.maxLength || this.__valueElem.maxLength > MAX_EMAIL_LENGTH)
+						this.__valueElem.maxLength = MAX_EMAIL_LENGTH;
+
+					break;
+				case "url":
+					this.type = "url";
+					break;
+				case "tel":
+					this.type = "tel";
+					break;
+				case "number":
+					this.type = "number";
+					this.__valueElem.step = "1"; // Поддерживаем пока что только целые числа
+					break;
+				default:
+					throw new Error(`Тип ввода ${this.__valueElem.type} не поддерживается.`);
+			}
+		}
+		else
+			this.type = "text";
+
+		this.__valueElem.classList.add(INPUT_CLASS);
+
+		// Инициализация свойств
+		this.maxlength = this.__valueElem.maxLength;
+		this.symbolCounter = this.__valueElem.hasAttribute("data-symbolcounter");
+		this.autoFocus = this.__valueElem.hasAttribute("data-autofocus");
+		this.allowEmptyStrings = this.__valueElem.hasAttribute("data-allow-empty-strings");
+		this.placeholder = this.__valueElem.getAttribute("placeholder");
+		this.inputmode = this.__valueElem.inputMode;
+		this.multyline = valueElem instanceof HTMLTextAreaElement;
+		this.copyButton = this.__valueElem.hasAttribute("data-copy-button") || this.__valueElem.hasAttribute("data-copybutton");
+
+		this.__inputElem = DOM.tag("div", { class: "input" });
+		this.__actionsElem = DOM.tag("div", { class: "actions" });
+
+		this.__renderUI();
+		this.__initLogic();
+		this.__initText();
+	}
+
+	private __renderUI() {
+		const container = DOM.tag("div", { class: [ROOT_CLASS].concat(Array.from(this.__valueElem.classList)) }, [
+			DOM.tag("div", { class: "decorator" }),
+			DOM.tag("div", "editor", [
+				this.__inputElem,
+				this.__symbolsCountElem = DOM.tag("div", { class: "symbols" })
+			]),
+			this.__actionsElem
+		]);
+
+		container.classList.remove(INPUT_CLASS);
+
+		this.__inputElem.tabIndex = this.__valueElem.tabIndex;
+		this.__valueElem.tabIndex = -1;
+
+		if (this.multyline) container.classList.add("multyline");
+
+		if (this.symbolCounter) container.classList.add("counter");
+
+		if (this.disabled) {
+			this.__inputElem.tabIndex = -1;
+		}
+		else
+			this.__inputElem.contentEditable = "true";
+
+		if (this.inputmode) this.__inputElem.inputMode = this.inputmode;
+
+		if (this.copyButton) {
+			const buttonElem = <HTMLButtonElement>DOM.tag("button", { command: "copy-text", title: "Скопировать в буфер обмена" }, copyIcon);
+			if (this.disabled)
+				buttonElem.disabled = true;
+			this.__actionsElem.insertAdjacentElement("beforeend", buttonElem);
+		}
+
+		this.__inputElem.setAttribute("data-placeholder", this.placeholder ?? "");
+
+		this.setElement(container);
+
+		if (this.__valueElem.nextElementSibling) {
+			// Если следующий элемент это миниатюра пока textbox не отрисован
+			const nextElem = <HTMLElement>this.__valueElem.nextElementSibling;
+			if (nextElem.classList.contains(MINIATURE_CLASS)) nextElem.remove();
+		}
+
+		this.__valueElem.insertAdjacentElement("afterend", container);
+		container.insertAdjacentElement("afterbegin", this.__valueElem);
+	}
+
+	private __initLogic() {
+		if (!this.element)
+			return;
+
+		this.element.addEventListener("drop", (e) => e.preventDefault());
+		this.element.addEventListener("dragenter", (e) => e.preventDefault());
+
+		this.__valueElem.addEventListener("change", (e: Event) => {
+			e.preventDefault();
+			e.stopImmediatePropagation();
+		});
+
+		let hasInputClick = false;
+		this.__inputElem.addEventListener("mousedown", () => {
+			if (this.disabled)
+				return;
+
+			hasInputClick = true;
+		});
+
+		this.__inputElem.addEventListener("focus", () => {
+			if (this.disabled)
+				return;
+
+			this.element?.classList.add("focused");
+
+			if (this.readonly)
+				this.__selectAll();
+			else if (!hasInputClick)
+				this.__carretToEnd(); // пыремещаем курсов в конец, если клик не по строке
+		});
+
+		this.__inputElem.addEventListener("blur", (e) => {
+			hasInputClick = false;
+
+			if (this.disabled)
+				return;
+
+			this.element?.classList.remove("focused");
+
+			// когда удаляем весь текст, то браузер оставляет один BR, что означает что текста нет
+			// удалить BR нужно, чтобы появился placeholder
+			if (this.__inputElem.firstChild?.nodeName === "BR")
+				DOM.empty(this.__inputElem);
+		});
+
+		this.__inputElem.addEventListener("dblclick", () => {
+			if (this.disabled)
+				return;
+
+			if (this.copyButton && this.readonly)
+				this.__selectAll();
+		});
+
+		this.element.addEventListener("paste", (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (this.readonly || this.disabled || !this.element) return false;
+
+			let pastedData = e.clipboardData?.getData("text/plain");
+			if (pastedData) {
+				if (this.type == "number") {
+					const numberData = /[\d\s]+/.exec(pastedData);
+					if (numberData && numberData.length)
+						pastedData = numberData[0].replace(' ', '');
+					else {
+						this.element.classList.add("incorrect");
+						window.setTimeout(() => this.element?.classList.remove("incorrect"), 300);
+						return;
+					}
+				}
+
+				const selection = window.getSelection();
+				if (!selection)
+					return; // TODO
+
+				if (this.maxlength > 0) {
+					// обрезаем вставляемый текст по кол-ву оставшихся символов для ввода
+
+					const selectionLength = selection.toString().length;
+					const currentTextLength = this.__getTextLenght();
+					const leftSymbols = this.maxlength - currentTextLength + selectionLength; // осталось символов для ввода
+
+					if (pastedData.length > leftSymbols)
+						pastedData = pastedData.substring(0, leftSymbols);
+				}
+
+				const lines = pastedData.split(/\n/);
+				// тримим все строки, кроме начала первой строки, вдруг так нужно
+				const output = lines.map((line, index) => index === 0 ? line.trimEnd() : line.trim());
+
+				var fragment = document.createDocumentFragment();
+				if (!this.multyline) {
+					fragment.appendChild(document.createTextNode(output.join(" ")));
+				} else {
+					output.forEach((line, index) => {
+						if (index > 0) fragment.appendChild(document.createElement("br"));
+
+						fragment.appendChild(document.createTextNode(line));
+					});
+				}
+
+				// Удаляем выделенную область
+				selection.getRangeAt(0).deleteContents();
+
+				// Вставляем текст
+				selection.getRangeAt(0).insertNode(fragment);
+
+				// Перемещаем курсор в конец вставленной области
+				selection.setPosition(selection.focusNode, selection.focusOffset);
+
+				this.__applyValue();
+			}
+		});
+
+		this.__inputElem.addEventListener("keydown", (e: KeyboardEvent) => {
+			if (!this.element)
+				return;
+
+			const isChar = e.key.length === 1;
+
+			if ((this.readonly || this.disabled) && isChar && !e.ctrlKey) {
+				e.preventDefault();
+				e.stopPropagation();
+				return false;
+			}
+
+			if (this.maxlength > 0 && isChar && !e.ctrlKey) {
+				const currentTextLength = this.__getTextLenght();
+				if (currentTextLength >= this.maxlength) {
+					e.preventDefault();
+					e.stopPropagation();
+
+					this.__toIncorrect();
+					return false;
+				}
+			}
+
+			if (isChar && !e.ctrlKey) {
+				let isIncorrect = false;
+
+				switch (this.type) {
+					case "number":
+						if (!/\d/.test(e.key))
+							isIncorrect = true;
+						break;
+					case "email":
+						if (!/[a-zA-Z\d\.\-\_\@]/.test(e.key))
+							isIncorrect = true;
+						break;
+				}
+
+				if (isIncorrect) {
+					e.preventDefault();
+					e.stopPropagation();
+
+					this.__toIncorrect();
+					return;
+				}
+			}
+
+			if (!this.multyline && (e.key == "U+000A" || e.key == "Enter")) {
+				// Если однострочный режим и нажат enter, то отправляем submit формы
+				e.preventDefault();
+				this.__submitForm();
+				return false;
+			}
+		});
+
+		this.__inputElem.addEventListener("input", () => {
+			if (!this.element)
+				return;
+
+			if (this.multyline && this.__inputElem.children.length === 1) {
+				const child = this.__inputElem.children.item(0);
+				if (child && child.tagName === "BR")
+					this.__inputElem.innerHTML = '';
+			}
+
+			this.__applyValue();
+
+			let clearInvalidState = true;
+
+			if (this.element.classList.contains("invalid"))
+				clearInvalidState = this.validate(); // Если уже не валидно, то перепроверяем
+
+			if (clearInvalidState)
+				this.element.classList.remove("invalid");
+		});
+
+		this.registerCommand("copy-text", async context => {
+			if (!window.navigator.clipboard || this.disabled) return;
+
+			await window.navigator.clipboard.writeText(this.__valueElem.value)
+
+			const prevHtml = context.target.innerHTML;
+			context.target.innerHTML = doneIcon;
+			context.target.classList.add("success");
+
+			const abort = new AbortController();
+			await FuncHelper.delay(2000, abort.signal);
+
+			context.target.innerHTML = prevHtml;
+			context.target.classList.remove("success");
+		});
+	}
+
+	private __initText() {
+		var html = "";
+
+		const text = this.__valueElem.value;
+		if (text) {
+			const lines = text.split(/\n/);
+			const output = lines.map((line, index) => {
+				line = line.trim();
+
+				if (index > 0) line = `<div>${line}</div>`;
+
+				return line;
+			});
+
+			html = output.join("");
+		}
+
+		this.__inputElem.innerHTML = html;
+
+		this.__refreshSymbolsCount();
+
+		if (this.autoFocus && !IS_TOUCH_DEVICE && !this.disabled && !this.readonly)
+			this.__inputElem.focus();
+	}
+
+	private __applyValue() {
+		let newValue = this.__inputElem.innerText.trim();
+		this.__valueElem.value = newValue;
+
+		this.__refreshSymbolsCount();
+		this.__onChange();
+	}
+
+	private __toIncorrect() {
+		if (!this.element)
+			return;
+
+		this.element.classList.add("incorrect");
+		window.setTimeout(() => this.element?.classList.remove("incorrect"), 200);
+	}
+
+	private __refreshSymbolsCount() {
+		if (!this.__symbolsCountElem)
+			return;
+
+		const textLength = this.__getTextLenght();
+		let counterValue: string;
+
+		if (this.maxlength > 0) {
+			counterValue = `${textLength}/${this.maxlength}`;
+			if (this.maxlength < textLength)
+				this.__symbolsCountElem.classList.add("invalid");
+			else
+				this.__symbolsCountElem.classList.remove("invalid");
+		}
+		else
+			counterValue = textLength.toString();
+
+		this.__symbolsCountElem.textContent = counterValue;
+	}
+
+	private __selectAll() {
+		this.__inputElem.focus();
+
+		window.getSelection()?.selectAllChildren(this.__inputElem)
+	}
+
+	private __carretToEnd() {
+		var range = document.createRange();
+		range.selectNodeContents(this.__inputElem);
+		range.collapse(false);
+		var sel = window.getSelection();
+		if (sel) {
+			sel.removeAllRanges();
+			sel.addRange(range);
+		}
+	}
+
+	private __getTextLenght() {
+		return this.__inputElem.innerText.length;
+	}
+
+	private __onChange() {
+		this.trigger(CHANGE_EVENT, <ChangeEventData>{
+			textbox: this,
+			value: this.getValue()
+		});
+	}
+
+	onChange(handler: (e: ChangeEventData) => void) {
+		this.on(CHANGE_EVENT, handler);
+	}
+
+	hasValue(): boolean {
+		return !!this.getValue();
+	}
+
+	getValue(): string {
+		return this.__valueElem.value?.trim() ?? null;
+	}
+
+	setValue(value: string): void {
+		this.__valueElem.value = value?.trim() ?? "";
+
+		this.__initText();
+		this.__onChange();
+	}
+
+	validate(): boolean {
+		if (!this.element)
+			return false;
+
+		let isValid = super.validate();
+		if (isValid) {
+			let value = this.getValue();
+
+			if (this.required && !value)
+				isValid = false;
+
+			if (this.maxlength > 0 && this.maxlength < value.length)
+				isValid = false;
+		}
+
+		if (!isValid)
+			this.element.classList.add("invalid");
+		else
+			this.element.classList.remove("invalid");
+
+		return isValid;
+	}
+
+	destroy(): void {
+		this.__valueElem.tabIndex = this.__inputElem.tabIndex;
+
+		this.element?.insertAdjacentElement("afterend", this.__valueElem);
+		this.element?.remove();
+
+		super.destroy();
+	}
+}
+
+export interface ChangeEventData {
+	textbox: TextBox;
+	value: string;
+}

package/source/typings/svg.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const content: any;
+    export default content;
+}