Merge branch '9.0.x' into PMiteva/fix-row-drag-tests-9.0

Author: nrobakova

CHANGELOG.md

@@ -106,6 +106,7 @@ All notable changes for each version of this project will be documented in this
     </igx-grid>
     ```
 - `IgxSlider`:
+    - **Breaking Change** - `isContinuous` - input has been deleted. The option is not supported anymore.
     - `primaryTicks` input was added. Which sets the number of primary ticks
     - `secondaryTicks` input was added. Which sets the number of secondary ticks.
     - `showTicks` input was added. Which show/hide all slider ticks and tick labels.
@@ -114,7 +115,6 @@ All notable changes for each version of this project will be documented in this
     - `ticksOrientation` input was added. Allows to change ticks orientation to top|bottom|mirror.
     - `tickLabelsOrientation` input was added. Allows you to change the rotation of all tick labels from horizontal to vertical(toptobottom, bottomtotop).
     - `igxSliderTickLabel` directive has been introduced. Allows you to set a custom template for all tick labels.
-    - `isContinuous` - input has been deleted. The option is not supported anymore.
     - `onValueChanged` - new output has been exposed. This event is emitted at the end of every slide interaction.
 
 - `IgxCarousel`:

gulpfile.js

@@ -184,7 +184,7 @@ function typedocBuildExportFn(cb) {
 }
 
 function typedocImportJsonFn(cb) {
-    spawnSync('typedoc', [TYPEDOC.PROJECT_PATH, "--generate-from-json", TYPEDOC.EXPORT_JSON_PATH],
+    spawnSync('typedoc', [TYPEDOC.PROJECT_PATH, "--generate-from-json", TYPEDOC.EXPORT_JSON_PATH, "--warns"],
         { stdio: 'inherit', shell: true});
     cb();
 }
@@ -206,6 +206,7 @@ function typedocBuildDocsJA (cb) {
             slash(path.join(__dirname, 'i18nRepo', 'typedoc', 'ja')),
             '--templateStrings',
             TYPEDOC.TEMPLATE_STRINGS_PATH,
+            '--warns',
             '--localize',
             'jp'], { stdio: 'inherit', shell: true });
 

package-lock.json

@@ -115,7 +115,7 @@
     "ts-node": "~7.0.1",
     "tslint": "~5.12.1",
     "typedoc": "^0.16.9",
-    "typedoc-plugin-localization": "^1.6.1",
+    "typedoc-plugin-localization": "^2.2.0",
     "typescript": "~3.7.5",
     "webpack-sources": "1.3.0"
   }

package.json

@@ -620,7 +620,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      * Deselects date(s) (based on the selection type).
      */
     public deselectDate(value?: Date | Date[]) {
-        if (this.selectedDates === null || this.selectedDates.length === 0) {
+        if (!this.selectedDates || this.selectedDates.length === 0) {
             return;
         }
 

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

@@ -316,7 +316,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
     /**
      * Sets the header template.
      *
-     *  @example
+     * @example
      * ```html
      * <igx-calendar headerTemplateDirective = "igxCalendarHeader"></igx-calendar>
      * ```

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

@@ -56,6 +56,10 @@ $_bootstrap-toast: extend(
     (
         variant: 'bootstrap',
         background: #fff,
+
+        text-color: (
+            igx-color: ('grays', 600)
+        )
     )
 );
 

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

@@ -1,25 +1,42 @@
 <ng-template #readOnlyDatePickerTemplate>
-    <igx-input-group (click)="openDialog()">
+    <igx-input-group (click)="openDialog()" (mousedown)="mouseDown($event)">
         <igx-prefix>
             <igx-icon>today</igx-icon>
         </igx-prefix>
         <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
-        <input #readonlyInput class="igx-date-picker__input-date" igxInput [value]="displayData || ''"
-            [disabled]="disabled" readonly />
+        <input
+            class="igx-date-picker__input-date"
+            igxInput
+            [value]="displayData || ''"
+            [disabled]="disabled"
+            (blur)="onBlur($event)"
+            readonly
+        />
     </igx-input-group>
 </ng-template>
 
 <ng-template #editableDatePickerTemplate>
-    <igx-input-group #editableInputGroup [supressInputAutofocus]="true">
+    <igx-input-group #editableInputGroup [supressInputAutofocus]="true" (mousedown)="mouseDown($event)">
         <igx-prefix (click)="openDialog(editableInputGroup.element.nativeElement)">
             <igx-icon>today</igx-icon>
         </igx-prefix>
         <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
-        <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()" />
+        <input
+            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()"
+        />
         <igx-suffix *ngIf="!isEmpty" (click)="clear()">
             <igx-icon>clear</igx-icon>
         </igx-suffix>

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss

@@ -1,19 +1,20 @@
-import { Component, ViewChild, ElementRef } from '@angular/core';
+import { Component, ViewChild, ElementRef, EventEmitter } from '@angular/core';
 import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing';
-import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule} from '@angular/forms';
+import { FormsModule, FormGroup, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component';
 import { IgxLabelDirective } from '../directives/label/label.directive';
-import { IgxInputDirective } from '../directives/input/input.directive';
+import { IgxInputDirective, IgxInputState } from '../directives/input/input.directive';
 import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
-import { IgxInputGroupModule } from '../input-group';
+import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group';
 import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { IgxButtonModule } from '../directives/button/button.directive';
 import { IgxCalendarModule } from '../calendar';
 import { InteractionMode } from '../core/enums';
 import { DateRangeType } from '../core/dates/dateRange';
+import { OverlayCancelableEventArgs, OverlayEventArgs, OverlayClosingEventArgs, HorizontalAlignment, VerticalAlignment } from '../services';
 
 describe('IgxDatePicker', () => {
     configureTestSuite();
@@ -1262,38 +1263,133 @@ describe('IgxDatePicker', () => {
 
     describe('Reactive form', () => {
         let fixture: ComponentFixture<IgxDatePickerReactiveFormComponent>;
-        let datePicker: IgxDatePickerComponent;
+        let datePickerOnChangeComponent: IgxDatePickerComponent;
+        let datePickerOnBlurComponent: IgxDatePickerComponent;
 
         beforeEach(() => {
             fixture = TestBed.createComponent(IgxDatePickerReactiveFormComponent);
-            datePicker = fixture.componentInstance.datePicker;
+            datePickerOnChangeComponent = fixture.componentInstance.datePickerOnChangeComponent;
+            datePickerOnBlurComponent = fixture.componentInstance.datePickerOnBlurComponent;
             fixture.detectChanges();
         });
 
-        // Bug #6025 Date picker does not disable in reactive form
-        it('Should disable when form is disabled', fakeAsync(() => {
+        it('Should set date picker status to invalid when it is required and has no value', fakeAsync(() => {
+            const inputGroupsElements = fixture.debugElement.queryAll(By.directive(IgxInputDirective));
+            const inputGroupElement = inputGroupsElements.find(d => d.componentInstance === datePickerOnChangeComponent);
+            const inputDirective = inputGroupElement.injector.get(IgxInputDirective) as IgxInputDirective;
+
+            expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
+
+            datePickerOnChangeComponent.value = null;
             fixture.detectChanges();
-            const formGroup: FormGroup = fixture.componentInstance.reactiveForm;
-            const inputGroup = fixture.debugElement.query(By.css('.igx-input-group'));
 
-            inputGroup.nativeElement.click();
-            tick();
+            expect(inputDirective.valid).toEqual(IgxInputState.INVALID);
+        }));
+
+        it('Should set date picker status to invalid when it is required and has no value onBlur', fakeAsync(() => {
+            datePickerOnBlurComponent.mode = InteractionMode.DropDown;
+            datePickerOnBlurComponent.mask = 'dd/mm/yyyy';
+            datePickerOnBlurComponent.inputMask = 'dd/mm/yyyy';
             fixture.detectChanges();
-            expect(datePicker.collapsed).toBeFalsy();
 
-            datePicker.closeCalendar();
+            const inputDirectiveElements = fixture.debugElement.queryAll(By.directive(IgxInputDirective));
+            const inputDirectiveElement = inputDirectiveElements.find(d => d.componentInstance === datePickerOnBlurComponent);
+            const inputDirective = inputDirectiveElement.injector.get(IgxInputDirective) as IgxInputDirective;
+
+            expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
+
+            inputDirectiveElement.triggerEventHandler('focus', {});
             fixture.detectChanges();
 
-            formGroup.disable();
-            tick();
+            expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
+
+            datePickerOnBlurComponent.value = null;
             fixture.detectChanges();
+            expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
 
-            inputGroup.nativeElement.click();
-            tick();
+            inputDirectiveElement.triggerEventHandler('blur', { target: { value: ''}});
             fixture.detectChanges();
-            const dateDropDown = document.getElementsByClassName('igx-date-picker--dropdown');
-            expect(dateDropDown.length).toEqual(0);
+
+            expect(inputDirective.valid).toEqual(IgxInputState.INVALID);
         }));
+
+        // Bug #6025 Date picker does not disable in reactive form
+        it('Should disable when form is disabled', () => {
+            const formGroup: FormGroup = fixture.componentInstance.reactiveForm;
+            const inputGroupsElements = fixture.debugElement.queryAll(By.directive(IgxInputDirective));
+            const inputGroupElement = inputGroupsElements.find(d => d.componentInstance === datePickerOnBlurComponent);
+            const inputDirective = inputGroupElement.injector.get(IgxInputDirective) as IgxInputDirective;
+            expect(inputDirective.disabled).toBeFalsy();
+
+            formGroup.disable();
+            fixture.detectChanges();
+            expect(inputDirective.disabled).toBeTruthy();
+        });
+    });
+
+    describe('Control value accessor unit tests', () => {
+        let ngModel;
+        let overlay;
+        let element;
+        let cdr;
+        let moduleRef;
+        let injector;
+        let inputGroup: IgxInputGroupComponent;
+
+        beforeEach(() => {
+            ngModel = {
+                control: { touched: false, dirty: false, validator: null },
+                valid: false,
+                statusChanges: new EventEmitter(),
+            };
+            overlay = {
+                onOpening: new EventEmitter<OverlayCancelableEventArgs>(),
+                onOpened: new EventEmitter<OverlayEventArgs>(),
+                onClosed: new EventEmitter<OverlayEventArgs>(),
+                onClosing: new EventEmitter<OverlayClosingEventArgs>()
+            };
+            element = {};
+            cdr = {
+                markForCheck: () => {},
+                detectChanges: () => {},
+                detach: () => {},
+                reattach: () => {}
+            };
+            moduleRef = {};
+            injector = { get: () => ngModel };
+            inputGroup = new IgxInputGroupComponent(null, null);
+        });
+
+        it('should initialize date picker with required correctly', () => {
+            const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
+            datePicker['inputGroup'] = inputGroup;
+            ngModel.control.validator = () => ({ required: true});
+            datePicker.ngOnInit();
+            datePicker.ngAfterViewInit();
+            datePicker.ngAfterViewChecked();
+
+            expect(datePicker).toBeDefined();
+            expect(inputGroup.isRequired).toBeTruthy();
+        });
+
+        it('should update inputGroup isRequired correctly', () => {
+            const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
+            datePicker['inputGroup'] = inputGroup;
+            datePicker.ngOnInit();
+            datePicker.ngAfterViewInit();
+            datePicker.ngAfterViewChecked();
+
+            expect(datePicker).toBeDefined();
+            expect(inputGroup.isRequired).toBeFalsy();
+
+            ngModel.control.validator = () => ({ required: true});
+            ngModel.statusChanges.emit();
+            expect(inputGroup.isRequired).toBeTruthy();
+
+            ngModel.control.validator = () => ({ required: false});
+            ngModel.statusChanges.emit();
+            expect(inputGroup.isRequired).toBeFalsy();
+        });
     });
 });
 
@@ -1444,23 +1540,27 @@ export class IgxDatePickerOpeningComponent {
 @Component({
     template: `
     <form [formGroup]="reactiveForm">
