@rio-cloud/rio-uikit 0.16.2-beta.9 → 0.16.3-beta.1

package/lib/es/styles/variables/dark_colors.less

@@ -48,6 +48,13 @@
 @dark-color-map-marker-route: @color-map-marker-route;
 @dark-color-map-marker-text: @color-map-marker-text;
 
+@dark-color-map-marker-active-night: @color-map-marker-active-night;
+@dark-color-map-marker-asset-night: @color-map-marker-asset-night;
+@dark-color-map-marker-poi-night: @color-map-marker-poi-night;
+@dark-color-map-marker-geofence-night: @color-map-marker-geofence-night;
+@dark-color-map-marker-route-night: @color-map-marker-route-night;
+@dark-color-map-marker-text-night: @color-map-marker-text-night;
+
 // Color - Rating // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
 @dark-color-rating-1: @color-rating-1;
 @dark-color-rating-2: @color-rating-2;

package/lib/es/styles/variables/dark_css_variables_map.less

@@ -49,6 +49,13 @@
   // color-map-marker-route: @dark-color-map-marker-route;
   // color-map-marker-text: @dark-color-map-marker-text;
 
+  // color-map-marker-active-night: @dark-color-map-marker-active-night;
+  // color-map-marker-asset-night: @dark-color-map-marker-asset-night;
+  // color-map-marker-poi-night: @dark-color-map-marker-poi-night;
+  // color-map-marker-geofence-night: @dark-color-map-marker-geofence-night;
+  // color-map-marker-route-night: @dark-color-map-marker-route-night;
+  // color-map-marker-text-night: @dark-color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @dark-color-highlight-darkest;
   color-highlight-darker: @dark-color-highlight-darker;

package/lib/es/styles/variables/light_colors.less

@@ -52,6 +52,13 @@
 @color-map-marker-route: #3690ae;
 @color-map-marker-text: #ffffff;
 
+@color-map-marker-active-night: #ededed;
+@color-map-marker-asset-night: #6e757a;
+@color-map-marker-poi-night: #b23672;
+@color-map-marker-geofence-night: #79619f;
+@color-map-marker-route-night: #3b9fc1;
+@color-map-marker-text-night: #ededed;
+
 // Color - Rating
 @color-rating-1: #d90000;
 @color-rating-2: #ff8e3c;

package/lib/es/styles/variables/light_css_variables_map.less

@@ -53,6 +53,13 @@
   color-map-marker-route: @color-map-marker-route;
   color-map-marker-text: @color-map-marker-text;
 
+  color-map-marker-active-night: @color-map-marker-active-night;
+  color-map-marker-asset-night: @color-map-marker-asset-night;
+  color-map-marker-poi-night: @color-map-marker-poi-night;
+  color-map-marker-geofence-night: @color-map-marker-geofence-night;
+  color-map-marker-route-night: @color-map-marker-route-night;
+  color-map-marker-text-night: @color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @color-highlight-darkest;
   color-highlight-darker: @color-highlight-darker;

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

@@ -74,8 +74,7 @@ export interface ApplicationHeaderProps {
     appMenuItems?: ModulePropTypes[];
     navItems?: ModulePropTypes[];
     actionBarItems: React.ReactNode[];
-    onMount?: Function;
-    onUnmount?: Function;
+    onToggleAppMenu?: (isOpen: boolean) => void;
     className?: string;
 }
 
@@ -155,6 +154,13 @@ export interface AreaGradient {
     color?: string;
 }
 
