jb-select 1.1.0 → 2.0.0

package/README.md

@@ -40,6 +40,26 @@ 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'
+        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

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    background-color: var(--jb-select-bgcolor-selected, #f7f6f6); }\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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkpCU2VsZWN0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxtQ0FBbUM7RUFDbkMsdUNBQXVDO0VBQ3ZDLGtCQUFrQjtFQUNsQixzQkFBc0IsRUFBRTtFQUN4QjtJQUNFO01BQ0Usa0JBQWtCO01BQ2xCLE1BQU07TUFDTixPQUFPO01BQ1AsdUJBQXVCO01BQ3ZCLFlBQVk7TUFDWixhQUFhO01BQ2IsU0FBUztNQUNULGlCQUFpQjtNQUNqQixZQUFZLEVBQUUsRUFBRTtFQUNwQjtJQUNFO01BQ0UsaUJBQWlCO01BQ2pCLGNBQWM7TUFDZCxtREFBbUQsRUFBRSxFQUFFO0VBQzNEO0lBQ0U7TUFDRSxXQUFXO01BQ1gsZ0JBQWdCLEVBQUUsRUFBRTtFQUN4QjtJQUNFLDZEQUE2RDtJQUM3RCw0REFBNEQsRUFBRTtFQUNoRTtJQUNFLFdBQVc7SUFDWCxlQUFlO0lBQ2YsY0FBYztJQUNkLGdCQUFnQjtJQUNoQiw0Q0FBNEMsRUFBRTtJQUM5QztNQUNFLGFBQWEsRUFBRTtFQUNuQjtJQUNFLFdBQVc7SUFDWCxzQkFBc0I7SUFDdEIsWUFBWTtJQUNaLHVGQUF1RjtJQUN2RixtREFBbUQ7SUFDbkQscUdBQXFHO0lBQ3JHLG1EQUFtRDtJQUNuRCxlQUFlO0lBQ2YsZ0JBQWdCO0lBQ2hCLGFBQWE7SUFDYiw4QkFBOEI7SUFDOUIsd0JBQXdCO0lBQ3hCLFFBQVEsRUFBRTtJQUNWO01BQ0Usb0RBQW9EO01BQ3BELDJEQUEyRDtNQUMzRCw0RkFBNEYsRUFBRTtNQUM5RjtRQUNFO1VBQ0UsbURBQW1EO1VBQ25ELDJEQUEyRCxFQUFFLEVBQUU7SUFDckU7TUFDRSxZQUFZO01BQ1osV0FBVztNQUNYLHNCQUFzQjtNQUN0QixZQUFZO01BQ1osNkJBQTZCO01BQzdCLHdCQUF3QjtNQUN4QixjQUFjO01BQ2Qsb0JBQW9CO01BQ3BCLGdCQUFnQjtNQUNoQiw0Q0FBNEM7TUFDNUMsU0FBUztNQUNULGdCQUFnQixFQUFFO01BQ2xCO1FBQ0UsYUFBYSxFQUFFO0lBQ25CO01BQ0UsVUFBVTtNQUNWLFlBQVk7TUFDWixnZ0JBQWdnQjtNQUNoZ0Isd0JBQXdCO01BQ3hCLDRCQUE0QjtNQUM1Qix3QkFBd0I7TUFDeEIsNkJBQTZCLEVBQUU7RUFDbkM7SUFDRSxnQkFBZ0I7SUFDaEIsZ0JBQWdCO0lBQ2hCLGNBQWMsRUFBRTtJQUNoQjtNQUNFLFVBQVUsRUFBRTtJQUNkO01BQ0UsVUFBVSxFQUFFO0VBQ2hCO0lBQ0UsYUFBYTtJQUNiLGtCQUFrQjtJQUNsQixjQUFjO0lBQ2QsWUFBWTtJQUNaLGdCQUFnQjtJQUNoQixXQUFXO0lBQ1gsbURBQW1EO0lBQ25ELDRGQUE0RjtJQUM1Rix3REFBd0Q7SUFDeEQsZ0JBQWdCO0lBQ2hCLCtEQUErRDtJQUMvRCw0Q0FBNEM7SUFDNUMsc0JBQXNCO0lBQ3RCLFlBQVksRUFBRTtJQUNkO01BQ0UsY0FBYyxFQUFFO0lBQ2xCO01BQ0UsV0FBVztNQUNYLG1EQUFtRDtNQUNuRCxnQkFBZ0I7TUFDaEIsZUFBZSxFQUFFO01BQ2pCO1FBQ0U7VUFDRSwrQkFBK0IsRUFBRSxFQUFFO01BQ3ZDO1FBQ0UsZ0JBQWdCO1FBQ2hCLGlCQUFpQjtRQUNqQixhQUFhO1FBQ2IsbUJBQW1CO1FBQ25CLGdCQUFnQjtRQUNoQiw2Q0FBNkM7UUFDN0MsZ0VBQWdFLEVBQUU7UUFDbEU7VUFDRSx5RUFBeUU7VUFDekUsZ0RBQWdEO1VBQ2hELGVBQWUsRUFBRSIsImZpbGUiOiJKQlNlbGVjdC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IHtcbiAgd2lkdGg6IHZhcigtLWpiLXNlbGVjdC13aWR0aCwgMTAwJSk7XG4gIG1hcmdpbjogdmFyKC0tamItc2VsZWN0LW1hcmdpbiwgMTJweCAwKTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94OyB9XG4gIEBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50Li0tZm9jdXNlZCB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDA7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzAwMDg7XG4gICAgICB3aWR0aDogMTAwdnc7XG4gICAgICBoZWlnaHQ6IDEwMHZoO1xuICAgICAgbWFyZ2luOiAwO1xuICAgICAgcGFkZGluZzogMTZweCA4cHg7XG4gICAgICB6LWluZGV4OiA5MDA7IH0gfVxuICBAbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA3NjdweCkge1xuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudC4tLWZvY3VzZWQgLnNlbGVjdC1saXN0LXdyYXBwZXIge1xuICAgICAgcG9zaXRpb246IGluaXRpYWw7XG4gICAgICBtYXJnaW46IDE2cHggMDtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItcmFkaXVzLCAxNnB4KTsgfSB9XG4gIEBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50Li0tZm9jdXNlZCBsYWJlbCB7XG4gICAgICBjb2xvcjogI2ZmZjtcbiAgICAgIGZvbnQtc2l6ZTogMS41ZW07IH0gfVxuICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQuLS1oYXMtdmFsdWUgLnNlbGVjdC1ib3gge1xuICAgIGJvcmRlci1jb2xvcjogdmFyKC0tamItc2VsZWN0LWJvcmRlci1jb2xvci1zZWxlY3RlZCwgI2MzZmYxNCk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tamItc2VsZWN0LWJnY29sb3Itc2VsZWN0ZWQsICNmN2Y2ZjYpOyB9XG4gIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCBsYWJlbCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgbWFyZ2luOiA0cHggMHB4O1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIGZvbnQtc2l6ZTogMC44ZW07XG4gICAgY29sb3I6IHZhcigtLWpiLXNlbGVjdC1sYWJlbC1jb2xvciwgIzFmMTczNSk7IH1cbiAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgbGFiZWwuLS1oaWRlIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7IH1cbiAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94IHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGhlaWdodDogNDBweDtcbiAgICBib3JkZXI6IHNvbGlkIHZhcigtLWpiLXNlbGVjdC1ib3JkZXItd2lkdGgsIDFweCkgdmFyKC0tamItc2VsZWN0LWJvcmRlci1jb2xvciwgI2Y3ZjZmNik7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tamItc2VsZWN0LWJnY29sb3IsICNmN2Y2ZjYpO1xuICAgIGJvcmRlci1ib3R0b206IHNvbGlkIHZhcigtLWpiLXNlbGVjdC1ib3JkZXItYm90dG9tLXdpZHRoLCAzcHgpIHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICNmN2Y2ZjYpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItcmFkaXVzLCAxNnB4KTtcbiAgICBtYXJnaW46IDRweCAwcHg7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICBwYWRkaW5nLWlubGluZS1lbmQ6IDE2cHg7XG4gICAgZ2FwOiA4cHg7IH1cbiAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3g6Zm9jdXMtd2l0aGluIHtcbiAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tamItc2VsZWN0LWJvcmRlci1jb2xvciwgIzFlMjgzMik7XG4gICAgICBib3JkZXItYm90dG9tLWNvbG9yOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLWNvbG9yLCAjZjdmNmY2KTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItcmFkaXVzLCAxNnB4KSB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCkgMCAwOyB9XG4gICAgICBAbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA3NjdweCkge1xuICAgICAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3g6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCk7XG4gICAgICAgICAgYm9yZGVyLWJvdHRvbS1jb2xvcjogdmFyKC0tamItc2VsZWN0LWJvcmRlci1jb2xvciwgIzFlMjgzMik7IH0gfVxuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWJveCBpbnB1dCB7XG4gICAgICBib3JkZXI6IG5vbmU7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIHBhZGRpbmc6IDJweCAxMnB4IDAgMTJweDtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgZm9udC1mYW1pbHk6IGluaGVyaXQ7XG4gICAgICBmb250LXNpemU6IDEuMWVtO1xuICAgICAgY29sb3I6IHZhcigtLWpiLXNlbGVjdC1pbnB1dC1jb2xvciwgIzFmMTczNSk7XG4gICAgICBtYXJnaW46IDA7XG4gICAgICBib3JkZXItcmFkaXVzOiAwOyB9XG4gICAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3ggaW5wdXQ6Zm9jdXMge1xuICAgICAgICBvdXRsaW5lOiBub25lOyB9XG4gICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94IC5hcnJvdy1pY29uIHtcbiAgICAgIHdpZHRoOiA4cHg7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoXCJkYXRhOmltYWdlL3N2Zyt4bWw7dXRmOCw8c3ZnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zycgd2lkdGg9JzgnIGhlaWdodD0nOCcgeG1sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHZlcnNpb249JzEuMScgaWQ9J0xheWVyXzEnIHg9JzBweCcgeT0nMHB4JyB2aWV3Qm94PScwIDAgNDk0LjEgMzcxLjEnIHN0eWxlPSdlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5NC4xIDM3MS4xOycgeG1sOnNwYWNlPSdwcmVzZXJ2ZSc+PHBhdGggZD0nTTI5MywzNDMuOEw0ODAuOSw2OS4zYzguNy0xMi43LDEzLjMtMjUuNCwxMy4zLTM2LjFjMC0yMC41LTE2LjUtMzMuMi00NC0zMy4ySDQ0QzE2LjQsMCwwLDEyLjcsMCwzMy4yICBjMCwxMC42LDQuNiwyMy4yLDEzLjMsMzUuOWwxODcuOSwyNzQuNmMxMi4xLDE3LjcsMjguNCwyNy40LDQ1LjksMjcuNEMyNjQuNiwzNzEuMSwyODAuOSwzNjEuNCwyOTMsMzQzLjh6Jy8+PC9zdmc+XCIpO1xuICAgICAgYmFja2dyb3VuZC1wb3NpdGlvbjogZW5kO1xuICAgICAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDtcbiAgICAgIGJhY2tncm91bmQtcG9zaXRpb24teDogMDtcbiAgICAgIGJhY2tncm91bmQtcG9zaXRpb24teTogY2VudGVyOyB9XG4gIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3gge1xuICAgIGZvbnQtc2l6ZTogMC43ZW07XG4gICAgcGFkZGluZzogMnB4IDhweDtcbiAgICBjb2xvcjogIzkyOTI5MjsgfVxuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3g6ZW1wdHkge1xuICAgICAgcGFkZGluZzogMDsgfVxuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3guLS1lcnJvciB7XG4gICAgICBjb2xvcjogcmVkOyB9XG4gIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWxpc3Qtd3JhcHBlciB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgbWFyZ2luOiAtNnB4IDA7XG4gICAgaGVpZ2h0OiBhdXRvO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tamItc2VsZWN0LWJnY29sb3IsICNmN2Y2ZjYpO1xuICAgIGJvcmRlci1yYWRpdXM6IDAgMCB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCkgdmFyKC0tamItc2VsZWN0LWJvcmRlci1yYWRpdXMsIDE2cHgpO1xuICAgIGJvcmRlcjogc29saWQgMXB4IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICMxZTI4MzIpO1xuICAgIGJvcmRlci10b3A6IG5vbmU7XG4gICAgYm9yZGVyLWJvdHRvbTogc29saWQgM3B4IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICMxZTI4MzIpO1xuICAgIGJveC1zaGFkb3c6IHZhcigtLWpiLXNlbGVjdC1saXN0LWJveC1zaGFkb3cpO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgei1pbmRleDogOTk5OyB9XG4gICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtbGlzdC13cmFwcGVyLi0tc2hvdyB7XG4gICAgICBkaXNwbGF5OiBibG9jazsgfVxuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWxpc3Qtd3JhcHBlciAuc2VsZWN0LWxpc3Qge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtaGVpZ2h0OiB2YXIoLS1qYi1zZWxlY3QtbGlzdC1tYXgtaGVpZ2h0LCA0MDBweCk7XG4gICAgICBvdmVyZmxvdy15OiBhdXRvO1xuICAgICAgcGFkZGluZzogMTZweCAwOyB9XG4gICAgICBAbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA3NjdweCkge1xuICAgICAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1saXN0LXdyYXBwZXIgLnNlbGVjdC1saXN0IHtcbiAgICAgICAgICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMjQwcHgpOyB9IH1cbiAgICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWxpc3Qtd3JhcHBlciAuc2VsZWN0LWxpc3QgLnNlbGVjdC1vcHRpb24ge1xuICAgICAgICBtaW4taGVpZ2h0OiAzNnB4O1xuICAgICAgICBwYWRkaW5nOiA0cHggMTZweDtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgICAgZm9udC1zaXplOiAwLjllbTtcbiAgICAgICAgY29sb3I6IHZhcigtLWpiLXNlbGVjdC1vcHRpb24tY29sb3IsIGluaGVyaXQpO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1qYi1zZWxlY3Qtb3B0aW9uLWJhY2tncm91bmQtY29sb3IsICNmZmYpOyB9XG4gICAgICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWxpc3Qtd3JhcHBlciAuc2VsZWN0LWxpc3QgLnNlbGVjdC1vcHRpb246aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWpiLXNlbGVjdC1vcHRpb24tYmFja2dyb3VuZC1jb2xvci1ob3ZlciwgIzEwNzNkYik7XG4gICAgICAgICAgY29sb3I6IHZhcigtLWpiLXNlbGVjdC1vcHRpb24tY29sb3ItaG92ZXIsICNmZmYpO1xuICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjsgfVxuIl19 */";
+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    background-color: var(--jb-select-bgcolor-selected, #f7f6f6); }\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    position: relative; }\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 .selected-value-wrapper {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n      overflow: hidden;\n      z-index: 1; }\n      .jb-select-web-component .select-box .selected-value-wrapper.--search-typed {\n        opacity: 0; }\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    .jb-select-web-component .select-box:focus-within .selected-value {\n      opacity: 0.7;\n      transition: all 0.3s ease; }\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      .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        .jb-select-web-component .select-box .front-box input:focus {\n          outline: none; }\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  .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,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QUNiLG1CQUFtQjtRQUNuQixnQkFBZ0I7UUFDaEIsNkNBQTZDO1FBQzdDLGdFQUFnRSxFQUFFO1FBQ2xFO1VBQ0UseUVBQXlFO1VBQ3pFLGdEQUFnRDtVQUNoRCxlQUFlLEVBQUUiLCJmaWxlIjoiSkJTZWxlY3Quc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCB7XG4gIHdpZHRoOiB2YXIoLS1qYi1zZWxlY3Qtd2lkdGgsIDEwMCUpO1xuICBtYXJnaW46IHZhcigtLWpiLXNlbGVjdC1tYXJnaW4sIDEycHggMCk7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDsgfVxuICBAbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA3NjdweCkge1xuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudC4tLWZvY3VzZWQge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICMwMDA4O1xuICAgICAgd2lkdGg6IDEwMHZ3O1xuICAgICAgaGVpZ2h0OiAxMDB2aDtcbiAgICAgIG1hcmdpbjogMDtcbiAgICAgIHBhZGRpbmc6IDE2cHggOHB4O1xuICAgICAgei1pbmRleDogOTAwOyB9IH1cbiAgQG1lZGlhIChtaW4td2lkdGg6IDMyMHB4KSBhbmQgKG1heC13aWR0aDogNzY3cHgpIHtcbiAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQuLS1mb2N1c2VkIC5zZWxlY3QtbGlzdC13cmFwcGVyIHtcbiAgICAgIHBvc2l0aW9uOiBpbml0aWFsO1xuICAgICAgbWFyZ2luOiAxNnB4IDA7XG4gICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCk7IH0gfVxuICBAbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA3NjdweCkge1xuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudC4tLWZvY3VzZWQgbGFiZWwge1xuICAgICAgY29sb3I6ICNmZmY7XG4gICAgICBmb250LXNpemU6IDEuNWVtOyB9IH1cbiAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50Li0taGFzLXZhbHVlIC5zZWxlY3QtYm94IHtcbiAgICBib3JkZXItY29sb3I6IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3Itc2VsZWN0ZWQsICNjM2ZmMTQpO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWpiLXNlbGVjdC1iZ2NvbG9yLXNlbGVjdGVkLCAjZjdmNmY2KTsgfVxuICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgbGFiZWwge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1hcmdpbjogNHB4IDBweDtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBmb250LXNpemU6IDAuOGVtO1xuICAgIGNvbG9yOiB2YXIoLS1qYi1zZWxlY3QtbGFiZWwtY29sb3IsICMxZjE3MzUpOyB9XG4gICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IGxhYmVsLi0taGlkZSB7XG4gICAgICBkaXNwbGF5OiBub25lOyB9XG4gIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWJveCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBoZWlnaHQ6IDQwcHg7XG4gICAgYm9yZGVyOiBzb2xpZCB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXdpZHRoLCAxcHgpIHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICNmN2Y2ZjYpO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWpiLXNlbGVjdC1iZ2NvbG9yLCAjZjdmNmY2KTtcbiAgICBib3JkZXItYm90dG9tOiBzb2xpZCB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLWJvdHRvbS13aWR0aCwgM3B4KSB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLWNvbG9yLCAjZjdmNmY2KTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCk7XG4gICAgbWFyZ2luOiA0cHggMHB4O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgcGFkZGluZy1pbmxpbmUtZW5kOiAxNnB4O1xuICAgIGdhcDogOHB4O1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsgfVxuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWJveDpmb2N1cy13aXRoaW4ge1xuICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLWNvbG9yLCAjMWUyODMyKTtcbiAgICAgIGJvcmRlci1ib3R0b20tY29sb3I6IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICNmN2Y2ZjYpO1xuICAgICAgYm9yZGVyLXJhZGl1czogdmFyKC0tamItc2VsZWN0LWJvcmRlci1yYWRpdXMsIDE2cHgpIHZhcigtLWpiLXNlbGVjdC1ib3JkZXItcmFkaXVzLCAxNnB4KSAwIDA7IH1cbiAgICAgIEBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gICAgICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWJveDpmb2N1cy13aXRoaW4ge1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItcmFkaXVzLCAxNnB4KTtcbiAgICAgICAgICBib3JkZXItYm90dG9tLWNvbG9yOiB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLWNvbG9yLCAjMWUyODMyKTsgfSB9XG4gICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94IC5zZWxlY3RlZC12YWx1ZS13cmFwcGVyIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgYm9yZGVyLXJhZGl1czogaW5oZXJpdDtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICB6LWluZGV4OiAxOyB9XG4gICAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3ggLnNlbGVjdGVkLXZhbHVlLXdyYXBwZXIuLS1zZWFyY2gtdHlwZWQge1xuICAgICAgICBvcGFjaXR5OiAwOyB9XG4gICAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3ggLnNlbGVjdGVkLXZhbHVlLXdyYXBwZXIgLnNlbGVjdGVkLXZhbHVlIHtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgIHBhZGRpbmc6IDJweCAxMnB4IDAgMTJweDtcbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgICAgICBmb250LXNpemU6IDEuMWVtO1xuICAgICAgICBjb2xvcjogIzFmMTczNTtcbiAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgICBib3JkZXItcmFkaXVzOiAwO1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyOyB9XG4gICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtYm94OmZvY3VzLXdpdGhpbiAuc2VsZWN0ZWQtdmFsdWUge1xuICAgICAgb3BhY2l0eTogMC43O1xuICAgICAgdHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZTsgfVxuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWJveCAuZnJvbnQtYm94IHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgYm9yZGVyLXJhZGl1czogaW5oZXJpdDtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICB6LWluZGV4OiAyOyB9XG4gICAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3ggLmZyb250LWJveCBpbnB1dCB7XG4gICAgICAgIGJvcmRlcjogbm9uZTtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgIHBhZGRpbmc6IDJweCAxMnB4IDAgMTJweDtcbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgICAgICBmb250LXNpemU6IDEuMWVtO1xuICAgICAgICBjb2xvcjogdmFyKC0tamItc2VsZWN0LWlucHV0LWNvbG9yLCAjMWYxNzM1KTtcbiAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgICBib3JkZXItcmFkaXVzOiAwOyB9XG4gICAgICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWJveCAuZnJvbnQtYm94IGlucHV0OmZvY3VzIHtcbiAgICAgICAgICBvdXRsaW5lOiBub25lOyB9XG4gICAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1ib3ggLmZyb250LWJveCAuYXJyb3ctaWNvbiB7XG4gICAgICAgIHdpZHRoOiA4cHg7XG4gICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKFwiZGF0YTppbWFnZS9zdmcreG1sO3V0ZjgsPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB2ZXJzaW9uPScxLjEnIGlkPSdMYXllcl8xJyB4PScwcHgnIHk9JzBweCcgdmlld0JveD0nMCAwIDQ5NC4xIDM3MS4xJyBzdHlsZT0nZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTQuMSAzNzEuMTsnIHhtbDpzcGFjZT0ncHJlc2VydmUnPjxwYXRoIGQ9J00yOTMsMzQzLjhMNDgwLjksNjkuM2M4LjctMTIuNywxMy4zLTI1LjQsMTMuMy0zNi4xYzAtMjAuNS0xNi41LTMzLjItNDQtMzMuMkg0NEMxNi40LDAsMCwxMi43LDAsMzMuMiAgYzAsMTAuNiw0LjYsMjMuMiwxMy4zLDM1LjlsMTg3LjksMjc0LjZjMTIuMSwxNy43LDI4LjQsMjcuNCw0NS45LDI3LjRDMjY0LjYsMzcxLjEsMjgwLjksMzYxLjQsMjkzLDM0My44eicvPjwvc3ZnPlwiKTtcbiAgICAgICAgYmFja2dyb3VuZC1wb3NpdGlvbjogZW5kO1xuICAgICAgICBiYWNrZ3JvdW5kLXJlcGVhdDogbm8tcmVwZWF0O1xuICAgICAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uLXg6IDA7XG4gICAgICAgIGJhY2tncm91bmQtcG9zaXRpb24teTogY2VudGVyOyB9XG4gIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3gge1xuICAgIGZvbnQtc2l6ZTogMC43ZW07XG4gICAgcGFkZGluZzogMnB4IDhweDtcbiAgICBjb2xvcjogIzkyOTI5MjsgfVxuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3g6ZW1wdHkge1xuICAgICAgcGFkZGluZzogMDsgfVxuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAubWVzc2FnZS1ib3guLS1lcnJvciB7XG4gICAgICBjb2xvcjogcmVkOyB9XG4gIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWxpc3Qtd3JhcHBlciB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgbWFyZ2luOiAtNnB4IDA7XG4gICAgaGVpZ2h0OiBhdXRvO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tamItc2VsZWN0LWJnY29sb3IsICNmN2Y2ZjYpO1xuICAgIGJvcmRlci1yYWRpdXM6IDAgMCB2YXIoLS1qYi1zZWxlY3QtYm9yZGVyLXJhZGl1cywgMTZweCkgdmFyKC0tamItc2VsZWN0LWJvcmRlci1yYWRpdXMsIDE2cHgpO1xuICAgIGJvcmRlcjogc29saWQgMXB4IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICMxZTI4MzIpO1xuICAgIGJvcmRlci10b3A6IG5vbmU7XG4gICAgYm9yZGVyLWJvdHRvbTogc29saWQgM3B4IHZhcigtLWpiLXNlbGVjdC1ib3JkZXItY29sb3IsICMxZTI4MzIpO1xuICAgIGJveC1zaGFkb3c6IHZhcigtLWpiLXNlbGVjdC1saXN0LWJveC1zaGFkb3cpO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgei1pbmRleDogOTk5OyB9XG4gICAgLmpiLXNlbGVjdC13ZWItY29tcG9uZW50IC5zZWxlY3QtbGlzdC13cmFwcGVyLi0tc2hvdyB7XG4gICAgICBkaXNwbGF5OiBibG9jazsgfVxuICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWxpc3Qtd3JhcHBlciAuc2VsZWN0LWxpc3Qge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtaGVpZ2h0OiB2YXIoLS1qYi1zZWxlY3QtbGlzdC1tYXgtaGVpZ2h0LCA0MDBweCk7XG4gICAgICBvdmVyZmxvdy15OiBhdXRvO1xuICAgICAgcGFkZGluZzogMTZweCAwOyB9XG4gICAgICBAbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA3NjdweCkge1xuICAgICAgICAuamItc2VsZWN0LXdlYi1jb21wb25lbnQgLnNlbGVjdC1saXN0LXdyYXBwZXIgLnNlbGVjdC1saXN0IHtcbiAgICAgICAgICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMjQwcHgpOyB9IH1cbiAgICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWxpc3Qtd3JhcHBlciAuc2VsZWN0LWxpc3QgLnNlbGVjdC1vcHRpb24ge1xuICAgICAgICBtaW4taGVpZ2h0OiAzNnB4O1xuICAgICAgICBwYWRkaW5nOiA0cHggMTZweDtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgICAgZm9udC1zaXplOiAwLjllbTtcbiAgICAgICAgY29sb3I6IHZhcigtLWpiLXNlbGVjdC1vcHRpb24tY29sb3IsIGluaGVyaXQpO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1qYi1zZWxlY3Qtb3B0aW9uLWJhY2tncm91bmQtY29sb3IsICNmZmYpOyB9XG4gICAgICAgIC5qYi1zZWxlY3Qtd2ViLWNvbXBvbmVudCAuc2VsZWN0LWxpc3Qtd3JhcHBlciAuc2VsZWN0LWxpc3QgLnNlbGVjdC1vcHRpb246aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWpiLXNlbGVjdC1vcHRpb24tYmFja2dyb3VuZC1jb2xvci1ob3ZlciwgIzEwNzNkYik7XG4gICAgICAgICAgY29sb3I6IHZhcigtLWpiLXNlbGVjdC1vcHRpb24tY29sb3ItaG92ZXIsICNmZmYpO1xuICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjsgfVxuIl19 */";
 
 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,26 +61,31 @@ 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() {
@@ -90,7 +96,8 @@ class JBSelectWebComponent extends HTMLElement {
         this.callbacks = {
             getOptionTitle: (option) => { return option; },
             getOptionValue: (option) => { return option; },
-            getOptionDOM:null
+            getOptionDOM:null,
+            getSelectedValueDOM:null,
         };
         this.value = this.getAttribute('value') || null;
         // if user set value and current option list is not contain the option. 
@@ -108,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);
@@ -129,7 +136,7 @@ class JBSelectWebComponent extends HTMLElement {
                 }
                 break;
             case 'placeholder':
-                this._inputElement.placeholder = value;
+                this.elements.input.placeholder = value;
                 break;
         }
 
@@ -162,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('');
@@ -179,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',{
@@ -215,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
@@ -236,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();
     }
@@ -268,11 +283,14 @@ class JBSelectWebComponent extends HTMLElement {
 
     }
     createOptionDOM(item){
+        let optionDOM = null;
         if(typeof this.callbacks.getOptionDOM == 'function'){
-            return this.callbacks.getOptionDOM(item,this.onOptionClicked.bind(this));
+            optionDOM = this.callbacks.getOptionDOM(item,this.onOptionClicked.bind(this));
         }else {
-            return this._createOptionDom(item);
+            optionDOM = this._createOptionDom(item);
         }
+        optionDOM.value = item;
+        return optionDOM;
     }
 
     _createOptionDom(item){
@@ -280,7 +298,6 @@ class JBSelectWebComponent extends HTMLElement {
         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;
     }
@@ -332,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        /**\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        };\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        if(typeof this.callbacks.getOptionDOM == 'function'){\r\n            return this.callbacks.getOptionDOM(item,this.onOptionClicked.bind(this));\r\n        }else{\r\n            return this._createOptionDom(item);\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            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}\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.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            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":";;;;AAEA,MAAM,oBAAoB,SAAS,WAAW,CAAC;AAC/C,IAAI,IAAI,KAAK,GAAG;AAChB,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;AACvB,YAAY,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC9D,SAAS,KAAI;AACb,YAAY,OAAO,IAAI,CAAC;AACxB,SAAS;AACT,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AACrB,QAAQ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;AACzC,KAAK;AACL,IAAI,IAAI,SAAS,GAAG;AACpB,QAAQ,OAAO,IAAI,CAAC,UAAU,CAAC;AAC/B,KAAK;AACL,IAAI,IAAI,SAAS,CAAC,KAAK,EAAE;AACzB,QAAQ,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;AAChC,QAAQ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;AAC1C,QAAQ,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;AACrC,KAAK;AACL,IAAI,IAAI,UAAU,GAAG;AACrB,QAAQ,OAAO,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;AACtC,KAAK;AACL,IAAI,IAAI,UAAU,CAAC,KAAK,EAAE;AAC1B,QAAQ,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AACjC,YAAY,OAAO,CAAC,KAAK,CAAC,qFAAqF,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AACzH,YAAY,OAAO;AACnB,SAAS;AACT,QAAQ,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;AACjC;AACA,QAAQ,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AACxE,QAAQ,IAAI,CAAC,4BAA4B,EAAE,CAAC;AAC5C,QAAQ,IAAI,CAAC,mBAAmB,EAAE,CAAC;AACnC,KAAK;AACL,IAAI,IAAI,iBAAiB,GAAG;AAC5B,QAAQ,OAAO,IAAI,CAAC,kBAAkB,CAAC;AACvC,KAAK;AACL,IAAI,IAAI,cAAc,CAAC,EAAE,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;AAC5E;AACA;AACA,IAAI,WAAW,GAAG;AAClB,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,IAAI,CAAC,gBAAgB,EAAE,CAAC;AAChC,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;AACxB;AACA,KAAK;AACL,IAAI,iBAAiB,GAAG;AACxB;AACA,QAAQ,IAAI,CAAC,eAAe,EAAE,CAAC;AAC/B,QAAQ,IAAI,CAAC,eAAe,EAAE,CAAC;AAC/B,KAAK;AACL,IAAI,eAAe,GAAG;AACtB,QAAQ,IAAI,KAAK,GAAG,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;AAC/E,QAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAClC,KAAK;AACL,IAAI,eAAe,GAAG;AACtB,QAAQ,IAAI,KAAK,GAAG,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;AAC/E,QAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAClC,KAAK;AACL,IAAI,gBAAgB,GAAG;AACvB,QAAQ,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC;AAC7C,YAAY,IAAI,EAAE,MAAM;AACxB,SAAS,CAAC,CAAC;AACX,QAAQ,MAAM,IAAI,GAAG,CAAC,OAAO,EAAEA,QAAG,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3D,QAAQ,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AAC3D,QAAQ,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;AACjC,QAAQ,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE,QAAQ,IAAI,CAAC,QAAQ,GAAG;AACxB,YAAY,KAAK,EAAE,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC;AAChE,YAAY,gBAAgB,EAAE,UAAU,CAAC,aAAa,CAAC,0BAA0B,CAAC;AAClF,YAAY,oBAAoB,EAAE,UAAU,CAAC,aAAa,CAAC,yBAAyB,CAAC;AACrF,SAAS,CAAC;AACV,QAAQ,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;AAC3E,QAAQ,IAAI,CAAC,yBAAyB,GAAG,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;AAC1F,QAAQ,IAAI,CAAC,qBAAqB,EAAE,CAAC;AACrC;AACA,KAAK;AACL,IAAI,qBAAqB,GAAG;AAC5B,QAAQ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACtF,QAAQ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1F,QAAQ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACpF,QAAQ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChG,QAAQ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACpF,QAAQ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACpF,QAAQ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAClF,QAAQ,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChH,KAAK;AACL,IAAI,QAAQ,GAAG;AACf,QAAQ,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;AAC5B;AACA;AACA;AACA,QAAQ,IAAI,CAAC,SAAS,GAAG;AACzB,YAAY,cAAc,EAAE,CAAC,MAAM,KAAK,EAAE,OAAO,MAAM,CAAC,EAAE;AAC1D,YAAY,cAAc,EAAE,CAAC,MAAM,KAAK,EAAE,OAAO,MAAM,CAAC,EAAE;AAC1D,YAAY,YAAY,CAAC,IAAI;AAC7B,YAAY,mBAAmB,CAAC,IAAI;AACpC,SAAS,CAAC;AACV,QAAQ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC;AACxD;AACA;AACA,QAAQ,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;AACpC,QAAQ,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;AAC9B,KAAK;AACL,IAAI,WAAW,kBAAkB,GAAG;AACpC,QAAQ,OAAO,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;AACxE,KAAK;AACL,IAAI,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE;AACvD;AACA,QAAQ,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC/C,KAAK;AACL,IAAI,iBAAiB,CAAC,IAAI,EAAE,KAAK,EAAE;AACnC,QAAQ,QAAQ,IAAI;AACpB,YAAY,KAAK,OAAO;AACxB,gBAAgB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC,SAAS,GAAG,KAAK,CAAC;AACtF,gBAAgB,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,SAAS,IAAI,KAAK,IAAI,EAAE,CAAC;AACtE,oBAAoB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AACnF,iBAAiB,KAAI;AACrB,oBAAoB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACtF,iBAAiB;AACjB,gBAAgB,MAAM;AACtB,YAAY,KAAK,SAAS;AAC1B,gBAAgB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,SAAS,GAAG,KAAK,CAAC;AAChF,gBAAgB,MAAM;AACtB,YAAY,KAAK,OAAO;AACxB,gBAAgB,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;AACjD,gBAAgB,MAAM;AACtB,YAAY,KAAK,UAAU;AAC3B,gBAAgB,IAAI,KAAK,KAAK,EAAE,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK,IAAI,IAAI,EAAE;AACtE,oBAAoB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;AACzC,iBAAiB,MAAM;AACvB,oBAAoB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;AAC1C,iBAAiB;AACjB,gBAAgB,MAAM;AACtB,YAAY,KAAK,aAAa;AAC9B,gBAAgB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC;AACxD,gBAAgB,MAAM;AACtB,SAAS;AACT;AACA,KAAK;AACL,IAAI,4BAA4B,EAAE;AAClC;AACA;AACA,QAAQ,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC;AAC9C;AACA;AACA,YAAY,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC;AAC1E,SAAS;AACT,KAAK;AACL,IAAI,oBAAoB,CAAC,KAAK,EAAE;AAChC;AACA,QAAQ,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK;AAC/D,YAAY,IAAI,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,KAAK,EAAE;AAChE,gBAAgB,OAAO,MAAM,CAAC;AAC9B,aAAa;AACb,SAAS,CAAC,CAAC;AACX,QAAQ,IAAI,aAAa,IAAI,KAAK,IAAI,IAAI,EAAE;AAC5C,YAAY,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;AAC1C,SAAS,MAAM;AACf,YAAY,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;AACzC,SAAS;AACT;AACA,KAAK;AACL,IAAI,SAAS,CAAC,KAAK,EAAE;AACrB,QAAQ,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;AACpC,QAAQ,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AAC5B,QAAQ,KAAK,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,SAAS,GAAG;AACnD,YAAY,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;AAChC,YAAY,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;AAC5C,YAAY,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;AACtG,SAAS,MAAM;AACf,YAAY,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;AAChC,YAAY,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;AAC7C,YAAY,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AACnG,SAAS;AACT;AACA,QAAQ,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAClC,KAAK;AACL,IAAI,eAAe,EAAE;AACrB,QAAQ,GAAG,IAAI,CAAC,yBAAyB,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACvE,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC;AACxB,SAAS,KAAI;AACb,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC;AACzB,SAAS;AACT,KAAK;AACL,IAAI,eAAe,GAAG;AACtB;AACA,KAAK;AACL,IAAI,kBAAkB,CAAC,CAAC,CAAC;AACzB,QAAQ,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AAChD,KAAK;AACL,IAAI,YAAY,CAAC,CAAC,CAAC;AACnB,QAAQ,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AACxC,KAAK;AACL,IAAI,YAAY,CAAC,CAAC,EAAE;AACpB,QAAQ,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AACzC;AACA,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;AACzD;AACA,YAAY,IAAI,CAAC,0BAA0B,CAAC,SAAS,CAAC,CAAC;AACvD,SAAS;AACT;AACA,QAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;AACpC;AACA,KAAK;AACL,IAAI,0BAA0B,CAAC,UAAU,EAAE;AAC3C,QAAQ,GAAG,UAAU,KAAK,EAAE,CAAC;AAC7B,YAAY,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAC/E,SAAS,KAAI;AACb,YAAY,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAClF,SAAS;AACT,KAAK;AACL,IAAI,mBAAmB,CAAC,CAAC,CAAC;AAC1B,QAAQ,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,OAAO,CAAC;AAChD,YAAY,MAAM,CAAC,CAAC,CAAC,MAAM;AAC3B,YAAY,OAAO,CAAC,CAAC,CAAC,OAAO;AAC7B,YAAY,UAAU,CAAC,CAAC,CAAC,UAAU;AACnC,YAAY,IAAI,CAAC,CAAC,CAAC,IAAI;AACvB,YAAY,OAAO,CAAC,CAAC,CAAC,OAAO;AAC7B,YAAY,MAAM,CAAC,CAAC,CAAC,MAAM;AAC3B,YAAY,GAAG,CAAC,CAAC,CAAC,GAAG;AACrB,YAAY,QAAQ,CAAC,CAAC,CAAC,QAAQ;AAC/B,YAAY,QAAQ,CAAC,CAAC,CAAC,QAAQ;AAC/B,YAAY,QAAQ,CAAC,CAAC,CAAC,QAAQ;AAC/B,YAAY,QAAQ,CAAC,CAAC,CAAC,QAAQ;AAC/B,YAAY,WAAW,CAAC,CAAC,CAAC,WAAW;AACrC,YAAY,OAAO,CAAC,CAAC,CAAC,OAAO;AAC7B,YAAY,MAAM,CAAC,CAAC,CAAC,MAAM;AAC3B,YAAY,OAAO,CAAC,CAAC,CAAC,OAAO;AAC7B,YAAY,IAAI,CAAC,CAAC,CAAC,IAAI;AACvB,SAAS,CAAC,CAAC;AACX,QAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAClC,KAAK;AACL,IAAI,aAAa,CAAC,CAAC,EAAE;AACrB,QAAQ,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AACzC;AACA,QAAQ,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;AACpC,KAAK;AACL,IAAI,YAAY,GAAG;AACnB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;AACrB,KAAK;AACL,IAAI,WAAW,CAAC,CAAC,EAAE;AACnB,QAAQ,IAAI,cAAc,GAAG,CAAC,CAAC,aAAa,CAAC;AAC7C,QAAQ,IAAI,cAAc,KAAK,IAAI,CAAC,kBAAkB,EAAE,CAE/C,MAAM;AACf,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC;AACxB,SAAS;AACT,KAAK;AACL,IAAI,KAAK,EAAE;AACX,QAAQ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;AACpC,QAAQ,IAAI,CAAC,cAAc,EAAE,CAAC;AAC9B,QAAQ,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;AAClE;AACA,KAAK;AACL,IAAI,IAAI,EAAE;AACV,QAAQ,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;AACrE,QAAQ,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;AAC5B,QAAQ,IAAI,CAAC,0BAA0B,CAAC,EAAE,CAAC,CAAC;AAC5C,QAAQ,IAAI,CAAC,cAAc,EAAE,CAAC;AAC9B,QAAQ,IAAI,CAAC,sBAAsB,EAAE,CAAC;AACtC,KAAK;AACL,IAAI,cAAc,EAAE;AACpB,QAAQ,IAAI,CAAC,yBAAyB,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC/D,KAAK;AACL,IAAI,cAAc,GAAG;AACrB,QAAQ,IAAI,CAAC,yBAAyB,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAClE,KAAK;AACL,IAAI,gBAAgB,CAAC,UAAU,EAAE;AACjC,QAAQ,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;AACpE,QAAQ,IAAI,CAAC,mBAAmB,EAAE,CAAC;AACnC,KAAK;AACL,IAAI,mBAAmB,GAAG;AAC1B,QAAQ,MAAM,aAAa,GAAG,EAAE,CAAC;AACjC,QAAQ,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK;AACjD,YAAY,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;AACzD,YAAY,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAC1C,SAAS,CAAC,CAAC;AACX,QAAQ,IAAI,CAAC,kBAAkB,CAAC,SAAS,GAAG,EAAE,CAAC;AAC/C,QAAQ,aAAa,CAAC,OAAO,CAAC,aAAa,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AACvG;AACA;AACA,KAAK;AACL,IAAI,eAAe,CAAC,IAAI,CAAC;AACzB,QAAQ,IAAI,SAAS,GAAG,IAAI,CAAC;AAC7B,QAAQ,GAAG,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,UAAU,CAAC;AAC5D,YAAY,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1F,SAAS,KAAI;AACb,YAAY,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;AACpD,SAAS;AACT,QAAQ,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC;AAC/B,QAAQ,OAAO,SAAS,CAAC;AACzB,KAAK;AACL;AACA,IAAI,gBAAgB,CAAC,IAAI,CAAC;AAC1B,QAAQ,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC5D,QAAQ,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AACrD;AACA,QAAQ,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AACtE,QAAQ,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACjF,QAAQ,OAAO,aAAa,CAAC;AAC7B,KAAK;AACL,IAAI,eAAe,CAAC,CAAC,EAAE;AACvB,QAAQ,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AACrC,QAAQ,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;AACjC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;AACpB,QAAQ,IAAI,CAAC,qBAAqB,EAAE,CAAC;AACrC,KAAK;AACL,IAAI,YAAY,CAAC,KAAK,EAAE;AACxB,QAAQ,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AAC9B,QAAQ,IAAI,CAAC,sBAAsB,EAAE,CAAC;AACtC,KAAK;AACL,IAAI,gBAAgB,CAAC,YAAY,EAAE;AACnC,QAAQ,MAAM,iBAAiB,GAAG,EAAE,CAAC;AACrC,QAAQ,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK;AAC3C,YAAY,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AACtE,YAAY,MAAM,QAAQ,GAAG,OAAO,WAAW,IAAI,QAAQ,CAAC;AAC5D,YAAY,IAAI,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AAChE,gBAAgB,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC/C,aAAa;AACb,YAAY,IAAI,CAAC,QAAQ,EAAE;AAC3B,gBAAgB,OAAO,CAAC,IAAI,CAAC,4DAA4D,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;AAC3H,aAAa;AACb,SAAS,CAAC,CAAC;AACX,QAAQ,OAAO,iBAAiB,CAAC;AACjC,KAAK;AACL,IAAI,sBAAsB,CAAC,SAAS,GAAG,IAAI,EAAE;AAC7C;AACA,QAAQ,IAAI,SAAS,GAAG,EAAE,CAAC;AAC3B,QAAQ,IAAI,aAAa,GAAG,IAAI,CAAC;AACjC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;AAC3B;AACA,YAAY,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC;AAC/C,YAAY,IAAI,CAAC,aAAa,EAAE;AAChC,gBAAgB,SAAS,GAAG,UAAU,CAAC;AACvC,aAAa;AACb,SAAS;AACT,QAAQ,IAAI,UAAU,GAAG,aAAa,CAAC;AACvC,QAAQ,IAAI,UAAU,EAAE;AACxB,YAAY,IAAI,CAAC,oBAAoB,EAAE,CAAC;AACxC,SAAS,MAAM,IAAI,SAAS,EAAE;AAC9B,YAAY,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;AAChD,SAAS;AACT,QAAQ,OAAO;AACf,YAAY,UAAU;AACtB,SAAS,CAAC;AACV,KAAK;AACL,IAAI,mBAAmB,CAAC,SAAS,EAAE;AACnC,QAAQ,IAAI,SAAS,IAAI,UAAU,EAAE;AACrC,YAAY,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACrD,YAAY,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,SAAS,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC;AACtG,YAAY,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AACnF,SAAS;AACT,KAAK;AACL,IAAI,oBAAoB,GAAG;AAC3B,QAAQ,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;AACrG,QAAQ,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AAClF;AACA,KAAK;AACL,IAAI,qBAAqB,GAAG;AAC5B,QAAQ,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC1C,QAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAClC,KAAK;AACL,IAAI,oBAAoB,CAAC,KAAK,EAAE;AAChC;AACA,QAAQ,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,SAAS,GAAG,EAAE,CAAC;AAC1D;AACA,QAAQ,GAAG,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC;AACjD,YAAY,MAAM,iBAAiB,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;AACzE,YAAY,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;AAC9E,SAAS;AACT,KAAK;AACL,IAAI,sBAAsB,CAAC,KAAK,CAAC;AACjC,QAAQ,GAAG,OAAO,IAAI,CAAC,SAAS,CAAC,mBAAmB,IAAI,UAAU,CAAC;AACnE,YAAY,OAAO,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;AAC7D,SAAS,KAAI;AACb,YAAY,OAAO,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC;AACvD,SAAS;AACT,KAAK;AACL,IAAI,uBAAuB,CAAC,KAAK,CAAC;AAClC,QAAQ,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC/D,QAAQ,MAAM,iBAAiB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAChE,QAAQ,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAC1D,QAAQ,iBAAiB,CAAC,SAAS,GAAG,SAAS,CAAC;AAChD,QAAQ,OAAO,iBAAiB,CAAC;AACjC,KAAK;AACL,CAAC;AACD,MAAM,kBAAkB,GAAG,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;AAC5D,GAAG,kBAAkB,CAAC;AACtB;AACA,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC;AACpE"}

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,26 +59,31 @@ 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() {
@@ -88,7 +94,8 @@ class JBSelectWebComponent extends HTMLElement {
         this.callbacks = {
             getOptionTitle: (option) => { return option; },
             getOptionValue: (option) => { return option; },
-            getOptionDOM:null
+            getOptionDOM:null,
+            getSelectedValueDOM:null,
         };
         this.value = this.getAttribute('value') || null;
         // if user set value and current option list is not contain the option. 
@@ -106,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);
@@ -127,7 +134,7 @@ class JBSelectWebComponent extends HTMLElement {
                 }
                 break;
             case 'placeholder':
-                this._inputElement.placeholder = value;
+                this.elements.input.placeholder = value;
                 break;
         }
 
@@ -160,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('');
@@ -177,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',{
@@ -213,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
@@ -236,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();
     }
@@ -268,11 +283,14 @@ class JBSelectWebComponent extends HTMLElement {
 
     }
     createOptionDOM(item){
+        let optionDOM = null;
         if(typeof this.callbacks.getOptionDOM == 'function'){
-            return this.callbacks.getOptionDOM(item,this.onOptionClicked.bind(this));
+            optionDOM = this.callbacks.getOptionDOM(item,this.onOptionClicked.bind(this));
         }else{
-            return this._createOptionDom(item);
+            optionDOM = this._createOptionDom(item);
         }
+        optionDOM.value = item;
+        return optionDOM;
     }
 
     _createOptionDom(item){
@@ -280,7 +298,6 @@ class JBSelectWebComponent extends HTMLElement {
         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;
     }
@@ -332,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

@@ -64,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);;
@@ -73,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.1.0",
+  "version": "2.0.0",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "license": "MIT",
   "files": [