jb-select 4.0.2 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -0
- package/dist/JBSelect.js +2 -2
- package/dist/JBSelect.umd.js +2 -2
- package/lib/JBSelect.html +4 -4
- package/lib/JBSelect.scss +52 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -143,4 +143,9 @@ if you want to set a custom style to this web-component all you need is to set c
|
|
|
143
143
|
| --jb-select-mobile-search-border-bottom-width | when user open select on mobile, search box can have its own border bottom width config |
|
|
144
144
|
| --jb-select-mobile-search-border-bottom-color | when user open select on mobile, search box can have its own border bottom color config |
|
|
145
145
|
| --jb-select-mobile-search-border-radius | when user open select on mobile, search box can have its own border radius |
|
|
146
|
+
| --jb-select-middle-div-height | separator line between input and list default is `0px` and hidden but you can cahange it |
|
|
147
|
+
| --jb-select-middle-div-color | change separator line color |
|
|
148
|
+
| --jb-select-middle-div-margin | chnage seprator line margin |
|
|
149
|
+
| --jb-select-middle-div-radius | change seperator line border-radius |
|
|
150
|
+
|
|
146
151
|
|
package/dist/JBSelect.js
CHANGED
|
@@ -26,9 +26,9 @@ function __classPrivateFieldSet(receiver, state, value, kind, f) {
|
|
|
26
26
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
27
27
|
}
|
|
28
28
|
|
|
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
|
|
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 = ".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: 900; } }\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(--jb-select-border-bottom-width, 3px) 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;\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 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: solid var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px)) var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n border-bottom: solid var(--jb-select-mobile-search-border-bottom-width, var(--jb-select-border-bottom-width, 3px)) var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, #f7f6f6));\n border-radius: var(--jb-select-mobile-search-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 @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component .select-box:focus-within .selected-value {\n opacity: 0;\n transition: none; } }\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 .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: 2px 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: -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: 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, #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 .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\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: 900; } }\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(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px)));\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 .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(--jb-select-border-bottom-width, 3px) 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;\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 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, 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: 2px 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: -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, 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: 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: 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, #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 .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
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
33
33
|
}
|
|
34
34
|
|
|
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
|
|
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 = ".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: 900; } }\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(--jb-select-border-bottom-width, 3px) 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;\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 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: solid var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px)) var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n border-bottom: solid var(--jb-select-mobile-search-border-bottom-width, var(--jb-select-border-bottom-width, 3px)) var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, #f7f6f6));\n border-radius: var(--jb-select-mobile-search-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 @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component .select-box:focus-within .selected-value {\n opacity: 0;\n transition: none; } }\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 .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: 2px 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: -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: 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, #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 .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\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: 900; } }\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(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px)));\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 .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(--jb-select-border-bottom-width, 3px) 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;\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 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, 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: 2px 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: -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, 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: 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: 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, #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 .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.html
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
<div class="jb-select-web-component">
|
|
2
2
|
<div class="label-wrapper">
|
|
3
3
|
<label class="--hide"><span class="label-value"></span></label>
|
|
4
|
+
<!-- close button will be visible on mobile modal -->
|
|
4
5
|
<div class="close-button">
|
|
5
|
-
<!-- <svg width="24" height="24" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
6
|
-
<path class="close-btn-svg-path" d="M1 1L5 5M1 5L5 1" stroke-width="1" stroke-linecap="round"
|
|
7
|
-
stroke-linejoin="round" />
|
|
8
|
-
</svg> -->
|
|
9
6
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
10
7
|
<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" />
|
|
11
8
|
<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"/>
|
|
@@ -21,6 +18,9 @@
|
|
|
21
18
|
<div class="arrow-icon"></div>
|
|
22
19
|
</div>
|
|
23
20
|
</div>
|
|
21
|
+
<div class="middle-divider">
|
|
22
|
+
<!-- middle line between input box and list (hidden by default but user may need it sometimes) -->
|
|
23
|
+
</div>
|
|
24
24
|
<div class="select-list-wrapper">
|
|
25
25
|
<div class="select-list" tabindex="-1">
|
|
26
26
|
|
package/lib/JBSelect.scss
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
@import "../../../common/scss/Medias.scss";
|
|
2
|
-
|
|
2
|
+
:host{
|
|
3
|
+
//define private variable here
|
|
4
|
+
--p-middle-div-height: var(--jb-select-middle-div-height, 0px);
|
|
5
|
+
--p-p-color:#1e2832;
|
|
6
|
+
}
|
|
3
7
|
.jb-select-web-component {
|
|
4
8
|
width: var(--jb-select-width, 100%);
|
|
5
9
|
margin: var(--jb-select-margin, 12px 0);
|
|
@@ -16,6 +20,38 @@
|
|
|
16
20
|
margin: 0;
|
|
17
21
|
padding: 16px 8px;
|
|
18
22
|
z-index: 900;
|
|
23
|
+
|
|
24
|
+
}
|
|
25
|
+
.select-box{
|
|
26
|
+
@include mobile-tablet {
|
|
27
|
+
height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));
|
|
28
|
+
background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);
|
|
29
|
+
//
|
|
30
|
+
border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));
|
|
31
|
+
border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6) );
|
|
32
|
+
border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px)));
|
|
33
|
+
border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));
|
|
34
|
+
border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px));
|
|
35
|
+
}
|
|
36
|
+
.front-box{
|
|
37
|
+
.arrow-icon{
|
|
38
|
+
@include mobile-tablet {
|
|
39
|
+
display: none;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
.selected-value-wrapper{
|
|
44
|
+
@include mobile-tablet {
|
|
45
|
+
opacity: 0;
|
|
46
|
+
transition: none;
|
|
47
|
+
}
|
|
48
|
+
.selected-value{
|
|
49
|
+
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
.middle-divider{
|
|
54
|
+
display: block;
|
|
19
55
|
}
|
|
20
56
|
.select-list-wrapper {
|
|
21
57
|
@include mobile-tablet {
|
|
@@ -95,19 +131,13 @@
|
|
|
95
131
|
gap: 8px;
|
|
96
132
|
position: relative;
|
|
97
133
|
&:focus-within {
|
|
98
|
-
border-color: var(--jb-select-border-color,
|
|
99
|
-
border-bottom-color: var(--jb-select-border-color,
|
|
134
|
+
border-color: var(--jb-select-border-color, var(--p-p-color));
|
|
135
|
+
border-bottom-color: var(--jb-select-border-color, var(--p-p-color));
|
|
100
136
|
border-radius: var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px) 0 0;
|
|
101
137
|
@include mobile-tablet {
|
|
102
|
-
border-radius: var(--jb-select-border-radius, 16px);
|
|
103
|
-
border-bottom-color: var(--jb-select-border-color, #1e2832);
|
|
104
|
-
height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));
|
|
105
|
-
background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);
|
|
106
|
-
//
|
|
107
|
-
border: solid var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px)) var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6) );
|
|
108
|
-
border-bottom:solid var(--jb-select-mobile-search-border-bottom-width, var(--jb-select-border-bottom-width, 3px)) var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, #f7f6f6) );
|
|
109
|
-
border-radius: var(--jb-select-mobile-search-border-radius, 16px);
|
|
138
|
+
border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px));
|
|
110
139
|
}
|
|
140
|
+
|
|
111
141
|
}
|
|
112
142
|
.selected-value-wrapper {
|
|
113
143
|
position: absolute;
|
|
@@ -138,10 +168,7 @@
|
|
|
138
168
|
&:focus-within .selected-value {
|
|
139
169
|
opacity: 0.7;
|
|
140
170
|
transition: all 0.3s ease;
|
|
141
|
-
|
|
142
|
-
opacity: 0;
|
|
143
|
-
transition: none;
|
|
144
|
-
}
|
|
171
|
+
|
|
145
172
|
}
|
|
146
173
|
.front-box {
|
|
147
174
|
position: absolute;
|
|
@@ -184,6 +211,14 @@
|
|
|
184
211
|
}
|
|
185
212
|
}
|
|
186
213
|
}
|
|
214
|
+
.middle-divider{
|
|
215
|
+
display: none;
|
|
216
|
+
width: 100%;
|
|
217
|
+
height: var(--p-middle-div-height);
|
|
218
|
+
background-color: var(--jb-select-middle-div-color, var(--p-p-color));
|
|
219
|
+
margin: var(--jb-select-middle-div-margin, 0);
|
|
220
|
+
border-radius: var(--jb-select-middle-div-radius, 0px);
|
|
221
|
+
}
|
|
187
222
|
.message-box {
|
|
188
223
|
font-size: var(--jb-select-message-font-size, 0.7em);
|
|
189
224
|
font-weight: var(--jb-select-message-font-weight, normal);
|
|
@@ -205,9 +240,9 @@
|
|
|
205
240
|
width: 100%;
|
|
206
241
|
background-color: var(--jb-select-bgcolor, #f7f6f6);
|
|
207
242
|
border-radius: 0 0 var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px);
|
|
208
|
-
border: solid 1px var(--jb-select-border-color,
|
|
243
|
+
border: solid 1px var(--jb-select-border-color, var(--p-p-color));
|
|
209
244
|
border-top: none;
|
|
210
|
-
border-bottom: solid 3px var(--jb-select-border-color,
|
|
245
|
+
border-bottom: solid 3px var(--jb-select-border-color, var(--p-p-color));
|
|
211
246
|
box-shadow: var(--jb-select-list-box-shadow);
|
|
212
247
|
box-sizing: border-box;
|
|
213
248
|
z-index: 999;
|