+export interface AspectRatioPlaceholderProps {
+    height?: number;
+    width?: number;
+    className?: string;
+    children?: React.ReactNode | string;
+}
+
 export interface AssetTreeProps {
     fly?: boolean;
     resizable?: boolean;
@@ -271,7 +277,7 @@ export interface BarChartProps {
 
 export type bsStyle = 'default' | 'primary' | 'info' | 'warning' | 'danger' | 'success' | 'link';
 
-export type bsSizeDialog = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullscreen';
+export type bsSizeDialog = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
 
 export type bsSize = 'xs' | 'sm' | 'lg';
 
@@ -412,6 +418,8 @@ export interface ClusterLayerProps {
     maxZoom?: string | number;
     clusterTheme?: ClusterTheme;
     eventListenerMap: EventListenerMap;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface ClusterMapMarkerProps {
@@ -420,8 +428,7 @@ export interface ClusterMapMarkerProps {
     exceptionCount?: number;
     active?: boolean;
     clickable?: boolean;
-    iconNames?: string;
-    colorClass?: string;
+    iconName?: string;
     markerColor?: markerColor;
 }
 
@@ -832,6 +839,7 @@ export enum MapType {
     TYPE_FLEET_STYLE = 'FLEET_STYLE',
     TYPE_SATELLITE = 'SATELLITE',
     TYPE_TERRAIN = 'TERRAIN',
+    TYPE_NIGHT = 'NIGHT',
 }
 
 export interface MapProps {
@@ -857,10 +865,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;
@@ -872,6 +882,9 @@ export interface MapProps {
     getApi?: Function;
     mapSettingsTooltip?: string | React.ReactNode;
     mapSettings?: React.ReactNode;
+    enableWebGL?: boolean;
+    enableDevicePixelRatio?: boolean;
+    children?: any;
 }
 
 export interface MapBoundingBoxButtonProps {
@@ -965,6 +978,7 @@ export interface MapSettingsTileProps {
 
 export interface MapTypeSettingsProps {
     mapType?: string;
+    enableNightMap?: boolean;
     onMapTypeChange?: () => string;
 }
 
@@ -984,6 +998,8 @@ export interface MarkerProps {
 export interface MarkerLayerProps {
     simpleTheme?: ClusterTheme;
     clusterDissolvable?: boolean;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface MenuItem {
@@ -1084,6 +1100,7 @@ export interface NumberControlProps {
     value?: number;
     step?: number;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
@@ -1100,12 +1117,14 @@ export interface NumberInputProps {
     value?: number;
     step?: number;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
     placeholder?: string;
+    digitPrecision?: number;
     ref?: React.MutableRefObject<object>;
 }
 
@@ -1355,6 +1374,22 @@ export interface RangeSliderProps {
     disabled?: boolean;
 }
 
+export interface ResponsiveColumnStripeProps {
+    minColumnWith?: number;
+    minColumns?: number;
+    maxColumns?: number;
+    className?: string;
+    buttonClassName?: string;
+    columnsWrapperClassName?: string;
+    onNextClick?: (pageNumber: number, columnsPerPage: number) => void;
+    onPreviousClick?: (pageNumber: number, columnsPerPage: number) => void;
+    stretchLastItems?: boolean;
+    asType?: string;
+    activePage?: number;
+    disableAnimation?: boolean;
+    children?: React.ReactNode;
+}
+
 export interface ReleaseNotesProps {
     releaseNotes: {
         [key: string]: {
@@ -1459,25 +1494,25 @@ export interface RouteProps {
 export interface RulesWrapperProps {}
 
 export interface RuleContainerProps {
-    show: boolean;
-    unchecked: boolean;
-    background: string;
-    borderColor: string;
-    hideConnector: boolean;
-    customConnector: string | JSX.Element;
-    className: string;
+    show?: boolean;
+    unchecked?: boolean;
+    background?: string;
+    borderColor?: string;
+    hideConnector?: boolean;
+    customConnector?: string | JSX.Element;
+    className?: string;
 }
 
 export interface RuleConnectorProps {
-    placement: 'start' | 'center' | 'end';
-    icon: string;
-    hidden: boolean;
-    background: string;
-    pageBackground: string;
-    contentClassName: string;
-    hasBorder: boolean;
-    borderColor: string;
-    className: string;
+    placement?: 'start' | 'center' | 'end';
+    icon?: string;
+    hidden?: boolean;
+    background?: string;
+    pageBackground?: string;
+    contentClassName?: string;
+    hasBorder?: boolean;
+    borderColor?: string;
+    className?: string;
 }
 
 // S --------------------------------------------------------------------------------------------------
@@ -1516,7 +1551,7 @@ export interface SelectProps {
     useClear?: boolean;
     noItemMessage?: string | React.ReactNode;
     showSelectedItemIcon?: boolean;
-    showUnselectedIdemIcons?: boolean;
+    showUnselectedItemIcons?: boolean;
     value?: string[] | undefined;
     className?: string;
     btnClassName?: string;
@@ -1594,7 +1629,6 @@ export interface SingleMapMarkerProps {
     moving?: boolean;
     clickable?: boolean;
     iconNames?: string[];
-    colorClass?: string;
     markerColor?: markerColor;
 }
 
@@ -2200,6 +2234,18 @@ export type UseTimeout = (callback: () => void, delay?: number) => React.Mutable
 
 export type UseWindowResize = (callback: () => void, timeout?: number) => void;
 
+export type UseDarkMode = () => boolean;
+
+export type UseMutationObserver = (
+    targetElement: HTMLElement | React.MutableRefObject<object> | null | undefined,
+    callback: MutationCallback | undefined,
+    options?: {
+        attributes?: boolean;
+        childList?: boolean;
+        subtree?: boolean;
+    }
+) => void;
+
 export type UseScrollPosition = (
     target: Window | HTMLBodyElement | React.ReactElement | React.MutableRefObject<object> | undefined
-) => number;
+) => number;

package/lib/es/useDarkMode.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useDarkMode' {
+    import { UseDarkMode } from './types';
+    export default UseDarkMode;
+}

package/lib/es/useDarkMode.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useDarkMode2["default"];
+  }
+});
+var _useDarkMode2 = _interopRequireDefault(require("./hooks/useDarkMode"));

package/lib/es/useMutationObserver.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useMutationObserver' {
+    import { UseMutationObserver } from './types';
+    export default UseMutationObserver;
+}

package/lib/es/useMutationObserver.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useMutationObserver2["default"];
+  }
+});
+var _useMutationObserver2 = _interopRequireDefault(require("./hooks/useMutationObserver"));

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2-beta.9"
+"version": "0.16.3-beta.1"
 }

package/package.json

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

package/styles/components/ApplicationHeader.less

@@ -456,6 +456,8 @@
   }
 
   .CollapsedDropdown {
+    display: block;
+    
     > .dropdown-menu {
       left: auto;
       right: 0;

package/styles/components/Dialog.less

@@ -1,6 +1,7 @@
 @modal-outer-margin: 30px;
 @modal-inner-padding: 20px;
-@modal-title-padding: 15px;
+@modal-title-y-padding: 15px;
+@modal-title-x-padding: 20px;
 @modal-content-bg: var(--color-white);
 @modal-content-border-color: var(--gray-light);
 @modal-backdrop-bg: var(--always-color-black);
@@ -40,6 +41,7 @@ body {
   top: 0;
   width: 100% !important;
   z-index: @zindex-modal;
+  backdrop-filter: blur(1px);
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
@@ -91,11 +93,6 @@ body {
             }
           }
         }
-
-        // because of overflow :after styling
-        &:after {
-          display: none !important;
-        }
       }
 
       .modal-footer:before {
@@ -138,7 +135,6 @@ body {
         border-bottom: 1px solid @modal-header-border-color;
         display: flex;
         justify-content: space-between;
-        padding: @modal-title-padding;
         padding: 0;
         position: relative;
         z-index: 1;
@@ -150,15 +146,16 @@ body {
           float: left;
           font-weight: @font-light;
           justify-content: center;
-          padding: 15px;
+          padding: @modal-title-y-padding @modal-title-x-padding;
           width: calc(~'100% - 60px');
           word-break: break-word;
 
           .modal-header-title {
             display: flex;
-            order: 1;
+            flex-wrap: wrap;
             font-size: @font-size-xl - 2;
             line-height: @font-size-xl - 2;
+            order: 1;
           }
 
           .modal-header-subtitle {
@@ -254,16 +251,12 @@ body {
         width: @modal-xl;
       }
 
-      &.modal-full {
-        width: calc(~'100vw - @{modal-outer-margin} * 2');
-      }
-
-      &.modal-fullscreen {
+      &.modal-fullscreen, &.modal-full, &.modal-full-width {
         width: calc(~'100vw - @{modal-outer-margin} * 2');
       }
     }
 
-    &.modal-fullscreen {
+    &.modal-fullscreen, &.modal-full-height {
       .modal-content {
         height: calc(~'100vh - (@{modal-outer-margin} * 2)'); // --vh fallback
         height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin} * 2)');
@@ -278,6 +271,7 @@ body {
         .modal-body {
           flex: 1 1 0; // instead "auto" we 0 for safari
           position: relative;
+          overflow-y: auto;
 
           .iframe-wrapper {
             overflow: hidden;
@@ -306,10 +300,10 @@ body {
         .modal-body {
           overflow-y: auto;
 
-          &:after {
-            content: '';
-            display: block;
-            height: 30px;
+          &.no-overflow-gradient {
+            + .modal-footer:before {
+              display: none;
+            }
           }
         }
 
@@ -420,7 +414,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         width: 20%;
       }
@@ -453,7 +448,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         max-width: 80%;
       }
@@ -461,7 +457,7 @@ body {
   }
 }
 
-/* Animation classes for dialogs triggered by "react-transition-group" component */
+// Animation classes for dialogs triggered by "react-transition-group" component
 .modal-enter {
   .modal-content {
     display: block;
@@ -498,4 +494,26 @@ body {
   .modal-backdrop {
     opacity: 0;
   }
-}
+}
+
+// modal-body atomic vh classes for iframes with unknown height
+// .modal-body {
+//   &.height-100vh {
+//     height: calc(~"var(--vh, 1vh) * 100 - 190px") !important;
+
+//     @media (max-width: @modal-sm) {
+//       height: calc(~"var(--vh, 1vh) * 100 - 170px") !important;
+//     }
+//   }
+
+//   // no modal-footer version
+//   &:last-child {
+//     &.height-100vh {
+//       height: calc(~"var(--vh, 1vh) * 100 - 120px") !important;
+
+//       @media (max-width: @modal-sm) {
+//         height: calc(~"var(--vh, 1vh) * 100 - 90px") !important;
+//       }
+//     }
+//   }
+// }