oolib 2.12.4 → 2.13.1

package/dist/components/ActionMenu/index.js

@@ -58,7 +58,6 @@ var ActionMenu = function (_a) {
                 setShowActions(!showActions);
             } }),
         react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({ unfold: showActions }, { align: align, invert: invert }), actions.map(function (action) {
-            console.log(action);
             var ActionButton = action.buttonComp || styled_1.StyledActionBtn;
             return (react_1.default.createElement(ActionButton, __assign({ style: { justifyContent: 'left' } }, action, { onClick: function (ev) {
                     action.onClick && action.onClick(ev);

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

@@ -0,0 +1,4 @@
+export function PercentCompletedPi({ percent, size }: {
+    percent: any;
+    size?: string;
+}): JSX.Element;

package/dist/components/PercentCompletedPi/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PercentCompletedPi = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_1 = require("./styled");
+function PercentCompletedPi(_a) {
+    var percent = _a.percent, _b = _a.size, size = _b === void 0 ? "2.4rem" : _b;
+    var perUnit = 1.8;
+    var transform = "rotate(".concat(parseInt(percent) * perUnit, "deg)");
+    return (react_1.default.createElement(styled_1.StyledWrapper, { size: size },
+        react_1.default.createElement(styled_1.StyledCircle, { size: size },
+            react_1.default.createElement(styled_1.StyledMask, { size: size, transform: transform },
+                react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill" })),
+            react_1.default.createElement(styled_1.StyledMask, { size: size, className: "mask half" },
+                react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill" }),
+                react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill fix" })))));
+}
+exports.PercentCompletedPi = PercentCompletedPi;

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

@@ -0,0 +1,4 @@
+export const StyledWrapper: any;
+export const StyledCircle: any;
+export const StyledMask: any;
+export const StyledFill: any;

package/dist/components/PercentCompletedPi/styled.js

@@ -0,0 +1,32 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledFill = exports.StyledMask = exports.StyledCircle = exports.StyledWrapper = void 0;
+var macro_1 = __importDefault(require("styled-components/macro"));
+var utilsOolib_1 = require("../../utilsOolib");
+exports.StyledWrapper = macro_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  ", "\n  background-color: ", ";\n"], ["\n  border-radius: 50%;\n  ", "\n  background-color: ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return "\n    width: ".concat(size, ";\n    height: ").concat(size, ";  \n  ");
+}, function (_a) {
+    var theme = _a.theme;
+    return (0, utilsOolib_1.getPrimaryColor40)(theme.colors);
+});
+exports.StyledCircle = macro_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+exports.StyledMask = macro_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  position: absolute;\n  border-radius: 50%;\n  \n"], ["\n  ", "\n  position: absolute;\n  border-radius: 50%;\n  \n"])), function (_a) {
+    var size = _a.size, transform = _a.transform;
+    return "\n    ".concat(transform ? "transform: ".concat(transform) : '', ";\n    width: ").concat(size, ";\n    height: ").concat(size, ";  \n    clip: rect(0px, ").concat(size, ", ").concat(size, ", ").concat((parseFloat(size.replace('rem', '').trim()) / 2) + 'rem', ");\n  ");
+});
+exports.StyledFill = macro_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n   border-radius: 50%;\n  position: absolute;\n  background-color: ", ";\n"], ["\n  ", "\n   border-radius: 50%;\n  position: absolute;\n  background-color: ", ";\n"])), function (_a) {
+    var size = _a.size, transform = _a.transform;
+    return "\n    transform: ".concat(transform, ";\n    width: ").concat(size, ";\n    height: ").concat(size, ";  \n    clip: rect(0px, ").concat((parseFloat(size.replace('rem', '').trim()) / 2) + 'rem', ", ").concat(size, ", 0px);\n  ");
+}, function (_a) {
+    var theme = _a.theme;
+    return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/TextInputs/index.js

@@ -85,7 +85,7 @@ var DisplayIcon = function (_a) {
     return (react_1.default.createElement("div", { style: { cursor: onClick ? 'pointer' : '' }, onMouseDown: onClick || null }, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" })));
 };
 var TextInput = function (props) {
-    var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, maxNumLimiter = props.maxNumLimiter, _a = props.placeholder, placeholder = _a === void 0 ? 'Enter Text...' : _a, value = props.value, onChange = props.onChange, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, validateOnBlur = props.validateOnBlur, actionBtn = props.actionBtn, className = props.className;
+    var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, maxNumLimiter = props.maxNumLimiter, _a = props.placeholder, placeholder = _a === void 0 ? 'Enter Text...' : _a, value = props.value, onChange = props.onChange, onFocus = props.onFocus, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, validateOnBlur = props.validateOnBlur, actionBtn = props.actionBtn, className = props.className;
     var _b = (0, react_1.useState)(''), inputStatus = _b[0], setInputStatus = _b[1];
     var composition = icon && !eyeIcon ? 'icon+text' : 'textOnly';
     var size = S ? 'S' : 'M';
@@ -124,7 +124,7 @@ var TextInput = function (props) {
             readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type === 'password' ? '********' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type, eyeIcon: eyeIcon, composition: composition },
                     icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),
-                    react_1.default.createElement(index_styled_1.InputStyled, { className: 'SANS_3', id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxNumLimiter, onBlur: handleValidateOnBlur, size: size, autoComplete: 'off' }),
+                    react_1.default.createElement(index_styled_1.InputStyled, { className: '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(Loader_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' } }))),

package/dist/globalStyles/index.js

@@ -11,5 +11,5 @@ var normalize_1 = require("./normalize");
 var mixins_1 = require("../themes/mixins");
 require("../assets/fonts/style.css");
 var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
-exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __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\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/*::-webkit-scrollbar { \n  width: 0.7rem;// for vertical bars\n  height: 0.5rem; //for vertical 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 \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\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/*::-webkit-scrollbar { \n  width: 0.7rem;// for vertical bars\n  height: 0.5rem; //for vertical 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 \n"])), normalize_1.normalize, greyColor100, greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif, greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md'));
-var templateObject_1;
+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 vertical 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 vertical 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);
+var templateObject_1, templateObject_2;

package/dist/index.d.ts

@@ -20,3 +20,4 @@ export { UserRoleBadge } from "./components/UserRoleBadge";
 export { OKELink } from "./components/OKELink";
 export { Tooltip } from "./components/Tooltip";
 export { ActionMenu } from "./components/ActionMenu";
+export { PercentCompletedPi } from "./components/PercentCompletedPi";

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.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.PercentCompletedPi = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
 __exportStar(require("./components/Typo"), exports);
@@ -42,6 +42,8 @@ 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 PercentCompletedPi_1 = require("./components/PercentCompletedPi");
+Object.defineProperty(exports, "PercentCompletedPi", { enumerable: true, get: function () { return PercentCompletedPi_1.PercentCompletedPi; } });
 __exportStar(require("./components/TabBar"), exports);
 __exportStar(require("./components/Banners"), exports);
 __exportStar(require("./themes/mixins"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.12.4",
+  "version": "2.13.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",