Working in multiple mode

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

@@ -1,15 +1,13 @@
-
 /**
  * Метод который создает нативный селект
  * @returns {HTMLSelectElement} Возвращает созданный нативный селект
  */
-
 export function createNativeSelect(): HTMLSelectElement {
-    const nativeSelect = document.createElement('select');
-  
-    nativeSelect.setAttribute('name', 'dataSelect');
-    nativeSelect.classList.add('nativeSelect');
-    return nativeSelect;
+  const nativeSelect = document.createElement('select');
+
+  nativeSelect.setAttribute('name', 'dataSelect');
+  nativeSelect.classList.add('nativeSelect');
+  return nativeSelect;
 }
 
 /**
@@ -17,9 +15,76 @@ export function createNativeSelect(): HTMLSelectElement {
  * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
  */
 export function createNativeSelectOption(): HTMLOptionElement {
-    const nativeOption = document.createElement('option');
-  
-    nativeOption.classList.add('nativeSelect__nativeOption');
-    return nativeOption;
+  const nativeOption = document.createElement('option');
+
+  nativeOption.classList.add('nativeSelect__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)){
-   return dataItem;
-  } else{
+  if (checkItemStruct(dataItem)) {
+    return dataItem;
+  } 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)
-  } else if(styles){
+    element?.appendChild(select);
+  } else if (styles) {
     // customStyles(element, styles);
-    select.setAttribute('style', `${styles}`)
-    selected.setAttribute('style', `${styles}`)
-    caret.setAttribute('style', `${styles}`)
+    select.setAttribute('style', `${styles}`);
+    selected.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');
+    }
+  });
+}