diff --git a/docs/components/inputs/select-rich/examples.md b/docs/components/inputs/select-rich/examples.md new file mode 100644 index 000000000..32a23a961 --- /dev/null +++ b/docs/components/inputs/select-rich/examples.md @@ -0,0 +1,31 @@ +# Inputs >> Select Rich >> Examples ||30 + +```js script +import { html } from '@mdjs/mdjs-preview'; +import { repeat } from '@lion/core'; +import '@lion/select-rich/define'; +import './src/intl-select-rich.js'; +import { regionMetaList } from './src/regionMetaList.js'; +``` + +## Select Rich International + +A visually advanced Subclasser implementation of `LionSelectRich`. + +Inspired by: + +- [intl-tel-input](https://intl-tel-input.com/) + +```js story +export const IntlSelectRich = () => html` + + ${repeat( + regionMetaList, + regionMeta => regionMeta.regionCode, + regionMeta => + html` + `, + )} + +`; +``` diff --git a/docs/components/inputs/select-rich/src/flagStyles.js b/docs/components/inputs/select-rich/src/flagStyles.js new file mode 100644 index 000000000..03632c6fb --- /dev/null +++ b/docs/components/inputs/select-rich/src/flagStyles.js @@ -0,0 +1,1250 @@ +import { css, unsafeCSS } from '@lion/core'; + +const flagsImgUrl = unsafeCSS(new URL('./flags.png', import.meta.url).href); +const flagsImg2xUrl = unsafeCSS(new URL('./flags@2x.png', import.meta.url).href); + +export const flagStyles = css` + .iti { + position: relative; + display: inline-block; + } + .iti * { + box-sizing: border-box; + -moz-box-sizing: border-box; + } + .iti__hide { + display: none; + } + .iti__v-hide { + visibility: hidden; + } + .iti input, + .iti input[type='text'], + .iti input[type='tel'] { + position: relative; + z-index: 0; + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-right: 36px; + margin-right: 0; + } + .iti__flag-container { + position: absolute; + top: 0; + bottom: 0; + right: 0; + padding: 1px; + } + .iti__selected-flag { + z-index: 1; + position: relative; + display: flex; + align-items: center; + height: 100%; + padding: 0 6px 0 8px; + } + .iti__arrow { + margin-left: 6px; + width: 0; + height: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-top: 4px solid #555; + } + .iti__arrow--up { + border-top: none; + border-bottom: 4px solid #555; + } + .iti__country-list { + position: absolute; + z-index: 2; + list-style: none; + text-align: left; + padding: 0; + margin: 0 0 0 -1px; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); + background-color: white; + border: 1px solid #ccc; + white-space: nowrap; + max-height: 200px; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + } + .iti__country-list--dropup { + bottom: 100%; + margin-bottom: -1px; + } + @media (max-width: 500px) { + .iti__country-list { + white-space: normal; + } + } + .iti__flag-box { + display: inline-block; + width: 20px; + } + .iti__divider { + padding-bottom: 5px; + margin-bottom: 5px; + border-bottom: 1px solid #ccc; + } + .iti__country { + padding: 5px 10px; + outline: none; + } + .iti__dial-code { + color: #999; + } + .iti__country.iti__highlight { + background-color: rgba(0, 0, 0, 0.05); + } + .iti__flag-box, + .iti__country-name, + .iti__dial-code { + vertical-align: middle; + } + .iti__flag-box, + .iti__country-name { + margin-right: 6px; + } + .iti--allow-dropdown input, + .iti--allow-dropdown input[type='text'], + .iti--allow-dropdown input[type='tel'], + .iti--separate-dial-code input, + .iti--separate-dial-code input[type='text'], + .iti--separate-dial-code input[type='tel'] { + padding-right: 6px; + padding-left: 52px; + margin-left: 0; + } + .iti--allow-dropdown .iti__flag-container, + .iti--separate-dial-code .iti__flag-container { + right: auto; + left: 0; + } + .iti--allow-dropdown .iti__flag-container:hover { + cursor: pointer; + } + .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { + background-color: rgba(0, 0, 0, 0.05); + } + .iti--allow-dropdown input[disabled] + .iti__flag-container:hover, + .iti--allow-dropdown input[readonly] + .iti__flag-container:hover { + cursor: default; + } + .iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag, + .iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag { + background-color: transparent; + } + .iti--separate-dial-code .iti__selected-flag { + background-color: rgba(0, 0, 0, 0.05); + } + .iti--separate-dial-code .iti__selected-dial-code { + margin-left: 6px; + } + .iti--container { + position: absolute; + top: -1000px; + left: -1000px; + z-index: 1060; + padding: 1px; + } + .iti--container:hover { + cursor: pointer; + } + + .iti-mobile .iti--container { + top: 30px; + bottom: 30px; + left: 30px; + right: 30px; + position: fixed; + } + + .iti-mobile .iti__country-list { + max-height: 100%; + width: 100%; + } + + .iti-mobile .iti__country { + padding: 10px 10px; + line-height: 1.5em; + } + + .iti__flag { + width: 20px; + } + .iti__flag.iti__be { + width: 18px; + } + .iti__flag.iti__ch { + width: 15px; + } + .iti__flag.iti__mc { + width: 19px; + } + .iti__flag.iti__ne { + width: 18px; + } + .iti__flag.iti__np { + width: 13px; + } + .iti__flag.iti__va { + width: 15px; + } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + .iti__flag { + background-size: 5652px 15px; + } + } + .iti__flag.iti__ac { + height: 10px; + background-position: 0px 0px; + } + .iti__flag.iti__ad { + height: 14px; + background-position: -22px 0px; + } + .iti__flag.iti__ae { + height: 10px; + background-position: -44px 0px; + } + .iti__flag.iti__af { + height: 14px; + background-position: -66px 0px; + } + .iti__flag.iti__ag { + height: 14px; + background-position: -88px 0px; + } + .iti__flag.iti__ai { + height: 10px; + background-position: -110px 0px; + } + .iti__flag.iti__al { + height: 15px; + background-position: -132px 0px; + } + .iti__flag.iti__am { + height: 10px; + background-position: -154px 0px; + } + .iti__flag.iti__ao { + height: 14px; + background-position: -176px 0px; + } + .iti__flag.iti__aq { + height: 14px; + background-position: -198px 0px; + } + .iti__flag.iti__ar { + height: 13px; + background-position: -220px 0px; + } + .iti__flag.iti__as { + height: 10px; + background-position: -242px 0px; + } + .iti__flag.iti__at { + height: 14px; + background-position: -264px 0px; + } + .iti__flag.iti__au { + height: 10px; + background-position: -286px 0px; + } + .iti__flag.iti__aw { + height: 14px; + background-position: -308px 0px; + } + .iti__flag.iti__ax { + height: 13px; + background-position: -330px 0px; + } + .iti__flag.iti__az { + height: 10px; + background-position: -352px 0px; + } + .iti__flag.iti__ba { + height: 10px; + background-position: -374px 0px; + } + .iti__flag.iti__bb { + height: 14px; + background-position: -396px 0px; + } + .iti__flag.iti__bd { + height: 12px; + background-position: -418px 0px; + } + .iti__flag.iti__be { + height: 15px; + background-position: -440px 0px; + } + .iti__flag.iti__bf { + height: 14px; + background-position: -460px 0px; + } + .iti__flag.iti__bg { + height: 12px; + background-position: -482px 0px; + } + .iti__flag.iti__bh { + height: 12px; + background-position: -504px 0px; + } + .iti__flag.iti__bi { + height: 12px; + background-position: -526px 0px; + } + .iti__flag.iti__bj { + height: 14px; + background-position: -548px 0px; + } + .iti__flag.iti__bl { + height: 14px; + background-position: -570px 0px; + } + .iti__flag.iti__bm { + height: 10px; + background-position: -592px 0px; + } + .iti__flag.iti__bn { + height: 10px; + background-position: -614px 0px; + } + .iti__flag.iti__bo { + height: 14px; + background-position: -636px 0px; + } + .iti__flag.iti__bq { + height: 14px; + background-position: -658px 0px; + } + .iti__flag.iti__br { + height: 14px; + background-position: -680px 0px; + } + .iti__flag.iti__bs { + height: 10px; + background-position: -702px 0px; + } + .iti__flag.iti__bt { + height: 14px; + background-position: -724px 0px; + } + .iti__flag.iti__bv { + height: 15px; + background-position: -746px 0px; + } + .iti__flag.iti__bw { + height: 14px; + background-position: -768px 0px; + } + .iti__flag.iti__by { + height: 10px; + background-position: -790px 0px; + } + .iti__flag.iti__bz { + height: 14px; + background-position: -812px 0px; + } + .iti__flag.iti__ca { + height: 10px; + background-position: -834px 0px; + } + .iti__flag.iti__cc { + height: 10px; + background-position: -856px 0px; + } + .iti__flag.iti__cd { + height: 15px; + background-position: -878px 0px; + } + .iti__flag.iti__cf { + height: 14px; + background-position: -900px 0px; + } + .iti__flag.iti__cg { + height: 14px; + background-position: -922px 0px; + } + .iti__flag.iti__ch { + height: 15px; + background-position: -944px 0px; + } + .iti__flag.iti__ci { + height: 14px; + background-position: -961px 0px; + } + .iti__flag.iti__ck { + height: 10px; + background-position: -983px 0px; + } + .iti__flag.iti__cl { + height: 14px; + background-position: -1005px 0px; + } + .iti__flag.iti__cm { + height: 14px; + background-position: -1027px 0px; + } + .iti__flag.iti__cn { + height: 14px; + background-position: -1049px 0px; + } + .iti__flag.iti__co { + height: 14px; + background-position: -1071px 0px; + } + .iti__flag.iti__cp { + height: 14px; + background-position: -1093px 0px; + } + .iti__flag.iti__cr { + height: 12px; + background-position: -1115px 0px; + } + .iti__flag.iti__cu { + height: 10px; + background-position: -1137px 0px; + } + .iti__flag.iti__cv { + height: 12px; + background-position: -1159px 0px; + } + .iti__flag.iti__cw { + height: 14px; + background-position: -1181px 0px; + } + .iti__flag.iti__cx { + height: 10px; + background-position: -1203px 0px; + } + .iti__flag.iti__cy { + height: 14px; + background-position: -1225px 0px; + } + .iti__flag.iti__cz { + height: 14px; + background-position: -1247px 0px; + } + .iti__flag.iti__de { + height: 12px; + background-position: -1269px 0px; + } + .iti__flag.iti__dg { + height: 10px; + background-position: -1291px 0px; + } + .iti__flag.iti__dj { + height: 14px; + background-position: -1313px 0px; + } + .iti__flag.iti__dk { + height: 15px; + background-position: -1335px 0px; + } + .iti__flag.iti__dm { + height: 10px; + background-position: -1357px 0px; + } + .iti__flag.iti__do { + height: 14px; + background-position: -1379px 0px; + } + .iti__flag.iti__dz { + height: 14px; + background-position: -1401px 0px; + } + .iti__flag.iti__ea { + height: 14px; + background-position: -1423px 0px; + } + .iti__flag.iti__ec { + height: 14px; + background-position: -1445px 0px; + } + .iti__flag.iti__ee { + height: 13px; + background-position: -1467px 0px; + } + .iti__flag.iti__eg { + height: 14px; + background-position: -1489px 0px; + } + .iti__flag.iti__eh { + height: 10px; + background-position: -1511px 0px; + } + .iti__flag.iti__er { + height: 10px; + background-position: -1533px 0px; + } + .iti__flag.iti__es { + height: 14px; + background-position: -1555px 0px; + } + .iti__flag.iti__et { + height: 10px; + background-position: -1577px 0px; + } + .iti__flag.iti__eu { + height: 14px; + background-position: -1599px 0px; + } + .iti__flag.iti__fi { + height: 12px; + background-position: -1621px 0px; + } + .iti__flag.iti__fj { + height: 10px; + background-position: -1643px 0px; + } + .iti__flag.iti__fk { + height: 10px; + background-position: -1665px 0px; + } + .iti__flag.iti__fm { + height: 11px; + background-position: -1687px 0px; + } + .iti__flag.iti__fo { + height: 15px; + background-position: -1709px 0px; + } + .iti__flag.iti__fr { + height: 14px; + background-position: -1731px 0px; + } + .iti__flag.iti__ga { + height: 15px; + background-position: -1753px 0px; + } + .iti__flag.iti__gb { + height: 10px; + background-position: -1775px 0px; + } + .iti__flag.iti__gd { + height: 12px; + background-position: -1797px 0px; + } + .iti__flag.iti__ge { + height: 14px; + background-position: -1819px 0px; + } + .iti__flag.iti__gf { + height: 14px; + background-position: -1841px 0px; + } + .iti__flag.iti__gg { + height: 14px; + background-position: -1863px 0px; + } + .iti__flag.iti__gh { + height: 14px; + background-position: -1885px 0px; + } + .iti__flag.iti__gi { + height: 10px; + background-position: -1907px 0px; + } + .iti__flag.iti__gl { + height: 14px; + background-position: -1929px 0px; + } + .iti__flag.iti__gm { + height: 14px; + background-position: -1951px 0px; + } + .iti__flag.iti__gn { + height: 14px; + background-position: -1973px 0px; + } + .iti__flag.iti__gp { + height: 14px; + background-position: -1995px 0px; + } + .iti__flag.iti__gq { + height: 14px; + background-position: -2017px 0px; + } + .iti__flag.iti__gr { + height: 14px; + background-position: -2039px 0px; + } + .iti__flag.iti__gs { + height: 10px; + background-position: -2061px 0px; + } + .iti__flag.iti__gt { + height: 13px; + background-position: -2083px 0px; + } + .iti__flag.iti__gu { + height: 11px; + background-position: -2105px 0px; + } + .iti__flag.iti__gw { + height: 10px; + background-position: -2127px 0px; + } + .iti__flag.iti__gy { + height: 12px; + background-position: -2149px 0px; + } + .iti__flag.iti__hk { + height: 14px; + background-position: -2171px 0px; + } + .iti__flag.iti__hm { + height: 10px; + background-position: -2193px 0px; + } + .iti__flag.iti__hn { + height: 10px; + background-position: -2215px 0px; + } + .iti__flag.iti__hr { + height: 10px; + background-position: -2237px 0px; + } + .iti__flag.iti__ht { + height: 12px; + background-position: -2259px 0px; + } + .iti__flag.iti__hu { + height: 10px; + background-position: -2281px 0px; + } + .iti__flag.iti__ic { + height: 14px; + background-position: -2303px 0px; + } + .iti__flag.iti__id { + height: 14px; + background-position: -2325px 0px; + } + .iti__flag.iti__ie { + height: 10px; + background-position: -2347px 0px; + } + .iti__flag.iti__il { + height: 15px; + background-position: -2369px 0px; + } + .iti__flag.iti__im { + height: 10px; + background-position: -2391px 0px; + } + .iti__flag.iti__in { + height: 14px; + background-position: -2413px 0px; + } + .iti__flag.iti__io { + height: 10px; + background-position: -2435px 0px; + } + .iti__flag.iti__iq { + height: 14px; + background-position: -2457px 0px; + } + .iti__flag.iti__ir { + height: 12px; + background-position: -2479px 0px; + } + .iti__flag.iti__is { + height: 15px; + background-position: -2501px 0px; + } + .iti__flag.iti__it { + height: 14px; + background-position: -2523px 0px; + } + .iti__flag.iti__je { + height: 12px; + background-position: -2545px 0px; + } + .iti__flag.iti__jm { + height: 10px; + background-position: -2567px 0px; + } + .iti__flag.iti__jo { + height: 10px; + background-position: -2589px 0px; + } + .iti__flag.iti__jp { + height: 14px; + background-position: -2611px 0px; + } + .iti__flag.iti__ke { + height: 14px; + background-position: -2633px 0px; + } + .iti__flag.iti__kg { + height: 12px; + background-position: -2655px 0px; + } + .iti__flag.iti__kh { + height: 13px; + background-position: -2677px 0px; + } + .iti__flag.iti__ki { + height: 10px; + background-position: -2699px 0px; + } + .iti__flag.iti__km { + height: 12px; + background-position: -2721px 0px; + } + .iti__flag.iti__kn { + height: 14px; + background-position: -2743px 0px; + } + .iti__flag.iti__kp { + height: 10px; + background-position: -2765px 0px; + } + .iti__flag.iti__kr { + height: 14px; + background-position: -2787px 0px; + } + .iti__flag.iti__kw { + height: 10px; + background-position: -2809px 0px; + } + .iti__flag.iti__ky { + height: 10px; + background-position: -2831px 0px; + } + .iti__flag.iti__kz { + height: 10px; + background-position: -2853px 0px; + } + .iti__flag.iti__la { + height: 14px; + background-position: -2875px 0px; + } + .iti__flag.iti__lb { + height: 14px; + background-position: -2897px 0px; + } + .iti__flag.iti__lc { + height: 10px; + background-position: -2919px 0px; + } + .iti__flag.iti__li { + height: 12px; + background-position: -2941px 0px; + } + .iti__flag.iti__lk { + height: 10px; + background-position: -2963px 0px; + } + .iti__flag.iti__lr { + height: 11px; + background-position: -2985px 0px; + } + .iti__flag.iti__ls { + height: 14px; + background-position: -3007px 0px; + } + .iti__flag.iti__lt { + height: 12px; + background-position: -3029px 0px; + } + .iti__flag.iti__lu { + height: 12px; + background-position: -3051px 0px; + } + .iti__flag.iti__lv { + height: 10px; + background-position: -3073px 0px; + } + .iti__flag.iti__ly { + height: 10px; + background-position: -3095px 0px; + } + .iti__flag.iti__ma { + height: 14px; + background-position: -3117px 0px; + } + .iti__flag.iti__mc { + height: 15px; + background-position: -3139px 0px; + } + .iti__flag.iti__md { + height: 10px; + background-position: -3160px 0px; + } + .iti__flag.iti__me { + height: 10px; + background-position: -3182px 0px; + } + .iti__flag.iti__mf { + height: 14px; + background-position: -3204px 0px; + } + .iti__flag.iti__mg { + height: 14px; + background-position: -3226px 0px; + } + .iti__flag.iti__mh { + height: 11px; + background-position: -3248px 0px; + } + .iti__flag.iti__mk { + height: 10px; + background-position: -3270px 0px; + } + .iti__flag.iti__ml { + height: 14px; + background-position: -3292px 0px; + } + .iti__flag.iti__mm { + height: 14px; + background-position: -3314px 0px; + } + .iti__flag.iti__mn { + height: 10px; + background-position: -3336px 0px; + } + .iti__flag.iti__mo { + height: 14px; + background-position: -3358px 0px; + } + .iti__flag.iti__mp { + height: 10px; + background-position: -3380px 0px; + } + .iti__flag.iti__mq { + height: 14px; + background-position: -3402px 0px; + } + .iti__flag.iti__mr { + height: 14px; + background-position: -3424px 0px; + } + .iti__flag.iti__ms { + height: 10px; + background-position: -3446px 0px; + } + .iti__flag.iti__mt { + height: 14px; + background-position: -3468px 0px; + } + .iti__flag.iti__mu { + height: 14px; + background-position: -3490px 0px; + } + .iti__flag.iti__mv { + height: 14px; + background-position: -3512px 0px; + } + .iti__flag.iti__mw { + height: 14px; + background-position: -3534px 0px; + } + .iti__flag.iti__mx { + height: 12px; + background-position: -3556px 0px; + } + .iti__flag.iti__my { + height: 10px; + background-position: -3578px 0px; + } + .iti__flag.iti__mz { + height: 14px; + background-position: -3600px 0px; + } + .iti__flag.iti__na { + height: 14px; + background-position: -3622px 0px; + } + .iti__flag.iti__nc { + height: 10px; + background-position: -3644px 0px; + } + .iti__flag.iti__ne { + height: 15px; + background-position: -3666px 0px; + } + .iti__flag.iti__nf { + height: 10px; + background-position: -3686px 0px; + } + .iti__flag.iti__ng { + height: 10px; + background-position: -3708px 0px; + } + .iti__flag.iti__ni { + height: 12px; + background-position: -3730px 0px; + } + .iti__flag.iti__nl { + height: 14px; + background-position: -3752px 0px; + } + .iti__flag.iti__no { + height: 15px; + background-position: -3774px 0px; + } + .iti__flag.iti__np { + height: 15px; + background-position: -3796px 0px; + } + .iti__flag.iti__nr { + height: 10px; + background-position: -3811px 0px; + } + .iti__flag.iti__nu { + height: 10px; + background-position: -3833px 0px; + } + .iti__flag.iti__nz { + height: 10px; + background-position: -3855px 0px; + } + .iti__flag.iti__om { + height: 10px; + background-position: -3877px 0px; + } + .iti__flag.iti__pa { + height: 14px; + background-position: -3899px 0px; + } + .iti__flag.iti__pe { + height: 14px; + background-position: -3921px 0px; + } + .iti__flag.iti__pf { + height: 14px; + background-position: -3943px 0px; + } + .iti__flag.iti__pg { + height: 15px; + background-position: -3965px 0px; + } + .iti__flag.iti__ph { + height: 10px; + background-position: -3987px 0px; + } + .iti__flag.iti__pk { + height: 14px; + background-position: -4009px 0px; + } + .iti__flag.iti__pl { + height: 13px; + background-position: -4031px 0px; + } + .iti__flag.iti__pm { + height: 14px; + background-position: -4053px 0px; + } + .iti__flag.iti__pn { + height: 10px; + background-position: -4075px 0px; + } + .iti__flag.iti__pr { + height: 14px; + background-position: -4097px 0px; + } + .iti__flag.iti__ps { + height: 10px; + background-position: -4119px 0px; + } + .iti__flag.iti__pt { + height: 14px; + background-position: -4141px 0px; + } + .iti__flag.iti__pw { + height: 13px; + background-position: -4163px 0px; + } + .iti__flag.iti__py { + height: 11px; + background-position: -4185px 0px; + } + .iti__flag.iti__qa { + height: 8px; + background-position: -4207px 0px; + } + .iti__flag.iti__re { + height: 14px; + background-position: -4229px 0px; + } + .iti__flag.iti__ro { + height: 14px; + background-position: -4251px 0px; + } + .iti__flag.iti__rs { + height: 14px; + background-position: -4273px 0px; + } + .iti__flag.iti__ru { + height: 14px; + background-position: -4295px 0px; + } + .iti__flag.iti__rw { + height: 14px; + background-position: -4317px 0px; + } + .iti__flag.iti__sa { + height: 14px; + background-position: -4339px 0px; + } + .iti__flag.iti__sb { + height: 10px; + background-position: -4361px 0px; + } + .iti__flag.iti__sc { + height: 10px; + background-position: -4383px 0px; + } + .iti__flag.iti__sd { + height: 10px; + background-position: -4405px 0px; + } + .iti__flag.iti__se { + height: 13px; + background-position: -4427px 0px; + } + .iti__flag.iti__sg { + height: 14px; + background-position: -4449px 0px; + } + .iti__flag.iti__sh { + height: 10px; + background-position: -4471px 0px; + } + .iti__flag.iti__si { + height: 10px; + background-position: -4493px 0px; + } + .iti__flag.iti__sj { + height: 15px; + background-position: -4515px 0px; + } + .iti__flag.iti__sk { + height: 14px; + background-position: -4537px 0px; + } + .iti__flag.iti__sl { + height: 14px; + background-position: -4559px 0px; + } + .iti__flag.iti__sm { + height: 15px; + background-position: -4581px 0px; + } + .iti__flag.iti__sn { + height: 14px; + background-position: -4603px 0px; + } + .iti__flag.iti__so { + height: 14px; + background-position: -4625px 0px; + } + .iti__flag.iti__sr { + height: 14px; + background-position: -4647px 0px; + } + .iti__flag.iti__ss { + height: 10px; + background-position: -4669px 0px; + } + .iti__flag.iti__st { + height: 10px; + background-position: -4691px 0px; + } + .iti__flag.iti__sv { + height: 12px; + background-position: -4713px 0px; + } + .iti__flag.iti__sx { + height: 14px; + background-position: -4735px 0px; + } + .iti__flag.iti__sy { + height: 14px; + background-position: -4757px 0px; + } + .iti__flag.iti__sz { + height: 14px; + background-position: -4779px 0px; + } + .iti__flag.iti__ta { + height: 10px; + background-position: -4801px 0px; + } + .iti__flag.iti__tc { + height: 10px; + background-position: -4823px 0px; + } + .iti__flag.iti__td { + height: 14px; + background-position: -4845px 0px; + } + .iti__flag.iti__tf { + height: 14px; + background-position: -4867px 0px; + } + .iti__flag.iti__tg { + height: 13px; + background-position: -4889px 0px; + } + .iti__flag.iti__th { + height: 14px; + background-position: -4911px 0px; + } + .iti__flag.iti__tj { + height: 10px; + background-position: -4933px 0px; + } + .iti__flag.iti__tk { + height: 10px; + background-position: -4955px 0px; + } + .iti__flag.iti__tl { + height: 10px; + background-position: -4977px 0px; + } + .iti__flag.iti__tm { + height: 14px; + background-position: -4999px 0px; + } + .iti__flag.iti__tn { + height: 14px; + background-position: -5021px 0px; + } + .iti__flag.iti__to { + height: 10px; + background-position: -5043px 0px; + } + .iti__flag.iti__tr { + height: 14px; + background-position: -5065px 0px; + } + .iti__flag.iti__tt { + height: 12px; + background-position: -5087px 0px; + } + .iti__flag.iti__tv { + height: 10px; + background-position: -5109px 0px; + } + .iti__flag.iti__tw { + height: 14px; + background-position: -5131px 0px; + } + .iti__flag.iti__tz { + height: 14px; + background-position: -5153px 0px; + } + .iti__flag.iti__ua { + height: 14px; + background-position: -5175px 0px; + } + .iti__flag.iti__ug { + height: 14px; + background-position: -5197px 0px; + } + .iti__flag.iti__um { + height: 11px; + background-position: -5219px 0px; + } + .iti__flag.iti__un { + height: 14px; + background-position: -5241px 0px; + } + .iti__flag.iti__us { + height: 11px; + background-position: -5263px 0px; + } + .iti__flag.iti__uy { + height: 14px; + background-position: -5285px 0px; + } + .iti__flag.iti__uz { + height: 10px; + background-position: -5307px 0px; + } + .iti__flag.iti__va { + height: 15px; + background-position: -5329px 0px; + } + .iti__flag.iti__vc { + height: 14px; + background-position: -5346px 0px; + } + .iti__flag.iti__ve { + height: 14px; + background-position: -5368px 0px; + } + .iti__flag.iti__vg { + height: 10px; + background-position: -5390px 0px; + } + .iti__flag.iti__vi { + height: 14px; + background-position: -5412px 0px; + } + .iti__flag.iti__vn { + height: 14px; + background-position: -5434px 0px; + } + .iti__flag.iti__vu { + height: 12px; + background-position: -5456px 0px; + } + .iti__flag.iti__wf { + height: 14px; + background-position: -5478px 0px; + } + .iti__flag.iti__ws { + height: 10px; + background-position: -5500px 0px; + } + .iti__flag.iti__xk { + height: 15px; + background-position: -5522px 0px; + } + .iti__flag.iti__ye { + height: 14px; + background-position: -5544px 0px; + } + .iti__flag.iti__yt { + height: 14px; + background-position: -5566px 0px; + } + .iti__flag.iti__za { + height: 14px; + background-position: -5588px 0px; + } + .iti__flag.iti__zm { + height: 14px; + background-position: -5610px 0px; + } + .iti__flag.iti__zw { + height: 10px; + background-position: -5632px 0px; + } + + .iti__flag { + height: 15px; + box-shadow: 0px 0px 1px 0px #888; + background-image: url(${flagsImgUrl}); + background-repeat: no-repeat; + background-color: #dbdbdb; + background-position: 20px 0; + } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + .iti__flag { + background-image: url(${flagsImg2xUrl}); + } + } + + .iti__flag.iti__np { + background-color: transparent; + } +`; diff --git a/docs/components/inputs/select-rich/src/flags.png b/docs/components/inputs/select-rich/src/flags.png new file mode 100644 index 000000000..3fa1bec9f Binary files /dev/null and b/docs/components/inputs/select-rich/src/flags.png differ diff --git a/docs/components/inputs/select-rich/src/flags@2x.png b/docs/components/inputs/select-rich/src/flags@2x.png new file mode 100644 index 000000000..7cc3ed3fb Binary files /dev/null and b/docs/components/inputs/select-rich/src/flags@2x.png differ diff --git a/docs/components/inputs/select-rich/src/intl-select-rich.js b/docs/components/inputs/select-rich/src/intl-select-rich.js new file mode 100644 index 000000000..699f1247b --- /dev/null +++ b/docs/components/inputs/select-rich/src/intl-select-rich.js @@ -0,0 +1,193 @@ +import { html, css, LitElement } from '@lion/core'; +import { LionSelectRich, LionOption, LionSelectInvoker } from '@lion/select-rich'; +import { flagStyles } from './flagStyles.js'; + +/** + * @typedef {import('@lion/core').RenderOptions} RenderOptions + * @typedef {import('@lion/input-tel/types/types').RegionAndCountryCode} RegionAndCountryCode + * @typedef {import('@lion/input-tel/types/types').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel + * @typedef {{countryCode: string; regionCode: string; nameForRegion: string; nameForLocale: string}} RegionMetaList + * @typedef {TemplateDataForDropdownInputTel & {data: {regionMetaList:RegionMetaList}}} TemplateDataForIntlInputTel + */ + +export class IntlOption extends LionOption { + static properties = { regionMeta: { type: Object } }; + + static styles = [ + super.styles, + flagStyles, + css` + :host { + padding: 5px 10px; + outline: none; + } + + :host(:hover), + :host([active]), + :host([checked]) { + background-color: rgba(0, 0, 0, 0.05); + } + `, + ]; + + get _regionCode() { + return this.choiceValue?.toUpperCase(); + } + + render() { + const ctor = /** @type {typeof IntlOption} */ (this.constructor); + return ctor._contentTemplate({ + data: this.regionMeta, + }); + } + + static _contentTemplate({ data: { regionCode, countryCode, nameForLocale, nameForRegion } }) { + return html` +
+
+
+ ${nameForLocale} (${nameForRegion}) + +${countryCode} + `; + } +} +customElements.define('intl-option', IntlOption); + +class IntlSelectInvoker extends LionSelectInvoker { + /** + * @configure LitElement + * @enhance LionSelectInvoker + */ + static styles = [ + super.styles, + flagStyles, + css` + :host { + /** TODO: avoid importants; should actually be configured in overlay */ + width: auto !important; + background-color: transparent; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + + #content-wrapper { + display: flex; + align-items: center; + } + `, + ]; + + /** + * @configure SlotMixin + * @override LionSelectInvoker + */ + get slots() { + return {}; + } + + /** + * @override LionSelectInvoker + */ + render() { + const ctor = /** @type {typeof LionSelectInvoker} */ (this.constructor); + return ctor._mainTemplate(this._templateData); + } + + get _templateData() { + return { + data: { selectedElement: this.selectedElement, hostElement: this.hostElement }, + }; + } + + static _mainTemplate(templateData) { + return html`
${this._contentTemplate(templateData)}
`; + } + + static _contentTemplate({ data: { selectedElement, hostElement } }) { + if (!selectedElement) { + return ``; + } + return html` +
+
+ `; + } +} +customElements.define('intl-select-invoker', IntlSelectInvoker); + +export class IntlSeparator extends LitElement { + static styles = [ + css` + :host { + display: block; + padding-bottom: 5px; + margin-bottom: 5px; + border-bottom: 1px solid #ccc; + } + `, + ]; + + /** + * @lifecycle platform + */ + connectedCallback() { + super.connectedCallback(); + this.setAttribute('role', 'separator'); + } +} +customElements.define('intl-separator', IntlSeparator); + +export class IntlSelectRich extends LionSelectRich { + static styles = [ + super.styles, + css` + :host, + ::slotted(*) { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.42857143; + color: #333; + } + + ::slotted([role='listbox']) { + margin-left: -3px; + display: block; + white-space: nowrap; + max-height: 200px; + overflow-y: scroll; + position: absolute; + z-index: 2; + list-style: none; + text-align: left; + padding: 0; + margin: 0 0 0 -1px; + box-shadow: 1px 1px 4px rgb(0 0 0 / 20%); + background-color: white; + border: 1px solid #ccc; + -webkit-overflow-scrolling: touch; + outline: none; + } + + .form-field__group-two, + .input-group, + .input-group__container, + .input-group__input { + height: 100%; + } + `, + ]; + + /** + * @configure ScopedElementsMixin + */ + static scopedElements = { 'intl-select-invoker': IntlSelectInvoker }; + + /** + * @configure SlotMixin + */ + slots = { + ...super.slots, + invoker: () => html``, + }; +} +customElements.define('intl-select-rich', IntlSelectRich); diff --git a/docs/components/inputs/select-rich/src/regionMetaList.js b/docs/components/inputs/select-rich/src/regionMetaList.js new file mode 100644 index 000000000..6fee46ece --- /dev/null +++ b/docs/components/inputs/select-rich/src/regionMetaList.js @@ -0,0 +1,1717 @@ +export const regionMetaList = [ + { + regionCode: 'AC', + countryCode: 247, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡จ', + nameForLocale: 'Ascension Island', + nameForRegion: 'Ascension Island', + }, + { + regionCode: 'AD', + countryCode: 376, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ฉ', + nameForLocale: 'Andorra', + nameForRegion: 'Andorra', + }, + { + regionCode: 'AE', + countryCode: 971, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ช', + nameForLocale: 'United Arab Emirates', + nameForRegion: 'United Arab Emirates', + }, + { + regionCode: 'AF', + countryCode: 93, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ซ', + nameForLocale: 'Afghanistan', + nameForRegion: 'Afghanistan', + }, + { + regionCode: 'AG', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ฌ', + nameForLocale: 'Antigua & Barbuda', + nameForRegion: 'Antigua & Barbuda', + }, + { + regionCode: 'AI', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ฎ', + nameForLocale: 'Anguilla', + nameForRegion: 'Anguilla', + }, + { + regionCode: 'AL', + countryCode: 355, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ฑ', + nameForLocale: 'Albania', + nameForRegion: 'Albania', + }, + { + regionCode: 'AM', + countryCode: 374, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ฒ', + nameForLocale: 'Armenia', + nameForRegion: 'แŠ แˆญแˆœแŠ’แ‹ซ', + }, + { + regionCode: 'AO', + countryCode: 244, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ด', + nameForLocale: 'Angola', + nameForRegion: 'Angola', + }, + { + regionCode: 'AR', + countryCode: 54, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ท', + nameForLocale: 'Argentina', + nameForRegion: 'ุงู„ุฃุฑุฌู†ุชูŠู†', + }, + { + regionCode: 'AS', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ธ', + nameForLocale: 'American Samoa', + nameForRegion: 'American Samoa', + }, + { + regionCode: 'AT', + countryCode: 43, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡น', + nameForLocale: 'Austria', + nameForRegion: 'Austria', + }, + { + regionCode: 'AU', + countryCode: 61, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡บ', + nameForLocale: 'Australia', + nameForRegion: 'Australia', + }, + { + regionCode: 'AW', + countryCode: 297, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ผ', + nameForLocale: 'Aruba', + nameForRegion: 'Aruba', + }, + { + regionCode: 'AX', + countryCode: 358, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ฝ', + nameForLocale: 'ร…land Islands', + nameForRegion: 'ร…land Islands', + }, + { + regionCode: 'AZ', + countryCode: 994, + flagSymbol: '๐Ÿ‡ฆ๐Ÿ‡ฟ', + nameForLocale: 'Azerbaijan', + nameForRegion: 'Azerbaijan', + }, + { + regionCode: 'BA', + countryCode: 387, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ฆ', + nameForLocale: 'Bosnia & Herzegovina', + nameForRegion: 'Bosnia & Herzegovina', + }, + { + regionCode: 'BB', + countryCode: 1, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ง', + nameForLocale: 'Barbados', + nameForRegion: 'Barbados', + }, + { + regionCode: 'BD', + countryCode: 880, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ฉ', + nameForLocale: 'Bangladesh', + nameForRegion: 'Bangladesh', + }, + { + regionCode: 'BE', + countryCode: 32, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ช', + nameForLocale: 'Belgium', + nameForRegion: 'Belgium', + }, + { + regionCode: 'BF', + countryCode: 226, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ซ', + nameForLocale: 'Burkina Faso', + nameForRegion: 'Burkina Faso', + }, + { + regionCode: 'BG', + countryCode: 359, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ฌ', + nameForLocale: 'Bulgaria', + nameForRegion: 'ะ‘ัŠะปะณะฐั€ะธั', + }, + { + regionCode: 'BH', + countryCode: 973, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ญ', + nameForLocale: 'Bahrain', + nameForRegion: 'Bahrain', + }, + { + regionCode: 'BI', + countryCode: 257, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ฎ', + nameForLocale: 'Burundi', + nameForRegion: 'Burundi', + }, + { + regionCode: 'BJ', + countryCode: 229, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ฏ', + nameForLocale: 'Benin', + nameForRegion: 'Benin', + }, + { + regionCode: 'BL', + countryCode: 590, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ฑ', + nameForLocale: 'St. Barthรฉlemy', + nameForRegion: 'St Barthรฉlemy', + }, + { + regionCode: 'BM', + countryCode: 1, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ฒ', + nameForLocale: 'Bermuda', + nameForRegion: 'Bermuda', + }, + { + regionCode: 'BN', + countryCode: 673, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ณ', + nameForLocale: 'Brunei', + nameForRegion: 'เฆฌเงเฆฐเงเฆจเง‡เฆ‡', + }, + { + regionCode: 'BO', + countryCode: 591, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ด', + nameForLocale: 'Bolivia', + nameForRegion: 'Bolivia', + }, + { + regionCode: 'BQ', + countryCode: 599, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ถ', + nameForLocale: 'Caribbean Netherlands', + nameForRegion: 'Caribbean Netherlands', + }, + { + regionCode: 'BR', + countryCode: 55, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ท', + nameForLocale: 'Brazil', + nameForRegion: 'Brazil', + }, + { + regionCode: 'BS', + countryCode: 1, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ธ', + nameForLocale: 'Bahamas', + nameForRegion: 'Bahamas', + }, + { + regionCode: 'BT', + countryCode: 975, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡น', + nameForLocale: 'Bhutan', + nameForRegion: 'Bhutan', + }, + { + regionCode: 'BW', + countryCode: 267, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ผ', + nameForLocale: 'Botswana', + nameForRegion: 'Botswana', + }, + { + regionCode: 'BY', + countryCode: 375, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡พ', + nameForLocale: 'Belarus', + nameForRegion: 'Belarus', + }, + { + regionCode: 'BZ', + countryCode: 501, + flagSymbol: '๐Ÿ‡ง๐Ÿ‡ฟ', + nameForLocale: 'Belize', + nameForRegion: 'Belize', + }, + { + regionCode: 'CA', + countryCode: 1, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ฆ', + nameForLocale: 'Canada', + nameForRegion: 'Canadร ', + }, + { + regionCode: 'CC', + countryCode: 61, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡จ', + nameForLocale: 'Cocos (Keeling) Islands', + nameForRegion: 'Cocos (Keeling) Islands', + }, + { + regionCode: 'CD', + countryCode: 243, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ฉ', + nameForLocale: 'Congo - Kinshasa', + nameForRegion: 'Congo - Kinshasa', + }, + { + regionCode: 'CF', + countryCode: 236, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ซ', + nameForLocale: 'Central African Republic', + nameForRegion: 'Central African Republic', + }, + { + regionCode: 'CG', + countryCode: 242, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ฌ', + nameForLocale: 'Congo - Brazzaville', + nameForRegion: 'Congo - Brazzaville', + }, + { + regionCode: 'CH', + countryCode: 41, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ญ', + nameForLocale: 'Switzerland', + nameForRegion: 'Switzerland', + }, + { + regionCode: 'CI', + countryCode: 225, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ฎ', + nameForLocale: 'Cรดte dโ€™Ivoire', + nameForRegion: 'Cรดte dโ€™Ivoire', + }, + { + regionCode: 'CK', + countryCode: 682, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ฐ', + nameForLocale: 'Cook Islands', + nameForRegion: 'Cook Islands', + }, + { + regionCode: 'CL', + countryCode: 56, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ฑ', + nameForLocale: 'Chile', + nameForRegion: 'Chile', + }, + { + regionCode: 'CM', + countryCode: 237, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ฒ', + nameForLocale: 'Cameroon', + nameForRegion: 'Cameroon', + }, + { + regionCode: 'CN', + countryCode: 86, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ณ', + nameForLocale: 'China', + nameForRegion: 'China', + }, + { + regionCode: 'CO', + countryCode: 57, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ด', + nameForLocale: 'Colombia', + nameForRegion: 'Colombia', + }, + { + regionCode: 'CR', + countryCode: 506, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ท', + nameForLocale: 'Costa Rica', + nameForRegion: 'Costa Rica', + }, + { + regionCode: 'CU', + countryCode: 53, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡บ', + nameForLocale: 'Cuba', + nameForRegion: 'Cuba', + }, + { + regionCode: 'CV', + countryCode: 238, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ป', + nameForLocale: 'Cape Verde', + nameForRegion: 'Cape Verde', + }, + { + regionCode: 'CW', + countryCode: 599, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ผ', + nameForLocale: 'Curaรงao', + nameForRegion: 'Curaรงao', + }, + { + regionCode: 'CX', + countryCode: 61, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ฝ', + nameForLocale: 'Christmas Island', + nameForRegion: 'Christmas Island', + }, + { + regionCode: 'CY', + countryCode: 357, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡พ', + nameForLocale: 'Cyprus', + nameForRegion: 'Cyprus', + }, + { + regionCode: 'CZ', + countryCode: 420, + flagSymbol: '๐Ÿ‡จ๐Ÿ‡ฟ', + nameForLocale: 'Czechia', + nameForRegion: 'Czechia', + }, + { + regionCode: 'DE', + countryCode: 49, + flagSymbol: '๐Ÿ‡ฉ๐Ÿ‡ช', + nameForLocale: 'Germany', + nameForRegion: 'Deutschland', + }, + { + regionCode: 'DJ', + countryCode: 253, + flagSymbol: '๐Ÿ‡ฉ๐Ÿ‡ฏ', + nameForLocale: 'Djibouti', + nameForRegion: 'Djibouti', + }, + { + regionCode: 'DK', + countryCode: 45, + flagSymbol: '๐Ÿ‡ฉ๐Ÿ‡ฐ', + nameForLocale: 'Denmark', + nameForRegion: 'Denmark', + }, + { + regionCode: 'DM', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฉ๐Ÿ‡ฒ', + nameForLocale: 'Dominica', + nameForRegion: 'Dominica', + }, + { + regionCode: 'DO', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฉ๐Ÿ‡ด', + nameForLocale: 'Dominican Republic', + nameForRegion: 'Dominican Republic', + }, + { + regionCode: 'DZ', + countryCode: 213, + flagSymbol: '๐Ÿ‡ฉ๐Ÿ‡ฟ', + nameForLocale: 'Algeria', + nameForRegion: 'Algeria', + }, + { + regionCode: 'EC', + countryCode: 593, + flagSymbol: '๐Ÿ‡ช๐Ÿ‡จ', + nameForLocale: 'Ecuador', + nameForRegion: 'Ecuador', + }, + { + regionCode: 'EE', + countryCode: 372, + flagSymbol: '๐Ÿ‡ช๐Ÿ‡ช', + nameForLocale: 'Estonia', + nameForRegion: 'Estonia', + }, + { + regionCode: 'EG', + countryCode: 20, + flagSymbol: '๐Ÿ‡ช๐Ÿ‡ฌ', + nameForLocale: 'Egypt', + nameForRegion: 'Egypt', + }, + { + regionCode: 'EH', + countryCode: 212, + flagSymbol: '๐Ÿ‡ช๐Ÿ‡ญ', + nameForLocale: 'Western Sahara', + nameForRegion: 'Western Sahara', + }, + { + regionCode: 'ER', + countryCode: 291, + flagSymbol: '๐Ÿ‡ช๐Ÿ‡ท', + nameForLocale: 'Eritrea', + nameForRegion: 'Eritrea', + }, + { + regionCode: 'ES', + countryCode: 34, + flagSymbol: '๐Ÿ‡ช๐Ÿ‡ธ', + nameForLocale: 'Spain', + nameForRegion: 'Espaรฑa', + }, + { + regionCode: 'ET', + countryCode: 251, + flagSymbol: '๐Ÿ‡ช๐Ÿ‡น', + nameForLocale: 'Ethiopia', + nameForRegion: 'Etioopia', + }, + { + regionCode: 'FI', + countryCode: 358, + flagSymbol: '๐Ÿ‡ซ๐Ÿ‡ฎ', + nameForLocale: 'Finland', + nameForRegion: 'Suomi', + }, + { + regionCode: 'FJ', + countryCode: 679, + flagSymbol: '๐Ÿ‡ซ๐Ÿ‡ฏ', + nameForLocale: 'Fiji', + nameForRegion: 'Fiji', + }, + { + regionCode: 'FK', + countryCode: 500, + flagSymbol: '๐Ÿ‡ซ๐Ÿ‡ฐ', + nameForLocale: 'Falkland Islands (Islas Malvinas)', + nameForRegion: 'Falkland Islands (Islas Malvinas)', + }, + { + regionCode: 'FM', + countryCode: 691, + flagSymbol: '๐Ÿ‡ซ๐Ÿ‡ฒ', + nameForLocale: 'Micronesia', + nameForRegion: 'Micronesia', + }, + { + regionCode: 'FO', + countryCode: 298, + flagSymbol: '๐Ÿ‡ซ๐Ÿ‡ด', + nameForLocale: 'Faroe Islands', + nameForRegion: 'Faroe Islands', + }, + { + regionCode: 'FR', + countryCode: 33, + flagSymbol: '๐Ÿ‡ซ๐Ÿ‡ท', + nameForLocale: 'France', + nameForRegion: 'France', + }, + { + regionCode: 'GA', + countryCode: 241, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ฆ', + nameForLocale: 'Gabon', + nameForRegion: 'Gabon', + }, + { + regionCode: 'GB', + countryCode: 44, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ง', + nameForLocale: 'United Kingdom', + nameForRegion: 'United Kingdom', + }, + { + regionCode: 'GD', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ฉ', + nameForLocale: 'Grenada', + nameForRegion: 'Grenada', + }, + { + regionCode: 'GE', + countryCode: 995, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ช', + nameForLocale: 'Georgia', + nameForRegion: 'Georgia', + }, + { + regionCode: 'GF', + countryCode: 594, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ซ', + nameForLocale: 'French Guiana', + nameForRegion: 'French Guiana', + }, + { + regionCode: 'GG', + countryCode: 44, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ฌ', + nameForLocale: 'Guernsey', + nameForRegion: 'Guernsey', + }, + { + regionCode: 'GH', + countryCode: 233, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ญ', + nameForLocale: 'Ghana', + nameForRegion: 'Ghana', + }, + { + regionCode: 'GI', + countryCode: 350, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ฎ', + nameForLocale: 'Gibraltar', + nameForRegion: 'Gibraltar', + }, + { + regionCode: 'GL', + countryCode: 299, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ฑ', + nameForLocale: 'Greenland', + nameForRegion: 'Greenland', + }, + { + regionCode: 'GM', + countryCode: 220, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ฒ', + nameForLocale: 'Gambia', + nameForRegion: 'Gambia', + }, + { + regionCode: 'GN', + countryCode: 224, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ณ', + nameForLocale: 'Guinea', + nameForRegion: 'Guinea', + }, + { + regionCode: 'GP', + countryCode: 590, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ต', + nameForLocale: 'Guadeloupe', + nameForRegion: 'Guadeloupe', + }, + { + regionCode: 'GQ', + countryCode: 240, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ถ', + nameForLocale: 'Equatorial Guinea', + nameForRegion: 'Equatorial Guinea', + }, + { + regionCode: 'GR', + countryCode: 30, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ท', + nameForLocale: 'Greece', + nameForRegion: 'Greece', + }, + { + regionCode: 'GT', + countryCode: 502, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡น', + nameForLocale: 'Guatemala', + nameForRegion: 'Guatemala', + }, + { + regionCode: 'GU', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡บ', + nameForLocale: 'Guam', + nameForRegion: 'เช—เซเชตเชพเชฎ', + }, + { + regionCode: 'GW', + countryCode: 245, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡ผ', + nameForLocale: 'Guinea-Bissau', + nameForRegion: 'Guinea-Bissau', + }, + { + regionCode: 'GY', + countryCode: 592, + flagSymbol: '๐Ÿ‡ฌ๐Ÿ‡พ', + nameForLocale: 'Guyana', + nameForRegion: 'Guyana', + }, + { + regionCode: 'HK', + countryCode: 852, + flagSymbol: '๐Ÿ‡ญ๐Ÿ‡ฐ', + nameForLocale: 'Hong Kong', + nameForRegion: 'Hong Kong', + }, + { + regionCode: 'HN', + countryCode: 504, + flagSymbol: '๐Ÿ‡ญ๐Ÿ‡ณ', + nameForLocale: 'Honduras', + nameForRegion: 'Honduras', + }, + { + regionCode: 'HR', + countryCode: 385, + flagSymbol: '๐Ÿ‡ญ๐Ÿ‡ท', + nameForLocale: 'Croatia', + nameForRegion: 'Hrvatska', + }, + { + regionCode: 'HT', + countryCode: 509, + flagSymbol: '๐Ÿ‡ญ๐Ÿ‡น', + nameForLocale: 'Haiti', + nameForRegion: 'Haiti', + }, + { + regionCode: 'HU', + countryCode: 36, + flagSymbol: '๐Ÿ‡ญ๐Ÿ‡บ', + nameForLocale: 'Hungary', + nameForRegion: 'Magyarorszรกg', + }, + { + regionCode: 'ID', + countryCode: 62, + flagSymbol: '๐Ÿ‡ฎ๐Ÿ‡ฉ', + nameForLocale: 'Indonesia', + nameForRegion: 'Indonesia', + }, + { + regionCode: 'IE', + countryCode: 353, + flagSymbol: '๐Ÿ‡ฎ๐Ÿ‡ช', + nameForLocale: 'Ireland', + nameForRegion: 'Ireland', + }, + { + regionCode: 'IL', + countryCode: 972, + flagSymbol: '๐Ÿ‡ฎ๐Ÿ‡ฑ', + nameForLocale: 'Israel', + nameForRegion: 'Israel', + }, + { + regionCode: 'IM', + countryCode: 44, + flagSymbol: '๐Ÿ‡ฎ๐Ÿ‡ฒ', + nameForLocale: 'Isle of Man', + nameForRegion: 'Isle of Man', + }, + { + regionCode: 'IN', + countryCode: 91, + flagSymbol: '๐Ÿ‡ฎ๐Ÿ‡ณ', + nameForLocale: 'India', + nameForRegion: 'India', + }, + { + regionCode: 'IO', + countryCode: 246, + flagSymbol: '๐Ÿ‡ฎ๐Ÿ‡ด', + nameForLocale: 'British Indian Ocean Territory', + nameForRegion: 'British Indian Ocean Territory', + }, + { + regionCode: 'IQ', + countryCode: 964, + flagSymbol: '๐Ÿ‡ฎ๐Ÿ‡ถ', + nameForLocale: 'Iraq', + nameForRegion: 'Iraq', + }, + { + regionCode: 'IR', + countryCode: 98, + flagSymbol: '๐Ÿ‡ฎ๐Ÿ‡ท', + nameForLocale: 'Iran', + nameForRegion: 'Iran', + }, + { + regionCode: 'IS', + countryCode: 354, + flagSymbol: '๐Ÿ‡ฎ๐Ÿ‡ธ', + nameForLocale: 'Iceland', + nameForRegion: 'Iceland', + }, + { + regionCode: 'IT', + countryCode: 39, + flagSymbol: '๐Ÿ‡ฎ๐Ÿ‡น', + nameForLocale: 'Italy', + nameForRegion: 'Italia', + }, + { + regionCode: 'JE', + countryCode: 44, + flagSymbol: '๐Ÿ‡ฏ๐Ÿ‡ช', + nameForLocale: 'Jersey', + nameForRegion: 'Jersey', + }, + { + regionCode: 'JM', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฏ๐Ÿ‡ฒ', + nameForLocale: 'Jamaica', + nameForRegion: 'Jamaica', + }, + { + regionCode: 'JO', + countryCode: 962, + flagSymbol: '๐Ÿ‡ฏ๐Ÿ‡ด', + nameForLocale: 'Jordan', + nameForRegion: 'Jordan', + }, + { + regionCode: 'JP', + countryCode: 81, + flagSymbol: '๐Ÿ‡ฏ๐Ÿ‡ต', + nameForLocale: 'Japan', + nameForRegion: 'Japan', + }, + { + regionCode: 'KE', + countryCode: 254, + flagSymbol: '๐Ÿ‡ฐ๐Ÿ‡ช', + nameForLocale: 'Kenya', + nameForRegion: 'Kenya', + }, + { + regionCode: 'KG', + countryCode: 996, + flagSymbol: '๐Ÿ‡ฐ๐Ÿ‡ฌ', + nameForLocale: 'Kyrgyzstan', + nameForRegion: 'Kyrgyzstan', + }, + { + regionCode: 'KH', + countryCode: 855, + flagSymbol: '๐Ÿ‡ฐ๐Ÿ‡ญ', + nameForLocale: 'Cambodia', + nameForRegion: 'Cambodia', + }, + { + regionCode: 'KI', + countryCode: 686, + flagSymbol: '๐Ÿ‡ฐ๐Ÿ‡ฎ', + nameForLocale: 'Kiribati', + nameForRegion: 'Kiribati', + }, + { + regionCode: 'KM', + countryCode: 269, + flagSymbol: '๐Ÿ‡ฐ๐Ÿ‡ฒ', + nameForLocale: 'Comoros', + nameForRegion: 'Comoros', + }, + { + regionCode: 'KN', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฐ๐Ÿ‡ณ', + nameForLocale: 'St. Kitts & Nevis', + nameForRegion: 'เฒธเณ‡เฒ‚เฒŸเณ เฒ•เฒฟเฒŸเณเฒธเณ เฒฎเฒคเณเฒคเณ เฒจเณ†เฒตเฒฟเฒธเณ', + }, + { + regionCode: 'KP', + countryCode: 850, + flagSymbol: '๐Ÿ‡ฐ๐Ÿ‡ต', + nameForLocale: 'North Korea', + nameForRegion: 'North Korea', + }, + { + regionCode: 'KR', + countryCode: 82, + flagSymbol: '๐Ÿ‡ฐ๐Ÿ‡ท', + nameForLocale: 'South Korea', + nameForRegion: 'South Korea', + }, + { + regionCode: 'KW', + countryCode: 965, + flagSymbol: '๐Ÿ‡ฐ๐Ÿ‡ผ', + nameForLocale: 'Kuwait', + nameForRegion: 'Kuwait', + }, + { + regionCode: 'KY', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฐ๐Ÿ‡พ', + nameForLocale: 'Cayman Islands', + nameForRegion: 'Cayman Islands', + }, + { + regionCode: 'KZ', + countryCode: 7, + flagSymbol: '๐Ÿ‡ฐ๐Ÿ‡ฟ', + nameForLocale: 'Kazakhstan', + nameForRegion: 'Kazakhstan', + }, + { + regionCode: 'LA', + countryCode: 856, + flagSymbol: '๐Ÿ‡ฑ๐Ÿ‡ฆ', + nameForLocale: 'Laos', + nameForRegion: 'Laos', + }, + { + regionCode: 'LB', + countryCode: 961, + flagSymbol: '๐Ÿ‡ฑ๐Ÿ‡ง', + nameForLocale: 'Lebanon', + nameForRegion: 'Lebanon', + }, + { + regionCode: 'LC', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฑ๐Ÿ‡จ', + nameForLocale: 'St. Lucia', + nameForRegion: 'St Lucia', + }, + { + regionCode: 'LI', + countryCode: 423, + flagSymbol: '๐Ÿ‡ฑ๐Ÿ‡ฎ', + nameForLocale: 'Liechtenstein', + nameForRegion: 'Liechtenstein', + }, + { + regionCode: 'LK', + countryCode: 94, + flagSymbol: '๐Ÿ‡ฑ๐Ÿ‡ฐ', + nameForLocale: 'Sri Lanka', + nameForRegion: 'Sri Lanka', + }, + { + regionCode: 'LR', + countryCode: 231, + flagSymbol: '๐Ÿ‡ฑ๐Ÿ‡ท', + nameForLocale: 'Liberia', + nameForRegion: 'Liberia', + }, + { + regionCode: 'LS', + countryCode: 266, + flagSymbol: '๐Ÿ‡ฑ๐Ÿ‡ธ', + nameForLocale: 'Lesotho', + nameForRegion: 'Lesotho', + }, + { + regionCode: 'LT', + countryCode: 370, + flagSymbol: '๐Ÿ‡ฑ๐Ÿ‡น', + nameForLocale: 'Lithuania', + nameForRegion: 'Lietuva', + }, + { + regionCode: 'LU', + countryCode: 352, + flagSymbol: '๐Ÿ‡ฑ๐Ÿ‡บ', + nameForLocale: 'Luxembourg', + nameForRegion: 'Luxembourg', + }, + { + regionCode: 'LV', + countryCode: 371, + flagSymbol: '๐Ÿ‡ฑ๐Ÿ‡ป', + nameForLocale: 'Latvia', + nameForRegion: 'Latvija', + }, + { + regionCode: 'LY', + countryCode: 218, + flagSymbol: '๐Ÿ‡ฑ๐Ÿ‡พ', + nameForLocale: 'Libya', + nameForRegion: 'Libya', + }, + { + regionCode: 'MA', + countryCode: 212, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ฆ', + nameForLocale: 'Morocco', + nameForRegion: 'Morocco', + }, + { + regionCode: 'MC', + countryCode: 377, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡จ', + nameForLocale: 'Monaco', + nameForRegion: 'Monaco', + }, + { + regionCode: 'MD', + countryCode: 373, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ฉ', + nameForLocale: 'Moldova', + nameForRegion: 'Moldova', + }, + { + regionCode: 'ME', + countryCode: 382, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ช', + nameForLocale: 'Montenegro', + nameForRegion: 'Montenegro', + }, + { + regionCode: 'MF', + countryCode: 590, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ซ', + nameForLocale: 'St. Martin', + nameForRegion: 'St Martin', + }, + { + regionCode: 'MG', + countryCode: 261, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ฌ', + nameForLocale: 'Madagascar', + nameForRegion: 'Madagascar', + }, + { + regionCode: 'MH', + countryCode: 692, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ญ', + nameForLocale: 'Marshall Islands', + nameForRegion: 'Marshall Islands', + }, + { + regionCode: 'MK', + countryCode: 389, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ฐ', + nameForLocale: 'North Macedonia', + nameForRegion: 'North Macedonia', + }, + { + regionCode: 'ML', + countryCode: 223, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ฑ', + nameForLocale: 'Mali', + nameForRegion: 'เดฎเดพเดฒเดฟ', + }, + { + regionCode: 'MM', + countryCode: 95, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ฒ', + nameForLocale: 'Myanmar (Burma)', + nameForRegion: 'Myanmar (Burma)', + }, + { + regionCode: 'MN', + countryCode: 976, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ณ', + nameForLocale: 'Mongolia', + nameForRegion: 'Mongolia', + }, + { + regionCode: 'MO', + countryCode: 853, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ด', + nameForLocale: 'Macao', + nameForRegion: 'Macao', + }, + { + regionCode: 'MP', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ต', + nameForLocale: 'Northern Mariana Islands', + nameForRegion: 'Northern Mariana Islands', + }, + { + regionCode: 'MQ', + countryCode: 596, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ถ', + nameForLocale: 'Martinique', + nameForRegion: 'Martinique', + }, + { + regionCode: 'MR', + countryCode: 222, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ท', + nameForLocale: 'Mauritania', + nameForRegion: 'เคฎเฅ‰เคฐเคฟเคŸเคพเคจเคฟเคฏเคพ', + }, + { + regionCode: 'MS', + countryCode: 1, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ธ', + nameForLocale: 'Montserrat', + nameForRegion: 'Montserrat', + }, + { + regionCode: 'MT', + countryCode: 356, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡น', + nameForLocale: 'Malta', + nameForRegion: 'Malta', + }, + { + regionCode: 'MU', + countryCode: 230, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡บ', + nameForLocale: 'Mauritius', + nameForRegion: 'Mauritius', + }, + { + regionCode: 'MV', + countryCode: 960, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ป', + nameForLocale: 'Maldives', + nameForRegion: 'Maldives', + }, + { + regionCode: 'MW', + countryCode: 265, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ผ', + nameForLocale: 'Malawi', + nameForRegion: 'Malawi', + }, + { + regionCode: 'MX', + countryCode: 52, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ฝ', + nameForLocale: 'Mexico', + nameForRegion: 'Mexico', + }, + { + regionCode: 'MY', + countryCode: 60, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡พ', + nameForLocale: 'Malaysia', + nameForRegion: 'Malaysia', + }, + { + regionCode: 'MZ', + countryCode: 258, + flagSymbol: '๐Ÿ‡ฒ๐Ÿ‡ฟ', + nameForLocale: 'Mozambique', + nameForRegion: 'Mozambique', + }, + { + regionCode: 'NA', + countryCode: 264, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡ฆ', + nameForLocale: 'Namibia', + nameForRegion: 'Namibia', + }, + { + regionCode: 'NC', + countryCode: 687, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡จ', + nameForLocale: 'New Caledonia', + nameForRegion: 'New Caledonia', + }, + { + regionCode: 'NE', + countryCode: 227, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡ช', + nameForLocale: 'Niger', + nameForRegion: 'Niger', + }, + { + regionCode: 'NF', + countryCode: 672, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡ซ', + nameForLocale: 'Norfolk Island', + nameForRegion: 'Norfolk Island', + }, + { + regionCode: 'NG', + countryCode: 234, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡ฌ', + nameForLocale: 'Nigeria', + nameForRegion: 'Nigeria', + }, + { + regionCode: 'NI', + countryCode: 505, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡ฎ', + nameForLocale: 'Nicaragua', + nameForRegion: 'Nicaragua', + }, + { + regionCode: 'NL', + countryCode: 31, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡ฑ', + nameForLocale: 'Netherlands', + nameForRegion: 'Nederland', + }, + { + regionCode: 'NO', + countryCode: 47, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡ด', + nameForLocale: 'Norway', + nameForRegion: 'Norge', + }, + { + regionCode: 'NP', + countryCode: 977, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡ต', + nameForLocale: 'Nepal', + nameForRegion: 'Nepal', + }, + { + regionCode: 'NR', + countryCode: 674, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡ท', + nameForLocale: 'Nauru', + nameForRegion: 'Nauru', + }, + { + regionCode: 'NU', + countryCode: 683, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡บ', + nameForLocale: 'Niue', + nameForRegion: 'Niue', + }, + { + regionCode: 'NZ', + countryCode: 64, + flagSymbol: '๐Ÿ‡ณ๐Ÿ‡ฟ', + nameForLocale: 'New Zealand', + nameForRegion: 'New Zealand', + }, + { + regionCode: 'OM', + countryCode: 968, + flagSymbol: '๐Ÿ‡ด๐Ÿ‡ฒ', + nameForLocale: 'Oman', + nameForRegion: 'Oman', + }, + { + regionCode: 'PA', + countryCode: 507, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡ฆ', + nameForLocale: 'Panama', + nameForRegion: 'Panama', + }, + { + regionCode: 'PE', + countryCode: 51, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡ช', + nameForLocale: 'Peru', + nameForRegion: 'Peru', + }, + { + regionCode: 'PF', + countryCode: 689, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡ซ', + nameForLocale: 'French Polynesia', + nameForRegion: 'French Polynesia', + }, + { + regionCode: 'PG', + countryCode: 675, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡ฌ', + nameForLocale: 'Papua New Guinea', + nameForRegion: 'Papua New Guinea', + }, + { + regionCode: 'PH', + countryCode: 63, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡ญ', + nameForLocale: 'Philippines', + nameForRegion: 'Philippines', + }, + { + regionCode: 'PK', + countryCode: 92, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡ฐ', + nameForLocale: 'Pakistan', + nameForRegion: 'Pakistan', + }, + { + regionCode: 'PL', + countryCode: 48, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡ฑ', + nameForLocale: 'Poland', + nameForRegion: 'Polska', + }, + { + regionCode: 'PM', + countryCode: 508, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡ฒ', + nameForLocale: 'St. Pierre & Miquelon', + nameForRegion: 'St Pierre & Miquelon', + }, + { + regionCode: 'PR', + countryCode: 1, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡ท', + nameForLocale: 'Puerto Rico', + nameForRegion: 'Puerto Rico', + }, + { + regionCode: 'PS', + countryCode: 970, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡ธ', + nameForLocale: 'Palestine', + nameForRegion: 'Palestine', + }, + { + regionCode: 'PT', + countryCode: 351, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡น', + nameForLocale: 'Portugal', + nameForRegion: 'Portugal', + }, + { + regionCode: 'PW', + countryCode: 680, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡ผ', + nameForLocale: 'Palau', + nameForRegion: 'Palau', + }, + { + regionCode: 'PY', + countryCode: 595, + flagSymbol: '๐Ÿ‡ต๐Ÿ‡พ', + nameForLocale: 'Paraguay', + nameForRegion: 'Paraguay', + }, + { + regionCode: 'QA', + countryCode: 974, + flagSymbol: '๐Ÿ‡ถ๐Ÿ‡ฆ', + nameForLocale: 'Qatar', + nameForRegion: 'Qatar', + }, + { + regionCode: 'RE', + countryCode: 262, + flagSymbol: '๐Ÿ‡ท๐Ÿ‡ช', + nameForLocale: 'Rรฉunion', + nameForRegion: 'Rรฉunion', + }, + { + regionCode: 'RO', + countryCode: 40, + flagSymbol: '๐Ÿ‡ท๐Ÿ‡ด', + nameForLocale: 'Romania', + nameForRegion: 'Romรขnia', + }, + { + regionCode: 'RS', + countryCode: 381, + flagSymbol: '๐Ÿ‡ท๐Ÿ‡ธ', + nameForLocale: 'Serbia', + nameForRegion: 'Serbia', + }, + { + regionCode: 'RU', + countryCode: 7, + flagSymbol: '๐Ÿ‡ท๐Ÿ‡บ', + nameForLocale: 'Russia', + nameForRegion: 'ะ ะพััะธั', + }, + { + regionCode: 'RW', + countryCode: 250, + flagSymbol: '๐Ÿ‡ท๐Ÿ‡ผ', + nameForLocale: 'Rwanda', + nameForRegion: 'Rwanda', + }, + { + regionCode: 'SA', + countryCode: 966, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ฆ', + nameForLocale: 'Saudi Arabia', + nameForRegion: 'Saudi Arabia', + }, + { + regionCode: 'SB', + countryCode: 677, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ง', + nameForLocale: 'Solomon Islands', + nameForRegion: 'Solomon Islands', + }, + { + regionCode: 'SC', + countryCode: 248, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡จ', + nameForLocale: 'Seychelles', + nameForRegion: 'Seychelles', + }, + { + regionCode: 'SD', + countryCode: 249, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ฉ', + nameForLocale: 'Sudan', + nameForRegion: 'Sudan', + }, + { + regionCode: 'SE', + countryCode: 46, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ช', + nameForLocale: 'Sweden', + nameForRegion: 'Sweden', + }, + { + regionCode: 'SG', + countryCode: 65, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ฌ', + nameForLocale: 'Singapore', + nameForRegion: 'Singapore', + }, + { + regionCode: 'SH', + countryCode: 290, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ญ', + nameForLocale: 'St. Helena', + nameForRegion: 'Sveta Jelena', + }, + { + regionCode: 'SI', + countryCode: 386, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ฎ', + nameForLocale: 'Slovenia', + nameForRegion: 'Slovenia', + }, + { + regionCode: 'SJ', + countryCode: 47, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ฏ', + nameForLocale: 'Svalbard & Jan Mayen', + nameForRegion: 'Svalbard & Jan Mayen', + }, + { + regionCode: 'SK', + countryCode: 421, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ฐ', + nameForLocale: 'Slovakia', + nameForRegion: 'Slovensko', + }, + { + regionCode: 'SL', + countryCode: 232, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ฑ', + nameForLocale: 'Sierra Leone', + nameForRegion: 'Sierra Leone', + }, + { + regionCode: 'SM', + countryCode: 378, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ฒ', + nameForLocale: 'San Marino', + nameForRegion: 'San Marino', + }, + { + regionCode: 'SN', + countryCode: 221, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ณ', + nameForLocale: 'Senegal', + nameForRegion: 'Senegal', + }, + { + regionCode: 'SO', + countryCode: 252, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ด', + nameForLocale: 'Somalia', + nameForRegion: 'Somalia', + }, + { + regionCode: 'SR', + countryCode: 597, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ท', + nameForLocale: 'Suriname', + nameForRegion: 'ะกัƒั€ะธะฝะฐะผ', + }, + { + regionCode: 'SS', + countryCode: 211, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ธ', + nameForLocale: 'South Sudan', + nameForRegion: 'South Sudan', + }, + { + regionCode: 'ST', + countryCode: 239, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡น', + nameForLocale: 'Sรฃo Tomรฉ & Prรญncipe', + nameForRegion: 'Sรฃo Tomรฉ & Prรญncipe', + }, + { + regionCode: 'SV', + countryCode: 503, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ป', + nameForLocale: 'El Salvador', + nameForRegion: 'El Salvador', + }, + { + regionCode: 'SX', + countryCode: 1, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ฝ', + nameForLocale: 'Sint Maarten', + nameForRegion: 'Sint Maarten', + }, + { + regionCode: 'SY', + countryCode: 963, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡พ', + nameForLocale: 'Syria', + nameForRegion: 'Syria', + }, + { + regionCode: 'SZ', + countryCode: 268, + flagSymbol: '๐Ÿ‡ธ๐Ÿ‡ฟ', + nameForLocale: 'Eswatini', + nameForRegion: 'Eswatini', + }, + { + regionCode: 'TA', + countryCode: 290, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ฆ', + nameForLocale: 'Tristan da Cunha', + nameForRegion: 'เฎŸเฎฟเฎฐเฎฟเฎธเฏเฎŸเฎฉเฏ เฎŸเฎพ เฎ•เฏเฎฉเฏเฎนเฎพ', + }, + { + regionCode: 'TC', + countryCode: 1, + flagSymbol: '๐Ÿ‡น๐Ÿ‡จ', + nameForLocale: 'Turks & Caicos Islands', + nameForRegion: 'Turks & Caicos Islands', + }, + { + regionCode: 'TD', + countryCode: 235, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ฉ', + nameForLocale: 'Chad', + nameForRegion: 'Chad', + }, + { + regionCode: 'TG', + countryCode: 228, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ฌ', + nameForLocale: 'Togo', + nameForRegion: 'Togo', + }, + { + regionCode: 'TH', + countryCode: 66, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ญ', + nameForLocale: 'Thailand', + nameForRegion: 'เน„เธ—เธข', + }, + { + regionCode: 'TJ', + countryCode: 992, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ฏ', + nameForLocale: 'Tajikistan', + nameForRegion: 'Tajikistan', + }, + { + regionCode: 'TK', + countryCode: 690, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ฐ', + nameForLocale: 'Tokelau', + nameForRegion: 'Tokelau', + }, + { + regionCode: 'TL', + countryCode: 670, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ฑ', + nameForLocale: 'Timor-Leste', + nameForRegion: 'Timor-Leste', + }, + { + regionCode: 'TM', + countryCode: 993, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ฒ', + nameForLocale: 'Turkmenistan', + nameForRegion: 'Turkmenistan', + }, + { + regionCode: 'TN', + countryCode: 216, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ณ', + nameForLocale: 'Tunisia', + nameForRegion: 'Tunisia', + }, + { + regionCode: 'TO', + countryCode: 676, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ด', + nameForLocale: 'Tonga', + nameForRegion: 'Tonga', + }, + { + regionCode: 'TR', + countryCode: 90, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ท', + nameForLocale: 'Turkey', + nameForRegion: 'Tรผrkiye', + }, + { + regionCode: 'TT', + countryCode: 1, + flagSymbol: '๐Ÿ‡น๐Ÿ‡น', + nameForLocale: 'Trinidad & Tobago', + nameForRegion: 'Trinidad & Tobago', + }, + { + regionCode: 'TV', + countryCode: 688, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ป', + nameForLocale: 'Tuvalu', + nameForRegion: 'Tuvalu', + }, + { + regionCode: 'TW', + countryCode: 886, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ผ', + nameForLocale: 'Taiwan', + nameForRegion: 'Taiwan', + }, + { + regionCode: 'TZ', + countryCode: 255, + flagSymbol: '๐Ÿ‡น๐Ÿ‡ฟ', + nameForLocale: 'Tanzania', + nameForRegion: 'Tanzania', + }, + { + regionCode: 'UA', + countryCode: 380, + flagSymbol: '๐Ÿ‡บ๐Ÿ‡ฆ', + nameForLocale: 'Ukraine', + nameForRegion: 'Ukraine', + }, + { + regionCode: 'UG', + countryCode: 256, + flagSymbol: '๐Ÿ‡บ๐Ÿ‡ฌ', + nameForLocale: 'Uganda', + nameForRegion: 'Uganda', + }, + { + regionCode: 'US', + countryCode: 1, + flagSymbol: '๐Ÿ‡บ๐Ÿ‡ธ', + nameForLocale: 'United States', + nameForRegion: 'United States', + }, + { + regionCode: 'UY', + countryCode: 598, + flagSymbol: '๐Ÿ‡บ๐Ÿ‡พ', + nameForLocale: 'Uruguay', + nameForRegion: 'Uruguay', + }, + { + regionCode: 'UZ', + countryCode: 998, + flagSymbol: '๐Ÿ‡บ๐Ÿ‡ฟ', + nameForLocale: 'Uzbekistan', + nameForRegion: 'Uzbekistan', + }, + { + regionCode: 'VA', + countryCode: 39, + flagSymbol: '๐Ÿ‡ป๐Ÿ‡ฆ', + nameForLocale: 'Vatican City', + nameForRegion: 'Vatican City', + }, + { + regionCode: 'VC', + countryCode: 1, + flagSymbol: '๐Ÿ‡ป๐Ÿ‡จ', + nameForLocale: 'St. Vincent & Grenadines', + nameForRegion: 'St Vincent & the Grenadines', + }, + { + regionCode: 'VE', + countryCode: 58, + flagSymbol: '๐Ÿ‡ป๐Ÿ‡ช', + nameForLocale: 'Venezuela', + nameForRegion: 'Venezuela', + }, + { + regionCode: 'VG', + countryCode: 1, + flagSymbol: '๐Ÿ‡ป๐Ÿ‡ฌ', + nameForLocale: 'British Virgin Islands', + nameForRegion: 'British Virgin Islands', + }, + { + regionCode: 'VI', + countryCode: 1, + flagSymbol: '๐Ÿ‡ป๐Ÿ‡ฎ', + nameForLocale: 'U.S. Virgin Islands', + nameForRegion: 'Quแบงn ฤ‘แบฃo Virgin thuแป™c Hoa Kแปณ', + }, + { + regionCode: 'VN', + countryCode: 84, + flagSymbol: '๐Ÿ‡ป๐Ÿ‡ณ', + nameForLocale: 'Vietnam', + nameForRegion: 'Vietnam', + }, + { + regionCode: 'VU', + countryCode: 678, + flagSymbol: '๐Ÿ‡ป๐Ÿ‡บ', + nameForLocale: 'Vanuatu', + nameForRegion: 'Vanuatu', + }, + { + regionCode: 'WF', + countryCode: 681, + flagSymbol: '๐Ÿ‡ผ๐Ÿ‡ซ', + nameForLocale: 'Wallis & Futuna', + nameForRegion: 'Wallis & Futuna', + }, + { + regionCode: 'WS', + countryCode: 685, + flagSymbol: '๐Ÿ‡ผ๐Ÿ‡ธ', + nameForLocale: 'Samoa', + nameForRegion: 'Samoa', + }, + { + regionCode: 'XK', + countryCode: 383, + flagSymbol: '๐Ÿ‡ฝ๐Ÿ‡ฐ', + nameForLocale: 'Kosovo', + nameForRegion: 'Kosovo', + }, + { + regionCode: 'YE', + countryCode: 967, + flagSymbol: '๐Ÿ‡พ๐Ÿ‡ช', + nameForLocale: 'Yemen', + nameForRegion: 'Yemen', + }, + { + regionCode: 'YT', + countryCode: 262, + flagSymbol: '๐Ÿ‡พ๐Ÿ‡น', + nameForLocale: 'Mayotte', + nameForRegion: 'Mayotte', + }, + { + regionCode: 'ZA', + countryCode: 27, + flagSymbol: '๐Ÿ‡ฟ๐Ÿ‡ฆ', + nameForLocale: 'South Africa', + nameForRegion: 'South Africa', + }, + { + regionCode: 'ZM', + countryCode: 260, + flagSymbol: '๐Ÿ‡ฟ๐Ÿ‡ฒ', + nameForLocale: 'Zambia', + nameForRegion: 'Zambia', + }, + { + regionCode: 'ZW', + countryCode: 263, + flagSymbol: '๐Ÿ‡ฟ๐Ÿ‡ผ', + nameForLocale: 'Zimbabwe', + nameForRegion: 'Zimbabwe', + }, +];