Start of the trasition to TS

CHANGELOG.md

@@ -20,3 +20,8 @@
 - Исправленны выявленные баги.
 - Исправленно отображение страницы с примером на мобильных устройствах.
 - Обновленна документация!
+
+### 00.00.2023 - обновление 0.2.1
+
+- Весь селект переписан на ts.
+- Документация и реадми переписаны на Английский.

README.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.1.171
+## version ~ 0.2.1
 
 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта.
 Доступна кастомизация, мультивыбор и живой поиск по елементам.

example/index.html

@@ -356,4 +356,5 @@
     </div>
   </body>
   <script type="module" src="index.js"></script>
+  <script type="module" src="indexTs.ts"></script>
 </html>

example/index.js

@@ -2,30 +2,30 @@ import DropDown from '../index';
 import './example';
 
 // ------------------------------Обычный селект--------------------
-const dropdown = new DropDown({
+// const dropdown = new DropDown({
-  selector: '.cg-dropdown_one',
+//   selector: '.cg-dropdown_one',
-  placeholder: 'Выберите авто',
+//   placeholder: 'Выберите авто',
-  lable: 'EXAMPLE',
+//   lable: 'EXAMPLE',
-  items: [
+//   items: [
-    'BMW',
+//     'BMW',
-    {
+//     {
-      id: '213sade',
+//       id: '213sade',
-      title: 'Opel',
+//       title: 'Opel',
-      value: 1,
+//       value: 1,
-    },
+//     },
-    'Mersedes',
+//     'Mersedes',
-    'MAN',
+//     'MAN',
-    'Ferari',
+//     'Ferari',
-  ],
+//   ],
-  styles: {
+//   styles: {
-    head: {
+//     head: {
-      width: '830px',
+//       width: '830px',
-    },
+//     },
-    list: {
+//     list: {
-      width: '824px',
+//       width: '824px',
-    },
+//     },
-  },
+//   },
-});
+// });
 
 // ------------------------------NativeSelect-----------------------
 const dropdownNativeSelect = new DropDown({

example/indexTs.ts

@@ -0,0 +1,18 @@
+import { SGSelect } from "../src/cg-selectTS";
+
+const dropdn = new SGSelect({
+    selector: '.cg-dropdown_one',
+    placeholder: 'Выберите авто',
+    // lable: 'EXAMPLE',
+    items: [
+      'BMW',
+      {
+        id: '213sade',
+        title: 'Opel',
+        value: 'ds',
+      },
+      'Mersedes',
+      'MAN',
+      'Ferari',
+    ]
+})

package-lock.json

@@ -10,7 +10,8 @@
       "license": "ISC",
       "dependencies": {
         "@parcel/optimizer-css": "^2.8.0",
-        "gh-pages": "^4.0.0"
+        "gh-pages": "^4.0.0",
+        "typescript": "^4.9.4"
       },
       "devDependencies": {
         "@parcel/transformer-sass": "^2.7.0",
@@ -799,6 +800,304 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.8.2.tgz",
+      "integrity": "sha512-ZGuq6p+Lzx6fgufaVsuOBwgpU3hgskTvIDIMdIDi9gOZyhGPK7U2srXdX+VYUL5ZSGbX04/P6QlB9FMAXK+nEg==",
+      "peer": true,
+      "dependencies": {
+        "@mischnic/json-sourcemap": "^0.1.0",
+        "@parcel/cache": "2.8.2",
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/events": "2.8.2",
+        "@parcel/fs": "2.8.2",
+        "@parcel/graph": "2.8.2",
+        "@parcel/hash": "2.8.2",
+        "@parcel/logger": "2.8.2",
+        "@parcel/package-manager": "2.8.2",
+        "@parcel/plugin": "2.8.2",
+        "@parcel/source-map": "^2.1.1",
+        "@parcel/types": "2.8.2",
+        "@parcel/utils": "2.8.2",
+        "@parcel/workers": "2.8.2",
+        "abortcontroller-polyfill": "^1.1.9",
+        "base-x": "^3.0.8",
+        "browserslist": "^4.6.6",
+        "clone": "^2.1.1",
+        "dotenv": "^7.0.0",
+        "dotenv-expand": "^5.1.0",
+        "json5": "^2.2.0",
+        "msgpackr": "^1.5.4",
+        "nullthrows": "^1.1.1",
+        "semver": "^5.7.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/cache": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.8.2.tgz",
+      "integrity": "sha512-kiyoOgh1RXp5qp+wlb8Pi/Z7o9D82Oj5RlHnKSAauyR7jgnI8Vq8JTeBmlLqrf+kHxcDcp2p86hidSeANhlQNg==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/fs": "2.8.2",
+        "@parcel/logger": "2.8.2",
+        "@parcel/utils": "2.8.2",
+        "lmdb": "2.5.2"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "peerDependencies": {
+        "@parcel/core": "^2.8.2"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/codeframe": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.8.2.tgz",
+      "integrity": "sha512-U2GT9gq1Zs3Gr83j8JIs10bLbGOHFl57Y8D57nrdR05F4iilV/UR6K7jkhdoiFc9WiHh3ewvrko5+pSdAVFPgQ==",
+      "peer": true,
+      "dependencies": {
+        "chalk": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/diagnostic": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.2.tgz",
+      "integrity": "sha512-tGSMwM2rSYLjJW0fCd9gb3tNjfCX/83PZ10/5u2E33UZVkk8OIHsQmsrtq2H2g4oQL3rFxkfEx6nGPDGHwlx7A==",
+      "peer": true,
+      "dependencies": {
+        "@mischnic/json-sourcemap": "^0.1.0",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/events": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.8.2.tgz",
+      "integrity": "sha512-o5etrsKm16y8iRPnjtEBNy4lD0WAigD66yt/RZl9Rx0vPVDly/63Rr9+BrXWVW7bJ7x0S0VVpWW4j3f/qZOsXg==",
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/fs": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.8.2.tgz",
+      "integrity": "sha512-aN8znbMndSqn1xwZEmMblzqmJsxcExv2jKLl/a9RUHAP7LaPYcPZIykDL3YwGCiKTCzjmRpXnNoyosjFFeBaHA==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/fs-search": "2.8.2",
+        "@parcel/types": "2.8.2",
+        "@parcel/utils": "2.8.2",
+        "@parcel/watcher": "^2.0.7",
+        "@parcel/workers": "2.8.2"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "peerDependencies": {
+        "@parcel/core": "^2.8.2"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/fs-search": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/fs-search/-/fs-search-2.8.2.tgz",
+      "integrity": "sha512-ovQnupRm/MoE/tbgH0Ivknk0QYenXAewjcog+T5umDmUlTmnIRZjURrgDf5Xtw8T/CD5Xv+HmIXpJ9Ez/LzJpw==",
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/hash": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.2.tgz",
+      "integrity": "sha512-NBnP8Hu0xvAqAfZXRaMM66i8nJyxpKS86BbhwkbgTGbwO1OY87GERliHeREJfcER0E0ZzwNow7MNR8ZDm6IvJQ==",
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "xxhash-wasm": "^0.4.2"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/logger": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.8.2.tgz",
+      "integrity": "sha512-zlhK6QHxfFJMlVJxxcCw0xxBDrYPFPOhMxSD6p6b0z9Yct1l3NdpmfabgjKX8wnZmHokFsil6daleM+M80n2Ew==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/events": "2.8.2"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/markdown-ansi": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.8.2.tgz",
+      "integrity": "sha512-5y29TXgRgG0ybuXaDsDk4Aofg/nDUeAAyVl9/toYCDDhxpQV4yZt8WNPu4PaNYKGLuNgXwsmz+ryZQHGmfbAIQ==",
+      "peer": true,
+      "dependencies": {
+        "chalk": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/package-manager": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.8.2.tgz",
+      "integrity": "sha512-hx4Imi0yhsSS0aNZkEANPYNNKqBuR63EUNWSxMyHh4ZOvbHoOXnMn1ySGdx6v0oi9HvKymNsLMQ1T5CuI4l4Bw==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/fs": "2.8.2",
+        "@parcel/logger": "2.8.2",
+        "@parcel/types": "2.8.2",
+        "@parcel/utils": "2.8.2",
+        "@parcel/workers": "2.8.2",
+        "semver": "^5.7.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "peerDependencies": {
+        "@parcel/core": "^2.8.2"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/plugin": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.8.2.tgz",
+      "integrity": "sha512-YG7TWfKsoNm72jbz3b3TLec0qJHVkuAWSzGzowdIhX37cP1kRfp6BU2VcH+qYPP/KYJLzhcZa9n3by147mGcxw==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/types": "2.8.2"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/types": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.8.2.tgz",
+      "integrity": "sha512-HAYhokWxM10raIhqaYj9VR9eAvJ+xP2sNfQ1IcQybHpq3qblcBe/4jDeuUpwIyKeQ4gorp7xY+q8KDoR20j43w==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/cache": "2.8.2",
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/fs": "2.8.2",
+        "@parcel/package-manager": "2.8.2",
+        "@parcel/source-map": "^2.1.1",
+        "@parcel/workers": "2.8.2",
+        "utility-types": "^3.10.0"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/utils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.8.2.tgz",
+      "integrity": "sha512-Ufax7wZxC9FNsUpR0EU7Z22LEY/q9jjsDTwswctCdfpWb7TE/NudOfM9myycfRvwBVEYN50lPbkt1QltEVnXQQ==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/codeframe": "2.8.2",
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/hash": "2.8.2",
+        "@parcel/logger": "2.8.2",
+        "@parcel/markdown-ansi": "2.8.2",
+        "@parcel/source-map": "^2.1.1",
+        "chalk": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/workers": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.8.2.tgz",
+      "integrity": "sha512-Eg6CofIrJSNBa2fjXwvnzVLPKwR/6fkfQTFAm3Jl+4JYLVknBtTSFzQNp/Fa+HUEG889H9ucTk2CBi/fVPBAFw==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/logger": "2.8.2",
+        "@parcel/types": "2.8.2",
+        "@parcel/utils": "2.8.2",
+        "chrome-trace-event": "^1.0.2",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "peerDependencies": {
+        "@parcel/core": "^2.8.2"
+      }
+    },
     "node_modules/@parcel/optimizer-css/node_modules/@parcel/diagnostic": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@@ -864,6 +1163,22 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/graph": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.8.2.tgz",
+      "integrity": "sha512-SLEvBQBgfkXgU4EBu30+CNanpuKjcNuEv/x8SwobCF0i3Rk+QKbe7T36bNR7727mao++2Ha69q93Dd9dTPw0kQ==",
+      "peer": true,
+      "dependencies": {
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@parcel/optimizer-css/node_modules/@parcel/hash": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@@ -1769,8 +2084,7 @@
     "node_modules/abortcontroller-polyfill": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
-      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==",
+      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
-      "dev": true
     },
     "node_modules/acorn": {
       "version": "8.8.0",
@@ -1853,7 +2167,6 @@
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
       "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
-      "dev": true,
       "dependencies": {
         "safe-buffer": "^5.0.1"
       }
@@ -2023,7 +2336,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
       "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
-      "dev": true,
       "engines": {
         "node": ">=0.8"
       }
@@ -2211,7 +2523,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
       "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2219,8 +2530,7 @@
     "node_modules/dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
-      "dev": true
     },
     "node_modules/electron-to-chromium": {
       "version": "1.4.251",
@@ -3461,7 +3771,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3675,6 +3984,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/uc.micro": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
@@ -4275,6 +4596,196 @@
             "chalk": "^4.1.0"
           }
         },
+        "@parcel/core": {
+          "version": "2.8.2",
+          "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.8.2.tgz",
+          "integrity": "sha512-ZGuq6p+Lzx6fgufaVsuOBwgpU3hgskTvIDIMdIDi9gOZyhGPK7U2srXdX+VYUL5ZSGbX04/P6QlB9FMAXK+nEg==",
+          "peer": true,
+          "requires": {
+            "@mischnic/json-sourcemap": "^0.1.0",
+            "@parcel/cache": "2.8.2",
+            "@parcel/diagnostic": "2.8.2",
+            "@parcel/events": "2.8.2",
+            "@parcel/fs": "2.8.2",
+            "@parcel/graph": "2.8.2",
+            "@parcel/hash": "2.8.2",
+            "@parcel/logger": "2.8.2",
+            "@parcel/package-manager": "2.8.2",
+            "@parcel/plugin": "2.8.2",
+            "@parcel/source-map": "^2.1.1",
+            "@parcel/types": "2.8.2",
+            "@parcel/utils": "2.8.2",
+            "@parcel/workers": "2.8.2",
+            "abortcontroller-polyfill": "^1.1.9",
+            "base-x": "^3.0.8",
+            "browserslist": "^4.6.6",
+            "clone": "^2.1.1",
+            "dotenv": "^7.0.0",
+            "dotenv-expand": "^5.1.0",
+            "json5": "^2.2.0",
+            "msgpackr": "^1.5.4",
+            "nullthrows": "^1.1.1",
+            "semver": "^5.7.1"
+          },
+          "dependencies": {
+            "@parcel/cache": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.8.2.tgz",
+              "integrity": "sha512-kiyoOgh1RXp5qp+wlb8Pi/Z7o9D82Oj5RlHnKSAauyR7jgnI8Vq8JTeBmlLqrf+kHxcDcp2p86hidSeANhlQNg==",
+              "peer": true,
+              "requires": {
+                "@parcel/fs": "2.8.2",
+                "@parcel/logger": "2.8.2",
+                "@parcel/utils": "2.8.2",
+                "lmdb": "2.5.2"
+              }
+            },
+            "@parcel/codeframe": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.8.2.tgz",
+              "integrity": "sha512-U2GT9gq1Zs3Gr83j8JIs10bLbGOHFl57Y8D57nrdR05F4iilV/UR6K7jkhdoiFc9WiHh3ewvrko5+pSdAVFPgQ==",
+              "peer": true,
+              "requires": {
+                "chalk": "^4.1.0"
+              }
+            },
+            "@parcel/diagnostic": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.2.tgz",
+              "integrity": "sha512-tGSMwM2rSYLjJW0fCd9gb3tNjfCX/83PZ10/5u2E33UZVkk8OIHsQmsrtq2H2g4oQL3rFxkfEx6nGPDGHwlx7A==",
+              "peer": true,
+              "requires": {
+                "@mischnic/json-sourcemap": "^0.1.0",
+                "nullthrows": "^1.1.1"
+              }
+            },
+            "@parcel/events": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.8.2.tgz",
+              "integrity": "sha512-o5etrsKm16y8iRPnjtEBNy4lD0WAigD66yt/RZl9Rx0vPVDly/63Rr9+BrXWVW7bJ7x0S0VVpWW4j3f/qZOsXg==",
+              "peer": true
+            },
+            "@parcel/fs": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.8.2.tgz",
+              "integrity": "sha512-aN8znbMndSqn1xwZEmMblzqmJsxcExv2jKLl/a9RUHAP7LaPYcPZIykDL3YwGCiKTCzjmRpXnNoyosjFFeBaHA==",
+              "peer": true,
+              "requires": {
+                "@parcel/fs-search": "2.8.2",
+                "@parcel/types": "2.8.2",
+                "@parcel/utils": "2.8.2",
+                "@parcel/watcher": "^2.0.7",
+                "@parcel/workers": "2.8.2"
+              }
+            },
+            "@parcel/fs-search": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/fs-search/-/fs-search-2.8.2.tgz",
+              "integrity": "sha512-ovQnupRm/MoE/tbgH0Ivknk0QYenXAewjcog+T5umDmUlTmnIRZjURrgDf5Xtw8T/CD5Xv+HmIXpJ9Ez/LzJpw==",
+              "peer": true,
+              "requires": {
+                "detect-libc": "^1.0.3"
+              }
+            },
+            "@parcel/hash": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.2.tgz",
+              "integrity": "sha512-NBnP8Hu0xvAqAfZXRaMM66i8nJyxpKS86BbhwkbgTGbwO1OY87GERliHeREJfcER0E0ZzwNow7MNR8ZDm6IvJQ==",
+              "peer": true,
+              "requires": {
+                "detect-libc": "^1.0.3",
+                "xxhash-wasm": "^0.4.2"
+              }
+            },
+            "@parcel/logger": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.8.2.tgz",
+              "integrity": "sha512-zlhK6QHxfFJMlVJxxcCw0xxBDrYPFPOhMxSD6p6b0z9Yct1l3NdpmfabgjKX8wnZmHokFsil6daleM+M80n2Ew==",
+              "peer": true,
+              "requires": {
+                "@parcel/diagnostic": "2.8.2",
+                "@parcel/events": "2.8.2"
+              }
+            },
+            "@parcel/markdown-ansi": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.8.2.tgz",
+              "integrity": "sha512-5y29TXgRgG0ybuXaDsDk4Aofg/nDUeAAyVl9/toYCDDhxpQV4yZt8WNPu4PaNYKGLuNgXwsmz+ryZQHGmfbAIQ==",
+              "peer": true,
+              "requires": {
+                "chalk": "^4.1.0"
+              }
+            },
+            "@parcel/package-manager": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.8.2.tgz",
+              "integrity": "sha512-hx4Imi0yhsSS0aNZkEANPYNNKqBuR63EUNWSxMyHh4ZOvbHoOXnMn1ySGdx6v0oi9HvKymNsLMQ1T5CuI4l4Bw==",
+              "peer": true,
+              "requires": {
+                "@parcel/diagnostic": "2.8.2",
+                "@parcel/fs": "2.8.2",
+                "@parcel/logger": "2.8.2",
+                "@parcel/types": "2.8.2",
+                "@parcel/utils": "2.8.2",
+                "@parcel/workers": "2.8.2",
+                "semver": "^5.7.1"
+              }
+            },
+            "@parcel/plugin": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.8.2.tgz",
+              "integrity": "sha512-YG7TWfKsoNm72jbz3b3TLec0qJHVkuAWSzGzowdIhX37cP1kRfp6BU2VcH+qYPP/KYJLzhcZa9n3by147mGcxw==",
+              "peer": true,
+              "requires": {
+                "@parcel/types": "2.8.2"
+              }
+            },
+            "@parcel/types": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.8.2.tgz",
+              "integrity": "sha512-HAYhokWxM10raIhqaYj9VR9eAvJ+xP2sNfQ1IcQybHpq3qblcBe/4jDeuUpwIyKeQ4gorp7xY+q8KDoR20j43w==",
+              "peer": true,
+              "requires": {
+                "@parcel/cache": "2.8.2",
+                "@parcel/diagnostic": "2.8.2",
+                "@parcel/fs": "2.8.2",
+                "@parcel/package-manager": "2.8.2",
+                "@parcel/source-map": "^2.1.1",
+                "@parcel/workers": "2.8.2",
+                "utility-types": "^3.10.0"
+              }
+            },
+            "@parcel/utils": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.8.2.tgz",
+              "integrity": "sha512-Ufax7wZxC9FNsUpR0EU7Z22LEY/q9jjsDTwswctCdfpWb7TE/NudOfM9myycfRvwBVEYN50lPbkt1QltEVnXQQ==",
+              "peer": true,
+              "requires": {
+                "@parcel/codeframe": "2.8.2",
+                "@parcel/diagnostic": "2.8.2",
+                "@parcel/hash": "2.8.2",
+                "@parcel/logger": "2.8.2",
+                "@parcel/markdown-ansi": "2.8.2",
+                "@parcel/source-map": "^2.1.1",
+                "chalk": "^4.1.0"
+              }
+            },
+            "@parcel/workers": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.8.2.tgz",
+              "integrity": "sha512-Eg6CofIrJSNBa2fjXwvnzVLPKwR/6fkfQTFAm3Jl+4JYLVknBtTSFzQNp/Fa+HUEG889H9ucTk2CBi/fVPBAFw==",
+              "peer": true,
+              "requires": {
+                "@parcel/diagnostic": "2.8.2",
+                "@parcel/logger": "2.8.2",
+                "@parcel/types": "2.8.2",
+                "@parcel/utils": "2.8.2",
+                "chrome-trace-event": "^1.0.2",
+                "nullthrows": "^1.1.1"
+              }
+            }
+          }
+        },
         "@parcel/diagnostic": {
           "version": "2.8.0",
           "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@@ -4309,6 +4820,15 @@
             "detect-libc": "^1.0.3"
           }
         },
