oolib 2.20.2 → 2.21.1

package/dist/components/{ToggleButton → Switches}/index.js

@@ -14,14 +14,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SingleToggleButton = exports.ToggleButton = void 0;
+exports.SwitchSingle = exports.SwitchDouble = void 0;
 var react_1 = __importDefault(require("react"));
 var BlockLabel_1 = require("../BlockLabel");
 var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var themes_1 = require("../../themes");
 var styled_1 = require("./styled");
 var greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white;
-function ToggleButton(_a) {
+function SwitchDouble(_a) {
     var id = _a.id, valueProp = _a.value, options = _a.options, onChange = _a.onChange, invert = _a.invert, saveValueAsString = _a.saveValueAsString, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
     var value = saveValueAsString
         ? options.find(function (d) { return d.value === valueProp; })
@@ -45,17 +45,27 @@ function ToggleButton(_a) {
     }
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-        react_1.default.createElement(styled_1.StyledToggleWrraper, null,
+        react_1.default.createElement(styled_1.StyledSwitchWrapper, null,
             react_1.default.createElement(styled_1.STYLED_LABEL, __assign({}, { lineHeight: 1, color: leftOptionColor, invert: invert }), options[0].display),
             react_1.default.createElement(styled_1.StyledButtonSlider, { invert: invert, disabled: disabled, onClick: handleClick },
-                react_1.default.createElement(styled_1.StyledToggleButton, { invert: invert, disabled: disabled, direction: isLeftOptionActive ? "left" : "right" })),
+                react_1.default.createElement(styled_1.StyledSwitch, { className: 'StyledSwitch' //read in styled.js why we are using an okf-anti-pattern
+                    , invert: invert, disabled: disabled, direction: isLeftOptionActive ? "left" : "right" })),
             react_1.default.createElement(styled_1.STYLED_LABEL, __assign({}, { invert: invert, color: rightOptionColor, lineHeight: 1 }), options[1].display))));
 }
