import{a as C,w as T,h as H,q as L,r as B,W as M,j as e,_ as c,x as n,bV as P,ab as U,aq as z,g as p,aU as x,aC as K,A as $}from"./main-40.js";import{F as g,A as N}from"./bf-350-158.js";import{T as W}from"./bf-141-80.js";import{F as k,A as q,b as D}from"./bf-543-94.js";import{a as h,I as E}from"./bf-541-191.js";import{S as y}from"./bf-95-84.js";/* empty css          */import"./bf-142-111.js";import"./bf-376-112.js";import"./bf-547-83.js";import"./bf-683-113.js";import"./bf-955-157.js";import"./bf-586-70.js";import"./bf-497-146.js";import"./bf-613-108.js";import"./bf-755-109.js";import"./bf-175-110.js";import"./bf-928-114.js";import"./bf-232-115.js";import"./bf-236-125.js";import"./bf-642-124.js";import"./bf-829-79.js";import"./bf-285-116.js";import"./bf-695-117.js";import"./bf-866-72.js";function xe(){var j;const{css:a}=C(),{fieldKey:s}=T(),[m,b]=H(U),t=L(m[s]),[F,u]=B.useState(!1),w=t.alt||"",A=M(z),I=o=>{const{value:l}=o.target;l===""?delete t.alt:t.alt=l.replace(/\\\\/g,"$_bf_$");const i=p(m,r=>{r[s]=t});b(i),x({event:`Field alt Change ${t.alt||s}`,type:"field_alt_change",state:{fields:i,fldKey:s}})},S=o=>{const{value:l}=o.target;l===""?delete t.bg_img:t.bg_img=l.replace(/\\\\/g,"$_bf_$");const i=p(m,r=>{r[s]=t});b(i),x({event:`Field Image Change ${t.bg_img||s}`,type:"field_img_change",state:{fields:i,fldKey:s}})},f=o=>{const{name:l,value:i}=o.target;t[l]=Number(i);const r=p(m,d=>{d[s]=t});b(r);const v=d=>`fields->${s}->classes->.${s}-fld-wrp->${d}`;x({event:`Field ${l} Change ${t.lbl||s}`,type:`field_${l}_change`,state:{fields:r,fldKey:s}}),K(),A(d=>p(d,_=>{$(_,v(l),`${Number(i)}px`),l==="height"&&$(_,v("max-height"),`${Number(i)}px`)}))};return e.jsxs("div",{children:[e.jsx(k,{title:"Field Settings",subtitle:t.typ,fieldKey:s}),e.jsx(q,{}),e.jsx(h,{}),e.jsx(D,{}),e.jsx(h,{}),e.jsxs(y,{id:"nam-stng",title:c("Background Image"),className:a(g.fieldSection),children:[e.jsx("div",{className:a(n.flxc,{jc:"end"}),children:e.jsx(W,{msg:"Change",children:e.jsx("button",{"data-testid":"img-edt-btn",type:"button",onClick:()=>u(!0),className:a(R.browseBtn),children:"Browse"})})}),e.jsx("div",{className:a({w:"97%",mx:5}),children:e.jsx(N,{id:"fld-lbl-stng",ariaLabel:"Label input",changeAction:S,value:(j=t.bg_img)==null?void 0:j.replace(/\$_bf_\$/g,"\\"),placeholder:"e.g: https://ps.w.org/bit-form/assets/icon-256x256.png?rev=2376144"})}),e.jsxs("div",{className:a(n.flxcb,n.ml1),children:[e.jsx("label",{htmlFor:"alt",className:a(n.mr1),children:c("Width")}),e.jsx("input",{type:"number",name:"width","data-testid":"img-width","aria-label":"Image Width",placeholder:"auto",className:a(g.input,n.w4),value:t.width,onChange:f})]}),e.jsxs("div",{className:a(n.flxcb,n.ml1),children:[e.jsx("label",{htmlFor:"alt",className:a(n.mr1),children:c("Height")}),e.jsx("input",{type:"number",name:"height","data-testid":"img-height","aria-label":"Image Height",placeholder:"auto",className:a(g.input,n.w4),value:t.height,onChange:f})]})]}),e.jsx(h,{}),e.jsx(y,{id:"nam-stng",title:c("Image Alt Text"),className:a(g.fieldSection),children:e.jsx("div",{children:e.jsx("div",{className:a({w:"97%",mx:5}),children:e.jsx(N,{id:"fld-lbl-stng",ariaLabel:"Label input",changeAction:I,value:w.replace(/\$_bf_\$/g,"\\"),placeholder:"Alternative Text"})})})}),e.jsx(h,{}),e.jsxs(P,{md:!0,autoHeight:!0,show:F,setModal:u,className:"o-v",title:"Image",children:[e.jsx("div",{className:"pos-rel"}),e.jsx(E,{iconType:"bg_img",selected:"Upload Image",uploadLbl:"Upload Image",setModal:u,unsplash:!0})]})]})}const R={browseBtn:{b:"none",bd:"none",p:"5px 10px",tn:"all ease-in-out 0.2s","&:hover":{bd:"var(--b-79-96)",cr:"var(--b-50)",brs:"8px"}}};export{xe as default};
