UI MarCom 3

Country and Language Selector Stable New in 3.1

The Country and Language Selector makes selecting either the prefered language or country and region for an application possible.

Language Selector <uimc-language-selector>

AttributeDescriptionValuesDefault
valueCurrent language in two letter ISO formate.g. "DE"
languagesList of languages to select fromJSON formatted Array (see examples below)
filter-thresholdMax number of items without activating the filter inputNumber7
openReflects visibility of the selection list

CallbackArgumentDescription
onChangeeventCallback function that gets triggered when the selection is confirmed
<uimc-language-selector slot="meta-menu" value="DE" languages='[
            {
              "code":"BE",
              "name":"Belgium",
              "alias": ""
            },
            {
              "code":"DE",
              "name":"Deutsch",
              "alias": "German",
              "isSelected": true
            },
            {
              "code":"DK",
              "name":"Danmark",
              "alias": "Dänemark"
            },
            {
              "code":"EN",
              "name":"English"
            },
            {
              "code":"ES",
              "name":"Español",
              "alias": "Spanisch"
            },
            {
              "code":"FR",
              "name":"Français"
            },
            {
              "code":"IT",
              "name":"Italiano"
            },
            {
              "code":"NL",
              "name":"Nederlands",
              "alias": "Holländisch"
            }
          ]'>
</uimc-language-selector>

Country and Language Selector <uimc-country-language-selector>

AttributeDescriptionValuesDefault
country-titleHeading on the country inputString"Select country or region"
language-titleHeading on the language inputString"Select language"
button-labelHeading on the country inputString"Update settings"
valueCurrent country and language in two letter ISO code format separated by a pipee.g. "US | EN"
countriesList of countries to select fromJSON Array (see examples below)
languagesList of languages to select fromJSON Array (see examples below)
interdependentShows languages depending on selected country
filter-thresholdMax number of items without activating the filter inputNumber7
img-pathPath to the country flag imagesPath/assets/img/flags/svg/
img-extExtension of the country flag imagesFile extensionsvg
fallback-imgFallback image for other countriesFile in the img-pathfb.svg
openReflects visibility of the selection list

CallbackArgumentDescription
onChangeeventCallback function that gets triggered when the selection is confirmed

Interdependent Country and Language Selection

<uimc-country-language-selector interdependent img-path="/ui-marcom/version/3.2/assets/img/flags/svg/" slot="meta-menu" value="BE | NL" countries='[
                {
                  "code":"BE",
                  "name":"Belgium",
                  "isSelected": true,
                  "languages":  ["EN", "FR", "NL"]
                },
                {
                  "code":"CH",
                  "name":"Switzerland",
                  "languages":  ["DE", "FR"]
                },
                {
                  "code":"DE",
                  "name":"Germany",
                  "languages":  ["DE", "EN"]
                },
                {
                  "code":"FR",
                  "name":"France",
                  "languages":  ["FR"]
                },
                {
                  "code":"NL",
                  "name":"Nederlands",
                  "languages":  ["NL", "EN"]
                }
              ]' languages='[
                {
                  "code":"EN",
                  "name":"English",
                  "isSelected": true
                },
                {
                  "code":"FR",
                  "name":"Français"
                },
                {
                  "code":"DE",
                  "name":"German"
                },
                {
                  "code":"NL",
                  "name":"Nederlands"
                }
              ]'>
</uimc-country-language-selector>

Independent Country and Language Selection

