feat: add document dir handler in theme-shared

npm/ng-packs/packages/theme-basic/src/lib/handlers/lazy-style.handler.ts

@@ -1,12 +1,6 @@
-import {
-  getLocaleDirection,
-  LazyLoadService,
-  LOADING_STRATEGY,
-  LocalizationService,
-} from '@abp/ng.core';
-import { LocaleDirection } from '@abp/ng.theme.shared';
+import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
+import { DocumentDirHandlerService, LocaleDirection } from '@abp/ng.theme.shared';
 import { Injectable, Injector } from '@angular/core';
-import { startWith } from 'rxjs/operators';
 import { LAZY_STYLES } from '../tokens/lazy-styles.token';
 export const BOOTSTRAP = 'bootstrap-{{dir}}.min.css';
 
@@ -22,7 +16,6 @@ export class LazyStyleHandler {
     if (dir === this._dir) return;
 
     this.switchCSS(dir);
-    this.setBodyDir(dir);
     this._dir = dir;
   }
 
@@ -33,7 +26,7 @@ export class LazyStyleHandler {
   constructor(injector: Injector) {
     this.setStyles(injector);
     this.setLazyLoad(injector);
-    this.listenToLanguageChanges(injector);
+    this.listenToDirectionChanges(injector);
   }
 
   private getHrefFromLink(link: HTMLLinkElement | null): string {
@@ -51,19 +44,15 @@ export class LazyStyleHandler {
     return { href, link };
   }
 
-  private listenToLanguageChanges(injector: Injector) {
-    const l10n = injector.get(LocalizationService);
+  private listenToDirectionChanges(injector: Injector) {
+    const docDirHandler = injector.get(DocumentDirHandlerService);
 
     // will always listen, no need to unsubscribe
-    l10n.languageChange$.pipe(startWith(l10n.currentLang)).subscribe(locale => {
-      this.dir = getLocaleDirection(locale);
+    docDirHandler.dir$.subscribe(dir => {
+      this.dir = dir;
     });
   }
 
-  private setBodyDir(dir: LocaleDirection) {
-    document.body.dir = dir;
-  }
-
   private setLazyLoad(injector: Injector) {
     this.lazyLoad = injector.get(LazyLoadService);
     const { href, link } = this.getLoadedBootstrap();

npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts

@@ -1,6 +1,6 @@
-import { CoreModule } from '@abp/ng.core';
+import { CoreModule, noop } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import {
   NgxValidateCoreModule,
@@ -84,6 +84,12 @@ export class ThemeBasicModule {
           useValue: 'is-invalid',
         },
         LazyStyleHandler,
+        {
+          provide: APP_INITIALIZER,
+          useFactory: noop,
+          multi: true,
+          deps: [LazyStyleHandler],
+        },
       ],
     };
   }

npm/ng-packs/packages/theme-shared/src/lib/handlers/document-dir.handler.ts

@@ -0,0 +1,34 @@
+import { getLocaleDirection, LocalizationService } from '@abp/ng.core';
+import { Injectable, Injector } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { LocaleDirection } from '../models/common';
+
+@Injectable()
+export class DocumentDirHandlerService {
+  private dir = new BehaviorSubject<LocaleDirection>('ltr');
+  dir$ = this.dir.asObservable();
+  constructor(protected injector: Injector) {
+    this.listenToLanguageChanges();
+  }
+
+  private listenToLanguageChanges() {
+    const l10n = this.injector.get(LocalizationService);
+
+    // will always listen, no need to unsubscribe
+    l10n.languageChange$
+      .pipe(
+        startWith(l10n.currentLang),
+        map(locale => getLocaleDirection(locale)),
+      )
+      .subscribe(dir => {
+        this.dir.next(dir);
+        this.setBodyDir(dir);
+      });
+  }
+
+  private setBodyDir(dir: LocaleDirection) {
+    document.body.dir = dir;
+    document.dir = dir;
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/handlers/index.ts

@@ -1 +1,2 @@
+export * from './document-dir.handler';
 export * from './error.handler';

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -26,6 +26,7 @@ import { EllipsisModule } from './directives/ellipsis.directive';
 import { LoadingDirective } from './directives/loading.directive';
 import { NgxDatatableDefaultDirective } from './directives/ngx-datatable-default.directive';
 import { NgxDatatableListDirective } from './directives/ngx-datatable-list.directive';
+import { DocumentDirHandlerService } from './handlers/document-dir.handler';
 import { ErrorHandler } from './handlers/error.handler';
 import { RootParams } from './models/common';
 import { NG_BOOTSTRAP_CONFIG_PROVIDERS } from './providers';
@@ -117,6 +118,13 @@ export class ThemeSharedModule {
           provide: VALIDATION_VALIDATE_ON_SUBMIT,
           useValue: validation.validateOnSubmit,
         },
+        DocumentDirHandlerService,
+        {
+          provide: APP_INITIALIZER,
+          useFactory: noop,
+          multi: true,
+          deps: [DocumentDirHandlerService],
+        },
       ],
     };
   }