| 1 |
import{a as X,g as tt,r as b,i as G,u as et,j as s,h as p,bv as ot,ed as st,f as g,bI as F,cB as j,cC as d,cr as nt,ee as R,z as T,ef as at,at as rt,ct as it}from"./main-96.js";import{a as lt,C as ct}from"./bf-200-43.js";import{A as ft,V as mt}from"./bf-550-57.js";import{S as ht}from"./bf-687-180.js";import{S as pt}from"./bf-542-181.js";import"./bf-781-46.js";import"./bf-431-60.js";/* empty css */import"./bf-63-62.js";import"./bf-762-63.js";import"./bf-283-176.js";import"./bf-551-68.js";import"./bf-163-182.js";import"./bf-621-177.js";import"./bf-405-178.js";import"./bf-678-179.js";import"./bf-403-183.js";import"./bf-235-184.js";import"./bf-235-185.js";import"./bf-890-186.js";import"./bf-682-187.js";import"./bf-825-45.js";import"./bf-894-52.js";import"./bf-580-188.js";import"./bf-20-55.js";import"./bf-135-189.js";import"./bf-377-190.js";import"./bf-624-191.js";const gt="AIzaSyB9lRmRi8phfBLNMT3CpTF2DsWNLGfoFWY",dt=`https://www.googleapis.com/webfonts/v1/webfonts?key=${gt}&sort=popularity`;function Kt({id:W}){const{css:a}=X(),{fieldKey:S,element:v,formID:_}=tt(),[f,y]=b.useState([]),[k,L]=b.useState(!1),[z,$]=b.useState(!0),[m,w]=G(rt),[I,E]=b.useState(!1),[C,U]=b.useState(m.font.fontType||"Custom"),[x,V]=G(it),D=et(lt),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"))),$(!1)}catch(t){}else fetch(dt).then(t=>t.json()).then(t=>{y(t.items),$(!1),localStorage.setItem("bf-fonts",JSON.stringify(t.items))})},[]);const K=t=>{U(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]=at(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(),F(j(v,S,"Font",`${t} ${e}`,{styles:d("styles"),themeVars:d("themeVars")}))},q=t=>{if(t==="ASC"){const e=nt(f,"family",t);L(!0),y(e)}else{const e=JSON.parse(localStorage.getItem("bf-fonts"));L(!1),y(e)}},Z=({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})),F(j(v,S,"Font",e,{styles:d("styles"),themeVars:d("themeVars")}))},B=({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=[]})),F(j(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})),F(j(v,S,"Font",`Custom ${e}`,{styles:d("styles"),themeVars:d("themeVars")}))},Q=({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:Z,id:W})]}),s.jsx(pt,{options:[{label:"Custom"},{label:"Google"}],onChange:t=>K(t),defaultActive:C,wideTab:!0,className:a(N&&i.disabled)}),z&&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(ct,{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:B,onBlur:Q,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:B,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{Kt as default}; |
