@x15ventures/x15-ui-library 3.11.4

package/dist/cjs/components/design/copyText/copyText.css

@@ -0,0 +1,19 @@
+.copyText {
+  display: flex;
+  flex-direction: row;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.copyText .textArea {
+  resize: none;
+  width: 100%;
+  flex-basis: 0%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  user-select: none;
+  font-size: medium;
+  font-family: monospace;
+  padding: 10px;
+  border-radius: 5px 0 0 5px;
+  background-color: rgb(243, 243, 243);
+}

package/dist/cjs/components/design/dialog/Dialog.js

@@ -0,0 +1,125 @@
+"use strict";
+/* eslint-disable jsxA11y/no-noninteractive-tabindex */
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dialog = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("@x15ventures/x15-ui-library-icons/iconDefinitions/index");
+var _SvgIcon = require("@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon");
+var _tooltip = require("../tooltip");
+var _DialogOverlay = require("../../../hooks/DialogOverlay");
+var _FocusTrap = require("../../../hooks/FocusTrap");
+require("./dialog.css");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Dialog = ({
+  id,
+  size = 'm',
+  position = 'center',
+  animation = 'none',
+  scrollBehaviour = 'contentOnly',
+  onClose = () => {},
+  open = false,
+  overlay,
+  header,
+  footer,
+  children,
+  screenReaderInstruction = `The following content is in a dialog. 
+      You can press the Tab key to navigate through the elements, and press Escape to close the dialog.`,
+  customCssClasses,
+  showFocusOutline = false
+}) => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(open);
+  const dialogElement = (0, _react.useRef)(null);
+  const dialogHeaderElement = (0, _react.useRef)(null);
+  const TOGGLE_TEXT = 'Open and close dialog';
+  const dialogCloseButton = (0, _react.useRef)(null);
+  const {
+    createOverlay,
+    removeOverlay
+  } = (0, _DialogOverlay.useDialogOverlay)(overlay || {});
+  (0, _FocusTrap.useFocusTrap)(dialogElement, () => HandleClose());
+  const dialogCssClass = (0, _react.useMemo)(() => {
+    return `dialog 
+    ${isOpen || open ? 'isOpen' : ''}
+    dialogSize_${size}
+    dialogPosition_${position}
+    dialogAnimation_${animation}
+    dialogScrollBehaviour_${scrollBehaviour}
+    ${size === 'dynamic' ? 'dialogSize_dynamic' : ''}
+    ${customCssClasses?.dialog || ''}
+    ${showFocusOutline ? 'showFocusOutline' : ''}`;
+  }, [open, isOpen, size, position, animation, scrollBehaviour, customCssClasses, showFocusOutline]);
+  const HandleClose = (0, _react.useCallback)(() => {
+    setIsOpen(false);
+    removeOverlay();
+    onClose();
+  }, [onClose, removeOverlay]);
+  const HandleOpen = (0, _react.useCallback)(() => {
+    const dialogOverlay = createOverlay();
+    dialogOverlay.showOverlay();
+  }, [createOverlay]);
+  (0, _react.useEffect)(() => {
+    if (open || isOpen) {
+      if (dialogHeaderElement.current) {
+        dialogHeaderElement.current.focus();
+      }
+      HandleOpen();
+    } else {
+      HandleClose();
+    }
+  }, [customCssClasses, createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);
+  const DialogCloseButton = () => /*#__PURE__*/_react.default.createElement("button", {
+    ref: dialogCloseButton,
+    className: "dialogClose",
+    title: TOGGLE_TEXT,
+    type: "button",
+    onClick: () => HandleClose()
+  }, /*#__PURE__*/_react.default.createElement(_SvgIcon.SvgIcon, {
+    svgDefinition: _index.xmarkLarge
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sr-only"
+  }, "Close dialog"));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: dialogCssClass,
+    role: "dialog",
+    "aria-labelledby": `dialogHeader_${id}`,
+    tabIndex: 0,
+    "aria-describedby": `dialogSRInstruction_${id}`,
+    "aria-modal": "true",
+    ref: dialogElement
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialogFullScroller"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: dialogHeaderElement,
+    id: `dialogHeader_${id}`,
+    className: `dialogHeader ${customCssClasses?.header || ''}`,
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    id: `dialogSRInstruction_${id}`,
+    className: "sr-only"
+  }, screenReaderInstruction), /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialogHeaderTextWrapper"
+  }, /*#__PURE__*/_react.default.createElement(_tooltip.EllipsisTooltip, {
+    lineClamp: 2,
+    tooltipProps: {
+      customCssClass: 'shiftDown large dialogEllipsisTooltip'
+    }
+  }, typeof header === 'string' ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "dialogHeaderText"
+  }, header) : header)), /*#__PURE__*/_react.default.createElement(DialogCloseButton, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialogContentAndFooterScroller"
+  }, /*#__PURE__*/_react.default.createElement("section", {
+    className: `dialogContent ${customCssClasses?.content || ''}`,
+    tabIndex: 0
+  }, children), /*#__PURE__*/_react.default.createElement("div", {
+    className: `dialogFooter ${customCssClasses?.footer || ''}`,
+    tabIndex: 0
+  }, typeof footer === 'string' ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "dialogFooterText"
+  }, footer) : footer))));
+};
+exports.Dialog = Dialog;
+//# sourceMappingURL=Dialog.js.map

