Merge branch 'master' into sboykova/editable-date-picker

CHANGELOG.md

@@ -5,6 +5,21 @@ All notable changes for each version of this project will be documented in this
 ### Features
 - `igx-circular-bar` and `igx-linear-bar` now feature an indeterminate input property. When this property is set to true the indicator will be continually growing and shrinking along the track.
 - `IgxTimePickerComponent`: in addition to the current dialog interaction mode, now the user can select or edit a time value, using an editable masked input with a dropdown.
+- `IgxColumnComponent` now accepts its templates as input properties through the markup. This can reduce the amount of code one needs to write when applying a single template to multiple columns declaratively. The new exposed inputs are:
+    + `cellTemplate` - the template for the column cells
+    + `headerTemplate` - the template for the column header
+    + `cellEditorTemplate` - the template for the column cells when a cell is in edit mode
+    + ```html
+        <!-- Example -->
+
+        <igx-grid ...>
+            <igx-column *ngFor="let each of defs" [cellTemplate]="newTemplate" ...></igx-column>
+        </igx-grid>
+
+        <ng-template #newTemplate let-value>
+            {{ value }}
+        </ng-template>
+        ```
 
 ## 7.1.1
 ### Bug Fixes
@@ -26,7 +41,7 @@ All notable changes for each version of this project will be documented in this
     - Added a new `igxToolbarCustomContent` directive which can be used to mark an `ng-template` which provides a custom content for the IgxGrid's toolbar ([#2983](https://github.com/IgniteUI/igniteui-angular/issues/2983))
     - Summary results are now calculated and displayed by default for each row group when 'Group By' feature is enabled.
     - `clearSummaryCache()` and `recalculateSummaries()` methods are deprecated. The grid will clear the cache and recalculate the summaries automatically when needed.
-	- `locale` property added. If not set, it returns browser's language. All child components will use it as locale.
+	- `locale` property added. Default value is `en`. All child components will use it as locale.
     - **Breaking change** `IgxSummaryOperand.operate()` method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of `IgxSummaryResult` with proper length.
 - `IgxIconModule`:
     - **Breaking change** `igxIconService` is now provided in root (providedIn: 'root') and `IgxIconModule.forRoot()` method is deprecated.

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

@@ -142,7 +142,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
 
     /**
      * Gets the `locale` of the calendar.
-     * By default the browser's language is used.
+     * Default value is `"en"`.
      * ```typescript
      * let locale =  this.calendar.locale;
      * ```
@@ -156,7 +156,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
     /**
      * Sets the `locale` of the calendar.
      * Expects a valid BCP 47 language tag.
-     * By default the browser's language is used.
+     * Default value is `"en"`.
      * ```html
      * <igx-calendar [locale] = "de"></igx-calendar>
      * ```
@@ -613,7 +613,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
     /**
     *@hidden
     */
-    private _locale = window.navigator.language;
+    private _locale = 'en';
     /**
      *@hidden
      */

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

@@ -105,12 +105,12 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
     public labelVisibility = true;
 
     /**
-     *An @Input property that sets locales. By default the browser's language is used.
+     *An @Input property that sets locales. Default locale is en.
      *```html
      *<igx-date-picker locale="ja-JP" [value]="date"></igx-date-picker>
      *```
      */
