Merge branch 'master' into skeleton

(AppComponent) Moved boxed class to the body
Fixed: Horizontal layout navbar covers entire screen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.2.2",
+  "version": "6.2.4",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -19,19 +19,19 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.3",
-    "@angular/animations": "6.0.7",
+    "@angular/animations": "6.0.9",
     "@angular/cdk": "6.3.3",
-    "@angular/common": "6.0.7",
-    "@angular/compiler": "6.0.7",
-    "@angular/core": "6.0.7",
+    "@angular/common": "6.0.9",
+    "@angular/compiler": "6.0.9",
+    "@angular/core": "6.0.9",
     "@angular/flex-layout": "6.0.0-beta.16",
-    "@angular/forms": "6.0.7",
-    "@angular/http": "6.0.7",
+    "@angular/forms": "6.0.9",
+    "@angular/http": "6.0.9",
     "@angular/material": "6.3.3",
     "@angular/material-moment-adapter": "6.3.3",
-    "@angular/platform-browser": "6.0.7",
-    "@angular/platform-browser-dynamic": "6.0.7",
-    "@angular/router": "6.0.7",
+    "@angular/platform-browser": "6.0.9",
+    "@angular/platform-browser-dynamic": "6.0.9",
+    "@angular/router": "6.0.9",
     "@ngrx/effects": "6.0.1",
     "@ngrx/router-store": "6.0.1",
     "@ngrx/store": "6.0.1",
@@ -52,7 +52,7 @@
     "moment": "2.22.2",
     "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "6.4.0",
+    "ngx-color-picker": "6.5.0",
     "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.4.0",
     "prismjs": "1.15.0",
@@ -63,13 +63,13 @@
   },
   "devDependencies": {
     "@angular/cli": "6.0.8",
-    "@angular/compiler-cli": "6.0.7",
-    "@angular/language-service": "6.0.7",
+    "@angular/compiler-cli": "6.0.9",
+    "@angular/language-service": "6.0.9",
     "@angular-devkit/build-angular": "0.6.8",
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.8.8",
     "@types/jasminewd2": "2.0.3",
-    "@types/lodash": "4.14.110",
+    "@types/lodash": "4.14.111",
     "@types/node": "8.9.5",
     "codelyzer": "4.2.1",
     "jasmine-core": "2.99.1",

src/@fuse/components/highlight/highlight.component.scss

@@ -4,4 +4,5 @@
     background: #263238;
     cursor: text;
     overflow: auto;
+    -webkit-overflow-scrolling: touch;
 }

src/@fuse/components/index.ts

@@ -4,6 +4,7 @@ export * from './demo/demo.module';
 export * from './highlight/highlight.module';
 export * from './material-color-picker/material-color-picker.module';
 export * from './navigation/navigation.module';
+export * from './progress-bar/progress-bar.module';
 export * from './search-bar/search-bar.module';
 export * from './shortcuts/shortcuts.module';
 export * from './sidebar/sidebar.module';

src/@fuse/components/progress-bar/progress-bar.component.html

@@ -0,0 +1,5 @@
+<ng-container *ngIf="visible">
+
+    <mat-progress-bar color="accent" [bufferValue]="bufferValue" [mode]="mode" [value]="value"></mat-progress-bar>
+
+</ng-container>

src/@fuse/components/progress-bar/progress-bar.component.scss

@@ -0,0 +1,17 @@
+@import "src/@fuse/scss/fuse";
+
+fuse-progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 99998;
+
+    mat-progress-bar {
+
+        .mat-progress-bar-buffer {
+            background-color: #C5C6CB !important;
+        }
+    }
+}

src/@fuse/components/progress-bar/progress-bar.component.ts

