Merge branch 'master' into SKrastev/fix-date-picker

Author: ChronosSF

CHANGELOG.md

@@ -30,6 +30,20 @@ All notable changes for each version of this project will be documented in this
     - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
 - `IgxToggleDirective`:
     - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
+- `IgxRowDragGhost` directive is added. It allows providing a custom template for the drag ghost when dragging a row.
+```html
+    <igx-grid #grid1 [data]="remote | async" primaryKey="ProductID"
+        [rowDraggable]="true">
+        <igx-column field="ProductName"></igx-column>
+        <igx-column field="ProductID"></igx-column>
+        <igx-column field="UnitsInStock"></igx-column>
+        <ng-template let-data igxRowDragGhost>
+            <div>
+                Moving {{data.ProductName}}!
+            </div>
+        </ng-template>
+    </igx-grid>
+```
 
 ## 8.2.6
 

projects/igniteui-angular/schematics/ng-add/index.spec.ts

@@ -9,17 +9,19 @@ describe('ng-add schematics', () => {
   const collectionPath = path.join(__dirname, '../collection.json');
   const runner: SchematicTestRunner = new SchematicTestRunner('cli-schematics', collectionPath);
   let tree: UnitTestTree;
+  const sourceRoot = 'testSrc';
   const ngJsonConfig = {
     defaultProject: 'testProj',
     projects: {
       testProj: {
-        sourceRoot: 'src',
+        sourceRoot: sourceRoot,
         projectType: ProjectType.Application,
         architect: {
           serve: {},
           build: {
             options: {
-              main: 'src/main.ts',
+              main: `${sourceRoot}/main.ts`,
+              polyfills: `${sourceRoot}/polyfills.ts`,
               scripts: []
             }
           }
@@ -42,7 +44,7 @@ describe('ng-add schematics', () => {
     tree = new UnitTestTree(new EmptyTree());
     tree.create('/angular.json', JSON.stringify(ngJsonConfig));
     tree.create('/package.json', JSON.stringify(pkgJsonConfig));
-    tree.create('src/main.ts', '// test comment');
+    tree.create(`${sourceRoot}/main.ts`, '// test comment');
   });
 
   it('should create the needed files correctly', () => {
@@ -71,7 +73,7 @@ describe('ng-add schematics', () => {
 
   it('should add hammer.js to the main.ts file', () => {
     runner.runSchematic('ng-add', { normalizeCss: false }, tree);
-    const mainTs = tree.read('src/main.ts').toString();
+    const mainTs = tree.read(`${sourceRoot}/main.ts`).toString();
     expect(mainTs).toContain('import \'hammerjs\';');
   });
 
@@ -82,12 +84,12 @@ describe('ng-add schematics', () => {
     tree.overwrite('angular.json', JSON.stringify(workspace));
     runner.runSchematic('ng-add', { normalizeCss: false }, tree);
 
-    const newContent = tree.read('src/main.ts').toString();
+    const newContent = tree.read(`${sourceRoot}/main.ts`).toString();
     expect(newContent.split('import \'hammerjs\';\n// test comment').length).toEqual(1);
   });
 
   it('should not add hammer.js if it exists in main.ts', () => {
-    const mainTsPath = 'src/main.ts';
+    const mainTsPath = `${sourceRoot}/main.ts`;
     const content = tree.read(mainTsPath).toString();
     tree.overwrite(mainTsPath, 'import \'hammerjs\';\n' + content);
     runner.runSchematic('ng-add', { normalizeCss: false }, tree);
@@ -138,54 +140,54 @@ import 'core-js/es6/set';
 import 'web-animations-js';  // Run \`npm install --save web-animations-js\`.
 `;
 
-    tree.create('src/polyfills.ts', polyfills);
+    tree.create(`${sourceRoot}/polyfills.ts`, polyfills);
     runner.runSchematic('ng-add', { polyfills: true, normalizeCss: false }, tree);
-    expect(tree.readContent('src/polyfills.ts').replace(/\r\n/g, '\n')).toEqual(result.replace(/\r\n/g, '\n'));
+    expect(tree.readContent(`${sourceRoot}/polyfills.ts`).replace(/\r\n/g, '\n')).toEqual(result.replace(/\r\n/g, '\n'));
   });
 
   it('should properly add css reset', () => {
-    tree.create('src/styles.scss', '');
+    tree.create(`${sourceRoot}/styles.scss`, '');
     runner.runSchematic('ng-add', { normalizeCss: true }, tree);
     let pkgJsonData = JSON.parse(tree.readContent('/package.json'));
-    expect(tree.readContent('src/styles.scss')).toEqual(scssImport);
+    expect(tree.readContent(`${sourceRoot}/styles.scss`)).toEqual(scssImport);
     expect(pkgJsonData.dependencies['minireset.css']).toBeTruthy();
     resetJsonConfigs(tree);
-    tree.delete('src/styles.scss');
+    tree.delete(`${sourceRoot}/styles.scss`);
 
-    tree.create('src/styles.sass', '');
+    tree.create(`${sourceRoot}/styles.sass`, '');
     runner.runSchematic('ng-add', { normalizeCss: true }, tree);
     pkgJsonData = JSON.parse(tree.readContent('/package.json'));
-    expect(tree.readContent('src/styles.sass')).toEqual(scssImport);
+    expect(tree.readContent(`${sourceRoot}/styles.sass`)).toEqual(scssImport);
     expect(pkgJsonData.dependencies['minireset.css']).toBeTruthy();
     resetJsonConfigs(tree);
-    tree.delete('src/styles.sass');
+    tree.delete(`${sourceRoot}/styles.sass`);
 
-    tree.create('src/styles.css', '');
+    tree.create(`${sourceRoot}/styles.css`, '');
     runner.runSchematic('ng-add', { normalizeCss: true }, tree);
     pkgJsonData = JSON.parse(tree.readContent('/package.json'));
-    expect(tree.readContent('src/styles.css')).toBe('');
+    expect(tree.readContent(`${sourceRoot}/styles.css`)).toBe('');
     expect(pkgJsonData.dependencies['minireset.css']).toBeTruthy();
     expect(JSON.parse(tree.readContent('/angular.json')).projects['testProj'].architect.build.options.styles).toContain(cssImport);
     resetJsonConfigs(tree);
-    tree.delete('src/styles.css');
+    tree.delete(`${sourceRoot}/styles.css`);
 
-    tree.create('src/styles.less', '');
+    tree.create(`${sourceRoot}/styles.less`, '');
     runner.runSchematic('ng-add', { normalizeCss: true }, tree);
     pkgJsonData = JSON.parse(tree.readContent('/package.json'));
-    expect(tree.readContent('src/styles.less')).toBe('');
+    expect(tree.readContent(`${sourceRoot}/styles.less`)).toBe('');
     expect(pkgJsonData.dependencies['minireset.css']).toBeTruthy();
     expect(JSON.parse(tree.readContent('/angular.json')).projects['testProj'].architect.build.options.styles).toContain(cssImport);
     resetJsonConfigs(tree);
-    tree.delete('src/styles.less');
+    tree.delete(`${sourceRoot}/styles.less`);
 
-    tree.create('src/styles.styl', '');
+    tree.create(`${sourceRoot}/styles.styl`, '');
     runner.runSchematic('ng-add', { normalizeCss: true }, tree);
     pkgJsonData = JSON.parse(tree.readContent('/package.json'));
-    expect(tree.readContent('src/styles.styl')).toBe('');
+    expect(tree.readContent(`${sourceRoot}/styles.styl`)).toBe('');
     expect(pkgJsonData.dependencies['minireset.css']).toBeTruthy();
     expect(JSON.parse(tree.readContent('/angular.json')).projects['testProj'].architect.build.options.styles).toContain(cssImport);
     resetJsonConfigs(tree);
-    tree.delete('src/styles.styl');
+    tree.delete(`${sourceRoot}/styles.styl`);
   });
 
   it('should properly add web animations', () => {
@@ -202,7 +204,7 @@ import 'web-animations-js';  // Run \`npm install --save web-animations-js\`.
    * that is built with AngularCLI v7.3 or above. All else are considered below v7.3.
    */
   it('should enable es5BrowserSupport on projects with ng cli version >= 7.3', () => {
-    tree.create('src/polyfills.ts', '');
+    tree.create(`${sourceRoot}/polyfills.ts`, '');
     const newJson: any = JSON.parse(tree.read('/angular.json').toString());
     newJson.projects['testProj'].architect.build.options['es5BrowserSupport'] = false;
     tree.overwrite('/angular.json', JSON.stringify(newJson));
@@ -226,11 +228,11 @@ import 'web-animations-js';  // Run \`npm install --save web-animations-js\`.
 import 'web-animations-js';  // Run \`npm install --save web-animations-js\`.
     `;
 
-    tree.create('src/polyfills.ts', polyfills);
+    tree.create(`${sourceRoot}/polyfills.ts`, polyfills);
     const newJson: any = JSON.parse(tree.read('/angular.json').toString());
     newJson.projects['testProj'].architect.build.options['es5BrowserSupport'] = false;
     tree.overwrite('/angular.json', JSON.stringify(newJson));
     runner.runSchematic('ng-add', { polyfills: true }, tree);
-    expect(tree.readContent('src/polyfills.ts').replace(/\r\n/g, '\n')).toEqual(result.replace(/\r\n/g, '\n'));
+    expect(tree.readContent(`${sourceRoot}/polyfills.ts`).replace(/\r\n/g, '\n')).toEqual(result.replace(/\r\n/g, '\n'));
   });
 });

projects/igniteui-angular/schematics/ng-add/index.ts

@@ -1,10 +1,11 @@
 import { chain, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import { Options } from '../interfaces/options';
 import { installPackageJsonDependencies } from '../utils/package-handler';
-import { logSuccess, addDependencies, overwriteJsonFile, getPropertyFromWorkspace } from '../utils/dependency-handler';
+import { logSuccess, addDependencies, overwriteJsonFile,
+    getPropertyFromWorkspace, getConfigFile } from '../utils/dependency-handler';
 
 import { addResetCss } from './add-normalize';
-import { getWorkspace } from '@schematics/angular/utility/config';
+import { getWorkspace, getConfig } from '@schematics/angular/utility/config';
 import { WorkspaceSchema } from '@schematics/angular/utility/workspace-models';
 
 
@@ -17,7 +18,9 @@ function propertyExistsInWorkspace(targetProp: string, workspace: WorkspaceSchem
 }
 
 function enablePolyfills(tree: Tree, context: SchematicContext): string {
-  const targetFile = 'src/polyfills.ts';
+  const workspace = getWorkspace(tree);
+  const project = workspace.projects[workspace.defaultProject];
+  const targetFile = getConfigFile(project, 'polyfills');
   if (!tree.exists(targetFile)) {
     context.logger.warn(`${targetFile} not found. You may need to update polyfills.ts manually.`);
     return;
@@ -50,7 +53,8 @@ function readInput(options: Options): Rule {
     if (options.polyfills) {
       const workspace = getWorkspace(tree);
       const targetProperty = 'es5BrowserSupport';
-      const polyfillsFile = 'src/polyfills.ts';
+      const project = workspace.projects[workspace.defaultProject];
+      const polyfillsFile = getConfigFile(project, 'polyfills');
       const propertyExists = propertyExistsInWorkspace(targetProperty, workspace);
       let polyfillsData = tree.read(polyfillsFile).toString();
       if (propertyExists) {

projects/igniteui-angular/schematics/utils/dependency-handler.ts

@@ -26,14 +26,14 @@ function getTargetedProjectOptions(project: WorkspaceProject<ProjectType>, targe
     throw new SchematicsException(`Cannot determine the project's configuration for: ${target}`);
 }
 
-function getMainFile(project: WorkspaceProject<ProjectType>): string {
+export function getConfigFile(project: WorkspaceProject<ProjectType>, option: string): string {
     const buildOptions = getTargetedProjectOptions(project, 'build');
-    if (!buildOptions.main) {
-        throw new SchematicsException(`Could not find the project main file inside of the ` +
+    if (!buildOptions[option]) {
+        throw new SchematicsException(`Could not find the project ${option} file inside of the ` +
             `workspace config (${project.sourceRoot})`);
     }
 
-    return buildOptions.main;
+    return buildOptions[option];
 }
 
 export function overwriteJsonFile(tree: Tree, targetFile: string, data: any) {
@@ -113,7 +113,7 @@ function includeDependencies(pkgJson: any, context: SchematicContext, tree: Tree
                 const workspace = getWorkspace(tree);
                 const project = workspace.projects[workspace.defaultProject];
                 const projectOptions = getTargetedProjectOptions(project, 'build');
-                const mainTsPath = getMainFile(project);
+                const mainTsPath = getConfigFile(project, 'main');
                 const hammerImport = 'import \'hammerjs\';\n';
                 const mainTsContent = tree.read(mainTsPath).toString();
                 // if there are no elements in the architect.build.options.scripts array that contain hammerjs

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

@@ -147,7 +147,7 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
      * }
      * ```
      */
-    @ContentChildren(IgxChipComponent)
+    @ContentChildren(IgxChipComponent, { descendants: true })
     public chipsList: QueryList<IgxChipComponent>;
 
     private modifiedChipsArray: IgxChipComponent[];

projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss

@@ -113,15 +113,15 @@
         @extend %circular-text !optional;
     }
 
-    @include e(text, $m: hidden) {
-        @extend %circular-text !optional;
-    }
-
     @include m(indeterminate) {
         @extend %circular-display--indeterminate !optional;
 
         @include e(outer) {
             @extend %circular-outer--indeterminate !optional;
         }
+
+        @include e(text) {
+            @extend %circular-text--hidden !optional;
+        }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss

@@ -311,6 +311,10 @@
         fill: --var($theme, 'text-color');
     }
 
+    %circular-text--hidden {
+        visibility: hidden;
+    }
+
     @include keyframes('indeterminate-accordion') {
         from {
             stroke-dashoffset: 578;

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -953,7 +953,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
         this.emitValueChangeEvent(oldValue, this.value );
         this.onSelection.emit(date);
-        this._onChangeCallback(date);
     }
 
     /**
@@ -974,7 +973,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         if (this.calendar) {
             this.calendar.deselectDate();
         }
-        this._onChangeCallback(null);
     }
 
     /**
@@ -1060,7 +1058,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
         this.emitValueChangeEvent(oldValue, this.value );
         this.calendar.viewDate = date;
-        this._onChangeCallback(date);
         this.closeCalendar();
         this.onSelection.emit(date);
     }
@@ -1205,7 +1202,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
                         this.emitValueChangeEvent(oldValue, this.value );
                         this.invalidDate = '';
-                        this._onChangeCallback(newValue);
                 } else {
                     const args: IDatePickerDisabledDateEventArgs = {
                         datePicker: this,

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -151,6 +151,8 @@ export class IgxDragLocation {
 })
 export class IgxDragDirective implements AfterContentInit, OnDestroy {
 
+    protected ghostContext: any = null;
+
     /**
      * - Save data inside the `igxDrag` directive. This can be set when instancing `igxDrag` on an element.
      * ```html
@@ -1099,7 +1101,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
 
         let dynamicGhostRef;
         if (this.ghostTemplate) {
-            dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate);
+            dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate, this.ghostContext);
             this.ghostElement = dynamicGhostRef.rootNodes[0];
         } else {
             this.ghostElement = node ? node.cloneNode(true) : this.element.nativeElement.cloneNode(true);

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -132,6 +132,7 @@ import { IgxGridToolbarCustomContentDirective } from './toolbar/toolbar.directiv
 import { IgxColumnComponent } from './columns/column.component';
 import { IgxColumnGroupComponent } from './columns/column-group.component';
 import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
+import { IgxRowDragGhostDirective  } from './row-drag.directive';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -1912,6 +1913,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     @ContentChildren(IgxRowSelectorDirective, { read: IgxRowSelectorDirective, descendants: false })
     public rowSelectorsTemplates: QueryList<IgxRowSelectorDirective>;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false })
+    public dragGhostCustomTemplates: QueryList<TemplateRef<any>>;
+
     /**
      * @hidden
      */
@@ -3167,6 +3175,18 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+    */
+    public getDragGhostCustomTemplate() {
+        if (this.dragGhostCustomTemplates && this.dragGhostCustomTemplates.first) {
+            return this.dragGhostCustomTemplates.first;
+        }
+
+        return null;
+    }
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html

@@ -2,7 +2,7 @@
     <div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}"></div>
 </ng-container>
 <ng-container *ngIf="rowDraggable">
-    <div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()">
+    <div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.getDragGhostCustomTemplate()">
         <ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
     </div>
 </ng-container>