Release 1.5.1

Author: idzark

CHANGELOG.md

@@ -1,3 +1,25 @@
+## 1.5.1 (22.11.2021)
+
+### Fixes and improvements
+
+- Toast/Alert - resolved problem with stacking and close animation,
+- Modal - resolved problem with closing when mouseup event is detected outside the component,
+- Sidenav - setting `hidden` input to `false` will no longer trigger component animation,
+- Sidenav - resolved problem with arrow rotation update when `[collapsed]="false"` is used,
+- Sidenav - removed focus trap in side and push modes,
+- Sidenav - default position will be now correctly set to `fixed`,
+- Input - resolved problem with border top gap recalculation when used inside a dynamically loaded component (such as tabs),
+- Overlay - resolved problem with z-index in components using overlay (e.g. modal, popconfirm, tooltip, components with dropdown menus). The components will be correctly displayed above the elements with sticky/fixed styles,
+- Charts - fixed default options and resolved problem with custom options merge.
+
+### Vector maps 1.1.0:
+
+- resolved problem with automatic updates of colors defined in `colorMap`,
+- resolved problem with tooltip display when `[hover]="false"` is used,
+- added possibility to display custom tooltips.
+
+---
+
 ## 1.5.0 (02.11.2021)
 
 ### New

package-lock.json

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

package.json

@@ -1,3 +1,25 @@
+## 1.5.1 (22.11.2021)
+
+### Fixes and improvements
+
+- Toast/Alert - resolved problem with stacking and close animation,
+- Modal - resolved problem with closing when mouseup event is detected outside the component,
+- Sidenav - setting `hidden` input to `false` will no longer trigger component animation,
+- Sidenav - resolved problem with arrow rotation update when `[collapsed]="false"` is used,
+- Sidenav - removed focus trap in side and push modes,
+- Sidenav - default position will be now correctly set to `fixed`,
+- Input - resolved problem with border top gap recalculation when used inside a dynamically loaded component (such as tabs),
+- Overlay - resolved problem with z-index in components using overlay (e.g. modal, popconfirm, tooltip, components with dropdown menus). The components will be correctly displayed above the elements with sticky/fixed styles,
+- Charts - fixed default options and resolved problem with custom options merge.
+
+### Vector maps 1.1.0:
+
+- resolved problem with automatic updates of colors defined in `colorMap`,
+- resolved problem with tooltip display when `[hover]="false"` is used,
+- added possibility to display custom tooltips.
+
+---
+
 ## 1.5.0 (02.11.2021)
 
 ### New

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

@@ -17,7 +17,3 @@
 .parent-alert-relative {
   position: relative;
 }
-
-.notification-open .cdk-overlay-container {
-  z-index: $zindex-alert;
-}

projects/mdb-angular-ui-kit/assets/scss/free/_alert.scss

@@ -34,9 +34,3 @@
     overflow-y: auto;
   }
 }
-
-.modal-open {
-  .cdk-overlay-container {
-    z-index: 1040;
-  }
-}

projects/mdb-angular-ui-kit/assets/scss/free/_modal.scss

@@ -0,0 +1,17 @@
+// Owerride default overlay z-index. Change required to allow elements inside the overlay to have z-index value ​​up to 1200.
+
+div.cdk-overlay-container {
+  z-index: 1200;
+  .cdk-overlay-backdrop {
+    z-index: 1200;
+  }
+  .cdk-global-overlay-wrapper {
+    z-index: 1200
+  }
+  .cdk-overlay-pane {
+    z-index: 1200;
+  }
+  .cdk-overlay-connected-position-bounding-box {
+    z-index: 1200;
+  }
+}

projects/mdb-angular-ui-kit/assets/scss/free/_overlay.scss

@@ -4,6 +4,7 @@
   background-color: $toast-background-color;
   border: 0;
   box-shadow: $toast-box-shadow;
