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

package/bundles/igniteui-webcomponents-grids.umd.js

@@ -3604,16 +3604,16 @@
             a.l("currentPage : " + this.h + ", ");
             a.l("pageCount : " + this.i + ", ");
             if (this.c != null) {
-                a.l("firstPageButton : " + this.c.ab() + ", ");
+                a.l("firstPageButton : " + this.c.serialize() + ", ");
             }
             if (this.f != null) {
-                a.l("previousPageButton : " + this.f.ab() + ", ");
+                a.l("previousPageButton : " + this.f.serialize() + ", ");
             }
             if (this.e != null) {
-                a.l("nextPageButton : " + this.e.ab() + ", ");
+                a.l("nextPageButton : " + this.e.serialize() + ", ");
             }
             if (this.d != null) {
-                a.l("lastPageButton : " + this.d.ab() + ", ");
+                a.l("lastPageButton : " + this.d.serialize() + ", ");
             }
             a.l("}");
             return a.toString();
@@ -12718,7 +12718,7 @@
                 if (this.b.isVirtual) {
                     this.b.firstVisibleIndexRequested = a;
                     this.b.lastVisibleIndexRequested = a + this.ah;
-                    this.d.d8 = false;
+                    this.d.eb = false;
                 }
                 this.b2();
                 this.ac.clear();
@@ -12729,7 +12729,7 @@
                     var c = this.b.getItemAtIndex(b);
                     this.ac.add1(c);
                     if (c != null) {
-                        this.d.d8 = true;
+                        this.d.eb = true;
                     }
                 }
                 var d = new Array(this.ac.count);
