diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index a1f4acc..4fb5a98 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -2,32 +2,22 @@ name: Deploy on: push: branches: - - v2-dev + # - v2-dev - main jobs: build: name: Build runs-on: ubuntu-latest steps: - - name: Checkout repo - uses: actions/checkout@v4 - - name: Setup - uses: actions/setup-node@v3 - uses: actions/checkout@v4 - - uses: pnpm/action-setup@v2 - with: - version: 8 - run_install: | - - recursive: true - args: [--frozen-lockfile, --strict-peer-dependencies] - - args: [--global, prettier, typescript] - name: Build run: | git submodule init git submodule update - pnpm install - pnpm build + npm install -g pnpm + pnpm i + pnpm run build - name: Upload production-ready build files uses: actions/upload-artifact@v3 diff --git a/README.md b/README.md index e526daa..eecd5e3 100644 --- a/README.md +++ b/README.md @@ -39,9 +39,10 @@ pnpm preview ### New Release (for Maintainers) - Execute the release process in the core package incl. releasing on npm -- Update versions in **getting-started.html**, **partials/navbar.html** -- Run docs locally and check manually -- Make commit to dev (message: "chore: release 2.X.X") -- Make PR in GitHub from dev -> main -- Merge the PR -- Party and spread the news via social media channels 🎉 +- Switch to branch **v2-dev** and also pull newest package in [packages/materialize]() +- Update version string in **package.json**, **src/getting-started.html**, **partials/navbar.html** +- Run docs locally and check manually with `pnpm dev` +- Make commit to v2-dev (message: "chore: release 2.X.X") +- Make PR from v2-dev -> main +- Merge the PR (The deploy step to gh-pages should be executed) +- Spread news via social media channels diff --git a/config.materialize.js b/config.materialize.js index 06d5bf9..e67f12c 100644 --- a/config.materialize.js +++ b/config.materialize.js @@ -4,8 +4,7 @@ export const config = { id: "index", url: "index.html", name: "Documentation", - description: - "Materialize is a modern responsive CSS framework based on Material Design by Google.", + description: "Materialize is a modern responsive CSS framework based on Material Design by Google.", }, { id: "about", @@ -17,18 +16,31 @@ export const config = { id: "gettingstarted", url: "getting-started.html", name: "Getting started", - description: - "Learn how to easily start using Materialize and integrate it into your project.", + description: "Learn how to easily start using Materialize and integrate it into your project.", + }, + { + id: "color", + url: "color.html", + name: "Color", + description: "Materialize offers a lot of colors which can be used in your next project.", + }, + { + id: "grid", + url: "grid.html", + name: "Grid", + description: "Use Materializes powerful grid system which uses CSS Grid to make formatting your web project easier and more comfortable.", + }, + { + id: "helpers", + url: "helpers.html", + name: "Helpers", + description: "Get an overview of all helper classes for visibility and common css properties.", }, - { id: "color", url: "color.html", name: "Color" }, - { id: "grid", url: "grid.html", name: "Grid" }, - { id: "helpers", url: "helpers.html", name: "Helpers" }, { id: "mediacss", url: "media-css.html", name: "Media Styles", - description: - "Responsive images and videos ready to be seen on many devices.", + description: "Responsive images and videos ready to be seen on many devices.", }, { id: "pulse", url: "pulse.html", name: "Pulse" }, { id: "sass", url: "sass.html", name: "Sass" }, @@ -66,8 +78,7 @@ export const config = { id: "media", url: "media.html", name: "Media", - description: - "Use Box and Slider to present your media content in a cool way.", + description: "Use Box and Slider to present your media content in a cool way.", }, { id: "modals", url: "modals.html", name: "Modals" }, { id: "parallax", url: "parallax.html", name: "Parallax" }, @@ -80,7 +91,24 @@ export const config = { { id: "autocomplete", url: "autocomplete.html", name: "Autocomplete" }, { id: "checkboxes", url: "checkboxes.html", name: "Checkboxes" }, { id: "chips", url: "chips.html", name: "Chips" }, - { id: "pickers", url: "pickers.html", name: "Pickers" }, + { + id: "pickers", + url: "pickers.html", + name: "Pickers", + description: "Controlling inputs in a more easy way and send date and time along with your form.", + }, + { + id: "datepicker", + url: "datepicker.html", + name: "Date Picker", + description: "Select single or multiple dates, ranges and more.", + }, + { + id: "timepicker", + url: "timepicker.html", + name: "Time Picker", + description: "Select a single time with the support of the awesome Timepicker.", + }, { id: "radiobuttons", url: "radio-buttons.html", name: "Radio Buttons" }, { id: "range", url: "range.html", name: "Range" }, { id: "select", url: "select.html", name: "Select" }, @@ -141,22 +169,14 @@ export const config = { { id: "tabs" }, { id: "toasts" }, { id: "tooltips" }, + { id: "datepicker" }, + { id: "timepicker" }, ], }, { name: "Forms", icon: "text_fields", - items: [ - { id: "autocomplete" }, - { id: "checkboxes" }, - { id: "chips" }, - { id: "pickers" }, - { id: "radiobuttons" }, - { id: "range" }, - { id: "select" }, - { id: "switches" }, - { id: "textinputs" }, - ], + items: [{ id: "autocomplete" }, { id: "checkboxes" }, { id: "chips" }, { id: "radiobuttons" }, { id: "range" }, { id: "select" }, { id: "switches" }, { id: "textinputs" }], }, { id: "mobile", icon: "mobile_friendly" }, ], diff --git a/demo-page.html b/demo-page.html deleted file mode 100644 index 6c021d1..0000000 --- a/demo-page.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - Test - - - -
-

Test

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet nobis odit officiis officia optio nam id corporis! Consequatur, hic minima porro totam, quidem et - laboriosam neque vitae voluptatibus, maxime laborum. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit rerum pariatur sed omnis quam iusto adipisci eveniet. - Incidunt eaque a alias, voluptas illum sequi, exercitationem, obcaecati excepturi accusantium voluptate hic. Lorem ipsum dolor sit, amet consectetur adipisicing elit. - Quisquam consectetur ab a obcaecati? Exercitationem dolore incidunt, fuga corporis distinctio harum vitae iure consectetur odio eaque. Voluptatem quod provident totam - nihil? Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quo quia eum a! Minima nulla ex nisi id error temporibus! Omnis a quibusdam eaque itaque - asperiores odit quasi at quis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia ullam sapiente autem, earum, quas ea, quam cupiditate illo laudantium ratione - voluptatem culpa commodi iure dicta! Animi, eaque optio! Reprehenderit, voluptatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Error velit in veritatis - ducimus quod molestiae at deserunt beatae nam ad perferendis sed quibusdam fugiat necessitatibus amet, natus vero! Labore, nobis? Lorem ipsum dolor sit amet consectetur - adipisicing elit. Recusandae veniam, quaerat ab expedita necessitatibus, distinctio sequi itaque quibusdam sint sit, magnam excepturi. Provident commodi repellendus, - asperiores nihil similique minima voluptas. -

- -

This is an Error

- -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, nihil ut explicabo provident aut, nisi sint atque fugiat aliquid nam tenetur beatae debitis dolore nemo, - consequatur natus temporibus vitae cum. -

-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere exercitationem aperiam nostrum corrupti. Soluta cum alias, assumenda dolorem perspiciatis mollitia aliquam - nemo amet corporis, sapiente dignissimos. Quas voluptatibus sunt a! -

- - - Modal - - -
- - - diff --git a/fab-toolbar-demo.html b/fab-toolbar-demo.html deleted file mode 100644 index be98519..0000000 --- a/fab-toolbar-demo.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - {{> head }} - - -
- - mode_edit - - -
- - - - - - - - diff --git a/fullscreen-slider-demo.html b/fullscreen-slider-demo.html deleted file mode 100644 index d217594..0000000 --- a/fullscreen-slider-demo.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - {{> head }} - - -
- -
- - - - diff --git a/package.json b/package.json index 7e0e0f2..0392c28 100644 --- a/package.json +++ b/package.json @@ -5,20 +5,21 @@ "type": "module", "scripts": { "dev": "vite", - "build": "tsc && vite build", + "build": "tsc && vite build && cp -r dist/version/latest/* dist && mv dist/version/latest dist/version/v2.2.0", "preview": "vite preview" }, "dependencies": { "@material/material-color-utilities": "^0.2.7", "@materializecss/materialize": "workspace:*", - "glob": "^10.3.3", - "highlight.js": "^11.9.0", - "material-icons": "^1.13.8", + "glob": "^10.4.5", + "highlight.js": "^11.10.0", + "material-icons": "^1.13.12", "vite-plugin-handlebars": "^1.6.0" }, "devDependencies": { - "sass": "^1.35.2", - "typescript": "^5.0.2", - "vite": "^4.4.5" - } + "sass": "^1.80.1", + "typescript": "^5.6.3", + "vite": "^4.5.5" + }, + "packageManager": "pnpm@9.12.2+sha512.22721b3a11f81661ae1ec68ce1a7b879425a1ca5b991c975b074ac220b187ce56c708fe5db69f4c962c989452eee76c82877f4ee80f474cebd61ee13461b6228" } diff --git a/packages/materialize b/packages/materialize index d74ac66..0718493 160000 --- a/packages/materialize +++ b/packages/materialize @@ -1 +1 @@ -Subproject commit d74ac66444ff10a7cbc60b6c6bfb6a37a0ce3e5c +Subproject commit 071849357b2c79670fd299d1320f3c7c9f347954 diff --git a/partials/navbar.html b/partials/navbar.html index 69f634b..9ca43ed 100644 --- a/partials/navbar.html +++ b/partials/navbar.html @@ -11,7 +11,7 @@ - {{> footer }} - + diff --git a/buttons.html b/src/buttons.html similarity index 99% rename from buttons.html rename to src/buttons.html index b2b42d4..94575d9 100644 --- a/buttons.html +++ b/src/buttons.html @@ -308,6 +308,6 @@

Disabled

{{> footer }} - + diff --git a/cards.html b/src/cards.html similarity index 93% rename from cards.html rename to src/cards.html index d122c1f..4876207 100644 --- a/cards.html +++ b/src/cards.html @@ -57,8 +57,10 @@

Basic Card

+
+

Image Card

+
-

Image Card

@@ -108,8 +110,10 @@

Image Card

-
+

FABs in Cards

+
+
@@ -128,7 +132,7 @@

FABs in Cards

-
+
@@ -141,7 +145,7 @@

FABs in Cards

-
+

Here is an image card with a large Floating Action Button.

@@ -177,8 +181,10 @@

FABs in Cards

-
+

Horizontal Card

+
+
@@ -232,15 +238,17 @@

Horizontal Card

-
+

Card Reveal

+
+
-
+
- Card Titlemore_vert + Card Titlemore_vert

This is a link

@@ -283,8 +291,10 @@

Card Reveal

-
+
Card Action Options
+
+
@@ -313,7 +323,7 @@
Card Action Options
-
+
@@ -356,6 +366,19 @@
Card Action Options
+

Initialization

+ 
+          Copied!
+          content_copy
+          
+  document.addEventListener('DOMContentLoaded', function() {
+    const elems = document.querySelectorAll('.card');
+    const instances = M.Card.init(elems, {
+      // specify options here
+    });
+  });
+          
+
@@ -396,9 +419,11 @@

Tabs in Cards

-
+
White
-
+
+
+

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

@@ -424,9 +449,11 @@
White
-
+
Colored
-
+
+
+

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

@@ -474,9 +501,11 @@

Card Sizes

-
+
Small
-
+
+
+
Card Title @@ -499,8 +528,10 @@
Small
-
+
Medium
+
+
@@ -524,8 +555,10 @@
Medium
-
+
Large
+
+
@@ -552,8 +585,10 @@
Large
-
+

Card Panel

+
+
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
@@ -609,6 +644,6 @@

Card Panel

{{> footer }} - + \ No newline at end of file diff --git a/carousel.html b/src/carousel.html similarity index 97% rename from carousel.html rename to src/carousel.html index 9bb4f30..dcd5e93 100644 --- a/carousel.html +++ b/src/carousel.html @@ -66,8 +66,8 @@

Initialization

content_copy document.addEventListener('DOMContentLoaded', function() { - var elems = document.querySelectorAll('.carousel'); - var instances = M.Carousel.init(elems, { + const elems = document.querySelectorAll('.carousel'); + const instances = M.Carousel.init(elems, { // specify options here }); }); @@ -161,7 +161,7 @@

Methods

               Copied!
               content_copy
-              var instance = M.Carousel.getInstance(elem);
+              const instance = M.Carousel.getInstance(elem);
@@ -300,7 +300,7 @@

Full Width Slider

Copied! content_copy - var instance = M.Carousel.init({ + const instance = M.Carousel.init({ fullWidth: true }); @@ -379,7 +379,7 @@

Fourth Panel

Copied! content_copy - var instance = M.Carousel.init({ + const instance = M.Carousel.init({ fullWidth: true, indicators: true }); @@ -423,6 +423,6 @@

Fourth Panel

{{> footer }} - + diff --git a/checkboxes.html b/src/checkboxes.html similarity index 98% rename from checkboxes.html rename to src/checkboxes.html index 5c47cac..101199e 100644 --- a/checkboxes.html +++ b/src/checkboxes.html @@ -116,6 +116,6 @@
{{> footer }} - + diff --git a/chips.html b/src/chips.html similarity index 96% rename from chips.html rename to src/chips.html index c62eff7..ac45a7d 100644 --- a/chips.html +++ b/src/chips.html @@ -160,8 +160,8 @@

Initialization

content_copy document.addEventListener('DOMContentLoaded', function() { - var elems = document.querySelectorAll('.chips'); - var instances = M.Chips.init(elems, { + const elems = document.querySelectorAll('.chips'); + const instances = M.Chips.init(elems, { // specify options here autocompleteOptions: { data: [ @@ -181,7 +181,7 @@

Initialization

Copied! content_copy - var chip = { + const chip = { id: '4711', // unique identifier (can be a string too) text: 'Title' // optional Text image: '', // optional Image-Url @@ -225,6 +225,12 @@

Options

'material-icons' Specifies class to be used in "close" button (useful when working with Material Symbols icon set). + + allowUserInput + Boolean + false + Specifies option to render user input field + autocompleteOptions Object @@ -278,7 +284,7 @@

Methods

Copied! content_copy - var instance = M.Chips.getInstance(elem); + const instance = M.Chips.getInstance(elem); @@ -402,6 +408,6 @@

Properties

{{> footer }} - + \ No newline at end of file diff --git a/collapsible.html b/src/collapsible.html similarity index 98% rename from collapsible.html rename to src/collapsible.html index 7c48acb..6f2aca2 100644 --- a/collapsible.html +++ b/src/collapsible.html @@ -81,8 +81,8 @@

Initialization

content_copy document.addEventListener('DOMContentLoaded', function() { - var elems = document.querySelectorAll('.collapsible'); - var instances = M.Collapsible.init(elems, { + const elems = document.querySelectorAll('.collapsible'); + const instances = M.Collapsible.init(elems, { // specify options here }); }); @@ -215,7 +215,7 @@

Methods

Copied! content_copy - var instance = M.Collapsible.getInstance(elem); + const instance = M.Collapsible.getInstance(elem); @@ -368,8 +368,8 @@
Expandable
<ul class="collapsible expandable"> 

-var elem = document.querySelector('.collapsible.expandable');
-var instance = M.Collapsible.init(elem, {
+const elem = document.querySelector('.collapsible.expandable');
+const instance = M.Collapsible.init(elem, {
   accordion: false
 });
@@ -464,6 +464,6 @@
Popout
{{> footer }} - + \ No newline at end of file diff --git a/collections.html b/src/collections.html similarity index 99% rename from collections.html rename to src/collections.html index f8653a8..03d69d4 100644 --- a/collections.html +++ b/src/collections.html @@ -245,6 +245,6 @@

Avatar Content

{{> footer }} - + diff --git a/color.html b/src/color.html similarity index 99% rename from color.html rename to src/color.html index 296c8cf..d6a398b 100644 --- a/color.html +++ b/src/color.html @@ -436,6 +436,6 @@

Color Palette

{{> footer }} - + diff --git a/css-transitions.html b/src/css-transitions.html similarity index 94% rename from css-transitions.html rename to src/css-transitions.html index 351a9d5..79b7090 100644 --- a/css-transitions.html +++ b/src/css-transitions.html @@ -23,7 +23,9 @@
Scale
scale-in to scale the element up until it is shown.

add - Toggle Scale + + Toggle Scale + 
           Copied!
           content_copy
@@ -56,6 +58,6 @@ 
Scale
{{> footer }} - + diff --git a/src/data-autocomplete.ts b/src/data-autocomplete.ts index ba3e587..b83192b 100644 --- a/src/data-autocomplete.ts +++ b/src/data-autocomplete.ts @@ -1,1308 +1,263 @@ -// https://gist.githubusercontent.com/pratikbutani/20ded7151103bb30737e2ab1b336eb02/raw/be1391e25487ded4179b5f1c8eedb81b01226216/country-flag.json export const autocompleteDemoData = [ - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1e8.svg", - text: "Ascension Island", - id: "ac", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1e9.svg", - text: "Andorra", - id: "ad", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1ea.svg", - text: "United Arab Emirates", - id: "ae", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1eb.svg", - text: "Afghanistan", - id: "af", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1ec.svg", - text: "Antigua & Barbuda", - id: "ag", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1ee.svg", - text: "Anguilla", - id: "ai", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f1.svg", - text: "Albania", - id: "al", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f2.svg", - text: "Armenia", - id: "am", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f4.svg", - text: "Angola", - id: "ad", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f6.svg", - text: "Antarctica", - id: "aq", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f7.svg", - text: "Argentina", - id: "ar", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f8.svg", - text: "American Samoa", - id: "as", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f9.svg", - text: "Austria", - id: "at", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1fa.svg", - text: "Australia", - id: "au", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1fc.svg", - text: "Aruba", - id: "aw", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1fd.svg", - text: "Åland Islands", - id: "ax", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1ff.svg", - text: "Azerbaijan", - id: "az", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1e6.svg", - text: "Bosnia & Herzegovina", - id: "ba", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1e7.svg", - text: "Barbados", - id: "bb", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1e9.svg", - text: "Bangladesh", - id: "bd", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ea.svg", - text: "Belgium", - id: "be", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1eb.svg", - text: "Burkina Faso", - id: "bf", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ec.svg", - text: "Bulgaria", - id: "bg", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ed.svg", - text: "Bahrain", - id: "bh", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ee.svg", - text: "Burundi", - id: "bi", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ef.svg", - text: "Benin", - id: "bj", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f1.svg", - text: "St. Barthélemy", - id: "bl", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f2.svg", - text: "Bermuda", - id: "bm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f3.svg", - text: "Brunei", - id: "bn", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f4.svg", - text: "Bolivia", - id: "bo", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f6.svg", - text: "Caribbean Netherlands", - id: "bq", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f7.svg", - text: "Brazil", - id: "br", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f8.svg", - text: "Bahamas", - id: "bs", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f9.svg", - text: "Bhutan", - id: "bt", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1fb.svg", - text: "Bouvet Island", - id: "bv", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1fc.svg", - text: "Botswana", - id: "bw", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1fe.svg", - text: "Belarus", - id: "by", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ff.svg", - text: "Belize", - id: "bz", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1e6.svg", - text: "Canada", - id: "ca", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1e8.svg", - text: "Cocos (Keeling) Islands", - id: "cc", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1e9.svg", - text: "Congo - Kinshasa", - id: "cg", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1eb.svg", - text: "Central African Republic", - id: "cf", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1ec.svg", - text: "Congo - Brazzaville", - id: "cd", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1ed.svg", - text: "Switzerland", - id: "ch", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1ee.svg", - text: "Côte d’Ivoire", - id: "ci", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f0.svg", - text: "Cook Islands", - id: "ck", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f1.svg", - text: "Chile", - id: "cl", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f2.svg", - text: "Cameroon", - id: "cm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f3.svg", - text: "China", - id: "cn", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f4.svg", - text: "Colombia", - id: "co", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f5.svg", - text: "Clipperton Island", - id: "cp", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f7.svg", - text: "Costa Rica", - id: "cr", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1fa.svg", - text: "Cuba", - id: "cu", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1fb.svg", - text: "Cape Verde", - id: "cv", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1fc.svg", - text: "Curaçao", - id: "cw", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1fd.svg", - text: "Christmas Island", - id: "cx", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1fe.svg", - text: "Cyprus", - id: "cy", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1ff.svg", - text: "Czechia", - id: "cz", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1ea.svg", - text: "Germany", - id: "de", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1ec.svg", - text: "Diego Garcia", - id: "dg", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1ef.svg", - text: "Djibouti", - id: "dj", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1f0.svg", - text: "Denmark", - id: "dk", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1f2.svg", - text: "Dominica", - id: "dm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1f4.svg", - text: "Dominican Republic", - id: "do", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1ff.svg", - text: "Algeria", - id: "dz", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1e6.svg", - text: "Ceuta & Melilla", - id: "ea", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1e8.svg", - text: "Ecuador", - id: "ec", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1ea.svg", - text: "Estonia", - id: "ee", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1ec.svg", - text: "Egypt", - id: "eg", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1ed.svg", - text: "Western Sahara", - id: "eh", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1f7.svg", - text: "Eritrea", - id: "er", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1f8.svg", - text: "Spain", - id: "es", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1f9.svg", - text: "Ethiopia", - id: "et", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1fa.svg", - text: "European Union", - id: "eu", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1ee.svg", - text: "Finland", - id: "fi", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1ef.svg", - text: "Fiji", - id: "fj", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1f0.svg", - text: "Falkland Islands", - id: "fk", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1f2.svg", - text: "Micronesia", - id: "fm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1f4.svg", - text: "Faroe Islands", - id: "fo", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1f7.svg", - text: "France", - id: "fr", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1e6.svg", - text: "Gabon", - id: "ga", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1e7.svg", - text: "United Kingdom", - id: "gb", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1e9.svg", - text: "Grenada", - id: "gd", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1ea.svg", - text: "Georgia", - id: "ge", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1eb.svg", - text: "French Guiana", - id: "gf", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1ec.svg", - text: "Guernsey", - id: "gg", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1ed.svg", - text: "Ghana", - id: "gh", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1ee.svg", - text: "Gibraltar", - id: "gi", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f1.svg", - text: "Greenland", - id: "gl", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f2.svg", - text: "Gambia", - id: "gm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f3.svg", - text: "Guinea", - id: "gn", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f5.svg", - text: "Guadeloupe", - id: "gp", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f6.svg", - text: "Equatorial Guinea", - id: "gq", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f7.svg", - text: "Greece", - id: "gr", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f8.svg", - text: "South Georgia & South', Sandwich Islands", - id: "gs", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f9.svg", - text: "Guatemala", - id: "gt", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1fa.svg", - text: "Guam", - id: "gu", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1fc.svg", - text: "Guinea-Bissau", - id: "gw", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1fe.svg", - text: "Guyana", - id: "gy", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1f0.svg", - text: "Hong Kong SAR China", - id: "hk", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1f2.svg", - text: "Heard & McDonald Islands", - id: "hm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1f3.svg", - text: "Honduras", - id: "hn", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1f7.svg", - text: "Croatia", - id: "hr", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1f9.svg", - text: "Haiti", - id: "ht", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1fa.svg", - text: "Hungary", - id: "hu", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1e8.svg", - text: "Canary Islands", - id: "ic", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1e9.svg", - text: "Indonesia", - id: "id", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1ea.svg", - text: "Ireland", - id: "ie", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f1.svg", - text: "Israel", - id: "il", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f2.svg", - text: "Isle of Man", - id: "im", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f3.svg", - text: "India", - id: "in", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f4.svg", - text: "British Indian Ocean Territory", - id: "io", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f6.svg", - text: "Iraq", - id: "iq", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f7.svg", - text: "Iran", - id: "ir", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f8.svg", - text: "Iceland", - id: "is", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f9.svg", - text: "Italy", - id: "it", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ef-1f1ea.svg", - text: "Jersey", - id: "je", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ef-1f1f2.svg", - text: "Jamaica", - id: "jm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ef-1f1f4.svg", - text: "Jordan", - id: "jo", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ef-1f1f5.svg", - text: "Japan", - id: "jp", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1ea.svg", - text: "Kenya", - id: "ke", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1ec.svg", - text: "Kyrgyzstan", - id: "kg", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1ed.svg", - text: "Cambodia", - id: "kh", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1ee.svg", - text: "Kiribati", - id: "ki", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1f2.svg", - text: "Comoros", - id: "km", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1f3.svg", - text: "St. Kitts & Nevis", - id: "kn", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1f5.svg", - text: "North Korea", - id: "kp", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1f7.svg", - text: "South Korea", - id: "kr", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1fc.svg", - text: "Kuwait", - id: "kw", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1fe.svg", - text: "Cayman Islands", - id: "ky", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1ff.svg", - text: "Kazakhstan", - id: "kz", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1e6.svg", - text: "Laos", - id: "la", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1e7.svg", - text: "Lebanon", - id: "lb", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1e8.svg", - text: "St. Lucia", - id: "lc", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1ee.svg", - text: "Liechtenstein", - id: "li", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1f0.svg", - text: "Sri Lanka", - id: "lk", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1f7.svg", - text: "Liberia", - id: "lr", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1f8.svg", - text: "Lesotho", - id: "ls", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1f9.svg", - text: "Lithuania", - id: "lt", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1fa.svg", - text: "Luxembourg", - id: "lu", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1fb.svg", - text: "Latvia", - id: "lv", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1fe.svg", - text: "Libya", - id: "ly", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1e6.svg", - text: "Morocco", - id: "ma", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1e8.svg", - text: "Monaco", - id: "mc", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1e9.svg", - text: "Moldova", - id: "md", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1ea.svg", - text: "Montenegro", - id: "me", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1eb.svg", - text: "St. Martin", - id: "mf", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1ec.svg", - text: "Madagascar", - id: "mg", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1ed.svg", - text: "Marshall Islands", - id: "mh", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f0.svg", - text: "North Macedonia", - id: "mk", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f1.svg", - text: "Mali", - id: "ml", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f2.svg", - text: "Myanmar (Burma)", - id: "mm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f3.svg", - text: "Mongolia", - id: "mn", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f4.svg", - text: "Macao Sar China", - id: "mo", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f5.svg", - text: "Northern Mariana Islands", - id: "mp", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f6.svg", - text: "Martinique", - id: "mq", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f7.svg", - text: "Mauritania", - id: "mr", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f8.svg", - text: "Montserrat", - id: "ms", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f9.svg", - text: "Malta", - id: "mt", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1fa.svg", - text: "Mauritius", - id: "mu", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1fb.svg", - text: "Maldives", - id: "mv", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1fc.svg", - text: "Malawi", - id: "mw", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1fd.svg", - text: "Mexico", - id: "mx", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1fe.svg", - text: "Malaysia", - id: "my", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1ff.svg", - text: "Mozambique", - id: "mz", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1e6.svg", - text: "Namibia", - id: "na", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1e8.svg", - text: "New Caledonia", - id: "nc", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1ea.svg", - text: "Niger", - id: "ne", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1eb.svg", - text: "Norfolk Island", - id: "nf", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1ec.svg", - text: "Nigeria", - id: "ng", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1ee.svg", - text: "Nicaragua", - id: "ni", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1f1.svg", - text: "Netherlands", - id: "nl", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1f4.svg", - text: "Norway", - id: "no", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1f5.svg", - text: "Nepal", - id: "np", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1f7.svg", - text: "Nauru", - id: "nr", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1fa.svg", - text: "Niue", - id: "nu", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1ff.svg", - text: "New Zealand", - id: "nz", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f4-1f1f2.svg", - text: "Oman", - id: "om", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1e6.svg", - text: "Panama", - id: "pa", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1ea.svg", - text: "Peru", - id: "pe", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1eb.svg", - text: "French Polynesia", - id: "pf", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1ec.svg", - text: "Papua New Guinea", - id: "pg", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1ed.svg", - text: "Philippines", - id: "ph", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f0.svg", - text: "Pakistan", - id: "pk", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f1.svg", - text: "Poland", - id: "pl", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f2.svg", - text: "St. Pierre & Miquelon", - id: "pm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f3.svg", - text: "Pitcairn Islands", - id: "pn", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f7.svg", - text: "Puerto Rico", - id: "pr", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f8.svg", - text: "Palestinian Territories", - id: "ps", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f9.svg", - text: "Portugal", - id: "pt", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1fc.svg", - text: "Palau", - id: "pw", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1fe.svg", - text: "Paraguay", - id: "py", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f6-1f1e6.svg", - text: "Qatar", - id: "qa", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f7-1f1ea.svg", - text: "Réunion", - id: "re", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f7-1f1f4.svg", - text: "Romania", - id: "ro", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f7-1f1f8.svg", - text: "Serbia", - id: "yu", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f7-1f1fa.svg", - text: "Russia", - id: "ru", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f7-1f1fc.svg", - text: "Rwanda", - id: "rw", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1e6.svg", - text: "Saudi Arabia", - id: "sa", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1e7.svg", - text: "Solomon Islands", - id: "sb", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1e8.svg", - text: "Seychelles", - id: "sc", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1e9.svg", - text: "Sudan", - id: "sd", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ea.svg", - text: "Sweden", - id: "se", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ec.svg", - text: "Singapore", - id: "sg", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ed.svg", - text: "St. Helena", - id: "sh", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ee.svg", - text: "Slovenia", - id: "si", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ef.svg", - text: "Svalbard & Jan Mayen", - id: "sj", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f0.svg", - text: "Slovakia", - id: "sk", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f1.svg", - text: "Sierra Leone", - id: "sl", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f2.svg", - text: "San Marino", - id: "sm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f3.svg", - text: "Senegal", - id: "sn", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f4.svg", - text: "Somalia", - id: "so", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f7.svg", - text: "Suriname", - id: "sr", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f8.svg", - text: "South Sudan", - id: "ss", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f9.svg", - text: "São Tomé & Príncipe", - id: "st", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1fb.svg", - text: "El Salvador", - id: "sv", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1fd.svg", - text: "Sint Maarten", - id: "sx", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1fe.svg", - text: "Syria", - id: "sy", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ff.svg", - text: "Eswatini", - id: "sz", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1e6.svg", - text: "Tristan Da Cunha", - id: "sh", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1e8.svg", - text: "Turks & Caicos Islands", - id: "tc", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1e9.svg", - text: "Chad", - id: "td", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1eb.svg", - text: "French Southern Territories", - id: "tf", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1ec.svg", - text: "Togo", - id: "tg", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1ed.svg", - text: "Thailand", - id: "th", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1ef.svg", - text: "Tajikistan", - id: "tj", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f0.svg", - text: "Tokelau", - id: "tk", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f1.svg", - text: "Timor-Leste", - id: "tl", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f2.svg", - text: "Turkmenistan", - id: "tm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f3.svg", - text: "Tunisia", - id: "tn", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f4.svg", - text: "Tonga", - id: "to", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f7.svg", - text: "Turkey", - id: "tr", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f9.svg", - text: "Trinidad & Tobago", - id: "tt", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1fb.svg", - text: "Tuvalu", - id: "tv", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1fc.svg", - text: "Taiwan", - id: "tw", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1ff.svg", - text: "Tanzania", - id: "tz", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1e6.svg", - text: "Ukraine", - id: "ua", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1ec.svg", - text: "Uganda", - id: "ug", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1f2.svg", - text: "U.S. Outlying Islands", - id: "um", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1f3.svg", - text: "United Nations", - id: "un", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1f8.svg", - text: "United States", - id: "us", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1fe.svg", - text: "Uruguay", - id: "uy", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1ff.svg", - text: "Uzbekistan", - id: "uz", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1e6.svg", - text: "Vatican City", - id: "va", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1e8.svg", - text: "St. Vincent & Grenadines", - id: "vc", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1ea.svg", - text: "Venezuela", - id: "ve", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1ec.svg", - text: "British Virgin Islands", - id: "vg", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1ee.svg", - text: "U.S. Virgin Islands", - id: "vi", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1f3.svg", - text: "Vietnam", - id: "vn", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1fa.svg", - text: "Vanuatu", - id: "vu", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fc-1f1eb.svg", - text: "Wallis & Futuna", - id: "wf", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fc-1f1f8.svg", - text: "Samoa", - id: "ws", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fd-1f1f0.svg", - text: "Kosovo", - id: "xk", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fe-1f1ea.svg", - text: "Yemen", - id: "ye", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1fe-1f1f9.svg", - text: "Mayotte", - id: "yt", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ff-1f1e6.svg", - text: "South Africa", - id: "za", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ff-1f1f2.svg", - text: "Zambia", - id: "zm", - }, - { - image: "https://twemoji.maxcdn.com/2/svg/1f1ff-1f1fc.svg", - text: "Zimbabwe", - id: "zw", - }, - { - flag: "https://twemoji.maxcdn.com/2/svg/1f3f4-e0067-e0062-e0065-e006e-e0067-e007f.svg", - text: "England", - id: "uk", - }, - { - flag: "https://twemoji.maxcdn.com/2/svg/1f3f4-e0067-e0062-e0073-e0063-e0074-e007f.svg", - text: "Scotland", - id: "uk", - }, - { - flag: "https://twemoji.maxcdn.com/2/svg/1f3f4-e0067-e0062-e0077-e006c-e0073-e007f.svg", - text: "Wales", - id: "uk", - }, + //{ id: "ac", text: "Ascension Island", image: "/images/flags/ac.svg" }, + { id: "ad", text: "Andorra", image: "/images/flags/ad.svg" }, + { id: "ae", text: "United Arab Emirates", image: "/images/flags/ae.svg" }, + { id: "af", text: "Afghanistan", image: "/images/flags/af.svg" }, + { id: "ag", text: "Antigua & Barbuda", image: "/images/flags/ag.svg" }, + { id: "ai", text: "Anguilla", image: "/images/flags/ai.svg" }, + { id: "al", text: "Albania", image: "/images/flags/al.svg" }, + { id: "am", text: "Armenia", image: "/images/flags/am.svg" }, + { id: "ad", text: "Angola", image: "/images/flags/ad.svg" }, + { id: "aq", text: "Antarctica", image: "/images/flags/aq.svg" }, + { id: "ar", text: "Argentina", image: "/images/flags/ar.svg" }, + { id: "as", text: "American Samoa", image: "/images/flags/as.svg" }, + { id: "at", text: "Austria", image: "/images/flags/at.svg" }, + { id: "au", text: "Australia", image: "/images/flags/au.svg" }, + { id: "aw", text: "Aruba", image: "/images/flags/aw.svg" }, + { id: "ax", text: "Åland Islands", image: "/images/flags/ax.svg" }, + { id: "az", text: "Azerbaijan", image: "/images/flags/az.svg" }, + { id: "ba", text: "Bosnia & Herzegovina", image: "/images/flags/ba.svg" }, + { id: "bb", text: "Barbados", image: "/images/flags/bb.svg" }, + { id: "bd", text: "Bangladesh", image: "/images/flags/bd.svg" }, + { id: "be", text: "Belgium", image: "/images/flags/be.svg" }, + { id: "bf", text: "Burkina Faso", image: "/images/flags/bf.svg" }, + { id: "bg", text: "Bulgaria", image: "/images/flags/bg.svg" }, + { id: "bh", text: "Bahrain", image: "/images/flags/bh.svg" }, + { id: "bi", text: "Burundi", image: "/images/flags/bi.svg" }, + { id: "bj", text: "Benin", image: "/images/flags/bj.svg" }, + { id: "bl", text: "St. Barthélemy", image: "/images/flags/bl.svg" }, + { id: "bm", text: "Bermuda", image: "/images/flags/bm.svg" }, + { id: "bn", text: "Brunei", image: "/images/flags/bn.svg" }, + { id: "bo", text: "Bolivia", image: "/images/flags/bo.svg" }, + { id: "bq", text: "Caribbean Netherlands", image: "/images/flags/bq.svg" }, + { id: "br", text: "Brazil", image: "/images/flags/br.svg" }, + { id: "bs", text: "Bahamas", image: "/images/flags/bs.svg" }, + { id: "bt", text: "Bhutan", image: "/images/flags/bt.svg" }, + { id: "bv", text: "Bouvet Island", image: "/images/flags/bv.svg" }, + { id: "bw", text: "Botswana", image: "/images/flags/bw.svg" }, + { id: "by", text: "Belarus", image: "/images/flags/by.svg" }, + { id: "bz", text: "Belize", image: "/images/flags/bz.svg" }, + { id: "ca", text: "Canada", image: "/images/flags/ca.svg" }, + { id: "cc", text: "Cocos (Keeling) Islands", image: "/images/flags/cc.svg" }, + { id: "cg", text: "Congo - Kinshasa", image: "/images/flags/cg.svg" }, + { id: "cf", text: "Central African Republic", image: "/images/flags/cf.svg" }, + { id: "cd", text: "Congo - Brazzaville", image: "/images/flags/cd.svg" }, + { id: "ch", text: "Switzerland", image: "/images/flags/ch.svg" }, + { id: "ci", text: "Côte d’Ivoire", image: "/images/flags/ci.svg" }, + { id: "ck", text: "Cook Islands", image: "/images/flags/ck.svg" }, + { id: "cl", text: "Chile", image: "/images/flags/cl.svg" }, + { id: "cm", text: "Cameroon", image: "/images/flags/cm.svg" }, + { id: "cn", text: "China", image: "/images/flags/cn.svg" }, + { id: "co", text: "Colombia", image: "/images/flags/co.svg" }, + //{ id: "cp", text: "Clipperton Island", image: "/images/flags/cp.svg" }, + { id: "cr", text: "Costa Rica", image: "/images/flags/cr.svg" }, + { id: "cu", text: "Cuba", image: "/images/flags/cu.svg" }, + { id: "cv", text: "Cape Verde", image: "/images/flags/cv.svg" }, + { id: "cw", text: "Curaçao", image: "/images/flags/cw.svg" }, + { id: "cx", text: "Christmas Island", image: "/images/flags/cx.svg" }, + { id: "cy", text: "Cyprus", image: "/images/flags/cy.svg" }, + { id: "cz", text: "Czechia", image: "/images/flags/cz.svg" }, + { id: "de", text: "Germany", image: "/images/flags/de.svg" }, + //{ id: "dg", text: "Diego Garcia", image: "/images/flags/dg.svg" }, + { id: "dj", text: "Djibouti", image: "/images/flags/dj.svg" }, + { id: "dk", text: "Denmark", image: "/images/flags/dk.svg" }, + { id: "dm", text: "Dominica", image: "/images/flags/dm.svg" }, + { id: "do", text: "Dominican Republic", image: "/images/flags/do.svg" }, + { id: "dz", text: "Algeria", image: "/images/flags/dz.svg" }, + //{ id: "ea", text: "Ceuta & Melilla", image: "/images/flags/ea.svg" }, + { id: "ec", text: "Ecuador", image: "/images/flags/ec.svg" }, + { id: "ee", text: "Estonia", image: "/images/flags/ee.svg" }, + { id: "eg", text: "Egypt", image: "/images/flags/eg.svg" }, + { id: "eh", text: "Western Sahara", image: "/images/flags/eh.svg" }, + { id: "er", text: "Eritrea", image: "/images/flags/er.svg" }, + { id: "es", text: "Spain", image: "/images/flags/es.svg" }, + { id: "et", text: "Ethiopia", image: "/images/flags/et.svg" }, + //{ id: "eu", text: "European Union", image: "/images/flags/eu.svg" }, + { id: "fi", text: "Finland", image: "/images/flags/fi.svg" }, + { id: "fj", text: "Fiji", image: "/images/flags/fj.svg" }, + { id: "fk", text: "Falkland Islands", image: "/images/flags/fk.svg" }, + { id: "fm", text: "Micronesia", image: "/images/flags/fm.svg" }, + { id: "fo", text: "Faroe Islands", image: "/images/flags/fo.svg" }, + { id: "fr", text: "France", image: "/images/flags/fr.svg" }, + { id: "ga", text: "Gabon", image: "/images/flags/ga.svg" }, + { id: "gb", text: "United Kingdom", image: "/images/flags/gb.svg" }, + { id: "gd", text: "Grenada", image: "/images/flags/gd.svg" }, + { id: "ge", text: "Georgia", image: "/images/flags/ge.svg" }, + { id: "gf", text: "French Guiana", image: "/images/flags/gf.svg" }, + { id: "gg", text: "Guernsey", image: "/images/flags/gg.svg" }, + { id: "gh", text: "Ghana", image: "/images/flags/gh.svg" }, + { id: "gi", text: "Gibraltar", image: "/images/flags/gi.svg" }, + { id: "gl", text: "Greenland", image: "/images/flags/gl.svg" }, + { id: "gm", text: "Gambia", image: "/images/flags/gm.svg" }, + { id: "gn", text: "Guinea", image: "/images/flags/gn.svg" }, + { id: "gp", text: "Guadeloupe", image: "/images/flags/gp.svg" }, + { id: "gq", text: "Equatorial Guinea", image: "/images/flags/gq.svg" }, + { id: "gr", text: "Greece", image: "/images/flags/gr.svg" }, + { id: "gs", text: "South Georgia & South', Sandwich Islands", image: "/images/flags/gs.svg" }, + { id: "gt", text: "Guatemala", image: "/images/flags/gt.svg" }, + { id: "gu", text: "Guam", image: "/images/flags/gu.svg" }, + { id: "gw", text: "Guinea-Bissau", image: "/images/flags/gw.svg" }, + { id: "gy", text: "Guyana", image: "/images/flags/gy.svg" }, + { id: "hk", text: "Hong Kong SAR China", image: "/images/flags/hk.svg" }, + { id: "hm", text: "Heard & McDonald Islands", image: "/images/flags/hm.svg" }, + { id: "hn", text: "Honduras", image: "/images/flags/hn.svg" }, + { id: "hr", text: "Croatia", image: "/images/flags/hr.svg" }, + { id: "ht", text: "Haiti", image: "/images/flags/ht.svg" }, + { id: "hu", text: "Hungary", image: "/images/flags/hu.svg" }, + //{ id: "ic", text: "Canary Islands", image: "/images/flags/ic.svg" }, + { id: "id", text: "Indonesia", image: "/images/flags/id.svg" }, + { id: "ie", text: "Ireland", image: "/images/flags/ie.svg" }, + { id: "il", text: "Israel", image: "/images/flags/il.svg" }, + { id: "im", text: "Isle of Man", image: "/images/flags/im.svg" }, + { id: "in", text: "India", image: "/images/flags/in.svg" }, + { id: "io", text: "British Indian Ocean Territory", image: "/images/flags/io.svg" }, + { id: "iq", text: "Iraq", image: "/images/flags/iq.svg" }, + { id: "ir", text: "Iran", image: "/images/flags/ir.svg" }, + { id: "is", text: "Iceland", image: "/images/flags/is.svg" }, + { id: "it", text: "Italy", image: "/images/flags/it.svg" }, + { id: "je", text: "Jersey", image: "/images/flags/je.svg" }, + { id: "jm", text: "Jamaica", image: "/images/flags/jm.svg" }, + { id: "jo", text: "Jordan", image: "/images/flags/jo.svg" }, + { id: "jp", text: "Japan", image: "/images/flags/jp.svg" }, + { id: "ke", text: "Kenya", image: "/images/flags/ke.svg" }, + { id: "kg", text: "Kyrgyzstan", image: "/images/flags/kg.svg" }, + { id: "kh", text: "Cambodia", image: "/images/flags/kh.svg" }, + { id: "ki", text: "Kiribati", image: "/images/flags/ki.svg" }, + { id: "km", text: "Comoros", image: "/images/flags/km.svg" }, + { id: "kn", text: "St. Kitts & Nevis", image: "/images/flags/kn.svg" }, + { id: "kp", text: "North Korea", image: "/images/flags/kp.svg" }, + { id: "kr", text: "South Korea", image: "/images/flags/kr.svg" }, + { id: "kw", text: "Kuwait", image: "/images/flags/kw.svg" }, + { id: "ky", text: "Cayman Islands", image: "/images/flags/ky.svg" }, + { id: "kz", text: "Kazakhstan", image: "/images/flags/kz.svg" }, + { id: "la", text: "Laos", image: "/images/flags/la.svg" }, + { id: "lb", text: "Lebanon", image: "/images/flags/lb.svg" }, + { id: "lc", text: "St. Lucia", image: "/images/flags/lc.svg" }, + { id: "li", text: "Liechtenstein", image: "/images/flags/li.svg" }, + { id: "lk", text: "Sri Lanka", image: "/images/flags/lk.svg" }, + { id: "lr", text: "Liberia", image: "/images/flags/lr.svg" }, + { id: "ls", text: "Lesotho", image: "/images/flags/ls.svg" }, + { id: "lt", text: "Lithuania", image: "/images/flags/lt.svg" }, + { id: "lu", text: "Luxembourg", image: "/images/flags/lu.svg" }, + { id: "lv", text: "Latvia", image: "/images/flags/lv.svg" }, + { id: "ly", text: "Libya", image: "/images/flags/ly.svg" }, + { id: "ma", text: "Morocco", image: "/images/flags/ma.svg" }, + { id: "mc", text: "Monaco", image: "/images/flags/mc.svg" }, + { id: "md", text: "Moldova", image: "/images/flags/md.svg" }, + { id: "me", text: "Montenegro", image: "/images/flags/me.svg" }, + { id: "mf", text: "St. Martin", image: "/images/flags/mf.svg" }, + { id: "mg", text: "Madagascar", image: "/images/flags/mg.svg" }, + { id: "mh", text: "Marshall Islands", image: "/images/flags/mh.svg" }, + { id: "mk", text: "North Macedonia", image: "/images/flags/mk.svg" }, + { id: "ml", text: "Mali", image: "/images/flags/ml.svg" }, + { id: "mm", text: "Myanmar (Burma)", image: "/images/flags/mm.svg" }, + { id: "mn", text: "Mongolia", image: "/images/flags/mn.svg" }, + { id: "mo", text: "Macao Sar China", image: "/images/flags/mo.svg" }, + { id: "mp", text: "Northern Mariana Islands", image: "/images/flags/mp.svg" }, + { id: "mq", text: "Martinique", image: "/images/flags/mq.svg" }, + { id: "mr", text: "Mauritania", image: "/images/flags/mr.svg" }, + { id: "ms", text: "Montserrat", image: "/images/flags/ms.svg" }, + { id: "mt", text: "Malta", image: "/images/flags/mt.svg" }, + { id: "mu", text: "Mauritius", image: "/images/flags/mu.svg" }, + { id: "mv", text: "Maldives", image: "/images/flags/mv.svg" }, + { id: "mw", text: "Malawi", image: "/images/flags/mw.svg" }, + { id: "mx", text: "Mexico", image: "/images/flags/mx.svg" }, + { id: "my", text: "Malaysia", image: "/images/flags/my.svg" }, + { id: "mz", text: "Mozambique", image: "/images/flags/mz.svg" }, + { id: "na", text: "Namibia", image: "/images/flags/na.svg" }, + { id: "nc", text: "New Caledonia", image: "/images/flags/nc.svg" }, + { id: "ne", text: "Niger", image: "/images/flags/ne.svg" }, + { id: "nf", text: "Norfolk Island", image: "/images/flags/nf.svg" }, + { id: "ng", text: "Nigeria", image: "/images/flags/ng.svg" }, + { id: "ni", text: "Nicaragua", image: "/images/flags/ni.svg" }, + { id: "nl", text: "Netherlands", image: "/images/flags/nl.svg" }, + { id: "no", text: "Norway", image: "/images/flags/no.svg" }, + { id: "np", text: "Nepal", image: "/images/flags/np.svg" }, + { id: "nr", text: "Nauru", image: "/images/flags/nr.svg" }, + { id: "nu", text: "Niue", image: "/images/flags/nu.svg" }, + { id: "nz", text: "New Zealand", image: "/images/flags/nz.svg" }, + { id: "om", text: "Oman", image: "/images/flags/om.svg" }, + { id: "pa", text: "Panama", image: "/images/flags/pa.svg" }, + { id: "pe", text: "Peru", image: "/images/flags/pe.svg" }, + { id: "pf", text: "French Polynesia", image: "/images/flags/pf.svg" }, + { id: "pg", text: "Papua New Guinea", image: "/images/flags/pg.svg" }, + { id: "ph", text: "Philippines", image: "/images/flags/ph.svg" }, + { id: "pk", text: "Pakistan", image: "/images/flags/pk.svg" }, + { id: "pl", text: "Poland", image: "/images/flags/pl.svg" }, + { id: "pm", text: "St. Pierre & Miquelon", image: "/images/flags/pm.svg" }, + { id: "pn", text: "Pitcairn Islands", image: "/images/flags/pn.svg" }, + { id: "pr", text: "Puerto Rico", image: "/images/flags/pr.svg" }, + { id: "ps", text: "Palestinian Territories", image: "/images/flags/ps.svg" }, + { id: "pt", text: "Portugal", image: "/images/flags/pt.svg" }, + { id: "pw", text: "Palau", image: "/images/flags/pw.svg" }, + { id: "py", text: "Paraguay", image: "/images/flags/py.svg" }, + { id: "qa", text: "Qatar", image: "/images/flags/qa.svg" }, + { id: "re", text: "Réunion", image: "/images/flags/re.svg" }, + { id: "ro", text: "Romania", image: "/images/flags/ro.svg" }, + { id: "rs", text: "Serbia", image: "/images/flags/rs.svg" }, + { id: "ru", text: "Russia", image: "/images/flags/ru.svg" }, + { id: "rw", text: "Rwanda", image: "/images/flags/rw.svg" }, + { id: "sa", text: "Saudi Arabia", image: "/images/flags/sa.svg" }, + { id: "sb", text: "Solomon Islands", image: "/images/flags/sb.svg" }, + { id: "sc", text: "Seychelles", image: "/images/flags/sc.svg" }, + { id: "sd", text: "Sudan", image: "/images/flags/sd.svg" }, + { id: "se", text: "Sweden", image: "/images/flags/se.svg" }, + { id: "sg", text: "Singapore", image: "/images/flags/sg.svg" }, + { id: "sh", text: "St. Helena", image: "/images/flags/sh.svg" }, + { id: "si", text: "Slovenia", image: "/images/flags/si.svg" }, + { id: "sj", text: "Svalbard & Jan Mayen", image: "/images/flags/sj.svg" }, + { id: "sk", text: "Slovakia", image: "/images/flags/sk.svg" }, + { id: "sl", text: "Sierra Leone", image: "/images/flags/sl.svg" }, + { id: "sm", text: "San Marino", image: "/images/flags/sm.svg" }, + { id: "sn", text: "Senegal", image: "/images/flags/sn.svg" }, + { id: "so", text: "Somalia", image: "/images/flags/so.svg" }, + { id: "sr", text: "Suriname", image: "/images/flags/sr.svg" }, + { id: "ss", text: "South Sudan", image: "/images/flags/ss.svg" }, + { id: "st", text: "São Tomé & Príncipe", image: "/images/flags/st.svg" }, + { id: "sv", text: "El Salvador", image: "/images/flags/sv.svg" }, + { id: "sx", text: "Sint Maarten", image: "/images/flags/sx.svg" }, + { id: "sy", text: "Syria", image: "/images/flags/sy.svg" }, + { id: "sz", text: "Eswatini", image: "/images/flags/sz.svg" }, + { id: "sh", text: "Tristan Da Cunha", image: "/images/flags/sh.svg" }, + { id: "tc", text: "Turks & Caicos Islands", image: "/images/flags/tc.svg" }, + { id: "td", text: "Chad", image: "/images/flags/td.svg" }, + { id: "tf", text: "French Southern Territories", image: "/images/flags/tf.svg" }, + { id: "tg", text: "Togo", image: "/images/flags/tg.svg" }, + { id: "th", text: "Thailand", image: "/images/flags/th.svg" }, + { id: "tj", text: "Tajikistan", image: "/images/flags/tj.svg" }, + { id: "tk", text: "Tokelau", image: "/images/flags/tk.svg" }, + { id: "tl", text: "Timor-Leste", image: "/images/flags/tl.svg" }, + { id: "tm", text: "Turkmenistan", image: "/images/flags/tm.svg" }, + { id: "tn", text: "Tunisia", image: "/images/flags/tn.svg" }, + { id: "to", text: "Tonga", image: "/images/flags/to.svg" }, + { id: "tr", text: "Turkey", image: "/images/flags/tr.svg" }, + { id: "tt", text: "Trinidad & Tobago", image: "/images/flags/tt.svg" }, + { id: "tv", text: "Tuvalu", image: "/images/flags/tv.svg" }, + { id: "tw", text: "Taiwan", image: "/images/flags/tw.svg" }, + { id: "tz", text: "Tanzania", image: "/images/flags/tz.svg" }, + { id: "ua", text: "Ukraine", image: "/images/flags/ua.svg" }, + { id: "ug", text: "Uganda", image: "/images/flags/ug.svg" }, + { id: "um", text: "U.S. Outlying Islands", image: "/images/flags/um.svg" }, + //{ id: "un", text: "United Nations", image: "/images/flags/un.svg" }, + { id: "us", text: "United States", image: "/images/flags/us.svg" }, + { id: "uy", text: "Uruguay", image: "/images/flags/uy.svg" }, + { id: "uz", text: "Uzbekistan", image: "/images/flags/uz.svg" }, + { id: "va", text: "Vatican City", image: "/images/flags/va.svg" }, + { id: "vc", text: "St. Vincent & Grenadines", image: "/images/flags/vc.svg" }, + { id: "ve", text: "Venezuela", image: "/images/flags/ve.svg" }, + { id: "vg", text: "British Virgin Islands", image: "/images/flags/vg.svg" }, + { id: "vi", text: "U.S. Virgin Islands", image: "/images/flags/vi.svg" }, + { id: "vn", text: "Vietnam", image: "/images/flags/vn.svg" }, + { id: "vu", text: "Vanuatu", image: "/images/flags/vu.svg" }, + { id: "wf", text: "Wallis & Futuna", image: "/images/flags/wf.svg" }, + { id: "ws", text: "Samoa", image: "/images/flags/ws.svg" }, + { id: "xk", text: "Kosovo", image: "/images/flags/xk.svg" }, + { id: "ye", text: "Yemen", image: "/images/flags/ye.svg" }, + { id: "yt", text: "Mayotte", image: "/images/flags/yt.svg" }, + { id: "za", text: "South Africa", image: "/images/flags/za.svg" }, + { id: "zm", text: "Zambia", image: "/images/flags/zm.svg" }, + { id: "zw", text: "Zimbabwe", image: "/images/flags/zw.svg" }, + { id: "uk", text: "England", image: "/images/flags/gb-eng.svg" }, + { id: "uk", text: "Scotland", image: "/images/flags/gb-sct.svg" }, + { id: "uk", text: "Wales", image: "/images/flags/gb-wls.svg" }, ]; diff --git a/pickers.html b/src/datepicker.html similarity index 59% rename from pickers.html rename to src/datepicker.html index 5b2f6ae..d5627d7 100644 --- a/pickers.html +++ b/src/datepicker.html @@ -1,4 +1,4 @@ - + {{> head }} @@ -11,24 +11,20 @@
-

Date Picker

-

The datepicker allows users to select a date from an interactive calendar.

- 
<input type="text" class="datepicker">
+ 
<input type="text" class="datepicker">
Initialization
- 

-  document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.datepicker');
-    var instances = M.Datepicker.init(elems, {
-      // specify options here
-    });
+                
document.addEventListener('DOMContentLoaded', function() {
+  const elems = document.querySelectorAll('.datepicker');
+  const instances = M.Datepicker.init(elems, {
+    // specify options here
   });
-          

+});
@@ -48,7 +44,7 @@
Options
autoClose Boolean false - Automatically close picker when date is selected. + DEPRECATED Automatically close picker when date is selected. format @@ -168,13 +164,13 @@
Options
onOpen Function null - Callback function when Datepicker is opened. + DEPRECATED Callback function when Datepicker is opened. onClose Function null - Callback function when Datepicker is closed. + DEPRECATED Callback function when Datepicker is closed. onDraw @@ -412,274 +408,33 @@
Methods

All the methods are called on the plugin instance. You can get the plugin instance like this:

- 

-  var instance = M.Datepicker.getInstance(elem);
-
+ 
const instance = M.Datepicker.getInstance(elem);
-
.open();
-

Open datepicker

- 

-instance.open();
-
- -
.close();
-

Close datepicker

- 

-instance.close();
-
.toString();

Gets a string representation of the selected date

- 

-instance.toString();
-
+ 
instance.toString();
.setDate();

Set a date on the datepicker

Arguments

Date (optional): Date to set on the datepicker.

- 

-instance.setDate(new Date());
-
+ 
instance.setDate(new Date());
.gotoDate();

Change date view to a specific date on the datepicker

Arguments

Date: Date to show on the datepicker.

- 

-instance.gotoDate(new Date());
-
+ 
instance.gotoDate(new Date());
.destroy();

Destroy plugin instance and teardown

- 

-instance.destroy();
-
-
-
- -
-

Time Picker

-

The timepicker allows users to select a date from an interactive clock.

-
- - -
- 

-  
-
- -
-
Initialization
- 

-  document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.timepicker');
-    var instances = M.Timepicker.init(elems, {
-      // specify options here
-    });
-  });
-
-
- -
-
Options
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
durationNumber350Duration of the transition from/to the hours/minutes view.
containerElement || StringnullSpecify a DOM element OR selector for a DOM element to render the time picker in, by default it will be placed before the input.
showClearBtnBooleanfalseShow the clear button in the Timepicker.
defaultTimeString'now'Default time to set on the timepicker 'now' or '13:14'
fromNowNumber0Millisecond offset from the defaultTime.
i18nObjectSee i18n documentation.Internationalization options.
autoCloseBooleanfalseAutomatically close picker when minute is selected.
twelveHourBooleantrueUse 12 hour AM/PM clock instead of 24 hour clock.
vibrateBooleantrueVibrate device when dragging clock hand.
onOpenStartFunctionnullCallback function called before modal is opened.
onOpenEndFunctionnullCallback function called after modal is opened.
onCloseStartFunctionnullCallback function called before modal is closed.
onCloseEndFunctionnullCallback function called after modal is closed.
onSelectFunctionnullCallback function when a time is selected, first parameter is the hour and the second is the minute.
-
+ 
instance.destroy();
-
-
Timepicker Internationalization options
-

Use these in the i18n option to localize the timepicker.

- - - - - - - - - - - - - - - - - - - - - - -
KeyText
cancel'Cancel'
clear'Clear'
done'Ok'
-
- -
-
Properties
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
elElementThe input element the plugin was initialized with.
optionsObjectThe options the instance was initialized with.
isOpenBooleanIf the picker is open.
timeStringThe selected time.
-
- -
-
Methods
- -
-

All the methods are called on the plugin instance. You can get the plugin instance like this:

- 

-  var instance = M.Timepicker.getInstance(elem);
-
-
.open();
-

Open timepicker

- 

-instance.open();
-
- +

DEPRECATED Open datepicker

.close();
-

Close timepicker

- 

-instance.close();
-
- -
.showView();
-

Show hours or minutes view on timepicker

-
Arguments
-

String: The name of the view you want to switch to, 'hours' or 'minutes'.

- 

-instance.showView('hours');
-
- -
.destroy();
-

Destroy plugin instance and teardown

- 

-instance.destroy();
-
+

DEPRECATED Close datepicker

@@ -691,9 +446,6 @@
.destroy();
  • Date Picker
    • -
  • - Time Picker -
    • @@ -702,6 +454,6 @@
    .destroy();
    {{> footer }} - + diff --git a/src/demo-page.html b/src/demo-page.html new file mode 100644 index 0000000..9bffd5b --- /dev/null +++ b/src/demo-page.html @@ -0,0 +1,149 @@ + + + + + + Test + + + +
    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet nobis odit officiis officia optio nam id corporis! Consequatur, hic minima porro totam, quidem et + laboriosam neque vitae voluptatibus, maxime laborum. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit rerum pariatur sed omnis quam iusto adipisci eveniet. + Incidunt eaque a alias, voluptas illum sequi, exercitationem, obcaecati excepturi accusantium voluptate hic. Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Quisquam consectetur ab a obcaecati? +

    + +

    This is an Error

    + +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, nihil ut explicabo provident aut, nisi sint atque fugiat aliquid nam tenetur beatae debitis dolore nemo, + consequatur natus temporibus vitae cum. +

    +
    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere exercitationem aperiam nostrum corrupti. Soluta cum alias, assumenda dolorem perspiciatis mollitia aliquam + nemo amet corporis, sapiente dignissimos. Quas voluptatibus sunt a! +

    + + + + + + + + +
    +
    Short Modal
    +
    +
    +

    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus dolores sapiente, dolorum minus amet vel distinctio obcaecati, quod porro esse sit excepturi + repellat odio exercitationem. Earum nihil eligendi facere voluptatibus. +

    +
    +
    + Cancel + Confirm +
    +     + + +
    +
    Long Content Modal
    +
    +
    +

    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus dolores sapiente, dolorum minus amet vel distinctio obcaecati, quod porro esse sit excepturi + repellat odio exercitationem. Earum nihil eligendi facere voluptatibus. +

    +

    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus dolores sapiente, dolorum minus amet vel distinctio obcaecati, quod porro esse sit excepturi + repellat odio exercitationem. Earum nihil eligendi facere voluptatibus. +

    +

    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus dolores sapiente, dolorum minus amet vel distinctio obcaecati, quod porro esse sit excepturi + repellat odio exercitationem. Earum nihil eligendi facere voluptatibus. +

    +

    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus dolores sapiente, dolorum minus amet vel distinctio obcaecati, quod porro esse sit excepturi + repellat odio exercitationem. Earum nihil eligendi facere voluptatibus. +

    +

    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus dolores sapiente, dolorum minus amet vel distinctio obcaecati, quod porro esse sit excepturi + repellat odio exercitationem. Earum nihil eligendi facere voluptatibus. +

    +

    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus dolores sapiente, dolorum minus amet vel distinctio obcaecati, quod porro esse sit excepturi + repellat odio exercitationem. Earum nihil eligendi facere voluptatibus. +

    +

    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus dolores sapiente, dolorum minus amet vel distinctio obcaecati, quod porro esse sit excepturi + repellat odio exercitationem. Earum nihil eligendi facere voluptatibus. +

    +

    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus dolores sapiente, dolorum minus amet vel distinctio obcaecati, quod porro esse sit excepturi + repellat odio exercitationem. Earum nihil eligendi facere voluptatibus. +

    +
    +
    + Cancel + Confirm +
    +     + + +
    +
    Modal Header
    +
    +
    +
      +
    • + + Title +

      First Line Second Line

      + + grade + +
      • +
    • + folder + Title +

      First Line Second Line

      + + grade + +
      • +
    • + assessment + Title +

      First Line Second Line

      + + grade + +
      • +
    • + play_arrow + Title +

      First Line Second Line

      + + grade + +
      • +
    +
    +     + +
    + + + diff --git a/dropdown.html b/src/dropdown.html similarity index 92% rename from dropdown.html rename to src/dropdown.html index d8a6118..feed258 100644 --- a/dropdown.html +++ b/src/dropdown.html @@ -1,4 +1,4 @@ - + {{> head }} @@ -13,14 +13,15 @@

    Add a dropdown list to any button. Make sure that the - data-target attribute matches the id in the ul tag. You can add a divider with the - -

    <li class="divider"></li> - - tag. You can also add icons. Just add the icon inside the + data-target attribute matches the id in the ul tag. You can add a divider with an empty li + element and a + divider + class. You can also add icons. Just add the icon inside the anchor tag.

    - Drop Me! + + Drop Me! +
    - -

    Options

    @@ -68,7 +62,6 @@

    Options

    - @@ -90,11 +83,8 @@

    Options

    Description
    direction
    -
    - -
    Methods
    @@ -102,40 +92,28 @@
    Methods
                   Copied!
               content_copy
-              
-  var instance = M.FloatingActionButton.getInstance(elem);
-            
+              const instance = M.FloatingActionButton.getInstance(elem);
    .open();

    Opens FAB.

    - 
    
-instance.open();
-
    + 
    instance.open();
    -
    .close();

    Closes FAB.

    - 
    
-instance.close();
-
    + 
    instance.close();
    -
    .destroy();

    Destroy plugin instance and teardown

    - 
    
-instance.destroy();
-
    + 
    instance.destroy();
    - -

    Properties

    @@ -146,7 +124,6 @@

    Properties

    - @@ -167,8 +144,6 @@

    Properties

    Description
    el
    - -     - -

    Click-only FAB

    If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button @@ -282,35 +252,18 @@

    Click-only FAB

               Copied!
           content_copy
-          
-  document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.fixed-action-btn');
-    var instances = M.FloatingActionButton.init(elems, {
-      direction: 'left',
-      hoverEnabled: false
-    });
+          document.addEventListener('DOMContentLoaded', function() {
+  const elems = document.querySelectorAll('.fixed-action-btn');
+  const instances = M.FloatingActionButton.init(elems, {
+    direction: 'left',
+    hoverEnabled: false
   });
-          
-
    +});

    FAB to Toolbar

    Deprecated since Version 2.1.0!

    -

    Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the - toolbar class to the FAB.

    - - 
    -          Copied!
-          content_copy
-          
-  document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.fixed-action-btn');
-    var instances = M.FloatingActionButton.init(elems, {
-      toolbarEnabled: true
-    });
-  });
-
    @@ -355,6 +308,6 @@

    FAB to Toolbar

    {{> footer }} - + \ No newline at end of file diff --git a/footer.html b/src/footer.html similarity index 98% rename from footer.html rename to src/footer.html index a91a09b..03677f1 100644 --- a/footer.html +++ b/src/footer.html @@ -102,6 +102,6 @@

    Sticky Footer

    {{> footer }} - + diff --git a/src/fullscreen-slider-demo.html b/src/fullscreen-slider-demo.html new file mode 100644 index 0000000..8cef585 --- /dev/null +++ b/src/fullscreen-slider-demo.html @@ -0,0 +1,38 @@ + + + + {{> head }} + + +
    +
      +
    • + + +
      +

      This is our big Tagline!

      +
      Here's our small slogan.
      +
      +
      • +
    • + + +
      +

      Left Aligned Caption

      +
      Here's our small slogan.
      +
      +
      • +
    • + + +
      +

      Right Aligned Caption

      +
      Here's our small slogan.
      +
      +
      • +
    +
    + + + + diff --git a/getting-started.html b/src/getting-started.html similarity index 97% rename from getting-started.html rename to src/getting-started.html index d7962e9..2024d64 100644 --- a/getting-started.html +++ b/src/getting-started.html @@ -1,4 +1,4 @@ - + {{> head }} @@ -31,7 +31,7 @@
    Materialize
    tabindex="0" id="download-source" class="btn filled waves-effect waves-light icon-right" - href="https://github.com/materializecss/materialize/releases/download/v2.1.1/materialize-v2.1.1.zip" + href="https://github.com/materializecss/materialize/releases/download/v2.2.0/materialize-v2.2.0.zip" > Materializefile_download     @@ -46,7 +46,7 @@
    Sass
    tabindex="0" id="download-sass" class="btn outlined waves-effect waves-light icon-right" - href="https://github.com/materializecss/materialize/releases/download/v2.1.1/materialize-src-v2.1.1.zip" + href="https://github.com/materializecss/materialize/releases/download/v2.2.0/materialize-src-v2.2.0.zip" > Sourcefile_download @@ -80,9 +80,9 @@
    CDN
    Copied! content_copy <!-- Compiled and minified CSS --> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.1.1/dist/css/materialize.min.css"> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.2.0/dist/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> -<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.1.1/dist/js/materialize.min.js"></script> +<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.2.0/dist/js/materialize.min.js"></script>
    @@ -236,7 +236,7 @@
    Compiling Sass
    {{> footer }} - + + diff --git a/helpers.html b/src/helpers.html similarity index 99% rename from helpers.html rename to src/helpers.html index 27fe3e2..9cc15a7 100644 --- a/helpers.html +++ b/src/helpers.html @@ -925,6 +925,6 @@

    Browser Defaults

    {{> footer }} - + diff --git a/icons.html b/src/icons.html similarity index 99% rename from icons.html rename to src/icons.html index 8f80199..5993cab 100644 --- a/icons.html +++ b/src/icons.html @@ -128,6 +128,6 @@
    Symbol Sizes
    {{> footer }} - + diff --git a/index.html b/src/index.html similarity index 99% rename from index.html rename to src/index.html index 26f87f0..7d469fc 100644 --- a/index.html +++ b/src/index.html @@ -247,6 +247,6 @@

    Materialize is free and open-source. This is made possible by our awesome sp

    {{> footer }} - + diff --git a/src/main.ts b/src/main.ts index 0cbb843..50f5e07 100644 --- a/src/main.ts +++ b/src/main.ts @@ -194,6 +194,7 @@ document.addEventListener("DOMContentLoaded", () => { function setBtnState(isDark: boolean) { const themeSwitch = document.querySelector("#theme-switch"); + if (!themeSwitch) return; if (isDark) { themeSwitch.classList.add("is-dark"); themeSwitch.querySelector("i").innerText = "light_mode"; @@ -207,7 +208,7 @@ document.addEventListener("DOMContentLoaded", () => { setBtnState(isDarkMode); const themeSwitch = document.querySelector("#theme-switch"); - themeSwitch.addEventListener("click", (e) => { + themeSwitch?.addEventListener("click", (e) => { e.preventDefault(); if (!themeSwitch.classList.contains("is-dark")) { setBtnState(true); @@ -226,8 +227,8 @@ document.addEventListener("DOMContentLoaded", () => { toggleColorsButton?.addEventListener("change", () => { themes.setThemePrimaryColor(toggleColorsButton.value); }); - const downloadCssButton = document.querySelector("#downloadCss"); - downloadCssButton.addEventListener("click", () => { + + document.querySelector("#downloadCss")?.addEventListener("click", () => { themes.downloadCss(); }); diff --git a/media-css.html b/src/media-css.html similarity index 98% rename from media-css.html rename to src/media-css.html index 1a20234..8511952 100644 --- a/media-css.html +++ b/src/media-css.html @@ -122,6 +122,6 @@
    Responsive Videos
    {{> footer }} - + diff --git a/media.html b/src/media.html similarity index 97% rename from media.html rename to src/media.html index 448b0fb..bb1a034 100644 --- a/media.html +++ b/src/media.html @@ -1,4 +1,4 @@ - + {{> head }} @@ -28,8 +28,8 @@

    Material Box

    Initialization

    
   document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.materialboxed');
-    var instances = M.Materialbox.init(elems, {
+    const elems = document.querySelectorAll('.materialboxed');
+    const instances = M.Materialbox.init(elems, {
       // specify options here
     });
   });
@@ -90,7 +90,7 @@ 
    Methods
    
               
    
                 
    All the methods are called on the plugin instance. You can get the plugin instance like this:
    
                 
    
-    var instance = M.Materialbox.getInstance(elem);
+                  const instance = M.Materialbox.getInstance(elem);
           
    
               
    
               
    .open();
    
@@ -256,8 +256,8 @@ 
    Here's our small slogan.
    
               
    Initialization
    
               
    
   document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.slider');
-    var instances = M.Slider.init(elems, {
+    const elems = document.querySelectorAll('.slider');
+    const instances = M.Slider.init(elems, {
       // specify options here
       /** Optional function which generates ARIA label for each indicator */
       indicatorLabelFunc: (idx, current) => {
@@ -338,7 +338,7 @@ 
    Methods
    
               
    
                 
    All the methods are called on the plugin instance. You can get the plugin instance like this:
    
                 
    
-    var instance = M.Slider.getInstance(elem);
+                  const instance = M.Slider.getInstance(elem);
           
    
               
    
 
@@ -431,6 +431,6 @@ 
    Fullscreen Slider
    {{> footer }} - + diff --git a/mobile.html b/src/mobile.html similarity index 97% rename from mobile.html rename to src/mobile.html index 147e993..f51bcbc 100644 --- a/mobile.html +++ b/src/mobile.html @@ -45,6 +45,6 @@

    Swipe to Dismiss

    {{> footer }} - + diff --git a/modals.html b/src/modals.html similarity index 55% rename from modals.html rename to src/modals.html index 4146275..5e23165 100644 --- a/modals.html +++ b/src/modals.html @@ -1,4 +1,4 @@ - + {{> head }} @@ -13,13 +13,26 @@

    Use a modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link - of the trigger. To add a close button, just add the class - .modal-close to your button. + of the trigger. +

    Upgrade > 2.1.1
    +
      +
    • 1. search all elements with class="modal" and add "popover" attribute
      • +
    • 2. replace `data-target="id"` with `popovertarget="id"`.
      • +
    • 3. replace close-triggers with `popovertarget="id"` (toggle)
      • +
    +

    - Modal - + +
    +

    Icons

    +

    + By default icons appear vertically centered. To diplay icons horizontally add .tabs-horizontal + class to the tabs container to indicate text position. +

    + + +

    + +

    + + 
        
+
+  <ul class="tabs tabs-fixed-width tab-demo tabs-horizontal z-depth-1">
+    <li class="tab"><a href="#image-test1"><i class="material-icons">flight</i>Flight</a></li>
+    <li class="tab"><a class="active" href="#image-test2"><i class="material-icons">luggage</i>Luggage</a></li>
+    <li class="tab"><a href="#image-test3"><i class="material-icons">explore</i>Explore</a></li>
+  </ul>              
+  <div id="image-test1" class="col s12"><p>Flight</p></div>
+  <div id="image-test2" class="col s12"><p>Luggage</p></div>
+  <div id="image-test3" class="col s12"><p>Explore</p></div>    
+
+
    +
    @@ -310,6 +367,6 @@

    Fixed Width Tabs

    {{> footer }} - + diff --git a/text-inputs.html b/src/text-inputs.html similarity index 99% rename from text-inputs.html rename to src/text-inputs.html index 7105104..6efc782 100644 --- a/text-inputs.html +++ b/src/text-inputs.html @@ -1,4 +1,4 @@ - + {{> head }} @@ -579,8 +579,8 @@
    Initialization

    There are no options for this plugin, but if you are adding these dynamically, you can use this to initialize them.

    
   document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('input#input_text, textarea#textarea2');
-    var instances = M.CharacterCounter.init(elems);
+    const elems = document.querySelectorAll('input#input_text, textarea#textarea2');
+    const instances = M.CharacterCounter.init(elems);
   });
    @@ -601,6 +601,6 @@
    Initialization
    {{> footer }} - + diff --git a/themes.html b/src/themes.html similarity index 65% rename from themes.html rename to src/themes.html index e15aeae..754f548 100644 --- a/themes.html +++ b/src/themes.html @@ -1,4 +1,4 @@ - + {{> head }} @@ -23,14 +23,24 @@

    Reading Theme Setting

    </head> tag.

    - It has to be loaded as soon as possible (therefore put it as first script) to avoid flickering of the page. Also it is recommended to directly write it into the - HTML code, then it is also faster (no additional request). + It has to be loaded as soon as possible (therefore put it as first script) to avoid flickering of the page. It is also recommended to put this code directly into + into the HTML code to load faster (no additional requests). 

    
 
 <script>
-  const theme = localStorage.getItem('theme');
-  if (theme) document.documentElement.setAttribute('theme', theme);
+  function getTheme() {
+    const isDarkModeEnabledViaCss = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const currentTheme = localStorage.getItem('theme');
+    const isDark = currentTheme ? currentTheme === 'dark' : isDarkModeEnabledViaCss;
+    return isDark;
+  }
+  function setTheme(enableDark) {
+    document.documentElement.setAttribute('theme', enableDark ? 'dark' : 'light');
+    localStorage.setItem('theme', enableDark ? 'dark' : 'light');
+  }
+  const currentState = getTheme();
+  setTheme(currentState);
 </script>
    @@ -41,46 +51,42 @@

    Reading Theme Setting

    Changing Theme Setting

    The Theme can be switched instantly via click of a button.

    - The following example binds a Theme-Switching Function to an HTML-Element, which has an Id of #theme-switch. To test this, you can click on the moon or the sun icon - at this page in the top-right corenr to see it in action! + The following example binds a Theme-Switching Function to an HTML-Element, which has a class of `btn-switch-theme`. To test this, you can click on the moon or the + sun icon at this page in the top-right corenr to see it in action! 

      // Change Theme Setting with a Switch
-  const currentTheme = localStorage.getItem('theme');
-  const switchElem = document.querySelector('#theme-switch');
+  function getTheme() {
+    const isDarkModeEnabledViaCss = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const currentTheme = localStorage.getItem('theme');
+    const isDark = currentTheme ? currentTheme === 'dark' : isDarkModeEnabledViaCss;
+    return isDark;
+  }
 
-  const setTheme = (isDark) => {
-    if (isDark) {
-      switchElem.classList.add('is-dark');
-      switchElem.querySelector('i').innerText = 'light_mode';
-      switchElem.title = 'Switch to light mode';
-    }
-    else {
-      switchElem.classList.remove('is-dark');
-      switchElem.querySelector('i').innerText = 'dark_mode';
-      switchElem.title = 'Switch to dark mode';
-    }
+  function setTheme(enableDark) {
+    document.documentElement.setAttribute('theme', enableDark ? 'dark' : 'light');
+    localStorage.setItem('theme', enableDark ? 'dark' : 'light');
   }
 
-  if (switchElem) {
-    // Load
-    if (currentTheme) setTheme(true);
-    // Change
-    switchElem.addEventListener('click', e => {
-      e.preventDefault();
-      if (!switchElem.classList.contains('is-dark')) {
-        // Dark Theme
-        document.documentElement.setAttribute('theme', 'dark');
-        localStorage.setItem('theme', 'dark');
-        setTheme(true);
-      }
-      else {
-        // Light Theme
-        document.documentElement.removeAttribute('theme');
-        localStorage.removeItem('theme');
-        setTheme(false);
-      }
-    });
+  function updateDarkModeButtonState(isCurrentlyDarkModeEnabled) {
+    const element = document.querySelector('.btn-switch-theme');
+    element.classList.remove('is-dark');
+    if (isCurrentlyDarkModeEnabled) element.classList.add('is-dark');
+    element.querySelector('span').innerText = isCurrentlyDarkModeEnabled ? 'light_mode' : 'dark_mode';
+    element.title = 'Switch to ' + (isCurrentlyDarkModeEnabled ? 'light' : 'dark') + ' mode';
   }
+
+  // Init Theme and Button
+  const darkModeButton = document.querySelector('.btn-switch-theme');
+  darkModeButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    const nextState = !getTheme(); // toggle
+    setTheme(nextState);
+    updateDarkModeButtonState(nextState);
+  });
+  const currentState = getTheme();
+  setTheme(currentState);
+  updateDarkModeButtonState(currentState);
+
    @@ -145,6 +151,6 @@

    Creating a Theme

    {{> footer }} - + diff --git a/src/themes.ts b/src/themes.ts index 2e12f9f..fe6008f 100644 --- a/src/themes.ts +++ b/src/themes.ts @@ -52,7 +52,7 @@ export class Themes { downloadCss() { const color = argbFromHex(this.getThemePrimaryColor()); const generator = new CssGenerator(themeFromSourceColor(color)); - var fileLines = generator.tokens(); + const fileLines = generator.tokens(); this.downloadFile("tokens.module.scss", fileLines.join("\n")); } diff --git a/src/timepicker.html b/src/timepicker.html new file mode 100644 index 0000000..3a72ef7 --- /dev/null +++ b/src/timepicker.html @@ -0,0 +1,240 @@ + + + + {{> head }} + + + {{> navbar }} +
    + {{> intro}} +
    +
    +
    + + +
    +
    + + +
    + 
    <input type="text" class="timepicker">
    + +
    +
    Initialization
    + 
    document.addEventListener('DOMContentLoaded', function() {
+  const elems = document.querySelectorAll('.timepicker');
+  const instances = M.Timepicker.init(elems, {
+    // specify options here
+  });
+});
    +
    + +
    +
    Options
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDefaultDescription
    durationNumber350Duration of the transition from/to the hours/minutes view.
    containerElement || StringnullSpecify a DOM element OR selector for a DOM element to render the time picker in, by default it will be placed before the input.
    showClearBtnBooleanfalseShow the clear button in the Timepicker.
    defaultTimeString'now'Default time to set on the timepicker 'now' or '13:14'
    fromNowNumber0Millisecond offset from the defaultTime.
    i18nObjectSee i18n documentation.Internationalization options.
    autoCloseBooleanfalseDEPRECATED Automatically close picker when minute is selected.
    twelveHourBooleantrueUse 12 hour AM/PM clock instead of 24 hour clock.
    vibrateBooleantrueVibrate device when dragging clock hand.
    onOpenStartFunctionnullDEPRECATED Callback function called before modal is opened.
    onOpenEndFunctionnullDEPRECATED Callback function called after modal is opened.
    onCloseStartFunctionnullDEPRECATED Callback function called before modal is closed.
    onCloseEndFunctionnullDEPRECATED Callback function called after modal is closed.
    onSelectFunctionnullCallback function when a time is selected, first parameter is the hour and the second is the minute.
    +
    + +
    +
    Timepicker Internationalization options
    +

    Use these in the i18n option to localize the timepicker.

    + + + + + + + + + + + + + + + + + + + + + + +
    KeyText
    cancel'Cancel'
    clear'Clear'
    done'Ok'
    +
    + +
    +
    Properties
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescription
    elElementThe input element the plugin was initialized with.
    optionsObjectThe options the instance was initialized with.
    isOpenBooleanIf the picker is open.
    timeStringThe selected time.
    +
    + +
    +
    Methods
    + +
    +

    All the methods are called on the plugin instance. You can get the plugin instance like this:

    + 
    const instance = M.Timepicker.getInstance(elem);
    +
    + +
    .showView();
    +

    Show hours or minutes view on timepicker

    +
    Arguments
    +

    String: The name of the view you want to switch to, 'hours' or 'minutes'.

    + 
    instance.showView('hours');
    + +
    .destroy();
    +

    Destroy plugin instance and teardown

    + 
    instance.destroy();
    + +
    .open();
    +

    DEPRECATED Open timepicker

    +
    .close();
    +

    DEPRECATED Close timepicker

    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +
    +
    +
    + {{> footer }} + + + diff --git a/toasts.html b/src/toasts.html similarity index 87% rename from toasts.html rename to src/toasts.html index 1f9c6f2..936edc3 100644 --- a/toasts.html +++ b/src/toasts.html @@ -1,4 +1,4 @@ - + {{> head }} @@ -15,7 +15,7 @@ Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also placed and sized responsively, try it out by clicking the button below on different device sizes.

    - +

    To do this, call the M.toast() function programmatically in JavaScript.

    
   M.toast({text: 'I am a toast!'})
@@ -23,7 +23,7 @@
               
    One way to add this into your application is to add this as an onclick event to a button.
    
               
    
 
-<button type="button" onclick="M.toast({text: 'I am a toast'})" class="btn">Toast!</button>
+<button type="button" onclick="M.toast({text: 'I am a toast'})" class="btn tonal">Show Toast</button>
    @@ -135,18 +135,18 @@

    Properties

    Custom HTML

    You can pass in an toastId as the argument as well. This toastId should refer to some template in the HTML that will be used as toast content.

    - + - + 
    
 
-<button type="button" class="btn" onclick="M.toast({toastId: 'my-toast-1'})">Toast 1!</button>
+<button type="button" class="btn tonal" onclick="M.toast({toastId: 'my-toast-1'})">Show Toast 1</button>
 <template id="my-toast-1">
   <div>
     This is toast nº1 with a  <a href="https://github.com/materializecss"> link </a>
@@ -158,9 +158,9 @@ <h3 class="header">Custom HTML</h3>
             <div id="callback" class="scrollspy section">
               <h3 class="header">Callback</h3>
               <p>You can have the toast callback a function when it has been dismissed.</p>
-              <button type="button" class="btn" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</button>
+              <button type="button" class="btn tonal" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Show Toast</button>
               <pre><code class="language-html">
-  <button type="button" class="btn" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</button>
+  <button type="button" class="btn tonal" onclick="M.toast({text: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Show Toast</button>
         </code></pre>
             </div>
 
@@ -171,7 +171,7 @@ <h3 class="header">Styling Toasts</h3>
                 you, but you can create your own CSS classes and apply them to toasts. Checkout out our full example below.
               </p>
 
-              <button type="button" class="waves-effect waves-light btn" onclick="M.toast({text: 'I am a toast!', classes: 'rounded'})">Round Toast!</button>
+              <button type="button" class="waves-effect waves-light btn tonal" onclick="M.toast({text: 'I am a toast!', classes: 'rounded'})">Show round Toast</button>
 
               <pre><code class="language-javascript">
   // 'rounded' is the class I'm applying to the toast
@@ -188,8 +188,8 @@ <h3 class="header">Dismiss a Toast Programmatically</h3>
 
               <pre><code class="language-javascript">
   // Get toast DOM Element, get instance, then call dismiss function
-  var toastElement = document.querySelector('.toast');
-  var toastInstance = M.Toast.getInstance(toastElement);
+  const toastElement = document.querySelector('.toast');
+  const toastInstance = M.Toast.getInstance(toastElement);
   toastInstance.dismiss();
         </code></pre>
 
@@ -220,11 +220,11 @@ <h5>Dismiss all Toasts</h5>
       </div>
     </main>
     {{> footer }}
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/main.ts"></script>
   </body>
   <script type="text/javascript">
-    var displayCustomHTMLToast = function () {
-      var toastHTML = '<span>I am toast content</span><button class="btn-flat toast-action">Undo</button>';
+    const displayCustomHTMLToast = function () {
+      const toastHTML = '<span>I am toast content</span><button class="btn-flat toast-action">Undo</button>';
       M.toast({ html: toastHTML });
     };
   </script>
diff --git a/tooltips.html b/src/tooltips.html
similarity index 93%
rename from tooltips.html
rename to src/tooltips.html
index 7d88cb6..55b5751 100644
--- a/tooltips.html
+++ b/src/tooltips.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     {{> head }}
@@ -18,17 +18,17 @@
               </p>
 
               <div>
-                <a href="#" class="btn tooltipped" data-html="true" data-position="bottom" data-tooltip-id="tooltip-content"> Bottom</a>
+                <a href="#" class="btn tonal tooltipped" data-html="true" data-position="bottom" data-tooltip-id="tooltip-content"> Bottom</a>
                 <div id="tooltip-content" style="display: grid; align-content: center">
                   This is a tooltip with a
                   <a href="https://github.com/materializecss">link</a> and a
                   <i class="material-icons icon-demo">insert_chart</i>
                 </div>
-                <a href="#" class="btn tooltipped" data-position="top" data-tooltip="I am a top tooltip"> Top</a>
-                <a href="#" class="btn tooltipped" data-position="left" data-tooltip="I am a left tooltip"> Left</a>
+                <a href="#" class="btn tonal tooltipped" data-position="top" data-tooltip="I am a top tooltip"> Top</a>
+                <a href="#" class="btn tonal tooltipped" data-position="left" data-tooltip="I am a left tooltip"> Left</a>
                 <a
                   href="#"
-                  class="btn tooltipped"
+                  class="btn tonal tooltipped"
                   data-position="right"
                   data-tooltip="I am a right tooltip. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus possimus quidem voluptatem soluta ex dignissimos, itaque magnam aspernatur eum deleniti delectus, vitae rerum, distinctio quam? Quas sapiente sunt blanditiis?"
                 >
@@ -67,8 +67,8 @@
               <h3 class="header">Initialization</h3>
               <pre><code class="language-javascript">
   document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.tooltipped');
-    var instances = M.Tooltip.init(elems, {
+    const elems = document.querySelectorAll('.tooltipped');
+    const instances = M.Tooltip.init(elems, {
       // specify options here
     });
   });
@@ -177,7 +177,7 @@ <h3 class="header">Methods</h3>
               <blockquote>
                 <p>All the methods are called on the plugin instance. You can get the plugin instance like this:</p>
                 <pre><code class="language-javascript col s12">
-  var instance = M.Tooltip.getInstance(elem);
+                  const instance = M.Tooltip.getInstance(elem);
           </code></pre>
               </blockquote>
               <h5 class="method-header">.open();</h5>
@@ -265,6 +265,6 @@ <h3 class="header">Properties</h3>
       </div>
     </main>
     {{> footer }}
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/main.ts"></script>
   </body>
 </html>
diff --git a/typography.html b/src/typography.html
similarity index 98%
rename from typography.html
rename to src/typography.html
index 272fd75..285e2a4 100644
--- a/typography.html
+++ b/src/typography.html
@@ -92,6 +92,6 @@ <h2 class="header">Changing the font stack</h2>
       <!-- End Container -->
     </main>
     {{> footer }}
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/main.ts"></script>
   </body>
 </html>
diff --git a/waves.html b/src/waves.html
similarity index 99%
rename from waves.html
rename to src/waves.html
index 159cc31..5fef8fe 100644
--- a/waves.html
+++ b/src/waves.html
@@ -142,6 +142,6 @@ <h5 class="light">HTML Markup</h5>
       </div>
     </main>
     {{> footer }}
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/main.ts"></script>
   </body>
 </html>
diff --git a/templates/masonry-template/js/init.js b/templates/masonry-template/js/init.js
deleted file mode 100644
index 0ee6c94..0000000
--- a/templates/masonry-template/js/init.js
+++ /dev/null
@@ -1,16 +0,0 @@
-(function($){
-  $(function(){
-
-    $('.sidenav').sidenav();
-
-
-    var $container = $('#masonry-grid');
-    // initialize
-    $container.masonry({
-      columnWidth: '.col',
-      itemSelector: '.col',
-    });
-
-
-  }); // end of document ready
-})(jQuery); // end of jQuery name space
diff --git a/vite.config.js b/vite.config.js
index de311fe..e070e83 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -12,9 +12,7 @@ function getMenuItem(item) {
     // active kids?
     const kidsIds = item.items.map((el) => el.id);
     const kidsPages = config.pages.filter((page) => kidsIds.includes(page.id));
-    const hasActiveKid = kidsPages.some(
-      (kid) => currentRoute === "/" + kid.url
-    );
+    const hasActiveKid = kidsPages.some((kid) => currentRoute === "/" + kid.url);
 
     const activeClass = hasActiveKid ? "active" : "";
     return `<li>
@@ -52,13 +50,14 @@ function getMenuItem(item) {
 }
 
 export default {
-  base: "./",
+  root: "./src",
+  //base: "./",
   resolve: {
     alias: {
-      '@materializecss/materialize/sass': path.resolve(__dirname, './packages/materialize/sass/'),   
-      '@materializecss/materialize': path.resolve(__dirname, './packages/materialize/src/')      
-    }    
-  },  
+      "@materializecss/materialize/sass": path.resolve(__dirname, "./packages/materialize/sass/"),
+      "@materializecss/materialize": path.resolve(__dirname, "./packages/materialize/src/"),
+    },
+  },
   plugins: [
     handlebars({
       context(pagePath) {
@@ -71,9 +70,7 @@ export default {
         return { page, config };
       },
       helpers: {
-        getmenu: function(item) {
-          return getMenuItem(item);
-        },
+        getmenu: (item) => getMenuItem(item),
       },
       partialDirectory: resolve(__dirname, "partials"),
     }),
@@ -82,15 +79,18 @@ export default {
     rollupOptions: {
       //this is needed for "vite publish" to include all html files, not only the index.
       input: Object.fromEntries(
-        globSync("*.html").map((file) => [
-          // This remove the file extension from each
-          // file, so e.g. nested/foo.js becomes nested/foo
-          file.slice(0, file.length - path.extname(file).length),
-          // This expands the relative paths to absolute paths, so e.g.
-          // src/nested/foo becomes /project/src/nested/foo.js
-          fileURLToPath(new URL(file, import.meta.url)),
-        ])
+        globSync("src/*.html").map((file) => {
+          return [
+            // This remove the file extension from each
+            // file, so e.g. nested/foo.js becomes nested/foo
+            file.slice(0, file.length - path.extname(file).length),
+            // This expands the relative paths to absolute paths, so e.g.
+            // src/nested/foo becomes /project/src/nested/foo.js
+            fileURLToPath(new URL(file, import.meta.url)),
+          ];
+        })
       ),
     },
+    outDir: "./../dist/version/latest", // relative to rootDir
   },
-};
\ No newline at end of file
+};