Start of the trasition to TS

src/cg-select.js

@@ -92,6 +92,7 @@ export class DropDown {
    *  selector: 'Уникальный селектор',
       selected: 'Выбранный элемент',
       placeholder: '...',
+      lable: '...'
       items: [string|number|object],
       darkTheme: true/false,
       searchMode: true/false,
@@ -919,3 +920,4 @@ export class DropDown {
     }
   }
 }
+

src/cg-selectTS.ts

@@ -0,0 +1,65 @@
+import { ISgSelect } from './interfaces/cg-select.interface';
+import { IItems } from './interfaces/items.interface';
+import './main.scss';
+
+export class SGSelect implements ISgSelect {
+  selector: string;
+  selected?: string;
+  placeholder?: string;
+  items?: IItems[] | string[] | any;
+  darkTheme?: boolean;
+  searchMode?: boolean;
+  closeOnSelect?: boolean;
+  nativeSelectMode?: boolean;
+  listDisplayMode?: boolean;
+  language?: string;
+  lable?: string;
+  styles?: object;
+  event?: string;
+  url?: string;
+  multiselect?: boolean;
+  multiselectTag?: boolean;
+
+  private element: Element | null;
+  private list: HTMLElement;
+  private options: object;
+  private caret: HTMLElement;
+  private category: string;
+  private selectedItems: object[] | object;
+  private itemsSelect: IItems[] | string[] | any;
+  private indexes: number[] = [];
+
+  constructor(setting: ISgSelect) {
+    this.init(setting);
+  }
+
+  private init(setting: ISgSelect): void {
+    const { items, multiselect, url, selector} = setting;
+    this.options = setting;
+
+    const elem = document.querySelector(selector);
+    this.element = elem;
+
+    this.element?.addEventListener('click', (e) => {
+      e.preventDefault();
+    });
+
+    this.itemsSelect = [];
+    
+    if(multiselect === true){
+        this.selectedItems = [];
+    }
+
+    if (!items && url) {
+        this.renderUrl();
+        return;
+    }
+
+    items.forEach((dataItem, index) => {
+        this.itemsSelect.push()
+    })
+  }
+
+  private render() {}
+  private renderUrl() {}
+}

src/components/utilsTs.ts

@@ -0,0 +1,48 @@
+import { IItems } from '../interfaces/items.interface';
+
+interface IDataItem{
+    category?: string;
+    categoryItems?: string;
+    ItemValue: IItems | string | number;
+}
+
+/**
+ * Преобразование каждого елемента полученного из поля Items;
+ * @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
+ * @param {number} index индекс этого элемента
+ * @returns {object} возвращает сформированный объект
+ */
+
+export function getFormatItem(dataItem:IDataItem, index: number) {
+  const random = Math.random().toString(36).substring(2, 10);
+  let item: IItems;
+
+//   if (checkItemStruct(dataItem)) {
+//     item = {
+//       id: dataItem.id,
+//       title: dataItem.title,
+//       value: index,
+//     };
+//   } else {
+//     item = {
+//       id: random,
+//       title: dataItem,
+//       value: index,
+//     };
+//   }
+
+//   return item;
+}
+
+/**
+ * Проверка содержит ли item  указанные свойства,
+ * @param {object} item проверяемый на определенную структуру элемент
+ * @returns {boolean} возвращает true/false если item содержит указанные свойства
+ */
+export function checkItemStruct(item: object): boolean {
+  if (item && typeof item !== 'object') {
+    return false;
+  }
+
+  return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
+}

src/interfaces/cg-select.interface.ts

@@ -0,0 +1,20 @@
+import { IItems } from "./items.interface";
+
+export interface ISgSelect {
+    selector: string;
+    selected?: string;
+    placeholder?: string;
+    items?: IItems[]| string[] | any;
+    darkTheme?: boolean;
+    searchMode?: boolean;
+    closeOnSelect?:  boolean;
+    nativeSelectMode?: boolean;
+    listDisplayMode?: boolean;
+    language?: string;
+    lable?:string;
+    styles?: object;
+    event?: string;
+    url?: string;
+    multiselect?: boolean;
+    multiselectTag?: boolean;
+}

src/interfaces/items.interface.ts

@@ -0,0 +1,5 @@
+export interface IItems{
+    id: string;
+    title: string;
+    value: number | string
+}