krl-alfred 1.78.0 → 1.78.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AutocompleteInput/AutocompleteInput.js +19 -24
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.js +1 -1
- package/dist/components/ProductCardCheckbox/stories/ProductCardCheckbox.stories.js +2 -1
- package/dist/components/SearchBox/SearchBox.js +3 -14
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/Table/Table.styled.js +1 -1
- package/package.json +1 -1
|
@@ -27,12 +27,11 @@ var genericUtils_1 = require("../../utils/genericUtils");
|
|
|
27
27
|
var simplebar_react_1 = __importDefault(require("simplebar-react"));
|
|
28
28
|
var AutocompleteInput = function (_a) {
|
|
29
29
|
var _b;
|
|
30
|
-
var _c, _d;
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var _w = (0, react_1.useState)(0), selectedIndex = _w[0], setSelectedIndex = _w[1];
|
|
30
|
+
var _c = _a.hasError, hasError = _c === void 0 ? props_1.AutocompleteInputDefault.hasError : _c, _d = _a.label, label = _d === void 0 ? props_1.AutocompleteInputDefault.label : _d, _e = _a.type, type = _e === void 0 ? props_1.AutocompleteInputDefault.type : _e, _f = _a.width, width = _f === void 0 ? props_1.AutocompleteInputDefault.width : _f, _g = _a.dropdownMaxHeight, dropdownMaxHeight = _g === void 0 ? props_1.AutocompleteInputDefault.dropdownMaxHeight : _g, _h = _a.value, value = _h === void 0 ? props_1.AutocompleteInputDefault.value : _h, _j = _a.noResultTemplate, noResultTemplate = _j === void 0 ? props_1.AutocompleteInputDefault.noResultTemplate : _j, _k = _a.onBlur, onBlur = _k === void 0 ? props_1.AutocompleteInputDefault.onBlur : _k, _l = _a.onKeyUp, onKeyUp = _l === void 0 ? props_1.AutocompleteInputDefault.onKeyUp : _l, _m = _a.onKeyDown, onKeyDown = _m === void 0 ? props_1.AutocompleteInputDefault.onKeyDown : _m, _o = _a.autoComplete, autoComplete = _o === void 0 ? props_1.AutocompleteInputDefault.autoComplete : _o, _p = _a.hasAutoUppercase, hasAutoUppercase = _p === void 0 ? props_1.AutocompleteInputDefault.hasAutoUppercase : _p, _q = _a.dropdownPosition, dropdownPosition = _q === void 0 ? props_1.AutocompleteInputDefault.dropdownPosition : _q, disabled = _a.disabled, customLinkText = _a.customLinkText, customLinkHref = _a.customLinkHref, onCustomLinkClick = _a.onCustomLinkClick, onChange = _a.onChange, errorMessage = _a.errorMessage, name = _a.name, placeholder = _a.placeholder, readonly = _a.readonly, autofocus = _a.autofocus, dropdownList = _a.dropdownList, hasLoading = _a.hasLoading, isShowDropdown = _a.isShowDropdown, onClear = _a.onClear, onFocus = _a.onFocus;
|
|
31
|
+
var _r = (0, react_1.useState)(isShowDropdown), showDropdown = _r[0], setShowDropdown = _r[1];
|
|
32
|
+
var _s = (0, react_1.useState)(false), hasClear = _s[0], setHasClear = _s[1];
|
|
33
|
+
var _t = (0, react_1.useState)(value), realInputValue = _t[0], setRealInputValue = _t[1];
|
|
34
|
+
var _u = (0, react_1.useState)(0), selectedIndex = _u[0], setSelectedIndex = _u[1];
|
|
36
35
|
var inputRef = (0, react_1.useRef)(null);
|
|
37
36
|
var realInputRef = (0, react_1.useRef)(null);
|
|
38
37
|
var containerRef = (0, react_1.useRef)(null);
|
|
@@ -43,24 +42,18 @@ var AutocompleteInput = function (_a) {
|
|
|
43
42
|
setShowDropdown(isShowDropdown);
|
|
44
43
|
}, [isShowDropdown, hasLoading]);
|
|
45
44
|
(0, react_1.useEffect)(function () {
|
|
46
|
-
|
|
45
|
+
setRealInputValue(value);
|
|
47
46
|
if (value === null || value === void 0 ? void 0 : value.label) {
|
|
48
47
|
inputRef.current.value = value === null || value === void 0 ? void 0 : value.label;
|
|
49
48
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
var _a, _b, _c, _d;
|
|
53
|
-
if (((_b = (_a = realInputRef === null || realInputRef === void 0 ? void 0 : realInputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0 || ((_d = (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
|
|
54
|
-
setHasClear(true);
|
|
49
|
+
if (!value) {
|
|
50
|
+
handleClear();
|
|
55
51
|
}
|
|
56
|
-
|
|
57
|
-
setHasClear(false);
|
|
58
|
-
}
|
|
59
|
-
}, [(_c = realInputRef === null || realInputRef === void 0 ? void 0 : realInputRef.current) === null || _c === void 0 ? void 0 : _c.value, (_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.value]);
|
|
52
|
+
}, [value]);
|
|
60
53
|
(0, react_1.useEffect)(function () {
|
|
61
|
-
if ((
|
|
54
|
+
if ((realInputValue === null || realInputValue === void 0 ? void 0 : realInputValue.value) || (realInputValue === null || realInputValue === void 0 ? void 0 : realInputValue.value) === null) {
|
|
62
55
|
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
|
|
63
|
-
nativeInputValueSetter.call(realInputRef.current, JSON.stringify(
|
|
56
|
+
nativeInputValueSetter.call(realInputRef.current, JSON.stringify(realInputValue));
|
|
64
57
|
var event_1 = new Event('input', { bubbles: true });
|
|
65
58
|
realInputRef.current.dispatchEvent(event_1);
|
|
66
59
|
}
|
|
@@ -70,7 +63,7 @@ var AutocompleteInput = function (_a) {
|
|
|
70
63
|
var event_2 = new Event('input', { bubbles: true });
|
|
71
64
|
realInputRef.current.dispatchEvent(event_2);
|
|
72
65
|
}
|
|
73
|
-
}, [
|
|
66
|
+
}, [realInputValue]);
|
|
74
67
|
(0, react_1.useEffect)(function () {
|
|
75
68
|
/*dropdownRef?.current?.scrollTo({
|
|
76
69
|
top: (selectedIndex > 0 ? selectedIndex * 51 : 0),
|
|
@@ -85,14 +78,15 @@ var AutocompleteInput = function (_a) {
|
|
|
85
78
|
behavior: 'smooth'
|
|
86
79
|
});
|
|
87
80
|
}, [selectedIndex]);
|
|
88
|
-
var handleClear = function (
|
|
81
|
+
var handleClear = function () {
|
|
89
82
|
onClear();
|
|
90
83
|
inputRef.current.value = null;
|
|
91
|
-
|
|
84
|
+
setRealInputValue(null);
|
|
85
|
+
setHasClear(false);
|
|
92
86
|
};
|
|
93
87
|
var handleSelectValue = function (value, label) {
|
|
94
88
|
inputRef.current.value = label;
|
|
95
|
-
|
|
89
|
+
setRealInputValue({ value: value, label: label });
|
|
96
90
|
setShowDropdown(false);
|
|
97
91
|
};
|
|
98
92
|
var handleKeyUp = function (e) {
|
|
@@ -102,12 +96,13 @@ var AutocompleteInput = function (_a) {
|
|
|
102
96
|
if (hasAutoUppercase) {
|
|
103
97
|
e.target.value = ("" + (0, genericUtils_1.replaceTRtoEn)(e.target.value)).toUpperCase();
|
|
104
98
|
}
|
|
105
|
-
|
|
99
|
+
setRealInputValue(null);
|
|
106
100
|
onKeyUp(e);
|
|
107
101
|
}
|
|
108
102
|
else {
|
|
109
103
|
e.preventDefault();
|
|
110
104
|
}
|
|
105
|
+
setHasClear(e.target.value.length > 0);
|
|
111
106
|
};
|
|
112
107
|
var handleKeyDown = function (e) {
|
|
113
108
|
var _a, _b, _c;
|
|
@@ -138,7 +133,7 @@ var AutocompleteInput = function (_a) {
|
|
|
138
133
|
};
|
|
139
134
|
var handleChange = function (e) {
|
|
140
135
|
if (e === void 0) { e = null; }
|
|
141
|
-
onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e === null || e === void 0 ? void 0 : e.target), { value:
|
|
136
|
+
onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e === null || e === void 0 ? void 0 : e.target), { value: realInputValue }) }));
|
|
142
137
|
};
|
|
143
138
|
return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ "$width": width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readOnly: readonly, disabled: disabled, "$hasError": hasError, "$isShowDropdown": showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete, type: type, "$hasAutoUppercase": hasAutoUppercase }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", color: "var(--dark)", strokeWidth: "2.5px", width: "24px", height: "24px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ "$dropdownMaxHeight": dropdownMaxHeight, "$dropdownPosition": dropdownPosition }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: (0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownInnerStyled, __assign({ ref: dropdownRef, "$dropdownMaxHeight": dropdownMaxHeight }, { children: (dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.length) > 0 ? (dropdownList.map(function (item, key) {
|
|
144
139
|
return (0, jsx_runtime_1.jsx)("li", __assign({ className: (0, classnames_1.default)({ "isFixedBottom": item.isFixedBottom }, { "isSelected": key === selectedIndex }), onClick: function () { return handleSelectValue(item.value, item.label); } }, { children: item.label }));
|
|
@@ -22,6 +22,6 @@ var Checkbox_1 = __importDefault(require("../Checkbox"));
|
|
|
22
22
|
var Badges_1 = __importDefault(require("../Badges"));
|
|
23
23
|
var ProductCardCheckbox = function (_a) {
|
|
24
24
|
var _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? props_1.ProductCardCheckboxDefault.hasCheckbox : _b, _c = _a.title, title = _c === void 0 ? props_1.ProductCardCheckboxDefault.title : _c, _d = _a.content, content = _d === void 0 ? props_1.ProductCardCheckboxDefault.content : _d, _e = _a.checkboxId, checkboxId = _e === void 0 ? props_1.ProductCardCheckboxDefault.checkboxId : _e, _f = _a.size, size = _f === void 0 ? props_1.ProductCardCheckboxDefault.size : _f, _g = _a.productCardOnChange, productCardOnChange = _g === void 0 ? props_1.ProductCardCheckboxDefault.productCardOnChange : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ProductCardCheckboxDefault.disabled : _h, _j = _a.value, value = _j === void 0 ? props_1.ProductCardCheckboxDefault.value : _j, _k = _a.name, name = _k === void 0 ? props_1.ProductCardCheckboxDefault.name : _k, _l = _a.isContentOffset, isContentOffset = _l === void 0 ? props_1.ProductCardCheckboxDefault.isContentOffset : _l, _m = _a.checked, checked = _m === void 0 ? props_1.ProductCardCheckboxDefault.checked : _m, _o = _a.image, image = _o === void 0 ? props_1.ProductCardCheckboxDefault.image : _o, _p = _a.hasBadge, hasBadge = _p === void 0 ? props_1.ProductCardCheckboxDefault.hasBadge : _p, _q = _a.badgeText, badgeText = _q === void 0 ? props_1.ProductCardCheckboxDefault.badgeText : _q, _r = _a.badgeVariant, badgeVariant = _r === void 0 ? props_1.ProductCardCheckboxDefault.badgeVariant : _r, valid = _a.valid;
|
|
25
|
-
return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId, disabled: disabled, "$isContentOffset": isContentOffset, "$size": size, "$hasBadge": hasBadge }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "badgeWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardText" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardTitle" }, { children: title })) })), content && (0, jsx_runtime_1.
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId, disabled: disabled, "$isContentOffset": isContentOffset, "$size": size, "$hasBadge": hasBadge }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "badgeWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardText" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardTitle" }, { children: title })) })), content && (0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: "notSelect_".concat(checkboxId), className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("input", { id: "notSelect_".concat(checkboxId), style: { display: "none" } }), content] }))] })) })));
|
|
26
26
|
};
|
|
27
27
|
exports.default = ProductCardCheckbox;
|
|
@@ -23,23 +23,12 @@ var Loader_1 = __importDefault(require("../Loader"));
|
|
|
23
23
|
var simplebar_react_1 = __importDefault(require("simplebar-react"));
|
|
24
24
|
var react_i18next_1 = require("react-i18next");
|
|
25
25
|
var SearchBox = function (_a) {
|
|
26
|
-
var _b;
|
|
27
|
-
var _c = _a.onKeyUp, onKeyUp = _c === void 0 ? props_1.SearchBoxDefault.onKeyUp : _c, _d = _a.onBlur, onBlur = _d === void 0 ? props_1.SearchBoxDefault.onBlur : _d, _e = _a.onFocus, onFocus = _e === void 0 ? props_1.SearchBoxDefault.onFocus : _e, _f = _a.onChange, onChange = _f === void 0 ? props_1.SearchBoxDefault.onChange : _f, _g = _a.onButtonClick, onButtonClick = _g === void 0 ? props_1.SearchBoxDefault.onButtonClick : _g, _h = _a.children, children = _h === void 0 ? props_1.SearchBoxDefault.children : _h, _j = _a.isLoading, isLoading = _j === void 0 ? props_1.SearchBoxDefault.isLoading : _j, _k = _a.showResultList, showResultList = _k === void 0 ? props_1.SearchBoxDefault.showResultList : _k, _l = _a.placeholder, placeholder = _l === void 0 ? props_1.SearchBoxDefault.placeholder : _l, _m = _a.value, value = _m === void 0 ? props_1.SearchBoxDefault.value : _m;
|
|
26
|
+
var _b = _a.onKeyUp, onKeyUp = _b === void 0 ? props_1.SearchBoxDefault.onKeyUp : _b, _c = _a.onBlur, onBlur = _c === void 0 ? props_1.SearchBoxDefault.onBlur : _c, _d = _a.onFocus, onFocus = _d === void 0 ? props_1.SearchBoxDefault.onFocus : _d, _e = _a.onChange, onChange = _e === void 0 ? props_1.SearchBoxDefault.onChange : _e, _f = _a.onButtonClick, onButtonClick = _f === void 0 ? props_1.SearchBoxDefault.onButtonClick : _f, _g = _a.children, children = _g === void 0 ? props_1.SearchBoxDefault.children : _g, _h = _a.isLoading, isLoading = _h === void 0 ? props_1.SearchBoxDefault.isLoading : _h, _j = _a.showResultList, showResultList = _j === void 0 ? props_1.SearchBoxDefault.showResultList : _j, _k = _a.placeholder, placeholder = _k === void 0 ? props_1.SearchBoxDefault.placeholder : _k, _l = _a.value, value = _l === void 0 ? props_1.SearchBoxDefault.value : _l;
|
|
28
27
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
29
|
-
var _o = (0, react_1.useState)("48px"), shadowHeight = _o[0], setShadowHeight = _o[1];
|
|
30
28
|
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" }) }); };
|
|
31
29
|
var resultRef = (0, react_1.useRef)();
|
|
32
30
|
var simplebarRef = (0, react_1.useRef)(null);
|
|
33
|
-
var
|
|
34
|
-
(0, react_1.useEffect)(function () {
|
|
35
|
-
var _a, _b;
|
|
36
|
-
if (((_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) && showResultList) {
|
|
37
|
-
setShadowHeight((50 + ((_b = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) + "px");
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
setShadowHeight("48px");
|
|
41
|
-
}
|
|
42
|
-
}, [(_b = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight, showResultList, isLoading, children]);
|
|
31
|
+
var _m = (0, react_1.useState)(null), selectedIndex = _m[0], setSelectedIndex = _m[1];
|
|
43
32
|
var handleKeyUp = function (e) {
|
|
44
33
|
e = e || window.event;
|
|
45
34
|
var charCode = e.keyCode || e.which;
|
|
@@ -84,6 +73,6 @@ var SearchBox = function (_a) {
|
|
|
84
73
|
}
|
|
85
74
|
});
|
|
86
75
|
}, [selectedIndex]);
|
|
87
|
-
return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$
|
|
76
|
+
return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$showResultList": showResultList }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadowBox" }), (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", "aria-label": t("SEARCH") }, { 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)("div", __assign({ className: "resultListInner" }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children })) })) })))] })));
|
|
88
77
|
};
|
|
89
78
|
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 .shadowBox{\n height:
|
|
13
|
+
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .shadowBox{\n height: 48px;\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--icon-shadow-color);\n display: ", ";\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 0.5rem;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 0.5rem;\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 padding: 0;\n border-radius: 0.5rem;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\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 &:before{\n content: \"\";\n height: calc(100% + 48px);\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n bottom: 0;\n transform: translateX(-50%);\n border-radius: inherit;\n box-shadow: 0 6px 30px 0 var(--icon-shadow-color);\n user-select: none;\n pointer-events: none;\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n .resultListInner{\n position: relative;\n overflow: hidden;\n border-radius: inherit;\n border: 1px solid var(--dark-opacity-10);\n [data-simplebar] {\n height: auto !important;\n max-height: 408px !important;\n padding: 1.5rem !important;\n position: relative;\n z-index: 1;\n background-color: white;\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n .productCard{\n border-radius: 0.5rem;\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"], ["\n position: relative;\n .shadowBox{\n height: 48px;\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--icon-shadow-color);\n display: ", ";\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 0.5rem;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 0.5rem;\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 padding: 0;\n border-radius: 0.5rem;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\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 &:before{\n content: \"\";\n height: calc(100% + 48px);\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n bottom: 0;\n transform: translateX(-50%);\n border-radius: inherit;\n box-shadow: 0 6px 30px 0 var(--icon-shadow-color);\n user-select: none;\n pointer-events: none;\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n .resultListInner{\n position: relative;\n overflow: hidden;\n border-radius: inherit;\n border: 1px solid var(--dark-opacity-10);\n [data-simplebar] {\n height: auto !important;\n max-height: 408px !important;\n padding: 1.5rem !important;\n position: relative;\n z-index: 1;\n background-color: white;\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n .productCard{\n border-radius: 0.5rem;\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"])), function (props) { return props.$showResultList ? "none" : "block"; }, devices_1.devices.xl, 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;
|
|
@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.EmptyStyled = exports.LoadingStyled = exports.TableStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.TableStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .rc-table{\n table{\n border:0;\n border-spacing: 0;\n th, td {\n position: relative;\n box-sizing: border-box;\n padding: 0 1rem;\n height: 51px;\n line-height: 51px;\n white-space: nowrap;\n border: none;\n text-align: start;\n &:first-child{\n padding: 0 1rem 0 1.5rem;\n }\n }\n th {\n font: var(--body-semi-bold-14-17);\n }\n td {\n font: var(--body-regular-14-17);\n }\n tbody{\n tr{\n position: relative;\n cursor: pointer;\n &:after{\n content: \"\";\n position: absolute;\n inset: 0;\n opacity: 0;\n border-radius: 0.5rem;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: -1;\n }\n &:hover{\n &:after{\n opacity: 1;\n }\n }\n }\n }\n }\n }\n"], ["\n .rc-table{\n table{\n border:0;\n border-spacing: 0;\n th, td {\n position: relative;\n box-sizing: border-box;\n padding: 0 1rem;\n height: 51px;\n line-height: 51px;\n white-space: nowrap;\n border: none;\n text-align: start;\n &:first-child{\n padding: 0 1rem 0 1.5rem;\n }\n }\n th {\n font: var(--body-semi-bold-14-17);\n }\n td {\n font: var(--body-regular-14-17);\n }\n tbody{\n tr{\n position: relative;\n cursor: pointer;\n &:after{\n content: \"\";\n position: absolute;\n inset: 0;\n opacity: 0;\n border-radius: 0.5rem;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: -1;\n }\n &:hover{\n &:after{\n opacity: 1;\n }\n }\n }\n }\n }\n }\n"])));
|
|
13
|
-
exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
13
|
+
exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n"])));
|
|
14
14
|
exports.EmptyStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: var(--body-regular-14-17);\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: var(--body-regular-14-17);\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|