From 102fb5a7b15f4174410fe771e29a6be1605274b1 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 26 Jan 2023 19:06:17 +0300 Subject: [PATCH 1/3] Added new theme fn --- example/index.js | 1 + src/cg-select.ts | 27 +++++++++++++++++++++- src/components/theme/theme.json | 11 +++++++++ src/interfaces/cg-select.interface.ts | 1 + src/main.scss | 10 ++------- src/style/classicTheme.scss | 14 ++++++++++++ src/style/darkTheme.scss | 32 +++++++++++++++++++++++++++ 7 files changed, 87 insertions(+), 9 deletions(-) create mode 100644 src/components/theme/theme.json create mode 100644 src/style/classicTheme.scss create mode 100644 src/style/darkTheme.scss diff --git a/example/index.js b/example/index.js index 55d9aaa..131eaa1 100644 --- a/example/index.js +++ b/example/index.js @@ -25,6 +25,7 @@ const dropdown = new CGSelect({ width: '824px', }, }, + theme: 'dark' }); // ------------------------------NativeSelect----------------------- diff --git a/src/cg-select.ts b/src/cg-select.ts index 37319d4..d45a1f2 100644 --- a/src/cg-select.ts +++ b/src/cg-select.ts @@ -37,6 +37,7 @@ export class CGSelect implements ICgSelect { placeholder?: string; items?: IItems[] | string[] | any; darkTheme?: boolean; + theme?: string; searchMode?: boolean; closeOnSelect?: boolean; nativeSelectMode?: boolean; @@ -195,7 +196,7 @@ export class CGSelect implements ICgSelect { lable, event, selected, - placeholder, + placeholder, theme } = setting; this.options = setting; @@ -215,6 +216,7 @@ export class CGSelect implements ICgSelect { this.event = event; this.selected = selected; this.placeholder = placeholder; + this.theme = theme; const elem = document.querySelector(this.selector!); this.element = elem; @@ -358,6 +360,7 @@ export class CGSelect implements ICgSelect { if (this.darkTheme == false) { this.checkTheme(); } + this.themeCheck(); if (this.nativeSelectMode === true) { this.selectMode(this.nativeSelectMode); @@ -680,6 +683,28 @@ export class CGSelect implements ICgSelect { } } + private themeCheck(): void{ + const select = this.element!.querySelector('.cg-select'); + const caret = this.element!.querySelector('.caret'); + const list = this.element!.querySelector('ul.list'); + const search = this.element!.querySelector('.inputSearch'); + + switch (this.theme) { + case 'classic': + console.log('sss'); + break; + case 'dark': + console.log('dark'); + break; + case 'white': + console.log('white'); + break; + + default: + break; + } + } + /** * @private * @param {boolean} nativeSelectMode parameter responsible for adding native select. diff --git a/src/components/theme/theme.json b/src/components/theme/theme.json new file mode 100644 index 0000000..01d7937 --- /dev/null +++ b/src/components/theme/theme.json @@ -0,0 +1,11 @@ +[ + { + "type": "classic" + }, + { + "type": "dark" + }, + { + "type": "white" + } +] \ No newline at end of file diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts index a7788b3..012d1e5 100644 --- a/src/interfaces/cg-select.interface.ts +++ b/src/interfaces/cg-select.interface.ts @@ -30,6 +30,7 @@ export interface ICgSelect { * @type {boolean} */ darkTheme?: boolean; + theme?: string; /** * An optional parameter that adds a live search on the select elements. * @type {boolean} diff --git a/src/main.scss b/src/main.scss index 6a42d86..cd51e94 100644 --- a/src/main.scss +++ b/src/main.scss @@ -3,6 +3,8 @@ @import './style/svgStyle.scss'; @import './style/whiteTheme.scss'; @import './style/displayMode.scss'; +@import './style/classicTheme.scss'; +@import './style/darkTheme.scss'; // ----Layout---- .cg-dropdown { @@ -26,7 +28,6 @@ flex-grow: 1; min-height: 50px; - color: #fff; padding: 5px; display: -webkit-box; @@ -42,7 +43,6 @@ align-items: center; text-overflow: ellipsis; - background: #2a2f3b; border: none; cursor: pointer; @@ -70,8 +70,6 @@ -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; - - background: #394050; } } @@ -114,10 +112,6 @@ margin-top: -0.2px; list-style: none; - color: white; - background: #2a2f3b; - border: 1px #0a0b0e solid; - border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; diff --git a/src/style/classicTheme.scss b/src/style/classicTheme.scss new file mode 100644 index 0000000..13dbb9f --- /dev/null +++ b/src/style/classicTheme.scss @@ -0,0 +1,14 @@ +.cg-select{ + color: #fff; + background: #2a2f3b; + + &:hover { + background: #394050; + } +} + +.list { + color: white; + background: #2a2f3b; + border: 1px #0a0b0e solid; +} \ No newline at end of file diff --git a/src/style/darkTheme.scss b/src/style/darkTheme.scss new file mode 100644 index 0000000..bec07f8 --- /dev/null +++ b/src/style/darkTheme.scss @@ -0,0 +1,32 @@ +.selectDark { + background: rgb(29, 29, 29) !important; + } + +// .selectDark, +// .listDark, +// .inputWhite, +// .pathBlack, +// .selectWhite { +// color: black !important; +// } + + .caretWhite { + border-top: 6px solid black !important; + } + + .listWhite { + background-color: white !important; + } + + .inputWhite { + border-bottom: 1px solid black !important; + } + + .pathWhite { + color: white !important; + } + + .pathBlack { + color: black !important; + } + \ No newline at end of file From fe91c1206e18b9ef55e2706d28ef8249b44fd4cf Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 27 Jan 2023 17:23:25 +0300 Subject: [PATCH 2/3] Changed the theme selection function --- CHANGELOG.md | 4 ++ README.md | 2 +- example/index.js | 1 - package-lock.json | 4 +- package.json | 2 +- src/cg-select.ts | 66 +++---------------------- src/components/theme/theme.json | 11 ----- src/components/theme/theme.ts | 40 +++++++++++++++ src/components/utils/urils.interface.ts | 2 +- src/components/utils/utils.ts | 24 +++++---- src/interfaces/cg-select.interface.ts | 5 +- src/style/classicTheme.scss | 30 ++++++----- src/style/darkTheme.scss | 47 ++++++------------ src/style/whiteTheme.scss | 15 ++---- 14 files changed, 113 insertions(+), 140 deletions(-) delete mode 100644 src/components/theme/theme.json create mode 100644 src/components/theme/theme.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b0f051..65f6dc4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,3 +29,7 @@ Tested in JS and React. Errors in work in React applications are revealed. ### 24.01.2023 - fix 0.2.2 - Fixed documentation etc. + +### 27.01.2023 - fix 0.2.3 + +- Changed the theme selection function. diff --git a/README.md b/README.md index 39623f4..eea4049 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.2.2 +## version ~ 0.2.3 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. diff --git a/example/index.js b/example/index.js index 131eaa1..55d9aaa 100644 --- a/example/index.js +++ b/example/index.js @@ -25,7 +25,6 @@ const dropdown = new CGSelect({ width: '824px', }, }, - theme: 'dark' }); // ------------------------------NativeSelect----------------------- diff --git a/package-lock.json b/package-lock.json index 530bd89..655ca03 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cg-select", - "version": "0.2.2", + "version": "0.2.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "cg-select", - "version": "0.2.2", + "version": "0.2.3", "license": "ISC", "dependencies": { "@parcel/optimizer-css": "^2.8.0", diff --git a/package.json b/package.json index 3e6ad9c..3955f56 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cg-select", - "version": "0.2.2", + "version": "0.2.3", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling", "author": { "name": "CraftGroup", diff --git a/src/cg-select.ts b/src/cg-select.ts index d45a1f2..371685d 100644 --- a/src/cg-select.ts +++ b/src/cg-select.ts @@ -24,6 +24,7 @@ import { ru, en } from './language/language'; import { ILanguage } from './interfaces/language.interface'; import './main.scss'; +import { changeTheme } from './components/theme/theme'; /** * @class Class Description ICgSelect @@ -36,7 +37,6 @@ export class CGSelect implements ICgSelect { selected?: string; placeholder?: string; items?: IItems[] | string[] | any; - darkTheme?: boolean; theme?: string; searchMode?: boolean; closeOnSelect?: boolean; @@ -107,7 +107,7 @@ export class CGSelect implements ICgSelect { placeholder: '...', lable: '...' items: [string|number|object], - darkTheme: true/false, + theme: string, searchMode: true/false, closeOnSelect: true/false, nativeSelectMode: true/false, @@ -175,7 +175,6 @@ export class CGSelect implements ICgSelect { 'MAN', 'max', ], - darkTheme: true, multiselect: true, multiselectTag: true, } @@ -190,13 +189,13 @@ export class CGSelect implements ICgSelect { listDisplayMode, nativeSelectMode, searchMode, - darkTheme, language, styles, lable, event, selected, - placeholder, theme + placeholder, + theme, } = setting; this.options = setting; @@ -207,7 +206,6 @@ export class CGSelect implements ICgSelect { this.selector = selector; this.items = items; this.searchMode = searchMode; - this.darkTheme = darkTheme; this.language = language; this.nativeSelectMode = nativeSelectMode; this.listDisplayMode = listDisplayMode; @@ -289,6 +287,7 @@ export class CGSelect implements ICgSelect { this.randomId = random; ulList.classList.add('list'); + ulList!.classList.add('classicList'); if (this.styles) { customStylesFormat(this.styles.list!, ulList); @@ -357,10 +356,9 @@ export class CGSelect implements ICgSelect { this.list = this.element!.querySelector('.list'); this.caret = this.element!.querySelector('.caret'); - if (this.darkTheme == false) { - this.checkTheme(); + if (this.theme) { + changeTheme(this.element!, this.theme!); } - this.themeCheck(); if (this.nativeSelectMode === true) { this.selectMode(this.nativeSelectMode); @@ -543,6 +541,7 @@ export class CGSelect implements ICgSelect { let selectedItemsClear: ISelectedItems = { placeholder: this.placeholder!, selected: this.selected!, + theme: this.theme, }; const ulMultipul = document.createElement('ul'); @@ -565,7 +564,6 @@ export class CGSelect implements ICgSelect { selected: this.selected!, selectedItems: this.selectedItems, indexes: this.indexes, - darkTheme: this.darkTheme, multiselectTag: this.multiselectTag, }; } @@ -657,54 +655,6 @@ export class CGSelect implements ICgSelect { }); } - /** - * @private - * @method checkTheme - * @description Changes the color scheme from dark to light. - */ - private checkTheme(): void { - const select = this.element!.querySelector('.cg-select'); - const caret = this.element!.querySelector('.caret'); - const list = this.element!.querySelector('ul.list'); - const search = this.element!.querySelector('.inputSearch'); - - if (this.darkTheme == false) { - select!.classList.add('selectWhite'); - caret!.classList.add('caretWhite'); - list!.classList.add('listWhite'); - - if (this.searchMode == true) { - search!.classList.add('inputWhite'); - } - } else if (this.darkTheme == true) { - return; - } else { - throw new Error('Styles error or invalid value entered!'); - } - } - - private themeCheck(): void{ - const select = this.element!.querySelector('.cg-select'); - const caret = this.element!.querySelector('.caret'); - const list = this.element!.querySelector('ul.list'); - const search = this.element!.querySelector('.inputSearch'); - - switch (this.theme) { - case 'classic': - console.log('sss'); - break; - case 'dark': - console.log('dark'); - break; - case 'white': - console.log('white'); - break; - - default: - break; - } - } - /** * @private * @param {boolean} nativeSelectMode parameter responsible for adding native select. diff --git a/src/components/theme/theme.json b/src/components/theme/theme.json deleted file mode 100644 index 01d7937..0000000 --- a/src/components/theme/theme.json +++ /dev/null @@ -1,11 +0,0 @@ -[ - { - "type": "classic" - }, - { - "type": "dark" - }, - { - "type": "white" - } -] \ No newline at end of file diff --git a/src/components/theme/theme.ts b/src/components/theme/theme.ts new file mode 100644 index 0000000..6904a94 --- /dev/null +++ b/src/components/theme/theme.ts @@ -0,0 +1,40 @@ +export function changeTheme(element: Element, theme: string) { + const select = element!.querySelector('.cg-select'); + const caret = element!.querySelector('.caret'); + const list = element!.querySelector('ul.list'); + const search = element!.querySelector('.inputSearch'); + const path = element.querySelectorAll('.pathWhite'); + + switch (theme) { + case 'dark': + select!.classList.remove('classicSelect'); + select!.classList.add('selectDark'); + list!.classList.add('listDark'); + list!.classList.remove('classicList'); + path.forEach((elem) => { + elem.classList.remove('pathBlack'); + elem.classList.add('pathWhite'); + }); + break; + case 'white': + select!.classList.remove('classicSelect'); + select!.classList.add('selectWhite'); + caret!.classList.add('caretWhite'); + list!.classList.add('listWhite'); + list!.classList.remove('classicList'); + path.forEach((elem) => { + elem.classList.add('pathBlack'); + elem.classList.remove('pathWhite'); + }); + + if (search!) { + search!.classList.add('inputWhite'); + } + break; + + default: + select!.classList.add('classicSelect'); + list!.classList.add('classicList'); + break; + } +} diff --git a/src/components/utils/urils.interface.ts b/src/components/utils/urils.interface.ts index 08485c6..31ca536 100644 --- a/src/components/utils/urils.interface.ts +++ b/src/components/utils/urils.interface.ts @@ -55,5 +55,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} */ - darkTheme?: boolean; + theme?: string; } diff --git a/src/components/utils/utils.ts b/src/components/utils/utils.ts index e755681..b98cc95 100644 --- a/src/components/utils/utils.ts +++ b/src/components/utils/utils.ts @@ -77,6 +77,7 @@ export function createSelected(element: Element, content?: string, styles?: ISty const caret = document.createElement('div'); select.classList.add('cg-select'); + select.classList.add('classicSelect'); selected.classList.add('selected'); caret.classList.add('caret'); @@ -103,7 +104,7 @@ export function createSelected(element: Element, content?: string, styles?: ISty * @param {ISelectedItems} dataSelectText the text that is rendered in the select. */ export function clearSelect(select: HTMLElement, element: Element, dataSelectText: ISelectedItems) { - const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText; + const { selectedItems, indexes, theme, multiselectTag } = dataSelectText; const options = element.querySelectorAll('.list__item'); const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption'); @@ -122,14 +123,19 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex return; } - if (darkTheme === true || !darkTheme) { - path1.classList.add('pathWhite'); - path2.classList.add('pathWhite'); - } - - if (darkTheme === false) { - path1.classList.add('pathBlack'); - path2.classList.add('pathBlack'); + switch (theme) { + case 'dark': + path1.classList.add('pathWhite'); + path2.classList.add('pathWhite'); + break; + case 'white': + path1.classList.add('pathBlack'); + path2.classList.add('pathBlack'); + break; + default: + path1.classList.add('pathWhite'); + path2.classList.add('pathWhite'); + break; } svgIcon.classList.add('svg-icon'); diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts index 012d1e5..0e68c24 100644 --- a/src/interfaces/cg-select.interface.ts +++ b/src/interfaces/cg-select.interface.ts @@ -26,10 +26,9 @@ export interface ICgSelect { */ items?: IItems[] | string[] | any; /** - * An optional parameter that is responsible for enabling a light / dark theme by default, the dark theme is set (darkTheme == true). - * @type {boolean} + * An optional parameter responsible for switching between different themes, the classic theme is set by default. + * @type {string} */ - darkTheme?: boolean; theme?: string; /** * An optional parameter that adds a live search on the select elements. diff --git a/src/style/classicTheme.scss b/src/style/classicTheme.scss index 13dbb9f..1847acb 100644 --- a/src/style/classicTheme.scss +++ b/src/style/classicTheme.scss @@ -1,14 +1,22 @@ -.cg-select{ - color: #fff; - background: #2a2f3b; +.classicSelect { + color: #fff; + background: #2a2f3b; - &:hover { - background: #394050; - } + &:hover { + background: #394050; + } } -.list { - color: white; - background: #2a2f3b; - border: 1px #0a0b0e solid; -} \ No newline at end of file +.classicList { + color: white; + background: #2a2f3b; + border: 1px #0a0b0e solid; +} + +.pathWhite { + color: white !important; +} + +.pathBlack { + color: black; +} diff --git a/src/style/darkTheme.scss b/src/style/darkTheme.scss index bec07f8..f5c0f88 100644 --- a/src/style/darkTheme.scss +++ b/src/style/darkTheme.scss @@ -1,32 +1,17 @@ .selectDark { - background: rgb(29, 29, 29) !important; - } - -// .selectDark, -// .listDark, -// .inputWhite, -// .pathBlack, -// .selectWhite { -// color: black !important; -// } - - .caretWhite { - border-top: 6px solid black !important; - } - - .listWhite { - background-color: white !important; - } - - .inputWhite { - border-bottom: 1px solid black !important; - } - - .pathWhite { - color: white !important; - } - - .pathBlack { - color: black !important; - } - \ No newline at end of file + background: rgb(29, 29, 29); + color: white; +} + +.caretWhite { + border-top: 6px solid black !important; +} + +.listDark { + background: rgb(29, 29, 29); + color: white; +} + +.inputDark { + border-bottom: 1px solid black !important; +} diff --git a/src/style/whiteTheme.scss b/src/style/whiteTheme.scss index dc9bb30..552bc0a 100644 --- a/src/style/whiteTheme.scss +++ b/src/style/whiteTheme.scss @@ -1,5 +1,5 @@ .selectWhite { - background: rgb(248, 248, 248) !important; + background: rgb(248, 248, 248); } .selectWhite, @@ -7,25 +7,18 @@ .inputWhite, .pathBlack, .selectWhite { - color: black !important; + color: black; } .caretWhite { - border-top: 6px solid black !important; + border-top: 6px solid black; } .listWhite { - background-color: white !important; + background-color: white; } .inputWhite { border-bottom: 1px solid black !important; -} - -.pathWhite { - color: white !important; -} - -.pathBlack { color: black !important; } From 879296c7aa42b260cc392c1bbeab903d5b5797dd Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 27 Jan 2023 20:06:32 +0300 Subject: [PATCH 3/3] Fixed docs --- CHANGELOG.md | 1 + docs/classes/cg_select.CGSelect.html | 5029 ++++++++++++++--- docs/index.html | 4 +- ..._utils_urils_interface.ISelectedItems.html | 867 ++- ...erfaces_cg_select_interface.ICgSelect.html | 1574 +++++- 5 files changed, 6321 insertions(+), 1154 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 65f6dc4..eb9d0c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,3 +33,4 @@ Tested in JS and React. Errors in work in React applications are revealed. ### 27.01.2023 - fix 0.2.3 - Changed the theme selection function. +- Fixed documentation. diff --git a/docs/classes/cg_select.CGSelect.html b/docs/classes/cg_select.CGSelect.html index c90a720..32c4983 100644 --- a/docs/classes/cg_select.CGSelect.html +++ b/docs/classes/cg_select.CGSelect.html @@ -1,820 +1,4267 @@ -CGSelect | cg-select
-
- -
-
-
-
- -

