├── src ├── assets │ └── .gitkeep ├── favicon.ico ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── app │ ├── app.routes.ts │ ├── new-message │ │ ├── new-message.component.scss │ │ └── new-message.component.ts │ ├── message │ │ ├── message.component.scss │ │ └── message.component.ts │ ├── app.module.ts │ ├── data.ts │ ├── app.component.scss │ └── app.component.ts ├── typings.d.ts ├── tsconfig.app.json ├── main.ts ├── tsconfig.spec.json ├── index.html ├── styles.scss ├── test.ts └── polyfills.ts ├── .gitignore ├── docs ├── favicon.ico ├── screenshot.png ├── index.html ├── inline.bundle.js.map ├── inline.bundle.js ├── main.bundle.js.map ├── main.bundle.js └── styles.bundle.js ├── e2e ├── app.po.ts ├── tsconfig.e2e.json └── app.e2e-spec.ts ├── README.md ├── tsconfig.json ├── protractor.conf.js ├── karma.conf.js ├── .angular-cli.json ├── package.json └── tslint.json /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_STORE -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amcdnl/material-inbox/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amcdnl/material-inbox/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amcdnl/material-inbox/HEAD/docs/screenshot.png -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Material Inbox 2 | 3 | ![img](/docs/screenshot.png) 4 | 5 | Material Inbox is a example project based on Angular and Angular Material. 6 | 7 | ## Getting Started 8 | To run the project locally, follow the steps below. 9 | 10 | - Clone the repo 11 | - `npm i` 12 | - `npm start` 13 | - Browse to [http://localhost:4200](http://localhost:4200) 14 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('material-examples App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import 'hammerjs'; 2 | import { enableProdMode } from '@angular/core'; 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 4 | 5 | import { AppModule } from './app/app.module'; 6 | import { environment } from './environments/environment'; 7 | 8 | if (environment.production) { 9 | enableProdMode(); 10 | } 11 | 12 | platformBrowserDynamic().bootstrapModule(AppModule); 13 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts" 15 | ], 16 | "include": [ 17 | "**/*.spec.ts", 18 | "**/*.d.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "target": "es5", 11 | "typeRoots": [ 12 | "node_modules/@types" 13 | ], 14 | "lib": [ 15 | "es2017", 16 | "dom" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Inbox 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import '~@angular/material/theming'; 3 | 4 | @include mat-core(); 5 | 6 | body, html { 7 | padding: 0; 8 | margin: 0; 9 | height: 100%; 10 | font-family: Roboto, "Helvetica Neue", sans-serif; 11 | background: #f2f2f2; 12 | } 13 | 14 | $inbox-app-primary: mat-palette($mat-blue); 15 | $inbox-app-accent: mat-palette($mat-pink, A200, A100, A400); 16 | $inbox-app-warn: mat-palette($mat-red); 17 | $inbox-app-theme: mat-light-theme($inbox-app-primary, $inbox-app-accent, $inbox-app-warn); 18 | 19 | @include angular-material-theme($inbox-app-theme); 20 | -------------------------------------------------------------------------------- /src/app/new-message/new-message.component.scss: -------------------------------------------------------------------------------- 1 | $toolbar-bg: #424242; 2 | $toolbar-color: #FFF; 3 | 4 | .new-message-toolbar { 5 | background: $toolbar-bg; 6 | color: $toolbar-color; 7 | padding: 11px 20px; 8 | position: relative; 9 | margin: -24px; 10 | 11 | .mat-icon { 12 | vertical-align: middle; 13 | } 14 | 15 | .mat-icon-button { 16 | position: absolute; 17 | top: 5px; 18 | right: 5px; 19 | } 20 | } 21 | 22 | .recipients-list { 23 | width: 100%; 24 | } 25 | 26 | .subject-input { 27 | width: 100%; 28 | } 29 | 30 | .new-message-content { 31 | padding: 24px; 32 | } 33 | 34 | .body-input { 35 | width: 100%; 36 | } 37 | 38 | .new-message-btns { 39 | text-align: right; 40 | } 41 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Inbox 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | reports: [ 'html', 'lcovonly' ], 20 | fixWebpackSourcePaths: true 21 | }, 22 | angularCli: { 23 | environment: 'dev' 24 | }, 25 | reporters: ['progress', 'kjhtml'], 26 | port: 9876, 27 | colors: true, 28 | logLevel: config.LOG_INFO, 29 | autoWatch: true, 30 | browsers: ['Chrome'], 31 | singleRun: false 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare const __karma__: any; 17 | declare const require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /src/app/message/message.component.scss: -------------------------------------------------------------------------------- 1 | app-message { 2 | 3 | .mat-card { 4 | color: #212121; 5 | padding: 0; 6 | 7 | .btn-col { 8 | text-align: right; 9 | } 10 | } 11 | 12 | .message-toolbar { 13 | padding: 12px 24px; 14 | width: 100%; 15 | cursor: pointer; 16 | } 17 | 18 | .message-subject { 19 | line-height: 40px; 20 | } 21 | 22 | .mat-content { 23 | margin: 0 -24px; 24 | } 25 | 26 | &.message-opened { 27 | .message-toolbar { 28 | border-bottom: solid 1px #e0e0e0; 29 | 30 | .message-subject { 31 | font-size: 110%; 32 | font-weight: 100; 33 | } 34 | } 35 | } 36 | 37 | .message-body { 38 | position: relative; 39 | padding: 20px 24px; 40 | 41 | .message-from { 42 | font-weight: bold; 43 | } 44 | 45 | .message-body-toolbar { 46 | margin-bottom: 10px; 47 | } 48 | 49 | .message-to { 50 | color: #7a7a7a; 51 | } 52 | 53 | .message-more { 54 | position: absolute; 55 | top: 5px; 56 | right: 5px; 57 | } 58 | } 59 | 60 | } 61 | 62 | .message-more-menu { 63 | width: 200px; 64 | } 65 | 66 | .snooze-menu { 67 | width: 200px; 68 | 69 | h3 { 70 | padding: 0 15px; 71 | margin: 5px 0; 72 | } 73 | 74 | button { 75 | font-size: 85%; 76 | } 77 | } -------------------------------------------------------------------------------- /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "material-example" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "styles.scss" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json" 40 | }, 41 | { 42 | "project": "src/tsconfig.spec.json" 43 | }, 44 | { 45 | "project": "e2e/tsconfig.e2e.json" 46 | } 47 | ], 48 | "test": { 49 | "karma": { 50 | "config": "./karma.conf.js" 51 | } 52 | }, 53 | "defaults": { 54 | "styleExt": "scss", 55 | "component": {} 56 | } 57 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-examples", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^4.4.5", 16 | "@angular/cdk": "^2.0.0-beta.11", 17 | "@angular/common": "^4.4.5", 18 | "@angular/compiler": "^4.4.5", 19 | "@angular/core": "^4.4.5", 20 | "@angular/flex-layout": "^2.0.0-beta.9", 21 | "@angular/forms": "^4.4.5", 22 | "@angular/http": "^4.4.5", 23 | "@angular/material": "^2.0.0-beta.11", 24 | "@angular/platform-browser": "^4.4.5", 25 | "@angular/platform-browser-dynamic": "^4.4.5", 26 | "@angular/router": "^4.4.5", 27 | "core-js": "^2.4.1", 28 | "hammerjs": "^2.0.8", 29 | "rxjs": "^5.4.2", 30 | "zone.js": "^0.8.14" 31 | }, 32 | "devDependencies": { 33 | "@angular/cli": "^1.4.7", 34 | "@angular/compiler-cli": "^4.4.5", 35 | "@angular/language-service": "^4.4.5", 36 | "@types/jasmine": "^2.6.0", 37 | "@types/jasminewd2": "~2.0.2", 38 | "@types/node": "^8.0.41", 39 | "codelyzer": "^3.2.1", 40 | "jasmine-core": "^2.8.0", 41 | "jasmine-spec-reporter": "^4.2.1", 42 | "karma": "~1.7.0", 43 | "karma-chrome-launcher": "^2.2.0", 44 | "karma-cli": "~1.0.1", 45 | "karma-coverage-istanbul-reporter": "^1.2.1", 46 | "karma-jasmine": "~1.1.0", 47 | "karma-jasmine-html-reporter": "^0.2.2", 48 | "protractor": "~5.1.2", 49 | "ts-node": "^3.3.0", 50 | "tslint": "^5.7.0", 51 | "typescript": "^2.5.2" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 4 | import { RouterModule } from '@angular/router'; 5 | import { ReactiveFormsModule } from '@angular/forms'; 6 | import { 7 | MatSidenavModule, MatToolbarModule, MatButtonModule, MatIconModule, 8 | MATERIAL_COMPATIBILITY_MODE, MatCardModule, MatMenuModule, MatTooltipModule, 9 | MatDialogModule, MatChipsModule, MatAutocompleteModule, MatFormFieldModule, 10 | MatInputModule, MatSnackBarModule, MatSlideToggleModule, MatExpansionModule 11 | } from '@angular/material'; 12 | import { FlexLayoutModule } from '@angular/flex-layout'; 13 | 14 | import { AppComponent } from './app.component'; 15 | import { MessageComponent } from './message/message.component'; 16 | import { NewMessageComponent } from './new-message/new-message.component'; 17 | import { routes } from './app.routes'; 18 | 19 | @NgModule({ 20 | declarations: [ 21 | AppComponent, 22 | MessageComponent, 23 | NewMessageComponent 24 | ], 25 | imports: [ 26 | BrowserModule, 27 | BrowserAnimationsModule, 28 | ReactiveFormsModule, 29 | RouterModule.forRoot(routes, { 30 | useHash: false 31 | }), 32 | FlexLayoutModule, 33 | MatSidenavModule, 34 | MatToolbarModule, 35 | MatButtonModule, 36 | MatIconModule, 37 | MatCardModule, 38 | MatMenuModule, 39 | MatTooltipModule, 40 | MatDialogModule, 41 | MatChipsModule, 42 | MatAutocompleteModule, 43 | MatFormFieldModule, 44 | MatInputModule, 45 | MatSnackBarModule, 46 | MatExpansionModule, 47 | MatSlideToggleModule 48 | ], 49 | entryComponents: [ 50 | NewMessageComponent 51 | ], 52 | providers: [ 53 | { provide: MATERIAL_COMPATIBILITY_MODE, useValue: true } 54 | ], 55 | bootstrap: [AppComponent] 56 | }) 57 | export class AppModule { } 58 | -------------------------------------------------------------------------------- /src/app/data.ts: -------------------------------------------------------------------------------- 1 | export const messages = [ 2 | { 3 | recieved: new Date(), 4 | avatar: 'A', 5 | from: 'Austin McDaniel', 6 | subject: 'Angular is a open-source framework for building web applications', 7 | body: ` 8 |

