Improving the codebase (99% completed)

Updated Angular, Angular Material and couple other packages

angular.json

@@ -104,7 +104,7 @@
                         ],
                         "exclude": [
                             "**/node_modules/**",
-                            "**/src/app/fuse-fake-db/**/*",
+                            "**/src/app/fake-db/**/*",
                             "**/src/assets/angular-material-examples/**/*"
                         ]
                     }
@@ -128,7 +128,7 @@
                         "tsConfig": "e2e/tsconfig.e2e.json",
                         "exclude": [
                             "**/node_modules/**",
-                            "**/src/app/fuse-fake-db/**/*",
+                            "**/src/app/fake-db/**/*",
                             "**/src/assets/angular-material-examples/**/*"
                         ]
                     }

package.json

@@ -19,26 +19,26 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "6.0.1",
+    "@angular/animations": "6.0.3",
-    "@angular/cdk": "6.0.2",
+    "@angular/cdk": "6.1.0",
-    "@angular/common": "6.0.1",
+    "@angular/common": "6.0.3",
-    "@angular/compiler": "6.0.1",
+    "@angular/compiler": "6.0.3",
-    "@angular/core": "6.0.1",
+    "@angular/core": "6.0.3",
     "@angular/flex-layout": "6.0.0-beta.15",
-    "@angular/forms": "6.0.1",
+    "@angular/forms": "6.0.3",
-    "@angular/http": "6.0.1",
+    "@angular/http": "6.0.3",
-    "@angular/material": "6.0.2",
+    "@angular/material": "6.1.0",
-    "@angular/material-moment-adapter": "6.0.2",
+    "@angular/material-moment-adapter": "6.1.0",
-    "@angular/platform-browser": "6.0.1",
+    "@angular/platform-browser": "6.0.3",
-    "@angular/platform-browser-dynamic": "6.0.1",
+    "@angular/platform-browser-dynamic": "6.0.3",
-    "@angular/router": "6.0.1",
+    "@angular/router": "6.0.3",
     "@ngrx/effects": "6.0.0-beta.3",
     "@ngrx/router-store": "6.0.0-beta.3",
     "@ngrx/store": "6.0.0-beta.3",
     "@ngrx/store-devtools": "6.0.0-beta.3",
-    "@ngx-translate/core": "10.0.1",
+    "@ngx-translate/core": "10.0.2",
-    "@swimlane/ngx-charts": "8.0.0",
+    "@swimlane/ngx-charts": "8.0.1",
-    "@swimlane/ngx-datatable": "12.0.0",
+    "@swimlane/ngx-datatable": "13.0.0",
     "@swimlane/ngx-dnd": "4.0.1",
     "@types/prismjs": "1.9.0",
     "angular-calendar": "0.25.2",
@@ -51,32 +51,32 @@
     "lodash": "4.17.10",
     "moment": "2.22.1",
     "ng2-charts": "1.6.0",
-    "ngrx-store-freeze": "0.2.2",
+    "ngrx-store-freeze": "0.2.3",
-    "ngx-color-picker": "6.1.0",
+    "ngx-color-picker": "6.2.0",
     "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.3.0",
     "prismjs": "1.14.0",
-    "rxjs": "6.1.0",
+    "rxjs": "6.2.0",
     "rxjs-compat": "6.1.0",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "6.0.1",
+    "@angular/cli": "6.0.3",
-    "@angular/compiler-cli": "6.0.1",
+    "@angular/compiler-cli": "6.0.3",
-    "@angular/language-service": "6.0.1",
+    "@angular/language-service": "6.0.3",
-    "@angular-devkit/build-angular": "0.6.1",
+    "@angular-devkit/build-angular": "0.6.3",
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.8.7",
     "@types/jasminewd2": "2.0.3",
-    "@types/lodash": "4.14.108",
+    "@types/lodash": "4.14.109",
     "@types/node": "8.9.5",
     "codelyzer": "4.2.1",
     "jasmine-core": "2.99.1",
     "jasmine-spec-reporter": "4.2.1",
     "karma": "1.7.1",
     "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "1.4.2",
+    "karma-coverage-istanbul-reporter": "1.4.3",
     "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "0.2.2",
     "protractor": "5.3.2",

src/@fuse/components/material-color-picker/material-color-picker.component.ts

@@ -13,22 +13,78 @@ import { MatColors } from '@fuse/mat-colors';
 export class FuseMaterialColorPickerComponent implements OnChanges
 {
     colors: any;
-    selectedColor: any;
     hues: string[];
-    view = 'palettes';
+    selectedColor: any;
+    view: string;
 
-    @Input() selectedPalette = '';
+    @Input()
-    @Input() selectedHue = '';
+    selectedPalette: string;
-    @Input() selectedFg = '';
-    @Input() value: any;
-    @Output() onValueChange = new EventEmitter();
-    @Output() selectedPaletteChange = new EventEmitter();
-    @Output() selectedHueChange = new EventEmitter();
-    @Output() selectedClassChange = new EventEmitter();
-    @Output() selectedBgChange = new EventEmitter();
-    @Output() selectedFgChange = new EventEmitter();
 
-    _selectedClass = '';
+    @Input()
+    selectedHue: string;
+
+    @Input()
+    selectedFg: string;
+
+    @Input()
+    value: any;
+
+    @Output()
+    onValueChange: EventEmitter<any>;
+
+    @Output()
+    selectedPaletteChange: EventEmitter<any>;
+
+    @Output()
+    selectedHueChange: EventEmitter<any>;
+
+    @Output()
+    selectedClassChange: EventEmitter<any>;
+
+    @Output()
+    selectedBgChange: EventEmitter<any>;
+
+    @Output()
+    selectedFgChange: EventEmitter<any>;
+
+    // Private
+    _selectedClass: string;
+    _selectedBg: string;
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+        // Set the defaults
+        this.colors = MatColors.all;
+        this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
+        this.selectedFg = '';
+        this.selectedHue = '';
+        this.selectedPalette = '';
+        this.view = 'palettes';
+
+        this.onValueChange = new EventEmitter();
+        this.selectedPaletteChange = new EventEmitter();
+        this.selectedHueChange = new EventEmitter();
+        this.selectedClassChange = new EventEmitter();
+        this.selectedBgChange = new EventEmitter();
+        this.selectedFgChange = new EventEmitter();
+
+        // Set the private defaults
+        this._selectedClass = '';
+        this._selectedBg = '';
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Selected class
+     *
+     * @param value
+     */
     @Input()
     set selectedClass(value)
     {
@@ -54,7 +110,11 @@ export class FuseMaterialColorPickerComponent implements OnChanges
         return this._selectedClass;
     }
 
-    _selectedBg = '';
+    /**
+     * Selected bg
+     *
+     * @param value
+     */
     @Input()
     set selectedBg(value)
     {
@@ -86,13 +146,16 @@ export class FuseMaterialColorPickerComponent implements OnChanges
         return this._selectedBg;
     }
 
-    constructor()
+    // -----------------------------------------------------------------------------------------------------
-    {
+    // @ Lifecycle hooks
-        this.colors = MatColors.all;
+    // -----------------------------------------------------------------------------------------------------
-        this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
-    }
 
-    ngOnChanges(changes: any)
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: any): void
     {
         if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
             changes.selectedClass && changes.selectedClass.currentValue === '' ||
@@ -106,21 +169,38 @@ export class FuseMaterialColorPickerComponent implements OnChanges
             this.updateSelectedColor();
         }
     }
-    
+
-    selectPalette(palette)
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Select palette
+     *
+     * @param palette
+     */
+    selectPalette(palette): void
     {
         this.selectedPalette = palette;
         this.updateSelectedColor();
         this.view = 'hues';
     }
 
-    selectHue(hue)
+    /**
+     * Select hue
+     *
+     * @param hue
+     */
+    selectHue(hue): void
     {
         this.selectedHue = hue;
         this.updateSelectedColor();
     }
 
-    removeColor()
+    /**
+     * Remove color
+     */
+    removeColor(): void
     {
         this.selectedPalette = '';
         this.selectedHue = '';
@@ -128,7 +208,10 @@ export class FuseMaterialColorPickerComponent implements OnChanges
         this.view = 'palettes';
     }
 
-    updateSelectedColor()
+    /**
+     * Update selected color
+     */
+    updateSelectedColor(): void
     {
         setTimeout(() => {
 
@@ -168,12 +251,18 @@ export class FuseMaterialColorPickerComponent implements OnChanges
         });
     }
 
-    backToPaletteSelection()
+    /**
+     * Go back to palette selection
+     */
+    backToPaletteSelection(): void
     {
         this.view = 'palettes';
     }
 
