diff --git a/README.md b/README.md
index 4bc18f0..239bbe9 100644
--- a/README.md
+++ b/README.md
@@ -1,27 +1,214 @@
-# SelectCounty
+
+
+
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.17.
+# @angular-material-extensions/select-country - Material password strength meter to indicate how secure is the provided password - Angular V8 supported incl. schematics
-## Development server
+[![npm version](https://badge.fury.io/js/%40angular-material-extensions%2Fselect-country.svg)](https://badge.fury.io/js/%40angular-material-extensions%2Fselect-country)
+[![npm demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://angular-material-extensions.github.io/select-country)
+[![docs: typedoc](https://img.shields.io/badge/docs-typedoc-4D0080.svg)](https://angular-material-extensions.github.io/select-country/doc/index.html)
+[![Join the chat at https://gitter.im/angular-material-extensions/Lobby](https://badges.gitter.im/angular-material-extensions/Lobby.svg)](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![CircleCI branch](https://img.shields.io/circleci/project/github/angular-material-extensions/select-country/master.svg?label=circleci)](https://circleci.com/gh/angular-material-extensions/select-country)
+[![Build Status](https://travis-ci.org/angular-material-extensions/select-country.svg?branch=master)](https://travis-ci.org/angular-material-extensions/select-country)
+[![codecov](https://codecov.io/gh/angular-material-extensions/select-country/branch/master/graph/badge.svg)](https://codecov.io/gh/angular-material-extensions/select-country)
+[![dependency Status](https://david-dm.org/angular-material-extensions/select-country/status.svg)](https://david-dm.org/angular-material-extensions/select-country)
+[![devDependency Status](https://david-dm.org/angular-material-extensions/select-country/dev-status.svg?branch=master)](https://david-dm.org/angular-material-extensions/select-country#info=devDependencies)
+[![Greenkeeper Badge](https://badges.greenkeeper.io/angular-material-extensions/select-country.svg)](https://greenkeeper.io/)
+[![license](https://img.shields.io/github/license/angular-material-extensions/select-country.svg?style=flat-square)](https://github.com/angular-material-extensions/select-country/blob/master/LICENSE)
+[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/gdi2290/awesome-angular)
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-## Code scaffolding
+
+
+
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## Built by and for developers :heart:
+Do you have any question or suggestion ? Please do not hesitate to contact us!
+Alternatively, provide a PR | open an appropriate issue [here](https://github.com/angular-material-extensions/select-country/issues)
-## Build
+If you like this project, support [angular-material-extensions](https://github.com/angular-material-extensions)
+by starring :star: and sharing it :loudspeaker:
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+## Table of Contents
+- [Demo](#demo)
+- [Components](#components)
+- [Dependencies](#dependencies)
+- [Installation](#installation)
+- [API](#api)
+- [Usage](#usage)
+- [Run Demo App Locally](#run-demo-app-locally)
+- [Development](#development)
+- [Other Angular Libraries](#other-angular-libraries)
+- [Support](#support)
+- [License](#license)
-## Running unit tests
+
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## [Demo](https://angular-material-extensions.github.io/select-country)
-## Running end-to-end tests
+View all the directives and components in action at [https://angular-material-extensions.github.io/select-country](https://angular-material-extensions.github.io/select-country)
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
-## Further help
+## Library's components
+- `` used to display the main component
+
+
+---
+
+
+
+## Dependencies
+* [Angular](https://angular.io) developed and tested with `8.x`
+
+---
+
+
+
+## [Installation](https://angular-material-extensions.github.io/select-country/getting-started)
+
+## 1. Install via *ng add*. (Recommended)
+
+If Angular Material Design is not setup, just run `ng add @angular/material` [learn more](https://material.angular.io/guide/getting-started)
+
+Now add the library via the `angular schematics`
+```shell
+ng add @angular-material-extensions/select-country
+```
+
+## 2. Install via *npm*. (Alternative)
+
+Install peer dependencies
+```shell
+npm i svg-country-flags -s
+```
+
+then update your `angular.json` like below (svg-country-flags)
+
+```json
+"assets": [
+ "src/favicon.ico",
+ "src/assets",
+ {
+ "glob": "**/*",
+ "input": "./node_modules/svg-country-flags/svg",
+ "output": "src/assets/svg-country-flags/svg"
+ }
+ ],
+```
+
+Now install `@angular-material-extensions/select-country` via:
+```shell
+npm install --save @angular-material-extensions/select-country
+```
+
+
+## Import the library
+
+Once installed you need to import the main module:
+```js
+import { MatSelectCountryModule } from '@angular-material-extensions/select-country';
+```
+The only remaining part is to list the imported module in your application module. The exact method will be slightly
+different for the root (top-level) module for which you should end up with the code similar to (notice ` MatSelectCountryModule.forRoot()`):
+```js
+import { MatSelectCountryModule } from '@angular-material-extensions/select-country';
+
+@NgModule({
+ declarations: [AppComponent, ...],
+ imports: [MatSelectCountryModule.forRoot(), ...],
+ bootstrap: [AppComponent]
+})
+export class AppModule {
+}
+```
+
+Other modules in your application can simply import ` MatSelectCountryModule `:
+
+```js
+import { MatSelectCountryModule } from '@angular-material-extensions/select-country';
+
+@NgModule({
+ declarations: [OtherComponent, ...],
+ imports: [MatSelectCountryModule, ...],
+})
+export class OtherModule {
+}
+```
+
+
+
+## API
+
+### `` used to display the main component - [see the demo examples](https://angular-material-extensions.github.io/select-country/examples)
+
+| option | bind | type | default | description |
+|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
+| password | `Input() ` | string | - | the password to calculate its strength
+
+| onStrengthChanged | Output() | `number` | - | emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100%
+
+
+
+
+
+## [Usage](https://angular-material-extensions.github.io/select-country/getting-started)
+
+add the `` element to your template:
+
+```html
+
+
+```
+
+
+
+
+### [ Run Demo App Locally](https://github.com/angular-material-extensions/select-country/tree/master/docs/INSTRUCTIONS_DEMO.md)
+
+
+
+
+### [Development](https://github.com/angular-material-extensions/select-country/tree/master/docs/INSTRUCTIONS_DEV.md)
+
+
+## Other Angular Libraries
+- [ngx-auth-firebaseui](https://github.com/AnthonyNahas/ngx-auth-firebaseui)
+- [ngx-linkifyjs](https://github.com/AnthonyNahas/ngx-linkifyjs)
+- [@firebaseui/ng-bootstrap](https://github.com/firebaseui/ng-bootstrap)
+- [@angular-material-extensions/password-strength](https://github.com/angular-material-extensions/password-strength)
+- [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview)
+- [@angular-material-extensions/google-maps-autocomplete](https://github.com/angular-material-extensions/google-maps-autocomplete)
+- [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)
+- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)
+- [@angular-material-extensions/faq](https://github.com/angular-material-extensions/faq)
+- [@angular-material-extensions/combination-generator](https://github.com/angular-material-extensions/combination-generator)
+
+---
+
+
+
+## Support
++ Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de)
++ or open an appropriate [issue](https://github.com/angular-material-extensions/select-country/issues)
++ let us chat on [Gitter](https://gitter.im/angular-material-extensions/Lobby)
+
+ Built by and for developers :heart: we will help you :punch:
+
+---
+
+![jetbrains logo](https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/jetbrains-variant-4_logos/jetbrains-variant-4.png)
+
+This project is supported by [jetbrains](https://www.jetbrains.com/) with 1 ALL PRODUCTS PACK OS LICENSE incl. [webstorm](https://www.jetbrains.com/webstorm)
+
+---
+
+
+
+## License
+
+Copyright (c) 2019 [Anthony Nahas](https://github.com/AnthonyNahas). Licensed under the MIT License (MIT)
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/angular.json b/angular.json
index 0b250b1..57b0806 100644
--- a/angular.json
+++ b/angular.json
@@ -25,7 +25,12 @@
"aot": false,
"assets": [
"src/favicon.ico",
- "src/assets"
+ "src/assets",
+ {
+ "glob": "**/*",
+ "input": "./node_modules/svg-country-flags/svg",
+ "output": "/assets/svg-country-flags/svg"
+ }
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
@@ -164,4 +169,4 @@
}
},
"defaultProject": "select-county"
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index 72364ca..f30132a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11479,6 +11479,11 @@
"has-flag": "^3.0.0"
}
},
+ "svg-country-flags": {
+ "version": "1.2.6",
+ "resolved": "https://registry.npmjs.org/svg-country-flags/-/svg-country-flags-1.2.6.tgz",
+ "integrity": "sha512-loHSF5qIEXoUgcXxLBlGG2eczDvqjzhyjdu2cIxcuHbJDGPUFBIsKnlp3N/+KBhaIZWbpksoczghkJsyJxbSGQ=="
+ },
"symbol-observable": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
diff --git a/package.json b/package.json
index da46ed5..c9a115e 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
"ng": "ng",
"start": "ng serve",
"build": "ng build",
+ "build:lib": "ng build @angular-material-extensions/select-country",
+ "build:lib:Watch": "ng build @angular-material-extensions/select-country --watch",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
@@ -23,6 +25,7 @@
"@angular/router": "~8.2.13",
"hammerjs": "^2.0.8",
"rxjs": "~6.4.0",
+ "svg-country-flags": "^1.2.6",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
diff --git a/projects/angular-material-extensions/select-country/package.json b/projects/angular-material-extensions/select-country/package.json
index 0e79389..f1803ce 100644
--- a/projects/angular-material-extensions/select-country/package.json
+++ b/projects/angular-material-extensions/select-country/package.json
@@ -1,8 +1,26 @@
{
"name": "@angular-material-extensions/select-country",
+ "description": "Angular Material component that allow users to select a county or nationality ",
"version": "0.0.1",
+ "author": {
+ "name": "anthonynahas",
+ "url": "https://github.com/anthonynahas"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/angular-material-extensions/select-country.git"
+ },
+ "license": "MIT",
+ "scripts": {
+ "build" : ""
+ },
"peerDependencies": {
"@angular/common": "^8.2.13",
- "@angular/core": "^8.2.13"
+ "@angular/core": "^8.2.13",
+ "@angular/cdk": "~8.2.3",
+ "@angular/material": "~8.2.3"
+ },
+ "engines": {
+ "node": ">=10.0.0"
}
-}
\ No newline at end of file
+}
diff --git a/projects/angular-material-extensions/select-country/src/lib/db.ts b/projects/angular-material-extensions/select-country/src/lib/db.ts
new file mode 100644
index 0000000..181f4cc
--- /dev/null
+++ b/projects/angular-material-extensions/select-country/src/lib/db.ts
@@ -0,0 +1,893 @@
+import {Country} from './mat-select-country.component';
+
+export const COUNTRIES_DB: Country[] =
+ [
+ {
+ name: 'Afghanistan',
+ alpha2Code: 'AF',
+ alpha3Code: 'AFG',
+ numericCode: '004'
+ },
+ {
+ name: 'Albania',
+ alpha2Code: 'AL',
+ alpha3Code: 'ALB',
+ numericCode: '008'
+ },
+ {
+ name: 'Algeria',
+ alpha2Code: 'DZ',
+ alpha3Code: 'DZA',
+ numericCode: '012'
+ },
+ {
+ name: 'American Samoa',
+ alpha2Code: 'AS',
+ alpha3Code: 'ASM',
+ numericCode: '016'
+ },
+ {
+ name: 'Andorra',
+ alpha2Code: 'AD',
+ alpha3Code: 'AND',
+ numericCode: '020'
+ },
+ {
+ name: 'Angola',
+ alpha2Code: 'AO',
+ alpha3Code: 'AGO',
+ numericCode: '024'
+ },
+ {
+ name: 'Argentina',
+ alpha2Code: 'AR',
+ alpha3Code: 'ARG',
+ numericCode: '032'
+ },
+ {
+ name: 'Australia',
+ alpha2Code: 'AU',
+ alpha3Code: 'AUS',
+ numericCode: '036'
+ },
+ {
+ name: 'Austria',
+ alpha2Code: 'AT',
+ alpha3Code: 'AUT',
+ numericCode: '040'
+ },
+ {
+ name: 'Azerbaijan',
+ alpha2Code: 'AZ',
+ alpha3Code: 'AZE',
+ numericCode: '031'
+ },
+ {
+ name: 'Bahamas',
+ alpha2Code: 'BS',
+ alpha3Code: 'BHS',
+ numericCode: '044'
+ },
+ {
+ name: 'Bahrain',
+ alpha2Code: 'BH',
+ alpha3Code: 'BHR',
+ numericCode: '048'
+ },
+ {
+ name: 'Bangladesh',
+ alpha2Code: 'BD',
+ alpha3Code: 'BGD',
+ numericCode: '050'
+ },
+ {
+ name: 'Barbados',
+ alpha2Code: 'BB',
+ alpha3Code: 'BRB',
+ numericCode: '052'
+ },
+ {
+ name: 'Belarus',
+ alpha2Code: 'BY',
+ alpha3Code: 'BLR',
+ numericCode: '112'
+ },
+ {
+ name: 'Belgium',
+ alpha2Code: 'BE',
+ alpha3Code: 'BEL',
+ numericCode: '056'
+ },
+ {
+ name: 'Belize',
+ alpha2Code: 'BZ',
+ alpha3Code: 'BLZ',
+ numericCode: '084'
+ },
+ {
+ name: 'Benin',
+ alpha2Code: 'BJ',
+ alpha3Code: 'BEN',
+ numericCode: '204'
+ },
+ {
+ name: 'Bermuda',
+ alpha2Code: 'BM',
+ alpha3Code: 'BMU',
+ numericCode: '060'
+ },
+ {
+ name: 'Bhutan',
+ alpha2Code: 'BT',
+ alpha3Code: 'BTN',
+ numericCode: '064'
+ },
+ {
+ name: 'Bolivia',
+ alpha2Code: 'BO',
+ alpha3Code: 'BOL',
+ numericCode: '068'
+ },
+ {
+ name: 'Bonaire, Sint Eustatius and Saba',
+ alpha2Code: 'BQ',
+ alpha3Code: 'BES',
+ numericCode: '535'
+ },
+ {
+ name: 'Bosnia and Herzegovina',
+ alpha2Code: 'BA',
+ alpha3Code: 'BIH',
+ numericCode: '070'
+ },
+ {
+ name: 'Botswana',
+ alpha2Code: 'BW',
+ alpha3Code: 'BWA',
+ numericCode: '072'
+ },
+ {
+ name: 'Bouvet Island',
+ alpha2Code: 'BV',
+ alpha3Code: 'BVT',
+ numericCode: '074'
+ },
+ {
+ name: 'Brazil',
+ alpha2Code: 'BR',
+ alpha3Code: 'BRA',
+ numericCode: '076'
+ },
+ {
+ name: 'Bulgaria',
+ alpha2Code: 'BG',
+ alpha3Code: 'BGR',
+ numericCode: '100'
+ },
+ {
+ name: 'Cabo Verde',
+ alpha2Code: 'CV',
+ alpha3Code: 'CPV',
+ numericCode: '132'
+ },
+ {
+ name: 'Cambodia',
+ alpha2Code: 'KH',
+ alpha3Code: 'KHM',
+ numericCode: '116'
+ },
+ {
+ name: 'Cameroon',
+ alpha2Code: 'CM',
+ alpha3Code: 'CMR',
+ numericCode: '120'
+ },
+ {
+ name: 'Canada',
+ alpha2Code: 'CA',
+ alpha3Code: 'CAN',
+ numericCode: '124'
+ },
+ {
+ name: 'Central African Republic',
+ alpha2Code: 'CF',
+ alpha3Code: 'CAF',
+ numericCode: '140'
+ },
+ {
+ name: 'Chile',
+ alpha2Code: 'CL',
+ alpha3Code: 'CHL',
+ numericCode: '152'
+ },
+ {
+ name: 'China',
+ alpha2Code: 'CN',
+ alpha3Code: 'CHN',
+ numericCode: '156'
+ },
+ {
+ name: 'Colombia',
+ alpha2Code: 'CO',
+ alpha3Code: 'COL',
+ numericCode: '170'
+ },
+ {
+ name: 'Congo',
+ alpha2Code: 'CD',
+ alpha3Code: 'COD',
+ numericCode: '180'
+ },
+ {
+ name: 'Costa Rica',
+ alpha2Code: 'CR',
+ alpha3Code: 'CRI',
+ numericCode: '188'
+ },
+ {
+ name: 'Croatia',
+ alpha2Code: 'HR',
+ alpha3Code: 'HRV',
+ numericCode: '191'
+ },
+ {
+ name: 'Cuba',
+ alpha2Code: 'CU',
+ alpha3Code: 'CUB',
+ numericCode: '192'
+ },
+ {
+ name: 'Cyprus',
+ alpha2Code: 'CY',
+ alpha3Code: 'CYP',
+ numericCode: '196'
+ },
+ {
+ name: 'Czechia',
+ alpha2Code: 'CZ',
+ alpha3Code: 'CZE',
+ numericCode: '203'
+ },
+ {
+ name: 'Côte d\'Ivoire',
+ alpha2Code: 'CI',
+ alpha3Code: 'CIV',
+ numericCode: '384'
+ },
+ {
+ name: 'Denmark',
+ alpha2Code: 'DK',
+ alpha3Code: 'DNK',
+ numericCode: '208'
+ },
+ {
+ name: 'Dominica',
+ alpha2Code: 'DM',
+ alpha3Code: 'DMA',
+ numericCode: '212'
+ },
+ {
+ name: 'Dominican Republic',
+ alpha2Code: 'DO',
+ alpha3Code: 'DOM',
+ numericCode: '214'
+ },
+ {
+ name: 'Ecuador',
+ alpha2Code: 'EC',
+ alpha3Code: 'ECU',
+ numericCode: '218'
+ },
+ {
+ name: 'Egypt',
+ alpha2Code: 'EG',
+ alpha3Code: 'EGY',
+ numericCode: '818'
+ },
+ {
+ name: 'El Salvador',
+ alpha2Code: 'SV',
+ alpha3Code: 'SLV',
+ numericCode: '222'
+ },
+ {
+ name: 'Equatorial Guinea',
+ alpha2Code: 'GQ',
+ alpha3Code: 'GNQ',
+ numericCode: '226'
+ },
+ {
+ name: 'Estonia',
+ alpha2Code: 'EE',
+ alpha3Code: 'EST',
+ numericCode: '233'
+ },
+ {
+ name: 'Ethiopia',
+ alpha2Code: 'ET',
+ alpha3Code: 'ETH',
+ numericCode: '231'
+ },
+ {
+ name: 'Finland',
+ alpha2Code: 'FI',
+ alpha3Code: 'FIN',
+ numericCode: '246'
+ },
+ {
+ name: 'France',
+ alpha2Code: 'FR',
+ alpha3Code: 'FRA',
+ numericCode: '250'
+ },
+ {
+ name: 'Georgia',
+ alpha2Code: 'GE',
+ alpha3Code: 'GEO',
+ numericCode: '268'
+ },
+ {
+ name: 'Germany',
+ alpha2Code: 'DE',
+ alpha3Code: 'DEU',
+ numericCode: '276'
+ },
+ {
+ name: 'Ghana',
+ alpha2Code: 'GH',
+ alpha3Code: 'GHA',
+ numericCode: '288'
+ },
+ {
+ name: 'Greece',
+ alpha2Code: 'GR',
+ alpha3Code: 'GRC',
+ numericCode: '300'
+ },
+ {
+ name: 'Greenland',
+ alpha2Code: 'GL',
+ alpha3Code: 'GRL',
+ numericCode: '304'
+ },
+ {
+ name: 'Guadeloupe',
+ alpha2Code: 'GP',
+ alpha3Code: 'GLP',
+ numericCode: '312'
+ },
+ {
+ name: 'Guatemala',
+ alpha2Code: 'GT',
+ alpha3Code: 'GTM',
+ numericCode: '320'
+ },
+ {
+ name: 'Guyana',
+ alpha2Code: 'GY',
+ alpha3Code: 'GUY',
+ numericCode: '328'
+ },
+ {
+ name: 'Haiti',
+ alpha2Code: 'HT',
+ alpha3Code: 'HTI',
+ numericCode: '332'
+ },
+ {
+ name: 'Hong Kong',
+ alpha2Code: 'HK',
+ alpha3Code: 'HKG',
+ numericCode: ''
+ },
+ {
+ name: 'Hungary',
+ alpha2Code: 'HU',
+ alpha3Code: 'HUN',
+ numericCode: '348'
+ },
+ {
+ name: 'Iceland',
+ alpha2Code: 'IS',
+ alpha3Code: 'ISL',
+ numericCode: '352'
+ },
+ {
+ name: 'India',
+ alpha2Code: 'IN',
+ alpha3Code: 'IND',
+ numericCode: '356'
+ },
+ {
+ name: 'Indonesia',
+ alpha2Code: 'ID',
+ alpha3Code: 'IDN',
+ numericCode: '360'
+ },
+ {
+ name: 'Iran',
+ alpha2Code: 'IR',
+ alpha3Code: 'IRN',
+ numericCode: '364'
+ },
+ {
+ name: 'Iraq',
+ alpha2Code: 'IQ',
+ alpha3Code: 'IRQ',
+ numericCode: '368'
+ },
+ {
+ name: 'Ireland',
+ alpha2Code: 'IE',
+ alpha3Code: 'IRL',
+ numericCode: '372'
+ },
+ {
+ name: 'Israel',
+ alpha2Code: 'IL',
+ alpha3Code: 'ISR',
+ numericCode: '376'
+ },
+ {
+ name: 'Italy',
+ alpha2Code: 'IT',
+ alpha3Code: 'ITA',
+ numericCode: '380'
+ },
+ {
+ name: 'Jamaica',
+ alpha2Code: 'JM',
+ alpha3Code: 'JAM',
+ numericCode: '388'
+ },
+ {
+ name: 'Japan',
+ alpha2Code: 'JP',
+ alpha3Code: 'JPN',
+ numericCode: '392'
+ },
+ {
+ name: 'Jersey',
+ alpha2Code: 'JE',
+ alpha3Code: 'JEY',
+ numericCode: '832'
+ },
+ {
+ name: 'Jordan',
+ alpha2Code: 'JO',
+ alpha3Code: 'JOR',
+ numericCode: '400'
+ },
+ {
+ name: 'Kazakhstan',
+ alpha2Code: 'KZ',
+ alpha3Code: 'KAZ',
+ numericCode: '398'
+ },
+ {
+ name: 'Kenya',
+ alpha2Code: 'KE',
+ alpha3Code: 'KEN',
+ numericCode: '404'
+ },
+ {
+ name: 'Korea (the Democratic People\'s Republic of)',
+ alpha2Code: 'KP',
+ alpha3Code: 'PRK',
+ numericCode: '408'
+ },
+ {
+ name: 'Korea (the Republic of)\t',
+ alpha2Code: 'KR',
+ alpha3Code: 'KOR',
+ numericCode: '410'
+ },
+ {
+ name: 'Kuwait',
+ alpha2Code: 'KW',
+ alpha3Code: 'KWT',
+ numericCode: '414'
+ },
+ {
+ name: 'Kyrgyzstan',
+ alpha2Code: 'KG',
+ alpha3Code: 'KGZ',
+ numericCode: '417'
+ },
+ {
+ name: 'Latvia',
+ alpha2Code: 'LV',
+ alpha3Code: 'LVA',
+ numericCode: '428'
+ },
+ {
+ name: 'Lebanon',
+ alpha2Code: 'LB',
+ alpha3Code: 'LBN',
+ numericCode: '422'
+ },
+ {
+ name: 'Liberia',
+ alpha2Code: 'LR',
+ alpha3Code: 'LBR',
+ numericCode: '430'
+ },
+ {
+ name: 'Libya',
+ alpha2Code: 'LY',
+ alpha3Code: 'LBY',
+ numericCode: '434'
+ },
+ {
+ name: 'Liechtenstein',
+ alpha2Code: 'LI',
+ alpha3Code: 'LIE',
+ numericCode: '438'
+ },
+ {
+ name: 'Lithuania',
+ alpha2Code: 'LT',
+ alpha3Code: 'LTU',
+ numericCode: '440'
+ },
+ {
+ name: 'Luxembourg',
+ alpha2Code: 'LU',
+ alpha3Code: 'LUX',
+ numericCode: '442'
+ },
+ {
+ name: 'Macao',
+ alpha2Code: 'MO',
+ alpha3Code: 'MAC',
+ numericCode: '446'
+ },
+ {
+ name: 'Madagascar',
+ alpha2Code: 'MG',
+ alpha3Code: 'MDG',
+ numericCode: '450'
+ },
+ {
+ name: 'Malaysia',
+ alpha2Code: 'MY',
+ alpha3Code: 'MYS',
+ numericCode: ''
+ },
+ {
+ name: 'Maldives',
+ alpha2Code: 'MV',
+ alpha3Code: 'MDV',
+ numericCode: '462'
+ },
+ {
+ name: 'Mali',
+ alpha2Code: 'ML',
+ alpha3Code: 'MLI',
+ numericCode: '466'
+ },
+ {
+ name: 'Malta',
+ alpha2Code: 'MT',
+ alpha3Code: 'MLT',
+ numericCode: '470'
+ },
+ {
+ name: 'Mexico',
+ alpha2Code: 'MX',
+ alpha3Code: 'MEX',
+ numericCode: '484'
+ },
+ {
+ name: 'Monaco',
+ alpha2Code: 'MC',
+ alpha3Code: 'MCO',
+ numericCode: '492'
+ },
+ {
+ name: 'Mongolia',
+ alpha2Code: 'MN',
+ alpha3Code: 'MNG',
+ numericCode: '496'
+ },
+ {
+ name: 'Montenegro',
+ alpha2Code: 'ME',
+ alpha3Code: 'MNE',
+ numericCode: '499'
+ },
+ {
+ name: 'Morocco',
+ alpha2Code: 'MA',
+ alpha3Code: 'MAR',
+ numericCode: '504'
+ },
+ {
+ name: 'Namibia',
+ alpha2Code: 'NA',
+ alpha3Code: 'NAM',
+ numericCode: '516'
+ },
+ {
+ name: 'Nepal',
+ alpha2Code: 'NP',
+ alpha3Code: 'NPL',
+ numericCode: '524'
+ },
+ {
+ name: 'Netherlands',
+ alpha2Code: 'NL',
+ alpha3Code: 'NLD',
+ numericCode: '528'
+ },
+ {
+ name: 'New Caledonia',
+ alpha2Code: 'NC',
+ alpha3Code: 'NCL',
+ numericCode: '540'
+ },
+ {
+ name: 'New Zealand',
+ alpha2Code: 'NZ',
+ alpha3Code: 'NZL',
+ numericCode: '554'
+ },
+ {
+ name: 'Nigeria',
+ alpha2Code: 'NG',
+ alpha3Code: 'NGA',
+ numericCode: '556'
+ },
+ {
+ name: 'Norway',
+ alpha2Code: 'NO',
+ alpha3Code: 'NOR',
+ numericCode: '578'
+ },
+ {
+ name: 'Oman',
+ alpha2Code: 'OM',
+ alpha3Code: 'OMN',
+ numericCode: '512'
+ },
+ {
+ name: 'Pakistan',
+ alpha2Code: 'PK',
+ alpha3Code: 'PAK',
+ numericCode: '586'
+ },
+ {
+ name: 'Palestine',
+ alpha2Code: 'PS',
+ alpha3Code: 'PSE',
+ numericCode: '275'
+ },
+ {
+ name: 'Paraguay',
+ alpha2Code: 'PY',
+ alpha3Code: 'PRY',
+ numericCode: '600'
+ },
+ {
+ name: 'Peru',
+ alpha2Code: 'PE',
+ alpha3Code: 'PER',
+ numericCode: '604'
+ },
+ {
+ name: 'Philippines',
+ alpha2Code: 'PH',
+ alpha3Code: 'PHL',
+ numericCode: '608'
+ },
+ {
+ name: 'Poland',
+ alpha2Code: 'PL',
+ alpha3Code: 'POL',
+ numericCode: '616'
+ },
+ {
+ name: 'Portugal',
+ alpha2Code: 'PT',
+ alpha3Code: 'PRT',
+ numericCode: '620'
+ },
+ {
+ name: 'Puerto Rico',
+ alpha2Code: 'PR',
+ alpha3Code: 'PRI',
+ numericCode: '630'
+ },
+ {
+ name: 'Qatar',
+ alpha2Code: 'QA',
+ alpha3Code: 'QAT',
+ numericCode: '634'
+ },
+ {
+ name: 'Republic of North Macedonia',
+ alpha2Code: 'MK',
+ alpha3Code: 'MKD',
+ numericCode: '807'
+ },
+ {
+ name: 'Romania',
+ alpha2Code: 'RO',
+ alpha3Code: 'ROU',
+ numericCode: '642'
+ },
+ {
+ name: 'Russian Federation (the)',
+ alpha2Code: 'RU',
+ alpha3Code: 'RUS',
+ numericCode: '643'
+ },
+ {
+ name: 'San Marino',
+ alpha2Code: 'SM',
+ alpha3Code: 'SMR',
+ numericCode: '674'
+ },
+ {
+ name: 'Saudi Arabia',
+ alpha2Code: 'SA',
+ alpha3Code: 'SAU',
+ numericCode: '682'
+ },
+ {
+ name: 'Senegal',
+ alpha2Code: 'SN',
+ alpha3Code: 'SEN',
+ numericCode: '686'
+ },
+ {
+ name: 'Serbia',
+ alpha2Code: 'RS',
+ alpha3Code: 'SRB',
+ numericCode: '688'
+ },
+ {
+ name: 'Singapore',
+ alpha2Code: 'SG',
+ alpha3Code: 'SGP',
+ numericCode: '702'
+ },
+ {
+ name: 'Slovakia',
+ alpha2Code: 'SK',
+ alpha3Code: 'SVK',
+ numericCode: '703'
+ },
+ {
+ name: 'Slovenia',
+ alpha2Code: 'SI',
+ alpha3Code: 'SVN',
+ numericCode: '705'
+ },
+ {
+ name: 'Somalia',
+ alpha2Code: 'SO',
+ alpha3Code: 'SOM',
+ numericCode: '706'
+ },
+ {
+ name: 'South Africa',
+ alpha2Code: 'ZA',
+ alpha3Code: 'ZAF',
+ numericCode: '710'
+ },
+ {
+ name: 'Spain',
+ alpha2Code: 'ES',
+ alpha3Code: 'ESP',
+ numericCode: '724'
+ },
+ {
+ name: 'Sri Lanka',
+ alpha2Code: 'LK',
+ alpha3Code: 'LKA',
+ numericCode: '144'
+ },
+ {
+ name: 'Sudan',
+ alpha2Code: 'SD',
+ alpha3Code: 'SDN',
+ numericCode: '729'
+ },
+ {
+ name: 'Sweden',
+ alpha2Code: 'SE',
+ alpha3Code: 'SWE',
+ numericCode: '752'
+ },
+ {
+ name: 'Switzerland',
+ alpha2Code: 'CH',
+ alpha3Code: 'CHE',
+ numericCode: '756'
+ },
+ {
+ name: 'Syrian Arab Republic',
+ alpha2Code: 'SY',
+ alpha3Code: 'SYR',
+ numericCode: '760'
+ },
+ {
+ name: 'Taiwan',
+ alpha2Code: 'TW',
+ alpha3Code: 'TWN',
+ numericCode: '158'
+ },
+ {
+ name: 'Thailand',
+ alpha2Code: 'TH',
+ alpha3Code: 'THA',
+ numericCode: '764'
+ },
+ {
+ name: 'Tunisia',
+ alpha2Code: 'TN',
+ alpha3Code: 'TUN',
+ numericCode: '788'
+ },
+ {
+ name: 'Turkey',
+ alpha2Code: 'TR',
+ alpha3Code: 'TUR',
+ numericCode: '792'
+ },
+ {
+ name: 'Ukraine',
+ alpha2Code: 'UA',
+ alpha3Code: 'UKR',
+ numericCode: '804'
+ },
+ {
+ name: 'United Arab Emirates',
+ alpha2Code: 'AE',
+ alpha3Code: 'ARE',
+ numericCode: '784'
+ },
+ {
+ name: 'United Kingdom',
+ alpha2Code: 'GB',
+ alpha3Code: 'GBR',
+ numericCode: '826'
+ },
+ {
+ name: 'United States of America',
+ alpha2Code: 'US',
+ alpha3Code: 'USA',
+ numericCode: '840'
+ },
+ {
+ name: 'Uruguay',
+ alpha2Code: 'UY',
+ alpha3Code: 'URY',
+ numericCode: '858'
+ },
+ {
+ name: 'Venezuela',
+ alpha2Code: 'VE',
+ alpha3Code: 'VEN',
+ numericCode: '862'
+ },
+ {
+ name: 'Vietnam',
+ alpha2Code: 'VN',
+ alpha3Code: 'VNM',
+ numericCode: '704'
+ },
+ {
+ name: 'Yemen',
+ alpha2Code: 'YE',
+ alpha3Code: 'YEM',
+ numericCode: '887'
+ },
+ {
+ name: 'Zimbabwe',
+ alpha2Code: 'ZW',
+ alpha3Code: 'ZWE',
+ numericCode: '716'
+ },
+ ];
diff --git a/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.html b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.html
new file mode 100644
index 0000000..638e599
--- /dev/null
+++ b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.html
@@ -0,0 +1,14 @@
+
diff --git a/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.scss b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/angular-material-extensions/select-country/src/lib/select-country.component.spec.ts b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.spec.ts
similarity index 57%
rename from projects/angular-material-extensions/select-country/src/lib/select-country.component.spec.ts
rename to projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.spec.ts
index cdaad09..eed705a 100644
--- a/projects/angular-material-extensions/select-country/src/lib/select-country.component.spec.ts
+++ b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.spec.ts
@@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { SelectCountryComponent } from './select-country.component';
+import { MatSelectCountryComponent } from './mat-select-country.component';
describe('SelectCountryComponent', () => {
- let component: SelectCountryComponent;
- let fixture: ComponentFixture;
+ let component: MatSelectCountryComponent;
+ let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ SelectCountryComponent ]
+ declarations: [ MatSelectCountryComponent ]
})
.compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(SelectCountryComponent);
+ fixture = TestBed.createComponent(MatSelectCountryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts
new file mode 100644
index 0000000..f6edfbb
--- /dev/null
+++ b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts
@@ -0,0 +1,36 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {COUNTRIES_DB} from './db';
+
+/**
+ * Country interface ISO 3166
+ */
+export interface Country {
+ name: string;
+ alpha2Code: string;
+ alpha3Code: string;
+ numericCode: string;
+}
+
+@Component({
+ selector: 'mat-select-country',
+ templateUrl: 'mat-select-country.component.html',
+ styleUrls: ['mat-select-country.component.scss']
+})
+export class MatSelectCountryComponent implements OnInit {
+
+ countries: Country[] = COUNTRIES_DB;
+ myControl = new FormControl();
+ options: string[] = ['One', 'Two', 'Three'];
+ // @Input() menuItems: MatMenuButtonItem[] = [];
+ @Input() height: string;
+
+ @Output() onCountrySelected: EventEmitter = new EventEmitter();
+
+ // selectedMenuItem: MatMenuButtonItem;
+
+ ngOnInit() {
+ }
+
+
+}
diff --git a/projects/angular-material-extensions/select-country/src/lib/mat-select-country.module.ts b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.module.ts
new file mode 100644
index 0000000..230577b
--- /dev/null
+++ b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.module.ts
@@ -0,0 +1,46 @@
+import {NgModule} from '@angular/core';
+import {MatSelectCountryComponent} from './mat-select-country.component';
+import {MatAutocompleteModule, MatButtonModule, MatIconModule, MatIconRegistry, MatInputModule, MatMenuModule} from '@angular/material';
+import {CommonModule} from '@angular/common';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {HttpClientModule} from '@angular/common/http';
+import {DomSanitizer} from '@angular/platform-browser';
+import {COUNTRIES_DB} from './db';
+
+
+/**
+ * @author Anthony Nahas
+ * @since 06.11.19
+ */
+@NgModule({
+ declarations: [MatSelectCountryComponent],
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ HttpClientModule,
+ MatButtonModule,
+ MatMenuModule,
+ MatInputModule,
+ MatAutocompleteModule,
+ MatIconModule
+ // FlexLayoutModule
+ ],
+ exports: [MatSelectCountryComponent]
+})
+export class MatSelectCountryModule {
+
+ constructor(private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
+ this.registerCountries();
+ }
+
+ registerCountries() {
+ for (const country of COUNTRIES_DB) {
+ const countryAlpha2Code = country.alpha2Code.toLowerCase();
+ this.iconRegistry
+ .addSvgIcon(countryAlpha2Code, this.sanitizer
+ .bypassSecurityTrustResourceUrl(`assets/svg-country-flags/svg/${countryAlpha2Code}.svg`));
+ }
+ }
+
+}
diff --git a/projects/angular-material-extensions/select-country/src/lib/select-country.component.ts b/projects/angular-material-extensions/select-country/src/lib/select-country.component.ts
deleted file mode 100644
index e2c5aee..0000000
--- a/projects/angular-material-extensions/select-country/src/lib/select-country.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'mat-select-country',
- template: `
-
- select-country works!
-
- `,
- styles: []
-})
-export class SelectCountryComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit() {
- }
-
-}
diff --git a/projects/angular-material-extensions/select-country/src/lib/select-country.module.ts b/projects/angular-material-extensions/select-country/src/lib/select-country.module.ts
deleted file mode 100644
index 7aa1a1f..0000000
--- a/projects/angular-material-extensions/select-country/src/lib/select-country.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { SelectCountryComponent } from './select-country.component';
-
-
-
-@NgModule({
- declarations: [SelectCountryComponent],
- imports: [
- ],
- exports: [SelectCountryComponent]
-})
-export class SelectCountryModule { }
diff --git a/projects/angular-material-extensions/select-country/src/lib/select-country.service.spec.ts b/projects/angular-material-extensions/select-country/src/lib/select-country.service.spec.ts
index 4068334..3820d02 100644
--- a/projects/angular-material-extensions/select-country/src/lib/select-country.service.spec.ts
+++ b/projects/angular-material-extensions/select-country/src/lib/select-country.service.spec.ts
@@ -1,12 +1,12 @@
import { TestBed } from '@angular/core/testing';
-import { SelectCountryService } from './select-country.service';
+import { MatSelectCountryService } from './mat-select-country.service';
describe('SelectCountryService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
- const service: SelectCountryService = TestBed.get(SelectCountryService);
+ const service: MatSelectCountryService = TestBed.get(MatSelectCountryService);
expect(service).toBeTruthy();
});
});
diff --git a/projects/angular-material-extensions/select-country/src/lib/select-country.service.ts b/projects/angular-material-extensions/select-country/src/lib/select-country.service.ts
deleted file mode 100644
index 56bd9c7..0000000
--- a/projects/angular-material-extensions/select-country/src/lib/select-country.service.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
- providedIn: 'root'
-})
-export class SelectCountryService {
-
- constructor() { }
-}
diff --git a/projects/angular-material-extensions/select-country/src/public-api.ts b/projects/angular-material-extensions/select-country/src/public-api.ts
index de05dda..051d1c8 100644
--- a/projects/angular-material-extensions/select-country/src/public-api.ts
+++ b/projects/angular-material-extensions/select-country/src/public-api.ts
@@ -2,6 +2,6 @@
* Public API Surface of select-country
*/
-export * from './lib/select-country.service';
-export * from './lib/select-country.component';
-export * from './lib/select-country.module';
+export * from './lib/mat-select-country.service';
+export * from './lib/mat-select-country.component';
+export * from './lib/mat-select-country.module';
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 06c7342..a8f530b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,11 +1,15 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
-const routes: Routes = [];
+const routes: Routes =
+ [
+
+ ];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7feacad..6aacba5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -305,7 +305,7 @@
Welcome
-
+