@rio-cloud/rio-uikit 0.15.1 → 0.16.0-beta-3

package/lib/style/css/shared/colors.less

@@ -1,3 +1,4 @@
+// Color - Text
 @color-white: #ffffff;
 @color-black: #000000;
 
@@ -10,15 +11,17 @@
 @gray-lighter: #E5EBF0;
 @gray-lightest: #f6f8f9;
 
-// Color - Brand Colors
+// Color - Brand
 @brand-primary: #30b4c0;
 @brand-secondary: #b23672;
+
+// Color - Status
+@brand-info: #4B80A6;
 @brand-success: #5cb85c;
 @brand-warning: #ff8e3c;
 @brand-danger: #d90000;
-@brand-info: #4B80A6;
 
-// Color - Driver Status
+// Color - Driving Status
 @color-status-available: #239b7d;
 @color-status-driving: #3690ae;
 @color-status-resting: #626b72;
@@ -30,14 +33,14 @@
 @color-map-marker-geofence: #5a4876;
 @color-map-marker-route: #3690ae;
 
-// Color - Rating Status
+// Color - Rating
 @color-rating-1: #d90000;
 @color-rating-2: #ff8e3c;
 @color-rating-3: #f8c575;
 @color-rating-4: #5cb85c;
 @color-rating-5: #4b924c;
 
-// Color - Custom highlight colors
+// Color - Highlight
 @color-highlight-darkest: #114146; //darken(@brand-primary, 30%);
 @color-highlight-darker: #1c686e; //darken(@brand-primary, 20%);
 @color-highlight-dark: #268e97; //darken(@brand-primary, 10%);
@@ -47,7 +50,7 @@
 @color-highlight-lightest: #ebf9fa; //lighten(@brand-primary, 48%);
 @color-highlight-decent: #f3fbfc; //lighten(@brand-primary, 50%);
 
-// Color - Coldplay
+// Color - RIO Coldplay
 @color-coldplay-wine:#520D4E;
 @color-coldplay-aubergine: #5a4876;
 @color-coldplay-kashmir:#536E8B;
@@ -58,7 +61,7 @@
 @color-coldplay-primrose: #C7E291;
 @color-coldplay-khaki: #F0EB83;
 
-// Color - Warmup
+// Color - RIO Warmup
 @color-warmup-crimson: #31144F;
 @color-warmup-victoria: #493D6D;
 @color-warmup-cadillac: #7E3E72;
@@ -67,4 +70,4 @@
 @color-warmup-charm: #C9778D;
 @color-warmup-salmon: #F19588;
 @color-warmup-cherokee: #F5BB89;
-@color-warmup-corn: #FDE082;
+@color-warmup-corn: #FDE082;

package/lib/style/css/shared/text.less

@@ -1,12 +1,13 @@
 // Fonts - Font Weights
-@text-thin: 200;
-@text-light: 300;
-@text-normal: 400;
-@text-medium: 600;
-@text-bold: 700;
+@font-thin: 200;
+@font-light: 300;
+@font-normal: 400;
+@font-medium: 600;
+@font-bold: 700;
 
 // Fonts - Font Sizes
 @font-size-10: 10px;
+@font-size-11: 11px;
 @font-size-12: 12px;
 @font-size-14: 14px;
 @font-size-16: 16px;

package/lib/style/css/utils/responsive/grid.less

@@ -1,6 +1,15 @@
-/* Grid - Basics */
-.grid-template-columns-2@{suffix} { grid-template-columns: repeat(2, auto) !important }
-.grid-template-columns-3@{suffix} { grid-template-columns: repeat(3, auto) !important }
-.grid-template-columns-4@{suffix} { grid-template-columns: repeat(4, auto) !important }
-.grid-template-columns-5@{suffix} { grid-template-columns: repeat(5, auto) !important }
-.grid-template-columns-6@{suffix} { grid-template-columns: repeat(6, auto) !important }
+/* Grid */
+.grid-cols-1@{suffix} { grid-template-columns: repeat(1, minmax(0, 1fr)) !important }
+.grid-cols-2@{suffix} { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
+.grid-cols-3@{suffix} { grid-template-columns: repeat(3, minmax(0, 1fr)) !important }
+.grid-cols-4@{suffix} { grid-template-columns: repeat(4, minmax(0, 1fr)) !important }
+.grid-cols-5@{suffix} { grid-template-columns: repeat(5, minmax(0, 1fr)) !important }
+.grid-cols-6@{suffix} { grid-template-columns: repeat(6, minmax(0, 1fr)) !important }
+.grid-cols-7@{suffix} { grid-template-columns: repeat(7, minmax(0, 1fr)) !important }
+.grid-cols-8@{suffix} { grid-template-columns: repeat(8, minmax(0, 1fr)) !important }
+.grid-cols-9@{suffix} { grid-template-columns: repeat(9, minmax(0, 1fr)) !important }
+.grid-cols-10@{suffix} { grid-template-columns: repeat(10, minmax(0, 1fr)) !important }
+.grid-cols-11@{suffix} { grid-template-columns: repeat(11, minmax(0, 1fr)) !important }
+.grid-cols-12@{suffix} { grid-template-columns: repeat(12, minmax(0, 1fr)) !important }
+
+.grid-cols-none@{suffix} { grid-template-columns: none !important }

package/lib/style/css/variables.less

@@ -0,0 +1,179 @@
+// RIO cdn
+@cdnBase: "https://cdn.rio.cloud";
+@fontBase: "fonts";
+
+// Grid
+@grid-columns: 12;
+@grid-gutter-width: 20px;
+@grid-gutter-height: 20px;
+@grid-float-breakpoint: @screen-sm;
+
+// Mapping // must match with the UIKIT demo values
+@import (less) 'mapping/breakpoint-map.less';
+@import (less) 'mapping/color-map.less';
+@import (less) 'mapping/cols-map.less';
+@import (less) 'mapping/numbers-map.less';
+@import (less) 'mapping/positions-map.less';
+@import (less) 'mapping/sizes-map.less';
+@import (less) 'mapping/spacings-map.less';
+
+// Screens
+@import (less) "shared/screens.less";
+
+@screen-xs-min: @screen-xs;
+@screen-xs-max: (@screen-ls - 0.01);
+@screen-ls-min: @screen-ls;
+@screen-ls-max: (@screen-sm - 0.01);
+@screen-sm-min: @screen-sm;
+@screen-sm-max: (@screen-md - 0.01);
+@screen-md-min: @screen-md;
+@screen-md-max: (@screen-lg - 0.01);
+@screen-lg-min: @screen-lg;
+@screen-lg-max: (@screen-xl - 0.01);
+@screen-xl-min: @screen-xl;
+@screen-xl-max: 10000px;
+
+// Container
+@container-ls: @screen-ls - (@grid-gutter-width * 2);
+@container-sm: @screen-sm - (@grid-gutter-width * 2);
+@container-md: @screen-md - (@grid-gutter-width * 2);
+@container-lg: @screen-lg - (@grid-gutter-width * 2);
+@container-xl: @screen-xl - (@grid-gutter-width * 2);
+
+// Container Fluid
+// @container-fluid-xs: px;
+@container-fluid-sm: 980px;
+@container-fluid-md: 1280px;
+@container-fluid-lg: 1440px;
+@container-fluid-xl: 1680px;
+@container-fluid-xxl: 1920px;
+
+// Padding
+@padding-xs-vertical: 1px;
+@padding-xs-horizontal: 5px;
+@padding-sm-vertical: 5px;
+@padding-sm-horizontal: 10px;
+@padding-default-vertical: 6px;
+@padding-default-horizontal: 12px;
+@padding-lg-vertical: 10px;
+@padding-lg-horizontal: 16px;
+
+// Border Radius
+@border-radius-xs: 2px;
+@border-radius-sm: 3px;
+@border-radius-default: 4px;
+@border-radius-lg: 6px;
+@border-radius-xl: 8px;
+@border-radius-round: 1000px;
+
+// Colors
+@import (less) "shared/colors.less";
+
+// Build Warmup and Coldplay Colors?
+@buildColdplayColors: true;
+@buildWarmupColors: true;
+
+// Color - Brand Decent
+@brand-primary-decent: #f4fbfc;
+@brand-secondary-decent: #fbf5f8;
+
+// Color - Status Decent
+@brand-info-decent: #f5f8fb;
+@brand-success-decent: #f6fbf5;
+@brand-warning-decent: #fdf5f0;
+@brand-danger-decent: #fdf3f3;
+
+// Button Sizes
+@btn-size-xs: 22px;
+@btn-size-sm: 30px;
+@btn-size-default: 34px;
+@btn-size-lg: 45px;
+
+// Text
+@import (less) "shared/text.less";
+
+// Text - Sizes
+@font-size-xs: @font-size-12; // only used in buttons and 10px is too small
+@font-size-sm: @font-size-12;
+@font-size-default: @font-size-14;
+@font-size-lg: @font-size-16;
+@font-size-xl: 25px;
+@font-size-xxl: 30px;
+
+// Text - Headlines - Weights
+@headings-font-family: @font-family-base;
+@headings-font-weight: @font-medium;
+@headings-line-height: 1.1;
+@headings-color: inherit;
+
+// Text - Line Heights
+@line-height-xs: 1.5;
+@line-height-sm: 1.5;
+@line-height-default: 1.428571429;
+@line-height-lg: 1.4;
+
+// Text - Font Family
+@font-family-base: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+@font-family-monospace: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
+@font-family-ios: 'SF Text', 'Source Sans Pro', Helvetica, Arial, sans-serif;
+@font-family-android: 'Roboto', 'Source Sans Pro', Helvetica, Arial, sans-serif;
+
+@font-source-sans: true;
+@font-man: false;
+@font-redring: false;
+@font-san-francisco: false;
+@font-roboto: false;
+@font-vw: false;
+
+// Iconfont
+@icon-font-name: "rioglyph";
+
+// Variables
+@text-color: @gray-darkest;
+@link-color: @brand-primary;
+@link-hover-color: darken(@brand-primary, 10%);
+
+// Media Queries
+@screen-xs-min: @screen-xs;
+@screen-sm-min: @screen-sm;
+@screen-md-min: @screen-md;
+@screen-lg-min: @screen-lg;
+
+// ApplicationLayout
+@ApplicationLayoutBodyPadding: 30px;
+@ApplicationLayoutNotResponsiveWidth: 900px;
+
+@ApplicationLayoutBodyHeight: 100vh; // --vh fallback
+@ApplicationLayoutBodyHeightAndViewportFix: ~'calc(var(--vh, 1vh) * 100)';
+
+@ApplicationLayoutBodyHeightWithoutHeader: ~'calc(100vh - @{navbar-height})'; // --vh fallback
+@ApplicationLayoutBodyHeightWithoutHeaderAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - @{navbar-height})';
+
+@ApplicationLayoutBodyHeightWithoutFooter: ~'calc(100vh - (@{footer-height}))'; // --vh fallback
+@ApplicationLayoutBodyHeightWithoutFooterAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - (@{footer-height}))';
+
+@ApplicationLayoutBodyHeightWithoutHeaderWithoutFooter: ~'calc(100vh - (@{navbar-height} + @{footer-height}))'; // --vh fallback
+@ApplicationLayoutBodyHeightWithoutHeaderWithoutFooterAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - (@{navbar-height} + @{footer-height}))';
+
+// ApplicationHeader
+@navbar-height: 50px;
+@navbar-brand-home-icon: url('https://cdn.rio.cloud/svg/common/ico_home.svg');
+@navbar-brand-icon: url('https://cdn.rio.cloud/svg/common/ico_rio_colored.svg');
+@navbar-height-without-border: @navbar-height - 1;
+@navbar-padding-horizontal: @grid-gutter-width;
+@navbar-padding-vertical: 15px;
+
+// ApplicationFooter
+@footer-height: @btn-size-lg + 9px;
+
+// Z-index
+@zindex-tooltip: 1060;
+@zindex-modal: 1050;
+@zindex-modal-background: 1040;
+@zindex-popover: 1010;
+@zindex-navbar: 1000;
+@zindex-dropdown: 1000;
+@zindex-sidebar: 990;
+@zindex-tooltip-onboarding: 990;
+@zindex-map-marker-hover: 801;
+@zindex-map-marker-active: 800;

package/lib/style/fonts/rioglyph/rioglyph.less

@@ -2,7 +2,7 @@
 
 @font-face {
 	font-family: "rioglyph";
-	src: url("rioglyph.woff?ba8bd07543018852f7e4656713b8ca72") format("woff");
+	src: url("rioglyph.woff?14b6680c6235c42a26bca0913e1eea27") format("woff");
     font-weight: normal;
     font-style: normal;
 }
@@ -24,16 +24,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.rioglyph.spinning:before {
-  display: inline-block;
-  animation: spinning 1s linear infinite;
-}
-
-@keyframes spinning {
-  from { transform: rotate(0deg) }
-  to   { transform: rotate(359deg) }
-}
-
 @rioglyph-addressbook: "\f16b";
 .rioglyph-addressbook:before,
 .hover-rioglyph-addressbook:hover:before {
@@ -1104,6 +1094,11 @@
 .hover-rioglyph-share-alt:hover:before {
 	content: "\e982";
 }
+@rioglyph-ship: "\f18d";
+.rioglyph-ship:before,
+.hover-rioglyph-ship:hover:before {
+	content: "\f18d";
+}
 @rioglyph-shopping-cart: "\e98b";
 .rioglyph-shopping-cart:before,
 .hover-rioglyph-shopping-cart:hover:before {

package/lib/types.ts

@@ -505,6 +505,8 @@ export interface DatePickerProps extends DatetimepickerProps {
     clearableInput?: boolean;
     minWidth?: number;
     onChange?: (value: Moment | string) => void;
+    mandatory?: boolean;
+    dateValidation?: (date: Date | string | Moment) => boolean;
 }
 
 export interface DateRangePickerCustomPresets {
@@ -631,14 +633,19 @@ export interface FadeProps {
     onExited?: Function;
 }
 
+type FilePickerRenderProps = {
+    isDragActive: boolean;
+};
+
 export interface FilePickerProps {
-    displayMode?: 'button';
+    displayMode?: 'button' | 'dropzone' | 'full';
     multiple?: boolean; // multi select
     label?: string | React.ReactNode;
     maxSize?: number; // max file size
-    onPick: (files: FileList | null) => any;
+    onPick: (files: FileList | null) => void;
     className?: string;
     accept?: string;
+    children?: ({ isDragActive }: FilePickerRenderProps) => any;
 }
 
 export interface ForbiddenStateProps extends BaseStateProps {}
@@ -696,7 +703,20 @@ export interface Line {
     dataUnit?: string;
     strokeColor: string;
     legendType: 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye';
-    type: 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | Function;
+    type:
+        | 'basis'
+        | 'basisClosed'
+        | 'basisOpen'
+        | 'linear'
+        | 'linearClosed'
+        | 'natural'
+        | 'monotoneX'
+        | 'monotoneY'
+        | 'monotone'
+        | 'step'
+        | 'stepBefore'
+        | 'stepAfter'
+        | Function;
     isAnimationActive?: boolean;
     onClick?: Function;
 }
@@ -723,12 +743,14 @@ export interface ListMenuItems {
     group?: string | React.ReactNode;
     groupNavItem?: React.ReactNode;
     navItems: NavItems[];
+    isSubItem?: boolean;
 }
 
 export interface ListMenuProps {
     menuItems: ListMenuItems[];
     enableFilter?: boolean;
     focusFilter?: boolean;
+    filterKey?: string;
     filterPlaceholder?: string;
     notFoundMessage?: string | React.ReactNode;
     groupClassName?: string;
@@ -1016,7 +1038,7 @@ export interface NotBookedStateProps {
     headline: string | React.ReactNode;
     message: string | React.ReactNode;
     buttons?: object[];
-    features?: Array<React.ReactNode>;
+    features?: React.ReactNode[];
     condensed?: boolean;
     fullWidth?: boolean;
     image?: React.ReactNode;
@@ -1126,7 +1148,7 @@ export interface OnboardingTipProps {
     children?: any;
     width?: tooltipWidth;
     preventOverflow?: boolean;
-    popperConfig?: any;
+    popperConfig?: object;
 }
 
 interface delayProp {
@@ -1286,7 +1308,7 @@ export interface ReleaseNotesProps {
     releaseNotes: {
         [key: string]: {
             date: string;
-            content: Array<HTMLElement | React.ReactElement>;
+            content: (HTMLElement | React.ReactElement)[];
         };
     };
 }
@@ -1300,7 +1322,7 @@ export interface ReleaseNotesDialogProps {
     translatedReleaseNotes: {
         [key: string]: {
             date: string;
-            content: Array<HTMLElement | React.ReactElement>;
+            content: (HTMLElement | React.ReactElement)[];
         };
     };
     currentVersion: string;
@@ -1475,6 +1497,7 @@ export interface SimpleButtonDropdownProps {
     onOpen?: Function;
     onClose?: Function;
     customDropdown?: React.ReactNode;
+    popperConfig?: object;
 }
 
 export interface SimpleClusterLayerProps {
@@ -1603,18 +1626,6 @@ export interface SpinnerProps {
     text?: string;
 }
 
-export interface SingleMapMarkerProps {
-    bearing?: number;
-    name?: string | React.ReactNode;
-    warningCount?: number;
-    exceptionCount?: number;
-    active?: boolean;
-    clickable?: boolean;
-    moving?: boolean;
-    iconNames?: string[];
-    markerColor?: markerColor;
-}
-
 export enum SortDirection {
     ASCENDING = 'asc',
     DESCENDING = 'desc',
@@ -2004,10 +2015,7 @@ export interface TypeCounterProps {
 
 // U --------------------------------------------------------------------------------------------------
 
-export type UseAfterMount = (
-    callback: () => void,
-    deps?: any[]
-) => void;
+export type UseAfterMount = (callback: () => void, deps?: any[]) => void;
 
 export type UseClickOutside<T extends HTMLElement = any> = (
     callback: () => void,
@@ -2025,19 +2033,15 @@ export type UseDebugInfo = (
     componentName: string,
     props: object
 ) => {
-    count: number,
-    changedProps: any,
-    timeSinceLastRender: number,
-    lastRenderTimestamp: number,
+    count: number;
+    changedProps: any;
+    timeSinceLastRender: number;
+    lastRenderTimestamp: number;
 };
 
-export type UseEffectOnce = (
-    callback: () => void
-) => void;
+export type UseEffectOnce = (callback: () => void) => void;
 
-export type UseElementSize = (
-    elementRef: { current: Element; }
-) => [number, number];
+export type UseElementSize = (elementRef: { current: Element }) => [number, number];
 
 export type UseEsc<T extends keyof WindowEventMap> = (callback: (event: WindowEventMap[T]) => any) => void;
 
@@ -2048,10 +2052,32 @@ export type UseEvent<T extends keyof WindowEventMap> = (
     target?: HTMLElement
 ) => void;
 
-export type UseInterval = (
-    callback: () => void,
-    delay?: number
-) => React.MutableRefObject<object>;
+type EventCallback = (this: Document, event_: any) => any;
+type OnChangeEventCallback = (this: Document, event_: any, isOpen: boolean) => any;
+
+type RequestFullscreenOptions = {
+    // string will help to ease type casting
+    navigationUI?: string | 'auto' | 'hide' | 'show';
+};
+
+type FullScreenOptions = {
+    element?: HTMLElement;
+    onChange?: OnChangeEventCallback;
+    onError?: EventCallback;
+    requestFullscreenOptions?: RequestFullscreenOptions;
+};
+
+type FullscreenApi = {
+    requestFullscreen: () => void | ((element?: HTMLElement) => Promise<unknown>);
+    exitFullscreen: () => void | (() => Promise<unknown>);
+    toggleFullscreen: () => void | ((element?: HTMLElement) => Promise<unknown>);
+    isEnabled: boolean;
+    isFullscreen: boolean;
+};
+
+export type UseFullscreen = ({}: FullScreenOptions) => FullscreenApi | undefined;
+
+export type UseInterval = (callback: () => void, delay?: number) => React.MutableRefObject<object>;
 
 export type UseKey<T extends keyof WindowEventMap> = (
     callback: (event: WindowEventMap[T]) => any,
@@ -2064,34 +2090,19 @@ export type UseOnlineStatus = () => boolean;
 export type UseOnScreen = (
     ref: React.MutableRefObject<object>,
     options?: {
-        rootMargins?: string,
-        threshold?: number | number[]
+        rootMargins?: string;
+        threshold?: number | number[];
     }
 ) => boolean;
 
 export type UseRenderCount = () => number;
 
-export type UseStateWithValidation = (
-    validationFn: Function,
-    initialValue: any
-) => [any, Function, boolean];
+export type UseStateWithValidation = (validationFn: Function, initialValue: any) => [any, Function, boolean];
 
-export type UseLocalStorage = (
-    key: string,
-    defaultValue: any
-) => [any, Function, Function];
+export type UseLocalStorage = (key: string, defaultValue: any) => [any, Function, Function];
 
-export type UseSessionStorage = (
-    key: string,
-    defaultValue: any
-) => [any, Function, Function];
+export type UseSessionStorage = (key: string, defaultValue: any) => [any, Function, Function];
 
-export type UseTimeout = (
-    callback: () => void,
-    delay?: number
-) => React.MutableRefObject<object>;
+export type UseTimeout = (callback: () => void, delay?: number) => React.MutableRefObject<object>;
 
-export type UseWindowResize = (
-    callback: () => void,
-    timeout?: number
-) => void;
+export type UseWindowResize = (callback: () => void, timeout?: number) => void;

package/lib/utils/buttonEffect.js

@@ -41,8 +41,10 @@ var isTargetEligibleForEffect = function isTargetEligibleForEffect(target) {
   if (typeof className === 'string' || typeof className === 'array') {
     var isButton = className.includes('btn ');
     var isNotButtonComponent = !className.includes('btn-component');
+    var isNotLinkButton = !className.includes('btn-link');
+    var isNotActionButton = !className.includes('btn-action');
     var isNotDisabled = !className.includes('disabled');
-    return isButton && isNotButtonComponent && isNotDisabled;
+    return isButton && isNotButtonComponent && isNotDisabled && isNotLinkButton && isNotActionButton;
   }
 
   return false;

package/lib/utils/deviceUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isDesktop = exports.inIframe = exports.hasTouch = void 0;
+exports.toggleZoomOnMobile = exports.isMobile = exports.isDesktop = exports.inIframe = exports.hasTouch = void 0;
 
 // As "cssuseragent" is accessing the html dom object directly without checking whether it exists or not, we need to
 // use old shool require() to have a conditional import only when html really exists. This avoids issues when
@@ -38,6 +38,12 @@ var hasTouch = function hasTouch() {
 
 exports.hasTouch = hasTouch;
 
+var isMobile = function isMobile() {
+  return document && document.documentElement.classList.contains('ua-mobile');
+};
+
+exports.isMobile = isMobile;
+
 var isDesktop = function isDesktop() {
   return document && document.documentElement.classList.contains('ua-desktop');
 };
@@ -47,9 +53,40 @@ exports.isDesktop = isDesktop;
 var inIframe = function inIframe() {
   try {
     return window.self !== window.top;
-  } catch (e) {
+  } catch (_) {
     return true;
   }
+}; // Disables the Zoom for the mobile devices.
+// This is not good for accessibility but makes the webpage feel more like a native app.
+// <meta name="viewport" content="user-scalable=0 ..." />
+
+
+exports.inIframe = inIframe;
+var USER_SCALABLE = 'user-scalable=0 maximum-scale=1';
+
+var toggleZoomOnMobile = function toggleZoomOnMobile() {
+  if (!document) {
+    return;
+  }
+
+  var viewportMeta = document.head.querySelector('[name="viewport"]');
+
+  if (!viewportMeta) {
+    return;
+  }
+
+  var isScalable = viewportMeta.content.includes(USER_SCALABLE); // Restrict the zoom for mobile if not yet set
+
+  if (isMobile() && !isScalable) {
+    viewportMeta.content += " ".concat(USER_SCALABLE);
+    return;
+  } // Remove the setting, for non mobile cases
+
+
+  if (!isMobile() && isScalable) {
+    viewportMeta.content = viewportMeta.content.replace(USER_SCALABLE, '').trim();
+    return;
+  }
 };
 
-exports.inIframe = inIframe;
+exports.toggleZoomOnMobile = toggleZoomOnMobile;