krl-alfred 1.80.8 → 1.80.9
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.
|
@@ -74,7 +74,7 @@ var Input = function (_a) {
|
|
|
74
74
|
inputRef.current.blur();
|
|
75
75
|
};
|
|
76
76
|
var CustomDateInput = (0, react_1.forwardRef)(function (props, ref) {
|
|
77
|
-
return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: ref, "$hasError": hasError }, props)));
|
|
77
|
+
return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: ref, "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, props)));
|
|
78
78
|
});
|
|
79
79
|
var handleClearValue = function () {
|
|
80
80
|
setInputValue(null);
|
|
@@ -98,6 +98,6 @@ var Input = function (_a) {
|
|
|
98
98
|
} }) })) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
|
|
99
99
|
onChange(e);
|
|
100
100
|
setInputValue(e.currentTarget.value);
|
|
101
|
-
}, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id }, other))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "CloseBig", width: "1rem", height: "1rem" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
|
|
101
|
+
}, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "CloseBig", width: "1rem", height: "1rem" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
|
|
102
102
|
};
|
|
103
103
|
exports.default = Input;
|
|
@@ -11,6 +11,6 @@ exports.DatePickerWrapperStyled = exports.InputStyled = exports.Container = expo
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"], ["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
|
|
13
13
|
exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 20.5px;\n right: 1.5rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 20.5px;\n right: 1.5rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n"])), function (props) { return props.$width || '370px'; });
|
|
14
|
-
exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, 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.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, 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
|
+
exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, 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.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, 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)'; });
|
|
15
15
|
exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n\n .react-datepicker__triangle {\n display: none !important;\n }\n\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n\n &:hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: 0 1.5rem 1rem 1.5rem !important;\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0.5rem 1.5rem !important;\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n\n &:is(.react-datepicker__day--selected), &:hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--today) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"], ["\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n\n .react-datepicker__triangle {\n display: none !important;\n }\n\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n\n &:hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: 0 1.5rem 1rem 1.5rem !important;\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0.5rem 1.5rem !important;\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n\n &:is(.react-datepicker__day--selected), &:hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--today) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"])));
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|