krl-alfred 1.76.49 → 1.76.51
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.
|
@@ -21,7 +21,7 @@ var TextLink_1 = __importDefault(require("../TextLink"));
|
|
|
21
21
|
var react_i18next_1 = require("react-i18next");
|
|
22
22
|
var AddressCard = function (props) {
|
|
23
23
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: props.id, checked: props.checked, "$minHeight": props.minHeight }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", label: props.title, name: props.name, value: props.value, disabled: props.disabled }), (props === null || props === void 0 ? void 0 : props.isShowEditBtn) && ((0, jsx_runtime_1.jsx)("
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: props.id, checked: props.checked, "$minHeight": props.minHeight }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", label: props.title, name: props.name, value: props.value, disabled: props.disabled }), (props === null || props === void 0 ? void 0 : props.isShowEditBtn) && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "xxxxx", className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.handleUpdate }, { children: t("edit") })) })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: props.description }))] })));
|
|
25
25
|
};
|
|
26
26
|
AddressCard.defaultProps = {
|
|
27
27
|
isShowEditBtn: true,
|
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.AddressCardStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n background: white;\n padding: 1rem;\n cursor: pointer;\n display: block;\n position: relative;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n inset: -1px;\n border: 2px solid var(--primary);\n opacity: ", ";\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n }\n .head{\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: inherit;\n .editBtn{\n font : var(--body-bold-14-17);\n margin-left: 1rem;\n * {\n display: block;\n }\n }\n }\n .description{\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n display: -webkit-inline-box;\n font : var(--body-regular-14-17);\n color: var(--dark);\n height: ", ";\n cursor: inherit;\n vertical-align: middle;\n }\n"], ["\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n background: white;\n padding: 1rem;\n cursor: pointer;\n display: block;\n position: relative;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n inset: -1px;\n border: 2px solid var(--primary);\n opacity: ", ";\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n }\n .head{\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: inherit;\n .editBtn{\n font : var(--body-bold-14-17);\n margin-left: 1rem;\n * {\n display: block;\n }\n }\n }\n .description{\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n display: -webkit-inline-box;\n font : var(--body-regular-14-17);\n color: var(--dark);\n height: ", ";\n cursor: inherit;\n vertical-align: middle;\n }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; });
|
|
12
|
+
exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n background: white;\n padding: 1rem;\n cursor: pointer;\n display: block;\n position: relative;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n inset: -1px;\n border: 2px solid var(--primary);\n opacity: ", ";\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n }\n .head{\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: inherit;\n .editBtn{\n font : var(--body-bold-14-17);\n margin-left: 1rem;\n display: block;\n * {\n display: block;\n }\n }\n }\n .description{\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n display: -webkit-inline-box;\n font : var(--body-regular-14-17);\n color: var(--dark);\n height: ", ";\n cursor: inherit;\n vertical-align: middle;\n }\n"], ["\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n background: white;\n padding: 1rem;\n cursor: pointer;\n display: block;\n position: relative;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n inset: -1px;\n border: 2px solid var(--primary);\n opacity: ", ";\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n }\n .head{\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: inherit;\n .editBtn{\n font : var(--body-bold-14-17);\n margin-left: 1rem;\n display: block;\n * {\n display: block;\n }\n }\n }\n .description{\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n display: -webkit-inline-box;\n font : var(--body-regular-14-17);\n color: var(--dark);\n height: ", ";\n cursor: inherit;\n vertical-align: middle;\n }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; });
|
|
13
13
|
var templateObject_1;
|
|
@@ -13,7 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
13
13
|
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
|
|
15
15
|
var devices_1 = require("../../../../constants/devices");
|
|
16
|
-
exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 128px;\n cursor: pointer;\n @media only screen and ", " {\n height: 69px;\n }\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n }\n\n &:checked , &:hover {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 8px;\n border: 2px solid var(--primary);\n
|
|
16
|
+
exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 128px;\n cursor: pointer;\n @media only screen and ", " {\n height: 69px;\n }\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n }\n\n &:checked , &:hover {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 8px;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n &:hover {\n ~ div.labelsWrapper {\n &:before {\n border: 1px solid var(--primary);\n }\n }\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 12px;\n top: 12px;\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0;\n display: block;\n text-align: center;\n\n @media only screen and ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n label.label {\n display: block;\n margin: 0 0 4px 0;\n vertical-align: middle;\n cursor: pointer;\n font:var(--title-bold-16-19);\n @media only screen and ", " {\n margin: 0;\n }\n }\n\n label.description {\n display: block;\n vertical-align: middle;\n margin: 0;\n cursor: pointer;\n font:var(--body-regular-14-17);\n @media only screen and ", " {\n &:before{\n content: \" / \";\n display: inline;\n }\n margin: 0 0 0 4px;\n }\n }\n }\n"], ["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 128px;\n cursor: pointer;\n @media only screen and ", " {\n height: 69px;\n }\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n }\n\n &:checked , &:hover {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 8px;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n &:hover {\n ~ div.labelsWrapper {\n &:before {\n border: 1px solid var(--primary);\n }\n }\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 12px;\n top: 12px;\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0;\n display: block;\n text-align: center;\n\n @media only screen and ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n label.label {\n display: block;\n margin: 0 0 4px 0;\n vertical-align: middle;\n cursor: pointer;\n font:var(--title-bold-16-19);\n @media only screen and ", " {\n margin: 0;\n }\n }\n\n label.description {\n display: block;\n vertical-align: middle;\n margin: 0;\n cursor: pointer;\n font:var(--body-regular-14-17);\n @media only screen and ", " {\n &:before{\n content: \" / \";\n display: inline;\n }\n margin: 0 0 0 4px;\n }\n }\n }\n"])), devices_1.devices.lg, function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
|
|
17
17
|
switch (props.size) {
|
|
18
18
|
case 'small':
|
|
19
19
|
return "16px";
|