krl-alfred 1.77.11 → 1.77.12
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.
|
@@ -41,7 +41,7 @@ var Dropdown = function (props) {
|
|
|
41
41
|
var children = _a.children;
|
|
42
42
|
return props.toggle ? ((0, jsx_runtime_1.jsx)("span", __assign({ onClick: function () { return setShowDropdown(!showDropdown); } }, { children: (0, jsx_runtime_1.jsx)(props.toggle, { children: children }) }))) : ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: function () { return setShowDropdown(!showDropdown); } }, { children: "Toggle" })));
|
|
43
43
|
};
|
|
44
|
-
return ((0, jsx_runtime_1.jsxs)(Dropdown_styled_1.DropdownStyled, __assign({ ref: dropdownRef, "$show": showDropdown }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, {}), (0, jsx_runtime_1.jsx)(Dropdown_styled_1.DropdownMenu, __assign({ "$show": showDropdown, "$size": props.size, "$isShowTopChevron": props.isShowTopChevron, "$childrenVariant": props.childrenVariant }, { children: (0, jsx_runtime_1.jsx)("ul", { children: (_a = props === null || props === void 0 ? void 0 : props.list) === null || _a === void 0 ? void 0 : _a.map(function (item, key) {
|
|
44
|
+
return ((0, jsx_runtime_1.jsxs)(Dropdown_styled_1.DropdownStyled, __assign({ ref: dropdownRef, "$show": showDropdown }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, {}), (0, jsx_runtime_1.jsx)(Dropdown_styled_1.DropdownMenu, __assign({ "$show": showDropdown, "$size": props.size, "$isShowTopChevron": props.isShowTopChevron, "$childrenVariant": props.childrenVariant, "$right": props.right, "$width": props.width }, { children: (0, jsx_runtime_1.jsx)("ul", { children: (_a = props === null || props === void 0 ? void 0 : props.list) === null || _a === void 0 ? void 0 : _a.map(function (item, key) {
|
|
45
45
|
return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: item.title })) }, key));
|
|
46
46
|
}) }) }))] })));
|
|
47
47
|
};
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.DropdownMenu = exports.DropdownStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.DropdownStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
13
|
-
exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n border-radius: 8px;\n background-color: white;\n box-sizing: border-box;\n z-index: 9;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n right:
|
|
13
|
+
exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n border-radius: 8px;\n background-color: white;\n box-sizing: border-box;\n z-index: 9;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n right: ", ";\n top: calc(100% + 16px);\n opacity: ", ";\n visibility: ", ";\n padding: ", ";\n min-width: ", ";\n &:before {\n content: \"\";\n position: absolute;\n transform: rotate(45deg);\n right: 18px;\n transition: all 0.15s ease;\n background-color: white;\n width: 12px;\n height: 12px;\n border-radius: 3px;\n bottom: calc(100% - 6px);\n display: ", ";\n }\n\n ul{\n padding: 0;\n margin: 0;\n li{\n display: block;\n margin: 0;\n padding: 0;\n a{\n cursor: pointer;\n text-decoration: none;\n padding: ", ";\n font: ", ";\n display: block;\n color: var(--dark);\n border-radius: 0.5rem;\n position: relative;\n ", "\n &:is(.hasNotification){\n &:after{\n content: \"\";\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--primary);\n } \n }\n }\n + li{\n margin-top: 0.25rem;\n }\n }\n }\n"], ["\n position: absolute;\n border-radius: 8px;\n background-color: white;\n box-sizing: border-box;\n z-index: 9;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n right: ", ";\n top: calc(100% + 16px);\n opacity: ", ";\n visibility: ", ";\n padding: ", ";\n min-width: ", ";\n &:before {\n content: \"\";\n position: absolute;\n transform: rotate(45deg);\n right: 18px;\n transition: all 0.15s ease;\n background-color: white;\n width: 12px;\n height: 12px;\n border-radius: 3px;\n bottom: calc(100% - 6px);\n display: ", ";\n }\n\n ul{\n padding: 0;\n margin: 0;\n li{\n display: block;\n margin: 0;\n padding: 0;\n a{\n cursor: pointer;\n text-decoration: none;\n padding: ", ";\n font: ", ";\n display: block;\n color: var(--dark);\n border-radius: 0.5rem;\n position: relative;\n ", "\n &:is(.hasNotification){\n &:after{\n content: \"\";\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--primary);\n } \n }\n }\n + li{\n margin-top: 0.25rem;\n }\n }\n }\n"])), function (props) { return props.$right || "0"; }, function (props) { return props.$show ? "1" : "0"; }, function (props) { return props.$show ? "visible" : "hidden"; }, function (props) {
|
|
14
14
|
switch (props.$size) {
|
|
15
15
|
case 'small':
|
|
16
16
|
return "0.5rem";
|
|
@@ -22,11 +22,11 @@ exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (temp
|
|
|
22
22
|
}, function (props) {
|
|
23
23
|
switch (props.$size) {
|
|
24
24
|
case 'small':
|
|
25
|
-
return "169px";
|
|
25
|
+
return props.$width || "169px";
|
|
26
26
|
case 'medium':
|
|
27
|
-
return "184px";
|
|
27
|
+
return props.$width || "184px";
|
|
28
28
|
default:
|
|
29
|
-
return "184px";
|
|
29
|
+
return props.$width || "184px";
|
|
30
30
|
}
|
|
31
31
|
}, function (props) { return props.$isShowTopChevron ? "block" : "none"; }, function (props) {
|
|
32
32
|
switch (props.$size) {
|
|
@@ -46,5 +46,5 @@ exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (temp
|
|
|
46
46
|
default:
|
|
47
47
|
return "var(--body-bold-13-16)";
|
|
48
48
|
}
|
|
49
|
-
}, function (props) { return props.$childrenVariant === "primary" ? "\n &:hover{\n color: var(--primary) !important;\n background-color: var(--primary-opacity-10);\n }\n " : "\n &:hover{\n color: var(--primary) !important;\n background-color: var(--primary-opacity-5);\n }\n "; });
|
|
49
|
+
}, function (props) { return props.$childrenVariant === "primary" ? "\n &:hover{\n color: var(--primary) !important;\n background-color: var(--primary-opacity-10);\n font-weight: bold;\n }\n " : "\n &:hover{\n color: var(--primary) !important;\n background-color: var(--primary-opacity-5);\n font-weight: bold;\n }\n "; });
|
|
50
50
|
var templateObject_1, templateObject_2;
|
|
@@ -49,7 +49,7 @@ var PaymentCart = function (props) {
|
|
|
49
49
|
}
|
|
50
50
|
setPaymentDropdownList(list);
|
|
51
51
|
}, []);
|
|
52
|
-
return ((0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.PaymentCartStyled, __assign({ "$checked": props.checked, htmlFor: props.id }, { children: [(0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.LeftFrame, { children: [props.isShowRadio && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.RadioButtonWrapper, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", name: props.name, value: props.value }) })), (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.ImageWrapper, { children: props.cartIcon }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.Title, { children: [props.titlePrefix && (0, jsx_runtime_1.jsx)("span", { children: props.titlePrefix }), (0, jsx_runtime_1.jsx)("span", { children: props.title })] })] }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.RightFrame, { children: [props.badgeText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.BadgeWrapper, __assign({ "$isHideMobileBadge": props.isHideMobileBadge }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: props.badgeText, layout: "text", variant: props.badgeVariant }) }))), props.infoText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipWrapper, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "147px", iconWidth: "24px", iconHeight: "24px", popupRight: "-8px" }, { children: (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipDescription, { children: props.infoText }) })) })), props.isShowTextLink && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.onClickTextLink }, { children: props.textLinkText })) })), props.isShowDropdown && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: paymentDropdownList, isShowTopChevron:
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.PaymentCartStyled, __assign({ "$checked": props.checked, htmlFor: props.id }, { children: [(0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.LeftFrame, { children: [props.isShowRadio && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.RadioButtonWrapper, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", name: props.name, value: props.value }) })), (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.ImageWrapper, { children: props.cartIcon }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.Title, { children: [props.titlePrefix && (0, jsx_runtime_1.jsx)("span", { children: props.titlePrefix }), (0, jsx_runtime_1.jsx)("span", { children: props.title })] })] }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.RightFrame, { children: [props.badgeText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.BadgeWrapper, __assign({ "$isHideMobileBadge": props.isHideMobileBadge }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: props.badgeText, layout: "text", variant: props.badgeVariant }) }))), props.infoText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipWrapper, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "147px", iconWidth: "24px", iconHeight: "24px", popupRight: "-8px" }, { children: (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipDescription, { children: props.infoText }) })) })), props.isShowTextLink && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.onClickTextLink }, { children: props.textLinkText })) })), props.isShowDropdown && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: paymentDropdownList, isShowTopChevron: true, toggle: function () { return (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "-12px", width: "170px" }) }))] })] })));
|
|
53
53
|
};
|
|
54
54
|
PaymentCart.defaultProps = {
|
|
55
55
|
badgeText: "Badge text",
|