pull 30.12

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 .parcel-cache
+

CHANGELOG.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## 16.12.2022 - релиз версии 0.1.0!
+### 16.12.2022 - релиз версии 0.1.0!
 
 ### 20.12.2022 - обновление 0.1.12.
 
@@ -12,3 +12,11 @@
 
 - Изменеия в расположении файлов scss.
 - Исправлено влияние стилей селекта на JS приложение.
+
+### 29.12.2022 - обновление 0.1.17
+
+- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select).
+- Добавленна возможность менять отображения листа с выбором (обычный/модальное окно).
+- Исправленны выявленные баги.
+- Исправленно отображение страницы с примером на мобильных устройствах.
+- Обновленна документация!

README.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.1.14
+## version ~ 0.1.171
 
 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта.
 Доступна кастомизация, мультивыбор и живой поиск по елементам.
@@ -74,9 +74,9 @@ const dropdown = new DropDown({
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png)
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
 
-Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select.
+Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Так же её можно открыть на странице с примером, или перейти по ссылке ниже.
 
-**Чтобы ознакомиться с ней, перейдите по ссылке -** https://cg-select.itguild.info/up_/up_/documentation/index.html
+**Чтобы ознакомиться с ней, перейдите по ссылке -** https://cg-select.itguild.info/up_/documentation/index.html
 
 ## Contributing
 
@@ -88,10 +88,10 @@ const dropdown = new DropDown({
 
 ## Compatibility
 
-Совместимость с приложениями |  JS  |  React  | Angular |  Vue |
+| Совместимость с приложениями |                                    JS                                    |                                                                      React                                                                       |                                 Angular                                 |                                   Vue                                   |
-| -------------------------- | :--: | :-----: | :-----: | :--: |
+| ---------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
 | CG-SELECT                    | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
-| Комментарий                | Протестирован в Js приложениях и работает успешно.|Работает только с костылем в виде `setTimeout()` | тесты не проведены| тесты не проведены |
+| Комментарий                  |            Протестирован в Js приложениях и работает успешно.            |                                                 Работает только с костылем в виде `setTimeout()`                                                 |                             пока недоступно                             |                           тесты не проведены                            |
 
 ## History
 

documentation/DropDown.html

@@ -110,10 +110,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -134,10 +131,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/cg-dropdown.js.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>JSDoc: Source: cg-dropdown.js</title>
+    <title>JSDoc: Source: cg-select.js</title>
 
     <script src="scripts/prettify/prettify.js"></script>
     <script src="scripts/prettify/lang-css.js"></script>
@@ -15,7 +15,7 @@
 
   <body>
     <div id="main">
-      <h1 class="page-title">Source: cg-dropdown.js</h1>
+      <h1 class="page-title">Source: cg-select.js</h1>
 
       <section>
         <article>
@@ -116,7 +116,9 @@
                 darkTheme: true/false,
                 searchMode: true/false,
                 closeOnSelect:  true/false,
-                lenguage: 'ru/en',
+                nativeSelectMode: true/false,
+                listDisplayMode: true/false,
+                language: 'ru/en',
                 styles: {
                   head: {
                     background: '...',
@@ -238,11 +240,14 @@
               }
           
               const select = this.#element.querySelector('.cg-select');
+              const nativeSelect = this.#element.querySelector('.nativeSelect');
               if (value === true) {
                 this.#element.setAttribute('disabled', true);
+                nativeSelect.setAttribute('disabled', true);
                 select.classList.add('disabled');
               } else {
                 this.#element.removeAttribute('disabled');
+                nativeSelect.removeAttribute('disabled');
                 select.classList.remove('disabled');
               }
             }
@@ -255,11 +260,18 @@
              * @method buttonControl
              */
             buttonControl(button, method) {
+              const {listDisplayMode} = this.#options;
+          
+          
+              if(listDisplayMode === true){
+                return
+              }
+          
               this.btn = button;
               button.addEventListener('click', () => {
-                if (method === 'open') {
+                if (method.toLowerCase() === 'open') {
                   this.#open(true);
-                } else if (method === 'close') {
+                } else if (method.toLowerCase() === 'close') {
                   this.#close();
                 } else {
                   return;
@@ -269,14 +281,18 @@
           
             /**
              * Метод экземпляра класса DropDown
-             * @param {object} lenguage объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
+             * @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
              * @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
-             * @method addLenguage
+             * @method addLanguage
              */
-            addLenguage(lenguage) {
+            addLanguage(language) {
-              const { placeholder, textInListSearch } = lenguage;
+              const { placeholder, textInListSearch, selectPlaceholder } = language;
               const { searchMode } = this.#options;
           
+              const select = this.#element.querySelector('.selected');
+              const textNodeSelect = document.createTextNode(selectPlaceholder);
+              select.appendChild(textNodeSelect);
+          
               if (searchMode &amp;&amp; searchMode == true) {
                 const search = this.#element.querySelector('.inputSearch');
                 const textNoRezult = this.#element.querySelector('.noRezult');
@@ -323,9 +339,10 @@
           
               const elem = document.querySelector(options.selector);
           
-              if (!elem) {
+              //TODO: для теста в реакте нужно пересмотреть необходимость этой проверки!
-                throw new Error(`Element with selector ${options.selector}`);
+              // if (!elem) {
-              }
+              //   throw new Error(`Element with selector ${options.selector}`);
+              // }
           
               this.#element = elem;
           
@@ -368,14 +385,18 @@
              * @protected
              */
             #initSelected(select) {
-              const { styles, selected, placeholder, lable } = this.#options;
+              const { styles, selected, placeholder, lable, language } = this.#options;
           
               if (selected) {
                 createSelected(this.#element, selected);
               } else if (placeholder) {
                 createSelected(this.#element, placeholder);
               } else {
-                createSelected(this.#element, 'Select...');
+                if (language &amp;&amp; language === 'ru') {
+                  createSelected(this.#element, ru.selectPlaceholder);
+                } else {
+                  createSelected(this.#element, en.selectPlaceholder);
+                }
               }
           
               if (select) {
@@ -405,7 +426,13 @@
              * @description Рендер елементов в селекте.
              */
             #render(select) {
-              const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options;
+              const { 
+                styles, multiselect, 
+                searchMode, multiselectTag, 
+                darkTheme, language, 
+                nativeSelectMode, listDisplayMode 
+              } = this.#options;
+          
               const random = Math.random().toString(36).substring(2, 10);
           
               if (select || (select &amp;&amp; styles)) {
@@ -422,12 +449,13 @@
               this.random = random;
           
               if (searchMode) {
-                if (lenguage === 'ru') {
+                if (language === 'ru') {
                   inputSearch = createInputSearch(random, ru.placeholder);
                 } else {
                   inputSearch = createInputSearch(random, en.placeholder);
                 }
-          
+                const { search } = styles;
+                customStylesFormat(search, inputSearch);
                 ulList.appendChild(inputSearch);
               }
           
@@ -491,9 +519,19 @@
                 this.#checkTheme();
               }
           
+              if(nativeSelectMode === true){
+                this.#selectMode(nativeSelectMode);
+              }
+          
+          
+          
               this.#list = this.#element.querySelector('.list');
               this.#caret = this.#element.querySelector('.caret');
           
+              if(listDisplayMode === true){
+                this.#displayMode(listDisplayMode)
+              }
+          
               this.#addOptionsBehaviour();
             }
           
@@ -751,14 +789,14 @@
              * @method #searchMode
              */
             #searchMode(random) {
-              const { lenguage } = this.#options;
+              const { language } = this.#options;
           
               const input = this.#element.querySelector(`#searchSelect-${random}`);
               const searchSelect = this.#element.querySelectorAll('.list__item');
               const result = document.createElement('p');
           
               let textNode = '';
-              if (lenguage === 'ru') {
+              if (language &amp;&amp; language === 'ru') {
                 textNode = document.createTextNode(`${ru.textInListSearch}`);
               } else {
                 textNode = document.createTextNode(`${en.textInListSearch}`);
@@ -774,17 +812,22 @@
               });
           
               input.oninput = function () {
-                let val = this.value.trim();
+                let valueSearch = this.value.trim().toLowerCase();
+                let anyMatch = false;
           
-                if (val != '') {
+                if (valueSearch != '') {
                   searchSelect.forEach((elem) => {
-                    if (elem.innerText.search(val) == -1) {
+                    let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent);
+                    anyMatch = anyMatch || isMatching;
+          
+                    if (elem.textContent.toLowerCase().search(valueSearch) == -1) {
                       elem.classList.add('displayHide');
-                      result.classList.remove('displayHide');
                     } else {
                       elem.classList.remove('displayHide');
                     }
                   });
+          
+                  result.classList.toggle('displayHide', anyMatch);
                 } else {
                   searchSelect.forEach((elem) => {
                     elem.classList.remove('displayHide');
@@ -838,6 +881,64 @@
                 }
               });
             }
+          
+            /**
+             * Приватный метод экземпляра класса DropDown
+             * @protected
+             * @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
+             * @description Изменяет отображение селекта на мобильных устройствах
+             * @method #selectMode
+             */
+            #selectMode(nativeSelectMode){
+              let win = window.outerWidth;
+          
+              if(nativeSelectMode === true){
+                const select = this.#element.querySelector('.cg-select');
+                const list = this.#element.querySelector('.list');
+                const nativeSelect = this.#element.querySelector('.nativeSelect')
+          
+                if(win &lt; 576){
+                  select.classList.add('displayHide');
+                  list.classList.add('displayHide');
+                  nativeSelect.classList.add('nativeSelectActive');       
+                } else if( win > 576){
+                  select.classList.remove('displayHide');
+                  list.classList.remove('displayHide');
+                  nativeSelect.classList.remove('nativeSelectActive');
+                  nativeSelect.classList.add('displayHide');
+                }
+              } else{
+                return
+              }
+          
+            }
+          
+            /**
+             * Приватный метод экземпляра класса DropDown
+             * @protected
+             * @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
+             * @description Изменяет отображение листа с выбором в виде модального окна.
+             * @method #displayMode
+             */
+            #displayMode(listDisplayMode){
+              if(listDisplayMode === true){
+                const modal = document.createElement('div');
+                const body = document.querySelector('body')
+                const list = this.#list;
+            
+                modal.appendChild(list);
+                this.#element.appendChild(modal);
+          
+                this.#element.addEventListener('click', () => {
+                  modal.classList.toggle('modal');
+                  list.classList.toggle('listModal');
+                  body.classList.toggle('overflowHide')
+                });
+              } else{
+                return
+              }
+          
+            }
           }
 </code></pre>
         </article>
@@ -850,10 +951,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -874,10 +972,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/constructor.html

@@ -86,7 +86,9 @@
               darkTheme: true/false,
               searchMode: true/false,
               closeOnSelect:  true/false,
-      lenguage: 'ru/en',
+              nativeSelectMode: true/false,
+              listDisplayMode: true/false,
+              language: 'ru/en',
               styles: {
                 head: {
                   background: '...',
@@ -112,28 +114,34 @@
               <strong>selector</strong> - <strong>*обязательный параметр(индефикатор)</strong>,
               который задаеться при создании селекта.
             </li>
+
             <li>
               <strong>selected</strong> - необязательный параметр, в который передается элемент
               который будет выбран изначально в селекте.
             </li>
+
             <li>
               <strong>placeholder</strong> - необязательный параметр, в который передается текст
               плейсхолдера селекта.
             </li>
+
             <li>
               <strong>items</strong> -
               <strong
                 >*обязательный параметр(эсли не указан другой способ получения данных (url))</strong
               >, это массив елементов, которые будут отображаться в селекте при выборе.
             </li>
+
             <li>
               <strong>darkTheme</strong> - необязательный параметр, который отвечает за включение
               светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true).
             </li>
+
             <li>
               <strong>searchMode</strong> - необязательный параметр, который добавляет живой поиск
               по элеметам селекта.
             </li>
+
             <li>
               <strong>closeOnSelect</strong> - необязательный параметр, который отвечает за
               поведения селекта при открытии, если closeOnSelect: false, тогда при выборе елемента в
@@ -142,16 +150,33 @@
             </li>
 
             <li>
-              <strong>lenguage</strong> - необязательный параметр, отвечающий за локализацию
+              <strong>nativeSelectMode</strong> - необязательный параметр, который отвечает за
+              поведения селекта при открытии на мобильных усторйствах, если nativeSelectMode: false,
+              тогда на мобильном устройстве будет отображаться и работать дефолтное поведение как на
+              десктопной версии, а если nativeSelectMode: true, то на мобильном устройстве будет
+              отображаться нативный селект из HTML 5;
+            </li>
+
+            <li>
+              <strong>listDisplayMode</strong> - необязательный параметр, который отвечает за
+              поведения селекта при открытии, если listDisplayMode: false, тогда лист с выбором
+              опции отображаться как обычный выпадающий список. Если listDisplayMode: true, то лист
+              с выбором опции будет отображаться как модальное окно.
+            </li>
+
+            <li>
+              <strong>language</strong> - необязательный параметр, отвечающий за локализацию
               некоторых текстовых элементов. по умолчанию стоит 'en'. Можно добавить свою
-              локализацию, с помощью функции <a href="global.html#addLenguage">addLanguage()</a>,
+              локализацию, с помощью функции <a href="global.html#addLanguage">addLanguage()</a>,
               передав туда объект с полями для текста.
             </li>
+
             <li>
               <strong>event</strong> - необязательный параметр, который отвечает за поведения
               селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет
               открываться при наведении.
             </li>
+
             <li>
               <strong>url</strong> -
               <strong
@@ -160,16 +185,19 @@
               >
               htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
             </li>
+
             <li>
               <strong>multiselect</strong> - необязательный параметр, который отвечает за поведения
               селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы
               отрисовываются как обычный текст, через запятую.
             </li>
+
             <li>
               <strong>multiselectTag</strong> - необязательный параметр, который отвечает за
               поведения селекта, для него,
               <strong>***работает только в месте с подключением multiselect.</strong>
             </li>
+
             <li>
               <strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию
               элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых
@@ -186,10 +214,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -210,10 +235,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/create-element.js.html

@@ -153,10 +153,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -177,10 +174,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/global.html

@@ -158,6 +158,104 @@
             </dd>
           </dl>
 
+          <h4 class="name" id="displayMode">
+            <span class="type-signature">(protected) </span>#displayMode<span class="signature"
+              >(listDisplayMode)</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">
+            Изменяет отображение листа с выбором в виде модального окна.
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>listDisplayMode</code></td>
+
+                <td class="type">
+                  <span class="param-type">boolean</span>
+                </td>
+
+                <td class="description last">
+                  параметр отвечающий за отображение выбора в виде модального окна.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="cg-dropdown.js.html">cg-select.js</a>,
+                  <a href="cg-dropdown.js.html#line895">line 895</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="selectMode">
+            <span class="type-signature">(protected) </span>#selectMode<span class="signature"
+              >(nativeSelectMode)</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">Изменяет отображение селекта на мобильных устройствах</div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>nativeSelectMode</code></td>
+
+                <td class="type">
+                  <span class="param-type">boolean</span>
+                </td>
+
+                <td class="description last">
+                  параметр отвечающий за добавления нативного селекта.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="cg-dropdown.js.html">cg-select.js</a>,
+                  <a href="cg-dropdown.js.html#line864">line 864</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
           <h4 class="name" id="initEvent">
             <span class="type-signature">(protected) </span>#initEvent<span class="signature"
               >()</span
@@ -440,7 +538,7 @@
           </dl>
 
           <h4 class="name" id="addLenguage">
-            <span class="type-signature"></span>addLenguage<span class="signature">(lenguage)</span
+            <span class="type-signature"></span>addLanguage<span class="signature">(language)</span
             ><span class="type-signature"></span>
           </h4>
 
@@ -464,7 +562,7 @@
 
             <tbody>
               <tr>
-                <td class="name"><code>lenguage</code></td>
+                <td class="name"><code>language</code></td>
 
                 <td class="type">
                   <span class="param-type">object</span>
@@ -758,7 +856,7 @@
             <dd class="tag-source">
               <ul class="dummy">
                 <li>
-                  <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
+                  <a href="cg-dropdown.js.html">cg-select.js</a>,
                   <a href="cg-dropdown.js.html#line173">line 173</a>
                 </li>
               </ul>
@@ -774,10 +872,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -798,10 +893,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/index.html

@@ -19,7 +19,7 @@
 
       <section>
         <h2>CG-SELECT</h2>
-        <a href="/src/page/index.html">-- Вернуться к примеру --</a>
+        <a href="/example/index.html">-- Вернуться к примеру --</a>
         <p>
           Этот компонент предлагает более гибкую настройку и использование селекта. Так же
           реализованны методы взаимодействия с селектом.
@@ -35,10 +35,7 @@
         </ul>
         <p>
           <strong>*Все настройки можно посмореть в вкладке</strong>
-          <a
+          <a href="constructor.html">Конструктор класса</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса</a
-          >
         </p>
 
         <h5>Доступна возможность кастомизации основных элементов, таких как:</h5>
@@ -59,10 +56,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -83,10 +77,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/module-Utils.html

@@ -618,10 +618,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -642,10 +639,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/module-createElementChips.html

@@ -260,10 +260,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -284,10 +281,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/utils.js.html

@@ -257,10 +257,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -281,10 +278,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

example/example.js

@@ -13,6 +13,14 @@ const codeFourth = document.getElementById('codeFourth');
 const fifthBtn = document.getElementById('fifth');
 const codeFifth = document.getElementById('codeFifth');
 
+const six = document.getElementById('six')
+const codeSix = document.getElementById('codeSix');
+
+
+const Native = document.getElementById('Native')
+const codeNative = document.getElementById('codeNative')
+
+
 firstBtn.addEventListener('click', () => {
     codeFirst.classList.toggle("active")
 })
@@ -32,3 +40,11 @@ fourthBtn.addEventListener('click', () => {
 fifthBtn.addEventListener('click', () => {
     codeFifth.classList.toggle("active")
 })
+
+six.addEventListener('click', () => {
+    codeSix.classList.toggle("active")
+})
+
+Native.addEventListener('click', () => {
+    codeNative.classList.toggle("active")
+})

example/example.scss

@@ -87,7 +87,6 @@
 
 .content {
   margin-top: 15px;
-  // background-color: #6b6d76;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -112,7 +111,6 @@
     font-size: 20px;
   }
   &_submit {
-    //background-color: #2a2f3b;
     width: 200px;
     height: 35px;
     border-radius: 10px;
@@ -193,3 +191,21 @@ pre {
 .active {
   display: block;
 }
+
+@media (max-width: 576px) {
+  .container {
+    width: 95%;
+  }
+
+  .header {
+    margin-top: 15px;
+    h1 {
+      font-size: 32px;
+    }
+  }
+
+  .example-select_title {
+    font-size: 14px;
+    height: 40px;
+  }
+}

example/index.html

@@ -4,8 +4,17 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      property="og:description"
+      content="Feature rich Select control for React/JS with multiselect, autocomplete and styling"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="cg-select" />
+    <meta property="og:url" content="https://cg-select.itguild.info" />
+    <meta property="og:image" content="/src/images/logoCG.jpg" />
+
     <title>Cg-Select</title>
-    <link href="/src/page/example.scss" rel="stylesheet" />
+    <link href="example.scss" rel="stylesheet" />
   </head>
   <body class="body-example">
     <div class="container">
@@ -66,6 +75,93 @@
         </form>
       </div>
 
+      <div class="example-select">
+        <h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
+
+        <form method="get" class="form">
+          <p style="margin-left: 12px; color: white">
+            *При мобильном разрешении появляеться нативный селект.
+          </p>
+          <div class="layout-select">
+            <button class="cg-dropdown cg-dropdown_selectNative"></button>
+          </div>
+
+          <button type="button" class="check-code" id="Native">Посмотреть код</button>
+          <code id="codeNative">
+            <pre>
+              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+                selector: <span class="code__string">'.cg-dropdown_one',</span> 
+                placeholder: <span class="code__string">'Выберите авто',</span> 
+                nativeSelectMode: <span class="code__keyword">true,</span>
+                items: [
+                  <span class="code__string">'BMW',</span>
+                  {
+                    id: <span class="code__string">'213sade',</span>
+                    title: <span class="code__string">'Opel',</span>
+                    value: 1,
+                  },
+                  <span class="code__string">'Mersedes',</span> 
+                  <span class="code__string">'MAN',</span>  
+                  <span class="code__string">'Ferari',</span> 
+                ],
+                styles: {
+                  head: {
+                    width: <span class="code__string">'830px',</span> 
+                  },
+                  list: {
+                    width: <span class="code__string">'824px',</span> 
+                  },
+                },
+              });
+            </pre>
+          </code>
+        </form>
+      </div>
+
+      <div class="example-select">
+        <h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2>
+
+        <form method="get" class="form">
+          <p style="margin-left: 12px; color: white">
+            *При использовании данного метода лист с выбором появляеться как модальное окно.
+          </p>
+          <div class="layout-select">
+            <button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
+          </div>
+
+          <button type="button" class="check-code" id="six">Посмотреть код</button>
+
+          <code id="codeSix">
+            <pre>
+              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+                selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span> 
+                placeholder: <span class="code__string">'Выберите авто',</span> 
+                listDisplayMode: <span class="code__keyword">true,</span>
+                items: [
+                  <span class="code__string">'BMW',</span>
+                  {
+                    id: <span class="code__string">'213sade',</span>
+                    title: <span class="code__string">'Opel',</span>
+                    value: 1,
+                  },
+                  <span class="code__string">'Mersedes',</span> 
+                  <span class="code__string">'MAN',</span>  
+                  <span class="code__string">'Ferari',</span> 
+                ],
+                styles: {
+                  head: {
+                    width: <span class="code__string">'830px',</span> 
+                  },
+                  list: {
+                    width: <span class="code__string">'824px',</span> 
+                  },
+                },
+              });
+            </pre>
+          </code>
+        </form>
+      </div>
+
       <div class="example-select">
         <h1 class="example-select_title">Селект с данными с URL</h1>
         <div class="layout-select">
@@ -218,7 +314,7 @@
         <h1 class="example-select_title">Функция disabled</h1>
 
         <input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
-        <label for="checkboxDisable">Вы согласны на обработку данных</label>
+        <label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label>
 
         <div class="layout-select">
           <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>

example/index.js

@@ -27,12 +27,59 @@ const dropdown = new DropDown({
   },
 });
 
-// const ger = {
+// ------------------------------NativeSelect-----------------------
-//   placeholder: 'searcH????',
+const dropdownNativeSelect = new DropDown({
-//   textInListSearch: 'None',
+  selector: '.cg-dropdown_selectNative',
-// };
+  placeholder: 'Выберите авто',
+  nativeSelectMode: true,
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'Ferari',
+    'Kamaz',
+    'Ural'
+  ],
+  styles: {
+    head: {
+      width: '830px',
+    },
+    list: {
+      width: '824px',
+    },
+  },
+});
 
-// dropdown.addLenguage(ger);
+// ------------------------------listDisplayMode--------------------
+const dropdownlistDisplayMode = new DropDown({
+  selector: '.cg-dropdown_listDisplayMode',
+  placeholder: 'Выберите авто',
+  listDisplayMode: true,
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'Ferari',
+  ],
+  styles: {
+    head: {
+      width: '830px',
+    },
+    list: {
+      width: '824px',
+    },
+  },
+});
 
 // ------------------------------URL--------------------
 const dropdown3 = new DropDown({

index.js

@@ -0,0 +1,3 @@
+import { DropDown } from './src/cg-select';
+
+export default DropDown;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cg-select",
-  "version": "0.1.14",
+  "version": "0.1.171",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cg-select",
-      "version": "0.1.14",
+      "version": "0.1.171",
       "license": "ISC",
       "dependencies": {
         "@parcel/optimizer-css": "^2.8.0",
@@ -14,6 +14,7 @@
       },
       "devDependencies": {
         "@parcel/transformer-sass": "^2.7.0",
+        "jsdoc": "^4.0.0",
         "parcel": "^2.7.0",
         "prettier": "^2.7.1"
       }
@@ -115,6 +116,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/@babel/parser": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.7.tgz",
+      "integrity": "sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==",
+      "dev": true,
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
@@ -173,6 +186,18 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@jsdoc/salty": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.2.tgz",
+      "integrity": "sha512-A1FrVnc7L9qI2gUGsfN0trTiJNK72Y0CL/VAyrmYEmeKI3pnHDawP64CEev31XLyAAOx2xmDo3tbadPxC0CSbw==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=v12.0.0"
+      }
+    },
     "node_modules/@lezer/common": {
       "version": "0.15.12",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
@@ -1713,6 +1738,28 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/linkify-it": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.2.tgz",
+      "integrity": "sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==",
+      "dev": true
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "12.2.3",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
+      "integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/linkify-it": "*",
+        "@types/mdurl": "*"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
+      "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
+      "dev": true
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -1764,6 +1811,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "node_modules/array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -1814,6 +1867,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -1898,6 +1957,18 @@
         }
       ]
     },
+    "node_modules/catharsis": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.9.0.tgz",
+      "integrity": "sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.15"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2565,6 +2636,53 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "node_modules/js2xmlparser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-4.0.2.tgz",
+      "integrity": "sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==",
+      "dev": true,
+      "dependencies": {
+        "xmlcreate": "^2.0.4"
+      }
+    },
+    "node_modules/jsdoc": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.0.tgz",
+      "integrity": "sha512-tzTgkklbWKrlaQL2+e3NNgLcZu3NaK2vsHRx7tyHQ+H5jcB9Gx0txSd2eJWlMC/xU1+7LQu4s58Ry0RkuaEQVg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.9.4",
+        "@jsdoc/salty": "^0.2.1",
+        "@types/markdown-it": "^12.2.3",
+        "bluebird": "^3.7.2",
+        "catharsis": "^0.9.0",
+        "escape-string-regexp": "^2.0.0",
+        "js2xmlparser": "^4.0.2",
+        "klaw": "^3.0.0",
+        "markdown-it": "^12.3.2",
+        "markdown-it-anchor": "^8.4.1",
+        "marked": "^4.0.10",
+        "mkdirp": "^1.0.4",
+        "requizzle": "^0.2.3",
+        "strip-json-comments": "^3.1.0",
+        "underscore": "~1.13.2"
+      },
+      "bin": {
+        "jsdoc": "jsdoc.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/jsdoc/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -2590,6 +2708,15 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/klaw": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz",
+      "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.9"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.16.1.tgz",
@@ -2773,6 +2900,15 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "dev": true,
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/lmdb": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-2.5.2.tgz",
@@ -2837,12 +2973,65 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
+      "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/markdown-it-anchor": {
+      "version": "8.6.6",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.6.tgz",
+      "integrity": "sha512-jRW30YGywD2ESXDc+l17AiritL0uVaSnWsb26f+68qaW9zgbIIr1f4v2Nsvc0+s0Z2N3uX6t/yAw7BwCQ1wMsA==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/markdown-it": "*",
+        "markdown-it": "*"
+      }
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/marked": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
+      "integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==",
+      "dev": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
       "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
       "dev": true
     },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "dev": true
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2854,6 +3043,18 @@
         "node": "*"
       }
     },
+    "node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true,
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/msgpackr": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.3.tgz",
@@ -3238,6 +3439,15 @@
       "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
       "dev": true
     },
+    "node_modules/requizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.4.tgz",
+      "integrity": "sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.21"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3327,6 +3537,18 @@
       "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
       "dev": true
     },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/strip-outer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
@@ -3453,6 +3675,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
+    "node_modules/underscore": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
+      "dev": true
+    },
     "node_modules/universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -3510,6 +3744,12 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "node_modules/xmlcreate": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-2.0.4.tgz",
+      "integrity": "sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg==",
+      "dev": true
+    },
     "node_modules/xxhash-wasm": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz",
@@ -3604,6 +3844,12 @@
         }
       }
     },
