├── .browserslistrc
├── .editorconfig
├── .gitignore
├── README.md
├── angular.json
├── license
├── package.json
├── src
    ├── app
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── content-area
    │   │   ├── content-area.component.html
    │   │   ├── content-area.component.ts
    │   │   ├── content
    │   │   │   ├── content-pane
    │   │   │   │   ├── content-pane.component.html
    │   │   │   │   ├── content-pane.component.ts
    │   │   │   │   └── newmail
    │   │   │   │   │   ├── newmail.component.html
    │   │   │   │   │   └── newmail.component.ts
    │   │   │   ├── content.component.html
    │   │   │   ├── content.component.ts
    │   │   │   ├── message-pane
    │   │   │   │   ├── message-pane.component.html
    │   │   │   │   └── message-pane.component.ts
    │   │   │   └── tools
    │   │   │   │   ├── tools.component.html
    │   │   │   │   └── tools.component.ts
    │   │   ├── popup
    │   │   │   ├── popup.component.html
    │   │   │   └── popup.component.ts
    │   │   ├── readingpane
    │   │   │   ├── readingpane.component.html
    │   │   │   └── readingpane.component.ts
    │   │   └── sidebar
    │   │   │   ├── navigation
    │   │   │       ├── navigation.component.html
    │   │   │       └── navigation.component.ts
    │   │   │   ├── search
    │   │   │       ├── search.component.html
    │   │   │       └── search.component.ts
    │   │   │   ├── sidebar.component.html
    │   │   │   └── sidebar.component.ts
    │   ├── data-service.ts
    │   ├── data
    │   │   └── datasource.ts
    │   ├── header
    │   │   ├── header.component.html
    │   │   └── header.component.ts
    │   └── main.ts
    ├── assets
    │   ├── .gitkeep
    │   ├── Outlook Icons
    │   │   ├── fonts
    │   │   │   ├── icomoon.eot
    │   │   │   ├── icomoon.svg
    │   │   │   ├── icomoon.ttf
    │   │   │   └── icomoon.woff
    │   │   └── style.css
    │   ├── css
    │   │   └── outlook.css
    │   ├── images
    │   │   ├── 1.png
    │   │   ├── 3.png
    │   │   ├── Medium-36px-spin.gif
    │   │   ├── bootstrap.png
    │   │   ├── fabric.png
    │   │   ├── images
    │   │   │   ├── 1.png
    │   │   │   ├── 10.png
    │   │   │   ├── 11.png
    │   │   │   ├── 12.png
    │   │   │   ├── 13.png
    │   │   │   ├── 14.png
    │   │   │   ├── 15.png
    │   │   │   ├── 16.png
    │   │   │   ├── 17.png
    │   │   │   ├── 18.png
    │   │   │   ├── 19.png
    │   │   │   ├── 2.png
    │   │   │   ├── 20.png
    │   │   │   ├── 21.png
    │   │   │   ├── 22.png
    │   │   │   ├── 23.png
    │   │   │   ├── 24.png
    │   │   │   ├── 25.png
    │   │   │   ├── 26.png
    │   │   │   ├── 27.png
    │   │   │   ├── 28.png
    │   │   │   ├── 29.png
    │   │   │   ├── 3.png
    │   │   │   ├── 30.png
    │   │   │   ├── 31.png
    │   │   │   ├── 32.png
    │   │   │   ├── 33.png
    │   │   │   ├── 34.png
    │   │   │   ├── 35.png
    │   │   │   ├── 36.png
    │   │   │   ├── 37.png
    │   │   │   ├── 38.png
    │   │   │   ├── 39.png
    │   │   │   ├── 4.png
    │   │   │   ├── 40.png
    │   │   │   ├── 41.png
    │   │   │   ├── 42.png
    │   │   │   ├── 43.png
    │   │   │   ├── 44.png
    │   │   │   ├── 45.png
    │   │   │   ├── 46.png
    │   │   │   ├── 47.png
    │   │   │   ├── 48.png
    │   │   │   ├── 49.png
    │   │   │   ├── 5.png
    │   │   │   ├── 50.png
    │   │   │   ├── 51.png
    │   │   │   ├── 52.png
    │   │   │   ├── 53.png
    │   │   │   ├── 54.png
    │   │   │   ├── 55.png
    │   │   │   ├── 6.png
    │   │   │   ├── 7.png
    │   │   │   ├── 8.png
    │   │   │   └── 9.png
    │   │   ├── large
    │   │   │   ├── 1.png
    │   │   │   ├── 10.png
    │   │   │   ├── 11.png
    │   │   │   ├── 12.png
    │   │   │   ├── 13.png
    │   │   │   ├── 14.png
    │   │   │   ├── 15.png
    │   │   │   ├── 16.png
    │   │   │   ├── 17.png
    │   │   │   ├── 18.png
    │   │   │   ├── 19.png
    │   │   │   ├── 2.png
    │   │   │   ├── 20.png
    │   │   │   ├── 21.png
    │   │   │   ├── 22.png
    │   │   │   ├── 23.png
    │   │   │   ├── 24.png
    │   │   │   ├── 25.png
    │   │   │   ├── 26.png
    │   │   │   ├── 27.png
    │   │   │   ├── 28.png
    │   │   │   ├── 29.png
    │   │   │   ├── 3.png
    │   │   │   ├── 30.png
    │   │   │   ├── 31.png
    │   │   │   ├── 32.png
    │   │   │   ├── 33.png
    │   │   │   ├── 34.png
    │   │   │   ├── 35.png
    │   │   │   ├── 36.png
    │   │   │   ├── 37.png
    │   │   │   ├── 38.png
    │   │   │   ├── 39.png
    │   │   │   ├── 4.png
    │   │   │   ├── 40.png
    │   │   │   ├── 41.png
    │   │   │   ├── 42.png
    │   │   │   ├── 43.png
    │   │   │   ├── 44.png
    │   │   │   ├── 45.png
    │   │   │   ├── 46.png
    │   │   │   ├── 47.png
    │   │   │   ├── 48.png
    │   │   │   ├── 49.png
    │   │   │   ├── 5.png
    │   │   │   ├── 50.png
    │   │   │   ├── 51.png
    │   │   │   ├── 52.png
    │   │   │   ├── 53.png
    │   │   │   ├── 54.png
    │   │   │   ├── 55.png
    │   │   │   ├── 6.png
    │   │   │   ├── 7.png
    │   │   │   ├── 8.png
    │   │   │   └── 9.png
    │   │   ├── mail.svg
    │   │   └── material.png
    │   ├── styles.css
    │   └── styles.scss
    ├── environments
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    ├── test.ts
    └── tsconfig.app.json
├── tsconfig-aot.json
├── tsconfig.app.json
├── tsconfig.base.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json


/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # For the full list of supported browsers by the Angular framework, please see:
 6 | # https://angular.io/guide/browser-support
 7 | 
 8 | # You can see what browsers were selected by your queries by running:
 9 | #   npx browserslist
10 | 
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major version
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 9-11 # For IE 9-11 support, remove 'not'.
18 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | dist/
 2 | *d.ts
 3 | *.map
 4 | .vscode/
 5 | src/**/*.js
 6 | *.ngstyle.ts
 7 | src/**/*.map
 8 | node_modules/
 9 | npm-debug.log
10 | *ngfactory.ts
11 | *metadata.json
12 | *ngsummary.json


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Essential JS 2 for Angular - Webmail
 2 | 
 3 | This Webmail demo application showcases the usage of several Essential JS 2 components in a real world application scenario. This demo explores a mailbox user interface which was inspired by the Outlook Office 365 application.
 4 | 
 5 | ## Deployment
 6 | 
 7 | ### Install
 8 | 
 9 | To install all dependent packages, use the below command
10 | 
11 | ```
12 | npm install
13 | ```
14 | 
15 | ### Run
16 | 
17 | To run the sample, use the below command
18 | 
19 | ```
20 | ng serve
21 | ```
22 | 
23 | ## Demo
24 | 
25 | #### <a href="https://ej2.syncfusion.com/showcase/angular/webmail/" target="_blank">https://ej2.syncfusion.com/showcase/angular/webmail/</a>
26 | 
27 | Check all the showcase samples from <a href="https://ej2.syncfusion.com/home/angular.html" target="_blank">here</a>.


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "ej2-ng-outlook": {
  7 |       "projectType": "application",
  8 |       "schematics": {},
  9 |       "root": "",
 10 |       "sourceRoot": "src",
 11 |       "prefix": "app",
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:browser",
 15 |           "options": {
 16 |             "outputPath": "output",
 17 |             "index": "src/index.html",
 18 |             "main": "src/main.ts",
 19 |             "polyfills": "src/polyfills.ts",
 20 |             "tsConfig": "tsconfig.app.json",
 21 |             "aot": true,
 22 |             "assets": [
 23 |               "src/favicon.ico",
 24 |               "src/assets"
 25 |             ],
 26 |             "styles": [
 27 |               "src/styles.css"
 28 |             ],
 29 |             "scripts": []
 30 |           },
 31 |           "configurations": {
 32 |             "production": {
 33 |               "fileReplacements": [
 34 |                 {
 35 |                   "replace": "src/environments/environment.ts",
 36 |                   "with": "src/environments/environment.prod.ts"
 37 |                 }
 38 |               ],
 39 |               "optimization": true,
 40 |               "outputHashing": "all",
 41 |               "sourceMap": false,
 42 |               "extractCss": true,
 43 |               "namedChunks": false,
 44 |               "extractLicenses": true,
 45 |               "vendorChunk": false,
 46 |               "buildOptimizer": true,
 47 |               "budgets": [
 48 |                 {
 49 |                   "type": "initial",
 50 |                   "maximumWarning": "2mb",
 51 |                   "maximumError": "5mb"
 52 |                 },
 53 |                 {
 54 |                   "type": "anyComponentStyle",
 55 |                   "maximumWarning": "6kb",
 56 |                   "maximumError": "10kb"
 57 |                 }
 58 |               ]
 59 |             }
 60 |           }
 61 |         },
 62 |         "serve": {
 63 |           "builder": "@angular-devkit/build-angular:dev-server",
 64 |           "options": {
 65 |             "browserTarget": "ej2-ng-outlook:build"
 66 |           },
 67 |           "configurations": {
 68 |             "production": {
 69 |               "browserTarget": "ej2-ng-outlook:build:production"
 70 |             }
 71 |           }
 72 |         },
 73 |         "extract-i18n": {
 74 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 75 |           "options": {
 76 |             "browserTarget": "ej2-ng-outlook:build"
 77 |           }
 78 |         },
 79 |         "test": {
 80 |           "builder": "@angular-devkit/build-angular:karma",
 81 |           "options": {
 82 |             "main": "src/test.ts",
 83 |             "polyfills": "src/polyfills.ts",
 84 |             "tsConfig": "tsconfig.spec.json",
 85 |             "karmaConfig": "karma.conf.js",
 86 |             "assets": [
 87 |               "src/favicon.ico",
 88 |               "src/assets"
 89 |             ],
 90 |             "styles": [
 91 |               "src/styles.css"
 92 |             ],
 93 |             "scripts": []
 94 |           }
 95 |         },
 96 |         "lint": {
 97 |           "builder": "@angular-devkit/build-angular:tslint",
 98 |           "options": {
 99 |             "tsConfig": [
100 |               "tsconfig.app.json",
101 |               "tsconfig.spec.json",
102 |               "e2e/tsconfig.json"
103 |             ],
104 |             "exclude": [
105 |               "**/node_modules/**"
106 |             ]
107 |           }
108 |         },
109 |         "e2e": {
110 |           "builder": "@angular-devkit/build-angular:protractor",
111 |           "options": {
112 |             "protractorConfig": "e2e/protractor.conf.js",
113 |             "devServerTarget": "ej2-ng-outlook:serve"
114 |           },
115 |           "configurations": {
116 |             "production": {
117 |               "devServerTarget": "ej2-ng-outlook:serve:production"
118 |             }
119 |           }
120 |         }
121 |       }
122 |     }
123 |   },
124 |   "defaultProject": "ej2-ng-outlook",
125 |   "cli": {
126 |     "analytics": "80498c5d-502c-449c-a7d2-f2488ac330fb"
127 |   }
128 | }


--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
 1 | Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
 2 | 
 3 | To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
 4 | 
 5 | Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
 6 | 
 7 | Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
 8 | 
 9 | The Syncfusion license that contains the terms and conditions can be found at 