Learn one way to build applications with Angular and reuse your code and abilities to build 9 | apps for any deployment target. For web, mobile web, native mobile and native desktop. 10 | Learn one way to build applications with Angular and reuse your code and abilities to build 11 | apps for any deployment target. For web, mobile web, native mobile and native desktop. 12 | Learn one way to build applications with Angular and reuse your code and abilities to build 13 | apps for any deployment target. For web, mobile web, native mobile and native desktop.

14 | 15 |

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.

16 | 17 |

Angular puts you in control over scalability. Meet huge data requirements by building data 18 | models on RxJS, Immutable.js or another push-model. 19 | Angular puts you in control over scalability. Meet huge data requirements by building data 20 | models on RxJS, Immutable.js or another push-model. 21 | Angular puts you in control over scalability. Meet huge data requirements by building data 22 | models on RxJS, Immutable.js or another push-model.

23 | ` 24 | }, 25 | { 26 | recieved: new Date(), 27 | avatar: 'J', 28 | from: 'Jeremy Elbourn', 29 | subject: 'Angular Material is a open-source UI framework based on Material design spec', 30 | body: ` 31 |

Learn one way to build applications with Angular and reuse your code and abilities to build 32 | apps for any deployment target. For web, mobile web, native mobile and native desktop.

33 | 34 |

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.

35 | 36 |

Angular puts you in control over scalability. Meet huge data requirements by building data 37 | models on RxJS, Immutable.js or another push-model.

38 | ` 39 | } 40 | ]; 41 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | $search-bar-bg: #6097f6; 2 | $search-bar-color: #FFF; 3 | 4 | $avatar-bg: #7b1fa2; 5 | $avatar-color: #FFF; 6 | 7 | .sidenav-nav { 8 | width: 250px; 9 | padding: 5px; 10 | 11 | mat-list, 12 | mat-list-item, 13 | mat-list-item button { 14 | display: block; 15 | width: 100%; 16 | } 17 | 18 | mat-list-item { 19 | button { 20 | text-align: left; 21 | padding: 10px 20px; 22 | color: #656565; 23 | } 24 | 25 | mat-icon { 26 | margin-right: 10px; 27 | } 28 | } 29 | } 30 | 31 | .sidenav-content { 32 | height: 100%; 33 | } 34 | 35 | .sidenav-container { 36 | height: 100%; 37 | } 38 | 39 | .primary-toolbar { 40 | transition: background .15s; 41 | box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28); 42 | } 43 | 44 | content { 45 | display: block; 46 | width: 85%; 47 | margin: 30px auto; 48 | font-size: 90%; 49 | } 50 | 51 | .category-title { 52 | display: block; 53 | color: #616161; 54 | line-height: 24px; 55 | margin: 20px 0 8px; 56 | padding: 0 24px; 57 | } 58 | 59 | hr { 60 | border-top: solid 1px #e0e0e0; 61 | border-bottom: none; 62 | } 63 | 64 | .new-fab.mat-fab { 65 | position: absolute; 66 | right: 25px; 67 | bottom: 25px; 68 | } 69 | 70 | .search-col { 71 | line-height: 62px; 72 | text-align: center; 73 | } 74 | 75 | .search-bar { 76 | background: $search-bar-bg; 77 | border-radius: 2px; 78 | min-width: 144px; 79 | outline: none; 80 | color: $search-bar-color; 81 | border: none; 82 | height: 38px; 83 | line-height: 38px; 84 | width: 100%; 85 | padding: 0 30px; 86 | font-weight: 100; 87 | font-size: 80%; 88 | max-width: 550px; 89 | margin: 0 auto; 90 | 91 | &::placeholder { 92 | color: $search-bar-color; 93 | } 94 | 95 | &::before { 96 | box-shadow: inset -24px 0 12px -12px #898984; 97 | transition: box-shadow .15s; 98 | } 99 | } 100 | 101 | .mat-toolbar-layout { 102 | width: 100%; 103 | } 104 | 105 | .pin-toggle { 106 | margin-left: 10px; 107 | } 108 | 109 | .avatar { 110 | display: inline-block; 111 | border-radius: 50%; 112 | height: 28px; 113 | width: 28px; 114 | color: $avatar-color; 115 | text-align: center; 116 | line-height: 28px; 117 | font-size: 12px; 118 | background: $avatar-bg; 119 | 120 | &.large { 121 | height: 32px; 122 | width: 32px; 123 | line-height: 32px; 124 | } 125 | } 126 | 127 | .avatar-col { 128 | text-align: right; 129 | } 130 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** Evergreen browsers require these. **/ 41 | import 'core-js/es6/reflect'; 42 | import 'core-js/es7/reflect'; 43 | 44 | 45 | /** 46 | * Required to support Web Animations `@angular/animation`. 47 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 48 | **/ 49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 50 | 51 | 52 | 53 | /*************************************************************************************************** 54 | * Zone JS is required by Angular itself. 55 | */ 56 | import 'zone.js/dist/zone'; // Included with Angular CLI. 57 | 58 | 59 | 60 | /*************************************************************************************************** 61 | * APPLICATION IMPORTS 62 | */ 63 | 64 | /** 65 | * Date, currency, decimal and percent pipes. 66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 67 | */ 68 | // import 'intl'; // Run `npm install --save intl`. 69 | /** 70 | * Need to import at least one locale-data with intl. 71 | */ 72 | // import 'intl/locale-data/jsonp/en'; 73 | import 'rxjs/add/operator/startWith'; 74 | import 'rxjs/add/operator/map'; 75 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "eofline": true, 15 | "forin": true, 16 | "import-blacklist": [ 17 | true, 18 | "rxjs" 19 | ], 20 | "import-spacing": true, 21 | "indent": [ 22 | true, 23 | "spaces" 24 | ], 25 | "interface-over-type-literal": true, 26 | "label-position": true, 27 | "max-line-length": [ 28 | true, 29 | 140 30 | ], 31 | "member-access": false, 32 | "member-ordering": [ 33 | true, 34 | { 35 | "order": [ 36 | "static-field", 37 | "instance-field", 38 | "static-method", 39 | "instance-method" 40 | ] 41 | } 42 | ], 43 | "no-arg": true, 44 | "no-bitwise": true, 45 | "no-console": [ 46 | true, 47 | "debug", 48 | "info", 49 | "time", 50 | "timeEnd", 51 | "trace" 52 | ], 53 | "no-construct": true, 54 | "no-debugger": true, 55 | "no-duplicate-super": true, 56 | "no-empty": false, 57 | "no-empty-interface": true, 58 | "no-eval": true, 59 | "no-inferrable-types": [ 60 | true, 61 | "ignore-params" 62 | ], 63 | "no-misused-new": true, 64 | "no-non-null-assertion": true, 65 | "no-shadowed-variable": true, 66 | "no-string-literal": false, 67 | "no-string-throw": true, 68 | "no-switch-case-fall-through": true, 69 | "no-trailing-whitespace": true, 70 | "no-unnecessary-initializer": true, 71 | "no-unused-expression": true, 72 | "no-use-before-declare": true, 73 | "no-var-keyword": true, 74 | "object-literal-sort-keys": false, 75 | "one-line": [ 76 | true, 77 | "check-open-brace", 78 | "check-catch", 79 | "check-else", 80 | "check-whitespace" 81 | ], 82 | "prefer-const": true, 83 | "quotemark": [ 84 | true, 85 | "single" 86 | ], 87 | "radix": true, 88 | "semicolon": [ 89 | true, 90 | "always" 91 | ], 92 | "triple-equals": [ 93 | true, 94 | "allow-null-check" 95 | ], 96 | "typedef-whitespace": [ 97 | true, 98 | { 99 | "call-signature": "nospace", 100 | "index-signature": "nospace", 101 | "parameter": "nospace", 102 | "property-declaration": "nospace", 103 | "variable-declaration": "nospace" 104 | } 105 | ], 106 | "typeof-compare": true, 107 | "unified-signatures": true, 108 | "variable-name": false, 109 | "whitespace": [ 110 | true, 111 | "check-branch", 112 | "check-decl", 113 | "check-operator", 114 | "check-separator", 115 | "check-type" 116 | ], 117 | "directive-selector": [ 118 | true, 119 | "attribute", 120 | "app", 121 | "camelCase" 122 | ], 123 | "component-selector": [ 124 | true, 125 | "element", 126 | "app", 127 | "kebab-case" 128 | ], 129 | "use-input-property-decorator": true, 130 | "use-output-property-decorator": true, 131 | "use-host-property-decorator": true, 132 | "no-input-rename": true, 133 | "no-output-rename": true, 134 | "use-life-cycle-interface": true, 135 | "use-pipe-transform-interface": true, 136 | "component-class-suffix": true, 137 | "directive-class-suffix": true, 138 | "no-access-missing-member": true, 139 | "templates-use-public": true, 140 | "invoke-injectable": true 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /src/app/new-message/new-message.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewEncapsulation, ViewChild, Inject } from '@angular/core'; 2 | import { FormControl } from '@angular/forms'; 3 | import { ENTER } from '@angular/cdk/keycodes'; 4 | import { MatChipInputEvent, MAT_DIALOG_DATA, MatAutocompleteSelectedEvent } from '@angular/material'; 5 | import { Observable } from 'rxjs/Observable'; 6 | 7 | const COMMA = 188; 8 | 9 | @Component({ 10 | selector: 'app-new-message', 11 | encapsulation: ViewEncapsulation.None, 12 | template: ` 13 |
14 | drafts 15 | 18 |
19 | 20 | 21 | 22 | 27 | {{recipient}} 28 | cancel 29 | 30 | 41 | 42 | 43 | 44 | {{ option }} 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 59 | 60 | `, 61 | styleUrls: ['./new-message.component.scss'] 62 | }) 63 | export class NewMessageComponent { 64 | 65 | separatorKeysCodes = [ENTER, COMMA]; 66 | 67 | contacts: string[] = [ 68 | 'Austin Mcdaniel', 69 | 'Jeremy Elbourn', 70 | 'Jules Kremer', 71 | 'Brad Green', 72 | 'Tina Gao' 73 | ]; 74 | recipients: string[] = []; 75 | subjectCtrl = new FormControl(); 76 | bodyCtrl = new FormControl(); 77 | recipientsCtrl = new FormControl(); 78 | filteredContacts: Observable; 79 | 80 | @ViewChild('recipientInput') recipientInput; 81 | 82 | constructor(@Inject(MAT_DIALOG_DATA) public data: any) { 83 | if (data.to && data.subject) { 84 | this.recipients.push(data.to); 85 | this.subjectCtrl.setValue(data.subject); 86 | } 87 | 88 | this.filteredContacts = this.recipientsCtrl.valueChanges 89 | .startWith(null) 90 | .map(contact => contact ? this.filterContacts(contact) : this.contacts.slice()); 91 | } 92 | 93 | addRecipient(event: MatChipInputEvent): void { 94 | const input = event.input; 95 | const value = event.value; 96 | 97 | // Add our person 98 | if ((value || '').trim()) { 99 | this.recipients.push(value.trim()); 100 | } 101 | 102 | // Reset the input value 103 | if (input) { 104 | input.value = ''; 105 | } 106 | } 107 | 108 | removeRecipient(recipient: string): void { 109 | const index = this.recipients.indexOf(recipient); 110 | if (index >= 0) { 111 | this.recipients.splice(index, 1); 112 | } 113 | } 114 | 115 | filterContacts(name: string): string[] { 116 | return this.contacts.filter(contact => 117 | contact.toLowerCase().indexOf(name.toLowerCase()) === 0); 118 | } 119 | 120 | onOptionSelected(event: MatAutocompleteSelectedEvent): void { 121 | this.recipients.push(event.option.value); 122 | this.recipientInput.nativeElement.value = ''; 123 | } 124 | 125 | } 126 | -------------------------------------------------------------------------------- /src/app/message/message.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, HostBinding, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-message', 5 | encapsulation: ViewEncapsulation.None, 6 | template: ` 7 | 8 | 9 | 10 |
14 |
15 | 16 | {{avatar}} 17 | 18 |
19 |
20 | {{from}} 21 |
22 |
23 | {{subject}} 24 |
25 |
26 | 33 | 34 |

