react-id-card-generator 1.0.0

package/dist/esm/components/IDCardGenerator.js

@@ -0,0 +1,134 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { positionToStyle, fieldStyleToCSS } from '../utils/styleUtils.js';
+import { generateQrCodeFromFields } from '../core/qrUtils.js';
+
+/**
+ * IDCardGenerator - Renders a completed ID card
+ *
+ * Takes a template and user data, then renders the filled card.
+ * This is the component used to display actual ID cards for individual users.
+ *
+ * Example:
+ * ```tsx
+ * <IDCardGenerator
+ *   template={myTemplate}
+ *   data={{ name: 'John Doe', photo: '...' }}
+ *   side="front"
+ * />
+ * ```
+ */
+const IDCardGenerator = ({ template, data, side = 'front', scale = 1, className = '', style = {}, onFieldClick, editable = false, }) => {
+    // Get fields for the current side only
+    const fieldsToRender = useMemo(() => {
+        return template.fields.filter((field) => field.side === side);
+    }, [template.fields, side]);
+    // Get background for current side
+    const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;
+    // Render a single field
+    const renderField = (field) => {
+        const posStyle = positionToStyle(field.position);
+        const fieldStyle = fieldStyleToCSS(field.style);
+        const combinedStyle = {
+            ...posStyle,
+            ...fieldStyle,
+            zIndex: field.zIndex || 1,
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            cursor: editable ? 'pointer' : 'default',
+        };
+        const handleClick = (e) => {
+            if (onFieldClick) {
+                e.stopPropagation();
+                onFieldClick(field);
+            }
+        };
+        const value = getFieldValue(field, data);
+        switch (field.type) {
+            case 'text':
+                return (jsxs("div", { id: field.id, style: combinedStyle, onClick: handleClick, className: "idcard-field idcard-field-text", children: [field.label && (jsx("span", { className: "idcard-field-label", style: { fontSize: '0.8em', display: 'block' }, children: field.label })), jsx("span", { className: "idcard-field-value", children: String(value || field.placeholder || '') })] }, field.id));
+            case 'label':
+                return (jsx("div", { id: field.id, style: combinedStyle, onClick: handleClick, className: "idcard-field idcard-field-label", children: field.staticText || field.label || '' }, field.id));
+            case 'image':
+                return (jsx("div", { id: field.id, style: {
+                        ...combinedStyle,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, onClick: handleClick, className: "idcard-field idcard-field-image", children: value ? (jsx("img", { src: String(value), alt: field.label || 'Image', style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                            objectPosition: 'center top',
+                        } })) : (jsx("div", { style: {
+                            width: '100%',
+                            height: '100%',
+                            backgroundColor: '#e0e0e0',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: '10px',
+                            color: '#666',
+                        }, children: field.label || 'Photo' })) }, field.id));
+            case 'qrcode':
+                const qrDataUrl = field.qrFields
+                    ? generateQrCodeFromFields(data, field.qrFields, Math.min(field.position.width, field.position.height) * 2)
+                    : '';
+                return (jsx("div", { id: field.id, style: {
+                        ...combinedStyle,
+                        backgroundColor: '#fff',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, onClick: handleClick, className: "idcard-field idcard-field-qrcode", children: qrDataUrl ? (jsx("img", { src: qrDataUrl, alt: "QR Code", style: { width: '100%', height: '100%', objectFit: 'contain' } })) : (jsx("div", { style: {
+                            width: '100%',
+                            height: '100%',
+                            backgroundColor: '#f0f0f0',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: '10px',
+                            color: '#666',
+                        }, children: "QR Code" })) }, field.id));
+            default:
+                return null;
+        }
+    };
+    // Card container style
+    const cardStyle = {
+        width: template.cardSize.width * scale,
+        height: template.cardSize.height * scale,
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: '#fff',
+        transform: `scale(${scale})`,
+        transformOrigin: 'top left',
+        ...style,
+    };
+    return (jsxs("div", { id: side === 'front' ? 'idcardfront' : 'idcardback', className: `idcard-container idcard-${side} ${className}`, style: cardStyle, children: [backgroundImage && (jsx("img", { src: backgroundImage, alt: `${side} background`, style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    zIndex: 0,
+                } })), fieldsToRender.map(renderField)] }));
+};
+/**
+ * Get field value from data based on field configuration
+ */
+function getFieldValue(field, data) {
+    if (field.type === 'label') {
+        return field.staticText;
+    }
+    const value = data[field.fieldKey];
+    // Handle array values (like department)
+    if (Array.isArray(value)) {
+        return value[0];
+    }
+    return value;
+}
+
+export { IDCardGenerator, IDCardGenerator as default };
+//# sourceMappingURL=IDCardGenerator.js.map

