igniteui-webcomponents-grids 4.8.1 → 5.0.0-beta.1

package/esm2015/lib/igc-checkbox-list-component.js

@@ -58,6 +58,10 @@ export let IgcCheckboxListComponent = /*@__PURE__*/ (() => {
             this._stylingContainer = null;
             this._stylingParent = null;
             this._inStyling = false;
+            this._selectedKeyAdded = null;
+            this._selectedKeyAdded_wrapped = null;
+            this._selectedKeyRemoved = null;
+            this._selectedKeyRemoved_wrapped = null;
             this._checkedChanged = null;
             this._checkedChanged_wrapped = null;
             this._selectAllCheckboxChanged = null;
@@ -259,66 +263,66 @@ export let IgcCheckboxListComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the property name that contains the values.
         */
         get dataMemberPath() {
-            return this.i.bc;
+            return this.i.be;
         }
         set dataMemberPath(v) {
-            this.i.bc = v;
+            this.i.be = v;
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get selectedMemberPath() {
-            return this.i.b0;
+            return this.i.b3;
         }
         set selectedMemberPath(v) {
-            this.i.b0 = v;
+            this.i.b3 = v;
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get filterPlaceholderText() {
-            return this.i.bg;
+            return this.i.bi;
         }
         set filterPlaceholderText(v) {
-            this.i.bg = v;
+            this.i.bi = v;
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get searchInputType() {
-            return this.i.t;
+            return this.i.v;
         }
         set searchInputType(v) {
-            this.i.t = ensureEnum(InputGroupDisplayType_$type, v);
-            this._a("searchInputType", enumToString(InputGroupDisplayType_$type, this.i.t));
+            this.i.v = ensureEnum(InputGroupDisplayType_$type, v);
+            this._a("searchInputType", enumToString(InputGroupDisplayType_$type, this.i.v));
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get rowHeight() {
-            return this.i.ax;
+            return this.i.az;
         }
         set rowHeight(v) {
-            this.i.ax = +v;
-            this._a("rowHeight", this.i.ax);
+            this.i.az = +v;
+            this._a("rowHeight", this.i.az);
         }
         get actualRowHeight() {
-            return this.i.av;
+            return this.i.ax;
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get cellTextStyle() {
-            if (this.i.ae == null) {
+            if (this.i.ag == null) {
                 return null;
             }
-            return this.i.ae.fontString;
+            return this.i.ag.fontString;
         }
         set cellTextStyle(v) {
             let fi = new FontInfo();
             fi.fontString = v;
-            this.i.ae = fi;
-            this._a("cellTextStyle", this.i.ae != null ? this.i.ae.fontString : "");
+            this.i.ag = fi;
+            this._a("cellTextStyle", this.i.ag != null ? this.i.ag.fontString : "");
         }
         /**
          * Gets or Sets the property name that contains the values.
@@ -334,225 +338,235 @@ export let IgcCheckboxListComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the property name that contains the values.
         */
         get baseTheme() {
-            return this.i.y;
+            return this.i.aa;
         }
         set baseTheme(v) {
-            this.i.y = ensureEnum(BaseControlTheme_$type, v);
-            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.y));
+            this.i.aa = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.aa));
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get density() {
-            return this.i.aa;
+            return this.i.ac;
         }
         set density(v) {
-            this.i.aa = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.aa));
+            this.i.ac = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.ac));
         }
         /**
          * Gets or sets the search icon color.
         */
         get searchIconColor() {
-            return brushToString(this.i.du);
+            return brushToString(this.i.d1);
         }
         set searchIconColor(v) {
-            this.i.du = stringToBrush(v);
-            this._a("searchIconColor", brushToString(this.i.du));
+            this.i.d1 = stringToBrush(v);
+            this._a("searchIconColor", brushToString(this.i.d1));
         }
         /**
          * Gets or sets the search background color.
         */
         get searchBackgroundColor() {
-            return brushToString(this.i.ds);
+            return brushToString(this.i.dz);
         }
         set searchBackgroundColor(v) {
-            this.i.ds = stringToBrush(v);
-            this._a("searchBackgroundColor", brushToString(this.i.ds));
+            this.i.dz = stringToBrush(v);
+            this._a("searchBackgroundColor", brushToString(this.i.dz));
         }
         /**
          * Gets or sets the search text color.
         */
         get searchTextColor() {
-            return brushToString(this.i.dv);
+            return brushToString(this.i.d2);
         }
         set searchTextColor(v) {
-            this.i.dv = stringToBrush(v);
-            this._a("searchTextColor", brushToString(this.i.dv));
+            this.i.d2 = stringToBrush(v);
+            this._a("searchTextColor", brushToString(this.i.d2));
         }
         /**
          * Gets or sets the search border color.
         */
         get searchBorderColor() {
-            return brushToString(this.i.dt);
+            return brushToString(this.i.d0);
         }
         set searchBorderColor(v) {
-            this.i.dt = stringToBrush(v);
-            this._a("searchBorderColor", brushToString(this.i.dt));
+            this.i.d0 = stringToBrush(v);
+            this._a("searchBorderColor", brushToString(this.i.d0));
         }
         /**
          * Gets or sets the text style.
         */
         get searchTextStyle() {
-            if (this.i.af == null) {
+            if (this.i.ah == null) {
                 return null;
             }
-            return this.i.af.fontString;
+            return this.i.ah.fontString;
         }
         set searchTextStyle(v) {
             let fi = new FontInfo();
             fi.fontString = v;
-            this.i.af = fi;
-            this._a("searchTextStyle", this.i.af != null ? this.i.af.fontString : "");
+            this.i.ah = fi;
+            this._a("searchTextStyle", this.i.ah != null ? this.i.ah.fontString : "");
         }
         /**
          * Gets or sets the checkbox tick color.
         */
         get checkboxTickColor() {
-            return brushToString(this.i.dl);
+            return brushToString(this.i.dr);
         }
         set checkboxTickColor(v) {
-            this.i.dl = stringToBrush(v);
-            this._a("checkboxTickColor", brushToString(this.i.dl));
+            this.i.dr = stringToBrush(v);
+            this._a("checkboxTickColor", brushToString(this.i.dr));
         }
         /**
          * Gets or sets the checkbox background color when checked.
         */
         get checkboxCheckedBackgroundColor() {
-            return brushToString(this.i.dj);
+            return brushToString(this.i.dp);
         }
         set checkboxCheckedBackgroundColor(v) {
-            this.i.dj = stringToBrush(v);
-            this._a("checkboxCheckedBackgroundColor", brushToString(this.i.dj));
+            this.i.dp = stringToBrush(v);
+            this._a("checkboxCheckedBackgroundColor", brushToString(this.i.dp));
         }
         /**
          * Gets or sets the checkbox background color when unchecked.
         */
         get checkboxUncheckedBackgroundColor() {
-            return brushToString(this.i.dm);
+            return brushToString(this.i.ds);
         }
         set checkboxUncheckedBackgroundColor(v) {
-            this.i.dm = stringToBrush(v);
-            this._a("checkboxUncheckedBackgroundColor", brushToString(this.i.dm));
+            this.i.ds = stringToBrush(v);
+            this._a("checkboxUncheckedBackgroundColor", brushToString(this.i.ds));
         }
         /**
          * Gets or sets the checkbox border color when checked.
         */
         get checkboxCheckedBorderColor() {
-            return brushToString(this.i.dk);
+            return brushToString(this.i.dq);
         }
         set checkboxCheckedBorderColor(v) {
-            this.i.dk = stringToBrush(v);
-            this._a("checkboxCheckedBorderColor", brushToString(this.i.dk));
+            this.i.dq = stringToBrush(v);
+            this._a("checkboxCheckedBorderColor", brushToString(this.i.dq));
         }
         /**
          * Gets or sets the checkbox border color when unchecked.
         */
         get checkboxUncheckedBorderColor() {
-            return brushToString(this.i.dn);
+            return brushToString(this.i.dt);
         }
         set checkboxUncheckedBorderColor(v) {
-            this.i.dn = stringToBrush(v);
-            this._a("checkboxUncheckedBorderColor", brushToString(this.i.dn));
+            this.i.dt = stringToBrush(v);
+            this._a("checkboxUncheckedBorderColor", brushToString(this.i.dt));
         }
         /**
          * Gets or sets the style of scrollbar.
         */
         get scrollbarStyle() {
-            return this.i.w;
+            return this.i.y;
         }
         set scrollbarStyle(v) {
-            this.i.w = ensureEnum(ScrollbarStyle_$type, v);
-            this._a("scrollbarStyle", enumToString(ScrollbarStyle_$type, this.i.w));
+            this.i.y = ensureEnum(ScrollbarStyle_$type, v);
+            this._a("scrollbarStyle", enumToString(ScrollbarStyle_$type, this.i.y));
         }
         /**
          * Gets or sets the scrollbar background color.
         */
         get scrollbarBackground() {
-            return brushToString(this.i.dr);
+            return brushToString(this.i.dy);
         }
         set scrollbarBackground(v) {
-            this.i.dr = stringToBrush(v);
-            this._a("scrollbarBackground", brushToString(this.i.dr));
+            this.i.dy = stringToBrush(v);
+            this._a("scrollbarBackground", brushToString(this.i.dy));
         }
         /**
          * Gets / sets the caption of the "Select All" checkbox.
         */
         get selectAllCaption() {
-            return this.i.bx;
+            return this.i.b0;
         }
         set selectAllCaption(v) {
-            this.i.bx = v;
+            this.i.b0 = v;
         }
         /**
          * Gets or sets the color to use for the "Select All" label.
         */
         get selectAllCaptionTextColor() {
-            return brushToString(this.i.dw);
+            return brushToString(this.i.d3);
         }
         set selectAllCaptionTextColor(v) {
-            this.i.dw = stringToBrush(v);
-            this._a("selectAllCaptionTextColor", brushToString(this.i.dw));
+            this.i.d3 = stringToBrush(v);
+            this._a("selectAllCaptionTextColor", brushToString(this.i.d3));
         }
         /**
          * Gets or sets the color to use for the actual header selectAllCaption text.
         */
         get actualSelectAllCaptionTextColor() {
-            return brushToString(this.i.dh);
+            return brushToString(this.i.dm);
         }
         set actualSelectAllCaptionTextColor(v) {
-            this.i.dh = stringToBrush(v);
-            this._a("actualSelectAllCaptionTextColor", brushToString(this.i.dh));
+            this.i.dm = stringToBrush(v);
+            this._a("actualSelectAllCaptionTextColor", brushToString(this.i.dm));
         }
         /**
          * Gets / sets whether the "Select all" checkbox is visible.
         */
         get showSelectAll() {
-            return this.i.as;
+            return this.i.au;
         }
         set showSelectAll(v) {
-            this.i.as = ensureBool(v);
-            this._a("showSelectAll", this.i.as);
+            this.i.au = ensureBool(v);
+            this._a("showSelectAll", this.i.au);
         }
         /**
          * Gets or sets the color to use for the background of the component.
         */
         get backgroundColor() {
-            return brushToString(this.i.di);
+            return brushToString(this.i.dn);
         }
         set backgroundColor(v) {
-            this.i.di = stringToBrush(v);
-            this._a("backgroundColor", brushToString(this.i.di));
+            this.i.dn = stringToBrush(v);
+            this._a("backgroundColor", brushToString(this.i.dn));
+        }
+        /**
+         * Gets or sets the color to use when hovering over a grid row.
+        */
+        get rowHoverBackgroundColor() {
+            return brushToString(this.i.dx);
+        }
+        set rowHoverBackgroundColor(v) {
+            this.i.dx = stringToBrush(v);
+            this._a("rowHoverBackgroundColor", brushToString(this.i.dx));
         }
         /**
          * Gets or sets the color to use for the text of the component.
         */
         get textColor() {
-            return brushToString(this.i.dy);
+            return brushToString(this.i.d5);
         }
         set textColor(v) {
-            this.i.dy = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.dy));
+            this.i.d5 = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.d5));
         }
         /**
          * Gets or sets whether the filter input is visible.
         */
         get showFilter() {
-            return this.i.aq;
+            return this.i.as;
         }
         set showFilter(v) {
-            this.i.aq = ensureBool(v);
-            this._a("showFilter", this.i.aq);
+            this.i.as = ensureBool(v);
+            this._a("showFilter", this.i.as);
         }
         /**
          * Gets or sets whether row hover highlighting is enabled.
         */
         get isRowHoverEnabled() {
-            return this.i.an;
+            return this.i.ap;
         }
         set isRowHoverEnabled(v) {
-            this.i.an = ensureBool(v);
-            this._a("isRowHoverEnabled", this.i.an);
+            this.i.ap = ensureBool(v);
+            this._a("isRowHoverEnabled", this.i.ap);
         }
         findByName(name) {
             if (this.findEphemera) {
@@ -623,17 +637,17 @@ export let IgcCheckboxListComponent = /*@__PURE__*/ (() => {
     
     */
         selectAll() {
-            this.i.cy();
+            this.i.c2();
         }
         /**
          * Deselects all the items in the checkbox list.
         
         */
         deselectAll() {
-            this.i.b9();
+            this.i.cc();
         }
         notifySetItem(index, oldItem, newItem) {
-            this.i.cg(index, oldItem, newItem);
+            this.i.ck(index, oldItem, newItem);
         }
         /**
          * Manually notifies the checkboxlist's grid that the data it has bound to has been cleared and needs to be re-examined.
@@ -641,26 +655,26 @@ export let IgcCheckboxListComponent = /*@__PURE__*/ (() => {
         
         */
         notifyClearItems() {
-            this.i.cd();
+            this.i.ch();
         }
         notifyInsertItem(index, newItem) {
-            this.i.ce(index, newItem);
+            this.i.ci(index, newItem);
         }
         notifyRemoveItem(index, oldItem) {
-            this.i.cf(index, oldItem);
+            this.i.cj(index, oldItem);
         }
         addKeyValue(value) {
-            this.i.b6(value);
+            this.i.b9(value);
         }
         removeKeyValue(value) {
-            this.i.cx(value);
+            this.i.c1(value);
         }
         /**
          * Returns true if no items are selected / checked; otherwise false.
         
         */
         isNothingSelected() {
-            let iv = this.i.al();
+            let iv = this.i.an();
             return (iv);
         }
         /**
@@ -668,9 +682,61 @@ export let IgcCheckboxListComponent = /*@__PURE__*/ (() => {
         
         */
         isEverythingSelected() {
-            let iv = this.i.ak();
+            let iv = this.i.am();
             return (iv);
         }
+        /**
+         * Called when an item is added.
+        */
+        get selectedKeyAdded() {
+            return this._selectedKeyAdded;
+        }
+        set selectedKeyAdded(ev) {
+            if (this._selectedKeyAdded_wrapped !== null) {
+                this.i.selectedKeyAdded = delegateRemove(this.i.selectedKeyAdded, this._selectedKeyAdded_wrapped);
+                this._selectedKeyAdded_wrapped = null;
+                this._selectedKeyAdded = null;
+            }
+            this._selectedKeyAdded = ev;
+            this._selectedKeyAdded_wrapped = (o, e) => {
+                let outerArgs = new IgcCheckedChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeSelectedKeyAdded) {
+                    this.beforeSelectedKeyAdded(this, outerArgs);
+                }
+                if (this._selectedKeyAdded) {
+                    this._selectedKeyAdded(this, outerArgs);
+                }
+            };
+            this.i.selectedKeyAdded = delegateCombine(this.i.selectedKeyAdded, this._selectedKeyAdded_wrapped);
+            ;
+        }
+        /**
+         * Called when an item is removed.
+        */
+        get selectedKeyRemoved() {
+            return this._selectedKeyRemoved;
+        }
+        set selectedKeyRemoved(ev) {
+            if (this._selectedKeyRemoved_wrapped !== null) {
+                this.i.selectedKeyRemoved = delegateRemove(this.i.selectedKeyRemoved, this._selectedKeyRemoved_wrapped);
+                this._selectedKeyRemoved_wrapped = null;
+                this._selectedKeyRemoved = null;
+            }
+            this._selectedKeyRemoved = ev;
+            this._selectedKeyRemoved_wrapped = (o, e) => {
+                let outerArgs = new IgcCheckedChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeSelectedKeyRemoved) {
+                    this.beforeSelectedKeyRemoved(this, outerArgs);
+                }
+                if (this._selectedKeyRemoved) {
+                    this._selectedKeyRemoved(this, outerArgs);
+                }
+            };
+            this.i.selectedKeyRemoved = delegateCombine(this.i.selectedKeyRemoved, this._selectedKeyRemoved_wrapped);
+            ;
+        }
         /**
          * Called when a checkbox is checked or unchecked.
         */

package/esm2015/lib/igc-checkbox-list-module.js

@@ -12,6 +12,7 @@ import { IgcTemplateColumnModule } from './igc-template-column-module';
 import { IgcXCheckboxModule } from "igniteui-webcomponents-inputs";
 import { IgcXInputGroupModule } from "igniteui-webcomponents-inputs";
 import { IgcCheckboxListComponent } from './igc-checkbox-list-component';
+import { NativeUIGridFactory } from './NativeUIGridFactory';
 import { CheckboxList } from './CheckboxList';
 import { TypeRegistrar } from "igniteui-webcomponents-core";
 export class IgcCheckboxListModule {
@@ -26,6 +27,8 @@ export class IgcCheckboxListModule {
         IgcCheckboxListComponent.register();
         TypeRegistrar.registerCons('IgcCheckboxListComponent', IgcCheckboxListComponent);
         TypeRegistrar.registerCons('IgcCheckboxListComponent', IgcCheckboxListComponent);
+        TypeRegistrar.register('NativeUIGridFactory', NativeUIGridFactory.$type);
+        NativeUIGridFactory.register();
         TypeRegistrar.register('CheckboxList', CheckboxList.$type);
     }
 }

package/esm2015/lib/igc-checked-changed-event-args.js

@@ -29,15 +29,25 @@ export class IgcCheckedChangedEventArgs {
         }
     }
     get index() {
-        return this.i.b;
+        return this.i.c;
     }
     set index(v) {
-        this.i.b = +v;
+        this.i.c = +v;
     }
     get isChecked() {
-        return this.i.a;
+        return this.i.b;
     }
     set isChecked(v) {
-        this.i.a = ensureBool(v);
+        this.i.b = ensureBool(v);
+    }
+    get primaryKey() {
+        return this.i.a;
+    }
+    set primaryKey(v) {
+        if (v && !Array.isArray(v) && typeof (v) == "string") {
+            const re = /\s*(?:,|\s|$)\s*/gm;
+            v = v.split(re);
+        }
+        this.i.a = v;
     }
 }

package/esm2015/public_api.js

@@ -133,6 +133,11 @@ export * from './lib/BrowserPixelConverter';
 export * from './lib/GridExternalWrapper';
 export * from './lib/BrowserTickProvider';
 export * from './lib/BrowserExecutionContext';
+export * from './lib/NativeUIGridFactory';
+export * from './lib/CheckboxListBridge';
+export * from './lib/CheckboxListExternal';
+export * from './lib/CheckedChangedEventArgs';
+export * from './lib/CheckboxListViewExternal';
 export * from './lib/DraggerView';
 export * from './lib/igc-grid-selected-keys-collection';
 export * from './lib/GridSelectedKeysCollection';