@crystaldesign/diva-navigator 24.15.0-beta.9 → 24.16.0-beta.1

package/build/esm/index.js

@@ -16,6 +16,7 @@ import { md5 } from '@crystaldesign/diva-utils';
 import _typeof from '@babel/runtime/helpers/typeof';
 import { Html5Qrcode } from 'html5-qrcode';
 import { Alert } from '@mui/material';
+import Snowfall from 'react-snowfall';
 import { useSwipeable } from 'react-swipeable';
 
 (function() {
@@ -63,7 +64,7 @@ var headerWrapperRight = "header-wrapper-right-zLaAR";
 var hide$1 = "hide-1DmsJ";
 var breadcrumbsWrapper = "breadcrumbs-wrapper-nqYkU";
 var customArea = "custom-area-FLAOC";
-var css_248z$n = ".header-bLyVg {\n  background-color: white;\n  color: #333333;\n  height: -moz-fit-content;\n  height: fit-content;\n  width: 100%;\n  position: relative;\n  box-shadow: 0px 1px 4px 0px rgba(51, 51, 51, 1);\n  font-family: var(--diva-typography-font-family);\n  transition: height ease-in-out 1s;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n}\n\n.header-wrapper-BPUbF {\n  width: 100%;\n  height: 60px;\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  z-index: 1;\n  overflow: hidden;\n}\n\n.header-wrapper-left-qxYUn {\n  display: flex;\n  z-index: 1;\n}\n\n.header-wrapper-right-zLaAR {\n  display: flex;\n  flex: 1 1 250px;\n  max-width: -moz-max-content;\n  max-width: max-content;\n  justify-content: flex-end;\n  height: 100%;\n  align-items: center;\n  overflow: hidden;\n  right: 0;\n  background-color: #fff;\n  z-index: 10;\n  margin-left: auto;\n  flex-basis: fit-content;\n}\n\n.darkmode .header-wrapper-right-zLaAR {\n  background-color: transparent;\n  background-color: initial;\n}\n\n.hide-1DmsJ {\n  height: 0;\n  transition: height ease-in-out 1s;\n}\n\n.breadcrumbs-wrapper-nqYkU {\n  width: 100%;\n  height: 30px;\n  position: relative;\n  border-top: 1px solid #f2f2f2;\n}\n\n.selected-z3Uht {\n  transform: scale(1.1);\n  color: var(--diva-theme-palette-primary-main);\n}\n.custom-area-FLAOC {\n  margin: 8px;\n  height: 46px;\n  overflow: auto;\n}\n";
+var css_248z$n = ".header-bLyVg {\n  background-color: white;\n  color: #333333;\n  height: -moz-fit-content;\n  height: fit-content;\n  width: 100%;\n  position: relative;\n  box-shadow: 0px 1px 4px 0px rgba(51, 51, 51, 1);\n  font-family: var(--diva-typography-font-family);\n  transition: height ease-in-out 1s;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n}\n\n.header-wrapper-BPUbF {\n  width: 100%;\n  height: 60px;\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  z-index: 1;\n}\n\n.header-wrapper-left-qxYUn {\n  display: flex;\n  z-index: 1;\n}\n\n.header-wrapper-right-zLaAR {\n  display: flex;\n  flex: 1 1 250px;\n  max-width: -moz-max-content;\n  max-width: max-content;\n  justify-content: flex-end;\n  height: 100%;\n  align-items: center;\n  overflow: hidden;\n  right: 0;\n  background-color: #fff;\n  z-index: 10;\n  margin-left: auto;\n  flex-basis: fit-content;\n}\n\n.darkmode .header-wrapper-right-zLaAR {\n  background-color: transparent;\n  background-color: initial;\n}\n\n.hide-1DmsJ {\n  height: 0;\n  transition: height ease-in-out 1s;\n}\n\n.breadcrumbs-wrapper-nqYkU {\n  width: 100%;\n  height: 30px;\n  position: relative;\n  border-top: 1px solid #f2f2f2;\n}\n\n.selected-z3Uht {\n  transform: scale(1.1);\n  color: var(--diva-theme-palette-primary-main);\n}\n.custom-area-FLAOC {\n  margin: 8px;\n  height: 46px;\n  overflow: auto;\n}\n";
 styleInject(css_248z$n);
 
 var scroller = "scroller-QE6K3";
@@ -126,24 +127,54 @@ function Buttons () {
     _useDivaCore$state = _useDivaCore.state,
     initializing = _useDivaCore$state.initializing,
     width = _useDivaCore$state.dimensions.width,
-    buttons = _useDivaCore$state.navigationConfiguration.buttons;
+    _useDivaCore$state$na = _useDivaCore$state.navigationConfiguration,
+    buttons = _useDivaCore$state$na.buttons,
+    customLogo = _useDivaCore$state$na.customLogo;
   var scrollerDiv = useRef();
-  var _useState = useState(false),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
-    showArrowLeft = _useState2[0],
-    setShowArrowLeft = _useState2[1];
+    observer = _useState2[0],
+    setObserver = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    showArrowRight = _useState4[0],
-    setShowArrowRight = _useState4[1];
+    showArrowLeft = _useState4[0],
+    setShowArrowLeft = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showArrowRight = _useState6[0],
+    setShowArrowRight = _useState6[1];
   var recalcScroll = function recalcScroll(width) {
     if (!scrollerDiv.current) return;
-    if (scrollerDiv.current.scrollLeft > 0 !== showArrowLeft) setShowArrowLeft(!showArrowLeft);
-    if (scrollerDiv.current.scrollLeft + (width !== null && width !== void 0 ? width : scrollerDiv.current.clientWidth) + 1 < scrollerDiv.current.scrollWidth !== showArrowRight) setShowArrowRight(!showArrowRight);
+    setShowArrowLeft(!!(scrollerDiv.current.scrollLeft > 0));
+    setShowArrowRight(!!(scrollerDiv.current.scrollLeft + (width !== null && width !== void 0 ? width : scrollerDiv.current.clientWidth) + 1 < scrollerDiv.current.scrollWidth));
   };
+  useEffect(function () {
+    if (scrollerDiv.current) {
+      observer === null || observer === void 0 || observer.disconnect();
+      var obs = new MutationObserver(function () {
+        recalcScroll();
+      });
+      obs.observe(scrollerDiv.current, {
+        characterData: true,
+        childList: true,
+        subtree: true,
+        characterDataOldValue: true
+      });
+      setObserver(obs);
+      return function () {
+        return obs.disconnect();
+      };
+    }
+    return;
+  }, [scrollerDiv]);
   useEffect(function () {
     recalcScroll();
   }, [initializing, width]);
+  useEffect(function () {
+    setTimeout(function () {
+      return recalcScroll();
+    }, 500);
+  }, [customLogo]);
   var scrollDistance = scrollerDiv.current && scrollerDiv.current.clientWidth < 400 ? scrollerDiv.current.clientWidth : 400;
   return /*#__PURE__*/jsxs("div", {
     className: scroller,
@@ -190,18 +221,25 @@ var buttonsWrapper = "buttons-wrapper-ypwVh";
 var breadcrumb = "breadcrumb-03kGg";
 var splitter = "splitter-blALw";
 var selected$3 = "selected-M8GAh";
-var css_248z$k = ".buttons-wrapper-ypwVh {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  gap: 6px;\n  margin-left: 24px;\n  color: #4f4f4f;\n}\n.breadcrumb-03kGg {\n  cursor: pointer;\n  font-size: small;\n}\n\n.splitter-blALw:first-of-type {\n  display: none;\n}\n\n.splitter-blALw {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  background: center / 80% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2212%22 viewBox%3D%220 0 12 12%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M5 3.5L7.5 6L5 8.5%22 stroke%3D%22%237B7B7B%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.breadcrumb-03kGg:hover {\n  transform: scale(1.1);\n  color: var(--diva-theme-palette-primary-main);\n  text-decoration: underline;\n  transition: all 200ms;\n}\n\n.breadcrumb-03kGg.selected-M8GAh {\n  color: var(--diva-theme-palette-primary-main);\n  text-decoration: underline;\n}\n";
+var greetingsTextClass = "greetings-text-class-74-so";
+var css_248z$k = ".buttons-wrapper-ypwVh {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  gap: 6px;\n  margin-left: 24px;\n  color: #4f4f4f;\n}\n.breadcrumb-03kGg {\n  cursor: pointer;\n  font-size: small;\n}\n\n.splitter-blALw:first-of-type {\n  display: none;\n}\n\n.splitter-blALw {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  background: center / 80% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2212%22 viewBox%3D%220 0 12 12%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M5 3.5L7.5 6L5 8.5%22 stroke%3D%22%237B7B7B%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.breadcrumb-03kGg:hover {\n  transform: scale(1.1);\n  color: var(--diva-theme-palette-primary-main);\n  text-decoration: underline;\n  transition: all 200ms;\n}\n\n.breadcrumb-03kGg.selected-M8GAh {\n  color: var(--diva-theme-palette-primary-main);\n  text-decoration: underline;\n}\n\n.greetings-text-class-74-so {\n  position: absolute;\n  right: 16px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  letter-spacing: 1px;\n  font-size: 16px;\n}\n";
 styleInject(css_248z$k);
 
 function Breadcrumbs () {
   var _useDivaCore = useDivaCore(),
     openComponent = _useDivaCore.actions.openComponent,
-    breadcrumbs = _useDivaCore.state.navigationConfiguration.breadcrumbs;
+    _useDivaCore$state = _useDivaCore.state,
+    hideSnow = _useDivaCore$state.hideSnow,
+    isPortrait = _useDivaCore$state.dimensions.isPortrait,
+    _useDivaCore$state$na = _useDivaCore$state.navigationConfiguration,
+    breadcrumbs = _useDivaCore$state$na.breadcrumbs,
+    greetingsText = _useDivaCore$state$na.greetingsText,
+    showSnow = _useDivaCore$state$na.showSnow;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: buttonsWrapper,
-    children: breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.breadcrumbs.path.slice().sort(function (a, b) {
+    children: [breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.breadcrumbs.path.slice().sort(function (a, b) {
       return a.level - b.level;
     }).map(function (b) {
       return /*#__PURE__*/jsxs(Fragment, {
@@ -215,7 +253,10 @@ function Breadcrumbs () {
           children: t(b.name)
         })]
       }, b.name);
-    })
+    }), greetingsText && (!hideSnow && showSnow || !showSnow) && !isPortrait && /*#__PURE__*/jsx("div", {
+      className: greetingsTextClass,
+      children: t(greetingsText)
+    })]
   });
 }
 
@@ -1475,8 +1516,12 @@ var HidePrices = function HidePrices(props) {
   var _useDivaCore = useDivaCore(),
     _useDivaCore$state = _useDivaCore.state,
     hidePrices = _useDivaCore$state.hidePrices,
+    hideSnow = _useDivaCore$state.hideSnow,
     theme = _useDivaCore$state.theme,
-    toggleHidePrices = _useDivaCore.actions.toggleHidePrices;
+    showSnow = _useDivaCore$state.navigationConfiguration.showSnow,
+    _useDivaCore$actions = _useDivaCore.actions,
+    toggleHidePrices = _useDivaCore$actions.toggleHidePrices,
+    toggleHideSnow = _useDivaCore$actions.toggleHideSnow;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var myVarVal = (theme === null || theme === void 0 || (_theme$palette = theme.palette) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.primary) === null || _theme$palette === void 0 ? void 0 : _theme$palette.main) || '#a84232';
@@ -1495,6 +1540,21 @@ var HidePrices = function HidePrices(props) {
     }), /*#__PURE__*/jsx("div", {
       className: text,
       children: t('navigation.user.hideprices')
+    }), showSnow && /*#__PURE__*/jsxs(Fragment$1, {
+      children: [/*#__PURE__*/jsx(Switch, {
+        onChange: toggleHideSnow,
+        checked: !hideSnow,
+        onColor: '#00bcd4',
+        offColor: '#CACACA',
+        height: 20,
+        width: 36,
+        handleDiameter: 16,
+        uncheckedIcon: false,
+        checkedIcon: false
+      }), /*#__PURE__*/jsx("div", {
+        className: text,
+        children: t('navigation.user.hidesnow')
+      })]
     })]
   });
 };
