@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/js/InputFields/QuickSearch.js

@@ -0,0 +1,210 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Iconbutton = _interopRequireDefault(require("../Button/Iconbutton"));
+
+var _styling = require("./styling");
+
+var _types = require("../types");
+
+var _ = require("..");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _SearchBarInput = _interopRequireDefault(require("./components/SearchBarInput"));
+
+var _SearchField = require("./components/SearchField");
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var QuickSearchField = (0, _styledComponents.default)(_SearchField.StyledSearchField)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ", ";\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ", ";\n    }\n  }\n\n  box-shadow: ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+}, _.COLORS.white, _.COLORS.neutral_600, function (props) {
+  return props.expanded ? "inset 0px 0px 0px 2px ".concat(_.COLORS.primary_800) : 'none !important';
+}, function (props) {
+  return props.expanded ? "inset 0px 0px 0px 2px ".concat(_.COLORS.primary_700) : 'none !important';
+});
+
+var QuickSearch = function QuickSearch(_ref) {
+  var id = _ref.id,
+      searchTerm = _ref.searchTerm,
+      _setSearchTerm = _ref.setSearchTerm,
+      enterSearch = _ref.enterSearch,
+      removeSearch = _ref.removeSearch,
+      placeholder = _ref.placeholder,
+      performSearchLabel = _ref.performSearchLabel,
+      disabled = _ref.disabled,
+      onKeyDown = _ref.onKeyDown,
+      size = _ref.size,
+      margin = _ref.margin,
+      loading = _ref.loading;
+  var searchFieldRef = React.useRef(null);
+  var searchFieldInputRef = React.useRef(null);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      searchFieldVisible = _React$useState2[0],
+      setSearchFieldVisible = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      tabbedHere = _React$useState4[0],
+      setTabbedHere = _React$useState4[1];
+
+  var handleClickOutside = function handleClickOutside(e) {
+    if (searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(e.target)) {
+      if (searchFieldVisible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
+        setSearchFieldVisible(false);
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    if (searchTerm !== null && searchTerm !== void 0 && searchTerm.length) {
+      setSearchFieldVisible(true);
+    }
+  }, [searchTerm]);
+  React.useEffect(function () {
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+  React.useEffect(function () {
+    if (searchFieldVisible) {
+      var _searchFieldInputRef$;
+
+      searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$ = searchFieldInputRef.current) === null || _searchFieldInputRef$ === void 0 ? void 0 : _searchFieldInputRef$.focus();
+    }
+  }, [searchFieldVisible, searchFieldInputRef, id]);
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+
+    if (e.key === 'Escape') {
+      if (searchFieldVisible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
+        setSearchFieldVisible(false);
+      }
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(QuickSearchField, {
+    ref: searchFieldRef,
+    expanded: searchFieldVisible,
+    id: "".concat(id, "_main"),
+    onBlur: function onBlur(event) {
+      if (event.relatedTarget && searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {
+        setSearchFieldVisible(false);
+      }
+    },
+    "data-testid": "".concat(id, "_main"),
+    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat(searchFieldVisible ? ' expanded' : ''),
+    tabbedHere: tabbedHere,
+    tabIndex: -1,
+    margin: margin
+  }, searchFieldVisible && /*#__PURE__*/React.createElement(_SearchBarInput.default, {
+    placeholder: disabled ? '' : placeholder,
+    id: id,
+    ref: searchFieldInputRef,
+    disabled: disabled,
+    onKeyDown: handleKeyDown,
+    size: size,
+    setTabbedHere: setTabbedHere,
+    setSearchTerm: function setSearchTerm(term) {
+      return _setSearchTerm(term);
+    },
+    searchTerm: searchTerm,
+    enterSearch: enterSearch
+  }), /*#__PURE__*/React.createElement(_styling.SearchIconWrapper, {
+    className: size ? size : '',
+    role: "button",
+    "aria-label": performSearchLabel,
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(_Iconbutton.default, {
+    id: "".concat(id, "_Searchbutton"),
+    variant: "secondary",
+    shape: "circular",
+    tabIndex: searchFieldVisible ? -1 : 0,
+    action: function action(e) {
+      return searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true);
+    }
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Search, {
+    size: "24px",
+    color: disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600
+  }))), /*#__PURE__*/React.createElement(_styling.StyledIcon, {
+    className: size ? size : '',
+    role: "button",
+    tabIndex: -1,
+    hidden: searchTerm === '' || searchTerm === undefined || !searchFieldVisible
+  }, /*#__PURE__*/React.createElement(_Iconbutton.default, {
+    id: "".concat(id, "_Clearicon"),
+    variant: "secondary",
+    shape: "circular",
+    action: function action(e) {
+      var _searchFieldInputRef$2;
+
+      removeSearch(e);
+      searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$2 = searchFieldInputRef.current) === null || _searchFieldInputRef$2 === void 0 ? void 0 : _searchFieldInputRef$2.focus();
+    }
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Clear, {
+    size: "24px",
+    color: disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600
+  }))), loading && searchFieldVisible && /*#__PURE__*/React.createElement(_styling.StyledIcon, {
+    className: size ? size : '',
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(_.LoadingIndicator, {
+    size: _types.Size.Small,
+    color: _.COLORS.neutral_600
+  })));
+};
+
+QuickSearch.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  searchTerm: _propTypes.default.string,
+  setSearchTerm: _propTypes.default.func.isRequired,
+  enterSearch: _propTypes.default.func.isRequired,
+  removeSearch: _propTypes.default.func.isRequired,
+  placeholder: _propTypes.default.string,
+  performSearchLabel: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  onKeyDown: _propTypes.default.func,
+  margin: _propTypes.default.string,
+  loading: _propTypes.default.bool
+};
+var _default = QuickSearch;
+exports.default = _default;
+//# sourceMappingURL=QuickSearch.js.map

package/dist/js/InputFields/QuickSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["QuickSearchField","StyledSearchField","props","margin","COLORS","white","neutral_600","expanded","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","React","useRef","searchFieldInputRef","useState","searchFieldVisible","setSearchFieldVisible","tabbedHere","setTabbedHere","handleClickOutside","e","current","contains","target","length","useEffect","document","addEventListener","removeEventListener","focus","handleKeyDown","key","event","relatedTarget","concat","term","neutral_300","undefined","Size","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport IconButton from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport { StyledSearchField } from './components/SearchField';\r\n\r\nconst QuickSearchField = styled(StyledSearchField)<{ expanded: boolean; margin?: string }>`\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n  background-color: transparent;\r\n  &.small {\r\n    width: 48px;\r\n  }\r\n\r\n  &.medium {\r\n    width: 56px;\r\n  }\r\n  \r\n  &.expanded{\r\n    width: 100%;\r\n    background-color: ${COLORS.white};\r\n  }\r\n\r\n  input {\r\n    ::placeholder {\r\n      font-style: italic;\r\n      color: ${COLORS.neutral_600};\r\n    }\r\n  }\r\n\r\n  box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\r\n\r\n  &:hover {\r\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important')};\r\n  }\r\n`;\r\n\r\ntype QuickSearchProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  removeSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  performSearchLabel?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\r\n  id,\r\n  searchTerm,\r\n  setSearchTerm,\r\n  enterSearch,\r\n  removeSearch,\r\n  placeholder,\r\n  performSearchLabel,\r\n  disabled,\r\n  onKeyDown,\r\n  size,\r\n  margin,\r\n  loading,\r\n}: QuickSearchProps) => {\r\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<boolean>(false);\r\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n      if (searchFieldVisible && !searchTerm?.length) {\r\n        setSearchFieldVisible(false);\r\n      }\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (searchTerm?.length) {\r\n      setSearchFieldVisible(true);\r\n    }\r\n  }, [searchTerm]);\r\n\r\n  React.useEffect(() => {\r\n    document.addEventListener('click', handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener('click', handleClickOutside);\r\n    };\r\n  });\r\n\r\n  React.useEffect(() => {\r\n    if (searchFieldVisible) {\r\n      searchFieldInputRef?.current?.focus();\r\n    }\r\n  }, [searchFieldVisible, searchFieldInputRef, id]);\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (onKeyDown) {\r\n      onKeyDown(e);\r\n    }\r\n    if (e.key === 'Escape') {\r\n      if (searchFieldVisible && !searchTerm?.length) {\r\n        setSearchFieldVisible(false);\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <QuickSearchField\r\n      ref={searchFieldRef}\r\n      expanded={searchFieldVisible}\r\n      id={`${id}_main`}\r\n      onBlur={(event: any) => {\r\n        if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {\r\n          setSearchFieldVisible(false);\r\n        }\r\n      }}\r\n      data-testid={`${id}_main`}\r\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat( searchFieldVisible ? ' expanded' : '')}\r\n      tabbedHere={tabbedHere}\r\n      tabIndex={-1}\r\n      margin={margin}>\r\n      {searchFieldVisible && (\r\n        <SearchBarInput\r\n          placeholder={disabled ? '' : placeholder}\r\n          id={id}\r\n          ref={searchFieldInputRef}\r\n          disabled={disabled}\r\n          onKeyDown={handleKeyDown}\r\n          size={size}\r\n          setTabbedHere={setTabbedHere}\r\n          setSearchTerm={(term: string) => setSearchTerm(term)}\r\n          searchTerm={searchTerm}\r\n          enterSearch={enterSearch}\r\n        />\r\n      )}\r\n      <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={-1}>\r\n        <IconButton\r\n          id={`${id}_Searchbutton`}\r\n          variant=\"secondary\"\r\n          shape=\"circular\"\r\n          tabIndex={searchFieldVisible ? -1 : 0}\r\n          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true))}>\r\n          <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\r\n        </IconButton>\r\n      </SearchIconWrapper>\r\n      <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={-1} hidden={searchTerm === '' || searchTerm === undefined || !searchFieldVisible}>\r\n        <IconButton\r\n          id={`${id}_Clearicon`}\r\n          variant=\"secondary\"\r\n          shape=\"circular\"\r\n          action={(e) => {\r\n            removeSearch(e);\r\n            searchFieldInputRef?.current?.focus();\r\n          }}>\r\n          <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\r\n        </IconButton>\r\n      </StyledIcon>\r\n      {loading && searchFieldVisible && (\r\n        <StyledIcon className={size ? size : ''} tabIndex={-1}>\r\n          <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\r\n        </StyledIcon>\r\n      )}\r\n    </QuickSearchField>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"file":"QuickSearch.js"}

package/dist/js/InputFields/RadioButton.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Size } from '../types';
+interface Props {
+    id: string;
+    selected: boolean;
+    select: (selected: boolean) => void;
+    label?: string;
+    additionalLabel?: string;
+    showWarning?: boolean;
+    disabled?: boolean;
+    iconPointerEventsTransparent?: boolean;
+    margin?: string;
+    size?: Size;
+    tabIndexVal?: number;
+}
+declare const RadioButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default RadioButton;

package/dist/js/InputFields/RadioButton.js

@@ -0,0 +1,107 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styles = require("../styles");
+
+var _types = require("../types");
+
+var _typography = require("../styles/typography");
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n \n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ", ";\n    }\n    \n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+}, _styles.COLORS.black, function (props) {
+  return props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600;
+}, (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.white, _styles.COLORS.neutral_300);
+
+var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _size;
+
+  var id = _ref.id,
+      selected = _ref.selected,
+      label = _ref.label,
+      additionalLabel = _ref.additionalLabel,
+      showWarning = _ref.showWarning,
+      select = _ref.select,
+      disabled = _ref.disabled,
+      margin = _ref.margin,
+      iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
+      size = _ref.size,
+      tabIndexVal = _ref.tabIndexVal;
+
+  var onKeyPress = function onKeyPress(e) {
+    if (e.keyCode === 13 && !disabled) {
+      select(!selected);
+    }
+  };
+
+  size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
+  return /*#__PURE__*/React.createElement(StyledRadioButton, {
+    key: id,
+    margin: margin,
+    ref: ref,
+    onClick: function onClick() {
+      return !disabled && select(!selected);
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    },
+    onKeyDown: onKeyPress,
+    disabled: disabled,
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+    tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
+    showWarning: showWarning,
+    selected: selected
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'radio-button-icon',
+    id: id
+  }, selected && /*#__PURE__*/React.createElement(_SystemIcons.RadioButtonOn, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+    size: "24px"
+  }), !selected && /*#__PURE__*/React.createElement(_SystemIcons.RadioButtonOff, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+    size: "24px"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: 'radio-button-label'
+  }, label && /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));
+});
+RadioButton.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  selected: _propTypes.default.bool.isRequired,
+  select: _propTypes.default.func.isRequired,
+  label: _propTypes.default.string,
+  additionalLabel: _propTypes.default.string,
+  showWarning: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  iconPointerEventsTransparent: _propTypes.default.bool,
+  margin: _propTypes.default.string,
+  tabIndexVal: _propTypes.default.number
+};
+var _default = RadioButton;
+exports.default = _default;
+//# sourceMappingURL=RadioButton.js.map

