Increased the Fuse version number

+ Updated Angular, Angular Material and Flex Layout
+ Updated various components for better Angular5 support
+ Fixed: Contacts app various issues
+ Fixed: Duplicate content in Profile page tabs
+ Fixed: Folded status of the Navbar shouldn't brake the layout if Horizontal Navbar is active

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "license": "",
   "scripts": {
     "ng": "ng",
@@ -16,49 +16,49 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.0.2",
+    "@angular/animations": "5.0.3",
-    "@angular/cdk": "5.0.0-rc0",
+    "@angular/cdk": "5.0.0-rc.1",
-    "@angular/common": "5.0.2",
+    "@angular/common": "5.0.3",
-    "@angular/compiler": "5.0.2",
+    "@angular/compiler": "5.0.3",
-    "@angular/core": "5.0.2",
+    "@angular/core": "5.0.3",
-    "@angular/flex-layout": "2.0.0-beta.10",
+    "@angular/flex-layout": "2.0.0-beta.10-4905443",
-    "@angular/forms": "5.0.2",
+    "@angular/forms": "5.0.3",
-    "@angular/http": "5.0.2",
+    "@angular/http": "5.0.3",
-    "@angular/material": "5.0.0-rc0",
+    "@angular/material": "5.0.0-rc.1",
-    "@angular/material-moment-adapter": "5.0.0-rc0",
+    "@angular/material-moment-adapter": "5.0.0-rc.1",
-    "@angular/platform-browser": "5.0.2",
+    "@angular/platform-browser": "5.0.3",
-    "@angular/platform-browser-dynamic": "5.0.2",
+    "@angular/platform-browser-dynamic": "5.0.3",
-    "@angular/router": "5.0.2",
+    "@angular/router": "5.0.3",
     "@ngx-translate/core": "8.0.0",
-    "@swimlane/ngx-charts": "github:HitomiTenshi/ngx-charts#angular5",
+    "@swimlane/ngx-charts": "7.0.1",
-    "@swimlane/ngx-datatable": "11.0.4",
+    "@swimlane/ngx-datatable": "11.1.4",
     "@withinpixels/ngx-dnd": "3.1.0",
-    "angular-calendar": "0.21.3",
+    "angular-calendar": "0.22.1",
     "angular-in-memory-web-api": "0.5.1",
     "angular2-markdown": "1.6.0",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.1",
-    "d3": "4.11.0",
+    "d3": "4.12.0",
     "hammerjs": "2.0.8",
     "highlight.js": "9.12.0",
     "intl": "1.2.5",
     "moment": "2.19.2",
-    "ngx-color-picker": "4.4.0",
+    "ngx-color-picker": "5.0.4",
     "ngx-cookie-service": "1.0.9",
-    "perfect-scrollbar": "1.0.3",
+    "perfect-scrollbar": "1.2.0",
     "rxjs": "5.5.2",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.18"
   },
   "devDependencies": {
-    "@angular/cli": "1.5.2",
+    "@angular/cli": "1.5.4",
-    "@angular/compiler-cli": "5.0.2",
+    "@angular/compiler-cli": "5.0.3",
-    "@angular/language-service": "5.0.2",
+    "@angular/language-service": "5.0.3",
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.5.54",
     "@types/jasminewd2": "2.0.3",
     "@types/node": "6.0.92",
-    "codelyzer": "3.2.2",
+    "codelyzer": "4.0.1",
     "jasmine-core": "2.6.4",
     "jasmine-spec-reporter": "4.1.1",
     "karma": "1.7.1",

src/app/main/content/apps/contacts/contact-form/contact-form.component.scss

@@ -1,3 +1,5 @@
+@import "src/app/core/scss/fuse";
+
 .contact-form-dialog {
 
     .mat-dialog-container {
@@ -5,6 +7,10 @@
         width: 400px;
         overflow: hidden;
 
+        @include media-breakpoint('xs') {
+            width: auto;
+        }
+
         .mat-toolbar {
             min-height: initial;
         }

src/app/main/content/apps/contacts/contact-list/contact-list.component.scss

@@ -44,12 +44,9 @@ fuse-contacts-contact-list {
 }
 
 #add-contact-button {
-    position: fixed;
+    position: absolute;
     bottom: 12px;
     right: 12px;
     padding: 0;
-
+    z-index: 99;
-    @include media-breakpoint-down('xs') {
-        top: 12px;
-    }
 }

src/app/main/content/apps/contacts/contacts.component.scss

@@ -4,11 +4,3 @@
         overflow: hidden;
     }
 }
