| 1 |
import{ap as k,g,D as b,j as t,K as j,_ as e,b2 as C,a as y,h as m,E as T,bs as I,I as f}from"./main-634.js";import{B as Y}from"./bf-638-271.js";import{P as B}from"./bf-247-269.js";import{e as p}from"./bf-25-81.js";function M({className:o,size:a}){const i=k(C),{formType:s,formID:h}=g(),l=b(),d=()=>{l(`/form/builder/${s}/${h}/fields-list`),i(null)};return t.jsxs("button",{type:"button",role:"button",tabIndex:"0","data-testid":"back2-fld-lst-btn",className:o,onClick:d,children:[t.jsx(j,{size:a}),t.jsx("span",{children:e("Back to fields list")})]})}const S={name:e("Name is the unique identifier for the field. It is used to reference the field in the form submission data."),lbl:e("Label is the title of the field that appears above or beside the field. You can show or hide the field label by toggling this option."),autoComplete:e("Autocomplete allows you to specify what type of automated assistance the browser should provide for filling out the field, <a target='_blank' href='https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete'>Learn more</a>"),adminLbl:e("Admin Label is the title of the field that will be used as an alternative reference throughout the dashboard. You can toggle this option to use or disable the admin label."),subtitle:e("Subtitle is an optional description that appears under the Field Label. You can show or hide the field subtitle by toggling this option."),helpText:e("Helper Text is an optional text that appears beneath the field to provide additional information to the user. You can show or hide the helper text by toggling this option."),defaultValue:e("Default Value is the initial value that will appear in the field. You can show or hide the default value by toggling this option."),suggestion:e("Suggestions allows you to add a custom suggestion list that will display suggestions as the user types in the input field."),placeholder:e("Placeholder is the text that appears inside the field before your user enters their own content. You can show or hide the field placeholder by toggling this option."),inputMode:e("This allows browser to display an appropriate virtual keyboard if needed. <a target='_blank' href='https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode'>Learn more</a>"),inputMask:e("Input Mask allows you to specify a pattern for the input field, helping users enter data in the correct format.<a target='_blank' href='https://bit-form.com/wp-docs/form-fields/bit-form-input-mask/'>Learn more</a>"),pattern:e("Set a regular expression pattern that the input value should match for the field."),required:e("This allows to make the field mandatory for users to fill out before submitting the form. You can toggle this option to use or disable the required."),fieldHidden:e("The hide field feature allows you to hide the field from the user on the form. You can toggle this option to show or hide the field."),btnReverse:e("The reverse button feature allows to reverse the clear and undo button. You can toggle this option to reverse clear and undo button."),readonly:e("Readonly feature allows you to set a field as read-only, meaning that users will not be able to edit the content of that field. You can toggle this option to enable or disable the setting."),disabled:e("Disabling a field prevents users from interacting with it or entering data. You can toggle this option to enable or disable the field as needed."),uniqueEntry:e("Enabling this option will check from the submitted entries whether its value is duplicate."),userUnique:e("Enabling this option will check from your WordPress user database whether its value is duplicate."),stripeTheme:e('Stripe provide a variety of themes for the payment form. You can choose the theme that best suits theme your payment form. <a target="_blank" href="https://stripe.com/docs/elements/appearance-api">Learn more</a>'),amountType:e("Stripe provide minimum or maximum amount for different payment method type and currency. <a target='_blank' href='https://stripe.com/docs/currencies#minimum-and-maximum-charge-amounts'>learn more</a>"),mollieLocale:e("Allows you to preset the language to be used in the hosted payment pages shown to the consumer. This option is Optional. <a target='_blank' href='https://docs.mollie.com/reference/v2/payments-api/create-payment#:~:text=locale,OPTIONAL,-Allows%20you%20to'>learn more</a>"),mollieDescription:e("Mollie provide a description for the payment. This option is required. <a target='_blank' href='https://docs.mollie.com/reference/create-payment#:~:text=Body%20Params-,description,required,-The%20description%20of'>learn more</a>. and also you add field value in this description. e.g: This Payment from Name: ${field_key}"),undoBtn:e("You can add or remove Undo button form Signature Field. You can toggle this option to add or remove the Undo button."),clrBtn:e("You can add or remove Clear button form Signature Field. You can toggle this option to add or remove the Clear button."),ratingLbl:e("This allows to show the rating message on hover. You can toggle this option to show or hide the rating message on hover."),ratingSelectTip:e("This allows to show the rating message on rating selected. You can toggle this option to show or hide the rating message on rating selected."),imageMultipleImage:e("By enabling this feature, you will enable to select multiple image."),imageOptLbl:e("By enabling this feature, you will be hide image label."),showHeaderIcon:e("This allows to show the header icon. You can toggle this option to show or hide the header icon."),stemBtnSettings:e("This allows to show the stem button settings. You can toggle this option to show or hide the stem button settings."),stepLbl:e("This allows to show the step label. You can toggle this option to show or hide the step label."),stepSubtitle:e("This allows to show the step subtitle. You can toggle this option to show or hide the step subtitle."),containerClass:e("Container Class allows you to add custom CSS classes to the field container. You can use this to apply custom styles to the field wrapper."),emailConfirmField:e("This option allows you to enable a confirm email field that requires users to re-enter their email address for verification."),passwordConfirmField:e("This option allows you to enable a confirm password field that requires users to re-enter their password for verification."),showPasswordIcon:e("This allows to show the password icon. You can toggle this option to show or hide the password icon.")};var D=S;function L({size:o,stroke:a=2,className:i="",rotateDeg:s=0}){return t.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:o,height:o,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:a,strokeLinecap:"round",strokeLinejoin:"round",className:`lucide lucide-arrow-left-to-line-icon lucide-arrow-left-to-line ${i}`,style:{transform:`rotate(${s}deg)`},children:[t.jsx("path",{d:"M3 19V5"}),t.jsx("path",{d:"m13 6-6 6 6 6"}),t.jsx("path",{d:"M7 12h14"})]})}function $({route:o}){const{fieldKey:a,formID:i,formType:s}=g(),h=b(),{css:l}=y(),d=()=>{h(`/form/builder/${s}/${i}/field-theme-customize/${o}/${a}`)};return t.jsx("button",{"data-testid":`${o}-styl-btn`,type:"button",onClick:d,className:l(m.icnBtn),children:t.jsx(Y,{height:"18",width:"12"})})}function q({label:o,iconSrc:a,position:i,setIcon:s,removeIcon:h,styleRoute:l,isPro:d,proProperty:w,alt:x,classNames:v=""}){const{css:n}=y(),c=!d||d&&f;return t.jsxs("div",{className:`${n(r.container)} ${v}`,children:[t.jsxs("div",{className:n(r.wrapper(i)),children:[t.jsx("div",{className:n(r.iconContainer(i)),onClick:c?s:void 0,role:"button",tabIndex:0,onKeyDown:u=>{c&&(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),s())},title:"Click to select icon",children:a?t.jsx("img",{src:a,title:"Icon",alt:x||o,width:"18",height:"18"}):t.jsx(L,{size:18,stroke:2,rotateDeg:i==="prefix"?0:180})}),t.jsx("span",{className:`${n(r.label(i))} icon-label`,children:e(o)}),t.jsxs("div",{className:`${n(r.actions(i))} icon-actions`,children:[t.jsx(p,{msg:"Change",className:"",children:t.jsx("button",{"data-testid":`${l}-edt-btn`,type:"button",onClick:c?s:void 0,className:n(m.icnBtn,r.actionBtn),children:t.jsx(T,{size:16})})}),a&&t.jsx(p,{msg:"Style",className:"",children:t.jsx("div",{className:n(r.iconStyleBtnWrapper),children:t.jsx($,{route:l})})}),a&&h&&t.jsx(p,{msg:"Remove",className:"",children:t.jsx("button",{"data-testid":`${l}-rmv-btn`,onClick:c?h:void 0,className:n(m.icnBtn,r.actionBtn),type:"button",children:t.jsx(I,{size:"12"})})})]})]}),d&&!f&&t.jsx(B,{proProperty:w})]})}const r={container:{position:"relative",display:"flex",alignItems:"center",justifyContent:"space-between"},wrapper:o=>({display:"flex",alignItems:"center",position:"relative",width:"100%",flexDirection:o==="suffix"?"row-reverse":"row",gap:"8px","&:hover":{"& .icon-label":{opacity:0,visibility:"hidden"},"& .icon-actions":{opacity:1,visibility:"visible",transform:"translateX(0)"}}}),iconContainer:o=>({display:"flex",alignItems:"center",justifyContent:"center",color:"#718096",flexShrink:0,cursor:"pointer",padding:"4px",borderRadius:"4px",transition:"background-color 0.2s ease",":hover":{backgroundColor:"#e2e8f0"}}),label:o=>({fontSize:"13px",fontWeight:500,color:"#4a5568",transition:"opacity 0.2s ease, visibility 0.2s ease",flexGrow:1,textAlign:o==="suffix"?"right":"left",opacity:1,visibility:"visible"}),actions:o=>({display:"flex",alignItems:"center",gap:"4px",position:"absolute",[o==="prefix"?"left":"right"]:"26px",opacity:0,visibility:"hidden",transform:o==="prefix"?"translateX(-10px)":"translateX(10px)",transition:"all 0.25s ease-out",backgroundColor:"#fff",padding:"2px 4px",borderRadius:"4px",zIndex:10}),actionBtn:{padding:"4px",margin:"0",display:"flex",alignItems:"center",justifyContent:"center",":hover":{backgroundColor:"#e2e8f0",borderRadius:"4px"}},iconStyleBtnWrapper:{display:"flex",alignItems:"center",justifyContent:"center"}};export{M as B,q as F,D as t}; |
