Release 8.4.0

idzark · idzark · commit c684dba590cd · 2019-10-10T10:32:11.000+02:00
diff --git a/angular-bootstrap-md-8.3.1.tgz b/angular-bootstrap-md-8.3.1.tgz
diff --git a/angular-bootstrap-md-8.4.0.tgz b/angular-bootstrap-md-8.4.0.tgz
diff --git a/changelog b/changelog
@@ -1,3 +1,30 @@
+8.4.0
+In version 8.4.0 we added some fixes and new features. Check what changed below:
+
+**Fixes:**
+
+* Datepicker - resolved problem with opening multiple datepickers on label click. Every component will now have unique id. You can specify this id in [id]        input, otherwise custom id will be created,
+* Chips - resolved problem with displaying default tags on component initialization,
+* Chips - resolved problem with deleting items with backspace/delete key,
+* Chips - resolved problem with input focus after adding first tag or removing last tag,
+* Modal - resolved problem with modal position when backdrop option is set to false,
+* Autocompleter - resolved problem with closing dropdown on scroll click. We needed to drop support for dropdown state updates on input blur event, because in    many cases it was impossible to check whether dropdow should b* closed. If you need to programatically change focus to other element with focus() method, you   should also programatically hide autocompleter dropdow* by using its hide() method,
+* Autocompleter - removed unecessary border styles from mdb-option,
+* Autocomplter - resolved problem with opening dropdown when [clearButton] is set to false,
+* Dropdown - resolved problem with change detection, dropdown should be correctly removed from DOM even when OnPush strategy is used in parent component,
+* Select - dropdown won't open on right click on input,
+* Select - resolved problem with displaying long placeholder and label text,
+* Select - resolved problem with opening dropdown on label click (this problem occured only when label was added as html element and not with [label] input ,
+* Sortable plugin - resolved problem with blocked click events,
+* Sortable plugin - resolved problem with width of cards in card deck example.
+
+**New Features:**
+
+* Select - added possibility to add object to the value parameter in select options array,
+* Select - added new [compareWith] input that accepts a function that will be used to find corresponding option for specified value (useful when using object     as option value),
+* Calendar plugin - added new (monthChanged), (weekChanged) and (listChanged) outputs,
+* Popover - added new [bodyClass], [headerClass] and [containerClass] inputs that allow to specify custom classes.
+
 8.3.1
 In version 8.3.1 we added some fixes and updated code in the documentation pages. Check what changed below:
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-bootstrap-md-lib",
-  "version": "8.3.1",
+  "version": "8.4.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.3.1.tgz",
+    "angular-bootstrap-md": "file:angular-bootstrap-md-8.4.0.tgz",
     "chart.js": "^2.5.0",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
diff --git a/projects/angular-bootstrap-md/package.json b/projects/angular-bootstrap-md/package.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-bootstrap-md",
   "repository": "https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design",
-  "version": "8.3.1",
+  "version": "8.4.0",
   "schematics": "./schematics/collection.json",
   "files": [
     "**/*"
diff --git a/projects/angular-bootstrap-md/src/lib/changelog b/projects/angular-bootstrap-md/src/lib/changelog
@@ -1,3 +1,30 @@
+8.4.0
+In version 8.4.0 we added some fixes and new features. Check what changed below:
+
+**Fixes:**
+
+* Datepicker - resolved problem with opening multiple datepickers on label click. Every component will now have unique id. You can specify this id in [id]        input, otherwise custom id will be created,
+* Chips - resolved problem with displaying default tags on component initialization,
+* Chips - resolved problem with deleting items with backspace/delete key,
+* Chips - resolved problem with input focus after adding first tag or removing last tag,
+* Modal - resolved problem with modal position when backdrop option is set to false,
+* Autocompleter - resolved problem with closing dropdown on scroll click. We needed to drop support for dropdown state updates on input blur event, because in    many cases it was impossible to check whether dropdow should b* closed. If you need to programatically change focus to other element with focus() method, you   should also programatically hide autocompleter dropdow* by using its hide() method,
+* Autocompleter - removed unecessary border styles from mdb-option,
+* Autocomplter - resolved problem with opening dropdown when [clearButton] is set to false,
+* Dropdown - resolved problem with change detection, dropdown should be correctly removed from DOM even when OnPush strategy is used in parent component,
+* Select - dropdown won't open on right click on input,
+* Select - resolved problem with displaying long placeholder and label text,
+* Select - resolved problem with opening dropdown on label click (this problem occured only when label was added as html element and not with [label] input ,
+* Sortable plugin - resolved problem with blocked click events,
+* Sortable plugin - resolved problem with width of cards in card deck example.
+
+**New Features:**
+
+* Select - added possibility to add object to the value parameter in select options array,
+* Select - added new [compareWith] input that accepts a function that will be used to find corresponding option for specified value (useful when using object     as option value),
+* Calendar plugin - added new (monthChanged), (weekChanged) and (listChanged) outputs,
+* Popover - added new [bodyClass], [headerClass] and [containerClass] inputs that allow to specify custom classes.
+
 8.3.1
 In version 8.3.1 we added some fixes and updated code in the documentation pages. Check what changed below:
 
diff --git a/projects/angular-bootstrap-md/src/lib/free/cards/mdb-card.component.ts b/projects/angular-bootstrap-md/src/lib/free/cards/mdb-card.component.ts
@@ -78,9 +78,5 @@ export class MdbCardComponent implements OnInit {
         this._r.addClass(this._el.nativeElement, element);
       });
     }
-    if (this._el.nativeElement.parentElement.classList.contains('card-deck')) {
-      this._r.addClass(this._el.nativeElement, 'w-100');
-      this._r.addClass(this._el.nativeElement, 'mx-0');
-    }
   }
 }
