krl-alfred 1.75.0 → 1.75.1
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.
|
@@ -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 ", ";\n background: white;\n padding: 1rem;\n cursor: pointer;\n display: block;\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-size: 14px;\n font-weight: 700;\n margin-left: 1rem;\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-size: 14px;\n font-weight: 400;\n line-height: normal;\n color: var(--dark);\n
|
|
12
|
+
exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n border: 1px solid ", ";\n background: white;\n padding: 1rem;\n cursor: pointer;\n display: block;\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-size: 14px;\n font-weight: 700;\n line-height: 17px;\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-size: 14px;\n font-weight: 400;\n line-height: normal;\n color: var(--dark);\n height: 68px;\n cursor: inherit;\n vertical-align: middle;\n }\n"], ["\n border-radius: 8px;\n border: 1px solid ", ";\n background: white;\n padding: 1rem;\n cursor: pointer;\n display: block;\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-size: 14px;\n font-weight: 700;\n line-height: 17px;\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-size: 14px;\n font-weight: 400;\n line-height: normal;\n color: var(--dark);\n height: 68px;\n cursor: inherit;\n vertical-align: middle;\n }\n"])), function (props) { return props.checked ? 'var(--primary)' : 'var(--dark-opacity-10)'; });
|
|
13
13
|
var templateObject_1;
|
|
@@ -20,8 +20,8 @@ var prop_types_1 = __importDefault(require("prop-types"));
|
|
|
20
20
|
var classnames_1 = __importDefault(require("classnames"));
|
|
21
21
|
var Checkbox = function (props) {
|
|
22
22
|
var _a, _b, _c;
|
|
23
|
-
var value = props.value, checked = props.checked, onChange = props.onChange, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid;
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("label", (_a = {}, _a["caption-semi-bold-12-15"] = size === "small", _a), (_b = {}, _b["body-semi-bold-13-16"] = size === "medium", _b), (_c = {}, _c["body-semi-bold-14-17"] = size === "large", _c)), htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("description", "body-regular-13-16"), htmlFor: id }, { children: description })))] })))] })));
|
|
23
|
+
var value = props.value, checked = props.checked, onChange = props.onChange, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, labelOffset = props.labelOffset;
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, labelOffset: labelOffset }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("label", (_a = {}, _a["caption-semi-bold-12-15"] = size === "small", _a), (_b = {}, _b["body-semi-bold-13-16"] = size === "medium", _b), (_c = {}, _c["body-semi-bold-14-17"] = size === "large", _c)), htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("description", "body-regular-13-16"), htmlFor: id }, { children: description })))] })))] })));
|
|
25
25
|
};
|
|
26
26
|
exports.default = Checkbox;
|
|
27
27
|
Checkbox.propTypes = {
|
|
@@ -32,8 +32,10 @@ Checkbox.propTypes = {
|
|
|
32
32
|
valid: prop_types_1.default.bool,
|
|
33
33
|
disabled: prop_types_1.default.bool,
|
|
34
34
|
checked: prop_types_1.default.bool,
|
|
35
|
+
labelOffset: prop_types_1.default.string,
|
|
35
36
|
};
|
|
36
37
|
Checkbox.defaultProps = {
|
|
37
38
|
size: "small",
|
|
38
39
|
valid: true,
|
|
40
|
+
labelOffset: '0.5rem',
|
|
39
41
|
};
|
|
@@ -12,18 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
12
12
|
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
|
-
exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n position:relative;\n align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n margin: ", ";\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"], ["\n flex:1;\n position:relative;\n align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n margin: ", ";\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) {
|
|
16
|
-
switch (props.size) {
|
|
17
|
-
case 'small':
|
|
18
|
-
return "0 8px 0 0";
|
|
19
|
-
case 'medium':
|
|
20
|
-
return "0 8px 0 0";
|
|
21
|
-
case 'large':
|
|
22
|
-
return "0 16px 0 0";
|
|
23
|
-
default:
|
|
24
|
-
return "0 16px 0 0";
|
|
25
|
-
}
|
|
26
|
-
}, function (props) {
|
|
15
|
+
exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n position:relative;\n align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"], ["\n flex:1;\n position:relative;\n align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) { return props.labelOffset; }, function (props) {
|
|
27
16
|
switch (props.size) {
|
|
28
17
|
case 'small':
|
|
29
18
|
return "16px";
|