jb-select 2.0.3 → 3.0.0

package/README.md

@@ -17,6 +17,16 @@ use `<jb-select></jb-select>`
 if ypu want to add option to jb-select set option list to DOM
 `const dropDownElement = document.querySelector('jb-select').optionList = [your option array]`
 
+### get value
+
+its simple like any other form element use `.value` of dom
+
+```javascript
+//get value
+document.querySelector('jb-select').value;
+// if you use a object in option list you can get selected option title beside value
+document.querySelector('jb-select').selectedOptionTitle;
+```
 ### set value
 
 to select value in your code you have 2 option:
@@ -32,6 +42,20 @@ remember set value as attribute if your option is a plain string but in direct a
  <jb-select placeholder="please select"></jb-select>
  ```
 
+### change empty state shape
+when the searched value in select is not found, there is an open dropdown with the not found message.
+you can customize this entire section by adding a div with the `slot="empty-list"`
+
+like the example the below:
+
+```html
+<jb-select>
+    <div slot="empty-list-message">
+        put your customize html here
+    </div>
+</jb-select>
+```
+
 ### callbacks
 
 you can add callbacks to manage the way component works
@@ -89,7 +113,9 @@ if you want to set a custom style to this web-component all you need is to set c
 | --jb-select-list-max-height               | max height of option list                                                                     |
 | --jb-select-border-bottom-width           | width of border bottom                                                                        |
 | --jb-select-border-width                  | width of border                                                                               |
-| --jb-select-label-color                   | color of label defualt is `#1f1735`                                                           |
+| --jb-select-label-color                   | color of label default is `#1f1735`                                                           |
+| --jb-input-label-font-size                | label font size default is `0.8em`                                                            |
+| --jb-input-label-font-weight              | color of label defualt is `#1f1735`                                                           |
 | --jb-select-option-color                  | change option text color                                                                      |
 | --jb-select-option-color-hover            | change option text color on hover                                                             |
 | --jb-select-option-background-color       | background of options default is `#fff`                                                       |
@@ -97,4 +123,9 @@ if you want to set a custom style to this web-component all you need is to set c
 | --jb-select-input-color                   | color of input value                                                                          |
 | --jb-select-bgcolor-selected              | set background color for selected status                                                      |
 | --jb-select-selected-value-color          | selected value text color default is `#1f1735`                                                |
+| --jb-select-message-color                 | message text color default is `#929292`                                                       |
+| --jb-select-message-font-size             | font size of message default is `0.7em`                                                       |
+| --jb-select-message-font-weight           | font weight of message box default is `normal`                                                |
+| --jb-select-placeholder-color             | placeholder color default is `initial`                                                        |
+| --jb-select-placeholder-font-size         | placeholder font-size default is `1.1em`                                                      |
 

package/dist/JBSelect.d.ts

@@ -0,0 +1,60 @@
+import { JBSelectCallbacks, JBSelectElements, JBSelectOptionElement } from './Types';
+export declare class JBSelectWebComponent extends HTMLElement {
+    #private;
+    required: boolean;
+    callbacks: JBSelectCallbacks;
+    elements: JBSelectElements;
+    get value(): any;
+    set value(value: any);
+    get textValue(): string;
+    set textValue(value: string);
+    get selectedOptionTitle(): string;
+    get optionList(): any[];
+    set optionList(value: any[]);
+    get placeholder(): string;
+    set placeholder(value: string);
+    get displayOptionList(): any[];
+    set displayOptionList(value: any[]);
+    get isMobileDevice(): boolean;
+    constructor();
+    connectedCallback(): void;
+    callOnInitEvent(): void;
+    callOnLoadEvent(): void;
+    initWebComponent(): void;
+    registerEventListener(): void;
+    initProp(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    onAttributeChange(name: any, value: any): void;
+    _setValueOnOptionListChanged(): void;
+    _setValue(value: any): void;
+    onArrowKeyClick(): void;
+    onInputKeyPress(): void;
+    onInputBeforeInput(e: InputEvent): void;
+    onInputInput(e: InputEvent): void;
+    onInputKeyup(e: KeyboardEvent): void;
+    handleSelectedValueDisplay(inputValue: string): void;
+    triggerOnInputKeyup(e: KeyboardEvent): void;
+    onInputChange(e: Event): void;
+    onInputFocus(): void;
+    onInputBlur(e: FocusEvent): void;
+    focus(): void;
+    blur(): void;
+    showOptionList(): void;
+    hideOptionList(): void;
+    updateOptionList(filterText: string): void;
+    updateOptionListDOM(): void;
+    createOptionDOM(item: any): JBSelectOptionElement;
+    _createOptionDom(item: any): JBSelectOptionElement;
+    onOptionClicked(e: MouseEvent): void;
+    selectOption(value: any): void;
+    filterOptionList(filterString: string): any[];
+    triggerInputValidation(showError?: boolean): {
+        isAllValid: boolean;
+    };
+    showValidationError(errorType: any): void;
+    clearValidationError(): void;
+    _triggerOnChangeEvent(): void;
+    setSelectedOptionDom(value: any): void;
+    private createSelectedValueDom;
+}