-    onMenuOpen()
+    /**
+     * On menu open
+     */
+    onMenuOpen(): void
     {
         if ( this.selectedPalette === '' )
         {

src/@fuse/components/material-color-picker/material-color-picker.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
-
 import { MatButtonModule, MatIconModule, MatMenuModule, MatRippleModule } from '@angular/material';
 
 import { FusePipesModule } from '@fuse/pipes/pipes.module';

src/@fuse/components/shortcuts/shortcuts.component.ts

@@ -1,8 +1,8 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { ObservableMedia } from '@angular/flex-layout';
-import { Subject, Subscription } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import { CookieService } from 'ngx-cookie-service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@@ -68,6 +68,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     {
         // Subscribe to config changes
         this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(
                 (config) => {
                     this.toolbarColor = config.colorClasses.toolbar;

src/@fuse/scss/partials/_print.scss

@@ -34,7 +34,7 @@
     }
 
     /* General styles */
-    fuse-root {
+    app {
 
         fuse-navbar-vertical,
         fuse-navbar-horizontal,

src/app/app.component.ts

@@ -10,7 +10,7 @@ import { locale as navigationEnglish } from 'app/navigation/i18n/en';
 import { locale as navigationTurkish } from 'app/navigation/i18n/tr';
 
 @Component({
-    selector   : 'fuse-root',
+    selector   : 'app',
     templateUrl: './app.component.html',
     styleUrls  : ['./app.component.scss']
 })

src/app/app.module.ts

@@ -13,7 +13,7 @@ import { FuseSharedModule } from '@fuse/shared.module';
 
 import { fuseConfig } from 'app/fuse-config';
 
-import { FuseFakeDbService } from 'app/fuse-fake-db/fuse-fake-db.service';
+import { FakeDbService } from 'app/fake-db/fake-db.service';
 import { AppComponent } from 'app/app.component';
 import { AppStoreModule } from 'app/store/store.module';
 import { LayoutModule } from 'app/layout/layout.module';
@@ -29,7 +29,7 @@ const appRoutes: Routes = [
     },
     {
         path        : 'ui',
-        loadChildren: './main/ui/ui.module#FuseUIModule'
+        loadChildren: './main/ui/ui.module#UIModule'
     },
     {
         path        : 'services',
@@ -60,7 +60,7 @@ const appRoutes: Routes = [
         RouterModule.forRoot(appRoutes),
 
         TranslateModule.forRoot(),
-        InMemoryWebApiModule.forRoot(FuseFakeDbService, {
+        InMemoryWebApiModule.forRoot(FakeDbService, {
             delay             : 0,
             passThruUnknownUrl: true
         }),

src/app/fake-db/fake-db.service.ts

@@ -1,27 +1,27 @@
 import { InMemoryDbService } from 'angular-in-memory-web-api';
 
-import { ProjectDashboardDb } from './dashboard-project';
+import { ProjectDashboardDb } from 'app/fake-db/dashboard-project';
-import { AnalyticsDashboardDb } from './dashboard-analytics';
+import { AnalyticsDashboardDb } from 'app/fake-db/dashboard-analytics';
-import { CalendarFakeDb } from './calendar';
+import { CalendarFakeDb } from 'app/fake-db/calendar';
-import { ECommerceFakeDb } from './e-commerce';
+import { ECommerceFakeDb } from 'app/fake-db/e-commerce';
-import { AcademyFakeDb } from './academy';
+import { AcademyFakeDb } from 'app/fake-db/academy';
-import { MailFakeDb } from './mail';
+import { MailFakeDb } from 'app/fake-db/mail';
-import { ChatFakeDb } from './chat';
+import { ChatFakeDb } from 'app/fake-db/chat';
-import { FileManagerFakeDb } from './file-manager';
+import { FileManagerFakeDb } from 'app/fake-db/file-manager';
-import { ContactsFakeDb } from './contacts';
+import { ContactsFakeDb } from 'app/fake-db/contacts';
-import { TodoFakeDb } from './todo';
+import { TodoFakeDb } from 'app/fake-db/todo';
-import { ScrumboardFakeDb } from './scrumboard';
+import { ScrumboardFakeDb } from 'app/fake-db/scrumboard';
-import { InvoiceFakeDb } from './invoice';
+import { InvoiceFakeDb } from 'app/fake-db/invoice';
-import { ProfileFakeDb } from './profile';
+import { ProfileFakeDb } from 'app/fake-db/profile';
-import { SearchFakeDb } from './search';
+import { SearchFakeDb } from 'app/fake-db/search';
-import { FaqFakeDb } from './faq';
+import { FaqFakeDb } from 'app/fake-db/faq';
-import { KnowledgeBaseFakeDb } from './knowledge-base';
+import { KnowledgeBaseFakeDb } from 'app/fake-db/knowledge-base';
-import { IconsFakeDb } from './icons';
+import { IconsFakeDb } from 'app/fake-db/icons';
-import { QuickPanelFakeDb } from './quick-panel';
+import { QuickPanelFakeDb } from 'app/fake-db/quick-panel';
 
-export class FuseFakeDbService implements InMemoryDbService
+export class FakeDbService implements InMemoryDbService
 {
-    createDb()
+    createDb(): any
     {
         return {
             // Dashboards

src/app/main/apps/apps.module.ts

@@ -18,7 +18,7 @@ const routes = [
     },
     {
         path        : 'mail-ngrx',
-        loadChildren: './mail-ngrx/mail.module#FuseMailNgrxModule'
+        loadChildren: './mail-ngrx/mail.module#MailNgrxModule'
     },
     {
         path        : 'chat',
@@ -38,7 +38,7 @@ const routes = [
     },
     {
         path        : 'todo',
-        loadChildren: './todo/todo.module#FuseTodoModule'
+        loadChildren: './todo/todo.module#TodoModule'
     },
     {
         path        : 'file-manager',
@@ -50,7 +50,7 @@ const routes = [
     },
     {
         path        : 'scrumboard',
-        loadChildren: './scrumboard/scrumboard.module#FuseScrumboardModule'
+        loadChildren: './scrumboard/scrumboard.module#ScrumboardModule'
     }
 ];
 

src/app/main/apps/mail-ngrx/mail.module.ts

@@ -88,6 +88,6 @@ const routes: Routes = [
     ],
     entryComponents: [MailNgrxComposeDialogComponent]
 })
-export class FuseMailNgrxModule
+export class MailNgrxModule
 {
 }

src/app/main/apps/scrumboard/scrumboard.module.ts

@@ -87,6 +87,6 @@ const routes: Routes = [
     ],
     entryComponents: [ScrumboardCardDialogComponent]
 })
-export class FuseScrumboardModule
+export class ScrumboardModule
 {
 }

src/app/main/apps/todo/todo.module.ts

@@ -91,6 +91,6 @@ const routes: Routes = [
         TodoService
     ]
 })
-export class FuseTodoModule
+export class TodoModule
 {
 }

src/app/main/components-third-party/components-third-party.module.ts

@@ -6,18 +6,18 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { GoogleMapsModule } from 'app/main/components-third-party/google-maps/google-maps.module';
-import { FuseNgxDatatableComponent } from 'app/main/components-third-party/datatable/ngx-datatable.component';
+import { NgxDatatableDocsComponent } from 'app/main/components-third-party/datatable/ngx-datatable.component';
 
 const routes = [
     {
         path     : 'datatables/ngx-datatable',
-        component: FuseNgxDatatableComponent
+        component: NgxDatatableDocsComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        FuseNgxDatatableComponent
+        NgxDatatableDocsComponent
     ],
     imports     : [
         RouterModule.forChild(routes),
@@ -31,7 +31,7 @@ const routes = [
         FuseSharedModule,
 
         GoogleMapsModule
-    ],
+    ]
 })
 export class ComponentsThirdPartyModule
 {

src/app/main/components-third-party/datatable/ngx-datatable.component.ts

@@ -1,27 +1,63 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    selector   : 'fuse-ngx-datatable',
+    selector   : 'ngx-datatable-docs',
     templateUrl: './ngx-datatable.component.html',
     styleUrls  : ['./ngx-datatable.component.scss']
 })
-export class FuseNgxDatatableComponent implements OnInit
+export class NgxDatatableDocsComponent implements OnInit, OnDestroy
 {
     rows: any[];
-    loadingIndicator = true;
+    loadingIndicator: boolean;
-    reorderable = true;
+    reorderable: boolean;
 
-    constructor(private http: HttpClient)
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {HttpClient} _httpClient
+     */
+    constructor(
+        private _httpClient: HttpClient
+    )
     {
+        // Set the defaults
+        this.loadingIndicator = true;
+        this.reorderable = true;
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
     }
 
-    ngOnInit()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
     {
-        this.http.get('api/contacts-contacts')
+        this._httpClient.get('api/contacts-contacts')
+            .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((contacts: any) => {
                 this.rows = contacts;
                 this.loadingIndicator = false;
             });
     }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
 }

src/app/main/components-third-party/google-maps/google-maps.component.ts

@@ -1,17 +1,22 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-google-maps-docs',
+    selector   : 'google-maps-docs',
     templateUrl: './google-maps.component.html',
     styleUrls  : ['./google-maps.component.scss']
 })
-export class FuseGoogleMapsDocsComponent
+export class GoogleMapsDocsComponent
 {
-    lat = -34.397;
+    lat: number;
-    lng = 150.644;
+    lng: number;
 
+    /**
+     * Constructor
+     */
     constructor()
     {
-
+        // Set the defaults
+        this.lat = -34.397;
+        this.lng = 150.644;
     }
 }

src/app/main/components-third-party/google-maps/google-maps.module.ts

@@ -8,18 +8,18 @@ import { AgmCoreModule } from '@agm/core';
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseHighlightModule } from '@fuse/components';
 
-import { FuseGoogleMapsDocsComponent } from './google-maps.component';
+import { GoogleMapsDocsComponent } from './google-maps.component';
 
 const routes = [
     {
         path     : 'google-maps',
-        component: FuseGoogleMapsDocsComponent
+        component: GoogleMapsDocsComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        FuseGoogleMapsDocsComponent
+        GoogleMapsDocsComponent
     ],
     imports     : [
         RouterModule.forChild(routes),

src/app/main/components/angular-material/angular-material.component.html

@@ -24,7 +24,7 @@
     <!-- CONTENT -->
     <div class="content p-24">
         <div *ngFor="let example of examples">
-            <fuse-example-viewer [example]="example"></fuse-example-viewer>
+            <example-viewer [example]="example"></example-viewer>
         </div>
     </div>
 </div>

src/app/main/components/angular-material/angular-material.component.ts

@@ -1,33 +1,60 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
-import { COMPONENT_MAP } from './example-components';
+import { COMPONENT_MAP } from 'app/main/components/angular-material/example-components';
 
 @Component({
-    selector   : 'fuse-angular-material',
+    selector   : 'angular-material',
     templateUrl: './angular-material.component.html',
     styleUrls  : ['./angular-material.component.scss']
 })
-export class FuseAngularMaterialComponent implements OnInit
+export class AngularMaterialComponent implements OnInit, OnDestroy
 {
     id: string;
     title: string;
     examples: any;
 
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {ActivatedRoute} _activatedRoute
+     */
     constructor(
-        private route: ActivatedRoute
+        private _activatedRoute: ActivatedRoute
     )
     {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
     }
 
-    ngOnInit()
+    /**
+     * On init
+     */
+    ngOnInit(): void
     {
-        this.route.params.subscribe(params => {
+        this._activatedRoute.params
-            this.id = params['id'];
+            .pipe(takeUntil(this._unsubscribeAll))
-            const _title = this.id.replace('-', ' ');
+            .subscribe(params => {
-            this.title = _title.charAt(0).toUpperCase() + _title.substring(1);
+                this.id = params['id'];
-            this.examples = COMPONENT_MAP[this.id];
+                const _title = this.id.replace('-', ' ');
-        });
+                this.title = _title.charAt(0).toUpperCase() + _title.substring(1);
+                this.examples = COMPONENT_MAP[this.id];
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
     }
 }
 

src/app/main/components/angular-material/angular-material.module.ts

@@ -7,8 +7,8 @@ import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
 
 import { MaterialModule } from 'app/main/components/angular-material/material.module';
 import { EXAMPLE_LIST } from 'app/main/components/angular-material/example-components';
-import { FuseAngularMaterialComponent } from 'app/main/components/angular-material/angular-material.component';
+import { AngularMaterialComponent } from 'app/main/components/angular-material/angular-material.component';
-import { FuseExampleViewerComponent } from 'app/main/components/angular-material/example-viewer/example-viewer';
+import { ExampleViewerComponent } from 'app/main/components/angular-material/example-viewer/example-viewer';
 
 const routes: Routes = [
     {
@@ -16,7 +16,7 @@ const routes: Routes = [
         children: [
             {
                 path     : ':id',
-                component: FuseAngularMaterialComponent
+                component: AngularMaterialComponent
             }
         ]
     }
@@ -25,8 +25,8 @@ const routes: Routes = [
 @NgModule({
     declarations   : [
         [...EXAMPLE_LIST],
-        FuseAngularMaterialComponent,
+        AngularMaterialComponent,
-        FuseExampleViewerComponent
+        ExampleViewerComponent
     ],
     imports        : [
         RouterModule.forChild(routes),
@@ -39,7 +39,7 @@ const routes: Routes = [
     ],
     entryComponents: EXAMPLE_LIST,
 })
-export class FuseAngularMaterialModule
+export class AngularMaterialModule
 {
 }
 

src/app/main/components/angular-material/example-viewer/example-viewer.scss

@@ -1,6 +1,6 @@
 @import "src/@fuse/scss/fuse";
 
-fuse-example-viewer {
+example-viewer {
     display: block;
     padding: 24px 0;
 

src/app/main/components/angular-material/example-viewer/example-viewer.ts

@@ -1,14 +1,13 @@
 import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { MatSnackBar } from '@angular/material';
-
 import 'prismjs/components/prism-scss';
 import 'prismjs/components/prism-typescript';
 
-import { EXAMPLE_COMPONENTS } from '../example-components';
-
 import { fuseAnimations } from '@fuse/animations';
 import { FuseCopierService } from '@fuse/services/copier.service';
 
+import { EXAMPLE_COMPONENTS } from 'app/main/components/angular-material/example-components';
+
 export interface LiveExample
 {
     title: string;
@@ -18,65 +17,65 @@ export interface LiveExample
 }
 
 @Component({
-    selector     : 'fuse-example-viewer',
+    selector     : 'example-viewer',
     templateUrl  : './example-viewer.html',
     styleUrls    : ['./example-viewer.scss'],
     encapsulation: ViewEncapsulation.None,
     animations   : fuseAnimations
 })
-export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy
+export class ExampleViewerComponent implements AfterViewInit, OnDestroy
 {
+    _example: string;
+    exampleData: LiveExample;
+    showSource: boolean;
     previewRef: ComponentRef<any>;
-    selectedIndex = 0;
+    selectedIndex: number;
+
+    @ViewChild('previewContainer', {read: ViewContainerRef})
+    private _previewContainer: ViewContainerRef;
+
+    /**
+     * Constructor
+     *
+     * @param {MatSnackBar} _matSnackBar
+     * @param {FuseCopierService} _fuseCopierService
+     * @param {ComponentFactoryResolver} _componentFactoryResolver
+     */
+    constructor(
+        private _matSnackBar: MatSnackBar,
+        private _fuseCopierService: FuseCopierService,
+        private _componentFactoryResolver: ComponentFactoryResolver
+    )
+    {
+        // Set the defaults
+        this.selectedIndex = 0;
+        this.showSource = false;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Container
+     *
+     * @param {ViewContainerRef} value
+     */
+    set container(value: ViewContainerRef)
+    {
+        this._previewContainer = value;
+    }
 
     get container(): ViewContainerRef
     {
         return this._previewContainer;
     }
 
-    set container(value: ViewContainerRef)
+    /**
-    {
+     * Example
-        this._previewContainer = value;
+     *
-    }
+     * @param {string} example
-
+     */
-    @ViewChild('previewContainer', {read: ViewContainerRef}) private _previewContainer: ViewContainerRef;
-
-    /** String key of the currently displayed example. */
-    _example: string;
-    exampleData: LiveExample;
-
-    /** Whether the source for the example is being displayed. */
-    showSource = false;
-
-    constructor(
-        private snackbar: MatSnackBar,
-        private copier: FuseCopierService,
-        private _resolver: ComponentFactoryResolver
-    )
-    {
-    }
-
-    ngAfterViewInit()
-    {
-        setTimeout(() => {
-            const cmpFactory = this._resolver.resolveComponentFactory(this.exampleData.component);
-            this.previewRef = this._previewContainer.createComponent(cmpFactory);
-        }, 0);
-    }
-
-    ngOnDestroy()
-    {
-        if ( this.previewRef )
-        {
-            this.previewRef.destroy();
-        }
-    }
-
-    get example()
-    {
-        return this._example;
-    }
-
     @Input()
     set example(example: string)
     {
@@ -91,20 +90,63 @@ export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy
         }
     }
 
+    get example(): string
+    {
+        return this._example;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        setTimeout(() => {
+            const cmpFactory = this._componentFactoryResolver.resolveComponentFactory(this.exampleData.component);
+            this.previewRef = this._previewContainer.createComponent(cmpFactory);
+        }, 0);
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        if ( this.previewRef )
+        {
+            this.previewRef.destroy();
+        }
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle source view
+     */
     toggleSourceView(): void
     {
         this.showSource = !this.showSource;
     }
 
-    copySource(text: string)
+    /**
+     * Copy the source
+     *
+     * @param {string} text
+     */
+    copySource(text: string): void
     {
-        if ( this.copier.copyText(text) )
+        if ( this._fuseCopierService.copyText(text) )
         {
-            this.snackbar.open('Code copied', '', {duration: 2500});
+            this._matSnackBar.open('Code copied', '', {duration: 2500});
         }
         else
         {
-            this.snackbar.open('Copy failed. Please try again!', '', {duration: 2500});
+            this._matSnackBar.open('Copy failed. Please try again!', '', {duration: 2500});
         }
     }
 }

src/app/main/components/cards/cards.component.ts

@@ -4,206 +4,213 @@ import * as shape from 'd3-shape';
 import { fuseAnimations } from '@fuse/animations';
 
 @Component({
-    selector   : 'fuse-cards-docs',
+    selector   : 'cards-docs',
     templateUrl: './cards.component.html',
     styleUrls  : ['./cards.component.scss'],
     animations : fuseAnimations
 })
-export class FuseCardsDocsComponent
+export class CardsDocsComponent
 {
-    view = 'preview';
+    view: string;
-
+    card9Expanded: boolean;
-    // Card 9
+    card10Expanded: boolean;
-    card9Expanded = false;
+    card19: any;
-
+    card24: any;
-    // Card 10
+    card25: any;
-    card10Expanded = false;
+    card26: any;
-
-    // Card 19
-    card19 = {
-        scheme: {
-            domain: ['#5c84f1']
-        },
-        data  : [
-            {
-                'name'  : 'GOOG',
-                'series': [
-                    {
-                        'name' : 'Jan 1',
-                        'value': 540.2
-                    },
-                    {
-                        'name' : 'Jan 2',
-                        'value': 539.4
-                    },
-                    {
-                        'name' : 'Jan 3',
-                        'value': 538.9
-                    },
-                    {
-                        'name' : 'Jan 4',
-                        'value': 539.6
-                    },
-                    {
-                        'name' : 'Jan 5',
-                        'value': 540
-                    },
-                    {
-                        'name' : 'Jan 6',
-                        'value': 540.2
-                    },
-                    {
-                        'name' : 'Jan 7',
-                        'value': 540.48
-                    }
-                ]
-            }
-        ],
-        curve         : shape.curveBasis
-    };
-
-    // Card 24
-    card24 = {
-        scheme : {
-            domain: ['#4867d2', '#5c84f1', '#89a9f4']
-        },
-        devices: [
-            {
-                'name'  : 'Desktop',
-                'value' : 92.8,
-                'change': -0.6
-            },
-            {
-                'name'  : 'Mobile',
-                'value' : 6.1,
-                'change': 0.7
-            },
-            {
-                'name'  : 'Tablet',
-                'value' : 1.1,
-                'change': 0.1
-            }
-        ]
-    };
-
-    // Card 25
-    card25 = {
-        scheme: {
-            domain: ['#5c84f1']
-        },
-        data  : [
-            {
-                'name' : 'Monday',
-                'value': 221
-            },
-            {
-                'name' : 'Tuesday',
-                'value': 428
-            },
-            {
-                'name' : 'Wednesday',
-                'value': 492
-            },
-            {
-                'name' : 'Thursday',
-                'value': 471
-            },
-            {
-                'name' : 'Friday',
-                'value': 413
-            },
-            {
-                'name' : 'Saturday',
-                'value': 344
-            },
-            {
-                'name' : 'Sunday',
-                'value': 294
-            }
-        ]
-    };
-
-    // Card 26
-    card26 = {
-        scheme: {
-            domain: ['#5c84f1']
-        },
-        data  : [
-            {
-                'name'  : 'Impressions',
-                'series': [
-                    {
-                        'name' : 'Jan 1',
-                        'value': 670000
-                    },
-                    {
-                        'name' : 'Jan 2',
-                        'value': 540000
-                    },
-                    {
-                        'name' : 'Jan 3',
-                        'value': 820000
-                    },
-                    {
-                        'name' : 'Jan 4',
-                        'value': 570000
-                    },
-                    {
-                        'name' : 'Jan 5',
-                        'value': 720000
-                    },
-                    {
-                        'name' : 'Jan 6',
-                        'value': 570000
-                    },
-                    {
-                        'name' : 'Jan 7',
-                        'value': 870000
-                    },
-                    {
-                        'name' : 'Jan 8',
-                        'value': 720000
-                    },
-                    {
-                        'name' : 'Jan 9',
-                        'value': 890000
-                    },
-                    {
-                        'name' : 'Jan 10',
-                        'value': 987000
-                    },
-                    {
-                        'name' : 'Jan 11',
-                        'value': 1120000
-                    },
-                    {
-                        'name' : 'Jan 12',
-                        'value': 1360000
-                    },
-                    {
-                        'name' : 'Jan 13',
-                        'value': 1100000
-                    },
-                    {
-                        'name' : 'Jan 14',
-                        'value': 1490000
-                    },
-                    {
-                        'name' : 'Jan 15',
-                        'value': 980000
-                    }
-                ]
-            }
-        ],
-        curve         : shape.curveBasis
-    };
 
     constructor()
     {
+        // Set the defaults
+        this.view = 'preview';
+
+        this.card9Expanded = false;
+        this.card10Expanded = false;
+        this.card19 = {
+            scheme: {
+                domain: ['#5c84f1']
+            },
+            data  : [
+                {
+                    'name'  : 'GOOG',
+                    'series': [
+                        {
+                            'name' : 'Jan 1',
+                            'value': 540.2
+                        },
+                        {
+                            'name' : 'Jan 2',
+                            'value': 539.4
+                        },
+                        {
+                            'name' : 'Jan 3',
+                            'value': 538.9
+                        },
+                        {
+                            'name' : 'Jan 4',
+                            'value': 539.6
+                        },
+                        {
+                            'name' : 'Jan 5',
+                            'value': 540
+                        },
+                        {
+                            'name' : 'Jan 6',
+                            'value': 540.2
+                        },
+                        {
+                            'name' : 'Jan 7',
+                            'value': 540.48
+                        }
+                    ]
+                }
+            ],
+            curve         : shape.curveBasis
+        };
+
+        this.card24 = {
+            scheme : {
+                domain: ['#4867d2', '#5c84f1', '#89a9f4']
+            },
+            devices: [
+                {
+                    'name'  : 'Desktop',
+                    'value' : 92.8,
+                    'change': -0.6
+                },
+                {
+                    'name'  : 'Mobile',
+                    'value' : 6.1,
+                    'change': 0.7
+                },
+                {
+                    'name'  : 'Tablet',
+                    'value' : 1.1,
+                    'change': 0.1
+                }
+            ]
+        };
+
+        this.card25 = {
+            scheme: {
+                domain: ['#5c84f1']
+            },
+            data  : [
+                {
+                    'name' : 'Monday',
+                    'value': 221
+                },
+                {
+                    'name' : 'Tuesday',
+                    'value': 428
+                },
+                {
+                    'name' : 'Wednesday',
+                    'value': 492
+                },
+                {
+                    'name' : 'Thursday',
+                    'value': 471
+                },
+                {
+                    'name' : 'Friday',
+                    'value': 413
+                },
+                {
+                    'name' : 'Saturday',
+                    'value': 344
+                },
+                {
+                    'name' : 'Sunday',
+                    'value': 294
+                }
+            ]
+        };
+
+        this.card26 = {
+            scheme: {
+                domain: ['#5c84f1']
+            },
+            data  : [
+                {
+                    'name'  : 'Impressions',
+                    'series': [
+                        {
+                            'name' : 'Jan 1',
+                            'value': 670000
+                        },
+                        {
+                            'name' : 'Jan 2',
+                            'value': 540000
+                        },
+                        {
+                            'name' : 'Jan 3',
+                            'value': 820000
+                        },
+                        {
+                            'name' : 'Jan 4',
+                            'value': 570000
+                        },
+                        {
+                            'name' : 'Jan 5',
+                            'value': 720000
+                        },
+                        {
+                            'name' : 'Jan 6',
+                            'value': 570000
+                        },
+                        {
+                            'name' : 'Jan 7',
+                            'value': 870000
+                        },
+                        {
+                            'name' : 'Jan 8',
+                            'value': 720000
+                        },
+                        {
+                            'name' : 'Jan 9',
+                            'value': 890000
+                        },
+                        {
+                            'name' : 'Jan 10',
+                            'value': 987000
+                        },
+                        {
+                            'name' : 'Jan 11',
+                            'value': 1120000
+                        },
+                        {
+                            'name' : 'Jan 12',
+                            'value': 1360000
+                        },
+                        {
+                            'name' : 'Jan 13',
+                            'value': 1100000
+                        },
+                        {
+                            'name' : 'Jan 14',
+                            'value': 1490000
+                        },
+                        {
+                            'name' : 'Jan 15',
+                            'value': 980000
+                        }
+                    ]
+                }
+            ],
+            curve         : shape.curveBasis
+        };
 
     }
 
-    toggleView()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle the view
+     */
+    toggleView(): void
     {
         if ( this.view === 'preview' )
         {

src/app/main/components/components.module.ts

@@ -4,73 +4,74 @@ import { MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModu
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 import { FuseSharedModule } from '@fuse/shared.module';
+
 import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components';
-import { FuseCardsDocsComponent } from 'app/main/components/cards/cards.component';
+import { CardsDocsComponent } from 'app/main/components/cards/cards.component';
-import { FuseCountdownDocsComponent } from 'app/main/components/countdown/countdown.component';
+import { CountdownDocsComponent } from 'app/main/components/countdown/countdown.component';
-import { FuseHighlightDocsComponent } from 'app/main/components/highlight/highlight.component';
+import { HighlightDocsComponent } from 'app/main/components/highlight/highlight.component';
-import { FuseMaterialColorPickerDocsComponent } from 'app/main/components/material-color-picker/material-color-picker.component';
+import { MaterialColorPickerDocsComponent } from 'app/main/components/material-color-picker/material-color-picker.component';
-import { FuseMultiLanguageDocsComponent } from 'app/main/components/multi-language/multi-language.component';
+import { MultiLanguageDocsComponent } from 'app/main/components/multi-language/multi-language.component';
-import { FuseNavigationDocsComponent } from 'app/main/components/navigation/navigation.component';
+import { NavigationDocsComponent } from 'app/main/components/navigation/navigation.component';
-import { FuseSearchBarDocsComponent } from 'app/main/components/search-bar/search-bar.component';
+import { SearchBarDocsComponent } from 'app/main/components/search-bar/search-bar.component';
-import { FuseSidebarDocsComponent } from 'app/main/components/sidebar/sidebar.component';
+import { SidebarDocsComponent } from 'app/main/components/sidebar/sidebar.component';
-import { FuseShortcutsDocsComponent } from 'app/main/components/shortcuts/shortcuts.component';
+import { ShortcutsDocsComponent } from 'app/main/components/shortcuts/shortcuts.component';
-import { FuseWidgetDocsComponent } from 'app/main/components/widget/widget.component';
+import { WidgetDocsComponent } from 'app/main/components/widget/widget.component';
 
 const routes = [
     {
         path     : 'cards',
-        component: FuseCardsDocsComponent
+        component: CardsDocsComponent
     },
     {
         path     : 'countdown',
-        component: FuseCountdownDocsComponent
+        component: CountdownDocsComponent
     },
     {
         path     : 'highlight',
-        component: FuseHighlightDocsComponent
+        component: HighlightDocsComponent
     },
     {
         path     : 'material-color-picker',
-        component: FuseMaterialColorPickerDocsComponent
+        component: MaterialColorPickerDocsComponent
     },
     {
         path     : 'multi-language',
-        component: FuseMultiLanguageDocsComponent
+        component: MultiLanguageDocsComponent
     },
     {
         path     : 'navigation',
-        component: FuseNavigationDocsComponent
+        component: NavigationDocsComponent
     },
     {
         path     : 'search-bar',
-        component: FuseSearchBarDocsComponent
+        component: SearchBarDocsComponent
     },
     {
         path     : 'sidebar',
-        component: FuseSidebarDocsComponent
+        component: SidebarDocsComponent
     },
     {
         path     : 'shortcuts',
-        component: FuseShortcutsDocsComponent
+        component: ShortcutsDocsComponent
     },
     {
         path     : 'widget',
-        component: FuseWidgetDocsComponent
+        component: WidgetDocsComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        FuseCardsDocsComponent,
+        CardsDocsComponent,
-        FuseCountdownDocsComponent,
+        CountdownDocsComponent,
-        FuseHighlightDocsComponent,
+        HighlightDocsComponent,
-        FuseMaterialColorPickerDocsComponent,
+        MaterialColorPickerDocsComponent,
-        FuseMultiLanguageDocsComponent,
+        MultiLanguageDocsComponent,
-        FuseNavigationDocsComponent,
+        NavigationDocsComponent,
-        FuseSearchBarDocsComponent,
+        SearchBarDocsComponent,
-        FuseSidebarDocsComponent,
+        SidebarDocsComponent,
-        FuseShortcutsDocsComponent,
+        ShortcutsDocsComponent,
-        FuseWidgetDocsComponent
+        WidgetDocsComponent
     ],
     imports     : [
         RouterModule.forChild(routes),
@@ -88,6 +89,7 @@ const routes = [
         NgxChartsModule,
 
         FuseSharedModule,
+
         FuseCountdownModule,
         FuseHighlightModule,
         FuseMaterialColorPickerModule,

src/app/main/components/countdown/countdown.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-countdown-docs',
+    selector   : 'countdown-docs',
     templateUrl: './countdown.component.html',
     styleUrls  : ['./countdown.component.scss']
 })
-export class FuseCountdownDocsComponent
+export class CountdownDocsComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/components/highlight/highlight.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-highlight-docs',
+    selector   : 'highlight-docs',
     templateUrl: './highlight.component.html',
     styleUrls  : ['./highlight.component.scss']
 })
-export class FuseHighlightDocsComponent
+export class HighlightDocsComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/components/material-color-picker/material-color-picker.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-material-color-picker-docs',
+    selector   : 'material-color-picker-docs',
     templateUrl: './material-color-picker.component.html',
     styleUrls  : ['./material-color-picker.component.scss']
 })
-export class FuseMaterialColorPickerDocsComponent
+export class MaterialColorPickerDocsComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/components/multi-language/multi-language.component.html

@@ -86,7 +86,7 @@
                         import { locale as turkish } from './i18n/tr';
 
                         @Component({
-                            selector   : 'fuse-mail',
+                            selector   : 'mail',
                             templateUrl: './mail.component.html',
                             styleUrls  : ['./mail.component.scss']
                         })

src/app/main/components/multi-language/multi-language.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-multi-language-docs',
+    selector   : 'multi-language-docs',
     templateUrl: './multi-language.component.html',
     styleUrls  : ['./multi-language.component.scss']
 })
-export class FuseMultiLanguageDocsComponent
+export class MultiLanguageDocsComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/components/navigation/navigation.component.ts

@@ -3,21 +3,33 @@ import { Component } from '@angular/core';
 import { navigation } from 'app/navigation/navigation';
 
 @Component({
-    selector   : 'fuse-navigation-docs',
+    selector   : 'navigation-docs',
     templateUrl: './navigation.component.html',
     styleUrls  : ['./navigation.component.scss']
 })
-export class FuseNavigationDocsComponent
+export class NavigationDocsComponent
 {
     navigation: any;
-    hidden = false;
+    hidden: boolean;
 
+    /**
+     * Constructor
+     */
     constructor()
     {
+        // Set the defaults
         this.navigation = navigation;
+        this.hidden = false;
     }
 
-    showHideCalendarMenuItem()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Show/hide calendar menu item
+     */
+    showHideCalendarMenuItem(): void
     {
         // Get the calendar item from the navigation
         const calendarNavItem = this.navigation[0].children[1];
@@ -27,7 +39,10 @@ export class FuseNavigationDocsComponent
         calendarNavItem.hidden = this.hidden;
     }
 
-    updateMailBadge()
+    /**
+     * Update mail badge
+     */
+    updateMailBadge(): void
     {
         // Get the mail nav item
         const mailNavItem = this.navigation[0].children[4];
@@ -36,7 +51,10 @@ export class FuseNavigationDocsComponent
         mailNavItem.badge.title = 35;
     }
 
-    addSubitemToCalendar()
+    /**
+     * Add subitem to the calendar
+     */
+    addSubitemToCalendar(): void
     {
         // Prepare the new nav item
         const newNavItem = {
@@ -59,7 +77,10 @@ export class FuseNavigationDocsComponent
         calendarNavItem.children.push(newNavItem);
     }
 
-    addNavItemWithCustomFunction()
+    /**
+     * Add a nav item with custom function
+     */
+    addNavItemWithCustomFunction(): void
     {
         // Prepare the new nav item
         const newNavItem = {

src/app/main/components/search-bar/search-bar.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-search-bar-docs',
+    selector   : 'search-bar-docs',
     templateUrl: './search-bar.component.html',
     styleUrls  : ['./search-bar.component.scss']
 })
-export class FuseSearchBarDocsComponent
+export class SearchBarDocsComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/components/shortcuts/shortcuts.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-shortcuts-docs',
+    selector   : 'shortcuts-docs',
     templateUrl: './shortcuts.component.html',
     styleUrls  : ['./shortcuts.component.scss']
 })
-export class FuseShortcutsDocsComponent
+export class ShortcutsDocsComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/components/sidebar/sidebar.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-sidebar-docs',
+    selector   : 'sidebar-docs',
     templateUrl: './sidebar.component.html',
     styleUrls  : ['./sidebar.component.scss']
 })
-export class FuseSidebarDocsComponent
+export class SidebarDocsComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/components/widget/widget.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-widget-docs',
+    selector   : 'widget-docs',
     templateUrl: './widget.component.html',
     styleUrls  : ['./widget.component.scss']
 })
-export class FuseWidgetDocsComponent
+export class WidgetDocsComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts

@@ -4,7 +4,7 @@ import { FuseConfigService } from '@fuse/services/config.service';
 import { fuseAnimations } from '@fuse/animations';
 
 @Component({
-    selector   : 'fuse-mail-confirm',
+    selector   : 'mail-confirm',
     templateUrl: './mail-confirm.component.html',
     styleUrls  : ['./mail-confirm.component.scss'],
     animations : fuseAnimations

src/app/main/pages/errors/404/error-404.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { FuseConfigService } from '@fuse/services/config.service';
 
 @Component({
-    selector   : 'fuse-error-404',
+    selector   : 'error-404',
     templateUrl: './error-404.component.html',
     styleUrls  : ['./error-404.component.scss']
 })

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

@@ -27,7 +27,7 @@
         <mat-tab-group dynamicHeight="true">
 
             <mat-tab label="Timeline">
-                <fuse-profile-timeline></fuse-profile-timeline>
+                <profile-timeline></profile-timeline>
             </mat-tab>
 
             <mat-tab label="About">

src/app/main/pages/profile/profile.module.ts

@@ -6,7 +6,7 @@ import { FuseSharedModule } from '@fuse/shared.module';
 
 import { ProfileService } from 'app/main/pages/profile/profile.service';
 import { ProfileComponent } from 'app/main/pages/profile/profile.component';
-import { FuseProfileTimelineComponent } from 'app/main/pages/profile/tabs/timeline/timeline.component';
+import { ProfileTimelineComponent } from 'app/main/pages/profile/tabs/timeline/timeline.component';
 import { ProfileAboutComponent } from 'app/main/pages/profile/tabs/about/about.component';
 import { ProfilePhotosVideosComponent } from 'app/main/pages/profile/tabs/photos-videos/photos-videos.component';
 
@@ -24,7 +24,7 @@ const routes = [
 @NgModule({
     declarations: [
         ProfileComponent,
-        FuseProfileTimelineComponent,
+        ProfileTimelineComponent,
         ProfileAboutComponent,
         ProfilePhotosVideosComponent
     ],

src/app/main/pages/profile/tabs/timeline/timeline.component.ts

@@ -7,12 +7,12 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    selector   : 'fuse-profile-timeline',
+    selector   : 'profile-timeline',
     templateUrl: './timeline.component.html',
     styleUrls  : ['./timeline.component.scss'],
     animations : fuseAnimations
 })
-export class FuseProfileTimelineComponent implements OnInit, OnDestroy
+export class ProfileTimelineComponent implements OnInit, OnDestroy
 {
     timeline: any;
 

src/app/main/services/config/config.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-config-service-docs',
+    selector   : 'config-service-docs',
     templateUrl: './config.component.html',
     styleUrls  : ['./config.component.scss']
 })
-export class FuseConfigServiceDocsComponent
+export class ConfigServiceDocsComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/services/services.module.ts

@@ -5,24 +5,24 @@ import { MatIconModule } from '@angular/material';
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseHighlightModule } from '@fuse/components';
 
-import { FuseConfigServiceDocsComponent } from 'app/main/services/config/config.component';
+import { ConfigServiceDocsComponent } from 'app/main/services/config/config.component';
-import { FuseSplashScreenServiceDocsComponent } from 'app/main/services/splash-screen/splash-screen.component';
+import { SplashScreenServiceDocsComponent } from 'app/main/services/splash-screen/splash-screen.component';
 
 const routes = [
     {
         path     : 'config',
-        component: FuseConfigServiceDocsComponent
+        component: ConfigServiceDocsComponent
     },
     {
         path     : 'splash-screen',
-        component: FuseSplashScreenServiceDocsComponent
+        component: SplashScreenServiceDocsComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        FuseConfigServiceDocsComponent,
+        ConfigServiceDocsComponent,
-        FuseSplashScreenServiceDocsComponent
+        SplashScreenServiceDocsComponent
     ],
     imports     : [
         RouterModule.forChild(routes),

src/app/main/services/splash-screen/splash-screen.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-splash-screen-service-docs',
+    selector   : 'splash-screen-service-docs',
     templateUrl: './splash-screen.component.html',
     styleUrls  : ['./splash-screen.component.scss']
 })
-export class FuseSplashScreenServiceDocsComponent
+export class SplashScreenServiceDocsComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/ui/colors/colors.component.ts

@@ -3,28 +3,47 @@ import { Component, OnInit } from '@angular/core';
 import { MatColors } from '@fuse/mat-colors';
 
 @Component({
-    selector   : 'fuse-colors',
+    selector   : 'colors',
     templateUrl: './colors.component.html',
     styleUrls  : ['./colors.component.scss']
 })
-export class FuseColorsComponent
+export class ColorsComponent
 {
     colors: {};
     selectedColor: string;
     selectedColorDefaultValue: string;
 
+    /**
+     * Constructor
+     */
     constructor()
     {
+        // Set the defaults
         this.colors = MatColors.all;
-        this.updateSelectedColor('primary');
+        this._updateSelectedColor('primary');
     }
 
-    selectColor(selected)
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Select color
+     *
+     * @param selected
+     */
+    selectColor(selected): void
     {
-        this.updateSelectedColor(selected.tab.textLabel);
+        this._updateSelectedColor(selected.tab.textLabel);
     }
 
-    private updateSelectedColor(colorName)
+    /**
+     * Update selected color
+     *
+     * @param colorName
+     * @private
+     */
+    private _updateSelectedColor(colorName): void
     {
         this.selectedColor = colorName;
         this.selectedColorDefaultValue = MatColors.getColor(this.selectedColor)[500];

src/app/main/ui/colors/colors.module.ts

@@ -1,23 +1,22 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-
 import { MatButtonModule, MatIconModule, MatTabsModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseDemoModule } from '@fuse/components/demo/demo.module';
 
-import { FuseColorsComponent } from './colors.component';
+import { ColorsComponent } from 'app/main/ui/colors/colors.component';
 
 const routes: Routes = [
     {
         path     : 'colors',
-        component: FuseColorsComponent
+        component: ColorsComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        FuseColorsComponent
+        ColorsComponent
     ],
     imports     : [
         RouterModule.forChild(routes),

src/app/main/ui/forms/forms.component.ts

@@ -1,12 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    selector   : 'fuse-forms',
+    selector   : 'forms',
     templateUrl: './forms.component.html',
     styleUrls  : ['./forms.component.scss']
 })
-export class FuseFormsComponent implements OnInit
+export class FormsComponent implements OnInit, OnDestroy
 {
     form: FormGroup;
     formErrors: any;
@@ -27,7 +29,17 @@ export class FuseFormsComponent implements OnInit
     verticalStepperStep2Errors: any;
     verticalStepperStep3Errors: any;
 
-    constructor(private formBuilder: FormBuilder)
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FormBuilder} _formBuilder
+     */
+    constructor(
+        private _formBuilder: FormBuilder
+    )
     {
         // Reactive form errors
         this.formErrors = {
@@ -73,12 +85,22 @@ export class FuseFormsComponent implements OnInit
             state     : {},
             postalCode: {}
         };
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
     }
 
-    ngOnInit()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
     {
         // Reactive Form
-        this.form = this.formBuilder.group({
+        this.form = this._formBuilder.group({
             company   : [
                 {
                     value   : 'Google',
@@ -95,68 +117,99 @@ export class FuseFormsComponent implements OnInit
             country   : ['', Validators.required]
         });
 
-        this.form.valueChanges.subscribe(() => {
+        this.form.valueChanges
-            this.onFormValuesChanged();
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe(() => {
+                this.onFormValuesChanged();
+            });
 
         // Horizontal Stepper form steps
-        this.horizontalStepperStep1 = this.formBuilder.group({
+        this.horizontalStepperStep1 = this._formBuilder.group({
             firstName: ['', Validators.required],
             lastName : ['', Validators.required]
         });
 
-        this.horizontalStepperStep2 = this.formBuilder.group({
+        this.horizontalStepperStep2 = this._formBuilder.group({
             address: ['', Validators.required]
         });
 
-        this.horizontalStepperStep3 = this.formBuilder.group({
+        this.horizontalStepperStep3 = this._formBuilder.group({
             city      : ['', Validators.required],
             state     : ['', Validators.required],
             postalCode: ['', [Validators.required, Validators.maxLength(5)]]
         });
 
-        this.horizontalStepperStep1.valueChanges.subscribe(() => {
+        this.horizontalStepperStep1.valueChanges
-            this.onFormValuesChanged();
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe(() => {
+                this.onFormValuesChanged();
+            });
 
-        this.horizontalStepperStep2.valueChanges.subscribe(() => {
+        this.horizontalStepperStep2.valueChanges
-            this.onFormValuesChanged();
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe(() => {
+                this.onFormValuesChanged();
+            });
 
-        this.horizontalStepperStep3.valueChanges.subscribe(() => {
+        this.horizontalStepperStep3.valueChanges
-            this.onFormValuesChanged();
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe(() => {
+                this.onFormValuesChanged();
+            });
 
         // Vertical Stepper form stepper
-        this.verticalStepperStep1 = this.formBuilder.group({
+        this.verticalStepperStep1 = this._formBuilder.group({
             firstName: ['', Validators.required],
             lastName : ['', Validators.required]
         });
 
-        this.verticalStepperStep2 = this.formBuilder.group({
+        this.verticalStepperStep2 = this._formBuilder.group({
             address: ['', Validators.required]
         });
 
-        this.verticalStepperStep3 = this.formBuilder.group({
+        this.verticalStepperStep3 = this._formBuilder.group({
             city      : ['', Validators.required],
             state     : ['', Validators.required],
             postalCode: ['', [Validators.required, Validators.maxLength(5)]]
         });
 
-        this.verticalStepperStep1.valueChanges.subscribe(() => {
+        this.verticalStepperStep1.valueChanges
-            this.onFormValuesChanged();
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe(() => {
+                this.onFormValuesChanged();
+            });
 
-        this.verticalStepperStep2.valueChanges.subscribe(() => {
+        this.verticalStepperStep2.valueChanges
-            this.onFormValuesChanged();
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe(() => {
+                this.onFormValuesChanged();
+            });
 
-        this.verticalStepperStep3.valueChanges.subscribe(() => {
+        this.verticalStepperStep3.valueChanges
-            this.onFormValuesChanged();
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe(() => {
+                this.onFormValuesChanged();
+            });
     }
 
-    onFormValuesChanged()
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On form values changed
+     */
+    onFormValuesChanged(): void
     {
         for ( const field in this.formErrors )
         {
@@ -178,12 +231,18 @@ export class FuseFormsComponent implements OnInit
         }
     }
 
-    finishHorizontalStepper()
+    /**
+     * Finish the horizontal stepper
+     */
+    finishHorizontalStepper(): void
     {
         alert('You have finished the horizontal stepper!');
     }
 
-    finishVerticalStepper()
+    /**
+     * Finish the vertical stepper
+     */
+    finishVerticalStepper(): void
     {
         alert('You have finished the vertical stepper!');
     }

src/app/main/ui/forms/forms.module.ts

@@ -1,22 +1,21 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-
 import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatStepperModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { FuseFormsComponent } from './forms.component';
+import { FormsComponent } from 'app/main/ui/forms/forms.component';
 
 const routes: Routes = [
     {
         path     : 'forms',
-        component: FuseFormsComponent
+        component: FormsComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        FuseFormsComponent
+        FormsComponent
     ],
     imports     : [
         RouterModule.forChild(routes),

src/app/main/ui/helper-classes/helper-classes.component.html

@@ -20,13 +20,13 @@
 
             <mat-tab label="Padding & Margin Helpers">
 
-                <fuse-helper-classes-padding-margin></fuse-helper-classes-padding-margin>
+                <helper-classes-padding-margin></helper-classes-padding-margin>
 
             </mat-tab>
 
             <mat-tab label="Width & Height Helpers">
 
-                <fuse-helper-classes-width-height></fuse-helper-classes-width-height>
+                <helper-classes-width-height></helper-classes-width-height>
 
             </mat-tab>
 

src/app/main/ui/helper-classes/helper-classes.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-helper-classes',
+    selector   : 'helper-classes',
     templateUrl: './helper-classes.component.html',
     styleUrls  : ['./helper-classes.component.scss']
 })
-export class FuseHelperClassesComponent
+export class HelperClassesComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/helper-classes/helper-classes.module.ts

@@ -1,27 +1,26 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-
 import { MatIconModule, MatTabsModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseHighlightModule } from '@fuse/components';
 
-import { FuseHelperClassesComponent } from './helper-classes.component';
+import { HelperClassesComponent } from 'app/main/ui/helper-classes/helper-classes.component';
-import { FuseHelperClassesPaddingMarginComponent } from './tabs/padding-margin/padding-margin.component';
+import { HelperClassesPaddingMarginComponent } from 'app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component';
-import { FuseHelperClassesWidthHeightComponent } from './tabs/width-height/width-height.component';
+import { HelperClassesWidthHeightComponent } from 'app/main/ui/helper-classes/tabs/width-height/width-height.component';
 
 const routes: Routes = [
     {
         path     : 'helper-classes',
-        component: FuseHelperClassesComponent
+        component: HelperClassesComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        FuseHelperClassesComponent,
+        HelperClassesComponent,
-        FuseHelperClassesPaddingMarginComponent,
+        HelperClassesPaddingMarginComponent,
-        FuseHelperClassesWidthHeightComponent
+        HelperClassesWidthHeightComponent
     ],
     imports     : [
         RouterModule.forChild(routes),

src/app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts

@@ -1,13 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-helper-classes-padding-margin',
+    selector   : 'helper-classes-padding-margin',
     templateUrl: './padding-margin.component.html',
     styleUrls  : ['./padding-margin.component.scss']
 })
-export class FuseHelperClassesPaddingMarginComponent
+export class HelperClassesPaddingMarginComponent
 {
-
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/ui/helper-classes/tabs/width-height/width-height.component.ts

@@ -1,13 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-helper-classes-width-height',
+    selector   : 'helper-classes-width-height',
     templateUrl: './width-height.component.html',
     styleUrls  : ['./width-height.component.scss']
 })
-export class FuseHelperClassesWidthHeightComponent
+export class HelperClassesWidthHeightComponent
 {
-
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/ui/icons/icons.component.ts

@@ -1,24 +1,49 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
-    selector   : 'fuse-icons',
+    selector   : 'icons',
     templateUrl: './icons.component.html',
     styleUrls  : ['./icons.component.scss']
 })
-export class FuseIconsComponent implements OnInit
+export class IconsComponent implements OnInit, OnDestroy
 {
     icons: string[];
     filteredIcons: string[];
-    loading = true;
+    loading: boolean;
 
-    constructor(private http: HttpClient)
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {HttpClient} _httpClient
+     */
+    constructor(
+        private _httpClient: HttpClient
+    )
     {
+        // Set the defaults
+        this.loading = true;
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
     }
 
-    ngOnInit()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
     {
-        this.http.get('api/icons')
+        this._httpClient.get('api/icons')
+            .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((icons: any) => {
                 this.icons = icons;
                 this.filteredIcons = this.icons;
@@ -26,7 +51,26 @@ export class FuseIconsComponent implements OnInit
             });
     }
 
-    filterIcons(event)
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Filter icons
+     *
+     * @param event
+     */
+    filterIcons(event): void
     {
         const value = event.target.value;
 

src/app/main/ui/icons/icons.module.ts

@@ -1,22 +1,21 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-
 import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatProgressSpinnerModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { FuseIconsComponent } from './icons.component';
+import { IconsComponent } from 'app/main/ui/icons/icons.component';
 
 const routes: Routes = [
     {
         path     : 'icons',
-        component: FuseIconsComponent
+        component: IconsComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        FuseIconsComponent
+        IconsComponent
     ],
     imports     : [
         RouterModule.forChild(routes),

src/app/main/ui/page-layouts/blank/blank.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-blank',
+    selector   : 'blank',
     templateUrl: './blank.component.html',
     styleUrls  : ['./blank.component.scss']
 })
-export class FuseBlankComponent
+export class BlankComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-carded-fullwidth-2',
+    selector   : 'carded-fullwidth-2',
     templateUrl: './fullwidth-2.component.html',
     styleUrls  : ['./fullwidth-2.component.scss']
 })
-export class FuseCardedFullWidth2Component
+export class CardedFullWidth2Component
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-carded-fullwidth',
+    selector   : 'carded-fullwidth',
     templateUrl: './fullwidth.component.html',
     styleUrls  : ['./fullwidth.component.scss']
 })
-export class FuseCardedFullWidthComponent
+export class CardedFullWidthComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-carded-left-sidenav-2-tabbed',
+    selector   : 'carded-left-sidenav-2-tabbed',
     templateUrl: './left-sidenav-2-tabbed.component.html',
     styleUrls  : ['./left-sidenav-2-tabbed.component.scss']
 })
-export class FuseCardedLeftSidenav2TabbedComponent
+export class CardedLeftSidenav2TabbedComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-carded-left-sidenav-2',
+    selector   : 'carded-left-sidenav-2',
     templateUrl: './left-sidenav-2.component.html',
     styleUrls  : ['./left-sidenav-2.component.scss']
 })
-export class FuseCardedLeftSidenav2Component
+export class CardedLeftSidenav2Component
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-carded-left-sidenav-tabbed',
+    selector   : 'carded-left-sidenav-tabbed',
     templateUrl: './left-sidenav-tabbed.component.html',
     styleUrls  : ['./left-sidenav-tabbed.component.scss']
 })
-export class FuseCardedLeftSidenavTabbedComponent
+export class CardedLeftSidenavTabbedComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-carded-left-sidenav',
+    selector   : 'carded-left-sidenav',
     templateUrl: './left-sidenav.component.html',
     styleUrls  : ['./left-sidenav.component.scss']
 })
-export class FuseCardedLeftSidenavComponent
+export class CardedLeftSidenavComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-carded-right-sidenav-2-tabbed',
+    selector   : 'carded-right-sidenav-2-tabbed',
     templateUrl: './right-sidenav-2-tabbed.component.html',
     styleUrls  : ['./right-sidenav-2-tabbed.component.scss']
 })
-export class FuseCardedRightSidenav2TabbedComponent
+export class CardedRightSidenav2TabbedComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-carded-right-sidenav-2',
+    selector   : 'carded-right-sidenav-2',
     templateUrl: './right-sidenav-2.component.html',
     styleUrls  : ['./right-sidenav-2.component.scss']
 })
-export class FuseCardedRightSidenav2Component
+export class CardedRightSidenav2Component
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-carded-right-sidenav-tabbed',
+    selector   : 'carded-right-sidenav-tabbed',
     templateUrl: './right-sidenav-tabbed.component.html',
     styleUrls  : ['./right-sidenav-tabbed.component.scss']
 })
-export class FuseCardedRightSidenavTabbedComponent
+export class CardedRightSidenavTabbedComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-carded-right-sidenav',
+    selector   : 'carded-right-sidenav',
     templateUrl: './right-sidenav.component.html',
     styleUrls  : ['./right-sidenav.component.scss']
 })
-export class FuseCardedRightSidenavComponent
+export class CardedRightSidenavComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/page-layouts.module.ts

@@ -1,131 +1,130 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-
 import { MatButtonModule, MatIconModule, MatSidenavModule, MatTabsModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseDemoModule } from '@fuse/components/demo/demo.module';
 
-import { FuseCardedFullWidthComponent } from './carded/fullwidth/fullwidth.component';
+import { CardedFullWidthComponent } from 'app/main/ui/page-layouts/carded/fullwidth/fullwidth.component';
-import { FuseCardedFullWidth2Component } from './carded/fullwidth-2/fullwidth-2.component';
+import { CardedFullWidth2Component } from 'app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component';
-import { FuseCardedLeftSidenavComponent } from './carded/left-sidenav/left-sidenav.component';
+import { CardedLeftSidenavComponent } from 'app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component';
-import { FuseCardedLeftSidenavTabbedComponent } from './carded/left-sidenav-tabbed/left-sidenav-tabbed.component';
+import { CardedLeftSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component';
-import { FuseCardedLeftSidenav2Component } from './carded/left-sidenav-2/left-sidenav-2.component';
+import { CardedLeftSidenav2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component';
-import { FuseCardedLeftSidenav2TabbedComponent } from './carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component';
+import { CardedLeftSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component';
-import { FuseCardedRightSidenavComponent } from './carded/right-sidenav/right-sidenav.component';
+import { CardedRightSidenavComponent } from 'app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component';
-import { FuseCardedRightSidenavTabbedComponent } from './carded/right-sidenav-tabbed/right-sidenav-tabbed.component';
+import { CardedRightSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component';
-import { FuseCardedRightSidenav2Component } from './carded/right-sidenav-2/right-sidenav-2.component';
+import { CardedRightSidenav2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component';
-import { FuseCardedRightSidenav2TabbedComponent } from './carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component';
+import { CardedRightSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component';
-import { FuseSimpleFullWidthComponent } from './simple/fullwidth/fullwidth.component';
+import { SimpleFullWidthComponent } from 'app/main/ui/page-layouts/simple/fullwidth/fullwidth.component';
-import { FuseSimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component';
+import { SimpleLeftSidenavComponent } from 'app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component';
-import { FuseSimpleLeftSidenav2Component } from './simple/left-sidenav-2/left-sidenav-2.component';
+import { SimpleLeftSidenav2Component } from 'app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component';
-import { FuseSimpleLeftSidenav3Component } from './simple/left-sidenav-3/left-sidenav-3.component';
+import { SimpleLeftSidenav3Component } from 'app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component';
-import { FuseSimpleRightSidenavComponent } from './simple/right-sidenav/right-sidenav.component';
+import { SimpleRightSidenavComponent } from 'app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component';
-import { FuseSimpleRightSidenav2Component } from './simple/right-sidenav-2/right-sidenav-2.component';
+import { SimpleRightSidenav2Component } from 'app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component';
-import { FuseSimpleRightSidenav3Component } from './simple/right-sidenav-3/right-sidenav-3.component';
+import { SimpleRightSidenav3Component } from 'app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component';
-import { FuseTabbedComponent } from './simple/tabbed/tabbed.component';
+import { TabbedComponent } from 'app/main/ui/page-layouts/simple/tabbed/tabbed.component';
-import { FuseBlankComponent } from './blank/blank.component';
+import { BlankComponent } from 'app/main/ui/page-layouts/blank/blank.component';
 
 const routes: Routes = [
     {
         path     : 'page-layouts/carded/full-width',
-        component: FuseCardedFullWidthComponent
+        component: CardedFullWidthComponent
     },
     {
         path     : 'page-layouts/carded/full-width-2',
-        component: FuseCardedFullWidth2Component
+        component: CardedFullWidth2Component
     },
     {
         path     : 'page-layouts/carded/left-sidenav',
-        component: FuseCardedLeftSidenavComponent
+        component: CardedLeftSidenavComponent
     },
     {
         path     : 'page-layouts/carded/left-sidenav-tabbed',
-        component: FuseCardedLeftSidenavTabbedComponent
+        component: CardedLeftSidenavTabbedComponent
     },
     {
         path     : 'page-layouts/carded/left-sidenav-2',
-        component: FuseCardedLeftSidenav2Component
+        component: CardedLeftSidenav2Component
     },
     {
         path     : 'page-layouts/carded/left-sidenav-2-tabbed',
-        component: FuseCardedLeftSidenav2TabbedComponent
+        component: CardedLeftSidenav2TabbedComponent
     },
     {
         path     : 'page-layouts/carded/right-sidenav',
-        component: FuseCardedRightSidenavComponent
+        component: CardedRightSidenavComponent
     },
     {
         path     : 'page-layouts/carded/right-sidenav-tabbed',
-        component: FuseCardedRightSidenavTabbedComponent
+        component: CardedRightSidenavTabbedComponent
     },
     {
         path     : 'page-layouts/carded/right-sidenav-2',
-        component: FuseCardedRightSidenav2Component
+        component: CardedRightSidenav2Component
     },
     {
         path     : 'page-layouts/carded/right-sidenav-2-tabbed',
-        component: FuseCardedRightSidenav2TabbedComponent
+        component: CardedRightSidenav2TabbedComponent
     },
     {
         path     : 'page-layouts/simple/full-width',
-        component: FuseSimpleFullWidthComponent
+        component: SimpleFullWidthComponent
     },
     {
         path     : 'page-layouts/simple/left-sidenav',
-        component: FuseSimpleLeftSidenavComponent
+        component: SimpleLeftSidenavComponent
     },
     {
         path     : 'page-layouts/simple/left-sidenav-2',
-        component: FuseSimpleLeftSidenav2Component
+        component: SimpleLeftSidenav2Component
     },
     {
         path     : 'page-layouts/simple/left-sidenav-3',
-        component: FuseSimpleLeftSidenav3Component
+        component: SimpleLeftSidenav3Component
     },
     {
         path     : 'page-layouts/simple/right-sidenav',
-        component: FuseSimpleRightSidenavComponent
+        component: SimpleRightSidenavComponent
     },
     {
         path     : 'page-layouts/simple/right-sidenav-2',
-        component: FuseSimpleRightSidenav2Component
+        component: SimpleRightSidenav2Component
     },
     {
         path     : 'page-layouts/simple/right-sidenav-3',
-        component: FuseSimpleRightSidenav3Component
+        component: SimpleRightSidenav3Component
     },
     {
         path     : 'page-layouts/simple/tabbed',
-        component: FuseTabbedComponent
+        component: TabbedComponent
     },
     {
         path     : 'page-layouts/blank',
-        component: FuseBlankComponent
+        component: BlankComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        FuseCardedFullWidthComponent,
+        CardedFullWidthComponent,
-        FuseCardedFullWidth2Component,
+        CardedFullWidth2Component,
-        FuseCardedLeftSidenavComponent,
+        CardedLeftSidenavComponent,
-        FuseCardedLeftSidenavTabbedComponent,
+        CardedLeftSidenavTabbedComponent,
-        FuseCardedLeftSidenav2Component,
+        CardedLeftSidenav2Component,
-        FuseCardedLeftSidenav2TabbedComponent,
+        CardedLeftSidenav2TabbedComponent,
-        FuseCardedRightSidenavComponent,
+        CardedRightSidenavComponent,
-        FuseCardedRightSidenavTabbedComponent,
+        CardedRightSidenavTabbedComponent,
-        FuseCardedRightSidenav2Component,
+        CardedRightSidenav2Component,
-        FuseCardedRightSidenav2TabbedComponent,
+        CardedRightSidenav2TabbedComponent,
-        FuseSimpleFullWidthComponent,
+        SimpleFullWidthComponent,
-        FuseSimpleLeftSidenavComponent,
+        SimpleLeftSidenavComponent,
-        FuseSimpleLeftSidenav2Component,
+        SimpleLeftSidenav2Component,
-        FuseSimpleLeftSidenav3Component,
+        SimpleLeftSidenav3Component,
-        FuseSimpleRightSidenavComponent,
+        SimpleRightSidenavComponent,
-        FuseSimpleRightSidenav2Component,
+        SimpleRightSidenav2Component,
-        FuseSimpleRightSidenav3Component,
+        SimpleRightSidenav3Component,
-        FuseTabbedComponent,
+        TabbedComponent,
-        FuseBlankComponent
+        BlankComponent
     ],
     imports     : [
         RouterModule.forChild(routes),

src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-simple-fullwidth',
+    selector   : 'simple-fullwidth',
     templateUrl: './fullwidth.component.html',
     styleUrls  : ['./fullwidth.component.scss']
 })
-export class FuseSimpleFullWidthComponent
+export class SimpleFullWidthComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-simple-left-sidenav-2',
+    selector   : 'simple-left-sidenav-2',
     templateUrl: './left-sidenav-2.component.html',
     styleUrls  : ['./left-sidenav-2.component.scss']
 })
-export class FuseSimpleLeftSidenav2Component
+export class SimpleLeftSidenav2Component
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-simple-left-sidenav-3',
+    selector   : 'simple-left-sidenav-3',
     templateUrl: './left-sidenav-3.component.html',
     styleUrls  : ['./left-sidenav-3.component.scss']
 })
-export class FuseSimpleLeftSidenav3Component
+export class SimpleLeftSidenav3Component
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-simple-left-sidenav',
+    selector   : 'simple-left-sidenav',
     templateUrl: './left-sidenav.component.html',
     styleUrls  : ['./left-sidenav.component.scss']
 })
-export class FuseSimpleLeftSidenavComponent
+export class SimpleLeftSidenavComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-simple-right-sidenav-2',
+    selector   : 'simple-right-sidenav-2',
     templateUrl: './right-sidenav-2.component.html',
     styleUrls  : ['./right-sidenav-2.component.scss']
 })
-export class FuseSimpleRightSidenav2Component
+export class SimpleRightSidenav2Component
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-simple-right-sidenav-3',
+    selector   : 'simple-right-sidenav-3',
     templateUrl: './right-sidenav-3.component.html',
     styleUrls  : ['./right-sidenav-3.component.scss']
 })
-export class FuseSimpleRightSidenav3Component
+export class SimpleRightSidenav3Component
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-simple-right-sidenav',
+    selector   : 'simple-right-sidenav',
     templateUrl: './right-sidenav.component.html',
     styleUrls  : ['./right-sidenav.component.scss']
 })
-export class FuseSimpleRightSidenavComponent
+export class SimpleRightSidenavComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-tabbed',
+    selector   : 'tabbed',
     templateUrl: './tabbed.component.html',
     styleUrls  : ['./tabbed.component.scss']
 })
-export class FuseTabbedComponent
+export class TabbedComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts

@@ -1,13 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-typography-blockquotes-lists',
+    selector   : 'typography-blockquotes-lists',
     templateUrl: './blockquotes-lists.component.html',
     styleUrls  : ['./blockquotes-lists.component.scss']
 })
-export class FuseTypographyBlockquotesListsComponent
+export class TypographyBlockquotesListsComponent
 {
-
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/ui/typography/tabs/headings/headings.component.ts

@@ -1,13 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-typography-headings',
+    selector   : 'typography-headings',
     templateUrl: './headings.component.html',
     styleUrls  : ['./headings.component.scss']
 })
-export class FuseTypographyHeadingsComponent
+export class TypographyHeadingsComponent
 {
-
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/ui/typography/tabs/helpers/helpers.component.ts

@@ -1,13 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-typography-helpers',
+    selector   : 'typography-helpers',
     templateUrl: './helpers.component.html',
     styleUrls  : ['./helpers.component.scss']
 })
-export class FuseTypographyHelpersComponent
+export class TypographyHelpersComponent
 {
-
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts

@@ -1,13 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-typography-inline-text-elements',
+    selector   : 'typography-inline-text-elements',
     templateUrl: './inline-text-elements.component.html',
     styleUrls  : ['./inline-text-elements.component.scss']
 })
-export class FuseTypographyInlineTextElementsComponent
+export class TypographyInlineTextElementsComponent
 {
-
+    /**
+     * Constructor
+     */
     constructor()
     {
 

src/app/main/ui/typography/typography.component.html

@@ -20,25 +20,25 @@
 
             <mat-tab label="Headings">
 
-                <fuse-typography-headings></fuse-typography-headings>
+                <typography-headings></typography-headings>
 
             </mat-tab>
 
             <mat-tab label="Inline Text Elements">
 
-                <fuse-typography-inline-text-elements></fuse-typography-inline-text-elements>
+                <typography-inline-text-elements></typography-inline-text-elements>
 
             </mat-tab>
 
             <mat-tab label="Blockquotes & Lists">
 
-                <fuse-typography-blockquotes-lists></fuse-typography-blockquotes-lists>
+                <typography-blockquotes-lists></typography-blockquotes-lists>
 
             </mat-tab>
 
             <mat-tab label="Helpers">
 
-                <fuse-typography-helpers></fuse-typography-helpers>
+                <typography-helpers></typography-helpers>
 
             </mat-tab>
 

src/app/main/ui/typography/typography.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-typography',
+    selector   : 'typography',
     templateUrl: './typography.component.html',
     styleUrls  : ['./typography.component.scss']
 })
-export class FuseTypographyComponent
+export class TypographyComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/app/main/ui/typography/typography.module.ts

@@ -1,31 +1,30 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-
 import { MatIconModule, MatTabsModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseHighlightModule } from '@fuse/components';
 
-import { FuseTypographyComponent } from './typography.component';
+import { TypographyComponent } from 'app/main/ui/typography/typography.component';
-import { FuseTypographyHeadingsComponent } from './tabs/headings/headings.component';
+import { TypographyHeadingsComponent } from 'app/main/ui/typography/tabs/headings/headings.component';
-import { FuseTypographyInlineTextElementsComponent } from './tabs/inline-text-elements/inline-text-elements.component';
+import { TypographyInlineTextElementsComponent } from 'app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component';
-import { FuseTypographyBlockquotesListsComponent } from './tabs/blockquotes-lists/blockquotes-lists.component';
+import { TypographyBlockquotesListsComponent } from 'app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component';
-import { FuseTypographyHelpersComponent } from './tabs/helpers/helpers.component';
+import { TypographyHelpersComponent } from 'app/main/ui/typography/tabs/helpers/helpers.component';
 
 const routes: Routes = [
     {
         path     : 'typography',
-        component: FuseTypographyComponent
+        component: TypographyComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        FuseTypographyComponent,
+        TypographyComponent,
-        FuseTypographyHeadingsComponent,
+        TypographyHeadingsComponent,
-        FuseTypographyInlineTextElementsComponent,
+        TypographyInlineTextElementsComponent,
-        FuseTypographyBlockquotesListsComponent,
+        TypographyBlockquotesListsComponent,
-        FuseTypographyHelpersComponent
+        TypographyHelpersComponent
     ],
     imports     : [
         RouterModule.forChild(routes),

src/app/main/ui/ui.module.ts

@@ -17,6 +17,6 @@ import { UIColorsModule } from 'app/main/ui/colors/colors.module';
         UIColorsModule
     ]
 })
-export class FuseUIModule
+export class UIModule
 {
 }