Updated the changelog

Re-enabled AngularCLI cache since Tailwind related issues are appeared to be fixed

angular.json

@@ -2,10 +2,7 @@
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "version": 1,
     "cli": {
-        "defaultCollection": "@angular-eslint/schematics",
+        "defaultCollection": "@angular-eslint/schematics"
-        "cache": {
-            "enabled": false
-        }
     },
     "newProjectRoot": "projects",
     "projects": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fuse/demo",
-    "version": "14.1.1",
+    "version": "14.2.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -14,68 +14,68 @@
         "lint": "ng lint"
     },
     "dependencies": {
-        "@angular/animations": "13.1.1",
+        "@angular/animations": "13.2.3",
-        "@angular/cdk": "13.1.1",
+        "@angular/cdk": "13.2.3",
-        "@angular/common": "13.1.1",
+        "@angular/common": "13.2.3",
-        "@angular/compiler": "13.1.1",
+        "@angular/compiler": "13.2.3",
-        "@angular/core": "13.1.1",
+        "@angular/core": "13.2.3",
-        "@angular/forms": "13.1.1",
+        "@angular/forms": "13.2.3",
-        "@angular/material": "13.1.1",
+        "@angular/material": "13.2.3",
-        "@angular/material-moment-adapter": "13.1.1",
+        "@angular/material-moment-adapter": "13.2.3",
-        "@angular/platform-browser": "13.1.1",
+        "@angular/platform-browser": "13.2.3",
-        "@angular/platform-browser-dynamic": "13.1.1",
+        "@angular/platform-browser-dynamic": "13.2.3",
-        "@angular/router": "13.1.1",
+        "@angular/router": "13.2.3",
-        "@ngneat/transloco": "3.1.1",
+        "@ngneat/transloco": "3.1.4",
-        "apexcharts": "3.32.1",
+        "apexcharts": "3.33.1",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.3.1",
+        "highlight.js": "11.4.0",
         "lodash-es": "4.17.21",
         "moment": "2.29.1",
-        "ng-apexcharts": "1.6.0",
+        "ng-apexcharts": "1.7.0",
-        "ngx-markdown": "13.0.0",
+        "ngx-markdown": "13.1.0",
-        "ngx-quill": "16.1.1",
+        "ngx-quill": "16.1.2",
         "perfect-scrollbar": "1.5.3",
         "quill": "1.3.7",
-        "rxjs": "7.5.1",
+        "rxjs": "7.5.4",
         "tslib": "2.3.1",
         "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "13.1.2",
+        "@angular-devkit/build-angular": "13.2.4",
-        "@angular-eslint/builder": "13.0.1",
+        "@angular-eslint/builder": "13.1.0",
-        "@angular-eslint/eslint-plugin": "13.0.1",
+        "@angular-eslint/eslint-plugin": "13.1.0",
-        "@angular-eslint/eslint-plugin-template": "13.0.1",
+        "@angular-eslint/eslint-plugin-template": "13.1.0",
-        "@angular-eslint/schematics": "13.0.1",
+        "@angular-eslint/schematics": "13.1.0",
-        "@angular-eslint/template-parser": "13.0.1",
+        "@angular-eslint/template-parser": "13.1.0",
-        "@angular/cli": "13.1.2",
+        "@angular/cli": "13.2.4",
-        "@angular/compiler-cli": "13.1.1",
+        "@angular/compiler-cli": "13.2.3",
         "@tailwindcss/aspect-ratio": "0.4.0",
-        "@tailwindcss/line-clamp": "0.3.0",
+        "@tailwindcss/line-clamp": "0.3.1",
-        "@tailwindcss/typography": "0.5.0",
+        "@tailwindcss/typography": "0.5.2",
         "@types/chroma-js": "2.1.3",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "3.10.2",
+        "@types/jasmine": "3.10.3",
         "@types/lodash": "4.14.178",
-        "@types/lodash-es": "4.17.5",
+        "@types/lodash-es": "4.17.6",
-        "@types/node": "12.20.38",
+        "@types/node": "12.20.46",
-        "@typescript-eslint/eslint-plugin": "5.8.1",
+        "@typescript-eslint/eslint-plugin": "5.12.0",
-        "@typescript-eslint/parser": "5.8.1",
+        "@typescript-eslint/parser": "5.12.0",
-        "autoprefixer": "10.4.1",
+        "autoprefixer": "10.4.2",
-        "chroma-js": "2.1.2",
+        "chroma-js": "2.4.2",
-        "eslint": "8.6.0",
+        "eslint": "8.9.0",
-        "eslint-plugin-import": "2.25.3",
+        "eslint-plugin-import": "2.25.4",
-        "eslint-plugin-jsdoc": "37.5.0",
+        "eslint-plugin-jsdoc": "37.9.4",
         "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "3.10.1",
+        "jasmine-core": "4.0.0",
-        "karma": "6.3.9",
+        "karma": "6.3.16",
         "karma-chrome-launcher": "3.1.0",
-        "karma-coverage": "2.1.0",
+        "karma-coverage": "2.1.1",
         "karma-jasmine": "4.0.1",
         "karma-jasmine-html-reporter": "1.7.0",
         "lodash": "4.17.21",
-        "postcss": "8.4.5",
+        "postcss": "8.4.6",
-        "tailwindcss": "3.0.8",
+        "tailwindcss": "3.0.23",
-        "typescript": "4.5.4"
+        "typescript": "4.5.5"
     }
 }

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;
+    width: var(--fuse-drawer-width);
-    min-width: #{$fuse-drawer-width}px;
+    min-width: var(--fuse-drawer-width);
-    max-width: #{$fuse-drawer-width}px;
+    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;

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'

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;
+        width: var(--fuse-vertical-navigation-compact-width);
-        min-width: $fuse-vertical-navigation-compact-width;
+        min-width: var(--fuse-vertical-navigation-compact-width);
-        max-width: $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);
         }
     }
 }

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;
+    width: var(--fuse-vertical-navigation-width);
-    min-width: $fuse-vertical-navigation-width;
+    min-width: var(--fuse-vertical-navigation-width);
-    max-width: $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;
+        left: var(--fuse-vertical-navigation-width);
-        width: $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);
         }
     }
 

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

