igniteui-webcomponents-data-grids 6.0.1 → 6.0.2-beta.1

package/esm2015/lib/igc-data-grid-component.js

@@ -89,6 +89,7 @@ import { GroupSummaryDisplayMode_$type } from "./GroupSummaryDisplayMode";
 import { fromRect } from "igniteui-webcomponents-core";
 import { RegisterElementHelper } from "igniteui-webcomponents-core";
 import { IgcPinnedAreaSeparatorComponent } from "./igc-pinned-area-separator-component";
+import { PinnedPositions_$type } from "./PinnedPositions";
 import { ColumnOptionsIconAlignment_$type } from "./ColumnOptionsIconAlignment";
 import { ColumnOptionsIconBehavior_$type } from "./ColumnOptionsIconBehavior";
 import { IgcColumnPinnedChangedEventArgs } from "./igc-column-pinned-changed-event-args";
@@ -232,6 +233,11 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             this._renderer = null;
             this._disconnected = false;
             this._initialized = false;
+            this.onMouseEvent = (e) => {
+                if (this.stopPropagation) {
+                    e.stopPropagation();
+                }
+            };
             this._scroller = null;
             this._wrapper = null;
             this._grid = null;
@@ -518,6 +524,11 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
                     this._grid.renderingEngine.detach();
                 }
             }
