Working in multiple mode

example/indexTs.ts

@@ -14,4 +14,5 @@ const dropdn = new CGSelect({
     'MAN',
     'Ferari',
   ],
+  multiselect: true,
 });

src/cg-selectTS.ts

@@ -3,7 +3,7 @@ import {
   createNativeSelectOption,
 } from './components/create-element/create-elementTs';
 import { IDataItem } from './components/utils/urils.interface';
-import { createSelected, getFormatItem } from './components/utils/utilsTs';
+import { createSelected, getFormatItem, nativeOptionOrdinary } from './components/utils/utilsTs';
 import { ICgSelect } from './interfaces/cg-select.interface';
 import { IItems } from './interfaces/items.interface';
 import './main.scss';
@@ -32,7 +32,7 @@ export class CGSelect implements ICgSelect {
   private randomId: string;
   private caret: Element | null | undefined;
   private category: string;
-  private selectedItems: object[] | object;
+  private selectedItems: string[] | string;
   private itemsSelect: IItems[] | string[] | any;
   private indexes: number[] = [];
 
@@ -84,10 +84,6 @@ export class CGSelect implements ICgSelect {
 
     this.itemsSelect = [];
 
-    if (multiselect === true) {
-      this.selectedItems = [];
-    }
-
     if (!items && url) {
       this.renderUrl();
       return;
@@ -147,13 +143,13 @@ export class CGSelect implements ICgSelect {
       liItem.classList.add('list__item');
       strongItem.classList.add('category');
 
-      if (multiselect && multiselect === true) {
+      if (multiselect) {
         const checkBox = document.createElement('input');
         checkBox.type = 'checkbox';
         checkBox.setAttribute('id', `chbox-${dataItem.id}`);
         liItem.appendChild(checkBox);
 
-        if (multiselectTag && multiselectTag == true) {
+        if (multiselectTag) {
           checkBox.classList.add('displayHide');
         }
 
@@ -276,24 +272,102 @@ export class CGSelect implements ICgSelect {
     } = this.options;
 
     const options = this.element?.querySelectorAll('.list__item');
-    const select = this.element?.querySelector('.selected');
+    const select: HTMLElement | null | undefined = this.element?.querySelector('.selected');
     const nativeOption = this.element?.querySelectorAll('.nativeSelect__nativeOption');
 
     const ulMultipul = document.createElement('ul');
 
-    if (multiselect && multiselect == true) {
+    if (multiselect) {
       ulMultipul.classList.add('multiselect-tag');
       select?.classList.add('overflow-hidden');
     }
 
     options?.forEach((option: Element, index: number) => {
       option.addEventListener('click', (event) => {
-        const item = this.itemsSelect[index];
+        const item: IItems = this.itemsSelect[index];
         const checkIndex = this.indexes.indexOf(index);
 
+        if (closeOnSelect == false || multiselect) {
+          event.stopPropagation();
+          event.preventDefault();
+        }
+
         select!.textContent = item.title;
-        this.selectedItems = item;
+        this.selectedItems = item.title;
-        console.log(this.selectedItems);
+
+        nativeOptionOrdinary(nativeOption, item.title);
+
+        options.forEach((option) => {
+          option.classList.remove('active');
+        });
+        option.classList.add('active');
+
+        // if (multiselect) {
+        //   this.selectedItems = [];
+        //   option.classList.toggle('active');
+        //   const checkBox: HTMLInputElement | null = option.querySelector('input[type="checkbox"]');
+
+        //   if (checkBox) {
+        //     if (!(event.target instanceof HTMLInputElement)) {
+        //       checkBox.checked = !checkBox.checked;
+        //     }
+
+        //     if (checkIndex === -1) {
+        //       nativeOptionMultiple(nativeOption, item.title, true);
+        //       this.indexes.push(index);
+        //       select!.textContent = '';
+
+        //       if (multiselectTag) {
+        //         this.selectedItems.push(item);
+        //         select!.appendChild(ulMultipul);
+
+        //         const data = {
+        //           option: this.options,
+        //           element: this.element,
+        //           indexes: this.indexes,
+        //           selectedItems: this.selectedItems,
+        //         };
+
+        //         ulMultipul.appendChild(createBreadcrumb(data, item.title, index, item.id));
+        //       } else {
+        //         debugger;
+        //         this.selectedItems.push(item.title);
+        //         console.log(this.selectedItems);
+
+        //         select.innerText = this.selectedItems;
+        //       }
+        //     } else {
+        //       if (multiselectTag) {
+        //         const tagItem = document.getElementById(`tag-${index}-${item.id}`);
+        //         ulMultipul.removeChild(tagItem);
+        //       }
+
+        //       this.indexes.splice(checkIndex, 1);
+        //       this.selectedItems.splice(checkIndex, 1);
+        //       nativeOptionMultiple(nativeOption, item.title, false);
+        //     }
+
+        //     if (!this.#selectedItems.length) {
+        //       getSelectText(dataSelectText, select);
+        //     } else {
+        //       if (multiselectTag) {
+        //         select.appendChild(ulMultipul);
+        //       } else {
+        //         select.innerText = this.#selectedItems;
+        //       }
+        //     }
+        //   }
+        // } else {
+        //   select!.textContent = item.title;
+        //   this.selectedItems = item.title;
+
+        //   nativeOptionOrdinary(nativeOption, item.title);
+
+        //   options.forEach((option) => {
+        //     option.classList.remove('active');
+        //   });
+        //   option.classList.add('active');
+        // }
       });
     });
   }

src/components/create-element/create-elementTs.ts

@@ -1,15 +1,13 @@
-
 /**
  * Метод который создает нативный селект
  * @returns {HTMLSelectElement} Возвращает созданный нативный селект
  */
-
 export function createNativeSelect(): HTMLSelectElement {
-    const nativeSelect = document.createElement('select');
+  const nativeSelect = document.createElement('select');
-  
+
-    nativeSelect.setAttribute('name', 'dataSelect');
+  nativeSelect.setAttribute('name', 'dataSelect');
-    nativeSelect.classList.add('nativeSelect');
+  nativeSelect.classList.add('nativeSelect');
-    return nativeSelect;
+  return nativeSelect;
 }
 
 /**
@@ -17,9 +15,76 @@ export function createNativeSelect(): HTMLSelectElement {
  * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
  */
 export function createNativeSelectOption(): HTMLOptionElement {
-    const nativeOption = document.createElement('option');
+  const nativeOption = document.createElement('option');
-  
+
-    nativeOption.classList.add('nativeSelect__nativeOption');
+  nativeOption.classList.add('nativeSelect__nativeOption');
-    return nativeOption;
+  return nativeOption;
+}
+
+/**
+ * Метод который создает и отвечает за поведение chips
+ * @param {object} data объект в котором содержатся настройки и элементы селекта
+ * @param {string} title имя выбранного элемента для отрисовки chips
+ * @param {number} index индекс выбранного элемента для отрисовки chips
+ * @param {string} id уникальное id выбранного элемента
+ * @returns {HTMLElement} возвращает сформированный HTMLElement chips item
+ */
+export function createBreadcrumb(data: any, title: string, index: number, id: string) {
+  const { element, option, indexes, selectedItems } = data;
+  const { placeholder, styles } = option;
+
+  const selected = element.querySelector('.selected');
+  const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
+
+  const liChip = document.createElement('li');
+  const textNode = document.createTextNode(title);
+  const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
+  svgIcon.setAttribute('viewBox', '0 0 10 10');
+  path1.setAttribute('d', 'M3,7 L7,3');
+  path2.setAttribute('d', 'M3,3 L7,7');
+  liChip.setAttribute('id', `tag-${index}-${id}`);
+
+  svgIcon.classList.add('svg-icon');
+
+  svgIcon.appendChild(path1);
+  svgIcon.appendChild(path2);
+  liChip.appendChild(textNode);
+  liChip.appendChild(svgIcon);
+
+  if (styles) {
+    const { chips } = styles;
+    //   customStylesFormat(chips, liChip);
+  }
+
+  svgIcon.addEventListener('click', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    //   nativeOptionMultiple(nativeOption, title, false);
+
+    const deleteIcon = indexes.indexOf(index);
+    let checkBox = '';
+
+    indexes.splice(deleteIcon, 1);
+    selectedItems.splice(deleteIcon, 1);
+
+    if (id) {
+      // checkBox = document.getElementById(`chbox-${id}`);
+    } else {
+      // checkBox = document.getElementById(`chbox-${index}`);
+    }
+
+    //   checkBox.checked = false;
+    //   checkBox.parentElement.classList.remove('active');
+
+    if (!selectedItems.length) {
+      selected.innerText = placeholder;
+    }
+
+    //   liChip.parentElement.removeChild(liChip);
+  });
+
+  return liChip;
 }
-  

src/components/utils/utilsTs.ts

@@ -8,18 +8,18 @@ import { IDataItem } from './urils.interface';
  * @returns {IDataItem | IItems} возвращает сформированный объект
  */
 
-export function getFormatItem(dataItem:any , index: number) : IItems {
+export function getFormatItem(dataItem: any, index: number): IItems {
   const random = Math.random().toString(36).substring(2, 10);
   let item: IItems;
 
-  if(checkItemStruct(dataItem)){
+  if (checkItemStruct(dataItem)) {
-   return dataItem;
+    return dataItem;
-  } else{
+  } else {
     item = {
       id: random,
       title: dataItem,
-      value: index
+      value: index,
-    }
+    };
 
     return item;
   }
@@ -44,13 +44,11 @@ export function checkItemStruct(item: object): boolean {
  * @param {string} content placeholer передаваемый из настроек селекта
  * @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
  */
-export function createSelected(element: Element|null, content?: string, styles?: object) {
+export function createSelected(element: Element | null, content?: string, styles?: object) {
-  
   const select = document.createElement('div');
   const selected = document.createElement('p');
   const caret = document.createElement('div');
 
-
   select.classList.add('cg-select');
   selected.classList.add('selected');
   caret.classList.add('caret');
@@ -58,15 +56,15 @@ export function createSelected(element: Element|null, content?: string, styles?:
   select.appendChild(selected);
   select.appendChild(caret);
 
-  if(content){
+  if (content) {
     const text = document.createTextNode(content);
     selected.appendChild(text);
-    element?.appendChild(select)
+    element?.appendChild(select);
-  } else if(styles){
+  } else if (styles) {
     // customStyles(element, styles);
-    select.setAttribute('style', `${styles}`)
+    select.setAttribute('style', `${styles}`);
-    selected.setAttribute('style', `${styles}`)
+    selected.setAttribute('style', `${styles}`);
-    caret.setAttribute('style', `${styles}`)
+    caret.setAttribute('style', `${styles}`);
   }
 
   // if (styles) {
@@ -79,4 +77,18 @@ export function createSelected(element: Element|null, content?: string, styles?:
   //     </div>
   //   `;
   // }
-}
+}
+
+/**
+ * Поведение нативного(одинарного) селекта при выборе кастомного
+ * @param {NodeList} element NodeList нативного селекта
+ * @param {any} item выбранный элемент в кастомном селекте
+ */
+export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, item: any) {
+  element!.forEach((option) => {
+    option.removeAttribute('selected');
+    if (option.textContent === item) {
+      option.setAttribute('selected', 'selected');
+    }
+  });
+}