simp-select 1.0.4 → 1.0.6

package/dist/style.css

@@ -1 +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}
+: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_controls--hide{display:none!important}.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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "simp-select",
-	"version": "1.0.4",
+	"version": "1.0.6",
 	"description": "simp-select - this plugin replaces the select",
 	"main": "dist/simpleSelect.js",
 	"types": "dist/simpleSelect.d.ts",
@@ -10,11 +10,6 @@
 		"dev": "webpack --env development --watch",
 		"build": "webpack --env production"
 	},
-	"files": [
-		"dist",
-		"src/const",
-		"src/types"
-	],
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/yura-brd/SimpSelect"

package/src/const/simpleSelection.const.ts

@@ -8,15 +8,14 @@ export const simpleSelectLocale: ISimpleSelectLocale = {
   all: 'all',
   ok: 'Ok',
   cansel: 'Cansel',
-
   selectAll: 'Select all',
   resetAll: 'Reset all',
 };
 export const simpleSelectionOptions: ISimpleSelectOptions = {
-  isSearch: true,
+  isSearch: false,
   isSearchInDropdown: false,
 
-  countShowSelected: 2,
+  countShowSelected: 3,
   isConfirmInMulti: false,
   isConfirmInMultiOkClickOutside: false,
 

package/src/demo/index.html

@@ -0,0 +1,263 @@
+<!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="false"
+		        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-select-search-dropdown="true"
+				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>
+
+	<div class="item">
+		<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>
+	</div>
+
+
+	<!--
+
+	<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="1000" // 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>

package/src/polyfill.js

@@ -0,0 +1,136 @@
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      var C = this;
+
+      var items = Object(arrayLike);
+
+      if (arrayLike == null) {
+        throw new TypeError('Array.from requires an array-like object - not null or undefined');
+      }
+
+      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+
+        if (arguments.length > 2) {
+          T = arguments[2];
+        }
+      }
+
+      var len = toLength(items.length);
+
+
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      var k = 0;
+      var kValue;
+      while (k < len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      A.length = len;
+      return A;
+    };
+  }());
+}
+
+if (!Array.prototype.forEach) {
+  Array.prototype.forEach = function (callback, thisArg) {
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError(" this is null or not defined");
+    }
+
+    var O = Object(this);
+
+    var len = O.length >>> 0;
+
+    if (typeof callback !== "function") {
+      throw new TypeError(callback + " is not a function");
+    }
+
+    if (arguments.length > 1) {
+      T = thisArg;
+    }
+
+    k = 0;
+
+    while (k < len) {
+      var kValue;
+
+      if (k in O) {
+        kValue = O[k];
+
+        callback.call(T, kValue, k, O);
+      }
+      k++;
+    }
+  };
+}
+
+if (typeof window !== 'undefined' &&  window.NodeList && !NodeList.prototype.forEach) {
+  NodeList.prototype.forEach = function (callback, thisArg) {
+    thisArg = thisArg || window;
+    for (var i = 0; i < this.length; i++) {
+      callback.call(thisArg, this[i], i, this);
+    }
+  };
+}
+
+if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+    Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (Element.prototype.matches.call(el, s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}
+
+(function () {
+  if ( typeof window.CustomEvent === "function" ) return false; //If not IE
+
+  function CustomEvent ( event, params ) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined };
+    var evt = document.createEvent( 'CustomEvent' );
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+    return evt;
+  }
+
+  CustomEvent.prototype = window.Event.prototype;
+
+  window.CustomEvent = CustomEvent;
+})();

package/src/simpleSelect.ts

