igniteui-angular 13.0.0-alpha.3 → 13.0.0-alpha.4

package/fesm2020/igniteui-angular.mjs

@@ -5,7 +5,7 @@ import { Injectable, Directive, Input, HostListener, NgModule, PLATFORM_ID, Inje
 import * as i12 from '@angular/forms';
 import { NgModel, FormControlName, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, FormsModule, NgControl, ReactiveFormsModule } from '@angular/forms';
 import * as i4 from '@angular/common';
-import { isPlatformBrowser, formatDate as formatDate$1, DatePipe, DOCUMENT, CommonModule, FormatWidth, getLocaleDateFormat, formatPercent, formatNumber, formatCurrency, getLocaleCurrencyCode, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol } from '@angular/common';
+import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, DatePipe, DOCUMENT, CommonModule, FormatWidth, getLocaleDateFormat, formatPercent, formatNumber, getLocaleCurrencyCode, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol } from '@angular/common';
 import { Observable, Subject, fromEvent, interval, animationFrameScheduler, noop, merge, Subscription, timer, pipe } from 'rxjs';
 import { takeUntil, filter, first as first$1, throttleTime, take, throttle, debounce, tap, switchMap, skipLast, map, debounceTime, shareReplay, takeWhile, delay, pluck } from 'rxjs/operators';
 import mergeWith from 'lodash.mergewith';
@@ -2082,6 +2082,7 @@ const formatDate = (value, format, locale, timezone) => {
     }
     return formatDate$1(value, format, locale, timezone);
 };