@@ -0,0 +1,93 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseProgressBarService } from '@fuse/components/progress-bar/progress-bar.service';
+
+@Component({
+    selector     : 'fuse-progress-bar',
+    templateUrl  : './progress-bar.component.html',
+    styleUrls    : ['./progress-bar.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseProgressBarComponent implements OnInit, OnDestroy
+{
+    bufferValue: number;
+    mode: 'determinate' | 'indeterminate' | 'buffer' | 'query';
+    value: number;
+    visible: boolean;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseProgressBarService} _fuseProgressBarService
+     */
+    constructor(
+        private _fuseProgressBarService: FuseProgressBarService
+    )
+    {
+        // Set the defaults
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to the progress bar service properties
+
+        // Buffer value
+        this._fuseProgressBarService.bufferValue
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((bufferValue) => {
+                this.bufferValue = bufferValue;
+            });
+
+        // Mode
+        this._fuseProgressBarService.mode
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((mode) => {
+                this.mode = mode;
+            });
+
+        // Value
+        this._fuseProgressBarService.value
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+                this.value = value;
+            });
+
+        // Visible
+        this._fuseProgressBarService.visible
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((visible) => {
+                this.visible = visible;
+            });
+
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+}

src/@fuse/components/progress-bar/progress-bar.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { MatButtonModule, MatIconModule, MatProgressBarModule } from '@angular/material';
+
+import { FuseProgressBarComponent } from './progress-bar.component';
+
+@NgModule({
+    declarations: [
+        FuseProgressBarComponent
+    ],
+    imports     : [
+        CommonModule,
+        RouterModule,
+
+        MatButtonModule,
+        MatIconModule,
+        MatProgressBarModule
+    ],
+    exports     : [
+        FuseProgressBarComponent
+    ]
+})
+export class FuseProgressBarModule
+{
+}

src/@fuse/components/progress-bar/progress-bar.service.ts

@@ -6,9 +6,12 @@ import { filter } from 'rxjs/operators';
 @Injectable({
     providedIn: 'root'
 })
-export class FuseLoadingBarService
+export class FuseProgressBarService
 {
     // Private
+    private _bufferValue: BehaviorSubject<number>;
+    private _mode: BehaviorSubject<string>;
+    private _value: BehaviorSubject<number>;
     private _visible: BehaviorSubject<boolean>;
 
     /**
@@ -28,9 +31,50 @@ export class FuseLoadingBarService
     // @ Accessors
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * Buffer value
+     */
+    get bufferValue(): Observable<any>
+    {
+        return this._bufferValue.asObservable();
+    }
+
+    setBufferValue(value: number): void
+    {
+        this._bufferValue.next(value);
+    }
+
+    /**
+     * Mode
+     */
+    get mode(): Observable<any>
+    {
+        return this._mode.asObservable();
+    }
+
+    setMode(value: 'determinate' | 'indeterminate' | 'buffer' | 'query'): void
+    {
+        this._mode.next(value);
+    }
+
+    /**
+     * Value
+     */
+    get value(): Observable<any>
+    {
+        return this._value.asObservable();
+    }
+
+    setValue(value: number): void
+    {
+        this._value.next(value);
+    }
+
+    /**
+     * Visible
+     */
     get visible(): Observable<any>
     {
-        // Return the _visible as observable
         return this._visible.asObservable();
     }
 
@@ -45,24 +89,23 @@ export class FuseLoadingBarService
      */
     private _init(): void
     {
-        // Initialize the behavior subject
+        // Initialize the behavior subjects
+        this._bufferValue = new BehaviorSubject(0);
+        this._mode = new BehaviorSubject('indeterminate');
+        this._value = new BehaviorSubject(0);
         this._visible = new BehaviorSubject(false);
 
         // Subscribe to the router events to show/hide the loading bar
         this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationStart)
-            )
+            .pipe(filter((event) => event instanceof NavigationStart))
             .subscribe(() => {
-                this.showLoadingBar();
+                this.show();
             });
 
         this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd)
-            )
+            .pipe(filter((event) => event instanceof NavigationEnd))
             .subscribe(() => {
-                this.hideLoadingBar();
+                this.hide();
             });
     }
 
