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

Author: kdinev

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes for each version of this project will be documented in this
     - You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
     - You are allowed to customize tab items with labels, icons and even templates.
 - `IgxGrid`
+    - **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` 
@@ -25,8 +26,18 @@ All notable changes for each version of this project will be documented in this
         ```
 - `igx-paginator`
     - Replaces the current paginator in all grids. Can be used as a standalone component.
+      <br/>Have in mind that if you have set the `paginationTemplate`, you may have to modify your css to display the pagination correctly. The style should be something similar to:
+      ```
+      .pagination-container {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+       }
+       ```
 - `IgxCombo`
     - Input `[overlaySettings]` - allows an object of type `OverlaySettings` to be passed. These custom overlay settings control how the drop-down list displays.
+- `IgxForOf` now offers usage of local variables `even`, `odd`, `first` and `last` to help with the distinction of the currently iterated element.
+
 
 ## 8.0.2
 - `igx-list-theme` now have some new parameters for styling.

README.md

@@ -181,9 +181,7 @@ You can include Ignite UI for Angular in your project as a dependency using the
 `npm install igniteui-angular`
 
 ## Contributing
-[Coding Guidelines](../../wiki//Coding-guidelines-for-Ignite-UI-for-Angular)
-
-[General Naming Guidelines](../../wiki//General-Naming-Guidelines-for-Ignite-UI-for-Angular)
+[General Naming and Coding Guidelines for Ignite UI for Angular](https://github.com/IgniteUI/igniteui-angular/wiki/General-Naming-and-Coding--Guidelines-for-Ignite-UI-for-Angular)
 
 ## Demo Apps & Documentation
 The [Warehouse Picklist App](https://github.com/IgniteUI/warehouse-js-blocks) demonstrates using several Ignite UI for Angular widgets together to build a modern, mobile app.

ROADMAP.md

@@ -2,41 +2,82 @@
 
 # Current Milestone
 
-## Milestone 8 (Due by July, 2019) 
+## Milestone 9 (Due by September, 2019) 
+
+1. IgxGrid Advanced Filtering [#5496](https://github.com/IgniteUI/igniteui-angular/issues/5496)
+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)
+
+## Going down the road
+
+1. Row-pinning
+2. Column Groups expand/collapse, with column grouping templates
+3. Visual Cell merging 
+
+# Previous Milestones
+
+## Milestone 8 (Released July 22nd, 2019) 
 
 1. **[DONE]** Grid Multi-Row Layout keyboard nav [#4708](https://github.com/IgniteUI/igniteui-angular/issues/4708) Released in [8.0.0](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.0), [7.3.4](https://github.com/IgniteUI/igniteui-angular/releases/tag/7.3.4)
 2. **[DONE]** Angular 8 compatibility [#4908](https://github.com/IgniteUI/igniteui-angular/issues/4908) Released in [8.0.0](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.0)
 3. **[DONE]** Display density for Drop Downs [#2960](https://github.com/IgniteUI/igniteui-angular/issues/2960) Released in [8.0.1](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.1), [7.3.4](https://github.com/IgniteUI/igniteui-angular/releases/tag/7.3.4), [7.2.12](https://github.com/IgniteUI/igniteui-angular/releases/tag/7.2.12)
-4. Slider custom labels #4594
-5. Copy data from the igxGrid #4907
-6. BottomNav and Tabs integration with router outlet container [#4297](https://github.com/IgniteUI/igniteui-angular/issues/4297)
+4. **[DONE]** Slider custom labels [#4594](https://github.com/IgniteUI/igniteui-angular/issues/4594)
+5. **[DONE]** Copy data from the igxGrid [#4907](https://github.com/IgniteUI/igniteui-angular/issues/4907)
+6. **[DONE]** BottomNav and Tabs integration with router outlet container [#4297](https://github.com/IgniteUI/igniteui-angular/issues/4297)
 7. **[DONE]** Date/Time pickers action buttons customization [#4647](https://github.com/IgniteUI/igniteui-angular/issues/4647) Released in [8.0.0](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.0)
 8. **[DONE]** Square and oval presets in theming [#4964](https://github.com/IgniteUI/igniteui-angular/issues/4964) Released in [8.0.0](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.0)
-9. Grid column group header templates [#3344](https://github.com/IgniteUI/igniteui-angular/issues/3344)
+9. **[DONE]** Grid column group header templates [#3344](https://github.com/IgniteUI/igniteui-angular/issues/3344)
 
+## Milestone 7 (13.05.2019) 
 
-## Going down the road
+1. **[DONE]** Multi-cell Selection #3915
+2. **[DONE]** Grid Multi-Row Layout #4384
+3. **[DONE]** Grid Row Dragging #3993
+3. **[DONE]** List, button, button group display density support #4393 #4502 #4532
 
-1. Advanced Filtering
-2. Row-pinning
-3. Column Groups expand/collapse, with column grouping templates
-4. Visual Cell merging 
+## Milestone 6 (Due March 8th, 2019)
 
+1. **[DONE]** Hierarchical Grid #827 
+2. **[DROPPED]** igxGrid rendering strategies (like record-based rendering) #2384
+3. **[DONE]** Auto-complete (inline editable) #3585
+4. **[DONE]** Excel Style Filtering #3592
+5. **[DONE]** Inline date and time pickers (with drop down/toggle) #3034 #2337
+6. **[DONE]** igxSelect Component #3148
 
-# Previous Milestones
+## Milestone 5 (14.12.2018)
 
-## Milestone 1 (by January 15th, 2018)
+1. **[DONE]** TreeGrid summaries
+2. **[DONE]** Grid GroupBy summaries
+3. **[DONE]** Banner Component [issue](https://github.com/IgniteUI/igniteui-angular/issues/2672)
+4. **[DONE]** Toolbar Templatable and NavBar Templatable
+
+## Milestone 4 (November 30th, 2018)
+
+1. **[Done]** Tree Grid [issue](https://github.com/IgniteUI/igniteui-angular/issues/2530)
+2. **[Done]** Quick Per-column Search in the igxGrid [issue](https://github.com/IgniteUI/igniteui-angular/issues/542)
+3. **[Done]** Expandable Panel [issue](https://github.com/IgniteUI/igniteui-angular/issues/307)
+4. **[Done]** Conditional Cell Styling capability [issue](https://github.com/IgniteUI/igniteui-angular/issues/1079)
+5. **[Done]** igxTypography for theming
+6. **[Done]** Tooltip [issue](https://github.com/IgniteUI/igniteui-angular/issues/1710)
+7. **[Removed]** Vertical Tabs - material doesn't define vertical tabs 
+8. **[Done]** Row Editing with transactions (Batch editing) [issue](https://github.com/IgniteUI/igniteui-angular/issues/566)
+9. **[Done]** Adding Disabled Dates and Special Dates options in igxCalander [issue](https://github.com/IgniteUI/igniteui-angular/issues/1980)
+10. **[Done]** Drag and Drop Directive
+
+## Milestone 3 (by July 6th, 2018)
+
+1. **[DONE]** Grouping
+2. **[DONE]** Grid Multi-column Headers [issue](https://github.com/IgniteUI/igniteui-angular/issues/488)
+3. **[DONE]** Combo
+4. **[DONE]** Column Hiding UI
+5. **[DONE]** Operations UI - column chooser
+6. **[DONE]** Advanced Filtering
+7. **[DONE]** Column Moving
+8. **[DONE]** Update to Angular 6
+9. **[DONE]** Design: Release Updated Design System (Sketch UI kits, UI patterns, screens, documentation)
+10. **[DONE]** Design: Data dense theme for data grid 
 
-1. **[DONE]** Row objects - 1st sprint (by November 20th, 2017) [issue](https://github.com/IgniteUI/igniteui-angular/issues/479)  
-	In order to implement virtualization in the Grid, we would need a row object to be abstracted. 
-2. **[DONE]** Cell objects - 2nd sprint (by December 11th, 2017) [issue](https://github.com/IgniteUI/igniteui-angular/issues/480)  
-3. **[DONE]** Grid Row virtualization - after row objects and virtualization are implemented
-4. **[DONE]** Grid Column virtualization - after row objects and column component refactoring are done  
-	This feature enables Grid columns to be virtualized. The feature splits records into parts, and only a certain part of the record is rendered.
-5. **[DONE]** Alternating row style  [issue](https://github.com/IgniteUI/igniteui-angular/issues/489)
-6. **[DONE]** Ignite UI CLI integration [issue](https://github.com/IgniteUI/ignite-ui-cli/issues/53)  
-    Ignite UI CLI will also provide Ignite UI for Angular templates, views, and components integration. All features of the CLI will be accessible in the context of Ignite UI for Angular, as well as the full Ignite UI product suite.
-    
 ## Milestone 2 (due April 25th, 2018)
 
 1. **[DONE]** Expanding Ignite UI CLI views and templates with Ignite UI for Angular 
@@ -57,52 +98,14 @@
 13. **[DONE]** Charting: Category Chart types Line (Area, Column, Point, StepLine, StepArea, Spline, SplineArea, Waterfall
 14. **[DONE]** Charting: Financial Chart types
 
+## Milestone 1 (by January 15th, 2018)
 
-## Milestone 3 (by July 6th, 2018)
-
-1. **[DONE]** Grouping
-2. **[DONE]** Grid Multi-column Headers [issue](https://github.com/IgniteUI/igniteui-angular/issues/488)
-3. **[DONE]** Combo
-4. **[DONE]** Column Hiding UI
-5. **[DONE]** Operations UI - column chooser
-6. **[DONE]** Advanced Filtering
-7. **[DONE]** Column Moving
-8. **[DONE]** Update to Angular 6
-9. **[DONE]** Design: Release Updated Design System (Sketch UI kits, UI patterns, screens, documentation)
-10. **[DONE]** Design: Data dense theme for data grid 
-
-## Milestone 4 (November 30th, 2018)
-
-1. **[Done]** Tree Grid [issue](https://github.com/IgniteUI/igniteui-angular/issues/2530)
-2. **[Done]** Quick Per-column Search in the igxGrid [issue](https://github.com/IgniteUI/igniteui-angular/issues/542)
-3. **[Done]** Expandable Panel [issue](https://github.com/IgniteUI/igniteui-angular/issues/307)
-4. **[Done]** Conditional Cell Styling capability [issue](https://github.com/IgniteUI/igniteui-angular/issues/1079)
-5. **[Done]** igxTypography for theming
-6. **[Done]** Tooltip [issue](https://github.com/IgniteUI/igniteui-angular/issues/1710)
-7. **[Removed]** Vertical Tabs - material doesn't define vertical tabs 
-8. **[Done]** Row Editing with transactions (Batch editing) [issue](https://github.com/IgniteUI/igniteui-angular/issues/566)
-9. **[Done]** Adding Disabled Dates and Special Dates options in igxCalander [issue](https://github.com/IgniteUI/igniteui-angular/issues/1980)
-10. **[Done]** Drag and Drop Directive
-
-## Milestone 5 (14.12.2018)
-
-1. **[DONE]** TreeGrid summaries
-2. **[DONE]** Grid GroupBy summaries
-3. **[DONE]** Banner Component [issue](https://github.com/IgniteUI/igniteui-angular/issues/2672)
-4. **[DONE]** Toolbar Templatable and NavBar Templatable
-
-## Milestone 6 (Due March 8th, 2019)
-
-1. **[DONE]** Hierarchical Grid #827 
-2. **[DROPPED]** igxGrid rendering strategies (like record-based rendering) #2384
-3. **[DONE]** Auto-complete (inline editable) #3585
-4. **[DONE]** Excel Style Filtering #3592
-5. **[DONE]** Inline date and time pickers (with drop down/toggle) #3034 #2337
-6. **[DONE]** igxSelect Component #3148
-
-## Milestone 7 (13.05.2019) 
-
-1. **[DONE]** Multi-cell Selection #3915
-2. **[DONE]** Grid Multi-Row Layout #4384
-3. **[DONE]** Grid Row Dragging #3993
-3. **[DONE]** List, button, button group display density support #4393 #4502 #4532
+1. **[DONE]** Row objects - 1st sprint (by November 20th, 2017) [issue](https://github.com/IgniteUI/igniteui-angular/issues/479)  
+	In order to implement virtualization in the Grid, we would need a row object to be abstracted. 
+2. **[DONE]** Cell objects - 2nd sprint (by December 11th, 2017) [issue](https://github.com/IgniteUI/igniteui-angular/issues/480)  
+3. **[DONE]** Grid Row virtualization - after row objects and virtualization are implemented
+4. **[DONE]** Grid Column virtualization - after row objects and column component refactoring are done  
+	This feature enables Grid columns to be virtualized. The feature splits records into parts, and only a certain part of the record is rendered.
+5. **[DONE]** Alternating row style  [issue](https://github.com/IgniteUI/igniteui-angular/issues/489)
+6. **[DONE]** Ignite UI CLI integration [issue](https://github.com/IgniteUI/ignite-ui-cli/issues/53)  
+    Ignite UI CLI will also provide Ignite UI for Angular templates, views, and components integration. All features of the CLI will be accessible in the context of Ignite UI for Angular, as well as the full Ignite UI product suite.

projects/igniteui-angular/src/lib/combo/combo-item.component.html

@@ -1,4 +1,4 @@
 <ng-container *ngIf="!isHeader">
-    <igx-checkbox [checked]="selected" disableRipple="true" [disableTransitions]="disableTransitions" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
+    <igx-checkbox [checked]="selected" disableRipple="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
 </ng-container>
 <ng-content></ng-content>

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

@@ -99,6 +99,19 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent implements D
         this.comboAPI.set_selected_item(this.itemID, event);
     }
 
+    /**
+     * @hidden
+     * @internal
+     * The event that is prevented is the click on the checkbox label element.
+     * That is the only visible element that a user can interact with.
+     * The click propagates to the host and the preventDefault is to stop it from
+     * switching focus to the input it's base on.
+     * The toggle happens in an internal handler in the drop-down on the next task queue cycle.
+     */
+    disableCheck(event: MouseEvent) {
+        event.preventDefault();
+    }
+
     ngDoCheck() {
     }
 }

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -74,7 +74,7 @@
             </ng-container>
         </div>
         <igx-combo-add-item [itemHeight]='itemHeight' *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1"
-            class="igx-combo__add-item" igxRipple role="button" aria-label="Add Item" [index]="virtualScrollContainer.igxForOf.length">
+            class="igx-combo__add-item" role="button" aria-label="Add Item" [index]="virtualScrollContainer.igxForOf.length">
             <ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault">
             </ng-container>
         </igx-combo-add-item>

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

@@ -29,6 +29,7 @@ const CSS_CLASS_DROPDOWNBUTTON = 'igx-combo__toggle-button';
 const CSS_CLASS_CLEARBUTTON = 'igx-combo__clear-button';
 const CSS_CLASS_CHECK_GENERAL = 'igx-combo__checkbox';
 const CSS_CLASS_CHECKBOX = 'igx-checkbox';
+const CSS_CLASS_CHECKBOX_LABEL = 'igx-checkbox__composite';
 const CSS_CLASS_CHECKED = 'igx-checkbox--checked';
 const CSS_CLASS_TOGGLE = 'igx-toggle';
 const CSS_CLASS_SELECTED = 'igx-drop-down__item--selected';
@@ -950,7 +951,7 @@ describe('igxCombo', () => {
         }
         function clickItemCheckbox(dropdownElement: any, itemIndex: number) {
             const dropdownItems = dropdownElement.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
-            const checkbox = dropdownItems[itemIndex].querySelector('.' + CSS_CLASS_CHECKBOX) as HTMLElement;
+            const checkbox = dropdownItems[itemIndex].querySelector('.' + CSS_CLASS_CHECKBOX_LABEL) as HTMLElement;
             checkbox.click();
         }
         function verifyItemIsSelected(

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -349,12 +349,12 @@
 ///   // }
 ///   // otherwise, it will return the value for key 'icon-color' in the '$avatar-theme';
 /// @returns {String} - The value of the key in the passed map, or the name of key concatenated with the key name.
-@function --var($map, $key) {
+@function --var($map, $key, $fallback: '') {
     $igx-legacy-support: if(global-variable-exists('igx-legacy-support'), $igx-legacy-support, true);
 
     @if map-has-key($map, $key) {
         @if $igx-legacy-support == false {
-            @return unquote('var(--#{map-get($map, 'name')}-#{$key})');
+            @return unquote('var(--#{map-get($map, 'name')}-#{$key}, #{$fallback})');
         } @else {
             @return map-get($map, $key);
         }

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -121,6 +121,7 @@
     }
 
     %cbx-composite-wrapper {
+        position: relative;
         width: $size;
         height: $size;
     }

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

@@ -9,6 +9,7 @@
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
 ///
 /// @param {Color} $background-color [null] - The summaries background color is inherited form igx-grid__tfoot
+/// @param {Color} $focus-background-color [null] - The background color when a summary item is on focus.
 /// @param {Color} $label-color [null] - The summaries label color.
 /// @param {Color} $result-color [null] - The summaries value/result color.
 /// @param {Color} $border-color [null] - The summaries border color.
@@ -35,6 +36,7 @@
     $schema: $light-schema,
 
     $background-color: null,
+    $focus-background-color: null,
     $label-color: null,
     $result-color: null,
     $border-color: null,
@@ -62,6 +64,7 @@
         name: $name,
         palette: $palette,
         background-color: $background-color,
+        focus-background-color: $focus-background-color,
         label-color: $label-color,
         result-color: $result-color,
         border-color: $border-color,
@@ -98,12 +101,27 @@
     );
 
     %igx-grid-summary {
+        position: relative;
         display: flex;
         flex-direction: column;
         flex: 1 1 0%;
         padding: map-get($summary-padding, 'comfortable');
-        background: --var($theme, 'background-color');
+        background: --var($theme, 'background-color', inherit);
         overflow: hidden;
+        outline-style: none;
+
+        &::after {
+            position: absolute;
+            content: '';
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+
+        &:focus::after {
+            background: --var($theme, 'focus-background-color');
+        }
     }
 
     %igx-grid-summary--cosy {

projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss

@@ -61,6 +61,10 @@
             width: inherit;
             height: inherit;
             fill: currentColor;
+
+            use {
+                pointer-events: none;
+            }
         }
     }