Merge branch '7.3.x' into select-cust-overlay-settings-mousedown

kdinev · web-flow · commit 72f8ff33954a · 2019-05-21T15:29:03.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,6 +39,10 @@ All notable changes for each version of this project will be documented in this
     - **Feature** The `IgxListComponent` now provides the ability to choose a display density from a predefined set of options: **compact**, **cosy** and **comfortable** (default one). It can be set by using the `displayDensity` input of the list.
 - `igxButton`
     - **Feature** The `igxButton` now provides the ability to choose a display density from a predefined set of options: **compact**, **cosy** and **comfortable** (default one). It can be set by using the `displayDensity` input of the button directive.
+- `igxButtonGroup`
+    - **Feature** The `igxButtonGroup` now provides the ability to choose a display density from a predefined set of options: **compact**, **cosy** and **comfortable** (default one). It can be set by using the `displayDensity` input of the button group. The buttons within the group will have the same density as the button group. If a button has the `displayDensity` set in the template, it is not changed by the density of the group where the button is placed.
+- `igxGrid`, `igxTreeGrid`, `igxHierarchicalGrid`
+    - **Feature** The Excel Style Filter dialog and its sub-dialogs now have a display density based on the `displayDensity` input of their respective grid.
 - `IgxDropDown`
     - now supports virtualized items. Use in conjunction with `IgxForOf` directive, with the following syntax, to display very large list of data:
     ```html
diff --git a/extras/docs/themes/sassdoc/index.js b/extras/docs/themes/sassdoc/index.js
@@ -124,7 +124,7 @@ const theme = themeleon(__dirname, function (t) {
                 return config ? config.versions : '';
             },
             getLang: () => {
-                return process.env.SASSDOC_LANG;
+                return process.env.SASSDOC_LANG.trim();
             },
             ifCond: (v1, operator, v2, options) => {
                 switch (operator) {
diff --git a/extras/docs/themes/sassdoc/views/index.hbs b/extras/docs/themes/sassdoc/views/index.hbs
@@ -1,18 +1,21 @@
 <!DOCTYPE html>
-<html lang="{{getLang}}">
+<html lang="{{lang}}">
     <head>
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Ignite UI for Angular | Sass Documentation</title>
 
-        <link rel="canonical" href="{{baseURl 'sassdoc_default_url' 'en'}}" />
-        <link rel="canonical" href="{{baseURl 'sassdoc_default_url' 'jp'}}" />
+        {{#ifCond lang '==' 'en'}}
+            <link rel="canonical" href="{{baseURl 'sassdoc_default_url' 'en'}}" />
+            <link rel="alternate" href="{{baseURl 'sassdoc_default_url' 'en'}}" hreflang="en" />
+            <link rel="alternate" href="{{baseURl 'sassdoc_default_url' 'en'}}" hreflang="en-us" />
+        {{else}}
+            <link rel="canonical" href="{{baseURl 'sassdoc_default_url' 'jp'}}" />
+            <link rel="alternate" href="{{baseURl 'sassdoc_default_url' 'jp'}}" hreflang="ja" />
+            <link rel="alternate" href="{{baseURl 'sassdoc_default_url' 'jp'}}" hreflang="ja-jp" />
+        {{/ifCond}}
 
-        <link rel="alternate" href="{{baseURl 'sassdoc_default_url' 'en'}}" hreflang="en" />
-        <link rel="alternate" href="{{baseURl 'sassdoc_default_url' 'en'}}" hreflang="en-us" />
-        <link rel="alternate" href="{{baseURl 'sassdoc_default_url' 'jp'}}" hreflang="ja" />
-        <link rel="alternate" href="{{baseURl 'sassdoc_default_url' 'jp'}}" hreflang="ja-jp" />
 
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <link rel="stylesheet" href="https://infragistics.com/assets/modern/css/layout.css">
@@ -54,6 +57,7 @@
     <!-- End Google Tag Manager (noscript) -->
 
         {{> header}}
+        <div>{{getLang}}</div>
 
         <script src="assets/js/versioning/tag-versions.req.js"></script>
     {{!
diff --git a/extras/docs/themes/typedoc/src/layouts/default.hbs b/extras/docs/themes/typedoc/src/layouts/default.hbs
@@ -7,13 +7,15 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link rel="canonical" href="{{getConfigData 'typedoc_default_url' 'en'}}{{url}}" />
-    <link rel="canonical" href="{{getConfigData 'typedoc_default_url' 'jp'}}{{url}}" />
-
-    <link rel="alternate" href="{{getConfigData 'typedoc_default_url' 'en'}}{{url}}" hreflang="en" />
-    <link rel="alternate" href="{{getConfigData 'typedoc_default_url' 'en'}}{{url}}" hreflang="en-us" />
-    <link rel="alternate" href="{{getConfigData 'typedoc_default_url' 'jp'}}{{url}}" hreflang="ja" />
-    <link rel="alternate" href="{{getConfigData 'typedoc_default_url' 'jp'}}{{url}}" hreflang="ja-jp" />
+    {{#ifCond settings.localize '===' 'en'}}
+        <link rel="canonical" href="{{getConfigData 'typedoc_default_url' 'en'}}{{url}}" />
+        <link rel="alternate" href="{{getConfigData 'typedoc_default_url' 'en'}}{{url}}" hreflang="en" />
+        <link rel="alternate" href="{{getConfigData 'typedoc_default_url' 'en'}}{{url}}" hreflang="en-us" />
+    {{else}}
+        <link rel="canonical" href="{{getConfigData 'typedoc_default_url' 'jp'}}{{url}}" />
+        <link rel="alternate" href="{{getConfigData 'typedoc_default_url' 'jp'}}{{url}}" hreflang="ja-jp" />
+        <link rel="alternate" href="{{getConfigData 'typedoc_default_url' 'jp'}}{{url}}" hreflang="ja" />
+    {{/ifCond}}
 
     <link rel="stylesheet" href="https://infragistics.com/assets/modern/css/layout.css">
     <link rel="stylesheet" href="https://infragistics.com/assets/modern/css/animate-custom.css">
diff --git a/projects/igniteui-angular/src/lib/buttonGroup/README.md b/projects/igniteui-angular/src/lib/buttonGroup/README.md
@@ -1,6 +1,6 @@
 # igx-ButtonGroup
 
-The **igx-ButtonGroup** component aims at providing a button group functionality to developers that also allow horizontal/vertical alignment, single/multiple selection with toggling. The igx-ButtounGroup component makes use of the igxButton directive.  
+The **igx-ButtonGroup** component aims at providing a button group functionality to developers that also allow horizontal/vertical alignment, single/multiple selection with toggling. The igx-ButtounGroup component makes use of the igxButton directive.
 A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)
 
 # Usage
@@ -16,6 +16,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `multiSelection` |  boolean | Enables selecting multiple buttons. Value by default is false.  |
 | `alignment` |    enum   |   Set the button group alignment. Available enum members are ButtonGroupAlignment.horizontal (default) or ButtonGroupAlignment.vertical. |
 | `disabled` | boolean | Disables the igxButtounGroup component. False by default. |
+| `displayDensity` | string | Set the display density from a predefined set of options: compact, cosy and comfortable. Value by default is comfortable.|
 
 # API Methods
 | Name   | Description |
@@ -33,8 +34,8 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 
 # Examples
 
-Using `igx-ButtonGroup` to organize buttons into an for Angular styled button group.
+Using `igx-ButtonGroup` to organize buttons into an Angular styled button group.
 ```html