Class CGSelect

-
-
-

Description

This class implements the functionality of a custom select, with customization capabilities.

+ + + + + + CGSelect | cg-select + + + + + + + + +
+
+ + +
+
+
+
+
+ +

Class CGSelect

+
+
+
+

Description

+

+ This class implements the functionality of a custom select, with customization + capabilities. +

-

Author

Ovsyanikov Maxim

-
-
-

Hierarchy

-
    -
  • CGSelect
-
-

Implements

-
-
-
-
- -
-
-

Constructors

-
constructor -
-
-

Properties

-
btnCntr? -caret -category? -closeOnSelect? -darkTheme? -element -event? -indexes -items? -lable? -language? -list -listDisplayMode? -multiselect? -multiselectTag? -nativeSelectMode? -options -placeholder? -randomId -searchMode? -selected? -selectedItems -selector? -styles? -url? -
-
-

Accessors

-
indexesOf -value -
-
-

Methods

-
addItem -addLanguage -addOptionsBehaviour -buttonControl -checkTheme -close -closeSelectClick -deleteItem -deleteItemAll -disabled -displayMode -getElement -init -initEvent -initSelected -open -render -renderUrl -searchModeSelect -selectIndex -selectMode -
-
-

Constructors

-
-

constructor

-
    - -
  • -
    -

    Description

    The constructor takes an object and renders the select.

    +

    Author

    +

    Ovsyanikov Maxim

    +
    +
+
+

Hierarchy

+
    +
  • CGSelect
    • +
+
+
+

Implements

+ +
+ +
+
+
+ + + +
+
+

Constructors

+
+ + + constructor +
+
+
+

Properties

+
+ + + btnCntr? + + + caret + + + category? + + + closeOnSelect? + + + theme? + + + element + + + event? + + + indexes + + + items? + + + lable? + + + language? + + + list + + + listDisplayMode? + + + multiselect? + + + multiselectTag? + + + nativeSelectMode? + + + options + + + placeholder? + + + randomId + + + searchMode? + + + selected? + + + selectedItems + + + selector? + + + styles? + + + url? +
+
+
+

Accessors

+
+ + + indexesOf + + + value +
+
+
+

Methods

+
+ + + addItem + + + addLanguage + + + addOptionsBehaviour + + + buttonControl + + + checkTheme + + + close + + + closeSelectClick + + + deleteItem + + + deleteItemAll + + + disabled + + + displayMode + + + getElement + + + init + + + initEvent + + + initSelected + + + open + + + render + + + renderUrl + + + searchModeSelect + + + selectIndex + + + selectMode +
+
+
+
+
+
+
+

Constructors

+
+ +

+ constructor + + + +

+
    + +
  • +
    +

    Description

    +

    The constructor takes an object and renders the select.

    -

    Example

    options = {
     selector: 'Unique selector',
       selected: 'Selected item',
       placeholder: '...',
       lable: '...'
       items: [string|number|object],
       darkTheme: true/false,
       searchMode: true/false,
       closeOnSelect:  true/false,
       nativeSelectMode: true/false,
       listDisplayMode: true/false,
       language: 'ru/en',
       styles: {
         head: {
           background: '...',
         },
         list: {...},
         chips: {...},
         caret: {...},
         placeholder: {...},
         lable: {..},
       },
       event: '...',
       url: 'http/...',
       multiselect: true/false,
       multiselectTag: true/false,
    }
