fix(docs): fix documentation rtl for dialog

apps/docs/src/app/core/component-docs/dialog/examples/component-based/component-based-dialog-example.component.ts

@@ -19,13 +19,13 @@ export class ComponentBasedDialogExampleComponent {
             data: {
                 title: `Pineapple Fun Facts`,
                 pinnapleDescription: `
-                The pineapple (Ananas comosus) is a tropical plant with an edible fruit 
-                and the most economically significant plant in the family Bromeliaceae. 
-                The pineapple is indigenous to South America, 
-                where it has been cultivated for many centuries. 
-                The introduction of the pineapple to Europe in the 17th 
-                century made it a significant cultural icon of luxury. 
-                Since the 1820s, pineapple has been commercially grown in 
+                The pineapple (Ananas comosus) is a tropical plant with an edible fruit
+                and the most economically significant plant in the family Bromeliaceae.
+                The pineapple is indigenous to South America,
+                where it has been cultivated for many centuries.
+                The introduction of the pineapple to Europe in the 17th
+                century made it a significant cultural icon of luxury.
+                Since the 1820s, pineapple has been commercially grown in
                 greenhouses and many tropical plantations.
                 `,
                 pineappleFunFacts: [

apps/docs/src/app/documentation/core-helpers/component-example/component-example.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { DialogService } from '@fundamental-ngx/core/dialog';
 import { RtlService } from '@fundamental-ngx/core/utils';
 
 let componentExampleUniqueId = 0;
@@ -19,7 +20,11 @@ let componentExampleUniqueId = 0;
         </div>
     `,
     styleUrls: ['./component-example.component.scss'],
-    providers: [RtlService],
+    providers: [
+        RtlService,
+        // Needed in order for dialog service and components to inherit local rtl service.
+        DialogService
+    ],
     encapsulation: ViewEncapsulation.None
 })
 export class ComponentExampleComponent implements OnInit {

libs/core/src/lib/dialog/base/dialog-base.class.ts

@@ -3,6 +3,7 @@ import {
     ChangeDetectorRef,
     Directive,
     ElementRef,
+    HostBinding,
     HostListener,
     OnDestroy,
     OnInit
@@ -17,11 +18,17 @@ import { createFocusTrap, FocusTrap } from 'focus-trap';
 import { DialogConfigBase } from './dialog-config-base.class';
 import { DialogRefBase } from './dialog-ref-base.class';
 import { DialogSize, dialogWidthToSize } from '../utils/dialog-width-to-size';
-import { KeyUtil } from '@fundamental-ngx/core/utils';
+import { KeyUtil, RtlService } from '@fundamental-ngx/core/utils';
 
 @Directive()
 export abstract class DialogBase implements OnInit, AfterViewInit, OnDestroy {
 
+    /**
+     * @hidden
+     */
+    @HostBinding('attr.dir')
+    _dir: string;
+
     /** @hidden Reference to dialog window element*/
     abstract dialogWindow: ElementRef;
 
@@ -60,12 +67,22 @@ export abstract class DialogBase implements OnInit, AfterViewInit, OnDestroy {
     constructor(
         protected _router: Router,
         protected _elementRef: ElementRef,
-        protected _changeDetectorRef: ChangeDetectorRef
+        protected _changeDetectorRef: ChangeDetectorRef,
+        protected _rtlService: RtlService
     ) {}
 
     /** @hidden */
     ngOnInit(): void {
         this._listenAndCloseOnNavigation();
+
+        console.log(this._rtlService);
+
+        this._subscriptions.add(
+            this._rtlService?.rtl.subscribe(isRtl => {
+                this._dir = isRtl ? 'rtl' : 'ltr';
+                this._changeDetectorRef.detectChanges();
+            })
+        );
     }
 
     /** @hidden */

libs/core/src/lib/dialog/dialog-service/dialog.service.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable, Injector, Optional, TemplateRef, Type } from '@angular/core';
 import { DialogContainerComponent } from '../dialog-container/dialog-container.component';
 import { DIALOG_DEFAULT_CONFIG, DialogConfig } from '../utils/dialog-config.class';
-import { DynamicComponentService } from '@fundamental-ngx/core/utils';
+import { DynamicComponentService, RtlService } from '@fundamental-ngx/core/utils';
 import { DialogRef } from '../utils/dialog-ref.class';
 import { DialogBaseService } from '../base/dialog-base.service';
 import { DialogDefaultContent } from '../utils/dialog-default-content.class';
@@ -15,9 +15,10 @@ export class DialogService extends DialogBaseService<DialogContainerComponent> {
     /** @hidden */
     constructor(
         @Inject(DynamicComponentService) dynamicComponentService: DynamicComponentService,
-        @Optional() @Inject(DIALOG_DEFAULT_CONFIG) private _defaultConfig: DialogConfig
+        @Optional() @Inject(DIALOG_DEFAULT_CONFIG) private _defaultConfig: DialogConfig,
+        @Optional() private _rtlService: RtlService
     ) {
-        super(dynamicComponentService)
+        super(dynamicComponentService);
     }
 
     /**
@@ -34,7 +35,8 @@ export class DialogService extends DialogBaseService<DialogContainerComponent> {
         const injector = Injector.create({
             providers: [
                 { provide: DialogConfig, useValue: dialogConfig },
-                { provide: DialogRef, useValue: dialogRef }
+                { provide: DialogRef, useValue: dialogRef },
+                { provide: RtlService, useValue: this._rtlService }
             ]
         });
 

libs/core/src/lib/dialog/dialog.component.ts

@@ -21,7 +21,7 @@ import { DialogHeaderComponent } from './dialog-header/dialog-header.component';
 import { DialogBodyComponent } from './dialog-body/dialog-body.component';
 import { DialogFooterComponent } from './dialog-footer/dialog-footer.component';
 import { DialogRef } from './utils/dialog-ref.class';
-import { applyCssClass } from '@fundamental-ngx/core/utils';
+import { applyCssClass, RtlService } from '@fundamental-ngx/core/utils';
 import { CssClassBuilder } from '@fundamental-ngx/core/utils';
 import { DialogBase } from './base/dialog-base.class';
 
@@ -115,10 +115,11 @@ export class DialogComponent extends DialogBase implements OnInit, OnChanges, Af
         @Optional() public dialogConfig: DialogConfig,
         @Optional() private _dialogRef: DialogRef,
         @Optional() router: Router,
+        @Optional() rtlService: RtlService,
         changeDetectorRef: ChangeDetectorRef,
         elementRef: ElementRef
     ) {
-        super(router, elementRef, changeDetectorRef);
+        super(router, elementRef, changeDetectorRef, rtlService);
     }
 
     /** @hidden */

libs/core/src/lib/message-box/message-box.component.ts

@@ -15,7 +15,7 @@ import {
 } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { applyCssClass } from '@fundamental-ngx/core/utils';
+import { applyCssClass, RtlService } from '@fundamental-ngx/core/utils';
 import { CssClassBuilder } from '@fundamental-ngx/core/utils';
 import {
     MESSAGE_BOX_CONFIGURABLE_ELEMENT,
@@ -88,10 +88,11 @@ export class MessageBoxComponent extends DialogBase implements OnInit, OnChanges
         @Optional() public _messageBoxConfig: MessageBoxConfig,
         @Optional() private _messageBoxRef: MessageBoxRef,
         @Optional() router: Router,
+        @Optional() rtlService: RtlService,
         changeDetectorRef: ChangeDetectorRef,
         elementRef: ElementRef
     ) {
-        super(router, elementRef, changeDetectorRef);
+        super(router, elementRef, changeDetectorRef, rtlService);
     }
 
     /** @hidden */