@rio-cloud/rio-uikit 0.16.2-beta.14 → 0.16.2-beta.16

package/lib/es/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.VolkswagenApplicationHeader = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
@@ -14,21 +16,26 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _ApplicationActionBar = require("../../../../components/applicationHeader/ApplicationActionBar");
 var _useResizeObserver3 = _interopRequireDefault(require("../../../../hooks/useResizeObserver"));
 var _modulePropTypes = _interopRequireDefault(require("./modulePropTypes"));
+var _excluded = ["homeRoute", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var VolkswagenApplicationHeader = function VolkswagenApplicationHeader(props) {
+var VolkswagenApplicationHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var homeRoute = props.homeRoute,
     className = props.className,
     appNavigator = props.appNavigator,
     appNavigatorClassName = props.appNavigatorClassName,
     appMenuItems = props.appMenuItems,
     navItems = props.navItems,
-    actionBarItems = props.actionBarItems;
+    actionBarItems = props.actionBarItems,
+    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var actionBarRef = (0, _react.useRef)();
   var _useResizeObserver = (0, _useResizeObserver3["default"])(),
     _useResizeObserver2 = (0, _slicedToArray2["default"])(_useResizeObserver, 2),
     navRef = _useResizeObserver2[0],
     contentRect = _useResizeObserver2[1].contentRect;
+  (0, _react.useImperativeHandle)(ref, function () {
+    return navRef;
+  }, []);
 
   // const getContentRect = useCallback(key => contentRect && Math.round(contentRect[key]), [contentRect]);
   // const containerWidth = getContentRect('width') || 0;
@@ -37,9 +44,11 @@ var VolkswagenApplicationHeader = function VolkswagenApplicationHeader(props) {
   // const hasActionBarItems = !isEmpty(actionBarItems);
 
   var classNames = (0, _classnames["default"])('ApplicationHeader VolkswagenApplicationHeader', 'user-select-none', className && className);
-  return /*#__PURE__*/_react["default"].createElement("nav", {
+  return /*#__PURE__*/_react["default"].createElement("nav", (0, _extends2["default"])({}, remainingProps, {
     className: classNames,
     ref: navRef
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "width-100pct"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "brand"
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -57,8 +66,8 @@ var VolkswagenApplicationHeader = function VolkswagenApplicationHeader(props) {
   })), /*#__PURE__*/_react["default"].createElement(_ApplicationActionBar.ApplicationActionBar, {
     nodeRef: actionBarRef,
     items: actionBarItems
-  }));
-};
+  })));
+});
 exports.VolkswagenApplicationHeader = VolkswagenApplicationHeader;
 var _default = VolkswagenApplicationHeader;
 exports["default"] = _default;

package/lib/es/types.ts

@@ -421,8 +421,7 @@ export interface ClusterMapMarkerProps {
     exceptionCount?: number;
     active?: boolean;
     clickable?: boolean;
-    iconNames?: string;
-    colorClass?: string;
+    iconName?: string;
     markerColor?: markerColor;
 }
 