-exports.ToggleButton = ToggleButton;
-function SingleToggleButton(_a) {
-    var id = _a.id, value = _a.value, option = _a.option, onChange = _a.onChange, disabled = _a.disabled, invert = _a.invert, saveValueAsString = _a.saveValueAsString;
+exports.SwitchDouble = SwitchDouble;
+function SwitchSingle(_a) {
+    var id = _a.id, value = _a.value, option = _a.option, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, invert = _a.invert, saveValueAsString = _a.saveValueAsString;
     var props = arguments[0];
-    var isInactive = value === undefined;
+    /**
+     * very important that we check this way,
+     * as opposed to checking as 'value === undefined'
+     *
+     * because in some cases in the TCI, the initial value
+     * is not equal to undefined. it is equal to 'false' or something else
+     */
+    var isInactive = saveValueAsString
+        ? value !== option.value
+        : (value === null || value === void 0 ? void 0 : value.value) !== option.value;
     var handleClick = function (v) {
         !disabled &&
             onChange &&
@@ -66,9 +76,10 @@ function SingleToggleButton(_a) {
         labelColor = isInactive ? greyColor40 : white;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-        react_1.default.createElement(styled_1.StyledToggleWrraper, null,
+        react_1.default.createElement(styled_1.StyledSwitchWrapper, null,
             react_1.default.createElement(styled_1.StyledButtonSlider, { inactive: isInactive, disabled: disabled, invert: invert, onClick: handleClick },
-                react_1.default.createElement(styled_1.StyledToggleButton, { direction: isInactive ? "left" : "right", inactive: isInactive, disabled: disabled, invert: invert })),
+                react_1.default.createElement(styled_1.StyledSwitch, { className: 'StyledSwitch' //read in styled.js why we are using an okf-anti-pattern
+                    , direction: isInactive ? "left" : "right", inactive: isInactive, disabled: disabled, invert: invert })),
             react_1.default.createElement(styled_1.STYLED_LABEL, __assign({}, { invert: invert, color: labelColor, lineHeight: 1 }), option.display))));
 }
-exports.SingleToggleButton = SingleToggleButton;
+exports.SwitchSingle = SwitchSingle;

package/dist/components/Switches/styled.d.ts

@@ -0,0 +1,4 @@
+export const StyledSwitchWrapper: any;
+export const StyledButtonSlider: any;
+export const StyledSwitch: any;
+export const STYLED_LABEL: any;

package/dist/components/{ToggleButton → Switches}/styled.js

@@ -7,15 +7,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.STYLED_LABEL = exports.StyledToggleButton = exports.StyledButtonSlider = exports.StyledToggleWrraper = void 0;
+exports.STYLED_LABEL = exports.StyledSwitch = exports.StyledButtonSlider = exports.StyledSwitchWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var mixins_1 = require("../../themes/mixins");
 var utilsOolib_1 = require("../../utilsOolib");
 var themes_1 = require("../../themes");
 var Typo_1 = require("../Typo");
 var white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor80 = themes_1.colors.greyColor80, greyColor70 = themes_1.colors.greyColor70, greyColor100 = themes_1.colors.greyColor100, greyColor40 = themes_1.colors.greyColor40;
-exports.StyledToggleWrraper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  /* justify-content: center; */\n  align-items: center;\n  gap: 1rem;\n"], ["\n  display: flex;\n  /* justify-content: center; */\n  align-items: center;\n  gap: 1rem;\n"])));
-exports.StyledButtonSlider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 4rem;\n  height: 2rem;\n  user-select: none;\n  position: relative;\n  \n  border-radius: 1rem;\n  cursor: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  width: 4rem;\n  height: 2rem;\n  user-select: none;\n  position: relative;\n  \n  border-radius: 1rem;\n  cursor: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+exports.StyledSwitchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  /* justify-content: center; */\n  align-items: center;\n  gap: 1rem;\n"], ["\n  display: flex;\n  /* justify-content: center; */\n  align-items: center;\n  gap: 1rem;\n"])));
+exports.StyledButtonSlider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 4rem;\n  height: 2rem;\n  user-select: none;\n  position: relative;\n  \n  border-radius: 1rem;\n  cursor: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n\n    & > .StyledSwitch {\n      border-color: ", ";  \n    }\n  }\n\n  \n\n  ", "\n"], ["\n  width: 4rem;\n  height: 2rem;\n  user-select: none;\n  position: relative;\n  \n  border-radius: 1rem;\n  cursor: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n\n    & > .StyledSwitch {\n      border-color: ", ";  \n    }\n  }\n\n  \n\n  ", "\n"])), function (_a) {
     var disabled = _a.disabled;
     return disabled ? 'not-allowed' : 'pointer';
 }, function (_a) {
@@ -28,8 +28,11 @@ exports.StyledButtonSlider = styled_components_1.default.div(templateObject_2 ||
 }, function (_a) {
     var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
     return !disabled && (inactive ? greyColor40 : (0, utilsOolib_1.getPrimaryColorText)(colors));
+}, function (_a) {
+    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
+    return !disabled && (inactive ? greyColor40 : (0, utilsOolib_1.getPrimaryColorText)(colors));
 }, (0, mixins_1.transition)('background-color'));
