@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.
@@ -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
- return fileName?.trim() ? fileName : null;
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
- ensureCompanySpan();
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
- updateCompanyVisibility(name);
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
- document.documentElement.setAttribute(
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: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
215
- scaleAnchorLabels: [...MATRIX_ANCHOR_LABELS],
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: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
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: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
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: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
240
- scaleAnchorLabels: [MATRIX_ANCHOR_LABELS[0], MATRIX_ANCHOR_LABELS[4]],
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: LIKERT_COLUMNS,
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: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
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: LIKERT_COLUMNS,
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: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
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: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
303
- scaleAnchorLabels: [...MATRIX_ANCHOR_LABELS],
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
- htmlEl.style.display = htmlEl.textContent?.trim() ? '' : 'none';
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
- (el as HTMLElement).style.display = name ? '' : 'none';
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: 24px;
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-BDaoM71z.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};
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};