Merge branch 'master' into badge-shadow

Author: simeonoff

CHANGELOG.md

@@ -79,6 +79,7 @@ For more information about the theming please read our [documentation](https://w
     - **Breaking Change** `onRowSelectionChange` event arguments are changed. The `row` property has been removed and the properties `added`, `removed` and `cancel` are newly added.
     - **Breaking Change** `igxExcelStylePinningTemplate` directive is renamed to `igxExcelStylePinning`.
     - **Breaking Change** `onRowDragEnd` and `onRowDragStart` event arguments are changed - `owner` now holds reference to the grid component instance, while `dragDirective` hold reference to the drag directive.
+    - **Behavioral Change** The behavior of the `isLoading` input no longer depends on the state of the data the grid binds to. Setting it to `true` now shows a loading indicator until it is disabled by the user.
 - `IgxCombo`
     - Combo selection is now consistent when `valueKey` is defined. When `valueKey` is specified, selection is based on the value keys of the items. For example:
     ```html

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -85,6 +85,8 @@
 
     @include scale-in-out($start-scale: .9);
 
+    // If updating the WIDTH of the checkbox here, please update it in the grid theme as well.
+    // It is under the name of $cbx-size
     $size: em(20px);
     $checkbox-radius: $size / 2;
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -331,6 +331,10 @@
         @extend %grid-cell-text !optional;
     }
 
+    @include e(cbx-padding) {
+        @extend %cbx-padding !optional;
+    }
+
     @include e(cbx-selection) {
         @extend %grid__cbx-selection !optional;
     }
@@ -427,6 +431,10 @@
         @extend %igx-grid__outlet !optional;
     }
 
+    @include e(loading-outlet) {
+        @extend %igx-grid__loading-outlet !optional;
+    }
+
     @include e(row-editing-outlet) {
         @extend %igx-grid__row-editing-outlet !optional;
     }
@@ -519,8 +527,8 @@
             @extend %igx-grid__drag-indicator--cosy !optional;
         }
 
-        @include e(cbx-selection) {
-            @extend %grid__cbx-selection--cosy !optional;
+        @include e(cbx-padding) {
+            @extend %cbx-padding--cosy !optional;
         }
 
         @include e(cbx-selection, $m: push) {
@@ -619,8 +627,8 @@
             @extend %igx-grid__drag-indicator--compact !optional;
         }
 
-        @include e(cbx-selection) {
-            @extend %grid__cbx-selection--compact !optional;
+        @include e(cbx-padding) {
+            @extend %cbx-padding--compact !optional;
         }
 
         @include e(cbx-selection, $m: push) {

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -503,7 +503,7 @@
     @include igx-root-css-vars($theme);
 
     $palette: map-get($theme, 'palette');
-
+    $cbx-size: rem(20px);
     $grid-shadow: --var($theme, 'grid-shadow');
 
     $grid-caption-fs: rem(20px);
@@ -534,6 +534,16 @@
         compact: 0 rem(12px)
     );
 
+    $grid-cbx-padding: (
+        comfortable: rem(24px),
+        cosy: rem(16px),
+        compact: rem(12px)
+    );
+
+    $cbx-padding: map-get($grid-cbx-padding, 'comfortable');
+    $cbx-padding-cosy: map-get($grid-cbx-padding, 'cosy');
+    $cbx-padding-compact: map-get($grid-cbx-padding, 'compact');
+
     $grid-header-height: (
         comfortable: rem(50px),
         cosy: rem(40px),
@@ -1379,20 +1389,27 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: map-get($grid-header-padding, 'comfortable');
         border-right: --var($theme, 'header-border-width')
             --var($theme, 'header-border-style')
             --var($theme, 'header-border-color');
         background: inherit;
         z-index: 4;
     }
 
-    %grid__cbx-selection--cosy {
-        padding: map-get($grid-header-padding, 'cosy');
+    %cbx-padding {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // The min-width here plays the role of padding because of IE11
+        min-width: calc(#{$cbx-size} + (#{$cbx-padding} * 2));
     }
 
-    %grid__cbx-selection--compact {
-        padding: map-get($grid-header-padding, 'compact');
+    %cbx-padding--cosy {
+        min-width: calc(#{$cbx-size} + (#{$cbx-padding-cosy} * 2));
+    }
+
+    %cbx-padding--compact {
+        min-width: calc(#{$cbx-size} + (#{$cbx-padding-compact} * 2));
     }
 
     %grid__resize-handle {
@@ -1975,6 +1992,15 @@
         position: fixed;
     }
 
+    %igx-grid__loading-outlet {
+        z-index: 10003;
+
+        %circular-display {
+            width: rem(50);
+            height: rem(50);
+        }
+    }
+
     %igx-grid__row-editing-outlet {
         z-index: 10000;
         position: absolute;

projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

@@ -15,7 +15,8 @@
             <igx-icon>today</igx-icon>
         </igx-prefix>
         <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
-        <input #editableInput class="igx-date-picker__input-date" igxInput type="text" [value]="transformedDate"
+        <input #editableInput class="igx-date-picker__input-date" igxInput [igxTextSelection]="true"
+            type="text" [value]="transformedDate"
             [igxMask]="inputMask" [placeholder]="mask" [disabled]="disabled" [displayValuePipe]="displayValuePipe"
             [focusedValuePipe]="inputValuePipe" (blur)="onBlur($event)" (wheel)="onWheel($event)"
             (input)="onInput($event)" (focus)="onFocus()" />
@@ -25,4 +26,4 @@
     </igx-input-group>
 </ng-template>
 
-<ng-container *ngTemplateOutlet="template; context: context"></ng-container>
+<ng-container *ngTemplateOutlet="template; context: context"></ng-container>

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -8,7 +8,7 @@ import { IgxLabelDirective } from '../directives/label/label.directive';
 import { IgxInputDirective } from '../directives/input/input.directive';
 import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { IgxInputGroupModule } from '../input-group';
-
+import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { DateRangeType } from 'igniteui-angular';
 import { IgxButtonModule } from '../directives/button/button.directive';
@@ -32,7 +32,8 @@ describe('IgxDatePicker', () => {
                 IgxDropDownDatePickerRetemplatedComponent,
                 IgxDatePickerOpeningComponent
             ],
-            imports: [IgxDatePickerModule, FormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule]
+            imports: [IgxDatePickerModule, FormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxCalendarModule,
+                        IgxButtonModule, IgxTextSelectionModule]
         })
             .compileComponents();
     }));
@@ -1089,6 +1090,29 @@ describe('IgxDatePicker', () => {
             expect(instance.getEditElement()).toBe(editElement);
         });
     });
+
+    describe('Drop-down mode select all text on focus', () => {
+        let fixture: ComponentFixture<IgxDatePickerEditableComponent>;
+        let datePicker: IgxDatePickerComponent;
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(IgxDatePickerEditableComponent);
+            datePicker = fixture.componentInstance.datePicker;
+            fixture.detectChanges();
+        });
+
+        it('Should select all input text on input focus', fakeAsync(() => {
+            const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+            input.focus();
+            fixture.detectChanges();
+            tick(100);
+
+            expect(input).toEqual(document.activeElement);
+            expect(input.selectionEnd).toEqual(input.value.length);
+            expect(input.selectionStart).toEqual(0);
+            expect(input.value.substring(input.selectionStart, input.selectionEnd)).toEqual(input.value);
+        }));
+    });
 });
 
 @Component({

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -32,6 +32,7 @@ import { IgxInputGroupModule, IgxInputDirective, IgxInputGroupComponent } from '
 import { Subject, fromEvent, animationFrameScheduler, interval } from 'rxjs';
 import { filter, takeUntil, throttle } from 'rxjs/operators';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
+import { IgxTextSelectionModule} from '../directives/text-selection/text-selection.directive';
 import {
     OverlaySettings,
     IgxOverlayService,
@@ -1379,7 +1380,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         IgxDatePickerTemplateDirective, DatePickerDisplayValuePipe, DatePickerInputValuePipe],
     exports: [IgxDatePickerComponent, IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective,
         DatePickerDisplayValuePipe, DatePickerInputValuePipe],
-    imports: [CommonModule, IgxIconModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule, IgxRippleModule, IgxMaskModule],
+    imports: [CommonModule, IgxIconModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule,
+                IgxRippleModule, IgxMaskModule, IgxTextSelectionModule],
     entryComponents: [IgxCalendarContainerComponent]
 })
 export class IgxDatePickerModule { }

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts

@@ -1010,7 +1010,7 @@ describe('igxExpansionPanel', () => {
             expect(grid.attributes.getNamedItem('ng-reflect-auto-generate').nodeValue).toEqual('true');
             expect(grid.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(fixture.componentInstance.width);
             expect(grid.attributes.getNamedItem('ng-reflect-height').nodeValue).toEqual(fixture.componentInstance.height);
-            expect(grid.childElementCount).toEqual(6);
+            expect(grid.childElementCount).toEqual(7);
         }));
         it('Should apply all appropriate classes on combo initialization_image + text content', fakeAsync(() => {
             const fixture: ComponentFixture<IgxExpansionPanelImageComponent> = TestBed.createComponent(IgxExpansionPanelImageComponent);

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

@@ -46,7 +46,8 @@ import {
     IgxOverlayService,
     OverlaySettings,
     PositionSettings,
-    ConnectedPositioningStrategy
+    ConnectedPositioningStrategy,
+    ContainerPositionStrategy
 } from '../services/index';
 import { GridBaseAPIService } from './api.service';
 import { IgxGridCellComponent } from './cell.component';
@@ -845,9 +846,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * ```
 	 * @memberof IgxGridBaseComponent
      */
+    @WatchChanges()
     @Input()
     set isLoading(value: boolean) {
-        this._isLoading = value;
+        if (this._isLoading !== value) {
+            this._isLoading = value;
+            this.evaluateLoadingState();
+        }
         this.notifyChanges();
     }
 
@@ -1650,6 +1655,18 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @ViewChild(IgxGridColumnResizerComponent, { static: false })
     public resizeLine: IgxGridColumnResizerComponent;
 
+    /**
+     * @hidden
+     */
+    @ViewChild('loadingOverlay', { static: true })
+    public loadingOverlay: ElementRef;
+
+    /**
+     * @hidden
+     */
+    @ViewChild('igxLoadingOverlayOutlet', { read: IgxOverlayOutletDirective, static: true })
+    public loadingOutlet: IgxOverlayOutletDirective;
+
     /**
      * @hidden
      */
@@ -2728,6 +2745,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     protected _baseFontSize: number;
     private _horizontalForOfs: Array<IgxGridForOfDirective<any>> = [];
     private _multiRowLayoutRowSize = 1;
+    protected _loadingId;
 
     // Caches
     private _totalWidth = NaN;
@@ -2927,6 +2945,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this.verticalScrollContainer.onDataChanging.pipe(destructor, filter(() => !this._init)).subscribe(($event) => {
             this.calculateGridHeight();
             $event.containerSize = this.calcHeight;
+            this.evaluateLoadingState();
             this.notifyChanges(true);
         });
 
@@ -5642,6 +5661,30 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * Should be called when data and/or isLoading input changes so that the overlay can be
+     * hidden/shown based on the current value of shouldOverlayLoading
+     */
+    protected evaluateLoadingState() {
+        if (this.shouldOverlayLoading) {
+            // a new overlay should be shown
+            const overlaySettings: OverlaySettings = {
+                outlet: this.loadingOutlet,
+                closeOnOutsideClick: false,
+                positionStrategy: new ContainerPositionStrategy()
+            };
+            if (!this._loadingId) {
+                this._loadingId = this.overlayService.attach(this.loadingOverlay, overlaySettings);
+                this.overlayService.show(this._loadingId, overlaySettings);
+            }
+        } else {
+            if (this._loadingId) {
+                this.overlayService.hide(this._loadingId);
+                this._loadingId = null;
+            }
+        }
+    }
+
     openRowOverlay(id) {
         this.configureRowEditingOverlay(id, this.rowList.length <= MIN_ROW_EDITING_COUNT_THRESHOLD);
 
@@ -5829,6 +5872,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return this._exportCsv;
     }
 
+    /**
+     * @hidden
+     */
+    get shouldOverlayLoading(): boolean {
+        return this.isLoading && this.data && this.data.length > 0;
+    }
+
     /**
     * @hidden
     */
@@ -5890,9 +5940,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                 (this as any).rootGrid ? (this as any).rootGrid.nativeElement : this.nativeElement;
             this._advancedFilteringOverlaySettings.outlet = this.outletDirective;
 
-            this._advancedFilteringOverlayId =
-                this.overlayService.attach(IgxAdvancedFilteringDialogComponent, this._advancedFilteringOverlaySettings);
-                // , this._moduleRef);
+            this._advancedFilteringOverlayId = this.overlayService.attach(
+                IgxAdvancedFilteringDialogComponent,
+                this._advancedFilteringOverlaySettings,
+                {
+                    injector: this.viewRef.injector,
+                    componentFactoryResolver: this.resolver
+                });
             this.overlayService.show(this._advancedFilteringOverlayId, this._advancedFilteringOverlaySettings);
         }
     }

projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html

@@ -11,7 +11,7 @@
          <ng-template *ngTemplateOutlet="
             this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
             context: { $implicit: {
-                            index: this.grid.groupingExpressions.length > 0 ? this.grid.filteredSortedData.indexOf(this.rowData) : 
+                            index: this.grid.groupingExpressions.length > 0 ? this.grid.filteredSortedData.indexOf(this.rowData) :
                                 this.index + this.grid.page * this.grid.perPage,
                             rowID: rowID, selected: selected }}">
         </ng-template>
@@ -112,12 +112,14 @@
 </ng-container>
 
 <ng-template #rowSelectorBaseTemplate>
-    <igx-checkbox
-        [checked]="selected"
-        [readonly]="true"
-        [disabled]="deleted"
-        disableRipple="true"
-        [disableTransitions]="grid.disableTransitions"
-        [aria-label]="rowCheckboxAriaLabel">
-    </igx-checkbox>
+    <div class="igx-grid__cbx-padding">
+        <igx-checkbox
+            [checked]="selected"
+            [readonly]="true"
+            [disabled]="deleted"
+            disableRipple="true"
+            [disableTransitions]="grid.disableTransitions"
+            [aria-label]="rowCheckboxAriaLabel">
+        </igx-checkbox>
+    </div>
 </ng-template>