Merge branch '7.2.x' into SKrastev/fix-4209

Author: mpavlinov

CHANGELOG.md

@@ -2,13 +2,16 @@
 
 All notable changes for each version of this project will be documented in this file.
 
-## 7.2.2
+# 7.2.2
+- **Components' Display Type** - All components now have their CSS display property explicitly set on the host element to ensure width, padding, and margins are applied when set directly on the host selectors.
 - **Themes** 
     - Add support for gradients and images as values for component themes via the component theme functions.
     - `Palettes` - added surface color to the palette. The surface color is used by cards, pickers, dialog windows, etc. as the default background.
 
 ## 7.2.1
-- **Feature** Column Hiding and Column Pinning components now expose a `disableFilter` property which allows hiding the filter columns input from the UI.
+- `igxGrid`
+    - **Breaking Change** The `groupsRecords` property now only returns the visible tree and does not include groups that are children of collapsed parents.
+    - **Feature** Column Hiding and Column Pinning components now expose a `disableFilter` property which allows hiding the filter columns input from the UI.
 
 ### Improvements
 - igxSelect - select-positioning-strategy code cleanup #4019

ROADMAP.md

@@ -1,26 +1,20 @@
 # Roadmap - Ignite UI for Angular
 
 # Current Milestone
- 
 
-## Milestone 6 (Due March 8th, 2019)
 
-1. Hierarchical Grid #827 
-2. **[DROPPED]** igxGrid rendering strategies (like record-based rendering) #2384
-3. Auto-complete (inline editable) #3585
-4. Excel Style Filtering #3592
-5. Inline date and time pickers (with drop down/toggle) #3034 #2337
-6. igxSelect Component #3148
+## Milestone 7 (Due May 1st, 2019) 
+1. Multi-cell Selection #3915
+2. Grid Multi-Row Layout 
+3. Grid Row Dragging 
 
 
-## Further Down the line
+## Going down the road
 
 1. Advanced Filtering
 2. Row-pinning
 3. Column Groups expand/collapse, with column grouping templates
 4. Visual Cell merging 
-5. Multi-cell Selection #3915
-6. Grid Multi-Row Layout 
 
 
 # Previous Milestones
@@ -90,3 +84,12 @@
 2. **[DONE]** Grid GroupBy summaries
 3. **[DONE]** Banner Component [issue](https://github.com/IgniteUI/igniteui-angular/issues/2672)
 4. **[DONE]** Toolbar Templatable and NavBar Templatable
+
+## Milestone 6 (Due March 8th, 2019)
+
+1. **[DONE]** Hierarchical Grid #827 
+2. **[DROPPED]** igxGrid rendering strategies (like record-based rendering) #2384
+3. **[DONE]** Auto-complete (inline editable) #3585
+4. **[DONE]** Excel Style Filtering #3592
+5. **[DONE]** Inline date and time pickers (with drop down/toggle) #3034 #2337
+6. **[DONE]** igxSelect Component #3148

projects/igniteui-angular/package.json

@@ -16,8 +16,16 @@
     "angular6",
     "UI components",
     "grid",
+    "data table",
+    "tree grid",
+    "tree table",
+    "hierarchical grid",
+    "hierarchical table",
     "combo",
     "drop down",
+    "select",
+    "auto complete",
+    "autocomplete",
     "list",
     "tabs",
     "calendar",
@@ -52,6 +60,8 @@
     "slider",
     "toast",
     "snackbar",
+    "banner",
+    "expansion panel",
     "excel export",
     "csv export"
   ],

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

@@ -43,7 +43,8 @@ export enum Direction { NONE, NEXT, PREV }
     templateUrl: 'carousel.component.html',
     styles: [`
     :host {
-        outline-style: none
+        display: block;
+        outline-style: none;
     }`]
 })
 

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -25,7 +25,7 @@
             <ng-content select="igx-hint, [igxHint]"></ng-content>
         </ng-container>
     <input igxInput #comboInput name="comboInput" type="text" [value]="value" readonly [placeholder]="placeholder"
-        [disabled]="disabled" />
+        [disabled]="disabled" (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -264,7 +264,7 @@ describe('igxCombo', () => {
             fix.detectChanges();
             expect(document.activeElement).toEqual(combo.searchInput.nativeElement);
             expect(combo.collapsed).toBeFalsy();
-            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'ArrowDown'}));
+            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
             fix.detectChanges();
             expect(dropdown.focusedItem).toBeTruthy();
             expect(dropdown.focusedItem.itemIndex).toEqual(0);
@@ -274,7 +274,7 @@ describe('igxCombo', () => {
             tick();
             fix.detectChanges();
             expect(document.activeElement).toEqual(combo.searchInput.nativeElement);
-            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'ArrowDown'}));
+            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
             fix.detectChanges();
             expect(dropdown.focusedItem).toBeTruthy();
             expect(dropdown.focusedItem.itemIndex).toEqual(0);
