Merge branch 'master' into iganchev/select-label-position-master

Author: kdinev

CHANGELOG.md

@@ -8,9 +8,6 @@ All notable changes for each version of this project will be documented in this
 @include igx-core($print-layout: false); 
 ```
 
-- `Pager`
-    - **Behavioral Change** - The pager is now hidden when there are no records in the grid.
-
 ## 7.3.1
 - `IgxGrid` Custom keyboard navigation
     - `onFocusChange` event is deprecated.
@@ -62,6 +59,16 @@ All notable changes for each version of this project will be documented in this
     </igx-drop-down>
     ```
 
+## 7.2.12
+### New feature
+- **igxSlider** - exposing new `labels` property accepting a collection of literal values that become equally spread over the slider, by placing each element as a thumb label.
+- **igxSlider** - deprecate **isContiunous** property.
+ 
+## 7.2.9
+- `Pager`
+    - **Behavioral Change** - The pager is now hidden when there are no records in the grid.
+
+
 ## 7.2.6
 - `igxGrid`
     - **Feature** The `groupsRecords` property now returns the full grouping tree as in 7.1 and also includes the grouping information for all pages.

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss

@@ -134,7 +134,7 @@
         width: 100%;
         height: inherit;
         background: --var($theme, 'track-color');
-        transform-origin: 0 0 0;
+        transform-origin: left center;
         transform: scaleX(0);
     }
 

projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts

@@ -1,14 +1,13 @@
 import { Component, ViewChild } from '@angular/core';
 import {
-  async,
-  TestBed
+    async,
+    TestBed
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxButtonDirective } from './button.directive';
 
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { IgxIconComponent, IgxIconService } from '../../icon';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { DisplayDensity } from '../../core/density';
 
 const FLAT_RAISED_OUTLINED_BUTTON_COMPACT = 'igx-button--compact';
@@ -27,10 +26,9 @@ describe('IgxButton', () => {
                 IgxButtonDirective,
                 IgxIconComponent
             ],
-            imports: [HttpClientTestingModule],
             providers: [IgxIconService]
         })
