Added new mode for created customs theme

src/cg-select.ts

@@ -25,7 +25,7 @@ import { ILanguage } from './interfaces/language.interface';
 
 import './main.scss';
 import { changeTheme } from './components/theme/theme';
-import { CustomTheme } from 'components/theme/theme.interface';
+import { CustomTheme, CustomThemeJson } from 'components/theme/theme.interface';
 
 /**
  * @class Class Description ICgSelect
@@ -37,7 +37,7 @@ export class CGSelect implements ICgSelect {
   selected?: string;
   placeholder?: string;
   items?: IItems[] | string[] | any;
-  theme?: string | CustomTheme;
+  theme?: string | CustomTheme | CustomThemeJson;
   searchMode?: boolean;
   closeOnSelect?: boolean;
   nativeSelectMode?: boolean;
@@ -357,7 +357,7 @@ export class CGSelect implements ICgSelect {
     this.carriage = this.element!.querySelector('.caret');
 
     if (this.theme) {
-      changeTheme(this.element!, this.theme!);
+      changeTheme(this.element!, this.theme);
     }
 
     if (this.nativeSelectMode === true) {

src/components/theme/theme.interface.ts

@@ -14,12 +14,12 @@ export interface CustomTheme {
 export interface CustomThemeJson {
   name: string;
   styles: {
-    head?: {};
-    list?: {};
-    placeholder?: {};
-    caret?: {};
-    search?: {};
-    chips?: {};
-    lable?: {};
+    head?: object;
+    list?: object;
+    placeholder?: object;
+    caret?: object;
+    search?: object;
+    chips?: object;
+    lable?: object;
   };
 }

src/components/theme/theme.ts

@@ -1,10 +1,13 @@
-import { CustomTheme } from './theme.interface';
+import { customStylesFormat } from '../utils/utils';
+import { CustomTheme, CustomThemeJson } from './theme.interface';
 
-export function changeTheme(element: Element, theme: string | CustomTheme) {
+export function changeTheme(element: Element, theme: string | CustomTheme | CustomThemeJson) {
   const select = element!.querySelector('.cg-select');
   const caret = element!.querySelector('.caret');
   const list = element!.querySelector('ul.list');
   const search = element!.querySelector('.inputSearch');
+  const placeholder = element!.querySelector('.selected');
+  // const chips = element!.querySelector('.multiselect-tag');
   const path = element.querySelectorAll('.pathWhite');
   const nativeSelect = element.querySelector('.nativeSelect');
 
@@ -45,7 +48,25 @@ export function changeTheme(element: Element, theme: string | CustomTheme) {
         break;
     }
   } else {
-    select!.classList.add(`${theme.styles.head}`);
-    list!.classList.add(`${theme.styles.list}`);
+    if (theme.name!) {
+      let customThemeHead = theme.styles.head! as object;
+      let customThemeList = theme.styles.list! as object;
+      let customThemeCaret = theme.styles.caret! as object;
+      let customThemeChips = theme.styles.chips! as object;
+      let customThemePl = theme.styles.placeholder! as object;
+      let customThemeSearch = theme.styles.search! as object;
+      // let customThemeLable = theme.styles.lable! as object;
+
+      customStylesFormat(customThemeHead, select!);
+      customStylesFormat(customThemeList, list!);
+      customStylesFormat(customThemeCaret, caret!);
+      // customStylesFormat(customThemeChips, select!);
+      customStylesFormat(customThemePl, placeholder!);
+      customStylesFormat(customThemeSearch, search!);
+      // customStylesFormat(customThemeLable, select!);
+    } else {
+      select!.classList.add(`${theme.styles.head}`);
+      list!.classList.add(`${theme.styles.list}`);
+    }
   }
 }

src/components/utils/utils.interface.ts

@@ -1,4 +1,4 @@
-import { CustomTheme } from 'components/theme/theme.interface';
+import { CustomTheme, CustomThemeJson } from 'components/theme/theme.interface';
 import { IItems } from 'interfaces/items.interface';
 
 /**
@@ -56,5 +56,5 @@ export interface ISelectedItems {
    * An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.
    * @type {boolean}
    */
-  theme?: string | CustomTheme;
+  theme?: string | CustomTheme | CustomThemeJson;
 }

src/interfaces/cg-select.interface.ts

@@ -1,4 +1,4 @@
-import { CustomTheme } from 'components/theme/theme.interface';
+import { CustomTheme, CustomThemeJson } from 'components/theme/theme.interface';
 import { IItems } from './items.interface';
 
 /**
@@ -30,7 +30,7 @@ export interface ICgSelect {
    * An optional parameter responsible for switching between different themes, the classic theme is set by default.
    * @type {string} values: dark, white
    */
-  theme?: string | CustomTheme;
+  theme?: string | CustomTheme | CustomThemeJson;
   /**
    * An optional parameter that adds a live search on the select elements.
    * @type {boolean}