| 1 |
import{i as j,aH as z,g as K,u as q,b2 as J,aX as D,r as C,a as k,z as G,j as t,_ as w,M as Q,f as m,ba as h,bG as x,e7 as W,e5 as Y,e8 as Z,d4 as ee,I}from"./main-294.js";import{F as o}from"./bf-821-385.js";import{E as L}from"./bf-28-232.js";import{I as te,F as b}from"./bf-766-384.js";import{F as V}from"./bf-384-383.js";import{S as A}from"./bf-908-241.js";import{A as ne}from"./bf-446-382.js";import"./bf-645-110.js";import"./bf-487-72.js";import"./bf-176-80.js";import"./bf-867-113.js";import"./bf-986-242.js";import"./bf-764-245.js";import"./bf-250-243.js";import"./bf-22-244.js";import"./bf-934-246.js";import"./bf-188-247.js";import"./bf-85-248.js";import"./bf-930-249.js";import"./bf-5-86.js";import"./bf-112-250.js";import"./bf-399-251.js";import"./bf-379-106.js";import"./bf-508-252.js";import"./bf-128-253.js";import"./bf-889-272.js";import"./bf-383-274.js";import"./bf-108-386.js";import"./bf-297-387.js";import"./bf-663-270.js";import"./bf-957-268.js";function M({btnType:i,btnName:a,switching:c,handleButtonAlignment:u,btnAlignmentList:F}){const[p,e]=j(z),{fieldKey:r}=K(),$=q(J),[y,_]=j(D),[B,v]=C.useState(!1),[N,S]=C.useState(""),{css:n}=k(),s=G(p[r]),l=s.adminLbl||"",R=`This ${a} is use to add/remove a repeatative Section. you can show or hide this ${a} by toggling this option.`,O=({target:{checked:d}})=>{s[i].show=d;const f=d?"Show":"Hide",g=m(p,X=>{X[r]=s});e(g),h(r),x({event:`${f} Repeater ${a}: ${s[i].txt||l||r}`,type:`${f}_repeater_${i}`,state:{fields:g,fldKey:r}})},U=({target:{value:d}})=>{s[i].txt=d;const f=m(p,g=>{g[r]=s});e(f),h(r),x({event:`${a} Text Update: ${l||s[i].txt||r}`,type:`${i}_txt_change`,state:{fields:f,fldKey:r}})},E=d=>{W(y,r,ee[d])||Y($,d),Z(d,r),S(d),v(!0)},P=d=>{if(s[d]){delete s[d];const f=m(p,g=>{g[r]=s});e(f),h(r)}};return t.jsxs(t.Fragment,{children:[t.jsxs(A,{id:`${i}-rpt-btn-stng`,title:w(a),className:n(o.fieldSection,o.hover_tip),switching:c,tip:R,tipProps:{width:250,icnSize:17},toggleAction:O,toggleChecked:s==null?void 0:s[i].show,children:[t.jsx("div",{className:n(o.placeholder),children:t.jsx(ne,{id:`${i}-rpt-btn-stng`,ariaLabel:`${a} Repeater Button Text`,placeholder:"Type Button Text here...",value:s==null?void 0:s[i].txt,changeAction:U})}),t.jsxs("div",{className:n(o.iconLayoutHorizontal),children:[t.jsx(V,{label:"Prefix Icon",iconSrc:s==null?void 0:s[`${i}PreIcn`],styleRoute:`${T[i]}-pre-i`,setIcon:()=>E(`${i}PreIcn`),removeIcon:()=>P(`${i}PreIcn`),proProperty:"leadingIcon",position:"prefix"}),t.jsx("span",{className:n(o.iconSeparator),children:"|"}),t.jsx(V,{label:"Suffix Icon",iconSrc:s==null?void 0:s[`${i}SufIcn`],styleRoute:`${T[i]}-suf-i`,setIcon:()=>E(`${i}SufIcn`),removeIcon:()=>P(`${i}SufIcn`),proProperty:"trailingIcon",position:"suffix"})]}),i==="addToEndBtn"&&t.jsxs("div",{className:n(o.fieldNumber,{py:"0px !important",mx:5}),children:[t.jsx("span",{children:w("Button Alignment:")}),t.jsx("select",{"data-testid":"btn-algn-slct",className:n(o.input,o.w140),name:"",id:"",value:s[i].btnAlignment,onChange:u,children:F.map(d=>t.jsx("option",{value:d.value,children:d.name},`btcd-k-${d.name}`))})]})]}),t.jsxs(Q,{md:!0,autoHeight:!0,show:B,setModal:v,className:"o-v",title:w("Icons"),children:[t.jsx("div",{className:"pos-rel"}),t.jsx(te,{iconType:N,setModal:v})]})]})}const T={addBtn:"rpt-add-btn",removeBtn:"rpt-rmv-btn",addToEndBtn:"add-to-end-btn"};function Le(){const{css:i}=k(),{fieldKey:a}=K(),[c,u]=j(z),[F,p]=j(D);if(!a)return null;const e=G(c[a]),r=e.adminLbl||"";function $(n){if(!I)return;n.target.value===""?delete e.defaultRow:e.defaultRow=n.target.value;const s=m(c,l=>{l[a]=e});u(s),x({event:`Default Row updated to ${n.target.value}: ${e.lbl||r||a}`,type:"set_default_row",state:{fields:s,fldKey:a}})}function y(n){if(!I)return;n.target.value===""?delete e.minRow:(e.minRow=n.target.value,e.err||(e.err={}),e.err.minRow||(e.err.minRow={}),e.err.minRow.dflt=`<p style="margin:0">Minimum Repeatable Row is ${n.target.value}</p>`,e.err.minRow.show=!0);const s=m(c,l=>{l[a]=e});u(s),x({event:`Minimum Row updated to ${n.target.value}: ${e.lbl||r||a}`,type:"set_min",state:{fields:s,fldKey:a}})}function _(n){if(!I)return;n.target.value===""?delete e.maxRow:(e.maxRow=n.target.value,e.err||(e.err={}),e.err.maxRow||(e.err.maxRow={}),e.err.maxRow.dflt=`<p style="margin:0">Maximum Repeatable Row is ${n.target.value}</p>`,e.err.maxRow.show=!0);const s=m(c,l=>{l[a]=e});u(s),x({event:`Maximum Row updated to ${n.target.value}: ${e.lbl||r||a}`,type:"set_max",state:{fields:s,fldKey:a}})}function B({target:{value:n}}){p(s=>m(s,l=>{l.fields[a].classes[`.${a}-rpt-wrp`]["flex-direction"]=n})),e.btnPosition=n,u(m(c,s=>{s[a]=e})),x({event:`Button Position changed to ${n}: ${e.txt}`,type:"set_btn_posn",state:{fields:c,fldKey:a}}),h(a)}function v({target:{value:n}}){p(l=>m(l,R=>{R.fields[a].classes[`.${a}-pair-btn-wrp`]["align-self"]=n})),e.btnAlignment=n;const s=m(c,l=>{l[a]=e});u(s),x({event:`Button Alignment updated to ${n}: ${e.lbl||r||a}`,type:"set_btn_align",state:{fields:s,fldKey:a}})}function N({target:{value:n}}){p(l=>m(l,R=>{R.fields[a].classes[`.${a}-add-to-end-btn-wrp`]["align-self"]=n})),e.addToEndBtn||(e.addToEndBtn={}),e.addToEndBtn.btnAlignment=n;const s=m(c,l=>{l[a]=e});u(s),x({event:`Add To End Button Alignment updated to ${n}: ${e.lbl||r||a}`,type:"set_to_end_btn_align",state:{fields:s,fldKey:a}}),h(a)}function S({target:{value:n}}){p(s=>m(s,l=>{l.fields[a].classes[`.${a}-pair-btn-wrp`]["flex-direction"]=n})),e.btnView=n,u(m(c,s=>{s[a]=e})),x({event:`Button View changed to ${n}: ${e.txt}`,type:"set_btn_view",state:{fields:c,fldKey:a}}),h(a)}return t.jsxs(t.Fragment,{children:[t.jsx(A,{id:"rpt-count-stng",title:"Repeatable Row Count(Min/Max):",className:i(o.fieldSection),isPro:!0,children:t.jsxs("div",{className:i({mx:5}),children:[t.jsxs("div",{className:i(o.fieldNumber,{py:"0px !important"}),children:[t.jsx("span",{children:w("Default Row:")}),t.jsx("input",{"data-testid":"dflt-row-inp",title:"Default Repeatable Row","aria-label":"Default Repeatable Row",placeholder:"Type Default Row...",className:i(o.input,o.w140),type:"number",value:e.defaultRow||"",onChange:$,min:0})]}),t.jsxs("div",{className:i(o.fieldNumber,{py:"0px !important"}),children:[t.jsx("span",{children:w("Minimum Row:")}),t.jsx("input",{"data-testid":"min-row-inp",title:"Minimum Repeatable Row","aria-label":"Minimum Repeatable Row",placeholder:"Type minimum row...",className:i(o.input,o.w140),type:"number",value:e.minRow||"",onChange:y,min:0})]}),!!Number(e.minRow)&&t.jsx(L,{id:"min-row-err",type:"minRow",title:"Min Error Message",tipTitle:`By enabling this feature, user will see the error message when repeatable row is less than ${e.minRow}`}),t.jsxs("div",{className:i(o.fieldNumber,{py:"0px !important"}),children:[t.jsx("span",{children:w("Maximum Row:")}),t.jsx("input",{"data-testid":"max-row-inp",title:"Maximum Repeatable Row","aria-label":"Maximum Repeatable Row",placeholder:"Type maximum row...",className:i(o.input,o.w140),type:"number",value:e.maxRow||"",onChange:_,min:0})]}),!!Number(e.maxRow)&&t.jsx(L,{id:"max-row-err",type:"maxRow",title:"Max Error Message",tipTitle:`By enabling this feature, user will see the error message when repeatable row is greater than ${e.maxRow}`})]})}),t.jsx(b,{}),t.jsx(A,{id:"btn-layout-posn-stng",title:"Button Layout and Position:",className:i(o.fieldSection),children:t.jsxs("div",{className:i({mx:5}),children:[t.jsxs("div",{className:i(o.fieldNumber,{py:"0px !important"}),children:[t.jsx("span",{children:w("Button Position:")}),t.jsx("select",{"data-testid":"btn-posn-slct",className:i(o.input,o.w140),value:e.btnPosition||"column",onChange:B,children:se.map(n=>t.jsx("option",{value:n.value,children:n.name},`btn-posn-${n.name}`))})]}),t.jsxs("div",{className:i(o.fieldNumber,{py:"0px !important"}),children:[t.jsx("span",{children:w("Button Alignment:")}),t.jsx("select",{"data-testid":"btn-algn-slct",className:i(o.input,o.w140),value:e.btnAlignment||"center",onChange:v,children:H.map(n=>t.jsx("option",{value:n.value,children:n.name},`btn-algn-${n.name}`))})]}),t.jsxs("div",{className:i(o.fieldNumber,{py:"0px !important"}),children:[t.jsx("span",{children:w("Button View:")}),t.jsx("select",{"data-testid":"btn-view-slct",className:i(o.input,o.w140),value:e.btnView||"column",onChange:S,children:ae.map(n=>t.jsx("option",{value:n.value,children:n.name},`btn-view-${n.name}`))})]})]})}),t.jsx(b,{}),t.jsx(M,{btnType:"addBtn",btnName:"Add Button",switching:!0}),t.jsx(b,{}),t.jsx(M,{btnType:"removeBtn",btnName:"Remove Button"}),t.jsx(b,{}),t.jsx(M,{btnType:"addToEndBtn",btnName:"Add To End Button",switching:!0,handleButtonAlignment:N,btnAlignmentList:H})]})}const se=[{name:"Top",value:"column-reverse"},{name:"Bottom",value:"column"},{name:"Left",value:"row-reverse"},{name:"Right",value:"row"}],H=[{name:"Start",value:"start"},{name:"Center",value:"center"},{name:"End",value:"end"}],ae=[{name:"Vertical",value:"column"},{name:"Vertical-reverse",value:"column-reverse"},{name:"Horizontal",value:"row"},{name:"Horizontal-Reverse",value:"row-reverse"}];export{Le as default}; |
