feat(module:all): Add RTL support to all ng-zorro-antd

components/affix/affix.component.ts

@@ -11,6 +11,7 @@ import { DOCUMENT } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -19,6 +20,7 @@ import {
   NgZone,
   OnChanges,
   OnDestroy,
+  Optional,
   Output,
   Renderer2,
   SimpleChanges,
@@ -33,6 +35,7 @@ import { getStyleAsText, InputNumber, shallowEqual } from 'ng-zorro-antd/core/ut
 import { fromEvent, merge, ReplaySubject, Subject, Subscription } from 'rxjs';
 import { auditTime, map, takeUntil } from 'rxjs/operators';
 
+import { Direction, Directionality } from '@angular/cdk/bidi';
 import { AffixRespondEvents } from './respond-events';
 import { getTargetRect, SimpleRect } from './utils';
 
@@ -72,6 +75,9 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   @Output() readonly nzChange = new EventEmitter<boolean>();
 
+  dir: Direction;
+  private directionChangeSubscription: Subscription = Subscription.EMPTY;
+
   private readonly placeholderNode: HTMLElement;
 
   private affixStyle?: NgStyleInterface;
@@ -94,11 +100,21 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy {
     private scrollSrv: NzScrollService,
     private ngZone: NgZone,
     private platform: Platform,
-    private renderer: Renderer2
+    private renderer: Renderer2,
+    cdr: ChangeDetectorRef,
+    @Optional() directionality: Directionality
   ) {
     // The wrapper would stay at the original position as a placeholder.
     this.placeholderNode = el.nativeElement;
     this.document = doc;
+
+    this.directionChangeSubscription = directionality.change.subscribe(() => {
+      this.dir = directionality.value;
+      this.updatePosition({} as Event);
+      cdr.detectChanges();
+    });
+
+    this.dir = directionality.value;
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -118,6 +134,7 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   ngOnDestroy(): void {
     this.removeListeners();
+    this.directionChangeSubscription.unsubscribe();
   }
 
   private registerListeners(): void {
@@ -178,10 +195,17 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy {
     this.affixStyle = affixStyle;
     if (fixed) {
       wrapEl.classList.add(NZ_AFFIX_CLS_PREFIX);
+
+      if (this.dir === 'rtl') {
+        wrapEl.classList.add(`${NZ_AFFIX_CLS_PREFIX}-rtl`);
+      }
     } else {
       wrapEl.classList.remove(NZ_AFFIX_CLS_PREFIX);
-    }
 
+      if (this.dir === 'rtl') {
+        wrapEl.classList.remove(`${NZ_AFFIX_CLS_PREFIX}-rtl`);
+      }
+    }
     if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) {
       this.nzChange.emit(fixed);
     }

components/alert/alert.component.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { Direction, Directionality } from '@angular/cdk/bidi';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -36,6 +37,7 @@ const NZ_CONFIG_COMPONENT_NAME = 'alert';
     <div
       *ngIf="!closed"
       class="ant-alert"
+      [class.ant-alert-rtl]="dir === 'rtl'"
       [class.ant-alert-success]="nzType === 'success'"
       [class.ant-alert-info]="nzType === 'info'"
       [class.ant-alert-warning]="nzType === 'warning'"
@@ -92,17 +94,24 @@ export class NzAlertComponent implements OnChanges, OnDestroy {
   closed = false;
   iconTheme: 'outline' | 'fill' = 'fill';
   inferredIconType: string = 'info-circle';
+  dir: Direction;
   private isTypeSet = false;
   private isShowIconSet = false;
   private destroy$ = new Subject();
 
-  constructor(public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef) {
+  constructor(public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, directionality: Directionality) {
     this.nzConfigService
       .getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
       .pipe(takeUntil(this.destroy$))
       .subscribe(() => {
         this.cdr.markForCheck();
       });
+
+    this.dir = directionality.value;
+    directionality.change.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.dir = directionality.value;
+      this.cdr.detectChanges();
+    });
   }
 
   closeAlert(): void {

components/auto-complete/autocomplete.component.ts

@@ -31,9 +31,10 @@ import { slideMotion } from 'ng-zorro-antd/core/animation';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { BooleanInput, CompareWith, NzDropDownPosition, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
-import { defer, merge, Observable, Subscription } from 'rxjs';
-import { filter, switchMap, take } from 'rxjs/operators';
+import { defer, merge, Observable, Subject, Subscription } from 'rxjs';
+import { filter, switchMap, take, takeUntil } from 'rxjs/operators';
 
+import { Direction, Directionality } from '@angular/cdk/bidi';
 import { NzAutocompleteOptionComponent, NzOptionSelectionChange } from './autocomplete-option.component';
 
 export interface AutocompleteDataSourceItem {
@@ -55,6 +56,7 @@ export type AutocompleteDataSource = Array<AutocompleteDataSourceItem | string |
         #panel
         class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
         [class.ant-select-dropdown-hidden]="!showPanel"
+        [class.ant-select-dropdown-rtl]="dir === 'rtl'"
         [ngClass]="nzOverlayClassName"
         [ngStyle]="nzOverlayStyle"
         [nzNoAnimation]="noAnimation?.nzNoAnimation"
@@ -101,6 +103,8 @@ export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit,
   isOpen: boolean = false;
   activeItem!: NzAutocompleteOptionComponent;
   dropDownPosition: NzDropDownPosition = 'bottom';
+  dir: Direction;
+  private destroy$ = new Subject<void>();
 
   /**
    * Options accessor, its source may be content or dataSource
@@ -152,8 +156,16 @@ export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit,
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private ngZone: NgZone,
+    @Optional() directionality: Directionality,
     @Host() @Optional() public noAnimation?: NzNoAnimationDirective
-  ) {}
+  ) {
+    directionality.change.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.dir = directionality.value;
+      changeDetectorRef.detectChanges();
+    });
+
+    this.dir = directionality.value;
+  }
 
   ngAfterContentInit(): void {
     if (!this.nzDataSource) {
@@ -171,6 +183,8 @@ export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit,
     this.dataSourceChangeSubscription.unsubscribe();
     this.selectionChangeSubscription.unsubscribe();
     this.optionMouseEnterSubscription.unsubscribe();
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   setVisibility(): void {

components/badge/badge.component.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { Direction, Directionality } from '@angular/cdk/bidi';
 import { ContentObserver } from '@angular/cdk/observers';
 import {
   AfterViewInit,
@@ -18,6 +19,7 @@ import {
   OnChanges,
   OnDestroy,
   OnInit,
+  Optional,
   Renderer2,
   SimpleChanges,
   TemplateRef,
@@ -101,6 +103,8 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes
   countSingleArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
   presetColor: string | null = null;
   count: number = 0;
+  dir: Direction;
+
   @ViewChild('contentElement', { static: false }) contentElement?: ElementRef;
   @Input() @InputBoolean() nzShowZero: boolean = false;
   @Input() @InputBoolean() nzShowDot = true;
@@ -137,8 +141,20 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes
     private elementRef: ElementRef,
     private contentObserver: ContentObserver,
     private cdr: ChangeDetectorRef,
-    private ngZone: NgZone
-  ) {}
+    private ngZone: NgZone,
+    @Optional() directionality: Directionality
+  ) {
+    directionality.change.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.dir = directionality.value;
+      this.prepareBadgeForRtl();
+      this.cdr.detectChanges();
+    });
+
+    renderer.addClass(elementRef.nativeElement, 'ant-badge');
+
+    this.dir = directionality.value;
+    this.prepareBadgeForRtl();
+  }
 
   ngOnInit(): void {
     this.generateMaxNumberArray();
@@ -179,4 +195,16 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes
     this.destroy$.next();
     this.destroy$.complete();
   }
+
+  private prepareBadgeForRtl(): void {
+    if (this.isRtlLayout) {
+      this.renderer.addClass(this.elementRef.nativeElement, 'ant-badge-rtl');
+    } else {
+      this.renderer.removeClass(this.elementRef.nativeElement, 'ant-badge-rtl');
+    }
+  }
+
+  get isRtlLayout(): boolean {
+    return this.dir === 'rtl';
+  }
 }

components/badge/demo/change.ts

@@ -26,6 +26,11 @@ import { Component } from '@angular/core';
         margin-right: 20px;
       }
 
+      nz-badge.ant-badge-rtl {
+        margin-right: 0;
+        margin-left: 20px;
+      }
+
       .head-example {
         width: 42px;
         height: 42px;

components/breadcrumb/breadcrumb.component.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { Direction, Directionality } from '@angular/cdk/bidi';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -16,6 +17,7 @@ import {
   NgZone,
   OnDestroy,
   OnInit,
+  Optional,
   Renderer2,
   TemplateRef,
   ViewEncapsulation
@@ -57,17 +59,28 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy {
   @Input() nzRouteLabel: string = 'breadcrumb';
 
   breadcrumbs: BreadcrumbOption[] | undefined = [];
+  dir: Direction;
 
   private destroy$ = new Subject<void>();
 
   constructor(
     private injector: Injector,
     private ngZone: NgZone,
     private cdr: ChangeDetectorRef,
-    elementRef: ElementRef,
-    renderer: Renderer2
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    @Optional() directionality: Directionality
   ) {
+    directionality.change.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.dir = directionality.value;
+      this.prepareComponentForRtl();
+      cdr.detectChanges();
+    });
+
     renderer.addClass(elementRef.nativeElement, 'ant-breadcrumb');
+
+    this.dir = directionality.value;
+    this.prepareComponentForRtl();
   }
 
   ngOnInit(): void {
@@ -136,4 +149,13 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy {
     }
     return undefined;
   }
+
+  private prepareComponentForRtl(): void {
+    if (this.dir === "rtl") {
+      this.renderer.addClass(this.elementRef.nativeElement, 'ant-breadcrumb-rtl');
+    } else {
+      this.renderer.removeClass(this.elementRef.nativeElement, 'ant-breadcrumb-rtl');
+    }
+  }
+
 }

components/breadcrumb/style/patch.less

@@ -25,3 +25,11 @@ nz-breadcrumb-item:last-child {
 nz-breadcrumb-item:last-child .ant-breadcrumb-separator {
   display: none;
 }
+
+.@{breadcrumb-prefix-cls} {
+  &-rtl {
+    > nz-breadcrumb-item {
+      float: right;
+    }
+  }
+}

components/button/button-group.component.ts

@@ -6,7 +6,18 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Direction, Directionality } from '@angular/cdk/bidi';
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 export type NzButtonGroupSize = 'large' | 'default' | 'small';
 
@@ -18,13 +29,30 @@ export type NzButtonGroupSize = 'large' | 'default' | 'small';
   host: {
     '[class.ant-btn-group]': `true`,
     '[class.ant-btn-group-lg]': `nzSize === 'large'`,
-    '[class.ant-btn-group-sm]': `nzSize === 'small'`
+    '[class.ant-btn-group-sm]': `nzSize === 'small'`,
+    '[class.ant-btn-group-rtl]': `dir === 'rtl'`
   },
   preserveWhitespaces: false,
   template: `
     <ng-content></ng-content>
   `
 })
-export class NzButtonGroupComponent {
+export class NzButtonGroupComponent implements OnDestroy {
   @Input() nzSize: NzButtonGroupSize = 'default';
+
+  dir: Direction;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(directionality: Directionality) {
+    this.dir = directionality.value;
+    directionality.change.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.dir = directionality.value;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }