feat(modal): allow dynamic dir switching (#128)

projects/ng-aquila/documentation/examples/modal/modal-examples.module.ts

@@ -13,6 +13,7 @@ import { ModalContentActionsExampleComponent } from './modal-content-actions/mod
 import { ModalDataInjectionExampleComponent } from './modal-data-injection/modal-data-injection-example';
 import { ModalFixedWidthExampleComponent } from './modal-fixed-width/modal-fixed-width-example';
 import { ModalOpeningExampleComponent } from './modal-opening/modal-opening-example';
+import { ModalWithDirectionExampleComponent } from './modal-with-direction/modal-with-direction-example';
 
 const EXAMPLES = [
   ModalBasicExampleComponent,
@@ -21,7 +22,8 @@ const EXAMPLES = [
   ModalContentActionsExampleComponent,
   ModalDataInjectionExampleComponent,
   ModalFixedWidthExampleComponent,
-  ModalOpeningExampleComponent
+  ModalOpeningExampleComponent,
+  ModalWithDirectionExampleComponent,
 ];
 
  @NgModule({
@@ -46,6 +48,7 @@ export class ModalExamplesModule {
       'modal-data-injection': ModalDataInjectionExampleComponent,
       'modal-fixed-width': ModalFixedWidthExampleComponent,
       'modal-opening': ModalOpeningExampleComponent,
+      'modal-with-direction': ModalWithDirectionExampleComponent,
     };
   }
 }

projects/ng-aquila/documentation/examples/modal/modal-with-direction/modal-with-direction-example.css

@@ -0,0 +1,4 @@
+.centered-content {
+    display: flex;
+    flex-direction: column;
+}

projects/ng-aquila/documentation/examples/modal/modal-with-direction/modal-with-direction-example.html

@@ -0,0 +1,9 @@
+<button nxButton (click)="openFromTemplate()">Open modal with direction</button>
+
+<ng-template #template>
+  <div class="centered-content">
+    <h3 nxHeadline="subsection-medium">Modal with configured locale direction</h3>
+    <p nxCopytext="small">This content is placed within the <code>nx-modal-container</code></p>
+    <button nxButton (click)="closeTemplateDialog()">Close Modal</button>
+  </div>
+</ng-template>

projects/ng-aquila/documentation/examples/modal/modal-with-direction/modal-with-direction-example.ts

@@ -0,0 +1,29 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { Component, ViewChild, TemplateRef } from '@angular/core';
+import { NxDialogService, NxModalRef } from '@aposin/ng-aquila/modal';
+
+/**
+* @title Modal with direction example
+*/
+@Component({
+  templateUrl: './modal-with-direction-example.html',
+  styleUrls: ['./modal-with-direction-example.css']
+})
+export class ModalWithDirectionExampleComponent {
+  @ViewChild('template') templateRef: TemplateRef<any>;
+
+  templateDialogRef: NxModalRef<any>;
+
+  constructor(
+    public dialogService: NxDialogService,
+    private dir: Directionality,
+  ) {}
+
+  openFromTemplate(): void {
+    this.templateDialogRef = this.dialogService.open(this.templateRef, {ariaLabel: 'Dialog with direction', direction: this.dir.value} );
+  }
+
+  closeTemplateDialog() {
+    this.templateDialogRef.close();
+  }
+}

projects/ng-aquila/src/modal/dialog/dialog.service.ts

@@ -1,4 +1,3 @@
-import { Direction, Directionality } from '@angular/cdk/bidi';
 import {
   Overlay,
   OverlayConfig,
@@ -79,11 +78,6 @@ export class NxDialogService implements OnDestroy {
     return parent ? parent._afterAllClosed : this._afterAllClosedAtThisLevel;
   }
 
-  /** The text direction of the containing app. */
-  get dir(): Direction {
-    return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
-  }
-
   /**
    * Stream that emits when all open modal have finished closing.
    * Will emit on subscribe if there are no open modals to begin with.
@@ -98,7 +92,6 @@ export class NxDialogService implements OnDestroy {
     @Optional() @Inject(NX_MODAL_DEFAULT_OPTIONS) private _defaultOptions: NxModalConfig,
     @Inject(NX_MODAL_SCROLL_STRATEGY) scrollStrategy: any,
     @Optional() @SkipSelf() private _parentDialogService: NxDialogService,
-    @Optional() private _dir: Directionality,
     private _overlayContainer: OverlayContainer) {
     this._scrollStrategy = scrollStrategy;
   }
@@ -187,7 +180,7 @@ export class NxDialogService implements OnDestroy {
       maxWidth: modalConfig.maxWidth,
       maxHeight: modalConfig.maxHeight,
       disposeOnNavigation: modalConfig.closeOnNavigation,
-      direction: this.dir,
+      direction: modalConfig.direction,
     });
 
     if (modalConfig.backdropClass) {

projects/ng-aquila/src/modal/dialog/modal-config.ts

@@ -1,5 +1,6 @@
 import { ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
 import { ScrollStrategy } from '@angular/cdk/overlay';
+import { Direction } from '@angular/cdk/bidi';
 
 /** Valid ARIA roles for a modal element. */
 export type NxModalRole = 'dialog' | 'alertdialog';
@@ -116,4 +117,10 @@ export class NxModalConfig<D = any> {
    * Default value is `'Close dialog'`.
    */
   closeIconButtonLabel?: string = 'Close dialog';
+
+  /** Sets locale direction for the modal
+   *
+   * Default value is `'ltr'`
+   */
+  direction?: Direction = 'ltr';
 }

projects/ng-aquila/src/modal/dialog/modal.spec.ts

@@ -227,6 +227,18 @@ describe('NxDialog', () => {
       expect(afterCloseCallback).toHaveBeenCalledTimes(1);
     })));
 
+  it('should apply ltr direction to the modal if none provided', fakeAsync(() => {
+    const dialogRef = dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef });
+    viewContainerFixture.detectChanges();
+    expect((dialogRef as any)._overlayRef.getDirection()).toBe('ltr');
+  }));
+
+  it('should apply passed direction to the modal', fakeAsync(() => {
+    const dialogRef = dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef, direction: 'rtl' });
+    viewContainerFixture.detectChanges();
+    expect((dialogRef as any)._overlayRef.getDirection()).toBe('rtl');
+  }));
+
   describe('closing', () => {
     it('should close a dialog and get back a result before it is closed', fakeAsync(() => {
       const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});

projects/ng-aquila/src/modal/modal.md

@@ -101,6 +101,14 @@ You can also overwrite the default dialog configuration by using the NX_MODAL_DE
   ]
 ```
 
+### Directionality
+By default all dialogs are rendered with `ltr` direction.
+If you need the dialog to use your application locale direction, for example when you need to support RTL scripts, you can use the `direction` configuration property.
+
+To get your app direction we recommend using [Directionality](https://material.angular.io/cdk/bidi/overview) from Angular CDK.
+
+<!-- example(modal-with-direction)> -->
+
 ### Accessbility
 By default, each modal has `role="dialog"` on the root element. The role can be changed to `alertdialog` via the `NxModalConfig`.