@openg2p/registry-widgets 0.2.0 → 1.0.0

package/dist/index.js

@@ -4201,6 +4201,15 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
           text-overflow: ellipsis !important;
           white-space: nowrap !important;
         }
+        /* Readonly: prevent flex row from overflowing panel */
+        .${sectionClassId} .TextDisplayWidget {
+          min-width: 0 !important;
+          overflow: hidden !important;
+        }
+        .${sectionClassId} .TextDisplayWidget > .flex-1 {
+          min-width: 0 !important;
+          overflow: hidden !important;
+        }
         /* Readonly value text truncation */
         .${sectionClassId} .TextDisplayWidget > .flex-1 > .text-gray-900 {
           overflow: hidden;
@@ -4531,11 +4540,11 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                                                 fontSize: '14px',
                                                                 color: '#000000',
                                                                 fontWeight: 'normal',
-                                                            }, children: crViewData.approvedDate }))] })] })] })), mode === 'RegistryView' && !hideEditButton && (jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: !isEditMode ? '20px' : 0, marginBottom: '14px' } })), mode === 'RegistryView' && !isEditMode && !hideEditButton && (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center", style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("button", { onClick: handleEdit, className: "font-normal inline-flex items-center gap-2 bg-transparent border-0 p-0 cursor-pointer hover:opacity-80", style: {
+                                                            }, children: crViewData.approvedDate }))] })] })] })), mode === 'RegistryView' && !hideEditButton && (jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: !isEditMode ? '10px' : 0, marginBottom: '14px' } })), mode === 'RegistryView' && !isEditMode && !hideEditButton && (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center", style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("button", { onClick: handleEdit, className: "font-normal inline-flex items-center gap-2 bg-transparent border-0 p-0 cursor-pointer hover:opacity-80", style: {
                                             fontFamily: 'Roboto, sans-serif',
                                             fontSize: '16px',
                                             color: 'rgba(0, 0, 0, 0.50)'
-                                        }, children: ["Edit Details", jsxRuntimeExports.jsx("img", { src: img$8, alt: "right-arrow", className: "w-3.5 h-3.5 brightness-0 opacity-50" })] }) }))] })] })) })] }));
+                                        }, children: [translate('common.editDetails') || 'Edit Details', jsxRuntimeExports.jsx("img", { src: img$8, alt: "right-arrow", className: "w-3.5 h-3.5 brightness-0 opacity-50" })] }) }))] })] })) })] }));
 };
 
 /**
@@ -8936,6 +8945,17 @@ const DEFAULT_STATUS_COLORS = {
     inactive: '#D97706',
     archived: '#6B7280',
 };
+const DEFAULT_LABELS = {
+    functionalId: 'Functional Record ID',
+    status: 'Record Status',
+    statusReason: 'Status Reason',
+    select: 'Select',
+    enterReason: 'Enter Reason',
+    createdBy: 'Created by',
+    createdAt: 'Created at',
+    lastApprovedBy: 'Last Approved by',
+    lastApprovedAt: 'Last Approved at',
+};
 // ── Hook: load data-source options for a single field ────────────
 // Options are loaded in both view and edit modes because view mode
 // needs them to resolve display labels (e.g. "active" → "Active").
@@ -8999,6 +9019,21 @@ const HeaderSectionWidget = ({ config }) => {
     const values = reactRedux.useSelector((state) => state.widget.values);
     const isReadonly = widgetConfig['widget-readonly'] !== false;
     const dataPath = widgetConfig['widget-data-path'];
+    // ── Resolve labels ──────────────────────────────────────────────
+    // Priority: widget-labels override → translateConfig(English default) → English default
+    // The host's locale JSON files should use the English text as keys,
+    // e.g. { "Functional Record ID": "ID fonctionnel" }
+    const configLabels = widgetConfig['widget-labels'];
+    const getLabel = React.useCallback((key) => {
+        const englishDefault = DEFAULT_LABELS[key] || key;
+        if (configLabels?.[key]) {
+            const translated = translateConfig(configLabels[key]);
+            if (translated && translated !== configLabels[key])
+                return translated;
+        }
+        const translated = translateConfig(englishDefault);
+        return translated || englishDefault;
+    }, [configLabels, translateConfig]);
     // ── Per-field config map ──────────────────────────────────────
     const fieldConfigMap = React.useMemo(() => {
         return widgetConfig['widget-field-config'] || {};
@@ -9046,7 +9081,7 @@ const HeaderSectionWidget = ({ config }) => {
     const lastApprovedAt = findValue('lastApprovedAt') || '';
     // ── Format options ────────────────────────────────────────────
     const format = (widgetConfig['widget-data-format'] || {});
-    const imageSize = format.imageSize || 90;
+    const imageSize = format.imageSize || 120;
     const nameColor = format.nameColor || '#ED7C22';
     const statusColors = {
         ...DEFAULT_STATUS_COLORS,
@@ -9096,7 +9131,7 @@ const HeaderSectionWidget = ({ config }) => {
           flex-direction: row;
           align-items: flex-start;
           gap: 1rem;
-          flex: 1 1 55%;
+          flex: 1 1 50%;
           min-width: 0;
         }
 
@@ -9104,7 +9139,7 @@ const HeaderSectionWidget = ({ config }) => {
           display: flex;
           flex-direction: column;
           gap: 0.5rem;
-          flex: 0 0 auto;
+          flex: 1 1 40%;
           min-width: 220px;
         }
 
@@ -9158,19 +9193,19 @@ const HeaderSectionWidget = ({ config }) => {
           display: flex;
           align-items: flex-start;
           gap: 0.5rem;
-          font-size: 0.875rem;
+          font-size: 1rem;
           line-height: 1.6;
         }
 
         .${cls} .hdr-field-label {
-          color: #6b7280;
-          font-weight: 500;
+          color: rgba(0, 0, 0, 0.5);
+          font-weight: 400;
           white-space: nowrap;
         }
 
         .${cls} .hdr-field-value {
           color: #111827;
-          font-weight: 600;
+          font-weight: 500;
         }
 
         .${cls} .hdr-status-badge {
@@ -9186,18 +9221,18 @@ const HeaderSectionWidget = ({ config }) => {
           display: flex;
           align-items: baseline;
           gap: 0.35rem;
-          font-size: 0.875rem;
+          font-size: 1rem;
           line-height: 1.6;
         }
 
         .${cls} .hdr-meta-label {
-          color: #6b7280;
+          color: rgba(0, 0, 0, 0.5);
           font-weight: 400;
         }
 
         .${cls} .hdr-meta-value {
           color: #111827;
-          font-weight: 600;
+          font-weight: 500;
         }
 
         .${cls} .hdr-select {
@@ -9248,7 +9283,7 @@ const HeaderSectionWidget = ({ config }) => {
                                                 .parentElement?.querySelector('.hdr-avatar-placeholder');
                                             if (placeholder)
                                                 placeholder.style.display = 'flex';
-                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: imageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: "#9CA3AF" }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [translateConfig('Functional Record ID') || 'Functional Record ID', " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? statusColor : '#F59E0B' }), jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: translateConfig('Record Status') || 'Record Status' }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: translateConfig('Select') || 'Select' }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? '#9CA3AF' : '#F59E0B' }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [translateConfig('Status Reason') || 'Status Reason', " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: translateConfig('Enter Reason') || 'Enter Reason', onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [translateConfig('Created by') || 'Created by', " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [translateConfig('Created at') || 'Created at', " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [translateConfig('Last Approved by') || 'Last Approved by', " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [translateConfig('Last Approved at') || 'Last Approved at', " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
+                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: imageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: "#9CA3AF" }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? statusColor : '#F59E0B' }), jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? '#9CA3AF' : '#F59E0B' }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: getLabel('enterReason'), onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
 };
 
 /**
@@ -9346,8 +9381,13 @@ var enTranslations = {
 	"common.uploadFile": "Upload File",
 	"common.maxFileSize": "Maximum file size: {{size}} MB",
 	"common.edit": "Edit",
+	"common.editDetails": "Edit Details",
 	"common.save": "Save",
 	"common.cancel": "Cancel",
+	"common.previous": "Prev",
+	"common.next": "Next",
+	"common.sectionSaved": "Saved",
+	"common.sectionModified": "Modified and not saved",
 	"common.supportedDocuments": "Supported Documents",
 	"table.addRecord": "Add New Record",
 	"table.confirm": "Confirm Action",