+            this.removeEventListener("mousedown", this.onMouseEvent);
+            this.removeEventListener("mouseup", this.onMouseEvent);
+            this.removeEventListener("mouseenter", this.onMouseEvent);
+            this.removeEventListener("mouseleave", this.onMouseEvent);
+            this.removeEventListener("mousemove", this.onMouseEvent);
         }
         connectedCallback() {
             if (this._disconnected) {
@@ -584,6 +595,11 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             }
             this.updateContentColumns();
             this.afterContentInit();
+            this.addEventListener("mousedown", this.onMouseEvent);
+            this.addEventListener("mouseup", this.onMouseEvent);
+            this.addEventListener("mouseenter", this.onMouseEvent);
+            this.addEventListener("mouseleave", this.onMouseEvent);
+            this.addEventListener("mousemove", this.onMouseEvent);
         }
         SetupColumnGrouping() {
             if (this._hasColumnGroupingAdded == false && this._hasParentAdded == true) {
@@ -618,7 +634,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
                 this.i.pager = null;
                 // When the pager is shown it replaces the internal grid's datasource with a new paged one. So when hiding the pager
                 // we need to assign back the original datasource.
-                this._grid.itemsSource = this._dataSource;
+                this.dataSource = this._dataSource;
             }
         }
         showToolbar() {
@@ -644,7 +660,8 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             return this.i.actualDataSource;
         }
         afterContentInit() {
-            this._grid.itemsSource = this._dataSource;
+            // we have a grid now so provide it the currently set datasource.
+            this.dataSource = this._dataSource;
         }
         refreshContentSize() {
             if (this._content != null) {
@@ -682,7 +699,12 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         set dataSource(value) {
             this._dataSource = value;
             if (this._grid != null) {
-                this._grid.itemsSource = this._dataSource;
+                if (this._dataSource && this._dataSource._implementation) {
+                    this._grid.itemsSource = this._dataSource._implementation;
+                }
+                else {
+                    this._grid.itemsSource = this._dataSource;
+                }
             }
         }
         get dataSource() {
@@ -2475,6 +2497,16 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             this.i.isActiveCellStyleEnabled = ensureBool(v);
             this._a("isActiveCellStyleEnabled", this.i.isActiveCellStyleEnabled);
         }
+        /**
+         * Prevents mouse events from bubbling out of the grid.
+        */
+        get stopPropagation() {
+            return this.i.stopPropagation;
+        }
+        set stopPropagation(v) {
+            this.i.stopPropagation = ensureBool(v);
+            this._a("stopPropagation", this.i.stopPropagation);
+        }
         /**
          * A set of states that can be applied to the columns of the grid based on available space.
         */
@@ -3270,7 +3302,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             this.i.exchangeColumn((newColumn == null ? null : newColumn.i), (oldColumn == null ? null : oldColumn.i));
         }
         pinColumn(column, position) {
-            this.i.pinColumn((column == null ? null : column.i), (position == null ? null : position));
+            this.i.pinColumn((column == null ? null : column.i), ensureEnum(PinnedPositions_$type, position));
         }
         moveColumn(oldIndex, newIndex) {
             this.i.moveColumn(oldIndex, newIndex);
@@ -3590,6 +3622,34 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         loadLayout(json) {
             this.i.loadLayout(json);
         }
+        registerIconFromText(iconCollection, iconName, iconText) {
+            this.i.registerIconFromText(iconCollection, iconName, iconText);
+        }
+        getIconFromCache(iconCollection, iconName) {
+            let iv = this.i.getIconFromCache(iconCollection, iconName);
+            return (iv);
+        }
+        registerMultiPathSVG(iconCollection, iconName, multiPathSVG) {
+            this.i.registerMultiPathSVG(iconCollection, iconName, multiPathSVG);
+        }
+        getMultiPathSVGFromCache(iconCollection, iconName) {
+            let iv = this.i.getMultiPathSVGFromCache(iconCollection, iconName);
+            return (iv);
+        }
+        registerIconFromDataURL(iconCollection, iconName, dataURL) {
+            this.i.registerIconFromDataURL(iconCollection, iconName, dataURL);
+        }
+        getDataURLFromCache(iconCollection, iconName) {
+            let iv = this.i.getDataURLFromCache(iconCollection, iconName);
+            return (iv);
+        }
+        registerIconSource(iconCollection, iconName, source) {
+            this.i.registerIconSource(iconCollection, iconName, source);
+        }
+        getIconSource(iconCollection, iconName) {
+            let iv = this.i.getIconSource(iconCollection, iconName);
+            return (iv);
+        }
         get filterExpressionsChanging() {
             return this._filterExpressionsChanging;
         }

package/esm2015/lib/igc-date-time-cell-info.js

@@ -22,56 +22,56 @@ export class IgcDateTimeCellInfo extends IgcCellInfo {
      * Sets or gets the DateTime value for the cell.
     */
     get dateTimeValue() {
-        return this.i.mt;
+        return this.i.n6;
     }
     set dateTimeValue(v) {
-        this.i.mt = v;
+        this.i.n6 = v;
     }
     /**
      * The format string to apply to the value
     */
     get formatStringOverride() {
-        return this.i.na;
+        return this.i.on;
     }
     set formatStringOverride(v) {
-        this.i.na = v;
+        this.i.on = v;
     }
     get formatSpecifiers() {
-        return this.i.mk;
+        return this.i.nx;
     }
     set formatSpecifiers(v) {
         if (v && !Array.isArray(v) && typeof (v) == "string") {
             const re = /\s*(?:,|\s|$)\s*/gm;
             v = v.split(re);
         }
-        this.i.mk = v;
+        this.i.nx = v;
     }
     /**
      * The format options to apply to the value
     */
     get formatOverride() {
-        return this.i.m3;
+        return this.i.og;
     }
     set formatOverride(v) {
-        this.i.m3 = v;
+        this.i.og = v;
     }
     /**
      * Sets or gets the simple DateTimeFormat to use for the cell.
     */
     get dateTimeFormat() {
-        return this.i.mp;
+        return this.i.n2;
     }
     set dateTimeFormat(v) {
-        this.i.mp = ensureEnum(DateTimeFormats_$type, v);
+        this.i.n2 = ensureEnum(DateTimeFormats_$type, v);
     }
     /**
      * Sets or gets whether the value to use is a DateTimeOffset value.
     */
     get isOffsetValue() {
-        return this.i.mr;
+        return this.i.n4;
     }
     set isOffsetValue(v) {
-        this.i.mr = ensureBool(v);
+        this.i.n4 = ensureBool(v);
     }
     findByName(name) {
         var baseResult = super.findByName(name);

package/esm2015/lib/igc-date-time-column-component.js

@@ -70,95 +70,95 @@ export let IgcDateTimeColumnComponent = /*@__PURE__*/ (() => {
          * Gets or sets the date time format to use for this column. If FormatString is specificied this value is ignored.
         */
         get dateTimeFormat() {
-            return this.i.oa;
+            return this.i.pb;
         }
         set dateTimeFormat(v) {
-            this.i.oa = ensureEnum(DateTimeFormats_$type, v);
-            this._a("dateTimeFormat", enumToString(DateTimeFormats_$type, this.i.oa));
+            this.i.pb = ensureEnum(DateTimeFormats_$type, v);
+            this._a("dateTimeFormat", enumToString(DateTimeFormats_$type, this.i.pb));
         }
         /**
          * Gets or sets the format string to apply to the value. If set, the other value formatting properties on this column are ignored.
         */
         get formatString() {
-            return this.i.os;
+            return this.i.pt;
         }
         set formatString(v) {
-            this.i.os = v;
+            this.i.pt = v;
         }
         /**
          * Gets or sets the format string to use when editing dates.
         */
         get editorFormatString() {
-            return this.i.ol;
+            return this.i.pm;
         }
         set editorFormatString(v) {
-            this.i.ol = v;
+            this.i.pm = v;
         }
         get formatSpecifiers() {
-            return this.i.n6;
+            return this.i.o7;
         }
         set formatSpecifiers(v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 const re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.n6 = v;
+            this.i.o7 = v;
         }
         /**
          * Gets or sets the INTL DateTimeFormat object to use for formatting the date values.
         */
         get formatOverride() {
-            return this.i.oh;
+            return this.i.pi;
         }
         set formatOverride(v) {
-            this.i.oh = v;
+            this.i.pi = v;
         }
         /**
          * Gets or sets the ShowTodayButton property to detirmine if the today button is shown
         */
         get showTodayButton() {
-            return this.i.od;
+            return this.i.pe;
         }
         set showTodayButton(v) {
-            this.i.od = ensureBool(v);
-            this._a("showTodayButton", this.i.od);
+            this.i.pe = ensureBool(v);
+            this._a("showTodayButton", this.i.pe);
         }
         /**
          * Gets or sets the editor type used for editing cells in this column.
         */
         get editorType() {
-            return this.i.ob;
+            return this.i.pc;
         }
         set editorType(v) {
-            this.i.ob = ensureEnum(EditorType_$type, v);
-            this._a("editorType", enumToString(EditorType_$type, this.i.ob));
+            this.i.pc = ensureEnum(EditorType_$type, v);
+            this._a("editorType", enumToString(EditorType_$type, this.i.pc));
         }
         /**
          * Gets or sets the ComboBox data source.
         */
         get editorDataSource() {
-            return this.i.og;
+            return this.i.ph;
         }
         set editorDataSource(v) {
-            this.i.og = v;
+            this.i.ph = v;
         }
         /**
          * Gets or sets the ComboBox text field.
         */
         get editorTextField() {
-            return this.i.on;
+            return this.i.po;
         }
         set editorTextField(v) {
-            this.i.on = v;
+            this.i.po = v;
         }
         /**
          * Gets or sets the ComboBox value field.
         */
         get editorValueField() {
-            return this.i.oo;
+            return this.i.pp;
         }
         set editorValueField(v) {
-            this.i.oo = v;
+            this.i.pp = v;
         }
         findByName(name) {
             var baseResult = super.findByName(name);

package/esm2015/lib/igc-definition-base-component.js

@@ -4,6 +4,7 @@ import { CellContentVerticalAlignment_$type } from "./CellContentVerticalAlignme
 import { TextCellLineBreakMode_$type } from "./TextCellLineBreakMode";
 import { IgcDataBindingEventArgs } from "./igc-data-binding-event-args";
 import { IgcCellStyleRequestedEventArgs } from "./igc-cell-style-requested-event-args";
+import { CellPropertyAnimationType_$type } from "./CellPropertyAnimationType";
 import { TypeRegistrar } from "igniteui-webcomponents-core";
 import { ensureBool, NamePatcher, getAllPropertyNames, fromSpinal, toSpinal, brushToString, stringToBrush, ensureEnum, enumToString, initializePropertiesFromCss, CollectionAdapter } from "igniteui-webcomponents-core";
 import { FontInfo } from "igniteui-webcomponents-core";
@@ -268,11 +269,11 @@ export let IgcDefinitionBaseComponent = /*@__PURE__*/ (() => {
      * Gets or sets the background color to use.
     */
         get background() {
-            return brushToString(this.i.ge);
+            return brushToString(this.i.gf);
         }
         set background(v) {
-            this.i.ge = stringToBrush(v);
-            this._a("background", brushToString(this.i.ge));
+            this.i.gf = stringToBrush(v);
+            this._a("background", brushToString(this.i.gf));
         }
         get actualConditionalStyles() {
             if (!this._actualConditionalStyles) {
@@ -319,41 +320,41 @@ export let IgcDefinitionBaseComponent = /*@__PURE__*/ (() => {
          * Gets or sets the background color to use.
         */
         get border() {
-            return brushToString(this.i.gh);
+            return brushToString(this.i.gi);
         }
         set border(v) {
-            this.i.gh = stringToBrush(v);
-            this._a("border", brushToString(this.i.gh));
+            this.i.gi = stringToBrush(v);
+            this._a("border", brushToString(this.i.gi));
         }
         /**
          * Gets or sets the background color to use.
         */
         get activationBorder() {
-            return brushToString(this.i.f3);
+            return brushToString(this.i.f4);
         }
         set activationBorder(v) {
-            this.i.f3 = stringToBrush(v);
-            this._a("activationBorder", brushToString(this.i.f3));
+            this.i.f4 = stringToBrush(v);
+            this._a("activationBorder", brushToString(this.i.f4));
         }
         /**
          * Gets or sets the error border color to use.
         */
         get errorBorder() {
-            return brushToString(this.i.gi);
+            return brushToString(this.i.gj);
         }
         set errorBorder(v) {
-            this.i.gi = stringToBrush(v);
-            this._a("errorBorder", brushToString(this.i.gi));
+            this.i.gj = stringToBrush(v);
+            this._a("errorBorder", brushToString(this.i.gj));
         }
         /**
          * Gets the actual border color that will be used.
         */
         get actualBorder() {
-            return brushToString(this.i.f8);
+            return brushToString(this.i.f9);
         }
         set actualBorder(v) {
-            this.i.f8 = stringToBrush(v);
-            this._a("actualBorder", brushToString(this.i.f8));
+            this.i.f9 = stringToBrush(v);
+            this._a("actualBorder", brushToString(this.i.f9));
         }
         /**
          * Gets or sets the amount of left border to use for the cell content for this column.
@@ -467,91 +468,91 @@ export let IgcDefinitionBaseComponent = /*@__PURE__*/ (() => {
          * Gets the actual background color that will be used.
         */
         get actualBackground() {
-            return brushToString(this.i.f5);
+            return brushToString(this.i.f6);
         }
         set actualBackground(v) {
-            this.i.f5 = stringToBrush(v);
-            this._a("actualBackground", brushToString(this.i.f5));
+            this.i.f6 = stringToBrush(v);
+            this._a("actualBackground", brushToString(this.i.f6));
         }
         /**
          * Gets the actual background color that will be used.
         */
         get actualActivationBorder() {
-            return brushToString(this.i.f4);
+            return brushToString(this.i.f5);
         }
         set actualActivationBorder(v) {
-            this.i.f4 = stringToBrush(v);
-            this._a("actualActivationBorder", brushToString(this.i.f4));
+            this.i.f5 = stringToBrush(v);
+            this._a("actualActivationBorder", brushToString(this.i.f5));
         }
         /**
          * Gets the actual error border color that will be used.
         */
         get actualErrorBorder() {
-            return brushToString(this.i.f9);
+            return brushToString(this.i.ga);
         }
         set actualErrorBorder(v) {
-            this.i.f9 = stringToBrush(v);
-            this._a("actualErrorBorder", brushToString(this.i.f9));
+            this.i.ga = stringToBrush(v);
+            this._a("actualErrorBorder", brushToString(this.i.ga));
         }
         /**
          * Gets or sets the background color for content that sticks to the top of the grid.
         */
         get stickyRowBackground() {
-            return brushToString(this.i.gw);
+            return brushToString(this.i.gx);
         }
         set stickyRowBackground(v) {
-            this.i.gw = stringToBrush(v);
-            this._a("stickyRowBackground", brushToString(this.i.gw));
+            this.i.gx = stringToBrush(v);
+            this._a("stickyRowBackground", brushToString(this.i.gx));
         }
         /**
          * Gets the actual background color for content that sticks to the top of the grid.
         */
         get actualStickyRowBackground() {
-            return brushToString(this.i.gc);
+            return brushToString(this.i.gd);
         }
         set actualStickyRowBackground(v) {
-            this.i.gc = stringToBrush(v);
-            this._a("actualStickyRowBackground", brushToString(this.i.gc));
+            this.i.gd = stringToBrush(v);
+            this._a("actualStickyRowBackground", brushToString(this.i.gd));
         }
         /**
          * Gets or sets the background color for cells belonging to rows marked as pinned.
         */
         get pinnedRowBackground() {
-            return brushToString(this.i.gv);
+            return brushToString(this.i.gw);
         }
         set pinnedRowBackground(v) {
-            this.i.gv = stringToBrush(v);
-            this._a("pinnedRowBackground", brushToString(this.i.gv));
+            this.i.gw = stringToBrush(v);
+            this._a("pinnedRowBackground", brushToString(this.i.gw));
         }
         /**
          * Gets the actual background color for cells belonging to rows marked as pinned.
         */
         get actualPinnedRowBackground() {
-            return brushToString(this.i.gb);
+            return brushToString(this.i.gc);
         }
         set actualPinnedRowBackground(v) {
-            this.i.gb = stringToBrush(v);
-            this._a("actualPinnedRowBackground", brushToString(this.i.gb));
+            this.i.gc = stringToBrush(v);
+            this._a("actualPinnedRowBackground", brushToString(this.i.gc));
         }
         /**
          * Gets or sets the color for the last row in the sticky row area.
         */
         get lastStickyRowBackground() {
-            return brushToString(this.i.gu);
+            return brushToString(this.i.gv);
         }
         set lastStickyRowBackground(v) {
-            this.i.gu = stringToBrush(v);
-            this._a("lastStickyRowBackground", brushToString(this.i.gu));
+            this.i.gv = stringToBrush(v);
+            this._a("lastStickyRowBackground", brushToString(this.i.gv));
         }
         /**
          * Gets the actual color for the last row in the sticky row area.
         */
         get actualLastStickyRowBackground() {
-            return brushToString(this.i.ga);
+            return brushToString(this.i.gb);
         }
         set actualLastStickyRowBackground(v) {
-            this.i.ga = stringToBrush(v);
-            this._a("actualLastStickyRowBackground", brushToString(this.i.ga));
+            this.i.gb = stringToBrush(v);
+            this._a("actualLastStickyRowBackground", brushToString(this.i.gb));
         }
         /**
          * Gets or sets the opacity of the content.
@@ -607,21 +608,21 @@ export let IgcDefinitionBaseComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for displaying text.
         */
         get textColor() {
-            return brushToString(this.i.gx);
+            return brushToString(this.i.gy);
         }
         set textColor(v) {
-            this.i.gx = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.gx));
+            this.i.gy = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.gy));
         }
         /**
          * Gets the actual color used for displaying text.
         */
         get actualTextColor() {
-            return brushToString(this.i.gd);
+            return brushToString(this.i.ge);
         }
         set actualTextColor(v) {
-            this.i.gd = stringToBrush(v);
-            this._a("actualTextColor", brushToString(this.i.gd));
+            this.i.ge = stringToBrush(v);
+            this._a("actualTextColor", brushToString(this.i.ge));
         }
         /**
          * Gets or sets whether the bar is supported.
@@ -637,41 +638,41 @@ export let IgcDefinitionBaseComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for value bars.
         */
         get barBackground() {
-            return brushToString(this.i.gf);
+            return brushToString(this.i.gg);
         }
         set barBackground(v) {
-            this.i.gf = stringToBrush(v);
-            this._a("barBackground", brushToString(this.i.gf));
+            this.i.gg = stringToBrush(v);
+            this._a("barBackground", brushToString(this.i.gg));
         }
         /**
          * Gets the actual color used for value bars.
         */
         get actualBarBackground() {
-            return brushToString(this.i.f6);
+            return brushToString(this.i.f7);
         }
         set actualBarBackground(v) {
-            this.i.f6 = stringToBrush(v);
-            this._a("actualBarBackground", brushToString(this.i.f6));
+            this.i.f7 = stringToBrush(v);
+            this._a("actualBarBackground", brushToString(this.i.f7));
         }
         /**
          * Gets or sets the Outline color to use for value bars.
         */
         get barOutline() {
-            return brushToString(this.i.gg);
+            return brushToString(this.i.gh);
         }
         set barOutline(v) {
-            this.i.gg = stringToBrush(v);
-            this._a("barOutline", brushToString(this.i.gg));
+            this.i.gh = stringToBrush(v);
+            this._a("barOutline", brushToString(this.i.gh));
         }
         /**
          * Gets the actual Outline color used for value bars.
         */
         get actualBarOutline() {
-            return brushToString(this.i.f7);
+            return brushToString(this.i.f8);
         }
         set actualBarOutline(v) {
-            this.i.f7 = stringToBrush(v);
-            this._a("actualBarOutline", brushToString(this.i.f7));
+            this.i.f8 = stringToBrush(v);
+            this._a("actualBarOutline", brushToString(this.i.f8));
         }
         /**
          * Gets or sets the stroke thickness to use for value bars.
@@ -760,17 +761,17 @@ export let IgcDefinitionBaseComponent = /*@__PURE__*/ (() => {
             return null;
         }
         transitionStyleOut(style) {
-            this.i.e3((style == null ? null : style.i));
+            this.i.e4((style == null ? null : style.i));
         }
         transitionStyleIn(style) {
-            this.i.e2((style == null ? null : style.i));
+            this.i.e3((style == null ? null : style.i));
         }
         isStyleTransitioningOut(style) {
             let iv = this.i.as((style == null ? null : style.i));
             return (iv);
         }
         setNamedValue(valueName, animationType, value) {
-            this.i.e1(valueName, (animationType == null ? null : animationType), value);
+            this.i.e2(valueName, ensureEnum(CellPropertyAnimationType_$type, animationType), value);
         }
         /**
          * Returns if this definition has named value.
@@ -795,7 +796,7 @@ export let IgcDefinitionBaseComponent = /*@__PURE__*/ (() => {
         * @param valueName  * The named value name to remove.
         */
         removeNamedValue(valueName) {
-            this.i.ew(valueName);
+            this.i.ex(valueName);
         }
         /**
          * Gets the value for a named value from this definition.
@@ -803,7 +804,7 @@ export let IgcDefinitionBaseComponent = /*@__PURE__*/ (() => {
         * @param valueName  * The named value name to check for.
         */
         getNamedValue(valueName) {
-            let iv = this.i.co(valueName);
+            let iv = this.i.cp(valueName);
             return (iv);
         }
         /**