igniteui-angular 12.1.4 → 12.1.8

package/fesm2015/igniteui-angular.js

@@ -1340,6 +1340,7 @@ const yieldingLoop = (count, chunkSize, callback, done) => {
     };
     chunk();
 };
+const isConstructor = (ref) => typeof ref === 'function' && Boolean(ref.prototype) && Boolean(ref.prototype.constructor);
 const reverseAnimationResolver = (animation) => { var _a; return (_a = oppositeAnimation.get(animation)) !== null && _a !== void 0 ? _a : animation; };
 const isHorizontalAnimation = (animation) => horizontalAnimations.includes(animation);
 const isVerticalAnimation = (animation) => verticalAnimations.includes(animation);
@@ -6397,8 +6398,8 @@ class IgxRowAddCrudState extends IgxRowCrudState {
      * @hidden @internal
      */
     createAddRowParent(row, newRowAsChild) {
-        const rowIndex = row ? row.index : this.grid.rowList.length - 1;
-        const rowId = row ? row.rowID : (rowIndex >= 0 ? this.grid.rowList.last.rowID : null);
+        const rowIndex = row ? row.index : -1;
+        const rowId = row ? row.rowID : null;
         const isInPinnedArea = this.grid.isRecordPinnedByViewIndex(rowIndex);
         const pinIndex = this.grid.pinnedRecords.findIndex(x => x[this.primaryKey] === rowId);
         const unpinIndex = this.grid.getUnpinnedIndexById(rowId);
@@ -6524,6 +6525,7 @@ class IgxGridCRUDService extends IgxRowAddCrudState {
         this.grid.navigateTo(this.row.index, -1);
         const dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index);
         dummyRow.triggerAddAnimation();
+        dummyRow.cdr.detectChanges();
         dummyRow.addAnimationEnd.pipe(first$1()).subscribe(() => {
             const cell = dummyRow.cells.find(c => c.editable);
             if (cell) {
@@ -6666,6 +6668,20 @@ class GridBaseAPIService {
     get_row_by_index(rowIndex) {
         return this.grid.rowList.find((row) => row.index === rowIndex);
     }
+    /**
+     * Gets the rowID of the record at the specified data view index
+     *
+     * @param index
+     * @param dataCollection
+     */
+    get_rec_id_by_index(index, dataCollection) {
+        dataCollection = dataCollection || this.grid.data;
+        if (index >= 0 && index < dataCollection.length) {
+            const rec = dataCollection[index];
+            return this.grid.primaryKey ? rec[this.grid.primaryKey] : rec;
+        }
+        return null;
+    }
     get_cell_by_key(rowSelector, field) {
         const row = this.get_row_by_key(rowSelector);
         if (row && row.cells) {
@@ -6925,6 +6941,16 @@ class GridBaseAPIService {
     get_rec_by_id(rowID) {
         return this.grid.primaryKey ? this.getRowData(rowID) : rowID;
     }
+    /**
+     * Returns the index of the record in the data view by pk or -1 if not found or primaryKey is not set.
+     *
+     * @param pk
+     * @param dataCollection
+     */
+    get_rec_index_by_id(pk, dataCollection) {
+        dataCollection = dataCollection || this.grid.data;
+        return this.grid.primaryKey ? dataCollection.findIndex(rec => rec[this.grid.primaryKey] === pk) : -1;
+    }
     allow_expansion_state_change(rowID, expanded) {
         return this.grid.expansionStates.get(rowID) !== expanded;
     }
@@ -9521,7 +9547,9 @@ class IgxColumnComponent {
      * @memberof IgxColumnComponent
      */
     set summaries(classRef) {
-        this._summaries = new classRef();
+        if (isConstructor(classRef)) {
+            this._summaries = new classRef();
+        }
         if (this.grid) {
             this.grid.summaryService.removeSummariesCachePerColumn(this.field);
             this.grid.summaryPipeTrigger++;
@@ -19329,6 +19357,15 @@ const TreeResourceStringsEN = {
 
 /**
  * @hidden
+ * IF YOU EDIT THIS OBJECT, DO NOT FORGET TO UPDATE
+ * projects/igniteui-angular-i18n as well (create the appropriately named files,
+ * containing the new/updated component string keys and EN strings for values + create a separate issue + pending-localization label)
+ *
+ * TODO Add automation tests:
+ * 1) each of the folders/languages under \projects\igniteui-angular-i18n\src\ contain resources.ts file with matching components count.
+ *    \projects\igniteui-angular-i18n\src\BG\resources.ts contains IgxResourceStringsBG.count matching this.CurrentResourceStrings.count
+ * 2) \igniteui-angular\projects\igniteui-angular\src\public_api.ts --> Check if the new interface is added
+ *    to IInputResourceStrings (just a proxy as it is later on imported in the angular-i18n package)
  */
 const CurrentResourceStrings = {
     GridResStrings: cloneValue(GridResourceStringsEN),
@@ -21150,7 +21187,13 @@ class IgxDragDirective {
             owner: this,
             originalEvent
         };
-        const elementsFromPoint = this.getElementsAtPoint(pageX, pageY);
+        let elementsFromPoint = this.getElementsAtPoint(pageX, pageY);
+        // Check for shadowRoot instance and use it if present
+        for (const elFromPoint of elementsFromPoint) {
+            if ((elFromPoint === null || elFromPoint === void 0 ? void 0 : elFromPoint.shadowRoot) !== null) {
+                elementsFromPoint = elFromPoint.shadowRoot.elementsFromPoint(pageX, pageY);
+            }
+        }
         for (const element of elementsFromPoint) {
             if (element.getAttribute('droppable') === 'true' &&
                 element !== this.ghostElement && element !== this.element.nativeElement) {
@@ -37042,7 +37085,7 @@ let NEXT_ID$b = 0;
  * ```
  */
 class IgxDatePickerComponent extends PickerBaseDirective {
-    constructor(element, _localeId, _overlayService, _moduleRef, _injector, _renderer, platform, _displayDensityOptions, _inputGroupType) {
+    constructor(element, _localeId, _overlayService, _moduleRef, _injector, _renderer, platform, cdr, _displayDensityOptions, _inputGroupType) {
         super(element, _localeId, _displayDensityOptions, _inputGroupType);
         this.element = element;
         this._localeId = _localeId;
@@ -37051,6 +37094,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
         this._injector = _injector;
         this._renderer = _renderer;
         this.platform = platform;
+        this.cdr = cdr;
         this._displayDensityOptions = _displayDensityOptions;
         this._inputGroupType = _inputGroupType;
         /**
@@ -37507,6 +37551,10 @@ class IgxDatePickerComponent extends PickerBaseDirective {
         if (this._ngControl) {
             this._statusChanges$ =
                 this._ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this));
+            if (this._ngControl.control.validator) {
+                this.inputGroup.isRequired = this.required;
+                this.cdr.detectChanges();
+            }
         }
     }
     /** @hidden @internal */
@@ -37715,6 +37763,7 @@ IgxDatePickerComponent.ctorParameters = () => [
     { type: Injector },
     { type: Renderer2 },
     { type: PlatformUtil },
+    { type: ChangeDetectorRef },
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DisplayDensityToken,] }] },
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [IGX_INPUT_GROUP_TYPE,] }] }
 ];
@@ -39148,7 +39197,7 @@ class IgxExcelStyleClearFiltersComponent {
 IgxExcelStyleClearFiltersComponent.decorators = [
     { type: Component, args: [{
                 selector: 'igx-excel-style-clear-filters',
-                template: "<div *ngIf=\"esf.column\"\n    tabindex=\"0\"\n    [ngClass]=\"clearFilterClass()\"\n    (keydown)=\"onClearFilterKeyDown($event)\"\n    (click)=\"clearFilter()\">\n    <span>{{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}</span>\n    <igx-icon>clear</igx-icon>\n</div>\n"
+                template: "<div *ngIf=\"esf.column\"\n    tabindex=\"0\"\n    [ngClass]=\"clearFilterClass()\"\n    (keydown)=\"onClearFilterKeyDown($event)\"\n    (click)=\"clearFilter()\"\n    role=\"menuitem\">\n    <span>{{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}</span>\n    <igx-icon>clear</igx-icon>\n</div>\n"
             },] }
 ];
 IgxExcelStyleClearFiltersComponent.ctorParameters = () => [
@@ -40972,7 +41021,7 @@ IgxExcelStyleConditionalFilterComponent.decorators = [
     { type: Component, args: [{
                 preserveWhitespaces: false,
                 selector: 'igx-excel-style-conditional-filter',
-                template: "<ng-container *ngIf=\"esf.column\">\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\">\n        <span>{{ subMenuText }}</span>\n        <igx-icon>keyboard_arrow_right</igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        [displayDensity]=\"esf.grid.displayDensity\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\"\n        [allowItemsFocus]=\"true\">\n        <div>\n            <igx-drop-down-item\n            *ngFor=\"let condition of conditions\"\n            [value]=\"condition\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                </div>\n            </igx-drop-down-item>\n            <igx-drop-down-item *ngIf=\"showCustomFilterItem()\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon>filter_list</igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                </div>\n            </igx-drop-down-item>\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\"\n        [overlayService]=\"esf.overlayService\"\n        [displayDensity]=\"esf.grid.displayDensity\">\n    </igx-excel-style-custom-dialog>\n</ng-container>\n"
+                template: "<ng-container *ngIf=\"esf.column\">\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\">\n        <span>{{ subMenuText }}</span>\n        <igx-icon>keyboard_arrow_right</igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        [displayDensity]=\"esf.grid.displayDensity\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\"\n        [allowItemsFocus]=\"true\">\n        <div>\n            <igx-drop-down-item\n            *ngFor=\"let condition of conditions\"\n            [value]=\"condition\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                </div>\n            </igx-drop-down-item>\n            <igx-drop-down-item *ngIf=\"showCustomFilterItem()\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon>filter_list</igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                </div>\n            </igx-drop-down-item>\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\"\n        [overlayService]=\"esf.overlayService\"\n        [displayDensity]=\"esf.grid.displayDensity\">\n    </igx-excel-style-custom-dialog>\n</ng-container>\n"
             },] }
 ];
 IgxExcelStyleConditionalFilterComponent.ctorParameters = () => [
@@ -41020,7 +41069,7 @@ IgxExcelStyleHidingComponent.decorators = [
     { type: Component, args: [{
                 preserveWhitespaces: false,
                 selector: 'igx-excel-style-hiding',
-                template: "<div *ngIf=\"esf.column\"\n    class=\"igx-excel-filter__actions-hide\"\n    tabindex=\"0\"\n    (click)=\"esf.onHideToggle()\">\n    <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>\n    <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n</div>\n"
+                template: "<div *ngIf=\"esf.column\"\n    class=\"igx-excel-filter__actions-hide\"\n    tabindex=\"0\"\n    (click)=\"esf.onHideToggle()\"\n    role=\"menuitem\">\n    <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>\n    <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n</div>\n"
             },] }
 ];
 IgxExcelStyleHidingComponent.ctorParameters = () => [
@@ -41138,7 +41187,7 @@ IgxExcelStylePinningComponent.decorators = [
     { type: Component, args: [{
                 preserveWhitespaces: false,
                 selector: 'igx-excel-style-pinning',
-                template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'\"\n    (click)=\"esf.onPin()\"\n    tabindex=\"0\">\n    <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>\n    <igx-icon family=\"imx-icons\" name=\"{{ esf.column.pinned ? 'unpin-left' : 'pin-left' }}\"></igx-icon>\n</div>\n"
+                template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'\"\n    (click)=\"esf.onPin()\"\n    tabindex=\"0\"\n    role=\"menuitem\">\n    <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>\n    <igx-icon family=\"imx-icons\" name=\"{{ esf.column.pinned ? 'unpin-left' : 'pin-left' }}\"></igx-icon>\n</div>\n"
             },] }
 ];
 IgxExcelStylePinningComponent.ctorParameters = () => [
@@ -42615,7 +42664,7 @@ IgxExcelStyleSelectingComponent.decorators = [
     { type: Component, args: [{
                 preserveWhitespaces: false,
                 selector: 'igx-excel-style-selecting',
-                template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.selectedClass()\"\n    tabindex=\"0\"\n    (click)=\"esf.onSelect()\">\n    <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n    <igx-icon>done</igx-icon>\n</div>\n"
+                template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.selectedClass()\"\n    tabindex=\"0\"\n    (click)=\"esf.onSelect()\"\n    role=\"button\"\n    [attr.aria-pressed]=\"esf.column.selected\">\n    <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n    <igx-icon>done</igx-icon>\n</div>\n"
             },] }
 ];
 IgxExcelStyleSelectingComponent.ctorParameters = () => [
@@ -46374,6 +46423,48 @@ class IgxSnackbarComponent extends IgxNotificationsDirective {
          * ```
          */
         this.animationDone = new EventEmitter();
+        this._positionSettings = {
+            horizontalDirection: HorizontalAlignment.Center,
+            verticalDirection: VerticalAlignment.Bottom,
+            openAnimation: useAnimation(fadeIn, { params: { duration: '.35s', easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+                    fromPosition: 'translateY(100%)', toPosition: 'translateY(0)' } }),
+            closeAnimation: useAnimation(fadeOut, { params: { duration: '.2s', easing: 'cubic-bezier(0.4, 0.0, 1, 1)',
+                    fromPosition: 'translateY(0)', toPosition: 'translateY(100%)' } }),
+        };
+    }
+    /**
+     * Get the position and animation settings used by the snackbar.
+     * ```typescript
+     * @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
+     * let currentPosition: PositionSettings = this.snackbar.positionSettings
+     * ```
+     */
+    get positionSettings() {
+        return this._positionSettings;
+    }
+    /**
+     * Set the position and animation settings used by the snackbar.
+     * ```html
+     * <igx-snackbar [positionSettings]="newPositionSettings"></igx-snackbar>
+     * ```
+     * ```typescript
+     * import { slideInTop, slideOutBottom } from 'igniteui-angular';
+     * ...
+     * @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
+     *  public newPositionSettings: PositionSettings = {
+     *      openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}),
+     *      closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}),
+     *      horizontalDirection: HorizontalAlignment.Left,
+     *      verticalDirection: VerticalAlignment.Middle,
+     *      horizontalStartPoint: HorizontalAlignment.Left,
+     *      verticalStartPoint: VerticalAlignment.Middle,
+     *      minSize: { height: 100, width: 100 }
+     *  };
+     * this.snackbar.positionSettings = this.newPositionSettings;
+     * ```
+     */
+    set positionSettings(settings) {
+        this._positionSettings = settings;
     }
     /**
      * Shows the snackbar and hides it after the `displayTime` is over if `autoHide` is set to `true`.
@@ -46385,31 +46476,25 @@ class IgxSnackbarComponent extends IgxNotificationsDirective {
         if (message !== undefined) {
             this.textMessage = message;
         }
-        const snackbarSettings = {
-            horizontalDirection: HorizontalAlignment.Center,
-            verticalDirection: VerticalAlignment.Bottom,
-            openAnimation: useAnimation(slideInBottom, {
-                params: {
-                    duration: '.35s',
-                    easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
-                    fromPosition: 'translateY(100%)',
-                    toPosition: 'translateY(0)'
-                }
-            }),
-            closeAnimation: useAnimation(slideOutBottom, {
-                params: {
-                    duration: '.2s',
-                    easing: 'cubic-bezier(0.4, 0.0, 1, 1)',
-                    fromPosition: 'translateY(0)',
-                    toOpacity: 1,
-                    toPosition: 'translateY(100%)'
-                }
-            })
-        };
-        this.strategy = this.outlet ? new ContainerPositionStrategy(snackbarSettings)
-            : new GlobalPositionStrategy(snackbarSettings);
+        this.strategy = this.outlet ? new ContainerPositionStrategy(this.positionSettings)
+            : new GlobalPositionStrategy(this.positionSettings);
         super.open();
     }
+    /**
+     * Opens or closes the snackbar, depending on its current state.
+     *
+     * ```typescript
+     * this.snackbar.toggle();
+     * ```
+     */
+    toggle() {
+        if (this.collapsed || this.isClosing) {
+            this.open();
+        }
+        else {
+            this.close();
+        }
+    }
     /**
      * @hidden
      */
@@ -46442,7 +46527,8 @@ IgxSnackbarComponent.propDecorators = {
     actionText: [{ type: Input }],
     clicked: [{ type: Output }],
     animationStarted: [{ type: Output }],
-    animationDone: [{ type: Output }]
+    animationDone: [{ type: Output }],
+    positionSettings: [{ type: Input }]
 };
 /**
  * @hidden
@@ -46871,7 +46957,7 @@ class IgxGridFilteringRowComponent {
             .subscribe(() => {
             this.cdr.markForCheck();
         });
-        this.focusEditElement();
+        requestAnimationFrame(() => this.focusEditElement());
     }
     get disabled() {
         return !(this.column.filteringExpressionsTree && this.column.filteringExpressionsTree.filteringOperands.length > 0);
@@ -49183,6 +49269,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             positionStrategy: this.rowEditPositioningStrategy
         };
         this.transactionChange$ = new Subject();
+        this._rendered = false;
         this.DRAG_SCROLL_DELTA = 10;
         /**
          * @hidden @internal
@@ -50985,6 +51072,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
                 this.paginator.totalRecords = this.totalRecords;
                 this.paginator.overlaySettings = { outlet: this.outlet };
             }
+            this._rendered = true;
         });
         Promise.resolve().then(() => this.rendered.next(true));
     }
@@ -51303,16 +51391,23 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     get summariesMargin() {
         return this.featureColumnsWidth();
     }
+    /**
+     * @hidden
+     * @internal
+     */
+    get columns() {
+        return this._columns;
+    }
     /**
      * Gets an array of `IgxColumnComponent`s.
      *
      * @example
      * ```typescript
-     * const colums = this.grid.columns.
+     * const colums = this.grid.columnsCollection.
      * ```
      */
-    get columns() {
-        return this._columns;
+    get columnsCollection() {
+        return this._rendered ? this._columns : [];
     }
     /**
      * Gets an array of the pinned `IgxColumnComponent`s.
@@ -53055,6 +53150,92 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     endEdit(commit = true, event) {
         this.crudService.endEdit(commit, event);
     }
+    /**
+     * Enters add mode by spawning the UI under the specified row by rowID.
+     *
+     * @remarks
+     * If null is passed as rowID, the row adding UI is spawned as the first record in the data view
+     * @remarks
+     * Spawning the UI to add a child for a record only works if you provide a rowID
+     * @example
+     * ```typescript
+     * this.grid.beginAddRowById('ALFKI');
+     * this.grid.beginAddRowById('ALFKI', true);
+     * this.grid.beginAddRowById(null);
+     * ```
+     * @param rowID - The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view
+     * @param asChild - Whether the record should be added as a child. Only applicable to igxTreeGrid.
+     */
+    beginAddRowById(rowID, asChild) {
+        let index = rowID;
+        if (rowID == null) {
+            if (asChild) {
+                console.warn('The record cannot be added as a child to an unspecified record.');
+                return;
+            }
+            index = 0;
+        }
+        else {
+            // find the index of the record with that PK
+            index = this.gridAPI.get_rec_index_by_id(rowID, this.dataView);
+            rowID = index;
+            if (index === -1) {
+                console.warn('No row with the specified ID was found.');
+                return;
+            }
+        }
+        if (!this.dataView.length) {
+            this.beginAddRowForIndex(rowID, asChild);
+            return;
+        }
+        // check if the index is valid - won't support anything outside the data view
+        if (index >= 0 && index < this.dataView.length) {
+            // check if the index is in the view port
+            if ((index < this.virtualizationState.startIndex ||
+                index >= this.virtualizationState.startIndex + this.virtualizationState.chunkSize) &&
+                !this.isRecordPinnedByViewIndex(index)) {
+                this.verticalScrollContainer.chunkLoad
+                    .pipe(first$1(), takeUntil(this.destroy$))
+                    .subscribe(() => {
+                    this.beginAddRowForIndex(rowID, asChild);
+                });
+                this.navigateTo(index);
+                this.notifyChanges(true);
+                return;
+            }
+            this.beginAddRowForIndex(rowID, asChild);
+        }
+        else {
+            console.warn('The row with the specified PK or index is outside of the current data view.');
+        }
+    }
+    /**
+     * Enters add mode by spawning the UI at the specified index.
+     *
+     * @remarks
+     * Accepted values for index are integers from 0 to this.grid.dataView.length
+     * @example
+     * ```typescript
+     * this.grid.beginAddRowByIndex(0);
+     * ```
+     * @param index - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
+     */
+    beginAddRowByIndex(index) {
+        if (index === 0) {
+            return this.beginAddRowById(null);
+        }
+        return this.beginAddRowById(this.gridAPI.get_rec_id_by_index(index - 1, this.dataView));
+    }
+    beginAddRowForIndex(index, asChild = false) {
+        const row = index == null ?
+            null : this.rowList.find(r => r.index === index);
+        if (row !== undefined) {
+            this.crudService.enterAddRowMode(row, asChild);
+        }
+        else {
+            console.warn('No row with the specified PK or index was found.');
+        }
+    }
     switchTransactionService(val) {
         if (val) {
             this._transactions = this.transactionFactory.create("Base" /* Base */);
@@ -60272,7 +60453,8 @@ class IgxGridGroupByRowComponent {
      * @hidden @internal
      */
     get selectedRowsInTheGroup() {
-        return this.groupRow.records.filter(rowID => this.gridSelection.filteredSelectedRowIds.indexOf(this.getRowID(rowID)) > -1);
+        const selectedIds = this.gridSelection.filteredSelectedRowIds;
+        return this.groupRow.records.filter(rowID => selectedIds.indexOf(this.getRowID(rowID)) > -1);
     }
     /**
      * @hidden @internal
@@ -61134,6 +61316,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
      */
     clearGrouping(name) {
         this._gridAPI.clear_groupby(name);
+        this.calculateGridSizes();
         this.notifyChanges(true);
     }
     preventHeaderScroll(args) {
@@ -63755,6 +63938,30 @@ class IgxTreeGridAPIService extends GridBaseAPIService {
     get_rec_by_id(rowID) {
         return this.grid.records.get(rowID);
     }
+    /**
+     * Gets the rowID of the record at the specified data view index
+     *
+     * @param index
+     * @param dataCollection
+     */
+    get_rec_id_by_index(index, dataCollection) {
+        dataCollection = dataCollection || this.grid.data;
+        if (index >= 0 && index < dataCollection.length) {
+            const rec = dataCollection[index];
+            return this.grid.primaryKey ? rec.data[this.grid.primaryKey] : rec.data;
+        }
+        return null;
+    }
+    /**
+     * Returns the index of the record in the data view by pk or -1 if not found or primaryKey is not set.
+     *
+     * @param pk
+     * @param dataCollection
+     */
+    get_rec_index_by_id(pk, dataCollection) {
+        dataCollection = dataCollection || this.grid.data;
+        return this.grid.primaryKey ? dataCollection.findIndex(rec => rec.data[this.grid.primaryKey] === pk) : -1;
+    }
     addRowToData(data, parentRowID) {
         if (parentRowID !== undefined && parentRowID !== null) {
             const state = this.grid.transactions.getState(parentRowID);
@@ -64635,6 +64842,31 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         this.pipeTrigger++;
         this.notifyChanges();
     }
+    /**
+     * Enters add mode by spawning the UI with the context of the specified row by index.
+     *
+     * @remarks
+     * Accepted values for index are integers from 0 to this.grid.dataView.length
+     * @remarks
+     * When adding the row as a child, the parent row is the specified row.
+     * @remarks
+     * To spawn the UI on top, call the function with index = null or a negative number.
+     * In this case trying to add this row as a child will result in error.
+     * @example
+     * ```typescript
+     * this.grid.beginAddRowByIndex(10);
+     * this.grid.beginAddRowByIndex(10, true);
+     * this.grid.beginAddRowByIndex(null);
+     * ```
+     * @param index - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
+     * @param asChild - Whether the record should be added as a child. Only applicable to igxTreeGrid.
+     */
+    beginAddRowByIndex(index, asChild) {
+        if (index === null || index < 0) {
+            return this.beginAddRowById(null, asChild);
+        }
+        return this.beginAddRowById(this.gridAPI.get_rec_id_by_index(index, this.dataView), asChild);
+    }
     /**
      * @hidden
      */
@@ -71479,8 +71711,6 @@ class IgxTabsDirective extends IgxCarouselComponentBase {
     /** @hidden */
     constructor(builder) {
         super(builder);
-        /** @hidden */
-        this.role = 'tabs';
         /**
          * Output to enable support for two-way binding on [(selectedIndex)]
          */
@@ -71707,7 +71937,6 @@ IgxTabsDirective.ctorParameters = () => [
     { type: AnimationBuilder }
 ];
 IgxTabsDirective.propDecorators = {
-    role: [{ type: HostBinding, args: ['attr.role',] }],
     selectedIndex: [{ type: Input }],
     disableAnimation: [{ type: Input }],
     selectedIndexChange: [{ type: Output }],
@@ -72397,6 +72626,49 @@ class IgxToastComponent extends IgxNotificationsDirective {
          * @memberof IgxToastComponent
          */
         this.position = 'bottom';
+        this._positionSettings = {
+            horizontalDirection: HorizontalAlignment.Center,
+            verticalDirection: this.position === 'bottom'
+                ? VerticalAlignment.Bottom
+                : this.position === 'middle'
+                    ? VerticalAlignment.Middle
+                    : VerticalAlignment.Top,
+            openAnimation: useAnimation(fadeIn),
+            closeAnimation: useAnimation(fadeOut),
+        };
+    }
+    /**
+     * Get the position and animation settings used by the toast.
+     * ```typescript
+     * @ViewChild('toast', { static: true }) public toast: IgxToastComponent;
+     * let currentPosition: PositionSettings = this.toast.positionSettings
+     * ```
+     */
+    get positionSettings() {
+        return this._positionSettings;
+    }
+    /**
+     * Set the position and animation settings used by the toast.
+     * ```html
+     * <igx-toast [positionSettings]="newPositionSettings"></igx-toast>
+     * ```
+     * ```typescript
+     * import { slideInTop, slideOutBottom } from 'igniteui-angular';
+     * ...
+     * @ViewChild('toast', { static: true }) public toast: IgxToastComponent;
+     *  public newPositionSettings: PositionSettings = {
+     *      openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}),
+     *      closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}),
+     *      horizontalDirection: HorizontalAlignment.Left,
+     *      verticalDirection: VerticalAlignment.Middle,
+     *      horizontalStartPoint: HorizontalAlignment.Left,
+     *      verticalStartPoint: VerticalAlignment.Middle
+     *  };
+     * this.toast.positionSettings = this.newPositionSettings;
+     * ```
+     */
+    set positionSettings(settings) {
+        this._positionSettings = settings;
     }
     /**
      * Gets the nativeElement of the toast.
@@ -72421,17 +72693,24 @@ class IgxToastComponent extends IgxNotificationsDirective {
         if (message !== undefined) {
             this.textMessage = message;
         }
-        const toastSettings = {
-            horizontalDirection: HorizontalAlignment.Center,
-            verticalDirection: this.position === 'bottom'
-                ? VerticalAlignment.Bottom
-                : this.position === 'middle'
-                    ? VerticalAlignment.Middle
-                    : VerticalAlignment.Top
-        };
-        this.strategy = new GlobalPositionStrategy(toastSettings);
+        this.strategy = new GlobalPositionStrategy(this.positionSettings);
         super.open();
     }
+    /**
+     * Opens or closes the toast, depending on its current state.
+     *
+     * ```typescript
+     * this.toast.toggle();
+     * ```
+     */
+    toggle() {
+        if (this.collapsed || this.isClosing) {
+            this.open();
+        }
+        else {
+            this.close();
+        }
+    }
     /**
      * @hidden
      */
@@ -72463,7 +72742,8 @@ IgxToastComponent.propDecorators = {
     id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
     role: [{ type: HostBinding, args: ['attr.role',] }, { type: Input }],
     isVisibleChange: [{ type: Output }],
-    position: [{ type: Input }]
+    position: [{ type: Input }],
+    positionSettings: [{ type: Input }]
 };
 /**
  * @hidden