simp-select 1.0.11 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +51 -49
  2. package/dist/demo/index.html +2 -1
  3. package/dist/simpleSelect.js +1 -1
  4. package/dist/style.css +1 -1
  5. package/dist/types/simpleSelect.types.d.ts +3 -0
  6. package/package.json +1 -1
  7. package/src/const/simpleSelection.const.ts +5 -0
  8. package/src/demo/index.html +74 -1
  9. package/src/simpleSelectItem.ts +33 -10
  10. package/src/simpleSelectItemDOM.ts +36 -5
  11. package/src/style.css +15 -0
  12. package/src/types/simpleSelect.types.ts +5 -0
package/README.md CHANGED
@@ -17,8 +17,8 @@ npm install simp-select --save
17
17
  ```
18
18
  Or you can load it via a script tag as follows:
19
19
  ```
20
- <script src="https://unpkg.com/simp-select@1.0.11/dist/simpleSelect.js" />
21
- <script src="https://unpkg.com/simp-select@1.0.11/dist/polyfill.js" /> - for IE 11
20
+ <script src="https://unpkg.com/simp-select@1.0.13/dist/simpleSelect.js" />
21
+ <script src="https://unpkg.com/simp-select@1.0.13/dist/polyfill.js" /> - for IE 11
22
22
  Or get last version
23
23
  <script src="https://unpkg.com/simp-select" />
24
24
  ```
@@ -39,53 +39,55 @@ the variable `SimpSelect` attached to `window` or `this` depending on what envir
39
39
  ## API
40
40
  #### `new ScrollToVertical(selector, <options>)`
41
41
 
42
- | Property | Value |
43
- |----------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
44
- | **selector**(required) | string(css selector), HTMLSelectElement, HTMLSelectElement(Array, HTMLSelectElement) |
45
- | **OPTIONS:** | |
46
- | **countShowSelected**:number* | <p>default: **3** </p> Show count selected options. If more then this count, showed template: Selected: 4<p>Or - `data-simple-count-shows-selected="3"` - in select</p> |
47
- | **isSearch**:boolean* | <p>default: **false** </p> Show input for filter items <p>Or - `data-simple-select-search="true"` - in select</p> |
48
- | **isSearchInDropdown**:boolean* | <p>default: **false** </p> Show search input inside dropdown <p>Or - `data-simple-select-search-dropdown="true"` - in select</p> |
49
- | **isConfirmInMulti**:boolean* | <p>default: **false** </p> Show buttons `OK` and `Cansel`. Only Multiselect <p>Or `data-simple-is-confirm="true" - in select`</> |
50
- | **isConfirmInMultiOkClickOutside**:boolean | <p>default: **false** </p> Click outside like click by button `OK`. Only if `isConfirmInMulti=true` |
51
- | **nativeOnDevice**:string[] | <p>default: **'Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'** </p> The system default select list is rendered on the matched device(Check useragent ). |
52
- | **debounceTime**:number* | <p>default: **0** </p> The change event will not be triggered immediately, but after a specified amount of time. <p>Or `data-simple-debounce-time="1000"` in select</p> |
53
- | **floatWidth**:number* | <p>default: **767** </p> Minimum screen width of device below which the dropdown is rendered like popup. <p>Or `data-simple-float-width="500" in select`</p> |
54
- | **sepChars**:string | <p>default: **,** </p> Separator for selected element. Show |
55
- | **selectAll**:boolean* | <p>default: **false**</p> Show button - `Select all` <p>Or `data-simple-select-all="true"` in select</p> |
56
- | **selectAllAfterClose**:boolean | <p>default: **false**</p> Close dropdown after click for `select all` |
57
- | **resetAll**:boolean* | <p>default: **false**</p> Show button - `Reset all` <p>Or `data-simple-reset-all="true"` in select</p> |
58
- | **resetAllAfterClose**:boolean | <p>default: **true**</p> Close dropdown after click for `Reset all` |
59
- | **isCloneClass**:boolean | <p>default: **true**</p> Clone class from native select to wrapper created select |
60
- | **isUp**:boolean* | <p>default: **false**</p> Dropdown rendering the direction in which to open the dropdown (default: false) <p>Or `data-simple-up="true"` in select</p> |
61
- | **isOnlyPlaceholder**:boolean* | <p>default: **false**</p> Show only placeholder. Don't show selected options (default: false) <p>Or `data-simple-is-only-placeholder="true"` in select</p> |
62
- | **detectNative**:function | <p>default: **none**</p> Return `true` if need rendering native select |
63
- | **changeBodyLi**:function | <p>default: **none**</p> Custom <li>(body) item renderer |
64
- | **locale**:{key: string} | <p>default: **simpleSelectLocale** **</p> Object of locales. ** |
65
- | ***Options only DOM elements*** | |
66
- | **data-simple-placeholder="text": Select** | Replace default placeholder (locale.title) |
67
- | **data-simple-item-html-before="<div>before</div>: Select** | Add HTML before content (for item Li) |
68
- | **data-simple-item-html-after="<div>after</div>": Select** | Add HTML after content (for item Li) |
69
- | **data-simple-add-classes="class1 class2": Select** | Add classes for wrapper SimpSelect |
70
- | **data-simple-html-before="<span>before</span>": option** | Add HTML before content (for item Li) |
71
- | **data-simple-html-after="<span>after</span>": option** | Add HTML after content (for item Li) |
72
- | **data-simple-show-checkbox: Select** | Show checkbox in item (Li) (for single select) |
73
- | ***Callbacks*** | |
74
- | **callbackInitialization: (item:SimpleSelectItem) => void** | Before initialization |
75
- | **callbackInitialized**:(item:SimpleSelectItem) => void; | After initialization |
76
- | **callbackOpen**: (item:SimpleSelectItem) => void; | Open dropdown |
77
- | **callbackClose**:Open dropdown | Close dropdown |
78
- | **callbackDestroyInit**: (item:SimpleSelectItem) => void; | Before destroy SimpSelect |
79
- | **callbackDestroy**: (item:SimpleSelectItem) => void; | After destroy SimpSelect |
80
- | **callbackChangeSelect** :(e: Event, item:SimpleSelectItem) => void; | Change SimpSelect (change options) |
81
- | ***Methods*** | |
82
- | **reload**:select(DomElement).SimpSelect.reload() | Reload SimpSelect. |
83
- | **update**:select(DomElement).SimpSelect.update() | Update list (ul in dropdown) |
84
- | **detach**:select(DomElement).SimpSelect.detach() | Detach SimpSelect. |
85
- | ***const simpleSelect = new SimpleSelect('select')*** | Instance of the SimpleSelect plugin object |
86
- | **getSelectById('ID')**:simpleSelect.getSelectById('ID') | Get item SimpSelect for ID (data-simple-select-init="ID" - dem element select) |
87
- | **getSelectFirst()**:simpleSelect.getSelectFirst() | Get first item SimpSelect |
88
- | **getSelects()**:simpleSelect.getSelects() | Get list SimpSelect |
42
+ | Property | Value |
43
+ |---------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
44
+ | **selector**(required) | string(css selector), HTMLSelectElement, HTMLSelectElement(Array, HTMLSelectElement) |
45
+ | **OPTIONS:** | |
46
+ | **countShowSelected**:number* | <p>default: **3** </p> Show count selected options. If more then this count, showed template: Selected: 4<p>Or - `data-simple-count-shows-selected="3"` - in select</p> |
47
+ | **isSearch**:boolean* | <p>default: **false** </p> Show input for filter items <p>Or - `data-simple-select-search="true"` - in select</p> |
48
+ | **isSearchInDropdown**:boolean* | <p>default: **false** </p> Show search input inside dropdown <p>Or - `data-simple-select-search-dropdown="true"` - in select</p> |
49
+ | **isConfirmInMulti**:boolean* | <p>default: **false** </p> Show buttons `OK` and `Cansel`. Only Multiselect <p>Or `data-simple-is-confirm="true" - in select`</> |
50
+ | **isConfirmInMultiOkClickOutside**:boolean | <p>default: **false** </p> Click outside like click by button `OK`. Only if `isConfirmInMulti=true` |
51
+ | **nativeOnDevice**:string[] | <p>default: **'Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'** </p> The system default select list is rendered on the matched device(Check useragent ). |
52
+ | **debounceTime**:number* | <p>default: **0** </p> The change event will not be triggered immediately, but after a specified amount of time. <p>Or `data-simple-debounce-time="1000"` in select</p> |
53
+ | **floatWidth**:number* | <p>default: **767** </p> Minimum screen width of device below which the dropdown is rendered like popup. <p>Or `data-simple-float-width="500" in select`</p> |
54
+ | **sepChars**:string | <p>default: **,** </p> Separator for selected element. Show |
55
+ | **selectAll**:boolean* | <p>default: **false**</p> Show button - `Select all` <p>Or `data-simple-select-all="true"` in select</p> |
56
+ | **selectAllAfterClose**:boolean | <p>default: **false**</p> Close dropdown after click for `select all` |
57
+ | **resetAll**:boolean* | <p>default: **false**</p> Show button - `Reset all` <p>Or `data-simple-reset-all="true"` in select</p> |
58
+ | **resetAllAfterClose**:boolean | <p>default: **true**</p> Close dropdown after click for `Reset all` |
59
+ | **isCloneClass**:boolean | <p>default: **true**</p> Clone class from native select to wrapper created select |
60
+ | **isRemoveTop**:boolean* | <p>default: **false**</p> Do not create top element (Title, arrow, search ) (default: false) <p>Or `data-simple-remove-top="true"` in select</p> |
61
+ | **isUp**:boolean* | <p>default: **false**</p> Dropdown rendering the direction in which to open the dropdown (default: false) <p>Or `data-simple-up="true"` in select</p> |
62
+ | **isAlwaysOpen**:boolean* | <p>default: **false**</p> Dropdown always open (default: false) <p>Or `data-simple-always-open="true"` in select</p> |
63
+ | **isOnlyPlaceholder**:boolean* | <p>default: **false**</p> Show only placeholder. Don't show selected options (default: false) <p>Or `data-simple-is-only-placeholder="true"` in select</p> |
64
+ | **detectNative**:function | <p>default: **none**</p> Return `true` if need rendering native select |
65
+ | **changeBodyLi**:function | <p>default: **none**</p> Custom <li>(body) item renderer |
66
+ | **locale**:{key: string} | <p>default: **simpleSelectLocale** **</p> Object of locales. ** |
67
+ | ***Options only DOM elements*** | |
68
+ | **data-simple-placeholder="text": Select** | Replace default placeholder (locale.title) |
69
+ | **data-simple-item-html-before="<div>before</div>: Select** | Add HTML before content (for item Li) |
70
+ | **data-simple-item-html-after="<div>after</div>": Select** | Add HTML after content (for item Li) |
71
+ | **data-simple-add-classes="class1 class2": Select** | Add classes for wrapper SimpSelect |
72
+ | **data-simple-html-before="<span>before</span>": option** | Add HTML before content (for item Li) |
73
+ | **data-simple-html-after="<span>after</span>": option** | Add HTML after content (for item Li) |
74
+ | **data-simple-show-checkbox: Select** | Show checkbox in item (Li) (for single select) |
75
+ | ***Callbacks*** | |
76
+ | **callbackInitialization: (item:SimpleSelectItem) => void** | Before initialization |
77
+ | **callbackInitialized**:(item:SimpleSelectItem) => void; | After initialization |
78
+ | **callbackOpen**: (item:SimpleSelectItem) => void; | Open dropdown |
79
+ | **callbackClose**:Open dropdown | Close dropdown |
80
+ | **callbackDestroyInit**: (item:SimpleSelectItem) => void; | Before destroy SimpSelect |
81
+ | **callbackDestroy**: (item:SimpleSelectItem) => void; | After destroy SimpSelect |
82
+ | **callbackChangeSelect** :(e: Event, item:SimpleSelectItem) => void; | Change SimpSelect (change options) |
83
+ | ***Methods*** | |
84
+ | **reload**:select(DomElement).SimpSelect.reload() | Reload SimpSelect. |
85
+ | **update**:select(DomElement).SimpSelect.update() | Update list (ul in dropdown) |
86
+ | **detach**:select(DomElement).SimpSelect.detach() | Detach SimpSelect. |
87
+ | ***const simpleSelect = new SimpleSelect('select')*** | Instance of the SimpleSelect plugin object |
88
+ | **getSelectById('ID')**:simpleSelect.getSelectById('ID') | Get item SimpSelect for ID (data-simple-select-init="ID" - dem element select) |
89
+ | **getSelectFirst()**:simpleSelect.getSelectFirst() | Get first item SimpSelect |
90
+ | **getSelects()**:simpleSelect.getSelects() | Get list SimpSelect |
89
91
 
90
92
  **Data attributes in DOM element(select) more important than initialization options.*
91
93
  ```
package/dist/demo/index.html CHANGED
@@ -20,8 +20,9 @@
20
20
  max-width: 600px;
21
21
  }
