Added constructor.js

example/example.scss

@@ -1,4 +1,5 @@
 @import '/src/main.scss';
+@import './src/constructor/constructor.scss';
 
 * {
   font-size: 14px;
@@ -7,7 +8,13 @@
 }
 
 .testClass {
-  background-color: #ff8282;
+  background-color: #8297ff;
+  color: white;
+}
+
+.listTest {
+  background-color: #8297ff;
+  border: 1px solid black;
   color: white;
 }
 
@@ -118,6 +125,7 @@
   }
 
   &_submit {
+    text-align: center;
     width: 200px;
     height: 35px;
     border-radius: 10px;
@@ -219,6 +227,7 @@ pre {
 }
 
 .check-code {
+  text-align: center;
   width: 200px;
   height: 35px;
   cursor: pointer;

example/index.html

@@ -260,13 +260,13 @@
         <span class="code__keyword">const</span> <span class="code__var">newTheme</span> = {
           name: <span class="code__string">'test',</span> 
           styles: {
-            head:  <span class="code__string">'testClass',</span> 
+            head:  <span class="code__string">'headTestClass',</span> 
-            list: <span class="code__string">'testClass',</span> ,
+            list: <span class="code__string">'listTestClass',</span> ,
-            placeholder: <span class="code__string">'testClass',</span> ,
+            placeholder: <span class="code__string">'placeholderTestClass',</span> ,
-            caret: <span class="code__string">'testClass',</span> ,
+            caret: <span class="code__string">'caretTestClass',</span> ,
-            search: <span class="code__string">'testClass',</span> ,
+            search: <span class="code__string">'searchTestClass',</span> ,
-            chips: <span class="code__string">'testClass',</span> ,
+            chips: <span class="code__string">'chipsTestClass',</span> ,
-            lable: <span class="code__string">'testClass',</span> ,
+            lable: <span class="code__string">'lableTestClass',</span> ,
           },
         });
               </pre>
@@ -277,13 +277,13 @@
         <span class="code__keyword">const</span> <span class="code__var">newCustomTheme</span>:<span class="code__class"> CustomTheme</span>  = {
           name: <span class="code__string">'test',</span> 
           styles: {
-            head:  <span class="code__string">'testClass',</span> 
+            head:  <span class="code__string">'headTestClass',</span> 
-            list: <span class="code__string">'testClass',</span> ,
+            list: <span class="code__string">'listTestClass',</span> ,
-            placeholder: <span class="code__string">'testClass',</span> ,
+            placeholder: <span class="code__string">'placeholderTestClass',</span> ,
-            caret: <span class="code__string">'testClass',</span> ,
+            caret: <span class="code__string">'caretTestClass',</span> ,
-            search: <span class="code__string">'testClass',</span> ,
+            search: <span class="code__string">'searchTestClass',</span> ,
-            chips: <span class="code__string">'testClass',</span> ,
+            chips: <span class="code__string">'chipsTestClass',</span> ,
-            lable: <span class="code__string">'testClass',</span> ,
+            lable: <span class="code__string">'lableTestClass',</span> ,
           },
         });
               </pre>
@@ -292,12 +292,49 @@
           <h6>CSS</h6>
           <code style="display: block; width: 44%">
             <pre>
