Release 9.4.0

a.idzikowski · a.idzikowski · commit e5a29925eea7 · 2020-08-30T21:48:30.000+02:00
diff --git a/angular-bootstrap-md-9.3.1.tgz b/angular-bootstrap-md-9.3.1.tgz
diff --git a/angular-bootstrap-md-9.4.0.tgz b/angular-bootstrap-md-9.4.0.tgz
diff --git a/changelog b/changelog
@@ -1,3 +1,32 @@
+9.4.0
+In version 9.4.0 we added some new features and fixes for the existing components, check what changed below:
+
+**Fixes:**
+
+* Datepicker - resolved problems with styles when component is opened inside accordion,
+* Datepicker - resolved problem with clearing input value with Angular form controls methods,
+* Datepicker - resolved problem with dynamic updates of year and month select values,
+* Sidenav - component should no longer close on viewport height change,
+* Select 2 - dropdown height will be correctly updated for specific visibleOptions value,
+* Select 2 - resolved problem with dropdown visibility when the component is opened inside a modal,
+* Select 2 - resolved problem with resetting value with Angular form controls methods,
+* Select 2 - adjusted styles to match other form controls,
+* Badge - color classes will be correctly assigned to the component,
+* Radio - native radio elements styles will no longer be overridden by MDB styles,
+* Autocomplete - resolved problem with setting component value when value is an object,
+* Tabs - resolved problem with active tab initialization for tabs created dynamically,
+* Textarea - component height will be correctly initialized when used inside tab,
+* Stepper - resolved problem with active step update after adding or removing steps dynamically,
+* Dropdown - resolved problems with performance,
+* Select - resolved problem with value changes when using form control methods,
+* Table Editor - first row will be now correctly highlighted,
+* Wysiwyg - resolved problem with editing url of the link.
+
+**New Features:**
+
+* Datepicker - added new inputIcon and inlineInputIcon options, which allow to show and hide toggle icons for specific display mode,
+* Autocomplete - added new dropdownPosition input, which allow to specify the dropdown position (below, above, auto). Default position is set to 'auto'.
+
 9.3.1
 In version 9.3.1 we added some fixes for the existing components, 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": "9.3.1",
