Merge pull request #156 from coreui/dev-v2.5.2

v2.5.2

Author: xidedix

CHANGELOG.md

@@ -1,5 +1,27 @@
 ## [CoreUI for Angular](./README.md) version `changelog`
 
+###### `v2.5.2`
+- fix(cards): card with header actions
+- fix(carousels): images and intervals cleanup
+
+###### dependencies update
+- update `@angular/animations` to `^8.0.2`
+- update `@angular/common` to `^8.0.2`
+- update `@angular/compiler` to `^8.0.2`
+- update `@angular/core` to `^8.0.2`
+- update `@angular/forms` to `^8.0.2`
+- update `@angular/platform-browser` to `^8.0.2`
+- update `@angular/platform-browser-dynamic` to `^8.0.2`
+- update `@angular/router` to `^8.0.2`
+- update `@coreui/angular` to `^2.5.2`
+- update `@coreui/coreui` to `^2.1.12`
+- update `@angular-devkit/build-angular` to `^0.800.3`
+- update `@angular/cli` to `^8.0.3`
+- update `@angular/compiler-cli` to `^8.0.2`
+- update `@angular/language-service` to `^8.0.2`
+- update `@types/node` to `^12.0.8`
+- update `ts-node` to `^8.3.0`
+    
 ###### `v2.5.1`
 ###### dependencies update
 - update `@coreui/angular` to `^2.5.1`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-angular-admin-template",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "CoreUI Free Angular 2+ Admin Template",
   "author": {
     "name": "Łukasz Holeczek",
@@ -27,17 +27,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.0.0",
-    "@angular/common": "^8.0.0",
-    "@angular/compiler": "^8.0.0",
-    "@angular/core": "^8.0.0",
-    "@angular/forms": "^8.0.0",
+    "@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.0",
-    "@angular/platform-browser-dynamic": "^8.0.0",
-    "@angular/router": "^8.0.0",
-    "@coreui/angular": "^2.5.1",
-    "@coreui/coreui": "^2.1.11",
+    "@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",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
     "@coreui/icons": "0.3.0",
     "bootstrap": "^4.3.1",
@@ -59,13 +59,13 @@
     "zone.js": "^0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.800.2",
-    "@angular/cli": "^8.0.2",
-    "@angular/compiler-cli": "^8.0.0",
-    "@angular/language-service": "^8.0.0",
+    "@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.7",
+    "@types/node": "^12.0.8",
     "codelyzer": "^5.1.0",
     "jasmine-core": "^3.4.0",
     "jasmine-spec-reporter": "^4.2.1",
@@ -75,7 +75,7 @@
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.4.2",
     "protractor": "^5.4.2",
-    "ts-node": "^8.2.0",
+    "ts-node": "^8.3.0",
     "tslint": "^5.17.0",
     "typescript": "~3.4.5"
   },

src/app/views/base/cards.component.html

@@ -32,11 +32,12 @@
       <div class="card">
         <div class="card-header">
           Card with switch
-          <label class="switch switch-sm switch-text switch-info float-right mb-0">
-            <input type="checkbox" class="switch-input">
-            <span class="switch-label" data-on="On" data-off="Off"></span>
-            <span class="switch-handle"></span>
-          </label>
+          <div class="card-header-actions" style="height: 21px;" >
+            <label class="switch switch-sm switch-label switch-info" >
+              <input type="checkbox" class="switch-input" checked>
+              <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
+            </label>
+          </div>
         </div>
         <div class="card-body">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
@@ -47,7 +48,9 @@
       <div class="card">
         <div class="card-header">
           Card with label
-          <span class="badge badge-success float-right">Success</span>
+          <div class="card-header-actions">
+            <span class="badge badge-success">Success</span>
+          </div>
         </div>
         <div class="card-body">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
@@ -58,7 +61,9 @@
       <div class="card">
         <div class="card-header">
           Card with label
-          <span class="badge badge-pill badge-danger float-right">42</span>
+          <div class="card-header-actions">
+            <span class="badge badge-pill badge-danger">42</span>
+          </div>
         </div>
         <div class="card-body">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

src/app/views/base/carousels.component.html

@@ -11,15 +11,15 @@
           </div>
         </div>
         <div class="card-body">
-          <carousel [interval]="3000">
+          <carousel [interval]="false">
             <slide>
-              <img src="https://loremflickr.com/900/500/mountains?lock=1" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/nature/1" alt="First slide" style="display: block; width: 100%;">
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/mountains?lock=2" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/nature/2" alt="Second slide" style="display: block; width: 100%;">
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/mountains?lock=3" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/nature/3" alt="Third slide" style="display: block; width: 100%;">
             </slide>
           </carousel>
         </div>
@@ -32,23 +32,23 @@
           <small> optional captions</small>
         </div>
         <div class="card-body">
-          <carousel [interval]="4500">
+          <carousel [interval]="false">
             <slide>
-              <img src="https://loremflickr.com/900/500/nature?lock=1" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/technics/1" alt="First slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>First slide label</h3>
                 <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
               </div>
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/nature?lock=2" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/technics/2" alt="Second slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>Second slide label</h3>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               </div>
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/nature?lock=3" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/technics/3" alt="Third slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>Third slide label</h3>
                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
@@ -67,23 +67,23 @@ <h3>Third slide label</h3>
           <small> configuring defaults</small>
         </div>
         <div class="card-body">
-          <carousel>
+          <carousel [interval]="false">
             <slide>
-              <img src="https://loremflickr.com/900/500/city?lock=1" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/city/1" alt="First slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>First slide label</h3>
                 <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
               </div>
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/city?lock=2" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/city/2" alt="Second slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>Second slide label</h3>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               </div>
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/city?lock=3" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/city/3" alt="Third slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>Third slide label</h3>
                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>

src/app/views/base/carousels.component.ts

@@ -1,15 +1,15 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy} from '@angular/core';
 import { CarouselConfig } from 'ngx-bootstrap/carousel';
 
 @Component({
   templateUrl: 'carousels.component.html',
   providers: [
-    { provide: CarouselConfig, useValue: { interval: 1500, noPause: true } },
+    { provide: CarouselConfig, useValue: { interval: 1500, noPause: false } },
   ]
 })
-export class CarouselsComponent {
+export class CarouselsComponent implements OnDestroy {
 
-  myInterval: number = 6000;
+  myInterval: number | false = 6000;
   slides: any[] = [];
   activeSlideIndex: number = 0;
   noWrapSlides: boolean = false;
@@ -20,9 +20,15 @@ export class CarouselsComponent {
     }
   }
 
+  ngOnDestroy(): void {
+    this.myInterval = 0;
+    this.noWrapSlides = true;
+    this.myInterval = false;
+  }
+
   addSlide(): void {
     this.slides.push({
-      image: `https://loremflickr.com/900/500/sailing?random=${this.slides.length % 8 + 1}/`
+      image: `https://lorempixel.com/900/500/abstract/${this.slides.length % 8 + 1}/`
     });
   }
 

src/app/views/dashboard/dashboard.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
 import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities';
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
 

src/index.html

@@ -1,6 +1,6 @@
 <!--
 * CoreUI - Free Angular Admin Template
-* @version v2.5.1
+* @version v2.5.2
 * @link https://coreui.io/angular/
 * Copyright (c) 2018 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://coreui.io/license)