Merge pull request #112 from creativetimofficial/feature/v2.6.0

Feature/v2.6.0

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.6.0] - 2021-07-15
+### Updates
+- update to Angular 12
+- update all dependencies to match Angular 12 version
+
+When you build and serve your app it is possible that some warnings to appear on your terminal. Those will NOT affect your product.
+
 ## [2.5.0] - 2020-10-07
 ### Updates
 - update to Angular 10

README.md

@@ -245,4 +245,4 @@ Instagram: <https://www.instagram.com/CreativeTimOfficial>
 
 [CHANGELOG]: ./CHANGELOG.md
 
-[version-badge]: https://img.shields.io/badge/version-2.5.0-blue.svg
+[version-badge]: https://img.shields.io/badge/version-2.6.0-blue.svg

angular.json

@@ -43,10 +43,16 @@
           },
           "configurations": {
             "production": {
-              "optimization": true,
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": false,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -58,7 +64,19 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ]
-            }
+            },
+            "development": {
+             "buildOptimizer": false,
+             "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": false,
+                  "inlineCritical": true
+                },
+                "fonts": true
+              },
+             "outputHashing": "all",
+           }
           }
         },
         "serve": {
@@ -69,8 +87,12 @@
           "configurations": {
             "production": {
               "browserTarget": "material-dashboard-angular:build:production"
+            },
+            "development": {
+              "browserTarget": "material-dashboard-angular:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",

documentation/css/material-dashboard.css

@@ -1,11 +1,11 @@
 /*!
 
  =========================================================
- * Material Dashboard - v2.0.0
+ * Material Dashboard - v2.6.0
  =========================================================
 
  * Product Page: http://www.creative-tim.com/product/now-ui-dashboard
- * Copyright 2018 Creative Tim (http://www.creative-tim.com)
+ * Copyright 2021 Creative Tim (http://www.creative-tim.com)
  * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
 
  * Designed by www.invisionapp.com Coded by www.creative-tim.com

documentation/tutorial-components.html

@@ -110,7 +110,7 @@
           <h1>Material Dashboard Angular
           </h1>
 
-          <h3 class="title">Documentation v2.5.0</h3>
+          <h3 class="title">Documentation v2.6.0</h3>
           <br/>
           <a href="https://demos.creative-tim.com/material-dashboard-angular2/documentation/tutorial" class="btn btn-white btn-round">View documentation</a>
         </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-dashboard-angular",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -18,61 +18,62 @@
   "private": true,
   "dependencies": {
     "@agm/core": "^1.1.0",
-    "@angular/animations": "10.1.4",
-    "@angular/cdk": "10.2.4",
-    "@angular/common": "10.1.4",
-    "@angular/compiler": "10.1.4",
-    "@angular/core": "10.1.4",
-    "@angular/forms": "10.1.4",
-    "@angular/material": "10.2.4",
-    "@angular/platform-browser": "10.1.4",
-    "@angular/platform-browser-dynamic": "10.1.4",
-    "@angular/platform-server": "10.1.4",
-    "@angular/router": "10.1.4",
-    "ajv": "6.12.5",
+    "@angular/animations": "12.1.2",
+    "@angular/cdk": "12.1.2",
+    "@angular/common": "12.1.2",
+    "@angular/compiler": "12.1.2",
+    "@angular/core": "12.1.2",
+    "@angular/forms": "12.1.2",
+    "@angular/material": "12.1.2",
+    "@angular/platform-browser": "12.1.2",
+    "@angular/platform-browser-dynamic": "12.1.2",
+    "@angular/platform-server": "12.1.2",
+    "@angular/router": "12.1.2",
+    "ajv": "8.6.1",
     "arrive": "2.4.1",
     "bootstrap": "4.5.2",
     "bootstrap-material-design": "4.1.3",
     "bootstrap-notify": "3.1.3",
     "chartist": "0.11.4",
     "classlist.js": "1.1.20150312",
-    "core-js": "3.6.5",
-    "eslint": "^7.10.0",
+    "core-js": "3.15.2",
+    "eslint": "^7.30.0",
     "express": "4.17.1",
-    "googleapis": "61.0.0",
+    "googleapis": "81.0.0",
     "hammerjs": "2.0.8",
-    "jquery": "3.5.1",
+    "jquery": "3.6.0",
     "moment": "2.29.1",
     "perfect-scrollbar": "1.5.0",
     "popper.js": "1.16.1",
     "rxjs": "6.6.3",
     "rxjs-compat": "6.6.3",
     "web-animations-js": "2.3.2",
-    "zone.js": "0.11.1"
+    "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.1001.4",
-    "@angular/cli": "10.1.4",
-    "@angular/compiler-cli": "10.1.4",
-    "@angular/language-service": "10.1.4",
+    "@angular-devkit/build-angular": "12.1.2",
+    "@angular/cli": "12.1.2",
+    "@angular/compiler-cli": "12.1.2",
+    "@angular/language-service": "12.1.2",
     "@types/bootstrap": "4.5.0",
-    "@types/chartist": "0.11.0",
-    "@types/googlemaps": "3.39.14",
-    "@types/jasmine": "3.5.14",
-    "@types/jquery": "3.5.2",
-    "@types/node": "14.11.5",
-    "codelyzer": "6.0.1",
-    "jasmine-core": "3.6.0",
-    "jasmine-spec-reporter": "6.0.0",
-    "karma": "5.2.3",
+    "@types/chartist": "0.11.1",
+    "@types/googlemaps": "3.43.3",
+    "@types/jasmine": "3.8.1",
+    "@types/jquery": "3.5.6",
+    "@types/node": "16.3.2",
+    "codelyzer": "6.0.2",
+    "jasmine-core": "3.8.0",
+    "jasmine-spec-reporter": "7.0.0",
+    "karma": "6.3.4",
     "karma-chrome-launcher": "3.1.0",
     "karma-cli": "2.0.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-jasmine": "4.0.1",
-    "karma-jasmine-html-reporter": "1.5.4",
+    "karma-jasmine-html-reporter": "1.7.0",
     "protractor": "7.0.0",
-    "ts-node": "9.0.0",
+    "sass": "1.32.13",
+    "ts-node": "10.1.0",
     "tslint": "6.1.3",
-    "typescript": "4.0.3"
+    "typescript": "4.3.5"
   }
 }

src/app/app.routing.ts

@@ -15,7 +15,7 @@ const routes: Routes =[
     component: AdminLayoutComponent,
     children: [{
       path: '',
-      loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
+      loadChildren: () => import('./layouts/admin-layout/admin-layout.module').then(m => m.AdminLayoutModule)
     }]
   }
 ];

src/app/icons/icons.component.html

@@ -5,20 +5,20 @@
           <div class="card-header card-header-danger">
               <h4 class="card-title">Material Design Icons</h4>
               <p class="card-category">Handcrafted by our friends from
-                  <a target="_blank" href="https://design.google.com/icons/">Google</a>
+                  <a target="_blank" href="https://fonts.google.com/icons">Google</a>
               </p>
           </div>
           <div class="row">
               <div class="col-md-12">
                   <div class="card-body">
                       <div class="iframe-container d-none d-lg-block">
-                          <iframe src="https://design.google.com/icons/">
+                          <iframe src="https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes">
                               <p>Your browser does not support iframes.</p>
                           </iframe>
                       </div>
                       <div class="col-md-12 d-none d-sm-block d-md-block d-lg-none d-block d-sm-none text-center ml-auto mr-auto">
                           <h5>The icons are visible on Desktop mode inside an iframe. Since the iframe is not working on Mobile and Tablets please visit the icons on their original page on Google. Check the
-                              <a href="https://design.google.com/icons/" target="_blank">Material Icons</a>
+                              <a href="https://fonts.google.com/icons" target="_blank">Material Icons</a>
                           </h5>
                       </div>
                   </div>

src/assets/css/demo.css

@@ -1,11 +1,11 @@
 /*!
 
 =========================================================
-* Material Dashboard Angular - v2.4.0
+* Material Dashboard Angular - v2.6.0
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/material-dashboard-angular2
-* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Copyright 2021 Creative Tim (https://www.creative-tim.com)
 * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular2/blob/master/LICENSE.md)
 
 * Coded by Creative Tim

src/assets/scss/core/_dropdown.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Menus https://www.google.com/design/spec/components/menus.html#menus-specs
 // Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons
 
@@ -90,7 +92,7 @@
     text-decoration: none;
 
     font-size: .8125rem;
-    border-radius: $border-radius / 2;
+    border-radius: math.div($border-radius, 2);
     margin: 0 $bmd-dropdown-margin-y;
     @include transitions($fast-transition-time, $transition-linear);
 

src/assets/scss/core/_togglebutton.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .togglebutton {
   vertical-align: middle;
   &, label, input, .toggle {
@@ -70,15 +72,15 @@
     // set bg when checked
     input[type=checkbox]:checked {
       + .toggle {
-        background-color: rgba($brand-primary, (70/100)); // Switch bg on
+        background-color: rgba($brand-primary, (math.div(70,100))); // Switch bg on
       }
 
       + .toggle:after {
         border-color: $brand-primary; // Handle on
       }
 
       + .toggle:active:after {
-        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (math.div(10,100))); // Ripple on
       }
     }
   }

src/assets/scss/core/mixins/_utilities.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @function calc-top($line-height-base, $font-size, $component-height) {
   @return (($line-height-base * $font-size) - $component-height) / 2; // vertical center of line-height
 }
@@ -25,7 +27,7 @@
 
 @function brightness($color) {
   @if type-of($color) == color {
-    @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
+    @return math.div(red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114, 255) * 100%;
   } @else {
     @return unquote("brightness(#{$color})");
   }

src/assets/scss/core/variables/_bootstrap-material-design.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 $bmd-label-color-focus: $brand-primary !default;
 $bmd-invalid-underline: $brand-danger !default;
 $bmd-readonly-underline: $input-border-color !default;
@@ -20,8 +22,8 @@ $mdb-input-font-size-base: 14px !default;
 $mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
 $mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
 
-$bmd-bmd-label-static-size-ratio: 75 / 100 !default;
-$bmd-help-size-ratio: 75 / 100 !default;
+$bmd-bmd-label-static-size-ratio: math.div(75, 100) !default;
+$bmd-help-size-ratio: math.div(75, 100) !default;
 
 $bmd-form-control-bg-repeat-y: no-repeat !default;
 $bmd-form-control-bg-position: center bottom, center calc(100% - 1px) !default;

src/assets/scss/core/variables/_type.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Typography
 //
 // Font, line-height, and color for body text, headings, and more.
@@ -43,7 +45,7 @@ $display4-size: 2.125rem !default; // md display-1 34px was 3.5rem
 //
 //$line-height-base:                1.5 !default;
 //
-$headings-margin-bottom:     ($spacer / 2) !default;
+$headings-margin-bottom:     math.div($spacer, 2) !default;
 //$headings-font-family:       inherit !default;
 $headings-font-weight:         400 !default; // was 500
 

src/assets/scss/material-dashboard.scss

@@ -1,11 +1,11 @@
 /*!
 
 =========================================================
-* Material Dashboard Angular - v2.5.0
+* Material Dashboard Angular - v2.6.0
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/material-dashboard-angular2
-* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Copyright 2021 Creative Tim (https://www.creative-tim.com)
 * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular2/blob/master/LICENSE.md)
 
 * Coded by Creative Tim

src/index.html

@@ -1,11 +1,11 @@
 <!--
 
 =========================================================
-* Material Dashboard Angular - v2.5.0
+* Material Dashboard Angular - v2.6.0
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/material-dashboard-angular2
-* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Copyright 2021 Creative Tim (https://www.creative-tim.com)
 * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular2/blob/master/LICENSE.md)
 
 * Coded by Creative Tim

src/main.ts

@@ -1,11 +1,11 @@
 /*!
 
 =========================================================
-* Material Dashboard Angular - v2.4.0
+* Material Dashboard Angular - v2.6.0
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/material-dashboard-angular2
-* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Copyright 2021 Creative Tim (https://www.creative-tim.com)
 * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular2/blob/master/LICENSE.md)
 
 * Coded by Creative Tim

src/tsconfig.app.json

@@ -2,7 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "module": "es2015",
+    "module": "es2020",
     "baseUrl": "",
     "types": []
   },

tsconfig.json

@@ -5,6 +5,7 @@
     "baseUrl": "src",
     "sourceMap": true,
     "declaration": false,
+    "module": "es2020",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
@@ -13,7 +14,7 @@
       "node_modules/@types"
     ],
     "lib": [
-      "es2016",
+      "es2017",
       "dom"
     ]
   }