Merge branch '7.0.x' into rkaraivanov/fix3164-7.0

CHANGELOG.md

@@ -4,17 +4,58 @@ All notable changes for each version of this project will be documented in this
 
 ## 7.0.0
 - Updated package dependencies to Angular 7 ([#3000](https://github.com/IgniteUI/igniteui-angular/pull/3000))
+- Themes: Add dark schemas and mixins (PR [#3025](https://github.com/IgniteUI/igniteui-angular/pull/3025))
 
 ## 6.2.1
-- `igx-drop-down`:
-    - Added a new property `maxHeight`, defining the max height of the drop down.
+### Features
+- `igxGrid`, `igxChip`: Add display density DI token to igxGrid and igxChip ([#2804](https://github.com/IgniteUI/igniteui-angular/issues/2804))
+- `igxGrid`
+    - Quick filter auto close ([#2979](https://github.com/IgniteUI/igniteui-angular/issues/2979))
+    - Group By: Added title to chip in Group By area ([#3035](https://github.com/IgniteUI/igniteui-angular/issues/3035))
+    - Improve UX for boolean and date columns, ([#3092](https://github.com/IgniteUI/igniteui-angular/issues/3092))
+- `igxCombo`:
+    - Added a new input property - `displayDensity`. It allows configuring the `displayDensity` of the combo's `value` and `search` inputs. (PR [#3007](https://github.com/IgniteUI/igniteui-angular/pull/3007))
+- `igxDropDown`
+    - Added a new property `maxHeight`, defining the max height of the drop down. ([#3001](https://github.com/IgniteUI/igniteui-angular/issues/3001))
+- Added migrations for Sass theme properties changes in 6.2.0 ([#2994](https://github.com/IgniteUI/igniteui-angular/issues/2994))
 - Themes 
     - Introducing schemas for easier bootstrapping of component themes.
     - **Breaking change** removed $variant from `igx-checkbox-theme`, `igx-ripple-theme`, `igx-switch-theme`, `igx-input-group-theme`, `igx-slider-theme`, and `igx-tooltip-theme`. Use the `$schema` prop, now available on all component themes to change the look for a specific theme. See the [Theming](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/schemas.html) documentation to learn more.
-- `igx-combo`:
-    - Added a new input property - `displayDensity`. It allows configuring the `displayDensity` of the combo's `value` and `search` inputs.
+
+
+### Bug fixes
+
+- `igxGrid`
+    - Filtering condition icon is not updated for boolean columns ([#2936](https://github.com/IgniteUI/igniteui-angular/issues/2936))
+    - Batch editing: Updating a cell with a value that evaluates to false does not mark it as dirty ([#2940](https://github.com/IgniteUI/igniteui-angular/issues/2940))
+    - Filtering input accepts value from calendar for unary conditions ([#2937](https://github.com/IgniteUI/igniteui-angular/issues/2937))
+    - When a number filter's value is deleted the grid is not refreshed ([#2945](https://github.com/IgniteUI/igniteui-angular/issues/2945))
+    - Improve keyboard navigation in filtering ([#2951](https://github.com/IgniteUI/igniteui-angular/issues/2951), [#2941](https://github.com/IgniteUI/igniteui-angular/issues/2941))
+    - Group By: Alt+ Arrow left/Right keys should not toggle the group row ([#2950](https://github.com/IgniteUI/igniteui-angular/issues/2950))
+    - Multi Column Header can be grouped ([#2944](https://github.com/IgniteUI/igniteui-angular/issues/2944))
+    - Group By: groupsRecords is not updated yet at the time of onGroupingDone event. ([#2967](https://github.com/IgniteUI/igniteui-angular/issues/2967))
+    - Paging: Blank space in rows area after vertical scrolling and navigating to next page ([#2957](https://github.com/IgniteUI/igniteui-angular/issues/2957))
+    - When date or boolean cell is in edit mode and press arrowUp or arrowDown key the page is scrolled ([#2507](https://github.com/IgniteUI/igniteui-angular/issues/2507))
+    - When deleting a row the Row Editing dialog should be closed ([#2977](https://github.com/IgniteUI/igniteui-angular/issues/2977))
+    - Group header with columns which width is defined as number throws an exception ([#3020](https://github.com/IgniteUI/igniteui-angular/issues/3020))
+    - Refactor header and filter cell components, Closes [#2972](https://github.com/IgniteUI/igniteui-angular/issues/2972), [#2926](https://github.com/IgniteUI/igniteui-angular/issues/2926), [#2923](https://github.com/IgniteUI/igniteui-angular/issues/2923), [#2917](https://github.com/IgniteUI/igniteui-angular/issues/2917), [#2783](https://github.com/IgniteUI/igniteui-angular/issues/2783), [#3027](https://github.com/IgniteUI/igniteui-angular/issues/3027), [#2938](https://github.com/IgniteUI/igniteui-angular/issues/2938)
+    - Filter's UI dropdown is hidden under the bottom level of the grid ([#2928](https://github.com/IgniteUI/igniteui-angular/issues/2928))
+    - Cell is not editable on iOS ([#2538](https://github.com/IgniteUI/igniteui-angular/issues/2538))
+- `IgxTreeGrid`
+    - Cell selection wrong behavior when collapsing rows ([#2935](https://github.com/IgniteUI/igniteui-angular/issues/2935))
+- `igxCombo` 
+    - Keyboard doesn't scroll virtualized items ([#2999](https://github.com/IgniteUI/igniteui-angular/issues/2999))
+- `igxDatePicker`
+    - Error emitting when  value property is initialized with empty string. ([#3021](https://github.com/IgniteUI/igniteui-angular/issues/3021))
+- `igxOverlay`
+    - Drop-down flickers in IE and EDGE ([#2867](https://github.com/IgniteUI/igniteui-angular/issues/2867))
+- `igxTabs`
+    - Tabs don't not handle width change ([#3030](https://github.com/IgniteUI/igniteui-angular/issues/3030))
+- `igxCalendar`
+    - make all css class names unique ([#2287](https://github.com/IgniteUI/igniteui-angular/issues/2287))
 - Fixed runtime errors when using the package in applications targeting es2015(es6) and newer ([#3011](https://github.com/IgniteUI/igniteui-angular/pull/3011))
 
+
 ## 6.2.0
 - Updated typography following the Material guidelines. Type system is now also optional and can be applied via class to the desired containers. [#2112](https://github.com/IgniteUI/igniteui-angular/pull/2112)
   - **Breaking change:** Applications using Ignite UI for Angular now require the `igx-typography` class to be applied on wrapping element, like the body element for instance.

extras/docs/themes/sassdoc/index.js

@@ -25,6 +25,7 @@ const sassPlug = require('sassdoc-plugin-localization');
 const process = require('process');
 const fs = require('fs');
 const path = require('path');
+const shell = JSON.parse(fs.readFileSync('./extras/template/strings/shell-strings.json'));
 
 themeleon.use({
 
@@ -83,7 +84,7 @@ const theme = themeleon(__dirname, function (t) {
             infraHead: 'partials/infragistics/header',
             infraFoot: 'partials/infragistics/footer',
             infraHeadJA: 'partials/infragistics/infranav.ja',
-            infraFooJA: 'partials/infragistics/infrafoot.ja'
+            infraFootJA: 'partials/infragistics/infrafoot.ja'
         },
         helpers: {
             debug: function (content) {
@@ -147,6 +148,15 @@ const theme = themeleon(__dirname, function (t) {
                     default:
                         return options.inverse(this);
                 }
+            },
+            localize: (options) => {
+                const value = options.fn(this).trim();
+                const lang = process.env.SASSDOC_LANG;
+                if (lang && shell[lang.trim()]) {
+                    return shell[lang.trim()][value];
+                }
+
+                return value;
             }
         }
     };

extras/docs/themes/sassdoc/views/index.hbs

@@ -63,7 +63,6 @@
      ! 2. Loop over types mapped to each group
      ! 3. Loop over items mapped to each type
      }}
-
     <main class="main-content" role="main">
         <div class="nav-wrapper">
             <div class="search-form">
@@ -139,7 +138,7 @@
     </main>
 
     <div id="footer-container">
-        {{#ifCond lang '==' 'jp'}}{{> infraFooJA }}{{else}}{{> infraFoot }}{{/ifCond}}
+        {{#ifCond lang '==' 'jp'}}{{> infraFootJA }}{{else}}{{> infraFoot }}{{/ifCond}}
     </div>
     {{!
      ! If your theme needs some JavaScript, feel free to create a JS file in `assets/js/` folder

extras/docs/themes/sassdoc/views/partials/header.hbs

@@ -14,12 +14,12 @@
             <ul class="tsd-nav">
                 <li class="tsd-nav-item">
                     <button class="infra-button--flat">
-                        <a href="https://www.infragistics.com/products/ignite-ui-angular">Components</a>
+                        <a href="https://www.infragistics.com/products/ignite-ui-angular">{{#localize}}Components{{/localize}}</a>
                     </button>
                 </li>
                 <li class="tsd-nav-item">
                     <button class="infra-button">
-                        <a href="https://infragistics.com/products/ignite-ui-angular/getting-started/">Get Started</a>
+                        <a href="https://infragistics.com/products/ignite-ui-angular/getting-started/">{{#localize}}Get Started{{/localize}}</a>
                     </button>
                 </li>
             </ul>

extras/docs/themes/typedoc/src/partials/header.hbs

@@ -14,12 +14,12 @@
                 <ul class="tsd-nav">
                     <li class="tsd-nav-item">
                         <button class="tsd-button--flat">
-                            <a href="https://www.infragistics.com/products/ignite-ui-angular">Components</a>
+                            <a href="https://www.infragistics.com/products/ignite-ui-angular">{{#localize}}Components{{/localize}}</a>
                         </button>
                     </li>
                     <li class="tsd-nav-item">
                         <button class="tsd-button">
-                            <a href="https://infragistics.com/products/ignite-ui-angular/getting-started/">Get Started</a>
+                            <a href="https://infragistics.com/products/ignite-ui-angular/getting-started/">{{#localize}}Get Started{{/localize}}</a>
                         </button>
                     </li>
                 </ul>

extras/template/strings/shell-strings.json

@@ -21,6 +21,8 @@
         "Class": "クラス",
         "Interface": "インターフェイス",
         "Enumeration": "列挙",
-        "Static": "スタティック"
+        "Static": "スタティック",
+        "Components": "コンポーネント",
+        "Get Started": "はじめに"
     }
-}   
+}

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

@@ -3489,7 +3489,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 
         if (this._width && this._width.indexOf('%') !== -1) {
             /* width in %*/
-            const width = parseInt(computed.getPropertyValue('width'), 10);
+            const width = computed.getPropertyValue('width').indexOf('%') === -1 ?
+                parseInt(computed.getPropertyValue('width'), 10) :
+                this.document.getElementById(this.nativeElement.id).offsetWidth;
+
             if (Number.isFinite(width) && width !== this.calcWidth) {
                 this.calcWidth = width;
 

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

@@ -25,7 +25,7 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => {
                 BrowserAnimationsModule,
                 IgxTreeGridModule]
         })
-        .compileComponents();
+            .compileComponents();
     }));
 
     describe('Child Collection', () => {
@@ -286,7 +286,6 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => {
         });
 
         it('should update current page when \'collapseAll\' ', () => {
-            pending('Tree Grid issue: curent page is not updated when collapseAll');
             // Test prerequisites
             treeGrid.paging = true;
             treeGrid.perPage = 4;
@@ -573,7 +572,6 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => {
         });
 
         it('should update current page when \'collapseAll\' ', () => {
-            pending('Tree Grid issue: curent page is not updated when collapseAll');
             // Test prerequisites
             treeGrid.paging = true;
             treeGrid.perPage = 2;
@@ -596,8 +594,8 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => {
             treeGrid.collapseAll();
             fix.detectChanges();
 
-            // Verify current page is the first one and only root rows are visible.
-            verifyGridPager(fix, 2, '1', '1 of 2', [true, true, false, false]);
+            // Verify current page is the last one and only root rows are visible.
+            verifyGridPager(fix, 1, '10', '2 of 2', [false, false, true, true]);
             expect(treeGrid.totalPages).toBe(2);
         });
     });
@@ -618,7 +616,7 @@ describe('Row editing expanding/collapsing', () => {
                 NoopAnimationsModule,
                 IgxTreeGridModule]
         })
-        .compileComponents();
+            .compileComponents();
     }));
 
     beforeEach(() => {

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

@@ -234,18 +234,23 @@ export class IgxTreeGridPagingPipe implements PipeTransform {
     }
 
     public transform(collection: ITreeGridRecord[], page = 0, perPage = 15, id: string, pipeTrigger: number): ITreeGridRecord[] {
-        if (!this.gridAPI.get(id).paging) {
+        const grid: IgxTreeGridComponent = this.gridAPI.get(id) as IgxTreeGridComponent;
+        if (!grid.paging) {
             return collection;
         }
 
+        const len = collection.length;
+        const totalPages = Math.ceil(len / perPage);
+
         const state = {
-            index: page,
+            index: (totalPages > 0 && page >= totalPages) ? totalPages - 1 : page,
             recordsPerPage: perPage
         };
 
         const result: ITreeGridRecord[] = DataUtil.page(cloneArray(collection), state);
+        grid.pagingState = state;
+        (grid as any)._page = state.index;
 
-        this.gridAPI.get(id).pagingState = state;
         return result;
     }
 }