UNPKG

@sprig-technologies/sprig-bundled

Version:

npm package for the sprig web sdk with bundled dependencies

658 lines (563 loc) 85.6 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./view-K_OZdlXf.cjs"),W=require("./index-BzAnV7nc.cjs"),E=require("./getAttributedUrl-DCoAixJz.cjs"),re="https://cdn.sprig.com",_={document:void 0,videojs:void 0},we=n=>n+"-loading-spiner",Z="hidden",_e=".m3u8",ve="questionId",ge="ul-video-recorder-camera-off-button",he="ul-recording-in-session",Je=[{type:"link",content:`${re}/dependencies/videojs-record-4.5.0.min.css`},{type:"script",content:`${re}/dependencies/RecordRTC-5.6.2.js`},{type:"script",content:`${re}/dependencies/adapter.8.0.0.min.js`},{type:"script",content:`${re}/dependencies/videojs-record-4.5.0.min.js`},{type:"script",content:`${re}/userleap-web-upchunk-v2.2.2.js`}],Ne=[{type:"link",content:`${re}/dependencies/video-js-7.18.0.min.css`},{type:"script",content:`${re}/dependencies/video-js-7.18.0.min.js`},{type:"style",content:`/* progress control styles */ .video-js .vjs-control { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .video-js .vjs-progress-control .vjs-progress-holder { margin: 0 0px; } .video-js .vjs-progress-control { position: absolute; height: 3px; width: 100%; } /* position and align the buttons and button texts */ .ul-control-panel { bottom: 0; width: 100%; flex-direction: column; background-color: white; height: fit-content; z-index: 2; } .ul-buttons-panel { color: black; display: flex; gap: 20px; height: 50px; justify-content: center; margin: 10px; padding: 2px 14px 0; } .video-js .vjs-volume-panel { height: 30px; width: 40px; } .ul-inactive { opacity: 0.3; cursor: default; pointer-events: none; } /* buttons */ .ul-buttons-panel > .vjs-button { background-color: rgba(0, 0, 0, 0.05); border-radius: 50%; display: flex; height: 3em; justify-content: center; width: 3em; } .vjs-button>.vjs-icon-placeholder:before { align-items: center; display: flex; font-size: unset; line-height: 0.5; justify-content: center; } span.ul-button-text { align-self: flex-end; position: relative; top: 14px; } #ul-camera-button { white-space: nowrap; } .video-js .vjs-volume-control.vjs-volume-horizontal { background-color: #fff; z-index: 1; } .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { background-color: black; } .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active { width: 40px; } .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control { visibility: visible; left: 40px; position: absolute; transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s; } /* play button customization */ .video-js .vjs-play-control { color: black; } .video-js .vjs-play-control .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5363 6.40226L1.93958 10.7006C1.64037 10.8502 1.28833 10.6326 1.28833 10.2981V1.7014C1.28833 1.36688 1.64037 1.14931 1.93958 1.29891L10.5363 5.59727C10.868 5.76311 10.868 6.23642 10.5363 6.40226Z' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* position and style the current timer */ .ul-time-panel { position: absolute; bottom: 80px; left: 10px; height: 22px; color: black; border: 1px solid #e0e0eb; border-radius: 23px; background-color: white; width: fit-content; } .video-js .vjs-current-time, .vjs-no-flex .vjs-current-time { display: flex; align-items: center; text-align: center; } /* remove the dot progress indicator */ .video-js .vjs-play-progress:before, .video-js .vjs-volume-level:before, .vjs-icon-circle:before, .vjs-seek-to-live-control .vjs-icon-placeholder:before { content: none; } .video-js .vjs-mute-control .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='19' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.825.324A.75.75 0 019.25 1v11.667a.75.75 0 01-1.219.585l-3.96-3.169H1a.75.75 0 01-.75-.75v-5a.75.75 0 01.75-.75h3.07L8.031.414a.75.75 0 01.794-.09zM7.75 2.56L4.802 4.92a.75.75 0 01-.469.164H1.75v3.5h2.583a.75.75 0 01.469.165l2.948 2.358V2.56zM14.911.47a.75.75 0 011.061 0 9.084 9.084 0 010 12.844.75.75 0 01-1.06-1.06 7.584 7.584 0 000-10.724.75.75 0 010-1.06zM11.97 3.41a.75.75 0 011.06 0 4.917 4.917 0 010 6.953.75.75 0 11-1.06-1.06 3.417 3.417 0 000-4.832.75.75 0 010-1.06z' fill='%23262136'/%3E%3C/svg%3E"); } .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='19' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 1.167L4.333 4.5H1v5h3.333L8.5 12.833V1.167zM17.17 4.5l-5 5M12.17 4.5l5 5' stroke='%23262136' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 0 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.82489 0.32403C9.08474 0.44892 9.25 0.711703 9.25 1.00001V12.6667C9.25 12.955 9.08474 13.2178 8.82489 13.3427C8.56504 13.4675 8.25661 13.4324 8.03148 13.2523L4.07025 10.0833H1C0.585786 10.0833 0.25 9.74755 0.25 9.33334V4.33334C0.25 3.91913 0.585786 3.58334 1 3.58334H4.07025L8.03148 0.414355C8.25661 0.234253 8.56504 0.19914 8.82489 0.32403ZM7.75 2.56048L4.80185 4.91899C4.66887 5.02538 4.50364 5.08334 4.33333 5.08334H1.75V8.58334H4.33333C4.50364 8.58334 4.66887 8.6413 4.80185 8.74769L7.75 11.1062V2.56048Z' fill='%23262136'/%3E%3C/svg%3E%0A"); } .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 0 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.82489 0.32403C9.08474 0.44892 9.25 0.711703 9.25 1.00001V12.6667C9.25 12.955 9.08474 13.2178 8.82489 13.3427C8.56504 13.4675 8.25661 13.4324 8.03148 13.2523L4.07025 10.0833H1C0.585786 10.0833 0.25 9.74755 0.25 9.33334V4.33334C0.25 3.91913 0.585786 3.58334 1 3.58334H4.07025L8.03148 0.414355C8.25661 0.234253 8.56504 0.19914 8.82489 0.32403ZM7.75 2.56048L4.80185 4.91899C4.66887 5.02538 4.50364 5.08334 4.33333 5.08334H1.75V8.58334H4.33333C4.50364 8.58334 4.66887 8.6413 4.80185 8.74769L7.75 11.1062V2.56048Z' fill='%23262136'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9698 3.41124C12.2627 3.11839 12.7376 3.11846 13.0304 3.4114C13.9521 4.33341 14.4699 5.58376 14.4699 6.88748C14.4699 8.19121 13.9521 9.44156 13.0304 10.3636C12.7376 10.6565 12.2627 10.6566 11.9698 10.3637C11.6768 10.0709 11.6767 9.596 11.9696 9.30307C12.6101 8.66235 12.9699 7.79346 12.9699 6.88748C12.9699 5.98151 12.6101 5.11262 11.9696 4.4719C11.6767 4.17896 11.6768 3.70409 11.9698 3.41124Z' fill='%23262136'/%3E%3C/svg%3E%0A"); } .video-js .vjs-volume-control:hover .vjs-mouse-display { display: none !important; } .video-js .vjs-play-progress { background-color: black; } /* position video player inside the container */ .video-js .vjs-tech { position: static; } .video-js .vjs-time-tooltip { padding: 0.25em 0.75em; align-items: center; color: #333; background: #FCFCFD; border-radius: 99px; text-align: center; border: 1px solid #E0E0EB; display: flex; align-items: center; justify-content: center; top: -25px; font-size: 12px !important; width: 50px !important; } .video-js .vjs-play-progress.vjs-slider-bar .vjs-time-tooltip { visibility: hidden !important; } .video-js .vjs-progress-control .vjs-mouse-display { z-index: 2; } .ul-video-player { width: 100%; display: flex; flex-direction: column; height: auto; border: 1px solid #E6E6E6; background-color: white; box-sizing: border-box; border-radius: 4px; background-clip: border-box; overflow: hidden; } .video-js.vjs-fullscreen:not(.vjs-ios-native-fs) { border: none; } #video-response-player-secondary-video-player { max-width: 200px; margin-right: 20px; background-color: transparent; } #ul-card-video__player_recorder-video-recorder.vjs-fullscreen { display: table; } .video-js div.vjs-progress-control { margin-top: -3px; } .video-js .vjs-progress-control .vjs-slider { background-color: #B2BBBD; } .vjs-record.video-js .vjs-control.vjs-button.vjs-fullscreen-control { position:relative; } .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.82143 2.54004L12.2614 2.54004C12.9242 2.54004 13.4614 3.0773 13.4614 3.74004L13.4614 6.18004' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.17955 13.46L3.73955 13.46C3.07681 13.46 2.53955 12.9227 2.53955 12.26L2.53955 9.81996' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.7772 3.22266L9.36475 6.63516' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.29434 9.70605L2.88184 13.1186' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.583 9.813H5.25a1 1 0 011 1v3.666M5.375 10.688L1 15.061M14.917 5.813H11.25a1 1 0 01-1-1V1.146M15.063 1l-4.376 4.375' stroke='%23262136' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before, .video-js .vjs-icon-replay:before { content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5363 6.40226L1.93958 10.7006C1.64037 10.8502 1.28833 10.6326 1.28833 10.2981V1.7014C1.28833 1.36688 1.64037 1.14931 1.93958 1.29891L10.5363 5.59727C10.868 5.76311 10.868 6.23642 10.5363 6.40226Z' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before, .vjs-icon-pause:before { content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.61885' y='2.06074' width='3.16185' height='11.88' rx='0.9' fill='black' stroke='%23EDEDED' stroke-width='0.6' stroke-linecap='round'/%3E%3Crect x='9.21797' y='2.06074' width='3.16185' height='11.88' rx='0.9' fill='black' stroke='%23EDEDED' stroke-width='0.6' stroke-linecap='round'/%3E%3C/svg%3E%0A"); padding: 2px; } .vjs-error-display { display: none; } .ul-video-player-video { position: relative; top: 0; left: 0; width: 100%; } .ul-video-container { width: 100%; height: auto; left: 0px; top: 0px; background-color: transparent; border-radius: 4px; align-items: start; display: flex; flex-direction: column; /* Inside Auto Layout */ flex: none; order: 0; flex-grow: 0; margin: 10px 0px; position: relative; } .vjs-record button.vjs-device-button.vjs-control { background: rgba(255, 255, 255, 96); width: 100%; height: 100%; left: 0; top: 0; margin: 0; border-radius: 0; line-height: 0.6; padding: 10px; display: flex; align-items: center; flex-direction: column; justify-content: center; z-index: 3; } .vjs-record .vjs-device-button.vjs-control:before { font-size: 14px !important; color: #333; content: "Your browser needs to access your camera and microphone for video recording"; line-height: 135%; } .vjs-record .vjs-device-button.vjs-control.permission-denied:before { font-size: 16px !important; color: #262136; content: "Unable to access your camera and microphone"; } .vjs-record .vjs-device-button.vjs-control:after { display: inline-block; background: #F0F0F5; font-size: 13px; border-radius: 4px; content: "Request Permissions"; padding: 1em 2em; color: #333; margin-top: 20px; } .vjs-record .vjs-device-button.vjs-control.permission-denied:after { display: inline-block; background: white; font-size: 13px; content: "Please go to your browser settings and update permissions to enable recording"; padding: 1em; color: #4B575D; margin: 5px; line-height: 135%; text-align: center; } .vjs-control.vjs-button.ul-video-recorder-delete-button, .vjs-control.vjs-button.ul-video-recorder-toggle-button, .vjs-control.vjs-button.ul-video-recorder-camera-off-button-audio-only, .vjs-control.vjs-button.ul-video-recorder-camera-off-button { cursor: pointer; } .ul-video-recorder-delete-button .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.21234 7.37549V11.1193M2.53931 4.25595H13.4593H2.53931ZM5.57234 4.25595V3.00833C5.57222 2.84433 5.60354 2.68192 5.6645 2.53038C5.72546 2.37884 5.81488 2.24115 5.92762 2.12519C6.04037 2.00922 6.17424 1.91726 6.32158 1.85456C6.46892 1.79185 6.62683 1.75964 6.78628 1.75977H9.21234C9.37179 1.75964 9.5297 1.79185 9.67703 1.85456C9.82437 1.91726 9.95824 2.00922 10.071 2.12519C10.1837 2.24115 10.2732 2.37884 10.3341 2.53038C10.3951 2.68192 10.4264 2.84433 10.4263 3.00833V4.25595H5.57234ZM12.2463 4.25595V12.9912C12.2463 13.3223 12.1184 13.6399 11.8907 13.8741C11.6631 14.1082 11.3543 14.2398 11.0323 14.2398H4.96628C4.64432 14.2398 4.33555 14.1082 4.10789 13.8741C3.88023 13.6399 3.75234 13.3223 3.75234 12.9912V4.25595H12.2463ZM6.78628 7.37549V11.1193V7.37549Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .ul-video-recorder-toggle-button .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0Z' fill='%23D15153'/%3E%3C/svg%3E"); } .ul-video-recorder-toggle-button.ul-recording-in-session .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 10L12 2C12 0.89543 11.1046 -4.85396e-07 10 -4.37114e-07L2 -8.74228e-08C0.89543 -3.91405e-08 -4.85396e-07 0.895431 -4.37114e-07 2L-8.74228e-08 10C-3.91405e-08 11.1046 0.895431 12 2 12L10 12C11.1046 12 12 11.1046 12 10Z' fill='%23D15153'/%3E%3C/svg%3E%0A"); } .ul-video-recorder-camera-off-button .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2645_4654)'%3E%3Cpath d='M15.1491 4.75L10.5991 8L15.1491 11.25V4.75Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.29912 3.4502H2.14912C1.43115 3.4502 0.849121 4.03223 0.849121 4.7502V11.2502C0.849121 11.9682 1.43115 12.5502 2.14912 12.5502H9.29912C10.0171 12.5502 10.5991 11.9682 10.5991 11.2502V4.7502C10.5991 4.03223 10.0171 3.4502 9.29912 3.4502Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2645_4654'%3E%3Crect width='15.6' height='15.6' fill='white' transform='translate(0.199951 0.200195)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); } .ul-video-recorder-camera-off-button-audio-only .vjs-icon-placeholder:before { content: url("data:image/svg+xml,%3Csvg width='22' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M.75 3A2.75 2.75 0 013.5.25h9.081A2.75 2.75 0 0115.331 3v9a2.75 2.75 0 01-2.75 2.75H3.5A2.75 2.75 0 01.75 12V3zM3.5 1.75c-.69 0-1.25.56-1.25 1.25v9c0 .69.56 1.25 1.25 1.25h9.081c.69 0 1.25-.56 1.25-1.25V3c0-.69-.56-1.25-1.25-1.25H3.5z' fill='%23262136'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.53 2.03l-12 12-1.06-1.06 12-12 1.06 1.06zM20.87 1.525a.75.75 0 01.38.652v10.588a.75.75 0 01-1.134.644l-5.92-3.53a.75.75 0 01-.365-.643v-3.53a.75.75 0 01.366-.644l5.919-3.53a.75.75 0 01.754-.007zm-5.539 4.607V8.81l4.419 2.635V3.497l-4.419 2.635z' fill='%23262136'/%3E%3C/svg%3E"); transform: scale(0.75); } .ul-upload-progress-label { padding: 0.15em 0.75em; align-items: center; font-size: 12px; color: #333; background: #FCFCFD; border-radius: 99px; text-align: center; border: 1px solid #E0E0EB; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 75px; left: calc(50% - 65px); width: 130px; z-index: 5; } .ul-upload-progress-label__time { display: inline-flex; margin-left: 0.8em; align-items: center; } .ul-upload-progress-label__time:before { content: ""; display: inline-flex; width: 1px; height: 12px; background-color: #E0E0EB; margin-right: 0.8em; } @keyframes grow { 0% { transform: scale(1); background-color: #EEECFC; } 50% { transform: scale(1.2); background-color: #E1DFF4; } 100% { transform: scale(1); background-color: #EEECFC; } } .ul-audio-recorder-placeholder:before { width: 80px; height: 80px; border-radius: 120px; background-color: #EEECFC; content: ""; position: absolute; left: calc(50% - 40px); top: calc(50% - 40px); animation: 6s infinite grow; transform-origin: 50% 60%; } .ul-audio-recorder-placeholder:after { content: url("data:image/svg+xml,%3Csvg width='98' height='98' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='a' maskUnits='userSpaceOnUse' x='0' y='0' width='98' height='98'%3E%3Ccircle cx='49' cy='49' r='49' fill='%23EDECF8'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Ccircle cx='49' cy='49' r='50' fill='%23645CC2'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.422 81.812c5.405-15.547 20.187-26.706 37.576-26.706 17.39 0 32.172 11.159 37.577 26.707-9.164 10.43-22.601 17.013-37.576 17.013-14.976 0-28.414-6.583-37.577-17.014z' fill='%23fff' fill-opacity='.6'/%3E%3Ccircle cx='49' cy='29' r='17' fill='%23fff' fill-opacity='.7'/%3E%3C/g%3E%3C/svg%3E"); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform: translate(-50%, -50%) scale(0.6); } .ul-audio-recorder-placeholder { min-height: 150px; width: 100%; background-color: #fcfcfd; display: block; position: relative; } .vjs-fullscreen .ul-audio-recorder-placeholder { vertical-align: middle; display: table-cell; } .vjs-fullscreen .ul-control-panel { height: 80px; position: absolute; bottom: 0; left: 0; width: 100%; max-width: 100%; background-color: #F8F8F8; } .vjs-playback-rate .vjs-playback-rate-value { align-items: center; display: flex; font-size: 12px; justify-content: center; } .vjs-playback-rate .vjs-menu { left: -5px; bottom: 3px; } .vjs-menu-button-popup .vjs-menu .vjs-menu-content { background-color: white; border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box; border-radius: 4px; } .vjs-menu li { font-size: 12px; padding: 5px 0; } .vjs-menu li.vjs-selected { color: lightgray; } .vjs-menu li.vjs-menu-item:hover { background-color: rgba(0, 0, 0, 0.05); } .vjs-fullscreen .ul-buttons-panel { top: calc(50% - 30px); position: relative; } .vjs-fullscreen .vjs-record-indicator.vjs-control { bottom: 90px !important; } .vjs-record.video-js div.vjs-control.vjs-record-indicator { padding: 0.3em 0.75em 0.15em 15px; align-items: center; font-size: 12px; color: #333; background: #FCFCFD; border-radius: 99px; text-align: center; border: 1px solid #E0E0EB; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 75px; top: auto; left: calc(50% - 21px); width: 43px; height: 16px; z-index: 4; } .vjs-record.video-js div.vjs-control.vjs-record-indicator:after { content: ""; background-color: #EB5757; width: 6px; height: 6px; border-radius: 8px; animation: none; top: 4px; left: 5px; } .vjs-record.video-js div.vjs-control.vjs-record-indicator:before { position: relative; font-size: 9px; animation: none; opacity: 1; color: #333; top: auto; left: auto; } .ul-video-player-loading { display: inline-block; position: relative; width: 6rem; height: 6rem; } .ul-video-player-loading div { box-sizing: border-box; position: absolute; display: block; width: 80%; height: 80%; margin: 5px; border: 5px solid #666; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #666 transparent transparent transparent; } .first { animation-delay: -0.45s; } .second { animation-delay: -0.3s; } .third { animation-delay: -0.15s; } @keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ul-video-btn { width: 100%; border: 1px solid #E6E6E6; border-radius: 4px; background-color: rgba(0, 0, 0, 0.02); padding: 8px; font-weight: 500; font-size: 15px; } .ul-record-response-btn:before, .ul-record-response-btn:after, .ul-back-question-btn:before, .ul-back-question-btn:after { margin: 0 5px; vertical-align: middle; } .ul-record-response-btn:before { content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2645_4654)'%3E%3Cpath d='M15.1491 4.75L10.5991 8L15.1491 11.25V4.75Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.29912 3.4502H2.14912C1.43115 3.4502 0.849121 4.03223 0.849121 4.7502V11.2502C0.849121 11.9682 1.43115 12.5502 2.14912 12.5502H9.29912C10.0171 12.5502 10.5991 11.9682 10.5991 11.2502V4.7502C10.5991 4.03223 10.0171 3.4502 9.29912 3.4502Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2645_4654'%3E%3Crect width='15.6' height='15.6' fill='white' transform='translate(0.199951 0.200195)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); display: inline-block; transform: translate(0px, 2px); } .ul-record-response-btn:after { content: 'Record your Response'; } .ul-back-question-btn:before { content: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.8757 8.22361L1.1118 14.6056C0.945578 14.6887 0.75 14.5678 0.75 14.382V1.61803C0.75 1.43219 0.945579 1.31131 1.1118 1.39443L13.8757 7.77639C14.06 7.86852 14.06 8.13148 13.8757 8.22361Z' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); display: inline-block; transform: scale(0.85) translate(0, 1px); -moz-transform: scale(0.85) translate(0, 2px); } .ul-back-question-btn:after { content: 'Back to Question'; } .hidden { display: none !important; opacity: 0; visibility: hidden; } .visible { visibility: visible; opacity: 1; animation: fade 0.3s; } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } #ul-recording-countdown-screen { width: 100%; height: 100%; color: black; background-color: rgba(255, 255, 255, 0.8); position: absolute; text-align: center; font-size: 15px; z-index: 1; display: table; } .ul-countdown-text { vertical-align: middle; display: table-cell; transform: translate(0, -25px); } .vjs-fullscreen > #ul-recording-countdown-screen { font-size: 25px; transform: unset; } .vjs-poster { background-size: cover; } `}],Oe="-video-player",Ie="-secondary-video-player",De="-video-recorder";let X,Se;const te=async({event:n,apiBase:o,headers:t,visitorId:r,envId:i,metadata:s})=>{const d=_.document.documentElement;if(!r||!i)return;const u={event:`SDK - ${n}`,visitorId:r,environmentId:i,metadata:{...s||{},screenWidth:window.screen.width,screenHeight:window.screen.height,clientWidth:d.clientWidth,clientHeight:d.clientHeight,location:window.location.href,language:navigator.language}};(await fetch(`${o}/sdk/1/visitors/${r}/analytics`,{method:"POST",cache:"no-cache",headers:t,body:JSON.stringify(u)})).ok||console.warn("[Sprig] (ERR-444) Failed to track analytics",n)},ne=async(n,o,t,r,i,s)=>{te({event:`Video Error ${o}`,apiBase:t,headers:r,visitorId:i,envId:s,metadata:{errorMessage:n.message}});const d=_.document.documentElement,u={screenWidth:window.screen.width,screenHeight:window.screen.height,clientWidth:d.clientWidth,clientHeight:d.clientHeight,location:window.location.href,language:navigator.language},a={action:o,err:{message:n.message,stack:n.stack},meta:u,vid:i,envId:s};(await fetch(`${t}/sdk/1/errors`,{method:"POST",cache:"no-cache",headers:{...r,"userleap-platform":"video_recorder","x-ul-error":window.btoa(`userleap-${Date.now()}-error`)},body:JSON.stringify(a)})).ok||console.warn("[Sprig] (ERR-444) Failed to report error to API",n)},qe=(n,o)=>{if(n.length===0)return o&&o();Promise.all(n.reduce((t,r)=>(t.push(((i,{type:s,content:d})=>new Promise(function(u,a){let v;s==="script"?(v=_.document.createElement("script"),v.src=d):s==="link"?(v=_.document.createElement("link"),v.rel="stylesheet",v.href=d,v.type="text/css"):(v=_.document.createElement("style"),v.innerHTML=d),v.onload=function(){u(d)},v.onerror=function(){a(d)},v.async=!1,v.id=btoa(d),i.appendChild(v)}))(_.document.head,r)),t),[])).then(()=>{_.videojs=_.document.defaultView.videojs,o&&o()}).catch(function(t){console.log(t+" failed to load")})},Re=(n,o,t)=>{if(o==="start"&&(n.style.visibility="visible"),o==="none")n.style.visibility=Z;else if(o==="success")n.style.visibility=Z,n.innerHTML="Upload succeeded!";else{const r=Math.round(parseFloat(t));n.innerHTML=`Uploading <span class="ul-upload-progress-label__time">${r}%</span>`,n.style.background=`linear-gradient(to right, #E0E0EB 0%, #E0E0EB ${r}%, #FCFCFD ${r}%, #FCFCFD 100%)`}},be=(n,o)=>{const t=_.videojs(n.id());return t==null?void 0:t.payload[o]},Ue=(n,o)=>{const t=new(_.videojs.getComponent("Component"))(n);return t.addClass("ul-buttons-panel"),o.map(r=>{t.addChild(r)}),Xe(t),t},Xe=n=>{n.children().forEach(o=>{if(K[o.name_]){const t=de(K[o.name_],`ul-${K[o.name_]}`);o.el_.appendChild(t)}})},de=(n,o="")=>{const t=_.document.createElement("span");return t.className="ul-button-text",t.innerHTML=n,t.id=o,t},Ae=(n,o,t,r,i=!1,s)=>{n.addClass("ul-video-player");const d=new(_.videojs.getComponent("Component"))(n);d.addClass("ul-control-panel"),n.progressBar=d.addChild("ProgressControl"),t&&n.src(t),n.audioPlayerPlaceholder=new(_.videojs.getComponent("Component"))(n),n.audioPlayerPlaceholder.addClass("ul-audio-recorder-placeholder");const u=t&&t.src?rn(t.src):null;!t||!i&&u?(n.audioPlayerPlaceholder.hide(),_.document.getElementById(`${n.id()}_html5_api`).style.height="100%",u&&n.poster(u)):(n.children()[0].classList.add("vjs-hidden"),_.document.getElementById(`${n.id()}_html5_api`).style.height="0px"),n.on("play",()=>{i||!t||u||nn(n),s==null||s.play()}),n.on("pause",()=>{s==null||s.pause()}),n.on("seeked",()=>{s==null||s.currentTime(n.currentTime())}),n.on("ratechange",()=>{s==null||s.playbackRate(n.playbackRate())}),n.addChild(n.audioPlayerPlaceholder,{},1),d.addChild(o),n.addChild(d),r&&r(n)},en=(n,o,t,r,i,s,d,u=!1)=>{Se=Date.now();const a=ce(o,{controls:!1,bigPlayButton:!1,fluid:!1,width:1280,height:720,playsinline:!0,plugins:{record:{audio:!0,video:{mandatory:{minWidth:1280,minHeight:720}},frameWidth:1280,frameHeight:720,maxLength:600,autoMuteDevice:!0}}});if(!a)return;a.payload=t;const{surveyId:v,questionId:y,responseGroupUid:c,visitorId:h,envId:w}=t;let C;const b=l=>{const p=ge,x=ge+"-audio-only";Re(a.uploadProgressLabel,"none"),X&&X.startTime>=Se&&X.abort();const R=_.document.getElementById("ul-camera-button");l?(a.children()[0].classList.add("vjs-hidden"),B.removeClass(p),B.addClass(x),R.innerHTML=K.TurnOnCamera,a.audioPlayerPlaceholder.removeClass("vjs-hidden"),C==null||C.getTracks().forEach(T=>{T.stop()}),window.navigator.mediaDevices.getUserMedia({video:!0,audio:!0}).then(T=>{C=T,T.getVideoTracks().forEach(N=>{N.enabled=!1}),a.record().onDeviceReady(T)}).catch(a.record().onDeviceError.bind(a.record()))):(C==null||C.getVideoTracks().forEach(T=>{T.enabled=!0}),a.children()[0].classList.remove("vjs-hidden"),a.record().getDevice(),B.removeClass(x),B.addClass(p),R.innerHTML=K.TurnOffCamera,a.audioPlayerPlaceholder.addClass("vjs-hidden"))},f=new(_.videojs.getComponent("Button"))(a,{clickHandler:()=>{f.hasClass(Z)||(te({event:"Video Delete Button Clicked",apiBase:r,headers:d,visitorId:h,envId:w,metadata:{questionId:y,responseGroupUid:c,surveyId:v}}),b(a.cameraOff),i(P.DELETE,{}),B.removeClass(Z),f.addClass(Z))}});f.addClass("ul-video-recorder-delete-button"),f.el_.appendChild(de(K.DeleteButton,"ul-delete-button"));const D=_.document.getElementById(o),M=()=>{D.classList.contains("vjs-fullscreen")&&a.cameraOff?D.style.display="table":D.style.display="flex"};M();const B=new(_.videojs.getComponent("Button"))(a,{clickHandler:()=>{a.record().isRecording()||(a.cameraOff=!a.cameraOff,te({event:"Video Camera Button Clicked",apiBase:r,headers:d,visitorId:t.visitorId,envId:t.envId,metadata:{questionId:y,responseGroupUid:c,surveyId:v,cameraOff:a.cameraOff}}),b(a.cameraOff),!f.hasClass(Z)&&f.addClass(Z),i(P.DELETE,{}),M())}});B.addClass(ge),B.el_.appendChild(de(K.TurnOffCamera,"ul-camera-button"));const I=new(_.videojs.getComponent("Button"))(a,{clickHandler:()=>{const l=_.document.getElementById("ul-recorder-toggle");if(a.record().isRecording())a.record().stop(),l&&(l.innerHTML=K.RecordButton),I.removeClass(he),f.removeClass(Z);else{const p=_.document.getElementById("ul-recording-countdown-screen");if(p)p.remove(),l&&(l.innerHTML=K.RecordButton),b(a.cameraOff),i(P.DELETE,{}),B.removeClass(Z),f.addClass(Z),I.removeClass(he),m.show();else{I.addClass(he),m.hide(),B.addClass(Z),f.addClass(Z),l&&(l.innerHTML=K.StopButton);const x=_.document.createElement("div");x.id="ul-recording-countdown-screen",D.insertBefore(x,D.children[1]),x.style.height=`${D.offsetHeight}px`,He(a,3)}}}});I.addClass("ul-video-recorder-toggle-button"),I.el_.appendChild(de(K.RecordButton,"ul-recorder-toggle"));const $=_.document.createElement("p");$.style.visibility="hidden",$.className="ul-upload-progress-label",n.appendChild($),a.uploadProgressLabel=$;const H=Ue(a,[f,B,"PlayToggle",I,"FullscreenToggle"]),m=H.children().find(l=>l.name_==="FullscreenToggle");m.hasClass("vjs-disabled")&&m.hide();const g=H.children().find(l=>l.name_==="PlayToggle");g.hide(),f.addClass(Z),Ae(a,H,s,!1,u),a.on("stopRecord",()=>{I.hide(),g.show(),m.show(),f.removeClass(Z)}),a.on("deviceReady",()=>{I.show(),g.hide(),f.addClass(Z)}),((l,p,x,R,T)=>{const{surveyId:N,responseGroupUid:A,visitorId:O,envId:q}=l.payload;l.on("deviceError",function(){console.warn("device error: ",l.deviceErrorCode),l.deviceErrorCode.message==="Permission denied"?(l.deviceButton.addClass("permission-denied"),x&&x(P.ERROR,{type:P.PERMISSION_DENIED}),te({event:"Video Permission Denied",apiBase:p,headers:T,visitorId:O,envId:q,metadata:{questionId:be(l,ve),responseGroupUid:A,surveyId:N}})):(x&&x(P.ERROR,{type:P.OTHER}),ne(new Error(l.deviceErrorCode.message),"recorderDeviceError",p,T,O,q))}),l.on("error",function(Q,G){ne(G||l.error(),"recorderError",p,T,O,q)}),l.on("startRecord",function(Q,G){R(l.uploadProgressLabel,"none"),te({event:"Video Record Start",apiBase:p,headers:T,visitorId:O,envId:q,metadata:{questionId:be(l,ve),responseGroupUid:A,surveyId:N}})}),l.on("finishRecord",async function(){R(l.uploadProgressLabel,"start",0);const Q=be(l,ve);if(!N){const S="internal error: missing fields in payload";return x&&x(P.ERROR,{type:P.OTHER}),ne(new Error(S),"finishRecord",p,T,O,q),null}l.record().stopDevice();const G=l.cameraOff?P.MEDIA_TYPE_AUDIO:P.MEDIA_TYPE_VIDEO,J=W.v4();te({event:"Video Record Finish",apiBase:p,headers:T,visitorId:O,envId:q,metadata:{mediaRecordingUid:J,questionId:Q,responseGroupUid:A,surveyId:N,mediaType:G}});const ie={surveyId:N,updatedAt:new Date().toISOString(),mediaType:G,mediaRecordingUid:J};Q&&(ie.questionId=Q),A&&(ie.responseGroupUid=A),O&&(ie.visitorId=O);const j=await(async()=>{const S=await fetch(`${p}/2/environments/integrations/upload`,{method:"POST",cache:"no-cache",headers:{"Content-Type":"application/json"},body:JSON.stringify(ie)});if(S.ok){const U=await S.json();return x&&x(P.UPLOAD_STARTED,{[P.UPLOAD_ID]:U.upload.id,[P.MEDIA_TYPE]:G,[P.MEDIA_RECORDING_UID]:J}),U.upload.url}return x&&x(P.ERROR,{type:P.OTHER,response:S}),ne(new Error("failed to get upload response with url"),"finishRecord",p,T,O,q),null})();j&&(X=_.document.defaultView.UpChunk.createUpload({endpoint:j,file:new _.document.defaultView.File([l.recordedData],`recording ${G} ${Date.now()}`),chunkSize:5120}),X.startTime=Date.now(),te({event:"Video Upload Start",apiBase:p,headers:T,visitorId:O,envId:q,metadata:{mediaRecordingUid:J,questionId:Q,responseGroupUid:A,surveyId:N,mediaType:G,url:j}}),X.on("error",S=>{R(l.uploadProgressLabel,"none"),x&&x(P.UPLOAD_FINISHED,{[P.MEDIA_RECORDING_UID]:J}),ne(S,"finishRecord",p,T,O,q)}),X.on("progress",S=>{x&&x(P.UPLOAD_PROGRESS,{[P.MEDIA_RECORDING_UID]:J,[P.UPLOAD_PROGRESS_PCT]:S.detail}),R(l.uploadProgressLabel,"progress",S.detail)}),X.on("success",()=>{R(l.uploadProgressLabel,"success"),x&&x(P.UPLOAD_FINISHED,{[P.MEDIA_RECORDING_UID]:J}),te({event:"Video Upload Success",apiBase:p,headers:T,visitorId:O,envId:q,metadata:{mediaRecordingUid:J,questionId:Q,responseGroupUid:A,surveyId:N,mediaType:G,url:j,elapsedMs:X.startTime&&Date.now()-X.startTime}})}))})})(a,r,i,Re,d);const k=[{name:"microphone"}];!a.cameraOff&&k.push({name:"camera"}),Promise.all(k.map(l=>{var p;return(p=navigator==null?void 0:navigator.permissions)==null?void 0:p.query(l)})).then(l=>{l.reduce((p,x)=>p&x.state==="granted",!0)&&a&&(a.deviceButton&&a.deviceButton.hide(),a.record().getDevice())}).catch(l=>{})},He=(n,o=3)=>{const t=_.document.getElementById("ul-recording-countdown-screen");t&&o===0?(t.remove(),n.record().start()):t&&(t.innerHTML=`<span class='ul-countdown-text'>Recording in... ${o}</span>`,setTimeout(()=>{He(n,o-1)},1e3))},$e=n=>{const o=_.document.createElement("div");return o.className="ul-video-container",o.appendChild((t=>{const r=_.document.createElement("div");return r.className="ul-video-player-loading",r.id=we(t),["first","second","third","fourth"].map(i=>{const s=_.document.createElement("div");s.className=i,r.appendChild(s)}),r})(n)),o},ye=(n,o)=>{const t=_.document.createElement("video");t.id=n,t.className="video-js vjs-default-skin ul-video-player-video";const r=_.document.createElement("p");r.className="vjs-no-js",r.innerHTML="To view this video please enable JavaScript, and consider upgrading to a web browser that";const i=_.document.createElement("a");return i.href="https://videojs.com/html5-video-support/",i.target="_blank",i.innerHTML="supports HTML5 video",r.appendChild(i),t.appendChild(r),o.appendChild(t),o},nn=(n,o)=>{n.children()[0].classList.remove("vjs-hidden"),n.audioPlayerPlaceholder.hide(),_.document.getElementById(`${n.id()}_html5_api`).style.height="100%"},ce=(n,o)=>_.document.getElementById(n)?o?_.videojs(n,o):_.videojs(n):(console.error(`Error in finding player element with ID, ${n}`),null),tn=(n,o,t,r=!1,i="https://api.sprig.com",s=document,d=null,u=null)=>{_.document=s;const a=n+Oe,v=$e(a);return _.document.addEventListener("securitypolicyviolation",y=>{ne(new Error(`Voice & Video feature violates ${y.violatedDirective} web page CSP policies for the question player.`),"playerDeviceError",i,{})}),qe(Ne,()=>{_.document.getElementById(we(a)).remove(),ye(a,v);const y={playsinline:!0,playbackRates:[.5,1,1.5,2],fill:!0};try{const c=n+Ie;ye(c,v);const h=ce(a,y),w=ce(c,{muted:!0,...y});if(!h||!w)return;((f,D,M)=>{f.addClass(`ul${Ie}`);const B=new(_.videojs.getComponent("Component"))(f);D&&f.src(D),f.addChild(B),M&&M(f)})(w,d,u),d||w.addClass(Z);const C=Ue(h,["PlaybackRateMenuButton","PlayToggle","FullscreenToggle"]),b=C.children().find(f=>f.name_==="FullscreenToggle");b.hasClass("vjs-disabled")&&b.hide(),Ae(h,C,o,t,r,w)}catch(c){return void ne(new Error(`Error when creating video player object ${c}`),"playerDeviceError",i,{})}}),v},rn=n=>{if(!n)return null;const o=n.match(/https:\/\/stream.mux.com\/(.*)/);let t=o?o[1]:null;return t.includes(_e)&&(t=t.replace(_e,"")),t?`https://image.mux.com/${t}/thumbnail.jpg?time=0`:null},P={UPLOAD_STARTED:"upload.started",UPLOAD_PROGRESS:"upload.progress",UPLOAD_FINISHED:"upload.finished",DELETE:"delete",ERROR:"error",MEDIA_TYPE:"media.type",PERMISSION_DENIED:"permission_denied",OTHER:"other",UPLOAD_ID:"upload.id",UPLOAD_PROGRESS_PCT:"upload.progress.pct",MEDIA_RECORDING_UID:"media.recording.uid",MEDIA_TYPE_VIDEO:"video",MEDIA_TYPE_AUDIO:"audio"},K={PlaybackRateMenuButton:"Speed",PlayToggle:"Play",FullscreenToggle:"Expand",TurnOnCamera:"Turn on",TurnOffCamera:"Turn off",DeleteButton:"Delete",RecordButton:"Record",StopButton:"Stop",PauseButton:"Pause"},on=({properties:n,surveyVideoUrl:o,questionId:t})=>{const r=`ul-card-video__question_player-q${t}`,{apiURL:i,viewDocument:s}=e.useConfig(d=>({apiURL:d.apiURL,viewDocument:d.viewDocument}));return e.u("div",{id:r,ref:d=>{if(d&&d.children.length===0&&!n.properties.hideRecordedPrompt){const u=tn(r,{src:o,type:"application/x-mpegURL"},void 0,n.properties.mediaType===P.MEDIA_TYPE_AUDIO,i,s);d.appendChild(u)}}})},oe=({isDisabled:n,onClick:o,children:t})=>e.u(E.Button,{className:"ul-card__button-checkmark",disabled:n,onClick:o,type:"button",children:[e.u("svg",{fill:"none",height:"10",viewBox:"0 0 13 10",width:"13",xmlns:"http://www.w3.org/2000/svg",children:e.u("path",{d:"M11.5 1.5L4.5 8.5L1 5",stroke:"#ffffff",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5"})}),t||"Ok"]}),sn=({className:n,next:o,properties:t,questionId:r,type:i})=>{const{useMobileStyling:s,border:d}=e.useConfig(I=>({useMobileStyling:I.useMobileStyling,border:I.border})),[u,a]=e.h(!1),[v,y]=e.h(""),[c,h]=e.h(!1),w=t==null?void 0:t.collectName,C=(t==null?void 0:t.nameLabelText)||"Full Name",b=(t==null?void 0:t.consentText)||"I agree to the stated conditions",f=(t==null?void 0:t.submitButtonText)||"Submit",D=!!v.trim(),M=u&&(!w||D),B=(I,$=!1)=>{I.preventDefault(),I.stopPropagation();let H=null;if(!$){if(!M)return void h(!0);H={submitted:!0},w&&(H.name=v)}o({value:H,questionId:r,type:i},!!$||M)};return e.u("div",{className:e.cc(n,"ul-card__consent-legal","fade-in-transition"),children:e.u(E.MobileEmbedView,{embeddedType:"pdf",properties:t,children:e.u(E.QuestionBodyFooterContainer,{children:[e.u("div",{className:"sprig-stretch",children:[e.u(E.Option,{allowTextEntry:!1,border:d,error:c&&!u,id:"consent",isRadio:!1,isSelected:u,label:b,onUserInputChanged:({selected:I})=>{I!==u&&a(!u)},useMobileStyling:s}),w&&e.u("input",{"aria-label":C,"aria-placeholder":C,className:e.cc(e.getClasses("ul-consent-legal__name-input",s)),"data-gramm":"false",maxLength:250,name:"name",onBlur:I=>{I.currentTarget.style.borderColor=c&&!D?W.ERROR_BORDER_COLOR:W.DEFAULT_BORDER_COLOR},onFocus:I=>{I.currentTarget.style.borderColor=c&&!D?W.ERROR_BORDER_COLOR:d},onInput:I=>{I.preventDefault(),I.stopPropagation(),y(I.currentTarget.value)},placeholder:C,style:c&&!D?{borderColor:W.ERROR_BORDER_COLOR}:{},tabIndex:0,value:v})]}),e.u("div",{className:"ul-card__button-wrapper ul-card-vertical__button-wrapper",children:[e.u(oe,{isDisabled:!M,onClick:I=>B(new SubmitEvent(I.type)),children:e.getButtonText({buttonText:f})}),t.required===!1&&e.u("button",{className:"ul-card-skip__button",onClick:I=>B(new SubmitEvent(I.type),!0),children:e.getSkipButtonText(t)})]})]})})},r)},an=()=>{const{destroy:n,forceBrandedLogo:o}=e.useConfig(t=>({destroy:t.destroy,forceBrandedLogo:t.forceBrandedLogo}));return e.p(()=>{setTimeout(()=>{n(W.APP_ID)},o?4e3:2e3)},[n,o]),e.u("div",{className:"end-of-survey-text",children:"End of survey"})},ln=({activeValue:n,border:o,icon:t,enableCspTrustedTypes:r,isPressed:i,range:s,scaleLabelType:d,selectedValue:u,setSelectedValue:a,setActiveValue:v,setIsPressed:y,useMobileStyling:c,value:h,viewDocument:w})=>{const C=`option-${h}`,b=d==="number",f=d==="star",D=d==="smiley",M=b&&h===n||h===u,[B,I]=(()=>{const m=f&&u!==null&&h<=u;return f&&h<=n||D&&h===n||m||h===n||h===u?[o,i||m||h===u?1:.3]:["",1]})(),$=e.F(()=>{const m={borderColor:M?B:"",fillOpacity:M?"":I,zIndex:M?3:"auto",color:u===h?"#fff":""};return b?{...m,backgroundColor:u===h?B:""}:{...m,color:f||D||u===h?B:""}},[M,B,I,u,h,b,f,D]),H=e.F(()=>W.getHtml((({icon:m,scaleLabelType:g,value:k,selectedValue:l})=>{if(g==="smiley"&&k===l){let p=0;return m.replace(/black/g,()=>++p==1?"black":"white")}return m})({icon:t,scaleLabelType:d,value:h,selectedValue:u}),r),[r,t,d,u,h]);return e.u("button",{"aria-label":b?void 0:String(h),className:(()=>{switch(d){case"star":return e.cc(e.getClasses("likert-star",c),e.getClasses(`likert-star-${h}`,c));case"smiley":return e.cc(e.getClasses("likert-smiley",c),e.getClasses(`likert-smiley-${h}`,c));default:return h===s?e.cc(e.getClasses("likert-number",c),e.getClasses(`likert-number-${h}`,c),e.getClasses("likert-last-option",c)):e.cc(e.getClasses("likert-number",c),e.getClasses(`likert-number-${h}`,c))}})(),dangerouslySetInnerHTML:{__html:H},id:C,onClick:m=>{m.preventDefault(),m.stopPropagation(),a(h)},onKeyDown:m=>{var l,p;const g=w.querySelectorAll(`.likert-${d??"number"}`),k=h-1;m.key==="ArrowRight"?(l=g[k+1])==null||l.focus():m.key==="ArrowLeft"?(p=g[k-1])==null||p.focus():m.key!=="Enter"&&m.key!==" "||(m.preventDefault(),m.stopPropagation(),a(h))},onPointerDown:()=>y(!0),onPointerEnter:()=>v(h),onPointerLeave:()=>{v(-1),y(!1)},style:$,tabIndex:0})},dn=({className:n,labels:o,next:t,properties:r,questionId:i,type:s})=>{const{border:d,useMobileStyling:u,viewDocument:a,enableCspTrustedTypes:v}=e.useConfig(g=>({border:g.border,useMobileStyling:g.useMobileStyling,viewDocument:g.viewDocument,enableCspTrustedTypes:g.enableCspTrustedTypes})),[y,c]=e.h(-1),[h,w]=e.h(!1),[C,b]=e.h(null),f=o&&o.left,D=o&&o.right;let M;const{range:B,scaleLabelType:I,ratingIcons:$}=r;B&&(M=Number(B));const H=M||5,m=g=>{var k,l;switch(I){case"star":return(k=$[0])==null?void 0:k.svg;case"smiley":return(l=$[g])==null?void 0:l.svg;default:return String(g+1)}};return e.u("form",{className:e.cc(n,"ul-card--likert","fade-in-transition"),children:e.u(E.MobileEmbedView,{properties:r,children:[e.u(E.QuestionBodyWrapper,{children:[e.u("div",{"aria-label":`Rating (1 - ${H})`,className:"ul-card--likert__numbers",role:"radiogroup",children:[...Array(H)].map((g,k)=>{const l=k+1;return e.u(ln,{activeValue:y,border:d,enableCspTrustedTypes:v,icon:m(k),isPressed:h,range:H,scaleLabelType:I,selectedValue:C,setActiveValue:c,setIsPressed:w,setSelectedValue:b,useMobileStyling:u,value:l,viewDocument:a},k)})}),e.u("div",{className:"ul-card--likert__labels",children:[e.u("span",{children:f}),e.u("span",{children:D})]})]}),e.u(E.QuestionBodyFooterContainer,{children:e.u(oe,{isDisabled:C===null&&r.required,onClick:()=>t({value:C,questionId:i,type:s},!0),children:e.getButtonText(r)})})]})},i)},cn=({columns:n,onSelect:o,options:t,selectedOptions:r})=>{const i=e._([]),{border:s,useMobileStyling:d}=e.useConfig(h=>({border:h.border,useMobileStyling:h.useMobileStyling})),u=t.findIndex(h=>r[h.id]===null),[a,v]=e.h(u),y=e.T((h,w)=>{o(h,w);const C=a+1,b=t[C];b&&r[b.id]===null&&v(C)},[o,t,r,a]),c=e.T((h,w)=>{const C=a===h;return e.u(e.Accordion,{animate:!0,header:w.label,isOpen:C,onClick:()=>{var b;return v(C&&!((b=window.UserLeap)!=null&&b.isMobileSDK)?-1:h)},ref:b=>{b&&(i.current[h]=b)},showHeaderCheck:r[w.id]!==null,children:e.u("div",{style:{paddingTop:"12px"},children:n.map(b=>e.u(E.Option,{allowTextEntry:!1,ariaLabel:`${w.label}-${b.label}`,border:s,error:!1,id:`${w.id}-${b.value}`,isRadio:!0,isSelected:r[w.id]===b.value,label:b.label,onUserInputChanged:()=>y(w.id,b.value),useMobileStyling:d},b.label))})},w.id)},[s,n,a,y,r,d]);return e.u("div",{children:t.map((h,w)=>c(w,h))})},un=({className:n,next:o,options:t,properties:r,questionId:i,type:s,onSubmitButtonClick:d})=>{const u=r.matrixColumn,a=r.required,v=C=>{C.preventDefault(),C.stopPropagation(),o({value:c,questionId:i,type:s},!0),d&&d()},y=t.reduce((C,b)=>(C[b.id]=null,C),{}),[c,h]=e.h(y);return e.u("form",{className:e.cc(n,"ul-card__matrix","fade-in-transition"),id:"text-form",onSubmit:v,children:e.u(E.MobileEmbedView,{properties:r,children:[e.u(E.QuestionBodyWrapper,{children:e.u(cn,{columns:u,onSelect:(C,b)=>{h(f=>({...f,[C]:b}))},options:t,selectedOptions:c})}),e.u(E.QuestionBodyFooterContainer,{children:e.u(oe,{isDisabled:(w=c,a&&Object.values(w).every(C=>C==null)),onClick:()=>v(new SubmitEvent("submit")),children:e.getButtonText(r)})})]})},i);var w},Fe=({className:n,onSubmit:o,options:t=[],properties:r,questionId:i,type:s,showIndividualSubmit:d=!1,onSubmitButtonClick:u})=>{const{border:a,useMobileStyling:v}=e.useConfig(l=>({border:l.border,useMobileStyling:l.useMobileStyling})),y=t.reduce((l,p)=>(l[p.id]={isSelected:!1},l),{}),[c,h]=e.h(y),w=s==="multiplechoice",C=r.required,b=t.find(l=>{var p;return(p=l.optionProperties)==null?void 0:p.noneOfTheAbove}),f=l=>Object.entries(l).some(([p,x])=>{var N;const R=t.find(A=>`${A.id}`===p),T=x.userText===void 0||x.userText.trim()==="";return((N=R==null?void 0:R.optionProperties)==null?void 0:N.allowsTextEntry)&&T&&x.isSelected}),D=l=>Object.values(l).filter(p=>p.isSelected).length,M=r.minSelect&&r.minSelect>0&&r.maxSelectMode===e.MaxSelectModes.Range&&D(c)<r.minSelect&&(C||D(c)>0),B=l=>f(l)||C&&!D(l)||!(p=>{const{minSelect:x=0,maxSelect:R=1/0,maxSelectMode:T}=r,N=D(p);switch(T){case e.MaxSelectModes.Maximum:return N<=R;case e.MaxSelectModes.Range:return N===0||N>=x;default:return!0}})(l),I=Object.entries(c).some(([l,p])=>{var x,R;return p.isSelected&&((R=(x=t.find(T=>`${T.id}`===l))==null?void 0:x.optionProperties)==null?void 0:R.allowsTextEntry)}),$=d&&(!w||I),H=l=>{k(l.id,l.selected,l.userText,l.noneOfTheAbove)},m=l=>{var p;return(r==null?void 0:r.maxSelectMode)!==e.MaxSelectModes.Unlimited&&D(c)===(r==null?void 0:r.maxSelect)&&!((p=c[l])!=null&&p.isSelected)},g=()=>{o(c,!0),u&&u()},k=(l,p,x,R)=>{const T=Object.assign({},c);if((w||R)&&p)for(const N of Object.values(T))N.isSelected=!1,delete N.userText;else b&&!R&&c[b.id].isSelected&&(T[b.id].isSelected=!1);T[l]={isSelected:p,userText:x},h(T)};return e.u("form",{className:e.cc(n,"ul-card--multiple","fade-in-transition"),id:"text-form",onSubmit:g,children:e.u(E.MobileEmbedView,{properties:r,children:[e.u(E.QuestionBodyWrapper,{children:[r.isDropdown?e.u(E.Select,{disabledOptions:t.filter(l=>m(l.id)),dropdownFooter:M?e.u("div",{className:"ul-card__min-select-counter",style:{marginLeft:"16px"},children:[D(c),"/",r.minSelect]}):void 0,isMultiSelect:!w,multiselectText:r.dropdownMultiselectedText??"choices selected",onChange:l=>{const p={...c};for(const x of t)l.includes(x)?p[x.id].isSelected=!0:p[x.id].isSelected=!1;h(p)},options:t,placeholderText:r.dropdownPlaceholderText??(w?"Select choice":"Select choice(s)"),value:t.filter(l=>c[l.id].isSelected)}):e.u("div",{className:e.cc(e.getClasses("ul-card__choices",v)),role:w?"radiogroup":"group",children:[t.map(({id:l,label:p,value:x,optionProperties:R})=>{var q,Q;const T=`${l}`,{allowsTextEntry:N,noneOfTheAbove:A}={allowsTextEntry:!1,noneOfTheAbove:!1,...R};return e.u(E.Option,{allowTextEntry:N,border:a,disabled:m(T),error:(O=c,f(O)),id:T,isRadio:w,isSelected:!!((q=c[T])!=null&&q.isSelected),label:p,noneOfTheAbove:A,onUserInputChanged:H,promptText:(R==null?void 0:R.otherOptionPlaceholder)||"Please specify",text:(Q=c[l])==null?void 0:Q.userText,useMobileStyling:v,value:x},T);var O}),!!M&&e.u("div",{className:"ul-card__min-select-counter",children:[D(c),"/",r.minSelect]})]}),$&&e.u(E.LongformSubmitButton,{handleSubmit:g,isSubmitDisabled:B(c)})]}),e.u(E.QuestionBodyFooterContainer,{children:e.u(oe,{isDisabled:B(c),onClick:g,children:e.getButtonText(r)})})]})},i)},pn=n=>{const{questionId:o,type:t,next:r,options:i}=n;return e.u(Fe,{...n,onSubmit:(s,d)=>{const u=Object.entries(s).find(([,h])=>h.isSelected)||[void 0,void 0],[a,v]=u,y=i.find(h=>`${h.id}`===a),c=v!=null&&v.userText?{[a]:{userText:v.userText}}:null;r({value:y&&a?{[a]:y.value}:{},secondaryValue:c,questionId:o,type:t},d)}})},mn=n=>{const{questionId:o,type:t,next:r}=n;return e.u(Fe,{...n,onSubmit:(i,s)=>{const d=Object.entries(i).reduce((a,[v,y])=>(a[v]=y.isSelected,a),{}),u=Object.entries(i).reduce((a,[v,y])=>{if(!y.userText)return a;const c=a||{};return c[v]={userText:y.userText},c},null);r({value:d,secondaryValue:u,questionId:o,type:t},s)}})},vn=({className:n,labels:o,properties:t,next:r,questionId:i,type:s})=>{const[d,u]=e.h(null),{border:a,useMobileStyling:v,viewDocument:y}=e.useConfig(w=>({border:w.border,useMobileStyling:w.useMobileStyling,viewDocument:w.viewDocument})),c=o&&o.left,h=o&&o.right;return e.u("form",{className:e.cc(n,"ul-card--nps","fade-in-transition"),children:e.u(E.MobileEmbedView,{properties:t,children:[e.u(E.QuestionBodyWrapper,{children:[e.u("div",{className:"ul-card--nps__numbers",children:[...Array(11)].map((w,C)=>e.u("button",{className:e.cc(e.getClasses("nps-number",v),e.getClasses(`nps-number-${C}`,v)),id:`option-${C}`,onClick:b=>{b.preventDefault(),b.stopPropagation(),u(C)},onKeyDown