krl-alfred 1.76.18 → 1.76.20
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 +33 -10
- package/dist/components/AutocompleteInput/AutocompleteInput.styled.js +2 -2
- package/dist/components/AutocompleteInput/stories/AutocompleteInput.stories.js +6 -0
- package/dist/components/Divider/Divider.js +2 -2
- package/dist/components/Modal/Modal.styled.js +7 -28
- package/dist/components/ProductCard/ProductCard.styled.js +1 -1
- package/dist/components/ProductCard/layouts/Checklist.js +1 -1
- package/dist/components/ProductCard/props.js +2 -3
- package/dist/components/ProductCard/stories/ProductCard.stories.js +0 -2
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +2 -1
- package/package.json +1 -1
|
@@ -24,12 +24,13 @@ var Loader_1 = __importDefault(require("../Loader"));
|
|
|
24
24
|
var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
|
|
25
25
|
var AutocompleteInput = function (props) {
|
|
26
26
|
var _a;
|
|
27
|
-
var hasError = props.hasError, disabled = props.disabled, label = props.label, customLinkText = props.customLinkText, customLinkHref = props.customLinkHref, onCustomLinkClick = props.onCustomLinkClick, onChange = props.onChange, errorMessage = props.errorMessage, name = props.name, width = props.width, placeholder = props.placeholder, readonly = props.readonly, autofocus = props.autofocus, value = props.value, dropdownList = props.dropdownList, hasLoading = props.hasLoading, hasClear = props.hasClear, isShowDropdown = props.isShowDropdown, dropdownMaxHeight = props.dropdownMaxHeight, onClear = props.onClear, onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, noResultTemplate = props.noResultTemplate;
|
|
27
|
+
var hasError = props.hasError, disabled = props.disabled, label = props.label, customLinkText = props.customLinkText, customLinkHref = props.customLinkHref, onCustomLinkClick = props.onCustomLinkClick, onChange = props.onChange, errorMessage = props.errorMessage, name = props.name, width = props.width, placeholder = props.placeholder, readonly = props.readonly, autofocus = props.autofocus, value = props.value, dropdownList = props.dropdownList, hasLoading = props.hasLoading, hasClear = props.hasClear, isShowDropdown = props.isShowDropdown, dropdownMaxHeight = props.dropdownMaxHeight, onClear = props.onClear, onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, onKeyDown = props.onKeyDown, noResultTemplate = props.noResultTemplate;
|
|
28
28
|
var _b = (0, react_1.useState)(isShowDropdown), showDropdown = _b[0], setShowDropdown = _b[1];
|
|
29
29
|
var _c = (0, react_1.useState)(value), inputValue = _c[0], setInputValue = _c[1];
|
|
30
30
|
var inputRef = (0, react_1.useRef)(null);
|
|
31
31
|
var realInputRef = (0, react_1.useRef)(null);
|
|
32
|
-
var containerRef = (0, react_1.useRef)();
|
|
32
|
+
var containerRef = (0, react_1.useRef)(null);
|
|
33
|
+
var dropdownRef = (0, react_1.useRef)(null);
|
|
33
34
|
(0, useOnClickOutside_1.default)(containerRef, function () { return setShowDropdown(false); }, true);
|
|
34
35
|
(0, react_1.useEffect)(function () {
|
|
35
36
|
setShowDropdown(isShowDropdown);
|
|
@@ -42,12 +43,17 @@ var AutocompleteInput = function (props) {
|
|
|
42
43
|
}, [value]);
|
|
43
44
|
(0, react_1.useEffect)(function () {
|
|
44
45
|
if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue.value) || (inputValue === null || inputValue === void 0 ? void 0 : inputValue.value) === null) {
|
|
45
|
-
inputRef.current.value = inputValue === null || inputValue === void 0 ? void 0 : inputValue.label;
|
|
46
46
|
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
|
|
47
47
|
nativeInputValueSetter.call(realInputRef.current, JSON.stringify(inputValue));
|
|
48
48
|
var event_1 = new Event('input', { bubbles: true });
|
|
49
49
|
realInputRef.current.dispatchEvent(event_1);
|
|
50
50
|
}
|
|
51
|
+
else {
|
|
52
|
+
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
|
|
53
|
+
nativeInputValueSetter.call(realInputRef.current, null);
|
|
54
|
+
var event_2 = new Event('input', { bubbles: true });
|
|
55
|
+
realInputRef.current.dispatchEvent(event_2);
|
|
56
|
+
}
|
|
51
57
|
}, [inputValue]);
|
|
52
58
|
var handleClear = function (e) {
|
|
53
59
|
onClear();
|
|
@@ -59,15 +65,29 @@ var AutocompleteInput = function (props) {
|
|
|
59
65
|
setInputValue({ value: value, label: label });
|
|
60
66
|
setShowDropdown(false);
|
|
61
67
|
};
|
|
62
|
-
var
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
68
|
+
var handleKeyUp = function (e) {
|
|
69
|
+
onKeyUp(e);
|
|
70
|
+
setInputValue(null);
|
|
71
|
+
};
|
|
72
|
+
var handleKeyDown = function (e) {
|
|
73
|
+
var _a;
|
|
74
|
+
onKeyDown(e);
|
|
75
|
+
e = e || window.event;
|
|
76
|
+
var charCode = e.keyCode || e.which;
|
|
77
|
+
if (charCode == 13) {
|
|
78
|
+
e.preventDefault();
|
|
79
|
+
(_a = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children[0].click();
|
|
80
|
+
inputRef.current.blur();
|
|
67
81
|
}
|
|
68
|
-
onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: value }) }));
|
|
69
82
|
};
|
|
70
|
-
|
|
83
|
+
var handleBlur = function (e) {
|
|
84
|
+
onBlur(e);
|
|
85
|
+
};
|
|
86
|
+
var handleChange = function (e) {
|
|
87
|
+
if (e === void 0) { e = null; }
|
|
88
|
+
onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e === null || e === void 0 ? void 0 : e.target), { value: inputValue }) }));
|
|
89
|
+
};
|
|
90
|
+
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", (_a = {}, _a["justify-between"] = customLinkText, _a)) }, { 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, type: "text", disabled: disabled, hasError: hasError, isShowDropdown: showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput" }), 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 && ((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: "3px", width: "16px", height: "16px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ ref: dropdownRef, dropdownMaxHeight: dropdownMaxHeight }, { children: dropdownList.length > 0 ? (dropdownList.map(function (item, key) {
|
|
71
91
|
return (0, jsx_runtime_1.jsx)("li", __assign({ className: (0, classnames_1.default)({ "isFixedBottom": item.isFixedBottom }), onClick: function () { return handleSelectValue(item.value, item.label); } }, { children: item.label }));
|
|
72
92
|
})) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult" }, { children: noResultTemplate() })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
|
|
73
93
|
};
|
|
@@ -80,5 +100,8 @@ AutocompleteInput.defaultValues = {
|
|
|
80
100
|
mask: "_",
|
|
81
101
|
value: null,
|
|
82
102
|
noResultTemplate: function () { return (0, jsx_runtime_1.jsx)("div", { children: "No Result" }); },
|
|
103
|
+
onBlur: function (e) { },
|
|
104
|
+
onKeyUp: function (e) { },
|
|
105
|
+
onKeyDown: function (e) { },
|
|
83
106
|
};
|
|
84
107
|
exports.default = AutocompleteInput;
|
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.DropdownStyled = exports.InputStyled = exports.Container = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
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:
|
|
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\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px !important;\n border: 2px solid
|
|
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
|
+
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\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px !important;\n border: 2px solid var(--primary) !important;\n color: var(--dark) !important;\n background: white !important;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\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\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px !important;\n border: 2px solid var(--primary) !important;\n color: var(--dark) !important;\n background: white !important;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\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)'; });
|
|
14
14
|
exports.DropdownStyled = styled_components_1.default.ul(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: auto;\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 > 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 &.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 border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: auto;\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 > 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 &.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"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -40,6 +40,12 @@ exports.Default = {
|
|
|
40
40
|
onFocus: function () {
|
|
41
41
|
console.log("prop onFocus");
|
|
42
42
|
},
|
|
43
|
+
onBlur: function () {
|
|
44
|
+
console.log("prop onBlur");
|
|
45
|
+
},
|
|
46
|
+
onKeyDown: function () {
|
|
47
|
+
console.log("prop onKeyDown");
|
|
48
|
+
},
|
|
43
49
|
value: null,
|
|
44
50
|
noResultTemplate: function () { return (0, jsx_runtime_1.jsx)("div", { children: "No Result" }); },
|
|
45
51
|
dropdownList: [
|
|
@@ -24,9 +24,9 @@ var Divider = function (props) {
|
|
|
24
24
|
case 'horizontal':
|
|
25
25
|
return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsxs)(Divider_styled_1.Horizontal, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", {}), hasText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: text }), (0, jsx_runtime_1.jsx)("div", {})] }))] })) }));
|
|
26
26
|
case 'waveArrowUp':
|
|
27
|
-
return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowUp", width: "97px", height: "53px" }) }));
|
|
27
|
+
return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowUp", width: "97px", height: "53px", color: "var(--primary)" }) }));
|
|
28
28
|
case 'waveArrowDown':
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowDown", width: "97px", height: "53px" }) }));
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowDown", width: "97px", height: "53px", color: "var(--primary)" }) }));
|
|
30
30
|
default:
|
|
31
31
|
return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: "default" }));
|
|
32
32
|
}
|
|
@@ -3,35 +3,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
-
}
|
|
12
|
-
Object.defineProperty(o, k2, desc);
|
|
13
|
-
}) : (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
o[k2] = m[k];
|
|
16
|
-
}));
|
|
17
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
-
}) : function(o, v) {
|
|
20
|
-
o["default"] = v;
|
|
21
|
-
});
|
|
22
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
23
|
-
if (mod && mod.__esModule) return mod;
|
|
24
|
-
var result = {};
|
|
25
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
26
|
-
__setModuleDefault(result, mod);
|
|
27
|
-
return result;
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
28
8
|
};
|
|
29
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
10
|
exports.OverlayStyled = exports.ModalStyled = void 0;
|
|
31
|
-
var styled_components_1 =
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
32
12
|
var devices_1 = require("../../constants/devices");
|
|
33
|
-
|
|
34
|
-
exports.ModalStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\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 .contentInner{\n //height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\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 .contentInner{\n //height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"])), function (props) {
|
|
13
|
+
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\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 .contentInner{\n //height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\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 .contentInner{\n //height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"])), function (props) {
|
|
35
14
|
switch (props.size) {
|
|
36
15
|
case 'xxsmall':
|
|
37
16
|
return "311px";
|
|
@@ -49,12 +28,12 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_2 || (templ
|
|
|
49
28
|
}, function (props) { return !props.autoHeight && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n width: 100%;\n max-width: 100%;\n max-height: initial;\n }\n "); }, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.customContent ? '0' : '0 24px'; }, function (props) { return props.showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
|
|
50
29
|
switch (props.buttonsAlignment) {
|
|
51
30
|
case 'horizontal':
|
|
52
|
-
return "\n justify-content: flex-start;\n flex-direction: row-reverse;\n gap: 0;\n button {\n + button{\n margin-right: ".concat((props.size === 'small' ? '16px' : '24px'), ";\n @media only screen and ").concat(devices_1.devices.sm, " {\n margin-right: 16px;\n }\n }\n }\n @media only screen and ").concat(devices_1.devices.sm, " {\n button {\n &:is(:nth-child(1)) {\n width: ").concat((props.showSecondaryButton ? '50%' : '100%'), ";\n white-space: nowrap;\n box-sizing: content-box;\n }\n + button {\n
|
|
31
|
+
return "\n justify-content: flex-start;\n flex-direction: row-reverse;\n gap: 0;\n button {\n + button{\n margin-right: ".concat((props.size === 'small' ? '16px' : '24px'), ";\n @media only screen and ").concat(devices_1.devices.sm, " {\n margin-right: 16px;\n }\n }\n }\n @media only screen and ").concat(devices_1.devices.sm, " {\n button {\n &:is(:nth-child(1)) {\n min-width: ").concat((props.showSecondaryButton ? 'calc(50% - 3rem)' : '100%'), ";\n white-space: nowrap;\n box-sizing: content-box;\n }\n + button {\n flex: 1 0 auto;\n margin-right: 1rem;\n }\n }\n }\n ");
|
|
53
32
|
case 'vertical':
|
|
54
33
|
return "\n justify-content: space-between;\n flex-direction: column;\n gap: ".concat(props.showDivider ? '0.5rem' : '1rem', ";\n ");
|
|
55
34
|
default:
|
|
56
35
|
return "";
|
|
57
36
|
}
|
|
58
37
|
}, devices_1.devices.md, function (props) { return props.buttonsAlignmentOnMobile === 'vertical' ? "\n flex-direction : column;\n button {\n margin : 0 !important;\n + button {\n margin-top:1rem !important;\n }\n }\n " : " "; });
|
|
59
|
-
exports.OverlayStyled = styled_components_1.default.div(
|
|
60
|
-
var templateObject_1, templateObject_2
|
|
38
|
+
exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"], ["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"])));
|
|
39
|
+
var templateObject_1, templateObject_2;
|
|
@@ -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: 24px;\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: 24px;\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 @media only screen and ", " {\n margin-right: 16px;\n }\n\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
|
|
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: 24px;\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: 24px;\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 @media only screen and ", " {\n margin-right: 16px;\n }\n\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: 24px;\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: 24px;\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 @media only screen and ", " {\n margin-right: 16px;\n }\n\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 " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, function (props) { return props.isContentOffset ? '128px' : '0'; }, function (props) { return props.isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md);
|
|
14
14
|
exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n .cartBadge{\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n }\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n }\n .productCardContent{ \n padding: 1rem 0 0.5rem 0;\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price, .period {\n text-decoration: line-through;\n }\n .price{\n font: var(--caption-semi-bold-12-15);\n }\n .period{\n font:var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price{\n font: var(--body-extra-bold-14-17);\n }\n .period{\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n .cartBadge{\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n }\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n }\n .productCardContent{ \n padding: 1rem 0 0.5rem 0;\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price, .period {\n text-decoration: line-through;\n }\n .price{\n font: var(--caption-semi-bold-12-15);\n }\n .period{\n font:var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price{\n font: var(--body-extra-bold-14-17);\n }\n .period{\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.isResponsive && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n padding: 1.5rem;\n .cartBadge{\n left: 16px;\n top: 16px;\n }\n .img {\n height: 215px;\n }\n .productCardContent{\n padding: 1.5rem 0 0.5rem 0;\n .productCardTitle{\n height: 44px;\n font: var(--headline-bold-18-22);\n }\n .productCardDescription{\n margin-bottom: 1.5rem;\n height: 37px;\n font: var(--title-medium-16-19);\n }\n .productCardPriceContent{\n height: 48px;\n .discountRate{\n width: 65px;\n height: 48px;\n font: var(--title-extra-bold-16-19);\n }\n \n .oldPrice {\n .price{\n font: var(--body-semi-bold-13-16);\n }\n }\n .newPrice {\n .price{\n font: var(--title-extra-bold-16-19);\n }\n .period{\n font: var(--body-regular-14-17);\n }\n }\n }\n }\n }\n "); });
|
|
15
15
|
exports.HorizontalStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n\n &:hover {\n background: var(--dark-opacity-3);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border: 0;\n }\n\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:", ";\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n font:", ";\n }\n\n .period {\n font:", ";\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n\n &:hover {\n background: var(--dark-opacity-3);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border: 0;\n }\n\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:", ";\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n font:", ";\n }\n\n .period {\n font:", ";\n }\n }\n }\n"])), devices_1.devices.sm, function (props) { return (props.isMobile ? 'var(--caption-semi-bold-12-15)' : 'var(--title-semi-bold-16-19)'); }, function (props) { return (props.isMobile ? 'var(--caption-extra-bold-12-15)' : 'var(--body-extra-bold-14-17)'); }, function (props) { return (props.isMobile ? 'var(--caption-regular-12-15)' : 'var(--body-regular-13-16)'); });
|
|
16
16
|
exports.HorizontalSmStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n border: 1px solid var(--grey-10);\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalSmWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 1rem;\n\n .img {\n border: ", ";\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n\n > * {\n vertical-align: middle !important;\n }\n }\n\n .text {\n padding-right: ", ";\n .title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n }\n }\n\n .priceContent {\n text-align: end;\n\n .period {\n display: block;\n margin-bottom: 4px;\n font:var(--body-regular-14-17);\n }\n\n .price {\n display: block;\n font:var(--title-extra-bold-16-19);\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n border: 1px solid var(--grey-10);\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalSmWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 1rem;\n\n .img {\n border: ", ";\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n\n > * {\n vertical-align: middle !important;\n }\n }\n\n .text {\n padding-right: ", ";\n .title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n }\n }\n\n .priceContent {\n text-align: end;\n\n .period {\n display: block;\n margin-bottom: 4px;\n font:var(--body-regular-14-17);\n }\n\n .price {\n display: block;\n font:var(--title-extra-bold-16-19);\n }\n }\n }\n"])), function (props) { return props.hasImageBorder ? '1px solid var(--dark-opacity-5)' : 'none'; }, function (props) { return props.imageWidth ? props.imageWidth : '71px'; }, function (props) { return props.imageHeight ? props.imageHeight : '50px'; }, function (props) { return props.period ? "2rem" : "0"; });
|
|
@@ -32,6 +32,6 @@ var react_device_detect_1 = require("react-device-detect");
|
|
|
32
32
|
var classnames_1 = __importDefault(require("classnames"));
|
|
33
33
|
var Checklist = function (props) {
|
|
34
34
|
var hasCheckbox = props.hasCheckbox, checked = props.checked, name = props.name, productCardOnChange = props.productCardOnChange, title = props.title, content = props.content, value = props.value, other = __rest(props, ["hasCheckbox", "checked", "name", "productCardOnChange", "title", "content", "value"]);
|
|
35
|
-
return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name }) })), props.image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardImg" }, { children: props.image }))), (0, jsx_runtime_1.
|
|
35
|
+
return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name }) })), props.image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardImg" }, { children: props.image }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardText" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.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;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.layouts =
|
|
4
|
-
exports.contentAlignments = ['left', 'center'];
|
|
3
|
+
exports.layouts = void 0;
|
|
5
4
|
exports.layouts = ['checklist', 'standart', 'horizontal', 'horizontalSm'];
|
|
6
5
|
var ProductCardDefault = {
|
|
7
6
|
hasCheckbox: true,
|
|
8
|
-
|
|
7
|
+
isContentOffset: false,
|
|
9
8
|
layout: exports.layouts[0],
|
|
10
9
|
productChecked: false,
|
|
11
10
|
disabled: false,
|
|
@@ -34,7 +34,6 @@ exports.default = {
|
|
|
34
34
|
},
|
|
35
35
|
tags: ['autodocs'],
|
|
36
36
|
argTypes: {
|
|
37
|
-
contentAlignment: { control: 'select', options: props_1.contentAlignments },
|
|
38
37
|
layout: { control: 'select', options: props_1.layouts },
|
|
39
38
|
disabled: { control: 'boolean' },
|
|
40
39
|
hasDiscount: { control: 'boolean' },
|
|
@@ -54,7 +53,6 @@ exports.Default = {
|
|
|
54
53
|
oldPricePeriod: "hafta",
|
|
55
54
|
period: "hafta",
|
|
56
55
|
content: "Content",
|
|
57
|
-
contentAlignment: "left",
|
|
58
56
|
isMobile: false,
|
|
59
57
|
productCardOnChange: function () { return console.log("test"); },
|
|
60
58
|
image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
|
|
@@ -24,7 +24,8 @@ var ShoppingCartProduct = function (props) {
|
|
|
24
24
|
var item = _a.item, children = _a.children;
|
|
25
25
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
26
26
|
};
|
|
27
|
-
return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: props.image })), (0, jsx_runtime_1.
|
|
27
|
+
return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: props.image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: props }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: props.title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", props.discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.oldPrice })), props.oldPricePeriod && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", props.oldPricePeriod] }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.price })), props.period && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", props.period] }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [props.deliveryDangerText &&
|
|
28
|
+
(0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: props.deliveryDangerText })), props.deliveryText] }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!props.hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: "popup" }, { children: props.errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity })), !props.hasDisableActions && (props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))))] }))] })), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !props.hasLoading && props.toggleInsurance, className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price" }, { children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: props.insuranceQuantity }))] }))] })), props.hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight" }, { children: props.insuranceTooltipText }))) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) })))) })))] })))] })));
|
|
28
29
|
};
|
|
29
30
|
ShoppingCartProduct.defaultProps = {
|
|
30
31
|
insuranceText: "Tamamlayıcı ek güvence ekle",
|