+                  
    Example
    
+                  
    options = {
     selector: 'Unique selector',
       selected: 'Selected item',
       placeholder: '...',
       lable: '...'
       items: [string|number|object],
       theme: string,
       searchMode: true/false,
       closeOnSelect:  true/false,
       nativeSelectMode: true/false,
       listDisplayMode: true/false,
       language: 'ru/en',
       styles: {
         head: {
           background: '...',
         },
         list: {...},
         chips: {...},
         caret: {...},
         placeholder: {...},
         lable: {..},
       },
       event: '...',
       url: 'http/...',
       multiselect: true/false,
       multiselectTag: true/false,
    }
 
    
-
    -
    -

    Parameters

    -
      -
    • -
      setting: ICgSelect
      -

      Object accepting select settings.

      -
    -

    Returns CGSelect

-
-

Properties

-
-

Private Optional btnCntr

-
btnCntr?: null | Element
-

Button, to control the select.

-
-
-

Private caret

-
caret: undefined | null | Element
-

Variable for carriage control.

-
-
-

Private Optional category

-
category?: string
-

Transferred categories.

-
-
-

Optional closeOnSelect

-
closeOnSelect?: boolean
-

An optional parameter that is responsible for the behavior of the select when opening, if closeOnSelect: false, -then when an element is selected in the selector, closing does not occur, -and you can select another element by default, closeOnSelect:true.

-
-
-

Optional darkTheme

-
darkTheme?: boolean
-

An optional parameter that is responsible for enabling a light / dark theme by default, the dark theme is set (darkTheme == true).

-
-
-

Private element

-
element: null | Element
-

Created HTML element.

-
-
-

Optional event

-
event?: string
-

An optional parameter that is responsible for the behavior of the select, passing to this parameter an event of the 'mouseenter' type, -select will open on hover.

-
-
-

Private indexes

-
indexes: number[] = []
-

Array of indexes of selected elements.

-
-
-

Optional items

-
items?: any
-

*Required parameter (if no other way to get data (url) is specified), this is an array of elements, - which will be displayed in the select when selected.

-
-
-

Optional lable

-
lable?: string
-

An optional parameter that adds a lable before the select.

-
-
-

Optional language

-
language?: string
-

Optional parameter responsible for the localization of some text elements.

-
-
-

Private list

-
list: null | Element
-

Created list(ul), with class list.

-
-
-

Optional listDisplayMode

-
listDisplayMode?: boolean
-

An optional parameter that is responsible for the behavior of the select when opening.

-
-
-

Optional multiselect

-
multiselect?: boolean
-

An optional parameter, which is responsible for the behavior of the select, adds the ability to select multiple elements. -Selected elements are rendered as plain text, separated by commas.

-
-
-

Optional multiselectTag

-
multiselectTag?: boolean
-

An optional parameter that is responsible for the behavior of the select, -for him, *** works only in a place with a multiselect connection.

-
-
-

Optional nativeSelectMode

-
nativeSelectMode?: boolean
-

An optional parameter that is responsible for the behavior of the select when opened on mobile devices.

-
-
-

Private options

-
options: ICgSelect
-

Select settings passed when creating an instance of the class.

-
-
-

Optional placeholder

-
placeholder?: string
-

Placeholder optional parameter to which the text of the select placeholder is passed.

-
-
-

Private randomId

-
randomId: string
-

Unique Id for elements.

-
-
-

Optional searchMode

-
searchMode?: boolean
-

An optional parameter that adds a live search on the select elements.

-
-
-

Optional selected

-
selected?: string
-

An optional parameter, which is passed the element that will be selected initially in the select.

-
-
-

Private selectedItems

-
selectedItems: string | string[]
-

Selected or an array of selected items from a list.

-
-
-

Optional selector

-
selector?: string
-

Unique selector - *mandatory parameter (indicator) that is set when creating a select.

-
-
-

Optional styles

-
styles?: IStyle
-

An optional parameter that is responsible for customizing the select elements, -objects with CSS properties for customizable elements are passed to it.

-
-
-

Optional url

-
url?: string
-

Required parameter (if no other way to get data (items) is specified), -data that comes from the backend in the format { id: "", title: "", value: ""}.

-
-
-

Accessors

-
-

indexesOf

-
    -
  • get indexesOf(): number | number[]
    • -
  • -
    -

    Returns

    Returns the indices of the selected element(s) as an array / empty array.

    +
    +
    +

    Parameters

    +
      +
    • +
      + setting: + ICgSelect +
      +
      +

      Object accepting select settings.

      +
      +
      • +
    +
    +

    + Returns + CGSelect +

    + +
    • +
+
+
+
+

Properties

+
+ +

+ Private + Optional btnCntr + + + +

+
+ btnCntr?: + null | Element +
+

Button, to control the select.

+ +
+
+ +

+ Private caret + + + +

+
+ caret: + undefined | null | Element +
+

Variable for carriage control.

+ +
+
+ +

+ Private + Optional category + + + +

+
+ category?: + string +
+

Transferred categories.

+ +
+
+ +

+ Optional + closeOnSelect + + + +

+
+ closeOnSelect?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when + opening, if closeOnSelect: false, then when an element is selected in the selector, + closing does not occur, and you can select another element by default, + closeOnSelect:true. +

+
+ +
+
+ +

+ Optional theme + + + +

+
+ theme?: + string +
+
+