10 | https://www.syncfusion.com/content/downloads/syncfusion_license.pdf


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@syncfusion/ej2-ng-outlook",
 3 |   "version": "0.0.1",
 4 |   "description": "Essential JS 2 for Angular - Webmail application",
 5 |   "author": "Syncfusion Inc.",
 6 |   "license": "SEE LICENSE IN license",
 7 |   "scripts": {
 8 |     "ng": "ng",
 9 |     "start": "ng serve",
10 |     "build": "ng build",
11 |     "test": "ng test",
12 |     "lint": "ng lint",
13 |     "e2e": "ng e2e",
14 |     "scss": "gulp styles",
15 |     "ci-publish": "gulp publish-samples"
16 |   },
17 |   "private": true,
18 |   "dependencies": {
19 |     "@angular/animations": "^15.0.0",
20 |     "@angular/common": "^15.0.0",
21 |     "@angular/compiler": "^15.0.0",
22 |     "@angular/core": "^15.0.0",
23 |     "@angular/forms": "^15.0.0",
24 |     "@angular/platform-browser": "^15.0.0",
25 |     "@angular/platform-browser-dynamic": "^15.0.0",
26 |     "@angular/router": "^15.0.0",
27 |     "@syncfusion/ej2-angular-base": "*",
28 |     "@syncfusion/ej2-angular-buttons": "*",
29 |     "@syncfusion/ej2-angular-dropdowns": "*",
30 |     "@syncfusion/ej2-angular-inputs": "*",
31 |     "@syncfusion/ej2-angular-layouts": "*",
32 |     "@syncfusion/ej2-angular-lists": "*",
33 |     "@syncfusion/ej2-angular-navigations": "*",
34 |     "@syncfusion/ej2-angular-popups": "*",
35 |     "ajv": "^8.11.2",
36 |     "gulp": "^3.9.0",
37 |     "gulp-sass": "^3.1.0",
38 |     "run-sequence": "2.2.0",
39 |     "rxjs": "~7.5.0",
40 |     "shelljs": "0.8.5",
41 |     "tslib": "^2.3.0",
42 |     "zone.js": "~0.12.0"
43 |   },
44 |   "devDependencies": {
45 |     "@angular-devkit/build-angular": "^15.0.4",
46 |     "@angular/cli": "~15.0.4",
47 |     "@angular/compiler-cli": "^15.0.0",
48 |     "@types/jasmine": "~4.3.0",
49 |     "@types/jasminewd2": "~2.0.3",
50 |     "@types/node": "^10.13.0",
51 |     "codelyzer": "^6.0.0-next.1",
52 |     "jasmine-core": "~4.5.0",
53 |     "jasmine-spec-reporter": "~5.0.0",
54 |     "karma": "~6.4.0",
55 |     "karma-chrome-launcher": "~3.1.0",
56 |     "karma-coverage-istanbul-reporter": "~3.0.2",
57 |     "karma-jasmine": "~5.1.0",
58 |     "karma-jasmine-html-reporter": "~2.0.0",
59 |     "protractor": "~7.0.0",
60 |     "ts-node": "~8.3.0",
61 |     "tslint": "~6.1.0",
62 |     "typescript": "~4.8.2"
63 |   },
64 |   "keywords": [
65 |     "ej2",
66 |     "samples",
67 |     "outlook",
68 |     "syncfusion",
69 |     "ej2-samples",
70 |     "ej2-outlook",
71 |     "ej2-showcase-samples",
72 |     "syncfusion-samples",
73 |     "syncfusion-webmail"
74 |   ]
75 | }
76 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/app/app.component.css


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <div class='outlook-container'>
2 |     <header-section></header-section>
3 |     <content-area-section></content-area-section>
4 | </div>


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, HostListener } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.css'],
 7 | })
 8 | export class AppComponent {
 9 |     constructor() {
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { TreeViewModule,AppBarModule,SidebarModule, ToolbarModule, AccordionModule, ContextMenuModule } from '@syncfusion/ej2-angular-navigations';
 5 | import { ListViewModule } from '@syncfusion/ej2-angular-lists';
 6 | import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
 7 | import { AutoCompleteModule,MentionModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
 8 | import { DialogModule, TooltipModule } from '@syncfusion/ej2-angular-popups';
 9 | import { SplitterModule } from '@syncfusion/ej2-angular-layouts';
10 | 
11 | import { AppComponent } from './app.component';
12 | import { HeaderComponent } from './header/header.component';
13 | import { ContentAreaComponent } from './content-area/content-area.component';
14 | import { ReadingPaneComponent } from './content-area/readingpane/readingpane.component';
15 | import { LeftSidebarComponent } from './content-area/sidebar/sidebar.component';
16 | import { SearchComponent } from './content-area/sidebar/search/search.component';
17 | import { NavigationComponent } from './content-area/sidebar/navigation/navigation.component';
18 | import { PopupComponent } from './content-area/popup/popup.component';
19 | import { ContentComponent } from './content-area/content/content.component';
20 | import { ToolsComponent } from './content-area/content/tools/tools.component';
21 | import { MessagePaneComponent } from './content-area/content/message-pane/message-pane.component';
22 | import { ContentPaneComponent } from './content-area/content/content-pane/content-pane.component';
23 | import { NewMailComponent } from './content-area/content/content-pane/newmail/newmail.component';
24 | 
25 | import { DataService } from './data-service';
26 | @NgModule({
27 |   declarations: [
28 |     AppComponent,
29 |     HeaderComponent,
30 |     ContentAreaComponent,
31 |     ReadingPaneComponent,
32 |     LeftSidebarComponent,
33 |     SearchComponent,
34 |     NavigationComponent,
35 |     PopupComponent,
36 |     ContentComponent,
37 |     ToolsComponent,
38 |     MessagePaneComponent,
39 |     ContentPaneComponent,
40 |     NewMailComponent
41 |   ],
42 |   imports: [
43 |     BrowserModule,
44 |     TreeViewModule,
45 |     ToolbarModule,
46 |     AccordionModule,
47 |     ContextMenuModule,
48 |     ListViewModule,
49 |     ButtonModule,
50 |     AutoCompleteModule,
51 |     DropDownListModule,
52 |     MultiSelectModule,
53 |     DialogModule,
54 |     TooltipModule,
55 |     AppBarModule,
56 |     MentionModule,
57 |     SidebarModule,
58 |     SplitterModule
59 |   ],
60 |   providers: [DataService],
61 |   bootstrap: [AppComponent]
62 | })
63 | export class AppModule { }
64 | 


--------------------------------------------------------------------------------
/src/app/content-area/content-area.component.html:
--------------------------------------------------------------------------------
  1 | <div id="content-area" style="height: 100%">
  2 |     <div class='row content'>
  3 |         <sidebar-section #sidebarSection></sidebar-section>
  4 |         <popup-section #popupSection></popup-section>
  5 |         <content-section #contentSection></content-section>
  6 |         <div id='accodianContent'>
  7 |             <div style='height: 100px'>
  8 |                 <div class='logo logo-style2' style='float:left'></div>
  9 |                 <div class='messageHeader' style='float:left'>
 10 |                     <div id='sub' style="font-size: 17px">
 11 |                     </div>
 12 |                     <div id='date' style="font-size: 11px; color: #666;" ></div>
 13 |                     <div id='to' style="font-size: 12px;"></div>
 14 |                 </div>
 15 |                 <div style="right:0;position: absolute;">
 16 | 
 17 |                 </div>
 18 |             </div>
 19 |             <div id='accContent'>
 20 |             </div>
 21 |         </div>
 22 |     </div>
 23 | </div>
 24 |  
 25 |  
 26 | <ejs-contextmenu id='treeContextMenu' #treeContextMenu [items]='treeMenuItems' target='#tree' (beforeOpen)='treeMenuBeforeOpen($event)' 
 27 |     (select)='treeMenuSelect($event)' >
 28 | </ejs-contextmenu>
 29 | 
 30 | <ejs-contextmenu id='filterContextMenu' #filterContextMenu [items]='filterMenuItems' (select)='filterMenuSelect($event)' >
 31 | </ejs-contextmenu>
 32 | 
 33 | <ejs-dialog id="favoriteDialog" #favoriteDialog width='335px' header='Remove from Favorites' content='<div class="dlg-content-style"><span>Do you want to remove from favorites?</span></div>'
 34 |     [target]='dlgTarget' [isModal]='modalDialog' [animationSettings]='dlgAnimationSettings' closeOnEscape='true'
 35 |     [buttons]='favoritesDlgButtons' [visible]='dialogVisibility'>
 36 | </ejs-dialog>
 37 | 
 38 | <ejs-dialog id="deleteDialog" #deleteDialog width='335px' header='Delete Folder Items' content='<div class="dlg-content-style"><span>Are you sure you want to move all its content to Deleted items?</span></div>'
 39 |     [target]='dlgTarget' [isModal]='modalDialog' [animationSettings]='dlgAnimationSettings' closeOnEscape='true'
 40 |     [buttons]='deleteDlgButtons' [visible]='dialogVisibility'>
 41 | </ejs-dialog>
 42 | 
 43 | <ejs-dialog id="sentMailDialog" #sentMailDialog width="335px" header="Mail Sent" content='<div class="dlg-content-style"><span>Your mail has been sent successfully.</span></div>'
 44 |     [target] ='dlgTarget' [isModal]='modalDialog' [animationSettings]='dlgAnimationSettings' closeOnEscape='true'
 45 |     [buttons] ='sentDlgButtons'  [visible]='dialogVisibility'>
 46 | </ejs-dialog>
 47 | <ejs-dialog id="discardDialog" #discardDialog width="335px" header="Discard Message" [content]='discardDlgContent' closeOnEscape='true'
 48 |     [target]='dlgTarget' [isModal]='modalDialog' [animationSettings]='dlgAnimationSettings' [visible]='dialogVisibility' >
 49 | </ejs-dialog>
 50 | <div id="newMailSeparateDialog"></div>
 51 | <ejs-dialog id="replyAllSeparateDialog" #replyAllSeparateDialog width="80%" height="93%" [target]='dlgTarget' [animationSettings]='dlgAnimationSettings'
 52 |     closeOnEscape='true' [isModal]='nonModalDialog' [visible]='dialogVisibility'>
 53 |     <ng-template #content>
 54 |           <div id='reading-pane-popup'>
 55 |             <readingpane-section #readingPaneElement></readingpane-section>
 56 |         </div>
 57 |      </ng-template>
 58 | </ejs-dialog>
 59 | <ejs-dialog id="sentMailNewWindow" #sentMailNewWindow width="335px" header="Mail Sent" content='<div class="dlg-content-style"><span>Your mail has been sent successfully.</span></div>'
 60 |     [target]='dlgTarget' [isModal]='nonModalDialog' [animationSettings]='dlgAnimationSettings' closeOnEscape='true'
 61 |     [buttons] = 'sentNewDlgButtons' [visible]='dialogVisibility'>
 62 | </ejs-dialog>
 63 | <ejs-dialog id="discardNewWindow" #discardNewWindow width="335px" header="Discard Message" [content]='discardDlgContent'
 64 |     [target]='dlgTarget' [isModal]='nonModalDialog' [animationSettings]='dlgAnimationSettings' closeOnEscape='true' 
 65 |     [visible]='dialogVisibility'>
 66 | </ejs-dialog>
 67 | 
 68 | <div id="popupMailId" style="position:absolute;width:320px">
 69 |         <div id='popupContent' style="padding:10px 10px; width: 320px; height: 85px; background-color:#F2F2F2; color:#252525">
 70 |         <div style="float:left;pointer-events: none;">
 71 |             <div>
 72 |                 <div id='popup-image' class='logo logo-style1 popup-logo-style'></div>
 73 |             </div>
 74 |         </div>
 75 |         <div style="left: 65px; top:5px; position: absolute;pointer-events: none;">
 76 |             <div style="margin-top: 2px">
 77 |                 <span id='popup-contact' class="popup-subjectstyle-text" style="font-size:16px;font-weight:bold"> Richelle Mead </span>
 78 |             </div>
 79 |             <div class="popup-subjectstyle">
 80 |                 <span id='popup-subject' class="popup-subjectstyle-text"> Networking Referral </span>
 81 |             </div>
 82 |             <div class="popup-subjectstyle">
 83 |                 <span id='popup-message-content' class="popup-subjectstyle-text"> Dear Kelly, I was being referred to you by George Peterson from ROYALES Company in New York. He was ...</span>
 84 |             </div>
 85 |         </div>
 86 |         <div style="left:300px;position:absolute;font-size: 12px;">
 87 |             <span class="e-btn-icon ej-icon-Close"></span>
 88 |         </div>
 89 |     </div>
 90 | </div>
 91 | 
 92 | <div id='persontooltip' style="display: none;">
 93 |     <div id="persontooltipcontent" style="width: 304px;height: 91px;">
 94 |         <div style="float:left;width: 75px;height: 70px;">
 95 |             <div style="width: 65px;height: 65px;">
 96 |                 <img id='persontooltipimage' style="width: 100%;height: 100%;border-radius: 33px;">
 97 |             </div>
 98 |         </div>
 99 |         <div style="width: 213px;height: 70px;float:left;">
100 |             <div style="margin-top: 17px;font-size:medium;">
101 |                 <span id='persontooltipname'>Roman R</span>
102 |             </div>
103 |             <div style="font-size:small;margin-top: 5px;">
104 |                 <span id='persontooltipemail'>Roman@syncfusion.com</span>
105 |             </div>
106 |             <button ejs-button id="sentemail" iconCss='ej-icon-Mail' cssClass='btn-sentMail' style="margin-top: 18px;margin-left: -74px;">Sent Email</button>
107 |         </div>
108 |     </div>
109 | </div>
110 | 


--------------------------------------------------------------------------------
/src/app/content-area/content-area.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, HostListener, ViewChild, AfterContentInit } from '@angular/core';
  2 | import { ContextMenuComponent, MenuItemModel, MenuEventArgs, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-angular-navigations';
  3 | import { SortOrder } from '@syncfusion/ej2-angular-lists';
  4 | import { DialogComponent } from '@syncfusion/ej2-angular-popups';
  5 | import { ReadingPaneComponent } from './readingpane/readingpane.component';
  6 | import { DataService } from '../data-service';
  7 | import { Popup, Dialog } from '@syncfusion/ej2-popups';
  8 | import { LeftSidebarComponent } from './sidebar/sidebar.component';
  9 | import { PopupComponent } from './popup/popup.component';
 10 | import { ContentComponent } from './content/content.component';
 11 | import { Subscription } from 'rxjs';
 12 | @Component({
 13 |     selector: 'content-area-section',
 14 |     templateUrl: 'content-area.component.html',
 15 | })
 16 | 
 17 | export class ContentAreaComponent implements AfterContentInit {
 18 | 
 19 |     constructor(private data: DataService, private buttonClick: DataService) {
 20 |     }
 21 | 
 22 |     @ViewChild('treeContextMenu')
 23 |     private treeContextMenu: any;
 24 |     @ViewChild('filterContextMenu')
 25 |     private filterContextMenu: any;
 26 |     @ViewChild('sentMailDialog')
 27 |     public dlgSentMail: DialogComponent;
 28 |     @ViewChild('sentMailNewWindow')
 29 |     public dlgSentMailNew: DialogComponent;
 30 |     @ViewChild('discardDialog')
 31 |     public dlgDiscard: DialogComponent;
 32 |     @ViewChild('discardNewWindow')
 33 |     public dlgDiscardNew: DialogComponent;
 34 |     @ViewChild('replyAllSeparateDialog')
 35 |     public dlgReplyAllWindow: DialogComponent;
 36 |     public dlgNewWindow: Dialog;
 37 |     @ViewChild('favoriteDialog')
 38 |     public dlgFavorite: DialogComponent;
 39 |     @ViewChild('deleteDialog')
 40 |     public dlgDelete: DialogComponent;
 41 |     @ViewChild('readingPaneElement')
 42 |     public readingPaneComponent: ReadingPaneComponent;
 43 |     @ViewChild('sidebarSection') 
 44 |     public sidebarSection: LeftSidebarComponent;
 45 |     @ViewChild('popupSection')
 46 |     public popupSideBar: PopupComponent;
 47 |     @ViewChild('contentSection') 
 48 |     public defaultSplitter: ContentComponent;
 49 |     public popupMail: Popup;
 50 | 
 51 |     // Tree ContextMenu binding properties
 52 |     public treeMenuItems: MenuItemModel[] = [
 53 |         { text: 'Create new subfolder' }, { text: 'Rename' }, { text: 'Delete' },
 54 |         { text: 'Add to Favorites' }, { text: 'Mark all as read' }
 55 |     ];
 56 | 
 57 |     // Filter ContextMenu binding properties
 58 |     public filterMenuItems: MenuItemModel[] = [
 59 |         { text: 'All', iconCss: 'ej-icon-Right' }, { text: 'Unread' },
 60 |         { text: 'Flagged' }, { separator: true }, { text: 'Sort by', items: [{ text: 'None' },
 61 |         { text: 'Ascending', iconCss: 'ej-icon-Right' }, { text: 'Descending' }] }
 62 |     ];
 63 | 
 64 |     // Dialog binding properties
 65 |     public dialogVisibility: boolean = false;
 66 |     public dlgTarget: HTMLElement = document.body;
 67 |     public dlgAnimationSettings: Object = { effect: 'None' };
 68 |     public sentDlgButtons: Object[] = [{
 69 |         click: this.sendExitClick.bind(this),
 70 |         buttonModel: { content: 'OK', cssClass: 'e-flat', isPrimary: true }
 71 |     }];
 72 |     public sentNewDlgButtons: Object[] = [{
 73 |         click: this.sendExitClick.bind(this),
 74 |         buttonModel: { content: 'OK', cssClass: 'e-flat', isPrimary: true }
 75 |     }];
 76 |     public discardDlgContent: string = '<div class="discardOkDiv dlg-content-style1" style="cursor:pointer">' +
 77 |         '<span style="color:white" class="dlg-discard-text-style">Discard</span> <br/>' +
 78 |         '<span style="color:white; font-weight:normal" class="dlg-discard-child-text-style">This message will be deleted</span>' +
 79 |     '</div> <br/>' +
 80 |     '<div class="discardCancelDiv dlg-content-style" style="cursor:pointer">' +
 81 |         '<span class="dlg-discard-text-style">Don'+"'"+'t Discard</span> <br/>' +
 82 |         '<span style="font-weight:normal" class="dlg-discard-child-text-style">Return to the message for further editing</span>' +
 83 |     '</div>';
 84 |     public favoritesDlgButtons: Object[] = [
 85 |         {
 86 |             click: this.btnFavoriteOKClick.bind(this),
 87 |             buttonModel: { content: 'Yes', cssClass: 'e-flat', isPrimary: true }
 88 |         },
 89 |         {
 90 |             click: this.btnFavoriteCancelClick.bind(this),
 91 |             buttonModel: { content: 'No', cssClass: 'e-flat' }
 92 |         }
 93 |     ];
 94 | 
 95 |     public deleteDlgButtons: Object[] =  [
 96 |         {
 97 |             click: this.btnDeleteOKClick.bind(this), buttonModel: { content: 'Yes', cssClass: 'e-flat', isPrimary: true }
 98 |         },
 99 |         {
100 |             click: this.btnDeleteCancelClick.bind(this), buttonModel: { content: 'No', cssClass: 'e-flat' }
101 |         }
102 |     ];
103 | 
104 |     //Class Members
105 |     public modalDialog: boolean = true;
106 |     public nonModalDialog: boolean = false;
107 |     private registerDiscardEvents: boolean = false;
108 |     private lastIndex: number = 31;
109 |     private discardSubscription: Subscription
110 |     private filterSubscription: Subscription
111 |     private closeSubscription: Subscription
112 | 
113 |     public ngOnInit(): void {
114 |         this.discardSubscription = this.buttonClick.onDiscardClick.subscribe((message) => {
115 |             this.discardButtonClick();
116 |         })
117 |         this.filterSubscription = this.buttonClick.onFilterClick.subscribe((message) => {
118 |             this.btnFilterClick();
119 |         }) 
120 |         this.closeSubscription = this.buttonClick.onCloseClick.subscribe((message) => {
121 |             this.btnCloseClick();
122 |         })
123 |     }
124 | 
125 |     public ngOnDestroy(): void {
126 |         this.discardSubscription.unsubscribe();
127 |         this.filterSubscription.unsubscribe();
128 |         this.closeSubscription.unsubscribe();
129 |     }
130 | 
131 |     public ngAfterContentInit(): void {
132 |         document.onclick = this.documentClick.bind(this);
133 |         document.ondblclick = this.documentDoubleClick.bind(this);
134 |         let popupContent: HTMLElement = document.getElementById('popupContent');
135 |         popupContent.onclick = this.popupContentClick.bind(this);
136 |     }
137 | 
138 |     public treeMenuBeforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
139 |         let key: string = 'PID';
140 |         let parentNode: string = this.data.treeviewSelectedData[key].toString();
141 |         key = 'Favorite';
142 |         let favorite: string = this.data.treeviewSelectedData[key].toString();
143 |         if (favorite === 'Favorite-Composite') {
144 |             favorite = 'Remove from Favorites';
145 |         } else {
146 |             favorite = 'Add to Favorites';
147 |         }
148 |         this.treeContextMenu.items[3].text = favorite;
149 |         this.treeContextMenu.dataBind();
150 |         if (parentNode === '1') {
151 |             this.treeContextMenu.hideItems(['Create new subfolder', 'Rename']);
152 |         } else {
153 |             this.treeContextMenu.showItems(['Create new subfolder', 'Rename']);
154 |         }
155 |     }
156 | 
157 |     public treeMenuSelect(args: MenuEventArgs): void {
158 |         if (args.item) {
159 |             let target: HTMLElement = this.data.treeSelectedElement.getElementsByClassName('e-btn-icon')[0] as HTMLElement;
160 |             if (args.item.text === 'Create new subfolder') {
161 |                 this.lastIndex += 1;
162 |                 let key: string = 'ID';
163 |                 let item: {[key: string]: Object} = {
164 |                     'ID': this.lastIndex, 'PID': this.data.treeviewSelectedData[key].toString(), 'Name': 'New Folder' + this.lastIndex,
165 |                     'HasChild': false, 'Expanded': false, 'Count': '',
166 |                     'Favorite': 'Favorite', 'FavoriteMessage': 'Add to Favorites'
167 |                 };
168 |                 this.data.treeObj.addNodes([item], null, null);
169 |                 this.data.treeDataSource.push(item);
170 |             } else if (args.item.text === 'Rename') {
171 |                 this.data.treeObj.beginEdit(this.data.treeviewSelectedData['ID'].toString());
172 |             } else if (args.item.text === 'Delete') {
173 |                 if (this.data.selectedFolderName === 'Deleted Items') {
174 |                     this.dlgDelete.content = '<div class="dlg-content-style"><span>Are you sure you want to permanently' +
175 |                     ' delete all the items in Deleted items?</span></div>';
176 |                     this.dlgDelete.header = 'Delete All';
177 |                 } else {
178 |                     this.dlgDelete.content = '<div class="dlg-content-style"><span>Are you sure you want to move all ' +
179 |                     'its content to Deleted items?</span></div>';
180 |                     this.dlgDelete.header = 'Delete Folder Items';
181 |                 }
182 |                 this.dlgDelete.show();
183 |             } else if (args.item.text === 'Mark all as read') {
184 |                 this.data.markAllRead();
185 |             } else if (args.item.text === 'Add to Favorites') {
186 |                 this.favoriteAction('add', target);
187 |             } else if (args.item.text === 'Remove from Favorites') {
188 |                 this.favoriteAction('Remove', target);
189 |             }
190 |         }
191 |     }
192 | 
193 |     public filterMenuSelect(args: MenuEventArgs): void {
194 |         if (args.item) {
195 |             if (args.item.text === 'Ascending' || args.item.text === 'Descending' ||  args.item.text === 'None') {
196 |                 this.data.grpListObj.sortOrder = args.item.text as SortOrder;
197 |                 for (let i: number = 0; i < this.filterContextMenu.items[4].items.length; i++) {
198 |                     this.filterContextMenu.items[4].items[i].iconCss = '';
199 |                 }
200 |                 args.item.iconCss = 'ej-icon-Right';
201 |             } else if (args.item.text !== 'Sort by') {
202 |                 this.data.clearFilterMenu();
203 |                 let dataSource: { [key: string]: Object }[] =
204 |                 this.data.getFilteredDataSource(this.data.messageDataSource, 'Folder', this.data.selectedFolderName);
205 |                 if (args.item.text === 'All') {
206 |                     this.data.grpListObj.dataSource = dataSource;
207 |                 } else if (args.item.text === 'Flagged') {
208 |                     this.data.grpListObj.dataSource = this.data.getFilteredDataSource(dataSource, 'Flagged', 'Flagged');
209 |                 } else if (args.item.text === 'Unread') {
210 |                     this.data.grpListObj.dataSource = this.data.getFilteredDataSource(dataSource, 'ReadStyle', 'Unread');
211 |                 }
212 |                 args.item.iconCss = 'ej-icon-Right';
213 |             }
214 |         }
215 |     }
216 | 
217 |     private btnFilterClick(): void {
218 |         let clientRect: ClientRect = document.getElementById('btnFilter').getBoundingClientRect();
219 |         this.filterContextMenu.open(clientRect.top + 25, clientRect.left);
220 |     }
221 | 
222 |     private btnCloseClick(): void {
223 |         let headerRP: Element = document.getElementsByClassName('header-right-pane selected')[0];
224 |         headerRP.className = 'header-right-pane';
225 |         this.popupSideBar.hideSidebar();
226 |     }
227 | 
228 |     private discardButtonClick(): void {
229 |         if (!this.registerDiscardEvents) {
230 |             let discardContent: HTMLCollectionOf<HTMLElement> =
231 |             document.getElementsByClassName('discardOkDiv') as HTMLCollectionOf<HTMLElement>;
232 |             for (let i: number = 0; i < discardContent.length; i++) {
233 |                 discardContent[i].addEventListener('click', this.discardOkClick.bind(this));
234 |             }
235 |             discardContent = document.getElementsByClassName('discardCancelDiv') as HTMLCollectionOf<HTMLElement>;
236 |             for (let i: number = 0; i < discardContent.length; i++) {
237 |                 discardContent[i].addEventListener('click', this.discardCancelClick.bind(this));
238 |             }
239 |             this.registerDiscardEvents = true;
240 |         }
241 |         if (this.dlgNewWindow.visible || this.dlgReplyAllWindow.visible) {
242 |             this.dlgDiscardNew.show();
243 |         } else {
244 |             this.dlgDiscard.show();
245 |         }
246 |     }
247 | 
248 |     private discardOkClick(): void {
249 |         this.discardClick();
250 |     }
251 | 
252 |     private discardCancelClick(): void {
253 |         if (this.dlgNewWindow.visible || this.dlgReplyAllWindow.visible) {
254 |             this.dlgDiscardNew.hide();
255 |         } else {
256 |             this.dlgDiscard.hide();
257 |         }
258 |     }
259 | 
260 |     private sendExitClick(): void {
261 |         if (this.dlgNewWindow.visible || this.dlgReplyAllWindow.visible) {
262 |             this.dlgSentMailNew.hide();
263 |         } else {
264 |             this.dlgSentMail.hide();
265 |         }
266 |         this.discardClick();
267 |     }
268 | 
269 |     private btnFavoriteOKClick(): void {
270 |         let key: string = 'PID';
271 |         let parentID: string = this.data.treeviewSelectedData[key].toString();
272 |         if (parentID === '1') {
273 |             key = 'ID';
274 |             this.removeTreeItem(this.data.treeviewSelectedData[key].toString());
275 |             this.data.treeDataSource.splice(this.data.treeDataSource.indexOf(this.data.treeviewSelectedData), 1);
276 |         } else {
277 |             for (let i: number = 0; i < this.data.treeDataSource.length; i++) {
278 |                 let key: string = 'PID';
279 |                 let treeData: { [key: string]: Object } = this.data.treeDataSource[i];
280 |                 if (treeData[key] && treeData[key].toString() === '1') {
281 |                     key = 'Name';
282 |                     if (treeData[key].toString() === this.data.selectedFolderName) {
283 |                         key = 'ID';
284 |                         this.removeTreeItem(treeData[key].toString());
285 |                         this.data.treeDataSource.splice(i, 1);
286 |                         break;
287 |                     }
288 |                 }
289 |             }
290 |         }
291 |         this.dlgFavorite.hide();
292 |     }
293 | 
294 |     private btnFavoriteCancelClick(): void {
295 |         this.dlgFavorite.hide();
296 |     }
297 | 
298 |     private btnDeleteOKClick(): void {
299 |         let folderMessages: { [key: string]: Object }[] =
300 |         this.data.getFilteredDataSource(this.data.messageDataSource, 'Folder', this.data.selectedFolderName);
301 |         if (this.data.selectedFolderName === 'Deleted Items') {
302 |             for (let i: number = 0; i < folderMessages.length; i++) {
303 |                 this.data.messageDataSource.splice(this.data.messageDataSource.indexOf(folderMessages[i]), 1);
304 |             }
305 |         } else {
306 |             for (let i: number = 0; i < folderMessages.length; i++) {
307 |                 let key: string = 'Folder';
308 |                 folderMessages[i][key] = 'Deleted Items';
309 |             }
310 |         }
311 |         this.data.grpListObj.dataSource = [];
312 |         this.data.showEmptyMessage();
313 |         this.dlgDelete.hide();
314 |     }
315 | 
316 |     private btnDeleteCancelClick(): void {
317 |         this.dlgDelete.hide();
318 |     }
319 | 
320 |     private removeTreeItem(id: string): void {
321 |         this.data.treeObj.removeNodes([id]);
322 |         let element: Element = document.getElementsByClassName('ej-icon-Favorite-Composite ' + this.data.selectedFolderName)[0];
323 |         element.className = 'e-btn-icon ej-icon-Favorite ' + this.data.selectedFolderName;
324 |         let parent: HTMLElement = element.parentNode as HTMLElement;
325 |         parent.title = 'Add to Favorites';
326 |         let key: string = 'FavoriteMessage';
327 |         this.data.treeviewSelectedData[key] = 'Add to Favorites';
328 |         key = 'Favorite';
329 |         this.data.treeviewSelectedData[key] = 'Favorite';
330 |     }
331 | 
332 |     public discardClick(): void {
333 |         if (this.data.grpListObj.getSelectedItems()) {
334 |             this.data.showSelectedMessage();
335 |         } else {
336 |             this.data.showEmptyMessage();
337 |         }
338 |         if (this.dlgNewWindow.visible || this.dlgReplyAllWindow.visible) {
339 |             this.dlgDiscardNew.hide();
340 |             if (this.dlgNewWindow.visible) {
341 |                 this.dlgNewWindow.hide();
342 |             } else if (this.dlgReplyAllWindow.visible) {
343 |                 this.dlgReplyAllWindow.hide();
344 |             }
345 |         } else {
346 |             this.dlgDiscard.hide();
347 |         }
348 |         let contentWrapper: Element = document.getElementsByClassName('content-wrapper')[0];
349 |         contentWrapper.className = 'content-wrapper';
350 |     }
351 | 
352 |     private favoriteAction(type: string, target: HTMLElement): void {
353 |         if (type === 'add') {
354 |             target.className = 'e-btn-icon ej-icon-Favorite-Composite ' + this.data.selectedFolderName;
355 |             (target.parentNode as HTMLElement).title = 'Remove from Favorites';
356 |             let treeData: { [key: string]: Object } = this.data.cloneObject(this.data.treeviewSelectedData);
357 |             let key: string = 'PID';
358 |             treeData[key] = '1';
359 |             key = 'ID';
360 |             treeData[key] = Number(treeData[key]) + 111;
361 |             key = 'Favorite';
362 |             this.data.treeviewSelectedData[key] = treeData[key] = 'Favorite-Composite';
363 |             key = 'Count';
364 |             treeData[key] = (target.parentNode.parentNode.childNodes[1].childNodes[0] as HTMLElement).innerHTML;
365 |             key = 'FavoriteMessage';
366 |             this.data.treeviewSelectedData[key] = treeData[key] = 'Remove from Favorites';
367 |             this.data.treeDataSource.push(treeData);
368 |             this.data.treeObj.addNodes([treeData], null, null);
369 |         } else {
370 |             this.dlgFavorite.show();
371 |         }
372 |     }
373 | 
374 |     private headerContent(headerElement: HTMLElement): void {
375 |         let headerRP: Element = document.getElementsByClassName('header-right-pane selected')[0];
376 |         if (headerRP) {
377 |             headerRP.className = 'header-right-pane';
378 |         }
379 |         let contentWrapper: Element = document.getElementsByClassName('row content')[0];
380 |         contentWrapper.className = contentWrapper.className.replace(' show-header-content', '') + ' show-header-content';
381 |         let notificationElement: HTMLElement = document.getElementsByClassName('notification-content')[0] as HTMLElement;
382 |         let settingsElement: HTMLElement = document.getElementsByClassName('settings-content')[0] as HTMLElement;
383 |         let aboutElement: HTMLElement = document.getElementsByClassName('about-content')[0] as HTMLElement;
384 |         let userElement: HTMLElement = document.getElementsByClassName('profile-content')[0] as HTMLElement;
385 |         let txtHeaderContent: HTMLElement = document.getElementById('txtHeaderContent');
386 |         notificationElement.style.display = 'none';
387 |         settingsElement.style.display = 'none';
388 |         aboutElement.style.display = 'none';
389 |         userElement.style.display = 'none';
390 |         headerElement.className = headerElement.className + ' ' + 'selected';
391 |         switch (headerElement.id) {
392 |             case 'notification-div':
393 |                 notificationElement.style.display = 'block';
394 |                 txtHeaderContent.innerHTML = 'Notification';
395 |                 break;
396 |             case 'settings-div':
397 |                 settingsElement.style.display = 'block';
398 |                 txtHeaderContent.innerHTML = 'Settings';
399 |                 break;
400 |             case 'profile-div':
401 |                 userElement.style.display = 'block';
402 |                 txtHeaderContent.innerHTML = 'My accounts';
403 |                 break;
404 |             case 'about-div':
405 |                 aboutElement.style.display = 'block';
406 |                 txtHeaderContent.innerHTML = 'Help';
407 |                 break;
408 |         }
409 |     }
410 | 
411 |     @HostListener('window:resize', ['$event'])
412 |     @HostListener('window:load', ['$event'])
413 |     private onWindowResize(evt: Event): void {
414 |         let messagePane: HTMLElement = document.getElementById('message-pane-div');
415 |         let contentArea: Element = document.getElementsByClassName('row content')[0];
416 |         let isReadingPane: boolean = (contentArea.className.indexOf('show-reading-pane') === -1);
417 |         if (!isReadingPane && window.innerWidth < 605) {
418 |             return;
419 |         }
420 |         if (window.innerWidth < 1200) {
421 |             let headerRP: Element = document.getElementsByClassName('header-right-pane selected')[0];
422 |             if (headerRP) {
423 |                 headerRP.className = 'header-right-pane';
424 |             }
425 |             contentArea.className = 'row content';
426 |             this.popupSideBar.type="Over";
427 |         } else {
428 |             if (contentArea.className.indexOf('show-header-content') === -1) {
429 |                 contentArea.className = 'row content';
430 |             } else {
431 |                 contentArea.className = 'row content show-header-content';
432 |             }
433 |             this.popupSideBar.type="Push";
434 |         }
435 |         if (window.innerWidth < 1090) {
436 |             contentArea.className = 'row content sidebar-hide';
437 |             messagePane.classList.remove("msg-top-margin");
438 |             this.sidebarSection.type = "Over";
439 |             this.sidebarSection.sidebar.showBackdrop = true;
440 |         } else {
441 |             messagePane.classList[ this.data.isNewMailClick ? 'add' : 'remove' ]('msg-top-margin');
442 |             this.hideSideBar();
443 |             this.sidebarSection.type = "Push";
444 |             this.sidebarSection.sidebar.showBackdrop=false;
445 |             this.sidebarSection.showSidebar();
446 |         }
447 |         if (window.innerWidth < 605) {
448 |             if (isReadingPane) {
449 |                 contentArea.className = contentArea.className + ' ' + 'show-message-pane';
450 |             }
451 |             messagePane.classList.remove("msg-top-margin");
452 |             if (!messagePane.classList.contains('msg-top-margin')) {
453 |                 this.data.showEmptyMessage();
454 |             }
455 |             this.defaultSplitter.isDesktopMode = false;
456 |         }
457 |         else {
458 |             this.defaultSplitter.isDesktopMode = true;
459 |             if (document.getElementById('splitBar') && document.getElementById('splitBar').childNodes.length === 0) {
460 |                 this.defaultSplitter.renderSplitter();
461 |             }
462 |         }
463 |     }
464 | 
465 |     public hideSideBar(): void {
466 |         this.data.hideSideBar();
467 |     }
468 | 
469 |     public documentDoubleClick(evt: MouseEvent): void {
470 |         if (evt.target instanceof HTMLElement) {
471 |             let target: HTMLElement = evt.target as HTMLElement;
472 |             if (target.className.indexOf('template-container') !== -1) {
473 |                 if (!this.dlgReplyAllWindow.content) {
474 |                     this.dlgReplyAllWindow.refresh();
475 |                 }
476 |                 this.dlgReplyAllWindow.show();
477 |                 this.readingPaneComponent.bindReadingPaneData(this.data.getSelectedMessage());
478 |             }
479 |         }
480 |     }
481 | 
482 |     public documentClick(evt: MouseEvent): void {
483 |         if (!this.data.readingPaneComponent) {
484 |              this.data.readingPaneComponent= this.readingPaneComponent;
485 |         }
486 |         let key: string = 'parentID';
487 |         if (evt.target instanceof HTMLElement) {
488 |             let target: HTMLElement = evt.target as HTMLElement;
489 |             if (target.className.indexOf('header-right-pane') !== -1) {
490 |                 this.headerContent(evt.target as HTMLElement);
491 |                 this.popupSideBar.showSidebar();
492 |             } else if (!this.readingPaneComponent.dropdownSelectRP && this.dlgReplyAllWindow.visible &&
493 |                 target.innerText === this.readingPaneComponent.ddlLastRplyValueRP ) {
494 |                 this.readingPaneComponent.showMailDialogRP(this.readingPaneComponent.ddlLastRplyValueRP);
495 |             } else if (!this.data.dropdownSelect && !this.dlgReplyAllWindow.visible && target.innerText === this.data.ddlReplyAllValue) {
496 |                 this.data.showNewMailPopup(this.data.ddlReplyAllValue);
497 |             } else {
498 |                 if (target.tagName === 'SPAN' || (target.children && target.children.length > 0)) {
499 |                     target = target.tagName === 'SPAN' ? target : target.children[0] as HTMLElement;
500 |                     if (target.className === 'e-btn-icon ej-icon-Favorite ' + this.data.selectedFolderName) {
501 |                         this.favoriteAction('add', target);
502 |                     } else if (target.className === 'e-btn-icon ej-icon-Favorite-Composite ' + this.data.selectedFolderName) {
503 |                         this.favoriteAction('remove', target);
504 |                     } else if ((target.parentNode as HTMLElement).className === 'listview-btn') {
505 |                         let selectedMessage: { [key: string]: Object } = this.data.getSelectedMessage();
506 |                         if (target.className.indexOf('ej-icon-Delete') !== -1) {
507 |                             this.data.messageDataSource.splice(this.data.messageDataSource.indexOf(selectedMessage), 1);
508 |                             key = 'ContactID';
509 |                             this.data.grpListObj.removeItem({ id: selectedMessage[key].toString(), text: selectedMessage['text'].toString() });
510 |                         } else if (target.className.indexOf('ej-icon-Flag_1') !== -1) {
511 |                             this.data.flagListItem(target, selectedMessage);
512 |                         } else if (target.className.indexOf('ej-icon-Mark-as-read') !== -1 && !this.data.isItemClick) {
513 |                             let parentNode: HTMLElement = target.parentNode as HTMLElement;
514 |                             if (parentNode.title === 'Mark as read') {
515 |                                 parentNode.title = 'Mark as unread';
516 |                                 key = 'ContactID';
517 |                                 this.data.setReadStyleMessage(selectedMessage[key].toString(), 'Read');
518 |                             } else if (parentNode.title === 'Mark as unread') {
519 |                                 parentNode.title = 'Mark as read';
520 |                                 key = 'ContactID';
521 |                                 this.data.setReadStyleMessage(selectedMessage[key].toString(), 'Unread');
522 |                             }
523 |                         }
524 |                     }
525 |                 }
526 |             }
527 |         }
528 |         this.newMailWindowItemClick();
529 |         this.readingPaneItemClick();
530 |         this.data.isItemClick = false;
531 |         this.data.dropdownSelect = false;
532 |     }
533 | 
534 |     public newMailWindowItemClick(): void {
535 |         if (this.data.newMailComponent.selectedToolbarItem) {
536 |             if (this.data.newMailComponent.selectedToolbarItem === 'tb-item-window-mail') {
537 |                 this.discardClick();
538 |                 this.dlgNewWindow.content = document.getElementById('newmailContent');
539 |                 this.dlgNewWindow.refresh();
540 |                 this.dlgNewWindow.show();
541 |             } else if (this.data.newMailComponent.selectedToolbarItem === 'tb-item-back-mail') {
542 |                 this.dlgNewWindow.hide();
543 |             } else if (this.data.newMailComponent.selectedToolbarItem === 'Send') {
544 |                 this.data.sendClick();
545 |             } else if (this.data.newMailComponent.selectedToolbarItem === 'Discard') {
546 |                 this.discardButtonClick();
547 |             }
548 |         }
549 |         this.data.newMailComponent.resetSelectedToolbarItem('');
550 |     }
551 | 
552 |     public readingPaneItemClick(): void {
553 |         if (this.readingPaneComponent.selectedRPToolbarItem) {
554 |             if (this.readingPaneComponent.selectedRPToolbarItem === 'SendClick') {
555 |                 this.data.sendClick();
556 |             } else if (this.readingPaneComponent.selectedRPToolbarItem === 'DiscardClick') {
557 |                 this.discardButtonClick();
558 |             } else if (this.readingPaneComponent.selectedRPToolbarItem === 'DeleteClick' ||
559 |                 this.readingPaneComponent.selectedRPToolbarItem === 'JunkClick') {
560 |                 let selectedMessage: { [key: string]: Object } = this.data.getSelectedMessage();
561 |                 this.data.messageDataSource.splice(this.data.messageDataSource.indexOf(selectedMessage), 1);
562 |                 let key: string = 'ContactID';
563 |                 this.data.grpListObj.removeItem({ id: selectedMessage[key].toString(), text: selectedMessage['text'].toString() });
564 |                 this.data.showEmptyMessage();
565 |                 this.dlgReplyAllWindow.hide();
566 |             } else if (this.readingPaneComponent.selectedRPToolbarItem === 'ClosePopup') {
567 |                 this.dlgReplyAllWindow.hide();
568 |             }
569 |         }
570 |         this.readingPaneComponent.resetRPSelectedItem('');
571 |     }
572 | 
573 |     public popupContentClick(evt: MouseEvent): void {
574 |         if (evt.target instanceof HTMLElement) {
575 |             let target: HTMLElement = evt.target as HTMLElement;
576 |             if (target.className !== 'e-btn-icon ej-icon-Close' && window.innerWidth >= 1090) {
577 |                 let key: string = 'ContactID';
578 |                 this.data.grpListObj.selectItem({ id: this.data.messageDataSource[0][key].toString() });
579 |                 if (!this.dlgReplyAllWindow.content) {
580 |                     this.dlgReplyAllWindow.refresh();
581 |                 }
582 |                 this.dlgReplyAllWindow.show();
583 |                 this.readingPaneComponent.bindReadingPaneData(this.data.messageDataSource[0]);
584 |             }
585 |             this.popupMail.hide();
586 |         }
587 |     }
588 | 
589 |     public ngAfterViewInit(): void {
590 |         this.data.filterContextMenu = this.filterContextMenu;
591 |         this.data.popupMail = this.popupMail;
592 |         this.data.dlgNewWindow = this.dlgNewWindow;
593 |         this.data.dlgReplyAllWindow = this.dlgReplyAllWindow;
594 |         this.data.dlgSentMailNew = this.dlgSentMailNew;
595 |         this.data.dlgSentMail = this.dlgSentMail;
596 |         this.data.readingPaneComponent = this.readingPaneComponent;
597 |         this.data.sidebarSection = this.sidebarSection;
598 |         this.popupMail = new Popup(document.getElementById('popupMailId'),{
599 |             position: {X: 'right', Y: 'top'},
600 |             relateTo: '#content-area',
601 |             offsetX: -5,
602 |             offsetY: 5,
603 |         });
604 |          this.dlgNewWindow= new Dialog({
605 |             width: '80%',
606 |             height: '93%',
607 |             isModal: this.nonModalDialog,
608 |             target: this.dlgTarget,
609 |             animationSettings: this.dlgAnimationSettings,
610 |             closeOnEscape: true,
611 |             allowDragging: true,
612 |             visible: this.dialogVisibility
613 |         });
614 |         this.dlgNewWindow.appendTo('#newMailSeparateDialog')
615 |     }
616 | }


--------------------------------------------------------------------------------
/src/app/content-area/content/content-pane/content-pane.component.html:
--------------------------------------------------------------------------------
 1 | <div id='reading-pane-div' class='reading-pane customScrollBar'>
 2 |     <div id='emptyMessageDiv' style='width: 100%;text-align: center; vertical-align: middle; padding: 15px;height:100%; background-color:#fff;'>
 3 |         <div style="top:35%; left: 40%; position: absolute; display: block">
 4 |             <div class="emptyImageDiv"></div> <br/>
 5 |             <span class="emptyDivText">Choose a message to read it.</span>
 6 |         </div>
 7 |     </div>
 8 |     <ejs-accordion id='accordian' #accordian style='display: none;'></ejs-accordion>
 9 |     
10 |     <div id='mailarea' style='display: none; height:100%; background-color:#fff;'>
11 |     </div>
12 |     <div id="newmailContent">
13 |         <newmail-section #newmailPane></newmail-section>
14 |     </div>
15 | </div>


--------------------------------------------------------------------------------
/src/app/content-area/content/content-pane/content-pane.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ViewEncapsulation, OnInit, ViewChild , EventEmitter, Output} from '@angular/core';
 2 | import { NewMailComponent } from './newmail/newmail.component';
 3 | import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-angular-popups';
 4 | import { AccordionComponent } from '@syncfusion/ej2-angular-navigations';
 5 | import { DataService } from '../../../data-service';
 6 | 
 7 | @Component({
 8 |     selector: 'content-pane-section',
 9 |     templateUrl: './content-pane.component.html',
10 |     encapsulation: ViewEncapsulation.None,
11 | })
12 | 
13 | export class ContentPaneComponent implements OnInit {
14 | 
15 |     /** Configurations for the Content pane page */
16 |     constructor(private _data: DataService) {
17 |     }
18 |     @ViewChild('newmailPane')
19 |     public newMailComponent: NewMailComponent;
20 |     @ViewChild('accordian')
21 |     public acrdnObj: AccordionComponent;
22 | 
23 |     public ngOnInit(): void {
24 |     }
25 | 
26 |     public ngAfterViewInit(): void {
27 |         this._data.newMailComponent = this.newMailComponent;
28 |         this._data.acrdnObj = this.acrdnObj;
29 |     }
30 | }


--------------------------------------------------------------------------------
/src/app/content-area/content/content-pane/newmail/newmail.component.html:
--------------------------------------------------------------------------------
  1 | <div class="toolbar-parent-newmail">
  2 |     <div style='width:100%;height:40px;'>
  3 |         <ejs-toolbar id='toolbar_newmail' #toolbarHeader height='100%' overflowMode='Popup' (clicked)="toolbarNewMailClick($event)">  
  4 |             <e-items>
  5 |                 <e-item  prefixIcon ='ej-icon-Send tb-icons' text='Send' tooltipText='Send' ></e-item>
  6 |                 <e-item  prefixIcon ='ej-icon-Attach tb-icons' text='Attach' tooltipText='Attach' ></e-item>
  7 |                 <e-item  text ='Discard' ></e-item>
  8 |                 <e-item  cssClass='tb-item-more tb-item-more-mail' tooltipText='More actions'>
  9 |                    <ng-template #template>
 10 |                         <div>
 11 |                             <ejs-dropdownlist id='moreList2' #moreItemList2 [dataSource]='moreMailList' 
 12 |                                 value="Show From" [fields]='dropdownField' popupHeight="150px" popupWidth="150px">
 13 |                                 <ng-template #valueTemplate let-data>
 14 |                                     <div class="tb-dropdowns" style ="font-size: 16px;margin-top: -2px;"><span class="e-btn-icon e-icons ej-icon-More"></span></div>
 15 |                                 </ng-template>
 16 |                             </ejs-dropdownlist>
 17 |                         </div>
 18 |                     </ng-template>
 19 |                 </e-item>
 20 |                 <e-item  prefixIcon='ej-icon-Copy tb-icons' tooltipText='Edit in a separate window' 
 21 |                     cssClass='tb-item-window-mail' align='right'>
 22 |                 </e-item>
 23 |                 <e-item  prefixIcon='ej-icon-Close tb-icons' tooltipText='Close' align='right' 
 24 |                     cssClass='tb-item-back-mail' >
 25 |                 </e-item>
 26 |             </e-items>                  
 27 |         </ejs-toolbar>
 28 |     </div>
 29 | </div>
 30 | <div class="mail-content-div customScrollBar">
 31 |     <div class="mail-id" style="color: white">
 32 |         <button ejs-button id='btnTo' style='width:50px; float:left'>To</button>
 33 |         <ejs-multiselect id='autoTo' #autoTo [dataSource]='contactsList' [fields]='multiSelectFields' 
 34 |             mode='Box' placeholder= '' [width]='multiSelectWidth' cssClass ='ac-new-mail' delimiterChar=';'
 35 |             popupWidth='300px' allowFiltering='true' (filtering)='onFiltering($event)'>
 36 |             <ng-template #itemTemplate let-data>
 37 |                 <div class="multiselect-template parent-div">
 38 |                     <img class="contacts-item-image-style" src={{data.Image}} alt="employee"/>
 39 |                     <div class="contacts-item-text-style"> 
 40 |                         <div>{{data.text}}</div> 
 41 |                     </div>
 42 |                     <div class="contacts-item-subtext-style">{{data.MailId}}</div>
 43 |                 </div>
 44 |             </ng-template>
 45 |             <ng-template #valueTemplate let-data>
 46 |                 <div>
 47 |                     <img class="contacts-value-img-style" src="{{data.Image}}" alt="employee"/>
 48 |                     <div class="contacts-value-text-style">{{data.MailId}}</div>
 49 |                 </div>
 50 |             </ng-template>
 51 |         </ejs-multiselect>
 52 |     </div>
 53 |     <div class="mail-id" style="color: white">
 54 |         <button ejs-button id='btnCc' style='width:50px; float:left'>Cc</button>
 55 |         <ejs-multiselect id='autoCc' #autoCc [dataSource]='contactsList' [fields]='multiSelectFields' 
 56 |             mode='Box' placeholder= '' [width]='multiSelectWidth' cssClass ='ac-new-mail' delimiterChar=';' 
 57 |             popupWidth='300px' allowFiltering='true' (filtering)='onFiltering($event)'>
 58 |             <ng-template #itemTemplate let-data>
 59 |                 <div class="multiselect-template parent-div">
 60 |                     <img class="contacts-item-image-style" src="{{data.Image}}" alt="employee"/>
 61 |                     <div class="contacts-item-text-style"> 
 62 |                         <div>{{data.text}}</div> 
 63 |                     </div>
 64 |                     <div class="contacts-item-subtext-style">{{data.MailId}}</div>
 65 |                 </div>
 66 |             </ng-template>
 67 |             <ng-template #valueTemplate let-data>
 68 |                 <div>
 69 |                     <img class="contacts-value-img-style" src="{{data.Image}}" alt="employee"/>
 70 |                     <div class="contacts-value-text-style">{{data.MailId}}</div>
 71 |                 </div>
 72 |             </ng-template>
 73 |         </ejs-multiselect>
 74 |     </div>
 75 |     <div class="mail-subject e-input-group">
 76 |         <input type='text' id='txtSubject' style="width: 100%" placeholder="Enter Subject Here" class="e-input" (focus) = "onFocus()" (blur) = "onBlur()" />
 77 |     </div>
 78 |     <div>
 79 |         <div id='mailContentMessage' class="customScrollBar" contenteditable="true"></div>
 80 |         <ejs-mention [dataSource]='contactsList' [target]='mentionTarget' [fields]='dropdownField'></ejs-mention>
 81 |     </div>
 82 |     <div class='mail-text-edit-tb-parent'>
 83 |         <ejs-toolbar id='new_email_toolbar' #toolbarMailOption height='100%' overflowMode='Scrollable'>  
 84 |             <e-items>
 85 |                 <e-item prefixIcon= 'ej-icon-Font tb-icons' tooltipText= 'Font' ></e-item>
 86 |                 <e-item prefixIcon= 'ej-icon-Font-Size path2 tb-icons' tooltipText= 'Font Size' ></e-item>
 87 |                 <e-item prefixIcon= 'ej-icon-Bold tb-icons' tooltipText= 'Bold' ></e-item> 
 88 |                 <e-item prefixIcon= 'ej-icon-Italic tb-icons' tooltipText= 'Italic' ></e-item> 
 89 |                 <e-item prefixIcon= 'ej-icon-Underlined tb-icons' tooltipText= 'Underline' ></e-item> 
 90 |                 <e-item prefixIcon= 'ej-icon-Highlight tb-icons' tooltipText= 'Highlight' ></e-item> 
 91 |                 <e-item prefixIcon= 'ej-icon-Font-Color-Icon tb-icons' tooltipText= 'Font color' ></e-item> 
 92 |                 <e-item prefixIcon= 'ej-icon-Bullets tb-icons' tooltipText= 'Bullets' ></e-item> 
 93 |                 <e-item prefixIcon= 'ej-icon-Numbering tb-icons' tooltipText= 'Numbering' ></e-item> 
 94 |                 <e-item prefixIcon= 'ej-icon-Decr-Indent tb-icons' tooltipText= 'Decrease Indent' ></e-item> 
 95 |                 <e-item prefixIcon= 'ej-icon-Incr-Indent tb-icons' tooltipText= 'Increase Indent' ></e-item> 
 96 |                 <e-item prefixIcon= 'ej-icon-Left-aligned tb-icons' tooltipText= 'Decrease Indent' ></e-item> 
 97 |                 <e-item prefixIcon= 'ej-icon-Centre-aligned tb-icons' tooltipText= 'Increase Indent' ></e-item> 
 98 |                 <e-item prefixIcon= 'ej-icon-Right-aligned tb-icons' tooltipText= 'Decrease Indent' ></e-item> 
 99 |                 <e-item prefixIcon= 'ej-icon-Hyperlink tb-icons' tooltipText= 'Hyperlink' ></e-item>
100 |             </e-items>
101 |         </ejs-toolbar>
102 |     </div>
103 |     <div>
104 |         <button ejs-button id='btnSend' style='margin: 8px 0px; background-color: #0078D7; color: #fff' (click)="sendClick()">Send</button>
105 |         <button ejs-button (click)="clickButton()" id='btnDiscard' style='margin: 8px 0px;'>Discard</button>
106 |     </div>
107 | </div>


--------------------------------------------------------------------------------
/src/app/content-area/content/content-pane/newmail/newmail.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, ViewChild } from '@angular/core';
  2 | import { ToolbarComponent, ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
  3 | import { MultiSelectComponent, FilteringEventArgs } from '@syncfusion/ej2-angular-dropdowns';
  4 | import { Query } from '@syncfusion/ej2-data';
  5 | import { getContacts } from '../../../../data/datasource';
  6 | import { DataService } from '../../../../data-service';
  7 | @Component({
  8 |     selector: 'newmail-section',
  9 |     templateUrl: 'newmail.component.html'
 10 | })
 11 | 
 12 | export class NewMailComponent {
 13 | 
 14 |     /** Configurations for the new mail page */
 15 |     constructor(private data: DataService, private buttonClick: DataService) {
 16 |     }
 17 | 
 18 |     @ViewChild('autoTo')
 19 |     public autoToList: MultiSelectComponent;
 20 |     @ViewChild('autoCc')
 21 |     public autoCCList: MultiSelectComponent;
 22 |     @ViewChild('toolbarHeader')
 23 |     public toolbarHeader1: ToolbarComponent;
 24 |     @ViewChild('toolbarMailOption')
 25 |     public toolbarMail: ToolbarComponent;
 26 | 
 27 |     public contactsList: {[key: string]: Object}[] = getContacts();
 28 |     public moreMailList: { [key: string]: Object }[] = [
 29 |         { text: 'Save draft' }, { text: 'Show From' }, { text: 'Check Names' }, { text: 'Show message options' }
 30 |     ];
 31 |     public dropdownField: Object = { text: 'text', value: 'text' };
 32 |     public multiSelectFields: Object = { text: 'MailId', value: 'MailId' };
 33 |     public multiSelectWidth: string = 'calc(100% - 60px)';
 34 |     public isNewWindow: boolean = true;
 35 |     public selectedToolbarItem: string = '';
 36 |     public mentionTarget: string = "#mailContentMessage";
 37 | 
 38 |     public clickButton() {
 39 |         this.buttonClick.onDiscardClick.emit();
 40 |     }
 41 | 
 42 |     public toolbarNewMailClick(args: ClickEventArgs): void {
 43 |         if (args.item) {
 44 |             if (args.item.cssClass === 'tb-item-window-mail' || args.item.cssClass === 'tb-item-back-mail') {
 45 |                 this.selectedToolbarItem = args.item.cssClass;
 46 |             } else if (args.item.text === 'Send' || args.item.text === 'Discard') {
 47 |                 this.selectedToolbarItem = args.item.text;
 48 |             }
 49 |         }
 50 |     }
 51 | 
 52 |     public resetSelectedToolbarItem(text: string): void {
 53 |         this.selectedToolbarItem = text;
 54 |     }
 55 | 
 56 |     public clearMailForm(): void {
 57 |         if (this.autoCCList.value) {
 58 |             this.autoCCList.value = [];
 59 |         }
 60 |         if (this.autoToList.value) {
 61 |             this.autoToList.value = [];
 62 |         }
 63 |         (document.getElementById('txtSubject') as HTMLInputElement).value = '';
 64 |         document.getElementById('mailContentMessage').innerHTML = '';
 65 |     }
 66 | 
 67 |     public sendClick(): void {
 68 |         this.data.sendClick();
 69 |     }
 70 | 
 71 |     public onFiltering(e: FilteringEventArgs): void {
 72 |         let query: Query = new Query();
 73 |         query = (e.text !== '') ? query.where('text', 'startswith', e.text, true) : query;
 74 |         e.updateData(this.contactsList, query);
 75 |     }
 76 | 
 77 |     public onFocus(): void {
 78 |         document.getElementsByClassName('mail-subject e-input-group')[0].classList.add('e-input-focus');
 79 |     }
 80 | 
 81 |     public onBlur(): void {
 82 |         document.getElementsByClassName('mail-subject e-input-group')[0].classList.remove('e-input-focus');
 83 |     }
 84 | 
 85 |     public showMailDialog(option: string, selectedMessage: {[key: string]: Object}): void {
 86 |         this.clearMailForm();
 87 |         let key: string = '';
 88 |         this.toolbarHeader1.refreshOverflow();
 89 |         this.toolbarMail.refreshOverflow();
 90 |         if (selectedMessage) {
 91 |             if (option === 'Reply Tooltip') {
 92 |                 key = 'Email';
 93 |                 this.autoToList.value = [selectedMessage[key].toString()];
 94 |             } else if (option !== 'New') {
 95 |                 if (option !== 'Forward') {
 96 |                     if (option !== 'Reply') {
 97 |                         key = 'CCMail';
 98 |                         this.autoCCList.value =  selectedMessage[key] as [string];
 99 |                     }
100 |                     key = 'Email';
101 |                     this.autoToList.value = [selectedMessage[key].toString()];
102 |                 }
103 |                 key = 'ContactTitle';
104 |                 (document.getElementById('txtSubject') as HTMLInputElement).value = selectedMessage[key].toString();
105 |                 key = 'Message';
106 |                 if (selectedMessage[key]) {
107 |                     document.getElementById('mailContentMessage').innerHTML = selectedMessage[key].toString();
108 |                 } else {
109 |                     document.getElementById('mailContentMessage').innerHTML =
110 |                     decodeURI('%3Cdiv%20id=%22box%22%20style=%22padding:10px;%20border:%20none;%20height:%20auto;' +
111 |                         '%22%20contenteditable=%22true%22%20data-gramm_id=%223898c552-c710-10db-69ec-08371185eb3f%22%20' +
112 |                         'data-gramm=%22true%22%20spellcheck=%22false%22%20data-gramm_editor=%22true%22%3E%3Cp%20class=%22' +
113 |                         'MsoNormal%22%3EDear%20Name,&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22MsoNormal%22%3EI%20really%20' +
114 |                         'appreciate%20your%20understanding%20and%20support%20regarding%0Athe%20changes%20we\'re%20' +
115 |                         'making%20to%20the%20project%20plan.&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22' +
116 |                         'MsoNormal%22%3EThank%20you%20for%20your%20confidence%20in%20me.%20I\'m%20sure%20' +
117 |                         'you\'re%20going%0Ato%20be%20pleased%20with%20the%20results.&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22' +
118 |                         'MsoNormal%22%3EBest%20Regards,%3Cbr%3E%0AYour%20Name%3Co:p%3E%3C/o:p%3E%3C/p%3E%0A%0A%20%20%20%20%3C/div%3E');
119 |                 }
120 |             }
121 |         }
122 |     }
123 | }
124 | 
125 | 
126 | 


--------------------------------------------------------------------------------
/src/app/content-area/content/content.component.html:
--------------------------------------------------------------------------------
 1 | <div class='content-wrapper' role='main' (click)="hideSideBar()">
 2 |     <div class='content' style='height:100%'>
 3 |         <tools-section #toolsSection></tools-section>
 4 |         <div *ngIf="isDesktopMode; else mobileMode" class='maincontent_pane' style='background-color:#F4F9FD; width: 100%;height: 100%;color:white'>
 5 |             <ejs-splitter #horizontal id="splitBar" width='100%'></ejs-splitter>
 6 |             <message-pane-section #messagePaneSection></message-pane-section>
 7 |             <content-pane-section #contentPaneSection></content-pane-section>
 8 |         </div>
 9 |         <ng-template #mobileMode>
10 |         <div class='maincontent_pane' style='background-color:#F4F9FD; width:100%;height: 100%;color:white'>
11 |             <message-pane-section #messagePaneSection></message-pane-section>
12 |             <content-pane-section #contentPaneSection></content-pane-section>
13 |         </div>
14 |         </ng-template>
15 |     </div>
16 | </div>


--------------------------------------------------------------------------------
/src/app/content-area/content/content.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ViewEncapsulation, OnInit, ViewChild, AfterViewInit,EventEmitter, Output } from '@angular/core';
 2 | import { SplitterComponent } from '@syncfusion/ej2-angular-layouts';
 3 | import { DataService } from '../../data-service';
 4 | @Component({
 5 |     selector: 'content-section',
 6 |     templateUrl: './content.component.html',
 7 |     encapsulation: ViewEncapsulation.None,
 8 | })
 9 | 