package/dist/cjs/components/design/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["Object","defineProperty","exports","value","Dialog","_react","_interopRequireWildcard","require","_index","_SvgIcon","_tooltip","_DialogOverlay","_FocusTrap","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","id","size","position","animation","scrollBehaviour","onClose","open","overlay","header","footer","children","screenReaderInstruction","customCssClasses","showFocusOutline","isOpen","setIsOpen","useState","dialogElement","useRef","dialogHeaderElement","TOGGLE_TEXT","dialogCloseButton","createOverlay","removeOverlay","useDialogOverlay","useFocusTrap","HandleClose","dialogCssClass","useMemo","dialog","useCallback","HandleOpen","dialogOverlay","showOverlay","useEffect","current","focus","DialogCloseButton","createElement","ref","className","title","type","onClick","SvgIcon","svgDefinition","xmarkLarge","role","tabIndex","EllipsisTooltip","lineClamp","tooltipProps","customCssClass","content"],"sources":["../../../../../src/components/design/dialog/Dialog.tsx"],"sourcesContent":["/* eslint-disable jsxA11y/no-noninteractive-tabindex */\n'use client';\n\nimport React, { ReactNode, useCallback, useEffect, useRef, useState, useMemo } from 'react';\nimport { xmarkLarge } from '@x15ventures/x15-ui-library-icons/iconDefinitions/index';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { EllipsisTooltip } from '../tooltip';\nimport { GenericFunction } from '../../../interfaces';\nimport { useDialogOverlay } from '../../../hooks/DialogOverlay';\nimport { useFocusTrap } from '../../../hooks/FocusTrap';\n\nimport './dialog.scss';\n\nexport interface DialogInterface {\n  id: string;\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'dynamic';\n  position?: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';\n  animation?: 'none' | 'grow' | 'reveal';\n  scrollBehaviour?: 'contentOnly' | 'contentAndFooter' | 'all';\n  onClose: GenericFunction;\n  open?: boolean;\n  overlay?: {\n    parentNode?: HTMLElement;\n    customCssClass?: string;\n  };\n  header: string | ReactNode;\n  footer?: string | ReactNode;\n  children: ReactNode;\n  screenReaderInstruction?: string;\n  showFocusOutline?: boolean;\n  customCssClasses?: {\n    dialog?: string;\n    content?: string;\n    header?: string;\n    footer?: string;\n  };\n}\n\nexport const Dialog: React.FC<DialogInterface> = ({\n  id,\n  size = 'm',\n  position = 'center',\n  animation = 'none',\n  scrollBehaviour = 'contentOnly',\n  onClose = () => {},\n  open = false,\n  overlay,\n  header,\n  footer,\n  children,\n  screenReaderInstruction = `The following content is in a dialog. \n      You can press the Tab key to navigate through the elements, and press Escape to close the dialog.`,\n  customCssClasses,\n  showFocusOutline = false,\n}) => {\n  const [isOpen, setIsOpen] = useState<boolean>(open);\n  const dialogElement = useRef<HTMLDivElement>(null);\n  const dialogHeaderElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = 'Open and close dialog';\n  const dialogCloseButton = useRef(null);\n\n  const { createOverlay, removeOverlay } = useDialogOverlay(overlay || {});\n  useFocusTrap(dialogElement, () => HandleClose());\n\n  const dialogCssClass = useMemo(() => {\n    return `dialog \n    ${ isOpen || open ? 'isOpen' : '' }\n    dialogSize_${ size }\n    dialogPosition_${ position }\n    dialogAnimation_${ animation }\n    dialogScrollBehaviour_${ scrollBehaviour }\n    ${ size === 'dynamic' ? 'dialogSize_dynamic' : '' }\n    ${ customCssClasses?.dialog || '' }\n    ${ showFocusOutline ? 'showFocusOutline' : '' }`;\n  }, [open, isOpen, size, position, animation, scrollBehaviour, customCssClasses, showFocusOutline]);\n\n  const HandleClose = useCallback(() => {\n    setIsOpen(false);\n    removeOverlay();\n    onClose();\n  }, [onClose, removeOverlay]);\n\n  const HandleOpen = useCallback(() => {\n    const dialogOverlay = createOverlay();\n    dialogOverlay.showOverlay();\n  }, [createOverlay]);\n\n  useEffect(() => {\n    if (open || isOpen) {\n      if (dialogHeaderElement.current) {\n        dialogHeaderElement.current.focus();\n      }\n      HandleOpen();\n    } else {\n      HandleClose();\n    }\n  }, [customCssClasses, createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);\n\n  const DialogCloseButton: React.FC = () => (\n    <button\n      ref={ dialogCloseButton }\n      className=\"dialogClose\"\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => HandleClose() }\n    >\n      <SvgIcon svgDefinition={ xmarkLarge } />\n      <span className=\"sr-only\">Close dialog</span>\n    </button>\n  );\n\n  return (\n    <div\n      className={ dialogCssClass }\n      role=\"dialog\"\n      aria-labelledby={ `dialogHeader_${ id }` }\n      tabIndex={ 0 }\n      aria-describedby={ `dialogSRInstruction_${ id }` }\n      aria-modal=\"true\"\n      ref={ dialogElement }\n    >\n      <div className=\"dialogFullScroller\">\n        <div\n          ref={ dialogHeaderElement }\n          id={ `dialogHeader_${ id }` }\n          className={ `dialogHeader ${ customCssClasses?.header || '' }` }\n          tabIndex={ 0 }\n        >\n          <span id={ `dialogSRInstruction_${ id }` } className=\"sr-only\">\n            { screenReaderInstruction }\n          </span>\n          <div className=\"dialogHeaderTextWrapper\">\n            <EllipsisTooltip \n              lineClamp={ 2 } \n              tooltipProps={ { \n                customCssClass: 'shiftDown large dialogEllipsisTooltip'\n              } }\n            >\n              { typeof header === 'string' ? <span className=\"dialogHeaderText\">{ header }</span> : header }\n            </EllipsisTooltip>\n          </div>\n          <DialogCloseButton />\n        </div>\n\n        <div className=\"dialogContentAndFooterScroller\">\n          <section className={ `dialogContent ${ customCssClasses?.content || '' }` } tabIndex={ 0 }>\n            { children }\n          </section>\n\n          <div className={ `dialogFooter ${ customCssClasses?.footer || '' }` } tabIndex={ 0 }>\n            { typeof footer === 'string' ? <span className=\"dialogFooterText\">{ footer }</span> : footer }\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/design/dialog/dialog.css

@@ -0,0 +1,287 @@
+/* Popovers */
+.dialogOverlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--dialogOverlayColor, rgba(0, 0, 0, 0.5));
+  display: none;
+  z-index: 1000000;
+}
+.dialogOverlay.isVisible {
+  display: block;
+}
+
+.dialog {
+  display: none;
+  position: fixed;
+  box-sizing: border-box;
+  background: var(--dialogBg, #fff);
+  color: var(--dialogFg, #222);
+  box-shadow: var(--dialogShadow, 0 0 10px 0 #384147);
+  border: var(--dialogBorder, 1px solid #fff);
+  border-radius: var(--dialogBorderRadius, 3px);
+  z-index: 2000000;
+}
+.dialog.showFocusOutline .dialogContent:focus,
+.dialog.showFocusOutline .dialogHeader:focus,
+.dialog.showFocusOutline .dialogFooter:focus {
+  outline: var(--dialogFocusOutline, 1px dotted #384147);
+}
+.dialog.showFocusOutline .dialogContent:focus {
+  outline-offset: -1px;
+}
+.dialog.isOpen {
+  display: flex;
+}
+.dialog .dialogClose {
+  border-radius: 100%;
+  width: 30px;
+  height: 30px;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--dialogCloseButtonBorder, none);
+  background: var(--dialogCloseButtonBg, #fff);
+  color: var(--dialogCloseButtonFg, none);
+  box-shadow: var(--dialogCloseButtonShadow, none);
+}
+.dialog .dialogHeader {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  border-bottom: var(--dialogHeaderBottomBorder, 1px solid #e5ebef);
+  box-shadow: var(--dialogHeaderShadow, none);
+  padding: var(--dialogHeaderPadding, 20px 20px);
+  min-height: var(--dialogHeaderHeight, 50px);
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.dialog .dialogHeader .dialogHeaderText,
+.dialog .dialogHeader .headerBar {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: fit-content;
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  font-family: var(--dialogHeaderFont, serif);
+  font-size: var(--dialogHeaderFontSize, clamp(17px, 1vw + 0.5rem, 35px));
+  font-weight: var(--dialogHeaderFontWeight, bold);
+}
+.dialog .dialogHeader .dialogHeaderText h2,
+.dialog .dialogHeader .dialogHeaderText h3,
+.dialog .dialogHeader .dialogHeaderText h4,
+.dialog .dialogHeader .dialogHeaderText h5,
+.dialog .dialogHeader .dialogHeaderText h6,
+.dialog .dialogHeader .headerBar h2,
+.dialog .dialogHeader .headerBar h3,
+.dialog .dialogHeader .headerBar h4,
+.dialog .dialogHeader .headerBar h5,
+.dialog .dialogHeader .headerBar h6 {
+  margin: 0;
+}
+.dialog .dialogContent {
+  padding: var(--dialogContentPadding, 20px);
+  flex: 5;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: var(--dialogContentFontSize, clamp(16px, 0.7vw + 0.5rem, 30px));
+}
+.dialog .dialogFooter {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  border-top: var(--dialogFooterTopBorder, 1px solid #e5ebef);
+  box-shadow: var(--dialogFooterShadow, none);
+  padding: var(--dialogFooterPadding, 10px 20px);
+  width: 100%;
+  max-width: 100%;
+  font-size: var(--dialogFooterFontSize, clamp(16px, 0.7vw + 0.5rem, 30px));
+}
+.dialog .dialogFooter .dialogFooterText {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: fit-content;
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: var(--dialogFooterHeight, 50px);
+}
+.dialog .dialogFullScroller {
+  flex: 1;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  row-gap: 0;
+  align-items: center;
+  justify-content: flex-start;
+  align-items: flex-start;
+  max-width: 100%;
+}
+.dialog .dialogContentAndFooterScroller {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0;
+  align-items: center;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+}
+.dialog.dialogScrollBehaviour_all .dialogFullScroller {
+  overflow: auto;
+  max-height: 100%;
+}
+.dialog.dialogScrollBehaviour_contentOnly .dialogContentAndFooterScroller {
+  flex: 1;
+  overflow: auto;
+}
+.dialog.dialogScrollBehaviour_contentOnly .dialogContentAndFooterScroller .dialogContent {
+  overflow: auto;
+  flex: 1;
+}
+.dialog.dialogScrollBehaviour_contentAndFooter .dialogContentAndFooterScroller {
+  overflow: auto;
+  flex: 1;
+}
+.dialog.dialogSize_xs {
+  left: 38vw;
+  top: 38vh;
+  width: 24vw;
+  height: 24vh;
+}
+.dialog.dialogSize_xs .dialogHeaderText,
+.dialog.dialogSize_xs .headerBar {
+  max-width: 24vw;
+}
+.dialog.dialogSize_s {
+  left: 35vw;
+  top: 35vh;
+  width: 30vw;
+  height: 30vh;
+}
+.dialog.dialogSize_s .dialogHeaderText,
+.dialog.dialogSize_s .headerBar {
+  max-width: 30vw;
+}
+.dialog.dialogSize_m {
+  left: 25vw;
+  top: 25vh;
+  width: 50vw;
+  height: 50vh;
+}
+.dialog.dialogSize_l {
+  left: 15vw;
+  top: 15vh;
+  width: 70vw;
+  height: 70vh;
+}
+.dialog.dialogSize_xl {
+  left: 5vw;
+  top: 5vh;
+  width: 90vw;
+  height: 90vh;
+}
+.dialog.dialogSize_dynamic {
+  width: auto;
+  height: auto;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: visible;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.dialog.dialogPosition_left {
+  left: 0;
+}
+.dialog.dialogPosition_right {
+  left: auto;
+  right: 0;
+}
+.dialog.dialogPosition_top {
+  top: 0;
+}
+.dialog.dialogPosition_bottom {
+  top: auto;
+  bottom: 0;
+}
+.dialog.dialogPosition_topleft {
+  left: 0;
+  top: 0;
+}
+.dialog.dialogPosition_topright {
+  left: auto;
+  right: 0;
+  top: 0;
+}
+.dialog.dialogPosition_bottomleft {
+  left: 0;
+  top: auto;
+  bottom: 0;
+}
+.dialog.dialogPosition_bottomright {
+  left: auto;
+  right: 0;
+  top: auto;
+  bottom: 0;
+}
+.dialog.dialogAnimation_grow {
+  transform: scale(0.1);
+  animation: grow 2s ease;
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+}
+.dialog.dialogAnimation_reveal {
+  opacity: 0;
+  animation: reveal 2s ease;
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+}
+@media screen and (max-width: 720px) {
+  .dialog .dialog.isOpen:not(.dialogSize_dynamic) {
+    left: 15vw;
+    right: 15vw;
+  }
+}
+@media screen and (max-width: 599px) {
+  .dialog .dialog.isOpen:not(.dialogSize_dynamic) {
+    left: 5vw;
+    right: 5vw;
+  }
+}
+@media screen and (max-height: 720px) {
+  .dialog .dialog.isOpen:not(.dialogSize_dynamic) {
+    top: 15vh;
+    bottom: 15vh;
+  }
+}
+@media screen and (max-height: 599px) {
+  .dialog .dialog.isOpen:not(.dialogSize_dynamic) {
+    top: 5vh;
+    bottom: 5vh;
+  }
+}

package/dist/cjs/components/design/headerBar/HeaderBar.js

@@ -0,0 +1,45 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderBar = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Icon = require("../icons/basicIcon/Icon");
+var _NotificationIcon = require("../icons/notificationIcon/NotificationIcon");
+var _SimpleButton = require("../../form/buttons/SimpleButton");
+var _NotificationsButton = require("../../form/buttons/notificationsButton/NotificationsButton");
+require("./headerBar.css");
+const HeaderBar = ({
+  text,
+  leftIcon,
+  rightIcon,
+  buttons,
+  notificationIcon,
+  children
+}) => {
+  const headerCssClass = `headerBar 
+    ${leftIcon ? 'withLeftIcon' : ''}
+    ${rightIcon ? 'withRightIcon' : ''}
+    ${notificationIcon ? 'withNotification' : ''}
+    `;
+  return /*#__PURE__*/_react.default.createElement("header", {
+    className: headerCssClass
+  }, leftIcon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, leftIcon), text && /*#__PURE__*/_react.default.createElement("h2", null, text), children, buttons && /*#__PURE__*/_react.default.createElement("div", {
+    className: "headerButtons"
+  }, buttons.map(button => {
+    if (button.kind === 'notifications') {
+      return /*#__PURE__*/_react.default.createElement(_NotificationsButton.NotificationsButton, (0, _extends2.default)({
+        key: button.id
+      }, button));
+    }
+    return /*#__PURE__*/_react.default.createElement(_SimpleButton.SimpleButton, (0, _extends2.default)({
+      key: button.id
+    }, button));
+  })), rightIcon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, rightIcon), notificationIcon && /*#__PURE__*/_react.default.createElement(_NotificationIcon.NotificationIcon, notificationIcon));
+};
+exports.HeaderBar = HeaderBar;
+//# sourceMappingURL=HeaderBar.js.map

package/dist/cjs/components/design/headerBar/HeaderBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBar.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","HeaderBar","_extends2","_react","_Icon","_NotificationIcon","_SimpleButton","_NotificationsButton","text","leftIcon","rightIcon","buttons","notificationIcon","children","headerCssClass","default","createElement","className","Icon","map","button","kind","NotificationsButton","key","id","SimpleButton","NotificationIcon"],"sources":["../../../../../src/components/design/headerBar/HeaderBar.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { HeaderTextInterface } from '../../../interfaces/headerText.interface';\nimport { Icon } from '../icons/basicIcon/Icon';\nimport { NotificationIcon } from '../icons/notificationIcon/NotificationIcon';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { NotificationsButton } from '../../form/buttons/notificationsButton/NotificationsButton';\nimport { ButtonProps } from '../../form/buttons/button.interface';\n\nimport './headerBar.scss';\n\nexport const HeaderBar: React.FC<HeaderTextInterface> = (\n  {\n    text,\n    leftIcon,\n    rightIcon,\n    buttons,\n    notificationIcon,\n    children\n  }\n) => {\n  const headerCssClass = `headerBar \n    ${ leftIcon ? 'withLeftIcon' : '' }\n    ${ rightIcon ? 'withRightIcon' : '' }\n    ${ notificationIcon ? 'withNotification' : '' }\n    `;\n\n  return (\n    <header className={ headerCssClass }>\n      {\n        leftIcon && <Icon { ...leftIcon } />\n      }\n\n      {\n        text && <h2>{ text }</h2>\n      }\n\n      { children }\n\n      {\n        buttons\n        && (\n          <div className=\"headerButtons\">\n            {\n              buttons.map((button) => {\n                if (button.kind === 'notifications') {\n                  return <NotificationsButton key={ button.id } { ...button } />;\n                }\n                return <SimpleButton key={ button.id } { ...(button as ButtonProps) } />;\n              })\n            }\n          </div>\n        )\n      }\n\n      {\n        rightIcon && <Icon { ...rightIcon } />\n      }\n\n      {\n        notificationIcon && <NotificationIcon { ...notificationIcon } />\n      }\n    </header>\n  );\n};\n"],"mappings":";AAAA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,SAAA;AAAA,IAAAC,SAAA,GAAAP,sBAAA,CAAAC,OAAA;AAEb,IAAAO,MAAA,GAAAR,sBAAA,CAAAC,OAAA;AAEA,IAAAQ,KAAA,GAAAR,OAAA;AACA,IAAAS,iBAAA,GAAAT,OAAA;AACA,IAAAU,aAAA,GAAAV,OAAA;AACA,IAAAW,oBAAA,GAAAX,OAAA;AAGAA,OAAA;AAEO,MAAMK,SAAwC,GAAGA,CACtD;EACEO,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,gBAAgB;EAChBC;AACF,CAAC,KACE;EACH,MAAMC,cAAc,GAAG;AACzB,MAAOL,QAAQ,GAAG,cAAc,GAAG,EAAE;AACrC,MAAOC,SAAS,GAAG,eAAe,GAAG,EAAE;AACvC,MAAOE,gBAAgB,GAAG,kBAAkB,GAAG,EAAE;AACjD,KAAK;EAEH,oBACET,MAAA,CAAAY,OAAA,CAAAC,aAAA;IAAQC,SAAS,EAAGH;EAAgB,GAEhCL,QAAQ,iBAAIN,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACZ,KAAA,CAAAc,IAAI,EAAMT,QAAY,CAAC,EAIpCD,IAAI,iBAAIL,MAAA,CAAAY,OAAA,CAAAC,aAAA,aAAMR,IAAU,CAAC,EAGzBK,QAAQ,EAGRF,OAAO,iBAELR,MAAA,CAAAY,OAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAe,GAE1BN,OAAO,CAACQ,GAAG,CAAEC,MAAM,IAAK;IACtB,IAAIA,MAAM,CAACC,IAAI,KAAK,eAAe,EAAE;MACnC,oBAAOlB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,oBAAA,CAAAe,mBAAmB,MAAApB,SAAA,CAAAa,OAAA;QAACQ,GAAG,EAAGH,MAAM,CAACI;MAAI,GAAMJ,MAAM,CAAI,CAAC;IAChE;IACA,oBAAOjB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACV,aAAA,CAAAmB,YAAY,MAAAvB,SAAA,CAAAa,OAAA;MAACQ,GAAG,EAAGH,MAAM,CAACI;IAAI,GAAOJ,MAAM,CAAoB,CAAC;EAC1E,CAAC,CAEA,CACN,EAIDV,SAAS,iBAAIP,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACZ,KAAA,CAAAc,IAAI,EAAMR,SAAa,CAAC,EAItCE,gBAAgB,iBAAIT,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACX,iBAAA,CAAAqB,gBAAgB,EAAMd,gBAAoB,CAE3D,CAAC;AAEb,CAAC;AAACb,OAAA,CAAAE,SAAA,GAAAA,SAAA","ignoreList":[]}

package/dist/cjs/components/design/headerBar/headerBar.css

@@ -0,0 +1,41 @@
+/* Popovers */
+.headerBar {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+.headerBar > .icon {
+  position: absolute;
+  top: 50%;
+  margin-top: -15px;
+  font-size: 30px;
+}
+.headerBar.withLeftIcon {
+  padding-left: 50px;
+}
+.headerBar.withLeftIcon .icon:first-of-type {
+  left: 0;
+}
+.headerBar.withRightIcon {
+  padding-right: 50px;
+}
+.headerBar.withRightIcon .icon:last-of-type {
+  right: 0;
+  left: auto;
+}
+.headerBar h2 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: fit-content;
+}
+.headerBar .headerButtons {
+  display: flex;
+  flex-direction: row;
+  column-gap: 5px;
+  align-items: center;
+  justify-content: flex-start;
+}

package/dist/cjs/components/design/icons/basicIcon/Icon.js

@@ -0,0 +1,37 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Icon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const Icon = ({
+  icon,
+  customCssClass = '',
+  isMultiColor = false,
+  pathsCount = 20
+}) => {
+  if (isMultiColor) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: `icon icon-${icon} ${customCssClass}`,
+      role: "presentation",
+      "aria-hidden": "true"
+    }, Array(pathsCount).fill(0).map((pathElement, index) => /*#__PURE__*/_react.default.createElement("span", {
+      key: `${icon}IconPath${index}`,
+      className: `path${index + 1}`
+    })));
+  }
+  if (typeof icon === 'string') {
+    return /*#__PURE__*/_react.default.createElement("i", {
+      className: `icon icon-${icon} ${customCssClass}`,
+      role: "presentation",
+      "aria-hidden": "true"
+    });
+  }
+  return icon;
+};
+exports.Icon = Icon;
+var _default = exports.default = Icon;
+//# sourceMappingURL=Icon.js.map

package/dist/cjs/components/design/icons/basicIcon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","Icon","_react","icon","customCssClass","isMultiColor","pathsCount","createElement","className","role","Array","fill","map","pathElement","index","key","_default"],"sources":["../../../../../../src/components/design/icons/basicIcon/Icon.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactElement } from 'react';\n\nexport interface IconProps {\n  icon: string | ReactElement;\n  customCssClass?: string;\n  isMultiColor?: boolean;\n  pathsCount?: number;\n}\n\nexport const Icon: React.FC<IconProps> = (\n  {\n    icon,\n    customCssClass = '',\n    isMultiColor = false,\n    pathsCount = 20\n  }\n  : IconProps\n) => {\n  if (isMultiColor) {\n    return (\n      <span\n        className={ `icon icon-${ icon } ${ customCssClass }` }\n        role=\"presentation\"\n        aria-hidden=\"true\"\n      >\n        {   }\n        { Array(pathsCount).fill(0).map((pathElement, index) => (<span key={ `${ icon }IconPath${ index }` } className={ `path${ (index + 1) }` } />)) }\n      </span>\n    );\n  }\n\n  if (typeof icon === 'string') {\n    return (\n      <i\n        className={ `icon icon-${ icon } ${ customCssClass }` }\n        role=\"presentation\"\n        aria-hidden=\"true\"\n      />\n    );\n  }\n\n  return icon;\n};\n\nexport default Icon;\n"],"mappings":";AAAA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA,GAAAF,OAAA,CAAAG,IAAA;AAEb,IAAAC,MAAA,GAAAR,sBAAA,CAAAC,OAAA;AASO,MAAMM,IAAyB,GAAGA,CACvC;EACEE,IAAI;EACJC,cAAc,GAAG,EAAE;EACnBC,YAAY,GAAG,KAAK;EACpBC,UAAU,GAAG;AAEL,CAAC,KACR;EACH,IAAID,YAAY,EAAE;IAChB,oBACEH,MAAA,CAAAF,OAAA,CAAAO,aAAA;MACEC,SAAS,EAAG,aAAcL,IAAI,IAAMC,cAAc,EAAK;MACvDK,IAAI,EAAC,cAAc;MACnB,eAAY;IAAM,GAGhBC,KAAK,CAACJ,UAAU,CAAC,CAACK,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAAC,CAACC,WAAW,EAAEC,KAAK,kBAAMZ,MAAA,CAAAF,OAAA,CAAAO,aAAA;MAAMQ,GAAG,EAAG,GAAIZ,IAAI,WAAaW,KAAK,EAAK;MAACN,SAAS,EAAG,OAASM,KAAK,GAAG,CAAC;IAAM,CAAE,CAAE,CACzI,CAAC;EAEX;EAEA,IAAI,OAAOX,IAAI,KAAK,QAAQ,EAAE;IAC5B,oBACED,MAAA,CAAAF,OAAA,CAAAO,aAAA;MACEC,SAAS,EAAG,aAAcL,IAAI,IAAMC,cAAc,EAAK;MACvDK,IAAI,EAAC,cAAc;MACnB,eAAY;IAAM,CACnB,CAAC;EAEN;EAEA,OAAON,IAAI;AACb,CAAC;AAACL,OAAA,CAAAG,IAAA,GAAAA,IAAA;AAAA,IAAAe,QAAA,GAAAlB,OAAA,CAAAE,OAAA,GAEaC,IAAI","ignoreList":[]}

package/dist/cjs/components/design/icons/basicIcon/iconSets.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.allIconNames = exports.IconSets = exports.IconList = exports.FlatIconSet = void 0;
+var _x15Icons = _interopRequireDefault(require("../../../../icons/x15Icons.json"));
+const allIconNames = exports.allIconNames = [];
+const IconSets = exports.IconSets = _x15Icons.default.iconSets.map(iconSet => {
+  const thisSet = {
+    label: '',
+    icons: {}
+  };
+  const {
+    selection,
+    metadata,
+    height
+  } = iconSet;
+  thisSet.label = metadata.name;
+  thisSet.icons = iconSet.icons.reduce((acc, icon) => {
+    // @ts-ignore
+    const {
+      id,
+      paths,
+      isMulticolor
+    } = icon;
+    const match = selection.find(item => item.id === id);
+    const name = match?.name;
+    if (match && name) {
+      allIconNames.push(name);
+      acc[name] = {
+        paths,
+        height,
+        isMulticolor
+      };
+    }
+    return acc;
+  }, {});
+  return thisSet;
+});
+const FlatIconSet = exports.FlatIconSet = IconSets?.reduce((acc, iconSet) => ({
+  ...acc,
+  ...iconSet.icons
+}), {});
+const IconList = exports.IconList = allIconNames;
+var _default = exports.default = {
+  IconSets,
+  FlatIconSet,
+  IconList
+};
+//# sourceMappingURL=iconSets.js.map

package/dist/cjs/components/design/icons/basicIcon/iconSets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconSets.js","names":["_x15Icons","_interopRequireDefault","require","allIconNames","exports","IconSets","iconDefinitions","iconSets","map","iconSet","thisSet","label","icons","selection","metadata","height","name","reduce","acc","icon","id","paths","isMulticolor","match","find","item","push","FlatIconSet","IconList","_default","default"],"sources":["../../../../../../src/components/design/icons/basicIcon/iconSets.ts"],"sourcesContent":["import iconDefinitions from '../../../../icons/x15Icons.json';\n\nexport const allIconNames: string[] = [];\n\nexport interface IconDefinition {\n  paths: string[];\n  width?: number;\n  height?: number;\n  isMulticolor: boolean;\n}\n\nexport interface IconSet {\n  label: string;\n  icons: {\n    [name: string]: IconDefinition\n  };\n}\n\nexport const IconSets = iconDefinitions.iconSets.map((iconSet) => {\n  const thisSet: IconSet = { label: '', icons: {} };\n\n  const { selection, metadata, height } = iconSet;\n\n  thisSet.label = metadata.name;\n\n  thisSet.icons = iconSet.icons.reduce<{ [name: string]: IconDefinition }>((acc, icon) => {\n     \n    // @ts-ignore\n    const { id, paths, isMulticolor } = icon;\n    const match = selection.find((item) => item.id === id);\n    const name = match?.name;\n\n    if (match && name) {\n      allIconNames.push(name);\n\n      acc[name] = {\n        paths,\n        height,\n        isMulticolor\n      };\n    }\n\n    return acc;\n  }, {});\n\n  return thisSet;\n});\n\nexport const FlatIconSet = IconSets?.reduce((acc, iconSet) => ({ ...acc, ...iconSet.icons }), {});\n\nexport const IconList = allIconNames;\n\nexport default {\n  IconSets,\n  FlatIconSet,\n  IconList\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEO,MAAMC,YAAsB,GAAAC,OAAA,CAAAD,YAAA,GAAG,EAAE;AAgBjC,MAAME,QAAQ,GAAAD,OAAA,CAAAC,QAAA,GAAGC,iBAAe,CAACC,QAAQ,CAACC,GAAG,CAAEC,OAAO,IAAK;EAChE,MAAMC,OAAgB,GAAG;IAAEC,KAAK,EAAE,EAAE;IAAEC,KAAK,EAAE,CAAC;EAAE,CAAC;EAEjD,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAGN,OAAO;EAE/CC,OAAO,CAACC,KAAK,GAAGG,QAAQ,CAACE,IAAI;EAE7BN,OAAO,CAACE,KAAK,GAAGH,OAAO,CAACG,KAAK,CAACK,MAAM,CAAqC,CAACC,GAAG,EAAEC,IAAI,KAAK;IAEtF;IACA,MAAM;MAAEC,EAAE;MAAEC,KAAK;MAAEC;IAAa,CAAC,GAAGH,IAAI;IACxC,MAAMI,KAAK,GAAGV,SAAS,CAACW,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACL,EAAE,KAAKA,EAAE,CAAC;IACtD,MAAMJ,IAAI,GAAGO,KAAK,EAAEP,IAAI;IAExB,IAAIO,KAAK,IAAIP,IAAI,EAAE;MACjBb,YAAY,CAACuB,IAAI,CAACV,IAAI,CAAC;MAEvBE,GAAG,CAACF,IAAI,CAAC,GAAG;QACVK,KAAK;QACLN,MAAM;QACNO;MACF,CAAC;IACH;IAEA,OAAOJ,GAAG;EACZ,CAAC,EAAE,CAAC,CAAC,CAAC;EAEN,OAAOR,OAAO;AAChB,CAAC,CAAC;AAEK,MAAMiB,WAAW,GAAAvB,OAAA,CAAAuB,WAAA,GAAGtB,QAAQ,EAAEY,MAAM,CAAC,CAACC,GAAG,EAAET,OAAO,MAAM;EAAE,GAAGS,GAAG;EAAE,GAAGT,OAAO,CAACG;AAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE1F,MAAMgB,QAAQ,GAAAxB,OAAA,CAAAwB,QAAA,GAAGzB,YAAY;AAAC,IAAA0B,QAAA,GAAAzB,OAAA,CAAA0B,OAAA,GAEtB;EACbzB,QAAQ;EACRsB,WAAW;EACXC;AACF,CAAC","ignoreList":[]}