jb-select 4.1.4 → 4.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/JBSelect.js +1 -1
  2. package/dist/JBSelect.umd.js +1 -1
  3. package/lib/JBSelect.scss +76 -25
  4. package/lib/Types.ts +0 -2
  5. package/package.json +1 -1
package/dist/JBSelect.js CHANGED
@@ -28,7 +28,7 @@ function __classPrivateFieldSet(receiver, state, value, kind, f) {
28
28
 
29
29
  var HTML = "<div class=\"jb-select-web-component\">\r\n <div class=\"label-wrapper\">\r\n <label class=\"--hide\"><span class=\"label-value\"></span></label>\r\n <!-- close button will be visible on mobile modal -->\r\n <div class=\"close-button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path class=\"close-btn-svg-bg\" opacity=\"0.4\" d=\"M16.3399 1.9998H7.66988C4.27988 1.9998 1.99988 4.3798 1.99988 7.9198V16.0898C1.99988 19.6198 4.27988 21.9998 7.66988 21.9998H16.3399C19.7299 21.9998 21.9999 19.6198 21.9999 16.0898V7.9198C21.9999 4.3798 19.7299 1.9998 16.3399 1.9998Z\"/>\r\n <path class=\"close-btn-svg-path\" d=\"M15.0156 13.7703L13.2366 11.9923L15.0146 10.2143C15.3566 9.8733 15.3566 9.3183 15.0146 8.9773C14.6726 8.6333 14.1196 8.6343 13.7776 8.9763L11.9986 10.7543L10.2196 8.9743C9.87758 8.6323 9.32358 8.6343 8.98158 8.9743C8.64058 9.3163 8.64058 9.8713 8.98158 10.2123L10.7616 11.9923L8.98558 13.7673C8.64358 14.1093 8.64358 14.6643 8.98558 15.0043C9.15658 15.1763 9.37958 15.2613 9.60358 15.2613C9.82858 15.2613 10.0516 15.1763 10.2226 15.0053L11.9986 13.2293L13.7786 15.0083C13.9496 15.1793 14.1726 15.2643 14.3966 15.2643C14.6206 15.2643 14.8446 15.1783 15.0156 15.0083C15.3576 14.6663 15.3576 14.1123 15.0156 13.7703Z\" fill=\"#200E32\"/>\r\n </svg>\r\n </div>\r\n </div>\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=\"middle-divider\">\r\n <!-- middle line between input box and list (hidden by default but user may need it sometimes) -->\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 class=\"empty-list-placeholder\">\r\n <slot name=\"empty-list-message\">no item available</slot>\r\n </div>\r\n </div>\r\n <div class=\"message-box\"></div>\r\n</div>";
30
30
 
31
- var css_248z = ":host {\n --p-middle-div-height: var(--jb-select-middle-div-height, 0px);\n --p-p-color:#1e2832;\n --p-border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));\n --p-base-z-index:1;\n --p-mobile-modal-z-index:900; }\n\n.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: var(--jb-select-overlay-bgcolor, #0008);\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 16px 8px;\n z-index: var(--p-mobile-modal-z-index); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box {\n height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));\n border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));\n border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));\n border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .front-box .arrow-icon {\n display: none; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .selected-value-wrapper {\n opacity: 0;\n transition: none; } }\n .jb-select-web-component.--focused .middle-divider {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .middle-divider {\n margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-list-wrapper {\n position: initial;\n margin: var(--jb-select-mobile-item-list-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-wrapper {\n display: flex; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper label {\n color: #fff;\n font-size: 1.5em;\n display: flex;\n align-items: center; } }\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: flex;\n width: 48px;\n height: 48px;\n justify-content: center;\n align-items: center;\n color: #fff; }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg {\n opacity: var(--jb-select-close-bg-opacity, 0.4);\n fill: var(--jb-select-close-bg-color, #1f1735); }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path {\n fill: var(--jb-select-close-x-color, #fff); } }\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-wrapper label {\n width: 100%;\n margin: 4px 0px;\n display: block;\n font-size: var(--jb-select-label-font-size, 0.8em);\n font-weight: var(--jb-select-label-font-weight, normal);\n color: var(--jb-select-label-color, #1f1735); }\n .jb-select-web-component .label-wrapper label.--hide {\n display: none; }\n .jb-select-web-component .label-wrapper .close-button {\n display: none; }\n .jb-select-web-component .select-box {\n width: 100%;\n box-sizing: border-box;\n height: var(--jb-select-height, 40px);\n border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);\n border-radius: var(--jb-select-border-radius, 16px);\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n margin: 4px 0px 0px 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, var(--p-p-color));\n border-bottom-color: var(--jb-select-border-color, var(--p-p-color));\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-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\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: var(--jb-select-selected-value-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 input::placeholder {\n color: var(--jb-select-placeholder-color, initial);\n font-size: var(--jb-select-placeholder-font-size, 1.1em); }\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 .middle-divider {\n display: none;\n position: relative;\n z-index: calc(var(--p-base-z-index) + 2);\n width: 100%;\n height: var(--p-middle-div-height);\n background-color: var(--jb-select-middle-div-color, var(--p-p-color));\n margin: var(--jb-select-middle-div-margin, calc(-1 * var(--p-border-bottom-width)) 0);\n border-radius: var(--jb-select-middle-div-radius, 0px); }\n .jb-select-web-component .message-box {\n font-size: var(--jb-select-message-font-size, 0.7em);\n font-weight: var(--jb-select-message-font-weight, normal);\n padding: 4px 8px;\n color: var(--jb-select-message-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: calc(-1 * var(--p-border-bottom-width)) 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, var(--p-p-color));\n border-top: none;\n border-bottom: solid 3px var(--jb-select-border-color, var(--p-p-color));\n box-shadow: var(--jb-select-list-box-shadow);\n box-sizing: border-box;\n z-index: calc(var(--p-base-z-index) + 1); }\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: var(--jb-select-list-padding, 16px 0); }\n .jb-select-web-component .select-list-wrapper .select-list:empty {\n padding: 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, transparent); }\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 .jb-select-web-component .select-list-wrapper .select-list .select-option.--selected-option {\n font-weight: 900; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder {\n display: none;\n text-align: center;\n color: #838383;\n font-style: italic;\n padding: 8px 0; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder.--show {\n display: block; }\n";
31
+ var css_248z = ":host {\n --p-middle-div-height: var(--jb-select-middle-div-height, 0px);\n --p-p-color: #1e2832;\n --p-border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));\n --p-base-z-index: 1;\n --p-mobile-modal-z-index: 900; }\n\n.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: var(--jb-select-overlay-bgcolor, #0008);\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 16px 8px;\n z-index: var(--p-mobile-modal-z-index); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box {\n height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));\n border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));\n border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));\n border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .front-box .arrow-icon {\n display: none; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .selected-value-wrapper {\n opacity: 0;\n transition: none; } }\n .jb-select-web-component.--focused .middle-divider {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .middle-divider {\n margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-list-wrapper {\n position: initial;\n margin: var(--jb-select-mobile-item-list-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-wrapper {\n display: flex; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper label {\n color: #fff;\n font-size: 1.5em;\n display: flex;\n align-items: center; } }\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: flex;\n width: 48px;\n height: 48px;\n justify-content: center;\n align-items: center;\n color: #fff; }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg {\n opacity: var(--jb-select-close-bg-opacity, 0.4);\n fill: var(--jb-select-close-bg-color, #1f1735); }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path {\n fill: var(--jb-select-close-x-color, #fff); } }\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 @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--has-value .select-box:focus-within {\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6); } }\n .jb-select-web-component .label-wrapper label {\n width: 100%;\n margin: 4px 0px;\n display: block;\n font-size: var(--jb-select-label-font-size, 0.8em);\n font-weight: var(--jb-select-label-font-weight, normal);\n color: var(--jb-select-label-color, #1f1735); }\n .jb-select-web-component .label-wrapper label.--hide {\n display: none; }\n .jb-select-web-component .label-wrapper .close-button {\n display: none; }\n .jb-select-web-component .select-box {\n width: 100%;\n box-sizing: border-box;\n height: var(--jb-select-height, 40px);\n border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);\n border-radius: var(--jb-select-border-radius, 16px);\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n margin: 4px 0px 0px 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, var(--p-p-color));\n border-bottom-color: var(--jb-select-border-color, var(--p-p-color));\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-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\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: var(--jb-select-selected-value-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 input::placeholder {\n color: var(--jb-select-placeholder-color, initial);\n font-size: var(--jb-select-placeholder-font-size, 1.1em); }\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-repeat: no-repeat;\n background-position-x: 0;\n background-position-y: center; }\n .jb-select-web-component .middle-divider {\n display: none;\n position: relative;\n z-index: calc(var(--p-base-z-index) + 2);\n width: 100%;\n height: var(--p-middle-div-height);\n background-color: var(--jb-select-middle-div-color, var(--p-p-color));\n margin: var(--jb-select-middle-div-margin, calc(-1 * var(--p-border-bottom-width)) 0);\n border-radius: var(--jb-select-middle-div-radius, 0px); }\n .jb-select-web-component .message-box {\n font-size: var(--jb-select-message-font-size, 0.7em);\n font-weight: var(--jb-select-message-font-weight, normal);\n padding: 4px 8px;\n color: var(--jb-select-message-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: calc(-1 * var(--p-border-bottom-width)) 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, var(--p-p-color));\n border-top: none;\n border-bottom: solid 3px var(--jb-select-border-color, var(--p-p-color));\n box-shadow: var(--jb-select-list-box-shadow);\n box-sizing: border-box;\n z-index: calc(var(--p-base-z-index) + 1); }\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: var(--jb-select-list-padding, 16px 0); }\n .jb-select-web-component .select-list-wrapper .select-list:empty {\n padding: 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, transparent); }\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 .jb-select-web-component .select-list-wrapper .select-list .select-option.--selected-option {\n font-weight: 900; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder {\n display: none;\n text-align: center;\n color: #838383;\n font-style: italic;\n padding: 8px 0; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder.--show {\n display: block; }\n";
32
32
 
33
33
  var _JBSelectWebComponent_instances, _JBSelectWebComponent_value, _JBSelectWebComponent_textValue, _JBSelectWebComponent_notFindedValue, _JBSelectWebComponent_optionList, _JBSelectWebComponent_displayOptionList, _JBSelectWebComponent_placeholder, _JBSelectWebComponent_searchPlaceholder, _JBSelectWebComponent_setValueFromOutside, _JBSelectWebComponent_createSelectedValueDom;
34
34
  class JBSelectWebComponent extends HTMLElement {
package/dist/JBSelect.umd.js CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
  var HTML = "<div class=\"jb-select-web-component\">\r\n <div class=\"label-wrapper\">\r\n <label class=\"--hide\"><span class=\"label-value\"></span></label>\r\n <!-- close button will be visible on mobile modal -->\r\n <div class=\"close-button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path class=\"close-btn-svg-bg\" opacity=\"0.4\" d=\"M16.3399 1.9998H7.66988C4.27988 1.9998 1.99988 4.3798 1.99988 7.9198V16.0898C1.99988 19.6198 4.27988 21.9998 7.66988 21.9998H16.3399C19.7299 21.9998 21.9999 19.6198 21.9999 16.0898V7.9198C21.9999 4.3798 19.7299 1.9998 16.3399 1.9998Z\"/>\r\n <path class=\"close-btn-svg-path\" d=\"M15.0156 13.7703L13.2366 11.9923L15.0146 10.2143C15.3566 9.8733 15.3566 9.3183 15.0146 8.9773C14.6726 8.6333 14.1196 8.6343 13.7776 8.9763L11.9986 10.7543L10.2196 8.9743C9.87758 8.6323 9.32358 8.6343 8.98158 8.9743C8.64058 9.3163 8.64058 9.8713 8.98158 10.2123L10.7616 11.9923L8.98558 13.7673C8.64358 14.1093 8.64358 14.6643 8.98558 15.0043C9.15658 15.1763 9.37958 15.2613 9.60358 15.2613C9.82858 15.2613 10.0516 15.1763 10.2226 15.0053L11.9986 13.2293L13.7786 15.0083C13.9496 15.1793 14.1726 15.2643 14.3966 15.2643C14.6206 15.2643 14.8446 15.1783 15.0156 15.0083C15.3576 14.6663 15.3576 14.1123 15.0156 13.7703Z\" fill=\"#200E32\"/>\r\n </svg>\r\n </div>\r\n </div>\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=\"middle-divider\">\r\n <!-- middle line between input box and list (hidden by default but user may need it sometimes) -->\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 class=\"empty-list-placeholder\">\r\n <slot name=\"empty-list-message\">no item available</slot>\r\n </div>\r\n </div>\r\n <div class=\"message-box\"></div>\r\n</div>";
36
36
 
37
- var css_248z = ":host {\n --p-middle-div-height: var(--jb-select-middle-div-height, 0px);\n --p-p-color:#1e2832;\n --p-border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));\n --p-base-z-index:1;\n --p-mobile-modal-z-index:900; }\n\n.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: var(--jb-select-overlay-bgcolor, #0008);\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 16px 8px;\n z-index: var(--p-mobile-modal-z-index); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box {\n height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));\n border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));\n border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));\n border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .front-box .arrow-icon {\n display: none; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .selected-value-wrapper {\n opacity: 0;\n transition: none; } }\n .jb-select-web-component.--focused .middle-divider {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .middle-divider {\n margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-list-wrapper {\n position: initial;\n margin: var(--jb-select-mobile-item-list-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-wrapper {\n display: flex; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper label {\n color: #fff;\n font-size: 1.5em;\n display: flex;\n align-items: center; } }\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: flex;\n width: 48px;\n height: 48px;\n justify-content: center;\n align-items: center;\n color: #fff; }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg {\n opacity: var(--jb-select-close-bg-opacity, 0.4);\n fill: var(--jb-select-close-bg-color, #1f1735); }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path {\n fill: var(--jb-select-close-x-color, #fff); } }\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-wrapper label {\n width: 100%;\n margin: 4px 0px;\n display: block;\n font-size: var(--jb-select-label-font-size, 0.8em);\n font-weight: var(--jb-select-label-font-weight, normal);\n color: var(--jb-select-label-color, #1f1735); }\n .jb-select-web-component .label-wrapper label.--hide {\n display: none; }\n .jb-select-web-component .label-wrapper .close-button {\n display: none; }\n .jb-select-web-component .select-box {\n width: 100%;\n box-sizing: border-box;\n height: var(--jb-select-height, 40px);\n border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);\n border-radius: var(--jb-select-border-radius, 16px);\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n margin: 4px 0px 0px 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, var(--p-p-color));\n border-bottom-color: var(--jb-select-border-color, var(--p-p-color));\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-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\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: var(--jb-select-selected-value-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 input::placeholder {\n color: var(--jb-select-placeholder-color, initial);\n font-size: var(--jb-select-placeholder-font-size, 1.1em); }\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 .middle-divider {\n display: none;\n position: relative;\n z-index: calc(var(--p-base-z-index) + 2);\n width: 100%;\n height: var(--p-middle-div-height);\n background-color: var(--jb-select-middle-div-color, var(--p-p-color));\n margin: var(--jb-select-middle-div-margin, calc(-1 * var(--p-border-bottom-width)) 0);\n border-radius: var(--jb-select-middle-div-radius, 0px); }\n .jb-select-web-component .message-box {\n font-size: var(--jb-select-message-font-size, 0.7em);\n font-weight: var(--jb-select-message-font-weight, normal);\n padding: 4px 8px;\n color: var(--jb-select-message-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: calc(-1 * var(--p-border-bottom-width)) 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, var(--p-p-color));\n border-top: none;\n border-bottom: solid 3px var(--jb-select-border-color, var(--p-p-color));\n box-shadow: var(--jb-select-list-box-shadow);\n box-sizing: border-box;\n z-index: calc(var(--p-base-z-index) + 1); }\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: var(--jb-select-list-padding, 16px 0); }\n .jb-select-web-component .select-list-wrapper .select-list:empty {\n padding: 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, transparent); }\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 .jb-select-web-component .select-list-wrapper .select-list .select-option.--selected-option {\n font-weight: 900; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder {\n display: none;\n text-align: center;\n color: #838383;\n font-style: italic;\n padding: 8px 0; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder.--show {\n display: block; }\n";
37
+ var css_248z = ":host {\n --p-middle-div-height: var(--jb-select-middle-div-height, 0px);\n --p-p-color: #1e2832;\n --p-border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));\n --p-base-z-index: 1;\n --p-mobile-modal-z-index: 900; }\n\n.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: var(--jb-select-overlay-bgcolor, #0008);\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 16px 8px;\n z-index: var(--p-mobile-modal-z-index); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box {\n height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));\n border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));\n border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));\n border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .front-box .arrow-icon {\n display: none; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .selected-value-wrapper {\n opacity: 0;\n transition: none; } }\n .jb-select-web-component.--focused .middle-divider {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .middle-divider {\n margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-list-wrapper {\n position: initial;\n margin: var(--jb-select-mobile-item-list-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-wrapper {\n display: flex; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper label {\n color: #fff;\n font-size: 1.5em;\n display: flex;\n align-items: center; } }\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: flex;\n width: 48px;\n height: 48px;\n justify-content: center;\n align-items: center;\n color: #fff; }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg {\n opacity: var(--jb-select-close-bg-opacity, 0.4);\n fill: var(--jb-select-close-bg-color, #1f1735); }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path {\n fill: var(--jb-select-close-x-color, #fff); } }\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 @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--has-value .select-box:focus-within {\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6); } }\n .jb-select-web-component .label-wrapper label {\n width: 100%;\n margin: 4px 0px;\n display: block;\n font-size: var(--jb-select-label-font-size, 0.8em);\n font-weight: var(--jb-select-label-font-weight, normal);\n color: var(--jb-select-label-color, #1f1735); }\n .jb-select-web-component .label-wrapper label.--hide {\n display: none; }\n .jb-select-web-component .label-wrapper .close-button {\n display: none; }\n .jb-select-web-component .select-box {\n width: 100%;\n box-sizing: border-box;\n height: var(--jb-select-height, 40px);\n border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);\n border-radius: var(--jb-select-border-radius, 16px);\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n margin: 4px 0px 0px 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, var(--p-p-color));\n border-bottom-color: var(--jb-select-border-color, var(--p-p-color));\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-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\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: var(--jb-select-selected-value-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 input::placeholder {\n color: var(--jb-select-placeholder-color, initial);\n font-size: var(--jb-select-placeholder-font-size, 1.1em); }\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-repeat: no-repeat;\n background-position-x: 0;\n background-position-y: center; }\n .jb-select-web-component .middle-divider {\n display: none;\n position: relative;\n z-index: calc(var(--p-base-z-index) + 2);\n width: 100%;\n height: var(--p-middle-div-height);\n background-color: var(--jb-select-middle-div-color, var(--p-p-color));\n margin: var(--jb-select-middle-div-margin, calc(-1 * var(--p-border-bottom-width)) 0);\n border-radius: var(--jb-select-middle-div-radius, 0px); }\n .jb-select-web-component .message-box {\n font-size: var(--jb-select-message-font-size, 0.7em);\n font-weight: var(--jb-select-message-font-weight, normal);\n padding: 4px 8px;\n color: var(--jb-select-message-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: calc(-1 * var(--p-border-bottom-width)) 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, var(--p-p-color));\n border-top: none;\n border-bottom: solid 3px var(--jb-select-border-color, var(--p-p-color));\n box-shadow: var(--jb-select-list-box-shadow);\n box-sizing: border-box;\n z-index: calc(var(--p-base-z-index) + 1); }\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: var(--jb-select-list-padding, 16px 0); }\n .jb-select-web-component .select-list-wrapper .select-list:empty {\n padding: 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, transparent); }\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 .jb-select-web-component .select-list-wrapper .select-list .select-option.--selected-option {\n font-weight: 900; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder {\n display: none;\n text-align: center;\n color: #838383;\n font-style: italic;\n padding: 8px 0; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder.--show {\n display: block; }\n";
38
38
 
39
39
  var _JBSelectWebComponent_instances, _JBSelectWebComponent_value, _JBSelectWebComponent_textValue, _JBSelectWebComponent_notFindedValue, _JBSelectWebComponent_optionList, _JBSelectWebComponent_displayOptionList, _JBSelectWebComponent_placeholder, _JBSelectWebComponent_searchPlaceholder, _JBSelectWebComponent_setValueFromOutside, _JBSelectWebComponent_createSelectedValueDom;
40
40
  class JBSelectWebComponent extends HTMLElement {
package/lib/JBSelect.scss CHANGED
@@ -1,17 +1,20 @@
1
1
  @import "../../../common/scss/Medias.scss";
2
- :host{
2
+
3
+ :host {
3
4
  //define private variable here
4
5
  --p-middle-div-height: var(--jb-select-middle-div-height, 0px);
5
- --p-p-color:#1e2832;
6
+ --p-p-color: #1e2832;
6
7
  --p-border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));
7
- --p-base-z-index:1;
8
- --p-mobile-modal-z-index:900;
8
+ --p-base-z-index: 1;
9
+ --p-mobile-modal-z-index: 900;
9
10
  }
11
+
10
12
  .jb-select-web-component {
11
13
  width: var(--jb-select-width, 100%);
12
14
  margin: var(--jb-select-margin, 12px 0);
13
15
  position: relative;
14
16
  box-sizing: border-box;
17
+
15
18
  &.--focused {
16
19
  @include mobile-tablet {
17
20
  position: absolute;
@@ -23,42 +26,46 @@
23
26
  margin: 0;
24
27
  padding: 16px 8px;
25
28
  z-index: var(--p-mobile-modal-z-index);
26
-
29
+
27
30
  }
28
- .select-box{
31
+
32
+ .select-box {
29
33
  @include mobile-tablet {
30
34
  height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));
31
35
  background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);
32
- //
33
36
  border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));
34
- border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6) );
37
+ border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));
35
38
  border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));