-              .testClass {
+              .headTestClass {
-                background-color: #ff8282;
+                background-color: #8297ff;
+                color: white;
+              }
+
+              .listTestClass {
+                background-color: #8297ff;
+                border: 1px solid black;
                 color: white;
               }
             </pre>
           </code>
+
+          <h6>Example custom theme in CG-Select</h6>
+          <p>
+            See an example of a select on
+            <a
+              href="https://codesandbox.io/p/sandbox/cg-select-example-eq9rle?file=%2Fsrc%2Findex.js"
+              style="font-size: 16px; color: #88d0f7"
+              >codesandbox.io</a
+            >
+          </p>
+          <div class="layout-select" style="margin-bottom: 60px">
+            <button class="cg-dropdown cg-dropdown_theme"></button>
+          </div>
+        </div>
+      </div>
+
+      <div class="example-select">
+        <h1 class="example-select_title">Select constructor</h1>
+        <div class="layout-select constructor">
+          <button class="cg-dropdown body"></button>
+          <textarea
+            name="styles"
+            id="styles"
+            cols="30"
+            rows="5"
+            class="textareaStyle"
+            placeholder="Enter CSS properties"
+          ></textarea>
+        </div>
+        <div class="layout-select constructor">
+          <button class="cg-dropdown select"></button>
         </div>
       </div>
 

example/index.js

@@ -1,19 +1,8 @@
 import { CGSelect } from '../src/cg-select';
-import './example';
+import { newCustomTheme } from './src/themeTest';
-// import { newCustomTheme } from './themeTest';
 
-const newTheme = {
+import './src/example';
-  name: 'test',
+import './src/constructor/constructor';
-  styles: {
-    head: 'testClass',
-    list: 'testClass',
-    placeholder: 'testClass',
-    caret: 'testClass',
-    search: 'testClass',
-    chips: 'testClass',
-    lable: 'testClass',
-  },
-};
 
 // ------------------------------Обычный селект--------------------
 const dropdown = new CGSelect({
@@ -45,6 +34,30 @@ const dropdown = new CGSelect({
 //   console.log(`this state: ${e}`);
 // });
 
+const droptheme = new CGSelect({
+  selector: '.cg-dropdown_theme',
+  placeholder: 'Choose a car',
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'Ferari',
+  ],
+  styles: {
+    head: {
+      width: '830px',
+    },
+    list: {
+      width: '824px',
+    },
+  },
+  theme: newCustomTheme,
+});
 // ------------------------------NativeSelect-----------------------
 const dropdownNativeSelect = new CGSelect({
   selector: '.cg-dropdown_selectNative',

example/src/constructor/constructor.js

@@ -0,0 +1,68 @@
+import { CGSelect } from '../../../src/cg-select';
+
+const body = new CGSelect({
+  selector: '.body',
+  placeholder: 'Select element to style',
+  items: ['head', 'list', 'placeholder', 'caret', 'search', 'chips', 'lable'],
+});
+
+const select = new CGSelect({
+  selector: '.select',
+  placeholder: 'Choose a car',
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'Ferari',
+  ],
+  styles: {
+    head: {},
+    placeholder: {},
+    list: {},
+    caret: {},
+    chips: {},
+    search: {},
+    lable: {},
+  },
+});
+
+let valueSelect = '';
+
+body.on('select', (e, value) => {
+  valueSelect = value;
+  getValueSelect(valueSelect);
+});
+
+function getValueSelect(value) {
+  switch (value) {
+    case 'head':
+      console.log('lol');
+      break;
+    case 'list':
+      break;
+    case 'placeholder':
+      break;
+    case 'caret':
+      break;
+    case 'search':
+      break;
+    case 'chips':
+      break;
+    case 'lable':
+      break;
+
+    default:
+      break;
+  }
+}
+
+let textarea = document.querySelector('#styles');
+
+textarea.onkeyup = function () {
+  console.log(textarea.value);
+};

example/src/constructor/constructor.scss

@@ -0,0 +1,10 @@
+.textareaStyle {
+  resize: none;
+  border-radius: 5px;
+  margin-left: 53px;
+}
+
+.constructor {
+  display: flex;
+  align-items: center;
+}

example/src/themeTest.ts

@@ -4,11 +4,6 @@ export const newCustomTheme: CustomTheme = {
   name: 'test',
   styles: {
     head: 'testClass',
-    list: 'testClass',
+    list: 'listTest',
-    placeholder: 'testClass',
-    caret: 'testClass',
-    search: 'testClass',
-    chips: 'testClass',
-    lable: 'testClass',
   },
 };

src/cg-select.ts

@@ -917,17 +917,19 @@ export class CGSelect implements ICgSelect {
    * @param callback
    * @method on
    */
-  public on(state: string, callback: (state: any) => any) {
+  public on(state: string, callback: (state: any, value?: string) => any) {
     const options = this.element?.querySelectorAll('.list__item');
+    let value = '';
 
     switch (state) {
       case 'select':
         options?.forEach((option: Element) => {
           option.addEventListener('click', () => {
             console.log('option:select', option.textContent);
+            value = option.textContent!;
+            callback(state, value);
           });
         });
-        callback(state);
         break;
       case 'close':
         this.element!.addEventListener('click', () => {