From 9fcb9c9034a7d0f4f96c5ade4e8cb5d81722c32e Mon Sep 17 00:00:00 2001 From: Vasya Kacheshmarova Date: Fri, 26 Oct 2018 16:01:09 +0300 Subject: [PATCH 01/77] feat(grid, chip): add display density DI token to igxGrid and igxChip --- .../src/lib/chips/chip.component.ts | 81 ++++--------- .../src/lib/core/displayDensity.ts | 39 +++++- .../src/lib/grid/grid-summary.component.ts | 2 +- .../src/lib/grid/grid-toolbar.component.ts | 70 +++-------- .../src/lib/grid/grid.component.ts | 111 ++++++------------ src/app/grid-groupby/grid-groupby.sample.html | 3 +- src/app/grid-groupby/grid-groupby.sample.ts | 25 ++-- 7 files changed, 117 insertions(+), 214 deletions(-) diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts index 89deea2112d..821f3621d58 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.component.ts @@ -9,9 +9,11 @@ Output, ViewChild, Renderer2, - TemplateRef + TemplateRef, + Inject, + Optional } from '@angular/core'; -import { DisplayDensity } from '../core/displayDensity'; +import { DisplayDensity, IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; import { IgxDragDirective, IDragBaseEventArgs, @@ -50,7 +52,7 @@ let CHIP_ID = 0; selector: 'igx-chip', templateUrl: 'chip.component.html' }) -export class IgxChipComponent { +export class IgxChipComponent extends DisplayDensityBase { /** * An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated. @@ -163,43 +165,6 @@ export class IgxChipComponent { return this._selected; } - /** - * Returns the `IgxChipComponent` theme. - * ```typescript - * @ViewChild('myChip') - * public chip: IgxChipComponent; - * ngAfterViewInit(){ - * let chipTheme = this.chip.displayDensity; - * } - * ``` - */ - @Input() - public get displayDensity(): DisplayDensity | string { - return this._displayDensity; - } - - /** - * An @Input property that sets the `IgxChipComponent` theme. - * Available options are `compact`, `cosy`, `comfortable`. - * The default theme is `comfortable`. - * ```html - * - * ``` - */ - public set displayDensity(val: DisplayDensity | string) { - switch (val) { - case 'compact': - this._displayDensity = DisplayDensity.compact; - break; - case 'cosy': - this._displayDensity = DisplayDensity.cosy; - break; - case 'comfortable': - default: - this._displayDensity = DisplayDensity.comfortable; - } - } - /** * An @Input property that sets the `IgxChipComponent` background color. * The `color` property supports string, rgb, hex. @@ -340,15 +305,12 @@ export class IgxChipComponent { @HostBinding('attr.class') get hostClass(): string { const classes = []; - switch (this._displayDensity) { - case DisplayDensity.cosy: - classes.push('igx-chip--cosy'); - break; - case DisplayDensity.compact: - classes.push('igx-chip--compact'); - break; - default: - classes.push('igx-chip'); + if (this.isCosy()) { + classes.push('igx-chip--cosy'); + } else if (this.isCompact()) { + classes.push('igx-chip--compact'); + } else { + classes.push('igx-chip'); } classes.push(this.disabled ? 'igx-chip--disabled' : ''); // The custom classes should be at the end. @@ -398,26 +360,27 @@ export class IgxChipComponent { * @hidden */ public get ghostClass(): string { - switch (this._displayDensity) { - case DisplayDensity.cosy: - return 'igx-chip__ghost--cosy'; - case DisplayDensity.compact: - return 'igx-chip__ghost--compact'; - default: - return 'igx-chip__ghost'; - } + if (this.isCosy()) { + return 'igx-chip__ghost--cosy'; + } else if (this.isCompact()) { + return 'igx-chip__ghost--compact'; + } else { + return 'igx-chip__ghost'; + } } public get chipTabindex() { return !this.disabled ? 0 : ''; } - protected _displayDensity = DisplayDensity.comfortable; protected _selected = false; protected _selectedItemClass = 'igx-chip__item--selected'; protected _movedWhileRemoving = false; - constructor(public cdr: ChangeDetectorRef, public elementRef: ElementRef, private renderer: Renderer2) { } + constructor(public cdr: ChangeDetectorRef, public elementRef: ElementRef, private renderer: Renderer2, + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) { + super(_displayDensityOptions); + } /** * @hidden diff --git a/projects/igniteui-angular/src/lib/core/displayDensity.ts b/projects/igniteui-angular/src/lib/core/displayDensity.ts index b7d5613bfc8..e6a7f80dc13 100644 --- a/projects/igniteui-angular/src/lib/core/displayDensity.ts +++ b/projects/igniteui-angular/src/lib/core/displayDensity.ts @@ -1,4 +1,5 @@ -import { InjectionToken, Input } from '@angular/core'; +import { InjectionToken, Input, Output, EventEmitter, DoCheck } from '@angular/core'; + /** * Defines the posible values of the components' display density. @@ -16,6 +17,11 @@ export interface IDisplayDensity { displayDensity: DisplayDensity; } +export interface IDensityChangedEventArgs { + oldDensity: DisplayDensity | string; + newDensity: DisplayDensity | string; +} + /** * Defines the DisplayDensity DI token. */ @@ -24,7 +30,7 @@ export const DisplayDensityToken = new InjectionToken('DisplayD /** * Base class containing all logic required for implementing DisplayDensity. */ -export class DisplayDensityBase { +export class DisplayDensityBase implements DoCheck { protected _displayDensity: DisplayDensity | string; /** @@ -44,6 +50,7 @@ export class DisplayDensityBase { * Sets the theme of the component. */ public set displayDensity(val: DisplayDensity | string) { + const currentDisplayDensity = this._displayDensity; switch (val) { case 'compact': this._displayDensity = DisplayDensity.compact; @@ -55,12 +62,23 @@ export class DisplayDensityBase { default: this._displayDensity = DisplayDensity.comfortable; } + if (currentDisplayDensity !== this._displayDensity) { + const densityChangedArgs: IDensityChangedEventArgs = { + oldDensity: currentDisplayDensity, + newDensity: this._displayDensity + }; + this.onDensityChanged.emit(densityChangedArgs); + } } + @Output() + public onDensityChanged = new EventEmitter(); + protected oldDisplayDensityOptions: IDisplayDensity = { displayDensity: DisplayDensity.comfortable }; + /** *@hidden */ - protected isCosy(): boolean { + public isCosy(): boolean { return this._displayDensity === DisplayDensity.cosy || (!this._displayDensity && this.displayDensityOptions && this.displayDensityOptions.displayDensity === DisplayDensity.cosy); } @@ -68,7 +86,7 @@ export class DisplayDensityBase { /** *@hidden */ - protected isComfortable(): boolean { + public isComfortable(): boolean { return this._displayDensity === DisplayDensity.comfortable || (!this._displayDensity && (!this.displayDensityOptions || this.displayDensityOptions.displayDensity === DisplayDensity.comfortable)); @@ -77,10 +95,19 @@ export class DisplayDensityBase { /** *@hidden */ - protected isCompact(): boolean { + public isCompact(): boolean { return this._displayDensity === DisplayDensity.compact || (!this._displayDensity && this.displayDensityOptions && this.displayDensityOptions.displayDensity === DisplayDensity.compact); } + constructor(protected displayDensityOptions: IDisplayDensity) { + Object.assign(this.oldDisplayDensityOptions, displayDensityOptions); + } - constructor(protected displayDensityOptions: IDisplayDensity) {} + public ngDoCheck() { + if (this.oldDisplayDensityOptions && this.displayDensityOptions && + this.oldDisplayDensityOptions.displayDensity !== this.displayDensityOptions.displayDensity) { + this.oldDisplayDensityOptions = Object.assign(this.oldDisplayDensityOptions, this.displayDensityOptions); + this.onDensityChanged.emit(); + } + } } diff --git a/projects/igniteui-angular/src/lib/grid/grid-summary.component.ts b/projects/igniteui-angular/src/lib/grid/grid-summary.component.ts index 6edd968fb9b..e891345c16f 100644 --- a/projects/igniteui-angular/src/lib/grid/grid-summary.component.ts +++ b/projects/igniteui-angular/src/lib/grid/grid-summary.component.ts @@ -68,7 +68,7 @@ export class IgxGridSummaryComponent implements DoCheck { @HostBinding('class.igx-grid-summary') get defaultCSS() { - return this.displayDensity === DisplayDensity.comfortable; + return this.gridAPI.get(this.gridID).isComfortable(); } get dataType(): DataType { diff --git a/projects/igniteui-angular/src/lib/grid/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grid/grid-toolbar.component.ts index 810d24dfb3f..98c65a7f6a8 100644 --- a/projects/igniteui-angular/src/lib/grid/grid-toolbar.component.ts +++ b/projects/igniteui-angular/src/lib/grid/grid-toolbar.component.ts @@ -4,10 +4,11 @@ import { HostBinding, Input, Optional, - ViewChild + ViewChild, + Inject } from '@angular/core'; -import { DisplayDensity } from '../core/displayDensity'; +import { DisplayDensity, IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; import { CsvFileTypes, IgxBaseExporter, @@ -29,7 +30,7 @@ import { ConnectedPositioningStrategy } from '../services/overlay/position'; selector: 'igx-grid-toolbar', templateUrl: './grid-toolbar.component.html' }) -export class IgxGridToolbarComponent { +export class IgxGridToolbarComponent extends DisplayDensityBase { /** * @hidden @@ -195,65 +196,28 @@ export class IgxGridToolbarComponent { return this.grid.pinnedColumns.length; } - private _displayDensity: DisplayDensity | string; - - /** - * Returns the theme of the `IgxGridToolbarComponent`. - * The default theme is `comfortable`. - * Available options are `comfortable`, `cosy`, `compact`. - * ```typescript - * let toolbarTheme = this.grid.toolbar.displayDensity; - * ``` - */ - @Input() - public get displayDensity(): DisplayDensity | string { - return this._displayDensity; - } - - /** - * Sets the theme of the `IgxGridToolbarComponent`. - * ```html - * - * ``` - */ - public set displayDensity(val: DisplayDensity | string) { - switch (val) { - case 'compact': - this._displayDensity = DisplayDensity.compact; - break; - case 'cosy': - this._displayDensity = DisplayDensity.cosy; - break; - case 'comfortable': - default: - this._displayDensity = DisplayDensity.comfortable; - } - } - /** * Returns the theme of the `IgxGridToolbarComponent`. * ```typescript * const toolbarTheme = this.grid.toolbar.hostClass; * ``` */ - - @HostBinding('attr.class') - get hostClass(): string { - switch (this._displayDensity) { - case DisplayDensity.compact: - return 'igx-grid-toolbar--compact'; - case DisplayDensity.cosy: - return 'igx-grid-toolbar--cosy'; - case DisplayDensity.comfortable: - default: - return 'igx-grid-toolbar'; - } - } - + @HostBinding('attr.class') + get hostClass(): string { + if (this.isCosy()) { + return 'igx-grid-toolbar--cosy'; + } else if (this.isCompact()) { + return 'igx-grid-toolbar--compact'; + } else { + return 'igx-grid-toolbar'; + } + } constructor(public gridAPI: IgxGridAPIService, public cdr: ChangeDetectorRef, @Optional() public excelExporter: IgxExcelExporterService, - @Optional() public csvExporter: IgxCsvExporterService) { + @Optional() public csvExporter: IgxCsvExporterService, + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) { + super(_displayDensityOptions); } private _positionSettings: PositionSettings = { diff --git a/projects/igniteui-angular/src/lib/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grid/grid.component.ts index 3f2c91d9c53..62130817aa4 100644 --- a/projects/igniteui-angular/src/lib/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grid/grid.component.ts @@ -27,7 +27,8 @@ import { ViewChildren, AfterViewChecked, ViewContainerRef, - InjectionToken + InjectionToken, + Optional } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil, first } from 'rxjs/operators'; @@ -65,7 +66,7 @@ import { } from './grid.rowEdit.directive'; import { IgxGridNavigationService } from './grid-navigation.service'; import { DeprecateProperty } from '../core/deprecateDecorators'; -import { DisplayDensity } from '../core/displayDensity'; +import { DisplayDensity, IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; let NEXT_ID = 0; const MINIMUM_COLUMN_WIDTH = 136; @@ -177,7 +178,7 @@ export interface IFocusChangeEventArgs { selector: 'igx-grid', templateUrl: './grid.component.html' }) -export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, AfterViewInit, DoCheck { +export class IgxGridComponent extends DisplayDensityBase implements OnInit, OnDestroy, AfterContentInit, AfterViewInit, DoCheck { /** * An @Input property that lets you fill the `IgxGridComponent` with an array of data. @@ -538,42 +539,6 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af @Input() public paginationTemplate: TemplateRef; - /** - * Return the display density currently applied to the grid. - * The default value is `comfortable`. - * Available options are `comfortable`, `cosy`, `compact`. - * ```typescript - * let gridTheme = this.grid.displayDensity; - * ``` - * @memberof IgxGridComponent - */ - @Input() - public get displayDensity(): DisplayDensity | string { - return this._displayDensity; - } - - /** - * Sets the display density currently applied to the grid. - * ```html - * - * ``` - * @memberof IgxGridComponent - */ - public set displayDensity(val: DisplayDensity | string) { - switch (val) { - case 'compact': - this._displayDensity = DisplayDensity.compact; - break; - case 'cosy': - this._displayDensity = DisplayDensity.cosy; - break; - case 'comfortable': - default: - this._displayDensity = DisplayDensity.comfortable; - } - this.onDensityChanged.emit(); - } - /** * Returns whether the column hiding UI for the `IgxGridComponent` is enabled. * By default it is disabled (false). @@ -1315,12 +1280,6 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af @Output() public onFocusChange = new EventEmitter(); - /** - * @hidden - */ - @Output() - protected onDensityChanged = new EventEmitter(); - /** * @hidden */ @@ -1602,13 +1561,12 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af */ @HostBinding('attr.class') get hostClass(): string { - switch (this._displayDensity) { - case DisplayDensity.cosy: - return 'igx-grid--cosy'; - case DisplayDensity.compact: - return 'igx-grid--compact'; - default: - return 'igx-grid'; + if (this.isCosy()) { + return 'igx-grid--cosy'; + } else if (this.isCompact()) { + return 'igx-grid--compact'; + } else { + return 'igx-grid'; } } @@ -1616,28 +1574,25 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af * @hidden */ get groupAreaHostClass(): string { - switch (this._displayDensity) { - case DisplayDensity.cosy: - return 'igx-drop-area--cosy'; - case DisplayDensity.compact: - return 'igx-drop-area--compact'; - default: - return 'igx-drop-area'; + if (this.isCosy()) { + return 'igx-drop-area--cosy'; + } else if (this.isCompact()) { + return 'igx-drop-area--compact'; + } else { + return 'igx-drop-area'; } } get bannerClass(): string { let bannerClass = ''; - switch (this._displayDensity) { - case DisplayDensity.cosy: - bannerClass = 'igx-banner--cosy'; - break; - case DisplayDensity.compact: - bannerClass = 'igx-banner--compact'; - break; - default: - bannerClass = 'igx-banner'; + if (this.isCosy()) { + bannerClass = 'igx-banner--cosy'; + } else if (this.isCompact()) { + bannerClass = 'igx-banner--compact'; + } else { + bannerClass = 'igx-banner'; } + bannerClass += this.rowEditPositioningStrategy.isTop ? ' igx-banner__border-top' : ' igx-banner__border-bottom'; return bannerClass; } @@ -2212,7 +2167,6 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af private _height = '100%'; private _width = '100%'; private _rowHeight; - private _displayDensity = DisplayDensity.comfortable; private _ngAfterViewInitPaassed = false; private _horizontalForOfs; @@ -2291,7 +2245,9 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af private resolver: ComponentFactoryResolver, private differs: IterableDiffers, private viewRef: ViewContainerRef, - private navigation: IgxGridNavigationService) { + private navigation: IgxGridNavigationService, + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) { + super(_displayDensityOptions); this.resizeHandler = () => { this.calculateGridSizes(); this.zone.run(() => this.markForCheck()); @@ -2446,6 +2402,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af } public ngDoCheck(): void { + super.ngDoCheck(); if (this.groupingDiffer) { const changes = this.groupingDiffer.diff(this.groupingExpressions); if (changes && this.columnList) { @@ -2580,14 +2537,12 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af * @memberof IgxGridComponent */ get defaultRowHeight(): number { - switch (this._displayDensity) { - case DisplayDensity.compact: - return 32; - case DisplayDensity.cosy: - return 40; - case DisplayDensity.comfortable: - default: - return 50; + if (this.isCosy()) { + return 40; + } else if (this.isCompact()) { + return 32; + } else { + return 50; } } diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html index 20eb658ae4d..c8c10a86c15 100644 --- a/src/app/grid-groupby/grid-groupby.sample.html +++ b/src/app/grid-groupby/grid-groupby.sample.html @@ -2,7 +2,7 @@ Toggle Hiding Of Grouped Columns
+ [height]="'800px'" [rowSelectable]='true' [primaryKey]="'ID'" (onFocusChange)="changeFocus($event)"> @@ -18,4 +18,5 @@ +
Current Display Density: {{displayDensityOptions.displayDensity}}
diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts index 008fcb27def..edac1c75842 100644 --- a/src/app/grid-groupby/grid-groupby.sample.ts +++ b/src/app/grid-groupby/grid-groupby.sample.ts @@ -1,24 +1,23 @@ -import { Component, Injectable, ViewChild, OnInit } from '@angular/core'; +import { Component, Injectable, ViewChild, OnInit, Inject } from '@angular/core'; -import { IgxGridComponent, SortingDirection, ISortingExpression, IFocusChangeEventArgs } from 'igniteui-angular'; -import { DisplayDensity } from 'projects/igniteui-angular/src/lib/core/displayDensity'; +import { IgxGridComponent, SortingDirection, ISortingExpression, IFocusChangeEventArgs, IgxInputGroupComponent } from 'igniteui-angular'; +import { DisplayDensityToken, DisplayDensity, IDisplayDensity } from 'projects/igniteui-angular/src/lib/core/displayDensity'; import { detectChanges } from '@angular/core/src/render3'; @Component({ - providers: [], + providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact} }], selector: 'app-grid-sample', styleUrls: ['grid-groupby.sample.css'], templateUrl: 'grid-groupby.sample.html' }) - export class GridGroupBySampleComponent implements OnInit { @ViewChild('grid1') public grid1: IgxGridComponent; public data: Array; public hideGroupedColumns = false; public columns: Array; public groupingExpressions: Array; + constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensity) {} public ngOnInit(): void { - this.columns = [ { field: 'ID', width: 100, hidden: true }, { field: 'CompanyName', width: 300, groupable: true }, @@ -32,12 +31,6 @@ export class GridGroupBySampleComponent implements OnInit { { field: 'Phone', width: 150, groupable: true }, { field: 'Fax', width: 150, groupable: true } ]; - this.groupingExpressions = [ - { - fieldName: 'CompanyName', - dir: SortingDirection.Asc - } - ]; this.hideGroupedColumns = true; /* tslint:disable */ @@ -94,10 +87,10 @@ export class GridGroupBySampleComponent implements OnInit { this.grid1.hideGroupedColumns = !event.checked; } toggleDensity() { - switch (this._density) { - case DisplayDensity.comfortable: this.density = DisplayDensity.cosy; break; - case DisplayDensity.cosy: this.density = DisplayDensity.compact; break; - case DisplayDensity.compact: this.density = DisplayDensity.comfortable; break; + switch (this.displayDensityOptions.displayDensity ) { + case DisplayDensity.comfortable: this.displayDensityOptions.displayDensity = DisplayDensity.compact; break; + case DisplayDensity.compact: this.displayDensityOptions.displayDensity = DisplayDensity.cosy; break; + case DisplayDensity.cosy: this.displayDensityOptions.displayDensity = DisplayDensity.comfortable; break; } } getRowsList() { From a6b0f203c6723295e8cad8aaed2d17af35300360 Mon Sep 17 00:00:00 2001 From: Vasya Kacheshmarova Date: Mon, 29 Oct 2018 15:26:15 +0200 Subject: [PATCH 02/77] Resolving confilcts related to the new structure(grids ->grid) --- .../src/lib/grids/grid-base.component.ts | 80 ++++--------------- .../src/lib/grids/grid-summary.component.ts | 2 +- .../src/lib/grids/grid-toolbar.component.ts | 60 +++----------- .../src/lib/grids/grid/grid.component.ts | 24 +++--- src/app/grid-groupby/grid-groupby.sample.ts | 3 +- 5 files changed, 46 insertions(+), 123 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 4f8e2cff3ed..a95914852e2 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -27,7 +27,8 @@ import { ViewChildren, AfterViewChecked, ViewContainerRef, - InjectionToken + InjectionToken, + Optional } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil, first } from 'rxjs/operators'; @@ -63,7 +64,7 @@ import { } from './grid.rowEdit.directive'; import { IgxGridNavigationService } from './grid-navigation.service'; import { DeprecateProperty } from '../core/deprecateDecorators'; -import { DisplayDensity } from '../core/displayDensity'; +import { IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; const MINIMUM_COLUMN_WIDTH = 136; @@ -150,7 +151,7 @@ export interface IFocusChangeEventArgs { cancel: boolean; } -export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterContentInit, AfterViewInit { +export abstract class IgxGridBaseComponent extends DisplayDensityBase implements OnInit, OnDestroy, AfterContentInit, AfterViewInit { /** * An @Input property that lets you fill the `IgxGridComponent` with an array of data. @@ -382,42 +383,6 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo @Input() public paginationTemplate: TemplateRef; - /** - * Return the display density currently applied to the grid. - * The default value is `comfortable`. - * Available options are `comfortable`, `cosy`, `compact`. - * ```typescript - * let gridTheme = this.grid.displayDensity; - * ``` - * @memberof IgxGridComponent - */ - @Input() - public get displayDensity(): DisplayDensity | string { - return this._displayDensity; - } - - /** - * Sets the display density currently applied to the grid. - * ```html - * - * ``` - * @memberof IgxGridComponent - */ - public set displayDensity(val: DisplayDensity | string) { - switch (val) { - case 'compact': - this._displayDensity = DisplayDensity.compact; - break; - case 'cosy': - this._displayDensity = DisplayDensity.cosy; - break; - case 'comfortable': - default: - this._displayDensity = DisplayDensity.comfortable; - } - this.onDensityChanged.emit(); - } - /** * Returns whether the column hiding UI for the `IgxGridComponent` is enabled. * By default it is disabled (false). @@ -1117,12 +1082,6 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo @Output() public onFocusChange = new EventEmitter(); - /** - * @hidden - */ - @Output() - protected onDensityChanged = new EventEmitter(); - /** * @hidden */ @@ -1368,26 +1327,22 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo */ @HostBinding('attr.class') get hostClass(): string { - switch (this._displayDensity) { - case DisplayDensity.cosy: + if (this.isCosy()) { return 'igx-grid--cosy'; - case DisplayDensity.compact: + } else if (this.isCompact()) { return 'igx-grid--compact'; - default: + } else { return 'igx-grid'; } } get bannerClass(): string { let bannerClass = ''; - switch (this._displayDensity) { - case DisplayDensity.cosy: + if (this.isCosy()) { bannerClass = 'igx-banner--cosy'; - break; - case DisplayDensity.compact: + } else if (this.isCompact()) { bannerClass = 'igx-banner--compact'; - break; - default: + } else { bannerClass = 'igx-banner'; } bannerClass += this.rowEditPositioningStrategy.isTop ? ' igx-banner__border-top' : ' igx-banner__border-bottom'; @@ -1944,7 +1899,6 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo private _height = '100%'; private _width = '100%'; private _rowHeight; - private _displayDensity = DisplayDensity.comfortable; private _ngAfterViewInitPaassed = false; private _horizontalForOfs; @@ -2018,7 +1972,9 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo private resolver: ComponentFactoryResolver, protected differs: IterableDiffers, private viewRef: ViewContainerRef, - private navigation: IgxGridNavigationService) { + private navigation: IgxGridNavigationService, + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) { + super(_displayDensityOptions); this.resizeHandler = () => { this.calculateGridSizes(); this.zone.run(() => this.markForCheck()); @@ -2238,13 +2194,11 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo * @memberof IgxGridComponent */ get defaultRowHeight(): number { - switch (this._displayDensity) { - case DisplayDensity.compact: + if (this.isCosy()) { + return 40; + } else if (this.isCompact()) { return 32; - case DisplayDensity.cosy: - return 40; - case DisplayDensity.comfortable: - default: + } else { return 50; } } diff --git a/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts b/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts index a080c29b94e..f9a5a519b83 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts @@ -69,7 +69,7 @@ export class IgxGridSummaryComponent implements DoCheck { @HostBinding('class.igx-grid-summary') get defaultCSS() { - return this.displayDensity === DisplayDensity.comfortable; + return this.gridAPI.get(this.gridID).isComfortable(); } get dataType(): DataType { diff --git a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts index 07c4d6a7ada..7d15bce6cf8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts @@ -4,10 +4,11 @@ import { HostBinding, Input, Optional, - ViewChild + ViewChild, + Inject } from '@angular/core'; -import { DisplayDensity } from '../core/displayDensity'; +import { IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; import { CsvFileTypes, IgxBaseExporter, @@ -29,7 +30,7 @@ import { ConnectedPositioningStrategy } from '../services/overlay/position'; selector: 'igx-grid-toolbar', templateUrl: './grid-toolbar.component.html' }) -export class IgxGridToolbarComponent { +export class IgxGridToolbarComponent extends DisplayDensityBase { /** * @hidden @@ -195,41 +196,6 @@ export class IgxGridToolbarComponent { return this.grid.pinnedColumns.length; } - private _displayDensity: DisplayDensity | string; - - /** - * Returns the theme of the `IgxGridToolbarComponent`. - * The default theme is `comfortable`. - * Available options are `comfortable`, `cosy`, `compact`. - * ```typescript - * let toolbarTheme = this.grid.toolbar.displayDensity; - * ``` - */ - @Input() - public get displayDensity(): DisplayDensity | string { - return this._displayDensity; - } - - /** - * Sets the theme of the `IgxGridToolbarComponent`. - * ```html - * - * ``` - */ - public set displayDensity(val: DisplayDensity | string) { - switch (val) { - case 'compact': - this._displayDensity = DisplayDensity.compact; - break; - case 'cosy': - this._displayDensity = DisplayDensity.cosy; - break; - case 'comfortable': - default: - this._displayDensity = DisplayDensity.comfortable; - } - } - /** * Returns the theme of the `IgxGridToolbarComponent`. * ```typescript @@ -239,21 +205,21 @@ export class IgxGridToolbarComponent { @HostBinding('attr.class') get hostClass(): string { - switch (this._displayDensity) { - case DisplayDensity.compact: - return 'igx-grid-toolbar--compact'; - case DisplayDensity.cosy: - return 'igx-grid-toolbar--cosy'; - case DisplayDensity.comfortable: - default: - return 'igx-grid-toolbar'; + if (this.isCosy()) { + return 'igx-grid-toolbar--cosy'; + } else if (this.isCompact()) { + return 'igx-grid-toolbar--compact'; + } else { + return 'igx-grid-toolbar'; } } constructor(public gridAPI: GridBaseAPIService, public cdr: ChangeDetectorRef, @Optional() public excelExporter: IgxExcelExporterService, - @Optional() public csvExporter: IgxCsvExporterService) { + @Optional() public csvExporter: IgxCsvExporterService, + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) { + super(_displayDensityOptions); } private _positionSettings: PositionSettings = { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 74b77f9774e..23fdd0d9cfc 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1,6 +1,6 @@ import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren, QueryList, ViewChild, ElementRef, TemplateRef, DoCheck, NgZone, ChangeDetectorRef, ComponentFactoryResolver, - IterableDiffers, ViewContainerRef, Inject, AfterContentInit, HostBinding, forwardRef, OnInit } from '@angular/core'; + IterableDiffers, ViewContainerRef, Inject, AfterContentInit, HostBinding, forwardRef, OnInit, Optional } from '@angular/core'; import { GridBaseAPIService } from '../api.service'; import { IgxGridBaseComponent, IgxGridTransaction, IFocusChangeEventArgs } from '../grid-base.component'; import { IgxGridNavigationService } from '../grid-navigation.service'; @@ -11,7 +11,7 @@ import { IgxTextHighlightDirective } from '../../directives/text-highlight/text- import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; import { IgxGroupByRowTemplateDirective } from './grid.directives'; import { IgxGridGroupByRowComponent } from './groupby-row.component'; -import { DisplayDensity } from '../../core/displayDensity'; +import { IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../../core/displayDensity'; import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface'; import { IBaseChipEventArgs, IChipClickEventArgs, IChipKeyDownEventArgs } from '../../chips/chip.component'; import { IChipsAreaReorderEventArgs } from '../../chips/chips-area.component'; @@ -117,8 +117,10 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, - navigation: IgxGridNavigationService) { - super(gridAPI, selection, _transactions, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation); + navigation: IgxGridNavigationService, + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) { + super(gridAPI, selection, _transactions, elementRef, zone, document, cdr, resolver, differs, + viewRef, navigation, _displayDensityOptions); this._gridAPI = gridAPI; } @@ -368,13 +370,12 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do * @hidden */ get groupAreaHostClass(): string { - switch (this.displayDensity) { - case DisplayDensity.cosy: - return 'igx-drop-area--cosy'; - case DisplayDensity.compact: - return 'igx-drop-area--compact'; - default: - return 'igx-drop-area'; + if (this.isCosy()) { + return 'igx-drop-area--cosy'; + } else if (this.isCompact()) { + return 'igx-drop-area--compact'; + } else { + return 'igx-drop-area'; } } @@ -787,6 +788,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do } public ngDoCheck(): void { + super.ngDoCheck(); if (this.groupingDiffer) { const changes = this.groupingDiffer.diff(this.groupingExpressions); if (changes && this.columnList) { diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts index 9b5cbf99858..d1f382aaa27 100644 --- a/src/app/grid-groupby/grid-groupby.sample.ts +++ b/src/app/grid-groupby/grid-groupby.sample.ts @@ -1,6 +1,7 @@ import { Component, Injectable, ViewChild, OnInit, Inject } from '@angular/core'; -import { IgxGridComponent, SortingDirection, ISortingExpression, IFocusChangeEventArgs, IgxInputGroupComponent } from 'igniteui-angular'; +import { IgxGridComponent, SortingDirection, ISortingExpression, IgxInputGroupComponent } from 'igniteui-angular'; +import { IGridFocusChangeEventArgs } from 'projects/igniteui-angular/src/lib/grids/grid/grid.component'; import { DisplayDensityToken, DisplayDensity, IDisplayDensity } from 'projects/igniteui-angular/src/lib/core/displayDensity'; import { detectChanges } from '@angular/core/src/render3'; From d1d02f2e6c7c811c77b38875d59cc566e2f60615 Mon Sep 17 00:00:00 2001 From: Vasya Kacheshmarova Date: Tue, 30 Oct 2018 14:51:48 +0200 Subject: [PATCH 03/77] Fixing styling issue --- projects/igniteui-angular/src/lib/core/displayDensity.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/displayDensity.ts b/projects/igniteui-angular/src/lib/core/displayDensity.ts index e6a7f80dc13..fe1430b9591 100644 --- a/projects/igniteui-angular/src/lib/core/displayDensity.ts +++ b/projects/igniteui-angular/src/lib/core/displayDensity.ts @@ -67,7 +67,7 @@ export class DisplayDensityBase implements DoCheck { oldDensity: currentDisplayDensity, newDensity: this._displayDensity }; - this.onDensityChanged.emit(densityChangedArgs); + this.onDensityChanged.emit(densityChangedArgs); } } From f93ebf1e7900c1f02b96e9eec4b146c246825852 Mon Sep 17 00:00:00 2001 From: Vasya Kacheshmarova Date: Wed, 31 Oct 2018 09:55:47 +0200 Subject: [PATCH 04/77] Adding event arguments for DenistyChanged --- .../igniteui-angular/src/lib/core/displayDensity.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/displayDensity.ts b/projects/igniteui-angular/src/lib/core/displayDensity.ts index fe1430b9591..221396da171 100644 --- a/projects/igniteui-angular/src/lib/core/displayDensity.ts +++ b/projects/igniteui-angular/src/lib/core/displayDensity.ts @@ -18,8 +18,8 @@ export interface IDisplayDensity { } export interface IDensityChangedEventArgs { - oldDensity: DisplayDensity | string; - newDensity: DisplayDensity | string; + oldDensity: DisplayDensity | string | IDisplayDensity; + newDensity: DisplayDensity | string | IDisplayDensity; } /** @@ -104,10 +104,15 @@ export class DisplayDensityBase implements DoCheck { } public ngDoCheck() { + const densityChangedArgs: IDensityChangedEventArgs = { + oldDensity: this.oldDisplayDensityOptions, + newDensity: this.displayDensityOptions + }; if (this.oldDisplayDensityOptions && this.displayDensityOptions && this.oldDisplayDensityOptions.displayDensity !== this.displayDensityOptions.displayDensity) { + + this.onDensityChanged.emit(densityChangedArgs); this.oldDisplayDensityOptions = Object.assign(this.oldDisplayDensityOptions, this.displayDensityOptions); - this.onDensityChanged.emit(); } } } From 2ab12bef3c938569e0ac68591f883d9e7c0281e3 Mon Sep 17 00:00:00 2001 From: Vasya Kacheshmarova Date: Wed, 31 Oct 2018 16:26:12 +0200 Subject: [PATCH 05/77] Renaming IDisplayDenisty to IDisplayDenistyOptions and setting IDensityChangedEventArgs type to be DisplayDenisty --- .../src/lib/chips/chip.component.ts | 4 ++-- .../src/lib/core/displayDensity.ts | 23 +++++++++---------- .../src/lib/grids/grid-base.component.ts | 4 ++-- .../src/lib/grids/grid-toolbar.component.ts | 4 ++-- .../src/lib/grids/grid/grid.component.ts | 4 ++-- .../lib/input-group/input-group.component.ts | 5 ++-- src/app/grid-groupby/grid-groupby.sample.ts | 4 ++-- .../input-group/input-group-child.sample.ts | 4 ++-- 8 files changed, 26 insertions(+), 26 deletions(-) diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts index 821f3621d58..bbf33e33a45 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.component.ts @@ -13,7 +13,7 @@ Inject, Optional } from '@angular/core'; -import { DisplayDensity, IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; +import { DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; import { IgxDragDirective, IDragBaseEventArgs, @@ -378,7 +378,7 @@ export class IgxChipComponent extends DisplayDensityBase { protected _movedWhileRemoving = false; constructor(public cdr: ChangeDetectorRef, public elementRef: ElementRef, private renderer: Renderer2, - @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) { + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) { super(_displayDensityOptions); } diff --git a/projects/igniteui-angular/src/lib/core/displayDensity.ts b/projects/igniteui-angular/src/lib/core/displayDensity.ts index 221396da171..97816cb7b78 100644 --- a/projects/igniteui-angular/src/lib/core/displayDensity.ts +++ b/projects/igniteui-angular/src/lib/core/displayDensity.ts @@ -13,25 +13,25 @@ export const enum DisplayDensity { /** * Describes the object used to configure the DisplayDensity in Angular DI. */ -export interface IDisplayDensity { +export interface IDisplayDensityOptions { displayDensity: DisplayDensity; } export interface IDensityChangedEventArgs { - oldDensity: DisplayDensity | string | IDisplayDensity; - newDensity: DisplayDensity | string | IDisplayDensity; + oldDensity: DisplayDensity; + newDensity: DisplayDensity; } /** * Defines the DisplayDensity DI token. */ -export const DisplayDensityToken = new InjectionToken('DisplayDensity'); +export const DisplayDensityToken = new InjectionToken('DisplayDensity'); /** * Base class containing all logic required for implementing DisplayDensity. */ export class DisplayDensityBase implements DoCheck { - protected _displayDensity: DisplayDensity | string; + protected _displayDensity: DisplayDensity; /** * Returns the theme of the component. @@ -73,7 +73,7 @@ export class DisplayDensityBase implements DoCheck { @Output() public onDensityChanged = new EventEmitter(); - protected oldDisplayDensityOptions: IDisplayDensity = { displayDensity: DisplayDensity.comfortable }; + protected oldDisplayDensityOptions: IDisplayDensityOptions = { displayDensity: DisplayDensity.comfortable }; /** *@hidden @@ -99,18 +99,17 @@ export class DisplayDensityBase implements DoCheck { return this._displayDensity === DisplayDensity.compact || (!this._displayDensity && this.displayDensityOptions && this.displayDensityOptions.displayDensity === DisplayDensity.compact); } - constructor(protected displayDensityOptions: IDisplayDensity) { + constructor(protected displayDensityOptions: IDisplayDensityOptions) { Object.assign(this.oldDisplayDensityOptions, displayDensityOptions); } public ngDoCheck() { - const densityChangedArgs: IDensityChangedEventArgs = { - oldDensity: this.oldDisplayDensityOptions, - newDensity: this.displayDensityOptions - }; if (this.oldDisplayDensityOptions && this.displayDensityOptions && this.oldDisplayDensityOptions.displayDensity !== this.displayDensityOptions.displayDensity) { - + const densityChangedArgs: IDensityChangedEventArgs = { + oldDensity: this.oldDisplayDensityOptions.displayDensity, + newDensity: this.displayDensityOptions.displayDensity + }; this.onDensityChanged.emit(densityChangedArgs); this.oldDisplayDensityOptions = Object.assign(this.oldDisplayDensityOptions, this.displayDensityOptions); } diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 4a95cb6606f..0dd040dc2b3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -66,7 +66,7 @@ import { } from './grid.rowEdit.directive'; import { IgxGridNavigationService } from './grid-navigation.service'; import { DeprecateProperty } from '../core/deprecateDecorators'; -import { IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; +import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; import { IgxGridRowComponent } from './grid'; const MINIMUM_COLUMN_WIDTH = 136; @@ -1983,7 +1983,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements protected differs: IterableDiffers, private viewRef: ViewContainerRef, private navigation: IgxGridNavigationService, - @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) { + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) { super(_displayDensityOptions); this.resizeHandler = () => { this.calculateGridSizes(); diff --git a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts index 7d15bce6cf8..ac04dd6d90c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts @@ -8,7 +8,7 @@ import { Inject } from '@angular/core'; -import { IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; +import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; import { CsvFileTypes, IgxBaseExporter, @@ -218,7 +218,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase { public cdr: ChangeDetectorRef, @Optional() public excelExporter: IgxExcelExporterService, @Optional() public csvExporter: IgxCsvExporterService, - @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) { + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) { super(_displayDensityOptions); } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 23fdd0d9cfc..15494620270 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -11,7 +11,7 @@ import { IgxTextHighlightDirective } from '../../directives/text-highlight/text- import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; import { IgxGroupByRowTemplateDirective } from './grid.directives'; import { IgxGridGroupByRowComponent } from './groupby-row.component'; -import { IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../../core/displayDensity'; +import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../../core/displayDensity'; import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface'; import { IBaseChipEventArgs, IChipClickEventArgs, IChipKeyDownEventArgs } from '../../chips/chip.component'; import { IChipsAreaReorderEventArgs } from '../../chips/chips-area.component'; @@ -118,7 +118,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do differs: IterableDiffers, viewRef: ViewContainerRef, navigation: IgxGridNavigationService, - @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) { + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) { super(gridAPI, selection, _transactions, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation, _displayDensityOptions); this._gridAPI = gridAPI; diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index df8f0029a31..908578dd7c7 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -17,7 +17,7 @@ import { IgxInputDirective, IgxInputState } from '../directives/input/input.dire import { IgxLabelDirective } from '../directives/label/label.directive'; import { IgxPrefixDirective, IgxPrefixModule} from '../directives/prefix/prefix.directive'; import { IgxSuffixDirective, IgxSuffixModule } from '../directives/suffix/suffix.directive'; -import { DisplayDensity, IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; +import { DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; let NEXT_ID = 0; @@ -254,7 +254,8 @@ export class IgxInputGroupComponent extends DisplayDensityBase { return this._type.toString(); } - constructor(private _element: ElementRef, @Optional() @Inject(DisplayDensityToken) private _displayDensityOptions: IDisplayDensity) { + constructor(private _element: ElementRef, + @Optional() @Inject(DisplayDensityToken) private _displayDensityOptions: IDisplayDensityOptions) { super(_displayDensityOptions); this.element = _element; } diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts index 5d6ced826b7..627be7f271c 100644 --- a/src/app/grid-groupby/grid-groupby.sample.ts +++ b/src/app/grid-groupby/grid-groupby.sample.ts @@ -2,7 +2,7 @@ import { Component, Injectable, ViewChild, OnInit, Inject } from '@angular/core' import { IgxGridComponent, SortingDirection, ISortingExpression, IgxInputGroupComponent } from 'igniteui-angular'; import { IGridFocusChangeEventArgs } from 'projects/igniteui-angular/src/lib/grids/grid/grid.component'; -import { DisplayDensityToken, DisplayDensity, IDisplayDensity } from 'projects/igniteui-angular/src/lib/core/displayDensity'; +import { DisplayDensityToken, DisplayDensity, IDisplayDensityOptions } from 'projects/igniteui-angular/src/lib/core/displayDensity'; import { detectChanges } from '@angular/core/src/render3'; @Component({ @@ -17,7 +17,7 @@ export class GridGroupBySampleComponent implements OnInit { public hideGroupedColumns = false; public columns: Array; public groupingExpressions: Array; - constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensity) {} + constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) {} public ngOnInit(): void { this.columns = [ { field: 'ID', width: 100, hidden: true }, diff --git a/src/app/input-group/input-group-child.sample.ts b/src/app/input-group/input-group-child.sample.ts index abfc344cb16..defd45c4f3a 100644 --- a/src/app/input-group/input-group-child.sample.ts +++ b/src/app/input-group/input-group-child.sample.ts @@ -1,5 +1,5 @@ import { Component, Inject } from '@angular/core'; -import { DisplayDensityToken, DisplayDensity, IDisplayDensity } from 'projects/igniteui-angular/src/lib/core/displayDensity'; +import { DisplayDensityToken, DisplayDensity, IDisplayDensityOptions } from 'projects/igniteui-angular/src/lib/core/displayDensity'; @Component({ // tslint:disable-next-line:component-selector @@ -14,7 +14,7 @@ export class InputGroupChildSampleComponent { lastName: 'Duduka' }; - constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensity) {} + constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) {} changeDisplayDensity() { switch (this.displayDensityOptions.displayDensity) { From 06bd3444915755a9c5212eea20000bc1229d3d62 Mon Sep 17 00:00:00 2001 From: Vasya Kacheshmarova Date: Thu, 1 Nov 2018 10:46:24 +0200 Subject: [PATCH 06/77] Trigger onDensityChanged only for components that do not have displayDenisty explicitly set when the global denisty is changed --- projects/igniteui-angular/src/lib/core/displayDensity.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/displayDensity.ts b/projects/igniteui-angular/src/lib/core/displayDensity.ts index 97816cb7b78..f99edbab9a5 100644 --- a/projects/igniteui-angular/src/lib/core/displayDensity.ts +++ b/projects/igniteui-angular/src/lib/core/displayDensity.ts @@ -104,7 +104,7 @@ export class DisplayDensityBase implements DoCheck { } public ngDoCheck() { - if (this.oldDisplayDensityOptions && this.displayDensityOptions && + if (this.oldDisplayDensityOptions && this.displayDensityOptions && !this._displayDensity && this.oldDisplayDensityOptions.displayDensity !== this.displayDensityOptions.displayDensity) { const densityChangedArgs: IDensityChangedEventArgs = { oldDensity: this.oldDisplayDensityOptions.displayDensity, From e12c975ed4a92ba88ca492596a9b8a773b584cac Mon Sep 17 00:00:00 2001 From: Vasya Kacheshmarova Date: Fri, 2 Nov 2018 13:45:40 +0200 Subject: [PATCH 07/77] Adding displayDenisty DI in tree grid constructor --- .../src/lib/grids/tree-grid/tree-grid.component.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) 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 index f5cbf9ab93c..d0b94ab701d 100644 --- 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 @@ -12,13 +12,15 @@ import { EventEmitter, Inject, NgZone, - forwardRef + forwardRef, + Optional } from '@angular/core'; import { IgxSelectionAPIService } from '../../core/selection'; import { IgxTreeGridAPIService } from './tree-grid-api.service'; import { IgxGridBaseComponent, IgxGridTransaction } from '../grid-base.component'; import { GridBaseAPIService } from '../api.service'; import { ITreeGridRecord } from './tree-grid.interfaces'; +import { IDisplayDensityOptions, DisplayDensityToken } from '../../core/displayDensity'; import { IRowToggleEventArgs } from './tree-grid.interfaces'; import { TransactionService } from '../../services/transaction/transaction'; import { DOCUMENT } from '@angular/common'; @@ -233,8 +235,10 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent { resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, - navigation: IgxGridNavigationService) { - super(gridAPI, selection, _transactions, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation); + navigation: IgxGridNavigationService, + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) { + super(gridAPI, selection, _transactions, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation, + _displayDensityOptions); this._gridAPI = gridAPI; } From fd97622755c9b03f0667afe1a0058664dbc6db32 Mon Sep 17 00:00:00 2001 From: Vasya Kacheshmarova Date: Mon, 5 Nov 2018 18:56:39 +0200 Subject: [PATCH 08/77] Group by chips are now affected from the global display denisty option --- projects/igniteui-angular/src/lib/chips/chip.spec.ts | 5 +++-- projects/igniteui-angular/src/lib/core/displayDensity.ts | 1 - .../igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts | 4 ++-- src/app/grid-groupby/grid-groupby.sample.html | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/chips/chip.spec.ts b/projects/igniteui-angular/src/lib/chips/chip.spec.ts index ada9f11a7e1..20001858f14 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.spec.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.spec.ts @@ -227,14 +227,15 @@ describe('IgxChip', () => { expect(firstChipSuffixText).toEqual('suf'); }); - it('should make chip comfortable when density is not set', () => { + it('should make chip comfortable when density is not set', () => { const fix = TestBed.createComponent(TestChipComponent); fix.detectChanges(); const components = fix.debugElement.queryAll(By.directive(IgxChipComponent)); const firstComponent = components[0]; - expect(firstComponent.componentInstance.displayDensity).toEqual(DisplayDensity.comfortable); + const isFirstChipComfortable = firstComponent.componentInstance.isComfortable(); + expect(isFirstChipComfortable).toEqual(true); // Assert default css class is applied const comfortableComponents = fix.debugElement.queryAll(By.css('.igx-chip')); diff --git a/projects/igniteui-angular/src/lib/core/displayDensity.ts b/projects/igniteui-angular/src/lib/core/displayDensity.ts index f99edbab9a5..168fa6f07bd 100644 --- a/projects/igniteui-angular/src/lib/core/displayDensity.ts +++ b/projects/igniteui-angular/src/lib/core/displayDensity.ts @@ -59,7 +59,6 @@ export class DisplayDensityBase implements DoCheck { this._displayDensity = DisplayDensity.cosy; break; case 'comfortable': - default: this._displayDensity = DisplayDensity.comfortable; } if (currentDisplayDensity !== this._displayDensity) { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts index c6aa2a1c290..17f6f04a376 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts @@ -420,7 +420,7 @@ describe('IgxGrid - Grid Toolbar', () => { fixture.detectChanges(); const toolbar = getToolbar().nativeElement; - expect(grid.toolbar.displayDensity).toBe(DisplayDensity.comfortable); + expect(grid.toolbar.isComfortable()).toBe(true); expect(toolbar.classList[0]).toBe('igx-grid-toolbar'); expect(parseFloat(toolbar.offsetHeight) > 55).toBe(true); @@ -447,7 +447,7 @@ describe('IgxGrid - Grid Toolbar', () => { fixture.detectChanges(); const toolbar = getToolbar().nativeElement; - expect(grid.toolbar.displayDensity).toBe(DisplayDensity.comfortable); + expect(grid.toolbar.isComfortable()).toBe(true); expect(toolbar.classList[0]).toBe('igx-grid-toolbar'); grid.displayDensity = DisplayDensity.compact; diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html index ad5cc5b34f0..309564abc22 100644 --- a/src/app/grid-groupby/grid-groupby.sample.html +++ b/src/app/grid-groupby/grid-groupby.sample.html @@ -2,7 +2,7 @@ Toggle Hiding Of Grouped Columns
+ [height]="'700px'" [rowSelectable]='true' [primaryKey]="'ID'" (onFocusChange)="changeFocus($event)"> From 1a9ec686ae27812b4e5b9d6cd4a5a27e123b023b Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Tue, 6 Nov 2018 11:01:34 +0200 Subject: [PATCH 09/77] fix(igxGrid): dirty check only checks if value exists, #2940 --- .../src/lib/grids/cell.component.ts | 2 +- .../src/lib/grids/grid/grid.component.spec.ts | 21 +++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index 799796c4406..3f3407d4eb0 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -461,7 +461,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit { if (this.grid.rowEditable) { const rowCurrentState = this.grid.transactions.getAggregatedValue(this.row.rowID, false); if (rowCurrentState) { - return rowCurrentState && rowCurrentState[this.column.field]; + return rowCurrentState[this.column.field] !== undefined && rowCurrentState[this.column.field] !== null; } } else { const rowTransaction: State = this.grid.transactions.getState(this.row.rowID); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index 761a7c819ba..9f095e138f3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -2869,6 +2869,27 @@ describe('IgxGrid Component Tests', () => { fixture.detectChanges(); expect(cell.value).toBe('Changed product'); })); + + it('Should properly mark cell/row as dirty if new value evaluates to `false`', fakeAsync(() => { + const fixture = TestBed.createComponent(IgxGridRowEditingTransactionComponent); + fixture.detectChanges(); + + const grid = fixture.componentInstance.grid; + const targetRow = grid.getRowByIndex(0); + let targetRowElement = targetRow.element.nativeElement; + let targetCellElement = targetRow.cells.toArray()[1].nativeElement; + expect(targetRowElement.classList).not.toContain('igx-grid__tr--edited', 'row contains edited class w/o edits'); + expect(targetCellElement.classList).not.toContain('igx-grid__td--edited', 'cell contains edited class w/o edits'); + + targetRow.cells.toArray()[1].update(''); + tick(); + fixture.detectChanges(); + + targetRowElement = targetRow.element.nativeElement; + targetCellElement = targetRow.cells.toArray()[1].nativeElement; + expect(targetRowElement.classList).toContain('igx-grid__tr--edited', 'row does not contain edited class w/ edits'); + expect(targetCellElement.classList).toContain('igx-grid__td--edited', 'cell does not contain edited class w/ edits'); + })); }); describe('Row Editing - Grouping', () => { From ef74275db19b18733fd3196b2a31b14dcf80d0ac Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Tue, 6 Nov 2018 13:40:13 +0200 Subject: [PATCH 10/77] fix(igx-grid): Open date-picker only if condition is not unary, #2937 --- .../grids/filtering/grid-filtering-row.component.html | 6 +++--- .../lib/grids/filtering/grid-filtering-row.component.ts | 9 +++++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html index 57049f5996b..3af3ec056a3 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html @@ -48,9 +48,9 @@ diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts index cff1afe31bb..c422679d07e 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts @@ -347,6 +347,15 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { this.transform(this.chipAreaScrollOffset); } + /* + * Opens date-picker if condition is not unary + */ + public openDatePicker(openDialog: Function) { + if (!this.expression.condition.isUnary) { + openDialog(); + } + } + /** * Opens the conditions dropdown. */ From a85d452c0fb7265dc0379e74ad34e3c00b17fccf Mon Sep 17 00:00:00 2001 From: Vasya Kacheshmarova Date: Tue, 6 Nov 2018 16:10:07 +0200 Subject: [PATCH 11/77] Summaries display denisty classes are now correctly applied --- .../igniteui-angular/src/lib/grids/grid-summary.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts b/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts index f9a5a519b83..1c2ab390279 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts @@ -59,12 +59,12 @@ export class IgxGridSummaryComponent implements DoCheck { @HostBinding('class.igx-grid-summary--compact') get compactCSS() { - return this.displayDensity === DisplayDensity.compact; + return this.gridAPI.get(this.gridID).isCompact(); } @HostBinding('class.igx-grid-summary--cosy') get cosyCSS() { - return this.displayDensity === DisplayDensity.cosy; + return this.gridAPI.get(this.gridID).isCosy(); } @HostBinding('class.igx-grid-summary') From 40f6dd781c119358a9bd6448874405c4d0217038 Mon Sep 17 00:00:00 2001 From: Vasya Kacheshmarova Date: Tue, 6 Nov 2018 16:21:15 +0200 Subject: [PATCH 12/77] Removing dsiplayDenisty property since it is not needed any more --- .../igniteui-angular/src/lib/grids/grid-summary.component.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts b/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts index 1c2ab390279..00c94d2aa4c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts @@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, HostBinding, Input } from '@angular/core'; -import { DisplayDensity } from '../core/displayDensity'; import { DataType } from '../data-operations/data-util'; import { GridBaseAPIService } from './api.service'; import { IgxColumnComponent } from './column.component'; @@ -77,12 +76,10 @@ export class IgxGridSummaryComponent implements DoCheck { } public summaryItemHeight; public itemClass = 'igx-grid-summary__item'; - private displayDensity: DisplayDensity | string; constructor(public gridAPI: GridBaseAPIService, public cdr: ChangeDetectorRef) { } ngDoCheck() { - this.displayDensity = this.gridAPI.get(this.gridID).displayDensity; this.summaryItemHeight = this.gridAPI.get(this.gridID).defaultRowHeight; this.cdr.detectChanges(); } From 88067d99e3cb5c0c2a67b8f94ea2baf1a64265a1 Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Tue, 6 Nov 2018 18:06:23 +0200 Subject: [PATCH 13/77] fix(igx-grid): Clear filter when value is cleared from input, #2945 --- .../src/lib/grids/filtering/grid-filtering.service.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 33ac282b511..1a3e8d5c6c2 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -204,6 +204,14 @@ export class IgxFilteringService implements OnDestroy { for (let i = 0; i < expressionsList.length; i++) { currExpressionUI = expressionsList[i]; + if (!currExpressionUI.expression.condition.isUnary && currExpressionUI.expression.searchVal === null) { + if (currExpressionUI.afterOperator === FilteringLogic.And && !currAndBranch) { + currAndBranch = new FilteringExpressionsTree(FilteringLogic.And, columnId); + expressionsTree.filteringOperands.push(currAndBranch); + } + continue; + } + if ((currExpressionUI.beforeOperator === undefined || currExpressionUI.beforeOperator === null || currExpressionUI.beforeOperator === FilteringLogic.Or) && currExpressionUI.afterOperator === FilteringLogic.And) { From 3e45fbe5f69684b9985a1747ab264c0bca6c3695 Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Thu, 8 Nov 2018 10:15:44 +0200 Subject: [PATCH 14/77] test(treeGrid): Update treeGrid Keyboard navigation tests #2953 --- .../tree-grid/tree-grid-keyBoardNav.spec.ts | 24 ++++++++++++------ .../test-utils/tree-grid-functions.spec.ts | 25 +++++++++++-------- 2 files changed, 30 insertions(+), 19 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts index c224ae07344..35883f50d08 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts @@ -286,8 +286,10 @@ describe('IgxTreeGrid - Key Board Navigation', () => { UIInteractions.triggerKeyDownEvtUponElem('Enter', cell.nativeElement, true); await wait(DEBOUNCETIME); - expect(cell.inEditMode).toBe(true); + fix.detectChanges(); + cell = treeGrid.getCellByColumn(5, 'OnPTO'); + expect(cell.inEditMode).toBe(true); // Press tab key and verify the correct cell is opened await TreeGridFunctions.moveEditableCellWithTab(fix, treeGrid, 5, 4, treeColumns); }); @@ -310,7 +312,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { await testNavigationTab(fix, treeGrid, ['HireDate', 'ID', 'Name', 'Age', 'OnPTO']); }); - it('should change correct selected cell when there are pinned columns and press tab', async () => { + it('should change correct selected cell when there are pinned columns and press shift + tab', async () => { treeGrid.getColumnByName('HireDate').pinned = true; fix.detectChanges(); @@ -338,7 +340,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, cell); UIInteractions.triggerKeyDownEvtUponElem('Space', cell.nativeElement, true); - await wait(30); + await wait(DEBOUNCETIME); fix.detectChanges(); TreeGridFunctions.verifyDataRowsSelection(fix, [0], true); @@ -620,7 +622,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { expect(treegrid.onSelection.emit).toHaveBeenCalledTimes(1); cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', ctrlKey: true })); - await wait(DEBOUNCETIME); + await wait(100); fixture.detectChanges(); cell = treegrid.getCellByColumn(9, columns[columns.length - 1]); @@ -629,7 +631,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { expect(treegrid.onSelection.emit).toHaveBeenCalledTimes(2); cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', ctrlKey: true })); - await wait(DEBOUNCETIME); + await wait(100); fixture.detectChanges(); cell = treegrid.getCellByColumn(0, columns[0]); @@ -638,7 +640,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { expect(treegrid.onSelection.emit).toHaveBeenCalledTimes(3); cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', ctrlKey: true })); - await wait(DEBOUNCETIME); + await wait(100); fixture.detectChanges(); cell = treegrid.getCellByColumn(9, columns[columns.length - 1]); @@ -735,7 +737,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { (fixture, treegrid: IgxTreeGridComponent, cellRowIndex, cellColumn, rowsCount, rowsCountAfterCollapse) => new Promise(async (resolve, reject) => { spyOn(treegrid.onRowToggle, 'emit').and.callThrough(); - const cell = treegrid.getCellByColumn(cellRowIndex, cellColumn); + let cell = treegrid.getCellByColumn(cellRowIndex, cellColumn); let rows = TreeGridFunctions.getAllRows(fixture); expect(rows.length).toBe(rowsCount); @@ -750,6 +752,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { await wait(DEBOUNCETIME); fixture.detectChanges(); + cell = treegrid.getCellByColumn(cellRowIndex, cellColumn); rows = TreeGridFunctions.getAllRows(fixture); expect(rows.length).toBe(rowsCountAfterCollapse); TreeGridFunctions.verifyTreeRowHasCollapsedIcon(rows[cellRowIndex]); @@ -761,6 +764,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { await wait(DEBOUNCETIME); fixture.detectChanges(); + cell = treegrid.getCellByColumn(cellRowIndex, cellColumn); rows = TreeGridFunctions.getAllRows(fixture); expect(rows.length).toBe(rowsCountAfterCollapse); TreeGridFunctions.verifyTreeRowHasCollapsedIcon(rows[cellRowIndex]); @@ -772,6 +776,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { await wait(DEBOUNCETIME); fixture.detectChanges(); + cell = treegrid.getCellByColumn(cellRowIndex, cellColumn); rows = TreeGridFunctions.getAllRows(fixture); expect(rows.length).toBe(rowsCount); TreeGridFunctions.verifyTreeRowHasExpandedIcon(rows[cellRowIndex]); @@ -783,6 +788,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { await wait(DEBOUNCETIME); fixture.detectChanges(); + cell = treegrid.getCellByColumn(cellRowIndex, cellColumn); rows = TreeGridFunctions.getAllRows(fixture); expect(rows.length).toBe(rowsCount); TreeGridFunctions.verifyTreeRowHasExpandedIcon(rows[cellRowIndex]); @@ -794,7 +800,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { const testEditingNavigationTab = (fixture, treegrid: IgxTreeGridComponent, columns) => new Promise(async (resolve, reject) => { - const cell = treegrid.getCellByColumn(2, columns[2]); + let cell = treegrid.getCellByColumn(2, columns[2]); cell.nativeElement.dispatchEvent(new Event('focus')); await wait(DEBOUNCETIME); @@ -805,6 +811,8 @@ describe('IgxTreeGrid - Key Board Navigation', () => { UIInteractions.triggerKeyDownEvtUponElem('Enter', cell.nativeElement, true); await wait(DEBOUNCETIME); fixture.detectChanges(); + + cell = treeGrid.getCellByColumn(2, columns[2]); expect(cell.inEditMode).toBe(true); // Test tab on child row diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts index 5028251be98..3f1c85751fd 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts @@ -331,17 +331,18 @@ export class TreeGridFunctions { firstColumnName: string, nextColumnName: string, moveRight: boolean = true) => new Promise(async (resolve, reject) => { - const cell = treeGrid.getCellByColumn(rowIndex, firstColumnName); + let cell = treeGrid.getCellByColumn(rowIndex, firstColumnName); const keyboardEventKey = moveRight ? 'ArrowRight' : 'ArrowLeft'; UIInteractions.triggerKeyDownEvtUponElem(keyboardEventKey, cell.nativeElement, true); await wait(DEBOUNCETIME); fix.detectChanges(); - const newCell = treeGrid.getCellByColumn(rowIndex, nextColumnName); + cell = treeGrid.getCellByColumn(rowIndex, firstColumnName); if (cell !== undefined && cell !== null) { TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, cell, false); } + const newCell = treeGrid.getCellByColumn(rowIndex, nextColumnName); TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, newCell); expect(newCell.focused).toEqual(true); @@ -361,14 +362,16 @@ export class TreeGridFunctions { fix.detectChanges(); cell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex]); + if (cell !== undefined && cell !== null) { + TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, cell, false); + } + if (columnIndex === columns.length - 1) { newCell = treeGrid.getCellByColumn(rowIndex + 1, columns[0]); } else { newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex + 1]); } - if (cell !== undefined && cell !== null) { - TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, cell, false); - } + TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, newCell); expect(newCell.focused).toEqual(true); @@ -415,15 +418,15 @@ export class TreeGridFunctions { fix.detectChanges(); cell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex]); + if (cell !== undefined && cell !== null) { + expect(cell.inEditMode).toBe(false); + } if (columnIndex === columns.length - 1) { newCell = treeGrid.getCellByColumn(rowIndex + 1, columns[0]); } else { newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex + 1]); } - if (cell !== undefined && cell !== null) { - expect(cell.inEditMode).toBe(false); - } expect(newCell.inEditMode).toBe(true); resolve(); }) @@ -441,15 +444,15 @@ export class TreeGridFunctions { fix.detectChanges(); cell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex]); + if (cell !== undefined && cell !== null) { + expect(cell.inEditMode).toBe(false); + } if (columnIndex === 0) { newCell = treeGrid.getCellByColumn(rowIndex - 1, columns[columns.length - 1]); } else { newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex - 1]); } - if (cell !== undefined && cell !== null) { - expect(cell.inEditMode).toBe(false); - } expect(newCell.inEditMode).toBe(true); resolve(); }) From ab3b06e321d2beaaa9a14486f392c65828cab207 Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov <34062094+sstoyanovIG@users.noreply.github.com> Date: Fri, 9 Nov 2018 15:45:47 +0200 Subject: [PATCH 15/77] Improve keyboard navigation in filtering (#2964) * fix(igx-grid): Improve keyboard navigation in filtering, #2951 * fix(igx-grid): Get scroll from first row, when there is one, #2951 * chore(igx-grid): Refactor code, #2951 * chore(igx-grid): Add cases for groupbyrow and pinned columns, #2951 * chore(igx-grid): Fix lint errors, #2951 --- .../grid-filtering-cell.component.html | 2 +- .../grid-filtering-cell.component.ts | 120 +++++++++++++----- .../grid-filtering-row.component.html | 2 +- .../filtering/grid-filtering-row.component.ts | 7 + .../grids/filtering/grid-filtering.service.ts | 28 +++- .../src/lib/grids/grid-navigation.service.ts | 52 +++++--- .../src/lib/grids/grid/grid.component.html | 4 +- .../lib/grids/grid/groupby-row.component.ts | 8 +- .../grids/tree-grid/tree-grid.component.html | 4 +- 9 files changed, 162 insertions(+), 65 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.html b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.html index 0a46b6b60ef..c7bfec3f9d9 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.html @@ -26,7 +26,7 @@ {{filteringService.getOperatorAsString(item.afterOperator)}} -
+
filter_list
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts index 410aeb61eb1..2276e0aedff 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts @@ -17,6 +17,7 @@ import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../ import { IgxFilteringService, ExpressionUI } from './grid-filtering.service'; import { KEYS, cloneArray } from '../../core/utils'; import { IgxGridNavigationService } from '../grid-navigation.service'; +import { IgxGridGroupByRowComponent } from '../grid'; /** * @hidden @@ -96,7 +97,6 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit { } ngOnInit(): void { - this.filteringService.columnToChipToFocus.set(this.column.field, false); this.filteringService.columnToMoreIconHidden.set(this.column.field, true); } @@ -104,44 +104,49 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit { this.updateFilterCellArea(); } - @HostListener('keydown.shift.tab', ['$event']) @HostListener('keydown.tab', ['$event']) public onTabKeyDown(eventArgs) { - if (eventArgs.shiftKey) { - if (this.column.visibleIndex > 0 && !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex - 1)) { - eventArgs.preventDefault(); - this.filteringService.grid.headerContainer.scrollTo(this.column.visibleIndex - 1); - } else if (this.column.visibleIndex === 0) { - eventArgs.preventDefault(); + const pinnedColumns = this.filteringService.grid.pinnedColumns; + const nextIndex = this.column.visibleIndex + 1 - pinnedColumns.length; + + if (this.isLastElementFocused()) { + if (nextIndex < this.filteringService.grid.unpinnedColumns.length && + pinnedColumns.indexOf(this.column) === pinnedColumns.length - 1 && + !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex + 1)) { + this.ScrollToChip(0, true); + eventArgs.stopPropagation(); + return; } - } else { if (this.column.visibleIndex === this.filteringService.grid.columnList.length - 1) { - if (this.currentTemplate === this.defaultFilter) { - if (this.isMoreIconVisible() === false) { - if (this.moreIcon.nativeElement === document.activeElement) { - this.navService.goToFirstCell(); - } - } else if (this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__item`) === - document.activeElement) { - this.navService.goToFirstCell(); + if (!this.filteringService.grid.filteredData || this.filteringService.grid.filteredData.length > 0) { + if (this.filteringService.grid.rowList.filter(row => row instanceof IgxGridGroupByRowComponent).length > 0) { + eventArgs.stopPropagation(); + return; } - } else { this.navService.goToFirstCell(); } - } else if (!this.navService.isColumnFullyVisible(this.column.visibleIndex + 1)) { eventArgs.preventDefault(); - this.filteringService.grid.headerContainer.scrollTo(this.column.visibleIndex + 1); + } else if (!this.column.pinned && !this.navService.isColumnFullyVisible(this.column.visibleIndex + 1)) { + eventArgs.preventDefault(); + this.ScrollToChip(nextIndex, true); } } - eventArgs.stopPropagation(); } - /** - * Returns the chip to be focused. - */ - public getChipToFocus() { - return this.filteringService.columnToChipToFocus.get(this.column.field); + @HostListener('keydown.shift.tab', ['$event']) + public onShiftTabKeyDown(eventArgs) { + if (this.isFirstElementFocused()) { + const prevIndex = this.column.visibleIndex - 1 - this.filteringService.grid.pinnedColumns.length; + + if (this.column.visibleIndex > 0 && !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex - 1)) { + eventArgs.preventDefault(); + this.ScrollToChip(prevIndex, false); + } else if (this.column.visibleIndex === 0) { + eventArgs.preventDefault(); + } + } + eventArgs.stopPropagation(); } /** @@ -199,6 +204,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit { public onChipRemoved(eventArgs: IBaseChipEventArgs, item: ExpressionUI): void { const indexToRemove = this.expressionsList.indexOf(item); this.removeExpression(indexToRemove); + this.focusChip(); } /** @@ -224,20 +230,20 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit { */ public filteringIndicatorClass() { return { - [this.baseClass]: !this.isMoreIconVisible(), - [`${this.baseClass}--hidden`]: this.isMoreIconVisible() + [this.baseClass]: !this.isMoreIconHidden(), + [`${this.baseClass}--hidden`]: this.isMoreIconHidden() }; } /** * Focus a chip depending on the current visible template. */ - public focusChip() { + public focusChip(focusFirst: boolean = false) { if (this.currentTemplate === this.defaultFilter) { - if (this.isMoreIconVisible() === false) { - this.moreIcon.nativeElement.focus(); + if (focusFirst) { + this.focusFirstElement(); } else { - this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus(); + this.focusElement(); } } else if (this.currentTemplate === this.emptyFilter) { this.ghostChip.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus(); @@ -264,7 +270,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit { this.filteringService.filter(this.column.field, this.rootExpressionsTree); } - private isMoreIconVisible(): boolean { + private isMoreIconHidden(): boolean { return this.filteringService.columnToMoreIconHidden.get(this.column.field); } @@ -309,4 +315,52 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit { this.cdr.detectChanges(); } } + + private ScrollToChip(columnIndex: number, shouldFocusNext: boolean) { + this.filteringService.grid.nativeElement.focus({preventScroll: true}); + this.filteringService.columnToFocus = this.filteringService.grid.unpinnedColumns[columnIndex]; + this.filteringService.shouldFocusNext = shouldFocusNext; + this.filteringService.grid.headerContainer.scrollTo(columnIndex); + } + + private isFirstElementFocused(): boolean { + return !(this.chipsArea && this.chipsArea.chipsList.length > 0 && + this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`) !== document.activeElement); + } + + private isLastElementFocused(): boolean { + if (this.chipsArea) { + if (this.isMoreIconHidden() && this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__remove`) !== + document.activeElement) { + return false; + } else if (!this.isMoreIconHidden() && this.moreIcon.nativeElement !== document.activeElement) { + return false; + } + } + return true; + } + + private focusFirstElement(): void { + if (this.chipsArea.chipsList.length > 0) { + this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus(); + } else { + this.moreIcon.nativeElement.focus(); + } + } + + private focusElement(): void { + if (this.filteringService.shouldFocusNext) { + if (!this.isMoreIconHidden() && this.chipsArea.chipsList.length === 0) { + this.moreIcon.nativeElement.focus(); + } else { + this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus(); + } + } else { + if (!this.isMoreIconHidden()) { + this.moreIcon.nativeElement.focus(); + } else { + this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__remove`).focus(); + } + } + } } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html index 3af3ec056a3..33db66551f7 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html @@ -108,6 +108,6 @@
- +
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts index 61367f89308..479bab93214 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts @@ -163,6 +163,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { this.unaryConditionChanged.unsubscribe(); } + @HostListener('keydown.shift.tab', ['$event']) @HostListener('keydown.tab', ['$event']) public onTabKeydown(event) { event.stopPropagation(); @@ -299,6 +300,9 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { public clearFiltering() { this.filteringService.clearFilter(this.column.field); this.resetExpression(); + if (this.input) { + this.input.nativeElement.focus(); + } this.cdr.detectChanges(); this.chipAreaScrollOffset = 0; @@ -338,6 +342,9 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { }); } + this.filteringService.updateFilteringCell(this.column.field); + this.filteringService.focusFilterCellChip(this.column.field, true); + this.filteringService.isFilterRowVisible = false; this.filteringService.filteredColumn = null; this.filteringService.selectedExpression = null; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 1a3e8d5c6c2..31c5327ef04 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -37,14 +37,15 @@ export class IgxFilteringService implements OnDestroy { private filterPipe = new IgxGridFilterConditionPipe(); private titlecasePipe = new TitleCasePipe(); private datePipe = new DatePipe(window.navigator.language); + private columnStartIndex = -1; public gridId: string; public isFilterRowVisible = false; public filteredColumn = null; public selectedExpression: IFilteringExpression = null; - public columnToChipToFocus = new Map(); + public columnToFocus = null; + public shouldFocusNext = false; public columnToMoreIconHidden = new Map(); - public columnStartIndex = -1; constructor(private gridAPI: GridBaseAPIService, private iconService: IgxIconService) {} @@ -73,12 +74,12 @@ export class IgxFilteringService implements OnDestroy { this.columnStartIndex = eventArgs.startIndex; this.grid.filterCellList.forEach((filterCell) => { filterCell.updateFilterCellArea(); - if (filterCell.getChipToFocus()) { - this.columnToChipToFocus.set(filterCell.column.field, false); - filterCell.focusChip(); - } }); } + if (this.columnToFocus) { + this.focusFilterCellChip(this.columnToFocus.field, false); + this.columnToFocus = null; + } }); this.grid.onColumnMovingEnd.pipe(takeUntil(this.destroy$)).subscribe((event) => { @@ -268,13 +269,26 @@ export class IgxFilteringService implements OnDestroy { } } - private updateFilteringCell(columnId: string) { + /** + * Updates the content of a filterCell. + */ + public updateFilteringCell(columnId: string) { const filterCell = this.grid.filterCellList.find(cell => cell.column.field === columnId); if (filterCell) { filterCell.updateFilterCellArea(); } } + /** + * Focus a chip in a filterCell. + */ + public focusFilterCellChip(columnId: string, focusFirst: boolean) { + const filterCell = this.grid.filterCellList.find(cell => cell.column.field === columnId); + if (filterCell) { + filterCell.focusChip(focusFirst); + } + } + private isFilteringTreeComplex(expressions: IFilteringExpressionsTree | IFilteringExpression): boolean { if (!expressions) { return false; diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index 0a53edd25b3..07641cbcd14 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'; import { IgxGridBaseComponent } from './grid-base.component'; import { first } from 'rxjs/operators'; import { IgxColumnComponent } from './column.component'; +import { IgxGridRowComponent } from './grid/grid-row.component'; enum MoveDirection { LEFT = 'left', @@ -36,26 +37,35 @@ export class IgxGridNavigationService { } public isColumnFullyVisible(visibleColumnIndex: number) { - const horizontalScroll = this.grid.dataRowList.first.virtDirRow.getHorizontalScroll(); + let forOfDir; + if (this.grid.dataRowList.length > 0) { + forOfDir = this.grid.dataRowList.first.virtDirRow; + } else { + forOfDir = this.grid.headerContainer; + } + const horizontalScroll = forOfDir.getHorizontalScroll(); if (!horizontalScroll.clientWidth || this.grid.columnList.filter(c => !c.columnGroup).find((column) => column.visibleIndex === visibleColumnIndex).pinned) { return true; } const index = this.getColumnUnpinnedIndex(visibleColumnIndex); - return this.displayContainerWidth >= - this.grid.dataRowList.first.virtDirRow.getColumnScrollLeft(index + 1) - - this.displayContainerScrollLeft; + return this.displayContainerWidth >= forOfDir.getColumnScrollLeft(index + 1) - this.displayContainerScrollLeft; } public isColumnLeftFullyVisible(visibleColumnIndex) { - const horizontalScroll = this.grid.dataRowList.first.virtDirRow.getHorizontalScroll(); + let forOfDir; + if (this.grid.dataRowList.length > 0) { + forOfDir = this.grid.dataRowList.first.virtDirRow; + } else { + forOfDir = this.grid.headerContainer; + } + const horizontalScroll = forOfDir.getHorizontalScroll(); if (!horizontalScroll.clientWidth || this.grid.columnList.filter(c => !c.columnGroup).find((column) => column.visibleIndex === visibleColumnIndex).pinned) { return true; } const index = this.getColumnUnpinnedIndex(visibleColumnIndex); - return this.displayContainerScrollLeft <= - this.grid.dataRowList.first.virtDirRow.getColumnScrollLeft(index); + return this.displayContainerScrollLeft <= forOfDir.getColumnScrollLeft(index); } public get gridOrderedColumns(): IgxColumnComponent[] { @@ -256,14 +266,6 @@ export class IgxGridNavigationService { public navigateUp(rowElement, currentRowIndex, visibleColumnIndex) { if (currentRowIndex === 0) { - this.grid.rowList.first.cells.first._clearCellSelection(); - - if (this.grid.allowFiltering) { - const visColLength = this.grid.visibleColumns.length; - this.grid.headerContainer.scrollTo(visColLength - 1); - this.grid.filteringService.columnToChipToFocus.set(this.grid.visibleColumns[visColLength - 1].field, true); - } - return; } const containerTopOffset = parseInt(this.verticalDisplayContainerElement.style.top, 10); @@ -413,14 +415,30 @@ export class IgxGridNavigationService { } } + public moveFocusToFilterCell() { + this.grid.rowList.find(row => row instanceof IgxGridRowComponent).cells.first._clearCellSelection(); + const visColLength = this.grid.unpinnedColumns.length; + if (this.isColumnFullyVisible(visColLength - 1)) { + this.grid.filteringService.focusFilterCellChip(this.grid.filterCellList.last.column.field, false); + } else { + this.grid.filteringService.columnToFocus = this.grid.unpinnedColumns[visColLength - 1]; + this.grid.filteringService.shouldFocusNext = false; + this.grid.headerContainer.scrollTo(visColLength - 1); + } + } + public performShiftTabKey(currentRowEl, rowIndex, visibleColumnIndex) { if (visibleColumnIndex === 0) { if (this.isRowInEditMode(rowIndex)) { this.grid.rowEditTabs.last.element.nativeElement.focus(); return; } - this.navigateUp(currentRowEl, rowIndex, - this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex); + if (rowIndex === 0 && this.grid.allowFiltering) { + this.moveFocusToFilterCell(); + } else { + this.navigateUp(currentRowEl, rowIndex, + this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex); + } } else { const cell = currentRowEl.querySelector(`igx-grid-cell[data-visibleIndex="${visibleColumnIndex}"]`); if (cell) { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 893bdf43424..a7774dd4b7b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -57,7 +57,7 @@
-
@@ -67,7 +67,7 @@
-
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts index eae02c2721c..b3e90c922be 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts @@ -207,8 +207,12 @@ export class IgxGridGroupByRowComponent { break; case 'tab': if (event.shiftKey) { - this.grid.navigation.navigateUp(this.nativeElement, this.index, - this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex); + if (this.index === 0) { + this.grid.navigation.moveFocusToFilterCell(); + } else { + this.grid.navigation.navigateUp(this.nativeElement, this.index, + this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex); + } } else { this.grid.navigation.navigateDown(this.nativeElement, this.index, 0); } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index 288da019709..34569aa7232 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -34,7 +34,7 @@
-
@@ -44,7 +44,7 @@
-
From 3e9288fe54a3ea98afd932e60b8047d3bc78b7df Mon Sep 17 00:00:00 2001 From: gedinakova Date: Fri, 9 Nov 2018 16:30:55 +0200 Subject: [PATCH 16/77] feat(Exporters): #2982 Adding TreeGrid tests. --- .../excel/excel-exporter-grid.spec.ts | 546 ++++++++++-------- 1 file changed, 309 insertions(+), 237 deletions(-) diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts index b803c9ad7ca..d5fac532467 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts @@ -8,12 +8,15 @@ import { IgxExcelExporterService } from './excel-exporter'; import { IgxExcelExporterOptions } from './excel-exporter-options'; import { JSZipWrapper } from './jszip-verification-wrapper.spec'; import { FileContentData } from './test-data.service.spec'; -import { IgxStringFilteringOperand, SortingDirection } from '../../../public_api'; +import { IgxStringFilteringOperand, SortingDirection, IgxTreeGridComponent } from '../../../public_api'; import { ReorderedColumnsComponent, GridIDNameJobTitleComponent } from '../../test-utils/grid-samples.spec'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { first } from 'rxjs/operators'; import { configureTestSuite } from '../../test-utils/configure-suite'; +import { IgxTreeGridPrimaryForeignKeyComponent } from '../../test-utils/tree-grid-components.spec'; +import { IgxTreeGridModule } from '../../grids/tree-grid'; +import { IgxNumberFilteringOperand } from '../../data-operations/filtering-condition'; describe('Excel Exporter', () => { configureTestSuite(); @@ -25,20 +28,16 @@ describe('Excel Exporter', () => { TestBed.configureTestingModule({ declarations: [ ReorderedColumnsComponent, - GridIDNameJobTitleComponent + GridIDNameJobTitleComponent, + IgxTreeGridPrimaryForeignKeyComponent ], - imports: [IgxGridModule.forRoot()] + imports: [IgxGridModule.forRoot(), IgxTreeGridModule] }).compileComponents(); })); beforeEach(async(() => { exporter = new IgxExcelExporterService(); actualData = new FileContentData(); - options = new IgxExcelExporterOptions('GridExcelExport'); - - // Set column width to a specific value to workaround the issue where - // different platforms measure text differently - options.columnWidth = 50; // Spy the saveBlobToFile method so the files are not really created spyOn(ExportUtilities as any, 'saveBlobToFile'); @@ -49,301 +48,305 @@ describe('Excel Exporter', () => { exporter.onRowExport.unsubscribe(); })); - it('should export grid as displayed.', async () => { - const currentGrid: IgxGridComponent = null; - TestMethods.testRawData(currentGrid, async (grid) => { - - const wrapper = await getExportedData(grid, options); - wrapper.verifyStructure(); - // wrapper.verifyTemplateFilesContent(); - wrapper.verifyDataFilesContent(actualData.simpleGridData); + describe('', () => { + beforeEach(async(() => { + options = createExportOptions('GridExcelExport', 50); + })); + + it('should export grid as displayed.', async () => { + const currentGrid: IgxGridComponent = null; + TestMethods.testRawData(currentGrid, async (grid) => { + const wrapper = await getExportedData(grid, options); + wrapper.verifyStructure(); + // wrapper.verifyTemplateFilesContent(); + wrapper.verifyDataFilesContent(actualData.simpleGridData); + }); }); - }); - - it('should honor \'ignoreFiltering\' option.', async () => { - const result = TestMethods.createGridAndFilter(); - const fix = result.fixture; - const grid = result.grid; - expect(grid.rowList.length).toEqual(1); - - options.ignoreFiltering = false; - fix.detectChanges(); - let wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridDataRecord5, 'One row only should have been exported!'); + it('should honor \'ignoreFiltering\' option.', async () => { + const result = TestMethods.createGridAndFilter(); + const fix = result.fixture; + const grid = result.grid; + expect(grid.rowList.length).toEqual(1); - options.ignoreFiltering = true; - fix.detectChanges(); - wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All 10 rows should have been exported!'); - }); + options.ignoreFiltering = false; + fix.detectChanges(); - it('should honor filter criteria changes.', async () => { - const result = TestMethods.createGridAndFilter(); - const fix = result.fixture; - const grid = result.grid; - expect(grid.rowList.length).toEqual(1); - options.ignoreFiltering = false; + let wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridDataRecord5, 'One row only should have been exported!'); - let wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridDataRecord5, 'One row should have been exported!'); + options.ignoreFiltering = true; + fix.detectChanges(); + wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All 10 rows should have been exported!'); + }); - grid.filter('JobTitle', 'Director', IgxStringFilteringOperand.instance().condition('equals'), true); - fix.detectChanges(); + it('should honor filter criteria changes.', async () => { + const result = TestMethods.createGridAndFilter(); + const fix = result.fixture; + const grid = result.grid; + expect(grid.rowList.length).toEqual(1); + options.ignoreFiltering = false; - expect(grid.rowList.length).toEqual(2, 'Invalid number of rows after filtering!'); - wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridDataDirectors, 'Two rows should have been exported!'); - }); + let wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridDataRecord5, 'One row should have been exported!'); - it('should honor \'ignoreColumnsVisibility\' option.', async () => { - const fix = TestBed.createComponent(GridIDNameJobTitleComponent); - fix.detectChanges(); - - const grid = fix.componentInstance.grid; - grid.columns[0].hidden = true; - options.ignoreColumnsOrder = true; - options.ignoreColumnsVisibility = false; - fix.detectChanges(); + grid.filter('JobTitle', 'Director', IgxStringFilteringOperand.instance().condition('equals'), true); + fix.detectChanges(); - expect(grid.visibleColumns.length).toEqual(2, 'Invalid number of visible columns!'); - let wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridNameJobTitle, 'Two columns should have been exported!'); + expect(grid.rowList.length).toEqual(2, 'Invalid number of rows after filtering!'); + wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridDataDirectors, 'Two rows should have been exported!'); + }); - options.ignoreColumnsVisibility = true; - fix.detectChanges(); - wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All three columns should have been exported!'); - }); + it('should honor \'ignoreColumnsVisibility\' option.', async () => { + const fix = TestBed.createComponent(GridIDNameJobTitleComponent); + fix.detectChanges(); - it('should honor columns visibility changes.', async () => { - const fix = TestBed.createComponent(GridIDNameJobTitleComponent); - fix.detectChanges(); + const grid = fix.componentInstance.grid; + grid.columns[0].hidden = true; + options.ignoreColumnsOrder = true; + options.ignoreColumnsVisibility = false; + fix.detectChanges(); - const grid = fix.componentInstance.grid; - options.ignoreColumnsOrder = true; - options.ignoreColumnsVisibility = false; + expect(grid.visibleColumns.length).toEqual(2, 'Invalid number of visible columns!'); + let wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridNameJobTitle, 'Two columns should have been exported!'); - expect(grid.visibleColumns.length).toEqual(3, 'Invalid number of visible columns!'); - let wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All columns should have been exported!'); + options.ignoreColumnsVisibility = true; + fix.detectChanges(); + wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All three columns should have been exported!'); + }); - grid.columns[0].hidden = true; - fix.detectChanges(); + it('should honor columns visibility changes.', async () => { + const fix = TestBed.createComponent(GridIDNameJobTitleComponent); + fix.detectChanges(); - expect(grid.visibleColumns.length).toEqual(2, 'Invalid number of visible columns!'); - wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridNameJobTitle, 'Two columns should have been exported!'); + const grid = fix.componentInstance.grid; + options.ignoreColumnsOrder = true; + options.ignoreColumnsVisibility = false; - grid.columns[0].hidden = false; - fix.detectChanges(); + expect(grid.visibleColumns.length).toEqual(3, 'Invalid number of visible columns!'); + let wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All columns should have been exported!'); - expect(grid.visibleColumns.length).toEqual(3, 'Invalid number of visible columns!'); - wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All columns should have been exported!'); + grid.columns[0].hidden = true; + fix.detectChanges(); - grid.columns[0].hidden = undefined; - fix.detectChanges(); + expect(grid.visibleColumns.length).toEqual(2, 'Invalid number of visible columns!'); + wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridNameJobTitle, 'Two columns should have been exported!'); - expect(grid.visibleColumns.length).toEqual(3, 'Invalid number of visible columns!'); - wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All columns should have been exported!'); - }); + grid.columns[0].hidden = false; + fix.detectChanges(); - it('should honor columns declaration order.', async () => { - const fix = TestBed.createComponent(ReorderedColumnsComponent); - fix.detectChanges(); - const grid = fix.componentInstance.grid; + expect(grid.visibleColumns.length).toEqual(3, 'Invalid number of visible columns!'); + wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All columns should have been exported!'); - const wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridNameJobTitleID); - }); + grid.columns[0].hidden = undefined; + fix.detectChanges(); - it('should honor \'ignorePinning\' option.', async () => { - const result = TestMethods.createGridAndPinColumn([1]); - const fix = result.fixture; - const grid = result.grid; + expect(grid.visibleColumns.length).toEqual(3, 'Invalid number of visible columns!'); + wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridData, 'All columns should have been exported!'); + }); - options.ignorePinning = false; - fix.detectChanges(); + it('should honor columns declaration order.', async () => { + const fix = TestBed.createComponent(ReorderedColumnsComponent); + fix.detectChanges(); + const grid = fix.componentInstance.grid; - let wrapper = await getExportedData(grid, options); - wrapper.verifyStructure(); - // wrapper.verifyTemplateFilesContent(); - wrapper.verifyDataFilesContent(actualData.gridNameFrozen, 'One frozen column should have been exported!'); + const wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridNameJobTitleID); + }); - options.ignorePinning = true; - fix.detectChanges(); - wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.gridNameIDJobTitle, 'No frozen columns should have been exported!'); - }); + it('should honor \'ignorePinning\' option.', async () => { + const result = TestMethods.createGridAndPinColumn([1]); + const fix = result.fixture; + const grid = result.grid; - it('should honor pinned state changes.', async () => { - const result = TestMethods.createGridAndPinColumn([1]); - const fix = result.fixture; - const grid = result.grid; + options.ignorePinning = false; + fix.detectChanges(); - let wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.gridNameFrozen, 'One frozen column should have been exported!'); + let wrapper = await getExportedData(grid, options); + wrapper.verifyStructure(); + // wrapper.verifyTemplateFilesContent(); + wrapper.verifyDataFilesContent(actualData.gridNameFrozen, 'One frozen column should have been exported!'); - grid.columns[1].pinned = false; - fix.detectChanges(); - wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridData, 'No frozen columns should have been exported!'); - }); + options.ignorePinning = true; + fix.detectChanges(); + wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.gridNameIDJobTitle, 'No frozen columns should have been exported!'); + }); - it('should honor applied sorting.', async () => { - const fix = TestBed.createComponent(GridIDNameJobTitleComponent); - fix.detectChanges(); + it('should honor pinned state changes.', async () => { + const result = TestMethods.createGridAndPinColumn([1]); + const fix = result.fixture; + const grid = result.grid; - const grid = fix.componentInstance.grid; - grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true}); - fix.detectChanges(); + let wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.gridNameFrozen, 'One frozen column should have been exported!'); - const wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridSortByName); + grid.columns[1].pinned = false; + fix.detectChanges(); + wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridData, 'No frozen columns should have been exported!'); + }); - // XXX : ???? What's the point of this? - grid.clearSort(); - fix.detectChanges(); - }); + it('should honor applied sorting.', async () => { + const fix = TestBed.createComponent(GridIDNameJobTitleComponent); + fix.detectChanges(); - it('should honor changes in applied sorting.', async () => { - const fix = TestBed.createComponent(GridIDNameJobTitleComponent); - fix.detectChanges(); + const grid = fix.componentInstance.grid; + grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true}); + fix.detectChanges(); - const grid = fix.componentInstance.grid; - grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true}); - fix.detectChanges(); + const wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridSortByName); - let wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridSortByName, 'Ascending sorted data should have been exported.'); + // XXX : ???? What's the point of this? + grid.clearSort(); + fix.detectChanges(); + }); - grid.sort({fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: true}); - fix.detectChanges(); + it('should honor changes in applied sorting.', async () => { + const fix = TestBed.createComponent(GridIDNameJobTitleComponent); + fix.detectChanges(); - wrapper = await getExportedData(grid, options); - wrapper.verifyDataFilesContent(actualData.simpleGridSortByNameDesc(true), 'Descending sorted data should have been exported.'); + const grid = fix.componentInstance.grid; + grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true}); + fix.detectChanges(); - grid.clearSort(); - grid.sort({fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: true}); - fix.detectChanges(); + let wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridSortByName, 'Ascending sorted data should have been exported.'); - // wrapper = await getExportedData(grid, options); - // wrapper.verifyDataFilesContent(actualData.simpleGridSortByNameDesc(false), 'Unsorted data should have been exported.'); - }); + grid.sort({fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: true}); + fix.detectChanges(); - it('should export all columns with the width specified in options.', async () => { - const fix = TestBed.createComponent(GridIDNameJobTitleComponent); - fix.detectChanges(); + wrapper = await getExportedData(grid, options); + wrapper.verifyDataFilesContent(actualData.simpleGridSortByNameDesc(true), 'Descending sorted data should have been exported.'); - const grid = fix.componentInstance.grid; - grid.columns[1].hidden = true; - grid.columns[2].hidden = true; - const columnWidths = [100, 200, 0, undefined, null]; - fix.detectChanges(); + grid.clearSort(); + grid.sort({fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: true}); + fix.detectChanges(); - await setColWidthAndExport(grid, options, fix, columnWidths[0]); - await setColWidthAndExport(grid, options, fix, columnWidths[1]); - await setColWidthAndExport(grid, options, fix, columnWidths[2]); - await setColWidthAndExport(grid, options, fix, columnWidths[3]); - await setColWidthAndExport(grid, options, fix, columnWidths[4]); - }); + // wrapper = await getExportedData(grid, options); + // wrapper.verifyDataFilesContent(actualData.simpleGridSortByNameDesc(false), 'Unsorted data should have been exported.'); + }); - it('should export all rows with the height specified in options.', async () => { - const fix = TestBed.createComponent(GridIDNameJobTitleComponent); - fix.detectChanges(); + it('should export all columns with the width specified in options.', async () => { + const fix = TestBed.createComponent(GridIDNameJobTitleComponent); + fix.detectChanges(); - const grid = fix.componentInstance.grid; + const grid = fix.componentInstance.grid; + grid.columns[1].hidden = true; + grid.columns[2].hidden = true; + const columnWidths = [100, 200, 0, undefined, null]; + fix.detectChanges(); - const rowHeights = [20, 40, 0, undefined, null]; + await setColWidthAndExport(grid, options, fix, columnWidths[0]); + await setColWidthAndExport(grid, options, fix, columnWidths[1]); + await setColWidthAndExport(grid, options, fix, columnWidths[2]); + await setColWidthAndExport(grid, options, fix, columnWidths[3]); + await setColWidthAndExport(grid, options, fix, columnWidths[4]); + }); - await setRowHeightAndExport(grid, options, fix, rowHeights[0]); - await setRowHeightAndExport(grid, options, fix, rowHeights[1]); - await setRowHeightAndExport(grid, options, fix, rowHeights[2]); - await setRowHeightAndExport(grid, options, fix, rowHeights[3]); - await setRowHeightAndExport(grid, options, fix, rowHeights[4]); - }); + it('should export all rows with the height specified in options.', async () => { + const fix = TestBed.createComponent(GridIDNameJobTitleComponent); + fix.detectChanges(); - it('should fire \'onColumnExport\' for each grid column.', async () => { - const fix = TestBed.createComponent(GridIDNameJobTitleComponent); - fix.detectChanges(); + const grid = fix.componentInstance.grid; - const grid = fix.componentInstance.grid; + const rowHeights = [20, 40, 0, undefined, null]; - const cols = []; - exporter.onColumnExport.subscribe((value) => { - cols.push({ header: value.header, index: value.columnIndex }); + await setRowHeightAndExport(grid, options, fix, rowHeights[0]); + await setRowHeightAndExport(grid, options, fix, rowHeights[1]); + await setRowHeightAndExport(grid, options, fix, rowHeights[2]); + await setRowHeightAndExport(grid, options, fix, rowHeights[3]); + await setRowHeightAndExport(grid, options, fix, rowHeights[4]); }); - await getExportedData(grid, options); - expect(cols.length).toBe(3); - expect(cols[0].header).toBe('ID'); - expect(cols[0].index).toBe(0); - expect(cols[1].header).toBe('Name'); - expect(cols[1].index).toBe(1); - expect(cols[2].header).toBe('JobTitle'); - expect(cols[2].index).toBe(2); - }); + it('should fire \'onColumnExport\' for each grid column.', async () => { + const fix = TestBed.createComponent(GridIDNameJobTitleComponent); + fix.detectChanges(); - it('should fire \'onColumnExport\' for each visible grid column.', async () => { - const fix = TestBed.createComponent(GridIDNameJobTitleComponent); - fix.detectChanges(); + const grid = fix.componentInstance.grid; - const grid = fix.componentInstance.grid; + const cols = []; + exporter.onColumnExport.subscribe((value) => { + cols.push({ header: value.header, index: value.columnIndex }); + }); - const cols = []; - exporter.onColumnExport.subscribe((value) => { - cols.push({ header: value.header, index: value.columnIndex }); + await getExportedData(grid, options); + expect(cols.length).toBe(3); + expect(cols[0].header).toBe('ID'); + expect(cols[0].index).toBe(0); + expect(cols[1].header).toBe('Name'); + expect(cols[1].index).toBe(1); + expect(cols[2].header).toBe('JobTitle'); + expect(cols[2].index).toBe(2); }); - grid.columns[0].hidden = true; - options.ignoreColumnsVisibility = false; - fix.detectChanges(); + it('should fire \'onColumnExport\' for each visible grid column.', async () => { + const fix = TestBed.createComponent(GridIDNameJobTitleComponent); + fix.detectChanges(); - const wrapper = await getExportedData(grid, options); - expect(cols.length).toBe(2); - expect(cols[0].header).toBe('Name'); - expect(cols[0].index).toBe(0); - expect(cols[1].header).toBe('JobTitle'); - expect(cols[1].index).toBe(1); - wrapper.verifyDataFilesContent(actualData.simpleGridNameJobTitle); - }); + const grid = fix.componentInstance.grid; - it('should not export columns when \'onColumnExport\' is canceled.', async () => { - const fix = TestBed.createComponent(GridIDNameJobTitleComponent); - fix.detectChanges(); + const cols = []; + exporter.onColumnExport.subscribe((value) => { + cols.push({ header: value.header, index: value.columnIndex }); + }); - const grid = fix.componentInstance.grid; + grid.columns[0].hidden = true; + options.ignoreColumnsVisibility = false; + fix.detectChanges(); - exporter.onColumnExport.subscribe((value: IColumnExportingEventArgs) => { - value.cancel = true; + const wrapper = await getExportedData(grid, options); + expect(cols.length).toBe(2); + expect(cols[0].header).toBe('Name'); + expect(cols[0].index).toBe(0); + expect(cols[1].header).toBe('JobTitle'); + expect(cols[1].index).toBe(1); + wrapper.verifyDataFilesContent(actualData.simpleGridNameJobTitle); }); - const wrapper = await getExportedData(grid, options); - expect(wrapper.hasValues).toBe(false); - wrapper.verifyStructure(); - wrapper.verifyTemplateFilesContent(); - }); + it('should not export columns when \'onColumnExport\' is canceled.', async () => { + const fix = TestBed.createComponent(GridIDNameJobTitleComponent); + fix.detectChanges(); - it('should fire \'onRowExport\' for each grid row.', async () => { - const fix = TestBed.createComponent(GridIDNameJobTitleComponent); - fix.detectChanges(); + const grid = fix.componentInstance.grid; - const grid = fix.componentInstance.grid; - const data = SampleTestData.personJobData(); + exporter.onColumnExport.subscribe((value: IColumnExportingEventArgs) => { + value.cancel = true; + }); - const rows = []; - exporter.onRowExport.subscribe((value: IRowExportingEventArgs) => { - rows.push({ data: value.rowData, index: value.rowIndex }); + const wrapper = await getExportedData(grid, options); + expect(wrapper.hasValues).toBe(false); + wrapper.verifyStructure(); + wrapper.verifyTemplateFilesContent(); }); - await getExportedData(grid, options); - expect(rows.length).toBe(10); - for (let i = 0; i < rows.length; i++) { - expect(rows[i].index).toBe(i); - expect(JSON.stringify(rows[i].data)).toBe(JSON.stringify(data[i])); - } + it('should fire \'onRowExport\' for each grid row.', async () => { + const fix = TestBed.createComponent(GridIDNameJobTitleComponent); + fix.detectChanges(); + + const grid = fix.componentInstance.grid; + const data = SampleTestData.personJobData(); + + const rows = []; + exporter.onRowExport.subscribe((value: IRowExportingEventArgs) => { + rows.push({ data: value.rowData, index: value.rowIndex }); + }); + + await getExportedData(grid, options); + expect(rows.length).toBe(10); + for (let i = 0; i < rows.length; i++) { + expect(rows[i].index).toBe(i); + expect(JSON.stringify(rows[i].data)).toBe(JSON.stringify(data[i])); + } }); it('should not export rows when \'onRowExport\' is canceled.', async () => { @@ -381,7 +384,66 @@ describe('Excel Exporter', () => { expect(sortField).toBe(sortFieldAfterExport); }); - function getExportedData(grid: IgxGridComponent, exportOptions: IgxExcelExporterOptions) { + }); + + describe('', () => { + let fix; + let treeGrid: IgxTreeGridComponent; + beforeEach(() => { + options = createExportOptions('TreeGridExcelExport', 50); + fix = TestBed.createComponent(IgxTreeGridPrimaryForeignKeyComponent); + fix.detectChanges(); + treeGrid = fix.componentInstance.treeGrid; + }); + + it('should export tree grid as displayed.', async () => { + const wrapper = await getExportedData(treeGrid, options); + await wrapper.verifyStructure(); + await wrapper.verifyDataFilesContent(actualData.simpleGridData); + }); + + it('should create excel groups to reflect the hierarchy.', async () => { + const wrapper = await getExportedData(treeGrid, options); + await wrapper.verifyStructure(); + }); + + it('should export sorted tree grid properly.', async () => { + treeGrid.sort({fieldName: 'ID', dir: SortingDirection.Desc}); + fix.detectChanges(); + + let wrapper = await getExportedData(treeGrid, options); + await wrapper.verifyStructure(); + await wrapper.verifyDataFilesContent(actualData.simpleGridData); + + treeGrid.clearSort(); + fix.detectChanges(); + + wrapper = await getExportedData(treeGrid, options); + await wrapper.verifyStructure(); + await wrapper.verifyDataFilesContent(actualData.simpleGridData); + }); + + it('should export filtered tree grid properly.', async () => { + treeGrid.filter('ID', 3, IgxNumberFilteringOperand.instance().condition('greaterThan')); + fix.detectChanges(); + const wrapper = await getExportedData(treeGrid, options); + await wrapper.verifyStructure(); + await wrapper.verifyDataFilesContent(actualData.simpleGridData); + }); + + it('should export filtered and sorted tree grid properly.', async () => { + treeGrid.filter('ID', 3, IgxNumberFilteringOperand.instance().condition('greaterThan')); + fix.detectChanges(); + treeGrid.sort({fieldName: 'Name', dir: SortingDirection.Desc}); + fix.detectChanges(); + + const wrapper = await getExportedData(treeGrid, options); + await wrapper.verifyStructure(); + await wrapper.verifyDataFilesContent(actualData.simpleGridData); + }); + }); + + function getExportedData(grid, exportOptions: IgxExcelExporterOptions) { const exportData = new Promise((resolve) => { exporter.onExportEnded.pipe(first()).subscribe((value) => { const wrapper = new JSZipWrapper(value.xlsx); @@ -411,4 +473,14 @@ describe('Excel Exporter', () => { }); }); } + + function createExportOptions(fileName, columnWidth?) { + const opts = new IgxExcelExporterOptions(fileName); + + // Set column width to a specific value to workaround the issue where + // different platforms measure text differently + opts.columnWidth = columnWidth; + + return opts; + } }); From fb8661e31a443fd2e445568971bb05e9850b21ff Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Mon, 12 Nov 2018 11:27:40 +0200 Subject: [PATCH 17/77] feat(igx-grid): Close filter row on Esc, #2979 --- .../grids/filtering/grid-filtering-row.component.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts index 479bab93214..612abfd9e26 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts @@ -172,6 +172,13 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { } } + @HostListener('keydown.esc', ['$event']) + public onEscKeydown(event) { + event.preventDefault(); + event.stopPropagation(); + this.close(); + } + get disabled(): boolean { return !(this.column.filteringExpressionsTree && this.column.filteringExpressionsTree.filteringOperands.length > 0); } @@ -254,6 +261,9 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { this.input.nativeElement.blur(); this.inputGroupPrefix.nativeElement.focus(); this.toggleConditionsDropDown(this.inputGroupPrefix.nativeElement); + } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ESCAPE_IE) { + event.preventDefault(); + this.close(); } event.stopPropagation(); } From b9a35d92727e7a6c845e11dd23852c146e4def2e Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Mon, 12 Nov 2018 16:04:15 +0200 Subject: [PATCH 18/77] test(igx-grid): Add test, #2979 --- .../lib/grids/grid/grid-filtering-ui.spec.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) 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 index feac4e4ba1c..6ddff54bedf 100644 --- 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 @@ -2452,6 +2452,27 @@ describe('IgxGrid - Filtering Row UI actions', () => { expect(colOperands[0].nativeElement.innerText).toEqual('AND'); expect(colIndicator.length).toEqual(0); })); + + it('Should close FilterRow when Escape is pressed.', fakeAsync(() => { + const fix = TestBed.createComponent(IgxGridFilteringComponent); + fix.detectChanges(); + + const initialChips = fix.debugElement.queryAll(By.directive(IgxChipComponent)); + const stringCellChip = initialChips[0].nativeElement; + + stringCellChip.click(); + fix.detectChanges(); + + let filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); + expect(filteringRow).toBeDefined(); + + GridFunctions.simulateKeyboardEvent(filteringRow, 'keydown', 'Esc'); + fix.detectChanges(); + + filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); + + expect(filteringRow).toBeNull(); + })); }); export class CustomFilter extends IgxFilteringOperand { From 8c7fda5e9c30dfe8903e8f43197cfcc15348e146 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 13 Nov 2018 12:14:20 +0200 Subject: [PATCH 19/77] chore(*): Merging master into 6.2.x --- ROADMAP.md | 14 ++--- package-lock.json | 59 +++++++------------ .../tree-grid/tree-grid-keyBoardNav.spec.ts | 4 +- .../test-utils/tree-grid-functions.spec.ts | 4 -- 4 files changed, 31 insertions(+), 50 deletions(-) diff --git a/ROADMAP.md b/ROADMAP.md index a87b578e9e9..75e8ae6c09c 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -5,16 +5,16 @@ ## Milestone 5 (by November 30th, 2018) 1. Hierarchical Grid POC (Proof of concept) [issue](https://github.com/IgniteUI/igniteui-angular/issues/827) -2. Tree Grid [issue](https://github.com/IgniteUI/igniteui-angular/issues/2530) +2. **[Done]**Tree Grid [issue](https://github.com/IgniteUI/igniteui-angular/issues/2530) 3. Implement number-of-records-based rendering for igxGrid [issue](https://github.com/IgniteUI/igniteui-angular/issues/2384) 4. Advanced Filtering Dialog -5. Quick Per-column Search in the igxGrid [issue](https://github.com/IgniteUI/igniteui-angular/issues/542) -6. Expandable Panel [issue](https://github.com/IgniteUI/igniteui-angular/issues/307) -7. Conditional Cell Styling capability [issue](https://github.com/IgniteUI/igniteui-angular/issues/1079) -8. Typography Updates -9. Tooltip [issue](https://github.com/IgniteUI/igniteui-angular/issues/1710) +5. **[Done]**Quick Per-column Search in the igxGrid [issue](https://github.com/IgniteUI/igniteui-angular/issues/542) +6. **[Done]**Expandable Panel [issue](https://github.com/IgniteUI/igniteui-angular/issues/307) +7. **[Done]**Conditional Cell Styling capability [issue](https://github.com/IgniteUI/igniteui-angular/issues/1079) +8. **[Done]**Typography Updates +9. **[Done]**Tooltip [issue](https://github.com/IgniteUI/igniteui-angular/issues/1710) 10. **[Removed]** Vertical Tabs - material doesn't define vertical tabs -11. Row Editing with transactions [issue](https://github.com/IgniteUI/igniteui-angular/issues/566) +11. **[Done]** Row Editing with transactions (Batch editing) [issue](https://github.com/IgniteUI/igniteui-angular/issues/566) 12. **[Done]** Adding Disabled Dates and Special Dates options in igxCalander [issue](https://github.com/IgniteUI/igniteui-angular/issues/1980) 13. **[Done]** Drag and Drop Directive 14. Banner Component [issue](https://github.com/IgniteUI/igniteui-angular/issues/2672) diff --git a/package-lock.json b/package-lock.json index 70ceab448bb..f6c1a2cfa99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3662,15 +3662,6 @@ "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", "dev": true }, - "deep-assign": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/deep-assign/-/deep-assign-1.0.0.tgz", - "integrity": "sha1-sJJ0O+hCfcYh6gBnzex+cN0Z83s=", - "dev": true, - "requires": { - "is-obj": "^1.0.0" - } - }, "deep-equal": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz", @@ -4053,11 +4044,6 @@ "is-obj": "^1.0.0" } }, - "dotenv": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.1.0.tgz", - "integrity": "sha512-/veDn2ztgRlB7gKmE3i9f6CmDIyXAy6d5nBq+whO9SLX+Zs1sXEgFLPi+aSuWqUuusMfbi84fT8j34fs1HaYUw==" - }, "double-ended-queue": { "version": "2.1.0-0", "resolved": "https://registry.npmjs.org/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz", @@ -5346,12 +5332,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5366,17 +5354,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5493,7 +5484,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5505,6 +5497,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5519,6 +5512,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5526,12 +5520,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -5550,6 +5546,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5630,7 +5627,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5642,6 +5640,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5763,6 +5762,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6381,17 +6381,6 @@ } } }, - "gulp-chmod": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/gulp-chmod/-/gulp-chmod-2.0.0.tgz", - "integrity": "sha1-AMOQuSigeZslGsz2MaoJ4BzGKZw=", - "dev": true, - "requires": { - "deep-assign": "^1.0.0", - "stat-mode": "^0.2.0", - "through2": "^2.0.0" - } - }, "gulp-concat": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/gulp-concat/-/gulp-concat-2.6.1.tgz", @@ -14471,12 +14460,6 @@ "safe-buffer": "^5.1.1" } }, - "stat-mode": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-0.2.2.tgz", - "integrity": "sha1-5sgLYjEj19gM8TLOU480YokHJQI=", - "dev": true - }, "state-toggle": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.1.tgz", diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts index 35883f50d08..38e2b440f94 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts @@ -830,7 +830,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => { const testEditingNavigationShiftTab = (fixture, treegrid: IgxTreeGridComponent, columns) => new Promise(async (resolve, reject) => { - const cell = treeGrid.getCellByColumn(2, columns[2]); + let cell = treeGrid.getCellByColumn(2, columns[2]); cell.nativeElement.dispatchEvent(new Event('focus')); await wait(DEBOUNCETIME); @@ -841,6 +841,8 @@ describe('IgxTreeGrid - Key Board Navigation', () => { UIInteractions.triggerKeyDownEvtUponElem('Enter', cell.nativeElement, true); await wait(DEBOUNCETIME); fixture.detectChanges(); + + cell = treeGrid.getCellByColumn(2, columns[2]); expect(cell.inEditMode).toBe(true); // Test on parent row diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts index 3f1c85751fd..42aeb047a82 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts @@ -337,7 +337,6 @@ export class TreeGridFunctions { UIInteractions.triggerKeyDownEvtUponElem(keyboardEventKey, cell.nativeElement, true); await wait(DEBOUNCETIME); fix.detectChanges(); - cell = treeGrid.getCellByColumn(rowIndex, firstColumnName); if (cell !== undefined && cell !== null) { TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, cell, false); @@ -371,7 +370,6 @@ export class TreeGridFunctions { } else { newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex + 1]); } - TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, newCell); expect(newCell.focused).toEqual(true); @@ -426,7 +424,6 @@ export class TreeGridFunctions { } else { newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex + 1]); } - expect(newCell.inEditMode).toBe(true); resolve(); }) @@ -452,7 +449,6 @@ export class TreeGridFunctions { } else { newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex - 1]); } - expect(newCell.inEditMode).toBe(true); resolve(); }) From 3597d0d8f8ed8ccd1d8516698d83464d6b495208 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 13 Nov 2018 18:15:03 +0200 Subject: [PATCH 20/77] Sorting strategy merge 6.2.x (#2998) * feat(grid sorting): Merging the new sorting strategy into 6.2.x #2734 * chore(*): Adding missing imports to grid-selection tests * chore(*): More test import fixes * chore(*): Applying the groupby changes with the new sorting strategy * chore(*): Resolving the column moving test issue * chore(*): This should be it with the test fixes * chore(*): Removing the fdescribe --- CHANGELOG.md | 3 + .../src/lib/animations/easings.js.map | 1 - .../src/lib/animations/fade/index.js.map | 1 - .../src/lib/animations/flip/index.js.map | 1 - .../src/lib/animations/main.js.map | 1 - .../src/lib/animations/misc/index.js.map | 1 - .../src/lib/animations/misc/pulsate.js.map | 1 - .../src/lib/animations/misc/shake.js.map | 1 - .../src/lib/animations/rotate/index.js.map | 1 - .../src/lib/animations/scale/index.js.map | 1 - .../src/lib/animations/slide/index.js.map | 1 - .../src/lib/animations/swing/index.js.map | 1 - .../src/lib/combo/combo.component.spec.ts | 11 +- .../src/lib/combo/combo.component.ts | 55 +- .../src/lib/combo/combo.pipes.ts | 14 +- .../data-operations/data-container.spec.ts | 190 ------- .../src/lib/data-operations/data-container.ts | 106 ---- .../data-operations/data-state.interface.ts | 12 - .../src/lib/data-operations/data-util.spec.ts | 126 ++--- .../src/lib/data-operations/data-util.ts | 78 +-- .../lib/data-operations/filtering-strategy.ts | 3 - .../groupby-state.interface.ts | 8 +- .../data-operations/groupby-strategy.spec.ts | 39 ++ .../grouping-expression.interface.ts | 5 + .../lib/data-operations/grouping-strategy.ts | 20 + .../sorting-expression.interface.ts | 4 +- .../sorting-state.interface.ts | 12 - .../data-operations/sorting-strategy.spec.ts | 56 +- .../lib/data-operations/sorting-strategy.ts | 107 ++-- .../stable-sorting-strategy.spec.ts | 33 -- .../stable-sorting-strategy.ts | 21 - .../directives/dragdrop/dragdrop.directive.ts | 1 - .../igniteui-angular/src/lib/grids/README.md | 4 +- .../src/lib/grids/api.service.ts | 15 +- .../src/lib/grids/column.component.ts | 56 +- .../src/lib/grids/grid-base.component.ts | 17 +- .../src/lib/grids/grid-header.component.ts | 4 +- .../src/lib/grids/grid/cell.spec.ts | 15 +- .../src/lib/grids/grid/column-group.spec.ts | 12 +- .../src/lib/grids/grid/column-moving.spec.ts | 6 +- .../src/lib/grids/grid/grid-api.service.ts | 11 +- .../lib/grids/grid/grid-filtering-ui.spec.ts | 9 +- .../src/lib/grids/grid/grid-selection.spec.ts | 9 +- .../src/lib/grids/grid/grid.component.html | 2 +- .../src/lib/grids/grid/grid.component.spec.ts | 31 +- .../src/lib/grids/grid/grid.component.ts | 45 +- .../src/lib/grids/grid/grid.groupby.spec.ts | 528 ++++++++++-------- .../src/lib/grids/grid/grid.pinning.spec.ts | 9 +- .../src/lib/grids/grid/grid.pipes.ts | 29 +- .../src/lib/grids/grid/grid.search.spec.ts | 125 ++--- .../src/lib/grids/grid/grid.sorting.spec.ts | 71 +-- .../tree-grid/tree-grid-indentation.spec.ts | 5 +- .../tree-grid/tree-grid-integration.spec.ts | 7 +- .../tree-grid/tree-grid-selection.spec.ts | 7 +- .../grids/tree-grid/tree-grid-sorting.spec.ts | 19 +- .../tree-grid/tree-grid.filtering.pipe.ts | 6 +- .../lib/grids/tree-grid/tree-grid.pipes.ts | 8 +- .../services/csv/csv-exporter-grid.spec.ts | 11 +- .../excel/excel-exporter-grid.spec.ts | 14 +- .../exporter-common/base-export-service.ts | 6 +- projects/igniteui-angular/src/public_api.ts | 6 +- src/app/grid-groupby/grid-groupby.sample.ts | 9 +- 62 files changed, 795 insertions(+), 1216 deletions(-) delete mode 100644 projects/igniteui-angular/src/lib/animations/easings.js.map delete mode 100644 projects/igniteui-angular/src/lib/animations/fade/index.js.map delete mode 100644 projects/igniteui-angular/src/lib/animations/flip/index.js.map delete mode 100644 projects/igniteui-angular/src/lib/animations/main.js.map delete mode 100644 projects/igniteui-angular/src/lib/animations/misc/index.js.map delete mode 100644 projects/igniteui-angular/src/lib/animations/misc/pulsate.js.map delete mode 100644 projects/igniteui-angular/src/lib/animations/misc/shake.js.map delete mode 100644 projects/igniteui-angular/src/lib/animations/rotate/index.js.map delete mode 100644 projects/igniteui-angular/src/lib/animations/scale/index.js.map delete mode 100644 projects/igniteui-angular/src/lib/animations/slide/index.js.map delete mode 100644 projects/igniteui-angular/src/lib/animations/swing/index.js.map delete mode 100644 projects/igniteui-angular/src/lib/data-operations/data-container.spec.ts delete mode 100644 projects/igniteui-angular/src/lib/data-operations/data-container.ts delete mode 100644 projects/igniteui-angular/src/lib/data-operations/data-state.interface.ts create mode 100644 projects/igniteui-angular/src/lib/data-operations/groupby-strategy.spec.ts create mode 100644 projects/igniteui-angular/src/lib/data-operations/grouping-expression.interface.ts create mode 100644 projects/igniteui-angular/src/lib/data-operations/grouping-strategy.ts delete mode 100644 projects/igniteui-angular/src/lib/data-operations/sorting-state.interface.ts delete mode 100644 projects/igniteui-angular/src/lib/data-operations/stable-sorting-strategy.spec.ts delete mode 100644 projects/igniteui-angular/src/lib/data-operations/stable-sorting-strategy.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 3fda1d42775..cf6da4f2544 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -169,6 +169,9 @@ When you focus a specific cell and press one of the following key combinations, ### General +- `sortStrategy` input exposed to provide custom sort strategy for the `IgxColumnComponent`. The custom strategy should implement the `ISortingStrategy` interface, or can extend the base `SortingStrategy` class and override all or some of its public/protected members. +- `groupingComparer` input exposed to provide custom grouping compare function for the `IgxColumnComponent`. The function receives two values and should return `0` if they are to considered members of the same group. + ### Bug fixes - Fix sorting and groupby expression not syncing when there are already sorted columns. #2786 diff --git a/projects/igniteui-angular/src/lib/animations/easings.js.map b/projects/igniteui-angular/src/lib/animations/easings.js.map deleted file mode 100644 index bf5f56a9297..00000000000 --- a/projects/igniteui-angular/src/lib/animations/easings.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/animations/easings.ts"],"names":[],"mappings":";;AAAA,IAAK,MASJ;AATD,WAAK,MAAM;IACP,wBAAO,0CAAiD,UAAA,CAAA;IACxD,yBAAQ,0CAAiD,WAAA,CAAA;IACzD,yBAAQ,0CAAiD,WAAA,CAAA;IACzD,yBAAQ,0CAAiD,WAAA,CAAA;IACzD,wBAAO,0CAAiD,UAAA,CAAA;IACxD,wBAAO,0CAAiD,UAAA,CAAA;IACxD,wBAAO,0CAAiD,UAAA,CAAA;IACxD,wBAAO,2CAAkD,UAAA,CAAA;AAC7D,CAAC,EATI,MAAM,KAAN,MAAM,QASV;AAwBQ,wBAAM;AAtBf,IAAK,OASJ;AATD,WAAK,OAAO;IACR,0BAAO,0CAAiD,UAAA,CAAA;IACxD,2BAAQ,0CAAiD,WAAA,CAAA;IACzD,2BAAQ,0CAAiD,WAAA,CAAA;IACzD,2BAAQ,0CAAiD,WAAA,CAAA;IACzD,0BAAO,0CAAiD,UAAA,CAAA;IACxD,0BAAO,0CAAiD,UAAA,CAAA;IACxD,0BAAO,0CAAiD,UAAA,CAAA;IACxD,0BAAO,0CAAiD,UAAA,CAAA;AAC5D,CAAC,EATI,OAAO,KAAP,OAAO,QASX;AAagB,0BAAO;AAXxB,IAAK,SASJ;AATD,WAAK,SAAS;IACV,8BAAO,0CAAiD,UAAA,CAAA;IACxD,+BAAQ,0CAAiD,WAAA,CAAA;IACzD,+BAAQ,0CAAiD,WAAA,CAAA;IACzD,+BAAQ,0CAAiD,WAAA,CAAA;IACzD,8BAAO,0CAAiD,UAAA,CAAA;IACxD,8BAAO,0CAAiD,UAAA,CAAA;IACxD,8BAAO,0CAAiD,UAAA,CAAA;IACxD,8BAAO,2CAAkD,UAAA,CAAA;AAC7D,CAAC,EATI,SAAS,KAAT,SAAS,QASb;AAEyB,8BAAS","file":"easings.js","sourcesContent":["enum EaseIn {\r\n quad = `cubic-bezier(0.550, 0.085, 0.680, 0.530)` as any,\r\n cubic = `cubic-bezier(0.550, 0.055, 0.675, 0.190)` as any,\r\n quart = `cubic-bezier(0.895, 0.030, 0.685, 0.220)` as any,\r\n quint = `cubic-bezier(0.755, 0.050, 0.855, 0.060)` as any,\r\n sine = `cubic-bezier(0.470, 0.000, 0.745, 0.715)` as any,\r\n expo = `cubic-bezier(0.950, 0.050, 0.795, 0.035)` as any,\r\n circ = `cubic-bezier(0.600, 0.040, 0.980, 0.335)` as any,\r\n back = `cubic-bezier(0.600, -0.280, 0.735, 0.045)` as any\r\n}\r\n\r\nenum EaseOut {\r\n quad = `cubic-bezier(0.250, 0.460, 0.450, 0.940)` as any,\r\n cubic = `cubic-bezier(0.215, 0.610, 0.355, 1.000)` as any,\r\n quart = `cubic-bezier(0.165, 0.840, 0.440, 1.000)` as any,\r\n quint = `cubic-bezier(0.230, 1.000, 0.320, 1.000)` as any,\r\n sine = `cubic-bezier(0.390, 0.575, 0.565, 1.000)` as any,\r\n expo = `cubic-bezier(0.190, 1.000, 0.220, 1.000)` as any,\r\n circ = `cubic-bezier(0.075, 0.820, 0.165, 1.000)` as any,\r\n back = `cubic-bezier(0.175, 0.885, 0.320, 1.275)` as any\r\n}\r\n\r\nenum EaseInOut {\r\n quad = `cubic-bezier(0.455, 0.030, 0.515, 0.955)` as any,\r\n cubic = `cubic-bezier(0.645, 0.045, 0.355, 1.000)` as any,\r\n quart = `cubic-bezier(0.770, 0.000, 0.175, 1.000)` as any,\r\n quint = `cubic-bezier(0.860, 0.000, 0.070, 1.000)` as any,\r\n sine = `cubic-bezier(0.445, 0.050, 0.550, 0.950)` as any,\r\n expo = `cubic-bezier(1.000, 0.000, 0.000, 1.000)` as any,\r\n circ = `cubic-bezier(0.785, 0.135, 0.150, 0.860)` as any,\r\n back = `cubic-bezier(0.680, -0.550, 0.265, 1.550)` as any\r\n}\r\n\r\nexport { EaseIn, EaseOut, EaseInOut };\r\n"]} \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/animations/fade/index.js.map b/projects/igniteui-angular/src/lib/animations/fade/index.js.map deleted file mode 100644 index 16b6ab3aa90..00000000000 --- a/projects/igniteui-angular/src/lib/animations/fade/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/animations/fade/index.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,kDAA+G;AAC/G,sCAAqC;AAGrC,IAAM,IAAI,GAAwB;IAC9B,kBAAK,CAAC;QACF,OAAO,EAAE,kBAAkB;KAC9B,CAAC;IACF,oBAAO,CACH,mCAAmC,EACnC,kBAAK,CAAC;QACF,OAAO,EAAE,gBAAgB;KAC5B,CAAC,CACL;CACJ,CAAC;AAEF,IAAM,UAAU,GAAqB;IACjC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,iBAAO,CAAC,IAAI;IACpB,UAAU,EAAE,CAAC;IACb,YAAY,EAAE,CAAC;CAClB,CAAC;AAEF,IAAM,MAAM,GAA+B,sBAAS,CAAC,IAAI,EAAE;IACvD,MAAM,eAAO,UAAU,CAAE;CAC5B,CAAC,CAAC;AAUM,wBAAM;AARf,IAAM,OAAO,GAA+B,sBAAS,CAAC,IAAI,EAAE;IACxD,MAAM,eACC,UAAU,IACb,UAAU,EAAE,CAAC,EACb,YAAY,EAAE,CAAC,GAClB;CACJ,CAAC,CAAC;AAEc,0BAAO","file":"index.js","sourcesContent":["import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from \"@angular/animations\";\r\nimport { EaseOut } from \"../easings\";\r\nimport { IAnimationParams } from \"../main\";\r\n\r\nconst base: AnimationMetadata[] = [\r\n style({\r\n opacity: `{{startOpacity}}`\r\n }),\r\n animate(\r\n `{{duration}} {{delay}} {{easing}}`,\r\n style({\r\n opacity: `{{endOpacity}}`\r\n })\r\n )\r\n];\r\n\r\nconst baseParams: IAnimationParams = {\r\n delay: \"0s\",\r\n duration: \"350ms\",\r\n easing: EaseOut.sine,\r\n endOpacity: 1,\r\n startOpacity: 0\r\n};\r\n\r\nconst fadeIn: AnimationReferenceMetadata = animation(base, {\r\n params: { ...baseParams }\r\n});\r\n\r\nconst fadeOut: AnimationReferenceMetadata = animation(base, {\r\n params: {\r\n ...baseParams,\r\n endOpacity: 0,\r\n startOpacity: 1\r\n }\r\n});\r\n\r\nexport { fadeIn, fadeOut };\r\n"]} \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/animations/flip/index.js.map b/projects/igniteui-angular/src/lib/animations/flip/index.js.map deleted file mode 100644 index 605a13f9c16..00000000000 --- a/projects/igniteui-angular/src/lib/animations/flip/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/animations/flip/index.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,kDAO6B;AAC7B,sCAA6C;AAG7C,IAAM,UAAU,GAAwB;IACpC,kBAAK,CAAC;QACF,kBAAkB,EAAE,QAAQ;QAC5B,cAAc,EAAE,aAAa;KAChC,CAAC;IACF,oBAAO,CACH,mCAAmC,EACnC,sBAAS,CAAC;QACN,kBAAK,CAAC;YACF,MAAM,EAAE,CAAC;YACT,SAAS,EAAE,mHACwD;SACtE,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,CAAC;YACT,SAAS,EAAE,+GACsD;SACpE,CAAC;KACL,CAAC,CACL;CACJ,CAAC;AAEF,IAAM,UAAU,GAAqB;IACjC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,iBAAO,CAAC,IAAI;IACpB,QAAQ,EAAE,GAAG;IACb,WAAW,EAAE,KAAK;IAClB,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,KAAK;CACvB,CAAC;AAEF,IAAM,OAAO,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAC9D,MAAM,eACC,UAAU,CAChB;CACJ,CAAC,CAAC;AA2DC,0BAAO;AAzDX,IAAM,UAAU,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACjE,MAAM,eACC,UAAU,IACb,QAAQ,EAAE,CAAC,GAAG,GACjB;CACJ,CAAC,CAAC;AAsDC,gCAAU;AApDd,IAAM,QAAQ,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAC/D,MAAM,eACC,UAAU,IACb,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AA+CC,4BAAQ;AA7CZ,IAAM,SAAS,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAChE,MAAM,eACC,UAAU,IACb,QAAQ,EAAE,CAAC,GAAG,EACd,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AAoCC,8BAAS;AAlCb,IAAM,UAAU,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACjE,MAAM,eACC,UAAU,IACb,WAAW,EAAE,OAAO,GACvB;CACJ,CAAC,CAAC;AAgCC,gCAAU;AA9Bd,IAAM,UAAU,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACjE,MAAM,eACC,UAAU,IACb,WAAW,EAAE,QAAQ,GACxB;CACJ,CAAC,CAAC;AA0BC,gCAAU;AAxBd,IAAM,UAAU,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACjE,MAAM,eACC,UAAU,IACb,WAAW,EAAE,OAAO,EACpB,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AAkBC,gCAAU;AAhBd,IAAM,UAAU,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACjE,MAAM,eACC,UAAU,IACb,WAAW,EAAE,QAAQ,EACrB,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AAUC,gCAAU","file":"index.js","sourcesContent":["import {\r\n animate,\r\n animation,\r\n AnimationMetadata,\r\n AnimationReferenceMetadata,\r\n keyframes,\r\n style\r\n} from \"@angular/animations\";\r\nimport { EaseIn, EaseOut } from \"../easings\";\r\nimport { IAnimationParams } from \"../main\";\r\n\r\nconst baseRecipe: AnimationMetadata[] = [\r\n style({\r\n backfaceVisibility: \"hidden\",\r\n transformStyle: \"preserve-3d\"\r\n }),\r\n animate(\r\n `{{duration}} {{delay}} {{easing}}`,\r\n keyframes([\r\n style({\r\n offset: 0,\r\n transform: `translateZ({{startDistance}})\r\n rotate3d({{rotateX}}, {{rotateY}}, {{rotateZ}}, {{startAngle}}deg)`\r\n }),\r\n style({\r\n offset: 1,\r\n transform: `translateZ({{endDistance}})\r\n rotate3d({{rotateX}}, {{rotateY}}, {{rotateZ}}, {{endAngle}}deg)`\r\n })\r\n ])\r\n )\r\n];\r\n\r\nconst baseParams: IAnimationParams = {\r\n delay: \"0s\",\r\n duration: \"600ms\",\r\n easing: EaseOut.quad,\r\n endAngle: 180,\r\n endDistance: \"0px\",\r\n rotateX: 1,\r\n rotateY: 0,\r\n rotateZ: 0,\r\n startAngle: 0,\r\n startDistance: \"0px\"\r\n};\r\n\r\nconst flipTop: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams\r\n }\r\n});\r\n\r\nconst flipBottom: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n endAngle: -180\r\n }\r\n});\r\n\r\nconst flipLeft: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n rotateX: 0,\r\n rotateY: 1\r\n }\r\n});\r\n\r\nconst flipRight: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n endAngle: -180,\r\n rotateX: 0,\r\n rotateY: 1\r\n }\r\n});\r\n\r\nconst flipHorFwd: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n endDistance: \"170px\"\r\n }\r\n});\r\n\r\nconst flipHorBck: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n endDistance: \"-170px\"\r\n }\r\n});\r\n\r\nconst flipVerFwd: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n endDistance: \"170px\",\r\n rotateX: 0,\r\n rotateY: 1\r\n }\r\n});\r\n\r\nconst flipVerBck: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n endDistance: \"-170px\",\r\n rotateX: 0,\r\n rotateY: 1\r\n }\r\n});\r\n\r\nexport {\r\n flipTop,\r\n flipRight,\r\n flipBottom,\r\n flipLeft,\r\n flipHorFwd,\r\n flipHorBck,\r\n flipVerFwd,\r\n flipVerBck\r\n};\r\n"]} \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/animations/main.js.map b/projects/igniteui-angular/src/lib/animations/main.js.map deleted file mode 100644 index 4a26f62342c..00000000000 --- a/projects/igniteui-angular/src/lib/animations/main.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/animations/main.ts"],"names":[],"mappings":";;;;;AAuBA,kCAA6B;AAC7B,kCAA6B;AAC7B,oCAA+B;AAC/B,kCAA6B;AAC7B,mCAA8B;AAC9B,mCAA8B;AAC9B,mCAA8B","file":"main.js","sourcesContent":["export interface IAnimationParams {\r\n delay: string;\r\n duration: string;\r\n easing: any;\r\n startOpacity?: number;\r\n endOpacity?: number;\r\n startAngle?: number;\r\n endAngle?: number;\r\n startDistance?: string;\r\n endDistance?: string;\r\n fromPosition?: string;\r\n toPosition?: string;\r\n fromScale?: number;\r\n midScale?: number;\r\n toScale?: number;\r\n xPos?: string;\r\n yPos?: string;\r\n direction?: string;\r\n rotateX?: number;\r\n rotateY?: number;\r\n rotateZ?: number;\r\n}\r\n\r\nexport * from \"./fade/index\";\r\nexport * from \"./flip/index\";\r\nexport * from \"./rotate/index\";\r\nexport * from \"./misc/index\";\r\nexport * from \"./scale/index\";\r\nexport * from \"./slide/index\";\r\nexport * from \"./swing/index\";\r\n"]} \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/animations/misc/index.js.map b/projects/igniteui-angular/src/lib/animations/misc/index.js.map deleted file mode 100644 index 89ad0d8f717..00000000000 --- a/projects/igniteui-angular/src/lib/animations/misc/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/animations/misc/index.ts"],"names":[],"mappings":";;;;;AAAA,6BAAwB;AACxB,+BAA0B","file":"index.js","sourcesContent":["export * from \"./shake\";\r\nexport * from \"./pulsate\";\r\n"]} \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/animations/misc/pulsate.js.map b/projects/igniteui-angular/src/lib/animations/misc/pulsate.js.map deleted file mode 100644 index 151cbb7f387..00000000000 --- a/projects/igniteui-angular/src/lib/animations/misc/pulsate.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/animations/misc/pulsate.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,kDAO6B;AAG7B,IAAM,aAAa,GAAwB;IACvC,kBAAK,CAAC;QACF,uBAAuB,EAAE,UAAU;QACnC,SAAS,EAAE,UAAU;QACrB,eAAe,EAAE,eAAe;KACnC,CAAC;IACF,oBAAO,CACH,mCAAmC,EACnC,sBAAS,CAAC;QACN,kBAAK,CAAC;YACF,uBAAuB,EAAE,SAAS;YAClC,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,aAAa;SAC3B,CAAC;QACF,kBAAK,CAAC;YACF,uBAAuB,EAAE,UAAU;YACnC,MAAM,EAAE,IAAI;YACZ,SAAS,EAAE,aAAa;SAC3B,CAAC;QACF,kBAAK,CAAC;YACF,uBAAuB,EAAE,SAAS;YAClC,MAAM,EAAE,IAAI;YACZ,SAAS,EAAE,aAAa;SAC3B,CAAC;QACF,kBAAK,CAAC;YACF,uBAAuB,EAAE,UAAU;YACnC,MAAM,EAAE,IAAI;YACZ,SAAS,EAAE,UAAU;SACxB,CAAC;KACL,CAAC,CACL;CACJ,CAAC;AAEF,IAAM,eAAe,GAAqB;IACtC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,aAAa;CACxB,CAAC;AAEF,IAAM,WAAW,GAAwB;IACrC,oBAAO,CACH,mCAAmC,EACnC,sBAAS,CAAC;QACN,kBAAK,CAAC;YACF,MAAM,EAAE,CAAC;YACT,SAAS,EAAE,sBAAsB;SACpC,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,oBAAoB;SAClC,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,CAAC;YACT,SAAS,EAAE,sBAAsB;SACpC,CAAC;KACL,CAAC,CACL;CACJ,CAAC;AAEF,IAAM,aAAa,GAAqB;IACpC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,aAAa;IACrB,SAAS,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG;CACf,CAAC;AAEF,IAAM,SAAS,GAAwB;IACnC,oBAAO,CACH,mCAAmC,EACnC,sBAAS,CAAC;QACN,kBAAK,CAAC;YACF,MAAM,EAAE,CAAC;YACT,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,sBAAsB;SACpC,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,CAAC;YACV,SAAS,EAAE,qBAAqB;SACnC,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,CAAC;YACT,OAAO,EAAE,CAAC;YACV,SAAS,EAAE,oBAAoB;SAClC,CAAC;KACL,CAAC,CACL;CACJ,CAAC;AAEF,IAAM,WAAW,GAAqB;IAClC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,aAAa;IACrB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,GAAG;IACb,OAAO,EAAE,GAAG;CACf,CAAC;AAEF,IAAM,UAAU,GAAG,sBAAS,CAAC,WAAW,EAAE;IACtC,MAAM,eACC,aAAa,CACnB;CACJ,CAAC,CAAC;AAuBC,gCAAU;AArBd,IAAM,UAAU,GAAG,sBAAS,CAAC,WAAW,EAAE;IACtC,MAAM,eACC,aAAa,IAChB,OAAO,EAAE,EAAE,GACd;CACJ,CAAC,CAAC;AAiBC,gCAAU;AAfd,IAAM,SAAS,GAAG,sBAAS,CAAC,aAAa,EAAE;IACvC,MAAM,eACC,eAAe,CACrB;CACJ,CAAC,CAAC;AASC,8BAAS;AAPb,IAAM,KAAK,GAAG,sBAAS,CAAC,SAAS,EAAE;IAC/B,MAAM,eACC,WAAW,CACjB;CACJ,CAAC,CAAC;AAMC,sBAAK","file":"pulsate.js","sourcesContent":["import {\r\n animate,\r\n animation,\r\n AnimationMetadata,\r\n AnimationReferenceMetadata,\r\n keyframes,\r\n style\r\n} from \"@angular/animations\";\r\nimport { IAnimationParams } from \"../main\";\r\n\r\nconst heartbeatBase: AnimationMetadata[] = [\r\n style({\r\n animationTimingFunction: `ease-out`,\r\n transform: `scale(1)`,\r\n transformOrigin: `center center`\r\n }),\r\n animate(\r\n `{{duration}} {{delay}} {{easing}}`,\r\n keyframes([\r\n style({\r\n animationTimingFunction: `ease-in`,\r\n offset: 0.1,\r\n transform: `scale(0.91)`\r\n }),\r\n style({\r\n animationTimingFunction: `ease-out`,\r\n offset: 0.17,\r\n transform: `scale(0.98)`\r\n }),\r\n style({\r\n animationTimingFunction: `ease-in`,\r\n offset: 0.33,\r\n transform: `scale(0.87)`\r\n }),\r\n style({\r\n animationTimingFunction: `ease-out`,\r\n offset: 0.45,\r\n transform: `scale(1)`\r\n })\r\n ])\r\n )\r\n];\r\n\r\nconst heartbeatParams: IAnimationParams = {\r\n delay: \"0s\",\r\n duration: \"1.5s\",\r\n easing: \"ease-in-out\"\r\n};\r\n\r\nconst pulsateBase: AnimationMetadata[] = [\r\n animate(\r\n `{{duration}} {{delay}} {{easing}}`,\r\n keyframes([\r\n style({\r\n offset: 0,\r\n transform: `scale({{fromScale}})`\r\n }),\r\n style({\r\n offset: 0.5,\r\n transform: `scale({{toScale}})`\r\n }),\r\n style({\r\n offset: 1,\r\n transform: `scale({{fromScale}})`\r\n })\r\n ])\r\n )\r\n];\r\n\r\nconst pulsateParams: IAnimationParams = {\r\n delay: \"0s\",\r\n duration: \".5s\",\r\n easing: \"ease-in-out\",\r\n fromScale: 1,\r\n toScale: 1.1\r\n};\r\n\r\nconst blinkBase: AnimationMetadata[] = [\r\n animate(\r\n `{{duration}} {{delay}} {{easing}}`,\r\n keyframes([\r\n style({\r\n offset: 0,\r\n opacity: .8,\r\n transform: `scale({{fromScale}})`\r\n }),\r\n style({\r\n offset: 0.8,\r\n opacity: 0,\r\n transform: `scale({{midScale}})`\r\n }),\r\n style({\r\n offset: 1,\r\n opacity: 0,\r\n transform: `scale({{toScale}})`\r\n })\r\n ])\r\n )\r\n];\r\n\r\nconst blinkParams: IAnimationParams = {\r\n delay: \"0s\",\r\n duration: \".8s\",\r\n easing: \"ease-in-out\",\r\n fromScale: .2,\r\n midScale: 1.2,\r\n toScale: 2.2\r\n};\r\n\r\nconst pulsateFwd = animation(pulsateBase, {\r\n params: {\r\n ...pulsateParams\r\n }\r\n});\r\n\r\nconst pulsateBck = animation(pulsateBase, {\r\n params: {\r\n ...pulsateParams,\r\n toScale: .9\r\n }\r\n});\r\n\r\nconst heartbeat = animation(heartbeatBase, {\r\n params: {\r\n ...heartbeatParams\r\n }\r\n});\r\n\r\nconst blink = animation(blinkBase, {\r\n params: {\r\n ...blinkParams\r\n }\r\n});\r\n\r\nexport {\r\n heartbeat,\r\n pulsateFwd,\r\n pulsateBck,\r\n blink\r\n};\r\n"]} \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/animations/misc/shake.js.map b/projects/igniteui-angular/src/lib/animations/misc/shake.js.map deleted file mode 100644 index e0567c5c3ef..00000000000 --- a/projects/igniteui-angular/src/lib/animations/misc/shake.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/animations/misc/shake.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,kDAO6B;AAC7B,sCAAuC;AAGvC,IAAM,UAAU,GAAwB;IACpC,oBAAO,CACH,mCAAmC,EACnC,sBAAS,CAAC;QACN,kBAAK,CAAC;YACF,MAAM,EAAE,CAAC;YACT,SAAS,EAAE,wCAAwC;YACnD,eAAe,EAAE,mBAAmB;SACvC,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,oEAAoE;SAClF,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,sEAAsE;SACpF,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,sEAAsE;SACpF,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,sEAAsE;SAEpF,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,sEAAsE;SACpF,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,sEAAsE;SAEpF,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,sEAAsE;SACpF,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,kEAAkE;SAEhF,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,kEAAkE;SAEhF,CAAC;QACF,kBAAK,CAAC;YACF,MAAM,EAAE,CAAC;YACT,SAAS,EAAE,wCAAwC;YACnD,eAAe,EAAE,mBAAmB;SACvC,CAAC;KACL,CAAC,CACL;CACJ,CAAC;AAEF,IAAM,UAAU,GAAqB;IACjC,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,GAAG;IACd,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,mBAAS,CAAC,IAAI;IACtB,QAAQ,EAAE,CAAC;IACX,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,MAAM;IACrB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;CACjB,CAAC;AAEF,IAAM,QAAQ,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAC/D,MAAM,eACC,UAAU,IACb,SAAS,EAAE,GAAG,GACjB;CACJ,CAAC,CAAC;AA4HC,4BAAQ;AA1HZ,IAAM,QAAQ,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAC/D,MAAM,eACC,UAAU,IACb,SAAS,EAAE,GAAG,GACjB;CACJ,CAAC,CAAC;AAsHC,4BAAQ;AApHZ,IAAM,QAAQ,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAC/D,MAAM,eACC,UAAU,IACb,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,GAAG,EAClB,IAAI,EAAE,KAAK,GACd;CACJ,CAAC,CAAC;AA4GC,4BAAQ;AA1GZ,IAAM,WAAW,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAClE,MAAM,eACC,UAAU,IACb,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,GAAG,EAClB,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AAiGC,kCAAW;AA/Ff,IAAM,UAAU,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACjE,MAAM,eACC,UAAU,IACb,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,GAAG,EAClB,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AAqFC,gCAAU;AAnFd,IAAM,SAAS,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAChE,MAAM,eACC,UAAU,IACb,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,GAAG,EAClB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AAyEC,8BAAS;AAvEb,IAAM,WAAW,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAClE,MAAM,eACC,UAAU,IACb,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,EAAE,EACd,aAAa,EAAE,GAAG,EAClB,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AA6DC,kCAAW;AA3Df,IAAM,OAAO,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAC9D,MAAM,eACC,UAAU,IACb,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,GAAG,EAClB,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,KAAK,GACd;CACJ,CAAC,CAAC;AAiDC,0BAAO;AA/CX,IAAM,OAAO,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAC9D,MAAM,eACC,UAAU,IACb,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,GAAG,EAClB,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AAqCC,0BAAO;AAnCX,IAAM,OAAO,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAC9D,MAAM,eACC,UAAU,IACb,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,GAAG,EAClB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AAyBC,0BAAO;AAvBX,IAAM,OAAO,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAC9D,MAAM,eACC,UAAU,IACb,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,GAAG,EAClB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,KAAK,GACd;CACJ,CAAC,CAAC;AAaC,0BAAO","file":"shake.js","sourcesContent":["import {\r\n animate,\r\n animation,\r\n AnimationMetadata,\r\n AnimationReferenceMetadata,\r\n keyframes,\r\n style\r\n} from \"@angular/animations\";\r\nimport { EaseInOut } from \"../easings\";\r\nimport { IAnimationParams } from \"../main\";\r\n\r\nconst baseRecipe: AnimationMetadata[] = [\r\n animate(\r\n `{{duration}} {{delay}} {{easing}}`,\r\n keyframes([\r\n style({\r\n offset: 0,\r\n transform: `rotate(0deg) translate{{direction}}(0)`,\r\n transformOrigin: `{{xPos}} {{yPos}}`\r\n }),\r\n style({\r\n offset: 0.1,\r\n transform: `rotate({{endAngle}}deg) translate{{direction}}(-{{startDistance}})`\r\n }),\r\n style({\r\n offset: 0.2,\r\n transform: `rotate(-{{startAngle}}deg) translate{{direction}}({{startDistance}})`\r\n }),\r\n style({\r\n offset: 0.3,\r\n transform: `rotate({{startAngle}}deg) translate{{direction}}(-{{startDistance}})`\r\n }),\r\n style({\r\n offset: 0.4,\r\n transform: `rotate(-{{startAngle}}deg) translate{{direction}}({{startDistance}})`\r\n\r\n }),\r\n style({\r\n offset: 0.5,\r\n transform: `rotate({{startAngle}}deg) translate{{direction}}(-{{startDistance}})`\r\n }),\r\n style({\r\n offset: 0.6,\r\n transform: `rotate(-{{startAngle}}deg) translate{{direction}}({{startDistance}})`\r\n\r\n }),\r\n style({\r\n offset: 0.7,\r\n transform: `rotate({{startAngle}}deg) translate{{direction}}(-{{startDistance}})`\r\n }),\r\n style({\r\n offset: 0.8,\r\n transform: `rotate(-{{endAngle}}deg) translate{{direction}}({{endDistance}})`\r\n\r\n }),\r\n style({\r\n offset: 0.9,\r\n transform: `rotate({{endAngle}}deg) translate{{direction}}(-{{endDistance}})`\r\n\r\n }),\r\n style({\r\n offset: 1,\r\n transform: `rotate(0deg) translate{{direction}}(0)`,\r\n transformOrigin: `{{xPos}} {{yPos}}`\r\n })\r\n ])\r\n )\r\n];\r\n\r\nconst baseParams: IAnimationParams = {\r\n delay: \"0s\",\r\n direction: \"X\",\r\n duration: \"800ms\",\r\n easing: EaseInOut.quad,\r\n endAngle: 0,\r\n endDistance: \"8px\",\r\n startAngle: 0,\r\n startDistance: \"10px\",\r\n xPos: \"center\",\r\n yPos: \"center\"\r\n};\r\n\r\nconst shakeHor: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n direction: \"X\"\r\n }\r\n});\r\n\r\nconst shakeVer: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n direction: \"Y\"\r\n }\r\n});\r\n\r\nconst shakeTop: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n endAngle: 2,\r\n endDistance: \"0\",\r\n startAngle: 4,\r\n startDistance: \"0\",\r\n yPos: \"top\"\r\n }\r\n});\r\n\r\nconst shakeBottom: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n direction: \"Y\",\r\n endAngle: 2,\r\n endDistance: \"0\",\r\n startAngle: 4,\r\n startDistance: \"0\",\r\n yPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst shakeRight: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n direction: \"Y\",\r\n endAngle: 2,\r\n endDistance: \"0\",\r\n startAngle: 4,\r\n startDistance: \"0\",\r\n xPos: \"right\",\r\n yPos: \"center\"\r\n }\r\n});\r\n\r\nconst shakeLeft: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n direction: \"Y\",\r\n endAngle: 2,\r\n endDistance: \"0\",\r\n startAngle: 4,\r\n startDistance: \"0\",\r\n xPos: \"left\",\r\n yPos: \"center\"\r\n }\r\n});\r\n\r\nconst shakeCenter: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n direction: \"Y\",\r\n endAngle: 8,\r\n endDistance: \"0\",\r\n startAngle: 10,\r\n startDistance: \"0\",\r\n xPos: \"center\",\r\n yPos: \"center\"\r\n }\r\n});\r\n\r\nconst shakeTr: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n direction: \"Y\",\r\n endAngle: 2,\r\n endDistance: \"0\",\r\n startAngle: 4,\r\n startDistance: \"0\",\r\n xPos: \"right\",\r\n yPos: \"top\"\r\n }\r\n});\r\n\r\nconst shakeBr: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n direction: \"Y\",\r\n endAngle: 2,\r\n endDistance: \"0\",\r\n startAngle: 4,\r\n startDistance: \"0\",\r\n xPos: \"right\",\r\n yPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst shakeBl: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n direction: \"Y\",\r\n endAngle: 2,\r\n endDistance: \"0\",\r\n startAngle: 4,\r\n startDistance: \"0\",\r\n xPos: \"left\",\r\n yPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst shakeTl: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseParams,\r\n direction: \"Y\",\r\n endAngle: 2,\r\n endDistance: \"0\",\r\n startAngle: 4,\r\n startDistance: \"0\",\r\n xPos: \"left\",\r\n yPos: \"top\"\r\n }\r\n});\r\n\r\nexport {\r\n shakeHor,\r\n shakeVer,\r\n shakeTop,\r\n shakeBottom,\r\n shakeRight,\r\n shakeLeft,\r\n shakeCenter,\r\n shakeTr,\r\n shakeBr,\r\n shakeBl,\r\n shakeTl\r\n};\r\n"]} \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/animations/rotate/index.js.map b/projects/igniteui-angular/src/lib/animations/rotate/index.js.map deleted file mode 100644 index 019bb88ccc5..00000000000 --- a/projects/igniteui-angular/src/lib/animations/rotate/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/animations/rotate/index.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,kDAA+G;AAC/G,sCAA6C;AAG7C,IAAM,UAAU,GAAwB;IACpC,kBAAK,CAAC;QACF,OAAO,EAAE,kBAAkB;QAC3B,SAAS,EAAE,iEAAiE;QAC5E,eAAe,EAAE,mBAAmB;KACvC,CAAC;IACF,oBAAO,CACH,mCAAmC,EACnC,kBAAK,CAAC;QACF,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,+DAA+D;QAC1E,eAAe,EAAE,mBAAmB;KACvC,CAAC,CACL;CACJ,CAAC;AAEF,IAAM,YAAY,GAAqB;IACnC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,iBAAO,CAAC,IAAI;IACpB,QAAQ,EAAE,CAAC;IACX,UAAU,EAAE,CAAC;IACb,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,CAAC,GAAG;IAChB,YAAY,EAAE,CAAC;IACf,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;CACjB,CAAC;AAEF,IAAM,aAAa,gBACZ,YAAY,IACf,MAAM,EAAE,gBAAM,CAAC,IAAI,EACnB,UAAU,EAAE,CAAC,EACb,YAAY,EAAE,CAAC,GAClB,CAAC;AAEF,IAAM,cAAc,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACrE,MAAM,eAAO,YAAY,CAAE;CAC9B,CAAC,CAAC;AAuMC,wCAAc;AArMlB,IAAM,eAAe,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACtE,MAAM,eAAO,aAAa,CAAE;CAC/B,CAAC,CAAC;AAgNC,0CAAe;AA9MnB,IAAM,WAAW,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAClE,MAAM,eACC,YAAY,IACf,IAAI,EAAE,KAAK,GACd;CACJ,CAAC,CAAC;AA6LC,kCAAW;AA3Lf,IAAM,YAAY,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACnE,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,KAAK,GACd;CACJ,CAAC,CAAC;AAmMC,oCAAY;AAjMhB,IAAM,aAAa,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACpE,MAAM,eACC,YAAY,IACf,IAAI,EAAE,OAAO,GAChB;CACJ,CAAC,CAAC;AAgLC,sCAAa;AA9KjB,IAAM,cAAc,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACrE,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,OAAO,GAChB;CACJ,CAAC,CAAC;AAsLC,wCAAc;AApLlB,IAAM,cAAc,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACrE,MAAM,eACC,YAAY,IACf,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AAoKC,wCAAc;AAlKlB,IAAM,eAAe,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACtE,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AA0KC,0CAAe;AAxKnB,IAAM,YAAY,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACnE,MAAM,eACC,YAAY,IACf,IAAI,EAAE,MAAM,GACf;CACJ,CAAC,CAAC;AAqJC,oCAAY;AAnJhB,IAAM,aAAa,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACpE,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,MAAM,GACf;CACJ,CAAC,CAAC;AA2JC,sCAAa;AAzJjB,IAAM,UAAU,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACjE,MAAM,eACC,YAAY,IACf,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,KAAK,GACd;CACJ,CAAC,CAAC;AAwIC,gCAAU;AAtId,IAAM,WAAW,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAClE,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,KAAK,GACd;CACJ,CAAC,CAAC;AA6IC,kCAAW;AA3If,IAAM,UAAU,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACjE,MAAM,eACC,YAAY,IACf,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AAyHC,gCAAU;AAvHd,IAAM,WAAW,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAClE,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AA8HC,kCAAW;AA5Hf,IAAM,UAAU,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACjE,MAAM,eACC,YAAY,IACf,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AA0GC,gCAAU;AAxGd,IAAM,WAAW,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAClE,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AA+GC,kCAAW;AA7Gf,IAAM,UAAU,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACjE,MAAM,eACC,YAAY,IACf,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,KAAK,GACd;CACJ,CAAC,CAAC;AA2FC,gCAAU;AAzFd,IAAM,WAAW,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAClE,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,KAAK,GACd;CACJ,CAAC,CAAC;AAgGC,kCAAW;AA9Ff,IAAM,iBAAiB,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACxE,MAAM,eACC,YAAY,IACf,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AA2EC,8CAAiB;AAzErB,IAAM,kBAAkB,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACzE,MAAM,eACC,aAAa,IAChB,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AA+EC,gDAAkB;AA7EtB,IAAM,iBAAiB,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACxE,MAAM,eACC,YAAY,IACf,OAAO,EAAE,CAAC,CAAC,EACX,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AA0DC,8CAAiB;AAxDrB,IAAM,kBAAkB,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACzE,MAAM,eACC,aAAa,IAChB,OAAO,EAAE,CAAC,CAAC,EACX,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AA8DC,gDAAkB;AA5DtB,IAAM,WAAW,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAClE,MAAM,eACC,YAAY,IACf,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AAyCC,kCAAW;AAvCf,IAAM,YAAY,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACnE,MAAM,eACC,aAAa,IAChB,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AA6CC,oCAAY;AA3ChB,IAAM,WAAW,GAA+B,sBAAS,CAAC,UAAU,EAAE;IAClE,MAAM,eACC,YAAY,IACf,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AAwBC,kCAAW;AAtBf,IAAM,YAAY,GAA+B,sBAAS,CAAC,UAAU,EAAE;IACnE,MAAM,eACC,aAAa,IAChB,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,GACb;CACJ,CAAC,CAAC;AA4BC,oCAAY","file":"index.js","sourcesContent":["import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from \"@angular/animations\";\r\nimport { EaseIn, EaseOut } from \"../easings\";\r\nimport { IAnimationParams } from \"../main\";\r\n\r\nconst baseRecipe: AnimationMetadata[] = [\r\n style({\r\n opacity: `{{startOpacity}}`,\r\n transform: `rotate3d({{rotateX}},{{rotateY}},{{rotateZ}},{{startAngle}}deg)`,\r\n transformOrigin: `{{xPos}} {{yPos}}`\r\n }),\r\n animate(\r\n `{{duration}} {{delay}} {{easing}}`,\r\n style({\r\n offset: 0,\r\n opacity: `{{endOpacity}}`,\r\n transform: `rotate3d({{rotateX}},{{rotateY}},{{rotateZ}},{{endAngle}}deg)`,\r\n transformOrigin: `{{xPos}} {{yPos}}`\r\n })\r\n )\r\n];\r\n\r\nconst baseInParams: IAnimationParams = {\r\n delay: \"0s\",\r\n duration: \"600ms\",\r\n easing: EaseOut.quad,\r\n endAngle: 0,\r\n endOpacity: 1,\r\n rotateX: 0,\r\n rotateY: 0,\r\n rotateZ: 1,\r\n startAngle: -360,\r\n startOpacity: 0,\r\n xPos: \"center\",\r\n yPos: \"center\"\r\n};\r\n\r\nconst baseOutParams: IAnimationParams = {\r\n ...baseInParams,\r\n easing: EaseIn.quad,\r\n endOpacity: 0,\r\n startOpacity: 1\r\n};\r\n\r\nconst rotateInCenter: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: { ...baseInParams }\r\n});\r\n\r\nconst rotateOutCenter: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: { ...baseOutParams }\r\n});\r\n\r\nconst rotateInTop: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"top\"\r\n }\r\n});\r\n\r\nconst rotateOutTop: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"top\"\r\n }\r\n});\r\n\r\nconst rotateInRight: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"right\"\r\n }\r\n});\r\n\r\nconst rotateOutRight: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"right\"\r\n }\r\n});\r\n\r\nconst rotateInBottom: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst rotateOutBottom: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst rotateInLeft: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"left\"\r\n }\r\n});\r\n\r\nconst rotateOutLeft: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"left\"\r\n }\r\n});\r\n\r\nconst rotateInTr: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"right\",\r\n yPos: \"top\"\r\n }\r\n});\r\n\r\nconst rotateOutTr: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"right\",\r\n yPos: \"top\"\r\n }\r\n});\r\n\r\nconst rotateInBr: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"right\",\r\n yPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst rotateOutBr: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"right\",\r\n yPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst rotateInBl: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"left\",\r\n yPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst rotateOutBl: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"left\",\r\n yPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst rotateInTl: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"left\",\r\n yPos: \"top\"\r\n }\r\n});\r\n\r\nconst rotateOutTl: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"left\",\r\n yPos: \"top\"\r\n }\r\n});\r\n\r\nconst rotateInDiagonal1: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n rotateX: 1,\r\n rotateY: 1,\r\n rotateZ: 0\r\n }\r\n});\r\n\r\nconst rotateOutDiagonal1: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n rotateX: 1,\r\n rotateY: 1,\r\n rotateZ: 0\r\n }\r\n});\r\n\r\nconst rotateInDiagonal2: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n rotateX: -1,\r\n rotateY: 1,\r\n rotateZ: 0\r\n }\r\n});\r\n\r\nconst rotateOutDiagonal2: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n rotateX: -1,\r\n rotateY: 1,\r\n rotateZ: 0\r\n }\r\n});\r\n\r\nconst rotateInHor: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n rotateX: 0,\r\n rotateY: 1,\r\n rotateZ: 0\r\n }\r\n});\r\n\r\nconst rotateOutHor: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n rotateX: 0,\r\n rotateY: 1,\r\n rotateZ: 0\r\n }\r\n});\r\n\r\nconst rotateInVer: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseInParams,\r\n rotateX: 1,\r\n rotateY: 0,\r\n rotateZ: 0\r\n }\r\n});\r\n\r\nconst rotateOutVer: AnimationReferenceMetadata = animation(baseRecipe, {\r\n params: {\r\n ...baseOutParams,\r\n rotateX: 1,\r\n rotateY: 0,\r\n rotateZ: 0\r\n }\r\n});\r\n\r\nexport {\r\n rotateInCenter,\r\n rotateInTop,\r\n rotateInRight,\r\n rotateInLeft,\r\n rotateInBottom,\r\n rotateInTr,\r\n rotateInBr,\r\n rotateInBl,\r\n rotateInTl,\r\n rotateInDiagonal1,\r\n rotateInDiagonal2,\r\n rotateInHor,\r\n rotateInVer,\r\n rotateOutCenter,\r\n rotateOutTop,\r\n rotateOutRight,\r\n rotateOutLeft,\r\n rotateOutBottom,\r\n rotateOutTr,\r\n rotateOutBr,\r\n rotateOutBl,\r\n rotateOutTl,\r\n rotateOutDiagonal1,\r\n rotateOutDiagonal2,\r\n rotateOutHor,\r\n rotateOutVer\r\n};\r\n"]} \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/animations/scale/index.js.map b/projects/igniteui-angular/src/lib/animations/scale/index.js.map deleted file mode 100644 index 86aac31f838..00000000000 --- a/projects/igniteui-angular/src/lib/animations/scale/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/animations/scale/index.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,kDAA+G;AAC/G,sCAAqC;AAGrC,IAAM,IAAI,GAAwB;IAC9B,kBAAK,CAAC;QACF,OAAO,EAAE,kBAAkB;QAC3B,SAAS,EAAE,mCAAmC;QAC9C,eAAe,EAAE,mBAAmB;KACvC,CAAC;IACF,oBAAO,CACH,mCAAmC,EACnC,kBAAK,CAAC;QACF,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,iCAAiC;QAC5C,eAAe,EAAE,mBAAmB;KACvC,CAAC,CACL;CACJ,CAAC;AAEF,IAAM,YAAY,GAAqB;IACnC,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,iBAAO,CAAC,IAAI;IACpB,UAAU,EAAE,CAAC;IACb,SAAS,EAAE,EAAE;IACb,YAAY,EAAE,CAAC;IACf,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;CACd,CAAC;AAEF,IAAM,aAAa,gBACZ,YAAY,IACf,MAAM,EAAE,iBAAO,CAAC,IAAI,EACpB,UAAU,EAAE,CAAC,EACb,SAAS,EAAE,CAAC,EACZ,YAAY,EAAE,CAAC,EACf,OAAO,EAAE,EAAE,GACd,CAAC;AAEF,IAAM,aAAa,GAA+B,sBAAS,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;AAiTxF,sCAAa;AA/SjB,IAAM,SAAS,GAA+B,sBAAS,CAAC,IAAI,EACxD;IACI,MAAM,eACC,YAAY,IACf,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,MAAM,GACf;CACJ,CACJ,CAAC;AA0SE,8BAAS;AAxSb,IAAM,gBAAgB,GAA+B,sBAAS,CAAC,IAAI,EAC/D;IACI,MAAM,eACC,YAAY,IACf,SAAS,EAAE,GAAG,EACd,SAAS,EAAE,EAAE,GAChB;CACJ,CACJ,CAAC;AAoSE,4CAAgB;AAlSpB,IAAM,UAAU,GAA+B,sBAAS,CAAC,IAAI,EACzD;IACI,MAAM,eACC,YAAY,IACf,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,GAAG,GACZ;CACJ,CACJ,CAAC;AA+QE,gCAAU;AA7Qd,IAAM,WAAW,GAA+B,sBAAS,CAAC,IAAI,EAC1D;IACI,MAAM,eACC,YAAY,IACf,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,KAAK,GACd;CACJ,CACJ,CAAC;AAwQE,kCAAW;AAtQf,IAAM,aAAa,GAA+B,sBAAS,CAAC,IAAI,EAC5D;IACI,MAAM,eACC,YAAY,IACf,SAAS,EAAE,GAAG,EACd,SAAS,EAAE,EAAE,EACb,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,GAAG,GACZ;CACJ,CACJ,CAAC;AAkQE,sCAAa;AAhQjB,IAAM,SAAS,GAAG,sBAAS,CAAC,IAAI,EAC5B;IACI,MAAM,eACC,YAAY,IACf,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,GAAG,GACZ;CACJ,CACJ,CAAC;AAoPE,8BAAS;AAlPb,IAAM,SAAS,GAA+B,sBAAS,CAAC,IAAI,EACxD;IACI,MAAM,eACC,YAAY,IACf,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,GAAG,GACZ;CACJ,CACJ,CAAC;AA6OE,8BAAS;AA3Ob,IAAM,gBAAgB,GAA+B,sBAAS,CAAC,IAAI,EAC/D;IACI,MAAM,eACC,YAAY,IACf,SAAS,EAAE,GAAG,EACd,SAAS,EAAE,EAAE,EACb,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,MAAM,GACf;CACJ,CACJ,CAAC;AAmOE,4CAAgB;AAjOpB,IAAM,YAAY,GAA+B,sBAAS,CAAC,IAAI,EAC3D;IACI,MAAM,eACC,YAAY,IACf,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,KAAK,GACd;CACJ,CACJ,CAAC;AAgNE,oCAAY;AA9MhB,IAAM,gBAAgB,GAA+B,sBAAS,CAAC,IAAI,EAC/D;IACI,MAAM,eACC,YAAY,IACf,SAAS,EAAE,GAAG,EACd,SAAS,EAAE,EAAE,GAChB;CACJ,CACJ,CAAC;AAiNE,4CAAgB;AA/MpB,IAAM,SAAS,GAA+B,sBAAS,CAAC,IAAI,EACxD;IACI,MAAM,eACC,YAAY,IACf,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GACf;CACJ,CACJ,CAAC;AAiME,8BAAS;AA/Lb,IAAM,cAAc,GAA+B,sBAAS,CAAC,IAAI,EAC7D;IACI,MAAM,eACC,YAAY,IACf,SAAS,EAAE,GAAG,EACd,SAAS,EAAE,EAAE,EACb,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,GAAG,GACZ;CACJ,CACJ,CAAC;AA4LE,wCAAc;AA1LlB,IAAM,aAAa,GAA+B,sBAAS,CAAC,IAAI,EAC5D;IACI,MAAM,eACC,YAAY,IACf,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,MAAM,GACf;CACJ,CACJ,CAAC;AAuKE,sCAAa;AArKjB,IAAM,eAAe,GAA+B,sBAAS,CAAC,IAAI,EAC9D;IACI,MAAM,eACC,YAAY,IACf,SAAS,EAAE,GAAG,EACd,SAAS,EAAE,EAAE,EACb,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GACf;CACJ,CACJ,CAAC;AAuKE,0CAAe;AArKnB,IAAM,cAAc,GAA+B,sBAAS,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;AA0K1F,wCAAc;AAxKlB,IAAM,UAAU,GAA+B,sBAAS,CAAC,IAAI,EACzD;IACI,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,MAAM,GACf;CACJ,CACJ,CAAC;AAmKE,gCAAU;AAjKd,IAAM,UAAU,GAA+B,sBAAS,CAAC,IAAI,EACzD;IACI,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GACf;CACJ,CACJ,CAAC;AAwJE,gCAAU;AAtJd,IAAM,iBAAiB,GAA+B,sBAAS,CAAC,IAAI,EAChE;IACI,MAAM,eACC,aAAa,IAChB,SAAS,EAAE,GAAG,EACd,OAAO,EAAE,EAAE,GACd;CACJ,CACJ,CAAC;AAmJE,8CAAiB;AAjJrB,IAAM,cAAc,GAA+B,sBAAS,CAAC,IAAI,EAC7D;IACI,MAAM,eACC,aAAa,IAChB,SAAS,EAAE,GAAG,EACd,OAAO,EAAE,EAAE,EACX,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,GAAG,GACZ;CACJ,CACJ,CAAC;AAqIE,wCAAc;AAnIlB,IAAM,iBAAiB,GAA+B,sBAAS,CAAC,IAAI,EAChE;IACI,MAAM,eACC,aAAa,IAChB,SAAS,EAAE,GAAG,EACd,OAAO,EAAE,EAAE,EACX,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,MAAM,GACf;CACJ,CACJ,CAAC;AA0HE,8CAAiB;AAxHrB,IAAM,WAAW,GAA+B,sBAAS,CAAC,IAAI,EAC1D;IACI,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,GAAG,GACZ;CACJ,CACJ,CAAC;AAsGE,kCAAW;AApGf,IAAM,YAAY,GAA+B,sBAAS,CAAC,IAAI,EAC3D;IACI,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,KAAK,GACd;CACJ,CACJ,CAAC;AA+FE,oCAAY;AA7FhB,IAAM,UAAU,GAA+B,sBAAS,CAAC,IAAI,EACzD;IACI,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,GAAG,GACZ;CACJ,CACJ,CAAC;AAuFE,gCAAU;AArFd,IAAM,UAAU,GAA+B,sBAAS,CAAC,IAAI,EACzD;IACI,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,GAAG,GACZ;CACJ,CACJ,CAAC;AAgFE,gCAAU;AA9Ed,IAAM,aAAa,GAA+B,sBAAS,CAAC,IAAI,EAC5D;IACI,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,KAAK,GACd;CACJ,CACJ,CAAC;AA+DE,sCAAa;AA7DjB,IAAM,cAAc,GAA+B,sBAAS,CAAC,IAAI,EAC7D;IACI,MAAM,eACC,aAAa,IAChB,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,MAAM,GACf;CACJ,CACJ,CAAC;AAsDE,wCAAc;AApDlB,IAAM,iBAAiB,GAA+B,sBAAS,CAAC,IAAI,EAChE;IACI,MAAM,eACC,aAAa,IAChB,SAAS,EAAE,GAAG,EACd,OAAO,EAAE,EAAE,GACd;CACJ,CACJ,CAAC;AAsDE,8CAAiB;AApDrB,IAAM,eAAe,GAA+B,sBAAS,CAAC,IAAI,EAC9D;IACI,MAAM,eACC,aAAa,IAChB,SAAS,EAAE,GAAG,EACd,OAAO,EAAE,EAAE,EACX,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,GAAG,GACZ;CACJ,CACJ,CAAC;AA2CE,0CAAe;AAzCnB,IAAM,gBAAgB,GAA+B,sBAAS,CAAC,IAAI,EAC/D;IACI,MAAM,eACC,aAAa,IAChB,SAAS,EAAE,GAAG,EACd,OAAO,EAAE,EAAE,EACX,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GACf;CACJ,CACJ,CAAC;AAgCE,4CAAgB","file":"index.js","sourcesContent":["import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from \"@angular/animations\";\r\nimport { EaseOut } from \"../easings\";\r\nimport { IAnimationParams } from \"../main\";\r\n\r\nconst base: AnimationMetadata[] = [\r\n style({\r\n opacity: `{{startOpacity}}`,\r\n transform: `scale{{direction}}({{fromScale}})`,\r\n transformOrigin: `{{xPos}} {{yPos}}`\r\n }),\r\n animate(\r\n `{{duration}} {{delay}} {{easing}}`,\r\n style({\r\n opacity: `{{endOpacity}}`,\r\n transform: `scale{{direction}}({{toScale}})`,\r\n transformOrigin: `{{xPos}} {{yPos}}`\r\n })\r\n )\r\n];\r\n\r\nconst baseInParams: IAnimationParams = {\r\n delay: \"0s\",\r\n direction: \"\",\r\n duration: \"350ms\",\r\n easing: EaseOut.quad,\r\n endOpacity: 1,\r\n fromScale: .5,\r\n startOpacity: 0,\r\n toScale: 1,\r\n xPos: \"50%\",\r\n yPos: \"50%\"\r\n};\r\n\r\nconst baseOutParams: IAnimationParams = {\r\n ...baseInParams,\r\n easing: EaseOut.sine,\r\n endOpacity: 0,\r\n fromScale: 1,\r\n startOpacity: 1,\r\n toScale: .5\r\n};\r\n\r\nconst scaleInCenter: AnimationReferenceMetadata = animation(base, { params: baseInParams });\r\n\r\nconst scaleInBl: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"0\",\r\n yPos: \"100%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleInVerCenter: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n direction: \"Y\",\r\n fromScale: .4\r\n }\r\n }\r\n);\r\n\r\nconst scaleInTop: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"50%\",\r\n yPos: \"0\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleInLeft: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"0\",\r\n yPos: \"50%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleInVerTop: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n direction: \"Y\",\r\n fromScale: .4,\r\n xPos: \"100%\",\r\n yPos: \"0\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleInTr = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"100%\",\r\n yPos: \"0\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleInTl: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"0\",\r\n yPos: \"0\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleInVerBottom: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n direction: \"Y\",\r\n fromScale: .4,\r\n xPos: \"0\",\r\n yPos: \"100%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleInRight: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"100%\",\r\n yPos: \"50%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleInHorCenter: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n direction: \"X\",\r\n fromScale: .4\r\n }\r\n }\r\n);\r\n\r\nconst scaleInBr: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"100%\",\r\n yPos: \"100%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleInHorLeft: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n direction: \"X\",\r\n fromScale: .4,\r\n xPos: \"0\",\r\n yPos: \"0\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleInBottom: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n xPos: \"50%\",\r\n yPos: \"100%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleInHorRight: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n direction: \"X\",\r\n fromScale: .4,\r\n xPos: \"100%\",\r\n yPos: \"100%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutCenter: AnimationReferenceMetadata = animation(base, { params: baseOutParams });\r\n\r\nconst scaleOutBl: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"0\",\r\n yPos: \"100%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutBr: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"100%\",\r\n yPos: \"100%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutVerCenter: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n direction: \"Y\",\r\n toScale: .3\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutVerTop: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n direction: \"Y\",\r\n toScale: .3,\r\n xPos: \"100%\",\r\n yPos: \"0\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutVerBottom: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n direction: \"Y\",\r\n toScale: .3,\r\n xPos: \"0\",\r\n yPos: \"100%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutTop: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"50%\",\r\n yPos: \"0\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutLeft: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"0\",\r\n yPos: \"50%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutTr: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"100%\",\r\n yPos: \"0\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutTl: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"0\",\r\n yPos: \"0\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutRight: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"100%\",\r\n yPos: \"50%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutBottom: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n xPos: \"50%\",\r\n yPos: \"100%\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutHorCenter: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n direction: \"X\",\r\n toScale: .3\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutHorLeft: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n direction: \"X\",\r\n toScale: .3,\r\n xPos: \"0\",\r\n yPos: \"0\"\r\n }\r\n }\r\n);\r\n\r\nconst scaleOutHorRight: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n direction: \"X\",\r\n toScale: .3,\r\n xPos: \"100%\",\r\n yPos: \"100%\"\r\n }\r\n }\r\n);\r\n\r\nexport {\r\n scaleInTop,\r\n scaleInRight,\r\n scaleInBottom,\r\n scaleInLeft,\r\n scaleInCenter,\r\n scaleInTr,\r\n scaleInBr,\r\n scaleInBl,\r\n scaleInTl,\r\n scaleInVerTop,\r\n scaleInVerBottom,\r\n scaleInVerCenter,\r\n scaleInHorCenter,\r\n scaleInHorLeft,\r\n scaleInHorRight,\r\n scaleOutTop,\r\n scaleOutRight,\r\n scaleOutBottom,\r\n scaleOutLeft,\r\n scaleOutCenter,\r\n scaleOutTr,\r\n scaleOutBr,\r\n scaleOutBl,\r\n scaleOutTl,\r\n scaleOutVerTop,\r\n scaleOutVerBottom,\r\n scaleOutVerCenter,\r\n scaleOutHorCenter,\r\n scaleOutHorLeft,\r\n scaleOutHorRight\r\n};\r\n"]} \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/animations/slide/index.js.map b/projects/igniteui-angular/src/lib/animations/slide/index.js.map deleted file mode 100644 index 74fc3316aa1..00000000000 --- a/projects/igniteui-angular/src/lib/animations/slide/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/animations/slide/index.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,kDAA+G;AAC/G,sCAA6C;AAG7C,IAAM,IAAI,GAAwB;IAC9B,kBAAK,CAAC;QACF,OAAO,EAAE,kBAAkB;QAC3B,SAAS,EAAE,kBAAkB;KAChC,CAAC;IACF,oBAAO,CACH,mCAAmC,EACnC,kBAAK,CAAC;QACF,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,gBAAgB;KAC9B,CAAC,CACL;CACJ,CAAC;AAEF,IAAM,YAAY,GAAqB;IACnC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,iBAAO,CAAC,IAAI;IACpB,UAAU,EAAE,CAAC;IACb,YAAY,EAAE,oBAAoB;IAClC,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,eAAe;CAC9B,CAAC;AAEF,IAAM,aAAa,gBACZ,YAAY,IACf,MAAM,EAAE,gBAAM,CAAC,IAAI,EACnB,UAAU,EAAE,CAAC,EACb,YAAY,EAAE,eAAe,EAC7B,YAAY,EAAE,CAAC,EACf,UAAU,EAAE,oBAAoB,GACnC,CAAC;AAEF,IAAM,UAAU,GAA+B,sBAAS,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;AA2IrF,gCAAU;AAzId,IAAM,WAAW,GAA+B,sBAAS,CAAC,IAAI,EAC1D;IACI,MAAM,eACC,YAAY,IACf,YAAY,EAAE,oBAAoB,GACrC;CACJ,CACJ,CAAC;AAqIE,kCAAW;AAnIf,IAAM,YAAY,GAA+B,sBAAS,CAAC,IAAI,EAC3D;IACI,MAAM,eACC,YAAY,IACf,YAAY,EAAE,mBAAmB,GACpC;CACJ,CACJ,CAAC;AA0HE,oCAAY;AAxHhB,IAAM,aAAa,GAA+B,sBAAS,CAAC,IAAI,EAC5D;IACI,MAAM,eACC,YAAY,IACf,YAAY,EAAE,mBAAmB,GACpC;CACJ,CACJ,CAAC;AAkHE,sCAAa;AAhHjB,IAAM,SAAS,GAA+B,sBAAS,CAAC,IAAI,EACxD;IACI,MAAM,eACC,YAAY,IACf,YAAY,EAAE,sCAAsC,EACpD,UAAU,EAAE,6BAA6B,GAC5C;CACJ,CACJ,CAAC;AA0GE,8BAAS;AAxGb,IAAM,SAAS,GAA+B,sBAAS,CAAC,IAAI,EACxD;IACI,MAAM,eACC,YAAY,IACf,YAAY,EAAE,uCAAuC,EACrD,UAAU,EAAE,6BAA6B,GAC5C;CACJ,CACJ,CAAC;AAmGE,8BAAS;AAjGb,IAAM,SAAS,GAA+B,sBAAS,CAAC,IAAI,EACxD;IACI,MAAM,eACC,YAAY,IACf,YAAY,EAAE,qCAAqC,EACnD,UAAU,EAAE,6BAA6B,GAC5C;CACJ,CACJ,CAAC;AAuFE,8BAAS;AArFb,IAAM,SAAS,GAA+B,sBAAS,CAAC,IAAI,EACxD;IACI,MAAM,eACC,YAAY,IACf,YAAY,EAAE,sCAAsC,EACpD,UAAU,EAAE,6BAA6B,GAC5C;CACJ,CACJ,CAAC;AA8EE,8BAAS;AA5Eb,IAAM,WAAW,GAA+B,sBAAS,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;AA8EvF,kCAAW;AA5Ef,IAAM,aAAa,GAA+B,sBAAS,CAAC,IAAI,EAC5D;IACI,MAAM,eACC,aAAa,IAChB,UAAU,EAAE,mBAAmB,GAClC;CACJ,CACJ,CAAC;AAuEE,sCAAa;AArEjB,IAAM,cAAc,GAA+B,sBAAS,CAAC,IAAI,EAC7D;IACI,MAAM,eACC,aAAa,IAChB,UAAU,EAAE,mBAAmB,GAClC;CACJ,CACJ,CAAC;AA6DE,wCAAc;AA3DlB,IAAM,YAAY,GAA+B,sBAAS,CAAC,IAAI,EAC3D;IACI,MAAM,eACC,aAAa,IAChB,UAAU,EAAE,oBAAoB,GACnC;CACJ,CACJ,CAAC;AAsDE,oCAAY;AApDhB,IAAM,UAAU,GAA+B,sBAAS,CAAC,IAAI,EACzD;IACI,MAAM,eACC,aAAa,IAChB,YAAY,EAAE,6BAA6B,EAC3C,UAAU,EAAE,sCAAsC,GACrD;CACJ,CACJ,CAAC;AA6CE,gCAAU;AA3Cd,IAAM,UAAU,GAA+B,sBAAS,CAAC,IAAI,EACzD;IACI,MAAM,eACC,aAAa,IAChB,YAAY,EAAE,6BAA6B,EAC3C,UAAU,EAAE,qCAAqC,GACpD;CACJ,CACJ,CAAC;AAoCE,gCAAU;AAlCd,IAAM,UAAU,GAA+B,sBAAS,CAAC,IAAI,EACzD;IACI,MAAM,eACC,aAAa,IAChB,YAAY,EAAE,6BAA6B,EAC3C,UAAU,EAAE,sCAAsC,GACrD;CACJ,CACJ,CAAC;AA2BE,gCAAU;AAzBd,IAAM,UAAU,GAA+B,sBAAS,CAAC,IAAI,EACzD;IACI,MAAM,eACC,aAAa,IAChB,YAAY,EAAE,6BAA6B,EAC3C,UAAU,EAAE,uCAAuC,GACtD;CACJ,CACJ,CAAC;AAkBE,gCAAU","file":"index.js","sourcesContent":["import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from \"@angular/animations\";\r\nimport { EaseIn, EaseOut } from \"../easings\";\r\nimport { IAnimationParams } from \"../main\";\r\n\r\nconst base: AnimationMetadata[] = [\r\n style({\r\n opacity: `{{startOpacity}}`,\r\n transform: `{{fromPosition}}`\r\n }),\r\n animate(\r\n `{{duration}} {{delay}} {{easing}}`,\r\n style({\r\n opacity: `{{endOpacity}}`,\r\n transform: `{{toPosition}}`\r\n })\r\n )\r\n];\r\n\r\nconst baseInParams: IAnimationParams = {\r\n delay: \"0s\",\r\n duration: \"350ms\",\r\n easing: EaseOut.quad,\r\n endOpacity: 1,\r\n fromPosition: \"translateY(-500px)\",\r\n startOpacity: 0,\r\n toPosition: \"translateY(0)\"\r\n};\r\n\r\nconst baseOutParams: IAnimationParams = {\r\n ...baseInParams,\r\n easing: EaseIn.quad,\r\n endOpacity: 0,\r\n fromPosition: \"translateY(0)\",\r\n startOpacity: 1,\r\n toPosition: \"translateY(-500px)\"\r\n};\r\n\r\nconst slideInTop: AnimationReferenceMetadata = animation(base, { params: baseInParams });\r\n\r\nconst slideInLeft: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n fromPosition: \"translateX(-500px)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideInRight: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n fromPosition: \"translateX(500px)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideInBottom: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n fromPosition: \"translateY(500px)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideInTr: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n fromPosition: \"translateY(-500px) translateX(500px)\",\r\n toPosition: \"translateY(0) translateX(0)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideInTl: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n fromPosition: \"translateY(-500px) translateX(-500px)\",\r\n toPosition: \"translateY(0) translateX(0)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideInBr: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n fromPosition: \"translateY(500px) translateX(500px)\",\r\n toPosition: \"translateY(0) translateX(0)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideInBl: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseInParams,\r\n fromPosition: \"translateY(500px) translateX(-500px)\",\r\n toPosition: \"translateY(0) translateX(0)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideOutTop: AnimationReferenceMetadata = animation(base, { params: baseOutParams });\r\n\r\nconst slideOutRight: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n toPosition: \"translateX(500px)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideOutBottom: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n toPosition: \"translateY(500px)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideOutLeft: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n toPosition: \"translateX(-500px)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideOutTr: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n fromPosition: \"translateY(0) translateX(0)\",\r\n toPosition: \"translateY(-500px) translateX(500px)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideOutBr: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n fromPosition: \"translateY(0) translateX(0)\",\r\n toPosition: \"translateY(500px) translateX(500px)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideOutBl: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n fromPosition: \"translateY(0) translateX(0)\",\r\n toPosition: \"translateY(500px) translateX(-500px)\"\r\n }\r\n }\r\n);\r\n\r\nconst slideOutTl: AnimationReferenceMetadata = animation(base,\r\n {\r\n params: {\r\n ...baseOutParams,\r\n fromPosition: \"translateY(0) translateX(0)\",\r\n toPosition: \"translateY(-500px) translateX(-500px)\"\r\n }\r\n }\r\n);\r\n\r\nexport {\r\n slideInTop,\r\n slideInRight,\r\n slideInBottom,\r\n slideInLeft,\r\n slideInTr,\r\n slideInBr,\r\n slideInBl,\r\n slideInTl,\r\n slideOutTop,\r\n slideOutBottom,\r\n slideOutRight,\r\n slideOutLeft,\r\n slideOutTr,\r\n slideOutBr,\r\n slideOutBl,\r\n slideOutTl\r\n};\r\n"]} \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/animations/swing/index.js.map b/projects/igniteui-angular/src/lib/animations/swing/index.js.map deleted file mode 100644 index 63c81b01f90..00000000000 --- a/projects/igniteui-angular/src/lib/animations/swing/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/animations/swing/index.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,kDAA+G;AAC/G,sCAA6C;AAG7C,IAAM,SAAS,GAAwB;IACnC,kBAAK,CAAC;QACF,OAAO,EAAE,kBAAkB;QAC3B,SAAS,EAAE,wCAAwC;QACnD,eAAe,EAAE,mBAAmB;KACvC,CAAC;IACF,oBAAO,CACH,mCAAmC,EACnC,kBAAK,CAAC;QACF,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,sCAAsC;QACjD,eAAe,EAAE,mBAAmB;KACvC,CAAC,CACL;CACJ,CAAC;AAEF,IAAM,WAAW,GAAqB;IAClC,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,GAAG;IACd,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,iBAAO,CAAC,IAAI;IACpB,QAAQ,EAAE,CAAC;IACX,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,CAAC,GAAG;IAChB,YAAY,EAAE,CAAC;IACf,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,QAAQ;CACjB,CAAC;AAEF,IAAM,cAAc,gBACb,WAAW,IACd,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,gBAAM,CAAC,IAAI,EACnB,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,CAAC,EACb,UAAU,EAAE,CAAC,EACb,YAAY,EAAE,CAAC,GAClB,CAAC;AAEF,IAAM,aAAa,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACnE,MAAM,eACC,WAAW,CACjB;CACJ,CAAC,CAAC;AA6IC,sCAAa;AA3IjB,IAAM,eAAe,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACrE,MAAM,eACC,WAAW,IACd,SAAS,EAAE,GAAG,EACd,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,OAAO,GAChB;CACJ,CAAC,CAAC;AAqIC,0CAAe;AAnInB,IAAM,gBAAgB,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACtE,MAAM,eACC,WAAW,IACd,UAAU,EAAE,GAAG,EACf,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AA+HC,4CAAgB;AA7HpB,IAAM,cAAc,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACpE,MAAM,eACC,WAAW,IACd,SAAS,EAAE,GAAG,EACd,UAAU,EAAE,GAAG,EACf,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,MAAM,GACf;CACJ,CAAC,CAAC;AAoHC,wCAAc;AAlHlB,IAAM,aAAa,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACnE,MAAM,eACC,WAAW,IACd,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,EAAE,GACjB;CACJ,CAAC,CAAC;AA8GC,sCAAa;AA5GjB,IAAM,eAAe,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACrE,MAAM,eACC,WAAW,IACd,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,EAAE,EACd,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,OAAO,GAChB;CACJ,CAAC,CAAC;AAoGC,0CAAe;AAlGnB,IAAM,gBAAgB,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACtE,MAAM,eACC,WAAW,IACd,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,CAAC,EAAE,EACf,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AA4FC,4CAAgB;AA1FpB,IAAM,cAAc,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACpE,MAAM,eACC,WAAW,IACd,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,CAAC,EAAE,EACf,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,MAAM,GACf;CACJ,CAAC,CAAC;AAkFC,wCAAc;AAhFlB,IAAM,cAAc,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACpE,MAAM,eACC,cAAc,CACpB;CACJ,CAAC,CAAC;AA6EC,wCAAc;AA3ElB,IAAM,gBAAgB,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACtE,MAAM,eACC,cAAc,IACjB,SAAS,EAAE,GAAG,EACd,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,OAAO,GAChB;CACJ,CAAC,CAAC;AAqEC,4CAAgB;AAnEpB,IAAM,iBAAiB,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACvE,MAAM,eACC,cAAc,IACjB,QAAQ,EAAE,CAAC,EAAE,EACb,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AA8DC,8CAAiB;AA5DrB,IAAM,gBAAgB,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACtE,MAAM,eACC,cAAc,IACjB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,CAAC,EAAE,EACb,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,MAAM,GACf;CACJ,CAAC,CAAC;AAqDC,4CAAgB;AAnDpB,IAAM,cAAc,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACpE,MAAM,eACC,cAAc,IACjB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,CAAC,GAAG,GACjB;CACJ,CAAC,CAAC;AA8CC,wCAAc;AA5ClB,IAAM,gBAAgB,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACtE,MAAM,eACC,cAAc,IACjB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,CAAC,GAAG,EACd,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,OAAO,GAChB;CACJ,CAAC,CAAC;AAoCC,4CAAgB;AAlCpB,IAAM,iBAAiB,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACvE,MAAM,eACC,cAAc,IACjB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,QAAQ,GACjB;CACJ,CAAC,CAAC;AA4BC,8CAAiB;AA1BrB,IAAM,eAAe,GAA+B,sBAAS,CAAC,SAAS,EAAE;IACrE,MAAM,eACC,cAAc,IACjB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,MAAM,GACf;CACJ,CAAC,CAAC;AAkBC,0CAAe","file":"index.js","sourcesContent":["import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from \"@angular/animations\";\r\nimport { EaseIn, EaseOut } from \"../easings\";\r\nimport { IAnimationParams } from \"../main\";\r\n\r\nconst swingBase: AnimationMetadata[] = [\r\n style({\r\n opacity: `{{startOpacity}}`,\r\n transform: `rotate{{direction}}({{startAngle}}deg)`,\r\n transformOrigin: `{{xPos}} {{yPos}}`\r\n }),\r\n animate(\r\n `{{duration}} {{delay}} {{easing}}`,\r\n style({\r\n opacity: `{{endOpacity}}`,\r\n transform: `rotate{{direction}}({{endAngle}}deg)`,\r\n transformOrigin: `{{xPos}} {{yPos}}`\r\n })\r\n )\r\n];\r\n\r\nconst swingParams: IAnimationParams = {\r\n delay: \"0s\",\r\n direction: \"X\",\r\n duration: \".5s\",\r\n easing: EaseOut.back,\r\n endAngle: 0,\r\n endOpacity: 1,\r\n startAngle: -100,\r\n startOpacity: 0,\r\n xPos: \"top\",\r\n yPos: \"center\"\r\n};\r\n\r\nconst swingOutParams: IAnimationParams = {\r\n ...swingParams,\r\n duration: \".55s\",\r\n easing: EaseIn.back,\r\n endAngle: 70,\r\n endOpacity: 0,\r\n startAngle: 0,\r\n startOpacity: 1\r\n};\r\n\r\nconst swingInTopFwd: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingParams\r\n }\r\n});\r\n\r\nconst swingInRightFwd: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingParams,\r\n direction: \"Y\",\r\n xPos: \"center\",\r\n yPos: \"right\"\r\n }\r\n});\r\n\r\nconst swingInBottomFwd: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingParams,\r\n startAngle: 100,\r\n xPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst swingInLeftFwd: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingParams,\r\n direction: \"Y\",\r\n startAngle: 100,\r\n xPos: \"center\",\r\n yPos: \"left\"\r\n }\r\n});\r\n\r\nconst swingInTopBck: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingParams,\r\n duration: \".6s\",\r\n startAngle: 70\r\n }\r\n});\r\n\r\nconst swingInRightBck: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingParams,\r\n direction: \"Y\",\r\n duration: \".6s\",\r\n startAngle: 70,\r\n xPos: \"center\",\r\n yPos: \"right\"\r\n }\r\n});\r\n\r\nconst swingInBottomBck: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingParams,\r\n duration: \".6s\",\r\n startAngle: -70,\r\n xPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst swingInLeftBck: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingParams,\r\n direction: \"Y\",\r\n duration: \".6s\",\r\n startAngle: -70,\r\n xPos: \"center\",\r\n yPos: \"left\"\r\n }\r\n});\r\n\r\nconst swingOutTopFwd: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingOutParams\r\n }\r\n});\r\n\r\nconst swingOutRightFwd: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingOutParams,\r\n direction: \"Y\",\r\n xPos: \"center\",\r\n yPos: \"right\"\r\n }\r\n});\r\n\r\nconst swingOutBottomFwd: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingOutParams,\r\n endAngle: -70,\r\n xPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst swingOutLefttFwd: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingOutParams,\r\n direction: \"Y\",\r\n endAngle: -70,\r\n xPos: \"center\",\r\n yPos: \"left\"\r\n }\r\n});\r\n\r\nconst swingOutTopBck: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingOutParams,\r\n duration: \".45s\",\r\n endAngle: -100\r\n }\r\n});\r\n\r\nconst swingOutRightBck: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingOutParams,\r\n direction: \"Y\",\r\n duration: \".45s\",\r\n endAngle: -100,\r\n xPos: \"center\",\r\n yPos: \"right\"\r\n }\r\n});\r\n\r\nconst swingOutBottomBck: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingOutParams,\r\n duration: \".45s\",\r\n endAngle: 100,\r\n xPos: \"bottom\"\r\n }\r\n});\r\n\r\nconst swingOutLeftBck: AnimationReferenceMetadata = animation(swingBase, {\r\n params: {\r\n ...swingOutParams,\r\n direction: \"Y\",\r\n duration: \".45s\",\r\n endAngle: 100,\r\n xPos: \"center\",\r\n yPos: \"left\"\r\n }\r\n});\r\n\r\nexport {\r\n swingInTopFwd,\r\n swingInRightFwd,\r\n swingInLeftFwd,\r\n swingInBottomFwd,\r\n swingInTopBck,\r\n swingInRightBck,\r\n swingInBottomBck,\r\n swingInLeftBck,\r\n swingOutTopFwd,\r\n swingOutRightFwd,\r\n swingOutBottomFwd,\r\n swingOutLefttFwd,\r\n swingOutTopBck,\r\n swingOutRightBck,\r\n swingOutBottomBck,\r\n swingOutLeftBck\r\n};\r\n"]} \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 945616b095b..08d857981d2 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -1,6 +1,5 @@ -import { HttpClient } from '@angular/common/http'; import { AfterViewInit, ChangeDetectorRef, Component, Injectable, OnInit, ViewChild, OnDestroy } from '@angular/core'; -import { async, TestBed, ComponentFixture, tick, fakeAsync, flush } from '@angular/core/testing'; +import { async, TestBed, ComponentFixture, tick, fakeAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { SortingDirection } from '../data-operations/sorting-expression.interface'; @@ -14,6 +13,7 @@ import { IForOfState } from '../directives/for-of/for_of.directive'; import { BehaviorSubject, Observable } from 'rxjs'; import { take } from 'rxjs/operators'; import { UIInteractions, wait } from '../test-utils/ui-interactions.spec'; +import { DefaultSortingStrategy } from '../data-operations/sorting-strategy'; import { configureTestSuite } from '../test-utils/configure-suite'; const CSS_CLASS_COMBO = 'igx-combo'; @@ -37,7 +37,6 @@ const CSS_CLASS_INPUTGROUP = 'igx-input-group'; const CSS_CLASS_INPUTGROUP_WRAPPER = 'igx-input-group__wrapper'; const CSS_CLASS_INPUTGROUP_BUNDLE = 'igx-input-group__bundle'; const CSS_CLASS_INPUTGROUP_MAINBUNDLE = 'igx-input-group__bundle-main'; -const CSS_CLASS_INPUTGROUP_BUNDLESUFFIX = 'igx-input-group__bundle-suffix'; const CSS_CLASS_INPUTGROUP_BORDER = 'igx-input-group__border'; const CSS_CLASS_HEADER = 'header-class'; const CSS_CLASS_FOOTER = 'footer-class'; @@ -2201,7 +2200,8 @@ describe('igxCombo', () => { expect(combo.sortingExpressions[0]).toEqual({ fieldName: 'region', dir: SortingDirection.Asc, - ignoreCase: true + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); const listItems = fix.debugElement.queryAll(By.css('.' + CSS_CLASS_DROPDOWNLISTITEM)); const listHeaders = fix.debugElement.queryAll(By.css('.' + CSS_CLASS_HEADERITEM)); @@ -2222,7 +2222,8 @@ describe('igxCombo', () => { expect(combo.sortingExpressions[0]).toEqual({ fieldName: 'region', dir: SortingDirection.Asc, - ignoreCase: true + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); combo.groupKey = ''; diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index 9c371553801..4305db13f5e 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -19,8 +19,8 @@ import { IgxCheckboxComponent, IgxCheckboxModule } from '../checkbox/checkbox.co import { IgxSelectionAPIService } from '../core/selection'; import { cloneArray, CancelableEventArgs } from '../core/utils'; import { IgxStringFilteringOperand, IgxBooleanFilteringOperand } from '../data-operations/filtering-condition'; -import { FilteringLogic } from '../data-operations/filtering-expression.interface'; -import { SortingDirection } from '../data-operations/sorting-expression.interface'; +import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface'; +import { SortingDirection, ISortingExpression } from '../data-operations/sorting-expression.interface'; import { IgxForOfModule, IForOfState } from '../directives/for-of/for_of.directive'; import { IgxRippleModule } from '../directives/ripple/ripple.directive'; import { IgxToggleModule } from '../directives/toggle/toggle.directive'; @@ -35,6 +35,7 @@ import { IgxComboFilterConditionPipe, IgxComboFilteringPipe, IgxComboGroupingPip import { OverlaySettings, AbsoluteScrollStrategy } from '../services'; import { Subscription } from 'rxjs'; import { DeprecateProperty } from '../core/deprecateDecorators'; +import { DefaultSortingStrategy, ISortingStrategy } from '../data-operations/sorting-strategy'; /** Custom strategy to provide the combo with callback on initial positioning */ class ComboConnectedPositionStrategy extends ConnectedPositioningStrategy { @@ -120,23 +121,23 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O /** * @hidden */ - protected _filteringExpressions = []; + protected _filteringExpressions: IFilteringExpression [] = []; /** * @hidden */ - protected _sortingExpressions = []; + protected _sortingExpressions: ISortingExpression [] = []; /** * @hidden */ - protected _groupKey: string | number = ''; + protected _groupKey = ''; /** * @hidden */ - protected _valueKey: string | number = ''; + protected _valueKey = ''; /** * @hidden */ - protected _displayKey: string | number = ''; + protected _displayKey: string; private _addItemTemplate: TemplateRef; private _emptyTemplate: TemplateRef; private _footerTemplate: TemplateRef; @@ -656,12 +657,12 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O get valueKey() { return this._valueKey; } - set valueKey(val: string | number) { + set valueKey(val: string) { this._valueKey = val; } @Input() - set displayKey(val: string | number) { + set displayKey(val: string) { this._displayKey = val; } @@ -695,7 +696,7 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O * ``` */ @Input() - public set groupKey(val: string | number) { + public set groupKey(val: string) { this.clearSorting(this._groupKey); this._groupKey = val; this.sort(this._groupKey); @@ -709,7 +710,7 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O * let currentGroupKey = this.combo.groupKey; * ``` */ - public get groupKey(): string | number { + public get groupKey(): string { return this._groupKey; } @@ -889,30 +890,30 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O /** * @hidden */ - public get filteringExpressions() { + public get filteringExpressions(): IFilteringExpression [] { return this.filterable ? this._filteringExpressions : []; } /** * @hidden */ - public set filteringExpressions(value) { - this._filteringExpressions = cloneArray(value); + public set filteringExpressions(value: IFilteringExpression []) { + this._filteringExpressions = value; this.cdr.markForCheck(); } /** * @hidden */ - public get sortingExpressions() { + public get sortingExpressions(): ISortingExpression [] { return this._sortingExpressions; } /** * @hidden */ - public set sortingExpressions(value) { - this._sortingExpressions = cloneArray(value); + public set sortingExpressions(value: ISortingExpression []) { + this._sortingExpressions = value; this.cdr.markForCheck(); } @@ -1007,7 +1008,7 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O } private checkMatch() { - this.customValueFlag = this.displayKey || this.displayKey === 0 ? + this.customValueFlag = this.displayKey ? !this.filteredData .some((e) => (e[this.displayKey]).toString().toLowerCase() === this.searchValue.trim().toLowerCase()) && this.allowCustomValues : @@ -1033,13 +1034,14 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O /** * @hidden */ - public sort(fieldName: string | number, dir: SortingDirection = SortingDirection.Asc, ignoreCase: boolean = true): void { - if (!fieldName && fieldName !== 0) { + public sort(fieldName: string, dir: SortingDirection = SortingDirection.Asc, ignoreCase: boolean = true, + strategy: ISortingStrategy = DefaultSortingStrategy.instance()): void { + if (!fieldName) { return; } const sortingState = cloneArray(this.sortingExpressions, true); - this.prepare_sorting_expression(sortingState, fieldName, dir, ignoreCase); + this.prepare_sorting_expression(sortingState, fieldName, dir, ignoreCase, strategy); this.sortingExpressions = sortingState; } @@ -1050,7 +1052,7 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O if (!val && val !== 0) { return undefined; } - return this.valueKey === 0 || this.valueKey ? + return this.valueKey ? this.data.filter((e) => e[this.valueKey] === val)[0] : this.data.filter((e) => e === val); } @@ -1058,7 +1060,8 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O /** * @hidden */ - protected prepare_sorting_expression(state, fieldName, dir, ignoreCase) { + protected prepare_sorting_expression(state: ISortingExpression [], fieldName: string, dir: SortingDirection, ignoreCase: boolean, + strategy: ISortingStrategy) { if (dir === SortingDirection.None) { state.splice(state.findIndex((expr) => expr.fieldName === fieldName), 1); @@ -1068,7 +1071,7 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O const expression = state.find((expr) => expr.fieldName === fieldName); if (!expression) { - state.push({ fieldName, dir, ignoreCase }); + state.push({ fieldName, dir, ignoreCase, strategy }); } else { Object.assign(expression, { fieldName, dir, ignoreCase }); } @@ -1203,8 +1206,8 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O [this.valueKey]: newValue, [this.displayKey]: newValue } : newValue; - if (this.groupKey || this.groupKey === 0) { - Object.assign(addedItem, { [this.groupKey]: this.defaultFallbackGroup }); + if (this.groupKey) { + Object.assign(addedItem, { [this.groupKey] : this.defaultFallbackGroup}); } const oldCollection = this.data; const newCollection = [...this.data]; diff --git a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts index 7ee3917aa8c..1ed21b4c27a 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts @@ -55,19 +55,13 @@ export class SimpleFilteringStrategy extends FilteringStrategy { pure: true }) export class IgxComboSortingPipe implements PipeTransform { - constructor( - @Inject(forwardRef(() => IgxComboComponent)) - public combo: IgxComboComponent - ) { } - - public transform(collection: any[], expression: ISortingExpression | ISortingExpression[]) { - const state = { expressions: [] }; - state.expressions = this.combo.sortingExpressions; + constructor() { } - if (!state.expressions.length) { + public transform(collection: any[], expressions: ISortingExpression []) { + if (!expressions.length) { return collection; } - const result = DataUtil.sort(cloneArray(collection), state); + const result = DataUtil.sort(cloneArray(collection), expressions); return result; } } diff --git a/projects/igniteui-angular/src/lib/data-operations/data-container.spec.ts b/projects/igniteui-angular/src/lib/data-operations/data-container.spec.ts deleted file mode 100644 index ad90dd36c0b..00000000000 --- a/projects/igniteui-angular/src/lib/data-operations/data-container.spec.ts +++ /dev/null @@ -1,190 +0,0 @@ -import { Component, ViewChild } from '@angular/core'; -import { - TestBed -} from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; -import { By } from '@angular/platform-browser'; -import { DataGenerator} from './test-util/data-generator'; - -import {DataAccess, DataContainer} from './data-container'; -import {IDataState} from './data-state.interface'; -import {DataUtil} from './data-util'; -import { IFilteringState } from './filtering-state.interface'; -import {IPagingState, PagingError} from './paging-state.interface'; -import {ISortingExpression, SortingDirection} from './sorting-expression.interface'; -import {ISortingState} from './sorting-state.interface'; -import { IgxNumberFilteringOperand, FilteringExpressionsTree, FilteringLogic } from '../../public_api'; - -describe('DataContainer', () => { - let dataGenerator: DataGenerator; - let data: object[]; - let dc: DataContainer; - beforeEach(() => { - dataGenerator = new DataGenerator(); - data = dataGenerator.data; - dc = new DataContainer(data); - }); - it('tests process', () => { - // test filtering - dc.state = { - filtering: { - expressionsTree: new FilteringExpressionsTree(FilteringLogic.And) - } - }; - dc.state.filtering.expressionsTree.filteringOperands = [ - { - condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), - fieldName: 'number', - searchVal: 1 - } - ]; - - dc.process(); - expect(dataGenerator.getValuesForColumn(dc.transformedData, 'number')) - .toEqual([1, 2, 3, 4]); - expect(dataGenerator.getValuesForColumn(dc.data, 'number')) - .toEqual([0, 1, 2, 3, 4]); - // apply sorting without removing filtering - dc.state.sorting = { - expressions: [ - { - dir: SortingDirection.Desc, - fieldName: 'number' - } - ] - }; - dc.process(); - expect(dataGenerator.getValuesForColumn(dc.transformedData, 'number')) - .toEqual([4, 3, 2, 1]); - expect(dataGenerator.getValuesForColumn(dc.data, 'number')) - .toEqual([0, 1, 2, 3, 4]); - // apply paging(+filtering and sorting) - dc.state.paging = { - index: 1, - recordsPerPage: 3 - }; - dc.process(); - expect(dataGenerator.getValuesForColumn(dc.transformedData, 'number')) - .toEqual([1]); - expect(dc.state.paging.metadata.countPages) - .toEqual(2); - }); - it ('tests sort', () => { - // apply sorting without removing filtering - let res; - const sortingState: ISortingState = { - expressions: [ - { - dir: SortingDirection.Desc, - fieldName: 'number' - } - ] - }; - res = dc.process({sorting: sortingState}); - expect(dataGenerator.getValuesForColumn(dc.transformedData, 'number')) - .toEqual([4, 3, 2, 1, 0]); - expect(dc.state.sorting) - .toEqual(sortingState); - }); - it ('tests filter', () => { - // apply sorting without removing filtering - let res; - const filteringState: IFilteringState = { - expressionsTree: new FilteringExpressionsTree(FilteringLogic.And) - }; - filteringState.expressionsTree.filteringOperands = [ - { - condition: IgxNumberFilteringOperand.instance().condition('doesNotEqual'), - fieldName: 'number', - searchVal: 4 - } - ]; - - res = dc.process({filtering: filteringState}); - expect(dataGenerator.getValuesForColumn(dc.transformedData, 'number')) - .toEqual([0, 1, 2, 3]); - expect(dc.state.filtering) - .toEqual(filteringState); - }); - it ('tests page', () => { - // apply sorting without removing filtering - const pagingState: IPagingState = { - index: 0, - recordsPerPage: 4 - }; - dc.process({paging: pagingState}); - expect(dataGenerator.getValuesForColumn(dc.transformedData, 'number')) - .toEqual([0, 1, 2, 3]); - expect(dc.state.paging.metadata.countPages) - .toEqual(2); - expect(dc.state.paging.metadata.error) - .toEqual(PagingError.None); - pagingState.index = 1; - dc.process({paging: pagingState}); - expect(dataGenerator.getValuesForColumn(dc.transformedData, 'number')) - .toEqual([4]); - expect(dc.state.paging.metadata.countPages) - .toEqual(2); - expect(dc.state.paging.metadata.error) - .toEqual(PagingError.None); - }); - - // test CRUD operations - it('tests `addRecord`', () => { - let record = { - number: -1 - }; - dc.addRecord(record); - expect(dc.data).toBeTruthy(); - expect(dc.data.length).toBe(6); - expect(dc.data[5]).toEqual(record); - // add at specific position - record = {number: -2}; - dc.addRecord(record, 0); - expect(dc.data.length).toBe(7); - expect(dc.data[0]).toEqual(record); - }); - it ('tests `deleteRecord`', () => { - const record = data[0]; - // remove first element - const res = dc.deleteRecord(record); - expect(res).toBeTruthy(); - expect(dc.data.length).toBe(4); - expect(dataGenerator.getValuesForColumn(dc.data, 'number')) - .toEqual([1, 2, 3, 4]); - }); - it ('tests `deleteRecordByIndex`', () => { - // remove first element - const res = dc.deleteRecordByIndex(0); - expect(res).toBeTruthy(); - expect(dc.data.length).toBe(4); - expect(dataGenerator.getValuesForColumn(dc.data, 'number')) - .toEqual([1, 2, 3, 4]); - }); - it ('tests `updateRecordByIndex`', () => { - const recordCopy = Object.assign({}, data[0]); - const res = dc.updateRecordByIndex(0, {number: -1}); - (recordCopy as { number: number }).number = -1; - expect(dc.data[0]).toEqual(recordCopy); - }); - it ('tests `getRecordInfoByKeyValue`', () => { - let recordInfo = dc.getRecordInfoByKeyValue('number', 0); - expect(recordInfo.index === 0 && recordInfo.record === dc.data[0]) - .toBeTruthy('tests getRecordInfoByKeyValue(\'number\', 0)'); - recordInfo = dc.getRecordInfoByKeyValue('number', -1); - expect(recordInfo.index === -1 && recordInfo.record === undefined) - .toBeTruthy('tests getRecordInfoByKeyValue(\'number\', -1)'); - }); - it ('tests `getIndexOfRecord`', () => { - let index = dc.getIndexOfRecord(data[1]); - expect(index).toBe(1, 'original data'); - index = dc.getIndexOfRecord(data[0], DataAccess.TransformedData); - expect(index).toBe(0, 'transformed data'); - }); - it ('tests `getRecordByIndex`', () => { - let rec = dc.getRecordByIndex(0); - expect(rec).toBe(data[0], 'original data'); - rec = dc.getRecordByIndex(0, DataAccess.TransformedData); - expect(rec).toBe(dc.transformedData[0], 'transformed data'); - }); -}); diff --git a/projects/igniteui-angular/src/lib/data-operations/data-container.ts b/projects/igniteui-angular/src/lib/data-operations/data-container.ts deleted file mode 100644 index 1e48af1f54b..00000000000 --- a/projects/igniteui-angular/src/lib/data-operations/data-container.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { IDataState } from './data-state.interface'; -import { DataUtil } from './data-util'; -import { FilteringLogic, IFilteringExpression } from './filtering-expression.interface'; -import { IFilteringState } from './filtering-state.interface'; -import { FilteringStrategy, IFilteringStrategy } from './filtering-strategy'; -import { IPagingState, PagingError } from './paging-state.interface'; -import { IRecordInfo } from './record-info.interface'; -import { ISortingExpression, SortingDirection } from './sorting-expression.interface'; -import { ISortingState } from './sorting-state.interface'; -import { ISortingStrategy, SortingStrategy } from './sorting-strategy'; - -/** - * @hidden - */ -export enum DataAccess { - OriginalData, - TransformedData -} - -/** - * @hidden - */ -export class DataContainer { - public data: any[]; - /** - * processed data - */ - public transformedData: any[]; - public state: IDataState = { - }; - constructor(data: any[] = []) { - this.data = data; - this.transformedData = data; - } - public process(state?: IDataState): DataContainer { - if (state) { - this.state = state; - } - this.transformedData = this.data; - // apply data operations - this.transformedData = DataUtil.process(this.data, this.state); - return this; - } - // CRUD operations - // access data records - public getIndexOfRecord(record: object, dataAccess: DataAccess = DataAccess.OriginalData): number { - const data = this.accessData(dataAccess); - return data.indexOf(record); - } - public getRecordByIndex(index: number, dataAccess: DataAccess = DataAccess.OriginalData): object { - const data = this.accessData(dataAccess); - return data[index]; - } - public getRecordInfoByKeyValue(fieldName: string, - value: any, - dataAccess: DataAccess = DataAccess.OriginalData): IRecordInfo { - const data = this.accessData(dataAccess); - const len = data.length; - const res: IRecordInfo = {index: -1, record: undefined}; - let i; - for (i = 0; i < len; i++) { - if (data[i][fieldName] === value) { - res.index = i; - res.record = data[i]; - break; - } - } - return res; - } - public addRecord(record: object, at?: number): void { - const data = this.accessData(DataAccess.OriginalData); - if (at === null || at === undefined) { - data.push(record); - } else { - data.splice(at, 0, record); - } - } - public deleteRecord(record: object): boolean { - const index: number = this.getIndexOfRecord(record, DataAccess.OriginalData); - return this.deleteRecordByIndex(index); - } - public deleteRecordByIndex(index: number): boolean { - const data = this.accessData(DataAccess.OriginalData); - return data.splice(index, 1).length === 1; - } - public updateRecordByIndex(index: number, newProperties: object): object { - const dataAccess: DataAccess = DataAccess.OriginalData; - const foundRec = this.getRecordByIndex(index, dataAccess); - if (!foundRec) { - return undefined; - } - return Object.assign(foundRec, newProperties); - } - protected accessData(dataAccess: DataAccess) { - let res; - switch (dataAccess) { - case DataAccess.OriginalData: - res = this.data; - break; - case DataAccess.TransformedData: - res = this.transformedData; - break; - } - return res; - } -} diff --git a/projects/igniteui-angular/src/lib/data-operations/data-state.interface.ts b/projects/igniteui-angular/src/lib/data-operations/data-state.interface.ts deleted file mode 100644 index 06dc0b927ed..00000000000 --- a/projects/igniteui-angular/src/lib/data-operations/data-state.interface.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { IFilteringState } from './filtering-state.interface'; -import { IPagingState } from './paging-state.interface'; -import { ISortingState } from './sorting-state.interface'; - -/** - * @hidden - */ -export interface IDataState { - filtering?: IFilteringState; - sorting?: ISortingState; - paging?: IPagingState; -} diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts index d2bb2d42ce0..02d32089e2b 100644 --- a/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts +++ b/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts @@ -1,23 +1,25 @@ -import { Component, ViewChild } from '@angular/core'; import { - async, - TestBed + async } from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; -import { By } from '@angular/platform-browser'; import { DataGenerator } from './test-util/data-generator'; -import { - DataType, - DataUtil, - FilteringLogic, FilteringStrategy, IDataState, IFilteringExpressionsTree, - IFilteringState, IGroupByRecord, IGroupingState, - IPagingState, ISortingExpression, ISortingState, PagingError, SortingDirection, - IgxStringFilteringOperand, IgxNumberFilteringOperand, - IgxDateFilteringOperand, IgxBooleanFilteringOperand, FilteringExpressionsTree -} from '../../public_api'; -import { IGroupByResult } from './sorting-strategy'; +import { DefaultSortingStrategy } from './sorting-strategy'; import { cloneArray } from '../core/utils'; +import { ISortingExpression, SortingDirection } from './sorting-expression.interface'; +import { DataUtil } from './data-util'; +import { IGroupByResult } from './grouping-strategy'; +import { IGroupingState } from './groupby-state.interface'; +import { IGroupByRecord } from './groupby-record.interface'; +import { FilteringStrategy } from './filtering-strategy'; +import { IFilteringExpressionsTree, FilteringExpressionsTree } from './filtering-expressions-tree'; +import { IFilteringState } from './filtering-state.interface'; +import { FilteringLogic } from './filtering-expression.interface'; +import { IgxNumberFilteringOperand, + IgxStringFilteringOperand, + IgxDateFilteringOperand, + IgxBooleanFilteringOperand } from './filtering-condition'; +import { IPagingState, PagingError } from './paging-state.interface'; + /* Test sorting */ function testSort() { let data: any[] = []; @@ -30,18 +32,22 @@ function testSort() { it('sorts descending column \'number\'', () => { const se: ISortingExpression = { dir: SortingDirection.Desc, - fieldName: 'number' + fieldName: 'number', + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }; - const res = DataUtil.sort(data, { expressions: [se] }); + const res = DataUtil.sort(data, [se]); expect(dataGenerator.getValuesForColumn(res, 'number')) .toEqual(dataGenerator.generateArray(4, 0)); }); it('sorts ascending column \'boolean\'', () => { const se: ISortingExpression = { dir: SortingDirection.Asc, - fieldName: 'boolean' + fieldName: 'boolean', + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }; - const res = DataUtil.sort(data, { expressions: [se] }); + const res = DataUtil.sort(data, [se]); expect(dataGenerator.getValuesForColumn(res, 'boolean')) .toEqual([false, false, false, true, true]); }); @@ -49,13 +55,17 @@ function testSort() { it('sorts descending column \'boolean\', sorts \'date\' ascending', () => { const se0: ISortingExpression = { dir: SortingDirection.Desc, - fieldName: 'boolean' + fieldName: 'boolean', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }; const se1: ISortingExpression = { dir: SortingDirection.Asc, - fieldName: 'date' + fieldName: 'date', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }; - const res = DataUtil.sort(data, { expressions: [se0, se1] }); + const res = DataUtil.sort(data, [se0, se1]); expect(dataGenerator.getValuesForColumn(res, 'number')) .toEqual([1, 3, 0, 2, 4]); }); @@ -63,17 +73,15 @@ function testSort() { data[4].string = data[4].string.toUpperCase(); const se0: ISortingExpression = { dir: SortingDirection.Desc, - fieldName: 'string' + fieldName: 'string', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }; - let res = DataUtil.sort(data, { - expressions: [se0] - }); + let res = DataUtil.sort(data, [se0]); expect(dataGenerator.getValuesForColumn(res, 'number')) .toEqual([3, 2, 1, 0, 4], 'expressionDefaults.ignoreCase = false'); se0.ignoreCase = true; - res = DataUtil.sort(data, { - expressions: [se0] - }); + res = DataUtil.sort(data, [se0]); expect(dataGenerator.getValuesForColumn(res, 'number')) .toEqual(dataGenerator.generateArray(4, 0)); }); @@ -90,7 +98,9 @@ function testGroupBy() { data = dataGenerator.data; expr = { dir: SortingDirection.Asc, - fieldName: 'boolean' + fieldName: 'boolean', + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }; state = { expressions: [expr], @@ -101,7 +111,7 @@ function testGroupBy() { describe('Test groupBy', () => { it('groups by descending column "boolean", expanded', () => { // sort - let res = DataUtil.sort(data, { expressions: [expr] }); + let res = DataUtil.sort(data, [expr]); // first group pipe const gres = DataUtil.group(res, state); // second group pipe @@ -129,7 +139,7 @@ function testGroupBy() { it('groups by descending column "boolean", collapsed', () => { state.defaultExpanded = false; // sort - const sorted = DataUtil.sort(data, { expressions: [expr] }); + const sorted = DataUtil.sort(data, [expr]); // first group pipe const gres = DataUtil.group(sorted, state); // second group pipe @@ -153,7 +163,7 @@ function testGroupBy() { hierarchy: [{ fieldName: 'boolean', value: false }] }); // sort - const sorted = DataUtil.sort(data, { expressions: [expr] }); + const sorted = DataUtil.sort(data, [expr]); // first group pipe const gres = DataUtil.group(sorted, state); // second group pipe @@ -174,11 +184,13 @@ function testGroupBy() { it('two level groups', () => { const expr2 = { fieldName: 'string', - dir: SortingDirection.Asc + dir: SortingDirection.Asc, + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }; state.expressions.push(expr2); // sort - const sorted = DataUtil.sort(data, { expressions: [expr, expr2] }); + const sorted = DataUtil.sort(data, [expr, expr2]); // first group pipe const gres = DataUtil.group(sorted, state); // second group pipe @@ -205,7 +217,7 @@ function testGroupBy() { it('groups by descending column "boolean", paging', () => { // sort - const sorted = DataUtil.sort(data, { expressions: [expr] }); + const sorted = DataUtil.sort(data, [expr]); // first group pipe const grouped = DataUtil.group(sorted, state); // page @@ -413,52 +425,10 @@ function testPage() { }); }); } -function testProcess() { - describe('test process', () => { - it('calls process as applies filtering, sorting, paging', () => { - let metadata; - const filteringState: IFilteringState = { - expressionsTree: new FilteringExpressionsTree(FilteringLogic.And) - }; - filteringState.expressionsTree.filteringOperands = [ - { - condition: IgxNumberFilteringOperand.instance().condition('greaterThan'), - fieldName: 'number', - searchVal: 1 - } - ]; - const state: IDataState = { - filtering: filteringState, - paging: { - index: 1, - recordsPerPage: 2 - }, - sorting: { - expressions: [ - { - dir: SortingDirection.Desc, - fieldName: 'number' - } - ] - } - }; - const dataGenerator: DataGenerator = new DataGenerator(); - const data: object[] = dataGenerator.data; - const result = DataUtil.process(data, state); - expect(dataGenerator.getValuesForColumn(result, 'number')) - .toEqual([2]); - metadata = state.paging.metadata; - expect(metadata.countPages === 2 && metadata.error === PagingError.None) - .toBeTruthy(); - }); - }); -} /* //Test paging */ describe('DataUtil', () => { testSort(); testGroupBy(); testFilter(); testPage(); - // test process - testProcess(); }); diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.ts index 58a2616dc0f..47de284ccb7 100644 --- a/projects/igniteui-angular/src/lib/data-operations/data-util.ts +++ b/projects/igniteui-angular/src/lib/data-operations/data-util.ts @@ -1,14 +1,18 @@ -import { filteringStateDefaults, IFilteringState } from './filtering-state.interface'; -import { ISortingState, SortingStateDefaults } from './sorting-state.interface'; -import { IGroupByResult, TreeGridSortingStrategy } from './sorting-strategy'; +import { IFilteringState } from './filtering-state.interface'; + +import { IgxSorting, IgxDataRecordSorting } from './sorting-strategy'; +import { IGroupByResult, IgxGrouping } from './grouping-strategy'; + import { IPagingState, PagingError } from './paging-state.interface'; -import { IDataState } from './data-state.interface'; + import { IGroupByExpandState, IGroupByKey } from './groupby-expand-state.interface'; import { IGroupByRecord } from './groupby-record.interface'; import { IGroupingState } from './groupby-state.interface'; -import { Transaction, TransactionType, HierarchicalTransaction, IgxHierarchicalTransactionService, HierarchicalState } from '../services'; -import { mergeObjects, cloneValue } from '../core/utils'; -import { ITreeGridRecord } from '../grids/tree-grid/tree-grid.interfaces'; +import { ISortingExpression } from './sorting-expression.interface'; +import { FilteringStrategy } from './filtering-strategy'; +import { ITreeGridRecord } from '../grids/tree-grid'; +import { Transaction, TransactionType, HierarchicalTransaction } from '../services'; +import { cloneValue, mergeObjects } from '../core/utils'; /** * @hidden @@ -24,44 +28,25 @@ export enum DataType { * @hidden */ export class DataUtil { - public static mergeDefaultProperties(target: object, defaults: object) { - if (!defaults) { - return target; - } - if (!target) { - target = Object.assign({}, defaults); - return target; - } - Object - .keys(defaults) - .forEach((key) => { - if (target[key] === undefined && defaults[key] !== undefined) { - target[key] = defaults[key]; - } - }); - return target; - } - public static sort(data: T[], state: ISortingState): T[] { - // set defaults - DataUtil.mergeDefaultProperties(state, SortingStateDefaults); - // apply default settings for each sorting expression(if not set) - return state.strategy.sort(data, state.expressions); + public static sort(data: T[], expressions: ISortingExpression [], sorting: IgxSorting = new IgxSorting()): T[] { + return sorting.sort(data, expressions); } - public static hierarchicalSort(hierarchicalData: ITreeGridRecord[], state: ISortingState, parent: ITreeGridRecord): ITreeGridRecord[] { - state.strategy = new TreeGridSortingStrategy(); + public static treeGridSort(hierarchicalData: ITreeGridRecord[], + expressions: ISortingExpression [], + parent?: ITreeGridRecord): ITreeGridRecord[] { let res: ITreeGridRecord[] = []; hierarchicalData.forEach((hr: ITreeGridRecord) => { const rec: ITreeGridRecord = DataUtil.cloneTreeGridRecord(hr); rec.parent = parent; if (rec.children) { - rec.children = DataUtil.hierarchicalSort(rec.children, state, rec); + rec.children = DataUtil.treeGridSort(rec.children, expressions, rec); } res.push(rec); }); - res = DataUtil.sort(res, state); + res = DataUtil.sort(res, expressions, new IgxDataRecordSorting()); return res; } @@ -80,13 +65,10 @@ export class DataUtil { } public static group(data: T[], state: IGroupingState): IGroupByResult { - // set defaults - DataUtil.mergeDefaultProperties(state, SortingStateDefaults); - // apply default settings for each grouping expression(if not set) - return state.strategy.groupBy(data, state.expressions); + const grouping = new IgxGrouping(); + return grouping.groupBy(data, state.expressions); } public static restoreGroups(groupData: IGroupByResult, state: IGroupingState, groupsRecords: any[] = []): any[] { - DataUtil.mergeDefaultProperties(state, SortingStateDefaults); if (state.expressions.length === 0) { return groupData.data; } @@ -168,29 +150,11 @@ export class DataUtil { return data.slice(index * recordsPerPage, (index + 1) * recordsPerPage); } public static filter(data: T[], state: IFilteringState): T[] { - // set defaults - DataUtil.mergeDefaultProperties(state, filteringStateDefaults); if (!state.strategy) { - return data; + state.strategy = new FilteringStrategy(); } return state.strategy.filter(data, state.expressionsTree); } - public static process(data: T[], state: IDataState): T[] { - if (!state) { - return data; - } - if (state.filtering) { - data = DataUtil.filter(data, state.filtering); - } - if (state.sorting) { - data = DataUtil.sort(data, state.sorting); - } - if (state.paging) { - data = DataUtil.page(data, state.paging); - } - return data; - } - public static getHierarchy(gRow: IGroupByRecord): Array { const hierarchy: Array = []; if (gRow !== undefined && gRow.expression) { diff --git a/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts index ce5ba61d766..dc6b9191a98 100644 --- a/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts @@ -1,7 +1,4 @@ -import { DataUtil } from './data-util'; -import { IFilteringOperation } from './filtering-condition'; import { FilteringLogic, IFilteringExpression } from './filtering-expression.interface'; -import { IFilteringState } from './filtering-state.interface'; import { FilteringExpressionsTree, IFilteringExpressionsTree } from './filtering-expressions-tree'; export interface IFilteringStrategy { diff --git a/projects/igniteui-angular/src/lib/data-operations/groupby-state.interface.ts b/projects/igniteui-angular/src/lib/data-operations/groupby-state.interface.ts index b917635e70b..7259eb985ce 100644 --- a/projects/igniteui-angular/src/lib/data-operations/groupby-state.interface.ts +++ b/projects/igniteui-angular/src/lib/data-operations/groupby-state.interface.ts @@ -1,10 +1,10 @@ import { IGroupByExpandState } from './groupby-expand-state.interface'; -import { ISortingExpression, SortingDirection } from './sorting-expression.interface'; -import { ISortingStrategy, SortingStrategy} from './sorting-strategy'; +import { ISortingExpression } from './sorting-expression.interface'; +import { ISortingStrategy} from './sorting-strategy'; +import { IGroupingExpression } from './grouping-expression.interface'; export interface IGroupingState { - expressions: ISortingExpression[]; + expressions: IGroupingExpression[]; expansion: IGroupByExpandState[]; defaultExpanded: boolean; - strategy?: ISortingStrategy; } diff --git a/projects/igniteui-angular/src/lib/data-operations/groupby-strategy.spec.ts b/projects/igniteui-angular/src/lib/data-operations/groupby-strategy.spec.ts new file mode 100644 index 00000000000..d8213ad6cc7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/data-operations/groupby-strategy.spec.ts @@ -0,0 +1,39 @@ +import { DataGenerator } from './test-util/data-generator'; +import { DefaultSortingStrategy } from './sorting-strategy'; +import { SortingDirection } from './sorting-expression.interface'; +import { IGroupByRecord } from './groupby-record.interface'; +import { IgxGrouping } from './grouping-strategy'; + +describe('Unit testing GroupingStrategy', () => { + let dataGenerator: DataGenerator; + let data: object[]; + const grouping = new IgxGrouping(); + beforeEach(() => { + dataGenerator = new DataGenerator(); + data = dataGenerator.data; + }); + + it('should group by a field', () => { + const expr = [{ + dir: SortingDirection.Asc, + fieldName: 'boolean', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() + }]; + const res = grouping.sort(data, expr); + const gres = grouping.groupBy(res, expr); + expect(dataGenerator.getValuesForColumn(gres.data, 'boolean')) + .toEqual([false, false, false, true, true]); + const group1: IGroupByRecord = gres.metadata[0]; + const group2: IGroupByRecord = gres.metadata[3]; + expect(gres.metadata[1]).toEqual(group1); + expect(gres.metadata[2]).toEqual(group1); + expect(gres.metadata[4]).toEqual(group2); + expect(group1.level).toEqual(0); + expect(group2.level).toEqual(0); + expect(group1.records).toEqual(gres.data.slice(0, 3)); + expect(group2.records).toEqual(gres.data.slice(3, 5)); + expect(group1.value).toEqual(false); + expect(group2.value).toEqual(true); + }); +}); diff --git a/projects/igniteui-angular/src/lib/data-operations/grouping-expression.interface.ts b/projects/igniteui-angular/src/lib/data-operations/grouping-expression.interface.ts new file mode 100644 index 00000000000..e2463a81c46 --- /dev/null +++ b/projects/igniteui-angular/src/lib/data-operations/grouping-expression.interface.ts @@ -0,0 +1,5 @@ +import { ISortingExpression } from './sorting-expression.interface'; + +export interface IGroupingExpression extends ISortingExpression { + groupingComparer?: (a: any, b: any) => number; +} diff --git a/projects/igniteui-angular/src/lib/data-operations/grouping-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/grouping-strategy.ts new file mode 100644 index 00000000000..b00dadd2609 --- /dev/null +++ b/projects/igniteui-angular/src/lib/data-operations/grouping-strategy.ts @@ -0,0 +1,20 @@ +import { IGroupByRecord } from './groupby-record.interface'; +import { ISortingExpression } from './sorting-expression.interface'; +import { IgxSorting } from './sorting-strategy'; + +export interface IGroupByResult { + data: any[]; + metadata: IGroupByRecord[]; +} + +export class IgxGrouping extends IgxSorting { + public groupBy(data: any[], expressions: ISortingExpression[]): IGroupByResult { + const metadata: IGroupByRecord[] = []; + const grouping = this.groupDataRecursive(data, expressions, 0, null, metadata); + return { + data: grouping, + metadata: metadata + }; + } +} + diff --git a/projects/igniteui-angular/src/lib/data-operations/sorting-expression.interface.ts b/projects/igniteui-angular/src/lib/data-operations/sorting-expression.interface.ts index 58d9b7f0543..24edd7f2202 100644 --- a/projects/igniteui-angular/src/lib/data-operations/sorting-expression.interface.ts +++ b/projects/igniteui-angular/src/lib/data-operations/sorting-expression.interface.ts @@ -12,6 +12,6 @@ export enum SortingDirection { export interface ISortingExpression { fieldName: string; dir: SortingDirection; - ignoreCase?: boolean; - strategy?: ISortingStrategy; + ignoreCase: boolean; + strategy: ISortingStrategy; } diff --git a/projects/igniteui-angular/src/lib/data-operations/sorting-state.interface.ts b/projects/igniteui-angular/src/lib/data-operations/sorting-state.interface.ts deleted file mode 100644 index f96591c812e..00000000000 --- a/projects/igniteui-angular/src/lib/data-operations/sorting-state.interface.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ISortingExpression, SortingDirection } from './sorting-expression.interface'; -import {ISortingStrategy, SortingStrategy} from './sorting-strategy'; - -// tslint:disable-next-line:variable-name -export const SortingStateDefaults = { - strategy: new SortingStrategy() -}; - -export interface ISortingState { - expressions: ISortingExpression[]; - strategy?: ISortingStrategy; -} diff --git a/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.spec.ts b/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.spec.ts index d7c032fdbd4..83da8249baf 100644 --- a/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.spec.ts +++ b/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.spec.ts @@ -1,36 +1,34 @@ -import { Component, ViewChild } from '@angular/core'; -import { - async, - TestBed -} from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; -import { By } from '@angular/platform-browser'; import { DataGenerator } from './test-util/data-generator'; - -import { IGroupByRecord, SortingDirection, SortingStrategy } from '../../public_api'; +import { IgxSorting, DefaultSortingStrategy } from './sorting-strategy'; +import { SortingDirection } from './sorting-expression.interface'; +import { IGroupByRecord } from './groupby-record.interface'; describe('Unit testing SortingStrategy', () => { let dataGenerator: DataGenerator; let data: object[]; - let strategy: SortingStrategy; + const sorting = new IgxSorting(); beforeEach(() => { dataGenerator = new DataGenerator(); data = dataGenerator.data; - strategy = new SortingStrategy(); }); it('tests `sort`', () => { - const res = strategy.sort(data, [ + const res = sorting.sort(data, [ { dir: SortingDirection.Asc, - fieldName: 'boolean' + fieldName: 'boolean', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }, { dir: SortingDirection.Desc, - fieldName: 'number' + fieldName: 'number', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }]); expect(dataGenerator.getValuesForColumn(res, 'number')) .toEqual([4, 2, 0, 3, 1]); }); it('tests `compareObjects`', () => { + const strategy = DefaultSortingStrategy.instance(); expect(strategy.compareValues(1, 0) === 1 && strategy.compareValues(true, false) === 1 && strategy.compareValues('bc', 'adfc') === 1) @@ -46,35 +44,15 @@ describe('Unit testing SortingStrategy', () => { .toBeTruthy('Comare equal variables'); }); it('tests default settings', () => { - strategy = new SortingStrategy(); (data[4] as { string: string }).string = 'ROW'; - const res = strategy.sort(data, [{ + const res = sorting.sort(data, [{ dir: SortingDirection.Asc, - fieldName: 'string' + fieldName: 'string', + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }]); expect(dataGenerator.getValuesForColumn(res, 'number')) .toEqual([4, 0, 1, 2, 3]); }); - it('tests `groupBy`', () => { - strategy = new SortingStrategy(); - const expr = [{ - dir: SortingDirection.Asc, - fieldName: 'boolean' - }]; - const res = strategy.sort(data, expr); - const gres = strategy.groupBy(res, expr); - expect(dataGenerator.getValuesForColumn(gres.data, 'boolean')) - .toEqual([false, false, false, true, true]); - const group1: IGroupByRecord = gres.metadata[0]; - const group2: IGroupByRecord = gres.metadata[3]; - expect(gres.metadata[1]).toEqual(group1); - expect(gres.metadata[2]).toEqual(group1); - expect(gres.metadata[4]).toEqual(group2); - expect(group1.level).toEqual(0); - expect(group2.level).toEqual(0); - expect(group1.records).toEqual(gres.data.slice(0, 3)); - expect(group2.records).toEqual(gres.data.slice(3, 5)); - expect(group1.value).toEqual(false); - expect(group2.value).toEqual(true); - }); + }); diff --git a/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts index b112470b7e3..d6ac86f6ea5 100644 --- a/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts @@ -1,30 +1,38 @@ import { cloneArray } from '../core/utils'; import { IGroupByRecord } from './groupby-record.interface'; import { ISortingExpression, SortingDirection } from './sorting-expression.interface'; +import { IGroupingExpression } from './grouping-expression.interface'; export interface ISortingStrategy { - sort: (data: any[], expressions: ISortingExpression[]) => any[]; - groupBy: (data: any[], expressions: ISortingExpression[]) => IGroupByResult; - compareValues: (a: any, b: any) => number; + sort: (data: any[], + fieldName: string, + dir: SortingDirection, + ignoreCase: boolean, + valueResolver: (obj: any, key: string) => any) => any[]; } -export interface IGroupByResult { - data: any[]; - metadata: IGroupByRecord[]; -} +export class DefaultSortingStrategy implements ISortingStrategy { + private static _instance: DefaultSortingStrategy = null; -export class SortingStrategy implements ISortingStrategy { - public sort(data: any[], expressions: ISortingExpression[]): any[] { - return this.sortDataRecursive(data, expressions); + protected constructor() {} + + public static instance(): DefaultSortingStrategy { + return this._instance || (this._instance = new this()); } - public groupBy(data: any[], expressions: ISortingExpression[]): IGroupByResult { - const metadata: IGroupByRecord[] = []; - const grouping = this.groupDataRecursive(data, expressions, 0, null, metadata); - return { - data: grouping, - metadata: metadata + + public sort(data: any[], + fieldName: string, + dir: SortingDirection, + ignoreCase: boolean, + valueResolver: (obj: any, key: string) => any) { + const key = fieldName; + const reverse = (dir === SortingDirection.Desc ? -1 : 1); + const cmpFunc = (obj1, obj2) => { + return this.compareObjects(obj1, obj2, key, reverse, ignoreCase, valueResolver); }; + return this.arraySort(data, cmpFunc); } + public compareValues(a: any, b: any) { const an = (a === null || a === undefined); const bn = (b === null || b === undefined); @@ -38,26 +46,35 @@ export class SortingStrategy implements ISortingStrategy { } return a > b ? 1 : a < b ? -1 : 0; } - protected compareObjects(obj1: object, obj2: object, key: string, reverse: number, ignoreCase: boolean, strategy: ISortingStrategy) { - let a = this.getFieldValue(obj1, key); - let b = this.getFieldValue(obj2, key); + + protected compareObjects(obj1: object, + obj2: object, + key: string, + reverse: number, + ignoreCase: boolean, + valueResolver: (obj: any, key: string) => any) { + let a = valueResolver(obj1, key); + let b = valueResolver(obj2, key); if (ignoreCase) { a = a && a.toLowerCase ? a.toLowerCase() : a; b = b && b.toLowerCase ? b.toLowerCase() : b; } - if (strategy) { - return reverse * strategy.compareValues(a, b); - } else { - return reverse * this.compareValues(a, b); - } + return reverse * this.compareValues(a, b); } - protected getFieldValue(obj: any, key: string): any { - return obj[key]; - } - protected arraySort(data: T[], compareFn?): T[] { + + protected arraySort(data: any[], compareFn?): any[] { return data.sort(compareFn); } - private groupedRecordsByExpression(data: T[], index: number, expression: ISortingExpression): T[] { +} + +export class IgxSorting { + public sort(data: any[], expressions: ISortingExpression[]): any[] { + return this.sortDataRecursive(data, expressions); + } + + private groupedRecordsByExpression(data: any[], + index: number, + expression: IGroupingExpression): any[] { let i; let groupval; const res = []; @@ -66,8 +83,9 @@ export class SortingStrategy implements ISortingStrategy { res.push(data[index]); groupval = this.getFieldValue(data[index], key); index++; + const comparer = expression.groupingComparer || DefaultSortingStrategy.instance().compareValues; for (i = index; i < len; i++) { - if (this.compareValues(this.getFieldValue(data[i], key), groupval) === 0) { + if (comparer(this.getFieldValue(data[i], key), groupval) === 0) { res.push(data[i]); } else { break; @@ -75,28 +93,12 @@ export class SortingStrategy implements ISortingStrategy { } return res; } - private sortByFieldExpression(data: T[], expression: ISortingExpression): T[] { - - const key = expression.fieldName; - const firstRow = data[0]; - const firstRowValue = firstRow ? this.getFieldValue(firstRow, key) : undefined; - const ignoreCase = expression.ignoreCase ? - firstRow && (typeof firstRowValue === 'string' || - firstRowValue === null || - firstRowValue === undefined) : - false; - const reverse = (expression.dir === SortingDirection.Desc ? -1 : 1); - const cmpFunc = (obj1, obj2) => { - return this.compareObjects(obj1, obj2, key, reverse, ignoreCase, expression.strategy); - }; - return this.arraySort(data, cmpFunc); - } private sortDataRecursive(data: T[], expressions: ISortingExpression[], expressionIndex: number = 0): T[] { let i; let j; - let expr; + let expr: ISortingExpression; let gbData; let gbDataLen; const exprsLen = expressions.length; @@ -106,7 +108,7 @@ export class SortingStrategy implements ISortingStrategy { return data; } expr = expressions[expressionIndex]; - data = this.sortByFieldExpression(data, expr); + data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue); if (expressionIndex === exprsLen - 1) { return data; } @@ -124,7 +126,7 @@ export class SortingStrategy implements ISortingStrategy { } return data; } - private groupDataRecursive(data: T[], expressions: ISortingExpression[], level: number, + protected groupDataRecursive(data: T[], expressions: ISortingExpression[], level: number, parent: IGroupByRecord, metadata: IGroupByRecord[]): T[] { let i = 0; let result = []; @@ -149,10 +151,13 @@ export class SortingStrategy implements ISortingStrategy { } return result; } + protected getFieldValue(obj: any, key: string): any { + return obj[key]; + } } -export class TreeGridSortingStrategy extends SortingStrategy { +export class IgxDataRecordSorting extends IgxSorting { protected getFieldValue(obj: any, key: string): any { - return obj['data'][key]; + return obj.data[key]; } } diff --git a/projects/igniteui-angular/src/lib/data-operations/stable-sorting-strategy.spec.ts b/projects/igniteui-angular/src/lib/data-operations/stable-sorting-strategy.spec.ts deleted file mode 100644 index 4c24b651728..00000000000 --- a/projects/igniteui-angular/src/lib/data-operations/stable-sorting-strategy.spec.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component, ViewChild } from '@angular/core'; -import { - async, - TestBed -} from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; -import { By } from '@angular/platform-browser'; -import { DataGenerator} from './test-util/data-generator'; - -import { SortingDirection, SortingStrategy, StableSortingStrategy } from '../../public_api'; - -describe('Unit testing StableSortingStrategy', () => { - let dataGenerator: DataGenerator; - let data: object[]; - let strategy: SortingStrategy; - beforeEach(() => { - dataGenerator = new DataGenerator(100); - data = dataGenerator.data; - strategy = new StableSortingStrategy(); - }); - it('tests `sort`', () => { - let sort0; - let sort1; - data.forEach((item, index) => (item as { number: number }).number = index % 2 ? 0 : 1); - - strategy.sort(data, [{fieldName: 'number', dir: SortingDirection.Asc}]); - sort0 = dataGenerator.getValuesForColumn(data, 'string').join(''); - - strategy.sort(data, [{fieldName: 'number', dir: SortingDirection.Asc}]); - sort1 = dataGenerator.getValuesForColumn(data, 'string').join(''); - expect(sort0).toEqual(sort1); - }); -}); diff --git a/projects/igniteui-angular/src/lib/data-operations/stable-sorting-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/stable-sorting-strategy.ts deleted file mode 100644 index 45e84a5621a..00000000000 --- a/projects/igniteui-angular/src/lib/data-operations/stable-sorting-strategy.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { SortingStrategy } from './sorting-strategy'; - -/** - * @hidden - */ -export class StableSortingStrategy extends SortingStrategy { - protected compareObjects(obj1: any, obj2: any): number { - const res = super.compareObjects.apply(this, arguments); - const replacerFn = (key, val) => { - if (val === undefined) { - return null; - } - return val; - }; - if (!res) { - return JSON.stringify(obj1, replacerFn) - .localeCompare(JSON.stringify(obj2, replacerFn)); - } - return res; - } -} diff --git a/projects/igniteui-angular/src/lib/directives/dragdrop/dragdrop.directive.ts b/projects/igniteui-angular/src/lib/directives/dragdrop/dragdrop.directive.ts index 2acdf326017..56a37b5eb40 100644 --- a/projects/igniteui-angular/src/lib/directives/dragdrop/dragdrop.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/dragdrop/dragdrop.directive.ts @@ -4,7 +4,6 @@ EventEmitter, HostBinding, HostListener, - Inject, Input, NgModule, NgZone, diff --git a/projects/igniteui-angular/src/lib/grids/README.md b/projects/igniteui-angular/src/lib/grids/README.md index d1b0a404b15..bd0f9f1295d 100644 --- a/projects/igniteui-angular/src/lib/grids/README.md +++ b/projects/igniteui-angular/src/lib/grids/README.md @@ -261,8 +261,8 @@ Here is a list of all public methods exposed by **igx-grid**: |`findPrev(text: string, caseSensitive?: boolean, exactMatch?: boolean)`|Highlights all occurrences of the specified text and marks the previous occurrence as active.| |`clearSearch(text: string, caseSensitive?: boolean)`|Removes all search highlights from the grid.| |`refreshSearch()`|Refreshes the current search.| -|`groupBy(expression: ISortingExpression)`| Groups by a new column based on the provided expression or modifies an existing one. -|`groupBy(expressions: Array)`| Groups columns based on the provided array of sorting expressions. +|`groupBy(expression: IGroupingExpression)`| Groups by a new column based on the provided expression or modifies an existing one. +|`groupBy(expressions: Array)`| Groups columns based on the provided array of grouping expressions. |`clearGrouping()`| Clears all grouping in the grid. |`clearGrouping(fieldName: string)`| Clear grouping from a particular column. |`isExpandedGroup(group: IGroupByRecord )`| Returns if a group is expanded or not. diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts index 10cd6fea868..c0c6fa98fde 100644 --- a/projects/igniteui-angular/src/lib/grids/api.service.ts +++ b/projects/igniteui-angular/src/lib/grids/api.service.ts @@ -2,9 +2,7 @@ import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; import { cloneArray, isEqual, mergeObjects } from '../core/utils'; import { DataUtil, DataType } from '../data-operations/data-util'; -import { IFilteringExpression, FilteringLogic } from '../data-operations/filtering-expression.interface'; -import { IGroupByExpandState } from '../data-operations/groupby-expand-state.interface'; -import { IGroupByRecord } from '../data-operations/groupby-record.interface'; +import { IFilteringExpression } from '../data-operations/filtering-expression.interface'; import { ISortingExpression, SortingDirection } from '../data-operations/sorting-expression.interface'; import { IgxGridCellComponent } from './cell.component'; import { IgxColumnComponent } from './column.component'; @@ -14,7 +12,6 @@ import { IFilteringOperation } from '../data-operations/filtering-condition'; import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree'; import { Transaction, TransactionType } from '../services/index'; import { ISortingStrategy } from '../data-operations/sorting-strategy'; -import { SortingStateDefaults } from '../data-operations/sorting-state.interface'; /** *@hidden */ @@ -428,13 +425,12 @@ export class GridBaseAPIService { grid.data[index] = value; } - public sort(id: string, fieldName: string, dir: SortingDirection, ignoreCase: boolean, strategy: ISortingStrategy): void { - if (dir === SortingDirection.None) { - this.remove_grouping_expression(id, fieldName); + public sort(id: string, expression: ISortingExpression): void { + if (expression.dir === SortingDirection.None) { + this.remove_grouping_expression(id, expression.fieldName); } const sortingState = cloneArray(this.get(id).sortingExpressions); - strategy = strategy ? strategy : this.getSortStrategyPerColumn(id, fieldName); - this.prepare_sorting_expression([sortingState], { fieldName, dir, ignoreCase, strategy }); + this.prepare_sorting_expression([sortingState], expression); this.get(id).sortingExpressions = sortingState; } @@ -445,7 +441,6 @@ export class GridBaseAPIService { if (each.dir === SortingDirection.None) { this.remove_grouping_expression(id, each.fieldName); } - each.strategy = each.strategy ? each.strategy : this.getSortStrategyPerColumn(id, each.fieldName); this.prepare_sorting_expression([sortingState], each); } diff --git a/projects/igniteui-angular/src/lib/grids/column.component.ts b/projects/igniteui-angular/src/lib/grids/column.component.ts index 5702ee76ef3..392a2d04947 100644 --- a/projects/igniteui-angular/src/lib/grids/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/column.component.ts @@ -8,31 +8,29 @@ import { Input, QueryList, TemplateRef, - forwardRef, - AfterViewInit + forwardRef } from '@angular/core'; import { DataType } from '../data-operations/data-util'; import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive'; import { GridBaseAPIService } from './api.service'; import { IgxGridCellComponent } from './cell.component'; -import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult } from './grid-summary'; +import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryOperand } from './grid-summary'; import { IgxRowComponent } from './row.component'; import { IgxCellEditorTemplateDirective, - IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective } from './grid.common'; +import { + IgxBooleanFilteringOperand, IgxNumberFilteringOperand, IgxDateFilteringOperand, + IgxStringFilteringOperand, + IgxGridBaseComponent, + FilteringExpressionsTree +} from '../../public_api'; import { IgxGridHeaderComponent } from './grid-header.component'; import { valToPxlsUsingRange } from '../core/utils'; -import { - IgxBooleanFilteringOperand, - IgxNumberFilteringOperand, - IgxDateFilteringOperand, - IgxStringFilteringOperand } from '../data-operations/filtering-condition'; -import { IgxGridBaseComponent } from './grid-base.component'; -import { SortingStrategy } from '../data-operations/sorting-strategy'; -import { FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree'; +import { DefaultSortingStrategy, ISortingStrategy } from '../data-operations/sorting-strategy'; + /** * **Ignite UI for Angular Column** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html#columns-configuration) @@ -491,7 +489,7 @@ export class IgxColumnComponent implements AfterContentInit { * @memberof IgxColumnComponent */ @Input() - public get sortStrategy(): any { + public get sortStrategy(): ISortingStrategy { return this._sortStrategy; } /** @@ -505,11 +503,31 @@ export class IgxColumnComponent implements AfterContentInit { * ``` * @memberof IgxColumnComponent */ - public set sortStrategy(classRef: any) { + public set sortStrategy(classRef: ISortingStrategy) { this._sortStrategy = classRef; } - - + /** + * Gets the function that compares values for grouping. + * ```typescript + * let groupingComparer = this.column.groupingComparer' + * ``` + * @memberof IgxColumnComponent + */ + @Input() + public get groupingComparer(): (a: any, b: any) => number { + return this._groupingComparer; + } + /** + * Sets a custom function to compare values for grouping. + * Subsequent values in the sorted data that the function returns 0 for are grouped. + * ```typescript + * this.column.groupingComparer = (a: any, b: any) => { return a === b ? 0 : -1; } + * ``` + * @memberof IgxColumnComponent + */ + public set groupingComparer(funcRef: (a: any, b: any) => number) { + this._groupingComparer = funcRef; + } /** * Gets the default minimum `width` of the column. * ```typescript @@ -772,7 +790,11 @@ export class IgxColumnComponent implements AfterContentInit { /** *@hidden */ - protected _sortStrategy = new SortingStrategy(); + protected _sortStrategy: ISortingStrategy = DefaultSortingStrategy.instance(); + /** + *@hidden + */ + protected _groupingComparer: (a: any, b: any) => number; /** *@hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index cad6400de73..3d3c98d7e56 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -2,17 +2,13 @@ import { DOCUMENT } from '@angular/common'; import { AfterContentInit, AfterViewInit, - ChangeDetectionStrategy, ChangeDetectorRef, - Component, ComponentFactoryResolver, ContentChildren, ContentChild, - DoCheck, ElementRef, EventEmitter, HostBinding, - HostListener, Inject, Input, IterableChangeRecord, @@ -25,18 +21,16 @@ import { TemplateRef, ViewChild, ViewChildren, - AfterViewChecked, ViewContainerRef, InjectionToken, Optional } from '@angular/core'; import { Subject } from 'rxjs'; -import { takeUntil, first } from 'rxjs/operators'; +import { takeUntil } from 'rxjs/operators'; import { IgxSelectionAPIService } from '../core/selection'; import { cloneArray, isNavigationKey, mergeObjects, CancelableEventArgs } from '../core/utils'; import { DataType, DataUtil } from '../data-operations/data-util'; import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface'; -import { IGroupByExpandState } from '../data-operations/groupby-expand-state.interface'; import { IGroupByRecord } from '../data-operations/groupby-record.interface'; import { ISortingExpression } from '../data-operations/sorting-expression.interface'; import { IForOfState, IgxGridForOfDirective } from '../directives/for-of/for_of.directive'; @@ -47,8 +41,6 @@ import { GridBaseAPIService } from './api.service'; import { IgxGridCellComponent } from './cell.component'; import { IColumnVisibilityChangedEventArgs } from './column-hiding-item.directive'; import { IgxColumnComponent } from './column.component'; -import { IBaseChipEventArgs, IChipClickEventArgs, IChipKeyDownEventArgs } from '../chips/chip.component'; -import { IChipsAreaReorderEventArgs } from '../chips/chips-area.component'; import { ISummaryExpression } from './grid-summary'; import { DropPosition, ContainerPositioningStrategy } from './grid.common'; import { IgxGridToolbarComponent } from './grid-toolbar.component'; @@ -65,7 +57,6 @@ import { IgxRowEditActionsDirective } from './grid.rowEdit.directive'; import { IgxGridNavigationService } from './grid-navigation.service'; -import { DeprecateProperty } from '../core/deprecateDecorators'; import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity'; import { IgxGridRowComponent } from './grid'; import { IgxFilteringService } from './filtering/grid-filtering.service'; @@ -1449,7 +1440,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * @memberof IgxGridBaseComponent */ @Input() - get sortingExpressions() { + get sortingExpressions(): ISortingExpression [] { return this._sortingExpressions; } @@ -1464,7 +1455,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * ``` * @memberof IgxGridBaseComponent */ - set sortingExpressions(value) { + set sortingExpressions(value: ISortingExpression []) { this._sortingExpressions = cloneArray(value); this.cdr.markForCheck(); @@ -3546,7 +3537,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * @hidden */ protected _sort(expression: ISortingExpression) { - this.gridAPI.sort(this.id, expression.fieldName, expression.dir, expression.ignoreCase, expression.strategy); + this.gridAPI.sort(this.id, expression); } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts index 2fcb2eb38f9..216225c4d59 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts @@ -5,7 +5,6 @@ import { Component, DoCheck, ElementRef, - EventEmitter, HostBinding, HostListener, Input, @@ -20,11 +19,12 @@ import { DataType } from '../data-operations/data-util'; import { SortingDirection } from '../data-operations/sorting-expression.interface'; import { RestrictDrag } from '../directives/dragdrop/dragdrop.directive'; import { GridBaseAPIService } from './api.service'; -import { IgxColumnComponent, IgxColumnGroupComponent } from './column.component'; +import { IgxColumnComponent } from './column.component'; import { IgxColumnMovingService } from './grid.common'; import { isFirefox } from '../core/utils'; import { IgxGridBaseComponent } from './grid-base.component'; import { IgxFilteringService } from './filtering/grid-filtering.service'; +import { IgxGridComponent } from './grid'; /** * @hidden diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts index d2cf5df4919..ca3207010e1 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts @@ -3,15 +3,14 @@ import { async, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { take } from 'rxjs/operators'; -import { IgxColumnComponent, IgxGridCellComponent, IgxGridModule, } from './index'; -import { IgxGridComponent } from './grid.component'; -import { IGridCellEventArgs } from '../grid-base.component'; -import { IgxStringFilteringOperand } from '../../../public_api'; +import { IgxColumnComponent, IgxGridCellComponent, IgxGridComponent, IgxGridModule, IGridCellEventArgs } from './index'; import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; import { HelperUtils} from '../../test-utils/helper-utils.spec'; -import { SampleTestData } from '../../test-utils/sample-test-data.spec'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { configureTestSuite } from '../../test-utils/configure-suite'; +import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; +import { SampleTestData } from '../../test-utils/sample-test-data.spec'; const DEBOUNCETIME = 30; @@ -200,7 +199,7 @@ describe('IgxGrid - Cell component', () => { describe('Cell Editing - test edit templates, sorting and filtering', () => { configureTestSuite(); let fixture; - let grid; + let grid: IgxGridComponent; beforeEach(() => { fixture = TestBed.createComponent(CellEditingTestComponent); fixture.detectChanges(); @@ -422,14 +421,14 @@ describe('IgxGrid - Cell component', () => { UIInteractions.sendInput(editTemplate, 'Rick Gilmore'); await wait(); - grid.sort({ fieldName: 'age', dir: SortingDirection.Desc }); + grid.sort({ fieldName: 'age', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fixture.detectChanges(); expect(cell.gridAPI.get_cell_inEditMode(cell.gridID)).toBeNull(); })); it('should update correct cell when sorting is applied', (async () => { - grid.sort( {fieldName: 'age', dir: SortingDirection.Desc}); + grid.sort( {fieldName: 'age', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance()}); fixture.detectChanges(); const cell = grid.getCellByColumn(0, 'fullName'); diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts index 3fe8d037d0b..d131d7a4cac 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts @@ -5,10 +5,11 @@ import { Component, ViewChild, DebugElement, AfterViewInit } from '@angular/core import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxColumnComponent, IgxColumnGroupComponent } from '../column.component'; import { SortingDirection } from '../../data-operations/sorting-expression.interface'; -import { IgxStringFilteringOperand } from '../../../public_api'; import { By } from '@angular/platform-browser'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { wait } from '../../test-utils/ui-interactions.spec'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; +import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { IgxGridHeaderComponent } from '../grid-header.component'; @@ -1073,8 +1074,7 @@ describe('IgxGrid - multi-column headers', () => { tick(); fixture.detectChanges(); // Sort column - grid.sort({fieldName: 'CompanyName', dir: SortingDirection.Asc}); - tick(); + grid.sort({fieldName: 'CompanyName', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fixture.detectChanges(); // Verify columns and groups @@ -1102,8 +1102,7 @@ describe('IgxGrid - multi-column headers', () => { expect(grid.getCellByColumn(4, 'Country').value).toEqual('Sweden'); // sort column which is not in the view - grid.sort({fieldName: 'ContactName', dir: SortingDirection.Asc}); - tick(); + grid.sort({fieldName: 'ContactName', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fixture.detectChanges(); // Verify columns and groups @@ -1249,7 +1248,8 @@ describe('IgxGrid - multi-column headers', () => { grid.getColumnByName('Country').groupable = true; grid.getColumnByName('Phone').groupable = true; - grid.groupBy({ fieldName: 'ContactTitle', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ContactTitle', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); // verify grouping expressions const grExprs = grid.groupingExpressions; diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts index e58827e857a..b2c6fb0d715 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts @@ -17,6 +17,8 @@ import { import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; +import { IgxGridComponent } from './grid.component'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; describe('IgxGrid - Column Moving', () => { configureTestSuite(); @@ -24,7 +26,7 @@ describe('IgxGrid - Column Moving', () => { const COLUMN_HEADER_CLASS = '.igx-grid__th'; const COLUMN_GROUP_HEADER_CLASS = '.igx-grid__th--fw'; - let fixture, grid; + let fixture, grid: IgxGridComponent; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -459,7 +461,7 @@ describe('IgxGrid - Column Moving', () => { fixture.detectChanges(); // step 1 - group a column - grid.groupBy({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fixture.detectChanges(); // step 2 - move a column diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-api.service.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-api.service.ts index a0a8f722796..69bfde99546 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-api.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-api.service.ts @@ -4,26 +4,23 @@ import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface'; import { DataUtil } from '../../data-operations/data-util'; import { cloneArray } from '../../core/utils'; -import { ISortingExpression, SortingDirection } from '../../data-operations/sorting-expression.interface'; -import { ISortingStrategy } from '../../data-operations/sorting-strategy'; +import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; export class IgxGridAPIService extends GridBaseAPIService { - public groupBy(id: string, fieldName: string, dir: SortingDirection, ignoreCase: boolean, strategy: ISortingStrategy): void { + public groupBy(id: string, expression: IGroupingExpression): void { const groupingState = cloneArray(this.get(id).groupingExpressions); const sortingState = cloneArray(this.get(id).sortingExpressions); - strategy = strategy ? strategy : this.getSortStrategyPerColumn(id, fieldName); - this.prepare_sorting_expression([sortingState, groupingState], { fieldName, dir, ignoreCase, strategy }); + this.prepare_sorting_expression([sortingState, groupingState], expression); this.get(id).groupingExpressions = groupingState; this.arrange_sorting_expressions(id); } - public groupBy_multiple(id: string, expressions: ISortingExpression[]): void { + public groupBy_multiple(id: string, expressions: IGroupingExpression[]): void { const groupingState = cloneArray(this.get(id).groupingExpressions); const sortingState = cloneArray(this.get(id).sortingExpressions); for (const each of expressions) { - each.strategy = each.strategy ? each.strategy : this.getSortStrategyPerColumn(id, each.fieldName); this.prepare_sorting_expression([sortingState, groupingState], each); } 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 index 6ddff54bedf..50867d14403 100644 --- 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 @@ -1,5 +1,5 @@ import { Component, ViewChild, DebugElement } from '@angular/core'; -import { async, discardPeriodicTasks, fakeAsync, TestBed, tick, ComponentFixture } from '@angular/core/testing'; +import { async, discardPeriodicTasks, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { Calendar } from '../../calendar/calendar'; @@ -16,16 +16,13 @@ import { IgxDatePickerComponent } from '../../date-picker/date-picker.component' import { IgxGridFilteringCellComponent } from '../filtering/grid-filtering-cell.component'; import { IgxGridHeaderComponent } from '../grid-header.component'; import { IgxGridFilteringRowComponent } from '../filtering/grid-filtering-row.component'; -import { IgxDropDownComponent } from '../../drop-down/drop-down.component'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; -import { KEYCODES } from '../../core/utils'; import { IgxBadgeComponent } from '../../badge/badge.component'; import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { SortingDirection } from '../../data-operations/sorting-expression.interface'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; const FILTER_UI_ROW = 'igx-grid-filtering-row'; -const FILTER_UI_CONNECTOR = 'igx-filtering-chips__connector'; -const FILTER_UI_INDICATOR = 'igx-grid__filtering-cell-indicator'; describe('IgxGrid - Filtering actions', () => { configureTestSuite(); @@ -2254,7 +2251,7 @@ describe('IgxGrid - Filtering Row UI actions', () => { const grid = fix.componentInstance.grid; fix.detectChanges(); grid.getColumnByName('ProductName').groupable = true; - grid.groupBy({fieldName: 'ProductName', dir: SortingDirection.Asc}); + grid.groupBy({fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance()}); fix.detectChanges(); const filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell')); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-selection.spec.ts index a585d8db2f0..35c3403b276 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-selection.spec.ts @@ -6,12 +6,11 @@ import { Calendar } from '../../calendar'; import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { IgxGridComponent } from './grid.component'; import { IgxGridModule } from './index'; -import { IgxStringFilteringOperand } from '../../../public_api'; import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; -import { IgxNumberFilteringOperand } from '../../data-operations/filtering-condition'; +import { IgxStringFilteringOperand, IgxNumberFilteringOperand } from '../../data-operations/filtering-condition'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { configureTestSuite } from '../../test-utils/configure-suite'; -const selectedCellClass = '.igx-grid__td--selected'; let data = [ {ID: 1, Name: 'Casey Houston', JobTitle: 'Vice President', HireDate: '2017-06-19T11:43:07.714Z'}, {ID: 2, Name: 'Gilberto Todd', JobTitle: 'Director', HireDate: '2015-12-18T11:23:17.714Z'}, @@ -776,7 +775,7 @@ describe('IgxGrid - Row Selection', () => { expect(secondRow.isSelected).toBeTruthy(); expect(grid.rowList.find((row) => row === firstRow)).toBeTruthy(); - grid.sort({fieldName: 'Column1', dir: SortingDirection.Desc, ignoreCase: true}); + grid.sort({ fieldName: 'Column1', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); expect(firstRow.isSelected).toBeFalsy(); @@ -880,7 +879,7 @@ describe('IgxGrid - Row Selection', () => { const oldCellID = oldCell.cellID; oldCell.nativeElement.focus(); oldCell.nativeElement.click(); - grid.sort({fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true}); + grid.sort({ fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }); fixture.detectChanges(); expect(grid.selectedCells).toBeDefined(); expect(grid.selectedCells.length).toBe(1); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index a7774dd4b7b..d06fb0ebdde 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -81,7 +81,7 @@ { cell.inEditMode = true; tick(); - grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }); + grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); // expect(gridAPI.submit_value).toHaveBeenCalled(); @@ -2111,7 +2113,8 @@ describe('IgxGrid Component Tests', () => { targetCell.inEditMode = true; tick(); - grid.groupBy({ fieldName: 'OrderDate', dir: SortingDirection.Desc, ignoreCase: true }); + grid.groupBy({ fieldName: 'OrderDate', dir: SortingDirection.Desc, ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); expect(gridAPI.escape_editMode).toHaveBeenCalled(); expect(gridAPI.submit_value).toHaveBeenCalled(); @@ -2136,7 +2139,8 @@ describe('IgxGrid Component Tests', () => { fix.detectChanges(); cell.update(111); // Do not exit edit mode - grid.sort({ fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: true }); + grid.sort({ fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); tick(); fix.detectChanges(); @@ -2160,7 +2164,8 @@ describe('IgxGrid Component Tests', () => { tick(); cell.update(newValue); - grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }); + grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); tick(); fix.detectChanges(); @@ -2179,7 +2184,8 @@ describe('IgxGrid Component Tests', () => { const grid = fix.componentInstance.grid; - grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }); + grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); tick(); fix.detectChanges(); @@ -2532,7 +2538,8 @@ describe('IgxGrid Component Tests', () => { component.cellInEditMode.editValue = 1337; fixture.detectChanges(); // On sort - grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }); + grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); fixture.detectChanges(); expect(grid.onRowEdit.emit).toHaveBeenCalled(); expect(grid.onRowEdit.emit).toHaveBeenCalledWith({ @@ -2898,7 +2905,8 @@ describe('IgxGrid Component Tests', () => { const grid = fix.componentInstance.instance; grid.primaryKey = 'ID'; fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); tick(); fix.detectChanges(); const cell = grid.getCellByColumn(1, 'ProductName'); @@ -2927,7 +2935,8 @@ describe('IgxGrid Component Tests', () => { const grid = fix.componentInstance.instance; grid.primaryKey = 'ID'; fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); tick(); fix.detectChanges(); let row: HTMLElement; @@ -2981,10 +2990,12 @@ describe('IgxGrid Component Tests', () => { const grid = fix.componentInstance.instance; grid.primaryKey = 'ID'; fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); tick(); fix.detectChanges(); const cell = grid.getCellByColumn(2, 'ProductName'); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index e24c0d5bd1d..04bd26c3396 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -19,11 +19,11 @@ import { DataUtil } from '../../data-operations/data-util'; import { IgxSelectionAPIService } from '../../core/selection'; import { TransactionService, Transaction, State } from '../../services/transaction/transaction'; import { DOCUMENT } from '@angular/common'; -import { IgxGridCellComponent } from '../cell.component'; import { IgxGridSortingPipe } from './grid.pipes'; import { IgxColumnComponent } from '../column.component'; import { takeUntil } from 'rxjs/operators'; import { IgxFilteringService } from '../filtering/grid-filtering.service'; +import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; let NEXT_ID = 0; @@ -68,7 +68,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do /** * @hidden */ - protected _groupingExpressions = []; + protected _groupingExpressions: IGroupingExpression [] = []; /** * @hidden */ @@ -136,7 +136,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do * @memberof IgxGridComponent */ @Input() - get groupingExpressions(): ISortingExpression[] { + get groupingExpressions(): IGroupingExpression[] { return this._groupingExpressions; } @@ -152,12 +152,12 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do * ``` * @memberof IgxGridComponent */ - set groupingExpressions(value: ISortingExpression[]) { + set groupingExpressions(value: IGroupingExpression[]) { if (value && value.length > 10) { throw Error('Maximum amount of grouped columns is 10.'); } - const oldExpressions: Array = this.groupingExpressions; - const newExpressions: Array = value; + const oldExpressions: IGroupingExpression[] = this.groupingExpressions; + const newExpressions: IGroupingExpression[] = value; this._groupingExpressions = cloneArray(value); this.chipsGoupingExpressions = cloneArray(value); if (this._gridAPI.get(this.id)) { @@ -171,8 +171,8 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do this.sortingExpressions.unshift.apply(this.sortingExpressions, this._groupingExpressions); } if (JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this.columnList) { - const groupedCols: Array | IgxColumnComponent = []; - const ungroupedCols: Array | IgxColumnComponent = []; + const groupedCols: IgxColumnComponent[] = []; + const ungroupedCols: IgxColumnComponent[] = []; const groupedColsArr = newExpressions.filter((obj) => { return !oldExpressions.some((obj2) => { return obj.fieldName === obj2.fieldName; @@ -195,7 +195,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do ungroupedColumns: ungroupedCols }; this.onGroupingDone.emit(groupingDoneArgs); - } + } } /** @@ -484,14 +484,13 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do * ``` * @memberof IgxGridComponent */ - public groupBy(expression: ISortingExpression | Array): void; - public groupBy(...rest): void { + public groupBy(expression: IGroupingExpression | Array): void { this.endEdit(true); this._gridAPI.submit_value(this.id); - if (rest.length === 1 && rest[0] instanceof Array) { - this._groupByMultiple(rest[0]); + if (expression instanceof Array) { + this._gridAPI.groupBy_multiple(this.id, expression); } else { - this._groupBy(rest[0]); + this._gridAPI.groupBy(this.id, expression); } this.cdr.detectChanges(); this.calculateGridSizes(); @@ -590,20 +589,6 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do !this.chipsGoupingExpressions.length; } - /** - * @hidden - */ - protected _groupBy(expression: ISortingExpression) { - this._gridAPI.groupBy(this.id, expression.fieldName, expression.dir, expression.ignoreCase, expression.strategy); - } - - /** - * @hidden - */ - protected _groupByMultiple(expressions: ISortingExpression[]) { - this._gridAPI.groupBy_multiple(this.id, expressions); - } - /** * @hidden */ @@ -806,8 +791,8 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do if (this.sortingExpressions && this.sortingExpressions.length > 0) { - const sortingPipe = new IgxGridSortingPipe(this._gridAPI); - data = sortingPipe.transform(data, this.sortingExpressions, this.id, -1); + const sortingPipe = new IgxGridSortingPipe(); + data = sortingPipe.transform(data, this.sortingExpressions, -1); } return data; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index 4a364125754..ae99482c53d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -13,12 +13,10 @@ import { IgxGridModule, IgxGridCellComponent } from './index'; import { IgxGridRowComponent } from './grid-row.component'; import { IgxChipComponent, IChipClickEventArgs } from '../../chips/chip.component'; import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec'; -import { HelperUtils } from '../../test-utils/helper-utils.spec'; - +import { HelperUtils} from '../../test-utils/helper-utils.spec'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { DataParent } from '../../test-utils/sample-test-data.spec'; -import { SortingStrategy } from '../../data-operations/sorting-strategy'; -import { SortingStateDefaults } from '../../data-operations/sorting-state.interface'; describe('IgxGrid - GroupBy', () => { configureTestSuite(); @@ -44,39 +42,40 @@ describe('IgxGrid - GroupBy', () => { }).compileComponents(); })); - const expandCollapceGroupRow = - (fix: ComponentFixture, - groupRow: IgxGridGroupByRowComponent, - cell: IgxGridCellComponent) => new Promise(async (resolve, reject) => { - expect(groupRow.focused).toBe(true); - expect(groupRow.nativeElement.classList.contains('igx-grid__group-row--active')).toBe(true); - if (cell != null) { - expect(cell.selected).toBe(true); - } + function expandCollapceGroupRow(fix: ComponentFixture, + groupRow: IgxGridGroupByRowComponent, + cell: IgxGridCellComponent) { + return new Promise(async (resolve, reject) => { + expect(groupRow.focused).toBe(true); + expect(groupRow.nativeElement.classList.contains('igx-grid__group-row--active')).toBe(true); + if (cell != null) { + expect(cell.selected).toBe(true); + } - groupRow.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'arrowleft', code: 'arrowleft', altKey: true })); - await wait(300); - fix.detectChanges(); + groupRow.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'arrowleft', code: 'arrowleft', altKey: true })); + await wait(300); + fix.detectChanges(); - expect(groupRow.expanded).toBe(false); - expect(groupRow.focused).toBe(true); - expect(groupRow.nativeElement.classList.contains('igx-grid__group-row--active')).toBe(true); - if (cell != null) { - expect(cell.selected).toBe(true); - } + expect(groupRow.expanded).toBe(false); + expect(groupRow.focused).toBe(true); + expect(groupRow.nativeElement.classList.contains('igx-grid__group-row--active')).toBe(true); + if (cell != null) { + expect(cell.selected).toBe(true); + } - groupRow.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'arrowright', code: 'arrowright', altKey: true })); - await wait(100); - fix.detectChanges(); + groupRow.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'arrowright', code: 'arrowright', altKey: true })); + await wait(100); + fix.detectChanges(); - expect(groupRow.expanded).toBe(true); - expect(groupRow.focused).toBe(true); - expect(groupRow.nativeElement.classList.contains('igx-grid__group-row--active')).toBe(true); - if (cell != null) { - expect(cell.selected).toBe(true); - } - resolve(); - }); + expect(groupRow.expanded).toBe(true); + expect(groupRow.focused).toBe(true); + expect(groupRow.nativeElement.classList.contains('igx-grid__group-row--active')).toBe(true); + if (cell != null) { + expect(cell.selected).toBe(true); + } + resolve(); + }); + } function checkGroups(groupRows, expectedGroupOrder, grExpr?) { // verify group rows are sorted correctly, their indexes in the grid are correct and their group records match the group value. @@ -125,8 +124,8 @@ describe('IgxGrid - GroupBy', () => { // group by string column const grid = fix.componentInstance.instance; - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); // verify grouping expressions @@ -152,8 +151,8 @@ describe('IgxGrid - GroupBy', () => { expect(grid.groupsRowList.toArray().length).toEqual(0); // group by number - grid.groupBy({ fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); groupRows = grid.groupsRowList.toArray(); @@ -168,8 +167,7 @@ describe('IgxGrid - GroupBy', () => { grid.clearGrouping('Downloads'); tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); groupRows = grid.groupsRowList.toArray(); @@ -184,8 +182,8 @@ describe('IgxGrid - GroupBy', () => { grid.clearGrouping('Released'); tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ReleaseDate', dir: SortingDirection.Asc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ReleaseDate', dir: SortingDirection.Asc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); groupRows = grid.groupsRowList.toArray(); @@ -218,10 +216,9 @@ describe('IgxGrid - GroupBy', () => { // group by 2 columns const grid = fix.componentInstance.instance; - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let groupRows = grid.groupsRowList.toArray(); @@ -238,8 +235,8 @@ describe('IgxGrid - GroupBy', () => { // group by 3rd column - grid.groupBy({ fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); groupRows = grid.groupsRowList.toArray(); @@ -255,13 +252,52 @@ describe('IgxGrid - GroupBy', () => { grid.groupingExpressions); })); + it('should allow grouping with a custom comparer', () => { + const fix = TestBed.createComponent(DefaultGridComponent); + fix.componentInstance.data[0].ReleaseDate = new Date(2017, 1, 1, 15, 30, 0, 0); + fix.componentInstance.data[1].ReleaseDate = new Date(2017, 1, 1, 20, 30, 0, 0); + fix.componentInstance.height = null; + const grid = fix.componentInstance.instance; + fix.detectChanges(); + grid.groupBy({ + fieldName: 'ReleaseDate', + dir: SortingDirection.Desc, + ignoreCase: false, + strategy: DefaultSortingStrategy.instance(), + groupingComparer: (a: Date, b: Date) => { + if (a instanceof Date && b instanceof Date && + a.getFullYear() === b.getFullYear() && + a.getMonth() === b.getMonth() && + a.getDate() === b.getDate()) { + return 0; + } + return DefaultSortingStrategy.instance().compareValues(a, b); + } + }); + fix.detectChanges(); + let groupRows = grid.groupsRowList.toArray(); + // verify groups count + expect(groupRows.length).toEqual(5); + // now click the chip to change sorting, the grouping expression should hold + // the comparer and reapply the same grouping again + let chips = fix.nativeElement.querySelectorAll('igx-chip'); + // click grouping direction arrow + const event: IChipClickEventArgs = { owner: chips[0], cancel: false, originalEvent: null }; + grid.onChipClicked(event); + chips = fix.nativeElement.querySelectorAll('igx-chip'); + expect(chips.length).toBe(1); + checkChips(chips, grid.groupingExpressions, grid.sortingExpressions); + expect(chips[0].querySelector('igx-icon').innerText.trim()).toBe('arrow_upward'); + groupRows = grid.groupsRowList.toArray(); + expect(groupRows.length).toEqual(5); + }); + it('should allows expanding/collapsing groups.', fakeAsync(() => { const fix = TestBed.createComponent(DefaultGridComponent); const grid = fix.componentInstance.instance; grid.primaryKey = 'ID'; fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let groupRows = grid.groupsRowList.toArray(); @@ -309,8 +345,8 @@ describe('IgxGrid - GroupBy', () => { // set groupingExpressions const grid = fix.componentInstance.instance; const exprs: ISortingExpression[] = [ - { fieldName: 'ProductName', dir: SortingDirection.Desc }, - { fieldName: 'Released', dir: SortingDirection.Desc } + { fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } ]; grid.groupingExpressions = exprs; tick(); @@ -329,13 +365,13 @@ describe('IgxGrid - GroupBy', () => { // change order grid.groupingExpressions = [ - { fieldName: 'Released', dir: SortingDirection.Asc }, - { fieldName: 'ProductName', dir: SortingDirection.Asc } + { fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } ]; tick(); grid.sortingExpressions = [ - { fieldName: 'Released', dir: SortingDirection.Asc }, - { fieldName: 'ProductName', dir: SortingDirection.Asc } + { fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } ]; tick(); fix.detectChanges(); @@ -358,8 +394,7 @@ describe('IgxGrid - GroupBy', () => { fix.detectChanges(); grid.groupsExpanded = false; - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let groupRows = grid.groupsRowList.toArray(); @@ -393,8 +428,7 @@ describe('IgxGrid - GroupBy', () => { grid.primaryKey = 'ID'; fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const currExpr = fix.componentInstance.currentSortExpressions; @@ -412,8 +446,8 @@ describe('IgxGrid - GroupBy', () => { fix.detectChanges(); grid.groupBy([ - { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }, - { fieldName: 'ReleaseDate', dir: SortingDirection.Desc, ignoreCase: false } + { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ReleaseDate', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } ]); tick(); fix.detectChanges(); @@ -434,9 +468,9 @@ describe('IgxGrid - GroupBy', () => { grid.primaryKey = 'ID'; fix.detectChanges(); grid.groupBy([ - { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }, - { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: 'ReleaseDate', dir: SortingDirection.Desc, ignoreCase: false } + { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ReleaseDate', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } ]); tick(); fix.detectChanges(); @@ -458,10 +492,10 @@ describe('IgxGrid - GroupBy', () => { grid.primaryKey = 'ID'; fix.detectChanges(); grid.groupBy([ - { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }, - { fieldName: 'ReleaseDate', dir: SortingDirection.Desc, ignoreCase: false }, - { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false } + { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ReleaseDate', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } ]); tick(); fix.detectChanges(); @@ -485,16 +519,16 @@ describe('IgxGrid - GroupBy', () => { grid.primaryKey = 'ID'; fix.detectChanges(); grid.groupBy([ - { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }, - { fieldName: 'ReleaseDate', dir: SortingDirection.Desc, ignoreCase: false }, - { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false } + { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ReleaseDate', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } ]); tick(); fix.detectChanges(); const newExpressions = [ - { fieldName: 'ReleaseDate', dir: SortingDirection.Desc, ignoreCase: false }, - { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false } + { fieldName: 'ReleaseDate', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } ]; grid.groupingExpressions = newExpressions; tick(); @@ -515,8 +549,7 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const groupRows = grid.groupsRowList.toArray(); @@ -536,8 +569,7 @@ describe('IgxGrid - GroupBy', () => { grid.primaryKey = 'ID'; fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const groupRows = grid.groupsRowList.toArray(); @@ -555,8 +587,8 @@ describe('IgxGrid - GroupBy', () => { fix.componentInstance.enableSorting = true; tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const groupRows = grid.groupsRowList.toArray(); const dataRows = grid.dataRowList.toArray(); @@ -564,8 +596,7 @@ describe('IgxGrid - GroupBy', () => { expect(groupRows.length).toEqual(5); expect(dataRows.length).toEqual(8); - grid.sort({ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }); - tick(); + grid.sort({ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); // verify groups @@ -585,8 +616,8 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.componentInstance.enableSorting = true; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let groupRows = grid.groupsRowList.toArray(); @@ -598,8 +629,7 @@ describe('IgxGrid - GroupBy', () => { // verify group order checkGroups(groupRows, ['NetAdvantage', 'Ignite UI for JavaScript', 'Ignite UI for Angular', '', null]); - grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }); - tick(); + grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); groupRows = grid.groupsRowList.toArray(); @@ -615,8 +645,8 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.componentInstance.enableSorting = true; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let groupRows = grid.groupsRowList.toArray(); @@ -628,8 +658,7 @@ describe('IgxGrid - GroupBy', () => { // verify group order checkGroups(groupRows, ['NetAdvantage', 'Ignite UI for JavaScript', 'Ignite UI for Angular', '', null]); - grid.sort({ fieldName: 'ProductName', dir: SortingDirection.None, ignoreCase: false }); - tick(); + grid.sort({ fieldName: 'ProductName', dir: SortingDirection.None, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); groupRows = grid.groupsRowList.toArray(); dataRows = grid.dataRowList.toArray(); @@ -645,8 +674,8 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.componentInstance.enableSorting = true; fix.detectChanges(); - grid.groupBy({ fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); @@ -678,12 +707,11 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.componentInstance.enableSorting = true; fix.detectChanges(); - grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const groupRows = grid.groupsRowList.toArray(); // verify group order @@ -695,9 +723,10 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.componentInstance.enableSorting = true; fix.detectChanges(); - grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const groupRows = grid.groupsRowList.toArray(); const dataRows = grid.dataRowList.toArray(); @@ -714,7 +743,8 @@ describe('IgxGrid - GroupBy', () => { fix.componentInstance.width = '400px'; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const gRow = grid.groupsRowList.toArray()[0]; expect(gRow.expanded).toBe(true); @@ -740,7 +770,8 @@ describe('IgxGrid - GroupBy', () => { await wait(30); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); @@ -774,7 +805,8 @@ describe('IgxGrid - GroupBy', () => { await wait(30); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1); @@ -813,8 +845,9 @@ describe('IgxGrid - GroupBy', () => { await wait(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); await HelperUtils.navigateVerticallyToIndex(grid, 0, 9); @@ -838,8 +871,9 @@ describe('IgxGrid - GroupBy', () => { grid.columnWidth = '200px'; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); grid.parentVirtDir.getHorizontalScroll().scrollLeft = 1000; @@ -868,7 +902,8 @@ describe('IgxGrid - GroupBy', () => { await wait(100); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let cell = grid.getCellByColumn(2, 'Released'); cell.nativeElement.dispatchEvent(new Event('focus')); @@ -918,7 +953,8 @@ describe('IgxGrid - GroupBy', () => { await wait(50); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let groupRow = grid.groupsRowList.toArray()[0]; @@ -965,7 +1001,8 @@ describe('IgxGrid - GroupBy', () => { await wait(30); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); await wait(30); fix.detectChanges(); @@ -1009,7 +1046,8 @@ describe('IgxGrid - GroupBy', () => { grid.columnWidth = '100px'; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const groupRow = grid.groupsRowList.toArray()[0]; @@ -1030,7 +1068,8 @@ describe('IgxGrid - GroupBy', () => { await wait(50); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let cell = grid.getCellByColumn(1, 'ID'); cell.nativeElement.dispatchEvent(new Event('focus')); @@ -1074,7 +1113,8 @@ describe('IgxGrid - GroupBy', () => { await wait(30); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); await wait(30); fix.detectChanges(); @@ -1129,8 +1169,9 @@ describe('IgxGrid - GroupBy', () => { await wait(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); grid.parentVirtDir.getHorizontalScroll().scrollLeft = 1000; await wait(100); @@ -1157,8 +1198,9 @@ describe('IgxGrid - GroupBy', () => { grid.columnWidth = '200px'; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const cell = grid.getCellByColumn(2, 'Downloads'); cell.onClick(null); @@ -1183,10 +1225,9 @@ describe('IgxGrid - GroupBy', () => { grid.columnWidth = '200px'; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); expect(grid.groupsRowList.toArray().length).toEqual(3); @@ -1206,10 +1247,9 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const origScrollHeight = parseInt(grid.verticalScrollContainer.getVerticalScroll().children[0].style.height, 10); @@ -1251,10 +1291,9 @@ describe('IgxGrid - GroupBy', () => { await wait(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - await wait(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - await wait(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let groupRow = grid.groupsRowList.toArray()[0]; @@ -1289,10 +1328,9 @@ describe('IgxGrid - GroupBy', () => { await wait(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - await wait(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - await wait(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const groupRow = grid.groupsRowList.toArray()[0]; const origRect = groupRow.element.nativeElement.getBoundingClientRect(); @@ -1317,8 +1355,8 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); let groupRows = grid.groupsRowList.toArray(); let dataRows = grid.dataRowList.toArray(); let allRows = grid.rowList.toArray(); @@ -1353,8 +1391,8 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); @@ -1382,8 +1420,8 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); @@ -1431,7 +1469,8 @@ describe('IgxGrid - GroupBy', () => { fix.componentInstance.enableResizing = true; grid.columnWidth = '200px'; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let grRows = grid.groupsRowList.toArray(); @@ -1476,8 +1515,8 @@ describe('IgxGrid - GroupBy', () => { grid.columnWidth = '200px'; tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); grid.enableSummaries([{ fieldName: 'ProductName' }]); @@ -1504,8 +1543,8 @@ describe('IgxGrid - GroupBy', () => { grid.columnWidth = '200px'; tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); grid.getColumnByName('ProductName').hidden = true; @@ -1530,8 +1569,8 @@ describe('IgxGrid - GroupBy', () => { grid.columnWidth = '200px'; tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); grid.pinColumn('ProductName'); @@ -1552,7 +1591,8 @@ describe('IgxGrid - GroupBy', () => { grid.columnWidth = '200px'; grid.primaryKey = 'ID'; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); // verify rows @@ -1612,7 +1652,8 @@ describe('IgxGrid - GroupBy', () => { grid.primaryKey = 'ID'; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const rv = grid.getRowByKey(5).element.nativeElement.querySelectorAll(CELL_CSS_CLASS)[2]; @@ -1652,8 +1693,8 @@ describe('IgxGrid - GroupBy', () => { fix.componentInstance.instance.perPage = 3; tick(); fix.detectChanges(); - fix.componentInstance.instance.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + fix.componentInstance.instance.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); const groupRows = grid.groupsRowList.toArray(); const dataRows = grid.dataRowList.toArray(); @@ -1672,8 +1713,8 @@ describe('IgxGrid - GroupBy', () => { fix.componentInstance.instance.perPage = 3; tick(); fix.detectChanges(); - fix.componentInstance.instance.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + fix.componentInstance.instance.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); let groupRows = grid.groupsRowList.toArray(); let dataRows = grid.dataRowList.toArray(); @@ -1710,8 +1751,8 @@ describe('IgxGrid - GroupBy', () => { }); tick(); fix.detectChanges(); - fix.componentInstance.instance.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + fix.componentInstance.instance.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); let groupRows = grid.groupsRowList.toArray(); let dataRows = grid.dataRowList.toArray(); @@ -1755,8 +1796,8 @@ describe('IgxGrid - GroupBy', () => { fix.detectChanges(); const gridElement: HTMLElement = fix.nativeElement.querySelector('.igx-grid'); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const groupRows = grid.groupsRowList.toArray(); // verify group area is rendered @@ -1780,8 +1821,8 @@ describe('IgxGrid - GroupBy', () => { fix.detectChanges(); const gridElement: HTMLElement = fix.nativeElement.querySelector('.igx-grid'); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); grid.toggleAllGroupRows(); tick(); fix.detectChanges(); @@ -1804,8 +1845,8 @@ describe('IgxGrid - GroupBy', () => { // set groupingExpressions const grid = fix.componentInstance.instance; const exprs: ISortingExpression[] = [ - { fieldName: 'ProductName', dir: SortingDirection.Desc }, - { fieldName: 'Released', dir: SortingDirection.Desc } + { fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } ]; grid.groupingExpressions = exprs; tick(); @@ -1820,13 +1861,13 @@ describe('IgxGrid - GroupBy', () => { // change order grid.groupingExpressions = [ - { fieldName: 'Released', dir: SortingDirection.Asc }, - { fieldName: 'ProductName', dir: SortingDirection.Asc } + { fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } ]; tick(); grid.sortingExpressions = [ - { fieldName: 'Released', dir: SortingDirection.Asc }, - { fieldName: 'ProductName', dir: SortingDirection.Asc } + { fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } ]; tick(); fix.detectChanges(); @@ -1846,8 +1887,8 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); const groupRows = grid.groupsRowList.toArray(); const chips = fix.nativeElement.querySelectorAll('igx-chip'); checkChips(chips, grid.groupingExpressions, grid.sortingExpressions); @@ -1859,8 +1900,8 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let chips = fix.nativeElement.querySelectorAll('igx-chip'); // click close button @@ -1878,8 +1919,8 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let chips = fix.nativeElement.querySelectorAll('igx-chip'); // click grouping direction arrow @@ -1900,8 +1941,8 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); UIInteractions.simulateMouseEvent('click', fix.nativeElement.querySelector('igx-grid-header[id$="_ProductName"]'), 0, 0); tick(); @@ -1918,8 +1959,10 @@ describe('IgxGrid - GroupBy', () => { fix.componentInstance.height = '200px'; fix.detectChanges(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); @@ -1963,10 +2006,9 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }); - tick(); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); @@ -1994,8 +2036,10 @@ describe('IgxGrid - GroupBy', () => { grid.getColumnByName('Released').groupable = true; tick(); fix.detectChanges(); - grid.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Asc }, { fieldName: 'Released', dir: SortingDirection.Asc }]); - tick(); + grid.groupBy([ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]); fix.detectChanges(); const chips = fix.nativeElement.querySelectorAll(CHIP); @@ -2054,9 +2098,10 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy([{ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }]); - tick(); + grid.groupBy([ + { fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } + ]); fix.detectChanges(); const groupRows = grid.groupsRowList.toArray(); @@ -2070,8 +2115,8 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }]); - tick(); + grid.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }]); fix.detectChanges(); expect(groupRows[0].expanded).toEqual(true); @@ -2087,9 +2132,10 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy([{ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }]); - tick(); + grid.groupBy([ + { fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } + ]); fix.detectChanges(); expect(groupRows[0].expanded).toEqual(true); @@ -2120,9 +2166,10 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy([{ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }]); - tick(); + grid.groupBy([ + { fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } + ]); fix.detectChanges(); let groupRows = grid.groupsRowList.toArray(); @@ -2136,8 +2183,9 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy([{ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }]); - tick(); + grid.groupBy([ + { fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } + ]); fix.detectChanges(); // reorder chips by simulating events @@ -2159,8 +2207,9 @@ describe('IgxGrid - GroupBy', () => { const fix = TestBed.createComponent(DefaultGridComponent); const grid = fix.componentInstance.instance; fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); const chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent)); // Disable chip animations @@ -2215,8 +2264,10 @@ describe('IgxGrid - GroupBy', () => { ]; fix.detectChanges(); - grid.groupBy([{ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }]); + grid.groupBy([ + { fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } + ]); fix.detectChanges(); let groupRows = grid.groupsRowList.toArray(); @@ -2288,8 +2339,9 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const firstColumn = fix.debugElement.query(By.directive(IgxColumnMovingDragDirective)); @@ -2322,7 +2374,7 @@ describe('IgxGrid - GroupBy', () => { fix.detectChanges(); let m = ''; const expr = fix.componentInstance.columns.map(val => { - return { fieldName: val.field, dir: SortingDirection.Asc, ignoreCase: true }; + return { fieldName: val.field, dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }; }); // not allowed to group by more than 10 columns try { @@ -2343,8 +2395,7 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); - grid.groupBy({ fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false }); - tick(); + grid.groupBy({ fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const chips = fix.nativeElement.querySelectorAll(CHIP); @@ -2375,10 +2426,12 @@ describe('IgxGrid - GroupBy', () => { expect(grid.calcHeight).toEqual(expectedHeight); // verify height is recalculated. - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }); - grid.groupBy({ fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false }); - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }); - grid.groupBy({ fieldName: 'ReleaseDate', dir: SortingDirection.Asc, ignoreCase: false }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); + grid.groupBy({ fieldName: 'ReleaseDate', dir: SortingDirection.Asc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); expectedHeight = parseInt(window.getComputedStyle(grid.nativeElement).height, 10) @@ -2413,10 +2466,11 @@ describe('IgxGrid - GroupBy', () => { const fix = TestBed.createComponent(DefaultGridComponent); const grid = fix.componentInstance.instance; fix.detectChanges(); - grid.groupBy([{ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false }, - { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }]); - tick(); + grid.groupBy([ + { fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } + ]); // there should be 3 groups at top level const groupsRecords = grid.groupsRecords; @@ -2451,7 +2505,7 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; grid.primaryKey = 'ID'; fix.detectChanges(); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); let groupRows = grid.groupsRowList.toArray(); @@ -2495,10 +2549,10 @@ describe('IgxGrid - GroupBy', () => { const fix = TestBed.createComponent(DefaultGridComponent); fix.componentInstance.enableSorting = true; const grid = fix.componentInstance.instance; - grid.sortingExpressions = [{ fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false }]; - tick(); - grid.groupingExpressions = [{ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }]; - tick(); + grid.sortingExpressions = + [{ fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }]; + grid.groupingExpressions = + [{ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }]; fix.detectChanges(); expect(grid.sortingExpressions.length).toEqual(2); @@ -2531,8 +2585,7 @@ describe('IgxGrid - GroupBy', () => { const hScrBar = grid.scr.nativeElement; expect(hScrBar.hidden).toBe(true); - grid.groupBy({ fieldName: 'Downloads', dir: SortingDirection.Asc }); - tick(); + grid.groupBy({fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance()}); fix.detectChanges(); expect(hScrBar.hidden).toBe(false); })); @@ -2569,8 +2622,8 @@ describe('IgxGrid - GroupBy', () => { tick(); fix.detectChanges(); grid.groupBy([ - { fieldName: 'Downloads', dir: SortingDirection.Asc }, - { fieldName: 'ProductName', dir: SortingDirection.Asc } + { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } ]); tick(); fix.detectChanges(); @@ -2590,8 +2643,8 @@ describe('IgxGrid - GroupBy', () => { grid.hideGroupedColumns = true; fix.detectChanges(); grid.groupBy([ - { fieldName: 'Downloads', dir: SortingDirection.Asc }, - { fieldName: 'ProductName', dir: SortingDirection.Asc } + { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } ]); tick(); fix.detectChanges(); @@ -2615,8 +2668,8 @@ describe('IgxGrid - GroupBy', () => { const grid = fix.componentInstance.instance; fix.detectChanges(); grid.groupBy([ - { fieldName: 'Downloads', dir: SortingDirection.Asc }, - { fieldName: 'ProductName', dir: SortingDirection.Asc } + { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } ]); tick(); fix.detectChanges(); @@ -2637,17 +2690,17 @@ describe('IgxGrid - GroupBy', () => { it('should update grouping expression when sorting a column first then grouping by it and changing sorting for it again', () => { const fix = TestBed.createComponent(DefaultGridComponent); const grid = fix.componentInstance.instance; - let strategy = new CustomSortingStrategy(); + const strategy = CustomSortingStrategy.instance(); fix.componentInstance.enableSorting = true; fix.detectChanges(); - grid.sort({ fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: false, strategy: new CustomSortingStrategy() }); + grid.sort({ fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: false, strategy: strategy }); + expect(grid.sortingExpressions).toEqual([{ fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: false, strategy: strategy }]); expect(grid.groupingExpressions).toEqual([]); - strategy = SortingStateDefaults.strategy; - grid.groupBy({ fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: false }); - grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); + grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); expect(grid.sortingExpressions).toEqual([{ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: strategy }]); expect(grid.groupingExpressions).toEqual([{ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: strategy }]); @@ -2656,29 +2709,28 @@ describe('IgxGrid - GroupBy', () => { it('should update grouping expression when sorting a column first then grouping by another and changing sorting for it', () => { const fix = TestBed.createComponent(DefaultGridComponent); const grid = fix.componentInstance.instance; - const strategy = SortingStateDefaults.strategy; fix.componentInstance.enableSorting = true; fix.detectChanges(); - grid.sort({ fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false }); - grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false }); + grid.sort({ fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); + grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); expect(grid.sortingExpressions).toEqual([ - { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: strategy }, - { fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: strategy } + { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } ]); expect(grid.groupingExpressions).toEqual([]); - grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false }); - grid.sort({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false }); + grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); + grid.sort({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); expect(grid.sortingExpressions).toEqual([ - { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: strategy }, - { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: strategy }, - { fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: strategy } + { fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() } ]); expect(grid.groupingExpressions).toEqual([{ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false, - strategy: strategy }]); + strategy: DefaultSortingStrategy.instance()}]); }); function sendInput(element, text, fix) { @@ -2815,5 +2867,5 @@ export class GroupByDataMoreColumnsComponent extends DataParent { public instance: IgxGridComponent; } -export class CustomSortingStrategy extends SortingStrategy { +export class CustomSortingStrategy extends DefaultSortingStrategy { } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts index 3846cf80ffc..81ab5b4c49f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts @@ -1,5 +1,5 @@ import { Component, ViewChild } from '@angular/core'; -import { async, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { async, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Calendar } from '../../calendar/index'; @@ -9,11 +9,10 @@ import { IgxGridHeaderComponent } from '../grid-header.component'; import { IgxGridComponent } from './grid.component'; import { IGridCellEventArgs } from '../grid-base.component'; import { IgxGridModule } from './index'; -import { IgxStringFilteringOperand } from '../../../public_api'; -import { first } from 'rxjs/operators'; import { IgxGridRowComponent } from './grid-row.component'; import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec'; - +import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { configureTestSuite } from '../../test-utils/configure-suite'; describe('IgxGrid - Column Pinning ', () => { @@ -232,7 +231,7 @@ describe('IgxGrid - Column Pinning ', () => { const currentColumn = 'ProductName'; const releasedColumn = 'Released'; - grid.sort({ fieldName: currentColumn, dir: SortingDirection.Asc }); + grid.sort({ fieldName: currentColumn, dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts index 1a59357ee5d..cd94980b975 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts @@ -2,13 +2,14 @@ import { Pipe, PipeTransform } from '@angular/core'; import { cloneArray } from '../../core/utils'; import { DataUtil } from '../../data-operations/data-util'; import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface'; -import { IGroupByResult, ISortingStrategy } from '../../data-operations/sorting-strategy'; +import { IGroupByResult } from '../../data-operations/grouping-strategy'; import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { ISortingExpression } from '../../data-operations/sorting-expression.interface'; +import { IgxGridAPIService } from './grid-api.service'; import { IgxGridComponent } from './grid.component'; -import { IgxGridBaseComponent } from '../grid-base.component'; +import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; import { GridBaseAPIService } from '../api.service'; -import { IgxGridAPIService } from './grid-api.service'; +import { IgxGridBaseComponent } from '../grid-base.component'; /** *@hidden @@ -19,24 +20,14 @@ import { IgxGridAPIService } from './grid-api.service'; }) export class IgxGridSortingPipe implements PipeTransform { - constructor(private gridAPI: GridBaseAPIService) { } - - public transform(collection: any[], expressions: ISortingExpression | ISortingExpression[], - id: string, pipeTrigger: number): any[] { - let strategy: ISortingStrategy; - const state = { expressions: [], strategy }; - state.expressions = this.gridAPI.get(id).sortingExpressions; + constructor() { } - if (!state.expressions.length) { + public transform(collection: any[], expressions: ISortingExpression[], pipeTrigger: number): any[] { + if (!expressions.length) { return collection; } - // DataUtil.sort needs a sorting strategy to start with, so it makes sense to start with the strategy from the first expression - // sorting-strategy.ts, sortDataRecursive method then takes care and use the corresponding strategy for each expression - strategy = expressions[0].strategy; - state.strategy = strategy; - - return DataUtil.sort(cloneArray(collection), state); + return DataUtil.sort(cloneArray(collection), expressions); } } @@ -54,7 +45,7 @@ export class IgxGridPreGroupingPipe implements PipeTransform { this.gridAPI = gridAPI; } - public transform(collection: any[], expression: ISortingExpression | ISortingExpression[], + public transform(collection: any[], expression: IGroupingExpression | IGroupingExpression[], expansion: IGroupByExpandState | IGroupByExpandState[], defaultExpanded: boolean, id: string, pipeTrigger: number): IGroupByResult { @@ -90,7 +81,7 @@ export class IgxGridPostGroupingPipe implements PipeTransform { this.gridAPI = gridAPI; } - public transform(collection: IGroupByResult, expression: ISortingExpression | ISortingExpression[], + public transform(collection: IGroupByResult, expression: IGroupingExpression | IGroupingExpression[], expansion: IGroupByExpandState | IGroupByExpandState[], defaultExpanded: boolean, id: string, groupsRecords: any[], pipeTrigger: number): any[] { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts index 9a481125e1e..f11c354d3cb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts @@ -1,20 +1,20 @@ import { async, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { IgxGridModule } from './index'; +import { IgxGridModule, IgxGridComponent } from './index'; import { SortingDirection } from '../../data-operations/sorting-expression.interface'; -import { IgxStringFilteringOperand } from '../../../public_api'; import { BasicGridSearchComponent } from '../../test-utils/grid-base-components.spec'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { GridWithAvatarComponent, GroupableGridSearchComponent, ScrollableGridSearchComponent } from '../../test-utils/grid-samples.spec'; import { IForOfState } from '../../directives/for-of/for_of.directive'; -import { wait } from '../../test-utils/ui-interactions.spec'; - +import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { configureTestSuite } from '../../test-utils/configure-suite'; +import { wait } from '../../test-utils/ui-interactions.spec'; describe('IgxGrid - search API', () => { configureTestSuite(); const CELL_CSS_CLASS = '.igx-grid__td'; - let fix, component, grid, fixNativeElement; + let fix, component, grid: IgxGridComponent, fixNativeElement; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -311,7 +311,7 @@ describe('IgxGrid - search API', () => { grid.findNext(searchString); - grid.sort({fieldName: 'JobTitle', dir: SortingDirection.Asc}); + grid.sort({fieldName: 'JobTitle', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); activeHighlight = rv.querySelector('.' + component.activeClass); @@ -319,7 +319,7 @@ describe('IgxGrid - search API', () => { expect(highlights.length).toBe(1); expect(activeHighlight).toBe(highlights[0]); - grid.sort({fieldName: 'JobTitle', dir: SortingDirection.Desc}); + grid.sort({fieldName: 'JobTitle', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const scrolledCell = grid.getCellByColumn(grid.data.length - 1, 'JobTitle').nativeElement; @@ -844,7 +844,9 @@ describe('IgxGrid - search API', () => { it('Should be able to navigate through highlights with grouping enabled', async () => { grid.groupBy({ fieldName: 'JobTitle', - dir: SortingDirection.Asc + dir: SortingDirection.Asc, + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); grid.findNext('Software'); await wait(); @@ -888,7 +890,9 @@ describe('IgxGrid - search API', () => { it('Should be able to react to changes in grouping', async () => { grid.groupBy({ fieldName: 'JobTitle', - dir: SortingDirection.Asc + dir: SortingDirection.Asc, + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); let cell = grid.getCellByColumn(1, 'JobTitle'); @@ -908,10 +912,14 @@ describe('IgxGrid - search API', () => { grid.groupBy([{ fieldName: 'JobTitle', - dir: SortingDirection.Asc + dir: SortingDirection.Asc, + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }, { fieldName: 'Company', - dir: SortingDirection.Desc + dir: SortingDirection.Desc, + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }]); fix.detectChanges(); @@ -922,7 +930,9 @@ describe('IgxGrid - search API', () => { grid.groupBy({ fieldName: 'JobTitle', - dir: SortingDirection.Desc + dir: SortingDirection.Desc, + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); grid.findNext('software'); @@ -936,7 +946,9 @@ describe('IgxGrid - search API', () => { it('Should be able to navigate through highlights with grouping and paging enabled', async () => { grid.groupBy({ fieldName: 'JobTitle', - dir: SortingDirection.Asc + dir: SortingDirection.Asc, + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); grid.paging = true; grid.perPage = 6; @@ -979,7 +991,9 @@ describe('IgxGrid - search API', () => { it('Should be able to properly handle perPage changes with gouping and paging', async () => { grid.groupBy({ fieldName: 'JobTitle', - dir: SortingDirection.Asc + dir: SortingDirection.Asc, + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); grid.paging = true; grid.perPage = 10; @@ -1022,7 +1036,9 @@ describe('IgxGrid - search API', () => { it('Should be able to properly handle navigating through collapsed rows', async () => { grid.groupBy({ fieldName: 'JobTitle', - dir: SortingDirection.Asc + dir: SortingDirection.Asc, + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); grid.findNext('software'); @@ -1056,7 +1072,9 @@ describe('IgxGrid - search API', () => { it('Should be able to properly handle navigating through collapsed rows with paging', async () => { grid.groupBy({ fieldName: 'JobTitle', - dir: SortingDirection.Asc + dir: SortingDirection.Asc, + ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }); grid.perPage = 5; @@ -1106,73 +1124,18 @@ describe('IgxGrid - search API', () => { expect(matches).toBe(0); }); - // function findNext(currentGrid: IgxGridComponent, text: string) { - // const promise = new Promise((resolve) => { - // currentGrid.verticalScrollContainer.onChunkLoad.subscribe((state) => { - // resolve(state); - // }); - - // currentGrid.findNext(text); - // }); - // return promise; - // } - - // function findPrev(currentGrid: IgxGridComponent, text: string) { - // const promise = new Promise((resolve) => { - // currentGrid.verticalScrollContainer.onChunkLoad.subscribe((state) => { - // resolve(state); - // }); - - // currentGrid.findPrev(text); - // }); - // return promise; - // } - - // function find(currentGrid: IgxGridComponent, text: string, findFunc: Function) { - // const promise = new Promise((resolve) => { - // let horizontalSubscription, verticalSubsription = null; - - // verticalSubsription = currentGrid.verticalScrollContainer.onChunkLoad.subscribe((state) => { - // horizontalSubscription.unsubscribe(); - // verticalSubsription.unsubscribe(); - // resolve(state); - // }); - - // horizontalSubscription = currentGrid.rowList.first.virtDirRow.onChunkLoad.subscribe((state) => { - // horizontalSubscription.unsubscribe(); - // verticalSubsription.unsubscribe(); - // resolve(state); - // }); - - // findFunc.call(currentGrid, text); - // }); - - // return promise; - // } + function findNext(currentGrid: IgxGridComponent, text: string) { + const promise = new Promise((resolve) => { + currentGrid.verticalScrollContainer.onChunkLoad.subscribe((state) => { + resolve(state); + }); + + currentGrid.findNext(text); + }); + return promise; + } function isInView(index, state: IForOfState): boolean { return index > state.startIndex && index <= state.startIndex + state.chunkSize; } - - // function findNextWithPaging(currentGrid: IgxGridComponent, searchString) { - // const result = new Promise((resolve) => { - // currentGrid.onPagingDone.subscribe((value) => { - // const pageNumber = value.current; - // resolve(pageNumber); - // }); - // currentGrid.findNext(searchString); - // }); - // return result; - // } - - // function findPreviousWithPaging(currentGrid: IgxGridComponent, searchString) { - // const result = new Promise((resolve) => { - // currentGrid.onPagingDone.subscribe((value) => { - // const pageNumber = value.current; - // resolve(pageNumber); - // }); - // currentGrid.findPrev(searchString); - // }); - // return result; - // } }); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts index cb3354f8f25..5585bc05b1f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts @@ -7,6 +7,7 @@ import { IgxGridModule } from './index'; import { GridTemplateStrings, ColumnDefinitions } from '../../test-utils/template-strings.spec'; import { BasicGridComponent } from '../../test-utils/grid-base-components.spec'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { configureTestSuite } from '../../test-utils/configure-suite'; const SORTING_ICON_NONE_CONTENT = 'none'; @@ -16,7 +17,7 @@ const SORTING_ICON_DESC_CONTENT = 'arrow_downward'; describe('IgxGrid - Grid Sorting', () => { configureTestSuite(); let fixture; - let grid; + let grid: IgxGridComponent; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -37,7 +38,7 @@ describe('IgxGrid - Grid Sorting', () => { it('Should sort grid ascending by column name', () => { const currentColumn = 'Name'; const lastNameColumn = 'LastName'; - grid.sort({fieldName: currentColumn, dir: SortingDirection.Asc, ignoreCase: false}); + grid.sort({fieldName: currentColumn, dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance()}); fixture.detectChanges(); @@ -51,7 +52,7 @@ describe('IgxGrid - Grid Sorting', () => { expect(grid.getCellByColumn(grid.data.length - 1, lastNameColumn).value).toEqual(expectedResult); // Ignore case on sorting set to true - grid.sort({fieldName: currentColumn, dir: SortingDirection.Asc, ignoreCase: true}); + grid.sort({fieldName: currentColumn, dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fixture.detectChanges(); expectedResult = 'ALex'; @@ -61,7 +62,7 @@ describe('IgxGrid - Grid Sorting', () => { it('Should sort grid descending by column name', () => { const currentColumn = 'Name'; // Ignore case on sorting set to false - grid.sort({fieldName: currentColumn, dir: SortingDirection.Desc, ignoreCase: false}); + grid.sort({fieldName: currentColumn, dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance()}); fixture.detectChanges(); let expectedResult = 'Rick'; @@ -71,7 +72,7 @@ describe('IgxGrid - Grid Sorting', () => { expect(grid.getCellByColumn(grid.data.length - 1, currentColumn).value).toEqual(expectedResult); // Ignore case on sorting set to true - grid.sort({ fieldName: currentColumn, dir: SortingDirection.Desc, ignoreCase: true}); + grid.sort({ fieldName: currentColumn, dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fixture.detectChanges(); expectedResult = 'Rick'; @@ -84,7 +85,7 @@ describe('IgxGrid - Grid Sorting', () => { it('Should not sort grid when trying to sort by invalid column', () => { const gridData = fixture.componentInstance.data; const invalidColumn = 'Age'; - grid.sort({fieldName: invalidColumn, dir: SortingDirection.Desc}); + grid.sort({fieldName: invalidColumn, dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance()}); let expectedResult = 'Jane'; expect(grid.getCellByColumn(0, 'Name').value).toEqual(expectedResult); @@ -97,7 +98,8 @@ describe('IgxGrid - Grid Sorting', () => { it('Should sort grid by current column by expression (Ascending)', () => { const currentColumn = 'ID'; - grid.sortingExpressions = [{ fieldName: currentColumn, dir: SortingDirection.Asc, ignoreCase: true }]; + grid.sortingExpressions = [{ fieldName: currentColumn, dir: SortingDirection.Asc, ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }]; fixture.detectChanges(); @@ -107,7 +109,8 @@ describe('IgxGrid - Grid Sorting', () => { it('Should sort grid by current column by expression (Descending with ignoreCase)', () => { const currentColumn = 'Name'; - grid.sortingExpressions = [{fieldName: currentColumn, dir: SortingDirection.Desc, ignoreCase: true }]; + grid.sortingExpressions = [{fieldName: currentColumn, dir: SortingDirection.Desc, ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }]; fixture.detectChanges(); @@ -120,8 +123,10 @@ describe('IgxGrid - Grid Sorting', () => { const secondColumn = 'Name'; const thirdColumn = 'LastName'; - grid.sortingExpressions = [{fieldName: secondColumn, dir: SortingDirection.Asc}, - {fieldName: firstColumn, dir: SortingDirection.Desc }]; + grid.sortingExpressions = [ + {fieldName: secondColumn, dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}, + {fieldName: firstColumn, dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]; fixture.detectChanges(); @@ -140,8 +145,10 @@ describe('IgxGrid - Grid Sorting', () => { expect(grid.sortingExpressions.length).toEqual(1); expect(grid.sortingExpressions[0].fieldName).toEqual(secondColumn); - grid.sortingExpressions = [{fieldName: secondColumn, dir: SortingDirection.Asc}, - {fieldName: firstColumn, dir: SortingDirection.Desc }]; + grid.sortingExpressions = [ + {fieldName: secondColumn, dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}, + {fieldName: firstColumn, dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]; fixture.detectChanges(); expect(grid.sortingExpressions.length).toEqual(2); @@ -158,8 +165,8 @@ describe('IgxGrid - Grid Sorting', () => { const secondColumn = 'Name'; const thirdColumn = 'LastName'; const exprs = [ - { fieldName: secondColumn, dir: SortingDirection.Asc }, - { fieldName: thirdColumn, dir: SortingDirection.Desc, ignoreCase: true} + { fieldName: secondColumn, dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: thirdColumn, dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } ]; grid.sortingExpressions = exprs; @@ -196,39 +203,16 @@ describe('IgxGrid - Grid Sorting', () => { expect(grid.getCellByColumn(grid.data.length - 1, firstColumn).value).toEqual(7); }); - it('Should sort grid by invalid expressions fieldName shouldn\'t change anything', () => { - const gridData = fixture.componentInstance.data; - const firstColumn = 'ID'; - const secondColumn = 'Name'; - const thirdColumn = 'LastName'; - const invalidExpressions = [{FieldName: secondColumn, dir: SortingDirection.Desc }, - {FieldName: firstColumn }]; - - grid.sortingExpressions = invalidExpressions; - - fixture.detectChanges(); - - let expectedResult = 'Jane'; - expect(grid.getCellByColumn(0, secondColumn).value).toEqual(expectedResult); - expectedResult = 'Brown'; - expect(grid.getCellByColumn(0, thirdColumn).value).toEqual(expectedResult); - expectedResult = 'Connor'; - expect(grid.getCellByColumn(grid.data.length - 1, secondColumn).value).toEqual(expectedResult); - expectedResult = 'Walker'; - expect(grid.getCellByColumn(grid.data.length - 1, thirdColumn).value).toEqual(expectedResult); - - grid.rowList.map((item, index) => - expect(grid.getCellByColumn(index, firstColumn).value).toEqual(gridData[index].ID)); - }); - // sort now allows only params of type ISortingExpression hence it is not possible to pass invalid expressions it(`Should sort grid by mixed valid and invalid expressions should update the data only by valid ones (through API)`, () => { const firstColumn = 'ID'; const secondColumn = 'Name'; const thirdColumn = 'LastName'; - const invalidAndValidExp = [{fieldName: secondColumn, dir: SortingDirection.Desc }, - {fieldName: firstColumn, dir: SortingDirection.Asc }]; + const invalidAndValidExp = [ + {fieldName: secondColumn, dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }, + {fieldName: firstColumn, dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]; grid.sort(invalidAndValidExp); @@ -316,15 +300,14 @@ describe('IgxGrid - Grid Sorting', () => { }); it('Should have a valid sorting icon when sorting using the API.', () => { - const firstHeaderCell = fixture.debugElement.query(By.css('.header-id')); const sortingIcon = fixture.debugElement.query(By.css('.sort-icon')); expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_NONE_CONTENT); - grid.sort({ fieldName: 'ID', dir: SortingDirection.Asc}); + grid.sort({ fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fixture.detectChanges(); expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_ASC_CONTENT); - grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc}); + grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fixture.detectChanges(); expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_DESC_CONTENT); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts index 9e93aade220..e954d89bbe7 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts @@ -9,6 +9,7 @@ import { By } from '@angular/platform-browser'; import { UIInteractions } from '../../test-utils/ui-interactions.spec'; import { DropPosition } from '../grid'; import { configureTestSuite } from '../../test-utils/configure-suite'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; describe('IgxTreeGrid - Indentation', () => { configureTestSuite(); @@ -58,7 +59,7 @@ describe('IgxTreeGrid - Indentation', () => { }); it('should persist the indentation after sorting', () => { - treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc }); + treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const rows = TreeGridFunctions.sortElementsVertically(TreeGridFunctions.getAllRows(fix)); @@ -213,7 +214,7 @@ describe('IgxTreeGrid - Indentation', () => { }); it('should persist the indentation after sorting', () => { - treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc }); + treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const rows = TreeGridFunctions.sortElementsVertically(TreeGridFunctions.getAllRows(fix)); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts index 28ea5c452d7..b1c3cc1b26e 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts @@ -12,10 +12,9 @@ import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec'; import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; import { By } from '@angular/platform-browser'; import { configureTestSuite } from '../../test-utils/configure-suite'; -import { IgxNumberFilteringOperand } from '../../../public_api'; -import { IgxGridCellComponent } from '../grid'; -import { IgxTreeGridCellComponent } from './tree-cell.component'; import { IgxToggleModule } from '../../directives/toggle/toggle.directive'; +import { IgxNumberFilteringOperand } from '../../data-operations/filtering-condition'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; const CSS_CLASS_BANNER = 'igx-banner'; @@ -488,7 +487,7 @@ describe('IgxTreeGrid - Integration', () => { it('should preserve updates after removing Sorting', () => { const grid = fix.componentInstance.treeGrid as IgxTreeGridComponent; - grid.sort({ fieldName: 'Age', dir: SortingDirection.Desc }); + grid.sort({ fieldName: 'Age', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); const childCell = grid.getCellByColumn(0, 'Age'); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts index f5d65218b9e..ce25f9d0d1e 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts @@ -20,6 +20,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { wait } from '../../test-utils/ui-interactions.spec'; import { transpileModule } from 'typescript'; import { TestabilityRegistry } from '@angular/core'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; describe('IgxTreeGrid - Selection', () => { configureTestSuite(); @@ -125,7 +126,7 @@ describe('IgxTreeGrid - Selection', () => { treeGrid.selectRows([treeGrid.getRowByIndex(0).rowID, treeGrid.getRowByIndex(4).rowID], true); fix.detectChanges(); - treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc }); + treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); // Verification indices are different since the sorting changes rows' positions. @@ -287,7 +288,7 @@ describe('IgxTreeGrid - Selection', () => { treeGrid.columnList.filter(c => c.field === 'Age')[0].sortable = true; fix.detectChanges(); - treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc }); + treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); // Verification indices are different since the sorting changes rows' positions. @@ -532,7 +533,7 @@ describe('IgxTreeGrid - Selection', () => { expect(treeGrid.selectedCells[0] instanceof IgxTreeGridCellComponent).toBe(true); expect(treeGrid.selectedCells[0].value).toBe(147); - treeGrid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false }); + treeGrid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); expect(treeGrid.selectedCells.length).toBe(1); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-sorting.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-sorting.spec.ts index d9537c47ab7..db89c7e1979 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-sorting.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-sorting.spec.ts @@ -5,6 +5,7 @@ import { IgxTreeGridModule } from './index'; import { IgxTreeGridSortingComponent } from '../../test-utils/tree-grid-components.spec'; import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; describe('IgxTreeGrid - Sorting', () => { configureTestSuite(); @@ -29,7 +30,8 @@ describe('IgxTreeGrid - Sorting', () => { describe('API sorting', () => { it('should sort descending all treeGrid levels by column name through API', () => { - treeGrid.sort({ fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: false }); + treeGrid.sort({ fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); // Verify first level records are desc sorted @@ -49,7 +51,7 @@ describe('IgxTreeGrid - Sorting', () => { }); it('should sort ascending all treeGrid levels by column name through API', () => { - treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc, ignoreCase: false }); + treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); // Verify first level records are asc sorted @@ -69,7 +71,8 @@ describe('IgxTreeGrid - Sorting', () => { }); it('should not sort treeGrid when trying to sort by invalid column through API', () => { - treeGrid.sort({ fieldName: 'TEST', dir: SortingDirection.Desc, ignoreCase: false }); + treeGrid.sort({ fieldName: 'TEST', dir: SortingDirection.Desc, ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); // Verify first level records with default order @@ -94,7 +97,7 @@ describe('IgxTreeGrid - Sorting', () => { expect(treeGrid.getCellByColumn(1, 'Age').value).toEqual(30); expect(treeGrid.getCellByColumn(4, 'Age').value).toEqual(35); - treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc, ignoreCase: false }); + treeGrid.sort({ fieldName: 'Age', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); // Verify first record of all 3 levels (sorted layout) @@ -119,8 +122,8 @@ describe('IgxTreeGrid - Sorting', () => { fix.detectChanges(); const exprs = [ - { fieldName: 'Name', dir: SortingDirection.Asc }, - { fieldName: 'Age', dir: SortingDirection.Desc } + { fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'Age', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } ]; treeGrid.sort(exprs); @@ -167,8 +170,8 @@ describe('IgxTreeGrid - Sorting', () => { fix.detectChanges(); const exprs = [ - { fieldName: 'Name', dir: SortingDirection.Asc }, - { fieldName: 'Age', dir: SortingDirection.Desc } + { fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'Age', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } ]; treeGrid.sort(exprs); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts index d65474ceddb..4b07c9d9376 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts @@ -62,7 +62,10 @@ export class IgxTreeGridFilteringPipe implements PipeTransform { public transform(hierarchyData: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number): ITreeGridRecord[] { const grid: IgxTreeGridComponent = this.gridAPI.get(id); - const state = { expressionsTree: expressionsTree }; + const state = { + expressionsTree: expressionsTree, + strategy: new TreeGridFilteringStrategy() + }; this.resetFilteredOutProperty(grid.records); @@ -73,7 +76,6 @@ export class IgxTreeGridFilteringPipe implements PipeTransform { return hierarchyData; } - DataUtil.mergeDefaultProperties(state, { strategy: new TreeGridFilteringStrategy() }); const result = this.filter(hierarchyData, state); const filteredData: any[] = []; this.expandAllRecursive(grid, result, grid.expansionStates, filteredData); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts index 7054c766465..2ccd21649ac 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts @@ -205,18 +205,16 @@ export class IgxTreeGridSortingPipe implements PipeTransform { public transform( hierarchicalData: ITreeGridRecord[], - expressions: ISortingExpression | ISortingExpression[], + expressions: ISortingExpression[], id: string, pipeTrigger: number): ITreeGridRecord[] { - const state = { expressions: [] }; const grid = this.gridAPI.get(id); - state.expressions = grid.sortingExpressions; let result: ITreeGridRecord[]; - if (!state.expressions.length) { + if (!expressions.length) { result = hierarchicalData; } else { - result = DataUtil.hierarchicalSort(hierarchicalData, state, undefined); + result = DataUtil.treeGridSort(hierarchicalData, expressions); } return result; diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts index bf3070b74dd..da04bce2a55 100644 --- a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts @@ -9,10 +9,11 @@ import { TestMethods } from '../exporter-common/test-methods.spec'; import { IgxCsvExporterService } from './csv-exporter'; import { CsvFileTypes, IgxCsvExporterOptions } from './csv-exporter-options'; import { CSVWrapper } from './csv-verification-wrapper.spec'; -import { IgxStringFilteringOperand } from '../../../public_api'; import { ReorderedColumnsComponent, GridIDNameJobTitleComponent } from '../../test-utils/grid-samples.spec'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { first } from 'rxjs/operators'; +import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { configureTestSuite } from '../../test-utils/configure-suite'; @@ -158,7 +159,7 @@ describe('CSV Grid Exporter', () => { const fix = TestBed.createComponent(GridIDNameJobTitleComponent); fix.detectChanges(); const grid = fix.componentInstance.grid; - grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true}); + grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fix.detectChanges(); const wrapper = await getExportedData(grid, options); @@ -170,18 +171,18 @@ describe('CSV Grid Exporter', () => { fix.detectChanges(); const grid = fix.componentInstance.grid; - grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true}); + grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fix.detectChanges(); let wrapper = await getExportedData(grid, options); wrapper.verifyData(wrapper.sortedSimpleGridData); - grid.sort({fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: true}); + grid.sort({fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fix.detectChanges(); wrapper = await getExportedData(grid, options); wrapper.verifyData(wrapper.sortedDescSimpleGridData); grid.clearSort(); - grid.sort({fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: true}); + grid.sort({fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fix.detectChanges(); wrapper = await getExportedData(grid, options); wrapper.verifyData(wrapper.simpleGridData); diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts index b803c9ad7ca..5949c88d2d7 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts @@ -8,10 +8,12 @@ import { IgxExcelExporterService } from './excel-exporter'; import { IgxExcelExporterOptions } from './excel-exporter-options'; import { JSZipWrapper } from './jszip-verification-wrapper.spec'; import { FileContentData } from './test-data.service.spec'; -import { IgxStringFilteringOperand, SortingDirection } from '../../../public_api'; import { ReorderedColumnsComponent, GridIDNameJobTitleComponent } from '../../test-utils/grid-samples.spec'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { first } from 'rxjs/operators'; +import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; +import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; +import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { configureTestSuite } from '../../test-utils/configure-suite'; @@ -197,7 +199,7 @@ describe('Excel Exporter', () => { fix.detectChanges(); const grid = fix.componentInstance.grid; - grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true}); + grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fix.detectChanges(); const wrapper = await getExportedData(grid, options); @@ -213,20 +215,20 @@ describe('Excel Exporter', () => { fix.detectChanges(); const grid = fix.componentInstance.grid; - grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true}); + grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fix.detectChanges(); let wrapper = await getExportedData(grid, options); wrapper.verifyDataFilesContent(actualData.simpleGridSortByName, 'Ascending sorted data should have been exported.'); - grid.sort({fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: true}); + grid.sort({fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fix.detectChanges(); wrapper = await getExportedData(grid, options); wrapper.verifyDataFilesContent(actualData.simpleGridSortByNameDesc(true), 'Descending sorted data should have been exported.'); grid.clearSort(); - grid.sort({fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: true}); + grid.sort({fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fix.detectChanges(); // wrapper = await getExportedData(grid, options); @@ -369,7 +371,7 @@ describe('Excel Exporter', () => { const grid = fix.componentInstance.grid; grid.columns[1].header = 'My header'; grid.columns[1].sortable = true; - grid.sort({fieldName: 'Name', dir: SortingDirection.Desc}); + grid.sort({fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance()}); const sortField = grid.sortingExpressions[0].fieldName; fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts index b406a84055c..d909c6982c1 100644 --- a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts +++ b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts @@ -207,13 +207,9 @@ export abstract class IgxBaseExporter { grid.sortingExpressions.length > 0 && !options.ignoreSorting) { - const sortingState = { - expressions: grid.sortingExpressions - }; - this._sort = cloneValue(grid.sortingExpressions[0]); - data = DataUtil.sort(data, sortingState); + data = DataUtil.sort(data, grid.sortingExpressions); } return data; diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts index 04f849cb1e0..e0667176f0a 100644 --- a/projects/igniteui-angular/src/public_api.ts +++ b/projects/igniteui-angular/src/public_api.ts @@ -37,14 +37,12 @@ export * from './lib/data-operations/filtering-strategy'; export * from './lib/data-operations/groupby-expand-state.interface'; export * from './lib/data-operations/groupby-record.interface'; export * from './lib/data-operations/groupby-state.interface'; +export * from './lib/data-operations/grouping-expression.interface'; +export * from './lib/data-operations/grouping-strategy'; export * from './lib/data-operations/sorting-expression.interface'; -export * from './lib/data-operations/sorting-state.interface'; export * from './lib/data-operations/sorting-strategy'; -export * from './lib/data-operations/stable-sorting-strategy'; export * from './lib/data-operations/paging-state.interface'; -export * from './lib/data-operations/data-state.interface'; export * from './lib/data-operations/data-util'; -export * from './lib/data-operations/data-container'; /** * Components diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts index 627be7f271c..d244b95f05e 100644 --- a/src/app/grid-groupby/grid-groupby.sample.ts +++ b/src/app/grid-groupby/grid-groupby.sample.ts @@ -1,9 +1,8 @@ import { Component, Injectable, ViewChild, OnInit, Inject } from '@angular/core'; -import { IgxGridComponent, SortingDirection, ISortingExpression, IgxInputGroupComponent } from 'igniteui-angular'; -import { IGridFocusChangeEventArgs } from 'projects/igniteui-angular/src/lib/grids/grid/grid.component'; -import { DisplayDensityToken, DisplayDensity, IDisplayDensityOptions } from 'projects/igniteui-angular/src/lib/core/displayDensity'; -import { detectChanges } from '@angular/core/src/render3'; +import {DataType, IgxButtonDirective, IgxColumnComponent, IgxGridComponent, SortingDirection, ISortingExpression } from 'igniteui-angular'; +import { DisplayDensity } from 'projects/igniteui-angular/src/lib/core/utils'; +import { DefaultSortingStrategy } from 'projects/igniteui-angular/src/public_api'; @Component({ providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact} }], @@ -82,7 +81,7 @@ export class GridGroupBySampleComponent implements OnInit { return; } } - this.grid1.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); + this.grid1.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() }); } toggleGroupedVisibility(event){ this.grid1.hideGroupedColumns = !event.checked; From a2b76151d5e589a973334742fc6531a724cac0d8 Mon Sep 17 00:00:00 2001 From: gedinakova Date: Tue, 13 Nov 2018 20:15:55 +0200 Subject: [PATCH 21/77] test(Exporters): #2982 Adding tests for exporting tree grid to CSV. --- .../services/csv/csv-exporter-grid.spec.ts | 97 ++++++++++++++++++- .../csv/csv-verification-wrapper.spec.ts | 46 +++++++++ .../excel/excel-exporter-grid.spec.ts | 56 +++++------ .../lib/services/excel/jszip-helper.spec.ts | 2 +- .../services/excel/test-data.service.spec.ts | 74 +++++++++++++- .../lib/test-utils/sample-test-data.spec.ts | 10 ++ 6 files changed, 250 insertions(+), 35 deletions(-) diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts index bf3070b74dd..0cd4c88f4e6 100644 --- a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts @@ -9,11 +9,12 @@ import { TestMethods } from '../exporter-common/test-methods.spec'; import { IgxCsvExporterService } from './csv-exporter'; import { CsvFileTypes, IgxCsvExporterOptions } from './csv-exporter-options'; import { CSVWrapper } from './csv-verification-wrapper.spec'; -import { IgxStringFilteringOperand } from '../../../public_api'; +import { IgxStringFilteringOperand, IgxTreeGridComponent, IgxNumberFilteringOperand } from '../../../public_api'; import { ReorderedColumnsComponent, GridIDNameJobTitleComponent } from '../../test-utils/grid-samples.spec'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { first } from 'rxjs/operators'; - +import { IgxTreeGridPrimaryForeignKeyComponent } from '../../test-utils/tree-grid-components.spec'; +import { IgxTreeGridModule } from '../../grids/tree-grid'; import { configureTestSuite } from '../../test-utils/configure-suite'; describe('CSV Grid Exporter', () => { @@ -27,9 +28,10 @@ describe('CSV Grid Exporter', () => { TestBed.configureTestingModule({ declarations: [ ReorderedColumnsComponent, - GridIDNameJobTitleComponent + GridIDNameJobTitleComponent, + IgxTreeGridPrimaryForeignKeyComponent ], - imports: [IgxGridModule.forRoot()] + imports: [IgxGridModule.forRoot(), IgxTreeGridModule] }) .compileComponents(); })); @@ -302,6 +304,88 @@ describe('CSV Grid Exporter', () => { wrapper.verifyData(''); }); + describe('', () => { + let fix; + let treeGrid: IgxTreeGridComponent; + beforeEach(() => { + fix = TestBed.createComponent(IgxTreeGridPrimaryForeignKeyComponent); + fix.detectChanges(); + treeGrid = fix.componentInstance.treeGrid; + }); + + it('should export tree grid as displayed.', async () => { + const wrapper = await getExportedData(treeGrid, options); + wrapper.verifyData(wrapper.treeGridData); + }); + + it('should export sorted tree grid properly.', async () => { + treeGrid.sort({fieldName: 'ID', dir: SortingDirection.Desc}); + options.ignoreSorting = true; + fix.detectChanges(); + + let wrapper = await getExportedData(treeGrid, options); + wrapper.verifyData(wrapper.treeGridData); + + options.ignoreSorting = false; + + wrapper = await getExportedData(treeGrid, options); + wrapper.verifyData(wrapper.treeGridDataSorted); + + treeGrid.clearSort(); + fix.detectChanges(); + + wrapper = await getExportedData(treeGrid, options); + wrapper.verifyData(wrapper.treeGridData); + }); + + it('should export filtered tree grid properly.', async () => { + treeGrid.filter('ID', 3, IgxNumberFilteringOperand.instance().condition('greaterThan')); + options.ignoreFiltering = true; + fix.detectChanges(); + + let wrapper = await getExportedData(treeGrid, options); + wrapper.verifyData(wrapper.treeGridData); + + options.ignoreFiltering = false; + + wrapper = await getExportedData(treeGrid, options); + wrapper.verifyData(wrapper.treeGridDataFiltered); + + treeGrid.clearFilter(); + fix.detectChanges(); + + wrapper = await getExportedData(treeGrid, options); + wrapper.verifyData(wrapper.treeGridData); + }); + + it('should export filtered and sorted tree grid properly.', async () => { + treeGrid.filter('ID', 3, IgxNumberFilteringOperand.instance().condition('greaterThan')); + fix.detectChanges(); + treeGrid.sort({fieldName: 'Name', dir: SortingDirection.Desc}); + fix.detectChanges(); + + const wrapper = await getExportedData(treeGrid, options); + wrapper.verifyData(wrapper.treeGridDataFilterSorted); + }); + + it('should fire \'onRowExport\' for each tree grid row.', async () => { + const rows = []; + + exporter.onRowExport.subscribe((value: IRowExportingEventArgs) => { + rows.push({ data: value.rowData, index: value.rowIndex }); + }); + + await getExportedData(treeGrid, options); + + expect(rows.length).toBe(8); + for (let i = 0; i < rows.length; i++) { + expect(rows[i].index).toBe(i); + expect(JSON.stringify(rows[i].data)).toBe(JSON.stringify(SampleTestData.employeeTreeDataDisplayOrder()[i])); + } + }); + + }); + function getExportedData(grid, csvOptions: IgxCsvExporterOptions) { const result = new Promise((resolve) => { exporter.onExportEnded.pipe(first()).subscribe((value) => { @@ -312,4 +396,9 @@ describe('CSV Grid Exporter', () => { }); return result; } + + async function exportAndVerify(component, csvOptions, expectedData, errorMessage = '') { + const wrapper = await getExportedData(component, csvOptions); + wrapper.verifyData(expectedData, errorMessage); + } }); diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-verification-wrapper.spec.ts b/projects/igniteui-angular/src/lib/services/csv/csv-verification-wrapper.spec.ts index 52d267a246c..1cdec9fc9d6 100644 --- a/projects/igniteui-angular/src/lib/services/csv/csv-verification-wrapper.spec.ts +++ b/projects/igniteui-angular/src/lib/services/csv/csv-verification-wrapper.spec.ts @@ -173,4 +173,50 @@ export class CSVWrapper { `Leslie Hansen${this._delimiter}9${this._delimiter}Associate Software Developer${this._eor}` + `Eduardo Ramirez${this._delimiter}10${this._delimiter}Manager${this._eor}`; } + + get treeGridData() { + return `ID${this._delimiter}ParentID${this._delimiter}Name${this._delimiter}JobTitle${this._delimiter}Age${this._eor}` + +`1${this._delimiter}-1${this._delimiter}Casey Houston${this._delimiter}Vice President${this._delimiter}32${this._eor}` + +`2${this._delimiter}1${this._delimiter}Gilberto Todd${this._delimiter}Director${this._delimiter}41${this._eor}` + +`3${this._delimiter}2${this._delimiter}Tanya Bennett${this._delimiter}Director${this._delimiter}29${this._eor}` + +`7${this._delimiter}2${this._delimiter}Debra Morton${this._delimiter}Associate Software Developer${this._delimiter}35${this._eor}` + +`4${this._delimiter}1${this._delimiter}Jack Simon${this._delimiter}Software Developer${this._delimiter}33${this._eor}` + +`6${this._delimiter}-1${this._delimiter}Erma Walsh${this._delimiter}CEO${this._delimiter}52${this._eor}` + +`10${this._delimiter}-1${this._delimiter}Eduardo Ramirez${this._delimiter}Manager${this._delimiter}53${this._eor}` + +`9${this._delimiter}10${this._delimiter}Leslie Hansen${this._delimiter}Associate Software Developer${this._delimiter}44${this._eor}`; + } + + get treeGridDataSorted() { + return `ID${this._delimiter}ParentID${this._delimiter}Name${this._delimiter}JobTitle${this._delimiter}Age${this._eor}` + +`10${this._delimiter}-1${this._delimiter}Eduardo Ramirez${this._delimiter}Manager${this._delimiter}53${this._eor}` + +`9${this._delimiter}10${this._delimiter}Leslie Hansen${this._delimiter}Associate Software Developer${this._delimiter}44${this._eor}` + +`6${this._delimiter}-1${this._delimiter}Erma Walsh${this._delimiter}CEO${this._delimiter}52${this._eor}` + +`1${this._delimiter}-1${this._delimiter}Casey Houston${this._delimiter}Vice President${this._delimiter}32${this._eor}` + +`4${this._delimiter}1${this._delimiter}Jack Simon${this._delimiter}Software Developer${this._delimiter}33${this._eor}` + +`2${this._delimiter}1${this._delimiter}Gilberto Todd${this._delimiter}Director${this._delimiter}41${this._eor}` + +`7${this._delimiter}2${this._delimiter}Debra Morton${this._delimiter}Associate Software Developer${this._delimiter}35${this._eor}` + +`3${this._delimiter}2${this._delimiter}Tanya Bennett${this._delimiter}Director${this._delimiter}29${this._eor}`; + } + + get treeGridDataFiltered() { + return `ID${this._delimiter}ParentID${this._delimiter}Name${this._delimiter}JobTitle${this._delimiter}Age${this._eor}` + +`1${this._delimiter}-1${this._delimiter}Casey Houston${this._delimiter}Vice President${this._delimiter}32${this._eor}` + +`2${this._delimiter}1${this._delimiter}Gilberto Todd${this._delimiter}Director${this._delimiter}41${this._eor}` + +`7${this._delimiter}2${this._delimiter}Debra Morton${this._delimiter}Associate Software Developer${this._delimiter}35${this._eor}` + +`4${this._delimiter}1${this._delimiter}Jack Simon${this._delimiter}Software Developer${this._delimiter}33${this._eor}` + +`6${this._delimiter}-1${this._delimiter}Erma Walsh${this._delimiter}CEO${this._delimiter}52${this._eor}` + +`10${this._delimiter}-1${this._delimiter}Eduardo Ramirez${this._delimiter}Manager${this._delimiter}53${this._eor}` + +`9${this._delimiter}10${this._delimiter}Leslie Hansen${this._delimiter}Associate Software Developer${this._delimiter}44${this._eor}`; + } + + get treeGridDataFilterSorted() { + return `ID${this._delimiter}ParentID${this._delimiter}Name${this._delimiter}JobTitle${this._delimiter}Age${this._eor}` + +`6${this._delimiter}-1${this._delimiter}Erma Walsh${this._delimiter}CEO${this._delimiter}52${this._eor}` + +`10${this._delimiter}-1${this._delimiter}Eduardo Ramirez${this._delimiter}Manager${this._delimiter}53${this._eor}` + +`9${this._delimiter}10${this._delimiter}Leslie Hansen${this._delimiter}Associate Software Developer${this._delimiter}44${this._eor}` + +`1${this._delimiter}-1${this._delimiter}Casey Houston${this._delimiter}Vice President${this._delimiter}32${this._eor}` + +`4${this._delimiter}1${this._delimiter}Jack Simon${this._delimiter}Software Developer${this._delimiter}33${this._eor}` + +`2${this._delimiter}1${this._delimiter}Gilberto Todd${this._delimiter}Director${this._delimiter}41${this._eor}` + +`7${this._delimiter}2${this._delimiter}Debra Morton${this._delimiter}Associate Software Developer${this._delimiter}35${this._eor}`; + } } diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts index d5fac532467..912943a8c6e 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts @@ -56,10 +56,7 @@ describe('Excel Exporter', () => { it('should export grid as displayed.', async () => { const currentGrid: IgxGridComponent = null; TestMethods.testRawData(currentGrid, async (grid) => { - const wrapper = await getExportedData(grid, options); - wrapper.verifyStructure(); - // wrapper.verifyTemplateFilesContent(); - wrapper.verifyDataFilesContent(actualData.simpleGridData); + await exportAndVerify(grid, options, actualData.simpleGridData); }); }); @@ -207,8 +204,8 @@ describe('Excel Exporter', () => { wrapper.verifyDataFilesContent(actualData.simpleGridSortByName); // XXX : ???? What's the point of this? - grid.clearSort(); - fix.detectChanges(); + // grid.clearSort(); + // fix.detectChanges(); }); it('should honor changes in applied sorting.', async () => { @@ -396,39 +393,38 @@ describe('Excel Exporter', () => { treeGrid = fix.componentInstance.treeGrid; }); - it('should export tree grid as displayed.', async () => { - const wrapper = await getExportedData(treeGrid, options); - await wrapper.verifyStructure(); - await wrapper.verifyDataFilesContent(actualData.simpleGridData); - }); - - it('should create excel groups to reflect the hierarchy.', async () => { - const wrapper = await getExportedData(treeGrid, options); - await wrapper.verifyStructure(); + it('should export tree grid as displayed with all groups expanded.', async () => { + await exportAndVerify(treeGrid, options, actualData.treeGridData); }); it('should export sorted tree grid properly.', async () => { treeGrid.sort({fieldName: 'ID', dir: SortingDirection.Desc}); + options.ignoreSorting = true; fix.detectChanges(); - let wrapper = await getExportedData(treeGrid, options); - await wrapper.verifyStructure(); - await wrapper.verifyDataFilesContent(actualData.simpleGridData); + await exportAndVerify(treeGrid, options, actualData.treeGridData); + + options.ignoreSorting = false; + await exportAndVerify(treeGrid, options, actualData.treeGridDataSorted); treeGrid.clearSort(); fix.detectChanges(); - - wrapper = await getExportedData(treeGrid, options); - await wrapper.verifyStructure(); - await wrapper.verifyDataFilesContent(actualData.simpleGridData); + await exportAndVerify(treeGrid, options, actualData.treeGridData); }); it('should export filtered tree grid properly.', async () => { treeGrid.filter('ID', 3, IgxNumberFilteringOperand.instance().condition('greaterThan')); + options.ignoreFiltering = true; fix.detectChanges(); - const wrapper = await getExportedData(treeGrid, options); - await wrapper.verifyStructure(); - await wrapper.verifyDataFilesContent(actualData.simpleGridData); + + await exportAndVerify(treeGrid, options, actualData.treeGridData); + + options.ignoreFiltering = false; + await exportAndVerify(treeGrid, options, actualData.treeGridDataFiltered); + + treeGrid.clearFilter(); + fix.detectChanges(); + await exportAndVerify(treeGrid, options, actualData.treeGridData); }); it('should export filtered and sorted tree grid properly.', async () => { @@ -437,9 +433,7 @@ describe('Excel Exporter', () => { treeGrid.sort({fieldName: 'Name', dir: SortingDirection.Desc}); fix.detectChanges(); - const wrapper = await getExportedData(treeGrid, options); - await wrapper.verifyStructure(); - await wrapper.verifyDataFilesContent(actualData.simpleGridData); + await exportAndVerify(treeGrid, options, actualData.treeGridDataFilteredSorted); }); }); @@ -483,4 +477,10 @@ describe('Excel Exporter', () => { return opts; } + + async function exportAndVerify(component, exportOptions, expectedData) { + const wrapper = await getExportedData(component, exportOptions); + await wrapper.verifyStructure(); + await wrapper.verifyDataFilesContent(expectedData); + } }); diff --git a/projects/igniteui-angular/src/lib/services/excel/jszip-helper.spec.ts b/projects/igniteui-angular/src/lib/services/excel/jszip-helper.spec.ts index 14b509c9c84..20bacf219b5 100644 --- a/projects/igniteui-angular/src/lib/services/excel/jszip-helper.spec.ts +++ b/projects/igniteui-angular/src/lib/services/excel/jszip-helper.spec.ts @@ -196,7 +196,7 @@ export class JSZipFiles { ` + -`Dimitar Davidkov2015-06-05T18:17:20Z` + `2015-06-05T18:17:26Z` }; diff --git a/projects/igniteui-angular/src/lib/services/excel/test-data.service.spec.ts b/projects/igniteui-angular/src/lib/services/excel/test-data.service.spec.ts index bda0743f602..8acb96cbe25 100644 --- a/projects/igniteui-angular/src/lib/services/excel/test-data.service.spec.ts +++ b/projects/igniteui-angular/src/lib/services/excel/test-data.service.spec.ts @@ -678,11 +678,81 @@ export class FileContentData { ` + ``; - this._worksheetData = - `0123145267368491051112613147151681718915191020`; + this._worksheetData = `0123145267368491051112613147151681718915191020`; + + return this.createData(); + } + + get treeGridData() { + this._sharedStringsData = + `count="21" uniqueCount="19">IDParentIDNameJobTitleAgeCasey HoustonVice PresidentGilberto ToddDirectorTanya BennettDebra MortonAssociate Software DeveloperJack SimonSoftware DeveloperErma WalshCEOEduardo RamirezManagerLeslie Hansen`; + + this._tableData = `ref="A1:E9" totalsRowShown="0"> + `; + + this._worksheetData = ` + + + + + +012341-1563221784132982972101135411213336-114155210-1161753910181144`; + + return this.createData(); + } + + get treeGridDataSorted() { + this._sharedStringsData = + `count="21" uniqueCount="19">IDParentIDNameJobTitleAgeEduardo RamirezManagerLeslie HansenAssociate Software DeveloperErma WalshCEOCasey HoustonVice PresidentJack SimonSoftware DeveloperGilberto ToddDirectorDebra MortonTanya Bennett`; + + this._tableData = `ref="A1:E9" totalsRowShown="0"> + `; + + this._worksheetData = ` + + + + + +0123410-1565391078446-1910521-11112324113143321151641721783532181629`; + + return this.createData(); + } + + get treeGridDataFiltered() { + this._sharedStringsData = + `count="19" uniqueCount="18">IDParentIDNameJobTitleAgeCasey HoustonVice PresidentGilberto ToddDirectorDebra MortonAssociate Software DeveloperJack SimonSoftware DeveloperErma WalshCEOEduardo RamirezManagerLeslie Hansen`; + + this._tableData = `ref="A1:E8" totalsRowShown="0"> + `; + + this._worksheetData = ` + + + + + +012341-156322178417291035411112336-113145210-1151653910171044`; return this.createData(); } + get treeGridDataFilteredSorted() { + this._sharedStringsData = + `count="19" uniqueCount="18">IDParentIDNameJobTitleAgeErma WalshCEOEduardo RamirezManagerLeslie HansenAssociate Software DeveloperCasey HoustonVice PresidentJack SimonSoftware DeveloperGilberto ToddDirectorDebra Morton`; + + this._tableData = `ref="A1:E8" totalsRowShown="0"> + `; + + this._worksheetData = ` + + + + + +012346-1565210-17853910910441-1111232411314332115164172171035`; + + return this.createData(); + } /* tslint:enable max-line-length */ } diff --git a/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts b/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts index 08cea343797..a0d5d36a59f 100644 --- a/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts @@ -1106,6 +1106,16 @@ export class SampleTestData { { ID: 10, ParentID: -1, Name: 'Eduardo Ramirez', JobTitle: 'Manager', Age: 53 } ]) + public static employeeTreeDataDisplayOrder = () => ([ + { ID: 1, ParentID: -1, Name: 'Casey Houston', JobTitle: 'Vice President', Age: 32 }, + { ID: 2, ParentID: 1, Name: 'Gilberto Todd', JobTitle: 'Director', Age: 41 }, + { ID: 3, ParentID: 2, Name: 'Tanya Bennett', JobTitle: 'Director', Age: 29 }, + { ID: 7, ParentID: 2, Name: 'Debra Morton', JobTitle: 'Associate Software Developer', Age: 35 }, + { ID: 4, ParentID: 1, Name: 'Jack Simon', JobTitle: 'Software Developer', Age: 33 }, + { ID: 6, ParentID: -1, Name: 'Erma Walsh', JobTitle: 'CEO', Age: 52 }, + { ID: 10, ParentID: -1, Name: 'Eduardo Ramirez', JobTitle: 'Manager', Age: 53 }, + { ID: 9, ParentID: 10, Name: 'Leslie Hansen', JobTitle: 'Associate Software Developer', Age: 44 } + ]) /** * Generates simple array of primitve values * @param rows Number of items to add to the array From e2329e686494816bcb51d8cc684dbd16771282ca Mon Sep 17 00:00:00 2001 From: Nikolay Alipiev Date: Wed, 14 Nov 2018 10:33:19 +0200 Subject: [PATCH 22/77] Add igxDropDown maxHeight input (#3005) * feat(igxDropDown): introduce itemsMaxHeight property #3001 * test(igxDropDown): test for max height #3001 * docs(igxDropDown): changelog update #3001 * test(igxCombo): adjust tests according to new dropdown structure #3001 * test(igxDropDown): add more tests #3001 --- CHANGELOG.md | 4 ++ .../src/lib/combo/combo.component.spec.ts | 9 +-- .../src/lib/drop-down/README.md | 1 + .../lib/drop-down/drop-down.component.html | 14 ++--- .../lib/drop-down/drop-down.component.spec.ts | 62 ++++++++++++++++--- .../src/lib/drop-down/drop-down.component.ts | 22 ++++++- 6 files changed, 91 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cf6da4f2544..60afaee7c4d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes for each version of this project will be documented in this file. +## 6.2.1 +- `igx-drop-down`: + - Added a new property `maxHeight`, defining the max height of the drop down. + ## 6.2.0 - Updated typography following the Material guidelines. Type system is now also optional and can be applied via class to the desired containers. [#2112](https://github.com/IgniteUI/igniteui-angular/pull/2112) - **Breaking change:** Applications using Ignite UI for Angular now require the `igx-typography` class to be applied on wrapping element, like the body element for instance. diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 08d857981d2..1fd0fee569f 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -1583,13 +1583,10 @@ describe('igxCombo', () => { expect(inputGroupBorder.classList.contains(CSS_CLASS_INPUTGROUP_BORDER)).toBeTruthy(); expect(inputGroupBorder.childElementCount).toEqual(0); - const dropDownWrapper = comboElement.children[1]; - expect(dropDownWrapper.classList.contains(CSS_CLASS_COMBO_DROPDOWN)).toBeTruthy(); - expect(dropDownWrapper.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(defaultComboDDWidth); - expect(dropDownWrapper.childElementCount).toEqual(1); - - const dropDownElement = dropDownWrapper.children[0]; + const dropDownElement = comboElement.children[1]; + expect(dropDownElement.classList.contains(CSS_CLASS_COMBO_DROPDOWN)).toBeTruthy(); expect(dropDownElement.classList.contains(CSS_CLASS_DROPDOWN)).toBeTruthy(); + expect(dropDownElement.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(defaultComboDDWidth); expect(dropDownElement.childElementCount).toEqual(1); const dropDownList = dropDownElement.children[0]; diff --git a/projects/igniteui-angular/src/lib/drop-down/README.md b/projects/igniteui-angular/src/lib/drop-down/README.md index c84b5380707..9a9017c50fe 100644 --- a/projects/igniteui-angular/src/lib/drop-down/README.md +++ b/projects/igniteui-angular/src/lib/drop-down/README.md @@ -36,6 +36,7 @@ The following inputs are available in the **igx-drop-down** component: | :--- | :--- | :--- | | `width` | string | Sets the tab width of the control. | | `height` | string | Sets the tab height of the control. | +| `maxHeight` | string | defines drop down maximum height | | `allowItemsFocus` | boolean | Allows items to take focus. | | `id` | string | Sets the drop down's id. | diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html index ebe190135af..1f83777e20d 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html @@ -1,7 +1,7 @@ -
-
- - - -
-
\ No newline at end of file +
+ + + +
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts index f375c711339..1f706de1c98 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts @@ -35,7 +35,9 @@ describe('IgxDropDown ', () => { IgxDropDownImageTestComponent, IgxDropDownTabsTestComponent, DropDownWithValuesComponent, - IgxDropDownSelectComponent + IgxDropDownSelectComponent, + DropDownWithMaxHeightComponent, + DropDownWithUnusedMaxHeightComponent ], imports: [ IgxDropDownModule, @@ -73,7 +75,7 @@ describe('IgxDropDown ', () => { expect(currentItem.componentInstance.index).toEqual(0); expect(list.collapsed).toEqual(false); - targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0].parent; + targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0]; expect(targetElement).toBeDefined(); mockObj.code = 'arrowdown'; @@ -97,7 +99,7 @@ describe('IgxDropDown ', () => { button.click(mockObj); tick(); fixture.detectChanges(); - targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0].parent; + targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0]; currentItem = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_SELECTED))[0]; mockObj.code = 'arrowdown'; @@ -105,7 +107,7 @@ describe('IgxDropDown ', () => { targetElement.triggerEventHandler('keydown', mockObj); tick(); fixture.detectChanges(); - targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0].parent; + targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0]; currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED)); mockObj.code = 'enter'; @@ -152,7 +154,7 @@ describe('IgxDropDown ', () => { let currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED)); expect(currentItem.componentInstance.index).toEqual(0); - targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)).parent; + targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)); mockObj.code = 'arrowdown'; mockObj.key = 'arrowdown'; targetElement.triggerEventHandler('keydown', mockObj); @@ -209,7 +211,7 @@ describe('IgxDropDown ', () => { tick(); fixture.detectChanges(); let currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED)); - targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)).parent; + targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)); mockObj.code = 'ArrowDown'; mockObj.key = 'ArrowDown'; targetElement.triggerEventHandler('keydown', mockObj); @@ -544,7 +546,7 @@ describe('IgxDropDown ', () => { fixture.detectChanges(); let currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED)); expect(currentItem).toBeDefined(); - targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)).parent; + targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)); targetElement.triggerEventHandler('keydown', mockObj); tick(); @@ -884,6 +886,32 @@ describe('IgxDropDown ', () => { expect(dropdown.selectedItem).toEqual(dropdownItem); expect(dropdown.collapsed).toEqual(true); })); + + it('Should properly set maxHeight option', fakeAsync(() => { + const fixture = TestBed.createComponent(DropDownWithMaxHeightComponent); + fixture.detectChanges(); + const dropdown = fixture.componentInstance.dropdown; + dropdown.toggle(); + tick(); + + fixture.detectChanges(); + const ddList = fixture.debugElement.query(By.css('.igx-drop-down__list')).nativeElement; + expect(parseInt(ddList.style.maxHeight, 10)).toEqual(ddList.offsetHeight); + expect(ddList.style.maxHeight).toBe('100px'); + })); + + it('Should properly set maxHeight option (maxHeight value larger than needed)', fakeAsync(() => { + const fixture = TestBed.createComponent(DropDownWithUnusedMaxHeightComponent); + fixture.detectChanges(); + const dropdown = fixture.componentInstance.dropdown; + dropdown.toggle(); + tick(); + + fixture.detectChanges(); + const ddList = fixture.debugElement.query(By.css('.igx-drop-down__list')).nativeElement; + expect(parseInt(ddList.style.maxHeight, 10)).toBeGreaterThan(ddList.offsetHeight); + expect(ddList.style.maxHeight).toBe('700px'); + })); }); describe('igxDropDown Unit tests', () => { @@ -1674,3 +1702,23 @@ class DropDownWithValuesComponent { { name: 'Product 4', id: 3 }, ]; } + +@Component({ + template: ` + + + {{ item.field }} + + ` +}) +class DropDownWithMaxHeightComponent extends DropDownWithValuesComponent {} + +@Component({ + template: ` + + + {{ item.field }} + + ` +}) +class DropDownWithUnusedMaxHeightComponent extends DropDownWithValuesComponent {} diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 18affc8d4a7..e483519a8f4 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -16,7 +16,8 @@ import { Optional, HostListener, Directive, - Inject + Inject, + HostBinding } from '@angular/core'; import { IgxSelectionAPIService } from '../core/selection'; import { IgxToggleDirective, IgxToggleModule } from '../directives/toggle/toggle.directive'; @@ -205,6 +206,25 @@ export class IgxDropDownBase implements OnInit, IToggleView { this.toggleDirective.id = value; } + @HostBinding('class.igx-drop-down') + cssClass = 'igx-drop-down'; + + /** + * Gets/Sets the drop down's container max height. + * + * ```typescript + * // get + * let maxHeight = this.dropdown.maxHeight; + * ``` + * + * ```html + * + * + * ``` + */ + @Input() + public maxHeight = null; + /** * Gets if the dropdown is collapsed * From 626156a11c0d61be10617e74028190153a9caaf3 Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Wed, 14 Nov 2018 14:28:37 +0200 Subject: [PATCH 23/77] fix(grid): MultiColumn headers should not be grouped #2944 (#2970) --- .../src/lib/grids/grid.common.ts | 2 +- .../src/lib/grids/grid/grid.component.ts | 2 +- .../src/lib/grids/grid/grid.directives.ts | 4 +- .../src/lib/grids/grid/grid.groupby.spec.ts | 40 ++++++++++++++++++- .../src/lib/test-utils/grid-samples.spec.ts | 10 +++++ .../lib/test-utils/template-strings.spec.ts | 13 ++++++ 6 files changed, 66 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid.common.ts b/projects/igniteui-angular/src/lib/grids/grid.common.ts index a210f9876cc..d94af25461c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid.common.ts +++ b/projects/igniteui-angular/src/lib/grids/grid.common.ts @@ -227,7 +227,7 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective { } get draggable(): boolean { - return this.column && (this.column.movable || this.column.groupable); + return this.column && (this.column.movable || (this.column.groupable && !this.column.columnGroup)); } public get icon(): HTMLElement { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 04bd26c3396..e17eea22039 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -567,7 +567,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do * @memberof IgxGridComponent */ get hasGroupableColumns(): boolean { - return this.columnList.some((col) => col.groupable); + return this.columnList.some((col) => col.groupable && !col.columnGroup); } private _setGroupColsVisibility(value) { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts index 774ce105b18..f979d50408c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts @@ -38,7 +38,7 @@ export class IgxGroupAreaDropDirective extends IgxDropDirective { const column: IgxColumnComponent = drag.column; const grid = column.grid; const isGrouped = grid.groupingExpressions.findIndex((item) => item.fieldName === column.field) !== -1; - if (column.groupable && !isGrouped) { + if (column.groupable && !isGrouped && !column.columnGroup) { drag.icon.innerText = 'group_work'; this.hovered = true; } else { @@ -58,7 +58,7 @@ export class IgxGroupAreaDropDirective extends IgxDropDirective { const column: IgxColumnComponent = drag.column; const grid = column.grid; const isGrouped = grid.groupingExpressions.findIndex((item) => item.fieldName === column.field) !== -1; - if (column.groupable && !isGrouped) { + if (column.groupable && !isGrouped && !column.columnGroup) { grid.groupBy({ fieldName: column.field, dir: SortingDirection.Asc, ignoreCase: column.sortingIgnoreCase, strategy: column.sortStrategy }); } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index ae99482c53d..aa86c221b7f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -17,6 +17,7 @@ import { HelperUtils} from '../../test-utils/helper-utils.spec'; import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { DataParent } from '../../test-utils/sample-test-data.spec'; +import { MultiColumnHeadersWithGroupingComponent } from '../../test-utils/grid-samples.spec'; describe('IgxGrid - GroupBy', () => { configureTestSuite(); @@ -36,7 +37,8 @@ describe('IgxGrid - GroupBy', () => { DefaultGridComponent, GroupableGridComponent, CustomTemplateGridComponent, - GroupByDataMoreColumnsComponent + GroupByDataMoreColumnsComponent, + MultiColumnHeadersWithGroupingComponent ], imports: [NoopAnimationsModule, IgxGridModule.forRoot()] }).compileComponents(); @@ -2733,6 +2735,42 @@ describe('IgxGrid - GroupBy', () => { strategy: DefaultSortingStrategy.instance()}]); }); + it('should not be able to group by ColumnGroup', (async () => { + const fix = TestBed.createComponent(MultiColumnHeadersWithGroupingComponent); + const grid = fix.componentInstance.grid; + fix.detectChanges(); + + // Try to group by a column group + const header = fix.debugElement.queryAll(By.css('.igx-grid__thead-title'))[0].nativeElement; + UIInteractions.simulatePointerEvent('pointerdown', header, 10, 10); + await wait(); + UIInteractions.simulatePointerEvent('pointermove', header, 150, 22); + await wait(50); + UIInteractions.simulatePointerEvent('pointermove', header, 100, 30); + await wait(50); + UIInteractions.simulatePointerEvent('pointerup', header, 100, 30); + await wait(50); + fix.detectChanges(); + + // verify there is no grouping + const groupRows = grid.groupsRowList.toArray(); + expect(groupRows.length).toBe(0); + expect(grid.groupingExpressions).toEqual([]); + })); + + it('should not show the group area if only columnGroups has property groupable set to true', (async () => { + const fix = TestBed.createComponent(MultiColumnHeadersWithGroupingComponent); + fix.detectChanges(); + const grid = fix.componentInstance.grid; + grid.getColumnByName('ID').groupable = false; + await wait(30); + fix.detectChanges(); + + const gridElement: HTMLElement = fix.nativeElement.querySelector('.igx-grid'); + // verify group area is not rendered + expect(gridElement.querySelectorAll('.igx-grid__grouparea').length).toEqual(0); + })); + function sendInput(element, text, fix) { element.nativeElement.value = text; element.nativeElement.dispatchEvent(new Event('input')); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index bcd434ba966..d217fc4d5dd 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -692,6 +692,16 @@ export class MultiColumnHeadersComponent extends BasicGridComponent { isPinned = false; } +@Component({ + template: `${GridTemplateStrings.declareGrid(`height="800px" width="500px"`, '', + ColumnDefinitions.multiColHeadersWithGroupingColumns)}` +}) +export class MultiColumnHeadersWithGroupingComponent extends BasicGridComponent { + data = SampleTestData.contactInfoDataFull(); + isPinned = false; +} + + @Component({ template: `${GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.nameAvatar)}` }) diff --git a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts index 391d1e58616..4659d8b60c7 100644 --- a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts @@ -361,6 +361,19 @@ export class ColumnDefinitions { `; + public static multiColHeadersWithGroupingColumns = ` + + + + + + + + + +`; + public static contactInfoGroupableColumns = ` From e3d5a3b69bb92b8cd04dc4a5183dbf36f67a96f7 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Wed, 14 Nov 2018 15:47:57 +0200 Subject: [PATCH 24/77] chore(*): Fixing the demos --- src/app/grid-groupby/grid-groupby.sample.ts | 14 +++++++------- src/app/grid/grid.sample.ts | 6 ++++-- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts index d244b95f05e..b2f61b29139 100644 --- a/src/app/grid-groupby/grid-groupby.sample.ts +++ b/src/app/grid-groupby/grid-groupby.sample.ts @@ -1,7 +1,7 @@ import { Component, Injectable, ViewChild, OnInit, Inject } from '@angular/core'; -import {DataType, IgxButtonDirective, IgxColumnComponent, IgxGridComponent, SortingDirection, ISortingExpression } from 'igniteui-angular'; -import { DisplayDensity } from 'projects/igniteui-angular/src/lib/core/utils'; +import { IgxGridComponent, SortingDirection, ISortingExpression, IGridFocusChangeEventArgs } from 'igniteui-angular'; +import { DisplayDensity, IDisplayDensityOptions, DisplayDensityToken } from 'projects/igniteui-angular/src/lib/core/density'; import { DefaultSortingStrategy } from 'projects/igniteui-angular/src/public_api'; @Component({ @@ -104,9 +104,9 @@ export class GridGroupBySampleComponent implements OnInit { groupMultiple() { const expr = [ - {fieldName: "ContactTitle", dir: 1, ignoreCase: true}, - {fieldName: "Address", dir: 2, ignoreCase: true}, - {fieldName: "Country", dir: 2, ignoreCase: true} + {fieldName: "ContactTitle", dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}, + {fieldName: "Address", dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}, + {fieldName: "Country", dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance()} ]; this.grid1.groupBy(expr); } @@ -117,8 +117,8 @@ export class GridGroupBySampleComponent implements OnInit { groupUngroupMultiple() { const expr = [ - {fieldName: "ContactTitle", dir: 1, ignoreCase: true}, - {fieldName: "Address", dir: 2, ignoreCase: true}, + {fieldName: "ContactTitle", dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}, + {fieldName: "Address", dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}, ]; this.grid1.groupingExpressions = expr; } diff --git a/src/app/grid/grid.sample.ts b/src/app/grid/grid.sample.ts index 047d0170409..a9dd377fc71 100644 --- a/src/app/grid/grid.sample.ts +++ b/src/app/grid/grid.sample.ts @@ -16,7 +16,8 @@ import { IgxExcelExporterOptions, IgxExporterOptionsBase, IgxExcelExporterService, - IgxStringFilteringOperand + IgxStringFilteringOperand, + DefaultSortingStrategy } from 'igniteui-angular'; import { RemoteService } from '../shared/remote.service'; import { LocalService } from '../shared/local.service'; @@ -96,7 +97,8 @@ export class GridSampleComponent implements OnInit, AfterViewInit { ]; this.grid2.sortingExpressions = []; - this.grid3.sortingExpressions = [{ fieldName: 'ProductID', dir: SortingDirection.Desc }]; + this.grid3.sortingExpressions = [{ fieldName: 'ProductID', dir: SortingDirection.Desc, ignoreCase: true, + strategy: DefaultSortingStrategy.instance() }]; this.grid3.paging = true; From 8150dc26679cb444babaaa085500a53cce417879 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 14 Nov 2018 16:22:34 +0200 Subject: [PATCH 25/77] feat(themes): add theme schemas (#3006) * refactor(themes): introduce presets as basis for component themes * refactor(themes): create schemas for more comopnents * refactor(themes): create schemas for more comopnents * refactor(themes): introduce presets as basis for component themes * refactor(themes): create schemas for more comopnents * refactor(themes): create schemas for more comopnents * refactor(themes): introduce presets as basis for component themes * refactor(themes): create schemas for more comopnents * refactor(themes): create schemas for more comopnents * refactor(themes): introduce presets as basis for component themes * refactor(themes): create schemas for more comopnents * refactor(themes): add schemas for the remaining component themes * refactor(themes): change presets to schemas * fix(themes): value resolver always returns string * refactor(themes): remove all $default-theme references * docs(themes): add docs for newly introduced functions * refactor(demos): update demos theme * build(themes): fix css theme not building * refactor(themes): optimize palette generation --- .../styles/base/utilities/_functions.scss | 202 ++++++++++++------ .../core/styles/base/utilities/_mixins.scss | 15 +- .../components/avatar/_avatar-theme.scss | 19 +- .../styles/components/badge/_badge-theme.scss | 25 +-- .../components/banner/_banner-theme.scss | 17 +- .../bottom-nav/_bottom-nav-theme.scss | 15 +- .../button-group/_button-group-theme.scss | 25 +-- .../components/button/_button-theme.scss | 45 +--- .../components/calendar/_calendar-theme.scss | 44 +--- .../styles/components/card/_card-theme.scss | 24 +-- .../components/carousel/_carousel-theme.scss | 23 +- .../components/checkbox/_checkbox-theme.scss | 12 +- .../styles/components/chip/_chip-theme.scss | 32 +-- .../column-hiding/_column-hiding-theme.scss | 21 +- .../styles/components/combo/_combo-theme.scss | 17 +- .../date-picker/_date-picker-theme.scss | 11 +- .../components/dialog/_dialog-theme.scss | 15 +- .../drop-down/_drop-down-theme.scss | 32 +-- .../_expansion-panel-theme.scss | 20 +- .../grid-filtering/_grid-filtering-theme.scss | 24 +-- .../grid-paginator/_grid-paginator-theme.scss | 15 +- .../grid-summary/_grid-summary-theme.scss | 21 +- .../grid-toolbar/_grid-toolbar-theme.scss | 28 +-- .../styles/components/grid/_grid-theme.scss | 87 +------- .../styles/components/icon/_icon-theme.scss | 15 +- .../components/input/_input-group-theme.scss | 74 +++---- .../styles/components/list/_list-theme.scss | 19 +- .../components/navbar/_navbar-theme.scss | 22 +- .../navdrawer/_navdrawer-theme.scss | 23 +- .../components/overlay/_overlay-theme.scss | 17 +- .../components/progress/_progress-theme.scss | 34 +-- .../styles/components/radio/_radio-theme.scss | 18 +- .../components/ripple/_ripple-theme.scss | 17 +- .../components/slider/_slider-theme.scss | 24 +-- .../components/snackbar/_snackbar-theme.scss | 15 +- .../components/switch/_switch-theme.scss | 26 +-- .../styles/components/tabs/_tabs-theme.scss | 32 +-- .../time-picker/_time-picker-theme.scss | 20 +- .../styles/components/toast/_toast-theme.scss | 14 +- .../components/tooltip/_tooltip-theme.scss | 18 +- .../src/lib/core/styles/themes/_index.scss | 84 ++++---- .../lib/core/styles/themes/_utilities.scss | 1 + .../themes/presets/igniteui-dark-green.scss | 4 +- .../core/styles/themes/schemas/_index.scss | 2 + .../dark-green/_components-theme.scss | 43 +--- .../dark-green/_index.scss | 0 .../dark-green/_vars.scss | 0 .../styles/themes/schemas/dark/_index.scss | 0 .../styles/themes/schemas/light/_avatar.scss | 21 ++ .../styles/themes/schemas/light/_badge.scss | 9 + .../styles/themes/schemas/light/_banner.scss | 20 ++ .../themes/schemas/light/_bottom-nav.scss | 12 ++ .../themes/schemas/light/_button-group.scss | 38 ++++ .../styles/themes/schemas/light/_button.scss | 108 ++++++++++ .../themes/schemas/light/_calendar.scss | 87 ++++++++ .../styles/themes/schemas/light/_card.scss | 20 ++ .../themes/schemas/light/_carousel.scss | 17 ++ .../themes/schemas/light/_checkbox.scss | 20 ++ .../styles/themes/schemas/light/_chip.scss | 64 ++++++ .../themes/schemas/light/_column-hiding.scss | 7 + .../styles/themes/schemas/light/_combo.scss | 12 ++ .../themes/schemas/light/_date-picker.scss | 3 + .../styles/themes/schemas/light/_dialog.scss | 12 ++ .../themes/schemas/light/_drop-down.scss | 58 +++++ .../schemas/light/_expansion-panel.scss | 29 +++ .../themes/schemas/light/_grid-filtering.scss | 33 +++ .../schemas/light/_grid-pagination.scss | 14 ++ .../themes/schemas/light/_grid-summary.scss | 31 +++ .../themes/schemas/light/_grid-toolbar.scss | 57 +++++ .../styles/themes/schemas/light/_grid.scss | 188 ++++++++++++++++ .../styles/themes/schemas/light/_icon.scss | 9 + .../styles/themes/schemas/light/_index.scss | 80 +++++++ .../themes/schemas/light/_input-group.scss | 96 +++++++++ .../styles/themes/schemas/light/_list.scss | 26 +++ .../styles/themes/schemas/light/_navbar.scss | 13 ++ .../themes/schemas/light/_navdrawer.scss | 43 ++++ .../styles/themes/schemas/light/_overlay.scss | 6 + .../themes/schemas/light/_progress.scss | 49 +++++ .../styles/themes/schemas/light/_radio.scss | 19 ++ .../styles/themes/schemas/light/_ripple.scss | 6 + .../styles/themes/schemas/light/_slider.scss | 32 +++ .../themes/schemas/light/_snackbar.scss | 15 ++ .../styles/themes/schemas/light/_switch.scss | 33 +++ .../styles/themes/schemas/light/_tabs.scss | 55 +++++ .../themes/schemas/light/_time-picker.scss | 33 +++ .../styles/themes/schemas/light/_toast.scss | 11 + .../styles/themes/schemas/light/_tooltip.scss | 18 ++ src/styles/igniteui-theme.scss | 14 +- 88 files changed, 1800 insertions(+), 929 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/_index.scss rename projects/igniteui-angular/src/lib/core/styles/themes/{presets => schemas}/dark-green/_components-theme.scss (83%) rename projects/igniteui-angular/src/lib/core/styles/themes/{presets => schemas}/dark-green/_index.scss (100%) rename projects/igniteui-angular/src/lib/core/styles/themes/{presets => schemas}/dark-green/_vars.scss (100%) create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-picker.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss index f1b63f6414b..2f4696d6735 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss @@ -72,6 +72,8 @@ @return lighten(desaturate($color, 12.9), 9.1); } @else if ($saturation == 400) { @return lighten(desaturate($color, 6.6), 4.1); + } @else if ($saturation == 500) { + @return $color; } @else if ($saturation == 600) { @return darken(saturate($color, 12.4), 5.1); } @else if ($saturation == 700) { @@ -230,41 +232,50 @@ /// @access private /// @group Palettes /// @requires {function} gen-color +/// @requires {function} text-contrast +/// @requires {function} extend /// @param {Color} $color - The base color used to generate the palette. -/// @returns {Map} - A map consisting of 26 color variations. -@function generate-palette($color) { - @return ( - 50: gen-color($color, 50), - 100: gen-color($color, 100), - 200: gen-color($color, 200), - 300: gen-color($color, 300), - 400: gen-color($color, 400), - 500: $color, - 600: gen-color($color, 600), - 700: gen-color($color, 700), - 800: gen-color($color, 800), - 900: gen-color($color, 900), - A100: gen-color($color, 'A100'), - A200: gen-color($color, 'A200'), - A400: gen-color($color, 'A400'), - A700: gen-color($color, 'A700'), - contrast: ( - 50: text-contrast(gen-color($color, 50)), - 100: text-contrast(gen-color($color, 100)), - 200: text-contrast(gen-color($color, 200)), - 300: text-contrast(gen-color($color, 300)), - 400: text-contrast(gen-color($color, 400)), - 500: text-contrast($color), - 600: text-contrast(gen-color($color, 600)), - 700: text-contrast(gen-color($color, 700)), - 800: text-contrast(gen-color($color, 800)), - 900: text-contrast(gen-color($color, 900)), - A100: text-contrast(gen-color($color, 'A100')), - A200: text-contrast(gen-color($color, 'A200')), - A400: text-contrast(gen-color($color, 'A400')), - A700: text-contrast(gen-color($color, 'A700')), - ) - ); +/// @param {List} $saturations - The saturation list of color variants. +//// Based on the Material color system. +/// @returns {Map} - A map consisting of 14 color variations and 14 +/// text contrast colors for each variation. +@function generate-palette($color, $saturations) { + $shades: (); + $contrasts: (); + + @each $saturation in $saturations { + $shade: gen-color($color, $saturation); + $contrast: text-contrast($shade); + + $shades: map-merge($shades, ($saturation: $shade)); + $contrasts: map-merge($contrasts, ($saturation: $contrast)); + } + @return extend($shades, (contrast: $contrasts)); +} + +/// Generates grayscale color palette from a color. +/// @access private +/// @group Palettes +/// @requires {function} text-contrast +/// @requires {function} extend +/// @param {Color} $color - The base color used to generate the palette. +/// @param {Map} $shades - A map of variations as keys and opacities as values. +/// Based on the Material color system. +/// @returns {Map} - A map consisting of 10 grayscale color variations and 10 +/// text contrast colors for each variation. +@function grayscale-palette($color, $shades) { + $colors: (); + $contrasts: (); + + @each $saturation, $opacity in $shades { + $shade: rgba(grayscale($color), $opacity); + $contrast: text-contrast(hexrgba($shade)); + + $colors: map-merge($colors, ($saturation: $shade)); + $contrasts: map-merge($contrasts, ($saturation: $contrast)); + } + + @return extend($colors, (contrast: $contrasts)); } /// Generates a color palette. @@ -277,6 +288,7 @@ /// @param {Color} $success [#4eb862] - The success color used throughout the application. /// @param {Color} $warn [#fbb13c] - The warning color used throughout the application. /// @param {Color} $error [#ff134a] - The error color used throughout the application. +/// @param {Color} $grays [#000] - The color used for generating the grayscale palette. /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`, /// `info`, `success`, `warn`, and `error` colors. @function igx-palette( @@ -285,10 +297,15 @@ $info: #1377d5, $success: #4eb862, $warn: #fbb13c, - $error: #ff134a + $error: #ff134a, + $grays: #000 ) { - $primary-palette: generate-palette($primary); - $secondary-palette: generate-palette($secondary); + $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700'); + $shades: (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87); + + $primary-palette: generate-palette($primary, $saturations); + $secondary-palette: generate-palette($secondary, $saturations); + $grayscale-palette: grayscale-palette($grays, $shades); // @debug 'Primary Colors Palette: #{$primary-palette}'; // @debug 'secondary Colors Palette: #{$secondary-palette}'; @@ -297,34 +314,11 @@ @return ( primary: $primary-palette, secondary: $secondary-palette, + grays: $grayscale-palette, info: (500: $info), success: (500: $success), warn: (500: $warn), - error: (500: $error), - grays: ( - 50: rgba(0, 0, 0, .02), - 100: rgba(0, 0, 0, .04), - 200: rgba(0, 0, 0, .08), - 300: rgba(0, 0, 0, .12), - 400: rgba(0, 0, 0, .26), - 500: rgba(0, 0, 0, .38), - 600: rgba(0, 0, 0, .54), - 700: rgba(0, 0, 0, .62), - 800: rgba(0, 0, 0, .74), - 900: rgba(0, 0, 0, .87), - contrast: ( - 50: text-contrast(hexrgba(rgba(0, 0, 0, .02))), - 100: text-contrast(hexrgba(rgba(0, 0, 0, .04))), - 200: text-contrast(hexrgba(rgba(0, 0, 0, .08))), - 300: text-contrast(hexrgba(rgba(0, 0, 0, .12))), - 400: text-contrast(hexrgba(rgba(0, 0, 0, .26))), - 500: text-contrast(hexrgba(rgba(0, 0, 0, .38))), - 600: text-contrast(hexrgba(rgba(0, 0, 0, .54))), - 700: text-contrast(hexrgba(rgba(0, 0, 0, .62))), - 800: text-contrast(hexrgba(rgba(0, 0, 0, .74))), - 900: text-contrast(hexrgba(rgba(0, 0, 0, .87))), - ) - ) + error: (500: $error) ); } @@ -379,9 +373,9 @@ } /// Splits a string into a list by a given separator. +/// @access private /// @param {string} $string - The string to split. /// @param {string} $separator - The string separator to split the string by. -/// @function str-split($string, $separator) { $split-arr: (); $index : str-index($string, $separator); @@ -395,7 +389,7 @@ @return $split-arr; } -/// @ignore +// @ignore @function get-theme($themes, $theme) { @if type-of($themes) == 'map' and map-has-key($themes, $theme) { @return map-get($themes, $theme); @@ -407,3 +401,83 @@ @return call((#{$theme}-theme)); } } + +/// Returns a value for a given instruction map, where the +/// keys of the map are the names of the functions to be called, +/// and the value for a given key is the arguments the function +/// should be called with. +/// The instruction set is executed left-to-right. The output of +/// the first instruction is then passed as input to the next, and so on. +/// @access private +/// @param {Map} $ctx - The instruction map to be used. +/// @param {List | Map} $extra [null] - Additional arguments to be passed during function calls. +/// Will only be applied for `igx-color` and `igx-contrast-color` functions. +/// @example scss Resolve `igx-color` and apply 80% opacity +/// $instructions: ( +/// igx-color: ('primary', 500), +/// rgba: .2 +/// ); +/// // $some-palette is a palette we pass as extra arguments +/// $resolved-color: resolve-value($instructions, $some-palette); +/// +@function resolve-value($ctx, $extra: null) { + $result: null; + @each $fn, $args in $ctx { + @if function-exists($fn) { + @if $result == null and ($fn == 'igx-color' or $fn == 'igx-contrast-color') { + $result: call(get-function($fn), $extra, $args...); + } @else if $result != null { + $result: call(get-function($fn), $result, $args...) + } @else { + $result: call(get-function($fn), $args...) + } + } + } + @return $result; +} + +/// Applies an `igx-palette` to a given theme schema. +/// @access private +/// @param {Map} $schema - A theme schema. +/// @param {Map} $palette - An igx-palette map. +/// @requires {function} resolve-value +/// @example scss Apply an `igx-palette` to theme schema +/// $custom-palette: igx-palette($primary: red, $secondary: blue); +/// $custom-schema: ( +/// my-color: ( +/// igx-color: ('primary', 800), +/// rgba: .5 +/// ), +/// roundness: 5px +/// ); +/// $theme: apply-palette($custom-schema, $custom-palette); // A map with palette values resolved. +/// @returns {Map} - A map with the resolved palette values. +@function apply-palette($schema, $palette) { + $result: (); + @each $key, $value in $schema { + @if type-of($value) == 'map' { + $result: extend($result, (#{$key}: resolve-value($value, $palette))); + } @else { + $result: extend($result, (#{$key}: $value)); + } + } + @return $result; +} + +/// Returns true if the scope where it's called +/// is the root of the document. +/// @access private +/// @example scss Check if the current scope is root +/// @mixin smart-mixin() { +/// $scope: if(is-root(), ':root', '&'); +/// +/// #{$scope} { +/// /* style rules here */ +/// } +/// } +/// +@function is-root { + @each $selector in & { + @return if($selector == null, true, false); + } +} diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss index dfca6504faf..840cf43c96d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss @@ -222,7 +222,6 @@ /// Ensures the operation is done only once. /// @access private /// @param {map} $theme - The component theme to get the -/// @example scss Convert theme colors to css variables. /// @requires {mixin} css-vars-from-theme @mixin igx-root-css-vars($theme) { $name: map-get($theme, 'name'); @@ -230,20 +229,20 @@ @if map-get($themes, $name) == null { $id: unique-id(); $themes: map-merge($themes, (#{$name}: $id)) !global; - - :root { - @include css-vars-from-theme($theme); - } + @include igx-css-vars($theme); } } -/// Add theme colors scoped to a specific element +/// Add theme colors to a scope. /// @access public /// @param {map} $theme - The component theme to get the -/// @example scss Convert theme colors to css variables. /// @requires {mixin} css-vars-from-theme @mixin igx-css-vars($theme) { - @include css-vars-from-theme($theme); + $scope: if(is-root(), ':root', '&'); + + #{$scope} { + @include css-vars-from-theme($theme); + } } /// Scopes CSS rules to a predefined top-level parent selector. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss index 0809fe9971d..d0a0a7654fa 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss @@ -23,25 +23,14 @@ /// @include igx-avatar($my-avatar-theme); @function igx-avatar-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $icon-background: null, $icon-color: null, $initials-background: null, $initials-color: null, $image-background: null ) { - $default-theme: ( - name: 'igx-avatar', - icon-background: igx-color($palette, 'grays', 400), - icon-color: igx-color($palette, 'grays', 800), - initials-background: igx-color($palette, 'grays', 400), - initials-color: igx-color($palette, 'grays', 800), - image-background: transparent - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-avatar'), $palette); @if not($icon-color) and $icon-background { $icon-color: text-contrast($icon-background); @@ -51,13 +40,13 @@ $initials-color: text-contrast($initials-background); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, icon-background: $icon-background, icon-color: $icon-color, initials-background: $initials-background, initials-color: $initials-color, - image-background: $image-background, + image-background: $image-background )); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss index 423f1e90f33..0ab4500bfe4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss @@ -32,7 +32,7 @@ /// @include igx-css-vars($my-badge-theme); @function igx-badge-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $icon-color: null, $text-color: null, @@ -42,19 +42,10 @@ $disable-shadow: true, $disable-border: true ) { - $default-theme: ( - name: 'igx-badge', - icon-color: #fff, - text-color: #fff, - border-color: #fff, - background-color: igx-color($palette, 'primary', 500), - badge-shadow: if($disable-shadow == true, none, igx-elevation($elevations, 1)), - border-width: if($disable-border == true, 0, rem(1px)), - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $badge-shadow: if($disable-shadow == true, none, igx-elevation($elevations, 1)); + $border-width: if($disable-border == true, 0, rem(1px)); + + $theme: apply-palette(map-get($schema, 'igx-badge'), $palette); @if not($icon-color) and $background-color { $icon-color: text-contrast($background-color); @@ -64,12 +55,14 @@ $text-color: text-contrast($background-color); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, icon-color: $icon-color, text-color: $text-color, border-color: $border-color, - background-color: $background-color + background-color: $background-color, + badge-shadow: $badge-shadow, + border-width: $border-width )); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss index b5d574bd619..ce67fa35d2f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss @@ -20,31 +20,20 @@ /// @include igx-banner($my-banner-theme); @function igx-banner-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $banner-background: null, $banner-message-color: null, $banner-border-color: null, $banner-illustration-background: null, $banner-illustration-color: null ) { - $default-theme: ( - name: 'igx-banner', - banner-background: #fff, - banner-message-color: igx-color($palette, 'grays', 900), - banner-border-color: igx-color($palette, 'grays', 400), - banner-illustration-background: igx-color($palette, 'grays', 100), - banner-illustration-color: igx-color($palette, 'grays', 900) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-banner'), $palette); @if not($banner-message-color) and $banner-background { $banner-message-color: text-contrast($banner-background); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, banner-background: $banner-background, banner-message-color: $banner-message-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss index 18a1bb2e175..f59d5767ff8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss @@ -22,28 +22,19 @@ /// @include igx-bottom-nav($my-tabbar-theme); @function igx-bottom-nav-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background: null, $idle-item-color: null, $active-item-color: null ) { - $default-theme: ( - name: 'igx-bottom-nav', - background: #fff, - idle-item-color: igx-color($palette, 'grays', 700), - active-item-color: igx-color($palette, 'primary') - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-bottom-nav'), $palette); @if not($idle-item-color) and $background { $idle-item-color: rgba(text-contrast($background), .7); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, background: $background, idle-item-color: $idle-item-color, 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 index e1309def362..98ba6f43c6a 100644 --- 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 @@ -36,7 +36,7 @@ /// @include igx-button-group($my-button-group-theme); @function igx-button-group-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $item-text-color: null, $item-background: null, @@ -52,26 +52,7 @@ $item-selected-background: null, $item-selected-border-color: null ) { - $default-theme: ( - name: 'igx-button-group', - item-text-color: igx-color($palette, 'grays', 700), - item-background: #fff, - item-border-color: transparent, - - item-hover-text-color: igx-color($palette, 'grays', 800), - item-hover-background: igx-color($palette, 'grays', 400), - - item-selected-text-color: igx-color($palette, 'grays', 800), - item-selected-background: igx-color($palette, 'grays', 400), - item-selected-border-color: rgba(igx-color($palette, 'grays', 600), .12), - - disabled-text-color: igx-color($palette, 'grays', 400), - disabled-background-color: igx-color($palette, 'grays', 100) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-button-group'), $palette); @if not($item-text-color) and $item-background { $item-text-color: text-contrast($item-background); @@ -105,7 +86,7 @@ $disabled-text-color: rgba(text-contrast($item-background), .3); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, item-text-color: $item-text-color, item-background: $item-background, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index 91784d11989..b9e3de46344 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -56,7 +56,7 @@ /// @include igx-button($my-button-theme); @function igx-button-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $button-roundness: null, @@ -91,46 +91,7 @@ $disabled-color: null, $disabled-background: null ) { - $default-theme: ( - name: 'igx-button', - button-roundness: 4px, - - flat-text-color: igx-color($palette, 'secondary', 500), - flat-background: transparent, - - flat-hover-background: rgba(igx-color($palette, 'secondary'), .05), - flat-hover-text-color: igx-color($palette, 'secondary', 500), - - flat-focus-background: rgba(igx-color($palette, 'secondary', 400), .12), - flat-focus-text-color: igx-color($palette, 'secondary', 500), - raised-background: igx-color($palette, 'secondary', 500), - raised-text-color: igx-contrast-color($palette, 'secondary', 500), - raised-hover-background: igx-color($palette, 'secondary', 300), - raised-hover-text-color: igx-contrast-color($palette, 'secondary', 300), - raised-focus-background: igx-color($palette, 'secondary', 300), - raised-focus-text-color: igx-contrast-color($palette, 'secondary', 300), - - fab-text-color: igx-contrast-color($palette, 'secondary', 500), - fab-background: igx-color($palette, 'secondary', 500), - fab-hover-text-color: igx-contrast-color($palette, 'secondary', 300), - fab-hover-background: igx-color($palette, 'secondary', 300), - fab-focus-background: igx-color($palette, 'secondary', 300), - fab-focus-text-color: igx-contrast-color($palette, 'secondary', 300), - - icon-color: igx-color($palette, 'grays', 800), - icon-background: transparent, - icon-hover-background: igx-color($palette, 'grays', 100), - icon-hover-color: igx-color($palette, 'grays', 800), - icon-focus-background: igx-color($palette, 'grays', 400), - icon-focus-color: igx-color($palette, 'grays', 800), - - disabled-color: igx-color($palette, 'grays', 400), - disabled-background: igx-color($palette, 'grays', 100) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-button'), $palette); @if not($flat-text-color) and $flat-background { $flat-text-color: text-contrast($flat-background); @@ -212,7 +173,7 @@ $icon-hover-color: text-contrast($icon-hover-background); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, button-roundness: $button-roundness, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss index 1ec8d424967..1f8c0e77453 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss @@ -60,7 +60,7 @@ /// @include igx-calendar($my-calendar-theme); @function igx-calendar-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $content-background: null, $content-text-color: null, @@ -94,45 +94,7 @@ $date-disabled-text-color: null ) { - $default-theme: ( - name: 'igx-calendar', - - content-background: #fff, - content-text-color: igx-color($palette, 'grays', 900), - - header-background: igx-color($palette, 'secondary', 500), - header-text-color: igx-contrast-color($palette, 'secondary', 500), - - picker-arrow-color: igx-color($palette, 'grays', 800), - picker-arrow-hover-color: igx-color($palette, 'secondary', 500), - - picker-text-color: igx-color($palette, 'grays', 800), - picker-text-hover-color: igx-color($palette, 'secondary', 500), - - inactive-text-color: igx-color($palette, 'grays', 400), - weekend-text-color: igx-color($palette, 'grays', 500), - - year-current-text-color: igx-color($palette, 'secondary', 500), - month-current-text-color: igx-color($palette, 'secondary', 500), - - year-hover-text-color: igx-color($palette, 'secondary', 500), - month-hover-text-color: igx-color($palette, 'secondary', 500), - - date-selected-background: igx-color($palette, 'secondary', 500), - date-selected-text-color: igx-contrast-color($palette, 'secondary', 500), - - date-current-text-color: igx-color($palette, 'secondary', 500), - date-hover-background: igx-color($palette, 'grays', 200), - - date-special-background: igx-color($palette, 'grays', 100), - date-special-text-color: igx-color($palette, 'grays', 900), - - date-disabled-text-color: rgba(hexrgba(igx-color($palette, 'grays', 500)), .6) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-calendar'), $palette); @if not($content-text-color) and $content-background { $content-text-color: text-contrast($content-background); @@ -206,7 +168,7 @@ $month-current-text-color: $header-background; } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, content-background: $content-background, content-text-color: $content-text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss index 59614640e14..79234f92b0e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss @@ -26,7 +26,7 @@ /// @include igx-calendar($my-card-theme); @function igx-card-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background: null, $header-text-color: null, @@ -34,18 +34,16 @@ $content-text-color: null, $actions-text-color: null ) { - $default-theme: ( - name: 'igx-card', - background: #fff, - header-text-color: igx-color($palette, grays, 800), - subtitle-text-color: igx-color($palette, grays, 600), - content-text-color: igx-color($palette, grays, 600), - actions-text-color: igx-color($palette, grays, 600) - ); + // $default-theme: ( + // name: 'igx-card', + // background: #fff, + // header-text-color: igx-color($palette, grays, 800), + // subtitle-text-color: igx-color($palette, grays, 600), + // content-text-color: igx-color($palette, grays, 600), + // actions-text-color: igx-color($palette, grays, 600) + // ); - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-card'), $palette); @if not($header-text-color) and $background { $header-text-color: text-contrast($background); @@ -63,7 +61,7 @@ $subtitle-text-color: rgba(text-contrast($background), .7); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, background: $background, header-text-color: $header-text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss index 973e5143f56..56d99eab2ac 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss @@ -30,7 +30,7 @@ /// @include igx-carousel($my-carousel-theme); @function igx-carousel-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $button-background: null, $button-hover-background: null, @@ -43,22 +43,8 @@ $disable-button-shadow: true ){ - $default-theme: ( - name: 'igx-carousel', - button-background: #fff, - button-hover-background: #fff, - button-arrow-color: igx-color($palette, 'grays', 700), - button-hover-arrow-color: igx-color($palette, 'grays', 900), - button-shadow: if($disable-button-shadow == true, none, igx-elevation($elevations, 1)), - - indicator-dot-color: #fff, - indicator-border-color: #fff, - indicator-active-border-color: #fff - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-carousel'), $palette); + $button-shadow: if($disable-button-shadow == true, none, igx-elevation($elevations, 1)); @if not($button-arrow-color) and $button-background { $button-arrow-color: text-contrast($button-background); @@ -68,12 +54,13 @@ $button-hover-arrow-color: text-contrast($button-hover-background); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, button-background: $button-background, button-hover-background: $button-hover-background, button-arrow-color: $button-arrow-color, button-hover-arrow-color: $button-hover-arrow-color, + button-shadow: $button-shadow, indicator-dot-color: $indicator-dot-color, indicator-border-color: $indicator-border-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index 70f8da9f42e..078d53dbd44 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss @@ -27,7 +27,7 @@ /// @include igx-checkbox($my-checkbox-theme); @function igx-checkbox-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $label-color: null, $empty-color: null, @@ -56,16 +56,12 @@ disabled-color: rgba(255, 255, 255, .3) ); - $default-theme: map-get(( - dark: $dark-theme, + $theme: map-get(( + dark: apply-palette(map-get($schema, 'igx-checkbox'), $palette), light: $light-theme ), $variant); - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, label-color: $label-color, empty-color: $empty-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index b449115e474..de9657915c2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -40,6 +40,7 @@ /// @include igx-chip($my-chip-theme); @function igx-chip-theme( $palette: $default-palette, + $schema: $light-schema, $roundness: null, $text-color: null, @@ -66,34 +67,7 @@ $focus-selected-background: null, $focus-selected-border-color: null ) { - $default-theme: ( - name: 'igx-chip', - - roundness: rem(32px), - text-color: igx-color($palette, 'grays', 700), - background: igx-color($palette, 'grays', 200), - border-color: transparent, - - hover-text-color: igx-color($palette, 'grays', 700), - hover-background: igx-color($palette, 'grays', 300), - hover-border-color: transparent, - - focus-text-color: igx-color($palette, 'grays', 700), - focus-background: igx-color($palette, 'grays', 400), - focus-border-color: transparent, - - selected-text-color: igx-color($palette, 'grays', 700), - selected-background: igx-color($palette, 'grays', 300), - selected-border-color: transparent, - - hover-selected-text-color: igx-color($palette, 'grays', 700), - hover-selected-background: igx-color($palette, 'grays', 400), - hover-selected-border-color: transparent, - - focus-selected-text-color: igx-color($palette, 'grays', 700), - focus-selected-background: igx-color($palette, 'grays', 400), - focus-selected-border-color: transparent - ); + $theme: apply-palette(map-get($schema, 'igx-chip'), $palette); @if not($text-color) and $background { $text-color: text-contrast($background); @@ -183,7 +157,7 @@ $focus-selected-border-color: $border-color; } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, roundness: $roundness, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss index 64508a17b9f..1ae32d5cb4a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss @@ -21,29 +21,21 @@ //// @function igx-column-hiding-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $title-color: null, $background-color: null ) { - $name: 'igx-column-hiding'; - - $default-theme: ( - name: $name, - title-color: igx-color($palette, 'primary'), - background-color: transparent - ); + $theme: apply-palette(map-get($schema, 'igx-column-hiding'), $palette); @if not($title-color) and $background-color { $title-color: text-contrast($background-color); } - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - - @return extend($default-theme, ( - palette: $palette + @return extend($theme, ( + palette: $palette, + title-color: $title-color, + background-color: $background-color )); } @@ -57,6 +49,7 @@ %column-hiding-display { display: flex; flex-flow: column nowrap; + background: --var($theme, 'background-color'); width: 100%; flex: 1 1 auto; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index e48a0ff866d..2ca6d1c2689 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -14,25 +14,14 @@ /// @requires igx-color @function igx-combo-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $search-separator-border-color: null, $empty-list-placeholder-color: null, $empty-list-background: null ) { + $theme: apply-palette(map-get($schema, 'igx-combo'), $palette); - $default-theme: ( - name: 'igx-combo', - search-separator-border-color: igx-color($palette, 'grays', 300), - empty-list-placeholder-color: igx-color($palette, 'grays', 400), - empty-list-background: #fff - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - - @return extend($default-theme, - ( + @return extend($theme, ( palette: $palette, search-separator-border-color: $search-separator-border-color, empty-list-placeholder-color: $empty-list-placeholder-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss index 1191aa27ff5..78f50267d56 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss @@ -11,15 +11,10 @@ /// @requires extend @function igx-date-picker-theme( $palette: $default-palette, - $preset: null + $schema: $light-schema ) { - $default-theme: (name: 'igx-date-picker'); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - - @return extend($default-theme, ($palette: $palette)); + $theme: apply-palette(map-get($schema, 'igx-date-picker'), $palette); + @return extend($theme, (palette: $palette)); } /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss index c2da62964f1..4f5475b1fed 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss @@ -21,22 +21,13 @@ /// @include igx-dialog($my-dialog-theme); @function igx-dialog-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background: null, $title-color: null, $message-color: null ) { - $default-theme: ( - name: 'igx-dialog', - background: #fff, - title-color: igx-color($palette, grays, 800), - message-color: igx-color($palette, grays, 600) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-dialog'), $palette); @if not($title-color) and $background{ $title-color: text-contrast($background); @@ -46,7 +37,7 @@ $message-color: rgba(text-contrast($background), .8); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, background: $background, title-color: $title-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index 266f569ba1c..24f4f5c2d78 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -32,7 +32,7 @@ /// @requires igx-contrast-color @function igx-drop-down-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background-color: null, $header-text-color: null, @@ -57,33 +57,7 @@ $disabled-item-background:null, $disabled-item-text-color:null ) { - - $default-theme: ( - name: 'igx-drop-down', - - background-color: #fff, - header-text-color: igx-color($palette, 'secondary', 500), - item-text-color: igx-color($palette, 'grays', 800), - hover-item-text-color: igx-color($palette, 'grays', 800), - hover-item-background: igx-color($palette, 'grays', 100), - focused-item-background: igx-color($palette, 'grays', 100), - focused-item-text-color: igx-color($palette, 'grays', 800), - selected-item-background: igx-color($palette, 'secondary', 500), - selected-item-text-color: igx-contrast-color($palette, 'secondary', 500), - - selected-hover-item-background: igx-color($palette, 'secondary', 300), - selected-hover-item-text-color: igx-contrast-color($palette, 'secondary', 300), - - selected-focus-item-background: igx-color($palette, 'secondary', 300), - selected-focus-item-text-color: igx-contrast-color($palette, 'secondary', 300), - - disabled-item-background: transparent, - disabled-item-text-color: igx-color($palette, 'grays', 500) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-drop-down'), $palette); @if not($item-text-color) and $background-color { $item-text-color: text-contrast($background-color); @@ -137,7 +111,7 @@ $header-text-color: rgba(text-contrast($background-color), .7); } - @return extend($default-theme, + @return extend($theme, ( palette: $palette, background-color: $background-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss index d4c9a3bfaa4..803cd6c6697 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss @@ -26,7 +26,7 @@ @function igx-expansion-panel-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $header-background: null, $header-focus-background: null, @@ -38,21 +38,7 @@ $disabled-color: null ) { - $default-theme: ( - name: 'igx-expansion-panel', - header-background: #fff, - header-focus-background: igx-color($palette, 'grays', 100), - header-title-color: igx-color($palette, 'grays', 800), - header-description-color: igx-color($palette, 'grays', 600), - header-icon-color: igx-color($palette, 'grays', 800), - body-color: igx-color($palette, 'grays', 800), - body-background: #fff, - disabled-color: igx-color($palette, 'grays', 500) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-expansion-panel'), $palette); @if not($header-title-color) and $header-background { $header-title-color: text-contrast($header-background); @@ -71,7 +57,7 @@ } // if statement place - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, header-background: $header-background, header-focus-background: $header-focus-background, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss index b16a0bb7b4f..966c048a1d1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss @@ -34,7 +34,7 @@ /// @include igx-grid-filtering($my-filtering-theme); @function igx-grid-filtering-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $toggle-icon-color: null, $toggle-icon-hover-color: null, @@ -50,25 +50,7 @@ $menu-button-text-color: null, $menu-button-disabled-text-color: null ) { - $default-theme: ( - name: 'igx-grid-filtering', - toggle-background: transparent, - toggle-icon-color: inherit, - toggle-icon-hover-color: #fff, - toggle-icon-active-color: igx-contrast-color($palette, 'secondary'), - toggle-icon-filtered-color: igx-color($palette, 'secondary'), - toggle-hover-background: igx-color($palette, 'grays', 300), - toggle-active-background: igx-color($palette, 'secondary'), - toggle-filtered-background: transparent, - menu-background: #fff, - menu-text-color: igx-color($palette, 'grays', 900), - menu-button-text-color: igx-color($palette, 'secondary'), - menu-button-disabled-text-color: initial - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-grid-filtering'), $palette); @if not($menu-text-color) and $menu-background { $menu-text-color: text-contrast($menu-background); @@ -90,7 +72,7 @@ $toggle-icon-active-color: text-contrast($toggle-active-background) } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, toggle-icon-color: $toggle-icon-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss index 4166547a2f8..e55cd97470f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss @@ -23,24 +23,15 @@ /// @include igx-grid-paginator($my-grid-paginator-theme); @function igx-grid-paginator-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $text-color: null, $background-color: null, $border-color: null ) { - $default-theme: ( - name: 'igx-grid-paginator', - text-color: currentColor, - background-color: hexrgba(igx-color($palette, 'grays', 100)), - border-color: igx-color($palette, 'grays', 400) - ); + $theme: apply-palette(map-get($schema, 'igx-grid-paginator'), $palette); - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, text-color: $text-color, background-color: $background-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss index 30f533e16b5..dc6fec86f17 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss @@ -29,7 +29,7 @@ /// @include igx-grid-summary($my-summary-theme); @function igx-grid-summary-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background-color: null, $label-color: null, @@ -41,22 +41,7 @@ $inactive-color: null, $label-hover-color: null ) { - $default-theme: ( - name: 'igx-grid-summary', - background-color: inherit, - label-color: igx-color($palette, 'primary', 500), - label-hover-color: igx-color($palette, 'primary', 700), - result-color: currentColor, - border-color: igx-color($palette, 'grays', 400), - pinned-border-width: 2px, - pinned-border-style: solid, - pinned-border-color: igx-color($palette, 'grays', 400), - inactive-color: igx-color($palette, 'grays', 400) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-grid-summary'), $palette); @if not($result-color) and $background-color { $result-color: text-contrast($background-color); @@ -70,7 +55,7 @@ $pinned-border-color: rgba(text-contrast($background-color), .26); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, background-color: $background-color, label-color: $label-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss index 43f72aa417d..98da433eb28 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss @@ -31,7 +31,7 @@ @function igx-grid-toolbar-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background-color: null, $button-background: null, @@ -50,29 +50,7 @@ $item-focus-background: null, $item-focus-text-color: null ) { - - $default-theme: ( - background-color: rgba(0, 0, 0, .02), - button-background: #f0f0f0, - title-text-color : igx-color($palette, 'grays', 600), - - button-text-color: igx-color($palette, 'grays', 600), - button-hover-background: igx-color($palette, 'grays', 100), - button-hover-text-color: igx-color($palette, 'grays', 600), - button-focus-background: igx-color($palette, 'grays', 100), - button-focus-text-color: igx-color($palette, 'grays', 600), - - dropdown-background: #fff, - item-text-color: igx-color($palette, 'grays', 600), - item-hover-background: igx-color($palette, 'grays', 100), - item-hover-text-color: igx-color($palette, 'grays', 600), - item-focus-background: igx-color($palette, 'grays', 100), - item-focus-text-color: igx-color($palette, 'grays', 600) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-grid-toolbar'), $palette); @if not($title-text-color) and $background-color { $title-text-color: text-contrast($background-color); @@ -113,7 +91,7 @@ $button-text-color: text-contrast($background-color); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, background-color: $background-color, 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 index 645aadea6e7..2e309ae04cb 100644 --- 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 @@ -66,7 +66,7 @@ /// @requires extend @function igx-grid-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $header-background: null, $header-text-color: null, @@ -137,85 +137,10 @@ $filtering-row-text-color: null, $tree-filtered-text-color: null ) { - $default-theme: ( - name: 'igx-grid', - - header-background: hexrgba(igx-color($palette, 'grays', 100)), - header-text-color: igx-color($palette, 'grays', 600), - header-border-width: 1px, - header-border-style: solid, - header-border-color: igx-color($palette, 'grays', 200), - - content-background: #fff, - content-text-color: igx-color($palette, 'grays', 800), - - ghost-header-text-color: igx-color($palette, 'grays', 600), - ghost-header-icon-color: igx-color($palette, 'grays'), - ghost-header-background: #fff, - - row-odd-background: #fff, - row-even-background: #fff, - row-odd-text-color: inherit, - row-even-text-color: inherit, - row-selected-background: hexrgba(igx-color($palette, 'grays', 800)), - row-selected-text-color: igx-contrast-color($palette, 'grays', 800), - row-hover-background: hexrgba(igx-color($palette, 'grays', 200)), - row-hover-text-color: igx-contrast-color($palette, 'grays', 200), - row-border-color: igx-color($palette, 'grays', 300), - - pinned-border-width: 2px, - pinned-border-style: solid, - pinned-border-color: igx-color($palette, 'grays', 400), - - cell-selected-background: igx-color($palette, 'primary'), - cell-selected-text-color: igx-contrast-color($palette, 'primary'), - cell-editing-background: #fff, - - edit-mode-color: igx-color($palette, 'secondary'), - edited-row-indicator: igx-color($palette, 'grays', 400), - cell-edited-value-color: igx-color($palette, 'grays', 600), - - resize-line-color: igx-color($palette, 'secondary'), - - drop-indicator-color: igx-color($palette, 'secondary'), - - grouparea-background: hexrgba(igx-color($palette, 'grays', 100)), - - group-label-column-name-text: igx-color($palette, 'primary', 500), - group-label-icon: igx-color($palette, 'primary', 500), - group-label-text: igx-color($palette, 'grays', 800), - expand-all-icon-color: igx-color($palette, 'grays', 600), - expand-all-icon-hover-color: igx-color($palette, 'grays', 800), - - expand-icon-color: igx-color($palette, 'grays', 600), - expand-icon-hover-color: igx-color($palette, 'primary'), - active-expand-icon-color: igx-color($palette, 'grays', 500), - active-expand-icon-hover-color: igx-color($palette, 'primary'), - - group-count-background: igx-color($palette, 'grays', 200), - group-count-text-color: igx-color($palette, 'grays', 600), - - drop-area-text-color: igx-color($palette, 'grays', 600), - drop-area-icon-color: igx-color($palette, 'grays'), - drop-area-background: igx-color($palette, grays, 100), - drop-area-on-drop-background: igx-color($palette, grays, 200), - - group-row-background: hexrgba(igx-color($palette, 'grays', 100)), - group-row-selected-background: hexrgba(igx-color($palette, 'grays', 200)), - - filtering-header-background: #fff, - filtering-header-text-color: igx-color($palette, 'grays', 800), - filtering-row-background: #fff, - filtering-row-text-color: igx-color($palette, 'grays', 800), - tree-filtered-text-color: igx-color($palette, grays, 500) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-grid'), $palette); - $tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($default-theme, 'row-selected-background')), .5); - $tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($default-theme, 'cell-selected-background')), .5); + $tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($theme, 'row-selected-background')), .5); + $tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($theme, 'cell-selected-background')), .5); @if not($ghost-header-icon-color) and $ghost-header-background { $ghost-header-icon-color: rgba(text-contrast($ghost-header-background), .07); @@ -353,7 +278,7 @@ $filtering-row-text-color: text-contrast(hexrgba($filtering-row-background)); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, header-background: $header-background, @@ -387,6 +312,7 @@ cell-editing-background: $cell-editing-background, cell-selected-text-color: $cell-selected-text-color, + edit-mode-color: $edit-mode-color, edit-mode-row-border-color: $edit-mode-color, edited-row-indicator: $edited-row-indicator, cell-edited-value-color: $cell-edited-value-color, @@ -412,6 +338,7 @@ group-count-text-color: $group-count-text-color, group-row-background: $group-row-background, + group-row-selected-background: $group-row-selected-background, drop-area-text-color: $drop-area-text-color, drop-area-icon-color: $drop-area-icon-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss index 60811baf29e..02077e633d3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss @@ -20,24 +20,15 @@ /// @include igx-icon($my-icon-theme); @function igx-icon-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $color: null, $size: null, $disabled-color: null ) { - $default-theme: ( - name: 'igx-icon', - color: currentColor, - size: rem(24px), - disabled-color: currentColor - ); + $theme: apply-palette(map-get($schema, 'igx-icon'), $palette); - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, color: $color, size: $size, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 7e5b7a7c64c..7c5eb373c6b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -47,7 +47,7 @@ /// @include igx-input-group($my-input-group-theme); @function igx-input-group-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $idle-text-color: null, $filled-text-color: null, @@ -87,43 +87,43 @@ ) { $name: 'igx-input-group'; - $dark-theme: ( - name: $name, + // $dark-theme: ( + // name: $name, - idle-text-color: igx-color($palette, 'grays', 600), - filled-text-color: igx-color($palette, 'grays', 900), - focused-text-color: igx-color($palette, 'grays', 900), - disabled-text-color: igx-color($palette, 'grays', 500), + // idle-text-color: igx-color($palette, 'grays', 600), + // filled-text-color: igx-color($palette, 'grays', 900), + // focused-text-color: igx-color($palette, 'grays', 900), + // disabled-text-color: igx-color($palette, 'grays', 500), - idle-secondary-color: igx-color($palette, 'grays', 600), - filled-secondary-color: igx-color($palette, 'grays', 600), - focused-secondary-color: igx-color($palette, 'primary'), + // idle-secondary-color: igx-color($palette, 'grays', 600), + // filled-secondary-color: igx-color($palette, 'grays', 600), + // focused-secondary-color: igx-color($palette, 'primary'), - idle-bottom-line-color: igx-color($palette, 'grays', 600), - hover-bottom-line-color: igx-color($palette, 'grays', 900), - filled-bottom-line-color: igx-color($palette, 'grays', 600), - focused-bottom-line-color: igx-color($palette, 'primary'), - interim-bottom-line-color: rgba(igx-color($palette, 'primary'), .12), - disabled-bottom-line-color: rgba(0, 0, 0, .42), - disabled-border-color: rgba(igx-color($palette, 'grays', 500), .06), + // idle-bottom-line-color: igx-color($palette, 'grays', 600), + // hover-bottom-line-color: igx-color($palette, 'grays', 900), + // filled-bottom-line-color: igx-color($palette, 'grays', 600), + // focused-bottom-line-color: igx-color($palette, 'primary'), + // interim-bottom-line-color: rgba(igx-color($palette, 'primary'), .12), + // disabled-bottom-line-color: rgba(0, 0, 0, .42), + // disabled-border-color: rgba(igx-color($palette, 'grays', 500), .06), - box-background: rgba(0, 0, 0, .06), - box-disabled-background: rgba(0, 0, 0, .03), + // box-background: rgba(0, 0, 0, .06), + // box-disabled-background: rgba(0, 0, 0, .03), - border-background: transparent, - border-disabled-background: rgba(0, 0, 0, .03), + // border-background: transparent, + // border-disabled-background: rgba(0, 0, 0, .03), - search-background: white, - search-disabled-background: white, - search-shadow-color: igx-color($palette, 'grays', 600), - search-disabled-shadow-color: igx-color($palette, 'grays', 300), + // search-background: white, + // search-disabled-background: white, + // search-shadow-color: igx-color($palette, 'grays', 600), + // search-disabled-shadow-color: igx-color($palette, 'grays', 300), - success-secondary-color: igx-color($palette, 'success'), - warning-secondary-color: igx-color($palette, 'warn'), - error-secondary-color: igx-color($palette, 'error'), - placeholder-color: igx-color($palette, 'grays', 500), - disabled-placeholder-color: igx-color($palette, 'grays', 400) - ); + // success-secondary-color: igx-color($palette, 'success'), + // warning-secondary-color: igx-color($palette, 'warn'), + // error-secondary-color: igx-color($palette, 'error'), + // placeholder-color: igx-color($palette, 'grays', 500), + // disabled-placeholder-color: igx-color($palette, 'grays', 400) + // ); $light-theme: ( name: $name, @@ -161,20 +161,14 @@ error-secondary-color: igx-color($palette, 'error'), placeholder-color: #999, disabled-placeholder-color: #777 - - ); - $default-theme: map-get(( - dark: $dark-theme, + $theme: map-get(( + dark: apply-palette(map-get($schema, 'igx-input-group'), $palette), light: $light-theme ), $variant); - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, idle-text-color: $idle-text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss index 470c7911c4a..1c0254756e2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss @@ -21,7 +21,7 @@ /// @include igx-avatar($my-list-theme); @function igx-list-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background: null, $header-background: null, @@ -31,20 +31,7 @@ $item-background-active: null, $item-text-color-active: null ) { - $default-theme: ( - name: 'igx-list', - background: #fff, - header-background: #fff, - header-text-color: igx-color($palette, 'secondary'), - item-background: #fff, - item-text-color: igx-color($palette, 'grays', 800), - item-background-active: hexrgba(igx-color($palette, 'grays', 100)), - item-text-color-active: igx-color($palette, 'grays', 800) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-list'), $palette); @if not($header-background) and $background { $header-background: $background; @@ -74,7 +61,7 @@ $item-text-color-active: $item-text-color; } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, background: $background, header-background: $header-background, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss index ecc4e72e6a3..dfdd75106f7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss @@ -24,7 +24,7 @@ /// @include igx-navbar($my-navbar-theme); @function igx-navbar-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background: null, $text-color: null, @@ -32,18 +32,9 @@ $hover-icon-color: null, $disable-shadow: false ) { - $default-theme: ( - name: 'igx-navbar', - background: igx-color($palette, 'primary'), - text-color: #fff, - idle-icon-color: #fff, - hover-icon-color: #fff, - nav-shadow: if($disable-shadow == false, igx-elevation($elevations, 4), none) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $nav-shadow: if($disable-shadow == false, igx-elevation($elevations, 4), none); + + $theme: apply-palette(map-get($schema, 'igx-navbar'), $palette); @if not($text-color) and $background { $text-color: text-contrast($background); @@ -57,12 +48,13 @@ $hover-icon-color: text-contrast($background); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, background: $background, text-color: $text-color, idle-icon-color: $idle-icon-color, - hover-icon-color: $hover-icon-color + hover-icon-color: $hover-icon-color, + nav-shadow: $nav-shadow )); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss index 8edc4106164..577d3e90ed7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss @@ -32,7 +32,7 @@ /// @include igx-navdrawer($navdrawer-theme); @function igx-navdrawer-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background: null, $border-color: null, @@ -49,24 +49,7 @@ $item-hover-text-color: null, $item-hover-icon-color: null ) { - $default-theme: ( - name: 'igx-navdrawer', - background: #fff, - border-color: rgba(0, 0, 0, .14), - item-text-color: igx-color($palette, grays, 700), - item-active-text-color: igx-color($palette, primary, 500), - item-active-background: igx-color($palette, grays, 100), - item-hover-background: igx-color($palette, grays, 200), - item-hover-text-color: igx-color($palette, grays, 800), - item-header-text-color: igx-color($palette, grays, 600), - item-icon-color: igx-color($palette, grays, 700), - item-active-icon-color: igx-color($palette, primary, 500), - item-hover-icon-color: igx-color($palette, grays, 800) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-navdrawer'), $palette); @if not($item-header-text-color) and $background { $item-header-text-color: text-contrast($background); @@ -100,7 +83,7 @@ $item-hover-text-color: text-contrast($background); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, background: $background, border-color: $border-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss index 9e7f0cccd0c..9eed4f636ea 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss @@ -17,21 +17,12 @@ /// @function igx-overlay-theme( $palette: $default-palette, - $preset: null, - - $background-color: $overlay-color + $schema: $light-schema, + $background-color: null ) { + $theme: apply-palette(map-get($schema, 'igx-overlay'), $palette); - $default-theme: ( - name: 'igx-overlay', - background-color: $background-color - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, background-color: $background-color )); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss index 83355880e60..1f9c41a837a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss @@ -26,7 +26,7 @@ /// @include igx-progress-linear($my-progress-linear-theme); @function igx-progress-linear-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $track-color: null, $fill-color-default: null, @@ -37,23 +37,9 @@ $stripes-color: null, $text-color: null ) { - $default-theme: ( - name: 'igx-progress-linear', - track-color: igx-color($palette, 'grays', 300), - fill-color-default: igx-color($palette, 'primary'), - fill-color-danger: igx-color($palette, 'error'), - fill-color-warning: igx-color($palette, 'warn'), - fill-color-info: igx-color($palette, 'info'), - fill-color-success: igx-color($palette, 'success'), - stripes-color: rgba(#fff, .7), - text-color: igx-color($palette, 'grays', 700) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - - @return extend($default-theme, ( + $theme: apply-palette(map-get($schema, 'igx-progress-linear'), $palette); + + @return extend($theme, ( palette: $palette, track-color: $track-color, fill-color-default: $fill-color-default, @@ -189,19 +175,15 @@ /// @include igx-progress-circular($my-progress-circle-theme); @function igx-progress-circular-theme( $palette: $default-palette, + $schema: $light-schema, $base-circle-color: null, $progress-circle-color: null, $text-color: null ) { - $default-theme: ( - name: 'igx-progress-circular', - base-circle-color: igx-color($palette, 'grays', 300), - progress-circle-color: igx-color($palette, 'primary'), - text-color: igx-color($palette, 'grays', 700) - ); - - @return extend($default-theme, ( + $theme: apply-palette(map-get($schema, 'igx-progress-circular'), $palette); + + @return extend($theme, ( palette: $palette, base-circle-color: $base-circle-color, progress-circle-color: $progress-circle-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss index 7a2004fa4f8..3741e4bb87a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss @@ -25,7 +25,7 @@ /// @include igx-radio($my-radio-theme); @function igx-radio-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $label-color: null, $empty-color: null, @@ -36,13 +36,7 @@ ) { $name: 'igx-radio'; - $dark-theme: ( - name: $name, - label-color: igx-color($palette, 'grays', 900), - empty-color: igx-color($palette, 'grays', 600), - fill-color: igx-color($palette, 'secondary', 500), - disabled-color: igx-color($palette, 'grays', 400) - ); + $dark-theme: apply-palette(map-get($schema, 'igx-radio'), $palette); $light-theme: ( name: $name, @@ -52,16 +46,12 @@ disabled-color: rgba(255, 255, 255, .3) ); - $default-theme: map-get(( + $theme: map-get(( dark: $dark-theme, light: $light-theme ), $variant); - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, label-color: $label-color, empty-color: $empty-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss index 0c6479b0e76..9fb4ff9bada 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss @@ -17,23 +17,14 @@ /// igx-ripple($my-ripple-theme); @function igx-ripple-theme( $palette: $default-palette, - $preset: null, - + $schema: $light-schema, $color: null ) { - $default-theme: ( - name: 'igx-ripple', - color: igx-color($palette, 'grays', 800) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-ripple'), $palette); - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, - color: $color, - test: 'test' + color: $color )); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index 13b750bb2fa..ea6606bef83 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -24,7 +24,7 @@ /// @include igx-switch($my-switch-theme); @function igx-slider-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $track-color: null, $thumb-color: null, @@ -36,19 +36,7 @@ ) { $name: 'igx-slider'; - $dark-theme: ( - name: $name, - track-color: igx-color($palette, 'secondary'), - - thumb-color: igx-color($palette, 'secondary'), - disabled-thumb-color: hexrgba(igx-color($palette, 'grays', 400)), - - label-background-color: igx-color($palette, 'secondary'), - label-text-color: igx-contrast-color($palette, 'secondary'), - - base-track-color: igx-color($palette, 'grays'), - disabled-base-track-color: igx-color($palette, 'grays', 400) - ); + $dark-theme: apply-palette(map-get($schema, 'igx-slider'), $palette); $light-theme: ( name: $name, @@ -63,20 +51,16 @@ disabled-base-track-color: rgba(#fff, .3) ); - $default-theme: map-get(( + $theme: map-get(( dark: $dark-theme, light: $light-theme ), $variant); - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - @if not($label-text-color) and $label-background-color { $label-text-color: text-contrast($label-background-color); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, track-color: $track-color, thumb-color: $thumb-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss index 37da90d24d0..dc72dbb3275 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss @@ -24,22 +24,13 @@ /// @include igx-snackbar($my-snackbar-theme); @function igx-snackbar-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background: null, $text-color: null, $button-color: null ) { - $default-theme: ( - name: 'igx-snackbar', - background: #323232, - text-color: #fff, - button-color: igx-color($palette, 'secondary') - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-snackbar'), $palette); @if not($button-color) and $background { $button-color: text-contrast($background); @@ -49,7 +40,7 @@ $text-color: text-contrast($background); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, background: $background, text-color: $text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 98d265edfb7..0d6ed88efb7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -28,7 +28,7 @@ /// @include igx-switch($my-switch-theme); @function igx-switch-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $thumb-on-color: null, $track-on-color: null, @@ -46,21 +46,7 @@ ) { $name: 'igx-switch'; - $dark-theme: ( - name: $name, - - thumb-on-color: igx-color($palette, 'secondary', 500), - track-on-color: rgba(igx-color($palette, 'secondary', 500), .5), - - thumb-off-color: #fafafa, - track-off-color: rgba(0, 0, 0, .5), - - label-color: igx-color($palette, grays, 900), - label-disabled-color: igx-color($palette, grays, 400), - - track-disabled-color: rgba(0, 0, 0, .12), - thumb-disabled-color: hexrgba(igx-color($palette, 'grays', 400)) - ); + $dark-theme: apply-palette(map-get($schema, 'igx-switch'), $palette); $light-theme: ( name: $name, @@ -78,16 +64,12 @@ thumb-disabled-color: #6c6c6c ); - $default-theme: map-get(( + $theme: map-get(( dark: $dark-theme, light: $light-theme ), $variant); - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, thumb-on-color: $thumb-on-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index cb3f9c6a7ed..dde874fe443 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -38,7 +38,7 @@ @function igx-tabs-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $item-text-color: null, $item-background: null, @@ -59,33 +59,7 @@ $tab-ripple-color: null, $button-ripple-color: null ) { - $default-theme: ( - name: 'igx-tabs', - - item-text-color: igx-color($palette, 'grays', 700), - item-background: #fff, - - item-hover-color: igx-color($palette, 'grays', 700), - item-hover-background: igx-color($palette, 'grays', 200), - - item-active-icon-color: igx-color($palette, 'primary', 500), - item-active-color: igx-color($palette, 'primary', 500), - item-active-background: igx-color($palette, 'grays', 200), - - indicator-color: igx-color($palette, 'primary', 500), - - button-color: igx-color($palette, 'grays', 500), - button-background: #fff, - button-hover-background: igx-color($palette, 'grays', 100), - button-hover-color: igx-color($palette, 'grays', 600), - - tab-ripple-color: igx-color($palette, 'grays', 100), - button-ripple-color: igx-color($palette, 'grays', 100) - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-tabs'), $palette); @if not($item-text-color) and $item-background { $item-text-color: text-contrast($item-background); @@ -127,7 +101,7 @@ $button-ripple-color: text-contrast($button-background); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, item-text-color: $item-text-color, item-background: $item-background, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss index 59548368061..3f77e1df3c0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss @@ -32,7 +32,7 @@ /// @include igx-time-picker($my-button-theme); @function igx-time-picker-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $text-color: null, $hover-text-color: null, @@ -43,21 +43,7 @@ $header-time-period-color: null, $background-color: null ) { - $default-theme: ( - name: 'igx-time-picker', - text-color: igx-color($palette, 'grays', 500), - hover-text-color: igx-color($palette, 'secondary', 500), - selected-text-color: igx-color($palette, 'secondary', 500), - active-item-background: igx-color($palette, 'grays', 100), - header-background: igx-color($palette, 'secondary', 500), - header-hour-text-color: igx-contrast-color($palette, 'secondary', 500), - header-time-period-color: rgba(igx-contrast-color($palette, 'secondary', 500), .8), - background-color: white - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-time-picker'), $palette); @if not($text-color) and $background-color { $text-color: text-contrast($background-color); @@ -83,7 +69,7 @@ // $active-item-background: lighten($background-color, 5%); //} - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, text-color: $text-color, hover-text-color: $hover-text-color, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss index 90f0448ddca..8bbfe811115 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss @@ -21,26 +21,18 @@ /// @include igx-toast($my-toast-theme); @function igx-toast-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background: null, $text-color: null ) { - $default-theme: ( - name: 'igx-toast', - background: igx-color($palette, 'grays', 600), - text-color: #fff - ); - - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } + $theme: apply-palette(map-get($schema, 'igx-toast'), $palette); @if not($text-color) and $background { $text-color: text-contrast($background); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $palette, background: $background, text-color: $text-color diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index 35c578434e9..52b638da951 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -23,7 +23,7 @@ /// @include igx-checkbox($my-checkbox-theme); @function igx-tooltip-theme( $palette: $default-palette, - $preset: null, + $schema: $light-schema, $background: null, $text-color: null, @@ -35,34 +35,26 @@ $light-background: rgba(#fff, .94); $border-radius: rem(4px); - $dark-theme: ( - background: rgba($dark-background, .9), - text-color: text-contrast($dark-background), - roundness: $border-radius - ); + $dark-theme: apply-palette(map-get($schema, 'igx-tooltip'), $palette); $light-theme: ( + name: $name, background: $light-background, text-color: text-contrast($light-background), roundness: $border-radius ); - $default-theme: map-get(( + $theme: map-get(( dark: $dark-theme, light: $light-theme ), $variant); - @if $preset { - $default-theme: map-get($preset, map-get($default-theme, 'name')); - } - @if not($text-color) and $background { $text-color: text-contrast($background); } - @return extend($default-theme, ( + @return extend($theme, ( palette: $default-palette, - name: $name, background: $background, text-color: $text-color, roundness: $roundness diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss index 0a4d3f33ec5..8a48ffca80e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss @@ -86,7 +86,7 @@ @mixin igx-theme( $palette, - $preset: null, + $schema: $light-schema, $exclude: (), $legacy-support: true ) { @@ -108,158 +108,162 @@ // @debug 'All excluded: #{$excluded}'; @if not(index($exclude, 'igx-ripple')) { - @include igx-ripple($theme: get-theme($preset, 'igx-ripple')); + @include igx-ripple(igx-ripple-theme($palette, $schema)); } @if not(index($exclude, 'igx-avatar')) { - @include igx-avatar($theme: get-theme($preset, 'igx-avatar')); + @include igx-avatar(igx-avatar-theme($palette, $schema)); } @if not(index($exclude, 'igx-badge')) { - @include igx-badge($theme: get-theme($preset, 'igx-badge')); + @include igx-badge(igx-badge-theme($palette, $schema)); } @if not(index($exclude, 'igx-bottom-nav')) { - @include igx-bottom-nav($theme: get-theme($preset, 'igx-bottom-nav')); + @include igx-bottom-nav(igx-bottom-nav-theme($palette, $schema)); } @if not(index($exclude, 'igx-button')) { - @include igx-button($theme: get-theme($preset, 'igx-button')); + @include igx-button(igx-button-theme($palette, $schema)); } @if not(index($exclude, 'igx-button-group')) { - @include igx-button-group($theme: get-theme($preset, 'igx-button-group')); + @include igx-button-group(igx-button-group-theme($palette, $schema)); } @if not(index($exclude, 'igx-banner')) { - @include igx-banner($theme: get-theme($preset, 'igx-banner')); + @include igx-banner(igx-banner-theme($palette, $schema)); } @if not(index($exclude, 'igx-calendar')) { - @include igx-calendar($theme: get-theme($preset, 'igx-calendar')); + @include igx-calendar(igx-calendar-theme($palette, $schema)); } @if not(index($exclude, 'igx-card')) { - @include igx-card($theme: get-theme($preset, 'igx-card')); + @include igx-card(igx-card-theme($palette, $schema)); } @if not(index($exclude, 'igx-carousel')) { - @include igx-carousel($theme: get-theme($preset, 'igx-carousel')); + @include igx-carousel(igx-carousel-theme($palette, $schema)); } @if not(index($exclude, 'igx-checkbox')) { - @include igx-checkbox($theme: get-theme($preset, 'igx-checkbox')); + @include igx-checkbox(igx-checkbox-theme($palette, $schema)); } @if not(index($exclude, 'igx-chip')) { - @include igx-chip($theme: get-theme($preset, 'igx-chip')); + @include igx-chip(igx-chip-theme($palette, $schema)); } @if not(index($exclude, 'igx-column-hiding')) { - @include igx-column-hiding($theme: get-theme($preset, 'igx-column-hiding')); + @include igx-column-hiding(igx-column-hiding-theme($palette, $schema)); } @if not(index($exclude, 'igx-combo')) { - @include igx-combo($theme: get-theme($preset, 'igx-combo')); + @include igx-combo(igx-combo-theme($palette, $schema)); } @if not(index($exclude, 'igx-date-picker')) { - @include igx-date-picker($theme: get-theme($preset, 'igx-date-picker')); + @include igx-date-picker(igx-date-picker-theme($palette, $schema)); } @if not(index($exclude, 'igx-dialog')) { - @include igx-dialog($theme: get-theme($preset, 'igx-dialog')); + @include igx-dialog(igx-dialog-theme($palette, $schema)); } @if not(index($exclude, 'igx-drop-down')) { - @include igx-drop-down($theme: get-theme($preset, 'igx-drop-down')); + @include igx-drop-down(igx-drop-down-theme($palette, $schema)); } @if not(index($exclude, 'igx-expansion-panel')) { - @include igx-expansion-panel($theme: get-theme($preset, 'igx-expansion-panel')); + @include igx-expansion-panel(igx-expansion-panel-theme($palette, $schema)); } @if not(index($exclude, 'igx-grid')) { - @include igx-grid($theme: get-theme($preset, 'igx-grid')); + @include igx-grid(igx-grid-theme($palette, $schema)); } @if not(index($exclude, 'igx-grid-filtering')) { - @include igx-grid-filtering($theme: get-theme($preset, 'igx-grid-filtering')); + @include igx-grid-filtering(igx-grid-filtering-theme($palette, $schema)); } @if not(index($exclude, 'igx-grid-summary')) { - @include igx-grid-summary($theme: get-theme($preset, 'igx-grid-summary')); + @include igx-grid-summary(igx-grid-summary-theme($palette, $schema)); } @if not(index($exclude, 'igx-grid-toolbar')) { - @include igx-grid-toolbar($theme: get-theme($preset, 'igx-grid-toolbar')); + @include igx-grid-toolbar(igx-grid-toolbar-theme($palette, $schema)); } @if not(index($exclude, 'igx-icon')) { - @include igx-icon($theme: get-theme($preset, 'igx-icon')); + @include igx-icon(igx-icon-theme($palette, $schema)); } @if not(index($exclude, 'igx-input-group')) { - @include igx-input-group($theme: get-theme($preset, 'igx-input-group')); + @include igx-input-group(igx-input-group-theme($palette, $schema)); } @if not(index($exclude, 'igx-list')) { - @include igx-list($theme: get-theme($preset, 'igx-list')); + @include igx-list(igx-list-theme($palette, $schema)); } @if not(index($exclude, 'igx-navbar')) { - @include igx-navbar($theme: get-theme($preset, 'igx-navbar')); + @include igx-navbar(igx-navbar-theme($palette, $schema)); } @if not(index($exclude, 'igx-nav-drawer')) { - @include igx-navdrawer($theme: get-theme($preset, 'igx-navdrawer')); + @include igx-navdrawer(igx-navdrawer-theme($palette, $schema)); } @if not(index($exclude, 'igx-overlay')) { - @include igx-overlay($theme: get-theme($preset, 'igx-overlay')); + @include igx-overlay(igx-overlay-theme($palette, $schema)); } @if not(index($exclude, 'igx-grid-paginator')) { - @include igx-grid-paginator($theme: get-theme($preset, 'igx-grid-paginator')); + @include igx-grid-paginator(igx-grid-paginator-theme($palette, $schema)); } @if not(index($exclude, 'progress-circular')) { - @include igx-progress-circular($theme: get-theme($preset, 'igx-progress-circular')); + @include igx-progress-circular(igx-progress-circular-theme($palette, $schema)); } @if not(index($exclude, 'progress-linear')) { - @include igx-progress-linear($theme: get-theme($preset, 'igx-progress-linear')); + @include igx-progress-linear(igx-progress-linear-theme($palette, $schema)); } @if not(index($exclude, 'igx-radio')) { - @include igx-radio($theme: get-theme($preset, 'igx-radio')); + @include igx-radio(igx-radio-theme($palette, $schema)); } @if not(index($exclude, 'igx-slider')) { - @include igx-slider($theme: get-theme($preset, 'igx-slider')); + @include igx-slider(igx-slider-theme($palette, $schema)); } @if not(index($exclude, 'igx-snackbar')) { - @include igx-snackbar($theme: get-theme($preset, 'igx-snackbar')); + @include igx-snackbar(igx-snackbar-theme($palette, $schema)); } @if not(index($exclude, 'igx-switch')) { - @include igx-switch($theme: get-theme($preset, 'igx-switch')); + @include igx-switch(igx-switch-theme($palette, $schema)); } @if not(index($exclude, 'igx-tabs')) { - @include igx-tabs($theme: get-theme($preset, 'igx-tabs')); + @include igx-tabs(igx-tabs-theme($palette, $schema)); } @if not(index($exclude, 'igx-toast')) { - @include igx-toast($theme: get-theme($preset, 'igx-toast')); + @include igx-toast(igx-toast-theme($palette, $schema)); } @if not(index($exclude, 'igx-tooltip')) { - @include igx-tooltip($theme: get-theme($preset, 'igx-tooltip')); + @include igx-tooltip(igx-tooltip-theme($palette, $schema)); } @if not(index($exclude, 'igx-time-picker')) { - @include igx-time-picker($theme: get-theme($preset, 'igx-time-picker')); + @include igx-time-picker(igx-time-picker-theme($palette, $schema)); } } + +@mixin igx-green-theme() { + @include igx-theme($palette: $dark-green-palette, $schema: $dark-green-theme); +} diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_utilities.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_utilities.scss index 1b33dd9a89a..02b91022800 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_utilities.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_utilities.scss @@ -1,3 +1,4 @@ @import '../base/index'; @import '../typography/index'; +@import './schemas/index'; @import './palettes'; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss index b784ec6cd18..77134088c98 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/presets/igniteui-dark-green.scss @@ -1,6 +1,6 @@ @import '../index'; -@import './dark-green/index'; +@import '../schemas/dark-green/index'; // Generate a palette @include igx-core(); -@include igx-theme($default-palette, $preset: $dark-green-theme); +@include igx-theme($default-palette, $schema: $dark-green-theme); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/_index.scss new file mode 100644 index 00000000000..dc4b6e86c64 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/_index.scss @@ -0,0 +1,2 @@ +@import './light/index'; +@import './dark/index'; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/dark-green/_components-theme.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_components-theme.scss similarity index 83% rename from projects/igniteui-angular/src/lib/core/styles/themes/presets/dark-green/_components-theme.scss rename to projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_components-theme.scss index 4b35737e99f..29410dc3e91 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/presets/dark-green/_components-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_components-theme.scss @@ -11,21 +11,19 @@ $avatar-dark-green-theme: igx-avatar-theme( // BADGE $badge-dark-green-theme: igx-badge-theme( - $palette: $dark-green-palette, $background-color: $dark-green-dark-text ); // BUTTONS -$button-dark-green-theme: igx-button-theme( - $palette: $dark-green-palette, - $disabled-color: $dark-green-white-40, - $disabled-background: $dark-green-white-10, - $icon-background: $dark-green-background-darker +$button-dark-green-theme: ( + raised-background: red, + disabled-color: $dark-green-white-40, + disabled-background: $dark-green-white-10, + icon-background: $dark-green-background-darker ); // BUTTONS GROUP $button-group-dark-green-theme: igx-button-group-theme( - $palette: $dark-green-palette, $item-background: $dark-green-background-darker, $item-hover-background: $dark-green-white-30, $item-selected-background: $dark-green-white-30, @@ -34,68 +32,57 @@ $button-group-dark-green-theme: igx-button-group-theme( // INPUT GROUP $input-gruop-dark-green-theme: igx-input-group-theme( - $palette: $dark-green-palette, $variant: 'light' ); // RIPPLE $ripple-dark-green-theme: igx-ripple-theme( - $palette: $dark-green-palette, $color: $dark-green-white-70 ); // SLIDER $slider-dark-green-theme: igx-slider-theme( - $palette: $dark-green-palette, $variant: 'light' ); // CALENDAR $calendar-dark-green-theme: igx-calendar-theme( - $palette: $dark-green-palette, $content-background: $dark-green-background-darker ); // DIALOG $dialog-dark-green-theme: igx-dialog-theme( - $palette: $dark-green-palette, $background: $dark-green-background-darker ); // TIME PICKER $time-picker-dark-green-theme: igx-time-picker-theme( - $palette: $dark-green-palette, $background-color: $dark-green-background-darker ); // EXPANSION PANEL $expansion-panel-dark-green-theme: igx-expansion-panel-theme( - $palette: $dark-green-palette, $header-background: $dark-green-background-darker, $header-focus-background: darken($dark-green-background-darker, 5%) ); // SWITCH $switch-dark-green-theme: igx-switch-theme( - $palette: $dark-green-palette, $variant: 'light' ); // RADIO $radio-dark-green-theme: igx-radio-theme( - $palette: $dark-green-palette, $variant: 'light' ); // CHECKBOX $checkbox-dark-green-theme: igx-checkbox-theme( - $palette: $dark-green-palette, $variant: 'light' ); // NAV-DRAWER $navdrawer-dark-green-theme: igx-navdrawer-theme( - $palette: $dark-green-palette, $background: $dark-green-background-darker, $item-header-text-color: $dark-green-white-70, $item-icon-color: $dark-green-white-50, @@ -107,27 +94,23 @@ $navdrawer-dark-green-theme: igx-navdrawer-theme( // CARD $card-dark-green-theme: igx-card-theme( - $palette: $dark-green-palette, $background: $dark-green-background-darker ); // CAROUSEL $carousel-dark-green-theme: igx-carousel-theme( - $palette: $dark-green-palette, $button-background: $dark-green-background-darker, $button-arrow-color: $dark-green-white-80, $button-hover-background: $dark-green-background-black ); // BOTTOM NAV -$bottom-nav-dark-green-theme: igx-bottom-nav-theme( - $palette: $dark-green-palette, - $background: $dark-green-content-background +$bottom-nav-dark-green-theme: ( + background: $dark-green-content-background ); // LIST $list-dark-green-theme: igx-list-theme( - $palette: $dark-green-palette, $background: $dark-green-background-darker, $item-background: $dark-green-background-darker, $item-background-active: lighten($dark-green-background-black, 5%), @@ -136,34 +119,29 @@ $list-dark-green-theme: igx-list-theme( // DROP DOWN $dropdown-dark-green-theme: igx-drop-down-theme( - $palette: $dark-green-palette, $background-color: $dark-green-background-darker ); // COMBO $combo-dark-green-theme: igx-combo-theme( - $palette: $dark-green-palette, $empty-list-placeholder-color: $dark-green-white-50, $empty-list-background: $dark-green-background-darker ); // PROGRESSBAR LINEAR $progressbar-lin-dark-green-theme: igx-progress-linear-theme( - $palette: $dark-green-palette, $track-color: $dark-green-white-40, $text-color: $dark-green-white-90 ); // PROGRESS BARs $progressbar-cir-dark-green-theme: igx-progress-circular-theme( - $palette: $dark-green-palette, $text-color: $dark-green-white-90, $base-circle-color: $dark-green-white-40 ); // GRID $grid-dark-green-theme: igx-grid-theme( - $palette: $dark-green-palette, $content-background: $dark-green-content-background, $content-text-color: $dark-green-light-text, $header-background: igx-color($dark-green-palette, 'grays', 800), @@ -197,7 +175,6 @@ $grid-dark-green-theme: igx-grid-theme( // FILTERING DIALOG $filtering-dark-green-theme: igx-grid-filtering-theme( - $palette: $dark-green-palette, $toggle-icon-color: $dark-green-white-70, $toggle-icon-filtered-color: igx-color($dark-green-palette, 'secondary'), $menu-background: $dark-green-background-darker, @@ -207,14 +184,12 @@ $filtering-dark-green-theme: igx-grid-filtering-theme( // PAGINATOR $paginator-dark-green-theme: igx-grid-paginator-theme( - $palette: $dark-green-palette, $background-color: $dark-green-content-background, $text-color: $dark-green-white-70 ); // SUMMARY $summary-dark-green-theme: igx-grid-summary-theme( - $palette: $dark-green-palette, $background-color: #111, $label-color: igx-color($dark-green-palette, 'secondary'), $label-hover-color: igx-color($dark-green-palette, 'secondary') @@ -222,7 +197,6 @@ $summary-dark-green-theme: igx-grid-summary-theme( // TOOLBAR $toolbar-dark-green-theme: igx-grid-toolbar-theme( - $palette: $dark-green-palette, $background-color: $dark-green-content-background, $dropdown-background: $dark-green-background-darker, $item-hover-background: $dark-green-white-30, @@ -231,7 +205,6 @@ $toolbar-dark-green-theme: igx-grid-toolbar-theme( // TABS $tabs-dark-green-theme: igx-tabs-theme( - $palette: $dark-green-palette, $item-background: igx-color($dark-green-palette, 'primary'), $button-background: igx-color($dark-green-palette, 'primary'), $item-hover-background: igx-color($dark-green-palette, 'primary', 300), @@ -248,7 +221,6 @@ $tabs-dark-green-theme: igx-tabs-theme( // CHIP $chips-dark-green-theme: igx-chip-theme( - $palette: $dark-green-palette, $background: #222, $selected-background: #222, $hover-selected-background: #555, @@ -259,6 +231,5 @@ $chips-dark-green-theme: igx-chip-theme( // BANNER $banner-dark-green-theme: igx-banner-theme( - $palette: $dark-green-palette, $banner-background: $dark-green-background-darker ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/dark-green/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_index.scss similarity index 100% rename from projects/igniteui-angular/src/lib/core/styles/themes/presets/dark-green/_index.scss rename to projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_index.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/presets/dark-green/_vars.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_vars.scss similarity index 100% rename from projects/igniteui-angular/src/lib/core/styles/themes/presets/dark-green/_vars.scss rename to projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/_vars.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss new file mode 100644 index 00000000000..fd1a487462f --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_avatar.scss @@ -0,0 +1,21 @@ +$_light-avatar: ( + name: 'igx-avatar', + + icon-background: ( + igx-color: ('grays', 400) + ), + + icon-color: ( + igx-color: ('grays', 800) + ), + + initials-background: ( + igx-color: ('grays', 400) + ), + + initials-color: ( + igx-color: ('grays', 800) + ), + + image-background: transparent +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss new file mode 100644 index 00000000000..35062eae5b7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss @@ -0,0 +1,9 @@ +$_light-badge: ( + name: 'igx-badge', + icon-color: #fff, + text-color: #fff, + border-color: #fff, + background-color: ( + igx-color: ('primary', 500) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss new file mode 100644 index 00000000000..973fb28126b --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss @@ -0,0 +1,20 @@ +$_light-banner: ( + name: 'igx-banner', + banner-background: #fff, + + banner-message-color: ( + igx-color: ('grays', 900) + ), + + banner-border-color: ( + igx-color: ('grays', 400) + ), + + banner-illustration-background: ( + igx-color: ('grays', 100) + ), + + banner-illustration-color: ( + igx-color: ('grays', 900) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss new file mode 100644 index 00000000000..8ec2fb9dc7e --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_bottom-nav.scss @@ -0,0 +1,12 @@ +$_light-bottom-nav: ( + name: 'igx-bottom-nav', + background: #fff, + + idle-item-color: ( + igx-color: ('grays', 700) + ), + + active-item-color: ( + igx-color: ('primary', 500) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss new file mode 100644 index 00000000000..4689ff4b85e --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button-group.scss @@ -0,0 +1,38 @@ +$_light-button-group: ( + name: 'igx-button-group', + item-background: #fff, + item-border-color: transparent, + + item-text-color: ( + igx-color: ('grays', 700) + ), + + item-hover-text-color: ( + igx-color: ('grays', 800) + ), + + item-hover-background: ( + igx-color: ('grays', 400) + ), + + item-selected-text-color: ( + igx-color: ('grays', 800) + ), + + item-selected-background: ( + igx-color: ('grays', 400) + ), + + item-selected-border-color: ( + igx-color: ('grays', 600), + rgba: .12 + ), + + disabled-text-color: ( + igx-color: ('grays', 400) + ), + + disabled-background-color: ( + igx-color: ('grays', 100) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss new file mode 100644 index 00000000000..dde4d6b32e0 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss @@ -0,0 +1,108 @@ +$_light-button: ( + name: 'igx-button', + + button-roundness: 4px, + + flat-background: transparent, + + flat-text-color: ( + igx-color: ('secondary', 500) + ), + + flat-hover-background: ( + igx-color: ('secondary', 500), + rgba: .05 + ), + + flat-hover-text-color: ( + igx-color: ('secondary', 500) + ), + + flat-focus-background: ( + igx-color: ('secondary', 400), + rgba: .12 + ), + + flat-focus-text-color: ( + igx-color: ('secondary', 500) + ), + + raised-background: ( + igx-color: ('secondary', 500) + ), + + raised-text-color: ( + igx-contrast-color: ('secondary', 500) + ), + + raised-hover-background: ( + igx-color: ('secondary', 300) + ), + + + raised-hover-text-color: ( + igx-contrast-color: ('secondary', 300) + ), + + raised-focus-background: ( + igx-color: ('secondary', 300) + ), + + raised-focus-text-color: ( + igx-contrast-color: ('secondary', 300) + ), + + fab-background: ( + igx-color: ('secondary', 500) + ), + + fab-text-color: ( + igx-contrast-color: ('secondary', 500) + ), + + fab-hover-background: ( + igx-color: ('secondary', 300) + ), + + fab-hover-text-color: ( + igx-contrast-color: ('secondary', 300) + ), + + fab-focus-background: ( + igx-color: ('secondary', 300) + ), + + fab-focus-text-color: ( + igx-contrast-color: ('secondary', 300) + ), + + icon-color: ( + igx-color: ('grays', 800) + ), + + icon-background: transparent, + + icon-hover-background: ( + igx-color: ('grays', 100) + ), + + icon-hover-color: ( + igx-color: ('grays', 800) + ), + + icon-focus-background: ( + igx-color: ('grays', 400) + ), + + icon-focus-color: ( + igx-color: ('grays', 800) + ), + + disabled-color: ( + igx-color: ('grays', 400) + ), + + disabled-background: ( + igx-color: ('grays', 100) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss new file mode 100644 index 00000000000..dc242b2506a --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss @@ -0,0 +1,87 @@ +$_light-calendar: ( + name: 'igx-calendar', + + content-background: #fff, + + content-text-color: ( + igx-color: ('grays', 900) + ), + + header-background: ( + igx-color: ('secondary', 500) + ), + + header-text-color: ( + igx-contrast-color: ('secondary', 500) + ), + + picker-arrow-color: ( + igx-color: ('grays', 800) + ), + + picker-arrow-hover-color: ( + igx-color: ('secondary', 500) + ), + + picker-text-color: ( + igx-color: ('grays', 800) + ), + + picker-text-hover-color: ( + igx-color: ('secondary', 500) + ), + + inactive-text-color: ( + igx-color: ('grays', 400) + ), + + weekend-text-color: ( + igx-color: ('grays', 500) + ), + + year-current-text-color: ( + igx-color: ('secondary', 500) + ), + + month-current-text-color: ( + igx-color: ('secondary', 500) + ), + + year-hover-text-color: ( + igx-color: ('secondary', 500) + ), + + month-hover-text-color: ( + igx-color: ('secondary', 500) + ), + + date-selected-background: ( + igx-color: ('secondary', 500) + ), + + date-selected-text-color: ( + igx-contrast-color: ('secondary', 500) + ), + + date-current-text-color: ( + igx-color: ('secondary', 500) + ), + + date-hover-background: ( + igx-color: ('grays', 200) + ), + + date-special-background: ( + igx-color: ('grays', 100) + ), + + date-special-text-color: ( + igx-color: ('grays', 900) + ), + + date-disabled-text-color: ( + igx-color: ('grays', 500), + hexrgba: (), + rgba: .6 + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss new file mode 100644 index 00000000000..b755f7066ea --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss @@ -0,0 +1,20 @@ +$_light-card: ( + name: 'igx-card', + background: #fff, + + header-text-color: ( + igx-color: ('grays', 800) + ), + + subtitle-text-color: ( + igx-color: ('grays', 600) + ), + + content-text-color: ( + igx-color: ('grays', 600) + ), + + actions-text-color: ( + igx-color: ('grays', 600) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss new file mode 100644 index 00000000000..19099e27082 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss @@ -0,0 +1,17 @@ +$_light-carousel: ( + name: 'igx-carousel', + button-background: #fff, + button-hover-background: #fff, + + button-arrow-color: ( + igx-color: ('grays', 700) + ), + + button-hover-arrow-color: ( + igx-color: ('grays', 900) + ), + + indicator-dot-color: #fff, + indicator-border-color: #fff, + indicator-active-border-color: #fff +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss new file mode 100644 index 00000000000..e8bc10b5017 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss @@ -0,0 +1,20 @@ +$_light-checkbox: ( + name: 'igx-checkbox', + tick-color: #fff, + + label-color: ( + igx-color: ('grays', 900) + ), + + empty-color: ( + igx-color: ('grays', 600) + ), + + fill-color: ( + igx-color: ('secondary', 500) + ), + + disabled-color: ( + igx-color: ('grays', 400) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss new file mode 100644 index 00000000000..0fe3b175e20 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss @@ -0,0 +1,64 @@ +$_light-chip: ( + name: 'igx-chip', + roundness: rem(32px), + + text-color: ( + igx-color: ('grays', 700) + ), + + background: ( + igx-color: ('grays', 200) + ), + + border-color: transparent, + + hover-text-color: ( + igx-color: ('grays', 700) + ), + + hover-background: ( + igx-color: ('grays', 300) + ), + + hover-border-color: transparent, + + focus-text-color: ( + igx-color: ('grays', 700) + ), + + focus-background: ( + igx-color: ('grays', 400) + ), + + focus-border-color: transparent, + + selected-text-color: ( + igx-color: ('grays', 700) + ), + + selected-background: ( + igx-color: ('grays', 300) + ), + + selected-border-color: transparent, + + hover-selected-text-color: ( + igx-color: ('grays', 700) + ), + + hover-selected-background: ( + igx-color: ('grays', 400) + ), + + hover-selected-border-color: transparent, + + focus-selected-text-color: ( + igx-color: ('grays', 700) + ), + + focus-selected-background: ( + igx-color: ('grays', 400) + ), + + focus-selected-border-color: transparent +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss new file mode 100644 index 00000000000..08b5c8d70ed --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_column-hiding.scss @@ -0,0 +1,7 @@ +$_light-column-hiding: ( + name: 'igx-column-hiding', + background-color: transparent, + title-color: ( + igx-color: ('primary', 500) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss new file mode 100644 index 00000000000..b3921cf5df4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss @@ -0,0 +1,12 @@ +$_light-combo: ( + name: 'igx-combo', + empty-list-background: #fff, + + search-separator-border-color: ( + igx-color: ('grays', 300) + ), + + empty-list-placeholder-color: ( + igx-color: ('grays', 400) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-picker.scss new file mode 100644 index 00000000000..a45fde16926 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_date-picker.scss @@ -0,0 +1,3 @@ +$_light-date-picker: ( + name: 'igx-date-picker' +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss new file mode 100644 index 00000000000..d0c34480f05 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss @@ -0,0 +1,12 @@ +$_light-dialog: ( + name: 'igx-dialog', + background: #fff, + + title-color: ( + igx-color: ('grays', 800) + ), + + message-color: ( + igx-color: ('grays', 600) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss new file mode 100644 index 00000000000..07ff600ef48 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss @@ -0,0 +1,58 @@ +$_light-drop-down: ( + name: 'igx-drop-down', + + background-color: #fff, + + header-text-color: ( + igx-color: ('secondary', 500) + ), + + item-text-color: ( + igx-color: ('grays', 800) + ), + + hover-item-text-color: ( + igx-color: ('grays', 800) + ), + + hover-item-background: ( + igx-color: ('grays', 100) + ), + + focused-item-background: ( + igx-color: ('grays', 100) + ), + + focused-item-text-color: ( + igx-color: ('grays', 800) + ), + + selected-item-background: ( + igx-color: ('secondary', 500) + ), + + selected-item-text-color: ( + igx-contrast-color: ('secondary', 500) + ), + + selected-hover-item-background: ( + igx-color: ('secondary', 300) + ), + + selected-hover-item-text-color: ( + igx-contrast-color: ('secondary', 300) + ), + + selected-focus-item-background: ( + igx-color: ('secondary', 300) + ), + + selected-focus-item-text-color: ( + igx-contrast-color: ('secondary', 300) + ), + + disabled-item-background: transparent, + disabled-item-text-color: ( + igx-color: ('grays', 500) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss new file mode 100644 index 00000000000..e296d70f18e --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_expansion-panel.scss @@ -0,0 +1,29 @@ +$_light-expansion-panel: ( + name: 'igx-expansion-panel', + header-background: #fff, + body-background: #fff, + + header-focus-background: ( + igx-color: ('grays', 100) + ), + + header-title-color: ( + igx-color: ('grays', 800) + ), + + header-description-color: ( + igx-color: ('grays', 600) + ), + + header-icon-color: ( + igx-color: ('grays', 800) + ), + + body-color: ( + igx-color: ('grays', 800) + ), + + disabled-color: ( + igx-color: ('grays', 500) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss new file mode 100644 index 00000000000..0468c1ba255 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-filtering.scss @@ -0,0 +1,33 @@ +$_light-grid-filtering: ( + name: 'igx-grid-filtering', + menu-background: #fff, + toggle-background: transparent, + toggle-filtered-background: transparent, + toggle-icon-color: inherit, + toggle-icon-hover-color: #fff, + menu-button-disabled-text-color: initial, + + toggle-icon-active-color: ( + igx-contrast-color: ('secondary', 500), + ), + + toggle-icon-filtered-color: ( + igx-color: ('secondary', 500) + ), + + toggle-hover-background: ( + igx-color: ('grays', 300) + ), + + toggle-active-background: ( + igx-color: ('secondary', 500) + ), + + menu-text-color: ( + igx-color: ('grays', 900) + ), + + menu-button-text-color: ( + igx-color: ('secondary', 500) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss new file mode 100644 index 00000000000..d9065938442 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-pagination.scss @@ -0,0 +1,14 @@ +$_light-grid-pagination: ( + name: 'igx-grid-paginator', + + text-color: currentColor, + + background-color: ( + igx-color: ('grays', 100), + hexrgba: () + ), + + border-color: ( + igx-color: ('grays', 400) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss new file mode 100644 index 00000000000..43137d34d11 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-summary.scss @@ -0,0 +1,31 @@ +$_light-grid-summary: ( + name: 'igx-grid-summary', + + background-color: inherit, + + result-color: currentColor, + + label-color: ( + igx-color: ('primary', 500) + ), + + label-hover-color: ( + igx-color: ('primary', 700) + ), + + border-color: ( + igx-color: ('grays', 400) + ), + + pinned-border-width: 2px, + + pinned-border-style: solid, + + pinned-border-color: ( + igx-color: ('grays', 400) + ), + + inactive-color: ( + igx-color: ('grays', 400) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss new file mode 100644 index 00000000000..fcda7962805 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss @@ -0,0 +1,57 @@ +$_light-grid-toolbar: ( + name: 'igx-grid-toolbar', + + background-color: ( + igx-color: ('grays', 50) + ), + + button-background: ( + igx-color: ('grays', 100) + ), + + title-text-color : ( + igx-color: ('grays', 600) + ), + + button-text-color: ( + igx-color: ('grays', 600) + ), + + button-hover-background: ( + igx-color: ('grays', 100) + ), + + button-hover-text-color: ( + igx-color: ('grays', 600) + ), + + button-focus-background: ( + igx-color: ('grays', 100) + ), + + button-focus-text-color: ( + igx-color: ('grays', 600) + ), + + dropdown-background: #fff, + + item-text-color: ( + igx-color: ('grays', 600) + ), + + item-hover-background: ( + igx-color: ('grays', 100) + ), + + item-hover-text-color: ( + igx-color: ('grays', 600) + ), + + item-focus-background: ( + igx-color: ('grays', 100) + ), + + item-focus-text-color: ( + igx-color: ('grays', 600) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss new file mode 100644 index 00000000000..4fddf6f7044 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss @@ -0,0 +1,188 @@ +$_light-grid: ( + name: 'igx-grid', + + header-background: ( + igx-color: ('grays', 100), + hexrgba: () + ), + + header-text-color: ( + igx-color: ('grays', 600) + ), + + header-border-width: 1px, + header-border-style: solid, + + header-border-color: ( + igx-color: ('grays', 200) + ), + + content-background: #fff, + content-text-color: ( + igx-color: ('grays', 800) + ), + + ghost-header-text-color: ( + igx-color: ('grays', 600) + ), + + ghost-header-icon-color: ( + igx-color: ('grays', 500) + ), + + ghost-header-background: #fff, + + row-odd-background: #fff, + row-even-background: #fff, + row-odd-text-color: inherit, + row-even-text-color: inherit, + + row-selected-background: ( + igx-color: ('grays', 800), + hexrgba: () + ), + + row-selected-text-color: ( + igx-contrast-color: ('grays', 800) + ), + + row-hover-background: ( + igx-color: ('grays', 200), + hexrgba: () + ), + + row-hover-text-color: ( + igx-contrast-color: ('grays', 200) + ), + row-border-color: ( + igx-color: ('grays', 300) + ), + + pinned-border-width: 2px, + pinned-border-style: solid, + + pinned-border-color: ( + igx-color: ('grays', 400) + ), + + cell-selected-background: ( + igx-color: ('primary', 500) + ), + + cell-selected-text-color: ( + igx-contrast-color: ('primary', 500) + ), + + cell-editing-background: #fff, + + edit-mode-color: ( + igx-color: ('secondary', 500) + ), + + edited-row-indicator: ( + igx-color: ('grays', 400) + ), + + cell-edited-value-color: ( + igx-color: ('grays', 600) + ), + + resize-line-color: ( + igx-color: ('secondary', 500) + ), + + drop-indicator-color: ( + igx-color: ('secondary', 500) + ), + + grouparea-background: ( + igx-color: ('grays', 100), + hexrgba: () + ), + + group-label-column-name-text: ( + igx-color: ('primary', 500) + ), + + group-label-icon: ( + igx-color: ('primary', 500) + ), + + group-label-text: ( + igx-color: ('grays', 800) + ), + + expand-all-icon-color: ( + igx-color: ('grays', 600) + ), + + expand-all-icon-hover-color: ( + igx-color: ('grays', 800) + ), + + expand-icon-color: ( + igx-color: ('grays', 600) + ), + + expand-icon-hover-color: ( + igx-color: ('primary', 500) + ), + + active-expand-icon-color: ( + igx-color: ('grays', 500) + ), + + active-expand-icon-hover-color: ( + igx-color: ('primary', 500) + ), + + group-count-background: ( + igx-color: ('grays', 200) + ), + + group-count-text-color: ( + igx-color: ('grays', 600) + ), + + drop-area-text-color: ( + igx-color: ('grays', 600) + ), + + drop-area-icon-color: ( + igx-color: ('grays', 500) + ), + + drop-area-background: ( + igx-color: ('grays', 100) + ), + + drop-area-on-drop-background: ( + igx-color: ('grays', 200) + ), + + group-row-background: ( + igx-color: ('grays', 100), + hexrgba: () + ), + + group-row-selected-background: ( + igx-color: ('grays', 200), + hexrgba: () + ), + + filtering-header-background: #fff, + + filtering-header-text-color: ( + igx-color: ('grays', 800) + ), + + filtering-row-background: #fff, + + filtering-row-text-color: ( + igx-color: ('grays', 800) + ), + + tree-filtered-text-color: ( + igx-color: ('grays', 500) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss new file mode 100644 index 00000000000..a3a15702924 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_icon.scss @@ -0,0 +1,9 @@ +$_light-icon: ( + name: 'igx-icon', + + color: currentColor, + + size: rem(24px), + + disabled-color: currentColor +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss new file mode 100644 index 00000000000..3204f8d5b88 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss @@ -0,0 +1,80 @@ +@import './avatar'; +@import './badge'; +@import './banner'; +@import './bottom-nav'; +@import './button'; +@import './button-group'; +@import './calendar'; +@import './card'; +@import './carousel'; +@import './checkbox'; +@import './chip'; +@import './column-hiding'; +@import './combo'; +@import './date-picker'; +@import './dialog'; +@import './drop-down'; +@import './expansion-panel'; +@import './grid'; +@import './grid-filtering'; +@import './grid-pagination'; +@import './grid-summary'; +@import './grid-toolbar'; +@import './icon'; +@import './input-group'; +@import './list'; +@import './navbar'; +@import './navdrawer'; +@import './overlay'; +@import './progress'; +@import './radio'; +@import './ripple'; +@import './slider'; +@import './snackbar'; +@import './switch'; +@import './tabs'; +@import './time-picker'; +@import './toast'; +@import './tooltip'; + +$light-schema: ( + igx-avatar: $_light-avatar, + igx-badge: $_light-badge, + igx-banner: $_light-banner, + igx-bottom-nav: $_light-bottom-nav, + igx-button: $_light-button, + igx-button-group: $_light-button-group, + igx-calendar: $_light-calendar, + igx-card: $_light-card, + igx-carousel: $_light-carousel, + igx-checkbox: $_light-checkbox, + igx-chip: $_light-chip, + igx-column-hiding: $_light-column-hiding, + igx-combo: $_light-combo, + igx-date-picker: extend($_light-calendar, $_light-date-picker), + igx-dialog: $_light-dialog, + igx-drop-down: $_light-drop-down, + igx-expansion-panel: $_light-expansion-panel, + igx-grid: $_light-grid, + igx-grid-filtering: $_light-grid-filtering, + igx-grid-paginator: $_light-grid-pagination, + igx-grid-summary: $_light-grid-summary, + igx-grid-toolbar: $_light-grid-toolbar, + igx-icon: $_light-icon, + igx-input-group: $_light-input-group, + igx-list: $_light-list, + igx-navbar: $_light-navbar, + igx-navdrawer: $_light-navdrawer, + igx-overlay: $_light-overlay, + igx-progress-linear: $_light-progress-linear, + igx-progress-circular: $_light-progress-circular, + igx-radio: $_light-radio, + igx-ripple: $_light-ripple, + igx-slider: $_light-slider, + igx-snackbar: $_light-snackbar, + igx-switch: $_light-switch, + igx-tabs: $_light-tabs, + igx-time-picker: $_light-time-picker, + igx-toast: $_light-toast, + igx-tooltip: $_light-tooltip +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss new file mode 100644 index 00000000000..825e6298020 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss @@ -0,0 +1,96 @@ +$_light-input-group: ( + name: 'igx-input-group', + + idle-text-color: ( + igx-color: ('grays', 600) + ), + + filled-text-color: ( + igx-color: ('grays', 900) + ), + + focused-text-color: ( + igx-color: ('grays', 900) + ), + + disabled-text-color: ( + igx-color: ('grays', 500) + ), + + idle-secondary-color: ( + igx-color: ('grays', 600) + ), + + filled-secondary-color: ( + igx-color: ('grays', 600) + ), + + focused-secondary-color: ( + igx-color: ('primary', 500) + ), + + idle-bottom-line-color: ( + igx-color: ('grays', 600) + ), + + hover-bottom-line-color: ( + igx-color: ('grays', 900) + ), + + filled-bottom-line-color: ( + igx-color: ('grays', 600) + ), + + focused-bottom-line-color: ( + igx-color: ('primary', 500) + ), + + interim-bottom-line-color: ( + igx-color: ('primary', 500), + rgba: .12 + ), + + disabled-bottom-line-color: rgba(0, 0, 0, .42), + + disabled-border-color: ( + igx-color: ('grays', 500), + rgba: .06 + ), + + box-background: rgba(0, 0, 0, .06), + box-disabled-background: rgba(0, 0, 0, .03), + + border-background: transparent, + border-disabled-background: rgba(0, 0, 0, .03), + + search-background: white, + search-disabled-background: white, + + search-shadow-color: ( + igx-color: ('grays', 600) + ), + + search-disabled-shadow-color: ( + igx-color: ('grays', 300) + ), + + success-secondary-color: ( + igx-color: ('success') + ), + + warning-secondary-color: ( + igx-color: ('warn') + ), + + error-secondary-color: ( + igx-color: ('error') + ), + + placeholder-color: ( + igx-color: ('grays', 500) + ), + + disabled-placeholder-color: ( + igx-color: ('grays', 400) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss new file mode 100644 index 00000000000..496156c114e --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss @@ -0,0 +1,26 @@ +$_light-list: ( + name: 'igx-list', + + background: #fff, + + header-background: #fff, + + header-text-color: ( + igx-color: ('secondary', 500) + ), + + item-background: #fff, + + item-text-color: ( + igx-color: ('grays', 800) + ), + + item-background-active: ( + igx-color: ('grays', 100), + hexrgba: () + ), + + item-text-color-active: ( + igx-color: ('grays', 800) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss new file mode 100644 index 00000000000..8b290515cf2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navbar.scss @@ -0,0 +1,13 @@ +$_light-navbar: ( + name: 'igx-navbar', + + text-color: #fff, + + idle-icon-color: #fff, + + hover-icon-color: #fff, + + background: ( + igx-color: ('primary', 500) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss new file mode 100644 index 00000000000..358079b762d --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss @@ -0,0 +1,43 @@ +$_light-navdrawer: ( + name: 'igx-navdrawer', + + background: #fff, + + border-color: rgba(0, 0, 0, .14), + + item-text-color: ( + igx-color: ('grays', 700) + ), + + item-active-text-color: ( + igx-color: ('primary', 500) + ), + + item-active-background: ( + igx-color: ('grays', 100) + ), + + item-hover-background: ( + igx-color: ('grays', 200) + ), + + item-hover-text-color: ( + igx-color: ('grays', 800) + ), + + item-header-text-color: ( + igx-color: ('grays', 600) + ), + + item-icon-color: ( + igx-color: ('grays', 700) + ), + + item-active-icon-color: ( + igx-color: ('primary', 500) + ), + + item-hover-icon-color: ( + igx-color: ('grays', 800) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss new file mode 100644 index 00000000000..9f61a97dbf3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_overlay.scss @@ -0,0 +1,6 @@ +$_light-overlay: ( + name: 'igx-overlay', + background-color: ( + igx-color: ('grays', 500) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss new file mode 100644 index 00000000000..2182d9adae7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_progress.scss @@ -0,0 +1,49 @@ +$_light-progress-linear: ( + name: 'igx-progress-linear', + + stripes-color: rgba(#fff, .7), + + track-color: ( + igx-color: ('grays', 300) + ), + + fill-color-default: ( + igx-color: ('primary', 500) + ), + + fill-color-danger: ( + igx-color: ('error') + ), + + fill-color-warning: ( + igx-color: ('warn') + ), + + fill-color-info: ( + igx-color: ('info') + ), + + fill-color-success: ( + igx-color: ('success') + ), + + text-color: ( + igx-color: ('grays', 700) + ) +); + +$_light-progress-circular: ( + name: 'igx-progress-circular', + + base-circle-color: ( + igx-color: ('grays', 300) + ), + + progress-circle-color: ( + igx-color: ('primary', 500) + ), + + text-color: ( + igx-color: ('grays', 700) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss new file mode 100644 index 00000000000..40f300d9eef --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss @@ -0,0 +1,19 @@ +$_light-radio: ( + name: 'igx-radio', + + label-color: ( + igx-color: ('grays', 900) + ), + + empty-color: ( + igx-color: ('grays', 600) + ), + + fill-color: ( + igx-color: ('secondary', 500) + ), + + disabled-color: ( + igx-color: ('grays', 400) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss new file mode 100644 index 00000000000..6b2ff5ff80f --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_ripple.scss @@ -0,0 +1,6 @@ +$_light-ripple: ( + name: 'igx-ripple', + color: ( + igx-color: ('grays', 800) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss new file mode 100644 index 00000000000..bc2f58c082a --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss @@ -0,0 +1,32 @@ +$_light-slider: ( + name: 'igx-slider', + + track-color: ( + igx-color: ('secondary', 500), + ), + + thumb-color: ( + igx-color: ('secondary', 500) + ), + + disabled-thumb-color: ( + igx-color: ('grays', 400), + hexrgba: () + ), + + label-background-color: ( + igx-color: ('secondary', 500) + ), + + label-text-color: ( + igx-contrast-color: ('secondary', 500) + ), + + base-track-color: ( + igx-color: ('grays', 500) + ), + + disabled-base-track-color: ( + igx-color: ('grays', 400) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss new file mode 100644 index 00000000000..a000610499b --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_snackbar.scss @@ -0,0 +1,15 @@ +$_light-snackbar: ( + name: 'igx-snackbar', + + background: ( + igx-color: ('grays', 900) + ), + + text-color: ( + igx-contrast-color: ('grays', 900) + ), + + button-color: ( + igx-color: ('secondary', 500) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss new file mode 100644 index 00000000000..e087e80acd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss @@ -0,0 +1,33 @@ +$_light-switch: ( + name: 'igx-switch', + + thumb-on-color: ( + igx-color: ('secondary', 500) + ), + + track-on-color: ( + igx-color: ('secondary', 500), + rgba: .5 + ), + + thumb-off-color: #fafafa, + + track-off-color: rgba(0, 0, 0, .5), + + label-color: ( + igx-color: ('grays', 900) + ), + + label-disabled-color: ( + igx-color: ('grays', 400) + ), + + track-disabled-color: ( + igx-color: ('grays', 300) + ), + + thumb-disabled-color: ( + igx-color: ('grays', 400), + hexrgba: () + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss new file mode 100644 index 00000000000..e16cbf08fd6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss @@ -0,0 +1,55 @@ +$_light-tabs: ( + name: 'igx-tabs', + + item-text-color: ( + igx-color: ('grays', 700) + ), + + item-background: #fff, + + item-hover-color: ( + igx-color: ('grays', 700) + ), + + item-hover-background: ( + igx-color: ('grays', 200) + ), + + item-active-icon-color: ( + igx-color: ('primary', 500) + ), + + item-active-color: ( + igx-color: ('primary', 500) + ), + + item-active-background: ( + igx-color: ('grays', 200) + ), + + indicator-color: ( + igx-color: ('primary', 500) + ), + + button-color: ( + igx-color: ('grays', 500) + ), + + button-background: #fff, + + button-hover-background: ( + igx-color: ('grays', 100) + ), + + button-hover-color: ( + igx-color: ('grays', 600) + ), + + tab-ripple-color: ( + igx-color: ('grays', 100) + ), + + button-ripple-color: ( + igx-color: ('grays', 100) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss new file mode 100644 index 00000000000..41ef81eabec --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss @@ -0,0 +1,33 @@ +$_light-time-picker: ( + name: 'igx-time-picker', + + text-color: ( + igx-color: ('grays', 500) + ), + + hover-text-color: ( + igx-color: ('secondary', 500) + ), + + selected-text-color: ( + igx-color: ('secondary', 500) + ), + + active-item-background: ( + igx-color: ('grays', 100) + ), + header-background: ( + igx-color: ('secondary', 500) + ), + + header-hour-text-color: ( + igx-contrast-color: ('secondary', 500) + ), + + header-time-period-color: ( + igx-contrast-color: ('secondary', 500), + rgba: .8 + ), + + background-color: white +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss new file mode 100644 index 00000000000..34be2a45833 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_toast.scss @@ -0,0 +1,11 @@ +$_light-toast: ( + name: 'igx-toast', + + background: ( + igx-color: ('grays', 600) + ), + + text-color: ( + igx-contrast-color: ('grays', 600) + ) +); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss new file mode 100644 index 00000000000..5ddfd338f51 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss @@ -0,0 +1,18 @@ +$_light-tooltip: ( + name: 'igx-tooltip', + + background: ( + igx-color: ('grays', 700), + hexrgba: (), + rgba: .9 + ), + + text-color: ( + igx-color: ('grays', 700), + hexrgba: (), + rgba: .9, + text-contrast: () + ), + + roundness: rem(4px) +); diff --git a/src/styles/igniteui-theme.scss b/src/styles/igniteui-theme.scss index 90e99519ecd..db8f9939cd0 100644 --- a/src/styles/igniteui-theme.scss +++ b/src/styles/igniteui-theme.scss @@ -2,6 +2,7 @@ @import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700'); @import '../../projects/igniteui-angular/src/lib/core/styles/themes/index'; +@import '../../projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark-green/index'; @import 'mixins'; @import 'app-palettes'; @@ -12,23 +13,24 @@ .default-theme { $igx-background-color: #fff; $igx-foreground-color: text-contrast($igx-background-color); + background: $igx-background-color; color: $igx-foreground-color; - @include scrollbar-love(); - @include igx-theme($default-palette); + @include scrollbar-love(); + @include igx-theme($default-palette, $legacy-support: true); } -.dark-green-theme { - @import '../../projects/igniteui-angular/src/lib/core/styles/themes/presets/dark-green/index'; +.dark-green-theme { $igx-background-color: #484848; $igx-foreground-color: text-contrast($igx-background-color); + background: $igx-background-color; color: $igx-foreground-color; - @include scrollbar-love($igx-background-color); - @include igx-theme($default-palette, $preset: $dark-green-theme); + @include scrollbar-love($igx-background-color); + @include igx-green-theme(); .igniteui-logo__text { fill: #fff; From 9859adb8e8b794333abc9339e9c1e59ab02d5018 Mon Sep 17 00:00:00 2001 From: Viktor Slavov Date: Wed, 14 Nov 2018 16:39:47 +0200 Subject: [PATCH 26/77] refactor(combo) - navigation (#2999) * refactor(combo): refactor combo navigation, WIP * refactor(combo): refactor combo navigation * refactor(combo): add comments, trim, remove console.log * refactor(combo): add comments, trim, remove console.log * chore(combo): adjust failing tests * refactor(igxCombo): remove focusItem, use super.navigateItem instead * refactor(igxCombo): add navigate virtual * refactor(igxCombo): add focus add button + findFocusableIndex methods * refactor(igxCombo): adjust incorrect `navigateItem` calls * refactor(igxCombo): first header is not loaded and focus search - scroll, #2999 --- .../src/lib/combo/combo-dropdown.component.ts | 227 +++++++++--------- .../src/lib/combo/combo.component.spec.ts | 29 ++- .../src/lib/drop-down/drop-down.component.ts | 9 +- src/app/combo/combo.sample.css | 4 + 4 files changed, 134 insertions(+), 135 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index e0b80bc094b..130a86c3a4a 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -2,7 +2,7 @@ import { ChangeDetectorRef, Component, ContentChild, ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy } from '@angular/core'; -import { takeUntil } from 'rxjs/operators'; +import { takeUntil, take } from 'rxjs/operators'; import { IgxDropDownBase, Navigate } from '../drop-down/drop-down.component'; import { IgxDropDownItemBase } from '../drop-down/drop-down-item.component'; import { IgxComboComponent } from './combo.component'; @@ -136,13 +136,13 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest navigateFirst() { const vContainer = this.verticalScrollContainer; if (vContainer.state.startIndex === 0) { - this.focusItem(0); + super.navigateItem(0); return; } vContainer.scrollTo(0); this.subscribeNext(vContainer, () => { this.combo.triggerCheck(); - this.focusItem(0); + super.navigateItem(0); this.combo.triggerCheck(); }); } @@ -156,13 +156,13 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest this.combo.totalItemCount - 1 : Math.max(this.combo.data.length - 1, vContainer.igxForOf.length - 1); if (vContainer.igxForOf.length <= vContainer.state.startIndex + vContainer.state.chunkSize) { - this.focusItem(this.items.length - 1); + super.navigateItem(this.items.length - 1); return; } vContainer.scrollTo(scrollTarget); this.subscribeNext(vContainer, () => { this.combo.triggerCheck(); - this.focusItem(this.items.length - 1); + super.navigateItem(this.items.length - 1); this.combo.triggerCheck(); }); } @@ -174,9 +174,9 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest this.verticalScrollContainer.addScrollTop(direction * this.combo.itemHeight); this.subscribeNext(this.verticalScrollContainer, () => { if (direction === Navigate.Up) { - this.focusItem(0); + super.navigateItem(0); } else { - this.focusItem(this.focusedItem.index); + super.navigateItem(this.focusedItem.index); } }); } @@ -205,143 +205,132 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest /** * @hidden */ - navigateItem(newIndex: number, direction?: number) { - // Virtual scrolling holds one hidden loaded element at the bottom of the drop down list. - // At the top there isn't such a hidden element. - // That's why we hold the first or the one before the last list item as focused, during keyboard navigation. - // This means that if we want to focus next element, it's the last hidden element when scrolling down - // and when scrolling up it is not loaded at all. - // It's more special case when srcolling down and the hidden element is group header, - // which is not part of the this.items collection. - // In that case the real item is not hidden, but not loaded at all by the virtualization, - // and this is the same case as normal scroll up. + public navigateItem(newIndex: number, direction?: number) { const vContainer = this.verticalScrollContainer; - const extraScroll = this.combo.isAddButtonVisible(); - if (direction) { - if (direction === Navigate.Down && extraScroll) { - if (vContainer.igxForOf[vContainer.igxForOf.length - 1] === this.focusedItem.value) { - if (this.focusedItem) { - this.focusedItem.isFocused = false; - } - this.focusedItem = this.children.last; - this.focusedItem.isFocused = true; - return; - } else if (vContainer.igxForOf[vContainer.state.chunkSize + vContainer.state.startIndex - 2] === - this.focusedItem.value) { - this.subscribeNext(vContainer, () => { - if (this.focusedItem.isHeader && - vContainer.state.startIndex + vContainer.state.chunkSize < vContainer.igxForOf.length) { - vContainer.scrollNext(); - } - }); - vContainer.scrollNext(); - return; - } - } - } - if (newIndex === -1) { - this.navigateVirtualItem(direction, extraScroll ? 1 : 0); - } else if (newIndex === this.lastVisibleIndex && !this.isScrolledToLast) { - this.navigateVirtualItem(direction, extraScroll ? 1 : 0); - } else if (newIndex === this.lastVisibleIndex && this.isScrolledToLast) { - // When initially scrolling to the last item, a pseudo element is present in the children list - // We need to check if the element we're on is an actual element or an empty 'igx-combo-item' child - if (this.items[newIndex].element && this.items[newIndex].element.nativeElement.clientHeight) { - super.navigateItem(newIndex); - } - return; + const notVirtual = vContainer.dc.instance.notVirtual; + if (notVirtual || !direction) { // If list has no scroll OR no direction is passed + super.navigateItem(newIndex); // use default scroll + } else if (vContainer && vContainer.totalItemCount && vContainer.totalItemCount !== 0) { + this.navigateRemoteItem(direction); } else { - super.navigateItem(newIndex); + if (direction === Navigate.Up) { // Navigate UP + this.navigateUp(newIndex); + } else if (direction === Navigate.Down) { // Navigate DOWN + this.navigateDown(newIndex); + } } } - private navigateVirtualItem(direction: Navigate, extraScroll?: number) { + private navigateDown(newIndex?: number) { const vContainer = this.verticalScrollContainer; - // If the data is vitualized, data.length === vContainer.chunkSize, so the below checks are no-longer valid - if (vContainer && vContainer.totalItemCount && vContainer.totalItemCount !== 0) { - this.navigateRemoteItem(direction); - return; - } - let state = vContainer.state; - if (this.isScrolledToLast && direction === Navigate.Down) { // If on the bottom most item, do not subscribe - return; - } - // If on the topmost item, do not subscribe - if (this.verticalScrollContainer.getVerticalScroll().scrollTop === 0 && direction === Navigate.Up) { - return; + const allData = vContainer.igxForOf; + const extraScroll = this.combo.isAddButtonVisible() ? 1 : 0; + const focusedItem = this.focusedItem; + const items = this.items; + const children = this.children.toArray(); + if (focusedItem) { + if (focusedItem.value === 'ADD ITEM') { return; } + if (focusedItem.value === allData[allData.length - 1]) { + this.focusAddItemButton(); + return; + } } - const isScrollUp = direction === Navigate.Up; - let newScrollStartIndex = isScrollUp ? state.startIndex - 1 : state.startIndex + 1; - if (newScrollStartIndex < 0) { - newScrollStartIndex = 0; + let targetDataIndex = newIndex === -1 ? this.itemIndexInData(this.focusedItem.index) + 1 : this.itemIndexInData(newIndex); + const lastLoadedIndex = vContainer.state.startIndex + vContainer.state.chunkSize - 1; // Last item is not visible, so require scroll + if (targetDataIndex < lastLoadedIndex) { // If no scroll is required + if (newIndex !== -1 || newIndex === children.length - 1 - extraScroll) { // Use normal nav for visible items + super.navigateItem(newIndex); + } + } else if (this.isScrolledToLast && targetDataIndex === lastLoadedIndex) { // If already at bottom and target is last item + super.navigateItem(items.length - 1 - extraScroll); // Focus the last item (excluding Add Button) + } else { // If scroll is required + // If item is header, find next non-header index + const addedIndex = allData[targetDataIndex].isHeader ? this.findNextFocusableItem(targetDataIndex, Navigate.Down, allData) : 0; + targetDataIndex += addedIndex; // Add steps to the target index + if (addedIndex === -1) { // If there are no more non-header items & add button is visible + this.focusAddItemButton(); + } else if (targetDataIndex === allData.length - 1 && !this.isScrolledToLast) { + // If target is very last loaded item, but scroll is not at the bottom (item is in DOM but not visible) + vContainer.scrollTo(targetDataIndex); // This will not trigger `onChunkLoad` + super.navigateItem(items.length - 1 - extraScroll); // Target last item (excluding Add Button) + } else { // Perform virtual scroll + this.subscribeNext(vContainer, () => { + // children = all items in the DD (including addItemButton) + // length - 2 instead of -1, because we do not want to focus the last loaded item (in DOM, but not visible) + super.navigateItem(children[children.length - 2 - extraScroll].index); // Focus last item (excluding Add Button) + }); + vContainer.scrollTo(targetDataIndex); // Perform virtual scroll + } } - let data = vContainer.igxForOf; + } - if (data.length === 0) { - const newItem = this.children.first; - if (!newItem) { return; } - newItem.isFocused = true; - this._focusedItem = newItem; + private navigateUp(newIndex?: number) { + const vContainer = this.verticalScrollContainer; + const allData = vContainer.igxForOf; + const focusedItem = this.focusedItem; + if (focusedItem.value === allData.find(e => !e.isHeader && !e.hidden).value) { // If this is the very first non-header item + this.focusComboSearch(); // Focus combo search return; } - // Following the big comment above, when the new item is group header, then we need to load 2 elements at once. - if (data[newScrollStartIndex].isHeader && direction === Navigate.Up || - data[newScrollStartIndex + state.chunkSize - 2].isHeader && direction === Navigate.Down) { - newScrollStartIndex = isScrollUp ? newScrollStartIndex - 1 : newScrollStartIndex + 1; - // newScrollStartIndex = mod && direction === Navigate.Down ? newScrollStartIndex + 1 : newScrollStartIndex; - if (newScrollStartIndex < 0) { // If the next item loaded is a header and is also the very first item in the list. - vContainer.scrollTo(0); // Scrolls to the beginning of the list and switches focus to the searchInput + let targetDataIndex = newIndex === -1 ? this.itemIndexInData(focusedItem.index) - 1 : this.itemIndexInData(newIndex); + if (newIndex !== -1) { // If no scroll is required + if (this.isScrolledToLast && targetDataIndex === vContainer.state.startIndex) { + // If virt scrollbar is @ bottom, first item is in DOM but not visible + vContainer.scrollTo(targetDataIndex); // This will not trigger `onChunkLoad` + super.navigateItem(0); // Focus first visible item + } else { + super.navigateItem(newIndex); // Use normal navigation + } + } else { // Perform virtual scroll + // If item is header, find next non-header index + const addedIndex = allData[targetDataIndex].isHeader ? this.findNextFocusableItem(targetDataIndex, Navigate.Up, allData) : 0; + targetDataIndex -= addedIndex; // Add steps to targetDataIndex + if (addedIndex === -1) { // If there is no non-header + vContainer.scrollTo(0); + this.focusComboSearch(); // Focus combo search; + } else { this.subscribeNext(vContainer, () => { - this.combo.searchInput.nativeElement.focus(); - if (this.focusedItem) { - this.focusedItem.isFocused = false; - } - this.focusedItem = null; + super.navigateItem(0); // Focus the first loaded item }); - return; + vContainer.scrollTo(targetDataIndex); // Perform virtual scroll } } - // If it is the very last item in the collection, when moving down - if (newScrollStartIndex + state.chunkSize === data.length + 1) { - vContainer.scrollTo(newScrollStartIndex); - return; + } + + private itemIndexInData(index: number) { + return this.children.toArray().findIndex(e => e.index === index) + this.verticalScrollContainer.state.startIndex; + } + + private findNextFocusableItem(indexInData: number, direction: Navigate, data: any[]): number { + if (direction === Navigate.Up) { + return [...data].splice(0, indexInData + 1).reverse().findIndex(e => !e.isHeader); + } + return [...data].splice(indexInData, data.length - 1).findIndex(e => !e.isHeader); + } + + private focusComboSearch() { + this.combo.searchInput.nativeElement.focus(); + if (this.focusedItem) { + this.focusedItem.isFocused = false; + } + this.focusedItem = null; + } + + private focusAddItemButton() { + if (this.combo.isAddButtonVisible()) { + super.navigateItem(this.items.length - 1); } - vContainer.scrollTo(newScrollStartIndex); - this.subscribeNext(vContainer, () => { - state = vContainer.state; - data = vContainer.igxForOf; - - // Because we are sure that if we scroll up then the top element is not a header, then we focus the first one. - // When we scroll down, if the newly loaded element that is hidden is group header, - // then we focus the last item from the this.items array. - // This is because the this.items doens't contains the group headers, while there are rendered in the combo drop down. - // If the newly loaded element that is hidden isn't a header, this means that the first visible item, the one that needs focus, - // should be either the one that is before the last item (this.items). - const isBottomHiddenHeader = data[state.startIndex + state.chunkSize - 1].isHeader; - const index = isScrollUp ? 0 : isBottomHiddenHeader ? this.items.length - 1 - extraScroll : this.items.length - 2 - extraScroll; - - this.focusItem(index); - }); } private subscribeNext(virtualContainer: any, callback: (elem?) => void) { - virtualContainer.onChunkLoad.pipe(takeUntil(this.destroy$)).subscribe({ + virtualContainer.onChunkLoad.pipe(take(1), takeUntil(this.destroy$)).subscribe({ next: (e: any) => { callback(e); } }); } - private focusItem(visibleIndex: number) { - const oldItem = this._focusedItem; - if (oldItem) { - oldItem.isFocused = false; - } - const newItem = this.items[visibleIndex]; - newItem.isFocused = true; - this._focusedItem = newItem; - } - + protected scrollToHiddenItem(newItem: any): void {} /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 1fd0fee569f..5581a24184f 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -290,6 +290,7 @@ describe('igxCombo', () => { expect(dropdown.verticalScrollContainer.state.startIndex).toEqual(0); expect(IgxDropDownBase.prototype.navigatePrev).toHaveBeenCalledTimes(1); })); + it('Should properly call dropdown navigateNext with virutal items', ( async () => { const fix = TestBed.createComponent(IgxComboSampleComponent); fix.detectChanges(); @@ -300,7 +301,8 @@ describe('igxCombo', () => { expect(dropdown.focusedItem).toBeFalsy(); expect(dropdown.verticalScrollContainer).toBeDefined(); const mockClick = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']); - const virtualMock = spyOn(dropdown, 'navigateVirtualItem').and.callThrough(); + const virtualMockUP = spyOn(dropdown, 'navigateUp').and.callThrough(); + const virtualMockDOWN = spyOn(dropdown, 'navigateDown').and.callThrough(); // expect(mockFn).toThrow(); expect(dropdown.focusedItem).toEqual(null); expect(combo.collapsed).toBeTruthy(); @@ -321,7 +323,7 @@ describe('igxCombo', () => { dropdown.navigateItem(-1); await wait(30); fix.detectChanges(); - expect(virtualMock).toHaveBeenCalledTimes(1); + expect(virtualMockDOWN).toHaveBeenCalledTimes(0); lastItem.clicked(mockClick); await wait(30); fix.detectChanges(); @@ -329,7 +331,7 @@ describe('igxCombo', () => { dropdown.navigateItem(-1, Navigate.Down); await wait(30); fix.detectChanges(); - expect(virtualMock).toHaveBeenCalledTimes(2); + expect(virtualMockDOWN).toHaveBeenCalledTimes(1); combo.searchValue = 'New'; await wait(30); lastItem.clicked(mockClick); @@ -339,14 +341,14 @@ describe('igxCombo', () => { expect(combo.customValueFlag && combo.searchValue !== '').toBeTruthy(); dropdown.navigateItem(-1, Navigate.Down); await wait(30); - expect(virtualMock).toHaveBeenCalledTimes(2); + expect(virtualMockDOWN).toHaveBeenCalledTimes(2); lastItem.value = dropdown.verticalScrollContainer.igxForOf[dropdown.verticalScrollContainer.igxForOf.length - 1]; lastItem.clicked(mockClick); await wait(30); fix.detectChanges(); expect(dropdown.focusedItem).toEqual(lastItem); dropdown.navigateItem(-1, Navigate.Down); - expect(virtualMock).toHaveBeenCalledTimes(2); + expect(virtualMockDOWN).toHaveBeenCalledTimes(3); // TEST move from first item dropdown.verticalScrollContainer.scrollTo(0); @@ -362,12 +364,13 @@ describe('igxCombo', () => { dropdown.navigateItem(-1); await wait(30); fix.detectChanges(); - expect(virtualMock).toHaveBeenCalledTimes(3); + expect(virtualMockDOWN).toHaveBeenCalledTimes(3); spyOn(dropdown, 'onBlur').and.callThrough(); dropdown.navigateItem(-1, Navigate.Up); await wait(30); fix.detectChanges(); - expect(virtualMock).toHaveBeenCalledTimes(4); + expect(virtualMockUP).toHaveBeenCalledTimes(1); + expect(virtualMockDOWN).toHaveBeenCalledTimes(3); })); it('Should call toggle properly', fakeAsync(() => { const fixture = TestBed.createComponent(IgxComboSampleComponent); @@ -435,14 +438,18 @@ describe('igxCombo', () => { combo.toggle(); tick(); fix.detectChanges(); - const virtualSpy = spyOn(dropdown, 'navigateVirtualItem'); + const virtualSpyUP = spyOn(dropdown, 'navigateUp'); + const virtualSpyDOWN = spyOn(dropdown, 'navigateDown'); spyOn(IgxComboDropDownComponent.prototype, 'navigateItem').and.callThrough(); dropdown.navigateItem(0); fix.detectChanges(); expect(IgxComboDropDownComponent.prototype.navigateItem).toHaveBeenCalledTimes(1); - dropdown.navigateItem(-1); + dropdown.navigateItem(-1, Navigate.Up); expect(IgxComboDropDownComponent.prototype.navigateItem).toHaveBeenCalledTimes(2); - expect(virtualSpy).toHaveBeenCalled(); + dropdown.navigateItem(-1, Navigate.Down); + expect(IgxComboDropDownComponent.prototype.navigateItem).toHaveBeenCalledTimes(3); + expect(virtualSpyDOWN).toHaveBeenCalled(); + expect(virtualSpyUP).toHaveBeenCalled(); })); it('Should handle handleKeyDown calls', () => { const fix = TestBed.createComponent(IgxComboSampleComponent); @@ -1781,6 +1788,7 @@ describe('igxCombo', () => { fixture.detectChanges(); expect(selectedItem.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy(); })); + it('Should render focused items properly', fakeAsync(() => { const fixture = TestBed.createComponent(IgxComboTestComponent); fixture.detectChanges(); @@ -1804,6 +1812,7 @@ describe('igxCombo', () => { expect(focusedItem_2.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy(); expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeFalsy(); })); + it('Should render properly focused items when grouped', fakeAsync(() => { const fixture = TestBed.createComponent(IgxComboSampleComponent); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index e483519a8f4..1041c68a093 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -374,14 +374,14 @@ export class IgxDropDownBase implements OnInit, IToggleView { /** * @hidden */ - public get focusedItem() { + public get focusedItem(): IgxDropDownItemBase { return this._focusedItem; } /** * @hidden */ - public set focusedItem(item) { + public set focusedItem(item: IgxDropDownItemBase) { this._focusedItem = item; } @@ -492,10 +492,7 @@ export class IgxDropDownBase implements OnInit, IToggleView { this.scrollContainer.scrollTop = (itemPosition); } - /** - * @hidden - */ - public scrollToHiddenItem(newItem: IgxDropDownItemBase) { + protected scrollToHiddenItem(newItem: IgxDropDownItemBase) { const elementRect = newItem.element.nativeElement.getBoundingClientRect(); const parentRect = this.scrollContainer.getBoundingClientRect(); if (parentRect.top > elementRect.top) { diff --git a/src/app/combo/combo.sample.css b/src/app/combo/combo.sample.css index 64030f9ad31..a03634ef44c 100644 --- a/src/app/combo/combo.sample.css +++ b/src/app/combo/combo.sample.css @@ -106,3 +106,7 @@ .input-container + .input-container { margin-left: 24px; } + +.sample-content { + margin-top: -88px; +} \ No newline at end of file From e7eb58fe5d48fbaf06c46d241b48ea2ccfbf2f21 Mon Sep 17 00:00:00 2001 From: gedinakova Date: Wed, 14 Nov 2018 20:08:41 +0200 Subject: [PATCH 27/77] feat(Exporters): #2982 Implemented TreeGrid export. --- .../src/lib/data-operations/data-util.ts | 8 ++- .../services/csv/char-separated-value-data.ts | 4 +- .../excel/excel-exporter-grid.spec.ts | 12 +++++ .../src/lib/services/excel/excel-exporter.ts | 2 +- .../src/lib/services/excel/excel-files.ts | 35 +++++++++--- .../src/lib/services/excel/excel-strings.ts | 21 ++++++-- .../services/excel/test-data.service.spec.ts | 31 +++++++++++ .../src/lib/services/excel/worksheet-data.ts | 8 +-- .../exporter-common/base-export-service.ts | 53 +++++++++++++++---- .../tree-grid-flat-data.sample.html | 2 + .../tree-grid-flat-data.sample.ts | 15 +++++- src/app/tree-grid/tree-grid.sample.html | 2 + src/app/tree-grid/tree-grid.sample.ts | 14 ++++- 13 files changed, 181 insertions(+), 26 deletions(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.ts index 58a2616dc0f..2a7fa6df3de 100644 --- a/projects/igniteui-angular/src/lib/data-operations/data-util.ts +++ b/projects/igniteui-angular/src/lib/data-operations/data-util.ts @@ -9,6 +9,7 @@ import { IGroupingState } from './groupby-state.interface'; import { Transaction, TransactionType, HierarchicalTransaction, IgxHierarchicalTransactionService, HierarchicalState } from '../services'; import { mergeObjects, cloneValue } from '../core/utils'; import { ITreeGridRecord } from '../grids/tree-grid/tree-grid.interfaces'; +import { TreeGridFilteringStrategy } from '../grids/tree-grid/tree-grid.filtering.pipe'; /** * @hidden @@ -51,7 +52,6 @@ export class DataUtil { public static hierarchicalSort(hierarchicalData: ITreeGridRecord[], state: ISortingState, parent: ITreeGridRecord): ITreeGridRecord[] { state.strategy = new TreeGridSortingStrategy(); let res: ITreeGridRecord[] = []; - hierarchicalData.forEach((hr: ITreeGridRecord) => { const rec: ITreeGridRecord = DataUtil.cloneTreeGridRecord(hr); rec.parent = parent; @@ -175,6 +175,12 @@ export class DataUtil { } return state.strategy.filter(data, state.expressionsTree); } + + public static hierarchicalFilter(data: ITreeGridRecord[], state: IFilteringState): ITreeGridRecord[] { + DataUtil.mergeDefaultProperties(state, { strategy: new TreeGridFilteringStrategy() }); + return state.strategy.filter(data, state.expressionsTree); + } + public static process(data: T[], state: IDataState): T[] { if (!state) { return data; diff --git a/projects/igniteui-angular/src/lib/services/csv/char-separated-value-data.ts b/projects/igniteui-angular/src/lib/services/csv/char-separated-value-data.ts index 9a35f2135e1..7ae886e3f66 100644 --- a/projects/igniteui-angular/src/lib/services/csv/char-separated-value-data.ts +++ b/projects/igniteui-angular/src/lib/services/csv/char-separated-value-data.ts @@ -12,7 +12,7 @@ export class CharSeparatedValueData { private _delimiterLength = 1; private _isSpecialData = false; - constructor(private _data: any[], valueDelimiter: string) { + constructor(private _data: any[], valueDelimiter: string, private _isTreeGridData = false) { this.setDelimiter(valueDelimiter); } @@ -21,6 +21,8 @@ export class CharSeparatedValueData { return ''; } + this._data = this._data.map((item) => item.rowData); + const keys = ExportUtilities.getKeysFromData(this._data); if (keys.length === 0) { diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts index 912943a8c6e..2ac2a8e47a2 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts @@ -435,6 +435,18 @@ describe('Excel Exporter', () => { await exportAndVerify(treeGrid, options, actualData.treeGridDataFilteredSorted); }); + + it('should export tree grid with only first level expanded.', async () => { + treeGrid.expansionDepth = 1; + fix.detectChanges(); + await exportAndVerify(treeGrid, options, actualData.treeGridDataExpDepth(1)); + }); + + it('should export tree grid with collapsed first level.', async () => { + treeGrid.collapseAll(); + fix.detectChanges(); + await exportAndVerify(treeGrid, options, actualData.treeGridDataExpDepth(0)); + }); }); function getExportedData(grid, exportOptions: IgxExcelExporterOptions) { diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts index 34edffca7d4..b963347131b 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts @@ -75,7 +75,7 @@ export class IgxExcelExporterService extends IgxBaseExporter { } protected exportDataImplementation(data: any[], options: IgxExcelExporterOptions): void { - const worksheetData = new WorksheetData(data, options, this._indexOfLastPinnedColumn, this._sort); + const worksheetData = new WorksheetData(data, options, this._indexOfLastPinnedColumn, this._sort, this._isTreeGrid); this._xlsx = new JSZip(); const rootFolder = ExcelElementsFactory.getExcelFolder(ExcelFolderTypes.RootExcelFolder); diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-files.ts b/projects/igniteui-angular/src/lib/services/excel/excel-files.ts index ce8dfc24d1e..69cd57ba924 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-files.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-files.ts @@ -3,7 +3,6 @@ import { ExcelStrings } from './excel-strings'; import { WorksheetData } from './worksheet-data'; import * as JSZip from 'jszip/dist/jszip'; -import { ExportUtilities } from '../exporter-common/export-utilities'; /** * @hidden @@ -63,6 +62,7 @@ export class WorksheetFile implements IExcelFile { let dimension: string; const dictionary = worksheetData.dataDictionary; let freezePane = ''; + let maxOutlineLevel = 0; if (worksheetData.isEmpty) { sheetData.push(''); @@ -81,7 +81,15 @@ export class WorksheetFile implements IExcelFile { sheetData.push(''); for (let i = 1; i < worksheetData.rowCount; i++) { - sheetData.push(``); + const rowData = worksheetData.data[i - 1].originalRowData; + + const sCollapsed = (!rowData.expanded) ? '' : (rowData.expanded === true) ? '' : ` collapsed="1"`; + const sHidden = (rowData.parent && this.hasCollapsedParent(rowData)) ? ` hidden="1"` : ''; + const rowOutlineLevel = rowData.level ? rowData.level : 0; + const sOutlineLevel = rowOutlineLevel > 0 ? ` outlineLevel="${rowOutlineLevel}"` : ''; + maxOutlineLevel = maxOutlineLevel < rowOutlineLevel ? rowOutlineLevel : maxOutlineLevel; + + sheetData.push(``); for (let j = 0; j < worksheetData.columnCount; j++) { const cellData = WorksheetFile.getCellData(worksheetData, i, j); @@ -93,6 +101,7 @@ export class WorksheetFile implements IExcelFile { dimension = 'A1:' + ExcelStrings.getExcelColumn(worksheetData.columnCount - 1) + worksheetData.rowCount; cols.push(''); + for (let i = 0; i < worksheetData.columnCount; i++) { const width = dictionary.columnWidths[i]; // Use the width provided in the options if it exists @@ -102,6 +111,7 @@ export class WorksheetFile implements IExcelFile { cols.push(``); } + cols.push(''); if (worksheetData.indexOfLastPinnedColumn !== -1 && @@ -113,18 +123,31 @@ export class WorksheetFile implements IExcelFile { } } const hasTable = !worksheetData.isEmpty && worksheetData.options.exportAsTable; - folder.file('sheet1.xml', ExcelStrings.getSheetXML(dimension, freezePane, cols.join(''), sheetData.join(''), hasTable)); + + folder.file('sheet1.xml', + ExcelStrings.getSheetXML(dimension, freezePane, cols.join(''), sheetData.join(''), hasTable, + worksheetData.isTreeGridData, maxOutlineLevel)); } + private hasCollapsedParent(rowData) { + let result = !rowData.parent.expanded; + while (rowData.parent) { + result = result || !rowData.parent.expanded; + rowData = rowData.parent; + } + + return result; + } /* tslint:disable member-ordering */ private static getCellData(worksheetData: WorksheetData, row: number, column: number): string { const dictionary = worksheetData.dataDictionary; const columnName = ExcelStrings.getExcelColumn(column) + (row + 1); const columnHeader = worksheetData.keys[column]; - const cellValue = worksheetData.isSpecialData ? - worksheetData.data[row - 1] : - worksheetData.data[row - 1][columnHeader]; + const rowData = worksheetData.data[row - 1].rowData; + const actualData = rowData.data ? rowData.data : rowData; + + const cellValue = worksheetData.isSpecialData ? actualData : actualData[columnHeader]; if (cellValue === undefined || cellValue === null) { return ``; diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-strings.ts b/projects/igniteui-angular/src/lib/services/excel/excel-strings.ts index aecbca48a2c..b19c957351e 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-strings.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-strings.ts @@ -13,7 +13,7 @@ export class ExcelStrings { } public static getCore(): string { - return ExcelStrings.XML_STRING + 'Dimitar Davidkov2015-06-05T18:17:20Z2015-06-05T18:17:26Z'; + return ExcelStrings.XML_STRING + '2015-06-05T18:17:20Z2015-06-05T18:17:26Z'; } public static getTheme(): string { @@ -46,9 +46,24 @@ export class ExcelStrings { return retVal; } - public static getSheetXML(dimension: string, freezePane: string, cols: string, sheetData: string, hasTable: boolean): string { + public static getSheetXML(dimension: string, freezePane: string, cols: string, sheetData: string, hasTable: boolean, hasGroupedRows = false, outlineLevel = 0): string { const tableParts = hasTable ? '' : ''; - return ExcelStrings.XML_STRING + '' + freezePane + '' + cols + sheetData + '' + tableParts + ''; + const sheetOutlineProp = hasGroupedRows ? '' : ''; + const sOutlineLevel = outlineLevel > 0 ? `outlineLevelRow="${outlineLevel}"` : ''; + // return ExcelStrings.XML_STRING + + // '' + freezePane + '' + cols + sheetData + '' + tableParts + ''; + + return `${ExcelStrings.XML_STRING} + +${sheetOutlineProp} + +${freezePane} + +${cols} +${sheetData} + +${tableParts}`; + } public static getSharedStringXML(count: number, uniqueCount: number, table: string): string { diff --git a/projects/igniteui-angular/src/lib/services/excel/test-data.service.spec.ts b/projects/igniteui-angular/src/lib/services/excel/test-data.service.spec.ts index 8acb96cbe25..b41905b5c0b 100644 --- a/projects/igniteui-angular/src/lib/services/excel/test-data.service.spec.ts +++ b/projects/igniteui-angular/src/lib/services/excel/test-data.service.spec.ts @@ -754,5 +754,36 @@ export class FileContentData { return this.createData(); } + + public treeGridDataExpDepth(depth: number) { + this._sharedStringsData = + `count="21" uniqueCount="19">IDParentIDNameJobTitleAgeCasey HoustonVice PresidentGilberto ToddDirectorTanya BennettDebra MortonAssociate Software DeveloperJack SimonSoftware DeveloperErma WalshCEOEduardo RamirezManagerLeslie Hansen`; + + this._tableData = `ref="A1:E9" totalsRowShown="0"> + `; + + switch (depth) { + case 0: + this._worksheetData = ` + + + + + +012341-156326-114155210-1161753`; + break; + case 1: + this._worksheetData = ` + + + + + +012341-15632217841411213336-114155210-1161753910181144`; + break; + } + + return this.createData(); + } /* tslint:enable max-line-length */ } diff --git a/projects/igniteui-angular/src/lib/services/excel/worksheet-data.ts b/projects/igniteui-angular/src/lib/services/excel/worksheet-data.ts index 1e6ef6dae86..4496edf0012 100644 --- a/projects/igniteui-angular/src/lib/services/excel/worksheet-data.ts +++ b/projects/igniteui-angular/src/lib/services/excel/worksheet-data.ts @@ -10,7 +10,8 @@ export class WorksheetData { private _keys: string[]; private _isSpecialData: boolean; - constructor(private _data: any[], public options: IgxExcelExporterOptions, public indexOfLastPinnedColumn, public sort: any) { + constructor(private _data: any[], public options: IgxExcelExporterOptions, public indexOfLastPinnedColumn, + public sort: any, public isTreeGridData = false) { this.initializeData(); } @@ -47,13 +48,14 @@ export class WorksheetData { return; } - this._keys = ExportUtilities.getKeysFromData(this._data); + const actualData = this._data.map((item) => item.rowData); + this._keys = ExportUtilities.getKeysFromData(actualData); if (this._keys.length === 0) { return; } - this._isSpecialData = ExportUtilities.isSpecialData(this._data); + this._isSpecialData = ExportUtilities.isSpecialData(actualData); this._columnCount = this._keys.length; this._rowCount = this._data.length + 1; diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts index b406a84055c..b0f26e52731 100644 --- a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts +++ b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts @@ -8,6 +8,7 @@ import { DataUtil } from '../../data-operations/data-util'; import { ExportUtilities } from './export-utilities'; import { IgxExporterOptionsBase } from './exporter-options-base'; +import { ITreeGridRecord } from '../../grids/tree-grid/tree-grid.interfaces'; export interface IRowExportingEventArgs { rowData: any; @@ -23,8 +24,10 @@ export interface IColumnExportingEventArgs { export abstract class IgxBaseExporter { private _columnList: any[]; - protected _indexOfLastPinnedColumn = -1; + private flatRecords = []; + protected _isTreeGrid = false; + protected _indexOfLastPinnedColumn = -1; protected _sort = null; /** @@ -167,13 +170,13 @@ export abstract class IgxBaseExporter { if (!isSpecialData) { row = this._columnList.reduce((a, e) => { if (!e.skip) { - const rawValue = rowData[e.field]; + const rawValue = this._isTreeGrid ? rowData.data[e.field] : rowData[e.field]; a[e.header] = e.formatter ? e.formatter(rawValue) : rawValue; } return a; }, {}); } else { - row = rowData; + row = this._isTreeGrid ? rowData.data : rowData; } const rowArgs = { @@ -184,44 +187,76 @@ export abstract class IgxBaseExporter { this.onRowExport.emit(rowArgs); if (!rowArgs.cancel) { - data.push(rowArgs.rowData); + data.push({ rowData: rowArgs.rowData, originalRowData: rowData }); } } private prepareData(grid: any, options: IgxExporterOptionsBase): any[] { - let data = grid.data; + let _rootRecords = grid.rootRecords; + this._isTreeGrid = _rootRecords !== undefined; + + if (this._isTreeGrid) { + this.prepareHierarchicalData(_rootRecords); + } + + let data = this._isTreeGrid ? this.flatRecords : grid.data; if (grid.filteringExpressionsTree && grid.filteringExpressionsTree.filteringOperands.length > 0 && !options.ignoreFiltering) { - const filteringState = { expressionsTree: grid.filteringExpressionsTree, logic: grid.filteringLogic }; - data = DataUtil.filter(data, filteringState); + if (this._isTreeGrid) { + this.flatRecords = []; + _rootRecords = DataUtil.hierarchicalFilter(_rootRecords, filteringState); + this.prepareHierarchicalData(_rootRecords); + data = this.flatRecords; + } else { + data = DataUtil.filter(data, filteringState); + } } if (grid.sortingExpressions && grid.sortingExpressions.length > 0 && !options.ignoreSorting) { - const sortingState = { expressions: grid.sortingExpressions }; this._sort = cloneValue(grid.sortingExpressions[0]); - data = DataUtil.sort(data, sortingState); + if (this._isTreeGrid) { + this.flatRecords = []; + _rootRecords = DataUtil.hierarchicalSort(_rootRecords, sortingState, undefined); + this.prepareHierarchicalData(_rootRecords); + data = this.flatRecords; + } else { + data = DataUtil.sort(data, sortingState); + } } return data; } + private prepareHierarchicalData(records: ITreeGridRecord[]) { + if (!records) { + return; + } + for (let i = 0; i < records.length; i++) { + const hierarchicalRecord = records[i]; + + this.flatRecords.push(hierarchicalRecord); + this.prepareHierarchicalData(hierarchicalRecord.children); + } + } + private resetDefaults() { this._columnList = []; this._indexOfLastPinnedColumn = -1; this._sort = null; + this.flatRecords = []; } } diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html index b46a51a9196..f05d0896430 100644 --- a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html +++ b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html @@ -36,6 +36,8 @@ + +
diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts index ac00af58e41..5422f863c60 100644 --- a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts +++ b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts @@ -1,6 +1,7 @@ import { Component, Injectable, ViewChild, OnInit } from '@angular/core'; import { Http } from '@angular/http'; -import { IgxTreeGridComponent } from 'igniteui-angular'; +import { IgxTreeGridComponent, IgxExcelExporterService, IgxCsvExporterService, + IgxExcelExporterOptions, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular'; @Component({ providers: [], @@ -19,6 +20,10 @@ export class TreeGridFlatDataSampleComponent implements OnInit { public density = ''; public displayDensities; + constructor(private excelExporterService: IgxExcelExporterService, + private csvExporterService: IgxCsvExporterService) { + } + public ngOnInit(): void { this.displayDensities = [ { label: 'compact', selected: this.density === 'compact', togglable: true }, @@ -90,4 +95,12 @@ export class TreeGridFlatDataSampleComponent implements OnInit { public selectDensity(event) { this.density = this.displayDensities[event.index].label; } + + public exportToExcel() { + this.excelExporterService.export(this.grid1, new IgxExcelExporterOptions('TreeGrid')); + } + + public exportToCSV() { + this.csvExporterService.export(this.grid1, new IgxCsvExporterOptions('TreeGrid', CsvFileTypes.CSV)); + } } diff --git a/src/app/tree-grid/tree-grid.sample.html b/src/app/tree-grid/tree-grid.sample.html index edd5d50e4a4..369c9418764 100644 --- a/src/app/tree-grid/tree-grid.sample.html +++ b/src/app/tree-grid/tree-grid.sample.html @@ -28,6 +28,8 @@ + + diff --git a/src/app/tree-grid/tree-grid.sample.ts b/src/app/tree-grid/tree-grid.sample.ts index 487aab838f5..e8654e4e6b0 100644 --- a/src/app/tree-grid/tree-grid.sample.ts +++ b/src/app/tree-grid/tree-grid.sample.ts @@ -1,6 +1,7 @@ import { Component, Injectable, ViewChild, OnInit } from '@angular/core'; import { Http } from '@angular/http'; -import { IgxTreeGridComponent } from 'igniteui-angular'; +import { IgxTreeGridComponent, IgxExcelExporterService, IgxCsvExporterService, + IgxCsvExporterOptions, IgxExcelExporterOptions, CsvFileTypes } from 'igniteui-angular'; @Component({ providers: [], @@ -20,6 +21,9 @@ export class TreeGridSampleComponent implements OnInit { public density = ''; public displayDensities; + constructor(private excelExporterService: IgxExcelExporterService, + private csvExporterService: IgxCsvExporterService) { +} public ngOnInit(): void { this.displayDensities = [ { label: 'compact', selected: this.density === 'compact', togglable: true }, @@ -449,4 +453,12 @@ export class TreeGridSampleComponent implements OnInit { public deleteRow() { this.grid1.deleteRowById(this.grid1.selectedRows()[0]); } + + public exportToExcel() { + this.excelExporterService.export(this.grid1, new IgxExcelExporterOptions('TreeGrid')); + } + + public exportToCSV() { + this.csvExporterService.export(this.grid1, new IgxCsvExporterOptions('TreeGrid', CsvFileTypes.CSV)); + } } From ffd1e3c23606d44e09e34ae44a107426f0ea8061 Mon Sep 17 00:00:00 2001 From: Vasil Pavlov Date: Thu, 15 Nov 2018 12:45:44 +0200 Subject: [PATCH 28/77] The grid should update groupsRecords before raising the onGroupingDone event - 6.2.x, #2967 (#3009) * fix(groupBy): update the state before raising onGroupingDone event #2967 * fix(groupBy): calling detectChanges instead of ngDoCheck #2967 --- projects/igniteui-angular/src/lib/grids/grid/grid.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index e17eea22039..20482d444c0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -189,6 +189,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do ungroupedColsArr.forEach((elem) => { ungroupedCols.push(this.getColumnByName(elem.fieldName)); }, this); + this.cdr.detectChanges(); const groupingDoneArgs: IGroupingDoneEventArgs = { expressions: newExpressions, groupedColumns: groupedCols, From 8b263085bafd696929f619d1aa16a1182972ce57 Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Mon, 19 Nov 2018 10:21:08 +0200 Subject: [PATCH 29/77] feat(Exporters): fixing some build errors #2982 --- .../src/lib/data-operations/data-util.ts | 22 ++++--------------- .../grids/tree-grid/tree-grid.component.ts | 14 ------------ .../exporter-common/base-export-service.ts | 6 ++--- 3 files changed, 7 insertions(+), 35 deletions(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.ts index 2390ec9382b..d8d543cdda9 100644 --- a/projects/igniteui-angular/src/lib/data-operations/data-util.ts +++ b/projects/igniteui-angular/src/lib/data-operations/data-util.ts @@ -156,25 +156,11 @@ export class DataUtil { return state.strategy.filter(data, state.expressionsTree); } - public static hierarchicalFilter(data: ITreeGridRecord[], state: IFilteringState): ITreeGridRecord[] { - DataUtil.mergeDefaultProperties(state, { strategy: new TreeGridFilteringStrategy() }); - return state.strategy.filter(data, state.expressionsTree); - } - - public static process(data: T[], state: IDataState): T[] { - if (!state) { - return data; - } - if (state.filtering) { - data = DataUtil.filter(data, state.filtering); - } - if (state.sorting) { - data = DataUtil.sort(data, state.sorting); - } - if (state.paging) { - data = DataUtil.page(data, state.paging); + public static treeGridFilter(data: ITreeGridRecord[], state: IFilteringState): ITreeGridRecord[] { + if (!state.strategy) { + state.strategy = new TreeGridFilteringStrategy(); } - return data; + return state.strategy.filter(data, state.expressionsTree); } public static getHierarchy(gRow: IGroupByRecord): Array { 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 index f770e5c43ae..4ce90347c9d 100644 --- 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 @@ -450,20 +450,6 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent { return 0; } - /** - * @hidden - */ - protected getExportExcel(): boolean { - return false; - } - - /** - * @hidden - */ - protected getExportCsv(): boolean { - return false; - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts index b0f26e52731..fbfa1d02c7e 100644 --- a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts +++ b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts @@ -211,7 +211,7 @@ export abstract class IgxBaseExporter { if (this._isTreeGrid) { this.flatRecords = []; - _rootRecords = DataUtil.hierarchicalFilter(_rootRecords, filteringState); + _rootRecords = DataUtil.treeGridFilter(_rootRecords, filteringState); this.prepareHierarchicalData(_rootRecords); data = this.flatRecords; } else { @@ -230,11 +230,11 @@ export abstract class IgxBaseExporter { if (this._isTreeGrid) { this.flatRecords = []; - _rootRecords = DataUtil.hierarchicalSort(_rootRecords, sortingState, undefined); + _rootRecords = DataUtil.treeGridSort(_rootRecords, grid.sortingExpressions); this.prepareHierarchicalData(_rootRecords); data = this.flatRecords; } else { - data = DataUtil.sort(data, sortingState); + data = DataUtil.sort(data, grid.sortingExpressions); } } From 6c2aee1aada8b369a93a64f448320fb86670571b Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Mon, 19 Nov 2018 11:41:54 +0200 Subject: [PATCH 30/77] test(Exporters): fixing build errors #2982 --- .../src/lib/services/csv/csv-exporter-grid.spec.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts index 5c5d6dbd167..0018dd06655 100644 --- a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts @@ -15,7 +15,6 @@ import { IgxTreeGridModule } from '../../grids/tree-grid'; import { ReorderedColumnsComponent, GridIDNameJobTitleComponent } from '../../test-utils/grid-samples.spec'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { first } from 'rxjs/operators'; -import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { configureTestSuite } from '../../test-utils/configure-suite'; @@ -322,7 +321,7 @@ describe('CSV Grid Exporter', () => { }); it('should export sorted tree grid properly.', async () => { - treeGrid.sort({fieldName: 'ID', dir: SortingDirection.Desc}); + treeGrid.sort({fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); options.ignoreSorting = true; fix.detectChanges(); @@ -364,7 +363,7 @@ describe('CSV Grid Exporter', () => { it('should export filtered and sorted tree grid properly.', async () => { treeGrid.filter('ID', 3, IgxNumberFilteringOperand.instance().condition('greaterThan')); fix.detectChanges(); - treeGrid.sort({fieldName: 'Name', dir: SortingDirection.Desc}); + treeGrid.sort({fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); fix.detectChanges(); const wrapper = await getExportedData(treeGrid, options); From 3fc0609186839cfe5864d538fa37df767d78d847 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 19 Nov 2018 11:45:23 +0200 Subject: [PATCH 31/77] chore(*): The sort definition wasn't merged properly in the base grid --- .../src/lib/grids/grid-base.component.ts | 23 ++++--------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 3d3c98d7e56..8f863f00972 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -2909,13 +2909,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * ``` * @memberof IgxGridBaseComponent */ - public sort(expression: ISortingExpression | Array): void; - public sort(...rest): void { + public sort(expression: ISortingExpression | Array): void { this.endEdit(false); - if (rest.length === 1 && rest[0] instanceof Array) { - this._sortMultiple(rest[0]); + if (expression instanceof Array) { + this.gridAPI.sort_multiple(this.id, expression); } else { - this._sort(rest[0]); + this.gridAPI.sort(this.id, expression); } } @@ -3533,20 +3532,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements return width - this.getPinnedWidth(takeHidden); } - /** - * @hidden - */ - protected _sort(expression: ISortingExpression) { - this.gridAPI.sort(this.id, expression); - } - - /** - * @hidden - */ - protected _sortMultiple(expressions: ISortingExpression[]) { - this.gridAPI.sort_multiple(this.id, expressions); - } - /** * @hidden */ From bafcd707ace398c59fcceec73e749f3ab129b8c2 Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Wed, 28 Nov 2018 15:01:04 +0200 Subject: [PATCH 32/77] fix(igxCombo): fix combo and drop down navigation with TAB key, #3200 --- .../igniteui-angular/src/lib/drop-down/drop-down.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 50e6332a26c..150c0c98fab 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -65,10 +65,10 @@ export class IgxDropDownItemNavigationDirective { switch (key) { case 'esc': case 'escape': + case 'tab': this.onEscapeKeyDown(event); break; case 'enter': - case 'tab': this.onEnterKeyDown(event); break; case 'space': From e244e764d9819fff2ed8e7b0e0ea85ccd07c79a1 Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Thu, 29 Nov 2018 13:20:50 +0200 Subject: [PATCH 33/77] fix(combo): focusing combo input highlights the first nav item in DD, #3200 --- .../src/lib/combo/combo.component.spec.ts | 16 ++++++++++++++++ .../src/lib/drop-down/drop-down.base.ts | 6 ++++++ .../src/lib/drop-down/drop-down.component.ts | 11 +++++++++-- 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 08e875a0206..e40eece4108 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -882,6 +882,22 @@ describe('igxCombo', () => { }); }); }); + + it('Should properly get the first focusable item when focusing the component list', fakeAsync(() => { + const fixture = TestBed.createComponent(IgxComboInputTestComponent); + fixture.detectChanges(); + const combo = fixture.componentInstance.combo; + spyOn(combo.dropdown, 'getFirstSelectableItem').and.callThrough(); + combo.toggle(); + tick(); + fixture.detectChanges(); + combo.searchInput.nativeElement.dispatchEvent(new KeyboardEvent('keypress', { key: 'Tab'})); + (document.getElementsByClassName('igx-combo__content')[0]).dispatchEvent(new Event('focus')); + tick(); + fixture.detectChanges(); + expect(combo.dropdown.getFirstSelectableItem).toHaveBeenCalledTimes(1); + expect((combo.dropdown.focusedItem.element.nativeElement).textContent.trim()).toEqual('Michigan'); + })); }); diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index 1f61391c386..cefdd64da0a 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -552,6 +552,12 @@ export abstract class IgxDropDownBase implements OnInit, IToggleView { this._focusedItem.isFocused = true; } } + /** + * @hidden + */ + public getFirstSelectableItem() { + return this.children.find(child => !child.isHeader && !child.disabled); + } } /** diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 150c0c98fab..92afaff2b4c 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -43,6 +43,13 @@ export class IgxDropDownItemNavigationDirective { set target(target: IgxDropDownBase) { this._target = target ? target : this.dropdown; } + @HostListener('focus') + handleFocus() { + if ((this.target).combo) { + this.target.focusedItem = this.target.getFirstSelectableItem(); + this.target.focusedItem.isFocused = true; + } + } /** * @hidden @@ -52,7 +59,7 @@ export class IgxDropDownItemNavigationDirective { if (event) { const key = event.key.toLowerCase(); if (!this.target.collapsed) { // If dropdown is opened - const navKeys = ['esc', 'escape', 'enter', 'tab', 'space', 'spacebar', ' ', + const navKeys = ['esc', 'escape', 'enter', 'space', 'spacebar', ' ', 'arrowup', 'up', 'arrowdown', 'down', 'home', 'end']; if (navKeys.indexOf(key) === -1) { // If key has appropriate function in DD return; @@ -65,7 +72,7 @@ export class IgxDropDownItemNavigationDirective { switch (key) { case 'esc': case 'escape': - case 'tab': + // case 'tab': this.onEscapeKeyDown(event); break; case 'enter': From e99444eacabcd805acceefb0e34829e07fa4abf8 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Fri, 30 Nov 2018 10:23:08 +0200 Subject: [PATCH 34/77] chore(shell-strings): add some shell strings which should be localized Closes #3237 --- extras/template/strings/shell-strings.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/extras/template/strings/shell-strings.json b/extras/template/strings/shell-strings.json index 25ba09c2f4e..5b34d1467f1 100644 --- a/extras/template/strings/shell-strings.json +++ b/extras/template/strings/shell-strings.json @@ -32,6 +32,9 @@ "Example": "例", "Used by": "次で使用", "See": "次を参照してください:", - "Requires": "必須" + "Requires": "必須", + "Default value": "Default value", + "Optional": "Optional", + "Rest": "Rest" } } From ab6c01d48842971e65f1112f51315bcbba63527f Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Fri, 30 Nov 2018 17:06:08 +0200 Subject: [PATCH 35/77] docs(expansion-panel): add comments to public props/methods, add README, #3217 --- .../src/lib/expansion-panel/README.md | 101 +++++++++++++++ .../expansion-panel-body.component.ts | 53 +++++++- .../expansion-panel-header.component.ts | 101 ++++++++++++++- .../expansion-panel.component.ts | 120 +++++++++++++++++- 4 files changed, 369 insertions(+), 6 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/README.md diff --git a/projects/igniteui-angular/src/lib/expansion-panel/README.md b/projects/igniteui-angular/src/lib/expansion-panel/README.md new file mode 100644 index 00000000000..706e9b92490 --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/README.md @@ -0,0 +1,101 @@ +# IgxExpansionPanel + + +**IgxExpansionPanel** is a light and highly templateable component that allows you to dynamically display content. + +A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/expansion_panel.html) + +# Usage + +```html + + + + Title + + + Description + + + +

Lengthier and more detailed description. Only visible when the panel is expanded

+ + +``` + +## igx-expansion-panel-header +The header of the `igx-expansion-panel` is **always** visible - this is the part of the component which handles user interaction. + +### igx-expansion-panel-title +The `title` part of the header is **always** visible and will always be placed in the beginning of the header (after the icon, depending on settings) +The title should be used to describe the content of the panel's body. + +### igx-expansion-panel-description +The `description` part of the header is **always** visible and will always be placed in the middle of the header (after the title). +The description can be used to provide a very short and concise explanation, further expanding upon the title, on the content of the panel's body. + +## igx-panel-body +The `igx-expansion-panel-body` contains all of the content in the `igx-expansion-panel` which should not be initially visible. The `body` is **sometimes** visible - only when the expansion panel is **not** `collapsed` + +# API Summary +The following tables summarize the **igx-expansion-panel**, **igx-expansion-panel-header** and **igx-expansion-panel-body** inputs, outputs and methods. + +## IgxExpansionPanelComponent + +### Inputs +The following inputs are available in the **igx-expansion-panel** component: + +| Name | Type | Description | +| :--- | :--- | :--- | +| `animationSettings` | `AnimationSettings` | Specifies the settings for the open and close animations of the panel | +| `id` | `string` | The id of the panel's host component | +| `collapsed` | `boolean` | Whether the component is collapsed (body is hidden) or not | + +### Outputs +The following outputs are available in the **igx-expansion-panel** component: + +| Name | Cancelable | Description | Parameters +| :--- | :--- | :--- | :--- | +| `onCollapsed` | `false` | Emitted when the panel is collapsed | `{ event: Event, panel: IgxExpansionPanelComponent }` | +| `onExpanded` | `false` | Emitted when the panel is expanded | `{ event: Event, panel: IgxExpansionPanelComponent }` | + + +### Methods +The following methods are available in the **igx-expansion-panel** component: + +| Name | Signature | Description | +| :--- | :--- | :--- | +| `collapse` | `(event?: Event ): void` | Collapses the panel | +| `expand` | `(event?: Event ): void` | Expands the panel | +| `toggle` | `(event?: Event ): void` | Toggles the panel (calls `collapse(event)` or `expand(event)` depending on `collapsed`) | + + +## IgxExpansionPanelHeaderComponent +### Inputs +The following inputs are available in the **igx-expansion-panel-header** component: + +| Name | Type | Description | +| :--- | :--- | :--- | +| `id` | `string` | The id of the panel header | +| `lv` | `string` | The `aria-level` attribute of the header | +| `role` | `string` | The `role` attribute of the header | +| `iconPosition` | `string` | The position of the expand/collapse icon of the header | +| `disabled` | `boolean` | Gets/sets whether the panel header is disabled (blocking user interaction) or not | + + +### Outputs +The following outputs are available in the **igx-expansion-panel-header** component: + +| Name | Cancelable | Description | Parameters +| :--- | :--- | :--- | :--- | +| `onInteraction` | `false` | Emitted when a user interacts with the header host | `{ event: Event, panel: IgxExpansionPanelComponent }` | + +## IgxExpansionPanelBodyComponent +### Inputs +The following inputs are available in the **igx-expansion-panel-body** component: + +| Name | Type | Description | +| :--- | :--- | :--- | +| `labelledBy` | `string` | The `aria-labelledby` attribute of the panel body | +| `label` | `string` | The `aria-label` attribute of the panel body | +| `role` | `string` | The `role` attribute of the panel body | diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts index b9a56e6bfea..6bac6aafed9 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts @@ -13,28 +13,79 @@ export class IgxExpansionPanelBodyComponent implements OnInit { @Inject(IGX_EXPANSION_PANEL_COMPONENT) public panel: IgxExpansionPanelBase, public element: ElementRef, public cdr: ChangeDetectorRef) { } + /** + * @hidden + */ @HostBinding('class.igx-expansion-panel__body') public cssClass = `igx-expansion-panel__body`; - public _title = ''; + /** + * Gets the `aria-label` attribute of the panel body + * Defaults to the panel id with '-region' in the end; + * Get + * ```typescript + * const currentLabel = this.panel.body.label; + * ``` + */ @Input() @HostBinding('attr.aria-label') public get label(): string { return this._label || this.panel.id + '-region'; } + /** + * Sets the `aria-label` attribute of the panel body + * ```typescript + * this.panel.body.label = 'my-custom-label'; + * ``` + * ```html + * + * ``` + */ public set label(val: string) { this._label = val; } + /** + * Gets the `aria-labelledby` attribute of the panel body + * Defaults to the panel header id; + * Get + * ```typescript + * const currentLabel = this.panel.body.labelledBy; + * ``` + */ @Input() @HostBinding('attr.aria-labelledby') public get labelledBy(): string { return this._labelledBy; } + /** + * Sets the `aria-labelledby` attribute of the panel body + * ```typescript + * this.panel.body.labelledBy = 'my-custom-id'; + * ``` + * ```html + * + * ``` + */ public set labelledBy(val: string) { this._labelledBy = val; } + /** + * Gets/sets the `role` attribute of the panel body + * Default is 'region'; + * Get + * ```typescript + * const currentRole = this.panel.body.role; + * ``` + * Set + * ```typescript + * this.panel.body.role = 'content'; + * ``` + * ```html + * + * ``` + */ @Input() @HostBinding('attr.role') public role = 'region'; diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts index b29dcc76c19..589fb791794 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts @@ -31,44 +31,137 @@ export enum ICON_POSITION { export class IgxExpansionPanelHeaderComponent { // properties section private _iconTemplate = false; + /** + * Sets/gets the `id` of the expansion panel header. + * ```typescript + * let panelHeaderId = this.panel.header.id; + * ``` + * @memberof IgxExpansionPanelComponent + */ public id = ''; + /** + * @hidden + */ @ContentChild(IgxExpansionPanelIconDirective) public set iconTemplate(val: any) { this._iconTemplate = val; } + /** + * @hidden + */ public get iconTemplate(): any { return this._iconTemplate; } + /** + * Gets/sets the `aria-level` attribute of the header + * Get + * ```typescript + * const currentAriaLevel = this.panel.header.lv; + * ``` + * Set + * ```typescript + * this.panel.header.lv = '5'; + * ``` + * ```html + * + * ``` + */ @HostBinding('attr.aria-level') @Input() public lv = '3'; + /** + * Gets/sets the `role` attribute of the header + * Get + * ```typescript + * const currentRole = this.panel.header.role; + * ``` + * Set + * ```typescript + * this.panel.header.role = '5'; + * ``` + * ```html + * + * ``` + */ @HostBinding('attr.role') @Input() public role = 'heading'; + /** + * @hidden + */ public get controls (): string { return this.panel.id; } + /** + * Gets/sets the position of the expansion-panel-header expand/collapse icon + * Accepts `left`, `right` or `none` + * ```typescript + * const currentIconPosition = this.panel.header.iconPosition; + * ``` + * Set + * ```typescript + * this.panel.header.iconPosition = 'left'; + * ``` + * ```html + * + * ``` + */ @Input() public iconPosition: ICON_POSITION = ICON_POSITION.LEFT; + /** + * Emitted whenever a user interacts with the header host + * ```typescript + * handleInteraction(event: IExpansionPanelEventArgs) { + * ... + * } + * ``` + * ```html + * + * ... + * + * ``` + */ @Output() public onInteraction = new EventEmitter(); + /** + * @hidden + */ @HostBinding('class.igx-expansion-panel__header') public cssClass = 'igx-expansion-panel__header'; - + /** + * @hidden + */ @HostBinding('class.igx-expansion-panel__header--expanded') public get isExpanded () { return !this.panel.collapsed; } + /** + * Gets/sets the whether the header is disabled + * When disabled, the header will not handle user events and will stop their propagation + * + * ```typescript + * const isDisabled = this.panel.header.disabled; + * ``` + * Set + * ```typescript + * this.panel.header.disabled = true; + * ``` + * ```html + * + * ... + * + * ``` + */ @Input() @HostBinding('class.igx-expansion-panel--disabled') public disabled = false; @@ -78,6 +171,9 @@ export class IgxExpansionPanelHeaderComponent { this.id = `${this.panel.id}-header`; } + /** + * @hidden + */ @HostListener('keydown.Enter', ['$event']) @HostListener('keydown.Space', ['$event']) @HostListener('keydown.Spacebar', ['$event']) @@ -92,6 +188,9 @@ export class IgxExpansionPanelHeaderComponent { evt.preventDefault(); } + /** + * @hidden + */ public get iconPositionClass(): string { switch (this.iconPosition) { case (ICON_POSITION.LEFT): diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts index e079336a25d..452a0b40a91 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts @@ -9,11 +9,11 @@ import { ContentChild, forwardRef, } from '@angular/core'; -import { AnimationBuilder, AnimationReferenceMetadata, useAnimation } from '@angular/animations'; +import { AnimationBuilder, AnimationReferenceMetadata, useAnimation, AnimationAnimateRefMetadata } from '@angular/animations'; import { growVerOut, growVerIn } from '../animations/main'; import { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component'; import { IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component'; -import { IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase } from './expansion-panel.common'; +import { IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase, IExpansionPanelEventArgs } from './expansion-panel.common'; let NEXT_ID = 0; @@ -24,6 +24,37 @@ let NEXT_ID = 0; }) export class IgxExpansionPanelComponent implements IgxExpansionPanelBase { + /** + * Sets/gets the animation settings of the expansion panel component + * Open and Close animation should be passed + * + * Get + * ```typescript + * const currentAnimations = this.panel.animationSettings; + * ``` + * Set + * ```typescript + * import { slideInLeft, slideOutRight } from 'igniteui-angular'; + * ... + * this.panel.animationsSettings = { + * openAnimation: slideInLeft, + * closeAnimation: slideOutRight + * }; + * ``` + * or via template + * ```typescript + * import { slideInLeft, slideOutRight } from 'igniteui-angular'; + * ... + * myCustomAnimationObject = { + * openAnimation: slideInLeft, + * closeAnimation: slideOutRight + * }; + * ```html + * + * ... + * + * ``` + */ @Input() public animationSettings: { openAnimation: AnimationReferenceMetadata, closeAnimation: AnimationReferenceMetadata } = { openAnimation: growVerIn, @@ -45,26 +76,77 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase { @Input() public id = `igx-expansion-panel-${NEXT_ID++}`; + /** + * @hidden + */ @HostBinding('class.igx-expansion-panel') public cssClass = 'igx-expansion-panel'; + /** + * Gets/sets whether the component is collapsed (its content is hidden) + * Get + * ```typescript + * const myPanelState: boolean = this.panel.collapsed; + * ``` + * Set + * ```html + * this.panel.collapsed = true; + * ``` + */ @Input() public collapsed = true; + /** + * Emitted when the expansion panel finishes collapsing + * ```typescript + * handleCollapsed(event: { + * panel: IgxExpansionPanelComponent, + * event: Event + * }) + * ``` + * ```html + * + * ... + * + * ``` + */ @Output() - public onCollapsed = new EventEmitter(); + public onCollapsed = new EventEmitter(); + /** + * Emitted when the expansion panel finishes expanding + * ```typescript + * handleExpanded(event: { + * panel: IgxExpansionPanelComponent, + * event: Event + * }) + * ``` + * ```html + * + * ... + * + * ``` + */ @Output() - public onExpanded = new EventEmitter(); + public onExpanded = new EventEmitter(); + /** + * @hidden + */ public get headerId() { return this.header ? `${this.id}-header` : ''; } constructor(private cdr: ChangeDetectorRef, private builder: AnimationBuilder) { } + /** + * @hidden + */ @ContentChild(forwardRef(() => IgxExpansionPanelBodyComponent), { read: forwardRef(() => IgxExpansionPanelBodyComponent) }) public body: IgxExpansionPanelBodyComponent; + /** + * @hidden + */ @ContentChild(forwardRef(() => IgxExpansionPanelHeaderComponent), { read: forwardRef(() => IgxExpansionPanelHeaderComponent) }) public header: IgxExpansionPanelHeaderComponent; @@ -100,6 +182,16 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase { closeAnimationPlayer.play(); } + /** + * Collapses the panel + * + * ```html + * + * ... + * + * + * ``` + */ collapse(evt?: Event) { this.playCloseAnimation( () => { @@ -109,6 +201,16 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase { ); } + /** + * Expands the panel + * + * ```html + * + * ... + * + * + * ``` + */ expand(evt?: Event) { this.collapsed = false; this.cdr.detectChanges(); @@ -119,6 +221,16 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase { ); } + /** + * Toggles the panel + * + * ```html + * + * ... + * + * + * ``` + */ toggle(evt?: Event) { if (this.collapsed) { this.expand(evt); From 5b1112e2fe790aa78ab8a64b69429f793032d7e1 Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Fri, 30 Nov 2018 12:34:45 +0200 Subject: [PATCH 36/77] fix(igx-grid): Change tabbing logic, #3179 --- .../grid-filtering-cell.component.ts | 69 +++++++++++++------ .../grids/filtering/grid-filtering.service.ts | 45 +++++++++++- .../src/lib/grids/grid-navigation.service.ts | 11 ++- 3 files changed, 96 insertions(+), 29 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts index bd1805f20b8..989e390a03d 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts @@ -12,7 +12,7 @@ import { ChangeDetectionStrategy, DoCheck } from '@angular/core'; -import { IgxColumnComponent } from '../column.component'; +import { IgxColumnComponent, IgxColumnGroupComponent } from '../column.component'; import { IFilteringExpression } from '../../data-operations/filtering-expression.interface'; import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../../chips'; import { IgxFilteringService, ExpressionUI } from './grid-filtering.service'; @@ -82,19 +82,17 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC @HostListener('keydown.tab', ['$event']) public onTabKeyDown(eventArgs) { - const pinnedColumns = this.filteringService.grid.pinnedColumns; - const nextIndex = this.column.visibleIndex + 1 - pinnedColumns.length; + const nextIndex = this.filteringService.unpinnedFilterableColumns.indexOf(this.column) + 1; if (this.isLastElementFocused()) { - if (nextIndex < this.filteringService.grid.unpinnedColumns.length && - pinnedColumns.indexOf(this.column) === pinnedColumns.length - 1 && - !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex + 1)) { - this.ScrollToChip(0, true); + if (this.column === this.getLastPinnedFilterableColumn() && + (!this.isColumnLeftVisible(nextIndex) || !this.isColumnRightVisible(nextIndex))) { + this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[nextIndex], false); eventArgs.stopPropagation(); return; } - if (this.column.visibleIndex === this.filteringService.grid.columnList.length - 1) { + if (nextIndex >= this.filteringService.unpinnedFilterableColumns.length) { if (!this.filteringService.grid.filteredData || this.filteringService.grid.filteredData.length > 0) { if (this.filteringService.grid.rowList.filter(row => row instanceof IgxGridGroupByRowComponent).length > 0) { eventArgs.stopPropagation(); @@ -103,9 +101,9 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC this.navService.goToFirstCell(); } eventArgs.preventDefault(); - } else if (!this.column.pinned && !this.navService.isColumnFullyVisible(this.column.visibleIndex + 1)) { + } else if (!this.column.pinned && !this.isColumnRightVisible(nextIndex)) { eventArgs.preventDefault(); - this.ScrollToChip(nextIndex, true); + this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[nextIndex], true); } } eventArgs.stopPropagation(); @@ -114,11 +112,14 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC @HostListener('keydown.shift.tab', ['$event']) public onShiftTabKeyDown(eventArgs) { if (this.isFirstElementFocused()) { - if (this.column.visibleIndex > 0 && !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex - 1)) { + const prevIndex = this.filteringService.unpinnedFilterableColumns.indexOf(this.column) - 1; + + if (prevIndex >= 0 && this.column.visibleIndex > 0 && !this.isColumnLeftVisible(prevIndex) && !this.column.pinned) { eventArgs.preventDefault(); - const prevIndex = this.column.visibleIndex - 1 - this.filteringService.grid.pinnedColumns.length; - this.ScrollToChip(prevIndex, false); - } else if (this.column.visibleIndex === 0) { + this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[prevIndex], false); + } else if (this.column.visibleIndex === 0 || + (prevIndex < 0 && !this.getFirstPinnedFilterableColumn()) || + this.column === this.getFirstPinnedFilterableColumn()) { eventArgs.preventDefault(); } } @@ -296,13 +297,6 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC } } - private ScrollToChip(columnIndex: number, shouldFocusNext: boolean) { - this.filteringService.grid.nativeElement.focus({preventScroll: true}); - this.filteringService.columnToFocus = this.filteringService.grid.unpinnedColumns[columnIndex]; - this.filteringService.shouldFocusNext = shouldFocusNext; - this.filteringService.grid.headerContainer.scrollTo(columnIndex); - } - private isFirstElementFocused(): boolean { return !(this.chipsArea && this.chipsArea.chipsList.length > 0 && this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`) !== document.activeElement); @@ -343,4 +337,37 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC } } } + + private getLastPinnedFilterableColumn(): IgxColumnComponent { + const pinnedFilterableColums = + this.filteringService.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable); + return pinnedFilterableColums[pinnedFilterableColums.length - 1]; + } + + private getFirstPinnedFilterableColumn(): IgxColumnComponent { + return this.filteringService.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable)[0]; + } + + private isColumnRightVisible(columnIndex: number): boolean { + let currentColumnRight = 0; + for (let index = 0; index < this.filteringService.unpinnedColumns.length; index++) { + currentColumnRight += parseInt(this.filteringService.unpinnedColumns[index].width, 10); + if (this.filteringService.unpinnedColumns[index] === this.filteringService.unpinnedFilterableColumns[columnIndex]) { + break; + } + } + const width = this.filteringService.displayContainerWidth + this.filteringService.displayContainerScrollLeft; + return currentColumnRight <= width && this.isColumnLeftVisible(columnIndex); + } + + private isColumnLeftVisible(columnIndex: number): boolean { + let currentColumnLeft = 0; + for (let index = 0; index < this.filteringService.unpinnedColumns.length; index++) { + if (this.filteringService.unpinnedColumns[index] === this.filteringService.unpinnedFilterableColumns[columnIndex]) { + break; + } + currentColumnLeft += parseInt(this.filteringService.unpinnedColumns[index].width, 10); + } + return currentColumnLeft >= this.filteringService.displayContainerScrollLeft; + } } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index b1240c799b9..0de6d013d96 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -10,7 +10,7 @@ import { takeUntil } from 'rxjs/operators'; import { IForOfState } from '../../directives/for-of/for_of.directive'; import { IgxGridFilterConditionPipe } from '../grid-common.pipes'; import { TitleCasePipe, DatePipe } from '@angular/common'; -import { IgxColumnComponent } from '../grid'; +import { IgxColumnComponent, IgxColumnGroupComponent } from '../grid'; const FILTERING_ICONS_FONT_SET = 'filtering-icons'; @@ -56,6 +56,22 @@ export class IgxFilteringService implements OnDestroy { this.destroy$.complete(); } + public get displayContainerWidth() { + return parseInt(this.grid.parentVirtDir.dc.instance._viewContainer.element.nativeElement.offsetWidth, 10); + } + + public get displayContainerScrollLeft() { + return parseInt(this.grid.parentVirtDir.getHorizontalScroll().scrollLeft, 10); + } + + public get unpinnedFilterableColumns() { + return this.grid.unpinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable); + } + + public get unpinnedColumns() { + return this.grid.unpinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent)); + } + public get grid(): IgxGridBaseComponent { return this.gridAPI.get(this.gridId); } @@ -296,6 +312,33 @@ export class IgxFilteringService implements OnDestroy { } } + /** + * Scrolls to a filterCell. + */ + public scrollToFilterCell(column: IgxColumnComponent, shouldFocusNext: boolean) { + this.grid.nativeElement.focus({preventScroll: true}); + this.columnToFocus = column; + this.shouldFocusNext = shouldFocusNext; + + let currentColumnRight = 0; + let currentColumnLeft = 0; + for (let index = 0; index < this.unpinnedColumns.length; index++) { + currentColumnRight += parseInt(this.unpinnedColumns[index].width, 10); + if (this.unpinnedColumns[index] === column) { + currentColumnLeft = currentColumnRight - parseInt(this.unpinnedColumns[index].width, 10); + break; + } + } + + const forOfDir = this.grid.headerContainer; + const width = this.displayContainerWidth + this.displayContainerScrollLeft; + if (shouldFocusNext) { + forOfDir.getHorizontalScroll().scrollLeft += currentColumnRight - width; + } else { + forOfDir.getHorizontalScroll().scrollLeft = currentColumnLeft; + } + } + private isFilteringTreeComplex(expressions: IFilteringExpressionsTree | IFilteringExpression): boolean { if (!expressions) { return false; diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index f41f30099ad..d593eaa0a3c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -417,14 +417,11 @@ export class IgxGridNavigationService { public moveFocusToFilterCell() { this.grid.rowList.find(row => row instanceof IgxGridRowComponent).cells.first._clearCellSelection(); - const visColLength = this.grid.unpinnedColumns.length; - if (this.isColumnFullyVisible(visColLength - 1)) { - const lastFilterCellIndex = this.grid.filterCellList.length - 1; - this.grid.filteringService.focusFilterCellChip(this.grid.filterCellList[lastFilterCellIndex].column, false); + const columns = this.grid.filteringService.unpinnedFilterableColumns; + if (this.isColumnFullyVisible(columns.length - 1)) { + this.grid.filteringService.focusFilterCellChip(columns[columns.length - 1], false); } else { - this.grid.filteringService.columnToFocus = this.grid.unpinnedColumns[visColLength - 1]; - this.grid.filteringService.shouldFocusNext = false; - this.grid.headerContainer.scrollTo(visColLength - 1); + this.grid.filteringService.scrollToFilterCell(columns[columns.length - 1], false); } } From 5e1336572522fb299e715beb35a09d35b3250b30 Mon Sep 17 00:00:00 2001 From: Radko Kolev Date: Thu, 29 Nov 2018 14:36:41 +0200 Subject: [PATCH 37/77] Merge branch '7.0.x' into rkolev/toolbar-template-7.0.x --- CHANGELOG.md | 2 + .../grid-toolbar/_grid-toolbar-component.scss | 4 + .../grid-toolbar/_grid-toolbar-theme.scss | 5 + .../src/lib/grids/grid-base.component.ts | 11 + .../src/lib/grids/grid-common.module.ts | 3 + .../src/lib/grids/grid-toolbar.component.html | 5 + .../src/lib/grids/grid-toolbar.component.ts | 40 +++- .../src/lib/grids/grid/grid-toolbar.spec.ts | 224 ++++++++++++------ src/app/app.component.ts | 5 + src/app/app.module.ts | 2 + .../grid-toolbar-custom.sample.css | 12 + .../grid-toolbar-custom.sample.html | 41 ++++ .../grid-toolbar-custom.sample.ts | 30 +++ src/app/routing.ts | 5 + 14 files changed, 322 insertions(+), 67 deletions(-) create mode 100644 src/app/grid-toolbar/grid-toolbar-custom.sample.css create mode 100644 src/app/grid-toolbar/grid-toolbar-custom.sample.html create mode 100644 src/app/grid-toolbar/grid-toolbar-custom.sample.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index b321b405ba4..e53f143ad3e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -82,12 +82,14 @@ All notable changes for each version of this project will be documented in this ## 6.2.1 + ### Features - `igxGrid`, `igxChip`: Add display density DI token to igxGrid and igxChip ([#2804](https://github.com/IgniteUI/igniteui-angular/issues/2804)) - `igxGrid` - Quick filter auto close ([#2979](https://github.com/IgniteUI/igniteui-angular/issues/2979)) - Group By: Added title to chip in Group By area ([#3035](https://github.com/IgniteUI/igniteui-angular/issues/3035)) - Improve UX for boolean and date columns, ([#3092](https://github.com/IgniteUI/igniteui-angular/issues/3092)) + - Added a new `igxToolbarCustomContent` directive which can be used to mark an `ng-template` which provides a custom content for the IgxGrid's toolbar ([#2983](https://github.com/IgniteUI/igniteui-angular/issues/2983)) - `igxCombo`: - Added a new input property - `displayDensity`. It allows configuring the `displayDensity` of the combo's `value` and `search` inputs. (PR [#3007](https://github.com/IgniteUI/igniteui-angular/pull/3007)) - `igxDropDown` diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss index 2ed9f3a737e..6553b24b6cc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss @@ -15,6 +15,10 @@ @extend %igx-grid-toolbar__title !optional; } + @include e(custom-content){ + @extend %igx-grid-toolbar__custom-content !optional; + } + @include e(actions){ @extend %igx-grid-toolbar__actions !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss index fd60e1a06e8..604eb0fce95 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss @@ -277,6 +277,11 @@ @include ellipsis(); } + %igx-grid-toolbar__custom-content { + display: flex; + flex-flow: row wrap; + } + %igx-grid-toolbar__actions { display: flex; align-items: center; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index f653723438a..9596eaa7df6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -62,6 +62,7 @@ import { IgxGridRowComponent } from './grid'; import { IgxFilteringService } from './filtering/grid-filtering.service'; import { IgxGridFilteringCellComponent } from './filtering/grid-filtering-cell.component'; import { IgxGridHeaderGroupComponent } from './grid-header-group.component'; +import { IgxGridToolbarCustomContentDirective } from './grid-toolbar.component'; import { IGridResourceStrings } from '../core/i18n/grid-resources'; import { CurrentResourceStrings } from '../core/i18n/resources'; @@ -1299,6 +1300,16 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements @ViewChild('scrollContainer', { read: IgxGridForOfDirective }) public parentVirtDir: IgxGridForOfDirective; + /** + * Returns the template which will be used by the toolbar to show custom content. + * ```typescript + * let customContentTemplate = this.grid.toolbarCustomContentTemplate; + * ``` + * @memberof IgxGridBaseComponent + */ + @ContentChild(IgxGridToolbarCustomContentDirective, { read: IgxGridToolbarCustomContentDirective }) + public toolbarCustomContentTemplate: IgxGridToolbarCustomContentDirective; + /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/grid-common.module.ts b/projects/igniteui-angular/src/lib/grids/grid-common.module.ts index af3d1392672..1dcbc2ba3d3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-common.module.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-common.module.ts @@ -57,6 +57,7 @@ import { import { IgxGridNavigationService } from './grid-navigation.service'; import { IgxGridHeaderGroupComponent } from './grid-header-group.component'; import { IgxColumnResizingService } from './grid-column-resizing.service'; +import { IgxGridToolbarCustomContentDirective } from './grid-toolbar.component'; @NgModule({ declarations: [ @@ -66,6 +67,7 @@ import { IgxColumnResizingService } from './grid-column-resizing.service'; IgxGridHeaderComponent, IgxGridSummaryComponent, IgxGridToolbarComponent, + IgxGridToolbarCustomContentDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellEditorTemplateDirective, @@ -97,6 +99,7 @@ import { IgxColumnResizingService } from './grid-column-resizing.service'; IgxGridHeaderComponent, IgxGridSummaryComponent, IgxGridToolbarComponent, + IgxGridToolbarCustomContentDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellEditorTemplateDirective, diff --git a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html index 5da59dd8ca6..19fc4c0b3d5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html @@ -2,6 +2,11 @@ {{ getTitle() }} +
+ + +
+
+ + + + ` +}) +export class GridToolbarTestPage2Component { + + public data = [ + { ProductID: 1, ProductName: 'Chai', InStock: true, UnitsInStock: 2760, OrderDate: new Date('2005-03-21') }, + { ProductID: 2, ProductName: 'Aniseed Syrup', InStock: false, UnitsInStock: 198, OrderDate: new Date('2008-01-15') }, + { ProductID: 3, ProductName: 'Chef Antons Cajun Seasoning', InStock: true, UnitsInStock: 52, OrderDate: new Date('2010-11-20') }, + { ProductID: 4, ProductName: 'Grandmas Boysenberry Spread', InStock: false, UnitsInStock: 0, OrderDate: new Date('2007-10-11') }, + { ProductID: 5, ProductName: 'Uncle Bobs Dried Pears', InStock: false, UnitsInStock: 0, OrderDate: new Date('2001-07-27') }, + { ProductID: 6, ProductName: 'Northwoods Cranberry Sauce', InStock: true, UnitsInStock: 1098, OrderDate: new Date('1990-05-17') }, + { ProductID: 7, ProductName: 'Queso Cabrales', InStock: false, UnitsInStock: 0, OrderDate: new Date('2005-03-03') }, + { ProductID: 8, ProductName: 'Tofu', InStock: true, UnitsInStock: 7898, OrderDate: new Date('2017-09-09') }, + { ProductID: 9, ProductName: 'Teatime Chocolate Biscuits', InStock: true, UnitsInStock: 6998, OrderDate: new Date('2025-12-25') }, + { ProductID: 10, ProductName: 'Chocolate', InStock: true, UnitsInStock: 20000, OrderDate: new Date('2018-03-01') } + ]; + + @ViewChild('grid1', { read: IgxGridComponent }) + public grid1: IgxGridComponent; + +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ae06b2bf509..5fb1cbf6bf2 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -183,6 +183,11 @@ export class AppComponent implements OnInit { icon: 'view_column', name: 'Grid Toolbar' }, + { + link: '/gridToolbarCustom', + icon: 'view_column', + name: 'Grid Toolbar Custom Content' + }, { link: '/treeGrid', icon: 'view_column', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d3fd72dcfe0..5e6cecf79fc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -57,6 +57,7 @@ import { GridSummaryComponent } from './grid-summaries/grid-summaries.sample'; import { GridPerformanceSampleComponent } from './grid-performance/grid-performance.sample'; import { GridSelectionComponent } from './grid-selection/grid-selection.sample'; import { GridToolbarSampleComponent } from './grid-toolbar/grid-toolbar.sample'; +import { GridToolbarCustomSampleComponent } from './grid-toolbar/grid-toolbar-custom.sample'; import { GridVirtualizationSampleComponent } from './grid-remote-virtualization/grid-remote-virtualization.sample'; import { ButtonGroupSampleComponent } from './buttonGroup/buttonGroup.sample'; import { GridColumnGroupsSampleComponent } from './grid-column-groups/grid-column-groups.sample'; @@ -127,6 +128,7 @@ const components = [ GridPerformanceSampleComponent, GridSelectionComponent, GridToolbarSampleComponent, + GridToolbarCustomSampleComponent, GridVirtualizationSampleComponent, GridColumnGroupsSampleComponent, GridCellStylingSampleComponent, diff --git a/src/app/grid-toolbar/grid-toolbar-custom.sample.css b/src/app/grid-toolbar/grid-toolbar-custom.sample.css new file mode 100644 index 00000000000..ed8584c971e --- /dev/null +++ b/src/app/grid-toolbar/grid-toolbar-custom.sample.css @@ -0,0 +1,12 @@ + +.sample-content { + flex-flow: column nowrap; +} + +.grid-sample { + margin-bottom: 144px; +} + +.grid-sample:last-child { + margin-bottom: 0; +} diff --git a/src/app/grid-toolbar/grid-toolbar-custom.sample.html b/src/app/grid-toolbar/grid-toolbar-custom.sample.html new file mode 100644 index 00000000000..e9c3af3360b --- /dev/null +++ b/src/app/grid-toolbar/grid-toolbar-custom.sample.html @@ -0,0 +1,41 @@ +
+ + The grid toolbar's custom content area provides a place for custom UI. + To create such an area, define an ng-template in the IgxGrid and mark it with the 'igxToolbarCustomContent' directive. + +
+
+

Toolbar

+ + + + + + + + + +
+
+
diff --git a/src/app/grid-toolbar/grid-toolbar-custom.sample.ts b/src/app/grid-toolbar/grid-toolbar-custom.sample.ts new file mode 100644 index 00000000000..a36bcc2dbc5 --- /dev/null +++ b/src/app/grid-toolbar/grid-toolbar-custom.sample.ts @@ -0,0 +1,30 @@ + +import { Component } from '@angular/core'; +import { IgxColumnComponent } from 'igniteui-angular'; + +@Component({ + selector: 'app-grid-toolbar-custom-sample', + styleUrls: ['grid-toolbar-custom.sample.css'], + templateUrl: 'grid-toolbar-custom.sample.html' +}) +export class GridToolbarCustomSampleComponent { + + data = [ + { + Name: 'Alice', + Age: 25 + }, + { + Name: 'Bob', + Age: 23 + } + ]; + + constructor() { + } + + public initColumns(column: IgxColumnComponent) { + column.filterable = true; + column.sortable = true; + } +} diff --git a/src/app/routing.ts b/src/app/routing.ts index 867b2f50373..c86dff74ccd 100644 --- a/src/app/routing.ts +++ b/src/app/routing.ts @@ -42,6 +42,7 @@ import { GridSummaryComponent } from './grid-summaries/grid-summaries.sample'; import { GridPerformanceSampleComponent } from './grid-performance/grid-performance.sample'; import { GridSelectionComponent } from './grid-selection/grid-selection.sample'; import { GridToolbarSampleComponent } from './grid-toolbar/grid-toolbar.sample'; +import { GridToolbarCustomSampleComponent } from './grid-toolbar/grid-toolbar-custom.sample'; import { GridVirtualizationSampleComponent } from './grid-remote-virtualization/grid-remote-virtualization.sample'; import { ButtonGroupSampleComponent } from './buttonGroup/buttonGroup.sample'; import { GridColumnGroupsSampleComponent } from './grid-column-groups/grid-column-groups.sample'; @@ -265,6 +266,10 @@ const appRoutes = [ path: 'gridToolbar', component: GridToolbarSampleComponent }, + { + path: 'gridToolbarCustom', + component: GridToolbarCustomSampleComponent + }, { path: 'gridRemoteVirtualization', component: GridVirtualizationSampleComponent From 80a2781aa3a54224cdc7567ddb479e90774e36bf Mon Sep 17 00:00:00 2001 From: Radko Kolev Date: Thu, 29 Nov 2018 16:07:17 +0200 Subject: [PATCH 38/77] fix(toolbar): including custom content in the show toolbar check #2983 --- projects/igniteui-angular/src/lib/grids/grid-base.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 9596eaa7df6..df71045c70a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -1699,6 +1699,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements return this.showToolbar && (this.columnHiding || this.columnPinning || + this.toolbarCustomContentTemplate != null || this.exportExcel || this.exportCsv || (this.toolbarTitle && this.toolbarTitle !== null && this.toolbarTitle !== '')); From 2f181d53b0f5052162faf588acc7a920fc460f95 Mon Sep 17 00:00:00 2001 From: zdrawku Date: Mon, 3 Dec 2018 14:40:10 +0200 Subject: [PATCH 39/77] chore(documentation): updating shell-strings.json #3260 --- extras/template/strings/shell-strings.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/extras/template/strings/shell-strings.json b/extras/template/strings/shell-strings.json index 25ba09c2f4e..64d90868671 100644 --- a/extras/template/strings/shell-strings.json +++ b/extras/template/strings/shell-strings.json @@ -24,14 +24,14 @@ "Static": "スタティック", "Components": "コンポーネント", "Get Started": "はじめに", - "Name": "名", + "Name": "名前", "Description": "説明", "Type": "型", "Default Value": "デフォルト値", "Authors": "作者", "Example": "例", "Used by": "次で使用", - "See": "次を参照してください:", + "See": "参照先", "Requires": "必須" } } From ee9d293cb5b7e0c54425e6baf96b0d3a4f16cea3 Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Mon, 3 Dec 2018 15:55:22 +0200 Subject: [PATCH 40/77] fix(igx-grid): Reset isFilterRowVisible, when changing allowFiltering, #3255 --- .../src/lib/grids/grid-base.component.ts | 2 ++ .../lib/grids/grid/grid-filtering-ui.spec.ts | 21 +++++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index f653723438a..a37eb5ede07 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -745,6 +745,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements set allowFiltering(value) { if (this._allowFiltering !== value) { this._allowFiltering = value; + this.filteringService.isFilterRowVisible = false; + this.filteringService.filteredColumn = null; this.filteringService.registerSVGIcons(); if (this.gridAPI.get(this.id)) { this.markForCheck(); 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 index 74e2e9f865b..0d7c4cc932b 100644 --- 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 @@ -2689,6 +2689,27 @@ describe('IgxGrid - Filtering Row UI actions', () => { igx_grid_filter_row_close: 'Close' }); })); + + it('Should remove FilterRow, when allowFiltering is set to false.', fakeAsync(() => { + const fix = TestBed.createComponent(IgxGridFilteringComponent); + const grid = fix.componentInstance.grid; + fix.detectChanges(); + + const initialChips = fix.debugElement.queryAll(By.directive(IgxChipComponent)); + const stringCellChip = initialChips[0].nativeElement; + + stringCellChip.click(); + fix.detectChanges(); + + let filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); + expect(filteringRow).toBeDefined(); + + grid.allowFiltering = false; + fix.detectChanges(); + + filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); + expect(filteringRow).toBeNull(); + })); }); export class CustomFilter extends IgxFilteringOperand { From 51023524396aa93b9b1d3948e3cb937d9c5e1c78 Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Mon, 3 Dec 2018 15:55:22 +0200 Subject: [PATCH 41/77] fix(igx-grid): Reset isFilterRowVisible, when changing allowFiltering, #3255 --- .../src/lib/grids/grid-base.component.ts | 2 ++ .../lib/grids/grid/grid-filtering-ui.spec.ts | 21 +++++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index f653723438a..a37eb5ede07 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -745,6 +745,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements set allowFiltering(value) { if (this._allowFiltering !== value) { this._allowFiltering = value; + this.filteringService.isFilterRowVisible = false; + this.filteringService.filteredColumn = null; this.filteringService.registerSVGIcons(); if (this.gridAPI.get(this.id)) { this.markForCheck(); 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 index 74e2e9f865b..0d7c4cc932b 100644 --- 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 @@ -2689,6 +2689,27 @@ describe('IgxGrid - Filtering Row UI actions', () => { igx_grid_filter_row_close: 'Close' }); })); + + it('Should remove FilterRow, when allowFiltering is set to false.', fakeAsync(() => { + const fix = TestBed.createComponent(IgxGridFilteringComponent); + const grid = fix.componentInstance.grid; + fix.detectChanges(); + + const initialChips = fix.debugElement.queryAll(By.directive(IgxChipComponent)); + const stringCellChip = initialChips[0].nativeElement; + + stringCellChip.click(); + fix.detectChanges(); + + let filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); + expect(filteringRow).toBeDefined(); + + grid.allowFiltering = false; + fix.detectChanges(); + + filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); + expect(filteringRow).toBeNull(); + })); }); export class CustomFilter extends IgxFilteringOperand { From 5abf8921b8a2b65300e764cebb0af7907ee1167a Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 3 Dec 2018 16:08:16 +0200 Subject: [PATCH 42/77] fix(theme): grid column headers not styled uniformly Closes #3072 --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 index dfde1cdff0f..34618b2ca40 100644 --- 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 @@ -1157,8 +1157,7 @@ %igx-grid__drag-col-header { background-color: --var($theme, 'header-background'); - %grid-cell-header-title, - %grid-cell-header-icons { + %grid-cell-header { opacity: .4; } } From 31a30a4f679c3643fce50d76af313b537992b9ff Mon Sep 17 00:00:00 2001 From: Boris Date: Mon, 3 Dec 2018 16:05:19 +0200 Subject: [PATCH 43/77] fix(schematics): Flagged igniteui-cli as a dev dependency #3254 --- projects/igniteui-angular/package.json | 2 +- projects/igniteui-angular/schematics/ng-add/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index e8c62b075af..d78eaa88cc7 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -67,7 +67,7 @@ "@angular/forms": "^7.0.3", "web-animations-js": "^2.3.1" }, - "optionalDependencies": { + "devDependencies": { "igniteui-cli": "~3.1.0" }, "ng-update": { diff --git a/projects/igniteui-angular/schematics/ng-add/index.ts b/projects/igniteui-angular/schematics/ng-add/index.ts index 306bce4fe3c..45114c57821 100644 --- a/projects/igniteui-angular/schematics/ng-add/index.ts +++ b/projects/igniteui-angular/schematics/ng-add/index.ts @@ -40,7 +40,7 @@ function addDependencies(options: Options): Rule { } }); - addPackageToJsonDevDependency(tree, 'igniteui-cli', pkgJson.optionalDependencies['igniteui-cli']); + addPackageToJsonDevDependency(tree, 'igniteui-cli', pkgJson.devDependencies['igniteui-cli']); return tree; }; } From 8ba347e9d3261b8f3e5730f333085b78b7ee5e03 Mon Sep 17 00:00:00 2001 From: Viktor Aladzhov Date: Mon, 3 Dec 2018 18:00:46 +0200 Subject: [PATCH 44/77] Update extras/template/strings/shell-strings.json Co-Authored-By: zdrawku --- extras/template/strings/shell-strings.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extras/template/strings/shell-strings.json b/extras/template/strings/shell-strings.json index 5b34d1467f1..082908a13e2 100644 --- a/extras/template/strings/shell-strings.json +++ b/extras/template/strings/shell-strings.json @@ -33,7 +33,7 @@ "Used by": "次で使用", "See": "次を参照してください:", "Requires": "必須", - "Default value": "Default value", + "Default value": "デフォルト値", "Optional": "Optional", "Rest": "Rest" } From 6f23d6be2f5c48b7812dde02208bae913f6bc917 Mon Sep 17 00:00:00 2001 From: Viktor Aladzhov Date: Mon, 3 Dec 2018 18:00:53 +0200 Subject: [PATCH 45/77] Update extras/template/strings/shell-strings.json Co-Authored-By: zdrawku --- extras/template/strings/shell-strings.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extras/template/strings/shell-strings.json b/extras/template/strings/shell-strings.json index 082908a13e2..321ed2ba7aa 100644 --- a/extras/template/strings/shell-strings.json +++ b/extras/template/strings/shell-strings.json @@ -34,7 +34,7 @@ "See": "次を参照してください:", "Requires": "必須", "Default value": "デフォルト値", - "Optional": "Optional", + "Optional": "オプション", "Rest": "Rest" } } From cc3c49ff13a6a3b85a9db214ea0f4289a9a9be11 Mon Sep 17 00:00:00 2001 From: Viktor Aladzhov Date: Mon, 3 Dec 2018 18:01:00 +0200 Subject: [PATCH 46/77] Update extras/template/strings/shell-strings.json Co-Authored-By: zdrawku --- extras/template/strings/shell-strings.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extras/template/strings/shell-strings.json b/extras/template/strings/shell-strings.json index 321ed2ba7aa..51dbb12f6d6 100644 --- a/extras/template/strings/shell-strings.json +++ b/extras/template/strings/shell-strings.json @@ -35,6 +35,6 @@ "Requires": "必須", "Default value": "デフォルト値", "Optional": "オプション", - "Rest": "Rest" + "Rest": "残りの引数" } } From 51c81f70a0000203f0324f2e37f47c9548bfe612 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 3 Dec 2018 16:08:16 +0200 Subject: [PATCH 47/77] fix(theme): grid column headers not styled uniformly Closes #3072 --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 index dfde1cdff0f..34618b2ca40 100644 --- 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 @@ -1157,8 +1157,7 @@ %igx-grid__drag-col-header { background-color: --var($theme, 'header-background'); - %grid-cell-header-title, - %grid-cell-header-icons { + %grid-cell-header { opacity: .4; } } From d7b0056208688171cf8bccded66e432a5cd4adca Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Wed, 28 Nov 2018 15:01:04 +0200 Subject: [PATCH 48/77] fix(igxCombo): fix combo and drop down navigation with TAB key, #3200 --- .../igniteui-angular/src/lib/drop-down/drop-down.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 50e6332a26c..150c0c98fab 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -65,10 +65,10 @@ export class IgxDropDownItemNavigationDirective { switch (key) { case 'esc': case 'escape': + case 'tab': this.onEscapeKeyDown(event); break; case 'enter': - case 'tab': this.onEnterKeyDown(event); break; case 'space': From cb3819877fb4a30321c46eddc40c29ccb97c6619 Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Thu, 29 Nov 2018 13:20:50 +0200 Subject: [PATCH 49/77] fix(combo): focusing combo input highlights the first nav item in DD, #3200 --- .../src/lib/combo/combo.component.spec.ts | 16 ++++++++++++++++ .../src/lib/drop-down/drop-down.base.ts | 6 ++++++ .../src/lib/drop-down/drop-down.component.ts | 11 +++++++++-- 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 08e875a0206..e40eece4108 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -882,6 +882,22 @@ describe('igxCombo', () => { }); }); }); + + it('Should properly get the first focusable item when focusing the component list', fakeAsync(() => { + const fixture = TestBed.createComponent(IgxComboInputTestComponent); + fixture.detectChanges(); + const combo = fixture.componentInstance.combo; + spyOn(combo.dropdown, 'getFirstSelectableItem').and.callThrough(); + combo.toggle(); + tick(); + fixture.detectChanges(); + combo.searchInput.nativeElement.dispatchEvent(new KeyboardEvent('keypress', { key: 'Tab'})); + (document.getElementsByClassName('igx-combo__content')[0]).dispatchEvent(new Event('focus')); + tick(); + fixture.detectChanges(); + expect(combo.dropdown.getFirstSelectableItem).toHaveBeenCalledTimes(1); + expect((combo.dropdown.focusedItem.element.nativeElement).textContent.trim()).toEqual('Michigan'); + })); }); diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index 1f61391c386..cefdd64da0a 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -552,6 +552,12 @@ export abstract class IgxDropDownBase implements OnInit, IToggleView { this._focusedItem.isFocused = true; } } + /** + * @hidden + */ + public getFirstSelectableItem() { + return this.children.find(child => !child.isHeader && !child.disabled); + } } /** diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 150c0c98fab..92afaff2b4c 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -43,6 +43,13 @@ export class IgxDropDownItemNavigationDirective { set target(target: IgxDropDownBase) { this._target = target ? target : this.dropdown; } + @HostListener('focus') + handleFocus() { + if ((this.target).combo) { + this.target.focusedItem = this.target.getFirstSelectableItem(); + this.target.focusedItem.isFocused = true; + } + } /** * @hidden @@ -52,7 +59,7 @@ export class IgxDropDownItemNavigationDirective { if (event) { const key = event.key.toLowerCase(); if (!this.target.collapsed) { // If dropdown is opened - const navKeys = ['esc', 'escape', 'enter', 'tab', 'space', 'spacebar', ' ', + const navKeys = ['esc', 'escape', 'enter', 'space', 'spacebar', ' ', 'arrowup', 'up', 'arrowdown', 'down', 'home', 'end']; if (navKeys.indexOf(key) === -1) { // If key has appropriate function in DD return; @@ -65,7 +72,7 @@ export class IgxDropDownItemNavigationDirective { switch (key) { case 'esc': case 'escape': - case 'tab': + // case 'tab': this.onEscapeKeyDown(event); break; case 'enter': From b7e215a3a10fa69f91b6951ad9b5590a730eae31 Mon Sep 17 00:00:00 2001 From: zdrawku Date: Tue, 4 Dec 2018 12:14:28 +0200 Subject: [PATCH 50/77] chore(package): Updating typedoc-plugin-localization #3288 --- package-lock.json | 43 +++++++++++++++++++++++++++---------------- package.json | 2 +- 2 files changed, 28 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 89982fda7da..88fd4fcf31e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -983,7 +983,7 @@ }, "@types/events": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@types/events/-/events-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/@types/events/-/events-1.2.0.tgz", "integrity": "sha512-KEIlhXnIutzKwRbQkGWb/I4HFqBuUykAdHgDED6xqwXJfONCjF5VoE0cXEiurh3XauygxzeDzgtXUqvLkxFzzA==", "dev": true }, @@ -1065,7 +1065,7 @@ }, "@types/q": { "version": "0.0.32", - "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz", + "resolved": "http://registry.npmjs.org/@types/q/-/q-0.0.32.tgz", "integrity": "sha1-vShOV8hPEyXacCur/IKlMoGQwMU=", "dev": true }, @@ -1087,7 +1087,7 @@ }, "@types/webpack-env": { "version": "1.13.6", - "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.13.6.tgz", + "resolved": "http://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.13.6.tgz", "integrity": "sha512-5Th3OsZ4gTRdr9Mho83BQ23cex4sRhOR4XTG+m+cJc0FhtUBK9Vn62hBJ+pnQYnSxoPOsKoAPOx6FcphxBC8ng==", "dev": true }, @@ -2744,7 +2744,7 @@ }, "callsites": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=", "dev": true }, @@ -4165,7 +4165,7 @@ }, "domelementtype": { "version": "1.3.0", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz", + "resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz", "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=", "dev": true }, @@ -5443,12 +5443,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5463,17 +5465,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5590,7 +5595,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5602,6 +5608,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5616,6 +5623,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5727,7 +5735,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5739,6 +5748,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5860,6 +5870,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10704,7 +10715,7 @@ }, "opn": { "version": "5.3.0", - "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz", + "resolved": "http://registry.npmjs.org/opn/-/opn-5.3.0.tgz", "integrity": "sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==", "dev": true, "requires": { @@ -15559,9 +15570,9 @@ "dev": true }, "typedoc-plugin-localization": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/typedoc-plugin-localization/-/typedoc-plugin-localization-1.3.0.tgz", - "integrity": "sha512-nc+f9XqCTKaO/Rq5igFKV1WfAbkhvOUUJfR6yYqqQCaTcJzJSe6vdS6Ro7N11tjoQKXXrZbp5QUfbMTVr1X5Qg==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/typedoc-plugin-localization/-/typedoc-plugin-localization-1.4.0.tgz", + "integrity": "sha512-D+6IF/TyiFLNTQhInL9JeHAHOXGfKfEGbAPbO3cUIxTdTR9icun7aJ2p9AwOzWlVn7c+fhBRHWk2CJm0LOo4Lw==", "dev": true, "requires": { "fs-extra": "^7.0.0", @@ -16549,7 +16560,7 @@ }, "source-map": { "version": "0.4.4", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", + "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", "dev": true, "requires": { diff --git a/package.json b/package.json index dd432966d06..42df6351bc3 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "tslib": "^1.9.3", "tslint": "~5.11.0", "typedoc": "^0.13.0", - "typedoc-plugin-localization": "^1.3.0", + "typedoc-plugin-localization": "^1.4.0", "typescript": "~3.1.6", "webpack-sources": "1.3.0" } From 9aa1892a18d4183600dda437f324871945659897 Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Tue, 4 Dec 2018 12:58:57 +0200 Subject: [PATCH 51/77] chore(banner): add banner display to enable basic styling --- .../src/lib/banner/banner.component.ts | 11 ++++++++++- src/app/banner/banner.sample.css | 7 +++++++ src/app/banner/banner.sample.html | 2 +- src/app/banner/banner.sample.ts | 11 +++++++++-- 4 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 src/app/banner/banner.sample.css diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.ts b/projects/igniteui-angular/src/lib/banner/banner.component.ts index b0803f8a361..8c6ed056525 100644 --- a/projects/igniteui-angular/src/lib/banner/banner.component.ts +++ b/projects/igniteui-angular/src/lib/banner/banner.component.ts @@ -1,4 +1,5 @@ -import { Component, NgModule, EventEmitter, Output, Input, ViewChild, ElementRef, ContentChild } from '@angular/core'; +import { Component, NgModule, EventEmitter, Output, Input, ViewChild, ElementRef, + ContentChild, HostBinding } from '@angular/core'; import { IgxExpansionPanelModule } from '../expansion-panel/expansion-panel.module'; import { AnimationSettings } from '../expansion-panel/expansion-panel.component'; import { IgxExpansionPanelComponent } from '../expansion-panel'; @@ -159,6 +160,14 @@ export class IgxBannerComponent implements IToggleView { return this.elementRef.nativeElement; } + /** + * @hidden + */ + @HostBinding('style.display') + public get displayStyle(): string { + return this.collapsed ? '' : 'block'; + } + constructor(public elementRef: ElementRef) { } /** diff --git a/src/app/banner/banner.sample.css b/src/app/banner/banner.sample.css new file mode 100644 index 00000000000..175733442a1 --- /dev/null +++ b/src/app/banner/banner.sample.css @@ -0,0 +1,7 @@ +igx-banner > .igx-expansion-panel > .igx-expansion-panel__body { + box-shadow: 2px 1px #d3d3d3; +} + +igx-banner { + border-bottom: 2px solid #d3d3d3; +} \ No newline at end of file diff --git a/src/app/banner/banner.sample.html b/src/app/banner/banner.sample.html index 393e5614ea0..48ccb808942 100644 --- a/src/app/banner/banner.sample.html +++ b/src/app/banner/banner.sample.html @@ -1,5 +1,5 @@
- + Your connections is not private! lock diff --git a/src/app/banner/banner.sample.ts b/src/app/banner/banner.sample.ts index c93c7815d44..8acc411c62b 100644 --- a/src/app/banner/banner.sample.ts +++ b/src/app/banner/banner.sample.ts @@ -1,14 +1,21 @@ import { Component, ViewChild } from '@angular/core'; -import { IgxBannerComponent } from 'igniteui-angular'; +import { IgxBannerComponent, growVerIn, growVerOut } from 'igniteui-angular'; +import { animate, useAnimation } from '@angular/animations'; @Component({ selector: 'app-banner-sample', - templateUrl: `banner.sample.html` + templateUrl: `banner.sample.html`, + styleUrls: [`banner.sample.css`] }) export class BannerSampleComponent { @ViewChild('bannerNoSafeConnection') bannerNoSafeConnection: IgxBannerComponent; @ViewChild('bannerCookies') bannerCookies: IgxBannerComponent; + public animationSettings = { openAnimation: useAnimation(growVerIn, { + params: { + duration: '2000ms' + } + }), closeAnimation: useAnimation(growVerOut)}; public toggle() { if (this.bannerNoSafeConnection.collapsed) { this.bannerNoSafeConnection.open(); From 09e8671d34f974302fb7ce3cc03e6f11084777a5 Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Tue, 4 Dec 2018 13:33:49 +0200 Subject: [PATCH 52/77] chore(banner): add test for banner display style --- .../src/lib/banner/banner.component.spec.ts | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.spec.ts b/projects/igniteui-angular/src/lib/banner/banner.component.spec.ts index e7baef503b4..38193cbcb62 100644 --- a/projects/igniteui-angular/src/lib/banner/banner.component.spec.ts +++ b/projects/igniteui-angular/src/lib/banner/banner.component.spec.ts @@ -513,6 +513,29 @@ describe('igxBanner', () => { expect(cardContent.innerHTML).toEqual('Brad Stanley has requested to follow you.'); expect(cardContent.childElementCount).toEqual(0); })); + + it('Should apply the appropriate display style to the banner host', fakeAsync(() => { + const fixture = TestBed.createComponent(IgxBannerOneButtonComponent); + fixture.detectChanges(); + const banner = fixture.componentInstance.banner; + // Banner is collapsed, display is ''; + expect(banner.elementRef.nativeElement.style.display).toEqual(''); + banner.toggle(); + tick(); + // Banner is expanded, display is 'block'; + fixture.detectChanges(); + expect(banner.elementRef.nativeElement.style.display).toEqual('block'); + expect(banner.collapsed).toBeFalsy(); + banner.toggle(); + tick(100); + // Banner is collapsING, display is 'block'; + expect(banner.elementRef.nativeElement.style.display).toEqual('block'); + tick(); + fixture.detectChanges(); + // Banner is collapsed, display is ''; + expect(banner.elementRef.nativeElement.style.display).toEqual(''); + expect(banner.collapsed).toBeTruthy(); + })); }); const getBaseClassElements = (fixture: ComponentFixture) => { From a7ef9f0570a6ca23c45acff4447a2c3f2abd61ea Mon Sep 17 00:00:00 2001 From: Deyan Kamburov Date: Wed, 28 Nov 2018 18:31:08 +0200 Subject: [PATCH 53/77] fix(igxCell): Use value instead of ngModel (#2958) --- projects/igniteui-angular/src/lib/grids/cell.component.html | 4 ++-- .../src/lib/grids/tree-grid/tree-cell.component.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 0e2b0585b9d..334d4de5208 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -19,10 +19,10 @@ - + - + diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html index 0181a7e3687..41c0110894a 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html @@ -19,10 +19,10 @@ - + - + From 124660a25b43640c2e42ee406f9ca66b7d02fc22 Mon Sep 17 00:00:00 2001 From: Deyan Kamburov Date: Thu, 29 Nov 2018 13:56:18 +0200 Subject: [PATCH 54/77] fix(igxCell): Expose and use getter and setter for editValue (#2958) --- .../src/lib/grids/cell.component.html | 8 ++--- .../src/lib/grids/cell.component.ts | 35 +++++++++++++++---- .../grids/tree-grid/tree-cell.component.html | 8 ++--- 3 files changed, 36 insertions(+), 15 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 334d4de5208..6e7ed682f65 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -10,19 +10,19 @@ - + - + - + - + diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index ae23c7e66e1..647f444ba73 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -288,11 +288,11 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit { return; } if (this.column.editable && value) { - this.editValue = this.value; this.gridAPI.set_cell_inEditMode(this.gridID, this); if (this.highlight && this.grid.lastSearchInfo.searchText) { this.highlight.observe(); } + this.editValue = this.value; } else { this.gridAPI.escape_editMode(this.gridID, this.cellID); } @@ -482,9 +482,30 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit { private highlight: IgxTextHighlightDirective; /** - * @hidden + * Sets the current edit value while a cell is in edit mode. + * Only for cell editing mode. + * ```typescript + * let isLastPinned = this.cell.isLastPinned; + * ``` + * @memberof IgxGridCellComponent */ - public editValue; + public set editValue(value) { + if (this.gridAPI.get_cell_inEditMode(this.gridID)) { + this.gridAPI.get_cell_inEditMode(this.gridID).cell.editValue = value; + } + } + + /** + * Gets the current edit value while a cell is in edit mode. + * Only for cell editing mode. + * ```typescript + * let editValue = this.cell.editValue; + * ``` + * @memberof IgxGridCellComponent + */ + public get editValue() { + return this.gridAPI.get_cell_inEditMode(this.gridID).cell.editValue; + } public focused = false; protected isSelected = false; private cellSelectionID: string; @@ -704,7 +725,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit { const column = this.gridAPI.get(this.gridID).columns[editCell.cellID.columnID]; if (column.inlineEditorTemplate === undefined && ( - (column.dataType === DataType.Boolean && (key !== KEYS.SPACE && key !== KEYS.SPACE_IE)) + (column.dataType === DataType.Boolean && (key !== KEYS.SPACE && key !== KEYS.SPACE_IE)) || column.dataType === DataType.Date)) { event.preventDefault(); } @@ -727,11 +748,11 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit { (this.gridAPI as any).trigger_row_expansion_toggle( this.gridID, this.row.treeRow, !this.row.expanded, event, this.visibleColumnIndex); } - return; + return; } } - const args = {cell: this, groupRow: null, event: event, cancel: false }; + const args = { cell: this, groupRow: null, event: event, cancel: false }; this.grid.onFocusChange.emit(args); if (args.cancel) { return; @@ -904,7 +925,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit { */ public calculateSizeToFit(range: any): number { return Math.max(...Array.from(this.nativeElement.children) - .map((child) => getNodeSizeViaRange(range, child))); + .map((child) => getNodeSizeViaRange(range, child))); } private isToggleKey(key) { diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html index 41c0110894a..77dc101da33 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html @@ -10,19 +10,19 @@ - + - + - + - + From a9b72a31657e179c87c7793474337a2835f58271 Mon Sep 17 00:00:00 2001 From: Deyan Kamburov Date: Thu, 29 Nov 2018 14:22:43 +0200 Subject: [PATCH 55/77] chore(igxCell): Fix failing test --- projects/igniteui-angular/src/lib/grids/cell.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 6e7ed682f65..b24af170912 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -19,7 +19,7 @@ - + From 1f7b0741ccd3ac57ce19ba27605904635ca8b4ba Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Tue, 4 Dec 2018 14:54:29 +0200 Subject: [PATCH 56/77] chore(*): style banner sample using class instead of tag selector --- src/app/banner/banner.sample.css | 6 +----- src/app/banner/banner.sample.html | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/app/banner/banner.sample.css b/src/app/banner/banner.sample.css index 175733442a1..948792f3f90 100644 --- a/src/app/banner/banner.sample.css +++ b/src/app/banner/banner.sample.css @@ -1,7 +1,3 @@ -igx-banner > .igx-expansion-panel > .igx-expansion-panel__body { - box-shadow: 2px 1px #d3d3d3; -} - -igx-banner { +.banner-border { border-bottom: 2px solid #d3d3d3; } \ No newline at end of file diff --git a/src/app/banner/banner.sample.html b/src/app/banner/banner.sample.html index 48ccb808942..8c2502d498d 100644 --- a/src/app/banner/banner.sample.html +++ b/src/app/banner/banner.sample.html @@ -1,5 +1,5 @@
- + From 156e926ed8a82af655798a866dd7da5afac81774 Mon Sep 17 00:00:00 2001 From: gedinakova Date: Tue, 4 Dec 2018 14:52:44 +0200 Subject: [PATCH 57/77] fix(TreeGridExport): #2982 Check if a tree grid is being exported. --- .../src/lib/services/excel/excel-files.ts | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-files.ts b/projects/igniteui-angular/src/lib/services/excel/excel-files.ts index 69cd57ba924..b82b1d36199 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-files.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-files.ts @@ -81,16 +81,18 @@ export class WorksheetFile implements IExcelFile { sheetData.push(''); for (let i = 1; i < worksheetData.rowCount; i++) { - const rowData = worksheetData.data[i - 1].originalRowData; - - const sCollapsed = (!rowData.expanded) ? '' : (rowData.expanded === true) ? '' : ` collapsed="1"`; - const sHidden = (rowData.parent && this.hasCollapsedParent(rowData)) ? ` hidden="1"` : ''; - const rowOutlineLevel = rowData.level ? rowData.level : 0; - const sOutlineLevel = rowOutlineLevel > 0 ? ` outlineLevel="${rowOutlineLevel}"` : ''; - maxOutlineLevel = maxOutlineLevel < rowOutlineLevel ? rowOutlineLevel : maxOutlineLevel; - - sheetData.push(``); - + if (!worksheetData.isTreeGridData) { + sheetData.push(``); + } else { + const rowData = worksheetData.data[i - 1].originalRowData; + const sCollapsed = (!rowData.expanded) ? '' : (rowData.expanded === true) ? '' : ` collapsed="1"`; + const sHidden = (rowData.parent && this.hasCollapsedParent(rowData)) ? ` hidden="1"` : ''; + const rowOutlineLevel = rowData.level ? rowData.level : 0; + const sOutlineLevel = rowOutlineLevel > 0 ? ` outlineLevel="${rowOutlineLevel}"` : ''; + maxOutlineLevel = maxOutlineLevel < rowOutlineLevel ? rowOutlineLevel : maxOutlineLevel; + + sheetData.push(``); + } for (let j = 0; j < worksheetData.columnCount; j++) { const cellData = WorksheetFile.getCellData(worksheetData, i, j); sheetData.push(cellData); From 2ae31f5cba3ef07c7ba9923068ba0568944ab690 Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Tue, 4 Dec 2018 17:25:15 +0200 Subject: [PATCH 58/77] fix(grid): set min width to header groups #3071 --- .../src/lib/grids/grid-base.component.ts | 30 ++++++++++++ .../lib/grids/grid-header-group.component.ts | 2 +- .../lib/grids/grid/column-resizing.spec.ts | 49 ++++++++++++++++++- .../src/lib/grids/grid/grid.component.html | 4 +- .../grids/tree-grid/tree-grid.component.html | 4 +- 5 files changed, 83 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index f653723438a..40364e7240d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -2377,6 +2377,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } } + /** + * Returns the `IgxGridHeaderGroupComponent`'s minimum allloed width. + * Used internally for restricting header group component width. + * The values below depend on the header cell default right/left padding values. + * @memberof IgxGridBaseComponent + */ + get defaultHeaderGroupMinWidth(): number { + if (this.isCosy()) { + return 32; + } else if (this.isCompact()) { + return 24; + } else { + return 48; + } + } + /** * Returns the maximum width of the container for the pinned `IgxColumnComponent`s. * ```typescript @@ -2461,6 +2477,20 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements return this._unpinnedColumns.filter((col) => !col.hidden); // .sort((col1, col2) => col1.index - col2.index); } + /** + * Returns the `width` to be set on `IgxGridHeaderGroupComponent`. + * @memberof IgxGridBaseComponent + */ + public getHeaderGroupWidth(column: IgxColumnComponent): string { + + const minWidth = this.defaultHeaderGroupMinWidth; + if (parseInt(column.width, 10) < this.defaultHeaderGroupMinWidth) { + return minWidth.toString(); + } + + return column.width + } + /** * Returns the `IgxColumnComponent` by field name. * ```typescript diff --git a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts index bd9981d6058..77508828ce5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts @@ -70,7 +70,7 @@ export class IgxGridHeaderGroupComponent implements DoCheck { @HostBinding('style.min-width') @HostBinding('style.flex-basis') get width() { - return this.column.width; + return this.grid.getHeaderGroupWidth(this.column); } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 2d4d7020863..e9fa79385b1 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -28,7 +28,8 @@ describe('IgxGrid - Deferred Column Resizing', () => { GridFeaturesComponent, LargePinnedColGridComponent, NullColumnsComponent, - MultiColumnHeadersComponent + MultiColumnHeadersComponent, + ColGridComponent ], imports: [ FormsModule, @@ -719,6 +720,31 @@ describe('IgxGrid - Deferred Column Resizing', () => { fixture.detectChanges(); expect(column.width).toEqual('111px'); })); + + fit('should size headers correctly when column width is below the allowed minimum.', fakeAsync(() => { + const fixture = TestBed.createComponent(ColGridComponent); + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + + const headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); + const headerGroups = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS)); + const filteringCells = fixture.debugElement.queryAll(By.css('igx-grid-filtering-cell')); + + expect(headers[0].nativeElement.getBoundingClientRect().width).toBe(49); + expect(headers[1].nativeElement.getBoundingClientRect().width).toBe(50); + expect(headers[2].nativeElement.getBoundingClientRect().width).toBe(49); + + expect(filteringCells[0].nativeElement.getBoundingClientRect().width).toBe(49); + expect(filteringCells[1].nativeElement.getBoundingClientRect().width).toBe(50); + expect(filteringCells[2].nativeElement.getBoundingClientRect().width).toBe(49); + + expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(48); + expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50); + expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48); + + + })); }); @Component({ @@ -827,3 +853,24 @@ export class NullColumnsComponent implements OnInit { this.data = SampleTestData.contactInfoData(); } } + + +@Component({ + template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``, + ` + + + + + ` + ) +}) +export class ColGridComponent implements OnInit { + data = []; + + @ViewChild(IgxGridComponent) public grid: IgxGridComponent; + + ngOnInit() { + this.data = SampleTestData.generateProductData(10); + } +} diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 6a3ae954eaf..84fe25293bb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -54,12 +54,12 @@ - + - +
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index fc113af79b7..643102c070d 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -31,12 +31,12 @@ - + - +
From 4c1710b3267d9f624ad7186b2e64ea6cc95eed48 Mon Sep 17 00:00:00 2001 From: Stefana Andreeva Date: Tue, 4 Dec 2018 17:39:27 +0200 Subject: [PATCH 59/77] chore(*): remove forgotten f from spec file #3071 --- .../igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index e9fa79385b1..0d24a2fd34a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -721,7 +721,7 @@ describe('IgxGrid - Deferred Column Resizing', () => { expect(column.width).toEqual('111px'); })); - fit('should size headers correctly when column width is below the allowed minimum.', fakeAsync(() => { + it('should size headers correctly when column width is below the allowed minimum.', fakeAsync(() => { const fixture = TestBed.createComponent(ColGridComponent); fixture.detectChanges(); tick(); From 07d85dd6d8d60af9705ced6dbb071acc3f43d0d6 Mon Sep 17 00:00:00 2001 From: Borislav Kulov Date: Tue, 4 Dec 2018 18:14:21 +0200 Subject: [PATCH 60/77] chore(*): Update contributing document with localization (3026) --- .github/CONTRIBUTING.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 6e968033432..88c4a8f7c4c 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -75,6 +75,29 @@ Example status workflows: 1. `status: pending-localization` this status tells that there are changes in the localization strings that need to be translated. When you make such changes, put this status badge without removing the other applicable ones and assign a person to do the translations. 2. `status: localized` this status is for issues that were with a pending translation status and have already been localized. Place this status label once these translation changes have been included in the current pull request, or the changes are already pulled with a different pull request. +## Localization - applicable to components' string resources +There are several ways to localize components' string resources: + +1. Using custom resource strings: + 1.1. Localize a given instance of component - each component which supports localization has input property `resourceStrings`. Setting a newly instantiated object to this property will localize only that given component's instance. + 1.2. Localize all resources for a component type - each component which supports localization has input property `resourceStrings`. To localize all instances of a given component in the application the following steps should be performed - get the value of the input property `resourceStrings` of the component to be localized; do not create a new instance but replace the existing strings within the object. By default all components of a given type in an application share one instance of the resource strings. Replacing a value in that instance affects all components of that type in the application. + 1.3. Localize all resources for all components - use global method `getCurrentResourceStrings` to get an object containing current resource strings for all components. To provide localized resources just pass an object of type `IResourceStrings` to the global method `changei18n`. + +2. Using NuGet package: +We've created new repository which will hold the resource strings for languages different than English: +https://github.com/IgniteUI/igniteui-angular-i18n +A NuGet package should be published each time we release new version of IgniteUI for Angular. Its version should correspond to the version of the igniteui-angular NuGet package. +One could localize an application by importing the corresponding localized resource strings from the localization package (`igniteui-angular-i18n`) and use the methods described in the previous bullet to localize the whole application or part of it. +Example: +Inside app.module you can perform: +_import { IgxResouceStringsJA } from ‘igniteui-angular-i18n’;_ +And then: +_Changei18n(IgxResouceStringsJA);_ + +###Resource strings keys naming convention +Each key in the `IResourceStrings` (and `IGridResourceStrings`, `ITimePickerResourceStrings`, etc.) is prefixed with components' selector and followed by the resource string key. Having components' selectors as prefixes allows us to have same resource strings keys for more than one component. +Example: _igx_grid_groupByArea_message_. + # Commit message conventions When committing a message you need to follow this template convention: `(): ` From eeeaec7a599cb8bfce2ee40371ea0e3055050380 Mon Sep 17 00:00:00 2001 From: Borislav Kulov Date: Tue, 4 Dec 2018 18:14:21 +0200 Subject: [PATCH 61/77] chore(*): Update contributing document with localization (3026) --- .github/CONTRIBUTING.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 6e968033432..88c4a8f7c4c 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -75,6 +75,29 @@ Example status workflows: 1. `status: pending-localization` this status tells that there are changes in the localization strings that need to be translated. When you make such changes, put this status badge without removing the other applicable ones and assign a person to do the translations. 2. `status: localized` this status is for issues that were with a pending translation status and have already been localized. Place this status label once these translation changes have been included in the current pull request, or the changes are already pulled with a different pull request. +## Localization - applicable to components' string resources +There are several ways to localize components' string resources: + +1. Using custom resource strings: + 1.1. Localize a given instance of component - each component which supports localization has input property `resourceStrings`. Setting a newly instantiated object to this property will localize only that given component's instance. + 1.2. Localize all resources for a component type - each component which supports localization has input property `resourceStrings`. To localize all instances of a given component in the application the following steps should be performed - get the value of the input property `resourceStrings` of the component to be localized; do not create a new instance but replace the existing strings within the object. By default all components of a given type in an application share one instance of the resource strings. Replacing a value in that instance affects all components of that type in the application. + 1.3. Localize all resources for all components - use global method `getCurrentResourceStrings` to get an object containing current resource strings for all components. To provide localized resources just pass an object of type `IResourceStrings` to the global method `changei18n`. + +2. Using NuGet package: +We've created new repository which will hold the resource strings for languages different than English: +https://github.com/IgniteUI/igniteui-angular-i18n +A NuGet package should be published each time we release new version of IgniteUI for Angular. Its version should correspond to the version of the igniteui-angular NuGet package. +One could localize an application by importing the corresponding localized resource strings from the localization package (`igniteui-angular-i18n`) and use the methods described in the previous bullet to localize the whole application or part of it. +Example: +Inside app.module you can perform: +_import { IgxResouceStringsJA } from ‘igniteui-angular-i18n’;_ +And then: +_Changei18n(IgxResouceStringsJA);_ + +###Resource strings keys naming convention +Each key in the `IResourceStrings` (and `IGridResourceStrings`, `ITimePickerResourceStrings`, etc.) is prefixed with components' selector and followed by the resource string key. Having components' selectors as prefixes allows us to have same resource strings keys for more than one component. +Example: _igx_grid_groupByArea_message_. + # Commit message conventions When committing a message you need to follow this template convention: `(): ` From 31d28597e744d36636cd0f6d2848d90d50afb2ba Mon Sep 17 00:00:00 2001 From: Borislav Kulov Date: Tue, 4 Dec 2018 18:37:04 +0200 Subject: [PATCH 62/77] chore(*): Replace NuGet with npm (#2517) --- .github/CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 88c4a8f7c4c..37876749657 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -83,10 +83,10 @@ There are several ways to localize components' string resources: 1.2. Localize all resources for a component type - each component which supports localization has input property `resourceStrings`. To localize all instances of a given component in the application the following steps should be performed - get the value of the input property `resourceStrings` of the component to be localized; do not create a new instance but replace the existing strings within the object. By default all components of a given type in an application share one instance of the resource strings. Replacing a value in that instance affects all components of that type in the application. 1.3. Localize all resources for all components - use global method `getCurrentResourceStrings` to get an object containing current resource strings for all components. To provide localized resources just pass an object of type `IResourceStrings` to the global method `changei18n`. -2. Using NuGet package: +2. Using npm package: We've created new repository which will hold the resource strings for languages different than English: https://github.com/IgniteUI/igniteui-angular-i18n -A NuGet package should be published each time we release new version of IgniteUI for Angular. Its version should correspond to the version of the igniteui-angular NuGet package. +A npm package should be published each time we release new version of IgniteUI for Angular. Its version should correspond to the version of the igniteui-angular npm package. One could localize an application by importing the corresponding localized resource strings from the localization package (`igniteui-angular-i18n`) and use the methods described in the previous bullet to localize the whole application or part of it. Example: Inside app.module you can perform: From 9ca8b28fcf010a3785a289c3eb2f0e74522db7a4 Mon Sep 17 00:00:00 2001 From: Borislav Kulov Date: Tue, 4 Dec 2018 18:37:04 +0200 Subject: [PATCH 63/77] chore(*): Replace NuGet with npm (#2517) --- .github/CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 88c4a8f7c4c..37876749657 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -83,10 +83,10 @@ There are several ways to localize components' string resources: 1.2. Localize all resources for a component type - each component which supports localization has input property `resourceStrings`. To localize all instances of a given component in the application the following steps should be performed - get the value of the input property `resourceStrings` of the component to be localized; do not create a new instance but replace the existing strings within the object. By default all components of a given type in an application share one instance of the resource strings. Replacing a value in that instance affects all components of that type in the application. 1.3. Localize all resources for all components - use global method `getCurrentResourceStrings` to get an object containing current resource strings for all components. To provide localized resources just pass an object of type `IResourceStrings` to the global method `changei18n`. -2. Using NuGet package: +2. Using npm package: We've created new repository which will hold the resource strings for languages different than English: https://github.com/IgniteUI/igniteui-angular-i18n -A NuGet package should be published each time we release new version of IgniteUI for Angular. Its version should correspond to the version of the igniteui-angular NuGet package. +A npm package should be published each time we release new version of IgniteUI for Angular. Its version should correspond to the version of the igniteui-angular npm package. One could localize an application by importing the corresponding localized resource strings from the localization package (`igniteui-angular-i18n`) and use the methods described in the previous bullet to localize the whole application or part of it. Example: Inside app.module you can perform: From d9be12ff52245603b037ef46b717d3b1fca00750 Mon Sep 17 00:00:00 2001 From: Radko Kolev Date: Wed, 5 Dec 2018 10:24:01 +0200 Subject: [PATCH 64/77] fix(toolbar): moving toolbar info to 7.1.0 #2983 --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e53f143ad3e..e2fd80ddd8e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ All notable changes for each version of this project will be documented in this ### Features - **New component** `IgxBannerComponent`: - Allows the developer to easily display a highly templateable message that requires minimal user interaction (1-2 actions) to be dismissed. Read up more information about the IgxBannerComponent in the official [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html) or the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/banner/README.md) +- `igxGrid` + - Added a new `igxToolbarCustomContent` directive which can be used to mark an `ng-template` which provides a custom content for the IgxGrid's toolbar ([#2983](https://github.com/IgniteUI/igniteui-angular/issues/2983)) - `IgxIconModule`: - **Breaking change** `igxIconService` is now provided in root (providedIn: 'root') and `IgxIconModule.forRoot()` method is deprecated. - **Breaking change** `glyphName` property of the `igxIconComponent` is deprecated. @@ -82,14 +84,12 @@ All notable changes for each version of this project will be documented in this ## 6.2.1 - ### Features - `igxGrid`, `igxChip`: Add display density DI token to igxGrid and igxChip ([#2804](https://github.com/IgniteUI/igniteui-angular/issues/2804)) - `igxGrid` - Quick filter auto close ([#2979](https://github.com/IgniteUI/igniteui-angular/issues/2979)) - Group By: Added title to chip in Group By area ([#3035](https://github.com/IgniteUI/igniteui-angular/issues/3035)) - Improve UX for boolean and date columns, ([#3092](https://github.com/IgniteUI/igniteui-angular/issues/3092)) - - Added a new `igxToolbarCustomContent` directive which can be used to mark an `ng-template` which provides a custom content for the IgxGrid's toolbar ([#2983](https://github.com/IgniteUI/igniteui-angular/issues/2983)) - `igxCombo`: - Added a new input property - `displayDensity`. It allows configuring the `displayDensity` of the combo's `value` and `search` inputs. (PR [#3007](https://github.com/IgniteUI/igniteui-angular/pull/3007)) - `igxDropDown` From 6a5849b3d55538073bd591c119beccd1272a067f Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Fri, 30 Nov 2018 17:06:08 +0200 Subject: [PATCH 65/77] docs(expansion-panel): add comments to public props/methods, add README, #3217 --- .../src/lib/expansion-panel/README.md | 101 +++++++++++++++ .../expansion-panel-body.component.ts | 53 +++++++- .../expansion-panel-header.component.ts | 101 ++++++++++++++- .../expansion-panel.component.ts | 120 +++++++++++++++++- 4 files changed, 369 insertions(+), 6 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/expansion-panel/README.md diff --git a/projects/igniteui-angular/src/lib/expansion-panel/README.md b/projects/igniteui-angular/src/lib/expansion-panel/README.md new file mode 100644 index 00000000000..706e9b92490 --- /dev/null +++ b/projects/igniteui-angular/src/lib/expansion-panel/README.md @@ -0,0 +1,101 @@ +# IgxExpansionPanel + + +**IgxExpansionPanel** is a light and highly templateable component that allows you to dynamically display content. + +A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/expansion_panel.html) + +# Usage + +```html + + + + Title + + + Description + + + +

Lengthier and more detailed description. Only visible when the panel is expanded

+ + +``` + +## igx-expansion-panel-header +The header of the `igx-expansion-panel` is **always** visible - this is the part of the component which handles user interaction. + +### igx-expansion-panel-title +The `title` part of the header is **always** visible and will always be placed in the beginning of the header (after the icon, depending on settings) +The title should be used to describe the content of the panel's body. + +### igx-expansion-panel-description +The `description` part of the header is **always** visible and will always be placed in the middle of the header (after the title). +The description can be used to provide a very short and concise explanation, further expanding upon the title, on the content of the panel's body. + +## igx-panel-body +The `igx-expansion-panel-body` contains all of the content in the `igx-expansion-panel` which should not be initially visible. The `body` is **sometimes** visible - only when the expansion panel is **not** `collapsed` + +# API Summary +The following tables summarize the **igx-expansion-panel**, **igx-expansion-panel-header** and **igx-expansion-panel-body** inputs, outputs and methods. + +## IgxExpansionPanelComponent + +### Inputs +The following inputs are available in the **igx-expansion-panel** component: + +| Name | Type | Description | +| :--- | :--- | :--- | +| `animationSettings` | `AnimationSettings` | Specifies the settings for the open and close animations of the panel | +| `id` | `string` | The id of the panel's host component | +| `collapsed` | `boolean` | Whether the component is collapsed (body is hidden) or not | + +### Outputs +The following outputs are available in the **igx-expansion-panel** component: + +| Name | Cancelable | Description | Parameters +| :--- | :--- | :--- | :--- | +| `onCollapsed` | `false` | Emitted when the panel is collapsed | `{ event: Event, panel: IgxExpansionPanelComponent }` | +| `onExpanded` | `false` | Emitted when the panel is expanded | `{ event: Event, panel: IgxExpansionPanelComponent }` | + + +### Methods +The following methods are available in the **igx-expansion-panel** component: + +| Name | Signature | Description | +| :--- | :--- | :--- | +| `collapse` | `(event?: Event ): void` | Collapses the panel | +| `expand` | `(event?: Event ): void` | Expands the panel | +| `toggle` | `(event?: Event ): void` | Toggles the panel (calls `collapse(event)` or `expand(event)` depending on `collapsed`) | + + +## IgxExpansionPanelHeaderComponent +### Inputs +The following inputs are available in the **igx-expansion-panel-header** component: + +| Name | Type | Description | +| :--- | :--- | :--- | +| `id` | `string` | The id of the panel header | +| `lv` | `string` | The `aria-level` attribute of the header | +| `role` | `string` | The `role` attribute of the header | +| `iconPosition` | `string` | The position of the expand/collapse icon of the header | +| `disabled` | `boolean` | Gets/sets whether the panel header is disabled (blocking user interaction) or not | + + +### Outputs +The following outputs are available in the **igx-expansion-panel-header** component: + +| Name | Cancelable | Description | Parameters +| :--- | :--- | :--- | :--- | +| `onInteraction` | `false` | Emitted when a user interacts with the header host | `{ event: Event, panel: IgxExpansionPanelComponent }` | + +## IgxExpansionPanelBodyComponent +### Inputs +The following inputs are available in the **igx-expansion-panel-body** component: + +| Name | Type | Description | +| :--- | :--- | :--- | +| `labelledBy` | `string` | The `aria-labelledby` attribute of the panel body | +| `label` | `string` | The `aria-label` attribute of the panel body | +| `role` | `string` | The `role` attribute of the panel body | diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts index b9a56e6bfea..6bac6aafed9 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts @@ -13,28 +13,79 @@ export class IgxExpansionPanelBodyComponent implements OnInit { @Inject(IGX_EXPANSION_PANEL_COMPONENT) public panel: IgxExpansionPanelBase, public element: ElementRef, public cdr: ChangeDetectorRef) { } + /** + * @hidden + */ @HostBinding('class.igx-expansion-panel__body') public cssClass = `igx-expansion-panel__body`; - public _title = ''; + /** + * Gets the `aria-label` attribute of the panel body + * Defaults to the panel id with '-region' in the end; + * Get + * ```typescript + * const currentLabel = this.panel.body.label; + * ``` + */ @Input() @HostBinding('attr.aria-label') public get label(): string { return this._label || this.panel.id + '-region'; } + /** + * Sets the `aria-label` attribute of the panel body + * ```typescript + * this.panel.body.label = 'my-custom-label'; + * ``` + * ```html + * + * ``` + */ public set label(val: string) { this._label = val; } + /** + * Gets the `aria-labelledby` attribute of the panel body + * Defaults to the panel header id; + * Get + * ```typescript + * const currentLabel = this.panel.body.labelledBy; + * ``` + */ @Input() @HostBinding('attr.aria-labelledby') public get labelledBy(): string { return this._labelledBy; } + /** + * Sets the `aria-labelledby` attribute of the panel body + * ```typescript + * this.panel.body.labelledBy = 'my-custom-id'; + * ``` + * ```html + * + * ``` + */ public set labelledBy(val: string) { this._labelledBy = val; } + /** + * Gets/sets the `role` attribute of the panel body + * Default is 'region'; + * Get + * ```typescript + * const currentRole = this.panel.body.role; + * ``` + * Set + * ```typescript + * this.panel.body.role = 'content'; + * ``` + * ```html + * + * ``` + */ @Input() @HostBinding('attr.role') public role = 'region'; diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts index b29dcc76c19..589fb791794 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts @@ -31,44 +31,137 @@ export enum ICON_POSITION { export class IgxExpansionPanelHeaderComponent { // properties section private _iconTemplate = false; + /** + * Sets/gets the `id` of the expansion panel header. + * ```typescript + * let panelHeaderId = this.panel.header.id; + * ``` + * @memberof IgxExpansionPanelComponent + */ public id = ''; + /** + * @hidden + */ @ContentChild(IgxExpansionPanelIconDirective) public set iconTemplate(val: any) { this._iconTemplate = val; } + /** + * @hidden + */ public get iconTemplate(): any { return this._iconTemplate; } + /** + * Gets/sets the `aria-level` attribute of the header + * Get + * ```typescript + * const currentAriaLevel = this.panel.header.lv; + * ``` + * Set + * ```typescript + * this.panel.header.lv = '5'; + * ``` + * ```html + * + * ``` + */ @HostBinding('attr.aria-level') @Input() public lv = '3'; + /** + * Gets/sets the `role` attribute of the header + * Get + * ```typescript + * const currentRole = this.panel.header.role; + * ``` + * Set + * ```typescript + * this.panel.header.role = '5'; + * ``` + * ```html + * + * ``` + */ @HostBinding('attr.role') @Input() public role = 'heading'; + /** + * @hidden + */ public get controls (): string { return this.panel.id; } + /** + * Gets/sets the position of the expansion-panel-header expand/collapse icon + * Accepts `left`, `right` or `none` + * ```typescript + * const currentIconPosition = this.panel.header.iconPosition; + * ``` + * Set + * ```typescript + * this.panel.header.iconPosition = 'left'; + * ``` + * ```html + * + * ``` + */ @Input() public iconPosition: ICON_POSITION = ICON_POSITION.LEFT; + /** + * Emitted whenever a user interacts with the header host + * ```typescript + * handleInteraction(event: IExpansionPanelEventArgs) { + * ... + * } + * ``` + * ```html + * + * ... + * + * ``` + */ @Output() public onInteraction = new EventEmitter(); + /** + * @hidden + */ @HostBinding('class.igx-expansion-panel__header') public cssClass = 'igx-expansion-panel__header'; - + /** + * @hidden + */ @HostBinding('class.igx-expansion-panel__header--expanded') public get isExpanded () { return !this.panel.collapsed; } + /** + * Gets/sets the whether the header is disabled + * When disabled, the header will not handle user events and will stop their propagation + * + * ```typescript + * const isDisabled = this.panel.header.disabled; + * ``` + * Set + * ```typescript + * this.panel.header.disabled = true; + * ``` + * ```html + * + * ... + * + * ``` + */ @Input() @HostBinding('class.igx-expansion-panel--disabled') public disabled = false; @@ -78,6 +171,9 @@ export class IgxExpansionPanelHeaderComponent { this.id = `${this.panel.id}-header`; } + /** + * @hidden + */ @HostListener('keydown.Enter', ['$event']) @HostListener('keydown.Space', ['$event']) @HostListener('keydown.Spacebar', ['$event']) @@ -92,6 +188,9 @@ export class IgxExpansionPanelHeaderComponent { evt.preventDefault(); } + /** + * @hidden + */ public get iconPositionClass(): string { switch (this.iconPosition) { case (ICON_POSITION.LEFT): diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts index 70851cab0e0..d07e60d11e9 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts @@ -9,11 +9,11 @@ import { ContentChild, forwardRef, } from '@angular/core'; -import { AnimationBuilder, AnimationReferenceMetadata, useAnimation } from '@angular/animations'; +import { AnimationBuilder, AnimationReferenceMetadata, useAnimation, AnimationAnimateRefMetadata } from '@angular/animations'; import { growVerOut, growVerIn } from '../animations/main'; import { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component'; import { IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component'; -import { IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase } from './expansion-panel.common'; +import { IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase, IExpansionPanelEventArgs } from './expansion-panel.common'; let NEXT_ID = 0; @@ -28,6 +28,37 @@ export interface AnimationSettings { }) export class IgxExpansionPanelComponent implements IgxExpansionPanelBase { + /** + * Sets/gets the animation settings of the expansion panel component + * Open and Close animation should be passed + * + * Get + * ```typescript + * const currentAnimations = this.panel.animationSettings; + * ``` + * Set + * ```typescript + * import { slideInLeft, slideOutRight } from 'igniteui-angular'; + * ... + * this.panel.animationsSettings = { + * openAnimation: slideInLeft, + * closeAnimation: slideOutRight + * }; + * ``` + * or via template + * ```typescript + * import { slideInLeft, slideOutRight } from 'igniteui-angular'; + * ... + * myCustomAnimationObject = { + * openAnimation: slideInLeft, + * closeAnimation: slideOutRight + * }; + * ```html + * + * ... + * + * ``` + */ @Input() public animationSettings: AnimationSettings = { openAnimation: growVerIn, @@ -49,26 +80,77 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase { @Input() public id = `igx-expansion-panel-${NEXT_ID++}`; + /** + * @hidden + */ @HostBinding('class.igx-expansion-panel') public cssClass = 'igx-expansion-panel'; + /** + * Gets/sets whether the component is collapsed (its content is hidden) + * Get + * ```typescript + * const myPanelState: boolean = this.panel.collapsed; + * ``` + * Set + * ```html + * this.panel.collapsed = true; + * ``` + */ @Input() public collapsed = true; + /** + * Emitted when the expansion panel finishes collapsing + * ```typescript + * handleCollapsed(event: { + * panel: IgxExpansionPanelComponent, + * event: Event + * }) + * ``` + * ```html + * + * ... + * + * ``` + */ @Output() - public onCollapsed = new EventEmitter(); + public onCollapsed = new EventEmitter(); + /** + * Emitted when the expansion panel finishes expanding + * ```typescript + * handleExpanded(event: { + * panel: IgxExpansionPanelComponent, + * event: Event + * }) + * ``` + * ```html + * + * ... + * + * ``` + */ @Output() - public onExpanded = new EventEmitter(); + public onExpanded = new EventEmitter(); + /** + * @hidden + */ public get headerId() { return this.header ? `${this.id}-header` : ''; } constructor(private cdr: ChangeDetectorRef, private builder: AnimationBuilder) { } + /** + * @hidden + */ @ContentChild(forwardRef(() => IgxExpansionPanelBodyComponent), { read: forwardRef(() => IgxExpansionPanelBodyComponent) }) public body: IgxExpansionPanelBodyComponent; + /** + * @hidden + */ @ContentChild(forwardRef(() => IgxExpansionPanelHeaderComponent), { read: forwardRef(() => IgxExpansionPanelHeaderComponent) }) public header: IgxExpansionPanelHeaderComponent; @@ -104,6 +186,16 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase { closeAnimationPlayer.play(); } + /** + * Collapses the panel + * + * ```html + * + * ... + * + * + * ``` + */ collapse(evt?: Event) { this.playCloseAnimation( () => { @@ -113,6 +205,16 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase { ); } + /** + * Expands the panel + * + * ```html + * + * ... + * + * + * ``` + */ expand(evt?: Event) { this.collapsed = false; this.cdr.detectChanges(); @@ -123,6 +225,16 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase { ); } + /** + * Toggles the panel + * + * ```html + * + * ... + * + * + * ``` + */ toggle(evt?: Event) { if (this.collapsed) { this.open(evt); From 357ae8968a3a17e0d32e41ee51260405dff28814 Mon Sep 17 00:00:00 2001 From: gedinakova Date: Wed, 5 Dec 2018 12:38:01 +0200 Subject: [PATCH 66/77] fix(TreeGridExport): #2982 Fixed getCellData() method. --- .../igniteui-angular/src/lib/services/excel/excel-files.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-files.ts b/projects/igniteui-angular/src/lib/services/excel/excel-files.ts index b82b1d36199..8c643591fb7 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-files.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-files.ts @@ -147,9 +147,8 @@ export class WorksheetFile implements IExcelFile { const columnHeader = worksheetData.keys[column]; const rowData = worksheetData.data[row - 1].rowData; - const actualData = rowData.data ? rowData.data : rowData; - const cellValue = worksheetData.isSpecialData ? actualData : actualData[columnHeader]; + const cellValue = worksheetData.isSpecialData ? rowData : rowData[columnHeader]; if (cellValue === undefined || cellValue === null) { return ``; From c6bbcd7cb58c39546e4b2fe4b73de60051482bd7 Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Wed, 5 Dec 2018 15:33:00 +0200 Subject: [PATCH 67/77] chore(*): fix lint errors #3071 --- projects/igniteui-angular/src/lib/grids/grid-base.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 366f0fb1172..9b66aba732f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -2490,7 +2490,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements return minWidth.toString(); } - return column.width + return column.width; } /** From 582dd9ac1f5bdb2bfd1cdf4a488e8ade6b7af882 Mon Sep 17 00:00:00 2001 From: gedinakova Date: Wed, 5 Dec 2018 17:06:45 +0200 Subject: [PATCH 68/77] fix(TreeGridExport): #2982 Addressed Diyan's comments. --- .../lib/services/csv/csv-exporter-grid.spec.ts | 7 ++----- .../src/lib/services/csv/csv-exporter.spec.ts | 3 --- .../exporter-common/base-export-service.ts | 18 +++++++----------- 3 files changed, 9 insertions(+), 19 deletions(-) diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts index bcce848d7b7..e84b8b60545 100644 --- a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts @@ -2,27 +2,25 @@ import { async, TestBed } from '@angular/core/testing'; import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { IgxGridModule } from '../../grids/grid'; import { IgxGridComponent } from '../../grids/grid/grid.component'; -import { FileContentData } from '../excel/test-data.service.spec'; import { IColumnExportingEventArgs, IRowExportingEventArgs } from '../exporter-common/base-export-service'; import { ExportUtilities } from '../exporter-common/export-utilities'; import { TestMethods } from '../exporter-common/test-methods.spec'; import { IgxCsvExporterService } from './csv-exporter'; import { CsvFileTypes, IgxCsvExporterOptions } from './csv-exporter-options'; import { CSVWrapper } from './csv-verification-wrapper.spec'; -import { IgxStringFilteringOperand, IgxTreeGridComponent, IgxNumberFilteringOperand } from '../../../public_api'; import { IgxTreeGridPrimaryForeignKeyComponent } from '../../test-utils/tree-grid-components.spec'; -import { IgxTreeGridModule } from '../../grids/tree-grid'; +import { IgxTreeGridModule, IgxTreeGridComponent } from '../../grids/tree-grid'; import { ReorderedColumnsComponent, GridIDNameJobTitleComponent } from '../../test-utils/grid-samples.spec'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { first } from 'rxjs/operators'; import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; +import { IgxStringFilteringOperand, IgxNumberFilteringOperand } from '../../data-operations/filtering-condition'; import { configureTestSuite } from '../../test-utils/configure-suite'; describe('CSV Grid Exporter', () => { configureTestSuite(); let exporter: IgxCsvExporterService; - let actualData: FileContentData; let options: IgxCsvExporterOptions; const data = SampleTestData.personJobData(); @@ -40,7 +38,6 @@ describe('CSV Grid Exporter', () => { beforeEach(async(() => { exporter = new IgxCsvExporterService(); - actualData = new FileContentData(); options = new IgxCsvExporterOptions('CsvGridExport', CsvFileTypes.CSV); // Spy the saveBlobToFile method so the files are not really created diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-exporter.spec.ts b/projects/igniteui-angular/src/lib/services/csv/csv-exporter.spec.ts index 04b2ab5879b..7f46dd5f11c 100644 --- a/projects/igniteui-angular/src/lib/services/csv/csv-exporter.spec.ts +++ b/projects/igniteui-angular/src/lib/services/csv/csv-exporter.spec.ts @@ -1,4 +1,3 @@ -import { FileContentData } from '../excel/test-data.service.spec'; import { ExportUtilities } from '../exporter-common/export-utilities'; import { IgxCsvExporterService } from './csv-exporter'; import { CsvFileTypes, IgxCsvExporterOptions } from './csv-exporter-options'; @@ -11,12 +10,10 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; describe('CSV exporter', () => { configureTestSuite(); let exporter: IgxCsvExporterService; - let actualData: FileContentData; const fileTypes = [ CsvFileTypes.CSV, CsvFileTypes.TSV, CsvFileTypes.TAB ]; beforeEach(() => { exporter = new IgxCsvExporterService(); - actualData = new FileContentData(); // Spy the saveBlobToFile method so the files are not really created spyOn(ExportUtilities as any, 'saveBlobToFile'); diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts index fbfa1d02c7e..42b22eb17f9 100644 --- a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts +++ b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts @@ -192,11 +192,11 @@ export abstract class IgxBaseExporter { } private prepareData(grid: any, options: IgxExporterOptionsBase): any[] { - let _rootRecords = grid.rootRecords; - this._isTreeGrid = _rootRecords !== undefined; + let rootRecords = grid.rootRecords; + this._isTreeGrid = rootRecords !== undefined; if (this._isTreeGrid) { - this.prepareHierarchicalData(_rootRecords); + this.prepareHierarchicalData(rootRecords); } let data = this._isTreeGrid ? this.flatRecords : grid.data; @@ -211,8 +211,8 @@ export abstract class IgxBaseExporter { if (this._isTreeGrid) { this.flatRecords = []; - _rootRecords = DataUtil.treeGridFilter(_rootRecords, filteringState); - this.prepareHierarchicalData(_rootRecords); + rootRecords = DataUtil.treeGridFilter(rootRecords, filteringState); + this.prepareHierarchicalData(rootRecords); data = this.flatRecords; } else { data = DataUtil.filter(data, filteringState); @@ -222,16 +222,12 @@ export abstract class IgxBaseExporter { if (grid.sortingExpressions && grid.sortingExpressions.length > 0 && !options.ignoreSorting) { - const sortingState = { - expressions: grid.sortingExpressions - }; - this._sort = cloneValue(grid.sortingExpressions[0]); if (this._isTreeGrid) { this.flatRecords = []; - _rootRecords = DataUtil.treeGridSort(_rootRecords, grid.sortingExpressions); - this.prepareHierarchicalData(_rootRecords); + rootRecords = DataUtil.treeGridSort(rootRecords, grid.sortingExpressions); + this.prepareHierarchicalData(rootRecords); data = this.flatRecords; } else { data = DataUtil.sort(data, grid.sortingExpressions); From 7b1143684f12c51b837b22403d253a51e287978c Mon Sep 17 00:00:00 2001 From: gedinakova Date: Wed, 5 Dec 2018 17:31:54 +0200 Subject: [PATCH 69/77] feat(TreeGridExport): #2982 Updated Changelog. --- CHANGELOG.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b321b405ba4..46d8e840421 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,9 @@ All notable changes for each version of this project will be documented in this - `IgxIconModule`: - **Breaking change** `igxIconService` is now provided in root (providedIn: 'root') and `IgxIconModule.forRoot()` method is deprecated. - **Breaking change** `glyphName` property of the `igxIconComponent` is deprecated. - +- `IgxTreeGrid`: + - You can now export the tree grid both to CSV and Excel. + - The hierarchy and the records' expanded states would be reflected in the exported Excel worksheet. ## 7.0.2 ### Features @@ -21,7 +23,7 @@ All notable changes for each version of this project will be documented in this - `igxNavbar`: - Added a new `igx-action-icon` directive that can be used to provide a custom template to be used instead of the default action icon on the left-most part of the navbar. (If `igx-action-icon` is provided, the default action icon will not be used.) - + ### Bug fixes - `igxGrid` @@ -43,7 +45,7 @@ All notable changes for each version of this project will be documented in this ## 6.2.3 - `igxGrid` - - `resourceStrings` property added, which allows changing/localizing strings for component. If a new instance is set, + - `resourceStrings` property added, which allows changing/localizing strings for component. If a new instance is set, the changes will be applied to the particular instance of the component: ```typescript this.grid.resourceStrings = { @@ -93,7 +95,7 @@ All notable changes for each version of this project will be documented in this - `igxDropDown` - Added a new property `maxHeight`, defining the max height of the drop down. ([#3001](https://github.com/IgniteUI/igniteui-angular/issues/3001)) - Added migrations for Sass theme properties changes in 6.2.0 ([#2994](https://github.com/IgniteUI/igniteui-angular/issues/2994)) -- Themes +- Themes - Introducing schemas for easier bootstrapping of component themes. - **Breaking change** removed $variant from `igx-checkbox-theme`, `igx-ripple-theme`, `igx-switch-theme`, `igx-input-group-theme`, `igx-slider-theme`, and `igx-tooltip-theme`. Use the `$schema` prop, now available on all component themes to change the look for a specific theme. See the [Theming](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/schemas.html) documentation to learn more. From 256ff237d79827d04385d407fa689799b2b4fb27 Mon Sep 17 00:00:00 2001 From: Stefana Andreeva Date: Thu, 6 Dec 2018 09:28:17 +0200 Subject: [PATCH 70/77] fix(grid): recalculate grid body size when changing allowFiltering dynamically (#3320) * fix(grid): recalculate grid body when changing allowFiltering dynamically #3290 * fix(grid): address review comments #3290 --- .../src/lib/grids/grid-base.component.ts | 13 ++++- .../src/lib/grids/grid/column-moving.spec.ts | 4 +- .../lib/grids/grid/grid-filtering-ui.spec.ts | 57 ++++++++++++++++++- 3 files changed, 70 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index a37eb5ede07..ec73ec7207b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -66,6 +66,7 @@ import { IGridResourceStrings } from '../core/i18n/grid-resources'; import { CurrentResourceStrings } from '../core/i18n/resources'; const MINIMUM_COLUMN_WIDTH = 136; +const FILTER_ROW_HEIGHT = 50; export const IgxGridTransaction = new InjectionToken('IgxGridTransaction'); @@ -745,8 +746,18 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements set allowFiltering(value) { if (this._allowFiltering !== value) { this._allowFiltering = value; + + this.calcHeight += value ? -FILTER_ROW_HEIGHT : FILTER_ROW_HEIGHT; + if (this._ngAfterViewInitPaassed) { + if (this.maxLevelHeaderDepth) { + this.theadRow.nativeElement.style.height = `${(this.maxLevelHeaderDepth + 1) * this.defaultRowHeight + + (value ? FILTER_ROW_HEIGHT : 0) + 1}px`; + } + } + this.filteringService.isFilterRowVisible = false; this.filteringService.filteredColumn = null; + this.filteringService.registerSVGIcons(); if (this.gridAPI.get(this.id)) { this.markForCheck(); @@ -3456,7 +3467,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements // TODO: Calculate based on grid density if (this.maxLevelHeaderDepth) { this.theadRow.nativeElement.style.height = `${(this.maxLevelHeaderDepth + 1) * this.defaultRowHeight + - (this.allowFiltering ? this._rowHeight : 0) + 1}px`; + (this.allowFiltering ? FILTER_ROW_HEIGHT : 0) + 1}px`; } if (!this._height) { diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts index 19f0747dfeb..4e56c15a625 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts @@ -156,9 +156,9 @@ describe('IgxGrid - Column Moving', () => { UIInteractions.simulatePointerEvent('pointerdown', header, 250, 65); await wait(); UIInteractions.simulatePointerEvent('pointermove', header, 244, 71); - await wait(); + await wait(50); UIInteractions.simulatePointerEvent('pointermove', header, 100, 71); - await wait(); + await wait(50); UIInteractions.simulatePointerEvent('pointerup', header, 100, 71); await wait(); fixture.detectChanges(); 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 index 0d7c4cc932b..d55fe031f7b 100644 --- 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 @@ -2690,6 +2690,48 @@ describe('IgxGrid - Filtering Row UI actions', () => { }); })); + it('Should size grid correctly if enable/disable filtering in run time.', fakeAsync(() => { + const fix = TestBed.createComponent(IgxGridFilteringComponent); + fix.detectChanges(); + + const grid = fix.componentInstance.grid; + const head = grid.nativeElement.querySelector('.igx-grid__thead'); + const body = grid.nativeElement.querySelector('.igx-grid__tbody'); + + expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top); + + fix.componentInstance.activateFiltering(false); + fix.detectChanges(); + + expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top); + + fix.componentInstance.activateFiltering(true); + fix.detectChanges(); + + expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top); + })); + + it('Should size grid correctly if enable/disable filtering in run time - MCH.', fakeAsync(() => { + const fix = TestBed.createComponent(IgxGridFilteringMCHComponent); + fix.detectChanges(); + + const grid = fix.componentInstance.grid; + const head = grid.nativeElement.querySelector('.igx-grid__thead'); + const body = grid.nativeElement.querySelector('.igx-grid__tbody'); + + expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top); + + fix.componentInstance.activateFiltering(false); + fix.detectChanges(); + + expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top); + + fix.componentInstance.activateFiltering(true); + fix.detectChanges(); + + expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top); + })); + it('Should remove FilterRow, when allowFiltering is set to false.', fakeAsync(() => { const fix = TestBed.createComponent(IgxGridFilteringComponent); const grid = fix.componentInstance.grid; @@ -2822,6 +2864,11 @@ export class IgxGridFilteringComponent { ]; @ViewChild(IgxGridComponent) public grid: IgxGridComponent; + + public activateFiltering(activate: boolean) { + this.grid.allowFiltering = activate; + this.grid.cdr.markForCheck(); + } } @Component({ @@ -2858,7 +2905,15 @@ export class IgxGridFilteringScrollComponent extends IgxGridFilteringComponent { ` }) -export class IgxGridFilteringMCHComponent extends IgxGridFilteringComponent { } +export class IgxGridFilteringMCHComponent extends IgxGridFilteringComponent { + + @ViewChild(IgxGridComponent) public grid: IgxGridComponent; + + public activateFiltering(activate: boolean) { + this.grid.allowFiltering = activate; + this.grid.cdr.markForCheck(); + } + } const expectedResults = []; From 909d0998f481191f15c7a5d734ca9ecd8ef36736 Mon Sep 17 00:00:00 2001 From: Viktor Slavov Date: Thu, 6 Dec 2018 09:44:22 +0200 Subject: [PATCH 71/77] Fix - Combo - Hide Search input when !filterable && !allowCustomValues - master (#3305) * fix(combo): hide combo search when filtering+custom values are disabled, #3252 * test(combo): fix failing tests, #3252 --- .../src/lib/combo/combo-dropdown.component.ts | 6 ++--- .../src/lib/combo/combo.common.ts | 1 + .../src/lib/combo/combo.component.html | 2 +- .../src/lib/combo/combo.component.spec.ts | 19 ++++++++++--- .../src/lib/combo/combo.component.ts | 27 +++++++++++++++++-- src/app/combo/combo.sample.html | 9 +++++-- src/app/combo/combo.sample.ts | 10 ++++--- 7 files changed, 60 insertions(+), 14 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index 2dc6bda8506..baa45aa46db 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -124,7 +124,7 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest */ navigatePrev() { if (this._focusedItem.index === 0 && this.verticalScrollContainer.state.startIndex === 0) { - this.combo.searchInput.nativeElement.focus(); + this.combo.focusSearchInput(false); } else { super.navigatePrev(); } @@ -309,7 +309,7 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest } private focusComboSearch() { - this.combo.searchInput.nativeElement.focus(); + this.combo.focusSearchInput(false); if (this.focusedItem) { this.focusedItem.isFocused = false; } @@ -349,7 +349,7 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest */ onToggleOpened() { this.combo.triggerCheck(); - this.combo.searchInput.nativeElement.focus(); + this.combo.focusSearchInput(true); this.onOpened.emit(); } diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 5cce9b27998..0ed778924ea 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -26,6 +26,7 @@ export interface IgxComboBase { onClosing: EventEmitter; onClosed: EventEmitter; + focusSearchInput(opening?: boolean): void; triggerCheck(); setSelectedItem(itemID: any, select?: boolean); isItemSelected(item: any): boolean; diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html index e2fc4d7a9fb..5c992625dff 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.html +++ b/projects/igniteui-angular/src/lib/combo/combo.component.html @@ -28,7 +28,7 @@ - + { expect(dropDownWidth).toEqual(comboWidth); expect(inputWidth).toEqual(comboWidth); })); + + it(`Should not render a search input if both 'allowCustomValues' and 'filterable' are false`, fakeAsync(() => { + const fixture = TestBed.createComponent(IgxComboSampleComponent); + fixture.detectChanges(); + const combo = fixture.componentInstance.combo; + combo.allowCustomValues = false; + combo.filterable = false; + expect(combo.displaySearchInput).toBeFalsy(); + combo.toggle(); + tick(); + fixture.detectChanges(); + expect(combo.searchInput).toBeFalsy(); + })); }); describe('Virtualization tests: ', () => { @@ -2880,7 +2893,7 @@ describe('igxCombo', () => { expect(combo.value).toEqual('My New Custom Item'); })); - it('Disable/Enable filtering at runtime', fakeAsync(() => { + it('Disable/Enable filtering at runtime', fakeAsync(() => { const fix = TestBed.createComponent(IgxComboInputTestComponent); fix.detectChanges(); const combo = fix.componentInstance.combo; @@ -2904,8 +2917,8 @@ describe('igxCombo', () => { tick(); fix.detectChanges(); expect(combo.dropdown.items.length).toBeGreaterThan(0); // All items are visible since filtering is disabled - combo.searchInput.nativeElement.value = 'Not-available item'; - combo.searchInput.nativeElement.dispatchEvent(new Event('input', {})); + combo.searchValue = 'Not-available item'; + combo.handleInputChange(); tick(); fix.detectChanges(); expect(combo.dropdown.items.length).toBeGreaterThan(0); // All items are visible since filtering is disabled diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index 6e973d9daa7..38954b03cd6 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -216,6 +216,13 @@ export class IgxComboComponent extends DisplayDensityBase implements AfterViewIn return this._comboInput; } + /** + * @hidden + */ + get displaySearchInput(): boolean { + return this.filterable || this.allowCustomValues; + } + /** * @hidden */ @@ -1263,12 +1270,28 @@ export class IgxComboComponent extends DisplayDensityBase implements AfterViewIn this.data = cloneArray(this.data); this.changeSelectedItem(addedItem, true); this.customValueFlag = false; - if (this.searchInput) { + this.searchInput.nativeElement.focus(); + this.handleInputChange(); + } + + /** + * @hidden; + */ + public focusSearchInput(opening?: boolean): void { + if (this.displaySearchInput && this.searchInput) { this.searchInput.nativeElement.focus(); + } else { + if (opening) { + this.dropdownContainer.nativeElement.focus(); + this.dropdown.onFocus(); + } else { + this.comboInput.nativeElement.focus(); + this.toggle(); + } } - this.handleInputChange(); } + /** * @hidden */ diff --git a/src/app/combo/combo.sample.html b/src/app/combo/combo.sample.html index 7a461c8b720..13ea53673cc 100644 --- a/src/app/combo/combo.sample.html +++ b/src/app/combo/combo.sample.html @@ -19,9 +19,9 @@
@@ -68,6 +68,11 @@

Display Density

+
+

Search Input

+ Filterable
+ Custom Values +
diff --git a/src/app/combo/combo.sample.ts b/src/app/combo/combo.sample.ts index ffe254313b8..8b19ea49b65 100644 --- a/src/app/combo/combo.sample.ts +++ b/src/app/combo/combo.sample.ts @@ -36,6 +36,8 @@ export class ComboSampleComponent implements OnInit { @ViewChild('comboTemplate', { read: IgxComboComponent }) public comboTemplate: IgxComboComponent; public toggleItemState = false; private initData: any[] = []; + public filterableFlag = false; + public customValuesFlag = false; public items: any[] = []; public valueKeyVar = 'field'; public currentDataType = ''; @@ -98,9 +100,11 @@ export class ComboSampleComponent implements OnInit { this.igxCombo.dropdown.onOpened.pipe(take(1)).subscribe(() => { console.log('Attaching'); - this.igxCombo.searchInput.nativeElement.onchange = (e) => { - console.log(e); - }; + if (this.igxCombo.searchInput) { + this.igxCombo.searchInput.nativeElement.onchange = (e) => { + console.log(e); + }; + } }); this.igxCombo.dropdown.onClosing.subscribe(() => { From 44dcdf651558c1250b7d93f02ae2206b8712b8d1 Mon Sep 17 00:00:00 2001 From: Radko Kolev Date: Thu, 6 Dec 2018 10:12:26 +0200 Subject: [PATCH 72/77] Fixing column chooser column updating - master (#3268) * Merge branch '7.0.x' into rkolev/fix-3085-7.0.x * Merge branch 'rkolev/fix-3085-7.0.x' of https://github.com/IgniteUI/igniteui-angular into rkolev/fix-3085-7.0.x --- .../igniteui-angular/src/lib/grids/grid-base.component.ts | 4 +++- .../src/lib/grids/grid-toolbar.component.html | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index ec73ec7207b..c15643e1fa1 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -3445,7 +3445,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements protected _derivePossibleWidth() { if (!this._columnWidthSetByUser) { this._columnWidth = this.getPossibleColumnWidth(); - this.initColumns(this.columnList, null); + this.columnList.forEach((column: IgxColumnComponent) => { + column.defaultWidth = this.columnWidth; + }); } } diff --git a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html index 5da59dd8ca6..095ab725cb5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html @@ -15,7 +15,7 @@ From d615d5f3f65dfaa52e67daf1dc56f8587f780a35 Mon Sep 17 00:00:00 2001 From: Nikolay Alipiev Date: Thu, 6 Dec 2018 15:24:20 +0200 Subject: [PATCH 73/77] Disable combo checkbox animations on scroll (#3304) * fix(igx-combo): disable checkbox animations on scroll #3243 * refactor(igx-combo): remove bind, move prop #3243 * refactor(igx-cobmo): refactor method signiture #3243 * refactor(igx-combo): revert prev move of property #3243 --- .../src/lib/combo/combo-dropdown.component.ts | 17 +++++++++++++++-- .../src/lib/combo/combo-item.component.ts | 1 + .../src/lib/combo/combo.component.html | 2 +- .../src/lib/drop-down/drop-down.base.ts | 6 ++++++ 4 files changed, 23 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index baa45aa46db..d600d1c3c5e 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectorRef, Component, ContentChild, - ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy + ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy, AfterViewInit } from '@angular/core'; import { takeUntil, take } from 'rxjs/operators'; import { IgxComboItemComponent } from './combo-item.component'; @@ -18,7 +18,7 @@ import { Navigate } from '../drop-down/drop-down.common'; templateUrl: '../drop-down/drop-down.component.html', providers: [{ provide: IgxDropDownBase, useExisting: IgxComboDropDownComponent }] }) -export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDestroy { +export class IgxComboDropDownComponent extends IgxDropDownBase implements AfterViewInit, OnDestroy { private _children: QueryList; private _scrollPosition = 0; private destroy$ = new Subject(); @@ -331,6 +331,14 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest } protected scrollToHiddenItem(newItem: any): void {} + + /** + * @hidden + */ + protected scrollHandler = () => { + this.disableTransitions = true; + } + /** * @hidden */ @@ -377,10 +385,15 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest this.verticalScrollContainer.getVerticalScroll().scrollTop = this._scrollPosition; } + public ngAfterViewInit() { + this.verticalScrollContainer.getVerticalScroll().addEventListener('scroll', this.scrollHandler); + } + /** *@hidden */ public ngOnDestroy(): void { + this.verticalScrollContainer.getVerticalScroll().removeEventListener('scroll', this.scrollHandler); this.destroy$.next(true); this.destroy$.complete(); } diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts index c6d0b574ac7..f1f29759527 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts @@ -54,6 +54,7 @@ export class IgxComboItemComponent extends IgxDropDownItemBase { */ @HostListener('click', ['$event']) clicked(event) { + this.dropDown.disableTransitions = false; if (this.disabled || this.isHeader) { const focusedItem = this.dropDown.focusedItem; if (focusedItem) { diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html index 5c992625dff..73c399b21c2 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.html +++ b/projects/igniteui-angular/src/lib/combo/combo.component.html @@ -43,7 +43,7 @@ (onChunkPreload)="dataLoading($event)" #virtualScrollContainer> - + diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index cefdd64da0a..4eae00d0b80 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -271,6 +271,12 @@ export abstract class IgxDropDownBase implements OnInit, IToggleView { return this.elementRef.nativeElement; } + /** + * @hidden + * @internal + */ + public disableTransitions = false; + /** * Get dropdown's html element of it scroll container */ From f435ed4acffb609d54f159c376a2c4abe104236b Mon Sep 17 00:00:00 2001 From: zdrawku Date: Thu, 6 Dec 2018 16:03:00 +0200 Subject: [PATCH 74/77] chore(build): Use 1.3.0 plugin version #3288 --- package-lock.json | 3487 +++++++++++++++++++++++---------------------- package.json | 2 +- 2 files changed, 1787 insertions(+), 1702 deletions(-) diff --git a/package-lock.json b/package-lock.json index 88fd4fcf31e..7e9b4c5b1e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,26 +5,26 @@ "requires": true, "dependencies": { "@angular-devkit/architect": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.10.5.tgz", - "integrity": "sha512-QMR09kIWD8YR9VgNQZXMGASV1UbAtygSdXokBj3njNtTif7xdb+bxo6VQBRqjpB8ZZGtUsE+LdJ4LeKafRnzRQ==", + "version": "0.10.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.10.7.tgz", + "integrity": "sha512-S49LSslNRxIflHzrIrEgK7mGQ7HzETr/FU0fyTbB0vubcmfzMoYTsgYdK7SUz583lovc+UvASoUAhPJI3e35ng==", "dev": true, "requires": { - "@angular-devkit/core": "7.0.5", + "@angular-devkit/core": "7.0.7", "rxjs": "6.3.3" } }, "@angular-devkit/build-angular": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.10.5.tgz", - "integrity": "sha512-I32FrMnYO5XU33ifOwhefO0tVCD+xHcTcAIprv5MFbSl3sGXI/CVsh9DGjWfyHlUaMlLUOpHQ+VcgeFGTcCVpA==", + "version": "0.10.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.10.7.tgz", + "integrity": "sha512-wjhlMWWkGSSkdwd9elKfeeEgyig/eZGyF2wY5kZmWPBdeK/GfdBLyO15qh4ppRYI2SjyRvzl0tWDOA2Y0hKL0w==", "dev": true, "requires": { - "@angular-devkit/architect": "0.10.5", - "@angular-devkit/build-optimizer": "0.10.5", - "@angular-devkit/build-webpack": "0.10.5", - "@angular-devkit/core": "7.0.5", - "@ngtools/webpack": "7.0.5", + "@angular-devkit/architect": "0.10.7", + "@angular-devkit/build-optimizer": "0.10.7", + "@angular-devkit/build-webpack": "0.10.7", + "@angular-devkit/core": "7.0.7", + "@ngtools/webpack": "7.0.7", "ajv": "6.5.3", "autoprefixer": "9.1.5", "circular-dependency-plugin": "5.0.2", @@ -69,35 +69,6 @@ "webpack-subresource-integrity": "1.1.0-rc.6" }, "dependencies": { - "clean-css": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", - "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==", - "dev": true, - "requires": { - "source-map": "~0.6.0" - } - }, - "glob": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz", - "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", - "dev": true, - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - }, - "semver": { - "version": "5.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz", - "integrity": "sha512-PqpAxfrEhlSUWge8dwIp4tZnQ25DIOthpiaHNIthsjEFQD6EvqUKUDM7L8O2rShkFccYo1VjJR0coWfNkCubRw==", - "dev": true - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -117,29 +88,21 @@ } }, "@angular-devkit/build-ng-packagr": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-ng-packagr/-/build-ng-packagr-0.10.5.tgz", - "integrity": "sha512-0ZOiQIUP2dxNNFIgeVnrRVpd2eTTEaOUrrY3oKPIgv4r0PZ2IKZTs3cIC2xE73d/rLXknIevPEe8fw0dgJ2rrg==", + "version": "0.10.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-ng-packagr/-/build-ng-packagr-0.10.7.tgz", + "integrity": "sha512-u2HYYOxfKizZ96YR+ZVOB7zuD8ByJh1AWYCOQCQKP5IXC/Ax55u8C+GA6NeKcVYKVvz1HKX/+JiEfSfJoQCJAw==", "dev": true, "requires": { - "@angular-devkit/architect": "0.10.5", - "@angular-devkit/core": "7.0.5", + "@angular-devkit/architect": "0.10.7", + "@angular-devkit/core": "7.0.7", "rxjs": "6.3.3", "semver": "5.5.1" - }, - "dependencies": { - "semver": { - "version": "5.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz", - "integrity": "sha512-PqpAxfrEhlSUWge8dwIp4tZnQ25DIOthpiaHNIthsjEFQD6EvqUKUDM7L8O2rShkFccYo1VjJR0coWfNkCubRw==", - "dev": true - } } }, "@angular-devkit/build-optimizer": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.10.5.tgz", - "integrity": "sha512-jhiD/ct7ngzNjT0yNUTT4TUjRzH9ZXdMm3Z4wbTFtKhXfr3bZgvLGKEoq0pIGlnlWq7lrGb8Doue4xcbRKTgmw==", + "version": "0.10.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.10.7.tgz", + "integrity": "sha512-Ztj2U21B8zRO2csQS8mLv/+WKPPLePzaqJDk53Ou2r2HV+kh9GzYvgu1UFeGf/RyEeJi+9KnJGG2wPaeNqDNxg==", "dev": true, "requires": { "loader-utils": "1.1.0", @@ -150,7 +113,7 @@ "dependencies": { "source-map": { "version": "0.5.6", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", + "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", "dev": true }, @@ -175,20 +138,20 @@ } }, "@angular-devkit/build-webpack": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.10.5.tgz", - "integrity": "sha512-RNhuz/1s6wGVau+dRcQAUbbrt1pexyW8nT/X+uzNd0r/zhOrAPj6ET51Xdkv2V6zaH8frXyPZK9JZL/JrDJsUA==", + "version": "0.10.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.10.7.tgz", + "integrity": "sha512-sUzgIhm5yWHvRo3GF6mc1J58PCuY5nJDF2vlE8Jhlwkq+/VbJ/NVfTDYRQCeqI1jLcdMaVrVQXnXAWc4KpFNig==", "dev": true, "requires": { - "@angular-devkit/architect": "0.10.5", - "@angular-devkit/core": "7.0.5", + "@angular-devkit/architect": "0.10.7", + "@angular-devkit/core": "7.0.7", "rxjs": "6.3.3" } }, "@angular-devkit/core": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-7.0.5.tgz", - "integrity": "sha512-QaORf9NCnwlHEuMs45Vb/KBf5eO2m+hIdNdIK0MnTaK9SrvhQhg0AFjo2KCPtOjI9eCcvsDz/O7W28CHJrG1iA==", + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-7.0.7.tgz", + "integrity": "sha512-M8tTT9r3nUtWI3YyiyynHIQn+lQQgeKkxVZ+rdxvyvgE3U9+wn0yep5HkFLQETTuJetu9ARRRD94sD2XL3F/3A==", "dev": true, "requires": { "ajv": "6.5.3", @@ -196,45 +159,52 @@ "fast-json-stable-stringify": "2.0.0", "rxjs": "6.3.3", "source-map": "0.7.3" - }, - "dependencies": { - "source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true - } } }, "@angular-devkit/schematics": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-7.0.5.tgz", - "integrity": "sha512-mWtPfBtObXXw5IWnMuOXBLn/Bv2lPxdmSqrCX9chTmxLXlFuv5e6HkzJfuF4BxjRUMaA+OW1qhnsHRJSI+p6sQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-7.1.1.tgz", + "integrity": "sha512-yjzTw8ZWMPg0Fc9VQCHNpUCAH7aiNxrUDs0IbhdC0CyKTBoqH+cx2xP4Z6ECf4uNwceLKJlE0l3ot42Ypnlziw==", "dev": true, "requires": { - "@angular-devkit/core": "7.0.5", + "@angular-devkit/core": "7.1.1", "rxjs": "6.3.3" + }, + "dependencies": { + "@angular-devkit/core": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-7.1.1.tgz", + "integrity": "sha512-rODqECpOiV6vX+L1qd63GLiF3SG+V1O+d8WYtnKPOxnsMM9yWpWmqmroHtXfisjucu/zwoqj8HoO/noJZCfynw==", + "dev": true, + "requires": { + "ajv": "6.5.3", + "chokidar": "2.0.4", + "fast-json-stable-stringify": "2.0.0", + "rxjs": "6.3.3", + "source-map": "0.7.3" + } + } } }, "@angular/animations": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-7.0.3.tgz", - "integrity": "sha512-jCRHlt+ghfSnP5a8HKr6R/Adc5Cq7i/mcYsn3V6M2QBpGFCVmy0ZWZa66QOhRaqler8u8EGi1PdoCCoGAZc4OA==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-7.1.1.tgz", + "integrity": "sha512-iTNxhPPraCZsE4rgM23lguT1kDV4mfYAr+Bsi5J0+v9ZJA+VaKvi6eRW8ZGrx4/rDz6hzTnBn1jgPppHFbsOcw==", "requires": { "tslib": "^1.9.0" } }, "@angular/cli": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.0.5.tgz", - "integrity": "sha512-qGFDuO9VQAq+pEPgIyeEdTVa8m2xNYOyvgwp0Z4E51BMBsvzEufT0Vj/U/HuD6a162EOBW1N+Aprpie+swe+MQ==", + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.0.7.tgz", + "integrity": "sha512-SV3CcHa2oxDKwhOvHqZtysVRRT9pkO04Kv0Z1HEhlgIwqHyIU201R9/mo1gYmBHTNGxowKdvsGLsHQNpsHmQJw==", "dev": true, "requires": { - "@angular-devkit/architect": "0.10.5", - "@angular-devkit/core": "7.0.5", - "@angular-devkit/schematics": "7.0.5", - "@schematics/angular": "7.0.5", - "@schematics/update": "0.10.5", + "@angular-devkit/architect": "0.10.7", + "@angular-devkit/core": "7.0.7", + "@angular-devkit/schematics": "7.0.7", + "@schematics/angular": "7.0.7", + "@schematics/update": "0.10.7", "inquirer": "6.2.0", "opn": "5.3.0", "rxjs": "6.3.3", @@ -242,34 +212,38 @@ "symbol-observable": "1.2.0" }, "dependencies": { - "semver": { - "version": "5.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz", - "integrity": "sha512-PqpAxfrEhlSUWge8dwIp4tZnQ25DIOthpiaHNIthsjEFQD6EvqUKUDM7L8O2rShkFccYo1VjJR0coWfNkCubRw==", - "dev": true + "@angular-devkit/schematics": { + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-7.0.7.tgz", + "integrity": "sha512-E6GHu4257PvymRjFDtpGc0ykdcIcpFIfXr73lq8qxo1SBkqH7Y1/C670elDg9nrCte8PhnhJVNiwNgNS/ZTAzQ==", + "dev": true, + "requires": { + "@angular-devkit/core": "7.0.7", + "rxjs": "6.3.3" + } } } }, "@angular/common": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-7.0.3.tgz", - "integrity": "sha512-aiuQh6+5kWFp34SYEtpnkAJWU3Qn17S/9LjWSZbgfiaYG6MyszepxqLZPBSBPTElxx2u5VoCPh97+TpKoDqx+g==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-7.1.1.tgz", + "integrity": "sha512-SngekFx9v39sjgi9pON0Wehxpu+NdUk7OEebw4Fa8dKqTgydTkuhmnNH+9WQe264asoeCt51oufPRjIqMLNohA==", "requires": { "tslib": "^1.9.0" } }, "@angular/compiler": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-7.0.3.tgz", - "integrity": "sha512-1eF4PzWej9eoEQhHwuMxujx9B4oSjP70vORIs9pgXF8O4nWDWTKtfPQyNCPxc8mY+Fwb0+nSOEvvA+Ou8Hnreg==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-7.1.1.tgz", + "integrity": "sha512-oJvBe8XZ+DXF/W/DxWBTbBcixJTuPeZWdkcZIGWhJoQP7K5GnGnj8ffP9Lp6Dh4TKv85awtC6OfIKhbHxa650Q==", "requires": { "tslib": "^1.9.0" } }, "@angular/compiler-cli": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-7.0.3.tgz", - "integrity": "sha512-8/SNgyce0Eqhfn8N/XkwSDSxTJryA+/EVLA68D2IopOSg/95u6GgYv3mVNNQnclSzC4g1FuK0zt4z0zRIWZ6JA==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-7.1.1.tgz", + "integrity": "sha512-4NXlkDhOEQgaP3Agigqw93CvXJvsfnXa0xiglq9e/wjL+6XbtM9WcDb5lfRQz41N9RSkO3pEHGvKMweKZGgogA==", "dev": true, "requires": { "canonical-path": "1.0.0", @@ -281,6 +255,7 @@ "reflect-metadata": "^0.1.2", "shelljs": "^0.8.1", "source-map": "^0.6.1", + "tslib": "^1.9.0", "yargs": "9.0.1" }, "dependencies": { @@ -349,28 +324,30 @@ "readdirp": "^2.0.0" } }, - "cliui": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", - "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", + "cross-spawn": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", + "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", "dev": true, "requires": { - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wrap-ansi": "^2.0.0" - }, - "dependencies": { - "string-width": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "dev": true, - "requires": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" - } - } + "lru-cache": "^4.0.1", + "shebang-command": "^1.2.0", + "which": "^1.2.9" + } + }, + "execa": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", + "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", + "dev": true, + "requires": { + "cross-spawn": "^5.0.1", + "get-stream": "^3.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" } }, "expand-brackets": { @@ -406,6 +383,12 @@ "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", "dev": true }, + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", + "dev": true + }, "is-glob": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", @@ -533,23 +516,15 @@ "requires": { "is-fullwidth-code-point": "^2.0.0", "strip-ansi": "^4.0.0" - }, - "dependencies": { - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true - }, - "strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", - "dev": true, - "requires": { - "ansi-regex": "^3.0.0" - } - } + } + }, + "strip-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", + "dev": true, + "requires": { + "ansi-regex": "^3.0.0" } }, "strip-bom": { @@ -603,55 +578,55 @@ } }, "@angular/core": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-7.0.3.tgz", - "integrity": "sha512-x/OYYykVsi2vrKlYQJ37I8HYAI/s/CtL3Sd9bl87F6AnqLWnnKIxQaofT/ShfAfdP44LQoN5BNp5j+sjs8K4Kg==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-7.1.1.tgz", + "integrity": "sha512-Osig5SRgDRQ+Hec/liN7nq/BCJieB+4/pqRh9rFbOXezb2ptgRZqdXOXN8P17i4AwPVf308Mh55V0niJ5Eu3Rw==", "requires": { "tslib": "^1.9.0" } }, "@angular/forms": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-7.0.3.tgz", - "integrity": "sha512-URbSpsNDQOg2NxmAt2FgeXIbEXvJS2yQwP02NLkHGqqCe38dpcifijj6HlUxeH14ZBkoqeTQjtSkXlMkgt22YA==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-7.1.1.tgz", + "integrity": "sha512-yCWuPjpu23Wc3XUw7v/ACNn/e249oT0bYlM8aaMQ1F5OwrmmC4NJC12Rpl9Ihza61RIHIKzNcHVEgzc7WhcSag==", "requires": { "tslib": "^1.9.0" } }, "@angular/http": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/@angular/http/-/http-7.0.3.tgz", - "integrity": "sha512-aL+z1/tbVY8oJw5v46rbMli5vBGDVyJvs95d1l2n3hWnwMTzS9AVetjcL3B3uruAYuXoh4QlSJ+ysBgdmV1+IA==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-7.1.1.tgz", + "integrity": "sha512-pRk+c/kz9aJ8te5xzCxlPLpFnwB0d/E9YkOo3/ydaXF9vZw13RTzk00YyzJ41PDzJf8oPDdXtueTQ+vtJ7Srtw==", "requires": { "tslib": "^1.9.0" } }, "@angular/language-service": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-7.0.3.tgz", - "integrity": "sha512-a8S/kTK/f7QaA7Nwm0KmfR+e7p4ZJ1keotfQD8r9Zq73+DD6yS+DSc+NBikmHui9mn9zY1C08C4SJQ5/5HtVhA==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-7.1.1.tgz", + "integrity": "sha512-X+5g20PMtNRGZIa3svMv4PLJdJehn4wqrS8nwOtzH5XkSn5vA3IxjsJVdSzAy2AN0/sKKJK5jmQorPtKO4saJg==", "dev": true }, "@angular/platform-browser": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-7.0.3.tgz", - "integrity": "sha512-OKDGce2dYw9Fw8agpcSNJA+ecMMnMQCi9xoPHNIp1pYdvte7mUXKUvUzR7chqQ7b83d7SzVeEhqAZYa4BUwFRA==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-7.1.1.tgz", + "integrity": "sha512-I6OPjecynGJSbPtzu0gvEgSmIR6X6/xEAhg4L9PycW1ryjzptTC9klWRTWIqsIBqMxhVnY44uKLeRNrDwMOwyA==", "requires": { "tslib": "^1.9.0" } }, "@angular/platform-browser-dynamic": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-7.0.3.tgz", - "integrity": "sha512-hrdBtlkKyq2CZRY6z2RWFTcGF4n4MirM7EEzByEjlgiXSU+c4qHYb0a8z30qdCF1D/DZ6Md7cRRH+1uR/rCqxQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-7.1.1.tgz", + "integrity": "sha512-ZIu48Vn4S6gjD7CMbGlKGaPQ8v9rYkWzlNYi4vTYzgiqKKNC3hqLsVESU3mSvr5oeQBxSIBidTdHSyafHFrA2w==", "requires": { "tslib": "^1.9.0" } }, "@angular/router": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-7.0.3.tgz", - "integrity": "sha512-885svORDpD9DkaMKjvGwn4g5bf0n3JR8os+gCNhzk0p4TPfpc+vmNo8SyY2jwdLMh2rQzrUQTDkn9SzzgiOfDQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-7.1.1.tgz", + "integrity": "sha512-jbnqEq/1iDBkeH8Vn13hauGPTzhwllWM+MLfmdNGTiMzGRx4pmkWa57seDOeBF/GNYBL9JjkWTCrkKFAc2FJKw==", "requires": { "tslib": "^1.9.0" } @@ -672,21 +647,21 @@ } }, "@babel/core": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.1.5.tgz", - "integrity": "sha512-vOyH020C56tQvte++i+rX2yokZcRfbv/kKcw+/BCRw/cK6dvsr47aCzm8oC1XHwMSEWbqrZKzZRLzLnq6SFMsg==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.2.0.tgz", + "integrity": "sha512-7pvAdC4B+iKjFFp9Ztj0QgBndJ++qaMeonT185wAqUnhipw8idm9Rv1UMyBuKtYjfl6ORNkgEgcsYLfHX/GpLw==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", - "@babel/generator": "^7.1.5", - "@babel/helpers": "^7.1.5", - "@babel/parser": "^7.1.5", + "@babel/generator": "^7.2.0", + "@babel/helpers": "^7.2.0", + "@babel/parser": "^7.2.0", "@babel/template": "^7.1.2", - "@babel/traverse": "^7.1.5", - "@babel/types": "^7.1.5", + "@babel/traverse": "^7.1.6", + "@babel/types": "^7.2.0", "convert-source-map": "^1.1.0", - "debug": "^3.1.0", - "json5": "^0.5.0", + "debug": "^4.1.0", + "json5": "^2.1.0", "lodash": "^4.17.10", "resolve": "^1.3.2", "semver": "^5.4.1", @@ -694,29 +669,59 @@ }, "dependencies": { "debug": { - "version": "3.2.6", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", - "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.0.tgz", + "integrity": "sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==", "dev": true, "requires": { "ms": "^2.1.1" } }, + "json5": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.0.tgz", + "integrity": "sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==", + "dev": true, + "requires": { + "minimist": "^1.2.0" + } + }, + "minimist": { + "version": "1.2.0", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true + }, "ms": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "dev": true + }, + "resolve": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz", + "integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==", + "dev": true, + "requires": { + "path-parse": "^1.0.5" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true } } }, "@babel/generator": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.1.5.tgz", - "integrity": "sha512-IO31r62xfMI+wBJVmgx0JR9ZOHty8HkoYpQAjRWUGG9vykBTlGHdArZ8zoFtpUu2gs17K7qTl/TtPpiSi6t+MA==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.2.0.tgz", + "integrity": "sha512-BA75MVfRlFQG2EZgFYIwyT1r6xSkwfP2bdkY/kLZusEYWiJs4xCowab/alaEaT0wSvmVuXGqiefeBlP+7V1yKg==", "dev": true, "requires": { - "@babel/types": "^7.1.5", + "@babel/types": "^7.2.0", "jsesc": "^2.5.1", "lodash": "^4.17.10", "source-map": "^0.5.0", @@ -728,6 +733,12 @@ "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", "dev": true + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true } } }, @@ -761,14 +772,14 @@ } }, "@babel/helpers": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.1.5.tgz", - "integrity": "sha512-2jkcdL02ywNBry1YNFAH/fViq4fXG0vdckHqeJk+75fpQ2OH+Az6076tX/M0835zA45E0Cqa6pV5Kiv9YOqjEg==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.2.0.tgz", + "integrity": "sha512-Fr07N+ea0dMcMN8nFpuK6dUIT7/ivt9yKQdEEnjVS83tG2pHwPi03gYmk/tyuwONnZ+sY+GFFPlWGgCtW1hF9A==", "dev": true, "requires": { "@babel/template": "^7.1.2", "@babel/traverse": "^7.1.5", - "@babel/types": "^7.1.5" + "@babel/types": "^7.2.0" } }, "@babel/highlight": { @@ -791,9 +802,9 @@ } }, "@babel/parser": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.1.5.tgz", - "integrity": "sha512-WXKf5K5HT6X0kKiCOezJZFljsfxKV1FpU8Tf1A7ZpGvyd/Q4hlrJm2EwoH2onaUq3O4tLDp+4gk0hHPsMyxmOg==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.2.0.tgz", + "integrity": "sha512-M74+GvK4hn1eejD9lZ7967qAwvqTZayQa3g10ag4s9uewgR7TKjeaT0YMyoq+gVfKYABiWZ4MQD701/t5e1Jhg==", "dev": true }, "@babel/template": { @@ -808,26 +819,26 @@ } }, "@babel/traverse": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.1.5.tgz", - "integrity": "sha512-eU6XokWypl0MVJo+MTSPUtlfPePkrqsF26O+l1qFGlCKWwmiYAYy2Sy44Qw8m2u/LbPCsxYt90rghmqhYMGpPA==", + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.1.6.tgz", + "integrity": "sha512-CXedit6GpISz3sC2k2FsGCUpOhUqKdyL0lqNrImQojagnUMXf8hex4AxYFRuMkNGcvJX5QAFGzB5WJQmSv8SiQ==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", - "@babel/generator": "^7.1.5", + "@babel/generator": "^7.1.6", "@babel/helper-function-name": "^7.1.0", "@babel/helper-split-export-declaration": "^7.0.0", - "@babel/parser": "^7.1.5", - "@babel/types": "^7.1.5", - "debug": "^3.1.0", + "@babel/parser": "^7.1.6", + "@babel/types": "^7.1.6", + "debug": "^4.1.0", "globals": "^11.1.0", "lodash": "^4.17.10" }, "dependencies": { "debug": { - "version": "3.2.6", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", - "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.0.tgz", + "integrity": "sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==", "dev": true, "requires": { "ms": "^2.1.1" @@ -848,9 +859,9 @@ } }, "@babel/types": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.1.5.tgz", - "integrity": "sha512-sJeqa/d9eM/bax8Ivg+fXF7FpN3E/ZmTrWbkk6r+g7biVYfALMnLin4dKijsaqEhpd2xvOGfQTkQkD31YCVV4A==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.2.0.tgz", + "integrity": "sha512-b4v7dyfApuKDvmPb+O488UlGuR1WbwMXFsO/cyqMrnfvRAChZKJAYeeglWTjUO1b9UghKKgepAQM5tsvBJca6A==", "dev": true, "requires": { "esutils": "^2.0.2", @@ -867,16 +878,24 @@ } }, "@gulp-sourcemaps/identity-map": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/identity-map/-/identity-map-1.0.1.tgz", - "integrity": "sha1-z6I7xYQPkQTOMqZedNt+epdLvuE=", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz", + "integrity": "sha512-ciiioYMLdo16ShmfHBXJBOFm3xPC4AuwO4xeRpFeHz7WK9PYsWCmigagG2XyzZpubK4a3qNKoUBDhbzHfa50LQ==", "dev": true, "requires": { "acorn": "^5.0.3", "css": "^2.2.1", "normalize-path": "^2.1.1", - "source-map": "^0.5.6", + "source-map": "^0.6.0", "through2": "^2.0.3" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } } }, "@gulp-sourcemaps/map-sources": { @@ -906,12 +925,12 @@ "dev": true }, "@ngtools/webpack": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-7.0.5.tgz", - "integrity": "sha512-KARXUp1SCg6TNGHaXOITiOfbGBJAd7gkdo0OKWF77ARqWb/pSN4rwFV4kxm0CB2kkmJ40JQCQG+TiltX+3Jnqg==", + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-7.0.7.tgz", + "integrity": "sha512-ukZv/8vhiVWLsEEWF1uena8GHRVUpwbPJ+8AupW25d2nNpwfsDtTIXKzTzRYeIQFFCnHJxr04lK18CVsn1lFaQ==", "dev": true, "requires": { - "@angular-devkit/core": "7.0.5", + "@angular-devkit/core": "7.0.7", "enhanced-resolve": "4.1.0", "rxjs": "6.3.3", "tree-kill": "1.2.0", @@ -943,35 +962,51 @@ "dev": true }, "@schematics/angular": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-7.0.5.tgz", - "integrity": "sha512-a8oWALnxs4+QwapeeBZfVBq1YEs5bdgmErBecCHioonhHidoBZX0GjJWQOH/TN8qA8HenNDf7b07WN7sRAVC1Q==", + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-7.0.7.tgz", + "integrity": "sha512-xDSMAtOdKNa5uqsEfbwBVHVCjpNSmIIcadi0Rki+5Nmobf5nnQWPly1/xj5aHzT6SKuV4BIMvsBG9UgI9Ss/Iw==", "dev": true, "requires": { - "@angular-devkit/core": "7.0.5", - "@angular-devkit/schematics": "7.0.5", + "@angular-devkit/core": "7.0.7", + "@angular-devkit/schematics": "7.0.7", "typescript": "3.1.6" + }, + "dependencies": { + "@angular-devkit/schematics": { + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-7.0.7.tgz", + "integrity": "sha512-E6GHu4257PvymRjFDtpGc0ykdcIcpFIfXr73lq8qxo1SBkqH7Y1/C670elDg9nrCte8PhnhJVNiwNgNS/ZTAzQ==", + "dev": true, + "requires": { + "@angular-devkit/core": "7.0.7", + "rxjs": "6.3.3" + } + } } }, "@schematics/update": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.10.5.tgz", - "integrity": "sha512-eFpDq+iI5DfCC3HGYtJtCZhk+rEoCAyrxnta3rQeZZbi7Lqg+aA4PZxFIpnI3omqxof+I0EdpwUquAaNcJR5fA==", + "version": "0.10.7", + "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.10.7.tgz", + "integrity": "sha512-E4txrdnIcNn1K0xFPmY4ywAnVj+hN2QB1wBijoAMezYTEjcKxW0g6thPfUv6qhIPcphxrCOqwl6cIELZjq2dtA==", "dev": true, "requires": { - "@angular-devkit/core": "7.0.5", - "@angular-devkit/schematics": "7.0.5", + "@angular-devkit/core": "7.0.7", + "@angular-devkit/schematics": "7.0.7", "npm-registry-client": "8.6.0", "rxjs": "6.3.3", "semver": "5.5.1", "semver-intersect": "1.4.0" }, "dependencies": { - "semver": { - "version": "5.5.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz", - "integrity": "sha512-PqpAxfrEhlSUWge8dwIp4tZnQ25DIOthpiaHNIthsjEFQD6EvqUKUDM7L8O2rShkFccYo1VjJR0coWfNkCubRw==", - "dev": true + "@angular-devkit/schematics": { + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-7.0.7.tgz", + "integrity": "sha512-E6GHu4257PvymRjFDtpGc0ykdcIcpFIfXr73lq8qxo1SBkqH7Y1/C670elDg9nrCte8PhnhJVNiwNgNS/ZTAzQ==", + "dev": true, + "requires": { + "@angular-devkit/core": "7.0.7", + "rxjs": "6.3.3" + } } } }, @@ -1025,9 +1060,9 @@ "dev": true }, "@types/jasmine": { - "version": "2.8.11", - "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.11.tgz", - "integrity": "sha512-ITPYT5rkV9S0BcucyBwXIUzqzSODVhvAzhOGV0bwZMuqWJeU0Kfdd6IJeJjGI8Gob+lDyAtKaWUfhG6QXJIPRg==", + "version": "2.8.12", + "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.12.tgz", + "integrity": "sha512-eE+xeiGBPgQsNcyg61JBqQS6NtxC+s2yfOikMCnc0Z4NqKujzmSahmtjLCKVQU/AyrTEQ76TOwQBnr8wGP2bmA==", "dev": true }, "@types/jasminewd2": { @@ -1040,9 +1075,9 @@ } }, "@types/lodash": { - "version": "4.14.118", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.118.tgz", - "integrity": "sha512-iiJbKLZbhSa6FYRip/9ZDX6HXhayXLDGY2Fqws9cOkEQ6XeKfaxB0sC541mowZJueYyMnVUmmG+al5/4fCDrgw==", + "version": "4.14.119", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.119.tgz", + "integrity": "sha512-Z3TNyBL8Vd/M9D9Ms2S3LmFq2sSMzahodD6rCS9V2N44HUMINb75jNkSuwAx7eo2ufqTdfOdtGQpNbieUjPQmw==", "dev": true }, "@types/marked": { @@ -1058,9 +1093,9 @@ "dev": true }, "@types/node": { - "version": "10.12.6", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.6.tgz", - "integrity": "sha512-+ZWB5Ec1iki99xQFzBlivlKxSZQ+fuUKBott8StBOnLN4dWbRHlgdg1XknpW6g0tweniN5DcOqA64CJyOUPSAw==", + "version": "10.12.12", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.12.tgz", + "integrity": "sha512-Pr+6JRiKkfsFvmU/LK68oBRCQeEg36TyAbPhc2xpez24OOZZCuoIhWGTd39VZy6nGafSbxzGouFPTFD/rR1A0A==", "dev": true }, "@types/q": { @@ -1297,9 +1332,9 @@ } }, "acorn": { - "version": "5.5.3", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz", - "integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==", + "version": "5.7.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz", + "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==", "dev": true }, "acorn-dynamic-import": { @@ -1342,20 +1377,6 @@ "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" - }, - "dependencies": { - "fast-deep-equal": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", - "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", - "dev": true - }, - "json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", - "dev": true - } } }, "ajv-errors": { @@ -1370,28 +1391,6 @@ "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=", "dev": true }, - "align-text": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", - "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", - "dev": true, - "requires": { - "kind-of": "^3.0.2", - "longest": "^1.0.1", - "repeat-string": "^1.5.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, "amdefine": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", @@ -1441,9 +1440,9 @@ } }, "ansi-colors": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.1.tgz", - "integrity": "sha512-Xt+zb6nqgvV9SWAVp0EG3lRsHcbq5DDgqjPPz6pwgtj6RKz65zGXMNa82oJfOSBA/to6GmRP7Dr+6o+kbApTzQ==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.2.tgz", + "integrity": "sha512-kJmcp4PrviBBEx95fC3dYRiC/QSN3EBd0GU1XoNEk/IuUa92rsB6o90zP3w5VAyNznR38Vkc9i8vk5zK6T7TxA==", "dev": true }, "ansi-cyan": { @@ -1614,15 +1613,15 @@ "dev": true }, "array-flatten": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.1.tgz", - "integrity": "sha1-Qmu52oQJDBg42BLIFQryCoMx4pY=", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz", + "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==", "dev": true }, "array-slice": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz", - "integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz", + "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==", "dev": true }, "array-union": { @@ -1665,10 +1664,13 @@ "dev": true }, "asn1": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz", - "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=", - "dev": true + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", + "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==", + "dev": true, + "requires": { + "safer-buffer": "~2.1.0" + } }, "asn1.js": { "version": "4.10.1", @@ -1719,6 +1721,12 @@ "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=", "dev": true }, + "astral-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz", + "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==", + "dev": true + }, "async": { "version": "1.5.2", "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz", @@ -1756,9 +1764,9 @@ "dev": true }, "atob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.1.tgz", - "integrity": "sha1-ri1acpR38onWDdf5amMUoi3Wwio=", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", + "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", "dev": true }, "autoprefixer": { @@ -1782,9 +1790,9 @@ "dev": true }, "aws4": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz", - "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", + "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==", "dev": true }, "axios": { @@ -1849,6 +1857,14 @@ "lodash": "^4.17.4", "source-map": "^0.5.7", "trim-right": "^1.0.1" + }, + "dependencies": { + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + } } }, "babel-messages": { @@ -1860,6 +1876,25 @@ "babel-runtime": "^6.22.0" } }, + "babel-polyfill": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.23.0.tgz", + "integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=", + "dev": true, + "requires": { + "babel-runtime": "^6.22.0", + "core-js": "^2.4.0", + "regenerator-runtime": "^0.10.0" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.10.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", + "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=", + "dev": true + } + } + }, "babel-runtime": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", @@ -2016,11 +2051,10 @@ "dev": true }, "bcrypt-pbkdf": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz", - "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", + "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=", "dev": true, - "optional": true, "requires": { "tweetnacl": "^0.14.3" } @@ -2128,15 +2162,6 @@ "multicast-dns-service-types": "^1.1.0" } }, - "boom": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz", - "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=", - "dev": true, - "requires": { - "hoek": "4.x.x" - } - }, "boxen": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz", @@ -2306,17 +2331,6 @@ "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", "dev": true }, - "cliui": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", - "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", - "dev": true, - "requires": { - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wrap-ansi": "^2.0.0" - } - }, "eventemitter3": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz", @@ -2402,12 +2416,6 @@ "integrity": "sha1-HPyyXBCpsrSDBT/zn138kjOQjP4=", "dev": true }, - "window-size": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.2.0.tgz", - "integrity": "sha1-tDFbtCFKPXBY6+7okuE/ok2YsHU=", - "dev": true - }, "y18n": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", @@ -2562,14 +2570,14 @@ } }, "browserslist": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.3.4.tgz", - "integrity": "sha512-u5iz+ijIMUlmV8blX82VGFrB9ecnUg5qEt55CMZ/YJEhha+d8qpBfOFuutJ6F/VKRXjZoD33b6uvarpPxcl3RA==", + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.3.5.tgz", + "integrity": "sha512-z9ZhGc3d9e/sJ9dIx5NFXkKoaiQTnrvrMsN3R1fGb1tkWWNSz12UewJn9TNxGo1l7J23h0MRaPmk7jfeTZYs1w==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30000899", - "electron-to-chromium": "^1.3.82", - "node-releases": "^1.0.1" + "caniuse-lite": "^1.0.30000912", + "electron-to-chromium": "^1.3.86", + "node-releases": "^1.0.5" } }, "browserstack": { @@ -2633,9 +2641,9 @@ "dev": true }, "buffer-from": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.0.0.tgz", - "integrity": "sha512-83apNb8KK0Se60UE1+4Ukbe3HbfELJ6UlI4ldtOGs7So4KD26orJM8hIY9lxdzP+UpItH1Yh/Y8GUvNFWFFRxA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", + "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", "dev": true }, "buffer-indexof": { @@ -2759,9 +2767,9 @@ } }, "camelcase": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", - "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz", + "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=", "dev": true }, "camelcase-keys": { @@ -2772,20 +2780,12 @@ "requires": { "camelcase": "^2.0.0", "map-obj": "^1.0.0" - }, - "dependencies": { - "camelcase": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz", - "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=", - "dev": true - } } }, "caniuse-lite": { - "version": "1.0.30000907", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000907.tgz", - "integrity": "sha512-No5sQ/OB2Nmka8MNOOM6nJx+Hxt6MQ6h7t7kgJFu9oTuwjykyKRSBP/+i/QAyFHxeHB+ddE0Da1CG5ihx9oehQ==", + "version": "1.0.30000916", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000916.tgz", + "integrity": "sha512-D6J9jloPm2MPkg0PXcODLMQAJKkeixKO9xhqTUMvtd44MtTYMyyDXPQ2Lk9IgBq5FH0frwiPa/N/w8ncQf7kIQ==", "dev": true }, "canonical-path": { @@ -2795,9 +2795,9 @@ "dev": true }, "capture-stack-trace": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz", - "integrity": "sha1-Sm+gc5nCa7pH8LJJa00PtAjFVQ0=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz", + "integrity": "sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==", "dev": true }, "caseless": { @@ -2847,43 +2847,15 @@ } } }, - "center-align": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", - "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=", - "dev": true, - "optional": true, - "requires": { - "align-text": "^0.1.3", - "lazy-cache": "^1.0.3" - } - }, "chalk": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.2.2.tgz", - "integrity": "sha512-LvixLAQ4MYhbf7hgL4o5PeK32gJKvVzDRiSNIApDofQvyhl8adgG2lJVXn4+ekQoK7HL9RF8lqxwerpe0x2pCw==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", "dev": true, "requires": { - "ansi-styles": "^3.1.0", + "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", - "supports-color": "^4.0.0" - }, - "dependencies": { - "has-flag": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz", - "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=", - "dev": true - }, - "supports-color": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz", - "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=", - "dev": true, - "requires": { - "has-flag": "^2.0.0" - } - } + "supports-color": "^5.3.0" } }, "character-entities": { @@ -2944,9 +2916,9 @@ "dev": true }, "chroma-js": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-1.3.7.tgz", - "integrity": "sha512-ARq0P94NObL8hdQbgc+E33X9OHiNzdHO7epe3nC/KgxNRxkQcFpzNqnGeFjvOY2GxfVhbia686NXD2jByb1o0g==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-1.4.1.tgz", + "integrity": "sha512-jTwQiT859RTFN/vIf7s+Vl/Z2LcMrvMv3WUFmd/4u76AdlFC0NTNgqEEFPcRiHmAswPsMiQEDZLM8vX8qXpZNQ==", "dev": true }, "chrome-trace-event": { @@ -2959,9 +2931,9 @@ } }, "ci-info": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.1.3.tgz", - "integrity": "sha512-SK/846h/Rcy8q9Z9CAwGBLfCJ6EkjJWdpelWDufQpqVDYq2Wnnv8zlSO6AMQap02jvhVruKKpEtQOufo3pFhLg==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz", + "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==", "dev": true }, "cipher-base": { @@ -3010,12 +2982,20 @@ } }, "clean-css": { - "version": "4.1.11", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz", - "integrity": "sha1-Ls3xRaujj1R0DybO/Q/z4D4SXWo=", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", + "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==", "dev": true, "requires": { - "source-map": "0.5.x" + "source-map": "~0.6.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } } }, "cli-boxes": { @@ -3040,30 +3020,20 @@ "dev": true }, "cliui": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", - "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", + "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", "dev": true, - "optional": true, "requires": { - "center-align": "^0.1.1", - "right-align": "^0.1.1", - "wordwrap": "0.0.2" - }, - "dependencies": { - "wordwrap": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", - "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=", - "dev": true, - "optional": true - } + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wrap-ansi": "^2.0.0" } }, "clone": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.1.tgz", - "integrity": "sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=", "dev": true }, "clone-buffer": { @@ -3109,6 +3079,38 @@ "inherits": "^2.0.1", "process-nextick-args": "^2.0.0", "readable-stream": "^2.3.5" + }, + "dependencies": { + "process-nextick-args": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", + "dev": true + }, + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + } } }, "co": { @@ -3137,6 +3139,12 @@ "sprintf-js": "^1.1.1" }, "dependencies": { + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + }, "sprintf-js": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.1.tgz", @@ -3162,12 +3170,12 @@ } }, "color-convert": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz", - "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", "dev": true, "requires": { - "color-name": "^1.1.1" + "color-name": "1.1.3" } }, "color-name": { @@ -3198,18 +3206,18 @@ } }, "combined-stream": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz", - "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz", + "integrity": "sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==", "dev": true, "requires": { "delayed-stream": "~1.0.0" } }, "commander": { - "version": "2.15.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz", - "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==", + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", + "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", "dev": true }, "commondir": { @@ -3249,14 +3257,6 @@ "dev": true, "requires": { "mime-db": ">= 1.36.0 < 2" - }, - "dependencies": { - "mime-db": { - "version": "1.37.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz", - "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==", - "dev": true - } } }, "compression": { @@ -3290,6 +3290,38 @@ "inherits": "^2.0.3", "readable-stream": "^2.2.2", "typedarray": "^0.0.6" + }, + "dependencies": { + "process-nextick-args": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", + "dev": true + }, + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + } } }, "concat-with-sourcemaps": { @@ -3415,10 +3447,13 @@ "dev": true }, "convert-source-map": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.5.1.tgz", - "integrity": "sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU=", - "dev": true + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz", + "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.1" + } }, "cookie": { "version": "0.3.1", @@ -3469,9 +3504,9 @@ } }, "core-js": { - "version": "2.5.7", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz", - "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==" + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.0.tgz", + "integrity": "sha512-kLRC6ncVpuEW/1kwrOXYX6KQASCVtrh1gQr/UiaVgFlf9WE5Vp+lNe5+h3LuMr5PAucWnnEXwH0nQHRH/gpGtw==" }, "core-util-is": { "version": "1.0.2", @@ -3580,26 +3615,6 @@ "which": "^1.2.9" } }, - "cryptiles": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz", - "integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=", - "dev": true, - "requires": { - "boom": "5.x.x" - }, - "dependencies": { - "boom": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz", - "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==", - "dev": true, - "requires": { - "hoek": "4.x.x" - } - } - } - }, "crypto-browserify": { "version": "3.12.0", "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz", @@ -3626,25 +3641,22 @@ "dev": true }, "css": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.3.tgz", - "integrity": "sha512-0W171WccAjQGGTKLhw4m2nnl0zPHUlTO/I8td4XzJgIB8Hg3ZZx71qT4G4eX8OVsSiaAKiUMy73E3nsbPlg2DQ==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", "dev": true, "requires": { - "inherits": "^2.0.1", - "source-map": "^0.1.38", - "source-map-resolve": "^0.5.1", + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", "urix": "^0.1.0" }, "dependencies": { "source-map": { - "version": "0.1.43", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz", - "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=", - "dev": true, - "requires": { - "amdefine": ">=0.0.4" - } + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true } } }, @@ -3773,13 +3785,19 @@ }, "dependencies": { "debug": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", - "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", + "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", "dev": true, "requires": { - "ms": "2.0.0" + "ms": "^2.1.1" } + }, + "ms": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", + "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", + "dev": true } } }, @@ -3812,9 +3830,9 @@ "dev": true }, "deep-extend": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz", - "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true }, "deep-is": { @@ -3831,36 +3849,6 @@ "requires": { "execa": "^0.10.0", "ip-regex": "^2.1.0" - }, - "dependencies": { - "cross-spawn": { - "version": "6.0.5", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", - "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", - "dev": true, - "requires": { - "nice-try": "^1.0.4", - "path-key": "^2.0.1", - "semver": "^5.5.0", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - } - }, - "execa": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz", - "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==", - "dev": true, - "requires": { - "cross-spawn": "^6.0.0", - "get-stream": "^3.0.0", - "is-stream": "^1.1.0", - "npm-run-path": "^2.0.0", - "p-finally": "^1.0.0", - "signal-exit": "^3.0.0", - "strip-eof": "^1.0.0" - } - } } }, "default-require-extensions": { @@ -4164,9 +4152,9 @@ "dev": true }, "domelementtype": { - "version": "1.3.0", - "resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz", - "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", + "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==", "dev": true }, "domhandler": { @@ -4223,12 +4211,6 @@ "isarray": "0.0.1", "string_decoder": "~0.10.x" } - }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", - "dev": true } } }, @@ -4239,9 +4221,9 @@ "dev": true }, "duplexify": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.6.0.tgz", - "integrity": "sha512-fO3Di4tBKJpYTFHAxTU00BcfWMY9w24r/x21a6rZRbsD/ToUgGxsMbiGRmB7uVAXeGKXD9MwiLZa5E97EVgIRQ==", + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.6.1.tgz", + "integrity": "sha512-vM58DwdnKmty+FSPzT14K9JXb90H+j5emaR4KYbr2KTIz00WHGbWOe5ghQTx233ZCLZtrGDALzKwcjEtSt35mA==", "dev": true, "requires": { "end-of-stream": "^1.0.0", @@ -4269,13 +4251,13 @@ } }, "ecc-jsbn": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz", - "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", + "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=", "dev": true, - "optional": true, "requires": { - "jsbn": "~0.1.0" + "jsbn": "~0.1.0", + "safer-buffer": "^2.1.0" } }, "ee-first": { @@ -4285,9 +4267,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.84", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.84.tgz", - "integrity": "sha512-IYhbzJYOopiTaNWMBp7RjbecUBsbnbDneOP86f3qvS0G0xfzwNSvMJpTrvi5/Y1gU7tg2NAgeg8a8rCYvW9Whw==", + "version": "1.3.88", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.88.tgz", + "integrity": "sha512-UPV4NuQMKeUh1S0OWRvwg0PI8ASHN9kBC8yDTk1ROXLC85W5GnhTRu/MZu3Teqx3JjlQYuckuHYXSUSgtb3J+A==", "dev": true }, "elliptic": { @@ -4317,6 +4299,15 @@ "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", "dev": true }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "dev": true, + "requires": { + "iconv-lite": "~0.4.13" + } + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -4354,13 +4345,24 @@ "requires": { "ms": "2.0.0" } + }, + "ws": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz", + "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==", + "dev": true, + "requires": { + "async-limiter": "~1.0.0", + "safe-buffer": "~5.1.0", + "ultron": "~1.1.0" + } } } }, "engine.io-client": { - "version": "3.2.1", - "resolved": "http://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz", - "integrity": "sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.3.1.tgz", + "integrity": "sha512-q66JBFuQcy7CSlfAz9L3jH+v7DTT3i6ZEadYcVj2pOs8/0uJHLxKX3WBkGTvULJMdz0tUCyJag0aKT/dpXL9BQ==", "dev": true, "requires": { "component-emitter": "1.2.1", @@ -4371,7 +4373,7 @@ "indexof": "0.0.1", "parseqs": "0.0.5", "parseuri": "0.0.5", - "ws": "~3.3.1", + "ws": "~6.1.0", "xmlhttprequest-ssl": "~1.5.4", "yeast": "0.1.2" }, @@ -4442,9 +4444,9 @@ } }, "es5-ext": { - "version": "0.10.42", - "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.42.tgz", - "integrity": "sha512-AJxO1rmPe1bDEfSR6TJ/FgMFYuTBhR5R57KW58iCkYACMyFbrkqVyzXSurYoScDGvgyMpk7uRF/lPUPPTmsRSA==", + "version": "0.10.46", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.46.tgz", + "integrity": "sha512-24XxRvJXNFwEMpJb3nOkiRJKRoupmjYmOPVlI65Qy2SrtxwOTB+g6ODjBKOtwEHbYrhWRty9xxOWLNdClT2djw==", "dev": true, "requires": { "es6-iterator": "~2.0.3", @@ -4470,10 +4472,9 @@ } }, "es6-promise": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz", - "integrity": "sha512-/NdNZVJg+uZgtm9eS3O6lrOLYmQag2DjdEXuPaHlZ6RuVqgqaVZfgYCepEIKsLqwdQArOPtC3XzRLqGGfT8KQQ==", - "dev": true + "version": "3.0.2", + "resolved": "http://registry.npmjs.org/es6-promise/-/es6-promise-3.0.2.tgz", + "integrity": "sha1-AQ1YWEI6XxGJeWZfRkhqlcbuK7Y=" }, "es6-promisify": { "version": "5.0.0", @@ -4482,6 +4483,14 @@ "dev": true, "requires": { "es6-promise": "^4.0.3" + }, + "dependencies": { + "es6-promise": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.5.tgz", + "integrity": "sha512-n6wvpdE43VFtJq+lUDYDBFUwV8TZbuGXLV4D6wKafg13ldznKsyEvatubnmUe31zcvelSzOHF+XbaT+Bl9ObDg==", + "dev": true + } } }, "es6-symbol": { @@ -4650,12 +4659,12 @@ } }, "execa": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", - "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz", + "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==", "dev": true, "requires": { - "cross-spawn": "^5.0.1", + "cross-spawn": "^6.0.0", "get-stream": "^3.0.0", "is-stream": "^1.1.0", "npm-run-path": "^2.0.0", @@ -4665,12 +4674,14 @@ }, "dependencies": { "cross-spawn": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", - "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", + "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", "dev": true, "requires": { - "lru-cache": "^4.0.1", + "nice-try": "^1.0.4", + "path-key": "^2.0.1", + "semver": "^5.5.0", "shebang-command": "^1.2.0", "which": "^1.2.9" } @@ -4703,6 +4714,12 @@ "braces": "^0.1.2" }, "dependencies": { + "array-slice": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz", + "integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=", + "dev": true + }, "array-unique": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz", @@ -4877,16 +4894,16 @@ "dependencies": { "array-flatten": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=", "dev": true } } }, "extend": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz", - "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", "dev": true }, "extend-shallow": { @@ -5004,20 +5021,21 @@ "dev": true }, "fancy-log": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.2.tgz", - "integrity": "sha1-9BEl49hPLn2JpD0G2VjI94vha+E=", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.3.tgz", + "integrity": "sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==", "dev": true, "requires": { "ansi-gray": "^0.1.1", "color-support": "^1.1.3", + "parse-node-version": "^1.0.0", "time-stamp": "^1.0.0" } }, "fast-deep-equal": { - "version": "1.1.0", - "resolved": "http://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", - "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", + "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", "dev": true }, "fast-glob": { @@ -5231,14 +5249,14 @@ "dev": true }, "flat-cache": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.2.tgz", - "integrity": "sha512-KByBY8c98sLUAGpnmjEdWTrtrLZRtZdwds+kAL/ciFXTCb7AZgqKsAnVnYFQj1hxepwO8JKN/8AsRWwLq+RK0A==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz", + "integrity": "sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==", "dev": true, "requires": { "circular-json": "^0.3.1", - "del": "^3.0.0", "graceful-fs": "^4.1.2", + "rimraf": "~2.6.2", "write": "^0.2.1" }, "dependencies": { @@ -5250,6 +5268,12 @@ } } }, + "flatted": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.0.tgz", + "integrity": "sha512-R+H8IZclI8AAkSBRQJLVOsxwAoHd6WC40b4QTNWIjzAa6BXOBfQcM587MXDTVPeYaopFNWHUFLx7eNmHDSxMWg==", + "dev": true + }, "flush-write-stream": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz", @@ -5261,9 +5285,9 @@ } }, "follow-redirects": { - "version": "1.5.9", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz", - "integrity": "sha512-Bh65EZI/RU8nx0wbYF9shkFZlqLP+6WT/5FnA3cE/djNSuKNHJEinGGZgu/cQEkeeb2GdFOgenAmn8qaqYke2w==", + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", "dev": true, "requires": { "debug": "=3.1.0" @@ -5302,13 +5326,13 @@ "dev": true }, "form-data": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz", - "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz", + "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==", "dev": true, "requires": { "asynckit": "^0.4.0", - "combined-stream": "1.0.6", + "combined-stream": "^1.0.6", "mime-types": "^2.1.12" } }, @@ -5361,17 +5385,6 @@ "graceful-fs": "^4.1.2", "jsonfile": "^3.0.0", "universalify": "^0.1.0" - }, - "dependencies": { - "jsonfile": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz", - "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=", - "dev": true, - "requires": { - "graceful-fs": "^4.1.6" - } - } } }, "fs-mkdirp-stream": { @@ -5443,14 +5456,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5465,20 +5476,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -5595,8 +5603,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -5608,7 +5615,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5623,7 +5629,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5735,8 +5740,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -5748,7 +5752,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -5870,7 +5873,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6019,9 +6021,9 @@ } }, "glob": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz", + "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", "dev": true, "requires": { "fs.realpath": "^1.0.0", @@ -6142,12 +6144,6 @@ "string_decoder": "~0.10.x" } }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", - "dev": true - }, "through2": { "version": "0.6.5", "resolved": "http://registry.npmjs.org/through2/-/through2-0.6.5.tgz", @@ -6367,9 +6363,9 @@ } }, "graceful-fs": { - "version": "4.1.11", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", - "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", + "version": "4.1.15", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz", + "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==", "dev": true }, "growl": { @@ -6488,29 +6484,6 @@ "postcss": "^7.0.2", "postcss-load-config": "^2.0.0", "vinyl-sourcemaps-apply": "^0.2.1" - }, - "dependencies": { - "ansi-colors": { - "version": "1.1.0", - "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", - "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==", - "dev": true, - "requires": { - "ansi-wrap": "^0.1.0" - } - }, - "plugin-error": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", - "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==", - "dev": true, - "requires": { - "ansi-colors": "^1.0.1", - "arr-diff": "^4.0.0", - "arr-union": "^3.1.0", - "extend-shallow": "^3.0.2" - } - } } }, "gulp-sass": { @@ -6529,44 +6502,12 @@ "vinyl-sourcemaps-apply": "^0.2.0" }, "dependencies": { - "ansi-colors": { - "version": "1.1.0", - "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", - "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==", - "dev": true, - "requires": { - "ansi-wrap": "^0.1.0" - } - }, "ansi-regex": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "dev": true }, - "chalk": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", - "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - } - }, - "plugin-error": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", - "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==", - "dev": true, - "requires": { - "ansi-colors": "^1.0.1", - "arr-diff": "^4.0.0", - "arr-union": "^3.1.0", - "extend-shallow": "^3.0.2" - } - }, "replace-ext": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz", @@ -6599,6 +6540,28 @@ "through2": "^2.0.3" }, "dependencies": { + "arr-diff": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-1.1.0.tgz", + "integrity": "sha1-aHwydYFjWI/vfeezb6vklesaOZo=", + "dev": true, + "requires": { + "arr-flatten": "^1.0.1", + "array-slice": "^0.2.3" + } + }, + "arr-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-2.1.0.tgz", + "integrity": "sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=", + "dev": true + }, + "array-slice": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz", + "integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=", + "dev": true + }, "async": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz", @@ -6608,17 +6571,21 @@ "lodash": "^4.17.10" } }, - "chalk": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", - "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "extend-shallow": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-1.1.4.tgz", + "integrity": "sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=", "dev": true, "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" + "kind-of": "^1.1.0" } }, + "kind-of": { + "version": "1.1.0", + "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", + "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=", + "dev": true + }, "lodash.template": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz", @@ -6637,6 +6604,19 @@ "requires": { "lodash._reinterpolate": "~3.0.0" } + }, + "plugin-error": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-0.1.2.tgz", + "integrity": "sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=", + "dev": true, + "requires": { + "ansi-cyan": "^0.1.1", + "ansi-red": "^0.1.1", + "arr-diff": "^1.0.1", + "arr-union": "^2.0.1", + "extend-shallow": "^1.1.2" + } } } }, @@ -6668,25 +6648,19 @@ } }, "gulp-typescript": { - "version": "5.0.0-alpha.3", - "resolved": "https://registry.npmjs.org/gulp-typescript/-/gulp-typescript-5.0.0-alpha.3.tgz", - "integrity": "sha512-6iSBjqBXAUqRsLUh/9XtlOnSzpPMbLrr5rqGj4UPLtGpDwFHW/fVTuRgv6LAWiKesLIUDDM0ourxvcpu2trecQ==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/gulp-typescript/-/gulp-typescript-5.0.0.tgz", + "integrity": "sha512-lMj2U+Ni6HyFaY2nr1sSQ6D014eHil5L1i52XWBaAQUR9UAUUp9btnm4yRBT2Jb8xhrwqmhMssZf/g2B7cinCA==", "dev": true, "requires": { - "ansi-colors": "^2.0.2", + "ansi-colors": "^3.0.5", "plugin-error": "^1.0.1", "source-map": "^0.7.3", - "through2": "^2.0.3", + "through2": "^3.0.0", "vinyl": "^2.1.0", "vinyl-fs": "^3.0.3" }, "dependencies": { - "ansi-colors": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-2.0.5.tgz", - "integrity": "sha512-yAdfUZ+c2wetVNIFsNRn44THW+Lty6S5TwMpUfLA/UaGhiXbBv/F8E60/1hMLd0cnF/CDoWH8vzVaI5bAcHCjw==", - "dev": true - }, "clone-stats": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz", @@ -6709,14 +6683,25 @@ "remove-trailing-separator": "^1.0.1", "to-absolute-glob": "^2.0.0", "unique-stream": "^2.0.2" + }, + "dependencies": { + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + } } }, - "is-valid-glob": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz", - "integrity": "sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=", - "dev": true - }, "ordered-read-streams": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-1.0.1.tgz", @@ -6726,28 +6711,11 @@ "readable-stream": "^2.0.1" } }, - "plugin-error": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", - "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==", - "dev": true, - "requires": { - "ansi-colors": "^1.0.1", - "arr-diff": "^4.0.0", - "arr-union": "^3.1.0", - "extend-shallow": "^3.0.2" - }, - "dependencies": { - "ansi-colors": { - "version": "1.1.0", - "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", - "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==", - "dev": true, - "requires": { - "ansi-wrap": "^0.1.0" - } - } - } + "process-nextick-args": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", + "dev": true }, "replace-ext": { "version": "1.0.0", @@ -6755,20 +6723,23 @@ "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=", "dev": true }, - "source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true + "string_decoder": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } }, - "to-absolute-glob": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz", - "integrity": "sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=", + "through2": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.0.tgz", + "integrity": "sha512-8B+sevlqP4OiCjonI1Zw03Sf8PuV1eRsYQgLad5eonILOdyeRsY27A/2Ze8IlvlMvq31OH+3fz/styI7Ya62yQ==", "dev": true, "requires": { - "is-absolute": "^1.0.0", - "is-negated-glob": "^1.0.0" + "readable-stream": "2 || 3", + "xtend": "~4.0.1" } }, "unique-stream": { @@ -6818,6 +6789,33 @@ "value-or-function": "^3.0.0", "vinyl": "^2.0.0", "vinyl-sourcemap": "^1.1.0" + }, + "dependencies": { + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "through2": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", + "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", + "dev": true, + "requires": { + "readable-stream": "~2.3.6", + "xtend": "~4.0.1" + } + } } } } @@ -6930,46 +6928,31 @@ "dev": true }, "handlebars": { - "version": "4.0.11", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.11.tgz", - "integrity": "sha1-Ywo13+ApS8KB7a5v/F0yn8eYLcw=", + "version": "4.0.12", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.12.tgz", + "integrity": "sha512-RhmTekP+FZL+XNhwS1Wf+bTTZpdLougwt5pcgA1tuz6Jcx0fpH/7z0qd71RKnZHBCxIRBHfBOnio4gViPemNzA==", "dev": true, "requires": { - "async": "^1.4.0", + "async": "^2.5.0", "optimist": "^0.6.1", - "source-map": "^0.4.4", - "uglify-js": "^2.6" + "source-map": "^0.6.1", + "uglify-js": "^3.1.4" }, "dependencies": { - "source-map": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", - "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", + "async": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz", + "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==", "dev": true, "requires": { - "amdefine": ">=0.0.4" + "lodash": "^4.17.10" } }, - "uglify-js": { - "version": "2.8.29", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz", - "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=", - "dev": true, - "optional": true, - "requires": { - "source-map": "~0.5.1", - "uglify-to-browserify": "~1.0.0", - "yargs": "~3.10.0" - }, - "dependencies": { - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true, - "optional": true - } - } + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true } } }, @@ -6980,25 +6963,25 @@ "dev": true }, "har-validator": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz", - "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz", + "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==", "dev": true, "requires": { - "ajv": "^5.1.0", + "ajv": "^6.5.5", "har-schema": "^2.0.0" }, "dependencies": { "ajv": { - "version": "5.5.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", - "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.6.1.tgz", + "integrity": "sha512-ZoJjft5B+EJBjUyu9C9Hc0OZyPZSSlOF+plzouTrg6UlA8f+e/n8NIgBFG/9tppJtpPWfthHakK7juJdNDODww==", "dev": true, "requires": { - "co": "^4.6.0", - "fast-deep-equal": "^1.0.0", + "fast-deep-equal": "^2.0.1", "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.3.0" + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" } } } @@ -7105,31 +7088,19 @@ } }, "hash.js": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.5.tgz", - "integrity": "sha512-eWI5HG9Np+eHV1KQhisXWwM+4EPPYe5dFX1UZZH7k/E3JzDEazVH+VGlZi6R94ZqImq+A3D1mCEtrFIfg/E7sA==", + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz", + "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==", "dev": true, "requires": { "inherits": "^2.0.3", "minimalistic-assert": "^1.0.1" } }, - "hawk": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz", - "integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==", - "dev": true, - "requires": { - "boom": "4.x.x", - "cryptiles": "3.x.x", - "hoek": "4.x.x", - "sntp": "2.x.x" - } - }, "he": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz", - "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, "highlight.js": { @@ -7149,12 +7120,6 @@ "minimalistic-crypto-utils": "^1.0.1" } }, - "hoek": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", - "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==", - "dev": true - }, "homedir-polyfill": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz", @@ -7189,18 +7154,18 @@ "dev": true }, "html-minifier": { - "version": "3.5.15", - "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.15.tgz", - "integrity": "sha512-OZa4rfb6tZOZ3Z8Xf0jKxXkiDcFWldQePGYFDcgKqES2sXeWaEv9y6QQvWUtX3ySI3feApQi5uCsHLINQ6NoAw==", + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.21.tgz", + "integrity": "sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==", "dev": true, "requires": { "camel-case": "3.0.x", - "clean-css": "4.1.x", - "commander": "2.15.x", - "he": "1.1.x", + "clean-css": "4.2.x", + "commander": "2.17.x", + "he": "1.2.x", "param-case": "2.1.x", "relateurl": "0.2.x", - "uglify-js": "3.3.x" + "uglify-js": "3.4.x" } }, "html-tags": { @@ -7233,6 +7198,15 @@ "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } + }, + "string_decoder": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.2.0.tgz", + "integrity": "sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } } } }, @@ -7716,12 +7690,12 @@ } }, "is-ci": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.1.0.tgz", - "integrity": "sha512-c7TnwxLePuqIlxHgr7xtxzycJPegNHFuIrBkwbf8hc58//+Op1CqFkyS+xnIMkwn9UsJIwc174BIjkyBmSpjKg==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz", + "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==", "dev": true, "requires": { - "ci-info": "^1.0.0" + "ci-info": "^1.5.0" } }, "is-data-descriptor": { @@ -7898,23 +7872,6 @@ "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=", "dev": true }, - "is-odd": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-odd/-/is-odd-2.0.0.tgz", - "integrity": "sha512-OTiixgpZAT1M4NHgS5IguFp/Vz2VI3U7Goh4/HA1adtwyLtSBrxYlcSYkhpAE07s4fKEcjrFxyvtQBND4vFQyQ==", - "dev": true, - "requires": { - "is-number": "^4.0.0" - }, - "dependencies": { - "is-number": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz", - "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==", - "dev": true - } - } - }, "is-path-cwd": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz", @@ -8033,9 +7990,9 @@ "dev": true }, "is-valid-glob": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-0.3.0.tgz", - "integrity": "sha1-1LVcafUYhvm2XHDWwmItN+KfSP4=", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz", + "integrity": "sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=", "dev": true }, "is-whitespace-character": { @@ -8135,12 +8092,6 @@ "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", "dev": true }, - "resolve": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", - "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=", - "dev": true - }, "supports-color": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", @@ -8181,12 +8132,6 @@ "lodash": "^4.17.10" } }, - "esprima": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", - "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", - "dev": true - }, "istanbul-lib-coverage": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz", @@ -8207,16 +8152,6 @@ "istanbul-lib-coverage": "^2.0.1", "semver": "^5.5.0" } - }, - "js-yaml": { - "version": "3.12.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz", - "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==", - "dev": true, - "requires": { - "argparse": "^1.0.7", - "esprima": "^4.0.0" - } } } }, @@ -8244,6 +8179,18 @@ "json-schema-traverse": "^0.3.0" } }, + "fast-deep-equal": { + "version": "1.1.0", + "resolved": "http://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", + "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=", + "dev": true + }, + "json-schema-traverse": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz", + "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=", + "dev": true + }, "schema-utils": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz", @@ -8399,9 +8346,9 @@ "dev": true }, "js-yaml": { - "version": "3.11.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.11.0.tgz", - "integrity": "sha512-saJstZWv7oNeOyBh3+Dx1qWzhW0+e6/8eDzo7p5rDFqxntSztloLtuKu+Ejhtq82jsilwOIZYsCz+lIjthg1Hw==", + "version": "3.12.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz", + "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==", "dev": true, "requires": { "argparse": "^1.0.7", @@ -8409,9 +8356,9 @@ }, "dependencies": { "esprima": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", - "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", "dev": true } } @@ -8420,8 +8367,7 @@ "version": "0.1.1", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", - "dev": true, - "optional": true + "dev": true }, "jsesc": { "version": "1.3.0", @@ -8442,9 +8388,9 @@ "dev": true }, "json-schema-traverse": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz", - "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", "dev": true }, "json-stable-stringify": { @@ -8475,9 +8421,9 @@ "dev": true }, "jsonfile": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", - "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz", + "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=", "dev": true, "requires": { "graceful-fs": "^4.1.6" @@ -8517,41 +8463,13 @@ "version": "2.3.0", "resolved": "http://registry.npmjs.org/core-js/-/core-js-2.3.0.tgz", "integrity": "sha1-+rg/uwstjchfpjbEudNMdUIMbWU=" - }, - "es6-promise": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.0.2.tgz", - "integrity": "sha1-AQ1YWEI6XxGJeWZfRkhqlcbuK7Y=" - }, - "process-nextick-args": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz", - "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=" - }, - "readable-stream": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz", - "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=", - "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.1", - "isarray": "~1.0.0", - "process-nextick-args": "~1.0.6", - "string_decoder": "~0.10.x", - "util-deprecate": "~1.0.1" - } - }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=" } } }, "karma": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/karma/-/karma-3.1.1.tgz", - "integrity": "sha512-NetT3wPCQMNB36uiL9LLyhrOt8SQwrEKt0xD3+KpTCfm0VxVyUJdPL5oTq2Ic5ouemgL/Iz4wqXEbF3zea9kQQ==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/karma/-/karma-3.1.3.tgz", + "integrity": "sha512-JU4FYUtFEGsLZd6ZJzLrivcPj0TkteBiIRDcXWFsltPMGgZMDtby/MIzNOzgyZv/9dahs9vHpSxerC/ZfeX9Qw==", "dev": true, "requires": { "bluebird": "^3.3.0", @@ -8564,11 +8482,12 @@ "di": "^0.0.1", "dom-serialize": "^2.2.0", "expand-braces": "^0.1.1", + "flatted": "^2.0.0", "glob": "^7.1.1", "graceful-fs": "^4.1.2", "http-proxy": "^1.13.0", "isbinaryfile": "^3.0.0", - "lodash": "^4.17.4", + "lodash": "^4.17.5", "log4js": "^3.0.0", "mime": "^2.3.1", "minimatch": "^3.0.2", @@ -8580,13 +8499,13 @@ "socket.io": "2.1.1", "source-map": "^0.6.1", "tmp": "0.0.33", - "useragent": "2.2.1" + "useragent": "2.3.0" }, "dependencies": { "mime": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/mime/-/mime-2.3.1.tgz", - "integrity": "sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.0.tgz", + "integrity": "sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==", "dev": true }, "source-map": { @@ -8637,14 +8556,6 @@ "requires": { "path-is-absolute": "^1.0.0", "xmlbuilder": "8.2.2" - }, - "dependencies": { - "xmlbuilder": { - "version": "8.2.2", - "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-8.2.2.tgz", - "integrity": "sha1-aSSGc0ELS6QuGmE2VR0pIjNap3M=", - "dev": true - } } }, "karma-source-map-support": { @@ -8678,9 +8589,9 @@ "dev": true }, "known-css-properties": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.9.0.tgz", - "integrity": "sha512-2G/A/8XPhH6MmuVgl079wYsgdqfXE3cfm62txk/ajS4wvRWo6tEHcgQCJCHOOy12Fse1Sxlbf7/IJBpR9hnVew==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.10.0.tgz", + "integrity": "sha512-OMPb86bpVbnKN/2VJw1Ggs1Hw/FNGwEL1QYiNIEHaB5FSLybJ4QD7My5Hm9yDhgpRrRnnOgu0oKeuuABzASeBw==", "dev": true }, "latest-version": { @@ -8692,13 +8603,6 @@ "package-json": "^4.0.0" } }, - "lazy-cache": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", - "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=", - "dev": true, - "optional": true - }, "lazystream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz", @@ -8749,12 +8653,6 @@ "source-map": "~0.6.0" }, "dependencies": { - "clone": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", - "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=", - "dev": true - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -8793,12 +8691,6 @@ "requires": { "asap": "~2.0.3" } - }, - "resolve": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", - "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=", - "dev": true } } }, @@ -8913,17 +8805,6 @@ "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", "dev": true }, - "cliui": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", - "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", - "dev": true, - "requires": { - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wrap-ansi": "^2.0.0" - } - }, "y18n": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", @@ -8973,9 +8854,9 @@ } }, "lodash": { - "version": "4.17.10", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", - "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==", + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", "dev": true }, "lodash._basebind": { @@ -9344,12 +9225,6 @@ "integrity": "sha1-4PyVEztu8nbNyIh82vJKpvFW+Po=", "dev": true }, - "longest": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", - "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true - }, "longest-streak": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.2.tgz", @@ -9388,9 +9263,9 @@ "dev": true }, "lru-cache": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.3.tgz", - "integrity": "sha512-fFEhvcgzuIoJVUF8fYr5KR0YqxD238zgObTps31YdADwPPAp82a4M8TrckkWyx7ekNlf9aBcVn81cFwwXngrJA==", + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", + "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", "dev": true, "requires": { "pseudomap": "^1.0.2", @@ -9431,9 +9306,9 @@ } }, "make-error": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.4.tgz", - "integrity": "sha512-0Dab5btKVPhibSalc9QGXb559ED7G7iLjFXBaj9Wq8O3vorueR5K5jaE3hkG6ZQINyhA/JgG6Qk4qdFQjsYV6g==", + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.5.tgz", + "integrity": "sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==", "dev": true }, "make-error-cause": { @@ -9461,9 +9336,9 @@ "dev": true }, "map-age-cleaner": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz", - "integrity": "sha512-UN1dNocxQq44IhJyMI4TU8phc2m9BddacHRPRjKGLYaF0jqd3xLz0jS0skpAU9WgYyoR4gHtUpzytNBS385FWQ==", + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz", + "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==", "dev": true, "requires": { "p-defer": "^1.0.0" @@ -9584,19 +9459,19 @@ "dev": true }, "memoizee": { - "version": "0.4.12", - "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.12.tgz", - "integrity": "sha512-sprBu6nwxBWBvBOh5v2jcsGqiGLlL2xr2dLub3vR8dnE8YB17omwtm/0NSHl8jjNbcsJd5GMWJAnTSVe/O0Wfg==", + "version": "0.4.14", + "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.14.tgz", + "integrity": "sha512-/SWFvWegAIYAO4NQMpcX+gcra0yEZu4OntmUdrBaWrJncxOqAziGFlHxc7yjKVK2uu3lpPW27P27wkR82wA8mg==", "dev": true, "requires": { "d": "1", - "es5-ext": "^0.10.30", + "es5-ext": "^0.10.45", "es6-weak-map": "^2.0.2", "event-emitter": "^0.3.5", "is-promise": "^2.1", "lru-queue": "0.1", "next-tick": "1", - "timers-ext": "^0.1.2" + "timers-ext": "^0.1.5" } }, "memory-fs": { @@ -9636,9 +9511,9 @@ } }, "merge": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.0.tgz", - "integrity": "sha1-dTHjnUlJwoGma4xabgJl6LBYlNo=", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz", + "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==", "dev": true }, "merge-descriptors": { @@ -9707,18 +9582,18 @@ "optional": true }, "mime-db": { - "version": "1.33.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", - "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==", + "version": "1.37.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz", + "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==", "dev": true }, "mime-types": { - "version": "2.1.18", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", - "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", + "version": "2.1.21", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz", + "integrity": "sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==", "dev": true, "requires": { - "mime-db": "~1.33.0" + "mime-db": "~1.37.0" } }, "mimic-fn": { @@ -9905,9 +9780,9 @@ "dev": true }, "nanomatch": { - "version": "1.2.9", - "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.9.tgz", - "integrity": "sha512-n8R9bS8yQ6eSXaV6jHUpKzD8gLsin02w1HSFiegwrs9E098Ylhw5jdyKPaYqvHknHaSCKTPp7C8dGCQ0q9koXA==", + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", + "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==", "dev": true, "requires": { "arr-diff": "^4.0.0", @@ -9915,7 +9790,6 @@ "define-property": "^2.0.2", "extend-shallow": "^3.0.2", "fragment-cache": "^0.2.1", - "is-odd": "^2.0.0", "is-windows": "^1.0.2", "kind-of": "^6.0.2", "object.pick": "^1.3.0", @@ -9924,6 +9798,12 @@ "to-regex": "^3.0.1" } }, + "natives": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.6.tgz", + "integrity": "sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA==", + "dev": true + }, "ncp": { "version": "1.0.1", "resolved": "http://registry.npmjs.org/ncp/-/ncp-1.0.1.tgz", @@ -9949,9 +9829,9 @@ "dev": true }, "ng-packagr": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-4.4.0.tgz", - "integrity": "sha512-dLpC/kmQsdbkL96ZclGjNRhq/J4MwpPKwPYNom74lvXqFC2jbbT/fnwmxX9WKXjvE8MEGsg2D2x8MsRURiNscg==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-4.4.5.tgz", + "integrity": "sha512-O2s2j6c54HguKLX183zQtey/hcVY7+XVJ5ynpB/LEaiGmkhxFXAku7K/7lLdCO5GkE8YaYw55M/Cmt8O+AqPsQ==", "dev": true, "requires": { "@ngtools/json-schema": "^1.1.0", @@ -9968,11 +9848,12 @@ "less-plugin-npm-import": "^2.1.0", "node-sass": "^4.9.3", "node-sass-tilde-importer": "^1.0.0", + "opencollective": "^1.0.3", "postcss": "^7.0.0", "postcss-url": "^8.0.0", "read-pkg-up": "^4.0.0", "rimraf": "^2.6.1", - "rollup": "^0.66.0", + "rollup": "^0.67.0", "rollup-plugin-commonjs": "^9.1.3", "rollup-plugin-json": "^3.1.0", "rollup-plugin-node-resolve": "^3.0.0", @@ -9983,17 +9864,6 @@ "update-notifier": "^2.3.0" }, "dependencies": { - "chalk": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", - "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - } - }, "find-up": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", @@ -10014,6 +9884,15 @@ "universalify": "^0.1.0" } }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6" + } + }, "load-json-file": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", @@ -10114,6 +9993,16 @@ "lower-case": "^1.1.1" } }, + "node-fetch": { + "version": "1.6.3", + "resolved": "http://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz", + "integrity": "sha1-3CNO3WSJmC1Y6PDbT2lQKavNjAQ=", + "dev": true, + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, "node-forge": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz", @@ -10140,128 +10029,11 @@ "which": "1" }, "dependencies": { - "ajv": { - "version": "6.5.5", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.5.tgz", - "integrity": "sha512-7q7gtRQDJSyuEHjuVgHoUa2VuemFiCMrfQc9Tc08XTAc4Zj/5U1buQJ0HU6i7fKjXU09SVgSmxa4sLvuvS8Iyg==", - "dev": true, - "requires": { - "fast-deep-equal": "^2.0.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, - "aws4": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", - "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==", - "dev": true - }, - "extend": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", - "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", - "dev": true - }, - "fast-deep-equal": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", - "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", - "dev": true - }, - "har-validator": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz", - "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==", - "dev": true, - "requires": { - "ajv": "^6.5.5", - "har-schema": "^2.0.0" - } - }, - "json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", - "dev": true - }, - "mime-db": { - "version": "1.37.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz", - "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==", - "dev": true - }, - "mime-types": { - "version": "2.1.21", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz", - "integrity": "sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==", - "dev": true, - "requires": { - "mime-db": "~1.37.0" - } - }, - "oauth-sign": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz", - "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==", - "dev": true - }, - "punycode": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", - "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", - "dev": true - }, - "request": { - "version": "2.88.0", - "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz", - "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==", - "dev": true, - "requires": { - "aws-sign2": "~0.7.0", - "aws4": "^1.8.0", - "caseless": "~0.12.0", - "combined-stream": "~1.0.6", - "extend": "~3.0.2", - "forever-agent": "~0.6.1", - "form-data": "~2.3.2", - "har-validator": "~5.1.0", - "http-signature": "~1.2.0", - "is-typedarray": "~1.0.0", - "isstream": "~0.1.2", - "json-stringify-safe": "~5.0.1", - "mime-types": "~2.1.19", - "oauth-sign": "~0.9.0", - "performance-now": "^2.1.0", - "qs": "~6.5.2", - "safe-buffer": "^5.1.2", - "tough-cookie": "~2.4.3", - "tunnel-agent": "^0.6.0", - "uuid": "^3.3.2" - } - }, "semver": { "version": "5.3.0", "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz", "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", "dev": true - }, - "tough-cookie": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", - "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==", - "dev": true, - "requires": { - "psl": "^1.1.24", - "punycode": "^1.4.1" - } - }, - "uuid": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz", - "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==", - "dev": true } } }, @@ -10296,18 +10068,59 @@ "vm-browserify": "0.0.4" }, "dependencies": { + "process-nextick-args": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", + "dev": true + }, "punycode": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", "dev": true + }, + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + }, + "dependencies": { + "string_decoder": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + } + } + }, + "string_decoder": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.2.0.tgz", + "integrity": "sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } } } }, "node-releases": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.0.3.tgz", - "integrity": "sha512-ZaZWMsbuDcetpHmYeKWPO6e63pSXLb50M7lJgCbcM2nC/nQC3daNifmtp5a2kp7EWwYfhuvH6zLPWkrF8IiDdw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.0.tgz", + "integrity": "sha512-+qV91QMDBvARuPxUEfI/mRF/BY+UAkTIn3pvmvM2iOLIRvv6RNYklFXBgrkky6P1wXUqQW1P3qKlWxxy4JZbfg==", "dev": true, "requires": { "semver": "^5.3.0" @@ -10340,6 +10153,18 @@ "true-case-path": "^1.0.2" }, "dependencies": { + "ajv": { + "version": "5.5.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", + "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", + "dev": true, + "requires": { + "co": "^4.6.0", + "fast-deep-equal": "^1.0.0", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.3.0" + } + }, "ansi-styles": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", @@ -10359,6 +10184,40 @@ "supports-color": "^2.0.0" } }, + "fast-deep-equal": { + "version": "1.1.0", + "resolved": "http://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", + "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=", + "dev": true + }, + "har-validator": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz", + "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=", + "dev": true, + "requires": { + "ajv": "^5.1.0", + "har-schema": "^2.0.0" + } + }, + "json-schema-traverse": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz", + "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=", + "dev": true + }, + "oauth-sign": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz", + "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=", + "dev": true + }, + "punycode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", + "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", + "dev": true + }, "request": { "version": "2.87.0", "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz", @@ -10392,6 +10251,15 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true + }, + "tough-cookie": { + "version": "2.3.4", + "resolved": "http://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", + "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", + "dev": true, + "requires": { + "punycode": "^1.4.1" + } } } }, @@ -10527,9 +10395,9 @@ "dev": true }, "oauth-sign": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz", - "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz", + "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==", "dev": true }, "object-assign": { @@ -10618,14 +10486,6 @@ "array-slice": "^1.0.0", "for-own": "^1.0.0", "isobject": "^3.0.0" - }, - "dependencies": { - "array-slice": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz", - "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==", - "dev": true - } } }, "object.map": { @@ -10707,6 +10567,140 @@ "mimic-fn": "^1.0.0" } }, + "opencollective": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/opencollective/-/opencollective-1.0.3.tgz", + "integrity": "sha1-ruY3K8KBRFg2kMPKja7PwSDdDvE=", + "dev": true, + "requires": { + "babel-polyfill": "6.23.0", + "chalk": "1.1.3", + "inquirer": "3.0.6", + "minimist": "1.2.0", + "node-fetch": "1.6.3", + "opn": "4.0.2" + }, + "dependencies": { + "ansi-escapes": { + "version": "1.4.0", + "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz", + "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4=", + "dev": true + }, + "ansi-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", + "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", + "dev": true + }, + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, + "chalk": { + "version": "1.1.3", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + } + }, + "chardet": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz", + "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=", + "dev": true + }, + "external-editor": { + "version": "2.2.0", + "resolved": "http://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz", + "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==", + "dev": true, + "requires": { + "chardet": "^0.4.0", + "iconv-lite": "^0.4.17", + "tmp": "^0.0.33" + } + }, + "inquirer": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.0.6.tgz", + "integrity": "sha1-4EqqnQW3o8ubD0B9BDdfBEcZA0c=", + "dev": true, + "requires": { + "ansi-escapes": "^1.1.0", + "chalk": "^1.0.0", + "cli-cursor": "^2.1.0", + "cli-width": "^2.0.0", + "external-editor": "^2.0.1", + "figures": "^2.0.0", + "lodash": "^4.3.0", + "mute-stream": "0.0.7", + "run-async": "^2.2.0", + "rx": "^4.1.0", + "string-width": "^2.0.0", + "strip-ansi": "^3.0.0", + "through": "^2.3.6" + } + }, + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", + "dev": true + }, + "minimist": { + "version": "1.2.0", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true + }, + "opn": { + "version": "4.0.2", + "resolved": "http://registry.npmjs.org/opn/-/opn-4.0.2.tgz", + "integrity": "sha1-erwi5kTf9jsKltWrfyeQwPAavJU=", + "dev": true, + "requires": { + "object-assign": "^4.0.1", + "pinkie-promise": "^2.0.0" + } + }, + "string-width": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", + "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", + "dev": true, + "requires": { + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" + }, + "dependencies": { + "strip-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", + "dev": true, + "requires": { + "ansi-regex": "^3.0.0" + } + } + } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + } + } + }, "openurl": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/openurl/-/openurl-1.1.1.tgz", @@ -10898,9 +10892,9 @@ } }, "pako": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz", - "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg==" + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.7.tgz", + "integrity": "sha512-3HNK5tW4x8o5mO8RuHZp3Ydw9icZXx0RANAOMzlMzx7LVXhMJ4mo3MOBpzyd7r/+RUu8BmndP47LXT+vzjtWcQ==" }, "parallel-transform": { "version": "1.1.0", @@ -10911,6 +10905,38 @@ "cyclist": "~0.2.2", "inherits": "^2.0.3", "readable-stream": "^2.1.5" + }, + "dependencies": { + "process-nextick-args": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", + "dev": true + }, + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + } } }, "param-case": { @@ -10998,6 +11024,12 @@ "error-ex": "^1.2.0" } }, + "parse-node-version": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.0.tgz", + "integrity": "sha512-02GTVHD1u0nWc20n2G7WX/PgdhNFG04j5fi1OkaJzPWLTcf6vh6229Lta1wTmXG/7Dg42tCssgkccVt7qvd8Kg==", + "dev": true + }, "parse-passwd": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz", @@ -11077,9 +11109,9 @@ "dev": true }, "path-parse": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz", - "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", + "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", "dev": true }, "path-root": { @@ -11162,48 +11194,25 @@ } }, "plugin-error": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-0.1.2.tgz", - "integrity": "sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", + "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==", "dev": true, "requires": { - "ansi-cyan": "^0.1.1", - "ansi-red": "^0.1.1", - "arr-diff": "^1.0.1", - "arr-union": "^2.0.1", - "extend-shallow": "^1.1.2" + "ansi-colors": "^1.0.1", + "arr-diff": "^4.0.0", + "arr-union": "^3.1.0", + "extend-shallow": "^3.0.2" }, "dependencies": { - "arr-diff": { + "ansi-colors": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-1.1.0.tgz", - "integrity": "sha1-aHwydYFjWI/vfeezb6vklesaOZo=", - "dev": true, - "requires": { - "arr-flatten": "^1.0.1", - "array-slice": "^0.2.3" - } - }, - "arr-union": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-2.1.0.tgz", - "integrity": "sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=", - "dev": true - }, - "extend-shallow": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-1.1.4.tgz", - "integrity": "sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=", + "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", + "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==", "dev": true, "requires": { - "kind-of": "^1.1.0" + "ansi-wrap": "^0.1.0" } - }, - "kind-of": { - "version": "1.1.0", - "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", - "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=", - "dev": true } } }, @@ -11245,31 +11254,11 @@ "supports-color": "^5.5.0" }, "dependencies": { - "chalk": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", - "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - } - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } } } }, @@ -11305,9 +11294,9 @@ } }, "postcss-less": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.0.2.tgz", - "integrity": "sha512-+JBOampmDnuaf4w8OIEqkCiF+sOm/nWukDsC+1FTrYcIstptOISzGpYZk24Qh+Ewlmzmi53sRyiTbiGvMCDRwA==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.0.tgz", + "integrity": "sha512-+fDH2A9zV8B4gFu3Idhq8ma09/mMBXXc03T2lL9CHjBQqKrfUit+TrQrnojc6Y4k7N4E+tyE1Uj5U1tcoKtXLQ==", "dev": true, "requires": { "postcss": "^7.0.3" @@ -11434,9 +11423,9 @@ }, "dependencies": { "mime": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/mime/-/mime-2.3.1.tgz", - "integrity": "sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.0.tgz", + "integrity": "sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==", "dev": true } } @@ -11478,15 +11467,14 @@ "dev": true }, "process-nextick-args": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", - "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", - "dev": true + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz", + "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=" }, "progress": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.1.tgz", - "integrity": "sha512-OE+a6vzqazc+K6LxJrX5UPyKFvGnL5CYmq2jFGNIBWHpc4QyE49/YOumcrpQFJpfejmvRtbJzgO1zPmMCqlbBg==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", + "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", "dev": true }, "promise": { @@ -11530,35 +11518,17 @@ }, "dependencies": { "@types/node": { - "version": "6.14.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-6.14.1.tgz", - "integrity": "sha512-lfydm+Ul6buYjF6AmcenFjqVYB+tpNlGlwWLr43J1Cok4ybLQimrM8rdB1MdrjtyWdYRceZNgsAeSRZhFxNajQ==", + "version": "6.14.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-6.14.2.tgz", + "integrity": "sha512-JWB3xaVfsfnFY8Ofc9rTB/op0fqqTSqy4vBcVk1LuRJvta7KTX+D//fCkiTMeLGhdr2EbFZzQjC97gvmPilk9Q==", "dev": true }, - "ajv": { - "version": "6.5.5", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.5.tgz", - "integrity": "sha512-7q7gtRQDJSyuEHjuVgHoUa2VuemFiCMrfQc9Tc08XTAc4Zj/5U1buQJ0HU6i7fKjXU09SVgSmxa4sLvuvS8Iyg==", - "dev": true, - "requires": { - "fast-deep-equal": "^2.0.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, "ansi-styles": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", "dev": true }, - "aws4": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", - "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==", - "dev": true - }, "chalk": { "version": "1.1.3", "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", @@ -11587,18 +11557,6 @@ "rimraf": "^2.2.8" } }, - "extend": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", - "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", - "dev": true - }, - "fast-deep-equal": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", - "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", - "dev": true - }, "globby": { "version": "5.0.0", "resolved": "http://registry.npmjs.org/globby/-/globby-5.0.0.tgz", @@ -11613,16 +11571,6 @@ "pinkie-promise": "^2.0.0" } }, - "har-validator": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz", - "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==", - "dev": true, - "requires": { - "ajv": "^6.5.5", - "har-schema": "^2.0.0" - } - }, "jasmine": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.8.0.tgz", @@ -11640,78 +11588,23 @@ "integrity": "sha1-vMl5rh+f0FcB5F5S5l06XWPxok4=", "dev": true }, - "json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", - "dev": true - }, - "mime-db": { - "version": "1.37.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz", - "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==", - "dev": true - }, - "mime-types": { - "version": "2.1.21", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz", - "integrity": "sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==", - "dev": true, - "requires": { - "mime-db": "~1.37.0" - } - }, "minimist": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", - "dev": true - }, - "oauth-sign": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz", - "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==", - "dev": true - }, - "pify": { - "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true - }, - "punycode": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", - "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", - "dev": true - }, - "request": { - "version": "2.88.0", - "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz", - "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==", - "dev": true, - "requires": { - "aws-sign2": "~0.7.0", - "aws4": "^1.8.0", - "caseless": "~0.12.0", - "combined-stream": "~1.0.6", - "extend": "~3.0.2", - "forever-agent": "~0.6.1", - "form-data": "~2.3.2", - "har-validator": "~5.1.0", - "http-signature": "~1.2.0", - "is-typedarray": "~1.0.0", - "isstream": "~0.1.2", - "json-stringify-safe": "~5.0.1", - "mime-types": "~2.1.19", - "oauth-sign": "~0.9.0", - "performance-now": "^2.1.0", - "qs": "~6.5.2", - "safe-buffer": "^5.1.2", - "tough-cookie": "~2.4.3", - "tunnel-agent": "^0.6.0", - "uuid": "^3.3.2" - } + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true + }, + "pify": { + "version": "2.3.0", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true }, "source-map-support": { "version": "0.4.18", @@ -11728,22 +11621,6 @@ "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true }, - "tough-cookie": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", - "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==", - "dev": true, - "requires": { - "psl": "^1.1.24", - "punycode": "^1.4.1" - } - }, - "uuid": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz", - "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==", - "dev": true - }, "webdriver-manager": { "version": "12.1.0", "resolved": "https://registry.npmjs.org/webdriver-manager/-/webdriver-manager-12.1.0.tgz", @@ -11877,9 +11754,9 @@ "dev": true }, "randomatic": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz", - "integrity": "sha512-VdxFOIEY3mNO5PtSRkkle/hPJDHvQhK21oa73K4yAc9qmp6N429gAyF1gZMOTMeS0/AYzaV/2Trcef+NaIonSA==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz", + "integrity": "sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==", "dev": true, "requires": { "is-number": "^4.0.0", @@ -11939,12 +11816,12 @@ "dev": true }, "rc": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.7.tgz", - "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "requires": { - "deep-extend": "^0.5.1", + "deep-extend": "^0.6.0", "ini": "~1.3.0", "minimist": "^1.2.0", "strip-json-comments": "~2.0.1" @@ -12037,17 +11914,15 @@ } }, "readable-stream": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", - "dev": true, + "version": "2.0.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz", + "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=", "requires": { "core-util-is": "~1.0.0", - "inherits": "~2.0.3", + "inherits": "~2.0.1", "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", + "process-nextick-args": "~1.0.6", + "string_decoder": "~0.10.x", "util-deprecate": "~1.0.1" } }, @@ -12120,7 +11995,7 @@ }, "regexpu-core": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz", "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=", "dev": true, "requires": { @@ -12261,9 +12136,9 @@ "dev": true }, "repeat-element": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz", - "integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz", + "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==", "dev": true }, "repeat-string": { @@ -12288,32 +12163,31 @@ "dev": true }, "request": { - "version": "2.86.0", - "resolved": "https://registry.npmjs.org/request/-/request-2.86.0.tgz", - "integrity": "sha512-BQZih67o9r+Ys94tcIW4S7Uu8pthjrQVxhsZ/weOwHbDfACxvIyvnAbzFQxjy1jMtvFSzv5zf4my6cZsJBbVzw==", + "version": "2.88.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz", + "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==", "dev": true, "requires": { "aws-sign2": "~0.7.0", - "aws4": "^1.6.0", + "aws4": "^1.8.0", "caseless": "~0.12.0", - "combined-stream": "~1.0.5", - "extend": "~3.0.1", + "combined-stream": "~1.0.6", + "extend": "~3.0.2", "forever-agent": "~0.6.1", - "form-data": "~2.3.1", - "har-validator": "~5.0.3", - "hawk": "~6.0.2", + "form-data": "~2.3.2", + "har-validator": "~5.1.0", "http-signature": "~1.2.0", "is-typedarray": "~1.0.0", "isstream": "~0.1.2", "json-stringify-safe": "~5.0.1", - "mime-types": "~2.1.17", - "oauth-sign": "~0.8.2", + "mime-types": "~2.1.19", + "oauth-sign": "~0.9.0", "performance-now": "^2.1.0", - "qs": "~6.5.1", - "safe-buffer": "^5.1.1", - "tough-cookie": "~2.3.3", + "qs": "~6.5.2", + "safe-buffer": "^5.1.2", + "tough-cookie": "~2.4.3", "tunnel-agent": "^0.6.0", - "uuid": "^3.1.0" + "uuid": "^3.3.2" } }, "require-directory": { @@ -12341,13 +12215,10 @@ "dev": true }, "resolve": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz", - "integrity": "sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==", - "dev": true, - "requires": { - "path-parse": "^1.0.5" - } + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", + "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=", + "dev": true }, "resolve-cwd": { "version": "2.0.0", @@ -12427,16 +12298,6 @@ "integrity": "sha512-92ktAgvZhBzYTIK0Mja9uen5q5J3NRVMoDkJL2VMwq6SXjVCgqvQeVP2XAaUY6HT+XpQYeLSjb3UoitBryKmdA==", "dev": true }, - "right-align": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", - "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=", - "dev": true, - "optional": true, - "requires": { - "align-text": "^0.1.1" - } - }, "rimraf": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz", @@ -12457,9 +12318,9 @@ } }, "rollup": { - "version": "0.66.6", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.66.6.tgz", - "integrity": "sha512-J7/SWanrcb83vfIHqa8+aVVGzy457GcjA6GVZEnD0x2u4OnOd0Q1pCrEoNe8yLwM6z6LZP02zBT2uW0yh5TqOw==", + "version": "0.67.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.67.4.tgz", + "integrity": "sha512-AVuP73mkb4BBMUmksQ3Jw0jTrBTU1i7rLiUYjFxLZGb3xiFmtVEg40oByphkZAsiL0bJC3hRAJUQos/e5EBd+w==", "dev": true, "requires": { "@types/estree": "0.0.39", @@ -12687,9 +12548,9 @@ }, "dependencies": { "extend": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend/-/extend-2.0.1.tgz", - "integrity": "sha1-HugBBonnOV/5RIJByYZSvHWagmA=", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-2.0.2.tgz", + "integrity": "sha512-AgFD4VU+lVLP6vjnlNfF7OeInLTyeyckCNPEsuxz1vi786UuK/nk6ynPuhn/h+Ju9++TQyr5EpLRI14fc1QtTQ==", "dev": true } } @@ -12719,12 +12580,6 @@ "which": "^1.0.5" }, "dependencies": { - "es6-promise": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz", - "integrity": "sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=", - "dev": true - }, "object-assign": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz", @@ -12743,52 +12598,6 @@ "lodash": "^4.0.0", "scss-tokenizer": "^0.2.3", "yargs": "^7.0.0" - }, - "dependencies": { - "camelcase": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", - "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", - "dev": true - }, - "cliui": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", - "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", - "dev": true, - "requires": { - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wrap-ansi": "^2.0.0" - } - }, - "y18n": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", - "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", - "dev": true - }, - "yargs": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz", - "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=", - "dev": true, - "requires": { - "camelcase": "^3.0.0", - "cliui": "^3.2.0", - "decamelize": "^1.1.1", - "get-caller-file": "^1.0.1", - "os-locale": "^1.4.0", - "read-pkg-up": "^1.0.1", - "require-directory": "^2.1.1", - "require-main-filename": "^1.0.1", - "set-blocking": "^2.0.0", - "string-width": "^1.0.2", - "which-module": "^1.0.0", - "y18n": "^3.2.1", - "yargs-parser": "^5.0.0" - } - } } }, "sass-loader": { @@ -12905,6 +12714,15 @@ "is-posix-bracket": "^0.1.0" } }, + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "^0.1.0" + } + }, "extglob": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz", @@ -12980,6 +12798,36 @@ "vinyl": "^1.0.0" }, "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + }, "through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", @@ -13007,6 +12855,12 @@ "is-extglob": "^1.0.0" } }, + "is-valid-glob": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-0.3.0.tgz", + "integrity": "sha1-1LVcafUYhvm2XHDWwmItN+KfSP4=", + "dev": true + }, "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", @@ -13063,10 +12917,10 @@ "readable-stream": "^2.0.1" } }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", + "process-nextick-args": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "dev": true }, "strip-indent": { @@ -13105,6 +12959,15 @@ } } }, + "to-absolute-glob": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-0.1.1.tgz", + "integrity": "sha1-HN+kcqnvUMI57maZm2YsoOs5k38=", + "dev": true, + "requires": { + "extend-shallow": "^2.0.1" + } + }, "unique-stream": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-2.2.1.tgz", @@ -13151,6 +13014,21 @@ "vinyl": "^1.0.0" }, "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + }, "through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", @@ -13159,6 +13037,23 @@ "requires": { "readable-stream": "~2.3.6", "xtend": "~4.0.1" + }, + "dependencies": { + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + } } } } @@ -13203,13 +13098,22 @@ "jsonfile": "^4.0.0", "universalify": "^0.1.0" } + }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6" + } } } }, "sassdoc-theme-default": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/sassdoc-theme-default/-/sassdoc-theme-default-2.6.2.tgz", - "integrity": "sha512-nOoopiIRwztNJZT2HkIIlHbGF+BjQ2etatq798/JTJYBeXIlG9DLUuClH1/o9CWLHT/tRG9K8AuUGRPU2G3etw==", + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/sassdoc-theme-default/-/sassdoc-theme-default-2.6.3.tgz", + "integrity": "sha512-YN0mouCH/aCg3PL+nJ7IHeCLMbK/UcVRyOjqeykGPKCHUJljEwLv0oJMNtML76Blhd8t7rgM0RYdie0o3BsT3g==", "dev": true, "requires": { "babel-runtime": "^6.22.0", @@ -13224,6 +13128,12 @@ "swig-extras": "0.0.1" }, "dependencies": { + "es6-promise": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.5.tgz", + "integrity": "sha512-n6wvpdE43VFtJq+lUDYDBFUwV8TZbuGXLV4D6wKafg13ldznKsyEvatubnmUe31zcvelSzOHF+XbaT+Bl9ObDg==", + "dev": true + }, "fs-extra": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-2.1.2.tgz", @@ -13340,9 +13250,9 @@ } }, "semver": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz", - "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==", + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz", + "integrity": "sha512-PqpAxfrEhlSUWge8dwIp4tZnQ25DIOthpiaHNIthsjEFQD6EvqUKUDM7L8O2rShkFccYo1VjJR0coWfNkCubRw==", "dev": true }, "semver-diff": { @@ -13538,9 +13448,9 @@ "dev": true }, "shelljs": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.2.tgz", - "integrity": "sha512-pRXeNrCA2Wd9itwhvLp5LZQvPJ0wU6bcjaTMywHHGX5XWhVN2nzSu7WV0q+oUY7mGK3mgSkDDzP3MgjqdyIgbQ==", + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.3.tgz", + "integrity": "sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==", "dev": true, "requires": { "glob": "^7.0.0", @@ -13567,11 +13477,13 @@ "dev": true }, "slice-ansi": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz", - "integrity": "sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.0.0.tgz", + "integrity": "sha512-4j2WTWjp3GsZ+AOagyzVbzp4vWGtZ0hEZ/gDY/uTvm6MTxUfTUIsnMIFb1bn8o0RuXiqUw15H1bue8f22Vw2oQ==", "dev": true, "requires": { + "ansi-styles": "^3.2.0", + "astral-regex": "^1.0.0", "is-fullwidth-code-point": "^2.0.0" }, "dependencies": { @@ -13622,6 +13534,12 @@ "requires": { "is-extendable": "^0.1.0" } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true } } }, @@ -13696,15 +13614,6 @@ } } }, - "sntp": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz", - "integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==", - "dev": true, - "requires": { - "hoek": "4.x.x" - } - }, "socket.io": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-2.1.1.tgz", @@ -13727,6 +13636,75 @@ "requires": { "ms": "2.0.0" } + }, + "engine.io-client": { + "version": "3.2.1", + "resolved": "http://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz", + "integrity": "sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==", + "dev": true, + "requires": { + "component-emitter": "1.2.1", + "component-inherit": "0.0.3", + "debug": "~3.1.0", + "engine.io-parser": "~2.1.1", + "has-cors": "1.1.0", + "indexof": "0.0.1", + "parseqs": "0.0.5", + "parseuri": "0.0.5", + "ws": "~3.3.1", + "xmlhttprequest-ssl": "~1.5.4", + "yeast": "0.1.2" + } + }, + "isarray": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", + "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=", + "dev": true + }, + "socket.io-client": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.1.1.tgz", + "integrity": "sha512-jxnFyhAuFxYfjqIgduQlhzqTcOEQSn+OHKVfAxWaNWa7ecP7xSNk2Dx/3UEsDcY7NcFafxvNvKPmmO7HTwTxGQ==", + "dev": true, + "requires": { + "backo2": "1.0.2", + "base64-arraybuffer": "0.1.5", + "component-bind": "1.0.0", + "component-emitter": "1.2.1", + "debug": "~3.1.0", + "engine.io-client": "~3.2.0", + "has-binary2": "~1.0.2", + "has-cors": "1.1.0", + "indexof": "0.0.1", + "object-component": "0.0.3", + "parseqs": "0.0.5", + "parseuri": "0.0.5", + "socket.io-parser": "~3.2.0", + "to-array": "0.1.4" + } + }, + "socket.io-parser": { + "version": "3.2.0", + "resolved": "http://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz", + "integrity": "sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==", + "dev": true, + "requires": { + "component-emitter": "1.2.1", + "debug": "~3.1.0", + "isarray": "2.0.1" + } + }, + "ws": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz", + "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==", + "dev": true, + "requires": { + "async-limiter": "~1.0.0", + "safe-buffer": "~5.1.0", + "ultron": "~1.1.0" + } } } }, @@ -13737,9 +13715,9 @@ "dev": true }, "socket.io-client": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.1.1.tgz", - "integrity": "sha512-jxnFyhAuFxYfjqIgduQlhzqTcOEQSn+OHKVfAxWaNWa7ecP7xSNk2Dx/3UEsDcY7NcFafxvNvKPmmO7HTwTxGQ==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.2.0.tgz", + "integrity": "sha512-56ZrkTDbdTLmBIyfFYesgOxsjcLnwAKoN4CiPyTVkMQj3zTUh0QAx3GbvIvLpFEOvQWu92yyWICxB0u7wkVbYA==", "dev": true, "requires": { "backo2": "1.0.2", @@ -13747,14 +13725,14 @@ "component-bind": "1.0.0", "component-emitter": "1.2.1", "debug": "~3.1.0", - "engine.io-client": "~3.2.0", + "engine.io-client": "~3.3.1", "has-binary2": "~1.0.2", "has-cors": "1.1.0", "indexof": "0.0.1", "object-component": "0.0.3", "parseqs": "0.0.5", "parseuri": "0.0.5", - "socket.io-parser": "~3.2.0", + "socket.io-parser": "~3.3.0", "to-array": "0.1.4" }, "dependencies": { @@ -13770,9 +13748,9 @@ } }, "socket.io-parser": { - "version": "3.2.0", - "resolved": "http://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz", - "integrity": "sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.0.tgz", + "integrity": "sha512-hczmV6bDgdaEbVqhAeVMM/jfUfzuEZHsQg6eOmLgJht6G3mPKMxYm75w2+qhAQZ+4X+1+ATZ+QFKeOZD5riHng==", "dev": true, "requires": { "component-emitter": "1.2.1", @@ -13839,9 +13817,9 @@ "dev": true }, "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", "dev": true }, "source-map-loader": { @@ -13903,9 +13881,9 @@ "dev": true }, "sourcemap-codec": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.3.tgz", - "integrity": "sha512-vFrY/x/NdsD7Yc8mpTJXuao9S8lq08Z/kOITHz6b7YbfI9xL8Spe5EvSQUHOI7SbpY8bRPr0U3kKSsPuqEGSfA==", + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.4.tgz", + "integrity": "sha512-CYAPYdBu34781kLHkaW3m6b/uUSyMOC2R61gcYMWooeuaGtjof86ZA/8T+qVPPt7np1085CR9hmMGrySwEc8Xg==", "dev": true }, "sparkles": { @@ -13915,9 +13893,9 @@ "dev": true }, "spdx-correct": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.2.tgz", - "integrity": "sha512-q9hedtzyXHr5S0A1vEPoK/7l8NpfkFYTq6iCY+Pno2ZbdZR6WexZFtqeVGkGxW3TEJMN914Z55EnAGMmenlIQQ==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz", + "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==", "dev": true, "requires": { "spdx-expression-parse": "^3.0.0", @@ -13973,6 +13951,38 @@ "readable-stream": "^2.2.9", "safe-buffer": "^5.0.1", "wbuf": "^1.7.2" + }, + "dependencies": { + "process-nextick-args": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", + "dev": true + }, + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + } } }, "specificity": { @@ -14006,9 +14016,9 @@ "dev": true }, "sshpk": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.1.tgz", - "integrity": "sha1-Ew9Zde3a2WPx1W+SuaxsUfqfg+s=", + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.15.2.tgz", + "integrity": "sha512-Ra/OXQtuh0/enyl4ETZAfTaeksa6BXks5ZcjpSUNrjBr0DvrJKX+1fsKDPpT9TBXgHAFsa4510aNVgI8g/+SzA==", "dev": true, "requires": { "asn1": "~0.2.3", @@ -14018,6 +14028,7 @@ "ecc-jsbn": "~0.1.1", "getpass": "^0.1.1", "jsbn": "~0.1.0", + "safer-buffer": "^2.0.2", "tweetnacl": "~0.14.0" } }, @@ -14118,6 +14129,38 @@ "readable-stream": "^2.3.6", "to-arraybuffer": "^1.0.0", "xtend": "^4.0.0" + }, + "dependencies": { + "process-nextick-args": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", + "dev": true + }, + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + } } }, "stream-shift": { @@ -14154,14 +14197,44 @@ "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", "dev": true, "requires": { - "ms": "^2.1.1" + "ms": "^2.1.1" + } + }, + "ms": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", + "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", + "dev": true + }, + "process-nextick-args": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", + "dev": true + }, + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" } - }, - "ms": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", - "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", - "dev": true } } }, @@ -14177,13 +14250,9 @@ } }, "string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "requires": { - "safe-buffer": "~5.1.0" - } + "version": "0.10.31", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=" }, "stringify-entities": { "version": "1.3.2", @@ -14281,9 +14350,9 @@ "dev": true }, "stylelint": { - "version": "9.8.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-9.8.0.tgz", - "integrity": "sha512-qYYgP9UnZ6S4uaXrfEGPIMeNv21gP4t3E7BtnYfJIiHKvz7AbrCP0vj1wPgD6OFyxLT5txQxtoznfSkm2vsUkQ==", + "version": "9.9.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-9.9.0.tgz", + "integrity": "sha512-kIuX0/9/I2mZeHz6EoFt7UpLt7Mz+ic9/PmFwKMdq4BkQHikg3FkcgAElLdAmaI8Au1JEUOS996ZFE+mwXytmA==", "dev": true, "requires": { "autoprefixer": "^9.0.0", @@ -14301,7 +14370,7 @@ "ignore": "^5.0.4", "import-lazy": "^3.1.0", "imurmurhash": "^0.1.4", - "known-css-properties": "^0.9.0", + "known-css-properties": "^0.10.0", "leven": "^2.1.0", "lodash": "^4.17.4", "log-symbols": "^2.0.0", @@ -14313,7 +14382,7 @@ "postcss": "^7.0.0", "postcss-html": "^0.34.0", "postcss-jsx": "^0.35.0", - "postcss-less": "^3.0.1", + "postcss-less": "^3.1.0", "postcss-markdown": "^0.34.0", "postcss-media-query-parser": "^0.2.3", "postcss-reporter": "^6.0.0", @@ -14359,17 +14428,6 @@ "quick-lru": "^1.0.0" } }, - "chalk": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", - "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - } - }, "cosmiconfig": { "version": "5.0.7", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.0.7.tgz", @@ -14399,7 +14457,7 @@ }, "globby": { "version": "8.0.1", - "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.1.tgz", + "resolved": "http://registry.npmjs.org/globby/-/globby-8.0.1.tgz", "integrity": "sha512-oMrYrJERnKBLXNLVTqhm3vPEdJ/b2ZE28xN4YARiix1NOIOBPEpOUnm844K1iu/BkphCaf2WNFwMszv8Soi1pw==", "dev": true, "requires": { @@ -14613,9 +14671,9 @@ } }, "stylelint-scss": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.4.0.tgz", - "integrity": "sha512-sM1bsOrbmR35N1ZAg+7uLVI+n2QHqOVMZPRiAIyiOa1ITBrg0hajBH/i1F/ZxbsBUWLAeSq/NREwPw1+xF9exQ==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.4.1.tgz", + "integrity": "sha512-ENYTE25wd9ndSkwxMksr8hrXVdWYu+RfDKM1ef2MHEqxk4cU362WQv7mgJK3HZqdCZFxL21sFegQO9Kz2vzwGw==", "dev": true, "requires": { "lodash": "^4.17.11", @@ -14631,12 +14689,6 @@ "integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==", "dev": true }, - "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", - "dev": true - }, "postcss-selector-parser": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz", @@ -14710,9 +14762,9 @@ } }, "supports-color": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", - "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "dev": true, "requires": { "has-flag": "^3.0.0" @@ -14740,6 +14792,12 @@ "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E=", "dev": true }, + "camelcase": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", + "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=", + "dev": true + }, "source-map": { "version": "0.1.34", "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.1.34.tgz", @@ -14761,6 +14819,12 @@ "yargs": "~3.5.4" } }, + "window-size": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", + "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=", + "dev": true + }, "wordwrap": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", @@ -14797,17 +14861,29 @@ "dev": true }, "table": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/table/-/table-5.1.0.tgz", - "integrity": "sha512-e542in22ZLhD/fOIuXs/8yDZ9W61ltF8daM88rkRNtgTIct+vI2fTnAyu/Db2TCfEcI8i7mjZz6meLq0nW7TYg==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/table/-/table-5.1.1.tgz", + "integrity": "sha512-NUjapYb/qd4PeFW03HnAuOJ7OMcBkJlqeClWxeNlQ0lXGSb52oZXGzkO0/I0ARegQ2eUT1g2VDJH0eUxDRcHmw==", "dev": true, "requires": { - "ajv": "^6.5.3", - "lodash": "^4.17.10", - "slice-ansi": "1.0.0", + "ajv": "^6.6.1", + "lodash": "^4.17.11", + "slice-ansi": "2.0.0", "string-width": "^2.1.1" }, "dependencies": { + "ajv": { + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.6.1.tgz", + "integrity": "sha512-ZoJjft5B+EJBjUyu9C9Hc0OZyPZSSlOF+plzouTrg6UlA8f+e/n8NIgBFG/9tppJtpPWfthHakK7juJdNDODww==", + "dev": true, + "requires": { + "fast-deep-equal": "^2.0.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, "ansi-regex": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", @@ -14842,9 +14918,9 @@ } }, "tapable": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.0.tgz", - "integrity": "sha512-IlqtmLVaZA2qab8epUXbVWRn3aB1imbDMJtjB3nu4X0NqPkcY/JH9ZtCBWKHWPxs8Svi9tyo8w2dBoi07qZbBA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.1.tgz", + "integrity": "sha512-9I2ydhj8Z9veORCw5PRm4u9uebCn0mcCa6scWoNcbZ6dAtoo2618u9UUzxgmsCOreJpqDDuv61LvwofW7hLcBA==", "dev": true }, "tar": { @@ -14865,12 +14941,40 @@ "dev": true, "requires": { "execa": "^0.7.0" + }, + "dependencies": { + "cross-spawn": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", + "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", + "dev": true, + "requires": { + "lru-cache": "^4.0.1", + "shebang-command": "^1.2.0", + "which": "^1.2.9" + } + }, + "execa": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", + "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", + "dev": true, + "requires": { + "cross-spawn": "^5.0.1", + "get-stream": "^3.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" + } + } } }, "terser": { - "version": "3.10.11", - "resolved": "https://registry.npmjs.org/terser/-/terser-3.10.11.tgz", - "integrity": "sha512-iruZ7j14oBbRYJC5cP0/vTU7YOWjN+J1ZskEGoF78tFzXdkK2hbCL/3TRZN8XB+MuvFhvOHMp7WkOCBO4VEL5g==", + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-3.11.0.tgz", + "integrity": "sha512-5iLMdhEPIq3zFWskpmbzmKwMQixKmTYwY3Ox9pjtSklBLnHiuQ0GKJLhL1HSYtyffHM3/lDIFBnb82m9D7ewwQ==", "dev": true, "requires": { "commander": "~2.17.1", @@ -14878,12 +14982,6 @@ "source-map-support": "~0.5.6" }, "dependencies": { - "commander": { - "version": "2.17.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", - "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", - "dev": true - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -15139,13 +15237,45 @@ "dev": true }, "through2": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz", - "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", + "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", "dev": true, "requires": { - "readable-stream": "^2.1.5", + "readable-stream": "~2.3.6", "xtend": "~4.0.1" + }, + "dependencies": { + "process-nextick-args": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", + "dev": true + }, + "readable-stream": { + "version": "2.3.6", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + } } }, "through2-filter": { @@ -15195,12 +15325,12 @@ } }, "timers-ext": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.5.tgz", - "integrity": "sha512-tsEStd7kmACHENhsUPaxb8Jf8/+GZZxyNFQbZD07HQOyooOa6At1rQqjffgvg7n+dxscQa9cjjMdWhJtsP2sxg==", + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.7.tgz", + "integrity": "sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==", "dev": true, "requires": { - "es5-ext": "~0.10.14", + "es5-ext": "~0.10.46", "next-tick": "1" } }, @@ -15214,23 +15344,13 @@ } }, "to-absolute-glob": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-0.1.1.tgz", - "integrity": "sha1-HN+kcqnvUMI57maZm2YsoOs5k38=", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz", + "integrity": "sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=", "dev": true, "requires": { - "extend-shallow": "^2.0.1" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "requires": { - "is-extendable": "^0.1.0" - } - } + "is-absolute": "^1.0.0", + "is-negated-glob": "^1.0.0" } }, "to-array": { @@ -15303,11 +15423,12 @@ } }, "tough-cookie": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", - "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", + "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==", "dev": true, "requires": { + "psl": "^1.1.24", "punycode": "^1.4.1" }, "dependencies": { @@ -15380,12 +15501,6 @@ "yn": "^2.0.0" }, "dependencies": { - "buffer-from": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", - "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", - "dev": true - }, "minimist": { "version": "1.2.0", "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", @@ -15410,12 +15525,6 @@ "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true - }, - "source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true } } }, @@ -15444,15 +15553,13 @@ "tsutils": "^2.27.2" }, "dependencies": { - "chalk": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", - "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "resolve": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz", + "integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==", "dev": true, "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" + "path-parse": "^1.0.5" } } } @@ -15485,8 +15592,7 @@ "version": "0.14.5", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", - "dev": true, - "optional": true + "dev": true }, "type-check": { "version": "0.3.2", @@ -15549,17 +15655,20 @@ "universalify": "^0.1.0" } }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6" + } + }, "marked": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/marked/-/marked-0.4.0.tgz", "integrity": "sha512-tMsdNBgOsrUophCAFQl0XPe6Zqk/uy9gnue+jIIKhykO51hxyu6uNx7zBPy0+y/WKYVZZMspV9YeXLNdKk+iYw==", "dev": true - }, - "typescript": { - "version": "3.1.6", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.1.6.tgz", - "integrity": "sha512-tDMYfVtvpb96msS1lDX9MEdHrW4yOuZ4Kdc4Him9oU796XldPYF/t2+uKoX0BBa0hXXwDlqYQbXY5Rzjzc5hBA==", - "dev": true } } }, @@ -15570,9 +15679,9 @@ "dev": true }, "typedoc-plugin-localization": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/typedoc-plugin-localization/-/typedoc-plugin-localization-1.4.0.tgz", - "integrity": "sha512-D+6IF/TyiFLNTQhInL9JeHAHOXGfKfEGbAPbO3cUIxTdTR9icun7aJ2p9AwOzWlVn7c+fhBRHWk2CJm0LOo4Lw==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/typedoc-plugin-localization/-/typedoc-plugin-localization-1.3.0.tgz", + "integrity": "sha512-nc+f9XqCTKaO/Rq5igFKV1WfAbkhvOUUJfR6yYqqQCaTcJzJSe6vdS6Ro7N11tjoQKXXrZbp5QUfbMTVr1X5Qg==", "dev": true, "requires": { "fs-extra": "^7.0.0", @@ -15633,6 +15742,15 @@ "universalify": "^0.1.0" } }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6" + } + }, "typedoc": { "version": "0.11.1", "resolved": "http://registry.npmjs.org/typedoc/-/typedoc-0.11.1.tgz", @@ -15692,12 +15810,12 @@ "dev": true }, "uglify-js": { - "version": "3.3.25", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.25.tgz", - "integrity": "sha512-hobogryjDV36VrLK3Y69ou4REyrTApzUblVFmdQOYRe8cYaSmFJXMb4dR9McdvYDSbeNdzUgYr2YVukJaErJcA==", + "version": "3.4.9", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", + "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==", "dev": true, "requires": { - "commander": "~2.15.0", + "commander": "~2.17.1", "source-map": "~0.6.1" }, "dependencies": { @@ -15924,9 +16042,9 @@ } }, "universalify": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz", - "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc=", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", "dev": true }, "unpipe": { @@ -16070,13 +16188,10 @@ } }, "use": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/use/-/use-3.1.0.tgz", - "integrity": "sha512-6UJEQM/L+mzC3ZJNM56Q4DFGLX/evKGRg15UJHGB9X5j5Z3AFbgZvjUh2yq/UJUY4U5dh7Fal++XbNg1uzpRAw==", - "dev": true, - "requires": { - "kind-of": "^6.0.2" - } + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", + "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==", + "dev": true }, "user-home": { "version": "1.1.1", @@ -16085,21 +16200,13 @@ "dev": true }, "useragent": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/useragent/-/useragent-2.2.1.tgz", - "integrity": "sha1-z1k+9PLRdYdei7ZY6pLhik/QbY4=", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/useragent/-/useragent-2.3.0.tgz", + "integrity": "sha512-4AoH4pxuSvHCjqLO04sU6U/uE65BYza8l/KKBS0b0hnUPWi+cQ2BpeTEwejCSx9SPV5/U03nniDTrWx5NrmKdw==", "dev": true, "requires": { - "lru-cache": "2.2.x", + "lru-cache": "4.1.x", "tmp": "0.0.x" - }, - "dependencies": { - "lru-cache": { - "version": "2.2.4", - "resolved": "http://registry.npmjs.org/lru-cache/-/lru-cache-2.2.4.tgz", - "integrity": "sha1-bGWGGb7PFAMdDQtZSxYELOTcBj0=", - "dev": true - } } }, "util": { @@ -16123,9 +16230,9 @@ "dev": true }, "uuid": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz", - "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz", + "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==", "dev": true }, "v8flags": { @@ -16206,15 +16313,15 @@ } }, "vfile-location": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.3.tgz", - "integrity": "sha512-zM5/l4lfw1CBoPx3Jimxoc5RNDAHHpk6AM6LM0pTIkm5SUSsx8ZekZ0PVdf0WEZ7kjlhSt7ZlqbRL6Cd6dBs6A==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.4.tgz", + "integrity": "sha512-KRL5uXQPoUKu+NGvQVL4XLORw45W62v4U4gxJ3vRlDfI9QsT4ZN1PNXn/zQpKUulqGDpYuT0XDfp5q9O87/y/w==", "dev": true }, "vfile-message": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.0.1.tgz", - "integrity": "sha512-vSGCkhNvJzO6VcWC6AlJW4NtYOVtS+RgCaqFIYUjoGIlHnFL+i0LbtYvonDWOMcB97uTPT4PRsyYY7REWC9vug==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.0.2.tgz", + "integrity": "sha512-dNdEXHfPCvzyOlEaaQ+DcXpcxEz+pFvdrebKLiAMjobjaBC2bMeWoHOKPwJ+I8A4jQOEUDH7uoVcLWDLF1qhVQ==", "dev": true, "requires": { "unist-util-stringify-position": "^1.1.1" @@ -16268,14 +16375,6 @@ "dev": true, "requires": { "natives": "^1.1.0" - }, - "dependencies": { - "natives": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.4.tgz", - "integrity": "sha512-Q29yeg9aFKwhLVdkTAejM/HvYG0Y1Am1+HUkFQGn5k2j8GS+v60TVmZh6nujpEAj/qql+wGUrlryO8bF+b1jEg==", - "dev": true - } } }, "isarray": { @@ -16296,12 +16395,6 @@ "string_decoder": "~0.10.x" } }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", - "dev": true - }, "strip-bom": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-1.0.0.tgz", @@ -16412,6 +16505,14 @@ "dev": true, "requires": { "source-map": "^0.5.1" + }, + "dependencies": { + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + } } }, "vinyl-string": { @@ -16524,12 +16625,6 @@ "webpack-sources": "^1.2.0" }, "dependencies": { - "acorn": { - "version": "5.7.3", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz", - "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==", - "dev": true - }, "schema-utils": { "version": "0.4.7", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz", @@ -16584,9 +16679,9 @@ }, "dependencies": { "mime": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/mime/-/mime-2.3.1.tgz", - "integrity": "sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.0.tgz", + "integrity": "sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==", "dev": true } } @@ -16661,19 +16756,6 @@ } } }, - "cross-spawn": { - "version": "6.0.5", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", - "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", - "dev": true, - "requires": { - "nice-try": "^1.0.4", - "path-key": "^2.0.1", - "semver": "^5.5.0", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - } - }, "debug": { "version": "3.2.6", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", @@ -16692,21 +16774,6 @@ "xregexp": "4.0.0" } }, - "execa": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz", - "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==", - "dev": true, - "requires": { - "cross-spawn": "^6.0.0", - "get-stream": "^3.0.0", - "is-stream": "^1.1.0", - "npm-run-path": "^2.0.0", - "p-finally": "^1.0.0", - "signal-exit": "^3.0.0", - "strip-eof": "^1.0.0" - } - }, "find-up": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", @@ -16748,9 +16815,9 @@ } }, "mime": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/mime/-/mime-2.3.1.tgz", - "integrity": "sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.0.tgz", + "integrity": "sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==", "dev": true }, "ms": { @@ -16875,14 +16942,6 @@ "requires": { "ansi-colors": "^3.0.0", "uuid": "^3.3.2" - }, - "dependencies": { - "uuid": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz", - "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==", - "dev": true - } } }, "webpack-merge": { @@ -16944,9 +17003,9 @@ "dev": true }, "which": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz", - "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", "dev": true, "requires": { "isexe": "^2.0.0" @@ -16968,9 +17027,9 @@ } }, "widest-line": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.0.tgz", - "integrity": "sha1-AUKk6KJD+IgsAjOqDgKBqnYVInM=", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz", + "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==", "dev": true, "requires": { "string-width": "^2.1.1" @@ -17010,9 +17069,9 @@ } }, "window-size": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", - "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=", + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.2.0.tgz", + "integrity": "sha1-tDFbtCFKPXBY6+7okuE/ok2YsHU=", "dev": true }, "wordwrap": { @@ -17067,14 +17126,12 @@ } }, "ws": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz", - "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-6.1.2.tgz", + "integrity": "sha512-rfUqzvz0WxmSXtJpPMX2EeASXabOrSMk1ruMOV3JBTBjo4ac2lDjGGsbQSyxj8Odhw5fBib8ZKEjDNvgouNKYw==", "dev": true, "requires": { - "async-limiter": "~1.0.0", - "safe-buffer": "~5.1.0", - "ultron": "~1.1.0" + "async-limiter": "~1.0.0" } }, "x-is-string": { @@ -17104,13 +17161,19 @@ "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true + }, + "xmlbuilder": { + "version": "9.0.7", + "resolved": "http://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz", + "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=", + "dev": true } } }, "xmlbuilder": { - "version": "9.0.7", - "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz", - "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=", + "version": "8.2.2", + "resolved": "http://registry.npmjs.org/xmlbuilder/-/xmlbuilder-8.2.2.tgz", + "integrity": "sha1-aSSGc0ELS6QuGmE2VR0pIjNap3M=", "dev": true }, "xmlhttprequest-ssl": { @@ -17153,16 +17216,38 @@ "dev": true }, "yargs": { - "version": "3.10.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", - "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz", + "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=", "dev": true, - "optional": true, "requires": { - "camelcase": "^1.0.2", - "cliui": "^2.1.0", - "decamelize": "^1.0.0", - "window-size": "0.1.0" + "camelcase": "^3.0.0", + "cliui": "^3.2.0", + "decamelize": "^1.1.1", + "get-caller-file": "^1.0.1", + "os-locale": "^1.4.0", + "read-pkg-up": "^1.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^1.0.2", + "which-module": "^1.0.0", + "y18n": "^3.2.1", + "yargs-parser": "^5.0.0" + }, + "dependencies": { + "camelcase": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", + "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", + "dev": true + }, + "y18n": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", + "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", + "dev": true + } } }, "yargs-parser": { diff --git a/package.json b/package.json index 42df6351bc3..795b8deaa58 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "tslib": "^1.9.3", "tslint": "~5.11.0", "typedoc": "^0.13.0", - "typedoc-plugin-localization": "^1.4.0", + "typedoc-plugin-localization": "~1.3.0", "typescript": "~3.1.6", "webpack-sources": "1.3.0" } From 1719687fd0e2f1972d564900a643107d93292239 Mon Sep 17 00:00:00 2001 From: Radko Kolev Date: Thu, 6 Dec 2018 15:39:15 +0200 Subject: [PATCH 75/77] fix(toolbar): toolbar to be shown when only showToolbar is set #2983 --- .../src/lib/grids/grid-base.component.ts | 10 ---------- .../src/lib/grids/grid/grid-toolbar.spec.ts | 5 +++++ .../src/lib/grids/grid/grid.component.html | 2 +- .../src/lib/grids/tree-grid/tree-grid.component.html | 2 +- 4 files changed, 7 insertions(+), 12 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 2453e6f2eff..efdcf5d492e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -1708,16 +1708,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements @ViewChild('toolbar', { read: ElementRef }) private toolbarHtml: ElementRef = null; - public get shouldShowToolbar(): boolean { - return this.showToolbar && - (this.columnHiding || - this.columnPinning || - this.toolbarCustomContentTemplate != null || - this.exportExcel || - this.exportCsv || - (this.toolbarTitle && this.toolbarTitle !== null && this.toolbarTitle !== '')); - } - /** * Returns whether the `IgxGridComponent`'s toolbar is shown or hidden. * ```typescript diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts index 9c1f72e8238..ea4b7659df5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts @@ -73,6 +73,11 @@ describe('IgxGrid - Grid Toolbar', () => { grid.toolbarTitle = ''; fixture.detectChanges(); + expect(getToolbar(fixture)).not.toBe(null); + + grid.showToolbar = false; + fixture.detectChanges(); + expect(getToolbar(fixture)).toBe(null); }); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 6a3ae954eaf..6bd6caa089c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -1,4 +1,4 @@ - + diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index fc113af79b7..fb79f3e12e7 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -1,4 +1,4 @@ - + From dec26039b82ef6c1fbb29634cf90bbb09c3339bc Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Fri, 7 Dec 2018 10:18:11 +0200 Subject: [PATCH 76/77] fix(grid): address review comments #3071 --- .../igniteui-angular/src/lib/grids/grid-base.component.ts | 4 ++-- .../src/lib/grids/grid/column-resizing.spec.ts | 6 ++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 9b66aba732f..93f1f915c6d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -2380,7 +2380,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } /** - * Returns the `IgxGridHeaderGroupComponent`'s minimum allloed width. + * Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width. * Used internally for restricting header group component width. * The values below depend on the header cell default right/left padding values. * @memberof IgxGridBaseComponent @@ -2486,7 +2486,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements public getHeaderGroupWidth(column: IgxColumnComponent): string { const minWidth = this.defaultHeaderGroupMinWidth; - if (parseInt(column.width, 10) < this.defaultHeaderGroupMinWidth) { + if (parseInt(column.width, 10) < minWidth) { return minWidth.toString(); } diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 0d24a2fd34a..6433959a5fb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -19,6 +19,7 @@ describe('IgxGrid - Deferred Column Resizing', () => { configureTestSuite(); const COLUMN_HEADER_CLASS = '.igx-grid__th'; const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item'; + const COLUMN_FILTER_CELL_CLASS = 'igx-grid-filtering-cell'; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -729,7 +730,7 @@ describe('IgxGrid - Deferred Column Resizing', () => { const headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); const headerGroups = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS)); - const filteringCells = fixture.debugElement.queryAll(By.css('igx-grid-filtering-cell')); + const filteringCells = fixture.debugElement.queryAll(By.css(COLUMN_FILTER_CELL_CLASS)); expect(headers[0].nativeElement.getBoundingClientRect().width).toBe(49); expect(headers[1].nativeElement.getBoundingClientRect().width).toBe(50); @@ -742,8 +743,6 @@ describe('IgxGrid - Deferred Column Resizing', () => { expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(48); expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50); expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48); - - })); }); @@ -854,7 +853,6 @@ export class NullColumnsComponent implements OnInit { } } - @Component({ template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``, ` From 6d37088d6559d7a5ad2951a6b06d76818e930476 Mon Sep 17 00:00:00 2001 From: Stefana Andreeva Date: Fri, 7 Dec 2018 11:32:38 +0200 Subject: [PATCH 77/77] feat(grid): address review comments #3071 --- .../src/lib/grids/grid/column-resizing.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 6433959a5fb..1c03795dcde 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -19,7 +19,7 @@ describe('IgxGrid - Deferred Column Resizing', () => { configureTestSuite(); const COLUMN_HEADER_CLASS = '.igx-grid__th'; const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item'; - const COLUMN_FILTER_CELL_CLASS = 'igx-grid-filtering-cell'; + const COLUMN_FILTER_CELL_SELECTOR = 'igx-grid-filtering-cell'; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -730,7 +730,7 @@ describe('IgxGrid - Deferred Column Resizing', () => { const headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); const headerGroups = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS)); - const filteringCells = fixture.debugElement.queryAll(By.css(COLUMN_FILTER_CELL_CLASS)); + const filteringCells = fixture.debugElement.queryAll(By.css(COLUMN_FILTER_CELL_SELECTOR)); expect(headers[0].nativeElement.getBoundingClientRect().width).toBe(49); expect(headers[1].nativeElement.getBoundingClientRect().width).toBe(50);