36
- border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));
39
+ border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));
37
40
  border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px));
38
41
  }
39
- .front-box{
40
- .arrow-icon{
42
+
43
+ .front-box {
44
+ .arrow-icon {
41
45
  @include mobile-tablet {
42
46
  display: none;
43
47
  }
44
48
  }
45
49
  }
46
- .selected-value-wrapper{
50
+
51
+ .selected-value-wrapper {
47
52
  @include mobile-tablet {
48
53
  opacity: 0;
49
54
  transition: none;
50
55
  }
51
- .selected-value{
52
-
53
- }
56
+
57
+ .selected-value {}
54
58
  }
55
59
  }
56
- .middle-divider{
60
+
61
+ .middle-divider {
57
62
  display: block;
63
+
58
64
  @include mobile-tablet {
59
65
  margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0);
60
66
  }
61
67
  }
68
+
62
69
  .select-list-wrapper {
63
70
  @include mobile-tablet {
64
71
  position: initial;
@@ -66,10 +73,12 @@
66
73
  border-radius: var(--jb-select-border-radius, 16px);
67
74
  }
68
75
  }
76
+
69
77
  .label-wrapper {
70
78
  @include mobile-tablet {
71
79
  display: flex;
72
80
  }
81
+
73
82
  label {
74
83
  @include mobile-tablet {
75
84
  color: #fff;
@@ -78,33 +87,46 @@
78
87
  align-items: center;
79
88
  }
80
89
  }
90
+
81
91
  .close-button {
82
92
  display: none;
93
+
83
94
  @include mobile-tablet {
84
95
  display: flex;
85
96
  width: 48px;
86
97
  height: 48px;
87
98
  justify-content: center;
88
99
  align-items: center;
89
- color:#fff;
90
- .close-btn-svg-bg{
100
+ color: #fff;
101
+
102
+ .close-btn-svg-bg {
91
103
  opacity: var(--jb-select-close-bg-opacity, 0.4);
92
104
  fill: var(--jb-select-close-bg-color, #1f1735);
93
105
  }
94
- .close-btn-svg-path{
106
+
107
+ .close-btn-svg-path {
95
108
  fill: var(--jb-select-close-x-color, #fff);
96
109
  }
97
110
  }
98
111
  }
99
112
  }
100
113
  }
114
+
101
115
  &.--has-value {
116
+
102
117
  //if user select a option and value is setted and not null
103
118
  .select-box {
104
119
  border-color: var(--jb-select-border-color-selected, #c3ff14);
105
120
  background-color: var(--jb-select-bgcolor-selected, #f7f6f6);
121
+
122
+ @include mobile-tablet {
123
+ &:focus-within {
124
+ background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);
125
+ }
126
+ }
106
127
  }
107
128
  }
129
+
108
130
  .label-wrapper {
109
131
  label {
110
132
  width: 100%;
@@ -113,14 +135,17 @@
113
135
  font-size: var(--jb-select-label-font-size, 0.8em);
114
136
  font-weight: var(--jb-select-label-font-weight, normal);
115
137
  color: var(--jb-select-label-color, #1f1735);
138
+
116
139
  &.--hide {
117
140
  display: none;
118
141
  }
119
142
  }
143
+
120
144
  .close-button {
121
145
  display: none;
122
146
  }
123
147
  }
148
+
124
149
  .select-box {
125
150
  width: 100%;
126
151
  box-sizing: border-box;
@@ -136,15 +161,18 @@
136
161
  padding-inline-end: 16px;
137
162
  gap: 8px;
138
163
  position: relative;
164
+
139
165
  &:focus-within {
140
166
  border-color: var(--jb-select-border-color, var(--p-p-color));
141
167
  border-bottom-color: var(--jb-select-border-color, var(--p-p-color));
142
168
  border-radius: var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px) 0 0;
169
+
143
170
  @include mobile-tablet {
144
171
  border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px));
145
172
  }
146
-
173
+
147
174
  }
175
+
148
176
  .selected-value-wrapper {
149
177
  position: absolute;
150
178
  width: 100%;
@@ -152,9 +180,11 @@
152
180
  border-radius: inherit;
153
181
  overflow: hidden;
154
182
  z-index: 1;
183
+
155
184
  &.--search-typed {
156
185
  opacity: 0;
157
186
  }
187
+
158
188
  .selected-value {
159
189
  width: 100%;
160
190
  box-sizing: border-box;
@@ -171,11 +201,13 @@
171
201
  align-items: center;
172
202
  }
173
203
  }
204
+
174
205
  &:focus-within .selected-value {
175
206
  opacity: 0.7;
176
207
  transition: all 0.3s ease;
177
-
208
+
178
209
  }
210
+
179
211
  .front-box {
180
212
  position: absolute;
181
213
  width: 100%;
@@ -201,23 +233,29 @@
201
233
  &:focus {
202
234
  outline: none;
203
235
  }
236
+
204
237
  &::placeholder {
205
238
  color: var(--jb-select-placeholder-color, initial);
206
239
  font-size: var(--jb-select-placeholder-font-size, 1.1em);
207
240
  }
208
241
  }
242
+
209
243
  .arrow-icon {
210
244
  width: 8px;
211
245
  height: 100%;
246
+ // position: absolute;
247
+ // top:0;
248
+ // left: 8px;
212
249
  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>");
213
- background-position: end;
250
+ // background-position: end;
214
251
  background-repeat: no-repeat;
215
252
  background-position-x: 0;
216
253
  background-position-y: center;
217
254
  }
218
255
  }
219
256
  }
220
- .middle-divider{
257
+
258
+ .middle-divider {
221
259
  display: none;
222
260
  position: relative;
223
261
  z-index: calc(var(--p-base-z-index) + 2);
@@ -227,18 +265,22 @@
227
265
  margin: var(--jb-select-middle-div-margin, calc(-1 * var(--p-border-bottom-width)) 0);
228
266
  border-radius: var(--jb-select-middle-div-radius, 0px);
229
267
  }
268
+
230
269
  .message-box {
231
270
  font-size: var(--jb-select-message-font-size, 0.7em);
232
271
  font-weight: var(--jb-select-message-font-weight, normal);
233
272
  padding: 4px 8px;
234
273
  color: var(--jb-select-message-color, #929292);
274
+
235
275
  &:empty {
236
276
  padding: 0;
237
277
  }
278
+
238
279
  &.--error {
239
280
  color: red;
240
281
  }
241
282
  }
283
+
242
284
  .select-list-wrapper {
243
285
  display: none;
244
286
  position: absolute;
@@ -254,20 +296,25 @@
254
296
  box-shadow: var(--jb-select-list-box-shadow);
255
297
  box-sizing: border-box;
256
298
  z-index: calc(var(--p-base-z-index) + 1);
299
+
257
300
  &.--show {
258
301
  display: block;
259
302
  }
303
+
260
304
  .select-list {
261
305
  width: 100%;
262
306
  max-height: var(--jb-select-list-max-height, 400px);
263
307
  overflow-y: auto;
264
308
  padding: var(--jb-select-list-padding, 16px 0);
309
+
265
310
  &:empty {
266
311
  padding: 0;
267
312
  }
313
+
268
314
  @include mobile-tablet {
269
315
  max-height: calc(100vh - 240px);
270
316
  }
317
+
271
318
  .select-option {
272
319
  min-height: 36px;
273
320
  padding: 4px 16px;
@@ -276,25 +323,29 @@
276
323
  font-size: 0.9em;
277
324
  color: var(--jb-select-option-color, inherit);
278
325
  background-color: var(--jb-select-option-background-color, transparent);
326
+
279
327
  &:hover {
280
328
  background-color: var(--jb-select-option-background-color-hover, #1073db);
281
329
  color: var(--jb-select-option-color-hover, #fff);
282
330
  cursor: pointer;
283
331
  }
284
- &.--selected-option{
332
+
333
+ &.--selected-option {
285
334
  font-weight: 900;
286
335
  }
287
336
  }
288
337
  }
338
+
289
339
  .empty-list-placeholder {
290
340
  display: none;
291
341
  text-align: center;
292
342
  color: #838383;
293
343
  font-style: italic;
294
344
  padding: 8px 0;
345
+
295
346
  &.--show {
296
347
  display: block;
297
348
  }
298
349
  }
299
350
  }
300
- }
351
+ }
package/lib/Types.ts CHANGED
@@ -1,5 +1,3 @@
1
- import { string } from "prop-types";
2
-
3
1
  export type JBSelectCallbacks = {
4
2
  getOptionTitle: (option:any) => string;
5
3
  getOptionValue: (option:any) => any;
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "select",
13
13
  "web component"
14
14
  ],
15
- "version": "4.1.4",
15
+ "version": "4.1.6",
16
16
  "bugs": "https://github.com/javadbat/jb-select/issues",
17
17
  "license": "MIT",
18
18
  "files": [