oolib 2.24.2 → 2.24.4
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/components/BlockLabel/index.js +2 -1
- package/dist/components/Buttons/index.styled.js +1 -1
- package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js +2 -2
- package/dist/components/RadioAndCheckbox/comps/CheckboxList/index.js +2 -3
- package/dist/components/RadioAndCheckbox/comps/CheckboxList/styled.js +1 -1
- package/dist/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index.js +1 -1
- package/dist/globalStyles/index.js +1 -1
- package/package.json +1 -1
|
@@ -9,6 +9,7 @@ var Typo_1 = require("../Typo");
|
|
|
9
9
|
var InlineAlert_1 = require("../InlineAlert");
|
|
10
10
|
var index_styled_1 = require("./index.styled");
|
|
11
11
|
var colors_1 = require("../../themes/colors");
|
|
12
|
+
var toArray_1 = require("../../utils/toArray");
|
|
12
13
|
var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
|
|
13
14
|
var BlockLabel = function (props) {
|
|
14
15
|
var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs;
|
|
@@ -31,6 +32,6 @@ var BlockLabel = function (props) {
|
|
|
31
32
|
optional && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, '(optional)')),
|
|
32
33
|
!readOnly &&
|
|
33
34
|
(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),
|
|
34
|
-
!readOnly && sublabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 },
|
|
35
|
+
!readOnly && sublabel && (0, toArray_1.toArray)(sublabel).map(function (subL) { return (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, subL)); }))));
|
|
35
36
|
};
|
|
36
37
|
exports.BlockLabel = BlockLabel;
|
|
@@ -169,7 +169,7 @@ var buttonVariantSetting = {
|
|
|
169
169
|
custom: ButtonCustom,
|
|
170
170
|
googleAuth: GoogleButton,
|
|
171
171
|
};
|
|
172
|
-
exports.ButtonStyled = styled_components_1.default.button(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n ", "\n\n ", "\n\n white-space: nowrap;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n cursor: pointer;\n border: none;\n border-radius: 2px;\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n white-space: nowrap;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n cursor: pointer;\n border: none;\n border-radius: 2px;\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
172
|
+
exports.ButtonStyled = styled_components_1.default.button(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n ", "\n\n ", "\n\n white-space: nowrap;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n cursor: pointer;\n border: none;\n border-radius: 2px;\n\n &:disabled{\n cursor: not-allowed;\n }\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n white-space: nowrap;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n cursor: pointer;\n border: none;\n border-radius: 2px;\n\n &:disabled{\n cursor: not-allowed;\n }\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
173
173
|
var composition = _a.composition, size = _a.size;
|
|
174
174
|
switch (composition) {
|
|
175
175
|
case "iconOnly":
|
|
@@ -27,10 +27,10 @@ var Check = icons_1.icons.Check, CheckSquare = icons_1.icons.CheckSquare, XSquar
|
|
|
27
27
|
var white = themes_1.colors.white, green = themes_1.colors.green, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100;
|
|
28
28
|
var CheckboxInput = function (_a) {
|
|
29
29
|
var option = _a.option, onClick = _a.onClick, S = _a.S, inputStyle = _a.inputStyle, _b = _a.value, value = _b === void 0 ? [] : _b, invert = _a.invert, disabled = _a.disabled, rightWrongResult = _a.rightWrongResult;
|
|
30
|
-
var isSelected = value.find(function (selOp) { return selOp.value === option.value; });
|
|
30
|
+
var isSelected = !!value.find(function (selOp) { return selOp.value === option.value; });
|
|
31
31
|
var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
|
|
32
32
|
var SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
|
|
33
|
-
return inputStyle === 'tagSelect' ? (react_1.default.createElement(Tags_1.TagSelect, __assign({}, { isSelected: isSelected, invert: invert, disabled: disabled }, { onClick: function () { return !disabled && onClick(option, isSelected); }, display: option.display, value: option.value, style: { alignSelf: 'flex-start' } }))) : (react_1.default.createElement(styled_1.StyledOption, __assign({}, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick(option, isSelected); } }),
|
|
33
|
+
return inputStyle === 'tagSelect' ? (react_1.default.createElement(Tags_1.TagSelect, __assign({}, { isSelected: isSelected, invert: invert, disabled: disabled }, { onClick: function () { return !disabled && onClick && onClick(option, isSelected); }, display: option.display, value: option.value, style: { alignSelf: 'flex-start' } }))) : (react_1.default.createElement(styled_1.StyledOption, __assign({}, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick && onClick(option, isSelected); } }),
|
|
34
34
|
!rightWrongResult || markingCommand === undefined ?
|
|
35
35
|
react_1.default.createElement(styled_2.StyledCheckbox, __assign({ className: "btn" }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected &&
|
|
36
36
|
react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16, style: { flexShrink: 0 } }))
|
|
@@ -51,8 +51,7 @@ var optionsContainers = {
|
|
|
51
51
|
};
|
|
52
52
|
var convToString = function (value) { return value.map(function (v) { var _a; return (_a = v.display_desc) !== null && _a !== void 0 ? _a : v.value; }); };
|
|
53
53
|
function CheckboxList(_a) {
|
|
54
|
-
var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, _c = _a.value, valueProp = _c === void 0 ? [] : _c, onChange = _a.onChange, commonIsCorrectDesc = _a.commonIsCorrectDesc, options = _a.options, saveValueAsString = _a.saveValueAsString, _d = _a.inputStyle, inputStyle = _d === void 0 ? 'checkbox' : _d, rightWrongResult = _a.rightWrongResult, listType = _a.listType, invert = _a.invert, _e = _a.optionsLimit, optionsLimit = _e === void 0 ? Infinity : _e, style = _a.style,
|
|
55
|
-
disabled = _a.disabled, className = _a.className, S = _a.S, readOnly = _a.readOnly;
|
|
54
|
+
var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, _c = _a.value, valueProp = _c === void 0 ? [] : _c, onChange = _a.onChange, commonIsCorrectDesc = _a.commonIsCorrectDesc, options = _a.options, saveValueAsString = _a.saveValueAsString, _d = _a.inputStyle, inputStyle = _d === void 0 ? 'checkbox' : _d, rightWrongResult = _a.rightWrongResult, listType = _a.listType, invert = _a.invert, _e = _a.optionsLimit, optionsLimit = _e === void 0 ? Infinity : _e, style = _a.style, disabled = _a.disabled, className = _a.className, S = _a.S, readOnly = _a.readOnly;
|
|
56
55
|
var props = arguments[0];
|
|
57
56
|
var shouldHideSomeOptions = options.length > optionsLimit;
|
|
58
57
|
var _f = (0, react_1.useState)(false), seeMore = _f[0], setSeeMore = _f[1];
|
|
@@ -90,7 +89,7 @@ function CheckboxList(_a) {
|
|
|
90
89
|
return (react_1.default.createElement("div", { className: className, id: id },
|
|
91
90
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
|
|
92
91
|
readOnly ? (react_1.default.createElement(styled_2.StyledDisplayTagsContainer, null, value === null || value === void 0 ? void 0 : value.map(function (selOp) { return react_1.default.createElement(Tags_1.TagDisplay, { key: selOp.value, invert: invert, display: selOp.display_desc || selOp.display }); }))) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
93
|
-
react_1.default.createElement(OptionsContainer, { listType: listType, S: S }, typicalOptions === null || typicalOptions === void 0 ? void 0 :
|
|
92
|
+
react_1.default.createElement(OptionsContainer, __assign({}, { style: style, listType: listType, S: S }), typicalOptions === null || typicalOptions === void 0 ? void 0 :
|
|
94
93
|
typicalOptions.map(function (option, idx) { return idx < optionsLimit && (react_1.default.createElement(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })))); }),
|
|
95
94
|
shouldHideSomeOptions && // if we have the case of off limit options
|
|
96
95
|
(seeMore || rightWrongResult) && //and decided to show them
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.StyledTagOptionsContainer = exports.StyledDisplayTagsContainer = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.StyledDisplayTagsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n"])));
|
|
13
|
-
exports.StyledTagOptionsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n flex-direction: ", ";\n gap: 1rem;\n
|
|
13
|
+
exports.StyledTagOptionsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n flex-direction: ", ";\n gap: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n flex-direction: ", ";\n gap: 1rem;\n"])), function (_a) {
|
|
14
14
|
var listType = _a.listType;
|
|
15
15
|
return listType === 'vertical' ? 'column' : 'row';
|
|
16
16
|
});
|
|
@@ -29,7 +29,7 @@ var RadioInput = function (_a) {
|
|
|
29
29
|
var isSelected = option.value === (value === null || value === void 0 ? void 0 : value.value);
|
|
30
30
|
var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
|
|
31
31
|
var SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
|
|
32
|
-
return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { disabled: disabled, rightWrongResult: rightWrongResult, isSelected: isSelected, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick(option); } }),
|
|
32
|
+
return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { disabled: disabled, rightWrongResult: rightWrongResult, isSelected: isSelected, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick && onClick(option); } }),
|
|
33
33
|
!rightWrongResult || markingCommand === undefined ?
|
|
34
34
|
react_1.default.createElement(styled_2.StyledRadioInput, __assign({ className: 'btn' }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected && react_1.default.createElement(styled_2.StyledRadioInputFill, { invert: invert, S: S }))
|
|
35
35
|
:
|
|
@@ -11,5 +11,5 @@ var normalize_1 = require("./normalize");
|
|
|
11
11
|
var mixins_1 = require("../themes/mixins");
|
|
12
12
|
require("../assets/fonts/style.css");
|
|
13
13
|
var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
|
|
14
|
-
exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n\n \n"])), normalize_1.normalize, greyColor100, (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar { \n width: 0.7rem;// for vertical bars\n height: 0.5rem; //for
|
|
14
|
+
exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n\n \n"])), normalize_1.normalize, greyColor100, (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar { \n width: 0.7rem;// for vertical bars\n height: 0.5rem; //for horizontal bars \n }\n ::-webkit-scrollbar-track {background-color: ", ";}\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.4rem;\n }\n ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n ", "{\n ::-webkit-scrollbar { \n width: 1rem;\n height: 0.7rem;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 0.5rem;\n }\n }"], ["\n ::-webkit-scrollbar { \n width: 0.7rem;// for vertical bars\n height: 0.5rem; //for horizontal bars \n }\n ::-webkit-scrollbar-track {background-color: ", ";}\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.4rem;\n }\n ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n ", "{\n ::-webkit-scrollbar { \n width: 1rem;\n height: 0.7rem;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 0.5rem;\n }\n }"])), greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md')), greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
|
|
15
15
|
var templateObject_1, templateObject_2;
|