Merge remote-tracking branch 'origin/demo' into starter

(changelog) Updated the changelog

.nvmrc

@@ -1 +1 @@
-14
+12

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fuse/demo",
-    "version": "12.1.0",
+    "version": "12.3.0",
     "license": "https://themeforest.net/licenses/standard",
     "private": true,
     "scripts": {
@@ -12,17 +12,17 @@
         "e2e": "ng e2e"
     },
     "dependencies": {
-        "@angular/animations": "11.2.11",
-        "@angular/cdk": "11.2.10",
-        "@angular/common": "11.2.11",
-        "@angular/compiler": "11.2.11",
-        "@angular/core": "11.2.11",
-        "@angular/forms": "11.2.11",
-        "@angular/material": "11.2.10",
-        "@angular/material-moment-adapter": "11.2.10",
-        "@angular/platform-browser": "11.2.11",
-        "@angular/platform-browser-dynamic": "11.2.11",
-        "@angular/router": "11.2.11",
+        "@angular/animations": "11.2.12",
+        "@angular/cdk": "11.2.11",
+        "@angular/common": "11.2.12",
+        "@angular/compiler": "11.2.12",
+        "@angular/core": "11.2.12",
+        "@angular/forms": "11.2.12",
+        "@angular/material": "11.2.11",
+        "@angular/material-moment-adapter": "11.2.11",
+        "@angular/platform-browser": "11.2.12",
+        "@angular/platform-browser-dynamic": "11.2.12",
+        "@angular/router": "11.2.12",
         "@fullcalendar/angular": "4.4.5-beta",
         "@fullcalendar/core": "4.4.2",
         "@fullcalendar/daygrid": "4.4.2",
@@ -38,7 +38,7 @@
         "moment": "2.29.1",
         "ng-apexcharts": "1.5.9",
         "ngx-markdown": "11.1.3",
-        "ngx-quill": "13.2.0",
+        "ngx-quill": "13.3.1",
         "perfect-scrollbar": "1.5.0",
         "quill": "1.3.7",
         "rrule": "2.6.8",
@@ -48,10 +48,10 @@
         "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "0.1102.10",
-        "@angular/cli": "11.2.10",
-        "@angular/compiler-cli": "11.2.11",
-        "@angular/language-service": "11.2.11",
+        "@angular-devkit/build-angular": "0.1102.11",
+        "@angular/cli": "11.2.11",
+        "@angular/compiler-cli": "11.2.12",
+        "@angular/language-service": "11.2.12",
         "@tailwindcss/aspect-ratio": "0.2.0",
         "@tailwindcss/line-clamp": "0.2.0",
         "@tailwindcss/typography": "0.4.0",
@@ -73,7 +73,7 @@
         "karma-jasmine": "4.0.1",
         "karma-jasmine-html-reporter": "1.5.4",
         "lodash": "4.17.21",
-        "postcss": "8.2.12",
+        "postcss": "8.2.13",
         "protractor": "7.0.0",
         "tailwindcss": "2.1.2",
         "ts-node": "8.3.0",

src/@fuse/components/fullscreen/fullscreen.component.html

@@ -0,0 +1,7 @@
+<!-- Button -->
+<button
+    mat-icon-button
+    [matTooltip]="'Toggle Fullscreen'"
+    (click)="toggleFullscreen()">
+    <mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
+</button>

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

@@ -0,0 +1,164 @@
+import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
+
+@Component({
+    selector       : 'fuse-fullscreen',
+    templateUrl    : './fullscreen.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    exportAs       : 'fuseFullscreen'
+})
+export class FuseFullscreenComponent implements OnInit
+{
+    private _fsDoc: FSDocument;
+    private _fsDocEl: FSDocumentElement;
+    private _isFullscreen: boolean = false;
+
+    /**
+     * Constructor
+     */
+    constructor(@Inject(DOCUMENT) private _document: Document)
+    {
+        this._fsDoc = _document as FSDocument;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        this._fsDocEl = document.documentElement as FSDocumentElement;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle the fullscreen mode
+     */
+    toggleFullscreen(): void
+    {
+        // Check if the fullscreen is open
+        this._isFullscreen = this._getBrowserFullscreenElement() !== null;
+
+        // Toggle the fullscreen
+        if ( this._isFullscreen )
+        {
+            this._closeFullscreen();
+        }
+        else
+        {
+            this._openFullscreen();
+        }
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get browser's fullscreen element
+     *
+     * @private
+     */
+    private _getBrowserFullscreenElement(): Element
+    {
+        if ( typeof this._fsDoc.fullscreenElement !== 'undefined' )
+        {
+            return this._fsDoc.fullscreenElement;
+        }
+
+        if ( typeof this._fsDoc.mozFullScreenElement !== 'undefined' )
+        {
+            return this._fsDoc.mozFullScreenElement;
+        }
+
+        if ( typeof this._fsDoc.msFullscreenElement !== 'undefined' )
+        {
+            return this._fsDoc.msFullscreenElement;
+        }
+
+        if ( typeof this._fsDoc.webkitFullscreenElement !== 'undefined' )
+        {
+            return this._fsDoc.webkitFullscreenElement;
+        }
+
+        throw new Error('Fullscreen mode is not supported by this browser');
+    }
+
+    /**
+     * Open the fullscreen
+     *
+     * @private
+     */
+    private _openFullscreen(): void
+    {
+        if ( this._fsDocEl.requestFullscreen )
+        {
+            this._fsDocEl.requestFullscreen();
+            return;
+        }
+
+        // Firefox
+        if ( this._fsDocEl.mozRequestFullScreen )
+        {
+            this._fsDocEl.mozRequestFullScreen();
+            return;
+        }
+
+        // Chrome, Safari and Opera
+        if ( this._fsDocEl.webkitRequestFullscreen )
+        {
+            this._fsDocEl.webkitRequestFullscreen();
+            return;
+        }
+
+        // IE/Edge
+        if ( this._fsDocEl.msRequestFullscreen )
+        {
+            this._fsDocEl.msRequestFullscreen();
+            return;
+        }
+    }
+
+    /**
+     * Close the fullscreen
+     *
+     * @private
+     */
+    private _closeFullscreen(): void
+    {
+        if ( this._fsDoc.exitFullscreen )
+        {
+            this._fsDoc.exitFullscreen();
+            return;
+        }
+
+        // Firefox
+        if ( this._fsDoc.mozCancelFullScreen )
+        {
+            this._fsDoc.mozCancelFullScreen();
+            return;
+        }
+
+        // Chrome, Safari and Opera
+        if ( this._fsDoc.webkitExitFullscreen )
+        {
+            this._fsDoc.webkitExitFullscreen();
+            return;
+        }
+
+        // IE/Edge
+        else if ( this._fsDoc.msExitFullscreen )
+        {
+            this._fsDoc.msExitFullscreen();
+            return;
+        }
+    }
+}

src/@fuse/components/fullscreen/fullscreen.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
+
+@NgModule({
+    declarations: [
+        FuseFullscreenComponent
+    ],
+    imports     : [
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule
+    ],
+    exports     : [
+        FuseFullscreenComponent
+    ]
+})
+export class FuseFullscreenModule
+{
+}

src/@fuse/components/fullscreen/fullscreen.types.ts

@@ -0,0 +1,16 @@
+export interface FSDocument extends HTMLDocument
+{
+    mozFullScreenElement?: Element;
+    mozCancelFullScreen?: () => void;
+    msFullscreenElement?: Element;
+    msExitFullscreen?: () => void;
+    webkitFullscreenElement?: Element;
+    webkitExitFullscreen?: () => void;
+}
+
+export interface FSDocumentElement extends HTMLElement
+{
+    mozRequestFullScreen?: () => void;
+    msRequestFullscreen?: () => void;
+    webkitRequestFullscreen?: () => void;
+}

src/@fuse/components/fullscreen/index.ts

@@ -0,0 +1 @@
+export * from '@fuse/components/fullscreen/public-api';

src/@fuse/components/fullscreen/public-api.ts

@@ -0,0 +1,3 @@
+export * from '@fuse/components/fullscreen/fullscreen.component';
+export * from '@fuse/components/fullscreen/fullscreen.module';
+export * from '@fuse/components/fullscreen/fullscreen.types';

src/@fuse/components/masonry/index.ts

@@ -0,0 +1 @@
+export * from '@fuse/components/card/public-api';

src/@fuse/components/masonry/masonry.component.html

@@ -0,0 +1,3 @@
+<div class="flex">
+    <ng-container *ngTemplateOutlet="columnsTemplate; context: { $implicit: distributedColumns }"></ng-container>
+</div>

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

@@ -0,0 +1,87 @@
+import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { FuseAnimations } from '@fuse/animations';
+import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
+
+@Component({
+    selector     : 'fuse-masonry',
+    templateUrl  : './masonry.component.html',
+    styleUrls    : ['./masonry.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations   : FuseAnimations,
+    exportAs     : 'fuseMasonry'
+})
+export class FuseMasonryComponent implements OnChanges, AfterViewInit
+{
+    @Input() columnsTemplate: TemplateRef<any>;
+    @Input() columns: number;
+    @Input() items: any[] = [];
+    distributedColumns: any[] = [];
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Columns
+        if ( 'columns' in changes )
+        {
+            // Distribute the items
+            this._distributeItems();
+        }
+
+        // Items
+        if ( 'items' in changes )
+        {
+            // Distribute the items
+            this._distributeItems();
+        }
+    }
+
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        // Distribute the items for the first time
+        this._distributeItems();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Distribute items into columns
+     */
+    private _distributeItems(): void
+    {
+        // Return an empty array if there are no items
+        if ( this.items.length === 0 )
+        {
+            this.distributedColumns = [];
+            return;
+        }
+
+        // Prepare the distributed columns array
+        this.distributedColumns = Array.from(Array(this.columns), item => ({items: []}));
+
+        // Distribute the items to columns
+        for ( let i = 0; i < this.items.length; i++ )
+        {
+            this.distributedColumns[i % this.columns].items.push(this.items[i]);
+        }
+    }
+}

src/@fuse/components/masonry/masonry.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FuseMasonryComponent } from '@fuse/components/masonry/masonry.component';
+
+@NgModule({
+    declarations: [
+        FuseMasonryComponent
+    ],
+    imports     : [
+        CommonModule
+    ],
+    exports     : [
+        FuseMasonryComponent
+    ]
+})
+export class FuseMasonryModule
+{
+}

src/@fuse/components/masonry/public-api.ts

@@ -0,0 +1,2 @@
+export * from '@fuse/components/masonry/masonry.component';
+export * from '@fuse/components/masonry/masonry.module';

src/@fuse/styles/components/example-viewer.scss

@@ -36,7 +36,6 @@
         .mat-tab-body-content {
 
             .fuse-highlight {
-                margin: -24px;
 
                 pre {
                     margin: 0;

src/@fuse/tailwind/plugins/theming.js

@@ -72,13 +72,17 @@ function generateThemesObject(themes)
     return _.map(_.cloneDeep(themes), (value, key) =>
     {
         const theme = normalizeTheme(value);
+        const primary = (theme && theme.primary && theme.primary.DEFAULT) ? theme.primary.DEFAULT : normalizedDefaultTheme.primary.DEFAULT;
+        const accent = (theme && theme.accent && theme.accent.DEFAULT) ? theme.accent.DEFAULT : normalizedDefaultTheme.accent.DEFAULT;
+        const warn = (theme && theme.warn && theme.warn.DEFAULT) ? theme.warn.DEFAULT : normalizedDefaultTheme.warn.DEFAULT;
+
         return _.fromPairs([
             [
                 key,
                 {
-                    primary: theme?.primary?.DEFAULT ?? normalizedDefaultTheme.primary.DEFAULT,
-                    accent : theme?.accent?.DEFAULT ?? normalizedDefaultTheme.accent.DEFAULT,
-                    warn   : theme?.warn?.DEFAULT ?? normalizedDefaultTheme.warn.DEFAULT
+                    primary,
+                    accent,
+                    warn
                 }
             ]
         ]);

src/@fuse/version/fuse-version.ts

@@ -1,4 +1,4 @@
 import { Version } from '@fuse/version/version';
 
-const __FUSE_VERSION__ = '12.1.0';
+const __FUSE_VERSION__ = '12.3.0';
 export const FUSE_VERSION = new Version(__FUSE_VERSION__).full;

src/app/layout/layouts/horizontal/centered/centered.component.html

@@ -63,6 +63,7 @@
             </ng-container>
             <!-- Components -->
             <div class="flex items-center pl-2 ml-auto space-x-2">
+                <fuse-fullscreen></fuse-fullscreen>
                 <search [appearance]="'bar'"></search>
                 <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
                 <messages [messages]="data.messages"></messages>

src/app/layout/layouts/horizontal/centered/centered.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
@@ -25,6 +26,7 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/
         MatDividerModule,
         MatIconModule,
         MatMenuModule,
+        FuseFullscreenModule,
         FuseNavigationModule,
         MessagesModule,
         NotificationsModule,

src/app/layout/layouts/horizontal/enterprise/enterprise.component.html

@@ -46,6 +46,7 @@
                 </ng-container>
                 <!-- Components -->
                 <div class="flex items-center pl-2 ml-auto space-x-2">
+                    <fuse-fullscreen></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
                     <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
                     <messages [messages]="data.messages"></messages>

src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
@@ -25,6 +26,7 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
         MatDividerModule,
         MatIconModule,
         MatMenuModule,
+        FuseFullscreenModule,
         FuseNavigationModule,
         MessagesModule,
         NotificationsModule,

src/app/layout/layouts/horizontal/material/material.component.html

@@ -52,6 +52,7 @@
                 </ng-container>
                 <!-- Components -->
                 <div class="flex items-center pl-2 ml-auto space-x-2">
+                    <fuse-fullscreen></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
                     <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
                     <messages [messages]="data.messages"></messages>

src/app/layout/layouts/horizontal/material/material.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
@@ -25,6 +26,7 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/
         MatDividerModule,
         MatIconModule,
         MatMenuModule,
+        FuseFullscreenModule,
         FuseNavigationModule,
         MessagesModule,
         NotificationsModule,

src/app/layout/layouts/horizontal/modern/modern.component.html

@@ -55,6 +55,7 @@
         </ng-container>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
+            <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
             <messages [messages]="data.messages"></messages>

src/app/layout/layouts/horizontal/modern/modern.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
@@ -25,6 +26,7 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
         MatDividerModule,
         MatIconModule,
         MatMenuModule,
+        FuseFullscreenModule,
         FuseNavigationModule,
         MessagesModule,
         NotificationsModule,

src/app/layout/layouts/vertical/classic/classic.component.html

@@ -36,6 +36,7 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
+            <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
             <messages [messages]="data.messages"></messages>

src/app/layout/layouts/vertical/classic/classic.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
@@ -25,6 +26,7 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
         MatDividerModule,
         MatIconModule,
         MatMenuModule,
+        FuseFullscreenModule,
         FuseNavigationModule,
         MessagesModule,
         NotificationsModule,

src/app/layout/layouts/vertical/classy/classy.component.html

@@ -66,6 +66,7 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
+            <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
             <messages [messages]="data.messages"></messages>

src/app/layout/layouts/vertical/classy/classy.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -25,6 +26,7 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
         MatDividerModule,
         MatIconModule,
         MatMenuModule,
+        FuseFullscreenModule,
         FuseNavigationModule,
         MessagesModule,
         NotificationsModule,

src/app/layout/layouts/vertical/compact/compact.component.html

@@ -31,6 +31,7 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
+            <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
             <messages [messages]="data.messages"></messages>

src/app/layout/layouts/vertical/compact/compact.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
@@ -25,6 +26,7 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
         MatDividerModule,
         MatIconModule,
         MatMenuModule,
+        FuseFullscreenModule,
         FuseNavigationModule,
         MessagesModule,
         NotificationsModule,

src/app/layout/layouts/vertical/dense/dense.component.html

@@ -40,6 +40,7 @@
         </div>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
+            <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
             <messages [messages]="data.messages"></messages>

src/app/layout/layouts/vertical/dense/dense.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
@@ -25,6 +26,7 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
         MatDividerModule,
         MatIconModule,
         MatMenuModule,
+        FuseFullscreenModule,
         FuseNavigationModule,
         MessagesModule,
         NotificationsModule,

src/app/layout/layouts/vertical/futuristic/futuristic.component.html

@@ -45,6 +45,7 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
+            <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
             <messages [messages]="data.messages"></messages>

src/app/layout/layouts/vertical/futuristic/futuristic.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
@@ -25,6 +26,7 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
         MatDividerModule,
         MatIconModule,
         MatMenuModule,
+        FuseFullscreenModule,
         FuseNavigationModule,
         MessagesModule,
         NotificationsModule,

src/app/layout/layouts/vertical/thin/thin.component.html

@@ -32,6 +32,7 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
+            <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
             <messages [messages]="data.messages"></messages>

src/app/layout/layouts/vertical/thin/thin.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
@@ -25,6 +26,7 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
         MatDividerModule,
         MatIconModule,
         MatMenuModule,
+        FuseFullscreenModule,
         FuseNavigationModule,
         MessagesModule,
         NotificationsModule,

src/app/mock-api/apps/academy/api.ts

@@ -75,7 +75,10 @@ export class AcademyMockApi
 
                 // Find the course and attach steps to it
                 const course = courses.find((item) => item.id === id);
-                course.steps = steps;
+                if ( course )
+                {
+                    course.steps = steps;
+                }
 
                 return [
                     200,

src/app/mock-api/apps/chat/api.ts

@@ -0,0 +1,167 @@
+import { Injectable } from '@angular/core';
+import { assign, cloneDeep, omit } from 'lodash-es';
+import { FuseMockApiService } from '@fuse/lib/mock-api';
+import { chats as chatsData, contacts as contactsData, messages as messagesData, profile as profileData } from 'app/mock-api/apps/chat/data';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ChatMockApi
+{
+    private _chats: any[] = chatsData;
+    private _contacts: any[] = contactsData;
+    private _messages: any[] = messagesData;
+    private _profile: any = profileData;
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseMockApiService: FuseMockApiService)
+    {
+        // Register Mock API handlers
+        this.registerHandlers();
+
+        // Modify the chats array to attach certain data to it
+        this._chats = this._chats.map((chat) => ({
+            ...chat,
+            // Get the actual contact object from the id and attach it to the chat
+            contact: this._contacts.find((contact) => contact.id === chat.contactId),
+            // Since we use same set of messages on all chats, we assign them here.
+            messages: this._messages.map((message) => ({
+                ...message,
+                chatId   : chat.id,
+                contactId: message.contactId === 'me' ? this._profile.id : chat.contactId,
+                isMine   : message.contactId === 'me'
+            }))
+        }));
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register Mock API handlers
+     */
+    registerHandlers(): void
+    {
+        // -----------------------------------------------------------------------------------------------------
+        // @ Chats - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/apps/chat/chats')
+            .reply(() => {
+
+                // Clone the chats
+                const chats = cloneDeep(this._chats);
+
+                // Return the response
+                return [200, chats];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Chat - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/apps/chat/chat')
+            .reply(({request}) => {
+
+                // Get the chat id
+                const id = request.params.get('id');
+
+                // Clone the chats
+                const chats = cloneDeep(this._chats);
+
+                // Find the chat we need
+                const chat = chats.find((item) => item.id === id);
+
+                // Return the response
+                return [200, chat];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Chat - PATCH
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPatch('api/apps/chat/chat')
+            .reply(({request}) => {
+
+                // Get the id and chat
+                const id = request.body.id;
+                const chat = cloneDeep(request.body.chat);
+
+                // Prepare the updated chat
+                let updatedChat = null;
+
+                // Find the chat and update it
+                this._chats.forEach((item, index, chats) => {
+
+                    if ( item.id === id )
+                    {
+                        // Update the chat
+                        chats[index] = assign({}, chats[index], chat);
+
+                        // Store the updated chat
+                        updatedChat = chats[index];
+                    }
+                });
+
+                // Return the response
+                return [200, updatedChat];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Contacts - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/apps/chat/contacts')
+            .reply(() => {
+
+                // Clone the contacts
+                let contacts = cloneDeep(this._contacts);
+
+                // Sort the contacts by the name field by default
+                contacts.sort((a, b) => a.name.localeCompare(b.name));
+
+                // Omit details and attachments from contacts
+                contacts = contacts.map((contact) => omit(contact, ['details', 'attachments']));
+
+                // Return the response
+                return [200, contacts];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Contact Details - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/apps/chat/contact')
+            .reply(({request}) => {
+
+                // Get the contact id
+                const id = request.params.get('id');
+
+                // Clone the contacts
+                const contacts = cloneDeep(this._contacts);
+
+                // Find the contact
+                const contact = contacts.find((item) => item.id === id);
+
+                // Return the response
+                return [200, contact];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Profile - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/apps/chat/profile')
+            .reply(() => {
+
+                // Clone the profile
+                const profile = cloneDeep(this._profile);
+
+                // Return the response
+                return [200, profile];
+            });
+    }
+}

src/app/mock-api/apps/notes/api.ts

@@ -0,0 +1,264 @@
+import { Injectable } from '@angular/core';
+import { cloneDeep } from 'lodash-es';
+import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
+import { labels as labelsData, notes as notesData } from 'app/mock-api/apps/notes/data';
+import { FuseMockApiUtils } from '@fuse/lib/mock-api';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NotesMockApi
+{
+    private _labels: any[] = labelsData;
+    private _notes: any[] = notesData;
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseMockApiService: FuseMockApiService)
+    {
+        // Register Mock API handlers
+        this.registerHandlers();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register Mock API handlers
+     */
+    registerHandlers(): void
+    {
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/apps/notes/labels')
+            .reply(() => {
+
+                return [
+                    200,
+                    cloneDeep(this._labels)
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - POST
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPost('api/apps/notes/labels')
+            .reply(({request}) => {
+
+                // Create a new label
+                const label = {
+                    id   : FuseMockApiUtils.guid(),
+                    title: request.body.title
+                };
+
+                // Update the labels
+                this._labels.push(label);
+
+                return [
+                    200,
+                    cloneDeep(this._labels)
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - PATCH
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPatch('api/apps/notes/labels')
+            .reply(({request}) => {
+
+                // Get label
+                const updatedLabel = request.body.label;
+
+                // Update the label
+                this._labels = this._labels.map((label) => {
+                    if ( label.id === updatedLabel.id )
+                    {
+                        return {
+                            ...label,
+                            title: updatedLabel.title
+                        };
+                    }
+
+                    return label;
+                });
+
+                return [
+                    200,
+                    cloneDeep(this._labels)
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - DELETE
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onDelete('api/apps/notes/labels')
+            .reply(({request}) => {
+
+                // Get label id
+                const id = request.params.get('id');
+
+                // Delete the label
+                this._labels = this._labels.filter((label) => label.id !== id);
+
+                // Go through notes and delete the label
+                this._notes = this._notes.map((note) => ({
+                    ...note,
+                    labels: note.labels.filter((item) => item !== id)
+                }));
+
+                return [
+                    200,
+                    cloneDeep(this._labels)
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Note Tasks - POST
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPost('api/apps/notes/tasks')
+            .reply(({request}) => {
+
+                // Get note and task
+                let updatedNote = request.body.note;
+                const task = request.body.task;
+
+                // Update the note
+                this._notes = this._notes.map((note) => {
+                    if ( note.id === updatedNote.id )
+                    {
+                        // Update the tasks
+                        if ( !note.tasks )
+                        {
+                            note.tasks = [];
+                        }
+
+                        note.tasks.push({
+                            id       : FuseMockApiUtils.guid(),
+                            content  : task,
+                            completed: false
+                        });
+
+                        // Update the updatedNote with the new task
+                        updatedNote = cloneDeep(note);
+
+                        return {
+                            ...note
+                        };
+                    }
+
+                    return note;
+                });
+
+                return [
+                    200,
+                    updatedNote
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/apps/notes/all')
+            .reply(() => {
+
+                // Clone the labels and notes
+                const labels = cloneDeep(this._labels);
+                let notes = cloneDeep(this._notes);
+
+                // Attach the labels to the notes
+                notes = notes.map((note) => (
+                    {
+                        ...note,
+                        labels: note.labels.map((labelId) => labels.find((label) => label.id === labelId))
+                    }
+                ));
+
+                return [
+                    200,
+                    notes
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - POST
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPost('api/apps/notes')
+            .reply(({request}) => {
+
+                // Get note
+                const note = request.body.note;
+
+                // Add an id
+                note.id = FuseMockApiUtils.guid();
+
+                // Push the note
+                this._notes.push(note);
+
+                return [
+                    200,
+                    note
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - PATCH
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPatch('api/apps/notes')
+            .reply(({request}) => {
+
+                // Get note
+                const updatedNote = request.body.updatedNote;
+
+                // Update the note
+                this._notes = this._notes.map((note) => {
+                    if ( note.id === updatedNote.id )
+                    {
+                        return {
+                            ...updatedNote
+                        };
+                    }
+
+                    return note;
+                });
+
+                return [
+                    200,
+                    updatedNote
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - DELETE
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onDelete('api/apps/notes')
+            .reply(({request}) => {
+
+                // Get the id
+                const id = request.params.get('id');
+
+                // Find the note and delete it
+                this._notes.forEach((item, index) => {
+
+                    if ( item.id === id )
+                    {
+                        this._notes.splice(index, 1);
+                    }
+                });
+
+                // Return the response
+                return [200, true];
+            });
+    }
+}

src/app/mock-api/apps/notes/data.ts

@@ -0,0 +1,314 @@
+/* tslint:disable:max-line-length */
+import moment from 'moment';
+
+export const labels = [
+    {
+        id   : 'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
+        title: 'Family'
+    },
+    {
+        id   : 'e2f749f5-41ed-49d0-a92a-1c83d879e371',
+        title: 'Work'
+    },
+    {
+        id   : 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
+        title: 'Tasks'
+    },
+    {
+        id   : '6c288794-47eb-4605-8bdf-785b61a449d3',
+        title: 'Priority'
+    },
+    {
+        id   : 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
+        title: 'Personal'
+    },
+    {
+        id   : '2dc11344-3507-48e0-83d6-1c047107f052',
+        title: 'Friends'
+    }
+];
+
+export const notes = [
+    {
+        id       : '8f011ac5-b71c-4cd7-a317-857dcd7d85e0',
+        title    : '',
+        content  : 'Find a new company name',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : false,
+        createdAt: moment().hour(10).minute(19).subtract(98, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'ced0a1ce-051d-41a3-b080-e2161e4ae621',
+        title    : '',
+        content  : 'Send the photos of last summer to John',
+        tasks    : null,
+        image    : 'assets/images/cards/14-640x480.jpg',
+        reminder : null,
+        labels   : [
+            'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
+        ],
+        archived : false,
+        createdAt: moment().hour(15).minute(37).subtract(80, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'd3ac02a9-86e4-4187-bbd7-2c965518b3a3',
+        title    : '',
+        content  : 'Update the design of the theme',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['6c288794-47eb-4605-8bdf-785b61a449d3'],
+        archived : false,
+        createdAt: moment().hour(19).minute(27).subtract(74, 'day').toISOString(),
+        updatedAt: moment().hour(15).minute(36).subtract(50, 'day').toISOString()
+    },
+    {
+        id       : '89861bd4-0144-4bb4-8b39-332ca10371d5',
+        title    : '',
+        content  : 'Theming support for all apps',
+        tasks    : null,
+        image    : null,
+        reminder : moment().hour(12).minute(34).add(50, 'day').toISOString(),
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : false,
+        createdAt: moment().hour(12).minute(34).subtract(59, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'ffd20f3c-2d43-4c6b-8021-278032fc9e92',
+        title    : 'Gift Ideas',
+        content  : 'Stephanie\'s birthday is coming and I need to pick a present for her. Take a look at the below list and buy one of them (or all of them)',
+        tasks    : [
+            {
+                id       : '330a924f-fb51-48f6-a374-1532b1dd353d',
+                content  : 'Scarf',
+                completed: false
+            },
+            {
+                id       : '781855a6-2ad2-4df4-b0af-c3cb5f302b40',
+                content  : 'A new bike helmet',
+                completed: true
+            },
+            {
+                id       : 'bcb8923b-33cd-42c2-9203-170994fa24f5',
+                content  : 'Necklace',
+                completed: false
+            },
+            {
+                id       : '726bdf6e-5cd7-408a-9a4f-0d7bb98c1c4b',
+                content  : 'Flowers',
+                completed: false
+            }
+        ],
+        image    : null,
+        reminder : null,
+        labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
+        archived : false,
+        createdAt: moment().hour(16).minute(4).subtract(47, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '71d223bb-abab-4183-8919-cd3600a950b4',
+        title    : 'Shopping list',
+        content  : '',
+        tasks    : [
+            {
+                id       : 'e3cbc986-641c-4448-bc26-7ecfa0549c22',
+                content  : 'Bread',
+                completed: true
+            },
+            {
+                id       : '34013111-ab2c-4b2f-9352-d2ae282f57d3',
+                content  : 'Milk',
+                completed: false
+            },
+            {
+                id       : '0fbdea82-cc79-4433-8ee4-54fd542c380d',
+                content  : 'Onions',
+                completed: false
+            },
+            {
+                id       : '66490222-743e-4262-ac91-773fcd98a237',
+                content  : 'Coffee',
+                completed: true
+            },
+            {
+                id       : 'ab367215-d06a-48b0-a7b8-e161a63b07bd',
+                content  : 'Toilet Paper',
+                completed: true
+            }
+        ],
+        image    : null,
+        reminder : moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
+        labels   : ['b1cde9ee-e54d-4142-ad8b-cf55dafc9528'],
+        archived : false,
+        createdAt: moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '11fbeb98-ae5e-41ad-bed6-330886fd7906',
+        title    : 'Keynote Schedule',
+        content  : '',
+        tasks    : [
+            {
+                id       : '2711bac1-7d8a-443a-a4fe-506ef51d3fcb',
+                content  : 'Breakfast',
+                completed: true
+            },
+            {
+                id       : 'e3a2d675-a3e5-4cef-9205-feeccaf949d7',
+                content  : 'Opening ceremony',
+                completed: true
+            },
+            {
+                id       : '7a721b6d-9d85-48e0-b6c3-f927079af582',
+                content  : 'Talk 1: How we did it!',
+                completed: true
+            },
+            {
+                id       : 'bdb4d5cd-5bb8-45e2-9186-abfd8307e429',
+                content  : 'Talk 2: How can you do it!',
+                completed: false
+            },
+            {
+                id       : 'c8293bb4-8ab4-4310-bbc2-52ecf8ec0c54',
+                content  : 'Lunch break',
+                completed: false
+            }
+        ],
+        image    : null,
+        reminder : moment().hour(11).minute(27).subtract(14, 'day').toISOString(),
+        labels   : [
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
+            'e2f749f5-41ed-49d0-a92a-1c83d879e371'
+        ],
+        archived : false,
+        createdAt: moment().hour(11).minute(27).subtract(24, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'd46dee8b-8761-4b6d-a1df-449d6e6feb6a',
+        title    : '',
+        content  : 'Organize the dad\'s surprise retirement party',
+        tasks    : null,
+        image    : null,
+        reminder : moment().hour(14).minute(56).subtract(25, 'day').toISOString(),
+        labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
+        archived : false,
+        createdAt: moment().hour(14).minute(56).subtract(20, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '6bc9f002-1675-417c-93c4-308fba39023e',
+        title    : 'Plan the road trip',
+        content  : '',
+        tasks    : null,
+        image    : 'assets/images/cards/17-640x480.jpg',
+        reminder : null,
+        labels   : [
+            '2dc11344-3507-48e0-83d6-1c047107f052',
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
+        ],
+        archived : false,
+        createdAt: moment().hour(9).minute(32).subtract(15, 'day').toISOString(),
+        updatedAt: moment().hour(17).minute(6).subtract(12, 'day').toISOString()
+    },
+    {
+        id       : '15188348-78aa-4ed6-b5c2-028a214ba987',
+        title    : 'Office Address',
+        content  : '933 8th Street Stamford, CT 06902',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : false,
+        createdAt: moment().hour(20).minute(5).subtract(12, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '1dbfc685-1a0a-4070-9ca7-ed896c523037',
+        title    : 'Tasks',
+        content  : '',
+        tasks    : [
+            {
+                id       : '004638bf-3ee6-47a5-891c-3be7b9f3df09',
+                content  : 'Wash the dishes',
+                completed: true
+            },
+            {
+                id       : '86e6820b-1ae3-4c14-a13e-35605a0d654b',
+                content  : 'Walk the dog',
+                completed: false
+            }
+        ],
+        image    : null,
+        reminder : moment().hour(13).minute(43).subtract(2, 'day').toISOString(),
+        labels   : ['bbc73458-940b-421c-8d5f-8dcd23a9b0d6'],
+        archived : false,
+        createdAt: moment().hour(13).minute(43).subtract(7, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '49548409-90a3-44d4-9a9a-f5af75aa9a66',
+        title    : '',
+        content  : 'Dinner with parents',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : [
+            'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
+            '6c288794-47eb-4605-8bdf-785b61a449d3'
+        ],
+        archived : false,
+        createdAt: moment().hour(7).minute(12).subtract(2, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
+        title    : '',
+        content  : 'Re-fill the medicine cabinet',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : [
+            'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
+            '6c288794-47eb-4605-8bdf-785b61a449d3'
+        ],
+        archived : true,
+        createdAt: moment().hour(17).minute(14).subtract(100, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
+        title    : '',
+        content  : 'Update the icons pack',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : true,
+        createdAt: moment().hour(10).minute(29).subtract(85, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '46214383-f8e7-44da-aa2e-0b685e0c5027',
+        title    : 'Team Meeting',
+        content  : 'Talk about the future of the web apps',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : [
+            'e2f749f5-41ed-49d0-a92a-1c83d879e371',
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
+        ],
+        archived : true,
+        createdAt: moment().hour(15).minute(30).subtract(69, 'day').toISOString(),
+        updatedAt: null
+    }
+];

src/app/mock-api/index.ts

@@ -2,6 +2,7 @@ import { AcademyMockApi } from 'app/mock-api/apps/academy/api';
 import { AnalyticsMockApi } from 'app/mock-api/dashboards/analytics/api';
 import { AuthMockApi } from 'app/mock-api/common/auth/api';
 import { CalendarMockApi } from 'app/mock-api/apps/calendar/api';
+import { ChatMockApi } from 'app/mock-api/apps/chat/api';
 import { ContactsMockApi } from 'app/mock-api/apps/contacts/api';
 import { ECommerceInventoryMockApi } from 'app/mock-api/apps/ecommerce/inventory/api';
 import { FileManagerMockApi } from 'app/mock-api/apps/file-manager/api';
@@ -10,6 +11,7 @@ import { IconsMockApi } from 'app/mock-api/ui/icons/api';
 import { MailboxMockApi } from 'app/mock-api/apps/mailbox/api';
 import { MessagesMockApi } from 'app/mock-api/common/messages/api';
 import { NavigationMockApi } from 'app/mock-api/common/navigation/api';
+import { NotesMockApi } from 'app/mock-api/apps/notes/api';
 import { NotificationsMockApi } from 'app/mock-api/common/notifications/api';
 import { ProjectMockApi } from 'app/mock-api/dashboards/project/api';
 import { SearchMockApi } from 'app/mock-api/common/search/api';
@@ -22,6 +24,7 @@ export const mockApiServices = [
     AnalyticsMockApi,
     AuthMockApi,
     CalendarMockApi,
+    ChatMockApi,
     ContactsMockApi,
     ECommerceInventoryMockApi,
     FileManagerMockApi,
@@ -30,6 +33,7 @@ export const mockApiServices = [
     MailboxMockApi,
     MessagesMockApi,
     NavigationMockApi,
+    NotesMockApi,
     NotificationsMockApi,
     ProjectMockApi,
     SearchMockApi,

tailwind.config.js

@@ -78,7 +78,7 @@ const config = {
         // development and production, we will decide whether to purge or not
         // by looking at the process arguments. If there is a "build" argument
         // with the "ng" command then we will enable the purge.
-        enabled: process?.argv?.find(arg => arg.includes('ng')) && process?.argv?.indexOf('build') !== -1,
+        enabled: process && process.argv && process.argv.find(arg => arg.includes('ng')) && process.argv.indexOf('build') !== -1,
         content: ['./src/**/*.{html,scss,ts}'],
         options: {
             safelist: {