freemium-survey-components 0.10.51 → 0.10.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +1 -1
- package/lib/index.esm.js +1 -1
- package/package.json +1 -1
package/lib/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=require("react-transition-group"),o=e(require("react-dom"));function s(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}s(".freemium-survey-components .nps-container {\n margin: 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n}\n.freemium-survey-components .nps-container .footer {\n border-top: 1px solid #ebeff3;\n padding-top: 20px;\n display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n color: #666;\n}\n.freemium-survey-components .nps-container .footer:empty {\n display: none;\n}\n.freemium-survey-components .nps-container .nps-scale {\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale .button-container {\n flex-direction: column;\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components .nps-container .nps-scale .help-text-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.freemium-survey-components .nps-container .nps-scale .positive-text {\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .nps-scale .negative-text {\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .nps-scale span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .nps-scale button {\n display: inline-block;\n font-size: 1rem;\n white-space: nowrap;\n vertical-align: middle;\n background: none;\n border: none;\n box-shadow: none;\n cursor: pointer;\n text-align: center;\n font-weight: 400;\n border-radius: 4px;\n margin: 0;\n outline: none;\n margin-left: -1px;\n width: 40px;\n height: 40px;\n transform: scale(1);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover {\n transition: background 0.2s ease-in, border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover, .freemium-survey-components .nps-container .nps-scale button:focus {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .nps-scale.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .nps-scale.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .nps-scale.highlighted button:hover, .freemium-survey-components .nps-container .nps-scale.highlighted button:focus, .freemium-survey-components .nps-container .nps-scale.highlighted button.active {\n background: var(--default-brand-color) !important;\n background: var(--brand-color, var(--default-brand-color)) !important;\n}\n.freemium-survey-components .nps-container .nps-scale .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-weight: 500;\n background-color: #ebeff3;\n border-radius: 4px;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choices {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice {\n background: #ebeff3;\n color: #000;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active, .freemium-survey-components .nps-container .nps-scale.standard .choice:hover {\n background: #e43e3d;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):hover {\n background: #00af50;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(3):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(4):hover {\n background: #f8c43e;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active {\n color: #fff;\n transform: scale(1.2);\n}\n\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale button,\n.card-survey-style .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}");const i=e=>{const{type_info:{linear_scale:{button_style:r="highlighted",button_shape:o="rounded"}={},rating_presets:{start:s="Very unlikely",end:i="Very likely"}={},validation:{min:a},footer_text:u}}=e,c=e=>{switch(e){case e<=6:return"detractor";case e<=8:return"passive";default:return"promoter"}},l=n.useRef(Array.from({length:10+(0===a?1:0)},((e,n)=>n+a)));return t.createElement("div",{className:"nps-container","data-test-input":"nps"},t.createElement("div",{className:`nps-scale ${o} ${r}`},t.createElement("div",{className:"button-container"},t.createElement("div",{className:"choices",role:"radiogroup","aria-required":!0},l.current.map((n=>t.createElement("button",{role:"radio","aria-checked":e.npsValue===n,key:n,"data-test-nps-choice":n,onClick:t=>{e.onChangeHandler(n)},className:`choice ${c(n)} ${e.npsValue===n&&"active"}`},n)))),t.createElement("div",{className:"help-text-container"},t.createElement("span",{className:"negative-text",role:"note"},`${a} - ${s}`),t.createElement("span",{className:"positive-text",role:"note"},`${l.current[l.current.length-1]} - ${i}`)))),t.createElement("div",{className:"footer",role:"note"},u))},a=(e,n)=>(e.defaultProps=n,e);s('.freemium-survey-components .input-container,\n.freemium-survey-components .textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n border-radius: 4px;\n position: relative;\n}\n.freemium-survey-components label.input-label {\n display: inline-block;\n padding-bottom: 8px;\n padding-left: 2px;\n font-size: 0.75rem;\n font-weight: 400;\n}\n.freemium-survey-components label.required::after {\n content: "*";\n position: relative;\n top: 2px;\n font-weight: 500;\n font-size: 0.85rem;\n padding-left: 3px;\n color: #d72d30;\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n transition: border-color 0.2s linear;\n background: #fff;\n}\n.freemium-survey-components .textarea-container .input-basic {\n flex-direction: column;\n align-items: unset;\n}\n.freemium-survey-components .input-basic.error {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error[focus-within] {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic.error:focus-within {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: 0.2s linear;\n}\n.freemium-survey-components .input-basic[focus-within] {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic[focus-within] .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .input-basic:focus-within .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .end-max-length {\n transition: opacity ease 0.2s;\n opacity: 0;\n padding: 0 8px;\n font-size: 0.75rem;\n color: #264966;\n}\n.freemium-survey-components .textarea-container .end-max-length {\n padding: 8px;\n align-self: flex-end;\n}\n.freemium-survey-components span.input-error {\n display: block;\n padding-left: 2px;\n padding-top: 4px;\n font-size: 0.9rem;\n color: #d72d30;\n}\n.freemium-survey-components input[type=text] {\n padding: 6px 12px;\n flex: 1;\n border: unset;\n height: 32px;\n font-size: 1rem;\n /* line-height: ${typography.input.text.lineHeight}; */\n border-radius: 4px;\n}\n.freemium-survey-components input[type=text],\n.freemium-survey-components textarea {\n outline: none;\n border: none;\n}\n.freemium-survey-components input[type=text]::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 12px;\n flex: 1;\n border: unset;\n resize: none;\n font-size: 1rem;\n /* line-height: ${typography.input.text.lineHeight}; */\n border-radius: 4px;\n}\n.freemium-survey-components textarea::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}');const u=["RANGE","NPS","RADIO","DROPDOWN"],c={default:500,compact:500,cozy:400},l={isRequired:!1,showCount:!0,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},m=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{o.current?.focus()}),300+e.autoFocusDelay)}),[e.autoFocusInput]);const{inputStyle:s,style:i,className:a,showCount:u,isErrored:c,startLabel:l,isRequired:m,errorText:d,endLabel:p,maxLength:f=256,onChange:y,autoFocusInput:v,...h}=e;return t.createElement("div",{className:"input-container",style:i},e.label&&t.createElement("label",{className:"input-label "+(m?"required":"")},e.label),t.createElement(t.Fragment,null,l&&t.createElement("div",{className:"start-label"},l),t.createElement("div",{className:`input-basic ${c?"error":""}${a||""}`},t.createElement("input",Object.assign({},h,{type:"text",autoComplete:"off",ref:o,style:s,onChange:e=>{e.target.value?.length>f||y?.(e)}})),u&&f>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${f}`)),p&&t.createElement("div",{className:"end-label"},p)),c&&d&&t.createElement("span",{className:"input-error"},e.errorText))})),d=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{o.current?.focus()}),300+e.autoFocusDelay)}),[e.autoFocusInput]);const{inputStyle:s,style:i,className:a,showCount:u,maxLength:c=1500,startLabel:l,isRequired:m,autoFocusInput:d,onChange:p,...f}=e;return t.createElement(t.Fragment,null,t.createElement("div",{className:"textarea-container",style:i},e.label&&t.createElement("label",{className:"input-label "+(m?"required":"")},e.label),l&&t.createElement("div",{className:"start-label"},l),t.createElement("div",{className:`input-basic ${a||""}`},t.createElement("textarea",Object.assign({},f,{autoComplete:"off",ref:o,style:s,onChange:e=>{e.target.value?.length>c||p?.(e)}})),u&&c&&c>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${c}`)),e.endLabel&&t.createElement("div",{className:"end-label"},e.endLabel)))})),p=a(m,l),f=a(d,l);s('.freemium-survey-components .checkbox-group {\n width: 100%;\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n flex-direction: column;\n white-space: nowrap;\n flex-wrap: wrap;\n}\n.freemium-survey-components .icon-container {\n display: inline-block;\n flex: 0 0 12px;\n width: 12px;\n height: 12px;\n min-width: 12px;\n min-height: 12px;\n color: inherit;\n position: absolute;\n left: 1px;\n top: 2px;\n}\n.freemium-survey-components .tick-icon {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n color: inherit;\n fill: currentColor;\n}\n.freemium-survey-components input[type=checkbox] {\n position: absolute;\n clip: rect(0px 0px 0px 0px);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=checkbox]:focus ~ .checkbox {\n /* box-shadow: ${pseudo.focus} 0px 0px 0px 2px; */\n box-shadow: var(--default-brand-color) 0px 0px 0px 2px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n opacity: 1;\n line-height: 1.2;\n cursor: pointer;\n font-size: 1rem;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components .checkbox-label:hover {\n border-color: #92a2b1;\n}\n.freemium-survey-components .checkbox-label.disabled {\n opacity: 0.5;\n cursor: "not-allowed";\n}\n.freemium-survey-components .checkbox {\n transition: background-color ease-in 0.2s;\n min-width: 14px;\n min-height: 14px;\n min-height: 14px;\n max-height: 14px;\n border-radius: 2px;\n position: relative;\n margin-right: 16px;\n background-color: #fff;\n border: 1px solid;\n text-align: left;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:disabled ~ .checkbox:hover {\n box-shadow: unset;\n border-color: unset;\n}');const y=()=>t.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},t.createElement("path",{d:"M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",fill:"#fff",fillRule:"evenodd"})),v=({values:e=[],othersValue:r="",options:o,name:s,autoFocusGroup:i,autoFocusDelay:a,onChangeHandler:u,saveOthersValue:c})=>{const l=e.includes("__others__"),m=n.useRef(null);return n.useEffect((()=>{i&&setTimeout((()=>{m.current?.focus()}),300+a)}),[i]),t.createElement("div",{className:"checkbox-group"},t.createElement("button",{ref:m,className:"autofocus-button","aria-hidden":!0}),o?.filter((e=>"__others__"!==e.value)).map(((n,r)=>t.createElement(h,{key:n.id,checked:e?.includes(n.value),name:n.value,id:n.id,onChange:(t,r)=>{if(r)u([...e||[],n.value]);else{const t=e.indexOf(n.value);t>-1&&e.splice(t,1),u([...e])}}},n.value))),o?.find((e=>"__others__"===e.value))&&t.createElement(h,{key:"others",checked:l,name:"__others__",id:"__others__",onChange:(n,t)=>{if(t)u([...e,"__others__"]);else{const n=e.findIndex((e=>"__others__"===e));e.splice(n,1),u(e)}}},"Others"),l&&t.createElement(t.Fragment,null,t.createElement(p,{placeholder:"Enter your comment",value:r,onChange:e=>{c(s,e.target.value)},autoFocusDelay:10,label:""})))},h=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),320)}),[]),t.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},t.createElement("input",{ref:r,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,checked:e.checked,onChange:e.readOnly?()=>{}:n=>e.onChange(n,n.target.checked)}),t.createElement("div",{className:"checkbox"},e.checked&&t.createElement("div",{className:"icon-container"},t.createElement(y,null)," ")),t.createElement("div",null,e.children))}),{checked:!1});s('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n width: 100%;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: background-color ease-in 0.2s;\n min-width: 18px;\n max-width: 18px;\n min-height: 18px;\n max-height: 18px;\n border-radius: 50%;\n position: relative;\n margin-right: 16px;\n text-align: left;\n}\n.freemium-survey-components .radio:before {\n left: 3px;\n top: 3px;\n content: "";\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n transition: all ease-in 0.2s;\n background-color: #fff;\n}\n.freemium-survey-components .radio-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n cursor: pointer;\n line-height: 1.2;\n font-size: 1rem;\n font-weight: 400;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n color: #3a4b67;\n}\n.freemium-survey-components input[type=radio] {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=radio]:focus ~ .radio {\n /* box-shadow: ${pseudo.focus} 0px 0px 0px 3px; */\n box-shadow: var(--default-brand-color) 0px 0px 0px 3px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 3px;\n border-color: transparent;\n}\n.freemium-survey-components input[type=radio]:checked ~ .radio:before {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .radio-label:hover {\n border-color: #92a2b1;\n}');const x=({name:e,options:r,value:o,autoFocusGroup:s,autoFocusDelay:i,onChangeHandler:a,saveOthersValue:u,othersOption:c,othersRequired:l,othersValue:m,isFinalQn:d})=>{const f=n.useRef(null);return n.useEffect((()=>{s&&setTimeout((()=>{f.current?.focus()}),300+i)}),[s]),t.createElement("div",{className:"radio-group",role:"radiogroup"},t.createElement("button",{ref:f,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),r?.sort(((e,n)=>"__others__"===e.value?1:"__others__"===n.value?-1:0))?.map(((n,r)=>t.createElement(g,{key:n.value,value:n.value,name:e,onChange:n=>{"__others__"!==n.currentTarget.value&&u(e,null),a(n.currentTarget.value)},checked:o===n.value},"__others__"===n.value?"Others":n.value))),"__others__"===o&&t.createElement(t.Fragment,null,t.createElement(p,{value:m??"",onChange:n=>{"__others__"!==o&&d&&a("__others__"),u(e,n.target.value)},placeholder:"Enter your comment",label:"",autoFocusDelay:10})))},g=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),320)}),[]),t.createElement("label",{className:"radio-label"},t.createElement("input",{ref:r,type:"radio",name:e.name,value:e.value,checked:e.checked,onChange:e.onChange}),t.createElement("div",{className:"radio"}),t.createElement("div",null,e.children))}),{checked:!1,autoFocus:!1});s(".progressbar-container {\n width: 100%;\n height: 4px;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n text-align: left;\n overflow: hidden;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n}\n\n.progressbar-container.widget {\n position: absolute;\n top: 0;\n height: 2px;\n}\n\n.progressbar {\n transition: transform 0.2s linear 200ms;\n transform-origin: left;\n height: 100%;\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}");const b=e=>{const{totalSteps:n,completedSteps:r,widget:o}=e;return t.createElement("div",{className:"progressbar-container "+(o?"widget":"")},t.createElement("div",{className:"progressbar",style:{width:(r>0?100/n:0)+"%",transform:`scaleX(${r})`}}))};s(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n padding: 8px 16px;\n cursor: pointer;\n line-height: 1.5;\n text-align: center;\n font-weight: 600;\n letter-spacing: 0.3px;\n border-radius: 4px;\n white-space: nowrap;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: --default-button-text-color;\n color: var(--button-text-color, --default-button-text-color);\n background: var(--default-brand-color);\n background: var(--brand-color, var(--default-brand-color));\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n border-radius: 4px;\n min-width: 200px;\n max-width: -webkit-fit-content;\n max-width: -moz-fit-content;\n max-width: fit-content;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n transform: translateY(-4px);\n}\n.freemium-survey-components .action-button[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.freemium-survey-components button:focus:not(:active) {\n /* box-shadow: 0 0 0 2px ${pseudo.focus}; */\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .action-button {\n min-width: 120px;\n }\n}\n.widget-survey-components .action-button {\n min-width: 120px;\n}\n\n.freemium-survey-components.mobile-preview .action-button {\n min-width: 120px;\n}");const w=()=>t.createElement(t.Fragment,null,"..."),k=e=>{const{inline:n=!1,children:r,disabled:o,className:s="",htmlType:i,type:a="primary",onClick:u,size:c,overrideStyleClassName:l="",loading:m=!1,...d}=e;return t.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:o,className:`action-button ${s} ${l}`,type:i,onClick:u},d),m?t.createElement(w,null):r)},_=()=>t.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("path",{d:"M7.82585 6.15754C7.98999 6.32147 8.08232 6.54389 8.08252 6.77587L8.08252 7.2192C8.07983 7.45069 7.98788 7.6722 7.82585 7.83754L1.82919 13.8225C1.77496 13.8772 1.71044 13.9206 1.63936 13.9502C1.56827 13.9798 1.49203 13.9951 1.41502 13.9951C1.33801 13.9951 1.26177 13.9798 1.19068 13.9502C1.1196 13.9206 1.05508 13.8772 1.00085 13.8225L0.172521 12.9942C0.118197 12.941 0.0750381 12.8774 0.0455752 12.8073C0.0161124 12.7372 0.000937578 12.6619 0.000937585 12.5859C0.000937592 12.5098 0.0161125 12.4345 0.0455753 12.3644C0.0750381 12.2943 0.118197 12.2308 0.172521 12.1775L5.36419 6.99754L0.172522 1.81754C0.117847 1.76331 0.0744506 1.69879 0.0448352 1.62771C0.0152208 1.55662 -2.75162e-05 1.48038 -2.75094e-05 1.40337C-2.75027e-05 1.32636 0.0152208 1.25012 0.0448353 1.17904C0.0744507 1.10795 0.117847 1.04343 0.172522 0.989205L1.00086 0.172537C1.05508 0.117862 1.1196 0.0744661 1.19069 0.0448507C1.26177 0.0152353 1.33801 -1.20337e-05 1.41502 -1.2027e-05C1.49203 -1.20203e-05 1.56827 0.0152353 1.63936 0.0448507C1.71044 0.0744661 1.77496 0.117862 1.82919 0.172537L7.82585 6.15754Z",fill:"#6B6B6B"})),q=()=>t.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("path",{d:"M0.256667 7.83755C0.0925257 7.67361 0.000204227 7.4512 0 7.21921V6.77588C0.00268801 6.5444 0.0946357 6.32289 0.256667 6.15755L6.25333 0.172549C6.30756 0.117874 6.37208 0.0744776 6.44316 0.0448625C6.51425 0.0152474 6.59049 0 6.6675 0C6.74451 0 6.82075 0.0152474 6.89184 0.0448625C6.96292 0.0744776 7.02744 0.117874 7.08167 0.172549L7.91 1.00088C7.96432 1.05411 8.00748 1.11764 8.03694 1.18776C8.06641 1.25787 8.08158 1.33316 8.08158 1.40922C8.08158 1.48527 8.06641 1.56056 8.03694 1.63067C8.00748 1.70079 7.96432 1.76432 7.91 1.81755L2.71833 6.99755L7.91 12.1775C7.96467 12.2318 8.00807 12.2963 8.03769 12.3674C8.0673 12.4385 8.08255 12.5147 8.08255 12.5917C8.08255 12.6687 8.0673 12.745 8.03769 12.8161C8.00807 12.8871 7.96467 12.9517 7.91 13.0059L7.08167 13.8225C7.02744 13.8772 6.96292 13.9206 6.89184 13.9502C6.82075 13.9799 6.74451 13.9951 6.6675 13.9951C6.59049 13.9951 6.51425 13.9799 6.44316 13.9502C6.37208 13.9206 6.30756 13.8772 6.25333 13.8225L0.256667 7.83755Z",fill:"#6B6B6B"})),E=({question:e,formValues:n,othersMeta:r,onChangeHandler:o,saveOthersValue:s,autoFocus:a,autoFocusDelay:u,isFinalQn:c})=>{switch(e.type_info.question_type){case"RANGE":return t.createElement(i,{type_info:e.type_info,onChangeHandler:o,npsValue:n[e.name]});case"CHECKBOX":case"MULTI_SELECT":return t.createElement(v,{name:e.name,autoFocusGroup:a,values:n[e.name],othersValue:r[e.name],options:e.type_info.choices,onChangeHandler:o,saveOthersValue:s,othersOption:e.type_info.meta?.othersOption,othersRequired:e.type_info.meta?.othersRequired,autoFocusDelay:u});case"RADIO":case"DROPDOWN":return t.createElement(x,{autoFocusGroup:a,autoFocusDelay:u,name:e.name,onChangeHandler:o,saveOthersValue:s,options:e.type_info.choices,value:n[e.name],othersValue:r[e.name],othersOption:e.type_info.meta?.othersOption,othersRequired:e.type_info.meta?.othersRequired,isFinalQn:c});case"INPUT":case"TEXT":return e.type_info?.meta?.readOnly?t.createElement("div",{className:"message-container"},e.type_info?.meta?.value):t.createElement("div",{className:"responsive-text-field"},t.createElement(p,{autoFocusInput:a,autoFocusDelay:u,label:"",isRequired:e.is_required,value:n[e.name]||"",placeholder:e.type_info?.meta?.placeholder??"",onChange:e=>o(e.target.value)}),t.createElement(f,{autoFocusInput:a,autoFocusDelay:u,label:"",isRequired:e.is_required,placeholder:e.type_info?.meta?.placeholder??"",value:n[e.name]||"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return t.createElement(f,{autoFocusInput:a,autoFocusDelay:u,label:"",isRequired:e.is_required,placeholder:e.type_info?.meta?.placeholder??"",value:n[e.name]||"",onChange:e=>o(e.target.value)});default:return console.error(`Question type ${e.type_info.question_type} not found`),null}},C=(e,n,t)=>{if(e){let r={"{{nps.rating}}":t};n&&(r={...r,...n});const o=new RegExp(Object.keys(r).join("|"),"gi");e=e.replace(o,(function(e){return r[e.toLowerCase()]}))}return e},N=e=>n.useMemo((()=>{const n=JSON.parse(JSON.stringify(e)),t=[];return(n.question_details?.questions||[]).forEach((e=>{const n=e.type_info?.meta?.block;n&&(n.question_names||(n.question_names=[e.name]),t.push(n))})),{...n,meta:{...n.meta,blocks:t}}}),[e]);s(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 560px;\n --default-widget-max-height: 400px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-components.card-survey-style {\n padding: 20px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button svg {\n transform: rotate(90deg);\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.card-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n transition: opacity 50ms ease-out;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.card-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.card-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.card-survey-style .fade-enter .question-container {\n opacity: 0;\n transform: translateY(15px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container {\n opacity: 0.05;\n transform: translateY(-15px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter .question-container {\n opacity: 0;\n transform: translateY(-15px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n opacity: 0.05;\n transform: translateY(15px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.card-survey-style .question-footer {\n display: flex;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.card-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.card-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .skip-button {\n font-weight: 500;\n color: #3a4b67;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.card-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.card-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.card-survey-style .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.card-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.card-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.card-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.card-survey-style .message-container:empty {\n display: none;\n}\n\n@media (max-width: 550px) {\n div.freemium-survey-components.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n div.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n div.freemium-survey-components.card-survey-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons button {\n max-width: unset;\n }\n div.freemium-survey-components.card-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .thankyou .text {\n width: auto;\n }\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .responsive-text-field .input-container {\n display: none;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .freemium-survey-step-navigation {\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-buttons {\n flex-direction: column;\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-buttons button {\n max-width: unset;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-button {\n max-width: unset;\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .thankyou .text {\n width: auto;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const S=({thankYouQuestion:e,preview:r,placeholders:o,npsValue:s})=>(n.useEffect((()=>{r||e.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=e.type_info.meta?.redirectUrl}),1e3*e.type_info.meta?.redirectDelay??1e4)}),[]),t.createElement("div",{className:"question-container thankyou"},t.createElement("div",{className:"heading"},"Thank you!"),t.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:C(e.text,o,s)}}),e.type_info.meta?.redirectUrl&&t.createElement("div",{style:{width:"100%"}},t.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",e.type_info.meta?.redirectDelay," seconds.",t.createElement("br",null)),t.createElement("a",{className:"link",href:e.type_info.meta?.redirectUrl},e?.type_info.meta?.redirectUrl)))),B=({currentBlockIndex:e,currentBlockIndexOfBlocksWithQns:n,setCurrentBlockIndexOfBlocksWithQnsDirty:r,blocksWithQns:o,blocks:s,setHorizontalScrollUnits:i,preventQuestionAnimation:a,tempCurrentBlockIndexOfBlocksWithQns:u,setReverse:c,reverse:l})=>t.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},t.createElement("button",{disabled:0==n.current,className:"navigation-button",onClick:()=>{l?(n.current=Math.max(n.current-1,0),e.current=s.findIndex((e=>e.name===o[n.current].name))):(u.current=Math.max(n.current-1,0),e.current=s.findIndex((e=>e.name===o[u.current].name))),a.current=!1,r.current=!0,c(!0),i({})}},t.createElement(q,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=o.length-1,onClick:()=>{a.current=!1,l?(u.current=Math.min(n.current+1,o.length-1),e.current=s.findIndex((e=>e.name===o[u.current].name))):(n.current=Math.min(n.current+1,o.length-1),e.current=s.findIndex((e=>e.name===o[n.current].name))),r.current=!0,c(!1),i({})}},t.createElement(_,null))),I=({widget:e,surveyStyle:n,formValues:r,blocksWithQns:o,blocks:s,thankYouQuestion:i,currentBlockIndexOfBlocksWithQns:a,currentBlockIndexOfBlocks:c,currentEditingBlock:l,isSubmitting:m,isValuesCommitted:d,isCurrentBlockFinal:p,setHorizontalScrollUnits:f,handleFormValues:y,skipBlock:v,setIsSubmitting:h,onSubmit:x,setIsSurveyCompleted:g,preventQuestionAnimation:b,preview:w,closePreview:_,setReverse:q,tempCurrentBlockIndexOfBlocksWithQns:E,question:C,block:N,reverse:S,othersMeta:I,setCurrentBlockIndexOfBlocksWithQnsDirty:O,...R})=>{const z=R.blockIndex??a.current,Q=()=>(!u.includes(C.type_info.question_type)||"DROPDOWN"===C.type_info.question_type&&"__others__"===r[C.name])&&!p(),T=()=>"RANGE"!==C.type_info.question_type&&!N.required&&!p(),D=()=>("DROPDOWN"===C.type_info.question_type&&!N.required&&r[C.name],!1),F=()=>p()&&(e||"standard"!==n),W=("MULTI_SELECT"===l.current.question.type_info.question_type&&r[l.current.question.name]?.includes("__others__")||"DROPDOWN"===l.current.question.type_info.question_type&&"__others__"===r[l.current.question.name])&&(!I[l.current.question.name]||""===I[l.current.question.name]);return t.createElement("div",{className:"question-footer"},!(!e&&"standard"===n||0===z&&void 0===r[C.name]||0===a.current&&!S)&&t.createElement(B,{currentBlockIndex:c,currentBlockIndexOfBlocksWithQns:a,blocksWithQns:o,blocks:s,setHorizontalScrollUnits:f,preventQuestionAnimation:b,setReverse:q,tempCurrentBlockIndexOfBlocksWithQns:E,reverse:S,setCurrentBlockIndexOfBlocksWithQnsDirty:O}),(Q()||D()||T()||F())&&t.createElement("div",{className:"action-buttons"},Q()&&t.createElement(k,{onClick:()=>{O.current=!1,q(!1),y(o[z],null,!0)},disabled:l.current.required&&(!r[l.current.question.name]||Array.isArray(r[l.current.question.name])&&0===r[l.current.question.name].length)||l.current.question.type_info.meta?.othersRequired&&W,className:"next-button"},"Next"),T()&&t.createElement("button",{className:"skip-button",onClick:()=>{O.current=!1,q(!1),v(C)}},"Skip"),F()&&t.createElement("div",{className:"submit"},t.createElement(k,{disabled:(l.current.required||l.current.question.type_info.pivot_question)&&(null==r[l.current.question.name]||0===r[l.current.question.name]?.length)||l.current.question.type_info.meta?.othersRequired&&W||m,onClick:()=>{h(!0),x()}},m?"Submitting":"Submit survey")),D()&&t.createElement("button",{className:"skip-button",onClick:()=>{q(!1),l.current=o[z],c.current=s.findIndex((e=>e.name===o[z].name)),v(C)}},"Clear selection")))},O=({survey:e,surveyStyle:o="standard",placeholders:s,onSubmit:i,widget:a,npsValue:c,preview:l,mobilePreview:m,closePreview:d})=>{const p=e.question_details?.questions||[],f=e.meta?.blocks||[],[y,v]=n.useState(null),[h,x]=n.useState({}),[g,w]=n.useState(!1),[k,_]=n.useState([]),[q,N]=n.useState({}),[B,O]=n.useState(!1),[R,z]=n.useState(null),[Q,T]=n.useState({}),D=n.useRef(null),F=n.useRef(null),W=n.useRef(-1),V=n.useRef(null),L=n.useRef(0),P=n.useRef(0),Y=n.useRef(!1),M=n.useRef(!1),A=n.useRef([]),$=t.useRef(null!=c&&"card"===o),H=n.useRef(null),U=n.useRef(0),[j,G]=n.useState(!1),X=n.useRef();n.useEffect((()=>{f&&(H.current=f.find((e=>"TY"===e.name)),v(f.filter((e=>"TY"!==e.name))))}),[f]),n.useEffect((()=>{Y.current&&(P.current=U.current,N({}))}),[j]),n.useEffect((()=>{if(y)if(F.current=p.find((e=>e.type_info?.pivot_question))??p.find((e=>"RANGE"===e.type_info?.question_type))??p[0],null!=c){W.current=Math.min(F.current.type_info.validation.max,Math.max(F.current.type_info.validation.min,c));const e=p.find((e=>e.name===y[0].question_names[0]));D.current={...y[0],question:e},A.current=[...A.current,{...y[0],question:e}],_(A.current),x({Q_1:W.current})}else if(!D.current&&y.length>0)return D.current=y[0],void J(y[0])}),[y,c]),t.useEffect((()=>{k.length&&(A.current=k,P.current=k.length-1),N({})}),[k]),n.useEffect((()=>{Object.keys(h).length>0&&D.current.question&&(u.includes(D.current.question.type_info.question_type)&&("DROPDOWN"!==D.current.question.type_info.question_type||"__others__"!==h[D.current.question.name])||M.current)&&!K()&&(null!=c&&1==k.length?X.current?(clearTimeout(X.current),X.current=null,ee()):X.current=setTimeout((()=>{ee()}),1500):ee())}),[h]),n.useEffect((()=>{if(null!=h?.[F.current?.name])if(H.current?.is_based_on_rating){const e=F.current?.type_info?.choices[h?.[F.current?.name]-F.current?.type_info?.validation?.min??0]?.dependent_question_names,n=H.current?.question_names.find((n=>e?.includes(n))),t=p.find((e=>e.name===n));z(t)}else{const e=p.find((e=>e.name==H.current?.question_names[0]));z(e)}}),[h?.[F.current?.name]]);const Z=()=>{i({...h,others_meta:Q},(()=>{R?.type_info.meta?.skipThankYouPage?l?setTimeout((()=>{d?.()}),300):window.location.href=R?.type_info.meta?.redirectUrl:w(!0)}))},K=()=>(L.current===y.length-1||"end"===D.current.branchOption)&&P.current===k.length-1,J=e=>{let n={};if(e.is_based_on_rating){const t=F.current?.type_info?.choices[h?.[F.current?.name]-F.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=p.find((e=>e.name===r))}else n=p.find((n=>n.name===e.question_names[0]));D.current.question=n;A.current.find((e=>e.question.name===n.name))?(P.current+=1,N({})):_([...A.current,{...e,question:n}])},ee=()=>{if(K())w(!0);else{if(D.current.nextBlock)L.current=y.findIndex((e=>e.name===D.current.nextBlock));else if(D.current.question.type_info?.meta?.branches){const e=D.current.question.type_info?.meta?.branches,n=h[D.current.question.name];let t;if(t="RANGE"===D.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return Z(),void w(!0);L.current=y.findIndex((e=>e.name===t.nextBlock))}else L.current+=1}else L.current+=1;D.current=y[L.current],J(y[L.current])}},ne=(e,n,t)=>{if($.current=!1,t){if(M.current=!0,null!=h[e.question.name]&&e.name!==k[k.length-1].name){const[t,r]=(e=>{const n=k.findIndex((n=>n.name===e.name)),t=k.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=h[n.question.name],e)),{});return L.current=y.findIndex((n=>n.name===e.name)),[t,r]})(e);x({...r,...null!=n&&{[e.question.name]:n}}),A.current=t}else x({...h,...null!=n&&{[e.question.name]:n}});F?.current?.name==e?.question?.name&&(W.current=n)}else x({...h,...null!=n&&{[e.question.name]:n}})};if(!D.current||!D.current.question)return null;const te=k[Math.min(P.current??k.length-1,k.length-1)];return t.createElement("div",{className:`freemium-survey-components ${m?"mobile-preview":""} ${o}-survey-style`,id:"freemium-survey"},g?null:t.createElement(b,{totalSteps:y.length,completedSteps:L.current+(g?1:0)}),t.createElement(r.SwitchTransition,{mode:"out-in"},t.createElement(r.CSSTransition,{key:P.current+String(g),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:j?"fade-reverse":"fade"},t.createElement("div",{className:"questions"},g?t.createElement(S,{thankYouQuestion:R,preview:l,placeholders:s,npsValue:W.current}):t.createElement("div",{ref:V,id:`${te.question.name}`,className:`question-container ${a||"card"===o}`,"data-test-question-name":te.question.name},t.createElement("div",{className:"question-text",dangerouslySetInnerHTML:{__html:C(te.question.text,s,W.current)},title:`question-${P.current}`,role:"heading","aria-level":1}),t.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:{width:"100%"}},t.createElement(E,{question:te.question,isFinalQn:K(),formValues:h,othersMeta:Q,autoFocus:!0,autoFocusDelay:"standard"===o?350:0,saveOthersValue:(e,n)=>{if(null===n){const n={...Q};delete n[e],T({...n})}else T({...Q,[e]:n})},onChangeHandler:e=>{M.current=!1,L.current=y.findIndex((e=>e.name===te.name)),D.current=te,Y.current=!1,G(!1),ne(te,e,!("DROPDOWN"===te.question.type_info.question_type&&"__others__"===e)&&u.includes(te.question.type_info.question_type)&&!K())}})),t.createElement(I,{question:te.question,block:te,widget:a,surveyStyle:o,formValues:h,othersMeta:Q,blocksWithQns:k,blocks:y,thankYouQuestion:R,currentBlockIndexOfBlocksWithQns:P,reverse:j,setReverse:G,currentBlockIndexOfBlocks:L,currentEditingBlock:D,isSubmitting:B,isValuesCommitted:M,isCurrentBlockFinal:K,setHorizontalScrollUnits:N,handleFormValues:ne,skipBlock:e=>{M.current=!0,delete h[e.name],x({...h})},setIsSubmitting:O,onSubmit:Z,setIsSurveyCompleted:w,preventQuestionAnimation:$,preview:l,closePreview:d,tempCurrentBlockIndexOfBlocksWithQns:U,setCurrentBlockIndexOfBlocksWithQnsDirty:Y}))))))};s(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n}\n\n.freemium-survey-components.widget-survey-components {\n overflow: hidden;\n}\n.freemium-survey-components.widget-survey-components * {\n scrollbar-color: rgba(216, 216, 216, 0.5) transparent !important;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar {\n height: auto;\n height: initial;\n width: 8px;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar-track {\n background: transparent !important;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar-thumb {\n border-radius: 5px;\n background: rgba(216, 216, 216, 0.5) !important;\n}\n.freemium-survey-components.widget-survey-components p {\n margin: 0;\n}\n.freemium-survey-components.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n position: relative;\n display: flex;\n justify-content: row;\n align-items: flex-end;\n height: 100%;\n transition: height 200ms ease;\n}\n.freemium-survey-components.widget-survey-components .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n text-align: center;\n max-height: 100%;\n min-width: 100%;\n max-width: 700px;\n margin: 0 auto;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n padding: 28px;\n padding-top: 0;\n grid-gap: 28px;\n gap: 28px;\n position: absolute;\n overflow: auto;\n}\n.freemium-survey-components.widget-survey-components .question-wrapper {\n width: 100%;\n flex-grow: 1;\n padding: 2px;\n}\n.freemium-survey-components.widget-survey-components .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.widget-survey-components .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.widget-survey-components .question-text p {\n all: inherit;\n}\n.freemium-survey-components.widget-survey-components .nps-container .footer {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-enter {\n opacity: 1;\n transform: translateX(80px);\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-enter-active {\n position: absolute;\n opacity: 1;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-enter-done {\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-exit {\n opacity: 0.05;\n pointer-events: none;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-exit-active {\n pointer-events: none;\n opacity: 0;\n transform: translateX(-80px);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-enter {\n opacity: 0;\n position: absolute;\n transform: translateX(-80px);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-enter-active {\n opacity: 1;\n position: absolute;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit {\n opacity: 0.05;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit-active {\n opacity: 0;\n transform: translateX(80px);\n}\n.freemium-survey-components.widget-survey-components .fade-enter-active,\n.freemium-survey-components.widget-survey-components .fade-reverse-enter-active {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit-active,\n.freemium-survey-components.widget-survey-components .fade-exit-active {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.widget-survey-components .question-footer {\n margin: 0px auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: -webkit-sticky;\n position: sticky;\n bottom: -28px;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.widget-survey-components .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .skip-button {\n font-weight: 500;\n cursor: pointer;\n color: #3a4b67;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.widget-survey-components .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.widget-survey-components .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.widget-survey-components .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.widget-survey-components .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.widget-survey-components .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.widget-survey-components .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.widget-survey-components .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.widget-survey-components .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\n.freemium-survey-components.widget-survey-components .message-container:empty {\n display: none;\n}\n\n.freemium-survey-components.widget-survey-components.compact-style .nps-question-text {\n text-align: center;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-container {\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .compact-footer-layout {\n display: flex;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .compact-footer-layout:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .action-buttons {\n grid-gap: 32px;\n gap: 32px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .submit,\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .action-button {\n max-width: unset;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 8px;\n gap: 8px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .thankyou .text {\n width: 95%;\n}\n\n.freemium-survey-components.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\n.freemium-survey-components.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\n.freemium-survey-components.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\n.freemium-survey-components.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\n.freemium-survey-components.widget-survey-components.default-style .radio-group {\n flex-direction: column;\n flex-wrap: nowrap;\n overflow: auto;\n}\n.freemium-survey-components.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n color: #3a4b67;\n}\n.freemium-survey-components.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.freemium-survey-components.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\n.freemium-survey-components.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.widget-survey-components.cozy-style {\n max-width: 1000px;\n min-width: 600px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n text-align: left;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-question-text {\n text-align: center;\n width: 70%;\n margin: 0 auto;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n color: #3a4b67;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.freemium-survey-components.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const R=({thankYouQuestion:e,preview:n,placeholders:r,npsValue:o,setBlockElementRef:s},i)=>t.createElement(t.Fragment,null,t.createElement("div",{className:"heading"},"Thank you!"),t.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:C(e.text,r,o)}})),z=({currentBlockIndexOfBlocks:e,currentBlockIndexOfBlocksWithQns:n,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i,tempCurrentBlockIndexOfBlocksWithQns:a,setCurrentBlockIndexOfBlocksWithQnsDirty:u,setReverse:c,reverse:l})=>t.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},t.createElement("button",{disabled:0==n.current,className:"navigation-button",onClick:()=>{l?(n.current=Math.max(n.current-1,0),e.current=o.findIndex((e=>e.name===r[n.current].name))):(a.current=Math.max(n.current-1,0),e.current=o.findIndex((e=>e.name===r[a.current].name))),i.current=!1,u.current=!0,c(!0),s({})}},t.createElement(q,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=r.length-1,onClick:()=>{i.current=!1,l?(a.current=Math.min(n.current+1,r.length-1),e.current=o.findIndex((e=>e.name===r[a.current].name))):(n.current=Math.min(n.current+1,r.length-1),e.current=o.findIndex((e=>e.name===r[n.current].name))),u.current=!0,c(!1),s({})}},t.createElement(_,null))),Q=({widget:e,widgetStyle:n,surveyStyle:r,formValues:o,blocksWithQns:s,blocks:i,thankYouQuestion:a,currentBlockIndexOfBlocksWithQns:c,currentBlockIndexOfBlocks:l,currentEditingBlock:m,isSubmitting:d,isValuesCommitted:p,isCurrentBlockFinal:f,setHorizontalScrollUnits:y,handleFormValues:v,skipBlock:h,setIsSubmitting:x,onSubmit:g,setIsSurveyCompleted:b,preventQuestionAnimation:w,preview:_,closePreview:q,setReverse:E,tempCurrentBlockIndexOfBlocksWithQns:C,question:N,block:S,reverse:B,othersMeta:I,setCurrentBlockIndexOfBlocksWithQnsDirty:O,...R})=>{const Q=R.blockIndex??c.current,T=()=>!(!e&&"standard"===r||0===Q&&void 0===o[N.name]||0===c.current&&!B),D=()=>(!u.includes(N.type_info.question_type)||"DROPDOWN"===N.type_info.question_type&&"__others__"===o[N.name])&&!f(),F=()=>"RANGE"!==N.type_info.question_type&&!S.required&&!f(),W=()=>("DROPDOWN"===N.type_info.question_type&&!S.required&&o[N.name],!1),V=()=>f()&&(e||"standard"!==r),L=("MULTI_SELECT"===m.current.question.type_info.question_type&&o[m.current.question.name]?.includes("__others__")||"DROPDOWN"===m.current.question.type_info.question_type&&"__others__"===o[m.current.question.name])&&(!I[m.current.question.name]||""===I[m.current.question.name]),P="compact"===n&&F()&&T(),Y=!P&&T();return t.createElement("div",{className:"question-footer"},P?t.createElement("div",{className:"compact-footer-layout"},T()&&t.createElement(z,{currentBlockIndexOfBlocks:l,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:y,preventQuestionAnimation:w,setReverse:E,tempCurrentBlockIndexOfBlocksWithQns:C,setCurrentBlockIndexOfBlocksWithQnsDirty:O,reverse:B}),F()&&t.createElement("button",{className:"skip-button",onClick:()=>{E(!1),h(N)}},"Skip")):null,(D()||W()||"compact"!==n&&F()||Y||V())&&t.createElement("div",{className:"action-buttons"},Y&&t.createElement("div",{style:{marginRight:"auto"}},t.createElement(z,{currentBlockIndexOfBlocks:l,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:y,preventQuestionAnimation:w,setReverse:E,tempCurrentBlockIndexOfBlocksWithQns:C,setCurrentBlockIndexOfBlocksWithQnsDirty:O,reverse:B})),D()&&t.createElement(k,{onClick:()=>{O.current=!1,E(!1),v(s[Q],null,!0)},disabled:m.current.required&&(!o[m.current.question.name]||Array.isArray(o[m.current.question.name])&&0===o[m.current.question.name].length)||m.current.question.type_info.meta?.othersRequired&&L,className:"next-button"},"Next"),V()&&t.createElement("div",{className:"submit"},t.createElement(k,{disabled:(m.current.required||m.current.question.type_info.pivot_question)&&(null==o[m.current.question.name]||0===o[m.current.question.name]?.length)||m.current.question.type_info.meta?.othersRequired&&L||d,onClick:()=>{g(),x(!0)}},d?"Submitting":"Submit survey")),W()&&t.createElement("button",{className:"skip-button",onClick:()=>{E(!1),m.current=s[Q],l.current=i.findIndex((e=>e.name===s[Q].name)),h(N)}},"Clear selection")))},T=({survey:e,surveyStyle:s="standard",placeholders:i,onSubmit:a,widget:l,npsValue:m,widgetStyle:d,widgetHeaderQuerySelector:p,preview:f,mobilePreview:y,closePreview:v})=>{const h=e.question_details?.questions||[],x=e.meta?.blocks||[],[g,w]=n.useState(null),[k,_]=n.useState({}),[q,N]=n.useState(!1),[S,B]=n.useState([]),[I,O]=n.useState({}),[z,T]=n.useState(!1),[D,F]=n.useState(null),[W,V]=n.useState({}),L=n.useRef(null),P=n.useRef(null),Y=n.useRef(-1),[M,A]=n.useState(null),$=n.useRef(0),H=n.useRef(0),U=n.useRef(!1),j=n.useRef([]),G=n.useRef(!!m&&"card"===s),X=n.useRef(null),Z=n.useRef(0),[K,J]=n.useState(!1),ee=n.useRef(0),ne=n.useRef(!1);n.useEffect((()=>{x&&(X.current=x.find((e=>"TY"===e.name)),w(x.filter((e=>"TY"!==e.name))))}),[x]),n.useEffect((()=>{ne.current&&(H.current=Z.current,O({}))}),[K]),n.useEffect((()=>{if(g)if(P.current=h.find((e=>e.type_info?.pivot_question))??h.find((e=>"RANGE"===e.type_info?.question_type))??h[0],null!=m){Y.current=m;const e=h.find((e=>e.name===g[0].question_names[0]));L.current={...g[0],question:e},j.current=[...j.current,{...g[0],question:e}],B(j.current),_({Q_1:m})}else if(!L.current&&g.length>0)return L.current=g[0],void oe(g[0])}),[g,m]),n.useEffect((()=>{S.length&&(j.current=S,H.current=S.length-1,O({}))}),[S]),n.useEffect((()=>{Object.keys(k).length>0&&L.current.question&&(u.includes(L.current.question.type_info.question_type)&&("DROPDOWN"!==L.current.question.type_info.question_type||"__others__"!==k[L.current.question.name])||U.current)&&!re()&&(m&&1==S.length?setTimeout((()=>{se()}),1500):se())}),[k]),n.useEffect((()=>{if(null!=k?.[P.current?.name])if(X.current?.is_based_on_rating){const e=P.current?.type_info?.choices[k?.[P.current?.name]-P.current?.type_info?.validation?.min??0]?.dependent_question_names,n=X.current?.question_names.find((n=>e?.includes(n))),t=h.find((e=>e.name===n));F(t)}else{const e=h.find((e=>e.name==X.current?.question_names[0]));F(e)}}),[k?.[P.current?.name]]);n.useMemo((()=>{(()=>{if(M){M.style.minHeight="unset",M.style.height="min-content";const e=Math.min(M?.scrollHeight,c[d]);M.style.height=e+"px",M.style.minHeight=e+"px",ee.current=e}})()}),[M]);const te=()=>{a({...k,others_meta:W},(()=>{D?.type_info.meta?.skipThankYouPage?f?setTimeout((()=>{v?.()}),300):window.location.href=D?.type_info.meta?.redirectUrl:N(!0)}))},re=()=>($.current===g.length-1||"end"===L.current.branchOption)&&H.current===S.length-1,oe=e=>{let n={};if(e.is_based_on_rating){const t=P.current?.type_info?.choices[k?.[P.current?.name]-P.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=h.find((e=>e.name===r))}else n=h.find((n=>n.name===e.question_names[0]));L.current.question=n;j.current.find((e=>e.question.name===n.name))?(O({}),H.current+=1):B([...j.current,{...e,question:n}])},se=()=>{if(re())N(!0);else{if(L.current.nextBlock)$.current=g.findIndex((e=>e.name===L.current.nextBlock));else if(L.current.question.type_info?.meta?.branches){const e=L.current.question.type_info?.meta?.branches,n=k[L.current.question.name];let t;if(t="RANGE"===L.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return te(),void N(!0);$.current=g.findIndex((e=>e.name===t.nextBlock))}else $.current+=1}else $.current+=1;L.current=g[$.current],oe(g[$.current])}},ie=(e,n,t)=>{if(G.current=!1,t){if(U.current=!0,null!=k[e.question.name]&&e.name!==S[S.length-1].name){const[t,r]=(e=>{const n=S.findIndex((n=>n.name===e.name)),t=S.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=k[n.question.name],e)),{});return $.current=g.findIndex((n=>n.name===e.name)),[t,r]})(e);_({...r,...null!=n&&{[e.question.name]:n}}),j.current=t}else _({...k,...null!=n&&{[e.question.name]:n}});P?.current?.name==e?.question?.name&&(Y.current=n)}else _({...k,...null!=n&&{[e.question.name]:n}})};if(!L.current||!L.current.question)return null;const ae=S[Math.min(H.current??S.length-1,S.length-1)];return t.createElement("div",{className:`freemium-survey-components ${l?"widget-survey-components":""} ${d}-style ${y?"mobile-preview":""}`,id:"freemium-survey"},p&&!q&&document.querySelector(p)?o.createPortal(t.createElement(b,{totalSteps:g.length,completedSteps:$.current+(q?1:0),widget:!0}),document.querySelector(p)):null,t.createElement("div",{className:"questions",style:{height:ee.current,...1===S.length?{transition:"none"}:{}}},t.createElement(r.TransitionGroup,{component:null},t.createElement(r.CSSTransition,{key:ae.question.name+String(q),unmountOnExit:!0,addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:K?"fade-reverse":"fade"},t.createElement("div",{ref:e=>e?A(e):null,id:`${ae.question.name}`,className:"question-container "+(q?"thankyou":""),"data-test-question-name":ae.question.name},q?t.createElement(R,{thankYouQuestion:D,preview:f,placeholders:i,npsValue:Y.current,setBlockElementRef:A}):t.createElement(t.Fragment,null,t.createElement("div",{className:"question-text "+("RANGE"===ae.question.type_info.question_type?"nps-question-text":""),dangerouslySetInnerHTML:{__html:C(ae.question.text,i,Y.current)},title:`question-${H.current}`,role:"heading","aria-level":1}),t.createElement("div",{className:"question-wrapper",onTransitionEndCapture:e=>e.stopPropagation(),style:{overflowY:c[d]===ee.current?"auto":"visible"}},t.createElement(E,{question:ae.question,isFinalQn:re(),formValues:k,othersMeta:W,autoFocus:!0,autoFocusDelay:"standard"===s?300:0,saveOthersValue:(e,n)=>{if(null===n){const n={...W};delete n[e],V({...n})}else V({...W,[e]:n})},onChangeHandler:e=>{U.current=!1,$.current=g.findIndex((e=>e.name===ae.name)),L.current=ae,ne.current=!1,J(!1),ie(ae,e,!("DROPDOWN"===ae.question.type_info.question_type&&"__others__"===e)&&u.includes(ae.question.type_info.question_type)&&!re())}})),t.createElement(Q,{question:ae.question,block:ae,widget:l,widgetStyle:d,surveyStyle:s,formValues:k,othersMeta:W,blocksWithQns:S,blocks:g,thankYouQuestion:D,currentBlockIndexOfBlocksWithQns:H,reverse:K,setReverse:J,currentBlockIndexOfBlocks:$,currentEditingBlock:L,isSubmitting:z,isValuesCommitted:U,isCurrentBlockFinal:re,setHorizontalScrollUnits:O,handleFormValues:ie,skipBlock:e=>{U.current=!0,delete k[e.name],_({...k})},setIsSubmitting:T,onSubmit:te,setIsSurveyCompleted:N,preventQuestionAnimation:G,preview:f,closePreview:v,tempCurrentBlockIndexOfBlocksWithQns:Z,setCurrentBlockIndexOfBlocksWithQnsDirty:ne})))))))};s(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 480px;\n --default-widget-max-height: 460px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-step-navigation {\n border-radius: 3px;\n border: 1px solid #efefef;\n white-space: nowrap;\n}\n.freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n\n.freemium-survey-components.standard-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 800ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n overflow: auto;\n opacity: 1;\n}\n.freemium-survey-components.standard-survey-style .hide-question-container {\n pointer-events: none;\n opacity: 0;\n}\n.freemium-survey-components.standard-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.standard-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.standard-survey-style .question-footer {\n display: flex;\n justify-content: flex-start;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.standard-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components.standard-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .skip-button {\n font-weight: 500;\n color: #3a4b67;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.standard-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.standard-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .submit {\n max-width: 700px;\n margin: 0 auto;\n text-align: left;\n background: transparent;\n box-shadow: none;\n padding-bottom: 40px;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .fade-enter {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.standard-survey-style .fade-enter-active {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit-active {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.standard-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.standard-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.standard-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .message-container:empty {\n display: none;\n}\n@media (max-width: 550px) {\n .freemium-survey-components.standard-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .action-buttons button {\n max-width: unset;\n }\n .freemium-survey-components.standard-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .thankyou .text {\n width: auto;\n }\n}\n\n@media (max-width: 550px) {\n .freemium-survey-component .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-component .responsive-text-field .textarea-container {\n display: flex;\n }\n}\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const D=({thankYouQuestion:e,preview:r,placeholders:o,npsValue:s})=>(n.useEffect((()=>{r||e.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=e.type_info.meta?.redirectUrl}),1e3*(1e3*e.type_info.meta?.redirectDelay??1e4))}),[]),t.createElement("div",{className:"question-container thankyou"},t.createElement("div",{className:"heading"},"Thank you!"),t.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:C(e.text,o,s)}}),e.type_info.meta?.redirectUrl&&t.createElement("div",{style:{width:"100%"}},t.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",e.type_info.meta?.redirectDelay," seconds.",t.createElement("br",null)),t.createElement("a",{className:"link",href:e.type_info.meta?.redirectUrl},e?.type_info.meta?.redirectUrl)))),F=({currentBlockIndex:e,currentBlockIndexOfBlocksWithQns:n,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i})=>t.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},t.createElement("button",{disabled:0==n.current,className:"navigation-button",onClick:()=>{n.current=Math.max(n.current-1,0),e.current=o.findIndex((e=>e.name===r[n.current].name)),i.current=!1,s(n.current)}},t.createElement(q,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=r.length-1,onClick:()=>{i.current=!1,n.current=Math.min(n.current+1,r.length-1),e.current=o.findIndex((e=>e.name===r[n.current].name)),s(n.current)}},t.createElement(_,null))),W=({widget:e,block:n,surveyStyle:r,formValues:o,othersMeta:s,blocksWithQns:i,blocks:a,thankYouQuestion:c,currentBlockIndexOfBlocksWithQns:l,currentBlockIndexOfBlocks:m,currentEditingBlock:d,isSubmitting:p,isValuesCommitted:f,isCurrentBlockFinal:y,setHorizontalScrollUnits:v,handleFormValues:h,skipBlock:x,setIsSubmitting:g,onSubmit:b,setIsSurveyCompleted:w,preventQuestionAnimation:_,preview:q,closePreview:E,...C})=>{const N=C.blockIndex??l.current,S=C.question??i[N].question,B=()=>S.name===d.current.question.name&&(!u.includes(S.type_info.question_type)||"DROPDOWN"===S.type_info.question_type&&"__others__"===o[S.name])&&!y(),I=()=>"RANGE"!==S.type_info.question_type&&!n.required&&S.name===d.current.question.name&&!y(),O=()=>("DROPDOWN"===S.type_info.question_type&&S.name!==d.current.question.name&&!n.required&&o[S.name],!1),R=()=>y()&&(e||"standard"!==r)&&S.name===d.current.question.name,z=("MULTI_SELECT"===d.current.question.type_info.question_type&&o[d.current.question.name]?.includes("__others__")||"DROPDOWN"===d.current.question.type_info.question_type&&"__others__"===o[d.current.question.name])&&(!s[d.current.question.name]||""===s[d.current.question.name]);return t.createElement("div",{className:"question-footer"},!(!e&&"standard"===r||0===N&&!o[S.name])&&t.createElement(F,{currentBlockIndex:m,currentBlockIndexOfBlocksWithQns:l,blocksWithQns:i,blocks:a,setHorizontalScrollUnits:v,preventQuestionAnimation:_}),(B()||O()||I()||R())&&t.createElement("div",{className:"action-buttons"},B()&&t.createElement(k,{onClick:()=>{h(i[N],null,!0)},disabled:d.current.required&&(!o[d.current.question.name]||Array.isArray(o[d.current.question.name])&&0===o[d.current.question.name].length)||d.current.question.type_info.meta?.othersRequired&&z,className:"next-button"},"Next"),I()&&t.createElement("button",{className:"skip-button",onClick:()=>x(S)},"Skip"),O()&&t.createElement("button",{className:"skip-button",onClick:()=>{d.current=i[N],m.current=a.findIndex((e=>e.name===i[N].name)),x(S)}},"Clear selection"),R()&&t.createElement("div",{className:"submit"},t.createElement(k,{disabled:(d.current.required||d.current.question.type_info.pivot_question)&&(null==o[d.current.question.name]||0===o[d.current.question.name]?.length)||d.current.question.type_info.meta?.othersRequired&&z||p,onClick:()=>{g(!0),b()}},p?"Submitting":"Submit survey"))))},V=({survey:e,surveyStyle:o="standard",placeholders:s,onSubmit:i,widget:a,npsValue:c,preview:l,mobilePreview:m,closePreview:d})=>{const p=e.question_details?.questions||[],f=e.meta?.blocks||[],[y,v]=n.useState(null),[h,x]=n.useState({}),[g,w]=n.useState(!1),[_,q]=n.useState([]),[N,S]=n.useState(0),[B,I]=n.useState(!1),[O,R]=n.useState(null),[z,Q]=n.useState({}),T=n.useRef(null),F=n.useRef(null),V=n.useRef(-1),L=n.useRef(null),P=n.useRef(0),Y=n.useRef(0),M=n.useRef(!1),A=n.useRef([]),$=n.useRef(null!=c&&"card"===o),H=n.useRef(null),U=n.useRef([]);n.useEffect((()=>{f&&(H.current=f.find((e=>"TY"===e.name)),v(f.filter((e=>"TY"!==e.name))))}),[f]),n.useEffect((()=>{if(y)if(F.current=p.find((e=>e.type_info?.pivot_question))??p.find((e=>"RANGE"===e.type_info?.question_type))??p[0],null!=c){V.current=Math.min(F.current.type_info.validation.max,Math.max(F.current.type_info.validation.min,c));const e=p.find((e=>e.name===y[0].question_names[0]));T.current={...y[0],question:e},A.current=[...A.current,{...y[0],question:e}],q(A.current),x({Q_1:V.current})}else if(!T.current&&y.length>0)return T.current=y[0],void X(y[0])}),[y,c]),n.useEffect((()=>{_.length&&(A.current=_,Y.current=_.length-1),a||"standard"!==o?(L.current&&(L.current.style.maxHeight="unset"),U.current[P.current]=L.current?.scrollHeight||U.current[P.current]||0,L.current&&(L.current.style.maxHeight="100%")):L.current?.scrollIntoView({block:"start",behavior:"smooth"}),S(_.length-1)}),[_]),n.useEffect((()=>{Object.keys(h).length>0&&T.current.question&&(u.includes(T.current.question.type_info.question_type)&&("DROPDOWN"!==T.current.question.type_info.question_type||"__others__"!==h[T.current.question.name])||M.current)&&!G()&&Z()}),[h]),n.useEffect((()=>{if(null!=h?.[F.current?.name])if(H.current?.is_based_on_rating){const e=F.current?.type_info?.choices[h?.[F.current?.name]-F.current?.type_info?.validation?.min??0]?.dependent_question_names,n=H.current?.question_names.find((n=>e?.includes(n))),t=p.find((e=>e.name===n));R(t)}else{const e=p.find((e=>e.name==H.current?.question_names[0]));R(e)}}),[h?.[F.current?.name]]);const j=()=>{i({...h,others_meta:z},(()=>{O?.type_info.meta?.skipThankYouPage?l?setTimeout((()=>{d?.()}),300):window.location.href=O?.type_info.meta?.redirectUrl:w(!0)}))},G=()=>P.current===y.length-1||"end"===T.current.branchOption,X=e=>{let n={};if(e.is_based_on_rating){const t=F.current?.type_info?.choices[h?.[F.current?.name]-F.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=p.find((e=>e.name===r))}else n=p.find((n=>n.name===e.question_names[0]));T.current.question=n;A.current.find((e=>e.question.name===n.name))?(S(N+1),Y.current+=1):q([...A.current,{...e,question:n}])},Z=()=>{if(G())w(!0);else{if(T.current.nextBlock)P.current=y.findIndex((e=>e.name===T.current.nextBlock));else if(T.current.question.type_info?.meta?.branches){const e=T.current.question.type_info?.meta?.branches,n=h[T.current.question.name];let t;if(t="RANGE"===T.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return j(),void w(!0);P.current=y.findIndex((e=>e.name===t.nextBlock))}else P.current+=1}else P.current+=1;T.current=y[P.current],X(y[P.current])}},K=e=>{M.current=!0,delete h[e.name],x({...h})},J=(e,n,t)=>{if($.current=!1,t){if(M.current=!0,null!=h[e.question.name]&&e.name!==_[_.length-1].name){const[t,r]=(e=>{const n=_.findIndex((n=>n.name===e.name)),t=_.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=h[n.question.name],e)),{});return P.current=y.findIndex((n=>n.name===e.name)),[t,r]})(e);x({...r,...null!=n&&{[e.question.name]:n}}),A.current=t}else x({...h,...null!=n&&{[e.question.name]:n}});F?.current?.name==e?.question?.name&&(V.current=n)}else x({...h,...null!=n&&{[e.question.name]:n}})},ee=(e,n)=>{const t=_.find((n=>n.question.name===e));if(P.current=y.findIndex((e=>e.name===t.name)),T.current=t,null===n){const n={...z};delete n[e],Q({...n})}else Q({...z,[e]:n})};if(!T.current||!T.current.question)return null;const ne=("MULTI_SELECT"===T.current.question.type_info.question_type&&h[T.current.question.name]?.includes("__others__")||"DROPDOWN"===T.current.question.type_info.question_type&&"__others__"===h[T.current.question.name])&&(!z[T.current.question.name]||""===z[T.current.question.name]);return t.createElement("div",{className:`freemium-survey-components ${a?"widget-survey-components":""} ${m?"mobile-preview":""} ${o}-survey-style`,id:"freemium-survey"},g?null:t.createElement(b,{totalSteps:y.length,completedSteps:P.current}),t.createElement(r.SwitchTransition,{mode:"out-in"},t.createElement(r.CSSTransition,{key:String(g),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:a?"":"fade"},t.createElement("div",null,g?t.createElement(D,{thankYouQuestion:O,preview:l,placeholders:s,npsValue:V.current}):t.createElement(t.Fragment,null,t.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:a||"card"===o?{transform:`translateX(calc(-${N} * 100%))`,height:`${U.current[P.current]}px`,transition:$.current||_?.length<=1?"none":"all 300ms ease-out 0ms"}:{},className:"questions"},_.map(((e,n)=>t.createElement("div",{key:e.question.name,ref:L,className:"question-container "+(!a&&"card"!==o||Y.current===n?"":"hide-question-container")},t.createElement("div",{className:"question-text "+(0===n?"nps":""),dangerouslySetInnerHTML:{__html:C(e.question.text,s,V.current)},title:`question-${n}`,role:"heading","aria-level":1}),t.createElement("button",{disabled:!a&&"standard"===o,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),t.createElement(E,{question:e.question,isFinalQn:G(),formValues:h,othersMeta:z,autoFocus:Y.current===n,autoFocusDelay:"standard"===o?350:20,saveOthersValue:ee,onChangeHandler:n=>{M.current=!1,P.current=y.findIndex((n=>n.name===e.name)),T.current=e,J(e,n,!("DROPDOWN"===e.question.type_info.question_type&&"__others__"===n)&&u.includes(e.question.type_info.question_type)&&!G())}}),t.createElement("button",{disabled:!a&&"standard"===o,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),t.createElement(W,{question:e.question,block:e,blockIndex:n,widget:a,surveyStyle:o,formValues:h,othersMeta:z,blocksWithQns:_,blocks:y,thankYouQuestion:O,currentBlockIndexOfBlocksWithQns:Y,currentBlockIndexOfBlocks:P,currentEditingBlock:T,isSubmitting:B,isValuesCommitted:M,isCurrentBlockFinal:G,setHorizontalScrollUnits:S,handleFormValues:J,skipBlock:K,setIsSubmitting:I,onSubmit:j,setIsSurveyCompleted:w,preventQuestionAnimation:$,preview:l,closePreview:d})))),!a&&"card"!==o&&G()&&t.createElement("div",{className:"submit"},t.createElement(k,{disabled:(T.current.required||T.current.question.type_info.pivot_question)&&(null==h[T.current.question.name]||0===h[T.current.question.name]?.length)||T.current.question.type_info.meta?.othersRequired&&ne||B,onClick:()=>{I(!0),i({...h,others_meta:z},(()=>{O?.type_info.meta?.skipThankYouPage?l?setTimeout((()=>{d?.()}),300):window.location.href=O?.type_info.meta?.redirectUrl:w(!0)}))}},B?"Submitting":"Submit survey"))))))))};exports.BUTTON_SIZE_VARIANTS={LARGE:"large",MINI:"mini",NORMAL:"normal"},exports.Button=k,exports.CheckboxGroup=v,exports.Input=p,exports.NPS=i,exports.ProgressBar=b,exports.Radio=g,exports.RadioGroup=x,exports.Survey=e=>{const n=N(e.survey);return t.createElement(t.Fragment,null,"standard"===e.surveyStyle?t.createElement(V,Object.assign({},e,{survey:n})):t.createElement(O,Object.assign({},e,{survey:n})))},exports.TextArea=f,exports.WebInAppSurvey=e=>{const n=N(e.survey);return t.createElement(T,Object.assign({},e,{survey:n}))};
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=require("react-transition-group"),o=e(require("react-dom"));function s(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}s(".freemium-survey-components .nps-container {\n margin: 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n}\n.freemium-survey-components .nps-container .footer {\n border-top: 1px solid #ebeff3;\n padding-top: 20px;\n display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n color: #666;\n}\n.freemium-survey-components .nps-container .footer:empty {\n display: none;\n}\n.freemium-survey-components .nps-container .nps-scale {\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale .button-container {\n flex-direction: column;\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components .nps-container .nps-scale .help-text-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.freemium-survey-components .nps-container .nps-scale .positive-text {\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .nps-scale .negative-text {\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .nps-scale span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .nps-scale button {\n display: inline-block;\n font-size: 1rem;\n white-space: nowrap;\n vertical-align: middle;\n background: none;\n border: none;\n box-shadow: none;\n cursor: pointer;\n text-align: center;\n font-weight: 400;\n border-radius: 4px;\n margin: 0;\n outline: none;\n margin-left: -1px;\n width: 40px;\n height: 40px;\n transform: scale(1);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover {\n transition: background 0.2s ease-in, border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover, .freemium-survey-components .nps-container .nps-scale button:focus {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .nps-scale.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .nps-scale.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .nps-scale.highlighted button:hover, .freemium-survey-components .nps-container .nps-scale.highlighted button:focus, .freemium-survey-components .nps-container .nps-scale.highlighted button.active {\n background: var(--default-brand-color) !important;\n background: var(--brand-color, var(--default-brand-color)) !important;\n}\n.freemium-survey-components .nps-container .nps-scale .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-weight: 500;\n background-color: #ebeff3;\n border-radius: 4px;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choices {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice {\n background: #ebeff3;\n color: #000;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active, .freemium-survey-components .nps-container .nps-scale.standard .choice:hover {\n background: #e43e3d;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):hover {\n background: #00af50;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(3):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(4):hover {\n background: #f8c43e;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active {\n color: #fff;\n transform: scale(1.2);\n}\n\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale button,\n.card-survey-style .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}");const i=e=>{const{type_info:{linear_scale:{button_style:r="highlighted",button_shape:o="rounded"}={},rating_presets:{start:s="Very unlikely",end:i="Very likely"}={},validation:{min:a},footer_text:u}}=e,c=e=>{switch(e){case e<=6:return"detractor";case e<=8:return"passive";default:return"promoter"}},l=n.useRef(Array.from({length:10+(0===a?1:0)},((e,n)=>n+a)));return t.createElement("div",{className:"nps-container","data-test-input":"nps"},t.createElement("div",{className:`nps-scale ${o} ${r}`},t.createElement("div",{className:"button-container"},t.createElement("div",{className:"choices",role:"radiogroup","aria-required":!0},l.current.map((n=>t.createElement("button",{role:"radio","aria-checked":e.npsValue===n,key:n,"data-test-nps-choice":n,onClick:t=>{e.onChangeHandler(n)},className:`choice ${c(n)} ${e.npsValue===n&&"active"}`},n)))),t.createElement("div",{className:"help-text-container"},t.createElement("span",{className:"negative-text",role:"note"},`${a} - ${s}`),t.createElement("span",{className:"positive-text",role:"note"},`${l.current[l.current.length-1]} - ${i}`)))),t.createElement("div",{className:"footer",role:"note"},u))},a=(e,n)=>(e.defaultProps=n,e);s('.freemium-survey-components .input-container,\n.freemium-survey-components .textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n border-radius: 4px;\n position: relative;\n}\n.freemium-survey-components label.input-label {\n display: inline-block;\n padding-bottom: 8px;\n padding-left: 2px;\n font-size: 0.75rem;\n font-weight: 400;\n}\n.freemium-survey-components label.required::after {\n content: "*";\n position: relative;\n top: 2px;\n font-weight: 500;\n font-size: 0.85rem;\n padding-left: 3px;\n color: #d72d30;\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n transition: border-color 0.2s linear;\n background: #fff;\n}\n.freemium-survey-components .textarea-container .input-basic {\n flex-direction: column;\n align-items: unset;\n}\n.freemium-survey-components .input-basic.error {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error[focus-within] {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic.error:focus-within {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: 0.2s linear;\n}\n.freemium-survey-components .input-basic[focus-within] {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic[focus-within] .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .input-basic:focus-within .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .end-max-length {\n transition: opacity ease 0.2s;\n opacity: 0;\n padding: 0 8px;\n font-size: 0.75rem;\n color: #264966;\n}\n.freemium-survey-components .textarea-container .end-max-length {\n padding: 8px;\n align-self: flex-end;\n}\n.freemium-survey-components span.input-error {\n display: block;\n padding-left: 2px;\n padding-top: 4px;\n font-size: 0.9rem;\n color: #d72d30;\n}\n.freemium-survey-components input[type=text] {\n padding: 6px 12px;\n flex: 1;\n border: unset;\n height: 32px;\n font-size: 1rem;\n /* line-height: ${typography.input.text.lineHeight}; */\n border-radius: 4px;\n}\n.freemium-survey-components input[type=text],\n.freemium-survey-components textarea {\n outline: none;\n border: none;\n}\n.freemium-survey-components input[type=text]::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 12px;\n flex: 1;\n border: unset;\n resize: none;\n font-size: 1rem;\n /* line-height: ${typography.input.text.lineHeight}; */\n border-radius: 4px;\n}\n.freemium-survey-components textarea::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}');const u=["RANGE","NPS","RADIO","DROPDOWN"],c={default:500,compact:500,cozy:400},l={isRequired:!1,showCount:!0,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},m=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{o.current?.focus()}),300+e.autoFocusDelay)}),[e.autoFocusInput]);const{inputStyle:s,style:i,className:a,showCount:u,isErrored:c,startLabel:l,isRequired:m,errorText:d,endLabel:p,maxLength:f=256,onChange:y,autoFocusInput:v,...h}=e;return t.createElement("div",{className:"input-container",style:i},e.label&&t.createElement("label",{className:"input-label "+(m?"required":"")},e.label),t.createElement(t.Fragment,null,l&&t.createElement("div",{className:"start-label"},l),t.createElement("div",{className:`input-basic ${c?"error":""}${a||""}`},t.createElement("input",Object.assign({},h,{type:"text",autoComplete:"off",ref:o,style:s,onChange:e=>{e.target.value?.length>f||y?.(e)}})),u&&f>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${f}`)),p&&t.createElement("div",{className:"end-label"},p)),c&&d&&t.createElement("span",{className:"input-error"},e.errorText))})),d=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{o.current?.focus()}),300+e.autoFocusDelay)}),[e.autoFocusInput]);const{inputStyle:s,style:i,className:a,showCount:u,maxLength:c=1500,startLabel:l,isRequired:m,autoFocusInput:d,onChange:p,...f}=e;return t.createElement(t.Fragment,null,t.createElement("div",{className:"textarea-container",style:i},e.label&&t.createElement("label",{className:"input-label "+(m?"required":"")},e.label),l&&t.createElement("div",{className:"start-label"},l),t.createElement("div",{className:`input-basic ${a||""}`},t.createElement("textarea",Object.assign({},f,{autoComplete:"off",ref:o,style:s,onChange:e=>{e.target.value?.length>c||p?.(e)}})),u&&c&&c>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${c}`)),e.endLabel&&t.createElement("div",{className:"end-label"},e.endLabel)))})),p=a(m,l),f=a(d,l);s('.freemium-survey-components .checkbox-group {\n width: 100%;\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n flex-direction: column;\n white-space: nowrap;\n flex-wrap: wrap;\n}\n.freemium-survey-components .icon-container {\n display: inline-block;\n flex: 0 0 12px;\n width: 12px;\n height: 12px;\n min-width: 12px;\n min-height: 12px;\n color: inherit;\n position: absolute;\n left: 1px;\n top: 2px;\n}\n.freemium-survey-components .tick-icon {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n color: inherit;\n fill: currentColor;\n}\n.freemium-survey-components input[type=checkbox] {\n position: absolute;\n clip: rect(0px 0px 0px 0px);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=checkbox]:focus ~ .checkbox {\n /* box-shadow: ${pseudo.focus} 0px 0px 0px 2px; */\n box-shadow: var(--default-brand-color) 0px 0px 0px 2px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n opacity: 1;\n line-height: 1.2;\n cursor: pointer;\n font-size: 1rem;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components .checkbox-label:hover {\n border-color: #92a2b1;\n}\n.freemium-survey-components .checkbox-label.disabled {\n opacity: 0.5;\n cursor: "not-allowed";\n}\n.freemium-survey-components .checkbox {\n transition: background-color ease-in 0.2s;\n min-width: 14px;\n min-height: 14px;\n min-height: 14px;\n max-height: 14px;\n border-radius: 2px;\n position: relative;\n margin-right: 16px;\n background-color: #fff;\n border: 1px solid;\n text-align: left;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:disabled ~ .checkbox:hover {\n box-shadow: unset;\n border-color: unset;\n}');const y=()=>t.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},t.createElement("path",{d:"M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",fill:"#fff",fillRule:"evenodd"})),v=({values:e=[],othersValue:r="",options:o,name:s,autoFocusGroup:i,autoFocusDelay:a,onChangeHandler:u,saveOthersValue:c})=>{const l=e.includes("__others__"),m=n.useRef(null);return n.useEffect((()=>{i&&setTimeout((()=>{m.current?.focus()}),300+a)}),[i]),t.createElement("div",{className:"checkbox-group"},t.createElement("button",{ref:m,className:"autofocus-button","aria-hidden":!0}),o?.filter((e=>"__others__"!==e.value)).map(((n,r)=>t.createElement(h,{key:n.id,checked:e?.includes(n.value),name:n.value,id:n.id,onChange:(t,r)=>{if(r)u([...e||[],n.value]);else{const t=e.indexOf(n.value);t>-1&&e.splice(t,1),u([...e])}}},n.value))),o?.find((e=>"__others__"===e.value))&&t.createElement(h,{key:"others",checked:l,name:"__others__",id:"__others__",onChange:(n,t)=>{if(t)u([...e,"__others__"]);else{const n=e.findIndex((e=>"__others__"===e));e.splice(n,1),u(e)}}},"Others"),l&&t.createElement(t.Fragment,null,t.createElement(p,{placeholder:"Enter your comment",value:r,onChange:e=>{c(s,e.target.value)},autoFocusDelay:10,label:""})))},h=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),320)}),[]),t.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},t.createElement("input",{ref:r,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,checked:e.checked,onChange:e.readOnly?()=>{}:n=>e.onChange(n,n.target.checked)}),t.createElement("div",{className:"checkbox"},e.checked&&t.createElement("div",{className:"icon-container"},t.createElement(y,null)," ")),t.createElement("div",null,e.children))}),{checked:!1});s('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n width: 100%;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: background-color ease-in 0.2s;\n min-width: 18px;\n max-width: 18px;\n min-height: 18px;\n max-height: 18px;\n border-radius: 50%;\n position: relative;\n margin-right: 16px;\n text-align: left;\n}\n.freemium-survey-components .radio:before {\n left: 3px;\n top: 3px;\n content: "";\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n transition: all ease-in 0.2s;\n background-color: #fff;\n}\n.freemium-survey-components .radio-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n cursor: pointer;\n line-height: 1.2;\n font-size: 1rem;\n font-weight: 400;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n color: #3a4b67;\n}\n.freemium-survey-components input[type=radio] {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=radio]:focus ~ .radio {\n /* box-shadow: ${pseudo.focus} 0px 0px 0px 3px; */\n box-shadow: var(--default-brand-color) 0px 0px 0px 3px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 3px;\n border-color: transparent;\n}\n.freemium-survey-components input[type=radio]:checked ~ .radio:before {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .radio-label:hover {\n border-color: #92a2b1;\n}');const x=({name:e,options:r,value:o,autoFocusGroup:s,autoFocusDelay:i,onChangeHandler:a,saveOthersValue:u,othersOption:c,othersRequired:l,othersValue:m,isFinalQn:d})=>{const f=n.useRef(null);return n.useEffect((()=>{s&&setTimeout((()=>{f.current?.focus()}),300+i)}),[s]),t.createElement("div",{className:"radio-group",role:"radiogroup"},t.createElement("button",{ref:f,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),r?.sort(((e,n)=>"__others__"===e.value?1:"__others__"===n.value?-1:0))?.map(((n,r)=>t.createElement(g,{key:n.value,value:n.value,name:e,onChange:n=>{"__others__"!==n.currentTarget.value&&u(e,null),a(n.currentTarget.value)},checked:o===n.value},"__others__"===n.value?"Others":n.value))),"__others__"===o&&t.createElement(t.Fragment,null,t.createElement(p,{value:m??"",onChange:n=>{"__others__"!==o&&d&&a("__others__"),u(e,n.target.value)},placeholder:"Enter your comment",label:"",autoFocusDelay:10})))},g=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),320)}),[]),t.createElement("label",{className:"radio-label"},t.createElement("input",{ref:r,type:"radio",name:e.name,value:e.value,checked:e.checked,onChange:e.onChange}),t.createElement("div",{className:"radio"}),t.createElement("div",null,e.children))}),{checked:!1,autoFocus:!1});s(".progressbar-container {\n width: 100%;\n height: 4px;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n text-align: left;\n overflow: hidden;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n}\n\n.progressbar-container.widget {\n position: absolute;\n top: 0;\n height: 2px;\n}\n\n.progressbar {\n transition: transform 0.2s linear 200ms;\n transform-origin: left;\n height: 100%;\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}");const b=e=>{const{totalSteps:n,completedSteps:r,widget:o}=e;return t.createElement("div",{className:"progressbar-container "+(o?"widget":"")},t.createElement("div",{className:"progressbar",style:{width:(r>0?100/n:0)+"%",transform:`scaleX(${r})`}}))};s(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n padding: 8px 16px;\n cursor: pointer;\n line-height: 1.5;\n text-align: center;\n font-weight: 600;\n letter-spacing: 0.3px;\n border-radius: 4px;\n white-space: nowrap;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: --default-button-text-color;\n color: var(--button-text-color, --default-button-text-color);\n background: var(--default-brand-color);\n background: var(--brand-color, var(--default-brand-color));\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n border-radius: 4px;\n min-width: 200px;\n max-width: -webkit-fit-content;\n max-width: -moz-fit-content;\n max-width: fit-content;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n transform: translateY(-4px);\n}\n.freemium-survey-components .action-button[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.freemium-survey-components button:focus:not(:active) {\n /* box-shadow: 0 0 0 2px ${pseudo.focus}; */\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .action-button {\n min-width: 120px;\n }\n}\n.widget-survey-components .action-button {\n min-width: 120px;\n}\n\n.freemium-survey-components.mobile-preview .action-button {\n min-width: 120px;\n}");const w=()=>t.createElement(t.Fragment,null,"..."),k=e=>{const{inline:n=!1,children:r,disabled:o,className:s="",htmlType:i,type:a="primary",onClick:u,size:c,overrideStyleClassName:l="",loading:m=!1,...d}=e;return t.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:o,className:`action-button ${s} ${l}`,type:i,onClick:u},d),m?t.createElement(w,null):r)},_=()=>t.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("path",{d:"M7.82585 6.15754C7.98999 6.32147 8.08232 6.54389 8.08252 6.77587L8.08252 7.2192C8.07983 7.45069 7.98788 7.6722 7.82585 7.83754L1.82919 13.8225C1.77496 13.8772 1.71044 13.9206 1.63936 13.9502C1.56827 13.9798 1.49203 13.9951 1.41502 13.9951C1.33801 13.9951 1.26177 13.9798 1.19068 13.9502C1.1196 13.9206 1.05508 13.8772 1.00085 13.8225L0.172521 12.9942C0.118197 12.941 0.0750381 12.8774 0.0455752 12.8073C0.0161124 12.7372 0.000937578 12.6619 0.000937585 12.5859C0.000937592 12.5098 0.0161125 12.4345 0.0455753 12.3644C0.0750381 12.2943 0.118197 12.2308 0.172521 12.1775L5.36419 6.99754L0.172522 1.81754C0.117847 1.76331 0.0744506 1.69879 0.0448352 1.62771C0.0152208 1.55662 -2.75162e-05 1.48038 -2.75094e-05 1.40337C-2.75027e-05 1.32636 0.0152208 1.25012 0.0448353 1.17904C0.0744507 1.10795 0.117847 1.04343 0.172522 0.989205L1.00086 0.172537C1.05508 0.117862 1.1196 0.0744661 1.19069 0.0448507C1.26177 0.0152353 1.33801 -1.20337e-05 1.41502 -1.2027e-05C1.49203 -1.20203e-05 1.56827 0.0152353 1.63936 0.0448507C1.71044 0.0744661 1.77496 0.117862 1.82919 0.172537L7.82585 6.15754Z",fill:"#6B6B6B"})),q=()=>t.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("path",{d:"M0.256667 7.83755C0.0925257 7.67361 0.000204227 7.4512 0 7.21921V6.77588C0.00268801 6.5444 0.0946357 6.32289 0.256667 6.15755L6.25333 0.172549C6.30756 0.117874 6.37208 0.0744776 6.44316 0.0448625C6.51425 0.0152474 6.59049 0 6.6675 0C6.74451 0 6.82075 0.0152474 6.89184 0.0448625C6.96292 0.0744776 7.02744 0.117874 7.08167 0.172549L7.91 1.00088C7.96432 1.05411 8.00748 1.11764 8.03694 1.18776C8.06641 1.25787 8.08158 1.33316 8.08158 1.40922C8.08158 1.48527 8.06641 1.56056 8.03694 1.63067C8.00748 1.70079 7.96432 1.76432 7.91 1.81755L2.71833 6.99755L7.91 12.1775C7.96467 12.2318 8.00807 12.2963 8.03769 12.3674C8.0673 12.4385 8.08255 12.5147 8.08255 12.5917C8.08255 12.6687 8.0673 12.745 8.03769 12.8161C8.00807 12.8871 7.96467 12.9517 7.91 13.0059L7.08167 13.8225C7.02744 13.8772 6.96292 13.9206 6.89184 13.9502C6.82075 13.9799 6.74451 13.9951 6.6675 13.9951C6.59049 13.9951 6.51425 13.9799 6.44316 13.9502C6.37208 13.9206 6.30756 13.8772 6.25333 13.8225L0.256667 7.83755Z",fill:"#6B6B6B"})),E=({question:e,formValues:n,othersMeta:r,onChangeHandler:o,saveOthersValue:s,autoFocus:a,autoFocusDelay:u,isFinalQn:c})=>{switch(e.type_info.question_type){case"RANGE":return t.createElement(i,{type_info:e.type_info,onChangeHandler:o,npsValue:n[e.name]});case"CHECKBOX":case"MULTI_SELECT":return t.createElement(v,{name:e.name,autoFocusGroup:a,values:n[e.name],othersValue:r[e.name],options:e.type_info.choices,onChangeHandler:o,saveOthersValue:s,othersOption:e.type_info.meta?.othersOption,othersRequired:e.type_info.meta?.othersRequired,autoFocusDelay:u});case"RADIO":case"DROPDOWN":return t.createElement(x,{autoFocusGroup:a,autoFocusDelay:u,name:e.name,onChangeHandler:o,saveOthersValue:s,options:e.type_info.choices,value:n[e.name],othersValue:r[e.name],othersOption:e.type_info.meta?.othersOption,othersRequired:e.type_info.meta?.othersRequired,isFinalQn:c});case"INPUT":case"TEXT":return e.type_info?.meta?.readOnly?t.createElement("div",{className:"message-container"},e.type_info?.meta?.value):t.createElement("div",{className:"responsive-text-field"},t.createElement(p,{autoFocusInput:a,autoFocusDelay:u,label:"",isRequired:e.is_required,value:n[e.name]||"",placeholder:e.type_info?.meta?.placeholder??"",onChange:e=>o(e.target.value)}),t.createElement(f,{autoFocusInput:a,autoFocusDelay:u,label:"",maxLength:256,isRequired:e.is_required,placeholder:e.type_info?.meta?.placeholder??"",value:n[e.name]||"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return t.createElement(f,{autoFocusInput:a,autoFocusDelay:u,label:"",isRequired:e.is_required,placeholder:e.type_info?.meta?.placeholder??"",value:n[e.name]||"",onChange:e=>o(e.target.value)});default:return console.error(`Question type ${e.type_info.question_type} not found`),null}},C=(e,n,t)=>{if(e){let r={"{{nps.rating}}":t};n&&(r={...r,...n});const o=new RegExp(Object.keys(r).join("|"),"gi");e=e.replace(o,(function(e){return r[e.toLowerCase()]}))}return e},N=e=>n.useMemo((()=>{const n=JSON.parse(JSON.stringify(e)),t=[];return(n.question_details?.questions||[]).forEach((e=>{const n=e.type_info?.meta?.block;n&&(n.question_names||(n.question_names=[e.name]),t.push(n))})),{...n,meta:{...n.meta,blocks:t}}}),[e]);s(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 560px;\n --default-widget-max-height: 400px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-components.card-survey-style {\n padding: 20px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button svg {\n transform: rotate(90deg);\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.card-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n transition: opacity 50ms ease-out;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.card-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.card-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.card-survey-style .fade-enter .question-container {\n opacity: 0;\n transform: translateY(15px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container {\n opacity: 0.05;\n transform: translateY(-15px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter .question-container {\n opacity: 0;\n transform: translateY(-15px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n opacity: 0.05;\n transform: translateY(15px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.card-survey-style .question-footer {\n display: flex;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.card-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.card-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .skip-button {\n font-weight: 500;\n color: #3a4b67;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.card-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.card-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.card-survey-style .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.card-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.card-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.card-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.card-survey-style .message-container:empty {\n display: none;\n}\n\n@media (max-width: 550px) {\n div.freemium-survey-components.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n div.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n div.freemium-survey-components.card-survey-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons button {\n max-width: unset;\n }\n div.freemium-survey-components.card-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .thankyou .text {\n width: auto;\n }\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .responsive-text-field .input-container {\n display: none;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .freemium-survey-step-navigation {\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-buttons {\n flex-direction: column;\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-buttons button {\n max-width: unset;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-button {\n max-width: unset;\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .thankyou .text {\n width: auto;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const S=({thankYouQuestion:e,preview:r,placeholders:o,npsValue:s})=>(n.useEffect((()=>{r||e.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=e.type_info.meta?.redirectUrl}),1e3*e.type_info.meta?.redirectDelay??1e4)}),[]),t.createElement("div",{className:"question-container thankyou"},t.createElement("div",{className:"heading"},"Thank you!"),t.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:C(e.text,o,s)}}),e.type_info.meta?.redirectUrl&&t.createElement("div",{style:{width:"100%"}},t.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",e.type_info.meta?.redirectDelay," seconds.",t.createElement("br",null)),t.createElement("a",{className:"link",href:e.type_info.meta?.redirectUrl},e?.type_info.meta?.redirectUrl)))),B=({currentBlockIndex:e,currentBlockIndexOfBlocksWithQns:n,setCurrentBlockIndexOfBlocksWithQnsDirty:r,blocksWithQns:o,blocks:s,setHorizontalScrollUnits:i,preventQuestionAnimation:a,tempCurrentBlockIndexOfBlocksWithQns:u,setReverse:c,reverse:l})=>t.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},t.createElement("button",{disabled:0==n.current,className:"navigation-button",onClick:()=>{l?(n.current=Math.max(n.current-1,0),e.current=s.findIndex((e=>e.name===o[n.current].name))):(u.current=Math.max(n.current-1,0),e.current=s.findIndex((e=>e.name===o[u.current].name))),a.current=!1,r.current=!0,c(!0),i({})}},t.createElement(q,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=o.length-1,onClick:()=>{a.current=!1,l?(u.current=Math.min(n.current+1,o.length-1),e.current=s.findIndex((e=>e.name===o[u.current].name))):(n.current=Math.min(n.current+1,o.length-1),e.current=s.findIndex((e=>e.name===o[n.current].name))),r.current=!0,c(!1),i({})}},t.createElement(_,null))),I=({widget:e,surveyStyle:n,formValues:r,blocksWithQns:o,blocks:s,thankYouQuestion:i,currentBlockIndexOfBlocksWithQns:a,currentBlockIndexOfBlocks:c,currentEditingBlock:l,isSubmitting:m,isValuesCommitted:d,isCurrentBlockFinal:p,setHorizontalScrollUnits:f,handleFormValues:y,skipBlock:v,setIsSubmitting:h,onSubmit:x,setIsSurveyCompleted:g,preventQuestionAnimation:b,preview:w,closePreview:_,setReverse:q,tempCurrentBlockIndexOfBlocksWithQns:E,question:C,block:N,reverse:S,othersMeta:I,setCurrentBlockIndexOfBlocksWithQnsDirty:O,...R})=>{const z=R.blockIndex??a.current,Q=()=>(!u.includes(C.type_info.question_type)||"DROPDOWN"===C.type_info.question_type&&"__others__"===r[C.name])&&!p(),T=()=>"RANGE"!==C.type_info.question_type&&!N.required&&!p(),D=()=>("DROPDOWN"===C.type_info.question_type&&!N.required&&r[C.name],!1),F=()=>p()&&(e||"standard"!==n),W=("MULTI_SELECT"===l.current.question.type_info.question_type&&r[l.current.question.name]?.includes("__others__")||"DROPDOWN"===l.current.question.type_info.question_type&&"__others__"===r[l.current.question.name])&&(!I[l.current.question.name]||""===I[l.current.question.name]);return t.createElement("div",{className:"question-footer"},!(!e&&"standard"===n||0===z&&void 0===r[C.name]||0===a.current&&!S)&&t.createElement(B,{currentBlockIndex:c,currentBlockIndexOfBlocksWithQns:a,blocksWithQns:o,blocks:s,setHorizontalScrollUnits:f,preventQuestionAnimation:b,setReverse:q,tempCurrentBlockIndexOfBlocksWithQns:E,reverse:S,setCurrentBlockIndexOfBlocksWithQnsDirty:O}),(Q()||D()||T()||F())&&t.createElement("div",{className:"action-buttons"},Q()&&t.createElement(k,{onClick:()=>{O.current=!1,q(!1),y(o[z],null,!0)},disabled:l.current.required&&(!r[l.current.question.name]||Array.isArray(r[l.current.question.name])&&0===r[l.current.question.name].length)||l.current.question.type_info.meta?.othersRequired&&W,className:"next-button"},"Next"),T()&&t.createElement("button",{className:"skip-button",onClick:()=>{O.current=!1,q(!1),v(C)}},"Skip"),F()&&t.createElement("div",{className:"submit"},t.createElement(k,{disabled:(l.current.required||l.current.question.type_info.pivot_question)&&(null==r[l.current.question.name]||0===r[l.current.question.name]?.length)||l.current.question.type_info.meta?.othersRequired&&W||m,onClick:()=>{h(!0),x()}},m?"Submitting":"Submit survey")),D()&&t.createElement("button",{className:"skip-button",onClick:()=>{q(!1),l.current=o[z],c.current=s.findIndex((e=>e.name===o[z].name)),v(C)}},"Clear selection")))},O=({survey:e,surveyStyle:o="standard",placeholders:s,onSubmit:i,widget:a,npsValue:c,preview:l,mobilePreview:m,closePreview:d})=>{const p=e.question_details?.questions||[],f=e.meta?.blocks||[],[y,v]=n.useState(null),[h,x]=n.useState({}),[g,w]=n.useState(!1),[k,_]=n.useState([]),[q,N]=n.useState({}),[B,O]=n.useState(!1),[R,z]=n.useState(null),[Q,T]=n.useState({}),D=n.useRef(null),F=n.useRef(null),W=n.useRef(-1),L=n.useRef(null),V=n.useRef(0),P=n.useRef(0),Y=n.useRef(!1),M=n.useRef(!1),A=n.useRef([]),H=t.useRef(null!=c&&"card"===o),$=n.useRef(null),U=n.useRef(0),[j,G]=n.useState(!1),X=n.useRef();n.useEffect((()=>{f&&($.current=f.find((e=>"TY"===e.name)),v(f.filter((e=>"TY"!==e.name))))}),[f]),n.useEffect((()=>{Y.current&&(P.current=U.current,N({}))}),[j]),n.useEffect((()=>{if(y)if(F.current=p.find((e=>e.type_info?.pivot_question))??p.find((e=>"RANGE"===e.type_info?.question_type))??p[0],null!=c){W.current=Math.min(F.current.type_info.validation.max,Math.max(F.current.type_info.validation.min,c));const e=p.find((e=>e.name===y[0].question_names[0]));D.current={...y[0],question:e},A.current=[...A.current,{...y[0],question:e}],_(A.current),x({Q_1:W.current})}else if(!D.current&&y.length>0)return D.current=y[0],void J(y[0])}),[y,c]),t.useEffect((()=>{k.length&&(A.current=k,P.current=k.length-1),N({})}),[k]),n.useEffect((()=>{Object.keys(h).length>0&&D.current.question&&(u.includes(D.current.question.type_info.question_type)&&("DROPDOWN"!==D.current.question.type_info.question_type||"__others__"!==h[D.current.question.name])||M.current)&&!K()&&(null!=c&&1==k.length?X.current?(clearTimeout(X.current),X.current=null,ee()):X.current=setTimeout((()=>{ee()}),1500):ee())}),[h]),n.useEffect((()=>{if(null!=h?.[F.current?.name])if($.current?.is_based_on_rating){const e=F.current?.type_info?.choices[h?.[F.current?.name]-F.current?.type_info?.validation?.min??0]?.dependent_question_names,n=$.current?.question_names.find((n=>e?.includes(n))),t=p.find((e=>e.name===n));z(t)}else{const e=p.find((e=>e.name==$.current?.question_names[0]));z(e)}}),[h?.[F.current?.name]]);const Z=()=>{i({...h,others_meta:Q},(()=>{R?.type_info.meta?.skipThankYouPage?l?setTimeout((()=>{d?.()}),300):window.location.href=R?.type_info.meta?.redirectUrl:w(!0)}))},K=()=>(V.current===y.length-1||"end"===D.current.branchOption)&&P.current===k.length-1,J=e=>{let n={};if(e.is_based_on_rating){const t=F.current?.type_info?.choices[h?.[F.current?.name]-F.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=p.find((e=>e.name===r))}else n=p.find((n=>n.name===e.question_names[0]));D.current.question=n;A.current.find((e=>e.question.name===n.name))?(P.current+=1,N({})):_([...A.current,{...e,question:n}])},ee=()=>{if(K())w(!0);else{if(D.current.nextBlock)V.current=y.findIndex((e=>e.name===D.current.nextBlock));else if(D.current.question.type_info?.meta?.branches){const e=D.current.question.type_info?.meta?.branches,n=h[D.current.question.name];let t;if(t="RANGE"===D.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return Z(),void w(!0);V.current=y.findIndex((e=>e.name===t.nextBlock))}else V.current+=1}else V.current+=1;D.current=y[V.current],J(y[V.current])}},ne=(e,n,t)=>{if(H.current=!1,t){if(M.current=!0,null!=h[e.question.name]&&e.name!==k[k.length-1].name){const[t,r]=(e=>{const n=k.findIndex((n=>n.name===e.name)),t=k.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=h[n.question.name],e)),{});return V.current=y.findIndex((n=>n.name===e.name)),[t,r]})(e);x({...r,...null!=n&&{[e.question.name]:n}}),A.current=t}else x({...h,...null!=n&&{[e.question.name]:n}});F?.current?.name==e?.question?.name&&(W.current=n)}else x({...h,...null!=n&&{[e.question.name]:n}})};if(!D.current||!D.current.question)return null;const te=k[Math.min(P.current??k.length-1,k.length-1)];return t.createElement("div",{className:`freemium-survey-components ${m?"mobile-preview":""} ${o}-survey-style`,id:"freemium-survey"},g?null:t.createElement(b,{totalSteps:y.length,completedSteps:V.current+(g?1:0)}),t.createElement(r.SwitchTransition,{mode:"out-in"},t.createElement(r.CSSTransition,{key:P.current+String(g),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:j?"fade-reverse":"fade"},t.createElement("div",{className:"questions"},g?t.createElement(S,{thankYouQuestion:R,preview:l,placeholders:s,npsValue:W.current}):t.createElement("div",{ref:L,id:`${te.question.name}`,className:`question-container ${a||"card"===o}`,"data-test-question-name":te.question.name},t.createElement("div",{className:"question-text",dangerouslySetInnerHTML:{__html:C(te.question.text,s,W.current)},title:`question-${P.current}`,role:"heading","aria-level":1}),t.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:{width:"100%"}},t.createElement(E,{question:te.question,isFinalQn:K(),formValues:h,othersMeta:Q,autoFocus:!0,autoFocusDelay:"standard"===o?350:0,saveOthersValue:(e,n)=>{if(null===n){const n={...Q};delete n[e],T({...n})}else T({...Q,[e]:n})},onChangeHandler:e=>{M.current=!1,V.current=y.findIndex((e=>e.name===te.name)),D.current=te,Y.current=!1,G(!1),ne(te,e,!("DROPDOWN"===te.question.type_info.question_type&&"__others__"===e)&&u.includes(te.question.type_info.question_type)&&!K())}})),t.createElement(I,{question:te.question,block:te,widget:a,surveyStyle:o,formValues:h,othersMeta:Q,blocksWithQns:k,blocks:y,thankYouQuestion:R,currentBlockIndexOfBlocksWithQns:P,reverse:j,setReverse:G,currentBlockIndexOfBlocks:V,currentEditingBlock:D,isSubmitting:B,isValuesCommitted:M,isCurrentBlockFinal:K,setHorizontalScrollUnits:N,handleFormValues:ne,skipBlock:e=>{M.current=!0,delete h[e.name],x({...h})},setIsSubmitting:O,onSubmit:Z,setIsSurveyCompleted:w,preventQuestionAnimation:H,preview:l,closePreview:d,tempCurrentBlockIndexOfBlocksWithQns:U,setCurrentBlockIndexOfBlocksWithQnsDirty:Y}))))))};s(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n}\n\n.freemium-survey-components.widget-survey-components {\n overflow: hidden;\n}\n.freemium-survey-components.widget-survey-components * {\n scrollbar-color: rgba(216, 216, 216, 0.5) transparent !important;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar {\n height: auto;\n height: initial;\n width: 6px;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar-track {\n background: transparent !important;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar-thumb {\n border-radius: 5px;\n background: rgba(216, 216, 216, 0.5) !important;\n}\n.freemium-survey-components.widget-survey-components p {\n margin: 0;\n}\n.freemium-survey-components.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n position: relative;\n display: flex;\n justify-content: row;\n align-items: flex-end;\n height: 100%;\n transition: height 200ms ease;\n}\n.freemium-survey-components.widget-survey-components .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n text-align: center;\n max-height: 100%;\n min-width: 100%;\n max-width: 700px;\n margin: 0 auto;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n padding: 28px;\n padding-top: 0;\n grid-gap: 28px;\n gap: 28px;\n position: absolute;\n overflow: auto;\n}\n.freemium-survey-components.widget-survey-components .question-wrapper {\n width: 100%;\n flex-grow: 1;\n padding: 4px 2px;\n overflow: auto;\n}\n.freemium-survey-components.widget-survey-components .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.widget-survey-components .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.widget-survey-components .question-text p {\n all: inherit;\n}\n.freemium-survey-components.widget-survey-components .nps-container .footer {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-enter {\n opacity: 1;\n transform: translateX(80px);\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-enter-active {\n position: absolute;\n opacity: 1;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-enter-done {\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-exit {\n opacity: 0.05;\n pointer-events: none;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-exit-active {\n pointer-events: none;\n opacity: 0;\n transform: translateX(-80px);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-enter {\n opacity: 0;\n position: absolute;\n transform: translateX(-80px);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-enter-active {\n opacity: 1;\n position: absolute;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit {\n opacity: 0.05;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit-active {\n opacity: 0;\n transform: translateX(80px);\n}\n.freemium-survey-components.widget-survey-components .fade-enter-active,\n.freemium-survey-components.widget-survey-components .fade-reverse-enter-active {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit-active,\n.freemium-survey-components.widget-survey-components .fade-exit-active {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.widget-survey-components .question-footer {\n margin: 0px auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: -webkit-sticky;\n position: sticky;\n bottom: -28px;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.widget-survey-components .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .skip-button {\n font-weight: 500;\n cursor: pointer;\n color: #3a4b67;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.widget-survey-components .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.widget-survey-components .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.widget-survey-components .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.widget-survey-components .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.widget-survey-components .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.widget-survey-components .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.widget-survey-components .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.widget-survey-components .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\n.freemium-survey-components.widget-survey-components .message-container:empty {\n display: none;\n}\n\n.freemium-survey-components.widget-survey-components.compact-style .nps-question-text {\n text-align: center;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-container {\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .compact-footer-layout {\n display: flex;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .compact-footer-layout:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .action-buttons {\n grid-gap: 32px;\n gap: 32px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .submit,\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .action-button {\n max-width: unset;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 8px;\n gap: 8px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .thankyou .text {\n width: 95%;\n}\n\n.freemium-survey-components.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\n.freemium-survey-components.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\n.freemium-survey-components.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\n.freemium-survey-components.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\n.freemium-survey-components.widget-survey-components.default-style .radio-group {\n flex-direction: column;\n flex-wrap: nowrap;\n overflow: auto;\n}\n.freemium-survey-components.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n color: #3a4b67;\n}\n.freemium-survey-components.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.freemium-survey-components.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\n.freemium-survey-components.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.widget-survey-components.cozy-style {\n max-width: 1000px;\n min-width: 600px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n text-align: left;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-question-text {\n text-align: center;\n width: 70%;\n margin: 0 auto;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n color: #3a4b67;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.freemium-survey-components.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const R=({thankYouQuestion:e,preview:n,placeholders:r,npsValue:o},s)=>t.createElement(t.Fragment,null,t.createElement("div",{className:"heading"},"Thank you!"),t.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:C(e.text,r,o)}})),z=({currentBlockIndexOfBlocks:e,currentBlockIndexOfBlocksWithQns:n,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i,tempCurrentBlockIndexOfBlocksWithQns:a,setCurrentBlockIndexOfBlocksWithQnsDirty:u,setReverse:c,reverse:l})=>t.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},t.createElement("button",{disabled:0==n.current,className:"navigation-button",onClick:()=>{l?(n.current=Math.max(n.current-1,0),e.current=o.findIndex((e=>e.name===r[n.current].name))):(a.current=Math.max(n.current-1,0),e.current=o.findIndex((e=>e.name===r[a.current].name))),i.current=!1,u.current=!0,c(!0),s({})}},t.createElement(q,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=r.length-1,onClick:()=>{i.current=!1,l?(a.current=Math.min(n.current+1,r.length-1),e.current=o.findIndex((e=>e.name===r[a.current].name))):(n.current=Math.min(n.current+1,r.length-1),e.current=o.findIndex((e=>e.name===r[n.current].name))),u.current=!0,c(!1),s({})}},t.createElement(_,null))),Q=({widget:e,widgetStyle:n,surveyStyle:r,formValues:o,blocksWithQns:s,blocks:i,thankYouQuestion:a,currentBlockIndexOfBlocksWithQns:c,currentBlockIndexOfBlocks:l,currentEditingBlock:m,isSubmitting:d,isValuesCommitted:p,isCurrentBlockFinal:f,setHorizontalScrollUnits:y,handleFormValues:v,skipBlock:h,setIsSubmitting:x,onSubmit:g,setIsSurveyCompleted:b,preventQuestionAnimation:w,preview:_,closePreview:q,setReverse:E,tempCurrentBlockIndexOfBlocksWithQns:C,question:N,block:S,reverse:B,othersMeta:I,setCurrentBlockIndexOfBlocksWithQnsDirty:O,...R})=>{const Q=R.blockIndex??c.current,T=()=>!(!e&&"standard"===r||0===Q&&void 0===o[N.name]||0===c.current&&!B),D=()=>(!u.includes(N.type_info.question_type)||"DROPDOWN"===N.type_info.question_type&&"__others__"===o[N.name])&&!f(),F=()=>"RANGE"!==N.type_info.question_type&&!S.required&&!f(),W=()=>("DROPDOWN"===N.type_info.question_type&&!S.required&&o[N.name],!1),L=()=>f()&&(e||"standard"!==r),V=("MULTI_SELECT"===m.current.question.type_info.question_type&&o[m.current.question.name]?.includes("__others__")||"DROPDOWN"===m.current.question.type_info.question_type&&"__others__"===o[m.current.question.name])&&(!I[m.current.question.name]||""===I[m.current.question.name]),P="compact"===n&&F()&&T(),Y=!P&&T();return t.createElement("div",{className:"question-footer"},P?t.createElement("div",{className:"compact-footer-layout"},T()&&t.createElement(z,{currentBlockIndexOfBlocks:l,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:y,preventQuestionAnimation:w,setReverse:E,tempCurrentBlockIndexOfBlocksWithQns:C,setCurrentBlockIndexOfBlocksWithQnsDirty:O,reverse:B}),F()&&t.createElement("button",{className:"skip-button",onClick:()=>{E(!1),h(N)}},"Skip")):null,(D()||W()||"compact"!==n&&F()||Y||L())&&t.createElement("div",{className:"action-buttons"},Y&&t.createElement("div",{style:{marginRight:"auto"}},t.createElement(z,{currentBlockIndexOfBlocks:l,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:y,preventQuestionAnimation:w,setReverse:E,tempCurrentBlockIndexOfBlocksWithQns:C,setCurrentBlockIndexOfBlocksWithQnsDirty:O,reverse:B})),D()&&t.createElement(k,{onClick:()=>{O.current=!1,E(!1),v(s[Q],null,!0)},disabled:m.current.required&&(!o[m.current.question.name]||Array.isArray(o[m.current.question.name])&&0===o[m.current.question.name].length)||m.current.question.type_info.meta?.othersRequired&&V,className:"next-button"},"Next"),L()&&t.createElement("div",{className:"submit"},t.createElement(k,{disabled:(m.current.required||m.current.question.type_info.pivot_question)&&(null==o[m.current.question.name]||0===o[m.current.question.name]?.length)||m.current.question.type_info.meta?.othersRequired&&V||d,onClick:()=>{g(),x(!0)}},d?"Submitting":"Submit survey")),W()&&t.createElement("button",{className:"skip-button",onClick:()=>{E(!1),m.current=s[Q],l.current=i.findIndex((e=>e.name===s[Q].name)),h(N)}},"Clear selection")))},T=({survey:e,surveyStyle:s="standard",placeholders:i,onSubmit:a,widget:l,npsValue:m,widgetStyle:d,widgetHeaderQuerySelector:p,preview:f,mobilePreview:y,closePreview:v})=>{const h=e.question_details?.questions||[],x=e.meta?.blocks||[],[g,w]=n.useState(null),[k,_]=n.useState({}),[q,N]=n.useState(!1),[S,B]=n.useState([]),[I,O]=n.useState({}),[z,T]=n.useState(!1),[D,F]=n.useState(null),[W,L]=n.useState({}),V=n.useRef(null),P=n.useRef(null),Y=n.useRef(-1),[M,A]=n.useState(null),H=n.useRef(0),$=n.useRef(0),U=n.useRef(!1),j=n.useRef([]),G=n.useRef(!!m&&"card"===s),X=n.useRef(null),Z=n.useRef(0),[K,J]=n.useState(!1),ee=n.useRef(0),ne=n.useRef(!1);n.useEffect((()=>{x&&(X.current=x.find((e=>"TY"===e.name)),w(x.filter((e=>"TY"!==e.name))))}),[x]),n.useEffect((()=>{ne.current&&($.current=Z.current,O({}))}),[K]),n.useEffect((()=>{if(g)if(P.current=h.find((e=>e.type_info?.pivot_question))??h.find((e=>"RANGE"===e.type_info?.question_type))??h[0],null!=m){Y.current=m;const e=h.find((e=>e.name===g[0].question_names[0]));V.current={...g[0],question:e},j.current=[...j.current,{...g[0],question:e}],B(j.current),_({Q_1:m})}else if(!V.current&&g.length>0)return V.current=g[0],void oe(g[0])}),[g,m]),n.useEffect((()=>{S.length&&(j.current=S,$.current=S.length-1,O({}))}),[S]),n.useEffect((()=>{Object.keys(k).length>0&&V.current.question&&(u.includes(V.current.question.type_info.question_type)&&("DROPDOWN"!==V.current.question.type_info.question_type||"__others__"!==k[V.current.question.name])||U.current)&&!re()&&(m&&1==S.length?setTimeout((()=>{se()}),1500):se())}),[k]),n.useEffect((()=>{if(null!=k?.[P.current?.name])if(X.current?.is_based_on_rating){const e=P.current?.type_info?.choices[k?.[P.current?.name]-P.current?.type_info?.validation?.min??0]?.dependent_question_names,n=X.current?.question_names.find((n=>e?.includes(n))),t=h.find((e=>e.name===n));F(t)}else{const e=h.find((e=>e.name==X.current?.question_names[0]));F(e)}}),[k?.[P.current?.name]]);n.useMemo((()=>{(()=>{if(M){M.style.minHeight="unset",M.style.maxHeight="unset",M.style.height="min-content";const e=Math.min(M?.scrollHeight+2,c[d]);M.style.height=e+"px",M.style.minHeight=e+"px",ee.current=e}})()}),[M]);const te=()=>{a({...k,others_meta:W},(()=>{D?.type_info.meta?.skipThankYouPage?f?setTimeout((()=>{v?.()}),300):window.location.href=D?.type_info.meta?.redirectUrl:N(!0)}))},re=()=>(H.current===g.length-1||"end"===V.current.branchOption)&&$.current===S.length-1,oe=e=>{let n={};if(e.is_based_on_rating){const t=P.current?.type_info?.choices[k?.[P.current?.name]-P.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=h.find((e=>e.name===r))}else n=h.find((n=>n.name===e.question_names[0]));V.current.question=n;j.current.find((e=>e.question.name===n.name))?(O({}),$.current+=1):B([...j.current,{...e,question:n}])},se=()=>{if(re())N(!0);else{if(V.current.nextBlock)H.current=g.findIndex((e=>e.name===V.current.nextBlock));else if(V.current.question.type_info?.meta?.branches){const e=V.current.question.type_info?.meta?.branches,n=k[V.current.question.name];let t;if(t="RANGE"===V.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return te(),void N(!0);H.current=g.findIndex((e=>e.name===t.nextBlock))}else H.current+=1}else H.current+=1;V.current=g[H.current],oe(g[H.current])}},ie=(e,n,t)=>{if(G.current=!1,t){if(U.current=!0,null!=k[e.question.name]&&e.name!==S[S.length-1].name){const[t,r]=(e=>{const n=S.findIndex((n=>n.name===e.name)),t=S.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=k[n.question.name],e)),{});return H.current=g.findIndex((n=>n.name===e.name)),[t,r]})(e);_({...r,...null!=n&&{[e.question.name]:n}}),j.current=t}else _({...k,...null!=n&&{[e.question.name]:n}});P?.current?.name==e?.question?.name&&(Y.current=n)}else _({...k,...null!=n&&{[e.question.name]:n}})};if(!V.current||!V.current.question)return null;const ae=S[Math.min($.current??S.length-1,S.length-1)];return t.createElement("div",{className:`freemium-survey-components ${l?"widget-survey-components":""} ${d}-style ${y?"mobile-preview":""}`,id:"freemium-survey"},p&&!q&&document.querySelector(p)?o.createPortal(t.createElement(b,{totalSteps:g.length,completedSteps:H.current+(q?1:0),widget:!0}),document.querySelector(p)):null,t.createElement("div",{className:"questions",style:{height:ee.current,...1===S.length?{transition:"none"}:{}}},t.createElement(r.TransitionGroup,{component:null},t.createElement(r.CSSTransition,{key:ae.question.name+String(q),unmountOnExit:!0,addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:K?"fade-reverse":"fade"},t.createElement("div",{ref:e=>e?A(e):null,id:`${ae.question.name}`,className:"question-container "+(q?"thankyou":""),"data-test-question-name":ae.question.name},q?t.createElement(R,{thankYouQuestion:D,preview:f,placeholders:i,npsValue:Y.current,setBlockElementRef:A}):t.createElement(t.Fragment,null,t.createElement("div",{className:"question-text "+("RANGE"===ae.question.type_info.question_type?"nps-question-text":""),dangerouslySetInnerHTML:{__html:C(ae.question.text,i,Y.current)},title:`question-${$.current}`,role:"heading","aria-level":1}),t.createElement("div",{className:"question-wrapper",onTransitionEndCapture:e=>e.stopPropagation()},t.createElement(E,{question:ae.question,isFinalQn:re(),formValues:k,othersMeta:W,autoFocus:!0,autoFocusDelay:"standard"===s?300:0,saveOthersValue:(e,n)=>{if(null===n){const n={...W};delete n[e],L({...n})}else L({...W,[e]:n})},onChangeHandler:e=>{U.current=!1,H.current=g.findIndex((e=>e.name===ae.name)),V.current=ae,ne.current=!1,J(!1),ie(ae,e,!("DROPDOWN"===ae.question.type_info.question_type&&"__others__"===e)&&u.includes(ae.question.type_info.question_type)&&!re())}})),t.createElement(Q,{question:ae.question,block:ae,widget:l,widgetStyle:d,surveyStyle:s,formValues:k,othersMeta:W,blocksWithQns:S,blocks:g,thankYouQuestion:D,currentBlockIndexOfBlocksWithQns:$,reverse:K,setReverse:J,currentBlockIndexOfBlocks:H,currentEditingBlock:V,isSubmitting:z,isValuesCommitted:U,isCurrentBlockFinal:re,setHorizontalScrollUnits:O,handleFormValues:ie,skipBlock:e=>{U.current=!0,delete k[e.name],_({...k})},setIsSubmitting:T,onSubmit:te,setIsSurveyCompleted:N,preventQuestionAnimation:G,preview:f,closePreview:v,tempCurrentBlockIndexOfBlocksWithQns:Z,setCurrentBlockIndexOfBlocksWithQnsDirty:ne})))))))};s(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 480px;\n --default-widget-max-height: 460px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-step-navigation {\n border-radius: 3px;\n border: 1px solid #efefef;\n white-space: nowrap;\n}\n.freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n\n.freemium-survey-components.standard-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 800ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n overflow: auto;\n opacity: 1;\n}\n.freemium-survey-components.standard-survey-style .hide-question-container {\n pointer-events: none;\n opacity: 0;\n}\n.freemium-survey-components.standard-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.standard-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.standard-survey-style .question-footer {\n display: flex;\n justify-content: flex-start;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.standard-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components.standard-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .skip-button {\n font-weight: 500;\n color: #3a4b67;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.standard-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.standard-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .submit {\n max-width: 700px;\n margin: 0 auto;\n text-align: left;\n background: transparent;\n box-shadow: none;\n padding-bottom: 40px;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .fade-enter {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.standard-survey-style .fade-enter-active {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit-active {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.standard-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.standard-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.standard-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .message-container:empty {\n display: none;\n}\n@media (max-width: 550px) {\n .freemium-survey-components.standard-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .action-buttons button {\n max-width: unset;\n }\n .freemium-survey-components.standard-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .thankyou .text {\n width: auto;\n }\n}\n\n@media (max-width: 550px) {\n .freemium-survey-component .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-component .responsive-text-field .textarea-container {\n display: flex;\n }\n}\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const D=({thankYouQuestion:e,preview:r,placeholders:o,npsValue:s})=>(n.useEffect((()=>{r||e.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=e.type_info.meta?.redirectUrl}),1e3*(1e3*e.type_info.meta?.redirectDelay??1e4))}),[]),t.createElement("div",{className:"question-container thankyou"},t.createElement("div",{className:"heading"},"Thank you!"),t.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:C(e.text,o,s)}}),e.type_info.meta?.redirectUrl&&t.createElement("div",{style:{width:"100%"}},t.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",e.type_info.meta?.redirectDelay," seconds.",t.createElement("br",null)),t.createElement("a",{className:"link",href:e.type_info.meta?.redirectUrl},e?.type_info.meta?.redirectUrl)))),F=({currentBlockIndex:e,currentBlockIndexOfBlocksWithQns:n,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i})=>t.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},t.createElement("button",{disabled:0==n.current,className:"navigation-button",onClick:()=>{n.current=Math.max(n.current-1,0),e.current=o.findIndex((e=>e.name===r[n.current].name)),i.current=!1,s(n.current)}},t.createElement(q,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=r.length-1,onClick:()=>{i.current=!1,n.current=Math.min(n.current+1,r.length-1),e.current=o.findIndex((e=>e.name===r[n.current].name)),s(n.current)}},t.createElement(_,null))),W=({widget:e,block:n,surveyStyle:r,formValues:o,othersMeta:s,blocksWithQns:i,blocks:a,thankYouQuestion:c,currentBlockIndexOfBlocksWithQns:l,currentBlockIndexOfBlocks:m,currentEditingBlock:d,isSubmitting:p,isValuesCommitted:f,isCurrentBlockFinal:y,setHorizontalScrollUnits:v,handleFormValues:h,skipBlock:x,setIsSubmitting:g,onSubmit:b,setIsSurveyCompleted:w,preventQuestionAnimation:_,preview:q,closePreview:E,...C})=>{const N=C.blockIndex??l.current,S=C.question??i[N].question,B=()=>S.name===d.current.question.name&&(!u.includes(S.type_info.question_type)||"DROPDOWN"===S.type_info.question_type&&"__others__"===o[S.name])&&!y(),I=()=>"RANGE"!==S.type_info.question_type&&!n.required&&S.name===d.current.question.name&&!y(),O=()=>("DROPDOWN"===S.type_info.question_type&&S.name!==d.current.question.name&&!n.required&&o[S.name],!1),R=()=>y()&&(e||"standard"!==r)&&S.name===d.current.question.name,z=("MULTI_SELECT"===d.current.question.type_info.question_type&&o[d.current.question.name]?.includes("__others__")||"DROPDOWN"===d.current.question.type_info.question_type&&"__others__"===o[d.current.question.name])&&(!s[d.current.question.name]||""===s[d.current.question.name]);return t.createElement("div",{className:"question-footer"},!(!e&&"standard"===r||0===N&&!o[S.name])&&t.createElement(F,{currentBlockIndex:m,currentBlockIndexOfBlocksWithQns:l,blocksWithQns:i,blocks:a,setHorizontalScrollUnits:v,preventQuestionAnimation:_}),(B()||O()||I()||R())&&t.createElement("div",{className:"action-buttons"},B()&&t.createElement(k,{onClick:()=>{h(i[N],null,!0)},disabled:d.current.required&&(!o[d.current.question.name]||Array.isArray(o[d.current.question.name])&&0===o[d.current.question.name].length)||d.current.question.type_info.meta?.othersRequired&&z,className:"next-button"},"Next"),I()&&t.createElement("button",{className:"skip-button",onClick:()=>x(S)},"Skip"),O()&&t.createElement("button",{className:"skip-button",onClick:()=>{d.current=i[N],m.current=a.findIndex((e=>e.name===i[N].name)),x(S)}},"Clear selection"),R()&&t.createElement("div",{className:"submit"},t.createElement(k,{disabled:(d.current.required||d.current.question.type_info.pivot_question)&&(null==o[d.current.question.name]||0===o[d.current.question.name]?.length)||d.current.question.type_info.meta?.othersRequired&&z||p,onClick:()=>{g(!0),b()}},p?"Submitting":"Submit survey"))))},L=({survey:e,surveyStyle:o="standard",placeholders:s,onSubmit:i,widget:a,npsValue:c,preview:l,mobilePreview:m,closePreview:d})=>{const p=e.question_details?.questions||[],f=e.meta?.blocks||[],[y,v]=n.useState(null),[h,x]=n.useState({}),[g,w]=n.useState(!1),[_,q]=n.useState([]),[N,S]=n.useState(0),[B,I]=n.useState(!1),[O,R]=n.useState(null),[z,Q]=n.useState({}),T=n.useRef(null),F=n.useRef(null),L=n.useRef(-1),V=n.useRef(null),P=n.useRef(0),Y=n.useRef(0),M=n.useRef(!1),A=n.useRef([]),H=n.useRef(null!=c&&"card"===o),$=n.useRef(null),U=n.useRef([]);n.useEffect((()=>{f&&($.current=f.find((e=>"TY"===e.name)),v(f.filter((e=>"TY"!==e.name))))}),[f]),n.useEffect((()=>{if(y)if(F.current=p.find((e=>e.type_info?.pivot_question))??p.find((e=>"RANGE"===e.type_info?.question_type))??p[0],null!=c){L.current=Math.min(F.current.type_info.validation.max,Math.max(F.current.type_info.validation.min,c));const e=p.find((e=>e.name===y[0].question_names[0]));T.current={...y[0],question:e},A.current=[...A.current,{...y[0],question:e}],q(A.current),x({Q_1:L.current})}else if(!T.current&&y.length>0)return T.current=y[0],void X(y[0])}),[y,c]),n.useEffect((()=>{_.length&&(A.current=_,Y.current=_.length-1),a||"standard"!==o?(V.current&&(V.current.style.maxHeight="unset"),U.current[P.current]=V.current?.scrollHeight||U.current[P.current]||0,V.current&&(V.current.style.maxHeight="100%")):V.current?.scrollIntoView({block:"start",behavior:"smooth"}),S(_.length-1)}),[_]),n.useEffect((()=>{Object.keys(h).length>0&&T.current.question&&(u.includes(T.current.question.type_info.question_type)&&("DROPDOWN"!==T.current.question.type_info.question_type||"__others__"!==h[T.current.question.name])||M.current)&&!G()&&Z()}),[h]),n.useEffect((()=>{if(null!=h?.[F.current?.name])if($.current?.is_based_on_rating){const e=F.current?.type_info?.choices[h?.[F.current?.name]-F.current?.type_info?.validation?.min??0]?.dependent_question_names,n=$.current?.question_names.find((n=>e?.includes(n))),t=p.find((e=>e.name===n));R(t)}else{const e=p.find((e=>e.name==$.current?.question_names[0]));R(e)}}),[h?.[F.current?.name]]);const j=()=>{i({...h,others_meta:z},(()=>{O?.type_info.meta?.skipThankYouPage?l?setTimeout((()=>{d?.()}),300):window.location.href=O?.type_info.meta?.redirectUrl:w(!0)}))},G=()=>P.current===y.length-1||"end"===T.current.branchOption,X=e=>{let n={};if(e.is_based_on_rating){const t=F.current?.type_info?.choices[h?.[F.current?.name]-F.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=p.find((e=>e.name===r))}else n=p.find((n=>n.name===e.question_names[0]));T.current.question=n;A.current.find((e=>e.question.name===n.name))?(S(N+1),Y.current+=1):q([...A.current,{...e,question:n}])},Z=()=>{if(G())w(!0);else{if(T.current.nextBlock)P.current=y.findIndex((e=>e.name===T.current.nextBlock));else if(T.current.question.type_info?.meta?.branches){const e=T.current.question.type_info?.meta?.branches,n=h[T.current.question.name];let t;if(t="RANGE"===T.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return j(),void w(!0);P.current=y.findIndex((e=>e.name===t.nextBlock))}else P.current+=1}else P.current+=1;T.current=y[P.current],X(y[P.current])}},K=e=>{M.current=!0,delete h[e.name],x({...h})},J=(e,n,t)=>{if(H.current=!1,t){if(M.current=!0,null!=h[e.question.name]&&e.name!==_[_.length-1].name){const[t,r]=(e=>{const n=_.findIndex((n=>n.name===e.name)),t=_.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=h[n.question.name],e)),{});return P.current=y.findIndex((n=>n.name===e.name)),[t,r]})(e);x({...r,...null!=n&&{[e.question.name]:n}}),A.current=t}else x({...h,...null!=n&&{[e.question.name]:n}});F?.current?.name==e?.question?.name&&(L.current=n)}else x({...h,...null!=n&&{[e.question.name]:n}})},ee=(e,n)=>{const t=_.find((n=>n.question.name===e));if(P.current=y.findIndex((e=>e.name===t.name)),T.current=t,null===n){const n={...z};delete n[e],Q({...n})}else Q({...z,[e]:n})};if(!T.current||!T.current.question)return null;const ne=("MULTI_SELECT"===T.current.question.type_info.question_type&&h[T.current.question.name]?.includes("__others__")||"DROPDOWN"===T.current.question.type_info.question_type&&"__others__"===h[T.current.question.name])&&(!z[T.current.question.name]||""===z[T.current.question.name]);return t.createElement("div",{className:`freemium-survey-components ${a?"widget-survey-components":""} ${m?"mobile-preview":""} ${o}-survey-style`,id:"freemium-survey"},g?null:t.createElement(b,{totalSteps:y.length,completedSteps:P.current}),t.createElement(r.SwitchTransition,{mode:"out-in"},t.createElement(r.CSSTransition,{key:String(g),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:a?"":"fade"},t.createElement("div",null,g?t.createElement(D,{thankYouQuestion:O,preview:l,placeholders:s,npsValue:L.current}):t.createElement(t.Fragment,null,t.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:a||"card"===o?{transform:`translateX(calc(-${N} * 100%))`,height:`${U.current[P.current]}px`,transition:H.current||_?.length<=1?"none":"all 300ms ease-out 0ms"}:{},className:"questions"},_.map(((e,n)=>t.createElement("div",{key:e.question.name,ref:V,className:"question-container "+(!a&&"card"!==o||Y.current===n?"":"hide-question-container")},t.createElement("div",{className:"question-text "+(0===n?"nps":""),dangerouslySetInnerHTML:{__html:C(e.question.text,s,L.current)},title:`question-${n}`,role:"heading","aria-level":1}),t.createElement("button",{disabled:!a&&"standard"===o,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),t.createElement(E,{question:e.question,isFinalQn:G(),formValues:h,othersMeta:z,autoFocus:Y.current===n,autoFocusDelay:"standard"===o?350:20,saveOthersValue:ee,onChangeHandler:n=>{M.current=!1,P.current=y.findIndex((n=>n.name===e.name)),T.current=e,J(e,n,!("DROPDOWN"===e.question.type_info.question_type&&"__others__"===n)&&u.includes(e.question.type_info.question_type)&&!G())}}),t.createElement("button",{disabled:!a&&"standard"===o,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),t.createElement(W,{question:e.question,block:e,blockIndex:n,widget:a,surveyStyle:o,formValues:h,othersMeta:z,blocksWithQns:_,blocks:y,thankYouQuestion:O,currentBlockIndexOfBlocksWithQns:Y,currentBlockIndexOfBlocks:P,currentEditingBlock:T,isSubmitting:B,isValuesCommitted:M,isCurrentBlockFinal:G,setHorizontalScrollUnits:S,handleFormValues:J,skipBlock:K,setIsSubmitting:I,onSubmit:j,setIsSurveyCompleted:w,preventQuestionAnimation:H,preview:l,closePreview:d})))),!a&&"card"!==o&&G()&&t.createElement("div",{className:"submit"},t.createElement(k,{disabled:(T.current.required||T.current.question.type_info.pivot_question)&&(null==h[T.current.question.name]||0===h[T.current.question.name]?.length)||T.current.question.type_info.meta?.othersRequired&&ne||B,onClick:()=>{I(!0),i({...h,others_meta:z},(()=>{O?.type_info.meta?.skipThankYouPage?l?setTimeout((()=>{d?.()}),300):window.location.href=O?.type_info.meta?.redirectUrl:w(!0)}))}},B?"Submitting":"Submit survey"))))))))};exports.BUTTON_SIZE_VARIANTS={LARGE:"large",MINI:"mini",NORMAL:"normal"},exports.Button=k,exports.CheckboxGroup=v,exports.Input=p,exports.NPS=i,exports.ProgressBar=b,exports.Radio=g,exports.RadioGroup=x,exports.Survey=e=>{const n=N(e.survey);return t.createElement(t.Fragment,null,"standard"===e.surveyStyle?t.createElement(L,Object.assign({},e,{survey:n})):t.createElement(O,Object.assign({},e,{survey:n})))},exports.TextArea=f,exports.WebInAppSurvey=e=>{const n=N(e.survey);return t.createElement(T,Object.assign({},e,{survey:n}))};
|
package/lib/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{useRef as n,forwardRef as t,useEffect as r,useMemo as o,useState as s}from"react";import{SwitchTransition as i,CSSTransition as a,TransitionGroup as u}from"react-transition-group";import c from"react-dom";function l(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}l(".freemium-survey-components .nps-container {\n margin: 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n}\n.freemium-survey-components .nps-container .footer {\n border-top: 1px solid #ebeff3;\n padding-top: 20px;\n display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n color: #666;\n}\n.freemium-survey-components .nps-container .footer:empty {\n display: none;\n}\n.freemium-survey-components .nps-container .nps-scale {\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale .button-container {\n flex-direction: column;\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components .nps-container .nps-scale .help-text-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.freemium-survey-components .nps-container .nps-scale .positive-text {\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .nps-scale .negative-text {\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .nps-scale span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .nps-scale button {\n display: inline-block;\n font-size: 1rem;\n white-space: nowrap;\n vertical-align: middle;\n background: none;\n border: none;\n box-shadow: none;\n cursor: pointer;\n text-align: center;\n font-weight: 400;\n border-radius: 4px;\n margin: 0;\n outline: none;\n margin-left: -1px;\n width: 40px;\n height: 40px;\n transform: scale(1);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover {\n transition: background 0.2s ease-in, border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover, .freemium-survey-components .nps-container .nps-scale button:focus {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .nps-scale.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .nps-scale.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .nps-scale.highlighted button:hover, .freemium-survey-components .nps-container .nps-scale.highlighted button:focus, .freemium-survey-components .nps-container .nps-scale.highlighted button.active {\n background: var(--default-brand-color) !important;\n background: var(--brand-color, var(--default-brand-color)) !important;\n}\n.freemium-survey-components .nps-container .nps-scale .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-weight: 500;\n background-color: #ebeff3;\n border-radius: 4px;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choices {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice {\n background: #ebeff3;\n color: #000;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active, .freemium-survey-components .nps-container .nps-scale.standard .choice:hover {\n background: #e43e3d;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):hover {\n background: #00af50;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(3):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(4):hover {\n background: #f8c43e;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active {\n color: #fff;\n transform: scale(1.2);\n}\n\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale button,\n.card-survey-style .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}");const m=t=>{const{type_info:{linear_scale:{button_style:r="highlighted",button_shape:o="rounded"}={},rating_presets:{start:s="Very unlikely",end:i="Very likely"}={},validation:{min:a},footer_text:u}}=t,c=e=>{switch(e){case e<=6:return"detractor";case e<=8:return"passive";default:return"promoter"}},l=n(Array.from({length:10+(0===a?1:0)},((e,n)=>n+a)));return e.createElement("div",{className:"nps-container","data-test-input":"nps"},e.createElement("div",{className:`nps-scale ${o} ${r}`},e.createElement("div",{className:"button-container"},e.createElement("div",{className:"choices",role:"radiogroup","aria-required":!0},l.current.map((n=>e.createElement("button",{role:"radio","aria-checked":t.npsValue===n,key:n,"data-test-nps-choice":n,onClick:e=>{t.onChangeHandler(n)},className:`choice ${c(n)} ${t.npsValue===n&&"active"}`},n)))),e.createElement("div",{className:"help-text-container"},e.createElement("span",{className:"negative-text",role:"note"},`${a} - ${s}`),e.createElement("span",{className:"positive-text",role:"note"},`${l.current[l.current.length-1]} - ${i}`)))),e.createElement("div",{className:"footer",role:"note"},u))},d=(e,n)=>(e.defaultProps=n,e);l('.freemium-survey-components .input-container,\n.freemium-survey-components .textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n border-radius: 4px;\n position: relative;\n}\n.freemium-survey-components label.input-label {\n display: inline-block;\n padding-bottom: 8px;\n padding-left: 2px;\n font-size: 0.75rem;\n font-weight: 400;\n}\n.freemium-survey-components label.required::after {\n content: "*";\n position: relative;\n top: 2px;\n font-weight: 500;\n font-size: 0.85rem;\n padding-left: 3px;\n color: #d72d30;\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n transition: border-color 0.2s linear;\n background: #fff;\n}\n.freemium-survey-components .textarea-container .input-basic {\n flex-direction: column;\n align-items: unset;\n}\n.freemium-survey-components .input-basic.error {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error[focus-within] {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic.error:focus-within {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: 0.2s linear;\n}\n.freemium-survey-components .input-basic[focus-within] {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic[focus-within] .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .input-basic:focus-within .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .end-max-length {\n transition: opacity ease 0.2s;\n opacity: 0;\n padding: 0 8px;\n font-size: 0.75rem;\n color: #264966;\n}\n.freemium-survey-components .textarea-container .end-max-length {\n padding: 8px;\n align-self: flex-end;\n}\n.freemium-survey-components span.input-error {\n display: block;\n padding-left: 2px;\n padding-top: 4px;\n font-size: 0.9rem;\n color: #d72d30;\n}\n.freemium-survey-components input[type=text] {\n padding: 6px 12px;\n flex: 1;\n border: unset;\n height: 32px;\n font-size: 1rem;\n /* line-height: ${typography.input.text.lineHeight}; */\n border-radius: 4px;\n}\n.freemium-survey-components input[type=text],\n.freemium-survey-components textarea {\n outline: none;\n border: none;\n}\n.freemium-survey-components input[type=text]::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 12px;\n flex: 1;\n border: unset;\n resize: none;\n font-size: 1rem;\n /* line-height: ${typography.input.text.lineHeight}; */\n border-radius: 4px;\n}\n.freemium-survey-components textarea::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}');const p=["RANGE","NPS","RADIO","DROPDOWN"],f={default:500,compact:500,cozy:400},y={isRequired:!1,showCount:!0,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},v=t(((t,o)=>{const s=n(null);r((()=>{t.autoFocusInput&&setTimeout((()=>{s.current?.focus()}),300+t.autoFocusDelay)}),[t.autoFocusInput]);const{inputStyle:i,style:a,className:u,showCount:c,isErrored:l,startLabel:m,isRequired:d,errorText:p,endLabel:f,maxLength:y=256,onChange:v,autoFocusInput:h,...x}=t;return e.createElement("div",{className:"input-container",style:a},t.label&&e.createElement("label",{className:"input-label "+(d?"required":"")},t.label),e.createElement(e.Fragment,null,m&&e.createElement("div",{className:"start-label"},m),e.createElement("div",{className:`input-basic ${l?"error":""}${u||""}`},e.createElement("input",Object.assign({},x,{type:"text",autoComplete:"off",ref:s,style:i,onChange:e=>{e.target.value?.length>y||v?.(e)}})),c&&y>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length||0}/${y}`)),f&&e.createElement("div",{className:"end-label"},f)),l&&p&&e.createElement("span",{className:"input-error"},t.errorText))})),h=t(((t,o)=>{const s=n(null);r((()=>{t.autoFocusInput&&setTimeout((()=>{s.current?.focus()}),300+t.autoFocusDelay)}),[t.autoFocusInput]);const{inputStyle:i,style:a,className:u,showCount:c,maxLength:l=1500,startLabel:m,isRequired:d,autoFocusInput:p,onChange:f,...y}=t;return e.createElement(e.Fragment,null,e.createElement("div",{className:"textarea-container",style:a},t.label&&e.createElement("label",{className:"input-label "+(d?"required":"")},t.label),m&&e.createElement("div",{className:"start-label"},m),e.createElement("div",{className:`input-basic ${u||""}`},e.createElement("textarea",Object.assign({},y,{autoComplete:"off",ref:s,style:i,onChange:e=>{e.target.value?.length>l||f?.(e)}})),c&&l&&l>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length||0}/${l}`)),t.endLabel&&e.createElement("div",{className:"end-label"},t.endLabel)))})),x=d(v,y),g=d(h,y);l('.freemium-survey-components .checkbox-group {\n width: 100%;\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n flex-direction: column;\n white-space: nowrap;\n flex-wrap: wrap;\n}\n.freemium-survey-components .icon-container {\n display: inline-block;\n flex: 0 0 12px;\n width: 12px;\n height: 12px;\n min-width: 12px;\n min-height: 12px;\n color: inherit;\n position: absolute;\n left: 1px;\n top: 2px;\n}\n.freemium-survey-components .tick-icon {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n color: inherit;\n fill: currentColor;\n}\n.freemium-survey-components input[type=checkbox] {\n position: absolute;\n clip: rect(0px 0px 0px 0px);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=checkbox]:focus ~ .checkbox {\n /* box-shadow: ${pseudo.focus} 0px 0px 0px 2px; */\n box-shadow: var(--default-brand-color) 0px 0px 0px 2px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n opacity: 1;\n line-height: 1.2;\n cursor: pointer;\n font-size: 1rem;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components .checkbox-label:hover {\n border-color: #92a2b1;\n}\n.freemium-survey-components .checkbox-label.disabled {\n opacity: 0.5;\n cursor: "not-allowed";\n}\n.freemium-survey-components .checkbox {\n transition: background-color ease-in 0.2s;\n min-width: 14px;\n min-height: 14px;\n min-height: 14px;\n max-height: 14px;\n border-radius: 2px;\n position: relative;\n margin-right: 16px;\n background-color: #fff;\n border: 1px solid;\n text-align: left;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:disabled ~ .checkbox:hover {\n box-shadow: unset;\n border-color: unset;\n}');const b=()=>e.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},e.createElement("path",{d:"M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",fill:"#fff",fillRule:"evenodd"})),w=({values:t=[],othersValue:o="",options:s,name:i,autoFocusGroup:a,autoFocusDelay:u,onChangeHandler:c,saveOthersValue:l})=>{const m=t.includes("__others__"),d=n(null);return r((()=>{a&&setTimeout((()=>{d.current?.focus()}),300+u)}),[a]),e.createElement("div",{className:"checkbox-group"},e.createElement("button",{ref:d,className:"autofocus-button","aria-hidden":!0}),s?.filter((e=>"__others__"!==e.value)).map(((n,r)=>e.createElement(k,{key:n.id,checked:t?.includes(n.value),name:n.value,id:n.id,onChange:(e,r)=>{if(r)c([...t||[],n.value]);else{const e=t.indexOf(n.value);e>-1&&t.splice(e,1),c([...t])}}},n.value))),s?.find((e=>"__others__"===e.value))&&e.createElement(k,{key:"others",checked:m,name:"__others__",id:"__others__",onChange:(e,n)=>{if(n)c([...t,"__others__"]);else{const e=t.findIndex((e=>"__others__"===e));t.splice(e,1),c(t)}}},"Others"),m&&e.createElement(e.Fragment,null,e.createElement(x,{placeholder:"Enter your comment",value:o,onChange:e=>{l(i,e.target.value)},autoFocusDelay:10,label:""})))},k=d((t=>{const o=n(null);return r((()=>{t.autoFocus&&setTimeout((()=>{o.current?.focus()}),320)}),[]),e.createElement("label",{className:`checkbox-label ${t.disabled&&"disabled"}`},e.createElement("input",{ref:o,id:t.id,type:"checkbox",name:t.name,readOnly:t.readOnly,disabled:t.disabled,"aria-disabled":t.disabled,checked:t.checked,onChange:t.readOnly?()=>{}:e=>t.onChange(e,e.target.checked)}),e.createElement("div",{className:"checkbox"},t.checked&&e.createElement("div",{className:"icon-container"},e.createElement(b,null)," ")),e.createElement("div",null,t.children))}),{checked:!1});l('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n width: 100%;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: background-color ease-in 0.2s;\n min-width: 18px;\n max-width: 18px;\n min-height: 18px;\n max-height: 18px;\n border-radius: 50%;\n position: relative;\n margin-right: 16px;\n text-align: left;\n}\n.freemium-survey-components .radio:before {\n left: 3px;\n top: 3px;\n content: "";\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n transition: all ease-in 0.2s;\n background-color: #fff;\n}\n.freemium-survey-components .radio-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n cursor: pointer;\n line-height: 1.2;\n font-size: 1rem;\n font-weight: 400;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n color: #3a4b67;\n}\n.freemium-survey-components input[type=radio] {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=radio]:focus ~ .radio {\n /* box-shadow: ${pseudo.focus} 0px 0px 0px 3px; */\n box-shadow: var(--default-brand-color) 0px 0px 0px 3px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 3px;\n border-color: transparent;\n}\n.freemium-survey-components input[type=radio]:checked ~ .radio:before {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .radio-label:hover {\n border-color: #92a2b1;\n}');const _=({name:t,options:o,value:s,autoFocusGroup:i,autoFocusDelay:a,onChangeHandler:u,saveOthersValue:c,othersOption:l,othersRequired:m,othersValue:d,isFinalQn:p})=>{const f=n(null);return r((()=>{i&&setTimeout((()=>{f.current?.focus()}),300+a)}),[i]),e.createElement("div",{className:"radio-group",role:"radiogroup"},e.createElement("button",{ref:f,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),o?.sort(((e,n)=>"__others__"===e.value?1:"__others__"===n.value?-1:0))?.map(((n,r)=>e.createElement(q,{key:n.value,value:n.value,name:t,onChange:e=>{"__others__"!==e.currentTarget.value&&c(t,null),u(e.currentTarget.value)},checked:s===n.value},"__others__"===n.value?"Others":n.value))),"__others__"===s&&e.createElement(e.Fragment,null,e.createElement(x,{value:d??"",onChange:e=>{"__others__"!==s&&p&&u("__others__"),c(t,e.target.value)},placeholder:"Enter your comment",label:"",autoFocusDelay:10})))},q=d((t=>{const o=n(null);return r((()=>{t.autoFocus&&setTimeout((()=>{o.current?.focus()}),320)}),[]),e.createElement("label",{className:"radio-label"},e.createElement("input",{ref:o,type:"radio",name:t.name,value:t.value,checked:t.checked,onChange:t.onChange}),e.createElement("div",{className:"radio"}),e.createElement("div",null,t.children))}),{checked:!1,autoFocus:!1});l(".progressbar-container {\n width: 100%;\n height: 4px;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n text-align: left;\n overflow: hidden;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n}\n\n.progressbar-container.widget {\n position: absolute;\n top: 0;\n height: 2px;\n}\n\n.progressbar {\n transition: transform 0.2s linear 200ms;\n transform-origin: left;\n height: 100%;\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}");const E=n=>{const{totalSteps:t,completedSteps:r,widget:o}=n;return e.createElement("div",{className:"progressbar-container "+(o?"widget":"")},e.createElement("div",{className:"progressbar",style:{width:(r>0?100/t:0)+"%",transform:`scaleX(${r})`}}))};l(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n padding: 8px 16px;\n cursor: pointer;\n line-height: 1.5;\n text-align: center;\n font-weight: 600;\n letter-spacing: 0.3px;\n border-radius: 4px;\n white-space: nowrap;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: --default-button-text-color;\n color: var(--button-text-color, --default-button-text-color);\n background: var(--default-brand-color);\n background: var(--brand-color, var(--default-brand-color));\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n border-radius: 4px;\n min-width: 200px;\n max-width: -webkit-fit-content;\n max-width: -moz-fit-content;\n max-width: fit-content;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n transform: translateY(-4px);\n}\n.freemium-survey-components .action-button[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.freemium-survey-components button:focus:not(:active) {\n /* box-shadow: 0 0 0 2px ${pseudo.focus}; */\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .action-button {\n min-width: 120px;\n }\n}\n.widget-survey-components .action-button {\n min-width: 120px;\n}\n\n.freemium-survey-components.mobile-preview .action-button {\n min-width: 120px;\n}");const C=()=>e.createElement(e.Fragment,null,"..."),N={LARGE:"large",MINI:"mini",NORMAL:"normal"},B=n=>{const{inline:t=!1,children:r,disabled:o,className:s="",htmlType:i,type:a="primary",onClick:u,size:c,overrideStyleClassName:l="",loading:m=!1,...d}=n;return e.createElement("button",Object.assign({style:t?{display:"inline-block"}:{},disabled:o,className:`action-button ${s} ${l}`,type:i,onClick:u},d),m?e.createElement(C,null):r)},I=()=>e.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M7.82585 6.15754C7.98999 6.32147 8.08232 6.54389 8.08252 6.77587L8.08252 7.2192C8.07983 7.45069 7.98788 7.6722 7.82585 7.83754L1.82919 13.8225C1.77496 13.8772 1.71044 13.9206 1.63936 13.9502C1.56827 13.9798 1.49203 13.9951 1.41502 13.9951C1.33801 13.9951 1.26177 13.9798 1.19068 13.9502C1.1196 13.9206 1.05508 13.8772 1.00085 13.8225L0.172521 12.9942C0.118197 12.941 0.0750381 12.8774 0.0455752 12.8073C0.0161124 12.7372 0.000937578 12.6619 0.000937585 12.5859C0.000937592 12.5098 0.0161125 12.4345 0.0455753 12.3644C0.0750381 12.2943 0.118197 12.2308 0.172521 12.1775L5.36419 6.99754L0.172522 1.81754C0.117847 1.76331 0.0744506 1.69879 0.0448352 1.62771C0.0152208 1.55662 -2.75162e-05 1.48038 -2.75094e-05 1.40337C-2.75027e-05 1.32636 0.0152208 1.25012 0.0448353 1.17904C0.0744507 1.10795 0.117847 1.04343 0.172522 0.989205L1.00086 0.172537C1.05508 0.117862 1.1196 0.0744661 1.19069 0.0448507C1.26177 0.0152353 1.33801 -1.20337e-05 1.41502 -1.2027e-05C1.49203 -1.20203e-05 1.56827 0.0152353 1.63936 0.0448507C1.71044 0.0744661 1.77496 0.117862 1.82919 0.172537L7.82585 6.15754Z",fill:"#6B6B6B"})),O=()=>e.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M0.256667 7.83755C0.0925257 7.67361 0.000204227 7.4512 0 7.21921V6.77588C0.00268801 6.5444 0.0946357 6.32289 0.256667 6.15755L6.25333 0.172549C6.30756 0.117874 6.37208 0.0744776 6.44316 0.0448625C6.51425 0.0152474 6.59049 0 6.6675 0C6.74451 0 6.82075 0.0152474 6.89184 0.0448625C6.96292 0.0744776 7.02744 0.117874 7.08167 0.172549L7.91 1.00088C7.96432 1.05411 8.00748 1.11764 8.03694 1.18776C8.06641 1.25787 8.08158 1.33316 8.08158 1.40922C8.08158 1.48527 8.06641 1.56056 8.03694 1.63067C8.00748 1.70079 7.96432 1.76432 7.91 1.81755L2.71833 6.99755L7.91 12.1775C7.96467 12.2318 8.00807 12.2963 8.03769 12.3674C8.0673 12.4385 8.08255 12.5147 8.08255 12.5917C8.08255 12.6687 8.0673 12.745 8.03769 12.8161C8.00807 12.8871 7.96467 12.9517 7.91 13.0059L7.08167 13.8225C7.02744 13.8772 6.96292 13.9206 6.89184 13.9502C6.82075 13.9799 6.74451 13.9951 6.6675 13.9951C6.59049 13.9951 6.51425 13.9799 6.44316 13.9502C6.37208 13.9206 6.30756 13.8772 6.25333 13.8225L0.256667 7.83755Z",fill:"#6B6B6B"})),S=({question:n,formValues:t,othersMeta:r,onChangeHandler:o,saveOthersValue:s,autoFocus:i,autoFocusDelay:a,isFinalQn:u})=>{switch(n.type_info.question_type){case"RANGE":return e.createElement(m,{type_info:n.type_info,onChangeHandler:o,npsValue:t[n.name]});case"CHECKBOX":case"MULTI_SELECT":return e.createElement(w,{name:n.name,autoFocusGroup:i,values:t[n.name],othersValue:r[n.name],options:n.type_info.choices,onChangeHandler:o,saveOthersValue:s,othersOption:n.type_info.meta?.othersOption,othersRequired:n.type_info.meta?.othersRequired,autoFocusDelay:a});case"RADIO":case"DROPDOWN":return e.createElement(_,{autoFocusGroup:i,autoFocusDelay:a,name:n.name,onChangeHandler:o,saveOthersValue:s,options:n.type_info.choices,value:t[n.name],othersValue:r[n.name],othersOption:n.type_info.meta?.othersOption,othersRequired:n.type_info.meta?.othersRequired,isFinalQn:u});case"INPUT":case"TEXT":return n.type_info?.meta?.readOnly?e.createElement("div",{className:"message-container"},n.type_info?.meta?.value):e.createElement("div",{className:"responsive-text-field"},e.createElement(x,{autoFocusInput:i,autoFocusDelay:a,label:"",isRequired:n.is_required,value:t[n.name]||"",placeholder:n.type_info?.meta?.placeholder??"",onChange:e=>o(e.target.value)}),e.createElement(g,{autoFocusInput:i,autoFocusDelay:a,label:"",isRequired:n.is_required,placeholder:n.type_info?.meta?.placeholder??"",value:t[n.name]||"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return e.createElement(g,{autoFocusInput:i,autoFocusDelay:a,label:"",isRequired:n.is_required,placeholder:n.type_info?.meta?.placeholder??"",value:t[n.name]||"",onChange:e=>o(e.target.value)});default:return console.error(`Question type ${n.type_info.question_type} not found`),null}},z=(e,n,t)=>{if(e){let r={"{{nps.rating}}":t};n&&(r={...r,...n});const o=new RegExp(Object.keys(r).join("|"),"gi");e=e.replace(o,(function(e){return r[e.toLowerCase()]}))}return e},Q=e=>o((()=>{const n=JSON.parse(JSON.stringify(e)),t=[];return(n.question_details?.questions||[]).forEach((e=>{const n=e.type_info?.meta?.block;n&&(n.question_names||(n.question_names=[e.name]),t.push(n))})),{...n,meta:{...n.meta,blocks:t}}}),[e]);l(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 560px;\n --default-widget-max-height: 400px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-components.card-survey-style {\n padding: 20px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button svg {\n transform: rotate(90deg);\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.card-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n transition: opacity 50ms ease-out;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.card-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.card-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.card-survey-style .fade-enter .question-container {\n opacity: 0;\n transform: translateY(15px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container {\n opacity: 0.05;\n transform: translateY(-15px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter .question-container {\n opacity: 0;\n transform: translateY(-15px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n opacity: 0.05;\n transform: translateY(15px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.card-survey-style .question-footer {\n display: flex;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.card-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.card-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .skip-button {\n font-weight: 500;\n color: #3a4b67;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.card-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.card-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.card-survey-style .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.card-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.card-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.card-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.card-survey-style .message-container:empty {\n display: none;\n}\n\n@media (max-width: 550px) {\n div.freemium-survey-components.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n div.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n div.freemium-survey-components.card-survey-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons button {\n max-width: unset;\n }\n div.freemium-survey-components.card-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .thankyou .text {\n width: auto;\n }\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .responsive-text-field .input-container {\n display: none;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .freemium-survey-step-navigation {\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-buttons {\n flex-direction: column;\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-buttons button {\n max-width: unset;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-button {\n max-width: unset;\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .thankyou .text {\n width: auto;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const R=({thankYouQuestion:n,preview:t,placeholders:o,npsValue:s})=>(r((()=>{t||n.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=n.type_info.meta?.redirectUrl}),1e3*n.type_info.meta?.redirectDelay??1e4)}),[]),e.createElement("div",{className:"question-container thankyou"},e.createElement("div",{className:"heading"},"Thank you!"),e.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:z(n.text,o,s)}}),n.type_info.meta?.redirectUrl&&e.createElement("div",{style:{width:"100%"}},e.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",n.type_info.meta?.redirectDelay," seconds.",e.createElement("br",null)),e.createElement("a",{className:"link",href:n.type_info.meta?.redirectUrl},n?.type_info.meta?.redirectUrl)))),D=({currentBlockIndex:n,currentBlockIndexOfBlocksWithQns:t,setCurrentBlockIndexOfBlocksWithQnsDirty:r,blocksWithQns:o,blocks:s,setHorizontalScrollUnits:i,preventQuestionAnimation:a,tempCurrentBlockIndexOfBlocksWithQns:u,setReverse:c,reverse:l})=>e.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},e.createElement("button",{disabled:0==t.current,className:"navigation-button",onClick:()=>{l?(t.current=Math.max(t.current-1,0),n.current=s.findIndex((e=>e.name===o[t.current].name))):(u.current=Math.max(t.current-1,0),n.current=s.findIndex((e=>e.name===o[u.current].name))),a.current=!1,r.current=!0,c(!0),i({})}},e.createElement(O,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=o.length-1,onClick:()=>{a.current=!1,l?(u.current=Math.min(t.current+1,o.length-1),n.current=s.findIndex((e=>e.name===o[u.current].name))):(t.current=Math.min(t.current+1,o.length-1),n.current=s.findIndex((e=>e.name===o[t.current].name))),r.current=!0,c(!1),i({})}},e.createElement(I,null))),F=({widget:n,surveyStyle:t,formValues:r,blocksWithQns:o,blocks:s,thankYouQuestion:i,currentBlockIndexOfBlocksWithQns:a,currentBlockIndexOfBlocks:u,currentEditingBlock:c,isSubmitting:l,isValuesCommitted:m,isCurrentBlockFinal:d,setHorizontalScrollUnits:f,handleFormValues:y,skipBlock:v,setIsSubmitting:h,onSubmit:x,setIsSurveyCompleted:g,preventQuestionAnimation:b,preview:w,closePreview:k,setReverse:_,tempCurrentBlockIndexOfBlocksWithQns:q,question:E,block:C,reverse:N,othersMeta:I,setCurrentBlockIndexOfBlocksWithQnsDirty:O,...S})=>{const z=S.blockIndex??a.current,Q=()=>(!p.includes(E.type_info.question_type)||"DROPDOWN"===E.type_info.question_type&&"__others__"===r[E.name])&&!d(),R=()=>"RANGE"!==E.type_info.question_type&&!C.required&&!d(),F=()=>("DROPDOWN"===E.type_info.question_type&&!C.required&&r[E.name],!1),T=()=>d()&&(n||"standard"!==t),W=("MULTI_SELECT"===c.current.question.type_info.question_type&&r[c.current.question.name]?.includes("__others__")||"DROPDOWN"===c.current.question.type_info.question_type&&"__others__"===r[c.current.question.name])&&(!I[c.current.question.name]||""===I[c.current.question.name]);return e.createElement("div",{className:"question-footer"},!(!n&&"standard"===t||0===z&&void 0===r[E.name]||0===a.current&&!N)&&e.createElement(D,{currentBlockIndex:u,currentBlockIndexOfBlocksWithQns:a,blocksWithQns:o,blocks:s,setHorizontalScrollUnits:f,preventQuestionAnimation:b,setReverse:_,tempCurrentBlockIndexOfBlocksWithQns:q,reverse:N,setCurrentBlockIndexOfBlocksWithQnsDirty:O}),(Q()||F()||R()||T())&&e.createElement("div",{className:"action-buttons"},Q()&&e.createElement(B,{onClick:()=>{O.current=!1,_(!1),y(o[z],null,!0)},disabled:c.current.required&&(!r[c.current.question.name]||Array.isArray(r[c.current.question.name])&&0===r[c.current.question.name].length)||c.current.question.type_info.meta?.othersRequired&&W,className:"next-button"},"Next"),R()&&e.createElement("button",{className:"skip-button",onClick:()=>{O.current=!1,_(!1),v(E)}},"Skip"),T()&&e.createElement("div",{className:"submit"},e.createElement(B,{disabled:(c.current.required||c.current.question.type_info.pivot_question)&&(null==r[c.current.question.name]||0===r[c.current.question.name]?.length)||c.current.question.type_info.meta?.othersRequired&&W||l,onClick:()=>{h(!0),x()}},l?"Submitting":"Submit survey")),F()&&e.createElement("button",{className:"skip-button",onClick:()=>{_(!1),c.current=o[z],u.current=s.findIndex((e=>e.name===o[z].name)),v(E)}},"Clear selection")))},T=({survey:t,surveyStyle:o="standard",placeholders:u,onSubmit:c,widget:l,npsValue:m,preview:d,mobilePreview:f,closePreview:y})=>{const v=t.question_details?.questions||[],h=t.meta?.blocks||[],[x,g]=s(null),[b,w]=s({}),[k,_]=s(!1),[q,C]=s([]),[N,B]=s({}),[I,O]=s(!1),[Q,D]=s(null),[T,W]=s({}),L=n(null),V=n(null),Y=n(-1),P=n(null),M=n(0),$=n(0),A=n(!1),H=n(!1),U=n([]),j=e.useRef(null!=m&&"card"===o),G=n(null),X=n(0),[K,Z]=s(!1),J=n();r((()=>{h&&(G.current=h.find((e=>"TY"===e.name)),g(h.filter((e=>"TY"!==e.name))))}),[h]),r((()=>{A.current&&($.current=X.current,B({}))}),[K]),r((()=>{if(x)if(V.current=v.find((e=>e.type_info?.pivot_question))??v.find((e=>"RANGE"===e.type_info?.question_type))??v[0],null!=m){Y.current=Math.min(V.current.type_info.validation.max,Math.max(V.current.type_info.validation.min,m));const e=v.find((e=>e.name===x[0].question_names[0]));L.current={...x[0],question:e},U.current=[...U.current,{...x[0],question:e}],C(U.current),w({Q_1:Y.current})}else if(!L.current&&x.length>0)return L.current=x[0],void te(x[0])}),[x,m]),e.useEffect((()=>{q.length&&(U.current=q,$.current=q.length-1),B({})}),[q]),r((()=>{Object.keys(b).length>0&&L.current.question&&(p.includes(L.current.question.type_info.question_type)&&("DROPDOWN"!==L.current.question.type_info.question_type||"__others__"!==b[L.current.question.name])||H.current)&&!ne()&&(null!=m&&1==q.length?J.current?(clearTimeout(J.current),J.current=null,re()):J.current=setTimeout((()=>{re()}),1500):re())}),[b]),r((()=>{if(null!=b?.[V.current?.name])if(G.current?.is_based_on_rating){const e=V.current?.type_info?.choices[b?.[V.current?.name]-V.current?.type_info?.validation?.min??0]?.dependent_question_names,n=G.current?.question_names.find((n=>e?.includes(n))),t=v.find((e=>e.name===n));D(t)}else{const e=v.find((e=>e.name==G.current?.question_names[0]));D(e)}}),[b?.[V.current?.name]]);const ee=()=>{c({...b,others_meta:T},(()=>{Q?.type_info.meta?.skipThankYouPage?d?setTimeout((()=>{y?.()}),300):window.location.href=Q?.type_info.meta?.redirectUrl:_(!0)}))},ne=()=>(M.current===x.length-1||"end"===L.current.branchOption)&&$.current===q.length-1,te=e=>{let n={};if(e.is_based_on_rating){const t=V.current?.type_info?.choices[b?.[V.current?.name]-V.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=v.find((e=>e.name===r))}else n=v.find((n=>n.name===e.question_names[0]));L.current.question=n;U.current.find((e=>e.question.name===n.name))?($.current+=1,B({})):C([...U.current,{...e,question:n}])},re=()=>{if(ne())_(!0);else{if(L.current.nextBlock)M.current=x.findIndex((e=>e.name===L.current.nextBlock));else if(L.current.question.type_info?.meta?.branches){const e=L.current.question.type_info?.meta?.branches,n=b[L.current.question.name];let t;if(t="RANGE"===L.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return ee(),void _(!0);M.current=x.findIndex((e=>e.name===t.nextBlock))}else M.current+=1}else M.current+=1;L.current=x[M.current],te(x[M.current])}},oe=(e,n,t)=>{if(j.current=!1,t){if(H.current=!0,null!=b[e.question.name]&&e.name!==q[q.length-1].name){const[t,r]=(e=>{const n=q.findIndex((n=>n.name===e.name)),t=q.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=b[n.question.name],e)),{});return M.current=x.findIndex((n=>n.name===e.name)),[t,r]})(e);w({...r,...null!=n&&{[e.question.name]:n}}),U.current=t}else w({...b,...null!=n&&{[e.question.name]:n}});V?.current?.name==e?.question?.name&&(Y.current=n)}else w({...b,...null!=n&&{[e.question.name]:n}})};if(!L.current||!L.current.question)return null;const se=q[Math.min($.current??q.length-1,q.length-1)];return e.createElement("div",{className:`freemium-survey-components ${f?"mobile-preview":""} ${o}-survey-style`,id:"freemium-survey"},k?null:e.createElement(E,{totalSteps:x.length,completedSteps:M.current+(k?1:0)}),e.createElement(i,{mode:"out-in"},e.createElement(a,{key:$.current+String(k),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:K?"fade-reverse":"fade"},e.createElement("div",{className:"questions"},k?e.createElement(R,{thankYouQuestion:Q,preview:d,placeholders:u,npsValue:Y.current}):e.createElement("div",{ref:P,id:`${se.question.name}`,className:`question-container ${l||"card"===o}`,"data-test-question-name":se.question.name},e.createElement("div",{className:"question-text",dangerouslySetInnerHTML:{__html:z(se.question.text,u,Y.current)},title:`question-${$.current}`,role:"heading","aria-level":1}),e.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:{width:"100%"}},e.createElement(S,{question:se.question,isFinalQn:ne(),formValues:b,othersMeta:T,autoFocus:!0,autoFocusDelay:"standard"===o?350:0,saveOthersValue:(e,n)=>{if(null===n){const n={...T};delete n[e],W({...n})}else W({...T,[e]:n})},onChangeHandler:e=>{H.current=!1,M.current=x.findIndex((e=>e.name===se.name)),L.current=se,A.current=!1,Z(!1),oe(se,e,!("DROPDOWN"===se.question.type_info.question_type&&"__others__"===e)&&p.includes(se.question.type_info.question_type)&&!ne())}})),e.createElement(F,{question:se.question,block:se,widget:l,surveyStyle:o,formValues:b,othersMeta:T,blocksWithQns:q,blocks:x,thankYouQuestion:Q,currentBlockIndexOfBlocksWithQns:$,reverse:K,setReverse:Z,currentBlockIndexOfBlocks:M,currentEditingBlock:L,isSubmitting:I,isValuesCommitted:H,isCurrentBlockFinal:ne,setHorizontalScrollUnits:B,handleFormValues:oe,skipBlock:e=>{H.current=!0,delete b[e.name],w({...b})},setIsSubmitting:O,onSubmit:ee,setIsSurveyCompleted:_,preventQuestionAnimation:j,preview:d,closePreview:y,tempCurrentBlockIndexOfBlocksWithQns:X,setCurrentBlockIndexOfBlocksWithQnsDirty:A}))))))};l(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n}\n\n.freemium-survey-components.widget-survey-components {\n overflow: hidden;\n}\n.freemium-survey-components.widget-survey-components * {\n scrollbar-color: rgba(216, 216, 216, 0.5) transparent !important;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar {\n height: auto;\n height: initial;\n width: 8px;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar-track {\n background: transparent !important;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar-thumb {\n border-radius: 5px;\n background: rgba(216, 216, 216, 0.5) !important;\n}\n.freemium-survey-components.widget-survey-components p {\n margin: 0;\n}\n.freemium-survey-components.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n position: relative;\n display: flex;\n justify-content: row;\n align-items: flex-end;\n height: 100%;\n transition: height 200ms ease;\n}\n.freemium-survey-components.widget-survey-components .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n text-align: center;\n max-height: 100%;\n min-width: 100%;\n max-width: 700px;\n margin: 0 auto;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n padding: 28px;\n padding-top: 0;\n grid-gap: 28px;\n gap: 28px;\n position: absolute;\n overflow: auto;\n}\n.freemium-survey-components.widget-survey-components .question-wrapper {\n width: 100%;\n flex-grow: 1;\n padding: 2px;\n}\n.freemium-survey-components.widget-survey-components .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.widget-survey-components .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.widget-survey-components .question-text p {\n all: inherit;\n}\n.freemium-survey-components.widget-survey-components .nps-container .footer {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-enter {\n opacity: 1;\n transform: translateX(80px);\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-enter-active {\n position: absolute;\n opacity: 1;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-enter-done {\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-exit {\n opacity: 0.05;\n pointer-events: none;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-exit-active {\n pointer-events: none;\n opacity: 0;\n transform: translateX(-80px);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-enter {\n opacity: 0;\n position: absolute;\n transform: translateX(-80px);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-enter-active {\n opacity: 1;\n position: absolute;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit {\n opacity: 0.05;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit-active {\n opacity: 0;\n transform: translateX(80px);\n}\n.freemium-survey-components.widget-survey-components .fade-enter-active,\n.freemium-survey-components.widget-survey-components .fade-reverse-enter-active {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit-active,\n.freemium-survey-components.widget-survey-components .fade-exit-active {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.widget-survey-components .question-footer {\n margin: 0px auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: -webkit-sticky;\n position: sticky;\n bottom: -28px;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.widget-survey-components .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .skip-button {\n font-weight: 500;\n cursor: pointer;\n color: #3a4b67;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.widget-survey-components .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.widget-survey-components .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.widget-survey-components .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.widget-survey-components .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.widget-survey-components .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.widget-survey-components .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.widget-survey-components .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.widget-survey-components .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\n.freemium-survey-components.widget-survey-components .message-container:empty {\n display: none;\n}\n\n.freemium-survey-components.widget-survey-components.compact-style .nps-question-text {\n text-align: center;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-container {\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .compact-footer-layout {\n display: flex;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .compact-footer-layout:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .action-buttons {\n grid-gap: 32px;\n gap: 32px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .submit,\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .action-button {\n max-width: unset;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 8px;\n gap: 8px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .thankyou .text {\n width: 95%;\n}\n\n.freemium-survey-components.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\n.freemium-survey-components.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\n.freemium-survey-components.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\n.freemium-survey-components.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\n.freemium-survey-components.widget-survey-components.default-style .radio-group {\n flex-direction: column;\n flex-wrap: nowrap;\n overflow: auto;\n}\n.freemium-survey-components.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n color: #3a4b67;\n}\n.freemium-survey-components.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.freemium-survey-components.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\n.freemium-survey-components.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.widget-survey-components.cozy-style {\n max-width: 1000px;\n min-width: 600px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n text-align: left;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-question-text {\n text-align: center;\n width: 70%;\n margin: 0 auto;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n color: #3a4b67;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.freemium-survey-components.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const W=({thankYouQuestion:n,preview:t,placeholders:r,npsValue:o,setBlockElementRef:s},i)=>e.createElement(e.Fragment,null,e.createElement("div",{className:"heading"},"Thank you!"),e.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:z(n.text,r,o)}})),L=({currentBlockIndexOfBlocks:n,currentBlockIndexOfBlocksWithQns:t,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i,tempCurrentBlockIndexOfBlocksWithQns:a,setCurrentBlockIndexOfBlocksWithQnsDirty:u,setReverse:c,reverse:l})=>e.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},e.createElement("button",{disabled:0==t.current,className:"navigation-button",onClick:()=>{l?(t.current=Math.max(t.current-1,0),n.current=o.findIndex((e=>e.name===r[t.current].name))):(a.current=Math.max(t.current-1,0),n.current=o.findIndex((e=>e.name===r[a.current].name))),i.current=!1,u.current=!0,c(!0),s({})}},e.createElement(O,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=r.length-1,onClick:()=>{i.current=!1,l?(a.current=Math.min(t.current+1,r.length-1),n.current=o.findIndex((e=>e.name===r[a.current].name))):(t.current=Math.min(t.current+1,r.length-1),n.current=o.findIndex((e=>e.name===r[t.current].name))),u.current=!0,c(!1),s({})}},e.createElement(I,null))),V=({widget:n,widgetStyle:t,surveyStyle:r,formValues:o,blocksWithQns:s,blocks:i,thankYouQuestion:a,currentBlockIndexOfBlocksWithQns:u,currentBlockIndexOfBlocks:c,currentEditingBlock:l,isSubmitting:m,isValuesCommitted:d,isCurrentBlockFinal:f,setHorizontalScrollUnits:y,handleFormValues:v,skipBlock:h,setIsSubmitting:x,onSubmit:g,setIsSurveyCompleted:b,preventQuestionAnimation:w,preview:k,closePreview:_,setReverse:q,tempCurrentBlockIndexOfBlocksWithQns:E,question:C,block:N,reverse:I,othersMeta:O,setCurrentBlockIndexOfBlocksWithQnsDirty:S,...z})=>{const Q=z.blockIndex??u.current,R=()=>!(!n&&"standard"===r||0===Q&&void 0===o[C.name]||0===u.current&&!I),D=()=>(!p.includes(C.type_info.question_type)||"DROPDOWN"===C.type_info.question_type&&"__others__"===o[C.name])&&!f(),F=()=>"RANGE"!==C.type_info.question_type&&!N.required&&!f(),T=()=>("DROPDOWN"===C.type_info.question_type&&!N.required&&o[C.name],!1),W=()=>f()&&(n||"standard"!==r),V=("MULTI_SELECT"===l.current.question.type_info.question_type&&o[l.current.question.name]?.includes("__others__")||"DROPDOWN"===l.current.question.type_info.question_type&&"__others__"===o[l.current.question.name])&&(!O[l.current.question.name]||""===O[l.current.question.name]),Y="compact"===t&&F()&&R(),P=!Y&&R();return e.createElement("div",{className:"question-footer"},Y?e.createElement("div",{className:"compact-footer-layout"},R()&&e.createElement(L,{currentBlockIndexOfBlocks:c,currentBlockIndexOfBlocksWithQns:u,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:y,preventQuestionAnimation:w,setReverse:q,tempCurrentBlockIndexOfBlocksWithQns:E,setCurrentBlockIndexOfBlocksWithQnsDirty:S,reverse:I}),F()&&e.createElement("button",{className:"skip-button",onClick:()=>{q(!1),h(C)}},"Skip")):null,(D()||T()||"compact"!==t&&F()||P||W())&&e.createElement("div",{className:"action-buttons"},P&&e.createElement("div",{style:{marginRight:"auto"}},e.createElement(L,{currentBlockIndexOfBlocks:c,currentBlockIndexOfBlocksWithQns:u,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:y,preventQuestionAnimation:w,setReverse:q,tempCurrentBlockIndexOfBlocksWithQns:E,setCurrentBlockIndexOfBlocksWithQnsDirty:S,reverse:I})),D()&&e.createElement(B,{onClick:()=>{S.current=!1,q(!1),v(s[Q],null,!0)},disabled:l.current.required&&(!o[l.current.question.name]||Array.isArray(o[l.current.question.name])&&0===o[l.current.question.name].length)||l.current.question.type_info.meta?.othersRequired&&V,className:"next-button"},"Next"),W()&&e.createElement("div",{className:"submit"},e.createElement(B,{disabled:(l.current.required||l.current.question.type_info.pivot_question)&&(null==o[l.current.question.name]||0===o[l.current.question.name]?.length)||l.current.question.type_info.meta?.othersRequired&&V||m,onClick:()=>{g(),x(!0)}},m?"Submitting":"Submit survey")),T()&&e.createElement("button",{className:"skip-button",onClick:()=>{q(!1),l.current=s[Q],c.current=i.findIndex((e=>e.name===s[Q].name)),h(C)}},"Clear selection")))},Y=({survey:t,surveyStyle:i="standard",placeholders:l,onSubmit:m,widget:d,npsValue:y,widgetStyle:v,widgetHeaderQuerySelector:h,preview:x,mobilePreview:g,closePreview:b})=>{const w=t.question_details?.questions||[],k=t.meta?.blocks||[],[_,q]=s(null),[C,N]=s({}),[B,I]=s(!1),[O,Q]=s([]),[R,D]=s({}),[F,T]=s(!1),[L,Y]=s(null),[P,M]=s({}),$=n(null),A=n(null),H=n(-1),[U,j]=s(null),G=n(0),X=n(0),K=n(!1),Z=n([]),J=n(!!y&&"card"===i),ee=n(null),ne=n(0),[te,re]=s(!1),oe=n(0),se=n(!1);r((()=>{k&&(ee.current=k.find((e=>"TY"===e.name)),q(k.filter((e=>"TY"!==e.name))))}),[k]),r((()=>{se.current&&(X.current=ne.current,D({}))}),[te]),r((()=>{if(_)if(A.current=w.find((e=>e.type_info?.pivot_question))??w.find((e=>"RANGE"===e.type_info?.question_type))??w[0],null!=y){H.current=y;const e=w.find((e=>e.name===_[0].question_names[0]));$.current={..._[0],question:e},Z.current=[...Z.current,{..._[0],question:e}],Q(Z.current),N({Q_1:y})}else if(!$.current&&_.length>0)return $.current=_[0],void ue(_[0])}),[_,y]),r((()=>{O.length&&(Z.current=O,X.current=O.length-1,D({}))}),[O]),r((()=>{Object.keys(C).length>0&&$.current.question&&(p.includes($.current.question.type_info.question_type)&&("DROPDOWN"!==$.current.question.type_info.question_type||"__others__"!==C[$.current.question.name])||K.current)&&!ae()&&(y&&1==O.length?setTimeout((()=>{ce()}),1500):ce())}),[C]),r((()=>{if(null!=C?.[A.current?.name])if(ee.current?.is_based_on_rating){const e=A.current?.type_info?.choices[C?.[A.current?.name]-A.current?.type_info?.validation?.min??0]?.dependent_question_names,n=ee.current?.question_names.find((n=>e?.includes(n))),t=w.find((e=>e.name===n));Y(t)}else{const e=w.find((e=>e.name==ee.current?.question_names[0]));Y(e)}}),[C?.[A.current?.name]]);o((()=>{(()=>{if(U){U.style.minHeight="unset",U.style.height="min-content";const e=Math.min(U?.scrollHeight,f[v]);U.style.height=e+"px",U.style.minHeight=e+"px",oe.current=e}})()}),[U]);const ie=()=>{m({...C,others_meta:P},(()=>{L?.type_info.meta?.skipThankYouPage?x?setTimeout((()=>{b?.()}),300):window.location.href=L?.type_info.meta?.redirectUrl:I(!0)}))},ae=()=>(G.current===_.length-1||"end"===$.current.branchOption)&&X.current===O.length-1,ue=e=>{let n={};if(e.is_based_on_rating){const t=A.current?.type_info?.choices[C?.[A.current?.name]-A.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=w.find((e=>e.name===r))}else n=w.find((n=>n.name===e.question_names[0]));$.current.question=n;Z.current.find((e=>e.question.name===n.name))?(D({}),X.current+=1):Q([...Z.current,{...e,question:n}])},ce=()=>{if(ae())I(!0);else{if($.current.nextBlock)G.current=_.findIndex((e=>e.name===$.current.nextBlock));else if($.current.question.type_info?.meta?.branches){const e=$.current.question.type_info?.meta?.branches,n=C[$.current.question.name];let t;if(t="RANGE"===$.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return ie(),void I(!0);G.current=_.findIndex((e=>e.name===t.nextBlock))}else G.current+=1}else G.current+=1;$.current=_[G.current],ue(_[G.current])}},le=(e,n,t)=>{if(J.current=!1,t){if(K.current=!0,null!=C[e.question.name]&&e.name!==O[O.length-1].name){const[t,r]=(e=>{const n=O.findIndex((n=>n.name===e.name)),t=O.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=C[n.question.name],e)),{});return G.current=_.findIndex((n=>n.name===e.name)),[t,r]})(e);N({...r,...null!=n&&{[e.question.name]:n}}),Z.current=t}else N({...C,...null!=n&&{[e.question.name]:n}});A?.current?.name==e?.question?.name&&(H.current=n)}else N({...C,...null!=n&&{[e.question.name]:n}})};if(!$.current||!$.current.question)return null;const me=O[Math.min(X.current??O.length-1,O.length-1)];return e.createElement("div",{className:`freemium-survey-components ${d?"widget-survey-components":""} ${v}-style ${g?"mobile-preview":""}`,id:"freemium-survey"},h&&!B&&document.querySelector(h)?c.createPortal(e.createElement(E,{totalSteps:_.length,completedSteps:G.current+(B?1:0),widget:!0}),document.querySelector(h)):null,e.createElement("div",{className:"questions",style:{height:oe.current,...1===O.length?{transition:"none"}:{}}},e.createElement(u,{component:null},e.createElement(a,{key:me.question.name+String(B),unmountOnExit:!0,addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:te?"fade-reverse":"fade"},e.createElement("div",{ref:e=>e?j(e):null,id:`${me.question.name}`,className:"question-container "+(B?"thankyou":""),"data-test-question-name":me.question.name},B?e.createElement(W,{thankYouQuestion:L,preview:x,placeholders:l,npsValue:H.current,setBlockElementRef:j}):e.createElement(e.Fragment,null,e.createElement("div",{className:"question-text "+("RANGE"===me.question.type_info.question_type?"nps-question-text":""),dangerouslySetInnerHTML:{__html:z(me.question.text,l,H.current)},title:`question-${X.current}`,role:"heading","aria-level":1}),e.createElement("div",{className:"question-wrapper",onTransitionEndCapture:e=>e.stopPropagation(),style:{overflowY:f[v]===oe.current?"auto":"visible"}},e.createElement(S,{question:me.question,isFinalQn:ae(),formValues:C,othersMeta:P,autoFocus:!0,autoFocusDelay:"standard"===i?300:0,saveOthersValue:(e,n)=>{if(null===n){const n={...P};delete n[e],M({...n})}else M({...P,[e]:n})},onChangeHandler:e=>{K.current=!1,G.current=_.findIndex((e=>e.name===me.name)),$.current=me,se.current=!1,re(!1),le(me,e,!("DROPDOWN"===me.question.type_info.question_type&&"__others__"===e)&&p.includes(me.question.type_info.question_type)&&!ae())}})),e.createElement(V,{question:me.question,block:me,widget:d,widgetStyle:v,surveyStyle:i,formValues:C,othersMeta:P,blocksWithQns:O,blocks:_,thankYouQuestion:L,currentBlockIndexOfBlocksWithQns:X,reverse:te,setReverse:re,currentBlockIndexOfBlocks:G,currentEditingBlock:$,isSubmitting:F,isValuesCommitted:K,isCurrentBlockFinal:ae,setHorizontalScrollUnits:D,handleFormValues:le,skipBlock:e=>{K.current=!0,delete C[e.name],N({...C})},setIsSubmitting:T,onSubmit:ie,setIsSurveyCompleted:I,preventQuestionAnimation:J,preview:x,closePreview:b,tempCurrentBlockIndexOfBlocksWithQns:ne,setCurrentBlockIndexOfBlocksWithQnsDirty:se})))))))};l(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 480px;\n --default-widget-max-height: 460px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-step-navigation {\n border-radius: 3px;\n border: 1px solid #efefef;\n white-space: nowrap;\n}\n.freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n\n.freemium-survey-components.standard-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 800ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n overflow: auto;\n opacity: 1;\n}\n.freemium-survey-components.standard-survey-style .hide-question-container {\n pointer-events: none;\n opacity: 0;\n}\n.freemium-survey-components.standard-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.standard-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.standard-survey-style .question-footer {\n display: flex;\n justify-content: flex-start;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.standard-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components.standard-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .skip-button {\n font-weight: 500;\n color: #3a4b67;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.standard-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.standard-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .submit {\n max-width: 700px;\n margin: 0 auto;\n text-align: left;\n background: transparent;\n box-shadow: none;\n padding-bottom: 40px;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .fade-enter {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.standard-survey-style .fade-enter-active {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit-active {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.standard-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.standard-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.standard-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .message-container:empty {\n display: none;\n}\n@media (max-width: 550px) {\n .freemium-survey-components.standard-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .action-buttons button {\n max-width: unset;\n }\n .freemium-survey-components.standard-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .thankyou .text {\n width: auto;\n }\n}\n\n@media (max-width: 550px) {\n .freemium-survey-component .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-component .responsive-text-field .textarea-container {\n display: flex;\n }\n}\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const P=({thankYouQuestion:n,preview:t,placeholders:o,npsValue:s})=>(r((()=>{t||n.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=n.type_info.meta?.redirectUrl}),1e3*(1e3*n.type_info.meta?.redirectDelay??1e4))}),[]),e.createElement("div",{className:"question-container thankyou"},e.createElement("div",{className:"heading"},"Thank you!"),e.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:z(n.text,o,s)}}),n.type_info.meta?.redirectUrl&&e.createElement("div",{style:{width:"100%"}},e.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",n.type_info.meta?.redirectDelay," seconds.",e.createElement("br",null)),e.createElement("a",{className:"link",href:n.type_info.meta?.redirectUrl},n?.type_info.meta?.redirectUrl)))),M=({currentBlockIndex:n,currentBlockIndexOfBlocksWithQns:t,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i})=>e.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},e.createElement("button",{disabled:0==t.current,className:"navigation-button",onClick:()=>{t.current=Math.max(t.current-1,0),n.current=o.findIndex((e=>e.name===r[t.current].name)),i.current=!1,s(t.current)}},e.createElement(O,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=r.length-1,onClick:()=>{i.current=!1,t.current=Math.min(t.current+1,r.length-1),n.current=o.findIndex((e=>e.name===r[t.current].name)),s(t.current)}},e.createElement(I,null))),$=({widget:n,block:t,surveyStyle:r,formValues:o,othersMeta:s,blocksWithQns:i,blocks:a,thankYouQuestion:u,currentBlockIndexOfBlocksWithQns:c,currentBlockIndexOfBlocks:l,currentEditingBlock:m,isSubmitting:d,isValuesCommitted:f,isCurrentBlockFinal:y,setHorizontalScrollUnits:v,handleFormValues:h,skipBlock:x,setIsSubmitting:g,onSubmit:b,setIsSurveyCompleted:w,preventQuestionAnimation:k,preview:_,closePreview:q,...E})=>{const C=E.blockIndex??c.current,N=E.question??i[C].question,I=()=>N.name===m.current.question.name&&(!p.includes(N.type_info.question_type)||"DROPDOWN"===N.type_info.question_type&&"__others__"===o[N.name])&&!y(),O=()=>"RANGE"!==N.type_info.question_type&&!t.required&&N.name===m.current.question.name&&!y(),S=()=>("DROPDOWN"===N.type_info.question_type&&N.name!==m.current.question.name&&!t.required&&o[N.name],!1),z=()=>y()&&(n||"standard"!==r)&&N.name===m.current.question.name,Q=("MULTI_SELECT"===m.current.question.type_info.question_type&&o[m.current.question.name]?.includes("__others__")||"DROPDOWN"===m.current.question.type_info.question_type&&"__others__"===o[m.current.question.name])&&(!s[m.current.question.name]||""===s[m.current.question.name]);return e.createElement("div",{className:"question-footer"},!(!n&&"standard"===r||0===C&&!o[N.name])&&e.createElement(M,{currentBlockIndex:l,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:i,blocks:a,setHorizontalScrollUnits:v,preventQuestionAnimation:k}),(I()||S()||O()||z())&&e.createElement("div",{className:"action-buttons"},I()&&e.createElement(B,{onClick:()=>{h(i[C],null,!0)},disabled:m.current.required&&(!o[m.current.question.name]||Array.isArray(o[m.current.question.name])&&0===o[m.current.question.name].length)||m.current.question.type_info.meta?.othersRequired&&Q,className:"next-button"},"Next"),O()&&e.createElement("button",{className:"skip-button",onClick:()=>x(N)},"Skip"),S()&&e.createElement("button",{className:"skip-button",onClick:()=>{m.current=i[C],l.current=a.findIndex((e=>e.name===i[C].name)),x(N)}},"Clear selection"),z()&&e.createElement("div",{className:"submit"},e.createElement(B,{disabled:(m.current.required||m.current.question.type_info.pivot_question)&&(null==o[m.current.question.name]||0===o[m.current.question.name]?.length)||m.current.question.type_info.meta?.othersRequired&&Q||d,onClick:()=>{g(!0),b()}},d?"Submitting":"Submit survey"))))},A=({survey:t,surveyStyle:o="standard",placeholders:u,onSubmit:c,widget:l,npsValue:m,preview:d,mobilePreview:f,closePreview:y})=>{const v=t.question_details?.questions||[],h=t.meta?.blocks||[],[x,g]=s(null),[b,w]=s({}),[k,_]=s(!1),[q,C]=s([]),[N,I]=s(0),[O,Q]=s(!1),[R,D]=s(null),[F,T]=s({}),W=n(null),L=n(null),V=n(-1),Y=n(null),M=n(0),A=n(0),H=n(!1),U=n([]),j=n(null!=m&&"card"===o),G=n(null),X=n([]);r((()=>{h&&(G.current=h.find((e=>"TY"===e.name)),g(h.filter((e=>"TY"!==e.name))))}),[h]),r((()=>{if(x)if(L.current=v.find((e=>e.type_info?.pivot_question))??v.find((e=>"RANGE"===e.type_info?.question_type))??v[0],null!=m){V.current=Math.min(L.current.type_info.validation.max,Math.max(L.current.type_info.validation.min,m));const e=v.find((e=>e.name===x[0].question_names[0]));W.current={...x[0],question:e},U.current=[...U.current,{...x[0],question:e}],C(U.current),w({Q_1:V.current})}else if(!W.current&&x.length>0)return W.current=x[0],void J(x[0])}),[x,m]),r((()=>{q.length&&(U.current=q,A.current=q.length-1),l||"standard"!==o?(Y.current&&(Y.current.style.maxHeight="unset"),X.current[M.current]=Y.current?.scrollHeight||X.current[M.current]||0,Y.current&&(Y.current.style.maxHeight="100%")):Y.current?.scrollIntoView({block:"start",behavior:"smooth"}),I(q.length-1)}),[q]),r((()=>{Object.keys(b).length>0&&W.current.question&&(p.includes(W.current.question.type_info.question_type)&&("DROPDOWN"!==W.current.question.type_info.question_type||"__others__"!==b[W.current.question.name])||H.current)&&!Z()&&ee()}),[b]),r((()=>{if(null!=b?.[L.current?.name])if(G.current?.is_based_on_rating){const e=L.current?.type_info?.choices[b?.[L.current?.name]-L.current?.type_info?.validation?.min??0]?.dependent_question_names,n=G.current?.question_names.find((n=>e?.includes(n))),t=v.find((e=>e.name===n));D(t)}else{const e=v.find((e=>e.name==G.current?.question_names[0]));D(e)}}),[b?.[L.current?.name]]);const K=()=>{c({...b,others_meta:F},(()=>{R?.type_info.meta?.skipThankYouPage?d?setTimeout((()=>{y?.()}),300):window.location.href=R?.type_info.meta?.redirectUrl:_(!0)}))},Z=()=>M.current===x.length-1||"end"===W.current.branchOption,J=e=>{let n={};if(e.is_based_on_rating){const t=L.current?.type_info?.choices[b?.[L.current?.name]-L.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=v.find((e=>e.name===r))}else n=v.find((n=>n.name===e.question_names[0]));W.current.question=n;U.current.find((e=>e.question.name===n.name))?(I(N+1),A.current+=1):C([...U.current,{...e,question:n}])},ee=()=>{if(Z())_(!0);else{if(W.current.nextBlock)M.current=x.findIndex((e=>e.name===W.current.nextBlock));else if(W.current.question.type_info?.meta?.branches){const e=W.current.question.type_info?.meta?.branches,n=b[W.current.question.name];let t;if(t="RANGE"===W.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return K(),void _(!0);M.current=x.findIndex((e=>e.name===t.nextBlock))}else M.current+=1}else M.current+=1;W.current=x[M.current],J(x[M.current])}},ne=e=>{H.current=!0,delete b[e.name],w({...b})},te=(e,n,t)=>{if(j.current=!1,t){if(H.current=!0,null!=b[e.question.name]&&e.name!==q[q.length-1].name){const[t,r]=(e=>{const n=q.findIndex((n=>n.name===e.name)),t=q.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=b[n.question.name],e)),{});return M.current=x.findIndex((n=>n.name===e.name)),[t,r]})(e);w({...r,...null!=n&&{[e.question.name]:n}}),U.current=t}else w({...b,...null!=n&&{[e.question.name]:n}});L?.current?.name==e?.question?.name&&(V.current=n)}else w({...b,...null!=n&&{[e.question.name]:n}})},re=(e,n)=>{const t=q.find((n=>n.question.name===e));if(M.current=x.findIndex((e=>e.name===t.name)),W.current=t,null===n){const n={...F};delete n[e],T({...n})}else T({...F,[e]:n})};if(!W.current||!W.current.question)return null;const oe=("MULTI_SELECT"===W.current.question.type_info.question_type&&b[W.current.question.name]?.includes("__others__")||"DROPDOWN"===W.current.question.type_info.question_type&&"__others__"===b[W.current.question.name])&&(!F[W.current.question.name]||""===F[W.current.question.name]);return e.createElement("div",{className:`freemium-survey-components ${l?"widget-survey-components":""} ${f?"mobile-preview":""} ${o}-survey-style`,id:"freemium-survey"},k?null:e.createElement(E,{totalSteps:x.length,completedSteps:M.current}),e.createElement(i,{mode:"out-in"},e.createElement(a,{key:String(k),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:l?"":"fade"},e.createElement("div",null,k?e.createElement(P,{thankYouQuestion:R,preview:d,placeholders:u,npsValue:V.current}):e.createElement(e.Fragment,null,e.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:l||"card"===o?{transform:`translateX(calc(-${N} * 100%))`,height:`${X.current[M.current]}px`,transition:j.current||q?.length<=1?"none":"all 300ms ease-out 0ms"}:{},className:"questions"},q.map(((n,t)=>e.createElement("div",{key:n.question.name,ref:Y,className:"question-container "+(!l&&"card"!==o||A.current===t?"":"hide-question-container")},e.createElement("div",{className:"question-text "+(0===t?"nps":""),dangerouslySetInnerHTML:{__html:z(n.question.text,u,V.current)},title:`question-${t}`,role:"heading","aria-level":1}),e.createElement("button",{disabled:!l&&"standard"===o,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),e.createElement(S,{question:n.question,isFinalQn:Z(),formValues:b,othersMeta:F,autoFocus:A.current===t,autoFocusDelay:"standard"===o?350:20,saveOthersValue:re,onChangeHandler:e=>{H.current=!1,M.current=x.findIndex((e=>e.name===n.name)),W.current=n,te(n,e,!("DROPDOWN"===n.question.type_info.question_type&&"__others__"===e)&&p.includes(n.question.type_info.question_type)&&!Z())}}),e.createElement("button",{disabled:!l&&"standard"===o,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),e.createElement($,{question:n.question,block:n,blockIndex:t,widget:l,surveyStyle:o,formValues:b,othersMeta:F,blocksWithQns:q,blocks:x,thankYouQuestion:R,currentBlockIndexOfBlocksWithQns:A,currentBlockIndexOfBlocks:M,currentEditingBlock:W,isSubmitting:O,isValuesCommitted:H,isCurrentBlockFinal:Z,setHorizontalScrollUnits:I,handleFormValues:te,skipBlock:ne,setIsSubmitting:Q,onSubmit:K,setIsSurveyCompleted:_,preventQuestionAnimation:j,preview:d,closePreview:y})))),!l&&"card"!==o&&Z()&&e.createElement("div",{className:"submit"},e.createElement(B,{disabled:(W.current.required||W.current.question.type_info.pivot_question)&&(null==b[W.current.question.name]||0===b[W.current.question.name]?.length)||W.current.question.type_info.meta?.othersRequired&&oe||O,onClick:()=>{Q(!0),c({...b,others_meta:F},(()=>{R?.type_info.meta?.skipThankYouPage?d?setTimeout((()=>{y?.()}),300):window.location.href=R?.type_info.meta?.redirectUrl:_(!0)}))}},O?"Submitting":"Submit survey"))))))))},H=n=>{const t=Q(n.survey);return e.createElement(e.Fragment,null,"standard"===n.surveyStyle?e.createElement(A,Object.assign({},n,{survey:t})):e.createElement(T,Object.assign({},n,{survey:t})))},U=n=>{const t=Q(n.survey);return e.createElement(Y,Object.assign({},n,{survey:t}))};export{N as BUTTON_SIZE_VARIANTS,B as Button,w as CheckboxGroup,x as Input,m as NPS,E as ProgressBar,q as Radio,_ as RadioGroup,H as Survey,g as TextArea,U as WebInAppSurvey};
|
|
1
|
+
import e,{useRef as n,forwardRef as t,useEffect as r,useMemo as o,useState as s}from"react";import{SwitchTransition as i,CSSTransition as a,TransitionGroup as u}from"react-transition-group";import c from"react-dom";function l(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}l(".freemium-survey-components .nps-container {\n margin: 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n}\n.freemium-survey-components .nps-container .footer {\n border-top: 1px solid #ebeff3;\n padding-top: 20px;\n display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n color: #666;\n}\n.freemium-survey-components .nps-container .footer:empty {\n display: none;\n}\n.freemium-survey-components .nps-container .nps-scale {\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale .button-container {\n flex-direction: column;\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components .nps-container .nps-scale .help-text-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.freemium-survey-components .nps-container .nps-scale .positive-text {\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .nps-scale .negative-text {\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .nps-scale span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .nps-scale button {\n display: inline-block;\n font-size: 1rem;\n white-space: nowrap;\n vertical-align: middle;\n background: none;\n border: none;\n box-shadow: none;\n cursor: pointer;\n text-align: center;\n font-weight: 400;\n border-radius: 4px;\n margin: 0;\n outline: none;\n margin-left: -1px;\n width: 40px;\n height: 40px;\n transform: scale(1);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover {\n transition: background 0.2s ease-in, border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover, .freemium-survey-components .nps-container .nps-scale button:focus {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .nps-scale.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .nps-scale.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .nps-scale.highlighted button:hover, .freemium-survey-components .nps-container .nps-scale.highlighted button:focus, .freemium-survey-components .nps-container .nps-scale.highlighted button.active {\n background: var(--default-brand-color) !important;\n background: var(--brand-color, var(--default-brand-color)) !important;\n}\n.freemium-survey-components .nps-container .nps-scale .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-weight: 500;\n background-color: #ebeff3;\n border-radius: 4px;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choices {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice {\n background: #ebeff3;\n color: #000;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active, .freemium-survey-components .nps-container .nps-scale.standard .choice:hover {\n background: #e43e3d;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):hover {\n background: #00af50;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(3):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(4):hover {\n background: #f8c43e;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active {\n color: #fff;\n transform: scale(1.2);\n}\n\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale button,\n.card-survey-style .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}");const m=t=>{const{type_info:{linear_scale:{button_style:r="highlighted",button_shape:o="rounded"}={},rating_presets:{start:s="Very unlikely",end:i="Very likely"}={},validation:{min:a},footer_text:u}}=t,c=e=>{switch(e){case e<=6:return"detractor";case e<=8:return"passive";default:return"promoter"}},l=n(Array.from({length:10+(0===a?1:0)},((e,n)=>n+a)));return e.createElement("div",{className:"nps-container","data-test-input":"nps"},e.createElement("div",{className:`nps-scale ${o} ${r}`},e.createElement("div",{className:"button-container"},e.createElement("div",{className:"choices",role:"radiogroup","aria-required":!0},l.current.map((n=>e.createElement("button",{role:"radio","aria-checked":t.npsValue===n,key:n,"data-test-nps-choice":n,onClick:e=>{t.onChangeHandler(n)},className:`choice ${c(n)} ${t.npsValue===n&&"active"}`},n)))),e.createElement("div",{className:"help-text-container"},e.createElement("span",{className:"negative-text",role:"note"},`${a} - ${s}`),e.createElement("span",{className:"positive-text",role:"note"},`${l.current[l.current.length-1]} - ${i}`)))),e.createElement("div",{className:"footer",role:"note"},u))},d=(e,n)=>(e.defaultProps=n,e);l('.freemium-survey-components .input-container,\n.freemium-survey-components .textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n border-radius: 4px;\n position: relative;\n}\n.freemium-survey-components label.input-label {\n display: inline-block;\n padding-bottom: 8px;\n padding-left: 2px;\n font-size: 0.75rem;\n font-weight: 400;\n}\n.freemium-survey-components label.required::after {\n content: "*";\n position: relative;\n top: 2px;\n font-weight: 500;\n font-size: 0.85rem;\n padding-left: 3px;\n color: #d72d30;\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n transition: border-color 0.2s linear;\n background: #fff;\n}\n.freemium-survey-components .textarea-container .input-basic {\n flex-direction: column;\n align-items: unset;\n}\n.freemium-survey-components .input-basic.error {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error[focus-within] {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic.error:focus-within {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: 0.2s linear;\n}\n.freemium-survey-components .input-basic[focus-within] {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic[focus-within] .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .input-basic:focus-within .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .end-max-length {\n transition: opacity ease 0.2s;\n opacity: 0;\n padding: 0 8px;\n font-size: 0.75rem;\n color: #264966;\n}\n.freemium-survey-components .textarea-container .end-max-length {\n padding: 8px;\n align-self: flex-end;\n}\n.freemium-survey-components span.input-error {\n display: block;\n padding-left: 2px;\n padding-top: 4px;\n font-size: 0.9rem;\n color: #d72d30;\n}\n.freemium-survey-components input[type=text] {\n padding: 6px 12px;\n flex: 1;\n border: unset;\n height: 32px;\n font-size: 1rem;\n /* line-height: ${typography.input.text.lineHeight}; */\n border-radius: 4px;\n}\n.freemium-survey-components input[type=text],\n.freemium-survey-components textarea {\n outline: none;\n border: none;\n}\n.freemium-survey-components input[type=text]::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 12px;\n flex: 1;\n border: unset;\n resize: none;\n font-size: 1rem;\n /* line-height: ${typography.input.text.lineHeight}; */\n border-radius: 4px;\n}\n.freemium-survey-components textarea::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}');const p=["RANGE","NPS","RADIO","DROPDOWN"],f={default:500,compact:500,cozy:400},y={isRequired:!1,showCount:!0,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},v=t(((t,o)=>{const s=n(null);r((()=>{t.autoFocusInput&&setTimeout((()=>{s.current?.focus()}),300+t.autoFocusDelay)}),[t.autoFocusInput]);const{inputStyle:i,style:a,className:u,showCount:c,isErrored:l,startLabel:m,isRequired:d,errorText:p,endLabel:f,maxLength:y=256,onChange:v,autoFocusInput:h,...x}=t;return e.createElement("div",{className:"input-container",style:a},t.label&&e.createElement("label",{className:"input-label "+(d?"required":"")},t.label),e.createElement(e.Fragment,null,m&&e.createElement("div",{className:"start-label"},m),e.createElement("div",{className:`input-basic ${l?"error":""}${u||""}`},e.createElement("input",Object.assign({},x,{type:"text",autoComplete:"off",ref:s,style:i,onChange:e=>{e.target.value?.length>y||v?.(e)}})),c&&y>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length||0}/${y}`)),f&&e.createElement("div",{className:"end-label"},f)),l&&p&&e.createElement("span",{className:"input-error"},t.errorText))})),h=t(((t,o)=>{const s=n(null);r((()=>{t.autoFocusInput&&setTimeout((()=>{s.current?.focus()}),300+t.autoFocusDelay)}),[t.autoFocusInput]);const{inputStyle:i,style:a,className:u,showCount:c,maxLength:l=1500,startLabel:m,isRequired:d,autoFocusInput:p,onChange:f,...y}=t;return e.createElement(e.Fragment,null,e.createElement("div",{className:"textarea-container",style:a},t.label&&e.createElement("label",{className:"input-label "+(d?"required":"")},t.label),m&&e.createElement("div",{className:"start-label"},m),e.createElement("div",{className:`input-basic ${u||""}`},e.createElement("textarea",Object.assign({},y,{autoComplete:"off",ref:s,style:i,onChange:e=>{e.target.value?.length>l||f?.(e)}})),c&&l&&l>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length||0}/${l}`)),t.endLabel&&e.createElement("div",{className:"end-label"},t.endLabel)))})),x=d(v,y),g=d(h,y);l('.freemium-survey-components .checkbox-group {\n width: 100%;\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n flex-direction: column;\n white-space: nowrap;\n flex-wrap: wrap;\n}\n.freemium-survey-components .icon-container {\n display: inline-block;\n flex: 0 0 12px;\n width: 12px;\n height: 12px;\n min-width: 12px;\n min-height: 12px;\n color: inherit;\n position: absolute;\n left: 1px;\n top: 2px;\n}\n.freemium-survey-components .tick-icon {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n color: inherit;\n fill: currentColor;\n}\n.freemium-survey-components input[type=checkbox] {\n position: absolute;\n clip: rect(0px 0px 0px 0px);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=checkbox]:focus ~ .checkbox {\n /* box-shadow: ${pseudo.focus} 0px 0px 0px 2px; */\n box-shadow: var(--default-brand-color) 0px 0px 0px 2px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n opacity: 1;\n line-height: 1.2;\n cursor: pointer;\n font-size: 1rem;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components .checkbox-label:hover {\n border-color: #92a2b1;\n}\n.freemium-survey-components .checkbox-label.disabled {\n opacity: 0.5;\n cursor: "not-allowed";\n}\n.freemium-survey-components .checkbox {\n transition: background-color ease-in 0.2s;\n min-width: 14px;\n min-height: 14px;\n min-height: 14px;\n max-height: 14px;\n border-radius: 2px;\n position: relative;\n margin-right: 16px;\n background-color: #fff;\n border: 1px solid;\n text-align: left;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:disabled ~ .checkbox:hover {\n box-shadow: unset;\n border-color: unset;\n}');const b=()=>e.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},e.createElement("path",{d:"M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",fill:"#fff",fillRule:"evenodd"})),w=({values:t=[],othersValue:o="",options:s,name:i,autoFocusGroup:a,autoFocusDelay:u,onChangeHandler:c,saveOthersValue:l})=>{const m=t.includes("__others__"),d=n(null);return r((()=>{a&&setTimeout((()=>{d.current?.focus()}),300+u)}),[a]),e.createElement("div",{className:"checkbox-group"},e.createElement("button",{ref:d,className:"autofocus-button","aria-hidden":!0}),s?.filter((e=>"__others__"!==e.value)).map(((n,r)=>e.createElement(k,{key:n.id,checked:t?.includes(n.value),name:n.value,id:n.id,onChange:(e,r)=>{if(r)c([...t||[],n.value]);else{const e=t.indexOf(n.value);e>-1&&t.splice(e,1),c([...t])}}},n.value))),s?.find((e=>"__others__"===e.value))&&e.createElement(k,{key:"others",checked:m,name:"__others__",id:"__others__",onChange:(e,n)=>{if(n)c([...t,"__others__"]);else{const e=t.findIndex((e=>"__others__"===e));t.splice(e,1),c(t)}}},"Others"),m&&e.createElement(e.Fragment,null,e.createElement(x,{placeholder:"Enter your comment",value:o,onChange:e=>{l(i,e.target.value)},autoFocusDelay:10,label:""})))},k=d((t=>{const o=n(null);return r((()=>{t.autoFocus&&setTimeout((()=>{o.current?.focus()}),320)}),[]),e.createElement("label",{className:`checkbox-label ${t.disabled&&"disabled"}`},e.createElement("input",{ref:o,id:t.id,type:"checkbox",name:t.name,readOnly:t.readOnly,disabled:t.disabled,"aria-disabled":t.disabled,checked:t.checked,onChange:t.readOnly?()=>{}:e=>t.onChange(e,e.target.checked)}),e.createElement("div",{className:"checkbox"},t.checked&&e.createElement("div",{className:"icon-container"},e.createElement(b,null)," ")),e.createElement("div",null,t.children))}),{checked:!1});l('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n width: 100%;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: background-color ease-in 0.2s;\n min-width: 18px;\n max-width: 18px;\n min-height: 18px;\n max-height: 18px;\n border-radius: 50%;\n position: relative;\n margin-right: 16px;\n text-align: left;\n}\n.freemium-survey-components .radio:before {\n left: 3px;\n top: 3px;\n content: "";\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n transition: all ease-in 0.2s;\n background-color: #fff;\n}\n.freemium-survey-components .radio-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n cursor: pointer;\n line-height: 1.2;\n font-size: 1rem;\n font-weight: 400;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n color: #3a4b67;\n}\n.freemium-survey-components input[type=radio] {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=radio]:focus ~ .radio {\n /* box-shadow: ${pseudo.focus} 0px 0px 0px 3px; */\n box-shadow: var(--default-brand-color) 0px 0px 0px 3px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 3px;\n border-color: transparent;\n}\n.freemium-survey-components input[type=radio]:checked ~ .radio:before {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .radio-label:hover {\n border-color: #92a2b1;\n}');const _=({name:t,options:o,value:s,autoFocusGroup:i,autoFocusDelay:a,onChangeHandler:u,saveOthersValue:c,othersOption:l,othersRequired:m,othersValue:d,isFinalQn:p})=>{const f=n(null);return r((()=>{i&&setTimeout((()=>{f.current?.focus()}),300+a)}),[i]),e.createElement("div",{className:"radio-group",role:"radiogroup"},e.createElement("button",{ref:f,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),o?.sort(((e,n)=>"__others__"===e.value?1:"__others__"===n.value?-1:0))?.map(((n,r)=>e.createElement(q,{key:n.value,value:n.value,name:t,onChange:e=>{"__others__"!==e.currentTarget.value&&c(t,null),u(e.currentTarget.value)},checked:s===n.value},"__others__"===n.value?"Others":n.value))),"__others__"===s&&e.createElement(e.Fragment,null,e.createElement(x,{value:d??"",onChange:e=>{"__others__"!==s&&p&&u("__others__"),c(t,e.target.value)},placeholder:"Enter your comment",label:"",autoFocusDelay:10})))},q=d((t=>{const o=n(null);return r((()=>{t.autoFocus&&setTimeout((()=>{o.current?.focus()}),320)}),[]),e.createElement("label",{className:"radio-label"},e.createElement("input",{ref:o,type:"radio",name:t.name,value:t.value,checked:t.checked,onChange:t.onChange}),e.createElement("div",{className:"radio"}),e.createElement("div",null,t.children))}),{checked:!1,autoFocus:!1});l(".progressbar-container {\n width: 100%;\n height: 4px;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n text-align: left;\n overflow: hidden;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n}\n\n.progressbar-container.widget {\n position: absolute;\n top: 0;\n height: 2px;\n}\n\n.progressbar {\n transition: transform 0.2s linear 200ms;\n transform-origin: left;\n height: 100%;\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}");const E=n=>{const{totalSteps:t,completedSteps:r,widget:o}=n;return e.createElement("div",{className:"progressbar-container "+(o?"widget":"")},e.createElement("div",{className:"progressbar",style:{width:(r>0?100/t:0)+"%",transform:`scaleX(${r})`}}))};l(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n padding: 8px 16px;\n cursor: pointer;\n line-height: 1.5;\n text-align: center;\n font-weight: 600;\n letter-spacing: 0.3px;\n border-radius: 4px;\n white-space: nowrap;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: --default-button-text-color;\n color: var(--button-text-color, --default-button-text-color);\n background: var(--default-brand-color);\n background: var(--brand-color, var(--default-brand-color));\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n border-radius: 4px;\n min-width: 200px;\n max-width: -webkit-fit-content;\n max-width: -moz-fit-content;\n max-width: fit-content;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n transform: translateY(-4px);\n}\n.freemium-survey-components .action-button[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.freemium-survey-components button:focus:not(:active) {\n /* box-shadow: 0 0 0 2px ${pseudo.focus}; */\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .action-button {\n min-width: 120px;\n }\n}\n.widget-survey-components .action-button {\n min-width: 120px;\n}\n\n.freemium-survey-components.mobile-preview .action-button {\n min-width: 120px;\n}");const C=()=>e.createElement(e.Fragment,null,"..."),N={LARGE:"large",MINI:"mini",NORMAL:"normal"},B=n=>{const{inline:t=!1,children:r,disabled:o,className:s="",htmlType:i,type:a="primary",onClick:u,size:c,overrideStyleClassName:l="",loading:m=!1,...d}=n;return e.createElement("button",Object.assign({style:t?{display:"inline-block"}:{},disabled:o,className:`action-button ${s} ${l}`,type:i,onClick:u},d),m?e.createElement(C,null):r)},I=()=>e.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M7.82585 6.15754C7.98999 6.32147 8.08232 6.54389 8.08252 6.77587L8.08252 7.2192C8.07983 7.45069 7.98788 7.6722 7.82585 7.83754L1.82919 13.8225C1.77496 13.8772 1.71044 13.9206 1.63936 13.9502C1.56827 13.9798 1.49203 13.9951 1.41502 13.9951C1.33801 13.9951 1.26177 13.9798 1.19068 13.9502C1.1196 13.9206 1.05508 13.8772 1.00085 13.8225L0.172521 12.9942C0.118197 12.941 0.0750381 12.8774 0.0455752 12.8073C0.0161124 12.7372 0.000937578 12.6619 0.000937585 12.5859C0.000937592 12.5098 0.0161125 12.4345 0.0455753 12.3644C0.0750381 12.2943 0.118197 12.2308 0.172521 12.1775L5.36419 6.99754L0.172522 1.81754C0.117847 1.76331 0.0744506 1.69879 0.0448352 1.62771C0.0152208 1.55662 -2.75162e-05 1.48038 -2.75094e-05 1.40337C-2.75027e-05 1.32636 0.0152208 1.25012 0.0448353 1.17904C0.0744507 1.10795 0.117847 1.04343 0.172522 0.989205L1.00086 0.172537C1.05508 0.117862 1.1196 0.0744661 1.19069 0.0448507C1.26177 0.0152353 1.33801 -1.20337e-05 1.41502 -1.2027e-05C1.49203 -1.20203e-05 1.56827 0.0152353 1.63936 0.0448507C1.71044 0.0744661 1.77496 0.117862 1.82919 0.172537L7.82585 6.15754Z",fill:"#6B6B6B"})),O=()=>e.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M0.256667 7.83755C0.0925257 7.67361 0.000204227 7.4512 0 7.21921V6.77588C0.00268801 6.5444 0.0946357 6.32289 0.256667 6.15755L6.25333 0.172549C6.30756 0.117874 6.37208 0.0744776 6.44316 0.0448625C6.51425 0.0152474 6.59049 0 6.6675 0C6.74451 0 6.82075 0.0152474 6.89184 0.0448625C6.96292 0.0744776 7.02744 0.117874 7.08167 0.172549L7.91 1.00088C7.96432 1.05411 8.00748 1.11764 8.03694 1.18776C8.06641 1.25787 8.08158 1.33316 8.08158 1.40922C8.08158 1.48527 8.06641 1.56056 8.03694 1.63067C8.00748 1.70079 7.96432 1.76432 7.91 1.81755L2.71833 6.99755L7.91 12.1775C7.96467 12.2318 8.00807 12.2963 8.03769 12.3674C8.0673 12.4385 8.08255 12.5147 8.08255 12.5917C8.08255 12.6687 8.0673 12.745 8.03769 12.8161C8.00807 12.8871 7.96467 12.9517 7.91 13.0059L7.08167 13.8225C7.02744 13.8772 6.96292 13.9206 6.89184 13.9502C6.82075 13.9799 6.74451 13.9951 6.6675 13.9951C6.59049 13.9951 6.51425 13.9799 6.44316 13.9502C6.37208 13.9206 6.30756 13.8772 6.25333 13.8225L0.256667 7.83755Z",fill:"#6B6B6B"})),S=({question:n,formValues:t,othersMeta:r,onChangeHandler:o,saveOthersValue:s,autoFocus:i,autoFocusDelay:a,isFinalQn:u})=>{switch(n.type_info.question_type){case"RANGE":return e.createElement(m,{type_info:n.type_info,onChangeHandler:o,npsValue:t[n.name]});case"CHECKBOX":case"MULTI_SELECT":return e.createElement(w,{name:n.name,autoFocusGroup:i,values:t[n.name],othersValue:r[n.name],options:n.type_info.choices,onChangeHandler:o,saveOthersValue:s,othersOption:n.type_info.meta?.othersOption,othersRequired:n.type_info.meta?.othersRequired,autoFocusDelay:a});case"RADIO":case"DROPDOWN":return e.createElement(_,{autoFocusGroup:i,autoFocusDelay:a,name:n.name,onChangeHandler:o,saveOthersValue:s,options:n.type_info.choices,value:t[n.name],othersValue:r[n.name],othersOption:n.type_info.meta?.othersOption,othersRequired:n.type_info.meta?.othersRequired,isFinalQn:u});case"INPUT":case"TEXT":return n.type_info?.meta?.readOnly?e.createElement("div",{className:"message-container"},n.type_info?.meta?.value):e.createElement("div",{className:"responsive-text-field"},e.createElement(x,{autoFocusInput:i,autoFocusDelay:a,label:"",isRequired:n.is_required,value:t[n.name]||"",placeholder:n.type_info?.meta?.placeholder??"",onChange:e=>o(e.target.value)}),e.createElement(g,{autoFocusInput:i,autoFocusDelay:a,label:"",maxLength:256,isRequired:n.is_required,placeholder:n.type_info?.meta?.placeholder??"",value:t[n.name]||"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return e.createElement(g,{autoFocusInput:i,autoFocusDelay:a,label:"",isRequired:n.is_required,placeholder:n.type_info?.meta?.placeholder??"",value:t[n.name]||"",onChange:e=>o(e.target.value)});default:return console.error(`Question type ${n.type_info.question_type} not found`),null}},z=(e,n,t)=>{if(e){let r={"{{nps.rating}}":t};n&&(r={...r,...n});const o=new RegExp(Object.keys(r).join("|"),"gi");e=e.replace(o,(function(e){return r[e.toLowerCase()]}))}return e},Q=e=>o((()=>{const n=JSON.parse(JSON.stringify(e)),t=[];return(n.question_details?.questions||[]).forEach((e=>{const n=e.type_info?.meta?.block;n&&(n.question_names||(n.question_names=[e.name]),t.push(n))})),{...n,meta:{...n.meta,blocks:t}}}),[e]);l(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 560px;\n --default-widget-max-height: 400px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-components.card-survey-style {\n padding: 20px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button svg {\n transform: rotate(90deg);\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.card-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n transition: opacity 50ms ease-out;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.card-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.card-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.card-survey-style .fade-enter .question-container {\n opacity: 0;\n transform: translateY(15px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container {\n opacity: 0.05;\n transform: translateY(-15px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter .question-container {\n opacity: 0;\n transform: translateY(-15px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n opacity: 0.05;\n transform: translateY(15px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.card-survey-style .question-footer {\n display: flex;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.card-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.card-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .skip-button {\n font-weight: 500;\n color: #3a4b67;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.card-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.card-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.card-survey-style .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.card-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.card-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.card-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.card-survey-style .message-container:empty {\n display: none;\n}\n\n@media (max-width: 550px) {\n div.freemium-survey-components.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n div.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n div.freemium-survey-components.card-survey-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons button {\n max-width: unset;\n }\n div.freemium-survey-components.card-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .thankyou .text {\n width: auto;\n }\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .responsive-text-field .input-container {\n display: none;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .freemium-survey-step-navigation {\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-buttons {\n flex-direction: column;\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-buttons button {\n max-width: unset;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .action-button {\n max-width: unset;\n width: 100%;\n}\ndiv.freemium-survey-components.card-survey-style.mobile-preview .thankyou .text {\n width: auto;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const D=({thankYouQuestion:n,preview:t,placeholders:o,npsValue:s})=>(r((()=>{t||n.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=n.type_info.meta?.redirectUrl}),1e3*n.type_info.meta?.redirectDelay??1e4)}),[]),e.createElement("div",{className:"question-container thankyou"},e.createElement("div",{className:"heading"},"Thank you!"),e.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:z(n.text,o,s)}}),n.type_info.meta?.redirectUrl&&e.createElement("div",{style:{width:"100%"}},e.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",n.type_info.meta?.redirectDelay," seconds.",e.createElement("br",null)),e.createElement("a",{className:"link",href:n.type_info.meta?.redirectUrl},n?.type_info.meta?.redirectUrl)))),R=({currentBlockIndex:n,currentBlockIndexOfBlocksWithQns:t,setCurrentBlockIndexOfBlocksWithQnsDirty:r,blocksWithQns:o,blocks:s,setHorizontalScrollUnits:i,preventQuestionAnimation:a,tempCurrentBlockIndexOfBlocksWithQns:u,setReverse:c,reverse:l})=>e.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},e.createElement("button",{disabled:0==t.current,className:"navigation-button",onClick:()=>{l?(t.current=Math.max(t.current-1,0),n.current=s.findIndex((e=>e.name===o[t.current].name))):(u.current=Math.max(t.current-1,0),n.current=s.findIndex((e=>e.name===o[u.current].name))),a.current=!1,r.current=!0,c(!0),i({})}},e.createElement(O,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=o.length-1,onClick:()=>{a.current=!1,l?(u.current=Math.min(t.current+1,o.length-1),n.current=s.findIndex((e=>e.name===o[u.current].name))):(t.current=Math.min(t.current+1,o.length-1),n.current=s.findIndex((e=>e.name===o[t.current].name))),r.current=!0,c(!1),i({})}},e.createElement(I,null))),F=({widget:n,surveyStyle:t,formValues:r,blocksWithQns:o,blocks:s,thankYouQuestion:i,currentBlockIndexOfBlocksWithQns:a,currentBlockIndexOfBlocks:u,currentEditingBlock:c,isSubmitting:l,isValuesCommitted:m,isCurrentBlockFinal:d,setHorizontalScrollUnits:f,handleFormValues:y,skipBlock:v,setIsSubmitting:h,onSubmit:x,setIsSurveyCompleted:g,preventQuestionAnimation:b,preview:w,closePreview:k,setReverse:_,tempCurrentBlockIndexOfBlocksWithQns:q,question:E,block:C,reverse:N,othersMeta:I,setCurrentBlockIndexOfBlocksWithQnsDirty:O,...S})=>{const z=S.blockIndex??a.current,Q=()=>(!p.includes(E.type_info.question_type)||"DROPDOWN"===E.type_info.question_type&&"__others__"===r[E.name])&&!d(),D=()=>"RANGE"!==E.type_info.question_type&&!C.required&&!d(),F=()=>("DROPDOWN"===E.type_info.question_type&&!C.required&&r[E.name],!1),T=()=>d()&&(n||"standard"!==t),W=("MULTI_SELECT"===c.current.question.type_info.question_type&&r[c.current.question.name]?.includes("__others__")||"DROPDOWN"===c.current.question.type_info.question_type&&"__others__"===r[c.current.question.name])&&(!I[c.current.question.name]||""===I[c.current.question.name]);return e.createElement("div",{className:"question-footer"},!(!n&&"standard"===t||0===z&&void 0===r[E.name]||0===a.current&&!N)&&e.createElement(R,{currentBlockIndex:u,currentBlockIndexOfBlocksWithQns:a,blocksWithQns:o,blocks:s,setHorizontalScrollUnits:f,preventQuestionAnimation:b,setReverse:_,tempCurrentBlockIndexOfBlocksWithQns:q,reverse:N,setCurrentBlockIndexOfBlocksWithQnsDirty:O}),(Q()||F()||D()||T())&&e.createElement("div",{className:"action-buttons"},Q()&&e.createElement(B,{onClick:()=>{O.current=!1,_(!1),y(o[z],null,!0)},disabled:c.current.required&&(!r[c.current.question.name]||Array.isArray(r[c.current.question.name])&&0===r[c.current.question.name].length)||c.current.question.type_info.meta?.othersRequired&&W,className:"next-button"},"Next"),D()&&e.createElement("button",{className:"skip-button",onClick:()=>{O.current=!1,_(!1),v(E)}},"Skip"),T()&&e.createElement("div",{className:"submit"},e.createElement(B,{disabled:(c.current.required||c.current.question.type_info.pivot_question)&&(null==r[c.current.question.name]||0===r[c.current.question.name]?.length)||c.current.question.type_info.meta?.othersRequired&&W||l,onClick:()=>{h(!0),x()}},l?"Submitting":"Submit survey")),F()&&e.createElement("button",{className:"skip-button",onClick:()=>{_(!1),c.current=o[z],u.current=s.findIndex((e=>e.name===o[z].name)),v(E)}},"Clear selection")))},T=({survey:t,surveyStyle:o="standard",placeholders:u,onSubmit:c,widget:l,npsValue:m,preview:d,mobilePreview:f,closePreview:y})=>{const v=t.question_details?.questions||[],h=t.meta?.blocks||[],[x,g]=s(null),[b,w]=s({}),[k,_]=s(!1),[q,C]=s([]),[N,B]=s({}),[I,O]=s(!1),[Q,R]=s(null),[T,W]=s({}),L=n(null),V=n(null),Y=n(-1),P=n(null),M=n(0),H=n(0),$=n(!1),A=n(!1),U=n([]),j=e.useRef(null!=m&&"card"===o),G=n(null),X=n(0),[K,Z]=s(!1),J=n();r((()=>{h&&(G.current=h.find((e=>"TY"===e.name)),g(h.filter((e=>"TY"!==e.name))))}),[h]),r((()=>{$.current&&(H.current=X.current,B({}))}),[K]),r((()=>{if(x)if(V.current=v.find((e=>e.type_info?.pivot_question))??v.find((e=>"RANGE"===e.type_info?.question_type))??v[0],null!=m){Y.current=Math.min(V.current.type_info.validation.max,Math.max(V.current.type_info.validation.min,m));const e=v.find((e=>e.name===x[0].question_names[0]));L.current={...x[0],question:e},U.current=[...U.current,{...x[0],question:e}],C(U.current),w({Q_1:Y.current})}else if(!L.current&&x.length>0)return L.current=x[0],void te(x[0])}),[x,m]),e.useEffect((()=>{q.length&&(U.current=q,H.current=q.length-1),B({})}),[q]),r((()=>{Object.keys(b).length>0&&L.current.question&&(p.includes(L.current.question.type_info.question_type)&&("DROPDOWN"!==L.current.question.type_info.question_type||"__others__"!==b[L.current.question.name])||A.current)&&!ne()&&(null!=m&&1==q.length?J.current?(clearTimeout(J.current),J.current=null,re()):J.current=setTimeout((()=>{re()}),1500):re())}),[b]),r((()=>{if(null!=b?.[V.current?.name])if(G.current?.is_based_on_rating){const e=V.current?.type_info?.choices[b?.[V.current?.name]-V.current?.type_info?.validation?.min??0]?.dependent_question_names,n=G.current?.question_names.find((n=>e?.includes(n))),t=v.find((e=>e.name===n));R(t)}else{const e=v.find((e=>e.name==G.current?.question_names[0]));R(e)}}),[b?.[V.current?.name]]);const ee=()=>{c({...b,others_meta:T},(()=>{Q?.type_info.meta?.skipThankYouPage?d?setTimeout((()=>{y?.()}),300):window.location.href=Q?.type_info.meta?.redirectUrl:_(!0)}))},ne=()=>(M.current===x.length-1||"end"===L.current.branchOption)&&H.current===q.length-1,te=e=>{let n={};if(e.is_based_on_rating){const t=V.current?.type_info?.choices[b?.[V.current?.name]-V.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=v.find((e=>e.name===r))}else n=v.find((n=>n.name===e.question_names[0]));L.current.question=n;U.current.find((e=>e.question.name===n.name))?(H.current+=1,B({})):C([...U.current,{...e,question:n}])},re=()=>{if(ne())_(!0);else{if(L.current.nextBlock)M.current=x.findIndex((e=>e.name===L.current.nextBlock));else if(L.current.question.type_info?.meta?.branches){const e=L.current.question.type_info?.meta?.branches,n=b[L.current.question.name];let t;if(t="RANGE"===L.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return ee(),void _(!0);M.current=x.findIndex((e=>e.name===t.nextBlock))}else M.current+=1}else M.current+=1;L.current=x[M.current],te(x[M.current])}},oe=(e,n,t)=>{if(j.current=!1,t){if(A.current=!0,null!=b[e.question.name]&&e.name!==q[q.length-1].name){const[t,r]=(e=>{const n=q.findIndex((n=>n.name===e.name)),t=q.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=b[n.question.name],e)),{});return M.current=x.findIndex((n=>n.name===e.name)),[t,r]})(e);w({...r,...null!=n&&{[e.question.name]:n}}),U.current=t}else w({...b,...null!=n&&{[e.question.name]:n}});V?.current?.name==e?.question?.name&&(Y.current=n)}else w({...b,...null!=n&&{[e.question.name]:n}})};if(!L.current||!L.current.question)return null;const se=q[Math.min(H.current??q.length-1,q.length-1)];return e.createElement("div",{className:`freemium-survey-components ${f?"mobile-preview":""} ${o}-survey-style`,id:"freemium-survey"},k?null:e.createElement(E,{totalSteps:x.length,completedSteps:M.current+(k?1:0)}),e.createElement(i,{mode:"out-in"},e.createElement(a,{key:H.current+String(k),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:K?"fade-reverse":"fade"},e.createElement("div",{className:"questions"},k?e.createElement(D,{thankYouQuestion:Q,preview:d,placeholders:u,npsValue:Y.current}):e.createElement("div",{ref:P,id:`${se.question.name}`,className:`question-container ${l||"card"===o}`,"data-test-question-name":se.question.name},e.createElement("div",{className:"question-text",dangerouslySetInnerHTML:{__html:z(se.question.text,u,Y.current)},title:`question-${H.current}`,role:"heading","aria-level":1}),e.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:{width:"100%"}},e.createElement(S,{question:se.question,isFinalQn:ne(),formValues:b,othersMeta:T,autoFocus:!0,autoFocusDelay:"standard"===o?350:0,saveOthersValue:(e,n)=>{if(null===n){const n={...T};delete n[e],W({...n})}else W({...T,[e]:n})},onChangeHandler:e=>{A.current=!1,M.current=x.findIndex((e=>e.name===se.name)),L.current=se,$.current=!1,Z(!1),oe(se,e,!("DROPDOWN"===se.question.type_info.question_type&&"__others__"===e)&&p.includes(se.question.type_info.question_type)&&!ne())}})),e.createElement(F,{question:se.question,block:se,widget:l,surveyStyle:o,formValues:b,othersMeta:T,blocksWithQns:q,blocks:x,thankYouQuestion:Q,currentBlockIndexOfBlocksWithQns:H,reverse:K,setReverse:Z,currentBlockIndexOfBlocks:M,currentEditingBlock:L,isSubmitting:I,isValuesCommitted:A,isCurrentBlockFinal:ne,setHorizontalScrollUnits:B,handleFormValues:oe,skipBlock:e=>{A.current=!0,delete b[e.name],w({...b})},setIsSubmitting:O,onSubmit:ee,setIsSurveyCompleted:_,preventQuestionAnimation:j,preview:d,closePreview:y,tempCurrentBlockIndexOfBlocksWithQns:X,setCurrentBlockIndexOfBlocksWithQnsDirty:$}))))))};l(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n}\n\n.freemium-survey-components.widget-survey-components {\n overflow: hidden;\n}\n.freemium-survey-components.widget-survey-components * {\n scrollbar-color: rgba(216, 216, 216, 0.5) transparent !important;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar {\n height: auto;\n height: initial;\n width: 6px;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar-track {\n background: transparent !important;\n}\n.freemium-survey-components.widget-survey-components * ::-webkit-scrollbar-thumb {\n border-radius: 5px;\n background: rgba(216, 216, 216, 0.5) !important;\n}\n.freemium-survey-components.widget-survey-components p {\n margin: 0;\n}\n.freemium-survey-components.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n position: relative;\n display: flex;\n justify-content: row;\n align-items: flex-end;\n height: 100%;\n transition: height 200ms ease;\n}\n.freemium-survey-components.widget-survey-components .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n text-align: center;\n max-height: 100%;\n min-width: 100%;\n max-width: 700px;\n margin: 0 auto;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n padding: 28px;\n padding-top: 0;\n grid-gap: 28px;\n gap: 28px;\n position: absolute;\n overflow: auto;\n}\n.freemium-survey-components.widget-survey-components .question-wrapper {\n width: 100%;\n flex-grow: 1;\n padding: 4px 2px;\n overflow: auto;\n}\n.freemium-survey-components.widget-survey-components .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.widget-survey-components .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.widget-survey-components .question-text p {\n all: inherit;\n}\n.freemium-survey-components.widget-survey-components .nps-container .footer {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-enter {\n opacity: 1;\n transform: translateX(80px);\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-enter-active {\n position: absolute;\n opacity: 1;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-enter-done {\n position: absolute;\n}\n.freemium-survey-components.widget-survey-components .fade-exit {\n opacity: 0.05;\n pointer-events: none;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-exit-active {\n pointer-events: none;\n opacity: 0;\n transform: translateX(-80px);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-enter {\n opacity: 0;\n position: absolute;\n transform: translateX(-80px);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-enter-active {\n opacity: 1;\n position: absolute;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit {\n opacity: 0.05;\n transform: translateX(0);\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit-active {\n opacity: 0;\n transform: translateX(80px);\n}\n.freemium-survey-components.widget-survey-components .fade-enter-active,\n.freemium-survey-components.widget-survey-components .fade-reverse-enter-active {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.widget-survey-components .fade-reverse-exit-active,\n.freemium-survey-components.widget-survey-components .fade-exit-active {\n transition: opacity 200ms, transform 200ms;\n}\n.freemium-survey-components.widget-survey-components .question-footer {\n margin: 0px auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: -webkit-sticky;\n position: sticky;\n bottom: -28px;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.widget-survey-components .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.widget-survey-components .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .skip-button {\n font-weight: 500;\n cursor: pointer;\n color: #3a4b67;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.widget-survey-components .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.widget-survey-components .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.widget-survey-components .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.widget-survey-components .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.widget-survey-components .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.widget-survey-components .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.widget-survey-components .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.widget-survey-components .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\n.freemium-survey-components.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\n.freemium-survey-components.widget-survey-components .message-container:empty {\n display: none;\n}\n\n.freemium-survey-components.widget-survey-components.compact-style .nps-question-text {\n text-align: center;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-container {\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .compact-footer-layout {\n display: flex;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .compact-footer-layout:empty {\n display: none;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .action-buttons {\n grid-gap: 32px;\n gap: 32px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .submit,\n.freemium-survey-components.widget-survey-components.compact-style .question-footer .action-button {\n max-width: unset;\n width: 100%;\n}\n.freemium-survey-components.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 8px;\n gap: 8px;\n}\n.freemium-survey-components.widget-survey-components.compact-style .thankyou .text {\n width: 95%;\n}\n\n.freemium-survey-components.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\n.freemium-survey-components.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\n.freemium-survey-components.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\n.freemium-survey-components.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\n.freemium-survey-components.widget-survey-components.default-style .radio-group {\n flex-direction: column;\n flex-wrap: nowrap;\n overflow: auto;\n}\n.freemium-survey-components.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n color: #3a4b67;\n}\n.freemium-survey-components.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.freemium-survey-components.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\n.freemium-survey-components.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.widget-survey-components.cozy-style {\n max-width: 1000px;\n min-width: 600px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n text-align: left;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-question-text {\n text-align: center;\n width: 70%;\n margin: 0 auto;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n color: #3a4b67;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.freemium-survey-components.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.freemium-survey-components.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const W=({thankYouQuestion:n,preview:t,placeholders:r,npsValue:o},s)=>e.createElement(e.Fragment,null,e.createElement("div",{className:"heading"},"Thank you!"),e.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:z(n.text,r,o)}})),L=({currentBlockIndexOfBlocks:n,currentBlockIndexOfBlocksWithQns:t,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i,tempCurrentBlockIndexOfBlocksWithQns:a,setCurrentBlockIndexOfBlocksWithQnsDirty:u,setReverse:c,reverse:l})=>e.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},e.createElement("button",{disabled:0==t.current,className:"navigation-button",onClick:()=>{l?(t.current=Math.max(t.current-1,0),n.current=o.findIndex((e=>e.name===r[t.current].name))):(a.current=Math.max(t.current-1,0),n.current=o.findIndex((e=>e.name===r[a.current].name))),i.current=!1,u.current=!0,c(!0),s({})}},e.createElement(O,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=r.length-1,onClick:()=>{i.current=!1,l?(a.current=Math.min(t.current+1,r.length-1),n.current=o.findIndex((e=>e.name===r[a.current].name))):(t.current=Math.min(t.current+1,r.length-1),n.current=o.findIndex((e=>e.name===r[t.current].name))),u.current=!0,c(!1),s({})}},e.createElement(I,null))),V=({widget:n,widgetStyle:t,surveyStyle:r,formValues:o,blocksWithQns:s,blocks:i,thankYouQuestion:a,currentBlockIndexOfBlocksWithQns:u,currentBlockIndexOfBlocks:c,currentEditingBlock:l,isSubmitting:m,isValuesCommitted:d,isCurrentBlockFinal:f,setHorizontalScrollUnits:y,handleFormValues:v,skipBlock:h,setIsSubmitting:x,onSubmit:g,setIsSurveyCompleted:b,preventQuestionAnimation:w,preview:k,closePreview:_,setReverse:q,tempCurrentBlockIndexOfBlocksWithQns:E,question:C,block:N,reverse:I,othersMeta:O,setCurrentBlockIndexOfBlocksWithQnsDirty:S,...z})=>{const Q=z.blockIndex??u.current,D=()=>!(!n&&"standard"===r||0===Q&&void 0===o[C.name]||0===u.current&&!I),R=()=>(!p.includes(C.type_info.question_type)||"DROPDOWN"===C.type_info.question_type&&"__others__"===o[C.name])&&!f(),F=()=>"RANGE"!==C.type_info.question_type&&!N.required&&!f(),T=()=>("DROPDOWN"===C.type_info.question_type&&!N.required&&o[C.name],!1),W=()=>f()&&(n||"standard"!==r),V=("MULTI_SELECT"===l.current.question.type_info.question_type&&o[l.current.question.name]?.includes("__others__")||"DROPDOWN"===l.current.question.type_info.question_type&&"__others__"===o[l.current.question.name])&&(!O[l.current.question.name]||""===O[l.current.question.name]),Y="compact"===t&&F()&&D(),P=!Y&&D();return e.createElement("div",{className:"question-footer"},Y?e.createElement("div",{className:"compact-footer-layout"},D()&&e.createElement(L,{currentBlockIndexOfBlocks:c,currentBlockIndexOfBlocksWithQns:u,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:y,preventQuestionAnimation:w,setReverse:q,tempCurrentBlockIndexOfBlocksWithQns:E,setCurrentBlockIndexOfBlocksWithQnsDirty:S,reverse:I}),F()&&e.createElement("button",{className:"skip-button",onClick:()=>{q(!1),h(C)}},"Skip")):null,(R()||T()||"compact"!==t&&F()||P||W())&&e.createElement("div",{className:"action-buttons"},P&&e.createElement("div",{style:{marginRight:"auto"}},e.createElement(L,{currentBlockIndexOfBlocks:c,currentBlockIndexOfBlocksWithQns:u,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:y,preventQuestionAnimation:w,setReverse:q,tempCurrentBlockIndexOfBlocksWithQns:E,setCurrentBlockIndexOfBlocksWithQnsDirty:S,reverse:I})),R()&&e.createElement(B,{onClick:()=>{S.current=!1,q(!1),v(s[Q],null,!0)},disabled:l.current.required&&(!o[l.current.question.name]||Array.isArray(o[l.current.question.name])&&0===o[l.current.question.name].length)||l.current.question.type_info.meta?.othersRequired&&V,className:"next-button"},"Next"),W()&&e.createElement("div",{className:"submit"},e.createElement(B,{disabled:(l.current.required||l.current.question.type_info.pivot_question)&&(null==o[l.current.question.name]||0===o[l.current.question.name]?.length)||l.current.question.type_info.meta?.othersRequired&&V||m,onClick:()=>{g(),x(!0)}},m?"Submitting":"Submit survey")),T()&&e.createElement("button",{className:"skip-button",onClick:()=>{q(!1),l.current=s[Q],c.current=i.findIndex((e=>e.name===s[Q].name)),h(C)}},"Clear selection")))},Y=({survey:t,surveyStyle:i="standard",placeholders:l,onSubmit:m,widget:d,npsValue:y,widgetStyle:v,widgetHeaderQuerySelector:h,preview:x,mobilePreview:g,closePreview:b})=>{const w=t.question_details?.questions||[],k=t.meta?.blocks||[],[_,q]=s(null),[C,N]=s({}),[B,I]=s(!1),[O,Q]=s([]),[D,R]=s({}),[F,T]=s(!1),[L,Y]=s(null),[P,M]=s({}),H=n(null),$=n(null),A=n(-1),[U,j]=s(null),G=n(0),X=n(0),K=n(!1),Z=n([]),J=n(!!y&&"card"===i),ee=n(null),ne=n(0),[te,re]=s(!1),oe=n(0),se=n(!1);r((()=>{k&&(ee.current=k.find((e=>"TY"===e.name)),q(k.filter((e=>"TY"!==e.name))))}),[k]),r((()=>{se.current&&(X.current=ne.current,R({}))}),[te]),r((()=>{if(_)if($.current=w.find((e=>e.type_info?.pivot_question))??w.find((e=>"RANGE"===e.type_info?.question_type))??w[0],null!=y){A.current=y;const e=w.find((e=>e.name===_[0].question_names[0]));H.current={..._[0],question:e},Z.current=[...Z.current,{..._[0],question:e}],Q(Z.current),N({Q_1:y})}else if(!H.current&&_.length>0)return H.current=_[0],void ue(_[0])}),[_,y]),r((()=>{O.length&&(Z.current=O,X.current=O.length-1,R({}))}),[O]),r((()=>{Object.keys(C).length>0&&H.current.question&&(p.includes(H.current.question.type_info.question_type)&&("DROPDOWN"!==H.current.question.type_info.question_type||"__others__"!==C[H.current.question.name])||K.current)&&!ae()&&(y&&1==O.length?setTimeout((()=>{ce()}),1500):ce())}),[C]),r((()=>{if(null!=C?.[$.current?.name])if(ee.current?.is_based_on_rating){const e=$.current?.type_info?.choices[C?.[$.current?.name]-$.current?.type_info?.validation?.min??0]?.dependent_question_names,n=ee.current?.question_names.find((n=>e?.includes(n))),t=w.find((e=>e.name===n));Y(t)}else{const e=w.find((e=>e.name==ee.current?.question_names[0]));Y(e)}}),[C?.[$.current?.name]]);o((()=>{(()=>{if(U){U.style.minHeight="unset",U.style.maxHeight="unset",U.style.height="min-content";const e=Math.min(U?.scrollHeight+2,f[v]);U.style.height=e+"px",U.style.minHeight=e+"px",oe.current=e}})()}),[U]);const ie=()=>{m({...C,others_meta:P},(()=>{L?.type_info.meta?.skipThankYouPage?x?setTimeout((()=>{b?.()}),300):window.location.href=L?.type_info.meta?.redirectUrl:I(!0)}))},ae=()=>(G.current===_.length-1||"end"===H.current.branchOption)&&X.current===O.length-1,ue=e=>{let n={};if(e.is_based_on_rating){const t=$.current?.type_info?.choices[C?.[$.current?.name]-$.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=w.find((e=>e.name===r))}else n=w.find((n=>n.name===e.question_names[0]));H.current.question=n;Z.current.find((e=>e.question.name===n.name))?(R({}),X.current+=1):Q([...Z.current,{...e,question:n}])},ce=()=>{if(ae())I(!0);else{if(H.current.nextBlock)G.current=_.findIndex((e=>e.name===H.current.nextBlock));else if(H.current.question.type_info?.meta?.branches){const e=H.current.question.type_info?.meta?.branches,n=C[H.current.question.name];let t;if(t="RANGE"===H.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return ie(),void I(!0);G.current=_.findIndex((e=>e.name===t.nextBlock))}else G.current+=1}else G.current+=1;H.current=_[G.current],ue(_[G.current])}},le=(e,n,t)=>{if(J.current=!1,t){if(K.current=!0,null!=C[e.question.name]&&e.name!==O[O.length-1].name){const[t,r]=(e=>{const n=O.findIndex((n=>n.name===e.name)),t=O.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=C[n.question.name],e)),{});return G.current=_.findIndex((n=>n.name===e.name)),[t,r]})(e);N({...r,...null!=n&&{[e.question.name]:n}}),Z.current=t}else N({...C,...null!=n&&{[e.question.name]:n}});$?.current?.name==e?.question?.name&&(A.current=n)}else N({...C,...null!=n&&{[e.question.name]:n}})};if(!H.current||!H.current.question)return null;const me=O[Math.min(X.current??O.length-1,O.length-1)];return e.createElement("div",{className:`freemium-survey-components ${d?"widget-survey-components":""} ${v}-style ${g?"mobile-preview":""}`,id:"freemium-survey"},h&&!B&&document.querySelector(h)?c.createPortal(e.createElement(E,{totalSteps:_.length,completedSteps:G.current+(B?1:0),widget:!0}),document.querySelector(h)):null,e.createElement("div",{className:"questions",style:{height:oe.current,...1===O.length?{transition:"none"}:{}}},e.createElement(u,{component:null},e.createElement(a,{key:me.question.name+String(B),unmountOnExit:!0,addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:te?"fade-reverse":"fade"},e.createElement("div",{ref:e=>e?j(e):null,id:`${me.question.name}`,className:"question-container "+(B?"thankyou":""),"data-test-question-name":me.question.name},B?e.createElement(W,{thankYouQuestion:L,preview:x,placeholders:l,npsValue:A.current,setBlockElementRef:j}):e.createElement(e.Fragment,null,e.createElement("div",{className:"question-text "+("RANGE"===me.question.type_info.question_type?"nps-question-text":""),dangerouslySetInnerHTML:{__html:z(me.question.text,l,A.current)},title:`question-${X.current}`,role:"heading","aria-level":1}),e.createElement("div",{className:"question-wrapper",onTransitionEndCapture:e=>e.stopPropagation()},e.createElement(S,{question:me.question,isFinalQn:ae(),formValues:C,othersMeta:P,autoFocus:!0,autoFocusDelay:"standard"===i?300:0,saveOthersValue:(e,n)=>{if(null===n){const n={...P};delete n[e],M({...n})}else M({...P,[e]:n})},onChangeHandler:e=>{K.current=!1,G.current=_.findIndex((e=>e.name===me.name)),H.current=me,se.current=!1,re(!1),le(me,e,!("DROPDOWN"===me.question.type_info.question_type&&"__others__"===e)&&p.includes(me.question.type_info.question_type)&&!ae())}})),e.createElement(V,{question:me.question,block:me,widget:d,widgetStyle:v,surveyStyle:i,formValues:C,othersMeta:P,blocksWithQns:O,blocks:_,thankYouQuestion:L,currentBlockIndexOfBlocksWithQns:X,reverse:te,setReverse:re,currentBlockIndexOfBlocks:G,currentEditingBlock:H,isSubmitting:F,isValuesCommitted:K,isCurrentBlockFinal:ae,setHorizontalScrollUnits:R,handleFormValues:le,skipBlock:e=>{K.current=!0,delete C[e.name],N({...C})},setIsSubmitting:T,onSubmit:ie,setIsSurveyCompleted:I,preventQuestionAnimation:J,preview:x,closePreview:b,tempCurrentBlockIndexOfBlocksWithQns:ne,setCurrentBlockIndexOfBlocksWithQnsDirty:se})))))))};l(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #3a4b67;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 480px;\n --default-widget-max-height: 460px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-step-navigation {\n border-radius: 3px;\n border: 1px solid #efefef;\n white-space: nowrap;\n}\n.freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n\n.freemium-survey-components.standard-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 800ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n overflow: auto;\n opacity: 1;\n}\n.freemium-survey-components.standard-survey-style .hide-question-container {\n pointer-events: none;\n opacity: 0;\n}\n.freemium-survey-components.standard-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.standard-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.standard-survey-style .question-footer {\n display: flex;\n justify-content: flex-start;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.standard-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components.standard-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .skip-button {\n font-weight: 500;\n color: #3a4b67;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.standard-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.standard-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .submit {\n max-width: 700px;\n margin: 0 auto;\n text-align: left;\n background: transparent;\n box-shadow: none;\n padding-bottom: 40px;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .fade-enter {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.standard-survey-style .fade-enter-active {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit-active {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.standard-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .heading {\n font-weight: 500;\n font-size: 22px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #475867;\n width: 75%;\n}\n.freemium-survey-components.standard-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.standard-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .message-container:empty {\n display: none;\n}\n@media (max-width: 550px) {\n .freemium-survey-components.standard-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .action-buttons button {\n max-width: unset;\n }\n .freemium-survey-components.standard-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .thankyou .text {\n width: auto;\n }\n}\n\n@media (max-width: 550px) {\n .freemium-survey-component .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-component .responsive-text-field .textarea-container {\n display: flex;\n }\n}\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const P=({thankYouQuestion:n,preview:t,placeholders:o,npsValue:s})=>(r((()=>{t||n.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=n.type_info.meta?.redirectUrl}),1e3*(1e3*n.type_info.meta?.redirectDelay??1e4))}),[]),e.createElement("div",{className:"question-container thankyou"},e.createElement("div",{className:"heading"},"Thank you!"),e.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:z(n.text,o,s)}}),n.type_info.meta?.redirectUrl&&e.createElement("div",{style:{width:"100%"}},e.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",n.type_info.meta?.redirectDelay," seconds.",e.createElement("br",null)),e.createElement("a",{className:"link",href:n.type_info.meta?.redirectUrl},n?.type_info.meta?.redirectUrl)))),M=({currentBlockIndex:n,currentBlockIndexOfBlocksWithQns:t,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i})=>e.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},e.createElement("button",{disabled:0==t.current,className:"navigation-button",onClick:()=>{t.current=Math.max(t.current-1,0),n.current=o.findIndex((e=>e.name===r[t.current].name)),i.current=!1,s(t.current)}},e.createElement(O,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=r.length-1,onClick:()=>{i.current=!1,t.current=Math.min(t.current+1,r.length-1),n.current=o.findIndex((e=>e.name===r[t.current].name)),s(t.current)}},e.createElement(I,null))),H=({widget:n,block:t,surveyStyle:r,formValues:o,othersMeta:s,blocksWithQns:i,blocks:a,thankYouQuestion:u,currentBlockIndexOfBlocksWithQns:c,currentBlockIndexOfBlocks:l,currentEditingBlock:m,isSubmitting:d,isValuesCommitted:f,isCurrentBlockFinal:y,setHorizontalScrollUnits:v,handleFormValues:h,skipBlock:x,setIsSubmitting:g,onSubmit:b,setIsSurveyCompleted:w,preventQuestionAnimation:k,preview:_,closePreview:q,...E})=>{const C=E.blockIndex??c.current,N=E.question??i[C].question,I=()=>N.name===m.current.question.name&&(!p.includes(N.type_info.question_type)||"DROPDOWN"===N.type_info.question_type&&"__others__"===o[N.name])&&!y(),O=()=>"RANGE"!==N.type_info.question_type&&!t.required&&N.name===m.current.question.name&&!y(),S=()=>("DROPDOWN"===N.type_info.question_type&&N.name!==m.current.question.name&&!t.required&&o[N.name],!1),z=()=>y()&&(n||"standard"!==r)&&N.name===m.current.question.name,Q=("MULTI_SELECT"===m.current.question.type_info.question_type&&o[m.current.question.name]?.includes("__others__")||"DROPDOWN"===m.current.question.type_info.question_type&&"__others__"===o[m.current.question.name])&&(!s[m.current.question.name]||""===s[m.current.question.name]);return e.createElement("div",{className:"question-footer"},!(!n&&"standard"===r||0===C&&!o[N.name])&&e.createElement(M,{currentBlockIndex:l,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:i,blocks:a,setHorizontalScrollUnits:v,preventQuestionAnimation:k}),(I()||S()||O()||z())&&e.createElement("div",{className:"action-buttons"},I()&&e.createElement(B,{onClick:()=>{h(i[C],null,!0)},disabled:m.current.required&&(!o[m.current.question.name]||Array.isArray(o[m.current.question.name])&&0===o[m.current.question.name].length)||m.current.question.type_info.meta?.othersRequired&&Q,className:"next-button"},"Next"),O()&&e.createElement("button",{className:"skip-button",onClick:()=>x(N)},"Skip"),S()&&e.createElement("button",{className:"skip-button",onClick:()=>{m.current=i[C],l.current=a.findIndex((e=>e.name===i[C].name)),x(N)}},"Clear selection"),z()&&e.createElement("div",{className:"submit"},e.createElement(B,{disabled:(m.current.required||m.current.question.type_info.pivot_question)&&(null==o[m.current.question.name]||0===o[m.current.question.name]?.length)||m.current.question.type_info.meta?.othersRequired&&Q||d,onClick:()=>{g(!0),b()}},d?"Submitting":"Submit survey"))))},$=({survey:t,surveyStyle:o="standard",placeholders:u,onSubmit:c,widget:l,npsValue:m,preview:d,mobilePreview:f,closePreview:y})=>{const v=t.question_details?.questions||[],h=t.meta?.blocks||[],[x,g]=s(null),[b,w]=s({}),[k,_]=s(!1),[q,C]=s([]),[N,I]=s(0),[O,Q]=s(!1),[D,R]=s(null),[F,T]=s({}),W=n(null),L=n(null),V=n(-1),Y=n(null),M=n(0),$=n(0),A=n(!1),U=n([]),j=n(null!=m&&"card"===o),G=n(null),X=n([]);r((()=>{h&&(G.current=h.find((e=>"TY"===e.name)),g(h.filter((e=>"TY"!==e.name))))}),[h]),r((()=>{if(x)if(L.current=v.find((e=>e.type_info?.pivot_question))??v.find((e=>"RANGE"===e.type_info?.question_type))??v[0],null!=m){V.current=Math.min(L.current.type_info.validation.max,Math.max(L.current.type_info.validation.min,m));const e=v.find((e=>e.name===x[0].question_names[0]));W.current={...x[0],question:e},U.current=[...U.current,{...x[0],question:e}],C(U.current),w({Q_1:V.current})}else if(!W.current&&x.length>0)return W.current=x[0],void J(x[0])}),[x,m]),r((()=>{q.length&&(U.current=q,$.current=q.length-1),l||"standard"!==o?(Y.current&&(Y.current.style.maxHeight="unset"),X.current[M.current]=Y.current?.scrollHeight||X.current[M.current]||0,Y.current&&(Y.current.style.maxHeight="100%")):Y.current?.scrollIntoView({block:"start",behavior:"smooth"}),I(q.length-1)}),[q]),r((()=>{Object.keys(b).length>0&&W.current.question&&(p.includes(W.current.question.type_info.question_type)&&("DROPDOWN"!==W.current.question.type_info.question_type||"__others__"!==b[W.current.question.name])||A.current)&&!Z()&&ee()}),[b]),r((()=>{if(null!=b?.[L.current?.name])if(G.current?.is_based_on_rating){const e=L.current?.type_info?.choices[b?.[L.current?.name]-L.current?.type_info?.validation?.min??0]?.dependent_question_names,n=G.current?.question_names.find((n=>e?.includes(n))),t=v.find((e=>e.name===n));R(t)}else{const e=v.find((e=>e.name==G.current?.question_names[0]));R(e)}}),[b?.[L.current?.name]]);const K=()=>{c({...b,others_meta:F},(()=>{D?.type_info.meta?.skipThankYouPage?d?setTimeout((()=>{y?.()}),300):window.location.href=D?.type_info.meta?.redirectUrl:_(!0)}))},Z=()=>M.current===x.length-1||"end"===W.current.branchOption,J=e=>{let n={};if(e.is_based_on_rating){const t=L.current?.type_info?.choices[b?.[L.current?.name]-L.current?.type_info?.validation?.min??0]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=v.find((e=>e.name===r))}else n=v.find((n=>n.name===e.question_names[0]));W.current.question=n;U.current.find((e=>e.question.name===n.name))?(I(N+1),$.current+=1):C([...U.current,{...e,question:n}])},ee=()=>{if(Z())_(!0);else{if(W.current.nextBlock)M.current=x.findIndex((e=>e.name===W.current.nextBlock));else if(W.current.question.type_info?.meta?.branches){const e=W.current.question.type_info?.meta?.branches,n=b[W.current.question.name];let t;if(t="RANGE"===W.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return K(),void _(!0);M.current=x.findIndex((e=>e.name===t.nextBlock))}else M.current+=1}else M.current+=1;W.current=x[M.current],J(x[M.current])}},ne=e=>{A.current=!0,delete b[e.name],w({...b})},te=(e,n,t)=>{if(j.current=!1,t){if(A.current=!0,null!=b[e.question.name]&&e.name!==q[q.length-1].name){const[t,r]=(e=>{const n=q.findIndex((n=>n.name===e.name)),t=q.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=b[n.question.name],e)),{});return M.current=x.findIndex((n=>n.name===e.name)),[t,r]})(e);w({...r,...null!=n&&{[e.question.name]:n}}),U.current=t}else w({...b,...null!=n&&{[e.question.name]:n}});L?.current?.name==e?.question?.name&&(V.current=n)}else w({...b,...null!=n&&{[e.question.name]:n}})},re=(e,n)=>{const t=q.find((n=>n.question.name===e));if(M.current=x.findIndex((e=>e.name===t.name)),W.current=t,null===n){const n={...F};delete n[e],T({...n})}else T({...F,[e]:n})};if(!W.current||!W.current.question)return null;const oe=("MULTI_SELECT"===W.current.question.type_info.question_type&&b[W.current.question.name]?.includes("__others__")||"DROPDOWN"===W.current.question.type_info.question_type&&"__others__"===b[W.current.question.name])&&(!F[W.current.question.name]||""===F[W.current.question.name]);return e.createElement("div",{className:`freemium-survey-components ${l?"widget-survey-components":""} ${f?"mobile-preview":""} ${o}-survey-style`,id:"freemium-survey"},k?null:e.createElement(E,{totalSteps:x.length,completedSteps:M.current}),e.createElement(i,{mode:"out-in"},e.createElement(a,{key:String(k),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:l?"":"fade"},e.createElement("div",null,k?e.createElement(P,{thankYouQuestion:D,preview:d,placeholders:u,npsValue:V.current}):e.createElement(e.Fragment,null,e.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:l||"card"===o?{transform:`translateX(calc(-${N} * 100%))`,height:`${X.current[M.current]}px`,transition:j.current||q?.length<=1?"none":"all 300ms ease-out 0ms"}:{},className:"questions"},q.map(((n,t)=>e.createElement("div",{key:n.question.name,ref:Y,className:"question-container "+(!l&&"card"!==o||$.current===t?"":"hide-question-container")},e.createElement("div",{className:"question-text "+(0===t?"nps":""),dangerouslySetInnerHTML:{__html:z(n.question.text,u,V.current)},title:`question-${t}`,role:"heading","aria-level":1}),e.createElement("button",{disabled:!l&&"standard"===o,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),e.createElement(S,{question:n.question,isFinalQn:Z(),formValues:b,othersMeta:F,autoFocus:$.current===t,autoFocusDelay:"standard"===o?350:20,saveOthersValue:re,onChangeHandler:e=>{A.current=!1,M.current=x.findIndex((e=>e.name===n.name)),W.current=n,te(n,e,!("DROPDOWN"===n.question.type_info.question_type&&"__others__"===e)&&p.includes(n.question.type_info.question_type)&&!Z())}}),e.createElement("button",{disabled:!l&&"standard"===o,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),e.createElement(H,{question:n.question,block:n,blockIndex:t,widget:l,surveyStyle:o,formValues:b,othersMeta:F,blocksWithQns:q,blocks:x,thankYouQuestion:D,currentBlockIndexOfBlocksWithQns:$,currentBlockIndexOfBlocks:M,currentEditingBlock:W,isSubmitting:O,isValuesCommitted:A,isCurrentBlockFinal:Z,setHorizontalScrollUnits:I,handleFormValues:te,skipBlock:ne,setIsSubmitting:Q,onSubmit:K,setIsSurveyCompleted:_,preventQuestionAnimation:j,preview:d,closePreview:y})))),!l&&"card"!==o&&Z()&&e.createElement("div",{className:"submit"},e.createElement(B,{disabled:(W.current.required||W.current.question.type_info.pivot_question)&&(null==b[W.current.question.name]||0===b[W.current.question.name]?.length)||W.current.question.type_info.meta?.othersRequired&&oe||O,onClick:()=>{Q(!0),c({...b,others_meta:F},(()=>{D?.type_info.meta?.skipThankYouPage?d?setTimeout((()=>{y?.()}),300):window.location.href=D?.type_info.meta?.redirectUrl:_(!0)}))}},O?"Submitting":"Submit survey"))))))))},A=n=>{const t=Q(n.survey);return e.createElement(e.Fragment,null,"standard"===n.surveyStyle?e.createElement($,Object.assign({},n,{survey:t})):e.createElement(T,Object.assign({},n,{survey:t})))},U=n=>{const t=Q(n.survey);return e.createElement(Y,Object.assign({},n,{survey:t}))};export{N as BUTTON_SIZE_VARIANTS,B as Button,w as CheckboxGroup,x as Input,m as NPS,E as ProgressBar,q as Radio,_ as RadioGroup,A as Survey,g as TextArea,U as WebInAppSurvey};
|