-
-#add-contact-button {
-    position: absolute;
-    bottom: 12px;
-    right: 12px;
-    padding: 0;
-    z-index: 99;
-}

src/app/main/content/apps/contacts/contacts.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { ContactsService } from './contacts.service';
 import { fuseAnimations } from '../../../../core/animations';
 import { FormControl, FormGroup } from '@angular/forms';
 import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
 import { MatDialog } from '@angular/material';
 import 'rxjs/add/operator/distinctUntilChanged';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector     : 'fuse-contacts',
@@ -13,11 +14,12 @@ import 'rxjs/add/operator/distinctUntilChanged';
     encapsulation: ViewEncapsulation.None,
     animations   : fuseAnimations
 })
-export class FuseContactsComponent implements OnInit
+export class FuseContactsComponent implements OnInit, OnDestroy
 {
     hasSelectedContacts: boolean;
     searchInput: FormControl;
     dialogRef: any;
+    onSelectedContactsChangedSubscription: Subscription;
 
     constructor(
         private contactsService: ContactsService,
@@ -51,11 +53,11 @@ export class FuseContactsComponent implements OnInit
 
     ngOnInit()
     {
-
+        this.onSelectedContactsChangedSubscription =
-        this.contactsService.onSelectedContactsChanged
+            this.contactsService.onSelectedContactsChanged
-            .subscribe(selectedContacts => {
+                .subscribe(selectedContacts => {
-                this.hasSelectedContacts = selectedContacts.length > 0;
+                    this.hasSelectedContacts = selectedContacts.length > 0;
-            });
+                });
 
         this.searchInput.valueChanges
             .debounceTime(300)
@@ -65,4 +67,8 @@ export class FuseContactsComponent implements OnInit
             });
     }
 
+    ngOnDestroy()
+    {
+        this.onSelectedContactsChangedSubscription.unsubscribe();
+    }
 }

src/app/main/content/pages/profile/profile.component.html

@@ -8,10 +8,12 @@
              fxLayoutAlign.gt-sm="start center">
             <img class="profile-image avatar huge" src="assets/images/avatars/katherine.jpg"
                  *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
-            <div class="name" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Katherine Wilson</div>
+            <div class="name" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Katherine Wilson
+            </div>
         </div>
 
-        <div class="actions" fxLayout="row" fxLayoutAlign="end center" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
+        <div class="actions" fxLayout="row" fxLayoutAlign="end center" *fuseIfOnDom
+             [@animate]="{value:'*',params:{delay:'200ms'}}">
             <button mat-raised-button color="accent" aria-label="Follow">Follow</button>
             <button mat-raised-button color="primary" aria-label="Send Message">Send Message</button>
         </div>

src/app/main/content/pages/profile/tabs/about/about.component.html

@@ -1,10 +1,8 @@
 <div id="about" class="p-24" fxLayout="row" fxLayoutWrap>
 
-    <div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65"
+    <div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65">
-         *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
-        <div class="profile-box info-box general" fxLayout="column"
+        <div class="profile-box info-box general" fxLayout="column">
-             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header class="mat-accent-bg">
                 <div class="title">General Information</div>
@@ -38,8 +36,7 @@
 
         </div>
 