@@ -2256,6 +2316,7 @@ var Header = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useDivaCore = useDivaCore(),
     showLoginWindow = _useDivaCore.actions.showLoginWindow,
     _useDivaCore$state = _useDivaCore.state,
+    hideSnow = _useDivaCore$state.hideSnow,
     user = _useDivaCore$state.user,
     isMobile = _useDivaCore$state.dimensions.isMobile,
     _useDivaCore$state$na = _useDivaCore$state.navigationConfiguration,
@@ -2266,8 +2327,12 @@ var Header = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     showOrgName = _useDivaCore$state$na.showOrgName,
     showUserName = _useDivaCore$state$na.showUserName,
     qrCodeScanner = _useDivaCore$state$na.qrCodeScanner,
-    initializing = _useDivaCore$state.initializing,
+    showSnow = _useDivaCore$state$na.showSnow;
+    _useDivaCore$state$na.greetingsText;
+    var initializing = _useDivaCore$state.initializing,
     availableLanguages = _useDivaCore$state.availableLanguages;
+  var _useTranslation = useTranslation();
+    _useTranslation.t;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -2307,7 +2372,16 @@ var Header = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       id: "diva-header",
       ref: ref,
       className: classNames(header, initializing || headerLoading ? hide$1 : undefined),
-      children: [/*#__PURE__*/jsxs("div", {
+      children: [!hideSnow && showSnow && /*#__PURE__*/jsx(Snowfall, {
+        color: "#a7b6eb",
+        speed: [0.01, 0.03],
+        wind: [-0.02, 0.02],
+        radius: [0.5, 2],
+        snowflakeCount: 130,
+        style: {
+          zIndex: 1000
+        }
+      }), /*#__PURE__*/jsxs("div", {
         className: headerWrapper,
         children: [/*#__PURE__*/jsx(Logos, {}), welcomeText && /*#__PURE__*/jsx(WelcomeText, {
           text: welcomeText

package/build/types/navigator/src/Header/Breadcrumbs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Header/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,MAAM,CAAC,OAAO,gCA0Bb"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Header/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,MAAM,CAAC,OAAO,gCA4Bb"}

package/build/types/navigator/src/Header/Buttons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Header/Buttons/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,MAAM,CAAC,OAAO,gCAmDb"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Header/Buttons/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,MAAM,CAAC,OAAO,gCAmEb"}

package/build/types/navigator/src/Header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;;AAenD,wBAoEG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;;AAgBnD,wBAmFG"}

package/build/types/navigator/src/Profil/HidePrices/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Profil/HidePrices/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,KAAK,GAAG,EAAE,CAAC;AAEhB,QAAA,MAAM,UAAU,UAAW,KAAK,sBA0B/B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Profil/HidePrices/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,KAAK,GAAG,EAAE,CAAC;AAEhB,QAAA,MAAM,UAAU,UAAW,KAAK,sBA+C/B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/diva-navigator",
-  "version": "24.15.0-beta.9",
+  "version": "24.16.0-beta.1",
   "license": "MIT",
   "devDependencies": {
     "@testing-library/jest-dom": "^6.5.0",
@@ -13,6 +13,7 @@
     "classnames": "^2.5.1",
     "html5-qrcode": "^2.3.8",
     "react-dropdown": "^1.11.0",
+    "react-snowfall": "^2.2.0",
     "react-swipeable": "^7.0.1",
     "react-switch": "^7.0.0"
   },
@@ -23,5 +24,5 @@
   },
   "module": "build/esm/index.js",
   "types": "./build/types/navigator/src/index.d.ts",
-  "gitHead": "62950297c7203e7029bcaa3e78e77e484a24c326"
+  "gitHead": "066575e4e585a2fdab50f620f6178aca744d0625"
 }