krl-alfred 1.17.0 → 1.19.0
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.
|
@@ -14,7 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
14
14
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
15
|
var CircleProgress_styled_1 = require("./CircleProgress.styled");
|
|
16
16
|
var react_circular_progressbar_1 = require("react-circular-progressbar");
|
|
17
|
-
require("react-circular-progressbar/dist/styles.css");
|
|
18
17
|
var CircleProgress = function (props) {
|
|
19
18
|
var _a, _b;
|
|
20
19
|
return (0, jsx_runtime_1.jsxs)(CircleProgress_styled_1.CircleProgressStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(react_circular_progressbar_1.CircularProgressbarWithChildren, { styles: (0, react_circular_progressbar_1.buildStyles)({
|
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.CircleProgressStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.CircleProgressStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 343px;\n display: flex;\n justify-content: space-between;\n font-family: var(--font-family-sans-serif);\n div.icon {\n width: 56px;\n height: 56px;\n }\n\n div.info {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n \n h1 {\n color: var(--dark);\n margin: 0 0 4px;\n }\n p {\n color: var(--dark-opacity-50);\n margin: 0;\n }\n }\n \n div.text {\n color: var(--dark);\n \n }\n"], ["\n width: 343px;\n display: flex;\n justify-content: space-between;\n font-family: var(--font-family-sans-serif);\n div.icon {\n width: 56px;\n height: 56px;\n }\n\n div.info {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n \n h1 {\n color: var(--dark);\n margin: 0 0 4px;\n }\n p {\n color: var(--dark-opacity-50);\n margin: 0;\n }\n }\n \n div.text {\n color: var(--dark);\n \n }\n"])));
|
|
12
|
+
exports.CircleProgressStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 343px;\n display: flex;\n justify-content: space-between;\n font-family: var(--font-family-sans-serif);\n div.icon {\n width: 56px;\n height: 56px;\n }\n\n div.info {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n \n h1 {\n color: var(--dark);\n margin: 0 0 4px;\n }\n p {\n color: var(--dark-opacity-50);\n margin: 0;\n }\n }\n \n div.text {\n color: var(--dark);\n \n }\n\n\n .CircularProgressbar {\n width: 100%;\n vertical-align: middle;\n\n .CircularProgressbar-path {\n stroke-linecap: round;\n -webkit-transition: stroke-dashoffset 0.5s ease 0s;\n transition: stroke-dashoffset 0.5s ease 0s;\n }\n\n .CircularProgressbar-trail {\n stroke-linecap: round;\n }\n\n .CircularProgressbar-text {\n dominant-baseline: middle;\n text-anchor: middle;\n }\n\n \n }\n\n .CircularProgressbar.CircularProgressbar-inverted {\n\n .CircularProgressbar-trail {\n stroke: transparent;\n }\n }\n\n"], ["\n width: 343px;\n display: flex;\n justify-content: space-between;\n font-family: var(--font-family-sans-serif);\n div.icon {\n width: 56px;\n height: 56px;\n }\n\n div.info {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n \n h1 {\n color: var(--dark);\n margin: 0 0 4px;\n }\n p {\n color: var(--dark-opacity-50);\n margin: 0;\n }\n }\n \n div.text {\n color: var(--dark);\n \n }\n\n\n .CircularProgressbar {\n width: 100%;\n vertical-align: middle;\n\n .CircularProgressbar-path {\n stroke-linecap: round;\n -webkit-transition: stroke-dashoffset 0.5s ease 0s;\n transition: stroke-dashoffset 0.5s ease 0s;\n }\n\n .CircularProgressbar-trail {\n stroke-linecap: round;\n }\n\n .CircularProgressbar-text {\n dominant-baseline: middle;\n text-anchor: middle;\n }\n\n \n }\n\n .CircularProgressbar.CircularProgressbar-inverted {\n\n .CircularProgressbar-trail {\n stroke: transparent;\n }\n }\n\n"])));
|
|
13
13
|
var templateObject_1;
|
|
@@ -41,11 +41,12 @@ var Input = function (props) {
|
|
|
41
41
|
var newType = inputType === 'password' ? 'text' : 'password';
|
|
42
42
|
setInputType(newType);
|
|
43
43
|
};
|
|
44
|
-
return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("top caption-bold-12-15", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)), children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)("a", __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick, children: props === null || props === void 0 ? void 0 : props.customLinkText }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "input", children: [(0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ type: inputType }, other)), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", { onClick: toggleInputType, className: "showHide", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: inputType === 'password' ? 'Show' : 'Hide' }) })] }), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: props === null || props === void 0 ? void 0 : props.errorMessage })] })] });
|
|
44
|
+
return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, { width: props.width, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("top caption-bold-12-15", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)), children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)("a", __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick, children: props === null || props === void 0 ? void 0 : props.customLinkText }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "input", children: [(0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ type: inputType }, other)), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", { onClick: toggleInputType, className: "showHide", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: inputType === 'password' ? 'Show' : 'Hide' }) })] }), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: props === null || props === void 0 ? void 0 : props.errorMessage })] })] });
|
|
45
45
|
};
|
|
46
46
|
Input.defaultValues = {
|
|
47
47
|
hasError: false,
|
|
48
48
|
label: "Label",
|
|
49
|
-
type: "text"
|
|
49
|
+
type: "text",
|
|
50
|
+
width: "370px"
|
|
50
51
|
};
|
|
51
52
|
exports.default = Input;
|
|
@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
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:
|
|
13
|
-
exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width:
|
|
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\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 }\n }\n\n .input {\n position: relative;\n\n .showHide {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\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 }\n }\n\n .input {\n position: relative;\n\n .showHide {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\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: var(--dark-opacity-3);\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: var(--dark-opacity-3);\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n"])), 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.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
14
14
|
var templateObject_1, templateObject_2;
|