@laerdal/life-react-components 1.8.0-dev.14.full → 1.8.0-dev.16

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _breakpoints = _interopRequireDefault(require("../../styles/breakpoints"));
+
+var _Button = require("../../Button");
+
+var _icons = require("../../icons");
+
+var _styles = require("../../styles");
+
+var _ProfileButton = require("../../ProfileButton");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var MobileMenuHeaderActions = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n"])));
+
+var MobileMenuHeaderLabel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+
+var MobileMenuHeaderWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ", " {\n    padding: 4px 8px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), _breakpoints.default.SMALL, _breakpoints.default.MEDIUM);
+
+var MobileMenuHeader = function MobileMenuHeader(_ref) {
+  var onGoBack = _ref.onGoBack,
+      onClose = _ref.onClose,
+      label = _ref.label,
+      profile = _ref.profile,
+      buttons = _ref.buttons,
+      onSubMenuOpen = _ref.onSubMenuOpen;
+
+  var buildProfileSubMenu = function buildProfileSubMenu() {
+    var _profile$signOut, _profile$signOut2, _profile$signOut3, _profile$signOut4;
+
+    return !!profile ? {
+      type: 'group',
+      label: profile.label,
+      header: {
+        header: profile.user.firstName + ' ' + profile.user.lastName,
+        note: profile.user.email,
+        link: profile.user.link
+      },
+      action: {
+        label: (_profile$signOut = profile.signOut) === null || _profile$signOut === void 0 ? void 0 : _profile$signOut.label,
+        action: (_profile$signOut2 = profile.signOut) === null || _profile$signOut2 === void 0 ? void 0 : _profile$signOut2.action,
+        icon: (_profile$signOut3 = profile.signOut) === null || _profile$signOut3 === void 0 ? void 0 : _profile$signOut3.icon,
+        disabled: (_profile$signOut4 = profile.signOut) === null || _profile$signOut4 === void 0 ? void 0 : _profile$signOut4.disabled
+      },
+      items: profile.sections.map(function (a) {
+        return _objectSpread(_objectSpread({}, a), {}, {
+          type: 'section'
+        });
+      })
+    } : undefined;
+  };
+
+  var renderItem = function renderItem(item, index) {
+    var _profile$user$firstNa, _profile$user, _profile$user$firstNa2, _profile$user$lastNam, _profile$user2, _profile$user2$lastNa;
+
+    switch (item.type) {
+      case 'profile':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, {
+          onClick: function onClick(e) {
+            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+            item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
+          },
+          icon: !profile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
+          initials: ((_profile$user$firstNa = profile === null || profile === void 0 ? void 0 : (_profile$user = profile.user) === null || _profile$user === void 0 ? void 0 : (_profile$user$firstNa2 = _profile$user.firstName) === null || _profile$user$firstNa2 === void 0 ? void 0 : _profile$user$firstNa2.charAt(0)) !== null && _profile$user$firstNa !== void 0 ? _profile$user$firstNa : '') + ((_profile$user$lastNam = profile === null || profile === void 0 ? void 0 : (_profile$user2 = profile.user) === null || _profile$user2 === void 0 ? void 0 : (_profile$user2$lastNa = _profile$user2.lastName) === null || _profile$user2$lastNa === void 0 ? void 0 : _profile$user2$lastNa.charAt(0)) !== null && _profile$user$lastNam !== void 0 ? _profile$user$lastNam : '')
+        }, index);
+
+      case 'submenu':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          disabled: item.disabled,
+          variant: 'secondary',
+          shape: 'circular',
+          action: function action(e) {
+            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+            onSubMenuOpen && onSubMenuOpen(item.menu);
+          },
+          children: item.icon
+        }, index);
+
+      case 'action':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          disabled: item.disabled,
+          variant: 'secondary',
+          shape: 'circular',
+          action: function action(e) {
+            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+            item.action && item.action(e === null || e === void 0 ? void 0 : e.target) && onClose();
+          },
+          children: item.icon
+        }, index);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileMenuHeaderWrapper, {
+    children: [onGoBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      action: function action(e) {
+        e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+        onGoBack();
+      },
+      variant: 'secondary',
+      shape: 'circular',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowLineLeft, {})
+    }), buttons === null || buttons === void 0 ? void 0 : buttons.filter(function (a) {
+      return a.placement === 'left';
+    }).map(renderItem), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileMenuHeaderLabel, {
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileMenuHeaderActions, {
+      children: [buttons === null || buttons === void 0 ? void 0 : buttons.filter(function (a) {
+        return a.placement !== 'left';
+      }).map(renderItem), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginLeft: '8px'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          variant: 'secondary',
+          action: function action(e) {
+            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+            onClose();
+          },
+          shape: 'circular',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Close, {})
+        })
+      })]
+    })]
+  });
+};
+
+MobileMenuHeader.propTypes = {
+  onGoBack: _propTypes.default.func,
+  onClose: _propTypes.default.func.isRequired,
+  label: _propTypes.default.string,
+  buttons: _propTypes.default.array,
+  onSubMenuOpen: _propTypes.default.func
+};
+var _default = MobileMenuHeader;
+exports.default = _default;
+//# sourceMappingURL=MobileMenuHeader.cjs.map

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","MobileMenuHeaderWrapper","Breakpoints","MEDIUM","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","placement","marginLeft"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n  MenuAccountInfo, MobileMenuButtonTypes,\n  MenuIconButton,\n  MenuIconSubMenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuProfileButton, ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.MEDIUM} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile':\n        return <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}/>\n      case 'submenu':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}>\n          {item.icon}\n        </IconButton>\n      case 'action':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}>\n          {item.icon}\n        </IconButton>\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.cjs"}

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MobileMenuButtonTypes, MenuNavigationItemTypeGroup, ProfileMenu, MenuNavigationCustomSubMenu } from '../types';
+interface MobileMenuHeaderProps {
+    onGoBack?: () => void;
+    onClose: () => void;
+    label?: string;
+    profile?: ProfileMenu;
+    buttons?: MobileMenuButtonTypes[];
+    onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;
+}
+declare const MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps>;
+export default MobileMenuHeader;

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js