-exports.StyledToggleButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  background-color: ", ";\n  outline: none;\n  ", ";\n  border-radius: 50%;\n  cursor: ", ";\n  border: 2px solid; \n  border-color: ", ";\n  position: absolute;\n  top: 0;\n  left: ", ";\n  \n"], ["\n  width: 2rem;\n  height: 2rem;\n  background-color: ", ";\n  outline: none;\n  ", ";\n  border-radius: 50%;\n  cursor: ", ";\n  border: 2px solid; \n  border-color: ", ";\n  position: absolute;\n  top: 0;\n  left: ", ";\n  \n"])), function (_a) {
+exports.StyledSwitch = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  background-color: ", ";\n  outline: none;\n  ", ";\n  border-radius: 50%;\n  cursor: ", ";\n  border: 2px solid; \n  border-color: ", ";\n  position: absolute;\n  top: 0;\n  left: ", ";\n\n  /**\n  this is the styled comps way of dealing with child hover.\n  But it is a buggy functionality. Probably an issue at\n  the styled-components package level. Should report on their github\n\n  Instead we use the oldschool class approach for child hover (line 40)\n  */\n  /* ", ":hover & {\n      border-color: ", ";  \n    } */\n  \n"], ["\n  width: 2rem;\n  height: 2rem;\n  background-color: ", ";\n  outline: none;\n  ", ";\n  border-radius: 50%;\n  cursor: ", ";\n  border: 2px solid; \n  border-color: ", ";\n  position: absolute;\n  top: 0;\n  left: ", ";\n\n  /**\n  this is the styled comps way of dealing with child hover.\n  But it is a buggy functionality. Probably an issue at\n  the styled-components package level. Should report on their github\n\n  Instead we use the oldschool class approach for child hover (line 40)\n  */\n  /* ", ":hover & {\n      border-color: ", ";  \n    } */\n  \n"])), function (_a) {
     var invert = _a.invert;
     return invert ? greyColor100 : white;
 }, (0, mixins_1.transition)('border-color', 'left 0.2s'), function (_a) {
@@ -45,6 +48,9 @@ exports.StyledToggleButton = styled_components_1.default.button(templateObject_3
 }, function (_a) {
     var direction = _a.direction;
     return direction === 'left' ? '0' : 'calc(100% - 2rem)';
+}, exports.StyledButtonSlider, function (_a) {
+    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
+    return !disabled && (inactive ? greyColor40 : (0, utilsOolib_1.getPrimaryColorText)(colors));
 });
 exports.STYLED_LABEL = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\ncolor: ", ";\nline-height: ", ";\n", "\n"], ["\ncolor: ", ";\nline-height: ", ";\n", "\n"])), function (_a) {
     var color = _a.color;

package/dist/components/TabBar/index.styled.js

@@ -85,7 +85,7 @@ exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_14 ||
         ? tabBarWrapperStyle1
         : tabBarStyle === "2" && tabBarWrapperStyle2;
 });
-exports.TabBarTabStyled = styled_components_1.default.button(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  padding: 0 2rem;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  padding: 0 2rem;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), greyColor100, none, none, function (_a) {
+exports.TabBarTabStyled = styled_components_1.default.button(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  padding: 0 2rem;\n  height: 100%;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  padding: 0 2rem;\n  height: 100%;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), greyColor100, none, none, function (_a) {
     var tabBarStyle = _a.tabBarStyle;
     return tabBarStyle === "1"
         ? tabBarTabStyle1

package/dist/components/TextInputs/index.js

@@ -74,7 +74,7 @@ exports.NumberInput = exports.URLInput = exports.PhoneInput = exports.EmailInput
 var react_1 = __importStar(require("react"));
 var index_styled_1 = require("./index.styled");
 var icons_1 = require("../../icons");
-var LoadersAndProgressBars_1 = require("../LoadersAndProgressBars");
+var LoadersAndProgress_1 = require("../LoadersAndProgress");
 var BlockLabel_1 = require("../BlockLabel");
 var Typo_1 = require("../Typo");
 var Buttons_1 = require("../Buttons");
@@ -126,7 +126,7 @@ var TextInput = function (props) {
                     icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),
                     react_1.default.createElement(index_styled_1.InputStyled, { className: size === 'S' ? 'SANS_2' : 'SANS_3', id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxNumLimiter, onBlur: handleValidateOnBlur, onFocus: onFocus, size: size, autoComplete: 'off' }),
                     inputStatus === 'loading' && (react_1.default.createElement("div", { style: { padding: '1rem 0' } },
-                        react_1.default.createElement(LoadersAndProgressBars_1.Loader, { invert: invert, inline: true }))),
+                        react_1.default.createElement(LoadersAndProgress_1.Loader, { invert: invert, inline: true }))),
                     actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: '-2rem' } }))),
                 (inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainer, { invert: invert, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type },
                     react_1.default.createElement(Typo_1.SANS_3, null, inputStatus.msg))))))));

package/dist/icons/index.d.ts

