Merge branch 'master' into SKrastev/drag-drop-refactor

Author: kdinev

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 8.1.2
+
+### New Features
+- `IgxDatePicker`
+    - `valueChange` event is added.
+
 ## 8.1.0
 
 ### New Features
@@ -15,7 +21,7 @@ All notable changes for each version of this project will be documented in this
     - **Behavioral Change** - paging now includes the group rows in the page size. You may find more information about the change in the [GroupBy Specification](https://github.com/IgniteUI/igniteui-angular/wiki/Group-By-Specification)
     - `IgxColumnGroup`
         - Re-templating the column group header is now possible using the `headerTemplate` input property or the `igxHeader` directive.
-    - `igx-grid-footer` 
+    - `igx-grid-footer`
         - You can use this to insert a custom footer in the grids.
          ```html
         <igx-grid>
@@ -41,21 +47,21 @@ All notable changes for each version of this project will be documented in this
 
 ## 8.0.2
 - `igx-list-theme` now have some new parameters for styling.
-    - $item-background-hover - Change The list item hover background 
+    - $item-background-hover - Change The list item hover background
     - $item-text-color-hover - Change The list item hover text color.
-    
+
     - $item-subtitle-color - Change The list item subtitle color.
     - $item-subtitle-color-hover - Change The list item hover subtitle color.
     - $item-subtitle-color-active - Change The active list item subtitle color.
-    
+
     - $item-action-color - Change The list item actions color.
     - $item-action-color-hover - Change The list item hover actions color.
     - $item-action-color-active - Change The active list item actions color.
-    
+
     - $item-thumbnail-color - Change The list item thumbnail color.
     - $item-thumbnail-color-hover - Change The list item hover thumbnail color.
     - $item-thumbnail-color-active - Change The active list item thumbnail color.
-    
+
 - **Behavioral Change** default min column width is changed according the grid display density property:
     - for `DisplayDensity.comfortable` defaultMinWidth is `80px`;
     - for `DisplayDensity.cosy` defaultMinWidth is `64px`;

ROADMAP.md

@@ -8,6 +8,9 @@
 2. IgxGrid row and cell selection modes [#4989](https://github.com/IgniteUI/igniteui-angular/issues/4989)
 3. Fluent Theme [#5335](https://github.com/IgniteUI/igniteui-angular/issues/5335)
 4. Drag and Drop enhancements [#5319](https://github.com/IgniteUI/igniteui-angular/issues/5319)
+5. Multi-View Calendar + Range DatePicker [#4282](https://github.com/IgniteUI/igniteui-angular/issues/4282)
+6. Custom grid row selector templates [#4998](https://github.com/IgniteUI/igniteui-angular/issues/4998)
+7. Per-column Filtering Strategies [#5323](https://github.com/IgniteUI/igniteui-angular/issues/5323)
 
 ## Going down the road
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss

@@ -68,6 +68,11 @@
             @extend %grid-excel-actions__action !optional;
         }
 
+        @include e(actions-pin, $m: disabled) {
+            @extend %grid-excel-actions__action !optional;
+            @extend %grid-excel-actions__action--disabled !optional;
+        }
+
         @include e(actions-unpin) {
             @extend %grid-excel-actions__action !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -18,6 +18,7 @@
 /// @param {Color} $header-border-color [null] - The color used for header borders.
 ///
 /// @param {Color} $sorted-header-icon-color [null] - The sort icon color when sorted.
+/// @param {color} $sortable-header-icon-hover-color [null] - The icon color on hover in grid header when the column is sortable.
 ///
 /// @param {Color} $content-background [null] - The table body background color.
 /// @param {Color} $content-text-color [null] - The table body text color.
@@ -192,6 +193,7 @@
     $row-ghost-background: null,
     $row-drag-color: null,
     $drop-area-border-radius: null,
+    $sortable-header-icon-hover-color: null
 ) {
     $name: 'igx-grid';
     $grid-schema: map-get($schema, $name);
@@ -474,7 +476,8 @@
         drag-shadow: $drag-shadow,
         row-ghost-background: $row-ghost-background,
         row-drag-color: $row-drag-color,
-        drop-area-border-radius: $drop-area-border-radius
+        drop-area-border-radius: $drop-area-border-radius,
+        sortable-header-icon-hover-color: $sortable-header-icon-hover-color
     ));
 }
 

projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss

@@ -373,7 +373,7 @@
     }
 
     %igx-list__item-lines {
-        color: --var($theme, 'item-text-color');
+        color: currentColor;
         display: flex;
         flex-direction: column;
         flex: 1 0 0%;

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

@@ -12,7 +12,8 @@
 /// @prop {Map} header-background [igx-color: ('grays', 100), hexrgba: #fff] - The table header background color.
 /// @prop {Map} header-text-color [igx-color: ('grays', 600)] - The table header text color.
 ///
-/// @prop {Map} $sorted-header-icon-color [igx-color: ('secondary', 500)] - The sorted table header icon color.
+/// @prop {Map} sorted-header-icon-color [igx-color: ('secondary', 500)] - The sorted table header icon color.
+/// @prop {Map} sortable-header-icon-hover-color [igx-color: ('secondary', 500)] - The icon color on hover in grid header when the column is sortable.
 ///
 /// @prop {Number} header-border-width [1px] - The border width used for header borders.
 /// @prop {String} header-border-style [solid] - The border style used for header borders.
@@ -85,22 +86,10 @@ $_light-grid: extend(
             igx-color: ('grays', 600)
         ),
 
-        sortable-header-hover-color: (
-            igx-color: ('grays', 900)
-        ),
-
-        sortable-header-hover-icon-color: (
-            igx-color: ('grays', 500)
-        ),
-
         sortable-header-icon-hover-color: (
             igx-color: ('secondary', 500)
         ),
 
-        sorted-header-color: (
-            igx-color: ('grays', 900)
-        ),
-
         sorted-header-icon-color: (
             igx-color: ('secondary', 500)
         ),

projects/igniteui-angular/src/lib/core/touch.ts

@@ -20,11 +20,11 @@ export class HammerGesturesManager {
         inputClass: Hammer.TouchInput,
         recognizers: [
             [ Hammer.Pan, { threshold: 0 } ],
-            [ Hammer.Pinch, { enable: true } ],
-            [ Hammer.Rotate, { enable: true } ],
             [ Hammer.Swipe, {
                 direction: Hammer.DIRECTION_HORIZONTAL
-            }]
+            }],
+            [Hammer.Tap],
+            [Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']]
         ]
     };
 
@@ -44,14 +44,14 @@ export class HammerGesturesManager {
     public addEventListener(element: HTMLElement,
                             eventName: string,
                             eventHandler: (eventObj) => void,
-                            options: object = null): () => void {
+                            options: HammerOptions = null): () => void {
 
         // Creating the manager bind events, must be done outside of angular
         return this._zone.runOutsideAngular(() => {
             let mc: HammerManager = this.getManagerForElement(element);
             if (mc === null) {
                 // new Hammer is a shortcut for Manager with defaults
-                mc = new Hammer(element, this.hammerOptions);
+                mc = new Hammer(element, Object.assign(this.hammerOptions, options));
                 this.addManagerForElement(element, mc);
             }
             const handler = (eventObj) => { this._zone.run(() => { eventHandler(eventObj); }); };

projects/igniteui-angular/src/lib/core/utils.ts

@@ -170,7 +170,7 @@ export const enum KEYS {
  */
 export function getNodeSizeViaRange(range: Range, node: any): number {
     let overflow = null;
-    if (isIE() || isEdge()) {
+    if (!isFirefox()) {
         overflow = node.style.overflow;
         // we need that hack - otherwise content won't be measured correctly in IE/Edge
         node.style.overflow = 'visible';
@@ -179,7 +179,7 @@ export function getNodeSizeViaRange(range: Range, node: any): number {
     range.selectNodeContents(node);
     const width = range.getBoundingClientRect().width;
 
-    if (isIE() || isEdge()) {
+    if (!isFirefox()) {
         // we need that hack - otherwise content won't be measured correctly in IE/Edge
         node.style.overflow = overflow;
     }

projects/igniteui-angular/src/lib/date-picker/README.md

@@ -81,7 +81,7 @@ In order to re-template a date picker in `dropdown` mode, you should pass the dr
 ```html
 <igx-date-picker>
     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value" let-displayData="displayData">
-        <igx-input-group (click)="openDialog(dropDownTarget)" #dropDownTarget> 
+        <igx-input-group (click)="openDialog(dropDownTarget)" #dropDownTarget>
             <label igxLabel>Date</label>
             <input igxInput [value]="displayData"/>
         </igx-input-group>
@@ -133,10 +133,12 @@ The DatePicker action buttons could be retemplated.
 | Name | Return Type | Description |
 |:--:|:---|:---|
 | `onSelection` | `Date` | Fired when selection is made in the calendar. The event contains the selected value(s) based on the type of selection the component is set to |
-| `onOpen`  | `datePicker` | Emitted when a datePicker calendar is being opened. |
-| `onClose`  | `datePicker` | Emitted when a datePicker calendar is being closed. |
+| `onOpened`  | `datePicker` | Emitted when a datePicker calendar is opened. |
+| `onClosed`  | `datePicker` | Emitted when a datePicker calendar is closed. |
+| `onClosing`  | `CancelableBrowserEventArgs` | Emitted when a datePicker calendar is being closed. |
 | `onDisabledDate`  | `IDatePickerDisabledDateEventArgs` | Emitted when a disabled date is entered in `dropdown` mode. |
 | `onValidationFailed`  | `IDatePickerValidationFailedEventArgs` | Emitted when an invalid date is entered in `dropdown` mode. |
+| `valueChange` | `Date` | Fired when date picker value is changed |
 
 ### Methods
 | Name   | Arguments | Return Type | Description |

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

@@ -74,15 +74,15 @@ describe('IgxDatePicker', () => {
             const dom = fixture.debugElement;
             const target = dom.query(By.css('.igx-date-picker__input-date'));
 
-            spyOn(datePicker.onOpen, 'emit');
-            spyOn(datePicker.onClose, 'emit');
+            spyOn(datePicker.onOpened, 'emit');
+            spyOn(datePicker.onClosed, 'emit');
 
             UIInteractions.clickElement(target);
             fixture.detectChanges();
             await wait();
 
-            expect(datePicker.onOpen.emit).toHaveBeenCalled();
-            expect(datePicker.onOpen.emit).toHaveBeenCalledWith(datePicker);
+            expect(datePicker.onOpened.emit).toHaveBeenCalled();
+            expect(datePicker.onOpened.emit).toHaveBeenCalledWith(datePicker);
 
             const overlayDiv = document.getElementsByClassName('igx-overlay__wrapper--modal')[0];
             expect(overlayDiv).toBeDefined();
@@ -92,17 +92,20 @@ describe('IgxDatePicker', () => {
             fixture.detectChanges();
             await wait();
 
-            expect(datePicker.onClose.emit).toHaveBeenCalled();
-            expect(datePicker.onClose.emit).toHaveBeenCalledWith(datePicker);
+            expect(datePicker.onClosed.emit).toHaveBeenCalled();
+            expect(datePicker.onClosed.emit).toHaveBeenCalledWith(datePicker);
         });
 
-        it('Datepicker onSelection event and selectDate method propagation', () => {
+        it('Datepicker onSelection and valueChange events and selectDate method propagation', () => {
             spyOn(datePicker.onSelection, 'emit');
+            spyOn(datePicker.valueChange, 'emit');
             const newDate: Date = new Date(2016, 4, 6);
-            datePicker.selectDate(newDate);
+                    datePicker.selectDate(newDate);
             fixture.detectChanges();
 
             expect(datePicker.onSelection.emit).toHaveBeenCalled();
+            expect(datePicker.valueChange.emit).toHaveBeenCalled();
+            expect(datePicker.valueChange.emit).toHaveBeenCalledWith(newDate);
             expect(datePicker.value).toBe(newDate);
         });
 
@@ -611,15 +614,15 @@ describe('IgxDatePicker', () => {
             const iconDate = dom.query(By.css('.igx-icon'));
             expect(iconDate).not.toBeNull();
 
-            spyOn(datePicker.onOpen, 'emit');
-            spyOn(datePicker.onClose, 'emit');
+            spyOn(datePicker.onOpened, 'emit');
+            spyOn(datePicker.onClosed, 'emit');
 
             UIInteractions.clickElement(iconDate);
             fixture.detectChanges();
             await wait();
 
-            expect(datePicker.onOpen.emit).toHaveBeenCalled();
-            expect(datePicker.onOpen.emit).toHaveBeenCalledWith(datePicker);
+            expect(datePicker.onOpened.emit).toHaveBeenCalled();
+            expect(datePicker.onOpened.emit).toHaveBeenCalledWith(datePicker);
 
             const dropDown = document.getElementsByClassName('igx-date-picker--dropdown');
             expect(dropDown.length).toBe(1);
@@ -630,8 +633,8 @@ describe('IgxDatePicker', () => {
             fixture.detectChanges();
             await wait();
 
-            expect(datePicker.onClose.emit).toHaveBeenCalled();
-            expect(datePicker.onClose.emit).toHaveBeenCalledWith(datePicker);
+            expect(datePicker.onClosed.emit).toHaveBeenCalled();
+            expect(datePicker.onClosed.emit).toHaveBeenCalledWith(datePicker);
         });
 
         it('Handling keyboard navigation with `space`(open) and `esc`(close) buttons - dropdown mode', fakeAsync(() => {
@@ -677,13 +680,16 @@ describe('IgxDatePicker', () => {
             expect(overlays.length).toEqual(0);
         }));
 
-        it('Datepicker onSelection event and selectDate method propagation - dropdown mode', () => {
+        it('Datepicker onSelection  and valueChange events and selectDate method propagation - dropdown mode', () => {
             spyOn(datePicker.onSelection, 'emit');
+            spyOn(datePicker.valueChange, 'emit');
             const newDate: Date = new Date(2016, 4, 6);
             datePicker.selectDate(newDate);
             fixture.detectChanges();
 
             expect(datePicker.onSelection.emit).toHaveBeenCalled();
+            expect(datePicker.valueChange.emit).toHaveBeenCalled();
+            expect(datePicker.valueChange.emit).toHaveBeenCalledWith(newDate);
             expect(datePicker.value).toBe(newDate);
 
             const input = fixture.debugElement.query(By.directive(IgxInputDirective));
@@ -923,12 +929,15 @@ describe('IgxDatePicker', () => {
         }));
 
         it('should reset value on clear button click - dropdown mode', () => {
-            const input = fixture.debugElement.query(By.directive(IgxInputDirective));
+            spyOn(datePicker.valueChange, 'emit');
+                   const input = fixture.debugElement.query(By.directive(IgxInputDirective));
             const dom = fixture.debugElement;
             const clear = dom.queryAll(By.css('.igx-icon'))[1];
             UIInteractions.clickElement(clear);
             fixture.detectChanges();
 
+            expect(datePicker.valueChange.emit).toHaveBeenCalled();
+            expect(datePicker.valueChange.emit).toHaveBeenCalledWith(null);
             expect(datePicker.value).toEqual(null);
             expect(input.nativeElement.innerText).toEqual('');