@@ -71,20 +114,18 @@ export class FuseLoadingBarService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Show the loading bar
+     * Show the progress bar
      */
-    showLoadingBar(): void
+    show(): void
     {
-        // Show
         this._visible.next(true);
     }
 
     /**
-     * Hide the loading bar
+     * Hide the progress bar
      */
-    hideLoadingBar(): void
+    hide(): void
     {
-        // Hide
         this._visible.next(false);
     }
 }

src/@fuse/components/sidebar/sidebar.component.scss

@@ -9,6 +9,7 @@ fuse-sidebar {
     bottom: 0;
     overflow-x: hidden;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
     width: 280px;
     min-width: 280px;
     max-width: 280px;

src/@fuse/components/theme-options/theme-options.component.scss

@@ -19,6 +19,7 @@
         flex: 1 0 auto;
         padding: 40px 24px 24px 24px;
         overflow: auto;
+        -webkit-overflow-scrolling: touch;
 
         .header {
             display: flex;

src/@fuse/scss/partials/_angular-material-fix.scss

@@ -6,6 +6,11 @@
     }
 }
 
+// Fix: "Smooth scrolling for iOS"
+.mat-dialog-container {
+    -webkit-overflow-scrolling: touch;
+}
+
 // Fix: "Inconsistent font sizes across elements"
 .mat-form-field-wrapper {
     font-size: 16px;

src/@fuse/scss/partials/_global.scss

@@ -10,4 +10,15 @@ body {
     padding: 0;
     overflow: hidden;
     background: #F5F5F5;
+}
+
+body {
+
+    // Boxed
+    &.boxed {
+        max-width: 1200px;
+        margin: 0 auto;
+
+        @include mat-elevation(8);
+    }
 }

src/@fuse/scss/partials/_page-layouts.scss

@@ -143,8 +143,9 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         flex: 1 1 auto;
 
                         > .content {
-                            overflow: auto;
                             flex: 1 1 auto;
+                            overflow: auto;
+                            -webkit-overflow-scrolling: touch;
                         }
                     }
                 }
@@ -166,6 +167,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                                             .tab-content {
                                                 overflow: auto;
+                                                -webkit-overflow-scrolling: touch;
                                             }
                                         }
                                     }
@@ -346,6 +348,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                     .content {
                         overflow: auto;
+                        -webkit-overflow-scrolling: touch;
                     }
                 }
 
@@ -358,6 +361,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         > .content {
                             flex: 1 1 auto;
                             overflow: auto;
+                            -webkit-overflow-scrolling: touch;
                         }
                     }
                 }
@@ -379,6 +383,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                                             .tab-content {
                                                 overflow: auto;
+                                                -webkit-overflow-scrolling: touch;
                                             }
                                         }
                                     }
@@ -500,12 +505,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                     .content {
                         overflow: auto;
+                        -webkit-overflow-scrolling: touch;
                     }
                 }
 
                 > .center {
                     flex: 1 1 auto;
                     overflow: auto;
+                    -webkit-overflow-scrolling: touch;
                 }
             }
 
@@ -528,12 +535,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                         .content {
                             overflow: auto;
+                            -webkit-overflow-scrolling: touch;
                         }
                     }
 
                     > .center {
                         flex: 1 1 auto;
                         overflow: auto;
+                        -webkit-overflow-scrolling: touch;
                     }
                 }
             }

src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss

@@ -146,6 +146,7 @@ owl-date-time {
         padding: .25em;
         background-color: rgba(0, 0, 0, .1);
         overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
     }
 
     .owl-calendar-wrapper {

src/@fuse/scss/partials/plugins/_ngx-color-picker.scss

@@ -11,6 +11,7 @@
         height: 140px;
         overflow-y: auto;
         overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
 
         > hr {
             display: none;

src/app/app.component.html

@@ -1,22 +1,30 @@
+<!-- PROGRESS BAR -->
+<fuse-progress-bar></fuse-progress-bar>
+<!-- / PROGRESS BAR -->
+
 <!-- VERTICAL LAYOUT 1 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
     <vertical-layout-1></vertical-layout-1>
 </ng-container>
+<!-- / VERTICAL LAYOUT 1 -->
 
 <!-- VERTICAL LAYOUT 2 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-2'">
     <vertical-layout-2></vertical-layout-2>
 </ng-container>
+<!-- / VERTICAL LAYOUT 2 -->
 
 <!-- VERTICAL LAYOUT 3 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
     <vertical-layout-3></vertical-layout-3>
 </ng-container>
+<!-- / VERTICAL LAYOUT 3 -->
 
 <!-- HORIZONTAL LAYOUT 1 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
     <horizontal-layout-1></horizontal-layout-1>
 </ng-container>
+<!-- / HORIZONTAL LAYOUT 1 -->
 
 <!-- THEME OPTIONS PANEL -->
 <button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
@@ -26,4 +34,5 @@
 
 <fuse-sidebar name="themeOptionsPanel" class="theme-options-sidebar" position="right" [invisibleOverlay]="true">
     <fuse-theme-options></fuse-theme-options>
-</fuse-sidebar>
+</fuse-sidebar>
+<!-- / THEME OPTIONS PANEL -->

src/app/app.component.ts

@@ -22,8 +22,8 @@ import { locale as navigationTurkish } from 'app/navigation/i18n/tr';
 })
 export class AppComponent implements OnInit, OnDestroy
 {
-    navigation: any;
     fuseConfig: any;
+    navigation: any;
 
     // Private
     private _unsubscribeAll: Subject<any>;
@@ -75,7 +75,7 @@ export class AppComponent implements OnInit, OnDestroy
         // Add is-mobile class to the body if the platform is mobile
         if ( this._platform.ANDROID || this._platform.IOS )
         {
-            this.document.body.className += ' is-mobile';
+            this.document.body.classList.add('is-mobile');
         }
 
         // Set the private defaults
@@ -96,6 +96,15 @@ export class AppComponent implements OnInit, OnDestroy
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((config) => {
                 this.fuseConfig = config;
+
+                if ( this.fuseConfig.layout.width === 'boxed' )
+                {
+                    this.document.body.classList.add('boxed');
+                }
+                else
+                {
+                    this.document.body.classList.remove('boxed');
+                }
             });
     }
 

src/app/app.module.ts

@@ -10,7 +10,7 @@ import 'hammerjs';
 
 import { FuseModule } from '@fuse/fuse.module';
 import { FuseSharedModule } from '@fuse/shared.module';
-import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
+import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
 
 import { fuseConfig } from 'app/fuse-config';
 
@@ -46,6 +46,7 @@ const appRoutes: Routes = [
 
         // Fuse modules
         FuseModule.forRoot(fuseConfig),
+        FuseProgressBarModule,
         FuseSharedModule,
         FuseSidebarModule,
         FuseThemeOptionsModule,

src/app/layout/components/navbar/horizontal/style-1/style-1.component.scss

@@ -1,3 +1,16 @@
 navbar-horizontal-style-1 {
 
 }
+
+navbar {
+
+    &.horizontal-style-1 {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        height: 56px;
+        max-height: 56px;
+        min-height: 56px;
+    }
+}

src/app/layout/components/navbar/navbar.component.scss

@@ -1,6 +1,3 @@
 navbar {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    width: 100%;
+
 }

src/app/layout/components/navbar/navbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, Input, Renderer2, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector     : 'navbar',
@@ -8,16 +8,46 @@ import { Component, Input, ViewEncapsulation } from '@angular/core';
 })
 export class NavbarComponent
 {
-    // Variant
-    @Input()
-    variant;
+    // Private
+    _variant: string;
 
     /**
      * Constructor
+     *
+     * @param {ElementRef} _elementRef
+     * @param {Renderer2} _renderer
      */
-    constructor()
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    )
     {
-        // Set the defaults
-        this.variant = 'vertical-style-1';
+        // Set the private defaults
+        this._variant = 'vertical-style-1';
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Variant
+     */
+    get variant(): string
+    {
+        return this._variant;
+    }
+
+    @Input()
+    set variant(value: string)
+    {
+        // Remove the old class name
+        this._renderer.removeClass(this._elementRef.nativeElement, this.variant);
+
+        // Store the variant value
+        this._variant = value;
+
+        // Add the new class name
+        this._renderer.addClass(this._elementRef.nativeElement, value);
     }
 }

