Merge branch 'master' into ddincheva/cellEditingFocus

Author: ddincheva

CHANGELOG.md

@@ -69,8 +69,8 @@ All notable changes for each version of this project will be documented in this
     - `tickLabelsOrientation` input was added. Allows you to change the rotation of all tick labels from horizontal to vertical(toptobottom, bottomtotop).
     - `igxSliderTickLabel` directive has been introduced. Allows you to set a custom template for all tick labels.
     - `isContinuous` - input has been deleted. The option is not supported anymore.
-    - `onValueChanged` - new output has been exposed. This event is emitted at the end of every slide interaction. 
-   
+    - `onValueChanged` - new output has been exposed. This event is emitted at the end of every slide interaction.
+
 - `IgxCarousel`:
     - `keyboardSupport` input is added, which can be used to enable and disable keyboard navigation
     - `gesturesSupport` input is added, which can be used to enable and disable gestures
@@ -81,7 +81,7 @@ All notable changes for each version of this project will be documented in this
     - `nextButtonTemplate` directive is added, which is used to provide a custom next button template. If not provided, a default next button is used.
     - `prevButtonTemplate` directive is added, which is used to provide a custom previous button template. If not provided, a default previous button is used.
 
-- `IgxSelect`: 
+- `IgxSelect`:
     - adding `IgxSelectHeaderDirective` and `IgxSelectFooterDirective`. These can be used to provide a custom header, respectively footer templates for the `igxSelect` drop-down list. If there are no templates marked with these directives - no default templates will be used so the drop-down list will not have header nor footer.
 
 - `IgxCombo`:
@@ -124,6 +124,7 @@ All notable changes for each version of this project will be documented in this
 
     @include igx-progress-circular($theme);
     ```
+    - RTL support
 
 ## 8.2.6
 

package-lock.json

@@ -45,14 +45,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.0.0-rc.10",
-    "@angular/common": "^9.0.0-rc.10",
-    "@angular/compiler": "^9.0.0-rc.10",
-    "@angular/core": "^9.0.0-rc.10",
-    "@angular/forms": "^9.0.0-rc.10",
-    "@angular/platform-browser": "^9.0.0-rc.10",
-    "@angular/platform-browser-dynamic": "^9.0.0-rc.10",
-    "@angular/router": "^9.0.0-rc.10",
+    "@angular/animations": "^9.0.0-rc.11",
+    "@angular/common": "^9.0.0-rc.11",
+    "@angular/compiler": "^9.0.0-rc.11",
+    "@angular/core": "^9.0.0-rc.11",
+    "@angular/forms": "^9.0.0-rc.11",
+    "@angular/platform-browser": "^9.0.0-rc.11",
+    "@angular/platform-browser-dynamic": "^9.0.0-rc.11",
+    "@angular/router": "^9.0.0-rc.11",
     "@types/hammerjs": "^2.0.36",
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
@@ -70,8 +70,8 @@
     "@angular-devkit/build-ng-packagr": "~0.900.0-rc.10",
     "@angular-devkit/schematics": "^9.0.0-rc.10",
     "@angular/cli": "~9.0.0-rc.10",
-    "@angular/compiler-cli": "^9.0.0-rc.10",
-    "@angular/language-service": "^9.0.0-rc.10",
+    "@angular/compiler-cli": "^9.0.0-rc.11",
+    "@angular/language-service": "^9.0.0-rc.11",
     "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "~3.3.5",
     "@types/jasminewd2": "~2.0.6",

package.json

@@ -17,6 +17,7 @@ import {
     IgxProgressBarGradientDirective,
 } from './progressbar.common';
 import { IBaseEventArgs } from '../core/utils';
+import { IgxDirectionality } from '../services/direction/directionality';
 
 const ONE_PERCENT = 0.01;
 const MIN_VALUE = 0;
@@ -704,7 +705,7 @@ export class IgxCircularProgressBarComponent extends BaseProgress implements Aft
 
     @ViewChild('circle', { static: true }) private _svgCircle: ElementRef;
 
-    constructor(private renderer: Renderer2) {
+    constructor(private renderer: Renderer2, private _directionality: IgxDirectionality) {
         super();
     }
 
@@ -761,8 +762,9 @@ export class IgxCircularProgressBarComponent extends BaseProgress implements Aft
     }
 
     private getProgress(percentage: number) {
-        // Reverse the sign here: '-' should become '+' in RTL mode
-        return this._circumference - (percentage * this._circumference / 100);
+        return this._directionality.rtl ?
+            this._circumference + (percentage * this._circumference / 100) :
+            this._circumference - (percentage * this._circumference / 100);
     }
 }
 

projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts

@@ -0,0 +1,90 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { IgxDirectionality, DIR_DOCUMENT } from './directionality';
+import { DOCUMENT } from '@angular/common';
+
+interface FakeDoc {
+    body: { dir?: string };
+    documentElement: { dir?: string };
+}
+
+describe('IgxDirectionality DI', () => {
+    let fakeDoc: FakeDoc;
+    beforeEach(async(() => {
+        fakeDoc = {body: {}, documentElement: {}};
+
+        TestBed.configureTestingModule({
+            declarations: [
+                InjectsIgxDirectionalityComponent
+            ],
+        }).compileComponents();
+    }));
+
+    it('should inject the document through the injectionToken properly', () => {
+        const injectionToken = TestBed.inject(DIR_DOCUMENT);
+        const document = TestBed.inject(DOCUMENT);
+
+        expect(injectionToken).toEqual(document);
+        expect(injectionToken).toEqual(jasmine.any(Document));
+        expect(document).toBeTruthy(jasmine.any(Document));
+    });
+
+    it('should read dir from html if not specified on the body', inject([DOCUMENT], () => {
+        const fixture = TestBed.createComponent(InjectsIgxDirectionalityComponent);
+        const component = fixture.debugElement.componentInstance;
+
+        expect(component.dir.document).not.toBeNull();
+        expect(component.dir.document).not.toBeUndefined();
+        expect(component.dir.document).toEqual(jasmine.any(Document));
+    }));
+
+});
+describe('IgxDirectionality', () => {
+    let fakeDoc: FakeDoc;
+    beforeEach(() => {
+        fakeDoc = {body: {}, documentElement: {}};
+    });
+
+    let expectedRes: string;
+    let dirInstance: IgxDirectionality;
+    it('should read dir from html if not specified on the body', () => {
+        expectedRes = 'rtl';
+        fakeDoc.documentElement.dir = expectedRes;
+
+        dirInstance = new IgxDirectionality(fakeDoc);
+        expect(dirInstance.value).toEqual(expectedRes);
+    });
+    it('should read dir from body even it is also specified on the html element', () => {
+        fakeDoc.documentElement.dir = 'ltr';
+        expectedRes = 'rtl';
+        fakeDoc.body.dir = expectedRes;
+
+        dirInstance = new IgxDirectionality(fakeDoc);
+        expect(dirInstance.value).toEqual(expectedRes);
+    });
+
+    it('should default to ltr if nothing specified', () => {
+        expectedRes = 'ltr';
+
+        dirInstance = new IgxDirectionality(fakeDoc);
+        expect(dirInstance.value).toEqual(expectedRes);
+    });
+
+    it('should default to ltr if invalid values are set both on body or html elements', () => {
+        fakeDoc.documentElement.dir = 'none';
+        fakeDoc.body.dir = 'irrelevant';
+
+        dirInstance = new IgxDirectionality(fakeDoc);
+        expect(dirInstance.value).toEqual('ltr');
+    });
+});
+
+@Component({
+    selector: 'igx-div-element',
+    template: `
+        <div>element</div>
+    `
+})
+class InjectsIgxDirectionalityComponent {
+    constructor(public dir: IgxDirectionality) { }
+}

projects/igniteui-angular/src/lib/services/direction/directionality.spec.ts

@@ -0,0 +1,64 @@
+import { Injectable, Inject, InjectionToken, inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+/**
+ * @hidden
+ */
+export type Direction = 'ltr' | 'rtl';
+
+/**
+ * Injection token is used to inject the document into Directionality
+ * which factory could be faked for testing purposes.
+ *
+ * We can't provide and mock the DOCUMENT token from platform-browser because configureTestingModule
+ * allows override of the default providers, directive, pipes, modules of the test injector
+ * which causes errors.
+ *
+ * @hidden
+ */
+export const DIR_DOCUMENT = new InjectionToken<Document>('dir-doc', {
+    providedIn: 'root',
+    factory: DIR_DOCUMENT_FACTORY
+});
+
+/**
+ * @hidden
+ */
+export function DIR_DOCUMENT_FACTORY(): Document {
+    return inject(DOCUMENT);
+}
+
+/**
+ * @hidden
+ *
+ * Bidirectional service that extracts the value of the direction attribute on the body or html elements.
+ *
+ * The dir attribute over the body element takes precedence.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class IgxDirectionality {
+    private _dir: Direction;
+    private _document: Document;
+
+    public get value(): Direction {
+        return this._dir;
+    }
+
+    public get document() {
+        return this._document;
+    }
+
+    public get rtl() {
+        return this._dir === 'rtl';
+    }
+
+    constructor(@Inject(DIR_DOCUMENT) document) {
+        this._document = <Document>document;
+        const bodyDir = this._document.body ? this._document.body.dir : null;
+        const htmlDir = this._document.documentElement ? this._document.documentElement.dir : null;
+        const extractedDir = bodyDir || htmlDir;
+        this._dir = (extractedDir === 'ltr' || extractedDir === 'rtl') ? extractedDir : 'ltr';
+    }
+}