+  margin-bottom: 10px;
 
   .btn-close {
     width: 1.3em;

projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss

@@ -61,6 +61,7 @@
 @import './free/shadows';
 @import './free/flag';
 @import './free/images';
+@import './free/overlay';
 
 // MDB COMPONENTS
 @import './free/tables';

projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss

@@ -62,6 +62,7 @@
 @import './free/shadows';
 @import './free/flag';
 @import './free/images';
+@import './free/overlay';
 
 // MDB COMPONENTS
 @import './free/accordion';
@@ -98,4 +99,5 @@
 @import './free/forms/input-group';
 @import './free/forms/form-file';
 
+
 @import '~@angular/cdk/overlay-prebuilt.css';

projects/mdb-angular-ui-kit/assets/scss/mdb.scss

@@ -8,6 +8,7 @@ import {
   AfterContentInit,
   Renderer2,
   OnDestroy,
+  NgZone,
 } from '@angular/core';
 import { MdbAbstractFormControl } from './form-control';
 import { MdbLabelDirective } from './label.directive';
@@ -32,14 +33,20 @@ export class MdbFormControlComponent implements AfterContentInit, OnDestroy {
     return this._formControl.input;
   }
 
-  constructor(private _renderer: Renderer2, private _contentObserver: ContentObserver) {}
+  constructor(
+    private _renderer: Renderer2,
+    private _contentObserver: ContentObserver,
+    private _elementRef: ElementRef,
+    private _ngZone: NgZone
+  ) {}
 
   readonly _destroy$: Subject<void> = new Subject<void>();
 
   private _notchLeadingLength = 9;
   private _labelMarginLeft = 0;
   private _labelGapPadding = 8;
   private _labelScale = 0.8;
+  private _recalculateGapWhenVisible = false;
 
   ngAfterContentInit(): void {
     if (this._label) {
@@ -65,13 +72,13 @@ export class MdbFormControlComponent implements AfterContentInit, OnDestroy {
       }
     });
 
-    // Workaround for problems with border top styles in
-    // inputs rendered inside a tab component
-    setTimeout(() => {
-      if (this._label) {
-        this._updateBorderGap();
-      }
-    }, 0);
+    this._ngZone.runOutsideAngular(() => {
+      this._ngZone.onStable.pipe(takeUntil(this._destroy$)).subscribe(() => {
+        if (this._label && this._recalculateGapWhenVisible) {
+          this._updateBorderGap();
+        }
+      });
+    });
   }
 
   ngOnDestroy(): void {
@@ -84,12 +91,23 @@ export class MdbFormControlComponent implements AfterContentInit, OnDestroy {
   }
 
   private _updateBorderGap(): void {
+    // Element is in DOM but is not visible, we need to recalculate the gap when element
+    // is displayed. This problem may occur in components such as tabs where content of
+    // inactive tabs has display:none styles
+
+    if (this._isHidden()) {
+      this._recalculateGapWhenVisible = true;
+      return;
+    }
+
     const notchLeadingWidth = `${this._labelMarginLeft + this._notchLeadingLength}px`;
     const notchMiddleWidth = `${this._getLabelWidth()}px`;
 
-    this._renderer.setStyle(this._notchLeading.nativeElement, 'width', notchLeadingWidth);
-    this._renderer.setStyle(this._notchMiddle.nativeElement, 'width', notchMiddleWidth);
-    this._renderer.setStyle(this._label.nativeElement, 'margin-left', `${this._labelMarginLeft}px`);
+    this._notchLeading.nativeElement.style.width = notchLeadingWidth;
+    this._notchMiddle.nativeElement.style.width = notchMiddleWidth;
+    this._label.nativeElement.style.marginLeft = `${this._labelMarginLeft}px`;
+
+    this._recalculateGapWhenVisible = false;
   }
 
   private _updateLabelActiveState(): void {
@@ -103,4 +121,10 @@ export class MdbFormControlComponent implements AfterContentInit, OnDestroy {
   private _isLabelActive(): boolean {
     return this._formControl && this._formControl.labelActive;
   }
+
+  private _isHidden(): boolean {
+    const el = this._elementRef.nativeElement;
+
+    return !el.offsetHeight && !el.offsetWidth;
+  }
 }

projects/mdb-angular-ui-kit/forms/form-control.component.ts

@@ -75,7 +75,7 @@ export class MdbModalContainerComponent implements OnInit, AfterViewInit, OnDest
 
   ngAfterViewInit(): void {
     if (!this._config.ignoreBackdropClick) {
-      fromEvent(this._elementRef.nativeElement, 'click')
+      fromEvent(this._elementRef.nativeElement, 'mousedown')
         .pipe(
           filter((event: MouseEvent) => {
             const target = event.target as HTMLElement;

projects/mdb-angular-ui-kit/modal/modal-container.component.ts

@@ -4,14 +4,24 @@ import { OverlayContainer } from '@angular/cdk/overlay';
 import { MdbModalModule } from './modal.module';
 import { MdbModalService } from './modal.service';
 import { Component, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 @Component({
   template: `
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
       <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
     </div>
-    <div class="modal-body">...</div>
+    <div class="modal-body">
+      <div id="main-view" *ngIf="mainView">
+        <button id="main-view-toggler" class="btn btn-primary" (click)="setView(false)"></button>
+        <p>main view</p>
+      </div>
+      <div id="not-main-view" *ngIf="!mainView">
+        <button id="not-main-view-toggler" class="btn btn-primary" (click)="setView(true)"></button>
+        <p>not main view</p>
+      </div>
+    </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" (click)="close()">Close</button>
       <button type="button" class="btn btn-primary">Save changes</button>
@@ -21,11 +31,18 @@ import { Component, NgModule } from '@angular/core';
 })
 class BasicModalComponent {
   constructor(public modal: MdbModalService) {}
+
+  mainView = true;
+
+  setView(isMain) {
+    this.mainView = isMain;
+  }
 }
 
 @NgModule({
   declarations: [BasicModalComponent],
   entryComponents: [BasicModalComponent],
+  imports: [BrowserModule],
 })
 class TestModalModule {}
 
@@ -102,7 +119,7 @@ describe('MDB Modal', () => {
     ) as HTMLElement;
     expect(modalContainer).not.toBe(null);
 
-    const event = new MouseEvent('click', { clientX: 0, clientY: 0 });
+    const event = new MouseEvent('mousedown', { clientX: 0, clientY: 0 });
     modalContainer.dispatchEvent(event);
 
     fixture.detectChanges();
@@ -113,6 +130,36 @@ describe('MDB Modal', () => {
     expect(modalContainer).toBe(null);
   }));
 
+  it('should dont close the modal on mousedown inside modal, move mouse outside modal and mouseup', fakeAsync(() => {
+    modal.open(BasicModalComponent);
+
+    fixture.detectChanges();
+    tick(350);
+
+    let modalContainer = overlayContainerElement.querySelector(
+      'mdb-modal-container'
+    ) as HTMLElement;
+    let modalContent = overlayContainerElement.querySelector('.modal-content') as HTMLElement;
+
+    expect(modalContainer).not.toBe(null);
+    expect(modalContent).not.toBe(null);
+
+    const mousedownEvent = new MouseEvent('mousedown', { clientX: 0, clientY: 0 });
+    const mouseupEvent = new MouseEvent('mouseup', { clientX: 0, clientY: 0 });
+
+    modalContent.dispatchEvent(mousedownEvent);
+    modalContainer.dispatchEvent(mouseupEvent);
+
+    fixture.detectChanges();
+    tick(700);
+
+    modalContainer = overlayContainerElement.querySelector('mdb-modal-container') as HTMLElement;
+    modalContent = overlayContainerElement.querySelector('.modal-content') as HTMLElement;
+
+    expect(modalContent).not.toBe(null);
+    expect(modalContainer).not.toBe(null);
+  }));
+
   it('should not close the modal on backdrop click if ignoreBackdropClick is set to true', fakeAsync(() => {
     modal.open(BasicModalComponent, {
       ignoreBackdropClick: true,
@@ -124,7 +171,7 @@ describe('MDB Modal', () => {
     let modalContainer = overlayContainerElement.querySelector('mdb-modal-container');
     expect(modalContainer).not.toBe(null);
 
-    const event = new MouseEvent('click');
+    const event = new MouseEvent('mousedown');
     modalContainer.dispatchEvent(event);
 
     fixture.detectChanges();
@@ -175,4 +222,40 @@ describe('MDB Modal', () => {
 
     expect(modalContainer).not.toBe(null);
   }));
+
+  it('should not close when click on btn inside modal', fakeAsync(() => {
+    modal.open(BasicModalComponent);
+
+    fixture.detectChanges();
+    tick(700);
+
+    let modalContainer = overlayContainerElement.querySelector('mdb-modal-container');
+    let mainView = modalContainer.querySelector('#main-view');
+    let notMainView = modalContainer.querySelector('#not-main-view');
+    let mainViewToggler = modalContainer.querySelector('#main-view-toggler');
+    let notMainViewToggler = modalContainer.querySelector('#not-main-view-toggler');
+
+    expect(modalContainer).not.toBe(null);
+    expect(mainView).not.toBe(null);
+    expect(notMainView).toBe(null);
+    expect(mainViewToggler).not.toBe(null);
+    expect(notMainViewToggler).toBe(null);
+
+    mainViewToggler.dispatchEvent(new MouseEvent('click'));
+
+    fixture.detectChanges();
+    tick(700);
+
+    modalContainer = overlayContainerElement.querySelector('mdb-modal-container');
+    mainView = modalContainer.querySelector('#main-view');
+    notMainView = modalContainer.querySelector('#not-main-view');
+    mainViewToggler = modalContainer.querySelector('#main-view-toggler');
+    notMainViewToggler = modalContainer.querySelector('#not-main-view-toggler');
+
+    expect(modalContainer).not.toBe(null);
+    expect(mainView).toBe(null);
+    expect(notMainView).not.toBe(null);
+    expect(mainViewToggler).toBe(null);
+    expect(notMainViewToggler).not.toBe(null);
+  }));
 });

projects/mdb-angular-ui-kit/modal/modal.spec.ts

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