Merge branch 'master' into bpenkov/date-range-dropdown-positioning

Author: Lipata

CHANGELOG.md

@@ -7,8 +7,10 @@ All notable changes for each version of this project will be documented in this
 - `IgxDropDown`
     - The `igx-drop-down-item` now allows for `igxPrefix`, `igxSuffix` and `igx-divider` directives to be passed as `ng-content` and they will be renderer accordingly in the item's content.
 ### General
-    - `IgxCalendar`
-        - A new string enumeration `IgxCalendarView` is exported. Either the new one or the current `CalendarView` can be used. `CalendarView` will be deprecated in a future release.
+- `IgxCalendar`
+    - A new string enumeration `IgxCalendarView` is exported. Either the new one or the current `CalendarView` can be used. `CalendarView` will be deprecated in a future release.
+- `IgxRadioGroup`
+    - Added new property `alignment` that determines the radio group alignment. Available options are `horizontal` (default) and `vertical`.
 
 ## 11.0.4
 

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

@@ -2,19 +2,19 @@
 
 Ignite UI for Angular includes over 100+ pre-built animations. They are split in 7 groups:
 
-  - [Fade](https://github.com/IgniteUI/igniteui-angular/tree/master/src/animations/fade/README.md)
-  - [Flip](https://github.com/IgniteUI/igniteui-angular/tree/master/src/animations/flip/README.md)
-  - [Miscellaneous](https://github.com/IgniteUI/igniteui-angular/tree/master/src/animations/misc/README.md)
+  - [Fade](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/animations/fade/README.md)
+  - [Flip](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/animations/flip/README.md)
+  - [Miscellaneous](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/animations/misc/README.md)
     - Blink
     - Heartbeat
     - Pulsate
     - Shake
-  - [Rotate](https://github.com/IgniteUI/igniteui-angular/tree/master/src/animations/rotate/README.md)
-  - [Scale](https://github.com/IgniteUI/igniteui-angular/tree/master/src/animations/scale/README.md)
-  - [Slide](https://github.com/IgniteUI/igniteui-angular/tree/master/src/animations/slide/README.md)
-  - [Swing](https://github.com/IgniteUI/igniteui-angular/tree/master/src/animations/swing/README.md)
+  - [Rotate](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/animations/rotate/README.md)
+  - [Scale](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/animations/scale/README.md)
+  - [Slide](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/animations/slide/README.md)
+  - [Swing](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/animations/swing/README.md)
 
-Each group accepts a different set of parameters, allowing you to modify the behavior  of any of the included animations. Each animation is an [`AnimationReferenceMetadata`](https://angular.io/api/animations/AnimationReferenceMetadata) object as produced by the [`animation`](https://angular.io/api/animations/animation) function provided by Angular.
+Each group accepts a different set of parameters, allowing you to modify the behavior of any of the included animations. Each animation is an [`AnimationReferenceMetadata`](https://angular.io/api/animations/AnimationReferenceMetadata) object as produced by the [`animation`](https://angular.io/api/animations/animation) function provided by Angular.
 
 Reusable animations are designed to make use of animations parameters and the produced animation can be used via the [`useAnimation`](https://angular.io/api/animations/useAnimation) function.
 
@@ -74,4 +74,4 @@ useAnimation(fadeIn, {
         easing: EaseOut.back
     }
 });
-```
+```

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss

@@ -121,4 +121,9 @@
 
 @include b(igx-radio-group) {
     display: block;
+
+    @include m(vertical) {
+        display: flex;
+        flex-flow: column;
+    }
 }

projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts

@@ -15,6 +15,16 @@ import { IgxRadioComponent, RadioLabelPosition, IChangeRadioEventArgs } from '..
 import { IgxRippleModule } from '../ripple/ripple.directive';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { mkenum } from '../../core/utils';
+
+/**
+ * Determines the Radio Group alignment
+ */
+export const RadioGroupAlignment = mkenum({
+    horizontal: 'horizontal',
+    vertical: 'vertical'
+});
+export type RadioGroupAlignment = (typeof RadioGroupAlignment)[keyof typeof RadioGroupAlignment];
 
 const noop = () => { };
 let nextId = 0;
@@ -189,6 +199,47 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
     @HostBinding('class.igx-radio-group')
     public cssClass = 'igx-radio-group';
 
+    /**
+     * Sets vertical alignment to the radio group, if `alignment` is set to `vertical`.
+     * By default the alignment is horizontal.
+     *
+     * @example
+     * ```html
+     * <igx-radio-group alignment="vertical"></igx-radio-group>
+     * ```
+     */
+    @HostBinding('class.igx-radio-group--vertical')
+    private vertical = false;
+
+    /**
+     * Returns the alignment of the `igx-radio-group`.
+     * ```typescript
+     * @ViewChild("MyRadioGroup")
+     * public radioGroup: IgxRadioGroupDirective;
+     * ngAfterViewInit(){
+     *    let radioAlignment = this.radioGroup.alignment;
+     * }
+     * ```
+     */
+    @Input()
+    get alignment(): RadioGroupAlignment {
+        return this.vertical ? RadioGroupAlignment.vertical : RadioGroupAlignment.horizontal;
+    }
+    /**
+     * Allows you to set the radio group alignment.
+     * Available options are `RadioGroupAlignment.horizontal` (default) and `RadioGroupAlignment.vertical`.
+     * ```typescript
+     * public alignment = RadioGroupAlignment.vertical;
+     * //..
+     * ```
+     * ```html
+     * <igx-radio-group [alignment]="alignment"></igx-radio-group>
+     * ```
+     */
+    set alignment (value: RadioGroupAlignment) {
+        this.vertical = value === RadioGroupAlignment.vertical;
+    }
+
     /**
      * @hidden
      * @internal

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

@@ -216,9 +216,9 @@ export class IgxFilteringService implements OnDestroy {
                 this.gridAPI.filter(field, value, expressionForColumn.condition, filteringIgnoreCase);
             }
         }
-
+        const eventArgs = this.grid.filteringExpressionsTree.find(field) as FilteringExpressionsTree;
         // Wait for the change detection to update filtered data through the pipes and then emit the event.
-        requestAnimationFrame(() => this.grid.onFilteringDone.emit(col.filteringExpressionsTree));
+        requestAnimationFrame(() => this.grid.onFilteringDone.emit(eventArgs));
     }
 
     /**

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

@@ -895,6 +895,17 @@ describe('IgxGrid - Filtering actions #grid', () => {
         expect(grid.rowList.length).toEqual(2);
     }));
 
+    it('Should always emit onFilteringDone with proper eventArgs, even when column does not exist', fakeAsync(() => {
+        spyOn(grid.onFilteringDone, 'emit');
+        grid.filteringLogic = FilteringLogic.Or;
+        grid.filter('Nonexisting', 'ignite', IgxStringFilteringOperand.instance().condition('contains'), true);
+        tick(100);
+        fix.detectChanges();
+        expect(grid.rowList.length).toEqual(0);
+        const args = grid.filteringExpressionsTree.find('Nonexisting') as FilteringExpressionsTree;
+        expect(grid.onFilteringDone.emit).toHaveBeenCalledWith(args);
+    }));
+
     it('Should emit onFilteringDone when filtering globally', fakeAsync(() => {
         spyOn(grid.onFilteringDone, 'emit');
 

src/app/radio/radio.sample.html

@@ -31,8 +31,8 @@ <h6 igxCardHeaderTitle>Reserve your dream vacation at {{ opt }}</h6>
 </section>
 <section class="sample-content">
     <article class="sample-column">
-        <h4 class="sample-title">Radio group without data model</h4>
-        <igx-radio-group #radioGroupZZ name="radiogroupZZ" value="Bar" required="true" (change)="onRadioChange($event)">
+        <h4 class="sample-title">Radio group without data model (Vertical Alignment)</h4>
+        <igx-radio-group #radioGroupZZ name="radiogroupZZ" value="Bar" required="true" (change)="onRadioChange($event)" [alignment]="alignment">
             <igx-radio class="radio-sample" *ngFor="let item of ['Foo', 'Bar', 'Baz']" value="{{item}}">
                 {{item}}
             </igx-radio>

src/app/radio/radio.sample.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild, AfterContentInit } from '@angular/core';
-import { IgxRadioGroupDirective } from 'igniteui-angular';
+import { IgxRadioGroupDirective, RadioGroupAlignment } from 'igniteui-angular';
 import { FormGroup, FormBuilder } from '@angular/forms';
 
 class Person {
@@ -38,6 +38,8 @@ export class RadioSampleComponent implements AfterContentInit {
     personKirk: Person = new Person('Kirk', this.seasons[1]);
     personKirkForm: FormGroup;
 
+    alignment = RadioGroupAlignment.vertical;
+
     constructor(private _formBuilder: FormBuilder) {
         this._createPersonKirkForm();
     }