@@ -7,6 +7,7 @@ export namespace icons {
     export { CaretLeft };
     export { CaretRight };
     export { XCircle };
+    export { XSquare };
     export { DownloadSimple };
     export { ArrowLineUpRight };
     export { User };
@@ -98,6 +99,7 @@ import { UploadSimple } from "phosphor-react";
 import { CaretLeft } from "phosphor-react";
 import { CaretRight } from "phosphor-react";
 import { XCircle } from "phosphor-react";
+import { XSquare } from "phosphor-react";
 import { DownloadSimple } from "phosphor-react";
 import { ArrowLineUpRight } from "phosphor-react";
 import { User } from "phosphor-react";

package/dist/icons/index.js

@@ -12,6 +12,7 @@ exports.icons = {
     CaretLeft: phosphor_react_1.CaretLeft,
     CaretRight: phosphor_react_1.CaretRight,
     XCircle: phosphor_react_1.XCircle,
+    XSquare: phosphor_react_1.XSquare,
     DownloadSimple: phosphor_react_1.DownloadSimple,
     ArrowLineUpRight: phosphor_react_1.ArrowLineUpRight,
     User: phosphor_react_1.User,

package/dist/index.d.ts

@@ -9,9 +9,10 @@ export * from "./components/InlineAlert";
 export * from "./components/TextInputs";
 export * from "./components/Container";
 export * from "./components/Wrappers";
-export * from "./components/ToggleButton";
+export * from "./components/Switches";
 export * from "./components/TabBar";
 export * from "./components/Banners";
+export * from "./components/RadioAndCheckbox";
 export * from "./utils/_EXPORTS";
 export { colors } from "./themes";
 export { icons } from "./icons";
@@ -20,8 +21,6 @@ export { UserRoleBadge } from "./components/UserRoleBadge";
 export { OKELink } from "./components/OKELink";
 export { Tooltip } from "./components/Tooltip";
 export { ActionMenu } from "./components/ActionMenu";
-export { RadioInput } from "./components/RadioInput";
-export { CheckInput } from "./components/CheckInput";
 export { PercentCompletedPie } from "./components/PercentCompletedPie";
 export { Divider } from "./components/Divider";
-export { CircleLoader, ProgressBar, CircleLoader as Loader } from "./components/LoadersAndProgressBars";
+export { CircleLoader, ProgressBar, CircleLoader as Loader } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Divider = exports.PercentCompletedPie = exports.CheckInput = exports.RadioInput = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.CircleLoader = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.Divider = exports.PercentCompletedPie = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.CircleLoader = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -26,11 +26,11 @@ var icons_1 = require("./icons");
 Object.defineProperty(exports, "icons", { enumerable: true, get: function () { return icons_1.icons; } });
 __exportStar(require("./components/Typo"), exports);
 //components
-var LoadersAndProgressBars_1 = require("./components/LoadersAndProgressBars");
-Object.defineProperty(exports, "CircleLoader", { enumerable: true, get: function () { return LoadersAndProgressBars_1.CircleLoader; } });
-Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return LoadersAndProgressBars_1.ProgressBar; } });
-var LoadersAndProgressBars_2 = require("./components/LoadersAndProgressBars"); //backwards compat till shen verifies
-Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return LoadersAndProgressBars_2.CircleLoader; } });
+var LoadersAndProgress_1 = require("./components/LoadersAndProgress");
+Object.defineProperty(exports, "CircleLoader", { enumerable: true, get: function () { return LoadersAndProgress_1.CircleLoader; } });
+Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return LoadersAndProgress_1.ProgressBar; } });
+var LoadersAndProgress_2 = require("./components/LoadersAndProgress"); //backwards compat till shen verifies
+Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return LoadersAndProgress_2.CircleLoader; } });
 __exportStar(require("./components/Buttons"), exports);
 __exportStar(require("./components/Tags"), exports);
 __exportStar(require("./components/Breadcrumbs"), exports);
@@ -39,9 +39,10 @@ __exportStar(require("./components/InlineAlert"), exports);
 __exportStar(require("./components/TextInputs"), exports);
 __exportStar(require("./components/Container"), exports);
 __exportStar(require("./components/Wrappers"), exports);
-__exportStar(require("./components/ToggleButton"), exports);
+__exportStar(require("./components/Switches"), exports);
 __exportStar(require("./components/TabBar"), exports);
 __exportStar(require("./components/Banners"), exports);
+__exportStar(require("./components/RadioAndCheckbox"), exports);
 var Section_1 = require("./components/Section");
 Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return Section_1.Section; } });
 var UserRoleBadge_1 = require("./components/UserRoleBadge");