+const formatCurrency = new CurrencyPipe(undefined).transform;
 
 var PagingError;
 (function (PagingError) {
@@ -8964,12 +8965,6 @@ class IgxScrollInertiaDirective {
         this.inertiaDeltaX = 2;
         this.inertiaDuration = 0.5;
         this._savedSpeedsX = [];
-        this.setPointerCaptureFName = typeof Element.prototype['msSetPointerCapture'] === 'function' ?
-            'msSetPointerCapture' :
-            'setPointerCapture';
-        this.releasePointerCaptureFName = typeof Element.prototype['msReleasePointerCapture'] === 'function' ?
-            'msReleasePointerCapture' :
-            'releasePointerCapture';
         this.baseDeltaMultiplier = 1 / 120;
         this.firefoxDeltaMultiplier = 1 / 30;
     }
@@ -8984,10 +8979,6 @@ class IgxScrollInertiaDirective {
             targetElem.addEventListener('touchstart', this.onTouchStart.bind(this));
             targetElem.addEventListener('touchmove', this.onTouchMove.bind(this));
             targetElem.addEventListener('touchend', this.onTouchEnd.bind(this));
-            targetElem.addEventListener('pointerdown', this.onPointerDown.bind(this));
-            targetElem.addEventListener('pointerup', this.onPointerUp.bind(this));
-            targetElem.addEventListener('MSGestureStart', this.onMSGestureStart.bind(this));
-            targetElem.addEventListener('MSGestureChange', this.onMSGestureChange.bind(this));
         });
     }
     ngOnDestroy() {
@@ -9000,10 +8991,6 @@ class IgxScrollInertiaDirective {
             targetElem.removeEventListener('touchstart', this.onTouchStart);
             targetElem.removeEventListener('touchmove', this.onTouchMove);
             targetElem.removeEventListener('touchend', this.onTouchEnd);
-            targetElem.removeEventListener('pointerdown', this.onPointerDown);
-            targetElem.removeEventListener('pointerup', this.onPointerUp);
-            targetElem.removeEventListener('MSGestureStart', this.onMSGestureStart);
-            targetElem.removeEventListener('MSGestureChange', this.onMSGestureChange);
         });
     }
     /**
@@ -9211,81 +9198,6 @@ class IgxScrollInertiaDirective {
             this.preventParentScroll(event, false);
         }
     }
-    /**
-     * @hidden
-     * Function that is called when we need to detect touch starting on a touch device on IE/Edge
-     */
-    onPointerDown(event) {
-        if (!event || (event.pointerType !== 2 && event.pointerType !== 'touch')) {
-            return true;
-        }
-        if (!this.IgxScrollInertiaScrollContainer) {
-            return;
-        }
-        // setPointerCaptureFName is the name of the function that is supported
-        event.target[this.setPointerCaptureFName](this._pointer = event.pointerId);
-        this._gestureObject.addPointer(this._pointer);
-    }
-    /**
-     * @hidden
-     * Function that is called when we need to detect touch ending on a touch device on IE/Edge
-     */
-    onPointerUp(event) {
-        if (!this._pointer) {
-            return true;
-        }
-        if (!this.IgxScrollInertiaScrollContainer) {
-            return;
-        }
-        /* releasePointerCaptureFName is the name of the function that is supported */
-        event.target[this.releasePointerCaptureFName](this._pointer);
-        delete this._pointer;
-    }
-    /**
-     * @hidden
-     *  Function that is called when a gesture begins on IE/Edge
-     */
-    onMSGestureStart(event) {
-        if (!this.IgxScrollInertiaScrollContainer) {
-            return;
-        }
-        this._startX = this.IgxScrollInertiaScrollContainer.scrollLeft;
-        this._startY = this.IgxScrollInertiaScrollContainer.scrollTop;
-        this._touchStartX = event.screenX;
-        this._touchStartY = event.screenY;
-        // Vars regarding swipe offset
-        this._totalMovedX = 0;
-        this._offsetRecorded = false;
-        this._offsetDirection = 0;
-        return false;
-    }
-    /**
-     * @hidden
-     * Function that is called when a we need to scroll based on the gesture performed on IE/Edge
-     */
-    onMSGestureChange(event) {
-        if (!this.IgxScrollInertiaScrollContainer) {
-            return;
-        }
-        const touchPos = event;
-        const destX = this._startX + this._touchStartX - touchPos.screenX;
-        const destY = this._startY + this._touchStartY - touchPos.screenY;
-        /* Logic regarding x tolerance to prevent accidental horizontal scrolling when scrolling vertically */
-        this._totalMovedX = this._touchStartX - touchPos.screenX;
-        if (Math.abs(this._totalMovedX) < this.swipeToleranceX && !this._offsetRecorded) {
-            /* Do not scroll horizontally yet while in the tolerance range */
-            this._scrollToY(destY);
-        }
-        else {
-            if (!this._offsetRecorded) {
-                this._offsetDirection = Math.sign(destX - this._startX);
-                this._offsetRecorded = true;
-            }
-            /* Once the tolerance is exceeded it can be scrolled horizontally */
-            this._scrollTo(destX - this._offsetDirection * this.swipeToleranceX, destY);
-        }
-        return false;
-    }
     _smoothWheelScroll(delta) {
         this._nextY = this.IgxScrollInertiaScrollContainer.scrollTop;
         this._nextX = this.IgxScrollInertiaScrollContainer.scrollLeft;
@@ -43837,7 +43749,7 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
             case GridColumnDataType.Time:
                 return formatDate(element, format, locale, timezone);
             case GridColumnDataType.Currency:
-                return formatCurrency(element, locale, display, currencyCode ?? getLocaleCurrencyCode(locale), digitsInfo);
+                return formatCurrency(element, currencyCode ?? getLocaleCurrencyCode(locale), display, digitsInfo, locale);
             case GridColumnDataType.Number:
                 return formatNumber(element, locale, digitsInfo);
             case GridColumnDataType.Percent:
@@ -47852,13 +47764,14 @@ class IgxGridToolbarAdvancedFilteringComponent {
         return this.toolbar.grid;
     }
 }
-IgxGridToolbarAdvancedFilteringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, deps: [{ token: IgxToolbarToken, host: true }], target: i0.ɵɵFactoryTarget.Component });
+IgxGridToolbarAdvancedFilteringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, deps: [{ token: IgxToolbarToken }], target: i0.ɵɵFactoryTarget.Component });
 IgxGridToolbarAdvancedFilteringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxGridToolbarAdvancedFilteringComponent, selector: "igx-grid-toolbar-advanced-filtering", inputs: { overlaySettings: "overlaySettings" }, ngImport: i0, template: "<button igxButton=\"outlined\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog()\"\n    [ngClass]=\"grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n</button>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar-advanced-filtering', template: "<button igxButton=\"outlined\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog()\"\n    [ngClass]=\"grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n</button>\n" }]
         }], ctorParameters: function () { return [{ type: IgxToolbarToken, decorators: [{
-                    type: Host
+                    type: Inject,
+                    args: [IgxToolbarToken]
                 }] }]; }, propDecorators: { overlaySettings: [{
                 type: Input
             }] } });
@@ -48445,12 +48358,13 @@ class BaseToolbarDirective {
         }
     }
 }
-BaseToolbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: BaseToolbarDirective, deps: [{ token: IgxToolbarToken, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+BaseToolbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: BaseToolbarDirective, deps: [{ token: IgxToolbarToken }], target: i0.ɵɵFactoryTarget.Directive });
 BaseToolbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: BaseToolbarDirective, inputs: { columnListHeight: "columnListHeight", title: "title", prompt: "prompt", overlaySettings: "overlaySettings" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", columnToggle: "columnToggle" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: BaseToolbarDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: IgxToolbarToken, decorators: [{
-                    type: Host
+                    type: Inject,
+                    args: [IgxToolbarToken]
                 }] }]; }, propDecorators: { columnListHeight: [{
                 type: Input
             }], title: [{
@@ -48701,13 +48615,14 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
         exporter.export(this.grid, options);
     }
 }
-IgxGridToolbarExporterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridToolbarExporterComponent, deps: [{ token: IgxToolbarToken, host: true }, { token: IgxExcelExporterService }, { token: IgxCsvExporterService }], target: i0.ɵɵFactoryTarget.Component });
+IgxGridToolbarExporterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridToolbarExporterComponent, deps: [{ token: IgxToolbarToken }, { token: IgxExcelExporterService }, { token: IgxCsvExporterService }], target: i0.ɵɵFactoryTarget.Component });
 IgxGridToolbarExporterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxGridToolbarExporterComponent, selector: "igx-grid-toolbar-exporter", inputs: { exportCSV: "exportCSV", exportExcel: "exportExcel", filename: "filename" }, outputs: { exportStarted: "exportStarted", exportEnded: "exportEnded" }, queries: [{ propertyName: "hasExcelAttr", first: true, predicate: IgxExcelTextDirective, descendants: true }, { propertyName: "hasCSVAttr", first: true, predicate: IgxCSVTextDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n        igxButton=\"outlined\" [displayDensity]=\"grid.displayDensity\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n        <igx-icon>import_export</igx-icon>\n        <span #ref>\n            <ng-content></ng-content>\n        </span>\n        <span *ngIf=\"!ref.childNodes.length\">\n            {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n        </span>\n        <igx-icon>arrow_drop_down</igx-icon>\n    </button>\n\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        <li *ngIf=\"exportExcel\" #btnExportExcel id=\"btnExportExcel\"\n            class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"export('excel', toggleRef)\">\n            <ng-template #excel>\n                <ng-content select=[excelText],excel-text></ng-content>\n            </ng-template>\n            <excel-text *ngIf=\"!hasExcelAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n            </excel-text>\n            <ng-container *ngTemplateOutlet=\"excel\"></ng-container>\n        </li>\n\n        <li *ngIf=\"exportCSV\" #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n            igxRipple (click)=\"export('csv', toggleRef)\">\n            <ng-template #csv>\n                <ng-content select=[csvText],csv-text></ng-content>\n            </ng-template>\n            <csv-text *ngIf=\"!hasCSVAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>\n            <ng-container *ngTemplateOutlet=\"csv\"></ng-container>\n        </li>\n    </ul>\n</div>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: IgxExcelTextDirective, selector: "[excelText],excel-text" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: IgxCSVTextDirective, selector: "[csvText],csv-text" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar-exporter', template: "<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n        igxButton=\"outlined\" [displayDensity]=\"grid.displayDensity\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n        <igx-icon>import_export</igx-icon>\n        <span #ref>\n            <ng-content></ng-content>\n        </span>\n        <span *ngIf=\"!ref.childNodes.length\">\n            {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n        </span>\n        <igx-icon>arrow_drop_down</igx-icon>\n    </button>\n\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        <li *ngIf=\"exportExcel\" #btnExportExcel id=\"btnExportExcel\"\n            class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"export('excel', toggleRef)\">\n            <ng-template #excel>\n                <ng-content select=[excelText],excel-text></ng-content>\n            </ng-template>\n            <excel-text *ngIf=\"!hasExcelAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n            </excel-text>\n            <ng-container *ngTemplateOutlet=\"excel\"></ng-container>\n        </li>\n\n        <li *ngIf=\"exportCSV\" #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n            igxRipple (click)=\"export('csv', toggleRef)\">\n            <ng-template #csv>\n                <ng-content select=[csvText],csv-text></ng-content>\n            </ng-template>\n            <csv-text *ngIf=\"!hasCSVAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>\n            <ng-container *ngTemplateOutlet=\"csv\"></ng-container>\n        </li>\n    </ul>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: IgxToolbarToken, decorators: [{
-                    type: Host
+                    type: Inject,
+                    args: [IgxToolbarToken]
                 }] }, { type: IgxExcelExporterService }, { type: IgxCsvExporterService }]; }, propDecorators: { hasExcelAttr: [{
                 type: ContentChild,
                 args: [IgxExcelTextDirective]
@@ -57080,19 +56995,19 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this.theadRow.groups;
     }
     get headerContainer() {
-        return this.theadRow.headerContainer;
+        return this.theadRow?.headerContainer;
     }
     get headerSelectorContainer() {
-        return this.theadRow.headerSelectorContainer;
+        return this.theadRow?.headerSelectorContainer;
     }
     get headerDragContainer() {
-        return this.theadRow.headerDragContainer;
+        return this.theadRow?.headerDragContainer;
     }
     get headerGroupContainer() {
-        return this.theadRow.headerGroupContainer;
+        return this.theadRow?.headerGroupContainer;
     }
     get filteringRow() {
-        return this.theadRow.filterRow;
+        return this.theadRow?.filterRow;
     }
     /**
      * Gets/Sets the resource strings.
@@ -60049,7 +59964,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get unpinnedDataView() {
-        return this.unpinnedRecords ? this.unpinnedRecords : this.verticalScrollContainer.igxForOf || [];
+        return this.unpinnedRecords ? this.unpinnedRecords : this.verticalScrollContainer?.igxForOf || [];
     }
     /**
      * Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.
@@ -60264,7 +60179,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Deselect specified columns by filed.
+     * Deselect specified columns by field.
      *
      * @example
      * ```typescript
@@ -60389,6 +60304,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (!this.clipboardOptions.copyHeaders) {
             result = result.substring(result.indexOf('\n') + 1);
         }
+        if (Object.values(data[0]).length === 1) {
+            result = result.slice(0, -2);
+        }
         event.preventDefault();
         /* Necessary for the hiearachical case but will probably have to
            change how getSelectedData is propagated in the hiearachical grid
@@ -60644,7 +60562,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @hidden @internal
      */
     getEmptyRecordObjectFor(inRow) {
-        const row = { ...inRow?.rowData };
+        const row = { ...inRow?.data };
         Object.keys(row).forEach(key => row[key] = undefined);
         const id = this.generateRowID();
         row[this.primaryKey] = id;
@@ -60779,6 +60697,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this.beginAddRowById(this.gridAPI.get_rec_id_by_index(index - 1, this.dataView));
     }
     beginAddRowForIndex(index, asChild = false) {
+        // TODO is row from rowList suitable for enterAddRowMode
         const row = index == null ?
             null : this.rowList.find(r => r.index === index);
         if (row !== undefined) {
@@ -63531,7 +63450,7 @@ class IgxGridCellComponent {
             case GridColumnDataType.Percent:
                 return formatPercent(this.value, locale, args.digitsInfo);
             case GridColumnDataType.Currency:
-                return formatCurrency(this.value, locale, args.display, this.currencyCode, args.digitsInfo);
+                return formatCurrency(this.value, this.currencyCode, args.display, args.digitsInfo, locale);
             case GridColumnDataType.Date:
             case GridColumnDataType.DateTime:
             case GridColumnDataType.Time:
@@ -63963,7 +63882,7 @@ class IgxGridCellComponent {
     }
     getCellType(useRow) {
         const rowID = useRow ? this.grid.createRow(this.intRow.index, this.intRow.rowData) : this.intRow.index;
-        // TOOD: Fix types
+        // TODO: Fix types
         return new IgxGridCell(this.grid, rowID, this.column.field);
     }
 }
@@ -66259,17 +66178,20 @@ class IgxGridStateDirective {
         return feature;
     }
 }
-IgxGridStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridStateDirective, deps: [{ token: IgxGridBaseDirective, host: true, optional: true }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+IgxGridStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridStateDirective, deps: [{ token: IGX_GRID_BASE, host: true, optional: true }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxGridStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxGridStateDirective, selector: "[igxGridState]", inputs: { options: ["igxGridState", "options"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridState]'
                 }]
-        }], ctorParameters: function () { return [{ type: IgxGridBaseDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Host
                 }, {
                     type: Optional
+                }, {
+                    type: Inject,
+                    args: [IGX_GRID_BASE]
                 }] }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }]; }, propDecorators: { options: [{
                 type: Input,
                 args: ['igxGridState']