22
22
  .item {
23
+ display: block;
23
24
  width: 250px;
24
- }</style><body><div id="app"></div><div class="items"><div class="item"><select id="select_first" data-simple-placeholder="Custom title" data-simple-is-only-placeholder="true" multiple="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="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="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="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="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></div><script>const sel = new SimpleSelect('select', {
25
+ }</style><body><div id="app"></div><div class="items"><div class="item"><select id="select_first" data-simple-placeholder="Custom title" data-simple-is-only-placeholder="true" multiple="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="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="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="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="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></div><div><p>Group checkbox</p><div class="items"><label class="item"><select data-simple-select-search-dropdown="true" data-simple-show-checkbox="true" data-simple-always-open="true" class="color_red" data-simple-add-classes="class1" data-simple-select-search="false"><optgroup label="Группа 1"><option value="1">Опция 6.1</option></optgroup><optgroup label="Группа 2"><option value="1">Опция 6.1</option><option value="1">Опция 6.2</option></optgroup><optgroup label="Группа 3" disabled="disabled"><option value="1">Опция 6.1</option><option value="1">Опция 6.2</option><option value="1">Опция 6.3</option></optgroup></select></label> <label class="item"><select data-simple-select-search="true" data-simple-always-open="true" multiple="multiple"><optgroup label="Группа 1"><option value="1">Опция 7.1</option></optgroup><optgroup label="Группа 2"><option value="1">Опция 7.1</option><option value="1">Опция 7.2</option></optgroup><optgroup label="Группа 3" disabled="disabled"><option value="1">Опция 7.1</option><option value="1">Опция 7.2</option><option value="1">Опция 7.3</option></optgroup></select></label> <label class="item"><select data-simple-select-search-dropdown="true" data-simple-always-open="true" data-simple-remove-top="true" multiple="multiple"><optgroup label="Группа 1"><option value="1">Опция 8.1</option></optgroup><optgroup label="Группа 2"><option value="1">Опция 8.1</option><option value="1">Опция 8.2</option></optgroup><optgroup label="Группа 3" disabled="disabled"><option value="1">Опция 8.1</option><option value="1">Опция 8.2</option><option value="1">Опция 8.3</option></optgroup></select></label></div></div><script>const sel = new SimpleSelect('select', {
25
26
  // callbackOpen: (item) => {
26
27
  // console.log('open', item);
27
28
  // },
