Merge branch 'master' into simeonoff/toast-outlet

Author: simeonoff

CHANGELOG.md

@@ -4,26 +4,29 @@ All notable changes for each version of this project will be documented in this
 ## 10.2.0
 
 ### General
+- `IgxDatePicker`
+    - Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
 - `IgxInputGroup`
-    - **Breaking Change** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property. 
+    - **Breaking Change** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property.
     - **Behavioral Change** - The styling of the input group is now dictated by the theme being used. The remaining `types` - `line`, `border`, and `box` will only have effect on the styling when used with the `material` theme. The `search` type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
 - `IgxOverlay`
     - **Breaking Change** - `target` property in `PositionSettings` has been deprecated. You can set the attaching target for the component to show in `OverlaySettings` instead.
 - `IgxSelect`
     - Added `aria-labelledby` property for the items list container(marked as `role="listbox"`). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
-- `IgxDatePicker`
-    - **Breaking Change** - Deprecated the `label` and `labelVisibility` properties.
+- `IgxDatePicker`	
+    - **Breaking Change** - Deprecated the `label` property.
 
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
+    - Added *getRowData(rowSelector)* method that returns an object that represents the data that is contained in the specified row component.
 - ` IGX_INPUT_GROUP_TYPE` injection token
     - Allows for setting an input group `type` on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a `type`.
 - ` IgxExcelExporterService`
     - Added `worksheetName` property to the `IgxExcelExporterOptions`, that allows setting the name of the worksheet.
 - `IgxDatePicker`
-    - The `labelVisibility` and the `label` property have been deprecated and now a custom label is set by nesting a <label igxLabel></label> inside the <igx-date-picker><igx-date-picker> tags.
+    - The the `label` property have been deprecated and a custom label can also be set by nesting a <label igxLabel></label> inside the <igx-date-picker><igx-date-picker> tags.
 - `IgxTimePicker`
     - Added a custom label functionality.
 - `IgxCalendar` and `IgxDatePicker` - new `showWeekNumbers` input, that allows showing of the week number at left side of content area.
@@ -56,7 +59,7 @@ All notable changes for each version of this project will be documented in this
 - `igxGrid`
     - **Behavioral Change** - For numeric columns, the onCellEdit arguments' newValue will now contain the numeric value that will be committed instead of the string input.
     - Added `onScroll` event, which is emitted when the grid is scrolled vertically or horizontally.
-    - Each grid now expose a default handling for boolean column types. The column will display `check` or `close` icon, instead of true/false by default. 
+    - Each grid now expose a default handling for boolean column types. The column will display `check` or `close` icon, instead of true/false by default.
 - `igxTreeGrid`
     - Removed `onDataPreLoad` event as it is specific for remote virtualization implementation, which is not supported for the `igxTreeGrid`. A more generic `onScroll` event is exposed and can be used instead.
 - `IgxTimePicker`

package-lock.json

@@ -52,6 +52,7 @@
     "@angular/platform-browser": "^10.1.0",
     "@angular/platform-browser-dynamic": "^10.1.0",
     "@angular/router": "^10.1.0",
+    "@igniteui/material-icons-extended": "^2.3.0",
     "@types/hammerjs": "^2.0.36",
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
@@ -62,8 +63,8 @@
     "lodash.merge": "^4.6.2",
     "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^6.6.3",
-    "tslib": "^2.0.0",
     "setimmediate": "^1.0.5",
+    "tslib": "^2.0.0",
     "web-animations-js": "^2.3.2",
     "zone.js": "~0.10.3"
   },

package.json

@@ -1,13 +1,13 @@
 import { Directive, Inject } from '@angular/core';
 import { IgxActionStripComponent } from '../action-strip.component';
 import { IgxRowDirective } from '../../grids/public_api';
