Merge branch 'master' into master-export-igxpaginator

Author: hanastasov

CHANGELOG.md

@@ -16,12 +16,27 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
 
+### New Features
+- `IgxOverlayService`:
+    - `setOffset` method added. It repositions the content in the horizontal and vertical directions.
+- `IgxToggleDirective`:
+    - `setOffset` method added. It repositions the content in the horizontal and vertical directions.
+
+## 8.2.6
+
+### New Features
+- `IgxSelectItem`
+    - `text` input is added. By default, the Select component will display the selected item's element inner text. In cases with a more complex item template, where more than just text interpolation is used, set the text property to specify what to display in the select field when the item is selected.
+
+
 ## 8.2.4
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - The header text of the columns and the column groups now has the `title` attribute set to it in order to expose a native browser tooltip.
 
 ### RTL Support
-Most of the components in the framework now have full right-to-left (RTL) support via the newly included RTL themes. 
+Most of the components in the framework now have full right-to-left (RTL) support via the newly included RTL themes.
 
-For CSS-based projects add `node_modules/igniteui-angular/styles/igniteui-angular-rtl.css` to your angular.json styles collection. 
+For CSS-based projects add `node_modules/igniteui-angular/styles/igniteui-angular-rtl.css` to your angular.json styles collection.
 
 For Sass-based projects pass `$direction` to the `igx-core` mixin in your root stylesheet.
 
@@ -37,7 +52,7 @@ Currently the following components have only partial RTL support:
  - Circular Progress Indicator (igx-circular-bar)
 
  We plan on adding support for the aforementioned components in the upcoming releases.
