@explorer02/cfm-survey-sdk 0.3.5 → 0.3.6
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 +33 -33
- package/dist/cli/index.mjs +33 -33
- package/package.json +1 -1
- package/templates/docs/templates/CsatMatrixScale.tsx +23 -13
- package/templates/docs/templates/Header.tsx +2 -1
- package/templates/docs/templates/SliderMatrixScale.tsx +4 -2
- package/templates/docs/templates/surveyUiScaleUtils.ts +17 -0
- package/templates/preview-harness/preview-bridge.inline.js +58 -5
- package/templates/preview-harness/vite-app/src/PreviewConfigContext.tsx +8 -2
- package/templates/survey-theme.css +12 -0
- package/templates/wizard-dist/assets/{PreviewMock-CD4Euaen.js → PreviewMock-AeUxzA3b.js} +1 -1
- package/templates/wizard-dist/assets/TypePanel-B4UpxOhr.js +1 -0
- package/templates/wizard-dist/assets/{index-DWWkuRUU.js → index-Z7mePXvc.js} +2 -2
- package/templates/wizard-dist/index.html +1 -1
- package/templates/wizard-dist/assets/TypePanel-BjEnhbSM.js +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import type { CsatQuestion, RatingMatrixQuestion, MatrixRowAnswers, ScaleColumn } from '@explorer02/cfm-survey-sdk';
|
|
3
3
|
import { getEmojiForIndex, CsatStarIcons } from './surveyUiIcons';
|
|
4
|
-
import { columnSubmitValue, nonNaScaleColumns } from './surveyUiScaleUtils';
|
|
4
|
+
import { columnSubmitValue, nonNaScaleColumns, anchorLabelPercent } from './surveyUiScaleUtils';
|
|
5
5
|
import { CustomSliderTrack } from './CustomSliderTrack';
|
|
6
6
|
import MatrixDropdown from './MatrixDropdown';
|
|
7
7
|
import {
|
|
@@ -219,9 +219,7 @@ function CsatMatrixGrid({
|
|
|
219
219
|
<div style={{ flex: 1, display: 'flex' }}>
|
|
220
220
|
<div style={{ flex: 1, position: 'relative', height: '24px', ...(isGraphics ? { margin: '0 40px' } : {}) }}>
|
|
221
221
|
{labels!.map((label, i) => {
|
|
222
|
-
const
|
|
223
|
-
const rangePercent = isGraphics ? 1 : (m - 1) / m;
|
|
224
|
-
const percent = n === 1 ? 50 : (startPercent + (i / (n - 1)) * rangePercent) * 100;
|
|
222
|
+
const percent = anchorLabelPercent(i, n, m, isGraphics);
|
|
225
223
|
|
|
226
224
|
return (
|
|
227
225
|
<div key={i} style={{
|
|
@@ -362,9 +360,17 @@ function CsatMatrixGrid({
|
|
|
362
360
|
fontSize: '14px', fontWeight: 500,
|
|
363
361
|
...(isSelected
|
|
364
362
|
? scaleCellSelectedStyle(true)
|
|
365
|
-
: {
|
|
363
|
+
: {
|
|
364
|
+
border: '1px solid #d1d5db',
|
|
365
|
+
backgroundColor: '#fff',
|
|
366
|
+
color: '#111827',
|
|
367
|
+
...unselectedOpacityStyle(),
|
|
368
|
+
}),
|
|
366
369
|
transition: 'all 0.15s',
|
|
367
|
-
} : {
|
|
370
|
+
} : {
|
|
371
|
+
padding: '8px',
|
|
372
|
+
...(isSelected ? {} : unselectedOpacityStyle()),
|
|
373
|
+
}),
|
|
368
374
|
}}
|
|
369
375
|
>
|
|
370
376
|
{(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
|
|
@@ -452,9 +458,7 @@ function CsatMatrixCarousel({
|
|
|
452
458
|
{labels!.map((label, i) => {
|
|
453
459
|
const m = scaleColumns.length;
|
|
454
460
|
const n = labels!.length;
|
|
455
|
-
const
|
|
456
|
-
const rangePercent = isGraphics ? 1 : (m - 1) / m;
|
|
457
|
-
const percent = n === 1 ? 50 : (startPercent + (i / (n - 1)) * rangePercent) * 100;
|
|
461
|
+
const percent = anchorLabelPercent(i, n, m, isGraphics);
|
|
458
462
|
|
|
459
463
|
return (
|
|
460
464
|
<div key={i} style={{
|
|
@@ -523,15 +527,21 @@ function CsatMatrixCarousel({
|
|
|
523
527
|
cursor: 'pointer', borderRadius: '6px', pointerEvents: 'none',
|
|
524
528
|
...(isEmoji ? {
|
|
525
529
|
padding: '6px', transform: isSelected ? 'scale(1.1)' : isHovered ? 'scale(1.25)' : 'scale(1)',
|
|
526
|
-
...(isSelected ? { backgroundColor: 'rgba(252, 231, 243, 0.6)', boxShadow: '0 0 0 2px rgba(226, 0, 116, 0.3)', borderRadius: '50%' } :
|
|
530
|
+
...(isSelected ? { backgroundColor: 'rgba(252, 231, 243, 0.6)', boxShadow: '0 0 0 2px rgba(226, 0, 116, 0.3)', borderRadius: '50%' } : unselectedOpacityStyle()),
|
|
527
531
|
} : isStar ? {
|
|
528
|
-
padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)',
|
|
532
|
+
padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)', color: isSelected ? cellSelectedVar : focusRingVar,
|
|
533
|
+
...(isSelected ? {} : unselectedOpacityStyle()),
|
|
529
534
|
} : isNumbered ? {
|
|
530
535
|
width: '40px', height: '40px', borderRadius: '8px', fontSize: '14px', fontWeight: 500,
|
|
531
536
|
...(isSelected
|
|
532
537
|
? scaleCellSelectedStyle(true)
|
|
533
|
-
: {
|
|
534
|
-
|
|
538
|
+
: {
|
|
539
|
+
border: '1px solid #d1d5db',
|
|
540
|
+
backgroundColor: '#fff',
|
|
541
|
+
color: '#111827',
|
|
542
|
+
...unselectedOpacityStyle(),
|
|
543
|
+
}),
|
|
544
|
+
} : { padding: '8px', ...(isSelected ? {} : unselectedOpacityStyle()) }),
|
|
535
545
|
}}
|
|
536
546
|
>
|
|
537
547
|
{(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
|
|
@@ -76,11 +76,12 @@ export default function Header({ embedded = false }: HeaderProps) {
|
|
|
76
76
|
{seedCompany}
|
|
77
77
|
</span>
|
|
78
78
|
|
|
79
|
-
{
|
|
79
|
+
{seedCompany ? (
|
|
80
80
|
<span
|
|
81
81
|
data-cfm-company
|
|
82
82
|
className="font-semibold"
|
|
83
83
|
style={{
|
|
84
|
+
display: seedShowCompany && hasLogoFile ? undefined : 'none',
|
|
84
85
|
color: 'var(--cfm-header-company-color, var(--cfm-text))',
|
|
85
86
|
fontSize: 'var(--cfm-header-company-size, 18px)',
|
|
86
87
|
fontWeight: 'var(--cfm-header-company-weight, 600)',
|
|
@@ -81,7 +81,8 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
|
|
|
81
81
|
display: 'flex',
|
|
82
82
|
justifyContent: 'space-between',
|
|
83
83
|
margin: '0 16px',
|
|
84
|
-
marginBottom: '
|
|
84
|
+
marginBottom: tickValues.length > 0 ? '24px' : '8px',
|
|
85
|
+
minHeight: '20px',
|
|
85
86
|
fontSize: '14px',
|
|
86
87
|
fontWeight: 500,
|
|
87
88
|
}}
|
|
@@ -100,10 +101,11 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
|
|
|
100
101
|
style={{
|
|
101
102
|
position: 'relative',
|
|
102
103
|
margin: '0 16px',
|
|
104
|
+
marginTop: labels && labels.length > 0 ? '4px' : '0',
|
|
103
105
|
marginBottom: '8px',
|
|
104
106
|
fontSize: '14px',
|
|
105
107
|
fontWeight: 400,
|
|
106
|
-
height: '
|
|
108
|
+
height: '32px',
|
|
107
109
|
...sliderTickLabelStyle(),
|
|
108
110
|
}}
|
|
109
111
|
>
|
|
@@ -96,3 +96,20 @@ export function columnAccentColor(column: { id: string; label: string }): string
|
|
|
96
96
|
}
|
|
97
97
|
return undefined;
|
|
98
98
|
}
|
|
99
|
+
|
|
100
|
+
/** Column-center anchor label positioning (m = option columns, n = anchor labels). */
|
|
101
|
+
export function anchorLabelPercent(
|
|
102
|
+
index: number,
|
|
103
|
+
labelCount: number,
|
|
104
|
+
columnCount: number,
|
|
105
|
+
isGraphics = false,
|
|
106
|
+
): number {
|
|
107
|
+
const m = columnCount;
|
|
108
|
+
const n = labelCount;
|
|
109
|
+
if (isGraphics) {
|
|
110
|
+
return n === 1 ? 0 : (index / (n - 1)) * 100;
|
|
111
|
+
}
|
|
112
|
+
const startPercent = 0.5 / m;
|
|
113
|
+
const rangePercent = (m - 1) / m;
|
|
114
|
+
return n === 1 ? 50 : (startPercent + (index / (n - 1)) * rangePercent) * 100;
|
|
115
|
+
}
|
|
@@ -76,6 +76,35 @@
|
|
|
76
76
|
});
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
+
function ensureCompanySpan() {
|
|
80
|
+
var brand = document.querySelector('.cfm-header-brand');
|
|
81
|
+
if (!brand) return null;
|
|
82
|
+
var el = brand.querySelector('[data-cfm-company]');
|
|
83
|
+
if (el) return el;
|
|
84
|
+
el = document.createElement('span');
|
|
85
|
+
el.setAttribute('data-cfm-company', '');
|
|
86
|
+
el.className = 'font-semibold';
|
|
87
|
+
el.style.color = 'var(--cfm-header-company-color, var(--cfm-text))';
|
|
88
|
+
el.style.fontSize = 'var(--cfm-header-company-size, 18px)';
|
|
89
|
+
el.style.fontWeight = 'var(--cfm-header-company-weight, 600)';
|
|
90
|
+
var logo = brand.querySelector('[data-cfm-logo]');
|
|
91
|
+
if (logo && logo.parentNode === brand) {
|
|
92
|
+
if (logo.nextSibling) brand.insertBefore(el, logo.nextSibling);
|
|
93
|
+
else brand.appendChild(el);
|
|
94
|
+
} else {
|
|
95
|
+
brand.appendChild(el);
|
|
96
|
+
}
|
|
97
|
+
return el;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
function companyNameVisible() {
|
|
101
|
+
var root = document.documentElement;
|
|
102
|
+
var attr = root.getAttribute('data-cfm-show-company-name');
|
|
103
|
+
if (attr === '0') return false;
|
|
104
|
+
if (attr === '1') return true;
|
|
105
|
+
return readVar('--cfm-header-show-company', '1') !== '0';
|
|
106
|
+
}
|
|
107
|
+
|
|
79
108
|
function applyThemeSideEffects() {
|
|
80
109
|
applyNumberBadgeColors();
|
|
81
110
|
applyDropzoneStyle();
|
|
@@ -105,15 +134,23 @@
|
|
|
105
134
|
});
|
|
106
135
|
document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
|
|
107
136
|
if (patch.logoUrl) {
|
|
108
|
-
|
|
137
|
+
var show = companyNameVisible() && el.textContent;
|
|
138
|
+
el.style.display = show ? '' : 'none';
|
|
109
139
|
}
|
|
110
140
|
});
|
|
111
141
|
}
|
|
112
142
|
if (patch.companyName !== undefined) {
|
|
113
143
|
var name = patch.companyName || '';
|
|
144
|
+
if (name && document.querySelectorAll('[data-cfm-company]').length === 0) {
|
|
145
|
+
ensureCompanySpan();
|
|
146
|
+
}
|
|
114
147
|
document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
|
|
115
148
|
el.textContent = name;
|
|
116
|
-
|
|
149
|
+
var logoImg = document.querySelector('[data-cfm-logo]');
|
|
150
|
+
var logoVisible =
|
|
151
|
+
logoImg && logoImg.style.display !== 'none' && logoImg.getAttribute('src');
|
|
152
|
+
var show = name && logoVisible && companyNameVisible();
|
|
153
|
+
el.style.display = show ? '' : 'none';
|
|
117
154
|
});
|
|
118
155
|
document.querySelectorAll('[data-cfm-logo-text]').forEach(function (el) {
|
|
119
156
|
var logoImg = document.querySelector('[data-cfm-logo]');
|
|
@@ -174,7 +211,17 @@
|
|
|
174
211
|
if (patch.layoutFlags) {
|
|
175
212
|
var flags = patch.layoutFlags;
|
|
176
213
|
if (flags.showCompanyName !== undefined) {
|
|
177
|
-
|
|
214
|
+
document.documentElement.setAttribute(
|
|
215
|
+
'data-cfm-show-company-name',
|
|
216
|
+
flags.showCompanyName ? '1' : '0',
|
|
217
|
+
);
|
|
218
|
+
document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
|
|
219
|
+
var logoImg = document.querySelector('[data-cfm-logo]');
|
|
220
|
+
var logoVisible =
|
|
221
|
+
logoImg && logoImg.style.display !== 'none' && logoImg.getAttribute('src');
|
|
222
|
+
var show = flags.showCompanyName && el.textContent && logoVisible;
|
|
223
|
+
el.style.display = show ? '' : 'none';
|
|
224
|
+
});
|
|
178
225
|
}
|
|
179
226
|
if (flags.showHeader !== undefined) {
|
|
180
227
|
setDisplay('.cfm-header, header.cfm-header', flags.showHeader);
|
|
@@ -195,10 +242,16 @@
|
|
|
195
242
|
setDisplay('[data-cfm-btn-back]', flags.showBackButton);
|
|
196
243
|
}
|
|
197
244
|
if (flags.showQuestionNumbers !== undefined) {
|
|
198
|
-
|
|
245
|
+
document.documentElement.setAttribute(
|
|
246
|
+
'data-cfm-show-question-numbers',
|
|
247
|
+
flags.showQuestionNumbers ? '1' : '0',
|
|
248
|
+
);
|
|
199
249
|
}
|
|
200
250
|
if (flags.showRequiredAsterisk !== undefined) {
|
|
201
|
-
|
|
251
|
+
document.documentElement.setAttribute(
|
|
252
|
+
'data-cfm-show-required',
|
|
253
|
+
flags.showRequiredAsterisk ? '1' : '0',
|
|
254
|
+
);
|
|
202
255
|
}
|
|
203
256
|
if (flags.showFooterLogo !== undefined) {
|
|
204
257
|
setDisplay('[data-cfm-footer-logo]', flags.showFooterLogo);
|
|
@@ -71,7 +71,14 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
|
|
|
71
71
|
if (!data?.type) return;
|
|
72
72
|
if (data.type !== PREVIEW_BRIDGE_SNAPSHOT && data.type !== PREVIEW_BRIDGE_DELTA) return;
|
|
73
73
|
if (data.contentPatch?.previewState) {
|
|
74
|
-
setPreviewState((prev) =>
|
|
74
|
+
setPreviewState((prev) => {
|
|
75
|
+
const next = { ...prev, ...data.contentPatch.previewState };
|
|
76
|
+
const changed = (Object.keys(data.contentPatch.previewState) as (keyof PreviewStatePatch)[]).some(
|
|
77
|
+
(key) => prev[key] !== next[key],
|
|
78
|
+
);
|
|
79
|
+
if (changed) setConfigRevision((r) => r + 1);
|
|
80
|
+
return next;
|
|
81
|
+
});
|
|
75
82
|
}
|
|
76
83
|
if (data.contentPatch?.domAttributes) {
|
|
77
84
|
const root = document.documentElement;
|
|
@@ -85,7 +92,6 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
|
|
|
85
92
|
root.style.setProperty(key, value as string);
|
|
86
93
|
}
|
|
87
94
|
}
|
|
88
|
-
setConfigRevision((r) => r + 1);
|
|
89
95
|
applyThemeSideEffects();
|
|
90
96
|
};
|
|
91
97
|
|
|
@@ -287,6 +287,18 @@ body {
|
|
|
287
287
|
border-style: solid;
|
|
288
288
|
}
|
|
289
289
|
|
|
290
|
+
html[data-cfm-show-company-name='0'] [data-cfm-company] {
|
|
291
|
+
display: none !important;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
html[data-cfm-show-question-numbers='0'] [data-cfm-question-number] {
|
|
295
|
+
display: none !important;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
html[data-cfm-show-required='0'] [data-cfm-required] {
|
|
299
|
+
display: none !important;
|
|
300
|
+
}
|
|
301
|
+
|
|
290
302
|
.cfm-live-edit * {
|
|
291
303
|
transition: none !important;
|
|
292
304
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{u as x,j as e}from"./index-
|
|
1
|
+
import{u as x,j as e}from"./index-Z7mePXvc.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 p,j as e,T as R,S as b,R as d,C as i,N as t,a as z,M as A}from"./index-Z7mePXvc.js";import"./vendor-BwkXDkd3.js";function j({values:n,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Label text color",value:n.columnLabelColor,onChange:a=>r({columnLabelColor:a})}),e.jsx(i,{label:"Label background",value:n.columnLabelBgColor,onChange:a=>r({columnLabelBgColor:a})})]})}function N({values:n,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:n.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:n.hintMaxText,onChange:a=>r({hintMaxText:a.target.value})})]}),e.jsx(i,{label:"Hint text color",value:n.hintLabelColor,onChange:a=>r({hintLabelColor:a})}),e.jsx(i,{label:"Hint label background",value:n.hintLabelBgColor,onChange:a=>r({hintLabelBgColor:a})})]})}function T({values:n,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(b,{label:"Number label style",value:n.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"}]}),n.numberLabelMode==="monochrome"&&e.jsx(i,{label:"Monochrome color",value:n.monochromeNumberColor,onChange:c=>r({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,h)=>e.jsx(i,{label:`#${h}`,value:n.individualNumberColors[h]??"#9CA3AF",onChange:C=>{const x=[...n.individualNumberColors];x[h]=C,r({individualNumberColors:x})}},h))})]})}function s({title:n,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:n}),r]})}function O({type:n,activeFormat:r}){const a=p(l=>l.config.questionTypes[n]),c=p(l=>l.updateQuestionType),h=p(l=>l.previewMultiStatementByType),C=p(l=>l.setPreviewMultiStatementForType),x=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),k=A.includes(n),y=!!h[n],u=r.includes("star"),g=r.includes("emoji"),M=r.includes("numbered"),v=r.includes("drag"),w=r.includes("dropdown"),f=r.includes("radio"),B=r==="CFM_bipolar",S=r.includes("graphics"),m=g||u||M||f,L=a.optionStyle??a.cardStyle??"outlined",P=a.buttonStyle??"numbered";return e.jsxs("div",{className:"space-y-4",children:[k&&e.jsx(R,{label:"Preview multiple statements",checked:y,onChange:l=>C(n,l)}),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(i,{label:"Hover border",value:a.hoverBorderColor,onChange:l=>o({hoverBorderColor:l})}),L==="filled"&&e.jsx(i,{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(i,{label:"Border color",value:a.borderColor,onChange:l=>o({borderColor:l})}),e.jsx(i,{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(N,{values:a,onPatch:o})}),P==="numbered"&&e.jsx(s,{title:"Number labels",children:e.jsx(T,{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(i,{label:"Track bar",value:a.trackBarColor,onChange:l=>o({trackBarColor:l})}),e.jsx(i,{label:"Track highlight",value:a.trackHighlightColor,onChange:l=>o({trackHighlightColor: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}),B&&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||m||u)&&e.jsxs(s,{title:`${z.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=>o({emojiSize:l}),min:16,max:40}),u&&e.jsx(i,{label:"Star color",value:a.accentColor,onChange:l=>o({accentColor:l})}),m&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedOpacity*100),onChange:l=>o({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. Column labels appear above stars in the star format preview."})]}),e.jsxs(s,{title:"Label items",children:[e.jsx("p",{className:"text-xs text-slate-500",children:"Applies to anchor label pills where the preview already shows them — not numeric column headers."}),e.jsx(j,{values:a,onPatch:o})]}),S&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>o({graphicsTrackColor:l})})})]}),n==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(g||m||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=>o({emojiSize:l}),min:16,max:40}),u&&e.jsx(i,{label:"Star color",value:a.starColor,onChange:l=>o({starColor:l})}),m&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedStarOpacity*100),onChange:l=>o({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:"Applies to anchor label pills where the preview already shows them — not numeric column headers."}),e.jsx(j,{values:a,onPatch:o})]}),S&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{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(i,{label:"Track",value:a.trackColor,onChange:l=>o({trackColor:l})}),e.jsx(i,{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(i,{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(N,{values:a,onPatch:o})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(T,{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(i,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>o({borderColor:l})}),e.jsx(i,{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(i,{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(i,{label:"Pin color",value:a.pinColor,onChange:l=>o({pinColor:l})}),e.jsx(i,{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(x.x*100),"%, ",Math.round(x.y*100),"%"]})]})}),n==="RANK_ORDER"&&"drag"in a&&e.jsx(s,{title:v?"Drag & drop":w?"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=>o({drag:{...a.drag,itemBg:l}})}),e.jsx(i,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>o({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>o({drag:{...a.drag,rankBadgeColor:l}})})]}),w&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>o({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"List hover background",value:a.dropdown.itemHoverBg??"#F3F4F6",onChange:l=>o({dropdown:{...a.dropdown,itemHoverBg:l}})}),e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>o({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>o({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{O as TypePanel};
|