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

Updated ESLint to v13
Updated Tailwind to v3
Updated various other packages

.browserslistrc

@@ -14,4 +14,3 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.gitignore

@@ -31,6 +31,7 @@ chrome-profiler-events*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.nvmrc

@@ -1 +1 @@
-12
+16

README.md

@@ -12,7 +12,7 @@ Run `ng generate component component-name` to generate a new component. You can
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
 ## Running unit tests
 
@@ -20,7 +20,7 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 
 ## Running end-to-end tests
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice.
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice.  To use this command, you need to first add a package that implements end-to-end testing capabilities.
 
 ## Further help
 

angular.json

@@ -1,6 +1,12 @@
 {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "version": 1,
+    "cli": {
+        "defaultCollection": "@angular-eslint/schematics",
+        "cache": {
+            "enabled": false
+        }
+    },
     "newProjectRoot": "projects",
     "projects": {
         "fuse": {
@@ -60,13 +66,13 @@
                             "budgets": [
                                 {
                                     "type": "initial",
-                                    "maximumWarning": "5mb",
-                                    "maximumError": "8mb"
+                                    "maximumWarning": "3mb",
+                                    "maximumError": "5mb"
                                 },
                                 {
                                     "type": "anyComponentStyle",
-                                    "maximumWarning": "100kb",
-                                    "maximumError": "150kb"
+                                    "maximumWarning": "75kb",
+                                    "maximumError": "90kb"
                                 }
                             ],
                             "fileReplacements": [
@@ -137,8 +143,5 @@
             }
         }
     },
-    "defaultProject": "fuse",
-    "cli": {
-        "defaultCollection": "@angular-eslint/schematics"
-    }
+    "defaultProject": "fuse"
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fuse/starter",
-    "version": "13.3.1",
+    "version": "14.1.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -9,82 +9,73 @@
         "ng": "ng",
         "start": "ng serve",
         "build": "ng build",
+        "watch": "ng build --watch --configuration development",
         "test": "ng test",
         "lint": "ng lint"
     },
     "dependencies": {
-        "@angular/animations": "12.1.2",
-        "@angular/cdk": "12.1.2",
-        "@angular/common": "12.1.2",
-        "@angular/compiler": "12.1.2",
-        "@angular/core": "12.1.2",
-        "@angular/forms": "12.1.2",
-        "@angular/material": "12.1.2",
-        "@angular/material-moment-adapter": "12.1.2",
-        "@angular/platform-browser": "12.1.2",
-        "@angular/platform-browser-dynamic": "12.1.2",
-        "@angular/router": "12.1.2",
-        "@fullcalendar/angular": "4.4.5-beta",
-        "@fullcalendar/core": "4.4.2",
-        "@fullcalendar/daygrid": "4.4.2",
-        "@fullcalendar/interaction": "4.4.2",
-        "@fullcalendar/list": "4.4.2",
-        "@fullcalendar/moment": "4.4.2",
-        "@fullcalendar/rrule": "4.4.2",
-        "@fullcalendar/timegrid": "4.4.2",
-        "@ngneat/transloco": "2.22.0",
-        "apexcharts": "3.27.2",
+        "@angular/animations": "13.1.1",
+        "@angular/cdk": "13.1.1",
+        "@angular/common": "13.1.1",
+        "@angular/compiler": "13.1.1",
+        "@angular/core": "13.1.1",
+        "@angular/forms": "13.1.1",
+        "@angular/material": "13.1.1",
+        "@angular/material-moment-adapter": "13.1.1",
+        "@angular/platform-browser": "13.1.1",
+        "@angular/platform-browser-dynamic": "13.1.1",
+        "@angular/router": "13.1.1",
+        "@ngneat/transloco": "3.1.1",
+        "apexcharts": "3.32.0",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.1.0",
+        "highlight.js": "11.3.1",
         "lodash-es": "4.17.21",
         "moment": "2.29.1",
-        "ng-apexcharts": "1.5.12",
-        "ngx-markdown": "12.0.1",
-        "ngx-quill": "14.1.2",
-        "perfect-scrollbar": "1.5.1",
+        "ng-apexcharts": "1.6.0",
+        "ngx-markdown": "13.0.0",
+        "ngx-quill": "16.1.1",
+        "perfect-scrollbar": "1.5.3",
         "quill": "1.3.7",
-        "rrule": "2.6.8",
-        "rxjs": "6.6.7",
-        "tslib": "2.3.0",
-        "web-animations-js": "2.3.2",
+        "rxjs": "7.4.0",
+        "tslib": "2.3.1",
         "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "12.1.2",
-        "@angular-eslint/builder": "12.3.1",
-        "@angular-eslint/eslint-plugin": "12.3.1",
-        "@angular-eslint/eslint-plugin-template": "12.3.1",
-        "@angular-eslint/schematics": "12.3.1",
-        "@angular-eslint/template-parser": "12.3.1",
-        "@angular/cli": "12.1.2",
-        "@angular/compiler-cli": "12.1.2",
-        "@tailwindcss/aspect-ratio": "0.2.1",
-        "@tailwindcss/line-clamp": "0.2.1",
-        "@tailwindcss/typography": "0.4.1",
+        "@angular-devkit/build-angular": "13.1.2",
+        "@angular-eslint/builder": "13.0.1",
+        "@angular-eslint/eslint-plugin": "13.0.1",
+        "@angular-eslint/eslint-plugin-template": "13.0.1",
+        "@angular-eslint/schematics": "13.0.1",
+        "@angular-eslint/template-parser": "13.0.1",
+        "@angular/cli": "13.1.2",
+        "@angular/compiler-cli": "13.1.1",
+        "@tailwindcss/aspect-ratio": "0.4.0",
+        "@tailwindcss/line-clamp": "0.3.0",
+        "@tailwindcss/typography": "0.5.0",
         "@types/chroma-js": "2.1.3",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "3.8.1",
-        "@types/lodash": "4.14.171",
-        "@types/lodash-es": "4.17.4",
-        "@types/node": "12.20.16",
-        "@typescript-eslint/eslint-plugin": "4.28.3",
-        "@typescript-eslint/parser": "4.28.3",
-        "autoprefixer": "10.3.1",
+        "@types/jasmine": "3.10.2",
+        "@types/lodash": "4.14.178",
+        "@types/lodash-es": "4.17.5",
+        "@types/node": "12.20.38",
+        "@typescript-eslint/eslint-plugin": "5.8.0",
+        "@typescript-eslint/parser": "5.8.0",
+        "autoprefixer": "10.4.0",
         "chroma-js": "2.1.2",
-        "eslint": "7.30.0",
-        "eslint-plugin-import": "2.23.4",
-        "eslint-plugin-jsdoc": "35.4.3",
+        "eslint": "8.5.0",
+        "eslint-plugin-import": "2.25.3",
+        "eslint-plugin-jsdoc": "37.4.0",
         "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "3.8.0",
-        "karma": "6.3.4",
+        "jasmine-core": "3.10.1",
+        "karma": "6.3.9",
         "karma-chrome-launcher": "3.1.0",
-        "karma-coverage": "2.0.3",
+        "karma-coverage": "2.1.0",
         "karma-jasmine": "4.0.1",
         "karma-jasmine-html-reporter": "1.7.0",
         "lodash": "4.17.21",
-        "postcss": "8.3.5",
-        "tailwindcss": "2.2.4",
-        "typescript": "4.3.5"
+        "postcss": "8.4.5",
+        "tailwindcss": "3.0.7",
+        "typescript": "4.5.4"
     }
 }

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

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { filter, Subject, takeUntil } from 'rxjs';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
@@ -145,7 +144,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 

src/@fuse/components/date-range/date-range.component.html

@@ -1,101 +0,0 @@
-<div
-    class="range"
-    (click)="openPickerPanel()"
-    #pickerPanelOrigin>
-
-    <div class="start">
-        <div class="date">{{range.startDate}}</div>
-        <div
-            class="time"
-            *ngIf="range.startTime">{{range.startTime}}</div>
-    </div>
-
-    <div class="separator">-</div>
-
-    <div class="end">
-        <div class="date">{{range.endDate}}</div>
-        <div
-            class="time"
-            *ngIf="range.endTime">{{range.endTime}}</div>
-    </div>
-
-</div>
-
-<ng-template #pickerPanel>
-
-    <!-- Start -->
-    <div class="start">
-
-        <div class="month">
-            <div class="month-header">
-                <button
-                    class="previous-button"
-                    mat-icon-button
-                    (click)="prev()"
-                    tabindex="1">
-                    <mat-icon [svgIcon]="'heroicons_outline:chevron-left'"></mat-icon>
-                </button>
-                <div class="month-label">{{getMonthLabel(1)}}</div>
-            </div>
-            <mat-month-view
-                [(activeDate)]="activeDates.month1"
-                [dateFilter]="dateFilter()"
-                [dateClass]="dateClass()"
-                (click)="$event.stopImmediatePropagation()"
-                (selectedChange)="onSelectedDateChange($event)"
-                #matMonthView1>
-            </mat-month-view>
-        </div>
-
-        <mat-form-field
-            class="fuse-mat-no-subscript time start-time"
-            *ngIf="timeRange">
-            <input
-                matInput
-                [autocomplete]="'off'"
-                [formControl]="startTimeFormControl"
-                (blur)="updateStartTime($event)"
-                tabindex="3">
-            <mat-label>Start time</mat-label>
-        </mat-form-field>
-
-    </div>
-
-    <!-- End -->
-    <div class="end">
-
-        <div class="month">
-            <div class="month-header">
-                <div class="month-label">{{getMonthLabel(2)}}</div>
-                <button
-                    class="next-button"
-                    mat-icon-button
-                    (click)="next()"
-                    tabindex="2">
-                    <mat-icon [svgIcon]="'heroicons_outline:chevron-right'"></mat-icon>
-                </button>
-            </div>
-            <mat-month-view
-                [(activeDate)]="activeDates.month2"
-                [dateFilter]="dateFilter()"
-                [dateClass]="dateClass()"
-                (click)="$event.stopImmediatePropagation()"
-                (selectedChange)="onSelectedDateChange($event)"
-                #matMonthView2>
-            </mat-month-view>
-        </div>
-
-        <mat-form-field
-            class="fuse-mat-no-subscript time end-time"
-            *ngIf="timeRange">
-            <input
-                matInput
-                [formControl]="endTimeFormControl"
-                (blur)="updateEndTime($event)"
-                tabindex="4">
-            <mat-label>End time</mat-label>
-        </mat-form-field>
-
-    </div>
-
-</ng-template>

src/@fuse/components/date-range/date-range.component.scss