Snooze until...

35 |
36 | 40 | 44 | 48 | 49 | 52 | 55 |
56 |
57 | 58 |
59 |
60 | 61 | {{avatar}} 62 | 63 |
64 |
65 |
66 | {{from}} to me 67 | 70 | 71 | 75 | 79 |
80 | 84 | 85 |
86 |
87 |
88 |
89 | 90 | 91 | `, 92 | styleUrls: ['./message.component.scss'] 93 | }) 94 | export class MessageComponent { 95 | 96 | @HostBinding('class.message-opened') 97 | @Input() opened = false; 98 | 99 | @Input() avatar = ''; 100 | @Input() from = ''; 101 | @Input() subject = ''; 102 | @Input() body = ''; 103 | @Input() recieved = new Date(); 104 | 105 | @Output() removed = new EventEmitter(); 106 | @Output() reply = new EventEmitter<{ to: string, subject: string }>(); 107 | 108 | onOpenToggle(): void { 109 | this.opened = !this.opened; 110 | } 111 | 112 | onReply(): void { 113 | this.reply.emit({ 114 | to: this.from, 115 | subject: `RE: ${this.subject}` 116 | }); 117 | } 118 | 119 | } 120 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewEncapsulation } from '@angular/core'; 2 | import { MatDialog, MatSnackBar } from '@angular/material'; 3 | import { messages } from './data'; 4 | import { NewMessageComponent } from './new-message/new-message.component'; 5 | 6 | @Component({ 7 | selector: 'app-root', 8 | template: ` 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 23 | 24 | 25 | 29 | 30 | 31 |
32 | 33 | 34 | 38 | 39 | 40 | 44 | 45 | 46 | 50 | 51 | 52 | 53 |
54 | 55 |
56 | 59 |
60 |
61 | Inbox 62 |
63 |
64 | 65 | 66 |
67 |
68 | 69 | AM 70 | 71 |
72 | 73 | 74 | 75 | 76 | Today 77 | 78 | 79 | 87 | 88 | 89 | 90 | 91 | 100 |
101 | 102 | `, 103 | encapsulation: ViewEncapsulation.None, 104 | styleUrls: ['./app.component.scss'] 105 | }) 106 | export class AppComponent { 107 | 108 | messages = messages; 109 | 110 | constructor( 111 | private snackBar: MatSnackBar, 112 | private dialog: MatDialog) {} 113 | 114 | onRemove(index: number): void { 115 | const copy = [...this.messages]; 116 | copy.splice(index, 1); 117 | this.messages = copy; 118 | } 119 | 120 | onNewMessage(data: any = {}): void { 121 | const dialogRef = this.dialog.open(NewMessageComponent, { 122 | width: '75%', 123 | panelClass: 'new-message-dialog', 124 | data 125 | }); 126 | 127 | dialogRef.afterClosed().subscribe(result => { 128 | if (result) { 129 | this.snackBar.open('Email sent!', null, { 130 | duration: 2000 131 | }); 132 | } 133 | }); 134 | } 135 | 136 | } 137 | -------------------------------------------------------------------------------- /docs/inline.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack/bootstrap 9231c34fd0078e6609ef"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAY,2BAA2B;AACvC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,kDAA0C,WAAW,EAAE;AACvD;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAI;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA,kDAA0C,oBAAoB,WAAW","file":"inline.bundle.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t\"inline\": 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tvar installedChunkData = installedChunks[chunkId];\n \t\tif(installedChunkData === 0) {\n \t\t\treturn new Promise(function(resolve) { resolve(); });\n \t\t}\n\n \t\t// a Promise means \"currently loading\".\n \t\tif(installedChunkData) {\n \t\t\treturn installedChunkData[2];\n \t\t}\n\n \t\t// setup Promise in chunk cache\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunkData = installedChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunkData[2] = promise;\n\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = 'text/javascript';\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"\" + chunkId + \".chunk.js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) {\n \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\t}\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n \t\thead.appendChild(script);\n\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 9231c34fd0078e6609ef"],"sourceRoot":"webpack:///"} -------------------------------------------------------------------------------- /docs/inline.bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // install a JSONP callback for chunk loading 3 | /******/ var parentJsonpFunction = window["webpackJsonp"]; 4 | /******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) { 5 | /******/ // add "moreModules" to the modules object, 6 | /******/ // then flag all "chunkIds" as loaded and fire callback 7 | /******/ var moduleId, chunkId, i = 0, resolves = [], result; 8 | /******/ for(;i < chunkIds.length; i++) { 9 | /******/ chunkId = chunkIds[i]; 10 | /******/ if(installedChunks[chunkId]) { 11 | /******/ resolves.push(installedChunks[chunkId][0]); 12 | /******/ } 13 | /******/ installedChunks[chunkId] = 0; 14 | /******/ } 15 | /******/ for(moduleId in moreModules) { 16 | /******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { 17 | /******/ modules[moduleId] = moreModules[moduleId]; 18 | /******/ } 19 | /******/ } 20 | /******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules); 21 | /******/ while(resolves.length) { 22 | /******/ resolves.shift()(); 23 | /******/ } 24 | /******/ if(executeModules) { 25 | /******/ for(i=0; i < executeModules.length; i++) { 26 | /******/ result = __webpack_require__(__webpack_require__.s = executeModules[i]); 27 | /******/ } 28 | /******/ } 29 | /******/ return result; 30 | /******/ }; 31 | /******/ 32 | /******/ // The module cache 33 | /******/ var installedModules = {}; 34 | /******/ 35 | /******/ // objects to store loaded and loading chunks 36 | /******/ var installedChunks = { 37 | /******/ "inline": 0 38 | /******/ }; 39 | /******/ 40 | /******/ // The require function 41 | /******/ function __webpack_require__(moduleId) { 42 | /******/ 43 | /******/ // Check if module is in cache 44 | /******/ if(installedModules[moduleId]) { 45 | /******/ return installedModules[moduleId].exports; 46 | /******/ } 47 | /******/ // Create a new module (and put it into the cache) 48 | /******/ var module = installedModules[moduleId] = { 49 | /******/ i: moduleId, 50 | /******/ l: false, 51 | /******/ exports: {} 52 | /******/ }; 53 | /******/ 54 | /******/ // Execute the module function 55 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 56 | /******/ 57 | /******/ // Flag the module as loaded 58 | /******/ module.l = true; 59 | /******/ 60 | /******/ // Return the exports of the module 61 | /******/ return module.exports; 62 | /******/ } 63 | /******/ 64 | /******/ // This file contains only the entry chunk. 65 | /******/ // The chunk loading function for additional chunks 66 | /******/ __webpack_require__.e = function requireEnsure(chunkId) { 67 | /******/ var installedChunkData = installedChunks[chunkId]; 68 | /******/ if(installedChunkData === 0) { 69 | /******/ return new Promise(function(resolve) { resolve(); }); 70 | /******/ } 71 | /******/ 72 | /******/ // a Promise means "currently loading". 73 | /******/ if(installedChunkData) { 74 | /******/ return installedChunkData[2]; 75 | /******/ } 76 | /******/ 77 | /******/ // setup Promise in chunk cache 78 | /******/ var promise = new Promise(function(resolve, reject) { 79 | /******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; 80 | /******/ }); 81 | /******/ installedChunkData[2] = promise; 82 | /******/ 83 | /******/ // start chunk loading 84 | /******/ var head = document.getElementsByTagName('head')[0]; 85 | /******/ var script = document.createElement('script'); 86 | /******/ script.type = 'text/javascript'; 87 | /******/ script.charset = 'utf-8'; 88 | /******/ script.async = true; 89 | /******/ script.timeout = 120000; 90 | /******/ 91 | /******/ if (__webpack_require__.nc) { 92 | /******/ script.setAttribute("nonce", __webpack_require__.nc); 93 | /******/ } 94 | /******/ script.src = __webpack_require__.p + "" + chunkId + ".chunk.js"; 95 | /******/ var timeout = setTimeout(onScriptComplete, 120000); 96 | /******/ script.onerror = script.onload = onScriptComplete; 97 | /******/ function onScriptComplete() { 98 | /******/ // avoid mem leaks in IE. 99 | /******/ script.onerror = script.onload = null; 100 | /******/ clearTimeout(timeout); 101 | /******/ var chunk = installedChunks[chunkId]; 102 | /******/ if(chunk !== 0) { 103 | /******/ if(chunk) { 104 | /******/ chunk[1](new Error('Loading chunk ' + chunkId + ' failed.')); 105 | /******/ } 106 | /******/ installedChunks[chunkId] = undefined; 107 | /******/ } 108 | /******/ }; 109 | /******/ head.appendChild(script); 110 | /******/ 111 | /******/ return promise; 112 | /******/ }; 113 | /******/ 114 | /******/ // expose the modules object (__webpack_modules__) 115 | /******/ __webpack_require__.m = modules; 116 | /******/ 117 | /******/ // expose the module cache 118 | /******/ __webpack_require__.c = installedModules; 119 | /******/ 120 | /******/ // define getter function for harmony exports 121 | /******/ __webpack_require__.d = function(exports, name, getter) { 122 | /******/ if(!__webpack_require__.o(exports, name)) { 123 | /******/ Object.defineProperty(exports, name, { 124 | /******/ configurable: false, 125 | /******/ enumerable: true, 126 | /******/ get: getter 127 | /******/ }); 128 | /******/ } 129 | /******/ }; 130 | /******/ 131 | /******/ // getDefaultExport function for compatibility with non-harmony modules 132 | /******/ __webpack_require__.n = function(module) { 133 | /******/ var getter = module && module.__esModule ? 134 | /******/ function getDefault() { return module['default']; } : 135 | /******/ function getModuleExports() { return module; }; 136 | /******/ __webpack_require__.d(getter, 'a', getter); 137 | /******/ return getter; 138 | /******/ }; 139 | /******/ 140 | /******/ // Object.prototype.hasOwnProperty.call 141 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 142 | /******/ 143 | /******/ // __webpack_public_path__ 144 | /******/ __webpack_require__.p = ""; 145 | /******/ 146 | /******/ // on error function for async loading 147 | /******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; 148 | /******/ }) 149 | /************************************************************************/ 150 | /******/ ([]); 151 | //# sourceMappingURL=inline.bundle.js.map -------------------------------------------------------------------------------- /docs/main.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["/Users/austin/dev/material-example/src/$_gendir lazy","/Users/austin/dev/material-example/src/app/app.component.scss","/Users/austin/dev/material-example/src/app/app.component.ts","/Users/austin/dev/material-example/src/app/app.module.ts","/Users/austin/dev/material-example/src/app/app.routes.ts","/Users/austin/dev/material-example/src/app/data.ts","/Users/austin/dev/material-example/src/app/message/message.component.scss","/Users/austin/dev/material-example/src/app/message/message.component.ts","/Users/austin/dev/material-example/src/app/new-message/new-message.component.scss","/Users/austin/dev/material-example/src/app/new-message/new-message.component.ts","/Users/austin/dev/material-example/src/environments/environment.ts","/Users/austin/dev/material-example/src/main.ts"],"names":[],"mappings":"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","file":"main.bundle.js","sourcesContent":["function webpackEmptyAsyncContext(req) {\n\t// Here Promise.resolve().then() is used instead of new Promise() to prevent\n\t// uncatched exception popping up in devtools\n\treturn Promise.resolve().then(function() {\n\t\tthrow new Error(\"Cannot find module '\" + req + \"'.\");\n\t});\n}\nwebpackEmptyAsyncContext.keys = function() { return []; };\nwebpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;\nmodule.exports = webpackEmptyAsyncContext;\nwebpackEmptyAsyncContext.id = \"../../../../../src/$$_gendir lazy recursive\";\n\n\n//////////////////\n// WEBPACK FOOTER\n// /Users/austin/dev/material-example/src/$$_gendir lazy\n// module id = ../../../../../src/$$_gendir lazy recursive\n// module chunks = main","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".sidenav-nav {\\n width: 250px;\\n padding: 5px; }\\n .sidenav-nav mat-list,\\n .sidenav-nav mat-list-item,\\n .sidenav-nav mat-list-item button {\\n display: block;\\n width: 100%; }\\n .sidenav-nav mat-list-item button {\\n text-align: left;\\n padding: 10px 20px;\\n color: #656565; }\\n .sidenav-nav mat-list-item mat-icon {\\n margin-right: 10px; }\\n\\n.sidenav-content {\\n height: 100%; }\\n\\n.sidenav-container {\\n height: 100%; }\\n\\n.primary-toolbar {\\n transition: background .15s;\\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); }\\n\\ncontent {\\n display: block;\\n width: 85%;\\n margin: 30px auto;\\n font-size: 90%; }\\n\\n.category-title {\\n display: block;\\n color: #616161;\\n line-height: 24px;\\n margin: 20px 0 8px;\\n padding: 0 24px; }\\n\\nhr {\\n border-top: solid 1px #e0e0e0;\\n border-bottom: none; }\\n\\n.new-fab.mat-fab {\\n position: absolute;\\n right: 25px;\\n bottom: 25px; }\\n\\n.search-col {\\n line-height: 62px;\\n text-align: center; }\\n\\n.search-bar {\\n background: #6097f6;\\n border-radius: 2px;\\n min-width: 144px;\\n outline: none;\\n color: #FFF;\\n border: none;\\n height: 38px;\\n line-height: 38px;\\n width: 100%;\\n padding: 0 30px;\\n font-weight: 100;\\n font-size: 80%;\\n max-width: 550px;\\n margin: 0 auto; }\\n .search-bar::-webkit-input-placeholder {\\n color: #FFF; }\\n .search-bar:-ms-input-placeholder {\\n color: #FFF; }\\n .search-bar::placeholder {\\n color: #FFF; }\\n .search-bar::before {\\n box-shadow: inset -24px 0 12px -12px #898984;\\n transition: box-shadow .15s; }\\n\\n.mat-toolbar-layout {\\n width: 100%; }\\n\\n.pin-toggle {\\n margin-left: 10px; }\\n\\n.avatar {\\n display: inline-block;\\n border-radius: 50%;\\n height: 28px;\\n width: 28px;\\n color: #FFF;\\n text-align: center;\\n line-height: 28px;\\n font-size: 12px; }\\n .avatar.accent-1 {\\n background: #7b1fa2; }\\n .avatar.large {\\n height: 32px;\\n width: 32px;\\n line-height: 32px; }\\n\\n.avatar-col {\\n text-align: right; }\\n\", \"\"]);\n\n// exports\n\n\n/*** EXPORTS FROM exports-loader ***/\nmodule.exports = module.exports.toString();\n\n\n//////////////////\n// WEBPACK FOOTER\n// /Users/austin/dev/material-example/src/app/app.component.scss\n// module id = ../../../../../src/app/app.component.scss\n// module chunks = main","import { Component, ViewEncapsulation } from '@angular/core';\nimport { MatDialog, MatSnackBar } from '@angular/material';\nimport { messages } from './data';\nimport { NewMessageComponent } from './new-message/new-message.component';\n\n@Component({\n selector: 'app-root',\n template: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n
\n Inbox\n
\n
\n \n \n
\n
\n \n AM\n \n
\n \n \n \n \n Today\n \n \n \n \n \n \n \n \n add\n \n
\n \n `,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n\n messages = messages;\n\n constructor(\n private snackBar: MatSnackBar,\n private dialog: MatDialog) {}\n\n onRemove(index: number): void {\n const copy = [...this.messages];\n copy.splice(index, 1);\n this.messages = copy;\n }\n\n onNewMessage(data: any = {}): void {\n const dialogRef = this.dialog.open(NewMessageComponent, {\n width: '75%',\n panelClass: 'new-message-dialog',\n data\n });\n\n dialogRef.afterClosed().subscribe(result => {\n if (result) {\n this.snackBar.open('Email sent!', null, {\n duration: 2000\n });\n }\n });\n }\n\n}\n\n\n\n// WEBPACK FOOTER //\n// /Users/austin/dev/material-example/src/app/app.component.ts","import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterModule } from '@angular/router';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport {\n MatSidenavModule, MatToolbarModule, MatButtonModule, MatIconModule,\n MATERIAL_COMPATIBILITY_MODE, MatCardModule, MatMenuModule, MatTooltipModule,\n MatDialogModule, MatChipsModule, MatAutocompleteModule, MatFormFieldModule,\n MatInputModule, MatSnackBarModule, MatSlideToggleModule, MatExpansionModule\n} from '@angular/material';\nimport { FlexLayoutModule } from '@angular/flex-layout';\n\nimport { AppComponent } from './app.component';\nimport { MessageComponent } from './message/message.component';\nimport { NewMessageComponent } from './new-message/new-message.component';\nimport { routes } from './app.routes';\n\n@NgModule({\n declarations: [\n AppComponent,\n MessageComponent,\n NewMessageComponent\n ],\n imports: [\n BrowserModule,\n BrowserAnimationsModule,\n ReactiveFormsModule,\n RouterModule.forRoot(routes, {\n useHash: false\n }),\n FlexLayoutModule,\n MatSidenavModule,\n MatToolbarModule,\n MatButtonModule,\n MatIconModule,\n MatCardModule,\n MatMenuModule,\n MatTooltipModule,\n MatDialogModule,\n MatChipsModule,\n MatAutocompleteModule,\n MatFormFieldModule,\n MatInputModule,\n MatSnackBarModule,\n MatExpansionModule,\n MatSlideToggleModule\n ],\n entryComponents: [\n NewMessageComponent\n ],\n providers: [\n { provide: MATERIAL_COMPATIBILITY_MODE, useValue: true }\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n\n\n// WEBPACK FOOTER //\n// /Users/austin/dev/material-example/src/app/app.module.ts","import { Routes } from '@angular/router';\n\nexport const routes: Routes = [];\n\n\n\n// WEBPACK FOOTER //\n// /Users/austin/dev/material-example/src/app/app.routes.ts","export const messages = [\n {\n recieved: new Date(),\n avatar: 'A',\n from: 'Austin McDaniel',\n subject: 'Angular is a open-source framework for building web applications',\n body: `\n

Learn one way to build applications with Angular and reuse your code and abilities to build\n apps for any deployment target. For web, mobile web, native mobile and native desktop.\n Learn one way to build applications with Angular and reuse your code and abilities to build\n apps for any deployment target. For web, mobile web, native mobile and native desktop.\n Learn one way to build applications with Angular and reuse your code and abilities to build\n apps for any deployment target. For web, mobile web, native mobile and native desktop.

\n\n

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.

\n\n

Angular puts you in control over scalability. Meet huge data requirements by building data\n models on RxJS, Immutable.js or another push-model.\n Angular puts you in control over scalability. Meet huge data requirements by building data\n models on RxJS, Immutable.js or another push-model.\n Angular puts you in control over scalability. Meet huge data requirements by building data\n models on RxJS, Immutable.js or another push-model.

\n `\n },\n {\n recieved: new Date(),\n avatar: 'J',\n from: 'Jeremy Elbourn',\n subject: 'Angular Material is a open-source UI framework based on Material design spec',\n body: `\n

Learn one way to build applications with Angular and reuse your code and abilities to build\n apps for any deployment target. For web, mobile web, native mobile and native desktop.

\n\n

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.

\n\n

Angular puts you in control over scalability. Meet huge data requirements by building data\n models on RxJS, Immutable.js or another push-model.