10 | export class ContentComponent implements AfterViewInit {
11 | 
12 |     /** Configurations for the Content page */
13 |     constructor(private data: DataService) {
14 |     }
15 | 
16 |     public hideSideBar(): void {
17 |         this.data.hideSideBar();
18 |     }
19 |     @ViewChild('horizontal') 
20 |     public splitterObj:SplitterComponent;
21 |     public isDesktopMode:boolean = true;
22 |     public ngAfterViewInit(): void {
23 |         this.renderSplitter();
24 |     }
25 |     public renderSplitter(): void {
26 |         this.splitterObj.paneSettings = [
27 |             { size: '38%', min: '38%',content: '#message-pane-div'},
28 |             { size: '63%', min: '40%', content: '#reading-pane-div' }];
29 |     }
30 | }


--------------------------------------------------------------------------------
/src/app/content-area/content/message-pane/message-pane.component.html:
--------------------------------------------------------------------------------
 1 | <div id="message-pane-div" class='message-pane customScrollBar' style='overflow: auto'>
 2 |     <div class="filter-section">
 3 |         <div style='float: left; margin-top: 5px;'>
 4 |             <span id="spanFilterText" style='font-size: 22px;color:#333333'>Inbox</span>
 5 |         </div>
 6 |         <div style='right:25px; position: absolute; top:10px'>
 7 |             <span style='font-size: 16px; color: #0078D7'>Filter</span>
 8 |             <button ejs-button (click)="clickButton()" id='btnFilter' style='color: #0078D7' iconCss='ej-icon-Dropdown-arrow' cssClass='btn-shadow-hide'></button>
 9 |         </div>
