oolib 2.206.4 → 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.
- package/dist/v2/components/BlockLabel/index.js +2 -1
- package/dist/v2/components/Tags/Comps/Tag/index.js +2 -43
- package/dist/v2/components/Tags/Comps/TagDisplay/index.js +9 -1
- package/dist/v2/components/TextInputs/index.js +5 -5
- package/dist/v2/components/TextInputs/index.styled.js +1 -1
- package/dist/v2/themes/globalStyles.js +1 -1
- package/package.json +1 -1
|
@@ -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,
|
|
@@ -1,41 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
-
if (k2 === undefined) k2 = k;
|
|
8
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
-
}
|
|
12
|
-
Object.defineProperty(o, k2, desc);
|
|
13
|
-
}) : (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
o[k2] = m[k];
|
|
16
|
-
}));
|
|
17
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
-
}) : function(o, v) {
|
|
20
|
-
o["default"] = v;
|
|
21
|
-
});
|
|
22
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
23
|
-
var ownKeys = function(o) {
|
|
24
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
25
|
-
var ar = [];
|
|
26
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
27
|
-
return ar;
|
|
28
|
-
};
|
|
29
|
-
return ownKeys(o);
|
|
30
|
-
};
|
|
31
|
-
return function (mod) {
|
|
32
|
-
if (mod && mod.__esModule) return mod;
|
|
33
|
-
var result = {};
|
|
34
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
35
|
-
__setModuleDefault(result, mod);
|
|
36
|
-
return result;
|
|
37
|
-
};
|
|
38
|
-
})();
|
|
39
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
40
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
41
4
|
};
|
|
@@ -45,20 +8,17 @@ var react_1 = __importDefault(require("react"));
|
|
|
45
8
|
var styled_1 = require("./styled");
|
|
46
9
|
var icons_1 = require("../../../../../icons");
|
|
47
10
|
var styled_2 = require("./styled");
|
|
48
|
-
var styled_components_1 =
|
|
11
|
+
var styled_components_1 = require("styled-components");
|
|
49
12
|
var themes_1 = require("../../../../themes");
|
|
50
|
-
var mixins_1 = require("../../../../../themes/mixins");
|
|
51
13
|
var grey40 = themes_1.colors.grey40;
|
|
52
14
|
var Tag = function (_a) {
|
|
53
15
|
var id = _a.id, _b = _a.fill, fill = _b === void 0 ? "solid" : _b, _c = _a.size, size = _c === void 0 ? "S" : _c, display = _a.display, icon = _a.icon, weight = _a.weight, onClick = _a.onClick, variant = _a.variant, typo = _a.typo, badgeColor = _a.badgeColor, style = _a.style;
|
|
54
16
|
var Icon = icons_1.icons[icon];
|
|
55
17
|
var theme = (0, styled_components_1.useTheme)();
|
|
56
18
|
var Typo = typo || styled_2.Styled_UI_CAPTION_DF;
|
|
57
|
-
// ellipsis style to props typo
|
|
58
|
-
var StyledTypo = typo ? (0, styled_components_1.default)(Typo)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), mixins_1.ellipsis) : Typo;
|
|
59
19
|
return (react_1.default.createElement(styled_1.StyledTag, { id: id, fill: fill, size: size, icon: icon, onClick: onClick, variant: variant, colors: theme === null || theme === void 0 ? void 0 : theme.colors, style: style },
|
|
60
20
|
badgeColor && react_1.default.createElement("div", { style: { background: badgeColor, width: "1rem", height: "1rem", borderRadius: "50%", marginRight: "0.2rem" } }),
|
|
61
|
-
react_1.default.createElement(
|
|
21
|
+
react_1.default.createElement(Typo, { weight: weight },
|
|
62
22
|
" ",
|
|
63
23
|
display,
|
|
64
24
|
" "),
|
|
@@ -67,4 +27,3 @@ var Tag = function (_a) {
|
|
|
67
27
|
react_1.default.createElement(Icon, { size: size === "XS" ? 10 : 12, weight: "bold", style: { color: grey40 } }))));
|
|
68
28
|
};
|
|
69
29
|
exports.Tag = Tag;
|
|
70
|
-
var templateObject_1;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
2
6
|
var __assign = (this && this.__assign) || function () {
|
|
3
7
|
__assign = Object.assign || function(t) {
|
|
4
8
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -20,12 +24,16 @@ var Typo2_1 = require("../../../Typo2");
|
|
|
20
24
|
var Tag_1 = require("../Tag");
|
|
21
25
|
var themes_1 = require("../../../../themes");
|
|
22
26
|
var getTagDisplayStyles_1 = require("./getTagDisplayStyles");
|
|
27
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
28
|
+
var mixins_1 = require("../../../../../themes/mixins");
|
|
23
29
|
var white = themes_1.colors.white;
|
|
30
|
+
var STYLED_UI_TAG_DF = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mixins_1.ellipsis);
|
|
24
31
|
var TagDisplay = function (_a) {
|
|
25
32
|
var id = _a.id, display = _a.display, size = _a.size,
|
|
26
33
|
// tagColor,
|
|
27
34
|
// textColor,
|
|
28
35
|
fill = _a.fill, icon = _a.icon, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight;
|
|
29
|
-
return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, size: size, fill: fill, style: __assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), typo:
|
|
36
|
+
return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, size: size, fill: fill, style: __assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), typo: STYLED_UI_TAG_DF }));
|
|
30
37
|
};
|
|
31
38
|
exports.TagDisplay = TagDisplay;
|
|
39
|
+
var templateObject_1;
|
|
@@ -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);
|