+    "@babel/parser": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.7.tgz",
+      "integrity": "sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==",
+      "dev": true
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
@@ -3653,6 +3899,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@jsdoc/salty": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.2.tgz",
+      "integrity": "sha512-A1FrVnc7L9qI2gUGsfN0trTiJNK72Y0CL/VAyrmYEmeKI3pnHDawP64CEev31XLyAAOx2xmDo3tbadPxC0CSbw==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
     "@lezer/common": {
       "version": "0.15.12",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
@@ -4601,6 +4856,28 @@
       "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
       "dev": true
     },
+    "@types/linkify-it": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.2.tgz",
+      "integrity": "sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==",
+      "dev": true
+    },
+    "@types/markdown-it": {
+      "version": "12.2.3",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
+      "integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
+      "dev": true,
+      "requires": {
+        "@types/linkify-it": "*",
+        "@types/mdurl": "*"
+      }
+    },
+    "@types/mdurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
+      "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
+      "dev": true
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -4637,6 +4914,12 @@
         "picomatch": "^2.0.4"
       }
     },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -4678,6 +4961,12 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true
+    },
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -4730,6 +5019,15 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001400.tgz",
       "integrity": "sha512-Mv659Hn65Z4LgZdJ7ge5JTVbE3rqbJaaXgW5LEI9/tOaXclfIZ8DW7D7FCWWWmWiiPS7AC48S8kf3DApSxQdgA=="
     },
+    "catharsis": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.9.0.tgz",
+      "integrity": "sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -5189,6 +5487,46 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "js2xmlparser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-4.0.2.tgz",
+      "integrity": "sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==",
+      "dev": true,
+      "requires": {
+        "xmlcreate": "^2.0.4"
+      }
+    },
+    "jsdoc": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.0.tgz",
+      "integrity": "sha512-tzTgkklbWKrlaQL2+e3NNgLcZu3NaK2vsHRx7tyHQ+H5jcB9Gx0txSd2eJWlMC/xU1+7LQu4s58Ry0RkuaEQVg==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.9.4",
+        "@jsdoc/salty": "^0.2.1",
+        "@types/markdown-it": "^12.2.3",
+        "bluebird": "^3.7.2",
+        "catharsis": "^0.9.0",
+        "escape-string-regexp": "^2.0.0",
+        "js2xmlparser": "^4.0.2",
+        "klaw": "^3.0.0",
+        "markdown-it": "^12.3.2",
+        "markdown-it-anchor": "^8.4.1",
+        "marked": "^4.0.10",
+        "mkdirp": "^1.0.4",
+        "requizzle": "^0.2.3",
+        "strip-json-comments": "^3.1.0",
+        "underscore": "~1.13.2"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+          "dev": true
+        }
+      }
+    },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -5208,6 +5546,15 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "klaw": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz",
+      "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.9"
+      }
+    },
     "lightningcss": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.16.1.tgz",
