Merge pull request #163 from coreui/dev-v2.5.3

v2.5.3

Author: xidedix

CHANGELOG.md

@@ -1,5 +1,46 @@
 ## [CoreUI for Angular](./README.md) version `changelog`
 
+###### `v2.5.3`
+- fix(polyfills): add optional settings for IE10 issues
+- refactor(_nav.ts): INavData moved from _nav.ts to import from @coreui/angular
+- refactor(default-layout): drop MutationObserver, add minimizedChange event
+- fix(dashboard): `scales.[x/y]Axes.barPercentage` is deprecated. Please use `dataset.barPercentage` instead
+- fix(widgets): `scales.[x/y]Axes.barPercentage` is deprecated. Please use `dataset.barPercentage` instead
+- test: add e2e test bed with some tests 
+
+###### dependencies update
+- update `@angular/animations` to `^8.2.10`
+- update `@angular/common` to `^8.2.12`
+- update `@angular/compiler` to `^8.2.12`
+- update `@angular/core` to `^8.2.12`
+- update `@angular/forms` to `^8.2.12`
+- update `@angular/platform-browser` to `^8.2.12`
+- update `@angular/platform-browser-dynamic` to `^8.2.12`
+- update `@angular/router` to `^8.2.12`
+- update `@coreui/angular` to `^2.6.3`
+- update `@coreui/coreui` to `^2.1.16`
+- update `chart.js` to `^2.9.1`
+- update `core-js` to `^2.6.10`
+- update `flag-icon-css` to `^3.4.5`
+- update `ngx-bootstrap` to `^5.2.0`
+- update `rxjs` to `^6.5.3`
+- update `web-animations-js` to `^2.3.2`
+- update `zone.js` to `^0.10.2`
+- update `@angular-devkit/build-angular` to `^0.803.15`
+- update `@angular/cli` to `^8.3.15`
+- update `@angular/compiler-cli` to `^8.2.12`
+- update `@angular/language-service` to `^8.2.12`
+- update `@types/jasmine` to `^3.4.4`
+- update `@types/jasminewd2` to `^2.0.8`
+- update `@types/node` to `^12.7.12`
+- update `codelyzer` to `^5.2.0`
+- update `jasmine-core` to `^3.5.0`
+- update `karma` to `^4.4.1`
+- update `karma-chrome-launcher` to `^3.1.0`
+- update `karma-coverage-istanbul-reporter` to `^2.1.0`    
+- update `ts-node` to `^8.4.1`
+- update `tslint` to `^5.20.0`
+
 ###### `v2.5.2`
 - fix(cards): card with header actions
 - fix(carousels): images and intervals cleanup
@@ -35,7 +76,7 @@
 ###### `v2.5.0`
 - refactor(app.routing): lazy loading via dynamic import()
 - refactor(modals): `ViewChild` second parameter 