@@ -0,0 +1,139 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import styled from 'styled-components';
+import Breakpoints from '../../styles/breakpoints';
+import { IconButton } from '../../Button';
+import { SystemIcons } from '../../icons';
+import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
+import { ProfileButton } from '../../ProfileButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MobileMenuHeaderActions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n"])));
+var MobileMenuHeaderLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var MobileMenuHeaderWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ", " {\n    padding: 4px 8px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), Breakpoints.SMALL, Breakpoints.MEDIUM);
+
+var MobileMenuHeader = function MobileMenuHeader(_ref) {
+  var onGoBack = _ref.onGoBack,
+      onClose = _ref.onClose,
+      label = _ref.label,
+      profile = _ref.profile,
+      buttons = _ref.buttons,
+      onSubMenuOpen = _ref.onSubMenuOpen;
+
+  var buildProfileSubMenu = function buildProfileSubMenu() {
+    var _profile$signOut, _profile$signOut2, _profile$signOut3, _profile$signOut4;
+
+    return !!profile ? {
+      type: 'group',
+      label: profile.label,
+      header: {
+        header: profile.user.firstName + ' ' + profile.user.lastName,
+        note: profile.user.email,
+        link: profile.user.link
+      },
+      action: {
+        label: (_profile$signOut = profile.signOut) === null || _profile$signOut === void 0 ? void 0 : _profile$signOut.label,
+        action: (_profile$signOut2 = profile.signOut) === null || _profile$signOut2 === void 0 ? void 0 : _profile$signOut2.action,
+        icon: (_profile$signOut3 = profile.signOut) === null || _profile$signOut3 === void 0 ? void 0 : _profile$signOut3.icon,
+        disabled: (_profile$signOut4 = profile.signOut) === null || _profile$signOut4 === void 0 ? void 0 : _profile$signOut4.disabled
+      },
+      items: profile.sections.map(function (a) {
+        return _objectSpread(_objectSpread({}, a), {}, {
+          type: 'section'
+        });
+      })
+    } : undefined;
+  };
+
+  var renderItem = function renderItem(item, index) {
+    var _profile$user$firstNa, _profile$user, _profile$user$firstNa2, _profile$user$lastNam, _profile$user2, _profile$user2$lastNa;
+
+    switch (item.type) {
+      case 'profile':
+        return /*#__PURE__*/_jsx(ProfileButton, {
+          onClick: function onClick(e) {
+            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+            item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
+          },
+          icon: !profile && /*#__PURE__*/_jsx(SystemIcons.User, {}),
+          initials: ((_profile$user$firstNa = profile === null || profile === void 0 ? void 0 : (_profile$user = profile.user) === null || _profile$user === void 0 ? void 0 : (_profile$user$firstNa2 = _profile$user.firstName) === null || _profile$user$firstNa2 === void 0 ? void 0 : _profile$user$firstNa2.charAt(0)) !== null && _profile$user$firstNa !== void 0 ? _profile$user$firstNa : '') + ((_profile$user$lastNam = profile === null || profile === void 0 ? void 0 : (_profile$user2 = profile.user) === null || _profile$user2 === void 0 ? void 0 : (_profile$user2$lastNa = _profile$user2.lastName) === null || _profile$user2$lastNa === void 0 ? void 0 : _profile$user2$lastNa.charAt(0)) !== null && _profile$user$lastNam !== void 0 ? _profile$user$lastNam : '')
+        }, index);
+
+      case 'submenu':
+        return /*#__PURE__*/_jsx(IconButton, {
+          disabled: item.disabled,
+          variant: 'secondary',
+          shape: 'circular',
+          action: function action(e) {
+            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+            onSubMenuOpen && onSubMenuOpen(item.menu);
+          },
+          children: item.icon
+        }, index);
+
+      case 'action':
+        return /*#__PURE__*/_jsx(IconButton, {
+          disabled: item.disabled,
+          variant: 'secondary',
+          shape: 'circular',
+          action: function action(e) {
+            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+            item.action && item.action(e === null || e === void 0 ? void 0 : e.target) && onClose();
+          },
+          children: item.icon
+        }, index);
+    }
+  };
+
+  return /*#__PURE__*/_jsxs(MobileMenuHeaderWrapper, {
+    children: [onGoBack && /*#__PURE__*/_jsx(IconButton, {
+      action: function action(e) {
+        e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+        onGoBack();
+      },
+      variant: 'secondary',
+      shape: 'circular',
+      children: /*#__PURE__*/_jsx(SystemIcons.ArrowLineLeft, {})
+    }), buttons === null || buttons === void 0 ? void 0 : buttons.filter(function (a) {
+      return a.placement === 'left';
+    }).map(renderItem), label && /*#__PURE__*/_jsx(MobileMenuHeaderLabel, {
+      children: label
+    }), /*#__PURE__*/_jsxs(MobileMenuHeaderActions, {
+      children: [buttons === null || buttons === void 0 ? void 0 : buttons.filter(function (a) {
+        return a.placement !== 'left';
+      }).map(renderItem), onClose && /*#__PURE__*/_jsx("div", {
+        style: {
+          marginLeft: '8px'
+        },
+        children: /*#__PURE__*/_jsx(IconButton, {
+          variant: 'secondary',
+          action: function action(e) {
+            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+            onClose();
+          },
+          shape: 'circular',
+          children: /*#__PURE__*/_jsx(SystemIcons.Close, {})
+        })
+      })]
+    })]
+  });
+};
+
+MobileMenuHeader.propTypes = {
+  onGoBack: _pt.func,
+  onClose: _pt.func.isRequired,
+  label: _pt.string,
+  buttons: _pt.array,
+  onSubMenuOpen: _pt.func
+};
+export default MobileMenuHeader;
+//# sourceMappingURL=MobileMenuHeader.js.map

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","MEDIUM","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","placement","marginLeft"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n  MenuAccountInfo, MobileMenuButtonTypes,\n  MenuIconButton,\n  MenuIconSubMenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuProfileButton, ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.MEDIUM} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile':\n        return <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}/>\n      case 'submenu':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}>\n          {item.icon}\n        </IconButton>\n      case 'action':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}>\n          {item.icon}\n        </IconButton>\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.js"}