package/dist/simpleSelect.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("SimpleSelect",[],t):"object"==typeof exports?exports.SimpleSelect=t():e.SimpleSelect=t()}("undefined"==typeof self?this:self,(function(){return function(){"use strict";var e={737:function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.initClass=t.nameMark=t.nameSelect=t.simpleSelectionOptions=t.simpleSelectLocale=void 0,t.simpleSelectLocale={noSearch:"No matches for",searchText:"Search",title:"Select",selected:"Selected:",all:"all",ok:"Ok",cansel:"Cansel",selectAll:"Select all",resetAll:"Reset all"},t.simpleSelectionOptions={isSearch:!1,isSearchInDropdown:!1,countShowSelected:3,isOnlyPlaceholder:!1,isConfirmInMulti:!1,isConfirmInMultiOkClickOutside:!1,nativeOnDevice:["Android","BlackBerry","iPhone","iPad","iPod","Opera Mini","IEMobile","Silk"],locale:t.simpleSelectLocale,sepChars:",",isUp:!1,floatWidth:767,isCloneClass:!0,selectAll:!1,selectAllAfterClose:!0,resetAll:!1,resetAllAfterClose:!0},t.nameSelect="SimpSelect";t.nameMark="".concat("simple-select-","init"),t.initClass="SimpleSel"},874:function(e,t,i){function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function n(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,u(s.key),s)}}function l(e,t){return l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},l(e,t)}function o(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var i,n=c(e);if(t){var l=c(this).constructor;i=Reflect.construct(n,arguments,l)}else i=n.apply(this,arguments);return function(e,t){if(t&&("object"===s(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return a(e)}(this,i)}}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function r(){return r="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,i){var s=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=c(e)););return e}(e,t);if(s){var n=Object.getOwnPropertyDescriptor(s,t);return n.get?n.get.call(arguments.length<3?e:i):n.value}},r.apply(this,arguments)}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}function h(e,t,i){return(t=u(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function u(e){var t=function(e,t){if("object"!==s(e)||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,t||"default");if("object"!==s(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===s(t)?t:String(t)}Object.defineProperty(t,"__esModule",{value:!0}),t.SimpleSelectItem=void 0;var p=i(679),d=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&l(e,t)}(d,e);var t,i,s,u=o(d);function d(e,t,i){var s,n;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,d),h(a(n=u.call(this,e,t,i)),"closeOutsideHandler",void 0),h(a(n),"closeEscHandler",void 0),h(a(n),"changeListener",void 0),h(a(n),"searchHandler",void 0),h(a(n),"handleResize",void 0),h(a(n),"mql",null),h(a(n),"countOpen",0),h(a(n),"multiDebounceTime",0),h(a(n),"timeoutDebounceId",null),!e)throw Error("Select is required");return n.init(),r((s=a(n),c(d.prototype)),"initDom",s).call(s),n.initAfterDom(),n}return t=d,i=[{key:"init",value:function(){var e=this;this.changeListener=this.changeListenerInit.bind(this),this.$select.addEventListener("change",this.changeListener),this.searchHandler=this.searchHandlerInit.bind(this),this.closeOutsideHandler=this.closeOutsideHandlerInit.bind(this),this.closeEscHandler=this.closeEscHandlerInit.bind(this),this.handleResize=this.handleResizeInit.bind(this),this.options.callbackInitialization&&this.options.callbackInitialization(this),!this.isNative&&this.options.floatWidth&&(this.mql=window.matchMedia("screen and (max-width: ".concat(this.options.floatWidth,"px)")),this.mql&&(this.mql.onchange=this.handleResize,this.handleResizeInit(this.mql))),this.state.subscribe("isOpen",(function(t){e.toggleOpenHandler(),!t&&e.options.isConfirmInMulti&&e.createList(),t||e.elemInputSearch&&(e.elemInputSearch.value="",e.state.setState("filterStr",""))})),this.state.subscribe("filterStr",(function(t){e.filterList(t)})),this.isNative||(this.elemTopBody.onclick=this.clickToggleOpen.bind(this),this.elemTopBody.onkeyup=this.clickToggleOpen.bind(this))}},{key:"handleResizeInit",value:function(e){e&&(e.matches?this.state.setState("isFloat",!0):this.state.setState("isFloat",!1))}},{key:"initAfterDom",value:function(){this.confirmOk&&(this.confirmOk.onclick=this.confirmOkHandler.bind(this)),this.confirmNo&&(this.confirmNo.onclick=this.confirmNoHandler.bind(this)),this.options.callbackInitialized&&this.options.callbackInitialized(this),this.isMulti&&!this.options.isConfirmInMulti&&((0,p.toCamelCase)("simple-debounce-time")in this.$select.dataset?this.multiDebounceTime=Number(this.$select.dataset[(0,p.toCamelCase)("simple-debounce-time")]):(this.options.debounceTime||0===this.options.debounceTime)&&(this.multiDebounceTime=this.options.debounceTime)),this.multiDebounceTime&&(this.multiDebounceChange=this.debounce(this.multiDebounceChange.bind(this),this.multiDebounceTime)),this.elemSelectAll&&(this.elemSelectAll.onclick=this.selectAllHandler.bind(this)),this.elemResetAll&&(this.elemResetAll.onclick=this.resetAllHandler.bind(this)),this.elemDropDownClose&&(this.elemDropDownClose.onclick=this.closeHandler.bind(this))}},{key:"debounce",value:function(e,t){var i=this;return function(){for(var s=arguments.length,n=new Array(s),l=0;l<s;l++)n[l]=arguments[l];i.timeoutDebounceId&&clearTimeout(i.timeoutDebounceId),i.timeoutDebounceId=setTimeout((function(){e.apply(void 0,n),i.timeoutDebounceId=null}),t)}}},{key:"confirmOkHandler",value:function(e){e.preventDefault(),this.confirmOkBuild()}},{key:"confirmOkBuild",value:function(){var e=this.$select.options;this.elemListBody&&(this.elemListBody.querySelectorAll("[data-sel-position]").forEach((function(t){var i=parseInt(t.dataset[(0,p.toCamelCase)("sel-position")],10);if(i||0===i){var s=e[i];s&&!s.disabled&&(s.selected="true"===t.dataset[(0,p.toCamelCase)("sel-opt-checked")])}})),this.state.setState("isOpen",!1),this.triggerInit())}},{key:"confirmNoHandler",value:function(e){e.preventDefault(),this.state.setState("isOpen",!1)}},{key:"closeHandler",value:function(e){e.preventDefault(),this.state.setState("isOpen",!1)}},{key:"selectAllHandler",value:function(e){e.preventDefault(),Array.from(this.$select.options).forEach((function(e){e.disabled||(e.selected=!0)})),this.createList(),this.options.selectAllAfterClose&&this.state.setState("isOpen",!1),this.triggerInit()}},{key:"resetAllHandler",value:function(e){e.preventDefault(),Array.from(this.$select.options).forEach((function(e){e.disabled||(e.selected=!1)})),this.createList(),this.options.selectAllAfterClose&&this.state.setState("isOpen",!1),this.triggerInit()}},{key:"triggerSetup",value:function(e){if(0===e.button){var t=e.target.closest("li");t&&this.changeClickItem(t)}}},{key:"changeClickItemDom",value:function(e){"true"===e.dataset[(0,p.toCamelCase)("sel-opt-checked")]?(e.dataset[(0,p.toCamelCase)("sel-opt-checked")]="false",e.classList.remove("SimpleSel__list_item--checked")):(e.dataset[(0,p.toCamelCase)("sel-opt-checked")]="true",e.classList.add("SimpleSel__list_item--checked"))}},{key:"changeClickItem",value:function(e){if(e){var t=Number(e.dataset[(0,p.toCamelCase)("sel-position")])||0,i=this.$select.options[t];i&&!i.disabled&&(this.isMulti?this.options.isConfirmInMulti||this.isFloatWidth?this.changeClickItemDom(e):(i.selected=!i.selected,this.changeClickItemDom(e),this.createList(),this.multiDebounceChange()):(i.selected=!i.selected,this.createList(),this.state.setState("isOpen",!1),this.triggerInit()))}}},{key:"multiDebounceChange",value:function(){this.triggerInit()}},{key:"triggerInit",value:function(){(0,p.triggerInputEvent)(this.$select)}},{key:"clickToggleOpen",value:function(e){e.preventDefault(),this.isDisabled||("click"!==e.type?e instanceof KeyboardEvent&&"Enter"===e.key&&this.state.setState("isOpen",!this.state.getState("isOpen")):this.state.setState("isOpen",!this.state.getState("isOpen")))}},{key:"closeOutsideHandlerInit",value:function(e){var t=e.target;t&&(this.elemWrap.contains(t)||(this.options.isConfirmInMulti&&this.options.isConfirmInMultiOkClickOutside&&this.confirmOkBuild(),this.state.setState("isOpen",!1)))}},{key:"closeEscHandlerInit",value:function(e){if("Escape"===e.code&&(e.preventDefault(),e.stopPropagation(),this.state.setState("isOpen",!1)),"Tab"===e.code&&(e.preventDefault(),e.stopPropagation(),this.elemWrap.contains(e.target)||this.state.setState("isOpen",!1)),"ArrowUp"!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),e.stopPropagation(),this.keyBoardChangeChecked("ArrowDown"===e.key)),"Enter"===e.key){var t=e.target;t&&(0,p.toCamelCase)("sel-opt-item")in t.dataset&&(e.preventDefault(),e.stopPropagation(),this.changeClickItem(t))}}},{key:"keyBoardChangeChecked",value:function(e){var t=this.elemListBody.querySelectorAll('[data-sel-position]:not([data-sel-opt-disabled="true"])');if(t.length){var i,s=0;t.forEach((function(e,t){document.activeElement===e&&(s=t,i=e),e.removeAttribute("tabindex")})),(i=i?e?t[s+1]||t[0]:t[s-1]||t[t.length-1]:e?t[0]:t[t.length-1]).tabIndex=0,i.focus()}}},{key:"searchHandlerInit",value:function(e){var t=e.target;if(t){var i=t.value;this.state.setState("filterStr",i)}}},{key:"toggleOpenHandler",value:function(){var e=this;this.state.getState("isOpen")?(this.elemWrap.classList.add("SimpleSel--open"),document.addEventListener("click",this.closeOutsideHandler),document.addEventListener("keyup",this.closeEscHandler),this.elemInputSearch&&setTimeout((function(){e.elemInputSearch.focus()}),50),this.options.callbackOpen&&this.options.callbackOpen(this),this.countOpen++,this.elemDropDown&&setTimeout((function(){e.elemDropDown.scrollTop=0}),10)):(this.state.setState("filterList",""),this.elemWrap.classList.remove("SimpleSel--open"),document.removeEventListener("click",this.closeOutsideHandler),document.removeEventListener("keyup",this.closeEscHandler),this.timeoutDebounceId&&(clearTimeout(this.timeoutDebounceId),this.triggerInit()),this.options.callbackClose&&this.countOpen>0&&this.options.callbackClose(this))}},{key:"changeListenerInit",value:function(e){this.options.callbackChangeSelect&&this.options.callbackChangeSelect(e,this),this.createList(!0)}},{key:"getSelect",value:function(){return this.$select}},{key:"handlerChangeChecked",value:function(){this.elemListBody&&(this.elemListBody.onmouseup=this.triggerSetup.bind(this))}},{key:"createList",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=[],i=this.$select.querySelectorAll("optgroup");if(i&&i.length?i.forEach((function(e,i){t.push((0,p.getCreateListItem)(e,(i+1).toString(),!0))})):t.push((0,p.getCreateListItem)(this.$select,"1",!1)),e){var s=this.state.getState("items");(0,p.compareObj)(s,t)||this.state.setState("items",t)}else this.state.setState("items",t)}},{key:"filterList",value:function(e){e=e.toLowerCase();var t=(0,p.cloneObj)(this.state.getState("items"));t.forEach((function(t){var i=!1;t.items.forEach((function(t){t.title.toLowerCase().indexOf(e)>=0?(i=!0,t.isShowFilter=!0):t.isShowFilter=!1})),t.isShowFilter=i})),this.state.setState("items",t)}},{key:"inputSearchHandler",value:function(){this.elemInputSearch&&this.elemInputSearch.addEventListener("input",this.searchHandler)}},{key:"detachItem",value:function(){this.options.callbackDestroyInit&&this.options.callbackDestroyInit(this);var e=this.elemWrap.parentNode;this.$select.removeEventListener("change",this.changeListener),this.elemInputSearch&&this.elemInputSearch.removeEventListener("input",this.searchHandler),this.confirmOk&&(this.confirmOk.onclick=null),this.confirmNo&&(this.confirmNo.onclick=null),e.replaceChild(this.$select,this.elemWrap),this.$select.classList.remove(this.classSelectInit),this.elemTopBody&&(this.elemTopBody.onclick=null,this.elemTopBody.onkeyup=null),this.elemListBody&&(this.elemListBody.onmouseup=null),this.elemSelectAll&&(this.elemSelectAll.onclick=null),this.elemResetAll&&(this.elemResetAll.onclick=null),this.options.callbackDestroy&&this.options.callbackDestroy(this),this.elemDropDownClose&&(this.elemDropDownClose.onclick=null),this.mql&&(this.mql.onchange=null,this.mql=null)}}],i&&n(t.prototype,i),s&&n(t,s),Object.defineProperty(t,"prototype",{writable:!1}),d}(i(844).SimpleSelectItemDOM);t.SimpleSelectItem=d},844:function(e,t,i){function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function n(e){return function(e){if(Array.isArray(e))return l(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return l(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,s=new Array(t);i<t;i++)s[i]=e[i];return s}function o(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,r(s.key),s)}}function a(e,t,i){return(t=r(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function r(e){var t=function(e,t){if("object"!==s(e)||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,t||"default");if("object"!==s(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===s(t)?t:String(t)}Object.defineProperty(t,"__esModule",{value:!0}),t.SimpleSelectItemDOM=void 0;var c=i(679),h=i(972),u=i(737),p=function(){function e(t,i,s){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),a(this,"options",void 0),a(this,"$select",void 0),a(this,"id",void 0),a(this,"titlePlaceholder",void 0),a(this,"isDisabled",!1),a(this,"isMulti",void 0),a(this,"state",(0,h.store)({items:[],isOpen:!1,filterStr:"",isFloat:!1})),a(this,"classSelectInit",(0,c.getClass)("select_init")),a(this,"isNative",void 0),a(this,"elemWrap",document.createElement("div")),a(this,"elemTop",document.createElement("div")),a(this,"elemTopBody",document.createElement("div")),a(this,"elemDropDownWrap",null),a(this,"elemDropDown",null),a(this,"elemDropDownClose",null),a(this,"elemListBody",null),a(this,"elemInputSearch",null),a(this,"elemTitle",void 0),a(this,"confirmOk",null),a(this,"confirmNo",null),a(this,"elemControl",null),a(this,"elemSelectAll",null),a(this,"elemResetAll",null),a(this,"cloneClasses",""),a(this,"isShowCheckbox",!1),a(this,"bodyLiHTMLBeforeFromSelect",null),a(this,"bodyLiHTMLAfterFromSelect",null),a(this,"isFloatWidth",!1),a(this,"bodyOpenClass","".concat(u.initClass,"--body_open"));var n=s.id,l=s.isNative;this.$select=t,this.isMulti=t.multiple,this.id=n,this.isNative=l,this.options=(0,c.cloneObj)(i),this.options.isCloneClass&&(this.cloneClasses=this.$select.className),i.callbackInitialization&&(this.options.callbackInitialization=i.callbackInitialization),i.callbackInitialized&&(this.options.callbackInitialized=i.callbackInitialized),i.callbackOpen&&(this.options.callbackOpen=i.callbackOpen),i.callbackClose&&(this.options.callbackClose=i.callbackClose),i.callbackDestroyInit&&(this.options.callbackDestroyInit=i.callbackDestroyInit),i.callbackDestroy&&(this.options.callbackDestroy=i.callbackDestroy),i.callbackChangeSelect&&(this.options.callbackChangeSelect=i.callbackChangeSelect),i.changeBodyLi&&(this.options.changeBodyLi=i.changeBodyLi),this.isMulti&&this.$select.hasAttribute("data-simple-is-confirm")&&(this.options.isConfirmInMulti=(0,c.ifTrueDataAttr)(this.$select.getAttribute("data-simple-is-confirm"))),this.optionOverride(),this.isDisabled=this.$select.disabled}var t,i,s;return t=e,(i=[{key:"optionOverride",value:function(){var e=(0,c.toCamelCase)("simple-placeholder");if(this.$select.dataset[e]?this.titlePlaceholder=this.$select.dataset[e]||"":this.titlePlaceholder=this.options.locale.title,this.$select.hasAttribute("data-simple-reset-all")&&(this.options.resetAll=(0,c.ifTrueDataAttr)(this.$select.getAttribute("data-simple-reset-all"))),this.$select.hasAttribute("data-simple-select-all")){var t=this.$select.getAttribute("data-simple-select-all");this.options.selectAll=(0,c.ifTrueDataAttr)(t)}var i=this.$select.dataset[(0,c.toCamelCase)("simple-show-checkbox")];this.isMulti?this.isShowCheckbox=!(i&&!(0,c.ifTrueDataAttr)(i)):"true"===i&&(this.isShowCheckbox=!0);var s=this.$select.dataset[(0,c.toCamelCase)("simple-item-html-before")];s&&(this.bodyLiHTMLBeforeFromSelect=s);var n=this.$select.dataset[(0,c.toCamelCase)("simple-item-html-after")];n&&(this.bodyLiHTMLAfterFromSelect=n),this.$select.hasAttribute("data-simple-up")&&(this.options.isUp=(0,c.ifTrueDataAttr)(this.$select.getAttribute("data-simple-up"))),this.$select.hasAttribute("data-simple-is-only-placeholder")&&(this.options.isOnlyPlaceholder=(0,c.ifTrueDataAttr)(this.$select.getAttribute("data-simple-is-only-placeholder")))}},{key:"initDom",value:function(){var e=this;this.createList(!1),this.createHTML(),this.state.subscribe("items",(function(t){e.createListHTML(),e.createTitleHTML()})),this.state.subscribe("isOpen",(function(t){e.createListHTML(),e.createTitleHTML(),e.toggleTabIndex(t)})),this.state.subscribe("isFloat",(function(t){e.isFloatWidth=t;var i=(0,c.getClass)("float",!0);t?e.elemWrap.classList.add(i):e.elemWrap.classList.remove(i)}))}},{key:"toggleTabIndex",value:function(e){var t=e?0:-1;this.state.getState("isFloat")&&(e?document.body.classList.add(this.bodyOpenClass):document.body.classList.remove(this.bodyOpenClass)),this.elemInputSearch&&(this.elemInputSearch.tabIndex=t),this.elemResetAll&&(this.elemResetAll.tabIndex=t),this.elemSelectAll&&(this.elemSelectAll.tabIndex=t),this.confirmOk&&(this.confirmOk.tabIndex=t),this.confirmNo&&(this.confirmNo.tabIndex=t)}},{key:"updateHTML",value:function(){this.createList(!0)}},{key:"createHTML",value:function(){this.$select.classList.add(this.classSelectInit),this.$select.tabIndex=-1,this.elemTopBody.className=(0,c.getClass)("top_body"),this.elemTopBody.tabIndex=this.isDisabled?-1:0,this.createIcon(),this.elemTop.appendChild(this.elemTopBody);var e=u.initClass;this.options.isCloneClass&&(e+=" ".concat(this.cloneClasses)),this.$select.hasAttribute("data-simple-add-classes")&&(e+=" ".concat(this.$select.getAttribute("data-simple-add-classes"))),this.isDisabled&&(e+=" ".concat((0,c.getClass)("disabled",!0))),this.options.isUp&&(e+=" ".concat((0,c.getClass)("up",!0))),e+=" ".concat(this.isMulti?(0,c.getClass)("multi",!0):(0,c.getClass)("single",!0)),this.elemWrap.className=e,this.elemWrap.dataset.countAll=this.$select.options.length.toString(),this.elemTop.className=(0,c.getClass)("top");var t=this.$select.parentNode;t&&(t.replaceChild(this.elemWrap,this.$select),this.elemWrap.appendChild(this.$select)),this.elemWrap.appendChild(this.elemTop),this.isNative?(this.$select.classList.add((0,c.getClass)("native",!0,this.classSelectInit)),this.elemWrap.classList.add((0,c.getClass)("native",!0))):(this.createDropDown(),this.createControlHTML(),this.createInputHTML()),this.createTitleHTML()}},{key:"createControlHTML",value:function(){if(this.elemDropDown&&this.isMulti&&(this.options.selectAll||this.options.resetAll)){this.elemControl=document.createElement("div"),this.elemControl.classList.add((0,c.getClass)("controls")),this.elemDropDown.insertBefore(this.elemControl,this.elemDropDown.childNodes[0]);var e=(0,c.getClass)("control");this.options.selectAll&&(this.elemSelectAll=(0,c.createButton)(),this.elemSelectAll.className="".concat(e," ").concat((0,c.getClass)("select_all",!0,e)),this.elemSelectAll.innerHTML='<span class="'.concat((0,c.getClass)("select_all__icon"),'"></span> ').concat(this.options.locale.selectAll),this.elemControl.appendChild(this.elemSelectAll)),this.options.resetAll&&(this.elemResetAll=(0,c.createButton)(),this.elemResetAll.className="".concat(e," ").concat((0,c.getClass)("reset_all",!0,e)),this.elemResetAll.innerHTML='<span class="'.concat((0,c.getClass)("reset_all__icon"),'"></span> ').concat(this.options.locale.resetAll),this.elemControl.appendChild(this.elemResetAll))}}},{key:"createIcon",value:function(){var e=document.createElement("span");e.className=(0,c.getClass)("icon"),this.elemTopBody.appendChild(e)}},{key:"createDropDown",value:function(){this.isNative||(this.elemDropDownWrap=document.createElement("div"),this.elemDropDownWrap.className=(0,c.getClass)("body"),this.elemDropDown=document.createElement("div"),this.elemDropDown.className=(0,c.getClass)("body_wrap"),this.elemListBody=document.createElement("ul"),this.elemListBody.className=(0,c.getClass)("list"),this.elemDropDownWrap.append(this.elemDropDown),this.elemWrap.appendChild(this.elemDropDownWrap),this.elemDropDown.appendChild(this.elemListBody),this.elemDropDownClose=(0,c.createButton)(),this.elemDropDownClose.classList.add((0,c.getClass)("close")),this.elemDropDown.appendChild(this.elemDropDownClose),this.isMulti&&this.createIsConfirmInMultiHTML(),this.handlerChangeChecked())}},{key:"createIsConfirmInMultiHTML",value:function(){var e,t=document.createElement("div"),i=(0,c.getClass)("bottom_control");this.confirmOk=(0,c.createButton)(),this.confirmNo=(0,c.createButton)(),t.appendChild(this.confirmOk),t.appendChild(this.confirmNo),this.confirmOk.innerHTML=this.options.locale.ok,this.confirmNo.innerHTML=this.options.locale.cansel,this.confirmOk.className="".concat(i," ").concat((0,c.getClass)("ok",!0,i)),this.confirmNo.className="".concat(i," ").concat((0,c.getClass)("no",!0,i));var s=(0,c.getClass)("bottom_controls");this.options.isConfirmInMulti||(s+=" ".concat((0,c.getClass)("hide",!0,s))),t.className=s,null===(e=this.elemDropDown)||void 0===e||e.appendChild(t)}},{key:"createTitleHTML",value:function(){var e=this;if(!this.elemTitle){this.elemTitle=document.createElement("div");var t=(0,c.getClass)("title");this.options.isOnlyPlaceholder&&(t+=" ".concat((0,c.getClass)("only-placeholder",!0,t))),this.elemTitle.className=t,this.elemTopBody.insertBefore(this.elemTitle,this.elemTopBody.childNodes[0])}var i=this.getChecked();this.elemTop.title="";var s=!i.length,n=this.titlePlaceholder;if(i.length&&!this.options.isOnlyPlaceholder){var l="";i.forEach((function(t,i){0!==i&&(l+="".concat(e.options.sepChars,'<span class="').concat((0,c.getClass)("sep_space",!0),'">&nbsp;</span>')),l+="".concat(t.title)})),this.elemTop.title=l;var o=this.options.countShowSelected,a=Number(this.$select.dataset.simpleCountShowsSelected);a&&a>0&&(o=a),i.length>o?(n="".concat(this.options.locale.selected," ").concat(i.length),this.$select.querySelectorAll("option").length===i.length&&(n+=" (".concat(this.options.locale.all,")"))):l&&(n=l)}this.elemTitle.innerHTML=n,s?(this.elemTitle.classList.add("SimpleSel__title--placeholder"),this.elemTitle.classList.remove("SimpleSel__title--fill"),this.elemWrap.classList.remove((0,c.getClass)("fill",!0))):(this.elemTitle.classList.remove("SimpleSel__title--placeholder"),this.elemTitle.classList.add("SimpleSel__title--fill"),this.elemWrap.classList.add((0,c.getClass)("fill",!0)))}},{key:"createListHTML",value:function(){var e=this;if(this.elemListBody){var t="",i=0,s=0,n=0;this.state.getState("items").forEach((function(l){if(l.isGroup){var o=e.createLi(l),a=o.result,r=o.countShow,h=o.countChecked,u=o.countCheckedFull;t+='<div class="'.concat((0,c.getClass)("group_items"),'">'),t+=a,t+="</div>",s+=h,i+=r,n+=u}else{var p=e.createLi(l),d=p.result,m=p.countShow,f=p.countChecked,b=p.countCheckedFull;t+=d,i+=m,s+=f,n+=b}}));var l=this.state.getState("filterStr");l&&l.length&&0===i&&(t='<div class="'.concat((0,c.getClass)("no_match"),'">'),t="".concat(this.options.locale.noSearch,' "').concat(l,'"'),t+="</div>"),this.elemWrap.dataset.countChecked=s.toString(),this.elemWrap.dataset.countCheckedFull=n.toString(),this.isMulti&&(this.elemWrap.dataset.checkAllMulti=this.$select.options.length===s?"yes":"no"),t=(0,c.removeExtraSpaces)(t),this.elemListBody.innerHTML!==t&&(this.elemListBody.innerHTML=t)}}},{key:"createInputHTML",value:function(){var e=this.options.isSearch,t=this.options.isSearchInDropdown;if("simpleSelectSearch"in this.$select.dataset&&(e="false"!==this.$select.dataset.simpleSelectSearch),"simpleSelectSearchDropdown"in this.$select.dataset&&(t="false"!==this.$select.dataset.simpleSelectSearchDropdown),e||t){this.elemInputSearch=document.createElement("input"),this.elemInputSearch.type="text",this.elemInputSearch.tabIndex=-1,this.elemInputSearch.autocomplete="off",this.elemInputSearch.ariaAutoComplete="none",this.elemInputSearch.inputMode="off",this.elemInputSearch.placeholder=this.options.locale.searchText,this.elemInputSearch.name="".concat(u.initClass,"_name_").concat(this.id);var i=(0,c.getClass)("search");if(t){if(this.elemDropDown){var s=document.createElement("div");s.className=(0,c.getClass)("search_wrap"),this.elemInputSearch.className="".concat(i," ").concat((0,c.getClass)("dropdown",!0,i)),s.appendChild(this.elemInputSearch),this.elemDropDown.insertBefore(s,this.elemDropDown.childNodes[0])}}else this.elemInputSearch.className="".concat(i," ").concat((0,c.getClass)("top",!0,i)),this.elemTop.appendChild(this.elemInputSearch);this.inputSearchHandler()}}},{key:"getChecked",value:function(){var e=this.state.getState("items"),t=[];return e.forEach((function(e){t=[].concat(n(t),n(e.items.filter((function(e){return e.checked}))))})),t}},{key:"createLi",value:function(e){var t=this,i="",s=0,n=0,l=0;return e.isShowFilter?(e.isGroup&&(i+='<label class="'.concat((0,c.getClass)("group_title"),'">').concat(e.titleGroup,"</label>"),i+='<ul class="'.concat((0,c.getClass)("group"),'">')),e.items.forEach((function(o){if(o.isShowFilter){s++;var a=(0,c.getClass)("list_item"),r=a;o.checked&&(n++,r+=" ".concat((0,c.getClass)("checked",!0,a)),o.value&&l++),o.disabled&&(r+=" ".concat((0,c.getClass)("disabled",!0,a))),o.value||(r+=" ".concat((0,c.getClass)("not_value",!0,a)));var h='data-sel-group-id="'.concat(e.idGroup,'"');h+=' data-sel-position="'.concat(o.position,'"'),h+=' data-sel-id="'.concat(o.id,'"'),o.value&&(h+=' data-sel-value="'.concat(o.value,'"')),h+=' data-sel-opt-item=""',h+=' data-sel-opt-checked="'.concat(o.checked,'"'),h+=' data-sel-opt-disabled="'.concat(o.disabled,'"'),i+='<li class="'.concat(r,'" ').concat(h,">");var u=t.createLiBody(o,t.$select.options[o.position]);i+="string"==typeof u?u:u.outerHTML,i+="</li>"}})),e.isGroup&&(i+="</ul>"),{result:i,countShow:s,countChecked:n,countCheckedFull:l}):{result:i,countShow:s,countChecked:n,countCheckedFull:l}}},{key:"createLiBody",value:function(e,t){var i=document.createElement("div");i.className=(0,c.getClass)("list_item_body");var s="";return this.isShowCheckbox&&(s='<span class="'.concat((0,c.getClass)("list_item_icon"),'"></span>')),this.bodyLiHTMLBeforeFromSelect&&(s+=this.bodyLiHTMLBeforeFromSelect),t.hasAttribute("data-simple-html-before")&&(s+=t.getAttribute("data-simple-html-before")),s+="".concat(e.title),this.bodyLiHTMLAfterFromSelect&&(s+=this.bodyLiHTMLAfterFromSelect),t.hasAttribute("data-simple-html-after")&&(s+=t.getAttribute("data-simple-html-after")),i.innerHTML=s,this.options.changeBodyLi?this.options.changeBodyLi(i,t):i}},{key:"handlerChangeChecked",value:function(){console.error("This method need redefine")}},{key:"createList",value:function(e){console.error("This method need redefine")}},{key:"inputSearchHandler",value:function(){console.error("This method need redefine")}}])&&o(t.prototype,i),s&&o(t,s),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.SimpleSelectItemDOM=p},679:function(e,t,i){Object.defineProperty(t,"__esModule",{value:!0}),t.createButton=t.cloneObj=t.compareObj=t.getClass=t.getCreateListItem=t.triggerInputEvent=t.ifTrueDataAttr=t.createDataAttr=t.removeExtraSpaces=t.toCamelCase=void 0;var s=i(737);t.toCamelCase=function(e){return e.replace(/-([a-z])/g,(function(e,t){return t.toUpperCase()}))};t.removeExtraSpaces=function(e){return e.replace(/\s+/g," ").trim()};t.createDataAttr=function(e){return"data-".concat(e)};t.ifTrueDataAttr=function(e){return!!e&&("true"===e||"1"===e)},t.triggerInputEvent=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"change";try{var i=new Event(t,{bubbles:!0,cancelable:!0});e.dispatchEvent(i)}catch(i){var s=new CustomEvent(t,{bubbles:!0,cancelable:!0});e.dispatchEvent(s)}};t.getCreateListItem=function(e,t,i){var s=e.querySelectorAll("option"),n=[];s.forEach((function(e,t){n.push({id:(t+1).toString(),position:e.index,title:e.innerHTML,value:e.getAttribute("value"),checked:e.selected,disabled:e.disabled,isShowFilter:!0})}));var l={isGroup:i,idGroup:t,items:n,isShowFilter:!0};return e instanceof HTMLOptGroupElement&&(l.titleGroup=e.label||"",l.isDisabledGroup=e.disabled||!1),l};t.getClass=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:s.initClass,n=t?"--":"__";return"".concat(i).concat(n).concat(e)};t.compareObj=function(e,t){return JSON.stringify(e)===JSON.stringify(t)};t.cloneObj=function(e){return JSON.parse(JSON.stringify(e))};t.createButton=function(){var e=document.createElement("button");return e.type="button",e.tabIndex=-1,e}},972:function(e,t){function i(e){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i(e)}function s(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,s)}return i}function n(e,t,s){return(t=function(e){var t=function(e,t){if("object"!==i(e)||null===e)return e;var s=e[Symbol.toPrimitive];if(void 0!==s){var n=s.call(e,t||"default");if("object"!==i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===i(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[t]=s,e}Object.defineProperty(t,"__esModule",{value:!0}),t.store=void 0,t.store=function(e){var t={},i={},l=[],o=function(e){return e?e in t?t[e]:null:t},a=function(e,o){var a=function(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?s(Object(i),!0).forEach((function(t){n(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):s(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}({},t),r=t[e]||0==t[e]?t[e]:null;t[e]=o,e in i&&i[e].forEach((function(e){return e(o,r,t)})),l.forEach((function(i){return i(e,a,t)}))};return e&&Object.keys(e).forEach((function(t){a(t,e[t])})),{getState:o,setState:a,subscribe:function(e,t){e in i||(i[e]=[]),i[e].push(t);var s=o(e);return t(s,null,o()),function(){i[e]=i[e].filter((function(e){return e!==t}))}},subscribeAll:function(e){return l.push(e),e(null,null,o()),function(){l=l.filter((function(t){return t!==e}))}},unSubscribe:function(e,t){e in i&&(i[e]=i[e].filter((function(e){return e!==t})))}}}},181:function(e,t,i){i.r(t)}},t={};function i(s){var n=t[s];if(void 0!==n)return n.exports;var l=t[s]={exports:{}};return e[s](l,l.exports,i),l.exports}i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};return function(){var e=s;function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t(e)}function n(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,s)}return i}function l(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?n(Object(i),!0).forEach((function(t){a(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):n(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function o(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,r(s.key),s)}}function a(e,t,i){return(t=r(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function r(e){var i=function(e,i){if("object"!==t(e)||null===e)return e;var s=e[Symbol.toPrimitive];if(void 0!==s){var n=s.call(e,i||"default");if("object"!==t(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===i?String:Number)(e)}(e,"string");return"symbol"===t(i)?i:String(i)}var c=i(737),h=i(679),u=i(874);i(181);var p=function(){function e(t,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),a(this,"callCount",Date.now()),a(this,"countInit",0),a(this,"$selects",[]),a(this,"options",void 0),a(this,"nameMarkTransform",(0,h.toCamelCase)(c.nameMark)),a(this,"dataNameMark",(0,h.createDataAttr)(c.nameMark)),a(this,"isNative",void 0),t||(t="select"),this.options=l(l({},c.simpleSelectionOptions),i),"string"==typeof t?this.init(Array.from(document.querySelectorAll(t))):t instanceof HTMLSelectElement?this.init([t]):t instanceof NodeList?this.init(Array.from(t)):Array.isArray(t)?this.init(t):console.warn("Wrong selector: ",t)}var t,i,s;return t=e,(i=[{key:"detectMobile",value:function(){if(this.options.detectNative)this.isNative=this.options.detectNative();else{for(var e=navigator.userAgent||navigator.vendor||window.opera,t=!1,i=0;i<this.options.nativeOnDevice.length;i++)e.toString().toLowerCase().indexOf(this.options.nativeOnDevice[i].toLowerCase())>0&&this.options.nativeOnDevice[i]&&(t=!0);this.isNative=t}}},{key:"init",value:function(e){var t=this;this.detectMobile(),e.forEach((function(e){t.build(e)}))}},{key:"createMethods",value:function(e){var t=this;return{getNativeSelect:function(){return e.getSelect()},reload:function(){t.rebuild(e)},update:function(){e.updateHTML()},detach:function(){t.detach(e)}}}},{key:"setMethods",value:function(e){e.$select[c.nameSelect]=this.createMethods(e)}},{key:"setMethodsClear",value:function(e){delete e.$select[c.nameSelect]}},{key:"build",value:function(e){if(this.nameMarkTransform in e.dataset)console.warn("This element has already been initialized",e);else{this.countInit+=1;var t="".concat(this.callCount,"-").concat(this.countInit);e.setAttribute(this.dataNameMark,t);var i=new u.SimpleSelectItem(e,this.options,{id:t,isNative:this.isNative});this.$selects.push(i),this.setMethods(i)}}},{key:"detach",value:function(e){e.detachItem(),e.$select.removeAttribute(this.dataNameMark),this.setMethodsClear(e),this.$selects=this.$selects.filter((function(t){return t!==e}))}},{key:"rebuild",value:function(e){var t=e.$select;this.detach(e),this.build(t)}},{key:"getSelects",value:function(){return this.$selects}},{key:"getSelectFirst",value:function(){return this.createMethods(this.$selects[0])}},{key:"getSelectById",value:function(e){var t=this.$selects.filter((function(t){return t.id===e}))[0];return t?this.createMethods(t):null}}])&&o(t.prototype,i),s&&o(t,s),Object.defineProperty(t,"prototype",{writable:!1}),e}();e.default=p}(),s=s.default}()}));
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("SimpleSelect",[],t):"object"==typeof exports?exports.SimpleSelect=t():e.SimpleSelect=t()}("undefined"==typeof self?this:self,(function(){return function(){"use strict";var e={737:function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.initClass=t.nameMark=t.nameSelect=t.simpleSelectionOptions=t.simpleSelectLocale=void 0,t.simpleSelectLocale={noSearch:"No matches for",searchText:"Search",title:"Select",selected:"Selected:",all:"all",ok:"Ok",cansel:"Cansel",selectAll:"Select all",resetAll:"Reset all"},t.simpleSelectionOptions={isSearch:!1,searchTypeInput:"search",isSearchInDropdown:!1,countShowSelected:3,isOnlyPlaceholder:!1,isRemoveTop:!1,isConfirmInMulti:!1,isConfirmInMultiOkClickOutside:!1,nativeOnDevice:["Android","BlackBerry","iPhone","iPad","iPod","Opera Mini","IEMobile","Silk"],locale:t.simpleSelectLocale,sepChars:",",isUp:!1,isAlwaysOpen:!1,floatWidth:767,isCloneClass:!0,selectAll:!1,selectAllAfterClose:!0,resetAll:!1,resetAllAfterClose:!0},t.nameSelect="SimpSelect";t.nameMark="".concat("simple-select-","init"),t.initClass="SimpleSel"},874:function(e,t,i){function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function n(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,u(s.key),s)}}function l(e,t){return l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},l(e,t)}function o(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var i,n=c(e);if(t){var l=c(this).constructor;i=Reflect.construct(n,arguments,l)}else i=n.apply(this,arguments);return function(e,t){if(t&&("object"===s(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return a(e)}(this,i)}}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function r(){return r="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,i){var s=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=c(e)););return e}(e,t);if(s){var n=Object.getOwnPropertyDescriptor(s,t);return n.get?n.get.call(arguments.length<3?e:i):n.value}},r.apply(this,arguments)}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}function h(e,t,i){return(t=u(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function u(e){var t=function(e,t){if("object"!==s(e)||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,t||"default");if("object"!==s(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===s(t)?t:String(t)}Object.defineProperty(t,"__esModule",{value:!0}),t.SimpleSelectItem=void 0;var p=i(679),d=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&l(e,t)}(d,e);var t,i,s,u=o(d);function d(e,t,i){var s,n;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,d),h(a(n=u.call(this,e,t,i)),"closeOutsideHandler",void 0),h(a(n),"closeEscHandler",void 0),h(a(n),"changeListener",void 0),h(a(n),"searchHandler",void 0),h(a(n),"handleResize",void 0),h(a(n),"mql",null),h(a(n),"countOpen",0),h(a(n),"multiDebounceTime",0),h(a(n),"timeoutDebounceId",null),!e)throw Error("Select is required");return n.init(),r((s=a(n),c(d.prototype)),"initDom",s).call(s),n.initAfterDom(),n}return t=d,i=[{key:"init",value:function(){var e=this;this.changeListener=this.changeListenerInit.bind(this),this.$select.addEventListener("change",this.changeListener),this.searchHandler=this.searchHandlerInit.bind(this),this.closeOutsideHandler=this.closeOutsideHandlerInit.bind(this),this.closeEscHandler=this.closeEscHandlerInit.bind(this),this.handleResize=this.handleResizeInit.bind(this),this.options.callbackInitialization&&this.options.callbackInitialization(this),!this.isNative&&this.options.floatWidth&&(this.mql=window.matchMedia("screen and (max-width: ".concat(this.options.floatWidth,"px)")),this.mql&&(this.mql.onchange=this.handleResize,this.handleResizeInit(this.mql))),this.state.subscribe("isOpen",(function(t){e.toggleOpenHandler(),!t&&e.options.isConfirmInMulti&&e.createList(),t||e.elemInputSearch&&(e.elemInputSearch.value="",e.state.setState("filterStr",""))})),this.state.subscribe("filterStr",(function(t){e.filterList(t)})),this.isNative||this.options.isAlwaysOpen||(this.elemTopBody.onclick=this.clickToggleOpen.bind(this),this.elemTopBody.onkeyup=this.clickToggleOpen.bind(this))}},{key:"handleResizeInit",value:function(e){e&&(e.matches?this.state.setState("isFloat",!0):this.state.setState("isFloat",!1))}},{key:"initAfterDom",value:function(){var e=this;this.confirmOk&&(this.confirmOk.onclick=this.confirmOkHandler.bind(this)),this.confirmNo&&(this.confirmNo.onclick=this.confirmNoHandler.bind(this)),this.options.callbackInitialized&&this.options.callbackInitialized(this),this.isMulti&&!this.options.isConfirmInMulti&&((0,p.toCamelCase)("simple-debounce-time")in this.$select.dataset?this.multiDebounceTime=Number(this.$select.dataset[(0,p.toCamelCase)("simple-debounce-time")]):(this.options.debounceTime||0===this.options.debounceTime)&&(this.multiDebounceTime=this.options.debounceTime)),this.multiDebounceTime&&(this.multiDebounceChange=this.debounce(this.multiDebounceChange.bind(this),this.multiDebounceTime)),this.elemSelectAll&&(this.elemSelectAll.onclick=this.selectAllHandler.bind(this)),this.elemResetAll&&(this.elemResetAll.onclick=this.resetAllHandler.bind(this)),this.elemDropDownClose&&(this.elemDropDownClose.onclick=this.closeHandler.bind(this)),this.elemListBody&&this.elemListBody.addEventListener("keyup",(function(t){if("Enter"===t.key){var i=t.target;if(i&&(0,p.toCamelCase)("sel-opt-item")in i.dataset){t.preventDefault(),t.stopPropagation(),e.changeClickItem(i);var s=i.dataset[(0,p.toCamelCase)("sel-position")],n=e.elemListBody.querySelector('[data-sel-position="'.concat(s,'"]'));n&&n.focus()}}}))}},{key:"debounce",value:function(e,t){var i=this;return function(){for(var s=arguments.length,n=new Array(s),l=0;l<s;l++)n[l]=arguments[l];i.timeoutDebounceId&&clearTimeout(i.timeoutDebounceId),i.timeoutDebounceId=setTimeout((function(){e.apply(void 0,n),i.timeoutDebounceId=null}),t)}}},{key:"confirmOkHandler",value:function(e){e.preventDefault(),this.confirmOkBuild()}},{key:"confirmOkBuild",value:function(){var e=this.$select.options;this.elemListBody&&(this.elemListBody.querySelectorAll("[data-sel-position]").forEach((function(t){var i=parseInt(t.dataset[(0,p.toCamelCase)("sel-position")],10);if(i||0===i){var s=e[i];s&&!s.disabled&&(s.selected="true"===t.dataset[(0,p.toCamelCase)("sel-opt-checked")])}})),this.state.setState("isOpen",!1),this.triggerInit())}},{key:"confirmNoHandler",value:function(e){e.preventDefault(),this.state.setState("isOpen",!1)}},{key:"closeHandler",value:function(e){e.preventDefault(),this.state.setState("isOpen",!1)}},{key:"selectAllHandler",value:function(e){e.preventDefault(),Array.from(this.$select.options).forEach((function(e){e.disabled||(e.selected=!0)})),this.createList(),this.options.selectAllAfterClose&&this.state.setState("isOpen",!1),this.triggerInit()}},{key:"resetAllHandler",value:function(e){e.preventDefault(),Array.from(this.$select.options).forEach((function(e){e.disabled||(e.selected=!1)})),this.createList(),this.options.selectAllAfterClose&&this.state.setState("isOpen",!1),this.triggerInit()}},{key:"triggerSetup",value:function(e){if(0===e.button){var t=e.target.closest("li");t&&this.changeClickItem(t)}}},{key:"changeClickItemDom",value:function(e){"true"===e.dataset[(0,p.toCamelCase)("sel-opt-checked")]?(e.dataset[(0,p.toCamelCase)("sel-opt-checked")]="false",e.classList.remove("SimpleSel__list_item--checked")):(e.dataset[(0,p.toCamelCase)("sel-opt-checked")]="true",e.classList.add("SimpleSel__list_item--checked"))}},{key:"changeClickItem",value:function(e){if(e){var t=Number(e.dataset[(0,p.toCamelCase)("sel-position")])||0,i=this.$select.options[t];i&&!i.disabled&&(this.isMulti?this.options.isConfirmInMulti||this.isFloatWidth?this.changeClickItemDom(e):(i.selected=!i.selected,this.changeClickItemDom(e),this.createList(),this.multiDebounceChange()):(i.selected=!0,this.createList(),this.state.setState("isOpen",!1),this.triggerInit()))}}},{key:"multiDebounceChange",value:function(){this.triggerInit()}},{key:"triggerInit",value:function(){(0,p.triggerInputEvent)(this.$select)}},{key:"clickToggleOpen",value:function(e){e.preventDefault(),this.isDisabled||("click"!==e.type?e instanceof KeyboardEvent&&"Enter"===e.key&&this.state.setState("isOpen",!this.state.getState("isOpen")):this.state.setState("isOpen",!this.state.getState("isOpen")))}},{key:"closeOutsideHandlerInit",value:function(e){var t=e.target;t&&(this.elemWrap.contains(t)||(this.options.isConfirmInMulti&&this.options.isConfirmInMultiOkClickOutside&&this.confirmOkBuild(),this.state.setState("isOpen",!1)))}},{key:"closeEscHandlerInit",value:function(e){"Escape"===e.code&&(e.preventDefault(),e.stopPropagation(),this.state.setState("isOpen",!1)),"Tab"===e.code&&(e.preventDefault(),e.stopPropagation(),this.elemWrap.contains(e.target)||this.state.setState("isOpen",!1)),"ArrowUp"!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),e.stopPropagation(),this.keyBoardChangeChecked("ArrowDown"===e.key))}},{key:"keyBoardChangeChecked",value:function(e){var t=this.elemListBody.querySelectorAll('[data-sel-position]:not([data-sel-opt-disabled="true"])');if(t.length){var i,s=0;t.forEach((function(e,t){document.activeElement===e&&(s=t,i=e),e.removeAttribute("tabindex")})),(i=i?e?t[s+1]||t[0]:t[s-1]||t[t.length-1]:e?t[0]:t[t.length-1]).tabIndex=0,i.focus()}}},{key:"searchHandlerInit",value:function(e){var t=e.target;if(t){var i=t.value;this.state.setState("filterStr",i)}}},{key:"toggleOpenHandler",value:function(){var e=this;this.state.getState("isOpen")?(this.elemWrap.classList.add("SimpleSel--open"),document.addEventListener("click",this.closeOutsideHandler),document.addEventListener("keyup",this.closeEscHandler),this.elemInputSearch&&setTimeout((function(){e.elemInputSearch.focus()}),50),this.options.callbackOpen&&this.options.callbackOpen(this),this.countOpen++,this.elemDropDown&&setTimeout((function(){e.elemDropDown.scrollTop=0}),10)):(this.state.setState("filterList",""),this.elemWrap.classList.remove("SimpleSel--open"),document.removeEventListener("click",this.closeOutsideHandler),document.removeEventListener("keyup",this.closeEscHandler),this.timeoutDebounceId&&(clearTimeout(this.timeoutDebounceId),this.triggerInit()),this.options.callbackClose&&this.countOpen>0&&this.options.callbackClose(this))}},{key:"changeListenerInit",value:function(e){this.options.callbackChangeSelect&&this.options.callbackChangeSelect(e,this),this.createList(!0)}},{key:"getSelect",value:function(){return this.$select}},{key:"handlerChangeChecked",value:function(){this.elemListBody&&(this.elemListBody.onmouseup=this.triggerSetup.bind(this))}},{key:"createList",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=[],i=this.$select.querySelectorAll("optgroup");if(i&&i.length?i.forEach((function(e,i){t.push((0,p.getCreateListItem)(e,(i+1).toString(),!0))})):t.push((0,p.getCreateListItem)(this.$select,"1",!1)),e){var s=this.state.getState("items");(0,p.compareObj)(s,t)||this.state.setState("items",t)}else this.state.setState("items",t)}},{key:"filterList",value:function(e){e=e.toLowerCase();var t=(0,p.cloneObj)(this.state.getState("items"));t.forEach((function(t){var i=!1;t.items.forEach((function(t){t.title.toLowerCase().indexOf(e)>=0?(i=!0,t.isShowFilter=!0):t.isShowFilter=!1})),t.isShowFilter=i})),this.state.setState("items",t)}},{key:"inputSearchHandler",value:function(){this.elemInputSearch&&this.elemInputSearch.addEventListener("input",this.searchHandler)}},{key:"detachItem",value:function(){this.options.callbackDestroyInit&&this.options.callbackDestroyInit(this);var e=this.elemWrap.parentNode;this.$select.removeEventListener("change",this.changeListener),this.elemInputSearch&&this.elemInputSearch.removeEventListener("input",this.searchHandler),this.confirmOk&&(this.confirmOk.onclick=null),this.confirmNo&&(this.confirmNo.onclick=null),e.replaceChild(this.$select,this.elemWrap),this.$select.classList.remove(this.classSelectInit),this.elemTopBody&&(this.elemTopBody.onclick=null,this.elemTopBody.onkeyup=null),this.elemListBody&&(this.elemListBody.onmouseup=null),this.elemSelectAll&&(this.elemSelectAll.onclick=null),this.elemResetAll&&(this.elemResetAll.onclick=null),this.options.callbackDestroy&&this.options.callbackDestroy(this),this.elemDropDownClose&&(this.elemDropDownClose.onclick=null),this.mql&&(this.mql.onchange=null,this.mql=null)}}],i&&n(t.prototype,i),s&&n(t,s),Object.defineProperty(t,"prototype",{writable:!1}),d}(i(844).SimpleSelectItemDOM);t.SimpleSelectItem=d},844:function(e,t,i){function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function n(e){return function(e){if(Array.isArray(e))return l(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return l(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,s=new Array(t);i<t;i++)s[i]=e[i];return s}function o(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,r(s.key),s)}}function a(e,t,i){return(t=r(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function r(e){var t=function(e,t){if("object"!==s(e)||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,t||"default");if("object"!==s(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===s(t)?t:String(t)}Object.defineProperty(t,"__esModule",{value:!0}),t.SimpleSelectItemDOM=void 0;var c=i(679),h=i(972),u=i(737),p=function(){function e(t,i,s){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),a(this,"options",void 0),a(this,"$select",void 0),a(this,"id",void 0),a(this,"titlePlaceholder",void 0),a(this,"isDisabled",!1),a(this,"isMulti",void 0),a(this,"state",(0,h.store)({items:[],isOpen:!1,filterStr:"",isFloat:!1})),a(this,"classSelectInit",(0,c.getClass)("select_init")),a(this,"isNative",void 0),a(this,"elemWrap",document.createElement("div")),a(this,"elemTop",document.createElement("div")),a(this,"elemTopBody",document.createElement("div")),a(this,"elemDropDownWrap",null),a(this,"elemDropDown",null),a(this,"elemDropDownClose",null),a(this,"elemListBody",null),a(this,"elemInputSearch",null),a(this,"elemTitle",void 0),a(this,"confirmOk",null),a(this,"confirmNo",null),a(this,"elemControl",null),a(this,"elemSelectAll",null),a(this,"elemResetAll",null),a(this,"cloneClasses",""),a(this,"isShowCheckbox",!1),a(this,"bodyLiHTMLBeforeFromSelect",null),a(this,"bodyLiHTMLAfterFromSelect",null),a(this,"isFloatWidth",!1),a(this,"bodyOpenClass","".concat(u.initClass,"--body_open"));var n=s.id,l=s.isNative;this.$select=t,this.isMulti=t.multiple,this.id=n,this.isNative=l,this.options=(0,c.cloneObj)(i),this.options.isCloneClass&&(this.cloneClasses=this.$select.className),i.callbackInitialization&&(this.options.callbackInitialization=i.callbackInitialization),i.callbackInitialized&&(this.options.callbackInitialized=i.callbackInitialized),i.callbackOpen&&(this.options.callbackOpen=i.callbackOpen),i.callbackClose&&(this.options.callbackClose=i.callbackClose),i.callbackDestroyInit&&(this.options.callbackDestroyInit=i.callbackDestroyInit),i.callbackDestroy&&(this.options.callbackDestroy=i.callbackDestroy),i.callbackChangeSelect&&(this.options.callbackChangeSelect=i.callbackChangeSelect),i.changeBodyLi&&(this.options.changeBodyLi=i.changeBodyLi),this.isMulti&&this.$select.hasAttribute("data-simple-is-confirm")&&(this.options.isConfirmInMulti=(0,c.ifTrueDataAttr)(this.$select.getAttribute("data-simple-is-confirm"))),this.optionOverride(),this.isDisabled=this.$select.disabled}var t,i,s;return t=e,(i=[{key:"optionOverride",value:function(){var e=(0,c.toCamelCase)("simple-placeholder");if(this.$select.dataset[e]?this.titlePlaceholder=this.$select.dataset[e]||"":this.titlePlaceholder=this.options.locale.title,this.$select.hasAttribute("data-simple-reset-all")&&(this.options.resetAll=(0,c.ifTrueDataAttr)(this.$select.getAttribute("data-simple-reset-all"))),this.$select.hasAttribute("data-simple-select-all")){var t=this.$select.getAttribute("data-simple-select-all");this.options.selectAll=(0,c.ifTrueDataAttr)(t)}var i=this.$select.dataset[(0,c.toCamelCase)("simple-show-checkbox")];this.isMulti?this.isShowCheckbox=!(i&&!(0,c.ifTrueDataAttr)(i)):"true"===i&&(this.isShowCheckbox=!0);var s=this.$select.dataset[(0,c.toCamelCase)("simple-item-html-before")];s&&(this.bodyLiHTMLBeforeFromSelect=s);var n=this.$select.dataset[(0,c.toCamelCase)("simple-item-html-after")];n&&(this.bodyLiHTMLAfterFromSelect=n),this.$select.hasAttribute("data-simple-up")&&(this.options.isUp=(0,c.ifTrueDataAttr)(this.$select.getAttribute("data-simple-up"))),this.$select.hasAttribute("data-simple-is-only-placeholder")&&(this.options.isOnlyPlaceholder=(0,c.ifTrueDataAttr)(this.$select.getAttribute("data-simple-is-only-placeholder"))),this.$select.hasAttribute("data-simple-remove-top")&&(this.options.isRemoveTop=(0,c.ifTrueDataAttr)(this.$select.getAttribute("data-simple-remove-top"))),this.$select.hasAttribute("data-simple-always-open")&&(this.options.isAlwaysOpen=(0,c.ifTrueDataAttr)(this.$select.getAttribute("data-simple-always-open")),this.isNative=!1,this.isFloatWidth=!1,this.options.floatWidth=0)}},{key:"initDom",value:function(){var e=this;this.createList(!1),this.createHTML(),this.state.subscribe("items",(function(t){e.createListHTML(),e.createTitleHTML()})),this.state.subscribe("isOpen",(function(t){e.createListHTML(),e.createTitleHTML(),e.toggleTabIndex(t)})),this.state.subscribe("isFloat",(function(t){e.isFloatWidth=t;var i=(0,c.getClass)("float",!0);t?e.elemWrap.classList.add(i):e.elemWrap.classList.remove(i)}))}},{key:"toggleTabIndex",value:function(e){var t=e||this.options.isAlwaysOpen?0:-1;this.state.getState("isFloat")&&(e?document.body.classList.add(this.bodyOpenClass):document.body.classList.remove(this.bodyOpenClass)),this.elemInputSearch&&(this.elemInputSearch.tabIndex=t),this.elemResetAll&&(this.elemResetAll.tabIndex=t),this.elemSelectAll&&(this.elemSelectAll.tabIndex=t),this.confirmOk&&(this.confirmOk.tabIndex=t),this.confirmNo&&(this.confirmNo.tabIndex=t)}},{key:"updateHTML",value:function(){this.createList(!0)}},{key:"createHTML",value:function(){this.$select.classList.add(this.classSelectInit),this.$select.tabIndex=-1,this.elemTopBody.className=(0,c.getClass)("top_body"),this.elemTopBody.tabIndex=this.isDisabled?-1:0,this.createIcon(),this.options.isRemoveTop||this.elemTop.appendChild(this.elemTopBody);var e=u.initClass;this.options.isCloneClass&&(e+=" ".concat(this.cloneClasses)),this.$select.hasAttribute("data-simple-add-classes")&&(e+=" ".concat(this.$select.getAttribute("data-simple-add-classes"))),this.isDisabled&&(e+=" ".concat((0,c.getClass)("disabled",!0))),this.options.isAlwaysOpen&&(e+=" ".concat((0,c.getClass)("always_open",!0))),this.options.isUp&&(e+=" ".concat((0,c.getClass)("up",!0))),e+=" ".concat(this.isMulti?(0,c.getClass)("multi",!0):(0,c.getClass)("single",!0)),this.elemWrap.className=e,this.elemWrap.dataset.countAll=this.$select.options.length.toString(),this.elemTop.className=(0,c.getClass)("top");var t=this.$select.parentNode;t&&(t.replaceChild(this.elemWrap,this.$select),this.elemWrap.appendChild(this.$select)),this.elemWrap.appendChild(this.elemTop),this.isNative?(this.$select.classList.add((0,c.getClass)("native",!0,this.classSelectInit)),this.elemWrap.classList.add((0,c.getClass)("native",!0))):(this.createDropDown(),this.createControlHTML(),this.createInputHTML()),this.createTitleHTML()}},{key:"createControlHTML",value:function(){if(this.elemDropDown&&this.isMulti&&(this.options.selectAll||this.options.resetAll)){this.elemControl=document.createElement("div"),this.elemControl.classList.add((0,c.getClass)("controls")),this.elemDropDown.insertBefore(this.elemControl,this.elemDropDown.childNodes[0]);var e=(0,c.getClass)("control");this.options.selectAll&&(this.elemSelectAll=(0,c.createButton)(),this.elemSelectAll.className="".concat(e," ").concat((0,c.getClass)("select_all",!0,e)),this.elemSelectAll.innerHTML='<span class="'.concat((0,c.getClass)("select_all__icon"),'"></span> ').concat(this.options.locale.selectAll),this.elemControl.appendChild(this.elemSelectAll)),this.options.resetAll&&(this.elemResetAll=(0,c.createButton)(),this.elemResetAll.className="".concat(e," ").concat((0,c.getClass)("reset_all",!0,e)),this.elemResetAll.innerHTML='<span class="'.concat((0,c.getClass)("reset_all__icon"),'"></span> ').concat(this.options.locale.resetAll),this.elemControl.appendChild(this.elemResetAll))}}},{key:"createIcon",value:function(){var e=document.createElement("span");e.className=(0,c.getClass)("icon"),this.elemTopBody.appendChild(e)}},{key:"createDropDown",value:function(){this.isNative||(this.elemDropDownWrap=document.createElement("div"),this.elemDropDownWrap.className=(0,c.getClass)("body"),this.options.isAlwaysOpen&&this.elemDropDownWrap.classList.add((0,c.getClass)("body-always_open",!0)),this.elemDropDown=document.createElement("div"),this.elemDropDown.className=(0,c.getClass)("body_wrap"),this.elemListBody=document.createElement("ul"),this.elemListBody.className=(0,c.getClass)("list"),this.elemDropDownWrap.append(this.elemDropDown),this.elemWrap.appendChild(this.elemDropDownWrap),this.elemDropDown.appendChild(this.elemListBody),this.elemDropDownClose=(0,c.createButton)(),this.elemDropDownClose.classList.add((0,c.getClass)("close")),this.elemDropDown.appendChild(this.elemDropDownClose),this.isMulti&&this.createIsConfirmInMultiHTML(),this.handlerChangeChecked())}},{key:"createIsConfirmInMultiHTML",value:function(){var e,t=document.createElement("div"),i=(0,c.getClass)("bottom_control");this.confirmOk=(0,c.createButton)(),this.confirmNo=(0,c.createButton)(),t.appendChild(this.confirmOk),t.appendChild(this.confirmNo),this.confirmOk.innerHTML=this.options.locale.ok,this.confirmNo.innerHTML=this.options.locale.cansel,this.confirmOk.className="".concat(i," ").concat((0,c.getClass)("ok",!0,i)),this.confirmNo.className="".concat(i," ").concat((0,c.getClass)("no",!0,i));var s=(0,c.getClass)("bottom_controls");this.options.isConfirmInMulti||(s+=" ".concat((0,c.getClass)("hide",!0,s))),t.className=s,null===(e=this.elemDropDown)||void 0===e||e.appendChild(t)}},{key:"createTitleHTML",value:function(){var e=this;if(!this.options.isRemoveTop){if(!this.elemTitle){this.elemTitle=document.createElement("div");var t=(0,c.getClass)("title");this.options.isOnlyPlaceholder&&(t+=" ".concat((0,c.getClass)("only-placeholder",!0,t))),this.elemTitle.className=t,this.elemTopBody.insertBefore(this.elemTitle,this.elemTopBody.childNodes[0])}var i=this.getChecked();this.elemTop.title="";var s=!i.length,n=this.titlePlaceholder;if(i.length&&!this.options.isOnlyPlaceholder){var l="";i.forEach((function(t,i){0!==i&&(l+="".concat(e.options.sepChars,'<span class="').concat((0,c.getClass)("sep_space",!0),'">&nbsp;</span>')),l+="".concat(t.title)})),this.elemTop.title=l;var o=this.options.countShowSelected,a=Number(this.$select.dataset.simpleCountShowsSelected);a&&a>0&&(o=a),i.length>o?(n="".concat(this.options.locale.selected," ").concat(i.length),this.$select.querySelectorAll("option").length===i.length&&(n+=" (".concat(this.options.locale.all,")"))):l&&(n=l)}this.elemTitle.innerHTML=n,s?(this.elemTitle.classList.add("SimpleSel__title--placeholder"),this.elemTitle.classList.remove("SimpleSel__title--fill"),this.elemWrap.classList.remove((0,c.getClass)("fill",!0))):(this.elemTitle.classList.remove("SimpleSel__title--placeholder"),this.elemTitle.classList.add("SimpleSel__title--fill"),this.elemWrap.classList.add((0,c.getClass)("fill",!0)))}}},{key:"createListHTML",value:function(){var e=this;if(this.elemListBody){var t="",i=0,s=0,n=0;this.state.getState("items").forEach((function(l){if(l.isGroup){var o=e.createLi(l),a=o.result,r=o.countShow,h=o.countChecked,u=o.countCheckedFull;t+='<div class="'.concat((0,c.getClass)("group_items"),'">'),t+=a,t+="</div>",s+=h,i+=r,n+=u}else{var p=e.createLi(l),d=p.result,m=p.countShow,f=p.countChecked,b=p.countCheckedFull;t+=d,i+=m,s+=f,n+=b}}));var l=this.state.getState("filterStr");l&&l.length&&0===i&&(t='<div class="'.concat((0,c.getClass)("no_match"),'">'),t="".concat(this.options.locale.noSearch,' "').concat(l,'"'),t+="</div>"),this.elemWrap.dataset.countChecked=s.toString(),this.elemWrap.dataset.countCheckedFull=n.toString(),this.isMulti&&(this.elemWrap.dataset.checkAllMulti=this.$select.options.length===s?"yes":"no"),t=(0,c.removeExtraSpaces)(t),this.elemListBody.innerHTML!==t&&(this.elemListBody.innerHTML=t)}}},{key:"createInputHTML",value:function(){var e=this.options.isSearch,t=this.options.isSearchInDropdown;if("simpleSelectSearch"in this.$select.dataset&&(e="false"!==this.$select.dataset.simpleSelectSearch),"simpleSelectSearchDropdown"in this.$select.dataset&&(t="false"!==this.$select.dataset.simpleSelectSearchDropdown),e||t){this.elemInputSearch=document.createElement("input"),this.elemInputSearch.type=this.options.searchTypeInput,this.elemInputSearch.tabIndex=-1,this.elemInputSearch.autocomplete="off",this.elemInputSearch.ariaAutoComplete="none",this.elemInputSearch.inputMode="off",this.elemInputSearch.placeholder=this.options.locale.searchText,this.elemInputSearch.name="".concat(u.initClass,"_name_").concat(this.id);var i=(0,c.getClass)("search");if(t){if(this.elemDropDown){var s=document.createElement("div");s.className=(0,c.getClass)("search_wrap"),this.elemInputSearch.className="".concat(i," ").concat((0,c.getClass)("dropdown",!0,i)),s.appendChild(this.elemInputSearch),this.elemDropDown.insertBefore(s,this.elemDropDown.childNodes[0])}}else this.elemInputSearch.className="".concat(i," ").concat((0,c.getClass)("top",!0,i)),this.elemTop.appendChild(this.elemInputSearch);this.inputSearchHandler()}}},{key:"getChecked",value:function(){var e=this.state.getState("items"),t=[];return e.forEach((function(e){t=[].concat(n(t),n(e.items.filter((function(e){return e.checked}))))})),t}},{key:"createLi",value:function(e){var t=this,i="",s=0,n=0,l=0;return e.isShowFilter?(e.isGroup&&(i+='<label class="'.concat((0,c.getClass)("group_title"),'">').concat(e.titleGroup,"</label>"),i+='<ul class="'.concat((0,c.getClass)("group"),'">')),e.items.forEach((function(o){if(o.isShowFilter){s++;var a=(0,c.getClass)("list_item"),r=a;o.checked&&(n++,r+=" ".concat((0,c.getClass)("checked",!0,a)),o.value&&l++),o.disabled&&(r+=" ".concat((0,c.getClass)("disabled",!0,a))),o.value||(r+=" ".concat((0,c.getClass)("not_value",!0,a)));var h='data-sel-group-id="'.concat(e.idGroup,'"');h+="data-sel-opt-item",h+=' data-sel-position="'.concat(o.position,'"'),h+=' data-sel-id="'.concat(o.id,'"'),o.value&&(h+=' data-sel-value="'.concat(o.value,'"')),h+=' data-sel-opt-checked="'.concat(o.checked,'"'),h+=' data-sel-opt-disabled="'.concat(o.disabled,'"'),t.options.isAlwaysOpen?h+=' data-sssssssssssssss="fff" tabindex="0"':h+=' tabindex="-1"',i+='<li class="'.concat(r,'" ').concat(h,">");var u=t.createLiBody(o,t.$select.options[o.position]);i+="string"==typeof u?u:u.outerHTML,i+="</li>"}})),e.isGroup&&(i+="</ul>"),{result:i,countShow:s,countChecked:n,countCheckedFull:l}):{result:i,countShow:s,countChecked:n,countCheckedFull:l}}},{key:"createLiBody",value:function(e,t){var i=document.createElement("div");i.className=(0,c.getClass)("list_item_body");var s="";return this.isShowCheckbox&&(s='<span class="'.concat((0,c.getClass)("list_item_icon"),'"></span>')),this.bodyLiHTMLBeforeFromSelect&&(s+=this.bodyLiHTMLBeforeFromSelect),t.hasAttribute("data-simple-html-before")&&(s+=t.getAttribute("data-simple-html-before")),s+="".concat(e.title),this.bodyLiHTMLAfterFromSelect&&(s+=this.bodyLiHTMLAfterFromSelect),t.hasAttribute("data-simple-html-after")&&(s+=t.getAttribute("data-simple-html-after")),i.innerHTML=s,this.options.changeBodyLi?this.options.changeBodyLi(i,t):i}},{key:"handlerChangeChecked",value:function(){console.error("This method need redefine")}},{key:"createList",value:function(e){console.error("This method need redefine")}},{key:"inputSearchHandler",value:function(){console.error("This method need redefine")}}])&&o(t.prototype,i),s&&o(t,s),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.SimpleSelectItemDOM=p},679:function(e,t,i){Object.defineProperty(t,"__esModule",{value:!0}),t.createButton=t.cloneObj=t.compareObj=t.getClass=t.getCreateListItem=t.triggerInputEvent=t.ifTrueDataAttr=t.createDataAttr=t.removeExtraSpaces=t.toCamelCase=void 0;var s=i(737);t.toCamelCase=function(e){return e.replace(/-([a-z])/g,(function(e,t){return t.toUpperCase()}))};t.removeExtraSpaces=function(e){return e.replace(/\s+/g," ").trim()};t.createDataAttr=function(e){return"data-".concat(e)};t.ifTrueDataAttr=function(e){return!!e&&("true"===e||"1"===e)},t.triggerInputEvent=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"change";try{var i=new Event(t,{bubbles:!0,cancelable:!0});e.dispatchEvent(i)}catch(i){var s=new CustomEvent(t,{bubbles:!0,cancelable:!0});e.dispatchEvent(s)}};t.getCreateListItem=function(e,t,i){var s=e.querySelectorAll("option"),n=[];s.forEach((function(e,t){n.push({id:(t+1).toString(),position:e.index,title:e.innerHTML,value:e.getAttribute("value"),checked:e.selected,disabled:e.disabled,isShowFilter:!0})}));var l={isGroup:i,idGroup:t,items:n,isShowFilter:!0};return e instanceof HTMLOptGroupElement&&(l.titleGroup=e.label||"",l.isDisabledGroup=e.disabled||!1),l};t.getClass=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:s.initClass,n=t?"--":"__";return"".concat(i).concat(n).concat(e)};t.compareObj=function(e,t){return JSON.stringify(e)===JSON.stringify(t)};t.cloneObj=function(e){return JSON.parse(JSON.stringify(e))};t.createButton=function(){var e=document.createElement("button");return e.type="button",e.tabIndex=-1,e}},972:function(e,t){function i(e){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i(e)}function s(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,s)}return i}function n(e,t,s){return(t=function(e){var t=function(e,t){if("object"!==i(e)||null===e)return e;var s=e[Symbol.toPrimitive];if(void 0!==s){var n=s.call(e,t||"default");if("object"!==i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===i(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[t]=s,e}Object.defineProperty(t,"__esModule",{value:!0}),t.store=void 0,t.store=function(e){var t={},i={},l=[],o=function(e){return e?e in t?t[e]:null:t},a=function(e,o){var a=function(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?s(Object(i),!0).forEach((function(t){n(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):s(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}({},t),r=t[e]||0==t[e]?t[e]:null;t[e]=o,e in i&&i[e].forEach((function(e){return e(o,r,t)})),l.forEach((function(i){return i(e,a,t)}))};return e&&Object.keys(e).forEach((function(t){a(t,e[t])})),{getState:o,setState:a,subscribe:function(e,t){e in i||(i[e]=[]),i[e].push(t);var s=o(e);return t(s,null,o()),function(){i[e]=i[e].filter((function(e){return e!==t}))}},subscribeAll:function(e){return l.push(e),e(null,null,o()),function(){l=l.filter((function(t){return t!==e}))}},unSubscribe:function(e,t){e in i&&(i[e]=i[e].filter((function(e){return e!==t})))}}}},181:function(e,t,i){i.r(t)}},t={};function i(s){var n=t[s];if(void 0!==n)return n.exports;var l=t[s]={exports:{}};return e[s](l,l.exports,i),l.exports}i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};return function(){var e=s;function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t(e)}function n(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,s)}return i}function l(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?n(Object(i),!0).forEach((function(t){a(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):n(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function o(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,r(s.key),s)}}function a(e,t,i){return(t=r(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function r(e){var i=function(e,i){if("object"!==t(e)||null===e)return e;var s=e[Symbol.toPrimitive];if(void 0!==s){var n=s.call(e,i||"default");if("object"!==t(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===i?String:Number)(e)}(e,"string");return"symbol"===t(i)?i:String(i)}var c=i(737),h=i(679),u=i(874);i(181);var p=function(){function e(t,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),a(this,"callCount",Date.now()),a(this,"countInit",0),a(this,"$selects",[]),a(this,"options",void 0),a(this,"nameMarkTransform",(0,h.toCamelCase)(c.nameMark)),a(this,"dataNameMark",(0,h.createDataAttr)(c.nameMark)),a(this,"isNative",void 0),t||(t="select"),this.options=l(l({},c.simpleSelectionOptions),i),"string"==typeof t?this.init(Array.from(document.querySelectorAll(t))):t instanceof HTMLSelectElement?this.init([t]):t instanceof NodeList?this.init(Array.from(t)):Array.isArray(t)?this.init(t):console.warn("Wrong selector: ",t)}var t,i,s;return t=e,(i=[{key:"detectMobile",value:function(){if(this.options.detectNative)this.isNative=this.options.detectNative();else{for(var e=navigator.userAgent||navigator.vendor||window.opera,t=!1,i=0;i<this.options.nativeOnDevice.length;i++)e.toString().toLowerCase().indexOf(this.options.nativeOnDevice[i].toLowerCase())>0&&this.options.nativeOnDevice[i]&&(t=!0);this.isNative=t}}},{key:"init",value:function(e){var t=this;this.detectMobile(),e.forEach((function(e){t.build(e)}))}},{key:"createMethods",value:function(e){var t=this;return{getNativeSelect:function(){return e.getSelect()},reload:function(){t.rebuild(e)},update:function(){e.updateHTML()},detach:function(){t.detach(e)}}}},{key:"setMethods",value:function(e){e.$select[c.nameSelect]=this.createMethods(e)}},{key:"setMethodsClear",value:function(e){delete e.$select[c.nameSelect]}},{key:"build",value:function(e){if(this.nameMarkTransform in e.dataset)console.warn("This element has already been initialized",e);else{this.countInit+=1;var t="".concat(this.callCount,"-").concat(this.countInit);e.setAttribute(this.dataNameMark,t);var i=new u.SimpleSelectItem(e,this.options,{id:t,isNative:this.isNative});this.$selects.push(i),this.setMethods(i)}}},{key:"detach",value:function(e){e.detachItem(),e.$select.removeAttribute(this.dataNameMark),this.setMethodsClear(e),this.$selects=this.$selects.filter((function(t){return t!==e}))}},{key:"rebuild",value:function(e){var t=e.$select;this.detach(e),this.build(t)}},{key:"getSelects",value:function(){return this.$selects}},{key:"getSelectFirst",value:function(){return this.createMethods(this.$selects[0])}},{key:"getSelectById",value:function(e){var t=this.$selects.filter((function(t){return t.id===e}))[0];return t?this.createMethods(t):null}}])&&o(t.prototype,i),s&&o(t,s),Object.defineProperty(t,"prototype",{writable:!1}),e}();e.default=p}(),s=s.default}()}));
package/dist/style.css CHANGED
@@ -1 +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:all .25s;transition:all .25s;visibility:hidden;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;visibility:visible}.SimpleSel__search_wrap{padding:5px 10px}.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}
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{-webkit-box-sizing:border-box;box-sizing:border-box}.SimpleSel--float .SimpleSel__select_init{visibility:hidden}.SimpleSel__select_init{-webkit-box-sizing:border-box;box-sizing:border-box;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--always_open .SimpleSel__icon{display:none}.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:all .25s;transition:all .25s;visibility:hidden;width:100%;z-index:3}.SimpleSel--body-always_open{max-height:none;opacity:1;position:relative;top:auto;visibility:visible}.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;visibility:visible}.SimpleSel__search_wrap{padding:5px 10px}.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/dist/types/simpleSelect.types.d.ts CHANGED
@@ -14,12 +14,14 @@ export interface ISimpleSelectOptions {
14
14
  countShowSelected: number;
15
15
  isConfirmInMulti: boolean;
16
16
  isConfirmInMultiOkClickOutside: boolean;
17
+ searchTypeInput: string;
17
18
  isSearch: boolean;
18
19
  isSearchInDropdown: boolean;
19
20
  nativeOnDevice: string[];
20
21
  locale: ISimpleSelectLocale;
21
22
  debounceTime?: number;
22
23
  floatWidth?: number;
24
+ isRemoveTop: boolean;
23
25
  sepChars: string;
24
26
  selectAll: boolean;
25
27
  selectAllAfterClose: boolean;
@@ -28,6 +30,7 @@ export interface ISimpleSelectOptions {
28
30
  isCloneClass: boolean;
29
31
  isOnlyPlaceholder: boolean;
30
32
  isUp: boolean;
33
+ isAlwaysOpen: boolean;
31
34
  detectNative?: () => boolean;
32
35
  callbackInitialization?: (item: SimpleSelectItem) => void;
33
36
  callbackInitialized?: (item: SimpleSelectItem) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "simp-select",
3
- "version": "1.0.11",
3
+ "version": "1.0.13",
4
4
  "description": "simp-select - this plugin replaces the select",
5
5
  "main": "dist/simpleSelect.js",
6
6
  "types": "dist/simpleSelect.d.ts",
package/src/const/simpleSelection.const.ts CHANGED
@@ -13,11 +13,14 @@ export const simpleSelectLocale: ISimpleSelectLocale = {
13
13
  };
14
14
  export const simpleSelectionOptions: ISimpleSelectOptions = {
15
15
  isSearch: false,
16
+ searchTypeInput: 'search',
16
17
  isSearchInDropdown: false,
17
18
 
18
19
  countShowSelected: 3,
19
20
  isOnlyPlaceholder: false,
20
21
 
22
+ isRemoveTop: false,
23
+
21
24
  isConfirmInMulti: false,
22
25
  isConfirmInMultiOkClickOutside: false,
23
26
 
@@ -27,6 +30,8 @@ export const simpleSelectionOptions: ISimpleSelectOptions = {
27
30
  sepChars: ',',
28
31
  isUp: false,
29
32
 
33
+ isAlwaysOpen: false,
34
+
30
35
  floatWidth: 767,
31
36
  isCloneClass: true,
32
37
  selectAll: false,
package/src/demo/index.html CHANGED
@@ -37,6 +37,7 @@
37
37
  max-width: 600px;
38
38
  }
39
39
  .item {
40
+ display: block;
40
41
  width: 250px;
41
42
  }
42
43
  </style>
@@ -133,6 +134,79 @@
133
134
  </select>
134
135
  </div>
135
136
 
137
+ </div>
138
+
139
+ <div>
140
+ <p>Group checkbox</p>
141
+
142
+ <div class="items">
143
+ <label class="item">
144
+ <select
145
+ data-simple-select-search-dropdown="true"
146
+ data-simple-show-checkbox="true"
147
+ data-simple-always-open="true"
148
+ class="color_red"
149
+ data-simple-add-classes="class1"
150
+
151
+ data-simple-select-search="false"
152
+ >
153
+ <optgroup label="Группа 1">
154
+ <option value="1">Опция 6.1</option>
155
+ </optgroup>
156
+ <optgroup label="Группа 2">
157
+ <option value="1">Опция 6.1</option>
158
+ <option value="1">Опция 6.2</option>
159
+ </optgroup>
160
+ <optgroup label="Группа 3" disabled>
161
+ <option value="1">Опция 6.1</option>
162
+ <option value="1">Опция 6.2</option>
163
+ <option value="1">Опция 6.3</option>
164
+ </optgroup>
165
+ </select>
166
+ </label>
167
+ <label class="item">
168
+ <select
169
+ data-simple-select-search="true"
170
+ data-simple-always-open="true"
171
+ multiple
172
+ >
173
+ <optgroup label="Группа 1">
174
+ <option value="1">Опция 7.1</option>
175
+ </optgroup>
176
+ <optgroup label="Группа 2">
177
+ <option value="1">Опция 7.1</option>
178
+ <option value="1">Опция 7.2</option>
179
+ </optgroup>
180
+ <optgroup label="Группа 3" disabled>
181
+ <option value="1">Опция 7.1</option>
182
+ <option value="1">Опция 7.2</option>
183
+ <option value="1">Опция 7.3</option>
184
+ </optgroup>
185
+ </select>
186
+ </label>
187
+ <label class="item">
188
+ <select
189
+ data-simple-select-search-dropdown="true"
190
+ data-simple-always-open="true"
191
+ data-simple-remove-top="true"
192
+ multiple
193
+ >
194
+ <optgroup label="Группа 1">
195
+ <option value="1">Опция 8.1</option>
196
+ </optgroup>
197
+ <optgroup label="Группа 2">
198
+ <option value="1">Опция 8.1</option>
199
+ <option value="1">Опция 8.2</option>
200
+ </optgroup>
201
+ <optgroup label="Группа 3" disabled>
202
+ <option value="1">Опция 8.1</option>
203
+ <option value="1">Опция 8.2</option>
204
+ <option value="1">Опция 8.3</option>
205
+ </optgroup>
206
+ </select>
207
+ </label>
208
+ </div>
209
+ </div>
136
210
 
137
211
  <!--
138
212
 
@@ -174,7 +248,6 @@
174
248
  </div>
175
249
  </div>
176
250
  -->
177
- </div>
178
251
 
179
252
  <script>
180
253
 
package/src/simpleSelectItem.ts CHANGED
@@ -79,7 +79,7 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
79
79
  this.filterList(val);
80
80
  });
81
81
 
82
- if (!this.isNative) {
82
+ if (!this.isNative && !this.options.isAlwaysOpen) {
83
83
  this.elemTopBody.onclick = this.clickToggleOpen.bind(this);
84
84
  this.elemTopBody.onkeyup = this.clickToggleOpen.bind(this);
85
85
  }
@@ -130,6 +130,26 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
130
130
  if (this.elemDropDownClose) {
131
131
  this.elemDropDownClose.onclick = this.closeHandler.bind(this);
132
132
  }
133
+
134
+ if (this.elemListBody) {
135
+ this.elemListBody.addEventListener('keyup', (e) => {
136
+ if (e.key === 'Enter') {
137
+ const target = e.target as HTMLLIElement;
138
+ if (target && toCamelCase('sel-opt-item') in target.dataset) {
139
+ e.preventDefault();
140
+ e.stopPropagation();
141
+ this.changeClickItem(target);
142
+
143
+ // set active (focus) element
144
+ const oldId = target.dataset[toCamelCase('sel-position')];
145
+ const newEl: HTMLElement | null = this.elemListBody!.querySelector(`[data-sel-position="${oldId}"]`);
146
+ if (newEl) {
147
+ newEl.focus();
148
+ }
149
+ }
150
+ }
151
+ });
152
+ }
133
153
  }
134
154
 
135
155
  debounce<T extends (
@@ -251,7 +271,8 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
251
271
  this.multiDebounceChange();
252
272
  }
253
273
  } else {
254
- option.selected = !option.selected;
274
+ // option.selected = !option.selected;
275
+ option.selected = true;
255
276
  this.createList();
256
277
  this.state.setState('isOpen', false);
257
278
  this.triggerInit();
@@ -318,14 +339,16 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
318
339
  e.stopPropagation();
319
340
  this.keyBoardChangeChecked(e.key === 'ArrowDown');
320
341
  }
321
- if (e.key === 'Enter') {
322
- const target = e.target as HTMLLIElement;
323
- if (target && toCamelCase('sel-opt-item') in target.dataset) {
324
- e.preventDefault();
325
- e.stopPropagation();
326
- this.changeClickItem(target);
327
- }
328
- }
342
+ // if (e.key === 'Enter') {
343
+ // const target = e.target as HTMLLIElement;
344
+ // console.log('yura target', target);
345
+ // console.log('yura target', toCamelCase('sel-opt-item') in target.dataset);
346
+ // if (target && toCamelCase('sel-opt-item') in target.dataset) {
347
+ // e.preventDefault();
348
+ // e.stopPropagation();
349
+ // this.changeClickItem(target);
350
+ // }
351
+ // }
329
352
  }
330
353
 
331
354
  keyBoardChangeChecked(isDown: boolean) {
package/src/simpleSelectItemDOM.ts CHANGED
@@ -164,10 +164,20 @@ export class SimpleSelectItemDOM {
164
164
  if (this.$select.hasAttribute('data-simple-up')) {
165
165
  this.options.isUp = ifTrueDataAttr(this.$select.getAttribute('data-simple-up'));
166
166
  }
167
-
168
167
  if (this.$select.hasAttribute('data-simple-is-only-placeholder')) {
169
168
  this.options.isOnlyPlaceholder = ifTrueDataAttr(this.$select.getAttribute('data-simple-is-only-placeholder'));
170
169
  }
170
+ if (this.$select.hasAttribute('data-simple-remove-top')) {
171
+ this.options.isRemoveTop = ifTrueDataAttr(this.$select.getAttribute('data-simple-remove-top'));
172
+ }
173
+
174
+ if (this.$select.hasAttribute('data-simple-always-open')) {
175
+ this.options.isAlwaysOpen = ifTrueDataAttr(this.$select.getAttribute('data-simple-always-open'));
176
+
177
+ this.isNative = false;
178
+ this.isFloatWidth = false;
179
+ this.options.floatWidth = 0;
180
+ }
171
181
  }
172
182
 
173
183
  initDom() {
@@ -196,7 +206,7 @@ export class SimpleSelectItemDOM {
196
206
  }
197
207
 
198
208
  toggleTabIndex(isOpen: boolean) {
199
- const tabIndex = isOpen ? 0 : -1;
209
+ const tabIndex = isOpen || this.options.isAlwaysOpen ? 0 : -1;
200
210
 
201
211
  if (this.state.getState('isFloat')) {
202
212
  if (isOpen) {
@@ -235,7 +245,10 @@ export class SimpleSelectItemDOM {
235
245
  this.elemTopBody.tabIndex = this.isDisabled ? -1 : 0;
236
246
 
237
247
  this.createIcon();
238
- this.elemTop.appendChild(this.elemTopBody);
248
+
249
+ if (!this.options.isRemoveTop) {
250
+ this.elemTop.appendChild(this.elemTopBody);
251
+ }
239
252
  let resClassesWrap = initClass;
240
253
  if (this.options.isCloneClass) {
241
254
  resClassesWrap += ` ${this.cloneClasses}`;
@@ -246,6 +259,9 @@ export class SimpleSelectItemDOM {
246
259
  if (this.isDisabled) {
247
260
  resClassesWrap += ` ${getClass('disabled', true)}`;
248
261
  }
262
+ if (this.options.isAlwaysOpen) {
263
+ resClassesWrap += ` ${getClass('always_open', true)}`;
264
+ }
249
265
  if (this.options.isUp) {
250
266
  resClassesWrap += ` ${getClass('up', true)}`;
251
267
  }
@@ -323,6 +339,11 @@ export class SimpleSelectItemDOM {
323
339
  this.elemDropDownWrap = document.createElement('div');
324
340
  this.elemDropDownWrap.className = getClass('body');
325
341
 
342
+ if (this.options.isAlwaysOpen) {
343
+ this.elemDropDownWrap.classList.add(getClass('body-always_open', true));
344
+ // resClassesWrap += ` ${getClass('always_open', true)}`;
345
+ }
346
+
326
347
  this.elemDropDown = document.createElement('div');
327
348
  this.elemDropDown.className = getClass('body_wrap');
328
349
  this.elemListBody = document.createElement('ul');
@@ -369,6 +390,10 @@ export class SimpleSelectItemDOM {
369
390
  }
370
391
 
371
392
  private createTitleHTML() {
393
+ if (this.options.isRemoveTop) {
394
+ return;
395
+ }
396
+
372
397
  if (!this.elemTitle) {
373
398
  this.elemTitle = document.createElement('div');
374
399
  let classesTitle = getClass('title');
@@ -490,7 +515,7 @@ export class SimpleSelectItemDOM {
490
515
  return;
491
516
  }
492
517
  this.elemInputSearch = document.createElement('input');
493
- this.elemInputSearch.type = 'text';
518
+ this.elemInputSearch.type = this.options.searchTypeInput;
494
519
  this.elemInputSearch.tabIndex = -1;
495
520
  this.elemInputSearch.autocomplete = 'off';
496
521
  this.elemInputSearch.ariaAutoComplete = 'none';
@@ -569,6 +594,7 @@ export class SimpleSelectItemDOM {
569
594
  }
570
595
 
571
596
  let dataAttr = `data-sel-group-id="${data.idGroup}"`;
597
+ dataAttr += 'data-sel-opt-item';
572
598
  dataAttr += ` data-sel-position="${option.position}"`;
573
599
  dataAttr += ` data-sel-id="${option.id}"`;
574
600
 
@@ -576,10 +602,15 @@ export class SimpleSelectItemDOM {
576
602
  dataAttr += ` data-sel-value="${option.value}"`;
577
603
  }
578
604
 
579
- dataAttr += ' data-sel-opt-item=""';
580
605
  dataAttr += ` data-sel-opt-checked="${option.checked}"`;
581
606
  dataAttr += ` data-sel-opt-disabled="${option.disabled}"`;
582
607
 
608
+ if (this.options.isAlwaysOpen) {
609
+ dataAttr += ' data-sssssssssssssss="fff" tabindex="0"';
610
+ } else {
611
+ dataAttr += ' tabindex="-1"';
612
+ }
613
+
583
614
  result += `<li class="${classLi}" ${dataAttr}>`;
584
615
  const createLiBodyRes = this.createLiBody(option, this.$select.options[option.position]);
585
616
  result += typeof createLiBodyRes === 'string' ? createLiBodyRes : createLiBodyRes.outerHTML;
package/src/style.css CHANGED
@@ -46,6 +46,10 @@
46
46
  box-sizing: border-box;
47
47
  }
48
48
 
49
+ .SimpleSel--float .SimpleSel__select_init {
50
+ visibility: hidden;
51
+ }
52
+
49
53
  .SimpleSel__select_init {
50
54
  position: absolute;
51
55
  opacity: 0;
@@ -191,6 +195,10 @@
191
195
  transform: rotate(225deg) translate(-50%,-50%);
192
196
  }
193
197
 
198
+ .SimpleSel--always_open .SimpleSel__icon {
199
+ display: none;
200
+ }
201
+
194
202
  .SimpleSel__list_item--not_value,
195
203
  .SimpleSel--single[data-count-checked-full="0"] .SimpleSel__title,
196
204
  .SimpleSel__title--placeholder {
@@ -212,6 +220,13 @@
212
220
  border-radius: var(--simpS_radius);
213
221
  background-color: var(--simpS_bg);
214
222
  }
223
+ .SimpleSel--body-always_open {
224
+ max-height: none;
225
+ position: relative;
226
+ top: auto;
227
+ opacity: 1;
228
+ visibility: visible;
229
+ }
215
230
 
216
231
  .SimpleSel:not(.SimpleSel--up) .SimpleSel--multi {
217
232
  top: 100%;
package/src/types/simpleSelect.types.ts CHANGED
@@ -18,6 +18,7 @@ export interface ISimpleSelectOptions {
18
18
  isConfirmInMulti: boolean;
19
19
  isConfirmInMultiOkClickOutside: boolean;
20
20
 
21
+ searchTypeInput: string;
21
22
  isSearch: boolean;
22
23
  isSearchInDropdown: boolean;
23
24
  nativeOnDevice: string[];
@@ -27,6 +28,8 @@ export interface ISimpleSelectOptions {
27
28
 
28
29
  floatWidth?: number;
29
30
 
31
+ isRemoveTop: boolean,
32
+
30
33
  sepChars: string;
31
34
 
32
35
  selectAll: boolean;
@@ -38,6 +41,8 @@ export interface ISimpleSelectOptions {
38
41
  isOnlyPlaceholder: boolean;
39
42
  isUp: boolean;
40
43
 
44
+ isAlwaysOpen: boolean;
45
+
41
46
  detectNative?: () => boolean;
42
47
 
43
48
  callbackInitialization?: (item:SimpleSelectItem) => void;