+ An optional parameter responsible for switching between different themes, the + classic theme is set by default. +

+
+ +
+
+ +

+ Private element + + + +

+
+ element: + null | Element +
+

Created HTML element.

+ +
+
+ +

+ Optional event + + + +

+
+ event?: + string +
+
+

+ An optional parameter that is responsible for the behavior of the select, passing to + this parameter an event of the 'mouseenter' type, select will open on hover. +

+
+ +
+
+ +

+ Private indexes + + + +

+
+ indexes: + number[] = [] +
+
+

Array of indexes of selected elements.

+
+ +
+
+ +

+ Optional items + + + +

+
+ items?: + any +
+
+

+ *Required parameter (if no other way to get data (url) is specified), this is an + array of elements, which will be displayed in the select when selected. +

+
+ +
+
+ +

+ Optional lable + + + +

+
+ lable?: + string +
+
+

An optional parameter that adds a lable before the select.

+
+ +
+
+ +

+ Optional language + + + +

+
+ language?: + string +
+
+

Optional parameter responsible for the localization of some text elements.

+
+ +
+
+ +

+ Private list + + + +

+
+ list: + null | Element +
+

Created list(ul), with class list.

+ +
+
+ +

+ Optional + listDisplayMode + + + +

+
+ listDisplayMode?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when + opening. +

+
+ +
+
+ +

+ Optional multiselect + + + +

+
+ multiselect?: + boolean +
+
+

+ An optional parameter, which is responsible for the behavior of the select, adds the + ability to select multiple elements. Selected elements are rendered as plain text, + separated by commas. +

+
+ +
+
+ +

+ Optional + multiselectTag + + + +

+
+ multiselectTag?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select, for him, + *** works only in a place with a multiselect connection. +

+
+ +
+
+ +

+ Optional + nativeSelectMode + + + +

+
+ nativeSelectMode?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when opened + on mobile devices. +

+
+ +
+
+ +

+ Private options + + + +

+
+ options: + ICgSelect +
+
+

Select settings passed when creating an instance of the class.

+
+ +
+
+ +

+ Optional placeholder + + + +

+
+ placeholder?: + string +
+
+

+ Placeholder optional parameter to which the text of the select placeholder is + passed. +

+
+ +
+
+ +

+ Private randomId + + + +

+
+ randomId: + string +
+

Unique Id for elements.

+ +
+
+ +

+ Optional searchMode + + + +

+
+ searchMode?: + boolean +
+
+

An optional parameter that adds a live search on the select elements.

+
+ +
+
+ +

+ Optional selected + + + +

+
+ selected?: + string +
+
+

+ An optional parameter, which is passed the element that will be selected initially + in the select. +

+
+ +
+
+ +

+ Private selectedItems + + + +

+
+ selectedItems: + string | string[] +
+
+

Selected or an array of selected items from a list.

+
+ +
+
+ +

+ Optional selector + + + +

+
+ selector?: + string +
+
+

+ Unique selector - *mandatory parameter (indicator) that is set when creating a + select. +

+
+ +
+
+ +

+ Optional styles + + + +

+
+ styles?: + IStyle +
+
+

+ An optional parameter that is responsible for customizing the select elements, + objects with CSS properties for customizable elements are passed to it. +

+
+ +
+
+ +

+ Optional url + + + +

+
+ url?: + string +
+
+

+ Required parameter (if no other way to get data (items) is specified), data that + comes from the backend in the format { id: "", title: "", value: + ""}. +

+
+ +
+
+
+

Accessors

+
+ +

+ indexesOf + + + +

+
    +
  • + get indexesOf(): number | number[] +
    • +
  • +
    +

    Returns

    +

    Returns the indices of the selected element(s) as an array / empty array.

    -

    Description

    A getter that returns the indexes of the selected element(s) of the select.

    -
    -

    Returns number | number[]

-
-

value

-
    -
  • get value(): string | string[]
    • -
  • -
    -

    Returns

    Returns the selected element(s) as an array / element / null.

    +

    Description

    +

    A getter that returns the indexes of the selected element(s) of the select.

    +
    +

    + Returns number | number[] +

    + +
    • +
+
+
+ +

+ value + + + +

+
    +
  • + get value(): string | string[] +
    • +
  • +
    +

    Returns

    +

    Returns the selected element(s) as an array / element / null.

    -

    Description

    Getter returning the selected element(s) of the select.

    -
    -

    Returns string | string[]

-
-

Methods

-
-

addItem

-
    - -
  • -
    -

    Description

    adds the given element to the end of the list and redraws the list. Cannot be used when passing elements with categories.

    +

    Description

    +

    Getter returning the selected element(s) of the select.

    +
    +

    + Returns string | string[] +

    + +
    • +
+
+
+
+

Methods

+
+ +

+ addItem + + + +

+
    + +
  • +
    +

    Description

    +

    + adds the given element to the end of the list and redraws the list. Cannot be + used when passing elements with categories. +

    -

    Method

    addItem

    -
    -
    -

    Parameters

    -
      -
    • -
      item: string | number | IItems
      -

      added element.

      -
    -

    Returns undefined | false

-
-

addLanguage

-
    - -
  • -
    -

    Description

    a method that allows you to change the placeholder in the search and the text that is displayed if there is no result.

    +

    Method

    +

    addItem

    +
    +
    +

    Parameters

    +
      +
    • +
      + item: string | number | IItems +
      +

      added element.

      +
      • +
    +
    +

    + Returns undefined | false +

    + +
    • +
+
+
+ +

+ addLanguage + + + +

+
    + +
  • +
    +

    Description

    +

    + a method that allows you to change the placeholder in the search and the text + that is displayed if there is no result. +

    -

    Method

    addLanguage

    -
    -
    -

    Parameters

    -
      -
    • -
      language: ILanguage
      -

      the object in which the fields for connecting the language are located has two mandatory fields placeholder, textInListSearch, selectPlaceholder.

      -
    -

    Returns void

-
-

Private addOptionsBehaviour

-
    - -
  • Private -
    -

    Description

    A method that implements the selection of elements in different modes.

    +

    Method

    +

    addLanguage

    +
    +
    +

    Parameters

    +
      +
    • +
      + language: + ILanguage +
      +
      +

      + the object in which the fields for connecting the language are located has + two mandatory fields placeholder, textInListSearch, selectPlaceholder. +

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private + addOptionsBehaviour + + + +

+
    + +
  • + Private +
    +

    Description

    +

    A method that implements the selection of elements in different modes.

    -

    Method

    addOptionsBehaviour

    -
    -

    Returns void

-
-

buttonControl

-
    - -
  • -
    -

    Description

    A method that allows you to open / close the select using buttons.

    +

    Method

    +

    addOptionsBehaviour

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ buttonControl + + + +

+
    + +
  • +
    +

    Description

    +

    A method that allows you to open / close the select using buttons.

    -

    Method

    buttonControl

    -
    -
    -

    Parameters

    -
      -
    • -
      button: Element
      -

      HTML button.

      -
      • -
    • -
      method: string
      -

      open/close method.

      -
    -

    Returns void

