krl-alfred 2.18.4 → 2.18.6
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.
|
@@ -38,6 +38,10 @@ var Children = function (props) {
|
|
|
38
38
|
};
|
|
39
39
|
var Button = (0, react_1.forwardRef)(function (props, ref) {
|
|
40
40
|
var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, _a = props.icon, icon = _a === void 0 ? props_1.ButtonDefault.icon : _a, children = props.children, _b = props.iconSize, iconSize = _b === void 0 ? props_1.ButtonDefault.iconSize : _b, _c = props.tooltip, tooltip = _c === void 0 ? props_1.ButtonDefault.tooltip : _c, other = __rest(props, ["type", "isLoading", "onClick", "disabled", "size", "variant", "width", "icon", "children", "iconSize", "tooltip"]);
|
|
41
|
-
|
|
41
|
+
var handleClick = function (e) {
|
|
42
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
43
|
+
e.currentTarget.blur();
|
|
44
|
+
};
|
|
45
|
+
return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: handleClick, disabled: disabled, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", height: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children && (0, jsx_runtime_1.jsx)("span", { children: children })] })), tooltip && (0, jsx_runtime_1.jsx)("div", __assign({ className: "buttonTooltip" }, { children: tooltip }))] })));
|
|
42
46
|
});
|
|
43
47
|
exports.default = Button;
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.RadioButtonWrapper = exports.TextLinkWrapper = exports.TooltipDescription = exports.Title = exports.DropdownToggleButton = exports.DropdownWrapper = exports.TooltipWrapper = exports.BadgeWrapper = exports.RightFrame = exports.LeftFrame = exports.ImageWrapper = exports.PaymentCartStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.PaymentCartStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border : 1px solid var(--grey-10);\n border-radius: 0.5rem;\n padding: 1rem 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n &:before{\n content : \"\";\n position: absolute;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n }\n ", ";\n"], ["\n border : 1px solid var(--grey-10);\n border-radius: 0.5rem;\n padding: 1rem 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n &:before{\n content : \"\";\n position: absolute;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n }\n ", ";\n"])), function (props) { return props.$checked ? "\n &:before{\n border: 2px solid var(--primary) !important;\n inset:-1px !important;\n opacity: 1 !important;\n }\n " : function (props) { return props.$isShowRadio && "\n
|
|
13
|
+
exports.PaymentCartStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border : 1px solid var(--grey-10);\n border-radius: 0.5rem;\n padding: 1rem 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n &:before{\n content : \"\";\n position: absolute;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n }\n ", ";\n"], ["\n border : 1px solid var(--grey-10);\n border-radius: 0.5rem;\n padding: 1rem 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n &:before{\n content : \"\";\n position: absolute;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n }\n ", ";\n"])), function (props) { return props.$checked ? "\n &:before{\n border: 2px solid var(--primary) !important;\n inset:-1px !important;\n opacity: 1 !important;\n }\n " : function (props) { return props.$isShowRadio && "\n @media ((hover: hover) and (pointer: fine)) {\n cursor:pointer;\n &:hover:before{\n border: 1px solid var(--primary);\n inset:-1px;\n }\n }\n "; }; });
|
|
14
14
|
exports.ImageWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: middle;\n height: 22px;\n margin-right: 0.5rem;\n"], ["\n display: inline-block;\n vertical-align: middle;\n height: 22px;\n margin-right: 0.5rem;\n"])));
|
|
15
15
|
exports.LeftFrame = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
16
16
|
exports.RightFrame = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n"])));
|
|
@@ -11,16 +11,16 @@ exports.RightContentWrapper = exports.Period = exports.Price = exports.PriceCont
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.Title = styled_components_1.default.strong(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--body-semi-bold-14-17);\n transition: color 0.2s ease;\n"], ["\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--body-semi-bold-14-17);\n transition: color 0.2s ease;\n"])), function (props) { return (props.$hasTitleWrap ? "2" : "1"); });
|
|
14
|
-
exports.Border = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n user-select: none;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n
|
|
15
|
-
exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n border-radius: 0.5rem;\n position: relative;\n
|
|
14
|
+
exports.Border = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n user-select: none;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n border: 1px solid transparent;\n opacity: ", ";\n transition: border-color 0.2s ease, opacity 0.2s ease;\n border-color: ", ";\n ", "\n"], ["\n user-select: none;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n border: 1px solid transparent;\n opacity: ", ";\n transition: border-color 0.2s ease, opacity 0.2s ease;\n border-color: ", ";\n ", "\n"])), function (p) { return (p.$hasBorder ? 1 : 0); }, function (p) { return (p.$hasBorder ? "var(--grey-10)" : "transparent"); }, function (p) { return p.$isSelected && "border-color: var(--primary);border-width: 2px;"; });
|
|
15
|
+
exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n border-radius: 0.5rem;\n position: relative;\n transition: color 0.2s ease;\n\n ", "\n\n ", "\n\n a {\n text-decoration: none;\n color: inherit;\n\n @media ((hover: hover) and (pointer: fine)) {\n &:hover {\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n\n &:active {\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0 0.5rem;\n border-radius: 0.5rem;\n position: relative;\n transition: color 0.2s ease;\n\n ", "\n\n ", "\n\n a {\n text-decoration: none;\n color: inherit;\n\n @media ((hover: hover) and (pointer: fine)) {\n &:hover {\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n\n &:active {\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n"])), function (props) {
|
|
16
16
|
return props.$isDisabled &&
|
|
17
17
|
"\n user-select: none;\n pointer-events: none;\n cursor: not-allowed;\n ";
|
|
18
18
|
}, function (props) {
|
|
19
19
|
return props.$hasBordeHover &&
|
|
20
|
-
"\n cursor: pointer;\n
|
|
21
|
-
},
|
|
20
|
+
"\n @media ((hover: hover) and (pointer: fine)) {\n cursor: pointer;\n &:hover {\n ".concat(exports.Border, " {\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n }\n ");
|
|
21
|
+
}, exports.Title, exports.Title);
|
|
22
22
|
exports.HorizontalSmWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 0.5rem;\n"], ["\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 0.5rem;\n"])));
|
|
23
|
-
exports.ImgWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: ", ";\n border-radius: 0.5rem;\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
|
|
23
|
+
exports.ImgWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: ", ";\n border-radius: 0.5rem;\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 transform: translateZ(0);\n\n img {\n vertical-align: middle !important;\n display: block !important;\n object-fit: cover !important;\n border-radius: ", " !important;\n }\n"], ["\n border: ", ";\n border-radius: 0.5rem;\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 transform: translateZ(0);\n\n img {\n vertical-align: middle !important;\n display: block !important;\n object-fit: cover !important;\n border-radius: ", " !important;\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.$hasImageRounded ? "4px" : "0"); });
|
|
24
24
|
exports.TextWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (props) { return (props.$period ? "1rem" : "0.5rem"); });
|
|
25
25
|
exports.PriceContent = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
26
26
|
return (props === null || props === void 0 ? void 0 : props.$infoPosition) === "left"
|
|
@@ -34,6 +34,7 @@ var TextLink = function (_a) {
|
|
|
34
34
|
var _b = _a.iconWidth, iconWidth = _b === void 0 ? props_1.TextLinkDefault.iconWidth : _b, _c = _a.iconHeight, iconHeight = _c === void 0 ? props_1.TextLinkDefault.iconHeight : _c, _d = _a.variant, variant = _d === void 0 ? props_1.TextLinkDefault.variant : _d, _e = _a.size, size = _e === void 0 ? props_1.TextLinkDefault.size : _e, _f = _a.iconDirection, iconDirection = _f === void 0 ? props_1.TextLinkDefault.iconDirection : _f, _g = _a.alertText, alertText = _g === void 0 ? props_1.TextLinkDefault.alertText : _g, _h = _a.hasAlert, hasAlert = _h === void 0 ? props_1.TextLinkDefault.hasAlert : _h, _j = _a.alertposition, alertposition = _j === void 0 ? props_1.TextLinkDefault.alertposition : _j, onClick = _a.onClick, children = _a.children, href = _a.href, target = _a.target, icon = _a.icon, other = __rest(_a, ["iconWidth", "iconHeight", "variant", "size", "iconDirection", "alertText", "hasAlert", "alertposition", "onClick", "children", "href", "target", "icon"]);
|
|
35
35
|
var _k = (0, react_1.useState)(false), showAlert = _k[0], setShowAlert = _k[1];
|
|
36
36
|
var handleClick = function (e) {
|
|
37
|
+
e.currentTarget.blur();
|
|
37
38
|
if (onClick)
|
|
38
39
|
onClick(e);
|
|
39
40
|
if (hasAlert) {
|