{"version":3,"file":"static/js/126.5f6db521.js","sources":["webpack://@jotforminc/portal/./src/components/Toggle/scToggle.js","webpack://@jotforminc/portal/./src/components/Toggle/index.js","webpack://@jotforminc/portal/./src/modules/Builder/components/HomePage/MobileView/components/headers/TabletStatusBar.js","webpack://@jotforminc/portal/./src/modules/Builder/components/HomePage/MobileView/components/devices/Tablet.js","webpack://@jotforminc/portal/./src/modules/Builder/components/Preview.js","webpack://@jotforminc/portal/../../libs/header-components/src/components/SiteNav/SiteNavListItem.js","webpack://@jotforminc/portal/../../libs/header-components/src/components/PreviewToggle/index.js","webpack://@jotforminc/portal/../../libs/header-components/src/components/PreviewMode/PreviewModeWrapper.js","webpack://@jotforminc/portal/../../libs/header-components/src/components/PreviewMode/PreviewModeListItem.js","webpack://@jotforminc/portal/../../libs/header-components/src/components/SiteNav/SiteNavWrapper.js","webpack://@jotforminc/portal/../../libs/header-components/src/components/SubHeader/index.js","webpack://@jotforminc/portal/./src/modules/Builder/styles/scSubHeader.js","webpack://@jotforminc/portal/./src/modules/Builder/components/SubHeader/ScPreviewToggleWrapper.js","webpack://@jotforminc/portal/./src/modules/Builder/components/HomePage/MobileView/components/QuickQr.js","webpack://@jotforminc/portal/./src/modules/Builder/components/SubHeader/SubHeader.js","webpack://@jotforminc/portal/./src/modules/Builder/components/SubHeader/ScMultipleSelectionSubHeader.js","webpack://@jotforminc/portal/./src/modules/Builder/components/SubHeader/MultipleSelectionSubHeader.js","webpack://@jotforminc/portal/./src/modules/Builder/components/SubHeader/index.js"],"sourcesContent":["import Styled, { css } from 'styled-components';\n\nexport const ScTw = Styled.ul`\n font-size: 16px;\n display: inline-flex;\n align-items: stretch;\n user-select: none;\n border-left: 1px solid #d6d7e7;\n border-right: 1px solid #d6d7e7;\n\n li { transition: box-shadow .15s; }\n\n li:focus, li:hover { outline: 0; z-index: 0; }\n li:focus { box-shadow: 0 0 0 1px rgba(69, 115, 227, 0.3); }\n\n li:not([aria-selected=\"true\"]):hover {\n background-color: rgba(227, 229, 245, 0.2);\n }\n\n ${p => (p.isVertical ? css`\n flex-direction: column;\n border-radius: 0 0 2px 2px;\n\n li div { min-width: 44px; min-height: 44px; }\n li + li { margin-top: 1px; }\n li:last-child, li:last-child div { border-radius: 0 0 1px 1px; }\n ` : css`\n li div { min-width: 72px; }\n `)}\n`;\n\nexport const ScTi = Styled.div`\n font-size: .75em;\n line-height: 1;\n display: flex;\n height: 100%;\n flex-direction: column;\n align-items: center;\n color: #f3f3fE;\n transition: background-color .15s, color .15s, box-shadow .15s;\n cursor: pointer;\n\n .icon { margin: auto; padding: .5em 0; }\n svg { display: block; }\n .icon svg path { fill: currentColor; }\n .name { display: block; flex: 0 0 auto; margin: 0 .5em .5em; }\n\n\n ${p => (p.isSelected === true) && css`\n background-color: rgba(227, 229, 245, 0.2);\n `}\n`;\n\nexport const ScTogglePreviewWrapper = Styled.ul`\n font-size: 16px;\n padding: 1px;\n display: inline-flex;\n align-items: stretch;\n user-select: none;\n\n li { transition: box-shadow .15s; }\n\n li:focus, li:hover { outline: 0; z-index: 0; }\n li:focus { box-shadow: 0 0 0 1px rgba(69, 115, 227, 0.3); }\n\n li:not([aria-selected=\"true\"]):hover { color: #4573e3 }\n\n li div { min-width: 38px; }\n li + li { margin-left: 1px; }\n li:first-child, li:first-child div { border-radius: 3px 0 0 3px; }\n li:last-child, li:last-child div { border-radius: 0 3px 3px 0; }\n li:first-child { border-right: 1px solid #979797; }\n`;\n\nexport const ScTogglePreview = Styled.div`\n font-size: .75em;\n line-height: 1;\n display: flex;\n height: 100%;\n align-items: center;\n transition: background-color .15s, color .15s, box-shadow .15s;\n cursor: pointer;\n .icon { margin: auto; padding: .5em 0; }\n svg { display: block; }\n .icon svg path { fill: currentColor; }\n .name { display: block; flex: 0 0 auto; margin: 0 .5em .5em; }\n\n ${p => (p.isSelected === true) && css`\n color: #4573e3;\n `}\n`;\n","import React, { forwardRef } from 'react';\nimport { SelectionGroup as UIKitOptionGroup } from '@jotforminc/uikit';\nimport { bool, elementType } from 'prop-types';\nimport { ScTi, ScTw } from './scToggle';\n\nconst PreviewToggle = ({\n CustomOptionRenderer, CustomContainerRenderer, ...props\n}) => {\n const { isVertical } = props;\n return (\n (\n \n ))}\n OptionRenderer={({ option: { text, value, icon }, isSelected }) => (\n \n {icon}\n {text && {text}}\n \n )}\n {...props}\n />\n );\n};\n\nPreviewToggle.propTypes = {\n CustomOptionRenderer: elementType,\n CustomContainerRenderer: elementType,\n isVertical: bool\n};\nPreviewToggle.defaultProps = {\n CustomOptionRenderer: ScTi,\n CustomContainerRenderer: ScTw,\n isVertical: false\n};\nexport default PreviewToggle;\n","/* eslint-disable max-len */\nimport React from 'react';\n\nconst TabletStatusBar = () => {\n const date = new Date();\n const timeString = `${date.getHours()}:${date\n .getMinutes()\n .toString()\n .padStart(2, '0')}`;\n\n const dateString = date\n .toDateString()\n .slice(0, 10)\n .trimEnd();\n\n return (\n \n \n {timeString}\n \n \n {dateString}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default TabletStatusBar;\n","import React, { useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { object, string } from 'prop-types';\nimport { prepareAppURL } from '../../../../../../PublicApp/utils';\nimport selectors from '../../../../../../../store/selectors';\nimport PublicAppLoading from '../../../../../../../components/PublicAppLoading';\nimport TabletStatusBar from '../headers/TabletStatusBar';\n\nconst Tablet = ({ itemRef, iframeRef, orientation }) => {\n const [loading, setLoading] = useState(true);\n const isAppReady = useSelector(selectors.isAppReadySelector);\n const scope = useSelector(selectors.getScope);\n const [appURL] = useState(prepareAppURL(scope, isAppReady));\n\n const handleOnLoad = () => {\n setLoading(false);\n };\n\n return (\n
\n
\n
\n
\n \n
\n \n
\n \n \n \n
\n {loading && (\n
\n \n
\n )}\n
\n
\n
\n );\n};\n\nexport default Tablet;\n\nTablet.defaultProps = {\n itemRef: null,\n iframeRef: null,\n orientation: 'portrait'\n};\nTablet.propTypes = {\n itemRef: object,\n iframeRef: object,\n orientation: string\n};\n","import React, { useMemo, useRef, useState } from 'react';\nimport { bool } from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Hooks } from '@jotforminc/uikit';\nimport { t } from '@jotforminc/translation';\nimport { capitalizeFirstLetter } from '@jotforminc/utils';\nimport { IconTablet, IconMobile } from '@jotforminc/svg-icons';\nimport { useEventListener } from '@jotforminc/hooks';\nimport SELECTORS from '../../../store/selectors';\n\nimport Toggle from '../../../components/Toggle';\n\nimport { ScContainer } from '../../../styles/scGeneral';\nimport { ScPreviewCont } from '../styles/scPreview';\n\nimport { Loading } from '../../../components/Loading';\nimport { addForceMobileDeviceParam } from '../../PublicApp/utils';\nimport { appPreviewStatusAction, trackEventAction } from '../../../store/actionCreators';\nimport { ScTogglePreview, ScTogglePreviewWrapper } from '../../../components/Toggle/scToggle';\nimport { APP_PREVIEW_STATES } from '../../../constants';\nimport Phone from './HomePage/MobileView/components/devices/Phone';\nimport Tablet from './HomePage/MobileView/components/devices/Tablet';\nimport './HomePage/MobileView/styles/styles.scss';\n/* eslint-disable */\nconst Preview = ({\n isAppPreviewReady\n}) => {\n const dispatch = useDispatch();\n const { scope } = useSelector(SELECTORS.getAppInfoWithDefaults);\n const appPreviewDevice = useSelector(SELECTORS.appPreviewDeviceSelector);\n const areAPIRequestsCompleted = useSelector(SELECTORS.areAPIRequestsCompletedSelector);\n const device = useSelector(SELECTORS.appPreviewDeviceSelector);\n const [orientation, setOrientation] = useState('portrait');\n const forPreviewRef = useRef();\n\n const isAppReady = useSelector(SELECTORS.isAppReadySelector);\n let isLoading = !isAppPreviewReady && !areAPIRequestsCompleted;\n\n\n const prepareAppURL = deviceType => {\n const appURL = new URL(scope, window.location.origin);\n appURL.hash = 'preview';\n if (deviceType === 'phone') {\n addForceMobileDeviceParam(appURL.searchParams); // Mutates the URL\n }\n return isAppReady && appURL.toString();\n };\n\n const [appURL, setAppURL] = useState(prepareAppURL(device));\n\n const handleOnLoad = () => {\n dispatch(appPreviewStatusAction(APP_PREVIEW_STATES.READY));\n };\n\n let cx = `apCont for${capitalizeFirstLetter(device)} is${capitalizeFirstLetter(orientation)}`;\n\n isLoading = false; // !isAppPreviewReady || !areAPIRequestsCompleted;\n cx = `${\n device === 'desktop' ? 'apCont' : 'preview-panel-body'\n } for${capitalizeFirstLetter(device)} is${capitalizeFirstLetter(\n orientation\n )}`;\n\n Hooks.useEffectIgnoreFirst(() => {\n setAppURL(prepareAppURL(device));\n }, [device, isAppReady]);\n\n const renderToggleRenderers = () => ({\n CustomOptionRenderer: ScTogglePreview,\n CustomContainerRenderer: ScTogglePreviewWrapper\n });\n\n const onOrientationChange = option => {\n setOrientation(option);\n dispatch(trackEventAction({ action: 'previewOrientationChanged', target: { to: option, testDevice: device } }));\n };\n\n const app = useMemo(() => {\n return areAPIRequestsCompleted && appURL &&