@equinor/echo-components 0.5.19-rc1 → 0.5.19

package/dist/index.js

@@ -37,16 +37,16 @@ function styleInject(css, ref) {
 var css_248z$B = ":root{--xSmall:0.25rem;--small:0.5rem;--medium:1rem;--large:1.5rem;--xLarge:2rem;--black:#000;--white:#fff;--equiBlue1:#233746;--equiBlue2:#d7e1ed;--equiBlue3:#d5eaf4;--equiGray1:#87929a;--equiGray2:#b4bbc0;--equiGray3:#d1d5d8;--equiGray4:#e3e6e8;--equiGray5:#f7f7f7;--equiRed1:#ff1243;--darkEquiRed:#ce183e;--equiGreen1:#006f79;--equiGreen2:#deedee;--equiGreen3:#e6faec;--equiGreen4:#c3f3d2;--echoText:#3d3d3d;--disabledBackgroundColor:#eaeaea;--disabledColor:#6f6f6f;--pm01:#0f0;--pm02:#ff1493;--pm03:#0ff;--pm04:#9400d3;--pm05:#1e90ff;--pm06:#ffdead;--pm010:#ff4500;--pm015:#228b22;--pm020:#00008b;--onGoing:#fbca36;--done:#4bb748;--asBuilt:#007079;--planned:#4bb748;--future:#52c0ff;--historic:#ff7d98;--outOfService:#ff9200;--reserved:#243746;--voided:#eb0000;--default:#dcdcdc;--ok:#23ef2a;--os:#adaead;--pa:#f94693;--pb:#fd0;--unknown:#525252;--rfccSent:#bcf316;--rfccPartly:#c7f316;--rfcc:#60f316;--rfocSent:#0dccf2;--rfocPartly:#1accf2;--rfoc:#0d59f2;--rfccRejected:#ff1243;--rfocRejected:#ff1243;--handoverError:#eb0000;--priorityHigh:#ff1243;--priorityMedium:#fbca36;--systems:#d5eaf4;--locations:#3eb54a;--ofpDark:#f4d6a2;--ofpLight:#faebce;--warningText:#ad6200;--warningIcon:#ff9200;--warningBackground:#ffe7d6;--dropDownButtonBackground:#f0f0f0;--dropDownTextColor:grey;--searchBarBackground:#f7f7f7;--highSeverity:#ffc1c1;--mediumSeverity:#ffe7d6;--lowSeverity:#dce6ee;--defaultSeverity:#d5eaf4;--highSeverityText:#eb0000;--mediumSeverityText:#52c0ff;--lowSeverityText:#4bb748;--defaultSeverityText:#3d3d3d;--toggleActive:#4bb748;--toggleInactive:#b30d2f;--hoverIcon:#004f55;--hoverIconWithNotification:#b30d2f;--tertiaryText:#6f6f6f}#root,body,html{height:100%;overflow:hidden;width:100%}html[data-theme=dark]{--equiGreen1:#006f79}body,h1,h2,h3,h4,h5,h6,label,p{color:var(--echoText)}body,html,span{font-family:Equinor!important}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#f7f7f7;border-radius:5px}::-webkit-scrollbar-thumb{background:#007079;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#004f55}button,input{appearance:none;background:transparent;border:inherit;color:inherit;font:inherit;outline:0}input,input:after,input:before{-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto}";
 styleInject(css_248z$B);
 
-/**
- * Component that work's as a eds icon wrapper, it imports all eds possible icons
- *
- * @param {IconProps} {
- *  name: The name of the icon to be displayed
- *  title: The html title to use
- *  color:The color to icon should have
- *  size: The wanted size of the icon. Possible values are 16, 24, 32, 40 and 48
- * }
- * @return {*} {JSX.Element} A icon for the provided information
+/**
+ * Component that work's as a eds icon wrapper, it imports all eds possible icons
+ *
+ * @param {IconProps} {
+ *  name: The name of the icon to be displayed
+ *  title: The html title to use
+ *  color:The color to icon should have
+ *  size: The wanted size of the icon. Possible values are 16, 24, 32, 40 and 48
+ * }
+ * @return {*} {JSX.Element} A icon for the provided information
  */
 var Icon = function Icon(_ref) {
   var name = _ref.name,
@@ -358,17 +358,17 @@ var css_248z$A = ".dataInfoButton-module_button__N4F5j{background-color:var(--wh
 var style$a = {"button":"dataInfoButton-module_button__N4F5j","buttonWithBadge":"dataInfoButton-module_buttonWithBadge__Qjm3a"};
 styleInject(css_248z$A);
 
-/**
- * Component that renders a data information button with a badge to indicate the number of items under that scoped type
- *
- * @param {DataInfoButtonProps} { data } Contains data information related to how the button should be rendered
- * numberOfItems: If number is 1 or less no badge will be displayed on the button. If number is over 99,
- * then the text 99+ will be displayed. Otherwise the provided number will be displayed
- * label: The name of the data type, will be displayed on the button
- * ariaLabel: The aria label set on the button, if empty the label will be used
- * onTagInfoClicked: The method to be called when button is pressed
- * itemButtonClassName: Used to style button if default styling is not wanted. class name might need higher precedence for overriding existing styling e.g. "div.itemButtonClassName { background-color: blue !important}"
- * @return {*}  {JSX.Element} Data information button with or without a badge based on the provided data object
+/**
+ * Component that renders a data information button with a badge to indicate the number of items under that scoped type
+ *
+ * @param {DataInfoButtonProps} { data } Contains data information related to how the button should be rendered
+ * numberOfItems: If number is 1 or less no badge will be displayed on the button. If number is over 99,
+ * then the text 99+ will be displayed. Otherwise the provided number will be displayed
+ * label: The name of the data type, will be displayed on the button
+ * ariaLabel: The aria label set on the button, if empty the label will be used
+ * onTagInfoClicked: The method to be called when button is pressed
+ * itemButtonClassName: Used to style button if default styling is not wanted. class name might need higher precedence for overriding existing styling e.g. "div.itemButtonClassName { background-color: blue !important}"
+ * @return {*}  {JSX.Element} Data information button with or without a badge based on the provided data object
  */
 var DataInfoButton = function DataInfoButton(_ref) {
   var data = _ref.data;
@@ -386,15 +386,15 @@ var css_248z$z = ".dataInfoPopover-module_wrapper__l8JCd{display:flex;flex-direc
 var style$9 = {"wrapper":"dataInfoPopover-module_wrapper__l8JCd","arrow":"dataInfoPopover-module_arrow__KXQ5a","optionsPopover":"dataInfoPopover-module_optionsPopover__ZPXbv","groupWrapper":"dataInfoPopover-module_groupWrapper__InWuY","banner":"dataInfoPopover-module_banner__QtiKf","infoMessage":"dataInfoPopover-module_infoMessage__lqzTe"};
 styleInject(css_248z$z);
 
-/**
- * Component that renders a popover with data information buttons
- *
- * @param {DataInfoPopoverProps} {
- *  dataToShow: list of DataInformation objects to be displayed.
- *  The itemType in these objects are used to group them together in the popover
- *  isLoading: loading flag that tells if a dot progress should be displayed if data is being fetched
- * }
- * @return {*} {JSX.Element} Popover with data information buttons based on the provided DataInformation objects
+/**
+ * Component that renders a popover with data information buttons
+ *
+ * @param {DataInfoPopoverProps} {
+ *  dataToShow: list of DataInformation objects to be displayed.
+ *  The itemType in these objects are used to group them together in the popover
+ *  isLoading: loading flag that tells if a dot progress should be displayed if data is being fetched
+ * }
+ * @return {*} {JSX.Element} Popover with data information buttons based on the provided DataInformation objects
  */
 var DataInfoPopover = function DataInfoPopover(_ref) {
   var dataToShow = _ref.dataToShow,
@@ -455,16 +455,16 @@ var css_248z$y = ".buttonWithPopover-module_button__FDyTt{background-color:var(-
 var style$8 = {"button":"buttonWithPopover-module_button__FDyTt","wrapper":"buttonWithPopover-module_wrapper__-pQfB","spinner":"buttonWithPopover-module_spinner__LMbqe"};
 styleInject(css_248z$y);
 
-/**
- * Component that renders a round button, that opens a popover upon being clicked
- *
- * @param {ButtonWithPopoverProps} {
- *     onShowMoreClicked: method called upon button clicked
- *     fetchedData: array of DataInformation that popover should be displayed when button is clicked.
- *                  Meant to be the return value of the fetchDataToShow method
- *     isLoading: flag to show loading state if data fetch takes some time
- *     expanded: flag to determine if popover should be expanded or not
- * @return {*}  {JSX.Element} Round button with belonging popover to display data information buttons
+/**
+ * Component that renders a round button, that opens a popover upon being clicked
+ *
+ * @param {ButtonWithPopoverProps} {
+ *     onShowMoreClicked: method called upon button clicked
+ *     fetchedData: array of DataInformation that popover should be displayed when button is clicked.
+ *                  Meant to be the return value of the fetchDataToShow method
+ *     isLoading: flag to show loading state if data fetch takes some time
+ *     expanded: flag to determine if popover should be expanded or not
+ * @return {*}  {JSX.Element} Round button with belonging popover to display data information buttons
  */
 var ButtonWithPopover = function ButtonWithPopover(_ref) {
   var onShowMoreClicked = _ref.onShowMoreClicked,
@@ -507,14 +507,14 @@ var css_248z$x = ".tagIcon-module_icon__FVhlT{border:3px solid var(--white);bord
 var styles$n = {"icon":"tagIcon-module_icon__FVhlT","shadow":"tagIcon-module_shadow__dAk0l"};
 styleInject(css_248z$x);
 
-/**
- * Component that will wrap the provided icon with a background color (usually the legend color)
- *
- * @param {TagIconProps} {
- *  icon: Icon to be wrapped
- *  legendColor: background color to apply. Need to be valid css color
- * }
- * @return {*}  {JSX.Element} Wrapped icon with provided color
+/**
+ * Component that will wrap the provided icon with a background color (usually the legend color)
+ *
+ * @param {TagIconProps} {
+ *  icon: Icon to be wrapped
+ *  legendColor: background color to apply. Need to be valid css color
+ * }
+ * @return {*}  {JSX.Element} Wrapped icon with provided color
  */
 var TagIcon = function TagIcon(_ref) {
   var icon = _ref.icon,
@@ -527,12 +527,12 @@ var TagIcon = function TagIcon(_ref) {
   }, icon);
 };
 
-/**
- * Component that will wrap the provided child element in a shadow.
- * Should be used to add shadow to the tagIcon component
- *
- * @param {TagIconShadowWrapperProps} { children } Child element to wrap
- * @return {*} {JSX.Element} wrapped child element in a shadow
+/**
+ * Component that will wrap the provided child element in a shadow.
+ * Should be used to add shadow to the tagIcon component
+ *
+ * @param {TagIconShadowWrapperProps} { children } Child element to wrap
+ * @return {*} {JSX.Element} wrapped child element in a shadow
  */
 var TagIconShadowWrapper = function TagIconShadowWrapper(_ref) {
   var children = _ref.children;
@@ -545,22 +545,22 @@ var css_248z$w = ".tagContextMenu-module_contextWrapper__o8wWz{border-radius:10r
 var styles$m = {"contextWrapper":"tagContextMenu-module_contextWrapper__o8wWz","contextWrapperExpanded":"tagContextMenu-module_contextWrapperExpanded__FJI8c","selected":"tagContextMenu-module_selected__4L6WK","tagInfoWrapper":"tagContextMenu-module_tagInfoWrapper__y4LBf","tagText":"tagContextMenu-module_tagText__8GaFk","tagHeader":"tagContextMenu-module_tagHeader__NW1El","tagDescription":"tagContextMenu-module_tagDescription__lrT1D","tagInfoIcon":"tagContextMenu-module_tagInfoIcon__AMpqu"};
 styleInject(css_248z$w);
 
-/**
- * Component that renders a tag context menu that can be expanded and closed upon click
- * The condensed variant will only display the the relevant tag icon
- * The expanded variant will display relevant tag icon, tag number and tag description
- *
- * @param {TagContextMenuProps} {
- *     expanded: flag that state if the context menu should be expanded or not
- *     setExpanded: method to update the expanded flag
- *     tagNo: the tag no to display
- *     description: the tag description
- *     openTagInformation: method called when expanded context menu is called
- *     selected: Flag to handle if there are multiple context menu's on a page, and a selected style should be applied
- *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
- *     children: Meant to be used to pass TagIcon component to this component
- * }
- * @return {*}  {JSX.Element} a tag context menu for the provided properties
+/**
+ * Component that renders a tag context menu that can be expanded and closed upon click
+ * The condensed variant will only display the the relevant tag icon
+ * The expanded variant will display relevant tag icon, tag number and tag description
+ *
+ * @param {TagContextMenuProps} {
+ *     expanded: flag that state if the context menu should be expanded or not
+ *     setExpanded: method to update the expanded flag
+ *     tagNo: the tag no to display
+ *     description: the tag description
+ *     openTagInformation: method called when expanded context menu is called
+ *     selected: Flag to handle if there are multiple context menu's on a page, and a selected style should be applied
+ *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
+ *     children: Meant to be used to pass TagIcon component to this component
+ * }
+ * @return {*}  {JSX.Element} a tag context menu for the provided properties
  */
 var TagContextMenu = function TagContextMenu(_ref) {
   var expanded = _ref.expanded,
@@ -609,24 +609,24 @@ var css_248z$v = ".contextMenu-module_wrapper__p-0Zc{display:flex;flex-wrap:wrap
 var style$7 = {"wrapper":"contextMenu-module_wrapper__p-0Zc"};
 styleInject(css_248z$v);
 
-/**
- * Component that renders full context menu functionality, meant for displaying tag context menu.
- * With the ability to provide more information button and related popover that should be wrapped with the context menu
- *
- * @param {ContextMenuProps} {
- *     icon: icon to be displayed
- *     expanded: flag to determine if context menu should be expanded or not
- *     legendColor: color used for the tag icon
- *     setExpanded: method to update expanded flag
- *     tagNo: The tag number to display
- *     description: The tag description to display
- *     positionStyle: The position styling element used to position the context menu
- *     openTagInformation: Method that will be called when expanded context menu is clicked
- *     selected: Flag to handle if there are multiple context menu's on a page, and a selected style should be applied
- *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
- *     children: Related elements to display, e.g. more information button
- * }
- * @return {*} {JSX.Element} Context menu with relevant children wrapped
+/**
+ * Component that renders full context menu functionality, meant for displaying tag context menu.
+ * With the ability to provide more information button and related popover that should be wrapped with the context menu
+ *
+ * @param {ContextMenuProps} {
+ *     icon: icon to be displayed
+ *     expanded: flag to determine if context menu should be expanded or not
+ *     legendColor: color used for the tag icon
+ *     setExpanded: method to update expanded flag
+ *     tagNo: The tag number to display
+ *     description: The tag description to display
+ *     positionStyle: The position styling element used to position the context menu
+ *     openTagInformation: Method that will be called when expanded context menu is clicked
+ *     selected: Flag to handle if there are multiple context menu's on a page, and a selected style should be applied
+ *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
+ *     children: Related elements to display, e.g. more information button
+ * }
+ * @return {*} {JSX.Element} Context menu with relevant children wrapped
  */
 var ContextMenu = function ContextMenu(_ref) {
   var icon = _ref.icon,
@@ -13527,19 +13527,19 @@ var css_248z$q = ".dialogGenerator-module_footer__h-ido{box-sizing:border-box;di
 var styles$l = {"footer":"dialogGenerator-module_footer__h-ido"};
 styleInject(css_248z$q);
 
-/**
- * Component that renders a dialog box based on input properties
- *
- * @param {DialogGeneratorProps} {
- *     dialogStyle: style property to override existing styling on the dialog wrapper
- *     title: the title of the dialog
- *     children: The main content of the dialog
- *     actionButtons: the buttons to show in the dialog
- *     open: if the dialog should be open
- *     isDismissable: if the modal is closable by clicking aside or by hitting ESC key
- *     onClose: callback to be called when the dialog is closed
- * }
- * @return {*}  {JSX.Element} Dialog component
+/**
+ * Component that renders a dialog box based on input properties
+ *
+ * @param {DialogGeneratorProps} {
+ *     dialogStyle: style property to override existing styling on the dialog wrapper
+ *     title: the title of the dialog
+ *     children: The main content of the dialog
+ *     actionButtons: the buttons to show in the dialog
+ *     open: if the dialog should be open
+ *     isDismissable: if the modal is closable by clicking aside or by hitting ESC key
+ *     onClose: callback to be called when the dialog is closed
+ * }
+ * @return {*}  {JSX.Element} Dialog component
  */
 var DialogGenerator = function DialogGenerator(_ref) {
   var dialogStyle = _ref.dialogStyle,
@@ -14498,24 +14498,24 @@ var _EchoUtils$Hooks = EchoUtils.Hooks,
   useFocus$1 = _EchoUtils$Hooks.useFocus,
   useOnOutsideClick = _EchoUtils$Hooks.useOnOutsideClick;
 var generateRandomId = EchoUtils.Utils.generateRandomId;
-/**
- * Component that renders a dropdown menu, e.g., for a plant selector.
- * Additional possibility to make the list searchable by adding a search field.
- * @param {DropdownItemProps} {
- *     selected: The item that is currently selected from the list.
- *     data: The list of data items to be displayed in the dropdown.
- *     placeholder: Placeholder text to be displayed when no item is selected.
- *     openDownWards: Flag which decides if the menu is opened downwards or upwards.
- *     filterFunc: Function which filters the list of data based on the value of the search field.
- *     setSelected: Function for setting the selected item.
- *     isDisabled: Flag which disables the dropdown.
- *     disabledText: The title text that displays when the dropdown is disabled.
- *     variant: Decides which style the dropdown should have. Either default or compact.
- *     showSearch: Flag which decides whether we should include the search field or not.
- *     position: Determines if the dropdown position should be relative or absolute.
- *     triggerOpen: Callback to trigger when the dropdown is opened.
- * }
- * @return {*} {JSX.Element} The dropdown component.
+/**
+ * Component that renders a dropdown menu, e.g., for a plant selector.
+ * Additional possibility to make the list searchable by adding a search field.
+ * @param {DropdownItemProps} {
+ *     selected: The item that is currently selected from the list.
+ *     data: The list of data items to be displayed in the dropdown.
+ *     placeholder: Placeholder text to be displayed when no item is selected.
+ *     openDownWards: Flag which decides if the menu is opened downwards or upwards.
+ *     filterFunc: Function which filters the list of data based on the value of the search field.
+ *     setSelected: Function for setting the selected item.
+ *     isDisabled: Flag which disables the dropdown.
+ *     disabledText: The title text that displays when the dropdown is disabled.
+ *     variant: Decides which style the dropdown should have. Either default or compact.
+ *     showSearch: Flag which decides whether we should include the search field or not.
+ *     position: Determines if the dropdown position should be relative or absolute.
+ *     triggerOpen: Callback to trigger when the dropdown is opened.
+ * }
+ * @return {*} {JSX.Element} The dropdown component.
  */
 var Dropdown = function Dropdown(_ref) {
   var selected = _ref.selected,
@@ -14916,16 +14916,16 @@ var css_248z$m = ".echoHeader-module_headerWrapper__1aaPR{background-color:#fff;
 var styles$i = {"headerWrapper":"echoHeader-module_headerWrapper__1aaPR","headerContainer":"echoHeader-module_headerContainer__jHC0e","moduleIcon":"echoHeader-module_moduleIcon__-U7mU","titleSection":"echoHeader-module_titleSection__macuj","moduleTextTitle":"echoHeader-module_moduleTextTitle__CiJzX","plantName":"echoHeader-module_plantName__eNNEy","customSection":"echoHeader-module_customSection__gGG2C"};
 styleInject(css_248z$m);
 
-/**
- * Component that renders the Echo header
- *
- * @param {EchoHeaderProps} {
- *    moduleTitle: the title of the module
- *    moduleIcon: the module Icon
- *    plantName: show the plant name next to the module title
- *    customSection: a section in the header where there can be custom components
- * }
- * @returns {*} {JSX.Element} Echo header with custom section
+/**
+ * Component that renders the Echo header
+ *
+ * @param {EchoHeaderProps} {
+ *    moduleTitle: the title of the module
+ *    moduleIcon: the module Icon
+ *    plantName: show the plant name next to the module title
+ *    customSection: a section in the header where there can be custom components
+ * }
+ * @returns {*} {JSX.Element} Echo header with custom section
  */
 var EchoHeader = function EchoHeader(_ref) {
   var _ref$moduleTitle = _ref.moduleTitle,
@@ -16970,10 +16970,10 @@ var getEchoVariantStyle = function getEchoVariantStyle(echoVariant) {
       return '';
   }
 };
-/**
- * Floating actions buttons exists within the viewport, seperated from any sheet, dialog or menu
- * and are typically used for special actions pertaining to the module they are used in.
- * @return {*}  {JSX.Element} Floating actions button
+/**
+ * Floating actions buttons exists within the viewport, seperated from any sheet, dialog or menu
+ * and are typically used for special actions pertaining to the module they are used in.
+ * @return {*}  {JSX.Element} Floating actions button
  */
 var FloatingActionButton = function FloatingActionButton(_ref) {
   var label = _ref.label,
@@ -17020,9 +17020,9 @@ var useEventListener = function useEventListener(eventName, handler, options) {
 };
 
 var useInitial = EchoUtils.Hooks.useInitial;
-/**
- * Hook for checking if page is loaded from mobile device.
- * @returns boolean true if on mobile.
+/**
+ * Hook for checking if page is loaded from mobile device.
+ * @returns boolean true if on mobile.
  */
 function useIsMobile() {
   var _useState = useState(false),
@@ -17082,11 +17082,11 @@ var useListNavigator = function useListNavigator(listLength) {
   }, listenerTarget);
   return currIndex;
 };
-/**
- * 1. On open: focus should be undefined/inactive. (list should scroll/show selected item if any).
- * 2. user presses a key (usually down) - scroll list to focused element, which should be first item
- * in the first section. Also set focused section.
- * 3. Potentially jump to last in list if user goes up?
+/**
+ * 1. On open: focus should be undefined/inactive. (list should scroll/show selected item if any).
+ * 2. user presses a key (usually down) - scroll list to focused element, which should be first item
+ * in the first section. Also set focused section.
+ * 3. Potentially jump to last in list if user goes up?
  */
 var useSectionNavigator = function useSectionNavigator(sections, initialSelected, keyboardEvents) {
   var listenerTarget = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
@@ -17457,23 +17457,23 @@ var TagCategoryType;
   TagCategoryType["JunctionBox"] = "junction box";
   TagCategoryType["Administrative"] = "administrative";
 })(TagCategoryType || (TagCategoryType = {}));
-/**
- * Method that returns the relevant Icon for the tagCategoryDescription provided
- * Tag icon is the default JSX.Element Icon returned
- * @export
- * @param {('electrical'
- *         | 'main equipment'
- *         | 'line'
- *         | 'manual valve'
- *         | 'circuit/starter'
- *         | 'instrument'
- *         | 'cable'
- *         | 'function'
- *         | 'signal'
- *         | 'telecom'
- *         | 'junction box'
- *         | 'administrative'
- * @return {*}  {JSX.Element} Relevant icon for the provided tagCategoryDescription
+/**
+ * Method that returns the relevant Icon for the tagCategoryDescription provided
+ * Tag icon is the default JSX.Element Icon returned
+ * @export
+ * @param {('electrical'
+ *         | 'main equipment'
+ *         | 'line'
+ *         | 'manual valve'
+ *         | 'circuit/starter'
+ *         | 'instrument'
+ *         | 'cable'
+ *         | 'function'
+ *         | 'signal'
+ *         | 'telecom'
+ *         | 'junction box'
+ *         | 'administrative'
+ * @return {*}  {JSX.Element} Relevant icon for the provided tagCategoryDescription
  */
 var TagCategoryIcon = function TagCategoryIcon(_ref) {
   var tagCategoryDescription = _ref.tagCategoryDescription;
@@ -17540,12 +17540,12 @@ function getIcon(tagCategoryDescription) {
   });
 }
 
-/**
- * Floating search bar
- *
- * @param {FloatingSearchBarProps} {
- * }
- * @return {*}  {JSX.Element}
+/**
+ * Floating search bar
+ *
+ * @param {FloatingSearchBarProps} {
+ * }
+ * @return {*}  {JSX.Element}
  */
 var FloatingSearchBar = function FloatingSearchBar(_ref) {
   var ariaLabel = _ref.ariaLabel,
@@ -22038,15 +22038,15 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
 } (dist));
 
 var DraggableHandleSelector = 'globalDraggableHandle';
-/**
- * Component that renders a wrapper for items that are draggable
- *
- * @param {DraggableItemsWrapperProps} {
- *     style: style element to override wrapper style
- *     onChange: method that will be called when elements have be reordered inside the wrapper
- *     children: list of elements that can be reordered
- * }
- * @return {*}  {JSX.Element}
+/**
+ * Component that renders a wrapper for items that are draggable
+ *
+ * @param {DraggableItemsWrapperProps} {
+ *     style: style element to override wrapper style
+ *     onChange: method that will be called when elements have be reordered inside the wrapper
+ *     children: list of elements that can be reordered
+ * }
+ * @return {*}  {JSX.Element}
  */
 var DraggableItemsWrapper = function DraggableItemsWrapper(_ref) {
   var style = _ref.style,
@@ -22091,16 +22091,16 @@ var css_248z$h = ".radioButton-module_buttonWrapper__gzYAz span,.radioButton-mod
 var styles$f = {"header":"radioButton-module_header__f6AoN","buttonWrapper":"radioButton-module_buttonWrapper__gzYAz"};
 styleInject(css_248z$h);
 
-/**
- * Component that renders a Radio Button Group with a set of options to choose from
- *
- * @param {RadioButtonGroupProps} {
- *     title: The title of the radio button group,
- *     options: List of items to be displayed as options,
- *     style: Style element to override wrapper style,
- *     onSelected: Method to be called when the selected value is changed
- * }
- * @return {*}  {JSX.Element}
+/**
+ * Component that renders a Radio Button Group with a set of options to choose from
+ *
+ * @param {RadioButtonGroupProps} {
+ *     title: The title of the radio button group,
+ *     options: List of items to be displayed as options,
+ *     style: Style element to override wrapper style,
+ *     onSelected: Method to be called when the selected value is changed
+ * }
+ * @return {*}  {JSX.Element}
  */
 var RadioButtonGroup = function RadioButtonGroup(_ref) {
   var title = _ref.title,
@@ -22164,19 +22164,19 @@ var css_248z$f = ".sliderField-module_sliderField__gp6ce{display:flex;flex-direc
 var styles$e = {"sliderField":"sliderField-module_sliderField__gp6ce","sliderWrapper":"sliderField-module_sliderWrapper__pAwLd"};
 styleInject(css_248z$f);
 
-/**
- * Component that renders a slider with numeric or custom values
- *
- * @param {SliderFieldProps} {
- *     value: Current value of the slider,
- *     min: Minimum value of the slider,
- *     max: Maximum value of the slider,
- *     labels: List of labels to use if the slider should not display numeric values,
- *     title: Text shown as title of the slider,
- *     onChange: Method that will be called if the slider value is changed,
- *     style: style element to override wrapper style
- * }
- * @return {*}  {JSX.Element}
+/**
+ * Component that renders a slider with numeric or custom values
+ *
+ * @param {SliderFieldProps} {
+ *     value: Current value of the slider,
+ *     min: Minimum value of the slider,
+ *     max: Maximum value of the slider,
+ *     labels: List of labels to use if the slider should not display numeric values,
+ *     title: Text shown as title of the slider,
+ *     onChange: Method that will be called if the slider value is changed,
+ *     style: style element to override wrapper style
+ * }
+ * @return {*}  {JSX.Element}
  */
 var SliderField = function SliderField(_ref) {
   var value = _ref.value,
@@ -22222,16 +22222,16 @@ var css_248z$e = ".textIconButton-module_button__9s6rE{align-items:center;border
 var styles$d = {"button":"textIconButton-module_button__9s6rE","text":"textIconButton-module_text__hw0bg"};
 styleInject(css_248z$e);
 
-/**
- * Component that renders a button with the icon and the text provided
- *
- * @param {TextIconButtonProps} {
- *     icon: the name of the icon to display
- *     title: the title text that the button should display
- *     onClick: the function that will be called when user clicks the button
- *     style: Optional parameter that will override the button style
- * }
- * @return {*}  {JSX.Element} A button with the provided icon and text
+/**
+ * Component that renders a button with the icon and the text provided
+ *
+ * @param {TextIconButtonProps} {
+ *     icon: the name of the icon to display
+ *     title: the title text that the button should display
+ *     onClick: the function that will be called when user clicks the button
+ *     style: Optional parameter that will override the button style
+ * }
+ * @return {*}  {JSX.Element} A button with the provided icon and text
  */
 var TextIconButton = function TextIconButton(_ref) {
   var icon = _ref.icon,
@@ -22258,24 +22258,24 @@ var css_248z$d = ".listRow-module_wrapper__j5Czq{border-bottom:1px solid #dcdcdc
 var styles$c = {"wrapper":"listRow-module_wrapper__j5Czq","row":"listRow-module_row__5taKB","infoCol":"listRow-module_infoCol__fSiO5","draggable":"listRow-module_draggable__WoQYD","info":"listRow-module_info__fX3UU","iconCol":"listRow-module_iconCol__A4oE0","activeIconButton":"listRow-module_activeIconButton__GdFjq","iconButton":"listRow-module_iconButton__j9G0z","expandedRow":"listRow-module_expandedRow__DdJu5","close":"listRow-module_close__gdtqH"};
 styleInject(css_248z$d);
 
-/**
- * Component that renders one row in a list. The row can be marked as draggable and expandable
- *
- * @param {ListRowProps} {
- *     isDraggable: flag to indicate that the row can be rearranged in a list
- *     item: {      The item to be rendered in the row
- *          title: the title of the item in the row
- *          subtitle: the subtitle of the item in the row
- *          icons: the icons that will be displayed on the same row, and their respective actions
- *     }
- *     expandable: { object with properties to handle if the row is expandable. If undefined the row cannot be expanded
- *          iconItems: the items that will be displayed if row is expanded, and their respective actions
- *          expanded: flag to indicate if the row is expanded or not
- *          setExpanded: method that updates the expanded flag
- *     }
- *     style: style element to override wrapper style
- * }
- * @return {*}  {JSX.Element} a row element to be used in a list
+/**
+ * Component that renders one row in a list. The row can be marked as draggable and expandable
+ *
+ * @param {ListRowProps} {
+ *     isDraggable: flag to indicate that the row can be rearranged in a list
+ *     item: {      The item to be rendered in the row
+ *          title: the title of the item in the row
+ *          subtitle: the subtitle of the item in the row
+ *          icons: the icons that will be displayed on the same row, and their respective actions
+ *     }
+ *     expandable: { object with properties to handle if the row is expandable. If undefined the row cannot be expanded
+ *          iconItems: the items that will be displayed if row is expanded, and their respective actions
+ *          expanded: flag to indicate if the row is expanded or not
+ *          setExpanded: method that updates the expanded flag
+ *     }
+ *     style: style element to override wrapper style
+ * }
+ * @return {*}  {JSX.Element} a row element to be used in a list
  */
 var ListRow = function ListRow(_ref) {
   var isDraggable = _ref.isDraggable,
@@ -22351,19 +22351,19 @@ var css_248z$c = ".menuButton-module_button__qpHsn{align-items:center;border-lef
 var styles$b = {"button":"menuButton-module_button__qpHsn","text":"menuButton-module_text__MiZeF","active":"menuButton-module_active__1Dznq"};
 styleInject(css_248z$c);
 
-/**
- * The menu bottom items
- * On desktop it will have an active border on the left,
- * and on mobile the active border will be on the bottom
- * Contains an icon and a descriptive text
- * @param {*} {
- *     text, the text below the icon, also displayed on hover
- *     active, boolean describing the buttons active state
- *     children, the icon to be displayed
- *     onClick, the on click event
- *     id: the id of the button in case its needed
- * }
- * @return {*}  {JSX.Element}
+/**
+ * The menu bottom items
+ * On desktop it will have an active border on the left,
+ * and on mobile the active border will be on the bottom
+ * Contains an icon and a descriptive text
+ * @param {*} {
+ *     text, the text below the icon, also displayed on hover
+ *     active, boolean describing the buttons active state
+ *     children, the icon to be displayed
+ *     onClick, the on click event
+ *     id: the id of the button in case its needed
+ * }
+ * @return {*}  {JSX.Element}
  */
 var MenuButton = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var text = props.text,
@@ -23406,18 +23406,18 @@ var css_248z$b = ".panelWrapper-module_wrapper__asJxL{position:fixed;right:0;z-i
 var styles$a = {"wrapper":"panelWrapper-module_wrapper__asJxL","topBarWrapper":"panelWrapper-module_topBarWrapper__Nt84G","narrowPanel":"panelWrapper-module_narrowPanel__zW0DI","contentPanel":"panelWrapper-module_contentPanel__JWij5","activeContentPanel":"panelWrapper-module_activeContentPanel__1nAhR","buttonWrapperMobile":"panelWrapper-module_buttonWrapperMobile__pcR1V","buttonWrapper":"panelWrapper-module_buttonWrapper__xbmQI","buttonAtBottomWrapper":"panelWrapper-module_buttonAtBottomWrapper__jLd-d","moduleTitle":"panelWrapper-module_moduleTitle__4Wloo"};
 styleInject(css_248z$b);
 
-/**
- * Component that display's the buttons in a panel. It will automatically try to calculate how many buttons to display
- * and how many buttons to hide behind the more menu.
- * It controls which panel to display when a button is clicked
- * On desktop this component will render on the right side, and on the top in mobile view
- *
- * @param {*} {
- * menuItems, the items to be displayed in the menu and its belonging panels
- * header, the header that will be displayed on mobile.
- * If its a string then it will only display a header text. But it can also be a component with self defined html
- * }
- * @return {*}  {JSX.Element}
+/**
+ * Component that display's the buttons in a panel. It will automatically try to calculate how many buttons to display
+ * and how many buttons to hide behind the more menu.
+ * It controls which panel to display when a button is clicked
+ * On desktop this component will render on the right side, and on the top in mobile view
+ *
+ * @param {*} {
+ * menuItems, the items to be displayed in the menu and its belonging panels
+ * header, the header that will be displayed on mobile.
+ * If its a string then it will only display a header text. But it can also be a component with self defined html
+ * }
+ * @return {*}  {JSX.Element}
  */
 var PanelWrapper = function PanelWrapper(_ref) {
   var _classnames;
@@ -23646,15 +23646,15 @@ var PanelWrapper = function PanelWrapper(_ref) {
   }, getPanelComponentForActivePanel(activePanel)));
 };
 
-/**
- * The actual right side panel. This component wraps the panel with a panel state
- *
- * @param {PanelProps} {
- * menuItems, the items to be displayed in the menu and its belonging panels
- * header, the header that will be displayed on mobile.
- * If its a string then it will only display a header text. But it can also be a component with self defined html
- * }
- * @return {*}  {JSX.Element}
+/**
+ * The actual right side panel. This component wraps the panel with a panel state
+ *
+ * @param {PanelProps} {
+ * menuItems, the items to be displayed in the menu and its belonging panels
+ * header, the header that will be displayed on mobile.
+ * If its a string then it will only display a header text. But it can also be a component with self defined html
+ * }
+ * @return {*}  {JSX.Element}
  */
 var Panel = function Panel(_ref) {
   var menuItems = _ref.menuItems,
@@ -23669,19 +23669,19 @@ var css_248z$a = ".panelContent-module_headerWrapper__BAc2H{display:flex;justify
 var styles$9 = {"headerWrapper":"panelContent-module_headerWrapper__BAc2H","panelTitle":"panelContent-module_panelTitle__jqqJT","bodyWrapper":"panelContent-module_bodyWrapper__EHsg5","bodyWrapperWithFooter":"panelContent-module_bodyWrapperWithFooter__uoMyR","footer":"panelContent-module_footer__P1Nr8","contentWrapper":"panelContent-module_contentWrapper__1re5K"};
 styleInject(css_248z$a);
 
-/**
- * The component that wraps the panel drawer content
- * This components displays a header with close and possible back button
- * It also displays the content wrapped with some css
- *
- * @param {PanelContentProps} {
- *     header, the header text to display
- *     children, the panels content
- *     backToMainPanel: optional parameter that controls whether the panel should have a back button or not
- *      to be used in cases where there are panels within panels,
- *     footer: optional param, if used a footer will be shown in the panel content
- * }
- * @return {*}  {JSX.Element}
+/**
+ * The component that wraps the panel drawer content
+ * This components displays a header with close and possible back button
+ * It also displays the content wrapped with some css
+ *
+ * @param {PanelContentProps} {
+ *     header, the header text to display
+ *     children, the panels content
+ *     backToMainPanel: optional parameter that controls whether the panel should have a back button or not
+ *      to be used in cases where there are panels within panels,
+ *     footer: optional param, if used a footer will be shown in the panel content
+ * }
+ * @return {*}  {JSX.Element}
  */
 var PanelContent = function PanelContent(_ref) {
   var header = _ref.header,
@@ -23723,28 +23723,28 @@ var css_248z$9 = ".sidebarButton-module_button__37sG4{align-items:center;box-siz
 var styles$8 = {"button":"sidebarButton-module_button__37sG4","activeButton":"sidebarButton-module_activeButton__WkS2p","text":"sidebarButton-module_text__S0hrv","rightBarButton":"sidebarButton-module_rightBarButton__nh2hd","leftBarButton":"sidebarButton-module_leftBarButton__C5g1N","bottomBarButton":"sidebarButton-module_bottomBarButton__UJRT3","tabButton":"sidebarButton-module_tabButton__eQISU","tabItemCount":"sidebarButton-module_tabItemCount__nQc-M"};
 styleInject(css_248z$9);
 
-/**
- * The reusable button component that is used in the sidebars/bottom bar.
- *
- * On desktop it will have an active border on the left/right/top,
- * depending if the ButtonPosition is set to: "right"/"left"/"bottom".
- * The active border will be on the right if it's a tab button and ButtonPosition is set to: "tab".
- *
- * On mobile with the right sidebar, the active border will be on the bottom.
- * In landscape mode with the bottom bar, the active border will be on the right.
- *
- * The button contains an icon and a descriptive text.
- * @param {*} {
- *     text: the text below the icon.
- *     active: boolean describing the button's active state.
- *     onClick: the onClick event.
- *     count: will display a count on the button.
- *     buttonPosition: decides the active border, depending if the button is placed in the right bar/left bar/bottom bar.
- *     refValue: a reference value, in case it's needed.
- *     id: the id of the button, in case it's needed.
- *     children: the icon to be displayed.
- * }
- * @return {*}  {JSX.Element}
+/**
+ * The reusable button component that is used in the sidebars/bottom bar.
+ *
+ * On desktop it will have an active border on the left/right/top,
+ * depending if the ButtonPosition is set to: "right"/"left"/"bottom".
+ * The active border will be on the right if it's a tab button and ButtonPosition is set to: "tab".
+ *
+ * On mobile with the right sidebar, the active border will be on the bottom.
+ * In landscape mode with the bottom bar, the active border will be on the right.
+ *
+ * The button contains an icon and a descriptive text.
+ * @param {*} {
+ *     text: the text below the icon.
+ *     active: boolean describing the button's active state.
+ *     onClick: the onClick event.
+ *     count: will display a count on the button.
+ *     buttonPosition: decides the active border, depending if the button is placed in the right bar/left bar/bottom bar.
+ *     refValue: a reference value, in case it's needed.
+ *     id: the id of the button, in case it's needed.
+ *     children: the icon to be displayed.
+ * }
+ * @return {*}  {JSX.Element}
  */
 var SidebarButton = function SidebarButton(_ref) {
   var _classnames;
@@ -24185,8 +24185,8 @@ var staticData$3 = {
   prefix: 'echo',
   group: 'robim_external'
 };
-/*
- * ROBIM EXTERNAL ICONS
+/*
+ * ROBIM EXTERNAL ICONS
  */
 var robim_external_ald = Object.assign(Object.assign({}, staticData$3), {
   name: 'robim_external_ald',
@@ -24341,15 +24341,15 @@ var echoIcons = /*#__PURE__*/Object.freeze({
 
 Icon$1.add(Object.assign(Object.assign({}, edsIcons), echoIcons));
 
-/**
- * Helper method that will return a list row given some input values. Used in IconList component for rendering rows
- *
- * @param {boolean} isDraggable flag to indicate that the row is draggable
- * @param {number} index the index of the list
- * @param {IconListState} iconListState the state from the IconList component used to create the row and its interactions
- * @param {(value: React.SetStateAction<IconListState>) => void} setIconListState the action to update the state from the IconList component
- * @param {IconItem[]} expandedIcons the icons to be displayed if the row is expandable. Is undefined if the row should not be expandable
- * @return {*}  {React.ReactNode} A list row component created from the input parameters
+/**
+ * Helper method that will return a list row given some input values. Used in IconList component for rendering rows
+ *
+ * @param {boolean} isDraggable flag to indicate that the row is draggable
+ * @param {number} index the index of the list
+ * @param {IconListState} iconListState the state from the IconList component used to create the row and its interactions
+ * @param {(value: React.SetStateAction<IconListState>) => void} setIconListState the action to update the state from the IconList component
+ * @param {IconItem[]} expandedIcons the icons to be displayed if the row is expandable. Is undefined if the row should not be expandable
+ * @return {*}  {React.ReactNode} A list row component created from the input parameters
  */
 var createListRow = function createListRow(isDraggable, index, iconListState, setIconListState, expandedIcons) {
   return /*#__PURE__*/React__default.createElement(ListRow, {
@@ -24381,22 +24381,22 @@ var css_248z$2 = ".iconList-module_wrapper__AMjAK{display:flex;flex-direction:co
 var styles$2 = {"wrapper":"iconList-module_wrapper__AMjAK","header":"iconList-module_header__g2suM"};
 styleInject(css_248z$2);
 
-/**
- * Component that renders an IconList of rows, that can be draggable and/or expandable
- *
- * @param {IconListProps} {
- *     style: the style to override the IconList wrapper
- *     title: The title of the list
- *     items: { The items to be rendered in the row
- *          title: the title of the item in the row
- *          subtitle: the subtitle of the item in the row
- *          icons: the icons that will be displayed on the same row, and their respective actions
- *     }[]
- *     isDraggable: flag to indicate if the elements in the list should be draggable
- *     expandedIcons: list of icons that should be displayed if a row is expanded. If undefined no row can be expanded
- *     onUpdatedOrder: method that will be called when the order of the list has changed
- * }
- * @return {*}  {JSX.Element} a list of items that can be draggable and/or expandable
+/**
+ * Component that renders an IconList of rows, that can be draggable and/or expandable
+ *
+ * @param {IconListProps} {
+ *     style: the style to override the IconList wrapper
+ *     title: The title of the list
+ *     items: { The items to be rendered in the row
+ *          title: the title of the item in the row
+ *          subtitle: the subtitle of the item in the row
+ *          icons: the icons that will be displayed on the same row, and their respective actions
+ *     }[]
+ *     isDraggable: flag to indicate if the elements in the list should be draggable
+ *     expandedIcons: list of icons that should be displayed if a row is expanded. If undefined no row can be expanded
+ *     onUpdatedOrder: method that will be called when the order of the list has changed
+ * }
+ * @return {*}  {JSX.Element} a list of items that can be draggable and/or expandable
  */
 var IconList = function IconList(_ref) {
   var style = _ref.style,
@@ -24474,21 +24474,21 @@ var css_248z$1 = ".linkCard-module_wrapper__eoD5r{background-color:var(--white);
 var styles$1 = {"wrapper":"linkCard-module_wrapper__eoD5r","image":"linkCard-module_image__EUhQK","header":"linkCard-module_header__P5GTe","title":"linkCard-module_title__WGglA","subTitle":"linkCard-module_subTitle__0j2D5","links":"linkCard-module_links__LkokT","link":"linkCard-module_link__uaQqQ"};
 styleInject(css_248z$1);
 
-/**
- * Component that renders a card with an image and a list of links
- *
- * @param {LinkCardProps} {
- *     style: style element to override wrapper style
- *     image: the image scr of the image to be displayed
- *     title: the title of the card
- *     subTitle: the subtitle of the cars
- *     links { A list of links to display
- *          title: the text of the link
- *          url: the url to the link
- *          target: how the link should be opened. Possible values are '_blank' | '_self', default is '_self'
- *     }
- * }
- * @return {*}  {JSX.Element} a card element with an image and some provided links
+/**
+ * Component that renders a card with an image and a list of links
+ *
+ * @param {LinkCardProps} {
+ *     style: style element to override wrapper style
+ *     image: the image scr of the image to be displayed
+ *     title: the title of the card
+ *     subTitle: the subtitle of the cars
+ *     links { A list of links to display
+ *          title: the text of the link
+ *          url: the url to the link
+ *          target: how the link should be opened. Possible values are '_blank' | '_self', default is '_self'
+ *     }
+ * }
+ * @return {*}  {JSX.Element} a card element with an image and some provided links
  */
 var LinkCard = function LinkCard(_ref) {
   var style = _ref.style,
@@ -24567,20 +24567,20 @@ var css_248z = ".optionsList-module_wrapper__r6i4r{display:table;width:100%}.opt
 var styles = {"wrapper":"optionsList-module_wrapper__r6i4r","head":"optionsList-module_head__W2pf7","row":"optionsList-module_row__hkSEt","item":"optionsList-module_item__uXdrQ","itemTitle":"optionsList-module_itemTitle__tQcdj","columnTitle":"optionsList-module_columnTitle__ciUTO","radio":"optionsList-module_radio__Ll5Fr","circle":"optionsList-module_circle__5Ub8n"};
 styleInject(css_248z);
 
-/**
- *  Component that renders a list with a set number of radio buttons for each row in the list
- *
- * @param {OptionsListProps} {
- *     items:{ the items that should be shown in the list
- *          title: the text displayed for a row in the list
- *          color: the background color used in the badge in front of the title of the item
- *          selectedColumnIndex: specifies witch radio button should have selected state. Should not be larger than the columns input property
- *     }
- *     style: Optional parameter that can override the wrapper style
- *     titles: list of title that should be shown for the different columns in the list
- *     columns: the number of columns the list should have
- * }
- * @return {*}  {JSX.Element} a list of rows with a set of radio buttons
+/**
+ *  Component that renders a list with a set number of radio buttons for each row in the list
+ *
+ * @param {OptionsListProps} {
+ *     items:{ the items that should be shown in the list
+ *          title: the text displayed for a row in the list
+ *          color: the background color used in the badge in front of the title of the item
+ *          selectedColumnIndex: specifies witch radio button should have selected state. Should not be larger than the columns input property
+ *     }
+ *     style: Optional parameter that can override the wrapper style
+ *     titles: list of title that should be shown for the different columns in the list
+ *     columns: the number of columns the list should have
+ * }
+ * @return {*}  {JSX.Element} a list of rows with a set of radio buttons
  */
 var OptionsList = function OptionsList(_ref) {
   var items = _ref.items,