package/dist/esm/components/IDCardGenerator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDCardGenerator.js","sources":["../../../src/components/IDCardGenerator.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\nimport type { IDCardGeneratorProps, FieldMapping, IDCardData, IDCardTemplate } from '../types';\r\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\r\nimport { generateQrCodeFromFields } from '../core/qrUtils';\r\n\r\n/**\r\n * IDCardGenerator - Renders a completed ID card\r\n * \r\n * Takes a template and user data, then renders the filled card.\r\n * This is the component used to display actual ID cards for individual users.\r\n * \r\n * Example:\r\n * ```tsx\r\n * <IDCardGenerator \r\n *   template={myTemplate}\r\n *   data={{ name: 'John Doe', photo: '...' }}\r\n *   side=\"front\"\r\n * />\r\n * ```\r\n */\r\nexport const IDCardGenerator: React.FC<IDCardGeneratorProps> = ({\r\n  template,\r\n  data,\r\n  side = 'front',\r\n  scale = 1,\r\n  className = '',\r\n  style = {},\r\n  onFieldClick,\r\n  editable = false,\r\n}: IDCardGeneratorProps) => {\r\n  // Get fields for the current side only\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    const fieldStyle = fieldStyleToCSS(field.style);\r\n    const combinedStyle: React.CSSProperties = {\r\n      ...posStyle,\r\n      ...fieldStyle,\r\n      zIndex: field.zIndex || 1,\r\n      boxSizing: 'border-box',\r\n      overflow: 'hidden',\r\n      cursor: editable ? 'pointer' : 'default',\r\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      if (onFieldClick) {\r\n        e.stopPropagation();\r\n        onFieldClick(field);\r\n      }\r\n    };\r\n\r\n    const value = getFieldValue(field, data);\r\n\r\n    switch (field.type) {\r\n      case 'text':\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n            className=\"idcard-field idcard-field-text\"\r\n          >\r\n            {field.label && (\r\n              <span className=\"idcard-field-label\" style={{ fontSize: '0.8em', display: 'block' }}>\r\n                {field.label}\r\n              </span>\r\n            )}\r\n            <span className=\"idcard-field-value\">{String(value || field.placeholder || '')}</span>\r\n          </div>\r\n        );\r\n\r\n      case 'label':\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n            className=\"idcard-field idcard-field-label\"\r\n          >\r\n            {field.staticText || field.label || ''}\r\n          </div>\r\n        );\r\n\r\n      case 'image':\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={{\r\n              ...combinedStyle,\r\n              display: 'flex',\r\n              alignItems: 'center',\r\n              justifyContent: 'center',\r\n            }}\r\n            onClick={handleClick}\r\n            className=\"idcard-field idcard-field-image\"\r\n          >\r\n            {value ? (\r\n              <img\r\n                src={String(value)}\r\n                alt={field.label || 'Image'}\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  objectFit: 'cover',\r\n                  objectPosition: 'center top',\r\n                }}\r\n              />\r\n            ) : (\r\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#e0e0e0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                {field.label || 'Photo'}\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\r\n      case 'qrcode':\r\n        const qrDataUrl = field.qrFields\r\n          ? generateQrCodeFromFields(data, field.qrFields, Math.min(field.position.width, field.position.height) * 2)\r\n          : '';\r\n\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={{\r\n              ...combinedStyle,\r\n              backgroundColor: '#fff',\r\n              display: 'flex',\r\n              alignItems: 'center',\r\n              justifyContent: 'center',\r\n            }}\r\n            onClick={handleClick}\r\n            className=\"idcard-field idcard-field-qrcode\"\r\n          >\r\n            {qrDataUrl ? (\r\n              <img\r\n                src={qrDataUrl}\r\n                alt=\"QR Code\"\r\n                style={{ width: '100%', height: '100%', objectFit: 'contain' }}\r\n              />\r\n            ) : (\r\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#f0f0f0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                QR Code\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\r\n      default:\r\n        return null;\r\n    }\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: template.cardSize.width * scale,\r\n    height: template.cardSize.height * scale,\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: '#fff',\r\n    transform: `scale(${scale})`,\r\n    transformOrigin: 'top left',\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <div\r\n      id={side === 'front' ? 'idcardfront' : 'idcardback'}\r\n      className={`idcard-container idcard-${side} ${className}`}\r\n      style={cardStyle}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: '100%',\r\n            height: '100%',\r\n            objectFit: 'cover',\r\n            zIndex: 0,\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n    </div>\r\n  );\r\n};\r\n\r\n/**\r\n * Get field value from data based on field configuration\r\n */\r\nfunction getFieldValue(field: FieldMapping, data: IDCardData): string | number | undefined {\r\n  if (field.type === 'label') {\r\n    return field.staticText;\r\n  }\r\n\r\n  const value = data[field.fieldKey];\r\n\r\n  // Handle array values (like department)\r\n  if (Array.isArray(value)) {\r\n    return value[0];\r\n  }\r\n\r\n  return value as string | number | undefined;\r\n}\r\n\r\nexport default IDCardGenerator;\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/IDCardPreview.js

@@ -0,0 +1,163 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { positionToStyle, fieldStyleToCSS } from '../utils/styleUtils.js';
+import { generateQrCodeFromFields } from '../core/qrUtils.js';
+
+/**
+ * IDCardPreview - Interactive card preview component
+ *
+ * Renders an ID card with:
+ * - Field selection and highlighting
+ * - Resize handles for selected fields
+ * - Grid overlay for alignment
+ * - Dynamic field rendering based on type
+ *
+ * Used inside the designer for visual editing
+ */
+const IDCardPreview = ({ template, data, side, scale = 1, showGrid = false, onFieldSelect, selectedFieldId, editable = true, onFieldUpdate, }) => {
+    // Get only fields that belong to the current side
+    const fieldsToRender = useMemo(() => {
+        return template.fields.filter((field) => field.side === side);
+    }, [template.fields, side]);
+    // Get background for current side
+    const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;
+    // Render resize handles for selected field
+    const renderResizeHandles = (field) => {
+        if (field.id !== selectedFieldId || !editable)
+            return null;
+        const handles = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];
+        const handleStyle = {
+            position: 'absolute',
+            width: '8px',
+            height: '8px',
+            backgroundColor: '#2196F3',
+            border: '1px solid #fff',
+            borderRadius: '2px',
+            zIndex: 1000,
+        };
+        const positions = {
+            n: { top: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'n-resize' },
+            s: { bottom: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 's-resize' },
+            e: { right: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'e-resize' },
+            w: { left: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'w-resize' },
+            ne: { top: '-4px', right: '-4px', cursor: 'ne-resize' },
+            nw: { top: '-4px', left: '-4px', cursor: 'nw-resize' },
+            se: { bottom: '-4px', right: '-4px', cursor: 'se-resize' },
+            sw: { bottom: '-4px', left: '-4px', cursor: 'sw-resize' },
+        };
+        return handles.map((handle) => (jsx("div", { className: `resize-handle resize-handle-${handle}`, style: { ...handleStyle, ...positions[handle] }, "data-handle": handle }, handle)));
+    };
+    // Render a single field
+    const renderField = (field) => {
+        const posStyle = positionToStyle(field.position);
+        const fieldStyle = fieldStyleToCSS(field.style);
+        const isSelected = field.id === selectedFieldId;
+        const combinedStyle = {
+            ...posStyle,
+            ...fieldStyle,
+            zIndex: field.zIndex || 1,
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            cursor: editable ? 'move' : 'default',
+            outline: isSelected ? '2px solid #2196F3' : 'none',
+            outlineOffset: '1px',
+        };
+        const handleClick = (e) => {
+            e.stopPropagation();
+            onFieldSelect?.(field);
+        };
+        const value = data[field.fieldKey];
+        const content = (() => {
+            switch (field.type) {
+                case 'text':
+                    return (jsxs(Fragment, { children: [field.label && (jsx("span", { style: { fontSize: '0.75em', display: 'block', opacity: 0.7 }, children: field.label })), jsx("span", { children: String(value || field.placeholder || field.fieldKey) })] }));
+                case 'label':
+                    return jsx("span", { children: field.staticText || field.label || 'Label' });
+                case 'image':
+                    return value ? (jsx("img", { src: String(value), alt: field.label || 'Image', style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                            objectPosition: 'center top',
+                        } })) : (jsxs("div", { style: {
+                            width: '100%',
+                            height: '100%',
+                            backgroundColor: '#e0e0e0',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: '10px',
+                            color: '#666',
+                            flexDirection: 'column',
+                        }, children: [jsx("span", { children: "\uD83D\uDCF7" }), jsx("span", { children: field.label || 'Photo' })] }));
+                case 'qrcode':
+                    const qrDataUrl = field.qrFields
+                        ? generateQrCodeFromFields(data, field.qrFields, 200)
+                        : '';
+                    return qrDataUrl ? (jsx("img", { src: qrDataUrl, alt: "QR Code", style: { width: '100%', height: '100%', objectFit: 'contain' } })) : (jsx("div", { style: {
+                            width: '100%',
+                            height: '100%',
+                            backgroundColor: '#f0f0f0',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: '10px',
+                            color: '#666',
+                            border: '1px dashed #ccc',
+                        }, children: "QR Code" }));
+                default:
+                    return null;
+            }
+        })();
+        return (jsxs("div", { id: `preview-${field.id}`, style: combinedStyle, onClick: handleClick, className: `preview-field preview-field-${field.type} ${isSelected ? 'selected' : ''}`, children: [content, renderResizeHandles(field)] }, field.id));
+    };
+    // Card container style
+    const cardStyle = {
+        width: template.cardSize.width,
+        height: template.cardSize.height,
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: backgroundImage ? 'transparent' : '#f5f5f5',
+        border: '1px solid #ddd',
+        transform: `scale(${scale})`,
+        transformOrigin: 'top left',
+    };
+    // Grid overlay style
+    const gridStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundImage: showGrid
+            ? 'linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)'
+            : 'none',
+        backgroundSize: '10px 10px',
+        pointerEvents: 'none',
+        zIndex: 999,
+    };
+    const handleContainerClick = () => {
+        onFieldSelect?.(null);
+    };
+    return (jsxs("div", { className: "idcard-preview-container", style: cardStyle, onClick: handleContainerClick, children: [backgroundImage && (jsx("img", { src: backgroundImage, alt: `${side} background`, style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    zIndex: 0,
+                    pointerEvents: 'none',
+                } })), fieldsToRender.map(renderField), showGrid && jsx("div", { style: gridStyle }), !backgroundImage && fieldsToRender.length === 0 && (jsxs("div", { style: {
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    textAlign: 'center',
+                    color: '#999',
+                    fontSize: '14px',
+                }, children: [jsx("p", { children: "Upload a background image" }), jsx("p", { children: "and add fields to get started" })] }))] }));
+};
+
+export { IDCardPreview, IDCardPreview as default };
+//# sourceMappingURL=IDCardPreview.js.map