\n `\n }\n];\n\n\n\n// WEBPACK FOOTER //\n// /Users/austin/dev/material-example/src/app/data.ts","exports = module.exports = require(\"../../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \"app-message .mat-card {\\n color: #212121;\\n padding: 0; }\\n app-message .mat-card .btn-col {\\n text-align: right; }\\n\\napp-message .message-toolbar {\\n padding: 12px 24px;\\n width: 100%;\\n cursor: pointer; }\\n\\napp-message .message-subject {\\n line-height: 40px; }\\n\\napp-message .mat-content {\\n margin: 0 -24px; }\\n\\napp-message.message-opened .message-toolbar {\\n border-bottom: solid 1px #e0e0e0; }\\n app-message.message-opened .message-toolbar .message-subject {\\n font-size: 110%;\\n font-weight: 100; }\\n\\napp-message .message-body {\\n position: relative;\\n padding: 20px 24px; }\\n app-message .message-body .message-from {\\n font-weight: bold; }\\n app-message .message-body .message-body-toolbar {\\n margin-bottom: 10px; }\\n app-message .message-body .message-to {\\n color: #7a7a7a; }\\n app-message .message-body .message-more {\\n position: absolute;\\n top: 5px;\\n right: 5px; }\\n\\n.message-more-menu {\\n width: 200px; }\\n\\n.snooze-menu {\\n width: 200px; }\\n .snooze-menu h3 {\\n padding: 0 15px;\\n margin: 5px 0; }\\n .snooze-menu button {\\n font-size: 85%; }\\n\", \"\"]);\n\n// exports\n\n\n/*** EXPORTS FROM exports-loader ***/\nmodule.exports = module.exports.toString();\n\n\n//////////////////\n// WEBPACK FOOTER\n// /Users/austin/dev/material-example/src/app/message/message.component.scss\n// module id = ../../../../../src/app/message/message.component.scss\n// module chunks = main","import { Component, HostBinding, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n selector: 'app-message',\n encapsulation: ViewEncapsulation.None,\n template: `\n \n \n \n \n
\n \n {{avatar}}\n \n
\n
\n {{from}}\n
\n
\n {{subject}}\n
\n
\n \n alarm\n \n \n

Snooze until...

