Merge branch 'master' into skrastev/fix-12488-master

Author: ChronosSF

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

@@ -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/combo/combo-item.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.common.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.component.html

@@ -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/core/utils.ts

@@ -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/list/list-item.component.html

@@ -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.ts

@@ -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/simple-combo/simple-combo.component.html

@@ -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)">