-    @Input() public locale: string = window.navigator.language;
+    @Input() public locale: 'en';
 
     /**
      *An @Input property that sets on which day the week starts.

projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts

@@ -193,6 +193,37 @@ describe('IgxInput', () => {
         testRequiredValidation(inputElement, fixture);
     });
 
+    it('Should update style when required input\'s value is set.', () => {
+        const fixture = TestBed.createComponent(RequiredInputComponent);
+        fixture.detectChanges();
+
+        const igxInput = fixture.componentInstance.igxInput;
+        const inputElement = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+
+        dispatchInputEvent('focus', inputElement, fixture);
+        dispatchInputEvent('blur', inputElement, fixture);
+
+        const inputGroupElement = fixture.debugElement.query(By.css('igx-input-group')).nativeElement;
+        expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
+        expect(igxInput.valid).toBe(IgxInputState.INVALID);
+
+        igxInput.value = 'test';
+        fixture.detectChanges();
+
+        expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(false);
+        expect(igxInput.valid).toBe(IgxInputState.VALID);
+
+
+        igxInput.value = '';
+        fixture.detectChanges();
+
+        dispatchInputEvent('focus', inputElement, fixture);
+        dispatchInputEvent('blur', inputElement, fixture);
+
+        expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
+        expect(igxInput.valid).toBe(IgxInputState.INVALID);
+    });
+
     it('Should style required input with two-way databinding correctly.', () => {
         const fixture = TestBed.createComponent(RequiredTwoWayDataBoundInputComponent);
         fixture.detectChanges();

projects/igniteui-angular/src/lib/directives/input/input.directive.ts

@@ -52,6 +52,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     @Input('value')
     set value(value: any) {
         this.nativeElement.value = value;
+        this.checkValidity();
     }
     /**
      * Gets the `value` propery.
@@ -144,9 +145,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
      */
     @HostListener('input')
     public onInput() {
-        if (!this.ngControl && this._hasValidators()) {
-            this._valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID;
-        }
+        this.checkValidity();
     }
     /**
      *@hidden
@@ -294,4 +293,10 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     public set valid(value: IgxInputState) {
         this._valid = value;
     }
+
+    private checkValidity() {
+        if (!this.ngControl && this._hasValidators) {
+            this._valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID;
+        }
+    }
 }

projects/igniteui-angular/src/lib/grids/README.md

@@ -186,7 +186,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`transactions`| `TransactionService` | Transaction provider allowing access to all transactions and states of the modified rows. |
 |`summaryPosition`| GridSummaryPosition | The summary row position for the child levels. The default is top. |
 |`summaryCalculationMode`| GridSummaryCalculationMode | The summary calculation mode. The default is rootAndChildLevels, which means summaries are calculated for root and child levels. |
-|`locale`| string | Determines the locale of the grid. By default returns browser's language. |
+|`locale`| string | Determines the locale of the grid. Default value is `en`. |
 
 ### Outputs
 

projects/igniteui-angular/src/lib/grids/column.component.ts

@@ -579,6 +579,7 @@ export class IgxColumnComponent implements AfterContentInit {
      * ```
      * @memberof IgxColumnComponent
      */
+    @Input('cellTemplate')
     get bodyTemplate(): TemplateRef<any> {
         return this._bodyTemplate;
     }
@@ -600,7 +601,9 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     set bodyTemplate(template: TemplateRef<any>) {
         this._bodyTemplate = template;
-        this.grid.markForCheck();
+        if (this.grid) {
+            this.grid.cdr.markForCheck();
+        }
     }
     /**
      * Returns a reference to the header template.
@@ -609,6 +612,7 @@ export class IgxColumnComponent implements AfterContentInit {
      * ```
      * @memberof IgxColumnComponent
      */
+    @Input()
     get headerTemplate(): TemplateRef<any> {
         return this._headerTemplate;
     }
@@ -630,7 +634,9 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     set headerTemplate(template: TemplateRef<any>) {
         this._headerTemplate = template;
-        this.grid.markForCheck();
+        if (this.grid) {
+            this.grid.cdr.markForCheck();
+        }
     }
     /**
      * Returns a reference to the inline editor template.
@@ -639,6 +645,7 @@ export class IgxColumnComponent implements AfterContentInit {
      * ```
      * @memberof IgxColumnComponent
      */
+    @Input('cellEditorTemplate')
     get inlineEditorTemplate(): TemplateRef<any> {
         return this._inlineEditorTemplate;
     }
