Telephone country code select (#9473)

* add telephone code select * add flags * run svgo on flags * get it somewhat working on web * get web closed state working * verify country code we get from geo * trim down names to shorter common versions * add labels to other selects * make international tel codes a static object * add component to storybook * Update src/lib/international-telephone-codes.ts Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * update to new geo hook * use Intl.DisplayNames, add polyfill * use in rather than keys().includes() --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
2025-12-10 22:12:30 +02:00
parent 07e1b3a0b6
commit 6ccda945e5
280 changed files with 1995 additions and 112 deletions
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#0052B4" d="M0 0h513v342H0z"/><path fill="#FFF" d="M256 0v117.4h-46.1l46.1 30.7v22.6h-22.6L160 121.8v48.9H96v-48.9l-73.4 48.9H0v-22.6l46.1-30.7H0v-64h46.1L0 22.7V0h22.6L96 48.9V0h64v48.9L233.4 0z"/><path fill="#D80027" d="M144 0h-32v69.4H0v32h112v69.3h32v-69.3h112v-32H144z"/><path fill="#2E52B2" d="M256 22.7v30.7h-46.1z"/><path fill="#D80027" d="M0 170.7v-11l62.5-42.3h22.6L7.3 170.7zM7.3.1l77.8 53.2H62.5L0 11.1V.1zM256 .1v11l-62.5 42.3h-22.6L248.7.1zm-7.3 170.6-77.8-53.3h22.6l62.5 42.3v11z"/><ellipse cx="443.4" cy="233.6" fill="#FFF" rx="29" ry="43.5"/><ellipse cx="406.9" cy="317.7" fill="#FFCE00" rx="22" ry="9.3"/><ellipse cx="364" cy="317.7" fill="#FFCE00" rx="22" ry="9.3"/><path fill="#39B200" d="m342 190.1 43.4 86.9 43.5-86.9z"/><ellipse cx="327.5" cy="233.6" fill="#9B9B9B" rx="29" ry="43.5"/><path fill="#757575" d="m371 175.6-14.5 14.5h57.9l-14.5-14.5 14.5-43.5s-13-29-29-29-29 29-29 29l14.6 43.5z"/><circle cx="385.4" cy="67" r="29" fill="#C6B56F"/><circle cx="386" cy="88.7" r="29" fill="#A54A00"/><circle cx="443.4" cy="117.7" r="29" fill="#FFF"/><circle cx="342.2" cy="146.7" r="29" fill="#0049FF"/><circle cx="429.8" cy="146.7" r="29" fill="#0041F9"/><circle cx="386" cy="233.6" r="29" fill="#F7D71E"/><circle cx="457.9" cy="190.1" r="29" fill="#CEC851"/><circle cx="385.4" cy="289.5" r="29" fill="#FFF"/><path fill="#7C0B29" d="m371 135.7 14.5-3.5 14.5 3.5c0 7.5-14.5 11-14.5 11s-14.5-3.5-14.5-11z"/><circle cx="327.5" cy="117.4" r="29" fill="#FFF"/></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#0052B4" d="M0 0h513v342H0z"/><path fill="#FFF" d="M256 0v117.4h-46.1l46.1 30.7v22.6h-22.6L160 121.8v48.9H96v-48.9l-73.4 48.9H0v-22.6l46.1-30.7H0v-64h46.1L0 22.7V0h22.6L96 48.9V0h64v48.9L233.4 0z"/><path fill="#D80027" d="M144 0h-32v69.4H0v32h112v69.3h32v-69.3h112v-32H144z"/><path fill="#2E52B2" d="M256 22.7v30.7h-46.1z"/><path fill="#D80027" d="M0 170.7v-11l62.5-42.3h22.6L7.3 170.7zM7.3.1l77.8 53.2H62.5L0 11.1V.1zM256 .1v11l-62.5 42.3h-22.6L248.7.1zm-7.3 170.6-77.8-53.3h22.6l62.5 42.3v11z"/><ellipse cx="443.4" cy="233.6" fill="#FFF" rx="29" ry="43.5"/><ellipse cx="406.9" cy="317.7" fill="#FFCE00" rx="22" ry="9.3"/><ellipse cx="364" cy="317.7" fill="#FFCE00" rx="22" ry="9.3"/><path fill="#39B200" d="m342 190.1 43.4 86.9 43.5-86.9z"/><ellipse cx="327.5" cy="233.6" fill="#9B9B9B" rx="29" ry="43.5"/><path fill="#757575" d="m371 175.6-14.5 14.5h57.9l-14.5-14.5 14.5-43.5s-13-29-29-29-29 29-29 29l14.6 43.5z"/><circle cx="385.4" cy="67" r="29" fill="#C6B56F"/><circle cx="386" cy="88.7" r="29" fill="#A54A00"/><circle cx="443.4" cy="117.7" r="29" fill="#FFF"/><circle cx="342.2" cy="146.7" r="29" fill="#0049FF"/><circle cx="429.8" cy="146.7" r="29" fill="#0041F9"/><circle cx="386" cy="233.6" r="29" fill="#F7D71E"/><circle cx="457.9" cy="190.1" r="29" fill="#CEC851"/><circle cx="385.4" cy="289.5" r="29" fill="#FFF"/><path fill="#7C0B29" d="m371 135.7 14.5-3.5 14.5 3.5c0 7.5-14.5 11-14.5 11s-14.5-3.5-14.5-11z"/><circle cx="327.5" cy="117.4" r="29" fill="#FFF"/></svg>