@brandup/ui-dropdown 1.0.20

package/README.md

@@ -0,0 +1,21 @@
+# brandup-ui-dropdown
+
+[![Build Status](https://dev.azure.com/brandup/BrandUp%20Core/_apis/build/status%2FBrandUp%2Fbrandup-ui-kit?branchName=master)]()
+
+## Installation
+
+Install NPM package [@brandup/ui](https://www.npmjs.com/package/@brandup/ui-kit).
+
+```
+npm i @brandup/ui-kit@latest
+```
+
+## DropDown
+
+`DropDown` - это классовый компонент, который расширяет возможности стандартных элементов `select`.
+Наследуется от `InputControl`.
+
+```JS
+const dropDownElem = document.getElementById("name");
+const dropdown = new DropDown(dropDownElem);
+```

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@brandup/ui-dropdown",
+  "description": "DropDown 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-dropdown",
+  "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.20",
+  "main": "source/index.ts",
+  "types": "source/index.ts",
+  "dependencies": {
+    "@brandup/ui": "^1.0.37",
+    "@brandup/ui-dom": "^1.0.37",
+    "@brandup/ui-helpers": "^1.0.37",
+    "@brandup/ui-input": "^1.0.20",
+    "@brandup/ui-kit": "^1.0.20"
+  },
+  "files": [
+    "source",
+    "README.md"
+  ]
+}

package/source/dropdown.less

@@ -0,0 +1,444 @@
+@import "@brandup/ui-kit/source/adaptive.less";
+
+.ui-dropdown {
+	position: relative;
+	box-sizing: border-box;
+	user-select: none;
+	width: var(--input-width);
+
+	& .view {
+		--svg-size: 12px;
+		--svg-fill: var(--input-color);
+			
+		display: flex;
+		height: var(--input-height);
+		flex-flow: row nowrap;
+		align-items: center;
+		justify-content: flex-start;
+		box-sizing: border-box;
+		color: var(--input-color);
+		white-space: nowrap;
+		border-radius: var(--input-border-radius);
+		padding: 10px var(--input-padding-lr);
+		background-color: var(--input-fill);
+		transition: background-color ease 100ms;
+		gap: 10px;
+		line-height: var(--line-height);
+		text-decoration: none !important;
+		outline: none;
+		border: none;
+		cursor: pointer;
+		width: 100%;
+		text-align: left;
+
+		&:before {
+			content: '';
+			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);
+			box-sizing: border-box;
+			transition: border-color ease 100ms;
+	  	}
+  
+	  	& span {
+			flex: 1 1 auto;
+			display: block;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+	  	}
+  
+	  	& svg {
+			transition: fill ease 100ms, transform ease 150ms;
+	  	}
+  
+	  	&:hover {
+			--input-color: var(--hover--input-color);
+			--input-fill: var(--hover--input-fill);
+			--input-border-color: var(--hover--input-border-color);
+	  	}
+  
+	  	&:focus {
+			--input-color: var(--focus--input-color);
+			--input-fill: var(--focus--input-fill);
+			--input-border-color: var(--focus--input-border-color);
+	  	}
+	}
+  
+	& .popup {
+		z-index: 1000;
+	  	display: none;
+	  	position: absolute;
+	  	top: 100%;
+	  	width: 100%;
+	  	transform: translateY(8px);
+	  	font-weight: 400;
+	  	outline: none;
+	  	min-width: 200px;
+		box-sizing: border-box;
+  
+	  	& .content {
+			--svg-fill: var(--popup-color);
+
+			display: flex;
+			flex-flow: column nowrap;
+			gap: var(--input-padding-lr);
+			background: var(--popup-fill);
+			color: var(--popup-color);
+			border-style: var(--popup-border-style);
+			border-color: var(--popup-border-color);
+			border-width: var(--popup-border-width);
+			border-radius: var(--popup-border-radius);
+			box-shadow: var(--popup-box-shadow);
+			padding: var(--input-padding-lr);
+			box-sizing: border-box;
+			max-height: 370px;
+  
+		  	& .header {
+				padding: 0;
+				display: none;
+				flex-flow: row nowrap;
+				align-items: center;
+
+				& span {
+					flex: 1 1 auto;
+					display: block;
+					font-weight: 500;
+					font-size: var(--svg-size);
+				}
+			
+				& button {
+					flex: 0 0 auto;
+					appearance: none;
+			  		display: flex;
+			  		align-items: center;
+			  		justify-content: center;
+			  		background: none;
+			  		border: none;
+			  		cursor: pointer;
+					position: relative;
+					padding: 0;
+				
+			  		&:after {
+						content: '';
+						display: block;
+						position: absolute;
+						left: -10px;
+						top: -10px;
+						right: -10px;
+						bottom: -10px;
+			  		}
+				}
+		  	}
+		
+		  	& ul {
+				flex: 1 1 100%;
+				height: 100%;
+				position: relative;
+				overflow-y: scroll;
+				padding-right: 5px;
+				scrollbar-width: 6px;
+			
+				&::-webkit-scrollbar {
+				  	width: 6px;
+				  	height: 5px;
+				  	background: none;
+				}
+			
+				&::-webkit-scrollbar-track {
+				  	border-radius: 3px;
+				  	background-color: transparent;
+				}
+			
+				&::-webkit-scrollbar-thumb {
+				  	background-color: #8696a0;
+				  	border-radius: 3px;
+				}
+			
+				& li {
+					padding: calc(var(--input-padding-lr) / 2) var(--input-padding-lr);
+			  		display: flex;
+					justify-content: space-between;
+					align-items: center;
+					border-radius: var(--input-border-radius);
+					min-height: unset;
+					cursor: pointer;
+				
+					& svg {
+						display: none;
+					}
+				
+					&:hover {
+						--input-color: var(--hover--input-color);
+						--input-fill: var(--hover--input-fill);
+					}
+				
+					&:focus {
+						--input-color: var(--focus--input-color);
+						--input-fill: var(--focus--input-fill);
+					}
+				
+					&.hasvalue {
+						--input-color: var(--hasvalue--input-color);
+						--input-fill: var(--hasvalue--input-fill);
+						
+						& svg {
+							display: block;
+						
+						  	--svg-fill: var(--hasvalue--input-color);
+					  	}
+					
+						&:focus {
+						  --input-color: var(--focus--input-color);
+						  --input-fill: var(--focus--input-fill);
+						}
+					}
+				}
+			
+				&.result {
+					& li {
+						display: none;
+					
+						&.ok {
+				  			display: flex;
+						}
+			  		}
+				}
+			
+				&.notfound {
+			  		display: none;
+				
+			  		& ~ .empty {
+						flex: 1 1 auto;
+						display: block;
+			  		}
+				}
+		  	}
+		
+		  	& .empty {
+				display: none;
+		  	}
+		
+		  	& .cancel {
+				display: none;
+		  	}
+		
+		  	&.top {
+				top: auto;
+				bottom: 100%;
+				transform: translateY(-8px);
+		  	}
+		
+		  	&.right {
+				left: 0;
+				right: auto;
+		  	}
+		}
+	}
+  
+	& .search {
+	  	flex: 0 0 auto;
+	  	display: none;
+	  	flex-flow: row nowrap;
+	  	position: relative;
+		
+	  	& svg {
+			display: block;
+			position: absolute;
+			left: var(--input-padding-lr);
+			top: 50%;
+			transform: translateY(-50%);
+	  	}
+  
+	  	& input {
+			--input-width: 100%;
+			padding-left: calc(var(--input-padding-lr) + var(--svg-size) + var(--input-padding-lr) / 2);
+	  	}
+	}
+
+	&.searchable {
+	  	& .search {
+			display: flex;
+	  	}
+	}
+
+	&.empty {
+		& .popup {
+			& .content {
+				& ul {
+					display: none;
+				}
+
+				& .empty {
+					display: block;
+				}
+			}
+		}
+	}
+
+	&.hasvalue {
+		--input-color: var(--hasvalue--input-color);
+		--input-fill: var(--hasvalue--input-fill);
+		--svg-fill: var(--hasvalue--input-color);
+
+		& .view {
+		  	&:hover,
+		  	&:focus {
+				--input-color: var(--hover--input-color);
+				--input-fill: var(--hover--input-fill);
+				--svg-fill: var(--hover--input-color);
+		  	}
+		}
+	}
+
+	&.expanded {
+		--input-color: var(--expanded--input-color);
+		--input-fill: var(--expanded--input-fill);
+		--svg-fill: var(--expanded--input-color);
+
+		& .view {
+	  		& svg {
+				transform: rotate(180deg);
+	  		}
+		}
+
+		& .popup {
+			display: block;
+		}
+	}
+  
+	&.invalid {
+		--input-color: var(--invalid--input-color);
+		--input-fill: var(--invalid--input-fill);
+		--input-border-color: var(--invalid--input-border-color);
+		--svg-fill: var(--invalid--input-color);
+	}
+  
+	&.disabled {
+		--input-color: var(--disabled--input-color);
+		--input-fill: var(--disabled--input-fill);
+		--svg-fill: var(--disabled--input-color);
+		--input-border-color: var(--disabled--input-border-color);
+
+	  	& .view {
+			cursor: default;
+  
+			&:focus,
+			&:hover {
+		  		--input-color: var(--disabled--input-color);
+		  		--input-fill: var(--disabled--input-fill);
+		  		--input-border-color: var(--disabled--input-border-color);
+			}
+	  	}
+	}
+
+	.adaptive-notebook({
+		& .popup .content {
+			max-height: 340px;
+		}
+	});
+	
+	.adaptive-notebook-small({
+		& .popup .content {
+			max-height: 320px;
+		}
+	});
+	
+	.adaptive-tablet({
+		& .popup {
+			position: fixed;
+			background: rgba(0, 0, 0, 0.5);
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			transform: none;
+			padding: var(--content-padding-lr);
+			min-width: auto;
+
+			& .content {
+				padding: 32px;
+				max-width: 540px;
+				max-height: 550px;
+				width: 100%;
+				height: 100%;
+
+				& .header {
+					display: flex;
+				}
+			}
+
+			&.top {
+				top: 0;
+				bottom: 0;
+				transform: none;
+			}
+
+			&.right {
+				left: 0;
+				right: 0;
+			}
+		}
+
+		&.expanded {
+			& .popup {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				& .content {
+					flex: 1 1 auto;
+				}
+			}
+		}
+	
+		& body.ui-dropdown-opened {
+			overflow: hidden;
+		}
+	});
+	
+	.adaptive-mobile({
+		& .popup {
+			padding: 0;
+
+			& .content {
+				padding: 28px;
+				max-width: none;
+				max-height: none;
+
+				& .cancel {
+					display: block;
+				}
+			}
+		}
+	});
+	
+	.adaptive-mobile-small({
+		& .popup {
+			& .content {
+				padding: 20px;
+			}
+		}
+	});
+}
+
+.ui-dropdown-input {
+	opacity: 0;
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	outline: none;
+	visibility: collapse;
+}
+
+.ui-dropdown-miniature {
+	border: var(--input-border-type) var(--input-border-width) var(--input-border-color);
+	background: #F6F7F8;
+	border-radius: var(--input-border-radius);
+	height: var(--input-height);
+	box-sizing: border-box;
+}

package/source/dropdown.ts

@@ -0,0 +1,498 @@
+import { InputControl } from "@brandup/ui-input";
+import { DOM } from "@brandup/ui-dom";
+import { detectLanguage, transcriptText } from "./utils/utilities";
+
+import "./dropdown.less"; // стили компонента
+
+import arrowBottomIcon from "./svg/arrow-down.svg";
+import checkIcon from "./svg/tick.svg";
+import searchIcon from "./svg/search.svg";
+import closeIcon from "./svg/cancel.svg";
+
+export const ROOT_CLASS = "ui-dropdown";
+export const INPUT_CLASS = "ui-dropdown-input";
+export const MINIATURE_CLASS = "ui-dropdown-miniature";
+export const CHANGE_EVENT = "dropdown-change";
+
+const TABLET_WIDTH = 1030;
+const BODY_EXPANDED = "ui-dropdown-opened";
+
+class DropDown extends InputControl<HTMLSelectElement> {
+	private __container: HTMLElement;
+	private __popupElem: HTMLElement;
+	private __listElem: HTMLElement;
+	private __textElem: HTMLElement;
+	private __emptyElem: HTMLElement;
+	private __searchInput: HTMLInputElement;
+	private __closePopupFunc: (e: MouseEvent) => void;
+	private __invalidTimeout?: number;
+	private __hasEmptyValue: boolean = false;
+
+	readonly placeholder: string;
+	readonly emptyText: string;
+	readonly searchPlaceholder: string;
+	readonly searchEmpty: string;
+	readonly searchOn: number | boolean = 15;
+
+	get typeName(): string { return "BrandUp.DropDown"; }
+
+	constructor(selectElem: HTMLSelectElement) {
+		super(selectElem);
+
+		this.__valueElem.classList.add(INPUT_CLASS);
+
+		this.placeholder = this.__valueElem.getAttribute("data-placeholder") || "Select";
+		this.emptyText = this.__valueElem.getAttribute("data-emptytext") || "Empty list";
+		this.searchPlaceholder = this.__valueElem.getAttribute("data-search-placeholder") || "Search";
+		this.searchEmpty = this.__valueElem.getAttribute("data-search-empty") || "Not found";
+
+		const se = this.__valueElem.getAttribute("data-search-on");
+		if (se) {
+			switch (se.toLowerCase()) {
+				case "true":
+					this.searchOn = true;
+					break;
+				case "false":
+					this.searchOn = false;
+				default:
+					this.searchOn = parseInt(se);
+					break;
+			}
+		}
+
+		// __renderUI
+		this.__container = DOM.tag("div", { class: [ROOT_CLASS].concat(Array.from(this.__valueElem.classList)) }, [
+			DOM.tag("button", { class: "view", command: "open-popup" }, [this.__textElem = DOM.tag("span", null, this.placeholder ?? ''), arrowBottomIcon]),
+			this.__popupElem = DOM.tag("div", { class: "popup", tabindex: 0 }, [
+				DOM.tag("div", "content", [
+					DOM.tag("div", "header", [
+						DOM.tag("span", null, this.placeholder ?? ''),
+						DOM.tag("button", { command: "close-popup" }, closeIcon)]
+					),
+					DOM.tag("div", { class: "search" }, [
+						searchIcon,
+						this.__searchInput = <HTMLInputElement>DOM.tag("input", { type: "search", maxlength: 50, placeholder: this.searchPlaceholder })
+					]),
+					this.__listElem = DOM.tag("ul"),
+					this.__emptyElem = DOM.tag("div", { class: "empty" }, this.emptyText),
+					DOM.tag("button", { class: "cancel", command: "close-popup" }, "Отмена")
+				])
+			])
+		]);
+
+		this.__container.classList.remove(INPUT_CLASS);
+
+		this.setElement(this.__container);
+
+		if (this.__valueElem.nextElementSibling) {
+			const nextElem = <HTMLElement>this.__valueElem.nextElementSibling;
+			if (nextElem.classList.contains(MINIATURE_CLASS)) nextElem.remove();
+		}
+
+		this.__valueElem.insertAdjacentElement("beforebegin", this.__container);
+		this.__container.insertAdjacentElement("beforeend", this.__valueElem);
+
+		this.__closePopupFunc = (e: MouseEvent) => {
+			const t = <HTMLElement>e.target;
+			const dd = t.closest(`.${ROOT_CLASS}`);
+			if (!dd || (dd === this.__container && !t.closest("li[data-index]") && t !== this.__searchInput && !t.closest(".search"))) {
+				this.__closePopup();
+				this.__clearSearch();
+			}
+		};
+
+		this.__renderItems();
+		this.__initLogic();
+	}
+
+	// рендер элементов и выбор текущего
+	private __renderItems() {
+		const optionsCount = this.__valueElem.options.length;
+		const selectedIndex = this.__valueElem.selectedIndex;
+
+		if (!optionsCount)
+			this.__textElem.innerText = this.placeholder;
+
+		if (!optionsCount) {
+			this.element?.classList.add("empty");
+			return;
+		}
+
+		// определяем можно ли делать поиск по элементам в списке
+		let isSearchable = false;
+		if (this.searchOn === true || optionsCount >= <number>this.searchOn) {
+			this.element?.classList.add("searchable");
+			isSearchable = true;
+		}
+
+		// вставляем элементы меню в фрагмент, чтобы не нагружать процессор
+		const popupItemsFragment = document.createDocumentFragment();
+
+		let elemCount = 0;
+		for (let i = 0; i < optionsCount; i++) {
+			const optionElem = this.__valueElem.options.item(i);
+			if (!optionElem)
+				continue;
+
+			const itemText = optionElem.textContent?.trim() || "";
+			const itemValue = optionElem.value;
+
+			if (i === 0 && !itemValue) {
+				// Если первый элемент, это пустое значение
+
+				this.__hasEmptyValue = true;
+				continue;
+			}
+
+			let itemElem = DOM.tag("li", { command: "select", dataset: { value: itemValue, index: i.toString() } }, [
+				DOM.tag("span", { tabindex: "0" }, itemText),
+				checkIcon
+			]
+			);
+
+			const transcript = (<any>itemElem)['wsdd_transcript'] = transcriptText(itemText);
+
+			const isSelected = selectedIndex === i;
+			if (isSelected)
+				itemElem.classList.add("hasvalue");
+
+			if (isSearchable) {
+				// дублируем быстрый элемент в общем списке, чтобы находить его при поиске
+
+				itemElem = itemElem.cloneNode(true) as HTMLLIElement;
+				(<any>itemElem)['wsdd_transcript'] = transcript;
+				popupItemsFragment.append(itemElem);
+			}
+
+			popupItemsFragment.append(itemElem);
+
+			if (isSelected) {
+				this.__container.classList.add("hasvalue");
+				this.__textElem.innerText = itemText;
+			}
+
+			elemCount++;
+		}
+
+		if (this.__hasEmptyValue && !elemCount)
+			this.element?.classList.add("empty");
+
+		this.__listElem.append(popupItemsFragment);
+	}
+
+	private __initLogic() {
+		this.registerCommand("open-popup", () => this.__togglePopup());
+		this.registerCommand("close-popup", () => this.__closePopup());
+
+		this.registerCommand("select", context => {
+			if (!this.element)
+				return;
+
+			const newIndex = context.target.dataset.index;
+
+			this.element.classList.remove("invalid");
+			this.__clearSearch();
+			this.__closePopup();
+
+			const currentSelect = this.__getSelectedElem();
+			if (currentSelect && newIndex === currentSelect.own.dataset.index)
+				return; // если выбор остался таким же
+
+			DOM.removeClass(this.element, '.hasvalue', 'hasvalue');
+
+			if (currentSelect && currentSelect.own.closest(`.${ROOT_CLASS}`))
+				this.__textElem.innerText = this.placeholder ?? '';
+
+			// делаем новый выбор
+			this.__valueElem.value = context.target.dataset.value || "";
+
+			const newSelected = this.__getElemsByIndex(Number(newIndex));
+
+			if (newSelected) {
+				newSelected.own.classList.add("hasvalue");
+
+				const newDropDown = newSelected.own.closest(`.${ROOT_CLASS}`);
+
+				if (newDropDown) {
+					this.__textElem.innerText = newSelected.own.innerText.trim();
+					newDropDown.classList.add("hasvalue");
+					this.__closePopup();
+					this.__focusPopup();
+				}
+			}
+
+			this.__onChange();
+		});
+
+		this.__searchInput.addEventListener("input", () => {
+			const query = this.__searchInput.value;
+
+			this.__search(query);
+		});
+
+		this.__popupElem.addEventListener("keydown", (e: KeyboardEvent) => {
+			const target = <HTMLElement>e.target;
+			const isSpan = target.tagName == "SPAN";
+
+			switch (e.key) {
+				case "ArrowUp": {
+					if (isSpan) {
+						// Если есть предыдущий элемент, то переводим фокус на него
+						const prevItemElem = target.parentElement?.previousElementSibling;
+						if (prevItemElem)
+							(<HTMLElement>prevItemElem.firstElementChild).focus();
+
+						e.preventDefault();
+					}
+					break;
+				}
+				case "ArrowDown": {
+					if (isSpan) {
+						// Если есть следующий элемент, то переводим фокус на него
+						const nextItemElem = target.parentElement?.nextElementSibling;
+						if (nextItemElem)
+							(<HTMLElement>nextItemElem.firstElementChild).focus();
+
+						e.preventDefault();
+					}
+					break;
+				}
+				case "Escape": {
+					e.preventDefault();
+					this.__closePopup();
+					this.__focusPopup();
+					break;
+				}
+				case "Tab": {
+					if (target == this.__popupElem && this.element?.classList.contains("empty")) {
+						// если список пустой, то фокус уйдёт от компанента на следующий и нужно закрыть popup
+						this.__closePopup();
+					}
+					else if (target == this.__searchInput && this.__listElem.classList.contains("notfound")) {
+						// если не найдено, то фокус уйдёт от компанента на следующий и нужно закрыть popup
+						this.__closePopup();
+					}
+					else if (isSpan && !target.parentElement?.nextElementSibling) {
+						// если фокус на последнем элементе списка, то фокус уйдёт от компанента на следующий и нужно закрыть popup
+						this.__closePopup();
+					}
+					break;
+				}
+				case "Enter": { // так как теперь мы обрабатываем не <a>
+					target.click();
+					this.__closePopup();
+					break;
+				}
+			}
+		});
+	}
+
+	private __focusPopup() {
+		(<HTMLElement>this.__container.firstElementChild).focus();
+	}
+
+	private __onChange() {
+		this.trigger(CHANGE_EVENT, {
+			dropdown: this,
+			index: this.getSelectedIndex(),
+			value: this.getValue(),
+			title: this.getSelectedTitle()
+		});
+	}
+
+	private __togglePopup() {
+		if (this.element?.classList.contains("disabled"))
+			return;
+
+		if (!this.element?.classList.toggle("expanded"))
+			return;
+
+		// закрываем все открытые попапы, кроме текущего
+		document.querySelectorAll('.ui-dropdown.expanded').forEach((dropdown) => {
+			if (dropdown !== this.element) {
+				dropdown.classList.remove('expanded');
+			}
+		});
+
+		this.__popupElem.focus({ preventScroll: true });
+
+		this.__positionPopup();
+
+		document.body.classList.add(BODY_EXPANDED);
+
+		let top = 0;
+		const selectedElem = this.__getSelectedElem();
+		const itemHeight = selectedElem?.own?.clientHeight || 0;
+		const itemTop = selectedElem?.own?.offsetTop || 0;
+
+		top = itemTop - this.__listElem.clientHeight / 2 + itemHeight;
+
+		if (top !== null)
+			this.__listElem.scrollTo({ left: 0, top: top, behavior: 'instant' });
+
+		document.body.addEventListener("mouseup", this.__closePopupFunc);
+	}
+
+	private __positionPopup() {
+		this.__popupElem.classList.remove("top", "right");
+
+		if (document.body.clientWidth <= TABLET_WIDTH)
+			return;
+
+		const bodyHeight = document.body.clientHeight;
+		const popupRect = this.__popupElem.getBoundingClientRect();
+
+		if (popupRect.y + popupRect.height > bodyHeight) {
+			this.__popupElem.classList.add("top");
+		}
+
+		if (popupRect.x < 0) {
+			this.__popupElem.classList.add("right");
+		}
+	}
+
+	private __closePopup() {
+		document.body.classList.remove(BODY_EXPANDED);
+		this.element?.classList.remove("expanded");
+		document.body.removeEventListener("mouseup", this.__closePopupFunc);
+	}
+
+	private __search(query: string) {
+		if (!query) {
+			this.__clearSearch();
+			return;
+		}
+
+		query = query.toLowerCase();
+
+		this.__listElem.classList.add("result");
+		const items = DOM.queryElements(this.__listElem, "li span");
+
+
+		let findedCount = 0;
+		items.forEach(it => {
+			const item = it.parentElement;
+			if (!item)
+				return;
+
+			if (it.innerText.toLowerCase().startsWith(query)) {
+				item.classList.add("ok");
+				findedCount++;
+			}
+			else
+				item.classList.remove("ok");
+		});
+
+		if (!findedCount) {
+			// если ничего не найдено по оригинальному тексту, то ищем в других раскладках клавиатуры
+
+			const queryLang = detectLanguage(query);
+
+			if (queryLang) {
+				for (let i = 0; i < this.__listElem.children.length; i++) {
+					const item = this.__listElem.children.item(i);
+					if (!item)
+						continue;
+					const transcript = (<any>item)['wsdd_transcript'];
+					if (transcript && transcript[queryLang] && transcript[queryLang].startsWith(query)) {
+
+						item.classList.add("ok");
+						findedCount++;
+					}
+					else
+						item.classList.remove("ok");
+				}
+			}
+		}
+
+		if (findedCount > 0) {
+			this.__emptyElem.innerText = this.emptyText;
+			this.__listElem.classList.remove("notfound");
+		}
+		else {
+			this.__emptyElem.innerText = this.searchEmpty;
+			this.__listElem.classList.add("notfound");
+		}
+	}
+
+	private __clearSearch() {
+		if (!this.__listElem.classList.contains("result"))
+			return;
+
+		this.__emptyElem.innerText = this.emptyText;
+		this.__listElem.classList.remove("result", "notfound");
+		DOM.removeClass(this.__listElem, "li.ok", "ok");
+		this.__searchInput.value = '';
+	}
+
+	private __getElems(selector: string): { own: HTMLElement } | null {
+		if (!this.element)
+			return null;
+
+		const elems = DOM.queryElements(this.element, selector);
+		if (elems.length === 2)
+			return { own: elems.item(0) };
+		else if (elems.length === 1)
+			return { own: elems.item(0) };
+		return null;
+	}
+
+	private __getElemsByIndex(index: number) {
+		return this.__getElems(`[data-index="${index}"]`);
+	}
+
+	private __getSelectedElem() {
+		return this.__getElems(".hasvalue[data-index]");
+	}
+
+	getValue(): string | null {
+		return this.__valueElem.value || null;
+	}
+
+	getSelectedIndex(): number {
+		return this.__valueElem.selectedIndex;
+	}
+
+	getSelectedTitle(): string | null {
+		const selected = this.__getSelectedElem();
+		return (selected && selected.own.firstElementChild?.textContent?.trim()) || null;
+	}
+
+	override validate(): boolean {
+		window.clearTimeout(this.__invalidTimeout);
+
+		let value = this.getValue();
+		let isInvalid = !this.__valueElem.validity.valid;
+
+		if (this.required && !value)
+			isInvalid = true;
+
+		const clearInvalid = () => this.element?.classList.remove("invalid");
+
+		if (isInvalid) {
+			this.element?.classList.add("invalid");
+		}
+		else
+			clearInvalid();
+
+		return !isInvalid;
+	}
+
+	override destroy(): void {
+		this.__closePopup();
+
+		this.element?.insertAdjacentElement("afterend", this.__valueElem);
+		this.element?.remove();
+
+		super.destroy();
+	}
+}
+
+export interface ChangeEventData {
+	dropdown: DropDown;
+	index: number;
+	value: string | null;
+	title: string | null;
+}
+
+export default DropDown;

package/source/index.ts

@@ -0,0 +1,2 @@
+export { default } from './dropdown';
+export * from './utils/utilities';

package/source/svg/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 7">
+	<path d="M12 1.387L10.5174 0L6 4.226L1.48263 0L0 1.387L6 7L12 1.387Z"/>
+</svg>

package/source/svg/cancel.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 18" >
+<path d="M1.65129 0L0 1.65129L7.34871 9L0 16.3487L1.65129 18L9 10.6513L16.3487 18L18 16.3487L10.6513 9L18 1.65129L16.3487 0L9 7.34871L1.65129 0Z" />
+</svg>

package/source/svg/search.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 26 26">
+<path d="M10 3C6.14585 3 3 6.14585 3 10C3 13.8541 6.14585 17 10 17C11.748 17 13.345 16.348 14.5742 15.2812L15 15.707V17L21 23L23 21L17 15H15.707L15.2812 14.5742C16.348 13.345 17 11.748 17 10C17 6.14585 13.8541 3 10 3ZM10 5C12.7733 5 15 7.22673 15 10C15 12.7733 12.7733 15 10 15C7.22673 15 5 12.7733 5 10C5 7.22673 7.22673 5 10 5Z" />
+</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/typings/svg.d.ts

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

package/source/utils/utilities.ts

@@ -0,0 +1,72 @@
+const REGEX_CHAR = /\p{L}/u
+
+const languages: { [keys in Language]: string } = {
+    english: "qwertyuiopasdfghjklzxcvbnm",
+    russian: "йцукенгшщзхъфывапролджэячсмитьбю",
+};
+
+// prettier-ignore
+const english_russian_dict: ICharMap = {
+    q: "й", w: "ц", e: "у", r: "к", t: "е", y: "н", u: "г", i: "ш", o: "щ", p: "з", "[": "х", "]": "ъ",
+    a: "ф", s: "ы", d: "в", f: "а", g: "п", h: "р", j: "о", k: "л", l: "д", ";": "ж", "'": "э",
+    z: "я", x: "ч", c: "с", v: "м", b: "и", n: "т", m: "ь", ",": "б", ".": "ю", "/": ".",
+    "{": "Х", "}": "Ъ", ":": "Ж", '"': "Э", "<": "Б", ">": "Ю", "?": ","
+};
+
+// prettier-ignore
+const russian_english_dict: ICharMap = {
+    й: "q", ц: "w", у: "e", к: "r", е: "t", н: "y", г: "u", ш: "i", щ: "o", з: "p", х: "[", ъ: "]",
+    ф: "a", ы: "s", в: "d", а: "f", п: "g", р: "h", о: "j", л: "k", д: "l", ж: ";", э: "'",
+    я: "z", ч: "x", с: "c", м: "v", и: "b", т: "n", ь: "m", б: ",", ю: ".", ".": "/",
+    "Х": "{", "Ъ": "}", "Ж": ":", "Э": '"', "Б": "<", "Ю": ">", ",": "?"
+};
+
+interface ICharMap {
+    [keys: string]: string;
+}
+
+type ITranscriptMap = {
+    // {целевой язык: {язык ввода: словарь}}
+    [keys in Language]: { [keys: string]: ICharMap };
+};
+
+const dictionariesMap: ITranscriptMap = {
+    russian: { english: russian_english_dict },
+    english: { russian: english_russian_dict },
+};
+
+export type Language = "english" | "russian";
+
+export const detectLanguage = (text: string) => {
+    if (!text)
+        return null;
+
+    const match = text.match(REGEX_CHAR);
+    if (!match)
+        return null;
+
+    const firstChar = match[0].toLocaleLowerCase();
+    for (const lang in languages) {
+        if (languages[<Language>lang].includes(firstChar))
+            return lang as Language;
+    }
+
+    return null;
+};
+
+export const transcriptText = (text: string) => {
+    const transcriptVariants: { [keys: string]: string; } = {};
+
+    const textLanguage = detectLanguage(text);
+    if (textLanguage) {
+        const textArr: string[] = Array.from(text.toLowerCase());
+        for (const lang in dictionariesMap[textLanguage]) {
+            const langVariant = dictionariesMap[textLanguage][lang];
+
+            const transcript = textArr.reduce((prev, current) => prev + (langVariant[current] || current), "");
+            transcriptVariants[lang] = transcript;
+        }
+    }
+
+    return transcriptVariants;
+};