From 4fe14336e0d9ae2d397cf721bb1fb35783901381 Mon Sep 17 00:00:00 2001 From: Anthony Nahas Date: Tue, 12 Nov 2019 22:19:47 +0100 Subject: [PATCH] fix(demo): updated the demo app --- angular.json | 8 +- package-lock.json | 87 ++++++++- package.json | 2 + src/app/app.component.html | 292 ++++++++++++++++++++--------- src/app/app.component.ts | 7 +- src/app/app.module.ts | 4 + src/assets/github-circle.svg | 1 + src/assets/library.svg | 1 + src/assets/md/e1.md | 24 +++ src/assets/md/import.md | 24 +++ src/assets/npm-variant-outline.svg | 1 + 11 files changed, 361 insertions(+), 90 deletions(-) create mode 100644 src/assets/github-circle.svg create mode 100644 src/assets/library.svg create mode 100644 src/assets/md/e1.md create mode 100644 src/assets/md/import.md create mode 100644 src/assets/npm-variant-outline.svg diff --git a/angular.json b/angular.json index 57b0806..6741a8f 100644 --- a/angular.json +++ b/angular.json @@ -33,10 +33,14 @@ } ], "styles": [ + "src/styles.scss", "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", - "src/styles.scss" + "./node_modules/prismjs/themes/prism-okaidia.css" ], - "scripts": [] + "scripts": [ + "./node_modules/prismjs/prism.js", + "./node_modules/prismjs/components/prism-typescript.min.js" + ] }, "configurations": { "production": { diff --git a/package-lock.json b/package-lock.json index f30132a..5c4ea48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1010,6 +1010,14 @@ "tslib": "^1.9.0" } }, + "@angular/flex-layout": { + "version": "8.0.0-beta.27", + "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-8.0.0-beta.27.tgz", + "integrity": "sha512-qmpvQPesU4ZQ56IscwgmVRpK2UnyV+gwvXUql7TMv0QV215hLcHczjGsrKkLfW2By5E7XEyDat9br72uVXcPMw==", + "requires": { + "tslib": "^1.7.1" + } + }, "@angular/forms": { "version": "8.2.13", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-8.2.13.tgz", @@ -1969,6 +1977,11 @@ "@types/jasmine": "*" } }, + "@types/marked": { + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/@types/marked/-/marked-0.6.5.tgz", + "integrity": "sha512-6kBKf64aVfx93UJrcyEZ+OBM5nGv4RLsI6sR1Ar34bpgvGVRoyTgpxn4ZmtxOM5aDTAaaznYuYUH8bUX3Nk3YA==" + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -3570,6 +3583,17 @@ "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", "dev": true }, + "clipboard": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz", + "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==", + "optional": true, + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "cliui": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", @@ -3710,8 +3734,7 @@ "commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" }, "commondir": { "version": "1.0.1", @@ -4407,6 +4430,12 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", + "optional": true + }, "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -5626,6 +5655,15 @@ } } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "optional": true, + "requires": { + "delegate": "^3.1.2" + } + }, "got": { "version": "9.6.0", "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz", @@ -7725,6 +7763,14 @@ "source-map-support": "^0.5.5" } }, + "katex": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/katex/-/katex-0.11.1.tgz", + "integrity": "sha512-5oANDICCTX0NqYIyAiFCCwjQ7ERu3DQG2JFHLbYOf+fXaMoH8eg/zOq5WSYJsKMi/QebW+Eh3gSM+oss1H/bww==", + "requires": { + "commander": "^2.19.0" + } + }, "keyv": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz", @@ -8017,6 +8063,11 @@ "object-visit": "^1.0.0" } }, + "marked": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz", + "integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==" + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -8478,6 +8529,18 @@ } } }, + "ngx-markdown": { + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/ngx-markdown/-/ngx-markdown-8.2.1.tgz", + "integrity": "sha512-59LG8rEoOwDsZyyJckp+QDnW/c5wMaRpNkb6TWktlBVTfQKyAYHr6BuSskVbZ4y8nsj54UQg0CDFLBOfUiqOwA==", + "requires": { + "@types/marked": "^0.6.5", + "katex": "^0.11.1", + "marked": "^0.7.0", + "prismjs": "^1.16.0", + "tslib": "^1.9.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -9395,6 +9458,14 @@ "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=", "dev": true }, + "prismjs": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz", + "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==", + "requires": { + "clipboard": "^2.0.0" + } + }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -10384,6 +10455,12 @@ "ajv-keywords": "^3.1.0" } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "optional": true + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -11656,6 +11733,12 @@ "setimmediate": "^1.0.4" } }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", + "optional": true + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index c9a115e..ecb27c1 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,14 @@ "@angular/common": "~8.2.13", "@angular/compiler": "~8.2.13", "@angular/core": "~8.2.13", + "@angular/flex-layout": "^8.0.0-beta.27", "@angular/forms": "~8.2.13", "@angular/material": "^8.2.3", "@angular/platform-browser": "~8.2.13", "@angular/platform-browser-dynamic": "~8.2.13", "@angular/router": "~8.2.13", "hammerjs": "^2.0.8", + "ngx-markdown": "^8.2.1", "rxjs": "~6.4.0", "svg-country-flags": "^1.2.6", "tslib": "^1.10.0", diff --git a/src/app/app.component.html b/src/app/app.component.html index 6aacba5..2784705 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -191,7 +191,7 @@ } .terminal pre { - font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; + font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; color: white; padding: 0 1rem 1rem; margin: 0; @@ -235,17 +235,17 @@ align-items: center; font-size: 12px; padding: 3px 10px; - border: 1px solid rgba(27,31,35,.2); + border: 1px solid rgba(27, 31, 35, .2); border-radius: 3px; - background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); + background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%); margin-left: 4px; font-weight: 600; - font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .github-star-badge:hover { - background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%); - border-color: rgba(27,31,35,.35); + background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%); + border-color: rgba(27, 31, 35, .35); background-position: -.5em; } @@ -267,7 +267,7 @@ /* Responsive Styles */ @media screen and (max-width: 767px) { - .card-container > *:not(.circle-link) , + .card-container > *:not(.circle-link), .terminal { width: 100%; } @@ -302,11 +302,12 @@ alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" /> - Welcome -
+ @angular-material-extensions/select-country +
-
- + - + - - + + - {{ title }} app is running! + {{ title }} demo app is running! - - + +
@@ -354,31 +365,80 @@

Resources

Here are some links to help you get started:

- - + + + + - Learn Angular + Github repository - + + + + - + + + - CLI Documentation + Library Documentation - + + + - - + + + + - Angular Blog + npm - + + +
+
+ + +

Install

+

run the following command in your favorite terminal to install the library

+ + +
+ 
ng add @angular-material-extensions/select-country
+
+ + + +
+ +
+ + +

Usage

+

Try it now

+ +
+ + +
+ + + +

For more info, please read the official readme - see the link below

+ +
+

Next Steps

What do you want to do next with your app?

@@ -387,31 +447,41 @@

Next Steps

- + + + New Component
- + + + Angular Material
- + + + Add Dependency
- + + + Run and Watch Tests
- + + + Build for Production
@@ -419,85 +489,126 @@

Next Steps

- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add _____
- 
ng test
- 
ng build --prod
+ 
ng generate component xyz
+ 
ng add @angular/material
+ 
ng add _____
+ 
ng test
+ 
ng build --prod
- - - - - - - + + + + + + + - + - - - - - + + + + + - + - - + + - + - + - + - - - + + + - - - + + + - - + + - + - - - - + + + + @@ -507,20 +618,29 @@

Next Steps

 - - + +
@@ -534,5 +654,7 @@

Next Steps

- + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 519a058..7b70665 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; +import {Country} from '@angular-material-extensions/select-country'; @Component({ selector: 'app-root', @@ -7,4 +8,8 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'select-county'; + + onCountrySelected($event: Country) { + console.log($event); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7836268..c7a4ae5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,6 +5,8 @@ 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'; +import {MarkdownModule} from 'ngx-markdown'; +import {FlexLayoutModule} from '@angular/flex-layout'; @NgModule({ declarations: [ @@ -14,6 +16,8 @@ import {HttpClientModule} from '@angular/common/http'; BrowserAnimationsModule, HttpClientModule, AppRoutingModule, + FlexLayoutModule, + MarkdownModule.forRoot(), MatSelectCountryModule, ], providers: [], diff --git a/src/assets/github-circle.svg b/src/assets/github-circle.svg new file mode 100644 index 0000000..0ca5611 --- /dev/null +++ b/src/assets/github-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/library.svg b/src/assets/library.svg new file mode 100644 index 0000000..6303593 --- /dev/null +++ b/src/assets/library.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/md/e1.md b/src/assets/md/e1.md new file mode 100644 index 0000000..9b00e3d --- /dev/null +++ b/src/assets/md/e1.md @@ -0,0 +1,24 @@ +```html + + +``` + +```typescript +import {Component} from '@angular/core'; +import {Country} from '@angular-material-extensions/select-country'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent { + title = 'select-county'; + + onCountrySelected($event: Country) { + console.log($event); + } +} + +``` diff --git a/src/assets/md/import.md b/src/assets/md/import.md new file mode 100644 index 0000000..8c5d812 --- /dev/null +++ b/src/assets/md/import.md @@ -0,0 +1,24 @@ +```typescript +import {NgModule} from '@angular/core'; +import {AppComponent} from './app.component'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {MatSelectCountryModule} from '@angular-material-extensions/select-country'; + + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserAnimationsModule, + MatSelectCountryModule, // <-- import the library + // (will be automatically imported if you use angular schematics) + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { +} + + +``` diff --git a/src/assets/npm-variant-outline.svg b/src/assets/npm-variant-outline.svg new file mode 100644 index 0000000..dd1de44 --- /dev/null +++ b/src/assets/npm-variant-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file