From 7b659618cb5f0d7b1afa0ece606b48c57304693d Mon Sep 17 00:00:00 2001 From: astaev Date: Mon, 26 Nov 2018 16:57:42 +0200 Subject: [PATCH 1/7] fix(#3108): Refresh current page when collapseAll --- .../src/lib/grids/tree-grid/tree-grid.pipes.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts index 2ccd21649ac..60269ce390d 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts @@ -234,18 +234,27 @@ 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; + let totalPages = 1; + + if (collection.length >= 0) { + totalPages = Math.ceil(len / perPage); + } + const state = { - index: page, + index: (page >= totalPages - 1) ? 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; } } From ce5e4bfe3f8c204dd3a9cc7c783be8d548f7aaf0 Mon Sep 17 00:00:00 2001 From: astaev Date: Mon, 26 Nov 2018 17:23:05 +0200 Subject: [PATCH 2/7] test(treeGrid): Activate test for collapseAll with paging #3108 --- .../src/lib/grids/tree-grid/tree-grid-expanding.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts index 767798dcfb6..662af3b7481 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts @@ -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; From 9d4645643400b5f8987791704cc12109ea55870e Mon Sep 17 00:00:00 2001 From: astaev Date: Tue, 27 Nov 2018 08:56:39 +0200 Subject: [PATCH 3/7] test(treeGrid): Fix the test for collpaseAll #3108 --- .../src/lib/grids/tree-grid/tree-grid-expanding.spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts index 662af3b7481..0a2cd25548b 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts +++ b/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', () => { @@ -594,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); }); }); @@ -616,7 +616,7 @@ describe('Row editing expanding/collapsing', () => { NoopAnimationsModule, IgxTreeGridModule] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { From 2cc3c6252940cab526702d4ba4efd9000f120c52 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Tue, 27 Nov 2018 09:37:03 +0200 Subject: [PATCH 4/7] fix(api-doc): translate header strings sassdoc/typedoc Closes #3161 --- extras/docs/themes/sassdoc/index.js | 12 +++++++++++- extras/docs/themes/sassdoc/views/index.hbs | 3 +-- extras/docs/themes/sassdoc/views/partials/header.hbs | 4 ++-- extras/docs/themes/typedoc/src/partials/header.hbs | 4 ++-- extras/template/strings/shell-strings.json | 6 ++++-- 5 files changed, 20 insertions(+), 9 deletions(-) diff --git a/extras/docs/themes/sassdoc/index.js b/extras/docs/themes/sassdoc/index.js index 797394d1dbd..a6c635370fe 100644 --- a/extras/docs/themes/sassdoc/index.js +++ b/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; } } }; diff --git a/extras/docs/themes/sassdoc/views/index.hbs b/extras/docs/themes/sassdoc/views/index.hbs index e558fc60194..2d6134a4bd9 100644 --- a/extras/docs/themes/sassdoc/views/index.hbs +++ b/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 }} -
@@ -139,7 +138,7 @@
{{! ! If your theme needs some JavaScript, feel free to create a JS file in `assets/js/` folder diff --git a/extras/docs/themes/sassdoc/views/partials/header.hbs b/extras/docs/themes/sassdoc/views/partials/header.hbs index 8ecb55a4ba5..19f51f9eefa 100644 --- a/extras/docs/themes/sassdoc/views/partials/header.hbs +++ b/extras/docs/themes/sassdoc/views/partials/header.hbs @@ -14,12 +14,12 @@ diff --git a/extras/docs/themes/typedoc/src/partials/header.hbs b/extras/docs/themes/typedoc/src/partials/header.hbs index e18f6947ffe..7df1b487cf2 100644 --- a/extras/docs/themes/typedoc/src/partials/header.hbs +++ b/extras/docs/themes/typedoc/src/partials/header.hbs @@ -14,12 +14,12 @@ diff --git a/extras/template/strings/shell-strings.json b/extras/template/strings/shell-strings.json index 764b879686c..c3f857cba24 100644 --- a/extras/template/strings/shell-strings.json +++ b/extras/template/strings/shell-strings.json @@ -21,6 +21,8 @@ "Class": "クラス", "Interface": "インターフェイス", "Enumeration": "列挙", - "Static": "スタティック" + "Static": "スタティック", + "Components": "コンポーネント", + "Get Started": "はじめに" } -} \ No newline at end of file +} From 815b9007e7c3ec3e9d6397fcef6a664db8bebe3a Mon Sep 17 00:00:00 2001 From: astaev Date: Tue, 27 Nov 2018 11:51:23 +0200 Subject: [PATCH 5/7] fix(treeGrid): update paging pipe when collapseAll #3108 --- .../igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts index 60269ce390d..16917495d1d 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts @@ -247,7 +247,7 @@ export class IgxTreeGridPagingPipe implements PipeTransform { } const state = { - index: (page >= totalPages - 1) ? totalPages - 1 : page, + index: (totalPages > 0 && page >= totalPages) ? totalPages - 1 : page, recordsPerPage: perPage }; From 765e1da98e7e1c3f0252e8afab36371e3a1457a5 Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Tue, 27 Nov 2018 13:18:54 +0200 Subject: [PATCH 6/7] feat(tree-grid): remove unnecessary length check #3108 --- .../src/lib/grids/tree-grid/tree-grid.pipes.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts index 16917495d1d..459b3f91f5b 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts @@ -240,11 +240,7 @@ export class IgxTreeGridPagingPipe implements PipeTransform { } const len = collection.length; - let totalPages = 1; - - if (collection.length >= 0) { - totalPages = Math.ceil(len / perPage); - } + const totalPages = Math.ceil(len / perPage); const state = { index: (totalPages > 0 && page >= totalPages) ? totalPages - 1 : page, From ff7f8f031f5488adb6e43e8e6d6c81e77720240a Mon Sep 17 00:00:00 2001 From: Hristo Popov Date: Tue, 27 Nov 2018 16:23:10 +0200 Subject: [PATCH 7/7] Calculating grid's width when initialized with % based on its offsetWidth in IE11(master) (#3097) * fix(grid): Calculating grid's width based on its offsetWidth in IE11. #3095 * fix(igxOverlay): take element, not child, in get overlay info, #3131 * test(igxOverlay): add tests for rendering components, #3131 * test(igxOverlay): fix failing tests, call CDR after component attached, #3131 * docs(*): update CHANGELOG.md with 6.2.1 changes (cherry picked from commit 54e14310c55ac8eea30fa9ac5386d72454cb7754) # Conflicts: # CHANGELOG.md * docs(*): Add dark theme to 7.0.0 changelog --- CHANGELOG.md | 49 +++++++- .../src/lib/grids/grid-base.component.ts | 5 +- .../src/lib/services/overlay/overlay.spec.ts | 118 +++++++++++++++--- .../src/lib/services/overlay/overlay.ts | 5 +- 4 files changed, 155 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c3aaad6f5d..a5e9f17f66f 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 08b77363e98..8ee3858489d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/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; diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts index 4504574694d..54bdacf30b7 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts @@ -4,7 +4,8 @@ import { Inject, NgModule, ViewChild, - ComponentRef + ComponentRef, + HostBinding } from '@angular/core'; import { async as asyncWrapper, TestBed, fakeAsync, tick, async } from '@angular/core/testing'; import { BrowserModule } from '@angular/platform-browser'; @@ -32,6 +33,9 @@ import { scaleInVerTop, scaleOutVerTop } from 'projects/igniteui-angular/src/lib import { UIInteractions } from '../../test-utils/ui-interactions.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; +import { IgxCalendarComponent, IgxCalendarModule } from '../../calendar/index'; +import { IgxAvatarComponent, IgxAvatarModule } from '../../avatar/avatar.component'; +import { IgxDatePickerComponent, IgxDatePickerModule } from '../../date-picker/date-picker.component'; const CLASS_OVERLAY_CONTENT = 'igx-overlay__content'; const CLASS_OVERLAY_CONTENT_MODAL = 'igx-overlay__content--modal'; @@ -872,7 +876,7 @@ describe('igxOverlay', () => { const overlayDiv = document.getElementsByClassName(CLASS_OVERLAY_MAIN)[0]; const overlayWrapper = overlayDiv.children[0]; const content = overlayWrapper.firstChild; - const componentEl = content.lastChild; + const componentEl = content.lastChild.lastChild; // wrapped in 'NG-COMPONENT' expect(overlayWrapper.nodeName).toEqual('DIV'); expect(overlayWrapper.firstChild.nodeName).toEqual('DIV'); @@ -964,7 +968,7 @@ describe('igxOverlay', () => { tick(); const overlayDiv = document.getElementsByClassName(CLASS_OVERLAY_MAIN)[0]; const overlayWrapper = overlayDiv.children[0]; - const componentEl = overlayWrapper.children[0].children[0]; + const componentEl = overlayWrapper.children[0].children[0].lastElementChild; // Wrapped in 'NG-COMPONENT' const wrapperRect = overlayWrapper.getBoundingClientRect(); const componentRect = componentEl.getBoundingClientRect(); @@ -1077,7 +1081,7 @@ describe('igxOverlay', () => { tick(); const overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0]; const content = overlayWrapper.firstChild; - const componentEl = content.lastChild; + const componentEl = content.lastChild.lastChild; // wrapped in 'NG-COMPONENT' expect(overlayWrapper.nodeName).toEqual('DIV'); expect(overlayWrapper.firstChild.nodeName).toEqual('DIV'); expect(componentEl.nodeName).toEqual('DIV'); @@ -1449,7 +1453,7 @@ describe('igxOverlay', () => { fix.detectChanges(); const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT); - const wrapperContent = wrappers[wrappers.length - 1]; + const wrapperContent = wrappers[wrappers.length - 1].lastElementChild; // wrapped in NG-COMPONENT expect(wrapperContent.children.length).toEqual(1); expect(wrapperContent.lastElementChild.getAttribute('style')) .toEqual('position: absolute; width:100px; height: 100px; background-color: red'); @@ -1472,13 +1476,13 @@ describe('igxOverlay', () => { fix.detectChanges(); const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT); - const wrapperContent = wrappers[wrappers.length - 1] as HTMLElement; + const wrapperContent = wrappers[wrappers.length - 1] as HTMLElement; // wrapped in NG-COMPONENT const expectedStyle = 'position: absolute; width:100px; height: 100px; background-color: red'; - expect(wrapperContent.lastElementChild.getAttribute('style')).toEqual(expectedStyle); + expect(wrapperContent.lastElementChild.lastElementChild.getAttribute('style')).toEqual(expectedStyle); const buttonLeft = buttonElement.offsetLeft; const buttonTop = buttonElement.offsetTop; - const expectedLeft = buttonLeft - wrapperContent.lastElementChild.clientWidth; - const expectedTop = buttonTop - wrapperContent.lastElementChild.clientHeight; + const expectedLeft = buttonLeft - wrapperContent.lastElementChild.lastElementChild.clientWidth; + const expectedTop = buttonTop - wrapperContent.lastElementChild.lastElementChild.clientHeight; const wrapperLeft = wrapperContent.offsetLeft; const wrapperTop = wrapperContent.offsetTop; expect(wrapperTop).toEqual(expectedTop); @@ -1710,8 +1714,10 @@ describe('igxOverlay', () => { closeOnOutsideClick: false }; fix.componentInstance.overlay.show(SimpleDynamicComponent, overlaySettings); + fix.detectChanges(); tick(); fix.componentInstance.overlay.show(SimpleDynamicComponent, overlaySettings); + fix.detectChanges(); tick(); const buttonRect = button.getBoundingClientRect(); const overlayWrapper_1 = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0]; @@ -2135,7 +2141,7 @@ describe('igxOverlay', () => { const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT); const wrapperContent = wrappers[wrappers.length - 1] as HTMLElement; const expectedStyle = 'position: absolute; width:100px; height: 100px; background-color: red'; - expect(wrapperContent.lastElementChild.getAttribute('style')).toEqual(expectedStyle); + expect(wrapperContent.lastElementChild.lastElementChild.getAttribute('style')).toEqual(expectedStyle); const buttonLeft = buttonElement.offsetLeft; const buttonTop = buttonElement.offsetTop; const expectedLeft = buttonLeft + buttonElement.clientWidth; // To the right of the button @@ -2181,12 +2187,12 @@ describe('igxOverlay', () => { fix.detectChanges(); const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT); - const wrapperContent = wrappers[wrappers.length - 1] as HTMLElement; + const wrapperContent = wrappers[wrappers.length - 1] as HTMLElement; // wrapper in NG-COMPONENT const expectedStyle = 'position: absolute; width:100px; height: 100px; background-color: red'; - expect(wrapperContent.lastElementChild.getAttribute('style')).toEqual(expectedStyle); + expect(wrapperContent.lastElementChild.lastElementChild.getAttribute('style')).toEqual(expectedStyle); const buttonLeft = buttonElement.offsetLeft; const buttonTop = buttonElement.offsetTop; - const expectedLeft = buttonLeft - wrapperContent.lastElementChild.clientWidth; // To the left of the button + const expectedLeft = buttonLeft - wrapperContent.lastElementChild.lastElementChild.clientWidth; // To the left of the button const expectedTop = buttonTop + buttonElement.clientHeight; // Bottom of the button const wrapperLeft = wrapperContent.offsetLeft; const wrapperTop = wrapperContent.offsetTop; @@ -2231,7 +2237,7 @@ describe('igxOverlay', () => { const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT); const wrapperContent = wrappers[wrappers.length - 1] as HTMLElement; const expectedStyle = 'position: absolute; width:100px; height: 100px; background-color: red'; - expect(wrapperContent.lastElementChild.getAttribute('style')).toEqual(expectedStyle); + expect(wrapperContent.lastElementChild.lastElementChild.getAttribute('style')).toEqual(expectedStyle); const buttonLeft = buttonElement.offsetLeft; const buttonTop = buttonElement.offsetTop; const expectedLeft = buttonLeft + buttonElement.clientWidth; // To the right of the button @@ -2543,12 +2549,70 @@ describe('igxOverlay', () => { tick(); expect(overlay.hide).toHaveBeenCalledTimes(1); })); + + }); + describe('Integration tests p3 (IgniteUI components): ', () => { + beforeAll(() => { + TestBed.resetTestingModule(); + }); + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [IgxToggleModule, DynamicModule, NoopAnimationsModule, IgxComponentsModule], + declarations: DIRECTIVE_COMPONENTS + }).compileComponents(); + })); + it(`Should properly be able to render components that have no initial content (IgxCalendar, IgxAvatar)`, fakeAsync(() => { + const fixture = TestBed.createComponent(SimpleRefComponent); + fixture.detectChanges(); + const IGX_CALENDAR_CLASS = `.igx-calendar`; + const IGX_AVATAR_CLASS = `.igx-avatar`; + const IGX_DATEPICKER_CLASS = `.igx-date-picker`; + const overlay = fixture.componentInstance.overlay; + expect(document.querySelectorAll((IGX_CALENDAR_CLASS)).length).toEqual(0); + expect(document.querySelectorAll((IGX_AVATAR_CLASS)).length).toEqual(0); + expect(document.querySelectorAll((IGX_DATEPICKER_CLASS)).length).toEqual(0); + overlay.show(IgxCalendarComponent); + // EXPECT + fixture.detectChanges(); + expect(document.querySelectorAll((IGX_CALENDAR_CLASS)).length).toEqual(1); + overlay.hideAll(); + tick(); + fixture.detectChanges(); + expect(document.querySelectorAll((IGX_CALENDAR_CLASS)).length).toEqual(0); + // Expect + overlay.show(IgxAvatarComponent); + fixture.detectChanges(); + expect(document.querySelectorAll((IGX_AVATAR_CLASS)).length).toEqual(1); + // Expect + overlay.hideAll(); + tick(); + fixture.detectChanges(); + expect(document.querySelectorAll((IGX_AVATAR_CLASS)).length).toEqual(0); + overlay.show(IgxDatePickerComponent); + fixture.detectChanges(); + expect(document.querySelectorAll((IGX_DATEPICKER_CLASS)).length).toEqual(1); + overlay.hideAll(); + tick(); + fixture.detectChanges(); + expect(document.querySelectorAll((IGX_DATEPICKER_CLASS)).length).toEqual(0); + // Expect + })); }); }); @Component({ + // tslint:disable-next-line:component-selector + selector: `simple-dynamic-component`, template: '
' }) -export class SimpleDynamicComponent { } +export class SimpleDynamicComponent { + @HostBinding('style.display') + public hostDisplay = 'block'; + @HostBinding('style.position') + public hostPosition = 'absolute'; + @HostBinding('style.width') + @HostBinding('style.height') + public hostDimenstions = '100px'; +} @Component({ template: '
' @@ -2563,7 +2627,16 @@ export class SimpleRefComponent { @Component({ template: '
' }) -export class SimpleBigSizeComponent { } +export class SimpleBigSizeComponent { + @HostBinding('style.display') + public hostDisplay = 'block'; + @HostBinding('style.position') + public hostPosition = 'absolute'; + @HostBinding('style.height') + public hostHeight = '1000px'; + @HostBinding('style.width') + public hostWidth = '3000px'; +} @Component({ template: ` @@ -2808,6 +2881,12 @@ const DYNAMIC_COMPONENTS = [ FlexContainerComponent ]; +const IgniteUIComponents = [ + IgxCalendarComponent, + IgxAvatarComponent, + IgxDatePickerComponent +]; + const DIRECTIVE_COMPONENTS = [ SimpleDynamicWithDirectiveComponent ]; @@ -2819,3 +2898,10 @@ const DIRECTIVE_COMPONENTS = [ entryComponents: [DYNAMIC_COMPONENTS] }) export class DynamicModule { } + +@NgModule({ + imports: [IgxCalendarModule, IgxAvatarModule, IgxDatePickerModule], + entryComponents: IgniteUIComponents +}) +export class IgxComponentsModule { +} diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts index 57e10ec361b..4fa58e6c4f2 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts @@ -159,6 +159,9 @@ export class IgxOverlayService implements OnDestroy { info.hook = this.placeElementHook(info.elementRef.nativeElement); this.moveElementToOverlay(info); + if (info.componentRef) { + info.componentRef.changeDetectorRef.detectChanges(); + } this.updateSize(info); this._overlayInfos.push(info); @@ -271,7 +274,7 @@ export class IgxOverlayService implements OnDestroy { this._appRef.attachView(dynamicComponent.hostView); // If the element is newly created from a Component, it is wrapped in 'ng-component' tag - we do not want that. - const element = dynamicComponent.location.nativeElement.lastElementChild; + const element = dynamicComponent.location.nativeElement; info.elementRef = { nativeElement: element }; info.componentRef = dynamicComponent; }