- 
+
 ### New Features
 
 - Columns now expose the `cellStyles` property which allows conditional styling of the column cells. Similar to `cellClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation.
@@ -59,6 +74,20 @@ The callback signature for both `cellStyles` and `cellClasses` is now changed to
 
 - `IgxChip`
     - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provides the events, passed from the `igxDrag` directive. The passed original events are in other words the previous events that triggered the `igxChip` ones. They also have original events until a browser event is reached.
+- `IgxGrid` - Now you can access all grid data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand `operate` method.
+
+```typescript
+class MySummary extends IgxNumberSummaryOperand {
+    constructor() {
+        super();
+    }
+    operate(columnData: any[], allGridData = [], fieldName?): IgxSummaryResult[] {
+        const result = super.operate(allData.map(r => r[fieldName]));
+        result.push({ key: 'test', label: 'Total Discounted', summaryResult: allData.filter((rec) => rec.Discontinued).length });
+        return result;
+    }
+}
+```
 
 ## 8.2.0
 ### New theme

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

@@ -1,5 +1,5 @@
 import { IgxComboItemComponent } from './combo-item.component';
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 
 /**
  * @hidden
@@ -16,8 +16,19 @@ export class IgxComboAddItemComponent extends IgxComboItemComponent {
     set selected(value: boolean) {
     }
 
-    clicked(event?) {
+    /**
+     * @hidden
+     * @internal
+     * This is related to https://github.com/angular/angular/issues/33300
+     * When the above is fixed, we can remove the @HostListener decorator and move
+     * the body of the `handleClick` method back under `clicked`
+     */
+    @HostListener('click')
+    handleClick() {
         this.comboAPI.disableTransitions = false;
         this.comboAPI.add_custom_item();
     }
+
+    clicked(event?) {
+    }
 }

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

@@ -4,8 +4,7 @@ import {
     HostBinding,
     Inject,
     Input,
-    DoCheck,
-    HostListener
+    DoCheck
 } from '@angular/core';
 import { IgxDropDownItemComponent } from '../drop-down/drop-down-item.component';
 import { IGX_DROPDOWN_BASE, IDropDownBase, Navigate } from '../drop-down/drop-down.common';
@@ -85,7 +84,6 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent implements D
         return rect.y >= parentDiv.y;
     }
 
-    @HostListener('click', ['$event'])
     clicked(event) {
         this.comboAPI.disableTransitions = false;
         if (this.disabled || this.isHeader) {

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -1,6 +1,5 @@
 import { ElementRef, EventEmitter, InjectionToken } from '@angular/core';
 import { CancelableEventArgs, CancelableBrowserEventArgs } from '../core/utils';
-import { IFilteringExpression } from '../data-operations/filtering-expression.interface';
 
 export const IGX_COMBO_COMPONENT = new InjectionToken<IgxComboBase>('IgxComboComponentToken');
 
@@ -12,7 +11,6 @@ export interface IgxComboBase {
     groupKey: string;
     isRemote: boolean;
     filteredData: any[];
-    filteringExpressions: IFilteringExpression[];
     totalItemCount: number;
     itemsMaxHeight: number;
     itemHeight: number;

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

@@ -1,19 +1,3 @@
-<ng-template #complex let-display let-data="data" let-key="displayKey">
-    {{display[key]}}
-</ng-template>
-<ng-template #primitive let-display>
-    {{display}}
-</ng-template>
-<ng-template #empty>
-    <span>The list is empty</span>
-</ng-template>
-<ng-template #addItemDefault let-control>
-    <button igxButton="flat" igxRipple>Add item</button>
-</ng-template>
-<ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
-    {{ item[key] }}
-</ng-template>
-
 <igx-input-group #inputGroup [displayDensity]="displayDensity" [type]="type" (click)="onInputClick($event)">
     <ng-container ngProjectAs="[igxLabel]">
         <ng-content select="[igxLabel]"></ng-content>
@@ -22,28 +6,34 @@
         <ng-content select="igx-prefix"></ng-content>
     </ng-container>
     <ng-container ngProjectAs="igx-hint, [igxHint]">
-            <ng-content select="igx-hint, [igxHint]"></ng-content>
-        </ng-container>
+        <ng-content select="igx-hint, [igxHint]"></ng-content>
+    </ng-container>
     <input igxInput #comboInput name="comboInput" type="text" [value]="value" readonly [attr.placeholder]="placeholder"
         [disabled]="disabled" (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>
-    <igx-suffix *ngIf="value.length" aria-label="Clear Selection" class="igx-combo__clear-button" igxRipple (click)="handleClearItems($event)">
+    <igx-suffix *ngIf="value.length" aria-label="Clear Selection" class="igx-combo__clear-button" igxRipple
+        (click)="handleClearItems($event)">
         <ng-container *ngIf="clearIconTemplate">
             <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
         </ng-container>
-        <igx-icon *ngIf="!clearIconTemplate" fontSet="material">clear</igx-icon>
+        <igx-icon *ngIf="!clearIconTemplate" fontSet="material">
+            clear
+        </igx-icon>
     </igx-suffix>
     <igx-suffix igxButton="icon" class="igx-combo__toggle-button" igxRipple>
         <ng-container *ngIf="toggleIconTemplate">
             <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
         </ng-container>
-        <igx-icon *ngIf="!toggleIconTemplate" fontSet="material">{{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}</igx-icon>
+        <igx-icon *ngIf="!toggleIconTemplate" fontSet="material">
+            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}
+        </igx-icon>
     </igx-suffix>
 </igx-input-group>
-<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity" [width]="itemsWidth || '100%'" (onOpening)="handleOpening($event)"
-    (onClosing)="handleClosing($event)" (onOpened)="handleOpened()" (onClosed)="handleClosed()">
+<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity"
+    [width]="itemsWidth || '100%'" (onOpening)="handleOpening($event)" (onClosing)="handleClosing($event)"
+    (onOpened)="handleOpened()" (onClosed)="handleClosed()">
     <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" class="igx-combo__search">
         <input class="igx-combo-input" igxInput #searchInput name="searchInput" autocomplete="off" type="text"
             [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
@@ -52,33 +42,55 @@
     </igx-input-group>
     <ng-container *ngTemplateOutlet="headerTemplate">
     </ng-container>
-    <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
-        [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()" [tabindex]="dropdown.collapsed ? -1 : 0"
-        role="listbox" [attr.id]="dropdown.id">
-        <ng-template igxFor let-item let-index="index" [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
-            [igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight" [igxForItemSize]="itemHeight"
-            (onChunkPreload)="dataLoading($event)">
-            <igx-combo-item  [itemHeight]='itemHeight' [value]="item" [isHeader]="item.isHeader" role="option" [index]="index">
-                <ng-container *ngIf="item.isHeader">
-                    <ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
+    <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
+        [style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
+        [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
+        <igx-combo-item role="option" [itemHeight]='itemHeight'
+            *igxFor="let item of data
+            | comboFiltering:searchValue:displayKey:filterable
+            | comboGrouping:groupKey:valueKey;
+            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
+            [value]="item" [isHeader]="item.isHeader" [index]="rowIndex">
+            <ng-container *ngIf="item.isHeader">
+                <ng-container
+                    *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase;
+                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}">
                 </ng-container>
-                <ng-container *ngIf="!item.isHeader">
-                    <ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
+            </ng-container>
+            <ng-container *ngIf="!item.isHeader">
+                <ng-container #listItem
+                    *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};">
                 </ng-container>
-            </igx-combo-item>
-        </ng-template>
+            </ng-container>
+        </igx-combo-item>
     </div>
     <div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
         <div class="igx-combo__empty" *ngIf="filteredData.length === 0">
             <ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty">
             </ng-container>
         </div>
-        <igx-combo-add-item [itemHeight]='itemHeight' *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1"
-            class="igx-combo__add-item" role="button" aria-label="Add Item" [index]="virtualScrollContainer.igxForOf.length">
+        <igx-combo-add-item [itemHeight]='itemHeight' *ngIf="isAddButtonVisible()"
+            [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" 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>
     </div>
     <ng-container *ngTemplateOutlet="footerTemplate">
     </ng-container>
 </igx-combo-drop-down>
+<ng-template #complex let-display let-data="data" let-key="displayKey">
+    {{display[key]}}
+</ng-template>
+<ng-template #primitive let-display>
+    {{display}}
+</ng-template>
+<ng-template #empty>
+    <span>The list is empty</span>
+</ng-template>
+<ng-template #addItemDefault let-control>
+    <button igxButton="flat" igxRipple>Add item</button>
+</ng-template>
+<ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
+    {{ item[key] }}
+</ng-template>