multiselect WORKING! And added new interface in create-element

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

@@ -0,0 +1,8 @@
+import { ICgSelect } from '../../interfaces/cg-select.interface';
+
+export interface IcreateBreadCrumb {
+  element: Element | null;
+  option: ICgSelect;
+  indexes: number[];
+  selectedItems: string[];
+}

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

@@ -1,3 +1,5 @@
+import { IcreateBreadCrumb } from './create-element.interface';
+
 /**
  * Метод который создает нативный селект
  * @returns {HTMLSelectElement} Возвращает созданный нативный селект
@@ -29,12 +31,17 @@ export function createNativeSelectOption(): HTMLOptionElement {
  * @param {string} id уникальное id выбранного элемента
  * @returns {HTMLElement} возвращает сформированный HTMLElement chips item
  */
-export function createBreadcrumb(data: any, title: string, index: number, id: string) {
+export function createBreadcrumb(
+  data: IcreateBreadCrumb,
+  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 selected = element!.querySelector('.selected');
+  const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption');
 
   const liChip = document.createElement('li');
   const textNode = document.createTextNode(title);
@@ -55,7 +62,7 @@ export function createBreadcrumb(data: any, title: string, index: number, id: st
   liChip.appendChild(svgIcon);
 
   if (styles) {
-    const { chips } = styles;
+    // const { chips } = styles;
     //   customStylesFormat(chips, liChip);
   }
 
@@ -80,7 +87,7 @@ export function createBreadcrumb(data: any, title: string, index: number, id: st
     //   checkBox.parentElement.classList.remove('active');
 
     if (!selectedItems.length) {
-      selected.innerText = placeholder;
+      //selected?.textContent = placeholder;
     }
 
     //   liChip.parentElement.removeChild(liChip);

src/components/utils/urils.interface.ts

@@ -1,7 +1,12 @@
-import { IItems } from "../../interfaces/items.interface";
+import { IItems } from '../../interfaces/items.interface';
 
-export interface IDataItem{
-    category?: string;
-    categoryItems?: string;
-    ItemValue: string | IItems | number;
-}
+export interface IDataItem {
+  category?: string;
+  categoryItems?: string;
+  ItemValue: string | IItems | number;
+}
+
+export interface ITextSelect {
+  placeholder?: string;
+  selected?: string;
+}

src/components/utils/utilsTs.ts

@@ -1,5 +1,6 @@
+import { ICgSelect } from '../../interfaces/cg-select.interface';
 import { IItems } from '../../interfaces/items.interface';
-import { IDataItem } from './urils.interface';
+import { IDataItem, ITextSelect } from './urils.interface';
 
 /**
  * Преобразование каждого елемента полученного из поля Items;
@@ -25,6 +26,28 @@ export function getFormatItem(dataItem: any, index: number): IItems {
   }
 }
 
+/**
+ * Вставка изначального текста селекта(до выбора)
+ * @param {ITextSelect} data объект в котором находяться title селекта
+ * @param {HTMLElement | null | undefined} select елемент селекта, куда будет вставляться title
+ * @returns {HTMLElement} возвращает сформированный елемент селекта
+ */
+export function getSelectText(
+  data: ITextSelect,
+  select: HTMLElement | null | undefined,
+): HTMLElement {
+  const { placeholder, selected } = data;
+
+  if (placeholder) {
+    select!.innerText = placeholder;
+  } else if (selected) {
+    select!.innerText = selected;
+  } else {
+    select!.innerText = 'Select...';
+  }
+  return select!;
+}
+
 /**
  * Проверка содержит ли item  указанные свойства,
  * @param {object} item проверяемый на определенную структуру элемент
@@ -92,3 +115,29 @@ export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, i
     }
   });
 }
+
+/**
+ * Поведение нативного(Multiple) селекта при выборе в кастомном
+ * @param {NodeListOf<Element> | undefined} element NodeList нативного селекта
+ * @param {string} item выбранный элемент в кастомном селекте
+ * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
+ */
+export function nativeOptionMultiple(
+  element: NodeListOf<Element> | undefined,
+  item: string,
+  condition: boolean,
+) {
+  element!.forEach((option) => {
+    if (condition == true) {
+      if (option.textContent === item) {
+        option.setAttribute('selected', 'selected');
+      }
+    } else if (condition == false) {
+      if (option.textContent === item) {
+        option.removeAttribute('selected');
+      }
+    } else {
+      return;
+    }
+  });
+}