-- refactor(tsconfig): "module: "esnext", "target": "es6" 
+- refactor(tsconfig): "module: "esnext` "target` to `es6" 
 - chore: update `[email protected]` imports
 - chore: update `[email protected]` 
 - fix(collapse): `No provider for AnimationBuilder` add import `BrowserAnimationsModule` to app.module

README.md

@@ -1,10 +1,10 @@
 [![@coreui angular](https://img.shields.io/badge/@coreui%20-angular-lightgrey.svg?style=flat-square)](https://github.com/coreui/angular)
-[![npm package][npm-coreui-angular-badge]][npm-coreui-angular] 
+[![npm package][npm-coreui-angular-badge]][npm-coreui-angular]
 [![NPM downloads][npm-coreui-angular-download]][npm-coreui-angular]  
 [![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)
 [![npm package][npm-coreui-badge]][npm-coreui]
-[![NPM downloads][npm-coreui-download]][npm-coreui]    
-![angular](https://img.shields.io/badge/angular-^8.0.0-lightgrey.svg?style=flat-square)  
+[![NPM downloads][npm-coreui-download]][npm-coreui]  
+![angular](https://img.shields.io/badge/angular-^8.2.12-lightgrey.svg?style=flat-square)  
 
 [npm-coreui-angular]: https://www.npmjs.com/package/@coreui/angular  
 [npm-coreui-angular-badge]: https://img.shields.io/npm/v/@coreui/angular.png?style=flat-square  
@@ -33,20 +33,27 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 
 ## Table of Contents
 
-* [Versions](#versions)
-* [CoreUI Pro](#coreui-pro)
-* [Admin Templates built on top of CoreUI Pro](#admin-templates-built-on-top-of-coreui-pro)
-* [Installation](#installation)
-* [Usage](#usage)
-* [What's included](#whats-included)
-* [Documentation](#documentation)
-* [Contributing](#contributing)
-* [Versioning](#versioning)
-* [Creators](#creators)
-* [Community](#community)
-* [Community Projects](#community-projects)
-* [License](#license)
-* [Support CoreUI Development](#support-coreui-development)
+- [CoreUI Free Angular 2+ Admin Template ![Tweet](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20Bootstrap%204%20Admin%20Template%20&url=https://coreui.io&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)](#coreui-free-angular-2-admin-template-tweethttpstwittercomintenttweettextcoreui20-20free20bootstrap20420admin20template20urlhttpscoreuiiohashtagsbootstrapadmintemplatedashboardpanelfreeangularreactvue)
+  - [Table of Contents](#table-of-contents)
+  - [Versions](#versions)
+  - [CoreUI Pro](#coreui-pro)
+  - [Admin Templates built on top of CoreUI Pro](#admin-templates-built-on-top-of-coreui-pro)
+      - [Prerequisites](#prerequisites)
+          - [Node.js](#nodejs)
+          - [Angular CLI](#angular-cli)
+        - [Update to Angular 8](#update-to-angular-8)
+  - [Installation](#installation)
+    - [Clone repo](#clone-repo)
+  - [Usage](#usage)
+  - [What's included](#whats-included)
+  - [Documentation](#documentation)
+  - [Contributing](#contributing)
+  - [Versioning](#versioning)
+  - [Creators](#creators)
+  - [Community](#community)
+    - [Community Projects](#community-projects)
+  - [Copyright and license](#copyright-and-license)
+  - [Support CoreUI Development](#support-coreui-development)
 
 ## Versions
 

e2e/app.e2e-spec.ts

@@ -1,14 +1,59 @@
-import { CoreUIPage } from './app.po';
+import { AppDashboard } from './app.po';
 
-describe('core-ui App', function() {
-  let page: CoreUIPage;
+describe('CoreUI template', () => {
+  let page: AppDashboard;
+  const sleep = 300;
 
-  beforeEach(() => {
-    page = new CoreUIPage();
+  page = new AppDashboard();
+  const browser = page.getBrowser();
+  browser.driver.manage().window().setSize(600, 800);
+  browser.sleep(sleep);
+  page.navigateTo();
+
+  // beforeEach(() => {
+  //   page = new AppDashboard();
+  //   page.navigateTo();
+  // });
+
+  it('should display CoreUI Dashboard', async () => {
+    expect(await page.getParagraphText()).toEqual('Traffic');
+  });
+
+  it('should display footer containing creativeLabs', async () => {
+    expect(await page.getFooterText()).toContain('creativeLabs');
+  });
+
+  it('should toggle `sidebar-minimized` body.class on `sidebar-minimizer` click', () => {
+    browser.manage().window().maximize();
+    browser.sleep(1000);
+    const body = page.getBody();
+    expect(body.getAttribute('class')).not.toContain('sidebar-minimized');
+    const button = page.getByCss('.sidebar-minimizer');
+    button.click();
+    browser.sleep(sleep);
+    expect(body.getAttribute('class')).toContain('sidebar-minimized');
+    browser.sleep(sleep);
+    button.click();
+    browser.sleep(sleep);
+    expect(body.getAttribute('class')).not.toContain('sidebar-minimized');
+    browser.driver.manage().window().setSize(600, 800);
+    browser.sleep(1000);
   });
 
-  it('should display footer containing creativeLabs', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toContain('creativeLabs');
+  it('should toggle `sidebar-show` body.class on `navbar-toggler` click', () => {
+    browser.driver.manage().window().setSize(600, 800);
+    browser.sleep(1000);
+    const body = page.getBody();
+    expect(body.getAttribute('class')).not.toContain('sidebar-show');
+    const button1 = page.getByCss('.navbar-toggler.d-lg-none').first();
+    browser.sleep(sleep);
+    button1.click();
+    browser.sleep(sleep);
+    expect(body.getAttribute('class')).toContain('sidebar-show');
+    const button2 = page.getByCss('.navbar-toggler').first();
+    browser.sleep(sleep);
+    button2.click();
+    browser.sleep(sleep);
+    expect(body.getAttribute('class')).not.toContain('sidebar-show');
   });
 });

e2e/app.po.ts

@@ -1,11 +1,25 @@
-import { browser, element, by } from 'protractor';
+import { browser, by, element } from 'protractor';
+
+export class AppDashboard {
+
+  getBrowser() {
+    return browser;
+  }
 
-export class CoreUIPage {
   navigateTo() {
     return browser.get('/');
   }
 
   getParagraphText() {
+    return element(by.xpath('/html/body/app-dashboard/div/main/div/ng-component/div/div[2]/div[1]/div[1]/div[1]/h4')).getText();
+  }
+  getBody() {
+    return element(by.xpath('/html/body'));
+  }
+  getByCss(selector) {
+    return element.all(by.css(selector));
+  }
+  getFooterText() {
     return element(by.className('app-footer')).getText();
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-angular-admin-template",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "CoreUI Free Angular 2+ Admin Template",
   "author": {
     "name": "Łukasz Holeczek",
@@ -27,56 +27,55 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.0.2",
-    "@angular/common": "^8.0.2",
-    "@angular/compiler": "^8.0.2",
-    "@angular/core": "^8.0.2",
-    "@angular/forms": "^8.0.2",
-    "@angular/http": "^8.0.0-beta.10",
-    "@angular/platform-browser": "^8.0.2",
-    "@angular/platform-browser-dynamic": "^8.0.2",
-    "@angular/router": "^8.0.2",
-    "@coreui/angular": "^2.5.2",
-    "@coreui/coreui": "^2.1.12",
+    "@angular/animations": "^8.2.10",
+    "@angular/common": "^8.2.12",
+    "@angular/compiler": "^8.2.12",
+    "@angular/core": "^8.2.12",
+    "@angular/forms": "^8.2.12",
+    "@angular/platform-browser": "^8.2.12",
+    "@angular/platform-browser-dynamic": "^8.2.12",
+    "@angular/router": "^8.2.12",
+    "@coreui/angular": "^2.6.3",
+    "@coreui/coreui": "^2.1.16",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
     "@coreui/icons": "0.3.0",
     "bootstrap": "^4.3.1",
-    "chart.js": "^2.8.0",
-    "core-js": "^2.6.9",
-    "flag-icon-css": "^3.3.0",
+    "chart.js": "^2.9.1",
+    "core-js": "^2.6.10",
+    "flag-icon-css": "^3.4.5",
     "font-awesome": "^4.7.0",
     "moment": "^2.24.0",
     "mutationobserver-shim": "^0.3.3",
     "ng2-charts": "^2.3.0",
-    "ngx-bootstrap": "^5.0.0",
+    "ngx-bootstrap": "^5.2.0",
     "ngx-perfect-scrollbar": "^8.0.0",
-    "rxjs": "^6.5.2",
+    "rxjs": "^6.5.3",
     "simple-line-icons": "^2.4.1",
     "ts-helpers": "^1.1.2",
-    "tsickle": "^0.35.0",
+    "tsickle": "^0.37.0",
     "tslib": "^1.10.0",
-    "web-animations-js": "^2.3.1",
-    "zone.js": "^0.9.1"
+    "web-animations-js": "^2.3.2",
+    "zone.js": "^0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.800.3",
-    "@angular/cli": "^8.0.3",
-    "@angular/compiler-cli": "^8.0.2",
-    "@angular/language-service": "^8.0.2",
-    "@types/jasmine": "^3.3.13",
-    "@types/jasminewd2": "^2.0.6",
-    "@types/node": "^12.0.8",
-    "codelyzer": "^5.1.0",
-    "jasmine-core": "^3.4.0",
+    "@angular-devkit/build-angular": "^0.803.15",
+    "@angular/cli": "^8.3.15",
+    "@angular/compiler-cli": "^8.2.12",
+    "@angular/language-service": "^8.2.12",
+    "@types/jasmine": "^3.4.4",
+    "@types/jasminewd2": "^2.0.8",
+    "@types/node": "^12.7.12",
+    "codelyzer": "^5.2.0",
+    "jasmine-core": "^3.5.0",
     "jasmine-spec-reporter": "^4.2.1",
-    "karma": "^4.1.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage-istanbul-reporter": "^2.0.5",
+    "karma": "^4.4.1",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-coverage-istanbul-reporter": "^2.1.0",
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.4.2",
     "protractor": "^5.4.2",
-    "ts-node": "^8.3.0",
-    "tslint": "^5.17.0",
+    "ts-node": "^8.4.1",
+    "tslint": "^5.20.0",
     "typescript": "~3.4.5"
   },
   "engines": {

src/app/_nav.ts

@@ -1,35 +1,6 @@
-interface NavAttributes {
-  [propName: string]: any;
-}
-interface NavWrapper {
-  attributes: NavAttributes;
-  element: string;
-}
-interface NavBadge {
-  text: string;
-  variant: string;
-}
-interface NavLabel {
-  class?: string;
-  variant: string;
-}
+import { INavData } from '@coreui/angular';
 
-export interface NavData {
-  name?: string;
-  url?: string;
-  icon?: string;
-  badge?: NavBadge;
-  title?: boolean;
-  children?: NavData[];
-  variant?: string;
-  attributes?: NavAttributes;
-  divider?: boolean;
-  class?: string;
-  label?: NavLabel;
-  wrapper?: NavWrapper;
-}
-
-export const navItems: NavData[] = [
+export const navItems: INavData[] = [
   {
     name: 'Dashboard',
     url: '/dashboard',

src/app/containers/default-layout/default-layout.component.html

@@ -49,8 +49,8 @@
   </ul>
 </app-header>
 <div class="app-body">
-  <app-sidebar [fixed]="true" [display]="'lg'">
-    <app-sidebar-nav [navItems]="navItems" [perfectScrollbar] [disabled]="sidebarMinimized"></app-sidebar-nav>
+  <app-sidebar #appSidebar [fixed]="true" [display]="'lg'" [minimized]="sidebarMinimized" (minimizedChange)="toggleMinimize($event)">
+    <app-sidebar-nav [navItems]="navItems" [perfectScrollbar] [disabled]="appSidebar.minimized"></app-sidebar-nav>
     <app-sidebar-minimizer></app-sidebar-minimizer>
   </app-sidebar>
   <!-- Main content -->
@@ -83,7 +83,7 @@
       <router-outlet></router-outlet>
     </div><!-- /.container-fluid -->
   </main>
-  <app-aside [fixed]="true" [display]="false">
+  <app-aside [fixed]="true" [display]="false" [ngClass]="'test'">
     <tabset>
       <tab>
         <ng-template tabHeading><i class="icon-list"></i></ng-template>

src/app/containers/default-layout/default-layout.component.ts

@@ -1,30 +1,15 @@
-import { Component, OnDestroy, Inject } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import {Component } from '@angular/core';
 import { navItems } from '../../_nav';
 
-
 @Component({
   selector: 'app-dashboard',
   templateUrl: './default-layout.component.html'
 })
-export class DefaultLayoutComponent implements OnDestroy {
+export class DefaultLayoutComponent {
+  public sidebarMinimized = false;
   public navItems = navItems;
-  public sidebarMinimized = true;
-  private changes: MutationObserver;
-  public element: HTMLElement;
-  constructor(@Inject(DOCUMENT) _document?: any) {
-
-    this.changes = new MutationObserver((mutations) => {
-      this.sidebarMinimized = _document.body.classList.contains('sidebar-minimized');
-    });
-    this.element = _document.body;
-    this.changes.observe(<Element>this.element, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-  }
 
-  ngOnDestroy(): void {
-    this.changes.disconnect();
+  toggleMinimize(e) {
+    this.sidebarMinimized = e;
   }
 }