package/dist/esm/components/IDCardPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDCardPreview.js","sources":["../../../src/components/IDCardPreview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\nimport type { IDCardPreviewProps, FieldMapping } from '../types';\r\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\r\nimport { generateQrCodeFromFields } from '../core/qrUtils';\r\n\r\n/**\r\n * IDCardPreview - Interactive card preview component\r\n * \r\n * Renders an ID card with:\r\n * - Field selection and highlighting\r\n * - Resize handles for selected fields\r\n * - Grid overlay for alignment\r\n * - Dynamic field rendering based on type\r\n * \r\n * Used inside the designer for visual editing\r\n */\r\nexport const IDCardPreview: React.FC<IDCardPreviewProps> = ({\r\n  template,\r\n  data,\r\n  side,\r\n  scale = 1,\r\n  showGrid = false,\r\n  onFieldSelect,\r\n  selectedFieldId,\r\n  editable = true,\r\n  onFieldUpdate,\r\n}: IDCardPreviewProps) => {\r\n  // Get only fields that belong to the current side\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render resize handles for selected field\r\n  const renderResizeHandles = (field: FieldMapping) => {\r\n    if (field.id !== selectedFieldId || !editable) return null;\r\n\r\n    const handles = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];\r\n    const handleStyle: React.CSSProperties = {\r\n      position: 'absolute',\r\n      width: '8px',\r\n      height: '8px',\r\n      backgroundColor: '#2196F3',\r\n      border: '1px solid #fff',\r\n      borderRadius: '2px',\r\n      zIndex: 1000,\r\n    };\r\n\r\n    const positions: Record<string, React.CSSProperties> = {\r\n      n: { top: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'n-resize' },\r\n      s: { bottom: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 's-resize' },\r\n      e: { right: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'e-resize' },\r\n      w: { left: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'w-resize' },\r\n      ne: { top: '-4px', right: '-4px', cursor: 'ne-resize' },\r\n      nw: { top: '-4px', left: '-4px', cursor: 'nw-resize' },\r\n      se: { bottom: '-4px', right: '-4px', cursor: 'se-resize' },\r\n      sw: { bottom: '-4px', left: '-4px', cursor: 'sw-resize' },\r\n    };\r\n\r\n    return handles.map((handle) => (\r\n      <div\r\n        key={handle}\r\n        className={`resize-handle resize-handle-${handle}`}\r\n        style={{ ...handleStyle, ...positions[handle] }}\r\n        data-handle={handle}\r\n      />\r\n    ));\r\n  };\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    const fieldStyle = fieldStyleToCSS(field.style);\r\n    const isSelected = field.id === selectedFieldId;\r\n\r\n    const combinedStyle: React.CSSProperties = {\r\n      ...posStyle,\r\n      ...fieldStyle,\r\n      zIndex: field.zIndex || 1,\r\n      boxSizing: 'border-box',\r\n      overflow: 'hidden',\r\n      cursor: editable ? 'move' : 'default',\r\n      outline: isSelected ? '2px solid #2196F3' : 'none',\r\n      outlineOffset: '1px',\r\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onFieldSelect?.(field);\r\n    };\r\n\r\n    const value = data[field.fieldKey];\r\n\r\n    const content = (() => {\r\n      switch (field.type) {\r\n        case 'text':\r\n          return (\r\n            <>\r\n              {field.label && (\r\n                <span style={{ fontSize: '0.75em', display: 'block', opacity: 0.7 }}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span>{String(value || field.placeholder || field.fieldKey)}</span>\r\n            </>\r\n          );\r\n\r\n        case 'label':\r\n          return <span>{field.staticText || field.label || 'Label'}</span>;\r\n\r\n        case 'image':\r\n          return value ? (\r\n            <img\r\n              src={String(value)}\r\n              alt={field.label || 'Image'}\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                objectFit: 'cover',\r\n                objectPosition: 'center top',\r\n              }}\r\n            />\r\n          ) : (\r\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#e0e0e0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                flexDirection: 'column',\r\n              }}\r\n            >\r\n              <span>📷</span>\r\n              <span>{field.label || 'Photo'}</span>\r\n            </div>\r\n          );\r\n\r\n        case 'qrcode':\r\n          const qrDataUrl = field.qrFields\r\n            ? generateQrCodeFromFields(data, field.qrFields, 200)\r\n            : '';\r\n\r\n          return qrDataUrl ? (\r\n            <img\r\n              src={qrDataUrl}\r\n              alt=\"QR Code\"\r\n              style={{ width: '100%', height: '100%', objectFit: 'contain' }}\r\n            />\r\n          ) : (\r\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#f0f0f0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                border: '1px dashed #ccc',\r\n              }}\r\n            >\r\n              QR Code\r\n            </div>\r\n          );\r\n\r\n        default:\r\n          return null;\r\n      }\r\n    })();\r\n\r\n    return (\r\n      <div\r\n        key={field.id}\r\n        id={`preview-${field.id}`}\r\n        style={combinedStyle}\r\n        onClick={handleClick}\r\n        className={`preview-field preview-field-${field.type} ${isSelected ? 'selected' : ''}`}\r\n      >\r\n        {content}\r\n        {renderResizeHandles(field)}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: template.cardSize.width,\r\n    height: template.cardSize.height,\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: backgroundImage ? 'transparent' : '#f5f5f5',\r\n    border: '1px solid #ddd',\r\n    transform: `scale(${scale})`,\r\n    transformOrigin: 'top left',\r\n  };\r\n\r\n  // Grid overlay style\r\n  const gridStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    backgroundImage: showGrid\r\n      ? 'linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)'\r\n      : 'none',\r\n    backgroundSize: '10px 10px',\r\n    pointerEvents: 'none',\r\n    zIndex: 999,\r\n  };\r\n\r\n  const handleContainerClick = () => {\r\n    onFieldSelect?.(null);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"idcard-preview-container\"\r\n      style={cardStyle}\r\n      onClick={handleContainerClick}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: '100%',\r\n            height: '100%',\r\n            objectFit: 'cover',\r\n            zIndex: 0,\r\n            pointerEvents: 'none',\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n\r\n      {/* Grid overlay */}\r\n      {showGrid && <div style={gridStyle} />}\r\n\r\n      {/* Empty state */}\r\n      {!backgroundImage && fieldsToRender.length === 0 && (\r\n        <div\r\n          style={{\r\n            position: 'absolute',\r\n            top: '50%',\r\n            left: '50%',\r\n            transform: 'translate(-50%, -50%)',\r\n            textAlign: 'center',\r\n            color: '#999',\r\n            fontSize: '14px',\r\n          }}\r\n        >\r\n          <p>Upload a background image</p>\r\n          <p>and add fields to get started</p>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default IDCardPreview;\r\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/core/exportUtils.js

@@ -0,0 +1,151 @@
+import html2canvas from '../node_modules/html2canvas/dist/html2canvas.esm.js';
+import E from '../node_modules/jspdf/dist/jspdf.es.min.js';
+import { setQrCodeOnElement } from './qrUtils.js';
+
+// High-quality canvas rendering defaults
+const defaultCanvasOptions = {
+    scale: 10, // 10x resolution for crisp output
+    dpi: 1200,
+    imageTimeout: 15000,
+    letterRendering: true,
+    logging: false,
+    useCORS: true, // Allow cross-origin images
+    backgroundColor: null,
+};
+/**
+ * Capture a DOM element as a high-resolution canvas
+ * Uses html2canvas to convert the element to an image
+ * @returns Canvas and the original element, or null if not found
+ */
+async function captureElement(elementId, scale = 10) {
+    const element = document.getElementById(elementId);
+    if (!element)
+        return null;
+    const canvas = await html2canvas(element, {
+        ...defaultCanvasOptions,
+        scale,
+    });
+    return { canvas, element };
+}
+/**
+ * Download ID card(s) as a PDF file
+ * Captures DOM elements and converts them to a multi-page PDF
+ * @param options - Configuration for PDF export
+ * @returns Export result with success status and any errors
+ */
+async function downloadIDCardAsPDF(options) {
+    try {
+        const { frontElementId = 'idcardfront', backElementId, filename = 'ID_Card', data, qrElementId, qrFields, scale = 10, } = options;
+        // Generate QR code if configured
+        if (qrElementId && data && qrFields && qrFields.length > 0) {
+            const qrData = {};
+            for (const field of qrFields) {
+                if (data[field] !== undefined) {
+                    qrData[field] = data[field];
+                }
+            }
+            setQrCodeOnElement(qrElementId, qrData, 200);
+        }
+        // Wait for QR code and any images to fully render
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const pages = [];
+        // Capture front
+        const frontCapture = await captureElement(frontElementId, scale);
+        if (frontCapture)
+            pages.push(frontCapture);
+        // Capture back if exists
+        if (backElementId) {
+            const backCapture = await captureElement(backElementId, scale);
+            if (backCapture)
+                pages.push(backCapture);
+        }
+        if (pages.length === 0) {
+            return { success: false, error: 'No elements found to capture' };
+        }
+        let pdf;
+        for (let i = 0; i < pages.length; i++) {
+            const { canvas, element } = pages[i];
+            const imgData = canvas.toDataURL('image/jpeg', 1.0);
+            // Calculate PDF dimensions
+            const pdfWidth = parseInt(element.style.width) * 0.264583 || 85;
+            const aspectRatio = canvas.height / canvas.width;
+            const pdfHeight = pdfWidth * aspectRatio;
+            const orientation = pdfWidth >= pdfHeight ? 'landscape' : 'portrait';
+            if (i === 0) {
+                pdf = new E({
+                    unit: 'mm',
+                    format: [pdfWidth, pdfHeight],
+                    orientation,
+                });
+            }
+            else {
+                pdf.addPage([pdfWidth, pdfHeight], orientation);
+            }
+            pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
+        }
+        if (pdf) {
+            const blob = pdf.output('blob');
+            pdf.save(`${filename}.pdf`);
+            return { success: true, blob };
+        }
+        return { success: false, error: 'Failed to generate PDF' };
+    }
+    catch (error) {
+        return {
+            success: false,
+            error: error instanceof Error ? error.message : 'Unknown error',
+        };
+    }
+}
+/**
+ * Download ID card as image (PNG or JPEG)
+ */
+async function downloadIDCardAsImage(options) {
+    try {
+        const { frontElementId = 'idcardfront', filename = 'ID_Card', data, qrElementId, qrFields, format = 'png', scale = 10, quality = 1.0, } = options;
+        // Generate QR code if needed
+        if (qrElementId && data && qrFields && qrFields.length > 0) {
+            const qrData = {};
+            for (const field of qrFields) {
+                if (data[field] !== undefined) {
+                    qrData[field] = data[field];
+                }
+            }
+            setQrCodeOnElement(qrElementId, qrData, 200);
+        }
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const capture = await captureElement(frontElementId, scale);
+        if (!capture) {
+            return { success: false, error: 'Element not found' };
+        }
+        const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png';
+        const dataUrl = capture.canvas.toDataURL(mimeType, quality);
+        // Trigger download
+        const link = document.createElement('a');
+        link.download = `${filename}.${format}`;
+        link.href = dataUrl;
+        link.click();
+        return { success: true, dataUrl };
+    }
+    catch (error) {
+        return {
+            success: false,
+            error: error instanceof Error ? error.message : 'Unknown error',
+        };
+    }
+}
+/**
+ * Export ID card with unified options
+ */
+async function exportIDCard(options) {
+    const { format, ...rest } = options;
+    if (format === 'pdf') {
+        return downloadIDCardAsPDF(rest);
+    }
+    else {
+        return downloadIDCardAsImage({ ...rest, format });
+    }
+}
+
+export { downloadIDCardAsImage, downloadIDCardAsPDF, exportIDCard };
+//# sourceMappingURL=exportUtils.js.map

package/dist/esm/core/exportUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exportUtils.js","sources":["../../../src/core/exportUtils.ts"],"sourcesContent":["import html2canvas from 'html2canvas';\r\nimport jsPDF from 'jspdf';\r\nimport type { ExportOptions, ExportResult, IDCardData } from '../types';\r\nimport { setQrCodeOnElement } from './qrUtils';\r\n\r\ninterface DownloadIDCardOptions {\r\n  frontElementId?: string;\r\n  backElementId?: string;\r\n  filename?: string;\r\n  data?: IDCardData;\r\n  qrElementId?: string;\r\n  qrFields?: string[];\r\n  format?: 'pdf' | 'png' | 'jpeg';\r\n  scale?: number;      // Canvas scale for quality (higher = better, but slower)\r\n  quality?: number;    // JPEG quality (0-1)\r\n}\r\n\r\n// High-quality canvas rendering defaults\r\nconst defaultCanvasOptions = {\r\n  scale: 10,           // 10x resolution for crisp output\r\n  dpi: 1200,\r\n  imageTimeout: 15000,\r\n  letterRendering: true,\r\n  logging: false,\r\n  useCORS: true,       // Allow cross-origin images\r\n  backgroundColor: null,\r\n};\r\n\r\n/**\r\n * Capture a DOM element as a high-resolution canvas\r\n * Uses html2canvas to convert the element to an image\r\n * @returns Canvas and the original element, or null if not found\r\n */\r\nasync function captureElement(\r\n  elementId: string,\r\n  scale = 10\r\n): Promise<{ canvas: HTMLCanvasElement; element: HTMLElement } | null> {\r\n  const element = document.getElementById(elementId);\r\n  if (!element) return null;\r\n\r\n  const canvas = await html2canvas(element, {\r\n    ...defaultCanvasOptions,\r\n    scale,\r\n  });\r\n\r\n  return { canvas, element };\r\n}\r\n\r\n/**\r\n * Download ID card(s) as a PDF file\r\n * Captures DOM elements and converts them to a multi-page PDF\r\n * @param options - Configuration for PDF export\r\n * @returns Export result with success status and any errors\r\n */\r\nexport async function downloadIDCardAsPDF(\r\n  options: DownloadIDCardOptions\r\n): Promise<ExportResult> {\r\n  try {\r\n    const {\r\n      frontElementId = 'idcardfront',\r\n      backElementId,\r\n      filename = 'ID_Card',\r\n      data,\r\n      qrElementId,\r\n      qrFields,\r\n      scale = 10,\r\n    } = options;\r\n\r\n    // Generate QR code if configured\r\n    if (qrElementId && data && qrFields && qrFields.length > 0) {\r\n      const qrData: Record<string, unknown> = {};\r\n      for (const field of qrFields) {\r\n        if (data[field] !== undefined) {\r\n          qrData[field] = data[field];\r\n        }\r\n      }\r\n      setQrCodeOnElement(qrElementId, qrData, 200);\r\n    }\r\n\r\n    // Wait for QR code and any images to fully render\r\n    await new Promise((resolve) => setTimeout(resolve, 100));\r\n\r\n    const pages: { canvas: HTMLCanvasElement; element: HTMLElement }[] = [];\r\n\r\n    // Capture front\r\n    const frontCapture = await captureElement(frontElementId, scale);\r\n    if (frontCapture) pages.push(frontCapture);\r\n\r\n    // Capture back if exists\r\n    if (backElementId) {\r\n      const backCapture = await captureElement(backElementId, scale);\r\n      if (backCapture) pages.push(backCapture);\r\n    }\r\n\r\n    if (pages.length === 0) {\r\n      return { success: false, error: 'No elements found to capture' };\r\n    }\r\n\r\n    let pdf: jsPDF | undefined;\r\n\r\n    for (let i = 0; i < pages.length; i++) {\r\n      const { canvas, element } = pages[i];\r\n      const imgData = canvas.toDataURL('image/jpeg', 1.0);\r\n\r\n      // Calculate PDF dimensions\r\n      const pdfWidth = parseInt(element.style.width) * 0.264583 || 85;\r\n      const aspectRatio = canvas.height / canvas.width;\r\n      const pdfHeight = pdfWidth * aspectRatio;\r\n\r\n      const orientation = pdfWidth >= pdfHeight ? 'landscape' : 'portrait';\r\n\r\n      if (i === 0) {\r\n        pdf = new jsPDF({\r\n          unit: 'mm',\r\n          format: [pdfWidth, pdfHeight],\r\n          orientation,\r\n        });\r\n      } else {\r\n        pdf!.addPage([pdfWidth, pdfHeight], orientation);\r\n      }\r\n\r\n      pdf!.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);\r\n    }\r\n\r\n    if (pdf) {\r\n      const blob = pdf.output('blob');\r\n      pdf.save(`${filename}.pdf`);\r\n      return { success: true, blob };\r\n    }\r\n\r\n    return { success: false, error: 'Failed to generate PDF' };\r\n  } catch (error) {\r\n    return {\r\n      success: false,\r\n      error: error instanceof Error ? error.message : 'Unknown error',\r\n    };\r\n  }\r\n}\r\n\r\n/**\r\n * Download ID card as image (PNG or JPEG)\r\n */\r\nexport async function downloadIDCardAsImage(\r\n  options: DownloadIDCardOptions\r\n): Promise<ExportResult> {\r\n  try {\r\n    const {\r\n      frontElementId = 'idcardfront',\r\n      filename = 'ID_Card',\r\n      data,\r\n      qrElementId,\r\n      qrFields,\r\n      format = 'png',\r\n      scale = 10,\r\n      quality = 1.0,\r\n    } = options;\r\n\r\n    // Generate QR code if needed\r\n    if (qrElementId && data && qrFields && qrFields.length > 0) {\r\n      const qrData: Record<string, unknown> = {};\r\n      for (const field of qrFields) {\r\n        if (data[field] !== undefined) {\r\n          qrData[field] = data[field];\r\n        }\r\n      }\r\n      setQrCodeOnElement(qrElementId, qrData, 200);\r\n    }\r\n\r\n    await new Promise((resolve) => setTimeout(resolve, 100));\r\n\r\n    const capture = await captureElement(frontElementId, scale);\r\n    if (!capture) {\r\n      return { success: false, error: 'Element not found' };\r\n    }\r\n\r\n    const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png';\r\n    const dataUrl = capture.canvas.toDataURL(mimeType, quality);\r\n\r\n    // Trigger download\r\n    const link = document.createElement('a');\r\n    link.download = `${filename}.${format}`;\r\n    link.href = dataUrl;\r\n    link.click();\r\n\r\n    return { success: true, dataUrl };\r\n  } catch (error) {\r\n    return {\r\n      success: false,\r\n      error: error instanceof Error ? error.message : 'Unknown error',\r\n    };\r\n  }\r\n}\r\n\r\n/**\r\n * Export ID card with unified options\r\n */\r\nexport async function exportIDCard(\r\n  options: ExportOptions & {\r\n    frontElementId?: string;\r\n    backElementId?: string;\r\n    data?: IDCardData;\r\n    qrElementId?: string;\r\n    qrFields?: string[];\r\n  }\r\n): Promise<ExportResult> {\r\n  const { format, ...rest } = options;\r\n\r\n  if (format === 'pdf') {\r\n    return downloadIDCardAsPDF(rest);\r\n  } else {\r\n    return downloadIDCardAsImage({ ...rest, format });\r\n  }\r\n}\r\n"],"names":["jsPDF"],"mappings":";;;;AAiBA;AACA,MAAM,oBAAoB,GAAG;IAC3B,KAAK,EAAE,EAAE;AACT,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,eAAe,EAAE,IAAI;AACrB,IAAA,OAAO,EAAE,KAAK;IACd,OAAO,EAAE,IAAI;AACb,IAAA,eAAe,EAAE,IAAI;CACtB;AAED;;;;AAIG;AACH,eAAe,cAAc,CAC3B,SAAiB,EACjB,KAAK,GAAG,EAAE,EAAA;IAEV,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC;AAClD,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI;AAEzB,IAAA,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,OAAO,EAAE;AACxC,QAAA,GAAG,oBAAoB;QACvB,KAAK;AACN,KAAA,CAAC;AAEF,IAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;AAC5B;AAEA;;;;;AAKG;AACI,eAAe,mBAAmB,CACvC,OAA8B,EAAA;AAE9B,IAAA,IAAI;QACF,MAAM,EACJ,cAAc,GAAG,aAAa,EAC9B,aAAa,EACb,QAAQ,GAAG,SAAS,EACpB,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,KAAK,GAAG,EAAE,GACX,GAAG,OAAO;;AAGX,QAAA,IAAI,WAAW,IAAI,IAAI,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1D,MAAM,MAAM,GAA4B,EAAE;AAC1C,YAAA,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE;AAC5B,gBAAA,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,SAAS,EAAE;oBAC7B,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;gBAC7B;YACF;AACA,YAAA,kBAAkB,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,CAAC;QAC9C;;AAGA,QAAA,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAExD,MAAM,KAAK,GAA0D,EAAE;;QAGvE,MAAM,YAAY,GAAG,MAAM,cAAc,CAAC,cAAc,EAAE,KAAK,CAAC;AAChE,QAAA,IAAI,YAAY;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;;QAG1C,IAAI,aAAa,EAAE;YACjB,MAAM,WAAW,GAAG,MAAM,cAAc,CAAC,aAAa,EAAE,KAAK,CAAC;AAC9D,YAAA,IAAI,WAAW;AAAE,gBAAA,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC;QAC1C;AAEA,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACtB,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,8BAA8B,EAAE;QAClE;AAEA,QAAA,IAAI,GAAsB;AAE1B,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;YACpC,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,YAAY,EAAE,GAAG,CAAC;;AAGnD,YAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,IAAI,EAAE;YAC/D,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK;AAChD,YAAA,MAAM,SAAS,GAAG,QAAQ,GAAG,WAAW;AAExC,YAAA,MAAM,WAAW,GAAG,QAAQ,IAAI,SAAS,GAAG,WAAW,GAAG,UAAU;AAEpE,YAAA,IAAI,CAAC,KAAK,CAAC,EAAE;gBACX,GAAG,GAAG,IAAIA,CAAK,CAAC;AACd,oBAAA,IAAI,EAAE,IAAI;AACV,oBAAA,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC;oBAC7B,WAAW;AACZ,iBAAA,CAAC;YACJ;iBAAO;gBACL,GAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,WAAW,CAAC;YAClD;AAEA,YAAA,GAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,CAAC;QAC3D;QAEA,IAAI,GAAG,EAAE;YACP,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC;AAC/B,YAAA,GAAG,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAA,IAAA,CAAM,CAAC;AAC3B,YAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;QAChC;QAEA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,wBAAwB,EAAE;IAC5D;IAAE,OAAO,KAAK,EAAE;QACd,OAAO;AACL,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,KAAK,EAAE,KAAK,YAAY,KAAK,GAAG,KAAK,CAAC,OAAO,GAAG,eAAe;SAChE;IACH;AACF;AAEA;;AAEG;AACI,eAAe,qBAAqB,CACzC,OAA8B,EAAA;AAE9B,IAAA,IAAI;AACF,QAAA,MAAM,EACJ,cAAc,GAAG,aAAa,EAC9B,QAAQ,GAAG,SAAS,EACpB,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,GAAG,GACd,GAAG,OAAO;;AAGX,QAAA,IAAI,WAAW,IAAI,IAAI,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1D,MAAM,MAAM,GAA4B,EAAE;AAC1C,YAAA,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE;AAC5B,gBAAA,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,SAAS,EAAE;oBAC7B,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;gBAC7B;YACF;AACA,YAAA,kBAAkB,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,CAAC;QAC9C;AAEA,QAAA,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAExD,MAAM,OAAO,GAAG,MAAM,cAAc,CAAC,cAAc,EAAE,KAAK,CAAC;QAC3D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,mBAAmB,EAAE;QACvD;AAEA,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,MAAM,GAAG,YAAY,GAAG,WAAW;AAC/D,QAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;;QAG3D,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC;QACxC,IAAI,CAAC,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,MAAM,EAAE;AACvC,QAAA,IAAI,CAAC,IAAI,GAAG,OAAO;QACnB,IAAI,CAAC,KAAK,EAAE;AAEZ,QAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;IACnC;IAAE,OAAO,KAAK,EAAE;QACd,OAAO;AACL,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,KAAK,EAAE,KAAK,YAAY,KAAK,GAAG,KAAK,CAAC,OAAO,GAAG,eAAe;SAChE;IACH;AACF;AAEA;;AAEG;AACI,eAAe,YAAY,CAChC,OAMC,EAAA;IAED,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO;AAEnC,IAAA,IAAI,MAAM,KAAK,KAAK,EAAE;AACpB,QAAA,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAClC;SAAO;QACL,OAAO,qBAAqB,CAAC,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,CAAC;IACnD;AACF;;;;"}

package/dist/esm/core/qrUtils.js

@@ -0,0 +1,60 @@
+import QRious from '../node_modules/qrious/dist/qrious.js';
+
+/**
+ * Generate a QR code as a base64 data URL
+ * @param data - Data to encode in the QR code (will be JSON stringified)
+ * @param size - QR code size in pixels
+ * @param options - Customization options (error correction level, colors, etc.)
+ * @returns Base64 PNG data URL
+ */
+function generateQrCodeDataURL(data, size = 200, options) {
+    const qr = new QRious({
+        value: JSON.stringify(data),
+        size,
+        level: options?.level || 'H', // High error correction by default
+        padding: options?.padding ?? 0,
+        background: options?.background || 'white',
+        backgroundAlpha: 1,
+        foreground: options?.foreground || 'black',
+        foregroundAlpha: 1,
+    });
+    return qr.toDataURL('image/png');
+}
+/**
+ * Generate QR code from specific fields in the card data
+ * Only includes fields that exist in the data object
+ * @param data - Full card data object
+ * @param fields - Array of field keys to include in QR code
+ * @param size - QR code size in pixels
+ * @returns Base64 PNG data URL
+ */
+function generateQrCodeFromFields(data, fields, size = 200) {
+    // Build object with only the specified fields
+    const qrData = {};
+    for (const field of fields) {
+        if (data[field] !== undefined) {
+            qrData[field] = data[field];
+        }
+    }
+    return generateQrCodeDataURL(qrData, size);
+}
+/**
+ * Set QR code image src on a DOM element
+ */
+function setQrCodeOnElement(elementId, data, size = 200, container = document) {
+    const qrDataURL = generateQrCodeDataURL(data, size);
+    const imgTag = (container === document
+        ? document.getElementById(elementId)
+        : container.querySelector(`#${elementId}`));
+    if (imgTag) {
+        imgTag.setAttribute('src', qrDataURL);
+        imgTag.style.display = 'block';
+        imgTag.style.opacity = '1';
+        imgTag.style.visibility = 'visible';
+        return true;
+    }
+    return false;
+}
+
+export { generateQrCodeDataURL, generateQrCodeFromFields, setQrCodeOnElement };
+//# sourceMappingURL=qrUtils.js.map

package/dist/esm/core/qrUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qrUtils.js","sources":["../../../src/core/qrUtils.ts"],"sourcesContent":["import QRious from 'qrious';\r\nimport type { IDCardData } from '../types';\r\n\r\n/**\r\n * Generate a QR code as a base64 data URL\r\n * @param data - Data to encode in the QR code (will be JSON stringified)\r\n * @param size - QR code size in pixels\r\n * @param options - Customization options (error correction level, colors, etc.)\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeDataURL(\r\n  data: Record<string, unknown>,\r\n  size = 200,\r\n  options?: {\r\n    level?: 'L' | 'M' | 'Q' | 'H';  // Error correction level\r\n    padding?: number;\r\n    background?: string;\r\n    foreground?: string;\r\n  }\r\n): string {\r\n  const qr = new (QRious as any)({\r\n    value: JSON.stringify(data),\r\n    size,\r\n    level: options?.level || 'H',  // High error correction by default\r\n    padding: options?.padding ?? 0,\r\n    background: options?.background || 'white',\r\n    backgroundAlpha: 1,\r\n    foreground: options?.foreground || 'black',\r\n    foregroundAlpha: 1,\r\n  });\r\n  return qr.toDataURL('image/png');\r\n}\r\n\r\n/**\r\n * Generate QR code from specific fields in the card data\r\n * Only includes fields that exist in the data object\r\n * @param data - Full card data object\r\n * @param fields - Array of field keys to include in QR code\r\n * @param size - QR code size in pixels\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeFromFields(\r\n  data: IDCardData,\r\n  fields: string[],\r\n  size = 200\r\n): string {\r\n  // Build object with only the specified fields\r\n  const qrData: Record<string, unknown> = {};\r\n  for (const field of fields) {\r\n    if (data[field] !== undefined) {\r\n      qrData[field] = data[field];\r\n    }\r\n  }\r\n  return generateQrCodeDataURL(qrData, size);\r\n}\r\n\r\n/**\r\n * Set QR code image src on a DOM element\r\n */\r\nexport function setQrCodeOnElement(\r\n  elementId: string,\r\n  data: Record<string, unknown>,\r\n  size = 200,\r\n  container: Document | HTMLElement = document\r\n): boolean {\r\n  const qrDataURL = generateQrCodeDataURL(data, size);\r\n  const imgTag = (\r\n    container === document\r\n      ? document.getElementById(elementId)\r\n      : (container as HTMLElement).querySelector(`#${elementId}`)\r\n  ) as HTMLImageElement | null;\r\n\r\n  if (imgTag) {\r\n    imgTag.setAttribute('src', qrDataURL);\r\n    imgTag.style.display = 'block';\r\n    imgTag.style.opacity = '1';\r\n    imgTag.style.visibility = 'visible';\r\n    return true;\r\n  }\r\n  return false;\r\n}\r\n"],"names":[],"mappings":";;AAGA;;;;;;AAMG;AACG,SAAU,qBAAqB,CACnC,IAA6B,EAC7B,IAAI,GAAG,GAAG,EACV,OAKC,EAAA;AAED,IAAA,MAAM,EAAE,GAAG,IAAK,MAAc,CAAC;AAC7B,QAAA,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAC3B,IAAI;AACJ,QAAA,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,GAAG;AAC5B,QAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC;AAC9B,QAAA,UAAU,EAAE,OAAO,EAAE,UAAU,IAAI,OAAO;AAC1C,QAAA,eAAe,EAAE,CAAC;AAClB,QAAA,UAAU,EAAE,OAAO,EAAE,UAAU,IAAI,OAAO;AAC1C,QAAA,eAAe,EAAE,CAAC;AACnB,KAAA,CAAC;AACF,IAAA,OAAO,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC;AAClC;AAEA;;;;;;;AAOG;AACG,SAAU,wBAAwB,CACtC,IAAgB,EAChB,MAAgB,EAChB,IAAI,GAAG,GAAG,EAAA;;IAGV,MAAM,MAAM,GAA4B,EAAE;AAC1C,IAAA,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;AAC1B,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,SAAS,EAAE;YAC7B,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7B;IACF;AACA,IAAA,OAAO,qBAAqB,CAAC,MAAM,EAAE,IAAI,CAAC;AAC5C;AAEA;;AAEG;AACG,SAAU,kBAAkB,CAChC,SAAiB,EACjB,IAA6B,EAC7B,IAAI,GAAG,GAAG,EACV,SAAA,GAAoC,QAAQ,EAAA;IAE5C,MAAM,SAAS,GAAG,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC;AACnD,IAAA,MAAM,MAAM,IACV,SAAS,KAAK;AACZ,UAAE,QAAQ,CAAC,cAAc,CAAC,SAAS;UAChC,SAAyB,CAAC,aAAa,CAAC,IAAI,SAAS,CAAA,CAAE,CAAC,CACnC;IAE5B,IAAI,MAAM,EAAE;AACV,QAAA,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC;AACrC,QAAA,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO;AAC9B,QAAA,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG;AAC1B,QAAA,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS;AACnC,QAAA,OAAO,IAAI;IACb;AACA,IAAA,OAAO,KAAK;AACd;;;;"}