@explorer02/cfm-survey-sdk 0.3.7 → 0.3.9
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/dist/cli/index.js +1 -1
- package/dist/cli/index.mjs +1 -1
- package/package.json +1 -1
- package/templates/docs/templates/CsatMatrixScale.tsx +29 -30
- package/templates/docs/templates/Header.tsx +14 -12
- package/templates/docs/templates/Question.tsx +13 -2
- package/templates/docs/templates/SliderMatrixScale.tsx +3 -5
- package/templates/docs/templates/uiConfig.ts +4 -2
- package/templates/preview-harness/preview-bridge.inline.js +9 -35
- package/templates/preview-harness/vite-app/src/PreviewConfigContext.tsx +1 -1
- package/templates/preview-harness/vite-app/src/fixtures/questions.ts +25 -14
- package/templates/previewBridge.ts +6 -2
- package/templates/survey-theme.css +1 -13
- package/templates/wizard-dist/assets/{PreviewMock-BwihQcaZ.js → PreviewMock-CS4WqhDB.js} +1 -1
- package/templates/wizard-dist/assets/TypePanel-BgTW2c74.js +1 -0
- package/templates/wizard-dist/assets/{index-BDaoM71z.js → index-hjm-fxWO.js} +2 -2
- package/templates/wizard-dist/index.html +1 -1
- package/templates/wizard-dist/assets/TypePanel-C-nuhX_H.js +0 -1
|
@@ -17,8 +17,10 @@ export function getCompanyName(): string {
|
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
export function getLogoFileName(): string | null {
|
|
20
|
-
const fileName = surveyUiConfig.global?.logo?.fileName;
|
|
21
|
-
|
|
20
|
+
const fileName = surveyUiConfig.global?.logo?.fileName as string | null | undefined;
|
|
21
|
+
if (typeof fileName !== 'string') return null;
|
|
22
|
+
const trimmed = fileName.trim();
|
|
23
|
+
return trimmed ? trimmed : null;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
/** Logo src for Header/Footer img — relative for AWS static export. */
|
|
@@ -81,31 +81,6 @@
|
|
|
81
81
|
applyDropzoneStyle();
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
function ensureCompanySpan() {
|
|
85
|
-
if (document.querySelector('[data-cfm-company]')) return;
|
|
86
|
-
var brand = document.querySelector('.cfm-header-brand');
|
|
87
|
-
if (!brand) return;
|
|
88
|
-
var span = document.createElement('span');
|
|
89
|
-
span.setAttribute('data-cfm-company', '');
|
|
90
|
-
span.className = 'font-semibold';
|
|
91
|
-
brand.appendChild(span);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
function showCompanyNameAllowed() {
|
|
95
|
-
var attr = document.documentElement.getAttribute('data-cfm-show-company-name');
|
|
96
|
-
if (attr === '0') return false;
|
|
97
|
-
return true;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
function updateCompanyVisibility(name) {
|
|
101
|
-
ensureCompanySpan();
|
|
102
|
-
var visible = showCompanyNameAllowed() && Boolean(name);
|
|
103
|
-
document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
|
|
104
|
-
if (name) el.textContent = name;
|
|
105
|
-
el.style.display = visible ? '' : 'none';
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
|
-
|
|
109
84
|
function applyContent(patch) {
|
|
110
85
|
if (!patch) return;
|
|
111
86
|
if (patch.logoUrl !== undefined) {
|
|
@@ -129,15 +104,19 @@
|
|
|
129
104
|
}
|
|
130
105
|
});
|
|
131
106
|
document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
|
|
132
|
-
if (patch.logoUrl) {
|
|
133
|
-
|
|
134
|
-
updateCompanyVisibility(el.textContent || '');
|
|
107
|
+
if (patch.logoUrl && !el.textContent) {
|
|
108
|
+
el.style.display = 'none';
|
|
135
109
|
}
|
|
136
110
|
});
|
|
137
111
|
}
|
|
138
112
|
if (patch.companyName !== undefined) {
|
|
139
113
|
var name = patch.companyName || '';
|
|
140
|
-
|
|
114
|
+
document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
|
|
115
|
+
el.textContent = name;
|
|
116
|
+
if (!name) {
|
|
117
|
+
el.style.display = 'none';
|
|
118
|
+
}
|
|
119
|
+
});
|
|
141
120
|
document.querySelectorAll('[data-cfm-logo-text]').forEach(function (el) {
|
|
142
121
|
var logoImg = document.querySelector('[data-cfm-logo]');
|
|
143
122
|
var logoVisible =
|
|
@@ -197,12 +176,7 @@
|
|
|
197
176
|
if (patch.layoutFlags) {
|
|
198
177
|
var flags = patch.layoutFlags;
|
|
199
178
|
if (flags.showCompanyName !== undefined) {
|
|
200
|
-
|
|
201
|
-
'data-cfm-show-company-name',
|
|
202
|
-
flags.showCompanyName ? '1' : '0',
|
|
203
|
-
);
|
|
204
|
-
var companyEl = document.querySelector('[data-cfm-company]');
|
|
205
|
-
updateCompanyVisibility(companyEl ? companyEl.textContent : patch.companyName || '');
|
|
179
|
+
setDisplay('[data-cfm-company]', flags.showCompanyName);
|
|
206
180
|
}
|
|
207
181
|
if (flags.showHeader !== undefined) {
|
|
208
182
|
setDisplay('.cfm-header, header.cfm-header', flags.showHeader);
|
|
@@ -72,7 +72,6 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
|
|
|
72
72
|
if (data.type !== PREVIEW_BRIDGE_SNAPSHOT && data.type !== PREVIEW_BRIDGE_DELTA) return;
|
|
73
73
|
if (data.contentPatch?.previewState) {
|
|
74
74
|
setPreviewState((prev) => ({ ...prev, ...data.contentPatch.previewState }));
|
|
75
|
-
setConfigRevision((r) => r + 1);
|
|
76
75
|
}
|
|
77
76
|
if (data.contentPatch?.domAttributes) {
|
|
78
77
|
const root = document.documentElement;
|
|
@@ -86,6 +85,7 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
|
|
|
86
85
|
root.style.setProperty(key, value as string);
|
|
87
86
|
}
|
|
88
87
|
}
|
|
88
|
+
setConfigRevision((r) => r + 1);
|
|
89
89
|
applyThemeSideEffects();
|
|
90
90
|
};
|
|
91
91
|
|
|
@@ -19,8 +19,6 @@ const LIKERT_COLUMNS = [
|
|
|
19
19
|
{ id: 'c5', label: 'Strongly Agree' },
|
|
20
20
|
];
|
|
21
21
|
|
|
22
|
-
const MATRIX_ANCHOR_LABELS = LIKERT_COLUMNS.map((c) => c.label);
|
|
23
|
-
|
|
24
22
|
const MATRIX_ROW_SINGLE = [{ id: 'r1', statementText: 'Statement Item 1' }];
|
|
25
23
|
|
|
26
24
|
const MATRIX_ROWS_MULTI = [
|
|
@@ -206,13 +204,20 @@ export const FIXTURE_CFM_DROPDOWN = base({
|
|
|
206
204
|
scaleColumns: LIKERT_COLUMNS,
|
|
207
205
|
});
|
|
208
206
|
|
|
207
|
+
const LIKERT_ANCHOR_LABELS = LIKERT_COLUMNS.map((c) => c.label);
|
|
208
|
+
|
|
209
|
+
const RATING_TEN_COLUMNS = Array.from({ length: 10 }, (_, i) => ({
|
|
210
|
+
id: `c${i}`,
|
|
211
|
+
label: String(i + 1),
|
|
212
|
+
}));
|
|
213
|
+
|
|
209
214
|
export const FIXTURE_CSAT_EMOJI = base({
|
|
210
215
|
type: 'CSAT_MATRIX',
|
|
211
216
|
displayStyle: 'emoji',
|
|
212
217
|
gridLayout: 'standard',
|
|
213
218
|
statementRows: MATRIX_ROW_SINGLE,
|
|
214
|
-
scaleColumns:
|
|
215
|
-
scaleAnchorLabels:
|
|
219
|
+
scaleColumns: LIKERT_COLUMNS,
|
|
220
|
+
scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
|
|
216
221
|
});
|
|
217
222
|
|
|
218
223
|
export const FIXTURE_CSAT_STAR = base({
|
|
@@ -220,7 +225,8 @@ export const FIXTURE_CSAT_STAR = base({
|
|
|
220
225
|
displayStyle: 'star',
|
|
221
226
|
gridLayout: 'standard',
|
|
222
227
|
statementRows: MATRIX_ROW_SINGLE,
|
|
223
|
-
scaleColumns:
|
|
228
|
+
scaleColumns: LIKERT_COLUMNS,
|
|
229
|
+
scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
|
|
224
230
|
});
|
|
225
231
|
|
|
226
232
|
export const FIXTURE_CSAT_NUMBERED = base({
|
|
@@ -228,7 +234,8 @@ export const FIXTURE_CSAT_NUMBERED = base({
|
|
|
228
234
|
displayStyle: 'numbered',
|
|
229
235
|
gridLayout: 'standard',
|
|
230
236
|
statementRows: MATRIX_ROWS_MULTI,
|
|
231
|
-
scaleColumns:
|
|
237
|
+
scaleColumns: LIKERT_COLUMNS,
|
|
238
|
+
scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
|
|
232
239
|
});
|
|
233
240
|
|
|
234
241
|
export const FIXTURE_CSAT_GRAPHICS = base({
|
|
@@ -236,8 +243,8 @@ export const FIXTURE_CSAT_GRAPHICS = base({
|
|
|
236
243
|
displayStyle: 'graphics',
|
|
237
244
|
gridLayout: 'standard',
|
|
238
245
|
statementRows: MATRIX_ROW_SINGLE,
|
|
239
|
-
scaleColumns:
|
|
240
|
-
scaleAnchorLabels:
|
|
246
|
+
scaleColumns: LIKERT_COLUMNS,
|
|
247
|
+
scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
|
|
241
248
|
});
|
|
242
249
|
|
|
243
250
|
export const FIXTURE_CSAT_CAROUSEL = base({
|
|
@@ -267,7 +274,8 @@ export const FIXTURE_RATING_STAR = base({
|
|
|
267
274
|
gridLayout: 'standard',
|
|
268
275
|
showColumnHeaders: true,
|
|
269
276
|
statementRows: MATRIX_ROWS_MULTI,
|
|
270
|
-
scaleColumns:
|
|
277
|
+
scaleColumns: RATING_TEN_COLUMNS,
|
|
278
|
+
scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
|
|
271
279
|
});
|
|
272
280
|
|
|
273
281
|
export const FIXTURE_RATING_NUMBERED = base({
|
|
@@ -275,7 +283,8 @@ export const FIXTURE_RATING_NUMBERED = base({
|
|
|
275
283
|
displayStyle: 'numbered',
|
|
276
284
|
gridLayout: 'standard',
|
|
277
285
|
statementRows: MATRIX_ROWS_MULTI,
|
|
278
|
-
scaleColumns:
|
|
286
|
+
scaleColumns: RATING_TEN_COLUMNS,
|
|
287
|
+
scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
|
|
279
288
|
});
|
|
280
289
|
|
|
281
290
|
export const FIXTURE_RATING_RADIO = base({
|
|
@@ -283,7 +292,8 @@ export const FIXTURE_RATING_RADIO = base({
|
|
|
283
292
|
displayStyle: 'standard',
|
|
284
293
|
gridLayout: 'standard',
|
|
285
294
|
statementRows: MATRIX_ROW_SINGLE,
|
|
286
|
-
scaleColumns:
|
|
295
|
+
scaleColumns: RATING_TEN_COLUMNS,
|
|
296
|
+
scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
|
|
287
297
|
});
|
|
288
298
|
|
|
289
299
|
export const FIXTURE_RATING_EMOJI = base({
|
|
@@ -291,7 +301,8 @@ export const FIXTURE_RATING_EMOJI = base({
|
|
|
291
301
|
displayStyle: 'emoji',
|
|
292
302
|
gridLayout: 'standard',
|
|
293
303
|
statementRows: MATRIX_ROW_SINGLE,
|
|
294
|
-
scaleColumns:
|
|
304
|
+
scaleColumns: RATING_TEN_COLUMNS,
|
|
305
|
+
scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
|
|
295
306
|
});
|
|
296
307
|
|
|
297
308
|
export const FIXTURE_RATING_GRAPHICS = base({
|
|
@@ -299,8 +310,8 @@ export const FIXTURE_RATING_GRAPHICS = base({
|
|
|
299
310
|
displayStyle: 'graphics',
|
|
300
311
|
gridLayout: 'standard',
|
|
301
312
|
statementRows: MATRIX_ROW_SINGLE,
|
|
302
|
-
scaleColumns:
|
|
303
|
-
scaleAnchorLabels:
|
|
313
|
+
scaleColumns: RATING_TEN_COLUMNS,
|
|
314
|
+
scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
|
|
304
315
|
});
|
|
305
316
|
|
|
306
317
|
export const FIXTURE_RATING_SLIDER = base({
|
|
@@ -91,7 +91,9 @@ function applyContentPatch(patch: ContentPatch): void {
|
|
|
91
91
|
document.querySelectorAll('[data-cfm-company]').forEach((el) => {
|
|
92
92
|
const htmlEl = el as HTMLElement;
|
|
93
93
|
if (patch.logoUrl) {
|
|
94
|
-
|
|
94
|
+
if (!htmlEl.textContent?.trim()) {
|
|
95
|
+
htmlEl.style.display = 'none';
|
|
96
|
+
}
|
|
95
97
|
}
|
|
96
98
|
});
|
|
97
99
|
}
|
|
@@ -100,7 +102,9 @@ function applyContentPatch(patch: ContentPatch): void {
|
|
|
100
102
|
const name = patch.companyName ?? '';
|
|
101
103
|
document.querySelectorAll('[data-cfm-company]').forEach((el) => {
|
|
102
104
|
(el as HTMLElement).textContent = name;
|
|
103
|
-
(
|
|
105
|
+
if (!name) {
|
|
106
|
+
(el as HTMLElement).style.display = 'none';
|
|
107
|
+
}
|
|
104
108
|
});
|
|
105
109
|
document.querySelectorAll('[data-cfm-logo-text]').forEach((el) => {
|
|
106
110
|
const logoImg = document.querySelector('[data-cfm-logo]') as HTMLImageElement | null;
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
--cfm-footer-link-hover: #ffffff;
|
|
38
38
|
--cfm-footer-logo-width: 120px;
|
|
39
39
|
--cfm-footer-logo-height: 32px;
|
|
40
|
-
--cfm-footer-padding-y:
|
|
40
|
+
--cfm-footer-padding-y: 21px;
|
|
41
41
|
--cfm-footer-padding-x: 40px;
|
|
42
42
|
--cfm-footer-logo-copyright-gap: 12px;
|
|
43
43
|
--cfm-footer-inner-display: grid;
|
|
@@ -290,15 +290,3 @@ body {
|
|
|
290
290
|
.cfm-live-edit * {
|
|
291
291
|
transition: none !important;
|
|
292
292
|
}
|
|
293
|
-
|
|
294
|
-
html[data-cfm-show-company-name='0'] [data-cfm-company] {
|
|
295
|
-
display: none !important;
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
html[data-cfm-show-question-numbers='0'] [data-cfm-question-number] {
|
|
299
|
-
display: none !important;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
html[data-cfm-show-required='0'] [data-cfm-required] {
|
|
303
|
-
display: none !important;
|
|
304
|
-
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{u as x,j as e}from"./index-
|
|
1
|
+
import{u as x,j as e}from"./index-hjm-fxWO.js";import{b as t}from"./vendor-BwkXDkd3.js";function p(d=150){const l=x(r=>r.config),[a,s]=t.useState(l);return t.useEffect(()=>{const r=window.setTimeout(()=>s(l),d);return()=>window.clearTimeout(r)},[l,d]),a}const h=t.memo(function(){const l=p(150),a=x(n=>n.logoPreviewDataUrl),{global:s}=l,{layout:r,colorScheme:o,buttons:c}=s,m=t.useMemo(()=>r.borderStyle==="sharp"?"rounded-none":r.borderStyle==="pill"?"rounded-[32px]":"rounded-2xl",[r.borderStyle]),i=t.useMemo(()=>r.fontStyle==="serif"?"Georgia, serif":r.fontStyle==="system"?"system-ui, sans-serif":"Inter, sans-serif",[r.fontStyle]),u=a??s.logo.url,f=t.useMemo(()=>({backgroundColor:o.background,color:o.text,borderColor:o.secondary,fontFamily:i}),[o,i]);return e.jsxs("div",{className:`overflow-hidden border shadow-md ${m}`,style:f,children:[r.showHeader&&e.jsxs("div",{className:"flex items-center gap-3 border-b px-5 py-4",style:{borderColor:o.secondary},children:[u&&e.jsx("img",{src:u,alt:"Logo",className:"max-h-6 w-auto object-contain",loading:"lazy"}),e.jsx("span",{className:"text-xs font-semibold tracking-wider",children:s.companyName})]}),e.jsxs("div",{className:"space-y-6 p-6",children:[r.showProgressBar&&e.jsxs("div",{className:"space-y-1.5",children:[e.jsxs("div",{className:"flex justify-between text-[10px] font-semibold text-slate-400",children:[e.jsx("span",{children:"Progress"}),e.jsx("span",{children:"35%"})]}),e.jsx("div",{className:"h-1.5 w-full overflow-hidden rounded-full bg-slate-100",children:e.jsx("div",{className:"h-full w-[35%] rounded-full",style:{backgroundColor:o.accent}})})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("h4",{className:"flex items-start gap-1.5 text-sm font-bold leading-snug",children:[r.showQuestionNumbers&&e.jsx("span",{className:"font-medium text-slate-400",children:"Q1."}),e.jsx("span",{children:s.surveyTitle}),r.showRequiredAsterisk&&e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("p",{className:"text-[11px] text-slate-400",children:"How would you rate your overall experience?"}),e.jsx("div",{className:"grid grid-cols-5 gap-2",children:[1,2,3,4,5].map(n=>e.jsx("div",{className:`flex h-9 items-center justify-center border text-xs font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:n===1?{backgroundColor:o.secondary,borderColor:o.primary,color:o.primary}:{backgroundColor:o.background,borderColor:o.secondary,color:o.text},children:n},n))})]})]}),e.jsxs("div",{className:"flex items-center justify-between border-t bg-slate-50/50 px-6 py-4",children:[r.showBackButton&&e.jsx("span",{className:`border px-3 py-1.5 text-[10px] font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{borderColor:o.secondary,color:o.text},children:c.back}),e.jsx("div",{className:"flex-1"}),r.showNextButton&&e.jsx("span",{className:`px-4 py-1.5 text-[10px] font-bold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{backgroundColor:o.primary,color:o.buttonText},children:c.next})]})]})});export{h as PreviewMock};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{u as m,j as e,T as z,S as j,R as d,C as i,N as t,a as A,M as F}from"./index-hjm-fxWO.js";import"./vendor-BwkXDkd3.js";const N="Applies to the 5 anchor labels shared across all formats. First and last align with options 1 and 10; middle labels are spaced evenly. Numeric column headers (1–10) are plain text.";function b({values:o,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Label text color",value:o.columnLabelColor,onChange:a=>r({columnLabelColor:a})}),e.jsx(i,{label:"Label background",value:o.columnLabelBgColor,onChange:a=>r({columnLabelBgColor:a})})]})}function T({values:o,onPatch:r}){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:o.hintMinText,onChange:a=>r({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:o.hintMaxText,onChange:a=>r({hintMaxText:a.target.value})})]}),e.jsx(i,{label:"Hint text color",value:o.hintLabelColor,onChange:a=>r({hintLabelColor:a})}),e.jsx(i,{label:"Hint label background",value:o.hintLabelBgColor,onChange:a=>r({hintLabelBgColor:a})})]})}function k({values:o,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(j,{label:"Number label style",value:o.numberLabelMode,onChange:c=>r({numberLabelMode:c}),options:[{value:"traffic",label:"Traffic light (default)"},{value:"monochrome",label:"Monochrome (one color)"},{value:"individual",label:"Individual per number"}]}),o.numberLabelMode==="monochrome"&&e.jsx(i,{label:"Monochrome color",value:o.monochromeNumberColor,onChange:c=>r({monochromeNumberColor:c})}),o.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(i,{label:`#${x}`,value:o.individualNumberColors[x]??"#9CA3AF",onChange:C=>{const h=[...o.individualNumberColors];h[x]=C,r({individualNumberColors:h})}},x))})]})}function s({title:o,children:r}){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:o}),r]})}function O({type:o,activeFormat:r}){const a=m(l=>l.config.questionTypes[o]),c=m(l=>l.updateQuestionType),x=m(l=>l.previewMultiStatementByType),C=m(l=>l.setPreviewMultiStatementForType),h=m(l=>l.heatmapPreviewPin);if(!a)return e.jsx("p",{className:"text-sm text-slate-500",children:"No configuration available for this type."});const n=l=>c(o,l),M=F.includes(o),y=!!x[o],u=r.includes("star"),g=r.includes("emoji"),f=r.includes("numbered"),v=r.includes("drag"),S=r.includes("dropdown"),B=r.includes("radio"),L=r==="CFM_bipolar",w=r.includes("graphics"),p=g||u||f||B,P=a.optionStyle??a.cardStyle??"outlined",R=a.buttonStyle??"numbered";return e.jsxs("div",{className:"space-y-4",children:[M&&e.jsx(z,{label:"Preview multiple statements",checked:y,onChange:l=>C(o,l)}),o==="MCQ"&&"optionGap"in a&&e.jsx(s,{title:"Option style",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(j,{label:"Option style",value:a.optionStyle??a.cardStyle??"outlined",onChange:l=>n({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=>n({optionGap:l}),min:0,max:32}),e.jsx(d,{label:"Border radius",value:a.borderRadius,onChange:l=>n({borderRadius:l}),min:0,max:24}),e.jsx(d,{label:"Option padding",value:a.optionPadding??12,onChange:l=>n({optionPadding:l}),min:4,max:24}),e.jsx(i,{label:"Hover border",value:a.hoverBorderColor,onChange:l=>n({hoverBorderColor:l})}),P==="filled"&&e.jsx(i,{label:"Unselected fill color",value:a.filledOptionBg??"#F9FAFB",onChange:l=>n({filledOptionBg:l})})]})}),o==="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=>n({defaultPlaceholder:l.target.value})})]}),e.jsx(t,{label:"Input radius (px)",value:a.inputRadius,onChange:l=>n({inputRadius:l}),min:0,max:24}),e.jsx(i,{label:"Border color",value:a.borderColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>n({placeholderColor:l})}),e.jsx(t,{label:"Input height (px)",value:a.inputHeight,onChange:l=>n({inputHeight:l}),min:32,max:64}),e.jsx(t,{label:"Input padding (px)",value:a.inputPadding,onChange:l=>n({inputPadding:l}),min:8,max:24})]})}),o==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsxs(s,{title:"NPS buttons",children:[e.jsx(j,{label:"Button style",value:a.buttonStyle,onChange:l=>n({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(T,{values:a,onPatch:n})}),R==="numbered"&&e.jsx(s,{title:"Number labels",children:e.jsx(k,{values:a,onPatch:n})}),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=>n({cellSize:l}),min:24,max:56}),e.jsx(t,{label:"Cell gap (px)",value:a.cellGap,onChange:l=>n({cellGap:l}),min:0,max:16}),e.jsx(i,{label:"Track bar",value:a.trackBarColor,onChange:l=>n({trackBarColor:l})}),e.jsx(i,{label:"Track highlight",value:a.trackHighlightColor,onChange:l=>n({trackHighlightColor:l})})]})})]}),o==="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=>n({rowLabelWidth:l}),min:120,max:280}),L&&e.jsx(t,{label:"Bipolar column width (%)",value:a.bipolarColumnWidthPercent,onChange:l=>n({bipolarColumnWidthPercent:l}),min:15,max:40}),e.jsx(t,{label:"Cell padding (px)",value:a.cellPadding,onChange:l=>n({cellPadding:l}),min:4,max:24})]})}),e.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})})]}),o==="CSAT_MATRIX"&&"emojiSize"in a&&e.jsxs(e.Fragment,{children:[(g||p||u)&&e.jsxs(s,{title:`${A.CSAT_MATRIX} — ${r.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=>n({emojiSize:l}),min:16,max:40}),u&&e.jsx(i,{label:"Star color",value:a.accentColor,onChange:l=>n({accentColor:l})}),p&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedOpacity*100),onChange:l=>n({unselectedOpacity:l/100}),min:10,max:100})]}),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:N}),e.jsx(b,{values:a,onPatch:n})]}),w&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>n({graphicsTrackColor:l})})})]}),o==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(g||p||u)&&e.jsxs(s,{title:`Rating — ${r.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=>n({emojiSize:l}),min:16,max:40}),u&&e.jsx(i,{label:"Star color",value:a.starColor,onChange:l=>n({starColor:l})}),p&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedStarOpacity*100),onChange:l=>n({unselectedStarOpacity:l/100}),min:10,max:100})]}),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:N}),e.jsx(b,{values:a,onPatch:n})]}),w&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>n({graphicsTrackColor:l})})})]}),o==="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(i,{label:"Track",value:a.trackColor,onChange:l=>n({trackColor:l})}),e.jsx(i,{label:"Thumb",value:a.thumbColor,onChange:l=>n({thumbColor:l})}),e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>n({rowLabelWidth:l}),min:120,max:280}),e.jsx(i,{label:"Row band",value:a.rowBandColor,onChange:l=>n({rowBandColor:l})}),e.jsx(t,{label:"Tick badge size (px)",value:a.tickBadgeSize,onChange:l=>n({tickBadgeSize:l}),min:20,max:40})]})}),e.jsx(s,{title:"Anchor hint labels",children:e.jsx(T,{values:a,onPatch:n})}),e.jsx(s,{title:"Tick label items",children:e.jsx(b,{values:a,onPatch:n})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(k,{values:a,onPatch:n,count:11})})]}),o==="FILE_UPLOAD"&&"dropzoneStyle"in a&&e.jsx(s,{title:"Dropzone",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(j,{label:"Dropzone border",value:a.dropzoneStyle,onChange:l=>n({dropzoneStyle:l}),options:[{value:"dashed",label:"Dashed"},{value:"solid",label:"Solid"}]}),e.jsx(i,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Fill color",value:a.dropzoneFillColor,onChange:l=>n({dropzoneFillColor:l})}),e.jsx(t,{label:"Padding (px)",value:a.dropzonePadding,onChange:l=>n({dropzonePadding:l}),min:12,max:48})]})}),o==="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=>n({mediaMaxWidth:l}),min:50,max:100}),e.jsx(d,{label:"Media corner radius",value:a.mediaRadius,onChange:l=>n({mediaRadius:l}),min:0,max:24}),e.jsx(i,{label:"Caption color",value:a.captionColor,onChange:l=>n({captionColor:l})}),e.jsx(t,{label:"Caption size (px)",value:a.captionSize,onChange:l=>n({captionSize:l}),min:10,max:24})]})}),o==="HEATMAP"&&"pinColor"in a&&e.jsx(s,{title:"Heatmap pin",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Pin color",value:a.pinColor,onChange:l=>n({pinColor:l})}),e.jsx(i,{label:"Pin border",value:a.pinBorderColor,onChange:l=>n({pinBorderColor:l})}),e.jsx(d,{label:"Pin size",value:a.pinSize,onChange:l=>n({pinSize:l}),min:8,max:32}),e.jsx(d,{label:"Overlay opacity",value:Math.round(a.overlayOpacity*100),onChange:l=>n({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(h.x*100),"%, ",Math.round(h.y*100),"%"]})]})}),o==="RANK_ORDER"&&"drag"in a&&e.jsx(s,{title:v?"Drag & drop":S?"Dropdown rank":"Rank order",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[v&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.drag.itemBg,onChange:l=>n({drag:{...a.drag,itemBg:l}})}),e.jsx(i,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>n({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>n({drag:{...a.drag,rankBadgeColor:l}})})]}),S&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>n({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"List hover background",value:a.dropdown.itemHoverBg??"#F3F4F6",onChange:l=>n({dropdown:{...a.dropdown,itemHoverBg:l}})}),e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>n({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>n({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{O as TypePanel};
|