diff --git a/projects/angular-bootstrap-md/src/lib/free/dropdown/dropdown.directive.ts b/projects/angular-bootstrap-md/src/lib/free/dropdown/dropdown.directive.ts
@@ -11,6 +11,7 @@ import {
   Renderer2,
   ViewContainerRef,
   ViewEncapsulation,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 
@@ -158,7 +159,8 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     private _viewContainerRef: ViewContainerRef,
     private _cis: ComponentLoaderFactory,
     private _config: BsDropdownConfig,
-    private _state: BsDropdownState
+    private _state: BsDropdownState,
+    private cdRef: ChangeDetectorRef
   ) {
     // create dropdown component loader
     this._dropdown = this._cis
@@ -344,6 +346,7 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
           this._isInlineOpen = false;
           this.onHidden.emit(true);
           this.hidden.emit(true);
+          this.cdRef.markForCheck();
         } else {
           this._dropdown.hide();
         }
@@ -356,6 +359,7 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
           this._isInlineOpen = false;
           this.onHidden.emit(true);
           this.hidden.emit(true);
+          this.cdRef.markForCheck();
         } else {
           this._dropdown.hide();
         }
diff --git a/projects/angular-bootstrap-md/src/lib/free/modals/modal.directive.ts b/projects/angular-bootstrap-md/src/lib/free/modals/modal.directive.ts
@@ -192,13 +192,13 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
       this.showElement();
     });
     if (!this.config.backdrop && this.config.ignoreBackdropClick) {
-      const style = window.getComputedStyle(this._element.nativeElement.firstElementChild);
-      const modalHeight = ['height', 'padding-top', 'padding-bottom', 'margin-top', 'margin-bottom']
-        .map(key => parseInt(style.getPropertyValue(key), 10))
-        .reduce((prev, cur) => prev + cur);
+      // const style = window.getComputedStyle(this._element.nativeElement.firstElementChild);
+      // const modalHeight = ['height', 'padding-top', 'padding-bottom', 'margin-top', 'margin-bottom']
+      //   .map(key => parseInt(style.getPropertyValue(key), 10))
+      //   .reduce((prev, cur) => prev + cur);
 
       this._renderer.setStyle(this._element.nativeElement, 'position', 'fixed');
-      this._renderer.setStyle(this._element.nativeElement, 'height', `${modalHeight}px`);
+      // this._renderer.setStyle(this._element.nativeElement, 'height', `${modalHeight}px`);
 
       if (
         navigator.userAgent.indexOf('Safari') !== -1 &&
diff --git a/projects/angular-bootstrap-md/src/lib/free/popover/popover-container.component.html b/projects/angular-bootstrap-md/src/lib/free/popover/popover-container.component.html
@@ -1,5 +1,5 @@
 <div class="popover-arrow arrow"></div>
-<h3 class="popover-header" *ngIf="title">{{title}}</h3>
+<h3 class="popover-header" *ngIf="title">{{ title }}</h3>
 <div class="popover-body">
   <ng-content></ng-content>
-</div>
+</div>
diff --git a/projects/angular-bootstrap-md/src/lib/free/popover/popover-container.component.ts b/projects/angular-bootstrap-md/src/lib/free/popover/popover-container.component.ts
@@ -13,8 +13,8 @@ import { isBs3 } from '../utils/ng2-bootstrap-config';
   selector: 'mdb-popover-container',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <h3 class="popover-header" *ngIf="title">{{ title }}</h3>
-    <div class="popover-body">
+    <h3 class="popover-header" [ngClass]="headerClass" *ngIf="title">{{ title }}</h3>
+    <div class="popover-body" [ngClass]="bodyClass">
       <ng-content></ng-content>
     </div>
   `,
@@ -24,12 +24,13 @@ import { isBs3 } from '../utils/ng2-bootstrap-config';
 export class PopoverContainerComponent implements OnInit {
   @Input() public placement: string;
   @Input() public title: string;
-
+  public containerClass: string;
+  public bodyClass: string;
+  public headerClass: string;
   @HostBinding('class.show') show = '!isBs3';
   @HostBinding('attr.role') role = 'tooltip';
   //  @HostBinding('class') class;
   @HostBinding('class') class: any;
-
   public get isBs3(): boolean {
     return isBs3();
   }
@@ -45,6 +46,8 @@ export class PopoverContainerComponent implements OnInit {
       ' ' +
       this.placement +
       ' bs-popover-' +
-      this.placement;
+      this.placement +
+      ' ' +
+      this.containerClass;
   }
 }
diff --git a/projects/angular-bootstrap-md/src/lib/free/popover/popover.directive.ts b/projects/angular-bootstrap-md/src/lib/free/popover/popover.directive.ts
@@ -22,6 +22,9 @@ import { PositioningService } from '../utils/positioning/positioning.service';
  */
 @Directive({ selector: '[mdbPopover]', exportAs: 'bs-mdbPopover' })
 export class PopoverDirective implements OnInit, OnDestroy {
+  @Input() public containerClass: string;
+  @Input() public bodyClass: string;
+  @Input() public headerClass: string;
   /**
    * Content to be displayed as popover.
    */
@@ -125,6 +128,9 @@ export class PopoverDirective implements OnInit, OnDestroy {
         content: this.mdbPopover,
         placement: this.placement,
         title: this.mdbPopoverHeader || this.popoverTitle,
+        containerClass: this.containerClass ? this.containerClass : '',
+        bodyClass: this.bodyClass ? this.bodyClass : '',
+        headerClass: this.headerClass ? this.headerClass : '',
       });
     this.isOpen = true;
 

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "angular-bootstrap-md",`
`3`	`3`	`"repository": "https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design",`
`4`		`- "version": "8.3.1",`
	`4`	`+ "version": "8.4.0",`
`5`	`5`	`"schematics": "./schematics/collection.json",`
`6`	`6`	`"files": [`
`7`	`7`	`"*/"`
Original file line number	Diff line number	Diff line change
`@@ -78,9 +78,5 @@ export class MdbCardComponent implements OnInit {`
`78`	`78`	`this._r.addClass(this._el.nativeElement, element);`
`79`	`79`	`});`
`80`	`80`	`}`
`81`		`- if (this._el.nativeElement.parentElement.classList.contains('card-deck')) {`
`82`		`- this._r.addClass(this._el.nativeElement, 'w-100');`
`83`		`- this._r.addClass(this._el.nativeElement, 'mx-0');`
`84`		`- }`
`85`	`81`	`}`
`86`	`82`	`}`