@@ -52,10 +53,6 @@ var Tooltip_1 = require("./components/Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
 var ActionMenu_1 = require("./components/ActionMenu");
 Object.defineProperty(exports, "ActionMenu", { enumerable: true, get: function () { return ActionMenu_1.ActionMenu; } });
-var RadioInput_1 = require("./components/RadioInput");
-Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return RadioInput_1.RadioInput; } });
-var CheckInput_1 = require("./components/CheckInput");
-Object.defineProperty(exports, "CheckInput", { enumerable: true, get: function () { return CheckInput_1.CheckInput; } });
 var PercentCompletedPie_1 = require("./components/PercentCompletedPie");
 Object.defineProperty(exports, "PercentCompletedPie", { enumerable: true, get: function () { return PercentCompletedPie_1.PercentCompletedPie; } });
 var Divider_1 = require("./components/Divider");

package/dist/utils/_EXPORTS/index.d.ts

@@ -3,3 +3,4 @@ export { setVal } from "../getterSetterDeleter/setVal";
 export { deleteVal } from "../getterSetterDeleter/deleteVal";
 export { getBlockLabelProps } from "../getBlockLabelProps";
 export { injectHttps } from "../injectHttps";
+export { genValueFromDisplay } from "../genValueFromDisplay";

package/dist/utils/_EXPORTS/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectHttps = exports.getBlockLabelProps = exports.deleteVal = exports.setVal = exports.getVal = void 0;
+exports.genValueFromDisplay = exports.injectHttps = exports.getBlockLabelProps = exports.deleteVal = exports.setVal = exports.getVal = void 0;
 //the holy setter, getter & deleter
 var getVal_1 = require("../getterSetterDeleter/getVal");
 Object.defineProperty(exports, "getVal", { enumerable: true, get: function () { return getVal_1.getVal; } });
@@ -13,3 +13,5 @@ var getBlockLabelProps_1 = require("../getBlockLabelProps");
 Object.defineProperty(exports, "getBlockLabelProps", { enumerable: true, get: function () { return getBlockLabelProps_1.getBlockLabelProps; } });
 var injectHttps_1 = require("../injectHttps");
 Object.defineProperty(exports, "injectHttps", { enumerable: true, get: function () { return injectHttps_1.injectHttps; } });
+var genValueFromDisplay_1 = require("../genValueFromDisplay");
+Object.defineProperty(exports, "genValueFromDisplay", { enumerable: true, get: function () { return genValueFromDisplay_1.genValueFromDisplay; } });

package/dist/utils/genValueFromDisplay.d.ts

@@ -0,0 +1 @@
+export function genValueFromDisplay(text: any): any;