@@ -5278,6 +5625,15 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "dev": true,
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "lmdb": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-2.5.2.tgz",
@@ -5331,12 +5687,51 @@
         }
       }
     },
+    "markdown-it": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
+      "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+          "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+          "dev": true
+        }
+      }
+    },
+    "markdown-it-anchor": {
+      "version": "8.6.6",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.6.tgz",
+      "integrity": "sha512-jRW30YGywD2ESXDc+l17AiritL0uVaSnWsb26f+68qaW9zgbIIr1f4v2Nsvc0+s0Z2N3uX6t/yAw7BwCQ1wMsA==",
+      "dev": true
+    },
+    "marked": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
+      "integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==",
+      "dev": true
+    },
     "mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
       "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
       "dev": true
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "dev": true
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5345,6 +5740,12 @@
         "brace-expansion": "^1.1.7"
       }
     },
+    "mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true
+    },
     "msgpackr": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.3.tgz",
@@ -5621,6 +6022,15 @@
       "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
       "dev": true
     },
+    "requizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.4.tgz",
+      "integrity": "sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
     "resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -5677,6 +6087,12 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
       "dev": true
     },
+    "strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true
+    },
     "strip-outer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
@@ -5769,6 +6185,18 @@
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
+    "underscore": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
+      "dev": true
+    },
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -5804,6 +6232,12 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "xmlcreate": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-2.0.4.tgz",
+      "integrity": "sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg==",
+      "dev": true
+    },
     "xxhash-wasm": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cg-select",
