| 1 |
import{a as Q,g as tt,r as b,i as B,u as et,j as s,h as p,bt as ot,d_ as st,f as g,bG as j,ct as F,cu as d,cj as nt,d$ as R,V as T,aX as at,cl as rt,e0 as it}from"./main-294.js";import{C as lt,a as ct}from"./bf-487-72.js";import{A as ft,V as mt}from"./bf-645-110.js";import{S as ht}from"./bf-764-245.js";import{S as pt}from"./bf-934-246.js";import"./bf-176-80.js";import"./bf-867-113.js";import"./bf-908-241.js";import"./bf-5-86.js";import"./bf-986-242.js";import"./bf-250-243.js";import"./bf-22-244.js";import"./bf-188-247.js";import"./bf-85-248.js";import"./bf-930-249.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";const gt="AIzaSyB9lRmRi8phfBLNMT3CpTF2DsWNLGfoFWY",dt=`https://www.googleapis.com/webfonts/v1/webfonts?key=${gt}&sort=popularity`;function Bt({id:W}){const{css:a}=Q(),{fieldKey:S,element:v,formID:_}=tt(),[f,y]=b.useState([]),[k,$]=b.useState(!1),[U,L]=b.useState(!0),[m,w]=B(at),[I,E]=b.useState(!1),[C,z]=b.useState(m.font.fontType||"Custom"),[x,V]=B(rt),D=et(ct),N=x["--g-font-family"]==="inherit",H=m.font.fontType==="Google";b.useEffect(()=>{if("bf-fonts"in localStorage)try{y(JSON.parse(localStorage.getItem("bf-fonts"))),L(!1)}catch(t){}else fetch(dt).then(t=>t.json()).then(t=>{y(t.items),L(!1),localStorage.setItem("bf-fonts",JSON.stringify(t.items))})},[]);const K=t=>{z(t)},M=()=>{var t;return((t=m==null?void 0:m.font)==null?void 0:t.fontType)==="Google"?f.findIndex(e=>e.family===x["--g-font-family"]):0},O=t=>{const{value:e}=t.target,o=JSON.parse(localStorage.getItem("bf-fonts")).filter(l=>l.family.toLowerCase().includes(e.toLowerCase()));y(o)},P=t=>{var h,c;const e=[],n=["normal"],o=[];let l="";for(let r=0;r<t.length;r+=1){const u=(h=t[r].match(/\d+/gi))==null?void 0:h[0];if(u&&(e.includes(Number(u))||(e.push(Number(u)),o.push(`0,${u};`))),t[r].match(/\d+\D+/gi)){u&&o.push(`1,${u};`);const A=(c=t[r].match(/\D+/gi))==null?void 0:c[0];n.includes(A)||n.push(A)}t[r]==="regular"&&(o.push("0,400;","1,400;"),e.push(400))}if(e.length!==0){const r=o.sort().toString().replace(/;,/gi,";");l=r.substring(0,r.length-1),l=`wght@${l}`}return[e,n,l]},J=()=>{const t=m.font.fontWeightVariants,e=m.font.fontStyle,[n,o]=it(m,x),l=n.filter(c=>!t.includes(Number(c))),h=o.filter(c=>!e.includes(Number(c)));l.length>0&&T.error(`Not available font weight ${l.toString()}!`),h.length>0&&T.error(`Not available font style ${h.toString()}!`)},Y=(t,e)=>{const[n,o,l]=P(e),h=st(t,l);w(c=>g(c,r=>{r.font.fontType="Google",r.font.fontWeightVariants=n,r.font.fontStyle=o,r.font.fontURL=h,r.font.fontFamily=t,r.form[`._frm-bg-b${_}`]["font-family"]=t})),V(c=>g(c,r=>{r["--g-font-family"]=t})),m.font.fontType==="Google"&&J(),j(F(v,S,"Font",`${t} ${e}`,{styles:d("styles"),themeVars:d("themeVars")}))},q=t=>{if(t==="ASC"){const e=nt(f,"family",t);$(!0),y(e)}else{const e=JSON.parse(localStorage.getItem("bf-fonts"));$(!1),y(e)}},X=({target:{checked:t}})=>{const e=t?"inherit":"";V(n=>g(n,o=>{o["--g-font-family"]=e})),w(n=>g(n,o=>{o.font.fontType=e,o.font.fontURL="",o.font.fontStyle=[],o.font.fontWeightVariants=[],o.font.fontFamily=e})),j(F(v,S,"Font",e,{styles:d("styles"),themeVars:d("themeVars")}))},G=({target:{name:t,value:e}})=>{if(t==="fontURL"){if(!R(e))return;w(n=>g(n,o=>{o.font.fontType="Custom",o.font.fontURL=e,o.font.fontStyle=[],o.font.fontWeightVariants=[]})),j(F(v,S,"Font",`Custom ${e}`,{styles:d("styles")}))}else w(n=>g(n,o=>{n.font.fontType==="Google"&&(o.font.fontURL=""),o.font.fontType="Custom",o.font.fontStyle=[],o.font.fontWeightVariants=[],o.font.fontFamily=e})),V(n=>g(n,o=>{o["--g-font-family"]=e})),j(F(v,S,"Font",`Custom ${e}`,{styles:d("styles"),themeVars:d("themeVars")}))},Z=({target:{value:t}})=>{t!==""&&!R(t)&&T.error("Font url is invalid!")};return s.jsxs("div",{className:a(i.container),children:[s.jsxs("div",{className:a(p.flxcb,p.mb2),children:[s.jsx("span",{className:a(i.title),children:"Inherit from theme"}),s.jsx(ht,{name:"themeInherit",isChecked:N,action:X,id:W})]}),s.jsx(pt,{options:[{label:"Custom"},{label:"Google"}],onChange:t=>K(t),defaultActive:C,wideTab:!0,className:a(N&&i.disabled)}),U&&s.jsxs("div",{title:"Loading...",children:[s.jsx("div",{className:a(p.mt2)}),Array(6).fill(1).map((t,e)=>s.jsx("div",{title:"Loading...",className:`${a({w:"95%",h:28,brs:5,lh:2,my:3,mx:5})} loader`},`loderfnt-${e*2}`))]}),!N&&C==="Google"&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:a(p.flxc,i.searchBar,p.mt2,p.mb2),children:[s.jsxs("div",{className:a(i.fields_search),style:{width:I?"100%":"90%"},children:[s.jsx("input",{title:"Search fonts","aria-label":"Search fonts",placeholder:"Search fonts...",id:"search-icon",type:"search",name:"searchIcn",onChange:O,onFocus:()=>E(!0),onBlur:()=>E(!1),className:a(i.search_field),"data-testid":"search-font"}),s.jsx("span",{title:"search",className:a(i.search_icn),children:s.jsx(ot,{size:"20"})})]}),!I&&s.jsx("button",{title:"Sort by ascending order",className:`${a(i.sort_btn)} ${k&&"active"}`,type:"button",onClick:()=>q(k?"DESC":"ASC"),"aria-label":"Sort Fonts Family","data-testid":"sort-font",children:s.jsx(ft,{size:"20"})})]}),s.jsx(mt,{style:{width:"100%",height:200},itemCount:f.length||1,itemSizes:f.length?30:0,scrollToIndex:f.length?M():0,scrollToAlignment:"center",renderItem:t=>{var e,n,o,l;return s.jsxs("button",{className:a(i.btn),type:"button",onClick:()=>{var h,c;return Y((h=f[t])==null?void 0:h.family,(c=f[t])==null?void 0:c.variants)},"data-testid":`set-font-${(e=f[t])==null?void 0:e.family}`,children:[s.jsx("span",{className:a(i.title),children:(n=f[t])==null?void 0:n.family}),H&&(x["--g-font-family"]===((o=f[t])==null?void 0:o.family)||D["--g-font-family"]===((l=f[t])==null?void 0:l.family))&&s.jsx(lt,{className:a(i.btnColor),size:"19"})]})}})]}),(C==="Custom"||C==="inherit")&&!N&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:a(p.flxClm,p.mt2),children:[s.jsx("span",{className:a(i.title),children:"Link"}),s.jsx("input",{className:a(i.url),onChange:G,onBlur:Z,name:"fontURL","aria-label":"Custom font url",type:"url",placeholder:"e.g: http://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgWxPKTM1K9nz.ttf","data-testid":"custom-font-url"})]}),s.jsxs("div",{className:a(p.flxClm,p.mt2),children:[s.jsx("span",{className:a(i.title),children:"Font Family"}),s.jsx("input",{value:m.font.fontType!=="Google"&&x["--g-font-family"]||"",className:a(i.url),onChange:G,name:"font-family","aria-label":"Custom font family",type:"text",placeholder:"e.g: Lato","data-testid":"custom-font-family"})]})]})]})}const i={container:{scrollBehavior:"auto !important",mb:5,"& *":{scrollBehavior:"auto !important"}},url:{w:"100%",brs:"8px !important",b:"1px solid var(--white-0-75) !important",oe:0,p:5,":focus":{focusShadow:1,bcr:"var(--b-92-62) !important",pr:"0px !important","& ~ .shortcut":{dy:"none"},"& ~ span svg":{cr:"var(--b-50)"}}},btn:{b:0,p:5,h:30,w:"100%",brs:8,fw:500,flx:"center-between",pn:"relative",bc:"var(--white-100)",curp:1,"&:hover":{bc:"var(--white-0-93)","& svg":{fr:"drop-shadow(1px 1px 0.5px #b3b3b3)"}},"&:focus-visible":{oe:"none",bs:"0 0 0 2px var(--b-50) inset"},"& svg":{"flex-shrink":0,w:20,h:20,stroke:"var(--black-0)","&:nth-of-type(2)":{mr:0,pn:"absolute",rt:8}}},title:{fs:12,mb:2},search_field:{w:"100%",oe:"none",b:"1px solid var(--white-0-75) !important",brs:"9px !important",pl:"27px !important",pr:"5px !important",":focus":{focusShadow:"",bcr:"var(--b-92-62) !important",pr:"0px !important","& ~ .shortcut":{dy:"none"},"& ~ span svg":{cr:"var(--b-50)"}},"::placeholder":{fs:12},"::-webkit-search-cancel-button":{appearance:"none",w:14,h:14,mr:10,bd:"var(--white-0-83)",curp:1,backgroundPosition:"54% 50% !important",bi:`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='Black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")`,brs:20}},search_icn:{pn:"absolute",tp:"50%",mx:6,lt:0,tm:"translateY(-50%)",cr:"var(--white-0-75)",curp:1,"& svg":{dy:"block"}},searchBar:{pn:"relative",zx:99},fields_search:{pn:"relative",mr:5,tn:"width .2s"},btnColor:{cr:"var(--b-50)"},sort_btn:{w:25,h:30,cr:"var(--white-0-50)",p:0,b:"none",bd:"transparent",brs:8,flxc:1,curp:1,flx:"center",":hover:not(.active)":{bd:"var(--white-0-81-32)",cr:"var(--b-53-8)"},"&.active":{bd:"var(--b-79-96)",cr:"var(--b-50)"}},disabled:{oy:"0.5",cur:"not-allowed",pe:"none"}};export{Bt as default}; |
