jb-select 4.1.5 → 4.2.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/dist/JBSelect.js +2 -2
- package/dist/JBSelect.umd.js +2 -2
- package/lib/JBSelect.html +5 -1
- package/lib/JBSelect.scss +7 -12
- package/package.json +1 -1
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=\"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\"
|
|
29
|
+
var HTML = "<div class=\"jb-select-web-component\">\r\n <div class=\"label-wrapper\">\r\n <label class=\"--hide\"><span class=\"label-value\"></span></label>\r\n <!-- close button will be visible on mobile modal -->\r\n <div class=\"close-button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path class=\"close-btn-svg-bg\" opacity=\"0.4\" d=\"M16.3399 1.9998H7.66988C4.27988 1.9998 1.99988 4.3798 1.99988 7.9198V16.0898C1.99988 19.6198 4.27988 21.9998 7.66988 21.9998H16.3399C19.7299 21.9998 21.9999 19.6198 21.9999 16.0898V7.9198C21.9999 4.3798 19.7299 1.9998 16.3399 1.9998Z\"/>\r\n <path class=\"close-btn-svg-path\" d=\"M15.0156 13.7703L13.2366 11.9923L15.0146 10.2143C15.3566 9.8733 15.3566 9.3183 15.0146 8.9773C14.6726 8.6333 14.1196 8.6343 13.7776 8.9763L11.9986 10.7543L10.2196 8.9743C9.87758 8.6323 9.32358 8.6343 8.98158 8.9743C8.64058 9.3163 8.64058 9.8713 8.98158 10.2123L10.7616 11.9923L8.98558 13.7673C8.64358 14.1093 8.64358 14.6643 8.98558 15.0043C9.15658 15.1763 9.37958 15.2613 9.60358 15.2613C9.82858 15.2613 10.0516 15.1763 10.2226 15.0053L11.9986 13.2293L13.7786 15.0083C13.9496 15.1793 14.1726 15.2643 14.3966 15.2643C14.6206 15.2643 14.8446 15.1783 15.0156 15.0083C15.3576 14.6663 15.3576 14.1123 15.0156 13.7703Z\" fill=\"#200E32\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"select-box\">\r\n <div class=\"selected-value-wrapper\">\r\n\r\n </div>\r\n <div class=\"front-box\">\r\n <input class=\"input\">\r\n <div class=\"arrow-icon\">\r\n <slot name=\"select-arrow-icon\">\r\n <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>\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, 12px 0);\n position: relative;\n box-sizing: border-box; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused {\n position: absolute;\n top: 0;\n left: 0;\n background-color: var(--jb-select-overlay-bgcolor, #0008);\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 16px 8px;\n z-index: var(--p-mobile-modal-z-index); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box {\n height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));\n border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));\n border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));\n border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .front-box .arrow-icon {\n display: none; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .selected-value-wrapper {\n opacity: 0;\n transition: none; } }\n .jb-select-web-component.--focused .middle-divider {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .middle-divider {\n margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-list-wrapper {\n position: initial;\n margin: var(--jb-select-mobile-item-list-margin, 16px 0);\n border-radius: var(--jb-select-border-radius, 16px); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper {\n display: flex; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper label {\n color: #fff;\n font-size: 1.5em;\n display: flex;\n align-items: center; } }\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: flex;\n width: 48px;\n height: 48px;\n justify-content: center;\n align-items: center;\n color: #fff; }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg {\n opacity: var(--jb-select-close-bg-opacity, 0.4);\n fill: var(--jb-select-close-bg-color, #1f1735); }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path {\n fill: var(--jb-select-close-x-color, #fff); } }\n .jb-select-web-component.--has-value .select-box {\n border-color: var(--jb-select-border-color-selected, #c3ff14);\n background-color: var(--jb-select-bgcolor-selected, #f7f6f6); }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--has-value .select-box:focus-within {\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6); } }\n .jb-select-web-component .label-wrapper label {\n width: 100%;\n margin: 4px 0px;\n display: block;\n font-size: var(--jb-select-label-font-size, 0.8em);\n font-weight: var(--jb-select-label-font-weight, normal);\n color: var(--jb-select-label-color, #1f1735); }\n .jb-select-web-component .label-wrapper label.--hide {\n display: none; }\n .jb-select-web-component .label-wrapper .close-button {\n display: none; }\n .jb-select-web-component .select-box {\n width: 100%;\n box-sizing: border-box;\n height: var(--jb-select-height, 40px);\n border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);\n border-radius: var(--jb-select-border-radius, 16px);\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n margin: 4px 0px 0px 0px;\n overflow: hidden;\n display: flex;\n justify-content: space-between;\n padding-inline-end: 16px;\n gap: 8px;\n position: relative; }\n .jb-select-web-component .select-box:focus-within {\n border-color: var(--jb-select-border-color, var(--p-p-color));\n border-bottom-color: var(--jb-select-border-color, var(--p-p-color));\n border-radius: var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px) 0 0; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component .select-box:focus-within {\n border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\n .jb-select-web-component .select-box .selected-value-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n z-index: 1; }\n .jb-select-web-component .select-box .selected-value-wrapper.--search-typed {\n opacity: 0; }\n .jb-select-web-component .select-box .selected-value-wrapper .selected-value {\n width: 100%;\n box-sizing: border-box;\n height: 100%;\n background-color: transparent;\n padding: 2px 12px 0 12px;\n display: block;\n font-family: inherit;\n font-size: 1.1em;\n color: var(--jb-select-selected-value-color, #1f1735);\n margin: 0;\n border-radius: 0;\n display: flex;\n align-items: center; }\n .jb-select-web-component .select-box:focus-within .selected-value {\n opacity: 0.7;\n transition: all 0.3s ease; }\n .jb-select-web-component .select-box .front-box {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n z-index: 2; }\n .jb-select-web-component .select-box .front-box input {\n border: none;\n width: 100%;\n box-sizing: border-box;\n height: 100%;\n background-color: transparent;\n padding: 2px 12px 0 12px;\n display: block;\n font-family: inherit;\n font-size: 1.1em;\n color: var(--jb-select-input-color, #1f1735);\n margin: 0;\n border-radius: 0; }\n .jb-select-web-component .select-box .front-box input:focus {\n outline: none; }\n .jb-select-web-component .select-box .front-box input::placeholder {\n color: var(--jb-select-placeholder-color, initial);\n font-size: var(--jb-select-placeholder-font-size, 1.1em); }\n .jb-select-web-component .select-box .front-box .arrow-icon {\n width: 8px;\n height: 100%;\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 494.1 371.1' style='enable-background:new 0 0 494.1 371.1;' xml:space='preserve'><path d='M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2 c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z'/></svg>\");\n background-repeat: no-repeat;\n background-position-x: 0;\n background-position-y: center; }\n .jb-select-web-component .middle-divider {\n display: none;\n position: relative;\n z-index: calc(var(--p-base-z-index) + 2);\n width: 100%;\n height: var(--p-middle-div-height);\n background-color: var(--jb-select-middle-div-color, var(--p-p-color));\n margin: var(--jb-select-middle-div-margin, calc(-1 * var(--p-border-bottom-width)) 0);\n border-radius: var(--jb-select-middle-div-radius, 0px); }\n .jb-select-web-component .message-box {\n font-size: var(--jb-select-message-font-size, 0.7em);\n font-weight: var(--jb-select-message-font-weight, normal);\n padding: 4px 8px;\n color: var(--jb-select-message-color, #929292); }\n .jb-select-web-component .message-box:empty {\n padding: 0; }\n .jb-select-web-component .message-box.--error {\n color: red; }\n .jb-select-web-component .select-list-wrapper {\n display: none;\n position: absolute;\n margin: calc(-1 * var(--p-border-bottom-width)) 0;\n height: auto;\n overflow: hidden;\n width: 100%;\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n border-radius: 0 0 var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px);\n border: solid 1px var(--jb-select-border-color, var(--p-p-color));\n border-top: none;\n border-bottom: solid 3px var(--jb-select-border-color, var(--p-p-color));\n box-shadow: var(--jb-select-list-box-shadow);\n box-sizing: border-box;\n z-index: calc(var(--p-base-z-index) + 1); }\n .jb-select-web-component .select-list-wrapper.--show {\n display: block; }\n .jb-select-web-component .select-list-wrapper .select-list {\n width: 100%;\n max-height: var(--jb-select-list-max-height, 400px);\n overflow-y: auto;\n padding: var(--jb-select-list-padding, 16px 0); }\n .jb-select-web-component .select-list-wrapper .select-list:empty {\n padding: 0; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component .select-list-wrapper .select-list {\n max-height: calc(100vh - 240px); } }\n .jb-select-web-component .select-list-wrapper .select-list .select-option {\n min-height: 36px;\n padding: 4px 16px;\n display: flex;\n align-items: center;\n font-size: 0.9em;\n color: var(--jb-select-option-color, inherit);\n background-color: var(--jb-select-option-background-color, transparent); }\n .jb-select-web-component .select-list-wrapper .select-list .select-option:hover {\n background-color: var(--jb-select-option-background-color-hover, #1073db);\n color: var(--jb-select-option-color-hover, #fff);\n cursor: pointer; }\n .jb-select-web-component .select-list-wrapper .select-list .select-option.--selected-option {\n font-weight: 900; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder {\n display: none;\n text-align: center;\n color: #838383;\n font-style: italic;\n padding: 8px 0; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder.--show {\n display: block; }\n";
|
|
31
|
+
var css_248z = ":host {\n --p-middle-div-height: var(--jb-select-middle-div-height, 0px);\n --p-p-color: #1e2832;\n --p-border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));\n --p-base-z-index: 1;\n --p-mobile-modal-z-index: 900; }\n\n.jb-select-web-component {\n width: var(--jb-select-width, 100%);\n margin: var(--jb-select-margin, 12px 0);\n position: relative;\n box-sizing: border-box; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused {\n position: absolute;\n top: 0;\n left: 0;\n background-color: var(--jb-select-overlay-bgcolor, #0008);\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 16px 8px;\n z-index: var(--p-mobile-modal-z-index); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box {\n height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));\n border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));\n border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));\n border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .front-box .arrow-icon {\n display: none; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .selected-value-wrapper {\n opacity: 0;\n transition: none; } }\n .jb-select-web-component.--focused .middle-divider {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .middle-divider {\n margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-list-wrapper {\n position: initial;\n margin: var(--jb-select-mobile-item-list-margin, 16px 0);\n border-radius: var(--jb-select-border-radius, 16px); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper {\n display: flex; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper label {\n color: #fff;\n font-size: 1.5em;\n display: flex;\n align-items: center; } }\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: flex;\n width: 48px;\n height: 48px;\n justify-content: center;\n align-items: center;\n color: #fff; }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg {\n opacity: var(--jb-select-close-bg-opacity, 0.4);\n fill: var(--jb-select-close-bg-color, #1f1735); }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path {\n fill: var(--jb-select-close-x-color, #fff); } }\n .jb-select-web-component.--has-value .select-box {\n border-color: var(--jb-select-border-color-selected, #c3ff14);\n background-color: var(--jb-select-bgcolor-selected, #f7f6f6); }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--has-value .select-box:focus-within {\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6); } }\n .jb-select-web-component .label-wrapper label {\n width: 100%;\n margin: 4px 0px;\n display: block;\n font-size: var(--jb-select-label-font-size, 0.8em);\n font-weight: var(--jb-select-label-font-weight, normal);\n color: var(--jb-select-label-color, #1f1735); }\n .jb-select-web-component .label-wrapper label.--hide {\n display: none; }\n .jb-select-web-component .label-wrapper .close-button {\n display: none; }\n .jb-select-web-component .select-box {\n width: 100%;\n box-sizing: border-box;\n height: var(--jb-select-height, 40px);\n border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);\n border-radius: var(--jb-select-border-radius, 16px);\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n margin: 4px 0px 0px 0px;\n overflow: hidden;\n display: flex;\n justify-content: space-between;\n padding-inline-end: 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: 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 .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=\"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\"
|
|
35
|
+
var HTML = "<div class=\"jb-select-web-component\">\r\n <div class=\"label-wrapper\">\r\n <label class=\"--hide\"><span class=\"label-value\"></span></label>\r\n <!-- close button will be visible on mobile modal -->\r\n <div class=\"close-button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path class=\"close-btn-svg-bg\" opacity=\"0.4\" d=\"M16.3399 1.9998H7.66988C4.27988 1.9998 1.99988 4.3798 1.99988 7.9198V16.0898C1.99988 19.6198 4.27988 21.9998 7.66988 21.9998H16.3399C19.7299 21.9998 21.9999 19.6198 21.9999 16.0898V7.9198C21.9999 4.3798 19.7299 1.9998 16.3399 1.9998Z\"/>\r\n <path class=\"close-btn-svg-path\" d=\"M15.0156 13.7703L13.2366 11.9923L15.0146 10.2143C15.3566 9.8733 15.3566 9.3183 15.0146 8.9773C14.6726 8.6333 14.1196 8.6343 13.7776 8.9763L11.9986 10.7543L10.2196 8.9743C9.87758 8.6323 9.32358 8.6343 8.98158 8.9743C8.64058 9.3163 8.64058 9.8713 8.98158 10.2123L10.7616 11.9923L8.98558 13.7673C8.64358 14.1093 8.64358 14.6643 8.98558 15.0043C9.15658 15.1763 9.37958 15.2613 9.60358 15.2613C9.82858 15.2613 10.0516 15.1763 10.2226 15.0053L11.9986 13.2293L13.7786 15.0083C13.9496 15.1793 14.1726 15.2643 14.3966 15.2643C14.6206 15.2643 14.8446 15.1783 15.0156 15.0083C15.3576 14.6663 15.3576 14.1123 15.0156 13.7703Z\" fill=\"#200E32\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"select-box\">\r\n <div class=\"selected-value-wrapper\">\r\n\r\n </div>\r\n <div class=\"front-box\">\r\n <input class=\"input\">\r\n <div class=\"arrow-icon\">\r\n <slot name=\"select-arrow-icon\">\r\n <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>\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, 12px 0);\n position: relative;\n box-sizing: border-box; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused {\n position: absolute;\n top: 0;\n left: 0;\n background-color: var(--jb-select-overlay-bgcolor, #0008);\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 16px 8px;\n z-index: var(--p-mobile-modal-z-index); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box {\n height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));\n border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));\n border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));\n border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .front-box .arrow-icon {\n display: none; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .selected-value-wrapper {\n opacity: 0;\n transition: none; } }\n .jb-select-web-component.--focused .middle-divider {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .middle-divider {\n margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-list-wrapper {\n position: initial;\n margin: var(--jb-select-mobile-item-list-margin, 16px 0);\n border-radius: var(--jb-select-border-radius, 16px); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper {\n display: flex; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper label {\n color: #fff;\n font-size: 1.5em;\n display: flex;\n align-items: center; } }\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: flex;\n width: 48px;\n height: 48px;\n justify-content: center;\n align-items: center;\n color: #fff; }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg {\n opacity: var(--jb-select-close-bg-opacity, 0.4);\n fill: var(--jb-select-close-bg-color, #1f1735); }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path {\n fill: var(--jb-select-close-x-color, #fff); } }\n .jb-select-web-component.--has-value .select-box {\n border-color: var(--jb-select-border-color-selected, #c3ff14);\n background-color: var(--jb-select-bgcolor-selected, #f7f6f6); }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--has-value .select-box:focus-within {\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6); } }\n .jb-select-web-component .label-wrapper label {\n width: 100%;\n margin: 4px 0px;\n display: block;\n font-size: var(--jb-select-label-font-size, 0.8em);\n font-weight: var(--jb-select-label-font-weight, normal);\n color: var(--jb-select-label-color, #1f1735); }\n .jb-select-web-component .label-wrapper label.--hide {\n display: none; }\n .jb-select-web-component .label-wrapper .close-button {\n display: none; }\n .jb-select-web-component .select-box {\n width: 100%;\n box-sizing: border-box;\n height: var(--jb-select-height, 40px);\n border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);\n border-radius: var(--jb-select-border-radius, 16px);\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n margin: 4px 0px 0px 0px;\n overflow: hidden;\n display: flex;\n justify-content: space-between;\n padding-inline-end: 16px;\n gap: 8px;\n position: relative; }\n .jb-select-web-component .select-box:focus-within {\n border-color: var(--jb-select-border-color, var(--p-p-color));\n border-bottom-color: var(--jb-select-border-color, var(--p-p-color));\n border-radius: var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px) 0 0; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component .select-box:focus-within {\n border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\n .jb-select-web-component .select-box .selected-value-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n z-index: 1; }\n .jb-select-web-component .select-box .selected-value-wrapper.--search-typed {\n opacity: 0; }\n .jb-select-web-component .select-box .selected-value-wrapper .selected-value {\n width: 100%;\n box-sizing: border-box;\n height: 100%;\n background-color: transparent;\n padding: 2px 12px 0 12px;\n display: block;\n font-family: inherit;\n font-size: 1.1em;\n color: var(--jb-select-selected-value-color, #1f1735);\n margin: 0;\n border-radius: 0;\n display: flex;\n align-items: center; }\n .jb-select-web-component .select-box:focus-within .selected-value {\n opacity: 0.7;\n transition: all 0.3s ease; }\n .jb-select-web-component .select-box .front-box {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n z-index: 2; }\n .jb-select-web-component .select-box .front-box input {\n border: none;\n width: 100%;\n box-sizing: border-box;\n height: 100%;\n background-color: transparent;\n padding: 2px 12px 0 12px;\n display: block;\n font-family: inherit;\n font-size: 1.1em;\n color: var(--jb-select-input-color, #1f1735);\n margin: 0;\n border-radius: 0; }\n .jb-select-web-component .select-box .front-box input:focus {\n outline: none; }\n .jb-select-web-component .select-box .front-box input::placeholder {\n color: var(--jb-select-placeholder-color, initial);\n font-size: var(--jb-select-placeholder-font-size, 1.1em); }\n .jb-select-web-component .select-box .front-box .arrow-icon {\n width: 8px;\n height: 100%;\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 494.1 371.1' style='enable-background:new 0 0 494.1 371.1;' xml:space='preserve'><path d='M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2 c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z'/></svg>\");\n background-repeat: no-repeat;\n background-position-x: 0;\n background-position-y: center; }\n .jb-select-web-component .middle-divider {\n display: none;\n position: relative;\n z-index: calc(var(--p-base-z-index) + 2);\n width: 100%;\n height: var(--p-middle-div-height);\n background-color: var(--jb-select-middle-div-color, var(--p-p-color));\n margin: var(--jb-select-middle-div-margin, calc(-1 * var(--p-border-bottom-width)) 0);\n border-radius: var(--jb-select-middle-div-radius, 0px); }\n .jb-select-web-component .message-box {\n font-size: var(--jb-select-message-font-size, 0.7em);\n font-weight: var(--jb-select-message-font-weight, normal);\n padding: 4px 8px;\n color: var(--jb-select-message-color, #929292); }\n .jb-select-web-component .message-box:empty {\n padding: 0; }\n .jb-select-web-component .message-box.--error {\n color: red; }\n .jb-select-web-component .select-list-wrapper {\n display: none;\n position: absolute;\n margin: calc(-1 * var(--p-border-bottom-width)) 0;\n height: auto;\n overflow: hidden;\n width: 100%;\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n border-radius: 0 0 var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px);\n border: solid 1px var(--jb-select-border-color, var(--p-p-color));\n border-top: none;\n border-bottom: solid 3px var(--jb-select-border-color, var(--p-p-color));\n box-shadow: var(--jb-select-list-box-shadow);\n box-sizing: border-box;\n z-index: calc(var(--p-base-z-index) + 1); }\n .jb-select-web-component .select-list-wrapper.--show {\n display: block; }\n .jb-select-web-component .select-list-wrapper .select-list {\n width: 100%;\n max-height: var(--jb-select-list-max-height, 400px);\n overflow-y: auto;\n padding: var(--jb-select-list-padding, 16px 0); }\n .jb-select-web-component .select-list-wrapper .select-list:empty {\n padding: 0; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component .select-list-wrapper .select-list {\n max-height: calc(100vh - 240px); } }\n .jb-select-web-component .select-list-wrapper .select-list .select-option {\n min-height: 36px;\n padding: 4px 16px;\n display: flex;\n align-items: center;\n font-size: 0.9em;\n color: var(--jb-select-option-color, inherit);\n background-color: var(--jb-select-option-background-color, transparent); }\n .jb-select-web-component .select-list-wrapper .select-list .select-option:hover {\n background-color: var(--jb-select-option-background-color-hover, #1073db);\n color: var(--jb-select-option-color-hover, #fff);\n cursor: pointer; }\n .jb-select-web-component .select-list-wrapper .select-list .select-option.--selected-option {\n font-weight: 900; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder {\n display: none;\n text-align: center;\n color: #838383;\n font-style: italic;\n padding: 8px 0; }\n .jb-select-web-component .select-list-wrapper .empty-list-placeholder.--show {\n display: block; }\n";
|
|
37
|
+
var css_248z = ":host {\n --p-middle-div-height: var(--jb-select-middle-div-height, 0px);\n --p-p-color: #1e2832;\n --p-border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));\n --p-base-z-index: 1;\n --p-mobile-modal-z-index: 900; }\n\n.jb-select-web-component {\n width: var(--jb-select-width, 100%);\n margin: var(--jb-select-margin, 12px 0);\n position: relative;\n box-sizing: border-box; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused {\n position: absolute;\n top: 0;\n left: 0;\n background-color: var(--jb-select-overlay-bgcolor, #0008);\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 16px 8px;\n z-index: var(--p-mobile-modal-z-index); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box {\n height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));\n border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));\n border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));\n border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px)); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .front-box .arrow-icon {\n display: none; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-box .selected-value-wrapper {\n opacity: 0;\n transition: none; } }\n .jb-select-web-component.--focused .middle-divider {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .middle-divider {\n margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .select-list-wrapper {\n position: initial;\n margin: var(--jb-select-mobile-item-list-margin, 16px 0);\n border-radius: var(--jb-select-border-radius, 16px); } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper {\n display: flex; } }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper label {\n color: #fff;\n font-size: 1.5em;\n display: flex;\n align-items: center; } }\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--focused .label-wrapper .close-button {\n display: flex;\n width: 48px;\n height: 48px;\n justify-content: center;\n align-items: center;\n color: #fff; }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg {\n opacity: var(--jb-select-close-bg-opacity, 0.4);\n fill: var(--jb-select-close-bg-color, #1f1735); }\n .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path {\n fill: var(--jb-select-close-x-color, #fff); } }\n .jb-select-web-component.--has-value .select-box {\n border-color: var(--jb-select-border-color-selected, #c3ff14);\n background-color: var(--jb-select-bgcolor-selected, #f7f6f6); }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-select-web-component.--has-value .select-box:focus-within {\n background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6); } }\n .jb-select-web-component .label-wrapper label {\n width: 100%;\n margin: 4px 0px;\n display: block;\n font-size: var(--jb-select-label-font-size, 0.8em);\n font-weight: var(--jb-select-label-font-weight, normal);\n color: var(--jb-select-label-color, #1f1735); }\n .jb-select-web-component .label-wrapper label.--hide {\n display: none; }\n .jb-select-web-component .label-wrapper .close-button {\n display: none; }\n .jb-select-web-component .select-box {\n width: 100%;\n box-sizing: border-box;\n height: var(--jb-select-height, 40px);\n border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);\n border-radius: var(--jb-select-border-radius, 16px);\n background-color: var(--jb-select-bgcolor, #f7f6f6);\n margin: 4px 0px 0px 0px;\n overflow: hidden;\n display: flex;\n justify-content: space-between;\n padding-inline-end: 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: 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 .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
|
@@ -15,7 +15,11 @@
|
|
|
15
15
|
</div>
|
|
16
16
|
<div class="front-box">
|
|
17
17
|
<input class="input" />
|
|
18
|
-
<div class="arrow-icon"
|
|
18
|
+
<div class="arrow-icon">
|
|
19
|
+
<slot name="select-arrow-icon">
|
|
20
|
+
<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>
|
|
21
|
+
</slot>
|
|
22
|
+
</div>
|
|
19
23
|
</div>
|
|
20
24
|
</div>
|
|
21
25
|
<div class="middle-divider">
|
package/lib/JBSelect.scss
CHANGED
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
overflow: hidden;
|
|
159
159
|
display: flex;
|
|
160
160
|
justify-content: space-between;
|
|
161
|
-
padding-inline-end: 16px;
|
|
161
|
+
padding-inline-end: var(--jb-select-box-padding-end,16px);
|
|
162
162
|
gap: 8px;
|
|
163
163
|
position: relative;
|
|
164
164
|
|
|
@@ -209,13 +209,17 @@
|
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
.front-box {
|
|
212
|
-
position: absolute;
|
|
213
212
|
width: 100%;
|
|
214
213
|
height: 100%;
|
|
215
214
|
border-radius: inherit;
|
|
216
215
|
overflow: hidden;
|
|
217
216
|
z-index: 2;
|
|
218
217
|
|
|
218
|
+
display: grid;
|
|
219
|
+
grid-template-columns: 1fr auto;
|
|
220
|
+
justify-content: center;
|
|
221
|
+
align-items: center;
|
|
222
|
+
|
|
219
223
|
input {
|
|
220
224
|
border: none;
|
|
221
225
|
width: 100%;
|
|
@@ -241,16 +245,7 @@
|
|
|
241
245
|
}
|
|
242
246
|
|
|
243
247
|
.arrow-icon {
|
|
244
|
-
|
|
245
|
-
height: 100%;
|
|
246
|
-
// position: absolute;
|
|
247
|
-
// top:0;
|
|
248
|
-
// left: 8px;
|
|
249
|
-
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 494.1 371.1' style='enable-background:new 0 0 494.1 371.1;' xml:space='preserve'><path d='M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2 c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z'/></svg>");
|
|
250
|
-
// background-position: end;
|
|
251
|
-
background-repeat: no-repeat;
|
|
252
|
-
background-position-x: 0;
|
|
253
|
-
background-position-y: center;
|
|
248
|
+
margin: var(--jb-select-arrow-icon-margin,0 16px 0 0);
|
|
254
249
|
}
|
|
255
250
|
}
|
|
256
251
|
}
|