krl-alfred 1.76.23 → 1.76.25
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/components/AutocompleteInput/AutocompleteInput.styled.js +1 -1
- package/dist/components/ProductCard/ProductCard.styled.js +1 -1
- package/dist/components/ProductCard/layouts/Checklist.js +2 -2
- package/dist/components/SearchBox/SearchBox.js +52 -5
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/SearchBox/stories/SearchBox.stories.js +18 -0
- package/dist/components/SelectBox/SelectBox.styled.js +1 -1
- package/dist/jsons/productList.json +1410 -0
- package/package.json +1 -1
|
@@ -11,6 +11,6 @@ exports.DropdownInnerStyled = exports.DropdownStyled = exports.InputStyled = exp
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n .hiddenInput{\n opacity: 0;\n user-select: none;\n pointer-events: none;\n position: absolute;\n left: 0;\n width: 0;\n }\n .inputIcon {\n position: absolute;\n top: 50%;\n right: 24px;\n transform: translateY(-50%);\n cursor: pointer;\n div{\n display: block;\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n .hiddenInput{\n opacity: 0;\n user-select: none;\n pointer-events: none;\n position: absolute;\n left: 0;\n width: 0;\n }\n .inputIcon {\n position: absolute;\n top: 50%;\n right: 24px;\n transform: translateY(-50%);\n cursor: pointer;\n div{\n display: block;\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n"])), function (props) { return props.width || '370px'; });
|
|
13
13
|
exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: ", ";\n border: ", ";\n padding: ", ";\n color: ", ";\n font : var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n text-transform: uppercase;\n &::placeholder {\n color: ", ";\n text-transform: initial;\n }\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: ", ";\n border: ", ";\n padding: ", ";\n color: ", ";\n font : var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n text-transform: uppercase;\n &::placeholder {\n color: ", ";\n text-transform: initial;\n }\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.isShowDropdown ? '8px 8px 0 0' : '8px 8px 8px 8px'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
14
|
-
exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n max-height: ", ";\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n margin: 0;\n [data-simplebar] {\n height: auto !important;\n max-height: ", " !important;\n padding: 0 !important;\n }\n"], ["\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n max-height: ", ";\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n margin: 0;\n [data-simplebar] {\n height: auto !important;\n max-height: ", " !important;\n padding: 0 !important;\n }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; }, function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
|
|
14
|
+
exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n max-height: ", ";\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n margin: 0;\n [data-simplebar] {\n height: auto !important;\n max-height: ", " !important;\n padding: 0 !important;\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n"], ["\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n max-height: ", ";\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n margin: 0;\n [data-simplebar] {\n height: auto !important;\n max-height: ", " !important;\n padding: 0 !important;\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; }, function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
|
|
15
15
|
exports.DropdownInnerStyled = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n overflow: hidden;\n position: relative;\n > li {\n height: 51px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n font : var(--title-bold-16-19);\n &:not(.hasNoResult):hover{\n background-color: var(--dark-opacity-3);\n }\n &:is(.isSelected){\n background-color: var(--dark-opacity-3);\n }\n &.isFixedBottom{\n color: var(--dark-opacity-50);\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n }\n &.hasNoResult{\n cursor: initial;\n height: auto;\n }\n }\n"], ["\n padding: 0;\n margin: 0;\n overflow: hidden;\n position: relative;\n > li {\n height: 51px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n font : var(--title-bold-16-19);\n &:not(.hasNoResult):hover{\n background-color: var(--dark-opacity-3);\n }\n &:is(.isSelected){\n background-color: var(--dark-opacity-3);\n }\n &.isFixedBottom{\n color: var(--dark-opacity-50);\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n }\n &.hasNoResult{\n cursor: initial;\n height: auto;\n }\n }\n"])));
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.HorizontalSmStyled = exports.HorizontalStyled = exports.StandartStyled = exports.ChecklistStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: ", ";\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n &:is(.hidden){\n display: none;\n }\n .indicator{ \n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font:var(--title-semi-bold-16-19);\n }\n .productCardContent{ \n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n ", ";\n @media only screen and ", " {\n margin: 1rem auto 0 0;\n width: 100%;\n }\n }\n }\n"], ["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: ", ";\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n &:is(.hidden){\n display: none;\n }\n .indicator{ \n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font:var(--title-semi-bold-16-19);\n }\n .productCardContent{ \n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n ", ";\n @media only screen and ", " {\n margin: 1rem auto 0 0;\n width: 100%;\n }\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : ""; }, function (props) {
|
|
13
|
+
exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: ", ";\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n &:is(.hidden){\n display: none;\n }\n .indicator{ \n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font:var(--title-semi-bold-16-19);\n }\n .productCardContent{ \n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n ", ";\n @media only screen and ", " {\n margin: 1rem auto 0 0;\n width: 100%;\n }\n }\n }\n"], ["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: ", ";\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n &:is(.hidden){\n display: none;\n }\n .indicator{ \n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font:var(--title-semi-bold-16-19);\n }\n .productCardContent{ \n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n ", ";\n @media only screen and ", " {\n margin: 1rem auto 0 0;\n width: 100%;\n }\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : "\n cursor: pointer;\n *{\n cursor: pointer;\n }\n "; }, function (props) {
|
|
14
14
|
switch (props.size) {
|
|
15
15
|
case 'small':
|
|
16
16
|
return "24px 16px";
|
|
@@ -31,7 +31,7 @@ var Checkbox_1 = __importDefault(require("../../Checkbox"));
|
|
|
31
31
|
var react_device_detect_1 = require("react-device-detect");
|
|
32
32
|
var classnames_1 = __importDefault(require("classnames"));
|
|
33
33
|
var Checklist = function (props) {
|
|
34
|
-
var hasCheckbox = props.hasCheckbox, checked = props.checked, name = props.name, productCardOnChange = props.productCardOnChange, title = props.title, content = props.content, value = props.value, size = props.size, other = __rest(props, ["hasCheckbox", "checked", "name", "productCardOnChange", "title", "content", "value", "size"]);
|
|
35
|
-
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { size: size }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor:
|
|
34
|
+
var hasCheckbox = props.hasCheckbox, checked = props.checked, name = props.name, productCardOnChange = props.productCardOnChange, title = props.title, content = props.content, value = props.value, size = props.size, disabled = props.disabled, image = props.image, checkboxId = props.checkboxId, other = __rest(props, ["hasCheckbox", "checked", "name", "productCardOnChange", "title", "content", "value", "size", "disabled", "image", "checkboxId"]);
|
|
35
|
+
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { disabled: disabled, size: size }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: checkboxId, className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "small" ? "small" : react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled }) })), image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: checkboxId, className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardText" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: checkboxId, className: "productCardTitle" }, { children: props.title })) })), props.content && (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardContent" }, { children: props.content }))] })) })));
|
|
36
36
|
};
|
|
37
37
|
exports.default = Checklist;
|
|
@@ -19,14 +19,15 @@ var react_1 = require("react");
|
|
|
19
19
|
var SearchBox_styled_1 = require("./SearchBox.styled");
|
|
20
20
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
21
|
var Loader_1 = __importDefault(require("../Loader"));
|
|
22
|
+
var simplebar_react_1 = __importDefault(require("simplebar-react"));
|
|
22
23
|
var SearchBox = function (props) {
|
|
23
24
|
var _a;
|
|
24
|
-
var onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, children = props.children, isLoading = props.isLoading, showResultList = props.showResultList, placeholder = props.placeholder, value = props.value, onChange = props.onChange, onButtonClick = props.onButtonClick;
|
|
25
|
+
var onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, children = props.children, isLoading = props.isLoading, showResultList = props.showResultList, placeholder = props.placeholder, value = props.value, onChange = props.onChange, onButtonClick = props.onButtonClick;
|
|
25
26
|
var _b = (0, react_1.useState)("48px"), shadowHeight = _b[0], setShadowHeight = _b[1];
|
|
26
|
-
var LoadingContent = function () {
|
|
27
|
-
return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) });
|
|
28
|
-
};
|
|
27
|
+
var LoadingContent = function () { return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) }); };
|
|
29
28
|
var resultRef = (0, react_1.useRef)();
|
|
29
|
+
var simplebarRef = (0, react_1.useRef)(null);
|
|
30
|
+
var _c = (0, react_1.useState)(null), selectedIndex = _c[0], setSelectedIndex = _c[1];
|
|
30
31
|
(0, react_1.useEffect)(function () {
|
|
31
32
|
var _a, _b;
|
|
32
33
|
if (((_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) && showResultList) {
|
|
@@ -36,11 +37,57 @@ var SearchBox = function (props) {
|
|
|
36
37
|
setShadowHeight("48px");
|
|
37
38
|
}
|
|
38
39
|
}, [(_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, showResultList, isLoading, children]);
|
|
39
|
-
|
|
40
|
+
var handleKeyUp = function (e) {
|
|
41
|
+
e = e || window.event;
|
|
42
|
+
var charCode = e.keyCode || e.which;
|
|
43
|
+
if (![38, 40].includes(charCode)) {
|
|
44
|
+
onKeyUp(e);
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
e.preventDefault();
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
var handleKeyDown = function (e) {
|
|
51
|
+
var _a;
|
|
52
|
+
e = e || window.event;
|
|
53
|
+
var charCode = e.keyCode || e.which;
|
|
54
|
+
if ([38, 40].includes(charCode)) {
|
|
55
|
+
e.preventDefault();
|
|
56
|
+
// 38 up , 40 down
|
|
57
|
+
var list_1 = (_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".productCard");
|
|
58
|
+
if (list_1.length > 0) {
|
|
59
|
+
setSelectedIndex(function (prev) { return charCode === 38 ? prev === 0 ? 0 : prev - 1 : prev === list_1.length - 1 ? list_1.length - 1 : prev === null ? 0 : prev + 1; });
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
setSelectedIndex(null);
|
|
64
|
+
}
|
|
65
|
+
onKeyDown(e);
|
|
66
|
+
};
|
|
67
|
+
(0, react_1.useEffect)(function () {
|
|
68
|
+
var _a;
|
|
69
|
+
var list = (_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".productCard");
|
|
70
|
+
list === null || list === void 0 ? void 0 : list.forEach(function (el, index) {
|
|
71
|
+
var _a;
|
|
72
|
+
if (index === selectedIndex) {
|
|
73
|
+
el.classList.add("selected");
|
|
74
|
+
(_a = simplebarRef.current.el.querySelector('.simplebar-content-wrapper')) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
75
|
+
top: el.offsetHeight * (index),
|
|
76
|
+
left: 0,
|
|
77
|
+
behavior: 'smooth'
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
el.classList.remove("selected");
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
}, [selectedIndex]);
|
|
85
|
+
return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$shadowHeight": shadowHeight }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadow" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children })) })))] })));
|
|
40
86
|
};
|
|
41
87
|
SearchBox.defaultProps = {
|
|
42
88
|
showResultList: false,
|
|
43
89
|
isLoading: false,
|
|
44
90
|
placeholder: "Teknolojik ürün ara...",
|
|
91
|
+
onKeyDown: function () { },
|
|
45
92
|
};
|
|
46
93
|
exports.default = SearchBox;
|
|
@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.LoadingStyled = exports.SearchBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .shadow{\n height: ", ";\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 8px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 8px;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font : var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border:0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding:
|
|
13
|
+
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .shadow{\n height: ", ";\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 8px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 8px;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font : var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border:0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 0;\n border-radius: 8px;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n\n [data-simplebar] {\n height: auto !important;\n max-height: 408px !important;\n padding: 1.5rem !important;\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n .productCard{\n border-radius: 8px;\n transition: all .2s ease;\n &:is(.selected){\n background: var(--dark-opacity-3);\n }\n }\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n [data-simplebar] {\n max-height: 326px !important;\n }\n }\n }\n"], ["\n position: relative;\n .shadow{\n height: ", ";\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 8px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 8px;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font : var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border:0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 0;\n border-radius: 8px;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\n overflow: hidden;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n\n [data-simplebar] {\n height: auto !important;\n max-height: 408px !important;\n padding: 1.5rem !important;\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n .productCard{\n border-radius: 8px;\n transition: all .2s ease;\n &:is(.selected){\n background: var(--dark-opacity-3);\n }\n }\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n [data-simplebar] {\n max-height: 326px !important;\n }\n }\n }\n"])), function (props) { return props.$shadowHeight; }, devices_1.devices.xl, devices_1.devices.xl);
|
|
14
14
|
exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2;
|
|
@@ -1,10 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
15
|
};
|
|
5
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
17
|
exports.Default = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
19
|
var SearchBox_1 = __importDefault(require("../SearchBox"));
|
|
20
|
+
var productList_json_1 = __importDefault(require("../../../jsons/productList.json"));
|
|
21
|
+
var ProductCard_1 = __importDefault(require("../../ProductCard"));
|
|
8
22
|
exports.default = {
|
|
9
23
|
title: 'Components/SearchBox',
|
|
10
24
|
component: SearchBox_1.default,
|
|
@@ -19,5 +33,9 @@ exports.Default = {
|
|
|
19
33
|
placeholder: "Teknolojik ürün ara...",
|
|
20
34
|
isLoading: false,
|
|
21
35
|
showResultList: false,
|
|
36
|
+
children: productList_json_1.default.map(function (product) {
|
|
37
|
+
var _a, _b, _c;
|
|
38
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard" }, { children: (0, jsx_runtime_1.jsx)(ProductCard_1.default, { layout: "horizontal", title: product.name, image: (0, jsx_runtime_1.jsx)("img", { src: (_a = product.medias[0]) === null || _a === void 0 ? void 0 : _a.url, alt: product.name, width: "70", height: "70", className: "media" }), description: product.shortDescription, price: "".concat((_b = product.prices[0]) === null || _b === void 0 ? void 0 : _b.newPriceText, " ").concat((_c = product.prices[0]) === null || _c === void 0 ? void 0 : _c.currencyCode), period: 'ay' }, product.productId) })));
|
|
39
|
+
}),
|
|
22
40
|
},
|
|
23
41
|
};
|
|
@@ -12,5 +12,5 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
|
|
15
|
-
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 8px;\n border-color: ", ";\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n grid-template-columns: 0;\n input {\n font: var(--body-semi-bold-14-17) !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 1rem;\n width: 16px;\n height: 16px;\n transition: all .2s ease;\n &:is(.customSelect__dropdown-indicator){\n ", "; \n }\n &:is(.customSelect__clear-indicator){\n background-image: url('", "');\n }\n div{\n display: block;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n &.customSelect__value-container--has-value{\n background-image: ", ";\n }\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n .customSelect__menu-notice{\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color:var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover,&:is(.customSelect__option--is-focused) {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n strong{\n color: var(--dark-opacity-50);\n }\n }\n\n strong {\n display: block;\n font:var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font:var(--body-medium-13-16);\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n &:is(.customSelect__dropdown-indicator){\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__single-value, .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 8px;\n border-color: ", ";\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n grid-template-columns: 0;\n input {\n font: var(--body-semi-bold-14-17) !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 1rem;\n width: 16px;\n height: 16px;\n transition: all .2s ease;\n &:is(.customSelect__dropdown-indicator){\n ", "; \n }\n &:is(.customSelect__clear-indicator){\n background-image: url('", "');\n }\n div{\n display: block;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n &.customSelect__value-container--has-value{\n background-image: ", ";\n }\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n .customSelect__menu-notice{\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color:var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover,&:is(.customSelect__option--is-focused) {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n strong{\n color: var(--dark-opacity-50);\n }\n }\n\n strong {\n display: block;\n font:var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font:var(--body-medium-13-16);\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n &:is(.customSelect__dropdown-indicator){\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__single-value, .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n"])), function (props) { return props.width || '370px'; }, function (props) { return props.maxOptionListHeight && props.maxOptionListHeight; }, function (props) { return props.hasError ? "2px" : "1px"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", hasWrapper: false, width: "16px", height: "16px" })), function (props) { return props.hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.hasError && "url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')"; }, function (props) { return props.maxOptionListHeight; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })));
|
|
15
|
+
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 8px;\n border-color: ", ";\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n grid-template-columns: 0;\n input {\n font: var(--body-semi-bold-14-17) !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 1rem;\n width: 16px;\n height: 16px;\n transition: all .2s ease;\n &:is(.customSelect__dropdown-indicator){\n ", "; \n }\n &:is(.customSelect__clear-indicator){\n background-image: url('", "');\n }\n div{\n display: block;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n &.customSelect__value-container--has-value{\n background-image: ", ";\n }\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n .customSelect__menu-notice{\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color:var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover,&:is(.customSelect__option--is-focused) {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n strong{\n color: var(--dark-opacity-50);\n }\n }\n\n strong {\n display: block;\n font:var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font:var(--body-medium-13-16);\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n &:is(.customSelect__dropdown-indicator){\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__single-value, .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 8px;\n border-color: ", ";\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n grid-template-columns: 0;\n input {\n font: var(--body-semi-bold-14-17) !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 1rem;\n width: 16px;\n height: 16px;\n transition: all .2s ease;\n &:is(.customSelect__dropdown-indicator){\n ", "; \n }\n &:is(.customSelect__clear-indicator){\n background-image: url('", "');\n }\n div{\n display: block;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n &.customSelect__value-container--has-value{\n background-image: ", ";\n }\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n .customSelect__menu-notice{\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color:var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover,&:is(.customSelect__option--is-focused) {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n strong{\n color: var(--dark-opacity-50);\n }\n }\n\n strong {\n display: block;\n font:var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font:var(--body-medium-13-16);\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n &:is(.customSelect__dropdown-indicator){\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__single-value, .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n"])), function (props) { return props.width || '370px'; }, function (props) { return props.maxOptionListHeight && props.maxOptionListHeight; }, function (props) { return props.hasError ? "2px" : "1px"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", hasWrapper: false, width: "16px", height: "16px" })), function (props) { return props.hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.hasError && "url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')"; }, function (props) { return props.maxOptionListHeight; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })));
|
|
16
16
|
var templateObject_1;
|