@@ -1,292 +0,0 @@
-/* Variables */
-$body-cell-padding: 2px;
-
-fuse-date-range {
-    display: flex;
-
-    .range {
-        display: flex;
-        align-items: center;
-        height: 48px;
-        min-height: 48px;
-        max-height: 48px;
-        cursor: pointer;
-
-        .start,
-        .end {
-            display: flex;
-            align-items: center;
-            height: 100%;
-            padding: 0 16px;
-            border-radius: 6px;
-            border-width: 1px;
-            line-height: 1;
-            @apply shadow-sm border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500;
-
-            .date {
-                white-space: nowrap;
-
-                + .time {
-                    margin-left: 8px;
-                }
-            }
-
-            .time {
-                white-space: nowrap;
-            }
-        }
-
-        .separator {
-            margin: 0 2px;
-
-            @screen sm {
-                margin: 0 12px;
-            }
-        }
-    }
-}
-
-.fuse-date-range-panel {
-    border-radius: 4px;
-    padding: 24px;
-    @apply shadow-2xl bg-card;
-
-    .start,
-    .end {
-        display: flex;
-        flex-direction: column;
-
-        .month {
-            max-width: 196px;
-            min-width: 196px;
-            width: 196px;
-
-            .month-header {
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 32px;
-                margin-bottom: 16px;
-
-                .previous-button,
-                .next-button {
-                    position: absolute;
-                    width: 24px !important;
-                    height: 24px !important;
-                    min-height: 24px !important;
-                    max-height: 24px !important;
-                    line-height: 24px !important;
-
-                    .mat-icon {
-                        @apply icon-size-5;
-                    }
-                }
-
-                .previous-button {
-                    left: 0;
-                }
-
-                .next-button {
-                    right: 0;
-                }
-
-                .month-label {
-                    font-weight: 500;
-                    @apply text-secondary;
-                }
-            }
-
-            mat-month-view {
-                display: flex;
-                min-height: 188px;
-
-                .mat-calendar-table {
-                    width: 100%;
-                    border-collapse: collapse;
-
-                    tbody {
-
-                        tr {
-
-                            &[aria-hidden=true] {
-                                display: none !important;
-                            }
-
-                            &:first-child {
-
-                                td:first-child {
-
-                                    &[aria-hidden=true] {
-                                        visibility: hidden;
-                                        pointer-events: none;
-                                        opacity: 0;
-                                    }
-                                }
-                            }
-
-                            td,
-                            td:hover {
-
-                                &.fuse-date-range {
-
-                                    &:before {
-                                        @apply bg-primary-200;
-                                    }
-
-                                    .mat-calendar-body-cell-content {
-                                        background-color: transparent;
-                                    }
-                                }
-
-                                &.fuse-date-range-start,
-                                &.fuse-date-range-end {
-
-                                    .mat-calendar-body-cell-content {
-                                        @apply bg-primary text-on-primary;
-                                    }
-                                }
-
-                                .mat-calendar-body-today {
-                                    border: none;
-                                }
-                            }
-
-                            td.mat-calendar-body-cell {
-                                width: 28px !important;
-                                height: 28px !important;
-                                padding: $body-cell-padding !important;
-
-                                &.fuse-date-range {
-                                    position: relative;
-
-                                    &:before {
-                                        content: '';
-                                        position: absolute;
-                                        top: $body-cell-padding;
-                                        right: 0;
-                                        bottom: $body-cell-padding;
-                                        left: 0;
-                                    }
-
-                                    &.fuse-date-range-start {
-
-                                        &:before {
-                                            left: $body-cell-padding;
-                                            border-radius: 999px 0 0 999px;
-                                        }
-
-                                        &.fuse-date-range-end,
-                                        &:last-child {
-
-                                            &:before {
-                                                right: $body-cell-padding;
-                                                border-radius: 999px;
-                                            }
-                                        }
-                                    }
-
-                                    &.fuse-date-range-end {
-
-                                        &:before {
-                                            right: $body-cell-padding;
-                                            border-radius: 0 999px 999px 0;
-                                        }
-
-                                        &:first-child {
-
-                                            &:before {
-                                                left: $body-cell-padding;
-                                                border-radius: 999px;
-                                            }
-                                        }
-                                    }
-
-                                    &:first-child {
-
-                                        &:before {
-                                            border-radius: 999px 0 0 999px;
-                                        }
-                                    }
-
-                                    &:last-child {
-
-                                        &:before {
-                                            border-radius: 0 999px 999px 0;
-                                        }
-                                    }
-                                }
-
-                                .mat-calendar-body-cell-content {
-                                    position: relative;
-                                    top: 0;
-                                    left: 0;
-                                    width: 24px;
-                                    height: 24px;
-                                    font-size: 12px;
-                                }
-                            }
-
-                            td.mat-calendar-body-label {
-
-                                + td.mat-calendar-body-cell {
-
-                                    &.fuse-date-range {
-
-                                        &:before {
-                                            border-radius: 999px 0 0 999px;
-                                        }
-
-                                        &.fuse-date-range-start {
-
-                                            &.fuse-date-range-end {
-                                                border-radius: 999px;
-                                            }
-                                        }
-
-                                        &.fuse-date-range-end {
-
-                                            &:before {
-                                                left: $body-cell-padding;
-                                                border-radius: 999px;
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        .time {
-            width: 100%;
-            max-width: 196px;
-        }
-    }
-
-    .start {
-        align-items: flex-start;
-        margin-right: 20px;
-
-        .month {
-
-            .month-label {
-                margin-left: 8px;
-            }
-        }
-    }
-
-    .end {
-        align-items: flex-end;
-        margin-left: 20px;
-
-        .month {
-
-            .month-label {
-                margin-right: 8px;
-            }
-        }
-    }
-}

src/@fuse/components/date-range/date-range.component.ts

@@ -1,682 +0,0 @@
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, OnDestroy, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
-import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { MatCalendarCellCssClasses, MatMonthView } from '@angular/material/datepicker';
-import { Subject } from 'rxjs';
-import * as moment from 'moment';
-import { Moment } from 'moment';
-
-@Component({
-    selector     : 'fuse-date-range',
-    templateUrl  : './date-range.component.html',
-    styleUrls    : ['./date-range.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-    exportAs     : 'fuseDateRange',
-    providers    : [
-        {
-            provide    : NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => FuseDateRangeComponent),
-            multi      : true
-        }
-    ]
-})
-export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnDestroy
-{
-    @Output() readonly rangeChanged: EventEmitter<{ start: string; end: string }> = new EventEmitter<{ start: string; end: string }>();
-    @ViewChild('matMonthView1') private _matMonthView1: MatMonthView<any>;
-    @ViewChild('matMonthView2') private _matMonthView2: MatMonthView<any>;
-    @ViewChild('pickerPanelOrigin', {read: ElementRef}) private _pickerPanelOrigin: ElementRef;
-    @ViewChild('pickerPanel') private _pickerPanel: TemplateRef<any>;
-    @HostBinding('class.fuse-date-range') private _defaultClassNames = true;
-
-    activeDates: { month1: Moment | null; month2: Moment | null } = {
-        month1: null,
-        month2: null
-    };
-    setWhichDate: 'start' | 'end' = 'start';
-    startTimeFormControl: FormControl;
-    endTimeFormControl: FormControl;
-    private _dateFormat: string;
-    private _onChange: (value: any) => void;
-    private _onTouched: (value: any) => void;
-    private _programmaticChange!: boolean;
-    private _range: { start: Moment | null; end: Moment | null } = {
-        start: null,
-        end  : null
-    };
-    private _timeFormat: string;
-    private _timeRange: boolean;
-    private readonly _timeRegExp: RegExp = new RegExp('^(0[0-9]|1[0-9]|2[0-4]|[0-9]):([0-5][0-9])(A|(?:AM)|P|(?:PM))?$', 'i');
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _elementRef: ElementRef,
-        private _overlay: Overlay,
-        private _renderer2: Renderer2,
-        private _viewContainerRef: ViewContainerRef
-    )
-    {
-        this._onChange = (): void => {
-        };
-        this._onTouched = (): void => {
-        };
-        this.dateFormat = 'DD/MM/YYYY';
-        this.timeFormat = '12';
-
-        // Initialize the component
-        this._init();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Setter & getter for dateFormat input
-     *
-     * @param value
-     */
-    @Input()
-    set dateFormat(value: string)
-    {
-        // Return if the values are the same
-        if ( this._dateFormat === value )
-        {
-            return;
-        }
-
-        // Store the value
-        this._dateFormat = value;
-    }
-
-    get dateFormat(): string
-    {
-        return this._dateFormat;
-    }
-
-    /**
-     * Setter & getter for timeFormat input
-     *
-     * @param value
-     */
-    @Input()
-    set timeFormat(value: string)
-    {
-        // Return if the values are the same
-        if ( this._timeFormat === value )
-        {
-            return;
-        }
-
-        // Set format based on the time format input
-        this._timeFormat = value === '12' ? 'hh:mmA' : 'HH:mm';
-    }
-
-    get timeFormat(): string
-    {
-        return this._timeFormat;
-    }
-
-    /**
-     * Setter & getter for timeRange input
-     *
-     * @param value
-     */
-    @Input()
-    set timeRange(value: boolean)
-    {
-        // Return if the values are the same
-        if ( this._timeRange === value )
-        {
-            return;
-        }
-
-        // Store the value
-        this._timeRange = value;
-
-        // If the time range turned off...
-        if ( !value )
-        {
-            this.range = {
-                start: this._range.start.clone().startOf('day'),
-                end  : this._range.end.clone().endOf('day')
-            };
-        }
-    }
-
-    get timeRange(): boolean
-    {
-        return this._timeRange;
-    }
-
-    /**
-     * Setter & getter for range input
-     *
-     * @param value
-     */
-    @Input()
-    set range(value)
-    {
-        if ( !value )
-        {
-            return;
-        }
-
-        // Check if the value is an object and has 'start' and 'end' values
-        if ( !value.start || !value.end )
-        {
-            console.error('Range input must have "start" and "end" properties!');
-
-            return;
-        }
-
-        // Check if we are setting an individual date or both of them
-        const whichDate = value.whichDate || null;
-
-        // Get the start and end dates as moment
-        const start = moment(value.start);
-        const end = moment(value.end);
-
-        // If we are only setting the start date...
-        if ( whichDate === 'start' )
-        {
-            // Set the start date
-            this._range.start = start.clone();
-
-            // If the selected start date is after the end date...
-            if ( this._range.start.isAfter(this._range.end) )
-            {
-                // Set the end date to the start date but keep the end date's time
-                const endDate = start.clone().hours(this._range.end.hours()).minutes(this._range.end.minutes()).seconds(this._range.end.seconds());
-
-                // Test this new end date to see if it's ahead of the start date
-                if ( this._range.start.isBefore(endDate) )
-                {
-                    // If it's, set the new end date
-                    this._range.end = endDate;
-                }
-                else
-                {
-                    // Otherwise, set the end date same as the start date
-                    this._range.end = start.clone();
-                }
-            }
-        }
-
-        // If we are only setting the end date...
-        if ( whichDate === 'end' )
-        {
-            // Set the end date
-            this._range.end = end.clone();
-
-            // If the selected end date is before the start date...
-            if ( this._range.start.isAfter(this._range.end) )
-            {
-                // Set the start date to the end date but keep the start date's time
-                const startDate = end.clone().hours(this._range.start.hours()).minutes(this._range.start.minutes()).seconds(this._range.start.seconds());
-
-                // Test this new end date to see if it's ahead of the start date
-                if ( this._range.end.isAfter(startDate) )
-                {
-                    // If it's, set the new start date
-                    this._range.start = startDate;
-                }
-                else
-                {
-                    // Otherwise, set the start date same as the end date
-                    this._range.start = end.clone();
-                }
-            }
-        }
-
-        // If we are setting both dates...
-        if ( !whichDate )
-        {
-            // Set the start date
-            this._range.start = start.clone();
-
-            // If the start date is before the end date, set the end date as normal.
-            // If the start date is after the end date, set the end date same as the start date.
-            this._range.end = start.isBefore(end) ? end.clone() : start.clone();
-        }
-
-        // Prepare another range object that holds the ISO formatted range dates
-        const range = {
-            start: this._range.start.clone().toISOString(),
-            end  : this._range.end.clone().toISOString()
-        };
-
-        // Emit the range changed event with the range
-        this.rangeChanged.emit(range);
-
-        // Update the model with the range if the change was not a programmatic change
-        // Because programmatic changes trigger writeValue which triggers onChange and onTouched
-        // internally causing them to trigger twice which breaks the form's pristine and touched
-        // statuses.
-        if ( !this._programmaticChange )
-        {
-            this._onTouched(range);
-            this._onChange(range);
-        }
-
-        // Set the active dates
-        this.activeDates = {
-            month1: this._range.start.clone(),
-            month2: this._range.start.clone().add(1, 'month')
-        };
-
-        // Set the time form controls
-        this.startTimeFormControl.setValue(this._range.start.clone().format(this._timeFormat).toString());
-        this.endTimeFormControl.setValue(this._range.end.clone().format(this._timeFormat).toString());
-
-        // Run ngAfterContentInit on month views to trigger
-        // re-render on month views if they are available
-        if ( this._matMonthView1 && this._matMonthView2 )
-        {
-            this._matMonthView1.ngAfterContentInit();
-            this._matMonthView2.ngAfterContentInit();
-        }
-
-        // Reset the programmatic change status
-        this._programmaticChange = false;
-    }
-
-    get range(): any
-    {
-        // Clone the range start and end
-        const start = this._range.start.clone();
-        const end = this._range.end.clone();
-
-        // Build and return the range object
-        return {
-            startDate: start.clone().format(this.dateFormat),
-            startTime: this.timeRange ? start.clone().format(this.timeFormat) : null,
-            endDate  : end.clone().format(this.dateFormat),
-            endTime  : this.timeRange ? end.clone().format(this.timeFormat) : null
-        };
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Control Value Accessor
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Update the form model on change
-     *
-     * @param fn
-     */
-    registerOnChange(fn: any): void
-    {
-        this._onChange = fn;
-    }
-
-    /**
-     * Update the form model on blur
-     *
-     * @param fn
-     */
-    registerOnTouched(fn: any): void
-    {
-        this._onTouched = fn;
-    }
-
-    /**
-     * Write to view from model when the form model changes programmatically
-     *
-     * @param range
-     */
-    writeValue(range: { start: string; end: string }): void
-    {
-        // Set this change as a programmatic one
-        this._programmaticChange = true;
-
-        // Set the range
-        this.range = range;
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-
-        // @ TODO: Workaround until "angular/issues/20007" resolved
-        this.writeValue = (): void => {
-        };
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Open the picker panel
-     */
-    openPickerPanel(): void
-    {
-        // Create the overlay
-        const overlayRef = this._overlay.create({
-            panelClass      : 'fuse-date-range-panel',
-            backdropClass   : '',
-            hasBackdrop     : true,
-            scrollStrategy  : this._overlay.scrollStrategies.reposition(),
-            positionStrategy: this._overlay.position()
-                                  .flexibleConnectedTo(this._pickerPanelOrigin)
-                                  .withPositions([
-                                      {
-                                          originX : 'start',
-                                          originY : 'bottom',
-                                          overlayX: 'start',
-                                          overlayY: 'top',
-                                          offsetY : 8
-                                      },
-                                      {
-                                          originX : 'start',
-                                          originY : 'top',
-                                          overlayX: 'start',
-                                          overlayY: 'bottom',
-                                          offsetY : -8
-                                      }
-                                  ])
-        });
-
-        // Create a portal from the template
-        const templatePortal = new TemplatePortal(this._pickerPanel, this._viewContainerRef);
-
-        // On backdrop click
-        overlayRef.backdropClick().subscribe(() => {
-
-            // If template portal exists and attached...
-            if ( templatePortal && templatePortal.isAttached )
-            {
-                // Detach it
-                templatePortal.detach();
-            }
-
-            // If overlay exists and attached...
-            if ( overlayRef && overlayRef.hasAttached() )
-            {
-                // Detach it
-                overlayRef.detach();
-                overlayRef.dispose();
-            }
-        });
-
-        // Attach the portal to the overlay
-        overlayRef.attach(templatePortal);
-    }
-
-    /**
-     * Get month label
-     *
-     * @param month
-     */
-    getMonthLabel(month: number): string
-    {
-        if ( month === 1 )
-        {
-            return this.activeDates.month1.clone().format('MMMM Y');
-        }
-
-        return this.activeDates.month2.clone().format('MMMM Y');
-    }
-
-    /**
-     * Date class function to add/remove class names to calendar days
-     */
-    dateClass(): any
-    {
-        return (date: Moment): MatCalendarCellCssClasses => {
-
-            // If the date is both start and end date...
-            if ( date.isSame(this._range.start, 'day') && date.isSame(this._range.end, 'day') )
-            {
-                return ['fuse-date-range', 'fuse-date-range-start', 'fuse-date-range-end'];
-            }
-
-            // If the date is the start date...
-            if ( date.isSame(this._range.start, 'day') )
-            {
-                return ['fuse-date-range', 'fuse-date-range-start'];
-            }
-
-            // If the date is the end date...
-            if ( date.isSame(this._range.end, 'day') )
-            {
-                return ['fuse-date-range', 'fuse-date-range-end'];
-            }
-
-            // If the date is in between start and end dates...
-            if ( date.isBetween(this._range.start, this._range.end, 'day') )
-            {
-                return ['fuse-date-range', 'fuse-date-range-mid'];
-            }
-
-            return undefined;
-        };
-    }
-
-    /**
-     * Date filter to enable/disable calendar days
-     */
-    dateFilter(): any
-    {
-        // If we are selecting the end date, disable all the dates that comes before the start date
-        return (date: Moment): boolean => !(this.setWhichDate === 'end' && date.isBefore(this._range.start, 'day'));
-    }
-
-    /**
-     * On selected date change
-     *
-     * @param date
-     */
-    onSelectedDateChange(date: Moment): void
-    {
-        // Create a new range object
-        const newRange = {
-            start    : this._range.start.clone().toISOString(),
-            end      : this._range.end.clone().toISOString(),
-            whichDate: null
-        };
-
-        // Replace either the start or the end date with the new one
-        // depending on which date we are setting
-        if ( this.setWhichDate === 'start' )
-        {
-            newRange.start = moment(newRange.start).year(date.year()).month(date.month()).date(date.date()).toISOString();
-        }
-        else
-        {
-            newRange.end = moment(newRange.end).year(date.year()).month(date.month()).date(date.date()).toISOString();
-        }
-
-        // Append the which date to the new range object
-        newRange.whichDate = this.setWhichDate;
-
-        // Switch which date to set on the next run
-        this.setWhichDate = this.setWhichDate === 'start' ? 'end' : 'start';
-
-        // Set the range
-        this.range = newRange;
-    }
-
-    /**
-     * Go to previous month on both views
-     */
-    prev(): void
-    {
-        this.activeDates.month1 = moment(this.activeDates.month1).subtract(1, 'month');
-        this.activeDates.month2 = moment(this.activeDates.month2).subtract(1, 'month');
-    }
-
-    /**
-     * Go to next month on both views
-     */
-    next(): void
-    {
-        this.activeDates.month1 = moment(this.activeDates.month1).add(1, 'month');
-        this.activeDates.month2 = moment(this.activeDates.month2).add(1, 'month');
-    }
-
-    /**
-     * Update the start time
-     *
-     * @param event
-     */
-    updateStartTime(event): void
-    {
-        // Parse the time
-        const parsedTime = this._parseTime(event.target.value);
-
-        // Go back to the previous value if the form control is not valid
-        if ( this.startTimeFormControl.invalid )
-        {
-            // Override the time
-            const time = this._range.start.clone().format(this._timeFormat);
-
-            // Set the time
-            this.startTimeFormControl.setValue(time);
-
-            // Do not update the range
-            return;
-        }
-
-        // Append the new time to the start date
-        const startDate = this._range.start.clone().hours(parsedTime.hours()).minutes(parsedTime.minutes());
-
-        // If the new start date is after the current end date,
-        // use the end date's time and set the start date again
-        if ( startDate.isAfter(this._range.end) )
-        {
-            const endDateHours = this._range.end.hours();
-            const endDateMinutes = this._range.end.minutes();
-
-            // Set the start date
-            startDate.hours(endDateHours).minutes(endDateMinutes);
-        }
-
-        // If everything is okay, set the new date
-        this.range = {
-            start    : startDate.toISOString(),
-            end      : this._range.end.clone().toISOString(),
-            whichDate: 'start'
-        };
-    }
-
-    /**
-     * Update the end time
-     *
-     * @param event
-     */
-    updateEndTime(event): void
-    {
-        // Parse the time
-        const parsedTime = this._parseTime(event.target.value);
-
-        // Go back to the previous value if the form control is not valid
-        if ( this.endTimeFormControl.invalid )
-        {
-            // Override the time
-            const time = this._range.end.clone().format(this._timeFormat);
-
-            // Set the time
-            this.endTimeFormControl.setValue(time);
-
-            // Do not update the range
-            return;
-        }
-
-        // Append the new time to the end date
-        const endDate = this._range.end.clone().hours(parsedTime.hours()).minutes(parsedTime.minutes());
-
-        // If the new end date is before the current start date,
-        // use the start date's time and set the end date again
-        if ( endDate.isBefore(this._range.start) )
-        {
-            const startDateHours = this._range.start.hours();
-            const startDateMinutes = this._range.start.minutes();
-
-            // Set the end date
-            endDate.hours(startDateHours).minutes(startDateMinutes);
-        }
-
-        // If everything is okay, set the new date
-        this.range = {
-            start    : this._range.start.clone().toISOString(),
-            end      : endDate.toISOString(),
-            whichDate: 'end'
-        };
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Initialize
-     *
-     * @private
-     */
-    private _init(): void
-    {
-        // Start and end time form controls
-        this.startTimeFormControl = new FormControl('', [Validators.pattern(this._timeRegExp)]);
-        this.endTimeFormControl = new FormControl('', [Validators.pattern(this._timeRegExp)]);
-
-        // Set the default range
-        this._programmaticChange = true;
-        this.range = {
-            start: moment().startOf('day').toISOString(),
-            end  : moment().add(1, 'day').endOf('day').toISOString()
-        };
-
-        // Set the default time range
-        this._programmaticChange = true;
-        this.timeRange = true;
-    }
-
-    /**
-     * Parse the time from the inputs
-     *
-     * @param value
-     * @private
-     */
-    private _parseTime(value: string): Moment
-    {
-        // Parse the time using the time regexp
-        const timeArr = value.split(this._timeRegExp).filter(part => part !== '');
-
-        // Get the meridiem
-        const meridiem = timeArr[2] || null;
-
-        // If meridiem exists...
-        if ( meridiem )
-        {
-            // Create a moment using 12-hours format and return it
-            return moment(value, 'hh:mmA').seconds(0);
-        }
-
-        // If meridiem doesn't exist, create a moment using 24-hours format and return in
-        return moment(value, 'HH:mm').seconds(0);
-    }
-}

src/@fuse/components/date-range/date-range.module.ts

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { FuseDateRangeComponent } from '@fuse/components/date-range/date-range.component';
-
-@NgModule({
-    declarations: [
-        FuseDateRangeComponent
-    ],
-    imports     : [
-        CommonModule,
-        ReactiveFormsModule,
-        MatButtonModule,
-        MatDatepickerModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatIconModule,
-        MatMomentDateModule
-    ],
-    exports     : [
-        FuseDateRangeComponent
-    ]
-})
-export class FuseDateRangeModule
-{
-}

src/@fuse/components/date-range/index.ts

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

src/@fuse/components/date-range/public-api.ts

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

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

@@ -116,7 +116,7 @@ fuse-drawer {
     left: 0;
     right: 0;
     z-index: 299;
-    opacity: 0;
+    opacity: 1;
     background-color: rgba(0, 0, 0, 0.6);
 
     /* Fixed mode */

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

@@ -211,6 +211,12 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      */
     ngOnDestroy(): void
     {
+        // Finish the animation
+        if ( this._player )
+        {
+            this._player.finish();
+        }
+
         // Deregister the drawer from the registry
         this._fuseDrawerService.deregisterComponent(this.name);
     }
@@ -338,6 +344,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
 
         // Create the enter animation and attach it to the player
         this._player = this._animationBuilder.build([
+            style({opacity: 0}),
             animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
         ]).create(this._overlay);
 
@@ -346,6 +353,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
 
             // Destroy the player
             this._player.destroy();
+            this._player = null;
         });
 
         // Play the animation
@@ -382,6 +390,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
 
             // Destroy the player
             this._player.destroy();
+            this._player = null;
 
             // If the backdrop still exists...
             if ( this._overlay )

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

@@ -9,7 +9,7 @@ import { CommonModule } from '@angular/common';
     declarations: [
         FuseFullscreenComponent
     ],
-    imports: [
+    imports     : [
         MatButtonModule,
         MatIconModule,
         MatTooltipModule,

src/@fuse/components/loading-bar/index.ts

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

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

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

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

@@ -0,0 +1,7 @@
+fuse-loading-bar {
+    position: fixed;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+    height: 6px;
+}

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

@@ -0,0 +1,82 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subject, takeUntil } from 'rxjs';
+import { FuseLoadingService } from '@fuse/services/loading';
+
+@Component({
+    selector     : 'fuse-loading-bar',
+    templateUrl  : './loading-bar.component.html',
+    styleUrls    : ['./loading-bar.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    exportAs     : 'fuseLoadingBar'
+})
+export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
+{
+    @Input() autoMode: boolean = true;
+    mode: 'determinate' | 'indeterminate';
+    progress: number = 0;
+    show: boolean = false;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseLoadingService: FuseLoadingService)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Auto mode
+        if ( 'autoMode' in changes )
+        {
+            // Set the auto mode in the service
+            this._fuseLoadingService.setAutoMode(coerceBooleanProperty(changes.autoMode.currentValue));
+        }
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to the service
+        this._fuseLoadingService.mode$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+                this.mode = value;
+            });
+
+        this._fuseLoadingService.progress$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+                this.progress = value;
+            });
+
+        this._fuseLoadingService.show$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+                this.show = value;
+            });
+
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(null);
+        this._unsubscribeAll.complete();
+    }
+}

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

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { FuseLoadingBarComponent } from '@fuse/components/loading-bar/loading-bar.component';
+
+@NgModule({
+    declarations: [
+        FuseLoadingBarComponent
+    ],
+    imports     : [
+        CommonModule,
+        MatProgressBarModule
+    ],
+    exports     : [
+        FuseLoadingBarComponent
+    ]
+})
+export class FuseLoadingBarModule
+{
+}

src/@fuse/components/loading-bar/public-api.ts

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

src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { IsActiveMatchOptions } from '@angular/router';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subject, takeUntil } from 'rxjs';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -10,7 +9,6 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 @Component({
     selector       : 'fuse-horizontal-navigation-basic-item',
     templateUrl    : './basic.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy
@@ -77,7 +75,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 }

src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts

@@ -1,8 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { MatMenu } from '@angular/material/menu';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subject, takeUntil } from 'rxjs';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -10,7 +9,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-horizontal-navigation-branch-item',
     templateUrl    : './branch.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy
@@ -65,7 +63,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 

src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subject, takeUntil } from 'rxjs';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -8,7 +7,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-horizontal-navigation-divider-item',
     templateUrl    : './divider.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
@@ -57,7 +55,7 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 }

src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { Subject, takeUntil } from 'rxjs';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -8,7 +7,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-horizontal-navigation-spacer-item',
     templateUrl    : './spacer.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
@@ -57,7 +55,7 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 }

src/@fuse/components/navigation/horizontal/horizontal.component.ts

@@ -76,7 +76,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
         this._fuseNavigationService.deregisterComponent(this.name);
 
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 

src/@fuse/components/navigation/vertical/components/aside/aside.component.ts

@@ -1,8 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { filter, Subject, takeUntil } from 'rxjs';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -10,7 +9,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-vertical-navigation-aside-item',
     templateUrl    : './aside.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy
@@ -99,7 +97,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 

src/@fuse/components/navigation/vertical/components/basic/basic.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { IsActiveMatchOptions } from '@angular/router';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subject, takeUntil } from 'rxjs';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -10,7 +9,6 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 @Component({
     selector       : 'fuse-vertical-navigation-basic-item',
     templateUrl    : './basic.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy
@@ -77,7 +75,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 }

src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts

@@ -1,8 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { filter, Subject, takeUntil } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@@ -11,7 +10,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-vertical-navigation-collapsable-item',
     templateUrl    : './collapsable.component.html',
-    styles         : [],
     animations     : fuseAnimations,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -177,7 +175,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 

src/@fuse/components/navigation/vertical/components/divider/divider.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subject, takeUntil } from 'rxjs';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -8,7 +7,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-vertical-navigation-divider-item',
     templateUrl    : './divider.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy
@@ -57,7 +55,7 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 }