<uimc-country-language-selector img-path="/ui-marcom/version/3.2/assets/img/flags/svg/" slot="meta-menu" value="US | EN" countries='[
                {
                "code":"AF",
                "name":"Afghanistan"
                },
                {
                "code":"AX",
                "name":"Åland Islands"
                },
                {
                "code":"AL",
                "name":"Albania"
                },
                {
                "code":"DZ",
                "name":"Algeria"
                },
                {
                "code":"AS",
                "name":"American Samoa"
                },
                {
                "code":"AD",
                "name":"Andorra"
                },
                {
                "code":"AO",
                "name":"Angola"
                },
                {
                "code":"AI",
                "name":"Anguilla"
                },
                {
                "code":"AQ",
                "name":"Antarctica"
                },
                {
                "code":"AG",
                "name":"Antigua and Barbuda"
                },
                {
                "code":"AR",
                "name":"Argentina"
                },
                {
                "code":"AM",
                "name":"Armenia"
                },
                {
                "code":"AW",
                "name":"Aruba"
                },
                {
                "code":"AU",
                "name":"Australia"
                },
                {
                "code":"AT",
                "name":"Austria"
                },
                {
                "code":"AZ",
                "name":"Azerbaijan"
                },
                {
                "code":"BS",
                "name":"Bahamas (the)"
                },
                {
                "code":"BH",
                "name":"Bahrain"
                },
                {
                "code":"BD",
                "name":"Bangladesh"
                },
                {
                "code":"BB",
                "name":"Barbados"
                },
                {
                "code":"BY",
                "name":"Belarus"
                },
                {
                "code":"BE",
                "name":"Belgium"
                },
                {
                "code":"BZ",
                "name":"Belize"
                },
                {
                "code":"BJ",
                "name":"Benin"
                },
                {
                "code":"DM",
                "name":"Bermuda"
                },
                {
                "code":"BT",
                "name":"Bhutan"
                },
                {
                "code":"BO",
                "name":"Bolivia (Plurinational State of)"
                },
                {
                "code":"BQ",
                "name":"Bonaire, Sint Eustatius and Saba"
                },
                {
                "code":"BA",
                "name":"Bosnia and Herzegovina"
                },
                {
                "code":"BW",
                "name":"Botswana"
                },
                {
                "code":"BV",
                "name":"Bouvet Island"
                },
                {
                "code":"BR",
                "name":"Brazil"
                },
                {
                "code":"IO",
                "name":"British Indian Ocean Territory (the)"
                },
                {
                "code":"BN",
                "name":"Brunei Darussalam"
                },
                {
                "code":"BG",
                "name":"Bulgaria"
                },
                {
                "code":"BF",
                "name":"Burkina Faso"
                },
                {
                "code":"BI",
                "name":"Burundi"
                },
                {
                "code":"CV",
                "name":"Cabo Verde"
                },
                {
                "code":"KH",
                "name":"Cambodia"
                },
                {
                "code":"CM",
                "name":"Cameroon"
                },
                {
                "code":"CA",
                "name":"Canada"
                },
                {
                "code":"KY",
                "name":"Cayman Islands (the)"
                },
                {
                "code":"CF",
                "name":"Central African Republic (the)"
                },
                {
                "code":"TD",
                "name":"Chad"
                },
                {
                "code":"CL",
                "name":"Chile"
                },
                {
                "code":"CN",
                "name":"China"
                },
                {
                "code":"CX",
                "name":"Christmas Island"
                },
                {
                "code":"CC",
                "name":"Cocos (Keeling) Islands (the)"
                },
                {
                "code":"CO",
                "name":"Colombia"
                },
                {
                "code":"KM",
                "name":"Comoros (the)"
                },
                {
                "code":"CD",
                "name":"Congo, Democratic Republic of the"
                },
                {
                "code":"CG",
                "name":"Congo (the)"
                },
                {
                "code":"CK",
                "name":"Cook Islands (the)"
                },
                {
                "code":"CR",
                "name":"Costa Rica"
                },
                {
                "code":"CI",
                "name":"Côte d´Ivoire"
                },
                {
                "code":"HR",
                "name":"Croatia"
                },
                {
                "code":"CU",
                "name":"Cuba"
                },
                {
                "code":"CW",
                "name":"Curaçao"
                },
                {
                "code":"CY",
                "name":"Cyprus"
                },
                {
                "code":"CZ",
                "name":"Czechia"
                },
                {
                "code":"DK",
                "name":"Denmark"
                },
                {
                "code":"DJ",
                "name":"Djibouti"
                },
                {
                "code":"DM",
                "name":"Dominica"
                },
                {
                "code":"DO",
                "name":"Dominican Republic (the)"
                },
                {
                "code":"EC",
                "name":"Ecuador"
                },
                {
                "code":"EG",
                "name":"Egypt"
                },
                {
                "code":"SV",
                "name":"El Salvador"
                },
                {
                "code":"GQ",
                "name":"Equatorial Guinea"
                },
                {
                "code":"ER",
                "name":"Eritrea"
                },
                {
                "code":"EE",
                "name":"Estonia"
                },
                {
                "code":"SZ",
                "name":"Eswatini"
                },
                {
                "code":"ET",
                "name":"Ethiopia"
                },
                {
                "code":"FK",
                "name":"Falkland Islands (the) Malvinas"
                },
                {
                "code":"FO",
                "name":"Faroe Islands (the)"
                },
                {
                "code":"FJ",
                "name":"Fiji"
                },
                {
                "code":"FI",
                "name":"Finland"
                },
                {
                "code":"FR",
                "name":"France"
                },
                {
                "code":"GF",
                "name":"French Guiana"
                },
                {
                "code":"PF",
                "name":"French Polynesia"
                },
                {
                "code":"TF",
                "name":"French Southern Territories (the)"
                },
                {
                "code":"GA",
                "name":"Gabon"
                },
                {
                "code":"GM",
                "name":"Gambia (the)"
                },
                {
                "code":"GE",
                "name":"Georgia"
                },
                {
                "code":"DE",
                "name":"Germany"
                },
                {
                "code":"GH",
                "name":"Ghana"
                },
                {
                "code":"GI",
                "name":"Gibraltar"
                },
                {
                "code":"GR",
                "name":"Greece"
                },
                {
                "code":"GL",
                "name":"Greenland"
                },
                {
                "code":"GD",
                "name":"Grenada"
                },
                {
                "code":"GP",
                "name":"Guadeloupe"
                },
                {
                "code":"GU",
                "name":"Guam"
                },
                {
                "code":"GT",
                "name":"Guatemala"
                },
                {
                "code":"GG",
                "name":"Guernsey"
                },
                {
                "code":"GN",
                "name":"Guinea"
                },
                {
                "code":"GW",
                "name":"Guinea-Bissau"
                },
                {
                "code":"GY",
                "name":"Guyana"
                },
                {
                "code":"HT",
                "name":"Haiti"
                },
                {
                "code":"HM",
                "name":"Heard Island and McDonald Islands"
                },
                {
                "code":"VA",
                "name":"Holy See"
                },
                {
                "code":"HN",
                "name":"Honduras"
                },
                {
                "code":"HU",
                "name":"Hungary"
                },
                {
                "code":"IS",
                "name":"Iceland"
                },
                {
                "code":"IN",
                "name":"India"
                },
                {
                "code":"ID",
                "name":"Indonesia"
                },
                {
                "code":"IR",
                "name":"Iran (Islamic Republic of)"
                },
                {
                "code":"IQ",
                "name":"Iraq"
                },
                {
                "code":"IE",
                "name":"Ireland"
                },
                {
                "code":"IM",
                "name":"Isle of Man"
                },
                {
                "code":"IL",
                "name":"Israel"
                },
                {
                "code":"IT",
                "name":"Italy"
                },
                {
                "code":"JM",
                "name":"Jamaica"
                },
                {
                "code":"JP",
                "name":"Japan"
                },
                {
                "code":"JE",
                "name":"Jersey"
                },
                {
                "code":"JO",
                "name":"Jordan"
                },
                {
                "code":"KZ",
                "name":"Kazakhstan"
                },
                {
                "code":"KE",
                "name":"Kenya"
                },
                {
                "code":"KI",
                "name":"Kiribati"
                },
                {
                "code":"KP",
                "name":"Korea, Democratic People´s Republic of"
                },
                {
                "code":"KR",
                "name":"Korea, Republic of"
                },
                {
                "code":"KW",
                "name":"Kuwait"
                },
                {
                "code":"KG",
                "name":"Kyrgyzstan"
                },
                {
                "code":"LA",
                "name":"Lao People´s Democratic Republic (the)"
                },
                {
                "code":"LV",
                "name":"Latvia"
                },
                {
                "code":"LB",
                "name":"Lebanon"
                },
                {
                "code":"LS",
                "name":"Lesotho"
                },
                {
                "code":"LR",
                "name":"Liberia"
                },
                {
                "code":"LY",
                "name":"Libya"
                },
                {
                "code":"LI",
                "name":"Liechtenstein"
                },
                {
                "code":"LT",
                "name":"Lithuania"
                },
                {
                "code":"LU",
                "name":"Luxembourg"
                },
                {
                "code":"MO",
                "name":"Macao"
                },
                {
                "code":"MG",
                "name":"Madagascar"
                },
                {
                "code":"MK",
                "name":"North Macedonia"
                },
                {
                "code":"MW",
                "name":"Malawi"
                },
                {
                "code":"MY",
                "name":"Malaysia"
                },
                {
                "code":"MV",
                "name":"Maldives"
                },
                {
                "code":"ML",
                "name":"Mali"
                },
                {
                "code":"MT",
                "name":"Malta"
                },
                {
                "code":"MH",
                "name":"Marshall Islands (the)"
                },
                {
                "code":"MQ",
                "name":"Martinique"
                },
                {
                "code":"MR",
                "name":"Mauritania"
                },
                {
                "code":"MU",
                "name":"Mauritius"
                },
                {
                "code":"YT",
                "name":"Mayotte"
                },
                {
                "code":"MX",
                "name":"Mexico"
                },
                {
                "code":"FM",
                "name":"Micronesia (Federated States of)"
                },
                {
                "code":"MD",
                "name":"Moldova,Republic of"
                },
                {
                "code":"MC",
                "name":"Monaco"
                },
                {
                "code":"MN",
                "name":"Mongolia"
                },
                {
                "code":"ME",
                "name":"Montenegro"
                },
                {
                "code":"MS",
                "name":"Montserrat"
                },
                {
                "code":"MA",
                "name":"Morocco"
                },
                {
                "code":"MZ",
                "name":"Mozambique"
                },
                {
                "code":"MM",
                "name":"Myanmar"
                },
                {
                "code":"NA",
                "name":"Namibia"
                },
                {
                "code":"NR",
                "name":"Nauru"
                },
                {
                "code":"NP",
                "name":"Nepal"
                },
                {
                "code":"NL",
                "name":"Netherlands (the)"
                },
                {
                "code":"NC",
                "name":"New Caledonia"
                },
                {
                "code":"NZ",
                "name":"New Zealand"
                },
                {
                "code":"NI",
                "name":"Nicaragua"
                },
                {
                "code":"NE",
                "name":"Niger (the)"
                },
                {
                "code":"NG",
                "name":"Nigeria"
                },
                {
                "code":"NU",
                "name":"Niue"
                },
                {
                "code":"NF",
                "name":"Norfolk Island"
                },
                {
                "code":"MP",
                "name":"Northern Mariana Islands (the)"
                },
                {
                "code":"NO",
                "name":"Norway"
                },
                {
                "code":"OM",
                "name":"Oman"
                },
                {
                "code":"PK",
                "name":"Pakistan"
                },
                {
                "code":"PW",
                "name":"Palau"
                },
                {
                "code":"PS",
                "name":"Palestine, State of"
                },
                {
                "code":"PA",
                "name":"Panama"
                },
                {
                "code":"PG",
                "name":"Papua New Guinea"
                },
                {
                "code":"PY",
                "name":"Paraguay"
                },
                {
                "code":"PE",
                "name":"Peru"
                },
                {
                "code":"PH",
                "name":"Philippines (the)"
                },
                {
                "code":"PN",
                "name":"Pitcairn"
                },
                {
                "code":"PL",
                "name":"Poland"
                },
                {
                "code":"PT",
                "name":"Portugal"
                },
                {
                "code":"PR",
                "name":"Puerto Rico"
                },
                {
                "code":"QA",
                "name":"Qatar"
                },
                {
                "code":"RE",
                "name":"Réunion"
                },
                {
                "code":"RO",
                "name":"Romania"
                },
                {
                "code":"RU",
                "name":"Russian Federation (the)"
                },
                {
                "code":"RW",
                "name":"Rwanda"
                },
                {
                "code":"BL",
                "name":"Saint Barthélemy"
                },
                {
                "code":"SH",
                "name":"Saint Helena, Ascension and Tristan da Cunha"
                },
                {
                "code":"KN",
                "name":"Saint Kitts and Nevis"
                },
                {
                "code":"LC",
                "name":"Saint Lucia"
                },
                {
                "code":"MF",
                "name":"Saint Martin (French part"
                },
                {
                "code":"PM",
                "name":"Saint Pierre and Miquelon"
                },
                {
                "code":"VC",
                "name":"Saint Vincent and the Grenadines"
                },
                {
                "code":"WS",
                "name":"Samoa"
                },
                {
                "code":"SM",
                "name":"San Marino"
                },
                {
                "code":"ST",
                "name":"Sao Tome and Principe"
                },
                {
                "code":"SA",
                "name":"Saudi Arabia"
                },
                {
                "code":"SN",
                "name":"Senegal"
                },
                {
                "code":"RS",
                "name":"Serbia"
                },
                {
                "code":"SC",
                "name":"Seychelles"
                },
                {
                "code":"SL",
                "name":"Sierra Leone"
                },
                {
                "code":"SG",
                "name":"Singapore"
                },
                {
                "code":"SX",
                "name":"Sint Maarten (Dutch part)"
                },
                {
                "code":"SK",
                "name":"Slovakia"
                },
                {
                "code":"SI",
                "name":"Slovenia"
                },
                {
                "code":"SB",
                "name":"Solomon Islands"
                },
                {
                "code":"SO",
                "name":"Somalia"
                },
                {
                "code":"ZA",
                "name":"South Africa"
                },
                {
                "code":"GS",
                "name":"South Georgia and the South Sandwich Islands"
                },
                {
                "code":"SS",
                "name":"South Sudan"
                },
                {
                "code":"ES",
                "name":"Spain"
                },
                {
                "code":"LK",
                "name":"Sri Lanka"
                },
                {
                "code":"SD",
                "name":"Sudan (the)"
                },
                {
                "code":"SR",
                "name":"Suriname"
                },
                {
                "code":"SJ",
                "name":"Svalbard and Jan Mayen"
                },
                {
                "code":"SE",
                "name":"Sweden"
                },
                {
                "code":"CH",
                "name":"Switzerland"
                },
                {
                "code":"SY",
                "name":"Syrian Arab Republic"
                },
                {
                "code":"TW",
                "name":"Taiwan (Province of China)"
                },
                {
                "code":"TJ",
                "name":"Tajikistan"
                },
                {
                "code":"TZ",
                "name":"Tanzania, United Republic of"
                },
                {
                "code":"TH",
                "name":"Thailand"
                },
                {
                "code":"TL",
                "name":"Timor-Leste"
                },
                {
                "code":"TG",
                "name":"Togo"
                },
                {
                "code":"TK",
                "name":"Tokelau"
                },
                {
                "code":"TO",
                "name":"Tonga"
                },
                {
                "code":"TT",
                "name":"Trinidad and Tobago"
                },
                {
                "code":"TN",
                "name":"Tunisia"
                },
                {
                "code":"TR",
                "name":"Turkey"
                },
                {
                "code":"TM",
                "name":"Turkmenistan"
                },
                {
                "code":"TC",
                "name":"Turks and Caicos Islands"
                },
                {
                "code":"TV",
                "name":"Tuvalu"
                },
                {
                "code":"UG",
                "name":"Uganda"
                },
                {
                "code":"UA",
                "name":"Ukraine"
                },
                {
                "code":"AE",
                "name":"United Arab Emirates (the)"
                },
                {
                "code":"GB",
                "name":"United Kingdom of Great Britain and Northern Ireland (the)"
                },
                {
                "code":"UM",
                "name":"United States Minor Outlying Islands (the)"
                },
                {
                "code":"US",
                "name":"United States of America",
                "isSelected": true
                },
                {
                "code":"UY",
                "name":"Uruguay"
                },
                {
                "code":"UZ",
                "name":"Uzbekistan"
                },
                {
                "code":"VU",
                "name":"Vanuatu"
                },
                {
                "code":"VE",
                "name":"Venezuela (Bolivarian Republic of)"
                },
                {
                "code":"VN",
                "name":"Viet Nam"
                },
                {
                "code":"VG",
                "name":"Virgin Islands (British)"
                },
                {
                "code":"VI",
                "name":"Virgin Islands (U.S.)"
                },
                {
                "code":"WF",
                "name":"Wallis and Futuna"
                },
                {
                "code":"EH",
                "name":"Western Sahara"
                },
                {
                "code":"YE",
                "name":"Yemen"
                },
                {
                "code":"ZM",
                "name":"Zambia"
                },
                {
                "code":"ZW",
                "name":"Zimbabwe"
                }
              ]' languages='[
                {
                  "id": 32,
                  "code":"BG",
                  "name":"Bulgarian"
                },
                {
                  "id": 17,
                  "code":"CN",
                  "name":"Chinese"
                },
                {
                  "id": 392,
                  "code":"CN trad.",
                  "name":"Chinese (Traditional)"
                },
                {
                  "id": 68,
                  "code":"HR",
                  "name":"Croatian"
                },
                {
                  "id": 181,
                  "code":"CZ",
                  "name":"Czech"
                },
                {
                  "id": 182,
                  "code":"DK",
                  "name":"Danish"
                },
                {
                  "id": 9,
                  "code":"NL",
                  "name":"Dutch"
                },
                {
                  "id": 2,
                  "code":"EN",
                  "name":"English",
                  "isSelected": true
                },
                {
                  "id": 51,
                  "code":"EE",
                  "name":"Estonian"
                },
                {
                  "id": 5,
                  "code":"FI",
                  "name":"Finnish"
                },
                {
                  "id": 6,
                  "code":"FR",
                  "name":"French"
                },
                {
                  "id": 1,
                  "code":"DE",
                  "name":"German"
                },
                {
                  "id": 3,
                  "code":"GR",
                  "name":"Greek"
                },
                {
                  "id": 70,
                  "code":"HU",
                  "name":"Hungarian"
                },
                {
                  "id": 401,
                  "code":"IS",
                  "name":"Icelandic"
                },
                {
                  "id": 371,
                  "code":"ID",
                  "name":"Indonesian"
                },
                {
                  "id": 7,
                  "code":"IT",
                  "name":"Italian"
                },
                {
                  "id": 8,
                  "code":"JP",
                  "name":"Japanese"
                },
                {
                  "id": 91,
                  "code":"KR",
                  "name":"Korean"
                },
                {
                  "id": 106,
                  "code":"LV",
                  "name":"Latvian"
                },
                {
                  "id": 104,
                  "code":"LT",
                  "name":"Lithuanian"
                },
                {
                  "id": 372,
                  "code":"MK",
                  "name":"Macedonian"
                },
                {
                  "id": 391,
                  "code":"MY",
                  "name":"Malay"
                },
                {
                  "id": 10,
                  "code":"NO",
                  "name":"Norwegian"
                },
                {
                  "id": 11,
                  "code":"PL",
                  "name":"Polish"
                },
                {
                  "id": 12,
                  "code":"PT",
                  "name":"Portuguese"
                },
                {
                  "id": 393,
                  "code":"BR",
                  "name":"Portuguese (Brazilian)"
                },
                {
                  "id": 191,
                  "code":"RO;MD",
                  "name":"Romanian; Moldavian"
                },
                {
                  "id": 138,
                  "code":"RU",
                  "name":"Russian"
                },
                {
                  "id": 149,
                  "code":"RS",
                  "name":"Serbian"
                },
                {
                  "id": 13,
                  "code":"SK",
                  "name":"Slovakian"
                },
                {
                  "id": 14,
                  "code":"SI",
                  "name":"Slovenian"
                },
                {
                  "id": 4,
                  "code":"ES",
                  "name":"Spanish"
                },
                {
                  "id": 15,
                  "code":"SE",
                  "name":"Swedish"
                },
                {
                  "id": 192,
                  "code":"TH",
                  "name":"Thai"
                },
                {
                  "id": 16,
                  "code":"TR",
                  "name":"Turkish"
                },
                {
                  "id": 381,
                  "code":"UA",
                  "name":"Ukrainian"
                },
                {
                  "id": 373,
                  "code":"VN",
                  "name":"Vietnamese"
                }
              ]'>
</uimc-country-language-selector>