Merge branch 'master' into dkamburov/expose-totalItemCount

Author: ChronosSF

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
 
 - `IgxForOf`
     - `IgxForTotalItemCount` input is added for the cases when the data is from remote services. This will allow setting the count of the items through the template. And gives the opportunity for the developers to use AsyncPipe for this option:

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';
+    }
+}