@@ -833,6 +832,7 @@ export enum MapType {
     TYPE_FLEET_STYLE = 'FLEET_STYLE',
     TYPE_SATELLITE = 'SATELLITE',
     TYPE_TERRAIN = 'TERRAIN',
+    TYPE_NIGHT = 'NIGHT',
 }
 
 export interface MapProps {
@@ -858,10 +858,12 @@ export interface MapProps {
         | MapType.TYPE_FLEET_STYLE
         | MapType.TYPE_SATELLITE
         | MapType.TYPE_TERRAIN
+        | MapType.TYPE_NIGHT
         | 'DEFAULT'
         | 'FLEET_STYLE'
         | 'SATELLITE'
-        | 'TERRAIN';
+        | 'TERRAIN'
+        | 'NIGHT';
     mapLayer?: string[];
     showCluster?: boolean;
     showScaleBar?: boolean;
@@ -969,6 +971,7 @@ export interface MapSettingsTileProps {
 
 export interface MapTypeSettingsProps {
     mapType?: string;
+    enableNightMap?: boolean;
     onMapTypeChange?: () => string;
 }
 
@@ -1603,7 +1606,6 @@ export interface SingleMapMarkerProps {
     moving?: boolean;
     clickable?: boolean;
     iconNames?: string[];
-    colorClass?: string;
     markerColor?: markerColor;
 }
 

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2-beta.14"
+    "version": "0.16.2-beta.16"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.2-beta.14",
+    "version": "0.16.2-beta.16",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {

package/styles/components/MapMarker.less

@@ -160,7 +160,7 @@
     }
 
     .rio-map-icon {
-      margin-right: @bubbleSize * 0.4;
+      margin: 0 @bubbleSize * 0.3;
 
       &.rioglyph {
         top: 0; // unnecessary rioglyph hack
@@ -174,6 +174,14 @@
           width: 100%;
         }
       }
+
+      + .rio-map-icon {
+        margin: 0 @bubbleSize * 0.3 0 -(@bubbleSize) * 0.3;
+      }
+
+      + .rio-map-name {
+        padding: 0 @bubbleSize * 0.4 0 0;
+      }
     }
 
     &.moving {
@@ -192,18 +200,6 @@
       transition: height @animationDuration ~',' bottom @animationDuration;
     }
 
-    .rio-map-icon {
-      margin: 0 @bubbleSize * 0.3;
-
-      + .rio-map-icon {
-        margin: 0 @bubbleSize * 0.3 0 -(@bubbleSize) * 0.3;
-      }
-
-      + .rio-map-name {
-        padding: 0 @bubbleSize * 0.4 0 0;
-      }
-    }
-
     .rio-map-direction {
       border-radius: @border-radius-round;
       background-color: .hslb(@color-map-marker-asset-hsl, '+', '5%')[@result];
@@ -223,10 +219,10 @@
         margin-right: @bubbleSize * 0.2;
       }
     }
+
   }
 
   .rio-map-position-arrow {
-    background-color: var(--color-map-marker-text);
     bottom: (@iconSize * 0.5) - (@positionTriangleSize * 0.45);
     color: transparent;
     height: @positionTriangleSize;
@@ -296,6 +292,220 @@
       display: none !important;
     }
   }
+
+  // coloring
+  [class*="map-marker-type"] {
+    color: var(--color-map-marker-text);
+
+    .rio-map-icon {
+      &:before {
+        color: var(--color-map-marker-text);
+      }
+    }
+
+    &[class*="asset"] {
+      background-color: var(--color-map-marker-asset);
+      border: 1px solid var(--color-map-marker-asset);
+
+      &.active {
+        color: var(--color-map-marker-asset);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-asset);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-asset);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-asset);
+      }
+    }
+
+    &[class*="poi"] {
+      background-color: var(--color-map-marker-poi);
+      border: 1px solid var(--color-map-marker-poi);
+
+      &.active {
+        color: var(--color-map-marker-poi);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-poi);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-poi);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-poi);
+      }
+    }
+
+    &[class*="geofence"] {
+      background-color: var(--color-map-marker-geofence);
+      border: 1px solid var(--color-map-marker-geofence);
+
+      &.active {
+        color: var(--color-map-marker-geofence);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-geofence);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-geofence);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-geofence);
+      }
+    }
+
+    &[class*="route"] {
+      background-color: var(--color-map-marker-route);
+      border: 1px solid var(--color-map-marker-route);
+
+      &.active {
+        color: var(--color-map-marker-route);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-route);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-route);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-route);
+      }
+    }
+
+    // night colors
+    .map-type-night & {
+      color: var(--color-map-marker-text-night);
+
+      .rio-map-icon {
+        &:before {
+          color: var(--color-map-marker-text-night);
+        }
+      }
+
+      &[class*="asset"] {
+        background-color: var(--color-map-marker-asset-night);
+        border: 1px solid var(--color-map-marker-asset-night);
+
+        &.active {
+          color: var(--color-map-marker-asset-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-asset-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-asset-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-asset-night);
+        }
+      }
+
+      &[class*="poi"] {
+        background-color: var(--color-map-marker-poi-night);
+        border: 1px solid var(--color-map-marker-poi-night);
+
+        &.active {
+          color: var(--color-map-marker-poi-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-poi-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-poi-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-poi-night);
+        }
+      }
+
+      &[class*="geofence"] {
+        background-color: var(--color-map-marker-geofence-night);
+        border: 1px solid var(--color-map-marker-geofence-night);
+
+        &.active {
+          color: var(--color-map-marker-geofence-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-geofence-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-geofence-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-geofence-night);
+        }
+      }
+
+      &[class*="route"] {
+        background-color: var(--color-map-marker-route-night);
+        border: 1px solid var(--color-map-marker-route-night);
+
+        &.active {
+          color: var(--color-map-marker-route-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-route-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-route-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-route-night);
+        }
+      }
+    }
+  }
 }
 
 #rio-map-context-menu {

package/styles/components/MapSettings.less

