Fix utils and interfaces

src/cg-selectTS.ts

@@ -6,13 +6,14 @@ import {
 import { ICreateBreadCrumb } from './components/create-element/create-element.interface';
 
 import {
+  clearSelect,
   createSelected,
   getFormatItem,
   getSelectText,
   nativeOptionMultiple,
   nativeOptionOrdinary,
 } from './components/utils/utilsTs';
-import { IDataItem, ITextSelect } from './components/utils/urils.interface';
+import { IDataItem, ISelectedItems } from './components/utils/urils.interface';
 
 import { ICgSelect } from './interfaces/cg-select.interface';
 import { IItems } from './interfaces/items.interface';
@@ -284,12 +285,9 @@ export class CGSelect implements ICgSelect {
 
     const options = this.element?.querySelectorAll('.list__item');
     const select: HTMLElement | null | undefined = this.element?.querySelector('.selected');
-    const nativeOption = this.element?.querySelectorAll('.nativeSelect__nativeOption');
+    const nativeOption = this.element!.querySelectorAll('.nativeSelect__nativeOption');
 
-    const placeholderTextSelect: ITextSelect = {
-      placeholder: placeholder,
-      selected: selected,
-    };
+    let selectedItemsClear: ISelectedItems;
 
     const ulMultipul = document.createElement('ul');
 
@@ -301,6 +299,17 @@ export class CGSelect implements ICgSelect {
 
     options?.forEach((option: Element, index: number) => {
       option.addEventListener('click', (event) => {
+        if (Array.isArray(this.selectedItems)) {
+          selectedItemsClear = {
+            placeholder: placeholder!,
+            selected: selected!,
+            selectedItems: this.selectedItems,
+            indexes: this.indexes,
+            darkTheme: darkTheme,
+            multiselectTag: multiselectTag,
+          };
+        }
+
         const item: IItems = this.itemsSelect[index];
 
         const checkIndex = this.indexes.indexOf(index);
@@ -360,7 +369,7 @@ export class CGSelect implements ICgSelect {
             }
 
             if (!this.selectedItems.length) {
-              getSelectText(placeholderTextSelect, select);
+              getSelectText(selectedItemsClear, select);
             } else {
               if (multiselectTag) {
                 select!.appendChild(ulMultipul);
@@ -382,6 +391,8 @@ export class CGSelect implements ICgSelect {
           });
           option.classList.add('active');
         }
+
+        clearSelect(select!, this.element!, selectedItemsClear);
       });
     });
   }

src/components/utils/urils.interface.ts

@@ -6,7 +6,11 @@ export interface IDataItem {
   ItemValue: string | IItems | number;
 }
 
-export interface ITextSelect {
+export interface ISelectedItems {
   placeholder?: string;
   selected?: string;
+  selectedItems?: string[];
+  indexes?: number[];
+  multiselectTag?: boolean;
+  darkTheme?: boolean;
 }

src/components/utils/utilsTs.ts

@@ -1,6 +1,6 @@
 import { ICgSelect } from '../../interfaces/cg-select.interface';
 import { IItems } from '../../interfaces/items.interface';
-import { IDataItem, ITextSelect } from './urils.interface';
+import { IDataItem, ISelectedItems } from './urils.interface';
 
 /**
  * Преобразование каждого елемента полученного из поля Items;
@@ -33,7 +33,7 @@ export function getFormatItem(dataItem: any, index: number): IItems {
  * @returns {HTMLElement} возвращает сформированный елемент селекта
  */
 export function getSelectText(
-  data: ITextSelect,
+  data: ISelectedItems,
   select: HTMLElement | null | undefined,
 ): HTMLElement {
   const { placeholder, selected } = data;
@@ -102,6 +102,69 @@ export function createSelected(element: Element | null, content?: string, styles
   // }
 }
 
+/**
+ * Создание кнопки отчиски селекта, при единичном выборе.
+ * @param {HTMLElement} select место в селекте которое будет переназначено на ''.
+ * @param {Element} element экземпляр класса DropDown.
+ * @param {ISelectedItems} dataSelectText текст который отрисовывается в селекте.
+ */
+export function clearSelect(select: HTMLElement, element: Element, dataSelectText: ISelectedItems) {
+  const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText;
+
+  const options = element.querySelectorAll('.list__item');
+  const ulMultiSelect = element.querySelector('.multiselect-tag');
+  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');
+  const checkBox = element.querySelectorAll('li input');
+
+  svgIcon.setAttribute('viewBox', '0 0 10 10');
+  path1.setAttribute('d', 'M2,8 L8,2');
+  path2.setAttribute('d', 'M2,2 L8,8');
+  svgIcon.appendChild(path1);
+  svgIcon.appendChild(path2);
+
+  if (multiselectTag) {
+    return;
+  }
+
+  if (darkTheme === true || !darkTheme) {
+    path1.classList.add('pathWhite');
+    path2.classList.add('pathWhite');
+  }
+
+  if (darkTheme === false) {
+    path1.classList.add('pathBlack');
+    path2.classList.add('pathBlack');
+  }
+
+  svgIcon.classList.add('svg-icon');
+  svgIcon.classList.add('svg-clear');
+
+  select!.appendChild(svgIcon);
+
+  svgIcon.addEventListener('click', () => {
+    select!.innerText = '';
+
+    if (Array.isArray(selectedItems)) {
+      selectedItems!.splice(0);
+      indexes!.splice(0);
+    }
+
+    checkBox.forEach((item) => {
+      if (item instanceof HTMLInputElement) {
+        item.checked = false;
+      }
+    });
+
+    getSelectText(dataSelectText, select);
+
+    options.forEach((option) => {
+      option.classList.remove('active');
+    });
+  });
+}
+
 /**
  * Поведение нативного(одинарного) селекта при выборе кастомного
  * @param {NodeList} element NodeList нативного селекта