@@ -0,0 +1,155 @@
+import { ISimpleSelectOptions, ISimpleSelectProps } from './types/simpleSelect.types';
+import { selectorType } from './types/item.types';
+import './polyfill.js';
+
+import {
+  nameMark, nameSelect, simpleSelectionOptions,
+} from './const/simpleSelection.const';
+import { createDataAttr, toCamelCase } from './utils/simpleSelection.utils';
+import { SimpleSelectItem } from './simpleSelectItem';
+import './style.css';
+
+export default class SimpleSelect {
+  callCount = Date.now();
+
+  countInit = 0;
+
+  // $selects: HTMLSelectElement[] = [];
+  $selects: SimpleSelectItem[] = [];
+
+  options!: ISimpleSelectOptions;
+
+  nameMarkTransform = toCamelCase(nameMark);
+
+  dataNameMark = createDataAttr(nameMark);
+
+  isNative!: boolean;
+
+  constructor(selector: selectorType, options?: ISimpleSelectProps) {
+    if (!selector) {
+      selector = 'select';
+    }
+    // this.$selects = Array.from(document.querySelectorAll(selector));
+
+    this.options = {
+      ...simpleSelectionOptions,
+      ...options,
+    };
+
+    if (typeof selector === 'string') {
+      this.init(Array.from(document.querySelectorAll(selector)));
+    } else if (selector instanceof HTMLSelectElement) {
+      this.init([selector]);
+    } else if (selector instanceof NodeList) {
+      this.init(Array.from(selector));
+    } else if (Array.isArray(selector)) {
+      this.init(selector);
+    } else {
+      console.warn('Wrong selector: ', selector);
+    }
+  }
+
+  detectMobile() {
+    if (this.options.detectNative) {
+      this.isNative = this.options.detectNative();
+      return;
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const ua = navigator.userAgent || navigator.vendor || window.opera;
+
+    let res = false;
+    // Checks for iOs, Android, Blackberry, Opera Mini, and Windows mobile devices
+    for (let i = 0; i < this.options.nativeOnDevice.length; i++) {
+      if (ua.toString().toLowerCase().indexOf(this.options.nativeOnDevice[i].toLowerCase()) > 0) {
+        if (this.options.nativeOnDevice[i]) {
+          res = true;
+        }
+      }
+    }
+    this.isNative = res;
+  }
+
+  private init(selects: HTMLSelectElement[]) {
+    this.detectMobile();
+    selects.forEach(($select) => {
+      this.build($select);
+    });
+  }
+
+  createMethods(select: SimpleSelectItem) {
+    const self = this;
+    return {
+      getInstance: () => select.getSelect(),
+      reload() {
+        self.rebuild(select);
+      },
+      update() {
+        select.updateHTML();
+      },
+      detach() {
+        self.detach(select);
+      },
+    };
+  }
+
+  setMethods(select: SimpleSelectItem) {
+    // @ts-ignore
+    select.$select[nameSelect] = this.createMethods(select);
+  }
+
+  setMethodsClear(select: SimpleSelectItem) {
+    // @ts-ignore
+    delete select.$select[nameSelect];
+  }
+
+  private build(select: HTMLSelectElement) {
+    const isProcessed = this.nameMarkTransform in select.dataset;
+    if (isProcessed) {
+      console.warn('This element has already been initialized', select);
+      return;
+    }
+
+    this.countInit += 1;
+    const id = `${this.callCount}-${this.countInit}`;
+    select.setAttribute(this.dataNameMark, id);
+    // this.$selects.push(select);
+
+    const newSelect = new SimpleSelectItem(select, this.options, {
+      id, isNative: this.isNative,
+    });
+    this.$selects.push(newSelect);
+    this.setMethods(newSelect);
+  }
+
+  private detach(itemSelect: SimpleSelectItem) {
+    itemSelect.detachItem();
+
+    itemSelect.$select.removeAttribute(this.dataNameMark);
+    this.setMethodsClear(itemSelect);
+    this.$selects = this.$selects.filter((item) => item !== itemSelect);
+  }
+
+  public rebuild(selectsItems: SimpleSelectItem) {
+    const select = selectsItems.$select;
+    this.detach(selectsItems);
+    this.build(select);
+  }
+
+  public getSelects() {
+    return this.$selects;
+  }
+
+  public getSelectFirst() {
+    // return this.$selects[0];
+    return this.createMethods(this.$selects[0]);
+  }
+
+  public getSelectById(id:string) {
+    const search = this.$selects.filter((item) => item.id === id)[0];
+    if (!search) {
+      return null;
+    }
+    return this.createMethods(search);
+  }
+}