+        "@parcel/graph": {
+          "version": "2.8.2",
+          "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.8.2.tgz",
+          "integrity": "sha512-SLEvBQBgfkXgU4EBu30+CNanpuKjcNuEv/x8SwobCF0i3Rk+QKbe7T36bNR7727mao++2Ha69q93Dd9dTPw0kQ==",
+          "peer": true,
+          "requires": {
+            "nullthrows": "^1.1.1"
+          }
+        },
         "@parcel/hash": {
           "version": "2.8.0",
           "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@@ -4887,8 +5407,7 @@
     "abortcontroller-polyfill": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
-      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==",
+      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
-      "dev": true
     },
     "acorn": {
       "version": "8.8.0",
@@ -4950,7 +5469,6 @@
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
       "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
-      "dev": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -5061,8 +5579,7 @@
     "clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
-      "dev": true
     },
     "color-convert": {
       "version": "2.0.1",
@@ -5197,14 +5714,12 @@
     "dotenv": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
-      "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
+      "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g=="
-      "dev": true
     },
     "dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
-      "dev": true
     },
     "electron-to-chromium": {
       "version": "1.4.251",
@@ -5712,7 +6227,8 @@
       "version": "8.6.6",
       "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.6.tgz",
       "integrity": "sha512-jRW30YGywD2ESXDc+l17AiritL0uVaSnWsb26f+68qaW9zgbIIr1f4v2Nsvc0+s0Z2N3uX6t/yAw7BwCQ1wMsA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "marked": {
       "version": "4.2.5",
@@ -6040,8 +6556,7 @@
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
-      "dev": true
     },
     "sass": {
       "version": "1.54.9",
@@ -6185,6 +6700,11 @@
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true
     },
+    "typescript": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg=="
+    },
     "uc.micro": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cg-select",
-  "version": "0.1.171",
+  "version": "0.2.1",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
   "author": {
     "name": "CraftGroup",
@@ -29,7 +29,8 @@
   },
   "dependencies": {
     "@parcel/optimizer-css": "^2.8.0",
-    "gh-pages": "^4.0.0"
+    "gh-pages": "^4.0.0",
+    "typescript": "^4.9.4"
   },
   "keywords": [
     "select",

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
+}