-  "version": "0.1.15",
+  "version": "0.1.171",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
   "author": {
     "name": "CraftGroup",
@@ -8,8 +8,8 @@
   },
   "homepage": "https://cg-select.itguild.info",
   "scripts": {
-    "start": "parcel src/page/index.html -p 4500 --open ",
+    "start": "parcel example/index.html -p 4500 --open ",
-    "build": "parcel build ./src/page/index.html",
+    "build": "parcel build index.js",
     "deploy": "gh-pages -d dist",
     "predeploy": "npm run build"
   },
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.7.0",
+    "jsdoc": "^4.0.0",
     "parcel": "^2.7.0",
     "prettier": "^2.7.1"
   },

src/cg-select.js

@@ -15,6 +15,7 @@ import {
   createNativeSelect,
 } from './components/create-element';
 import { ru, en } from './language/language';
+import './main.scss'
 
 /**
  * @class Описание класса DropDown
@@ -95,6 +96,8 @@ export class DropDown {
       darkTheme: true/false,
       searchMode: true/false,
       closeOnSelect:  true/false,
+      nativeSelectMode: true/false,
+      listDisplayMode: true/false,
       language: 'ru/en',
       styles: {
         head: {
@@ -237,11 +240,17 @@ export class DropDown {
    * @method buttonControl
    */
   buttonControl(button, method) {
+    const { listDisplayMode } = this.#options;
+
+    if (listDisplayMode === true) {
+      return;
+    }
+
     this.btn = button;
     button.addEventListener('click', () => {
-      if (method === 'open') {
+      if (method.toLowerCase() === 'open') {
         this.#open(true);
-      } else if (method === 'close') {
+      } else if (method.toLowerCase() === 'close') {
         this.#close();
       } else {
         return;
@@ -396,7 +405,17 @@ export class DropDown {
    * @description Рендер елементов в селекте.
    */
   #render(select) {
-    const { styles, multiselect, searchMode, multiselectTag, darkTheme, language } = this.#options;
+    const {
+      styles,
+      multiselect,
+      searchMode,
+      multiselectTag,
+      darkTheme,
+      language,
+      nativeSelectMode,
+      listDisplayMode,
+    } = this.#options;
+
     const random = Math.random().toString(36).substring(2, 10);
 
     if (select || (select && styles)) {
@@ -483,9 +502,17 @@ export class DropDown {
       this.#checkTheme();
     }
 
+    if (nativeSelectMode === true) {
+      this.#selectMode(nativeSelectMode);
+    }
+
     this.#list = this.#element.querySelector('.list');
     this.#caret = this.#element.querySelector('.caret');
 
+    if (listDisplayMode === true) {
+      this.#displayMode(listDisplayMode);
+    }
+
     this.#addOptionsBehaviour();
   }
 
@@ -835,4 +862,60 @@ export class DropDown {
       }
     });
   }
+
+  /**
+   * Приватный метод экземпляра класса DropDown
+   * @protected
+   * @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
+   * @description Изменяет отображение селекта на мобильных устройствах
+   * @method #selectMode
+   */
+  #selectMode(nativeSelectMode) {
+    let win = window.outerWidth;
+
+    if (nativeSelectMode === true) {
+      const select = this.#element.querySelector('.cg-select');
+      const list = this.#element.querySelector('.list');
+      const nativeSelect = this.#element.querySelector('.nativeSelect');
+
+      if (win < 576) {
+        select.classList.add('displayHide');
+        list.classList.add('displayHide');
+        nativeSelect.classList.add('nativeSelectActive');
+      } else if (win > 576) {
+        select.classList.remove('displayHide');
+        list.classList.remove('displayHide');
+        nativeSelect.classList.remove('nativeSelectActive');
+        nativeSelect.classList.add('displayHide');
+      }
+    } else {
+      return;
+    }
+  }
+
+  /**
+   * Приватный метод экземпляра класса DropDown
+   * @protected
+   * @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
+   * @description Изменяет отображение листа с выбором в виде модального окна.
+   * @method #displayMode
+   */
+  #displayMode(listDisplayMode) {
+    if (listDisplayMode === true) {
+      const modal = document.createElement('div');
+      const body = document.querySelector('body');
+      const list = this.#list;
+
+      modal.appendChild(list);
+      this.#element.appendChild(modal);
+
+      this.#element.addEventListener('click', () => {
+        modal.classList.toggle('modal');
+        list.classList.toggle('listModal');
+        body.classList.toggle('overflowHide');
+      });
+    } else {
+      return;
+    }
+  }
 }

