Merge pull request #26 from yogeshgadge/version-upgrades

Version upgrades - this will cause a major version as it would be breaking

.angular-cli.json

@@ -5,12 +5,14 @@
   },
   "apps": [{
     "name": "lib",
-    "root": "src",
-    "main": "app/index.ts",
+    "root": "src/app",
+    "main": "test-entry.ts",
     "test": "test.ts",
+    "tsconfig": "tsconfig.app.json",
+    "testTsconfig": "tsconfig.spec.json",
     "prefix": "cbp",
     "outDir": "dist-lib",
-    "polyfills": "polyfills.ts",
+    "polyfills": "../polyfills.ts",
     "styles": [
       "ngx-cbp-theme.scss"
     ]
@@ -20,10 +22,12 @@
       "root": "src/demo",
       "main": "index.ts",
       "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
       "prefix": "demo",
       "outDir": "dist-demo",
       "index": "index.html",
-      "polyfills": "polyfills.ts",
+      "polyfills": "../polyfills.ts",
       "styles": [
         "demo.scss"
       ],

.travis.yml

@@ -22,7 +22,7 @@ before_script:
 jobs:
   include:
     - stage: build & linting & test
-      script: npm run ci
+      script: npm run ready
     - stage : publish
       script: echo "Publishing to Github..."
       script: npm run build:demo

README.MD

@@ -45,6 +45,8 @@ ___
 ## Getting Started - How To Use
 
 Note: For Windows users we recommend git-bash shell. Also check the node engine version.
+
+Use angular-cli version 1.4.5 
 
 * Install [angular-cli](https://cli.angular.io/) globally making sure we use same version as we have in `@angular/cli` inside package.json.
 * For new apps follow [angular-cli](https://cli.angular.io/) and create your application with styles = SCSS. Minimal e.g.

package.json

@@ -25,79 +25,79 @@
     "lint": "ng lint",
     "start:demo": "ng serve --app demo --port 4100",
     "build:demo": "ng build --app demo",
-    "test": "ng test --app demo",
+    "test:demo": "ng test --app demo",
+    "test:demo:once": "ng test --app demo --watch=false",
+    "test:lib": "ng test --app lib",
+    "test:lib:once": "ng test --app lib --watch=false",
     "e2e:demo": "ng e2e --app demo --watch=false",
-    "ci": "concurrently --kill-others-on-fail --names \"BUILD,LINTING,KARMA-UNIT,E2E-DEMO\" -c \"bgBlue.bold,bgCyan.bold,bgGreen.bold\" \"npm run build:lib\" \"npm run lint\" \"npm run test:once\" \"npm run e2e:demo\"",
-    "test:once": "ng test --app demo --watch=false",
+    "ready": "npm-run-all --parallel build:lib lint test:once e2e:demo",
+    "test:once": "npm-run-all --serial  test:lib:once test:demo:once",
     "postinstall": "node postinstall.js"
   },
   "dependencies": {
-    "@angular/cdk": "^2.0.0-beta.10",
-    "@angular/flex-layout": "^2.0.0-beta.9",
-    "@angular/material": "^2.0.0-beta.10",
-    "cbp-theme": "^1.4.0",
-    "classlist.js": "^1.1.20150312",
-    "del": "^3.0.0",
-    "hammerjs": "^2.0.8",
-    "replace": "^0.3.0",
-    "web-animations-js": "^2.3.1"
+    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/flex-layout": "2.0.0-beta.9",
+    "@angular/material": "2.0.0-beta.12",
+    "cbp-theme": "1.6.0",
+    "classlist.js": "1.1.20150312",
+    "del": "3.0.0",
+    "hammerjs": "2.0.8",
+    "replace": "0.3.0",
+    "web-animations-js": "2.3.1"
   },
   "peerDependencies": {
-    "@angular/animations": "^4.4.0-RC.0",
-    "@angular/common": "^4.4.0-RC.0",
-    "@angular/compiler": "^4.4.0-RC.0",
-    "@angular/core": "^4.4.0-RC.0",
-    "@angular/forms": "^4.4.0-RC.0",
-    "@angular/http": "^4.4.0-RC.0",
-    "@angular/flex-layout": "^2.0.0-beta.9",
-    "@angular/material": "^2.0.0-beta.10",
-    "@angular/platform-browser": "^4.4.0-RC.0",
-    "@angular/platform-browser-dynamic": "^4.4.0-RC.0",
-    "@angular/router": "^4.4.0-RC.0",
-    "rxjs": "^5.4.3",
-    "zone.js": "^0.8.17"
+    "@angular/animations": "4.4.4",
+    "@angular/common": "4.4.4",
+    "@angular/compiler": "4.4.4",
+    "@angular/core": "4.4.4",
+    "@angular/forms": "4.4.4",
+    "@angular/http": "4.4.4",
+    "@angular/platform-browser": "4.4.4",
+    "@angular/platform-browser-dynamic": "4.4.4",
+    "@angular/router": "4.4.4",
+    "rxjs": "5.4.3",
+    "zone.js": "0.8.18"
   },
   "devDependencies": {
-    "@angular/animations": "^4.4.0-RC.0",
-    "@angular/cli": "1.3.2",
-    "@angular/common": "^4.4.0-RC.0",
-    "@angular/compiler": "^4.4.0-RC.0",
-    "@angular/compiler-cli": "^4.4.0-RC.0",
-    "@angular/core": "^4.4.0-RC.0",
-    "@angular/flex-layout": "^2.0.0-beta.9",
-    "@angular/forms": "^4.4.0-RC.0",
-    "@angular/http": "^4.4.0-RC.0",
-    "@angular/language-service": "^4.4.0-RC.0",
-    "@angular/material": "^2.0.0-beta.10",
-    "@angular/platform-browser": "^4.4.0-RC.0",
-    "@angular/platform-browser-dynamic": "^4.4.0-RC.0",
-    "@angular/router": "^4.4.0-RC.0",
-    "@compodoc/compodoc": "^1.0.0-beta.15",
-    "@types/jasmine": "2.5.54",
-    "@types/jasminewd2": "^2.0.3",
-    "@types/node": "~8.0.26",
-    "codelyzer": "~3.1.2",
-    "concurrently": "^3.5.0",
-    "core-js": "^2.5.1",
-    "es6-shim": "^0.35.3",
-    "jasmine-core": "~2.8.0",
-    "jasmine-spec-reporter": "^4.2.1",
-    "karma": "~1.7.1",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.3.0",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "ngx-library-builder": "^1.1.1",
-    "plugin-typescript": "^7.1.0",
-    "protractor": "^5.1.2",
-    "replace": "^0.3.0",
-    "standard-version": "^4.2.0",
-    "tota11y": "^0.1.6",
-    "ts-node": "~3.3.0",
-    "tslint": "~5.7.0",
-    "typescript": "~2.5.2",
-    "zone.js": "^0.8.17"
+    "@angular/animations": "4.4.4",
+    "@angular/cli": "1.4.5",
+    "@angular/common": "4.4.4",
+    "@angular/compiler": "4.4.4",
+    "@angular/compiler-cli": "4.4.4",
+    "@angular/core": "4.4.4",
+    "@angular/forms": "4.4.4",
+    "@angular/http": "4.4.4",
+    "@angular/language-service": "4.4.4",
+    "@angular/platform-browser": "4.4.4",
+    "@angular/platform-browser-dynamic": "4.4.4",
+    "@angular/router": "4.4.4",
+    "@compodoc/compodoc": "1.0.1",
+    "@types/jasmine": "2.6.0",
+    "@types/jasminewd2": "2.0.3",
+    "@types/node": "8.0.33",
+    "codelyzer": "3.2.1",
+    "core-js": "2.5.1",
+    "es6-shim": "0.35.3",
+    "jasmine-core": "2.8.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "1.7.1",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-cli": "1.0.1",
+    "karma-coverage-istanbul-reporter": "1.3.0",
+    "karma-jasmine": "1.1.0",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "ngx-library-builder": "1.1.3",
+    "npm-run-all": "^4.1.1",
+    "plugin-typescript": "7.1.0",
+    "protractor": "5.1.2",
+    "replace": "0.3.0",
+    "rxjs": "5.4.3",
+    "standard-version": "4.2.0",
+    "tota11y": "0.1.6",
+    "ts-node": "3.3.0",
+    "tslint": "5.7.0",
+    "typescript": "2.5.3",
+    "zone.js": "0.8.18"
   },
   "engines": {
     "node": ">=8.0.0"

src/app/accordion/accordion-panel.component.spec.ts

@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CBPAccordionPanelComponent } from './accordion-panel.component';
-import {MdButtonModule} from '@angular/material';
+import {MatButtonModule} from '@angular/material';
 import {CBPAccordionComponent} from './accordion.component';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -11,7 +11,7 @@ describe('CBPAccordionPanelComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-        imports: [MdButtonModule, NoopAnimationsModule],
+        imports: [MatButtonModule, NoopAnimationsModule],
         declarations: [CBPAccordionPanelComponent],
         providers: [CBPAccordionComponent]
     })

src/app/accordion/accordion.component.spec.ts

@@ -1,15 +1,15 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CBPAccordionComponent } from './accordion.component';
-import { MdButtonModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material';
 
 describe('CBPAccordionComponent', () => {
   let component: CBPAccordionComponent;
   let fixture: ComponentFixture<CBPAccordionComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-        imports: [ MdButtonModule],
+        imports: [ MatButtonModule],
         declarations: [CBPAccordionComponent]
     })
     .compileComponents();

src/app/accordion/accordion.module.ts

@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {CBPAccordionComponent} from './accordion.component';
 import {CBPAccordionPanelComponent} from './accordion-panel.component';
-import {MdButtonModule} from '@angular/material';
+import {MatButtonModule} from '@angular/material';
 
 @NgModule({
   imports: [
-    CommonModule, MdButtonModule
+    CommonModule, MatButtonModule
   ],
   declarations: [CBPAccordionComponent, CBPAccordionPanelComponent],
   exports: [

src/app/applications/applications-menu/applications-menu.component.html

@@ -1,4 +1,4 @@
-<div class="cbp-applications-navitem" [mdMenuTriggerFor]="cbpMenu" #cbpMenuTrigger="mdMenuTrigger">
+<div class="cbp-applications-navitem" [matMenuTriggerFor]="cbpMenu" #cbpMenuTrigger="matMenuTrigger">
   <ng-template [ngTemplateOutlet]="application"></ng-template>
 </div>
 <div class="cbp-applications-navitem" *ngIf="menuDataLoaded && applicationsData.lastRetrieved !== null && !isXS">
@@ -8,17 +8,17 @@
   <ng-template [ngTemplateOutlet]="applicationsPanel" ></ng-template>
 </div>
 
-<md-menu #cbpMenu="mdMenu" yPosition="above" xPosition="after" [overlapTrigger]="false" class="cbp-menu-with-category applications-expansion-panel" >
+<mat-menu #cbpMenu="matMenu" yPosition="above" xPosition="after" [overlapTrigger]="false" class="cbp-menu-with-category applications-expansion-panel" >
   <ng-template [ngTemplateOutlet]="applicationsPanel"></ng-template>
-</md-menu>
+</mat-menu>
 
 
 <ng-template #applicationsPanel>
   <ng-container *ngIf="applicationsData">
 
     <div class="cbp-menu-item-category" *ngIf="applicationsData.recents?.length > 0">Recent Apps</div>
     <div class="mat-menu-item" *ngFor="let app of applicationsData.recents">
-      <div class="cbp-applications-remove-icon"><md-icon  fontSet="fontawesome" fontIcon="fa-times" (click)="removeFromRecent(app, $event)" fxFlexAlign="center"></md-icon></div>
+      <div class="cbp-applications-remove-icon"><mat-icon  fontSet="fontawesome" fontIcon="fa-times" (click)="removeFromRecent(app, $event)" fxFlexAlign="center"></mat-icon></div>
       <a class="cbp-applications-link"  title="{{app.description}}" href="{{app.href}}" fxFlex="" >
         {{app.name}}
       </a>
@@ -56,7 +56,7 @@
     </div>
     <div *ngIf="menuDataLoaded && applicationsData.currentApp && !applicationsDataLoading" class="cbp-current-application-name-container" (click)="toggleApplicationsMenu($event)">
       <span class="cbp-current-application-name">{{applicationsData.currentApp.name}}</span><span *ngIf="applicationsData.currentApp.version"> - {{applicationsData.currentApp.version}}</span>
-      <md-icon *ngIf="applicationsData.lastRetrieved" fontSet="fontawesome" fontIcon="fa-caret-down"></md-icon>
+      <mat-icon *ngIf="applicationsData.lastRetrieved" fontSet="fontawesome" fontIcon="fa-caret-down"></mat-icon>
     </div>
   </div>
 </ng-template>

src/app/applications/applications-menu/applications-menu.component.spec.ts

@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CBPApplicationsMenuComponent } from './applications-menu.component';
-import {MdIconModule, MdMenuModule} from '@angular/material';
+import {MatIconModule, MatMenuModule} from '@angular/material';
 import {CBPProgressModule} from '../../progress/progress.module';
 import {CBPPipesModule} from '../../pipes/pipes.module';
 import {FlexLayoutModule} from '@angular/flex-layout';
@@ -19,7 +19,7 @@ describe('CBPApplicationsMenuComponent', () => {
   beforeEach(async(() => {
     // const  spiedAppService = jasmine.createSpy('mockAppService' , MockAppService);
     TestBed.configureTestingModule({
-      imports: [MdMenuModule, MdIconModule, CBPProgressModule, CBPPipesModule, FlexLayoutModule, FormsModule, ReactiveFormsModule],
+      imports: [MatMenuModule, MatIconModule, CBPProgressModule, CBPPipesModule, FlexLayoutModule, FormsModule, ReactiveFormsModule],
       declarations: [ CBPApplicationsMenuComponent , CBPApplicationsSearchComponent],
       providers: [
           {provide: CBP_APPLICATIONS_SERVICE, useClass: MockApplicationsService},

src/app/applications/applications-menu/applications-menu.component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component, Inject, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
 import {MediaChange, ObservableMedia} from '@angular/flex-layout';
-import {MdMenuTrigger} from '@angular/material';
+import {MatMenuTrigger} from '@angular/material';
 import {
     CBP_APPLICATIONS_SERVICE, CBPApplication, CBPApplicationsData,
     CBPApplicationsService
@@ -26,7 +26,7 @@ export class CBPApplicationsMenuComponent implements OnInit, OnDestroy {
     private mediaSubscription: Subscription;
 
 
-    @ViewChild('cbpMenuTrigger') cbpMenuTrigger: MdMenuTrigger;
+    @ViewChild('cbpMenuTrigger') cbpMenuTrigger: MatMenuTrigger;
 
     public error: any;
 

src/app/applications/applications-search/applications-search.component.html

@@ -1,8 +1,8 @@
 <form class="mat-menu-item cbp-app-search">
-  <md-form-field (click)="stopPropogation($event)" floatPlaceholder="never" color="default">
-      <input type="text" mdInput aria-label="Search App" [formControl]="searchTokenControl" name="searchToken"  placeholder="Search ..."
+  <mat-form-field (click)="stopPropogation($event)" floatPlaceholder="never" color="default">
+      <input type="text" matInput aria-label="Search App" [formControl]="searchTokenControl" name="searchToken"  placeholder="Search ..."
              class="cbp-applications-search-input"/>
-  </md-form-field>
+  </mat-form-field>
 </form>
 <ng-container *ngIf="searchResults">
   <div class="mat-menu-item cbp-app-search-results" *ngFor="let app of searchResultsApplications | async">

src/app/applications/applications-search/applications-search.component.spec.ts

@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CBPApplicationsSearchComponent } from './applications-search.component';
-import {MdFormFieldModule, MdInputModule} from '@angular/material';
+import {MatFormFieldModule, MatInputModule} from '@angular/material';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CBP_APPLICATIONS_SERVICE} from '../cbp-applications-service';
 import {MockApplicationsService} from '../../../mock-services/applications.mock.service';
@@ -15,7 +15,7 @@ describe('CBPApplicationsSearchComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdFormFieldModule, MdInputModule, FormsModule, ReactiveFormsModule , NoopAnimationsModule],
+      imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule , NoopAnimationsModule],
       declarations: [ CBPApplicationsSearchComponent ],
       providers: [
           {provide: CBP_APPLICATIONS_SERVICE, useClass: MockApplicationsService},

src/app/applications/applications.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {CBPApplicationsMenuComponent} from './applications-menu/applications-menu.component';
-import {MdFormFieldModule, MdIconModule, MdInputModule, MdMenuModule} from '@angular/material';
+import {MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule} from '@angular/material';
 import {CBPProgressModule} from '../progress/progress.module';
 import {CBPPipesModule} from '../pipes/pipes.module';
 import {FlexLayoutModule} from '@angular/flex-layout';
@@ -12,7 +12,7 @@ import { CBPApplicationsSearchComponent } from './applications-search/applicatio
 
 @NgModule({
   imports: [
-    CommonModule, MdMenuModule, MdIconModule, FlexLayoutModule, FormsModule, ReactiveFormsModule, MdInputModule, MdFormFieldModule,
+    CommonModule, MatMenuModule, MatIconModule, FlexLayoutModule, FormsModule, ReactiveFormsModule, MatInputModule, MatFormFieldModule,
     CBPProgressModule, CBPPipesModule
   ],
   declarations: [CBPApplicationsMenuComponent, CBPApplicationsSearchComponent],

src/app/cbp-root/cbp-root.module.ts

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CBPRootComponent } from './cbp-root.component';
-import {MdButtonModule, MdFormFieldModule, MdIconModule, MdIconRegistry, MdInputModule} from '@angular/material';
+import {
+    MATERIAL_COMPATIBILITY_MODE, MatButtonModule, MatFormFieldModule, MatIconModule, MatIconRegistry,
+    MatInputModule
+} from '@angular/material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import {CBPProgressModule} from '../progress/progress.module';
@@ -12,16 +15,17 @@ import {FormsModule} from '@angular/forms';
 
 @NgModule({
   imports: [
-    CommonModule, MdIconModule, BrowserAnimationsModule, FlexLayoutModule, MdButtonModule, MdInputModule, MdFormFieldModule, FormsModule
+    CommonModule, MatIconModule, BrowserAnimationsModule, FlexLayoutModule, MatButtonModule, MatInputModule, MatFormFieldModule, FormsModule
   ],
   declarations: [CBPRootComponent],
+  providers: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
   exports: [
-      MdIconModule, BrowserAnimationsModule, FlexLayoutModule, MdButtonModule, MdInputModule, MdFormFieldModule, FormsModule,
+      MatIconModule, BrowserAnimationsModule, FlexLayoutModule, MatButtonModule, MatInputModule, MatFormFieldModule, FormsModule,
       CBPRootComponent, CBPProgressModule, CBPHeaderModule, CBPPipesModule
   ]
 })
 export class CBPRootModule {
-    constructor(mdIconRegistry: MdIconRegistry) {
+    constructor(mdIconRegistry: MatIconRegistry) {
         mdIconRegistry.registerFontClassAlias('fontawesome', 'fa');
     }
 }