Merge branch 'v2-ng-12-update' into v2.12

Author: xidedix

CHANGELOG.md

@@ -1,5 +1,32 @@
 ### [@coreui/angular](https://coreui.io/) changelog
 
+##### `v2.12.0`
+
+- update to `Angular 12.2`
+- refactor(library): typings, api surface
+- refactor(app): minor fixes
+
+###### dependencies update
+- update `@angular/animations` to `^12.2.16`
+- update `@angular/common` to `^12.2.16`
+- update `@angular/compiler` to `^12.2.16`
+- update `@angular/core` to `^12.2.16`
+- update `@angular/forms` to `^12.2.16`
+- update `@angular/localize` to `^12.2.16`
+- update `@angular/platform-browser` to `^12.2.16`
+- update `@angular/platform-browser-dynamic` to `^12.2.16`
+- update `@angular/router` to `^12.2.16`
+- update `zone.js` to `~0.11.4`
+- update `@angular-devkit/build-angular` to `^12.2.16`
+- update `@angular/cli` to `^12.2.16`
+- update `@angular/compiler-cli` to `^12.2.16`
+- update `@angular/language-service` to `^12.2.16`
+- update `@types/jasminewd2` to `^2.0.10`
+- update `jasmine-spec-reporter` to `~7.0.0`
+- update `karma` to `^6.3.17`
+- update `ng-packagr` to `^12.2.7`
+- update `typescript` to `~4.3.5`
+
 ##### `v2.11.3`
 
 - ##### `update to Angular 11.2.14`

README.md

@@ -1,6 +1,6 @@
 # [@coreui/angular](https://coreui.io/angular)
 
