feat(calendar): rtl support

akveo · Aug 6, 2018 · c6b5442 · c6b5442
1 parent e1c7d6d
commit c6b5442
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss b/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss
@@ -23,6 +23,10 @@
         margin-left: 0.5rem;
       }
 
+      .nb-arrow-dropleft {
+        margin-right: 0.5rem;
+      }
+
       &:hover {
         color: nb-theme(calendar-hover-item-bg);
         cursor: pointer;

diff --git a/...ork/theme/components/calendar-kit/components/calendar-header/calendar-header.component.ts b/...ork/theme/components/calendar-kit/components/calendar-header/calendar-header.component.ts
@@ -6,13 +6,16 @@
 
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
+import { NbLayoutDirectionService } from '../../../../services/direction.service';
+
 
 @Component({
   selector: 'nb-calendar-header',
   template: `
     <div class="header">
       <span class="title" (click)="navigateToday.emit()">
-        {{ date | nbCalendarDate }} <i class="nb-arrow-dropright"></i>
+        {{ date | nbCalendarDate }}
+        <i [ngClass]="{ 'nb-arrow-dropright': isLtr, 'nb-arrow-dropleft': isRtl }"></i>
       </span>
       <span class="sub-title">Today</span>
     </div>
@@ -21,4 +24,15 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 export class NbCalendarHeaderComponent {
   @Input() date: Date = new Date();
   @Output() navigateToday: EventEmitter<void> = new EventEmitter();
+
+  constructor(private directionService: NbLayoutDirectionService) {
+  }
+
+  get isRtl(): boolean {
+    return this.directionService.isRtl();
+  }
+
+  get isLtr(): boolean {
+    return this.directionService.isLtr();
+  }
 }
diff --git a/...nts/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.ts b/...nts/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.ts
@@ -4,22 +4,34 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { NbLayoutDirectionService } from '../../../../services/direction.service';
 
 
 @Component({
   selector: 'nb-calendar-pageable-navigation',
   styleUrls: ['./calendar-pageable-navigation.component.scss'],
   template: `
-    <i class="nb-arrow-left" (click)="prev.emit()"></i>
+    <i [ngClass]="{'nb-arrow-left': isLtr, 'nb-arrow-right': isRtl }" (click)="prev.emit()"></i>
     <nb-calendar-navigation [date]="date" (changeMode)="changeMode.emit()"></nb-calendar-navigation>
-    <i class="nb-arrow-right" (click)="next.emit()"></i>
+    <i [ngClass]="{'nb-arrow-right': isLtr, 'nb-arrow-left': isRtl }" (click)="next.emit()"></i>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NbCalendarPageableNavigationComponent {
   @Input() date: Date;
   @Output() changeMode = new EventEmitter<void>();
   @Output() next = new EventEmitter<void>();
   @Output() prev = new EventEmitter<void>();
+
+  constructor(private directionService: NbLayoutDirectionService) {
+  }
+
+  get isRtl(): boolean {
+    return this.directionService.isRtl();
+  }
+
+  get isLtr(): boolean {
+    return this.directionService.isLtr();
+  }
 }