-
-

Private checkTheme

-
    - -
  • Private -
    -

    Method

    checkTheme

    +

    Method

    +

    buttonControl

    +
    +
    +

    Parameters

    +
      +
    • +
      button: Element
      +

      HTML button.

      +
      • +
    • +
      method: string
      +

      open/close method.

      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private checkTheme + + + +

+
    + +
  • + Private +
    +

    Method

    +

    checkTheme

    -

    Description

    Changes the color scheme from dark to light.

    -
    -

    Returns void

-
-

Private close

-
    - -
  • Private -
    -

    Description

    Closes the list.

    +

    Description

    +

    Changes the color scheme from dark to light.

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private close + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Closes the list.

    -

    Method

    close

    -
    -

    Returns void

-
-

Private closeSelectClick

-
    - -
  • Private -
    -

    Description

    Closes the list on click outside of an element.

    +

    Method

    +

    close

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private + closeSelectClick + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Closes the list on click outside of an element.

    -

    Method

    closeSelectClick

    -
    -

    Returns void

-
-

deleteItem

-
    - -
  • -
    -

    Description

    removes the element by index from the list and redraws it. Cannot be used when passing elements with categories.

    +

    Method

    +

    closeSelectClick

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ deleteItem + + + +

+
    + +
  • +
    +

    Description

    +

    + removes the element by index from the list and redraws it. Cannot be used when + passing elements with categories. +

    -

    Method

    deleteItem

    -
    -
    -

    Parameters

    -
      -
    • -
      index: number
      -

      the index of the element to be removed.

      -
    -

    Returns void

-
-

deleteItemAll

-
    - -
  • -
    -

    Description

    removes all elements from the list and redraws it.

    +

    Method

    +

    deleteItem

    +
    +
    +

    Parameters

    +
      +
    • +
      index: number
      +
      +

      the index of the element to be removed.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ deleteItemAll + + + +

+
    + +
  • +
    +

    Description

    +

    removes all elements from the list and redraws it.

    -

    Method

    deleteItemAll

    -
    -

    Returns void

-
-

disabled

-
    - -
  • -
    -

    Description

    A method that allows you to toggle the state of the disabled select.

    +

    Method

    +

    deleteItemAll

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ disabled + + + +

+
    + +
  • +
    +

    Description

    +

    A method that allows you to toggle the state of the disabled select.

    -

    Method

    disabled

    -
    -
    -

    Parameters

    -
      -
    • -
      value: boolean
      -

      Passed parameter to add the disabled attribute.

      -
    -

    Returns void

-
-

Private displayMode

-
    - -
  • Private -
    -

    Description

    Changes the display of a sheet with a selection as a modal window.

    +

    Method

    +

    disabled

    +
    +
    +

    Parameters

    +
      +
    • +
      value: boolean
      +
      +

      Passed parameter to add the disabled attribute.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private displayMode + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Changes the display of a sheet with a selection as a modal window.

    -

    Method

    displayMode

    -
    -
    -

    Parameters

    -
      -
    • -
      listDisplayMode: boolean
      -

      parameter responsible for displaying the selection in the form of a modal window.

      -
    -

    Returns void

-
-

getElement

-
    - -
  • -
    -

    Returns

    returns a reference to the selected HTML element.

    +

    Method

    +

    displayMode

    +
    +
    +

    Parameters

    +
      +
    • +
      listDisplayMode: boolean
      +
      +

      + parameter responsible for displaying the selection in the form of a modal + window. +

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ getElement + + + +

+
    + +
  • +
    +

    Returns

    +

    returns a reference to the selected HTML element.

    -

    Method

    getElement

    -
    -
    -

    Parameters

    -
      -
    • -
      numberItem: number
      -

      returned element number.

      -
    -

    Returns any

-
-

Private init

-
    - -
  • Private -

    Private method for initializing an instance of the ICgSelect class.

    +

    Method

    +

    getElement

    +
    +
    +

    Parameters

    +
      +
    • +
      numberItem: number
      +

      returned element number.

      +
      • +
    +
    +

    + Returns any +

    + +
    • +
+
+
+ +

+ Private init + + + +

+
    + +
  • + Private +
    +

    Private method for initializing an instance of the ICgSelect class.

    -

    Method

    init

    +

    Method

    +

    init

    -

    Member

    -

    Description

    Private method. General initialization of the select. Obtaining tinctures and converting select elements.

    +

    Member

    +

    Description

    +

    + Private method. General initialization of the select. Obtaining tinctures and + converting select elements. +

    -

    Example

    {
            selector: '.cg-dropdown_one',
            placeholder: 'Choose a car',
            items: [
              'BMW',
              {
                id: '213sade',
                title: 'Opel',
                value: 1,
              },
              'Mersedes',
              'MAN',
              'max',
            ],
            darkTheme: true,
            multiselect: true,
            multiselectTag: true,
          }
+                  
    Example
    
+                  
    {
            selector: '.cg-dropdown_one',
            placeholder: 'Choose a car',
            items: [
              'BMW',
              {
                id: '213sade',
                title: 'Opel',
                value: 1,
              },
              'Mersedes',
              'MAN',
              'max',
            ],
            theme: true,
            multiselect: true,
            multiselectTag: true,
          }
 
    
-
    -
    -

    Parameters

    -
      -
    • -
      setting: ICgSelect
      -

      passed select settings.

      -
    -

    Returns void

-
-

Private initEvent

-
    - -
  • Private -
    -

    Description

    Opens and closes the list by the passed event.

    +
    +
    +

    Parameters

    +
      +
    • +
      + setting: + ICgSelect +
      +

      passed select settings.

      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private initEvent + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Opens and closes the list by the passed event.

    -

    Method

    initEvent

    -
    -

    Returns void

-
-

Private initSelected

-
    - -
  • Private -
    -

    Method

    initSelected

    +

    Method

    +

    initEvent

    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private initSelected + + + +

+
    + +
  • + Private +
    +

    Method

    +

    initSelected

    -

    Description

    Renders and styles the select.

    -
    -
    -

    Parameters

    -
      -
    • -
      Optional select: string
      -

      optional element. Used in the selectedIndex method.

      -
    -

    Returns void

-
-

Private open

-
    - -
  • Private -
    -

    Description

    Opens a list to select an element.

    +

    Description

    +

    Renders and styles the select.

    +
    +
    +

    Parameters

    +
      +
    • +
      + Optional select: + string +
      +
      +

      optional element. Used in the selectedIndex method.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private open + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Opens a list to select an element.

    -

    Method

    open

    -
    -
    -

    Parameters

    -
      -
    • -
      Optional oneClick: boolean
      -

      optional parameter passed from the buttonControl function.

      -
    -

    Returns void

-
-

Private render

-
    - -
  • Private -
    -

    Method

    render

    +

    Method

    +

    open

    +
    +
    +

    Parameters

    +
      +
    • +
      + Optional oneClick: + boolean +
      +
      +

      optional parameter passed from the buttonControl function.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private render + + + +