\n
\n \n \n \n \n \n \n
\n \n \n
\n
\n \n {{avatar}}\n \n
\n
\n
\n {{from}} to me\n \n \n \n \n
\n \n \n
\n
\n
\n
\n \n \n `,\n styleUrls: ['./message.component.scss']\n})\nexport class MessageComponent {\n\n @HostBinding('class.message-opened')\n @Input() opened = false;\n\n @Input() avatar = '';\n @Input() from = '';\n @Input() subject = '';\n @Input() body = '';\n @Input() recieved = new Date();\n\n @Output() removed = new EventEmitter();\n @Output() reply = new EventEmitter();\n\n onOpenToggle(): void {\n this.opened = !this.opened;\n }\n\n onReply(): void {\n this.reply.emit({\n to: this.from,\n subject: `RE: ${this.subject}`\n });\n }\n\n}\n\n\n\n// WEBPACK FOOTER //\n// /Users/austin/dev/material-example/src/app/message/message.component.ts","exports = module.exports = require(\"../../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".new-message-toolbar {\\n background: #424242;\\n color: #fff;\\n padding: 11px 20px;\\n position: relative;\\n margin: -24px; }\\n .new-message-toolbar .mat-icon {\\n vertical-align: middle; }\\n .new-message-toolbar .mat-icon-button {\\n position: absolute;\\n top: 5px;\\n right: 5px; }\\n\\n.recipients-list {\\n width: 100%; }\\n\\n.subject-input {\\n width: 100%; }\\n\\n.new-message-content {\\n padding: 24px; }\\n\\n.body-input {\\n width: 100%; }\\n\\n.new-message-btns {\\n text-align: right; }\\n\", \"\"]);\n\n// exports\n\n\n/*** EXPORTS FROM exports-loader ***/\nmodule.exports = module.exports.toString();\n\n\n//////////////////\n// WEBPACK FOOTER\n// /Users/austin/dev/material-example/src/app/new-message/new-message.component.scss\n// module id = ../../../../../src/app/new-message/new-message.component.scss\n// module chunks = main","import { Component, ViewEncapsulation, ViewChild, Inject } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { ENTER } from '@angular/cdk/keycodes';\nimport { MatChipInputEvent, MAT_DIALOG_DATA, MdAutocompleteSelectedEvent } from '@angular/material';\nimport { Observable } from 'rxjs/Observable';\n\nconst COMMA = 188;\n\n@Component({\n selector: 'app-new-message',\n encapsulation: ViewEncapsulation.None,\n template: `\n
\n drafts\n \n
\n \n \n \n \n {{recipient.name}}\n cancel\n \n \n \n \n \n {{ option }}\n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n styleUrls: ['./new-message.component.scss']\n})\nexport class NewMessageComponent {\n\n separatorKeysCodes = [ENTER, COMMA];\n\n contacts = [\n 'Austin Mcdaniel',\n 'Jeremy Elbourn',\n 'Jules Kremer',\n 'Brad Green',\n 'Tina Gao'\n ];\n recipients = [];\n subjectCtrl = new FormControl();\n bodyCtrl = new FormControl();\n recipientsCtrl = new FormControl();\n filteredContacts: Observable;\n\n @ViewChild('recipientInput') recipientInput;\n\n constructor(@Inject(MAT_DIALOG_DATA) public data: any) {\n if (data.to && data.subject) {\n this.recipients.push({ name: data.to });\n this.subjectCtrl.setValue(data.subject);\n }\n\n this.filteredContacts = this.recipientsCtrl.valueChanges\n .startWith(null)\n .map(contact => contact ? this.filterContacts(contact) : this.contacts.slice());\n }\n\n addRecipient(event: MatChipInputEvent): void {\n const input = event.input;\n const value = event.value;\n\n // Add our person\n if ((value || '').trim()) {\n this.recipients.push({ name: value.trim() });\n }\n\n // Reset the input value\n if (input) {\n input.value = '';\n }\n }\n\n removeRecipient(recipient: any): void {\n const index = this.recipients.indexOf(recipient);\n if (index >= 0) {\n this.recipients.splice(index, 1);\n }\n }\n\n filterContacts(name: string): string[] {\n return this.contacts.filter(contact =>\n contact.toLowerCase().indexOf(name.toLowerCase()) === 0);\n }\n\n onOptionSelected(event: MdAutocompleteSelectedEvent): void {\n this.recipients.push({ name: event.option.value });\n this.recipientInput.nativeElement.value = '';\n }\n\n}\n\n\n\n// WEBPACK FOOTER //\n// /Users/austin/dev/material-example/src/app/new-message/new-message.component.ts","// The file contents for the current environment will overwrite these during build.\n// The build system defaults to the dev environment which uses `environment.ts`, but if you do\n// `ng build --env=prod` then `environment.prod.ts` will be used instead.\n// The list of which env maps to which file can be found in `.angular-cli.json`.\n\nexport const environment = {\n production: false\n};\n\n\n\n// WEBPACK FOOTER //\n// /Users/austin/dev/material-example/src/environments/environment.ts","import 'hammerjs';\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule);\n\n\n\n// WEBPACK FOOTER //\n// /Users/austin/dev/material-example/src/main.ts"],"sourceRoot":"webpack:///"} -------------------------------------------------------------------------------- /docs/main.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp(["main"],{ 2 | 3 | /***/ "../../../../../src/$$_gendir lazy recursive": 4 | /***/ (function(module, exports) { 5 | 6 | function webpackEmptyAsyncContext(req) { 7 | // Here Promise.resolve().then() is used instead of new Promise() to prevent 8 | // uncatched exception popping up in devtools 9 | return Promise.resolve().then(function() { 10 | throw new Error("Cannot find module '" + req + "'."); 11 | }); 12 | } 13 | webpackEmptyAsyncContext.keys = function() { return []; }; 14 | webpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext; 15 | module.exports = webpackEmptyAsyncContext; 16 | webpackEmptyAsyncContext.id = "../../../../../src/$$_gendir lazy recursive"; 17 | 18 | /***/ }), 19 | 20 | /***/ "../../../../../src/app/app.component.scss": 21 | /***/ (function(module, exports, __webpack_require__) { 22 | 23 | exports = module.exports = __webpack_require__("../../../../css-loader/lib/css-base.js")(false); 24 | // imports 25 | 26 | 27 | // module 28 | exports.push([module.i, ".sidenav-nav {\n width: 250px;\n padding: 5px; }\n .sidenav-nav mat-list,\n .sidenav-nav mat-list-item,\n .sidenav-nav mat-list-item button {\n display: block;\n width: 100%; }\n .sidenav-nav mat-list-item button {\n text-align: left;\n padding: 10px 20px;\n color: #656565; }\n .sidenav-nav mat-list-item mat-icon {\n margin-right: 10px; }\n\n.sidenav-content {\n height: 100%; }\n\n.sidenav-container {\n height: 100%; }\n\n.primary-toolbar {\n transition: background .15s;\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); }\n\ncontent {\n display: block;\n width: 85%;\n margin: 30px auto;\n font-size: 90%; }\n\n.category-title {\n display: block;\n color: #616161;\n line-height: 24px;\n margin: 20px 0 8px;\n padding: 0 24px; }\n\nhr {\n border-top: solid 1px #e0e0e0;\n border-bottom: none; }\n\n.new-fab.mat-fab {\n position: absolute;\n right: 25px;\n bottom: 25px; }\n\n.search-col {\n line-height: 62px;\n text-align: center; }\n\n.search-bar {\n background: #6097f6;\n border-radius: 2px;\n min-width: 144px;\n outline: none;\n color: #FFF;\n border: none;\n height: 38px;\n line-height: 38px;\n width: 100%;\n padding: 0 30px;\n font-weight: 100;\n font-size: 80%;\n max-width: 550px;\n margin: 0 auto; }\n .search-bar::-webkit-input-placeholder {\n color: #FFF; }\n .search-bar:-ms-input-placeholder {\n color: #FFF; }\n .search-bar::placeholder {\n color: #FFF; }\n .search-bar::before {\n box-shadow: inset -24px 0 12px -12px #898984;\n transition: box-shadow .15s; }\n\n.mat-toolbar-layout {\n width: 100%; }\n\n.pin-toggle {\n margin-left: 10px; }\n\n.avatar {\n display: inline-block;\n border-radius: 50%;\n height: 28px;\n width: 28px;\n color: #FFF;\n text-align: center;\n line-height: 28px;\n font-size: 12px; }\n .avatar.accent-1 {\n background: #7b1fa2; }\n .avatar.large {\n height: 32px;\n width: 32px;\n line-height: 32px; }\n\n.avatar-col {\n text-align: right; }\n", ""]); 29 | 30 | // exports 31 | 32 | 33 | /*** EXPORTS FROM exports-loader ***/ 34 | module.exports = module.exports.toString(); 35 | 36 | /***/ }), 37 | 38 | /***/ "../../../../../src/app/app.component.ts": 39 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 40 | 41 | "use strict"; 42 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AppComponent; }); 43 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__("../../../core/@angular/core.es5.js"); 44 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_material__ = __webpack_require__("../../../material/esm5/material.es5.js"); 45 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__data__ = __webpack_require__("../../../../../src/app/data.ts"); 46 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__new_message_new_message_component__ = __webpack_require__("../../../../../src/app/new-message/new-message.component.ts"); 47 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 48 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 49 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 50 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 51 | return c > 3 && r && Object.defineProperty(target, key, r), r; 52 | }; 53 | var __metadata = (this && this.__metadata) || function (k, v) { 54 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 55 | }; 56 | 57 | 58 | 59 | 60 | var AppComponent = /** @class */ (function () { 61 | function AppComponent(snackBar, dialog) { 62 | this.snackBar = snackBar; 63 | this.dialog = dialog; 64 | this.messages = __WEBPACK_IMPORTED_MODULE_2__data__["a" /* messages */]; 65 | } 66 | AppComponent.prototype.onRemove = function (index) { 67 | var copy = this.messages.slice(); 68 | copy.splice(index, 1); 69 | this.messages = copy; 70 | }; 71 | AppComponent.prototype.onNewMessage = function (data) { 72 | var _this = this; 73 | if (data === void 0) { data = {}; } 74 | var dialogRef = this.dialog.open(__WEBPACK_IMPORTED_MODULE_3__new_message_new_message_component__["a" /* NewMessageComponent */], { 75 | width: '75%', 76 | panelClass: 'new-message-dialog', 77 | data: data 78 | }); 79 | dialogRef.afterClosed().subscribe(function (result) { 80 | if (result) { 81 | _this.snackBar.open('Email sent!', null, { 82 | duration: 2000 83 | }); 84 | } 85 | }); 86 | }; 87 | AppComponent = __decorate([ 88 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["o" /* Component */])({ 89 | selector: 'app-root', 90 | template: "\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n
\n Inbox\n
\n
\n \n \n
\n
\n \n AM\n \n
\n \n \n \n \n Today\n \n \n \n \n \n \n \n \n add\n \n
\n \n ", 91 | encapsulation: __WEBPACK_IMPORTED_MODULE_0__angular_core__["_20" /* ViewEncapsulation */].None, 92 | styles: [__webpack_require__("../../../../../src/app/app.component.scss")] 93 | }), 94 | __metadata("design:paramtypes", [typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_1__angular_material__["p" /* MatSnackBar */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_1__angular_material__["p" /* MatSnackBar */]) === "function" && _a || Object, typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_1__angular_material__["g" /* MatDialog */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_1__angular_material__["g" /* MatDialog */]) === "function" && _b || Object]) 95 | ], AppComponent); 96 | return AppComponent; 97 | var _a, _b; 98 | }()); 99 | 100 | //# sourceMappingURL=app.component.js.map 101 | 102 | /***/ }), 103 | 104 | /***/ "../../../../../src/app/app.module.ts": 105 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 106 | 107 | "use strict"; 108 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AppModule; }); 109 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser__ = __webpack_require__("../../../platform-browser/@angular/platform-browser.es5.js"); 110 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_core__ = __webpack_require__("../../../core/@angular/core.es5.js"); 111 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_platform_browser_animations__ = __webpack_require__("../../../platform-browser/@angular/platform-browser/animations.es5.js"); 112 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__angular_router__ = __webpack_require__("../../../router/@angular/router.es5.js"); 113 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__angular_forms__ = __webpack_require__("../../../forms/@angular/forms.es5.js"); 114 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__angular_material__ = __webpack_require__("../../../material/esm5/material.es5.js"); 115 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__angular_flex_layout__ = __webpack_require__("../../../flex-layout/@angular/flex-layout.es5.js"); 116 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__app_component__ = __webpack_require__("../../../../../src/app/app.component.ts"); 117 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__message_message_component__ = __webpack_require__("../../../../../src/app/message/message.component.ts"); 118 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__new_message_new_message_component__ = __webpack_require__("../../../../../src/app/new-message/new-message.component.ts"); 119 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__app_routes__ = __webpack_require__("../../../../../src/app/app.routes.ts"); 120 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 121 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 122 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 123 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 124 | return c > 3 && r && Object.defineProperty(target, key, r), r; 125 | }; 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | var AppModule = /** @class */ (function () { 138 | function AppModule() { 139 | } 140 | AppModule = __decorate([ 141 | Object(__WEBPACK_IMPORTED_MODULE_1__angular_core__["M" /* NgModule */])({ 142 | declarations: [ 143 | __WEBPACK_IMPORTED_MODULE_7__app_component__["a" /* AppComponent */], 144 | __WEBPACK_IMPORTED_MODULE_8__message_message_component__["a" /* MessageComponent */], 145 | __WEBPACK_IMPORTED_MODULE_9__new_message_new_message_component__["a" /* NewMessageComponent */] 146 | ], 147 | imports: [ 148 | __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser__["a" /* BrowserModule */], 149 | __WEBPACK_IMPORTED_MODULE_2__angular_platform_browser_animations__["a" /* BrowserAnimationsModule */], 150 | __WEBPACK_IMPORTED_MODULE_4__angular_forms__["h" /* ReactiveFormsModule */], 151 | __WEBPACK_IMPORTED_MODULE_3__angular_router__["a" /* RouterModule */].forRoot(__WEBPACK_IMPORTED_MODULE_10__app_routes__["a" /* routes */], { 152 | useHash: false 153 | }), 154 | __WEBPACK_IMPORTED_MODULE_6__angular_flex_layout__["a" /* FlexLayoutModule */], 155 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["n" /* MatSidenavModule */], 156 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["r" /* MatToolbarModule */], 157 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["d" /* MatButtonModule */], 158 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["k" /* MatIconModule */], 159 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["e" /* MatCardModule */], 160 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["m" /* MatMenuModule */], 161 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["s" /* MatTooltipModule */], 162 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["h" /* MatDialogModule */], 163 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["f" /* MatChipsModule */], 164 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["c" /* MatAutocompleteModule */], 165 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["j" /* MatFormFieldModule */], 166 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["l" /* MatInputModule */], 167 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["q" /* MatSnackBarModule */], 168 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["i" /* MatExpansionModule */], 169 | __WEBPACK_IMPORTED_MODULE_5__angular_material__["o" /* MatSlideToggleModule */] 170 | ], 171 | entryComponents: [ 172 | __WEBPACK_IMPORTED_MODULE_9__new_message_new_message_component__["a" /* NewMessageComponent */] 173 | ], 174 | providers: [ 175 | { provide: __WEBPACK_IMPORTED_MODULE_5__angular_material__["a" /* MATERIAL_COMPATIBILITY_MODE */], useValue: true } 176 | ], 177 | bootstrap: [__WEBPACK_IMPORTED_MODULE_7__app_component__["a" /* AppComponent */]] 178 | }) 179 | ], AppModule); 180 | return AppModule; 181 | }()); 182 | 183 | //# sourceMappingURL=app.module.js.map 184 | 185 | /***/ }), 186 | 187 | /***/ "../../../../../src/app/app.routes.ts": 188 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 189 | 190 | "use strict"; 191 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return routes; }); 192 | var routes = []; 193 | //# sourceMappingURL=app.routes.js.map 194 | 195 | /***/ }), 196 | 197 | /***/ "../../../../../src/app/data.ts": 198 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 199 | 200 | "use strict"; 201 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return messages; }); 202 | var messages = [ 203 | { 204 | recieved: new Date(), 205 | avatar: 'A', 206 | from: 'Austin McDaniel', 207 | subject: 'Angular is a open-source framework for building web applications', 208 | body: "\n

Learn one way to build applications with Angular and reuse your code and abilities to build\n apps for any deployment target. For web, mobile web, native mobile and native desktop.\n Learn one way to build applications with Angular and reuse your code and abilities to build\n apps for any deployment target. For web, mobile web, native mobile and native desktop.\n Learn one way to build applications with Angular and reuse your code and abilities to build\n apps for any deployment target. For web, mobile web, native mobile and native desktop.

\n\n

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.

\n\n

Angular puts you in control over scalability. Meet huge data requirements by building data\n models on RxJS, Immutable.js or another push-model.\n Angular puts you in control over scalability. Meet huge data requirements by building data\n models on RxJS, Immutable.js or another push-model.\n Angular puts you in control over scalability. Meet huge data requirements by building data\n models on RxJS, Immutable.js or another push-model.

\n " 209 | }, 210 | { 211 | recieved: new Date(), 212 | avatar: 'J', 213 | from: 'Jeremy Elbourn', 214 | subject: 'Angular Material is a open-source UI framework based on Material design spec', 215 | body: "\n

Learn one way to build applications with Angular and reuse your code and abilities to build\n apps for any deployment target. For web, mobile web, native mobile and native desktop.

\n\n

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.

\n\n

Angular puts you in control over scalability. Meet huge data requirements by building data\n models on RxJS, Immutable.js or another push-model.

\n " 216 | } 217 | ]; 218 | //# sourceMappingURL=data.js.map 219 | 220 | /***/ }), 221 | 222 | /***/ "../../../../../src/app/message/message.component.scss": 223 | /***/ (function(module, exports, __webpack_require__) { 224 | 225 | exports = module.exports = __webpack_require__("../../../../css-loader/lib/css-base.js")(false); 226 | // imports 227 | 228 | 229 | // module 230 | exports.push([module.i, "app-message .mat-card {\n color: #212121;\n padding: 0; }\n app-message .mat-card .btn-col {\n text-align: right; }\n\napp-message .message-toolbar {\n padding: 12px 24px;\n width: 100%;\n cursor: pointer; }\n\napp-message .message-subject {\n line-height: 40px; }\n\napp-message .mat-content {\n margin: 0 -24px; }\n\napp-message.message-opened .message-toolbar {\n border-bottom: solid 1px #e0e0e0; }\n app-message.message-opened .message-toolbar .message-subject {\n font-size: 110%;\n font-weight: 100; }\n\napp-message .message-body {\n position: relative;\n padding: 20px 24px; }\n app-message .message-body .message-from {\n font-weight: bold; }\n app-message .message-body .message-body-toolbar {\n margin-bottom: 10px; }\n app-message .message-body .message-to {\n color: #7a7a7a; }\n app-message .message-body .message-more {\n position: absolute;\n top: 5px;\n right: 5px; }\n\n.message-more-menu {\n width: 200px; }\n\n.snooze-menu {\n width: 200px; }\n .snooze-menu h3 {\n padding: 0 15px;\n margin: 5px 0; }\n .snooze-menu button {\n font-size: 85%; }\n", ""]); 231 | 232 | // exports 233 | 234 | 235 | /*** EXPORTS FROM exports-loader ***/ 236 | module.exports = module.exports.toString(); 237 | 238 | /***/ }), 239 | 240 | /***/ "../../../../../src/app/message/message.component.ts": 241 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 242 | 243 | "use strict"; 244 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MessageComponent; }); 245 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__("../../../core/@angular/core.es5.js"); 246 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 247 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 248 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 249 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 250 | return c > 3 && r && Object.defineProperty(target, key, r), r; 251 | }; 252 | var __metadata = (this && this.__metadata) || function (k, v) { 253 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 254 | }; 255 | 256 | var MessageComponent = /** @class */ (function () { 257 | function MessageComponent() { 258 | this.opened = false; 259 | this.avatar = ''; 260 | this.from = ''; 261 | this.subject = ''; 262 | this.body = ''; 263 | this.recieved = new Date(); 264 | this.removed = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["x" /* EventEmitter */](); 265 | this.reply = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["x" /* EventEmitter */](); 266 | } 267 | MessageComponent.prototype.onOpenToggle = function () { 268 | this.opened = !this.opened; 269 | }; 270 | MessageComponent.prototype.onReply = function () { 271 | this.reply.emit({ 272 | to: this.from, 273 | subject: "RE: " + this.subject 274 | }); 275 | }; 276 | __decorate([ 277 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["z" /* HostBinding */])('class.message-opened'), 278 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["F" /* Input */])(), 279 | __metadata("design:type", Object) 280 | ], MessageComponent.prototype, "opened", void 0); 281 | __decorate([ 282 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["F" /* Input */])(), 283 | __metadata("design:type", Object) 284 | ], MessageComponent.prototype, "avatar", void 0); 285 | __decorate([ 286 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["F" /* Input */])(), 287 | __metadata("design:type", Object) 288 | ], MessageComponent.prototype, "from", void 0); 289 | __decorate([ 290 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["F" /* Input */])(), 291 | __metadata("design:type", Object) 292 | ], MessageComponent.prototype, "subject", void 0); 293 | __decorate([ 294 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["F" /* Input */])(), 295 | __metadata("design:type", Object) 296 | ], MessageComponent.prototype, "body", void 0); 297 | __decorate([ 298 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["F" /* Input */])(), 299 | __metadata("design:type", Object) 300 | ], MessageComponent.prototype, "recieved", void 0); 301 | __decorate([ 302 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["T" /* Output */])(), 303 | __metadata("design:type", Object) 304 | ], MessageComponent.prototype, "removed", void 0); 305 | __decorate([ 306 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["T" /* Output */])(), 307 | __metadata("design:type", Object) 308 | ], MessageComponent.prototype, "reply", void 0); 309 | MessageComponent = __decorate([ 310 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["o" /* Component */])({ 311 | selector: 'app-message', 312 | encapsulation: __WEBPACK_IMPORTED_MODULE_0__angular_core__["_20" /* ViewEncapsulation */].None, 313 | template: "\n \n \n \n \n
\n \n {{avatar}}\n \n
\n
\n {{from}}\n
\n
\n {{subject}}\n
\n
\n \n alarm\n \n \n

Snooze until...

\n
\n \n \n \n \n \n \n
\n \n \n
\n
\n \n {{avatar}}\n \n
\n
\n
\n {{from}} to me\n \n \n \n \n
\n \n \n
\n
\n
\n
\n \n \n ", 314 | styles: [__webpack_require__("../../../../../src/app/message/message.component.scss")] 315 | }) 316 | ], MessageComponent); 317 | return MessageComponent; 318 | }()); 319 | 320 | //# sourceMappingURL=message.component.js.map 321 | 322 | /***/ }), 323 | 324 | /***/ "../../../../../src/app/new-message/new-message.component.scss": 325 | /***/ (function(module, exports, __webpack_require__) { 326 | 327 | exports = module.exports = __webpack_require__("../../../../css-loader/lib/css-base.js")(false); 328 | // imports 329 | 330 | 331 | // module 332 | exports.push([module.i, ".new-message-toolbar {\n background: #424242;\n color: #fff;\n padding: 11px 20px;\n position: relative;\n margin: -24px; }\n .new-message-toolbar .mat-icon {\n vertical-align: middle; }\n .new-message-toolbar .mat-icon-button {\n position: absolute;\n top: 5px;\n right: 5px; }\n\n.recipients-list {\n width: 100%; }\n\n.subject-input {\n width: 100%; }\n\n.new-message-content {\n padding: 24px; }\n\n.body-input {\n width: 100%; }\n\n.new-message-btns {\n text-align: right; }\n", ""]); 333 | 334 | // exports 335 | 336 | 337 | /*** EXPORTS FROM exports-loader ***/ 338 | module.exports = module.exports.toString(); 339 | 340 | /***/ }), 341 | 342 | /***/ "../../../../../src/app/new-message/new-message.component.ts": 343 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 344 | 345 | "use strict"; 346 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return NewMessageComponent; }); 347 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__("../../../core/@angular/core.es5.js"); 348 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_forms__ = __webpack_require__("../../../forms/@angular/forms.es5.js"); 349 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_cdk_keycodes__ = __webpack_require__("../../../cdk/esm5/keycodes.es5.js"); 350 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__angular_material__ = __webpack_require__("../../../material/esm5/material.es5.js"); 351 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 352 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 353 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 354 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 355 | return c > 3 && r && Object.defineProperty(target, key, r), r; 356 | }; 357 | var __metadata = (this && this.__metadata) || function (k, v) { 358 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 359 | }; 360 | var __param = (this && this.__param) || function (paramIndex, decorator) { 361 | return function (target, key) { decorator(target, key, paramIndex); } 362 | }; 363 | 364 | 365 | 366 | 367 | var COMMA = 188; 368 | var NewMessageComponent = /** @class */ (function () { 369 | function NewMessageComponent(data) { 370 | var _this = this; 371 | this.data = data; 372 | this.separatorKeysCodes = [__WEBPACK_IMPORTED_MODULE_2__angular_cdk_keycodes__["f" /* ENTER */], COMMA]; 373 | this.contacts = [ 374 | 'Austin Mcdaniel', 375 | 'Jeremy Elbourn', 376 | 'Jules Kremer', 377 | 'Brad Green', 378 | 'Tina Gao' 379 | ]; 380 | this.recipients = []; 381 | this.subjectCtrl = new __WEBPACK_IMPORTED_MODULE_1__angular_forms__["b" /* FormControl */](); 382 | this.bodyCtrl = new __WEBPACK_IMPORTED_MODULE_1__angular_forms__["b" /* FormControl */](); 383 | this.recipientsCtrl = new __WEBPACK_IMPORTED_MODULE_1__angular_forms__["b" /* FormControl */](); 384 | if (data.to && data.subject) { 385 | this.recipients.push({ name: data.to }); 386 | this.subjectCtrl.setValue(data.subject); 387 | } 388 | this.filteredContacts = this.recipientsCtrl.valueChanges 389 | .startWith(null) 390 | .map(function (contact) { return contact ? _this.filterContacts(contact) : _this.contacts.slice(); }); 391 | } 392 | NewMessageComponent.prototype.addRecipient = function (event) { 393 | var input = event.input; 394 | var value = event.value; 395 | // Add our person 396 | if ((value || '').trim()) { 397 | this.recipients.push({ name: value.trim() }); 398 | } 399 | // Reset the input value 400 | if (input) { 401 | input.value = ''; 402 | } 403 | }; 404 | NewMessageComponent.prototype.removeRecipient = function (recipient) { 405 | var index = this.recipients.indexOf(recipient); 406 | if (index >= 0) { 407 | this.recipients.splice(index, 1); 408 | } 409 | }; 410 | NewMessageComponent.prototype.filterContacts = function (name) { 411 | return this.contacts.filter(function (contact) { 412 | return contact.toLowerCase().indexOf(name.toLowerCase()) === 0; 413 | }); 414 | }; 415 | NewMessageComponent.prototype.onOptionSelected = function (event) { 416 | this.recipients.push({ name: event.option.value }); 417 | this.recipientInput.nativeElement.value = ''; 418 | }; 419 | __decorate([ 420 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["_17" /* ViewChild */])('recipientInput'), 421 | __metadata("design:type", Object) 422 | ], NewMessageComponent.prototype, "recipientInput", void 0); 423 | NewMessageComponent = __decorate([ 424 | Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["o" /* Component */])({ 425 | selector: 'app-new-message', 426 | encapsulation: __WEBPACK_IMPORTED_MODULE_0__angular_core__["_20" /* ViewEncapsulation */].None, 427 | template: "\n
\n drafts\n \n
\n \n \n \n \n {{recipient.name}}\n cancel\n \n \n \n \n \n {{ option }}\n \n \n \n \n \n \n \n \n \n \n \n \n \n ", 428 | styles: [__webpack_require__("../../../../../src/app/new-message/new-message.component.scss")] 429 | }), 430 | __param(0, Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["B" /* Inject */])(__WEBPACK_IMPORTED_MODULE_3__angular_material__["b" /* MAT_DIALOG_DATA */])), 431 | __metadata("design:paramtypes", [Object]) 432 | ], NewMessageComponent); 433 | return NewMessageComponent; 434 | }()); 435 | 436 | //# sourceMappingURL=new-message.component.js.map 437 | 438 | /***/ }), 439 | 440 | /***/ "../../../../../src/environments/environment.ts": 441 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 442 | 443 | "use strict"; 444 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return environment; }); 445 | // The file contents for the current environment will overwrite these during build. 446 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 447 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 448 | // The list of which env maps to which file can be found in `.angular-cli.json`. 449 | var environment = { 450 | production: false 451 | }; 452 | //# sourceMappingURL=environment.js.map 453 | 454 | /***/ }), 455 | 456 | /***/ "../../../../../src/main.ts": 457 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 458 | 459 | "use strict"; 460 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 461 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_hammerjs__ = __webpack_require__("../../../../hammerjs/hammer.js"); 462 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_hammerjs___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_hammerjs__); 463 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_core__ = __webpack_require__("../../../core/@angular/core.es5.js"); 464 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_platform_browser_dynamic__ = __webpack_require__("../../../platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js"); 465 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__app_app_module__ = __webpack_require__("../../../../../src/app/app.module.ts"); 466 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__environments_environment__ = __webpack_require__("../../../../../src/environments/environment.ts"); 467 | 468 | 469 | 470 | 471 | 472 | if (__WEBPACK_IMPORTED_MODULE_4__environments_environment__["a" /* environment */].production) { 473 | Object(__WEBPACK_IMPORTED_MODULE_1__angular_core__["_24" /* enableProdMode */])(); 474 | } 475 | Object(__WEBPACK_IMPORTED_MODULE_2__angular_platform_browser_dynamic__["a" /* platformBrowserDynamic */])().bootstrapModule(__WEBPACK_IMPORTED_MODULE_3__app_app_module__["a" /* AppModule */]); 476 | //# sourceMappingURL=main.js.map 477 | 478 | /***/ }), 479 | 480 | /***/ 0: 481 | /***/ (function(module, exports, __webpack_require__) { 482 | 483 | module.exports = __webpack_require__("../../../../../src/main.ts"); 484 | 485 | 486 | /***/ }) 487 | 488 | },[0]); 489 | //# sourceMappingURL=main.bundle.js.map -------------------------------------------------------------------------------- /docs/styles.bundle.js: -------------------------------------------------------------------------------- 1 | webpackJsonp(["styles"],{ 2 | 3 | /***/ "../../../../../src/styles.scss": 4 | /***/ (function(module, exports, __webpack_require__) { 5 | 6 | // style-loader: Adds some css to the DOM by adding a