package/dist/GlobalNavigationBar/types.cjs

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.cjs.map

package/dist/GlobalNavigationBar/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.cjs"}

package/dist/GlobalNavigationBar/types.d.ts

@@ -0,0 +1,120 @@
+import React from 'react';
+import { HyperlinkProps } from '../HyperLink/HyperLink';
+export interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {
+    label: string;
+    icon?: React.ReactElement;
+}
+export interface MenuButton {
+    label: string;
+    icon?: React.ReactNode;
+    action: () => void;
+    disabled?: boolean;
+}
+export interface MenuGroupFooter {
+    header: string;
+    note?: string;
+    link?: MenuHyperLinkProps;
+}
+export interface MenuGroupHeader {
+    header: string;
+    note?: string;
+    link?: MenuHyperLinkProps;
+}
+export interface MenuAccountInfo {
+    firstName: string;
+    lastName: string;
+    email: string;
+    link?: MenuHyperLinkProps;
+}
+export interface ProfileMenu {
+    label?: string;
+    user: MenuAccountInfo;
+    sections: MenuNavigationSection[];
+    signOut?: MenuButton;
+}
+export interface MenuIconSubMenuButton {
+    type: 'submenu';
+    icon: React.ReactNode;
+    menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;
+    placement?: 'left' | 'right';
+    disabled?: boolean;
+}
+export interface MenuIconButton {
+    type: 'action';
+    icon: React.ReactNode;
+    action: (button?: EventTarget) => boolean | void;
+    placement?: 'left' | 'right';
+    disabled?: boolean;
+}
+export interface MenuProfileButton {
+    type: 'profile';
+    action?: (button?: EventTarget) => boolean | void;
+    placement?: 'left' | 'right';
+    disabled?: boolean;
+}
+export interface MenuSwitcherButton {
+    type: 'switcher';
+    placement?: 'left' | 'right';
+    disabled?: boolean;
+    action?: (button?: EventTarget) => boolean | void;
+}
+export declare type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;
+export declare type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;
+export interface MobileNavigationMenuProps {
+    label?: string;
+    buttons?: MobileMenuButtonTypes[];
+    header?: MenuGroupHeader;
+    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup)[];
+    footer?: MenuGroupFooter;
+    action?: MenuButton;
+}
+export interface DesktopNavigationMenuProps {
+    buttons?: DesktopMenuButtonTypes[];
+    items: MenuNavigationItemTypeItem[];
+    action?: MenuButton;
+    reverseRightSideOrder?: boolean;
+}
+export interface MenuNavigationGroup<T = (MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup)> {
+    label: string;
+    note?: string;
+    buttons?: MobileMenuButtonTypes[];
+    header?: MenuGroupHeader;
+    items: T[];
+    footer?: MenuGroupFooter;
+    action?: MenuButton;
+}
+export declare type MenuNavigationItem = {
+    icon?: React.ReactNode;
+    to: string;
+    exact?: boolean;
+    disabled?: boolean;
+    external?: boolean;
+    action?: () => void;
+    label: string;
+    note?: string;
+    pinned?: boolean;
+};
+export interface MenuNavigationSection<T = MenuNavigationItem> {
+    divider?: boolean;
+    pinned?: boolean;
+    label?: string;
+    items: T[];
+}
+export declare type MenuNavigationItemTypeItem = MenuNavigationItem & {
+    type?: 'item';
+};
+export declare type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {
+    type: 'group';
+    icon?: React.ReactNode;
+    pinned?: boolean;
+    disabled?: boolean;
+};
+export declare type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {
+    type: 'section';
+};
+export declare type MenuNavigationCustomSubMenu = {
+    type: 'custom';
+    label?: string;
+    buttons?: MobileMenuButtonTypes[];
+    custom: () => React.ReactNode;
+};