@@ -12740,7 +12740,7 @@
                 if (this.targetGrid != null) {
                     this.targetGrid.actualDataSource.queueAutoRefresh();
                     this.targetGrid.actualDataSource.flushAutoRefresh();
-                    if (this.b.isVirtual && this.d.d8) {
+                    if (this.b.isVirtual && this.d.eb) {
                         this.targetGrid.v4(0, this.ao - 1);
                     }
                     else {
@@ -12771,7 +12771,7 @@
                 this.b.summaryScope = this.p;
                 var b = this.b;
                 b.schemaChanged = igniteuiWebcomponentsCore.delegateCombine(b.schemaChanged, igniteuiWebcomponentsCore.runOn(this, this.bj));
-                this.d.d7 = this.b;
+                this.d.ea = this.b;
                 switch (this.l) {
                     case 1:
                     case 0:
@@ -13146,16 +13146,16 @@
         tslib.__extends(PagedDataProvider, _super);
         function PagedDataProvider(a) {
             var _this = _super.call(this) || this;
-            _this.au = null;
-            _this.au = a;
+            _this.av = null;
+            _this.av = a;
             return _this;
         }
         PagedDataProvider.prototype.getItemValue = function (a, b) {
             if (a == null) {
                 return null;
             }
-            if (this.au.actualDataSource.isVirtual) {
-                var c = this.au.actualDataSource;
+            if (this.av.actualDataSource.isVirtual) {
+                var c = this.av.actualDataSource;
                 return c.actualDataProvider.getItemValue(a, b);
             }
             return _super.prototype.getItemValue.call(this, a, b);
@@ -53819,15 +53819,15 @@
             e.append(f);
             var g = a.createElement("div");
             e.append(g);
-            _this.y = new igniteuiWebcomponentsInputs.DatePicker();
+            _this.y = new igniteuiWebcomponentsInputs.XDatePicker();
             _this.y.ay = false;
             _this.y.provideContainer(e);
             _this.y.w = b;
             _this.y.y = 3;
-            _this.y.az = _this.showClearButton;
-            _this.y.a0 = _this.ac;
-            _this.y.dx = _this.textColor;
-            _this.y.be = -1;
+            _this.y.a0 = _this.showClearButton;
+            _this.y.a1 = _this.ac;
+            _this.y.dy = _this.textColor;
+            _this.y.bf = -1;
             var h = e.getExternal(_this.y, e.rootWrapper, null);
             if (_this.z != null) {
                 _this.y.ad = _this.z;
@@ -53922,12 +53922,12 @@
         DateEditorView.prototype.s = function () {
             if (this.y != null) {
                 this.y.focus(true);
-                this.y.df();
+                this.y.dg();
             }
         };
         DateEditorView.prototype.ag = function () {
             if (this.y != null) {
-                this.y.cq();
+                this.y.cr();
             }
         };
         DateEditorView.prototype.u = function (a, b, c) {
@@ -53938,18 +53938,18 @@
                     break;
                 case "ShowClearButton":
                     if (this.y != null) {
-                        this.y.az = this.showClearButton;
+                        this.y.a0 = this.showClearButton;
                     }
                     break;
                 case "ShowTodayButton":
                     if (this.y != null) {
-                        this.y.a0 = this.ac;
+                        this.y.a1 = this.ac;
                     }
                     break;
             }
         };
         DateEditorView.prototype.ak = function () {
-            this.y.by = this.ae;
+            this.y.bz = this.ae;
         };
         DateEditorView.prototype.w = function () {
             this.ab = true;
@@ -53974,7 +53974,7 @@
         DateEditorView.prototype.v = function () {
             _super.prototype.v.call(this);
             if (this.y != null) {
-                this.y.dx = this.textColor;
+                this.y.dy = this.textColor;
             }
         };
         DateEditorView.prototype.onDatePickerValueChanged = function (a, b) {
@@ -63069,7 +63069,7 @@
                 if (c != 0) {
                     a.l(",");
                 }
-                a.l(this.d._inner[c].k());
+                a.l(this.d._inner[c].l());
             }
             a.l("]");
             a.l("}");
@@ -64122,10 +64122,10 @@
             for (var k = 0; k < j.count; k++) {
                 var l = this.q._inner[k].au();
                 var m = this.d.b(j._inner[k]);
-                l.h = m[0] - d;
-                l.f = m[1] - e;
-                l.e = igniteuiWebcomponentsCore.NativeUI.d(j._inner[k]);
-                l.i = igniteuiWebcomponentsCore.NativeUI.k(j._inner[k]);
+                l.i = m[0] - d;
+                l.g = m[1] - e;
+                l.f = igniteuiWebcomponentsCore.NativeUI.d(j._inner[k]);
+                l.j = igniteuiWebcomponentsCore.NativeUI.k(j._inner[k]);
                 a.d.add(l);
             }
             if (this.k != null) {
@@ -70750,8 +70750,9 @@
         tslib.__extends(CheckedChangedEventArgs, _super);
         function CheckedChangedEventArgs() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.b = 0;
-            _this.a = false;
+            _this.c = 0;
+            _this.b = false;
+            _this.a = null;
             return _this;
         }
         CheckedChangedEventArgs.$t = igniteuiWebcomponentsCore.markType(CheckedChangedEventArgs, 'CheckedChangedEventArgs');
@@ -70829,13 +70830,13 @@
         CheckboxListView.prototype.w = function (a) {
             var b = a.rootWrapper.getChildAt(0);
             this.h = b;
-            this.b.r = new igniteuiWebcomponentsInputs.XInputGroup();
+            this.b.t = new igniteuiWebcomponentsInputs.XInputGroup();
             var c = a.getSubRenderer(b);
-            this.b.r.provideContainer(c);
-            var d = c.getExternal(this.b.r, c.rootWrapper, c.getExternal(this.b, null, null));
-            this.b.r.d = this.b.t;
-            this.b.r.p = this.b.y;
-            this.b.r.t = this.b.aa;
+            this.b.t.provideContainer(c);
+            var d = c.getExternal(this.b.t, c.rootWrapper, c.getExternal(this.b, null, null));
+            this.b.t.d = this.b.v;
+            this.b.t.p = this.b.aa;
+            this.b.t.t = this.b.ac;
             var e = a.createElement("div");
             var f = a.getSubRenderer(e);
             var g = new igniteuiWebcomponentsInputs.XPrefix();
@@ -70845,38 +70846,38 @@
             var j = a.getSubRenderer(i);
             this.c = new igniteuiWebcomponentsInputs.XIcon();
             this.c.provideContainer(j);
-            this.c.fill = this.b.du;
-            this.c.svgPath = CheckboxList.bt;
+            this.c.fill = this.b.d1;
+            this.c.svgPath = CheckboxList.bw;
             var k = f.getExternal(this.c, j.rootWrapper, j.getExternal(this.b, null, null));
             g.appendContentChild(i);
-            this.b.r.appendContentChild(e);
-            this.b.r.inputs.add(g);
+            this.b.t.appendContentChild(e);
+            this.b.t.inputs.add(g);
             var l = a.createElement("div");
             l.setRawStyleProperty("flex-grow", "1");
             var m = a.getSubRenderer(l);
-            this.b.p = new igniteuiWebcomponentsInputs.XInput();
-            this.b.p.provideContainer(m);
-            this.b.p.b8 = "text";
-            var n = m.getExternal(this.b.p, m.rootWrapper, m.getExternal(this.b, null, null));
-            if (this.b.bg != null) {
-                this.b.p.cg = this.b.bg;
+            this.b.r = new igniteuiWebcomponentsInputs.XInput();
+            this.b.r.provideContainer(m);
+            this.b.r.b8 = "text";
+            var n = m.getExternal(this.b.r, m.rootWrapper, m.getExternal(this.b, null, null));
+            if (this.b.bi != null) {
+                this.b.r.cg = this.b.bi;
             }
-            this.b.r.appendContentChild(l);
-            this.b.r.inputs.add(this.b.p);
-            this.b.ck();
+            this.b.t.appendContentChild(l);
+            this.b.t.inputs.add(this.b.r);
+            this.b.co();
         };
         CheckboxListView.prototype.s = function () {
             if (this.f != null) {
                 var a = this.f.rootWrapper.getChildAt(3);
                 a.setStyleProperty("width", "100%");
                 a.setStyleProperty("margin", "4px 0px 0px 0px");
-                if (this.b.as == false) {
+                if (this.b.au == false) {
                     a.setStyleProperty("height", "calc(100% - 50px");
                 }
                 else {
                     a.setStyleProperty("height", "calc(100% - 75px");
                 }
-                if (!this.b.aq && !this.b.as) {
+                if (!this.b.as && !this.b.au) {
                     a.setStyleProperty("height", "100%");
                 }
             }
@@ -70889,14 +70890,14 @@
                 d.provideContainer(e);
                 var f = this.f.getExternal(d, e.rootWrapper, this.f.getExternal(this.b, null, null));
                 this.e.addItem(a, d);
-                d.n = this.b.y;
+                d.n = this.b.aa;
                 d.y = true;
                 d.change = igniteuiWebcomponentsCore.delegateCombine(d.change, igniteuiWebcomponentsCore.runOn(this, this.k));
                 var g = this.f.createElement("div");
                 a.setStyleProperty("display", "flex");
                 a.setStyleProperty("height", "100%");
                 a.setStyleProperty("align-items", "center");
-                switch (this.b.aa) {
+                switch (this.b.ac) {
                     case 1:
                         a.setStyleProperty("margin-top", "-4px");
                         break;
@@ -70937,11 +70938,11 @@
                 finally {
                     d.z = h;
                 }
-                d.dk = this.b.dl;
-                d.dd = this.b.dj;
-                d.dl = this.b.dm;
-                d.de = this.b.dk;
-                d.dm = this.b.dn;
+                d.dk = this.b.dr;
+                d.dd = this.b.dp;
+                d.dl = this.b.ds;
+                d.de = this.b.dq;
+                d.dm = this.b.dt;
             }
         };
         CheckboxListView.prototype.z = function () {
@@ -70951,7 +70952,7 @@
                     for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.e)), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var a = _c.value;
                         var b = a.value;
-                        b.n = this.b.y;
+                        b.n = this.b.aa;
                     }
                 }
                 catch (e_1_1) {
@@ -70969,7 +70970,7 @@
                 }
             }
             if (this.a != null) {
-                this.a.n = this.b.y;
+                this.a.n = this.b.aa;
             }
         };
         CheckboxListView.prototype.x = function () {
@@ -70980,21 +70981,21 @@
             var e = c.checked;
             if (e == true) {
                 if (this.b.l == 0) {
-                    this.b.cw(d);
+                    this.b.c0(d);
                 }
                 else {
-                    this.b.b5(d);
+                    this.b.b8(d);
                 }
             }
             else {
                 if (this.b.l == 0) {
-                    this.b.b5(d);
+                    this.b.b8(d);
                 }
                 else {
-                    this.b.cw(d);
+                    this.b.c0(d);
                 }
             }
-            this.b.ci(d, e);
+            this.b.cm(d, e);
             this.ag(false);
         };
         CheckboxListView.prototype.l = function () {
@@ -71008,7 +71009,7 @@
                     var e = parseInt(d.a4.toString());
                     if (e == a) {
                         d.checked = b;
-                        this.b.ci(e, b);
+                        this.b.cm(e, b);
                     }
                 }
             }
@@ -71066,9 +71067,9 @@
             this.a = new igniteuiWebcomponentsInputs.XCheckbox();
             this.a.provideContainer(c);
             var d = this.f.getExternal(this.a, c.rootWrapper, this.f.getExternal(this.b, null, null));
-            this.a.n = this.b.y;
+            this.a.n = this.b.aa;
             this.i = a.createElement("label");
-            this.i.setRawText(this.b.bx);
+            this.i.setRawText(this.b.b0);
             this.i.setStyleProperty("font-size", "13px");
             this.j.setStyleProperty("display", "flex");
             this.j.setStyleProperty("flex-direction", "row");
@@ -71084,34 +71085,37 @@
         };
         CheckboxListView.prototype.af = function () {
             if (null != this.i) {
-                this.i.setRawText(this.b.bx);
-                igniteuiWebcomponentsCore.NativeUI.q(this.i, this.b.dh);
+                this.i.setRawText(this.b.b0);
+                igniteuiWebcomponentsCore.NativeUI.q(this.i, this.b.dm);
             }
         };
         CheckboxListView.prototype.ai = function () {
             if (null != this.i) {
-                var a = this.b.as ? "flex" : "none";
+                var a = this.b.au ? "flex" : "none";
                 this.j.setStyleProperty("display", a);
             }
         };
         CheckboxListView.prototype.ae = function () {
             if (this.h != null) {
-                this.h.setStyleProperty("display", this.b.aq ? "block" : "none");
+                this.h.setStyleProperty("display", this.b.as ? "block" : "none");
             }
             if (this.g != null) {
-                this.g.setStyleProperty("display", this.b.aq ? "block" : "none");
+                this.g.setStyleProperty("display", this.b.as ? "block" : "none");
             }
         };
         CheckboxListView.prototype.ag = function (a) {
             if (a === void 0) {
                 a = true;
             }
+            if (this.a == null) {
+                return;
+            }
             var b = this.d;
             this.d = true;
             var c = this.a.z;
             this.a.z = a;
             try {
-                if (this.b.ao) {
+                if (this.b.aq) {
                     this.a.indeterminate = true;
                     return;
                 }
@@ -71133,12 +71137,12 @@
                 return;
             }
             if (b.isChecked) {
-                this.b.cy();
-                this.b.cp(b.isChecked);
+                this.b.c2();
+                this.b.ct(b.isChecked);
             }
             else {
-                this.b.b9();
-                this.b.cp(b.isChecked);
+                this.b.cc();
+                this.b.ct(b.isChecked);
             }
         };
         CheckboxListView.prototype.ad = function () {
@@ -71148,18 +71152,41 @@
             }
             var b = a.rootWrapper;
             if (null != b) {
-                igniteuiWebcomponentsCore.NativeUI.q(b, this.b.dy);
-                igniteuiWebcomponentsCore.NativeUI.m(b, this.b.di);
+                igniteuiWebcomponentsCore.NativeUI.q(b, this.b.d5);
+                igniteuiWebcomponentsCore.NativeUI.m(b, this.b.dn);
             }
         };
         CheckboxListView.prototype.ab = function () {
             if (this.c != null) {
-                this.c.fill = this.b.du;
+                this.c.fill = this.b.d1;
+            }
+        };
+        CheckboxListView.prototype.aj = function () {
+            var a = 248;
+            var b = 0;
+            if (this.b.itemsSource == null) {
+                return new igniteuiWebcomponentsCore.Size(1, a, b + 158);
+            }
+            var c = (this.b.itemsSource.length);
+            b += 4;
+            b += 16;
+            b += 38;
+            b += 8;
+            b += 4;
+            var d = this.b.h != null ? this.b.h.actualRowHeight : 30;
+            var e = d * c;
+            if (e > 150) {
+                b += 150;
+                b += 15;
             }
+            else {
+                b += e;
+            }
+            return new igniteuiWebcomponentsCore.Size(1, a, b);
         };
         CheckboxListView.prototype.ac = function () {
-            if (this.b.ae != null) {
-                this.i.setStyleProperty("font", this.b.ae.fontString);
+            if (this.b.ag != null) {
+                this.i.setStyleProperty("font", this.b.ag.fontString);
             }
             else {
                 this.i.setStyleProperty("font-family", "Verdana");
@@ -71167,11 +71194,11 @@
             }
         };
         CheckboxListView.prototype.y = function () {
-            this.a.dk = this.b.dl;
-            this.a.dd = this.b.dj;
-            this.a.dl = this.b.dm;
-            this.a.de = this.b.dk;
-            this.a.dm = this.b.dn;
+            this.a.dk = this.b.dr;
+            this.a.dd = this.b.dp;
+            this.a.dl = this.b.ds;
+            this.a.de = this.b.dq;
+            this.a.dm = this.b.dt;
         };
         CheckboxListView.prototype.aa = function (a) {
             if (this.g != null) {
@@ -71194,52 +71221,55 @@
             _this.m = null;
             _this.h = null;
             _this.i = null;
-            _this.ab = null;
+            _this.ad = null;
             _this.d = null;
-            _this.ai = false;
+            _this.ak = false;
             _this.c = null;
-            _this.o = null;
             _this.q = null;
-            _this.aj = false;
-            _this.ag = null;
+            _this.s = null;
+            _this.al = false;
+            _this.ai = null;
             _this.f = new GridSelectedKeysCollection();
             _this.a = null;
             _this.propertyChanged = null;
+            _this.selectedKeyAdded = null;
+            _this.selectedKeyRemoved = null;
             _this.checkedChanged = null;
-            _this.ay = null;
             _this.a0 = null;
             _this.a2 = null;
-            _this.a1 = null;
-            _this.s = 3;
-            _this.au = -1;
-            _this.ac = null;
+            _this.a4 = null;
+            _this.a3 = null;
+            _this.u = 3;
+            _this.aw = -1;
+            _this.ae = null;
             _this.k = 1;
-            _this.x = 1;
-            _this.z = 2;
-            _this.dd = igniteuiWebcomponentsCore.BrushUtil.h(255, 24, 29, 31);
+            _this.z = 1;
+            _this.ab = 2;
+            _this.di = igniteuiWebcomponentsCore.BrushUtil.h(255, 24, 29, 31);
+            _this.dg = null;
+            _this.dj = null;
+            _this.dh = null;
+            _this.af = null;
             _this.db = null;
-            _this.de = null;
-            _this.dc = null;
-            _this.ad = null;
-            _this.c7 = null;
-            _this.c5 = null;
-            _this.c8 = null;
-            _this.c6 = null;
             _this.c9 = null;
-            _this.v = 0;
+            _this.dc = null;
             _this.da = null;
-            _this.bw = null;
+            _this.dd = null;
+            _this.x = 0;
             _this.df = null;
-            _this.c3 = CheckboxList.dq;
-            _this.ar = true;
-            _this.c4 = CheckboxList.dp;
-            _this.dg = CheckboxList.dq;
+            _this.bz = null;
+            _this.dk = null;
+            _this.c7 = CheckboxList.dw;
+            _this.at = true;
+            _this.c8 = CheckboxList.du;
+            _this.de = CheckboxList.dv;
+            _this.dl = CheckboxList.dw;
             _this.selectAllCheckboxChanged = null;
-            _this.aw = -1;
-            _this.ap = true;
-            _this.am = true;
+            _this.ay = -1;
+            _this.ar = true;
+            _this.ao = true;
             var a = _this.f;
-            a.collectionChanged = igniteuiWebcomponentsCore.delegateCombine(a.collectionChanged, igniteuiWebcomponentsCore.runOn(_this, _this.cr));
+            a.collectionChanged = igniteuiWebcomponentsCore.delegateCombine(a.collectionChanged, igniteuiWebcomponentsCore.runOn(_this, _this.cv));
             _this.d = new igniteuiWebcomponentsCore.FilterFactory();
             var b = new CheckboxListView();
             b.b = _this;
@@ -71247,22 +71277,22 @@
             _this.m.n();
             return _this;
         }
-        Object.defineProperty(CheckboxList.prototype, "r", {
+        Object.defineProperty(CheckboxList.prototype, "t", {
             get: function () {
-                return this.q;
+                return this.s;
             },
             set: function (a) {
-                this.q = a;
+                this.s = a;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "p", {
+        Object.defineProperty(CheckboxList.prototype, "r", {
             get: function () {
-                return this.o;
+                return this.q;
             },
             set: function (a) {
-                this.o = a;
+                this.q = a;
             },
             enumerable: false,
             configurable: true
@@ -71277,13 +71307,13 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "ah", {
+        Object.defineProperty(CheckboxList.prototype, "aj", {
             get: function () {
-                if (this.ag == null) {
-                    this.ag = new igniteuiWebcomponentsCore.SRProvider(this.m.f);
-                    this.ag.cb("DataGrid");
+                if (this.ai == null) {
+                    this.ai = new igniteuiWebcomponentsCore.SRProvider(this.m.f);
+                    this.ai.cb("DataGrid");
                 }
-                return this.ag;
+                return this.ai;
             },
             enumerable: false,
             configurable: true
@@ -71303,61 +71333,91 @@
                 var b = this.a;
                 this.a = a;
                 if (b != this.a) {
-                    this.cn("PrimaryKey", b, this.a);
+                    this.cr("PrimaryKey", b, this.a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        CheckboxList.prototype.cr = function (a, b) {
-            if (this.e == null || this.e.actualSchema == null || this.ai) {
+        CheckboxList.prototype.cv = function (a, b) {
+            if (this.e == null || this.e.actualSchema == null || this.ak) {
                 return;
             }
             switch (b.action) {
                 case 0:
                     for (var c = 0; c < b.newItems.count; c++) {
-                        this.cl(b.newItems.item(c));
+                        this.cp(b.newItems.item(c));
                     }
                     break;
                 case 1:
                     for (var d = 0; d < b.oldItems.count; d++) {
-                        this.cm(b.oldItems.item(d));
+                        this.cq(b.oldItems.item(d));
                     }
                     break;
                 case 2:
                     for (var e = 0; e < b.oldItems.count; e++) {
-                        this.cm(b.oldItems.item(e));
+                        this.cq(b.oldItems.item(e));
                     }
                     for (var f = 0; f < b.newItems.count; f++) {
-                        this.cl(b.newItems.item(f));
+                        this.cp(b.newItems.item(f));
                     }
                     break;
                 case 4:
                     this.m.u(this.l == 0);
                     for (var g = 0; g < this.g.ae.count; g++) {
-                        this.cl(this.g.ae._inner[g]);
+                        this.cp(this.g.ae._inner[g]);
                     }
                     break;
             }
         };
-        CheckboxList.prototype.cl = function (a) {
+        CheckboxList.prototype.cp = function (a) {
+            var _this = this;
             var b = this.e.indexOfKey(a.value);
             if (b >= 0) {
                 this.m.t(b, this.l == 1);
             }
+            if (this.selectedKeyAdded == null) {
+                return;
+            }
+            this.selectedKeyAdded(this, ((function () {
+                var $ret = new CheckedChangedEventArgs();
+                $ret.c = b;
+                $ret.b = _this.l == 1;
+                $ret.a = a.value;
+                return $ret;
+            })()));
         };
-        CheckboxList.prototype.cm = function (a) {
+        CheckboxList.prototype.cq = function (a) {
+            var _this = this;
             var b = this.e.indexOfKey(a.value);
             if (b >= 0) {
                 this.m.t(b, this.l == 0);
             }
+            if (this.selectedKeyRemoved == null) {
+                return;
+            }
+            this.selectedKeyRemoved(this, ((function () {
+                var $ret = new CheckedChangedEventArgs();
+                $ret.c = b;
+                $ret.b = _this.l == 0;
+                $ret.a = a.value;
+                return $ret;
+            })()));
         };
-        CheckboxList.prototype.ci = function (a, b) {
-            if (this.checkedChanged != null && this.aj == false) {
+        CheckboxList.prototype.cm = function (a, b) {
+            if (this.checkedChanged != null && this.al == false) {
+                var c_1 = null;
+                if (this.e.actualPrimaryKey != null && this.e.actualPrimaryKey.length > 0) {
+                    c_1 = new Array(this.e.actualPrimaryKey.length);
+                    for (var d = 0; d < this.e.actualPrimaryKey.length; d++) {
+                        c_1[d] = this.e.getItemPropertyAtIndex(a, this.e.actualPrimaryKey[d]);
+                    }
+                }
                 this.checkedChanged(this, ((function () {
                     var $ret = new CheckedChangedEventArgs();
-                    $ret.b = a;
-                    $ret.a = b;
+                    $ret.c = a;
+                    $ret.b = b;
+                    $ret.a = c_1;
                     return $ret;
                 })()));
             }
@@ -71368,52 +71428,59 @@
         CheckboxList.prototype.destroy = function () {
             if (this.h != null) {
                 var a = this.h;
-                a.cellClicked = igniteuiWebcomponentsCore.delegateRemove(a.cellClicked, igniteuiWebcomponentsCore.runOn(this, this.cb));
+                a.cellClicked = igniteuiWebcomponentsCore.delegateRemove(a.cellClicked, igniteuiWebcomponentsCore.runOn(this, this.ce));
+                var b = this.h;
+                b.sizeChanged = igniteuiWebcomponentsCore.delegateRemove(b.sizeChanged, igniteuiWebcomponentsCore.runOn(this, this.cf));
                 if (this.h.actualDataSource != null) {
-                    var b = this.h.actualDataSource;
-                    b.schemaChanged = igniteuiWebcomponentsCore.delegateRemove(b.schemaChanged, igniteuiWebcomponentsCore.runOn(this, this.co));
+                    var c = this.h.actualDataSource;
+                    c.schemaChanged = igniteuiWebcomponentsCore.delegateRemove(c.schemaChanged, igniteuiWebcomponentsCore.runOn(this, this.cs));
                 }
             }
-            if (this.o != null) {
-                var c = this.o;
-                c.change = igniteuiWebcomponentsCore.delegateRemove(c.change, igniteuiWebcomponentsCore.runOn(this, this.cc));
+            if (this.q != null) {
+                var d = this.q;
+                d.change = igniteuiWebcomponentsCore.delegateRemove(d.change, igniteuiWebcomponentsCore.runOn(this, this.cg));
             }
             this.provideContainer(null, null, null);
             if (this.i != null) {
-                var d = this.i;
-                d.cellUpdating = igniteuiWebcomponentsCore.delegateRemove(d.cellUpdating, igniteuiWebcomponentsCore.runOn(this, this.b8));
+                var e = this.i;
+                e.cellUpdating = igniteuiWebcomponentsCore.delegateRemove(e.cellUpdating, igniteuiWebcomponentsCore.runOn(this, this.cb));
             }
         };
         CheckboxList.prototype.provideContainer = function (a, b, c) {
             this.h = b;
             if (null != this.h) {
-                this.h.scrollbarStyle = this.w;
-                this.h.scrollbarBackground = this.dr;
+                this.h.scrollbarStyle = 1;
+                var d = this.h;
+                d.sizeChanged = igniteuiWebcomponentsCore.delegateCombine(d.sizeChanged, igniteuiWebcomponentsCore.runOn(this, this.cf));
+                this.h.scrollbarBackground = this.dy;
                 this.h.headerHeight = 0;
                 this.h.rowSeparatorHeight = 0;
                 this.h.defaultColumnMinWidth = NaN;
                 this.h.autoGenerateColumns = false;
                 this.h.activationMode = 0;
                 this.h.editMode = 0;
-                var d = this.h;
-                d.cellClicked = igniteuiWebcomponentsCore.delegateCombine(d.cellClicked, igniteuiWebcomponentsCore.runOn(this, this.cb));
-                if (this.ay != null) {
-                    this.h.itemsSource = this.ay;
-                    this.b7();
-                    this.cq();
-                }
+                var e = this.h;
+                e.cellClicked = igniteuiWebcomponentsCore.delegateCombine(e.cellClicked, igniteuiWebcomponentsCore.runOn(this, this.ce));
                 if (this.a0 != null) {
-                    this.cq();
-                    this.c1();
+                    this.h.itemsSource = this.a0;
+                    this.ca();
+                    this.cu();
+                }
+                if (this.a2 != null) {
+                    this.cu();
+                    this.c5();
                 }
             }
             this.m.q(c);
             this.m.m(a);
         };
+        CheckboxList.prototype.cf = function (a, b) {
+            this.h.scrollbarStyle = this.y;
+        };
         CheckboxList.prototype.provideSelectAllSection = function (a) {
             this.m.q(a);
         };
-        CheckboxList.prototype.cb = function (a, b) {
+        CheckboxList.prototype.ce = function (a, b) {
             if (b.cellInfo.l.a5 == 0) {
                 return;
             }
@@ -71421,15 +71488,22 @@
             if (-1 == c) {
                 return;
             }
-            var d = this.j(b.cellInfo.g4);
-            if (this.g.contains(d)) {
-                this.g.remove(d);
+            var d = b.cellInfo.g4;
+            var e = this.j(d);
+            if (this.g.contains(e)) {
+                if (this.ad != null) {
+                    this.ad.setPropertyValue(d, false);
+                }
+                this.g.remove(e);
             }
             else {
-                this.g.add(d);
+                if (this.ad != null) {
+                    this.ad.setPropertyValue(d, true);
+                }
+                this.g.add(e);
             }
         };
-        CheckboxList.prototype.b8 = function (a, b) {
+        CheckboxList.prototype.cb = function (a, b) {
             var c = b.cellInfo.l.x;
             if (-1 == c) {
                 return;
@@ -71443,9 +71517,9 @@
             }
             this.m.o(b.content.element, c, d);
         };
-        CheckboxList.prototype.cj = function (a) {
-            if (this.a0 != null) {
-                var b = this.d.property(this.a0).cast(igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.DataSourceSchemaPropertyType_$type, 0)).toLower();
+        CheckboxList.prototype.cn = function (a) {
+            if (this.a2 != null) {
+                var b = this.d.property(this.a2).cast(igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.DataSourceSchemaPropertyType_$type, 0)).toLower();
                 var c = b.contains(a);
                 if (!this.h.filterExpressions.k.contains(this.c)) {
                     this.c = c;
@@ -71458,20 +71532,6 @@
             }
         };
         Object.defineProperty(CheckboxList.prototype, "itemsSource", {
-            get: function () {
-                return this.ay;
-            },
-            set: function (a) {
-                var b = this.ay;
-                this.ay = a;
-                if (b != this.ay) {
-                    this.cn("ItemsSource", b, this.ay);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CheckboxList.prototype, "bc", {
             get: function () {
                 return this.a0;
             },
@@ -71479,13 +71539,13 @@
                 var b = this.a0;
                 this.a0 = a;
                 if (b != this.a0) {
-                    this.cn("DataMemberPath", b, this.a0);
+                    this.cr("ItemsSource", b, this.a0);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "b0", {
+        Object.defineProperty(CheckboxList.prototype, "be", {
             get: function () {
                 return this.a2;
             },
@@ -71493,55 +71553,69 @@
                 var b = this.a2;
                 this.a2 = a;
                 if (b != this.a2) {
-                    this.cn("SelectedMemberPath", b, this.a2);
+                    this.cr("DataMemberPath", b, this.a2);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "bg", {
+        Object.defineProperty(CheckboxList.prototype, "b3", {
             get: function () {
-                return this.a1;
+                return this.a4;
             },
             set: function (a) {
-                var b = this.a1;
-                this.a1 = a;
-                if (b != this.a1) {
-                    this.cn("FilterPlaceholderText", b, this.a1);
+                var b = this.a4;
+                this.a4 = a;
+                if (b != this.a4) {
+                    this.cr("SelectedMemberPath", b, this.a4);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "t", {
+        Object.defineProperty(CheckboxList.prototype, "bi", {
             get: function () {
-                return this.s;
+                return this.a3;
             },
             set: function (a) {
-                var b = this.s;
-                this.s = a;
-                if (b != this.s) {
-                    this.cn("SearchInputType", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsInputs.InputGroupDisplayType_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsInputs.InputGroupDisplayType_$type, this.s));
+                var b = this.a3;
+                this.a3 = a;
+                if (b != this.a3) {
+                    this.cr("FilterPlaceholderText", b, this.a3);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "ax", {
+        Object.defineProperty(CheckboxList.prototype, "v", {
             get: function () {
-                return this.au;
+                return this.u;
             },
             set: function (a) {
-                var b = this.au;
-                this.au = a;
-                if (b != this.au) {
-                    this.cn("RowHeight", b, this.au);
+                var b = this.u;
+                this.u = a;
+                if (b != this.u) {
+                    this.cr("SearchInputType", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsInputs.InputGroupDisplayType_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsInputs.InputGroupDisplayType_$type, this.u));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "av", {
+        Object.defineProperty(CheckboxList.prototype, "az", {
+            get: function () {
+                return this.aw;
+            },
+            set: function (a) {
+                var b = this.aw;
+                this.aw = a;
+                if (b != this.aw) {
+                    this.cr("RowHeight", b, this.aw);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CheckboxList.prototype, "ax", {
             get: function () {
                 if (this.h != null) {
                     return this.h.actualRowHeight;
@@ -71551,15 +71625,15 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "ae", {
+        Object.defineProperty(CheckboxList.prototype, "ag", {
             get: function () {
-                return this.ac;
+                return this.ae;
             },
             set: function (a) {
-                var b = this.ac;
-                this.ac = a;
-                if (b != this.ac) {
-                    this.cn("CellTextStyle", b, this.ac);
+                var b = this.ae;
+                this.ae = a;
+                if (b != this.ae) {
+                    this.cr("CellTextStyle", b, this.ae);
                 }
             },
             enumerable: false,
@@ -71573,215 +71647,215 @@
                 var b = this.k;
                 this.k = a;
                 if (b != this.k) {
-                    this.cn("IndexType", igniteuiWebcomponentsCore.enumGetBox(CheckboxListIndexType_$type, b), igniteuiWebcomponentsCore.enumGetBox(CheckboxListIndexType_$type, this.k));
+                    this.cr("IndexType", igniteuiWebcomponentsCore.enumGetBox(CheckboxListIndexType_$type, b), igniteuiWebcomponentsCore.enumGetBox(CheckboxListIndexType_$type, this.k));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "y", {
+        Object.defineProperty(CheckboxList.prototype, "aa", {
             get: function () {
-                return this.x;
+                return this.z;
             },
             set: function (a) {
-                var b = this.x;
-                this.x = a;
-                if (b != this.x) {
-                    this.cn("BaseTheme", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.x));
+                var b = this.z;
+                this.z = a;
+                if (b != this.z) {
+                    this.cr("BaseTheme", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.z));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "aa", {
+        Object.defineProperty(CheckboxList.prototype, "ac", {
             get: function () {
-                return this.z;
+                return this.ab;
             },
             set: function (a) {
-                var b = this.z;
-                this.z = a;
-                if (b != this.z) {
-                    this.cn("Density", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, this.z));
+                var b = this.ab;
+                this.ab = a;
+                if (b != this.ab) {
+                    this.cr("Density", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, this.ab));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "du", {
+        Object.defineProperty(CheckboxList.prototype, "d1", {
             get: function () {
-                return this.dd;
+                return this.di;
             },
             set: function (a) {
-                var b = this.dd;
-                this.dd = a;
-                if (b != this.dd) {
-                    this.cn("SearchIconColor", b, this.dd);
+                var b = this.di;
+                this.di = a;
+                if (b != this.di) {
+                    this.cr("SearchIconColor", b, this.di);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "ds", {
+        Object.defineProperty(CheckboxList.prototype, "dz", {
             get: function () {
-                return this.db;
+                return this.dg;
             },
             set: function (a) {
-                var b = this.db;
-                this.db = a;
-                if (b != this.db) {
-                    this.cn("SearchBackgroundColor", b, this.db);
+                var b = this.dg;
+                this.dg = a;
+                if (b != this.dg) {
+                    this.cr("SearchBackgroundColor", b, this.dg);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "dv", {
+        Object.defineProperty(CheckboxList.prototype, "d2", {
             get: function () {
-                return this.de;
+                return this.dj;
             },
             set: function (a) {
-                var b = this.de;
-                this.de = a;
-                if (b != this.de) {
-                    this.cn("SearchTextColor", b, this.de);
+                var b = this.dj;
+                this.dj = a;
+                if (b != this.dj) {
+                    this.cr("SearchTextColor", b, this.dj);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "dt", {
+        Object.defineProperty(CheckboxList.prototype, "d0", {
             get: function () {
-                return this.dc;
+                return this.dh;
             },
             set: function (a) {
-                var b = this.dc;
-                this.dc = a;
-                if (b != this.dc) {
-                    this.cn("SearchBorderColor", b, this.dc);
+                var b = this.dh;
+                this.dh = a;
+                if (b != this.dh) {
+                    this.cr("SearchBorderColor", b, this.dh);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "af", {
+        Object.defineProperty(CheckboxList.prototype, "ah", {
             get: function () {
-                return this.ad;
+                return this.af;
             },
             set: function (a) {
-                var b = this.ad;
-                this.ad = a;
-                if (b != this.ad) {
-                    this.cn("SearchTextStyle", b, this.ad);
+                var b = this.af;
+                this.af = a;
+                if (b != this.af) {
+                    this.cr("SearchTextStyle", b, this.af);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "dl", {
+        Object.defineProperty(CheckboxList.prototype, "dr", {
             get: function () {
-                return this.c7;
+                return this.db;
             },
             set: function (a) {
-                var b = this.c7;
-                this.c7 = a;
-                if (b != this.c7) {
-                    this.cn("CheckboxTickColor", b, this.c7);
+                var b = this.db;
+                this.db = a;
+                if (b != this.db) {
+                    this.cr("CheckboxTickColor", b, this.db);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "dj", {
+        Object.defineProperty(CheckboxList.prototype, "dp", {
             get: function () {
-                return this.c5;
+                return this.c9;
             },
             set: function (a) {
-                var b = this.c5;
-                this.c5 = a;
-                if (b != this.c5) {
-                    this.cn("CheckboxCheckedBackgroundColor", b, this.c5);
+                var b = this.c9;
+                this.c9 = a;
+                if (b != this.c9) {
+                    this.cr("CheckboxCheckedBackgroundColor", b, this.c9);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "dm", {
+        Object.defineProperty(CheckboxList.prototype, "ds", {
             get: function () {
-                return this.c8;
+                return this.dc;
             },
             set: function (a) {
-                var b = this.c8;
-                this.c8 = a;
-                if (b != this.c8) {
-                    this.cn("CheckboxUncheckedBackgroundColor", b, this.c8);
+                var b = this.dc;
+                this.dc = a;
+                if (b != this.dc) {
+                    this.cr("CheckboxUncheckedBackgroundColor", b, this.dc);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "dk", {
+        Object.defineProperty(CheckboxList.prototype, "dq", {
             get: function () {
-                return this.c6;
+                return this.da;
             },
             set: function (a) {
-                var b = this.c6;
-                this.c6 = a;
-                if (b != this.c6) {
-                    this.cn("CheckboxCheckedBorderColor", b, this.c6);
+                var b = this.da;
+                this.da = a;
+                if (b != this.da) {
+                    this.cr("CheckboxCheckedBorderColor", b, this.da);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "dn", {
+        Object.defineProperty(CheckboxList.prototype, "dt", {
             get: function () {
-                return this.c9;
+                return this.dd;
             },
             set: function (a) {
-                var b = this.c9;
-                this.c9 = a;
-                if (b != this.c9) {
-                    this.cn("CheckboxUncheckedBorderColor", b, this.c9);
+                var b = this.dd;
+                this.dd = a;
+                if (b != this.dd) {
+                    this.cr("CheckboxUncheckedBorderColor", b, this.dd);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "w", {
+        Object.defineProperty(CheckboxList.prototype, "y", {
             get: function () {
-                return this.v;
+                return this.x;
             },
             set: function (a) {
-                var b = this.v;
-                this.v = a;
-                if (b != this.v) {
-                    this.cn("ScrollbarStyle", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ScrollbarStyle_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ScrollbarStyle_$type, this.v));
+                var b = this.x;
+                this.x = a;
+                if (b != this.x) {
+                    this.cr("ScrollbarStyle", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ScrollbarStyle_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ScrollbarStyle_$type, this.x));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "dr", {
+        Object.defineProperty(CheckboxList.prototype, "dy", {
             get: function () {
-                return this.da;
+                return this.df;
             },
             set: function (a) {
-                var b = this.da;
-                this.da = a;
-                if (b != this.da) {
-                    this.cn("ScrollbarBackground", b, this.da);
+                var b = this.df;
+                this.df = a;
+                if (b != this.df) {
+                    this.cr("ScrollbarBackground", b, this.df);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        CheckboxList.prototype.cn = function (a, b, c) {
+        CheckboxList.prototype.cr = function (a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new igniteuiWebcomponentsCore.PropertyChangedEventArgs(a));
             }
-            this.cs(a, b, c);
+            this.cw(a, b, c);
         };
-        CheckboxList.prototype.cs = function (a, b, c) {
+        CheckboxList.prototype.cw = function (a, b, c) {
             switch (a) {
                 case "ItemsSource":
                     if (this.h != null) {
@@ -71794,26 +71868,26 @@
                         }
                         if (this.h.actualDataSource != null) {
                             var d = this.h.actualDataSource;
-                            d.schemaChanged = igniteuiWebcomponentsCore.delegateRemove(d.schemaChanged, igniteuiWebcomponentsCore.runOn(this, this.co));
+                            d.schemaChanged = igniteuiWebcomponentsCore.delegateRemove(d.schemaChanged, igniteuiWebcomponentsCore.runOn(this, this.cs));
                         }
-                        this.h.itemsSource = this.ay;
-                        this.b7();
+                        this.h.itemsSource = this.a0;
+                        this.ca();
                         if (this.h.actualDataSource != null) {
                             var e = this.h.actualDataSource;
-                            e.schemaChanged = igniteuiWebcomponentsCore.delegateCombine(e.schemaChanged, igniteuiWebcomponentsCore.runOn(this, this.co));
+                            e.schemaChanged = igniteuiWebcomponentsCore.delegateCombine(e.schemaChanged, igniteuiWebcomponentsCore.runOn(this, this.cs));
                         }
-                        this.aj = true;
-                        this.cq();
-                        this.aj = false;
+                        this.al = true;
+                        this.cu();
+                        this.al = false;
                         this.m.ag();
                     }
                     break;
                 case "DataMemberPath":
                 case "SelectedMemberPath":
                     if (this.h != null) {
-                        if (this.a0 != null) {
-                            this.cq();
-                            this.c1();
+                        if (this.a2 != null) {
+                            this.cu();
+                            this.c5();
                         }
                     }
                     break;
@@ -71823,7 +71897,7 @@
                     }
                     break;
                 case "SelectAllCaptionTextColor":
-                    this.dh = null != this.dw ? this.dw : CheckboxList.dq;
+                    this.dm = null != this.d3 ? this.d3 : CheckboxList.dw;
                     break;
                 case "SelectAllCaption":
                 case "ActualSelectAllCaptionTextColor":
@@ -71838,71 +71912,75 @@
                     this.m.s();
                     break;
                 case "FilterPlaceholderText":
-                    if (this.o != null) {
-                        this.o.cg = this.bg;
+                    if (this.q != null) {
+                        this.q.cg = this.bi;
                     }
                     break;
                 case "SearchInputType":
-                    if (this.q != null) {
-                        this.q.d = this.t;
+                    if (this.s != null) {
+                        this.s.d = this.v;
                     }
                     break;
                 case "RowHeight":
                     if (this.h != null) {
-                        this.h.rowHeight = this.ax;
+                        this.h.rowHeight = this.az;
                     }
                     break;
                 case "CellTextStyle":
                     if (this.h != null) {
-                        this.h.cellTextStyle = this.ae;
+                        this.h.cellTextStyle = this.ag;
                     }
                     this.m.ac();
                     break;
                 case "BackgroundColor":
                 case "TextColor":
+                case "RowHoverBackgroundColor":
                     var f = this.h;
                     if (null != f) {
-                        f.cellTextColor = this.dy;
-                        f.cellBackground = this.di;
-                        f.cellSelectedBackground = this.di;
+                        f.cellTextColor = this.d5;
+                        f.cellBackground = this.dn;
+                        f.cellSelectedBackground = this.dn;
+                        f.rowHoverBackground = this.dx;
                     }
                     this.m.ad();
                     break;
                 case "BaseTheme":
-                    this.c0();
+                    this.c4();
                     break;
                 case "Density":
-                    this.cz();
+                    this.c3();
                     break;
                 case "IsRowHoverEnabled":
                     if (this.h != null) {
-                        this.h.isRowHoverEnabled = this.an;
+                        this.h.isRowHoverEnabled = this.ap;
                     }
                     break;
                 case "ScrollbarStyle":
                     if (this.h != null) {
-                        this.h.scrollbarStyle = this.w;
+                        this.h.scrollbarStyle = this.y;
                     }
                     break;
                 case "ScrollbarBackground":
                     if (this.h != null) {
-                        this.h.scrollbarBackground = this.dr;
+                        this.h.scrollbarBackground = this.dy;
                     }
                     break;
                 case "SearchIconColor":
                     this.m.ab();
                     break;
                 case "SearchBackgroundColor":
-                    this.r.mc = this.ds;
+                    this.t.mc = this.dz;
                     break;
                 case "SearchBorderColor":
-                    this.r.md = this.dt;
+                    this.t.md = this.d0;
                     break;
                 case "SearchTextColor":
-                    this.p.d8 = this.dv;
+                    if (this.r != null) {
+                        this.r.d8 = this.d2;
+                    }
                     break;
                 case "SearchTextStyle":
-                    this.p.af = this.af;
+                    this.r.af = this.ah;
                     break;
                 case "CheckboxTickColor":
                 case "CheckboxCheckedBackgroundColor":
@@ -71916,43 +71994,52 @@
                     break;
             }
         };
-        CheckboxList.prototype.cz = function () {
+        CheckboxList.prototype.c3 = function () {
             if (this.h != null) {
-                this.h.density = this.aa;
+                this.h.density = this.ac;
             }
-            if (this.q != null) {
-                this.q.t = this.aa;
+            if (this.s != null) {
+                this.s.t = this.ac;
             }
             this.m.x();
         };
-        CheckboxList.prototype.c0 = function () {
-            if (this.q != null) {
-                this.q.p = this.y;
+        CheckboxList.prototype.c4 = function () {
+            if (this.s != null) {
+                this.s.p = this.aa;
+            }
+            if (this.r != null) {
+                this.r.d8 = this.d2;
+            }
+            if (this.h != null) {
+                this.h.cellTextColor = this.d5;
+                this.h.cellBackground = this.dn;
+                this.h.cellSelectedBackground = this.dn;
+                this.h.rowHoverBackground = this.dx;
             }
             this.m.z();
         };
-        CheckboxList.prototype.co = function (a, b) {
-            this.aj = true;
-            this.b7();
+        CheckboxList.prototype.cs = function (a, b) {
+            this.al = true;
+            this.ca();
             if (b.schema != null) {
-                this.cq();
+                this.cu();
                 for (var c = 0; c < this.g.count; c++) {
-                    this.cl(this.g._inner[c]);
+                    this.cp(this.g._inner[c]);
                 }
                 this.m.ag();
             }
-            this.aj = false;
+            this.al = false;
         };
-        CheckboxList.prototype.cq = function () {
-            if (this.ab == null && this.a2 != null && this.a2 != "") {
-                this.ab = new igniteuiWebcomponentsCore.FastReflectionHelper(false, this.a2);
+        CheckboxList.prototype.cu = function () {
+            if (this.ad == null && this.a4 != null && this.a4 != "") {
+                this.ad = new igniteuiWebcomponentsCore.FastReflectionHelper(false, this.a4);
             }
-            if (this.ay != null && this.ab != null && this.h.actualDataSource.actualSchema != null) {
-                this.ab.propertyName = this.a2;
+            if (this.a0 != null && this.ad != null && this.h.actualDataSource.actualSchema != null) {
+                this.ad.propertyName = this.a4;
                 var a = this.h.actualDataSource.actualCount;
                 for (var b = 0; b < a; b++) {
                     var c = this.h.actualDataSource.getItemAtIndex(b);
-                    var d = this.ab.getPropertyValue(c);
+                    var d = this.ad.getPropertyValue(c);
                     if (d == true) {
                         var e = this.j(c);
                         if (!this.g.contains(e)) {
@@ -71962,24 +72049,24 @@
                 }
             }
         };
-        CheckboxList.prototype.c1 = function () {
+        CheckboxList.prototype.c5 = function () {
             this.h.actualColumns.clear();
             this.h.primaryKey = this.b;
             this.h.isGroupRowSticky = false;
-            this.h.rowHeight = this.ax;
-            this.h.cellBackground = this.di;
-            this.h.cellSelectedBackground = this.di;
-            this.h.density = this.aa;
-            this.h.isRowHoverEnabled = this.an;
+            this.h.rowHeight = this.az;
+            this.h.cellBackground = this.dn;
+            this.h.cellSelectedBackground = this.dn;
+            this.h.density = this.ac;
+            this.h.isRowHoverEnabled = this.ap;
             this.h.borderWidth = new igniteuiWebcomponentsCore.Thickness(0, 0);
-            if (this.ae != null) {
-                this.h.cellTextStyle = this.ae;
+            if (this.ag != null) {
+                this.h.cellTextStyle = this.ag;
             }
             var a = new TemplateColumn();
-            if (this.a2 == null) {
-                this.a2 = "";
+            if (this.a4 == null) {
+                this.a4 = "";
             }
-            a.i8 = this.a2;
+            a.i8 = this.a4;
             a.jz = "CheckboxColumn";
             var b = new ColumnWidth();
             b.c = false;
@@ -71987,10 +72074,10 @@
             a.width = b;
             a.h2 = 0;
             a.h3 = 0;
-            a.cellUpdating = igniteuiWebcomponentsCore.delegateCombine(a.cellUpdating, igniteuiWebcomponentsCore.runOn(this, this.b8));
+            a.cellUpdating = igniteuiWebcomponentsCore.delegateCombine(a.cellUpdating, igniteuiWebcomponentsCore.runOn(this, this.cb));
             this.h.columns.add(a);
             this.i = a;
-            var c = this.h.actualDataSource.resolveSchemaPropertyType(this.a0);
+            var c = this.h.actualDataSource.resolveSchemaPropertyType(this.a2);
             var d;
             switch (c) {
                 case 8:
@@ -72013,7 +72100,7 @@
                     d = new TextColumn();
                     break;
             }
-            d.i8 = this.a0;
+            d.i8 = this.a2;
             d.jz = "DataColumn";
             d.h2 = 0;
             d.e = 0;
@@ -72025,13 +72112,14 @@
         CheckboxList.prototype.provideHrElement = function (a) {
             this.m.p(a);
         };
-        CheckboxList.prototype.ck = function () {
-            var a = this.p;
-            a.changing = igniteuiWebcomponentsCore.delegateCombine(a.changing, igniteuiWebcomponentsCore.runOn(this, this.cc));
+        CheckboxList.prototype.co = function () {
+            var a = this.r;
+            a.changing = igniteuiWebcomponentsCore.delegateCombine(a.changing, igniteuiWebcomponentsCore.runOn(this, this.cg));
+            this.c4();
         };
-        CheckboxList.prototype.cc = function (a, b) {
+        CheckboxList.prototype.cg = function (a, b) {
             var c = b.value.toLowerCase();
-            this.cj(c);
+            this.cn(c);
         };
         CheckboxList.prototype.j = function (a) {
             if (this.b == null) {
@@ -72045,55 +72133,61 @@
             }
             return new PrimaryKeyValue(b, c);
         };
-        CheckboxList.prototype.cw = function (a) {
-            this.ai = true;
+        CheckboxList.prototype.c0 = function (a) {
+            this.ak = true;
             var b = this.e.getItemAtIndex(a);
+            if (this.ad != null) {
+                this.ad.setPropertyValue(b, false);
+            }
             var c = this.j(b);
             this.g.remove(c);
-            this.ai = false;
+            this.ak = false;
         };
-        CheckboxList.prototype.b5 = function (a) {
-            this.ai = true;
+        CheckboxList.prototype.b8 = function (a) {
+            this.ak = true;
             var b = this.e.getItemAtIndex(a);
+            if (this.ad != null) {
+                this.ad.setPropertyValue(b, true);
+            }
             var c = this.j(b);
             this.g.add(c);
-            this.ai = false;
+            this.ak = false;
         };
-        CheckboxList.prototype.cy = function () {
+        CheckboxList.prototype.c2 = function () {
             this.l = 0;
             this.g.clear();
-            this.cd();
+            this.ch();
             this.m.ag();
         };
-        CheckboxList.prototype.b9 = function () {
+        CheckboxList.prototype.cc = function () {
             this.l = 1;
             this.g.clear();
-            this.cd();
+            this.ch();
             this.m.ag();
         };
-        CheckboxList.prototype.cg = function (a, b, c) {
+        CheckboxList.prototype.ck = function (a, b, c) {
             if (this.h != null) {
                 this.h.notifySetItem(a, b, c);
             }
         };
-        CheckboxList.prototype.cd = function () {
+        CheckboxList.prototype.ch = function () {
             if (this.h != null) {
                 this.h.notifyClearItems();
             }
         };
-        CheckboxList.prototype.ce = function (a, b) {
+        CheckboxList.prototype.ci = function (a, b) {
             if (this.h != null) {
                 this.h.notifyInsertItem(a, b);
             }
             ;
         };
-        CheckboxList.prototype.cf = function (a, b) {
+        CheckboxList.prototype.cj = function (a, b) {
             if (this.h != null) {
                 this.h.notifyRemoveItem(a, b);
             }
             ;
         };
-        CheckboxList.prototype.b6 = function (a) {
+        CheckboxList.prototype.b9 = function (a) {
             var b = null;
             if (this.b == null || this.b.length == 0) {
                 b = new PrimaryKeyValue(null, a);
@@ -72105,10 +72199,15 @@
                 throw new igniteuiWebcomponentsCore.ArgumentException(1, "value length must match PrimaryKey length");
             }
             if (b != null) {
+                if (this.ad != null) {
+                    var c = this.e.indexOfKey(a);
+                    var d = this.e.getItemAtIndex(c);
+                    this.ad.setPropertyValue(d, true);
+                }
                 this.g.add(b);
             }
         };
-        CheckboxList.prototype.cx = function (a) {
+        CheckboxList.prototype.c1 = function (a) {
             var b = null;
             if (this.b == null || this.b.length == 0) {
                 b = new PrimaryKeyValue(null, a);
@@ -72120,62 +72219,67 @@
                 throw new igniteuiWebcomponentsCore.ArgumentException(1, "value length must match PrimaryKey length");
             }
             if (this.g.contains(b)) {
+                if (this.ad != null) {
+                    var c = this.e.indexOfKey(a);
+                    var d = this.e.getItemAtIndex(c);
+                    this.ad.setPropertyValue(d, false);
+                }
                 this.g.remove(b);
             }
         };
-        Object.defineProperty(CheckboxList.prototype, "bx", {
+        Object.defineProperty(CheckboxList.prototype, "b0", {
             get: function () {
-                return this.bw != null ? this.bw : !igniteuiWebcomponentsCore.stringIsNullOrWhiteSpace(this.ah.b1("Select_All")) ? this.ah.b1("Select_All") : "(Select All)";
+                return this.bz != null ? this.bz : !igniteuiWebcomponentsCore.stringIsNullOrWhiteSpace(this.aj.b1("Select_All")) ? this.aj.b1("Select_All") : "(Select All)";
             },
             set: function (a) {
-                if (a == this.bw) {
+                if (a == this.bz) {
                     return;
                 }
-                var b = this.bw;
-                this.bw = a;
-                this.cn("SelectAllCaption", b, this.bw);
+                var b = this.bz;
+                this.bz = a;
+                this.cr("SelectAllCaption", b, this.bz);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "dw", {
+        Object.defineProperty(CheckboxList.prototype, "d3", {
             get: function () {
-                return this.df;
+                return this.dk;
             },
             set: function (a) {
-                var b = this.df;
-                this.df = a;
-                if (b != this.df) {
-                    this.cn("SelectAllCaptionTextColor", b, a);
+                var b = this.dk;
+                this.dk = a;
+                if (b != this.dk) {
+                    this.cr("SelectAllCaptionTextColor", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "dh", {
+        Object.defineProperty(CheckboxList.prototype, "dm", {
             get: function () {
-                return this.c3;
+                return this.c7;
             },
             set: function (a) {
-                var b = this.c3;
-                this.c3 = a;
-                if (b != this.c3) {
-                    this.cn("ActualSelectAllCaptionTextColor", b, a);
+                var b = this.c7;
+                this.c7 = a;
+                if (b != this.c7) {
+                    this.cr("ActualSelectAllCaptionTextColor", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "ao", {
+        Object.defineProperty(CheckboxList.prototype, "aq", {
             get: function () {
-                if (-1 == this.aw) {
+                if (-1 == this.ay) {
                     return false;
                 }
                 var a = this.g.count;
                 if (0 == a) {
                     return false;
                 }
-                if (a == this.aw) {
+                if (a == this.ay) {
                     return false;
                 }
                 return true;
@@ -72183,50 +72287,64 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "as", {
+        Object.defineProperty(CheckboxList.prototype, "au", {
             get: function () {
-                return this.ar;
+                return this.at;
             },
             set: function (a) {
-                if (a == this.ar) {
+                if (a == this.at) {
                     return;
                 }
-                var b = this.ar;
-                this.ar = a;
-                this.cn("showSelectAll", b, this.ar);
+                var b = this.at;
+                this.at = a;
+                this.cr("showSelectAll", b, this.at);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "di", {
+        Object.defineProperty(CheckboxList.prototype, "dn", {
             get: function () {
-                return this.c4;
+                return this.c8;
             },
             set: function (a) {
-                var b = this.c4;
-                this.c4 = a;
-                if (b != this.c4) {
-                    this.cn("BackgroundColor", b, a);
+                var b = this.c8;
+                this.c8 = a;
+                if (b != this.c8) {
+                    this.cr("BackgroundColor", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "dy", {
+        Object.defineProperty(CheckboxList.prototype, "dx", {
             get: function () {
-                return this.dg;
+                return this.de;
             },
             set: function (a) {
-                var b = this.dg;
-                this.dg = a;
-                if (b != this.dg) {
-                    this.cn("TextColor", b, a);
+                var b = this.de;
+                this.de = a;
+                if (b != this.de) {
+                    this.cr("RowHoverBackgroundColor", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        CheckboxList.prototype.cp = function (a) {
+        Object.defineProperty(CheckboxList.prototype, "d5", {
+            get: function () {
+                return this.dl;
+            },
+            set: function (a) {
+                var b = this.dl;
+                this.dl = a;
+                if (b != this.dl) {
+                    this.cr("TextColor", b, a);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CheckboxList.prototype.ct = function (a) {
             if (this.selectAllCheckboxChanged != null) {
                 this.selectAllCheckboxChanged(this, ((function () {
                     var $ret = new SelectAllCheckboxChangedEventArgs();
@@ -72235,77 +72353,78 @@
                 })()));
             }
         };
-        CheckboxList.prototype.al = function () {
-            if (-1 == this.aw) {
+        CheckboxList.prototype.an = function () {
+            if (-1 == this.ay) {
                 return true;
             }
             var a = this.g.count;
             switch (this.l) {
-                case 0: return this.aw == a;
+                case 0: return this.ay == a;
                 case 1: return 0 == a;
                 default: return false;
             }
         };
-        CheckboxList.prototype.ak = function () {
-            if (-1 == this.aw) {
+        CheckboxList.prototype.am = function () {
+            if (-1 == this.ay) {
                 return false;
             }
             var a = this.g.count;
             switch (this.l) {
                 case 0: return 0 == a;
-                case 1: return this.aw == a;
+                case 1: return this.ay == a;
                 default: return false;
             }
         };
-        CheckboxList.prototype.b7 = function () {
+        CheckboxList.prototype.ca = function () {
             var a = this.h.actualDataSource;
             if (null != a) {
                 if (null == a.actualSchema) {
-                    this.aw = -1;
+                    this.ay = -1;
                     return;
                 }
                 var b = a.actualCount;
-                this.aw = b;
+                this.ay = b;
             }
             else {
-                this.aw = -1;
+                this.ay = -1;
             }
         };
-        Object.defineProperty(CheckboxList.prototype, "aq", {
+        Object.defineProperty(CheckboxList.prototype, "as", {
             get: function () {
-                return this.ap;
+                return this.ar;
             },
             set: function (a) {
-                if (a == this.ap) {
+                if (a == this.ar) {
                     return;
                 }
-                var b = this.ap;
-                this.ap = a;
-                this.cn("ShowFilter", b, this.ap);
+                var b = this.ar;
+                this.ar = a;
+                this.cr("ShowFilter", b, this.ar);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxList.prototype, "an", {
+        Object.defineProperty(CheckboxList.prototype, "ap", {
             get: function () {
-                return this.am;
+                return this.ao;
             },
             set: function (a) {
-                if (a == this.am) {
+                if (a == this.ao) {
                     return;
                 }
-                var b = this.am;
-                this.am = a;
-                this.cn("IsRowHoverEnabled", b, this.am);
+                var b = this.ao;
+                this.ao = a;
+                this.cr("IsRowHoverEnabled", b, this.ao);
             },
             enumerable: false,
             configurable: true
         });
         CheckboxList.$t = igniteuiWebcomponentsCore.markType(CheckboxList, 'CheckboxList', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type]);
-        CheckboxList.dx = igniteuiWebcomponentsCore.BrushUtil.h(255, 24, 29, 31);
-        CheckboxList.bt = "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z";
-        CheckboxList.dp = igniteuiWebcomponentsCore.BrushUtil.h(255, 248, 248, 248);
-        CheckboxList.dq = igniteuiWebcomponentsCore.BrushUtil.h(255, 24, 29, 31);
+        CheckboxList.d4 = igniteuiWebcomponentsCore.BrushUtil.h(255, 24, 29, 31);
+        CheckboxList.bw = "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z";
+        CheckboxList.du = igniteuiWebcomponentsCore.BrushUtil.h(255, 248, 248, 248);
+        CheckboxList.dv = null;
+        CheckboxList.dw = igniteuiWebcomponentsCore.BrushUtil.h(255, 24, 29, 31);
         return CheckboxList;
     }(igniteuiWebcomponentsCore.Base));
 
@@ -72350,20 +72469,34 @@
         };
         Object.defineProperty(IgcCheckedChangedEventArgs.prototype, "index", {
             get: function () {
-                return this.i.b;
+                return this.i.c;
             },
             set: function (v) {
-                this.i.b = +v;
+                this.i.c = +v;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(IgcCheckedChangedEventArgs.prototype, "isChecked", {
+            get: function () {
+                return this.i.b;
+            },
+            set: function (v) {
+                this.i.b = igniteuiWebcomponentsCore.ensureBool(v);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgcCheckedChangedEventArgs.prototype, "primaryKey", {
             get: function () {
                 return this.i.a;
             },
             set: function (v) {
-                this.i.a = igniteuiWebcomponentsCore.ensureBool(v);
+                if (v && !Array.isArray(v) && typeof (v) == "string") {
+                    var re = /\s*(?:,|\s|$)\s*/gm;
+                    v = v.split(re);
+                }
+                this.i.a = v;
             },
             enumerable: false,
             configurable: true
@@ -72432,6 +72565,10 @@
             _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;
@@ -72688,10 +72825,10 @@
              * Gets or Sets the property name that contains the values.
             */
             get: function () {
-                return this.i.bc;
+                return this.i.be;
             },
             set: function (v) {
-                this.i.bc = v;
+                this.i.be = v;
             },
             enumerable: false,
             configurable: true
@@ -72701,10 +72838,10 @@
              * Gets or Sets the property name that contains the values.
             */
             get: function () {
-                return this.i.b0;
+                return this.i.b3;
             },
             set: function (v) {
-                this.i.b0 = v;
+                this.i.b3 = v;
             },
             enumerable: false,
             configurable: true
@@ -72714,10 +72851,10 @@
              * Gets or Sets the property name that contains the values.
             */
             get: function () {
-                return this.i.bg;
+                return this.i.bi;
             },
             set: function (v) {
-                this.i.bg = v;
+                this.i.bi = v;
             },
             enumerable: false,
             configurable: true
@@ -72727,11 +72864,11 @@
              * Gets or Sets the property name that contains the values.
             */
             get: function () {
-                return this.i.t;
+                return this.i.v;
             },
             set: function (v) {
-                this.i.t = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsInputs.InputGroupDisplayType_$type, v);
-                this._a("searchInputType", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsInputs.InputGroupDisplayType_$type, this.i.t));
+                this.i.v = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsInputs.InputGroupDisplayType_$type, v);
+                this._a("searchInputType", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsInputs.InputGroupDisplayType_$type, this.i.v));
             },
             enumerable: false,
             configurable: true
@@ -72741,18 +72878,18 @@
              * Gets or Sets the property name that contains the values.
             */
             get: function () {
-                return this.i.ax;
+                return this.i.az;
             },
             set: function (v) {
-                this.i.ax = +v;
-                this._a("rowHeight", this.i.ax);
+                this.i.az = +v;
+                this._a("rowHeight", this.i.az);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(IgcCheckboxListComponent.prototype, "actualRowHeight", {
             get: function () {
-                return this.i.av;
+                return this.i.ax;
             },
             enumerable: false,
             configurable: true
@@ -72762,16 +72899,16 @@
              * Gets or Sets the property name that contains the values.
             */
             get: function () {
-                if (this.i.ae == null) {
+                if (this.i.ag == null) {
                     return null;
                 }
-                return this.i.ae.fontString;
+                return this.i.ag.fontString;
             },
             set: function (v) {
                 var fi = new igniteuiWebcomponentsCore.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 : "");
             },
             enumerable: false,
             configurable: true
@@ -72795,11 +72932,11 @@
              * Gets or Sets the property name that contains the values.
             */
             get: function () {
-                return this.i.y;
+                return this.i.aa;
             },
             set: function (v) {
-                this.i.y = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.BaseControlTheme_$type, v);
-                this._a("baseTheme", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.i.y));
+                this.i.aa = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.BaseControlTheme_$type, v);
+                this._a("baseTheme", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.i.aa));
             },
             enumerable: false,
             configurable: true
@@ -72809,11 +72946,11 @@
              * Gets or Sets the property name that contains the values.
             */
             get: function () {
-                return this.i.aa;
+                return this.i.ac;
             },
             set: function (v) {
-                this.i.aa = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, v);
-                this._a("density", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, this.i.aa));
+                this.i.ac = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, v);
+                this._a("density", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, this.i.ac));
             },
             enumerable: false,
             configurable: true
@@ -72823,11 +72960,11 @@
              * Gets or sets the search icon color.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.du);
+                return igniteuiWebcomponentsCore.brushToString(this.i.d1);
             },
             set: function (v) {
-                this.i.du = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("searchIconColor", igniteuiWebcomponentsCore.brushToString(this.i.du));
+                this.i.d1 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("searchIconColor", igniteuiWebcomponentsCore.brushToString(this.i.d1));
             },
             enumerable: false,
             configurable: true
@@ -72837,11 +72974,11 @@
              * Gets or sets the search background color.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.ds);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dz);
             },
             set: function (v) {
-                this.i.ds = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("searchBackgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.ds));
+                this.i.dz = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("searchBackgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.dz));
             },
             enumerable: false,
             configurable: true
@@ -72851,11 +72988,11 @@
              * Gets or sets the search text color.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dv);
+                return igniteuiWebcomponentsCore.brushToString(this.i.d2);
             },
             set: function (v) {
-                this.i.dv = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("searchTextColor", igniteuiWebcomponentsCore.brushToString(this.i.dv));
+                this.i.d2 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("searchTextColor", igniteuiWebcomponentsCore.brushToString(this.i.d2));
             },
             enumerable: false,
             configurable: true
@@ -72865,11 +73002,11 @@
              * Gets or sets the search border color.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dt);
+                return igniteuiWebcomponentsCore.brushToString(this.i.d0);
             },
             set: function (v) {
-                this.i.dt = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("searchBorderColor", igniteuiWebcomponentsCore.brushToString(this.i.dt));
+                this.i.d0 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("searchBorderColor", igniteuiWebcomponentsCore.brushToString(this.i.d0));
             },
             enumerable: false,
             configurable: true
@@ -72879,16 +73016,16 @@
              * Gets or sets the text style.
             */
             get: function () {
-                if (this.i.af == null) {
+                if (this.i.ah == null) {
                     return null;
                 }
-                return this.i.af.fontString;
+                return this.i.ah.fontString;
             },
             set: function (v) {
                 var fi = new igniteuiWebcomponentsCore.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 : "");
             },
             enumerable: false,
             configurable: true
@@ -72898,11 +73035,11 @@
              * Gets or sets the checkbox tick color.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dl);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dr);
             },
             set: function (v) {
-                this.i.dl = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("checkboxTickColor", igniteuiWebcomponentsCore.brushToString(this.i.dl));
+                this.i.dr = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("checkboxTickColor", igniteuiWebcomponentsCore.brushToString(this.i.dr));
             },
             enumerable: false,
             configurable: true
@@ -72912,11 +73049,11 @@
              * Gets or sets the checkbox background color when checked.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dj);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dp);
             },
             set: function (v) {
-                this.i.dj = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("checkboxCheckedBackgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.dj));
+                this.i.dp = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("checkboxCheckedBackgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.dp));
             },
             enumerable: false,
             configurable: true
@@ -72926,11 +73063,11 @@
              * Gets or sets the checkbox background color when unchecked.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dm);
+                return igniteuiWebcomponentsCore.brushToString(this.i.ds);
             },
             set: function (v) {
-                this.i.dm = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("checkboxUncheckedBackgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.dm));
+                this.i.ds = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("checkboxUncheckedBackgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.ds));
             },
             enumerable: false,
             configurable: true
@@ -72940,11 +73077,11 @@
              * Gets or sets the checkbox border color when checked.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dk);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dq);
             },
             set: function (v) {
-                this.i.dk = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("checkboxCheckedBorderColor", igniteuiWebcomponentsCore.brushToString(this.i.dk));
+                this.i.dq = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("checkboxCheckedBorderColor", igniteuiWebcomponentsCore.brushToString(this.i.dq));
             },
             enumerable: false,
             configurable: true
@@ -72954,11 +73091,11 @@
              * Gets or sets the checkbox border color when unchecked.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dn);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dt);
             },
             set: function (v) {
-                this.i.dn = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("checkboxUncheckedBorderColor", igniteuiWebcomponentsCore.brushToString(this.i.dn));
+                this.i.dt = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("checkboxUncheckedBorderColor", igniteuiWebcomponentsCore.brushToString(this.i.dt));
             },
             enumerable: false,
             configurable: true
@@ -72968,11 +73105,11 @@
              * Gets or sets the style of scrollbar.
             */
             get: function () {
-                return this.i.w;
+                return this.i.y;
             },
             set: function (v) {
-                this.i.w = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.ScrollbarStyle_$type, v);
-                this._a("scrollbarStyle", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.ScrollbarStyle_$type, this.i.w));
+                this.i.y = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.ScrollbarStyle_$type, v);
+                this._a("scrollbarStyle", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.ScrollbarStyle_$type, this.i.y));
             },
             enumerable: false,
             configurable: true
@@ -72982,11 +73119,11 @@
              * Gets or sets the scrollbar background color.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dr);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dy);
             },
             set: function (v) {
-                this.i.dr = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("scrollbarBackground", igniteuiWebcomponentsCore.brushToString(this.i.dr));
+                this.i.dy = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("scrollbarBackground", igniteuiWebcomponentsCore.brushToString(this.i.dy));
             },
             enumerable: false,
             configurable: true
@@ -72996,10 +73133,10 @@
              * Gets / sets the caption of the "Select All" checkbox.
             */
             get: function () {
-                return this.i.bx;
+                return this.i.b0;
             },
             set: function (v) {
-                this.i.bx = v;
+                this.i.b0 = v;
             },
             enumerable: false,
             configurable: true
@@ -73009,11 +73146,11 @@
              * Gets or sets the color to use for the "Select All" label.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dw);
+                return igniteuiWebcomponentsCore.brushToString(this.i.d3);
             },
             set: function (v) {
-                this.i.dw = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("selectAllCaptionTextColor", igniteuiWebcomponentsCore.brushToString(this.i.dw));
+                this.i.d3 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("selectAllCaptionTextColor", igniteuiWebcomponentsCore.brushToString(this.i.d3));
             },
             enumerable: false,
             configurable: true
@@ -73023,11 +73160,11 @@
              * Gets or sets the color to use for the actual header selectAllCaption text.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dh);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dm);
             },
             set: function (v) {
-                this.i.dh = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("actualSelectAllCaptionTextColor", igniteuiWebcomponentsCore.brushToString(this.i.dh));
+                this.i.dm = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualSelectAllCaptionTextColor", igniteuiWebcomponentsCore.brushToString(this.i.dm));
             },
             enumerable: false,
             configurable: true
@@ -73037,11 +73174,11 @@
              * Gets / sets whether the "Select all" checkbox is visible.
             */
             get: function () {
-                return this.i.as;
+                return this.i.au;
             },
             set: function (v) {
-                this.i.as = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("showSelectAll", this.i.as);
+                this.i.au = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("showSelectAll", this.i.au);
             },
             enumerable: false,
             configurable: true
@@ -73051,11 +73188,25 @@
              * Gets or sets the color to use for the background of the component.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.di);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dn);
+            },
+            set: function (v) {
+                this.i.dn = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("backgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.dn));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgcCheckboxListComponent.prototype, "rowHoverBackgroundColor", {
+            /**
+             * Gets or sets the color to use when hovering over a grid row.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.dx);
             },
             set: function (v) {
-                this.i.di = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("backgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.di));
+                this.i.dx = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("rowHoverBackgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.dx));
             },
             enumerable: false,
             configurable: true
@@ -73065,11 +73216,11 @@
              * Gets or sets the color to use for the text of the component.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dy);
+                return igniteuiWebcomponentsCore.brushToString(this.i.d5);
             },
             set: function (v) {
-                this.i.dy = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.dy));
+                this.i.d5 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.d5));
             },
             enumerable: false,
             configurable: true
@@ -73079,11 +73230,11 @@
              * Gets or sets whether the filter input is visible.
             */
             get: function () {
-                return this.i.aq;
+                return this.i.as;
             },
             set: function (v) {
-                this.i.aq = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("showFilter", this.i.aq);
+                this.i.as = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("showFilter", this.i.as);
             },
             enumerable: false,
             configurable: true
@@ -73093,11 +73244,11 @@
              * Gets or sets whether row hover highlighting is enabled.
             */
             get: function () {
-                return this.i.an;
+                return this.i.ap;
             },
             set: function (v) {
-                this.i.an = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("isRowHoverEnabled", this.i.an);
+                this.i.ap = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("isRowHoverEnabled", this.i.ap);
             },
             enumerable: false,
             configurable: true
@@ -73175,17 +73326,17 @@
 
     */
         IgcCheckboxListComponent.prototype.selectAll = function () {
-            this.i.cy();
+            this.i.c2();
         };
         /**
          * Deselects all the items in the checkbox list.
         
         */
         IgcCheckboxListComponent.prototype.deselectAll = function () {
-            this.i.b9();
+            this.i.cc();
         };
         IgcCheckboxListComponent.prototype.notifySetItem = function (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.
@@ -73193,26 +73344,26 @@
         
         */
         IgcCheckboxListComponent.prototype.notifyClearItems = function () {
-            this.i.cd();
+            this.i.ch();
         };
         IgcCheckboxListComponent.prototype.notifyInsertItem = function (index, newItem) {
-            this.i.ce(index, newItem);
+            this.i.ci(index, newItem);
         };
         IgcCheckboxListComponent.prototype.notifyRemoveItem = function (index, oldItem) {
-            this.i.cf(index, oldItem);
+            this.i.cj(index, oldItem);
         };
         IgcCheckboxListComponent.prototype.addKeyValue = function (value) {
-            this.i.b6(value);
+            this.i.b9(value);
         };
         IgcCheckboxListComponent.prototype.removeKeyValue = function (value) {
-            this.i.cx(value);
+            this.i.c1(value);
         };
         /**
          * Returns true if no items are selected / checked; otherwise false.
         
         */
         IgcCheckboxListComponent.prototype.isNothingSelected = function () {
-            var iv = this.i.al();
+            var iv = this.i.an();
             return (iv);
         };
         /**
@@ -73220,9 +73371,71 @@
         
         */
         IgcCheckboxListComponent.prototype.isEverythingSelected = function () {
-            var iv = this.i.ak();
+            var iv = this.i.am();
             return (iv);
         };
+        Object.defineProperty(IgcCheckboxListComponent.prototype, "selectedKeyAdded", {
+            /**
+             * Called when an item is added.
+            */
+            get: function () {
+                return this._selectedKeyAdded;
+            },
+            set: function (ev) {
+                var _this = this;
+                if (this._selectedKeyAdded_wrapped !== null) {
+                    this.i.selectedKeyAdded = igniteuiWebcomponentsCore.delegateRemove(this.i.selectedKeyAdded, this._selectedKeyAdded_wrapped);
+                    this._selectedKeyAdded_wrapped = null;
+                    this._selectedKeyAdded = null;
+                }
+                this._selectedKeyAdded = ev;
+                this._selectedKeyAdded_wrapped = function (o, e) {
+                    var outerArgs = new IgcCheckedChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (_this.beforeSelectedKeyAdded) {
+                        _this.beforeSelectedKeyAdded(_this, outerArgs);
+                    }
+                    if (_this._selectedKeyAdded) {
+                        _this._selectedKeyAdded(_this, outerArgs);
+                    }
+                };
+                this.i.selectedKeyAdded = igniteuiWebcomponentsCore.delegateCombine(this.i.selectedKeyAdded, this._selectedKeyAdded_wrapped);
+                ;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgcCheckboxListComponent.prototype, "selectedKeyRemoved", {
+            /**
+             * Called when an item is removed.
+            */
+            get: function () {
+                return this._selectedKeyRemoved;
+            },
+            set: function (ev) {
+                var _this = this;
+                if (this._selectedKeyRemoved_wrapped !== null) {
+                    this.i.selectedKeyRemoved = igniteuiWebcomponentsCore.delegateRemove(this.i.selectedKeyRemoved, this._selectedKeyRemoved_wrapped);
+                    this._selectedKeyRemoved_wrapped = null;
+                    this._selectedKeyRemoved = null;
+                }
+                this._selectedKeyRemoved = ev;
+                this._selectedKeyRemoved_wrapped = function (o, e) {
+                    var outerArgs = new IgcCheckedChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (_this.beforeSelectedKeyRemoved) {
+                        _this.beforeSelectedKeyRemoved(_this, outerArgs);
+                    }
+                    if (_this._selectedKeyRemoved) {
+                        _this._selectedKeyRemoved(_this, outerArgs);
+                    }
+                };
+                this.i.selectedKeyRemoved = igniteuiWebcomponentsCore.delegateCombine(this.i.selectedKeyRemoved, this._selectedKeyRemoved_wrapped);
+                ;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgcCheckboxListComponent.prototype, "checkedChanged", {
             /**
              * Called when a checkbox is checked or unchecked.
@@ -73291,6 +73504,243 @@
         return IgcCheckboxListComponent;
     }(igniteuiWebcomponentsCore.IgcHTMLElement));
 
+    /*
+    THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
+    https://www.infragistics.com/legal/license/igultimate-la
+    https://www.infragistics.com/legal/license/igultimate-eula
+    GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE:  you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
+    */
+    /**
+     * @hidden
+     */
+    var CheckboxListBridge = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib.__extends(CheckboxListBridge, _super);
+        function CheckboxListBridge(a) {
+            var _this = _super.call(this, a) || this;
+            _this.x = null;
+            _this.y = null;
+            _this.z = null;
+            _this.u = null;
+            _this.v = null;
+            _this.w = null;
+            return _this;
+        }
+        CheckboxListBridge.prototype.getDesiredSize = function (a, b) {
+            return this.t.view.getDesiredSize();
+        };
+        CheckboxListBridge.prototype.addHandler = function (a, b, c, d) {
+            var e = a;
+            switch (c) {
+                case 2:
+                    e.checkedChanged = igniteuiWebcomponentsCore.delegateCombine(e.checkedChanged, igniteuiWebcomponentsCore.runOn(this, this.aa));
+                    this.u = d;
+                    this.x = b;
+                    break;
+                case 18:
+                    e.selectedKeyAdded = igniteuiWebcomponentsCore.delegateCombine(e.selectedKeyAdded, igniteuiWebcomponentsCore.runOn(this, this.ab));
+                    this.v = d;
+                    this.y = b;
+                    break;
+                case 19:
+                    e.selectedKeyRemoved = igniteuiWebcomponentsCore.delegateCombine(e.selectedKeyRemoved, igniteuiWebcomponentsCore.runOn(this, this.ac));
+                    this.w = d;
+                    this.z = b;
+                    break;
+            }
+        };
+        CheckboxListBridge.prototype.removeHandler = function (a, b, c, d) {
+            var e = a;
+            switch (c) {
+                case 2:
+                    e.checkedChanged = igniteuiWebcomponentsCore.delegateRemove(e.checkedChanged, igniteuiWebcomponentsCore.runOn(this, this.aa));
+                    this.u = null;
+                    this.x = null;
+                    break;
+                case 18:
+                    e.selectedKeyAdded = igniteuiWebcomponentsCore.delegateRemove(e.selectedKeyAdded, igniteuiWebcomponentsCore.runOn(this, this.ab));
+                    this.v = null;
+                    this.y = null;
+                    break;
+                case 19:
+                    e.selectedKeyRemoved = igniteuiWebcomponentsCore.delegateRemove(e.selectedKeyRemoved, igniteuiWebcomponentsCore.runOn(this, this.ac));
+                    this.w = null;
+                    this.z = null;
+                    break;
+            }
+        };
+        CheckboxListBridge.prototype.aa = function (a, b) {
+            var c = a;
+            if (this.u != null) {
+                this.u(this.x, ((function () {
+                    var $ret = new igniteuiWebcomponentsCore.NativeUICheckboxListChangeEventArgs();
+                    $ret.c = b.c;
+                    $ret.b = b.b;
+                    $ret.a = b.a;
+                    return $ret;
+                })()));
+            }
+        };
+        CheckboxListBridge.prototype.ab = function (a, b) {
+            var c = a;
+            if (this.v != null) {
+                this.v(this.y, ((function () {
+                    var $ret = new igniteuiWebcomponentsCore.NativeUICheckboxListChangeEventArgs();
+                    $ret.c = b.c;
+                    $ret.b = b.b;
+                    $ret.a = b.a;
+                    return $ret;
+                })()));
+            }
+        };
+        CheckboxListBridge.prototype.ac = function (a, b) {
+            var c = a;
+            if (this.w != null) {
+                this.w(this.z, ((function () {
+                    var $ret = new igniteuiWebcomponentsCore.NativeUICheckboxListChangeEventArgs();
+                    $ret.c = b.c;
+                    $ret.b = b.b;
+                    $ret.a = b.a;
+                    return $ret;
+                })()));
+            }
+        };
+        CheckboxListBridge.prototype.setValue = function (a, b, c) {
+            var d = a;
+            switch (b) {
+                case 23:
+                    d.backgroundColor = c;
+                    break;
+                case 8:
+                    d.itemsSource = c;
+                    break;
+                case 74:
+                    d.selectedMemberPath = c;
+                    break;
+                case 75:
+                    d.dataMemberPath = c;
+                    break;
+                case 76:
+                    d.showSelectAll = c;
+                    break;
+                case 77:
+                    d.primaryKey = c;
+                    break;
+                case 1:
+                    d.density = igniteuiWebcomponentsCore.EnumUtil.getEnumValue(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, c);
+                    break;
+                case 18:
+                    d.baseTheme = igniteuiWebcomponentsCore.EnumUtil.getEnumValue(igniteuiWebcomponentsCore.BaseControlTheme_$type, c);
+                    break;
+                case 33:
+                    d.textColor = c;
+                    break;
+                case 24:
+                    d.rowHoverBackgroundColor = c;
+                    break;
+                case 78:
+                    d.searchIconColor = c;
+                    break;
+                case 79:
+                    d.searchTextColor = c;
+                    break;
+            }
+        };
+        CheckboxListBridge.prototype.getValue = function (a, b) {
+            var c = a;
+            switch (b) {
+                case 23: return c.backgroundColor;
+                case 8: return c.itemsSource;
+                case 74: return c.selectedMemberPath;
+                case 75: return c.dataMemberPath;
+                case 76: return c.showSelectAll;
+                case 77: return c.primaryKey;
+                case 1: return igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, c.density);
+                case 18: return igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, c.baseTheme);
+                case 33: return c.textColor;
+                case 24: return c.rowHoverBackgroundColor;
+                case 78: return c.searchIconColor;
+                case 79: return c.searchTextColor;
+            }
+            return null;
+        };
+        CheckboxListBridge.prototype.ae = function (a) {
+        };
+        CheckboxListBridge.prototype.ad = function (a, b) {
+        };
+        CheckboxListBridge.$t = igniteuiWebcomponentsCore.markType(CheckboxListBridge, 'CheckboxListBridge', igniteuiWebcomponentsInputs.XComponentBridge.$);
+        return CheckboxListBridge;
+    }(igniteuiWebcomponentsInputs.XComponentBridge));
+
+    /*
+    THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
+    https://www.infragistics.com/legal/license/igultimate-la
+    https://www.infragistics.com/legal/license/igultimate-eula
+    GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE:  you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
+    */
+    /**
+     * @hidden
+     */
+    var NativeUIGridFactory = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib.__extends(NativeUIGridFactory, _super);
+        function NativeUIGridFactory() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.c = 2;
+            return _this;
+        }
+        Object.defineProperty(NativeUIGridFactory, "instance", {
+            get: function () {
+                if (NativeUIGridFactory.a == null) {
+                    NativeUIGridFactory.a = new NativeUIGridFactory();
+                }
+                return NativeUIGridFactory.a;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        NativeUIGridFactory.register = function () {
+            igniteuiWebcomponentsCore.NativeUIComponent.ar(NativeUIGridFactory.instance);
+        };
+        Object.defineProperty(NativeUIGridFactory.prototype, "flavor", {
+            get: function () {
+                return this.c;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        NativeUIGridFactory.prototype.createComponent = function (a, b, c) {
+            switch (b) {
+                case 16:
+                    this.d(a, c);
+                    break;
+            }
+        };
+        NativeUIGridFactory.prototype.createComponentSync = function (a, b, c) {
+            this.createComponent(a, b, c);
+        };
+        NativeUIGridFactory.prototype.supportsComponent = function (a) {
+            switch (a) {
+                case 16: return true;
+            }
+            return false;
+        };
+        NativeUIGridFactory.prototype.d = function (a, b) {
+            var c = a;
+            var d = c.createElement("div");
+            c.getPortal(d, "CheckboxList", function (e) {
+                var comp_ = e.componentRef;
+                var f = (comp_.i);
+                var g = new CheckboxListBridge(f);
+                var h = new igniteuiWebcomponentsCore.NativeUICheckboxList();
+                h.an = d.getChildAt(0);
+                h.d = g;
+                b(h);
+            }, false);
+        };
+        NativeUIGridFactory.$t = igniteuiWebcomponentsCore.markType(NativeUIGridFactory, 'NativeUIGridFactory', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INativeUIElementFactory_$type]);
+        NativeUIGridFactory.a = null;
+        return NativeUIGridFactory;
+    }(igniteuiWebcomponentsCore.Base));
+
     /*
     THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
     https://www.infragistics.com/legal/license/igultimate-la
@@ -73311,6 +73761,8 @@
             IgcCheckboxListComponent.register();
             igniteuiWebcomponentsCore.TypeRegistrar.registerCons('IgcCheckboxListComponent', IgcCheckboxListComponent);
             igniteuiWebcomponentsCore.TypeRegistrar.registerCons('IgcCheckboxListComponent', IgcCheckboxListComponent);
+            igniteuiWebcomponentsCore.TypeRegistrar.register('NativeUIGridFactory', NativeUIGridFactory.$type);
+            NativeUIGridFactory.register();
             igniteuiWebcomponentsCore.TypeRegistrar.register('CheckboxList', CheckboxList.$type);
         };
         return IgcCheckboxListModule;
@@ -73635,7 +74087,7 @@
                     break;
                 case "FilterPlaceholderText":
                     if (this.d != null) {
-                        this.d.bg = this.s;
+                        this.d.bi = this.s;
                     }
                     break;
                 case "BaseTheme":
@@ -73646,7 +74098,7 @@
                     break;
                 case "BackgroundColor":
                     if (this.d != null) {
-                        this.d.di = this.aq;
+                        this.d.dn = this.aq;
                     }
                     this.c.i();
                     break;
@@ -73654,12 +74106,12 @@
         };
         ColumnChooser.prototype.ak = function () {
             if (this.d != null) {
-                this.d.y = this.f;
+                this.d.aa = this.f;
             }
         };
         ColumnChooser.prototype.aj = function () {
             if (this.d != null) {
-                this.d.aa = this.h;
+                this.d.ac = this.h;
             }
         };
         ColumnChooser.prototype.am = function (a, b) {
@@ -73674,9 +74126,9 @@
         ColumnChooser.prototype.aa = function () {
             var e_1, _a;
             if (this.a != null && this.d != null) {
-                this.d.y = this.f;
-                this.d.aa = this.h;
-                this.d.di = this.aq;
+                this.d.aa = this.f;
+                this.d.ac = this.h;
+                this.d.dn = this.aq;
                 var a = void 0;
                 var b = new igniteuiWebcomponentsCore.ObservableCollection$1(ColumnChooserInfo.$, 0);
                 try {
@@ -73706,16 +74158,16 @@
                     }
                 }
                 if (this.s != null) {
-                    this.d.bg = this.s;
+                    this.d.bi = this.s;
                 }
                 this.d.itemsSource = b;
                 var e = "";
                 var f = "";
                 e = "columnName";
                 f = "isNotHidden";
-                this.d.b0 = f;
-                this.d.bc = e;
-                this.d.as = true;
+                this.d.b3 = f;
+                this.d.be = e;
+                this.d.au = true;
             }
         };
         ColumnChooser.prototype.an = function (a) {
@@ -73725,7 +74177,7 @@
         };
         ColumnChooser.prototype.al = function () {
             var e_2, _a;
-            this.d.cy();
+            this.d.c2();
             if (this.a != null) {
                 try {
                     for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.a.actualColumns)), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -73751,7 +74203,7 @@
         };
         ColumnChooser.prototype.ae = function () {
             var e_3, _a;
-            this.d.b9();
+            this.d.cc();
             if (this.a != null) {
                 try {
                     for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.a.actualColumns)), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -73786,11 +74238,11 @@
         };
         ColumnChooser.prototype.ac = function (a, b) {
             this.m = true;
-            var c = this.d.h.actualDataSource.getItemAtIndex(b.b);
+            var c = this.d.h.actualDataSource.getItemAtIndex(b.c);
             var d = this.a.actualColumns.count;
             for (var e = 0; e < d; e++) {
                 if (this.a.actualColumns._inner[e].i8 == c.columnName || this.a.actualColumns._inner[e].jz == c.columnName || this.a.actualColumns._inner[e].jf == c.columnName) {
-                    this.a.actualColumns._inner[e].g7 = !b.a;
+                    this.a.actualColumns._inner[e].g7 = !b.b;
                     this.a.actualColumns._inner[e].ki("Hidden");
                 }
             }
@@ -74980,7 +75432,7 @@
                     break;
                 case "FilterPlaceholderText":
                     if (this.d != null) {
-                        this.d.bg = this.s;
+                        this.d.bi = this.s;
                     }
                     break;
                 case "BaseTheme":
@@ -74991,7 +75443,7 @@
                     break;
                 case "BackgroundColor":
                     if (this.d != null) {
-                        this.d.di = this.an;
+                        this.d.dn = this.an;
                     }
                     this.c.g();
                     break;
@@ -74999,12 +75451,12 @@
         };
         ColumnPinning.prototype.ai = function () {
             if (this.d != null) {
-                this.d.y = this.f;
+                this.d.aa = this.f;
             }
         };
         ColumnPinning.prototype.ah = function () {
             if (this.d != null) {
-                this.d.aa = this.h;
+                this.d.ac = this.h;
             }
         };
         ColumnPinning.prototype.aj = function (a, b) {
@@ -75019,9 +75471,9 @@
         ColumnPinning.prototype.aa = function () {
             var e_1, _a;
             if (this.a != null && this.d != null) {
-                this.d.y = this.f;
-                this.d.aa = this.h;
-                this.d.di = this.an;
+                this.d.aa = this.f;
+                this.d.ac = this.h;
+                this.d.dn = this.an;
                 var a = void 0;
                 var b = new igniteuiWebcomponentsCore.ObservableCollection$1(ColumnPinningInfo.$, 0);
                 try {
@@ -75055,22 +75507,22 @@
                             throw e_1.error;
                     }
                 }
-                this.d.as = false;
+                this.d.au = false;
                 if (this.s != null) {
-                    this.d.bg = this.s;
+                    this.d.bi = this.s;
                 }
                 this.d.itemsSource = b;
                 var e = "";
                 var f = "";
                 e = "columnName";
                 f = "isPinned";
-                this.d.b0 = f;
-                this.d.bc = e;
+                this.d.b3 = f;
+                this.d.be = e;
             }
         };
         ColumnPinning.prototype.ae = function (a, b) {
             this.m = true;
-            var c = this.d.h.actualDataSource.getItemAtIndex(b.b);
+            var c = this.d.h.actualDataSource.getItemAtIndex(b.c);
             var d = this.a.actualColumns.count;
             for (var e = 0; e < d; e++) {
                 if (this.a.actualColumns._inner[e].i8 == c.columnName || this.a.actualColumns._inner[e].jz == c.columnName || this.a.actualColumns._inner[e].jf == c.columnName) {
@@ -79865,7 +80317,7 @@
             configurable: true
         });
         GridColumnFilterOptions.prototype.cu = function () {
-            var a = this.bx.al();
+            var a = this.bx.an();
             this.bw.al(!a);
             var b = this.b3();
             this.bw.am(b);
@@ -80000,7 +80452,7 @@
                     }
                 }
                 this.bx.itemsSource = e;
-                this.bx.bc = c;
+                this.bx.be = c;
                 this.bx.b = [c];
                 e.shouldEmitSectionHeaders = true;
                 e.isSectionHeaderNormalRow = true;
@@ -80046,15 +80498,15 @@
                 }
             }
             if (e.count == 0 || !c) {
-                this.bx.cy();
+                this.bx.c2();
                 return;
             }
             switch (d.value) {
                 case 0:
-                    this.bx.b9();
+                    this.bx.cc();
                     break;
                 case 1:
-                    this.bx.cy();
+                    this.bx.c2();
                     break;
             }
             var h = this.bx.g;
@@ -80111,11 +80563,11 @@
         };
         GridColumnFilterOptions.prototype.cw = function () {
             if (null != this.bx) {
-                this.bx.aa = this.b0;
-                this.bx.bg = this.cc;
-                this.bx.di = this.bo;
-                this.bx.dy = this.br;
-                this.bx.y = this.i;
+                this.bx.ac = this.b0;
+                this.bx.bi = this.cc;
+                this.bx.dn = this.bo;
+                this.bx.d5 = this.br;
+                this.bx.aa = this.i;
                 this.bx.updateHrMargin(new igniteuiWebcomponentsCore.Thickness(1, -7, 3, -7, 3));
             }
         };
@@ -80468,8 +80920,8 @@
             this.e();
         };
         SummaryChooserView.prototype.e = function () {
-            if (this.model.f.av > -1) {
-                var a = this.model.r.count * this.model.f.av;
+            if (this.model.f.ax > -1) {
+                var a = this.model.r.count * this.model.f.ax;
                 a += 4;
                 this.d.setStyleProperty("height", a + "px");
             }
@@ -80758,30 +81210,30 @@
             this.a6();
         };
         SummaryChooser.prototype.az = function (a, b) {
-            var c = this.q._inner[b.b];
-            c.isSelected = b.a;
+            var c = this.q._inner[b.c];
+            c.isSelected = b.b;
             if (this.summaryChanged != null) {
                 this.summaryChanged(this, ((function () {
                     var $ret = new SummaryChangedEventArgs();
                     $ret.b = c.iD;
-                    $ret.a = b.a;
+                    $ret.a = b.b;
                     return $ret;
                 })()));
             }
         };
         SummaryChooser.prototype.a6 = function () {
             if (this.e != null) {
-                this.e.aa = this.m;
-                this.e.dy = this.ba;
-                this.e.y = this.i;
-                this.e.di = this.a9;
+                this.e.ac = this.m;
+                this.e.d5 = this.ba;
+                this.e.aa = this.i;
+                this.e.dn = this.a9;
+                this.e.au = false;
                 this.e.as = false;
-                this.e.aq = false;
-                this.e.an = false;
+                this.e.ap = false;
                 this.e.updateHrMargin(new igniteuiWebcomponentsCore.Thickness(1, -7, 3, -7, 3));
                 this.e.itemsSource = this.q;
-                this.e.bc = "label";
-                this.e.b0 = "isSelected";
+                this.e.be = "label";
+                this.e.b3 = "isSelected";
                 this.e.b = ["label"];
             }
         };
@@ -80831,7 +81283,7 @@
                 if (d.iD == a) {
                     d.isSelected = b;
                     if (this.e != null) {
-                        this.e.cg(c, d, d);
+                        this.e.ck(c, d, d);
                     }
                     break;
                 }
@@ -80843,7 +81295,7 @@
             c.label = b;
             this.q.add(c);
             if (this.e != null) {
-                this.e.ce(this.q.count - 1, c);
+                this.e.ci(this.q.count - 1, c);
             }
             this.c.onItemInserted();
         };
@@ -80853,7 +81305,7 @@
                 if (c.iD == a) {
                     this.q.removeAt(b);
                     if (this.e != null) {
-                        this.e.cf(b, c);
+                        this.e.cj(b, c);
                     }
                     break;
                 }
@@ -80866,7 +81318,7 @@
                 if (d.iD == a) {
                     d.label = b;
                     if (this.e != null) {
-                        this.e.cg(c, d, d);
+                        this.e.ck(c, d, d);
                     }
                     break;
                 }
@@ -91731,6 +92183,28 @@
      */
     var ComboEditorView_ComboExternal_$type = /*@__PURE__*/ new igniteuiWebcomponentsCore.Type(null, 'ComboEditorView_ComboExternal');
 
+    /*
+    THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
+    https://www.infragistics.com/legal/license/igultimate-la
+    https://www.infragistics.com/legal/license/igultimate-eula
+    GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE:  you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
+    */
+    /**
+     * @hidden
+     */
+    var CheckboxListExternal_$type = /*@__PURE__*/ new igniteuiWebcomponentsCore.Type(null, 'CheckboxListExternal');
+
+    /*
+    THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
+    https://www.infragistics.com/legal/license/igultimate-la
+    https://www.infragistics.com/legal/license/igultimate-eula
+    GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE:  you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
+    */
+    /**
+     * @hidden
+     */
+    var CheckboxListViewExternal_$type = /*@__PURE__*/ new igniteuiWebcomponentsCore.Type(null, 'CheckboxListViewExternal');
+
     /*
     THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
     https://www.infragistics.com/legal/license/igultimate-la
@@ -99084,9 +99558,12 @@
     exports.CellSelectionAnimationMode_$type = CellSelectionAnimationMode_$type;
     exports.CellStyleRequestedEventArgs = CellStyleRequestedEventArgs;
     exports.CheckboxList = CheckboxList;
+    exports.CheckboxListBridge = CheckboxListBridge;
+    exports.CheckboxListExternal_$type = CheckboxListExternal_$type;
     exports.CheckboxListIndexType = CheckboxListIndexType;
     exports.CheckboxListIndexType_$type = CheckboxListIndexType_$type;
     exports.CheckboxListView = CheckboxListView;
+    exports.CheckboxListViewExternal_$type = CheckboxListViewExternal_$type;
     exports.CheckedChangedEventArgs = CheckedChangedEventArgs;
     exports.CloneDataSourceFilterOperation = CloneDataSourceFilterOperation;
     exports.CloneDataSourceFilterOperation_$type = CloneDataSourceFilterOperation_$type;
@@ -99604,6 +100081,7 @@
     exports.MultiColumnComboBoxView = MultiColumnComboBoxView;
     exports.MultiColumnComboVisualModelExport = MultiColumnComboVisualModelExport;
     exports.MultipleDataSourceNotifier = MultipleDataSourceNotifier;
+    exports.NativeUIGridFactory = NativeUIGridFactory;
     exports.NumericCell = NumericCell;
     exports.NumericCellFormatter = NumericCellFormatter;
     exports.NumericCellModel = NumericCellModel;