@@ -10,6 +10,10 @@
     background: var(--color-white);
     cursor: pointer;
     padding: 3px;
+
+    .map-type-night & {
+      background: #444a4c;
+    }
   }
 
   .MapSettingsTileSpacer {
@@ -28,7 +32,7 @@
 
   // moved MapSettingsWrapper left on large noTouch devices
   @media (min-width: @screen-ls) {
-    +.MapSettingsWrapper {
+    + .MapSettingsWrapper {
       right: 47px;
     }
   }
@@ -60,6 +64,10 @@
       background: var(--color-white);
       cursor: pointer;
       padding: 5px;
+
+      .map-type-night & {
+        background: #444a4c;
+      }
     }
 
     .MapSettingsPanel {
@@ -70,9 +78,17 @@
       margin-bottom: 10px;
       padding: 5px;
 
+      .map-type-night & {
+        background: #444a4c;
+      }
+
       .MapSettingsItem {
         background: var(--color-white);
         cursor: pointer;
+
+        .map-type-night & {
+          background: #444a4c;
+        }
       }
     }
   }
@@ -110,31 +126,31 @@
   }
 }
 
-// OLD
-.MapSettings {
-  align-items: flex-end;
-  bottom: 15px;
-  display: flex;
-  flex-flow: column-reverse;
-  padding: 0;
-  position: absolute;
-  right: 47px;
-  z-index: 1;
-
-  @media (max-width: @screen-ls) {
-    right: 15px;
-  }
-
-  .MapSettingsPanel {
-    &:extend(.shadow-smooth);
-    background: var(--color-white);
-    display: flex;
-    margin-bottom: 10px;
-
-    .MapSettingsTile,
-    .MapSettingsButton {
-      cursor: pointer;
-      padding: 5px;
-    }
-  }
-}
+// // OLD
+// .MapSettings {
+//   align-items: flex-end;
+//   bottom: 15px;
+//   display: flex;
+//   flex-flow: column-reverse;
+//   padding: 0;
+//   position: absolute;
+//   right: 47px;
+//   z-index: 1;
+
+//   @media (max-width: @screen-ls) {
+//     right: 15px;
+//   }
+
+//   .MapSettingsPanel {
+//     &:extend(.shadow-smooth);
+//     background: var(--color-white);
+//     display: flex;
+//     margin-bottom: 10px;
+
+//     .MapSettingsTile,
+//     .MapSettingsButton {
+//       cursor: pointer;
+//       padding: 5px;
+//     }
+//   }
+// }

package/styles/design/border.less

@@ -172,13 +172,13 @@ each(@colors-highlight-map, {
 // coldplay-moos
 // coldplay-primrose
 // coldplay-khaki
-& when (@buildColdplayColors = true) {
-  each(@colors-coldplay-map, {
-    .border-color-@{key} {
-      border-color: @value !important;
-    }
-  })
-}
+// & when (@buildColdplayColors = true) {
+//   each(@colors-coldplay-map, {
+//     .border-color-@{key} {
+//       border-color: @value !important;
+//     }
+//   })
+// }
 
 // warmup-crimson
 // warmup-victoria
@@ -189,10 +189,10 @@ each(@colors-highlight-map, {
 // warmup-salmon
 // warmup-cherokee
 // warmup-corn
-& when (@buildWarmupColors = true) {
-  each(@colors-warmup-map, {
-    .border-color-@{key} {
-      border-color: @value !important;
-    }
-  })
-}
+// & when (@buildWarmupColors = true) {
+//   each(@colors-warmup-map, {
+//     .border-color-@{key} {
+//       border-color: @value !important;
+//     }
+//   })
+// }

package/styles/design/colors.less

@@ -72,6 +72,7 @@ each(@colors-gray-map, {
 // map-marker-route
 each(@colors-map-marker-map, {
   .bg-@{key} {
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -169,9 +170,9 @@ each(@colors-highlight-map, {
     .hover-bg-@{key}:hover {
       background-color: @value !important;
     }
-    .fill-@{key} {
-      fill: @value !important;
-    }
+    // .fill-@{key} {
+    //   fill: @value !important;
+    // }
   })
   .bg-coldplay-wine,
   .bg-coldplay-aubergine,
@@ -197,9 +198,9 @@ each(@colors-highlight-map, {
     .hover-bg-@{key}:hover {
       background-color: @value !important;
     }
-    .fill-@{key} {
-      fill: @value !important;
-    }
+    // .fill-@{key} {
+    //   fill: @value !important;
+    // }
   })
   .bg-warmup-crimson,
   .bg-warmup-victoria,