simp-select 1.0.0

package/dist/simpleSelectItem.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="node" />
+import { IItemLocalOptions, ISimpleSelectOptions } from './types/simpleSelect.types';
+import { SimpleSelectItemDOM } from './simpleSelectItemDOM';
+export declare class SimpleSelectItem extends SimpleSelectItemDOM {
+    closeOutsideHandler: (e: MouseEvent) => void;
+    closeEscHandler: (e: KeyboardEvent) => void;
+    changeListener: (e: Event) => void;
+    searchHandler: (e: Event) => void;
+    clickToggleOpen: (e: MouseEvent | KeyboardEvent) => void;
+    triggerSetup: (e: MouseEvent) => void;
+    confirmOkHandler: (e: MouseEvent) => void;
+    confirmNoHandler: (e: MouseEvent) => void;
+    selectAllHandler: (e: MouseEvent) => void;
+    resetAllHandler: (e: MouseEvent) => void;
+    closeHandler: (e: MouseEvent) => void;
+    handleResize: (e: MediaQueryList | null) => void;
+    mql: MediaQueryList | null;
+    countOpen: number;
+    multiDebounceTime: number;
+    timeoutDebounceId: NodeJS.Timeout | null;
+    constructor(select: HTMLSelectElement, options: ISimpleSelectOptions, localOptions: IItemLocalOptions);
+    init(): void;
+    private handleResizeInit;
+    private initAfterDom;
+    debounce<T extends (...args: never[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
+    confirmOkHandlerInit(e: MouseEvent): void;
+    confirmOkBuild(): void;
+    confirmNoHandlerInit(e: MouseEvent): void;
+    closeHandlerInit(e: MouseEvent): void;
+    selectAllHandlerInit(e: MouseEvent): void;
+    resetAllHandlerInit(e: MouseEvent): void;
+    triggerSetupInit(e: MouseEvent): void;
+    changeClickItem(item: HTMLLIElement): void;
+    multiDebounceChange(): void;
+    triggerInit(): void;
+    clickToggleOpenInit(e: MouseEvent | KeyboardEvent): void;
+    closeOutsideHandlerInit(e: MouseEvent): void;
+    closeEscHandlerInit(e: KeyboardEvent): void;
+    keyBoardChangeChecked(isDown: boolean): void;
+    searchHandlerInit(e: Event): void;
+    toggleOpenHandler(): void;
+    private changeListenerInit;
+    getSelect(): HTMLSelectElement;
+    protected handlerChangeChecked(): void;
+    protected createList(isCompare?: boolean): void;
+    private filterList;
+    inputSearchHandler(): void;
+    detachItem(): void;
+}

package/dist/simpleSelectItemDOM.d.ts

@@ -0,0 +1,57 @@
+import { IItemLocalOptions, ISimpleSelectOptions } from './types/simpleSelect.types';
+import { IOptionItem } from './types/item.types';
+export declare class SimpleSelectItemDOM {
+    options: ISimpleSelectOptions;
+    $select: HTMLSelectElement;
+    id: string;
+    titlePlaceholder: string;
+    isDisabled: boolean;
+    isMulti: boolean;
+    state: {
+        getState: (k?: string | undefined) => any;
+        setState: (k: string, val: any) => void;
+        subscribe(k: string, cb: any): () => void;
+        subscribeAll(cb: any): () => void;
+        unSubscribe(k: string, cb: any): void;
+    };
+    classSelectInit: string;
+    isNative: boolean;
+    elemWrap: HTMLDivElement;
+    elemTop: HTMLDivElement;
+    elemTopBody: HTMLDivElement;
+    elemDropDown: HTMLDivElement | null;
+    elemDropDownClose: HTMLButtonElement | null;
+    elemListBody: HTMLUListElement | null;
+    elemInputSearch: HTMLInputElement | null;
+    elemTitle: HTMLDivElement;
+    confirmOk: HTMLButtonElement | null;
+    confirmNo: HTMLButtonElement | null;
+    elemControl: HTMLDivElement | null;
+    elemSelectAll: HTMLButtonElement | null;
+    elemResetAll: HTMLButtonElement | null;
+    cloneClasses: string;
+    isShowCheckbox: boolean;
+    bodyLiHTMLBeforeFromSelect: null | string;
+    bodyLiHTMLAfterFromSelect: null | string;
+    isFloatWidth: boolean;
+    bodyOpenClass: string;
+    constructor(select: HTMLSelectElement, options: ISimpleSelectOptions, localOptions: IItemLocalOptions);
+    optionOverride(): void;
+    initDom(): void;
+    toggleTabIndex(isOpen: boolean): void;
+    updateHTML(): void;
+    private createHTML;
+    private createControlHTML;
+    private createIcon;
+    private createDropDown;
+    private createIsConfirmInMultiHTML;
+    private createTitleHTML;
+    protected createListHTML(): void;
+    private createInputHTML;
+    getChecked(): IOptionItem[];
+    private createLi;
+    private createLiBody;
+    protected handlerChangeChecked(): void;
+    protected createList(_isCompare: boolean): void;
+    protected inputSearchHandler(): void;
+}

package/dist/style.css

@@ -0,0 +1 @@
+:root{--simpS_bg:#fff;--simpS_pad_hor:15px;--simpS_height_top:40px;--simpS_color:#27272a;--simpS_color_light:#eae9e9;--simpS_color_cheked:#d9d7d7;--simpS_color_yes:green;--simpS_color_no:red;--simpS_color_placeholder:#5d5c5c;--simpS_color_dis:#8b8b8b;--simpS_radius:4px;--simpS_f_size:16px;--simpS_f_shadow:0 0 3px 0 var(--simpS_color);--simpS_size_check:20px;--simpS_li_h:36px;--simpS_btn_h:34px;--simpS_btn_bg:#f9f9f9;--simpS_btn_bg_reverse:#eeecec}.SimpleSel{-webkit-box-sizing:border-box;box-sizing:border-box;color:#27272a;color:var(--simpS_color);font-size:16px;font-size:var(--simpS_f_size);position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SimpleSel--disabled{color:#8b8b8b;color:var(--simpS_color_dis);opacity:.8}.SimpleSel *,.SimpleSel :after,.SimpleSel :before,.SimpleSel__select_init{-webkit-box-sizing:border-box;box-sizing:border-box}.SimpleSel__select_init{height:100%;opacity:0;position:absolute;right:0;top:0;width:100%}.SimpleSel__select_init--native{z-index:5}.SimpleSel__bottom_control,.SimpleSel__control{-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-ms-flex-line-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-content:center;align-items:center;-webkit-appearance:none;background-color:#f9f9f9;background-color:var(--simpS_btn_bg);border:none;border-radius:0;color:inherit;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font:inherit;height:34px;height:var(--simpS_btn_h);justify-content:center;line-height:normal;margin:0;outline:none;overflow:visible;padding:1px 10px;text-align:center;width:auto}.SimpleSel__bottom_control:hover,.SimpleSel__control:hover{background-color:#eeecec;background-color:var(--simpS_btn_bg_reverse)}.SimpleSel__list_item_icon,.SimpleSel__reset_all__icon,.SimpleSel__select_all__icon{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:1px solid;border-radius:4px;border-radius:var(--simpS_radius);display:-webkit-box;display:-ms-flexbox;display:flex;height:20px;height:var(--simpS_size_check);justify-content:center;margin-right:7px;position:relative;width:20px;width:var(--simpS_size_check)}.SimpleSel__list_item_icon:before,.SimpleSel__select_all__icon:before{border:solid;border-width:0 2px 2px 0;content:"";display:block;height:11px;height:calc(var(--simpS_size_check)/2 + 1px);left:4px;top:1px;-webkit-transform:rotate(45deg) translate(-17%,-10%);transform:rotate(45deg) translate(-17%,-10%);-webkit-transition:all .25s;transition:all .25s;width:6.66667px;width:calc(var(--simpS_size_check)/3)}.SimpleSel__top{position:relative}.SimpleSel__top_body{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;background-color:#fff;background-color:var(--simpS_bg);border:2px solid;border-radius:4px;border-radius:var(--simpS_radius);color:currentColor;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:40px;height:var(--simpS_height_top);justify-content:space-between;padding:5px 0 5px 15px;padding:5px 0 5px var(--simpS_pad_hor);position:relative}.SimpleSel--disabled .SimpleSel__top_body{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SimpleSel__top_body:focus-visible{-webkit-box-shadow:0 0 3px 0 #27272a;box-shadow:0 0 3px 0 #27272a;-webkit-box-shadow:var(--simpS_f_shadow);box-shadow:var(--simpS_f_shadow)}.SimpleSel__title{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.SimpleSel__icon{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:40px;height:var(--simpS_height_top);justify-content:center;position:relative;width:40px;width:var(--simpS_height_top)}.SimpleSel__icon:after{border-bottom:2px solid;border-right:2px solid;content:"";display:inline;height:.5em;left:50%;position:absolute;top:calc(50% - 2px);-webkit-transform:rotate(45deg) translate(-50%,-50%);transform:rotate(45deg) translate(-50%,-50%);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:transform .25s,top .25s;transition:transform .25s,top .25s;width:.5em}.SimpleSel--open .SimpleSel__icon:after{top:calc(50% + 2px);-webkit-transform:rotate(225deg) translate(-50%,-50%);transform:rotate(225deg) translate(-50%,-50%)}.SimpleSel--single[data-count-checked-full="0"] .SimpleSel__title,.SimpleSel__list_item--not_value,.SimpleSel__title--placeholder{color:#5d5c5c;color:var(--simpS_color_placeholder)}.SimpleSel__body{background-color:#fff;background-color:var(--simpS_bg);border:1px solid;border-radius:4px;border-radius:var(--simpS_radius);max-height:0;opacity:0;overflow:hidden;overflow-y:auto;position:absolute;-webkit-transition:max-height .25s,opacity .1s;transition:max-height .25s,opacity .1s;width:100%;z-index:3}.SimpleSel:not(.SimpleSel--up) .SimpleSel--multi{margin-top:2px;top:100%}.SimpleSel--up:not(.SimpleSel--float) .SimpleSel__body{bottom:100%;margin-bottom:2px}.SimpleSel--open .SimpleSel__body{max-height:230px;opacity:1}.SimpleSel__search{border-radius:4px;border-radius:var(--simpS_radius);padding:2px 15px;padding:2px var(--simpS_pad_hor);width:100%}.SimpleSel__search--top{display:none;height:100%;left:0;opacity:0;position:absolute;top:0}.SimpleSel--open .SimpleSel__search--top{display:block;opacity:1}.SimpleSel__search--dropdown{border:none;border-bottom:1px solid;border-radius:0;height:34px;height:var(--simpS_btn_h)}.SimpleSel__controls{border-bottom:1px solid;display:-webkit-box;display:-ms-flexbox;display:flex}.SimpleSel__control{-webkit-box-flex:1;-ms-flex:1;flex:1}.SimpleSel__control+.SimpleSel__control{border-left:1px solid}.SimpleSel__select_all__icon{border-color:green;border-color:var(--simpS_color_yes);border-radius:50%;color:#d9d7d7;color:var(--simpS_color_cheked)}.SimpleSel[data-count-checked-full="0"] .SimpleSel__select_all__icon{color:#eae9e9;color:var(--simpS_color_light)}.SimpleSel[data-check-all-multi=yes] .SimpleSel__select_all__icon{color:green;color:var(--simpS_color_yes)}.SimpleSel__reset_all__icon{border-radius:50%;color:red;color:var(--simpS_color_no);position:relative}.SimpleSel__reset_all__icon:after,.SimpleSel__reset_all__icon:before{background-color:currentColor;content:" ";height:60%;left:8px;left:calc(var(--simpS_f_size)/2);position:absolute;width:2px}.SimpleSel__reset_all__icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.SimpleSel__reset_all__icon:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.SimpleSel__bottom_controls{border-top:1px solid;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:5px;position:sticky}.SimpleSel__bottom_control--hide{display:none}.SimpleSel__bottom_control{-webkit-box-flex:1;-ms-flex:1;flex:1}.SimpleSel__bottom_control--ok{text-transform:uppercase}.SimpleSel__bottom_control+.SimpleSel__bottom_control{border-left:1px solid}.SimpleSel__list{list-style-type:none;margin:0;padding:0}.SimpleSel__group_items:not(:first-child){margin-top:5px}.SimpleSel__group_title{background-color:#eae9e9;background-color:var(--simpS_color_light);display:block;font-size:1.02em;font-weight:700;margin-bottom:2px;padding:6px 10px}.SimpleSel__group{list-style-type:none;margin:0;padding:0}.SimpleSel__list_item{cursor:pointer}.SimpleSel__list_item:not(:last-child){border-bottom:1px solid #eae9e9;border-bottom:1px solid var(--simpS_color_light)}.SimpleSel__list_item--disabled{cursor:default;opacity:.5}.SimpleSel__list_item_body{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:36px;min-height:var(--simpS_li_h);padding:5px 15px;padding:5px var(--simpS_pad_hor)}.SimpleSel__list_item_body:hover{background-color:#eae9e9;background-color:var(--simpS_color_light)}.SimpleSel--single .SimpleSel__list_item--checked{background-color:#d9d7d7;background-color:var(--simpS_color_cheked)}.SimpleSel__list_item:not(.SimpleSel__list_item--checked) .SimpleSel__list_item_icon:before{height:0;opacity:0;width:0}.SimpleSel__close{display:none}.SimpleSel--body_open{overflow:hidden;position:relative}.SimpleSel--float .SimpleSel__body{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:none;-ms-flex-direction:column;flex-direction:column;left:50%;max-height:90%;max-width:90%;overflow:hidden;overflow-y:auto;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.SimpleSel--open{z-index:7}.SimpleSel--float .SimpleSel__bottom_control--hide,.SimpleSel--float.SimpleSel--open .SimpleSel__body{display:-webkit-box;display:-ms-flexbox;display:flex}.SimpleSel--float .SimpleSel__list{-webkit-box-flex:1;-ms-flex:1;flex:1}

package/dist/types/item.types.d.ts

@@ -0,0 +1,24 @@
+export interface IOptionItem {
+    id: string;
+    title: string;
+    value: string | null;
+    checked: boolean;
+    disabled: boolean;
+    position: number;
+    isShowFilter: boolean;
+}
+export interface IOptionItems {
+    idGroup: string;
+    isGroup: boolean;
+    titleGroup?: string;
+    isDisabledGroup?: boolean;
+    items: IOptionItem[];
+    isShowFilter: boolean;
+}
+export interface ICreateLiReturn {
+    result: string;
+    countShow: number;
+    countChecked: number;
+    countCheckedFull: number;
+}
+export type selectorType = string | HTMLSelectElement | NodeListOf<HTMLSelectElement> | HTMLSelectElement[];

package/dist/types/simpleSelect.types.d.ts

@@ -0,0 +1,44 @@
+import { SimpleSelectItem } from '../simpleSelectItem';
+export interface ISimpleSelectLocale {
+    noSearch: string;
+    searchText: string;
+    title: string;
+    selected: string;
+    all: string;
+    ok: string;
+    cansel: string;
+    resetAll: string;
+    selectAll: string;
+}
+export interface ISimpleSelectOptions {
+    countShowSelected: number;
+    isConfirmInMulti: boolean;
+    isConfirmInMultiOkClickOutside: boolean;
+    isSearch: boolean;
+    isSearchInDropdown: boolean;
+    nativeOnDevice: string[];
+    locale: ISimpleSelectLocale;
+    debounceTime?: number;
+    floatWidth?: number;
+    sepChars: string;
+    selectAll: boolean;
+    selectAllAfterClose: boolean;
+    resetAll: boolean;
+    resetAllAfterClose: boolean;
+    isCloneClass: boolean;
+    isUp: boolean;
+    detectNative?: () => boolean;
+    callbackInitialization?: (item: SimpleSelectItem) => void;
+    callbackInitialized?: (item: SimpleSelectItem) => void;
+    callbackOpen?: (item: SimpleSelectItem) => void;
+    callbackClose?: (item: SimpleSelectItem) => void;
+    callbackDestroyInit?: (item: SimpleSelectItem) => void;
+    callbackDestroy?: (item: SimpleSelectItem) => void;
+    callbackChangeSelect?: (e: Event, item: SimpleSelectItem) => void;
+    changeBodyLi?: (liBody: HTMLDivElement, option: HTMLOptionElement) => HTMLElement | string;
+}
+export interface IItemLocalOptions {
+    id: string;
+    isNative: boolean;
+}
+export type ISimpleSelectProps = Partial<ISimpleSelectOptions>;

package/dist/utils/simpleSelection.utils.d.ts

@@ -0,0 +1,10 @@
+import { IOptionItems } from '../types/item.types';
+export declare const toCamelCase: (input: string) => string;
+export declare const createDataAttr: (name: string) => string;
+export declare const ifTrueDataAttr: (attr: string | null) => boolean;
+export declare function triggerInputEvent(element: HTMLElement, type?: string): void;
+export declare const getCreateListItem: (item: HTMLSelectElement | HTMLOptGroupElement, idGroup: string, isGroup: boolean) => IOptionItems;
+export declare const getClass: (cls: string, mod?: boolean, classInit?: string) => string;
+export declare const compareObj: <T1, T2>(obj1: T1, obj2: T2) => boolean;
+export declare const cloneObj: <T>(obj: T) => T;
+export declare const createButton: () => HTMLButtonElement;

package/dist/utils/store.d.ts

@@ -0,0 +1,7 @@
+export declare function store<T>(obj: T): {
+    getState: (k?: string) => any;
+    setState: (k: string, val: any) => void;
+    subscribe(k: string, cb: any): () => void;
+    subscribeAll(cb: any): () => void;
+    unSubscribe(k: string, cb: any): void;
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "simp-select",
+	"version": "1.0.0",
+	"description": "simp-select - this plugin replaces the select",
+	"main": "dist/simpleSelect.js",
+	"types": "dist/simpleSelect.d.ts",
+	"module": "dist/simpleSelect.js",
+	"prepublish": "npm run build",
+	"scripts": {
+		"dev": "webpack --env development --watch",
+		"build": "webpack --env production"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/yura-brd/SimpSelect"
+	},
+	"keywords": [
+		"webpack",
+		"js",
+		"javascript",
+		"library",
+		"es6",
+		"commonjs",
+		"BrooonS/timezz.git",
+		"plugin",
+		"typescript",
+		"ui"
+	],
+	"author": "Yurii Kopot <yura.brd@gmail.com> (https://yu-k.site/)",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/yura-brd/SimpSelect/issues"
+	},
+	"homepage": "https://github.com/yura-brd/SimpSelect#readme",
+	"devDependencies": {
+		"@babel/core": "^7.22.20",
+		"@babel/preset-env": "^7.22.20",
+		"@typescript-eslint/eslint-plugin": "^6.7.0",
+		"@typescript-eslint/parser": "^6.7.0",
+		"babel-loader": "^9.1.3",
+		"css-loader": "^6.8.1",
+		"css-minimizer-webpack-plugin": "^5.0.1",
+		"eslint": "^8.49.0",
+		"eslint-config-airbnb-base": "^15.0.0",
+		"eslint-config-airbnb-typescript": "^17.1.0",
+		"eslint-plugin-import": "^2.28.1",
+		"eslint-plugin-jsx-a11y": "^6.7.1",
+		"eslint-webpack-plugin": "^4.0.1",
+		"html-webpack-plugin": "^5.5.3",
+		"mini-css-extract-plugin": "^2.7.6",
+		"postcss-loader": "^7.3.3",
+		"postcss-preset-env": "^9.1.3",
+		"ts-loader": "^9.4.4",
+		"typescript": "^5.2.2",
+		"webpack": "^5.88.2",
+		"webpack-cli": "^5.1.4"
+	}
+}

package/src/const/simpleSelection.const.ts

@@ -0,0 +1,42 @@
+import { ISimpleSelectLocale, ISimpleSelectOptions } from '../types/simpleSelect.types';
+
+export const simpleSelectLocale: ISimpleSelectLocale = {
+  noSearch: 'No matches for',
+  searchText: 'Search',
+  title: 'Select',
+  selected: 'Selected:',
+  all: 'all',
+  ok: 'Ok',
+  cansel: 'Cansel',
+
+  selectAll: 'Select all',
+  resetAll: 'Reset all',
+};
+export const simpleSelectionOptions: ISimpleSelectOptions = {
+  isSearch: true,
+  isSearchInDropdown: false,
+
+  countShowSelected: 2,
+  isConfirmInMulti: false,
+  isConfirmInMultiOkClickOutside: false,
+
+  nativeOnDevice: ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'],
+  locale: simpleSelectLocale,
+
+  sepChars: ',',
+  isUp: false,
+
+  floatWidth: 767,
+  isCloneClass: true,
+  selectAll: false,
+  selectAllAfterClose: true,
+  resetAll: false,
+  resetAllAfterClose: true,
+
+};
+
+export const nameSelect = 'SimSel';
+const markPrefix = 'simple-select-';
+export const nameMark = `${markPrefix}init`;
+
+export const initClass = 'SimpleSel';

package/src/demo/index.html

@@ -0,0 +1,256 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport"
+	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Document</title>
+
+	<link rel="stylesheet" href="../style.css" />
+
+	<script  src="../simpleSelect.js"></script>
+
+</head>
+
+<style>
+
+	#app {
+		/*	temp*/
+		width: 250px;
+		margin: 0 auto;
+	}
+
+	#app {
+		margin-bottom: 30px;
+		border-bottom: 1px solid;
+		text-align: center;
+		padding-bottom: 10px;
+	}
+
+	.items {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 10px;
+		margin: 20px auto;
+		max-width: 600px;
+	}
+	.item {
+		width: 250px;
+	}
+</style>
+<body>
+<div id="app"></div>
+
+<div class="items">
+	<div class="item">
+		<select id="select_first"
+		        disabled
+		        multiple>
+			<option value="a1">a 1</option>
+			<option value="a2">a 2</option>
+			<option value="a3">a 3</option>
+			<option value="a4">a 4</option>
+			<option value="a5">a 5</option>
+		</select>
+	</div>
+	<div class="item">
+		<select multiple
+		        data-simple-placeholder="custom placeholder"
+		        data-simple-is-confirm="true"
+		        data-simple-count-shows-selected="3">
+			<option value="a1"
+			        data-simple-html-before="<span>|before| </span>"
+			        data-simple-html-after="<span> |after|</div>"
+			>b 1</option>
+			<option value="a22" disabled="disabled">b 2 dis</option>
+			<option value="a3">b 3</option>
+			<option value="a4">b 4</option>
+			<option value="a5">b 5</option>
+		</select>
+	</div>
+	<div class="item" >
+		<select id="select_second"
+		        data-simple-is-confirm="false"
+
+		        data-simple-reset-all="false"
+		        data-simple-select-all="true"
+		        data-simple-item-html-before="<span>before</span>"
+		        multiple data-simple-debounce-time="1000">
+			<optgroup label="Группа 1">
+				<option value="1.1">multiple Опция 1.1</option>
+			</optgroup>
+			<optgroup label="Группа 2">
+				<option value="2.1">multiple Опция 2.1</option>
+				<option value="2.2">multiple Опция 2.2</option>
+			</optgroup>
+			<optgroup label="Группа 3" disabled>
+				<option value="3.1">multiple Опция 3.1</option>
+				<option value="3.2">multiple Опция 3.2</option>
+				<option value="3.3">multiple Опция 3.3</option>
+			</optgroup>
+		</select>
+	</div>
+
+	<div class="item">
+		<select
+				data-simple-show-checkbox="true"
+				class="color_red"
+				data-simple-add-classes="class1"
+
+				data-simple-select-search="false"
+		>
+			<optgroup label="Группа 1">
+				<option value="1">Опция 1.1</option>
+			</optgroup>
+			<optgroup label="Группа 2">
+				<option value="1">Опция 2.1</option>
+				<option value="1">Опция 2.2</option>
+			</optgroup>
+			<optgroup label="Группа 3" disabled>
+				<option value="1">Опция 3.1</option>
+				<option value="1">Опция 3.2</option>
+				<option value="1">Опция 3.3</option>
+			</optgroup>
+		</select>
+	</div>
+
+	<select
+			data-simple-add-classes="class1 class2"
+			data-simple-item-html-before="<div>before</div>"
+			data-simple-item-html-after="<div>after</div>"
+			data-simple-select-search-dropdown="true"
+			data-simple-up="true"
+	>
+		<option>Опция 5.1</option>
+		<option>Опция 5.2</option>
+	</select>
+
+	<!--
+
+	<select
+		data-simple-select-search
+		data-simple-select-search-dropdown
+		data-simple-count-shows-selected="3"
+		data-simple-is-confirm="true" // only multiselect
+		data-simple-debounce-time // only multiselect
+		data-simple-placeholder="text"
+		data-simple-reset-all="true" // only multiselect
+		data-simple-select-all="true" // only multiselect
+		data-simple-show-checkbox="true" // only not multiselect
+
+		data-simple-item-html-before="<div>before</div>"
+		data-simple-item-html-after="<div>after</div>"
+		data-simple-add-classes="class1 class2"
+
+		data-simple-float-width="1000"
+		data-simple-up="true"
+
+	></select>
+	-->
+	<!--
+	<div class="wrapper">
+			<select></select>
+			<div class="wrapper__top">
+				<div class="wrapper__top_body"></div>
+				*? <div class="wrapper__search"></div>
+			</div>
+			* <div class="wrapper__body">
+				? <div class="wrapper__search"></div>
+				? <div class="wrapper__setting"></div>
+				<div class="wrapper__list_items">
+					тут или список или группа списков
+				</div>
+				? <div class="wrapper__setting_bottom"></div>
+			</div>
+		</div>
+		-->
+</div>
+
+<script>
+
+  const sel = new SimpleSelect('select', {
+    callbackOpen: (item) => {
+      console.log('open', item);
+    },
+    callbackClose: (item) => {
+      console.log('close', item);
+    },
+    callbackDestroy: (item) => {
+      console.log('callbackDestroy', item);
+    },
+    // detectNative: () => {
+    //   return false;
+    // },
+    callbackChangeSelect: (e, that) => {
+      console.group();
+      console.log(e);
+      console.log(that);
+      console.groupEnd();
+    },
+
+    // isUp: true,
+    // sepChars: ',',
+    // // changeBodyLi: (liBody:HTMLDivElement, option: HTMLOptionElement) => {
+    //   return liBody
+    // }
+    // debounceTime: 2000
+  })
+  // @ts-ignore
+  window['sel'] = sel;
+
+  setTimeout(() => {
+    console.log('first', sel.getSelectFirst());
+
+    const second = document.getElementById('select_second');
+
+    const id = second.getAttribute('data-simple-select-init');
+
+    console.log('by id', sel.getSelectById(id));
+  }, 1500)
+
+  const app = document.querySelector('#app')
+  const select = document.createElement('select');
+  select.innerHTML = '<option value="1">1</option><option value="2">2</option>'
+  app.innerHTML = `
+   <div>
+    <select class="addSelect">
+      <option  selected>new option 0</option>
+      <option value='1'>new option</option>
+      <option value='2'>new option2</option>
+      <option value='3'>new option3</option>
+    <select>
+  </div>
+`
+  app.append(select);
+  const sel3 = new SimpleSelect(select)
+  window['sel3'] = sel3;
+
+  setTimeout(() => {
+    const sel2 = new SimpleSelect('.addSelect', {
+      locale: {
+        noSearch: 'Не найдено: ',
+        searchText: 'Поиск',
+        title: 'Выбрать',
+        selected: 'Выбрано:',
+        all: 'все',
+        cansel: 'Отмена',
+        ok: 'OK',
+        resetAll: 'reset all',
+        selectAll: 'select all'
+      }
+    })
+    window['sel2'] = sel2;
+  }, 500)
+
+  // setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
+
+</script>
+
+
+
+
+
+</body>
+</html>