src/app/layout/components/navbar/vertical/style-1/style-1.component.scss

@@ -41,6 +41,8 @@ fuse-sidebar {
                                 position: relative;
                                 top: auto;
                                 padding: 0;
+                                transform: translateX(0);
+                                left: auto;
 
                                 .avatar {
                                     width: 40px;
@@ -66,6 +68,24 @@ fuse-sidebar {
 
 navbar {
 
+    &.vertical-style-1 {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        height: 100%;
+
+        &.right-navbar {
+
+            .toggle-sidebar-opened {
+
+                mat-icon {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+
     navbar-vertical-style-1 {
         display: flex;
         flex-direction: column;
@@ -79,11 +99,13 @@ navbar {
             align-items: center;
             justify-content: space-between;
             min-height: 64px;
+            max-height: 64px;
             height: 64px;
             padding: 12px 12px 12px 20px;
 
             @include media-breakpoint('xs') {
                 min-height: 56px;
+                max-height: 56px;
                 height: 56px;
             }
 
@@ -113,6 +135,7 @@ navbar {
 
         .navbar-scroll-container {
             overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
 
             background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%),
             linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%);
@@ -134,6 +157,8 @@ navbar {
                     top: 92px;
                     border-radius: 50%;
                     padding: 8px;
+                    transform: translateX(-50%);
+                    left: 50%;
 
                     .avatar {
                         width: 72px;
@@ -149,14 +174,4 @@ navbar {
             }
         }
     }
-
-    &.right-navbar {
-
-        .toggle-sidebar-opened {
-
-            mat-icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
 }

src/app/layout/components/navbar/vertical/style-2/style-2.component.scss

@@ -30,6 +30,24 @@ fuse-sidebar {
 
 navbar {
 
+    &.vertical-style-2 {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        height: 100%;
+
+        &.right-navbar {
+
+            .toggle-sidebar-opened {
+
+                mat-icon {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+
     navbar-vertical-style-2 {
         display: flex;
         flex-direction: column;
@@ -68,17 +86,8 @@ navbar {
         .navbar-content {
             flex: 1 1 auto;
             overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
         }
 
     }
-
-    &.right-navbar {
-
-        .toggle-sidebar-opened {
-
-            mat-icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
 }

src/app/layout/components/toolbar/toolbar.component.html

@@ -1,7 +1,5 @@
 <mat-toolbar class="p-0 mat-elevation-z1">
 
-    <mat-progress-bar *ngIf="showLoadingBar" class="loading-bar" color="accent" mode="indeterminate"></mat-progress-bar>
-
     <div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
 
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">

src/app/layout/components/toolbar/toolbar.component.scss

@@ -11,17 +11,9 @@
     }
 
     .mat-toolbar {
+        position: relative;
         background: inherit;
         color: inherit;
-        position: relative;
-
-        .loading-bar {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            width: 100%;
-        }
     }
 
     .logo {

src/app/layout/components/toolbar/toolbar.component.ts

@@ -8,7 +8,6 @@ import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
 import { navigation } from 'app/navigation/navigation';
-import { FuseLoadingBarService } from '@fuse/services/loading-bar.service';
 
 @Component({
     selector   : 'toolbar',
@@ -24,7 +23,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
     languages: any;
     navigation: any;
     selectedLanguage: any;
-    showLoadingBar: boolean;
     userStatusOptions: any[];
 
     // Private
@@ -34,13 +32,11 @@ export class ToolbarComponent implements OnInit, OnDestroy
      * Constructor
      *
      * @param {FuseConfigService} _fuseConfigService
-     * @param {FuseLoadingBarService} _fuseLoadingBarService
      * @param {FuseSidebarService} _fuseSidebarService
      * @param {TranslateService} _translateService
      */
     constructor(
         private _fuseConfigService: FuseConfigService,
-        private _fuseLoadingBarService: FuseLoadingBarService,
         private _fuseSidebarService: FuseSidebarService,
         private _translateService: TranslateService
     )
@@ -102,13 +98,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the Fuse loading bar service
-        this._fuseLoadingBarService.visible
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((visible) => {
-                this.showLoadingBar = visible;
-            });
-
         // Subscribe to the config changes
         this._fuseConfigService.config
             .pipe(takeUntil(this._unsubscribeAll))

src/app/layout/components/toolbar/toolbar.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { MatButtonModule, MatIconModule, MatMenuModule, MatProgressBarModule, MatToolbarModule } from '@angular/material';
+import { MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule } from '@angular/material';
 
 import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
@@ -16,7 +16,6 @@ import { ToolbarComponent } from 'app/layout/components/toolbar/toolbar.componen
         MatButtonModule,
         MatIconModule,
         MatMenuModule,
-        MatProgressBarModule,
         MatToolbarModule,
 
         FuseSharedModule,

src/app/layout/horizontal/layout-1/layout-1.component.html

@@ -6,7 +6,7 @@
 </ng-container>
 <!-- / SIDE PANEL -->
 
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<div id="main">
 
     <!-- TOOLBAR: Above -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">

src/app/layout/horizontal/layout-1/layout-1.component.scss

@@ -16,13 +16,6 @@ horizontal-layout-1 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1
         > .container {
             position: relative;
@@ -49,6 +42,7 @@ horizontal-layout-1 {
                     transform: translateZ(0);
                     overflow-x: hidden;
                     overflow-y: auto;
+                    -webkit-overflow-scrolling: touch;
 
                     // Content component
                     content {

src/app/layout/vertical/layout-1/layout-1.component.html

@@ -6,7 +6,7 @@
 </ng-container>
 <!-- / SIDE PANEL -->
 
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<div id="main">
 
     <!-- TOOLBAR: Above -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">

src/app/layout/vertical/layout-1/layout-1.component.scss

@@ -16,13 +16,6 @@ vertical-layout-1 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1
         > .container {
             position: relative;
@@ -49,6 +42,7 @@ vertical-layout-1 {
                     transform: translateZ(0);
                     overflow-x: hidden;
                     overflow-y: auto;
+                    -webkit-overflow-scrolling: touch;
 
                     // Content component
                     content {

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -6,7 +6,7 @@
 </ng-container>
 <!-- / SIDE PANEL -->
 
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<div id="main">
 
     <!-- TOOLBAR: Above fixed -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">

src/app/layout/vertical/layout-2/layout-2.component.scss

@@ -16,13 +16,6 @@ vertical-layout-2 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1 (Scrollable)
         > .container {
             position: relative;
@@ -32,6 +25,7 @@ vertical-layout-2 {
             width: 100%;
             overflow-x: hidden;
             overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
             transform: translateZ(0);
 
             // Container 2

src/app/layout/vertical/layout-3/layout-3.component.html

@@ -6,7 +6,7 @@
 </ng-container>
 <!-- / SIDE PANEL -->
 
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<div id="main">
 
     <!-- TOOLBAR: Above fixed -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">

src/app/layout/vertical/layout-3/layout-3.component.scss

@@ -16,13 +16,6 @@ vertical-layout-3 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1 (Scrollable)
         > .container {
             position: relative;
@@ -32,6 +25,7 @@ vertical-layout-3 {
             width: 100%;
             overflow-x: hidden;
             overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
             transform: translateZ(0);
 
             // Container 2