Merge branch 'master' into mpopov/responsive-filtering-row-MASTER

Lipata · web-flow · commit e988a3ac1ee6 · 2020-07-23T18:26:16.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -79,7 +79,7 @@ The following example shows how you can use the Indigo theme:
 - `igxGrid`
     - **Behavioral Change** - Group rows now display the group column's header name instead of field when one is available.
 - `igx-select`, `igx-combo`, `igx-drop-down`
-    - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
+    - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default. This requires styling to be handled on the application-level if there is something more than a simple text in the item.
 - `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
     - `origin` - it can vary within the values of the `TransactionEventOrigin` interface;
     - `actions` - contains information about the transactions, that caused the emission of the event.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
@@ -542,6 +542,14 @@
         @extend %igx-grid__filtering-cell-indicator--hidden !optional;
     }
 
+    @include e(filtering-dropdown-items) {
+        @extend %igx-grid__filtering-dropdown-items !optional;
+    }
+
+    @include e(filtering-dropdown-text) {
+        @extend %igx-grid__filtering-dropdown-text !optional;
+    }
+
     @include e(filtering-row) {
         @extend %igx-grid__filtering-row !optional;
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -2398,6 +2398,15 @@
         }
     }
 
+    %igx-grid__filtering-dropdown-items {
+        display: flex;
+        align-items: center;
+    }
+
+    %igx-grid__filtering-dropdown-text {
+        margin-left: rem(16px);
+    }
+
     %igx-grid__filtering-row--cosy {
         height: map-get($grid-header-height, 'cosy');
     }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html
@@ -160,10 +160,12 @@ <h6 class="igx-filter-empty__title">
                               [name]="selectedColumn.filters.condition(conditionSelect.value).iconName">
                     </igx-icon>
                     <igx-select-item *ngFor="let condition of getConditionList()" [value]="condition">
-                        <igx-icon fontSet="filtering-icons"
-                                  [name]="selectedColumn.filters.condition(condition).iconName">
-                        </igx-icon>
-                        <span>{{getConditionFriendlyName(condition)}}</span>
+                        <div class="igx-grid__filtering-dropdown-items">
+                            <igx-icon fontSet="filtering-icons"
+                                      [name]="selectedColumn.filters.condition(condition).iconName">
+                            </igx-icon>
+                            <span class="igx-grid__filtering-dropdown-text">{{getConditionFriendlyName(condition)}}</span>
+                        </div>
                     </igx-select-item>
                 </igx-select>
 
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html
@@ -3,8 +3,10 @@
     <igx-drop-down-item *ngFor="let condition of conditions"
         [value]="condition"
         [selected]="isConditionSelected(condition)">
-        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-        <span style="margin-left: 16px">{{ translateCondition(condition) }}</span>
+        <div class="igx-grid__filtering-dropdown-items">
+            <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
+            <span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
+        </div>
     </igx-drop-down-item>
 </igx-drop-down>
 
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html
@@ -9,8 +9,10 @@
         <igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
     </igx-prefix>
     <igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
-        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-        <span>{{translateCondition(condition)}}</span>
+        <div class="igx-grid__filtering-dropdown-items">
+            <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
+            <span class="igx-grid__filtering-dropdown-text">{{translateCondition(condition)}}</span>
+        </div>
     </igx-select-item>
 </igx-select>
 
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html
@@ -166,12 +166,16 @@ <h4>{{ column.header || column.field }}</h4>
         <igx-drop-down-item
         *ngFor="let condition of conditions"
         [value]="condition">
-            <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-            <span style="margin-left: 16px">{{ translateCondition(condition) }}</span>
+            <div class="igx-grid__filtering-dropdown-items">
+                <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
+                <span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
+            </div>
         </igx-drop-down-item>
         <igx-drop-down-item *ngIf="showCustomFilterItem()">
-            <igx-icon>filter_list</igx-icon>
-            <span style="margin-left: 16px">{{ grid.resourceStrings.igx_grid_excel_custom_filter }}</span>
+            <div class="igx-grid__filtering-dropdown-items">
+                <igx-icon>filter_list</igx-icon>
+                <span class="igx-grid__filtering-dropdown-text">{{ grid.resourceStrings.igx_grid_excel_custom_filter }}</span>
+            </div>
         </igx-drop-down-item>
     </div>
 </igx-drop-down>
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
@@ -24,7 +24,7 @@ import {
     TransactionEventOrigin,
     StateUpdateEvent
 } from '../../services/transaction/transaction';
-import { IgxHierarchicalTransactionService } from '../../services/public_api';
+import { HierarchicalTransactionService } from '../../services/public_api';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/selection.service';
@@ -78,7 +78,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
     private _id = `igx-tree-grid-${NEXT_ID++}`;
     private _data;
     private _rowLoadingIndicatorTemplate: TemplateRef<any>;
-    protected _transactions: IgxHierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>;
+    protected _transactions: HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>;
 
     /**
      * An @Input property that sets the value of the `id` attribute. If not provided it will be automatically generated.
diff --git a/projects/igniteui-angular/src/lib/services/public_api.ts b/projects/igniteui-angular/src/lib/services/public_api.ts
@@ -17,3 +17,4 @@ export * from './transaction/igx-transaction';
 export * from './transaction/base-transaction';
 export * from './transaction/transaction';
 export * from './transaction/igx-hierarchical-transaction';
+export * from './transaction/hierarchical-transaction';
diff --git a/projects/igniteui-angular/src/lib/services/transaction/README.md b/projects/igniteui-angular/src/lib/services/transaction/README.md
@@ -47,3 +47,9 @@ and then inject it in the component's constructor:
    |clear                  | Clears all transactions                                       | id?                       |
    |startPending           | Starts pending transactions. All transactions passed after call to startPending will not be added to transaction log | - |
    |endPending             | Clears all pending transactions and aggregated pending state. If commit is set to true commits pending states as single transaction | commit |
+
+### HierarchicalTransactionService
+
+   | Name                  | Description                                                   | Parameters                |
+   |-----------------------|---------------------------------------------------------------|---------------------------|
+   |commit                 | Applies all transactions over the provided data               | data, primaryKey, childDataKey, id?                 |
diff --git a/projects/igniteui-angular/src/lib/services/transaction/hierarchical-transaction.ts b/projects/igniteui-angular/src/lib/services/transaction/hierarchical-transaction.ts
@@ -0,0 +1,20 @@
+import { TransactionService, HierarchicalState, HierarchicalTransaction } from './transaction';
+
+export interface HierarchicalTransactionService<T extends HierarchicalTransaction, S extends HierarchicalState>
+    extends TransactionService<T, S> {
+    /**
+     * Applies all transactions over the provided data
+     * @param data Data source to update
+     * @param id Optional record id to commit transactions for
+     */
+    commit(data: any[], id?: any): void;
+    /**
+     * Applies all transactions over the provided data
+     * @param data Data source to update
+     * @param primaryKey Primary key of the hierarchical data
+     * @param childDataKey Key of child data collection
+     * @param id Optional record id to commit transactions for
+     */
+    // tslint:disable-next-line: unified-signatures
+    commit(data: any[], primaryKey: any, childDataKey: any, id?: any): void;
+}
diff --git a/projects/igniteui-angular/src/lib/services/transaction/igx-hierarchical-transaction.ts b/projects/igniteui-angular/src/lib/services/transaction/igx-hierarchical-transaction.ts
@@ -3,11 +3,12 @@ import { Injectable } from '@angular/core';
 import { IgxTransactionService } from './igx-transaction';
 import { DataUtil } from '../../data-operations/data-util';
 import { cloneValue } from '../../core/utils';
+import { HierarchicalTransactionService } from './hierarchical-transaction';
 
 /** @experimental @hidden */
 @Injectable()
 export class IgxHierarchicalTransactionService<T extends HierarchicalTransaction, S extends HierarchicalState>
-    extends IgxTransactionService<T, S> {
+    extends IgxTransactionService<T, S> implements HierarchicalTransactionService<T, S> {
 
     public getAggregatedChanges(mergeChanges: boolean): T[] {
         const result: T[] = [];
@@ -51,23 +52,16 @@ export class IgxHierarchicalTransactionService<T extends HierarchicalTransaction
         }
     }
 
-    /**
-     * Applies all transactions over the provided data
-     * @param data Data source to update
-     * @param primaryKey Primary key of the hierarchical data
-     * @param childDataKey Key of child data collection
-     * @param id Optional record id to commit transactions for
-     */
-    public commit(data: any[], primaryKey?: any, childDataKey?: any, id?: any): void {
+    public commit(data: any[], primaryKeyOrId?: any, childDataKey?: any, id?: any): void {
         if (childDataKey !== undefined) {
             let transactions = this.getAggregatedChanges(true);
             if (id !== undefined) {
                 transactions = transactions.filter(t => t.id === id);
             }
-            DataUtil.mergeHierarchicalTransactions(data, transactions, childDataKey, primaryKey, true);
+            DataUtil.mergeHierarchicalTransactions(data, transactions, childDataKey, primaryKeyOrId, true);
             this.clear(id);
         } else {
-            super.commit(data, id);
+            super.commit(data, primaryKeyOrId);
         }
     }
 

Original file line number	Diff line number	Diff line change
`@@ -542,6 +542,14 @@`
`542`	`542`	`@extend %igx-grid__filtering-cell-indicator--hidden !optional;`
`543`	`543`	`}`
`544`	`544`
	`545`	`+ @include e(filtering-dropdown-items) {`
	`546`	`+ @extend %igx-grid__filtering-dropdown-items !optional;`
	`547`	`+ }`
	`548`	`+`
	`549`	`+ @include e(filtering-dropdown-text) {`
	`550`	`+ @extend %igx-grid__filtering-dropdown-text !optional;`
	`551`	`+ }`
	`552`	`+`
`545`	`553`	`@include e(filtering-row) {`
`546`	`554`	`@extend %igx-grid__filtering-row !optional;`
`547`	`555`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2398,6 +2398,15 @@`
`2398`	`2398`	`}`
`2399`	`2399`	`}`
`2400`	`2400`
	`2401`	`+ %igx-grid__filtering-dropdown-items {`
	`2402`	`+ display: flex;`
	`2403`	`+ align-items: center;`
	`2404`	`+ }`
	`2405`	`+`
	`2406`	`+ %igx-grid__filtering-dropdown-text {`
	`2407`	`+ margin-left: rem(16px);`
	`2408`	`+ }`
	`2409`	`+`
`2401`	`2410`	`%igx-grid__filtering-row--cosy {`
`2402`	`2411`	`height: map-get($grid-header-height, 'cosy');`
`2403`	`2412`	`}`