Release 1.0.0-beta8

Author: a.idzikowski

CHANGELOG.md

@@ -1,3 +1,31 @@
+## 1.0.0-beta8 (12.07.2021)
+
+In this version we introduced some breaking changes, please check `Breaking changes` section and update your application accordingly.
+
+### Breaking changes:
+
+- Popover - `[template]` input will now accept value of type `TemplateRef` and can be used to display `ng-template` content.
+
+### Fixes and improvements:
+
+- Toast - component will no longer throw error after reopening,
+- Toast - stacked components will now slide up automatically,
+- Sidenav - resolved problem with auto expand when route has route parameters,
+- Dropdown - opened menu will be now correctly destroyed on route change,
+- Table pagination - resolved problem with data automatic updates after change in `[entryOptions]` input.
+
+### New components:
+
+- [Popconfirm](https://mdbootstrap.com/docs/b5/angular/components/popconfirm/)
+- [Lazy loading](https://mdbootstrap.com/docs/b5/angular/methods/lazy-loading/)
+- [Loading management](https://mdbootstrap.com/docs/b5/angular/methods/loading-management/)
+
+### New features:
+
+- Popover - `[template]` input will now accept value of type `TemplateRef` and can be used to display `ng-template` content.
+
+---
+
 ## 1.0.0-beta7 (28.06.2021)
 
 In this version we introduced some breaking changes, please check `Breaking changes` section and update your application accordingly.

README.txt

@@ -1,6 +1,6 @@
 MDB 5 Angular
 
-Version: FREE 1.0.0 Beta 5
+Version: FREE 1.0.0 Beta 8
 
 Documentation:
 https://mdbootstrap.com/docs/b5/angular/

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-angular-ui-kit-free",
-  "version": "1.0.0-beta7",
+  "version": "1.0.0-beta8",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

package.json

@@ -1,3 +1,31 @@
+## 1.0.0-beta8 (12.07.2021)
+
+In this version we introduced some breaking changes, please check `Breaking changes` section and update your application accordingly.
+
+### Breaking changes:
+
+- Popover - `[template]` input will now accept value of type `TemplateRef` and can be used to display `ng-template` content.
+
+### Fixes and improvements:
+
+- Toast - component will no longer throw error after reopening,
+- Toast - stacked components will now slide up automatically,
+- Sidenav - resolved problem with auto expand when route has route parameters,
+- Dropdown - opened menu will be now correctly destroyed on route change,
+- Table pagination - resolved problem with data automatic updates after change in `[entryOptions]` input.
+
+### New components:
+
+- [Popconfirm](https://mdbootstrap.com/docs/b5/angular/components/popconfirm/)
+- [Lazy loading](https://mdbootstrap.com/docs/b5/angular/methods/lazy-loading/)
+- [Loading management](https://mdbootstrap.com/docs/b5/angular/methods/loading-management/)
+
+### New features:
+
+- Popover - `[template]` input will now accept value of type `TemplateRef` and can be used to display `ng-template` content.
+
+---
+
 ## 1.0.0-beta7 (28.06.2021)
 
 In this version we introduced some breaking changes, please check `Breaking changes` section and update your application accordingly.

projects/mdb-angular-ui-kit/CHANGELOG.md

@@ -93,6 +93,11 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
   }
 
   ngOnDestroy(): void {
+    if (this._overlayRef) {
+      this._overlayRef.detach();
+      this._overlayRef.dispose();
+    }
+
     this._destroy$.next();
     this._destroy$.complete();
   }
@@ -128,9 +133,8 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
     this._isDropUp = this._elementRef.nativeElement.classList.contains('dropup');
     this._isDropStart = this._elementRef.nativeElement.classList.contains('dropstart');
     this._isDropEnd = this._elementRef.nativeElement.classList.contains('dropend');
-    this._isDropdownMenuEnd = this._dropdownMenu.nativeElement.classList.contains(
-      'dropdown-menu-end'
-    );
+    this._isDropdownMenuEnd =
+      this._dropdownMenu.nativeElement.classList.contains('dropdown-menu-end');
     this._xPosition = this._isDropdownMenuEnd ? 'end' : 'start';
 
     const regex = new RegExp(/dropdown-menu-(sm|md|lg|xl|xxl)-(start|end)/, 'g');

projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts

@@ -3,7 +3,7 @@
   "repository": "https://github.com/mdbootstrap/mdb-angular-ui-kit",
   "author": "MDBootstrap",
   "license": "MIT",
-  "version": "1.0.0-beta7",
+  "version": "1.0.0-beta8",
   "peerDependencies": {
     "@angular/common": "^12.0.0",
     "@angular/core": "^12.0.0",

projects/mdb-angular-ui-kit/package.json

@@ -7,8 +7,10 @@
   <div *ngIf="title" class="popover-header">
     {{ title }}
   </div>
-  <div *ngIf="template" [innerHTML]="content" class="popover-body"></div>
-  <div *ngIf="!template" class="popover-body">
+  <div *ngIf="isContentTemplate" class="popover-body">
+    <ng-container [ngTemplateOutlet]="content"></ng-container>
+  </div>
+  <div *ngIf="!isContentTemplate" class="popover-body">
     {{ content }}
   </div>
 </div>

projects/mdb-angular-ui-kit/popover/popover.component.html

@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  TemplateRef,
+} from '@angular/core';
 import { trigger, style, animate, transition, state, AnimationEvent } from '@angular/animations';
 import { Subject } from 'rxjs';
 @Component({
@@ -16,10 +22,13 @@ import { Subject } from 'rxjs';
 })
 export class MdbPopoverComponent {
   @Input() title: string;
-  @Input() content: string;
-  @Input() template: boolean;
+  @Input() content: string | TemplateRef<any>;
   @Input() animation: boolean;
 
+  get isContentTemplate(): boolean {
+    return this.content instanceof TemplateRef;
+  }
+
   readonly _hidden: Subject<void> = new Subject();
 
   animationState = 'hidden';

projects/mdb-angular-ui-kit/popover/popover.component.ts

@@ -7,6 +7,8 @@ import {
   OnDestroy,
   OnInit,
   Output,
+  TemplateRef,
+  ViewContainerRef,
 } from '@angular/core';
 import {
   ConnectedPosition,
@@ -15,7 +17,7 @@ import {
   OverlayPositionBuilder,
   OverlayRef,
 } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { MdbPopoverComponent } from './popover.component';
 import { fromEvent, Subject } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';
@@ -31,7 +33,7 @@ export class MdbPopoverDirective implements OnInit, OnDestroy {
   @Input() mdbPopoverTitle = '';
   @Input() popoverDisabled = false;
   @Input() placement = 'top';
-  @Input() template = false;
+  @Input() template: TemplateRef<any>;
   @Input() animation = true;
   @Input() trigger = 'click';
   @Input() delayShow = 0;
@@ -186,12 +188,11 @@ export class MdbPopoverDirective implements OnInit, OnDestroy {
       this._open = true;
 
       this._tooltipRef = this._overlayRef.attach(tooltipPortal);
-      this._tooltipRef.instance.content = this.mdbPopover;
+
+      this._tooltipRef.instance.content = this.template || this.mdbPopover;
       this._tooltipRef.instance.title = this.mdbPopoverTitle;
-      this._tooltipRef.instance.template = this.template;
       this._tooltipRef.instance.animation = this.animation;
       this._tooltipRef.instance.animationState = 'visible';
-
       this._tooltipRef.instance.markForCheck();
 
       this.popoverShown.emit(this);