package/dist/js/InputFields/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","onKeyPress","e","keyCode","Size","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled, {css} from 'styled-components';\r\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport { Size } from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\r\n\r\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n \r\n  color: ${COLORS.black};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .radio-button-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\r\n    }\r\n  }\r\n\r\n  .radio-button-label {\r\n    user-select: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    label{\r\n      cursor: inherit;\r\n    }\r\n\r\n    span {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):focus {\r\n    outline: none;\r\n\r\n    .radio-button-icon {\r\n      background-color: ${COLORS.white};\r\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n\r\n      svg {\r\n        color: ${COLORS.neutral_600};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):hover {\r\n    .radio-button-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${COLORS.primary_100};\r\n      box-shadow: none;\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: none;\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .radio-button-icon,\r\n    .radio-button-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .radio-button-icon{\r\n      background-color: ${COLORS.white};\r\n    }\r\n    \r\n    .radio-button-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface Props {\r\n  id: string;\r\n  selected: boolean;\r\n  select: (selected: boolean) => void;\r\n  label?: string;\r\n  additionalLabel?: string;\r\n  showWarning?: boolean;\r\n  disabled?: boolean;\r\n  iconPointerEventsTransparent?: boolean;\r\n  margin?: string;\r\n  size?: Size;\r\n  tabIndexVal?: number;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\r\n  id,\r\n  selected,\r\n  label,\r\n  additionalLabel,\r\n  showWarning,\r\n  select,\r\n  disabled,\r\n  margin,\r\n  iconPointerEventsTransparent,\r\n  size,\r\n  tabIndexVal\r\n}: Props, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled) {\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledRadioButton key={id} margin={margin}\r\n                       ref={ref}\r\n                       onClick={() => !disabled && select(!selected)}\r\n                       onMouseDown={e => e.preventDefault()}\r\n                       onKeyDown={onKeyPress}\r\n                       disabled={disabled}\r\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\r\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                       showWarning={showWarning}\r\n                       selected={selected}>\r\n      <div className={'radio-button-icon'} id={id}>\r\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\r\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\r\n      </div>\r\n      <div className={'radio-button-label'}>\r\n        {label && <label htmlFor={id}>{label}</label>}\r\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n      </div>\r\n    </StyledRadioButton>\r\n  );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"file":"RadioButton.js"}

package/dist/js/InputFields/ResponsiveComponentWrapper.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+declare type LabelProps = {
+    size?: Size.Small | Size.Medium;
+    children?: any;
+};
+declare const ReponsiveComponentWrapper: React.FunctionComponent<LabelProps>;
+export default ReponsiveComponentWrapper;

package/dist/js/InputFields/ResponsiveComponentWrapper.js

@@ -0,0 +1,65 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _types = require("../types");
+
+var _styles = require("../styles");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
+  var children = _ref.children,
+      size = _ref.size;
+
+  // Globally used variables within the component
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isMediumView = _React$useState2[0],
+      setIsMediumView = _React$useState2[1];
+
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      var mql = window.matchMedia("".concat(_styles.BREAKPOINTS.MEDIUM.replace('@media ', '')));
+      setIsMediumView(mql.matches);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return function cleanup() {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+  return size && size === _types.Size.Medium ? /*#__PURE__*/React.createElement(_styles.ComponentXS, null, children) : size && size === _types.Size.Small ? /*#__PURE__*/React.createElement(_styles.ComponentXXS, null, children) : isMediumView ? /*#__PURE__*/React.createElement(_styles.ComponentXS, null, children) : /*#__PURE__*/React.createElement(_styles.ComponentXXS, null, children);
+};
+
+ReponsiveComponentWrapper.propTypes = {
+  children: _propTypes.default.any
+};
+var _default = ReponsiveComponentWrapper;
+exports.default = _default;
+//# sourceMappingURL=ResponsiveComponentWrapper.js.map

package/dist/js/InputFields/ResponsiveComponentWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Size","Medium","Small"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;;;;;;;;;;;;;;;;;;;AAQA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBC,oBAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAR,MAAAA,eAAe,CAACG,GAAG,CAACM,OAAL,CAAf;AACD,KAHD;;AAIAL,IAAAA,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCR,YAAlC;AACA,WAAO,SAASS,OAAT,GAAmB;AACxBP,MAAAA,MAAM,CAACQ,mBAAP,CAA2B,QAA3B,EAAqCV,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAON,IAAI,IAAIA,IAAI,KAAKiB,YAAKC,MAAtB,gBACL,oBAAC,mBAAD,QAAcnB,QAAd,CADK,GAEHC,IAAI,IAAIA,IAAI,KAAKiB,YAAKE,KAAtB,gBACF,oBAAC,oBAAD,QAAepB,QAAf,CADE,GAEAI,YAAY,gBACd,oBAAC,mBAAD,QAAcJ,QAAd,CADc,gBAGd,oBAAC,oBAAD,QAAeA,QAAf,CAPF;AASD,CAxBD;;;AAHEA,EAAAA,Q;;eA6BaD,yB","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return function cleanup() {\r\n      window.removeEventListener('resize', handleResize);\r\n    };\r\n  });\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"file":"ResponsiveComponentWrapper.js"}

package/dist/js/InputFields/SearchBar.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Size } from '../types';
+declare type SeachBarProps = {
+    id: string;
+    searchTerm?: string;
+    setSearchTerm: (term: string) => void;
+    enterSearch: (e: any) => void;
+    removeSearch: (e: any) => void;
+    placeholder?: string;
+    performSearchLabel?: string;
+    disabled?: boolean;
+    validationMessage?: string;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    size?: Size.Small | Size.Medium;
+    margin?: string;
+};
+declare const SearchBar: React.FunctionComponent<SeachBarProps>;
+export default SearchBar;