-![angular](https://img.shields.io/badge/angular-^11.2.0-lightgrey.svg?style=flat-square&logo=angular)
+![angular](https://img.shields.io/badge/angular-^12.2.0-lightgrey.svg?style=flat-square&logo=angular)
 [![npm package][npm-coreui-angular-badge-v2]][npm-coreui-angular]
 [![npm package][npm-coreui-angular-badge-latest]][npm-coreui-angular]
 [![NPM downloads][npm-coreui-angular-download]][npm-coreui-angular]  
@@ -21,7 +21,7 @@
 [npm-coreui-badge-v2]: https://img.shields.io/npm/v/@coreui/coreui/v2-lts?style=flat-square
 [npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square
 
-# CoreUI for Angular 11 - Free WebApp UI Kit built on top of Bootstrap 4 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20Bootstrap%204%20Admin%20Template%20&url=https://coreui.io&hashtags=,admin,template,dashboard,panel,free,angular,react,vue)
+# CoreUI for Angular 12 - Free WebApp UI Kit built on top of Bootstrap 4 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20Bootstrap%204%20Admin%20Template%20&url=https://coreui.io&hashtags=,admin,template,dashboard,panel,free,angular,react,vue)
 
 Please help us on [Product Hunt](https://www.producthunt.com/posts/coreui-open-source-bootstrap-4-admin-template-with-angular-2-react-js-vue-js-support) and [Designer News](https://www.designernews.co/stories/81127). Thanks in advance!
 
@@ -55,7 +55,7 @@ CoreUI is an Open Source UI Kit built on top of Bootstrap 4. CoreUI is the faste
 Before you begin, make sure your development environment includes `Node.js®` and an `npm` package manager.
 
 ###### Node.js
-Angular 12 requires `Node.js` version 12.20.0 or later.
+Angular 12 requires `Node.js` version 12.20 or later.
 
 - To check your version, run `node -v` in a terminal/console window.
 - To get `Node.js`, go to [nodejs.org](https://nodejs.org/).

angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
@@ -26,14 +29,7 @@
               "node_modules/simple-line-icons/css/simple-line-icons.css",
               "src/scss/style.scss"
             ],
-            "scripts": [],
-            "aot": false,
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
+            "scripts": []
           },
           "configurations": {
             "production": {
@@ -49,28 +45,30 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
           },
-          "defaultConfiguration": ""
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "coreui:build"
-          },
           "configurations": {
             "production": {
               "browserTarget": "coreui:build:production"
+            },
+            "development": {
+              "browserTarget": "coreui:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -85,6 +83,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
+            "inlineStyleLanguage": "scss",
             "styles": [
               "src/scss/style.scss"
             ],
@@ -148,7 +147,8 @@
               "project": "projects/coreui/angular/ng-package.prod.json",
               "tsConfig": "projects/coreui/angular/tsconfig.lib.prod.json"
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
@@ -173,9 +173,6 @@
       }
     }
   },
-  "cli": {
-    "analytics": false
-  },
   "defaultProject": "coreui",
   "schematics": {
     "@schematics/angular:component": {

e2e/src/app.po.ts

@@ -16,7 +16,7 @@ export class AppDashboard {
   getBody() {
     return element(by.xpath('/html/body'));
   }
-  getByCss(selector) {
+  getByCss(selector: string) {
     return element.all(by.css(selector));
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular-dev",
-  "version": "2.11.3",
+  "version": "2.12.0",
   "license": "MIT",
   "author": {
     "name": "Łukasz Holeczek",
@@ -16,63 +16,62 @@
   ],
   "scripts": {
     "ng": "ng",
-    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
     "build-lib:dev": "ng build @coreui/angular --watch",
     "build-lib:prod": "ng build @coreui/angular --configuration production",
     "test-lib:dev": "ng test @coreui/angular",
     "test-lib:prod": "ng test @coreui/angular --karmaConfig=projects/coreui/angular/karma.conf.github.js",
-    "prestart": "npm run postinstall",
     "start": "ng serve",
     "test": "ng test",
     "lint": "ng lint",
-    "pree2e": "npm run postinstall",
     "e2e": "ng e2e",
+    "prepublish": "ng test @coreui/angular --watch=false && ng e2e && ng build @coreui/angular --configuration production",
     "publish": "cd dist/@coreui/angular/ && npm publish --tag v2-lts --dry-run",
     "link": "cd dist/@coreui/angular/ && npm link",
     "release-version": "node build/change-version.js"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^12.2.3",
-    "@angular/common": "^12.2.3",
-    "@angular/compiler": "^12.2.3",
-    "@angular/core": "^12.2.3",
-    "@angular/forms": "^12.2.3",
-    "@angular/localize": "^12.2.3",
-    "@angular/platform-browser": "^12.2.3",
-    "@angular/platform-browser-dynamic": "^12.2.3",
-    "@angular/router": "^12.2.3",
-    "rxjs": "^6.6.3",
-    "tslib": "^2.1.0",
+    "@angular/animations": "^12.2.16",
+    "@angular/common": "^12.2.16",
+    "@angular/compiler": "^12.2.16",
+    "@angular/core": "^12.2.16",
+    "@angular/forms": "^12.2.16",
+    "@angular/localize": "^12.2.16",
+    "@angular/platform-browser": "^12.2.16",
+    "@angular/platform-browser-dynamic": "^12.2.16",
+    "@angular/router": "^12.2.16",
+    "rxjs": "^6.6.7",
+    "tslib": "^2.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.2.3",
-    "@angular/cli": "^12.2.3",
-    "@angular/compiler-cli": "^12.2.3",
-    "@angular/language-service": "^12.2.3",
+    "@angular-devkit/build-angular": "^12.2.16",
+    "@angular/cli": "^12.2.16",
+    "@angular/compiler-cli": "^12.2.16",
+    "@angular/language-service": "^12.2.16",
     "@coreui/coreui": "^2.1.16",
     "@types/jasmine": "^3.6.11",
+    "@types/jasminewd2": "^2.0.10",
     "@types/node": "^14.18.12",
     "codelyzer": "^6.0.2",
     "jasmine-core": "~3.10.1",
-    "jasmine-spec-reporter": "~5.0.2",
-    "karma": "^6.3.4",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "^6.3.17",
     "karma-chrome-launcher": "~3.1.1",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "ng-packagr": "^12.2.1",
+    "ng-packagr": "^12.2.7",
     "ngx-perfect-scrollbar": "^10.1.1",
     "protractor": "~7.0.0",
     "shelljs": "^0.8.5",
     "simple-line-icons": "^2.5.5",
     "ts-node": "^9.1.1",
     "tslint": "~6.1.3",
-    "typescript": "~4.3.8"
+    "typescript": "~4.3.5"
   },
   "engines": {
-    "node": ">= 10.19",
+    "node": "^12.20.0 || >=14.0.0",
     "npm": ">= 6"
   }
 }

projects/coreui/angular/README.md

@@ -1,6 +1,6 @@
 # [@coreui/angular](https://coreui.io/angular)
 
-![angular](https://img.shields.io/badge/angular-^11.2.0-lightgrey.svg?style=flat-square&logo=angular)
+![angular](https://img.shields.io/badge/angular-^12.2.0-lightgrey.svg?style=flat-square&logo=angular)
 [![npm package][npm-coreui-angular-badge-v2]][npm-coreui-angular]
 [![npm package][npm-coreui-angular-badge-latest]][npm-coreui-angular]
 [![NPM downloads][npm-coreui-angular-download]][npm-coreui-angular]  
@@ -29,18 +29,18 @@
 Before you begin, make sure your development environment includes `Node.js®` and an `npm` package manager.
 
 ###### Node.js
-Angular 11 requires `Node.js` version 10.19 or later.
+Angular 12 requires `Node.js` version 12.20 or later.
 
 - To check your version, run `node -v` in a terminal/console window.
 - To get `Node.js`, go to [nodejs.org](https://nodejs.org/).
 
 ###### Angular CLI
 Install the Angular CLI globally using a terminal/console window.
 ```bash
-npm install -g @angular/cli
+npm install -g @angular/cli@12
 ```
 
-##### Update to Angular 11
+##### Update to Angular 12
 see: [https://update.angular.io](https://update.angular.io)
 
 ## CoreUI Installation

projects/coreui/angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coreui/angular",
-  "version": "2.11.3",
-  "description": "CoreUI Angular 11 Bootstrap 4 components",
+  "version": "2.12.0",
+  "description": "CoreUI Angular 12 Bootstrap 4 components",
   "license": "MIT",
   "homepage": "https://coreui.io/angular",
   "author": {
@@ -17,12 +17,12 @@
     }
   ],
   "dependencies": {
-    "tslib": "^2.0.0"
+    "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": "^11.0.0",
-    "@angular/core": "^11.0.0",
-    "@angular/router": "^11.0.0"
+    "@angular/common": "^12.0.0",
+    "@angular/core": "^12.0.0",
+    "@angular/router": "^12.0.0"
   },
   "repository": {
     "type": "git",

projects/coreui/angular/src/lib/aside/app-aside.component.ts

@@ -9,8 +9,8 @@ import { asideMenuCssClasses } from '../shared';
 })
 export class AppAsideComponent implements OnInit, OnDestroy {
   @Input() display: any;
-  @Input() fixed: boolean;
-  @Input() offCanvas: boolean;
+  @Input() fixed?: boolean;
+  @Input() offCanvas?: boolean;
 
   private readonly fixedClass = 'aside-menu-fixed';
 
@@ -31,13 +31,13 @@ export class AppAsideComponent implements OnInit, OnDestroy {
     this.renderer.removeClass(this.document.body, this.fixedClass);
   }
 
-  isFixed(fixed: boolean = this.fixed): void {
+  isFixed(fixed = this.fixed): void {
     if (fixed) {
       this.renderer.addClass(this.document.body, this.fixedClass);
     }
   }
 
-  isOffCanvas(offCanvas: boolean = this.offCanvas): void {
+  isOffCanvas(offCanvas = this.offCanvas): void {
     if (offCanvas) {
       this.renderer.addClass(this.document.body, 'aside-menu-off-canvas');
     }

projects/coreui/angular/src/lib/aside/app-aside.module.ts

@@ -10,8 +10,7 @@ import { AppAsideComponent } from './app-aside.component';
     LayoutModule
   ],
   exports: [
-    AppAsideComponent,
-    LayoutModule
+    AppAsideComponent
   ],
   declarations: [
     AppAsideComponent

projects/coreui/angular/src/lib/breadcrumb/app-breadcrumb.component.ts

@@ -3,6 +3,7 @@ import {DOCUMENT} from '@angular/common';
 
 import {AppBreadcrumbService} from './app-breadcrumb.service';
 import {Replace} from '../shared';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-breadcrumb',
@@ -18,8 +19,8 @@ import {Replace} from '../shared';
   `
 })
 export class AppBreadcrumbComponent implements OnInit, OnDestroy {
-  @Input() fixed: boolean;
-  public breadcrumbs;
+  @Input() fixed?: boolean;
+  public breadcrumbs?: Observable<any>;
   private readonly fixedClass = 'breadcrumb-fixed';
 
   constructor(
@@ -39,7 +40,7 @@ export class AppBreadcrumbComponent implements OnInit, OnDestroy {
     this.renderer.removeClass(this.document.body, this.fixedClass);
   }
 
-  isFixed(fixed: boolean = this.fixed): void {
+  isFixed(fixed = this.fixed): void {
     if (fixed) {
       this.renderer.addClass(this.document.body, this.fixedClass);
     }

projects/coreui/angular/src/lib/breadcrumb/app-breadcrumb.service.ts

@@ -20,8 +20,8 @@ export class AppBreadcrumbService {
     this.breadcrumbs = this.breadcrumbSubject.asObservable();
 
     this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event) => {
-      const breadcrumbs = [];
-      let currentRoute = this.route.root;
+      const breadcrumbs: any[] = [];
+      let currentRoute: ActivatedRoute | null = this.route.root;
       let url = '';
       do {
         const childrenRoutes = currentRoute.children;