Merge branch 'master' into sstoychev/mrl-next-prev-cell-master

ChronosSF · web-flow · commit 12ff40a318d1 · 2020-03-09T09:56:02.000+02:00
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
@@ -1185,15 +1185,18 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             this.scrollComponent.size = totalWidth;
             if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
                 this.scrollPosition = 0;
+                // Need to reset the scrollAmount value here, because horizontalScrollBar is hidden, therefore
+                // onScroll event handler for VirtualHelperBaseDirective will not be called
+                this.scrollComponent.scrollAmount = 0;
             }
         }
         if (this.igxForScrollOrientation === 'vertical') {
             this.scrollComponent.nativeElement.style.height = parseInt(this.igxForContainerSize, 10) + 'px';
             this.scrollComponent.size = this._calcHeight();
             if ( this.scrollComponent.size <= parseInt(this.igxForContainerSize, 10)) {
                 this.scrollPosition = 0;
-                // Need to reset the scrollAmount value here, because
-                // Firefox will not fire the scrollComponent scroll event handler
+                // Need to reset the scrollAmount value here, because verticalScrollBar is hidden, therefore
+                // onScroll event handler for VirtualHelperBaseDirective will not be called
                 this.scrollComponent.scrollAmount = 0;
             }
         }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -3834,7 +3834,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         } else {
             this.gridAPI.sort(expression);
         }
-        this.onSortingDone.emit(expression);
+        requestAnimationFrame(() => this.onSortingDone.emit(expression));
     }
 
     /**
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -332,6 +332,11 @@ export class AppComponent implements OnInit {
             icon: 'radio_button_checked',
             name: 'Radio Group'
         },
+        {
+            link: '/reactive',
+            icon: 'web',
+            name: 'Reactive Form'
+        },
         {
             link: '/select',
             icon: 'arrow_drop_down_circle',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -115,6 +115,7 @@ import { GridExternalFilteringComponent } from './grid-external-filtering/grid-e
 import { AboutComponent } from './grid-state/about.component';
 import { GridSaveStateComponent } from './grid-state/grid-state.component';
 import { GridMasterDetailSampleComponent } from './grid-master-detail/grid-master-detail.sample';
+import { ReactiveFormSampleComponent } from './reactive-from/reactive-form-sample.component';
 
 const components = [
     AppComponent,
@@ -220,7 +221,8 @@ const components = [
     GridFilteringComponent,
     GridExternalFilteringComponent,
     GridSaveStateComponent,
-    AboutComponent
+    AboutComponent,
+    ReactiveFormSampleComponent
 ];
 
 @NgModule({
diff --git a/src/app/reactive-from/reactive-form-sample.component.html b/src/app/reactive-from/reactive-form-sample.component.html
@@ -0,0 +1,51 @@
+<div class="sample-wrapper">
+    <section class="sample-content">
+        <article class="sample-column">
+            <form class="input-group-form" [formGroup]="user" (ngSubmit)="onSubmit()">
+                <h4 class="sample-title">Book your movie ticket</h4>
+                <div class="container">
+                    <igx-select #select name="movies" formControlName="movie">
+                        <igx-select-item-group *ngFor="let genre of genres" [label]="genre.type">
+                            <igx-select-item *ngFor="let movie of genre.movies" [value]="movie">
+                                {{ movie }}
+                            </igx-select-item>
+                        </igx-select-item-group>
+                        <label igxLabel for="movies">Movie</label>
+                        <ng-template igxSelectToggleIcon><igx-icon fontSet="material">local_movies</igx-icon></ng-template>
+                    </igx-select>
+                    <igx-input-group>
+                        <input igxInput name="fullName" type="text" formControlName="fullName" />
+                        <label igxLabel for="fullName">Full Name</label>
+                        <igx-suffix>
+                            <igx-icon>person</igx-icon>
+                        </igx-suffix>
+                    </igx-input-group>
+                    <igx-input-group>
+                        <igx-prefix>+359</igx-prefix>
+                        <label igxLabel for="phone">Phone</label>
+                        <input igxInput name="phone" type="text" formControlName="phone" />
+                        <igx-suffix>
+                            <igx-icon>phone</igx-icon>
+                        </igx-suffix>
+                        <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
+                    </igx-input-group>
+                    <igx-input-group>
+                        <label igxLabel for="email">Email address</label>
+                        <input igxInput name="email" type="email" formControlName="email" />
+                        <igx-suffix>
+                            <igx-icon>email</igx-icon>
+                        </igx-suffix>
+                    </igx-input-group>
+                    <igx-combo #combo1 class="input-container" [itemsMaxHeight]="130"
+                        [data]="genres" [valueKey]="'type'" [displayKey]="'type'"
+                        type="line" formControlName="genres" placeholder="Select your favorite genres"
+                        searchPlaceholder="Search...">
+                    </igx-combo>
+                    <igx-date-picker name="date" formControlName="date" [mode]="'dropdown'"></igx-date-picker>
+                    <igx-time-picker name="dateTime" formControlName="dateTime"></igx-time-picker>
+                    <button igxButton="raised" igxRipple type="submit" [disabled]="!user.valid">Book</button>
+                </div>
+            </form>
+        </article>
+    </section>
+</div>
diff --git a/src/app/reactive-from/reactive-form-sample.component.scss b/src/app/reactive-from/reactive-form-sample.component.scss
@@ -0,0 +1,13 @@
+.container > * {
+    margin-top: 32px;
+}
+
+.input-group-form {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+    padding: 24px;
+    margin-bottom: 48px;
+}
+
+.sample-title {
+    margin-top: 0;
+}
diff --git a/src/app/reactive-from/reactive-form-sample.component.ts b/src/app/reactive-from/reactive-form-sample.component.ts
@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+    selector: 'app-reactive-form',
+    styleUrls: ['reactive-form-sample.component.scss'],
+    templateUrl: 'reactive-form-sample.component.html'
+})
+export class ReactiveFormSampleComponent {
+    public genres = [];
+    public user: FormGroup;
+
+    constructor(fb: FormBuilder) {
+        this.user = fb.group({
+            // date: ['', Validators.required],
+            date: ['', { validators: Validators.required, updateOn: 'blur' }],
+            dateTime: ['', Validators.required],
+            email: ['', Validators.required],
+            fullName: new FormControl('', Validators.required),
+            genres: [''],
+            movie: ['', Validators.required],
+            phone: ['']
+        });
+
+        this.genres = [
+            { type: 'Action', movies: ['The Matrix', 'Kill Bill: Vol.1', 'The Dark Knight Rises'] },
+            { type: 'Adventure', movies: ['Interstellar', 'Inglourious Basterds', 'Inception'] },
+            // tslint:disable-next-line:object-literal-sort-keys
+            {
+                type: 'Comedy', movies: ['Wild Tales', 'In Bruges', 'Three Billboards Outside Ebbing, Missouri',
+                    'Untouchable', '3 idiots']
+            },
+            { type: 'Crime', movies: ['Training Day', 'Heat', 'American Gangster'] },
+            { type: 'Drama', movies: ['Fight Club', 'A Beautiful Mind', 'Good Will Hunting', 'City of God'] },
+            { type: 'Biography', movies: ['Amadeus', 'Bohemian Rhapsody'] },
+            { type: 'Mystery', movies: ['The Prestige', 'Memento', 'Cloud Atlas'] },
+            { type: 'Musical', movies: ['All That Jazz'] },
+            { type: 'Romance', movies: ['Love Actually', 'In The Mood for Love'] },
+            { type: 'Sci-Fi', movies: ['The Fifth Element'] },
+            { type: 'Thriller', movies: ['The Usual Suspects'] },
+            { type: 'Western', movies: ['Django Unchained'] }];
+
+    }
+
+    public onSubmit() {
+        console.log(this.user);
+    }
+}
diff --git a/src/app/routing.ts b/src/app/routing.ts
@@ -92,6 +92,7 @@ import { GridExternalFilteringComponent } from './grid-external-filtering/grid-e
 import { GridSaveStateComponent } from './grid-state/grid-state.component';
 import { AboutComponent } from './grid-state/about.component';
 import { GridMasterDetailSampleComponent } from './grid-master-detail/grid-master-detail.sample';
+import { ReactiveFormSampleComponent } from './reactive-from/reactive-form-sample.component';
 
 const appRoutes = [
     {
@@ -235,6 +236,10 @@ const appRoutes = [
         path: 'radio',
         component: RadioSampleComponent
     },
+    {
+        path: 'reactive',
+        component: ReactiveFormSampleComponent
+    },
     {
         path: 'ripple',
         component: RippleSampleComponent

Original file line number	Diff line number	Diff line change
`@@ -1185,15 +1185,18 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr`
`1185`	`1185`	`this.scrollComponent.size = totalWidth;`
`1186`	`1186`	`if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {`
`1187`	`1187`	`this.scrollPosition = 0;`
	`1188`	`+ // Need to reset the scrollAmount value here, because horizontalScrollBar is hidden, therefore`
	`1189`	`+ // onScroll event handler for VirtualHelperBaseDirective will not be called`
	`1190`	`+ this.scrollComponent.scrollAmount = 0;`
`1188`	`1191`	`}`
`1189`	`1192`	`}`
`1190`	`1193`	`if (this.igxForScrollOrientation === 'vertical') {`
`1191`	`1194`	`this.scrollComponent.nativeElement.style.height = parseInt(this.igxForContainerSize, 10) + 'px';`
`1192`	`1195`	`this.scrollComponent.size = this._calcHeight();`
`1193`	`1196`	`if ( this.scrollComponent.size <= parseInt(this.igxForContainerSize, 10)) {`
`1194`	`1197`	`this.scrollPosition = 0;`
`1195`		`- // Need to reset the scrollAmount value here, because`
`1196`		`- // Firefox will not fire the scrollComponent scroll event handler`
	`1198`	`+ // Need to reset the scrollAmount value here, because verticalScrollBar is hidden, therefore`
	`1199`	`+ // onScroll event handler for VirtualHelperBaseDirective will not be called`
`1197`	`1200`	`this.scrollComponent.scrollAmount = 0;`
`1198`	`1201`	`}`
`1199`	`1202`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3834,7 +3834,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements`
`3834`	`3834`	`} else {`
`3835`	`3835`	`this.gridAPI.sort(expression);`
`3836`	`3836`	`}`
`3837`		`- this.onSortingDone.emit(expression);`
	`3837`	`+ requestAnimationFrame(() => this.onSortingDone.emit(expression));`
`3838`	`3838`	`}`
`3839`	`3839`
`3840`	`3840`	`/**`