diff --git a/README.md b/README.md index 4bc18f0..239bbe9 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,214 @@ -# SelectCounty +

+ angular-material-extensions's logo +

-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 +

+ @angular-material-extensions/select-country demonstration +

-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 @@ +
+ + + + + + + {{country.alpha3Code}} + + + +
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
- + - + @@ -534,5 +534,5 @@

Next Steps

- - \ No newline at end of file + + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ac4ed4c..7836268 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,9 +1,10 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {NgModule} from '@angular/core'; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; +import {AppRoutingModule} from './app-routing.module'; +import {AppComponent} from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {MatSelectCountryModule} from '@angular-material-extensions/select-country'; +import {HttpClientModule} from '@angular/common/http'; @NgModule({ declarations: [ @@ -11,9 +12,12 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; ], imports: [ BrowserAnimationsModule, - AppRoutingModule + HttpClientModule, + AppRoutingModule, + MatSelectCountryModule, ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { +}