Merge branch 'master' into ddincheva/fixToolbarHiding

Author: hanastasov

package-lock.json

@@ -1,4 +1,4 @@
-import {
+import {
     Component,
     ContentChildren,
     ChangeDetectorRef,
@@ -24,6 +24,7 @@ import {
 import { IDropBaseEventArgs, IDragBaseEventArgs } from '../directives/drag-drop/drag-drop.directive';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { rem } from '../core/utils';
 
 export interface IBaseChipsAreaEventArgs {
     originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;
@@ -112,25 +113,35 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
      *
      * @example
      * ```html
-     * <igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (onReorder)="chipsOrderChanged($event)"></igx-chips-area>
+     * <igx-chips-area #chipsArea [width]="300" [height]="10" (onReorder)="chipsOrderChanged($event)"></igx-chips-area>
      * ```
      */
-    @HostBinding('style.width.px')
     @Input()
     public width: number;
 
+    /** @hidden @internal */
+    @HostBinding('style.width.rem')
+    public get _widthToRem() {
+        return rem(this.width);
+    }
+
     /**
      * An @Input property that sets the height of the `IgxChipsAreaComponent`.
      *
      * @example
      * ```html
-     * <igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (onReorder)="chipsOrderChanged($event)"></igx-chips-area>
+     * <igx-chips-area #chipsArea [width]="300" [height]="10" (onReorder)="chipsOrderChanged($event)"></igx-chips-area>
      * ```
      */
-    @HostBinding('style.height.px')
     @Input()
     public height: number;
 
+    /** @hidden @internal */
+    @HostBinding('style.height.rem')
+    public get _heightToRem() {
+        return rem(this.height);
+    }
+
     /**
      * Emits an event when `IgxChipComponent`s in the `IgxChipsAreaComponent` should be reordered.
      * Returns an array of `IgxChipComponent`s.

projects/igniteui-angular/src/lib/chips/chips-area.component.ts

@@ -9,6 +9,7 @@ import { IgxDropDownItemComponent } from '../drop-down/drop-down-item.component'
 import { IGX_DROPDOWN_BASE, IDropDownBase, Navigate } from '../drop-down/drop-down.common';
 import { IgxComboAPIService } from './combo.api';
 import { IgxSelectionAPIService } from '../core/selection';
+import { rem } from '../core/utils';
 
 /** @hidden */
 @Component({
@@ -23,9 +24,14 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent {
      * @hidden
      */
     @Input()
-    @HostBinding('style.height.px')
     public itemHeight: string | number = '';
 
+    /** @hidden @internal */
+    @HostBinding('style.height.rem')
+    public get _itemHeightToRem() {
+        return rem(this.itemHeight);
+    }
+
     @HostBinding('attr.aria-label')
     @Input()
     public get ariaLabel(): string {

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

@@ -26,7 +26,7 @@ import { noop, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/displayDensity';
 import { IgxSelectionAPIService } from '../core/selection';
-import { CancelableBrowserEventArgs, cloneArray, IBaseCancelableBrowserEventArgs, IBaseEventArgs, isNaNvalue } from '../core/utils';
+import { CancelableBrowserEventArgs, cloneArray, IBaseCancelableBrowserEventArgs, IBaseEventArgs, isNaNvalue, rem } from '../core/utils';
 import { SortingDirection } from '../data-operations/sorting-strategy';
 import { IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
 import { IgxIconService } from '../icon/public_api';
@@ -237,6 +237,11 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         this._itemsMaxHeight = val;
     }
 
+    /** @hidden */
+    public get itemsMaxHeightInRem() {
+        return rem(this.itemsMaxHeight);
+    }
+
     /**
      * Configures the drop down list item height
      *

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

@@ -53,7 +53,7 @@
     <ng-container *ngTemplateOutlet="headerTemplate">
     </ng-container>
     <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
-        [style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
+        [style.maxHeight.rem]="itemsMaxHeightInRem" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
         [tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
         [attr.aria-activedescendant]="this.activeDescendant">
         <igx-combo-item [itemHeight]='itemHeight' *igxFor="let item of data

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

@@ -92,6 +92,17 @@
     ));
 }
 
+@mixin _offset-sibling-elements($offset) {
+    + igx-grid-header-row,
+    + igx-grid-group-by-area {
+        margin-top: $offset;
+    }
+
+    + igx-grid-group-by-area {
+        height: auto;
+    }
+}
+
 /// @param {Map} $theme - The theme used to style the component.
 @mixin grid-toolbar($theme) {
     @include css-vars($theme);
@@ -121,6 +132,9 @@
     );
 
     %igx-grid-toolbar {
+        $height: map.get($grid-toolbar-height, 'comfortable');
+        @include _offset-sibling-elements($height);
+
         position: absolute;
         width: 100%;
         display: flex;
@@ -137,7 +151,7 @@
 
         background: var-get($theme, 'background-color');
         height: auto;
-        min-height: map.get($grid-toolbar-height, 'comfortable');
+        min-height: $height;
         padding-block: 0;
         padding-inline: map.get($grid-toolbar-padding, 'comfortable');
 
@@ -165,37 +179,30 @@
                 }
             }
         }
-
-        + igx-grid-header-row {
-            margin-top: map.get($grid-toolbar-height, 'comfortable');
-        }
     }
 
-
     %igx-grid-toolbar--cosy {
-        min-height: map.get($grid-toolbar-height, 'cosy');
+        $height: map.get($grid-toolbar-height, 'cosy');
+        @include _offset-sibling-elements($height);
+
+        min-height: $height;
         padding-inline: map.get($grid-toolbar-padding, 'cosy');
 
         [igxButton] {
             margin-inline-start: map.get($grid-toolbar-spacer, 'cosy');
         }
-
-        + igx-grid-header-row {
-            margin-top: map.get($grid-toolbar-height, 'cosy');
-        }
     }
 
     %igx-grid-toolbar--compact {
-        min-height: map.get($grid-toolbar-height, 'compact');
+        $height: map.get($grid-toolbar-height, 'compact');
+        @include _offset-sibling-elements($height);
+
+        min-height: $height;
         padding-inline: map.get($grid-toolbar-padding, 'compact');
 
         [igxButton] {
             margin-inline-start: map.get($grid-toolbar-spacer, 'compact');
         }
-
-        + igx-grid-header-row {
-            margin-top: map.get($grid-toolbar-height, 'compact');
-        }
     }
 
     %igx-grid-toolbar__title {

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

@@ -788,3 +788,9 @@ export const formatDate = (value: string | number | Date, format: string, locale
 };
 
 export const formatCurrency = new CurrencyPipe(undefined).transform;
+
+/** Converts pixel values to their rem counterparts for a base value */
+export const rem = (value: number | string) => {
+    const base = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('font-size'))
+    return Number(value) / base;
+}

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

@@ -1,12 +1,12 @@
-   
+
 <div *ngIf="!isHeader && list.listItemLeftPanningTemplate" #leftPanningTmpl class="igx-list__item-right"
-    [style.width.px]="this.element.offsetWidth" [style.height.px]="this.element.offsetHeight">
-    <ng-container *ngTemplateOutlet="list.listItemLeftPanningTemplate.template; context: context">
+    [style.width.rem]="offsetWidthInRem" [style.height.rem]="offsetHeightInRem">
+    <ng-container *ngTemlateOutlet="list.listItemLeftPanningTemplate.template; context: context">
     </ng-container>
 </div>
 
 <div *ngIf="!isHeader && list.listItemRightPanningTemplate" #rightPanningTmpl class="igx-list__item-left"
-    [style.width.px]="this.element.offsetWidth" [style.height.px]="this.element.offsetHeight">
+    [style.width.rem]="offsetWidthInRem" [style.height.rem]="offsetHeightInRem">
     <ng-container *ngTemplateOutlet="list.listItemRightPanningTemplate.template; context: context">
     </ng-container>
 </div>
@@ -33,7 +33,6 @@
     </div>
 </ng-template>
 
-    
 <ng-container *ngIf="isHeader">
     <ng-container *ngTemplateOutlet="itemsContent"></ng-container>
 </ng-container>

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

@@ -16,6 +16,7 @@ import {
 } from './list.common';
 
 import { HammerGesturesManager } from '../core/touch';
+import { rem } from '../core/utils';
 
 /**
  * The Ignite UI List Item component is a container intended for row items in the Ignite UI for Angular List component.
@@ -241,6 +242,16 @@ export class IgxListItemComponent implements IListChild {
         return this.width;
     }
 
+    /** @hidden @internal */
+    public get offsetWidthInRem() {
+        return rem(this.element.offsetWidth);
+    }
+
+    /** @hidden @internal */
+    public get offsetHeightInRem() {
+        return rem(this.element.offsetHeight);
+    }
+
     constructor(
         public list: IgxListBaseDirective,
         private elementRef: ElementRef,

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

@@ -51,7 +51,7 @@
     <ng-container *ngTemplateOutlet="headerTemplate">
     </ng-container>
     <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
-        [style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown"
+        [style.maxHeight.rem]="itemsMaxHeightInRem" [igxDropDownItemNavigation]="dropdown"
         [tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id"
         [attr.aria-activedescendant]="this.activeDescendant"
         (focus)="dropdown.onFocus()" (keydown)="handleItemKeyDown($event)">