@@ -293,7 +293,7 @@ describe('igxCombo', () => {
             expect(IgxDropDownBase.prototype.navigatePrev).toHaveBeenCalledTimes(1);
         }));
 
-        it('Should properly call dropdown navigateNext with virutal items', ( async () => {
+        it('Should properly call dropdown navigateNext with virutal items', (async () => {
             const fix = TestBed.createComponent(IgxComboSampleComponent);
             fix.detectChanges();
             const combo = fix.componentInstance.combo;
@@ -463,19 +463,19 @@ describe('igxCombo', () => {
             spyOn(combo, 'selectAllItems');
             spyOn(combo, 'toggle');
             spyOn(combo.dropdown, 'onFocus').and.callThrough();
-            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'A'}));
+            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'A' }));
             combo.handleKeyUp(new KeyboardEvent('keyup', {}));
             expect(combo.selectAllItems).toHaveBeenCalledTimes(0);
             expect(combo.dropdown.onFocus).toHaveBeenCalledTimes(0);
-            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'Enter'}));
+            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'Enter' }));
             expect(combo.selectAllItems).toHaveBeenCalledTimes(0);
             spyOnProperty(combo, 'filteredData', 'get').and.returnValue([1]);
-            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'Enter'}));
+            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'Enter' }));
             expect(combo.selectAllItems).toHaveBeenCalledTimes(0);
-            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'ArrowDown'}));
+            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
             expect(combo.selectAllItems).toHaveBeenCalledTimes(0);
             expect(combo.dropdown.onFocus).toHaveBeenCalledTimes(1);
-            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'Escape'}));
+            combo.handleKeyUp(new KeyboardEvent('keyup', { key: 'Escape' }));
             expect(combo.toggle).toHaveBeenCalledTimes(1);
         }));
         it('Dropdown button should open/close dropdown list', fakeAsync(() => {
@@ -1384,7 +1384,7 @@ describe('igxCombo', () => {
             fixture.detectChanges();
             const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
             const verifyOnSelectionChangeEventIsFired = function (itemIndex: number) {
-                const dropdownItems =  fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROPDOWNLISTITEM));
+                const dropdownItems = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROPDOWNLISTITEM));
                 const checkbox = dropdownItems[itemIndex];
                 checkbox.triggerEventHandler('click', mockEvent);
                 fixture.detectChanges();
@@ -1545,21 +1545,17 @@ describe('igxCombo', () => {
 
     describe('Rendering tests: ', () => {
         it('Should apply all appropriate classes on combo initialization', () => {
-            const defaultComboWidth = '100%';
-            const defaultComboDDWidth = '100%';
             const fix = TestBed.createComponent(IgxComboScrollTestComponent);
             fix.detectChanges();
 
             const comboWrapper = fix.nativeElement.querySelector(CSS_CLASS_COMBO);
             expect(comboWrapper).not.toBeNull();
-            expect(comboWrapper.style.width).toEqual(defaultComboWidth);
             expect(comboWrapper.attributes.getNamedItem('ng-reflect-placeholder').nodeValue).toEqual('Items');
             expect(comboWrapper.attributes.getNamedItem('ng-reflect-data').nodeValue).toEqual('Item 1,Item 2,Item 3');
             expect(comboWrapper.attributes.getNamedItem('ng-reflect-filterable')).toBeTruthy();
             expect(comboWrapper.childElementCount).toEqual(2); // Input Group + Dropdown
             expect(comboWrapper.attributes.getNamedItem('class').nodeValue).toEqual(CSS_CLASS_COMBO);
             expect(comboWrapper.attributes.getNamedItem('role').nodeValue).toEqual('combobox');
-            expect(comboWrapper.style.width).toEqual(defaultComboWidth);
             expect(comboWrapper.attributes.getNamedItem('aria-haspopup').nodeValue).toEqual('listbox');
             expect(comboWrapper.attributes.getNamedItem('aria-expanded').nodeValue).toEqual('false');
             expect(comboWrapper.attributes.getNamedItem('aria-owns').nodeValue).toEqual(fix.componentInstance.combo.dropdown.id);
@@ -1602,13 +1598,11 @@ describe('igxCombo', () => {
             const dropDownElement = comboWrapper.children[1];
             expect(dropDownElement.classList.contains(CSS_CLASS_COMBO_DROPDOWN)).toBeTruthy();
             expect(dropDownElement.classList.contains(CSS_CLASS_DROPDOWN)).toBeTruthy();
-            expect(dropDownElement.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(defaultComboDDWidth);
             expect(dropDownElement.childElementCount).toEqual(1);
 
             const dropDownList = dropDownElement.children[0];
             expect(dropDownList.classList.contains(CSS_CLASS_DROPDOWNLIST)).toBeTruthy();
             expect(dropDownList.classList.contains('igx-toggle--hidden')).toBeTruthy();
-            expect(dropDownList.style.width).toEqual(defaultComboDDWidth);
             expect(dropDownList.childElementCount).toEqual(0);
         });
         it('Should render aria attribute properly', fakeAsync(() => {
@@ -2070,7 +2064,7 @@ describe('igxCombo', () => {
             verifyComboData();
             // index is at bottom
             expect(combo.dropdown.verticalScrollContainer.state.startIndex + combo.dropdown.verticalScrollContainer.state.chunkSize - 1)
-            .toEqual(productIndex);
+                .toEqual(productIndex);
             await wait(20);
 
             productIndex = 485;
@@ -2080,7 +2074,7 @@ describe('igxCombo', () => {
             verifyComboData();
             // index is at bottom
             expect(combo.dropdown.verticalScrollContainer.state.startIndex + combo.dropdown.verticalScrollContainer.state.chunkSize - 1)
-            .toEqual(productIndex);
+                .toEqual(productIndex);
             await wait(20);
 
             productIndex = 873;
@@ -2883,7 +2877,7 @@ describe('igxCombo', () => {
             expect(combo.value).toEqual('My New Custom Item');
         }));
 
-       it('Disable/Enable filtering at runtime', fakeAsync(() => {
+        it('Disable/Enable filtering at runtime', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxComboInputTestComponent);
             fix.detectChanges();
             const combo = fix.componentInstance.combo;
@@ -2954,7 +2948,7 @@ describe('igxCombo', () => {
 
     describe('Form control tests: ', () => {
 
-       it('Should properly initialize when used as a form control', fakeAsync(() => {
+        it('Should properly initialize when used as a form control', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxComboFormComponent);
             fix.detectChanges();
             const combo = fix.componentInstance.combo;
@@ -2969,8 +2963,47 @@ describe('igxCombo', () => {
             clearButton.click();
             fix.detectChanges();
             expect(combo.valid).toEqual(IgxComboState.INVALID);
+
+            combo.onBlur();
+            fix.detectChanges();
+            expect(combo.valid).toEqual(IgxComboState.INVALID);
+
             combo.selectItems([combo.dropdown.items[0], combo.dropdown.items[1]]);
             expect(combo.valid).toEqual(IgxComboState.VALID);
+
+            combo.onBlur();
+            fix.detectChanges();
+            expect(combo.valid).toEqual(IgxComboState.INITIAL);
+        }));
+
+        it('Should properly initialize when used as a form control - without validators', fakeAsync(() => {
+            const fix = TestBed.createComponent(IgxComboFormComponent);
+            fix.detectChanges();
+            const combo = fix.componentInstance.combo;
+            const form: FormGroup = fix.componentInstance.reactiveForm;
+            form.controls.townCombo.validator = null;
+            expect(combo).toBeDefined();
+            const comboFormReference = fix.componentInstance.reactiveForm.controls.townCombo;
+            expect(comboFormReference).toBeDefined();
+            expect(combo.selectedItems()).toEqual(comboFormReference.value);
+            expect(combo.selectedItems().length).toEqual(1);
+            expect(combo.selectedItems()[0].field).toEqual('Connecticut');
+            expect(combo.valid).toEqual(IgxComboState.INITIAL);
+            const clearButton = fix.debugElement.query(By.css('.' + CSS_CLASS_CLEARBUTTON)).nativeElement;
+            clearButton.click();
+            fix.detectChanges();
+            expect(combo.valid).toEqual(IgxComboState.INITIAL);
+
+            combo.onBlur();
+            fix.detectChanges();
+            expect(combo.valid).toEqual(IgxComboState.INITIAL);
+
+            combo.selectItems([combo.dropdown.items[0], combo.dropdown.items[1]]);
+            expect(combo.valid).toEqual(IgxComboState.INITIAL);
+
+            combo.onBlur();
+            fix.detectChanges();
+            expect(combo.valid).toEqual(IgxComboState.INITIAL);
         }));
 
         it('Should be possible to be enabled/disabled when used as a form control', () => {
@@ -2989,6 +3022,7 @@ describe('igxCombo', () => {
             combo.comboInput.nativeElement.click();
             fix.detectChanges();
             expect(combo.onInputClick).toHaveBeenCalledTimes(1);
+            combo.comboInput.nativeElement.blur();
 
             form.disable();
             // Disabling the form disables all of the controls in it
@@ -3001,6 +3035,7 @@ describe('igxCombo', () => {
             combo.comboInput.nativeElement.click();
             fix.detectChanges();
             expect(combo.onInputClick).toHaveBeenCalledTimes(1);
+            combo.comboInput.nativeElement.blur();
 
             // Can enabling the form re-enables all of the controls in it
             form.enable();