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

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

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