Added constructor.js

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/example.js

@@ -0,0 +1,48 @@
+const firstBtn = document.getElementById('first');
+const codeFirst = document.getElementById('codeFirst');
+
+const secondBtn = document.getElementById('second');
+const codeSecond = document.getElementById('codeSecond');
+
+const thirdBtn = document.getElementById('third');
+const codeThird = document.getElementById('codeThird');
+
+const fourthBtn = document.getElementById('fourth');
+const codeFourth = document.getElementById('codeFourth');
+
+const fifthBtn = document.getElementById('fifth');
+const codeFifth = document.getElementById('codeFifth');
+
+const six = document.getElementById('six');
+const codeSix = document.getElementById('codeSix');
+
+const Native = document.getElementById('Native');
+const codeNative = document.getElementById('codeNative');
+
+firstBtn.addEventListener('click', () => {
+  codeFirst.classList.toggle('active');
+});
+
+secondBtn.addEventListener('click', () => {
+  codeSecond.classList.toggle('active');
+});
+
+thirdBtn.addEventListener('click', () => {
+  codeThird.classList.toggle('active');
+});
+
+fourthBtn.addEventListener('click', () => {
+  codeFourth.classList.toggle('active');
+});
+
+fifthBtn.addEventListener('click', () => {
+  codeFifth.classList.toggle('active');
+});
+
+six.addEventListener('click', () => {
+  codeSix.classList.toggle('active');
+});
+
+Native.addEventListener('click', () => {
+  codeNative.classList.toggle('active');
+});

example/src/themeTest.ts

@@ -0,0 +1,9 @@
+import { CustomTheme } from 'components/theme/theme.interface';
+
+export const newCustomTheme: CustomTheme = {
+  name: 'test',
+  styles: {
+    head: 'testClass',
+    list: 'listTest',
+  },
+};