df-forms-preview-pack/dist/index.js

A comprehensive React form preview component library with form controls, validation, conditional logic, and responsive design

"use strict";var e=require("react/jsx-runtime"),t=require("react"),s=require("react-i18next"),a=require("lucide-react"),i=require("react-dom"),n=require("@dnd-kit/core"),r=require("@dnd-kit/sortable"),o=require("@dnd-kit/utilities"),l=require("uuid");const c=({validationErrors:t,fieldId:s,touchedFields:a,formSubmitted:i,properties:n,localValidation:r,isTouched:o,mode:l})=>{const c=e=>{const t=n.basic.label||"This field",s=n.validation.customValidationMessage;if(s)return s;const a=n.name||"",i="date-picker"===a||"datetime-picker"===a?n.basic?.dateTimeMode||("datetime-picker"===a?"datetime":"date"):null;switch(e){case"required":return`${t} is required`;case"invalidDate":return"time"===i?"Please select a valid time":"datetime"===i?"Please select a valid date and time":"date"===i?"Please select a valid date":`${t} is invalid`;case"minLength":return`${t} must be at least ${n.validation.minLength} characters long`;case"maxLength":return`${t} must be no more than ${n.validation.maxLength} characters long`;case"min":return`${t} must be at least ${n.validation.min}`;case"max":return`${t} must be no more than ${n.validation.max}`;case"pattern":return`${t} format is invalid`;case"email":return`${t} must be a valid email address`;default:return`${t} is invalid`}},d=(()=>{if("test"!==l)return"";if(!(o||a[s]||i))return"";if(r&&r.isValid)return"";if(r&&!r.isValid&&Object.keys(r.errors).length>0){const e=Object.keys(r.errors);if(e.length>0){const t=e[0];return c(t)}}const e=t[s];if(e&&"string"==typeof e&&""!==e.trim()){const t=n.name||"";if(("date-picker"===t||"datetime-picker"===t)&&e.includes("valid date")){const e=n.basic?.dateTimeMode||("datetime-picker"===t?"datetime":"date");if("time"===e)return"Please select a valid time";if("datetime"===e)return"Please select a valid date and time"}return e}return""})();return d?e.jsx("div",{className:"form-error-msg",children:d}):null};let d,u,m;var p;d=void 0,u=void 0,m=void 0,function(e){e.OPEN="OPEN",e.IN_PROGRESS="IN_PROGRESS",e.RESOLVED="RESOLVED",e.RESOLVE="RESOLVE",e.CLOSED="CLOSED",e.REJECTED="REJECTED"}(p||(p={}));const h=()=>({user:null}),b=({isOpen:s,onClose:n,onSuccess:r,component:o,formTemplateId:l,notes:c="",attachments:m=null,issue:b=null})=>{const f=h,{user:x}=f(),[g,v]=t.useState(""),[y,j]=t.useState(""),[C,N]=t.useState(""),[k,S]=t.useState(""),[w,E]=t.useState("Medium"),[$,V]=t.useState(p.OPEN),[L,D]=t.useState(""),[F,T]=t.useState(""),[A,I]=t.useState(!1),R=!!b;t.useEffect(()=>{if(s)if(b){v(b.title||""),j(b.description||""),N(b.workOrderNumber||""),S(b.assetNumber||""),E(b.priority||"Medium");const e=b.status||p.OPEN,t=e===p.OPEN||e===p.IN_PROGRESS||e===p.REJECTED||e===p.RESOLVE?e:p.OPEN;V(t),D(b.assignee||""),T(b.comments||"")}else if(o){const e=o.basic?.label||"Component";v(`${e} - Issue`);let t=`Issue raised for component: ${e}`;o.basic?.value&&(t+=`\nComponent Value: ${o.basic.value}`),c&&(t+=`\nNotes: ${c}`),j(t),T(c||"")}},[s,o,c,b]);if(!s)return null;const M=e.jsx("div",{className:"raise-issue-modal-overlay",onClick:n,children:e.jsxs("div",{className:"raise-issue-modal",onClick:e=>e.stopPropagation(),children:[e.jsxs("div",{className:"raise-issue-modal-header",children:[e.jsxs("div",{className:"raise-issue-modal-header-left",children:[e.jsx(a.AlertTriangle,{className:"raise-issue-modal-icon",size:20}),e.jsx("div",{className:"raise-issue-modal-header-text",children:e.jsx("div",{className:"raise-issue-modal-title-main",children:"Issue Details"})})]}),e.jsx("button",{className:"raise-issue-modal-close",onClick:n,"aria-label":"Close",children:e.jsx(a.X,{size:18})})]}),e.jsx("div",{className:"raise-issue-modal-content",children:e.jsxs("div",{className:"raise-issue-fields-grid",children:[R&&b?.issueNumber&&e.jsxs("div",{className:"raise-issue-field",children:[e.jsx("label",{className:"raise-issue-field-label",children:"Issue ID"}),e.jsx("input",{type:"text",className:"raise-issue-field-input raise-issue-field-readonly",value:b.issueNumber,readOnly:!0})]}),e.jsxs("div",{className:"raise-issue-field",children:[e.jsx("label",{className:"raise-issue-field-label",children:"Title"}),e.jsx("input",{type:"text",className:"raise-issue-field-input "+(R?"raise-issue-field-readonly":""),value:g,onChange:e=>v(e.target.value),placeholder:"Enter issue title",readOnly:R})]}),e.jsxs("div",{className:"raise-issue-field",children:[e.jsx("label",{className:"raise-issue-field-label",children:"Work Order"}),e.jsx("input",{type:"text",className:"raise-issue-field-input "+(R?"raise-issue-field-readonly":""),value:C,onChange:e=>N(e.target.value),placeholder:"N/A",readOnly:R})]}),e.jsxs("div",{className:"raise-issue-field",children:[e.jsx("label",{className:"raise-issue-field-label",children:"Asset"}),e.jsx("input",{type:"text",className:"raise-issue-field-input "+(R?"raise-issue-field-readonly":""),value:k,onChange:e=>S(e.target.value),placeholder:"Enter asset number",readOnly:R})]}),e.jsxs("div",{className:"raise-issue-field",children:[e.jsx("label",{className:"raise-issue-field-label",children:"Raised By"}),e.jsxs("div",{className:"raise-issue-field-value-with-icon",children:[e.jsx(a.User,{size:16}),e.jsx("span",{children:x&&`${x.firstName||""} ${x.lastName||""}`.trim()||"User"})]})]}),e.jsxs("div",{className:"raise-issue-field",children:[e.jsx("label",{className:"raise-issue-field-label",children:"Created On"}),e.jsxs("div",{className:"raise-issue-field-value-with-icon",children:[e.jsx(a.Calendar,{size:16}),e.jsx("span",{children:R&&b?.createdAt?new Date(b.createdAt).toLocaleString("en-US",{year:"numeric",month:"short",day:"numeric",hour:"2-digit",minute:"2-digit",hour12:!0}):(new Date).toLocaleString("en-US",{year:"numeric",month:"short",day:"numeric",hour:"2-digit",minute:"2-digit",hour12:!0})})]})]}),e.jsxs("div",{className:"raise-issue-field raise-issue-field-full-width",children:[e.jsx("label",{className:"raise-issue-field-label",children:"Description"}),e.jsx("textarea",{className:"raise-issue-field-textarea "+(R?"raise-issue-field-readonly":""),value:y,onChange:e=>j(e.target.value),placeholder:"Enter issue description",rows:4,readOnly:R})]}),e.jsxs("div",{className:"raise-issue-field",children:[e.jsx("label",{className:"raise-issue-field-label",children:"Status"}),e.jsxs("select",{className:"raise-issue-field-select",value:$,onChange:e=>V(e.target.value),children:[e.jsx("option",{value:p.OPEN,children:p.OPEN}),e.jsx("option",{value:p.IN_PROGRESS,children:p.IN_PROGRESS}),e.jsx("option",{value:p.REJECTED,children:p.REJECTED}),e.jsx("option",{value:p.RESOLVE,children:p.RESOLVE})]})]}),e.jsxs("div",{className:"raise-issue-field",children:[e.jsx("label",{className:"raise-issue-field-label",children:"Assignee"}),e.jsxs("div",{className:"raise-issue-assignee-wrapper",children:[e.jsx("input",{type:"text",className:"raise-issue-field-input raise-issue-assignee-input",value:L,onChange:e=>D(e.target.value),placeholder:"Unassigned"}),e.jsx(a.ChevronDown,{size:16,className:"raise-issue-assignee-chevron"})]})]}),e.jsxs("div",{className:"raise-issue-field raise-issue-field-full-width",children:[e.jsx("label",{className:"raise-issue-field-label",children:"Priority"}),e.jsxs("div",{className:"raise-issue-priority-buttons",children:[e.jsx("button",{type:"button",className:"priority-button priority-low "+("Low"===w?"active":""),onClick:()=>E("Low"),children:"Low"}),e.jsx("button",{type:"button",className:"priority-button priority-medium "+("Medium"===w?"active":""),onClick:()=>E("Medium"),children:"Medium"}),e.jsx("button",{type:"button",className:"priority-button priority-high "+("High"===w?"active":""),onClick:()=>E("High"),children:"High"})]})]}),e.jsxs("div",{className:"raise-issue-field raise-issue-field-full-width",children:[e.jsxs("label",{className:"raise-issue-field-label-with-icon",children:[e.jsx(a.MessageSquare,{size:16}),e.jsx("span",{children:"Comments"})]}),!F&&e.jsx("div",{className:"raise-issue-no-comments",children:"No comments yet"}),e.jsx("textarea",{className:"raise-issue-field-textarea raise-issue-comments-textarea "+(R?"raise-issue-field-readonly":""),value:F,onChange:e=>T(e.target.value),placeholder:"Add a comment...",rows:4,readOnly:R})]})]})}),e.jsx("div",{className:"raise-issue-modal-actions",children:e.jsxs("div",{className:"raise-issue-modal-actions-buttons",children:[e.jsx("button",{className:"raise-issue-modal-button raise-issue-modal-button-cancel",onClick:n,disabled:A,children:"Cancel"}),e.jsx("button",{className:"raise-issue-modal-button raise-issue-modal-button-save",onClick:async()=>{if(g.trim())if(y.trim()){I(!0);try{if(R&&b){const e={title:g.trim(),description:y.trim(),workOrderNumber:C.trim()||"",assetNumber:k.trim()||"",formTemplateId:b.formTemplateId||"",component:b.component||{},priority:w,assignee:L.trim()||void 0,status:$,comments:F.trim()||""};d?.updateIssue?(await d.updateIssue(b._id,e),u?.showSuccess?u.showSuccess("Issue updated successfully"):(console.log("Issue updated successfully"),alert("Issue updated successfully"))):(console.warn("Issues API service not available - issue update skipped"),alert("Issue update functionality not available in package mode"))}else{if(!o||!l)return void(u?.showError?u.showError("Component and form template are required"):(console.error("Component and form template are required"),alert("Component and form template are required")));const e={...o,basic:{...o.basic,comments:c||""}},t={title:g.trim(),workOrderNumber:C.trim()||void 0,assetNumber:k.trim()||void 0,component:e,description:y.trim(),formTemplateId:l,assignee:L.trim()||void 0,priority:w,status:$,comments:F.trim()||""};d?.createIssue?(await d.createIssue(t,m||[]),u?.showSuccess?u.showSuccess("Issue raised successfully"):(console.log("Issue raised successfully"),alert("Issue raised successfully"))):(console.warn("Issues API service not available - issue creation skipped"),alert("Issue creation functionality not available in package mode"))}r&&r(),n()}catch(e){console.error("Error saving issue:",e);const t=e?.message||e?.error?.message||(R?"Failed to update issue. Please try again.":"Failed to raise issue. Please try again.");u?.showError?u.showError(t):(console.error("Error:",t),alert(t))}finally{I(!1)}}else u?.showError?u.showError("Description is required"):(console.error("Description is required"),alert("Description is required"));else u?.showError?u.showError("Title is required"):(console.error("Title is required"),alert("Title is required"))},disabled:A||!g.trim()||!y.trim(),children:A?"Saving...":"Save Changes"})]})})]})});return i.createPortal(M,document.body)},f=({component:s,condition:i,currentValue:n,thresholdValue:r,formTemplateId:o,onIssueRaised:l,isIssueRaised:c=!1})=>{const[d,u]=t.useState(!1),m=t.useCallback(()=>{u(!0)},[]),p=t.useCallback(()=>{u(!1)},[]),h=t.useCallback(()=>{u(!1),l&&i.id&&l(i.id)},[l,i.id]);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"threshold-alert "+(c?"threshold-alert-resolved":"threshold-alert-unresolved"),children:[e.jsx("div",{className:"threshold-alert-border"}),e.jsxs("div",{className:"threshold-alert-content",children:[e.jsx("div",{className:"threshold-alert-header",children:e.jsxs("div",{className:"threshold-alert-title-group",children:[e.jsx(a.AlertTriangle,{className:"threshold-alert-icon",size:20}),e.jsx("span",{className:"threshold-alert-title",children:c?"Threshold Condition Met":"Threshold Condition Met - Action Required"})]})}),e.jsxs("div",{className:"threshold-alert-message",children:[(()=>{const e={greaterThan:">",lessThan:"<",greaterThanOrEqual:"≥",lessThanOrEqual:"≤",equals:"=",notEquals:"≠"}[t=i.operator]||t;var t;return`${s.basic?.label||"Value"}: Value ${n} exceeds threshold ${e} ${r}`})(),!c&&e.jsx("span",{className:"threshold-alert-warning",children:" You must raise an issue before submitting the form."})]}),e.jsx("div",{className:"threshold-alert-buttons",children:e.jsx("button",{type:"button",onClick:m,className:"threshold-alert-raise-issue-btn",children:c?"View Issue":"Raise Issue Now"})})]})]}),d&&e.jsx(b,{isOpen:d,onClose:p,onSuccess:h,component:s,formTemplateId:o||"",notes:"",attachments:null})]})},x=({id:s,properties:a,validationErrors:i={},formValue:n="",inputType:r="text",readonly:o=!1,disabled:l=!1,touchedFields:d={},formSubmitted:u=!1,mode:m="test",onValueChange:p,onBlur:h,onFocus:b,className:x="",hideLabel:g=!1,formTemplateId:v,onThresholdIssueRaised:y,raisedThresholdIssues:j=new Set})=>{const[C,N]=t.useState(n||a?.basic?.defaultValue||""),[k,S]=t.useState(!1),[w,E]=t.useState(!1),[$,V]=t.useState(new Set),[L,D]=t.useState(n||a?.basic?.defaultValue||""),F=()=>{if(r)return r;const e=a?.name;return"text-input"===e?"text":"number-input"===e?"number":"email-input"===e?"email":"text"},T=t.useCallback(e=>{const t=(()=>{const e={};if(a?.validation?.required&&(e.required=!0),"email"===F()&&(e.email=!0),"text"===F()){const t=a.validation;t?.minLength&&(e.minLength=t.minLength),t?.maxLength&&(e.maxLength=t.maxLength)}if("number"===F()){const t=a.validation;t?.min&&(e.min=t.min),t?.max&&(e.max=t.max),t?.minLength&&(e.minLength=t.minLength),t?.maxLength&&(e.maxLength=t.maxLength)}return e})(),s={};let i=!0;if(!t.required||e&&""!==e.trim()||(s.required=!0,i=!1),t.email&&e&&!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(e)&&(s.email=!0,i=!1),t.minLength&&e&&e.length<t.minLength&&(s.minLength=!0,i=!1),t.maxLength&&e&&e.length>t.maxLength&&(s.maxLength=!0,i=!1),"number"===F()&&e){const a=parseFloat(e);isNaN(a)?(s.pattern=!0,i=!1):(void 0!==t.min&&a<t.min&&(s.min=!0,i=!1),void 0!==t.max&&a>t.max&&(s.max=!0,i=!1))}return{isValid:i,errors:s}},[a,F]),A=t.useCallback(e=>{if(N(e),p){const t=T(e),a={id:s,value:e,isValid:t.isValid,errors:t.errors};p(a)}},[s,p,T]);t.useEffect(()=>{k&&(d[s]=!0)},[k,s,d]),t.useEffect(()=>{if("edit"===m){S(!1);N(a?.basic?.defaultValue||"")}else"test"===m&&(S(!1),N(""))},[m,a?.basic?.defaultValue]),t.useEffect(()=>{const e=n||a?.basic?.defaultValue||"";e===C||w||""===e&&""!==C.trim()?""===e&&C.trim():N(e)},[n,C,w,a?.basic?.defaultValue]),t.useEffect(()=>{u&&S(!0)},[u]),t.useEffect(()=>{"test"!==m&&N("")},[m]);const I=t.useCallback((e,t)=>{if(!t||""===t)return!1;const s="string"==typeof t?parseFloat(t):t,a="string"==typeof e.value?parseFloat(e.value):e.value;if(isNaN(s)||isNaN(a))return!1;switch(e.operator){case"greaterThan":return s>a;case"lessThan":return s<a;case"greaterThanOrEqual":return s>=a;case"lessThanOrEqual":return s<=a;case"equals":return s===a;case"notEquals":return s!==a;default:return!1}},[]),R=t.useMemo(()=>a?.threshold?.conditions||[],[a?.threshold]);t.useEffect(()=>{C!==L&&(V(new Set),D(C))},[C,L]);const M=t.useMemo(()=>{if("test"!==m||!C||""===C)return null;const e=R.filter(e=>I(e,C));if(0===e.length)return null;for(const t of e)if(!$.has(t.id))return t;return null},[C,R,$,m,I]),z=t.useCallback(e=>{V(t=>new Set(t).add(e))},[]),q=F(),O=l||o||a?.validation?.readonly;return e.jsxs("div",{className:`form-group ${(()=>{const e=a?.styles?.labelAlignment;return"left"===e?"label-left":"label-top"})()}`,children:[!g&&a.basic.label&&e.jsxs("label",{htmlFor:s,className:"form-label",children:[a.basic.label,a.validation.required&&e.jsx("span",{className:"required-indicator",children:"*"})]}),e.jsxs("div",{className:"input-wrapper",children:[e.jsx("input",{type:q,id:s,value:C,onChange:e=>{const t=e.target.value;A(t)},onFocus:()=>{E(!0),b&&b()},onBlur:()=>{if(E(!1),S(!0),"test"===m&&p){const e=T(C),t={id:s,value:C,isValid:e.isValid,errors:e.errors};p(t)}h&&h()},placeholder:a.basic.placeholder,disabled:O,readOnly:o||a?.validation?.readonly,className:(()=>{const e="form-control";if("test"===m){const t=!T(C).isValid&&k,a=i[s]&&(k||u);return`${e} ${t||a?"is-invalid":""} ${x}`.trim()}return`${e} ${x}`.trim()})()}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:d,formSubmitted:u,properties:a,localValidation:T(C),isTouched:k,mode:m}),M&&"test"===m&&e.jsx(f,{component:a,condition:M,currentValue:C,thresholdValue:M.value,formTemplateId:v,onDismiss:()=>z(M.id),onIssueRaised:y,isIssueRaised:j.has(M.id)})]})]})},g=({id:s,properties:a,validationErrors:i={},formValue:n="",readonly:r=!1,disabled:o=!1,touchedFields:l={},formSubmitted:d=!1,mode:u="preview",onValueChange:m,onBlur:p,onFocus:h,className:b="",hideLabel:f=!1})=>{const[x,g]=t.useState(n),[v,y]=t.useState(!1),j=t.useCallback(e=>{const t={};let s=!0;return!a?.validation?.required||e&&""!==e.trim()||(t.required=!0,s=!1),a?.validation?.minLength&&e&&e.length<a.validation.minLength&&(t.minLength=!0,s=!1),a?.validation?.maxLength&&e&&e.length>a.validation.maxLength&&(t.maxLength=!0,s=!1),{isValid:s,errors:t}},[a]),C=t.useCallback(e=>{if(g(e),m){const t=j(e),a={id:s,value:e,isValid:t.isValid,errors:t.errors};m(a)}},[s,m,j]);t.useEffect(()=>{v&&(l[s]=!0)},[v,s,l]),t.useEffect(()=>{""===x&&""!==n&&g(n)},[n]),t.useEffect(()=>{d&&y(!0)},[d]),t.useEffect(()=>{"test"!==u&&g("")},[u]);const N=o||r||a?.validation?.readonly,k=a?.validation?.rows||4;return e.jsxs("div",{className:`form-group ${(()=>{const e=a?.styles?.labelAlignment;return"left"===e?"label-left":"label-top"})()}`,children:[!f&&a.basic.label&&e.jsxs("label",{htmlFor:s,className:"form-label",children:[a.basic.label,a.validation.required&&e.jsx("span",{className:"required-indicator",children:"*"})]}),e.jsxs("div",{className:"input-wrapper",children:[e.jsx("textarea",{id:s,value:x,onChange:e=>{const t=e.target.value;C(t)},onFocus:()=>{h&&h()},onBlur:()=>{y(!0),p&&p()},placeholder:a.basic.placeholder,disabled:N,readOnly:r||a?.validation?.readonly,rows:k,className:`form-textarea ${!j(x).isValid&&v?"is-invalid":""} ${b}`.trim()}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:l,formSubmitted:d,properties:a,localValidation:j(x),isTouched:v,mode:u})]})]})},v=({id:s,properties:a,validationErrors:i={},formValue:n="",readonly:r=!1,disabled:o=!1,touchedFields:l={},formSubmitted:d=!1,mode:u="preview",onValueChange:m,onBlur:p,onFocus:h,className:b="",hideLabel:f=!1,showCommentsInPreview:x=!1})=>{const[g,v]=t.useState(n),[y,j]=t.useState(!1),C=a?.validation?.multiple||!1,N=t.useCallback(e=>{const t={};let s=!0;return a?.validation?.required&&(C?Array.isArray(e)&&0!==e.length||(t.required=!0,s=!1):(!e||"string"==typeof e&&""===e.trim())&&(t.required=!0,s=!1)),{isValid:s,errors:t}},[a,C]),k=t.useCallback(e=>{if(v(e),m){const t=N(e),a={id:s,value:e,isValid:t.isValid,errors:t.errors};m(a)}},[s,m,N]);t.useEffect(()=>{y&&(l[s]=!0)},[y,s,l]),t.useEffect(()=>{JSON.stringify(n)!==JSON.stringify(g)&&v(n)},[n,g]),t.useEffect(()=>{d&&j(!0)},[d]);const S=o||r||a?.validation?.readonly;return e.jsxs("div",{className:`form-group ${(()=>{const e=a?.styles?.labelAlignment;return"left"===e?"label-left":"label-top"})()}`,children:[!f&&a.basic.label&&e.jsxs("label",{htmlFor:s,className:"form-label",children:[a.basic.label,a.validation.required&&e.jsx("span",{className:"required-indicator",children:"*"})]}),e.jsxs("div",{className:"input-wrapper",children:[e.jsxs("select",{id:s,value:g,onChange:e=>{if(C){const t=Array.from(e.target.selectedOptions,e=>e.value);k(t)}else k(e.target.value)},onFocus:()=>{h&&h()},onBlur:()=>{j(!0),p&&p()},disabled:S,multiple:C,className:`form-select ${!N(g).isValid&&y?"is-invalid":""} ${b}`.trim(),children:[!C&&e.jsx("option",{value:"",children:a.basic.placeholder||"Select an option"}),(a.options||[]).map((t,s)=>e.jsx("option",{value:t.value,disabled:t.disabled,children:t.label},s))]}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:l,formSubmitted:d,properties:a,localValidation:N(g),isTouched:y,mode:u})]})]})},y=({id:s,properties:a,validationErrors:i={},formValue:n=[],readonly:r=!1,disabled:o=!1,touchedFields:l={},formSubmitted:d=!1,mode:u="preview",onValueChange:m,onBlur:p,onFocus:h,className:b="",hideLabel:f=!1})=>{const[x,g]=t.useState(!1),v=Array.isArray(n)?n:[],y=t.useCallback(e=>{const t={};let s=!0;return a?.validation?.required&&0===e.length&&(t.required=!0,s=!1),{isValid:s,errors:t}},[a]),j=t.useCallback(e=>{if(m){const t=y(e),a={id:s,value:e,isValid:t.isValid,errors:t.errors};m(a)}},[s,m,y,v]),C=(e,t)=>{let s;s=t?[...v,e]:v.filter(t=>t!==e),j(s)},N=()=>{h&&h()},k=()=>{g(!0),p&&p()};t.useEffect(()=>{x&&(l[s]=!0)},[x,s,l]),t.useEffect(()=>{},[n,s,v]),t.useEffect(()=>{d&&g(!0)},[d]);const S=o||r||a?.validation?.readonly;return e.jsx(e.Fragment,{children:e.jsx("div",{className:`form-group checkbox-group ${(()=>{const e=a?.styles?.labelAlignment;return"left"===e?"label-left":"label-top"})()} ${a?.basic?.inlineLayout?"inline-layout":"vertical-layout"} ${b}`,children:!f&&a.basic.label?e.jsxs(e.Fragment,{children:[e.jsxs("label",{className:"form-label",children:[a.basic.label,a.validation.required&&e.jsx("span",{className:"required-indicator",children:"*"})]}),e.jsxs("div",{className:"input-wrapper",children:[e.jsx("div",{className:"mt-2 "+(a?.basic?.inlineLayout?"inline-options-grid":"space-y-2"),children:(a.options||[]).map((t,a)=>e.jsxs("div",{className:"form-check",children:[e.jsx("input",{type:"checkbox",id:`${s}-${a}`,name:s,value:t.value,checked:v.includes(t.value),onChange:e=>{C(t.value,e.target.checked)},onFocus:N,onBlur:k,disabled:S||t.disabled,className:"form-check-input"}),e.jsx("label",{htmlFor:`${s}-${a}`,className:"form-check-label",children:t.label})]},a))}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:l,formSubmitted:d,properties:a,localValidation:y(v),isTouched:x,mode:u})]})]}):e.jsxs("div",{className:"input-wrapper",children:[e.jsx("div",{className:"mt-2 "+(a?.basic?.inlineLayout?"inline-options-grid":"space-y-2"),children:(a.options||[]).map((t,a)=>e.jsxs("div",{className:"form-check",children:[e.jsx("input",{type:"checkbox",id:`${s}-${a}`,name:s,value:t.value,checked:v.includes(t.value),onChange:e=>{C(t.value,e.target.checked)},onFocus:N,onBlur:k,disabled:S||t.disabled,className:"form-check-input"}),e.jsx("label",{htmlFor:`${s}-${a}`,className:"form-check-label",children:t.label})]},a))}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:l,formSubmitted:d,properties:a,localValidation:y(v),isTouched:x,mode:u})]})})})},j=({id:s,properties:a,validationErrors:i={},formValue:n="",readonly:r=!1,disabled:o=!1,touchedFields:l={},formSubmitted:d=!1,mode:u="preview",onValueChange:m,onBlur:p,onFocus:h,className:b="",hideLabel:f=!1})=>{const[x,g]=t.useState(n),[v,y]=t.useState(!1),j=t.useCallback(e=>{const t={};let s=!0;return!a?.validation?.required||e&&""!==e.trim()||(t.required=!0,s=!1),{isValid:s,errors:t}},[a]),C=t.useCallback(e=>{if(g(e),m){const t=j(e),a={id:s,value:e,isValid:t.isValid,errors:t.errors};m(a)}},[s,m,j]),N=e=>{C(e)},k=()=>{h&&h()},S=()=>{y(!0),p&&p()};t.useEffect(()=>{v&&(l[s]=!0)},[v,s,l]),t.useEffect(()=>{n!==x&&g(n)},[n,x]),t.useEffect(()=>{d&&y(!0)},[d]);const w=o||r||a?.validation?.readonly;return e.jsx(e.Fragment,{children:e.jsx("div",{className:`form-group radio-group ${(()=>{const e=a?.styles?.labelAlignment;return"left"===e?"label-left":"label-top"})()} ${a?.basic?.inlineLayout?"inline-layout":"vertical-layout"} ${b}`,children:!f&&a.basic.label?e.jsxs(e.Fragment,{children:[e.jsxs("label",{className:"form-label",children:[a.basic.label,a.validation.required&&e.jsx("span",{className:"required-indicator",children:"*"})]}),e.jsxs("div",{className:"input-wrapper",children:[e.jsx("div",{className:"mt-2 "+(a?.basic?.inlineLayout?"inline-options-grid":"space-y-2"),children:(a.options||[]).map((t,a)=>e.jsxs("div",{className:"form-check",children:[e.jsx("input",{type:"radio",id:`${s}-${a}`,name:s,value:t.value,checked:x===t.value,onChange:()=>N(t.value),onFocus:k,onBlur:S,disabled:w||t.disabled,className:"form-check-input"}),e.jsx("label",{htmlFor:`${s}-${a}`,className:"form-check-label",children:t.label})]},a))}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:l,formSubmitted:d,properties:a,localValidation:j(x),isTouched:v,mode:u})]})]}):e.jsxs("div",{className:"input-wrapper",children:[e.jsx("div",{className:"mt-2 "+(a?.basic?.inlineLayout?"inline-options-grid":"space-y-2"),children:(a.options||[]).map((t,a)=>e.jsxs("div",{className:"form-check",children:[e.jsx("input",{type:"radio",id:`${s}-${a}`,name:s,value:t.value,checked:x===t.value,onChange:()=>N(t.value),onFocus:k,onBlur:S,disabled:w||t.disabled,className:"form-check-input"}),e.jsx("label",{htmlFor:`${s}-${a}`,className:"form-check-label",children:t.label})]},a))}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:l,formSubmitted:d,properties:a,localValidation:j(x),isTouched:v,mode:u})]})})})},C=({id:s,properties:a,validationErrors:i={},formValue:n="",readonly:r=!1,disabled:o=!1,touchedFields:l={},formSubmitted:d=!1,mode:u="preview",onValueChange:m,onBlur:p,onFocus:h,className:b="",hideLabel:f=!1,showCommentsInPreview:x=!1})=>{const[g,v]=t.useState(n),[y,j]=t.useState(!1),C=t.useCallback(e=>{const t={};let s=!0;return!a?.validation?.required||e&&""!==e.trim()||(t.required=!0,s=!1),{isValid:s,errors:t}},[a]),N=t.useCallback(e=>{if(v(e),j(!0),m){const t=C(e),a={id:s,value:e,isValid:t.isValid,errors:t.errors};m(a)}},[s,m,C]),k=()=>{h&&h()},S=()=>{j(!0),p&&p()};t.useEffect(()=>{y&&(l[s]=!0)},[y,s,l]),t.useEffect(()=>{n!==g&&v(n)},[n,g]),t.useEffect(()=>{d&&j(!0)},[d]);const w=()=>a?.basic?.inlineLayout?"inline-layout":"grid-layout",E=e=>{const t=e?.toLowerCase();return"pass"===t||"yes"===t?"pass":"fail"===t||"no"===t?"fail":"pass"},$=e=>{if(void 0!==e?.icon&&""!==e.icon)return e.icon;return"pass"===E(e?.value||e)?"✓":"×"},V=(e,t)=>e?.color||e?.backgroundColor?{color:t?"#ffffff":e.color||"#00814b",backgroundColor:t?e.color||"#00814b":e.backgroundColor||"#34bd4914",borderColor:e.color||"#00814b"}:{},L=e=>{if(e?.color||e?.backgroundColor)return"segment-button-label segment-button-custom";return"segment-button-label "+("pass"===E(e?.value||e)?"pass-button":"fail-button")},D=o||r||a?.validation?.readonly;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:`form-group segment-group ${(()=>{const e=a?.styles?.labelAlignment;return"left"===e?"label-left":"label-top"})()} ${b}`,children:!f&&a.basic.label?e.jsxs(e.Fragment,{children:[e.jsxs("label",{className:"form-label",children:[a.basic.label,a.validation.required&&e.jsx("span",{className:"required-indicator",children:"*"})]}),e.jsx("div",{className:"form-segment-wrapper",children:e.jsx("div",{className:`form-segment-container ${w()}`,children:(a.options||[]).map((t,a)=>{const i=g===t.value,n=V(t,i),r=L(t),o=$(t);return e.jsxs("div",{className:"form-segment-option "+(i?"selected":""),children:[e.jsx("input",{type:"radio",id:`${s}_option_${a}`,name:s,value:t.value,checked:i,onChange:()=>!D&&!t.disabled&&N(t.value),onFocus:k,onBlur:S,disabled:D||t.disabled,className:"form-segment-radio"}),e.jsxs("label",{htmlFor:`${s}_option_${a}`,className:r,style:Object.keys(n).length>0?n:void 0,children:[o&&e.jsx("span",{className:"segment-icon",children:o}),e.jsx("span",{className:"segment-text",children:t.value})]})]},a)})})})]}):e.jsx("div",{className:"form-segment-wrapper",children:e.jsx("div",{className:`form-segment-container ${w()}`,children:(a.options||[]).map((t,a)=>{const i=g===t.value,n=V(t,i),r=L(t),o=$(t);return e.jsxs("div",{className:"form-segment-option "+(i?"selected":""),children:[e.jsx("input",{type:"radio",id:`${s}_option_${a}`,name:s,value:t.value,checked:i,onChange:()=>!D&&!t.disabled&&N(t.value),onFocus:k,onBlur:S,disabled:D||t.disabled,className:"form-segment-radio"}),e.jsxs("label",{htmlFor:`${s}_option_${a}`,className:r,style:Object.keys(n).length>0?n:void 0,children:[o&&e.jsx("span",{className:"segment-icon",children:o}),e.jsx("span",{className:"segment-text",children:t.value})]})]},a)})})})}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:l,formSubmitted:d,properties:a,localValidation:C(g),isTouched:y,mode:u})]})},N=({id:s,properties:a,validationErrors:i={},formValue:n="",readonly:r=!1,disabled:o=!1,touchedFields:l={},formSubmitted:d=!1,mode:u="preview",onValueChange:m,onBlur:p,onFocus:h,className:b="",hideLabel:f=!1})=>{const[x,g]=t.useState(n),[v,y]=t.useState(!1),[j,C]=t.useState(!1),N=t.useCallback(e=>{const t={};let s=!0;const i=a.name||"",n=a.basic?.dateTimeMode||("datetime-picker"===i?"datetime":"date"),r=e?String(e).trim():"";if(a?.validation?.required&&(!r||""===r))return t.required=!0,s=!1,{isValid:s,errors:t};if(r&&""!==r)if("time"===n){if(!/^([0-1][0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/.test(r))return t.invalidDate=!0,s=!1,{isValid:s,errors:t}}else if("datetime"===n){const e=new Date(r);if(isNaN(e.getTime()))return t.invalidDate=!0,s=!1,{isValid:s,errors:t};if(a?.validation?.minDate){const i=new Date(a.validation.minDate);e<i&&(t.minDate=!0,t.minDateMessage=`Date and time must be on or after ${i.toLocaleDateString()}`,s=!1)}if(a?.validation?.maxDate){const i=new Date(a.validation.maxDate);e>i&&(t.maxDate=!0,t.maxDateMessage=`Date and time must be on or before ${i.toLocaleDateString()}`,s=!1)}}else{const e=new Date(r);if(isNaN(e.getTime()))return t.invalidDate=!0,s=!1,{isValid:s,errors:t};if(a?.validation?.minDate){const i=new Date(a.validation.minDate);e<i&&(t.minDate=!0,t.minDateMessage=`Date must be on or after ${i.toLocaleDateString()}`,s=!1)}if(a?.validation?.maxDate){const i=new Date(a.validation.maxDate);e>i&&(t.maxDate=!0,t.maxDateMessage=`Date must be on or before ${i.toLocaleDateString()}`,s=!1)}}return{isValid:s,errors:t}},[a]),k=t.useCallback(e=>{if(g(e),m){const t=N(e),a={id:s,value:e,isValid:t.isValid,errors:t.errors};m(a)}},[s,m,N]);t.useEffect(()=>{v&&(l[s]=!0)},[v,s,l]),t.useEffect(()=>{n===x||j||g(n)},[n,x,j]),t.useEffect(()=>{d&&y(!0)},[d]);const S=o||r||a?.validation?.readonly,w=a.name||"",E=a.basic?.dateTimeMode||("datetime-picker"===w?"datetime":"date"),$=(()=>{switch(E){case"time":return"time";case"datetime":return"datetime-local";default:return"date"}})();return e.jsxs("div",{className:`form-group ${(()=>{const e=a?.styles?.labelAlignment;return"left"===e?"label-left":"label-top"})()}`,children:[!f&&a.basic.label&&e.jsxs("label",{htmlFor:s,className:"form-label",children:[a.basic.label,a.validation.required&&e.jsx("span",{className:"required-indicator",children:"*"})]}),e.jsxs("div",{className:"input-wrapper",children:[e.jsx("input",{type:$,id:s,value:x,onChange:e=>{const t=e.target.value;k(t)},onFocus:()=>{C(!0),h&&h()},onBlur:()=>{if(C(!1),y(!0),m){const e=N(x),t={id:s,value:x,isValid:e.isValid,errors:e.errors};m(t)}p&&p()},disabled:S,readOnly:r||a?.validation?.readonly,min:a?.validation?.minDate,max:a?.validation?.maxDate,className:`form-date ${!N(x).isValid&&v?"is-invalid":""} ${b}`.trim()}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:l,formSubmitted:d,properties:a,localValidation:N(x),isTouched:v,mode:u})]})]})},k=({id:s,properties:a,validationErrors:i={},formValue:n="",readonly:r=!1,disabled:o=!1,touchedFields:l={},formSubmitted:d=!1,mode:u="preview",onValueChange:m,onBlur:p,onFocus:h,className:b="",hideLabel:f=!1})=>{const x=t.useRef(null),[g,v]=t.useState(!1),[y,j]=t.useState(!1),[C,N]=t.useState(n),[k,S]=t.useState(!1),w=t.useCallback(e=>{const t={};let s=!0;return!a?.validation?.required||e&&""!==e.trim()||(t.required=!0,s=!1),{isValid:s,errors:t}},[a]),E=t.useCallback(e=>{if(N(e),m){const t=w(e),a={id:s,value:e,isValid:t.isValid,errors:t.errors};m(a)}},[s,m,w]),$=t.useCallback(()=>{const e=document.documentElement.classList.contains("dark")||"dark"===document.documentElement.getAttribute("data-theme");let t=getComputedStyle(document.documentElement).getPropertyValue("--df-color-fb-input-bg").trim();t||(t=e?"#2c2e34":"#ffffff");return{strokeColor:e?"#ffffff":"#000000",backgroundColor:t}},[]),V=t.useCallback(e=>{if(!e)return;const t=x.current;if(!t)return;const a=t.getContext("2d");if(!a)return;const i=new Image;i.onload=()=>{a.clearRect(0,0,t.width,t.height);const e=$();a.fillStyle=e.backgroundColor,a.fillRect(0,0,t.width,t.height);const s=t.width/t.height,n=i.width/i.height;let r=t.width,o=t.height,l=0,c=0;n>s?(o=t.width/n,c=(t.height-o)/2):(r=t.height*n,l=(t.width-r)/2),a.drawImage(i,l,c,r,o)},i.onerror=t=>{console.error("DfFormSignature: error loading image",{id:s,error:t,dataURL:e.substring(0,50)+"..."})},i.src=e},[$,s]),L=t.useCallback(()=>{const e=x.current;if(!e)return;const t=e.getContext("2d");if(!t)return;const s=e.getBoundingClientRect();e.width=s.width,e.height=s.height,e.style.width=s.width+"px",e.style.height=s.height+"px";const a=$();t.strokeStyle=a.strokeColor,t.lineWidth=2,t.lineCap="round",t.lineJoin="round",C?V(C):(t.fillStyle=a.backgroundColor,t.fillRect(0,0,e.width,e.height))},[C,$,V]),D=t.useCallback(()=>{setTimeout(()=>{L()},100)},[L]);t.useEffect(()=>{const e=()=>{D()},t=new MutationObserver(e=>{e.forEach(e=>{if("attributes"===e.type&&"class"===e.attributeName){const t=e.target;t.classList.contains("form-canvas-container")&&(t.classList.contains("mobile-view")||t.classList.contains("tablet-view")||t.classList.contains("desktop-view"))&&D()}})});return t.observe(document.body,{attributes:!0,attributeFilter:["class"],subtree:!0}),window.addEventListener("resize",e),()=>{t.disconnect(),window.removeEventListener("resize",e)}},[D]);const F=t.useCallback(e=>{const t=x.current;if(!t)return{x:0,y:0};const s=t.getBoundingClientRect(),a=t.width/s.width,i=t.height/s.height,n=e.type.includes("mouse")?e.clientX:e.touches[0].clientX,r=e.type.includes("mouse")?e.clientY:e.touches[0].clientY;return{x:(n-s.left)*a,y:(r-s.top)*i}},[]),T=e=>{if(r||o||a?.validation?.readonly)return;if(e.target.closest(".clear-signature-btn"))return;e.preventDefault(),e.stopPropagation(),v(!0),j(!0);const t=x.current;if(!t)return;const s=t.getContext("2d");if(!s)return;const{x:i,y:n}=F(e),l=$();s.strokeStyle=l.strokeColor,s.lineWidth=2,s.lineCap="round",s.lineJoin="round",s.beginPath(),s.moveTo(i,n)},A=e=>{if(!g)return;e.preventDefault(),e.stopPropagation();const t=x.current;if(!t)return;const s=t.getContext("2d");if(!s)return;const{x:a,y:i}=F(e);s.lineTo(a,i),s.stroke()},I=()=>{if(!g)return;v(!1),S(!0);const e=x.current;if(e){(e=>{const t=e.getContext("2d");if(!t)return!1;const s=t.getImageData(0,0,e.width,e.height).data;for(let e=0;e<s.length;e+=4){const t=s[e],a=s[e+1],i=s[e+2];if(s[e+3]>0&&(t<255||a<255||i<255))return!0}})(e);const t=e.toDataURL("image/png");N(t),E(t),setTimeout(()=>{S(!1)},100)}else S(!1)},R=t.useCallback(()=>{const e=x.current;if(!e)return;const t=e.getContext("2d");if(!t)return;const s=$();if(t.strokeStyle=s.strokeColor,C){const a=C,i=e.getBoundingClientRect();t.fillStyle=s.backgroundColor,t.fillRect(0,0,i.width,i.height),a&&V(a)}else{const a=e.getBoundingClientRect();t.fillStyle=s.backgroundColor,t.fillRect(0,0,a.width,a.height)}},[$,C,V]);t.useEffect(()=>{const e=new MutationObserver(e=>{e.forEach(e=>{"attributes"!==e.type||"class"!==e.attributeName&&"data-theme"!==e.attributeName||R()})});return e.observe(document.documentElement,{attributes:!0,attributeFilter:["class","data-theme"]}),()=>{e.disconnect()}},[R]);t.useEffect(()=>{y&&(l[s]=!0)},[y,s,l]),t.useEffect(()=>{if(!(n===C||g||k||""!==C&&""===n)){if(n===C)return;N(n),n&&V(n)}},[n,C,g,k]),t.useEffect(()=>{d&&j(!0)},[d]),t.useEffect(()=>{if("test"!==u){N("");const e=x.current;if(e){const t=e.getContext("2d");if(t){const s=e.getBoundingClientRect();e.width=s.width,e.height=s.height;const a=$();t.fillStyle=a.backgroundColor,t.fillRect(0,0,s.width,s.height)}}}},[u]),t.useEffect(()=>{L()},[u]);const M=o||r||a?.validation?.readonly;return e.jsxs("div",{className:`form-group ${(()=>{const e=a?.styles?.labelAlignment;return"left"===e?"label-left":"label-top"})()}`,children:[!f&&a.basic.label&&e.jsxs("label",{htmlFor:s,className:"form-label",children:[a.basic.label,a.validation.required&&e.jsx("span",{className:"required-indicator",children:"*"})]}),e.jsxs("div",{className:"input-wrapper",children:[e.jsxs("div",{className:"signature-container",style:{position:"relative",width:"100%",maxWidth:"100%",overflow:"hidden"},children:[e.jsx("canvas",{ref:x,id:s,className:`form-signature ${!w(C).isValid&&y?"is-invalid":""} ${b}`.trim(),onMouseDown:T,onMouseMove:A,onMouseUp:I,onMouseLeave:I,onTouchStart:T,onTouchMove:A,onTouchEnd:I,onFocus:()=>{h&&h()},onBlur:()=>{p&&p()},style:{width:"100%",height:"150px",border:"2px solid var(--df-color-primary-border)",borderRadius:"6px",cursor:M?"not-allowed":"crosshair",backgroundColor:"var(--df-color-fb-input-bg)",touchAction:"none",userSelect:"none"}}),!M&&e.jsx("button",{type:"button",onClick:e=>(e=>{e?.preventDefault(),e?.stopPropagation();const t=x.current;if(!t)return;const s=t.getBoundingClientRect();t.width=s.width,t.height=s.height;const a=t.getContext("2d");if(!a)return;const i=$();a.fillStyle=i.backgroundColor,a.fillRect(0,0,s.width,s.height),a.strokeStyle=i.strokeColor,a.lineWidth=2,a.lineCap="round",a.lineJoin="round",N(""),E("")})(e),className:"clear-signature-btn",style:{position:"absolute",bottom:"8px",right:"8px",padding:"4px 8px",backgroundColor:"var(--df-color-error-primary)",color:"white",border:"none",borderRadius:"4px",cursor:"pointer",fontSize:"0.75rem",fontWeight:"500",zIndex:10,transition:"all 0.2s ease",minWidth:"60px",minHeight:"28px"},onMouseEnter:e=>{e.currentTarget.style.backgroundColor="var(--df-color-error-dark, #dc2626)",e.currentTarget.style.transform="scale(1.05)"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="var(--df-color-error-primary)",e.currentTarget.style.transform="scale(1)"},children:"Clear"})]}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:l,formSubmitted:d,properties:a,localValidation:w(C),isTouched:y,mode:u})]})]})},S=({id:s,properties:a,validationErrors:i={},formValue:n=null,readonly:r=!1,disabled:o=!1,touchedFields:l={},formSubmitted:d=!1,mode:u="test",onValueChange:m,onBlur:p,onFocus:h,className:b="",hideLabel:f=!1})=>{const[x,g]=t.useState([]),[v,y]=t.useState(!1),[j,C]=t.useState(!1),N=t.useRef(null),k=t.useCallback(e=>{if(!e)return[];const t=Array.isArray(e)?e:Array.from(e),a=[];return t.forEach((e,t)=>{let i,n,r=0,o="",l="";if(e instanceof File||e instanceof Blob){const s=e;if(r=s.size||0,o=s.type||"",l=s.name||`file-${t}`,n=s,o.startsWith("image/"))try{i=URL.createObjectURL(s)}catch(e){console.error("Error creating object URL:",e),i=void 0}}else if("string"==typeof e){const s=e;if(l=`file-${t}`,s.startsWith("data:")){const e=s.indexOf(";");o=e>5?s.substring(5,e):"application/octet-stream"}else{const e=s.match(/\.(jpg|jpeg|png|gif|webp|svg|pdf|doc|docx|xls|xlsx|zip|rar)$/i);if(e){o={jpg:"image/jpeg",jpeg:"image/jpeg",png:"image/png",gif:"image/gif",webp:"image/webp",svg:"image/svg+xml",pdf:"application/pdf",doc:"application/msword",docx:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",xls:"application/vnd.ms-excel",xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",zip:"application/zip",rar:"application/x-rar-compressed"}[e[1].toLowerCase()]||"application/octet-stream"}else o="application/octet-stream"}(s.startsWith("data:image")||s.startsWith("http://")||s.startsWith("https://")||s.startsWith("blob:"))&&(i=s),n=new File([],l,{type:o})}else{if(!e||"object"!=typeof e)return;{const s=e;if(l=s.name||s.fileName||`file-${t}`,r=s.size||s.fileSize||0,o=s.type||s.fileType||s.mimeType||"",s.url||s.path)i=s.url||s.path;else if(o.startsWith("image/")&&s.data){const e=s.data;i="string"==typeof e?e.startsWith("data:")?e:`data:${o};base64,${e}`:void 0}n=new File([],l,{type:o})}}a.push({file:n,id:`${s}-file-${t}`,size:r,type:o,name:l,preview:i})}),a},[s]),S=t.useCallback(()=>({isValid:!0,errors:{}}),[]),w=t.useCallback(e=>{if(r||o)return;const t=k(e),i=x.length>0?[...x,...t]:t,n=a?.validation?.maxFiles||1/0,l=i.slice(0,n);if(g(l),C(!0),m){const e=S(),t={id:s,value:l.map(e=>e.file),isValid:e.isValid,errors:e.errors};m(t)}},[x,a,r,o,m,S,k,s]),E=e=>{if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,t)).toFixed(2))+" "+["Bytes","KB","MB","GB"][t]},$=e=>e.startsWith("image/")?"🖼️":e.startsWith("video/")?"🎥":e.startsWith("audio/")?"🎵":e.includes("pdf")?"📄":e.includes("word")||e.includes("document")?"📝":e.includes("excel")||e.includes("spreadsheet")?"📊":e.includes("zip")||e.includes("rar")?"📦":"📁";t.useEffect(()=>{j&&(l[s]=!0)},[j,s,l]),t.useEffect(()=>{("edit"===u||"test"===u)&&C(!1)},[u]),t.useEffect(()=>{const e=k(n);g(e)},[n,k]),t.useEffect(()=>{d&&C(!0)},[d]),t.useEffect(()=>()=>{x.forEach(e=>{if(e.preview&&e.preview.startsWith("blob:"))try{URL.revokeObjectURL(e.preview)}catch(e){console.error("Error revoking object URL:",e)}})},[x]);const V=()=>{const e=a?.styles?.labelAlignment;return"left"===e?"label-left":"label-top"},L=o||r||a?.validation?.readonly,D=a?.validation?.multiple||!1,F=a?.validation?.accept||"*/*",T=a?.validation?.maxFiles||1/0,A=x.length<T&&(D||T>1),I="edit"===u,R="preview"===u||"test"===u,M=x.filter(e=>e.type.startsWith("image/")),z=x.filter(e=>!e.type.startsWith("image/")),q=M.length>0;return R&&q?e.jsxs("div",{className:`form-group ${V()}`,children:[!f&&e.jsxs("label",{htmlFor:s,className:"form-label",children:[a.basic?.label||"Attachments",a.validation?.required&&e.jsx("span",{className:"required-indicator",children:"*"})]}),e.jsxs("div",{className:"file-upload-wrapper",children:[e.jsxs("div",{className:"file-image-display",children:[M.map(t=>e.jsxs("div",{className:"file-image-container",children:[t.preview&&e.jsx("img",{src:t.preview,alt:t.name,className:"file-image-preview"}),e.jsxs("div",{className:"file-image-info",children:[e.jsx("div",{className:"file-name",title:t.name,children:t.name}),e.jsx("div",{className:"file-size",children:E(t.size)})]})]},t.id)),z.length>0&&e.jsxs("div",{className:"file-other-files",children:[e.jsx("div",{className:"file-other-files-label",children:"Other Files:"}),z.map(t=>e.jsxs("div",{className:"file-item-minimal",children:[e.jsx("div",{className:"file-icon",children:$(t.type)}),e.jsxs("div",{className:"file-info",children:[e.jsx("div",{className:"file-name",title:t.name,children:t.name}),e.jsx("div",{className:"file-size",children:E(t.size)})]})]},t.id))]})]}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:l,formSubmitted:d,properties:a,localValidation:S(),isTouched:j,mode:u})]})]}):e.jsxs("div",{className:`form-group ${V()}`,children:[!f&&e.jsxs("label",{htmlFor:s,className:"form-label",children:[a.basic?.label||"Attachments",a.validation?.required&&e.jsx("span",{className:"required-indicator",children:"*"})]}),e.jsxs("div",{className:"file-upload-wrapper",children:[e.jsxs("div",{className:`file-upload-area ${v?"drag-over":""} ${r?"readonly":""} ${o?"disabled":""} ${b}`.trim(),onDragOver:e=>{e.preventDefault(),r||o||y(!0)},onDragLeave:e=>{e.preventDefault(),y(!1)},onDrop:e=>{if(e.preventDefault(),y(!1),r||o)return;const t=e.dataTransfer.files;t.length>0&&w(t)},onClick:e=>{const t=e.target,s=null!==t.closest(".file-item"),a=null!==t.closest(".file-remove");!I||L||0!==x.length||s||a||N.current?.click()},onFocus:()=>{h&&h()},onBlur:()=>{if(C(!0),"test"===u&&m){const e=S(),t={id:s,value:x.map(e=>e.file),isValid:e.isValid,errors:e.errors};m(t)}p&&p()},tabIndex:L?-1:0,children:[e.jsx("input",{ref:N,type:"file",id:s,multiple:D,accept:F,onChange:e=>{const t=e.target.files;t&&t.length>0&&(w(t),e.target.value="")},disabled:L,style:{display:"none"}}),0===x.length?e.jsxs("div",{className:"upload-placeholder",onClick:e=>{e.stopPropagation(),I&&!L&&N.current?.click()},children:[e.jsx("div",{className:"upload-icon",children:"📁"}),e.jsx("div",{className:"upload-text",children:a.basic.placeholder&&e.jsx("p",{className:"upload-hint",children:a.basic.placeholder})})]}):e.jsx("div",{className:"file-list",children:x.map(t=>e.jsxs("div",{className:"file-item",children:[e.jsx("div",{className:"file-preview",children:t.preview?e.jsx("img",{src:t.preview,alt:t.name,className:"file-image"}):e.jsx("div",{className:"file-icon",children:$(t.type)})}),e.jsxs("div",{className:"file-info",children:[e.jsx("div",{className:"file-name",title:t.name,children:t.name}),e.jsx("div",{className:"file-size",children:E(t.size)})]}),I&&!L&&e.jsx("button",{type:"button",className:"file-remove",onClick:e=>{e.stopPropagation(),(e=>{if(r||o)return;const t=x.filter(t=>t.id!==e);if(g(t),C(!0),m){const e=S(),a={id:s,value:t.map(e=>e.file),isValid:e.isValid,errors:e.errors};m(a)}})(t.id)},"aria-label":`Remove ${t.name}`,children:"✕"})]},t.id))})]}),x.length>0&&A&&!L&&I&&e.jsxs("button",{type:"button",className:"file-add-more",onClick:e=>{e.stopPropagation(),!L&&N.current&&I&&(N.current.value="",N.current.click())},"aria-label":"Add more files",children:[e.jsx("svg",{className:"file-add-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("path",{d:"M12 5v14M5 12h14"})}),e.jsx("span",{className:"file-add-text",children:"Add More Files"})]}),e.jsx(c,{validationErrors:i,fieldId:s,touchedFields:l,formSubmitted:d,properties:a,localValidation:S(),isTouched:j,mode:u})]})]})},w=({id:s,properties:i,validationErrors:n={},formValue:r=null,readonly:o=!1,disabled:l=!1,touchedFields:d={},formSubmitted:u=!1,mode:m="test",onValueChange:p,onBlur:h,onFocus:b,className:f="",hideLabel:x=!1})=>{const[g,v]=t.useState(r),[y,j]=t.useState(!1),[C,N]=t.useState(""),[k,S]=t.useState(!1),[w,E]=t.useState(!1),[$,V]=t.useState({lat:40.7128,lng:-74.006}),[L,D]=t.useState(null),[F,T]=t.useState(10),[A,I]=t.useState(""),[R,M]=t.useState(!1),z=t.useRef(null),[q,O]=t.useState(!1),[P,B]=t.useState(null),[W,_]=t.useState(!1);t.useEffect(()=>{r?(v(r),r.latitude&&r.longitude&&(D({lat:r.latitude,lng:r.longitude,isCurrentLocation:!1}),V({lat:r.latitude,lng:r.longitude}))):(v(null),D(null))},[r]),t.useEffect(()=>{w&&40.7128===$.lat&&$.lng},[w,$]),t.useEffect(()=>{(o||l)&&(w&&E(!1),A&&I(""),q&&(O(!1),B(null)))},[o,l]);const U=t.useCallback(async(e,t)=>{_(!0);try{const s=await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${e}&lon=${t}&addressdetails=1&zoom=18`),a=await s.json();if(a&&a.address){const e=a.address;return{placeName:a.display_name||"",city:e.city||e.town||e.village||e.municipality||"",country:e.country||""}}}catch(e){console.error("Reverse geocoding failed:",e)}finally{_(!1)}return{placeName:"",city:"",country:""}},[]),H=t.useCallback(async(e,t,a)=>{const i=await U(e,t),n={latitude:e,longitude:t,timestamp:Date.now(),placeName:i.placeName,city:i.city,country:i.country,address:i.placeName,...a};if(v(n),D({lat:e,lng:t,isCurrentLocation:!1}),S(!0),p){p({id:s,value:n,isValid:!0,errors:{}})}},[U,s,p]),J=t.useCallback(()=>{if(o||l)return;if(!navigator.geolocation)return void N("Geolocation is not supported by this browser.");j(!0),N("");const e={enableHighAccuracy:i.validation?.enableHighAccuracy??!0,timeout:i.validation?.timeout??1e4,maximumAge:i.validation?.maximumAge??3e5};navigator.geolocation.getCurrentPosition(async e=>{const t=e.coords.latitude,s=e.coords.longitude;D({lat:t,lng:s,isCurrentLocation:!0}),V({lat:t,lng:s}),S(!0),await H(t,s,{accuracy:e.coords.accuracy,timestamp:e.timestamp}),j(!1)},e=>{j(!1);let t="Unable to retrieve your location.";switch(e.code){case e.PERMISSION_DENIED:t="Location access denied by user.";break;case e.POSITION_UNAVAILABLE:t="Location information is unavailable.";break;case e.TIMEOUT:t="Location request timed out."}N(t)},e)},[o,l,s,p,i]),G=t.useCallback(()=>{if(!o&&!l&&(v(null),D(null),N(""),S(!0),p)){p({id:s,value:null,isValid:!0,errors:{}})}},[o,l,s,p]),Y=t.useCallback(()=>{o||l||E(!w)},[o,l,w]),X=t.useCallback((e,t,s,a,i,n)=>{const r=e-i/2,o=t-n/2,l=156543.03392*Math.cos(s.lat*Math.PI/180)/Math.pow(2,a),c=r*l,d=o*l;return{lat:s.lat+d/111320,lng:s.lng+c/(111320*Math.cos(s.lat*Math.PI/180))}},[]),Z=t.useCallback(e=>{o||l||!z.current||0===e.button&&(O(!0),B({x:e.clientX,y:e.clientY}),e.preventDefault())},[o,l]),K=t.useCallback(e=>{if(!q||!P||!z.current)return;const t=e.clientX-P.x,s=e.clientY-P.y,a=156543.03392*Math.cos($.lat*Math.PI/180)/Math.pow(2,F),i=-s*a/111320,n=t*a/(111320*Math.cos($.lat*Math.PI/180));V({lat:$.lat+i,lng:$.lng+n}),B({x:e.clientX,y:e.clientY})},[q,P,$,F]),Q=t.useCallback(async e=>{if(!z.current)return;if(q&&P){const t=Math.abs(e.clientX-P.x),s=Math.abs(e.clientY-P.y);if(t>5||s>5)return O(!1),void B(null)}if(o||l)return O(!1),void B(null);const t=z.current.getBoundingClientRect(),s=e.clientX-t.left,a=e.clientY-t.top,{lat:i,lng:n}=X(s,a,$,F,t.width,t.height);await H(i,n),O(!1),B(null)},[o,l,z,$,F,X,H,q,P]),ee=t.useCallback(async e=>{if(e.trim()&&!o&&!l){M(!0),N("");try{const t=await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(e)}&limit=5&addressdetails=1`),a=await t.json();if(a&&a.length>0){const e=a[0],t=parseFloat(e.lat),i=parseFloat(e.lon),n=e.address||{},r={latitude:t,longitude:i,address:e.display_name,placeName:e.display_name,city:n.city||n.town||n.village||n.municipality||"",country:n.country||"",timestamp:Date.now()};if(v(r),D({lat:t,lng:i,isCurrentLocation:!1}),V({lat:t,lng:i}),S(!0),p){p({id:s,value:r,isValid:!0,errors:{}})}}else N("No locations found for your search.")}catch(e){N("Failed to search for location. Please try again.")}finally{M(!1)}}},[o,l,s,p]),te=()=>{b&&b()},se=()=>{S(!0),h&&h()},ae=l||o||i?.validation?.readonly,ie=i?.basic?.label||"Location",ne=i?.basic?.description||"";return e.jsxs("div",{className:`form-group ${x?"no-label":""} ${f}`,children:[!x&&e.jsxs("label",{htmlFor:s,className:"form-label",children:[ie,i?.validation?.required&&e.jsx("span",{className:"required-indicator",children:"*"})]}),ne&&e.jsx("div",{className:"form-group-description",children:ne}),e.jsxs("div",{className:"location-wrapper",children:[!(o&&g)&&e.jsxs("div",{className:"location-controls",children:[e.jsx("button",{type:"button",className:"location-btn "+(y?"loading":""),onClick:J,disabled:ae||y,onFocus:te,onBlur:se,tabIndex:ae?-1:0,children:y?e.jsxs(e.Fragment,{children:[e.jsx(a.Loader2,{size:16,className:"loading-spinner"}),"Getting Location..."]}):e.jsxs(e.Fragment,{children:[e.jsx(a.Navigation,{size:16}),"Get Current Location"]})}),e.jsxs("button",{type:"button",className:"location-btn secondary",onClick:Y,disabled:ae,onFocus:te,onBlur:se,tabIndex:ae?-1:0,children:[e.jsx(a.MapPin,{size:16}),w?"Hide Map":"Choose on Map"]})]}),g&&e.jsxs("div",{className:"location-display",children:[!o&&e.jsx("button",{type:"button",classNam