-    <p>
-        <igx-date-picker formControlName="datePickerReactive" #datePickerReactive></igx-date-picker>
-    </p>
-</form>
+        <igx-date-picker formControlName="datePickerOnChange" #datePickerOnChangeComponent></igx-date-picker>
+        <igx-date-picker formControlName="datePickerOnBlur" #datePickerOnBlurComponent></igx-date-picker>
+    </form>
 `
 })
 class IgxDatePickerReactiveFormComponent {
-    @ViewChild('datePickerReactive', { read: IgxDatePickerComponent, static: true })
-    public datePicker: IgxDatePickerComponent;
+    @ViewChild('datePickerOnChangeComponent', { read: IgxDatePickerComponent, static: true })
+    public datePickerOnChangeComponent: IgxDatePickerComponent;
+
+    @ViewChild('datePickerOnBlurComponent', { read: IgxDatePickerComponent, static: true })
+    public datePickerOnBlurComponent: IgxDatePickerComponent;
+
     reactiveForm: FormGroup;
 
     constructor(fb: FormBuilder) {
+        const date = new Date(2000, 10, 15);
         this.reactiveForm = fb.group({
-            datePickerReactive: new FormControl(''),
+            datePickerOnChange: [date, Validators.required],
+            datePickerOnBlur: [date, { updateOn: 'blur', validators: Validators.required}]
         });
     }
-    onSubmitReactive() { }
 }
 
 @Component({