| 1 |
import{a as _,g as L,i as h,cI as y,j as n,h as j,ez as R,bu as W,k as q,f as w,bI as V,cB as O,cC as k,cz as G,l as J,cP as Q,ct as U,cs as X,at as Y}from"./main-762.js";import{C as Z}from"./bf-874-177.js";import{I as P}from"./bf-377-332.js";function ae({subtitle:A,objectPaths:o,id:p,allowImportant:N,state:$,hslaPaths:B}){const{css:i}=_(),{element:g,fieldKey:x}=L(),[S,I]=h(Q),[K,E]=h(U),[M,z]=h(X),[D,F]=h(Y);let T,C,c="";const v=e=>G(e,{themeVars:K,styles:D,themeColors:M}),m=e=>y(v(e.object),q(v(e.object),e.path)),r=[];if(Array.isArray(o))o.forEach(e=>{const{paths:t,object:s}=e;Object.keys(e.paths).forEach(d=>{r[d]={object:s,path:t[d]}})});else{const{paths:e,object:t}=o;Object.keys(e).forEach(l=>{r[l]={object:t,path:e[l]}})}const a={"outline-color":"","outline-width":"","outline-offset":"","outline-style":""},f=Object.keys(r);for(let e=0;e<f.length;e+=1){const t=f[e];if(f.length===2&&t==="outline"){const s=m(r[t]),l=s==null?void 0:s.split(/(?!\(.*)\s(?![^(]*?\))/g);a["outline-width"]=y(r[t],l[0])||"",a["outline-style"]=y(r[t],l[1])||"",a["outline-color"]=y(r[t],l[2])||"";break}t!=="outline-offset"&&(a[t]=m(r[t]))}a["outline-offset"]=m(r["outline-offset"]),a["outline-width"]&&(c+=`Width: ${a["outline-width"]}; `),a["outline-style"]&&(c+=`Style: ${a["outline-style"]}; `),a["outline-color"]&&(C=a["outline-color"],c+=`Color: ${a["outline-color"]}; `);const b=(e,t,s="")=>{Object.keys(e).map(d=>{J(t,e[d],s)})},H=()=>{if(Array.isArray(o))o.map(e=>{const{paths:t}=e;e.object==="themeVars"?E(s=>w(s,l=>{b(t,l)})):e.object==="themeColors"&&z(s=>w(s,l=>{b(t,l)}))}),V(O(g,x,"outline Clear","",{styles:k("styles")}));else{const{paths:e}=o;F(t=>w(t,s=>{b(e,s)})),V(O(g,x,"outline Clear","",{styles:k("styles")}))}};return n.jsxs("div",{className:i(j.flxc),children:[N&&c&&n.jsx(P,{id:p,className:i({mr:3}),paths:o.paths,propertyPath:T,stateObjName:o.object||"styles"}),n.jsxs("div",{title:c||"Add outline Style",className:i(u.preview_wrp,S.id===p&&u.active),children:[n.jsxs("button",{onClick:e=>R(e,I,{component:"outline-style",subtitle:A,objectPaths:o,state:$,id:p,hslaPaths:B}),type:"button",className:i(u.pickrBtn),"data-testid":`${p}-modal-btn`,children:[n.jsx(Z,{bg:C,h:24,w:24,className:i(j.mr2)}),n.jsx("span",{className:i(u.clrVal),children:c||"Add outline Style"})]}),c&&n.jsx("button",{title:"Clear Value",className:i(u.clearBtn),onClick:H,type:"button","aria-label":"Clear outline","data-testid":`${p}-clear-btn`,children:n.jsx(W,{size:"12"})})]})]})}const u={preview_wrp:{bd:"var(--white-0-95)",w:130,mnw:130,brs:"var(--bf-bdr-radius-sm)",p:3,flx:"center-between",":hover":{bs:"0 0 0 1px var(--white-0-83)"}},clearBtn:{brs:"50%",p:4,w:17,h:17,b:"none",flx:"center",bd:"transparent",cr:"var(--white-0-50)",curp:1,":hover":{cr:"var(--black-0)",bd:"#d3d1d1"}},pickrBtn:{b:"none",curp:1,flx:"center",bd:"transparent",p:0},clrVal:{w:73,ws:"nowrap",textOverflow:"ellipsis",ow:"hidden"},active:{focusShadow:1}};export{ae as O}; |