+
    + +
  • + Private +
    +

    Method

    +

    render

    -

    Description

    Render elements in select.

    -
    -
    -

    Parameters

    -
      -
    • -
      Optional select: string
      -

      optional element. Passed to the initSelected.

      -
    -

    Returns void

-
-

Private renderUrl

-
    - -
  • Private -
    -

    Method

    renderUrl

    +

    Description

    +

    Render elements in select.

    +
    +
    +

    Parameters

    +
      +
    • +
      + Optional select: + string +
      +
      +

      optional element. Passed to the initSelected.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private renderUrl + + + +

+
    + +
  • + Private +
    +

    Method

    +

    renderUrl

    -

    Description

    Rendering elements in the select passed from the URL and setting them up.

    -
    -

    Returns Promise<void>

-
-

Private searchModeSelect

-
    - -
  • Private -
    -

    Description

    The method that implements the search for elements in the select.

    +

    Description

    +

    Rendering elements in the select passed from the URL and setting them up.

    +
    +

    + Returns Promise<void> +

    + +
    • +
+
+
+ +

+ Private + searchModeSelect + + + +

+
    + +
  • + Private +
    +

    Description

    +

    The method that implements the search for elements in the select.

    -

    Method

    searchMode

    -
    -
    -

    Parameters

    -
      -
    • -
      random: string
      -

      unique value for input element.

      -
    -

    Returns void

-
-

selectIndex

-
    - -
  • -
    -

    Description

    selects the element that will be initially rendered in the select.

    +

    Method

    +

    searchMode

    +
    +
    +

    Parameters

    +
      +
    • +
      random: string
      +
      +

      unique value for input element.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ selectIndex + + + +

+
    + +
  • +
    +

    Description

    +

    selects the element that will be initially rendered in the select.

    -

    Method

    selectIndex

    -
    -
    -

    Parameters

    -
      -
    • -
      index: number
      -

      the index of the selected element.

      -
    -

    Returns void

-
-

Private selectMode

-
    - -
  • Private -
    -

    Description

    Changes the display of the select on mobile devices.

    +

    Method

    +

    selectIndex

    +
    +
    +

    Parameters

    +
      +
    • +
      index: number
      +
      +

      the index of the selected element.

      +
      +
      • +
    +
    +

    + Returns void +

    + +
    • +
+
+
+ +

+ Private selectMode + + + +

+
    + +
  • + Private +
    +

    Description

    +

    Changes the display of the select on mobile devices.

    -

    Method

    selectMode

    -
    -
    -

    Parameters

    -
      -
    • -
      nativeSelectMode: boolean
      -

      parameter responsible for adding native select.

      -
    -

    Returns void

-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
    • -
    • -
-
-

Theme

- -
-
-

Generated using TypeDoc

-
\ No newline at end of file +

Method

+

selectMode

+
+
+

Parameters

+
    +
  • +
    nativeSelectMode: boolean
    +
    +

    parameter responsible for adding native select.

    +
    +
    • +
+
+

+ Returns void +

+ + + +
+ +
+
+
+
+ +

+ + + + Settings +

+ +
+
+

Member Visibility

+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+

Theme

+ +
+
+
+
+ + +
+
+
+

Generated using TypeDoc

+
+
+ + + diff --git a/docs/index.html b/docs/index.html index e693d31..b78131b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -61,7 +61,7 @@ -

version ~ 0.2.2

+

version ~ 0.2.3

This component allows you to create a custom select. It offers more flexible @@ -223,7 +223,7 @@

16.12.2022 - release version 0.1.0!
- 00.00.2023 - upgrade to version 0.2.1 + 20.01.2023 - upgrade to version 0.2.1

diff --git a/docs/interfaces/components_utils_urils_interface.ISelectedItems.html b/docs/interfaces/components_utils_urils_interface.ISelectedItems.html index 524e48d..172a642 100644 --- a/docs/interfaces/components_utils_urils_interface.ISelectedItems.html +++ b/docs/interfaces/components_utils_urils_interface.ISelectedItems.html @@ -1,130 +1,737 @@ -ISelectedItems | cg-select
-
- -
-
-
-
- -

Interface ISelectedItems

-
-
-

Description

Settings for select text, etc.

-
-
-

Hierarchy

-
    -
  • ISelectedItems
-
-
-
- -
-
-

Properties

-
darkTheme? -indexes? -multiselectTag? -placeholder? -selected? -selectedItems? -
-
-

Properties

-
-

Optional darkTheme

-
darkTheme?: boolean
-

An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.

-
-
-

Optional indexes

-
indexes?: number[]
-

Array of indexes of selected elements.

-
-
-

Optional multiselectTag

-
multiselectTag?: boolean
-

An optional parameter that is responsible for the behavior of the select, -for him, *** works only in a place with a multiselect connection.

-
-
-

Optional placeholder

-
placeholder?: string
-

Placeholder optional parameter to which the text of the select placeholder is passed.

-
-
-

Optional selected

-
selected?: string
-

An optional parameter, which is passed the element that will be selected initially in the select.

-
-
-

Optional selectedItems

-
selectedItems?: string[]
-

Array of selected items from the list.

-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
    • -
    • -
-
-

Theme

- -
-
-

Generated using TypeDoc

-
\ No newline at end of file + + + + + + ISelectedItems | cg-select + + + + + + + + +
+
+ + +
+
+
+
+
+ +

Interface ISelectedItems

+
+
+
+

Description

+

Settings for select text, etc.

+
+
+
+

Hierarchy

+
    +
  • ISelectedItems
    • +
+
+ +
+
+
+ + + +
+
+

Properties

+
+ + + darkTheme? + + + indexes? + + + multiselectTag? + + + placeholder? + + + selected? + + + selectedItems? +
+
+
+
+
+
+
+

Properties

+
+ +

+ Optional theme + + + +

+
+ theme?: + string +
+
+

+ An optional parameter that is responsible for enabling a light/dark theme by + default, the dark theme is set. +

+
+ +
+
+ +

+ Optional indexes + + + +

+
+ indexes?: + number[] +
+
+

Array of indexes of selected elements.

+
+ +
+
+ +

+ Optional + multiselectTag + + + +

+
+ multiselectTag?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select, for him, + *** works only in a place with a multiselect connection. +

+
+ +
+
+ +

+ Optional placeholder + + + +

+
+ placeholder?: + string +
+
+

+ Placeholder optional parameter to which the text of the select placeholder is + passed. +

+
+ +
+
+ +

+ Optional selected + + + +

+
+ selected?: + string +
+
+

+ An optional parameter, which is passed the element that will be selected initially + in the select. +

+
+ +
+
+ +

+ Optional selectedItems + + + +

+
+ selectedItems?: + string[] +
+
+

Array of selected items from the list.

+
+ +
+
+
+
+
+
+ +

+ + + + Settings +

+ +
+
+

Member Visibility

+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+

Theme

+ +
+
+
+
+ + +
+
+
+

Generated using TypeDoc

+
+
+ + + diff --git a/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html b/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html index ea22066..927e9f9 100644 --- a/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html +++ b/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html @@ -1,231 +1,1343 @@ -ICgSelect | cg-select
-
- -
-
-
-
- -