-    <igx-buttongroup multiSelection="false" [values]="buttons" [alignment]="alignment">
+    <igx-buttongroup multiSelection="false" [values]="buttons" [alignment]="alignment" displayDensity="compact">
     </igx-buttongroup>
 ```
diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts
@@ -1,14 +1,17 @@
 import { CommonModule } from '@angular/common';
 import {
+    AfterContentInit,
     AfterViewInit,
     Component,
     ContentChildren,
     ChangeDetectorRef,
     EventEmitter,
     HostBinding,
+    Inject,
     Input,
     NgModule,
     Output,
+    Optional,
     QueryList,
     Renderer2,
     ViewChildren,
@@ -19,6 +22,7 @@ import { IgxButtonDirective, IgxButtonModule } from '../directives/button/button
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxIconModule } from '../icon/index';
 import { takeUntil } from 'rxjs/operators';
+import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions, DisplayDensity } from '../core/density';
 
 export enum ButtonGroupAlignment { horizontal, vertical }
 let NEXT_ID = 0;
@@ -48,7 +52,8 @@ let NEXT_ID = 0;
     templateUrl: 'buttongroup-content.component.html'
 })
 
-export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
+export class IgxButtonGroupComponent extends DisplayDensityBase implements AfterContentInit, AfterViewInit, OnDestroy {
+
     private _disabled = false;
     protected buttonClickNotifier$ = new Subject<boolean>();
     protected queryListNotifier$ = new Subject<boolean>();
@@ -244,7 +249,9 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
     private _isVertical: boolean;
     private _itemContentCssClass: string;
 
-    constructor(private _cdr: ChangeDetectorRef, private _renderer: Renderer2) {
+    constructor(private _cdr: ChangeDetectorRef, private _renderer: Renderer2,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+            super(_displayDensityOptions);
     }
 
     /**
@@ -349,6 +356,17 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    /**
+     * @hidden
+     */
+    public ngAfterContentInit() {
+        this.templateButtons.forEach( (button) => {
+            if (!button.initialDensity) {
+                button.displayDensity = this.displayDensity;
+            }
+        });
+    }
+
     /**
      * @hidden
      */
diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html
@@ -1,5 +1,5 @@
 <div class="igx-button-group" role="group" [class.igx-button-group--vertical]="isVertical">
-    <span *ngFor="let button of values; let i = 'index'" type="button" igxButton="flat" [selected]="button.selected"
+    <span *ngFor="let button of values; let i = 'index'" type="button" igxButton="flat" [displayDensity]="displayDensity" [selected]="button.selected"
         [attr.data-togglable]="button.togglable" [disabled]="disabled || button.disabled" [igxButtonColor]="button.color"
         [igxButtonBackground]="button.bgcolor" [igxLabel]="button.label" [igxRipple]="button.ripple">
         <div class="igx-button-group__item-content {{ itemContentCssClass }}">
diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts
@@ -52,7 +52,8 @@ describe('IgxButtonGroup', () => {
             declarations: [
                 InitButtonGroupComponent,
                 InitButtonGroupWithValuesComponent,
-                TemplatedButtonGroupComponent
+                TemplatedButtonGroupComponent,
+                TemplatedButtonGroupDesplayDensityComponent
             ],
             imports: [
                 IgxButtonGroupModule,
@@ -201,6 +202,36 @@ describe('IgxButtonGroup', () => {
         expect(error).toBe('');
     });
 
+    it('Button Group - DisplayDensity property is applied', () => {
+        const fixture = TestBed.createComponent(InitButtonGroupComponent);
+        fixture.detectChanges();
+
+        const buttongroup = fixture.componentInstance.buttonGroup;
+
+        expect(buttongroup.displayDensity).toBe('comfortable');
+
+        buttongroup.displayDensity = 'compact';
+        fixture.detectChanges();
+
+        expect(buttongroup.displayDensity).toBe('compact', 'DisplayDensity not set!');
+        expect(buttongroup.buttons[1].element.nativeElement.classList.contains('igx-button--compact')).toBe(true, 'Missing density class!');
+    });
+
+    it('Button Group - DisplayDensity property is applied to templated buttons', () => {
+        const fixture = TestBed.createComponent(TemplatedButtonGroupDesplayDensityComponent);
+        fixture.detectChanges();
+
+        const buttongroup = fixture.componentInstance.buttonGroup;
+
+        expect(buttongroup.displayDensity).toBe('cosy');
+
+        const groupChildren = buttongroup.buttons;
+        // The density class should be applied only to buttons with no DisplayDensity set
+        expect(groupChildren[0].displayDensity).toBe('compact');
+        expect(groupChildren[0].element.nativeElement.classList.contains('igx-button--compact')).toBe(true, 'Missing density class!');
+        expect(groupChildren[1].element.nativeElement.classList.contains('igx-button--cosy')).toBe(true, 'Missing density class!');
+    });
+
 });
 
 @Component({ template: `<igx-buttongroup [values]="buttons"></igx-buttongroup>` })
@@ -318,3 +349,11 @@ class TemplatedButtonGroupComponent {
     private alignment = ButtonGroupAlignment.vertical;
     public multiselection = true;
 }
+
+@Component({ template: `<igx-buttongroup [multiSelection]="multiselection" displayDensity="cosy">
+                            <button igxButton displayDensity="compact">Sofia</button>
+                            <button igxButton>London</button>
+                        </igx-buttongroup>` })
+class TemplatedButtonGroupDesplayDensityComponent {
+    @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent;
+}
diff --git a/projects/igniteui-angular/src/lib/core/displayDensity.ts b/projects/igniteui-angular/src/lib/core/displayDensity.ts
@@ -1,4 +1,4 @@
-import { InjectionToken, Input, Output, EventEmitter, DoCheck } from '@angular/core';
+import { InjectionToken, Input, Output, EventEmitter, DoCheck, OnInit } from '@angular/core';
 
 
 /**
@@ -30,9 +30,14 @@ export const DisplayDensityToken = new InjectionToken<IDisplayDensityOptions>('D
 /**
  * Base class containing all logic required for implementing DisplayDensity.
  */
-export class DisplayDensityBase implements DoCheck {
+export class DisplayDensityBase implements DoCheck, OnInit {
     protected _displayDensity: DisplayDensity;
 
+     /**
+     * @hidden
+     */
+    public initialDensity: DisplayDensity;
+
     /**
      * Returns the theme of the component.
      * The default theme is `comfortable`.
@@ -74,6 +79,13 @@ export class DisplayDensityBase implements DoCheck {
         Object.assign(this.oldDisplayDensityOptions, displayDensityOptions);
     }
 
+    /**
+     * @hidden
+     */
+    public ngOnInit(): void {
+        this.initialDensity = this._displayDensity;
+    }
+
     public ngDoCheck() {
         if (!this._displayDensity && this.displayDensityOptions &&
                 this.oldDisplayDensityOptions.displayDensity !== this.displayDensityOptions.displayDensity) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
@@ -147,7 +147,6 @@
 @mixin igx-button-group($theme) {
     @include igx-root-css-vars($theme);
     $group-item-min-width: 24px;
-    $group-item-min-height: 36px;
     $group-item-border-thickness: 1px;
     $group-items-margin: rem(10px, 16px);
 
@@ -167,7 +166,6 @@
         color: --var($theme, 'item-text-color');
         background: --var($theme, 'item-background');
         min-width: $group-item-min-width;
-        min-height: $group-item-min-height;
         display: flex;
         flex: 1 0 0%;
         justify-content: center;
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
@@ -2007,6 +2007,15 @@
         }
     }
 
+    %filtering-scroll-mask {
+        display: block;
+        position: absolute;
+        content: '';
+        top: -2px;
+        bottom: -2px;
+        width: 10px;
+    }
+
     %igx-grid__filtering-scroll-start {
         width: 24px;
         height: 24px;
@@ -2016,12 +2025,9 @@
         z-index: 1;
 
         &::after {
-            position: absolute;
-            content: '';
-            left: calc(100% + 8px);
-            width: 10px;
-            height: 100%;
-            background: linear-gradient(to right, white, transparent);
+            @extend %filtering-scroll-mask;
+            left: calc(100% + 6px);
+            background: linear-gradient(to right, --var($theme, 'filtering-row-background'), transparent);
         }
     }
 
@@ -2034,12 +2040,9 @@
         z-index: 1;
 
         &::before {
-            position: absolute;
-            content: '';
-            right: calc(100% + 8px);
-            width: 10px;
-            height: 100%;
-            background: linear-gradient(to left, white, transparent);
+            @extend %filtering-scroll-mask;
+            right: calc(100% + 6px);
+            background: linear-gradient(to left, --var($theme, 'filtering-row-background'), transparent);
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/touch.ts b/projects/igniteui-angular/src/lib/core/touch.ts
@@ -1,5 +1,6 @@
 import { Inject, Injectable, NgZone } from '@angular/core';
-import { DOCUMENT, ɵgetDOM as getDOM } from '@angular/platform-browser';
+import { ɵgetDOM as getDOM } from '@angular/platform-browser';
+import { DOCUMENT } from '@angular/common';
 
 const EVENT_SUFFIX = 'precise';
 
diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts
@@ -305,7 +305,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
             filteringTree.filteringOperands.splice(fieldFilterIndex, 1);
         }
 
-        this.prepare_filtering_expression(filteringTree, fieldName, term, conditionOrExpressionsTree, ignoreCase);
+        this.prepare_filtering_expression(filteringTree, fieldName, term, conditionOrExpressionsTree, ignoreCase, fieldFilterIndex);
         grid.filteringExpressionsTree = filteringTree;
     }
 
@@ -360,7 +360,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
     }
 
     protected prepare_filtering_expression(filteringState: IFilteringExpressionsTree, fieldName: string, searchVal,
-        conditionOrExpressionsTree: IFilteringOperation | IFilteringExpressionsTree, ignoreCase: boolean) {
+        conditionOrExpressionsTree: IFilteringOperation | IFilteringExpressionsTree, ignoreCase: boolean, insertAtIndex = -1) {
 
         let newExpressionsTree;
         const oldExpressionsTreeIndex = filteringState.findIndex(fieldName);
@@ -373,7 +373,11 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
         if (oldExpressionsTreeIndex === -1) {
             // no expressions tree found for this field
             if (expressionsTree) {
-                filteringState.filteringOperands.push(expressionsTree);
+                if (insertAtIndex > -1) {
+                    filteringState.filteringOperands.splice(insertAtIndex, 0, expressionsTree);
+                } else {
+                    filteringState.filteringOperands.push(expressionsTree);
+                }
             } else if (condition) {
                 // create expressions tree for this field and add the new expression to it
                 newExpressionsTree = new FilteringExpressionsTree(filteringState.operator, fieldName);
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
diff --git a/src/app/buttonGroup/buttonGroup.sample.html b/src/app/buttonGroup/buttonGroup.sample.html
