oolib 2.206.5 → 2.206.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.
|
@@ -73,9 +73,10 @@ var BlockLabel = function (props) {
|
|
|
73
73
|
var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 //this first condition seems like a proper hack..
|
|
74
74
|
? "danger"
|
|
75
75
|
: errorMsgs[0].type || "danger";
|
|
76
|
+
var LABEL_TYPO = readOnly ? Typo2_1.UI_BODY_BOLD_SM_DF : Typo2_1.UI_BODY_SM_DF;
|
|
76
77
|
return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: __assign(__assign({}, style), { marginBottom: (marginBottom || (sublabel ? '0.6rem' : '0.4rem')) }), className: className, id: "tempBlocklabelOverride", sublabel: sublabel, S: S },
|
|
77
78
|
react_1.default.createElement("div", { style: { display: "flex", gap: "0.4rem" } },
|
|
78
|
-
(label || inputOnlyLabel) && (react_1.default.createElement(
|
|
79
|
+
(label || inputOnlyLabel) && (react_1.default.createElement(LABEL_TYPO, { color: disabled ? colors_1.colors.grey40 : colors_1.colors.grey80 }, label || inputOnlyLabel)),
|
|
79
80
|
!readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null,
|
|
80
81
|
optional && !hideOptionalLabel && (react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { color: disabled ? colors_1.colors.grey20 : colors_1.colors.grey40 }, "(optional)")),
|
|
81
82
|
!readOnly && hints ? (react_1.default.createElement(Hints_1.default, { id: id, title: hintsTitle, btnlabel: hintsBtnLabel, subtitle: hintsSubtitle, hints: hints, disabled: disabled })) : null,
|
|
@@ -199,14 +199,14 @@ function TextInput(_a) {
|
|
|
199
199
|
? react_1.default.createElement(OKELink_1.OKELink, { text: value, to: value })
|
|
200
200
|
: react_1.default.createElement(Typo2_1.UI_BODY_SM, null, type === "password" ? "********" : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
201
201
|
react_1.default.createElement(index_styled_1.InputContainerStyled, { type: type, disabled: disabled, iconAfter: iconAfter, onClick: function () { return inputRef.current.focus(); }, size: size },
|
|
202
|
-
icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, color: disabled ? themes_1.colors.grey40 : themes_1.colors.grey80, size: screenWidth >= (0, mixins_1.getBreakPoint)('md') ? 16 : 18, onClick: !disabled ? iconOnClick || null : undefined
|
|
202
|
+
icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, color: disabled ? themes_1.colors.grey40 : themes_1.colors.grey80, size: screenWidth >= (0, mixins_1.getBreakPoint)('md') ? 16 : 18, onClick: !disabled ? iconOnClick || null : undefined })),
|
|
203
203
|
react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: "UI_BODY_SM_DF", id: id, type: type, name: type, disabled: disabled, placeholder: localize(placeholder), value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: validateOnlyOnBlur ? function (e) { return handleValidate(e, onBlur); } : onBlur, size: size, onFocus: onFocus, autoComplete: "off" }),
|
|
204
|
-
validationStatus === "loading" && (react_1.default.createElement("div",
|
|
204
|
+
validationStatus === "loading" && (react_1.default.createElement("div", null,
|
|
205
205
|
react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true }))),
|
|
206
|
-
(validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success" && (react_1.default.createElement("div",
|
|
206
|
+
(validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success" && (react_1.default.createElement("div", null,
|
|
207
207
|
react_1.default.createElement(BadgeVetted, { size: 26 }))),
|
|
208
|
-
(clearBtn && clearBtnEnabled) && (react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem'
|
|
209
|
-
actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimaryCompact, { value: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text) || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem'
|
|
208
|
+
(clearBtn && clearBtnEnabled) && (react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } /** so that it stays ahead of the before element inside InputContainerStyled */ })),
|
|
209
|
+
actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimaryCompact, { value: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text) || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } /** so that it stays ahead of the before element inside InputContainerStyled */ }))),
|
|
210
210
|
displayValidationMsg && (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainerStyled, { status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
|
|
211
211
|
(validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "error" && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { size: 12, icon: "WarningDiamond", weight: "fill", color: themes_1.colors.error })),
|
|
212
212
|
react_1.default.createElement(Typo2_1.UI_HELPTEXT, null,
|
|
@@ -61,7 +61,7 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_5
|
|
|
61
61
|
var readOnly = _a.readOnly;
|
|
62
62
|
return readOnly && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "])));
|
|
63
63
|
});
|
|
64
|
-
exports.InputStyled = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: ", ";\n border: none;\n outline: none;\n flex-grow: 1;\n
|
|
64
|
+
exports.InputStyled = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: ", ";\n border: none;\n outline: none;\n flex-grow: 1;\n background: transparent;\n color: inherit;\n\n &:-webkit-autofill {\n transition-delay: 9999s;\n }\n\n ::placeholder {\n ", ";\n opacity: 1;\n }\n"], ["\n height: ", ";\n border: none;\n outline: none;\n flex-grow: 1;\n background: transparent;\n color: inherit;\n\n &:-webkit-autofill {\n transition-delay: 9999s;\n }\n\n ::placeholder {\n ", ";\n opacity: 1;\n }\n"])), function (_a) {
|
|
65
65
|
var size = _a.size;
|
|
66
66
|
return size === "S" ? "36px" : "45px";
|
|
67
67
|
}, globalStyles_1.globalInputElemPlaceholderColor);
|
|
@@ -13,7 +13,7 @@ exports.globalInputElemPadding_v2 = (0, styled_components_1.css)(templateObject_
|
|
|
13
13
|
});
|
|
14
14
|
exports.globalInputElemHover_v2 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:hover {\n &::before{\n border: 1px solid ", ";\n /* box-shadow: 0 4px 10px #00000012; */\n }\n }\n"], ["\n &:hover {\n &::before{\n border: 1px solid ", ";\n /* box-shadow: 0 4px 10px #00000012; */\n }\n }\n"])), colors_1.colors.grey30);
|
|
15
15
|
exports.globalInputElemFocused_v2 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n&:focus-within {\n &::before{\n border: 1px solid ", ";\n box-shadow: 0 4px 10px #00000012;\n }\n }\n"], ["\n&:focus-within {\n &::before{\n border: 1px solid ", ";\n box-shadow: 0 4px 10px #00000012;\n }\n }\n"])), colors_1.colors.grey80);
|
|
16
|
-
exports.globalInputElemBaseBorderStyling_v2 = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n&::before {\n content: \"\";\n background-color: ", ";\n position: absolute;\n z-index:
|
|
16
|
+
exports.globalInputElemBaseBorderStyling_v2 = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n&::before {\n content: \"\";\n background-color: ", ";\n position: absolute;\n z-index: -1;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid ", ";\n border-radius: 6px;\n }\n"], ["\n&::before {\n content: \"\";\n background-color: ", ";\n position: absolute;\n z-index: -1;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid ", ";\n border-radius: 6px;\n }\n"])), colors_1.colors.white, colors_1.colors.grey10);
|
|
17
17
|
exports.globalInputElemDisabledStyling_v2 = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n", ";\n"], ["\n", ";\n"])), function (_a) {
|
|
18
18
|
var disabled = _a.disabled;
|
|
19
19
|
return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &::before{\n border-color: ", ";\n }\n \n color: ", ";\n "], ["\n &::before{\n border-color: ", ";\n }\n \n color: ", ";\n "])), colors_1.colors.grey10, colors_1.colors.grey40);
|