src/index.js

@@ -1,3 +0,0 @@
-import { DropDown } from './cg-select';
-
-export default DropDown;

src/main.scss

@@ -2,6 +2,7 @@
 @import './style/scrollbar.scss';
 @import './style/svgStyle.scss';
 @import './style/whiteTheme.scss';
+@import './style/displayMode.scss';
 
 // ----Layout----
 .cg-dropdown {
@@ -258,8 +259,11 @@ input[type='checkbox'] {
 .label {
   color: white;
 }
+
 //-------Behavior--------
+
 .active {
+  text-align: start;
   background: #8282822c;
 }
 
@@ -270,7 +274,7 @@ input[type='checkbox'] {
   -ms-transition: 0.5s;
   -o-transition: 0.5s;
 
-  display: block;
+  display: block !important;
   opacity: 1;
 
   &_none {
@@ -289,7 +293,7 @@ input[type='checkbox'] {
 }
 
 .displayHide {
-  display: none;
+  display: none !important;
 }
 
 /*320px - 576px*/
@@ -299,23 +303,13 @@ input[type='checkbox'] {
     padding: 0;
   }
 
-  .container {
-    width: 90%;
-
-    .header {
-      h1 {
-        font-size: 32px;
-      }
-    }
-  }
-
   .list {
     width: 98% !important;
   }
 
-  // .open {
+  .listModal {
-  //   display: none !important;
+    width: 88% !important;
-  // }
+  }
 
   .cg-select {
     width: 100% !important;

src/style/displayMode.scss

@@ -0,0 +1,24 @@
+.modal {
+  display: flex;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.45);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9999;
+
+  &_active {
+    display: flex;
+  }
+}
+
+.listModal {
+  position: fixed !important;
+  top: 150px;
+}
+
+.overflowHide {
+  overflow: hidden;
+}

src/style/nativeSelect.scss

@@ -18,19 +18,25 @@
   }
 }
 
-// @media (max-width: 576px) {
+.nativeSelectActive {
-//   .nativeSelect {
+  display: block;
-//     display: block;
+  min-width: 235px;
-//     min-width: 235px;
+  height: 50px;
-//     height: 50px;
+  border: none;
+  border-radius: 10px;
+}
 
-//     border: none;
+@media (max-width: 576px) {
-//     border-radius: 10px;
+  .nativeSelect {
-//   }
+    min-width: 235px;
+    height: 50px;
+    border: none;
+    border-radius: 10px;
+  }
 
-//   select[multiple='multiple'] {
+  select[multiple='multiple'] {
-//     color: black;
+    color: black;
-//     background-color: white;
+    background-color: white;
-//     border-radius: 0;
+    border-radius: 0;
-//   }
+  }
-// }
+}