Release 9.3.0

Author: idzark

angular-bootstrap-md-9.2.0.tgz

@@ -1,3 +1,15 @@
+9.3.0
+In version 9.3.0 we added some fixes and a new version of Select component, check what changed below:
+
+**Fixes:**
+
+* Select - resolved problem with tabindex attribute,
+* Modals - resolved problems with focus trap.
+
+**New features:**
+
+* Added new version of Select component, which includes new mdb-option component, updated material design and modified HTML structure. The old version of this component is still available and will not be removed before the next major release.
+
 9.2.0
 In version 9.2.0 we added some fixes and a new version of Timepicker component, check what changed below
 

angular-bootstrap-md-9.3.0.tgz

@@ -1,6 +1,6 @@
 {
   "name": "angular-bootstrap-md-lib",
-  "version": "9.2.0",
+  "version": "9.3.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -32,7 +32,7 @@
     "@angular/router": "~9.0.4",
     "@fortawesome/fontawesome-free": "^5.6.3",
     "@types/chart.js": "^2.7.42",
-    "angular-bootstrap-md": "file:angular-bootstrap-md-9.2.0.tgz",
+    "angular-bootstrap-md": "file:angular-bootstrap-md-9.3.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": "9.2.0",
+  "version": "9.3.0",
   "schematics": "./schematics/collection.json",
   "ng-update": {
     "migrations": "./schematics/migration.json"

package-lock.json

@@ -1,3 +1,15 @@
+9.3.0
+In version 9.3.0 we added some fixes and a new version of Select component, check what changed below:
+
+**Fixes:**
+
+* Select - resolved problem with tabindex attribute,
+* Modals - resolved problems with focus trap.
+
+**New features:**
+
+* Added new version of Select component, which includes new mdb-option component, updated material design and modified HTML structure. The old version of this component is still available and will not be removed before the next major release.
+
 9.2.0
 In version 9.2.0 we added some fixes and a new version of Timepicker component, check what changed below
 

package.json

@@ -22,6 +22,7 @@ import { ModalBackdropComponent } from './modalBackdrop.component';
 import { ClassName, DISMISS_REASONS, modalConfigDefaults, ModalOptions } from './modal.options';
 import { ComponentLoader } from '../utils/component-loader/component-loader.class';
 import { ComponentLoaderFactory } from '../utils/component-loader/component-loader.factory';
+import { FocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 
 const TRANSITION_DURATION = 300;
 const BACKDROP_TRANSITION_DURATION = 150;
@@ -87,17 +88,19 @@ export class ModalDirective implements AfterViewInit, OnDestroy, OnChanges {
   // reference to backdrop component
   protected backdrop: ComponentRef<ModalBackdropComponent> | undefined;
   private _backdrop: ComponentLoader<ModalBackdropComponent>;
+
+  private _focusTrap: FocusTrap;
   // todo: implement _dialog
   _dialog: any;
 
   isNested = false;
 
   utils: Utils = new Utils();
 
-  @HostListener('keydown', ['$event']) onKeyDown(event: any) {
+  /*   @HostListener('keydown', ['$event']) onKeyDown(event: any) {
     this.utils.focusTrapModal(event, this._element);
   }
-
+ */
   @HostListener('click', ['$event'])
   public onClick(event: any): void {
     if (
@@ -122,6 +125,7 @@ export class ModalDirective implements AfterViewInit, OnDestroy, OnChanges {
 
   public constructor(
     protected _element: ElementRef,
+    private _focusTrapFactory: ConfigurableFocusTrapFactory,
     _viewContainerRef: ViewContainerRef,
     protected _renderer: Renderer2,
     clf: ComponentLoaderFactory
@@ -149,6 +153,8 @@ export class ModalDirective implements AfterViewInit, OnDestroy, OnChanges {
         this.show();
       }
     }, 0);
+
+    this._createFocusTrap();
   }
 
   public ngOnChanges(): any {
@@ -292,6 +298,12 @@ export class ModalDirective implements AfterViewInit, OnDestroy, OnChanges {
     }
   }
 
+  private _createFocusTrap() {
+    if (!this._focusTrap) {
+      this._focusTrap = this._focusTrapFactory.create(this._element.nativeElement);
+    }
+  }
+
   /** @internal */
   protected hideModal(): void {
     this._renderer.setAttribute(this._element.nativeElement, 'aria-hidden', 'true');

projects/angular-bootstrap-md/package.json

@@ -6,9 +6,11 @@ import { PositioningService } from '../utils/positioning/positioning.service';
 import { ComponentLoaderFactory } from '../utils/component-loader/component-loader.factory';
 import { ModalContainerComponent } from './modalContainer.component';
 import { MDBModalService } from './modal.service';
+import { A11yModule } from '@angular/cdk/a11y';
 
 @NgModule({
   declarations: [ModalBackdropComponent, ModalDirective, ModalContainerComponent],
+  imports: [A11yModule],
   exports: [ModalBackdropComponent, ModalDirective],
   entryComponents: [ModalBackdropComponent, ModalContainerComponent],
   schemas: [NO_ERRORS_SCHEMA],

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

@@ -1,3 +1,7 @@
-<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document">
+<div
+  [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')"
+  role="document"
+  cdkTrapFocus
+>
   <div class="modal-content modal-dynamic"><ng-content></ng-content></div>
 </div>