@@ -658,7 +665,9 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     set inlineEditorTemplate(template: TemplateRef<any>) {
         this._inlineEditorTemplate = template;
-        this.grid.markForCheck();
+        if (this.grid) {
+            this.grid.cdr.markForCheck();
+        }
     }
     /**
      * Gets the cells of the column.

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

@@ -302,7 +302,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         if (this._locale) {
             return this._locale;
         } else {
-            return window.navigator.language;
+            return 'en';
         }
     }
 

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

@@ -20,6 +20,7 @@ describe('IgxGrid - Column properties', () => {
             declarations: [
                 ColumnsFromIterableComponent,
                 TemplatedColumnsComponent,
+                TemplatedInputColumnsComponent,
                 ColumnCellFormatterComponent,
                 ColumnHaederClassesComponent,
                 ColumnHiddenFromMarkupComponent
@@ -247,6 +248,26 @@ describe('IgxGrid - Column properties', () => {
         expect(grid.columns[0].width).toBe('300');
         expect(grid.columns[1].width).toBe('300');
     });
+
+    it('should support passing templates through the markup as an input property', () => {
+        const fixture = TestBed.createComponent(TemplatedInputColumnsComponent);
+        fixture.detectChanges();
+
+        const grid = fixture.componentInstance.instance;
+
+        grid.getColumnByName('Name').cells.forEach(c =>
+            expect(c.nativeElement.querySelector('.customCellTemplate')).toBeDefined());
+
+        grid.headerCellList.forEach(header =>
+            expect(header.elementRef.nativeElement.querySelector('.customHeaderTemplate')).toBeDefined());
+
+        const cell = grid.getCellByColumn(0, 'ID');
+        cell.inEditMode = true;
+        fixture.detectChanges();
+
+        expect(cell.nativeElement.querySelector('.customEditorTemplate')).toBeDefined();
+
+    });
 });
 
 @Component({
@@ -284,6 +305,37 @@ export class TemplatedColumnsComponent {
     public newCellTemplate: TemplateRef<any>;
 }
 
+@Component({
+    template: `
+        <igx-grid [data]="data">
+            <igx-column *ngFor="let field of columns" [field]="field" [editable]="true"
+                [cellTemplate]="cell" [headerTemplate]="header"
+                [cellEditorTemplate]="editor">
+            </igx-column>
+        </igx-grid>
+
+        <ng-template #cell let-value>
+            <span class="customCellTemplate">{{ value }}</span>
+        </ng-template>
+
+        <ng-template #header let-column>
+            <span class="customHeaderTemplate">{{ column.field }}</span>
+        </ng-template>
+
+        <ng-template #editor let-value>
+            <span class="customEditorTemplate">{{ value }}</span>
+        </ng-template>
+    `
+})
+export class TemplatedInputColumnsComponent {
+
+    data = SampleTestData.personIDNameRegionData();
+    columns = Object.keys(this.data[0]);
+
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent })
+    public instance: IgxGridComponent;
+}
+
 @Component({
     template: `
         <igx-grid [data]="data" height="500px" width="400px">

projects/igniteui-angular/src/lib/snackbar/README.md

@@ -40,3 +40,17 @@ You can hide the Snackbar by using `snackbar.hide()` method.
 By default, the IgxSnackbar will be automatically hidden after 4000 milliseconds. The automatic hiding behavior can be controlled via the following attributes:
  - `autoHide` - whether the snackbar should be hidden after a certain time interval.
  - `displayTime` - the time interval in which the snackbar would hide.
+
+
+## Snackbar with custom content
+
+```html
+<button (click)="snackbar.show()">Show snackbar</button>
+
+<igx-snackbar #snackbar
+             actionName="Dismiss"
+             (onAction)="snackbar.hide()">
+    <span>Custom content</span>
+</igx-snackbar>
+```
+You can display custom content by adding elements inside the snackbar.

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

@@ -1,6 +1,9 @@
 <div class="igx-snackbar" *ngIf="isVisible" (@slideInOut.start)="snackbarAnimationStarted($event)" (@slideInOut.done)="snackbarAnimationDone($event)"
     [@slideInOut]="isVisible">
-    <span class="igx-snackbar__message" [@fadeInOut]="isVisible">{{ message }}</span>
+    <div class="igx-snackbar__message" [@fadeInOut]="isVisible">
+        {{ message }}
+        <ng-content></ng-content>
+    </div>
     <button class="igx-snackbar__button" igxRipple="white" *ngIf="actionText" [@fadeInOut] (click)="triggerAction()">
         {{ actionText }}
     </button>