@bcgov-sso/common-react-components 1.22.0 → 1.28.0

package/dist/cjs/index.js

@@ -6599,6 +6599,11 @@ var faAngleUp = {
   iconName: 'angle-up',
   icon: [384, 512, [8963], "f106", "M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z"]
 };
+var faCheck = {
+  prefix: 'fas',
+  iconName: 'check',
+  icon: [448, 512, [10004, 10003], "f00c", "M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"]
+};
 var faCircleCheck = {
   prefix: 'fas',
   iconName: 'circle-check',
@@ -6610,6 +6615,11 @@ var faInfo = {
   iconName: 'info',
   icon: [192, 512, [], "f129", "M160 448h-32V224c0-17.69-14.33-32-32-32L32 192c-17.67 0-32 14.31-32 32s14.33 31.1 32 31.1h32v192H32c-17.67 0-32 14.31-32 32s14.33 32 32 32h128c17.67 0 32-14.31 32-32S177.7 448 160 448zM96 128c26.51 0 48-21.49 48-48S122.5 32.01 96 32.01s-48 21.49-48 48S69.49 128 96 128z"]
 };
+var faMagnifyingGlass = {
+  prefix: 'fas',
+  iconName: 'magnifying-glass',
+  icon: [512, 512, [128269, "search"], "f002", "M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"]
+};
 var faTriangleExclamation = {
   prefix: 'fas',
   iconName: 'triangle-exclamation',
@@ -6633,7 +6643,7 @@ const SmoothTransition = qe.div `
 const Container = qe.div `
   margin: 10px 0;
 `;
-const Header = qe.div `
+const Header$1 = qe.div `
   display: flex;
   justify-content: space-between;
   cursor: pointer;
@@ -6661,7 +6671,7 @@ function AccordionPanel({ title, hash, allOpen, setAllOpen, children }) {
             setOpen(true);
     }, [hash]);
     return (React__default["default"].createElement(Container, null,
-        React__default["default"].createElement(Header, { onClick: handleClick },
+        React__default["default"].createElement(Header$1, { onClick: handleClick },
             React__default["default"].createElement("span", { id: id }, title),
             React__default["default"].createElement(FontAwesomeIcon, { icon: open ? faAngleUp : faAngleDown, size: "2x" })),
         React__default["default"].createElement(SmoothTransition, { open: open }, children)));
@@ -12717,6 +12727,16 @@ const Table = qe.table `
     text-align: left;
   }
 
+  & th.text-right {
+    text-align: right;
+    padding-right: 1em;
+  }
+
+  & td.text-right {
+    text-align: right;
+    padding-right: 2em;
+  }
+
   & th,
   & td {
     border: none;
@@ -15983,7 +16003,7 @@ function warnItemProp(_ref) {
   return restInfo;
 }
 
-function Icon(_ref) {
+function Icon$2(_ref) {
   var icon = _ref.icon,
       props = _ref.props,
       children = _ref.children;
@@ -16211,7 +16231,7 @@ var InternalMenuItem = function InternalMenuItem(props) {
     onClick: onInternalClick,
     onKeyDown: onInternalKeyDown,
     onFocus: onInternalFocus
-  }), children, /*#__PURE__*/React__namespace.createElement(Icon, {
+  }), children, /*#__PURE__*/React__namespace.createElement(Icon$2, {
     props: _objectSpread2$1(_objectSpread2$1({}, props), {}, {
       isSelected: selected
     }),
@@ -20777,7 +20797,7 @@ var InternalSubMenu = function InternalSubMenu(props) {
     "aria-disabled": mergedDisabled,
     onClick: onInternalTitleClick,
     onFocus: onInternalFocus
-  }, activeProps), title, /*#__PURE__*/React__namespace.createElement(Icon, {
+  }, activeProps), title, /*#__PURE__*/React__namespace.createElement(Icon$2, {
     icon: mode !== 'horizontal' ? mergedExpandIcon : null,
     props: _objectSpread2$1(_objectSpread2$1({}, props), {}, {
       isOpen: open,
@@ -23319,10 +23339,233 @@ const StyledTabs = qe(ForwardTabs) `
   }
 `;
 
+const Wrapper = qe.div `
+  width: 100%;
+  display: block;
+`;
+const Icon$1 = qe.i `
+  position: relative;
+  right: 30px;
+  color: grey;
+  top: 2px;
+`;
+const Input = qe.input `
+  width: 50%;
+  border: 2px solid gray;
+  padding: 0.5em 0.6em;
+  border-radius: 0.25em;
+`;
+function SearchBar(props) {
+    return (React__default["default"].createElement(Wrapper, null,
+        React__default["default"].createElement(Input, Object.assign({ type: "text", maxLength: 100 }, props)),
+        React__default["default"].createElement(Icon$1, null,
+            React__default["default"].createElement(FontAwesomeIcon, { icon: faMagnifyingGlass }))));
+}
+
+const sizeMap = {
+    sm: '1.0rem',
+    md: '1.2rem',
+    lg: '1.4rem',
+};
+const colorMap$1 = {
+    primary: '#0139ff',
+    dark: '#000',
+};
+const StyledHeader = qe.div `
+  font-weight: bold;
+  ${(props) => `
+    color: ${colorMap$1[props.variant || 'dark']};
+    font-size: ${sizeMap[props.size || 'md']};
+  `}
+`;
+const Header = ({ variant, size, children }) => {
+    return (React__default["default"].createElement(StyledHeader, { variant: variant, size: size }, children));
+};
+
+const StyledInfoText = qe.div `
+  font-size: 0.9rem;
+  ${(props) => `
+    font-style: ${props.italic ? 'italic' : 'normal'};
+  `}
+`;
+const InfoText = ({ italic, children }) => {
+    return React__default["default"].createElement(StyledInfoText, { italic: italic }, children);
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+
+/**
+ * Returns the value of `props[path]` or `defaultValue`
+ * @example
+ * import styled from "styled-components";
+ * import { prop } from "styled-tools";
+ *
+ * const Button = styled.button`
+ *   color: ${prop("color", "red")};
+ * `;
+ */
+var prop = function prop(path, defaultValue) {
+  return function () {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    if (typeof props[path] !== "undefined") {
+      return props[path];
+    }
+
+    if (path && path.indexOf(".") > 0) {
+      var paths = path.split(".");
+      var length = paths.length;
+      var object = props[paths[0]];
+      var index = 1;
+
+      while (object != null && index < length) {
+        object = object[paths[index]];
+        index += 1;
+      }
+
+      if (typeof object !== "undefined") {
+        return object;
+      }
+    }
+
+    return defaultValue;
+  };
+};
+
+var len = 242.776657104492;
+var time = 1.6;
+var anim = We(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  12.5% {\n    stroke-dasharray: ", "px, ", "px;\n    stroke-dashoffset: -", "px;\n  }\n  43.75% {\n    stroke-dasharray: ", "px, ", "px;\n    stroke-dashoffset: -", "px;\n  }\n  100% {\n    stroke-dasharray: ", "px, ", "px;\n    stroke-dashoffset: -", "px;\n  }\n"], ["\n  12.5% {\n    stroke-dasharray: ", "px, ", "px;\n    stroke-dashoffset: -", "px;\n  }\n  43.75% {\n    stroke-dasharray: ", "px, ", "px;\n    stroke-dashoffset: -", "px;\n  }\n  100% {\n    stroke-dasharray: ", "px, ", "px;\n    stroke-dashoffset: -", "px;\n  }\n"])), len * 0.14, len, len * 0.11, len * 0.35, len, len * 0.35, len * 0.01, len, len * 0.99);
+qe.path(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  stroke-dasharray: ", "px, ", ";\n  stroke-dashoffset: 0;\n  animation: ", " ", "s linear infinite;\n"], ["\n  stroke-dasharray: ", "px, ", ";\n  stroke-dashoffset: 0;\n  animation: ", " ", "s linear infinite;\n"])), len * 0.01, len, anim, time);
+var templateObject_1$3, templateObject_2$3;
+
+var loaderSpin = We(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n to {\n    transform: rotate(360deg);\n  }\n"], ["\n to {\n    transform: rotate(360deg);\n  }\n"])));
+var loaderPath = We(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n  }\n  50% {\n    stroke-dasharray: 0, 450, 10, 30, 10, 30, 10, 30, 10;\n  }\n  100% {\n    stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n  }\n  50% {\n    stroke-dasharray: 0, 450, 10, 30, 10, 30, 10, 30, 10;\n  }\n  100% {\n    stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n  }\n"])));
+qe.svg(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  width: 230px;\n  height: 230px;\n  transform-origin: 115px 115px;\n  animation: 1.4s linear infinite ", ";\n  -webkit-animation: 1.4s linear infinite ", ";\n"], ["\n  width: 230px;\n  height: 230px;\n  transform-origin: 115px 115px;\n  animation: 1.4s linear infinite ", ";\n  -webkit-animation: 1.4s linear infinite ", ";\n"])), loaderSpin, loaderSpin);
+qe.path(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: 1.4s ease-in-out infinite ", ";\n  -webkit-animation: 1.4s ease-in-out infinite ", ";\n"], ["\n  animation: 1.4s ease-in-out infinite ", ";\n  -webkit-animation: 1.4s ease-in-out infinite ", ";\n"])), loaderPath, loaderPath);
+var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4;
+
+var spin = We(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n to {\n    transform: rotate(360deg);\n  }\n"], ["\n to {\n    transform: rotate(360deg);\n  }\n"])));
+var POINTS = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330];
+var Svg = qe.svg(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  animation: ", " 0.75s steps(12, end) infinite;\n  animation-duration: ", "s;\n"], ["\n  animation: ", " 0.75s steps(12, end) infinite;\n  animation-duration: ", "s;\n"])), spin, prop('speed', '0.75'));
+var Polyline = qe.polyline(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  stroke-width: ", "px;\n  stroke-linecap: round;\n\n  &:nth-child(12n + 0) {\n    stroke-opacity: 0.08;\n  }\n\n  &:nth-child(12n + 1) {\n    stroke-opacity: 0.17;\n  }\n\n  &:nth-child(12n + 2) {\n    stroke-opacity: 0.25;\n  }\n\n  &:nth-child(12n + 3) {\n    stroke-opacity: 0.33;\n  }\n\n  &:nth-child(12n + 4) {\n    stroke-opacity: 0.42;\n  }\n\n  &:nth-child(12n + 5) {\n    stroke-opacity: 0.5;\n  }\n\n  &:nth-child(12n + 6) {\n    stroke-opacity: 0.58;\n  }\n\n  &:nth-child(12n + 7) {\n    stroke-opacity: 0.66;\n  }\n\n  &:nth-child(12n + 8) {\n    stroke-opacity: 0.75;\n  }\n\n  &:nth-child(12n + 9) {\n    stroke-opacity: 0.83;\n  }\n\n  &:nth-child(12n + 11) {\n    stroke-opacity: 0.92;\n  }\n"], ["\n  stroke-width: ", "px;\n  stroke-linecap: round;\n\n  &:nth-child(12n + 0) {\n    stroke-opacity: 0.08;\n  }\n\n  &:nth-child(12n + 1) {\n    stroke-opacity: 0.17;\n  }\n\n  &:nth-child(12n + 2) {\n    stroke-opacity: 0.25;\n  }\n\n  &:nth-child(12n + 3) {\n    stroke-opacity: 0.33;\n  }\n\n  &:nth-child(12n + 4) {\n    stroke-opacity: 0.42;\n  }\n\n  &:nth-child(12n + 5) {\n    stroke-opacity: 0.5;\n  }\n\n  &:nth-child(12n + 6) {\n    stroke-opacity: 0.58;\n  }\n\n  &:nth-child(12n + 7) {\n    stroke-opacity: 0.66;\n  }\n\n  &:nth-child(12n + 8) {\n    stroke-opacity: 0.75;\n  }\n\n  &:nth-child(12n + 9) {\n    stroke-opacity: 0.83;\n  }\n\n  &:nth-child(12n + 11) {\n    stroke-opacity: 0.92;\n  }\n"])), function (props) {
+  return props.width;
+});
+function RotatingLines(_a) {
+  var _b = _a.strokeColor,
+      strokeColor = _b === void 0 ? 'grey' : _b,
+      _c = _a.strokeWidth,
+      strokeWidth = _c === void 0 ? '5' : _c,
+      _d = _a.animationDuration,
+      animationDuration = _d === void 0 ? '0.75' : _d,
+      _e = _a.width,
+      width = _e === void 0 ? '96' : _e,
+      _f = _a.visible,
+      visible = _f === void 0 ? true : _f;
+  var lines = React.useCallback(function () {
+    return POINTS.map(function (point) {
+      return /*#__PURE__*/React__default["default"].createElement(Polyline, {
+        key: point,
+        points: "24,12 24,4",
+        width: strokeWidth,
+        transform: "rotate(" + point + ", 24, 24)"
+      });
+    });
+  }, [strokeWidth]);
+  return !visible ? null : /*#__PURE__*/React__default["default"].createElement(Svg, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 48 48",
+    width: width,
+    stroke: strokeColor,
+    speed: animationDuration,
+    role: "status",
+    "data-testid": "rotating-lines-svg"
+  }, lines());
+}
+var templateObject_1$1, templateObject_2$1, templateObject_3$1;
+
+var dash = We(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n to {\n    stroke-dashoffset: 136;\n  }\n"], ["\n to {\n    stroke-dashoffset: 136;\n  }\n"])));
+qe.polygon(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  stroke-dasharray: 17;\n  animation: ", " 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;\n"], ["\n  stroke-dasharray: 17;\n  animation: ", " 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;\n"])), dash);
+qe.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform-origin: 50% 65%;\n"], ["\n  transform-origin: 50% 65%;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
+
+const Icon = qe.span `
+  width: 30px;
+`;
+const SaveContainer = qe.div `
+  display: flex;
+  margin-top: 5px;
+`;
+const StyledP = qe.p `
+  margin-left: 10px;
+  margin-top: unset;
+`;
+function LastSavedMessage({ saving, content = '', variant = 'info' }) {
+    if (!saving && !content)
+        return null;
+    const icon = variant === 'error' ? faExclamationTriangle : faCheck;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(SaveContainer, null,
+            React__default["default"].createElement(Icon, null, saving ? (React__default["default"].createElement(RotatingLines, { width: "20", visible: true })) : (React__default["default"].createElement(FontAwesomeIcon, { style: { color: '#006fc4' }, icon: icon }))),
+            React__default["default"].createElement(StyledP, null, content))));
+}
+
+const colorMap = {
+    primary: '#0139ff',
+    dark: '#000',
+};
+const radiusMap = {
+    none: '',
+    sm: '5px',
+    md: '10px',
+    lg: '20px',
+};
+const widthMap = {
+    sm: '1px',
+    md: '2px',
+    lg: '3px',
+};
+const StyledBorder = qe.div `
+  border-style: solid;
+  width: 100%;
+  height: auto;
+  padding: 5px;
+  ${(props) => `
+        border-color: ${colorMap[props.color || 'primary']};
+        border-width: ${widthMap[props.borderWidth || 'lg']};
+        border-radius: ${radiusMap[props.round || 'md']};
+    `}
+`;
+const Border = ({ color, round, borderWidth, children }) => {
+    return (React__default["default"].createElement(StyledBorder, { color: color, round: round, borderWidth: borderWidth }, children));
+};
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
+exports.Border = Border;
 exports.Button = Button;
+exports.Header = Header;
+exports.InfoText = InfoText;
+exports.LastSavedMessage = LastSavedMessage;
 exports.NumberedContents = NumberedContents;
+exports.SearchBar = SearchBar;
 exports.Table = Table;
 exports.Tabs = StyledTabs;
 //# sourceMappingURL=index.js.map