10 |     </div>
11 |     <ejs-listview id='listview-grp' #listview1 [dataSource]='messageDataSource' [template]='listTemplate'
12 |         tabindex='1' [fields]='listviewFields' sortOrder='None' (select)='listViewSelect($event)' >
13 |     </ejs-listview>
14 | </div>


--------------------------------------------------------------------------------
/src/app/content-area/content/message-pane/message-pane.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
  2 | import { ListViewComponent, SelectEventArgs } from '@syncfusion/ej2-angular-lists';
  3 | import { DataService } from '../../../data-service';
  4 | 
  5 | @Component({
  6 |     selector: 'message-pane-section',
  7 |     templateUrl: './message-pane.component.html',
  8 |     encapsulation: ViewEncapsulation.None,
  9 | })
 10 | 
 11 | export class MessagePaneComponent implements OnInit {
 12 | 
 13 |     /** Configurations for the Message pane page */
 14 |     constructor(private _data: DataService, private buttonClick: DataService) {
 15 |         this.messageDataSource = this._data.messageDataSource;
 16 |     }
 17 | 
 18 |     @ViewChild('listview1')
 19 |     public grpListObj: ListViewComponent;
 20 | 
 21 |     // List View binding properties
 22 |     public messageDataSource: { [key: string]: Object }[] = null;
 23 |     public listTemplate: string = this.getListTemplate();
 24 |     public listviewFields: {[key: string]: Object} = { id: 'ContactID', text: 'text' };
 25 | 
 26 |     public clickButton() {
 27 |         this.buttonClick.onFilterClick.emit();
 28 |     }
 29 | 
 30 |     private getListTemplate(): string {
 31 |         return '<div class="template-container ${ReadStyle}-parent">' +
 32 |             '<div style="height:30px; pointer-events:none;">' +
 33 |                 '<div class="sender-style" style="float:left; margin-top: 2px">${text}</div>' +
 34 |                 '<div style="right:25px; position: absolute; margin-top: 2px; pointer-events:all;">' +
 35 |                     '<button id="btnListDelete" title="Delete" class="listview-btn">' +
 36 |                         '<span class="e-btn-icon ej-icon-Delete"></span>' +
 37 |                     '</button>' +
 38 |                     '<button id="btnListFlag" title="${FlagTitle}" class="listview-btn">' +
 39 |                         '<span class="e-btn-icon ej-icon-Flag_1 ${Flagged}"></span>' +
 40 |                     '</button>' +
 41 |                     '<button id="btnListRead" title="${ReadTitle}" class="listview-btn">' +
 42 |                         '<span class="e-btn-icon ej-icon-Mark-as-read"></span>' +
 43 |                     '</button>' +
 44 |                 '</div>' +
 45 |             '</div>' +
 46 |             '<div class="subjectstyle ${ReadStyle}" style="height:25px">' +
 47 |                 '<div style="float:left; margin-top: 2px">${ContactTitle}</div>' +
 48 |                 '<div style="right:25px; position: absolute; margin-top: 2px">' +
 49 |                     '<span>${Time}</span>' +
 50 |                 '</div>' +
 51 |             '</div>' +
 52 |             '<div class="descriptionstyle">${Message}</div>' +
 53 |         '</div>';
 54 |     }
 55 | 
 56 |     public listViewSelect(args: SelectEventArgs): void {
 57 |         this._data.selectedListElement = args.item as HTMLElement;
 58 |         let data: { [key: string]: Object } = args.data as { [key: string]: Object };
 59 |         let key: string = 'ReadStyle';
 60 |         if (data[key].toString() !== 'Read') {
 61 |             key = 'ContactID';
 62 |             this._data.setReadStyleMessage(data[key].toString(), 'Read');
 63 |             this._data.isItemClick = true;
 64 |         }
 65 |         let contentElement: Element = document.getElementsByClassName('row content')[0];
 66 |         if (window.innerWidth < 605) {
 67 |             contentElement.className = 'row content sidebar-hide show-reading-pane';
 68 |         }
 69 |         let contentWrapper: Element = document.getElementsByClassName('content-wrapper')[0];
 70 |         contentWrapper.className = 'content-wrapper';
 71 |         this._data.showSelectedMessage();
 72 |         key = 'ContactTitle';
 73 |         if (this._data.acrdnObj.items.length === 0) {
 74 |             this._data.acrdnObj.addItem({
 75 |                 content: '#accodianContent',  expanded: true, header: data[key].toString()
 76 |             });
 77 |         }
 78 |         let headerTitle: HTMLElement = document.getElementById('accordian');
 79 |         key = 'ContactTitle';
 80 |         headerTitle.getElementsByClassName('e-acrdn-header-content')[0].innerHTML = data[key].toString();
 81 |         key = 'Image';
 82 |         (headerTitle.getElementsByClassName('logo logo-style2')[0] as HTMLElement).style.background =
 83 |             'url(' + data[key].toString().replace('assets/images/images/', 'assets/images/large/') + ')  no-repeat 50% 50%';
 84 |         key = 'text';
 85 |         document.getElementById('sub').innerHTML = data[key].toString();
 86 |         key = 'Date';
 87 |         let dateString: string = data[key].toString();
 88 |         key = 'Time';
 89 |         document.getElementById('date').innerHTML = dateString + ' ' + data[key].toString();
 90 |         key = 'CC';
 91 |         document.getElementById('to').innerHTML = (data[key].toString()).replace(/,/g, ' ; ');
 92 |         key = 'Message';
 93 |         if (data[key]) {
 94 |             document.getElementById('accContent').innerHTML = data[key].toString();
 95 |         } else {
 96 |             document.getElementById('accContent').innerHTML =
 97 |             decodeURI('%3Cdiv%20id=%22box%22%20style=%22padding:10px;%20border:%20none;%20height:%20auto;' +
 98 |                 '%22%20contenteditable=%22true%22%20data-gramm_id=%223898c552-c710-10db-69ec-08371185eb3f%22%20' +
 99 |                 'data-gramm=%22true%22%20spellcheck=%22false%22%20data-gramm_editor=%22true%22%3E%3Cp%20class=%22' +
100 |                 'MsoNormal%22%3EDear%20Name,&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22MsoNormal%22%3EI%20really%20' +
101 |                 'appreciate%20your%20understanding%20and%20support%20regarding%0Athe%20changes%20we\'re%20' +
102 |                 'making%20to%20the%20project%20plan.&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22' +
103 |                 'MsoNormal%22%3EThank%20you%20for%20your%20confidence%20in%20me.%20I\'m%20sure%20' +
104 |                 'you\'re%20going%0Ato%20be%20pleased%20with%20the%20results.&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22' +
105 |                 'MsoNormal%22%3EBest%20Regards,%3Cbr%3E%0AYour%20Name%3Co:p%3E%3C/o:p%3E%3C/p%3E%0A%0A%20%20%20%20%3C/div%3E');
106 |         }
107 |     }
108 | 
109 |     public ngOnInit(): void {
110 |     }
111 | 
112 |     public ngAfterViewInit(): void {
113 |         this._data.grpListObj = this.grpListObj;
114 |     }
115 | }


--------------------------------------------------------------------------------
/src/app/content-area/content/tools/tools.component.html:
--------------------------------------------------------------------------------
  1 | <div class="e-roottools" style='background-color:#fff; width:100%;color:white'>
  2 |     <ejs-toolbar id='toolbar_align' #toolbarDevice width="100%" height="100%" overflowMode='Popup'
  3 |         (clicked)="toolbarClick($event)">
  4 |         <e-items>
  5 |             <e-item prefixIcon="ej-icon-New tb-icons" text="New" tooltipText="Write a new message"
  6 |                 cssClass="tb-item-new-mail">
  7 |             </e-item>
  8 |             <e-item prefixIcon='ej-icon-Mark-as-read tb-icons' text='Mark all as read' 
  9 |                 tooltipText='Mark all as read' cssClass='tb-item-mark-read'>
 10 |             </e-item>
 11 |             <e-item prefixIcon='ej-icon-Reply-All tb-icons' cssClass='tb-item-Selected tb-item-replyAll'
 12 |                 tooltipText='Reply All'>
 13 |                 <ng-template #template>
 14 |                     <div>
 15 |                         <ejs-dropdownlist id='replyAllList' #replyAllList [dataSource]='replyList' (change)='replyAllSelect($event)' value="Reply All"
 16 |                             [fields]='dropdownField' popupHeight="150px" popupWidth="150px" width="115px">
 17 |                             <ng-template #valueTemplate let-data="">
 18 |                                 <div>
 19 |                                     <div style="float:left;margin-top: 1px;">
 20 |                                         <span style="font-weight: bold" class="e-btn-icon ej-icon-Reply-All tb-icons e-icons tb-icon-rply-all">
 21 | 
 22 |                                         </span>
 23 |                                     </div>
 24 |                                     <div class="tb-dropdowns" style="float:left"> Reply All </div>
 25 |                                 </div>
 26 |                             </ng-template>
 27 |                         </ejs-dropdownlist>
 28 |                     </div>
 29 |                 </ng-template>
 30 |             </e-item>
 31 |             <e-item prefixIcon='ej-icon-Delete tb-icons' text='Delete' cssClass='tb-item-Selected' 
 32 |                 tooltipText= 'Delete'>
 33 |             </e-item>
 34 |             <e-item text='Junk' cssClass='tb-item-Selected' tooltipText='Mark the sender as unsafe and delete the message'>
 35 |             </e-item>
 36 |             <e-item cssClass='tb-item-Selected' tooltipText='Move To' >
 37 |                 <ng-template #template>
 38 |                     <div>
 39 |                         <ejs-dropdownlist id='moveToList' #moveList [dataSource]='moveToList' (change)='moveToSelect($event)' 
 40 |                             value="Inbox" [fields]='dropdownField' popupHeight="310px" popupWidth="150px" 
 41 |                             width="80px" allowFiltering=true  >
 42 |                             <ng-template #valueTemplate let-data="">
 43 |                                 <div class="tb-dropdowns"> Move to </div>
 44 |                             </ng-template>
 45 |                         </ejs-dropdownlist>
 46 |                     </div>
 47 |                 </ng-template>
 48 |             </e-item>
 49 |             <e-item cssClass='tb-item-Selected' tooltipText='Add Categories to message' >
 50 |                 <ng-template #template>
 51 |                     <div>
 52 |                         <ejs-dropdownlist id='categoryList' #categoriesList [dataSource]='categoryList'
 53 |                             value="Blue category" [fields]='dropdownField' popupHeight="250px" popupWidth="230px" 
 54 |                             width="100px" (created)='DDLCreated($event)'>
 55 |                             <ng-template #itemTemplate let-data="">
 56 |                                 <div class="e-list" style="padding:0px 15px">
 57 |                                     <div style="width: 20px;float:left;top: 8px;position: absolute;">
 58 |                                         <div class="{{data.categoryStyle}}" style="width: 10px; height:15px;"></div>
 59 |                                     </div>
 60 |                                     <div style="width: 170px;float:left;margin-left: 15px;font-size:12px;"><span>{{data.text}}</span></div>
 61 |                                 </div>
 62 |                             </ng-template>
 63 |                             <ng-template #valueTemplate let-data>
 64 |                                 <div class="tb-dropdowns"> Categories </div>
 65 |                             </ng-template>
 66 |                         </ejs-dropdownlist>
 67 |                     </div>
 68 |                 </ng-template>
 69 |             </e-item>
 70 |             <e-item cssClass='tb-item-more tb-item-Selected' tooltipText='More actions' >
 71 |                 <ng-template #template>
 72 |                     <div>
 73 |                         <ejs-dropdownlist id='moreList' #moreItemList [dataSource]='moreList' (change)='moreItemSelect($event)' 
 74 |                             value="Mark as read" [fields]='dropdownField' popupHeight="150px" popupWidth="150px">
 75 |                             <ng-template #valueTemplate let-data>
 76 |                                 <div class="tb-dropdowns" style ="font-size: 16px;margin-top: -2px;"><span class="e-btn-icon e-icons ej-icon-More"></span></div>
 77 |                             </ng-template>
 78 |                         </ejs-dropdownlist>
 79 |                     </div>
 80 |                 </ng-template>
 81 |             </e-item>
 82 |             <e-item prefixIcon='ej-icon-Copy tb-icons' align='right' cssClass='tb-item-Selected' 
 83 |                 tooltipText= 'Open in a separate window'>
 84 |             </e-item>
 85 |         </e-items>
 86 |     </ejs-toolbar>
 87 |     <ejs-toolbar id='toolbar_mobile' #toolbarMobile width='100%' height='100%' overflowMode='Popup' (clicked)="toolbarClick($event)">  
 88 |         <e-items>
 89 |             <e-item prefixIcon ='ej-icon-Menu tb-icons' cssClass='tb-item-menu tb-item-front' ></e-item>
 90 |             <e-item prefixIcon ='ej-icon-Back' cssClass='tb-item-back-icon tb-item-back' ></e-item>
 91 |             <e-item text ='Inbox' cssClass='tb-item-inbox tb-item-front' ></e-item>
 92 |             <e-item text ='Compose' cssClass='tb-item-inbox tb-item-back tb-item-newmail-option' ></e-item>
 93 |             <e-item cssClass= 'tb-item-search-option' align='center' >
 94 |                 <ng-template #template>
 95 |                     <div class="search-div1" style= "width:90%" >
 96 |                         <div>
 97 |                             <ejs-autocomplete id='txtSearch1' cssClass='search-text-box' #txtSearch1 [dataSource]='contactsList' 
 98 |                                 placeholder='Search Mail and People' [fields]='searchFields' [showClearButton]='acClearButton'
 99 |                                 (change)='autoSearchSelect($event)' (focus)="autoSearchFocus($event)" (blur)="autoSearchBlur($event)" style="height: 40px;display: block;"></ejs-autocomplete>
100 |                         </div>
101 |                     </div>
102 |                 </ng-template>
103 |             </e-item>
104 |             <e-item  prefixIcon='ej-icon-Close' tooltipText='Clear' align='right' cssClass='tb-item-search-option'></e-item>
105 |             <e-item  prefixIcon='ej-icon-Search' tooltipText='Search Mail' align='right' cssClass='tb-item-front' ></e-item>
106 |             <e-item  prefixIcon='ej-icon-Create-New' tooltipText='Write a new message' align='right' cssClass='tb-item-front'>
107 |             </e-item>
108 |             <e-item  prefixIcon='ej-icon-Send' tooltipText='Send' align='right' cssClass='tb-item-back tb-item-newmail-option'>
109 |             </e-item>
110 |             <e-item  prefixIcon='ej-icon-Attach' tooltipText='Attach' align='right' cssClass='tb-item-back tb-item-newmail-option'>
111 |             </e-item>
112 |             <e-item  prefixIcon ='ej-icon-Delete' tooltipText='Delete' align='right' 
113 |                 cssClass='tb-item-back' >
114 |             </e-item>
115 |             <e-item  prefixIcon ='ej-icon-Reply-All' tooltipText='Reply All' align='right' 
116 |                 cssClass='tb-item-back' >
117 |             </e-item>
118 |             <e-item  cssClass='tb-item-more tb-item-back' tooltipText='More actions' align='right'>
119 |                 <ng-template #template>
120 |                     <div>
121 |                         <ejs-dropdownlist id='moreList1' #moreItemList1 [dataSource]='moreList' (change)='moreItemSelect($event)' 
122 |                             value="Mark as read" [fields]='dropdownField' popupHeight="150px" popupWidth="150px">
123 |                             <ng-template #valueTemplate let-data>
124 |                                 <div class="tb-dropdowns" style ="font-size: 16px;margin-top: -2px;"><span class="e-btn-icon e-icons ej-icon-More"></span></div>
125 |                             </ng-template>
126 |                         </ejs-dropdownlist>
127 |                     </div>
128 |                 </ng-template>
129 |             </e-item>
130 |         </e-items>
131 |     </ejs-toolbar>
132 | </div>


