Release 8.8.0

Author: idzark

angular-bootstrap-md-8.7.0.tgz

@@ -1,3 +1,20 @@
+8.8.0
+In version 8.8.0 we added some fixes and new tree view component. Check what changed below:
+
+**Fixes:**
+
+* Sticky header - resolved problem with navbar z-index,
+* Table search/Table editor - resolved problem with filtering when a property value is null,
+* Datepicker - resolved problem with setting minYear and maxYear options,
+* Select - clear button will no longer be displayed if no option is selected,
+* Timepicker - component view will be now updated correctly on form control value change,
+* Color picker plugin - resolved problem with displaying wrong rgba color on component initialization,
+* Resolved problem with memory leaks caused by unsubscribed subscriptions.
+
+**New Features:**
+
+* Added new tree view component.
+
 8.7.0
 In version 8.7.0 we added some fixes and new features. Check what changed below:
 

angular-bootstrap-md-8.8.0.tgz

@@ -1,6 +1,6 @@
 {
   "name": "angular-bootstrap-md-lib",
-  "version": "8.7.0",
+  "version": "8.8.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -29,7 +29,7 @@
     "@angular/router": "~8.0.0",
     "@fortawesome/fontawesome-free": "^5.6.3",
     "@types/chart.js": "^2.7.42",
-    "angular-bootstrap-md": "file:angular-bootstrap-md-8.7.0.tgz",
+    "angular-bootstrap-md": "file:angular-bootstrap-md-8.8.0.tgz",
     "chart.js": "^2.5.0",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",

changelog

@@ -1,7 +1,7 @@
 {
   "name": "angular-bootstrap-md",
   "repository": "https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design",
-  "version": "8.7.0",
+  "version": "8.8.0",
   "schematics": "./schematics/collection.json",
   "files": [
     "**/*"

package-lock.json

@@ -1,3 +1,20 @@
+8.8.0
+In version 8.8.0 we added some fixes and new tree view component. Check what changed below:
+
+**Fixes:**
+
+* Sticky header - resolved problem with navbar z-index,
+* Table search/Table editor - resolved problem with filtering when a property value is null,
+* Datepicker - resolved problem with setting minYear and maxYear options,
+* Select - clear button will no longer be displayed if no option is selected,
+* Timepicker - component view will be now updated correctly on form control value change,
+* Color picker plugin - resolved problem with displaying wrong rgba color on component initialization,
+* Resolved problem with memory leaks caused by unsubscribed subscriptions.
+
+**New Features:**
+
+* Added new tree view component.
+
 8.7.0
 In version 8.7.0 we added some fixes and new features. Check what changed below:
 

package.json

@@ -22,6 +22,8 @@ import { SlideComponent } from './slide.component';
 import { CarouselConfig } from './carousel.config';
 import { isPlatformBrowser } from '@angular/common';
 import { LEFT_ARROW, RIGHT_ARROW } from '../utils/keyboard-navigation';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 export enum Direction {
   UNKNOWN,
@@ -47,6 +49,8 @@ export class CarouselComponent implements OnDestroy, AfterViewInit {
     return this._slidesList.toArray();
   }
 
+  private _destroy$: Subject<void> = new Subject();
+
   protected currentInterval: any;
   protected isPlaying: boolean;
   protected destroyed = false;
@@ -127,16 +131,20 @@ export class CarouselComponent implements OnDestroy, AfterViewInit {
 
   public ngOnDestroy(): void {
     this.destroyed = true;
+    this._destroy$.next();
+    this._destroy$.complete();
   }
 
   ngAfterViewInit() {
     this.play();
-    this._slidesList.changes.subscribe((slidesList: QueryList<SlideComponent>) => {
-      this._slidesList = slidesList;
-      setTimeout(() => {
-        this._select(0);
-      }, 0);
-    });
+    this._slidesList.changes
+      .pipe(takeUntil(this._destroy$))
+      .subscribe((slidesList: QueryList<SlideComponent>) => {
+        this._slidesList = slidesList;
+        setTimeout(() => {
+          this._select(0);
+        }, 0);
+      });
 
     if (this.activeSlideIndex) {
       setTimeout(() => {

projects/angular-bootstrap-md/package.json

@@ -13,7 +13,7 @@ import {
   ViewEncapsulation,
   ChangeDetectorRef,
 } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Subscription, Subject } from 'rxjs';
 
 import { ComponentLoader } from '../utils/component-loader/component-loader.class';
 import { ComponentLoaderFactory } from '../utils/component-loader/component-loader.factory';
@@ -23,6 +23,7 @@ import { BsDropdownState } from './dropdown.state';
 import { BsComponentRef } from '../utils/component-loader/bs-component-ref.class';
 import { BsDropdownMenuDirective } from './dropdown-menu.directive';
 import { isBs3 } from '../utils/ng2-bootstrap-config';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -136,6 +137,8 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
   @Output() onHidden: EventEmitter<any>;
   @Output() hidden: EventEmitter<any>;
 
+  private _destroy$: Subject<void> = new Subject();
+
   get isBs4(): boolean {
     return !isBs3();
   }
@@ -196,18 +199,16 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     });
 
     // toggle visibility on toggle element click
-    this._subscriptions.push(
-      this._state.toggleClick.subscribe((value: boolean) => this.toggle(value))
-    );
+    this._state.toggleClick
+      .pipe(takeUntil(this._destroy$))
+      .subscribe((value: boolean) => this.toggle(value));
 
     // hide dropdown if set disabled while opened
-    this._subscriptions.push(
-      this._state.isDisabledChange.subscribe((element: any) => {
-        if (element === true) {
-          this.hide();
-        }
-      })
-    );
+    this._state.isDisabledChange.pipe(takeUntil(this._destroy$)).subscribe((element: any) => {
+      if (element === true) {
+        this.hide();
+      }
+    });
 
     // attach dropdown menu inside of dropdown
     if (this._showInline) {
@@ -216,7 +217,7 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
       });
     }
 
-    this._state.isOpenChange.subscribe(() => {
+    this._state.isOpenChange.pipe(takeUntil(this._destroy$)).subscribe(() => {
       setTimeout(() => {
         const dropdownContainer = this._elementRef.nativeElement.querySelector('.dropdown-menu');
         const left = dropdownContainer.getBoundingClientRect().left;
@@ -378,9 +379,8 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     // clean up subscriptions and destroy dropdown
-    for (const sub of this._subscriptions) {
-      sub.unsubscribe();
-    }
+    this._destroy$.next();
+    this._destroy$.complete();
     this._dropdown.dispose();
   }
 }

projects/angular-bootstrap-md/src/lib/changelog

@@ -15,10 +15,12 @@ import {
   ChangeDetectionStrategy,
   Inject,
   NgZone,
+  OnDestroy,
 } from '@angular/core';
-import { Subscription, fromEvent } from 'rxjs';
+import { fromEvent, Subject } from 'rxjs';
 import { LinksComponent } from './links.component';
 import { DOCUMENT } from '@angular/common';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'mdb-navbar',
@@ -27,15 +29,16 @@ import { DOCUMENT } from '@angular/common';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NavbarComponent implements AfterViewInit, OnInit, AfterContentChecked {
+export class NavbarComponent implements AfterViewInit, OnInit, AfterContentChecked, OnDestroy {
   @Input() iconBackground: string | string[];
   @Input() SideClass: string;
   @Input() containerInside = true;
   @Input() collapseId = 'navbarCollapse';
   @Input() scrollSensitivity = 120;
   @Input() scrollableNavbar = false;
 
-  subscription: Subscription;
+  private _destroy$: Subject<void> = new Subject();
+
   navbarLinkClicks: any;
   shown = false;
 
@@ -65,10 +68,12 @@ export class NavbarComponent implements AfterViewInit, OnInit, AfterContentCheck
     private _ngZone: NgZone,
     @Inject(DOCUMENT) private _document: any
   ) {
-    // tslint:disable-next-line:max-line-length
-    this.subscription = this._navbarService.getNavbarLinkClicks().subscribe(navbarLinkClicks => {
-      this.closeNavbarOnClick(navbarLinkClicks);
-    });
+    this._navbarService
+      .getNavbarLinkClicks()
+      .pipe(takeUntil(this._destroy$))
+      .subscribe(navbarLinkClicks => {
+        this.closeNavbarOnClick(navbarLinkClicks);
+      });
   }
 
   closeNavbarOnClick(navbarLinkClicks: any) {
@@ -92,13 +97,15 @@ export class NavbarComponent implements AfterViewInit, OnInit, AfterContentCheck
 
   private _listenToScroll() {
     this._ngZone.runOutsideAngular(() => {
-      fromEvent(this._document, 'scroll').subscribe(() => {
-        if (window.pageYOffset > this.scrollSensitivity) {
-          this.renderer.addClass(this.navbar.nativeElement, 'top-nav-collapse');
-        } else {
-          this.renderer.removeClass(this.navbar.nativeElement, 'top-nav-collapse');
-        }
-      });
+      fromEvent(this._document, 'scroll')
+        .pipe(takeUntil(this._destroy$))
+        .subscribe(() => {
+          if (window.pageYOffset > this.scrollSensitivity) {
+            this.renderer.addClass(this.navbar.nativeElement, 'top-nav-collapse');
+          } else {
+            this.renderer.removeClass(this.navbar.nativeElement, 'top-nav-collapse');
+          }
+        });
     });
   }
 
@@ -236,4 +243,9 @@ export class NavbarComponent implements AfterViewInit, OnInit, AfterContentCheck
     }
     this._cdRef.markForCheck();
   }
+
+  ngOnDestroy() {
+    this._destroy$.next();
+    this._destroy$.complete();
+  }
 }