src/@fuse/components/navigation/vertical/components/group/group.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subject, takeUntil } from 'rxjs';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -9,7 +8,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-vertical-navigation-group-item',
     templateUrl    : './group.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy
@@ -63,7 +61,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 

src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { Subject, takeUntil } from 'rxjs';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -8,7 +7,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-vertical-navigation-spacer-item',
     templateUrl    : './spacer.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy
@@ -57,7 +55,7 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 }

src/@fuse/components/navigation/vertical/styles/appearances/compact.scss

@@ -1,20 +1,20 @@
 /* Variables */
-$fuse-vertical-navigation-compact-width: 112;
+$fuse-vertical-navigation-compact-width: 112px;
 
 fuse-vertical-navigation {
 
     /* Compact appearance overrides */
     &.fuse-vertical-navigation-appearance-compact {
-        width: #{$fuse-vertical-navigation-compact-width}px;
-        min-width: #{$fuse-vertical-navigation-compact-width}px;
-        max-width: #{$fuse-vertical-navigation-compact-width}px;
+        width: $fuse-vertical-navigation-compact-width;
+        min-width: $fuse-vertical-navigation-compact-width;
+        max-width: $fuse-vertical-navigation-compact-width;
 
         /* Left positioned */
         &.fuse-vertical-navigation-position-left {
 
             /* Side mode */
             &.fuse-vertical-navigation-mode-side {
-                margin-left: -#{$fuse-vertical-navigation-compact-width}px;
+                margin-left: -$fuse-vertical-navigation-compact-width;
             }
 
             /* Opened */
@@ -28,7 +28,7 @@ fuse-vertical-navigation {
 
             /* Side mode */
             &.fuse-vertical-navigation-mode-side {
-                margin-right: -#{$fuse-vertical-navigation-compact-width}px;
+                margin-right: -$fuse-vertical-navigation-compact-width;
             }
 
             /* Opened */
@@ -39,7 +39,7 @@ fuse-vertical-navigation {
             /* Aside wrapper */
             .fuse-vertical-navigation-aside-wrapper {
                 left: auto;
-                right: #{$fuse-vertical-navigation-compact-width}px;
+                right: $fuse-vertical-navigation-compact-width;
             }
         }
 
@@ -104,7 +104,7 @@ fuse-vertical-navigation {
 
         /* Aside wrapper */
         .fuse-vertical-navigation-aside-wrapper {
-            left: #{$fuse-vertical-navigation-compact-width}px;
+            left: $fuse-vertical-navigation-compact-width;
         }
     }
 }

src/@fuse/components/navigation/vertical/styles/appearances/default.scss

@@ -1,5 +1,5 @@
 /* Variables */
-$fuse-vertical-navigation-width: 280;
+$fuse-vertical-navigation-width: 280px;
 
 fuse-vertical-navigation {
     position: sticky;
@@ -7,9 +7,9 @@ fuse-vertical-navigation {
     flex-direction: column;
     flex: 1 0 auto;
     top: 0;
-    width: #{$fuse-vertical-navigation-width}px;
-    min-width: #{$fuse-vertical-navigation-width}px;
-    max-width: #{$fuse-vertical-navigation-width}px;
+    width: $fuse-vertical-navigation-width;
+    min-width: $fuse-vertical-navigation-width;
+    max-width: $fuse-vertical-navigation-width;
     height: 100vh;
     min-height: 100vh;
     max-height: 100vh;
@@ -45,7 +45,7 @@ fuse-vertical-navigation {
 
         /* Side mode */
         &.fuse-vertical-navigation-mode-side {
-            margin-left: -#{$fuse-vertical-navigation-width}px;
+            margin-left: -$fuse-vertical-navigation-width;
 
             &.fuse-vertical-navigation-opened {
                 margin-left: 0;
@@ -73,7 +73,7 @@ fuse-vertical-navigation {
 
         /* Side mode */
         &.fuse-vertical-navigation-mode-side {
-            margin-right: -#{$fuse-vertical-navigation-width}px;
+            margin-right: -$fuse-vertical-navigation-width;
 
             &.fuse-vertical-navigation-opened {
                 margin-right: 0;
@@ -170,8 +170,8 @@ fuse-vertical-navigation {
         flex-direction: column;
         top: 0;
         bottom: 0;
-        left: #{$fuse-vertical-navigation-width}px;
-        width: #{$fuse-vertical-navigation-width}px;
+        left: $fuse-vertical-navigation-width;
+        width: $fuse-vertical-navigation-width;
         height: 100%;
         z-index: 5;
         overflow-x: hidden;
@@ -196,7 +196,7 @@ fuse-vertical-navigation {
 
         .fuse-vertical-navigation-aside-wrapper {
             left: auto;
-            right: #{$fuse-vertical-navigation-width}px;
+            right: $fuse-vertical-navigation-width;
         }
     }
 

src/@fuse/components/navigation/vertical/styles/appearances/dense.scss

@@ -1,6 +1,6 @@
 /* Variables */
-$fuse-vertical-navigation-width: 280;
-$fuse-vertical-navigation-dense-width: 80;
+$fuse-vertical-navigation-width: 280px;
+$fuse-vertical-navigation-dense-width: 80px;
 
 fuse-vertical-navigation {
 
@@ -8,16 +8,16 @@ fuse-vertical-navigation {
     &.fuse-vertical-navigation-appearance-dense {
 
         &:not(.fuse-vertical-navigation-mode-over) {
-            width: #{$fuse-vertical-navigation-dense-width}px;
-            min-width: #{$fuse-vertical-navigation-dense-width}px;
-            max-width: #{$fuse-vertical-navigation-dense-width}px;
+            width: $fuse-vertical-navigation-dense-width;
+            min-width: $fuse-vertical-navigation-dense-width;
+            max-width: $fuse-vertical-navigation-dense-width;
 
             /* Left positioned */
             &.fuse-vertical-navigation-position-left {
 
                 /* Side mode */
                 &.fuse-vertical-navigation-mode-side {
-                    margin-left: -#{$fuse-vertical-navigation-dense-width}px;
+                    margin-left: -$fuse-vertical-navigation-dense-width;
                 }
 
                 /* Opened */
@@ -31,7 +31,7 @@ fuse-vertical-navigation {
 
                 /* Side mode */
                 &.fuse-vertical-navigation-mode-side {
-                    margin-right: -#{$fuse-vertical-navigation-dense-width}px;
+                    margin-right: -$fuse-vertical-navigation-dense-width;
                 }
 
                 /* Opened */
@@ -42,14 +42,14 @@ fuse-vertical-navigation {
                 /* Aside wrapper */
                 .fuse-vertical-navigation-aside-wrapper {
                     left: auto;
-                    right: #{$fuse-vertical-navigation-dense-width}px;
+                    right: $fuse-vertical-navigation-dense-width;
                 }
 
                 &.fuse-vertical-navigation-hover {
 
                     .fuse-vertical-navigation-aside-wrapper {
                         left: auto;
-                        right: #{$fuse-vertical-navigation-width}px;
+                        right: $fuse-vertical-navigation-width;
                     }
                 }
             }
@@ -69,9 +69,9 @@ fuse-vertical-navigation {
                     .fuse-vertical-navigation-item-wrapper {
 
                         .fuse-vertical-navigation-item {
-                            width: #{$fuse-vertical-navigation-width}px - 24px;
-                            min-width: #{$fuse-vertical-navigation-width}px - 24px;
-                            max-width: #{$fuse-vertical-navigation-width}px - 24px;
+                            width: $fuse-vertical-navigation-dense-width - 24px;
+                            min-width: $fuse-vertical-navigation-dense-width - 24px;
+                            max-width: $fuse-vertical-navigation-dense-width - 24px;
 
                             .fuse-vertical-navigation-item-arrow,
                             .fuse-vertical-navigation-item-badge,
@@ -142,20 +142,23 @@ fuse-vertical-navigation {
 
         /* Aside wrapper */
         .fuse-vertical-navigation-aside-wrapper {
-            left: #{$fuse-vertical-navigation-dense-width}px;
+            left: $fuse-vertical-navigation-dense-width;
         }
 
         /* Hover */
         &.fuse-vertical-navigation-hover {
 
             .fuse-vertical-navigation-wrapper {
-                width: #{$fuse-vertical-navigation-width}px;
+                width: $fuse-vertical-navigation-width;
 
                 .fuse-vertical-navigation-content {
 
                     .fuse-vertical-navigation-item-wrapper {
 
                         .fuse-vertical-navigation-item {
+                            width: $fuse-vertical-navigation-width - 24px;
+                            min-width: $fuse-vertical-navigation-width - 24px;
+                            max-width: $fuse-vertical-navigation-width - 24px;
 
                             .fuse-vertical-navigation-item-arrow,
                             .fuse-vertical-navigation-item-badge,
@@ -170,7 +173,7 @@ fuse-vertical-navigation {
             }
 
             .fuse-vertical-navigation-aside-wrapper {
-                left: #{$fuse-vertical-navigation-width}px;
+                left: $fuse-vertical-navigation-width;
             }
         }
     }

src/@fuse/components/navigation/vertical/styles/appearances/thin.scss

@@ -1,19 +1,19 @@
 /* Variables */
-$fuse-vertical-navigation-thin-width: 80;
+$fuse-vertical-navigation-thin-width: 80px;
 
 fuse-vertical-navigation {
 
     /* Thin appearance overrides */
     &.fuse-vertical-navigation-appearance-thin {
-        width: #{$fuse-vertical-navigation-thin-width}px;
-        min-width: #{$fuse-vertical-navigation-thin-width}px;
-        max-width: #{$fuse-vertical-navigation-thin-width}px;
+        width: $fuse-vertical-navigation-thin-width;
+        min-width: $fuse-vertical-navigation-thin-width;
+        max-width: $fuse-vertical-navigation-thin-width;
 
         /* Left positioned */
         &.fuse-vertical-navigation-position-left {
 
             &.fuse-vertical-navigation-mode-side {
-                margin-left: -#{$fuse-vertical-navigation-thin-width}px;
+                margin-left: -$fuse-vertical-navigation-thin-width;
             }
 
             &.fuse-vertical-navigation-opened {
@@ -25,7 +25,7 @@ fuse-vertical-navigation {
         &.fuse-vertical-navigation-position-right {
 
             &.fuse-vertical-navigation-mode-side {
-                margin-right: -#{$fuse-vertical-navigation-thin-width}px;
+                margin-right: -$fuse-vertical-navigation-thin-width;
             }
 
             &.fuse-vertical-navigation-opened {
@@ -34,7 +34,7 @@ fuse-vertical-navigation {
 
             .fuse-vertical-navigation-aside-wrapper {
                 left: auto;
-                right: #{$fuse-vertical-navigation-thin-width}px;
+                right: $fuse-vertical-navigation-thin-width;
             }
         }
 
@@ -91,7 +91,7 @@ fuse-vertical-navigation {
 
         /* Aside wrapper */
         .fuse-vertical-navigation-aside-wrapper {
-            left: #{$fuse-vertical-navigation-thin-width}px;
+            left: $fuse-vertical-navigation-thin-width;
         }
     }
 }

src/@fuse/components/navigation/vertical/vertical.component.ts

@@ -2,8 +2,7 @@ import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, E
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { NavigationEnd, Router } from '@angular/router';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
-import { merge, ReplaySubject, Subject, Subscription } from 'rxjs';
-import { delay, filter, takeUntil } from 'rxjs/operators';
+import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@@ -382,7 +381,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
         this._fuseNavigationService.deregisterComponent(this.name);
 
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 

src/@fuse/directives/scroll-reset/scroll-reset.directive.ts

@@ -1,7 +1,6 @@
 import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { filter, Subject, takeUntil } from 'rxjs';
 
 @Directive({
     selector: '[fuseScrollReset]',
@@ -47,7 +46,7 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 }

src/@fuse/directives/scrollbar/scrollbar.directive.ts

@@ -2,8 +2,7 @@ import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChang
 import { Router } from '@angular/router';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Platform } from '@angular/cdk/platform';
-import { fromEvent, Subject } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
+import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
 import PerfectScrollbar from 'perfect-scrollbar';
 import { merge } from 'lodash-es';
 import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
@@ -138,7 +137,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
         this._destroy();
 
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 

src/@fuse/fuse.module.ts

@@ -1,20 +1,30 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { FuseConfirmationModule } from '@fuse/services/confirmation';
+import { FuseLoadingModule } from '@fuse/services/loading';
 import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
 import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
-import { FuseTailwindConfigModule } from '@fuse/services/tailwind/tailwind.module';
 import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
 
 @NgModule({
     imports  : [
         FuseConfirmationModule,
+        FuseLoadingModule,
         FuseMediaWatcherModule,
         FuseSplashScreenModule,
-        FuseTailwindConfigModule,
         FuseUtilsModule
     ],
     providers: [
+        {
+            // Disable 'theme' sanity check
+            provide : MATERIAL_SANITY_CHECKS,
+            useValue: {
+                doctype: true,
+                theme  : false,
+                version: true
+            }
+        },
         {
             // Use the 'fill' appearance on Angular Material form fields by default
             provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,

src/@fuse/lib/mock-api/mock-api.interceptor.ts

@@ -1,7 +1,6 @@
 import { Inject, Injectable } from '@angular/core';
 import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
-import { Observable, of, throwError } from 'rxjs';
-import { delay, switchMap } from 'rxjs/operators';
+import { delay, Observable, of, switchMap, throwError } from 'rxjs';
 import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
 import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
 

src/@fuse/lib/mock-api/mock-api.request-handler.ts

@@ -1,6 +1,5 @@
 import { HttpRequest } from '@angular/common/http';
-import { Observable, of, throwError } from 'rxjs';
-import { take } from 'rxjs/operators';
+import { Observable, of, take, throwError } from 'rxjs';
 import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
 
 export class FuseMockApiHandler

src/@fuse/lib/mock-api/mock-api.service.ts

@@ -9,11 +9,14 @@ import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
 export class FuseMockApiService
 {
     private _handlers: { [key: string]: Map<string, FuseMockApiHandler> } = {
-        'delete': new Map<string, FuseMockApiHandler>(),
-        'get'   : new Map<string, FuseMockApiHandler>(),
-        'patch' : new Map<string, FuseMockApiHandler>(),
-        'post'  : new Map<string, FuseMockApiHandler>(),
-        'put'   : new Map<string, FuseMockApiHandler>()
+        'get'    : new Map<string, FuseMockApiHandler>(),
+        'post'   : new Map<string, FuseMockApiHandler>(),
+        'patch'  : new Map<string, FuseMockApiHandler>(),
+        'delete' : new Map<string, FuseMockApiHandler>(),
+        'put'    : new Map<string, FuseMockApiHandler>(),
+        'head'   : new Map<string, FuseMockApiHandler>(),
+        'jsonp'  : new Map<string, FuseMockApiHandler>(),
+        'options': new Map<string, FuseMockApiHandler>()
     };
 
     /**
@@ -86,18 +89,7 @@ export class FuseMockApiService
     }
 
     /**
-     * Register a DELETE request handler
-     *
-     * @param url - URL address of the mocked API endpoint
-     * @param delay - Delay of the response in milliseconds
-     */
-    onDelete(url: string, delay?: number): FuseMockApiHandler
-    {
-        return this._registerHandler('delete', url, delay);
-    }
-
-    /**
-     * Register a GET request handler
+     * Register GET request handler
      *
      * @param url - URL address of the mocked API endpoint
      * @param delay - Delay of the response in milliseconds
@@ -108,18 +100,7 @@ export class FuseMockApiService
     }
 
     /**
-     * Register a PATCH request handler
-     *
-     * @param url - URL address of the mocked API endpoint
-     * @param delay - Delay of the response in milliseconds
-     */
-    onPatch(url: string, delay?: number): FuseMockApiHandler
-    {
-        return this._registerHandler('patch', url, delay);
-    }
-
-    /**
-     * Register a POST request handler
+     * Register POST request handler
      *
      * @param url - URL address of the mocked API endpoint
      * @param delay - Delay of the response in milliseconds
@@ -130,7 +111,29 @@ export class FuseMockApiService
     }
 
     /**
-     * Register a PUT request handler
+     * Register PATCH request handler
+     *
+     * @param url - URL address of the mocked API endpoint
+     * @param delay - Delay of the response in milliseconds
+     */
+    onPatch(url: string, delay?: number): FuseMockApiHandler
+    {
+        return this._registerHandler('patch', url, delay);
+    }
+
+    /**
+     * Register DELETE request handler
+     *
+     * @param url - URL address of the mocked API endpoint
+     * @param delay - Delay of the response in milliseconds
+     */
+    onDelete(url: string, delay?: number): FuseMockApiHandler
+    {
+        return this._registerHandler('delete', url, delay);
+    }
+
+    /**
+     * Register PUT request handler
      *
      * @param url - URL address of the mocked API endpoint
      * @param delay - Delay of the response in milliseconds
@@ -140,6 +143,39 @@ export class FuseMockApiService
         return this._registerHandler('put', url, delay);
     }
 
+    /**
+     * Register HEAD request handler
+     *
+     * @param url - URL address of the mocked API endpoint
+     * @param delay - Delay of the response in milliseconds
+     */
+    onHead(url: string, delay?: number): FuseMockApiHandler
+    {
+        return this._registerHandler('head', url, delay);
+    }
+
+    /**
+     * Register JSONP request handler
+     *
+     * @param url - URL address of the mocked API endpoint
+     * @param delay - Delay of the response in milliseconds
+     */
+    onJsonp(url: string, delay?: number): FuseMockApiHandler
+    {
+        return this._registerHandler('jsonp', url, delay);
+    }
+
+    /**
+     * Register OPTIONS request handler
+     *
+     * @param url - URL address of the mocked API endpoint
+     * @param delay - Delay of the response in milliseconds
+     */
+    onOptions(url: string, delay?: number): FuseMockApiHandler
+    {
+        return this._registerHandler('options', url, delay);
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------

src/@fuse/lib/mock-api/mock-api.types.ts

@@ -8,6 +8,9 @@ export type FuseMockApiReplyCallback =
 export type FuseMockApiMethods =
     | 'get'
     | 'post'
-    | 'put'
     | 'patch'
-    | 'delete';
+    | 'delete'
+    | 'put'
+    | 'head'
+    | 'jsonp'
+    | 'options';

src/@fuse/services/confirmation/confirmation.module.ts

@@ -10,7 +10,7 @@ import { CommonModule } from '@angular/common';
     declarations: [
         FuseConfirmationDialogComponent
     ],
-    imports: [
+    imports     : [
         MatButtonModule,
         MatDialogModule,
         MatIconModule,

src/@fuse/services/confirmation/confirmation.service.ts

@@ -51,7 +51,8 @@ export class FuseConfirmationService
         return this._matDialog.open(FuseConfirmationDialogComponent, {
             autoFocus   : false,
             disableClose: !userConfig.dismissible,
-            data        : userConfig
+            data        : userConfig,
+            panelClass  : 'fuse-confirmation-dialog-panel'
         });
     }
 }

src/@fuse/services/confirmation/dialog/dialog.component.html

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col md:w-128 -m-6">
+<div class="relative flex flex-col w-full h-full">
 
     <!-- Dismiss button -->
     <ng-container *ngIf="data.dismissible">
@@ -14,7 +14,7 @@
     </ng-container>
 
     <!-- Content -->
-    <div class="flex flex-col sm:flex-row items-center sm:items-start p-8 pb-6 sm:pb-8">
+    <div class="flex flex-col sm:flex-row flex-auto items-center sm:items-start p-8 pb-6 sm:pb-8">
 
         <!-- Icon -->
         <ng-container *ngIf="data.icon.show">

src/@fuse/services/confirmation/dialog/dialog.component.ts

@@ -5,6 +5,20 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
 @Component({
     selector     : 'fuse-confirmation-dialog',
     templateUrl  : './dialog.component.html',
+    styles       : [
+        /* language=SCSS */
+        `
+            .fuse-confirmation-dialog-panel {
+                @screen md {
+                    @apply w-128;
+                }
+
+                .mat-dialog-container {
+                    padding: 0 !important;
+                }
+            }
+        `
+    ],
     encapsulation: ViewEncapsulation.None
 })
 export class FuseConfirmationDialogComponent implements OnInit

src/@fuse/services/loading/index.ts

@@ -0,0 +1 @@
+export * from '@fuse/services/loading/public-api';

src/@fuse/services/loading/loading.interceptor.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { finalize, Observable } from 'rxjs';
+import { FuseLoadingService } from '@fuse/services/loading/loading.service';
+
+@Injectable()
+export class FuseLoadingInterceptor implements HttpInterceptor
+{
+    handleRequestsAutomatically: boolean;
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _fuseLoadingService: FuseLoadingService
+    )
+    {
+        // Subscribe to the auto
+        this._fuseLoadingService.auto$
+            .subscribe((value) => {
+                this.handleRequestsAutomatically = value;
+            });
+    }
+
+    /**
+     * Intercept
+     *
+     * @param req
+     * @param next
+     */
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
+    {
+        // If the Auto mode is turned off, do nothing
+        if ( !this.handleRequestsAutomatically )
+        {
+            return next.handle(req);
+        }
+
+        // Set the loading status to true
+        this._fuseLoadingService._setLoadingStatus(true, req.url);
+
+        return next.handle(req).pipe(
+            finalize(() => {
+                // Set the status to false if there are any errors or the request is completed
+                this._fuseLoadingService._setLoadingStatus(false, req.url);
+            }));
+    }
+}

src/@fuse/services/loading/loading.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor';
+
+@NgModule({
+    providers: [
+        {
+            provide : HTTP_INTERCEPTORS,
+            useClass: FuseLoadingInterceptor,
+            multi   : true
+        }
+    ]
+})
+export class FuseLoadingModule
+{
+}

src/@fuse/services/loading/loading.service.ts

@@ -0,0 +1,146 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FuseLoadingService
+{
+    private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+    private _mode$: BehaviorSubject<'determinate' | 'indeterminate'> = new BehaviorSubject<'determinate' | 'indeterminate'>('indeterminate');
+    private _progress$: BehaviorSubject<number | null> = new BehaviorSubject<number | null>(0);
+    private _show$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    private _urlMap: Map<string, boolean> = new Map<string, boolean>();
+
+    /**
+     * Constructor
+     */
+    constructor(private _httpClient: HttpClient)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Getter for auto mode
+     */
+    get auto$(): Observable<boolean>
+    {
+        return this._auto$.asObservable();
+    }
+
+    /**
+     * Getter for mode
+     */
+    get mode$(): Observable<'determinate' | 'indeterminate'>
+    {
+        return this._mode$.asObservable();
+    }
+
+    /**
+     * Getter for progress
+     */
+    get progress$(): Observable<number>
+    {
+        return this._progress$.asObservable();
+    }
+
+    /**
+     * Getter for show
+     */
+    get show$(): Observable<boolean>
+    {
+        return this._show$.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Show the loading bar
+     */
+    show(): void
+    {
+        this._show$.next(true);
+    }
+
+    /**
+     * Hide the loading bar
+     */
+    hide(): void
+    {
+        this._show$.next(false);
+    }
+
+    /**
+     * Set the auto mode
+     *
+     * @param value
+     */
+    setAutoMode(value: boolean): void
+    {
+        this._auto$.next(value);
+    }
+
+    /**
+     * Set the mode
+     *
+     * @param value
+     */
+    setMode(value: 'determinate' | 'indeterminate'): void
+    {
+        this._mode$.next(value);
+    }
+
+    /**
+     * Set the progress of the bar manually
+     *
+     * @param value
+     */
+    setProgress(value: number): void
+    {
+        if ( value < 0 || value > 100 )
+        {
+            console.error('Progress value must be between 0 and 100!');
+            return;
+        }
+
+        this._progress$.next(value);
+    }
+
+    /**
+     * Sets the loading status on the given url
+     *
+     * @param status
+     * @param url
+     */
+    _setLoadingStatus(status: boolean, url: string): void
+    {
+        // Return if the url was not provided
+        if ( !url )
+        {
+            console.error('The request URL must be provided!');
+            return;
+        }
+
+        if ( status === true )
+        {
+            this._urlMap.set(url, status);
+            this._show$.next(true);
+        }
+        else if ( status === false && this._urlMap.has(url) )
+        {
+            this._urlMap.delete(url);
+        }
+
+        // Only set the status to 'false' if all outgoing requests are completed
+        if ( this._urlMap.size === 0 )
+        {
+            this._show$.next(false);
+        }
+    }
+}

src/@fuse/services/loading/public-api.ts

@@ -0,0 +1,2 @@
+export * from '@fuse/services/loading/loading.service';
+export * from '@fuse/services/loading/loading.module';

src/@fuse/services/media-watcher/media-watcher.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
-import { Observable, ReplaySubject } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
-import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
+import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
+import { fromPairs } from 'lodash-es';
+import { FuseConfigService } from '@fuse/services/config';
 
 @Injectable()
 export class FuseMediaWatcherService
@@ -14,11 +14,12 @@ export class FuseMediaWatcherService
      */
     constructor(
         private _breakpointObserver: BreakpointObserver,
-        private _fuseTailwindConfigService: FuseTailwindService
+        private _fuseConfigService: FuseConfigService
     )
     {
-        this._fuseTailwindConfigService.tailwindConfig$.pipe(
-            switchMap(config => this._breakpointObserver.observe(Object.values(config.breakpoints)).pipe(
+        this._fuseConfigService.config$.pipe(
+            map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
+            switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
                 map((state) => {
 
                     // Prepare the observable values and set their defaults
@@ -30,7 +31,7 @@ export class FuseMediaWatcherService
                     for ( const [query] of matchingBreakpoints )
                     {
                         // Find the alias of the matching query
-                        const matchingAlias = Object.entries(config.breakpoints).find(([alias, q]) => q === query)[0];
+                        const matchingAlias = Object.entries(screens).find(([alias, q]) => q === query)[0];
 
                         // Add the matching query to the observable values
                         if ( matchingAlias )

src/@fuse/services/splash-screen/splash-screen.service.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { NavigationEnd, Router } from '@angular/router';
-import { filter, take } from 'rxjs/operators';
+import { filter, take } from 'rxjs';
 
 @Injectable()
 export class FuseSplashScreenService

src/@fuse/services/tailwind/index.ts

@@ -1 +0,0 @@
-export * from '@fuse/services/tailwind/public-api';

src/@fuse/services/tailwind/public-api.ts

@@ -1,2 +0,0 @@
-export * from '@fuse/services/tailwind/tailwind.module';
-export * from '@fuse/services/tailwind/tailwind.service';

src/@fuse/services/tailwind/tailwind.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
-
-@NgModule({
-    providers: [
-        FuseTailwindService
-    ]
-})
-export class FuseTailwindConfigModule
-{
-    /**
-     * Constructor
-     */
-    constructor(private _fuseTailwindConfigService: FuseTailwindService)
-    {
-    }
-}

src/@fuse/services/tailwind/tailwind.service.ts

@@ -1,58 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable, ReplaySubject } from 'rxjs';
-import { fromPairs, map } from 'lodash-es';
-import * as extractedTailwindConfigStyle from '@fuse/styles/core/tailwind-config.scss';
-
-@Injectable()
-export class FuseTailwindService
-{
-    private _tailwindConfig: ReplaySubject<any> = new ReplaySubject<any>(1);
-
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-        // Prepare the config object
-        const config: any = {};
-
-        // Extract the style from the class
-        const regexpForClass = /\.fuse-tailwind-extracted-config\s\{([\s\S]*)\}/g;
-        const style = regexpForClass.exec(extractedTailwindConfigStyle.default)[1].trim();
-
-        // Extract the rules
-        const regexp = /(--[\s\S]*?):'([\s\S]*?)';/g;
-        let rules = regexp.exec(style);
-
-        // Add to the config
-        while ( rules !== null )
-        {
-            const configGroup = /--([\s\S]*?)-/g.exec(rules[1])[1];
-            if ( !config[configGroup] )
-            {
-                config[configGroup] = {};
-            }
-
-            config[configGroup][rules[1].replace(/(--[\s\S]*?-)/g, '')] = rules[2];
-            rules = regexp.exec(style);
-        }
-
-        // Parse the themes objects
-        config.themes = fromPairs(map(config.themes, (value, key) => [key, JSON.parse(value)]));
-
-        // Execute the observable with the config
-        this._tailwindConfig.next(config);
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Getter for _tailwindConfig
-     */
-    get tailwindConfig$(): Observable<any>
-    {
-        return this._tailwindConfig.asObservable();
-    }
-}

src/@fuse/styles/core/tailwind-config.scss

@@ -1,6 +0,0 @@
-/* ----------------------------------------------------------------------------------------------------- */
-/* @ Any configuration we need from Tailwind's config file will be extracted here so we can import this
-/* @ file from "config.ts" to access the extracted configuration from TypeScript
-/* ----------------------------------------------------------------------------------------------------- */
-@variants fuse-tailwind-extracted-config {
-}

src/@fuse/styles/main.scss

@@ -1,13 +1,9 @@
-/* 1. Core */
-@import 'core/tailwind-config';
-
-/* 2. Components */
+/* 1. Components */
 @import 'components/example-viewer';
 @import 'components/input';
 
-/* 3. Overrides */
+/* 2. Overrides */
 @import 'overrides/angular-material';
-@import 'overrides/fullcalendar';
 @import 'overrides/highlightjs';
 @import 'overrides/perfect-scrollbar';
 @import 'overrides/quill';

src/@fuse/styles/overrides/angular-material.scss

@@ -434,7 +434,7 @@
 
             /* Border color */
             .mat-form-field-flex {
-                @apply border-warn #{'!important'};
+                @apply border-warn dark:border-warn #{'!important'};
             }
         }
     }
@@ -446,7 +446,7 @@
 
             /* Background color */
             .mat-form-field-flex {
-                @apply bg-card #{'!important'};
+                @apply bg-card dark:bg-card #{'!important'};
             }
         }
     }
@@ -458,7 +458,7 @@
 
             /* Border color */
             .mat-form-field-flex {
-                @apply border-primary #{'!important'};
+                @apply border-primary dark:border-primary #{'!important'};
             }
         }
     }

src/@fuse/styles/overrides/fullcalendar.scss

@@ -1,680 +0,0 @@
-/* ----------------------------------------------------------------------------------------------------- */
-/*  @ FullCalendar overrides
-/* ----------------------------------------------------------------------------------------------------- */
-.fc {
-
-    .fc-view-container {
-
-        /* Day Grid - Month view */
-        .fc-view.fc-dayGridMonth-view {
-
-            .fc-head {
-
-                > tr > .fc-head-container {
-                    border: none;
-
-                    .fc-row {
-
-                        .fc-day-header {
-                            border-color: var(--fuse-divider);
-
-                            span {
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                padding-top: 8px;
-                                font-size: 12px;
-                                font-weight: 500;
-                                text-transform: uppercase;
-                                @apply text-secondary;
-                            }
-                        }
-                    }
-                }
-            }
-
-            .fc-body {
-
-                > tr > .fc-widget-content {
-                    border: none;
-
-                    .fc-day-grid {
-
-                        .fc-week {
-
-                            .fc-bg {
-
-                                .fc-day {
-                                    border-color: var(--fuse-divider);
-
-                                    &.fc-today {
-                                        background: none;
-                                    }
-                                }
-                            }
-
-                            .fc-content-skeleton {
-
-                                .fc-day-top {
-                                    text-align: center;
-
-                                    &.fc-other-month {
-                                        opacity: 1;
-
-                                        .fc-day-number {
-                                            @apply text-hint;
-                                        }
-                                    }
-
-                                    &.fc-today {
-
-                                        .fc-day-number {
-                                            @apply bg-primary text-on-primary;
-                                        }
-                                    }
-
-                                    .fc-day-number {
-                                        display: inline-flex;
-                                        align-items: center;
-                                        justify-content: center;
-                                        width: 22px;
-                                        height: 21px;
-                                        margin: 4px 0;
-                                        font-size: 12px;
-                                        border-radius: 50%;
-                                        float: none;
-                                    }
-                                }
-
-                                .fc-event-container {
-
-                                    .fc-day-grid-event {
-                                        display: flex;
-                                        align-items: center;
-                                        height: 22px;
-                                        min-height: 22px;
-                                        max-height: 22px;
-                                        margin: 0 6px 4px 6px;
-                                        padding: 0 5px;
-                                        font-size: 12px;
-                                        border-radius: 4px;
-                                        border: none;
-                                        cursor: pointer;
-
-                                        @screen sm {
-                                            padding: 0 8px;
-                                        }
-                                    }
-                                }
-
-                                .fc-more {
-                                    padding: 0 3px;
-                                    font-size: 12px;
-                                    font-weight: 500;
-                                    white-space: nowrap;
-                                    @apply text-secondary;
-
-                                    @screen sm {
-                                        padding: 0 6px;
-                                    }
-                                }
-                            }
-
-                            .fc-highlight-skeleton {
-
-                                .fc-highlight {
-                                    position: relative;
-                                    opacity: 1;
-                                    @apply bg-gray-100;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .fc-popover {
-                @apply bg-card;
-
-                &.fc-more-popover {
-                    border: none;
-                    border-radius: 4px;
-                    @apply shadow-2xl;
-
-                    .fc-header {
-                        height: 32px;
-                        min-height: 32px;
-                        max-height: 32px;
-                        padding: 0 8px;
-                        @apply bg-hover;
-
-                        .fc-title {
-                            margin: 0;
-                            padding: 0;
-                            font-size: 12px;
-                        }
-                    }
-
-                    .fc-body {
-                        max-height: 160px;
-                        overflow: hidden auto;
-
-                        .fc-event-container {
-                            padding: 8px;
-
-                            .fc-day-grid-event {
-                                display: flex;
-                                align-items: center;
-                                height: 22px;
-                                min-height: 22px;
-                                max-height: 22px;
-                                margin: 0 0 6px 0;
-                                padding: 0 8px;
-                                font-size: 12px;
-                                line-height: 1;
-                                border-radius: 4px;
-                                border: none;
-                                cursor: pointer;
-
-                                &:last-child {
-                                    margin-bottom: 0;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        /* Time Grid - Week view */
-        .fc-view.fc-timeGridWeek-view {
-
-            .fc-head {
-
-                > tr > .fc-head-container {
-                    border: none;
-
-                    .fc-row {
-
-                        .fc-axis {
-                            width: 48px !important;
-                            border-color: var(--fuse-divider);
-                        }
-
-                        .fc-day-header {
-                            border-color: var(--fuse-divider);
-
-                            span {
-                                display: flex;
-                                flex-direction: column;
-                                align-items: center;
-                                justify-content: center;
-                                width: 100%;
-                                @apply text-secondary;
-
-                                &.fc-weekday {
-                                    padding-top: 16px;
-                                    font-size: 12px;
-                                    letter-spacing: 0.055em;
-                                    text-transform: uppercase;
-                                    font-weight: 400;
-                                }
-
-                                &.fc-date {
-                                    padding-bottom: 12px;
-                                    font-size: 26px;
-                                    font-weight: 300;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .fc-body {
-
-                > tr > .fc-widget-content {
-                    border: none;
-
-                    .fc-day-grid {
-
-                        .fc-row {
-                            min-height: 0;
-
-                            .fc-bg {
-
-                                .fc-axis {
-                                    width: 48px !important;
-                                    border-color: var(--fuse-divider);
-                                }
-
-                                .fc-day {
-                                    border-color: var(--fuse-divider);
-
-                                    &.fc-today {
-                                        background: none;
-                                    }
-                                }
-                            }
-
-                            .fc-content-skeleton {
-                                padding-bottom: 0;
-
-                                .fc-axis {
-                                    width: 48px !important;
-                                }
-
-                                .fc-event-container {
-
-                                    .fc-day-grid-event {
-                                        display: flex;
-                                        align-items: center;
-                                        height: 22px;
-                                        min-height: 22px;
-                                        max-height: 22px;
-                                        margin: 0 6px 6px 6px;
-                                        padding: 0 8px;
-                                        font-size: 12px;
-                                        line-height: 1;
-                                        border-radius: 4px;
-                                        border: none;
-                                        cursor: pointer;
-                                    }
-                                }
-                            }
-                        }
-                    }
-
-                    .fc-divider {
-                        border: none;
-                        background: var(--fuse-divider);
-                    }
-
-                    .fc-time-grid {
-
-                        .fc-bg {
-
-                            .fc-axis {
-                                border: none;
-                                width: 48px !important;
-
-                                + .fc-day {
-                                    border: none;
-                                }
-                            }
-
-                            .fc-day {
-                                border-color: var(--fuse-divider);
-
-                                &.fc-today {
-                                    background: none;
-                                }
-                            }
-                        }
-
-                        .fc-slats {
-
-                            .fc-axis {
-                                width: 48px !important;
-                                height: 48px;
-                                text-align: center;
-
-                                span {
-                                    font-size: 12px;
-                                    width: 48px;
-                                    min-width: 48px;
-                                }
-                            }
-
-                            .fc-time {
-                                border-color: var(--fuse-divider);
-                            }
-
-                            .fc-widget-content {
-                                border-color: var(--fuse-divider);
-                            }
-                        }
-
-                        .fc-content-skeleton {
-
-                            .fc-axis {
-                                width: 48px !important;
-                            }
-
-                            .fc-event-container {
-                                margin: 0 12px 0 0;
-
-                                .fc-time-grid-event {
-                                    display: flex;
-                                    padding: 8px;
-                                    border-radius: 4px;
-                                    border: none;
-                                    cursor: pointer;
-
-                                    .fc-time,
-                                    .fc-title {
-                                        font-size: 12px;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        /* Time Grid - Day view */
-        .fc-view.fc-timeGridDay-view {
-
-            .fc-head {
-
-                > tr > .fc-head-container {
-                    border: none;
-
-                    .fc-row {
-
-                        .fc-axis {
-                            width: 48px !important;
-                            border-color: var(--fuse-divider);
-                        }
-
-                        .fc-day-header {
-                            border-color: var(--fuse-divider);
-
-                            span {
-                                display: flex;
-                                flex-direction: column;
-                                align-items: center;
-                                justify-content: center;
-                                width: 100%;
-                                @apply text-secondary;
-
-                                &.fc-weekday {
-                                    padding-top: 16px;
-                                    font-size: 12px;
-                                    letter-spacing: 0.055em;
-                                    text-transform: uppercase;
-                                    font-weight: 400;
-                                }
-
-                                &.fc-date {
-                                    padding-bottom: 12px;
-                                    font-size: 26px;
-                                    font-weight: 300;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .fc-body {
-
-                > tr > .fc-widget-content {
-                    border: none;
-
-                    .fc-day-grid {
-
-                        .fc-bg {
-
-                            .fc-axis {
-                                border-color: var(--fuse-divider);
-                            }
-
-                            .fc-day {
-                                border-color: var(--fuse-divider);
-
-                                &.fc-today {
-                                    background: none;
-                                }
-                            }
-                        }
-
-                        .fc-row {
-                            min-height: 0;
-
-                            .fc-bg {
-
-                                .fc-axis {
-                                    width: 48px !important;
-                                }
-                            }
-
-                            .fc-content-skeleton {
-                                padding-bottom: 0;
-
-                                .fc-axis {
-                                    width: 48px !important;
-                                }
-
-                                .fc-event-container {
-
-                                    .fc-day-grid-event {
-                                        display: flex;
-                                        align-items: center;
-                                        height: 22px;
-                                        min-height: 22px;
-                                        max-height: 22px;
-                                        margin: 0 6px 6px 6px;
-                                        padding: 0 8px;
-                                        font-size: 12px;
-                                        line-height: 1;
-                                        border-radius: 4px;
-                                        border: none;
-                                        cursor: pointer;
-                                    }
-                                }
-                            }
-                        }
-                    }
-
-                    .fc-divider {
-                        border: none;
-                        border-color: var(--fuse-divider);
-                    }
-
-                    .fc-time-grid {
-
-                        .fc-bg {
-
-                            .fc-day {
-                                border-color: var(--fuse-divider);
-
-                                &.fc-today {
-                                    background: none;
-                                }
-                            }
-
-                            .fc-axis {
-                                border: none;
-                                width: 48px !important;
-
-                                + .fc-day {
-                                    border: none;
-                                }
-                            }
-                        }
-
-                        .fc-slats {
-
-                            .fc-axis {
-                                width: 48px !important;
-                                height: 48px;
-                                text-align: center;
-
-                                span {
-                                    font-size: 12px;
-                                    width: 48px;
-                                    min-width: 48px;
-                                }
-                            }
-
-                            .fc-time {
-                                border-color: var(--fuse-divider);
-                            }
-
-                            .fc-widget-content {
-                                border-color: var(--fuse-divider);
-                            }
-                        }
-
-                        .fc-content-skeleton {
-
-                            .fc-axis {
-                                width: 48px !important;
-                            }
-
-                            .fc-event-container {
-                                margin: 0 12px 0 0;
-
-                                .fc-time-grid-event {
-                                    display: flex;
-                                    padding: 8px;
-                                    border-radius: 4px;
-                                    border: none;
-                                    cursor: pointer;
-
-                                    .fc-time,
-                                    .fc-title {
-                                        font-size: 12px;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        /* List - Year view */
-        .fc-view.fc-listYear-view {
-            border: none;
-
-            .fc-list-table {
-
-                .fc-list-heading {
-                    display: none;
-                }
-
-                .fc-list-item {
-                    display: flex;
-                    cursor: pointer;
-
-                    &:hover {
-
-                        td {
-                            @apply bg-hover;
-                        }
-                    }
-
-                    td {
-                        display: flex;
-                        align-items: center;
-                        width: auto;
-                        height: 48px;
-                        min-height: 48px;
-                        padding: 0 8px;
-                        border-width: 0 0 1px 0;
-                        border-color: var(--fuse-divider);
-
-                        &.fc-list-item-date {
-                            order: 1;
-                            padding-left: 16px;
-                            width: 100px;
-                            min-width: 100px;
-                            max-width: 100px;
-
-                            @screen sm {
-                                width: 120px;
-                                min-width: 120px;
-                                max-width: 120px;
-                            }
-
-                            > span {
-                                display: flex;
-                                align-items: baseline;
-
-                                span {
-
-                                    &:first-child {
-                                        display: flex;
-                                        justify-content: center;
-                                        padding-right: 2px;
-                                        width: 32px;
-                                        min-width: 32px;
-                                        max-width: 32px;
-                                        font-size: 18px;
-
-                                        @screen sm {
-                                            padding-right: 8px;
-                                        }
-
-                                        + span {
-                                            display: flex;
-                                            font-size: 11px;
-                                            font-weight: 500;
-                                            letter-spacing: 0.055em;
-                                            text-transform: uppercase;
-                                            @apply text-secondary;
-                                        }
-                                    }
-                                }
-                            }
-                        }
-
-                        &.fc-list-item-time {
-                            flex: 0 0 auto;
-                            order: 3;
-                            width: 120px;
-                            min-width: 120px;
-                            max-width: 120px;
-
-                            @screen sm {
-                                width: 160px;
-                                min-width: 160px;
-                                max-width: 160px;
-                            }
-                        }
-
-                        &.fc-list-item-marker {
-                            flex: 0 0 auto;
-                            order: 2;
-
-                            .fc-event-dot {
-                                width: 12px;
-                                height: 12px;
-                                border-radius: 50%;
-                            }
-                        }
-
-                        &.fc-list-item-title {
-                            flex: 1 1 auto;
-                            order: 4;
-                            padding-right: 24px;
-                            font-weight: 500;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    /* Day grid event - Dragging */
-    .fc-day-grid-event {
-
-        &.fc-dragging,
-        &.fc-resizing {
-            display: flex;
-            align-items: center;
-            height: 22px;
-            min-height: 22px;
-            max-height: 22px;
-            margin: 0 6px 4px 6px;
-            padding: 0 8px;
-            font-size: 12px;
-            line-height: 1;
-            border-radius: 4px;
-            border: none;
-        }
-    }
-}

src/@fuse/styles/overrides/quill.scss

@@ -4,11 +4,12 @@
 .ql-toolbar {
     border-radius: 6px 6px 0 0;
     padding: 0 !important;
-    @apply bg-gray-100 border-gray-300;
+    @apply bg-gray-100;
+    @apply border-gray-300 border-opacity-100 #{'!important'};
 
     .dark & {
         background-color: rgba(0, 0, 0, 0.05);
-        @apply border-gray-500;
+        @apply border-gray-500 #{'!important'};
     }
 
     .ql-formats {
@@ -81,26 +82,22 @@
 .ql-container {
     overflow: hidden;
     border-radius: 0 0 6px 6px;
-    @apply border-gray-300 shadow-sm;
+    @apply border-gray-300 border-opacity-100 shadow-sm #{'!important'};
 
     .dark & {
-        @apply border-gray-500;
+        @apply border-gray-500 #{'!important'};
     }
 
     .ql-editor {
         min-height: 160px;
         max-height: 160px;
         height: 160px;
-        @apply bg-gray-50;
+        @apply bg-card;
 
         .dark & {
             background-color: rgba(0, 0, 0, 0.05);
         }
 
-        &:focus {
-            @apply bg-card;
-        }
-
         &.ql-blank::before {
             @apply text-hint;
         }

src/@fuse/styles/themes.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @use "sass:map";
 
 /* Include the core Angular Material styles */
@@ -18,81 +18,6 @@
     )
 ));
 
-/* Prepare the Background and Foreground maps */
-$background-light: (
-    status-bar: #CBD5E1, /* blueGray.300 */
-    app-bar: #FFFFFF,
-    background: #F1F5F9, /* blueGray.100 */
-    hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */
-    card: #FFFFFF,
-    dialog: #FFFFFF,
-    disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */
-    raised-button: #FFFFFF,
-    focused-button: #64748B, /* blueGray.500 */
-    selected-button: #E2E8F0, /* blueGray.200 */
-    selected-disabled-button: #E2E8F0, /* blueGray.200 */
-    disabled-button-toggle: #CBD5E1, /* blueGray.300 */
-    unselected-chip: #E2E8F0, /* blueGray.200 */
-    disabled-list-option: #CBD5E1, /* blueGray.300 */
-    tooltip: #1E293B /* blueGray.800 */
-);
-
-$background-dark: (
-    status-bar: #0F172A, /* blueGray.900 */
-    app-bar: #0F172A, /* blueGray.900 */
-    background: #0F172A, /* blueGray.900 */
-    hover: rgba(255, 255, 255, 0.05),
-    card: #1E293B, /* blueGray.800 */
-    dialog: #1E293B, /* blueGray.800 */
-    disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */
-    raised-button: #0F172A, /* blueGray.900 */
-    focused-button: #E2E8F0, /* blueGray.200 */
-    selected-button: rgba(255, 255, 255, 0.05),
-    selected-disabled-button: #1E293B, /* blueGray.800 */
-    disabled-button-toggle: #0F172A, /* blueGray.900 */
-    unselected-chip: #475569, /* blueGray.600 */
-    disabled-list-option: #E2E8F0, /* blueGray.200 */
-    tooltip: #64748B /* blueGray.500 */
-);
-
-$foreground-light: (
-    base: #000000,
-    divider: #E2E8F0, /* blueGray.200 */
-    dividers: #E2E8F0, /* blueGray.200 */
-    disabled: #94A3B8, /* blueGray.400 */
-    disabled-button: #94A3B8, /* blueGray.400 */
-    disabled-text: #94A3B8, /* blueGray.400 */
-    elevation: #000000,
-    hint-text: #94A3B8, /* blueGray.400 */
-    secondary-text: #64748B, /* blueGray.500 */
-    icon: #64748B, /* blueGray.500 */
-    icons: #64748B, /* blueGray.500 */
-    mat-icon: #64748B, /* blueGray.500 */
-    text: #1E293B, /* blueGray.800 */
-    slider-min: #1E293B, /* blueGray.800 */
-    slider-off: #CBD5E1, /* blueGray.300 */
-    slider-off-active: #94A3B8 /* blueGray.400 */
-);
-
-$foreground-dark: (
-    base: #FFFFFF,
-    divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
-    dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
-    disabled: #475569, /* blueGray.600 */
-    disabled-button: #1E293B, /* blueGray.800 */
-    disabled-text: #475569, /* blueGray.600 */
-    elevation: #000000,
-    hint-text: #64748B, /* blueGray.500 */
-    secondary-text: #94A3B8, /* blueGray.400 */
-    icon: #F1F5F9, /* blueGray.100 */
-    icons: #F1F5F9, /* blueGray.100 */
-    mat-icon: #94A3B8, /* blueGray.400 */
-    text: #FFFFFF,
-    slider-min: #FFFFFF,
-    slider-off: #64748B, /* blueGray.500 */
-    slider-off-active: #94A3B8 /* blueGray.400 */
-);
-
 /* Generate Primary, Accent and Warn palettes */
 $palettes: ();
 @each $name in (primary, accent, warn) {
@@ -145,8 +70,41 @@ body .light {
             accent: map.get(map.get($base-light-theme, color), accent),
             warn: map.get(map.get($base-light-theme, color), warn),
             is-dark: map.get(map.get($base-light-theme, color), is-dark),
-            foreground: $foreground-light,
-            background: $background-light
+            foreground: (
+                base: #000000,
+                divider: #E2E8F0, /* slate.200 */
+                dividers: #E2E8F0, /* slate.200 */
+                disabled: #94A3B8, /* slate.400 */
+                disabled-button: #94A3B8, /* slate.400 */
+                disabled-text: #94A3B8, /* slate.400 */
+                elevation: #000000,
+                hint-text: #94A3B8, /* slate.400 */
+                secondary-text: #64748B, /* slate.500 */
+                icon: #64748B, /* slate.500 */
+                icons: #64748B, /* slate.500 */
+                mat-icon: #64748B, /* slate.500 */
+                text: #1E293B, /* slate.800 */
+                slider-min: #1E293B, /* slate.800 */
+                slider-off: #CBD5E1, /* slate.300 */
+                slider-off-active: #94A3B8 /* slate.400 */
+            ),
+            background: (
+                status-bar: #CBD5E1, /* slate.300 */
+                app-bar: #FFFFFF,
+                background: #F1F5F9, /* slate.100 */
+                hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
+                card: #FFFFFF,
+                dialog: #FFFFFF,
+                disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
+                raised-button: #FFFFFF,
+                focused-button: #64748B, /* slate.500 */
+                selected-button: #E2E8F0, /* slate.200 */
+                selected-disabled-button: #E2E8F0, /* slate.200 */
+                disabled-button-toggle: #CBD5E1, /* slate.300 */
+                unselected-chip: #E2E8F0, /* slate.200 */
+                disabled-list-option: #CBD5E1, /* slate.300 */
+                tooltip: #1E293B /* slate.800 */
+            )
         )
     );
 
@@ -166,8 +124,41 @@ body .dark {
             accent: map.get(map.get($base-dark-theme, color), accent),
             warn: map.get(map.get($base-dark-theme, color), warn),
             is-dark: map.get(map.get($base-dark-theme, color), is-dark),
-            foreground: $foreground-dark,
-            background: $background-dark
+            foreground: (
+                base: #FFFFFF,
+                divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+                dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+                disabled: #475569, /* slate.600 */
+                disabled-button: #1E293B, /* slate.800 */
+                disabled-text: #475569, /* slate.600 */
+                elevation: #000000,
+                hint-text: #64748B, /* slate.500 */
+                secondary-text: #94A3B8, /* slate.400 */
+                icon: #F1F5F9, /* slate.100 */
+                icons: #F1F5F9, /* slate.100 */
+                mat-icon: #94A3B8, /* slate.400 */
+                text: #FFFFFF,
+                slider-min: #FFFFFF,
+                slider-off: #64748B, /* slate.500 */
+                slider-off-active: #94A3B8 /* slate.400 */
+            ),
+            background: (
+                status-bar: #0F172A, /* slate.900 */
+                app-bar: #0F172A, /* slate.900 */
+                background: #0F172A, /* slate.900 */
+                hover: rgba(255, 255, 255, 0.05),
+                card: #1E293B, /* slate.800 */
+                dialog: #1E293B, /* slate.800 */
+                disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
+                raised-button: #0F172A, /* slate.900 */
+                focused-button: #E2E8F0, /* slate.200 */
+                selected-button: rgba(255, 255, 255, 0.05),
+                selected-disabled-button: #1E293B, /* slate.800 */
+                disabled-button-toggle: #0F172A, /* slate.900 */
+                unselected-chip: #475569, /* slate.600 */
+                disabled-list-option: #E2E8F0, /* slate.200 */
+                tooltip: #64748B /* slate.500 */
+            )
         )
     );
 

src/@fuse/tailwind/plugins/extract-config.js

@@ -1,38 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-const buildMediaQuery = require('tailwindcss/lib/util/buildMediaQuery').default;
-
-const extractConfig = plugin(({
-    addVariant,
-    theme
-}) =>
-{
-    addVariant('fuse-tailwind-extracted-config', ({container}) =>
-    {
-        // Prepare the extracted config variable
-        let extractedConfig = '';
-
-        // Breakpoints
-        Object.entries(theme('screens')).forEach(([key, value]) =>
-        {
-            extractedConfig = `${extractedConfig} --breakpoints-${key}:'${buildMediaQuery(value)}';`;
-        });
-
-        // Themes
-        (theme('fuse.themes')).forEach((value) =>
-        {
-            Object.entries(value).forEach(([key, value]) =>
-            {
-                extractedConfig = `${extractedConfig} --themes-${key}:'${JSON.stringify(value)}';`;
-            });
-        });
-
-        // Append the extracted config
-        container.append(`
-            .fuse-tailwind-extracted-config {
-                ${extractedConfig}
-            }
-        `);
-    });
-});
-
-module.exports = extractConfig;

src/@fuse/tailwind/plugins/icon-size.js

@@ -1,17 +1,14 @@
 const plugin = require('tailwindcss/plugin');
 
-const iconSize = plugin(({
-        addUtilities,
-        theme,
-        e,
-        variants
+module.exports = plugin(
+    ({
+        matchUtilities,
+        theme
     }) =>
     {
-        const values = theme('iconSize');
-
-        addUtilities(
-            Object.entries(values).map(([key, value]) => ({
-                [`.${e(`icon-size-${key}`)}`]: {
+        matchUtilities(
+            {
+                'icon-size': (value) => ({
                     width     : value,
                     height    : value,
                     minWidth  : value,
@@ -22,13 +19,14 @@ const iconSize = plugin(({
                         width : value,
                         height: value
                     }
-                }
-            })),
-            variants('iconSize')
-        );
+                })
+            },
+            {
+                values: theme('iconSize')
+            });
     },
     {
-        theme   : {
+        theme: {
             iconSize: {
                 3  : '0.75rem',
                 3.5: '0.875rem',
@@ -47,10 +45,6 @@ const iconSize = plugin(({
                 22 : '5.5rem',
                 24 : '6rem'
             }
-        },
-        variants: {
-            iconSize: ['responsive']
         }
-    });
-
-module.exports = iconSize;
+    }
+);

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

@@ -102,7 +102,7 @@ const theming = plugin.withOptions((options) => ({
         // @ Map variable colors
         // -----------------------------------------------------------------------------------------------------
         const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [
-            themeName === 'default' ? 'body' : `body.theme-${e(themeName)}`,
+            themeName === 'default' ? '.theme-default' : `.theme-${e(themeName)}`,
             _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
                     [
                         e(paletteName),
@@ -185,47 +185,46 @@ const theming = plugin.withOptions((options) => ({
                             light: {
                                 'bg-app-bar'   : '#FFFFFF',
                                 'bg-card'      : '#FFFFFF',
-                                'bg-default'   : colors.blueGray[100],
+                                'bg-default'   : colors.slate[100],
                                 'bg-dialog'    : '#FFFFFF',
-                                'bg-hover'     : chroma(colors.blueGray[400]).alpha(0.12).css(),
-                                'bg-status-bar': colors.blueGray[300]
+                                'bg-hover'     : chroma(colors.slate[400]).alpha(0.12).css(),
+                                'bg-status-bar': colors.slate[300]
                             },
                             dark : {
-                                'bg-app-bar'   : colors.blueGray[900],
-                                'bg-card'      : colors.blueGray[800],
-                                'bg-default'   : colors.blueGray[900],
-                                'bg-dialog'    : colors.blueGray[800],
+                                'bg-app-bar'   : colors.slate[900],
+                                'bg-card'      : colors.slate[800],
+                                'bg-default'   : colors.slate[900],
+                                'bg-dialog'    : colors.slate[800],
                                 'bg-hover'     : 'rgba(255, 255, 255, 0.05)',
-                                'bg-status-bar': colors.blueGray[900]
+                                'bg-status-bar': colors.slate[900]
                             }
                         },
                         foreground: {
                             light: {
-                                'text-default'  : colors.blueGray[800],
-                                'text-secondary': colors.blueGray[500],
-                                'text-hint'     : colors.blueGray[400],
-                                'text-disabled' : colors.blueGray[400],
-                                'border'        : colors.blueGray[200],
-                                'divider'       : colors.blueGray[200],
-                                'icon'          : colors.blueGray[500],
-                                'mat-icon'      : colors.blueGray[500]
+                                'text-default'  : colors.slate[800],
+                                'text-secondary': colors.slate[500],
+                                'text-hint'     : colors.slate[400],
+                                'text-disabled' : colors.slate[400],
+                                'border'        : colors.slate[200],
+                                'divider'       : colors.slate[200],
+                                'icon'          : colors.slate[500],
+                                'mat-icon'      : colors.slate[500]
                             },
                             dark : {
                                 'text-default'  : '#FFFFFF',
-                                'text-secondary': colors.blueGray[400],
-                                'text-hint'     : colors.blueGray[500],
-                                'text-disabled' : colors.blueGray[600],
-                                'border'        : chroma(colors.blueGray[100]).alpha(0.12).css(),
-                                'divider'       : chroma(colors.blueGray[100]).alpha(0.12).css(),
-                                'icon'          : colors.blueGray[400],
-                                'mat-icon'      : colors.blueGray[400]
+                                'text-secondary': colors.slate[400],
+                                'text-hint'     : colors.slate[500],
+                                'text-disabled' : colors.slate[600],
+                                'border'        : chroma(colors.slate[100]).alpha(0.12).css(),
+                                'divider'       : chroma(colors.slate[100]).alpha(0.12).css(),
+                                'icon'          : colors.slate[400],
+                                'mat-icon'      : colors.slate[400]
                             }
                         }
                     },
                     themes     : generateThemesObject(options.themes)
                 }
-            },
-            variants: {}
+            }
         };
     }
 );

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

@@ -1,6 +1,6 @@
 const plugin = require('tailwindcss/plugin');
 
-const utilities = plugin(({
+module.exports = plugin(({
     addComponents
 }) =>
 {
@@ -54,9 +54,6 @@ const utilities = plugin(({
                 '--tw-ring-opacity': '1 !important',
                 '--tw-ring-color'  : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important'
             }
-        },
-        {
-            variants: ['dark', 'responsive', 'group-hover', 'hover']
         }
     );
 
@@ -65,11 +62,6 @@ const utilities = plugin(({
             '.bg-hover': {
                 backgroundColor: 'var(--fuse-bg-hover) !important'
             }
-        },
-        {
-            variants: ['dark', 'group-hover', 'hover']
         }
     );
 });
-
-module.exports = utilities;

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

@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';
 
-export const FUSE_VERSION = new Version('13.3.1').full;
+export const FUSE_VERSION = new Version('14.1.0').full;

src/app/app.component.scss

@@ -3,4 +3,4 @@
     flex: 1 1 auto;
     width: 100%;
     height: 100%;
-}
+}

src/app/app.resolvers.ts

@@ -4,6 +4,7 @@ import { forkJoin, Observable } from 'rxjs';
 import { MessagesService } from 'app/layout/common/messages/messages.service';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
+import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
 import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
 import { UserService } from 'app/core/user/user.service';
 
@@ -19,6 +20,7 @@ export class InitialDataResolver implements Resolve<any>
         private _messagesService: MessagesService,
         private _navigationService: NavigationService,
         private _notificationsService: NotificationsService,
+        private _quickChatService: QuickChatService,
         private _shortcutsService: ShortcutsService,
         private _userService: UserService
     )
@@ -42,6 +44,7 @@ export class InitialDataResolver implements Resolve<any>
             this._navigationService.get(),
             this._messagesService.getAll(),
             this._notificationsService.getAll(),
+            this._quickChatService.getChats(),
             this._shortcutsService.getAll(),
             this._userService.get()
         ]);

src/app/app.routing.ts

@@ -5,7 +5,8 @@ import { LayoutComponent } from 'app/layout/layout.component';
 import { InitialDataResolver } from 'app/app.resolvers';
 
 // @formatter:off
-// tslint:disable:max-line-length
+/* eslint-disable max-len */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 export const appRoutes: Route[] = [
 
     // Redirect empty path to '/example'

src/app/core/auth/auth.interceptor.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { Observable, throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
+import { catchError, Observable, throwError } from 'rxjs';
 import { AuthService } from 'app/core/auth/auth.service';
 import { AuthUtils } from 'app/core/auth/auth.utils';
 

src/app/core/auth/auth.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, of, throwError } from 'rxjs';
-import { catchError, switchMap } from 'rxjs/operators';
+import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
 import { AuthUtils } from 'app/core/auth/auth.utils';
 import { UserService } from 'app/core/user/user.service';
 

src/app/core/auth/guards/auth.guard.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanLoad, Route, Router, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
-import { Observable, of } from 'rxjs';
+import { Observable, of, switchMap } from 'rxjs';
 import { AuthService } from 'app/core/auth/auth.service';
-import { switchMap } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'

src/app/core/auth/guards/noAuth.guard.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanLoad, Route, Router, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
-import { Observable, of } from 'rxjs';
+import { Observable, of, switchMap } from 'rxjs';
 import { AuthService } from 'app/core/auth/auth.service';
-import { switchMap } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'

src/app/core/config/app.config.ts

@@ -2,7 +2,9 @@ import { Layout } from 'app/layout/layout.types';
 
 // Types
 export type Scheme = 'auto' | 'dark' | 'light';
-export type Theme = 'default' | string;
+export type Screens = { [key: string]: string };
+export type Theme = 'theme-default' | string;
+export type Themes = { id: string; name: string }[];
 
 /**
  * AppConfig interface. Update this interface to strictly type your config
@@ -12,7 +14,9 @@ export interface AppConfig
 {
     layout: Layout;
     scheme: Scheme;
+    screens: Screens;
     theme: Theme;
+    themes: Themes;
 }
 
 /**
@@ -22,9 +26,46 @@ export interface AppConfig
  * If you need to store global configuration for your app, you can use this
  * object to set the defaults. To access, update and reset the config, use
  * FuseConfigService and its methods.
+ *
+ * "Screens" are carried over to the BreakpointObserver for accessing them within
+ * components, and they are required.
+ *
+ * "Themes" are required for Tailwind to generate themes.
  */
 export const appConfig: AppConfig = {
-    layout: 'classy',
-    scheme: 'light',
-    theme : 'default'
+    layout : 'classy',
+    scheme : 'light',
+    screens: {
+        sm: '600px',
+        md: '960px',
+        lg: '1280px',
+        xl: '1440px'
+    },
+    theme  : 'theme-default',
+    themes : [
+        {
+            id  : 'theme-default',
+            name: 'Default'
+        },
+        {
+            id  : 'theme-brand',
+            name: 'Brand'
+        },
+        {
+            id  : 'theme-teal',
+            name: 'Teal'
+        },
+        {
+            id  : 'theme-rose',
+            name: 'Rose'
+        },
+        {
+            id  : 'theme-purple',
+            name: 'Purple'
+        },
+        {
+            id  : 'theme-amber',
+            name: 'Amber'
+        }
+    ]
 };

src/app/core/navigation/navigation.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, ReplaySubject } from 'rxjs';
-import { tap } from 'rxjs/operators';
+import { Observable, ReplaySubject, tap } from 'rxjs';
 import { Navigation } from 'app/core/navigation/navigation.types';
 
 @Injectable({

src/app/core/user/user.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, ReplaySubject } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map, Observable, ReplaySubject, tap } from 'rxjs';
 import { User } from 'app/core/user/user.types';
 
 @Injectable({

src/app/layout/common/languages/languages.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { take } from 'rxjs/operators';
+import { take } from 'rxjs';
 import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 

src/app/layout/common/messages/messages.component.html

@@ -5,7 +5,7 @@
     #messagesOrigin>
     <ng-container *ngIf="unreadCount > 0">
         <span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
-            <span class="flex items-center justify-center flex-shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium">
+            <span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium">
                 {{unreadCount}}
             </span>
         </span>
@@ -19,7 +19,7 @@
     <div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
 
         <!-- Header -->
-        <div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
+        <div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
             <div class="sm:hidden -ml-1 mr-3">
                 <button
                     mat-icon-button
@@ -108,7 +108,7 @@
                 <ng-template #messageContent>
                     <!-- Icon -->
                     <ng-container *ngIf="message.icon && !message.image">
-                        <div class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
+                        <div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
                             <mat-icon
                                 class="icon-size-5"
                                 [svgIcon]="message.icon">
@@ -118,7 +118,7 @@
                     <!-- Image -->
                     <ng-container *ngIf="message.image">
                         <img
-                            class="flex-shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
+                            class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
                             [src]="message.image"
                             [alt]="'Message image'">
                     </ng-container>

src/app/layout/common/messages/messages.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { MatButton } from '@angular/material/button';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subject, takeUntil } from 'rxjs';
 import { Message } from 'app/layout/common/messages/messages.types';
 import { MessagesService } from 'app/layout/common/messages/messages.service';
 
@@ -67,7 +66,7 @@ export class MessagesComponent implements OnInit, OnDestroy
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
 
         // Dispose the overlay

src/app/layout/common/messages/messages.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, ReplaySubject } from 'rxjs';
+import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs';
 import { Message } from 'app/layout/common/messages/messages.types';
-import { map, switchMap, take, tap } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'

src/app/layout/common/notifications/notifications.component.html

@@ -5,7 +5,7 @@
     #notificationsOrigin>
     <ng-container *ngIf="unreadCount > 0">
         <span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
-            <span class="flex items-center justify-center flex-shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium">
+            <span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium">
                 {{unreadCount}}
             </span>
         </span>
@@ -19,7 +19,7 @@
     <div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
 
         <!-- Header -->
-        <div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
+        <div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
             <div class="sm:hidden -ml-1 mr-3">
                 <button
                     mat-icon-button
@@ -109,7 +109,7 @@
                 <ng-template #notificationContent>
                     <!-- Icon -->
                     <ng-container *ngIf="notification.icon && !notification.image">
-                        <div class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
+                        <div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
                             <mat-icon
                                 class="icon-size-5"
                                 [svgIcon]="notification.icon">
@@ -119,7 +119,7 @@
                     <!-- Image -->
                     <ng-container *ngIf="notification.image">
                         <img
-                            class="flex-shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
+                            class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
                             [src]="notification.image"
                             [alt]="'Notification image'">
                     </ng-container>

src/app/layout/common/notifications/notifications.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { MatButton } from '@angular/material/button';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subject, takeUntil } from 'rxjs';
 import { Notification } from 'app/layout/common/notifications/notifications.types';
 import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
 
@@ -67,7 +66,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
 
         // Dispose the overlay
@@ -103,7 +102,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
     }
 
     /**
-     * Close the messages panel
+     * Close the notifications panel
      */
     closePanel(): void
     {

src/app/layout/common/notifications/notifications.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, ReplaySubject } from 'rxjs';
+import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs';
 import { Notification } from 'app/layout/common/notifications/notifications.types';
-import { map, switchMap, take, tap } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'

src/app/layout/common/quick-chat/quick-chat.component.html

@@ -0,0 +1,196 @@
+<div class="fixed lg:sticky top-0 bottom-0 lg:left-full w-full sm:w-96 lg:w-16 lg:h-screen lg:shadow">
+    <div
+        class="flex flex-col w-full sm:w-96 h-full transition-transform duration-400 ease-drawer bg-card"
+        [ngClass]="{'-translate-x-full sm:-translate-x-96 lg:-translate-x-80 shadow': opened, 'translate-x-0': !opened}">
+
+        <!-- Header -->
+        <div
+            class="quick-chat-header flex flex-0 items-center justify-start cursor-pointer"
+            (click)="toggle()">
+
+            <!-- Toggle -->
+            <ng-container *ngIf="!opened || (opened && !selectedChat)">
+                <div class="flex flex-auto items-center justify-center">
+                    <div class="flex flex-0 items-center justify-center w-16">
+                        <mat-icon
+                            class="icon-size-6"
+                            [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
+                    </div>
+                    <div class="text-lg font-medium text-secondary">Team Chat</div>
+                    <button
+                        class="ml-auto mr-4"
+                        mat-icon-button>
+                        <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
+                    </button>
+                </div>
+            </ng-container>
+
+            <!-- Contact info -->
+            <ng-container *ngIf="opened && selectedChat">
+                <div class="flex flex-auto items-center ml-3">
+                    <div class="relative flex flex-0 items-center justify-center w-10 h-10">
+                        <ng-container *ngIf="chat.contact.avatar">
+                            <img
+                                class="w-full h-full rounded-full object-cover"
+                                [src]="chat.contact.avatar"
+                                alt="Contact avatar"/>
+                        </ng-container>
+                        <ng-container *ngIf="!chat.contact.avatar">
+                            <div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                                {{chat.contact.name.charAt(0)}}
+                            </div>
+                        </ng-container>
+                    </div>
+                    <div class="ml-4 text-lg font-medium leading-5 truncate">{{chat.contact.name}}</div>
+                    <button
+                        class="ml-auto mr-4"
+                        mat-icon-button>
+                        <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
+                    </button>
+                </div>
+            </ng-container>
+        </div>
+
+        <!-- Content -->
+        <div class="flex flex-auto border-t overflow-hidden">
+
+            <!-- Chat list -->
+            <div
+                class="flex-0 w-16 h-full overflow-y-auto overscroll-y-contain sm:overflow-hidden sm:overscroll-auto"
+                fuseScrollbar
+                [fuseScrollbarOptions]="{wheelPropagation: false}">
+                <div class="flex-auto">
+                    <ng-container *ngFor="let chat of chats; trackBy: trackByFn">
+                        <div
+                            class="flex items-center py-3 px-4 cursor-pointer"
+                            [ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedChat || selectedChat.id !== chat.id,
+                                        'bg-primary-50 dark:bg-hover': selectedChat && selectedChat.id === chat.id}"
+                            (click)="selectChat(chat.id)">
+                            <div class="relative flex flex-0 items-center justify-center w-8 h-8">
+                                <ng-container *ngIf="chat.unreadCount > 0">
+                                    <div
+                                        class="absolute bottom-0 right-0 flex-0 w-2 h-2 -ml-0.5 rounded-full ring-2 ring-bg-card dark:ring-gray-900 bg-primary dark:bg-primary-500 text-on-primary"
+                                        [class.ring-primary-50]="selectedChat && selectedChat.id === chat.id"></div>
+                                </ng-container>
+                                <ng-container *ngIf="chat.contact.avatar">
+                                    <img
+                                        class="w-full h-full rounded-full object-cover"
+                                        [src]="chat.contact.avatar"
+                                        alt="Contact avatar"/>
+                                </ng-container>
+                                <ng-container *ngIf="!chat.contact.avatar">
+                                    <div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                                        {{chat.contact.name.charAt(0)}}
+                                    </div>
+                                </ng-container>
+                            </div>
+                        </div>
+                    </ng-container>
+                </div>
+            </div>
+
+            <!-- Conversation -->
+            <div class="flex flex-col flex-auto border-l overflow-hidden bg-gray-50 dark:bg-transparent">
+                <ng-container *ngIf="chat; else selectChatOrStartNew">
+                    <div class="flex flex-col-reverse overflow-y-auto overscroll-y-contain">
+                        <div class="flex flex-col flex-auto shrink p-6">
+                            <ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn">
+                                <!-- Start of the day -->
+                                <ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')">
+                                    <div class="flex items-center justify-center my-3 -mx-6">
+                                        <div class="flex-auto border-b"></div>
+                                        <div class="flex-0 mx-4 text-sm font-medium leading-5 text-secondary">
+                                            {{message.createdAt | date: 'longDate'}}
+                                        </div>
+                                        <div class="flex-auto border-b"></div>
+                                    </div>
+                                </ng-container>
+                                <div
+                                    class="flex flex-col"
+                                    [ngClass]="{'items-end': message.isMine,
+                                                'items-start': !message.isMine,
+                                                'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
+                                                'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
+                                    <!-- Bubble -->
+                                    <div
+                                        class="relative max-w-3/4 px-3 py-2 rounded-lg"
+                                        [ngClass]="{'bg-blue-500 text-blue-50': message.isMine,
+                                                    'bg-gray-500 text-gray-50': !message.isMine}">
+                                        <!-- Speech bubble tail -->
+                                        <ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine">
+                                            <div
+                                                class="absolute bottom-0 w-3"
+                                                [ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine,
+                                                            'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
+                                                <ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
+                                            </div>
+                                        </ng-container>
+                                        <!-- Message -->
+                                        <div
+                                            class="min-w-4 leading-5"
+                                            [innerHTML]="message.value">
+                                        </div>
+                                    </div>
+                                    <!-- Time -->
+                                    <ng-container
+                                        *ngIf="first
+                                       || last
+                                       || chat.messages[i + 1].isMine !== message.isMine
+                                       || chat.messages[i + 1].createdAt !== message.createdAt">
+                                        <div
+                                            class="my-0.5 text-sm font-medium text-secondary"
+                                            [ngClass]="{'mr-3': message.isMine,
+                                                        'ml-3': !message.isMine}">
+                                            {{message.createdAt | date:'HH:mm'}}
+                                        </div>
+                                    </ng-container>
+                                </div>
+                            </ng-container>
+                        </div>
+                    </div>
+
+                    <!-- Message field -->
+                    <div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
+                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full">
+                            <textarea
+                                class="min-h-5 my-0 resize-none"
+                                style="margin: 11px 0 !important; padding: 0 !important;"
+                                [rows]="1"
+                                matInput
+                                #messageInput></textarea>
+                        </mat-form-field>
+                        <div class="flex items-center h-11 my-px ml-4">
+                            <button
+                                mat-icon-button>
+                                <mat-icon
+                                    class="rotate-90"
+                                    [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
+                            </button>
+                        </div>
+                    </div>
+                </ng-container>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Select chat or start new template -->
+<ng-template #selectChatOrStartNew>
+    <div class="flex flex-col flex-auto items-center justify-center w-full h-full p-4">
+        <mat-icon
+            class="icon-size-20"
+            [svgIcon]="'iconsmind:speach_bubble'"></mat-icon>
+        <div class="mt-4 text-xl text-center font-medium tracking-tight text-secondary">Select a conversation</div>
+    </div>
+</ng-template>
+
+<!-- Speech bubble tail SVG -->
+<!-- @formatter:off -->
+<ng-template #speechBubbleExtension>
+    <svg width="100%" height="100%" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <path d="M1.01522827,0.516204834 C-8.83532715,54.3062744 61.7609863,70.5215302 64.8009949,64.3061218 C68.8074951,54.8859711 30.1663208,52.9997559 37.5036011,0.516204834 L1.01522827,0.516204834 Z" fill="currentColor" fill-rule="nonzero"></path>
+        </g>
+    </svg>
+</ng-template>
+<!-- @formatter:on -->

src/app/layout/common/quick-chat/quick-chat.component.scss

@@ -0,0 +1,58 @@
+quick-chat {
+    z-index: 399;
+
+    > div {
+        overflow: hidden;
+    }
+
+    &.quick-chat-opened {
+
+        > div {
+            overflow: visible;
+        }
+    }
+
+    &:not(.quick-chat-opened) {
+
+        > div {
+            overflow: visible;
+            animation: addOverflowHidden 1ms linear 400ms;
+            animation-fill-mode: forwards;
+        }
+    }
+}
+
+/* Adjustments depending on the selected layout */
+.quick-chat-header {
+    height: 64px;
+
+    enterprise-layout &,
+    modern-layout & {
+        height: 80px !important;
+    }
+}
+
+
+/* Overlay */
+.quick-chat-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 299;
+    opacity: 1;
+    background-color: transparent;
+}
+
+@keyframes addOverflowHidden {
+    0% {
+        overflow: visible
+    }
+    99% {
+        overflow: visible;
+    }
+    100% {
+        overflow: hidden;
+    }
+}

src/app/layout/common/quick-chat/quick-chat.component.ts

@@ -0,0 +1,274 @@
+import { Component, ElementRef, HostBinding, HostListener, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { Subject, takeUntil } from 'rxjs';
+import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
+import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
+
+@Component({
+    selector     : 'quick-chat',
+    templateUrl  : './quick-chat.component.html',
+    styleUrls    : ['./quick-chat.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    exportAs     : 'quickChat'
+})
+export class QuickChatComponent implements OnInit, OnDestroy
+{
+    @ViewChild('messageInput') messageInput: ElementRef;
+    chat: Chat;
+    chats: Chat[];
+    opened: boolean = false;
+    selectedChat: Chat;
+    private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
+    private _overlay: HTMLElement;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer2: Renderer2,
+        private _ngZone: NgZone,
+        private _quickChatService: QuickChatService,
+        private _scrollStrategyOptions: ScrollStrategyOptions
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Decorated methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Host binding for component classes
+     */
+    @HostBinding('class') get classList(): any
+    {
+        return {
+            'quick-chat-opened': this.opened
+        };
+    }
+
+    /**
+     * Resize on 'input' and 'ngModelChange' events
+     *
+     * @private
+     */
+    @HostListener('input')
+    @HostListener('ngModelChange')
+    private _resizeMessageInput(): void
+    {
+        // This doesn't need to trigger Angular's change detection by itself
+        this._ngZone.runOutsideAngular(() => {
+
+            setTimeout(() => {
+
+                // Set the height to 'auto' so we can correctly read the scrollHeight
+                this.messageInput.nativeElement.style.height = 'auto';
+
+                // Get the scrollHeight and subtract the vertical padding
+                this.messageInput.nativeElement.style.height = `${this.messageInput.nativeElement.scrollHeight}px`;
+            });
+        });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Chat
+        this._quickChatService.chat$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((chat: Chat) => {
+                this.chat = chat;
+            });
+
+        // Chats
+        this._quickChatService.chats$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((chats: Chat[]) => {
+                this.chats = chats;
+            });
+
+        // Selected chat
+        this._quickChatService.chat$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((chat: Chat) => {
+                this.selectedChat = chat;
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(null);
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Open the panel
+     */
+    open(): void
+    {
+        // Return if the panel has already opened
+        if ( this.opened )
+        {
+            return;
+        }
+
+        // Open the panel
+        this._toggleOpened(true);
+    }
+
+    /**
+     * Close the panel
+     */
+    close(): void
+    {
+        // Return if the panel has already closed
+        if ( !this.opened )
+        {
+            return;
+        }
+
+        // Close the panel
+        this._toggleOpened(false);
+    }
+
+    /**
+     * Toggle the panel
+     */
+    toggle(): void
+    {
+        if ( this.opened )
+        {
+            this.close();
+        }
+        else
+        {
+            this.open();
+        }
+    }
+
+    /**
+     * Select the chat
+     *
+     * @param id
+     */
+    selectChat(id: string): void
+    {
+        // Open the panel
+        this._toggleOpened(true);
+
+        // Get the chat data
+        this._quickChatService.getChatById(id).subscribe();
+    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Show the backdrop
+     *
+     * @private
+     */
+    private _showOverlay(): void
+    {
+        // Try hiding the overlay in case there is one already opened
+        this._hideOverlay();
+
+        // Create the backdrop element
+        this._overlay = this._renderer2.createElement('div');
+
+        // Return if overlay couldn't be create for some reason
+        if ( !this._overlay )
+        {
+            return;
+        }
+
+        // Add a class to the backdrop element
+        this._overlay.classList.add('quick-chat-overlay');
+
+        // Append the backdrop to the parent of the panel
+        this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
+
+        // Enable block scroll strategy
+        this._scrollStrategy.enable();
+
+        // Add an event listener to the overlay
+        this._overlay.addEventListener('click', () => {
+            this.close();
+        });
+    }
+
+    /**
+     * Hide the backdrop
+     *
+     * @private
+     */
+    private _hideOverlay(): void
+    {
+        if ( !this._overlay )
+        {
+            return;
+        }
+
+        // If the backdrop still exists...
+        if ( this._overlay )
+        {
+            // Remove the backdrop
+            this._overlay.parentNode.removeChild(this._overlay);
+            this._overlay = null;
+        }
+
+        // Disable block scroll strategy
+        this._scrollStrategy.disable();
+    }
+
+    /**
+     * Open/close the panel
+     *
+     * @param open
+     * @private
+     */
+    private _toggleOpened(open: boolean): void
+    {
+        // Set the opened
+        this.opened = open;
+
+        // If the panel opens, show the overlay
+        if ( open )
+        {
+            this._showOverlay();
+        }
+        // Otherwise, hide the overlay
+        else
+        {
+            this._hideOverlay();
+        }
+    }
+}

src/app/layout/common/quick-chat/quick-chat.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { FuseDrawerModule } from '@fuse/components/drawer';
+import { FuseScrollbarModule } from '@fuse/directives/scrollbar';
+import { SharedModule } from 'app/shared/shared.module';
+import { QuickChatComponent } from 'app/layout/common/quick-chat/quick-chat.component';
+
+@NgModule({
+    declarations: [
+        QuickChatComponent
+    ],
+    imports     : [
+        RouterModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        FuseDrawerModule,
+        FuseScrollbarModule,
+        SharedModule
+    ],
+    exports     : [
+        QuickChatComponent
+    ]
+})
+export class QuickChatModule
+{
+}

src/app/layout/common/quick-chat/quick-chat.service.ts

@@ -0,0 +1,84 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, map, Observable, of, switchMap, tap, throwError } from 'rxjs';
+import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class QuickChatService
+{
+    private _chat: BehaviorSubject<Chat> = new BehaviorSubject(null);
+    private _chats: BehaviorSubject<Chat[]> = new BehaviorSubject<Chat[]>(null);
+
+    /**
+     * Constructor
+     */
+    constructor(private _httpClient: HttpClient)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Getter for chat
+     */
+    get chat$(): Observable<Chat>
+    {
+        return this._chat.asObservable();
+    }
+
+    /**
+     * Getter for chat
+     */
+    get chats$(): Observable<Chat[]>
+    {
+        return this._chats.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get chats
+     */
+    getChats(): Observable<any>
+    {
+        return this._httpClient.get<Chat[]>('api/apps/chat/chats').pipe(
+            tap((response: Chat[]) => {
+                this._chats.next(response);
+            })
+        );
+    }
+
+    /**
+     * Get chat
+     *
+     * @param id
+     */
+    getChatById(id: string): Observable<any>
+    {
+        return this._httpClient.get<Chat>('api/apps/chat/chat', {params: {id}}).pipe(
+            map((chat) => {
+
+                // Update the chat
+                this._chat.next(chat);
+
+                // Return the chat
+                return chat;
+            }),
+            switchMap((chat) => {
+
+                if ( !chat )
+                {
+                    return throwError('Could not found chat with id of ' + id + '!');
+                }
+
+                return of(chat);
+            })
+        );
+    }
+}

src/app/layout/common/quick-chat/quick-chat.types.ts

@@ -0,0 +1,46 @@
+export interface Chat
+{
+    id?: string;
+    contactId?: string;
+    contact?: Contact;
+    unreadCount?: number;
+    muted?: boolean;
+    lastMessage?: string;
+    lastMessageAt?: string;
+    messages?: {
+        id?: string;
+        chatId?: string;
+        contactId?: string;
+        isMine?: boolean;
+        value?: string;
+        createdAt?: string;
+    }[];
+}
+
+export interface Contact
+{
+    id?: string;
+    avatar?: string;
+    name?: string;
+    about?: string;
+    details?: {
+        emails?: {
+            email?: string;
+            label?: string;
+        }[];
+        phoneNumbers?: {
+            country?: string;
+            phoneNumber?: string;
+            label?: string;
+        }[];
+        title?: string;
+        company?: string;
+        birthday?: string;
+        address?: string;
+    };
+    attachments?: {
+        media?: any[];
+        docs?: any[];
+        links?: any[];
+    };
+}

src/app/layout/common/search/search.component.html

@@ -7,7 +7,7 @@
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
     </button>
     <div
-        class="absolute inset-0 flex items-center flex-shrink-0 z-99 bg-card"
+        class="absolute inset-0 flex items-center shrink-0 z-99 bg-card"
         *ngIf="opened"
         @slideInTop
         @slideOutTop>
@@ -55,7 +55,7 @@
             </ng-container>
         </mat-autocomplete>
         <button
-            class="absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5"
+            class="absolute top-1/2 right-5 sm:right-7 shrink-0 w-10 h-10 -mt-5"
             mat-icon-button
             (click)="close()">
             <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
@@ -118,7 +118,7 @@
     #contactResult
     let-result>
     <div class="flex items-center">
-        <div class="flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
+        <div class="flex shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
             <img
                 *ngIf="result.avatar"
                 [src]="result.avatar">

src/app/layout/common/search/search.component.ts

@@ -1,8 +1,7 @@
 import { Component, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
-import { Subject } from 'rxjs';
-import { debounceTime, filter, map, takeUntil } from 'rxjs/operators';
+import { debounceTime, filter, map, Subject, takeUntil } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations/public-api';
 
 @Component({
@@ -138,7 +137,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
     ngOnDestroy(): void
     {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 

src/app/layout/common/settings/settings.component.html

@@ -0,0 +1,475 @@
+<div
+    class="fixed flex items-center justify-center right-0 w-10 h-10 shadow-lg rounded-l-lg z-90 cursor-pointer bg-red-600 bg-opacity-90 print:hidden"
+    [class.lg:right-0]="config.layout === 'centered' || config.layout === 'material'"
+    [class.lg:right-16]="config.layout !== 'centered' && config.layout !== 'material'"
+    style="top: 275px"
+    (click)="settingsDrawer.toggle()">
+    <mat-icon
+        class="icon-size-5 text-white animate-spin-slow"
+        [svgIcon]="'heroicons_solid:cog'"></mat-icon>
+</div>
+
+<fuse-drawer
+    class="w-screen min-w-screen sm:w-100 sm:min-w-100 z-999"
+    fixed
+    [mode]="'over'"
+    [name]="'settingsDrawer'"
+    [position]="'right'"
+    #settingsDrawer>
+
+    <div class="flex flex-col w-full overflow-auto bg-card">
+        <div class="flex flex-row items-center px-6 h-20 min-h-20 text-white bg-primary">
+            <mat-icon
+                class="icon-size-7 text-current"
+                [svgIcon]="'heroicons_solid:cog'"></mat-icon>
+            <div class="ml-3 text-2xl font-semibold tracking-tight">Settings</div>
+            <button
+                class="ml-auto"
+                mat-icon-button
+                (click)="settingsDrawer.close()">
+                <mat-icon
+                    class="text-current"
+                    [svgIcon]="'heroicons_outline:x'"></mat-icon>
+            </button>
+        </div>
+
+        <div class="flex flex-col p-6">
+
+            <!-- Theme -->
+            <div class="text-md font-semibold text-secondary">THEME</div>
+            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
+                <ng-container *ngFor="let theme of config.themes">
+                    <div
+                        class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                        [class.ring-2]="config.theme === theme.id"
+                        [ngClass]="theme.id"
+                        (click)="setTheme(theme.id)">
+                        <div
+                            class="flex-0 w-3 h-3 rounded-full bg-primary"
+                        ></div>
+                        <div
+                            class="ml-2.5 font-medium leading-5 truncate"
+                            [class.text-secondary]="config.theme !== theme.id">
+                            {{theme.name}}
+                        </div>
+                    </div>
+                </ng-container>
+            </div>
+
+            <hr class="my-8">
+
+            <!-- Scheme -->
+            <div class="text-md font-semibold text-secondary">SCHEME</div>
+            <div class="grid grid-cols-3 gap-3 justify-items-start mt-6">
+                <!-- Auto -->
+                <div
+                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                    [class.ring-2]="config.scheme === 'auto'"
+                    matTooltip="Automatically sets the scheme based on user's operating system's color scheme preference using 'prefer-color-scheme' media query."
+                    (click)="setScheme('auto')">
+                    <div class="flex items-center rounded-full overflow-hidden">
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:lightning-bolt'"></mat-icon>
+                    </div>
+                    <div
+                        class="flex items-center ml-2 font-medium leading-5"
+                        [class.text-secondary]="config.scheme !== 'auto'">
+                        Auto
+                    </div>
+                </div>
+                <!-- Dark -->
+                <div
+                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                    [class.ring-2]="config.scheme === 'dark'"
+                    (click)="setScheme('dark')">
+                    <div class="flex items-center rounded-full overflow-hidden">
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:moon'"></mat-icon>
+                    </div>
+                    <div
+                        class="flex items-center ml-2 font-medium leading-5"
+                        [class.text-secondary]="config.scheme !== 'dark'">
+                        Dark
+                    </div>
+                </div>
+                <!-- Light -->
+                <div
+                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                    [class.ring-2]="config.scheme === 'light'"
+                    (click)="setScheme('light')">
+                    <div class="flex items-center rounded-full overflow-hidden">
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:sun'"></mat-icon>
+                    </div>
+                    <div
+                        class="flex items-center ml-2 font-medium leading-5"
+                        [class.text-secondary]="config.scheme !== 'light'">
+                        Light
+                    </div>
+                </div>
+            </div>
+
+            <hr class="my-8">
+
+            <!-- Layout -->
+            <div class="text-md font-semibold text-secondary">LAYOUT</div>
+            <div class="grid grid-cols-3 gap-3 mt-6">
+
+                <!-- Empty -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('empty')">
+                    <div
+                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'empty'">
+                        <div class="flex flex-col flex-auto bg-gray-50 dark:bg-gray-900"></div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'empty'">
+                        Empty
+                    </div>
+                </div>
+
+                <!-- Classic -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('classic')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'classic'">
+                        <div class="w-8 bg-gray-100 dark:bg-gray-800">
+                            <div class="mt-3 mx-1.5 space-y-1">
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'classic'">
+                        Classic
+                    </div>
+                </div>
+
+                <!-- Classy -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('classy')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'classy'">
+                        <div class="w-8 bg-gray-100 dark:bg-gray-800">
+                            <div class="flex items-center mt-1 mx-1">
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1 h-1 ml-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1 h-1 ml-0.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                            <div class="w-4 h-4 mt-2.5 mx-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="mt-2 mx-1 space-y-1">
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-2">
+                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'classy'">
+                        Classy
+                    </div>
+                </div>
+
+                <!-- Compact -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('compact')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'compact'">
+                        <div class="w-5 bg-gray-100 dark:bg-gray-800">
+                            <div class="w-3 h-3 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
+                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'compact'">
+                        Compact
+                    </div>
+                </div>
+
+                <!-- Dense -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('dense')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'dense'">
+                        <div class="w-4 bg-gray-100 dark:bg-gray-800">
+                            <div class="w-2 h-2 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
+                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'dense'">
+                        Dense
+                    </div>
+                </div>
+
+                <!-- Futuristic -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('futuristic')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'futuristic'">
+                        <div class="w-8 bg-gray-100 dark:bg-gray-800">
+                            <div class="flex flex-col flex-auto h-full py-3 px-1.5 space-y-1">
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="flex-auto"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'futuristic'">
+                        Futuristic
+                    </div>
+                </div>
+
+                <!-- Thin -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('thin')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'thin'">
+                        <div class="w-3 bg-gray-100 dark:bg-gray-800">
+                            <div class="w-1.5 h-1.5 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
+                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'thin'">
+                        Thin
+                    </div>
+                </div>
+
+                <div class="col-span-2"></div>
+
+                <!-- Centered -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('centered')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'centered'">
+                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded-md overflow-hidden">
+                            <div class="flex items-center h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex ml-1.5">
+                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                                <div class="flex items-center justify-end ml-auto mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'centered'">
+                        Centered
+                    </div>
+                </div>
+
+                <!-- Enterprise -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('enterprise')">
+                    <div
+                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'enterprise'">
+                        <div class="flex items-center h-3 px-2 bg-gray-100 dark:bg-gray-800">
+                            <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="flex items-center justify-end ml-auto space-x-1">
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex items-center h-3 px-2 border-t border-b space-x-1 bg-gray-100 dark:bg-gray-800">
+                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                        </div>
+                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
+                            <div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'enterprise'">
+                        Enterprise
+                    </div>
+                </div>
+
+                <!-- Material -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('material')">
+                    <div
+                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'material'">
+                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
+                            <div class="flex items-center h-4 px-2 bg-gray-100 dark:bg-gray-800">
+                                <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="flex items-center justify-end ml-auto space-x-1">
+                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex items-center h-2 px-2 space-x-1 bg-gray-100 dark:bg-gray-800">
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'material'">
+                        Material
+                    </div>
+                </div>
+
+                <!-- Modern -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('modern')">
+                    <div
+                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'modern'">
+                        <div class="flex items-center h-4 px-2 border-b bg-gray-100 dark:bg-gray-800">
+                            <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="flex items-center h-3 ml-2 space-x-1">
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                            <div class="flex items-center justify-end ml-auto space-x-1">
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto">
+                            <div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'modern'">
+                        Modern
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</fuse-drawer>

src/app/layout/common/settings/settings.component.ts

@@ -0,0 +1,114 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subject, takeUntil } from 'rxjs';
+import { FuseConfigService } from '@fuse/services/config';
+import { AppConfig, Scheme, Theme, Themes } from 'app/core/config/app.config';
+import { Layout } from 'app/layout/layout.types';
+
+@Component({
+    selector     : 'settings',
+    templateUrl  : './settings.component.html',
+    styles       : [
+        `
+            settings {
+                position: static;
+                display: block;
+                flex: none;
+                width: auto;
+            }
+        `
+    ],
+    encapsulation: ViewEncapsulation.None
+})
+export class SettingsComponent implements OnInit, OnDestroy
+{
+    config: AppConfig;
+    layout: Layout;
+    scheme: 'dark' | 'light';
+    theme: string;
+    themes: Themes;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _router: Router,
+        private _fuseConfigService: FuseConfigService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to config changes
+        this._fuseConfigService.config$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config: AppConfig) => {
+
+                // Store the config
+                this.config = config;
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(null);
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Set the layout on the config
+     *
+     * @param layout
+     */
+    setLayout(layout: string): void
+    {
+        // Clear the 'layout' query param to allow layout changes
+        this._router.navigate([], {
+            queryParams        : {
+                layout: null
+            },
+            queryParamsHandling: 'merge'
+        }).then(() => {
+
+            // Set the config
+            this._fuseConfigService.config = {layout};
+        });
+    }
+
+    /**
+     * Set the scheme on the config
+     *
+     * @param scheme
+     */
+    setScheme(scheme: Scheme): void
+    {
+        this._fuseConfigService.config = {scheme};
+    }
+
+    /**
+     * Set the theme on the config
+     *
+     * @param theme
+     */
+    setTheme(theme: Theme): void
+    {
+        this._fuseConfigService.config = {theme};
+    }
+}