--------------------------------------------------------------------------------
/src/app/content-area/content/tools/tools.component.ts:
--------------------------------------------------------------------------------
  1 | import { ChangeDetectorRef , Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
  2 | import { ToolbarComponent, ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
  3 | import { AutoCompleteComponent, ChangeEventArgs, SelectEventArgs as DropDownSelectEventArgs } from '@syncfusion/ej2-angular-dropdowns';
  4 | import { getContacts } from '../../../data/datasource';
  5 | import { DataService } from '../../../data-service';
  6 | 
  7 | @Component({
  8 |     selector: 'tools-section',
  9 |     templateUrl: './tools.component.html',
 10 |     encapsulation: ViewEncapsulation.None,
 11 | })
 12 | 
 13 | export class ToolsComponent implements OnInit {
 14 | 
 15 |     /** Configurations for the Tools page */
 16 |     constructor(private _data: DataService, private chgRef: ChangeDetectorRef) {
 17 |         this.contactsList = getContacts();
 18 |     }    
 19 |         
 20 |     @ViewChild('toolbarMobile')
 21 |     public toolbarMobile: ToolbarComponent;
 22 |     @ViewChild('txtSearch1')
 23 |     public acSearchMobile: AutoCompleteComponent;
 24 |     
 25 |     // ToolbarDevice Dropdown control binding properties
 26 |     private isMenuClick: boolean = false;
 27 |     public replyList: { [key: string]: Object }[] = [
 28 |         { text: 'Reply' }, { text: 'Reply All' }, { text: 'Forward' }
 29 |     ];
 30 |     public moveToList: { [key: string]: Object }[] = [
 31 |         { text: 'Inbox' }, { text: 'Sent Items' }, { text: 'Clutter' }, { text: 'Drafts' },
 32 |         { text: 'Deleted Items' }, { text: 'Archive' }, { text: 'Junk Mail' }, { text: 'Outbox' },
 33 |         { text: 'Personnel' }, { text: 'Sales Reports' }, { text: 'Marketing Reports' },
 34 |         { text: 'Richelle Mead' }, { text: 'krystine hobson' }
 35 |     ];
 36 |     public categoryList: { [key: string]: Object }[] = [
 37 |         { text: 'Blue category', color: 'blue', categoryStyle: 'blue-background' },
 38 |         { text: 'Red category' , color: 'red' , categoryStyle: 'red-background' },
 39 |         { text: 'Orange category', color: 'orange', categoryStyle: 'orange-background' },
 40 |         { text: 'Purple category', color: 'purple', categoryStyle: 'purple-background' },
 41 |         { text: 'Green category', color: 'green', categoryStyle: 'green-background' },
 42 |         { text: 'Yellow category', color: 'yellow', categoryStyle: 'yellow-background' },
 43 |         { text: 'Clear categories', color: 'transparent', categoryStyle: 'transparent-background' }
 44 |     ];
 45 |     public moreList: { [key: string]: Object }[] = [
 46 |         { text: 'Mark as unread' }, { text: 'Mark as read' }, { text: 'Flag' }, { text: 'Clear Flag' }
 47 |     ];
 48 |     private dropdownField: Object = { text: 'text', value: 'text' };
 49 | 
 50 |     // AutoComplete binding properties
 51 |     public contactsList: {[key: string]: Object}[] = this._data.contactsList;
 52 |     public searchFields: Object = this._data.searchFields;
 53 |     public acClearButton: boolean = false;
 54 | 
 55 |     public toolbarClick(args: ClickEventArgs): void {
 56 |         this._data.toolbarClick(args);
 57 |     }
 58 | 
 59 |     public replyAllSelect(args: DropDownSelectEventArgs): void {
 60 |         if (args.itemData.text) {
 61 |             this._data.showNewMailPopup(args.itemData.text);
 62 |             this._data.ddlReplyAllValue = args.itemData.text;
 63 |         }
 64 |         this._data.dropdownSelect = true;
 65 |     }
 66 | 
 67 |     public moveToSelect(args: DropDownSelectEventArgs): void {
 68 |         if (args.itemData.text) {
 69 |             let selectedMessage: { [key: string]: Object } = this._data.getSelectedMessage();
 70 |             let key: string = 'Folder';
 71 |             selectedMessage[key] = args.itemData.text;
 72 |             this._data.grpListObj.dataSource =
 73 |             this._data.getFilteredDataSource(this._data.messageDataSource, 'Folder', this._data.selectedFolderName);
 74 |             this._data.showEmptyMessage();
 75 |         }
 76 |     }
 77 | 
 78 |     public moreItemSelect(args: DropDownSelectEventArgs): void {
 79 |         let selectedMessage: { [key: string]: Object } = this._data.getSelectedMessage();
 80 |         let key: string = '';
 81 |         if (args.itemData.text === 'Mark as read') {
 82 |             key = 'ContactID';
 83 |             this._data.setReadStyleMessage(selectedMessage[key].toString(), 'Read');
 84 |         } else if (args.itemData.text === 'Mark as unread') {
 85 |             key = 'ContactID';
 86 |             this._data.setReadStyleMessage(selectedMessage[key].toString(), 'Unread');
 87 |         } else {
 88 |             let target: HTMLElement = this._data.selectedListElement.getElementsByClassName('e-btn-icon ej-icon-Flag_1')[0] as HTMLElement;
 89 |             this._data.flagListItem(target, selectedMessage);
 90 |         }
 91 |     }
 92 | 
 93 |     public autoSearchSelect(args: ChangeEventArgs): void {
 94 |         this._data.autoSearchSelect(args);
 95 |     }
 96 | 
 97 |     public autoSearchFocus(args: Object): void {
 98 |         document.getElementsByClassName('search-div1')[0].classList.add('search-focus');
 99 |     }
100 | 
101 |     public autoSearchBlur(args: Object): void {
102 |         document.getElementsByClassName('search-div1')[0].classList.remove('search-focus');
103 |     }
104 | 
105 |     public ngOnInit(): void {
106 |     }
107 | 
108 |     public ngAfterViewInit(): void {
109 |         this._data.toolbarMobile = this.toolbarMobile;
110 |         this._data.acSearchMobile = this.acSearchMobile;
111 |     }
112 | 
113 |     public DDLCreated(): void {
114 |         this.chgRef.detectChanges();
115 |     }
116 | }


--------------------------------------------------------------------------------
/src/app/content-area/popup/popup.component.html:
--------------------------------------------------------------------------------
 1 | <ejs-sidebar #popup class="headerContent" [enableGestures]="false" position="Right" width="330px" target=".content-wrapper" [type]="type" style="z-index: 112; height: 100%; background-color: #f4f4f4; width: 330px;right:0; position: absolute">
 2 |     <div style="right:20px;position: absolute; top: 35px">
 3 |         <button (click)="clickButton()" ejs-button id='btnCloseButton' iconCss='ej-icon-Close' cssClass='btn-shadow-hide'>
 4 |         </button>
 5 |     </div>
 6 |     <div style="margin: 25px 20px 30px 30px;">
 7 |         <div class="text-content">
 8 |             <span id='txtHeaderContent'>Notification</span>
 9 |         </div>
10 |     </div>
11 |     <div class="notification-content">
12 |         <span>Nothing new right now</span>
13 |     </div>
14 |     <div class="settings-content">
15 |         <span class="settings-sub-header">Your app settings</span>
16 |         <div class="anchor-div">
17 |             <a class="about-anchor">
18 |                 <span>Automatic replies</span>
19 |             </a>
20 |         </div>
21 |         <div class="anchor-div">
22 |             <a class="about-anchor">
23 |                 <span>Display settings</span>
24 |             </a>
25 |         </div>
26 |         <div class="anchor-div">
27 |             <a class="about-anchor">
28 |                 <span>Offline settings</span>
29 |             </a>
30 |         </div>
31 |         <div class="anchor-div">
32 |             <a class="about-anchor">
33 |                 <span>Manage add-ins</span>
34 |             </a>
35 |         </div>
36 |     </div>
37 |     <div class="about-content">
38 |         <div class="anchor-div">
39 |             <a class="about-anchor">
40 |                 <span>Help</span>
41 |             </a>
42 |         </div>
43 |         <div class="anchor-div">
44 |             <a class="about-anchor">
45 |                 <span>Feedback</span>
46 |             </a>
47 |         </div>
48 |         <div class="anchor-div">
49 |             <a class="about-anchor">
50 |                 <span>Community</span>
51 |             </a>
52 |         </div>
53 |         <div class="anchor-div">
54 |             <a class="about-anchor">
55 |                 <span>Legal</span>
56 |             </a>
57 |         </div>
58 |         <div class="anchor-div">
59 |             <a class="about-anchor">
60 |                 <span>Privacy & cookies</span>
61 |             </a>
62 |         </div>
63 |     </div>
64 |     <div class="profile-content">
65 |         <div class='logo logo-style2' style='float:left'></div>
66 |         <div class='messageHeader' style='float:left; height: 70px; margin-bottom: 13px;'>
67 |             <div style="font-size: 17px">{{userName}}</div>
68 |             <div style="font-size: 12px; color: #666">{{userMail}}</div>
69 |         </div>
70 |         <div class="anchor-div">
71 |             <a class="about-anchor">
72 |                 <span style="font-size: 14px">My profile</span>
73 |             </a>
74 |         </div>
75 |         <div class="anchor-div">
76 |             <a class="about-anchor">
77 |                 <span style="font-size: 14px">My account</span>
78 |             </a>
79 |         </div>
80 |         <div class="anchor-div">
81 |             <a class="about-anchor">
82 |                 <span style="font-size: 14px">Sign Out</span>
83 |             </a>
84 |         </div>
85 |     </div>
86 | </ejs-sidebar>


--------------------------------------------------------------------------------
/src/app/content-area/popup/popup.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ViewEncapsulation,ViewChild, OnInit } from '@angular/core';
 2 | import { DataService } from 'src/app/data-service';
 3 | import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';
 4 | import { userName, userMail } from '../../data/datasource';
 5 | @Component({
 6 |     selector: 'popup-section',
 7 |     templateUrl: './popup.component.html',
 8 |     encapsulation: ViewEncapsulation.None,
 9 | })
10 | 
11 | export class PopupComponent implements OnInit {
12 | 
13 |     /** Configurations for the popup page */
14 |     constructor(private buttonClick: DataService) {
15 |     }
16 |     @ViewChild('popup') public sidebar: SidebarComponent;
17 |     public type: string;
18 | 
19 |     public clickButton() {
20 |         this.buttonClick.onCloseClick.emit();
21 |     }
22 |     public showSidebar(): void {
23 |         this.sidebar.show()
24 |     }
25 |     public hideSidebar(): void {
26 |         this.sidebar.hide()
27 |     }
28 |     // Right Sidebar dropdown binding properties
29 |     public userName: string = userName;
30 |     public userMail: string = userMail;
31 | 
32 |     public ngOnInit(): void {
33 |         this.type = "Push";
34 |     }
35 | }


--------------------------------------------------------------------------------
/src/app/content-area/readingpane/readingpane.component.html:
--------------------------------------------------------------------------------
  1 | <div class='rp-separate-content'>
  2 |     <div class='rp-separate-tool'>
  3 |         <ejs-toolbar id='rp-toolbar_align' #rpReplyToolbar width="100%" height="100%" overflowMode='Popup'
  4 |             (clicked)="toolbarClick($event)">
  5 |             <e-items>
  6 |                 <e-item prefixIcon='ej-icon-Reply-All tb-icons' cssClass='tb-item-replyAll' tooltipText='Reply All'>
  7 |                     <ng-template #template>
  8 |                         <div>
  9 |                             <ejs-dropdownlist id='rp-replyAllList' #rpReplyAllList [dataSource]='replyList' (change)='replyAllSelect($event)' value="Reply All"
 10 |                                 [fields]='dropdownField' popupHeight="150px" popupWidth="150px" width="115px">
 11 |                                 <ng-template #valueTemplate let-data="">
 12 |                                     <div>
 13 |                                         <div class="float-left" style="margin-top: 1px;">
 14 |                                             <span style="font-weight: bold" class="e-btn-icon ej-icon-Reply-All tb-icons e-icons tb-icon-rply-all">
 15 |                                             </span>
 16 |                                         </div>
 17 |                                         <div class="tb-dropdowns float-left"> Reply All </div>
 18 |                                     </div>
 19 |                                 </ng-template>
 20 |                             </ejs-dropdownlist>
 21 |                         </div>
 22 |                     </ng-template>
 23 |                 </e-item>
 24 |                 <e-item prefixIcon='ej-icon-Delete tb-icons' text='Delete' tooltipText= 'Delete'>
 25 |                 </e-item>
 26 |                 <e-item text='Junk' cssClass='tb-item-Selected' tooltipText='Mark the sender as unsafe and delete the message'>
 27 |                 </e-item>
 28 |                 <e-item cssClass='tb-item-more' tooltipText='More actions' >
 29 |                     <ng-template #template>
 30 |                         <div>
 31 |                             <ejs-dropdownlist id='rp-moreList' #rpMoreItemList [dataSource]='moreList'  
 32 |                                 value="Mark as read" [fields]='dropdownField' popupHeight="150px" popupWidth="150px">
 33 |                                 <ng-template #valueTemplate let-data>
 34 |                                     <div class="tb-dropdowns" style ="font-size: 16px;margin-top: -2px;"><span class="e-btn-icon e-icons ej-icon-More"></span></div>
 35 |                                 </ng-template>
 36 |                             </ejs-dropdownlist>
 37 |                         </div>
 38 |                     </ng-template>
 39 |                 </e-item>
 40 |                 <e-item prefixIcon='ej-icon-Close tb-icons' align='right' tooltipText= 'Close' cssClass='rp-tp-item-Close'>
 41 |                 </e-item>
 42 |             </e-items>
 43 |         </ejs-toolbar>
 44 |         <ejs-toolbar id='rp-toolbar_newmail' #rpNewmailToolbar height='100%' overflowMode='Popup' style="display: none"
 45 |             (clicked)="toolbarNewMailClick($event)">  
 46 |             <e-items>
 47 |                 <e-item  prefixIcon ='ej-icon-Send tb-icons' text='Send' tooltipText='Send' ></e-item>
 48 |                 <e-item  prefixIcon ='ej-icon-Attach tb-icons' text='Attach' tooltipText='Attach' ></e-item>
 49 |                 <e-item  text ='Discard' ></e-item>
 50 |                 <e-item  cssClass='tb-item-more tb-item-more-mail' tooltipText='More actions'>
 51 |                     <ng-template #template>
 52 |                         <div>
 53 |                             <ejs-dropdownlist id='rp-moreList2' #rpMoreItemList2 [dataSource]='moreMailList' 
 54 |                                 value="Show From" [fields]='dropdownField' popupHeight="150px" popupWidth="150px">
 55 |                                 <ng-template #valueTemplate let-data>
 56 |                                     <div class="tb-dropdowns" style ="font-size: 16px;margin-top: -2px;"><span class="e-btn-icon e-icons ej-icon-More"></span></div>
 57 |                                 </ng-template>
 58 |                             </ejs-dropdownlist>
 59 |                         </div>
 60 |                     </ng-template>
 61 |                 </e-item>
 62 |                 <e-item  prefixIcon='ej-icon-Close tb-icons' tooltipText='Close' align='right' 
 63 |                     cssClass='rp-tb-item-Close' >
 64 |                 </e-item>
 65 |             </e-items>                  
 66 |         </ejs-toolbar>
 67 |     </div>
 68 |     <div class='rp-maincontent_pane'>
 69 |         <div id='rp-reading-pane-div' class='rp-reading-pane customScrollBar'>
 70 |             <ejs-accordion id='rp-accordian' #rpAccordian style='display: none;'></ejs-accordion>
 71 |             <div id='rp-mailarea'>
 72 |                 <div id="rp-newmailContent">
 73 |                     <div class="mail-content-div customScrollBar">
 74 |                         <div class="mail-id">
 75 |                             <button ejs-button id='rp-btnTo' class="float-left" style='width:50px;'>To</button>
 76 |                             <ejs-multiselect id='rp-autoTo' #rpAutoTo [dataSource]='contactsList' [fields]='multiSelectFields' 
 77 |                                 mode='Box' placeholder= '...' [width]='multiSelectWidth' cssClass ='ac-new-mail' delimiterChar=';'
 78 |                                 popupWidth='300px' hideSelectedItem='true' allowFiltering='true' (filtering)='onFiltering($event)'>
 79 |                                 <ng-template #itemTemplate let-data>
 80 |                                     <div class="multiselect-template parent-div">
 81 |                                         <img class="contacts-item-image-style" src="{{data.Image}}" alt="employee"/>
 82 |                                         <div class="contacts-item-text-style"> 
 83 |                                             <div>{{data.text}}</div> 
 84 |                                         </div>
 85 |                                         <div class="contacts-item-subtext-style">{{data.MailId}}</div>
 86 |                                     </div>
 87 |                                 </ng-template>
 88 |                                 <ng-template #valueTemplate let-data>
 89 |                                     <div>
 90 |                                         <img class="contacts-value-img-style" src="{{data.Image}}" alt="employee"/>
 91 |                                         <div class="contacts-value-text-style">{{data.MailId}}</div>
 92 |                                     </div>
 93 |                                 </ng-template>
 94 |                             </ejs-multiselect>
 95 |                         </div>
 96 |                         <div class="mail-id">
 97 |                             <button ejs-button id='rp-btnCc' class="float-left" style='width:50px;'>Cc</button>
 98 |                             <ejs-multiselect id='rp-autoCc' #rpAutoCc [dataSource]='contactsList' [fields]='multiSelectFields' 
 99 |                                 mode='Box' placeholder= '...' [width]='multiSelectWidth' cssClass ='ac-new-mail' delimiterChar=';'
100 |                                 popupWidth='300px' hideSelectedItem='true' allowFiltering='true' (filtering)='onFiltering($event)'>
101 |                                 <ng-template #itemTemplate let-data>
102 |                                     <div class="multiselect-template parent-div">
103 |                                         <img class="contacts-item-image-style" src="{{data.Image}}" alt="employee"/>
104 |                                         <div class="contacts-item-text-style"> 
105 |                                             <div>{{data.text}}</div> 
106 |                                         </div>
107 |                                         <div class="contacts-item-subtext-style">{{data.MailId}}</div>
108 |                                     </div>
109 |                                 </ng-template>
110 |                                 <ng-template #valueTemplate let-data>
111 |                                     <div>
112 |                                         <img class="contacts-value-img-style" src="{{data.Image}}" alt="employee"/>
113 |                                         <div class="contacts-value-text-style">{{data.MailId}}</div>
114 |                                     </div>
115 |                                 </ng-template>
116 |                             </ejs-multiselect>
117 |                         </div>
118 |                         <div class="mail-subject e-input-group">
119 |                             <input type='text' id='rp-txtSubject' placeholder="Enter Subject Here" />
120 |                         </div>
121 |                         <div>
122 |                             <div id='rp-mailContentMessage' class="customScrollBar" contenteditable="true"></div>
123 |                         </div>
124 |                         <div class='mail-text-edit-tb-parent'>
125 |                             <ejs-toolbar id='rp-new_email_toolbar' #rpRTEToolbar height='100%'>  
126 |                                 <e-items>
127 |                                     <e-item prefixIcon= 'ej-icon-Font tb-icons' tooltipText= 'Font' ></e-item>
128 |                                     <e-item prefixIcon= 'ej-icon-Font-Size path2 tb-icons' tooltipText= 'Font Size' ></e-item>
129 |                                     <e-item prefixIcon= 'ej-icon-Bold tb-icons' tooltipText= 'Bold' ></e-item> 
130 |                                     <e-item prefixIcon= 'ej-icon-Italic tb-icons' tooltipText= 'Italic' ></e-item> 
131 |                                     <e-item prefixIcon= 'ej-icon-Underlined tb-icons' tooltipText= 'Underline' ></e-item> 
132 |                                     <e-item prefixIcon= 'ej-icon-Highlight tb-icons' tooltipText= 'Highlight' ></e-item> 
133 |                                     <e-item prefixIcon= 'ej-icon-Font-Color-Icon tb-icons' tooltipText= 'Font color' ></e-item> 
134 |                                     <e-item prefixIcon= 'ej-icon-Bullets tb-icons' tooltipText= 'Bullets' ></e-item> 
135 |                                     <e-item prefixIcon= 'ej-icon-Numbering tb-icons' tooltipText= 'Numbering' ></e-item> 
136 |                                     <e-item prefixIcon= 'ej-icon-Decr-Indent tb-icons' tooltipText= 'Decrease Indent' ></e-item> 
137 |                                     <e-item prefixIcon= 'ej-icon-Incr-Indent tb-icons' tooltipText= 'Increase Indent' ></e-item> 
138 |                                     <e-item prefixIcon= 'ej-icon-Left-aligned tb-icons' tooltipText= 'Decrease Indent' ></e-item> 
139 |                                     <e-item prefixIcon= 'ej-icon-Centre-aligned tb-icons' tooltipText= 'Increase Indent' ></e-item> 
140 |                                     <e-item prefixIcon= 'ej-icon-Right-aligned tb-icons' tooltipText= 'Decrease Indent' ></e-item> 
141 |                                     <e-item prefixIcon= 'ej-icon-Hyperlink tb-icons' tooltipText= 'Hyperlink' ></e-item>
142 |                                 </e-items>
143 |                             </ejs-toolbar>
144 |                         </div>
145 |                         <div>
146 |                             <button ejs-button id='rp-btnSend' isPrimary='true' (click)="btnRPSendClick()">Send</button>
147 |                             <button ejs-button id='rp-btnDiscard' (click)="btnRPDiscardClick()">Discard</button>
148 |                         </div>
149 |                     </div> 
150 |                 </div>
151 |             </div>
152 |         </div>
153 |     </div>
154 | </div>
155 | <div id='rpAccodianContent' style='display: none'>
156 |     <div style='height: 100px'>
157 |         <div class='logo logo-style2 float-left'></div>
158 |         <div class='messageHeader float-left'>
159 |             <div id='rp-sub'></div>
160 |             <div id='rp-date' ></div>
161 |             <div id='rp-to'></div>
162 |         </div>
163 |         <div style="right:0;position: absolute;">
164 |         </div>
165 |     </div>
166 |     <div id='rp-accContent'>
167 |     </div>
168 | </div>


--------------------------------------------------------------------------------
/src/app/content-area/readingpane/readingpane.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, ViewChild, AfterViewInit } from '@angular/core';
  2 | import { ToolbarComponent, AccordionComponent, ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
  3 | import { MultiSelectComponent, SelectEventArgs as DropDownSelectEventArgs, FilteringEventArgs } from '@syncfusion/ej2-angular-dropdowns';
  4 | import { Query } from '@syncfusion/ej2-data';
  5 | import { getContacts } from '../../data/datasource';
  6 | 
  7 | @Component({
  8 |     selector: 'readingpane-section',
  9 |     templateUrl: 'readingpane.component.html'
 10 | })
 11 | 
 12 | export class ReadingPaneComponent implements AfterViewInit {
 13 |     
 14 |     /** Configurations for the Reading pane page */
 15 |     constructor() {
 16 |     }
 17 | 
 18 |     @ViewChild('rpReplyToolbar')
 19 |     public rplyToolbar: ToolbarComponent;
 20 |     @ViewChild('rpNewmailToolbar')
 21 |     public toolbarHeader1: ToolbarComponent;
 22 |     @ViewChild('rpAutoTo')
 23 |     public autoToList: MultiSelectComponent;
 24 |     @ViewChild('rpAutoCc')
 25 |     public autoCCList: MultiSelectComponent;
 26 |     @ViewChild('rpRTEToolbar')
 27 |     public toolbarMail: ToolbarComponent;
 28 |     @ViewChild('rpAccordian')
 29 |     public acrdnObj: AccordionComponent;
 30 | 
 31 |     public selectedRPToolbarItem: string = '';
 32 |     public ddlLastRplyValueRP: string = 'Reply All';
 33 |     public dropdownSelectRP: boolean = false;
 34 |     private selectedMessage: {[key: string]: Object} = null;
 35 | 
 36 |     public contactsList: {[key: string]: Object}[] = getContacts();
 37 |     public multiSelectFields: Object = { text: 'MailId', value: 'MailId' };
 38 |     public multiSelectWidth: string = 'calc(100% - 60px)';
 39 | 
 40 |     public replyList: { [key: string]: Object }[] = [
 41 |         { text: 'Reply' }, { text: 'Reply All' }, { text: 'Forward' }
 42 |     ];
 43 | 
 44 |     public moreList: { [key: string]: Object }[] = [
 45 |         { text: 'Mark as unread' }, { text: 'Mark as read' }, { text: 'Flag' }, { text: 'Clear Flag' }
 46 |     ];
 47 | 
 48 |     public moreMailList: { [key: string]: Object }[] = [
 49 |         { text: 'Save draft' }, { text: 'Show From' }, { text: 'Check Names' }, { text: 'Show message options' }
 50 |     ];
 51 | 
 52 |     public onFiltering(e: FilteringEventArgs): void {
 53 |         let query: Query = new Query();
 54 |         query = (e.text !== '') ? query.where('text', 'startswith', e.text, true) : query;
 55 |         e.updateData(this.contactsList, query);
 56 |     }
 57 | 
 58 |     public ngAfterViewInit(): void {
 59 |     }
 60 | 
 61 |     public toolbarClick(args: ClickEventArgs): void {
 62 |         if (args.item) {
 63 |             if (args.item.prefixIcon === 'ej-icon-Close tb-icons') {
 64 |                 this.selectedRPToolbarItem = 'ClosePopup';
 65 |             } else if (args.item.text === 'Delete' || args.item.text === 'Junk') {
 66 |                 this.selectedRPToolbarItem = args.item.text + 'Click';
 67 |             }
 68 |         }
 69 |     }
 70 | 
 71 |     public replyAllSelect(args: DropDownSelectEventArgs): void {
 72 |         if (args.itemData.text) {
 73 |             this.showMailDialogRP(args.itemData.text);
 74 |             this.ddlLastRplyValueRP = args.itemData.text;
 75 |             this.dropdownSelectRP = true;
 76 |         }
 77 |     }
 78 | 
 79 |     public btnRPSendClick(): void {
 80 |         this.selectedRPToolbarItem = 'SendClick';
 81 |     }
 82 | 
 83 |     public btnRPDiscardClick(): void {
 84 |         this.selectedRPToolbarItem = 'DiscardClick';
 85 |     }
 86 | 
 87 |     public toolbarNewMailClick(args: ClickEventArgs): void {
 88 |         if (args.item) {
 89 |             if (args.item.prefixIcon === 'ej-icon-Close tb-icons') {
 90 |                 this.selectedRPToolbarItem = 'ClosePopup';
 91 |             } else if (args.item.text === 'Send' || args.item.text === 'Discard') {
 92 |                 this.selectedRPToolbarItem = args.item.text + 'Click';
 93 |             }
 94 |         }
 95 |     }
 96 | 
 97 |     public resetRPSelectedItem(text: string): void {
 98 |         this.selectedRPToolbarItem = text;
 99 |         this.dropdownSelectRP = false;
100 |     }
101 | 
102 |     public clearMailForm(): void {
103 |         if (this.autoCCList.value) {
104 |             this.autoCCList.value = [];
105 |         }
106 |         if (this.autoToList.value) {
107 |             this.autoToList.value = [];
108 |         }
109 |         (document.getElementById('rp-txtSubject') as HTMLInputElement).value = '';
110 |         document.getElementById('rp-mailContentMessage').innerHTML = '';
111 |     }
112 | 
113 |     public bindReadingPaneData(selectedMessage1: {[key: string]: Object}): void {
114 |         this.selectedMessage = selectedMessage1;
115 |         document.getElementById('rp-accordian').style.display = '';
116 |         document.getElementById('rp-mailarea').style.display = 'none';
117 |         document.getElementById('rp-toolbar_newmail').style.display = 'none';
118 |         document.getElementById('rp-toolbar_align').style.display = '';
119 |         this.rplyToolbar.refreshOverflow();
120 |         let key: string = 'ContactTitle';
121 |         if (this.acrdnObj.items.length === 0) {
122 |             this.acrdnObj.addItem({
123 |                 content: '#rpAccodianContent', expanded: true, header: this.selectedMessage[key].toString()
124 |             });
125 |         }
126 |         let headerTitle: HTMLElement = document.getElementById('rp-accordian');
127 |         key = 'ContactTitle';
128 |         headerTitle.getElementsByClassName('e-acrdn-header-content')[0].innerHTML = this.selectedMessage[key].toString();
129 |         key = 'Image';
130 |         (headerTitle.getElementsByClassName('logo logo-style2')[0] as HTMLElement).style.background =
131 |             'url(' + this.selectedMessage[key].toString().replace('assets/images/images/', 'assets/images/large/') + ')  no-repeat 50% 50%';
132 |         key = 'text';
133 |         document.getElementById('rp-sub').innerHTML = this.selectedMessage[key].toString();
134 |         key = 'Date';
135 |         let dateString: string = this.selectedMessage[key].toString();
136 |         key = 'Time';
137 |         document.getElementById('rp-date').innerHTML = dateString + ' ' + this.selectedMessage[key].toString();
138 |         key = 'CC';
139 |         document.getElementById('rp-to').innerHTML = (this.selectedMessage[key].toString()).replace(/,/g, ' ; ');
140 |         key = 'Message';
141 |         if (this.selectedMessage[key]) {
142 |             document.getElementById('rp-accContent').innerHTML = this.selectedMessage[key].toString();
143 |         } else {
144 |             document.getElementById('rp-accContent').innerHTML =
145 |                 decodeURI('%3Cdiv%20id=%22box%22%20style=%22padding:10px;%20border:%20none;%20height:%20auto;' +
146 |                     '%22%20contenteditable=%22true%22%20data-gramm_id=%223898c552-c710-10db-69ec-08371185eb3f%22%20' +
147 |                     'data-gramm=%22true%22%20spellcheck=%22false%22%20data-gramm_editor=%22true%22%3E%3Cp%20class=%22' +
148 |                     'MsoNormal%22%3EDear%20Name,&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22MsoNormal%22%3EI%20really%20' +
149 |                     'appreciate%20your%20understanding%20and%20support%20regarding%0Athe%20changes%20we\'re%20' +
150 |                     'making%20to%20the%20project%20plan.&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22' +
151 |                     'MsoNormal%22%3EThank%20you%20for%20your%20confidence%20in%20me.%20I\'m%20sure%20' +
152 |                     'you\'re%20going%0Ato%20be%20pleased%20with%20the%20results.&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22' +
153 |                     'MsoNormal%22%3EBest%20Regards,%3Cbr%3E%0AYour%20Name%3Co:p%3E%3C/o:p%3E%3C/p%3E%0A%0A%20%20%20%20%3C/div%3E');
154 |         }
155 |     }
156 | 
157 |     public showMailDialogRP(option: string): void {
158 |         document.getElementById('rp-accordian').style.display = 'none';
159 |         document.getElementById('rp-mailarea').style.display = '';
160 |         document.getElementById('rp-toolbar_newmail').style.display = '';
161 |         document.getElementById('rp-toolbar_align').style.display = 'none';
162 |         this.clearMailForm();
163 |         let key: string = '';
164 |         this.toolbarHeader1.refreshOverflow();
165 |         this.toolbarMail.refreshOverflow();
166 |         if (option !== 'Forward') {
167 |             if (option !== 'Reply') {
168 |                 key = 'CCMail';
169 |                 this.autoCCList.value =  this.selectedMessage[key] as [string];
170 |             }
171 |             key = 'Email';
172 |             this.autoToList.value = [this.selectedMessage[key].toString()];
173 |         }
174 |         key = 'ContactTitle';
175 |         (document.getElementById('rp-txtSubject') as HTMLInputElement).value = this.selectedMessage[key].toString();
176 |         key = 'Message';
177 |         if (this.selectedMessage[key]) {
178 |             document.getElementById('rp-mailContentMessage').innerHTML = this.selectedMessage[key].toString();
179 |         } else {
180 |             document.getElementById('rp-mailContentMessage').innerHTML =
181 |             decodeURI('%3Cdiv%20id=%22box%22%20style=%22padding:10px;%20border:%20none;%20height:%20auto;' +
182 |                 '%22%20contenteditable=%22true%22%20data-gramm_id=%223898c552-c710-10db-69ec-08371185eb3f%22%20' +
183 |                 'data-gramm=%22true%22%20spellcheck=%22false%22%20data-gramm_editor=%22true%22%3E%3Cp%20class=%22' +
184 |                 'MsoNormal%22%3EDear%20Name,&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22MsoNormal%22%3EI%20really%20' +
185 |                 'appreciate%20your%20understanding%20and%20support%20regarding%0Athe%20changes%20we\'re%20' +
186 |                 'making%20to%20the%20project%20plan.&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22' +
187 |                 'MsoNormal%22%3EThank%20you%20for%20your%20confidence%20in%20me.%20I\'m%20sure%20' +
188 |                 'you\'re%20going%0Ato%20be%20pleased%20with%20the%20results.&nbsp;%3C/p%3E%0A%0A%3Cp%20class=%22' +
189 |                 'MsoNormal%22%3EBest%20Regards,%3Cbr%3E%0AYour%20Name%3Co:p%3E%3C/o:p%3E%3C/p%3E%0A%0A%20%20%20%20%3C/div%3E');
190 |         }
191 |     }
192 | }


--------------------------------------------------------------------------------
/src/app/content-area/sidebar/navigation/navigation.component.html:
--------------------------------------------------------------------------------
 1 | <div class="folder-pane customScrollBar">
 2 |     <ejs-treeview id="tree" #tree [fields]="treeviewFields" (nodeSelected)='nodeSelected($event)'>
 3 |         <ng-template #nodeTemplate let-data>
 4 |             <div class="treeviewdiv">
 5 |                 <div style="float:left">
 6 |                 <span class="treeName">{{data.Name}}</span>
 7 |                 </div>
 8 |                 <div class="count" style="margin-left: 5px; float:right">
 9 |                     <span class="treeCount {{data.Name}}" >{{data.Count}}</span>
10 |                 </div>
11 |                 <button title="{{data.FavoriteMessage}}" class="treeview-btn-temp">
12 |                     <span class="e-btn-icon ej-icon-{{data.Favorite}} {{data.Name}}"></span>
13 |                 </button>
14 |             </div>
15 |         </ng-template>
16 |     </ejs-treeview>
17 | </div>


--------------------------------------------------------------------------------
/src/app/content-area/sidebar/navigation/navigation.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
 2 | import { TreeViewComponent, NodeSelectEventArgs } from '@syncfusion/ej2-angular-navigations';
 3 | import { DataService } from '../../../data-service';
 4 | 
 5 | @Component({
 6 |     selector: 'navigation-section',
 7 |     templateUrl: './navigation.component.html',
 8 |     encapsulation: ViewEncapsulation.None,
 9 | })
10 | 
11 | export class NavigationComponent implements OnInit {
12 | 
13 |     /** Configurations for the navigation page */
14 |     constructor(private _data: DataService) {
15 |     }
16 | 
17 |     @ViewChild('tree')
18 |     public treeObj: TreeViewComponent;
19 | 
20 |     // Tree View binding properties
21 |     public treeDataSource: { [key: string]: Object }[] = this._data.treeDataSource;
22 |     public treeviewFields: Object = { dataSource: this._data.treeDataSource, id: 'ID', text: 'Name', parentID: 'PID',
23 |     hasChildren: 'HasChild', expanded: 'Expanded' };
24 |     public showPopupOnInit: boolean = false;
25 | 
26 |     public nodeSelected(args: NodeSelectEventArgs): void {
27 |         this._data.isNewMailClick=false;
28 |         document.getElementById('message-pane-div').classList.remove("msg-top-margin");
29 |         let key: string = 'id';
30 |         this._data.treeSelectedElement = <HTMLElement>args.node;
31 |         this._data.treeviewSelectedData = this.getTreeData1(args.nodeData[key].toString());
32 |         this._data.selectedFolderName = (args.node.getElementsByClassName('treeName')[0] as HTMLElement).innerHTML;
33 |         this._data.grpListObj.dataSource =
34 |         this._data.sortList(this._data.getFilteredDataSource(this._data.messageDataSource, 'Folder', this._data.selectedFolderName));
35 |         this._data.showEmptyMessage();
36 |         document.getElementById('spanFilterText').innerHTML = this._data.selectedFolderName;
37 |         if (!this.showPopupOnInit) {
38 |             this._data.showPopup1();
39 |             this.showPopupOnInit = true;
40 |         }
41 |         let element1: Element = document.getElementsByClassName('tb-item-inbox')[0];
42 |         if (element1) {
43 |             element1 = element1.getElementsByClassName('e-tbar-btn-text')[0];
44 |             element1.innerHTML = this._data.selectedFolderName;
45 |         }
46 |         this._data.hideSideBar();
47 |     }
48 | 
49 |     private getTreeData1(id: string): { [key: string]: Object } {
50 |         for (let i: number = 0; i < this._data.treeDataSource.length; i++) {
51 |             let key: string = 'ID';
52 |             if (this._data.treeDataSource[i][key].toString() === id) {
53 |                 return this._data.treeDataSource[i];
54 |             }
55 |         }
56 |         return null;
57 |     }
58 | 
59 |     public showPopup(): void {
60 |         setTimeout(this.openPopup.bind(this), 3000);
61 |     }
62 | 
63 |     public openPopup(): void {
64 |         this.treeObj.selectedNodes = ['8'];
65 |     }
66 | 
67 |     public ngOnInit(): void {
68 |     }
69 | 
70 |     public ngAfterContentInit(): void {
71 |         this.showPopup();
72 |     }
73 | 
74 |     public ngAfterViewInit(): void {
75 |         this._data.treeObj = this.treeObj;
76 |     }
77 | }


--------------------------------------------------------------------------------
/src/app/content-area/sidebar/search/search.component.html:
--------------------------------------------------------------------------------
 1 | <div class="search-div">
 2 |     <div class="search-device-section">
 3 |         <div style="width: 84%; float: left; height: 40px;">
 4 |             <ejs-autocomplete id='txtSearch' #txtSearch [dataSource]='contactsList' [showClearButton]='acClearButton'
 5 |                 placeholder='Search Mail and People' [fields]='searchFields' cssClass='search-text-box'
 6 |                 (change)='autoSearchSelect($event)' (focus)="autoSearchFocus($event)" (blur)="autoSearchBlur($event)" style="height: 40px; display: block;" >
 7 |             </ejs-autocomplete>
 8 |         </div>
 9 |         <div style="float: right; margin: 4px 0px;">
10 |             <button ejs-button id='btnSearch' iconCss='ej-icon-Search' cssClass='btn-shadow-hide'></button>
11 |         </div>
12 |     </div>
13 |     <div class="search-mobile-section" >
14 |         <div class='logo logo-style3 profile-pic' style='float:left'></div>
15 |         <div class='messageHeader' style='float:left; height: 50px;'>
16 |             <div style="font-size: 17px;color:#333">{{userName}}</div>
17 |             <div style="font-size: 12px; color: #666">{{userMail}}</div>
18 |         </div>
19 |         <div style="right:20px;position: absolute;">
20 |             <button ejs-button id='btnCloseButton1' iconCss='ej-icon-Close' cssClass='btn-shadow-hide' (click)="hideSideBar()"></button>
21 |         </div>
22 |     </div>
23 | </div>


--------------------------------------------------------------------------------
/src/app/content-area/sidebar/search/search.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 2 | import { ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
 3 | import { getContacts, userName, userMail } from '../../../data/datasource';
 4 | import { DataService } from '../../../data-service';
 5 | 
 6 | @Component({
 7 |     selector: 'search-section',
 8 |     templateUrl: './search.component.html',
 9 |     encapsulation: ViewEncapsulation.None,
10 | })
11 | 
12 | export class SearchComponent implements OnInit {
13 | 
14 |     /** Configurations for the search page */
15 |     constructor(private _data: DataService) {
16 |         this.contactsList = getContacts();
17 |     }
18 | 
19 |     // AutoComplete binding properties
20 |     public contactsList: {[key: string]: Object}[] = this._data.contactsList;
21 |     public searchFields: Object = this._data.searchFields;
22 |     public acClearButton: boolean = false;
23 |     public userName: string = userName;
24 |     public userMail: string = userMail;
25 | 
26 |     public autoSearchSelect(args: ChangeEventArgs): void {
27 |         this._data.autoSearchSelect(args);
28 |     }
29 | 
30 |     public autoSearchFocus(args: Object): void {
31 |         document.getElementsByClassName('search-div')[0].classList.add('search-focus');
32 |     }
33 | 
34 |     public autoSearchBlur(args: Object): void {
35 |         document.getElementsByClassName('search-div')[0].classList.remove('search-focus');
36 |     }
37 | 
38 |     public hideSideBar(): void {
39 |         this._data.hideSideBar();
40 |     }
41 | 
42 |     public ngOnInit(): void {
43 |     }
44 | }


--------------------------------------------------------------------------------
/src/app/content-area/sidebar/sidebar.component.html:
--------------------------------------------------------------------------------
1 | <ejs-sidebar #sidebar [enableGestures]="false" width="280px" target=".content-wrapper" [type]="type" style='height: 100%' role='complementary'>
2 |     <div style='background-color:#fff; width:100%;height:100%'>
3 |         <search-section #search></search-section>
4 |         <navigation-section #navigation></navigation-section>
5 |     </div>
6 | </ejs-sidebar>


--------------------------------------------------------------------------------
/src/app/content-area/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ViewChild, ViewEncapsulation, OnInit, AfterViewInit } from '@angular/core';
 2 | import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';
 3 | 
 4 | @Component({
 5 |     selector: 'sidebar-section',
 6 |     templateUrl: './sidebar.component.html',
 7 |     encapsulation: ViewEncapsulation.None,
 8 | })
 9 | 
10 | export class LeftSidebarComponent implements OnInit {
11 | 
12 |     /** Configurations for the Sidebar page */
13 |     constructor() {
14 |     }
15 |     ngOnInit(): void {
16 |         this.type="Push";
17 |     }
18 | 
19 |     @ViewChild('sidebar') public sidebar: SidebarComponent;
20 |     public type: string;
21 |     public showSidebar(): void {
22 |         this.sidebar.show()
23 |     }
24 |     public hideSidebar(): void {
25 |         this.sidebar.hide()
26 |     }
27 | }


--------------------------------------------------------------------------------
/src/app/data-service.ts:
--------------------------------------------------------------------------------
  1 | import { Injectable, EventEmitter } from '@angular/core';
  2 | import { TreeViewComponent, ToolbarComponent, AccordionComponent, ContextMenuComponent,
  3 |     ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
  4 | import { ListViewComponent } from '@syncfusion/ej2-angular-lists';
  5 | import { AutoCompleteComponent, ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
  6 | import { DialogComponent } from '@syncfusion/ej2-angular-popups';
  7 | import { Popup, Dialog } from '@syncfusion/ej2-popups';
  8 | import { NewMailComponent } from './content-area/content/content-pane/newmail/newmail.component';
  9 | import { ReadingPaneComponent } from './content-area/readingpane/readingpane.component';
 10 | import { folderData, messageDataSourceNew } from './data/datasource';
 11 | import { LeftSidebarComponent } from './content-area/sidebar/sidebar.component';
 12 | import { MessagePaneComponent } from './content-area/content/message-pane/message-pane.component';
 13 | @Injectable()
 14 | 
 15 | export class DataService {
 16 | 
 17 |     onDiscardClick : EventEmitter<string> = new EventEmitter<string>();
 18 |     onFilterClick : EventEmitter<string> = new EventEmitter<string>();
 19 |     onCloseClick : EventEmitter<string> = new EventEmitter<string>();
 20 |     // Class Members
 21 |     public treeDataSource: { [key: string]: Object }[] = folderData;
 22 |     public treeviewSelectedData: { [key: string]: Object } = null;
 23 |     public treeSelectedElement: HTMLElement = null;
 24 |     public selectedFolderName: string = '';
 25 |     public selectedListElement: HTMLElement = null;
 26 |     public isItemClick: boolean = false;
 27 |     public isMenuClick: boolean = false;
 28 |     private hoverOnPopup: boolean = false;
 29 |     public ddlReplyAllValue: string = 'Reply All';
 30 |     public dropdownSelect: boolean = false;
 31 | 
 32 |     // AutoComplete binding properties
 33 |     public contactsList: {[key: string]: Object}[] = [];
 34 |     public searchFields: Object = { text: 'MailId', value: 'MailId' };
 35 | 
 36 |     public grpListObj: ListViewComponent;
 37 |     public filterContextMenu: any;
 38 |     public newMailComponent: NewMailComponent;
 39 |     public acrdnObj: AccordionComponent;
 40 |     public dlgNewWindow: Dialog;
 41 |     public dlgSentMail: DialogComponent;
 42 |     public dlgSentMailNew: DialogComponent;
 43 |     public dlgReplyAllWindow: DialogComponent;
 44 |     public toolbarMobile: ToolbarComponent;
 45 |     public acSearchMobile: AutoCompleteComponent;
 46 |     public readingPaneComponent: ReadingPaneComponent;
 47 |     public treeObj: TreeViewComponent;
 48 |     public popupMail: Popup;
 49 |     public sidebarSection: LeftSidebarComponent;
 50 |     public messagePane:MessagePaneComponent;
 51 |     public isNewMailClick:boolean=false;
 52 |     // List View binding properties
 53 |     public messageDataSource: { [key: string]: Object }[] = messageDataSourceNew;
 54 | 
 55 |     public autoSearchSelect(args: ChangeEventArgs): void {
 56 |         if (args.value) {
 57 |             let dataSource: { [key: string]: Object }[] = this.messageDataSource;
 58 |             this.grpListObj.dataSource = this.getFilteredDataSource(dataSource, 'Email', args.value.toString());
 59 |             document.getElementById('spanFilterText').innerHTML = 'All Search';
 60 |         } else {
 61 |             this.resetSelectedFolderData();
 62 |         }
 63 |     }
 64 | 
 65 |     public markAllRead(): void {
 66 |         let dataSource: {[key: string]: Object}[] = this.getFilteredDataSource(this.messageDataSource, 'Folder', this.selectedFolderName);
 67 |         for (let i: number = 0; i < dataSource.length; i++) {
 68 |             let key: string = 'ReadStyle';
 69 |             dataSource[i][key] = 'Read';
 70 |             key = 'ReadTitle';
 71 |             dataSource[i][key] = 'Mark as unread';
 72 |             this.setReadCount('Unread');
 73 |         }
 74 |         this.grpListObj.dataSource = dataSource;
 75 |     }
 76 | 
 77 |     public showNewMailPopup(option: string): void {  
 78 |         this.isNewMailClick=true;  
 79 |         if (window.innerWidth > 1090) {
 80 |             document.getElementById("message-pane-div").classList.add("msg-top-margin");
 81 |         }
 82 |         let selectedMessage: { [key: string]: Object } = this.getSelectedMessage();
 83 |         this.showToolbarItems('none');
 84 |         document.getElementById('reading-pane-div').className += ' new-mail';
 85 |         document.getElementById('accordian').style.display = 'none';
 86 |         document.getElementById('emptyMessageDiv').style.display = 'none';
 87 |         document.getElementById('mailarea').style.display = '';
 88 |         document.getElementById('mailarea').appendChild(document.getElementById('newmailContent'));
 89 |         (document.getElementsByClassName('tb-item-new-mail')[0] as HTMLElement).style.display = 'none';
 90 |         (document.getElementsByClassName('tb-item-mark-read')[0] as HTMLElement).style.display = 'none';
 91 |         document.getElementById('toolbar_align').style.display = 'none';
 92 |         this.newMailComponent.showMailDialog(option, selectedMessage);
 93 |     }
 94 | 
 95 |     public showSelectedMessage(): void {
 96 |         this.isNewMailClick=false;
 97 |         document.getElementById("message-pane-div").classList.remove("msg-top-margin");
 98 |         document.getElementById('emptyMessageDiv').style.display = 'none';
 99 |         document.getElementById('mailarea').style.display = 'none';
100 |         document.getElementById('accordian').style.display = '';
101 |         this.showToolbarItems('inline-flex');
102 |         let readingPane: HTMLElement = document.getElementById('reading-pane-div');
103 |         readingPane.className = readingPane.className.replace(' new-mail', '');
104 |         (document.getElementsByClassName('tb-item-new-mail')[0] as HTMLElement).style.display = 'inline-flex';
105 |         (document.getElementsByClassName('tb-item-mark-read')[0] as HTMLElement).style.display = 'none';
106 |         document.getElementById('toolbar_align').style.display = '';
107 |     }
108 | 
109 |     public getSelectedMessage(): { [key: string]: Object } {
110 |         if (this.grpListObj.getSelectedItems()) {
111 |             let selectedData: { [key: string]: Object } = this.grpListObj.getSelectedItems().data as {};
112 |             let key: string = 'ContactID';
113 |             for (let i: number = 0; i < this.messageDataSource.length; i++) {
114 |                 if (this.messageDataSource[i][key].toString() === selectedData[key].toString()) {
115 |                     return this.messageDataSource[i];
116 |                 }
117 |             }
118 |         }
119 |         return null;
120 |     }
121 | 
122 |     public getFilteredDataSource(dataSource: { [key: string]: Object }[], columnName: string, columnValue: string):
123 |     { [key: string]: Object }[] {
124 |         let folderData: { [key: string]: Object }[] = [];
125 |         for (let i: number = 0; i < dataSource.length; i++) {
126 |             let data: { [key: string]: Object } = dataSource[i];
127 |             if (data[columnName] && data[columnName].toString() === columnValue) {
128 |                 folderData.push(data);
129 |             }
130 |         }
131 |         return folderData;
132 |     }
133 | 
134 |     public sortList(listItems: { [key: string]: Object }[]): { [key: string]: Object }[] {
135 |         for (let i: number = 0; i < listItems.length; i++) {
136 |             listItems[i] = this.setCategory1(listItems[i]);
137 |         }
138 |         return listItems;
139 |     }
140 | 
141 |     public setCategory1(listItem: { [key: string]: Object }): {} {
142 |         let key: string = 'Date';
143 |         let date: Date = new Date(listItem[key] as string);
144 |         let currentData: Date = new Date();
145 |         let oldDate: number = date.getDate();
146 |         let oldMonth: number = date.getMonth();
147 |         let oldYear: number = date.getFullYear();
148 | 
149 |         let currentDate: number = currentData.getDate();
150 |         let currentMonth: number = currentData.getMonth();
151 |         let currentYear: number = currentData.getFullYear();
152 | 
153 |         key = 'category';
154 |         if ( oldYear === currentYear) {
155 |             if (oldMonth === currentMonth) {
156 |                 if (oldDate === currentDate) {
157 |                     listItem[key] = 'Today';
158 |                 } else if (oldDate === currentDate - 1) {
159 |                     listItem[key] = 'Yesterday';
160 |                 } else if ( oldDate + 8 >= currentDate ) {
161 |                     listItem[key] = 'Last Week';
162 |                 } else if ( oldDate + 15 >= currentDate ) {
163 |                     listItem[key] = 'Two Weeks Ago';
164 |                 } else if ( oldDate + 22 >= currentDate ) {
165 |                     listItem[key] = 'Three Weeks Ago';
166 |                 } else {
167 |                     listItem[key] = 'Earlier this Month';
168 |                 }
169 |             } else {
170 |                 listItem[key] = 'Last Month';
171 |             }
172 |         } else {
173 |             listItem[key] = 'Older';
174 |         }
175 |         return listItem;
176 |     }
177 | 
178 |     public showEmptyMessage(): void {
179 |         this.isNewMailClick=false;
180 |         document.getElementById("message-pane-div").classList.remove("msg-top-margin");
181 |         document.getElementById('emptyMessageDiv').style.display = '';
182 |         document.getElementById('mailarea').style.display = 'none';
183 |         document.getElementById('accordian').style.display = 'none';
184 |         this.showToolbarItems('none');
185 |         let readingPane: HTMLElement = document.getElementById('reading-pane-div');
186 |         readingPane.className = readingPane.className.replace(' new-mail', '');
187 |         (document.getElementsByClassName('tb-item-new-mail')[0] as HTMLElement).style.display = 'inline-flex';
188 |         (document.getElementsByClassName('tb-item-mark-read')[0] as HTMLElement).style.display = 'inline-flex';
189 |         document.getElementById('toolbar_align').style.display = '';
190 |     }
191 | 
192 |     public showToolbarItems(displayType: string): void {
193 |         let selectedFolder: HTMLCollectionOf<HTMLElement> =
194 |         document.getElementsByClassName('tb-item-Selected') as HTMLCollectionOf<HTMLElement>;
195 |         for (let i: number = 0; i < selectedFolder.length; i++) {
196 |             selectedFolder[i].style.display = displayType;
197 |         }
198 |     }
199 | 
200 |     public setReadStyleMessage(contactID: string, readStyle: string): void {
201 |         let data: { [key: string]: Object } = this.getSelectedMessage();
202 |         this.selectedFolderName = data.Folder as string;
203 |         if (data !== null) {
204 |             let key: string = 'ReadStyle';
205 |             data[key] = readStyle;
206 |             key = 'ReadTitle';
207 |             let readNode: HTMLElement =
208 |             this.selectedListElement.getElementsByClassName('e-btn-icon ej-icon-Mark-as-read')[0].parentNode as HTMLElement;
209 |             if (readStyle === 'Read') {
210 |                 data[key] = 'Mark as unread';
211 |                 (this.selectedListElement.getElementsByClassName('subjectstyle')[0] as HTMLElement).className = 'subjectstyle';
212 |                 (this.selectedListElement.getElementsByClassName('template-container')[0] as HTMLElement).className =
213 |                 'template-container';
214 |                 readNode.title = 'Mark as unread';
215 |                 this.setReadCount('Unread');
216 |             } else {
217 |                 data[key] = 'Mark as read';
218 |                 readNode.title = 'Mark as read';
219 |                 (this.selectedListElement.getElementsByClassName('subjectstyle')[0] as HTMLElement).className =
220 |                 'subjectstyle Unread';
221 |                 (this.selectedListElement.getElementsByClassName('template-container')[0] as HTMLElement).className =
222 |                 'template-container Unread-parent';
223 |                 this.setReadCount('Read');
224 |             }
225 |         }
226 |     }
227 | 
228 |     public setReadCount(readType: string): void {
229 |         let selectedFolder: HTMLCollectionOf<HTMLElement> =
230 |         document.getElementsByClassName('treeCount ' + this.selectedFolderName) as HTMLCollectionOf<HTMLElement>;
231 |         for (let i: number = 0; i < selectedFolder.length; i++) {
232 |             let count: number = selectedFolder[i].innerHTML  === '' ? 0 : Number(selectedFolder[i].innerHTML);
233 |             if (readType === 'Unread') {
234 |                 if (count > 0) {
235 |                     count -= 1;
236 |                 }
237 |             } else {
238 |                 count += 1;
239 |             }
240 |             selectedFolder[i].innerHTML = count === 0 ? '' : count.toString();
241 |         }
242 |     }
243 | 
244 |     public toolbarClick(args: ClickEventArgs): void {
245 |         if (args.item) {
246 |             if (args.item.prefixIcon === 'ej-icon-Menu tb-icons') {
247 |                 this.sidebarSection.showSidebar();
248 |                 this.isMenuClick = true;
249 |             } else if (args.item.prefixIcon === 'ej-icon-Back') {
250 |                 let contentElement: Element = document.getElementsByClassName('row content')[0];
251 |                 contentElement.className = contentElement.className.replace('show-reading-pane', 'show-message-pane');
252 |                 let contentWrapper: Element = document.getElementsByClassName('content-wrapper')[0];
253 |                 if (contentWrapper.className.indexOf('show-search-option') !== -1) {
254 |                     this.resetSelectedFolderData();
255 |                 }
256 |                 contentWrapper.className = 'content-wrapper';
257 |             } else if (args.item.prefixIcon === 'ej-icon-Mark-as-read tb-icons') {
258 |                 this.markAllRead();
259 |             } else if (args.item.text === 'Delete' || args.item.prefixIcon === 'ej-icon-Delete' ||
260 |                 args.item.text === 'Junk' ) {
261 |                 let selectedMessage: { [key: string]: Object } = this.getSelectedMessage();
262 |                 this.messageDataSource.splice(this.messageDataSource.indexOf(selectedMessage), 1);
263 |                 let key: string = 'ContactID';
264 |                 this.grpListObj.removeItem({ id: selectedMessage[key].toString(), text: selectedMessage['text'].toString() });
265 |                 if (args.item.prefixIcon === 'ej-icon-Delete' && window.innerWidth < 605) {
266 |                     let contentElement: Element = document.getElementsByClassName('row content')[0];
267 |                     contentElement.className = contentElement.className.replace('show-reading-pane', 'show-message-pane');
268 |                 } else {
269 |                     this.showEmptyMessage();
270 |                 }
271 |             } else if ((args.item.text === 'New' ||  args.item.prefixIcon === 'ej-icon-Create-New') ||
272 |                 (args.item.prefixIcon === 'ej-icon-Reply-All')) {
273 |                 if (args.item.prefixIcon === 'ej-icon-Create-New') {
274 |                     let contentWrapper: Element = document.getElementsByClassName('content-wrapper')[0];
275 |                     contentWrapper.className = 'content-wrapper hide-message-option';
276 |                 }
277 |                 let option: string = 'New';
278 |                 if (args.item.prefixIcon === 'ej-icon-Reply-All') {
279 |                     option = 'Reply All';
280 |                 }
281 |                 if (window.innerWidth < 605) {
282 |                     let contentElement: Element = document.getElementsByClassName('row content')[0];
283 |                     contentElement.className = contentElement.className.replace('show-message-pane', 'show-reading-pane');
284 |                 }
285 |                 this.showNewMailPopup(option);
286 |             } else if (args.item.prefixIcon === 'ej-icon-Send') {
287 |                 this.sendClick();
288 |             } else if (args.item.prefixIcon === 'ej-icon-Search') {
289 |                 let contentWrapper: Element = document.getElementsByClassName('content-wrapper')[0];
290 |                 contentWrapper.className = 'content-wrapper show-search-option';
291 |                 this.toolbarMobile.refreshOverflow();
292 |             } else if (args.item.prefixIcon === 'ej-icon-Close') {
293 |                 this.acSearchMobile.value = '';
294 |             } else if (args.item.prefixIcon === 'ej-icon-Copy tb-icons') {
295 |                 if (!this.dlgReplyAllWindow.content) {
296 |                     this.dlgReplyAllWindow.refresh();
297 |                 }
298 |                 this.dlgReplyAllWindow.show();
299 |                 this.readingPaneComponent.bindReadingPaneData(this.getSelectedMessage());
300 |             }
301 |         }
302 |     }
303 | 
304 |     public sendClick(): void {
305 |         if (!this.dlgNewWindow) {
306 |            this.dlgNewWindow = (<any>document.getElementById('newMailSeparateDialog'))['ej2_instances'][0];
307 |         }
308 |         if (this.dlgNewWindow.visible || this.dlgReplyAllWindow.visible) {
309 |             this.dlgSentMailNew.show();
310 |         } else {
311 |             this.dlgSentMail.show();
312 |         }
313 |     }
314 | 
315 |     public resetSelectedFolderData(): void {
316 |         document.getElementById('spanFilterText').innerHTML = this.selectedFolderName;
317 |         let dataSource: { [key: string]: Object }[] =
318 |         this.getFilteredDataSource(this.messageDataSource, 'Folder', this.selectedFolderName);
319 |         this.grpListObj.dataSource = dataSource;
320 |         this.clearFilterMenu();
321 |         this.filterContextMenu.items[0].iconCss = 'ej-icon-Right';
322 |         this.filterContextMenu.dataBind();
323 |     }
324 | 
325 |     public clearFilterMenu(): void {
326 |         for (let i: number = 0; i < this.filterContextMenu.items.length; i++) {
327 |             if (this.filterContextMenu.items[i].items.length === 0) {
328 |                 this.filterContextMenu.items[i].iconCss = '';
329 |             }
330 |         }
331 |     }
332 |     public cloneObject(obj: { [key: string]: Object }): { [key: string]: Object } {
333 |         let keys: string[] = Object.keys(obj);
334 |         let cloneObject: { [key: string]: Object } = {};
335 |         for (let i: number = 0; i < keys.length; i++) {
336 |             cloneObject[keys[i]] = obj[keys[i]];
337 |         }
338 |         return cloneObject;
339 |     }
340 |     public popupMouseEnter(): void {
341 |         this.hoverOnPopup = true;
342 |     }
343 |     public popupMouseLeave(): void {
344 |         this.hoverOnPopup = false;
345 |         this.hidePopup();
346 |     }
347 |     public hidePopup(): void {
348 |         setTimeout(() => { if (!this.hoverOnPopup) { this.popupMail.hide(); } }, 2000);
349 |     }
350 | 
351 |     public showPopup1(): void {
352 |         let newMessageData: { [key: string]: Object } = this.cloneObject(this.messageDataSource[Math.floor(Math.random() * (50 - 3) + 2)]);
353 |         let key: string = 'text';
354 |         document.getElementById('popup-contact').innerHTML = newMessageData[key].toString();
355 |         key = 'ContactTitle';
356 |         document.getElementById('popup-subject').innerHTML = newMessageData[key].toString();
357 |         key = 'Message';
358 |         document.getElementById('popup-message-content').innerHTML = newMessageData[key].toString();
359 |         key = 'Image';
360 |         document.getElementById('popup-image').style.background = 'url(' +
361 |         newMessageData[key].toString().replace('assets/images/images/', 'assets/images/large/') + ') no-repeat 50% 50%';
362 |         key = 'Folder';
363 |         newMessageData[key] = 'Inbox';
364 |         key = 'ReadStyle';
365 |         newMessageData[key] = 'Unread';
366 |         key = 'ReadTitle';
367 |         newMessageData[key] = 'Mark as read';
368 |         key = 'Flagged';
369 |         newMessageData[key] = 'None';
370 |         key = 'FlagTitle';
371 |         newMessageData[key] = 'Flag this message';
372 |         key = 'ContactID';
373 |         newMessageData[key] = 'SF20032';
374 |         let element: HTMLElement = <HTMLElement>document.querySelector('#popupMailId');
375 |         element.onmouseenter = this.popupMouseEnter.bind(this);
376 |         element.onmouseleave = this.popupMouseLeave.bind(this);
377 |         if (!this.popupMail) {
378 |             this.popupMail= (<any>element)["ej2_instances"][0];
379 |         }
380 |         if (window.innerWidth > 605) {
381 |             this.popupMail.show();
382 |         } else {
383 |             this.popupMail.hide();
384 |         }
385 |         let dataSource: { [key: string]: Object }[] = this.getFilteredDataSource(this.messageDataSource, 'Folder', this.selectedFolderName);
386 |         dataSource.splice(0, 0, newMessageData);
387 |         this.messageDataSource.splice(0, 0, newMessageData);
388 |         this.grpListObj.dataSource = dataSource;
389 |         this.setReadCount('Read');
390 |         setTimeout(() => { this.hidePopup(); }, 2000);
391 |     }
392 | 
393 |     public flagListItem (target: HTMLElement, selectedMessage: {[key: string]: Object}): void {
394 |         let key: string = 'Flagged';
395 |         let parentNode: HTMLElement = target.parentNode as HTMLElement;
396 |         if (target.className.indexOf('Flagged') !== -1) {
397 |             parentNode.title = 'Flag this Message';
398 |             target.className = 'e-btn-icon ej-icon-Flag_1';
399 |             selectedMessage[key] = 'None';
400 |             key = 'FlagTitle';
401 |             selectedMessage[key] = 'Flag this Message';
402 |         } else {
403 |             parentNode.title = 'Remove the flag from this message';
404 |             target.className = 'e-btn-icon ej-icon-Flag_1 Flagged';
405 |             selectedMessage[key] = 'Flagged';
406 |             key = 'FlagTitle';
407 |             selectedMessage[key] = 'Remove the flag from this message';
408 |         }
409 |     }    
410 | 
411 |     public hideSideBar(): void {
412 |         if (!this.isMenuClick && this.sidebarSection && window.innerWidth < 1090) {
413 |             this.sidebarSection.hideSidebar();
414 |         }
415 |         this.isMenuClick = false;
416 |     }
417 | 
418 |     constructor() {
419 |         this.messageDataSource = this.sortList(this.messageDataSource);
420 |     }
421 | }
422 | 


--------------------------------------------------------------------------------
/src/app/header/header.component.html:
--------------------------------------------------------------------------------
 1 |     <ejs-appbar colorMode="Dark" id="appbar" style="font-size: 0; white-space: nowrap; line-height: normal">
 2 |         <div style="display: table-cell">
 3 |             <div class='home-btn'>
 4 |                 <span class='ej-icon-Bento' style='font-size: 18px;'></span>
 5 |             </div>
 6 |             <div style='margin-left: 15px;display: inline-block'>
 7 |                 <h1 class='home-btn-text'>Webmail</h1>
 8 |             </div>
 9 |         </div>
10 |         <div style="display: table-cell; width: 100%; text-align: center">
11 |         </div>
12 |         <div id="notification-div" class="header-right-pane">  
13 |             <div style="pointer-events: none;">
14 |                 <button ejs-button id='btnNotification' iconCss='ej-icon-Notify' cssClass='btn-shadow-hide'
15 |                     style="min-width: 52px"></button>
16 |             </div>
17 |         </div>
18 |         <div id="settings-div" class="header-right-pane">  
19 |             <div style="pointer-events: none;">
20 |                 <button ejs-button id='btnSettings' iconCss='ej-icon-Settings' cssClass='btn-shadow-hide'
21 |                     style="min-width: 52px"></button>
22 |             </div>
23 |         </div>
24 |         <div id="about-div" class="header-right-pane">  
25 |             <div style="pointer-events: none;">
26 |                 <button ejs-button id='btnAbout' iconCss='ej-icon-Help-white' cssClass='btn-shadow-hide'
27 |                     style="min-width: 52px"></button>
28 |             </div>
29 |         </div>
30 |         <div id="profile-div" class="header-right-pane"> 
31 |             <div style="pointer-events: none;">
32 |                 <button ejs-button id='btnLoginName' [content]='username' cssClass='btn-shadow-hide'
33 |                     class="btn-profile" style="min-width: 88px;font-weight: normal"></button>
34 |             </div>  
35 |             <div style="margin-right: 5px; pointer-events: none;">
36 |                 <span class="e-avatar e-avatar-large e-avatar-circle" style="background-image: url('../../assets/images/1.png');height: 40px; width: 40px;"></span>
37 |             </div> 
38 |         </div>
39 |     </ejs-appbar>


--------------------------------------------------------------------------------
/src/app/header/header.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 2 | import { userName } from './../data/datasource';
 3 | 
 4 | @Component({
 5 |     selector: 'header-section',
 6 |     templateUrl: './header.component.html',
 7 |     encapsulation: ViewEncapsulation.None,
 8 | })
 9 | 
10 | export class HeaderComponent implements OnInit {
11 | 
12 |     /** Configurations for the Header page */
13 |     constructor() {
14 |     }
15 | 
16 |     public username: string = userName;
17 | 
18 |     public ngOnInit(): void {
19 |     }
20 | }


--------------------------------------------------------------------------------
/src/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowser } from '@angular/platform-browser';
2 | import { AppModuleNgFactory } from './app.module.ngfactory';
3 | platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/assets/Outlook Icons/fonts/icomoon.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/Outlook Icons/fonts/icomoon.eot


--------------------------------------------------------------------------------
/src/assets/Outlook Icons/fonts/icomoon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/Outlook Icons/fonts/icomoon.ttf


--------------------------------------------------------------------------------
/src/assets/Outlook Icons/fonts/icomoon.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/Outlook Icons/fonts/icomoon.woff


--------------------------------------------------------------------------------
/src/assets/Outlook Icons/style.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: 'icomoon';
  3 |   src:  url('fonts/icomoon.eot?rjjyu7');
  4 |   src:  url('fonts/icomoon.eot?rjjyu7#iefix') format('embedded-opentype'),
  5 |     url('fonts/icomoon.ttf?rjjyu7') format('truetype'),
  6 |     url('fonts/icomoon.woff?rjjyu7') format('woff'),
  7 |     url('fonts/icomoon.svg?rjjyu7#icomoon') format('svg');
  8 |   font-weight: normal;
  9 |   font-style: normal;
 10 | }
 11 | 
 12 | [class^="ej-icon-"], [class*=" ej-icon-"] {
 13 |   /* use !important to prevent issues with browser extensions that change fonts */
 14 |   font-family: 'icomoon' !important;
 15 |   speak: none;
 16 |   font-style: normal;
 17 |   font-weight: normal;
 18 |   font-variant: normal;
 19 |   text-transform: none;
 20 |   line-height: 1;
 21 | 
 22 |   /* Better Font Rendering =========== */
 23 |   -webkit-font-smoothing: antialiased;
 24 |   -moz-osx-font-smoothing: grayscale;
 25 | }
 26 | 
 27 | .ej-icon-More:before {
 28 |   content: "\e701";
 29 | }
 30 | .ej-icon-Search:before {
 31 |   content: "\e702";
 32 | }
 33 | .ej-icon-Notify:before {
 34 |   content: "\e704";
 35 | }
 36 | .ej-icon-Help-white:before {
 37 |   content: "\e703";
 38 | }
 39 | .ej-icon-Close:before {
 40 |   content: "\e950";
 41 | }
 42 | .ej-icon-Agenda .path1:before {
 43 |   content: "\e900";
 44 |   color: rgb(0, 0, 0);
 45 | }
 46 | .ej-icon-Agenda .path2:before {
 47 |   content: "\e901";
 48 |   margin-left: -0.9931640625em;
 49 |   color: rgb(0, 0, 0);
 50 | }
 51 | .ej-icon-Agenda .path3:before {
 52 |   content: "\e902";
 53 |   margin-left: -0.9931640625em;
 54 |   color: rgb(255, 255, 255);
 55 | }
 56 | .ej-icon-Agenda .path4:before {
 57 |   content: "\e903";
 58 |   margin-left: -0.9931640625em;
 59 |   color: rgb(0, 0, 0);
 60 | }
 61 | .ej-icon-Agenda .path5:before {
 62 |   content: "\e904";
 63 |   margin-left: -0.9931640625em;
 64 |   color: rgb(255, 255, 255);
 65 | }
 66 | .ej-icon-Archive:before {
 67 |   content: "\e905";
 68 | }
 69 | .ej-icon-Attach:before {
 70 |   content: "\e906";
 71 | }
 72 | .ej-icon-Back:before {
 73 |   content: "\e907";
 74 | }
 75 | .ej-icon-Bento:before {
 76 |   content: "\e908";
 77 | }
 78 | .ej-icon-Blue:before {
 79 |   content: "\e909";
 80 |   color: #55abe5;
 81 | }
 82 | .ej-icon-Bold:before {
 83 |   content: "\e90a";
 84 | }
 85 | .ej-icon-Bullets:before {
 86 |   content: "\e90b";
 87 | }
 88 | .ej-icon-Calendar:before {
 89 |   content: "\e911";
 90 | }
 91 | .ej-icon-Centre-aligned:before {
 92 |   content: "\e912";
 93 | }
 94 | .ej-icon-Checkbox-Composite:before {
 95 |   content: "\e913";
 96 | }
 97 | .ej-icon-Checkbox:before {
 98 |   content: "\e914";
 99 | }
100 | .ej-icon-Copy:before {
101 |   content: "\e915";
102 | }
103 | .ej-icon-Create-New:before {
104 |   content: "\e916";
105 | }
106 | .ej-icon-Decr-Indent:before {
107 |   content: "\e917";
108 | }
109 | .ej-icon-Delete:before {
110 |   content: "\e91c";
111 | }
112 | .ej-icon-Dropdown-arrow:before {
113 |   content: "\e91d";
114 | }
115 | .ej-icon-Favorite-Composite:before {
116 |   content: "\e91e";
117 | }
118 | .ej-icon-Favorite:before {
119 |   content: "\e91f";
120 | }
121 | .ej-icon-Flag_1:before {
122 |   content: "\e920";
123 | }
124 | .ej-icon-Font-Color-Icon:before {
125 |   content: "\e921";
126 | }
127 | .ej-icon-Font-Size:before {
128 |   content: "\e923";
129 | }
130 | .ej-icon-Font:before {
131 |   content: "\e925";
132 | }
133 | .ej-icon-Green:before {
134 |   content: "\e926";
135 |   color: #5fbe7c;
136 | }
137 | .ej-icon-Help:before {
138 |   content: "\e927";
139 | }
140 | .ej-icon-Highlight:before {
141 |   content: "\e928";
142 | }
143 | .ej-icon-Hyperlink:before {
144 |   content: "\e92b";
145 |   color: #7e7e7e;
146 | }
147 | .ej-icon-Incr-Indent:before {
148 |   content: "\e92c";
149 | }
150 | .ej-icon-Italic:before {
151 |   content: "\e931";
152 | }
153 | .ej-icon-Left-aligned:before {
154 |   content: "\e932";
155 | }
156 | .ej-icon-Like:before {
157 |   content: "\e933";
158 | }
159 | .ej-icon-Mail:before {
160 |   content: "\e934";
161 | }
162 | .ej-icon-Mark-as-read:before {
163 |   content: "\e935";
164 | }
165 | .ej-icon-Menu:before {
166 |   content: "\e936";
167 | }
168 | .ej-icon-More2:before {
169 |   content: "\e937";
170 | }
171 | .ej-icon-New:before {
172 |   content: "\e700";
173 | }
174 | .ej-icon-Notification2:before {
175 |   content: "\e939";
176 |   color: #fff;
177 | }
178 | .ej-icon-Numbering:before {
179 |   content: "\e93a";
180 | }
181 | .ej-icon-Orange:before {
182 |   content: "\e940";
183 |   color: #ff8c03;
184 | }
185 | .ej-icon-People:before {
186 |   content: "\e941";
187 | }
188 | .ej-icon-Pin:before {
189 |   content: "\e942";
190 | }
191 | .ej-icon-Purple:before {
192 |   content: "\e943";
193 |   color: #a895e2;
194 | }
195 | .ej-icon-Red:before {
196 |   content: "\e945";
197 |   color: #f07d88;
198 | }
199 | .ej-icon-Reply-All:before {
200 |   content: "\e946";
201 | }
202 | .ej-icon-Reply:before {
203 |   content: "\e947";
204 | }
205 | .ej-icon-Right-aligned:before {
206 |   content: "\e948";
207 | }
208 | .ej-icon-Right:before {
209 |   content: "\e949";
210 | }
211 | .ej-icon-Search2:before {
212 |   content: "\e94a";
213 | }
214 | .ej-icon-Send:before {
215 |   content: "\e94b";
216 | }
217 | .ej-icon-Settings:before {
218 |   content: "\e705";
219 | }
220 | .ej-icon-Underlined:before {
221 |   content: "\e94d";
222 | }
223 | .ej-icon-Undo:before {
224 |   content: "\e94e";
225 | }
226 | .ej-icon-Yellow:before {
227 |   content: "\e94f";
228 |   color: #fff100;
229 | }
230 | .e-listview:not(.e-list-template) .e-list-item {
231 |   height: 85px;
232 |   line-height: 1.42857143;
233 | }
234 | 
235 | .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
236 |   content: '';
237 |   font-family: 'e-icons';
238 | }
239 | 
240 | .e-treeview .e-list-item div.e-icons::before {
241 |   content: "";
242 | }


