jb-select 2.0.4 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -42,6 +42,20 @@ remember set value as attribute if your option is a plain string but in direct a
42
42
  <jb-select placeholder="please select"></jb-select>
43
43
  ```
44
44
 
45
+ ### change empty state shape
46
+ when the searched value in select is not found, there is an open dropdown with the not found message.
47
+ you can customize this entire section by adding a div with the `slot="empty-list"`
48
+
49
+ like the example the below:
50
+
51
+ ```html
52
+ <jb-select>
53
+ <div slot="empty-list-message">
54
+ put your customize html here
55
+ </div>
56
+ </jb-select>
57
+ ```
58
+
45
59
  ### callbacks
46
60
 
47
61
  you can add callbacks to manage the way component works
@@ -99,7 +113,9 @@ if you want to set a custom style to this web-component all you need is to set c
99
113
  | --jb-select-list-max-height | max height of option list |
100
114
  | --jb-select-border-bottom-width | width of border bottom |
101
115
  | --jb-select-border-width | width of border |
102
- | --jb-select-label-color | color of label defualt is `#1f1735` |
116
+ | --jb-select-label-color | color of label default is `#1f1735` |
117
+ | --jb-input-label-font-size | label font size default is `0.8em` |
118
+ | --jb-input-label-font-weight | color of label defualt is `#1f1735` |
103
119
  | --jb-select-option-color | change option text color |
104
120
  | --jb-select-option-color-hover | change option text color on hover |
105
121
  | --jb-select-option-background-color | background of options default is `#fff` |
@@ -108,4 +124,8 @@ if you want to set a custom style to this web-component all you need is to set c
108
124
  | --jb-select-bgcolor-selected | set background color for selected status |
109
125
  | --jb-select-selected-value-color | selected value text color default is `#1f1735` |
110
126
  | --jb-select-message-color | message text color default is `#929292` |
127
+ | --jb-select-message-font-size | font size of message default is `0.7em` |
128
+ | --jb-select-message-font-weight | font weight of message box default is `normal` |
129
+ | --jb-select-placeholder-color | placeholder color default is `initial` |
130
+ | --jb-select-placeholder-font-size | placeholder font-size default is `1.1em` |
111
131
 
@@ -0,0 +1,60 @@
1
+ import { JBSelectCallbacks, JBSelectElements, JBSelectOptionElement } from './Types';
2
+ export declare class JBSelectWebComponent extends HTMLElement {
3
+ #private;
4
+ required: boolean;
5
+ callbacks: JBSelectCallbacks;
6
+ elements: JBSelectElements;
7
+ get value(): any;
8
+ set value(value: any);
9
+ get textValue(): string;
10
+ set textValue(value: string);
11
+ get selectedOptionTitle(): string;
12
+ get optionList(): any[];
13
+ set optionList(value: any[]);
14
+ get placeholder(): string;
15
+ set placeholder(value: string);
16
+ get displayOptionList(): any[];
17
+ set displayOptionList(value: any[]);
18
+ get isMobileDevice(): boolean;
19
+ constructor();
20
+ connectedCallback(): void;
21
+ callOnInitEvent(): void;
22
+ callOnLoadEvent(): void;
23
+ initWebComponent(): void;
24
+ registerEventListener(): void;
25
+ initProp(): void;
26
+ static get observedAttributes(): string[];
27
+ attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
28
+ onAttributeChange(name: any, value: any): void;
29
+ _setValueOnOptionListChanged(): void;
30
+ _setValue(value: any): void;
31
+ onArrowKeyClick(): void;
32
+ onInputKeyPress(): void;
33
+ onInputBeforeInput(e: InputEvent): void;
34
+ onInputInput(e: InputEvent): void;
35
+ onInputKeyup(e: KeyboardEvent): void;
36
+ handleSelectedValueDisplay(inputValue: string): void;
37
+ triggerOnInputKeyup(e: KeyboardEvent): void;
38
+ onInputChange(e: Event): void;
39
+ onInputFocus(): void;
40
+ onInputBlur(e: FocusEvent): void;
41
+ focus(): void;
42
+ blur(): void;
43
+ showOptionList(): void;
44
+ hideOptionList(): void;
45
+ updateOptionList(filterText: string): void;
46
+ updateOptionListDOM(): void;
47
+ createOptionDOM(item: any): JBSelectOptionElement;
48
+ _createOptionDom(item: any): JBSelectOptionElement;
49
+ onOptionClicked(e: MouseEvent): void;
50
+ selectOption(value: any): void;
51
+ filterOptionList(filterString: string): any[];
52
+ triggerInputValidation(showError?: boolean): {
53
+ isAllValid: boolean;
54
+ };
55
+ showValidationError(errorType: any): void;
56
+ clearValidationError(): void;
57
+ _triggerOnChangeEvent(): void;
58
+ setSelectedOptionDom(value: any): void;
59
+ private createSelectedValueDom;
60
+ }