Merge branch 'dev' into dev-starter

(dependencies) Updated Angular & Angular Material to v14.1.0
(dependencies) Updated various other packages
2025-12-25 07:37:06 +00:00 · 2022-07-21 11:56:35 +03:00 · 2022-07-21 11:51:28 +03:00 · 2022-06-28 08:34:48 +03:00 · 2022-06-03 11:00:40 +03:00 · 2022-06-03 10:52:35 +03:00
75 changed files with 9718 additions and 41434 deletions
--- a/angular.json
+++ b/angular.json
@@ -1,6 +1,11 @@
 {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
+    "cli": {
+        "schematicCollections": [
+            "@angular-eslint/schematics"
+        ]
+    },
    "newProjectRoot": "projects",
    "projects": {
        "fuse": {
@@ -28,7 +33,10 @@
                            "highlight.js",
                            "crypto-js/enc-utf8",
                            "crypto-js/hmac-sha256",
-                            "crypto-js/enc-base64"
+                            "crypto-js/enc-base64",
+                            "flat",
+                            "moment",
+                            "quill"
                        ],
                        "assets": [
                            "src/favicon-16x16.png",
@@ -136,9 +144,5 @@
                }
            }
        }
-    },
-    "defaultProject": "fuse",
-    "cli": {
-        "defaultCollection": "@angular-eslint/schematics"
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "@fuse/starter",
-    "version": "14.0.0",
+    "name": "fuse-angular",
+    "version": "15.1.0",
    "description": "Fuse - Angular Admin Template and Starter Project",
    "author": "https://themeforest.net/user/srcn",
    "license": "https://themeforest.net/licenses/standard",
@@ -14,68 +14,67 @@
        "lint": "ng lint"
    },
    "dependencies": {
-        "@angular/animations": "13.0.1",
-        "@angular/cdk": "13.0.0",
-        "@angular/common": "13.0.1",
-        "@angular/compiler": "13.0.1",
-        "@angular/core": "13.0.1",
-        "@angular/forms": "13.0.1",
-        "@angular/material": "13.0.0",
-        "@angular/material-moment-adapter": "13.0.0",
-        "@angular/platform-browser": "13.0.1",
-        "@angular/platform-browser-dynamic": "13.0.1",
-        "@angular/router": "13.0.1",
-        "@ngneat/transloco": "3.1.0",
-        "apexcharts": "3.29.0",
+        "@angular/animations": "14.1.0",
+        "@angular/cdk": "14.1.0",
+        "@angular/common": "14.1.0",
+        "@angular/compiler": "14.1.0",
+        "@angular/core": "14.1.0",
+        "@angular/forms": "14.1.0",
+        "@angular/material": "14.1.0",
+        "@angular/material-moment-adapter": "14.1.0",
+        "@angular/platform-browser": "14.1.0",
+        "@angular/platform-browser-dynamic": "14.1.0",
+        "@angular/router": "14.1.0",
+        "@ngneat/transloco": "4.1.1",
+        "apexcharts": "3.35.3",
        "crypto-js": "3.3.0",
-        "highlight.js": "11.3.1",
+        "highlight.js": "11.6.0",
        "lodash-es": "4.17.21",
-        "moment": "2.29.1",
-        "ng-apexcharts": "1.5.12",
-        "ngx-markdown": "13.0.0",
-        "ngx-quill": "16.0.1",
-        "perfect-scrollbar": "1.5.3",
+        "moment": "2.29.4",
+        "ng-apexcharts": "1.7.1",
+        "ngx-markdown": "14.0.1",
+        "ngx-quill": "18.0.0",
+        "perfect-scrollbar": "1.5.5",
        "quill": "1.3.7",
-        "rxjs": "7.4.0",
-        "tslib": "2.3.1",
-        "zone.js": "0.11.4"
+        "rxjs": "7.5.6",
+        "tslib": "2.4.0",
+        "zone.js": "0.11.6"
    },
    "devDependencies": {
-        "@angular-devkit/build-angular": "13.0.2",
-        "@angular-eslint/builder": "12.6.1",
-        "@angular-eslint/eslint-plugin": "12.6.1",
-        "@angular-eslint/eslint-plugin-template": "12.6.1",
-        "@angular-eslint/schematics": "12.6.1",
-        "@angular-eslint/template-parser": "12.6.1",
-        "@angular/cli": "13.0.2",
-        "@angular/compiler-cli": "13.0.1",
-        "@tailwindcss/aspect-ratio": "0.3.0",
-        "@tailwindcss/line-clamp": "0.2.2",
-        "@tailwindcss/typography": "0.4.1",
-        "@types/chroma-js": "2.1.3",
+        "@angular-devkit/build-angular": "14.1.0",
+        "@angular-eslint/builder": "14.0.2",
+        "@angular-eslint/eslint-plugin": "14.0.2",
+        "@angular-eslint/eslint-plugin-template": "14.0.2",
+        "@angular-eslint/schematics": "14.0.2",
+        "@angular-eslint/template-parser": "14.0.2",
+        "@angular/cli": "14.1.0",
+        "@angular/compiler-cli": "14.1.0",
+        "@tailwindcss/aspect-ratio": "0.4.0",
+        "@tailwindcss/line-clamp": "0.4.0",
+        "@tailwindcss/typography": "0.5.4",
+        "@types/chroma-js": "2.1.4",
        "@types/crypto-js": "3.1.47",
        "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "3.10.2",
-        "@types/lodash": "4.14.176",
-        "@types/lodash-es": "4.17.5",
-        "@types/node": "12.20.37",
-        "@typescript-eslint/eslint-plugin": "5.3.1",
-        "@typescript-eslint/parser": "5.3.1",
-        "autoprefixer": "10.4.0",
-        "chroma-js": "2.1.2",
-        "eslint": "7.32.0",
-        "eslint-plugin-import": "2.25.3",
-        "eslint-plugin-jsdoc": "37.0.3",
+        "@types/jasmine": "4.0.3",
+        "@types/lodash": "4.14.182",
+        "@types/lodash-es": "4.17.6",
+        "@typescript-eslint/eslint-plugin": "5.30.7",
+        "@typescript-eslint/parser": "5.30.7",
+        "autoprefixer": "10.4.7",
+        "chroma-js": "2.4.2",
+        "eslint": "8.20.0",
+        "eslint-plugin-import": "2.26.0",
+        "eslint-plugin-jsdoc": "39.3.3",
        "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "3.10.1",
-        "karma": "6.3.8",
-        "karma-chrome-launcher": "3.1.0",
-        "karma-coverage": "2.0.3",
-        "karma-jasmine": "4.0.1",
-        "karma-jasmine-html-reporter": "1.7.0",
+        "jasmine-core": "4.2.0",
+        "karma": "6.4.0",
+        "karma-chrome-launcher": "3.1.1",
+        "karma-coverage": "2.2.0",
+        "karma-jasmine": "5.1.0",
+        "karma-jasmine-html-reporter": "2.0.0",
        "lodash": "4.17.21",
-        "postcss": "8.3.11",
-        "tailwindcss": "2.2.19",
-        "typescript": "4.4.4"
+        "postcss": "8.4.14",
+        "tailwindcss": "3.1.6",
+        "typescript": "4.7.4"
    }
 }
--- a/src/@fuse/components/alert/alert.component.ts
+++ b/src/@fuse/components/alert/alert.component.ts
@@ -53,6 +53,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
     */
    @HostBinding('class') get classList(): any
    {
+        /* eslint-disable @typescript-eslint/naming-convention */
        return {
            'fuse-alert-appearance-border' : this.appearance === 'border',
            'fuse-alert-appearance-fill'   : this.appearance === 'fill',
@@ -70,6 +71,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
            'fuse-alert-type-warning'      : this.type === 'warning',
            'fuse-alert-type-error'        : this.type === 'error'
        };
+        /* eslint-enable @typescript-eslint/naming-convention */
    }

    // -----------------------------------------------------------------------------------------------------
--- a/src/@fuse/components/card/card.component.ts
+++ b/src/@fuse/components/card/card.component.ts
@@ -38,12 +38,14 @@ export class FuseCardComponent implements OnChanges
     */
    @HostBinding('class') get classList(): any
    {
+        /* eslint-disable @typescript-eslint/naming-convention */
        return {
            'fuse-card-expanded'  : this.expanded,
            'fuse-card-face-back' : this.flippable && this.face === 'back',
            'fuse-card-face-front': this.flippable && this.face === 'front',
            'fuse-card-flippable' : this.flippable
        };
+        /* eslint-enable @typescript-eslint/naming-convention */
    }

    // -----------------------------------------------------------------------------------------------------
--- a/src/@fuse/components/drawer/drawer.component.scss
+++ b/src/@fuse/components/drawer/drawer.component.scss
@@ -1,14 +1,16 @@
 /* Variables */
-$fuse-drawer-width: 320;
+:root {
+    --fuse-drawer-width: 320px;
+}

 fuse-drawer {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
-    width: #{$fuse-drawer-width}px;
-    min-width: #{$fuse-drawer-width}px;
-    max-width: #{$fuse-drawer-width}px;
+    width: var(--fuse-drawer-width);
+    min-width: var(--fuse-drawer-width);
+    max-width: var(--fuse-drawer-width);
    z-index: 300;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35);
    @apply bg-card;
@@ -43,7 +45,7 @@ fuse-drawer {

        /* Side mode */
        &.fuse-drawer-mode-side {
-            margin-left: -#{$fuse-drawer-width}px;
+            margin-left: calc(var(--fuse-drawer-width) * -1);

            &.fuse-drawer-opened {
                margin-left: 0;
@@ -71,7 +73,7 @@ fuse-drawer {

        /* Side mode */
        &.fuse-drawer-mode-side {
-            margin-right: -#{$fuse-drawer-width}px;
+            margin-right: calc(var(--fuse-drawer-width) * -1);

            &.fuse-drawer-opened {
                margin-right: 0;
--- a/src/@fuse/components/drawer/drawer.component.ts
+++ b/src/@fuse/components/drawer/drawer.component.ts
@@ -32,6 +32,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
    @Output() readonly positionChanged: EventEmitter<FuseDrawerPosition> = new EventEmitter<FuseDrawerPosition>();

    private _animationsEnabled: boolean = false;
+    private readonly _handleOverlayClick: any;
    private _hovered: boolean = false;
    private _overlay: HTMLElement;
    private _player: AnimationPlayer;
@@ -47,6 +48,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
        private _fuseUtilsService: FuseUtilsService
    )
    {
+        this._handleOverlayClick = (): void => {
+            this.close();
+        };
    }

    // -----------------------------------------------------------------------------------------------------
@@ -58,6 +62,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     */
    @HostBinding('class') get classList(): any
    {
+        /* eslint-disable @typescript-eslint/naming-convention */
        return {
            'fuse-drawer-animations-enabled'         : this._animationsEnabled,
            'fuse-drawer-fixed'                      : this.fixed,
@@ -66,6 +71,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
            'fuse-drawer-opened'                     : this.opened,
            [`fuse-drawer-position-${this.position}`]: true
        };
+        /* eslint-enable @typescript-eslint/naming-convention */
    }

    /**
@@ -318,12 +324,6 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
        // 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('fuse-drawer-overlay');

@@ -342,27 +342,17 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
        // Append the backdrop to the parent of the drawer
        this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);

-        // Create the enter animation and attach it to the player
+        // Create 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);

-        // Once the animation is done...
-        this._player.onDone(() => {
-
-            // Destroy the player
-            this._player.destroy();
-            this._player = null;
-        });
-
        // Play the animation
        this._player.play();

        // Add an event listener to the overlay
-        this._overlay.addEventListener('click', () => {
-            this.close();
-        });
+        this._overlay.addEventListener('click', this._handleOverlayClick);
    }

    /**
@@ -388,14 +378,13 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
        // Once the animation is done...
        this._player.onDone(() => {

-            // Destroy the player
-            this._player.destroy();
-            this._player = null;
-
-            // If the backdrop still exists...
+            // If the overlay still exists...
            if ( this._overlay )
            {
-                // Remove the backdrop
+                // Remove the event listener
+                this._overlay.removeEventListener('click', this._handleOverlayClick);
+
+                // Remove the overlay
                this._overlay.parentNode.removeChild(this._overlay);
                this._overlay = null;
            }
--- a/src/@fuse/components/masonry/masonry.component.scss
+++ b/src/@fuse/components/masonry/masonry.component.scss
--- a/src/@fuse/components/masonry/masonry.component.ts
+++ b/src/@fuse/components/masonry/masonry.component.ts
@@ -5,7 +5,6 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
@Component({
    selector     : 'fuse-masonry',
    templateUrl  : './masonry.component.html',
-    styleUrls    : ['./masonry.component.scss'],
    encapsulation: ViewEncapsulation.None,
    animations   : fuseAnimations,
    exportAs     : 'fuseMasonry'
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
@@ -10,6 +10,10 @@
            class="fuse-horizontal-navigation-item"
            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
            [routerLink]="[item.link]"
+            [fragment]="item.fragment ?? null"
+            [preserveFragment]="item.preserveFragment ?? false"
+            [queryParams]="item.queryParams ?? null"
+            [queryParamsHandling]="item.queryParamsHandling ?? null"
            [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
            [routerLinkActiveOptions]="isActiveMatchOptions"
            [matTooltip]="item.tooltip || ''">
@@ -45,6 +49,10 @@
            class="fuse-horizontal-navigation-item"
            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
            [routerLink]="[item.link]"
+            [fragment]="item.fragment ?? null"
+            [preserveFragment]="item.preserveFragment ?? false"
+            [queryParams]="item.queryParams ?? null"
+            [queryParamsHandling]="item.queryParamsHandling ?? null"
            [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
            [routerLinkActiveOptions]="isActiveMatchOptions"
            [matTooltip]="item.tooltip || ''"
--- a/src/@fuse/components/navigation/navigation.types.ts
+++ b/src/@fuse/components/navigation/navigation.types.ts
@@ -1,4 +1,4 @@
-import { IsActiveMatchOptions } from '@angular/router';
+import { IsActiveMatchOptions, Params, QueryParamsHandling } from '@angular/router';

 export interface FuseNavigationItem
 {
@@ -17,6 +17,10 @@ export interface FuseNavigationItem
    disabled?: boolean;
    tooltip?: string;
    link?: string;
+    fragment?: string;
+    preserveFragment?: boolean;
+    queryParams?: Params | null;
+    queryParamsHandling?: QueryParamsHandling | null;
    externalLink?: boolean;
    target?:
        | '_blank'
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
@@ -10,6 +10,10 @@
            class="fuse-vertical-navigation-item"
            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
            [routerLink]="[item.link]"
+            [fragment]="item.fragment ?? null"
+            [preserveFragment]="item.preserveFragment ?? false"
+            [queryParams]="item.queryParams ?? null"
+            [queryParamsHandling]="item.queryParamsHandling ?? null"
            [routerLinkActive]="'fuse-vertical-navigation-item-active'"
            [routerLinkActiveOptions]="isActiveMatchOptions"
            [matTooltip]="item.tooltip || ''">
@@ -45,6 +49,10 @@
            class="fuse-vertical-navigation-item"
            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
            [routerLink]="[item.link]"
+            [fragment]="item.fragment ?? null"
+            [preserveFragment]="item.preserveFragment ?? false"
+            [queryParams]="item.queryParams ?? null"
+            [queryParamsHandling]="item.queryParamsHandling ?? null"
            [routerLinkActive]="'fuse-vertical-navigation-item-active'"
            [routerLinkActiveOptions]="isActiveMatchOptions"
            [matTooltip]="item.tooltip || ''"
--- a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
@@ -48,10 +48,12 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
     */
    @HostBinding('class') get classList(): any
    {
+        /* eslint-disable @typescript-eslint/naming-convention */
        return {
            'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
            'fuse-vertical-navigation-item-expanded' : this.isExpanded
        };
+        /* eslint-enable @typescript-eslint/naming-convention */
    }

    // -----------------------------------------------------------------------------------------------------
--- a/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss
+++ b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss
@@ -1,20 +1,22 @@
 /* Variables */
-$fuse-vertical-navigation-compact-width: 112px;
+:root {
+    --fuse-vertical-navigation-compact-width: 112px;
+}

 fuse-vertical-navigation {

    /* Compact appearance overrides */
    &.fuse-vertical-navigation-appearance-compact {
-        width: $fuse-vertical-navigation-compact-width;
-        min-width: $fuse-vertical-navigation-compact-width;
-        max-width: $fuse-vertical-navigation-compact-width;
+        width: var(--fuse-vertical-navigation-compact-width);
+        min-width: var(--fuse-vertical-navigation-compact-width);
+        max-width: var(--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;
+                margin-left: calc(var(--fuse-vertical-navigation-compact-width) * -1);
            }

            /* Opened */
@@ -28,7 +30,7 @@ fuse-vertical-navigation {

            /* Side mode */
            &.fuse-vertical-navigation-mode-side {
-                margin-right: -$fuse-vertical-navigation-compact-width;
+                margin-right: calc(var(--fuse-vertical-navigation-compact-width) * -1);
            }

            /* Opened */
@@ -39,7 +41,7 @@ fuse-vertical-navigation {
            /* Aside wrapper */
            .fuse-vertical-navigation-aside-wrapper {
                left: auto;
-                right: $fuse-vertical-navigation-compact-width;
+                right: var(--fuse-vertical-navigation-compact-width);
            }
        }

@@ -104,7 +106,7 @@ fuse-vertical-navigation {

        /* Aside wrapper */
        .fuse-vertical-navigation-aside-wrapper {
-            left: $fuse-vertical-navigation-compact-width;
+            left: var(--fuse-vertical-navigation-compact-width);
        }
    }
 }
--- a/src/@fuse/components/navigation/vertical/styles/appearances/default.scss
+++ b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss
@@ -1,5 +1,7 @@
 /* Variables */
-$fuse-vertical-navigation-width: 280px;
+:root {
+    --fuse-vertical-navigation-width: 280px;
+}

 fuse-vertical-navigation {
    position: sticky;
@@ -7,9 +9,9 @@ fuse-vertical-navigation {
    flex-direction: column;
    flex: 1 0 auto;
    top: 0;
-    width: $fuse-vertical-navigation-width;
-    min-width: $fuse-vertical-navigation-width;
-    max-width: $fuse-vertical-navigation-width;
+    width: var(--fuse-vertical-navigation-width);
+    min-width: var(--fuse-vertical-navigation-width);
+    max-width: var(--fuse-vertical-navigation-width);
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
@@ -45,7 +47,7 @@ fuse-vertical-navigation {

        /* Side mode */
        &.fuse-vertical-navigation-mode-side {
-            margin-left: -$fuse-vertical-navigation-width;
+            margin-left: calc(#{var(--fuse-vertical-navigation-width)} * -1);

            &.fuse-vertical-navigation-opened {
                margin-left: 0;
@@ -73,7 +75,7 @@ fuse-vertical-navigation {

        /* Side mode */
        &.fuse-vertical-navigation-mode-side {
-            margin-right: -$fuse-vertical-navigation-width;
+            margin-right: calc(var(--fuse-vertical-navigation-width) * -1);

            &.fuse-vertical-navigation-opened {
                margin-right: 0;
@@ -170,8 +172,8 @@ fuse-vertical-navigation {
        flex-direction: column;
        top: 0;
        bottom: 0;
-        left: $fuse-vertical-navigation-width;
-        width: $fuse-vertical-navigation-width;
+        left: var(--fuse-vertical-navigation-width);
+        width: var(--fuse-vertical-navigation-width);
        height: 100%;
        z-index: 5;
        overflow-x: hidden;
@@ -196,7 +198,7 @@ fuse-vertical-navigation {

        .fuse-vertical-navigation-aside-wrapper {
            left: auto;
-            right: $fuse-vertical-navigation-width;
+            right: var(--fuse-vertical-navigation-width);
        }
    }

@@ -335,7 +337,10 @@ fuse-vertical-navigation {
        }

        > .fuse-vertical-navigation-item-children {
-            margin-top: 6px;
+
+            > *:first-child {
+                margin-top: 6px;
+            }

            > *:last-child {
                padding-bottom: 6px;
--- a/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss
+++ b/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss
@@ -1,6 +1,8 @@
 /* Variables */
-$fuse-vertical-navigation-width: 280px;
-$fuse-vertical-navigation-dense-width: 80px;
+:root {
+    --fuse-vertical-navigation-width: 280px;
+    --fuse-vertical-navigation-dense-width: 80px;
+}

 fuse-vertical-navigation {

@@ -8,16 +10,16 @@ fuse-vertical-navigation {
    &.fuse-vertical-navigation-appearance-dense {

        &:not(.fuse-vertical-navigation-mode-over) {
-            width: $fuse-vertical-navigation-dense-width;
-            min-width: $fuse-vertical-navigation-dense-width;
-            max-width: $fuse-vertical-navigation-dense-width;
+            width: var(--fuse-vertical-navigation-dense-width);
+            min-width: var(--fuse-vertical-navigation-dense-width);
+            max-width: var(--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;
+                    margin-left: calc(var(--fuse-vertical-navigation-dense-width) * -1);
                }

                /* Opened */
@@ -31,7 +33,7 @@ fuse-vertical-navigation {

                /* Side mode */
                &.fuse-vertical-navigation-mode-side {
-                    margin-right: -$fuse-vertical-navigation-dense-width;
+                    margin-right: calc(var(--fuse-vertical-navigation-dense-width) * -1);
                }

                /* Opened */
@@ -42,14 +44,14 @@ fuse-vertical-navigation {
                /* Aside wrapper */
                .fuse-vertical-navigation-aside-wrapper {
                    left: auto;
-                    right: $fuse-vertical-navigation-dense-width;
+                    right: var(--fuse-vertical-navigation-dense-width);
                }

                &.fuse-vertical-navigation-hover {

                    .fuse-vertical-navigation-aside-wrapper {
                        left: auto;
-                        right: $fuse-vertical-navigation-width;
+                        right: var(--fuse-vertical-navigation-width);
                    }
                }
            }
@@ -69,9 +71,9 @@ fuse-vertical-navigation {
                    .fuse-vertical-navigation-item-wrapper {

                        .fuse-vertical-navigation-item {
-                            width: $fuse-vertical-navigation-dense-width - 24px;
-                            min-width: $fuse-vertical-navigation-dense-width - 24px;
-                            max-width: $fuse-vertical-navigation-dense-width - 24px;
+                            width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
+                            min-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
+                            max-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);

                            .fuse-vertical-navigation-item-arrow,
                            .fuse-vertical-navigation-item-badge,
@@ -142,23 +144,23 @@ fuse-vertical-navigation {

        /* Aside wrapper */
        .fuse-vertical-navigation-aside-wrapper {
-            left: $fuse-vertical-navigation-dense-width;
+            left: var(--fuse-vertical-navigation-dense-width);
        }

        /* Hover */
        &.fuse-vertical-navigation-hover {

            .fuse-vertical-navigation-wrapper {
-                width: $fuse-vertical-navigation-width;
+                width: var(--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;
+                            width: calc(var(--fuse-vertical-navigation-width) - 24px);
+                            min-width: calc(var(--fuse-vertical-navigation-width) - 24px);
+                            max-width: calc(var(--fuse-vertical-navigation-width) - 24px);

                            .fuse-vertical-navigation-item-arrow,
                            .fuse-vertical-navigation-item-badge,
@@ -173,7 +175,7 @@ fuse-vertical-navigation {
            }

            .fuse-vertical-navigation-aside-wrapper {
-                left: $fuse-vertical-navigation-width;
+                left: var(--fuse-vertical-navigation-width);
            }
        }
    }
--- a/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss
+++ b/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss
@@ -1,19 +1,21 @@
 /* Variables */
-$fuse-vertical-navigation-thin-width: 80px;
+:root {
+    --fuse-vertical-navigation-thin-width: 80px;
+}

 fuse-vertical-navigation {

    /* Thin appearance overrides */
    &.fuse-vertical-navigation-appearance-thin {
-        width: $fuse-vertical-navigation-thin-width;
-        min-width: $fuse-vertical-navigation-thin-width;
-        max-width: $fuse-vertical-navigation-thin-width;
+        width: var(--fuse-vertical-navigation-thin-width);
+        min-width: var(--fuse-vertical-navigation-thin-width);
+        max-width: var(--fuse-vertical-navigation-thin-width);

        /* Left positioned */
        &.fuse-vertical-navigation-position-left {

            &.fuse-vertical-navigation-mode-side {
-                margin-left: -$fuse-vertical-navigation-thin-width;
+                margin-left: calc(var(--fuse-vertical-navigation-thin-width) * -1);
            }

            &.fuse-vertical-navigation-opened {
@@ -25,7 +27,7 @@ fuse-vertical-navigation {
        &.fuse-vertical-navigation-position-right {

            &.fuse-vertical-navigation-mode-side {
-                margin-right: -$fuse-vertical-navigation-thin-width;
+                margin-right: calc(var(--fuse-vertical-navigation-thin-width) * -1);
            }

            &.fuse-vertical-navigation-opened {
@@ -34,7 +36,7 @@ fuse-vertical-navigation {

            .fuse-vertical-navigation-aside-wrapper {
                left: auto;
-                right: $fuse-vertical-navigation-thin-width;
+                right: var(--fuse-vertical-navigation-thin-width);
            }
        }

@@ -91,7 +93,7 @@ fuse-vertical-navigation {

        /* Aside wrapper */
        .fuse-vertical-navigation-aside-wrapper {
-            left: $fuse-vertical-navigation-thin-width;
+            left: var(--fuse-vertical-navigation-thin-width);
        }
    }
 }
--- a/src/@fuse/components/navigation/vertical/vertical.component.scss
+++ b/src/@fuse/components/navigation/vertical/vertical.component.scss
@@ -1,4 +1,4 @@
-@import 'styles/appearances/default';
-@import 'styles/appearances/compact';
-@import 'styles/appearances/dense';
-@import 'styles/appearances/thin';
+@use 'styles/appearances/default';
+@use 'styles/appearances/compact';
+@use 'styles/appearances/dense';
+@use 'styles/appearances/thin';
--- a/src/@fuse/components/navigation/vertical/vertical.component.ts
+++ b/src/@fuse/components/navigation/vertical/vertical.component.ts
@@ -89,6 +89,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     */
    @HostBinding('class') get classList(): any
    {
+        /* eslint-disable @typescript-eslint/naming-convention */
        return {
            'fuse-vertical-navigation-animations-enabled'             : this._animationsEnabled,
            [`fuse-vertical-navigation-appearance-${this.appearance}`]: true,
@@ -100,6 +101,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
            'fuse-vertical-navigation-position-left'                  : this.position === 'left',
            'fuse-vertical-navigation-position-right'                 : this.position === 'right'
        };
+        /* eslint-enable @typescript-eslint/naming-convention */
    }

    /**
--- a/src/@fuse/fuse.module.ts
+++ b/src/@fuse/fuse.module.ts
@@ -4,8 +4,8 @@ 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 { FusePlatformModule } from '@fuse/services/platform/platform.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({
@@ -13,8 +13,8 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
        FuseConfirmationModule,
        FuseLoadingModule,
        FuseMediaWatcherModule,
+        FusePlatformModule,
        FuseSplashScreenModule,
-        FuseTailwindConfigModule,
        FuseUtilsModule
    ],
    providers: [
--- a/src/@fuse/services/config/config.service.ts
+++ b/src/@fuse/services/config/config.service.ts
@@ -35,6 +35,7 @@ export class FuseConfigService
        this._config.next(config);
    }

+    // eslint-disable-next-line @typescript-eslint/member-ordering
    get config$(): Observable<any>
    {
        return this._config.asObservable();
--- a/src/@fuse/services/confirmation/dialog/dialog.component.ts
+++ b/src/@fuse/services/confirmation/dialog/dialog.component.ts
@@ -1,12 +1,11 @@
-import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';

@Component({
    selector     : 'fuse-confirmation-dialog',
    templateUrl  : './dialog.component.html',
    styles       : [
-        /* language=SCSS */
        `
            .fuse-confirmation-dialog-panel {
                @screen md {
@@ -21,32 +20,13 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
    ],
    encapsulation: ViewEncapsulation.None
 })
-export class FuseConfirmationDialogComponent implements OnInit
+export class FuseConfirmationDialogComponent
 {
    /**
     * Constructor
     */
-    constructor(
-        @Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig,
-        public matDialogRef: MatDialogRef<FuseConfirmationDialogComponent>
-    )
+    constructor(@Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig)
    {
    }

-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
 }
--- a/src/@fuse/services/media-watcher/media-watcher.service.ts
+++ b/src/@fuse/services/media-watcher/media-watcher.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
-import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
+import { fromPairs } from 'lodash-es';
+import { FuseConfigService } from '@fuse/services/config';

@Injectable()
 export class FuseMediaWatcherService
@@ -13,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
@@ -29,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 )
--- a/src/@fuse/services/platform/index.ts
+++ b/src/@fuse/services/platform/index.ts
@@ -0,0 +1 @@
+export * from '@fuse/services/platform/public-api';
--- a/src/@fuse/services/platform/platform.module.ts
+++ b/src/@fuse/services/platform/platform.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { FusePlatformService } from '@fuse/services/platform/platform.service';
+
+@NgModule({
+    providers: [
+        FusePlatformService
+    ]
+})
+export class FusePlatformModule
+{
+    /**
+     * Constructor
+     */
+    constructor(private _fusePlatformService: FusePlatformService)
+    {
+    }
+}
--- a/src/@fuse/services/platform/platform.service.ts
+++ b/src/@fuse/services/platform/platform.service.ts
@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { Platform } from '@angular/cdk/platform';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FusePlatformService
+{
+    osName = 'os-unknown';
+
+    /**
+     * Constructor
+     */
+    constructor(private _platform: Platform)
+    {
+        // If the platform is not a browser, return immediately
+        if ( !this._platform.isBrowser )
+        {
+            return;
+        }
+
+        // Windows
+        if ( navigator.userAgent.includes('Win') )
+        {
+            this.osName = 'os-windows';
+        }
+
+        // Mac OS
+        if ( navigator.userAgent.includes('Mac') )
+        {
+            this.osName = 'os-mac';
+        }
+
+        // Unix
+        if ( navigator.userAgent.includes('X11') )
+        {
+            this.osName = 'os-unix';
+        }
+
+        // Linux
+        if ( navigator.userAgent.includes('Linux') )
+        {
+            this.osName = 'os-linux';
+        }
+
+        // iOS
+        if ( this._platform.IOS )
+        {
+            this.osName = 'os-ios';
+        }
+
+        // Android
+        if ( this._platform.ANDROID )
+        {
+            this.osName = 'os-android';
+        }
+    }
+
+}
--- a/src/@fuse/services/platform/public-api.ts
+++ b/src/@fuse/services/platform/public-api.ts
@@ -0,0 +1 @@
+export * from '@fuse/services/platform/platform.service';
--- a/src/@fuse/services/tailwind/index.ts
+++ b/src/@fuse/services/tailwind/index.ts
@@ -1 +0,0 @@
-export * from '@fuse/services/tailwind/public-api';
--- a/src/@fuse/services/tailwind/public-api.ts
+++ b/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';
--- a/src/@fuse/services/tailwind/tailwind.module.ts
+++ b/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)
-    {
-    }
-}
--- a/src/@fuse/services/tailwind/tailwind.service.ts
+++ b/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();
-    }
-}
--- a/src/@fuse/styles/core/tailwind-config.scss
+++ b/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 {
-}
--- a/src/@fuse/styles/main.scss
+++ b/src/@fuse/styles/main.scss
@@ -1,12 +1,9 @@
-/* 1. Core */
-@import 'core/tailwind-config';
+/* 1. Components */
+@use 'components/example-viewer';
+@use 'components/input';

-/* 2. Components */
-@import 'components/example-viewer';
-@import 'components/input';
-
-/* 3. Overrides */
-@import 'overrides/angular-material';
-@import 'overrides/highlightjs';
-@import 'overrides/perfect-scrollbar';
-@import 'overrides/quill';
+/* 2. Overrides */
+@use 'overrides/angular-material';
+@use 'overrides/highlightjs';
+@use 'overrides/perfect-scrollbar';
+@use 'overrides/quill';
--- a/src/@fuse/styles/overrides/angular-material.scss
+++ b/src/@fuse/styles/overrides/angular-material.scss
@@ -765,10 +765,6 @@
            font-weight: 500;
            line-height: 1;

-            > div {
-                display: contents; /* Remove the div from flow to stop the subscript animation */
-            }
-
            .mat-error,
            .mat-hint {
                display: block;
--- a/src/@fuse/styles/overrides/quill.scss
+++ b/src/@fuse/styles/overrides/quill.scss
@@ -80,7 +80,9 @@
 }

 .ql-container {
-    overflow: hidden;
+    overflow: auto;
+    min-height: 160px;
+    max-height: 400px;
    border-radius: 0 0 6px 6px;
    @apply border-gray-300 border-opacity-100 shadow-sm #{'!important'};

@@ -89,17 +91,52 @@
    }

    .ql-editor {
-        min-height: 160px;
-        max-height: 160px;
-        height: 160px;
        @apply bg-card;

        .dark & {
-            background-color: rgba(0, 0, 0, 0.05);
+            //background-color: rgba(0, 0, 0, 0.05);
        }

        &.ql-blank::before {
            @apply text-hint;
        }
    }
+
+    .ql-tooltip {
+        @apply px-3 py-1 shadow-sm rounded-md bg-gray-100 border-gray-300;
+
+        .dark & {
+            @apply shadow-lg bg-gray-700 border-gray-700 #{'!important'};
+        }
+
+        // Label
+        &:before {
+            @apply text-secondary;
+        }
+
+        .ql-action,
+        .ql-remove {
+            @apply text-primary border-gray-300;
+
+            .dark & {
+                @apply text-primary-400 border-gray-300;
+            }
+        }
+
+        .ql-action:after {
+            @apply border-r border-r-gray-300 #{'!important'};
+
+            .dark & {
+                @apply border-r-gray-500 #{'!important'};
+            }
+        }
+
+        input {
+            @apply rounded-sm text-default bg-white border-gray-300 #{'!important'};
+
+            .dark & {
+                @apply bg-gray-700 border-gray-500 #{'!important'};
+            }
+        }
+    }
 }
--- a/src/@fuse/styles/tailwind.scss
+++ b/src/@fuse/styles/tailwind.scss
@@ -76,6 +76,46 @@
        }
    }

+    /* Style scrollbars on platforms other than MacOS and iOS */
+    @media only screen and (min-width: 960px) {
+
+        body:not(.os-mac) {
+
+            ::-webkit-scrollbar {
+                width: 8px;
+                height: 8px;
+                background-color: rgba(0, 0, 0, 0);
+            }
+
+            ::-webkit-scrollbar:hover {
+                width: 8px;
+                height: 8px;
+                background-color: rgba(0, 0, 0, 0.06);
+            }
+
+            ::-webkit-scrollbar-thumb {
+                border: 2px solid transparent;
+                border-radius: 20px;
+                box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.24);
+            }
+
+            ::-webkit-scrollbar-thumb:active {
+                border-radius: 20px;
+                box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.37);
+            }
+
+            &.dark {
+                ::-webkit-scrollbar-thumb {
+                    box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.24);
+                }
+
+                ::-webkit-scrollbar-thumb:active {
+                    box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.37);
+                }
+            }
+        }
+    }
+
    [disabled] * {
        @apply text-disabled #{'!important'};
    }
--- a/src/@fuse/styles/themes.scss
+++ b/src/@fuse/styles/themes.scss
@@ -72,38 +72,38 @@ body .light {
            is-dark: map.get(map.get($base-light-theme, color), is-dark),
            foreground: (
                base: #000000,
-                divider: #E2E8F0, /* blueGray.200 */
-                dividers: #E2E8F0, /* blueGray.200 */
-                disabled: #94A3B8, /* blueGray.400 */
-                disabled-button: #94A3B8, /* blueGray.400 */
-                disabled-text: #94A3B8, /* blueGray.400 */
+                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, /* 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 */
+                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, /* blueGray.300 */
+                status-bar: #CBD5E1, /* slate.300 */
                app-bar: #FFFFFF,
-                background: #F1F5F9, /* blueGray.100 */
-                hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */
+                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), /* blueGray.400 + opacity */
+                disabled-button: rgba(148, 163, 184, 0.38), /* slate.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 */
+                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 */
            )
        )
    );
@@ -126,38 +126,38 @@ body .dark {
            is-dark: map.get(map.get($base-dark-theme, color), is-dark),
            foreground: (
                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 */
+                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, /* blueGray.500 */
-                secondary-text: #94A3B8, /* blueGray.400 */
-                icon: #F1F5F9, /* blueGray.100 */
-                icons: #F1F5F9, /* blueGray.100 */
-                mat-icon: #94A3B8, /* blueGray.400 */
+                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, /* blueGray.500 */
-                slider-off-active: #94A3B8 /* blueGray.400 */
+                slider-off: #64748B, /* slate.500 */
+                slider-off-active: #94A3B8 /* slate.400 */
            ),
            background: (
-                status-bar: #0F172A, /* blueGray.900 */
-                app-bar: #0F172A, /* blueGray.900 */
-                background: #0F172A, /* blueGray.900 */
+                status-bar: #0F172A, /* slate.900 */
+                app-bar: #0F172A, /* slate.900 */
+                background: #0F172A, /* slate.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 */
+                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, /* blueGray.800 */
-                disabled-button-toggle: #0F172A, /* blueGray.900 */
-                unselected-chip: #475569, /* blueGray.600 */
-                disabled-list-option: #E2E8F0, /* blueGray.200 */
-                tooltip: #64748B /* blueGray.500 */
+                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 */
            )
        )
    );
--- a/src/@fuse/tailwind/plugins/extract-config.js
+++ b/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;
--- a/src/@fuse/tailwind/plugins/icon-size.js
+++ b/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;
+    }
+);
--- a/src/@fuse/tailwind/plugins/theming.js
+++ b/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' ? 'body, .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: {}
+            }
        };
    }
 );
--- a/src/@fuse/tailwind/plugins/utilities.js
+++ b/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;
--- a/src/@fuse/version/fuse-version.ts
+++ b/src/@fuse/version/fuse-version.ts
@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';

-export const FUSE_VERSION = new Version('14.0.0').full;
+export const FUSE_VERSION = new Version('15.1.0').full;
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -3,4 +3,4 @@
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
-}
+}
--- a/src/app/core/auth/auth.service.ts
+++ b/src/app/core/auth/auth.service.ts
@@ -96,8 +96,8 @@ export class AuthService
     */
    signInUsingToken(): Observable<any>
    {
-        // Renew token
-        return this._httpClient.post('api/auth/refresh-access-token', {
+        // Sign in using the token
+        return this._httpClient.post('api/auth/sign-in-with-token', {
            accessToken: this.accessToken
        }).pipe(
            catchError(() =>
@@ -107,8 +107,17 @@ export class AuthService
            ),
            switchMap((response: any) => {

-                // Store the access token in the local storage
-                this.accessToken = response.accessToken;
+                // Replace the access token with the new one if it's available on
+                // the response object.
+                //
+                // This is an added optional step for better security. Once you sign
+                // in using the token, you should generate a new one on the server
+                // side and attach it to the response object. Then the following
+                // piece of code can replace the token with the refreshed one.
+                if ( response.accessToken )
+                {
+                    this.accessToken = response.accessToken;
+                }

                // Set the authenticated flag to true
                this._authenticated = true;
--- a/src/app/core/config/app.config.ts
+++ b/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'
+        }
+    ]
 };
--- a/src/app/core/icons/icons.module.ts
+++ b/src/app/core/icons/icons.module.ts
@@ -17,7 +17,6 @@ export class IconsModule
        this._matIconRegistry.addSvgIconSet(this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-twotone.svg'));
        this._matIconRegistry.addSvgIconSetInNamespace('mat_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-outline.svg'));
        this._matIconRegistry.addSvgIconSetInNamespace('mat_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-solid.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('iconsmind', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/iconsmind.svg'));
        this._matIconRegistry.addSvgIconSetInNamespace('feather', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/feather.svg'));
        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-outline.svg'));
        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-solid.svg'));
--- a/src/app/layout/common/messages/messages.component.html
+++ b/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>
--- a/src/app/layout/common/notifications/notifications.component.html
+++ b/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>
--- a/src/app/layout/common/quick-chat/quick-chat.component.html
+++ b/src/app/layout/common/quick-chat/quick-chat.component.html
@@ -1,6 +1,6 @@
 <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 transform transition-transform duration-400 ease-drawer bg-card"
+        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 -->
@@ -93,7 +93,7 @@
            <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 flex-shrink p-6">
+                        <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')">
@@ -108,20 +108,20 @@
                                <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}">
+                                                '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}">
+                                                    '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 transform"
+                                                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}">
+                                                            'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
                                                <ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
                                            </div>
                                        </ng-container>
@@ -140,7 +140,7 @@
                                        <div
                                            class="my-0.5 text-sm font-medium text-secondary"
                                            [ngClass]="{'mr-3': message.isMine,
-                                                'ml-3': !message.isMine}">
+                                                        'ml-3': !message.isMine}">
                                            {{message.createdAt | date:'HH:mm'}}
                                        </div>
                                    </ng-container>
@@ -163,7 +163,7 @@
                            <button
                                mat-icon-button>
                                <mat-icon
-                                    class="transform rotate-90"
+                                    class="rotate-90"
                                    [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
                            </button>
                        </div>
@@ -178,8 +178,8 @@
 <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>
+            class="icon-size-24"
+            [svgIcon]="'heroicons_outline:chat'"></mat-icon>
        <div class="mt-4 text-xl text-center font-medium tracking-tight text-secondary">Select a conversation</div>
    </div>
 </ng-template>
--- a/src/app/layout/common/search/search.component.html
+++ b/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>
@@ -18,11 +18,12 @@
            class="w-full h-full px-16 sm:px-18"
            [formControl]="searchControl"
            [matAutocomplete]="matAutocomplete"
-            [placeholder]="'Search for a page or a contact'"
+            [placeholder]="'Search...'"
            (keydown)="onKeydown($event)"
            #barSearchInput>
        <mat-autocomplete
            class="max-h-128 sm:px-2 border-t rounded-b shadow-md"
+            [autoSelectActiveOption]="true"
            [disableRipple]="true"
            #matAutocomplete="matAutocomplete">
            <mat-option
@@ -37,7 +38,8 @@
                <ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
                    <mat-option
                        class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
-                        [routerLink]="result.link">
+                        [routerLink]="result.link"
+                        [value]="result.value">
                        <!-- Contacts -->
                        <ng-container *ngIf="resultSet.id === 'contacts'">
                            <ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
@@ -55,7 +57,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>
@@ -74,11 +76,12 @@
                matInput
                [formControl]="searchControl"
                [matAutocomplete]="matAutocomplete"
-                [placeholder]="'Search for a page or a contact'"
+                [placeholder]="'Search...'"
                (keydown)="onKeydown($event)">
        </mat-form-field>
        <mat-autocomplete
            class="max-h-128 mt-1 rounded"
+            [autoSelectActiveOption]="true"
            [disableRipple]="true"
            #matAutocomplete="matAutocomplete">
            <mat-option
@@ -93,7 +96,8 @@
                <ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
                    <mat-option
                        class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
-                        [routerLink]="result.link">
+                        [routerLink]="result.link"
+                        [value]="result.value">
                        <!-- Contacts -->
                        <ng-container *ngIf="resultSet.id === 'contacts'">
                            <ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
@@ -118,7 +122,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">
--- a/src/app/layout/common/search/search.component.ts
+++ b/src/app/layout/common/search/search.component.ts
@@ -1,6 +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 { UntypedFormControl } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
+import { MatAutocomplete } from '@angular/material/autocomplete';
 import { debounceTime, filter, map, Subject, takeUntil } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations/public-api';

@@ -20,7 +21,8 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy

    opened: boolean = false;
    resultSets: any[];
-    searchControl: FormControl = new FormControl();
+    searchControl: UntypedFormControl = new UntypedFormControl();
+    private _matAutocomplete: MatAutocomplete;
    private _unsubscribeAll: Subject<any> = new Subject<any>();

    /**
@@ -59,7 +61,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
    set barSearchInput(value: ElementRef)
    {
        // If the value exists, it means that the search input
-        // is now in the DOM and we can focus on the input..
+        // is now in the DOM, and we can focus on the input..
        if ( value )
        {
            // Give Angular time to complete the change detection cycle
@@ -71,6 +73,17 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
        }
    }

+    /**
+     * Setter for mat-autocomplete element reference
+     *
+     * @param value
+     */
+    @ViewChild('matAutocomplete')
+    set matAutocomplete(value: MatAutocomplete)
+    {
+        this._matAutocomplete = value;
+    }
+
    // -----------------------------------------------------------------------------------------------------
    // @ Lifecycle hooks
    // -----------------------------------------------------------------------------------------------------
@@ -152,14 +165,12 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
     */
    onKeydown(event: KeyboardEvent): void
    {
-        // Listen for escape to close the search
-        // if the appearance is 'bar'
-        if ( this.appearance === 'bar' )
+        // Escape
+        if ( event.code === 'Escape' )
        {
-            // Escape
-            if ( event.code === 'Escape' )
+            // If the appearance is 'bar' and the mat-autocomplete is not open, close the search
+            if ( this.appearance === 'bar' && !this._matAutocomplete.isOpen )
            {
-                // Close the search
                this.close();
            }
        }
--- a/src/app/layout/common/settings/settings.component.html
+++ b/src/app/layout/common/settings/settings.component.html
@@ -1,5 +1,5 @@
 <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="settings-cog 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"
@@ -38,18 +38,19 @@
            <!-- 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 themes">
+                <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[0]"
-                        (click)="setTheme(theme[0])">
+                        [class.ring-2]="config.theme === theme.id"
+                        [ngClass]="theme.id"
+                        (click)="setTheme(theme.id)">
                        <div
-                            class="flex-0 w-3 h-3 rounded-full"
-                            [style.background-color]="theme[1].primary"></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[0]">
-                            {{theme[0] | titlecase}}
+                            [class.text-secondary]="config.theme !== theme.id">
+                            {{theme.name}}
                        </div>
                    </div>
                </ng-container>
--- a/src/app/layout/common/settings/settings.component.ts
+++ b/src/app/layout/common/settings/settings.component.ts
@@ -2,8 +2,7 @@ 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 { FuseTailwindService } from '@fuse/services/tailwind';
-import { AppConfig, Scheme, Theme } from 'app/core/config/app.config';
+import { AppConfig, Scheme, Theme, Themes } from 'app/core/config/app.config';
 import { Layout } from 'app/layout/layout.types';

@Component({
@@ -17,6 +16,13 @@ import { Layout } from 'app/layout/layout.types';
                flex: none;
                width: auto;
            }
+
+            @media (screen and min-width: 1280px) {
+
+                empty-layout + settings .settings-cog {
+                    right: 0 !important;
+                }
+            }
        `
    ],
    encapsulation: ViewEncapsulation.None
@@ -27,7 +33,7 @@ export class SettingsComponent implements OnInit, OnDestroy
    layout: Layout;
    scheme: 'dark' | 'light';
    theme: string;
-    themes: [string, any][] = [];
+    themes: Themes;
    private _unsubscribeAll: Subject<any> = new Subject<any>();

    /**
@@ -35,8 +41,7 @@ export class SettingsComponent implements OnInit, OnDestroy
     */
    constructor(
        private _router: Router,
-        private _fuseConfigService: FuseConfigService,
-        private _fuseTailwindService: FuseTailwindService
+        private _fuseConfigService: FuseConfigService
    )
    {
    }
@@ -50,13 +55,6 @@ export class SettingsComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Get the themes
-        this._fuseTailwindService.tailwindConfig$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((config) => {
-                this.themes = Object.entries(config.themes);
-            });
-
        // Subscribe to config changes
        this._fuseConfigService.config$
            .pipe(takeUntil(this._unsubscribeAll))
--- a/src/app/layout/common/shortcuts/shortcuts.component.html
+++ b/src/app/layout/common/shortcuts/shortcuts.component.html
@@ -11,7 +11,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
@@ -128,7 +128,7 @@
                            </a>
                            <!-- Link content template -->
                            <ng-template #linkContent>
-                                <div class="relative flex flex-shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700">
+                                <div class="relative flex shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700">
                                    <mat-icon
                                        class="absolute opacity-0 group-hover:opacity-100 z-20 icon-size-5"
                                        *ngIf="mode === 'modify'"
--- a/src/app/layout/common/shortcuts/shortcuts.component.ts
+++ b/src/app/layout/common/shortcuts/shortcuts.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { MatButton } from '@angular/material/button';
@@ -20,7 +20,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
    @ViewChild('shortcutsPanel') private _shortcutsPanel: TemplateRef<any>;

    mode: 'view' | 'modify' | 'add' | 'edit' = 'view';
-    shortcutForm: FormGroup;
+    shortcutForm: UntypedFormGroup;
    shortcuts: Shortcut[];
    private _overlayRef: OverlayRef;
    private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -30,7 +30,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
        private _shortcutsService: ShortcutsService,
        private _overlay: Overlay,
        private _viewContainerRef: ViewContainerRef
--- a/src/app/layout/layout.component.ts
+++ b/src/app/layout/layout.component.ts
@@ -4,6 +4,7 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { combineLatest, filter, map, Subject, takeUntil } from 'rxjs';
 import { FuseConfigService } from '@fuse/services/config';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
+import { FusePlatformService } from '@fuse/services/platform';
 import { FUSE_VERSION } from '@fuse/version';
 import { Layout } from 'app/layout/layout.types';
 import { AppConfig } from 'app/core/config/app.config';
@@ -31,7 +32,8 @@ export class LayoutComponent implements OnInit, OnDestroy
        private _renderer2: Renderer2,
        private _router: Router,
        private _fuseConfigService: FuseConfigService,
-        private _fuseMediaWatcherService: FuseMediaWatcherService
+        private _fuseMediaWatcherService: FuseMediaWatcherService,
+        private _fusePlatformService: FusePlatformService
    )
    {
    }
@@ -102,6 +104,9 @@ export class LayoutComponent implements OnInit, OnDestroy

        // Set the app version
        this._renderer2.setAttribute(this._document.querySelector('[ng-version]'), 'fuse-version', FUSE_VERSION);
+
+        // Set the OS name
+        this._renderer2.addClass(this._document.body, this._fusePlatformService.osName);
    }

    /**
@@ -203,6 +208,6 @@ export class LayoutComponent implements OnInit, OnDestroy
        });

        // Add class name for the currently selected theme
-        this._document.body.classList.add(`theme-${this.theme}`);
+        this._document.body.classList.add(this.theme);
    }
 }
--- a/src/app/layout/layouts/vertical/classy/classy.component.html
+++ b/src/app/layout/layouts/vertical/classy/classy.component.html
@@ -37,10 +37,10 @@
                    [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
            </div>
            <div class="flex flex-col items-center justify-center w-full mt-6">
-                <div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden text-center leading-normal font-medium">
+                <div class="w-full whitespace-nowrap text-ellipsis overflow-hidden text-center leading-normal font-medium">
                    {{user.name}}
                </div>
-                <div class="w-full mt-0.5 whitespace-nowrap overflow-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
+                <div class="w-full mt-0.5 whitespace-nowrap text-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
                    {{user.email}}
                </div>
            </div>
--- a/src/app/layout/layouts/vertical/dense/dense.component.ts
+++ b/src/app/layout/layouts/vertical/dense/dense.component.ts
@@ -66,6 +66,9 @@ export class DenseLayoutComponent implements OnInit, OnDestroy

                // Check if the screen is small
                this.isScreenSmall = !matchingAliases.includes('md');
+
+                // Change the navigation appearance
+                this.navigationAppearance = this.isScreenSmall ? 'default' : 'dense';
            });
    }

--- a/src/app/layout/layouts/vertical/futuristic/futuristic.component.html
+++ b/src/app/layout/layouts/vertical/futuristic/futuristic.component.html
@@ -23,10 +23,10 @@
        <div class="flex items-center w-full px-6 py-8 border-t">
            <user></user>
            <div class="flex flex-col w-full ml-4 overflow-hidden">
-                <div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden leading-normal text-current opacity-80">
+                <div class="w-full whitespace-nowrap text-ellipsis overflow-hidden leading-normal text-current opacity-80">
                    {{user.name}}
                </div>
-                <div class="w-full mt-0.5 whitespace-nowrap text-sm overflow-ellipsis overflow-hidden leading-normal text-current opacity-50">
+                <div class="w-full mt-0.5 whitespace-nowrap text-sm text-ellipsis overflow-hidden leading-normal text-current opacity-50">
                    brian.hughes@company.com
                </div>
            </div>
--- a/src/app/mock-api/apps/file-manager/api.ts
+++ b/src/app/mock-api/apps/file-manager/api.ts
@@ -38,8 +38,8 @@ export class FileManagerMockApi
                // Clone the items
                let items = cloneDeep(this._items);

-                // See if a folder id exist
-                const folderId = request.params.get('folderId') ?? null;
+                // See if the folder id exist
+                const folderId = request.params.get('folderId') === 'null' ? null : request.params.get('folderId');

                // Filter the items by folder id. If folder id is null,
                // that means we want to root items which have folder id
--- a/src/app/mock-api/common/auth/api.ts
+++ b/src/app/mock-api/common/auth/api.ts
@@ -87,10 +87,10 @@ export class AuthMockApi
            });

        // -----------------------------------------------------------------------------------------------------
-        // @ Verify and refresh the access token - POST
+        // @ Sign in using the access token - POST
        // -----------------------------------------------------------------------------------------------------
        this._fuseMockApiService
-            .onPost('api/auth/refresh-access-token')
+            .onPost('api/auth/sign-in-with-token')
            .reply(({request}) => {

                // Get the access token
--- a/src/app/mock-api/common/search/api.ts
+++ b/src/app/mock-api/common/search/api.ts
@@ -79,6 +79,9 @@ export class SearchMockApi

                        // Add a link
                        result.link = '/apps/contacts/' + result.id;
+
+                        // Add the name as the value
+                        result.value = result.name;
                    });

                    // Add to the results
@@ -95,6 +98,8 @@ export class SearchMockApi
                    // Normalize the results
                    pagesResults.forEach((result: any) => {

+                        // Add the page title as the value
+                        result.value = result.title;
                    });

                    // Add to the results
@@ -113,6 +118,9 @@ export class SearchMockApi

                        // Add a link
                        result.link = '/apps/tasks/' + result.id;
+
+                        // Add the title as the value
+                        result.value = result.title;
                    });

                    // Add to the results
--- a/src/app/mock-api/ui/icons/api.ts
+++ b/src/app/mock-api/ui/icons/api.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { cloneDeep } from 'lodash-es';
 import { FuseMockApiService } from '@fuse/lib/mock-api';
-import { feather, heroicons, iconsmind, material } from 'app/mock-api/ui/icons/data';
+import { feather, heroicons, material } from 'app/mock-api/ui/icons/data';

@Injectable({
    providedIn: 'root'
@@ -10,7 +10,6 @@ export class IconsMockApi
 {
    private readonly _feather: any = feather;
    private readonly _heroicons: any = heroicons;
-    private readonly _iconsmind: any = iconsmind;
    private readonly _material: any = material;

    /**
@@ -41,7 +40,7 @@ export class IconsMockApi
                {
                    namespace: 'feather',
                    name     : 'Feather',
-                    grid     : 6,
+                    grid     : 'icon-size-6',
                    list     : cloneDeep(this._feather)
                }
            ]);
@@ -56,7 +55,7 @@ export class IconsMockApi
                {
                    namespace: 'heroicons_outline',
                    name     : 'Heroicons Outline',
-                    grid     : 6,
+                    grid     : 'icon-size-6',
                    list     : cloneDeep(this._heroicons)
                }
            ]);
@@ -71,26 +70,11 @@ export class IconsMockApi
                {
                    namespace: 'heroicons_solid',
                    name     : 'Heroicons Solid',
-                    grid     : 5,
+                    grid     : 'icon-size-5',
                    list     : cloneDeep(this._heroicons)
                }
            ]);

-        // -----------------------------------------------------------------------------------------------------
-        // @ Iconsmind icons - GET
-        // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/ui/icons/iconsmind')
-            .reply(() => [
-                200,
-                {
-                    namespace: 'iconsmind',
-                    name     : 'Iconsmind',
-                    grid     : 10,
-                    list     : cloneDeep(this._iconsmind)
-                }
-            ]);
-
        // -----------------------------------------------------------------------------------------------------
        // @ Material solid icons - GET
        // -----------------------------------------------------------------------------------------------------
@@ -101,7 +85,7 @@ export class IconsMockApi
                {
                    namespace: 'mat_solid',
                    name     : 'Material Solid',
-                    grid     : 6,
+                    grid     : 'icon-size-6',
                    list     : cloneDeep(this._material)
                }
            ]);
@@ -116,7 +100,7 @@ export class IconsMockApi
                {
                    namespace: 'mat_outline',
                    name     : 'Material Outline',
-                    grid     : 6,
+                    grid     : 'icon-size-6',
                    list     : cloneDeep(this._material)
                }
            ]);
@@ -131,7 +115,7 @@ export class IconsMockApi
                {
                    namespace: '',
                    name     : 'Material Twotone',
-                    grid     : 6,
+                    grid     : 'icon-size-6',
                    list     : cloneDeep(this._material)
                }
            ]);
--- a/src/app/mock-api/ui/icons/data.ts
+++ b/src/app/mock-api/ui/icons/data.ts
--- a/src/app/modules/auth/forgot-password/forgot-password.component.ts
+++ b/src/app/modules/auth/forgot-password/forgot-password.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, NgForm, Validators } from '@angular/forms';
 import { finalize } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
@@ -19,7 +19,7 @@ export class AuthForgotPasswordComponent implements OnInit
        type   : 'success',
        message: ''
    };
-    forgotPasswordForm: FormGroup;
+    forgotPasswordForm: UntypedFormGroup;
    showAlert: boolean = false;

    /**
@@ -27,7 +27,7 @@ export class AuthForgotPasswordComponent implements OnInit
     */
    constructor(
        private _authService: AuthService,
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
    )
    {
    }
--- a/src/app/modules/auth/reset-password/reset-password.component.ts
+++ b/src/app/modules/auth/reset-password/reset-password.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, NgForm, Validators } from '@angular/forms';
 import { finalize } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseValidators } from '@fuse/validators';
@@ -20,7 +20,7 @@ export class AuthResetPasswordComponent implements OnInit
        type   : 'success',
        message: ''
    };
-    resetPasswordForm: FormGroup;
+    resetPasswordForm: UntypedFormGroup;
    showAlert: boolean = false;

    /**
@@ -28,7 +28,7 @@ export class AuthResetPasswordComponent implements OnInit
     */
    constructor(
        private _authService: AuthService,
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
    )
    {
    }
--- a/src/app/modules/auth/sign-in/sign-in.component.ts
+++ b/src/app/modules/auth/sign-in/sign-in.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, NgForm, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
@@ -19,7 +19,7 @@ export class AuthSignInComponent implements OnInit
        type   : 'success',
        message: ''
    };
-    signInForm: FormGroup;
+    signInForm: UntypedFormGroup;
    showAlert: boolean = false;

    /**
@@ -28,7 +28,7 @@ export class AuthSignInComponent implements OnInit
    constructor(
        private _activatedRoute: ActivatedRoute,
        private _authService: AuthService,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
        private _router: Router
    )
    {
--- a/src/app/modules/auth/sign-up/sign-up.component.html
+++ b/src/app/modules/auth/sign-up/sign-up.component.html
@@ -30,7 +30,8 @@
            <!-- Sign Up form -->
            <form
                class="mt-8"
-                [formGroup]="signUpForm">
+                [formGroup]="signUpForm"
+                #signUpNgForm="ngForm">

                <!-- Name field -->
                <mat-form-field class="w-full">
--- a/src/app/modules/auth/sign-up/sign-up.component.ts
+++ b/src/app/modules/auth/sign-up/sign-up.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
@@ -19,7 +19,7 @@ export class AuthSignUpComponent implements OnInit
        type   : 'success',
        message: ''
    };
-    signUpForm: FormGroup;
+    signUpForm: UntypedFormGroup;
    showAlert: boolean = false;

    /**
@@ -27,7 +27,7 @@ export class AuthSignUpComponent implements OnInit
     */
    constructor(
        private _authService: AuthService,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
        private _router: Router
    )
    {
--- a/src/app/modules/auth/unlock-session/unlock-session.component.ts
+++ b/src/app/modules/auth/unlock-session/unlock-session.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, NgForm, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { fuseAnimations } from '@fuse/animations';
 import { AuthService } from 'app/core/auth/auth.service';
@@ -22,7 +22,7 @@ export class AuthUnlockSessionComponent implements OnInit
    };
    name: string;
    showAlert: boolean = false;
-    unlockSessionForm: FormGroup;
+    unlockSessionForm: UntypedFormGroup;
    private _email: string;

    /**
@@ -31,7 +31,7 @@ export class AuthUnlockSessionComponent implements OnInit
    constructor(
        private _activatedRoute: ActivatedRoute,
        private _authService: AuthService,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
        private _router: Router,
        private _userService: UserService
    )
--- a/src/assets/icons/iconsmind.svg
+++ b/src/assets/icons/iconsmind.svg
--- a/src/index.html
+++ b/src/index.html
@@ -8,7 +8,7 @@
            content="Admin Template and Starter Kit with Angular, Angular Material Components and TailwindCSS">
        <meta
            name="keywords"
-            content="Fuse,HTML,CSS,Angular,Angular 2,Angular 10,Angular 11,Angular 12,Material,Material 2,Angular Components,Tailwind,Tailwind CSS,TailwindCSS,Admin Template,Admin Starter Kit">
+            content="Fuse,HTML,CSS,Angular,Angular 2,Angular 11,Angular 12,Angular 13,Material,Material 2,Angular Components,Tailwind,Tailwind CSS,TailwindCSS,Admin Template,Admin Starter Kit">
        <meta
            name="viewport"
            content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
--- a/src/test.ts
+++ b/src/test.ts
@@ -6,8 +6,8 @@ import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@ang

 declare const require: {
    context(path: string, deep?: boolean, filter?: RegExp): {
-        keys(): string[];
        <T>(id: string): T;
+        keys(): string[];
    };
 };

@@ -21,4 +21,4 @@ getTestBed().initTestEnvironment(
 const context = require.context('./', true, /\.spec\.ts$/);

 // And load the modules.
-context.keys().map(context);
+context.keys().forEach(context);
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,4 @@
 const path = require('path');
-const process = require('process');
 const colors = require('tailwindcss/colors');
 const defaultTheme = require('tailwindcss/defaultTheme');
 const generatePalette = require(path.resolve(__dirname, ('src/@fuse/tailwind/utils/generate-palette')));
@@ -25,8 +24,8 @@ const themes = {
            DEFAULT: colors.indigo[600]
        },
        accent   : {
-            ...colors.blueGray,
-            DEFAULT: colors.blueGray[800]
+            ...colors.slate,
+            DEFAULT: colors.slate[800]
        },
        warn     : {
            ...colors.red,
@@ -41,7 +40,7 @@ const themes = {
    'brand' : {
        primary: customPalettes.brand
    },
-    'indigo': {
+    'teal'  : {
        primary: {
            ...colors.teal,
            DEFAULT: colors.teal[600]
@@ -65,38 +64,10 @@ const themes = {
 * Tailwind configuration
 */
 const config = {
-    experimental: {},
-    future      : {},
-    darkMode    : 'class',
-    important   : true,
-    purge       : {
-        enabled: process.env.TAILWIND_MODE === 'build',
-        content: ['./src/**/*.{html,scss,ts}'],
-        options: {
-            safelist: {
-                standard: ['dark'],
-                deep    : [/^theme/, /^mat/]
-            }
-        }
-    },
-    theme       : {
-        colors  : {
-            transparent: 'transparent',
-            current    : 'currentColor',
-            black      : colors.black,
-            white      : colors.white,
-            pink       : colors.pink,
-            gray       : colors.blueGray,
-            red        : colors.red,
-            orange     : colors.orange,
-            amber      : colors.amber,
-            yellow     : colors.yellow,
-            green      : colors.green,
-            teal       : colors.teal,
-            blue       : colors.blue,
-            indigo     : colors.indigo,
-            purple     : colors.purple
-        },
+    darkMode   : 'class',
+    content    : ['./src/**/*.{html,scss,ts}'],
+    important  : true,
+    theme      : {
        fontSize: {
            'xs'  : '0.625rem',
            'sm'  : '0.75rem',
@@ -115,39 +86,41 @@ const config = {
            '10xl': '8rem'
        },
        screens : {
-            print: {'raw': 'print'},
-            sm   : '600px',
-            md   : '960px',
-            lg   : '1280px',
-            xl   : '1440px'
+            sm: '600px',
+            md: '960px',
+            lg: '1280px',
+            xl: '1440px'
        },
        extend  : {
-            animation : {
+            animation               : {
                'spin-slow': 'spin 3s linear infinite'
            },
-            flex      : {
+            colors                  : {
+                gray: colors.slate
+            },
+            flex                    : {
                '0': '0 0 auto'
            },
-            fontFamily: {
+            fontFamily              : {
                sans: `"Inter var", ${defaultTheme.fontFamily.sans.join(',')}`,
                mono: `"IBM Plex Mono", ${defaultTheme.fontFamily.mono.join(',')}`
            },
-            opacity   : {
+            opacity                 : {
                12: '0.12',
                38: '0.38',
                87: '0.87'
            },
-            rotate    : {
+            rotate                  : {
                '-270': '270deg',
                '15'  : '15deg',
                '30'  : '30deg',
                '60'  : '60deg',
                '270' : '270deg'
            },
-            scale     : {
+            scale                   : {
                '-1': '-1'
            },
-            zIndex    : {
+            zIndex                  : {
                '-1'   : -1,
                '49'   : 49,
                '60'   : 60,
@@ -159,7 +132,7 @@ const config = {
                '9999' : 9999,
                '99999': 99999
            },
-            spacing   : {
+            spacing                 : {
                '13': '3.25rem',
                '15': '3.75rem',
                '18': '4.5rem',
@@ -167,23 +140,7 @@ const config = {
                '26': '6.5rem',
                '30': '7.5rem',
                '50': '12.5rem',
-                '90': '22.5rem'
-            },
-            /**
-             * Extended spacing values for width and height utilities.
-             * This way, we won't be adding these to other utilities
-             * that use 'spacing' config to keep the file size
-             * smaller by not generating useless utilities such as
-             * p-1/4 or m-480.
-             */
-            extendedSpacing         : {
-                // Fractional values
-                '1/2': '50%',
-                '1/3': '33.333333%',
-                '2/3': '66.666667%',
-                '1/4': '25%',
-                '2/4': '50%',
-                '3/4': '75%',
+                '90': '22.5rem',

                // Bigger values
                '100': '25rem',
@@ -200,30 +157,28 @@ const config = {
                '320': '80rem',
                '360': '90rem',
                '400': '100rem',
-                '480': '120rem'
+                '480': '120rem',
+
+                // Fractional values
+                '1/2': '50%',
+                '1/3': '33.333333%',
+                '2/3': '66.666667%',
+                '1/4': '25%',
+                '2/4': '50%',
+                '3/4': '75%'
            },
-            height                  : theme => ({
-                ...theme('extendedSpacing')
+            minHeight               : ({theme}) => ({
+                ...theme('spacing')
            }),
-            minHeight               : theme => ({
-                ...theme('spacing'),
-                ...theme('extendedSpacing')
-            }),
-            maxHeight               : theme => ({
-                ...theme('extendedSpacing'),
+            maxHeight               : {
                none: 'none'
-            }),
-            width                   : theme => ({
-                ...theme('extendedSpacing')
-            }),
-            minWidth                : theme => ({
+            },
+            minWidth                : ({theme}) => ({
                ...theme('spacing'),
-                ...theme('extendedSpacing'),
                screen: '100vw'
            }),
-            maxWidth                : theme => ({
+            maxWidth                : ({theme}) => ({
                ...theme('spacing'),
-                ...theme('extendedSpacing'),
                screen: '100vw'
            }),
            transitionDuration      : {
@@ -234,7 +189,7 @@ const config = {
            },

            // @tailwindcss/typography
-            typography: (theme) => ({
+            typography: ({theme}) => ({
                DEFAULT: {
                    css: {
                        color              : 'var(--fuse-text-default)',
@@ -315,121 +270,8 @@ const config = {
            })
        }
    },
-    variants    : {
-        accessibility           : [],
-        alignContent            : ['responsive'],
-        alignItems              : ['responsive'],
-        alignSelf               : ['responsive'],
-        animation               : [],
-        backgroundAttachment    : [],
-        backgroundClip          : [],
-        backgroundColor         : ['dark', 'responsive', 'group-hover', 'hover', 'focus', 'focus-within'],
-        backgroundImage         : [],
-        backgroundOpacity       : ['dark', 'hover'],
-        backgroundPosition      : [],
-        backgroundRepeat        : [],
-        backgroundSize          : [],
-        borderCollapse          : [],
-        borderColor             : ['dark', 'group-hover', 'hover', 'focus', 'focus-within'],
-        borderOpacity           : ['group-hover', 'hover'],
-        borderRadius            : ['responsive'],
-        borderStyle             : [],
-        borderWidth             : ['dark', 'responsive', 'first', 'last', 'odd', 'even'],
-        boxShadow               : ['dark', 'responsive', 'hover', 'focus-within'],
-        boxSizing               : [],
-        cursor                  : [],
-        display                 : ['dark', 'responsive', 'hover', 'group-hover'],
-        divideColor             : ['dark'],
-        divideOpacity           : [],
-        divideStyle             : [],
-        divideWidth             : ['responsive'],
-        fill                    : [],
-        flex                    : ['responsive'],
-        flexDirection           : ['responsive'],
-        flexGrow                : ['responsive'],
-        flexShrink              : ['responsive'],
-        flexWrap                : ['responsive'],
-        fontFamily              : [],
-        fontSize                : ['responsive'],
-        fontSmoothing           : [],
-        fontStyle               : ['responsive'],
-        fontVariantNumeric      : [],
-        fontWeight              : ['responsive'],
-        gap                     : ['responsive'],
-        gridAutoColumns         : ['responsive'],
-        gridAutoFlow            : ['responsive'],
-        gridAutoRows            : ['responsive'],
-        gridColumn              : ['responsive'],
-        gridColumnEnd           : ['responsive'],
-        gridColumnStart         : ['responsive'],
-        gridRow                 : ['responsive'],
-        gridRowEnd              : ['responsive'],
-        gridRowStart            : ['responsive'],
-        gridTemplateColumns     : ['responsive'],
-        gridTemplateRows        : ['responsive'],
-        height                  : ['responsive'],
-        inset                   : ['responsive'],
-        justifyContent          : ['responsive'],
-        justifyItems            : ['responsive'],
-        justifySelf             : ['responsive'],
-        letterSpacing           : ['responsive'],
-        lineHeight              : ['responsive'],
-        listStylePosition       : [],
-        listStyleType           : [],
-        margin                  : ['responsive'],
-        maxHeight               : ['responsive'],
-        maxWidth                : ['responsive'],
-        minHeight               : ['responsive'],
-        minWidth                : ['responsive'],
-        objectFit               : ['responsive'],
-        objectPosition          : ['responsive'],
-        opacity                 : ['responsive', 'group-hover', 'hover'],
-        order                   : ['responsive'],
-        outline                 : [],
-        overflow                : ['responsive'],
-        overscrollBehavior      : ['responsive'],
-        padding                 : ['responsive'],
-        placeContent            : ['responsive'],
-        placeItems              : ['responsive'],
-        placeSelf               : ['responsive'],
-        pointerEvents           : ['responsive'],
-        position                : ['responsive'],
-        resize                  : [],
-        ringColor               : ['dark', 'group-hover'],
-        ringOffsetColor         : ['dark'],
-        ringOffsetWidth         : [],
-        ringOpacity             : [],
-        ringWidth               : [],
-        rotate                  : [],
-        scale                   : [],
-        skew                    : [],
-        space                   : ['responsive'],
-        stroke                  : ['responsive'],
-        strokeWidth             : ['responsive'],
-        tableLayout             : ['responsive'],
-        textAlign               : ['responsive'],
-        textColor               : ['dark', 'group-hover', 'hover'],
-        textDecoration          : ['group-hover', 'hover'],
-        textOpacity             : ['group-hover', 'hover'],
-        textOverflow            : ['responsive'],
-        textTransform           : [],
-        transform               : [],
-        transformOrigin         : [],
-        transitionDelay         : [],
-        transitionDuration      : [],
-        transitionProperty      : [],
-        transitionTimingFunction: [],
-        translate               : ['responsive', 'hover'],
-        userSelect              : ['responsive'],
-        visibility              : ['responsive'],
-        whitespace              : ['responsive'],
-        width                   : ['responsive'],
-        wordBreak               : ['responsive'],
-        zIndex                  : ['responsive']
-    },
-    corePlugins : {
+    corePlugins: {
        appearance        : false,
-        gradientColorStops: false,
        container         : false,
        float             : false,
        clear             : false,
@@ -437,10 +279,9 @@ const config = {
        placeholderOpacity: false,
        verticalAlign     : false
    },
-    plugins     : [
+    plugins    : [

        // Fuse - Tailwind plugins
-        require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/extract-config'))),
        require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/utilities'))),
        require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/icon-size'))),
        require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/theming')))({themes}),
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,7 @@
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
-        "target": "es2017",
+        "target": "es2020",
        "module": "es2020",
        "lib": [
            "es2020",
Author	SHA1	Message	Date
Sercan Yemen	d5ec5a6fcd	Merge branch 'dev' into dev-starter	2022-07-21 11:56:35 +03:00
Sercan Yemen	6d516a119a	(dependencies) Updated Angular & Angular Material to v14.1.0 (dependencies) Updated various other packages	2022-07-21 11:51:28 +03:00
Sercan Yemen	bb06bccf91	(@fuse/overrides/angular-material) Fixed: mat-hint position is not working	2022-06-28 08:34:48 +03:00
Sercan Yemen	3018c0235f	Added the missing release date to the changelog	2022-06-03 11:00:40 +03:00
Sercan Yemen	8e513ccf1e	Merge branch 'dev' into dev-starter	2022-06-03 10:52:35 +03:00
Sercan Yemen	a6399c0cf4	(@fuse) Fixed couple lint issues	2022-06-03 10:46:40 +03:00
Sercan Yemen	22d91673ae	(dependencies) Updated to Angular and Angular Material v14.0.0 stable (dependencies) Updated various other packages	2022-06-03 10:41:07 +03:00
Sercan Yemen	3e303a041a	Updated the changelog	2022-06-02 11:02:30 +03:00
Sercan Yemen	714bc49c4e	Updated the version number and added the changelog	2022-06-02 10:48:17 +03:00
Sercan Yemen	3cc4f31238	(dependencies) Updated Angular & Angular Material	2022-06-02 10:28:07 +03:00
Sercan Yemen	c5aa094230	(icons) Removed iconsmind icons pack because of the bundle size concerns	2022-05-27 13:48:31 +03:00
Sercan Yemen	cbd35d57f8	(global) Replaced iconsmind icons with heroicons	2022-05-27 13:45:52 +03:00
Sercan Yemen	11d5dcdb9d	Updated various other packages	2022-05-26 14:01:50 +03:00
Sercan Yemen	66e5511402	Migrated to Angular Material to 14.rc-1	2022-05-26 13:59:01 +03:00
Sercan Yemen	20a03c3689	Migrated to Angular to 14.rc-2	2022-05-26 13:57:37 +03:00
Sercan Yemen	d033470851	(layout) Fixed: The theme settings cog is not positioned correctly in Empty layout	2022-05-25 23:17:12 +03:00
Sercan Yemen	c374c2c6cf	(global) Replaced linked buttons with a tags + removed unnecessary routerLink attributes from some buttons	2022-05-25 13:29:47 +03:00
Sercan Yemen	30d75c9bd7	(@fuse/navigation) Keep the fragment as null if it's not provided to prevent empty hashtag appearing at the end of the url	2022-05-25 12:28:25 +03:00
Sercan Yemen	54cd21f496	(docs) Updated docs for FuseNavigation	2022-05-25 12:18:24 +03:00
Sercan Yemen	57d87fa1c4	(@fuse/navigation) Added "fragment" and "queryParams" support along with "preserveFragment" and "queryParamsHandling"	2022-05-25 12:17:56 +03:00
Sercan Yemen	cd8c6ece0f	(@fuse/service/confirmation) Cleaned-up the dialog component	2022-05-25 11:43:23 +03:00
Sercan Yemen	1bf4c48cdc	(@fuse/service/platform) Added comments to the service file	2022-05-25 11:25:37 +03:00
Sercan Yemen	ea9efc3dc2	(global) Added custom scrollbar styling for platforms other than macOS and iOS	2022-05-24 14:39:02 +03:00
Sercan Yemen	878a6bf191	(@fuse/services/platform) Added platform checker service	2022-05-24 14:38:50 +03:00
Sercan Yemen	099e745a36	(apps/academy) Fixed: Ring outside the current step's number is not visible	2022-05-24 12:58:06 +03:00
Sercan Yemen	150ddc64d7	(mock-api) Replaced the 'refresh-access-token' url with 'sign-in-with-token' (auth) Changed the url on 'signInUsingToken' method to reflect the mock-api changes	2022-05-24 12:43:51 +03:00
Sercan Yemen	a6d64b1747	(auth) Made the renewing token on "sign-in-with-token" process an optional step to simplify the login process	2022-05-24 12:42:23 +03:00
Sercan Yemen	6eff4a1898	(@fuse/overrides/quill) Added tooltip styles for better compatibility, closes #171	2022-05-24 12:17:45 +03:00
Sercan Yemen	e3630218b5	(apps/mailbox) Fixed: Quill editor tooltips are not positioning correctly	2022-05-24 12:17:09 +03:00
Sercan Yemen	154095da0f	(auth/sign-up) Added missing ngForm reference, closes #165	2022-05-24 11:30:10 +03:00
Sercan Yemen	a32970b7c2	(@fuse/navigation) Moved the margin into the children's first child for smoother animations, closes #173	2022-05-24 09:56:44 +03:00
Sercan Yemen	2771d3b1ae	(global) Replace @import with @use	2022-05-17 12:40:52 +03:00
Sercan Yemen	9b44793b64	(ui/page-layouts) Fixed: Toggle button selected background is not visible	2022-05-15 15:28:28 +03:00
Sercan Yemen	9521257b4d	(apps/mailbox) Fixed: Empty route related issues	2022-05-12 23:50:43 +03:00
Sercan Yemen	5378a6b6ef	(apps/chat) Fixed: Empty route related issues	2022-05-12 23:49:42 +03:00
Sercan Yemen	c41e48df7f	Angular 14 related changes	2022-05-12 23:40:40 +03:00
Sercan Yemen	b87173b056	(layout/common/search) Implemented the new MatAutocomplete "autoSelectActiveOption" functionality	2022-05-12 23:37:33 +03:00
Sercan Yemen	6aaa355a48	(ui/icons) Updated the route configuration	2022-05-12 23:28:07 +03:00
Sercan Yemen	b96dd041d9	(docs) Updated the directory structure	2022-05-12 23:25:51 +03:00
Sercan Yemen	9786c6baf5	(mock-api/file-manager) Fixed: http params are not working properly because of the new string conversion	2022-05-12 23:18:10 +03:00
Sercan Yemen	f5cc14939c	(apps/chat) Fixed: Empty route related issues	2022-05-12 23:13:02 +03:00
Sercan Yemen	8fd434600b	Updated various other packages	2022-05-12 21:36:32 +03:00
Sercan Yemen	4c82f6749b	Updated Angular & Angular Material to 14.0.0-rc.0	2022-05-12 21:23:12 +03:00
Sercan Yemen	b0830148a3	(@fuse) Better scrolling for Quill editor	2022-05-12 13:36:40 +03:00
Sercan Yemen	cdc54ab05e	(Documentation) Updated the FuseDrawer documentation and example	2022-03-29 16:38:49 +03:00
Sercan Yemen	e6ad547d27	(FuseDrawer) Updated the overlay and animation handling code for better stability	2022-03-29 16:38:42 +03:00
Sercan Yemen	4430754020	Merge remote-tracking branch 'origin/demo' into starter	2022-02-21 12:08:29 +03:00
Sercan Yemen	9d93a2b060	Merge remote-tracking branch 'origin/demo' into starter	2022-02-21 12:00:18 +03:00
Sercan Yemen	afda4b35c9	Updated the changelog	2022-02-21 11:59:41 +03:00
Sercan Yemen	3b88638dee	Updated various packages Re-enabled AngularCLI cache since Tailwind related issues are appeared to be fixed	2022-02-21 11:47:35 +03:00
Sercan Yemen	b96182c848	(layouts/dense) Fixed: Navigation appearance doesn't set correctly on small devices	2022-01-14 11:36:38 +03:00
Sercan Yemen	443a103d6f	(@fuse/masonry) Removed the unnecessary scss file	2022-01-14 11:35:41 +03:00
Sercan Yemen	42241b279d	(@fuse/navigation) Expose the width variables as css custom properties, so they can be overridden from the outside (@fuse/drawer) Expose the width variable as a css custom property, so it can be overridden from the outside	2022-01-14 11:35:12 +03:00
Sercan Yemen	e5eaea5013	Fixed: Typo on changelog	2022-01-01 23:05:09 +03:00
Sercan Yemen	6e85b9ff2a	Fixed: Typo on changelog	2022-01-01 23:01:51 +03:00
Sercan Yemen	38a4c392fe	Merge remote-tracking branch 'origin/demo' into starter	2022-01-01 22:52:20 +03:00
Sercan Yemen	6e593b1f1e	Updated version number and the changelog	2022-01-01 22:50:22 +03:00
Sercan Yemen	57a3f6ae99	Updated various packages	2022-01-01 22:47:49 +03:00
Sercan Yemen	700a117654	Moved to the new syntax on Tailwind config	2022-01-01 22:33:23 +03:00
Sercan Yemen	5337c95782	Fixed: Typo on resolve object	2022-01-01 22:32:39 +03:00
Sercan Yemen	964c4b23a9	Fixed: Accent and Warn colors are not being generated for themes other than the Default	2022-01-01 22:32:24 +03:00
Sercan Yemen	d9dee128de	Merge remote-tracking branch 'origin/demo' into starter	2021-12-22 14:58:21 +03:00
Sercan Yemen	a8337ce617	Removed extra import	2021-12-22 14:36:30 +03:00
Sercan Yemen	3ceda2cf3f	Removed extract-config plugin entry	2021-12-22 14:28:13 +03:00
Sercan Yemen	805b50707e	Updated Angular to v13.1 Updated ESLint to v13 Updated Tailwind to v3 Updated various other packages	2021-12-22 14:19:21 +03:00
sercan	3fd522de31	Updated changelog	2021-11-11 11:09:49 +03:00
				`@@ -0,0 +1 @@`
				`export * from '@fuse/services/platform/public-api';`
				`@@ -1 +0,0 @@`
				`export * from '@fuse/services/tailwind/public-api';`