package/dist/utils/genValueFromDisplay.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.genValueFromDisplay = void 0;
+var genValueFromDisplay = function (text) {
+    var value_desc = ( // genrating a value text abiding js conventions (camelCased)
+    text
+        .trim()
+        .replace(/[,\/]/g, '') // removing comas and forward slashes 
+        .split(' ')
+        .filter(Boolean)
+        .map(function (word, idx) { return word[0]["to".concat(idx === 0 ? 'Lower' : 'Upper', "Case")]() + word.slice(1); })
+        .join(""));
+    return value_desc;
+};
+exports.genValueFromDisplay = genValueFromDisplay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.20.2",
+  "version": "2.21.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "react-json-view": "^1.21.3",
     "react-router-dom": "^5.1.2",
     "semantic-release": "^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.6"
   },
   "peerDependencies": {
     "react": "^17.0.2",

package/dist/components/CheckInput/index.d.ts

@@ -1 +0,0 @@
-export function CheckInput(props: any): JSX.Element;

package/dist/components/CheckInput/index.js

@@ -1,27 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckInput = void 0;
-var react_1 = __importDefault(require("react"));
-var BlockLabel_1 = require("../BlockLabel");
-var _EXPORTS_1 = require("../../utils/_EXPORTS");
-var CheckInput = function (props) {
-    var id = props.id, injectOtherOption = props.injectOtherOption, value = props.value, onChange = props.onChange, commonIsCorrectDesc = props.commonIsCorrectDesc, options = props.options, optionGroups = props.optionGroups, optionStyle = props.optionStyle, rightWrongResult = props.rightWrongResult, passChangeHandlerOps = props.passChangeHandlerOps, listType = props.listType, style = props.style, className = props.className, readOnly = props.readOnly;
-    return (react_1.default.createElement("div", { className: className, id: id },
-        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-        react_1.default.createElement("input", { type: "checkbox" })));
-};
-exports.CheckInput = CheckInput;

package/dist/components/RadioInput/comps/RadioOption/index.d.ts

@@ -1,7 +0,0 @@
-export function RadioOption({ id, option, onChange, value, rightWrongResult, }: {
-    id: any;
-    option: any;
-    onChange: any;
-    value: any;
-    rightWrongResult: any;
-}): JSX.Element;

package/dist/components/RadioInput/comps/RadioOption/index.js

@@ -1,40 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioOption = void 0;
-var react_1 = __importDefault(require("react"));
-var themes_1 = require("../../../../themes");
-var icons_1 = require("../../../../icons");
-var Typo_1 = require("../../../Typo");
-var utils_js_1 = require("./utils.js");
-var styled_1 = require("./styled");
-var green = themes_1.colors.green, red = themes_1.colors.red;
-var XCircle = icons_1.icons.XCircle, CheckCircle = icons_1.icons.CheckCircle;
-var RadioOption = function (_a) {
-    var id = _a.id, option = _a.option, onChange = _a.onChange, value = _a.value, rightWrongResult = _a.rightWrongResult;
-    var isSelected = option.value === (value === null || value === void 0 ? void 0 : value.value);
-    var markingCommand = (0, utils_js_1.getMarkingCommand)({ option: option, isSelected: isSelected });
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(styled_1.StyledOption, { rightWrongResult: rightWrongResult, isSelected: isSelected, onClick: function () { return !rightWrongResult && onChange && onChange(id, option); } },
-            !rightWrongResult || markingCommand === undefined ?
-                react_1.default.createElement(styled_1.StyledRadioInput, { isSelected: isSelected, className: 'radioBtn' }, isSelected && react_1.default.createElement(styled_1.StyledRadioInputFill, null))
-                :
-                    ["markCorrect", "revealCorrect"].includes(markingCommand) ?
-                        react_1.default.createElement(CheckCircle, { size: 22.5, color: green, style: { marginLeft: '-2.25px' } })
-                        : // then wrong
-                            react_1.default.createElement(XCircle, { size: 22.5, color: red, style: { marginLeft: '-2.25px' } }),
-            react_1.default.createElement(Typo_1.SANS_3, { bold: rightWrongResult && isSelected },
-                " ",
-                option.display,
-                " ")),
-        /*
-        the minute the results have come in, irrespective of user's answer
-        being right or wrong, we always show an explanation
-        against the right answer. provided an explanation is provided.
-        */
-        option.isCorrect && rightWrongResult && option.isCorrectDesc &&
-            react_1.default.createElement(styled_1.StyledCorrectMessage, null, option.isCorrectDesc)));
-};
-exports.RadioOption = RadioOption;

package/dist/components/RadioInput/comps/RadioOption/utils.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMarkingCommand = void 0;
-var getMarkingCommand = function (_a) {
-    var option = _a.option, isSelected = _a.isSelected;
-    if (isSelected) {
-        return option.isCorrect ? 'markCorrect' : 'markWrong';
-    }
-    else { //not selected
-        if (option.isCorrect)
-            return "revealCorrect";
-    }
-};
-exports.getMarkingCommand = getMarkingCommand;

package/dist/components/RadioInput/comps/index.d.ts

@@ -1 +0,0 @@
-export { RadioOption } from "./RadioOption";

package/dist/components/RadioInput/comps/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioOption = void 0;
-var RadioOption_1 = require("./RadioOption");
-Object.defineProperty(exports, "RadioOption", { enumerable: true, get: function () { return RadioOption_1.RadioOption; } });

package/dist/components/RadioInput/index.d.ts