--------------------------------------------------------------------------------
/src/assets/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/1.png


--------------------------------------------------------------------------------
/src/assets/images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/3.png


--------------------------------------------------------------------------------
/src/assets/images/Medium-36px-spin.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/Medium-36px-spin.gif


--------------------------------------------------------------------------------
/src/assets/images/bootstrap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/bootstrap.png


--------------------------------------------------------------------------------
/src/assets/images/fabric.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/fabric.png


--------------------------------------------------------------------------------
/src/assets/images/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/1.png


--------------------------------------------------------------------------------
/src/assets/images/images/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/10.png


--------------------------------------------------------------------------------
/src/assets/images/images/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/11.png


--------------------------------------------------------------------------------
/src/assets/images/images/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/12.png


--------------------------------------------------------------------------------
/src/assets/images/images/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/13.png


--------------------------------------------------------------------------------
/src/assets/images/images/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/14.png


--------------------------------------------------------------------------------
/src/assets/images/images/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/15.png


--------------------------------------------------------------------------------
/src/assets/images/images/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/16.png


--------------------------------------------------------------------------------
/src/assets/images/images/17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/17.png


--------------------------------------------------------------------------------
/src/assets/images/images/18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/18.png


--------------------------------------------------------------------------------
/src/assets/images/images/19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/19.png