Interface ICgSelect

-
-
-

Description

Select settings.

-
-
-

Hierarchy

-
    -
  • ICgSelect
-
-

Implemented by

-
-
-
-
- -
-
-

Properties

-
closeOnSelect? -darkTheme? -event? -items? -lable? -language? -listDisplayMode? -multiselect? -multiselectTag? -nativeSelectMode? -placeholder? -searchMode? -selected? -selector? -styles? -url? -
-
-

Properties

-
-

Optional closeOnSelect

-
closeOnSelect?: boolean
-

An optional parameter that is responsible for the behavior of the select when opening, if closeOnSelect: false, -then when an element is selected in the selector, closing does not occur, -and you can select another element by default, closeOnSelect:true.

-
-
-

Optional darkTheme

-
darkTheme?: boolean
-

An optional parameter that is responsible for enabling a light / dark theme by default, the dark theme is set (darkTheme == true).

-
-
-

Optional event

-
event?: string
-

An optional parameter that is responsible for the behavior of the select, passing to this parameter an event of the 'mouseenter' type, -select will open on hover.

-
-
-

Optional items

-
items?: any
-

*Required parameter (if no other way to get data (url) is specified), this is an array of elements, - which will be displayed in the select when selected.

-
-
-

Optional lable

-
lable?: string
-

An optional parameter that adds a lable before the select.

-
-
-

Optional language

-
language?: string
-

Optional parameter responsible for the localization of some text elements.

-
-
-

Optional listDisplayMode

-
listDisplayMode?: boolean
-

An optional parameter that is responsible for the behavior of the select when opening.

-
-
-

Optional multiselect

-
multiselect?: boolean
-

An optional parameter, which is responsible for the behavior of the select, adds the ability to select multiple elements. -Selected elements are rendered as plain text, separated by commas.

-
-
-

Optional multiselectTag

-
multiselectTag?: boolean
-

An optional parameter that is responsible for the behavior of the select, -for him, *** works only in a place with a multiselect connection.

-
-
-

Optional nativeSelectMode

-
nativeSelectMode?: boolean
-

An optional parameter that is responsible for the behavior of the select when opened on mobile devices.

-
-
-

Optional placeholder

-
placeholder?: string
-

Placeholder optional parameter to which the text of the select placeholder is passed.

-
-
-

Optional searchMode

-
searchMode?: boolean
-

An optional parameter that adds a live search on the select elements.

-
-
-

Optional selected

-
selected?: string
-

An optional parameter, which is passed the element that will be selected initially in the select.

-
-
-

Optional selector

-
selector?: string
-

Unique selector - *mandatory parameter (indicator) that is set when creating a select.

-
-
-

Optional styles

-
styles?: IStyle
-

An optional parameter that is responsible for customizing the select elements, -objects with CSS properties for customizable elements are passed to it.

-
-
-

Optional url

-
url?: string
-

Required parameter (if no other way to get data (items) is specified), -data that comes from the backend in the format { id: "", title: "", value: ""}.

-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
    • -
    • -
-
-

Theme

- -
-
-

Generated using TypeDoc

-
\ No newline at end of file + + + + + + ICgSelect | cg-select + + + + + + + + +
+
+ + +
+
+
+
+
+ +

Interface ICgSelect

+
+
+
+

Description

+

Select settings.

+
+
+
+

Hierarchy

+
    +
  • ICgSelect
    • +
+
+
+

Implemented by

+ +
+ +
+
+
+ + + +
+
+

Properties

+
+ + + closeOnSelect? + + + theme? + + + event? + + + items? + + + lable? + + + language? + + + listDisplayMode? + + + multiselect? + + + multiselectTag? + + + nativeSelectMode? + + + placeholder? + + + searchMode? + + + selected? + + + selector? + + + styles? + + + url? +
+
+
+
+
+
+
+

Properties

+
+ +

+ Optional + closeOnSelect + + + +

+
+ closeOnSelect?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when + opening, if closeOnSelect: false, then when an element is selected in the selector, + closing does not occur, and you can select another element by default, + closeOnSelect:true. +

+
+ +
+
+ +

+ Optional theme + + + +

+
+ theme?: + string +
+
+

+ An optional parameter responsible for switching between different themes, the + classic theme is set by default. +

+
+ +
+
+ +

+ Optional event + + + +

+
+ event?: + string +
+
+

+ An optional parameter that is responsible for the behavior of the select, passing to + this parameter an event of the 'mouseenter' type, select will open on hover. +

+
+ +
+
+ +

+ Optional items + + + +

+
+ items?: + any +
+
+

+ *Required parameter (if no other way to get data (url) is specified), this is an + array of elements, which will be displayed in the select when selected. +

+
+ +
+
+ +

+ Optional lable + + + +

+
+ lable?: + string +
+
+

An optional parameter that adds a lable before the select.

+
+ +
+
+ +

+ Optional language + + + +

+
+ language?: + string +
+
+

Optional parameter responsible for the localization of some text elements.

+
+ +
+
+ +

+ Optional + listDisplayMode + + + +

+
+ listDisplayMode?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when + opening. +

+
+ +
+
+ +

+ Optional multiselect + + + +

+
+ multiselect?: + boolean +
+
+

+ An optional parameter, which is responsible for the behavior of the select, adds the + ability to select multiple elements. Selected elements are rendered as plain text, + separated by commas. +

+
+ +
+
+ +

+ Optional + multiselectTag + + + +

+
+ multiselectTag?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select, for him, + *** works only in a place with a multiselect connection. +

+
+ +
+
+ +

+ Optional + nativeSelectMode + + + +

+
+ nativeSelectMode?: + boolean +
+
+

+ An optional parameter that is responsible for the behavior of the select when opened + on mobile devices. +

+
+ +
+
+ +

+ Optional placeholder + + + +

+
+ placeholder?: + string +
+
+

+ Placeholder optional parameter to which the text of the select placeholder is + passed. +

+
+ +
+
+ +

+ Optional searchMode + + + +

+
+ searchMode?: + boolean +
+
+

An optional parameter that adds a live search on the select elements.

+
+ +
+
+ +

+ Optional selected + + + +

+
+ selected?: + string +
+
+

+ An optional parameter, which is passed the element that will be selected initially + in the select. +

+
+ +
+
+ +

+ Optional selector + + + +

+
+ selector?: + string +
+
+

+ Unique selector - *mandatory parameter (indicator) that is set when creating a + select. +

+
+ +
+
+ +

+ Optional styles + + + +

+
+ styles?: + IStyle +
+
+

+ An optional parameter that is responsible for customizing the select elements, + objects with CSS properties for customizable elements are passed to it. +

+
+ +
+
+ +

+ Optional url + + + +

+
+ url?: + string +
+
+

+ Required parameter (if no other way to get data (items) is specified), data that + comes from the backend in the format { id: "", title: "", value: + ""}. +

+
+ +
+
+
+
+
+
+ +

+ + + + Settings +

+ +
+
+

Member Visibility

+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+

Theme

+ +
+
+
+
+ + +
+
+
+

Generated using TypeDoc

+
+
+ + +