jb-select 4.0.0 → 4.0.2
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 +9 -2
- package/dist/JBSelect.js +1 -1
- package/dist/JBSelect.umd.js +1 -1
- package/lib/JBSelect.scss +6 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -36,10 +36,11 @@ remember set value as attribute if your option is a plain string but in direct a
|
|
|
36
36
|
|
|
37
37
|
### placeholder
|
|
38
38
|
|
|
39
|
-
you can set placeholder when data is empty
|
|
39
|
+
you can set placeholder when data is empty.
|
|
40
|
+
`search-placeholder`work on mobile device when user focus on select and modal open this text will be placed in top search input box
|
|
40
41
|
|
|
41
42
|
```html
|
|
42
|
-
<jb-select placeholder="please select"></jb-select>
|
|
43
|
+
<jb-select placeholder="please select" search-placeholder="type to search"></jb-select>
|
|
43
44
|
```
|
|
44
45
|
|
|
45
46
|
### change empty state shape
|
|
@@ -136,4 +137,10 @@ if you want to set a custom style to this web-component all you need is to set c
|
|
|
136
137
|
| --jb-select-close-bg-color | close button bg-color default is `#1f1735` |
|
|
137
138
|
| --jb-select-close-x-color | close button x color default is `#fff` |
|
|
138
139
|
| --jb-select-close-bg-opacity | close button bg opacity default is `0.4` |
|
|
140
|
+
| --jb-select-mobile-input-bgcolor | background color search input when open in mobile |
|
|
141
|
+
| --jb-select-mobile-search-border-width | when user open select on mobile, search box can have its own border width config |
|
|
142
|
+
| --jb-select-mobile-search-border-color | when user open select on mobile, search box can have its own border color config |
|
|
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
|
+
| --jb-select-mobile-search-border-bottom-color | when user open select on mobile, search box can have its own border bottom color config |
|
|
145
|
+
| --jb-select-mobile-search-border-radius | when user open select on mobile, search box can have its own border radius |
|
|
139
146
|
|
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 <div class=\"close-button\">\r\n <!-- <svg width=\"24\" height=\"24\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path class=\"close-btn-svg-path\" d=\"M1 1L5 5M1 5L5 1\" stroke-width=\"1\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> -->\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=\"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
|
|
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";
|
|
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 <div class=\"close-button\">\r\n <!-- <svg width=\"24\" height=\"24\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path class=\"close-btn-svg-path\" d=\"M1 1L5 5M1 5L5 1\" stroke-width=\"1\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> -->\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=\"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
|
|
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";
|
|
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
|
@@ -84,9 +84,9 @@
|
|
|
84
84
|
box-sizing: border-box;
|
|
85
85
|
height: var(--jb-select-height, 40px);
|
|
86
86
|
border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);
|
|
87
|
-
background-color: var(--jb-select-bgcolor, #f7f6f6);
|
|
88
87
|
border-bottom: solid var(--jb-select-border-bottom-width, 3px) var(--jb-select-border-color, #f7f6f6);
|
|
89
88
|
border-radius: var(--jb-select-border-radius, 16px);
|
|
89
|
+
background-color: var(--jb-select-bgcolor, #f7f6f6);
|
|
90
90
|
margin: 4px 0px;
|
|
91
91
|
overflow: hidden;
|
|
92
92
|
display: flex;
|
|
@@ -102,6 +102,11 @@
|
|
|
102
102
|
border-radius: var(--jb-select-border-radius, 16px);
|
|
103
103
|
border-bottom-color: var(--jb-select-border-color, #1e2832);
|
|
104
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);
|
|
105
110
|
}
|
|
106
111
|
}
|
|
107
112
|
.selected-value-wrapper {
|