Updated Angular to v13

Updated Angular Material to v13
Updated version numbers and added the changelog
Updated various packages

.browserslistrc

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

.gitignore

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

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fuse/demo",
-    "version": "13.6.2",
+    "version": "14.0.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -14,17 +14,17 @@
         "lint": "ng lint"
     },
     "dependencies": {
-        "@angular/animations": "12.2.4",
+        "@angular/animations": "13.0.0",
-        "@angular/cdk": "12.2.4",
+        "@angular/cdk": "13.0.0",
-        "@angular/common": "12.2.4",
+        "@angular/common": "13.0.0",
-        "@angular/compiler": "12.2.4",
+        "@angular/compiler": "13.0.0",
-        "@angular/core": "12.2.4",
+        "@angular/core": "13.0.0",
-        "@angular/forms": "12.2.4",
+        "@angular/forms": "13.0.0",
-        "@angular/material": "12.2.4",
+        "@angular/material": "13.0.0",
-        "@angular/material-moment-adapter": "12.2.4",
+        "@angular/material-moment-adapter": "13.0.0",
-        "@angular/platform-browser": "12.2.4",
+        "@angular/platform-browser": "13.0.0",
-        "@angular/platform-browser-dynamic": "12.2.4",
+        "@angular/platform-browser-dynamic": "13.0.0",
-        "@angular/router": "12.2.4",
+        "@angular/router": "13.0.0",
         "@fullcalendar/angular": "4.4.5-beta",
         "@fullcalendar/core": "4.4.2",
         "@fullcalendar/daygrid": "4.4.2",
@@ -33,59 +33,58 @@
         "@fullcalendar/moment": "4.4.2",
         "@fullcalendar/rrule": "4.4.2",
         "@fullcalendar/timegrid": "4.4.2",
-        "@ngneat/transloco": "2.22.0",
+        "@ngneat/transloco": "3.0.7",
-        "apexcharts": "3.28.1",
+        "apexcharts": "3.29.0",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.2.0",
+        "highlight.js": "11.3.1",
         "lodash-es": "4.17.21",
         "moment": "2.29.1",
         "ng-apexcharts": "1.5.12",
         "ngx-markdown": "12.0.1",
         "ngx-quill": "14.3.0",
-        "perfect-scrollbar": "1.5.2",
+        "perfect-scrollbar": "1.5.3",
         "quill": "1.3.7",
         "rrule": "2.6.8",
         "rxjs": "6.6.7",
         "tslib": "2.3.1",
-        "web-animations-js": "2.3.2",
         "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "12.2.4",
+        "@angular-devkit/build-angular": "13.0.1",
-        "@angular-eslint/builder": "12.3.1",
+        "@angular-eslint/builder": "12.6.1",
-        "@angular-eslint/eslint-plugin": "12.3.1",
+        "@angular-eslint/eslint-plugin": "12.6.1",
-        "@angular-eslint/eslint-plugin-template": "12.3.1",
+        "@angular-eslint/eslint-plugin-template": "12.6.1",
-        "@angular-eslint/schematics": "12.3.1",
+        "@angular-eslint/schematics": "12.6.1",
-        "@angular-eslint/template-parser": "12.3.1",
+        "@angular-eslint/template-parser": "12.6.1",
-        "@angular/cli": "12.2.4",
+        "@angular/cli": "13.0.1",
-        "@angular/compiler-cli": "12.2.4",
+        "@angular/compiler-cli": "13.0.0",
-        "@tailwindcss/aspect-ratio": "0.2.1",
+        "@tailwindcss/aspect-ratio": "0.3.0",
-        "@tailwindcss/line-clamp": "0.2.1",
+        "@tailwindcss/line-clamp": "0.2.2",
         "@tailwindcss/typography": "0.4.1",
         "@types/chroma-js": "2.1.3",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "3.8.2",
+        "@types/jasmine": "3.10.2",
-        "@types/lodash": "4.14.172",
+        "@types/lodash": "4.14.176",
-        "@types/lodash-es": "4.17.4",
+        "@types/lodash-es": "4.17.5",
-        "@types/node": "12.20.21",
+        "@types/node": "12.20.36",
         "@typescript-eslint/eslint-plugin": "4.31.0",
         "@typescript-eslint/parser": "4.31.0",
         "autoprefixer": "10.3.4",
         "chroma-js": "2.1.2",
         "eslint": "7.32.0",
-        "eslint-plugin-import": "2.24.2",
+        "eslint-plugin-import": "2.25.2",
-        "eslint-plugin-jsdoc": "36.0.8",
+        "eslint-plugin-jsdoc": "36.1.1",
         "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "3.8.0",
+        "jasmine-core": "3.10.1",
-        "karma": "6.3.4",
+        "karma": "6.3.7",
         "karma-chrome-launcher": "3.1.0",
         "karma-coverage": "2.0.3",
         "karma-jasmine": "4.0.1",
         "karma-jasmine-html-reporter": "1.7.0",
         "lodash": "4.17.21",
-        "postcss": "8.3.6",
+        "postcss": "8.3.11",
-        "tailwindcss": "2.2.9",
+        "tailwindcss": "2.2.19",
-        "typescript": "4.3.5"
+        "typescript": "4.4.4"
     }
 }