-        .compileComponents();
+            .compileComponents();
     }));
 
     it('Initializes a button', () => {
@@ -114,7 +112,7 @@ describe('IgxButton', () => {
 
 @Component({
     template:
-    `<span igxButton="flat" igx-ripple="white">
+        `<span igxButton="flat" igx-ripple="white">
         <i class="material-icons">add</i>
     </span>`
 })
@@ -123,7 +121,7 @@ class InitButtonComponent {
 
 @Component({
     template:
-    `<span igxButton="raised"
+        `<span igxButton="raised"
         [igxButtonColor]="foreground"
         [igxButtonBackground]="background"
         [disabled]="disabled">Test</span>`
@@ -136,7 +134,7 @@ class ButtonWithAttribsComponent {
 
 @Component({
     template:
-    `
+        `
     <button #flat class="flatBtn" igxButton="flat" [displayDensity]="density">Flat</button>
     <button #raised class="raisedBtn" igxButton="raised" [displayDensity]="density">Raised</button>
     <button #outlined class="outlinedBtn" igxButton="outlined" [displayDensity]="density">Outlined</button>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts

@@ -55,6 +55,7 @@ describe('IgxTreeGrid - Integration', () => {
         // Init test
         fix = TestBed.createComponent(IgxTreeGridStringTreeColumnComponent);
         fix.detectChanges();
+        tick();
         treeGrid = fix.componentInstance.treeGrid;
 
         TreeGridFunctions.verifyTreeColumn(fix, 'Name', 4);

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-summaries.spec.ts

@@ -39,7 +39,7 @@ describe('IgxTreeGrid - Summaries', () => {
     describe('', () => {
         let fix;
         let treeGrid;
-        beforeEach(fakeAsync(/** height/width setter rAF */() => {
+        beforeEach(async(/** height/width setter rAF */() => {
             fix = TestBed.createComponent(IgxTreeGridSummariesKeyComponent);
             fix.detectChanges();
             treeGrid = fix.componentInstance.treeGrid;

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts

@@ -37,28 +37,28 @@ describe('IgxTreeGrid Component Tests', () => {
             grid = fix.componentInstance.treeGrid;
         }));
 
+        it('should render 10 records if height is unset and parent container\'s height is unset', () => {
+            fix.detectChanges();
+            const defaultHeight = fix.debugElement.query(By.css(TBODY_CLASS)).styles.height;
+            expect(defaultHeight).not.toBeNull();
+            expect(parseInt(defaultHeight, 10)).toBeGreaterThan(400);
+            expect(fix.componentInstance.isVerticalScrollbarVisible()).toBeTruthy();
+            expect(grid.rowList.length).toBeGreaterThanOrEqual(10);
+        });
+
         it('should match width and height of parent container when width/height are set in %', fakeAsync(() => {
             fix.componentInstance.outerWidth = 800;
             fix.componentInstance.outerHeight = 600;
             grid.width = '50%';
             grid.height = '50%';
-            tick();
             fix.detectChanges();
+            tick();
 
             expect(window.getComputedStyle(grid.nativeElement).height).toMatch('300px');
             expect(window.getComputedStyle(grid.nativeElement).width).toMatch('400px');
             expect(grid.rowList.length).toBeGreaterThan(0);
         }));
 
-        it('should render 10 records if height is unset and parent container\'s height is unset', () => {
-            fix.detectChanges();
-            const defaultHeight = fix.debugElement.query(By.css(TBODY_CLASS)).styles.height;
-            expect(defaultHeight).not.toBeNull();
-            expect(parseInt(defaultHeight, 10)).toBeGreaterThan(400);
-            expect(fix.componentInstance.isVerticalScrollbarVisible()).toBeTruthy();
-            expect(grid.rowList.length).toBeGreaterThanOrEqual(10);
-        });
-
         it('should render 10 records if height is 100% and parent container\'s height is unset', fakeAsync(() => {
             grid.height = '600px';
             tick();

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

@@ -6,7 +6,7 @@ import { IgxIconService } from './icon.service';
  * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/icon.html)
  *
  * The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons
- * support custom colors and can be marked as active or disabled using the `isActive` property. This will change the appearence
+ * support custom colors and can be marked as active or disabled using the `isActive` property. This will change the appearance
  * of the icon.
  *
  * Example:

projects/igniteui-angular/src/lib/icon/icon.service.spec.ts

@@ -1,6 +1,5 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { IgxIconService } from './icon.service';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { DOCUMENT } from '@angular/common';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
@@ -17,7 +16,6 @@ describe('Icon Service', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [HttpClientTestingModule],
             providers: [IgxIconService]
         }).compileComponents();
     });
@@ -54,27 +52,22 @@ describe('Icon Service', () => {
 
     it('should add custom svg icon from url', () => {
         const iconService = TestBed.get(IgxIconService) as IgxIconService;
-        const httpMock = TestBed.get(HttpTestingController);
         const document = TestBed.get(DOCUMENT);
 
         const iconName = 'test';
         const fontSet = 'svg-icons';
         const iconKey = fontSet + '_' + iconName;
 
+        spyOn(XMLHttpRequest.prototype, 'open').and.callThrough();
+        spyOn(XMLHttpRequest.prototype, 'send');
+
         iconService.addSvgIcon(iconName, 'test.svg', fontSet);
 
-        const req = httpMock.expectOne('test.svg');
-        expect(req.request.method).toBe('GET');
-        req.flush(svgText);
-
-        expect(iconService.isSvgIconCached(iconName, fontSet)).toBeTruthy();
-        expect(iconService.getSvgIconKey(iconName, fontSet)).toEqual(iconKey);
+        expect(XMLHttpRequest.prototype.open).toHaveBeenCalledTimes(1);
+        expect(XMLHttpRequest.prototype.send).toHaveBeenCalledTimes(1);
 
         const svgElement = document.querySelector(`svg[id='${iconKey}']`);
         expect(svgElement).toBeDefined();
-
-        // make sure thare are no outstanding requests
-        httpMock.verify();
     });
 
     it('should add custom svg icon from text', () => {

projects/igniteui-angular/src/lib/icon/icon.service.ts

@@ -1,6 +1,5 @@
 import { Injectable, SecurityContext, Inject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { HttpClient } from '@angular/common/http';
 import { DOCUMENT } from '@angular/common';
 
 /**
@@ -19,13 +18,14 @@ import { DOCUMENT } from '@angular/common';
 @Injectable({
     providedIn: 'root'
 })
+
 export class IgxIconService {
     private _fontSet = 'material-icons';
     private _fontSetAliases = new Map<string, string>();
     private _svgContainer: HTMLElement;
     private _cachedSvgIcons: Set<string> = new Set<string>();
 
-    constructor (private _sanitizer: DomSanitizer, private _httpClient: HttpClient, @Inject(DOCUMENT) private _document: any) { }
+    constructor(private _sanitizer: DomSanitizer, @Inject(DOCUMENT) private _document: any) { }
 
     /**
      *  Returns the default font set.
@@ -108,7 +108,7 @@ export class IgxIconService {
     }
 
     /**
-     *  Returns wheather a given SVG image is present in the cache.
+     *  Returns whether a given SVG image is present in the cache.
      *```typescript
      *   const isSvgCached = this.iconService.isSvgIconCached('aruba', 'svg-flags');
      * ```
@@ -132,14 +132,28 @@ export class IgxIconService {
      * @hidden
      */
     private fetchSvg(iconName: string, url: string, fontSet: string = '') {
-        const request = this._httpClient.get(url, { responseType: 'text' });
-        const subscription = request.subscribe((value: string) => {
-            this.cacheSvgIcon(iconName, value, fontSet);
-        }, (error) => {
-            throw new Error(`Could not fetch SVG from url: ${url}; error: ${error.message}`);
-        }, () => {
-            subscription.unsubscribe();
-        });
+        const instance = this;
+        const httpRequest = new XMLHttpRequest();
+        httpRequest.open('GET', url, true);
+        httpRequest.responseType = 'text';
+
+        // load – when the result is ready, that includes HTTP errors like 404.
+        httpRequest.onload = function (event: ProgressEvent) {
+            const request = event.target as XMLHttpRequest;
+            if (request.status === 200) {
+                instance.cacheSvgIcon(iconName, request.responseText, fontSet);
+            } else {
+                throw new Error(`Could not fetch SVG from url: ${url}; error: ${request.status} (${request.statusText})`);
+            }
+        };
+
+        // error – when the request couldn’t be made, e.g.network down or invalid URL.
+        httpRequest.onerror = function (event: ProgressEvent) {
+            const request = event.target as XMLHttpRequest;
+            throw new Error(`Could not fetch SVG from url: ${url}; error status code: ${request.status} (${request.statusText})`);
+        };
+
+        httpRequest.send();
     }
 
     /**

projects/igniteui-angular/src/lib/icon/index.ts

@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { IgxIconComponent } from './icon.component';
-import { HttpClientModule } from '@angular/common/http';
 import { DeprecateMethod } from '../core/deprecateDecorators';
 
 /**
@@ -11,7 +10,7 @@ import { DeprecateMethod } from '../core/deprecateDecorators';
 @NgModule({
     declarations: [IgxIconComponent],
     exports: [IgxIconComponent],
-    imports: [CommonModule, HttpClientModule]
+    imports: [CommonModule]
 })
 export class IgxIconModule {
     @DeprecateMethod('IgxIconModule.forRoot method is deprecated. Use IgxIconModule instead.')