react-id-card-generator 1.1.0 → 1.1.1

package/dist/cjs/components/IDCardDesigner.js

@@ -16,6 +16,16 @@ const defaultFieldTypes = [
     { type: 'qrcode', label: 'QR Code', icon: '📱' },
     { type: 'table', label: 'Table', icon: '▦' },
 ];
+const getPhotoRadiusSliderValue = (borderRadius) => {
+    if (typeof borderRadius !== 'string') {
+        return 0;
+    }
+    const parsed = Number.parseFloat(borderRadius);
+    if (!Number.isFinite(parsed)) {
+        return 0;
+    }
+    return Math.max(0, Math.min(200, Math.round(parsed)));
+};
 /**
  * IDCardDesigner - Visual drag-and-drop template builder
  *
@@ -383,11 +393,15 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
     }, [selectedFieldId, removeField]);
     // Keyboard shortcuts
     react.useEffect(() => {
+        const handleLineHeightInputFocus = () => {
+        };
+        const handleLineHeightInputBlur = () => {
+        };
         // Listen for focus/blur on line height input
         const lhInput = document.getElementById('line-height-input');
         if (lhInput) {
-            lhInput.addEventListener('focus', () => { });
-            lhInput.addEventListener('blur', () => { });
+            lhInput.addEventListener('focus', handleLineHeightInputFocus);
+            lhInput.addEventListener('blur', handleLineHeightInputBlur);
         }
         const handleKeyDown = (e) => {
             if (selectedFieldId) {
@@ -437,7 +451,13 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
             }
         };
         document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            if (lhInput) {
+                lhInput.removeEventListener('focus', handleLineHeightInputFocus);
+                lhInput.removeEventListener('blur', handleLineHeightInputBlur);
+            }
+        };
     }, [selectedFieldId, handleDeleteField, template.fields, template.cardSize, updateField]);
     return (jsxRuntime.jsxs("div", { className: `idcard-designer ${className}`, style: style, children: [jsxRuntime.jsxs("div", { className: "designer-header", children: [jsxRuntime.jsx("input", { type: "text", value: templateName, onChange: (e) => setTemplateName(e.target.value), className: "template-name-input", placeholder: "Template Name" }), jsxRuntime.jsxs("div", { className: "header-actions", children: [onCancel && (jsxRuntime.jsx("button", { type: "button", onClick: onCancel, className: "btn btn-secondary", children: "Cancel" })), jsxRuntime.jsx("button", { type: "button", onClick: handleSave, className: "btn btn-primary", disabled: !isValid, children: "Save Template" })] })] }), jsxRuntime.jsxs("div", { className: "designer-body", children: [jsxRuntime.jsxs("div", { className: "designer-sidebar left-sidebar", children: [jsxRuntime.jsx("h3", { children: "Add Fields" }), jsxRuntime.jsx("div", { className: "field-types", children: defaultFieldTypes.map((fieldType) => (jsxRuntime.jsxs("button", { type: "button", onClick: () => handleAddField(fieldType.type), className: "field-type-btn", children: [jsxRuntime.jsx("span", { className: "field-icon", children: fieldType.icon }), jsxRuntime.jsx("span", { className: "field-label", children: fieldType.label })] }, fieldType.type))) }), jsxRuntime.jsx("h3", { children: "Card Settings" }), jsxRuntime.jsxs("div", { className: "card-settings", children: [jsxRuntime.jsxs("div", { className: "setting-group", children: [jsxRuntime.jsx("label", { children: "Orientation" }), jsxRuntime.jsxs("div", { className: "btn-group", children: [jsxRuntime.jsx("button", { type: "button", className: `btn ${template.orientation === 'landscape' ? 'active' : ''}`, onClick: () => handleOrientationChange('landscape'), children: "Landscape" }), jsxRuntime.jsx("button", { type: "button", className: `btn ${template.orientation === 'portrait' ? 'active' : ''}`, onClick: () => handleOrientationChange('portrait'), children: "Portrait" })] })] }), jsxRuntime.jsxs("div", { className: "setting-group", children: [jsxRuntime.jsx("label", { children: "Card Sides" }), jsxRuntime.jsxs("div", { className: "btn-group", children: [jsxRuntime.jsx("button", { type: "button", className: `btn ${template.sides === 'single' ? 'active' : ''}`, onClick: () => handleSidesChange('single'), children: "Single" }), jsxRuntime.jsx("button", { type: "button", className: `btn ${template.sides === 'double' ? 'active' : ''}`, onClick: () => handleSidesChange('double'), children: "Double" })] })] }), jsxRuntime.jsxs("div", { className: "setting-group", children: [jsxRuntime.jsx("label", { children: "Card Size (px)" }), jsxRuntime.jsxs("div", { className: "size-inputs", children: [jsxRuntime.jsx("input", { type: "number", value: template.cardSize.width, onChange: (e) => setCardSize({ ...template.cardSize, width: Number(e.target.value) }), placeholder: "Width" }), jsxRuntime.jsx("span", { children: "\u00D7" }), jsxRuntime.jsx("input", { type: "number", value: template.cardSize.height, onChange: (e) => setCardSize({ ...template.cardSize, height: Number(e.target.value) }), placeholder: "Height" })] })] })] }), jsxRuntime.jsx("h3", { children: "Background" }), jsxRuntime.jsxs("div", { className: "background-upload", children: [jsxRuntime.jsx("input", { type: "file", accept: "image/*", onChange: handleBackgroundUpload, id: "bg-upload", className: "file-input" }), jsxRuntime.jsxs("label", { htmlFor: "bg-upload", className: "btn btn-outline", children: ["Upload ", activeSide, " Background"] }), template.backgrounds[activeSide] && (jsxRuntime.jsx("button", { type: "button", className: "btn btn-danger btn-sm", onClick: () => setBackground(activeSide, ''), children: "Remove" }))] })] }), jsxRuntime.jsxs("div", { className: "designer-preview", children: [jsxRuntime.jsxs("div", { className: "side-tabs", children: [jsxRuntime.jsx("button", { type: "button", className: `tab ${activeSide === 'front' ? 'active' : ''}`, onClick: () => setActiveSide('front'), children: "Front" }), template.sides === 'double' && (jsxRuntime.jsx("button", { type: "button", className: `tab ${activeSide === 'back' ? 'active' : ''}`, onClick: () => setActiveSide('back'), children: "Back" })), jsxRuntime.jsxs("label", { className: "grid-toggle", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showGrid, onChange: (e) => setShowGrid(e.target.checked) }), "Show Grid"] })] }), jsxRuntime.jsx("div", { ref: previewContainerRef, className: "preview-wrapper", onMouseDown: handleMouseDown, children: jsxRuntime.jsx(IDCardPreview.IDCardPreview, { template: template, data: sampleData, side: activeSide, showGrid: showGrid, onFieldSelect: handleFieldSelect, selectedFieldId: selectedFieldId, editable: true }) }), jsxRuntime.jsxs("div", { className: "fields-list", children: [jsxRuntime.jsxs("h4", { children: ["Fields on ", activeSide, " side:"] }), template.fields
                                         .filter((f) => f.side === activeSide)
@@ -489,7 +509,7 @@ const IDCardDesigner = ({ initialTemplate, onSave, onCancel, className = '', sty
                                                                     ? [...currentFields, field.fieldKey]
                                                                     : currentFields.filter(f => f !== field.fieldKey);
                                                                 handleFieldPropertyUpdate('qrFields', newFields);
-                                                            }, style: { marginRight: '6px' } }), field.label || field.fieldKey] }, field.fieldKey))) })] })), selectedField.type !== 'text' && selectedField.type !== 'table' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h4", { children: "Style" }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Font Size" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.style?.fontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.fontSize', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Font Weight" }), jsxRuntime.jsxs("select", { value: selectedField.style?.fontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.fontWeight', e.target.value), children: [jsxRuntime.jsx("option", { value: "normal", children: "Normal" }), jsxRuntime.jsx("option", { value: "bold", children: "Bold" }), jsxRuntime.jsx("option", { value: "100", children: "100" }), jsxRuntime.jsx("option", { value: "200", children: "200" }), jsxRuntime.jsx("option", { value: "300", children: "300" }), jsxRuntime.jsx("option", { value: "400", children: "400" }), jsxRuntime.jsx("option", { value: "500", children: "500" }), jsxRuntime.jsx("option", { value: "600", children: "600" }), jsxRuntime.jsx("option", { value: "700", children: "700" }), jsxRuntime.jsx("option", { value: "800", children: "800" }), jsxRuntime.jsx("option", { value: "900", children: "900" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Color" }), jsxRuntime.jsx("input", { type: "color", value: selectedField.style?.color || '#000000', onChange: (e) => handleFieldPropertyUpdate('style.color', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.textAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "left", children: "Left" }), jsxRuntime.jsx("option", { value: "center", children: "Center" }), jsxRuntime.jsx("option", { value: "right", children: "Right" })] })] }), selectedField.type === 'label' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Transform" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelTextTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.labelTextTransform', e.target.value), children: [jsxRuntime.jsx("option", { value: "none", children: "None" }), jsxRuntime.jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsxRuntime.jsx("option", { value: "lowercase", children: "lowercase" }), jsxRuntime.jsx("option", { value: "capitalize", children: "Capitalize" })] })] }))] }), selectedField.type === 'qrcode' ? (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Background Color" }), jsxRuntime.jsx("div", { style: {
+                                                            }, style: { marginRight: '6px' } }), field.label || field.fieldKey] }, field.fieldKey))) })] })), selectedField.type === 'image' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { htmlFor: `photo-radius-input-${selectedField.id}`, children: "Photo Radius" }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [jsxRuntime.jsx("input", { type: "range", min: "0", max: "200", value: getPhotoRadiusSliderValue(selectedField.style?.borderRadius), onChange: (e) => handleFieldPropertyUpdate('style.borderRadius', `${e.target.value}px`), "aria-label": "Photo radius slider", style: { flex: 1 } }), jsxRuntime.jsx("input", { id: `photo-radius-input-${selectedField.id}`, type: "text", value: selectedField.style?.borderRadius || '0px', onChange: (e) => handleFieldPropertyUpdate('style.borderRadius', e.target.value.trim() || '0px'), style: { width: 72 } })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 8, marginTop: 8 }, children: [jsxRuntime.jsx("button", { type: "button", className: "btn btn-outline btn-sm", onClick: () => handleFieldPropertyUpdate('style.borderRadius', '0px'), children: "Square" }), jsxRuntime.jsx("button", { type: "button", className: "btn btn-outline btn-sm", onClick: () => handleFieldPropertyUpdate('style.borderRadius', '50%'), children: "Circle" })] })] })), selectedField.type !== 'text' && selectedField.type !== 'table' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h4", { children: "Style" }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Font Size" }), jsxRuntime.jsx("input", { type: "text", value: selectedField.style?.fontSize || '12px', onChange: (e) => handleFieldPropertyUpdate('style.fontSize', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Font Weight" }), jsxRuntime.jsxs("select", { value: selectedField.style?.fontWeight || 'normal', onChange: (e) => handleFieldPropertyUpdate('style.fontWeight', e.target.value), children: [jsxRuntime.jsx("option", { value: "normal", children: "Normal" }), jsxRuntime.jsx("option", { value: "bold", children: "Bold" }), jsxRuntime.jsx("option", { value: "100", children: "100" }), jsxRuntime.jsx("option", { value: "200", children: "200" }), jsxRuntime.jsx("option", { value: "300", children: "300" }), jsxRuntime.jsx("option", { value: "400", children: "400" }), jsxRuntime.jsx("option", { value: "500", children: "500" }), jsxRuntime.jsx("option", { value: "600", children: "600" }), jsxRuntime.jsx("option", { value: "700", children: "700" }), jsxRuntime.jsx("option", { value: "800", children: "800" }), jsxRuntime.jsx("option", { value: "900", children: "900" })] })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Color" }), jsxRuntime.jsx("input", { type: "color", value: selectedField.style?.color || '#000000', onChange: (e) => handleFieldPropertyUpdate('style.color', e.target.value) })] }), jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Align" }), jsxRuntime.jsxs("select", { value: selectedField.style?.textAlign || 'left', onChange: (e) => handleFieldPropertyUpdate('style.textAlign', e.target.value), children: [jsxRuntime.jsx("option", { value: "left", children: "Left" }), jsxRuntime.jsx("option", { value: "center", children: "Center" }), jsxRuntime.jsx("option", { value: "right", children: "Right" })] })] }), selectedField.type === 'label' && (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Text Transform" }), jsxRuntime.jsxs("select", { value: selectedField.style?.labelTextTransform || 'none', onChange: (e) => handleFieldPropertyUpdate('style.labelTextTransform', e.target.value), children: [jsxRuntime.jsx("option", { value: "none", children: "None" }), jsxRuntime.jsx("option", { value: "uppercase", children: "UPPERCASE" }), jsxRuntime.jsx("option", { value: "lowercase", children: "lowercase" }), jsxRuntime.jsx("option", { value: "capitalize", children: "Capitalize" })] })] }))] }), selectedField.type === 'qrcode' ? (jsxRuntime.jsxs("div", { className: "property-group", children: [jsxRuntime.jsx("label", { children: "Background Color" }), jsxRuntime.jsx("div", { style: {
                                                     padding: '8px 10px',
                                                     border: '1px solid #ddd',
                                                     borderRadius: '4px',