-import { IgxGridIconService } from '../../grids/common/grid-icon.service';
+import { IgxIconService } from '../../icon/icon.service';
 
 @Directive({
     selector: '[igxGridActionsBase]'
 })
 export class IgxGridActionsBaseDirective {
-    constructor(@Inject(IgxActionStripComponent) protected strip: IgxActionStripComponent, protected iconService: IgxGridIconService) { }
+    constructor(@Inject(IgxActionStripComponent) protected strip: IgxActionStripComponent, protected iconService: IgxIconService) { }
 
     /**
      * Getter to be used in template

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts

@@ -2,7 +2,10 @@
     <button igxButton="icon" [disabled]="disabled" igxRipple (click)="startEdit($event)">
         <igx-icon>edit</igx-icon>
     </button>
+    <button *ngIf="addRow" igxButton="icon" [disabled]="disabled" igxRipple (click)="addChild($event)">
+        <igx-icon fontSet="imx-icons" name="add-row"></igx-icon>
+    </button>
     <button igxButton="icon" [disabled]="disabled" class="igx-action-strip__delete" igxRipple (click)="deleteRow($event)">
-        <igx-icon >delete</igx-icon>
+        <igx-icon>delete</igx-icon>
     </button>
 </ng-container>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html

@@ -1,6 +1,7 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import { IgxGridActionsBaseDirective } from './grid-actions-base.directive';
 import { showMessage } from '../../core/deprecateDecorators';
+import { addRow } from '@igniteui/material-icons-extended';
 
 @Component({
     selector: 'igx-grid-editing-actions',
@@ -18,6 +19,23 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
     public cssClass = 'igx-action-strip__editing-actions';
 
     private isMessageShown = false;
+    private _addRow = false;
+    private iconsRendered = false;
+
+    /**
+     * An input to enable/disable action strip row adding button
+     */
+    @Input()
+    public set addRow(value: boolean) {
+        this._addRow = value;
+    }
+    public get addRow(): boolean {
+        if (!this.iconsRendered) {
+            this.registerIcons();
+            this.iconsRendered = true;
+        }
+        return this._addRow;
+    }
 
     /**
      * Enter row or cell edit mode depending the grid rowEditable option
@@ -69,6 +87,23 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
         this.strip.hide();
     }
 
+    public addChild(event?): void {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (!this.isRow(this.strip.context)) {
+            return;
+        }
+        const context = this.strip.context;
+        const grid = context.grid;
+        if (!grid.rowEditable) {
+            console.warn('The grid must be in row edit mode to perform row adding!');
+            return;
+        }
+        grid.beginAddRowByIndex(context.rowID, context.index);
+        this.strip.hide();
+    }
+
     /**
      * Getter if the row is disabled
      * @hidden
@@ -80,4 +115,12 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
         }
         return this.strip.context.disabled;
     }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    private registerIcons() {
+        this.iconService.addSvgIconFromText(addRow.name, addRow.value, 'imx-icons');
+    }
 }

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts

@@ -1,14 +1,14 @@
 <ng-container *ngIf="isRowContext">
     <button *ngIf="inPinnedArea && pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
-        <igx-icon fontSet="pinning-actions-icons" name="jump_down"></igx-icon>
+        <igx-icon fontSet="imx-icons" name="jump-down"></igx-icon>
     </button>
     <button *ngIf="inPinnedArea && !pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
-        <igx-icon fontSet="pinning-actions-icons" name="jump_up"></igx-icon>
+        <igx-icon fontSet="imx-icons" name="jump-up"></igx-icon>
     </button>
     <button *ngIf="!pinned" igxRipple igxButton="icon" (click)="pin($event)">
-        <igx-icon fontSet="pinning-icons" name="pin"></igx-icon>
+        <igx-icon fontSet="imx-icons" name="pin-left"></igx-icon>
     </button>
     <button *ngIf="pinned" igxRipple igxButton="icon" (click)="unpin($event)">
-        <igx-icon fontSet="pinning-icons" name="unpin"></igx-icon>
+        <igx-icon fontSet="imx-icons" name="unpin-left"></igx-icon>
     </button>
-</ng-container>
+</ng-container>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions-icons.ts

@@ -39,8 +39,8 @@ describe('igxGridPinningActions #grid ', () => {
         let pinIcon, unpinIcon;
         actionStrip.show(grid.rowList.first);
         fixture.detectChanges();
-        pinIcon = fixture.debugElement.query(By.css(`igx-icon[name=pin]`));
-        unpinIcon = fixture.debugElement.query(By.css(`igx-icon[name=unpin]`));
+        pinIcon = fixture.debugElement.query(By.css(`igx-icon[name=pin-left]`));
+        unpinIcon = fixture.debugElement.query(By.css(`igx-icon[name=unpin-left]`));
         expect(unpinIcon).toBeNull();
         pinIcon.parent.triggerEventHandler('click', new Event('click'));
         actionStrip.hide();
@@ -49,8 +49,8 @@ describe('igxGridPinningActions #grid ', () => {
 
         actionStrip.show(grid.pinnedRows[0]);
         fixture.detectChanges();
-        pinIcon = fixture.debugElement.query(By.css(`igx-icon[name=pin]`));
-        unpinIcon = fixture.debugElement.query(By.css(`igx-icon[name=unpin]`));
+        pinIcon = fixture.debugElement.query(By.css(`igx-icon[name=pin-left]`));
+        unpinIcon = fixture.debugElement.query(By.css(`igx-icon[name=unpin-left]`));
         expect(pinIcon).toBe(null);
         unpinIcon.parent.triggerEventHandler('click', new Event('click'));
         actionStrip.hide();
@@ -65,7 +65,7 @@ describe('igxGridPinningActions #grid ', () => {
         actionStrip.show(grid.pinnedRows[0]);
         fixture.detectChanges();
 
-        const jumpIcon = fixture.debugElement.query(By.css(`igx-icon[name=jump_down]`));
+        const jumpIcon = fixture.debugElement.query(By.css(`igx-icon[name=jump-down]`));
         jumpIcon.parent.triggerEventHandler('click', new Event('click'));
         await wait();
         fixture.detectChanges();

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html

@@ -1,8 +1,6 @@
 import { Component, HostBinding } from '@angular/core';
 import { IgxGridActionsBaseDirective } from './grid-actions-base.directive';
-import { GridIconsFeature } from '../../grids/common/enums';
-import { PINNING_ACTIONS_ICONS_FONT_SET, PINNING_ACTIONS_ICONS, } from './grid-pinning-actions-icons';
-import { PINNING_ICONS_FONT_SET, PINNING_ICONS } from '../../grids/pinning/pinning-icons';
+import { pinLeft, unpinLeft, jumpDown, jumpUp } from '@igniteui/material-icons-extended';
 @Component({
     selector: 'igx-grid-pinning-actions',
     templateUrl: 'grid-pinning-actions.component.html',
@@ -119,8 +117,10 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
         const context = this.strip.context;
         const grid = context.grid;
         if (grid) {
-            this.iconService.registerSVGIcons(GridIconsFeature.RowPinning, PINNING_ICONS, PINNING_ICONS_FONT_SET);
-            this.iconService.registerSVGIcons(GridIconsFeature.RowPinningActions, PINNING_ACTIONS_ICONS, PINNING_ACTIONS_ICONS_FONT_SET);
+            this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(jumpDown.name, jumpDown.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(jumpUp.name, jumpDown.value, 'imx-icons');
         }
     }
 }