package/dist/GlobalNavigationBar/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/GlobalNavigationBar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}

package/dist/InputFields/NumberField.cjs

@@ -39,7 +39,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
 
-var LabelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin-bottom: 4px;\n    color: ", ";\n    display: flex;\n    ", "\n"])), _styles.COLORS.neutral_500, (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null));
+var LabelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin-bottom: 4px;\n    color: ", ";\n    display: flex;\n    ", "\n"])), _styles.COLORS.neutral_500, function (props) {
+  return props.size === _types.Size.Small ? (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null);
+});
 
 var LabelText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
 
@@ -59,23 +61,25 @@ var PrefixContainer = _styledComponents.default.div(_templateObject6 || (_templa
   return props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null);
 });
 
-var OperatorWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    margin:", ";\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        border: 1px solid ", ";\n        margin: 16px 0;\n        background: ", ";\n    }\n"])), function (props) {
+var OperatorWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    margin:", ";\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ", ";\n        width: 1px;\n    }\n"])), function (props) {
   return props.size === _types.Size.Medium ? '4px 0' : '';
-}, _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
+}, _styles.COLORS.neutral_200);
 
-var NumberInput = _styledComponents.default.input(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: ", ";\n    border: none;\n    color: ", ";\n    ", "\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n"])), function (props) {
+var NumberInput = _styledComponents.default.input(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%; \n    height: ", ";   \n    border: none;\n    color: ", ";\n    padding: 0;    \n    ", "\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n"])), function (props) {
   return props.fieldSize === _types.Size.Small ? '20px' : '24px';
 }, _styles.COLORS.neutral_500, function (props) {
   return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, null);
 });
 
-var NoteLabel = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    ", "    \n"])), _styles.COLORS.neutral_500, (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null));
+var NoteLabel = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    ", "    \n"])), _styles.COLORS.neutral_500, function (props) {
+  return props.size === _types.Size.Small ? (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null);
+});
 
 var NoteIcon = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n    svg {\n        height: 16px;\n    }\n"])));
 
 var NoteContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    margin-top: 5px;\n\n    &.valid {\n        ", " {\n            color: ", ";\n        }\n\n        ", " {\n            svg path {\n                fill: ", ";\n            }\n        }\n    }\n\n    &.invalid {\n        ", " {\n            color: ", ";\n        }\n\n        ", " {\n            svg path {\n                fill: ", ";\n            }\n        }\n    }\n"])), NoteLabel, _styles.COLORS.correct_500, NoteIcon, _styles.COLORS.correct_500, NoteLabel, _styles.COLORS.critical_500, NoteIcon, _styles.COLORS.critical_500);
 
-var InputContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 280px;\n    height: ", ";\n    display: flex;    \n    border: 1px solid ", ";\n    border-radius: 4px;\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ", ";\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ", ";\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ", ";\n    }\n\n    &.disabled {\n        border: 1px solid ", ";\n        cursor: not-allowed;\n        \n        ", "{\n            color: ", ";\n        }\n\n        ", "{\n            color: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.readOnly {\n        background: ", ";\n        border: 1px solid ", ";\n        cursor: not-allowed;\n\n        ", "{\n            background: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ", ";\n    }\n\n    &.invalid {\n        border: 2px solid ", ";\n    }\n"])), function (props) {
+var InputContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 160px;\n    height: ", ";\n    display: flex;\n    border: 0;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &.disabled {\n        border: 1px solid ", ";\n        cursor: not-allowed;\n        \n        ", "{\n            color: ", ";\n        }\n\n        ", "{\n            color: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.readOnly {\n        background: ", ";\n        border: 1px solid ", ";\n        cursor: not-allowed;\n\n        ", "{\n            background: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ", ";\n        box-shadow: none;\n    }\n\n    &.invalid {\n        border: 2px solid ", ";\n        box-shadow: none;\n    }\n"])), function (props) {
   return props.size === _types.Size.Small ? '48px' : '56px';
 }, _styles.COLORS.neutral_400, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, PrefixContainer, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_100, _styles.COLORS.correct_400, _styles.COLORS.critical_400);
 
@@ -176,14 +180,17 @@ var NumberField = function NumberField(_ref) {
 
   var isLocked = function isLocked(input, operator) {
     var val = decimalPrecision ? parseFloat(input) : parseInt(input);
+    val = isNaN(val) && userInput === '' ? 0 : val;
     var operatorState = false;
     if (operator === 'add' && maxValue) operatorState = val < maxValue ? false : true;
     if (operator === 'subtract' && minValue) operatorState = val > minValue ? false : true;
+    if (operator === 'subtract' && !minValue && !allowNegative) operatorState = val > 0 ? false : true;
     return operatorState;
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(LabelContainer, {
+      size: size,
       children: [required && /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelIcon, {
         size: size,
         "data-testid": 'labelIcon',
@@ -219,6 +226,7 @@ var NumberField = function NumberField(_ref) {
         "data-testid": 'operators',
         size: size,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          tabIndex: -1,
           variant: "secondary",
           shape: "square",
           action: function action() {
@@ -232,6 +240,7 @@ var NumberField = function NumberField(_ref) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "divider"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          tabIndex: -1,
           variant: "secondary",
           shape: "square",
           action: function action() {
@@ -249,6 +258,7 @@ var NumberField = function NumberField(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NoteIcon, {
         children: noteIcon
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoteLabel, {
+        size: size,
         children: note
       })]
     })]