igniteui-angular 12.1.4 → 12.1.8

package/bundles/igniteui-angular.umd.js

@@ -1729,6 +1729,7 @@
         };
         chunk();
     };
+    var isConstructor = function (ref) { return typeof ref === 'function' && Boolean(ref.prototype) && Boolean(ref.prototype.constructor); };
     var reverseAnimationResolver = function (animation) { var _a; return (_a = oppositeAnimation.get(animation)) !== null && _a !== void 0 ? _a : animation; };
     var isHorizontalAnimation = function (animation) { return horizontalAnimations.includes(animation); };
     var isVerticalAnimation = function (animation) { return verticalAnimations.includes(animation); };
@@ -7143,8 +7144,8 @@
          */
         IgxRowAddCrudState.prototype.createAddRowParent = function (row, newRowAsChild) {
             var _this = this;
-            var rowIndex = row ? row.index : this.grid.rowList.length - 1;
-            var rowId = row ? row.rowID : (rowIndex >= 0 ? this.grid.rowList.last.rowID : null);
+            var rowIndex = row ? row.index : -1;
+            var rowId = row ? row.rowID : null;
             var isInPinnedArea = this.grid.isRecordPinnedByViewIndex(rowIndex);
             var pinIndex = this.grid.pinnedRecords.findIndex(function (x) { return x[_this.primaryKey] === rowId; });
             var unpinIndex = this.grid.getUnpinnedIndexById(rowId);
@@ -7278,6 +7279,7 @@
             this.grid.navigateTo(this.row.index, -1);
             var dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index);
             dummyRow.triggerAddAnimation();
