@qaiddev/quests-embed 1.0.1 → 1.1.1
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/README.md +3 -0
- package/dist/embed.d.ts +26 -0
- package/dist/qaid-quests.js +360 -272
- package/dist/qaid-quests.js.map +1 -1
- package/dist/qaid-quests.umd.cjs +6 -1
- package/dist/qaid-quests.umd.cjs.map +1 -1
- package/dist/styles.d.ts +19 -8
- package/dist/themes/index.d.ts +8 -0
- package/dist/types.d.ts +80 -7
- package/package.json +3 -1
package/dist/qaid-quests.umd.cjs
CHANGED
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
(function(b,v){typeof exports=="object"&&typeof module<"u"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(b=typeof globalThis<"u"?globalThis:b||self,v(b.QaidQuests={}))})(this,(function(b){"use strict";const v='*{box-sizing:border-box}button{cursor:pointer;font-family:inherit}.qaid-q-root{font-family:var(--qaid-font-family, system-ui, -apple-system, sans-serif);font-size:var(--qaid-font-size, 16px);color:light-dark(#1f2937,#f9fafb)}.qaid-q-backdrop{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,var(--qaid-backdrop-opacity, .4));animation:qaid-q-fade .18s ease-out}@keyframes qaid-q-fade{0%{opacity:0}to{opacity:1}}.qaid-q-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;width:var(--qaid-modal-width, 480px);max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);pointer-events:auto;display:flex;flex-direction:column}.qaid-q-card{background:light-dark(#ffffff,#1f2937);color:light-dark(#1f2937,#f9fafb);border-radius:1rem;box-shadow:0 25px 50px -12px light-dark(rgba(0,0,0,.25),rgba(0,0,0,.6));padding:1.5rem;overflow:hidden;display:flex;flex-direction:column;min-height:0}:where(.qaid-q-root.qaid-q-inline) .qaid-q-card{box-shadow:none;border:1px solid light-dark(#e5e7eb,#374151);flex:1;min-height:0}:where(.qaid-q-root.qaid-q-inline){height:100%;display:flex;flex-direction:column;min-height:0}.qaid-q-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}.qaid-q-title{font-size:1.125em;font-weight:700;margin:0;color:light-dark(#1f2937,#f9fafb)}.qaid-q-step-counter{font-size:.875em;color:light-dark(#6b7280,#9ca3af);font-variant-numeric:tabular-nums;white-space:nowrap}.qaid-q-close{width:28px;height:28px;padding:0;border:none;border-radius:50%;background:transparent;color:light-dark(#6b7280,#9ca3af);display:inline-flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none}.qaid-q-close:hover{background:light-dark(#f3f4f6,#374151);color:light-dark(#1f2937,#f9fafb)}.qaid-q-close:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-marker, #6366f1) 30%,transparent)}.qaid-q-progress{position:relative;height:4px;background:light-dark(#e5e7eb,#374151);border-radius:9999px;overflow:hidden;margin-bottom:1.25rem}.qaid-q-progress--inline{flex:1;min-width:60px;margin-bottom:0}.qaid-q-progress-fill{position:absolute;inset:0 auto 0 0;background:var(--qaid-positive, #10b981);border-radius:9999px;transition:width .3s ease;width:0%}.qaid-q-body{flex:1;min-height:0;overflow-y:auto}.qaid-q-step{display:flex;flex-direction:column;gap:.75rem;animation:qaid-q-slide .22s ease-out}@keyframes qaid-q-slide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.qaid-q-no-motion .qaid-q-step,.qaid-q-no-motion.qaid-q-root{animation:none!important}.qaid-q-label{font-size:1.125em;font-weight:600;margin:0;color:light-dark(#1f2937,#f9fafb);line-height:1.35}.qaid-q-label .qaid-q-required{color:var(--qaid-negative, #ef4444);margin-left:.25rem}.qaid-q-description{font-size:.875em;color:light-dark(#6b7280,#9ca3af);margin:0;line-height:1.4}.qaid-q-error{font-size:.8125em;color:var(--qaid-negative, #ef4444);margin:0}.qaid-q-error:empty{display:none}.qaid-q-input,.qaid-q-textarea{width:100%;padding:.75rem .875rem;border:1px solid light-dark(#d1d5db,#374151);border-radius:.625rem;font-family:inherit;font-size:1em;background:light-dark(#ffffff,#111827);color:light-dark(#1f2937,#f9fafb);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}.qaid-q-textarea{min-height:7rem;resize:vertical;font-family:inherit}.qaid-q-input:focus,.qaid-q-textarea:focus{outline:none;border-color:var(--qaid-marker, #6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-marker, #6366f1) 20%,transparent)}.qaid-q-input::placeholder,.qaid-q-textarea::placeholder{color:light-dark(#9ca3af,#6b7280)}.qaid-q-currency{position:relative}.qaid-q-currency-prefix{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:light-dark(#6b7280,#9ca3af);font-size:1em;font-weight:500;pointer-events:none}.qaid-q-currency .qaid-q-input{padding-left:2.25rem}.qaid-q-range-wrap{display:flex;flex-direction:column;gap:.5rem;padding:.5rem 0}.qaid-q-range-value{font-size:2em;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;color:var(--qaid-positive, #10b981)}.qaid-q-range-value .qaid-q-range-unit{font-size:.5em;font-weight:500;color:light-dark(#6b7280,#9ca3af);margin-left:.25rem}.qaid-q-range{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:9999px;background:light-dark(#e5e7eb,#374151);outline:none}.qaid-q-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--qaid-positive, #10b981);border:3px solid light-dark(#ffffff,#1f2937);box-shadow:0 2px 6px #0003;cursor:pointer;transition:transform .1s}.qaid-q-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--qaid-positive, #10b981);border:3px solid light-dark(#ffffff,#1f2937);box-shadow:0 2px 6px #0003;cursor:pointer}.qaid-q-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px color-mix(in srgb,var(--qaid-marker, #6366f1) 30%,transparent)}.qaid-q-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 6px color-mix(in srgb,var(--qaid-marker, #6366f1) 30%,transparent)}.qaid-q-range-bounds{display:flex;justify-content:space-between;font-size:.8125em;color:light-dark(#6b7280,#9ca3af);font-variant-numeric:tabular-nums}.qaid-q-options{display:flex;flex-direction:column;gap:.5rem}.qaid-q-option{display:flex;align-items:flex-start;gap:.625rem;padding:.75rem .875rem;border:1px solid light-dark(#e5e7eb,#374151);border-radius:.625rem;background:light-dark(#ffffff,#111827);text-align:left;font-size:1em;color:light-dark(#1f2937,#f9fafb);cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s;-webkit-appearance:none;appearance:none;width:100%}.qaid-q-option:hover{border-color:light-dark(#9ca3af,#4b5563);background:light-dark(#f9fafb,#1f2937)}.qaid-q-option:focus-visible{outline:none;border-color:var(--qaid-marker, #6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-marker, #6366f1) 25%,transparent)}.qaid-q-option.qaid-q-selected{border-color:var(--qaid-positive, #10b981);background:color-mix(in srgb,var(--qaid-positive, #10b981) 10%,transparent)}.qaid-q-option-marker{flex-shrink:0;width:1.25rem;height:1.25rem;border:2px solid light-dark(#d1d5db,#4b5563);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-top:.125rem;background:light-dark(#ffffff,#111827);transition:border-color .12s,background .12s}.qaid-q-option.qaid-q-multi .qaid-q-option-marker{border-radius:.25rem}.qaid-q-option.qaid-q-selected .qaid-q-option-marker{border-color:var(--qaid-positive, #10b981);background:var(--qaid-positive, #10b981)}.qaid-q-option.qaid-q-selected .qaid-q-option-marker:after{content:"";display:block;width:.5rem;height:.5rem;border-radius:50%;background:light-dark(#ffffff,#1f2937)}.qaid-q-option.qaid-q-multi.qaid-q-selected .qaid-q-option-marker:after{content:"";display:block;width:.625rem;height:.625rem;border-radius:0;background:transparent;border-right:2px solid light-dark(#ffffff,#1f2937);border-bottom:2px solid light-dark(#ffffff,#1f2937);transform:rotate(45deg) translate(-1px,-2px)}.qaid-q-option-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.qaid-q-option-image{display:block;width:48px;height:48px;aspect-ratio:1 / 1;object-fit:cover;border-radius:.375rem;background:light-dark(#f3f4f6,#374151);flex-shrink:0}.qaid-q-options--image-horizontal .qaid-q-option-body{flex-direction:row;align-items:center;gap:.75rem}.qaid-q-options--image-horizontal .qaid-q-option-body>:not(.qaid-q-option-image){flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.qaid-q-options--image-vertical{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem}.qaid-q-options--image-vertical .qaid-q-option{flex-direction:column;align-items:stretch;text-align:center;padding:.75rem;gap:.5rem}.qaid-q-options--image-vertical .qaid-q-option-body{align-items:center;text-align:center}.qaid-q-options--image-vertical .qaid-q-option-image{width:100%;height:auto;max-width:100%}.qaid-q-options--image-vertical .qaid-q-option-marker{position:absolute;top:.5rem;right:.5rem;margin-top:0}.qaid-q-options--image-vertical .qaid-q-option{position:relative}.qaid-q-options--image-vertical .qaid-q-option-key{position:absolute;top:.5rem;left:.5rem;align-self:auto}.qaid-q-option-label{font-weight:500;line-height:1.3}.qaid-q-option-desc{font-size:.8125em;color:light-dark(#6b7280,#9ca3af);line-height:1.4}.qaid-q-option-key{flex-shrink:0;align-self:center;font-size:.7em;font-weight:600;padding:.125rem .375rem;border-radius:.25rem;background:light-dark(#f3f4f6,#374151);color:light-dark(#6b7280,#9ca3af);font-variant-numeric:tabular-nums}.qaid-q-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:1.25rem}.qaid-q-footer--inline-progress{justify-content:flex-start;gap:.75rem}.qaid-q-footer-left,.qaid-q-footer-right{display:flex;gap:.5rem}.qaid-q-btn{padding:.625rem 1.125rem;border-radius:.5rem;font-size:.9375em;font-weight:500;border:1px solid transparent;cursor:pointer;transition:filter .15s,background .15s,color .15s;-webkit-appearance:none;appearance:none}.qaid-q-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-marker, #6366f1) 30%,transparent)}.qaid-q-btn-secondary{background:transparent;border-color:light-dark(#d1d5db,#4b5563);color:light-dark(#374151,#d1d5db)}.qaid-q-btn-secondary:hover{background:light-dark(#f3f4f6,#374151)}.qaid-q-btn-primary{background:var(--qaid-positive, #10b981);color:var(--qaid-positive-text, #ffffff);border-color:transparent}.qaid-q-btn-primary:hover{filter:brightness(.9)}.qaid-q-btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:none}.qaid-q-hint{font-size:.75em;color:light-dark(#6b7280,#9ca3af)}.qaid-q-hint kbd{display:inline-block;padding:.05rem .35rem;border-radius:.25rem;background:light-dark(#f3f4f6,#374151);border:1px solid light-dark(#e5e7eb,#4b5563);font-family:inherit;font-size:.7em;font-weight:600;color:light-dark(#374151,#e5e7eb)}.qaid-q-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:1.5rem 0}.qaid-q-done-icon{width:48px;height:48px;border-radius:50%;background:color-mix(in srgb,var(--qaid-positive, #10b981) 18%,transparent);color:var(--qaid-positive, #10b981);display:inline-flex;align-items:center;justify-content:center;margin-bottom:.5rem}.qaid-q-done-title{font-size:1.25em;font-weight:700;margin:0}.qaid-q-done-message{color:light-dark(#6b7280,#9ca3af);margin:0}.qaid-q-saving{display:inline-flex;align-items:center;gap:.375rem;font-size:.75em;color:light-dark(#6b7280,#9ca3af);opacity:0;transition:opacity .2s}.qaid-q-saving.qaid-q-visible{opacity:1}.qaid-q-saving-dot{width:6px;height:6px;border-radius:50%;background:var(--qaid-positive, #10b981);animation:qaid-q-pulse 1.2s ease-in-out infinite}@keyframes qaid-q-pulse{0%,to{opacity:.3}50%{opacity:1}}';function A(t,e,i){const[a,n,s]=[t,e,i].map(r=>(r=r/255,r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4)));return .2126*a+.7152*n+.0722*s}function I(t){if(t.startsWith("#")){const i=t.slice(1),a=i.length===3?i.split("").map(s=>s+s).join(""):i,n=parseInt(a,16);return{r:n>>16&255,g:n>>8&255,b:n&255}}const e=t.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);return e?{r:parseInt(e[1]),g:parseInt(e[2]),b:parseInt(e[3])}:null}function k(t){const e=I(t);return e&&A(e.r,e.g,e.b)>.4?"black":"white"}function L(t={}){const{positiveColor:e="#10b981",negativeColor:i="#ef4444",markerColor:a="#6366f1",modalWidth:n=480,backdropOpacity:s=.4,fontFamily:r="system-ui, -apple-system, sans-serif",fontSize:h=16}=t;return{"--qaid-positive":e,"--qaid-positive-text":k(e),"--qaid-negative":i,"--qaid-marker":a,"--qaid-marker-text":k(a),"--qaid-modal-width":`${n}px`,"--qaid-backdrop-opacity":String(s),"--qaid-font-family":r,"--qaid-font-size":`${h}px`}}function z(t,e){for(const[i,a]of Object.entries(e))t.style.setProperty(i,a)}function T(){return v}function V(t){switch(t.question.type){case"text":return D(t.question,t);case"currency":return H(t.question,t);case"range":return Q(t.question,t);case"date":return F(t.question,t);case"multiple-choice":return j(t.question,t)}}function D(t,e){const i=typeof e.initialValue=="string"?e.initialValue:"";let a;if(t.multiline){const n=document.createElement("textarea");n.className="qaid-q-textarea",n.value=i,t.placeholder&&(n.placeholder=t.placeholder),t.maxLength&&(n.maxLength=t.maxLength),a=n}else{const n=document.createElement("input");n.className="qaid-q-input",n.type=t.inputType??"text",n.value=i,t.placeholder&&(n.placeholder=t.placeholder),t.maxLength&&(n.maxLength=t.maxLength),n.setAttribute("autocomplete",P(t.inputType)),a=n}return a.setAttribute("aria-label",t.label),a.addEventListener("input",()=>{e.onChange(a.value)}),a.addEventListener("keydown",(n=>{if(n.key==="Enter"){if(t.multiline){(n.metaKey||n.ctrlKey)&&(n.preventDefault(),e.onSubmit());return}n.isComposing||(n.preventDefault(),e.onSubmit())}})),{element:a,focus:()=>{a.focus();const n=a.value.length;try{a.setSelectionRange(n,n)}catch{}},getValue:()=>a.value,isValid:()=>{if(!t.required)return!0;const n=a.value.trim();return!(n.length===0||t.minLength&&n.length<t.minLength)}}}function P(t){switch(t){case"email":return"email";case"tel":return"tel";case"url":return"url";default:return"off"}}function H(t,e){const i=document.createElement("div");i.className="qaid-q-currency";const a=document.createElement("span");a.className="qaid-q-currency-prefix",a.textContent=O(t.currency??"USD",t.locale),i.appendChild(a);const n=document.createElement("input");return n.className="qaid-q-input",n.type="number",n.inputMode="decimal",n.step="0.01",typeof t.min=="number"&&(n.min=String(t.min)),typeof t.max=="number"&&(n.max=String(t.max)),t.placeholder&&(n.placeholder=t.placeholder),typeof e.initialValue=="number"?n.value=String(e.initialValue):typeof e.initialValue=="string"&&e.initialValue!==""&&(n.value=e.initialValue),n.setAttribute("aria-label",t.label),n.addEventListener("input",()=>{const s=n.value;if(s==="")e.onChange(null);else{const r=Number(s);e.onChange(Number.isNaN(r)?null:r)}}),n.addEventListener("keydown",s=>{s.key==="Enter"&&!s.isComposing&&(s.preventDefault(),e.onSubmit())}),i.appendChild(n),{element:i,focus:()=>n.focus(),getValue:()=>{if(n.value==="")return null;const s=Number(n.value);return Number.isNaN(s)?null:s},isValid:()=>{const s=n.value===""?null:Number(n.value);return!(t.required&&(s===null||Number.isNaN(s))||s!==null&&!Number.isNaN(s)&&(typeof t.min=="number"&&s<t.min||typeof t.max=="number"&&s>t.max))}}}function O(t,e){try{return new Intl.NumberFormat(e,{style:"currency",currency:t,currencyDisplay:"narrowSymbol",maximumFractionDigits:0}).formatToParts(0).find(s=>s.type==="currency")?.value??t}catch{return t}}function Q(t,e){const i=document.createElement("div");i.className="qaid-q-range-wrap";const a=document.createElement("div");a.className="qaid-q-range-value";const n=document.createElement("span");if(a.appendChild(n),t.unit){const o=document.createElement("span");o.className="qaid-q-range-unit",o.textContent=t.unit,a.appendChild(o)}const s=typeof e.initialValue=="number"?e.initialValue:t.defaultValue??t.min,r=document.createElement("input");r.className="qaid-q-range",r.type="range",r.min=String(t.min),r.max=String(t.max),r.step=String(t.step??1),r.value=String(s),r.setAttribute("aria-label",t.label),r.setAttribute("aria-valuemin",String(t.min)),r.setAttribute("aria-valuemax",String(t.max));const h=()=>{n.textContent=r.value,r.setAttribute("aria-valuenow",r.value)};h(),r.addEventListener("input",()=>{h(),e.onChange(Number(r.value))}),r.addEventListener("keydown",o=>{o.key==="Enter"&&(o.preventDefault(),e.onSubmit())});const p=document.createElement("div");p.className="qaid-q-range-bounds";const f=document.createElement("span");f.textContent=`${t.min}${t.unit??""}`;const g=document.createElement("span");return g.textContent=`${t.max}${t.unit??""}`,p.appendChild(f),p.appendChild(g),i.appendChild(a),i.appendChild(r),i.appendChild(p),queueMicrotask(()=>e.onChange(Number(r.value))),{element:i,focus:()=>r.focus(),getValue:()=>Number(r.value),isValid:()=>!0}}function F(t,e){const i=document.createElement("input");return i.className="qaid-q-input",i.type="date",t.min&&(i.min=t.min),t.max&&(i.max=t.max),typeof e.initialValue=="string"&&(i.value=e.initialValue),i.setAttribute("aria-label",t.label),i.addEventListener("input",()=>{e.onChange(i.value||null)}),i.addEventListener("keydown",a=>{a.key==="Enter"&&!a.isComposing&&(a.preventDefault(),e.onSubmit())}),{element:i,focus:()=>i.focus(),getValue:()=>i.value||null,isValid:()=>t.required?i.value!=="":!0}}function j(t,e){const i=document.createElement("div"),a=t.imageAlignment??"horizontal",s=t.options.some(o=>!!o.image)?a==="vertical"?" qaid-q-options--image-vertical":" qaid-q-options--image-horizontal":"";i.className=`qaid-q-options${s}`,i.setAttribute("role",t.multiple?"group":"radiogroup"),i.setAttribute("aria-label",t.label);const r=new Set;if(t.multiple&&Array.isArray(e.initialValue))for(const o of e.initialValue)r.add(o);else!t.multiple&&typeof e.initialValue=="string"&&r.add(e.initialValue);const h=[];t.options.forEach((o,c)=>{const l=document.createElement("button");l.type="button",l.className=`qaid-q-option${t.multiple?" qaid-q-multi":""}`,l.dataset.value=o.value,l.setAttribute("role",t.multiple?"checkbox":"radio"),l.setAttribute("aria-checked",r.has(o.value)?"true":"false"),r.has(o.value)&&l.classList.add("qaid-q-selected");const m=document.createElement("span");m.className="qaid-q-option-marker",m.setAttribute("aria-hidden","true");const q=document.createElement("span");if(q.className="qaid-q-option-body",o.image){const d=document.createElement("img");d.className="qaid-q-option-image",d.src=o.image,d.alt="",d.loading="lazy",d.decoding="async",q.appendChild(d)}const u=document.createElement("span");if(u.className="qaid-q-option-label",u.textContent=o.label,q.appendChild(u),o.description){const d=document.createElement("span");d.className="qaid-q-option-desc",d.textContent=o.description,q.appendChild(d)}if(l.appendChild(m),l.appendChild(q),c<9){const d=document.createElement("span");d.className="qaid-q-option-key",d.textContent=String(c+1),d.setAttribute("aria-hidden","true"),l.appendChild(d)}l.addEventListener("click",()=>f(c)),l.addEventListener("keydown",d=>{if(d.key==="ArrowDown"||d.key==="ArrowRight"){d.preventDefault(),p((c+1)%h.length);return}if(d.key==="ArrowUp"||d.key==="ArrowLeft"){d.preventDefault(),p((c-1+h.length)%h.length);return}!t.multiple&&d.key==="Enter"&&r.size>0&&(d.preventDefault(),e.onSubmit())}),h.push(l),i.appendChild(l)}),i.addEventListener("keydown",o=>{const c=o.key;if(c.length===1&&c>="1"&&c<="9"){const l=parseInt(c,10)-1;l<h.length&&(o.preventDefault(),f(l),p(l))}});function p(o){h[o]?.focus()}function f(o){const c=t.options[o].value;t.multiple?r.has(c)?r.delete(c):r.add(c):(r.clear(),r.add(c)),h.forEach(l=>{const m=l.dataset.value,q=r.has(m);l.classList.toggle("qaid-q-selected",q),l.setAttribute("aria-checked",q?"true":"false")}),e.onChange(g()),!t.multiple&&e.autoAdvance&&setTimeout(()=>e.onAutoAdvance(),180)}function g(){if(t.multiple)return Array.from(r);const o=r.values().next();return o.done?null:o.value}return{element:i,focus:()=>{(h.find(c=>c.classList.contains("qaid-q-selected"))??h[0])?.focus()},getValue:()=>g(),isValid:()=>t.required?r.size>0:!0}}function w(t,e){return t.questions.filter(i=>i.visibleIf?y(i.visibleIf,e):!0)}function y(t,e){if("allOf"in t){for(const n of t.allOf)if(!y(n,e))return!1;return!0}if("anyOf"in t){for(const n of t.anyOf)if(y(n,e))return!0;return!1}const i=e[t.questionId],a=i!=null&&!(typeof i=="string"&&i.trim()==="")&&!(Array.isArray(i)&&i.length===0);return"answered"in t?t.answered?a:!a:a?"equals"in t?x(i,t.equals):"notEquals"in t?!x(i,t.notEquals):"in"in t?t.in.some(n=>x(i,n)):!1:!1}function x(t,e){return Array.isArray(t)?t.some(i=>i===e):t===e}const C="qaid_visitor_id";function R(){try{let t=localStorage.getItem(C);return t||(t=crypto.randomUUID(),localStorage.setItem(C,t)),t}catch{return crypto.randomUUID()}}const U='<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/></svg>',M='<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l4 4L19 7" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>';class S{config;questionnaire=null;inlineQuestionnaire;configUrl;state="LOADING";stepIndex=0;visibleQuestions=[];pendingGoToStep=null;hasRenderedStep=!1;answers={};responseId=null;visitorId;pendingSaveTimer=null;pendingSaveQuestionId=null;pendingSaveValue=null;inflightSaves=0;shadowHost=null;shadowRoot=null;isUserContainer=!1;rootEl=null;cardEl=null;titleEl=null;stepCounterEl=null;progressEl=null;progressFillEl=null;bodyEl=null;footerEl=null;savingEl=null;backdropEl=null;currentInput=null;boundKeyDown;cssVars={};constructor(e){this.config={endpoint:e.endpoint,apiKey:e.apiKey??"",container:e.container??"",zIndex:e.zIndex??50,colors:{positive:e.colors?.positive??"#10b981",negative:e.colors?.negative??"#ef4444",marker:e.colors?.marker??"#6366f1"},modalWidth:e.modalWidth??480,backdropOpacity:e.backdropOpacity??.4,fontFamily:e.fontFamily??"system-ui, -apple-system, sans-serif",fontSize:e.fontSize??16,css:e.css??"",autoAdvance:e.autoAdvance??!1,saveDebounceMs:e.saveDebounceMs??500,autoFocus:e.autoFocus??!0,animate:e.animate??!0,progressPosition:e.progressPosition},this.inlineQuestionnaire=e.questionnaire,this.configUrl=e.configUrl,this.visitorId=R(),this.boundKeyDown=this.handleKeyDown.bind(this),this.init()}async init(){this.cssVars=L({positiveColor:this.config.colors.positive,negativeColor:this.config.colors.negative,markerColor:this.config.colors.marker,modalWidth:this.config.modalWidth,backdropOpacity:this.config.backdropOpacity,fontFamily:this.config.fontFamily,fontSize:this.config.fontSize}),this.mountShell(),this.renderLoading();try{const e=await this.loadQuestionnaire();if(!e||!e.questions||e.questions.length===0)throw new Error("Questionnaire is empty");if(this.questionnaire=e,this.recomputeVisible(),this.pendingGoToStep){const i=this.visibleQuestions.findIndex(a=>a.id===this.pendingGoToStep);i!==-1&&(this.stepIndex=i),this.pendingGoToStep=null}this.createResponse(),this.state="READY",this.renderHeader(),this.renderStep()}catch(e){this.state="ERROR",this.renderError(e)}}async loadQuestionnaire(){if(this.inlineQuestionnaire)return this.inlineQuestionnaire;if(!this.configUrl)throw new Error("No questionnaire or configUrl provided");const e=await fetch(this.configUrl,{headers:{Accept:"application/json"}});if(!e.ok)throw new Error(`Failed to load questionnaire (${e.status})`);return await e.json()}mountShell(){this.shadowHost=document.createElement("div"),this.shadowHost.setAttribute("data-qaid-quests","");const e=this.config.container?document.querySelector(this.config.container):null;e?(this.shadowHost.style.display="block",this.shadowHost.style.height="100%",this.shadowHost.style.minHeight="0",e.appendChild(this.shadowHost),this.isUserContainer=!0):(this.shadowHost.style.position="fixed",this.shadowHost.style.inset="0",this.shadowHost.style.zIndex=String(this.config.zIndex),this.shadowHost.style.pointerEvents="none",document.body.appendChild(this.shadowHost)),this.shadowRoot=this.shadowHost.attachShadow({mode:"open"});const i=document.createElement("style");if(i.textContent=T(),this.shadowRoot.appendChild(i),this.config.css){const a=document.createElement("style");a.textContent=this.config.css,this.shadowRoot.appendChild(a)}if(this.rootEl=document.createElement("div"),this.rootEl.className=["qaid-q-root",this.isUserContainer?"qaid-q-inline":"",this.config.animate?"":"qaid-q-no-motion"].filter(Boolean).join(" "),z(this.rootEl,this.cssVars),this.isUserContainer)this.cardEl=document.createElement("div"),this.cardEl.className="qaid-q-card",this.rootEl.appendChild(this.cardEl);else{this.backdropEl=document.createElement("div"),this.backdropEl.className="qaid-q-backdrop",this.backdropEl.addEventListener("click",()=>this.close()),this.rootEl.appendChild(this.backdropEl);const a=document.createElement("div");a.className="qaid-q-modal",this.cardEl=document.createElement("div"),this.cardEl.className="qaid-q-card",a.appendChild(this.cardEl),this.rootEl.appendChild(a)}this.shadowRoot.appendChild(this.rootEl),!this.isUserContainer&&this.shadowHost&&(this.shadowHost.style.pointerEvents="auto"),document.addEventListener("keydown",this.boundKeyDown)}renderLoading(){if(!this.cardEl)return;this.cardEl.replaceChildren();const e=document.createElement("p");e.className="qaid-q-description",e.textContent="Loading…",this.cardEl.appendChild(e)}renderError(e){if(!this.cardEl)return;this.cardEl.replaceChildren();const i=document.createElement("h3");i.className="qaid-q-title",i.textContent="Couldn't load form";const a=document.createElement("p");a.className="qaid-q-description",a.textContent=e instanceof Error?e.message:String(e),this.cardEl.appendChild(i),this.cardEl.appendChild(a)}effectiveProgressPosition(){return this.config.progressPosition??this.questionnaire?.progressPosition??"top"}renderHeader(){if(!this.cardEl||!this.questionnaire)return;this.cardEl.replaceChildren();const e=!!this.questionnaire.hideProgress||this.questionnaire.questions.length<=1,i=!e&&this.effectiveProgressPosition()==="bottom",a=!!this.questionnaire.hideTitle,n=!!this.questionnaire.title&&!a,s=!!this.questionnaire.description&&!a,r=!this.isUserContainer,h=r||!i&&!e;this.savingEl=document.createElement("div"),this.savingEl.className="qaid-q-saving";const p=document.createElement("span");p.className="qaid-q-saving-dot";const f=document.createElement("span");f.textContent="Saving…",this.savingEl.appendChild(p),this.savingEl.appendChild(f),this.stepCounterEl=document.createElement("div"),this.stepCounterEl.className="qaid-q-step-counter",this.progressEl=document.createElement("div"),this.progressEl.className=i?"qaid-q-progress qaid-q-progress--inline":"qaid-q-progress",this.progressFillEl=document.createElement("div"),this.progressFillEl.className="qaid-q-progress-fill",this.progressEl.appendChild(this.progressFillEl);const g=n||h;if(g){const o=document.createElement("div");o.className="qaid-q-header";const c=document.createElement("div");n&&(this.titleEl=document.createElement("h2"),this.titleEl.className="qaid-q-title",this.titleEl.textContent=this.questionnaire.title,c.appendChild(this.titleEl));const l=document.createElement("div");if(l.style.display="flex",l.style.alignItems="center",l.style.gap="0.5rem",i||(l.appendChild(this.savingEl),e||l.appendChild(this.stepCounterEl)),r){const m=document.createElement("button");m.type="button",m.className="qaid-q-close",m.setAttribute("aria-label","Close form"),m.innerHTML=U,m.addEventListener("click",()=>this.close()),l.appendChild(m)}o.appendChild(c),o.appendChild(l),this.cardEl.appendChild(o)}if(s){const o=document.createElement("p");o.className="qaid-q-description",o.textContent=this.questionnaire.description,o.style.marginTop=g?"-0.5rem":"0",o.style.marginBottom="0.75rem",this.cardEl.appendChild(o)}!i&&!e&&this.cardEl.appendChild(this.progressEl),this.bodyEl=document.createElement("div"),this.bodyEl.className="qaid-q-body",this.cardEl.appendChild(this.bodyEl),this.footerEl=document.createElement("div"),this.footerEl.className="qaid-q-footer",this.cardEl.appendChild(this.footerEl)}renderStep(){if(!this.questionnaire||!this.bodyEl||!this.footerEl)return;const e=this.visibleQuestions.length;if(e===0){this.submit();return}this.stepIndex>=e&&(this.stepIndex=e-1);const i=this.stepIndex,a=this.visibleQuestions[i];if(this.stepCounterEl&&(this.stepCounterEl.textContent=`${i+1} / ${e}`),this.progressFillEl){const u=(i+1)/e*100;this.progressFillEl.style.width=`${u}%`}const n=document.createElement("div");n.className="qaid-q-step",n.setAttribute("role","group"),n.setAttribute("aria-labelledby",`qaid-q-label-${i}`);const s=document.createElement("label");if(s.id=`qaid-q-label-${i}`,s.className="qaid-q-label",s.textContent=a.label,a.required){const u=document.createElement("span");u.className="qaid-q-required",u.textContent="*",u.setAttribute("aria-label","required"),s.appendChild(u)}if(n.appendChild(s),a.description){const u=document.createElement("p");u.className="qaid-q-description",u.textContent=a.description,n.appendChild(u)}const r=document.createElement("p");r.className="qaid-q-error",r.setAttribute("aria-live","polite");const h=this.answers[a.id]??null,p=i===e-1,f=V({question:a,initialValue:h,onChange:u=>{this.handleAnswerChange(a,u),r.textContent&&(r.textContent="")},onSubmit:()=>this.advance(a,r),onAutoAdvance:()=>this.advance(a,r),autoAdvance:this.config.autoAdvance});this.currentInput=f,n.appendChild(f.element),n.appendChild(r),this.bodyEl.replaceChildren(n),this.footerEl.replaceChildren();const o=!(!!this.questionnaire.hideProgress||this.questionnaire.questions.length<=1)&&this.effectiveProgressPosition()==="bottom",c=i>0?(()=>{const u=document.createElement("button");return u.type="button",u.className="qaid-q-btn qaid-q-btn-secondary",u.textContent=this.questionnaire.backLabel??"Back",u.addEventListener("click",()=>this.back()),u})():null,l=document.createElement("button");if(l.type="button",l.className="qaid-q-btn qaid-q-btn-primary",l.textContent=p?this.questionnaire.submitLabel??"Submit":this.questionnaire.nextLabel??"Next",l.addEventListener("click",()=>this.advance(a,r)),o)this.footerEl.classList.add("qaid-q-footer--inline-progress"),c&&this.footerEl.appendChild(c),this.progressEl&&this.footerEl.appendChild(this.progressEl),this.savingEl&&this.footerEl.appendChild(this.savingEl),this.stepCounterEl&&this.footerEl.appendChild(this.stepCounterEl),this.footerEl.appendChild(l);else{this.footerEl.classList.remove("qaid-q-footer--inline-progress");const u=document.createElement("div");u.className="qaid-q-footer-left";const d=document.createElement("div");d.className="qaid-q-footer-right",c&&u.appendChild(c);const E=document.createElement("span");E.className="qaid-q-hint",E.innerHTML=p?"<kbd>Enter</kbd> to submit":"<kbd>Enter</kbd> to continue",d.appendChild(E),d.appendChild(l),this.footerEl.appendChild(u),this.footerEl.appendChild(d)}const m=!this.hasRenderedStep;this.hasRenderedStep=!0,(!m||this.config.autoFocus)&&requestAnimationFrame(()=>f.focus())}renderDone(){if(!this.cardEl||!this.questionnaire)return;this.cardEl.replaceChildren();const e=document.createElement("div");e.className="qaid-q-done";const i=document.createElement("div");i.className="qaid-q-done-icon",i.innerHTML=M,e.appendChild(i);const a=document.createElement("h3");if(a.className="qaid-q-done-title",a.textContent=this.questionnaire.thankYouTitle??"Thank you!",e.appendChild(a),this.questionnaire.thankYouMessage){const n=document.createElement("p");n.className="qaid-q-done-message",n.textContent=this.questionnaire.thankYouMessage,e.appendChild(n)}if(!this.isUserContainer){const n=document.createElement("button");n.type="button",n.className="qaid-q-btn qaid-q-btn-primary",n.textContent="Close",n.style.marginTop="1rem",n.addEventListener("click",()=>this.close()),e.appendChild(n)}this.cardEl.appendChild(e)}advance(e,i){if(!this.currentInput||!this.questionnaire)return;if(!this.currentInput.isValid()){i.textContent=K(e),this.currentInput.focus();return}if(this.handleAnswerChange(e,this.currentInput.getValue(),{immediate:!0}),this.stepIndex===this.visibleQuestions.length-1){this.submit();return}this.stepIndex++,this.renderStep()}back(){this.flushPendingSave(),this.stepIndex>0&&(this.stepIndex--,this.recomputeVisible(),this.stepIndex>=this.visibleQuestions.length&&(this.stepIndex=Math.max(0,this.visibleQuestions.length-1)),this.renderStep())}recomputeVisible(){this.questionnaire&&(this.visibleQuestions=w(this.questionnaire,this.answers))}handleAnswerChange(e,i,a={}){this.answers[e.id]=i,this.recomputeVisible();const n=e.type==="text"||e.type==="currency"||e.type==="range";if(a.immediate||!n){this.flushPendingSave(),this.saveAnswer(e.id,i);return}this.pendingSaveQuestionId=e.id,this.pendingSaveValue=i,this.pendingSaveTimer&&clearTimeout(this.pendingSaveTimer),this.pendingSaveTimer=setTimeout(()=>{this.flushPendingSave()},this.config.saveDebounceMs)}flushPendingSave(){if(this.pendingSaveTimer&&(clearTimeout(this.pendingSaveTimer),this.pendingSaveTimer=null),this.pendingSaveQuestionId!==null){const e=this.pendingSaveQuestionId,i=this.pendingSaveValue;this.pendingSaveQuestionId=null,this.pendingSaveValue=null,this.saveAnswer(e,i)}}saveAnswer(e,i){this.showSaving(!0),this.inflightSaves++,this.doSave(e,i).finally(()=>{this.inflightSaves--,this.inflightSaves===0&&this.showSaving(!1)})}async doSave(e,i){let a=0;for(;this.responseId===null&&a<5e3;)await new Promise(n=>setTimeout(n,50)),a+=50;if(this.responseId!==null)try{await fetch(`${this.config.endpoint}/${this.responseId}`,{method:"PATCH",headers:this.jsonHeaders(),body:JSON.stringify({questionId:e,value:i})})}catch(n){console.error("[quests-embed] failed to save answer:",n)}}async createResponse(){try{const e=await fetch(this.config.endpoint,{method:"POST",headers:this.jsonHeaders(),body:JSON.stringify({apiKey:this.config.apiKey||void 0,questId:this.questionnaire?.id,pageUrl:window.location.href,visitorId:this.visitorId,userAgent:navigator.userAgent})});if(e.ok){const i=await e.json();this.responseId=i.id}}catch(e){console.error("[quests-embed] failed to create response:",e)}}async submit(){for(this.flushPendingSave();this.inflightSaves>0;)await new Promise(e=>setTimeout(e,50));if(this.responseId!==null)try{await fetch(`${this.config.endpoint}/${this.responseId}/submit`,{method:"POST",headers:this.jsonHeaders(),body:JSON.stringify({answers:this.answers})})}catch(e){console.error("[quests-embed] failed to submit:",e)}this.state="DONE",this.renderDone()}jsonHeaders(){const e={"Content-Type":"application/json",Accept:"application/json"};return this.config.apiKey&&(e["X-API-Key"]=this.config.apiKey),e}showSaving(e){this.savingEl&&this.savingEl.classList.toggle("qaid-q-visible",e)}handleKeyDown(e){e.key==="Escape"&&!this.isUserContainer&&this.state!=="DONE"&&this.close()}close(){this.flushPendingSave(),this.destroy()}destroy(){document.removeEventListener("keydown",this.boundKeyDown),this.pendingSaveTimer&&(clearTimeout(this.pendingSaveTimer),this.pendingSaveTimer=null),this.shadowHost&&(this.shadowHost.remove(),this.shadowHost=null,this.shadowRoot=null),this.rootEl=null,this.cardEl=null,this.bodyEl=null,this.footerEl=null,this.titleEl=null,this.stepCounterEl=null,this.progressFillEl=null,this.savingEl=null,this.backdropEl=null,this.currentInput=null}getAnswers(){return{...this.answers}}goToStep(e){if(this.state!=="READY"||!this.questionnaire)return this.pendingGoToStep=e,!1;const i=this.visibleQuestions.findIndex(a=>a.id===e);return i===-1?!1:(i===this.stepIndex||(this.flushPendingSave(),this.stepIndex=i,this.renderStep()),!0)}}function K(t){switch(t.type){case"text":return t.minLength?`Please enter at least ${t.minLength} characters.`:"This field is required.";case"currency":return"Please enter a valid amount.";case"date":return"Please pick a date.";case"multiple-choice":return t.multiple?"Please select at least one option.":"Please select an option.";case"range":return"Please choose a value."}}function N(t){return document.querySelector(t)?.textContent?.trim()??""}function $(){const t=document.querySelector('script[type="application/json"][data-quests-config]');if(!t)return null;const e=t.textContent?.trim();if(!e)return null;try{const i=JSON.parse(e);return i.cssSelector&&!i.css&&(i.css=N(i.cssSelector),delete i.cssSelector),i}catch{return null}}function B(t){const e=t.getAttribute("data-endpoint");if(!e)return null;const i=t.getAttribute("data-config-url"),a=t.getAttribute("data-api-key"),n=t.getAttribute("data-container"),s=t.getAttribute("data-zindex"),r=t.getAttribute("data-positive-color"),h=t.getAttribute("data-negative-color"),p=t.getAttribute("data-marker-color"),f=t.getAttribute("data-modal-width"),g=t.getAttribute("data-backdrop-opacity"),o=t.getAttribute("data-font-family"),c=t.getAttribute("data-font-size"),l=t.getAttribute("data-css-selector"),m=t.getAttribute("data-auto-advance"),q=t.getAttribute("data-save-debounce-ms");return{endpoint:e,configUrl:i??void 0,apiKey:a??void 0,container:n??void 0,zIndex:s?parseInt(s,10):void 0,colors:{positive:r??void 0,negative:h??void 0,marker:p??void 0},modalWidth:f?parseInt(f,10):void 0,backdropOpacity:g?parseFloat(g):void 0,fontFamily:o??void 0,fontSize:c?parseInt(c,10):void 0,css:l?N(l):void 0,autoAdvance:m==="true"?!0:void 0,saveDebounceMs:q?parseInt(q,10):void 0}}if(typeof document<"u"){const t=()=>{const e=document.currentScript,i=$(),a=e?B(e):null,n=i??a;n?.endpoint&&(n.configUrl||n.questionnaire)&&new S(n)};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",t):t()}b.QaidQuests=S,b.evaluateRule=y,b.getVisibleQuestions=w,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(b,v){typeof exports=="object"&&typeof module<"u"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(b=typeof globalThis<"u"?globalThis:b||self,v(b.QaidQuests={}))})(this,(function(b){"use strict";const v=`*{box-sizing:border-box}button{cursor:pointer;font-family:inherit}:where(.qaid-q-root){--qaid-q-card-bg: light-dark(#ffffff, #1f2937);--qaid-q-card-fg: light-dark(#1f2937, #f9fafb);--qaid-q-card-border: light-dark(#e5e7eb, #374151);--qaid-q-card-radius: 1rem;--qaid-q-card-padding: 1.5rem;--qaid-q-card-shadow: 0 25px 50px -12px light-dark(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6));--qaid-q-muted-fg: light-dark(#6b7280, #9ca3af);--qaid-q-progress-track: light-dark(#e5e7eb, #374151);--qaid-q-btn-radius: .5rem;--qaid-q-btn-padding-y: .625rem;--qaid-q-btn-padding-x: 1.125rem;--qaid-q-btn-font-weight: 500;--qaid-q-btn-primary-bg: var(--qaid-q-accent, #10b981);--qaid-q-btn-primary-fg: var(--qaid-q-accent-text, #ffffff);--qaid-q-btn-primary-border: transparent;--qaid-q-btn-secondary-bg: transparent;--qaid-q-btn-secondary-fg: light-dark(#374151, #d1d5db);--qaid-q-btn-secondary-border: light-dark(#d1d5db, #4b5563);--qaid-q-btn-secondary-hover-bg: light-dark(#f3f4f6, #374151);--qaid-q-option-bg: light-dark(#ffffff, #111827);--qaid-q-option-bg-selected: color-mix(in srgb, var(--qaid-q-accent, #10b981) 10%, transparent);--qaid-q-option-bg-hover: light-dark(#f9fafb, #1f2937);--qaid-q-option-fg: light-dark(#1f2937, #f9fafb);--qaid-q-option-border: light-dark(#e5e7eb, #374151);--qaid-q-option-border-selected: var(--qaid-q-accent, #10b981);--qaid-q-option-border-hover: light-dark(#9ca3af, #4b5563);--qaid-q-option-radius: .625rem;--qaid-q-option-padding: .75rem .875rem;--qaid-q-marker-bg: light-dark(#ffffff, #111827);--qaid-q-marker-bg-selected: var(--qaid-q-accent, #10b981);--qaid-q-marker-border: light-dark(#d1d5db, #4b5563);--qaid-q-marker-icon: light-dark(#ffffff, #1f2937);--qaid-q-marker-radius: 50%;--qaid-q-input-bg: light-dark(#ffffff, #111827);--qaid-q-input-fg: light-dark(#1f2937, #f9fafb);--qaid-q-input-border: light-dark(#d1d5db, #374151);--qaid-q-input-radius: .625rem;--qaid-q-input-padding: .75rem .875rem;--qaid-q-input-placeholder: light-dark(#9ca3af, #6b7280);--qaid-q-gap: .75rem;--qaid-q-section-gap: 1.25rem}:where(.qaid-q-root.qaid-q-theme-light){--qaid-q-card-bg: #ffffff;--qaid-q-card-fg: #1f2937;--qaid-q-card-border: #e5e7eb;--qaid-q-card-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);--qaid-q-muted-fg: #6b7280;--qaid-q-progress-track: #e5e7eb;--qaid-q-btn-secondary-fg: #374151;--qaid-q-btn-secondary-border: #d1d5db;--qaid-q-btn-secondary-hover-bg: #f3f4f6;--qaid-q-option-bg: #ffffff;--qaid-q-option-bg-hover: #f9fafb;--qaid-q-option-fg: #1f2937;--qaid-q-option-border: #e5e7eb;--qaid-q-option-border-hover: #9ca3af;--qaid-q-marker-bg: #ffffff;--qaid-q-marker-border: #d1d5db;--qaid-q-marker-icon: #ffffff;--qaid-q-input-bg: #ffffff;--qaid-q-input-fg: #1f2937;--qaid-q-input-border: #d1d5db;--qaid-q-input-placeholder: #9ca3af}:where(.qaid-q-root.qaid-q-theme-dark){--qaid-q-card-bg: #1f2937;--qaid-q-card-fg: #f9fafb;--qaid-q-card-border: #374151;--qaid-q-card-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6);--qaid-q-muted-fg: #9ca3af;--qaid-q-progress-track: #374151;--qaid-q-btn-secondary-fg: #d1d5db;--qaid-q-btn-secondary-border: #4b5563;--qaid-q-btn-secondary-hover-bg: #374151;--qaid-q-option-bg: #111827;--qaid-q-option-bg-hover: #1f2937;--qaid-q-option-fg: #f9fafb;--qaid-q-option-border: #374151;--qaid-q-option-border-hover: #4b5563;--qaid-q-marker-bg: #111827;--qaid-q-marker-border: #4b5563;--qaid-q-marker-icon: #1f2937;--qaid-q-input-bg: #111827;--qaid-q-input-fg: #f9fafb;--qaid-q-input-border: #374151;--qaid-q-input-placeholder: #6b7280}.qaid-q-root{color-scheme:light dark;font-family:var(--qaid-font-family, system-ui, -apple-system, sans-serif);font-size:var(--qaid-font-size, 16px);color:var(--qaid-q-card-fg)}.qaid-q-root.qaid-q-theme-light{color-scheme:light}.qaid-q-root.qaid-q-theme-dark{color-scheme:dark}.qaid-q-backdrop{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,var(--qaid-backdrop-opacity, .4));animation:qaid-q-fade .18s ease-out}@keyframes qaid-q-fade{0%{opacity:0}to{opacity:1}}.qaid-q-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;width:var(--qaid-modal-width, 480px);max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);pointer-events:auto;display:flex;flex-direction:column}.qaid-q-card{background:var(--qaid-q-card-bg);color:var(--qaid-q-card-fg);border-radius:var(--qaid-q-card-radius);box-shadow:var(--qaid-q-card-shadow);padding:var(--qaid-q-card-padding);overflow:hidden;display:flex;flex-direction:column;min-height:0}:where(.qaid-q-root.qaid-q-inline) .qaid-q-card{box-shadow:none;border:1px solid var(--qaid-q-card-border);flex:1;min-height:0}:where(.qaid-q-root.qaid-q-inline){height:100%;display:flex;flex-direction:column;min-height:0}.qaid-q-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}.qaid-q-title{font-size:1.125em;font-weight:700;margin:0;color:var(--qaid-q-card-fg)}.qaid-q-step-counter{font-size:.875em;color:var(--qaid-q-muted-fg);font-variant-numeric:tabular-nums;white-space:nowrap}.qaid-q-close{width:28px;height:28px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--qaid-q-muted-fg);display:inline-flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none}.qaid-q-close:hover{background:var(--qaid-q-btn-secondary-hover-bg);color:var(--qaid-q-card-fg)}.qaid-q-close:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-q-focus, #6366f1) 30%,transparent)}.qaid-q-progress{position:relative;height:4px;background:var(--qaid-q-progress-track);border-radius:9999px;overflow:hidden;margin-bottom:var(--qaid-q-section-gap)}.qaid-q-progress--inline{flex:1;min-width:60px;margin-bottom:0}.qaid-q-progress-fill{position:absolute;inset:0 auto 0 0;background:var(--qaid-q-accent, #10b981);border-radius:9999px;transition:width .3s ease;width:0%}.qaid-q-body{flex:1;min-height:0;overflow-y:auto}.qaid-q-step{display:flex;flex-direction:column;gap:var(--qaid-q-gap);animation:qaid-q-slide .22s ease-out}@keyframes qaid-q-slide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.qaid-q-no-motion .qaid-q-step,.qaid-q-no-motion.qaid-q-root{animation:none!important}.qaid-q-label{font-size:1.125em;font-weight:600;margin:0;color:var(--qaid-q-card-fg);line-height:1.35}.qaid-q-label .qaid-q-required{color:var(--qaid-q-error, #ef4444);margin-left:.25rem}.qaid-q-description{font-size:.875em;color:var(--qaid-q-muted-fg);margin:0;line-height:1.4}.qaid-q-error{font-size:.8125em;color:var(--qaid-q-error, #ef4444);margin:0}.qaid-q-error:empty{display:none}.qaid-q-input,.qaid-q-textarea{width:100%;padding:var(--qaid-q-input-padding);border:1px solid var(--qaid-q-input-border);border-radius:var(--qaid-q-input-radius);font-family:inherit;font-size:1em;background:var(--qaid-q-input-bg);color:var(--qaid-q-input-fg);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}.qaid-q-textarea{min-height:7rem;resize:vertical;font-family:inherit}.qaid-q-input:focus,.qaid-q-textarea:focus{outline:none;border-color:var(--qaid-q-focus, #6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-q-focus, #6366f1) 20%,transparent)}.qaid-q-input::placeholder,.qaid-q-textarea::placeholder{color:var(--qaid-q-input-placeholder)}.qaid-q-currency{position:relative}.qaid-q-currency-prefix{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--qaid-q-muted-fg);font-size:1em;font-weight:500;pointer-events:none}.qaid-q-currency .qaid-q-input{padding-left:2.25rem}.qaid-q-range-wrap{display:flex;flex-direction:column;gap:.5rem;padding:.5rem 0}.qaid-q-range-value{font-size:2em;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;color:var(--qaid-q-accent, #10b981)}.qaid-q-range-value .qaid-q-range-unit{font-size:.5em;font-weight:500;color:var(--qaid-q-muted-fg);margin-left:.25rem}.qaid-q-range{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:9999px;background:var(--qaid-q-progress-track);outline:none}.qaid-q-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--qaid-q-accent, #10b981);border:3px solid var(--qaid-q-card-bg);box-shadow:0 2px 6px #0003;cursor:pointer;transition:transform .1s}.qaid-q-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--qaid-q-accent, #10b981);border:3px solid var(--qaid-q-card-bg);box-shadow:0 2px 6px #0003;cursor:pointer}.qaid-q-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px color-mix(in srgb,var(--qaid-q-focus, #6366f1) 30%,transparent)}.qaid-q-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 6px color-mix(in srgb,var(--qaid-q-focus, #6366f1) 30%,transparent)}.qaid-q-range-bounds{display:flex;justify-content:space-between;font-size:.8125em;color:var(--qaid-q-muted-fg);font-variant-numeric:tabular-nums}.qaid-q-options{display:flex;flex-direction:column;gap:.5rem}.qaid-q-option{display:flex;align-items:flex-start;gap:.625rem;padding:var(--qaid-q-option-padding);border:1px solid var(--qaid-q-option-border);border-radius:var(--qaid-q-option-radius);background:var(--qaid-q-option-bg);text-align:left;font-size:1em;color:var(--qaid-q-option-fg);cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s;-webkit-appearance:none;appearance:none;width:100%}.qaid-q-option:hover{border-color:var(--qaid-q-option-border-hover);background:var(--qaid-q-option-bg-hover)}.qaid-q-option:focus-visible{outline:none;border-color:var(--qaid-q-focus, #6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-q-focus, #6366f1) 25%,transparent)}.qaid-q-option.qaid-q-selected{border-color:var(--qaid-q-option-border-selected);background:var(--qaid-q-option-bg-selected)}.qaid-q-option-marker{flex-shrink:0;width:1.25rem;height:1.25rem;border:2px solid var(--qaid-q-marker-border);border-radius:var(--qaid-q-marker-radius);display:inline-flex;align-items:center;justify-content:center;margin-top:.125rem;background:var(--qaid-q-marker-bg);transition:border-color .12s,background .12s}.qaid-q-option.qaid-q-multi .qaid-q-option-marker{border-radius:.25rem}.qaid-q-option.qaid-q-selected .qaid-q-option-marker{border-color:var(--qaid-q-marker-bg-selected);background:var(--qaid-q-marker-bg-selected)}.qaid-q-option.qaid-q-selected .qaid-q-option-marker:after{content:"";display:block;width:.5rem;height:.5rem;border-radius:50%;background:var(--qaid-q-marker-icon)}.qaid-q-option.qaid-q-multi.qaid-q-selected .qaid-q-option-marker:after{content:"";display:block;width:70%;height:70%;border-radius:0;background:var(--qaid-q-marker-icon);-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4L19 7'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4L19 7'/></svg>");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transform:none}.qaid-q-option-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.qaid-q-option-image{display:block;width:48px;height:48px;aspect-ratio:1 / 1;object-fit:cover;border-radius:.375rem;background:var(--qaid-q-progress-track);flex-shrink:0}.qaid-q-options--image-horizontal .qaid-q-option-body{flex-direction:row;align-items:center;gap:.75rem}.qaid-q-options--image-horizontal .qaid-q-option-body>:not(.qaid-q-option-image){flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.qaid-q-options--image-vertical{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem}.qaid-q-options--image-vertical .qaid-q-option{flex-direction:column;align-items:stretch;text-align:center;padding:.75rem;gap:.5rem}.qaid-q-options--image-vertical .qaid-q-option-body{align-items:center;text-align:center}.qaid-q-options--image-vertical .qaid-q-option-image{width:100%;height:auto;max-width:100%}.qaid-q-options--image-vertical .qaid-q-option-marker{position:absolute;top:.5rem;right:.5rem;margin-top:0}.qaid-q-options--image-vertical .qaid-q-option{position:relative}.qaid-q-options--image-vertical .qaid-q-option-key{position:absolute;top:.5rem;left:.5rem;align-self:auto}.qaid-q-option-label{font-weight:500;line-height:1.3}.qaid-q-option-desc{font-size:.8125em;color:var(--qaid-q-muted-fg);line-height:1.4}.qaid-q-option-key{flex-shrink:0;align-self:center;font-size:.7em;font-weight:600;padding:.125rem .375rem;border-radius:.25rem;background:var(--qaid-q-progress-track);color:var(--qaid-q-muted-fg);font-variant-numeric:tabular-nums}.qaid-q-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:var(--qaid-q-section-gap)}.qaid-q-footer--inline-progress{justify-content:flex-start;gap:.75rem}.qaid-q-footer-left,.qaid-q-footer-right{display:flex;gap:.5rem}.qaid-q-btn{padding:var(--qaid-q-btn-padding-y) var(--qaid-q-btn-padding-x);border-radius:var(--qaid-q-btn-radius);font-size:var(--qaid-q-btn-font-size, .9375em);font-weight:var(--qaid-q-btn-font-weight);border:1px solid transparent;cursor:pointer;transition:filter .15s,background .15s,color .15s;-webkit-appearance:none;appearance:none}.qaid-q-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-q-focus, #6366f1) 30%,transparent)}.qaid-q-btn-secondary{background:var(--qaid-q-btn-secondary-bg);border-color:var(--qaid-q-btn-secondary-border);color:var(--qaid-q-btn-secondary-fg)}.qaid-q-btn-secondary:hover{background:var(--qaid-q-btn-secondary-hover-bg)}.qaid-q-btn-primary{background:var(--qaid-q-btn-primary-bg);color:var(--qaid-q-btn-primary-fg);border-color:var(--qaid-q-btn-primary-border)}.qaid-q-btn-primary:hover{filter:brightness(.9)}.qaid-q-btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:none}.qaid-q-done{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;padding:1.5rem 0;flex:1;min-height:0}.qaid-q-done-icon{width:48px;height:48px;border-radius:50%;background:color-mix(in srgb,var(--qaid-q-accent, #10b981) 18%,transparent);color:var(--qaid-q-accent, #10b981);display:inline-flex;align-items:center;justify-content:center;margin-bottom:.5rem}.qaid-q-done-title{font-size:1.25em;font-weight:700;margin:0}.qaid-q-done-message{color:var(--qaid-q-muted-fg);margin:0}.qaid-q-saving{display:inline-flex;align-items:center;gap:.375rem;font-size:.75em;color:var(--qaid-q-muted-fg);opacity:0;transition:opacity .2s}.qaid-q-saving.qaid-q-visible{opacity:1}.qaid-q-saving-dot{width:6px;height:6px;border-radius:50%;background:var(--qaid-q-accent, #10b981);animation:qaid-q-pulse 1.2s ease-in-out infinite}@keyframes qaid-q-pulse{0%,to{opacity:.3}50%{opacity:1}}:where(.qaid-q-root.qaid-q-unstyled) :where(.qaid-q-card,.qaid-q-header,.qaid-q-title,.qaid-q-description,.qaid-q-step,.qaid-q-label,.qaid-q-options,.qaid-q-option,.qaid-q-option-marker,.qaid-q-option-body,.qaid-q-option-label,.qaid-q-option-desc,.qaid-q-input,.qaid-q-textarea,.qaid-q-currency,.qaid-q-currency-prefix,.qaid-q-range,.qaid-q-range-wrap,.qaid-q-range-value,.qaid-q-btn,.qaid-q-footer,.qaid-q-progress,.qaid-q-progress-fill,.qaid-q-step-counter,.qaid-q-error,.qaid-q-saving,.qaid-q-done,.qaid-q-done-icon,.qaid-q-done-title,.qaid-q-done-message){all:unset;display:revert;box-sizing:border-box}`,I={default:"",minimal:":where(.qaid-q-root){--qaid-q-card-radius: 0;--qaid-q-card-shadow: none;--qaid-q-btn-radius: 0;--qaid-q-option-radius: 0;--qaid-q-option-bg-selected: transparent;--qaid-q-input-radius: 0}",pill:":where(.qaid-q-root){--qaid-q-card-radius: 1.5rem;--qaid-q-btn-radius: 9999px;--qaid-q-btn-padding-x: 1.5rem;--qaid-q-option-radius: 9999px;--qaid-q-option-padding: .75rem 1.125rem;--qaid-q-input-radius: 9999px;--qaid-q-input-padding: .75rem 1.125rem}",dense:":where(.qaid-q-root){--qaid-q-card-padding: 1rem;--qaid-q-btn-padding-y: .5rem;--qaid-q-btn-padding-x: .875rem;--qaid-q-option-padding: .5rem .625rem;--qaid-q-input-padding: .5rem .625rem;--qaid-q-gap: .5rem;--qaid-q-section-gap: .875rem}"};function N(t){return I[t]??""}function T(t,e,i){const[n,a,o]=[t,e,i].map(r=>(r=r/255,r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4)));return .2126*n+.7152*a+.0722*o}function L(t){if(t.startsWith("#")){const i=t.slice(1),n=i.length===3?i.split("").map(o=>o+o).join(""):i,a=parseInt(n,16);return{r:a>>16&255,g:a>>8&255,b:a&255}}const e=t.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);return e?{r:parseInt(e[1]),g:parseInt(e[2]),b:parseInt(e[3])}:null}function E(t){const e=L(t);return e&&T(e.r,e.g,e.b)>.4?"black":"white"}function z(t={}){const e={};return t.accentColor!==void 0&&(e["--qaid-q-accent"]=t.accentColor,e["--qaid-q-accent-text"]=E(t.accentColor)),t.errorColor!==void 0&&(e["--qaid-q-error"]=t.errorColor),t.focusColor!==void 0&&(e["--qaid-q-focus"]=t.focusColor,e["--qaid-q-focus-text"]=E(t.focusColor)),t.modalWidth!==void 0&&(e["--qaid-modal-width"]=`${t.modalWidth}px`),t.backdropOpacity!==void 0&&(e["--qaid-backdrop-opacity"]=String(t.backdropOpacity)),t.fontFamily!==void 0&&(e["--qaid-font-family"]=t.fontFamily),t.fontSize!==void 0&&(e["--qaid-font-size"]=`${t.fontSize}px`),e}function V(t,e){for(const[i,n]of Object.entries(e))t.style.setProperty(i,n)}function P(){return v}function D(t){return N(t)}function O(t){switch(t.question.type){case"text":return j(t.question,t);case"currency":return U(t.question,t);case"range":return R(t.question,t);case"date":return F(t.question,t);case"multiple-choice":return M(t.question,t)}}function j(t,e){const i=typeof e.initialValue=="string"?e.initialValue:"";let n;if(t.multiline){const a=document.createElement("textarea");a.className="qaid-q-textarea",a.value=i,t.placeholder&&(a.placeholder=t.placeholder),t.maxLength&&(a.maxLength=t.maxLength),n=a}else{const a=document.createElement("input");a.className="qaid-q-input",a.type=t.inputType??"text",a.value=i,t.placeholder&&(a.placeholder=t.placeholder),t.maxLength&&(a.maxLength=t.maxLength),a.setAttribute("autocomplete",H(t.inputType)),n=a}return n.setAttribute("aria-label",t.label),n.addEventListener("input",()=>{e.onChange(n.value)}),n.addEventListener("keydown",(a=>{if(a.key==="Enter"){if(t.multiline){(a.metaKey||a.ctrlKey)&&(a.preventDefault(),e.onSubmit());return}a.isComposing||(a.preventDefault(),e.onSubmit())}})),{element:n,focus:()=>{n.focus();const a=n.value.length;try{n.setSelectionRange(a,a)}catch{}},getValue:()=>n.value,isValid:()=>{if(!t.required)return!0;const a=n.value.trim();return!(a.length===0||t.minLength&&a.length<t.minLength)}}}function H(t){switch(t){case"email":return"email";case"tel":return"tel";case"url":return"url";default:return"off"}}function U(t,e){const i=document.createElement("div");i.className="qaid-q-currency";const n=document.createElement("span");n.className="qaid-q-currency-prefix",n.textContent=Q(t.currency??"USD",t.locale),i.appendChild(n);const a=document.createElement("input");return a.className="qaid-q-input",a.type="number",a.inputMode="decimal",a.step="0.01",typeof t.min=="number"&&(a.min=String(t.min)),typeof t.max=="number"&&(a.max=String(t.max)),t.placeholder&&(a.placeholder=t.placeholder),typeof e.initialValue=="number"?a.value=String(e.initialValue):typeof e.initialValue=="string"&&e.initialValue!==""&&(a.value=e.initialValue),a.setAttribute("aria-label",t.label),a.addEventListener("input",()=>{const o=a.value;if(o==="")e.onChange(null);else{const r=Number(o);e.onChange(Number.isNaN(r)?null:r)}}),a.addEventListener("keydown",o=>{o.key==="Enter"&&!o.isComposing&&(o.preventDefault(),e.onSubmit())}),i.appendChild(a),{element:i,focus:()=>a.focus(),getValue:()=>{if(a.value==="")return null;const o=Number(a.value);return Number.isNaN(o)?null:o},isValid:()=>{const o=a.value===""?null:Number(a.value);return!(t.required&&(o===null||Number.isNaN(o))||o!==null&&!Number.isNaN(o)&&(typeof t.min=="number"&&o<t.min||typeof t.max=="number"&&o>t.max))}}}function Q(t,e){try{return new Intl.NumberFormat(e,{style:"currency",currency:t,currencyDisplay:"narrowSymbol",maximumFractionDigits:0}).formatToParts(0).find(o=>o.type==="currency")?.value??t}catch{return t}}function R(t,e){const i=document.createElement("div");i.className="qaid-q-range-wrap";const n=document.createElement("div");n.className="qaid-q-range-value";const a=document.createElement("span");if(n.appendChild(a),t.unit){const s=document.createElement("span");s.className="qaid-q-range-unit",s.textContent=t.unit,n.appendChild(s)}const o=typeof e.initialValue=="number"?e.initialValue:t.defaultValue??t.min,r=document.createElement("input");r.className="qaid-q-range",r.type="range",r.min=String(t.min),r.max=String(t.max),r.step=String(t.step??1),r.value=String(o),r.setAttribute("aria-label",t.label),r.setAttribute("aria-valuemin",String(t.min)),r.setAttribute("aria-valuemax",String(t.max));const q=()=>{a.textContent=r.value,r.setAttribute("aria-valuenow",r.value)};q(),r.addEventListener("input",()=>{q(),e.onChange(Number(r.value))}),r.addEventListener("keydown",s=>{s.key==="Enter"&&(s.preventDefault(),e.onSubmit())});const h=document.createElement("div");h.className="qaid-q-range-bounds";const m=document.createElement("span");m.textContent=`${t.min}${t.unit??""}`;const f=document.createElement("span");return f.textContent=`${t.max}${t.unit??""}`,h.appendChild(m),h.appendChild(f),i.appendChild(n),i.appendChild(r),i.appendChild(h),queueMicrotask(()=>e.onChange(Number(r.value))),{element:i,focus:()=>r.focus(),getValue:()=>Number(r.value),isValid:()=>!0}}function F(t,e){const i=document.createElement("input");return i.className="qaid-q-input",i.type="date",t.min&&(i.min=t.min),t.max&&(i.max=t.max),typeof e.initialValue=="string"&&(i.value=e.initialValue),i.setAttribute("aria-label",t.label),i.addEventListener("input",()=>{e.onChange(i.value||null)}),i.addEventListener("keydown",n=>{n.key==="Enter"&&!n.isComposing&&(n.preventDefault(),e.onSubmit())}),{element:i,focus:()=>i.focus(),getValue:()=>i.value||null,isValid:()=>t.required?i.value!=="":!0}}function M(t,e){const i=document.createElement("div"),n=t.imageAlignment??"horizontal",o=t.options.some(s=>!!s.image)?n==="vertical"?" qaid-q-options--image-vertical":" qaid-q-options--image-horizontal":"";i.className=`qaid-q-options${o}`,i.setAttribute("role",t.multiple?"group":"radiogroup"),i.setAttribute("aria-label",t.label);const r=new Set;if(t.multiple&&Array.isArray(e.initialValue))for(const s of e.initialValue)r.add(s);else!t.multiple&&typeof e.initialValue=="string"&&r.add(e.initialValue);const q=[];t.options.forEach((s,c)=>{const d=document.createElement("button");d.type="button",d.className=`qaid-q-option${t.multiple?" qaid-q-multi":""}`,d.dataset.value=s.value,d.setAttribute("role",t.multiple?"checkbox":"radio"),d.setAttribute("aria-checked",r.has(s.value)?"true":"false"),r.has(s.value)&&d.classList.add("qaid-q-selected");const p=document.createElement("span");p.className="qaid-q-option-marker",p.setAttribute("aria-hidden","true");const g=document.createElement("span");if(g.className="qaid-q-option-body",s.image){const l=document.createElement("img");l.className="qaid-q-option-image",l.src=s.image,l.alt="",l.loading="lazy",l.decoding="async",g.appendChild(l)}const u=document.createElement("span");if(u.className="qaid-q-option-label",u.textContent=s.label,g.appendChild(u),s.description){const l=document.createElement("span");l.className="qaid-q-option-desc",l.textContent=s.description,g.appendChild(l)}if(d.appendChild(p),d.appendChild(g),c<9){const l=document.createElement("span");l.className="qaid-q-option-key",l.textContent=String(c+1),l.setAttribute("aria-hidden","true"),d.appendChild(l)}d.addEventListener("click",()=>m(c)),d.addEventListener("keydown",l=>{if(l.key==="ArrowDown"||l.key==="ArrowRight"){l.preventDefault(),h((c+1)%q.length);return}if(l.key==="ArrowUp"||l.key==="ArrowLeft"){l.preventDefault(),h((c-1+q.length)%q.length);return}!t.multiple&&l.key==="Enter"&&r.size>0&&(l.preventDefault(),e.onSubmit())}),q.push(d),i.appendChild(d)}),i.addEventListener("keydown",s=>{const c=s.key;if(c.length===1&&c>="1"&&c<="9"){const d=parseInt(c,10)-1;d<q.length&&(s.preventDefault(),m(d),h(d))}});function h(s){q[s]?.focus()}function m(s){const c=t.options[s].value;t.multiple?r.has(c)?r.delete(c):r.add(c):(r.clear(),r.add(c)),q.forEach(d=>{const p=d.dataset.value,g=r.has(p);d.classList.toggle("qaid-q-selected",g),d.setAttribute("aria-checked",g?"true":"false")}),e.onChange(f()),!t.multiple&&e.autoAdvance&&setTimeout(()=>e.onAutoAdvance(),180)}function f(){if(t.multiple)return Array.from(r);const s=r.values().next();return s.done?null:s.value}return{element:i,focus:()=>{(q.find(c=>c.classList.contains("qaid-q-selected"))??q[0])?.focus()},getValue:()=>f(),isValid:()=>t.required?r.size>0:!0}}function w(t,e){return t.questions.filter(i=>i.visibleIf?y(i.visibleIf,e):!0)}function y(t,e){if("allOf"in t){for(const a of t.allOf)if(!y(a,e))return!1;return!0}if("anyOf"in t){for(const a of t.anyOf)if(y(a,e))return!0;return!1}const i=e[t.questionId],n=i!=null&&!(typeof i=="string"&&i.trim()==="")&&!(Array.isArray(i)&&i.length===0);return"answered"in t?t.answered?n:!n:n?"equals"in t?x(i,t.equals):"notEquals"in t?!x(i,t.notEquals):"in"in t?t.in.some(a=>x(i,a)):!1:!1}function x(t,e){return Array.isArray(t)?t.some(i=>i===e):t===e}const k="qaid_visitor_id";function $(){try{let t=localStorage.getItem(k);return t||(t=crypto.randomUUID(),localStorage.setItem(k,t)),t}catch{return crypto.randomUUID()}}const K='<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/></svg>',B='<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l4 4L19 7" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>';class C{config;questionnaire=null;inlineQuestionnaire;configUrl;state="LOADING";stepIndex=0;visibleQuestions=[];pendingGoToStep=null;hasRenderedStep=!1;answers={};responseId=null;visitorId;pendingSaveTimer=null;pendingSaveQuestionId=null;pendingSaveValue=null;inflightSaves=0;shadowHost=null;shadowRoot=null;isUserContainer=!1;rootEl=null;cardEl=null;titleEl=null;stepCounterEl=null;progressEl=null;progressFillEl=null;bodyEl=null;footerEl=null;savingEl=null;backdropEl=null;currentInput=null;boundKeyDown;cssVars={};hostThemeOverrides;hostInlineVars;themeUrl;themeDocument;hostCss;constructor(e){this.config={endpoint:e.endpoint,apiKey:e.apiKey??"",container:e.container??"",zIndex:e.zIndex??50,colors:{accent:e.colors?.accent??e.colors?.positive??"#10b981",error:e.colors?.error??e.colors?.negative??"#ef4444",focus:e.colors?.focus??e.colors?.marker??"#6366f1"},modalWidth:e.modalWidth??480,backdropOpacity:e.backdropOpacity??.4,fontFamily:e.fontFamily??"system-ui, -apple-system, sans-serif",fontSize:e.fontSize??16,css:e.css??"",autoAdvance:e.autoAdvance??!1,saveDebounceMs:e.saveDebounceMs??500,autoFocus:e.autoFocus??!0,animate:e.animate??!0,progressPosition:e.progressPosition,theme:e.theme??"auto",unstyled:e.unstyled??!1,preset:e.preset??"default"},this.hostThemeOverrides={preset:e.preset!==void 0,mode:e.theme!==void 0,unstyled:e.unstyled!==void 0,css:e.css!==void 0},this.hostInlineVars={accentColor:e.colors?.accent??e.colors?.positive,errorColor:e.colors?.error??e.colors?.negative,focusColor:e.colors?.focus??e.colors?.marker,modalWidth:e.modalWidth,backdropOpacity:e.backdropOpacity,fontFamily:e.fontFamily,fontSize:e.fontSize},this.themeUrl=e.themeUrl,this.themeDocument=e.themeDocument,this.hostCss=e.css??"",this.inlineQuestionnaire=e.questionnaire,this.configUrl=e.configUrl,this.visitorId=$(),this.boundKeyDown=this.handleKeyDown.bind(this),this.init()}async init(){this.cssVars=z(this.hostInlineVars),this.mountShell(),this.renderLoading();try{const[e,i]=await Promise.all([this.loadQuestionnaire(),this.loadTheme()]);if(!e||!e.questions||e.questions.length===0)throw new Error("Questionnaire is empty");if(this.questionnaire=e,this.applyResolvedTheme(i),this.recomputeVisible(),this.pendingGoToStep){const n=this.visibleQuestions.findIndex(a=>a.id===this.pendingGoToStep);n!==-1&&(this.stepIndex=n),this.pendingGoToStep=null}this.createResponse(),this.state="READY",this.renderHeader(),this.renderStep()}catch(e){this.state="ERROR",this.renderError(e)}}async loadTheme(){if(this.themeDocument)return this.themeDocument;if(!this.themeUrl)return null;try{const e=await fetch(this.themeUrl,{headers:{Accept:"application/json"}});return e.ok?await e.json():(console.warn(`[quests-embed] theme fetch failed (${e.status}) — rendering with defaults`),null)}catch(e){return console.warn("[quests-embed] theme fetch error — rendering with defaults",e),null}}applyResolvedTheme(e){if(!this.shadowRoot||!this.rootEl)return;const i=this.hostThemeOverrides.preset?this.config.preset:e?.preset??this.config.preset,n=this.hostThemeOverrides.mode?this.config.theme:e?.mode??this.config.theme,a=this.hostThemeOverrides.unstyled?this.config.unstyled:e?.unstyled??this.config.unstyled;this.rootEl.classList.toggle("qaid-q-theme-light",n==="light"),this.rootEl.classList.toggle("qaid-q-theme-dark",n==="dark"),this.rootEl.classList.toggle("qaid-q-unstyled",!!a);const o=[];if(e?.tokens&&Object.keys(e.tokens).length>0){const r=Object.entries(e.tokens).filter(([,q])=>typeof q=="string"&&q.trim()!=="").map(([q,h])=>` ${q}: ${h};`).join(`
|
|
2
|
+
`);r&&o.push(`:where(.qaid-q-root) {
|
|
3
|
+
${r}
|
|
4
|
+
}`)}if(i&&i!=="default"){const r=D(i);r&&o.push(r)}if(e?.css&&e.css.trim()!==""&&o.push(e.css),this.hostCss&&this.hostCss.trim()!==""&&o.push(this.hostCss),o.length>0){const r=document.createElement("style");r.setAttribute("data-qaid-q-theme",""),r.textContent=o.join(`
|
|
5
|
+
|
|
6
|
+
`),this.shadowRoot.appendChild(r)}}async loadQuestionnaire(){if(this.inlineQuestionnaire)return this.inlineQuestionnaire;if(!this.configUrl)throw new Error("No questionnaire or configUrl provided");const e=await fetch(this.configUrl,{headers:{Accept:"application/json"}});if(!e.ok)throw new Error(`Failed to load questionnaire (${e.status})`);return await e.json()}mountShell(){this.shadowHost=document.createElement("div"),this.shadowHost.setAttribute("data-qaid-quests","");const e=this.config.container?document.querySelector(this.config.container):null;e?(this.shadowHost.style.display="block",this.shadowHost.style.height="100%",this.shadowHost.style.minHeight="0",e.appendChild(this.shadowHost),this.isUserContainer=!0):(this.shadowHost.style.position="fixed",this.shadowHost.style.inset="0",this.shadowHost.style.zIndex=String(this.config.zIndex),this.shadowHost.style.pointerEvents="none",document.body.appendChild(this.shadowHost)),this.shadowRoot=this.shadowHost.attachShadow({mode:"open"});const i=document.createElement("style");if(i.textContent=P(),this.shadowRoot.appendChild(i),this.rootEl=document.createElement("div"),this.rootEl.className=["qaid-q-root",this.isUserContainer?"qaid-q-inline":"",this.config.animate?"":"qaid-q-no-motion"].filter(Boolean).join(" "),V(this.rootEl,this.cssVars),this.isUserContainer)this.cardEl=document.createElement("div"),this.cardEl.className="qaid-q-card",this.rootEl.appendChild(this.cardEl);else{this.backdropEl=document.createElement("div"),this.backdropEl.className="qaid-q-backdrop",this.backdropEl.addEventListener("click",()=>this.close()),this.rootEl.appendChild(this.backdropEl);const n=document.createElement("div");n.className="qaid-q-modal",this.cardEl=document.createElement("div"),this.cardEl.className="qaid-q-card",n.appendChild(this.cardEl),this.rootEl.appendChild(n)}this.shadowRoot.appendChild(this.rootEl),!this.isUserContainer&&this.shadowHost&&(this.shadowHost.style.pointerEvents="auto"),document.addEventListener("keydown",this.boundKeyDown)}renderLoading(){if(!this.cardEl)return;this.cardEl.replaceChildren();const e=document.createElement("p");e.className="qaid-q-description",e.textContent="Loading…",this.cardEl.appendChild(e)}renderError(e){if(!this.cardEl)return;this.cardEl.replaceChildren();const i=document.createElement("h3");i.className="qaid-q-title",i.textContent="Couldn't load form";const n=document.createElement("p");n.className="qaid-q-description",n.textContent=e instanceof Error?e.message:String(e),this.cardEl.appendChild(i),this.cardEl.appendChild(n)}effectiveProgressPosition(){return this.config.progressPosition??this.questionnaire?.progressPosition??"top"}renderHeader(){if(!this.cardEl||!this.questionnaire)return;this.cardEl.replaceChildren();const e=!!this.questionnaire.hideProgress||this.questionnaire.questions.length<=1,i=!e&&this.effectiveProgressPosition()==="bottom",n=!!this.questionnaire.hideTitle,a=!!this.questionnaire.title&&!n,o=!!this.questionnaire.description&&!n,r=!this.isUserContainer,q=r||!i&&!e;this.savingEl=document.createElement("div"),this.savingEl.className="qaid-q-saving";const h=document.createElement("span");h.className="qaid-q-saving-dot";const m=document.createElement("span");m.textContent="Saving…",this.savingEl.appendChild(h),this.savingEl.appendChild(m),this.stepCounterEl=document.createElement("div"),this.stepCounterEl.className="qaid-q-step-counter",this.progressEl=document.createElement("div"),this.progressEl.className=i?"qaid-q-progress qaid-q-progress--inline":"qaid-q-progress",this.progressFillEl=document.createElement("div"),this.progressFillEl.className="qaid-q-progress-fill",this.progressEl.appendChild(this.progressFillEl);const f=a||q;if(f){const s=document.createElement("div");s.className="qaid-q-header";const c=document.createElement("div");a&&(this.titleEl=document.createElement("h2"),this.titleEl.className="qaid-q-title",this.titleEl.textContent=this.questionnaire.title,c.appendChild(this.titleEl));const d=document.createElement("div");if(d.style.display="flex",d.style.alignItems="center",d.style.gap="0.5rem",i||(d.appendChild(this.savingEl),e||d.appendChild(this.stepCounterEl)),r){const p=document.createElement("button");p.type="button",p.className="qaid-q-close",p.setAttribute("aria-label","Close form"),p.innerHTML=K,p.addEventListener("click",()=>this.close()),d.appendChild(p)}s.appendChild(c),s.appendChild(d),this.cardEl.appendChild(s)}if(o){const s=document.createElement("p");s.className="qaid-q-description",s.textContent=this.questionnaire.description,s.style.marginTop=f?"-0.5rem":"0",s.style.marginBottom="0.75rem",this.cardEl.appendChild(s)}!i&&!e&&this.cardEl.appendChild(this.progressEl),this.bodyEl=document.createElement("div"),this.bodyEl.className="qaid-q-body",this.cardEl.appendChild(this.bodyEl),this.footerEl=document.createElement("div"),this.footerEl.className="qaid-q-footer",this.cardEl.appendChild(this.footerEl)}renderStep(){if(!this.questionnaire||!this.bodyEl||!this.footerEl)return;const e=this.visibleQuestions.length;if(e===0){this.submit();return}this.stepIndex>=e&&(this.stepIndex=e-1);const i=this.stepIndex,n=this.visibleQuestions[i];if(this.stepCounterEl&&(this.stepCounterEl.textContent=`${i+1} / ${e}`),this.progressFillEl){const u=(i+1)/e*100;this.progressFillEl.style.width=`${u}%`}const a=document.createElement("div");a.className="qaid-q-step",a.setAttribute("role","group"),a.setAttribute("aria-labelledby",`qaid-q-label-${i}`);const o=document.createElement("label");if(o.id=`qaid-q-label-${i}`,o.className="qaid-q-label",o.textContent=n.label,n.required){const u=document.createElement("span");u.className="qaid-q-required",u.textContent="*",u.setAttribute("aria-label","required"),o.appendChild(u)}if(a.appendChild(o),n.description){const u=document.createElement("p");u.className="qaid-q-description",u.textContent=n.description,a.appendChild(u)}const r=document.createElement("p");r.className="qaid-q-error",r.setAttribute("aria-live","polite");const q=this.answers[n.id]??null,h=i===e-1,m=O({question:n,initialValue:q,onChange:u=>{this.handleAnswerChange(n,u),r.textContent&&(r.textContent="")},onSubmit:()=>this.advance(n,r),onAutoAdvance:()=>this.advance(n,r),autoAdvance:this.config.autoAdvance});this.currentInput=m,a.appendChild(m.element),a.appendChild(r),this.bodyEl.replaceChildren(a),this.footerEl.replaceChildren();const s=!(!!this.questionnaire.hideProgress||this.questionnaire.questions.length<=1)&&this.effectiveProgressPosition()==="bottom",c=i>0?(()=>{const u=document.createElement("button");return u.type="button",u.className="qaid-q-btn qaid-q-btn-secondary",u.textContent=this.questionnaire.backLabel??"Back",u.addEventListener("click",()=>this.back()),u})():null,d=document.createElement("button");if(d.type="button",d.className="qaid-q-btn qaid-q-btn-primary",d.textContent=h?this.questionnaire.submitLabel??"Submit":this.questionnaire.nextLabel??"Next",d.addEventListener("click",()=>this.advance(n,r)),s)this.footerEl.classList.add("qaid-q-footer--inline-progress"),c&&this.footerEl.appendChild(c),this.progressEl&&this.footerEl.appendChild(this.progressEl),this.savingEl&&this.footerEl.appendChild(this.savingEl),this.stepCounterEl&&this.footerEl.appendChild(this.stepCounterEl),this.footerEl.appendChild(d);else{this.footerEl.classList.remove("qaid-q-footer--inline-progress");const u=document.createElement("div");u.className="qaid-q-footer-left";const l=document.createElement("div");l.className="qaid-q-footer-right",c&&u.appendChild(c),l.appendChild(d),this.footerEl.appendChild(u),this.footerEl.appendChild(l)}const p=!this.hasRenderedStep;this.hasRenderedStep=!0,(!p||this.config.autoFocus)&&requestAnimationFrame(()=>m.focus())}renderDone(){if(!this.cardEl||!this.questionnaire)return;this.cardEl.replaceChildren();const e=document.createElement("div");e.className="qaid-q-done";const i=document.createElement("div");i.className="qaid-q-done-icon",i.innerHTML=B,e.appendChild(i);const n=document.createElement("h3");if(n.className="qaid-q-done-title",n.textContent=this.questionnaire.thankYouTitle??"Thank you!",e.appendChild(n),this.questionnaire.thankYouMessage){const a=document.createElement("p");a.className="qaid-q-done-message",a.textContent=this.questionnaire.thankYouMessage,e.appendChild(a)}if(!this.isUserContainer){const a=document.createElement("button");a.type="button",a.className="qaid-q-btn qaid-q-btn-primary",a.textContent="Close",a.style.marginTop="1rem",a.addEventListener("click",()=>this.close()),e.appendChild(a)}this.cardEl.appendChild(e)}advance(e,i){if(!this.currentInput||!this.questionnaire)return;if(!this.currentInput.isValid()){i.textContent=W(e),this.currentInput.focus();return}if(this.handleAnswerChange(e,this.currentInput.getValue(),{immediate:!0}),this.stepIndex===this.visibleQuestions.length-1){this.submit();return}this.stepIndex++,this.renderStep()}back(){this.flushPendingSave(),this.stepIndex>0&&(this.stepIndex--,this.recomputeVisible(),this.stepIndex>=this.visibleQuestions.length&&(this.stepIndex=Math.max(0,this.visibleQuestions.length-1)),this.renderStep())}recomputeVisible(){this.questionnaire&&(this.visibleQuestions=w(this.questionnaire,this.answers))}handleAnswerChange(e,i,n={}){this.answers[e.id]=i,this.recomputeVisible();const a=e.type==="text"||e.type==="currency"||e.type==="range";if(n.immediate||!a){this.flushPendingSave(),this.saveAnswer(e.id,i);return}this.pendingSaveQuestionId=e.id,this.pendingSaveValue=i,this.pendingSaveTimer&&clearTimeout(this.pendingSaveTimer),this.pendingSaveTimer=setTimeout(()=>{this.flushPendingSave()},this.config.saveDebounceMs)}flushPendingSave(){if(this.pendingSaveTimer&&(clearTimeout(this.pendingSaveTimer),this.pendingSaveTimer=null),this.pendingSaveQuestionId!==null){const e=this.pendingSaveQuestionId,i=this.pendingSaveValue;this.pendingSaveQuestionId=null,this.pendingSaveValue=null,this.saveAnswer(e,i)}}saveAnswer(e,i){this.showSaving(!0),this.inflightSaves++,this.doSave(e,i).finally(()=>{this.inflightSaves--,this.inflightSaves===0&&this.showSaving(!1)})}async doSave(e,i){let n=0;for(;this.responseId===null&&n<5e3;)await new Promise(a=>setTimeout(a,50)),n+=50;if(this.responseId!==null)try{await fetch(`${this.config.endpoint}/${this.responseId}`,{method:"PATCH",headers:this.jsonHeaders(),body:JSON.stringify({questionId:e,value:i})})}catch(a){console.error("[quests-embed] failed to save answer:",a)}}async createResponse(){try{const e=await fetch(this.config.endpoint,{method:"POST",headers:this.jsonHeaders(),body:JSON.stringify({apiKey:this.config.apiKey||void 0,questId:this.questionnaire?.id,pageUrl:window.location.href,visitorId:this.visitorId,userAgent:navigator.userAgent})});if(e.ok){const i=await e.json();this.responseId=i.id}}catch(e){console.error("[quests-embed] failed to create response:",e)}}async submit(){for(this.flushPendingSave();this.inflightSaves>0;)await new Promise(e=>setTimeout(e,50));if(this.responseId!==null)try{await fetch(`${this.config.endpoint}/${this.responseId}/submit`,{method:"POST",headers:this.jsonHeaders(),body:JSON.stringify({answers:this.answers})})}catch(e){console.error("[quests-embed] failed to submit:",e)}this.state="DONE",this.renderDone()}jsonHeaders(){const e={"Content-Type":"application/json",Accept:"application/json"};return this.config.apiKey&&(e["X-API-Key"]=this.config.apiKey),e}showSaving(e){this.savingEl&&this.savingEl.classList.toggle("qaid-q-visible",e)}handleKeyDown(e){e.key==="Escape"&&!this.isUserContainer&&this.state!=="DONE"&&this.close()}close(){this.flushPendingSave(),this.destroy()}destroy(){document.removeEventListener("keydown",this.boundKeyDown),this.pendingSaveTimer&&(clearTimeout(this.pendingSaveTimer),this.pendingSaveTimer=null),this.shadowHost&&(this.shadowHost.remove(),this.shadowHost=null,this.shadowRoot=null),this.rootEl=null,this.cardEl=null,this.bodyEl=null,this.footerEl=null,this.titleEl=null,this.stepCounterEl=null,this.progressFillEl=null,this.savingEl=null,this.backdropEl=null,this.currentInput=null}getAnswers(){return{...this.answers}}getCurrentQuestionId(){if(this.state!=="READY")return null;const e=this.visibleQuestions[this.stepIndex];return e?e.id:null}goToStep(e){if(this.state!=="READY"||!this.questionnaire)return this.pendingGoToStep=e,!1;const i=this.visibleQuestions.findIndex(n=>n.id===e);return i===-1?!1:(i===this.stepIndex||(this.flushPendingSave(),this.stepIndex=i,this.renderStep()),!0)}}function W(t){switch(t.type){case"text":return t.minLength?`Please enter at least ${t.minLength} characters.`:"This field is required.";case"currency":return"Please enter a valid amount.";case"date":return"Please pick a date.";case"multiple-choice":return t.multiple?"Please select at least one option.":"Please select an option.";case"range":return"Please choose a value."}}function S(t){return document.querySelector(t)?.textContent?.trim()??""}function Y(){const t=document.querySelector('script[type="application/json"][data-quests-config]');if(!t)return null;const e=t.textContent?.trim();if(!e)return null;try{const i=JSON.parse(e);return i.cssSelector&&!i.css&&(i.css=S(i.cssSelector),delete i.cssSelector),i}catch{return null}}function G(t){const e=t.getAttribute("data-endpoint");if(!e)return null;const i=t.getAttribute("data-config-url"),n=t.getAttribute("data-api-key"),a=t.getAttribute("data-container"),o=t.getAttribute("data-zindex"),r=t.getAttribute("data-positive-color"),q=t.getAttribute("data-negative-color"),h=t.getAttribute("data-marker-color"),m=t.getAttribute("data-modal-width"),f=t.getAttribute("data-backdrop-opacity"),s=t.getAttribute("data-font-family"),c=t.getAttribute("data-font-size"),d=t.getAttribute("data-css-selector"),p=t.getAttribute("data-auto-advance"),g=t.getAttribute("data-save-debounce-ms"),u=t.getAttribute("data-theme-url"),l=t.getAttribute("data-preset"),A=t.getAttribute("data-theme"),_=t.getAttribute("data-unstyled");return{endpoint:e,configUrl:i??void 0,apiKey:n??void 0,container:a??void 0,zIndex:o?parseInt(o,10):void 0,colors:{positive:r??void 0,negative:q??void 0,marker:h??void 0},modalWidth:m?parseInt(m,10):void 0,backdropOpacity:f?parseFloat(f):void 0,fontFamily:s??void 0,fontSize:c?parseInt(c,10):void 0,css:d?S(d):void 0,autoAdvance:p==="true"?!0:void 0,saveDebounceMs:g?parseInt(g,10):void 0,themeUrl:u??void 0,preset:l||void 0,theme:A||void 0,unstyled:_==="true"?!0:void 0}}if(typeof document<"u"){const t=()=>{const e=document.currentScript,i=Y(),n=e?G(e):null,a=i??n;a?.endpoint&&(a.configUrl||a.questionnaire)&&new C(a)};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",t):t()}b.QaidQuests=C,b.evaluateRule=y,b.getVisibleQuestions=w,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));
|
|
2
7
|
//# sourceMappingURL=qaid-quests.umd.cjs.map
|