@@ -1,6 +1,8 @@
 /* Variables */
-$fuse-vertical-navigation-width: 280px;
+:root {
-$fuse-vertical-navigation-dense-width: 80px;
+    --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;
+            width: var(--fuse-vertical-navigation-dense-width);
-            min-width: $fuse-vertical-navigation-dense-width;
+            min-width: var(--fuse-vertical-navigation-dense-width);
-            max-width: $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;
+                            width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
-                            min-width: $fuse-vertical-navigation-dense-width - 24px;
+                            min-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
-                            max-width: $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;
+                            width: calc(var(--fuse-vertical-navigation-width) - 24px);
-                            min-width: $fuse-vertical-navigation-width - 24px;
+                            min-width: calc(var(--fuse-vertical-navigation-width) - 24px);
-                            max-width: $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);
             }
         }
     }

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;
+        width: var(--fuse-vertical-navigation-thin-width);
-        min-width: $fuse-vertical-navigation-thin-width;
+        min-width: var(--fuse-vertical-navigation-thin-width);
-        max-width: $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);
         }
     }
 }

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

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

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';
             });
     }
 

src/app/mock-api/common/navigation/data.ts

@@ -973,7 +973,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon : 'heroicons_outline:speakerphone',
                 link : '/docs/changelog',
                 badge: {
-                    title  : '14.1.1',
+                    title  : '14.2.0',
                     classes: 'px-2 bg-yellow-300 text-black rounded-full'
                 }
             },

src/app/modules/admin/docs/changelog/changelog.ts

@@ -10,6 +10,29 @@ export class ChangelogComponent
 {
     changelog: any[] = [
 
+        // v14.2.0
+        {
+            version    : 'v14.2.0',
+            releaseDate: 'Feb 21, 2022',
+            changes    : [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated various packages',
+                        '(AngularCLI) Re-enabled the cache since Tailwind related issues are fixed',
+                        '(@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',
+                        '(@fuse/masonry) Removed the unnecessary scss file'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(layouts/dense) Fixed: Navigation appearance doesn\'t set correctly on small devices'
+                    ]
+                }
+            ]
+        },
         // v14.1.1
         {
             version    : 'v14.1.1',