@@ -1,12 +0,0 @@
-export function RadioInput({ id, injectOtherOption, value, onChange, options, rightWrongResult, listType, style, className, readOnly }: {
-    id: any;
-    injectOtherOption: any;
-    value: any;
-    onChange: any;
-    options: any;
-    rightWrongResult: any;
-    listType: any;
-    style: any;
-    className: any;
-    readOnly: any;
-}, ...args: any[]): JSX.Element;

package/dist/components/RadioInput/index.js

@@ -1,51 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioInput = void 0;
-var react_1 = __importDefault(require("react"));
-var BlockLabel_1 = require("../BlockLabel");
-var Tags_1 = require("../Tags");
-var TextInputs_1 = require("../TextInputs");
-var _EXPORTS_1 = require("../../utils/_EXPORTS");
-var utils_js_1 = require("./utils.js");
-var styled_1 = require("./styled");
-var comps_1 = require("./comps");
-function RadioInput(_a) {
-    var id = _a.id, injectOtherOption = _a.injectOtherOption, value = _a.value, onChange = _a.onChange, options = _a.options, rightWrongResult = _a.rightWrongResult, listType = _a.listType, style = _a.style, className = _a.className, readOnly = _a.readOnly;
-    var props = arguments[0];
-    var displayedOptions;
-    if (options) {
-        if (injectOtherOption && !options.includes(function (op) { return op.value === "other"; })) {
-            displayedOptions = options.concat({ value: "other", display: "Other" });
-        }
-        else {
-            displayedOptions = options;
-        }
-    }
-    return (react_1.default.createElement("div", { className: className, id: id },
-        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-        readOnly ? ((value === null || value === void 0 ? void 0 : value.display) && react_1.default.createElement(Tags_1.TagDisplay, { display: value.display })) : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(styled_1.StyledOptionsContainer, { listType: listType, style: style }, displayedOptions === null || displayedOptions === void 0 ? void 0 : displayedOptions.map(function (option) { return react_1.default.createElement(comps_1.RadioOption, __assign({}, {
-                option: option,
-                id: id,
-                onChange: onChange,
-                value: value,
-                rightWrongResult: rightWrongResult,
-                key: option.value
-            })); })),
-            injectOtherOption && (value === null || value === void 0 ? void 0 : value.value) === "other" && (react_1.default.createElement(TextInputs_1.TextInput, { placeholder: "Please Specify Here", value: value.display_desc, onChange: function (k, v) { return onChange && onChange(id, (0, utils_js_1.createNewValue)(v)); } }))))));
-}
-exports.RadioInput = RadioInput;

package/dist/components/RadioInput/styled.d.ts

@@ -1 +0,0 @@
-export const StyledOptionsContainer: any;

package/dist/components/RadioInput/styled.js

@@ -1,37 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledOptionsContainer = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-exports.StyledOptionsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2rem;\n\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2rem;\n\n  ", "\n"])), function (_a) {
-    var listType = _a.listType;
-    return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: column;\n      gap: 1.5rem;\n    "], ["\n      flex-direction: column;\n      gap: 1.5rem;\n    "]))) :
-        '';
-});
-var templateObject_1, templateObject_2;

package/dist/components/RadioInput/utils.d.ts

@@ -1,6 +0,0 @@
-export function createNewValue(val: any): {
-    value: string;
-    display_desc: any;
-    value_desc: any;
-    display: string;
-};

package/dist/components/RadioInput/utils.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createNewValue = void 0;
-var createNewValue = function (val) {
-    var value_desc = ( // discuss if we should add the method textToCamelcase to general utils or JS String Class
-    val
-        .trim()
-        .replace(/[,\/]/gi, '')
-        .split(' ')
-        .filter(Boolean)
-        .map(function (word, idx) { return idx === 0 ? word : word[0].toUpperCase() + word.slice(1); })
-        .join(""));
-    return {
-        value: "other",
-        display_desc: val,
-        value_desc: value_desc,
-        display: "Other",
-    };
-};
-exports.createNewValue = createNewValue;

package/dist/components/ToggleButton/styled.d.ts

@@ -1,4 +0,0 @@
-export const StyledToggleWrraper: any;
-export const StyledButtonSlider: any;
-export const StyledToggleButton: any;
-export const STYLED_LABEL: any;