fix(ngrid): rtl not working with live changes in direction

This commit is a hard copy of [#141](https://github.com/shlomiassaf/ngrid/pull/141/files) which was done on master (v2) and is almost imposible to merge into v3 branch due to the amount of changes

Thanks @ronnetzer

apps/libs/docs-app-lib/lib/components/content-chunk-view/content-chunk-view.component.ts

@@ -2,6 +2,8 @@ import {
   Component,
   InjectionToken,
   Inject,
+  INJECTOR,
+  Injector,
   OnDestroy,
 } from '@angular/core';
 
@@ -25,7 +27,8 @@ export interface LiveContentChunk {
 export class ContentChunkViewComponent extends MarkdownDynamicComponentPortal implements OnDestroy {
   contentChunkData: LiveContentChunk;
 
-  constructor(@Inject(CONTENT_CHUNKS_COMPONENTS) private contentChunks: {[key: string]: LiveContentChunk} ) { super(); }
+  constructor(@Inject(INJECTOR) injector: Injector,
+              @Inject(CONTENT_CHUNKS_COMPONENTS) private contentChunks: {[key: string]: LiveContentChunk} ) { super(injector); }
 
   getRenderTypes(selector: string) {
     this.contentChunkData = this.contentChunks[selector];

apps/libs/docs-app-lib/lib/components/exapmle-view/example-view.component.ts

@@ -3,6 +3,8 @@ import {
   Component,
   InjectionToken,
   Inject,
+  INJECTOR,
+  Injector,
   OnDestroy,
 } from '@angular/core';
 import { trigger, transition, animate, style } from '@angular/animations'
@@ -13,7 +15,6 @@ import { ExampleFileAsset } from '@pebula-internal/webpack-markdown-code-example
 
 import { MarkdownDynamicComponentPortal } from '../markdown-dynamic-component-portal';
 import { MarkdownCodeExamplesService } from '../../services/markdown-code-examples.service';
-import { LazyModuleStoreService } from '../../services/lazy-module-store';
 import { LiveExample } from '../../example';
 
 export const EXAMPLE_COMPONENTS_TOKEN = new InjectionToken('EXAMPLE_COMPONENTS');
@@ -55,11 +56,11 @@ export class ExampleViewComponent extends MarkdownDynamicComponentPortal impleme
   viewSourceCode = false;
   exampleStyle: 'toolbar' | 'flow' = 'toolbar';
 
-  constructor(lazyModuleStore: LazyModuleStoreService,
+  constructor(@Inject(INJECTOR) injector: Injector,
               private angulartics2: Angulartics2,
               private exampleService: MarkdownCodeExamplesService,
               @Inject(EXAMPLE_COMPONENTS_TOKEN) private exampleComponents: {[key: string]: LiveExample} ) {
-    super(lazyModuleStore);
+    super(injector);
   }
 
   getRenderTypes(selector: string) {

apps/libs/docs-app-lib/lib/components/markdown-dynamic-component-portal.ts

@@ -1,7 +1,8 @@
 import { BehaviorSubject, timer, race } from 'rxjs';
 import { filter, mapTo } from 'rxjs/operators';
-import { ComponentRef, Type } from '@angular/core';
+import { ComponentRef, Inject, INJECTOR, Injector, Type } from '@angular/core';
 import { ComponentPortal, CdkPortalOutletAttachedRef } from '@angular/cdk/portal';
+import { Directionality } from '@angular/cdk/bidi';
 import { utils } from '@pebula/ngrid';
 import { LazyModuleStoreService } from '../services/lazy-module-store';
 
@@ -17,24 +18,28 @@ export abstract class MarkdownDynamicComponentPortal {
   inputParams: any;
   containerClass: string;
 
-  constructor(private lazyModuleStore?: LazyModuleStoreService) {  }
+  constructor(@Inject(INJECTOR) private _injector: Injector) {  }
 
   abstract getRenderTypes(selector: string): { component?: Type<any>; moduleType?: Type<any>; } | undefined;
 
   render(): void {
     utils.unrx.kill(this, 'render');
     const { component, moduleType } = this.getRenderTypes(this.componentName) || <any>{};
+    const lazyModuleStore = this._injector.get(LazyModuleStoreService, null);
     if (component) {
-      const ngModule = this.lazyModuleStore && this.lazyModuleStore.get(moduleType);
-      const injector = ngModule ? ngModule.injector : null;
-      const componentFactoryResolver = ngModule ? ngModule.componentFactoryResolver : null;
+      const ngModule = lazyModuleStore?.get(moduleType);
+      const injector = Injector.create({
+        providers: [{ provide: Directionality, useValue: this._injector.get(Directionality) }],
+        parent: ngModule?.injector
+      });
+      const componentFactoryResolver = ngModule?.componentFactoryResolver;
       this.selectedPortal$.next(new ComponentPortal(component, null, injector, componentFactoryResolver));
     } else {
       this.selectedPortal$.next(null);
-      if (this.lazyModuleStore) {
+      if (lazyModuleStore) {
         const timeout = {};
         const time$ = timer(COMPONENT_WAIT_TIMEOUT).pipe(mapTo(timeout), utils.unrx(this, 'render'));
-        const init$ = this.lazyModuleStore.moduleInit.pipe(
+        const init$ = lazyModuleStore.moduleInit.pipe(
           filter( () => !!this.getRenderTypes(this.componentName) ),
           utils.unrx(this, 'render')
         );

apps/libs/docs-app-lib/lib/components/markdown-page-container/markdown-page-container.component.html

@@ -11,7 +11,7 @@
     </mat-drawer>
 
     <mat-drawer-content style="width: 100%;">
-      <div fxFlex="*" class="example-group-container" [ngClass]="dir.value === 'ltr' ? 'ngrid-demo-ltr' : 'ngrid-demo-rtl'" style="height: 100%" #el>
+      <div fxFlex="*" class="example-group-container" style="height: 100%" #el>
         <div style="min-height: 100%;">
           <div fxFlex="*" class="example-container" pblContentTocArea #tocArea="pblContentTocArea"
               [scrollContainer]="el"

apps/libs/docs-app-lib/lib/components/markdown-page-container/markdown-page-container.component.scss

@@ -39,7 +39,8 @@ mat-toolbar {
   margin-left: -24px;
   width: calc(100% + 48px);
 }
-.ngrid-demo-rtl mat-toolbar {
+
+:host-context([dir='rtl']) mat-toolbar {
   margin-left: unset;
   margin-right: -24px;
 }

apps/libs/docs-app-lib/lib/components/markdown-page-container/markdown-page-container.component.ts

@@ -1,6 +1,6 @@
 import { Observable, Subject } from 'rxjs';
 import { map, debounceTime } from 'rxjs/operators';
-import { Component, ViewChild, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Component, ViewChild, OnDestroy, ChangeDetectorRef, AfterViewInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Directionality } from '@angular/cdk/bidi';
 import { MatDrawer, MatDrawerMode } from '@angular/material/sidenav';
@@ -21,7 +21,7 @@ declare const BUILD_VERSION: string;
   templateUrl: './markdown-page-container.component.html',
   styleUrls: ['./markdown-page-container.component.scss']
 })
-export class MarkdownPageContainerComponent implements OnDestroy {
+export class MarkdownPageContainerComponent implements AfterViewInit, OnDestroy {
 
   entry: string;
   documentUrl: string;
@@ -118,13 +118,9 @@ export class MarkdownPageContainerComponent implements OnDestroy {
   }
 
   private setMenuState() {
-    if (this.root?.children) {
-      if (this.layoutState.isWeb || this.layoutState.hamburger) {
-        this.drawer.open();
-      } else {
-        this.drawer.close();
-      }
-    } else {
+    if (this.root?.children && (this.layoutState.isWeb || this.layoutState.hamburger)) {
+      this.drawer.open();
+    } else if (this.drawer.opened) {
       this.drawer.close();
     }
   }

apps/ngrid-docs-app/src/app/app.component.html

@@ -1 +1 @@
-<pbl-demo-home-page dir="lrt"></pbl-demo-home-page>
+<pbl-demo-home-page dir="ltr"></pbl-demo-home-page>

apps/ngrid-docs-app/src/app/demo-home-page/demo-home-page.component.html

@@ -46,7 +46,7 @@
           <mat-option value="Demo">
             <div style="height: 100%; width: 100%;" mat-button [matMenuTriggerFor]="demosMenu" (click)="handleMobileTopMenuSubMenu(select, demosMenu, $event)">
               <div fxLayoutAlign="start center">
-                <mat-icon style="margin-right: 0; margin-left: -8px; transform: rotate(90deg);">arrow_drop_down</mat-icon>
+                <mat-icon class="demo-select-arrow mat-icon-rtl-mirror">arrow_left</mat-icon>
                 <span>{{ selectedDemoLink ? 'Demo: ' + selectedDemoLink.text : 'Select Demo'}}</span>
               </div>
             </div>

apps/ngrid-docs-app/src/app/demo-home-page/demo-home-page.component.scss

@@ -77,6 +77,10 @@ app-search-results {
     width: 18px;
     font-size: 18px;
     color: #2196f3;
+
+    :host-context([dir='rtl']) & {
+      transform: translate(50%, -50%);
+    }
   }
 }
 
@@ -88,4 +92,14 @@ app-search-results {
 
 .mobile-top-menu {
   margin-bottom: -14px;
+
+  .demo-select-arrow {
+    margin-right: 0;
+    margin-left: -8px;
+
+    :host-context([dir='rtl']) & {
+      margin-right: -8px;
+      margin-left: 0;
+    }
+  }
 }

apps/ngrid-docs-app/src/app/demo-home-page/demo-home-page.component.ts

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RouterLinkWithHref, RouterLink } from '@angular/router';
 import { Dir } from '@angular/cdk/bidi';
 import { MatMenu } from '@angular/material/menu';
@@ -14,7 +14,7 @@ import { PageAssetNavEntry } from '@pebula-internal/webpack-markdown-pages/model
   templateUrl: './demo-home-page.component.html',
   styleUrls: ['./demo-home-page.component.scss']
 })
-export class DemoHomePageComponent {
+export class DemoHomePageComponent implements OnInit {
 
   showSearchResults: boolean;
   searchResults: Observable<SearchResults>;
@@ -35,7 +35,7 @@ export class DemoHomePageComponent {
               private readonly dir: Dir) {
     // Delay initialization by up to 2 seconds
     this.searchService.loadIndex(this.searchService.hasWorker ? 2000 : 0)
-      .subscribe( event => console.log('Search index loaded'))
+      .subscribe( event => console.log('Search index loaded'));
   }
 
   rtlToggleChanged() {
@@ -53,20 +53,20 @@ export class DemoHomePageComponent {
   ngOnInit() {
     this.topMenuItems = this.mdMenu.ofType('topMenuSection');
     this.demoLinks = this.mdMenu.ofType('singlePage')
-    .then( entries => {
-      const demoLinks = entries
-        .filter( e => e.subType === 'demoPage' )
-        .map( e => {
-          return {
-            cmd: e.path.split('/'),
-            text: e.title
-          }
-        });
-      return this._demoLinks = demoLinks;
-    });
+      .then( entries => {
+        const demoLinks = entries
+          .filter( e => e.subType === 'demoPage' )
+          .map( e => {
+            return {
+              cmd: e.path.split('/'),
+              text: e.title
+            }
+          });
+        return this._demoLinks = demoLinks;
+      });
   }
 
-  demoLinkStatusChanged(event: { isActive: boolean; findRouterLink: (commands: any[]|string) => RouterLinkWithHref | RouterLink | undefined; }) {
+  demoLinkStatusChanged(event: { isActive: boolean; findRouterLink: (commands: any[] | string) => RouterLinkWithHref | RouterLink | undefined; }) {
     this.selectedDemoLink = null;
     if (event.isActive) {
       if (!this._demoLinks) {
@@ -79,7 +79,7 @@ export class DemoHomePageComponent {
 
   mobileTopMenuRouteActivated(select: MatSelect,
                               items: PageAssetNavEntry[],
-                              event: { isActive: boolean; findRouterLink: (commands: any[]|string) => RouterLinkWithHref | RouterLink | undefined; }) {
+                              event: { isActive: boolean; findRouterLink: (commands: any[] | string) => RouterLinkWithHref | RouterLink | undefined; }) {
     if (event.isActive) {
       select.value = items.find( dl => !!event.findRouterLink(dl.path.split('/')) );
     } else if (this.selectedDemoLink) {

libs/ngrid/drag/src/lib/drag-and-drop/column/aggregation-column.ts

@@ -1,5 +1,5 @@
 // tslint:disable:no-output-rename
-import { Directive } from '@angular/core';
+import { Directive, OnInit } from '@angular/core';
 import { DragDrop, CDK_DROP_LIST, CDK_DROP_LIST_GROUP } from '@angular/cdk/drag-drop';
 
 import { PblColumn } from '@pebula/ngrid';
@@ -12,7 +12,7 @@ let _uniqueIdCounter = 0;
 @Directive({
   selector: '[pblAggregationContainer]',
   exportAs: 'pblAggregationContainer',
-  host: { // tslint:disable-line:use-host-property-decorator
+  host: { // tslint:disable-line:no-host-metadata-property
     'class': 'cdk-drop-list',
     '[id]': 'id',
   },
@@ -22,7 +22,7 @@ let _uniqueIdCounter = 0;
     { provide: CDK_DROP_LIST, useExisting: PblNgridAggregationContainerDirective },
   ],
 })
-export class PblNgridAggregationContainerDirective<T = any> extends CdkLazyDropList<T> {
+export class PblNgridAggregationContainerDirective<T = any> extends CdkLazyDropList<T> implements OnInit {
   id = `pbl-ngrid-column-aggregation-container-${_uniqueIdCounter++}`;
   orientation: 'horizontal' | 'vertical' = 'horizontal';
 

libs/ngrid/drag/src/lib/drag-and-drop/column/column-reorder-plugin.ts

@@ -1,5 +1,5 @@
 // tslint:disable:no-output-rename
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, OnInit } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DragDrop, CdkDragDrop, CDK_DROP_LIST } from '@angular/cdk/drag-drop';
 
@@ -18,9 +18,9 @@ declare module '@pebula/ngrid/lib/ext/types' {
 export const COL_REORDER_PLUGIN_KEY: 'columnReorder' = 'columnReorder';
 
 @Directive({
-  selector: 'pbl-ngrid[columnReorder]',
+  selector: 'pbl-ngrid[columnReorder]', // tslint:disable-line: directive-selector
   exportAs: 'pblNgridColumnReorder',
-  host: { // tslint:disable-line:use-host-property-decorator
+  host: { // tslint:disable-line:no-host-metadata-property
     'class': 'cdk-drop-list',
     '[id]': 'id',
     '[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()',
@@ -31,7 +31,7 @@ export const COL_REORDER_PLUGIN_KEY: 'columnReorder' = 'columnReorder';
     { provide: CDK_DROP_LIST, useExisting: PblNgridColumnReorderPluginDirective },
   ],
 })
-export class PblNgridColumnReorderPluginDirective<T = any> extends PblNgridColumnDragContainerDirective<T> {
+export class PblNgridColumnReorderPluginDirective<T = any> extends PblNgridColumnDragContainerDirective<T> implements OnInit {
 
   @Input() get columnReorder(): boolean { return this._columnReorder; };
   set columnReorder(value: boolean) {

libs/ngrid/drag/src/lib/drag-and-drop/core/drag.ts

@@ -7,9 +7,9 @@ import { PblDragDrop } from './drag-drop';
 import { CdkLazyDropList } from './drop-list';
 
 @Directive({
-  selector: '[cdkLazyDrag]',
+  selector: '[cdkLazyDrag]', // tslint:disable-line: directive-selector
   exportAs: 'cdkLazyDrag',
-  host: { // tslint:disable-line:use-host-property-decorator
+  host: { // tslint:disable-line:no-host-metadata-property
     'class': 'cdk-drag',
     '[class.cdk-drag-dragging]': '_dragRef.isDragging()',
   },
@@ -37,17 +37,22 @@ export class CdkLazyDrag<T = any, Z extends CdkLazyDropList<T> = CdkLazyDropList
   get pblDragRef(): PblDragRef<DRef> { return this._dragRef as any; }
 
   @Input() get cdkDropList(): Z { return this.dropContainer as Z; }
-  set cdkDropList(value: Z) {
+  set cdkDropList(dropList: Z) {
     // TO SUPPORT `cdkDropList` via string input (ID) we need a reactive registry...
     const prev = this.cdkDropList;
-    if (value !== prev) {
+    if (dropList !== prev) {
       if (prev) {
         prev.removeDrag(this);
       }
-      this.dropContainer = value;
-      if (value) {
-        this._dragRef._withDropContainer(value._dropListRef);
-        value.addDrag(this);
+      this.dropContainer = dropList;
+      if (dropList) {
+        this._dragRef._withDropContainer(dropList.pblDropListRef);
+        this._dragRef.beforeStarted.subscribe(() => {
+          if (dropList.dir) {
+            this._dragRef.withDirection(dropList.dir);
+          }
+        });
+        dropList.addDrag(this);
       }
       this.dropContainerChanged(prev);
     }

libs/ngrid/drag/src/lib/drag-and-drop/core/drop-list.ts

@@ -8,7 +8,7 @@ import {
   SkipSelf,
   ChangeDetectorRef
 } from '@angular/core';
-import { Directionality } from '@angular/cdk/bidi';
+import { Direction, Directionality } from '@angular/cdk/bidi';
 import { ScrollDispatcher } from '@angular/cdk/scrolling';
 import {
   DragDrop,
@@ -26,13 +26,13 @@ import { PblDropListRef } from './drop-list-ref';
 import { PblDragDrop } from './drag-drop';
 
 @Directive({
-  selector: '[cdkLazyDropList]',
+  selector: '[cdkLazyDropList]', // tslint:disable-line: directive-selector
   exportAs: 'cdkLazyDropList',
   providers: [
     { provide: DragDrop, useExisting: PblDragDrop },
     { provide: CDK_DROP_LIST, useClass: CdkLazyDropList },
   ],
-  host: { // tslint:disable-line:use-host-property-decorator
+  host: { // tslint:disable-line:no-host-metadata-property
     'class': 'cdk-drop-list',
     '[id]': 'id',
     '[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()',
@@ -46,6 +46,8 @@ export class CdkLazyDropList<T = any, DRef = any> extends CdkDropList<T> impleme
   get grid(): PblNgridComponent<T> { return this._gridApi?.grid; }
   set grid(value: PblNgridComponent<T>) { this.updateGrid(value); }
 
+  get dir(): Direction | null { return this._gridApi?.getDirection(); }
+
   /**
    * Selector that will be used to determine the direct container element, starting from
    * the `cdkDropList` element and going down the DOM. Passing an alternate direct container element
@@ -56,7 +58,6 @@ export class CdkLazyDropList<T = any, DRef = any> extends CdkDropList<T> impleme
   @Input('cdkDropListDirectContainerElement') directContainerElement: string;
 
   protected get gridApi(): PblNgridExtensionApi<T> { return this._gridApi; }
-
   protected readonly originalElement: ElementRef<HTMLElement>;
   private _gridApi: PblNgridExtensionApi<T>;
 
@@ -103,6 +104,9 @@ export class CdkLazyDropList<T = any, DRef = any> extends CdkDropList<T> impleme
       this.element = this.originalElement;
     }
     this.pblDropListRef.withElement(this.element);
+    if (this.dir) {
+      this.pblDropListRef.withDirection(this.dir);
+    }
   }
 
   protected gridChanged(prev?: PblNgridExtensionApi<T>) { }