+  "version": "9.4.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
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": "9.3.1",
+  "version": "9.4.0",
   "schematics": "./schematics/collection.json",
   "ng-update": {
     "migrations": "./schematics/migration.json"
diff --git a/projects/angular-bootstrap-md/src/lib/assets/scss/core/_overlay.scss b/projects/angular-bootstrap-md/src/lib/assets/scss/core/_overlay.scss
@@ -0,0 +1,3 @@
+.cdk-overlay-container {
+  z-index: 1050 !important;
+}
diff --git a/projects/angular-bootstrap-md/src/lib/assets/scss/core/msc/_forms.scss b/projects/angular-bootstrap-md/src/lib/assets/scss/core/msc/_forms.scss
@@ -771,7 +771,7 @@ input.counter-success ~ span.text-success {
 .md-outline input.form-control.validate-success.ng-valid.ng-dirty + label,
 .md-outline input.form-control.validate-success.ng-valid.ng-touched + label,
 .md-outline.form-submitted input.form-control.validate-success.ng-valid + label {
-  color: inherit !important;
+  color: $input-success-color !important;
   font-weight: normal !important;
 }
 
@@ -785,7 +785,7 @@ input.counter-success ~ span.text-success {
 .md-outline input.form-control.validate-error.ng-invalid.ng-touched + label,
 .md-outline input.form-control.validate-error.ng-invalid.ng-dirty + label,
 .md-outline.form-submitted input.form-control.validate-error.ng-invalid + label {
-  color: inherit !important;
+  color: $input-error-color !important;
   font-weight: normal !important;
 }
 
diff --git a/projects/angular-bootstrap-md/src/lib/assets/scss/mdb.scss b/projects/angular-bootstrap-md/src/lib/assets/scss/mdb.scss
@@ -29,6 +29,7 @@
 
 // CDK
 @import '~@angular/cdk/overlay-prebuilt.css';
+@import 'core/overlay';
 
 // Bootstrap
 @import 'core/bootstrap/functions';
diff --git a/projects/angular-bootstrap-md/src/lib/changelog b/projects/angular-bootstrap-md/src/lib/changelog
@@ -1,3 +1,32 @@
+9.4.0
+In version 9.4.0 we added some new features and fixes for the existing components, check what changed below:
+
+**Fixes:**
+
+* Datepicker - resolved problems with styles when component is opened inside accordion,
+* Datepicker - resolved problem with clearing input value with Angular form controls methods,
+* Datepicker - resolved problem with dynamic updates of year and month select values,
+* Sidenav - component should no longer close on viewport height change,
+* Select 2 - dropdown height will be correctly updated for specific visibleOptions value,
+* Select 2 - resolved problem with dropdown visibility when the component is opened inside a modal,
+* Select 2 - resolved problem with resetting value with Angular form controls methods,
+* Select 2 - adjusted styles to match other form controls,
+* Badge - color classes will be correctly assigned to the component,
+* Radio - native radio elements styles will no longer be overridden by MDB styles,
+* Autocomplete - resolved problem with setting component value when value is an object,
+* Tabs - resolved problem with active tab initialization for tabs created dynamically,
+* Textarea - component height will be correctly initialized when used inside tab,
+* Stepper - resolved problem with active step update after adding or removing steps dynamically,
+* Dropdown - resolved problems with performance,
+* Select - resolved problem with value changes when using form control methods,
+* Table Editor - first row will be now correctly highlighted,
+* Wysiwyg - resolved problem with editing url of the link.
+
+**New Features:**
+
+* Datepicker - added new inputIcon and inlineInputIcon options, which allow to show and hide toggle icons for specific display mode,
+* Autocomplete - added new dropdownPosition input, which allow to specify the dropdown position (below, above, auto). Default position is set to 'auto'.
+
 9.3.1
 In version 9.3.1 we added some fixes for the existing components, check what changed below:
 
diff --git a/projects/angular-bootstrap-md/src/lib/free/badge/mdb-badge.component.ts b/projects/angular-bootstrap-md/src/lib/free/badge/mdb-badge.component.ts
@@ -38,7 +38,7 @@ export class MDBBadgeComponent implements OnInit {
       const customClassArr = this.color.split(' ');
 
       customClassArr.forEach((el: string) => {
-        this._renderer.addClass(this._el.nativeElement, el);
+        this._renderer.addClass(this._el.nativeElement, `badge-${el}`);
       });
     }
   }
diff --git a/projects/angular-bootstrap-md/src/lib/free/dropdown/dropdown-toggle.directive.ts b/projects/angular-bootstrap-md/src/lib/free/dropdown/dropdown-toggle.directive.ts
@@ -1,4 +1,12 @@
-import { Directive, ElementRef, HostBinding, HostListener, OnDestroy } from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  HostBinding,
+  HostListener,
+  OnDestroy,
+  Renderer2,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { BsDropdownState } from './dropdown.state';
@@ -9,6 +17,8 @@ import { BsDropdownState } from './dropdown.state';
 })
 export class BsDropdownToggleDirective implements OnDestroy {
   private _subscriptions: Subscription[] = [];
+  private _documentClickListener: Function;
+  private _escKeyUpListener: Function;
 
   @HostBinding('attr.aria-haspopup') ariaHaspopup = true;
   @HostBinding('attr.disabled') isDisabled: boolean | any = null;
@@ -22,29 +32,43 @@ export class BsDropdownToggleDirective implements OnDestroy {
     this._state.toggleClick.emit();
   }
 
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: any): void {
-    if (
-      this._state.autoClose &&
-      event.button !== 2 &&
-      !this._element.nativeElement.contains(event.target)
-    ) {
-      this._state.toggleClick.emit(false);
-    }
-  }
+  constructor(
+    private _state: BsDropdownState,
+    private _element: ElementRef,
+    private _renderer: Renderer2,
+    private _cdRef: ChangeDetectorRef
+  ) {
+    // sync is open value with state
+    this._state.isOpenChange.subscribe((value: boolean) => {
+      this.isOpen = value;
 
-  @HostListener('keyup.esc')
-  onEsc(): void {
-    if (this._state.autoClose) {
-      this._state.toggleClick.emit(false);
-    }
-  }
+      if (value) {
+        this._documentClickListener = this._renderer.listen('document', 'click', (event: any) => {
+          if (
+            this._state.autoClose &&
+            event.button !== 2 &&
+            !this._element.nativeElement.contains(event.target)
+          ) {
+            this._state.toggleClick.emit(false);
+            this._cdRef.detectChanges();
+          }
+        });
 
-  constructor(private _state: BsDropdownState, private _element: ElementRef) {
-    // sync is open value with state
-    this._subscriptions.push(
-      this._state.isOpenChange.subscribe((value: boolean) => (this.isOpen = value))
-    );
+        this._escKeyUpListener = this._renderer.listen(
+          this._element.nativeElement,
+          'keyup.esc',
+          () => {
+            if (this._state.autoClose) {
+              this._state.toggleClick.emit(false);
+              this._cdRef.detectChanges();
+            }
+          }
+        );
+      } else {
+        this._documentClickListener();
+        this._escKeyUpListener();
+      }
+    });
     // populate disabled state
     this._subscriptions.push(
       this._state.isDisabledChange.subscribe(
@@ -54,6 +78,14 @@ export class BsDropdownToggleDirective implements OnDestroy {
   }
 
   ngOnDestroy(): void {
+    if (this._documentClickListener) {
+      this._documentClickListener();
+    }
+
+    if (this._escKeyUpListener) {
+      this._escKeyUpListener();
+    }
+
     for (const sub of this._subscriptions) {
       sub.unsubscribe();
     }
diff --git a/projects/angular-bootstrap-md/src/lib/free/inputs/input.directive.ts b/projects/angular-bootstrap-md/src/lib/free/inputs/input.directive.ts
@@ -132,11 +132,14 @@ export class MdbInput implements AfterViewChecked, AfterViewInit {
   resize() {
     if (this.el.nativeElement.classList.contains('md-textarea-auto')) {
       this._renderer.setStyle(this.el.nativeElement, 'height', 'auto');
-      this._renderer.setStyle(
-        this.el.nativeElement,
-        'height',
-        this.el.nativeElement.scrollHeight + 'px'
-      );
+
+      if (this.el.nativeElement.scrollHeight) {
+        this._renderer.setStyle(
+          this.el.nativeElement,
+          'height',
+          this.el.nativeElement.scrollHeight + 'px'
+        );
+      }
     }
   }
 
diff --git a/projects/angular-bootstrap-md/src/lib/free/tooltip/tooltip.directive.ts b/projects/angular-bootstrap-md/src/lib/free/tooltip/tooltip.directive.ts
@@ -136,7 +136,7 @@ export class TooltipDirective implements OnInit, OnDestroy, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (!changes['mdbTooltip'].isFirstChange()) {
+    if (changes['mdbTooltip'] && !changes['mdbTooltip'].isFirstChange()) {
       this.tooltipChange.emit(this.mdbTooltip);
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "angular-bootstrap-md-lib",`
`3`		`- "version": "9.3.1",`
	`3`	`+ "version": "9.4.0",`
`4`	`4`	`"scripts": {`
`5`	`5`	`"ng": "ng",`
`6`	`6`	`"start": "ng serve",`
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": "9.3.1",`
	`4`	`+ "version": "9.4.0",`
`5`	`5`	`"schematics": "./schematics/collection.json",`
`6`	`6`	`"ng-update": {`
`7`	`7`	`"migrations": "./schematics/migration.json"`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.cdk-overlay-container {`
	`2`	`+ z-index: 1050 !important;`
	`3`	`+}`