+            dummyRow.cdr.detectChanges();
             dummyRow.addAnimationEnd.pipe(operators.first()).subscribe(function () {
                 var cell = dummyRow.cells.find(function (c) { return c.editable; });
                 if (cell) {
@@ -7425,6 +7427,20 @@
         GridBaseAPIService.prototype.get_row_by_index = function (rowIndex) {
             return this.grid.rowList.find(function (row) { return row.index === rowIndex; });
         };
+        /**
+         * Gets the rowID of the record at the specified data view index
+         *
+         * @param index
+         * @param dataCollection
+         */
+        GridBaseAPIService.prototype.get_rec_id_by_index = function (index, dataCollection) {
+            dataCollection = dataCollection || this.grid.data;
+            if (index >= 0 && index < dataCollection.length) {
+                var rec = dataCollection[index];
+                return this.grid.primaryKey ? rec[this.grid.primaryKey] : rec;
+            }
+            return null;
+        };
         GridBaseAPIService.prototype.get_cell_by_key = function (rowSelector, field) {
             var row = this.get_row_by_key(rowSelector);
             if (row && row.cells) {
@@ -7696,6 +7712,17 @@
         GridBaseAPIService.prototype.get_rec_by_id = function (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
+         */
+        GridBaseAPIService.prototype.get_rec_index_by_id = function (pk, dataCollection) {
+            var _this = this;
+            dataCollection = dataCollection || this.grid.data;
+            return this.grid.primaryKey ? dataCollection.findIndex(function (rec) { return rec[_this.grid.primaryKey] === pk; }) : -1;
+        };
         GridBaseAPIService.prototype.allow_expansion_state_change = function (rowID, expanded) {
             return this.grid.expansionStates.get(rowID) !== expanded;
         };
@@ -10609,7 +10636,9 @@
              * @memberof IgxColumnComponent
              */
             set: function (classRef) {
-                this._summaries = new classRef();
+                if (isConstructor(classRef)) {
+                    this._summaries = new classRef();
+                }
                 if (this.grid) {
                     this.grid.summaryService.removeSummariesCachePerColumn(this.field);
                     this.grid.summaryPipeTrigger++;
@@ -21659,6 +21688,15 @@
 
     /**
      * @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)
      */
     var CurrentResourceStrings = {
         GridResStrings: cloneValue(GridResourceStringsEN),
@@ -23729,7 +23767,7 @@
          * Dispatch custom igxDragEnter/igxDragLeave events based on current pointer position and if drop area is under.
          */
         IgxDragDirective.prototype.dispatchDragEvents = function (pageX, pageY, originalEvent) {
-            var e_1, _a;
+            var e_1, _a, e_2, _b;
             var topDropArea;
             var customEventArgs = {
                 startX: this._startX,
@@ -23741,8 +23779,24 @@
             };
             var elementsFromPoint = this.getElementsAtPoint(pageX, pageY);
             try {
+                // Check for shadowRoot instance and use it if present
                 for (var elementsFromPoint_1 = __values(elementsFromPoint), elementsFromPoint_1_1 = elementsFromPoint_1.next(); !elementsFromPoint_1_1.done; elementsFromPoint_1_1 = elementsFromPoint_1.next()) {
-                    var element = elementsFromPoint_1_1.value;
+                    var elFromPoint = elementsFromPoint_1_1.value;
+                    if ((elFromPoint === null || elFromPoint === void 0 ? void 0 : elFromPoint.shadowRoot) !== null) {
+                        elementsFromPoint = elFromPoint.shadowRoot.elementsFromPoint(pageX, pageY);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (elementsFromPoint_1_1 && !elementsFromPoint_1_1.done && (_a = elementsFromPoint_1.return)) _a.call(elementsFromPoint_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            try {
+                for (var elementsFromPoint_2 = __values(elementsFromPoint), elementsFromPoint_2_1 = elementsFromPoint_2.next(); !elementsFromPoint_2_1.done; elementsFromPoint_2_1 = elementsFromPoint_2.next()) {
+                    var element = elementsFromPoint_2_1.value;
                     if (element.getAttribute('droppable') === 'true' &&
                         element !== this.ghostElement && element !== this.element.nativeElement) {
                         topDropArea = element;
@@ -23750,12 +23804,12 @@
                     }
                 }
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (elementsFromPoint_1_1 && !elementsFromPoint_1_1.done && (_a = elementsFromPoint_1.return)) _a.call(elementsFromPoint_1);
+                    if (elementsFromPoint_2_1 && !elementsFromPoint_2_1.done && (_b = elementsFromPoint_2.return)) _b.call(elementsFromPoint_2);
                 }
-                finally { if (e_1) throw e_1.error; }
+                finally { if (e_2) throw e_2.error; }
             }
             if (topDropArea &&
                 (!this._lastDropArea || (this._lastDropArea && this._lastDropArea !== topDropArea))) {
@@ -24184,7 +24238,7 @@
             return window.scrollX ? window.scrollX : (window.pageXOffset ? window.pageXOffset : 0);
         };
         IgxDropDirective.prototype.isDragLinked = function (drag) {
-            var e_2, _a, e_3, _b, e_4, _c, e_5, _d;
+            var e_3, _a, e_4, _b, e_5, _c, e_6, _d;
             var dragLinkArray = drag.dragChannel instanceof Array;
             var dropLinkArray = this.dropChannel instanceof Array;
             if (!dragLinkArray && !dropLinkArray) {
@@ -24200,12 +24254,12 @@
                         }
                     }
                 }
-                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
                         if (dropLinks_1_1 && !dropLinks_1_1.done && (_a = dropLinks_1.return)) _a.call(dropLinks_1);
                     }
-                    finally { if (e_2) throw e_2.error; }
+                    finally { if (e_3) throw e_3.error; }
                 }
             }
             else if (dragLinkArray && !dropLinkArray) {
@@ -24218,12 +24272,12 @@
                         }
                     }
                 }
-                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
                 finally {
                     try {
                         if (dragLinks_1_1 && !dragLinks_1_1.done && (_b = dragLinks_1.return)) _b.call(dragLinks_1);
                     }
-                    finally { if (e_3) throw e_3.error; }
+                    finally { if (e_4) throw e_4.error; }
                 }
             }
             else {
@@ -24233,28 +24287,28 @@
                     for (var dragLinks_2 = __values(dragLinks), dragLinks_2_1 = dragLinks_2.next(); !dragLinks_2_1.done; dragLinks_2_1 = dragLinks_2.next()) {
                         var draglink = dragLinks_2_1.value;
                         try {
-                            for (var dropLinks_2 = (e_5 = void 0, __values(dropLinks)), dropLinks_2_1 = dropLinks_2.next(); !dropLinks_2_1.done; dropLinks_2_1 = dropLinks_2.next()) {
+                            for (var dropLinks_2 = (e_6 = void 0, __values(dropLinks)), dropLinks_2_1 = dropLinks_2.next(); !dropLinks_2_1.done; dropLinks_2_1 = dropLinks_2.next()) {
                                 var droplink = dropLinks_2_1.value;
                                 if (draglink === droplink) {
                                     return true;
                                 }
                             }
                         }
-                        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
                         finally {
                             try {
                                 if (dropLinks_2_1 && !dropLinks_2_1.done && (_d = dropLinks_2.return)) _d.call(dropLinks_2);
                             }
-                            finally { if (e_5) throw e_5.error; }
+                            finally { if (e_6) throw e_6.error; }
                         }
                     }
                 }
-                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                catch (e_5_1) { e_5 = { error: e_5_1 }; }
                 finally {
                     try {
                         if (dragLinks_2_1 && !dragLinks_2_1.done && (_c = dragLinks_2.return)) _c.call(dragLinks_2);
                     }
-                    finally { if (e_4) throw e_4.error; }
+                    finally { if (e_5) throw e_5.error; }
                 }
             }
             return false;
@@ -41262,7 +41316,7 @@
      */
     var IgxDatePickerComponent = /** @class */ (function (_super) {
         __extends(IgxDatePickerComponent, _super);
-        function IgxDatePickerComponent(element, _localeId, _overlayService, _moduleRef, _injector, _renderer, platform, _displayDensityOptions, _inputGroupType) {
+        function IgxDatePickerComponent(element, _localeId, _overlayService, _moduleRef, _injector, _renderer, platform, cdr, _displayDensityOptions, _inputGroupType) {
             var _this = _super.call(this, element, _localeId, _displayDensityOptions, _inputGroupType) || this;
             _this.element = element;
             _this._localeId = _localeId;
@@ -41271,6 +41325,7 @@
             _this._injector = _injector;
             _this._renderer = _renderer;
             _this.platform = platform;
+            _this.cdr = cdr;
             _this._displayDensityOptions = _displayDensityOptions;
             _this._inputGroupType = _inputGroupType;
             /**
@@ -41781,6 +41836,10 @@
             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 */
@@ -41999,6 +42058,7 @@
         { type: i0.Injector },
         { type: i0.Renderer2 },
         { type: PlatformUtil },
+        { type: i0.ChangeDetectorRef },
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [DisplayDensityToken,] }] },
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [IGX_INPUT_GROUP_TYPE,] }] }
     ]; };
@@ -43549,7 +43609,7 @@
     IgxExcelStyleClearFiltersComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -45575,7 +45635,7 @@
         { type: i0.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 = function () { return [
@@ -45625,7 +45685,7 @@
         { type: i0.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 = function () { return [
@@ -45757,7 +45817,7 @@
         { type: i0.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 = function () { return [
@@ -47419,7 +47479,7 @@
         { type: i0.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 = function () { return [
@@ -51713,8 +51773,54 @@
              * ```
              */
             _this.animationDone = new i0.EventEmitter();
+            _this._positionSettings = {
+                horizontalDirection: exports.HorizontalAlignment.Center,
+                verticalDirection: exports.VerticalAlignment.Bottom,
+                openAnimation: i1.useAnimation(fadeIn, { params: { duration: '.35s', easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+                        fromPosition: 'translateY(100%)', toPosition: 'translateY(0)' } }),
+                closeAnimation: i1.useAnimation(fadeOut, { params: { duration: '.2s', easing: 'cubic-bezier(0.4, 0.0, 1, 1)',
+                        fromPosition: 'translateY(0)', toPosition: 'translateY(100%)' } }),
+            };
             return _this;
         }
+        Object.defineProperty(IgxSnackbarComponent.prototype, "positionSettings", {
+            /**
+             * 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: function () {
+                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: function (settings) {
+                this._positionSettings = settings;
+            },
+            enumerable: false,
+            configurable: true
+        });
         /**
          * Shows the snackbar and hides it after the `displayTime` is over if `autoHide` is set to `true`.
          * ```typescript
@@ -51725,31 +51831,25 @@
             if (message !== undefined) {
                 this.textMessage = message;
             }
-            var snackbarSettings = {
-                horizontalDirection: exports.HorizontalAlignment.Center,
-                verticalDirection: exports.VerticalAlignment.Bottom,
-                openAnimation: i1.useAnimation(slideInBottom, {
-                    params: {
-                        duration: '.35s',
-                        easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
-                        fromPosition: 'translateY(100%)',
-                        toPosition: 'translateY(0)'
-                    }
-                }),
-                closeAnimation: i1.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.prototype.open.call(this);
         };
+        /**
+         * Opens or closes the snackbar, depending on its current state.
+         *
+         * ```typescript
+         * this.snackbar.toggle();
+         * ```
+         */
+        IgxSnackbarComponent.prototype.toggle = function () {
+            if (this.collapsed || this.isClosing) {
+                this.open();
+            }
+            else {
+                this.close();
+            }
+        };
         /**
          * @hidden
          */
@@ -51784,7 +51884,8 @@
         actionText: [{ type: i0.Input }],
         clicked: [{ type: i0.Output }],
         animationStarted: [{ type: i0.Output }],
-        animationDone: [{ type: i0.Output }]
+        animationDone: [{ type: i0.Output }],
+        positionSettings: [{ type: i0.Input }]
     };
     /**
      * @hidden
@@ -52306,7 +52407,7 @@
                 .subscribe(function () {
                 _this.cdr.markForCheck();
             });
-            this.focusEditElement();
+            requestAnimationFrame(function () { return _this.focusEditElement(); });
         };
         Object.defineProperty(IgxGridFilteringRowComponent.prototype, "disabled", {
             get: function () {
@@ -54966,6 +55067,7 @@
                 positionStrategy: _this.rowEditPositioningStrategy
             };
             _this.transactionChange$ = new rxjs.Subject();
+            _this._rendered = false;
             _this.DRAG_SCROLL_DELTA = 10;
             /**
              * @hidden @internal
@@ -57213,6 +57315,7 @@
                     _this.paginator.totalRecords = _this.totalRecords;
                     _this.paginator.overlaySettings = { outlet: _this.outlet };
                 }
+                _this._rendered = true;
             });
             Promise.resolve().then(function () { return _this.rendered.next(true); });
         };
@@ -57574,16 +57677,27 @@
             configurable: true
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columns", {
+            /**
+             * @hidden
+             * @internal
+             */
+            get: function () {
+                return this._columns;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxGridBaseDirective.prototype, "columnsCollection", {
             /**
              * Gets an array of `IgxColumnComponent`s.
              *
              * @example
              * ```typescript
-             * const colums = this.grid.columns.
+             * const colums = this.grid.columnsCollection.
              * ```
              */
             get: function () {
-                return this._columns;
+                return this._rendered ? this._columns : [];
             },
             enumerable: false,
             configurable: true
@@ -59527,6 +59641,94 @@
             if (commit === void 0) { commit = true; }
             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.
+         */
+        IgxGridBaseDirective.prototype.beginAddRowById = function (rowID, asChild) {
+            var _this = this;
+            var 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(operators.first(), operators.takeUntil(this.destroy$))
+                        .subscribe(function () {
+                        _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
+         */
+        IgxGridBaseDirective.prototype.beginAddRowByIndex = function (index) {
+            if (index === 0) {
+                return this.beginAddRowById(null);
+            }
+            return this.beginAddRowById(this.gridAPI.get_rec_id_by_index(index - 1, this.dataView));
+        };
+        IgxGridBaseDirective.prototype.beginAddRowForIndex = function (index, asChild) {
+            if (asChild === void 0) { asChild = false; }
+            var row = index == null ?
+                null : this.rowList.find(function (r) { return r.index === index; });
+            if (row !== undefined) {
+                this.crudService.enterAddRowMode(row, asChild);
+            }
+            else {
+                console.warn('No row with the specified PK or index was found.');
+            }
+        };
         IgxGridBaseDirective.prototype.switchTransactionService = function (val) {
             if (val) {
                 this._transactions = this.transactionFactory.create("Base" /* Base */);
@@ -67690,7 +67892,8 @@
              */
             get: function () {
                 var _this = this;
-                return this.groupRow.records.filter(function (rowID) { return _this.gridSelection.filteredSelectedRowIds.indexOf(_this.getRowID(rowID)) > -1; });
+                var selectedIds = this.gridSelection.filteredSelectedRowIds;
+                return this.groupRow.records.filter(function (rowID) { return selectedIds.indexOf(_this.getRowID(rowID)) > -1; });
             },
             enumerable: false,
             configurable: true
@@ -68655,6 +68858,7 @@
          */
         IgxGridComponent.prototype.clearGrouping = function (name) {
             this._gridAPI.clear_groupby(name);
+            this.calculateGridSizes();
             this.notifyChanges(true);
         };
         IgxGridComponent.prototype.preventHeaderScroll = function (args) {
@@ -71619,6 +71823,31 @@
         IgxTreeGridAPIService.prototype.get_rec_by_id = function (rowID) {
             return this.grid.records.get(rowID);
         };
+        /**
+         * Gets the rowID of the record at the specified data view index
+         *
+         * @param index
+         * @param dataCollection
+         */
+        IgxTreeGridAPIService.prototype.get_rec_id_by_index = function (index, dataCollection) {
+            dataCollection = dataCollection || this.grid.data;
+            if (index >= 0 && index < dataCollection.length) {
+                var 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
+         */
+        IgxTreeGridAPIService.prototype.get_rec_index_by_id = function (pk, dataCollection) {
+            var _this = this;
+            dataCollection = dataCollection || this.grid.data;
+            return this.grid.primaryKey ? dataCollection.findIndex(function (rec) { return rec.data[_this.grid.primaryKey] === pk; }) : -1;
+        };
         IgxTreeGridAPIService.prototype.addRowToData = function (data, parentRowID) {
             if (parentRowID !== undefined && parentRowID !== null) {
                 var state = this.grid.transactions.getState(parentRowID);
@@ -72578,6 +72807,31 @@
             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.
+         */
+        IgxTreeGridComponent.prototype.beginAddRowByIndex = function (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
          */
@@ -80266,8 +80520,6 @@
         /** @hidden */
         function IgxTabsDirective(builder) {
             var _this = _super.call(this, builder) || this;
-            /** @hidden */
-            _this.role = 'tabs';
             /**
              * Output to enable support for two-way binding on [(selectedIndex)]
              */
@@ -80517,7 +80769,6 @@
         { type: i1.AnimationBuilder }
     ]; };
     IgxTabsDirective.propDecorators = {
-        role: [{ type: i0.HostBinding, args: ['attr.role',] }],
         selectedIndex: [{ type: i0.Input }],
         disableAnimation: [{ type: i0.Input }],
         selectedIndexChange: [{ type: i0.Output }],
@@ -81298,8 +81549,55 @@
              * @memberof IgxToastComponent
              */
             _this.position = 'bottom';
+            _this._positionSettings = {
+                horizontalDirection: exports.HorizontalAlignment.Center,
+                verticalDirection: _this.position === 'bottom'
+                    ? exports.VerticalAlignment.Bottom
+                    : _this.position === 'middle'
+                        ? exports.VerticalAlignment.Middle
+                        : exports.VerticalAlignment.Top,
+                openAnimation: i1.useAnimation(fadeIn),
+                closeAnimation: i1.useAnimation(fadeOut),
+            };
             return _this;
         }
+        Object.defineProperty(IgxToastComponent.prototype, "positionSettings", {
+            /**
+             * 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: function () {
+                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: function (settings) {
+                this._positionSettings = settings;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgxToastComponent.prototype, "element", {
             /**
              * Gets the nativeElement of the toast.
@@ -81327,17 +81625,24 @@
             if (message !== undefined) {
                 this.textMessage = message;
             }
-            var toastSettings = {
-                horizontalDirection: exports.HorizontalAlignment.Center,
-                verticalDirection: this.position === 'bottom'
-                    ? exports.VerticalAlignment.Bottom
-                    : this.position === 'middle'
-                        ? exports.VerticalAlignment.Middle
-                        : exports.VerticalAlignment.Top
-            };
-            this.strategy = new GlobalPositionStrategy(toastSettings);
+            this.strategy = new GlobalPositionStrategy(this.positionSettings);
             _super.prototype.open.call(this);
         };
+        /**
+         * Opens or closes the toast, depending on its current state.
+         *
+         * ```typescript
+         * this.toast.toggle();
+         * ```
+         */
+        IgxToastComponent.prototype.toggle = function () {
+            if (this.collapsed || this.isClosing) {
+                this.open();
+            }
+            else {
+                this.close();
+            }
+        };
         /**
          * @hidden
          */
@@ -81371,7 +81676,8 @@
         id: [{ type: i0.HostBinding, args: ['attr.id',] }, { type: i0.Input }],
         role: [{ type: i0.HostBinding, args: ['attr.role',] }, { type: i0.Input }],
         isVisibleChange: [{ type: i0.Output }],
-        position: [{ type: i0.Input }]
+        position: [{ type: i0.Input }],
+        positionSettings: [{ type: i0.Input }]
     };
     /**
      * @hidden