Merge branch '9.1.x' into valadzhov/textselection-directive-in-timepicker-6827-91x

Lipata · web-flow · commit cbb9468477df · 2020-08-17T17:10:21.000+03:00
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss
@@ -84,6 +84,7 @@
         display: flex;
         flex-flow: column nowrap;
         overflow-y: auto;
+        outline-style: none;
     }
 
     %column-hiding-item {
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -1945,7 +1945,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    @ContentChildren(IgxRowEditTabStopDirective)
+    @ContentChildren(IgxRowEditTabStopDirective, { descendants: true })
     public rowEditTabsCUSTOM: QueryList<IgxRowEditTabStopDirective>;
 
     /**
@@ -4635,14 +4635,37 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return 0;
     }
 
+    /**
+     * @hidden
+     */
+    protected getComputedHeight(elem) {
+        return elem.offsetHeight ? parseFloat(this.document.defaultView.getComputedStyle(elem).getPropertyValue('height')) : 0;
+    }
+    /**
+     * @hidden
+     */
+    protected getFooterHeight(): number {
+        return this.summariesHeight || this.getComputedHeight(this.tfoot.nativeElement);
+    }
+    /**
+     * @hidden
+     */
+    protected getTheadRowHeight(): number {
+        const height = this.getComputedHeight(this.theadRow.nativeElement);
+        return (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ?
+        height - this.getFilterCellHeight() :
+        height;
+    }
+
     /**
      * @hidden
      */
     protected getToolbarHeight(): number {
         let toolbarHeight = 0;
         if (this.showToolbar && this.toolbarHtml != null) {
+            const height = this.getComputedHeight(this.toolbarHtml.nativeElement);
             toolbarHeight = this.toolbarHtml.nativeElement.firstElementChild ?
-                this.toolbarHtml.nativeElement.offsetHeight : 0;
+            height : 0;
         }
         return toolbarHeight;
     }
@@ -4653,8 +4676,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     protected getPagingFooterHeight(): number {
         let pagingHeight = 0;
         if (this.footer) {
+            const height = this.getComputedHeight(this.footer.nativeElement);
             pagingHeight = this.footer.nativeElement.firstElementChild ?
-                this.footer.nativeElement.offsetHeight : 0;
+            height : 0;
         }
         return pagingHeight;
     }
@@ -4677,17 +4701,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (!this._height) {
             return null;
         }
-
-        const actualTheadRow = (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ?
-            this.theadRow.nativeElement.offsetHeight - this.getFilterCellHeight() :
-            this.theadRow.nativeElement.offsetHeight;
-        const footerHeight = this.summariesHeight || this.tfoot.nativeElement.offsetHeight - this.tfoot.nativeElement.clientHeight;
+        const actualTheadRow = this.getTheadRowHeight();
+        const footerHeight = this.getFooterHeight();
         const toolbarHeight = this.getToolbarHeight();
         const pagingHeight = this.getPagingFooterHeight();
         const groupAreaHeight = this.getGroupAreaHeight();
+        const scrHeight = this.getComputedHeight(this.scr.nativeElement);
         const renderedHeight = toolbarHeight + actualTheadRow +
             footerHeight + pagingHeight + groupAreaHeight +
-            this.scr.nativeElement.clientHeight;
+            scrHeight;
 
         let gridHeight = 0;
 
@@ -4698,13 +4720,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 const bodyHeight = this.getDataBasedBodyHeight();
                 return bodyHeight > 0 ? bodyHeight : null;
             }
-            gridHeight = parseInt(computed, 10);
+            gridHeight = parseFloat(computed);
         } else {
             gridHeight = parseInt(this._height, 10);
         }
         const height = Math.abs(gridHeight - renderedHeight);
 
-        if (height === 0 || isNaN(gridHeight)) {
+        if (Math.round(height) === 0 || isNaN(gridHeight)) {
             const bodyHeight = this.defaultTargetBodyHeight;
             return bodyHeight > 0 ? bodyHeight : null;
         }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -906,7 +906,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     protected getGroupAreaHeight(): number {
-        return this.groupArea ? this.groupArea.nativeElement.offsetHeight : 0;
+        return this.groupArea ? this.getComputedHeight(this.groupArea.nativeElement) : 0;
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/hiding/column-hiding.component.html b/projects/igniteui-angular/src/lib/grids/hiding/column-hiding.component.html
@@ -1,4 +1,4 @@
-<div class="igx-column-hiding__header">
+<div class="igx-column-hiding__header" >
     <h4 class="igx-column-hiding__header-title" *ngIf="title">{{ title }}</h4>
 
     <igx-input-group class="igx-column-hiding__header-input" *ngIf="!disableFilter">
@@ -10,7 +10,7 @@ <h4 class="igx-column-hiding__header-title" *ngIf="title">{{ title }}</h4>
     </igx-input-group>
 </div>
 
-<div class="igx-column-hiding__columns"
+<div class="igx-column-hiding__columns" tabindex="0"
     [style.max-height]="columnsAreaMaxHeight">
     <igx-checkbox
         *ngFor="let columnItem of hidableColumns"
diff --git a/projects/igniteui-angular/src/lib/grids/pinning/column-pinning.component.html b/projects/igniteui-angular/src/lib/grids/pinning/column-pinning.component.html
@@ -11,7 +11,7 @@ <h4 class="igx-column-hiding__header-title" *ngIf="title">{{ title }}</h4>
     </igx-input-group>
 </div>
 
-<div class="igx-column-hiding__columns"
+<div class="igx-column-hiding__columns" tabindex="0"
     [style.max-height]="columnsAreaMaxHeight">
     <igx-checkbox igxColumnPinningItem
         *ngFor="let columnItem of pinnableColumns"
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html
@@ -31,7 +31,7 @@
                 <span>{{ grid.hiddenColumnsText }}</span>
             </div>
         </button>
-        <igx-drop-down #columnHidingDropdown>
+        <igx-drop-down #columnHidingDropdown (onClosing)="onClosingColumnHiding($event)">
             <igx-column-hiding
                 [columns]="grid.columns"
                 [title]="grid.columnHidingTitle"
@@ -52,7 +52,7 @@
                 <span></span>
             </div>
         </button>
-        <igx-drop-down #columnPinningDropdown>
+        <igx-drop-down #columnPinningDropdown (onClosing)="onClosingColumnPinning($event)">
             <igx-column-pinning
                 [columns]="grid.columns"
                 [title]="grid.columnPinningTitle"
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts
@@ -236,7 +236,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
         @Optional() public csvExporter: IgxCsvExporterService,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
         private iconService: IgxIconService) {
-            super(_displayDensityOptions);
+        super(_displayDensityOptions);
     }
 
     private _positionSettings: PositionSettings = {
@@ -410,4 +410,28 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
             }
         }
     }
