| 1 |
import{a as H,g as _,i as h,cz as m,j as n,h as j,eg as L,bs as R,cG as W,cl as X,ck as q,aX as J,l as Q,f as w,bG as V,ct as O,cu as k,cr as U,m as Y}from"./main-294.js";import{C as Z}from"./bf-986-242.js";import{I as P}from"./bf-68-390.js";function ae({subtitle:A,objectPaths:r,id:p,allowImportant:N,state:$,hslaPaths:B}){const{css:i}=H(),{element:g,fieldKey:x}=_(),[S,K]=h(W),[E,M]=h(X),[D,F]=h(q),[I,T]=h(J);let z,v,c="";const C=e=>U(e,{themeVars:E,styles:I,themeColors:D}),y=e=>m(C(e.object),Q(C(e.object),e.path)),o=[];if(Array.isArray(r))r.forEach(e=>{const{paths:t,object:s}=e;Object.keys(e.paths).forEach(d=>{o[d]={object:s,path:t[d]}})});else{const{paths:e,object:t}=r;Object.keys(e).forEach(l=>{o[l]={object:t,path:e[l]}})}const a={"outline-color":"","outline-width":"","outline-offset":"","outline-style":""},b=Object.keys(o);for(let e=0;e<b.length;e+=1){const t=b[e];if(b.length===2&&t==="outline"){const s=y(o[t]),l=s==null?void 0:s.split(/(?!\(.*)\s(?![^(]*?\))/g);a["outline-width"]=m(o[t],l[0])||"",a["outline-style"]=m(o[t],l[1])||"",a["outline-color"]=m(o[t],l[2])||"";break}t!=="outline-offset"&&(a[t]=y(o[t]))}a["outline-offset"]=y(o["outline-offset"]),a["outline-width"]&&(c+=`Width: ${a["outline-width"]}; `),a["outline-style"]&&(c+=`Style: ${a["outline-style"]}; `),a["outline-color"]&&(v=a["outline-color"],c+=`Color: ${a["outline-color"]}; `);const f=(e,t,s="")=>{Object.keys(e).map(d=>{Y(t,e[d],s)})},G=()=>{if(Array.isArray(r))r.map(e=>{const{paths:t}=e;e.object==="themeVars"?M(s=>w(s,l=>{f(t,l)})):e.object==="themeColors"&&F(s=>w(s,l=>{f(t,l)}))}),V(O(g,x,"outline Clear","",{styles:k("styles")}));else{const{paths:e}=r;T(t=>w(t,s=>{f(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:r.paths,propertyPath:z,stateObjName:r.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=>L(e,K,{component:"outline-style",subtitle:A,objectPaths:r,state:$,id:p,hslaPaths:B}),type:"button",className:i(u.pickrBtn),"data-testid":`${p}-modal-btn`,children:[n.jsx(Z,{bg:v,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:G,type:"button","aria-label":"Clear outline","data-testid":`${p}-clear-btn`,children:n.jsx(R,{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)"}},preview:{w:25,h:25,b:"1px solid gray",brs:7,curp:1,mr:7},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}; |