--------------------------------------------------------------------------------
/src/assets/images/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/2.png


--------------------------------------------------------------------------------
/src/assets/images/images/20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/20.png


--------------------------------------------------------------------------------
/src/assets/images/images/21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/21.png


--------------------------------------------------------------------------------
/src/assets/images/images/22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/22.png


--------------------------------------------------------------------------------
/src/assets/images/images/23.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/23.png


--------------------------------------------------------------------------------
/src/assets/images/images/24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/24.png


--------------------------------------------------------------------------------
/src/assets/images/images/25.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/25.png


--------------------------------------------------------------------------------
/src/assets/images/images/26.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/26.png


--------------------------------------------------------------------------------
/src/assets/images/images/27.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/27.png


--------------------------------------------------------------------------------
/src/assets/images/images/28.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/28.png


--------------------------------------------------------------------------------
/src/assets/images/images/29.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/29.png


--------------------------------------------------------------------------------
/src/assets/images/images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/3.png


--------------------------------------------------------------------------------
/src/assets/images/images/30.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/30.png


--------------------------------------------------------------------------------
/src/assets/images/images/31.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/31.png


--------------------------------------------------------------------------------
/src/assets/images/images/32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/32.png


--------------------------------------------------------------------------------
/src/assets/images/images/33.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/33.png