+
+    /**
+     * @hidden @internal
+     */
+    public onClosingColumnHiding(args) {
+        const activeElem = document.activeElement;
+
+        if (!args.event && activeElem !== this.grid.nativeElement &&
+            !this.columnHidingButton.nativeElement.contains(activeElem)) {
+            args.cancel = true;
+        }
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public onClosingColumnPinning(args) {
+        const activeElem = document.activeElement;
+
+        if (!args.event && activeElem !== this.grid.nativeElement &&
+            !this.columnPinningButton.nativeElement.contains(activeElem)) {
+            args.cancel = true;
+        }
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts
@@ -28,6 +28,8 @@ const CSS_CLASS_DISABLED_ITEM = 'igx-drop-down__item--disabled';
 const CSS_CLASS_FOCUSED_ITEM = 'igx-drop-down__item--focused';
 const CSS_CLASS_INPUT_GROUP_BOX = 'igx-input-group--box';
 const CSS_CLASS_INPUT_GROUP_REQUIRED = 'igx-input-group--required';
+const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid ';
+const CSS_CLASS_INPUT_GROUP_LABEL = 'igx-input-group__label';
 const CSS_CLASS_INPUT_GROUP_BORDER = 'igx-input-group--border';
 const CSS_CLASS_INPUT_GROUP_COMFORTABLE = 'igx-input-group--comfortable';
 const CSS_CLASS_INPUT_GROUP_COSY = 'igx-input-group--cosy';
@@ -456,15 +458,15 @@ describe('igxSelect', () => {
     describe('Form tests: ', () => {
         it('Should properly initialize when used as a reactive form control - with validators', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxSelectReactiveFormComponent);
-            const inputGroupWithRequiredAsterisk = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+            const inputGroupIsRequiredClass = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
             fix.detectChanges();
             const selectComp = fix.componentInstance.select;
             const selectFormReference = fix.componentInstance.reactiveForm.controls.optionsSelect;
             expect(selectFormReference).toBeDefined();
             expect(selectComp).toBeDefined();
             expect(selectComp.selectedItem).toBeUndefined();
             expect(selectComp.value).toEqual('');
-            expect(inputGroupWithRequiredAsterisk).toBeDefined();
+            expect(inputGroupIsRequiredClass).toBeDefined();
             expect(selectComp.input.valid).toEqual(IgxInputState.INITIAL);
 
             selectComp.toggle();
@@ -492,18 +494,57 @@ describe('igxSelect', () => {
 
         it('Should properly initialize when used as a reactive form control - without initial validators', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxSelectReactiveFormComponent);
-
-            let inputGroupWithRequiredAsterisk = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
             fix.detectChanges();
+            // 1) check if label's --required class and its asterisk are applied
+            const dom = fix.debugElement;
             const selectComp = fix.componentInstance.select;
             const formGroup: FormGroup = fix.componentInstance.reactiveForm;
+            let inputGroupIsRequiredClass = dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+            let inputGroupInvalidClass = dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_INVALID));
+            // interaction test - expect actual asterisk
+            // The only way to get a pseudo elements like :before OR :after is to use getComputedStyle(element [, pseudoElt]),
+            // as these are not in the actual DOM
+            let asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
+            expect(asterisk).toBe('"*"');
+            expect(inputGroupIsRequiredClass).toBeDefined();
+            expect(inputGroupIsRequiredClass).not.toBeNull();
+
+            // 2) check that input group's --invalid class is NOT applied
+            expect(inputGroupInvalidClass).toBeNull();
+
+            // interaction test - markAsTouched + open&close so the --invalid and --required classes are applied
+            fix.debugElement.componentInstance.markAsTouched();
+            const inputGroup = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP));
+            inputGroup.nativeElement.click();
+            const toggleBtn = fix.debugElement.query(By.css('.' + CSS_CLASS_TOGGLE_BUTTON));
+            toggleBtn.nativeElement.click();
+            tick();
+            fix.detectChanges();
+            expect(selectComp.collapsed).toEqual(true);
+
+            inputGroupInvalidClass = dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_INVALID));
+            expect(inputGroupInvalidClass).not.toBeNull();
+            expect(inputGroupInvalidClass).not.toBeUndefined();
+
+            inputGroupIsRequiredClass = dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+            expect(inputGroupIsRequiredClass).not.toBeNull();
+            expect(inputGroupIsRequiredClass).not.toBeUndefined();
+
+            // 3) Check if the input group's --invalid and --required classes are removed when validator is dynamically cleared
             fix.componentInstance.removeValidators(formGroup);
+            fix.detectChanges();
+            tick();
+
+            inputGroupIsRequiredClass = dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
             const selectFormReference = fix.componentInstance.reactiveForm.controls.optionsSelect;
+            // interaction test - expect no asterisk
+            asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
             expect(selectFormReference).toBeDefined();
             expect(selectComp).toBeDefined();
             expect(selectComp.selectedItem).toBeUndefined();
             expect(selectComp.value).toEqual('');
-            expect(inputGroupWithRequiredAsterisk).toBeNull();
+            expect(inputGroupIsRequiredClass).toBeNull();
+            expect(asterisk).toBe('none');
             expect(selectComp.input.valid).toEqual(IgxInputState.INITIAL);
 
             selectComp.onBlur();
@@ -523,18 +564,42 @@ describe('igxSelect', () => {
 
             expect(selectComp.input.valid).toEqual(IgxInputState.INITIAL);
 
+            // Re-add all Validators
             fix.componentInstance.addValidators(formGroup);
             fix.detectChanges();
-            inputGroupWithRequiredAsterisk = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
-            expect(inputGroupWithRequiredAsterisk).toBeDefined();
 
+            inputGroupIsRequiredClass = dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+            expect(inputGroupIsRequiredClass).toBeDefined();
+            expect(inputGroupIsRequiredClass).not.toBeNull();
+            expect(inputGroupIsRequiredClass).not.toBeUndefined();
+            // interaction test - expect actual asterisk
+            asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
+            expect(asterisk).toBe('"*"');
+
+            // 4) Should NOT remove asterisk, when remove validators on igxSelect with required HTML attribute set(edge case)
+            // set required HTML attribute
+            inputGroup.parent.nativeElement.setAttribute('required', '');
+            // Re-add all Validators
+            fix.componentInstance.addValidators(formGroup);
+            fix.detectChanges();
+            // update and clear validators
+            fix.componentInstance.removeValidators(formGroup);
+            fix.detectChanges();
+            tick();
+            // expect asterisk
+            asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
+            expect(asterisk).toBe('"*"');
+            inputGroupIsRequiredClass = dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+            expect(inputGroupIsRequiredClass).toBeDefined();
+            expect(inputGroupIsRequiredClass).not.toBeNull();
+            expect(inputGroupIsRequiredClass).not.toBeUndefined();
         }));
 
 
         it('Should properly initialize when used as a form control - with initial validators', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxSelectTemplateFormComponent);
 
-            let inputGroupWithRequiredAsterisk = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+            let inputGroupIsRequiredClass = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
             fix.detectChanges();
             const selectComp = fix.componentInstance.select;
             const selectFormReference = fix.componentInstance.ngForm.form;
@@ -544,7 +609,7 @@ describe('igxSelect', () => {
             fix.detectChanges();
             expect(selectComp.selectedItem).toBeUndefined();
             expect(selectComp.value).toBeNull();
-            expect(inputGroupWithRequiredAsterisk).toBeDefined();
+            expect(inputGroupIsRequiredClass).toBeDefined();
             expect(selectComp.input.valid).toEqual(IgxInputState.INITIAL);
 
             selectComp.toggle();
@@ -570,14 +635,14 @@ describe('igxSelect', () => {
 
             fix.componentInstance.isRequired = false;
             fix.detectChanges();
-            inputGroupWithRequiredAsterisk = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
-            expect(inputGroupWithRequiredAsterisk).toBeNull();
+            inputGroupIsRequiredClass = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+            expect(inputGroupIsRequiredClass).toBeNull();
         }));
 
         it('Should properly initialize when used as a form control - without initial validators', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxSelectTemplateFormComponent);
 
-            let inputGroupWithRequiredAsterisk = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+            let inputGroupIsRequiredClass = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
             fix.detectChanges();
             const selectComp = fix.componentInstance.select;
             const selectFormReference = fix.componentInstance.ngForm.form;
@@ -586,7 +651,7 @@ describe('igxSelect', () => {
             expect(selectComp).toBeDefined();
             expect(selectComp.selectedItem).toBeUndefined();
             expect(selectComp.value).toBeUndefined();
-            expect(inputGroupWithRequiredAsterisk).toBeNull();
+            expect(inputGroupIsRequiredClass).toBeNull();
             expect(selectComp.input.valid).toEqual(IgxInputState.INITIAL);
 
             selectComp.onBlur();
@@ -608,8 +673,8 @@ describe('igxSelect', () => {
 
             fix.componentInstance.isRequired = true;
             fix.detectChanges();
-            inputGroupWithRequiredAsterisk = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
-            expect(inputGroupWithRequiredAsterisk).toBeDefined();
+            inputGroupIsRequiredClass = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+            expect(inputGroupIsRequiredClass).toBeDefined();
         }));
 
         it('Should have correctly bound focus and blur handlers', () => {
@@ -2796,6 +2861,17 @@ class IgxSelectReactiveFormComponent {
             form.get(key).updateValueAndValidity();
         }
     }
+
+    public markAsTouched() {
+        if (!this.reactiveForm.valid) {
+            for (const key in this.reactiveForm.controls) {
+                if (this.reactiveForm.controls[key]) {
+                    this.reactiveForm.controls[key].markAsTouched();
+                    this.reactiveForm.controls[key].updateValueAndValidity();
+                }
+            }
+        }
+    }
 }
 
 @Component({
diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts
diff --git a/src/app/grid-column-moving/grid-column-moving.sample.css b/src/app/grid-column-moving/grid-column-moving.sample.css
diff --git a/src/app/grid-column-moving/grid-column-moving.sample.html b/src/app/grid-column-moving/grid-column-moving.sample.html

Original file line number	Diff line number	Diff line change
`@@ -84,6 +84,7 @@`
`84`	`84`	`display: flex;`
`85`	`85`	`flex-flow: column nowrap;`
`86`	`86`	`overflow-y: auto;`
	`87`	`+ outline-style: none;`
`87`	`88`	`}`
`88`	`89`
`89`	`90`	`%column-hiding-item {`
Original file line number	Diff line number	Diff line change
`@@ -906,7 +906,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,`
`906`	`906`	`* @hidden @internal`
`907`	`907`	`*/`
`908`	`908`	`protected getGroupAreaHeight(): number {`
`909`		`- return this.groupArea ? this.groupArea.nativeElement.offsetHeight : 0;`
	`909`	`+ return this.groupArea ? this.getComputedHeight(this.groupArea.nativeElement) : 0;`
`910`	`910`	`}`
`911`	`911`
`912`	`912`	`/**`