@explorer02/cfm-survey-sdk 0.4.1 → 0.4.3

package/templates/wizard-dist/assets/TypePanel-CUani1B7.js

@@ -0,0 +1 @@
+import{u as p,j as e,T as P,N as t,S as b,R as d,C as r,a as R,M as z}from"./index-COdmy8Xp.js";import"./vendor-BwkXDkd3.js";function j({values:n,onPatch:i}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"Label text color",value:n.columnLabelColor,onChange:a=>i({columnLabelColor:a})}),e.jsx(r,{label:"Label background",value:n.columnLabelBgColor,onChange:a=>i({columnLabelBgColor:a})})]})}function f({values:n,onPatch:i}){return e.jsxs("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2",children:[e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Min hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:n.hintMinText,onChange:a=>i({hintMinText:a.target.value})})]}),e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Max hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:n.hintMaxText,onChange:a=>i({hintMaxText:a.target.value})})]}),e.jsx(r,{label:"Hint text color",value:n.hintLabelColor,onChange:a=>i({hintLabelColor:a})}),e.jsx(r,{label:"Hint label background",value:n.hintLabelBgColor,onChange:a=>i({hintLabelBgColor:a})})]})}function B({values:n,onPatch:i,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(b,{label:"Number label style",value:n.numberLabelMode,onChange:c=>i({numberLabelMode:c}),options:[{value:"traffic",label:"Traffic light (default)"},{value:"monochrome",label:"Monochrome (one color)"},{value:"individual",label:"Individual per number"}]}),n.numberLabelMode==="monochrome"&&e.jsx(r,{label:"Monochrome color",value:n.monochromeNumberColor,onChange:c=>i({monochromeNumberColor:c})}),n.numberLabelMode==="individual"&&e.jsx("div",{className:"grid grid-cols-2 gap-2 sm:grid-cols-3",children:Array.from({length:a},(c,x)=>e.jsx(r,{label:`#${x}`,value:n.individualNumberColors[x]??"#9CA3AF",onChange:C=>{const m=[...n.individualNumberColors];m[x]=C,i({individualNumberColors:m})}},x))})]})}function s({title:n,children:i}){return e.jsxs("div",{className:"space-y-3 rounded-xl border border-white/5 bg-slate-950/20 p-4",children:[e.jsx("h4",{className:"text-xs font-semibold uppercase tracking-wider text-slate-400",children:n}),i]})}function I({type:n,activeFormat:i}){const a=p(l=>l.config.questionTypes[n]),c=p(l=>l.updateQuestionType),x=p(l=>l.previewMultiStatementByType),C=p(l=>l.setPreviewMultiStatementForType),m=p(l=>l.heatmapPreviewPin);if(!a)return e.jsx("p",{className:"text-sm text-slate-500",children:"No configuration available for this type."});const o=l=>c(n,l),v=z.includes(n),S=!!x[n],u=i.includes("star"),g=i.includes("emoji"),h=i.includes("numbered"),w=i.includes("drag"),N=i.includes("dropdown"),T=i.includes("radio"),k=i==="CFM_bipolar",M=i.includes("graphics"),y=a.optionStyle??a.cardStyle??"outlined",L=a.buttonStyle??"numbered";return e.jsxs("div",{className:"space-y-4",children:[v&&e.jsx(P,{label:"Preview multiple statements",checked:S,onChange:l=>C(n,l)}),v&&S&&"statementRowGap"in a&&e.jsx(t,{label:"Statement row gap (px)",value:a.statementRowGap,onChange:l=>o({statementRowGap:l}),min:0,max:48}),n==="MCQ"&&"optionGap"in a&&e.jsx(s,{title:"Option style",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(b,{label:"Option style",value:a.optionStyle??a.cardStyle??"outlined",onChange:l=>o({optionStyle:l}),options:[{value:"outlined",label:"Outlined"},{value:"filled",label:"Filled"},{value:"minimal",label:"Minimal"}]}),e.jsx(d,{label:"Option gap",value:a.optionGap,onChange:l=>o({optionGap:l}),min:0,max:32}),e.jsx(d,{label:"Border radius",value:a.borderRadius,onChange:l=>o({borderRadius:l}),min:0,max:24}),e.jsx(d,{label:"Option padding",value:a.optionPadding??12,onChange:l=>o({optionPadding:l}),min:4,max:24}),e.jsx(r,{label:"Hover border",value:a.hoverBorderColor,onChange:l=>o({hoverBorderColor:l})}),y==="filled"&&e.jsx(r,{label:"Unselected fill color",value:a.filledOptionBg??"#F9FAFB",onChange:l=>o({filledOptionBg:l})})]})}),n==="TEXTFIELD"&&"defaultPlaceholder"in a&&e.jsx(s,{title:"Text input",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Default placeholder"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:a.defaultPlaceholder,onChange:l=>o({defaultPlaceholder:l.target.value})})]}),e.jsx(t,{label:"Input radius (px)",value:a.inputRadius,onChange:l=>o({inputRadius:l}),min:0,max:24}),e.jsx(r,{label:"Border color",value:a.borderColor,onChange:l=>o({borderColor:l})}),e.jsx(r,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>o({placeholderColor:l})}),e.jsx(t,{label:"Input height (px)",value:a.inputHeight,onChange:l=>o({inputHeight:l}),min:32,max:64}),e.jsx(t,{label:"Input padding (px)",value:a.inputPadding,onChange:l=>o({inputPadding:l}),min:8,max:24})]})}),n==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsxs(s,{title:"NPS buttons",children:[e.jsx(b,{label:"Button style",value:a.buttonStyle,onChange:l=>o({buttonStyle:l}),options:[{value:"standard",label:"Radio"},{value:"numbered",label:"Numbered badges"}]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell and focus ring come from Theme → Question card."})]}),e.jsx(s,{title:"Hint labels",children:e.jsx(f,{values:a,onPatch:o})}),L==="numbered"&&e.jsx(s,{title:"Number labels",children:e.jsx(B,{values:a,onPatch:o})}),e.jsx(s,{title:"Track & cells",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(t,{label:"Cell size (px)",value:a.cellSize,onChange:l=>o({cellSize:l}),min:24,max:56}),e.jsx(t,{label:"Cell gap (px)",value:a.cellGap,onChange:l=>o({cellGap:l}),min:0,max:16}),e.jsx(r,{label:"Track bar",value:a.trackBarColor,onChange:l=>o({trackBarColor:l})})]})})]}),n==="CFM_MATRIX"&&"rowLabelWidth"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Matrix layout",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>o({rowLabelWidth:l}),min:120,max:280}),k&&e.jsx(t,{label:"Bipolar column width (%)",value:a.bipolarColumnWidthPercent,onChange:l=>o({bipolarColumnWidthPercent:l}),min:15,max:40}),e.jsx(t,{label:"Cell padding (px)",value:a.cellPadding,onChange:l=>o({cellPadding:l}),min:4,max:24})]})}),e.jsx(s,{title:"Label items",children:e.jsx(j,{values:a,onPatch:o})})]}),n==="CSAT_MATRIX"&&"emojiSize"in a&&e.jsxs(e.Fragment,{children:[(g||u||h)&&e.jsxs(s,{title:`${R.CSAT_MATRIX} — ${i.replace("CSAT_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[g&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>o({emojiSize:l}),min:16,max:40}),u&&e.jsx(r,{label:"Star color",value:a.accentColor,onChange:l=>o({accentColor:l})}),(g||u||h)&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedOpacity*100),onChange:l=>o({unselectedOpacity:l/100}),min:10,max:100}),h&&e.jsx(r,{label:"Number text color",value:a.numberedTextColor,onChange:l=>o({numberedTextColor:l})})]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell color and focus ring come from Theme → Question card."})]}),e.jsxs(s,{title:"Label items",children:[e.jsx("p",{className:"text-xs text-slate-500",children:"Applies to the 5 text labels above options in all formats."}),e.jsx(j,{values:a,onPatch:o})]}),M&&e.jsx(s,{title:"Graphics track",children:e.jsx(r,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>o({graphicsTrackColor:l})})})]}),n==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(g||u||h||T)&&e.jsxs(s,{title:`Rating — ${i.replace("RATING_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[g&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>o({emojiSize:l}),min:16,max:40}),u&&e.jsx(r,{label:"Star color",value:a.starColor,onChange:l=>o({starColor:l})}),(g||u||h||T)&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedStarOpacity*100),onChange:l=>o({unselectedStarOpacity:l/100}),min:10,max:100}),h&&e.jsx(r,{label:"Number text color",value:a.numberedTextColor,onChange:l=>o({numberedTextColor:l})})]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell color and focus ring come from Theme → Question card."})]}),e.jsxs(s,{title:"Label items",children:[e.jsx("p",{className:"text-xs text-slate-500",children:"Applies to the 5 text anchor labels in all formats."}),e.jsx(j,{values:a,onPatch:o})]}),M&&e.jsx(s,{title:"Graphics track",children:e.jsx(r,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>o({graphicsTrackColor:l})})})]}),n==="SLIDER_MATRIX"&&"trackColor"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Slider track",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"Track",value:a.trackColor,onChange:l=>o({trackColor:l})}),e.jsx(r,{label:"Thumb",value:a.thumbColor,onChange:l=>o({thumbColor:l})}),e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>o({rowLabelWidth:l}),min:120,max:280}),e.jsx(r,{label:"Row band",value:a.rowBandColor,onChange:l=>o({rowBandColor:l})}),e.jsx(t,{label:"Tick badge size (px)",value:a.tickBadgeSize,onChange:l=>o({tickBadgeSize:l}),min:20,max:40})]})}),e.jsx(s,{title:"Anchor hint labels",children:e.jsx(f,{values:a,onPatch:o})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(B,{values:a,onPatch:o,count:11})})]}),n==="FILE_UPLOAD"&&"dropzoneStyle"in a&&e.jsx(s,{title:"Dropzone",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(b,{label:"Dropzone border",value:a.dropzoneStyle,onChange:l=>o({dropzoneStyle:l}),options:[{value:"dashed",label:"Dashed"},{value:"solid",label:"Solid"}]}),e.jsx(r,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>o({borderColor:l})}),e.jsx(r,{label:"Fill color",value:a.dropzoneFillColor,onChange:l=>o({dropzoneFillColor:l})}),e.jsx(t,{label:"Padding (px)",value:a.dropzonePadding,onChange:l=>o({dropzonePadding:l}),min:12,max:48})]})}),n==="TEXT_AND_MEDIA"&&"mediaMaxWidth"in a&&e.jsx(s,{title:"Text & media",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(d,{label:"Media max width (%)",value:a.mediaMaxWidth,onChange:l=>o({mediaMaxWidth:l}),min:50,max:100}),e.jsx(d,{label:"Media corner radius",value:a.mediaRadius,onChange:l=>o({mediaRadius:l}),min:0,max:24}),e.jsx(r,{label:"Caption color",value:a.captionColor,onChange:l=>o({captionColor:l})}),e.jsx(t,{label:"Caption size (px)",value:a.captionSize,onChange:l=>o({captionSize:l}),min:10,max:24})]})}),n==="HEATMAP"&&"pinColor"in a&&e.jsx(s,{title:"Heatmap pin",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"Pin color",value:a.pinColor,onChange:l=>o({pinColor:l})}),e.jsx(r,{label:"Pin border",value:a.pinBorderColor,onChange:l=>o({pinBorderColor:l})}),e.jsx(d,{label:"Pin size",value:a.pinSize,onChange:l=>o({pinSize:l}),min:8,max:32}),e.jsx(d,{label:"Overlay opacity",value:Math.round(a.overlayOpacity*100),onChange:l=>o({overlayOpacity:l/100}),min:0,max:80}),e.jsxs("p",{className:"text-xs text-slate-500 sm:col-span-2",children:["Click the heatmap image in the preview to place a pin and see styling update live. Pin preview position: ",Math.round(m.x*100),"%, ",Math.round(m.y*100),"%"]})]})}),n==="RANK_ORDER"&&"drag"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"List",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"List bg",value:a.drag.itemBg,onChange:l=>o({drag:{...a.drag,itemBg:l},dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(r,{label:"List hover",value:a.dropdown.itemHoverBg??a.drag.itemHoverBg??"#F3F4F6",onChange:l=>o({drag:{...a.drag,itemHoverBg:l},dropdown:{...a.dropdown,itemHoverBg:l}})})]})}),e.jsx(s,{title:w?"Drag & drop":N?"Dropdown rank":"Rank order",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[w&&e.jsxs(e.Fragment,{children:[e.jsx(r,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>o({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(r,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>o({drag:{...a.drag,rankBadgeColor:l},dropdown:{...a.dropdown,rankBadgeColor:l}})})]}),N&&e.jsxs(e.Fragment,{children:[e.jsx(r,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>o({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(r,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>o({drag:{...a.drag,rankBadgeColor:l},dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})]})}export{I as TypePanel};