--------------------------------------------------------------------------------
/src/assets/images/images/34.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/34.png


--------------------------------------------------------------------------------
/src/assets/images/images/35.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/35.png


--------------------------------------------------------------------------------
/src/assets/images/images/36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/36.png


--------------------------------------------------------------------------------
/src/assets/images/images/37.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/37.png


--------------------------------------------------------------------------------
/src/assets/images/images/38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/38.png


--------------------------------------------------------------------------------
/src/assets/images/images/39.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/39.png


--------------------------------------------------------------------------------
/src/assets/images/images/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/4.png


--------------------------------------------------------------------------------
/src/assets/images/images/40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/40.png


--------------------------------------------------------------------------------
/src/assets/images/images/41.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/41.png


--------------------------------------------------------------------------------
/src/assets/images/images/42.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/42.png


--------------------------------------------------------------------------------
/src/assets/images/images/43.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/43.png


--------------------------------------------------------------------------------
/src/assets/images/images/44.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/44.png


--------------------------------------------------------------------------------
/src/assets/images/images/45.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/45.png


--------------------------------------------------------------------------------
/src/assets/images/images/46.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/46.png


--------------------------------------------------------------------------------
/src/assets/images/images/47.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/47.png


--------------------------------------------------------------------------------
/src/assets/images/images/48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/48.png


--------------------------------------------------------------------------------
/src/assets/images/images/49.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/49.png


--------------------------------------------------------------------------------
/src/assets/images/images/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/5.png


--------------------------------------------------------------------------------
/src/assets/images/images/50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/50.png


--------------------------------------------------------------------------------
/src/assets/images/images/51.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/51.png


--------------------------------------------------------------------------------
/src/assets/images/images/52.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/52.png


--------------------------------------------------------------------------------
/src/assets/images/images/53.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/53.png


--------------------------------------------------------------------------------
/src/assets/images/images/54.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/54.png


--------------------------------------------------------------------------------
/src/assets/images/images/55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/55.png


--------------------------------------------------------------------------------
/src/assets/images/images/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/6.png


--------------------------------------------------------------------------------
/src/assets/images/images/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/7.png


--------------------------------------------------------------------------------
/src/assets/images/images/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/8.png


--------------------------------------------------------------------------------
/src/assets/images/images/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/images/9.png


--------------------------------------------------------------------------------
/src/assets/images/large/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/1.png


--------------------------------------------------------------------------------
/src/assets/images/large/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/10.png


--------------------------------------------------------------------------------
/src/assets/images/large/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/11.png


--------------------------------------------------------------------------------
/src/assets/images/large/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/12.png


--------------------------------------------------------------------------------
/src/assets/images/large/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/13.png


--------------------------------------------------------------------------------
/src/assets/images/large/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/14.png


--------------------------------------------------------------------------------
/src/assets/images/large/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/15.png


--------------------------------------------------------------------------------
/src/assets/images/large/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/16.png


--------------------------------------------------------------------------------
/src/assets/images/large/17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/17.png


--------------------------------------------------------------------------------
/src/assets/images/large/18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/18.png


--------------------------------------------------------------------------------
/src/assets/images/large/19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/19.png


--------------------------------------------------------------------------------
/src/assets/images/large/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/2.png


--------------------------------------------------------------------------------
/src/assets/images/large/20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/20.png


--------------------------------------------------------------------------------
/src/assets/images/large/21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/21.png


--------------------------------------------------------------------------------
/src/assets/images/large/22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/22.png


--------------------------------------------------------------------------------
/src/assets/images/large/23.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/23.png


--------------------------------------------------------------------------------
/src/assets/images/large/24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/24.png


--------------------------------------------------------------------------------
/src/assets/images/large/25.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/25.png


--------------------------------------------------------------------------------
/src/assets/images/large/26.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/26.png


--------------------------------------------------------------------------------
/src/assets/images/large/27.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/27.png


--------------------------------------------------------------------------------
/src/assets/images/large/28.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/28.png


--------------------------------------------------------------------------------
/src/assets/images/large/29.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/29.png


--------------------------------------------------------------------------------
/src/assets/images/large/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/3.png


--------------------------------------------------------------------------------
/src/assets/images/large/30.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/30.png


--------------------------------------------------------------------------------
/src/assets/images/large/31.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/31.png


--------------------------------------------------------------------------------
/src/assets/images/large/32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/32.png


--------------------------------------------------------------------------------
/src/assets/images/large/33.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/33.png


--------------------------------------------------------------------------------
/src/assets/images/large/34.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/34.png


--------------------------------------------------------------------------------
/src/assets/images/large/35.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/35.png


--------------------------------------------------------------------------------
/src/assets/images/large/36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/36.png


--------------------------------------------------------------------------------
/src/assets/images/large/37.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/37.png


--------------------------------------------------------------------------------
/src/assets/images/large/38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/38.png


--------------------------------------------------------------------------------
/src/assets/images/large/39.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/39.png


--------------------------------------------------------------------------------
/src/assets/images/large/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/4.png


--------------------------------------------------------------------------------
/src/assets/images/large/40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/40.png


--------------------------------------------------------------------------------
/src/assets/images/large/41.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/41.png


--------------------------------------------------------------------------------
/src/assets/images/large/42.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/42.png


--------------------------------------------------------------------------------
/src/assets/images/large/43.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/43.png


--------------------------------------------------------------------------------
/src/assets/images/large/44.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/44.png


--------------------------------------------------------------------------------
/src/assets/images/large/45.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/45.png


--------------------------------------------------------------------------------
/src/assets/images/large/46.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/46.png


--------------------------------------------------------------------------------
/src/assets/images/large/47.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/47.png


--------------------------------------------------------------------------------
/src/assets/images/large/48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/48.png


--------------------------------------------------------------------------------
/src/assets/images/large/49.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/49.png


--------------------------------------------------------------------------------
/src/assets/images/large/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/5.png


--------------------------------------------------------------------------------
/src/assets/images/large/50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/50.png


--------------------------------------------------------------------------------
/src/assets/images/large/51.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/51.png


--------------------------------------------------------------------------------
/src/assets/images/large/52.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/52.png


--------------------------------------------------------------------------------
/src/assets/images/large/53.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/53.png


--------------------------------------------------------------------------------
/src/assets/images/large/54.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/54.png


--------------------------------------------------------------------------------
/src/assets/images/large/55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/55.png


--------------------------------------------------------------------------------
/src/assets/images/large/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/6.png


--------------------------------------------------------------------------------
/src/assets/images/large/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/7.png


--------------------------------------------------------------------------------
/src/assets/images/large/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/8.png


--------------------------------------------------------------------------------
/src/assets/images/large/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/large/9.png


--------------------------------------------------------------------------------
/src/assets/images/mail.svg:
--------------------------------------------------------------------------------
 1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="110" height="80" viewBox="0 0 110 80">
 2 |   <defs>
 3 |     <style>
 4 |       .cls-1 {
 5 |         fill: #0078d7;
 6 |       }
 7 |     </style>
 8 |   </defs>
 9 |   <title>Mail</title>
10 |   <g>
11 |     <path class="cls-1" d="M103.17,4.07H6.83a5.61,5.61,0,0,0-5.6,5.6V70.33a5.61,5.61,0,0,0,5.6,5.6h96.33a5.61,5.61,0,0,0,5.6-5.6V9.67A5.61,5.61,0,0,0,103.17,4.07Zm4.4,66.27a4.37,4.37,0,0,1-.72,2.4L74.36,39.91l-.85.84,32.54,32.87a4.36,4.36,0,0,1-2.88,1.1H6.83a4.36,4.36,0,0,1-2.31-.67l32-33.32-.87-.83L3.6,73.3a4.37,4.37,0,0,1-1.17-3V9.67a4.41,4.41,0,0,1,4.4-4.4h96.33a4.41,4.41,0,0,1,4.4,4.4Z"/>
12 |     <polygon class="cls-1" points="55.2 43.01 9.24 11.21 8.56 12.2 55.19 44.46 102.27 12.83 101.6 11.83 55.2 43.01"/>
13 |   </g>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/src/assets/images/material.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/assets/images/material.png


--------------------------------------------------------------------------------
/src/assets/styles.scss:
--------------------------------------------------------------------------------
 1 | //sass-lint:disable-all
 2 | @import 'ej2-base/styles/definition/_fabric.scss';
 3 | @import 'ej2-base/styles/fabric-definition.scss';
 4 | @import 'ej2-base/styles/all.scss';
 5 | @import 'ej2-icons/styles/fabric.scss';
 6 | @import 'ej2-buttons/styles/button/fabric-definition.scss';
 7 | @import 'ej2-buttons/styles/button/all.scss';
 8 | @import 'ej2-buttons/styles/check-box/fabric-definition.scss';
 9 | @import 'ej2-buttons/styles/check-box/all.scss';
10 | @import 'ej2-inputs/styles/input/fabric-definition.scss';
11 | @import 'ej2-inputs/styles/input/all.scss';
12 | @import 'ej2-navigations/styles/h-scroll/fabric-definition.scss';
13 | @import 'ej2-navigations/styles/h-scroll/fabric.scss';
14 | @import 'ej2-navigations/styles/treeview/fabric-definition.scss';
15 | @import 'ej2-navigations/styles/treeview/all.scss';
16 | @import 'ej2-navigations/styles/accordion/fabric-definition.scss';
17 | @import 'ej2-navigations/styles/accordion/all.scss';
18 | @import 'ej2-navigations/styles/toolbar/fabric-definition.scss';
19 | @import 'ej2-navigations/styles/toolbar/all.scss';
20 | @import 'ej2-navigations/styles/context-menu/fabric-definition.scss';
21 | @import 'ej2-navigations/styles/context-menu/all.scss';
22 | @import 'ej2-navigations/styles/appbar/fabric-definition.scss';
23 | @import 'ej2-navigations/styles/appbar/all.scss';
24 | @import 'ej2-navigations/styles/sidebar/fabric-definition.scss';
25 | @import 'ej2-navigations/styles/sidebar/all.scss';
26 | @import 'ej2-lists/styles/list-view/fabric-definition.scss';
27 | @import 'ej2-lists/styles/list-view/all.scss';
28 | @import 'ej2-popups/styles/dialog/fabric-definition.scss';
29 | @import 'ej2-popups/styles/dialog/all.scss';
30 | @import 'ej2-popups/styles/popup/fabric-definition.scss';
31 | @import 'ej2-popups/styles/popup/all.scss';
32 | @import 'ej2-popups/styles/spinner/fabric-definition.scss';
33 | @import 'ej2-popups/styles/spinner/all.scss';
34 | @import 'ej2-dropdowns/styles/drop-down-base/fabric-definition.scss';
35 | @import 'ej2-dropdowns/styles/drop-down-base/all.scss';
36 | @import 'ej2-dropdowns/styles/drop-down-list/fabric-definition.scss';
37 | @import 'ej2-dropdowns/styles/drop-down-list/all.scss';
38 | @import 'ej2-dropdowns/styles/auto-complete/all.scss';
39 | @import 'ej2-dropdowns/styles/multi-select/fabric-definition.scss';
40 | @import 'ej2-dropdowns/styles/multi-select/all.scss';
41 | @import 'ej2-dropdowns/styles/mention/fabric-definition.scss';
42 | @import 'ej2-dropdowns/styles/mention/all.scss';
43 | @import 'ej2-popups/styles/tooltip/fabric-definition.scss';
44 | @import 'ej2-popups/styles/tooltip/all.scss';
45 | @import 'ej2-layouts/styles/splitter/fabric-definition.scss';
46 | @import 'ej2-layouts/styles/splitter/all.scss';
47 | @import 'ej2-layouts/styles/avatar/fabric-definition.scss';
48 | @import 'ej2-layouts/styles/avatar/all.scss';


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


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-webmail/b9288662b92ef00b2fafe475d89a65eac33b5671/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <!-- Google Tag Manager -->
 5 |     <script>(function (w, d, s, l, i) {
 6 |         w[l] = w[l] || []; w[l].push({
 7 |             'gtm.start':
 8 |                 new Date().getTime(), event: 'gtm.js'        
 9 | }); var f = d.getElementsByTagName(s)[0],
10 |             j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
11 |                 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
12 |         })(window, document, 'script', 'dataLayer', 'GTM-WLQL39J');</script>
13 |     <!-- End Google Tag Manager -->
14 |     <title>Essential JS 2 for Angular - Webmail</title>
15 |     <meta charset="utf-8">
16 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
17 |     <meta name="description" content="Essential JS 2 for Angular - Webmail - This demo explores a mailbox user interface which was inspired by the Outlook Office 365 application">
18 |     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
19 |     <link rel="icon" type="image/x-icon" href="./favicon.ico">
20 |     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
21 |     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
22 |     <link href="https://fonts.googleapis.com/css?family=Raleway:500,600" rel="stylesheet">
23 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
24 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.10/Reflect.min.js"></script>
25 |     <script type="text/javascript">
26 |         if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
27 |             document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"><\/script>');
28 |         }
29 |     </script>
30 | </head>
31 | 
32 | <body>
33 |     <!-- Google Tag Manager (noscript) -->
34 |     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
35 |     <!-- End Google Tag Manager (noscript) -->
36 |     <div hidden id="sync-analytics" data-queue="EJ2 - Showcase - Angular - WebMail"></div>
37 |     <app-root></app-root>
38 | </body>
39 | <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.18/zone.min.js"></script>
40 | <!-- <script src="./dist/common.js"></script> -->
41 | 
42 | </html>


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/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/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | /***************************************************************************************************
56 |  * Zone JS is required by default for Angular itself.
57 |  */
58 | //import 'zone.js/dist/zone';  // Included with Angular CLI.
59 | 
60 | 
61 | /***************************************************************************************************
62 |  * APPLICATION IMPORTS
63 |  */
64 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import "./assets/styles.css";
3 | @import "./assets/Outlook Icons/style.css";
4 | @import "./assets/css/outlook.css";


--------------------------------------------------------------------------------
/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/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


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


--------------------------------------------------------------------------------
/tsconfig-aot.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "es5",
 4 |         "module": "es2015",
 5 |         "moduleResolution": "node",
 6 |         "sourceMap": true,
 7 |         "emitDecoratorMetadata": true,
 8 |         "experimentalDecorators": true,
 9 |         "declaration": true,
10 |         "lib": ["es2015", "dom"],
11 |         "noImplicitAny": true,
12 |         "suppressImplicitAnyIndexErrors": true,
13 |         "types": ["requirejs"]
14 |     },
15 |     "exclude": [
16 |         "node_modules"
17 |     ],
18 |     "files": [
19 |         "src/app/app.module.ts",
20 |         "src/app/main.ts"
21 |     ],
22 |     "angularCompilerOptions": {
23 |         "skipMetadataEmit": true
24 |     }
25 | }


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.base.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "sourceMap": true,
 8 |     "declaration": false,
 9 |     "downlevelIteration": true,
10 |     "experimentalDecorators": true,
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "module": "es6",
15 |     "lib": [
16 |       "es2015",
17 |       "dom"
18 |     ]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "module": "es2015",
 9 |     "moduleResolution": "node",
10 |     "emitDecoratorMetadata": false,
11 |     "experimentalDecorators": true,
12 |     "target": "es2015",
13 |     "typeRoots": [
14 |       "node_modules/@types"
15 |     ],
16 |     "lib": [
17 |       "es2017",
18 |       "dom"
19 |     ]
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "node"
10 |     ]
11 |   },
12 |   "files": [
13 |     "test.ts"
14 |   ],
15 |   "include": [
16 |     "**/*.spec.ts",
17 |     "**/*.d.ts"
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "extends": "tslint:recommended",
  3 |   "rules": {
  4 |     "align": {
  5 |       "options": [
  6 |         "parameters",
  7 |         "statements"
  8 |       ]
  9 |     },
 10 |     "array-type": false,
 11 |     "arrow-return-shorthand": true,
 12 |     "curly": true,
 13 |     "deprecation": {
 14 |       "severity": "warning"
 15 |     },
 16 |     "component-class-suffix": true,
 17 |     "contextual-lifecycle": true,
 18 |     "directive-class-suffix": true,
 19 |     "directive-selector": [
 20 |       true,
 21 |       "attribute",
 22 |       "app",
 23 |       "camelCase"
 24 |     ],
 25 |     "component-selector": [
 26 |       true,
 27 |       "element",
 28 |       "app",
 29 |       "kebab-case"
 30 |     ],
 31 |     "eofline": true,
 32 |     "import-blacklist": [
 33 |       true,
 34 |       "rxjs/Rx"
 35 |     ],
 36 |     "import-spacing": true,
 37 |     "indent": {
 38 |       "options": [
 39 |         "spaces"
 40 |       ]
 41 |     },
 42 |     "max-classes-per-file": false,
 43 |     "max-line-length": [
 44 |       true,
 45 |       140
 46 |     ],
 47 |     "member-ordering": [
 48 |       true,
 49 |       {
 50 |         "order": [
 51 |           "static-field",
 52 |           "instance-field",
 53 |           "static-method",
 54 |           "instance-method"
 55 |         ]
 56 |       }
 57 |     ],
 58 |     "no-console": [
 59 |       true,
 60 |       "debug",
 61 |       "info",
 62 |       "time",
 63 |       "timeEnd",
 64 |       "trace"
 65 |     ],
 66 |     "no-empty": false,
 67 |     "no-inferrable-types": [
 68 |       true,
 69 |       "ignore-params"
 70 |     ],
 71 |     "no-non-null-assertion": true,
 72 |     "no-redundant-jsdoc": true,
 73 |     "no-switch-case-fall-through": true,
 74 |     "no-var-requires": false,
 75 |     "object-literal-key-quotes": [
 76 |       true,
 77 |       "as-needed"
 78 |     ],
 79 |     "quotemark": [
 80 |       true,
 81 |       "single"
 82 |     ],
 83 |     "semicolon": {
 84 |       "options": [
 85 |         "always"
 86 |       ]
 87 |     },
 88 |     "space-before-function-paren": {
 89 |       "options": {
 90 |         "anonymous": "never",
 91 |         "asyncArrow": "always",
 92 |         "constructor": "never",
 93 |         "method": "never",
 94 |         "named": "never"
 95 |       }
 96 |     },
 97 |     "typedef": [
 98 |       true,
 99 |       "call-signature"
100 |     ],
101 |     "typedef-whitespace": {
102 |       "options": [
103 |         {
104 |           "call-signature": "nospace",
105 |           "index-signature": "nospace",
106 |           "parameter": "nospace",
107 |           "property-declaration": "nospace",
108 |           "variable-declaration": "nospace"
109 |         },
110 |         {
111 |           "call-signature": "onespace",
112 |           "index-signature": "onespace",
113 |           "parameter": "onespace",
114 |           "property-declaration": "onespace",
115 |           "variable-declaration": "onespace"
116 |         }
117 |       ]
118 |     },
119 |     "variable-name": {
120 |       "options": [
121 |         "ban-keywords",
122 |         "check-format",
123 |         "allow-pascal-case"
124 |       ]
125 |     },
126 |     "whitespace": {
127 |       "options": [
128 |         "check-branch",
129 |         "check-decl",
130 |         "check-operator",
131 |         "check-separator",
132 |         "check-type",
133 |         "check-typecast"
134 |       ]
135 |     },
136 |     "no-conflicting-lifecycle": true,
137 |     "no-host-metadata-property": true,
138 |     "no-input-rename": true,
139 |     "no-inputs-metadata-property": true,
140 |     "no-output-native": true,
141 |     "no-output-on-prefix": true,
142 |     "no-output-rename": true,
143 |     "no-outputs-metadata-property": true,
144 |     "template-banana-in-box": true,
145 |     "template-no-negated-async": true,
146 |     "use-lifecycle-interface": true,
147 |     "use-pipe-transform-interface": true
148 |   },
149 |   "rulesDirectory": [
150 |     "codelyzer"
151 |   ]
152 | }


--------------------------------------------------------------------------------