src/@fuse/styles/themes.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @use "sass:map";
 
 /* Include the core Angular Material styles */

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

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

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

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

src/app/modules/admin/apps/calendar/calendar.component.html

@@ -341,8 +341,8 @@
                                 <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript flex-auto">
                                     <textarea
                                         matInput
-                                        matTextareaAutosize
+                                        cdkTextareaAutosize
-                                        [matAutosizeMinRows]="1"
+                                        [cdkAutosizeMinRows]="1"
                                         [formControlName]="'description'"
                                         [placeholder]="'Event description'">
                                     </textarea>

src/app/modules/admin/apps/scrumboard/card/details/details.component.html

@@ -25,8 +25,8 @@
                 matInput
                 [formControlName]="'title'"
                 [rows]="1"
-                matTextareaAutosize
+                cdkTextareaAutosize
-                [matAutosizeMinRows]="1">
+                [cdkAutosizeMinRows]="1">
             </textarea>
         </mat-form-field>
 
@@ -37,8 +37,8 @@
                 matInput
                 [formControlName]="'description'"
                 [rows]="1"
-                matTextareaAutosize
+                cdkTextareaAutosize
-                [matAutosizeMinRows]="1">
+                [cdkAutosizeMinRows]="1">
             </textarea>
         </mat-form-field>
 

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

@@ -10,6 +10,32 @@ export class ChangelogComponent
 {
     changelog: any[] = [
 
+        // v14.0.0
+        {
+            version    : 'v14.0.0',
+            releaseDate: 'Nov 05, 2021',
+            changes    : [
+                {
+                    type: 'Added',
+                    list: [
+                        '(FuseLoadingBar) Added the FuseLoadingBar component, its helper service and its interceptor'
+                    ]
+                },
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated Angular & Angular Material to v13.0.0',
+                        '(dependencies) Updated various other packages'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(@fuse/overrides/angular-material) Fixed: Normal border color of the text field overrides the invalid and focus border colors on dark themes'
+                    ]
+                }
+            ]
+        },
         // v13.6.2
         {
             version    : 'v13.6.2',

src/app/modules/admin/pages/settings/account/account.component.html

@@ -69,8 +69,8 @@
                     <textarea
                         matInput
                         [formControlName]="'about'"
-                        matTextareaAutosize
+                        cdkTextareaAutosize
-                        [matAutosizeMinRows]="5"></textarea>
+                        [cdkAutosizeMinRows]="5"></textarea>
                 </mat-form-field>
                 <div class="mt-1 text-md text-hint">Brief description for your profile. Basic HTML and Emoji are allowed.</div>
             </div>

src/polyfills.ts

@@ -8,8 +8,8 @@
  *      file.
  *
  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
  *
  * Learn more in https://angular.io/guide/browser-support
  */
@@ -18,18 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/**
- * IE11 requires the following for NgClass support on SVG elements
- */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

src/test.ts

@@ -15,7 +15,6 @@ declare const require: {
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting(),
-    {teardown: {destroyAfterEach: true}}
 );
 
 // Then we find all the tests.

tsconfig.json

@@ -14,7 +14,7 @@
         "target": "es2017",
         "module": "es2020",
         "lib": [
-            "es2018",
+            "es2020",
             "dom"
         ]
     },