Compare commits

..

6 Commits

Author SHA1 Message Date
MaxOvs19
6f964027ee Fixed docs 2023-03-21 15:51:50 +03:00
MaxOvs19
7a06e3a619 Fixed readme 2023-03-21 15:02:59 +03:00
MaxOvs19
e75cfd96a6 Ready to update 2023-03-21 14:44:24 +03:00
MaxOvs19
c635e838c8 Finished working 2023-03-20 20:25:14 +03:00
MaxOvs19
2d4d774931 Added new mode for created customs theme 2023-03-15 20:09:51 +03:00
MaxOvs19
2659db4326 Create new branch, added interface themeJson 2023-03-03 19:34:32 +03:00
50 changed files with 1469 additions and 117 deletions

View File

@ -59,3 +59,7 @@ Tested in JS and React. Errors in work in React applications are revealed.
- Moving an example using a select to a separate repository. - Moving an example using a select to a separate repository.
- Fixed bugs. - Fixed bugs.
- Changed structure. - Changed structure.
### 00.03.2023 - update 0.2.6
- Added new theme creation mode.

View File

@ -1,6 +1,8 @@
# CG-SELECT # CG-SELECT
## version ~ 0.2.5 ## version ~ 0.2.6
<a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
This component allows you to create a custom select. It offers more flexible customization and use of select. This component allows you to create a custom select. It offers more flexible customization and use of select.
Customization, multi-selection and live search by elements are available. Customization, multi-selection and live search by elements are available.
@ -67,20 +69,13 @@ const dropdown = new CGSelect({
## Example of different selects ## Example of different selects
Same working example -- https://cg-select.itguild.info/ <a href="https://cg-select.itguild.info/">View live example</a>
![image](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/MultiSelect.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
Built-in themes are also available: dark, white. To apply them, specify the theme attribute in the select settings and pass one of the values into it dark or white. Built-in themes are also available: dark, white. To apply them, specify the theme attribute in the select settings and pass one of the values into it dark or white.
All documentation on CG-SELECT is located in the folder of the same name. The documentation describes all methods and variables, there are also examples of passing settings to select. You can also open it on the page with an example, or follow the link below. All documentation on CG-SELECT is located in the folder of the same name. The documentation describes all methods and variables, there are also examples of passing settings to select. You can also open it on the page with an example, or follow the link below.
**To view it, follow the link -** https://cg-select.itguild.info/up_/documentation/index.html <a href="https://cg-select.itguild.info/up_/documentation/index.html">Documentation</a>
**Russian version README -** https://github.com/apuc/cg-select/blob/main/READMERU.md
## Contributing ## Contributing

View File

@ -1,6 +1,8 @@
# CG-SELECT # CG-SELECT
## version ~ 0.2.5 ## Версия ~ 0.2.6
<a href="https://github.com/apuc/cg-select/blob/main/README.md">English README</a>
Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select. Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое. Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
@ -15,13 +17,13 @@
- Переключить тему с темной на светлую. - Переключить тему с темной на светлую.
- Так же в документации указанны все элементы для катомизации с помощью CSS. - Так же в документации указанны все элементы для катомизации с помощью CSS.
## Installation ## Установка
``` ```
npm i cg-select npm i cg-select
``` ```
## Usage ## Использование
### Для создания компонента необходимо: ### Для создания компонента необходимо:
@ -68,33 +70,28 @@ const dropdown = new CGSelect({
## Примеры различных вариантов выбора. ## Примеры различных вариантов выбора.
Рабочий пример -- https://cg-select.itguild.info/ <a href="https://cg-select.itguild.info/">Рабочий пример</a>
![image](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/MultiSelect.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в CGSelect. Вы также можете открыть его на странице с примером, или перейти по ссылке ниже. Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в CGSelect. Вы также можете открыть его на странице с примером, или перейти по ссылке ниже.
**Для просмотра перейдите по ссылке -** https://cg-select.itguild.info/up_/documentation/index.html <a href="https://cg-select.itguild.info/up_/documentation/index.html">Документация</a>
## Contributing ## Содействие
1. Fork it! 1. Сделайте Fork!
2. Create your feature branch: `git checkout -b my-new-feature` 2. Создайте свою ветку: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'` 3. Зафиксируйте свои изменения: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature` 4. Загрузите ветку: `git push origin my-new-feature`
5. Submit a pull request :D 5. Отправте запрос на вытягивание изменений :D
## Compatibility ## Совместимость
| Application Compatibility | JS | React | Angular | Vue | | Совместимость в приложениях | JS | React | Angular | Vue |
| ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | | --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | | CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
| Comment | Tested in Js applications and it worksуспешно. | Works only with a crutch in the form `setTimeout()` | not yet available | not yet available | | Комментарий | Протестировано в Js приложениях | Работает только с костылем в виде `setTimeout()` | пока недоступно | пока недоступно |
## History ## История
16.12.2022 - release version 0.1.0! 16.12.2022 - release version 0.1.0!

View File

@ -3803,6 +3803,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -242,6 +242,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -267,6 +267,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -273,6 +273,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -260,6 +260,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -249,6 +249,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -258,6 +258,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -272,6 +272,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -266,6 +266,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -257,6 +257,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -283,6 +283,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -255,6 +255,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -232,6 +232,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -233,6 +233,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -70,6 +70,18 @@
class="tsd-signature-symbol" class="tsd-signature-symbol"
>: </span >: </span
><span class="tsd-signature-type">string</span ><span class="tsd-signature-type">string</span
><span class="tsd-signature-symbol"> | </span
><a
href="../interfaces/theme_interface.CustomTheme.html"
class="tsd-signature-type"
data-tsd-kind="Interface"
>CustomTheme</a
><span class="tsd-signature-symbol"> | </span
><a
href="../interfaces/theme_interface.CustomThemeJson.html"
class="tsd-signature-type"
data-tsd-kind="Interface"
>CustomThemeJson</a
><span class="tsd-signature-symbol">)</span ><span class="tsd-signature-symbol">)</span
><span class="tsd-signature-symbol">: </span ><span class="tsd-signature-symbol">: </span
><span class="tsd-signature-type">void</span ><span class="tsd-signature-type">void</span
@ -102,7 +114,22 @@
<h5>element: <span class="tsd-signature-type">Element</span></h5> <h5>element: <span class="tsd-signature-type">Element</span></h5>
</li> </li>
<li> <li>
<h5>theme: <span class="tsd-signature-type">string</span></h5> <h5>
theme: <span class="tsd-signature-type">string</span
><span class="tsd-signature-symbol"> | </span
><a
href="../interfaces/theme_interface.CustomTheme.html"
class="tsd-signature-type"
data-tsd-kind="Interface"
>CustomTheme</a
><span class="tsd-signature-symbol"> | </span
><a
href="../interfaces/theme_interface.CustomThemeJson.html"
class="tsd-signature-type"
data-tsd-kind="Interface"
>CustomThemeJson</a
>
</h5>
</li> </li>
</ul> </ul>
</div> </div>
@ -114,8 +141,8 @@
<li> <li>
Defined in Defined in
<a <a
href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/theme/theme.ts#L1" href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.ts#L4"
>components/theme/theme.ts:1</a >theme.ts:4</a
> >
</li> </li>
</ul> </ul>
@ -237,6 +264,9 @@
<li class="selected tsd-kind-module"> <li class="selected tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -62,7 +62,7 @@
</a> </a>
<a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none"> <a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
<h2>version ~ 0.2.5</h2> <h2>version ~ 0.2.6</h2>
</a> </a>
<p> <p>
This component allows you to create a custom select. It offers more flexible This component allows you to create a custom select. It offers more flexible
@ -150,15 +150,9 @@
<h2>Example of different selects</h2> <h2>Example of different selects</h2>
</a> </a>
<p> <p>
Same working example -- View live example
<a href="https://cg-select.itguild.info/">https://cg-select.itguild.info/</a> <a href="https://cg-select.itguild.info/">https://cg-select.itguild.info/</a>
</p> </p>
<p>
<img src="../src/images/DefaultSelect.png" alt="image" />
<img src="../src/images/MultiSelect.png" alt="image" />
<img src="../src/images/WhiteTheme.png" alt="image" />
<img src="../src/images/Categories.png" alt="image" />
</p>
<p> <p>
Built-in themes are also available: dark, white. To apply them, specify the theme Built-in themes are also available: dark, white. To apply them, specify the theme
attribute in the select settings and pass one of the values into it dark or white. attribute in the select settings and pass one of the values into it dark or white.
@ -343,6 +337,10 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="modules/components_theme_theme.html">Theme</a> <a href="modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -444,6 +444,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -404,6 +404,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -544,6 +544,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -1052,6 +1052,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -563,6 +563,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -387,6 +387,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -385,6 +385,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -0,0 +1,493 @@
<!DOCTYPE html>
<html class="default" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<title>CustomTheme | cg-select</title>
<meta name="description" content="Documentation for cg-select" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../assets/style.css" />
<link rel="stylesheet" href="../assets/highlight.css" />
<script async src="../assets/search.js" id="search-script"></script>
</head>
<body>
<script>
document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
</script>
<header class="tsd-page-toolbar">
<div class="tsd-toolbar-contents container">
<div class="table-cell" id="tsd-search" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
fill="var(--color-text)"
></path></svg></label
><input type="text" id="tsd-search-field" aria-label="Search" />
</div>
<div class="field">
<div id="tsd-toolbar-links"></div>
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="../index.html" class="title">Home</a>
<a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
</div>
<div class="table-cell" id="tsd-widgets">
<a
href="#"
class="tsd-widget tsd-toolbar-icon menu no-caption"
data-toggle="menu"
aria-label="Menu"
><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
<rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
<rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
></a>
</div>
</div>
</header>
<div class="container container-main">
<div class="col-8 col-content">
<div class="tsd-page-title">
<ul class="tsd-breadcrumb">
<li><a href="../modules.html">All modules</a></li>
<li><a href="../modules/theme_interface.html">theme.interface</a></li>
<li><a href="theme_interface.CustomTheme.html">CustomTheme</a></li>
</ul>
<h1>Interface CustomTheme</h1>
</div>
<section class="tsd-panel tsd-hierarchy">
<h4>Hierarchy</h4>
<ul class="tsd-hierarchy">
<li><span class="target">CustomTheme</span></li>
</ul>
</section>
<aside class="tsd-sources">
<ul>
<li>
Defined in
<a
href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L1"
>theme.interface.ts:1</a
>
</li>
</ul>
</aside>
<section class="tsd-panel-group tsd-index-group">
<section class="tsd-panel tsd-index-panel">
<details class="tsd-index-content tsd-index-accordion" open>
<summary class="tsd-accordion-summary tsd-index-summary">
<h5
class="tsd-index-heading uppercase"
role="button"
aria-expanded="false"
tabindex="0"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z"
fill="var(--color-text)"
></path>
</svg>
Index
</h5>
</summary>
<div class="tsd-accordion-details">
<section class="tsd-index-section">
<h3 class="tsd-index-heading">Properties</h3>
<div class="tsd-index-list">
<a
href="theme_interface.CustomTheme.html#name"
class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<rect
fill="var(--color-icon-background)"
stroke="#FF984D"
stroke-width="1.5"
x="1"
y="1"
width="22"
height="22"
rx="12"
id="icon-1024-path"
></rect>
<path
d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z"
fill="var(--color-text)"
id="icon-1024-text"
></path></svg
><span>name</span></a
>
<a
href="theme_interface.CustomTheme.html#styles"
class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<use href="#icon-1024-path"></use>
<use href="#icon-1024-text"></use></svg
><span>styles</span></a
>
</div>
</section>
</div>
</details>
</section>
</section>
<section class="tsd-panel-group tsd-member-group">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
<a id="name" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link">
<span>name</span
><a href="#name" aria-label="Permalink" class="tsd-anchor-icon"
><svg
class="icon icon-tabler icon-tabler-link"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
<path
d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
id="icon-anchor-b"
></path>
<path
d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
id="icon-anchor-c"
></path></svg
></a>
</h3>
<div class="tsd-signature">
name<span class="tsd-signature-symbol">:</span>
<span class="tsd-signature-type">string</span>
</div>
<aside class="tsd-sources">
<ul>
<li>
Defined in
<a
href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L2"
>theme.interface.ts:2</a
>
</li>
</ul>
</aside>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
<a id="styles" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link">
<span>styles</span
><a href="#styles" aria-label="Permalink" class="tsd-anchor-icon"
><svg
class="icon icon-tabler icon-tabler-link"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<use href="#icon-anchor-a"></use>
<use href="#icon-anchor-b"></use>
<use href="#icon-anchor-c"></use></svg
></a>
</h3>
<div class="tsd-signature">
styles<span class="tsd-signature-symbol">:</span>
<span class="tsd-signature-symbol">{ </span><br /><span>    </span>caret<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span
><span class="tsd-signature-symbol">; </span><br /><span>    </span>chips<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span
><span class="tsd-signature-symbol">; </span><br /><span>    </span>head<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span
><span class="tsd-signature-symbol">; </span><br /><span>    </span>lable<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span
><span class="tsd-signature-symbol">; </span><br /><span>    </span>list<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span
><span class="tsd-signature-symbol">; </span><br /><span>    </span>placeholder<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span
><span class="tsd-signature-symbol">; </span><br /><span>    </span>search<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span
><span class="tsd-signature-symbol">; </span><br /><span class="tsd-signature-symbol"
>}</span
>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> caret<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span>
</h5>
</li>
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> chips<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span>
</h5>
</li>
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> head<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span>
</h5>
</li>
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> lable<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span>
</h5>
</li>
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> list<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span>
</h5>
</li>
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> placeholder<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span>
</h5>
</li>
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> search<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">string</span>
</h5>
</li>
</ul>
</div>
<aside class="tsd-sources">
<ul>
<li>
Defined in
<a
href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L3"
>theme.interface.ts:3</a
>
</li>
</ul>
</aside>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion">
<summary class="tsd-accordion-summary">
<h3>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path
d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
fill="var(--color-text)"
></path>
</svg>
Settings
</h3>
</summary>
<div class="tsd-accordion-details">
<div class="tsd-filter-visibility">
<h4 class="uppercase">Member Visibility</h4>
<form>
<ul id="tsd-filter-options">
<li class="tsd-filter-item">
<label class="tsd-filter-input"
><input type="checkbox" id="tsd-filter-private" name="private" /><svg
width="32"
height="32"
viewBox="0 0 32 32"
aria-hidden="true"
>
<rect
class="tsd-checkbox-background"
width="30"
height="30"
x="1"
y="1"
rx="6"
fill="none"
></rect>
<path
class="tsd-checkbox-checkmark"
d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
stroke="none"
stroke-width="3.5"
stroke-linejoin="round"
fill="none"
></path></svg
><span>Private</span></label
>
</li>
</ul>
</form>
</div>
<div class="tsd-theme-toggle">
<h4 class="uppercase">Theme</h4>
<select id="theme">
<option value="os">OS</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
</div>
</details>
</div>
<nav class="tsd-navigation primary">
<details class="tsd-index-accordion" open>
<summary class="tsd-accordion-summary">
<h3>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path
d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
fill="var(--color-text)"
></path>
</svg>
Modules
</h3>
</summary>
<div class="tsd-accordion-details">
<ul>
<li class="current selected">
<a href="../modules.html">All modules</a>
<ul>
<li class="tsd-kind-module">
<a href="../modules/cg_select.html">Cg-<wbr />select</a>
</li>
<li class="tsd-kind-module">
<a href="../modules/interfaces_cg_select_interface.html"
>Cg-<wbr />select.interface</a
>
</li>
<li class="tsd-kind-module">
<a href="../modules/interfaces_items_interface.html">Items.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
<li class="tsd-kind-module">
<a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module">
<a href="../modules/components_create_element_create_element.html"
>Create-<wbr />element</a
>
</li>
<li class="tsd-kind-module">
<a href="../modules/components_create_element_create_element_interface.html"
>Create-<wbr />element.interface</a
>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a>
</li>
<li class="tsd-kind-module selected">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module">
<a href="../modules/language_language.html">language</a>
</li>
<li class="tsd-kind-module">
<a href="../modules/interfaces_language_interface.html">Language.interface</a>
</li>
</ul>
</li>
</ul>
</div>
</details>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul>
<li class="current tsd-kind-interface tsd-parent-kind-module">
<a href="theme_interface.CustomTheme.html" class="tsd-index-link"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<rect
fill="var(--color-icon-background)"
stroke="var(--color-ts-interface)"
stroke-width="1.5"
x="1"
y="1"
width="22"
height="22"
rx="6"
id="icon-256-path"
></rect>
<path
d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
fill="var(--color-text)"
id="icon-256-text"
></path></svg
><span>Custom<wbr />Theme</span></a
>
<ul>
<li class="tsd-kind-property tsd-parent-kind-interface">
<a href="theme_interface.CustomTheme.html#name" class="tsd-index-link"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<use href="#icon-1024-path"></use>
<use href="#icon-1024-text"></use></svg
>name</a
>
</li>
<li class="tsd-kind-property tsd-parent-kind-interface">
<a href="theme_interface.CustomTheme.html#styles" class="tsd-index-link"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<use href="#icon-1024-path"></use>
<use href="#icon-1024-text"></use></svg
>styles</a
>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="../assets/main.js"></script>
</body>
</html>

View File

@ -0,0 +1,481 @@
<!DOCTYPE html>
<html class="default" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<title>CustomThemeJson | cg-select</title>
<meta name="description" content="Documentation for cg-select" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../assets/style.css" />
<link rel="stylesheet" href="../assets/highlight.css" />
<script async src="../assets/search.js" id="search-script"></script>
</head>
<body>
<script>
document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
</script>
<header class="tsd-page-toolbar">
<div class="tsd-toolbar-contents container">
<div class="table-cell" id="tsd-search" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
fill="var(--color-text)"
></path></svg></label
><input type="text" id="tsd-search-field" aria-label="Search" />
</div>
<div class="field">
<div id="tsd-toolbar-links"></div>
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="../index.html" class="title">Home</a>
<a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
</div>
<div class="table-cell" id="tsd-widgets">
<a
href="#"
class="tsd-widget tsd-toolbar-icon menu no-caption"
data-toggle="menu"
aria-label="Menu"
><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
<rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
<rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
></a>
</div>
</div>
</header>
<div class="container container-main">
<div class="col-8 col-content">
<div class="tsd-page-title">
<ul class="tsd-breadcrumb">
<li><a href="../modules.html">All modules</a></li>
<li><a href="../modules/theme_interface.html">theme.interface</a></li>
<li><a href="theme_interface.CustomThemeJson.html">CustomThemeJson</a></li>
</ul>
<h1>Interface CustomThemeJson</h1>
</div>
<section class="tsd-panel tsd-hierarchy">
<h4>Hierarchy</h4>
<ul class="tsd-hierarchy">
<li><span class="target">CustomThemeJson</span></li>
</ul>
</section>
<aside class="tsd-sources">
<ul>
<li>
Defined in
<a
href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L14"
>theme.interface.ts:14</a
>
</li>
</ul>
</aside>
<section class="tsd-panel-group tsd-index-group">
<section class="tsd-panel tsd-index-panel">
<details class="tsd-index-content tsd-index-accordion" open>
<summary class="tsd-accordion-summary tsd-index-summary">
<h5
class="tsd-index-heading uppercase"
role="button"
aria-expanded="false"
tabindex="0"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z"
fill="var(--color-text)"
></path>
</svg>
Index
</h5>
</summary>
<div class="tsd-accordion-details">
<section class="tsd-index-section">
<h3 class="tsd-index-heading">Properties</h3>
<div class="tsd-index-list">
<a
href="theme_interface.CustomThemeJson.html#name"
class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<rect
fill="var(--color-icon-background)"
stroke="#FF984D"
stroke-width="1.5"
x="1"
y="1"
width="22"
height="22"
rx="12"
id="icon-1024-path"
></rect>
<path
d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z"
fill="var(--color-text)"
id="icon-1024-text"
></path></svg
><span>name</span></a
>
<a
href="theme_interface.CustomThemeJson.html#styles"
class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<use href="#icon-1024-path"></use>
<use href="#icon-1024-text"></use></svg
><span>styles</span></a
>
</div>
</section>
</div>
</details>
</section>
</section>
<section class="tsd-panel-group tsd-member-group">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
<a id="name" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link">
<span>name</span
><a href="#name" aria-label="Permalink" class="tsd-anchor-icon"
><svg
class="icon icon-tabler icon-tabler-link"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
<path
d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
id="icon-anchor-b"
></path>
<path
d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
id="icon-anchor-c"
></path></svg
></a>
</h3>
<div class="tsd-signature">
name<span class="tsd-signature-symbol">:</span>
<span class="tsd-signature-type">string</span>
</div>
<aside class="tsd-sources">
<ul>
<li>
Defined in
<a
href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L15"
>theme.interface.ts:15</a
>
</li>
</ul>
</aside>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
<a id="styles" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link">
<span>styles</span
><a href="#styles" aria-label="Permalink" class="tsd-anchor-icon"
><svg
class="icon icon-tabler icon-tabler-link"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<use href="#icon-anchor-a"></use>
<use href="#icon-anchor-b"></use>
<use href="#icon-anchor-c"></use></svg
></a>
</h3>
<div class="tsd-signature">
styles<span class="tsd-signature-symbol">:</span>
<span class="tsd-signature-symbol">{ </span><br /><span>    </span>caret<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span
><span class="tsd-signature-symbol">; </span><br /><span>    </span>head<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span
><span class="tsd-signature-symbol">; </span><br /><span>    </span>lable<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span
><span class="tsd-signature-symbol">; </span><br /><span>    </span>list<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span
><span class="tsd-signature-symbol">; </span><br /><span>    </span>placeholder<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span
><span class="tsd-signature-symbol">; </span><br /><span>    </span>search<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span
><span class="tsd-signature-symbol">; </span><br /><span class="tsd-signature-symbol"
>}</span
>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> caret<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span>
</h5>
</li>
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> head<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span>
</h5>
</li>
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> lable<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span>
</h5>
</li>
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> list<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span>
</h5>
</li>
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> placeholder<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span>
</h5>
</li>
<li class="tsd-parameter">
<h5>
<code class="tsd-tag ts-flagOptional">Optional</code> search<span
class="tsd-signature-symbol"
>?: </span
><span class="tsd-signature-type">object</span>
</h5>
</li>
</ul>
</div>
<aside class="tsd-sources">
<ul>
<li>
Defined in
<a
href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L16"
>theme.interface.ts:16</a
>
</li>
</ul>
</aside>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion">
<summary class="tsd-accordion-summary">
<h3>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path
d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
fill="var(--color-text)"
></path>
</svg>
Settings
</h3>
</summary>
<div class="tsd-accordion-details">
<div class="tsd-filter-visibility">
<h4 class="uppercase">Member Visibility</h4>
<form>
<ul id="tsd-filter-options">
<li class="tsd-filter-item">
<label class="tsd-filter-input"
><input type="checkbox" id="tsd-filter-private" name="private" /><svg
width="32"
height="32"
viewBox="0 0 32 32"
aria-hidden="true"
>
<rect
class="tsd-checkbox-background"
width="30"
height="30"
x="1"
y="1"
rx="6"
fill="none"
></rect>
<path
class="tsd-checkbox-checkmark"
d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
stroke="none"
stroke-width="3.5"
stroke-linejoin="round"
fill="none"
></path></svg
><span>Private</span></label
>
</li>
</ul>
</form>
</div>
<div class="tsd-theme-toggle">
<h4 class="uppercase">Theme</h4>
<select id="theme">
<option value="os">OS</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
</div>
</details>
</div>
<nav class="tsd-navigation primary">
<details class="tsd-index-accordion" open>
<summary class="tsd-accordion-summary">
<h3>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path
d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
fill="var(--color-text)"
></path>
</svg>
Modules
</h3>
</summary>
<div class="tsd-accordion-details">
<ul>
<li class="current selected">
<a href="../modules.html">All modules</a>
<ul>
<li class="tsd-kind-module">
<a href="../modules/cg_select.html">Cg-<wbr />select</a>
</li>
<li class="tsd-kind-module">
<a href="../modules/interfaces_cg_select_interface.html"
>Cg-<wbr />select.interface</a
>
</li>
<li class="tsd-kind-module">
<a href="../modules/interfaces_items_interface.html">Items.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
<li class="tsd-kind-module">
<a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module">
<a href="../modules/components_create_element_create_element.html"
>Create-<wbr />element</a
>
</li>
<li class="tsd-kind-module">
<a href="../modules/components_create_element_create_element_interface.html"
>Create-<wbr />element.interface</a
>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a>
</li>
<li class="tsd-kind-module selected">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module">
<a href="../modules/language_language.html">language</a>
</li>
<li class="tsd-kind-module">
<a href="../modules/interfaces_language_interface.html">Language.interface</a>
</li>
</ul>
</li>
</ul>
</div>
</details>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul>
<li class="current tsd-kind-interface tsd-parent-kind-module">
<a href="theme_interface.CustomThemeJson.html" class="tsd-index-link"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<rect
fill="var(--color-icon-background)"
stroke="var(--color-ts-interface)"
stroke-width="1.5"
x="1"
y="1"
width="22"
height="22"
rx="6"
id="icon-256-path"
></rect>
<path
d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
fill="var(--color-text)"
id="icon-256-text"
></path></svg
><span>Custom<wbr />Theme<wbr />Json</span></a
>
<ul>
<li class="tsd-kind-property tsd-parent-kind-interface">
<a href="theme_interface.CustomThemeJson.html#name" class="tsd-index-link"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<use href="#icon-1024-path"></use>
<use href="#icon-1024-text"></use></svg
>name</a
>
</li>
<li class="tsd-kind-property tsd-parent-kind-interface">
<a href="theme_interface.CustomThemeJson.html#styles" class="tsd-index-link"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<use href="#icon-1024-path"></use>
<use href="#icon-1024-text"></use></svg
>styles</a
>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="../assets/main.js"></script>
</body>
</html>

View File

@ -280,6 +280,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="modules/components_theme_theme.html">Theme</a> <a href="modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -288,6 +288,10 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -218,6 +218,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -245,6 +245,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -223,6 +223,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -219,6 +219,9 @@
<li class="selected tsd-kind-module"> <li class="selected tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -231,6 +231,10 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -231,6 +231,10 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -219,6 +219,10 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -219,6 +219,10 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -226,6 +226,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="selected tsd-kind-module"> <li class="selected tsd-kind-module">

View File

@ -0,0 +1,276 @@
<!DOCTYPE html>
<html class="default" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<title>theme.interface | cg-select</title>
<meta name="description" content="Documentation for cg-select" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../assets/style.css" />
<link rel="stylesheet" href="../assets/highlight.css" />
<script async src="../assets/search.js" id="search-script"></script>
</head>
<body>
<script>
document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
</script>
<header class="tsd-page-toolbar">
<div class="tsd-toolbar-contents container">
<div class="table-cell" id="tsd-search" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
fill="var(--color-text)"
></path></svg></label
><input type="text" id="tsd-search-field" aria-label="Search" />
</div>
<div class="field">
<div id="tsd-toolbar-links"></div>
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="../index.html" class="title">Home</a>
<a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
</div>
<div class="table-cell" id="tsd-widgets">
<a
href="#"
class="tsd-widget tsd-toolbar-icon menu no-caption"
data-toggle="menu"
aria-label="Menu"
><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
<rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
<rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
></a>
</div>
</div>
</header>
<div class="container container-main">
<div class="col-8 col-content">
<div class="tsd-page-title">
<ul class="tsd-breadcrumb">
<li><a href="../modules.html">All modules</a></li>
<li><a href="theme_interface.html">theme.interface</a></li>
</ul>
<h1>Module theme.interface</h1>
</div>
<aside class="tsd-sources">
<ul>
<li>
Defined in
<a
href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L1"
>theme.interface.ts:1</a
>
</li>
</ul>
</aside>
<section class="tsd-panel-group">
<section class="tsd-panel tsd-typography"></section>
</section>
<section class="tsd-panel-group tsd-index-group">
<section class="tsd-panel tsd-index-panel">
<h3 class="tsd-index-heading uppercase">Index</h3>
<section class="tsd-index-section">
<h3 class="tsd-index-heading">Interfaces</h3>
<div class="tsd-index-list">
<a
href="../interfaces/theme_interface.CustomTheme.html"
class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<rect
fill="var(--color-icon-background)"
stroke="var(--color-ts-interface)"
stroke-width="1.5"
x="1"
y="1"
width="22"
height="22"
rx="6"
id="icon-256-path"
></rect>
<path
d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
fill="var(--color-text)"
id="icon-256-text"
></path></svg
><span>Custom<wbr />Theme</span></a
>
<a
href="../interfaces/theme_interface.CustomThemeJson.html"
class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<use href="#icon-256-path"></use>
<use href="#icon-256-text"></use></svg
><span>Custom<wbr />Theme<wbr />Json</span></a
>
</div>
</section>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion">
<summary class="tsd-accordion-summary">
<h3>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path
d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
fill="var(--color-text)"
></path>
</svg>
Settings
</h3>
</summary>
<div class="tsd-accordion-details">
<div class="tsd-filter-visibility">
<h4 class="uppercase">Member Visibility</h4>
<form>
<ul id="tsd-filter-options">
<li class="tsd-filter-item">
<label class="tsd-filter-input"
><input type="checkbox" id="tsd-filter-private" name="private" /><svg
width="32"
height="32"
viewBox="0 0 32 32"
aria-hidden="true"
>
<rect
class="tsd-checkbox-background"
width="30"
height="30"
x="1"
y="1"
rx="6"
fill="none"
></rect>
<path
class="tsd-checkbox-checkmark"
d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
stroke="none"
stroke-width="3.5"
stroke-linejoin="round"
fill="none"
></path></svg
><span>Private</span></label
>
</li>
</ul>
</form>
</div>
<div class="tsd-theme-toggle">
<h4 class="uppercase">Theme</h4>
<select id="theme">
<option value="os">OS</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
</div>
</details>
</div>
<nav class="tsd-navigation primary">
<details class="tsd-index-accordion" open>
<summary class="tsd-accordion-summary">
<h3>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path
d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
fill="var(--color-text)"
></path>
</svg>
Modules
</h3>
</summary>
<div class="tsd-accordion-details">
<ul>
<li class="current selected">
<a href="../modules.html">All modules</a>
<ul>
<li class="tsd-kind-module">
<a href="../modules/cg_select.html">Cg-<wbr />select</a>
</li>
<li class="tsd-kind-module">
<a href="../modules/interfaces_cg_select_interface.html"
>Cg-<wbr />select.interface</a
>
</li>
<li class="tsd-kind-module">
<a href="../modules/interfaces_items_interface.html">Items.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
<li class="tsd-kind-module">
<a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module">
<a href="../modules/components_create_element_create_element.html"
>Create-<wbr />element</a
>
</li>
<li class="tsd-kind-module">
<a href="../modules/components_create_element_create_element_interface.html"
>Create-<wbr />element.interface</a
>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module">
<a href="../components_theme_theme.html">Theme</a>
</li>
<li class="tsd-kind-module selected">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module">
<a href="../modules/language_language.html">language</a>
</li>
<li class="tsd-kind-module">
<a href="../modules/interfaces_language_interface.html">Language.interface</a>
</li>
</ul>
</li>
</ul>
</div>
</details>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul>
<li class="tsd-kind-interface tsd-parent-kind-module">
<a href="../interfaces/theme_interface.CustomTheme.html" class="tsd-index-link"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<use href="#icon-256-path"></use>
<use href="#icon-256-text"></use></svg
>Custom<wbr />Theme</a
>
</li>
<li class="tsd-kind-interface tsd-parent-kind-module">
<a href="../interfaces/theme_interface.CustomThemeJson.html" class="tsd-index-link"
><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
<use href="#icon-256-path"></use>
<use href="#icon-256-text"></use></svg
>Custom<wbr />Theme<wbr />Json</a
>
</li>
</ul>
</nav>
</div>
</div>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="../assets/main.js"></script>
</body>
</html>

View File

@ -193,6 +193,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

View File

@ -193,6 +193,9 @@
<li class="tsd-kind-module"> <li class="tsd-kind-module">
<a href="../modules/components_theme_theme.html">Theme</a> <a href="../modules/components_theme_theme.html">Theme</a>
</li> </li>
<li class="tsd-kind-module">
<a href="../modules/theme_interface.html">Theme.interface</a>
</li>
<li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li> <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
<li class="tsd-kind-module"> <li class="tsd-kind-module">

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.2.5", "version": "0.2.6",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cg-select", "name": "cg-select",
"version": "0.2.5", "version": "0.2.6",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@parcel/optimizer-css": "^2.8.0", "@parcel/optimizer-css": "^2.8.0",

View File

@ -1,6 +1,6 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.2.5", "version": "0.2.6",
"source": "index.js", "source": "index.js",
"main": "dist/index.js", "main": "dist/index.js",
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",

View File

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

View File

@ -10,3 +10,15 @@ export interface CustomTheme {
lable?: string; lable?: string;
}; };
} }
export interface CustomThemeJson {
name: string;
styles: {
head?: object;
list?: object;
placeholder?: object;
caret?: object;
search?: object;
lable?: object;
};
}

View File

@ -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 select = element!.querySelector('.cg-select');
const caret = element!.querySelector('.caret'); const caret = element!.querySelector('.caret');
const list = element!.querySelector('ul.list'); const list = element!.querySelector('ul.list');
const search = element!.querySelector('.inputSearch'); const search = element!.querySelector('.inputSearch');
const placeholder = element!.querySelector('.selected');
const lable = document.querySelector('.label');
const path = element.querySelectorAll('.pathWhite'); const path = element.querySelectorAll('.pathWhite');
const nativeSelect = element.querySelector('.nativeSelect'); const nativeSelect = element.querySelector('.nativeSelect');
@ -45,7 +48,23 @@ export function changeTheme(element: Element, theme: string | CustomTheme) {
break; break;
} }
} else { } else {
select!.classList.add(`${theme.styles.head}`); if (theme.name!) {
list!.classList.add(`${theme.styles.list}`); let customThemeHead = theme.styles.head! as object;
let customThemeList = theme.styles.list! as object;
let customThemeCaret = theme.styles.caret! 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(customThemePl, placeholder!);
customStylesFormat(customThemeSearch, search!);
customStylesFormat(customThemeLable, lable!);
} else {
select!.classList.add(`${theme.styles.head}`);
list!.classList.add(`${theme.styles.list}`);
}
} }
} }

View File

@ -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'; 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. * An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.
* @type {boolean} * @type {boolean}
*/ */
theme?: string | CustomTheme; theme?: string | CustomTheme | CustomThemeJson;
} }

View File

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

View File

@ -1,74 +1,14 @@
{ {
// "include": ["src/**/*", "index.ts"], // "include": ["src/**/*", "index.ts"],
"compilerOptions": { "compilerOptions": {
/* Projects */
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */ /* Language and Environment */
"target": "es2017" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, "target": "es2017" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
// "jsx": "preserve", /* Specify what JSX code is generated. */
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
/* Modules */ /* Modules */
"module": "commonjs" /* Specify what module code is generated. */, "module": "commonjs" /* Specify what module code is generated. */,
"rootDir": "./" /* Specify the root folder within your source files. */, "rootDir": "./" /* Specify the root folder within your source files. */,
// "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
"baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */, "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
// "resolveJsonModule": true, /* Enable importing .json files. */
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
/* JavaScript Support */
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
/* Emit */
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
"outDir": "./dist" /* Specify an output folder for all emitted files. */, "outDir": "./dist" /* Specify an output folder for all emitted files. */,
// "removeComments": true, /* Disable emitting comments. */
// "noEmit": true, /* Disable emitting files from a compilation. */
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
// "newLine": "crlf", /* Set the newline character for emitting files. */
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
/* Interop Constraints */
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
"allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */, "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */, "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */