Merge branch '11.1.x' into gedinakova/fix-9465-11.1

Author: 3phase

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

@@ -563,7 +563,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
         if (this.keyboardSupport) {
             event.preventDefault();
             this.next();
-            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
+            this.focusSlideElement();
         }
     }
 
@@ -573,7 +573,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
         if (this.keyboardSupport) {
             event.preventDefault();
             this.prev();
-            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
+            this.focusSlideElement();
         }
     }
 
@@ -599,7 +599,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
         if (this.keyboardSupport && this.slides.length > 0) {
             event.preventDefault();
             this.slides.first.active = true;
-            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
+            this.focusSlideElement();
         }
     }
 
@@ -609,7 +609,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
         if (this.keyboardSupport && this.slides.length > 0) {
             event.preventDefault();
             this.slides.last.active = true;
-            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
+            this.focusSlideElement();
         }
     }
 
@@ -1125,6 +1125,16 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
             });
         }
     }
+    private focusSlideElement() {
+        if (this.leaveAnimationPlayer) {
+            this.leaveAnimationPlayer.onDone(() => {
+                this.slides.find(s => s.active).nativeElement.focus();
+            });
+        } else {
+            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
+        }
+    }
+
 }
 
 export interface ISlideEventArgs extends IBaseEventArgs {

src/app/carousel/carousel.sample.ts

@@ -22,9 +22,9 @@ export class CarouselSampleComponent {
 
     public addNewSlide() {
         this.slides.push(
-            {image: 'assets/images/carousel/[email protected]'},
-            {image: 'assets/images/carousel/[email protected]'},
-            {image: 'assets/images/carousel/[email protected]'}
+            {image: 'assets/images/carousel/[email protected]', active: true},
+            {image: 'assets/images/carousel/[email protected]', active: false},
+            {image: 'assets/images/carousel/[email protected]', active: false}
         );
     }
 

src/app/grid-filter-template/grid-filter-template.sample.html

@@ -38,8 +38,9 @@
                         tabindex="0"
                         placeholder="Filter..."
                         autocomplete="off"
-                        (input)="onInput(input, column)"/>
-                    <igx-suffix *ngIf="input.value || input.value === 0" (click)="clearInput(input, column)" tabindex="0">
+                        (input)="onInput(input, column)"
+                        (keydown)="onKeyDown($event)"/>
+                    <igx-suffix *ngIf="input.value" (click)="clearInput(input, column)" tabindex="0">
                         <igx-icon>clear</igx-icon>
                     </igx-suffix>
                 </igx-input-group>

src/app/grid-filter-template/grid-filter-template.sample.ts

@@ -489,22 +489,37 @@ export class GridFilterTemplateSampleComponent implements OnInit {
 
     public onInput(input: any, column: IgxColumnComponent) {
         let operand = null;
+        let value = input.value;
+
+        if (value === '') {
+            this.grid1.clearFilter(column.field);
+            return;
+        }
+
         switch (column.dataType) {
             case DataType.Number:
+                value = Number.parseInt(value, 10);
                 operand = IgxNumberFilteringOperand.instance().condition('equals');
                 break;
             case DataType.Date:
+                value = new Date(value);
                 operand = IgxDateFilteringOperand.instance().condition('equals');
                 break;
             default:
                 operand = IgxStringFilteringOperand.instance().condition('contains');
                 break;
         }
-        this.grid1.filter(column.field, input.value, operand, column.filteringIgnoreCase);
+
+        this.grid1.filter(column.field, value, operand, column.filteringIgnoreCase);
     }
 
     public clearInput(input: any, column: any) {
         input.value = null;
         this.grid1.clearFilter(column.field);
     }
+
+    public onKeyDown(event: KeyboardEvent) {
+        event.stopImmediatePropagation();
+    }
+
 }