jb-select 1.0.10 → 2.0.1

package/README.md

@@ -40,6 +40,27 @@ for example if you have array of object as a option list and want to show custom
 ```js
     dropDownElement.callbacks.getOptionTitle = (option)=>{return`${option.province}-${option.state}-${option.city}`}
     dropDownElement.callbacks.getOptionValue = (option)=>{return`${option.value}`}
+    //to customizing options
+    dropDownElement.callbacks.getOptionDOM = (option,onOptionSelected)=>{
+        // option is the object or any other formatted data yoy=u privide to optionList array
+         const optionElement = document.createElement('div');
+         //defualt class of each option in jb-select. you can change or customize it if you wish
+        optionElement.classList.add('select-option');
+        // here in this example we want to show a color list with color sample next to it
+        optionElement.innerHTML = '<span part="color-box" style="background-color:'+option.colorCode+';width:16px;height:16px"></span>'+'&nbsp;'+option.name;
+        //onOptionSelected is a function you have to call when option selected it mostly bind on on option dom clicked'
+        // if you want to set onClick on dom other than returned wrapper DOM for example on a color-box you must set value property on it: colorBoxDOM.value = option; colorBoxDOM.addEventListener('click', onOptionSelected);
+        optionElement.addEventListener('click', onOptionSelected);
+        //return HTMLElement in the end
+        return optionElement;
+    }
+    //to customizing selected value
+    dropDownElement.callbacks.getSelectedValueDOM = (option)=>{
+        const optionElement = document.createElement('div');
+        optionElement.classList.add('selected-value');
+        optionElement.innerHTML = '<span part="color-box" style="background-color:'+option.value+';width:16px;height:16px"></span>'+'&nbsp;'+option.name;
+        return optionElement;
+    }
 ```
 
 remember you must set this callback before set your optionList
@@ -73,4 +94,6 @@ if you want to set a custom style to this web-component all you need is to set c
 | --jb-select-option-color-hover            | change option text color on hover                                                             |
 | --jb-select-option-background-color       | background of options default is `#fff`                                                       |
 | --jb-select-option-background-color-hover | background of options on mouse hover default is `#1073db`                                     |
+| --jb-select-input-color                   | color of input value                                                                          |
+| --jb-select-bgcolor-selected              | set background color for selected status                                                      |
 

package/dist/JBSelect.js

@@ -1,6 +1,6 @@
-var HTML = "<div class=\"jb-select-web-component\">\r\n    <label class=\"--hide\"><span class=\"label-value\"></span><span>:</span></label>\r\n    <div class=\"select-box\">\r\n        <input class=\"input\">\r\n        <div class=\"arrow-icon\"></div>\r\n    </div>\r\n    <div class=\"select-list-wrapper\">\r\n        <div class=\"select-list\" tabindex=\"-1\">\r\n\r\n        </div>\r\n    </div>\r\n    <div class=\"message-box\"></div>\r\n</div>";
+var HTML = "<div class=\"jb-select-web-component\">\r\n    <label class=\"--hide\"><span class=\"label-value\"></span><span>:</span></label>\r\n    <div class=\"select-box\">\r\n        <div class=\"selected-value-wrapper\">\r\n            \r\n        </div>\r\n        <div class=\"front-box\">\r\n            <input class=\"input\">\r\n            <div class=\"arrow-icon\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"select-list-wrapper\">\r\n        <div class=\"select-list\" tabindex=\"-1\">\r\n\r\n        </div>\r\n    </div>\r\n    <div class=\"message-box\"></div>\r\n</div>";
 
