jb-select 4.5.4 → 4.7.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 +13 -0
- package/dist/JBSelect.js +2 -2
- package/dist/JBSelect.umd.js +2 -2
- package/lib/JBSelect.html +19 -6
- package/lib/JBSelect.scss +82 -71
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -88,6 +88,19 @@ like the example the below:
|
|
|
88
88
|
</div>
|
|
89
89
|
</jb-select>
|
|
90
90
|
```
|
|
91
|
+
### Add Icon or Any Element into box
|
|
92
|
+
sometimes you want to add icon into the select box before value box.
|
|
93
|
+
you can customize this entire section by adding a div or any other Tag with the `slot="start-section"`
|
|
94
|
+
|
|
95
|
+
like the example the below:
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<jb-select>
|
|
99
|
+
<div slot="start-section">
|
|
100
|
+
<img class="your-custom-icon" src="./path/to/file.svg">
|
|
101
|
+
</div>
|
|
102
|
+
</jb-select>
|
|
103
|
+
```
|
|
91
104
|
|
|
92
105
|
### callbacks
|
|
93
106
|
|
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 <!-- 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=\"
|
|
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=\"start-section\">\r\n <slot name=\"start-section\"></slot>\r\n </div>\r\n <div class=\"middle-section\">\r\n <div class=\"selected-value-wrapper\"></div>\r\n <div class=\"front-box\">\r\n <input class=\"input\">\r\n\r\n </div>\r\n </div>\r\n <div class=\"end-section\">\r\n <div class=\"arrow-icon\" tabindex=\"-1\">\r\n <slot name=\"select-arrow-icon\">\r\n <svg width=\"8\" height=\"8\" 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\">\r\n <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\"/>\r\n </svg>\r\n </slot>\r\n </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, 0 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: fixed;\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: var(--jb-select-select-box-margin, 4px 0px 0px 0px);\n overflow: hidden;\n display: flex;\n justify-content: space-between;\n padding-inline-end: var(--jb-select-box-padding-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: var(--jb-select-selected-value-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 width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n z-index: 2;\n display: grid;\n grid-template-columns: 1fr auto;\n justify-content: center;\n align-items: center; }\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 margin: var(--jb-select-arrow-icon-margin, 0 16px 0 0); }\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 .select-list::-webkit-scrollbar {\n width: 9px;\n background-color: transparent; }\n .jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar-thumb {\n background-color: var(--jb-select-list-scroll-color, #c3c3c3);\n border-radius: var(--jb-select-list-scroll-border-radius, 4px); }\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, 0 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: fixed;\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, 2.5rem);\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, 1rem);\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n margin: var(--jb-select-select-box-margin, 4px 0px 0px 0px);\n overflow: hidden;\n display: flex;\n padding-inline-end: var(--jb-select-box-padding-end, 1rem);\n gap: 0.5rem;\n align-items: center; }\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, 1rem) var(--jb-select-border-radius, 1rem) 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, 1rem)); } }\n .jb-select-web-component .select-box .start-section {\n height: 100%;\n width: auto;\n display: flex;\n justify-content: center;\n align-items: center; }\n .jb-select-web-component .select-box .middle-section {\n position: relative;\n width: 100%;\n height: 100%;\n flex: 1; }\n .jb-select-web-component .select-box .middle-section .selected-value-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n z-index: 1; }\n .jb-select-web-component .select-box .middle-section .selected-value-wrapper.--search-typed {\n opacity: 0; }\n .jb-select-web-component .select-box .middle-section .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: var(--jb-select-selected-value-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 .middle-section .front-box {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n z-index: 2; }\n .jb-select-web-component .select-box .middle-section .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: var(--jb-select-value-font-size, 1.1rem);\n color: var(--jb-select-input-color, #1f1735);\n margin: 0;\n border-radius: 0; }\n .jb-select-web-component .select-box .middle-section .front-box input:focus {\n outline: none; }\n .jb-select-web-component .select-box .middle-section .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 .end-section .arrow-icon {\n margin: var(--jb-select-arrow-icon-margin, 0 0 0 0); }\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 .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 .select-list::-webkit-scrollbar {\n width: 9px;\n background-color: transparent; }\n .jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar-thumb {\n background-color: var(--jb-select-list-scroll-color, #c3c3c3);\n border-radius: var(--jb-select-list-scroll-border-radius, 4px); }\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 <!-- 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=\"
|
|
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=\"start-section\">\r\n <slot name=\"start-section\"></slot>\r\n </div>\r\n <div class=\"middle-section\">\r\n <div class=\"selected-value-wrapper\"></div>\r\n <div class=\"front-box\">\r\n <input class=\"input\">\r\n\r\n </div>\r\n </div>\r\n <div class=\"end-section\">\r\n <div class=\"arrow-icon\" tabindex=\"-1\">\r\n <slot name=\"select-arrow-icon\">\r\n <svg width=\"8\" height=\"8\" 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\">\r\n <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\"/>\r\n </svg>\r\n </slot>\r\n </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, 0 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: fixed;\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: var(--jb-select-select-box-margin, 4px 0px 0px 0px);\n overflow: hidden;\n display: flex;\n justify-content: space-between;\n padding-inline-end: var(--jb-select-box-padding-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: var(--jb-select-selected-value-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 width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n z-index: 2;\n display: grid;\n grid-template-columns: 1fr auto;\n justify-content: center;\n align-items: center; }\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 margin: var(--jb-select-arrow-icon-margin, 0 16px 0 0); }\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 .select-list::-webkit-scrollbar {\n width: 9px;\n background-color: transparent; }\n .jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar-thumb {\n background-color: var(--jb-select-list-scroll-color, #c3c3c3);\n border-radius: var(--jb-select-list-scroll-border-radius, 4px); }\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, 0 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: fixed;\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, 2.5rem);\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, 1rem);\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n margin: var(--jb-select-select-box-margin, 4px 0px 0px 0px);\n overflow: hidden;\n display: flex;\n padding-inline-end: var(--jb-select-box-padding-end, 1rem);\n gap: 0.5rem;\n align-items: center; }\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, 1rem) var(--jb-select-border-radius, 1rem) 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, 1rem)); } }\n .jb-select-web-component .select-box .start-section {\n height: 100%;\n width: auto;\n display: flex;\n justify-content: center;\n align-items: center; }\n .jb-select-web-component .select-box .middle-section {\n position: relative;\n width: 100%;\n height: 100%;\n flex: 1; }\n .jb-select-web-component .select-box .middle-section .selected-value-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n z-index: 1; }\n .jb-select-web-component .select-box .middle-section .selected-value-wrapper.--search-typed {\n opacity: 0; }\n .jb-select-web-component .select-box .middle-section .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: var(--jb-select-selected-value-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 .middle-section .front-box {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n z-index: 2; }\n .jb-select-web-component .select-box .middle-section .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: var(--jb-select-value-font-size, 1.1rem);\n color: var(--jb-select-input-color, #1f1735);\n margin: 0;\n border-radius: 0; }\n .jb-select-web-component .select-box .middle-section .front-box input:focus {\n outline: none; }\n .jb-select-web-component .select-box .middle-section .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 .end-section .arrow-icon {\n margin: var(--jb-select-arrow-icon-margin, 0 0 0 0); }\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 .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 .select-list::-webkit-scrollbar {\n width: 9px;\n background-color: transparent; }\n .jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar-thumb {\n background-color: var(--jb-select-list-scroll-color, #c3c3c3);\n border-radius: var(--jb-select-list-scroll-border-radius, 4px); }\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
|
@@ -4,20 +4,33 @@
|
|
|
4
4
|
<!-- close button will be visible on mobile modal -->
|
|
5
5
|
<div class="close-button">
|
|
6
6
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
7
|
-
<path class="close-btn-svg-bg" opacity="0.4"
|
|
8
|
-
|
|
7
|
+
<path class="close-btn-svg-bg" opacity="0.4"
|
|
8
|
+
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" />
|
|
9
|
+
<path class="close-btn-svg-path"
|
|
10
|
+
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"
|
|
11
|
+
fill="#200E32" />
|
|
9
12
|
</svg>
|
|
10
13
|
</div>
|
|
11
14
|
</div>
|
|
12
15
|
<div class="select-box">
|
|
13
|
-
<div class="
|
|
16
|
+
<div class="start-section">
|
|
17
|
+
<slot name="start-section"></slot>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="middle-section">
|
|
20
|
+
<div class="selected-value-wrapper"></div>
|
|
21
|
+
<div class="front-box">
|
|
22
|
+
<input class="input" />
|
|
14
23
|
|
|
24
|
+
</div>
|
|
15
25
|
</div>
|
|
16
|
-
<div class="
|
|
17
|
-
<input class="input" />
|
|
26
|
+
<div class="end-section">
|
|
18
27
|
<div class="arrow-icon" tabindex="-1">
|
|
19
28
|
<slot name="select-arrow-icon">
|
|
20
|
-
<svg
|
|
29
|
+
<svg width='8' height='8' id='Layer_1' x='0px' y='0px' viewBox='0 0 494.1 371.1'
|
|
30
|
+
style='enable-background:new 0 0 494.1 371.1;' xml:space='preserve'>
|
|
31
|
+
<path
|
|
32
|
+
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' />
|
|
33
|
+
</svg>
|
|
21
34
|
</slot>
|
|
22
35
|
</div>
|
|
23
36
|
</div>
|
package/lib/JBSelect.scss
CHANGED
|
@@ -151,103 +151,114 @@
|
|
|
151
151
|
.select-box {
|
|
152
152
|
width: 100%;
|
|
153
153
|
box-sizing: border-box;
|
|
154
|
-
height: var(--jb-select-height,
|
|
154
|
+
height: var(--jb-select-height, 2.5rem);
|
|
155
155
|
border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);
|
|
156
156
|
border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);
|
|
157
|
-
border-radius: var(--jb-select-border-radius,
|
|
157
|
+
border-radius: var(--jb-select-border-radius, 1rem);
|
|
158
158
|
background-color: var(--jb-select-bgcolor, #f7f6f6);
|
|
159
159
|
margin:var(--jb-select-select-box-margin, 4px 0px 0px 0px);
|
|
160
160
|
overflow: hidden;
|
|
161
161
|
display: flex;
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
position: relative;
|
|
166
|
-
|
|
162
|
+
padding-inline-end: var(--jb-select-box-padding-end, 1rem);
|
|
163
|
+
gap: 0.5rem;
|
|
164
|
+
align-items: center;
|
|
167
165
|
&:focus-within {
|
|
168
166
|
border-color: var(--jb-select-border-color, var(--p-p-color));
|
|
169
167
|
border-bottom-color: var(--jb-select-border-color, var(--p-p-color));
|
|
170
|
-
border-radius: var(--jb-select-border-radius,
|
|
171
|
-
|
|
168
|
+
border-radius: var(--jb-select-border-radius, 1rem) var(--jb-select-border-radius, 1rem) 0 0;
|
|
172
169
|
@include mobile-tablet {
|
|
173
|
-
border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius,
|
|
170
|
+
border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 1rem));
|
|
174
171
|
}
|
|
175
172
|
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
173
|
+
.start-section{
|
|
174
|
+
height: 100%;
|
|
175
|
+
width: auto;
|
|
176
|
+
display: flex;
|
|
177
|
+
justify-content: center;
|
|
178
|
+
align-items: center;
|
|
179
|
+
}
|
|
180
|
+
.middle-section{
|
|
181
|
+
position: relative;
|
|
179
182
|
width: 100%;
|
|
180
183
|
height: 100%;
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
184
|
+
flex:1;
|
|
185
|
+
.selected-value-wrapper {
|
|
186
|
+
position: absolute;
|
|
187
|
+
top:0;
|
|
188
|
+
left: 0;
|
|
189
|
+
width: 100%;
|
|
190
|
+
height: 100%;
|
|
191
|
+
border-radius: inherit;
|
|
192
|
+
overflow: hidden;
|
|
193
|
+
z-index: 1;
|
|
194
|
+
|
|
195
|
+
&.--search-typed {
|
|
196
|
+
opacity: 0;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.selected-value {
|
|
200
|
+
width: 100%;
|
|
201
|
+
box-sizing: border-box;
|
|
202
|
+
height: 100%;
|
|
203
|
+
background-color: transparent;
|
|
204
|
+
padding: 2px 12px 0 12px;
|
|
205
|
+
display: block;
|
|
206
|
+
font-family: inherit;
|
|
207
|
+
font-size: var(--jb-select-selected-value-font-size, 1.1em);
|
|
208
|
+
color: var(--jb-select-selected-value-color, #1f1735);
|
|
209
|
+
margin: 0;
|
|
210
|
+
border-radius: 0;
|
|
211
|
+
display: flex;
|
|
212
|
+
align-items: center;
|
|
213
|
+
}
|
|
187
214
|
}
|
|
188
|
-
|
|
189
|
-
|
|
215
|
+
.front-box {
|
|
216
|
+
position: absolute;
|
|
217
|
+
top:0;
|
|
218
|
+
left: 0;
|
|
190
219
|
width: 100%;
|
|
191
|
-
box-sizing: border-box;
|
|
192
220
|
height: 100%;
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
221
|
+
border-radius: inherit;
|
|
222
|
+
overflow: hidden;
|
|
223
|
+
z-index: 2;
|
|
224
|
+
input {
|
|
225
|
+
border: none;
|
|
226
|
+
width: 100%;
|
|
227
|
+
box-sizing: border-box;
|
|
228
|
+
height: 100%;
|
|
229
|
+
background-color: transparent;
|
|
230
|
+
padding: 2px 12px 0 12px;
|
|
231
|
+
display: block;
|
|
232
|
+
font-family: inherit;
|
|
233
|
+
font-size: var(--jb-select-value-font-size,1.1rem);
|
|
234
|
+
color: var(--jb-select-input-color, #1f1735);
|
|
235
|
+
margin: 0;
|
|
236
|
+
border-radius: 0;
|
|
237
|
+
|
|
238
|
+
&:focus {
|
|
239
|
+
outline: none;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
&::placeholder {
|
|
243
|
+
color: var(--jb-select-placeholder-color, initial);
|
|
244
|
+
font-size: var(--jb-select-placeholder-font-size, 1.1em);
|
|
245
|
+
}
|
|
246
|
+
}
|
|
203
247
|
}
|
|
204
248
|
}
|
|
249
|
+
.end-section{
|
|
250
|
+
.arrow-icon {
|
|
251
|
+
margin: var(--jb-select-arrow-icon-margin, 0 0 0 0);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
205
255
|
|
|
206
256
|
&:focus-within .selected-value {
|
|
207
257
|
opacity: 0.7;
|
|
208
258
|
transition: all 0.3s ease;
|
|
209
259
|
}
|
|
210
260
|
|
|
211
|
-
.front-box {
|
|
212
|
-
width: 100%;
|
|
213
|
-
height: 100%;
|
|
214
|
-
border-radius: inherit;
|
|
215
|
-
overflow: hidden;
|
|
216
|
-
z-index: 2;
|
|
217
|
-
|
|
218
|
-
display: grid;
|
|
219
|
-
grid-template-columns: 1fr auto;
|
|
220
|
-
justify-content: center;
|
|
221
|
-
align-items: center;
|
|
222
|
-
|
|
223
|
-
input {
|
|
224
|
-
border: none;
|
|
225
|
-
width: 100%;
|
|
226
|
-
box-sizing: border-box;
|
|
227
|
-
height: 100%;
|
|
228
|
-
background-color: transparent;
|
|
229
|
-
padding: 2px 12px 0 12px;
|
|
230
|
-
display: block;
|
|
231
|
-
font-family: inherit;
|
|
232
|
-
font-size: 1.1em;
|
|
233
|
-
color: var(--jb-select-input-color, #1f1735);
|
|
234
|
-
margin: 0;
|
|
235
|
-
border-radius: 0;
|
|
236
|
-
|
|
237
|
-
&:focus {
|
|
238
|
-
outline: none;
|
|
239
|
-
}
|
|
240
261
|
|
|
241
|
-
&::placeholder {
|
|
242
|
-
color: var(--jb-select-placeholder-color, initial);
|
|
243
|
-
font-size: var(--jb-select-placeholder-font-size, 1.1em);
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
.arrow-icon {
|
|
248
|
-
margin: var(--jb-select-arrow-icon-margin, 0 16px 0 0);
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
262
|
}
|
|
252
263
|
|
|
253
264
|
.middle-divider {
|