-        <div class="profile-box info-box work" fxLayout="column"
+        <div class="profile-box info-box work" fxLayout="column">
-             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header class="mat-accent-bg">
                 <div class="title">Work</div>
@@ -68,8 +65,7 @@
             </div>
         </div>
 
-        <div class="profile-box info-box contact" fxLayout="column"
+        <div class="profile-box info-box contact" fxLayout="column">
-             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header class="mat-accent-bg">
                 <div class="title">Contact</div>
@@ -104,11 +100,9 @@
 
     </div>
 
-    <div class="about-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="35"
+    <div class="about-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="35">
-         *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
-        <div class="profile-box friends" fxLayout="column"
+        <div class="profile-box friends" fxLayout="column">
-             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header class="mat-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
                 <div class="title">Friends</div>
@@ -125,8 +119,7 @@
 
         </div>
 
-        <div class="profile-box groups" fxLayout="column"
+        <div class="profile-box groups" fxLayout="column">
-             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header class="mat-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
                 <div class="title">Joined Groups</div>

src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html

@@ -1,4 +1,4 @@
-<div id="photos-videos" class="p-24" *fuseIfOnDom [@animateStagger]="{value:'50'}">
+<div id="photos-videos" class="p-24">
     <div class="period" *ngFor="let period of photosVideos">
 
         <div class="period-title">
@@ -7,8 +7,7 @@
         </div>
 
         <div class="period-media" fxLayout="row" fxLayoutWrap>
-            <div class="media" *ngFor="let media of period.media"
+            <div class="media" *ngFor="let media of period.media">
-                 [@animate]="{value:'*',params:{y:'100%'}}">
                 <img class="preview" [src]="media.preview" title="{{media.title}}">
                 <div class="title">{{media.title}}</div>
             </div>

src/app/main/content/pages/profile/tabs/timeline/timeline.component.html

@@ -1,10 +1,8 @@
 <div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap>
 
-    <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65"
+    <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65">
-         *fuseIfOnDom [@animateStagger]="{value:'50'}">
 
-        <div class="profile-box add-post"
+        <div class="profile-box add-post">
-             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <div class="form" fxFlex>
 
@@ -37,8 +35,7 @@
 
         <mat-divider></mat-divider>
 
-        <div class="timeline-item" *ngFor="let post of timeline.posts"
+        <div class="timeline-item" *ngFor="let post of timeline.posts">
-             [@animate]="{value:'*',params:{y:'100%'}}">
 
             <header fxLayout="row" fxLayoutAlign="space-between start">
                 <div class="user" fxLayout="row" fxLayoutAlign="start center">
@@ -136,8 +133,7 @@
 
     <div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35">
 
-        <div class="profile-box latest-activity" fxLayout="column"
+        <div class="profile-box latest-activity" fxLayout="column">
-             *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}">
 
             <header class="mat-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
                 <div class="title">Latest Activity</div>

src/app/main/navbar/horizontal/navbar-horizontal.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { FuseMainComponent } from '../../main.component';
 
 @Component({
     selector     : 'fuse-navbar-horizontal',
@@ -6,14 +7,19 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
     styleUrls    : ['./navbar-horizontal.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavbarHorizontalComponent implements OnInit
+export class FuseNavbarHorizontalComponent implements OnInit, OnDestroy
 {
-    constructor()
+    constructor(private fuseMainComponent: FuseMainComponent)
     {
     }
 
     ngOnInit()
     {
+        this.fuseMainComponent.addClass('fuse-nav-bar-horizontal');
+    }
 
+    ngOnDestroy()
+    {
+        this.fuseMainComponent.removeClass('fuse-nav-bar-horizontal');
     }
 }

src/app/main/navbar/vertical/navbar-vertical.component.scss

@@ -2,7 +2,7 @@
 
 fuse-main {
 
-    &.fuse-nav-bar-folded {
+    &.fuse-nav-bar-folded:not(.fuse-nav-bar-horizontal) {
 
         .content-wrapper {