-var css_248z = ".jb-select-web-component {\n  width: var(--jb-select-width, 100%);\n  margin: var(--jb-select-margin, 12px 0);\n  position: relative;\n  box-sizing: border-box; }\n  @media (min-width: 320px) and (max-width: 767px) {\n    .jb-select-web-component.--focused {\n      position: absolute;\n      top: 0;\n      left: 0;\n      background-color: #0008;\n      width: 100vw;\n      height: 100vh;\n      margin: 0;\n      padding: 16px 8px;\n      z-index: 900; } }\n  @media (min-width: 320px) and (max-width: 767px) {\n    .jb-select-web-component.--focused .select-list-wrapper {\n      position: initial;\n      margin: 16px 0;\n      border-radius: var(--jb-select-border-radius, 16px); } }\n  @media (min-width: 320px) and (max-width: 767px) {\n    .jb-select-web-component.--focused label {\n      color: #fff;\n      font-size: 1.5em; } }\n  .jb-select-web-component.--has-value .select-box {\n    border-color: var(--jb-select-border-color-selected, #c3ff14); }\n  .jb-select-web-component label {\n    width: 100%;\n    margin: 4px 0px;\n    display: block;\n    font-size: 0.8em;\n    color: var(--jb-select-label-color, #1f1735); }\n    .jb-select-web-component label.--hide {\n      display: none; }\n  .jb-select-web-component .select-box {\n    width: 100%;\n    box-sizing: border-box;\n    height: 40px;\n    border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n    background-color: var(--jb-select-bgcolor, #f7f6f6);\n    border-bottom: solid var(--jb-select-border-bottom-width, 3px) var(--jb-select-border-color, #f7f6f6);\n    border-radius: var(--jb-select-border-radius, 16px);\n    margin: 4px 0px;\n    overflow: hidden;\n    display: flex;\n    justify-content: space-between;\n    padding-inline-end: 16px;\n    gap: 8px; }\n    .jb-select-web-component .select-box:focus-within {\n      border-color: var(--jb-select-border-color, #1e2832);\n      border-bottom-color: var(--jb-select-border-color, #f7f6f6);\n      border-radius: var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px) 0 0; }\n      @media (min-width: 320px) and (max-width: 767px) {\n        .jb-select-web-component .select-box:focus-within {\n          border-radius: var(--jb-select-border-radius, 16px);\n          border-bottom-color: var(--jb-select-border-color, #1e2832); } }\n    .jb-select-web-component .select-box input {\n      border: none;\n      width: 100%;\n      box-sizing: border-box;\n      height: 100%;\n      background-color: transparent;\n      padding: 2px 12px 0 12px;\n      display: block;\n      font-family: inherit;\n      font-size: 1.1em;\n      color: var(--jb-select-input-color, #1f1735);\n      margin: 0;\n      border-radius: 0; }\n      .jb-select-web-component .select-box input:focus {\n        outline: none; }\n    .jb-select-web-component .select-box .arrow-icon {\n      width: 8px;\n      height: 100%;\n      background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 494.1 371.1' style='enable-background:new 0 0 494.1 371.1;' xml:space='preserve'><path d='M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2  c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z'/></svg>\");\n      background-position: end;\n      background-repeat: no-repeat;\n      background-position-x: 0;\n      background-position-y: center; }\n  .jb-select-web-component .message-box {\n    font-size: 0.7em;\n    padding: 2px 8px;\n    color: #929292; }\n    .jb-select-web-component .message-box:empty {\n      padding: 0; }\n    .jb-select-web-component .message-box.--error {\n      color: red; }\n  .jb-select-web-component .select-list-wrapper {\n    display: none;\n    position: absolute;\n    margin: -6px 0;\n    height: auto;\n    overflow: hidden;\n    width: 100%;\n    background-color: var(--jb-select-bgcolor, #f7f6f6);\n    border-radius: 0 0 var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px);\n    border: solid 1px var(--jb-select-border-color, #1e2832);\n    border-top: none;\n    border-bottom: solid 3px var(--jb-select-border-color, #1e2832);\n    box-shadow: var(--jb-select-list-box-shadow);\n    box-sizing: border-box;\n    z-index: 999; }\n    .jb-select-web-component .select-list-wrapper.--show {\n      display: block; }\n    .jb-select-web-component .select-list-wrapper .select-list {\n      width: 100%;\n      max-height: var(--jb-select-list-max-height, 400px);\n      overflow-y: auto;\n      padding: 16px 0; }\n      @media (min-width: 320px) and (max-width: 767px) {\n        .jb-select-web-component .select-list-wrapper .select-list {\n          max-height: calc(100vh - 240px); } }\n      .jb-select-web-component .select-list-wrapper .select-list .select-option {\n        min-height: 36px;\n        padding: 4px 16px;\n        display: flex;\n        align-items: center;\n        font-size: 0.9em;\n        color: var(--jb-select-option-color, inherit);\n        background-color: var(--jb-select-option-background-color, #fff); }\n        .jb-select-web-component .select-list-wrapper .select-list .select-option:hover {\n          background-color: var(--jb-select-option-background-color-hover, #1073db);\n          color: var(--jb-select-option-color-hover, #fff);\n          cursor: pointer; }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkpCU2VsZWN0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxtQ0FBbUM7RUFDbkMsdUNBQXVDO0VBQ3ZDLGtCQUFrQjtFQUNsQixzQkFBc0IsRUFBRTtFQUN4QjtJQUNFO01BQ0Usa0JBQWtCO01BQ2xCLE1BQU07TUFDTixPQUFPO01BQ1AsdUJBQXVCO01BQ3ZCLFlBQVk7TUFDWixhQUFhO01BQ2IsU0FBUztNQUNULGlCQUFpQjtNQUNqQixZQUFZLEVBQUUsRUFBRTtFQUNwQjtJQUNFO01BQ0UsaUJBQWlCO01BQ2pCLGNBQWM7TUFDZCxtREFBbUQsRUFBRSxFQUFFO0VBQzNEO0lBQ0U7TUFDRSxXQUFXO01BQ1gsZ0JBQWdCLEVBQUUsRUFBRTtFQUN4QjtJQUNFLDZEQUE2RCxFQUFFO0VBQ2pFO0lBQ0UsV0FBVztJQUNYLGVBQWU7SUFDZixjQUFjO0lBQ2QsZ0JBQWdCO0lBQ2hCLDRDQUE0QyxFQUFFO0lBQzlDO01BQ0UsYUFBYSxFQUFFO0VBQ25CO0lBQ0UsV0FBVztJQUNYLHNCQUFzQjtJQUN0QixZQUFZO0lBQ1osdUZBQXVGO0lBQ3ZGLG1EQUFtRDtJQUNuRCxxR0FBcUc7SUFDckcsbURBQW1EO0lBQ25ELGVBQWU7SUFDZixnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLDhCQUE4QjtJQUM5Qix3QkFBd0I7SUFDeEIsUUFBUSxFQUFFO0lBQ1Y7TUFDRSxvREFBb0Q7TUFDcEQsMkRBQTJEO01BQzNELDRGQUE0RixFQUFFO01BQzlGO1FBQ0U7VUFDRSxtREFBbUQ7VUFDbkQsMkRBQTJELEVBQUUsRUFBRTtJQUNyRTtNQUNFLFlBQVk7TUFDWixXQUFXO01BQ1gsc0JBQXNCO01BQ3RCLFlBQVk7TUFDWiw2QkFBNkI7TUFDN0Isd0JBQXdCO01BQ3hCLGNBQWM7TUFDZCxvQkFBb0I7TUFDcEIsZ0JBQWdCO01BQ2hCLDRDQUE0QztNQUM1QyxTQUFTO01BQ1QsZ0JBQWdCLEVBQUU7TUFDbEI7UUFDRSxhQUFhLEVBQUU7SUFDbkI7TUFDRSxVQUFVO01BQ1YsWUFBWTtNQUNaLGdnQkFBZ2dCO01BQ2hnQix3QkFBd0I7TUFDeEIsNEJBQTRCO01BQzVCLHdCQUF3QjtNQUN4Qiw2QkFBNkIsRUFBRTtFQUNuQztJQUNFLGdCQUFnQjtJQUNoQixnQkFBZ0I7SUFDaEIsY0FBYyxFQUFFO0lBQ2hCO01BQ0UsVUFBVSxFQUFFO0lBQ2Q7TUFDRSxVQUFVLEVBQUU7RUFDaEI7SUFDRSxhQUFhO0lBQ2Isa0JBQWtCO0lBQ2xCLGNBQWM7SUFDZCxZQUFZO0lBQ1osZ0JBQWdCO0lBQ2hCLFdBQVc7SUFDWCxtREFBbUQ7SUFDbkQsNEZBQTRGO0lBQzVGLHdEQUF3RDtJQUN4RCxnQkFBZ0I7SUFDaEIsK0RBQStEO0lBQy9ELDRDQUE0QztJQUM1QyxzQkFBc0I7SUFDdEIsWUFBWSxFQUFFO0lBQ2Q7TUFDRSxjQUFjLEVBQUU7SUFDbEI7TUFDRSxXQUFXO01BQ1gsbURBQW1EO01BQ25ELGdCQUFnQjtNQUNoQixlQUFlLEVBQUU7TUFDakI7UUFDRTtVQUNFLCtCQUErQixFQUFFLEVBQUU7TUFDdkM7UUFDRSxnQkFBZ0I7UUFDaEIsaUJBQWlCO1FBQ2pCLGFBQWE7UUFDYixtQkFBbUI7UUFDbkIsZ0JBQWdCO1FBQ2hCLDZDQUE2QztRQUM3QyxnRUFBZ0UsRUFBRTtRQUNsRTtVQUNFLHlFQUF5RTtVQUN6RSxnREFBZ0Q7VUFDaEQsZUFBZSxFQUFFIiwiZmlsZSI6IkpCU2VsZWN0LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuamItc2VsZWN0LXdlYi1jb21wb25lbnQge1xuICB3aWR0aDogdmFyKC0tamItc2VsZWN0LXdpZHRoLCAxMDAlKTtcbiAgbWFyZ2luOiB2YXIoLS1qYi1zZWxlY3QtbWFyZ2luLCAxMnB4IDApO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7IH1cbiAgQG1lZGlhIChtaW4td2lkdGg6IDMyMHB4KSBhbmQgKG1heC13aWR0aDogNzY3cHgpIHtcbiAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQuLS1mb2N1c2VkIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogMDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDAwODtcbiAgICAgIHdpZHRoOiAxMDB2dztcbiAgICAgIGhlaWdodDogMTAwdmg7XG4gICAgICBtYXJnaW46IDA7XG4gICAgICBwYWRkaW5nOiAxNnB4IDhweDtcbiAgICAgIHotaW5kZXg6IDkwMDsgfSB9XG4gIEBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50Li0tZm9jdXNlZCAuc2VsZWN0LWxpc3Qtd3JhcHBlciB7XG4gICAgICBwb3NpdGlvbjogaW5pdGlhbDtcbiAgICAgIG1hcmdpbjogMTZweCAwO1xuICAgICAgYm9yZGVyLXJhZGl1czogdmFyKC0tamItc2VsZWN0LWJvcmRlci1yYWRpdXMsIDE2cHgpOyB9IH1cbiAgQG1lZGlhIChtaW4td2lkdGg6IDMyMHB4KSBhbmQgKG1heC13aWR0aDogNzY3cHgpIHtcbiAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQuLS1mb2N1c2VkIGxhYmVsIHtcbiAgICAgIGNvbG9yOiAjZmZmO1xuICAgICAgZm9udC1zaXplOiAxLjVlbTsgfSB9XG4gIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudC4tLWhhcy12YWx1ZSAuc2VsZWN0LWJveCB7XG4gICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLWNvbG9yLXNlbGVjdGVkLCAjYzNmZjE0KTsgfVxuICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgbGFiZWwge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1hcmdpbjogNHB4IDBweDtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBmb250LXNpemU6IDAuOGVtO1xuICAgIGNvbG9yOiB2YXIoLS1qYi1zZWxlY3QtbGFiZWwtY29sb3IsICMxZjE3MzUpOyB9XG4gICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IGxhYmVsLi0taGlkZSB7XG4gICAgICBkaXNwbGF5OiBub25lOyB9XG4gIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWJveCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBoZWlnaHQ6IDQwcHg7XG4gICAgYm9yZGVyOiBzb2xpZCB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXdpZHRoLCAxcHgpIHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICNmN2Y2ZjYpO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWpiLXNlbGVjdC1iZ2NvbG9yLCAjZjdmNmY2KTtcbiAgICBib3JkZXItYm90dG9tOiBzb2xpZCB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLWJvdHRvbS13aWR0aCwgM3B4KSB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLWNvbG9yLCAjZjdmNmY2KTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCk7XG4gICAgbWFyZ2luOiA0cHggMHB4O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgcGFkZGluZy1pbmxpbmUtZW5kOiAxNnB4O1xuICAgIGdhcDogOHB4OyB9XG4gICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94OmZvY3VzLXdpdGhpbiB7XG4gICAgICBib3JkZXItY29sb3I6IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICMxZTI4MzIpO1xuICAgICAgYm9yZGVyLWJvdHRvbS1jb2xvcjogdmFyKC0tamItc2VsZWN0LWJvcmRlci1jb2xvciwgI2Y3ZjZmNik7XG4gICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCkgdmFyKC0tamItc2VsZWN0LWJvcmRlci1yYWRpdXMsIDE2cHgpIDAgMDsgfVxuICAgICAgQG1lZGlhIChtaW4td2lkdGg6IDMyMHB4KSBhbmQgKG1heC13aWR0aDogNzY3cHgpIHtcbiAgICAgICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94OmZvY3VzLXdpdGhpbiB7XG4gICAgICAgICAgYm9yZGVyLXJhZGl1czogdmFyKC0tamItc2VsZWN0LWJvcmRlci1yYWRpdXMsIDE2cHgpO1xuICAgICAgICAgIGJvcmRlci1ib3R0b20tY29sb3I6IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICMxZTI4MzIpOyB9IH1cbiAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3ggaW5wdXQge1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICBwYWRkaW5nOiAycHggMTJweCAwIDEycHg7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgICAgZm9udC1zaXplOiAxLjFlbTtcbiAgICAgIGNvbG9yOiB2YXIoLS1qYi1zZWxlY3QtaW5wdXQtY29sb3IsICMxZjE3MzUpO1xuICAgICAgbWFyZ2luOiAwO1xuICAgICAgYm9yZGVyLXJhZGl1czogMDsgfVxuICAgICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94IGlucHV0OmZvY3VzIHtcbiAgICAgICAgb3V0bGluZTogbm9uZTsgfVxuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWJveCAuYXJyb3ctaWNvbiB7XG4gICAgICB3aWR0aDogOHB4O1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKFwiZGF0YTppbWFnZS9zdmcreG1sO3V0ZjgsPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB2ZXJzaW9uPScxLjEnIGlkPSdMYXllcl8xJyB4PScwcHgnIHk9JzBweCcgdmlld0JveD0nMCAwIDQ5NC4xIDM3MS4xJyBzdHlsZT0nZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTQuMSAzNzEuMTsnIHhtbDpzcGFjZT0ncHJlc2VydmUnPjxwYXRoIGQ9J00yOTMsMzQzLjhMNDgwLjksNjkuM2M4LjctMTIuNywxMy4zLTI1LjQsMTMuMy0zNi4xYzAtMjAuNS0xNi41LTMzLjItNDQtMzMuMkg0NEMxNi40LDAsMCwxMi43LDAsMzMuMiAgYzAsMTAuNiw0LjYsMjMuMiwxMy4zLDM1LjlsMTg3LjksMjc0LjZjMTIuMSwxNy43LDI4LjQsMjcuNCw0NS45LDI3LjRDMjY0LjYsMzcxLjEsMjgwLjksMzYxLjQsMjkzLDM0My44eicvPjwvc3ZnPlwiKTtcbiAgICAgIGJhY2tncm91bmQtcG9zaXRpb246IGVuZDtcbiAgICAgIGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7XG4gICAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uLXg6IDA7XG4gICAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uLXk6IGNlbnRlcjsgfVxuICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLm1lc3NhZ2UtYm94IHtcbiAgICBmb250LXNpemU6IDAuN2VtO1xuICAgIHBhZGRpbmc6IDJweCA4cHg7XG4gICAgY29sb3I6ICM5MjkyOTI7IH1cbiAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLm1lc3NhZ2UtYm94OmVtcHR5IHtcbiAgICAgIHBhZGRpbmc6IDA7IH1cbiAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLm1lc3NhZ2UtYm94Li0tZXJyb3Ige1xuICAgICAgY29sb3I6IHJlZDsgfVxuICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1saXN0LXdyYXBwZXIge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIG1hcmdpbjogLTZweCAwO1xuICAgIGhlaWdodDogYXV0bztcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWpiLXNlbGVjdC1iZ2NvbG9yLCAjZjdmNmY2KTtcbiAgICBib3JkZXItcmFkaXVzOiAwIDAgdmFyKC0tamItc2VsZWN0LWJvcmRlci1yYWRpdXMsIDE2cHgpIHZhcigtLWpiLXNlbGVjdC1ib3JkZXItcmFkaXVzLCAxNnB4KTtcbiAgICBib3JkZXI6IHNvbGlkIDFweCB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLWNvbG9yLCAjMWUyODMyKTtcbiAgICBib3JkZXItdG9wOiBub25lO1xuICAgIGJvcmRlci1ib3R0b206IHNvbGlkIDNweCB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLWNvbG9yLCAjMWUyODMyKTtcbiAgICBib3gtc2hhZG93OiB2YXIoLS1qYi1zZWxlY3QtbGlzdC1ib3gtc2hhZG93KTtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIHotaW5kZXg6IDk5OTsgfVxuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWxpc3Qtd3JhcHBlci4tLXNob3cge1xuICAgICAgZGlzcGxheTogYmxvY2s7IH1cbiAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1saXN0LXdyYXBwZXIgLnNlbGVjdC1saXN0IHtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LWhlaWdodDogdmFyKC0tamItc2VsZWN0LWxpc3QtbWF4LWhlaWdodCwgNDAwcHgpO1xuICAgICAgb3ZlcmZsb3cteTogYXV0bztcbiAgICAgIHBhZGRpbmc6IDE2cHggMDsgfVxuICAgICAgQG1lZGlhIChtaW4td2lkdGg6IDMyMHB4KSBhbmQgKG1heC13aWR0aDogNzY3cHgpIHtcbiAgICAgICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtbGlzdC13cmFwcGVyIC5zZWxlY3QtbGlzdCB7XG4gICAgICAgICAgbWF4LWhlaWdodDogY2FsYygxMDB2aCAtIDI0MHB4KTsgfSB9XG4gICAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1saXN0LXdyYXBwZXIgLnNlbGVjdC1saXN0IC5zZWxlY3Qtb3B0aW9uIHtcbiAgICAgICAgbWluLWhlaWdodDogMzZweDtcbiAgICAgICAgcGFkZGluZzogNHB4IDE2cHg7XG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgIGZvbnQtc2l6ZTogMC45ZW07XG4gICAgICAgIGNvbG9yOiB2YXIoLS1qYi1zZWxlY3Qtb3B0aW9uLWNvbG9yLCBpbmhlcml0KTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tamItc2VsZWN0LW9wdGlvbi1iYWNrZ3JvdW5kLWNvbG9yLCAjZmZmKTsgfVxuICAgICAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1saXN0LXdyYXBwZXIgLnNlbGVjdC1saXN0IC5zZWxlY3Qtb3B0aW9uOmhvdmVyIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1qYi1zZWxlY3Qtb3B0aW9uLWJhY2tncm91bmQtY29sb3ItaG92ZXIsICMxMDczZGIpO1xuICAgICAgICAgIGNvbG9yOiB2YXIoLS1qYi1zZWxlY3Qtb3B0aW9uLWNvbG9yLWhvdmVyLCAjZmZmKTtcbiAgICAgICAgICBjdXJzb3I6IHBvaW50ZXI7IH1cbiJdfQ== */";
+var css_248z = ".jb-select-web-component {\n  width: var(--jb-select-width, 100%);\n  margin: var(--jb-select-margin, 12px 0);\n  position: relative;\n  box-sizing: border-box;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused {\n    position: absolute;\n    top: 0;\n    left: 0;\n    background-color: #0008;\n    width: 100vw;\n    height: 100vh;\n    margin: 0;\n    padding: 16px 8px;\n    z-index: 900;\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .select-list-wrapper {\n    position: initial;\n    margin: 16px 0;\n    border-radius: var(--jb-select-border-radius, 16px);\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused label {\n    color: #fff;\n    font-size: 1.5em;\n  }\n}\n.jb-select-web-component.--has-value .select-box {\n  border-color: var(--jb-select-border-color-selected, #c3ff14);\n  background-color: var(--jb-select-bgcolor-selected, #f7f6f6);\n}\n.jb-select-web-component label {\n  width: 100%;\n  margin: 4px 0px;\n  display: block;\n  font-size: 0.8em;\n  color: var(--jb-select-label-color, #1f1735);\n}\n.jb-select-web-component label.--hide {\n  display: none;\n}\n.jb-select-web-component .select-box {\n  width: 100%;\n  box-sizing: border-box;\n  height: 40px;\n  border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n  background-color: var(--jb-select-bgcolor, #f7f6f6);\n  border-bottom: solid var(--jb-select-border-bottom-width, 3px) var(--jb-select-border-color, #f7f6f6);\n  border-radius: var(--jb-select-border-radius, 16px);\n  margin: 4px 0px;\n  overflow: hidden;\n  display: flex;\n  justify-content: space-between;\n  padding-inline-end: 16px;\n  gap: 8px;\n  position: relative;\n}\n.jb-select-web-component .select-box:focus-within {\n  border-color: var(--jb-select-border-color, #1e2832);\n  border-bottom-color: var(--jb-select-border-color, #f7f6f6);\n  border-radius: var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px) 0 0;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component .select-box:focus-within {\n    border-radius: var(--jb-select-border-radius, 16px);\n    border-bottom-color: var(--jb-select-border-color, #1e2832);\n  }\n}\n.jb-select-web-component .select-box .selected-value-wrapper {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  overflow: hidden;\n  z-index: 1;\n}\n.jb-select-web-component .select-box .selected-value-wrapper.--search-typed {\n  opacity: 0;\n}\n.jb-select-web-component .select-box .selected-value-wrapper .selected-value {\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: 2px 12px 0 12px;\n  display: block;\n  font-family: inherit;\n  font-size: 1.1em;\n  color: #1f1735;\n  margin: 0;\n  border-radius: 0;\n  display: flex;\n  align-items: center;\n}\n.jb-select-web-component .select-box:focus-within .selected-value {\n  opacity: 0.7;\n  transition: all 0.3s ease;\n}\n.jb-select-web-component .select-box .front-box {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  overflow: hidden;\n  z-index: 2;\n}\n.jb-select-web-component .select-box .front-box input {\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: 2px 12px 0 12px;\n  display: block;\n  font-family: inherit;\n  font-size: 1.1em;\n  color: var(--jb-select-input-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n}\n.jb-select-web-component .select-box .front-box input:focus {\n  outline: none;\n}\n.jb-select-web-component .select-box .front-box .arrow-icon {\n  width: 8px;\n  height: 100%;\n  background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 494.1 371.1' style='enable-background:new 0 0 494.1 371.1;' xml:space='preserve'><path d='M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2  c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z'/></svg>\");\n  background-position: end;\n  background-repeat: no-repeat;\n  background-position-x: 0;\n  background-position-y: center;\n}\n.jb-select-web-component .message-box {\n  font-size: 0.7em;\n  padding: 2px 8px;\n  color: #929292;\n}\n.jb-select-web-component .message-box:empty {\n  padding: 0;\n}\n.jb-select-web-component .message-box.--error {\n  color: red;\n}\n.jb-select-web-component .select-list-wrapper {\n  display: none;\n  position: absolute;\n  margin: -6px 0;\n  height: auto;\n  overflow: hidden;\n  width: 100%;\n  background-color: var(--jb-select-bgcolor, #f7f6f6);\n  border-radius: 0 0 var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px);\n  border: solid 1px var(--jb-select-border-color, #1e2832);\n  border-top: none;\n  border-bottom: solid 3px var(--jb-select-border-color, #1e2832);\n  box-shadow: var(--jb-select-list-box-shadow);\n  box-sizing: border-box;\n  z-index: 999;\n}\n.jb-select-web-component .select-list-wrapper.--show {\n  display: block;\n}\n.jb-select-web-component .select-list-wrapper .select-list {\n  width: 100%;\n  max-height: var(--jb-select-list-max-height, 400px);\n  overflow-y: auto;\n  padding: 16px 0;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component .select-list-wrapper .select-list {\n    max-height: calc(100vh - 240px);\n  }\n}\n.jb-select-web-component .select-list-wrapper .select-list .select-option {\n  min-height: 36px;\n  padding: 4px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 0.9em;\n  color: var(--jb-select-option-color, inherit);\n  background-color: var(--jb-select-option-background-color, #fff);\n}\n.jb-select-web-component .select-list-wrapper .select-list .select-option:hover {\n  background-color: var(--jb-select-option-background-color-hover, #1073db);\n  color: var(--jb-select-option-color-hover, #fff);\n  cursor: pointer;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkpCU2VsZWN0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxtQ0FBbUM7RUFDbkMsdUNBQXVDO0VBQ3ZDLGtCQUFrQjtFQUNsQixzQkFBc0I7QUFDeEI7QUFDQTtFQUNFO0lBQ0Usa0JBQWtCO0lBQ2xCLE1BQU07SUFDTixPQUFPO0lBQ1AsdUJBQXVCO0lBQ3ZCLFlBQVk7SUFDWixhQUFhO0lBQ2IsU0FBUztJQUNULGlCQUFpQjtJQUNqQixZQUFZO0VBQ2Q7QUFDRjtBQUNBO0VBQ0U7SUFDRSxpQkFBaUI7SUFDakIsY0FBYztJQUNkLG1EQUFtRDtFQUNyRDtBQUNGO0FBQ0E7RUFDRTtJQUNFLFdBQVc7SUFDWCxnQkFBZ0I7RUFDbEI7QUFDRjtBQUNBO0VBQ0UsNkRBQTZEO0VBQzdELDREQUE0RDtBQUM5RDtBQUNBO0VBQ0UsV0FBVztFQUNYLGVBQWU7RUFDZixjQUFjO0VBQ2QsZ0JBQWdCO0VBQ2hCLDRDQUE0QztBQUM5QztBQUNBO0VBQ0UsYUFBYTtBQUNmO0FBQ0E7RUFDRSxXQUFXO0VBQ1gsc0JBQXNCO0VBQ3RCLFlBQVk7RUFDWix1RkFBdUY7RUFDdkYsbURBQW1EO0VBQ25ELHFHQUFxRztFQUNyRyxtREFBbUQ7RUFDbkQsZUFBZTtFQUNmLGdCQUFnQjtFQUNoQixhQUFhO0VBQ2IsOEJBQThCO0VBQzlCLHdCQUF3QjtFQUN4QixRQUFRO0VBQ1Isa0JBQWtCO0FBQ3BCO0FBQ0E7RUFDRSxvREFBb0Q7RUFDcEQsMkRBQTJEO0VBQzNELDRGQUE0RjtBQUM5RjtBQUNBO0VBQ0U7SUFDRSxtREFBbUQ7SUFDbkQsMkRBQTJEO0VBQzdEO0FBQ0Y7QUFDQTtFQUNFLGtCQUFrQjtFQUNsQixXQUFXO0VBQ1gsWUFBWTtFQUNaLHNCQUFzQjtFQUN0QixnQkFBZ0I7RUFDaEIsVUFBVTtBQUNaO0FBQ0E7RUFDRSxVQUFVO0FBQ1o7QUFDQTtFQUNFLFdBQVc7RUFDWCxzQkFBc0I7RUFDdEIsWUFBWTtFQUNaLDZCQUE2QjtFQUM3Qix3QkFBd0I7RUFDeEIsY0FBYztFQUNkLG9CQUFvQjtFQUNwQixnQkFBZ0I7RUFDaEIsY0FBYztFQUNkLFNBQVM7RUFDVCxnQkFBZ0I7RUFDaEIsYUFBYTtFQUNiLG1CQUFtQjtBQUNyQjtBQUNBO0VBQ0UsWUFBWTtFQUNaLHlCQUF5QjtBQUMzQjtBQUNBO0VBQ0Usa0JBQWtCO0VBQ2xCLFdBQVc7RUFDWCxZQUFZO0VBQ1osc0JBQXNCO0VBQ3RCLGdCQUFnQjtFQUNoQixVQUFVO0FBQ1o7QUFDQTtFQUNFLFlBQVk7RUFDWixXQUFXO0VBQ1gsc0JBQXNCO0VBQ3RCLFlBQVk7RUFDWiw2QkFBNkI7RUFDN0Isd0JBQXdCO0VBQ3hCLGNBQWM7RUFDZCxvQkFBb0I7RUFDcEIsZ0JBQWdCO0VBQ2hCLDRDQUE0QztFQUM1QyxTQUFTO0VBQ1QsZ0JBQWdCO0FBQ2xCO0FBQ0E7RUFDRSxhQUFhO0FBQ2Y7QUFDQTtFQUNFLFVBQVU7RUFDVixZQUFZO0VBQ1osZ2dCQUFnZ0I7RUFDaGdCLHdCQUF3QjtFQUN4Qiw0QkFBNEI7RUFDNUIsd0JBQXdCO0VBQ3hCLDZCQUE2QjtBQUMvQjtBQUNBO0VBQ0UsZ0JBQWdCO0VBQ2hCLGdCQUFnQjtFQUNoQixjQUFjO0FBQ2hCO0FBQ0E7RUFDRSxVQUFVO0FBQ1o7QUFDQTtFQUNFLFVBQVU7QUFDWjtBQUNBO0VBQ0UsYUFBYTtFQUNiLGtCQUFrQjtFQUNsQixjQUFjO0VBQ2QsWUFBWTtFQUNaLGdCQUFnQjtFQUNoQixXQUFXO0VBQ1gsbURBQW1EO0VBQ25ELDRGQUE0RjtFQUM1Rix3REFBd0Q7RUFDeEQsZ0JBQWdCO0VBQ2hCLCtEQUErRDtFQUMvRCw0Q0FBNEM7RUFDNUMsc0JBQXNCO0VBQ3RCLFlBQVk7QUFDZDtBQUNBO0VBQ0UsY0FBYztBQUNoQjtBQUNBO0VBQ0UsV0FBVztFQUNYLG1EQUFtRDtFQUNuRCxnQkFBZ0I7RUFDaEIsZUFBZTtBQUNqQjtBQUNBO0VBQ0U7SUFDRSwrQkFBK0I7RUFDakM7QUFDRjtBQUNBO0VBQ0UsZ0JBQWdCO0VBQ2hCLGlCQUFpQjtFQUNqQixhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLGdCQUFnQjtFQUNoQiw2Q0FBNkM7RUFDN0MsZ0VBQWdFO0FBQ2xFO0FBQ0E7RUFDRSx5RUFBeUU7RUFDekUsZ0RBQWdEO0VBQ2hELGVBQWU7QUFDakIiLCJmaWxlIjoiSkJTZWxlY3Quc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCB7XG4gIHdpZHRoOiB2YXIoLS1qYi1zZWxlY3Qtd2lkdGgsIDEwMCUpO1xuICBtYXJnaW46IHZhcigtLWpiLXNlbGVjdC1tYXJnaW4sIDEycHggMCk7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbn1cbkBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudC4tLWZvY3VzZWQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDAwODtcbiAgICB3aWR0aDogMTAwdnc7XG4gICAgaGVpZ2h0OiAxMDB2aDtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMTZweCA4cHg7XG4gICAgei1pbmRleDogOTAwO1xuICB9XG59XG5AbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA3NjdweCkge1xuICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQuLS1mb2N1c2VkIC5zZWxlY3QtbGlzdC13cmFwcGVyIHtcbiAgICBwb3NpdGlvbjogaW5pdGlhbDtcbiAgICBtYXJnaW46IDE2cHggMDtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCk7XG4gIH1cbn1cbkBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudC4tLWZvY3VzZWQgbGFiZWwge1xuICAgIGNvbG9yOiAjZmZmO1xuICAgIGZvbnQtc2l6ZTogMS41ZW07XG4gIH1cbn1cbi5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudC4tLWhhcy12YWx1ZSAuc2VsZWN0LWJveCB7XG4gIGJvcmRlci1jb2xvcjogdmFyKC0tamItc2VsZWN0LWJvcmRlci1jb2xvci1zZWxlY3RlZCwgI2MzZmYxNCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWpiLXNlbGVjdC1iZ2NvbG9yLXNlbGVjdGVkLCAjZjdmNmY2KTtcbn1cbi5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCBsYWJlbCB7XG4gIHdpZHRoOiAxMDAlO1xuICBtYXJnaW46IDRweCAwcHg7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBmb250LXNpemU6IDAuOGVtO1xuICBjb2xvcjogdmFyKC0tamItc2VsZWN0LWxhYmVsLWNvbG9yLCAjMWYxNzM1KTtcbn1cbi5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCBsYWJlbC4tLWhpZGUge1xuICBkaXNwbGF5OiBub25lO1xufVxuLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94IHtcbiAgd2lkdGg6IDEwMCU7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogNDBweDtcbiAgYm9yZGVyOiBzb2xpZCB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXdpZHRoLCAxcHgpIHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICNmN2Y2ZjYpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1qYi1zZWxlY3QtYmdjb2xvciwgI2Y3ZjZmNik7XG4gIGJvcmRlci1ib3R0b206IHNvbGlkIHZhcigtLWpiLXNlbGVjdC1ib3JkZXItYm90dG9tLXdpZHRoLCAzcHgpIHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICNmN2Y2ZjYpO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCk7XG4gIG1hcmdpbjogNHB4IDBweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBwYWRkaW5nLWlubGluZS1lbmQ6IDE2cHg7XG4gIGdhcDogOHB4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG4uamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3g6Zm9jdXMtd2l0aGluIHtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLWNvbG9yLCAjMWUyODMyKTtcbiAgYm9yZGVyLWJvdHRvbS1jb2xvcjogdmFyKC0tamItc2VsZWN0LWJvcmRlci1jb2xvciwgI2Y3ZjZmNik7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItcmFkaXVzLCAxNnB4KSB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCkgMCAwO1xufVxuQG1lZGlhIChtaW4td2lkdGg6IDMyMHB4KSBhbmQgKG1heC13aWR0aDogNzY3cHgpIHtcbiAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94OmZvY3VzLXdpdGhpbiB7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tamItc2VsZWN0LWJvcmRlci1yYWRpdXMsIDE2cHgpO1xuICAgIGJvcmRlci1ib3R0b20tY29sb3I6IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICMxZTI4MzIpO1xuICB9XG59XG4uamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3ggLnNlbGVjdGVkLXZhbHVlLXdyYXBwZXIge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJvcmRlci1yYWRpdXM6IGluaGVyaXQ7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHotaW5kZXg6IDE7XG59XG4uamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3ggLnNlbGVjdGVkLXZhbHVlLXdyYXBwZXIuLS1zZWFyY2gtdHlwZWQge1xuICBvcGFjaXR5OiAwO1xufVxuLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94IC5zZWxlY3RlZC12YWx1ZS13cmFwcGVyIC5zZWxlY3RlZC12YWx1ZSB7XG4gIHdpZHRoOiAxMDAlO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBwYWRkaW5nOiAycHggMTJweCAwIDEycHg7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgZm9udC1zaXplOiAxLjFlbTtcbiAgY29sb3I6ICMxZjE3MzU7XG4gIG1hcmdpbjogMDtcbiAgYm9yZGVyLXJhZGl1czogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cbi5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWJveDpmb2N1cy13aXRoaW4gLnNlbGVjdGVkLXZhbHVlIHtcbiAgb3BhY2l0eTogMC43O1xuICB0cmFuc2l0aW9uOiBhbGwgMC4zcyBlYXNlO1xufVxuLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94IC5mcm9udC1ib3gge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJvcmRlci1yYWRpdXM6IGluaGVyaXQ7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHotaW5kZXg6IDI7XG59XG4uamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3ggLmZyb250LWJveCBpbnB1dCB7XG4gIGJvcmRlcjogbm9uZTtcbiAgd2lkdGg6IDEwMCU7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIHBhZGRpbmc6IDJweCAxMnB4IDAgMTJweDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICBmb250LXNpemU6IDEuMWVtO1xuICBjb2xvcjogdmFyKC0tamItc2VsZWN0LWlucHV0LWNvbG9yLCAjMWYxNzM1KTtcbiAgbWFyZ2luOiAwO1xuICBib3JkZXItcmFkaXVzOiAwO1xufVxuLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94IC5mcm9udC1ib3ggaW5wdXQ6Zm9jdXMge1xuICBvdXRsaW5lOiBub25lO1xufVxuLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94IC5mcm9udC1ib3ggLmFycm93LWljb24ge1xuICB3aWR0aDogOHB4O1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJhY2tncm91bmQtaW1hZ2U6IHVybChcImRhdGE6aW1hZ2Uvc3ZnK3htbDt1dGY4LDxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB3aWR0aD0nOCcgaGVpZ2h0PSc4JyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycgdmVyc2lvbj0nMS4xJyBpZD0nTGF5ZXJfMScgeD0nMHB4JyB5PScwcHgnIHZpZXdCb3g9JzAgMCA0OTQuMSAzNzEuMScgc3R5bGU9J2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDk0LjEgMzcxLjE7JyB4bWw6c3BhY2U9J3ByZXNlcnZlJz48cGF0aCBkPSdNMjkzLDM0My44TDQ4MC45LDY5LjNjOC43LTEyLjcsMTMuMy0yNS40LDEzLjMtMzYuMWMwLTIwLjUtMTYuNS0zMy4yLTQ0LTMzLjJINDRDMTYuNCwwLDAsMTIuNywwLDMzLjIgIGMwLDEwLjYsNC42LDIzLjIsMTMuMywzNS45bDE4Ny45LDI3NC42YzEyLjEsMTcuNywyOC40LDI3LjQsNDUuOSwyNy40QzI2NC42LDM3MS4xLDI4MC45LDM2MS40LDI5MywzNDMuOHonLz48L3N2Zz5cIik7XG4gIGJhY2tncm91bmQtcG9zaXRpb246IGVuZDtcbiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbi14OiAwO1xuICBiYWNrZ3JvdW5kLXBvc2l0aW9uLXk6IGNlbnRlcjtcbn1cbi5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3gge1xuICBmb250LXNpemU6IDAuN2VtO1xuICBwYWRkaW5nOiAycHggOHB4O1xuICBjb2xvcjogIzkyOTI5Mjtcbn1cbi5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3g6ZW1wdHkge1xuICBwYWRkaW5nOiAwO1xufVxuLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5tZXNzYWdlLWJveC4tLWVycm9yIHtcbiAgY29sb3I6IHJlZDtcbn1cbi5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWxpc3Qtd3JhcHBlciB7XG4gIGRpc3BsYXk6IG5vbmU7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgbWFyZ2luOiAtNnB4IDA7XG4gIGhlaWdodDogYXV0bztcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWpiLXNlbGVjdC1iZ2NvbG9yLCAjZjdmNmY2KTtcbiAgYm9yZGVyLXJhZGl1czogMCAwIHZhcigtLWpiLXNlbGVjdC1ib3JkZXItcmFkaXVzLCAxNnB4KSB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCk7XG4gIGJvcmRlcjogc29saWQgMXB4IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICMxZTI4MzIpO1xuICBib3JkZXItdG9wOiBub25lO1xuICBib3JkZXItYm90dG9tOiBzb2xpZCAzcHggdmFyKC0tamItc2VsZWN0LWJvcmRlci1jb2xvciwgIzFlMjgzMik7XG4gIGJveC1zaGFkb3c6IHZhcigtLWpiLXNlbGVjdC1saXN0LWJveC1zaGFkb3cpO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICB6LWluZGV4OiA5OTk7XG59XG4uamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1saXN0LXdyYXBwZXIuLS1zaG93IHtcbiAgZGlzcGxheTogYmxvY2s7XG59XG4uamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1saXN0LXdyYXBwZXIgLnNlbGVjdC1saXN0IHtcbiAgd2lkdGg6IDEwMCU7XG4gIG1heC1oZWlnaHQ6IHZhcigtLWpiLXNlbGVjdC1saXN0LW1heC1oZWlnaHQsIDQwMHB4KTtcbiAgb3ZlcmZsb3cteTogYXV0bztcbiAgcGFkZGluZzogMTZweCAwO1xufVxuQG1lZGlhIChtaW4td2lkdGg6IDMyMHB4KSBhbmQgKG1heC13aWR0aDogNzY3cHgpIHtcbiAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtbGlzdC13cmFwcGVyIC5zZWxlY3QtbGlzdCB7XG4gICAgbWF4LWhlaWdodDogY2FsYygxMDB2aCAtIDI0MHB4KTtcbiAgfVxufVxuLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtbGlzdC13cmFwcGVyIC5zZWxlY3QtbGlzdCAuc2VsZWN0LW9wdGlvbiB7XG4gIG1pbi1oZWlnaHQ6IDM2cHg7XG4gIHBhZGRpbmc6IDRweCAxNnB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBmb250LXNpemU6IDAuOWVtO1xuICBjb2xvcjogdmFyKC0tamItc2VsZWN0LW9wdGlvbi1jb2xvciwgaW5oZXJpdCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWpiLXNlbGVjdC1vcHRpb24tYmFja2dyb3VuZC1jb2xvciwgI2ZmZik7XG59XG4uamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1saXN0LXdyYXBwZXIgLnNlbGVjdC1saXN0IC5zZWxlY3Qtb3B0aW9uOmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tamItc2VsZWN0LW9wdGlvbi1iYWNrZ3JvdW5kLWNvbG9yLWhvdmVyLCAjMTA3M2RiKTtcbiAgY29sb3I6IHZhcigtLWpiLXNlbGVjdC1vcHRpb24tY29sb3ItaG92ZXIsICNmZmYpO1xuICBjdXJzb3I6IHBvaW50ZXI7XG59Il19 */";
 
 class JBSelectWebComponent extends HTMLElement {
     get value() {
@@ -18,7 +18,8 @@ class JBSelectWebComponent extends HTMLElement {
     }
     set textValue(value) {
         this._textValue = value;
-        this._inputElement.value = value;
+        this.elements.input.value = value;
+        this.updateOptionList(value);
     }
     get optionList() {
         return this._optionList || [];
@@ -60,33 +61,43 @@ class JBSelectWebComponent extends HTMLElement {
         this.dispatchEvent(event);
     }
     initWebComponent() {
-        this._shadowRoot = this.attachShadow({
+        const shadowRoot = this.attachShadow({
             mode: 'open'
         });
         const html = `<style>${css_248z}</style>` + '\n' + HTML;
         const element = document.createElement('template');
         element.innerHTML = html;
-        this._shadowRoot.appendChild(element.content.cloneNode(true));
-        this._webComponentWrapper = this._shadowRoot.querySelector('.jb-select-web-component');
-        this._inputElement = this._shadowRoot.querySelector('.select-box input');
-        this._optionListElement = this._shadowRoot.querySelector('.select-list');
-        this._optionListElementWrapper = this._shadowRoot.querySelector('.select-list-wrapper');
+        shadowRoot.appendChild(element.content.cloneNode(true));
+        this.elements = {
+            input: shadowRoot.querySelector('.select-box input'),
+            componentWrapper: shadowRoot.querySelector('.jb-select-web-component'),
+            selectedValueWrapper: shadowRoot.querySelector('.selected-value-wrapper'),
+        };
+        this._optionListElement = shadowRoot.querySelector('.select-list');
+        this._optionListElementWrapper = shadowRoot.querySelector('.select-list-wrapper');
         this.registerEventListener();
        
     }
     registerEventListener() {
-        this._inputElement.addEventListener('change', this.onInputChange.bind(this));
-        this._inputElement.addEventListener('keypress', this.onInputKeyPress.bind(this));
-        this._inputElement.addEventListener('keyup', this.onInputKeyup.bind(this));
-        this._inputElement.addEventListener('focus', this.onInputFocus.bind(this));
-        this._inputElement.addEventListener('blur', this.onInputBlur.bind(this));
+        this.elements.input.addEventListener('change', this.onInputChange.bind(this));
+        this.elements.input.addEventListener('keypress', this.onInputKeyPress.bind(this));
+        this.elements.input.addEventListener('keyup', this.onInputKeyup.bind(this));
+        this.elements.input.addEventListener('beforeinput', this.onInputBeforeInput.bind(this));
+        this.elements.input.addEventListener('input', this.onInputInput.bind(this));
+        this.elements.input.addEventListener('focus', this.onInputFocus.bind(this));
+        this.elements.input.addEventListener('blur', this.onInputBlur.bind(this));
         this.shadowRoot.querySelector('.arrow-icon').addEventListener('click', this.onArrowKeyClick.bind(this));
     }
     initProp() {
         this.textValue = '';
+        /**
+         * @type {Record<string, function|null>} callbacks
+         */
         this.callbacks = {
             getOptionTitle: (option) => { return option; },
-            getOptionValue: (option) => { return option; }
+            getOptionValue: (option) => { return option; },
+            getOptionDOM:null,
+            getSelectedValueDOM:null,
         };
         this.value = this.getAttribute('value') || null;
         // if user set value and current option list is not contain the option. 
@@ -104,15 +115,15 @@ class JBSelectWebComponent extends HTMLElement {
     onAttributeChange(name, value) {
         switch (name) {
             case 'label':
-                this._shadowRoot.querySelector('label .label-value').innerHTML = value;
+                this.shadowRoot.querySelector('label .label-value').innerHTML = value;
                 if(value == null || value == undefined || value == ""){
-                    this._shadowRoot.querySelector('label').classList.add('--hide');
+                    this.shadowRoot.querySelector('label').classList.add('--hide');
                 }else {
-                    this._shadowRoot.querySelector('label').classList.remove('--hide');
+                    this.shadowRoot.querySelector('label').classList.remove('--hide');
                 }
                 break;
             case 'message':
-                this._shadowRoot.querySelector('.message-box').innerHTML = value;
+                this.shadowRoot.querySelector('.message-box').innerHTML = value;
                 break;
             case 'value':
                 this._setValueFromOutside(value);
@@ -125,7 +136,7 @@ class JBSelectWebComponent extends HTMLElement {
                 }
                 break;
             case 'placeholder':
-                this._inputElement.placeholder = value;
+                this.elements.input.placeholder = value;
                 break;
         }
 
@@ -158,10 +169,12 @@ class JBSelectWebComponent extends HTMLElement {
         this._value = value;
         if ((value == null || value == undefined)) {
             this.textValue = '';
-            this._shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');
+            this.setSelectedOptionDom(null);
+            this.shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');
         } else {
-            this.textValue = this.callbacks.getOptionTitle(value);
-            this._shadowRoot.querySelector('.jb-select-web-component').classList.add('--has-value');
+            this.textValue = '';
+            this.setSelectedOptionDom(value);
+            this.shadowRoot.querySelector('.jb-select-web-component').classList.add('--has-value');
         }
         //if user select an option we rest filter so user see all option again when open a select
         this.updateOptionList('');
@@ -175,20 +188,30 @@ class JBSelectWebComponent extends HTMLElement {
     }
     onInputKeyPress() {
         //TODO: raise keypress event
-        //hint: keypres dont called on backspace key
-        this.onUserTypeResetValue();
+    }
+    onInputBeforeInput(e){
+        this.handleSelectedValueDisplay(e.data);
+    }
+    onInputInput(e){
+        this.textValue = e.target.value;
     }
     onInputKeyup(e) {
         const inputText = e.target.value;
         //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom
-        if (e.key === "Backspace") {
+        if (e.key === "Backspace" || e.key === "Delete") {
             //becuase on keyprees dont recieve backspace key press
-            //we use keypress and dont do it all here becuase we dont want arrow key or any other function key to reset value 
-            this.onUserTypeResetValue();
+            this.handleSelectedValueDisplay(inputText);
         }
-        this._textValue = inputText;
+        
         this.triggerOnInputKeyup(e);
-        this.updateOptionList(inputText);
+        
+    }
+    handleSelectedValueDisplay(inputValue) {
+        if(inputValue !== ""){
+            this.elements.selectedValueWrapper.classList.add('--search-typed');
+        }else {
+            this.elements.selectedValueWrapper.classList.remove('--search-typed');
+        }
     }
     triggerOnInputKeyup(e){
         const event = new KeyboardEvent('keyup',{
@@ -211,12 +234,6 @@ class JBSelectWebComponent extends HTMLElement {
         });
         this.dispatchEvent(event);
     }
-    onUserTypeResetValue() {
-        //when use type but dont select we want to reset value becuase typed value is not a valid value
-        //TODO: check if typed value is the same as current selected value title dont null it
-        this._value = null;
-        this._shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');
-    }
     onInputChange(e) {
         const inputText = e.target.value;
         //here is the rare  time we update _text_value directly becuase we want trigger event that may read value directly from dom
@@ -232,13 +249,15 @@ class JBSelectWebComponent extends HTMLElement {
         }
     }
     focus(){
-        this._inputElement.focus();
+        this.elements.input.focus();
         this.showOptionList();
-        this._webComponentWrapper.classList.add('--focused');
+        this.elements.componentWrapper.classList.add('--focused');
         
     }
     blur(){
-        this._webComponentWrapper.classList.remove('--focused');
+        this.elements.componentWrapper.classList.remove('--focused');
+        this.textValue = "";
+        this.handleSelectedValueDisplay('');
         this.hideOptionList();
         this.triggerInputValidation();
     }
@@ -264,16 +283,26 @@ class JBSelectWebComponent extends HTMLElement {
 
     }
     createOptionDOM(item){
+        let optionDOM = null;
+        if(typeof this.callbacks.getOptionDOM == 'function'){
+            optionDOM = this.callbacks.getOptionDOM(item,this.onOptionClicked.bind(this));
+        }else {
+            optionDOM = this._createOptionDom(item);
+        }
+        optionDOM.value = item;
+        return optionDOM;
+    }
+
+    _createOptionDom(item){
         const optionElement = document.createElement('div');
         optionElement.classList.add('select-option');
         //it has defualt function who return wxact same input
         optionElement.innerHTML = this.callbacks.getOptionTitle(item);
-        optionElement.value = item;
         optionElement.addEventListener('click', this.onOptionClicked.bind(this));
         return optionElement;
     }
     onOptionClicked(e) {
-        const value = e.target.value;
+        const value = e.currentTarget.value;
         this.selectOption(value);
         this.blur();
         this._triggerOnChangeEvent();
@@ -285,9 +314,14 @@ class JBSelectWebComponent extends HTMLElement {
     filterOptionList(filterString) {
         const displayOptionList = [];
         this.optionList.filter((option) => {
-            if (typeof this.callbacks.getOptionTitle(option) == 'string' && this.callbacks.getOptionTitle(option).includes(filterString)) {
+            const optionTitle = this.callbacks.getOptionTitle(option);
+            const isString = typeof optionTitle == 'string';
+            if (isString && optionTitle.includes(filterString)) {
                 displayOptionList.push(option);
             }
+            if (!isString) {
+                console.warn("the provided values for optionsList is not of type string.", { option, title: optionTitle });
+            }
         });
         return displayOptionList;
     }
@@ -315,19 +349,42 @@ class JBSelectWebComponent extends HTMLElement {
     showValidationError(errorType) {
         if (errorType == 'REQUIRED') {
             const label = this.getAttribute('label');
-            this._shadowRoot.querySelector('.message-box').innerHTML = `${label} حتما باید انتخاب شود`;
-            this._shadowRoot.querySelector('.message-box').classList.add('--error');
+            this.shadowRoot.querySelector('.message-box').innerHTML = `${label} حتما باید انتخاب شود`;
+            this.shadowRoot.querySelector('.message-box').classList.add('--error');
         }
     }
     clearValidationError() {
-        this._shadowRoot.querySelector('.message-box').innerHTML = this.getAttribute('message') || '';
-        this._shadowRoot.querySelector('.message-box').classList.remove('--error');
+        this.shadowRoot.querySelector('.message-box').innerHTML = this.getAttribute('message') || '';
+        this.shadowRoot.querySelector('.message-box').classList.remove('--error');
 
     }
     _triggerOnChangeEvent() {
         const event = new Event("change");
         this.dispatchEvent(event);
     }
+    setSelectedOptionDom(value) {
+        //when user select option or value changed in any condition we set selected option DOM
+        this.elements.selectedValueWrapper.innerHTML = '';
+        //if value was null or undifined it remain empty
+        if(value !== null && value !== undefined){
+            const selectedOptionDom = this.createSelectedValueDom(value);
+            this.elements.selectedValueWrapper.appendChild(selectedOptionDom);
+        }
+    }
+    createSelectedValueDom(value){
+        if(typeof this.callbacks.getSelectedValueDOM == 'function'){
+            return this.callbacks.getSelectedValueDOM(value);
+        }else {
+            return this._createSelectedValueDom(value);
+        }
+    }
+    _createSelectedValueDom(value){
+        const valueText = this.callbacks.getOptionTitle(value);
+        const selectedOptionDom = document.createElement('div');
+        selectedOptionDom.classList.add('selected-value');
+        selectedOptionDom.innerHTML = valueText;
+        return selectedOptionDom;
+    }
 }
 const myElementNotExists = !customElements.get('jb-select');
 if(myElementNotExists){

package/dist/JBSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"JBSelect.js","sources":["../lib/JBSelect.js"],"sourcesContent":["import HTML from './JBSelect.html';\r\nimport CSS from './JBSelect.scss';\r\nclass JBSelectWebComponent extends HTMLElement {\r\n    get value() {\r\n        if(this._value){\r\n            return this.callbacks.getOptionValue(this._value);\r\n        }else{\r\n            return null;\r\n        }\r\n    }\r\n    set value(value) {\r\n        this._setValueFromOutside(value);\r\n    }\r\n    get textValue() {\r\n        return this._textValue;\r\n    }\r\n    set textValue(value) {\r\n        this._textValue = value;\r\n        this._inputElement.value = value;\r\n    }\r\n    get optionList() {\r\n        return this._optionList || [];\r\n    }\r\n    set optionList(value) {\r\n        if(!Array.isArray(value)){\r\n            console.error('your provided option list to jb-select is not a array. you must provide array value',{value});\r\n            return;\r\n        }\r\n        this._optionList = value;\r\n        //every time optionList get updated we set our value base on current option list we use _notFindedValue in case of value provided to component before optionList\r\n        this._displayOptionList = this.filterOptionList(this.textValue);\r\n        this._setValueOnOptionListChanged();\r\n        this.updateOptionListDOM();\r\n    }\r\n    get displayOptionList() {\r\n        return this._displayOptionList;\r\n    }\r\n    get isMobileDevice (){ return /Mobi/i.test(window.navigator.userAgent);}\r\n\r\n\r\n    constructor() {\r\n        super();\r\n        this.initWebComponent();\r\n        this.initProp();\r\n        \r\n    }\r\n    connectedCallback() {\r\n        // standard web component event that called when all of dom is binded\r\n        this.callOnLoadEvent();\r\n        this.callOnInitEvent();\r\n    }\r\n    callOnInitEvent() {\r\n        var event = new CustomEvent('init', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    callOnLoadEvent() {\r\n        var event = new CustomEvent('load', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    initWebComponent() {\r\n        this._shadowRoot = this.attachShadow({\r\n            mode: 'open'\r\n        });\r\n        const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n        const element = document.createElement('template');\r\n        element.innerHTML = html;\r\n        this._shadowRoot.appendChild(element.content.cloneNode(true));\r\n        this._webComponentWrapper = this._shadowRoot.querySelector('.jb-select-web-component');\r\n        this._inputElement = this._shadowRoot.querySelector('.select-box input');\r\n        this._optionListElement = this._shadowRoot.querySelector('.select-list');\r\n        this._optionListElementWrapper = this._shadowRoot.querySelector('.select-list-wrapper');\r\n        this.registerEventListener();\r\n       \r\n    }\r\n    registerEventListener() {\r\n        this._inputElement.addEventListener('change', this.onInputChange.bind(this));\r\n        this._inputElement.addEventListener('keypress', this.onInputKeyPress.bind(this));\r\n        this._inputElement.addEventListener('keyup', this.onInputKeyup.bind(this));\r\n        this._inputElement.addEventListener('focus', this.onInputFocus.bind(this));\r\n        this._inputElement.addEventListener('blur', this.onInputBlur.bind(this));\r\n        this.shadowRoot.querySelector('.arrow-icon').addEventListener('click', this.onArrowKeyClick.bind(this));\r\n    }\r\n    initProp() {\r\n        this.textValue = '';\r\n        this.callbacks = {\r\n            getOptionTitle: (option) => { return option; },\r\n            getOptionValue: (option) => { return option; }\r\n        };\r\n        this.value = this.getAttribute('value') || null;\r\n        // if user set value and current option list is not contain the option. \r\n        // we hold it in _notFindedValue and select value when option value get updated\r\n        this._notFindedValue = null;\r\n        this.required = false;\r\n    }\r\n    static get observedAttributes() {\r\n        return ['label', 'message', 'value', 'required', 'placeholder'];\r\n    }\r\n    attributeChangedCallback(name, oldValue, newValue) {\r\n        // do something when an attribute has changed\r\n        this.onAttributeChange(name, newValue);\r\n    }\r\n    onAttributeChange(name, value) {\r\n        switch (name) {\r\n            case 'label':\r\n                this._shadowRoot.querySelector('label .label-value').innerHTML = value;\r\n                if(value == null || value == undefined || value == \"\"){\r\n                    this._shadowRoot.querySelector('label').classList.add('--hide');\r\n                }else{\r\n                    this._shadowRoot.querySelector('label').classList.remove('--hide');\r\n                }\r\n                break;\r\n            case 'message':\r\n                this._shadowRoot.querySelector('.message-box').innerHTML = value;\r\n                break;\r\n            case 'value':\r\n                this._setValueFromOutside(value);\r\n                break;\r\n            case 'required':\r\n                if (value === \"\" || value == \"true\" || value == true) {\r\n                    this.required = true;\r\n                } else {\r\n                    this.required = false;\r\n                }\r\n                break;\r\n            case 'placeholder':\r\n                this._inputElement.placeholder = value;\r\n                break;\r\n        }\r\n\r\n    }\r\n    _setValueOnOptionListChanged(){\r\n        //when option list changed we see if current value is valid for new optionlist we set it if not we reset value to null.\r\n        //in some scenario value is setted before otionList attached so we store it on this._notFindedValue and after option list setted we set value from this._notFindedValue\r\n        if(this.value || this._notFindedValue){\r\n            //if select has no prev value or pending not finded value we dont set it becuase user may input some search terms in input box and developer-user update list base on that value\r\n            //if we set it to null the search term and this.textvalue will become null and empty too and it make impossible for user to search in dynamic back-end provided searchable list so we put this condition to prevent it\r\n            this._setValueFromOutside(this.value || this._notFindedValue);\r\n        }\r\n    }\r\n    _setValueFromOutside(value) {\r\n        //when user set value by attribute or value prop directly we call this function\r\n        const matchedOption = this.optionList.find((option) => { // if we have value mapper we set selected value by object that match mapper\r\n            if (this.callbacks.getOptionValue(option) == value) {\r\n                return option;\r\n            }\r\n        });\r\n        if (matchedOption || value == null) {\r\n            this._setValue(matchedOption);\r\n        } else {\r\n            this._notFindedValue = value;\r\n        }\r\n\r\n    }\r\n    _setValue(value) {\r\n        this._notFindedValue = null;\r\n        this._value = value;\r\n        if ((value == null || value == undefined)) {\r\n            this.textValue = '';\r\n            this._shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');\r\n        } else {\r\n            this.textValue = this.callbacks.getOptionTitle(value);\r\n            this._shadowRoot.querySelector('.jb-select-web-component').classList.add('--has-value');\r\n        }\r\n        //if user select an option we rest filter so user see all option again when open a select\r\n        this.updateOptionList('');\r\n    }\r\n    onArrowKeyClick(){\r\n        if(this._optionListElementWrapper.classList.contains('--show')){\r\n            this.blur();\r\n        }else{\r\n            this.focus();\r\n        }\r\n    }\r\n    onInputKeyPress() {\r\n        //TODO: raise keypress event\r\n        //hint: keypres dont called on backspace key\r\n        this.onUserTypeResetValue();\r\n    }\r\n    onInputKeyup(e) {\r\n        const inputText = e.target.value;\r\n        //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom\r\n        if (e.key === \"Backspace\") {\r\n            //becuase on keyprees dont recieve backspace key press\r\n            //we use keypress and dont do it all here becuase we dont want arrow key or any other function key to reset value \r\n            this.onUserTypeResetValue();\r\n        }\r\n        this._textValue = inputText;\r\n        this.triggerOnInputKeyup(e);\r\n        this.updateOptionList(inputText);\r\n    }\r\n    triggerOnInputKeyup(e){\r\n        const event = new KeyboardEvent('keyup',{\r\n            altKey:e.altKey,\r\n            bubbles:e.bubbles,\r\n            cancelable:e.cancelable,\r\n            code:e.code,\r\n            ctrlKey:e.ctrlKey,\r\n            detail:e.detail,\r\n            key:e.key,\r\n            shiftKey:e.shiftKey,\r\n            charCode:e.charCode,\r\n            location:e.location,\r\n            composed:e.composed,\r\n            isComposing:e.isComposing,\r\n            metaKey:e.metaKey,\r\n            repeat:e.repeat,\r\n            keyCode:e.keyCode,\r\n            view:e.view\r\n        });\r\n        this.dispatchEvent(event);\r\n    }\r\n    onUserTypeResetValue() {\r\n        //when use type but dont select we want to reset value becuase typed value is not a valid value\r\n        //TODO: check if typed value is the same as current selected value title dont null it\r\n        this._value = null;\r\n        this._shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');\r\n    }\r\n    onInputChange(e) {\r\n        const inputText = e.target.value;\r\n        //here is the rare  time we update _text_value directly becuase we want trigger event that may read value directly from dom\r\n        this._textValue = inputText;\r\n    }\r\n    onInputFocus() {\r\n        this.focus();\r\n    }\r\n    onInputBlur(e) {\r\n        let focusedElement = e.relatedTarget;\r\n        if (focusedElement === this._optionListElement) {\r\n            //user click on a menu item\r\n        } else {\r\n            this.blur();\r\n        }\r\n    }\r\n    focus(){\r\n        this._inputElement.focus();\r\n        this.showOptionList();\r\n        this._webComponentWrapper.classList.add('--focused');\r\n        \r\n    }\r\n    blur(){\r\n        this._webComponentWrapper.classList.remove('--focused');\r\n        this.hideOptionList();\r\n        this.triggerInputValidation();\r\n    }\r\n    showOptionList(){\r\n        this._optionListElementWrapper.classList.add('--show');\r\n    }\r\n    hideOptionList() {\r\n        this._optionListElementWrapper.classList.remove('--show');\r\n    }\r\n    updateOptionList(filterText) {\r\n        this._displayOptionList = this.filterOptionList(filterText);\r\n        this.updateOptionListDOM();\r\n    }\r\n    updateOptionListDOM() {\r\n        const optionDomList = [];\r\n        this.displayOptionList.forEach((item) => {\r\n            const optionDOM = this.createOptionDOM(item);\r\n            optionDomList.push(optionDOM);\r\n        });\r\n        this._optionListElement.innerHTML = '';\r\n        optionDomList.forEach(optionElement => { this._optionListElement.appendChild(optionElement);});\r\n\r\n\r\n    }\r\n    createOptionDOM(item){\r\n        const optionElement = document.createElement('div');\r\n        optionElement.classList.add('select-option');\r\n        //it has defualt function who return wxact same input\r\n        optionElement.innerHTML = this.callbacks.getOptionTitle(item);\r\n        optionElement.value = item;\r\n        optionElement.addEventListener('click', this.onOptionClicked.bind(this));\r\n        return optionElement;\r\n    }\r\n    onOptionClicked(e) {\r\n        const value = e.target.value;\r\n        this.selectOption(value);\r\n        this.blur();\r\n        this._triggerOnChangeEvent();\r\n    }\r\n    selectOption(value) {\r\n        this._setValue(value);\r\n        this.triggerInputValidation();\r\n    }\r\n    filterOptionList(filterString) {\r\n        const displayOptionList = [];\r\n        this.optionList.filter((option) => {\r\n            if (typeof this.callbacks.getOptionTitle(option) == 'string' && this.callbacks.getOptionTitle(option).includes(filterString)) {\r\n                displayOptionList.push(option);\r\n            }\r\n        });\r\n        return displayOptionList;\r\n    }\r\n    triggerInputValidation(showError = true) {\r\n        // this method is public and used outside of component to check if field validity param are met\r\n        let errorType = '';\r\n        let requiredValid = true;\r\n        if (this.required) {\r\n\r\n            requiredValid = this.value != null;\r\n            if (!requiredValid) {\r\n                errorType = 'REQUIRED';\r\n            }\r\n        }\r\n        let isAllValid = requiredValid; //& other validation if they added\r\n        if (isAllValid) {\r\n            this.clearValidationError();\r\n        } else if (showError) {\r\n            this.showValidationError(errorType);\r\n        }\r\n        return {\r\n            isAllValid\r\n        };\r\n    }\r\n    showValidationError(errorType) {\r\n        if (errorType == 'REQUIRED') {\r\n            const label = this.getAttribute('label');\r\n            this._shadowRoot.querySelector('.message-box').innerHTML = `${label} حتما باید انتخاب شود`;\r\n            this._shadowRoot.querySelector('.message-box').classList.add('--error');\r\n        }\r\n    }\r\n    clearValidationError() {\r\n        this._shadowRoot.querySelector('.message-box').innerHTML = this.getAttribute('message') || '';\r\n        this._shadowRoot.querySelector('.message-box').classList.remove('--error');\r\n\r\n    }\r\n    _triggerOnChangeEvent() {\r\n        const event = new Event(\"change\");\r\n        this.dispatchEvent(event);\r\n    }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-select');\r\nif(myElementNotExists){\r\n    //prevent duplicate registering\r\n    window.customElements.define('jb-select', JBSelectWebComponent);\r\n}\r\n"],"names":["CSS"],"mappings":"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"}
+{"version":3,"file":"JBSelect.js","sources":["../lib/JBSelect.js"],"sourcesContent":["import HTML from './JBSelect.html';\r\nimport CSS from './JBSelect.scss';\r\nclass JBSelectWebComponent extends HTMLElement {\r\n    get value() {\r\n        if(this._value){\r\n            return this.callbacks.getOptionValue(this._value);\r\n        }else{\r\n            return null;\r\n        }\r\n    }\r\n    set value(value) {\r\n        this._setValueFromOutside(value);\r\n    }\r\n    get textValue() {\r\n        return this._textValue;\r\n    }\r\n    set textValue(value) {\r\n        this._textValue = value;\r\n        this.elements.input.value = value;\r\n        this.updateOptionList(value);\r\n    }\r\n    get optionList() {\r\n        return this._optionList || [];\r\n    }\r\n    set optionList(value) {\r\n        if(!Array.isArray(value)){\r\n            console.error('your provided option list to jb-select is not a array. you must provide array value',{value});\r\n            return;\r\n        }\r\n        this._optionList = value;\r\n        //every time optionList get updated we set our value base on current option list we use _notFindedValue in case of value provided to component before optionList\r\n        this._displayOptionList = this.filterOptionList(this.textValue);\r\n        this._setValueOnOptionListChanged();\r\n        this.updateOptionListDOM();\r\n    }\r\n    get displayOptionList() {\r\n        return this._displayOptionList;\r\n    }\r\n    get isMobileDevice (){ return /Mobi/i.test(window.navigator.userAgent);}\r\n\r\n\r\n    constructor() {\r\n        super();\r\n        this.initWebComponent();\r\n        this.initProp();\r\n        \r\n    }\r\n    connectedCallback() {\r\n        // standard web component event that called when all of dom is binded\r\n        this.callOnLoadEvent();\r\n        this.callOnInitEvent();\r\n    }\r\n    callOnInitEvent() {\r\n        var event = new CustomEvent('init', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    callOnLoadEvent() {\r\n        var event = new CustomEvent('load', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    initWebComponent() {\r\n        const shadowRoot = this.attachShadow({\r\n            mode: 'open'\r\n        });\r\n        const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n        const element = document.createElement('template');\r\n        element.innerHTML = html;\r\n        shadowRoot.appendChild(element.content.cloneNode(true));\r\n        this.elements = {\r\n            input: shadowRoot.querySelector('.select-box input'),\r\n            componentWrapper: shadowRoot.querySelector('.jb-select-web-component'),\r\n            selectedValueWrapper: shadowRoot.querySelector('.selected-value-wrapper'),\r\n        };\r\n        this._optionListElement = shadowRoot.querySelector('.select-list');\r\n        this._optionListElementWrapper = shadowRoot.querySelector('.select-list-wrapper');\r\n        this.registerEventListener();\r\n       \r\n    }\r\n    registerEventListener() {\r\n        this.elements.input.addEventListener('change', this.onInputChange.bind(this));\r\n        this.elements.input.addEventListener('keypress', this.onInputKeyPress.bind(this));\r\n        this.elements.input.addEventListener('keyup', this.onInputKeyup.bind(this));\r\n        this.elements.input.addEventListener('beforeinput', this.onInputBeforeInput.bind(this));\r\n        this.elements.input.addEventListener('input', this.onInputInput.bind(this));\r\n        this.elements.input.addEventListener('focus', this.onInputFocus.bind(this));\r\n        this.elements.input.addEventListener('blur', this.onInputBlur.bind(this));\r\n        this.shadowRoot.querySelector('.arrow-icon').addEventListener('click', this.onArrowKeyClick.bind(this));\r\n    }\r\n    initProp() {\r\n        this.textValue = '';\r\n        /**\r\n         * @type {Record<string, function|null>} callbacks\r\n         */\r\n        this.callbacks = {\r\n            getOptionTitle: (option) => { return option; },\r\n            getOptionValue: (option) => { return option; },\r\n            getOptionDOM:null,\r\n            getSelectedValueDOM:null,\r\n        };\r\n        this.value = this.getAttribute('value') || null;\r\n        // if user set value and current option list is not contain the option. \r\n        // we hold it in _notFindedValue and select value when option value get updated\r\n        this._notFindedValue = null;\r\n        this.required = false;\r\n    }\r\n    static get observedAttributes() {\r\n        return ['label', 'message', 'value', 'required', 'placeholder'];\r\n    }\r\n    attributeChangedCallback(name, oldValue, newValue) {\r\n        // do something when an attribute has changed\r\n        this.onAttributeChange(name, newValue);\r\n    }\r\n    onAttributeChange(name, value) {\r\n        switch (name) {\r\n            case 'label':\r\n                this.shadowRoot.querySelector('label .label-value').innerHTML = value;\r\n                if(value == null || value == undefined || value == \"\"){\r\n                    this.shadowRoot.querySelector('label').classList.add('--hide');\r\n                }else{\r\n                    this.shadowRoot.querySelector('label').classList.remove('--hide');\r\n                }\r\n                break;\r\n            case 'message':\r\n                this.shadowRoot.querySelector('.message-box').innerHTML = value;\r\n                break;\r\n            case 'value':\r\n                this._setValueFromOutside(value);\r\n                break;\r\n            case 'required':\r\n                if (value === \"\" || value == \"true\" || value == true) {\r\n                    this.required = true;\r\n                } else {\r\n                    this.required = false;\r\n                }\r\n                break;\r\n            case 'placeholder':\r\n                this.elements.input.placeholder = value;\r\n                break;\r\n        }\r\n\r\n    }\r\n    _setValueOnOptionListChanged(){\r\n        //when option list changed we see if current value is valid for new optionlist we set it if not we reset value to null.\r\n        //in some scenario value is setted before otionList attached so we store it on this._notFindedValue and after option list setted we set value from this._notFindedValue\r\n        if(this.value || this._notFindedValue){\r\n            //if select has no prev value or pending not finded value we dont set it becuase user may input some search terms in input box and developer-user update list base on that value\r\n            //if we set it to null the search term and this.textvalue will become null and empty too and it make impossible for user to search in dynamic back-end provided searchable list so we put this condition to prevent it\r\n            this._setValueFromOutside(this.value || this._notFindedValue);\r\n        }\r\n    }\r\n    _setValueFromOutside(value) {\r\n        //when user set value by attribute or value prop directly we call this function\r\n        const matchedOption = this.optionList.find((option) => { // if we have value mapper we set selected value by object that match mapper\r\n            if (this.callbacks.getOptionValue(option) == value) {\r\n                return option;\r\n            }\r\n        });\r\n        if (matchedOption || value == null) {\r\n            this._setValue(matchedOption);\r\n        } else {\r\n            this._notFindedValue = value;\r\n        }\r\n\r\n    }\r\n    _setValue(value) {\r\n        this._notFindedValue = null;\r\n        this._value = value;\r\n        if ((value == null || value == undefined)) {\r\n            this.textValue = '';\r\n            this.setSelectedOptionDom(null);\r\n            this.shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');\r\n        } else {\r\n            this.textValue = '';\r\n            this.setSelectedOptionDom(value);\r\n            this.shadowRoot.querySelector('.jb-select-web-component').classList.add('--has-value');\r\n        }\r\n        //if user select an option we rest filter so user see all option again when open a select\r\n        this.updateOptionList('');\r\n    }\r\n    onArrowKeyClick(){\r\n        if(this._optionListElementWrapper.classList.contains('--show')){\r\n            this.blur();\r\n        }else{\r\n            this.focus();\r\n        }\r\n    }\r\n    onInputKeyPress() {\r\n        //TODO: raise keypress event\r\n    }\r\n    onInputBeforeInput(e){\r\n        this.handleSelectedValueDisplay(e.data);\r\n    }\r\n    onInputInput(e){\r\n        this.textValue = e.target.value;\r\n    }\r\n    onInputKeyup(e) {\r\n        const inputText = e.target.value;\r\n        //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom\r\n        if (e.key === \"Backspace\" || e.key === \"Delete\") {\r\n            //becuase on keyprees dont recieve backspace key press\r\n            this.handleSelectedValueDisplay(inputText);\r\n        }\r\n        \r\n        this.triggerOnInputKeyup(e);\r\n        \r\n    }\r\n    handleSelectedValueDisplay(inputValue) {\r\n        if(inputValue !== \"\"){\r\n            this.elements.selectedValueWrapper.classList.add('--search-typed');\r\n        }else{\r\n            this.elements.selectedValueWrapper.classList.remove('--search-typed');\r\n        }\r\n    }\r\n    triggerOnInputKeyup(e){\r\n        const event = new KeyboardEvent('keyup',{\r\n            altKey:e.altKey,\r\n            bubbles:e.bubbles,\r\n            cancelable:e.cancelable,\r\n            code:e.code,\r\n            ctrlKey:e.ctrlKey,\r\n            detail:e.detail,\r\n            key:e.key,\r\n            shiftKey:e.shiftKey,\r\n            charCode:e.charCode,\r\n            location:e.location,\r\n            composed:e.composed,\r\n            isComposing:e.isComposing,\r\n            metaKey:e.metaKey,\r\n            repeat:e.repeat,\r\n            keyCode:e.keyCode,\r\n            view:e.view\r\n        });\r\n        this.dispatchEvent(event);\r\n    }\r\n    onInputChange(e) {\r\n        const inputText = e.target.value;\r\n        //here is the rare  time we update _text_value directly becuase we want trigger event that may read value directly from dom\r\n        this._textValue = inputText;\r\n    }\r\n    onInputFocus() {\r\n        this.focus();\r\n    }\r\n    onInputBlur(e) {\r\n        let focusedElement = e.relatedTarget;\r\n        if (focusedElement === this._optionListElement) {\r\n            //user click on a menu item\r\n        } else {\r\n            this.blur();\r\n        }\r\n    }\r\n    focus(){\r\n        this.elements.input.focus();\r\n        this.showOptionList();\r\n        this.elements.componentWrapper.classList.add('--focused');\r\n        \r\n    }\r\n    blur(){\r\n        this.elements.componentWrapper.classList.remove('--focused');\r\n        this.textValue = \"\";\r\n        this.handleSelectedValueDisplay('');\r\n        this.hideOptionList();\r\n        this.triggerInputValidation();\r\n    }\r\n    showOptionList(){\r\n        this._optionListElementWrapper.classList.add('--show');\r\n    }\r\n    hideOptionList() {\r\n        this._optionListElementWrapper.classList.remove('--show');\r\n    }\r\n    updateOptionList(filterText) {\r\n        this._displayOptionList = this.filterOptionList(filterText);\r\n        this.updateOptionListDOM();\r\n    }\r\n    updateOptionListDOM() {\r\n        const optionDomList = [];\r\n        this.displayOptionList.forEach((item) => {\r\n            const optionDOM = this.createOptionDOM(item);\r\n            optionDomList.push(optionDOM);\r\n        });\r\n        this._optionListElement.innerHTML = '';\r\n        optionDomList.forEach(optionElement => { this._optionListElement.appendChild(optionElement);});\r\n\r\n\r\n    }\r\n    createOptionDOM(item){\r\n        let optionDOM = null;\r\n        if(typeof this.callbacks.getOptionDOM == 'function'){\r\n            optionDOM = this.callbacks.getOptionDOM(item,this.onOptionClicked.bind(this));\r\n        }else{\r\n            optionDOM = this._createOptionDom(item);\r\n        }\r\n        optionDOM.value = item;\r\n        return optionDOM;\r\n    }\r\n\r\n    _createOptionDom(item){\r\n        const optionElement = document.createElement('div');\r\n        optionElement.classList.add('select-option');\r\n        //it has defualt function who return wxact same input\r\n        optionElement.innerHTML = this.callbacks.getOptionTitle(item);\r\n        optionElement.addEventListener('click', this.onOptionClicked.bind(this));\r\n        return optionElement;\r\n    }\r\n    onOptionClicked(e) {\r\n        const value = e.currentTarget.value;\r\n        this.selectOption(value);\r\n        this.blur();\r\n        this._triggerOnChangeEvent();\r\n    }\r\n    selectOption(value) {\r\n        this._setValue(value);\r\n        this.triggerInputValidation();\r\n    }\r\n    filterOptionList(filterString) {\r\n        const displayOptionList = [];\r\n        this.optionList.filter((option) => {\r\n            const optionTitle = this.callbacks.getOptionTitle(option);\r\n            const isString = typeof optionTitle == 'string';\r\n            if (isString && optionTitle.includes(filterString)) {\r\n                displayOptionList.push(option);\r\n            }\r\n            if (!isString) {\r\n                console.warn(\"the provided values for optionsList is not of type string.\", { option, title: optionTitle });\r\n            }\r\n        });\r\n        return displayOptionList;\r\n    }\r\n    triggerInputValidation(showError = true) {\r\n        // this method is public and used outside of component to check if field validity param are met\r\n        let errorType = '';\r\n        let requiredValid = true;\r\n        if (this.required) {\r\n\r\n            requiredValid = this.value != null;\r\n            if (!requiredValid) {\r\n                errorType = 'REQUIRED';\r\n            }\r\n        }\r\n        let isAllValid = requiredValid; //& other validation if they added\r\n        if (isAllValid) {\r\n            this.clearValidationError();\r\n        } else if (showError) {\r\n            this.showValidationError(errorType);\r\n        }\r\n        return {\r\n            isAllValid\r\n        };\r\n    }\r\n    showValidationError(errorType) {\r\n        if (errorType == 'REQUIRED') {\r\n            const label = this.getAttribute('label');\r\n            this.shadowRoot.querySelector('.message-box').innerHTML = `${label} حتما باید انتخاب شود`;\r\n            this.shadowRoot.querySelector('.message-box').classList.add('--error');\r\n        }\r\n    }\r\n    clearValidationError() {\r\n        this.shadowRoot.querySelector('.message-box').innerHTML = this.getAttribute('message') || '';\r\n        this.shadowRoot.querySelector('.message-box').classList.remove('--error');\r\n\r\n    }\r\n    _triggerOnChangeEvent() {\r\n        const event = new Event(\"change\");\r\n        this.dispatchEvent(event);\r\n    }\r\n    setSelectedOptionDom(value) {\r\n        //when user select option or value changed in any condition we set selected option DOM\r\n        this.elements.selectedValueWrapper.innerHTML = '';\r\n        //if value was null or undifined it remain empty\r\n        if(value !== null && value !== undefined){\r\n            const selectedOptionDom = this.createSelectedValueDom(value);\r\n            this.elements.selectedValueWrapper.appendChild(selectedOptionDom);\r\n        }\r\n    }\r\n    createSelectedValueDom(value){\r\n        if(typeof this.callbacks.getSelectedValueDOM == 'function'){\r\n            return this.callbacks.getSelectedValueDOM(value);\r\n        }else{\r\n            return this._createSelectedValueDom(value);\r\n        }\r\n    }\r\n    _createSelectedValueDom(value){\r\n        const valueText = this.callbacks.getOptionTitle(value);\r\n        const selectedOptionDom = document.createElement('div');\r\n        selectedOptionDom.classList.add('selected-value');\r\n        selectedOptionDom.innerHTML = valueText;\r\n        return selectedOptionDom;\r\n    }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-select');\r\nif(myElementNotExists){\r\n    //prevent duplicate registering\r\n    window.customElements.define('jb-select', JBSelectWebComponent);\r\n}\r\n"],"names":["CSS"],"mappings":"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"}

package/lib/JBSelect.html

@@ -1,8 +1,13 @@
 <div class="jb-select-web-component">
     <label class="--hide"><span class="label-value"></span><span>:</span></label>
     <div class="select-box">
-        <input class="input"/>
-        <div class="arrow-icon"></div>
+        <div class="selected-value-wrapper">
+            
+        </div>
+        <div class="front-box">
+            <input class="input"/>
+            <div class="arrow-icon"></div>
+        </div>
     </div>
     <div class="select-list-wrapper">
         <div class="select-list" tabindex="-1">

package/lib/JBSelect.js

@@ -16,7 +16,8 @@ class JBSelectWebComponent extends HTMLElement {
     }
     set textValue(value) {
         this._textValue = value;
-        this._inputElement.value = value;
+        this.elements.input.value = value;
+        this.updateOptionList(value);
     }
     get optionList() {
         return this._optionList || [];
@@ -58,33 +59,43 @@ class JBSelectWebComponent extends HTMLElement {
         this.dispatchEvent(event);
     }
     initWebComponent() {
-        this._shadowRoot = this.attachShadow({
+        const shadowRoot = this.attachShadow({
             mode: 'open'
         });
         const html = `<style>${CSS}</style>` + '\n' + HTML;
         const element = document.createElement('template');
         element.innerHTML = html;
-        this._shadowRoot.appendChild(element.content.cloneNode(true));
-        this._webComponentWrapper = this._shadowRoot.querySelector('.jb-select-web-component');
-        this._inputElement = this._shadowRoot.querySelector('.select-box input');
-        this._optionListElement = this._shadowRoot.querySelector('.select-list');
-        this._optionListElementWrapper = this._shadowRoot.querySelector('.select-list-wrapper');
+        shadowRoot.appendChild(element.content.cloneNode(true));
+        this.elements = {
+            input: shadowRoot.querySelector('.select-box input'),
+            componentWrapper: shadowRoot.querySelector('.jb-select-web-component'),
+            selectedValueWrapper: shadowRoot.querySelector('.selected-value-wrapper'),
+        };
+        this._optionListElement = shadowRoot.querySelector('.select-list');
+        this._optionListElementWrapper = shadowRoot.querySelector('.select-list-wrapper');
         this.registerEventListener();
        
     }
     registerEventListener() {
-        this._inputElement.addEventListener('change', this.onInputChange.bind(this));
-        this._inputElement.addEventListener('keypress', this.onInputKeyPress.bind(this));
-        this._inputElement.addEventListener('keyup', this.onInputKeyup.bind(this));
-        this._inputElement.addEventListener('focus', this.onInputFocus.bind(this));
-        this._inputElement.addEventListener('blur', this.onInputBlur.bind(this));
+        this.elements.input.addEventListener('change', this.onInputChange.bind(this));
+        this.elements.input.addEventListener('keypress', this.onInputKeyPress.bind(this));
+        this.elements.input.addEventListener('keyup', this.onInputKeyup.bind(this));
+        this.elements.input.addEventListener('beforeinput', this.onInputBeforeInput.bind(this));
+        this.elements.input.addEventListener('input', this.onInputInput.bind(this));
+        this.elements.input.addEventListener('focus', this.onInputFocus.bind(this));
+        this.elements.input.addEventListener('blur', this.onInputBlur.bind(this));
         this.shadowRoot.querySelector('.arrow-icon').addEventListener('click', this.onArrowKeyClick.bind(this));
     }
     initProp() {
         this.textValue = '';
+        /**
+         * @type {Record<string, function|null>} callbacks
+         */
         this.callbacks = {
             getOptionTitle: (option) => { return option; },
-            getOptionValue: (option) => { return option; }
+            getOptionValue: (option) => { return option; },
+            getOptionDOM:null,
+            getSelectedValueDOM:null,
         };
         this.value = this.getAttribute('value') || null;
         // if user set value and current option list is not contain the option. 
@@ -102,15 +113,15 @@ class JBSelectWebComponent extends HTMLElement {
     onAttributeChange(name, value) {
         switch (name) {
             case 'label':
-                this._shadowRoot.querySelector('label .label-value').innerHTML = value;
+                this.shadowRoot.querySelector('label .label-value').innerHTML = value;
                 if(value == null || value == undefined || value == ""){
-                    this._shadowRoot.querySelector('label').classList.add('--hide');
+                    this.shadowRoot.querySelector('label').classList.add('--hide');
                 }else{
-                    this._shadowRoot.querySelector('label').classList.remove('--hide');
+                    this.shadowRoot.querySelector('label').classList.remove('--hide');
                 }
                 break;
             case 'message':
-                this._shadowRoot.querySelector('.message-box').innerHTML = value;
+                this.shadowRoot.querySelector('.message-box').innerHTML = value;
                 break;
             case 'value':
                 this._setValueFromOutside(value);
@@ -123,7 +134,7 @@ class JBSelectWebComponent extends HTMLElement {
                 }
                 break;
             case 'placeholder':
-                this._inputElement.placeholder = value;
+                this.elements.input.placeholder = value;
                 break;
         }
 
@@ -156,10 +167,12 @@ class JBSelectWebComponent extends HTMLElement {
         this._value = value;
         if ((value == null || value == undefined)) {
             this.textValue = '';
-            this._shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');
+            this.setSelectedOptionDom(null);
+            this.shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');
         } else {
-            this.textValue = this.callbacks.getOptionTitle(value);
-            this._shadowRoot.querySelector('.jb-select-web-component').classList.add('--has-value');
+            this.textValue = '';
+            this.setSelectedOptionDom(value);
+            this.shadowRoot.querySelector('.jb-select-web-component').classList.add('--has-value');
         }
         //if user select an option we rest filter so user see all option again when open a select
         this.updateOptionList('');
@@ -173,20 +186,30 @@ class JBSelectWebComponent extends HTMLElement {
     }
     onInputKeyPress() {
         //TODO: raise keypress event
-        //hint: keypres dont called on backspace key
-        this.onUserTypeResetValue();
+    }
+    onInputBeforeInput(e){
+        this.handleSelectedValueDisplay(e.data);
+    }
+    onInputInput(e){
+        this.textValue = e.target.value;
     }
     onInputKeyup(e) {
         const inputText = e.target.value;
         //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom
-        if (e.key === "Backspace") {
+        if (e.key === "Backspace" || e.key === "Delete") {
             //becuase on keyprees dont recieve backspace key press
-            //we use keypress and dont do it all here becuase we dont want arrow key or any other function key to reset value 
-            this.onUserTypeResetValue();
+            this.handleSelectedValueDisplay(inputText);
         }
-        this._textValue = inputText;
+        
         this.triggerOnInputKeyup(e);
-        this.updateOptionList(inputText);
+        
+    }
+    handleSelectedValueDisplay(inputValue) {
+        if(inputValue !== ""){
+            this.elements.selectedValueWrapper.classList.add('--search-typed');
+        }else{
+            this.elements.selectedValueWrapper.classList.remove('--search-typed');
+        }
     }
     triggerOnInputKeyup(e){
         const event = new KeyboardEvent('keyup',{
@@ -209,12 +232,6 @@ class JBSelectWebComponent extends HTMLElement {
         });
         this.dispatchEvent(event);
     }
-    onUserTypeResetValue() {
-        //when use type but dont select we want to reset value becuase typed value is not a valid value
-        //TODO: check if typed value is the same as current selected value title dont null it
-        this._value = null;
-        this._shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');
-    }
     onInputChange(e) {
         const inputText = e.target.value;
         //here is the rare  time we update _text_value directly becuase we want trigger event that may read value directly from dom
@@ -232,13 +249,15 @@ class JBSelectWebComponent extends HTMLElement {
         }
     }
     focus(){
-        this._inputElement.focus();
+        this.elements.input.focus();
         this.showOptionList();
-        this._webComponentWrapper.classList.add('--focused');
+        this.elements.componentWrapper.classList.add('--focused');
         
     }
     blur(){
-        this._webComponentWrapper.classList.remove('--focused');
+        this.elements.componentWrapper.classList.remove('--focused');
+        this.textValue = "";
+        this.handleSelectedValueDisplay('');
         this.hideOptionList();
         this.triggerInputValidation();
     }
@@ -264,16 +283,26 @@ class JBSelectWebComponent extends HTMLElement {
 
     }
     createOptionDOM(item){
+        let optionDOM = null;
+        if(typeof this.callbacks.getOptionDOM == 'function'){
+            optionDOM = this.callbacks.getOptionDOM(item,this.onOptionClicked.bind(this));
+        }else{
+            optionDOM = this._createOptionDom(item);
+        }
+        optionDOM.value = item;
+        return optionDOM;
+    }
+
+    _createOptionDom(item){
         const optionElement = document.createElement('div');
         optionElement.classList.add('select-option');
         //it has defualt function who return wxact same input
         optionElement.innerHTML = this.callbacks.getOptionTitle(item);
-        optionElement.value = item;
         optionElement.addEventListener('click', this.onOptionClicked.bind(this));
         return optionElement;
     }
     onOptionClicked(e) {
-        const value = e.target.value;
+        const value = e.currentTarget.value;
         this.selectOption(value);
         this.blur();
         this._triggerOnChangeEvent();
@@ -285,9 +314,14 @@ class JBSelectWebComponent extends HTMLElement {
     filterOptionList(filterString) {
         const displayOptionList = [];
         this.optionList.filter((option) => {
-            if (typeof this.callbacks.getOptionTitle(option) == 'string' && this.callbacks.getOptionTitle(option).includes(filterString)) {
+            const optionTitle = this.callbacks.getOptionTitle(option);
+            const isString = typeof optionTitle == 'string';
+            if (isString && optionTitle.includes(filterString)) {
                 displayOptionList.push(option);
             }
+            if (!isString) {
+                console.warn("the provided values for optionsList is not of type string.", { option, title: optionTitle });
+            }
         });
         return displayOptionList;
     }
@@ -315,19 +349,42 @@ class JBSelectWebComponent extends HTMLElement {
     showValidationError(errorType) {
         if (errorType == 'REQUIRED') {
             const label = this.getAttribute('label');
-            this._shadowRoot.querySelector('.message-box').innerHTML = `${label} حتما باید انتخاب شود`;
-            this._shadowRoot.querySelector('.message-box').classList.add('--error');
+            this.shadowRoot.querySelector('.message-box').innerHTML = `${label} حتما باید انتخاب شود`;
+            this.shadowRoot.querySelector('.message-box').classList.add('--error');
         }
     }
     clearValidationError() {
-        this._shadowRoot.querySelector('.message-box').innerHTML = this.getAttribute('message') || '';
-        this._shadowRoot.querySelector('.message-box').classList.remove('--error');
+        this.shadowRoot.querySelector('.message-box').innerHTML = this.getAttribute('message') || '';
+        this.shadowRoot.querySelector('.message-box').classList.remove('--error');
 
     }
     _triggerOnChangeEvent() {
         const event = new Event("change");
         this.dispatchEvent(event);
     }
+    setSelectedOptionDom(value) {
+        //when user select option or value changed in any condition we set selected option DOM
+        this.elements.selectedValueWrapper.innerHTML = '';
+        //if value was null or undifined it remain empty
+        if(value !== null && value !== undefined){
+            const selectedOptionDom = this.createSelectedValueDom(value);
+            this.elements.selectedValueWrapper.appendChild(selectedOptionDom);
+        }
+    }
+    createSelectedValueDom(value){
+        if(typeof this.callbacks.getSelectedValueDOM == 'function'){
+            return this.callbacks.getSelectedValueDOM(value);
+        }else{
+            return this._createSelectedValueDom(value);
+        }
+    }
+    _createSelectedValueDom(value){
+        const valueText = this.callbacks.getOptionTitle(value);
+        const selectedOptionDom = document.createElement('div');
+        selectedOptionDom.classList.add('selected-value');
+        selectedOptionDom.innerHTML = valueText;
+        return selectedOptionDom;
+    }
 }
 const myElementNotExists = !customElements.get('jb-select');
 if(myElementNotExists){

package/lib/JBSelect.scss

@@ -35,7 +35,8 @@
     &.--has-value{
         //if user select a option and value is setted and not null
         .select-box{
-            border-color: var(--jb-select-border-color-selected , #c3ff14) ;
+            border-color: var(--jb-select-border-color-selected , #c3ff14);
+            background-color: var(--jb-select-bgcolor-selected , #f7f6f6);
         }
     }
     label {
@@ -63,6 +64,7 @@
         justify-content: space-between;
         padding-inline-end: 16px;
         gap: 8px;
+        position: relative;
         &:focus-within {
             border-color: var(--jb-select-border-color , #1e2832);
             border-bottom-color: var(--jb-select-border-color , #f7f6f6);;
@@ -72,33 +74,75 @@
                 border-bottom-color: var(--jb-select-border-color , #1e2832);
             }
         }
-        input {
-            border: none;
+        .selected-value-wrapper{
+            position: absolute;
             width: 100%;
-            box-sizing: border-box;
             height: 100%;
-            background-color: transparent;
-            padding: 2px 12px 0 12px;
-            display: block;
-            font-family: inherit;
-            font-size: 1.1em;
-            color: var(--jb-select-input-color, #1f1735);
-            margin: 0;
-            border-radius: 0;
+            border-radius: inherit;
+            overflow: hidden;
+            z-index: 1;
+            &.--search-typed{
+                opacity: 0;
+            }
+            .selected-value{
+                width: 100%;
+                box-sizing: border-box;
+                height: 100%;
+                background-color: transparent;
+                padding: 2px 12px 0 12px;
+                display: block;
+                font-family: inherit;
+                font-size: 1.1em;
+                color:#1f1735;
+                margin: 0;
+                border-radius: 0;
+                display: flex;
+                align-items: center;
 
-            &:focus {
-                outline: none;
             }
+
         }
-        .arrow-icon{
-            width: 8px;
+        &:focus-within .selected-value{
+            opacity: 0.7;
+            transition: all 0.3s ease;
+        }
+        .front-box{
+            position: absolute;
+            width: 100%;
             height: 100%;
-            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 494.1 371.1' style='enable-background:new 0 0 494.1 371.1;' xml:space='preserve'><path d='M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2  c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z'/></svg>");
-            background-position: end;
-            background-repeat: no-repeat;
-            background-position-x: 0;
-            background-position-y: center;
+            border-radius: inherit;
+            overflow: hidden;
+            z-index: 2;
+            
+            input {
+                border: none;
+                width: 100%;
+                box-sizing: border-box;
+                height: 100%;
+                background-color: transparent;
+                padding: 2px 12px 0 12px;
+                display: block;
+                font-family: inherit;
+                font-size: 1.1em;
+                color: var(--jb-select-input-color, #1f1735);
+                margin: 0;
+                border-radius: 0;
+    
+                &:focus {
+                    outline: none;
+                }
+            }
+            .arrow-icon{
+                width: 8px;
+                height: 100%;
+                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 494.1 371.1' style='enable-background:new 0 0 494.1 371.1;' xml:space='preserve'><path d='M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2  c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z'/></svg>");
+                background-position: end;
+                background-repeat: no-repeat;
+                background-position-x: 0;
+                background-position-y: center;
+            }
         }
+        
     }
     .message-box{
         font-size: 0.7em;

package/package.json

@@ -12,7 +12,7 @@
     "select",
     "web component"
   ],
-  "version": "1.0.10",
+  "version": "2.0.1",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "license": "MIT",
   "files": [