igniteui-angular-data-grids 20.0.1-beta.0 → 20.0.2-beta.0

package/esm2015/lib/GridCellBase.js

@@ -6,14 +6,19 @@ GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOA
 */
 import { Base, runOn, markType, PointUtil } from "igniteui-angular-core";
 import { INativeCell_$type } from "./INativeCell";
+import { Rect } from "igniteui-angular-core";
+import { XIcon } from "igniteui-angular-inputs";
+import { SvgIconRegistry } from "igniteui-angular-core";
 import { GridExpansionIndicator } from "./GridExpansionIndicator";
 import { PlaceholderView } from "./PlaceholderView";
 import { Color } from "igniteui-angular-core";
+import { FontUtil } from "igniteui-angular-core";
 import { TestRandomness } from "igniteui-angular-core";
 import { Random } from "igniteui-angular-core";
 import { DefaultRandomnessSource } from "igniteui-angular-core";
 import { DeviceUtils } from "igniteui-angular-core";
 import { intDivide, truncate, isNaN_ } from "igniteui-angular-core";
+import { stringStartsWith } from "igniteui-angular-core";
 /**
  * @hidden
  */
@@ -24,69 +29,83 @@ export let GridCellBase = /*@__PURE__*/ (() => {
             this.a = null;
             this.e = null;
             this.c = null;
-            this.ad = null;
-            this.af = null;
-            this.s = false;
-            this.ag = null;
-            this.i = null;
-            this.as = 0;
-            this.ap = 24;
-            this.ar = 0;
-            this.aq = 0;
-            this.av = 0;
-            this.p = false;
-            this.q = false;
-            this.r = true;
-            this.n = false;
-            this.ax = 0;
+            this.ai = null;
+            this.al = null;
+            this.w = false;
+            this.am = null;
+            this.j = null;
+            this.a0 = 0;
+            this.ax = 24;
             this.az = 0;
             this.ay = 0;
-            this.aw = 0;
-            this.ak = 0;
-            this.am = 0;
-            this.al = 0;
-            this.aj = 0;
-            this.cj = null;
+            this.a3 = 0;
+            this.t = false;
+            this.u = false;
+            this.v = true;
+            this.ao = null;
+            this.bn = null;
+            this.dl = null;
+            this.m = null;
+            this.x = false;
+            this.bm = null;
+            this.bl = null;
+            this.dk = null;
+            this.dj = null;
+            this.dq = Rect.empty;
+            this.aj = null;
+            this.an = null;
+            this.l = null;
+            this.r = false;
+            this.a5 = 0;
+            this.a7 = 0;
+            this.a6 = 0;
+            this.a4 = 0;
+            this.as = 0;
+            this.au = 0;
             this.at = 0;
+            this.ar = 0;
+            this.di = null;
+            this.a1 = 0;
+            this.ba = 0;
             this.a2 = 0;
-            this.au = 0;
-            this.j = null;
+            this.k = null;
             this.g = 0;
-            this.h = 0;
-            this.ac = 0;
-            this.ab = 0;
-            this.t = false;
-            this.a8 = 0;
-            this.a9 = 0;
-            this.ai = 0;
-            this.a1 = -1;
-            this.an = 0;
-            this.o = false;
-            this.ad = a;
-            this.af = this.ad.createElement("div");
-            this.af.setAttribute("tabindex", "-1");
-            this.af.setRawStyleProperty("position", "absolute");
-            this.af.setRawStyleProperty("overflow", "hidden");
-            this.af.setRawStyleProperty("box-sizing", "border-box");
-            this.af.setRawStyleProperty("outline", "none");
+            this.i = 0;
+            this.ah = 0;
+            this.ag = 0;
+            this.h = 1;
+            this.y = false;
+            this.bj = 0;
+            this.bk = 0;
+            this.aq = 0;
+            this.a9 = -1;
+            this.av = 0;
+            this.s = false;
+            this.ai = a;
+            this.al = this.ai.createElement("div");
+            this.al.setAttribute("tabindex", "-1");
+            this.al.setRawStyleProperty("position", "absolute");
+            this.al.setRawStyleProperty("overflow", "hidden");
+            this.al.setRawStyleProperty("box-sizing", "border-box");
+            this.al.setRawStyleProperty("outline", "none");
             let b = (window.navigator.msPointerEnabled && window.MSGesture !== undefined);
             let c = (window.PointerEvent !== undefined);
             let d = (window.TouchEvent);
             if ((b || c)) {
-                this.af.listen("pointerdown", runOn(this, this.bt));
-                this.af.listen("pointerup", runOn(this, this.bx));
-                this.af.listen("pointermove", runOn(this, this.bw));
-                this.af.listen("pointerleave", runOn(this, this.bv));
-                this.af.listen("pointerenter", runOn(this, this.bu));
+                this.al.listen("pointerdown", runOn(this, this.cm));
+                this.al.listen("pointerup", runOn(this, this.cq));
+                this.al.listen("pointermove", runOn(this, this.cp));
+                this.al.listen("pointerleave", runOn(this, this.co));
+                this.al.listen("pointerenter", runOn(this, this.cn));
             }
             else {
-                this.af.listen("mousedown", runOn(this, this.bj));
-                this.af.listen("mouseup", runOn(this, this.bn));
-                this.af.listen("mousemove", runOn(this, this.bm));
-                this.af.listen("mouseleave", runOn(this, this.bl));
-                this.af.listen("touchstart", runOn(this, this.cb));
-                this.af.listen("touchend", runOn(this, this.cd));
-                this.af.listen("touchmove", runOn(this, this.cc));
+                this.al.listen("mousedown", runOn(this, this.b8));
+                this.al.listen("mouseup", runOn(this, this.cc));
+                this.al.listen("mousemove", runOn(this, this.cb));
+                this.al.listen("mouseleave", runOn(this, this.ca));
+                this.al.listen("touchstart", runOn(this, this.da));
+                this.al.listen("touchend", runOn(this, this.dc));
+                this.al.listen("touchmove", runOn(this, this.db));
             }
         }
         get b() {
@@ -98,217 +117,444 @@ export let GridCellBase = /*@__PURE__*/ (() => {
         get d() {
             return this.c;
         }
-        get ae() {
-            return this.ad;
+        get ak() {
+            return this.ai;
         }
-        get ah() {
-            return this.af;
+        get ap() {
+            return this.al;
         }
         get isRemoved() {
-            return this.s;
+            return this.w;
         }
         set isRemoved(a) {
-            let b = this.s;
-            this.s = a;
-            if (b != this.s) {
-                this.bs("IsRemoved", b, this.s);
+            let b = this.w;
+            this.w = a;
+            if (b != this.w) {
+                this.ch("IsRemoved", b, this.w);
             }
         }
-        get a5() {
-            return this.as;
+        get bd() {
+            return this.a0;
         }
-        get a3() {
-            return this.aq;
+        get bb() {
+            return this.ay;
         }
-        get a4() {
-            return this.ar;
+        get bc() {
+            return this.az;
         }
-        get a6() {
-            return this.av;
+        get bg() {
+            return this.a3;
         }
-        set a6(a) {
-            let b = this.av;
-            this.av = a;
-            if (b != this.av) {
-                this.bs("Indent", b, this.av);
+        set bg(a) {
+            let b = this.a3;
+            this.a3 = a;
+            if (b != this.a3) {
+                this.ch("Indent", b, this.a3);
             }
         }
-        get v() {
-            return this.p;
+        get aa() {
+            return this.t;
         }
-        set v(a) {
-            let b = this.p;
-            this.p = a;
-            if (b != this.p) {
-                this.bs("IsCollapsable", b, this.p);
+        set aa(a) {
+            let b = this.t;
+            this.t = a;
+            if (b != this.t) {
+                this.ch("IsCollapsable", b, this.t);
             }
         }
-        get w() {
-            return this.q;
+        get ab() {
+            return this.u;
         }
-        set w(a) {
-            let b = this.q;
-            this.q = a;
-            if (b != this.q) {
-                this.bs("IsExpanded", b, this.q);
+        set ab(a) {
+            let b = this.u;
+            this.u = a;
+            if (b != this.u) {
+                this.ch("IsExpanded", b, this.u);
             }
         }
-        get y() {
-            return this.r;
+        get ad() {
+            return this.v;
         }
-        set y(a) {
-            let b = this.r;
-            this.r = a;
-            if (b != this.r) {
-                this.bs("IsHitTestVisible", b, this.r);
-            }
-        }
-        bi() {
-            this.ar = 10;
-            this.aq = this.a6 * 24;
-            this.as = 24;
-            if (this.ag == null) {
-                this.ag = this.ad.createElement("div");
-                this.ag.setRawStyleProperty("display", "inline-block");
-                this.ag.setRawStyleProperty("vertical-align", "middle");
-                this.ag.setRawStyleProperty("width", this.as + "px");
-                this.ag.setRawStyleProperty("height", this.as + "px");
-                this.ag.setRawStyleProperty("cursor", "pointer");
-                this.ag.setRawStyleProperty("position", "absolute");
-                this.ag.setRawXPosition(this.ax + this.aq);
-                this.ag.setRawYPosition(intDivide(this.at, 2) - intDivide(this.ap, 2));
-            }
-            if (this.i == null) {
-                let a = this.ad.getSubRenderer(this.ag);
-                this.i = new GridExpansionIndicator();
-                this.i.ab(a);
-                this.i.y(24, 24);
-            }
-            if (this.ag.parent() == null) {
-                this.af.append(this.ag);
-            }
-        }
-        by() {
-            this.as = 0;
-            this.ar = 0;
-            if (this.ag != null) {
-                if (this.ag.parent() != null) {
-                    this.ag.remove();
+        set ad(a) {
+            let b = this.v;
+            this.v = a;
+            if (b != this.v) {
+                this.ch("IsHitTestVisible", b, this.v);
+            }
+        }
+        get b0() {
+            return this.bn;
+        }
+        set b0(a) {
+            let b = this.bn;
+            this.bn = a;
+            if (b != this.bn) {
+                this.ch("SuffixText", b, this.bn);
+            }
+        }
+        get dp() {
+            return this.dl;
+        }
+        set dp(a) {
+            let b = this.dl;
+            this.dl = a;
+            if (b != this.dl) {
+                this.ch("SuffixTextColor", b, this.dl);
+            }
+        }
+        get n() {
+            return this.m;
+        }
+        set n(a) {
+            let b = this.m;
+            this.m = a;
+            if (b != this.m) {
+                this.ch("SuffixTextFont", b, this.m);
+            }
+        }
+        ci() {
+            if (this.bn != null) {
+                if (this.ao == null) {
+                    this.ao = this.ai.createElement("span");
+                    this.ao.setRawStyleProperty("display", "inline-block");
+                    this.ao.setRawStyleProperty("overflow", "hidden");
+                    this.ao.setRawStyleProperty("white-space", "nowrap");
+                    this.ao.setRawStyleProperty("margin-left", "5px");
+                }
+                this.ck();
+                if (!this.x) {
+                    this.ap.setRawStyleProperty("display", "grid");
+                    this.ap.setRawStyleProperty("grid-template-columns", "1fr min-content");
+                    this.ap.append(this.ao);
+                    this.x = true;
+                }
+            }
+            else {
+                if (this.x) {
+                    this.ap.setRawStyleProperty("display", "unset");
+                    this.ap.setRawStyleProperty("grid-template-columns", "unset");
+                    this.ap.removeChild(this.ao);
+                    this.x = false;
                 }
             }
         }
-        get u() {
-            return this.n;
+        get bw() {
+            return this.bm;
         }
-        set u(a) {
-            this.n = a;
+        set bw(a) {
+            let b = this.bm;
+            this.bm = a;
+            if (b != this.bm) {
+                this.ch("SuffixIconName", b, this.bm);
+            }
         }
-        get_z() {
-            return false;
+        get bt() {
+            return this.bl;
+        }
+        set bt(a) {
+            let b = this.bl;
+            this.bl = a;
+            if (b != this.bl) {
+                this.ch("SuffixIconCollectionName", b, this.bl);
+            }
+        }
+        get dn() {
+            return this.dk;
+        }
+        set dn(a) {
+            let b = this.dk;
+            this.dk = a;
+            if (b != this.dk) {
+                this.ch("SuffixIconStroke", b, this.dk);
+            }
+        }
+        get dm() {
+            return this.dj;
+        }
+        set dm(a) {
+            let b = this.dj;
+            this.dj = a;
+            if (b != this.dj) {
+                this.ch("SuffixIconFill", b, this.dj);
+            }
+        }
+        get dr() {
+            return this.dq;
+        }
+        set dr(a) {
+            let b = this.dq;
+            this.dq = a;
+            if (Rect.l_op_Inequality(b, this.dq)) {
+                this.ch("SuffixIconViewBox", b, this.dq);
+            }
+        }
+        cj() {
+            if (this.bm != null && this.bl != null) {
+                if (this.l == null) {
+                    this.an = this.ai.createElement("div");
+                    this.aj = this.ai.getSubRenderer(this.an);
+                    this.l = new XIcon();
+                    this.l.provideContainer(this.aj);
+                    this.an.setRawStyleProperty("display", "inline-block");
+                    this.an.setRawStyleProperty("overflow", "hidden");
+                    this.an.setRawStyleProperty("margin-left", "5px");
+                }
+                this.ck();
+                if (!this.x) {
+                    this.ap.setRawStyleProperty("display", "grid");
+                    this.ap.setRawStyleProperty("grid-template-columns", "1fr min-content");
+                    this.ap.append(this.an);
+                    this.x = true;
+                }
+            }
+            else {
+                if (this.x) {
+                    this.ap.setRawStyleProperty("display", "unset");
+                    this.ap.setRawStyleProperty("grid-template-columns", "unset");
+                    this.ap.removeChild(this.an);
+                    this.x = false;
+                }
+            }
+        }
+        ck() {
+            if (this.ao != null) {
+                this.c5(this.ao, this.bn);
+                this.c6(this.ao, this.dp);
+                this.cx(this.ao, this.n);
+                this.c7(this.ao, this.h);
+            }
+            if (this.l != null) {
+                this.l.ea = this.dn;
+                this.l.fill = this.dm;
+                if (!this.dr.isEmpty && !isNaN_(this.dr.left) && !isNaN_(this.dr.top) && !isNaN_(this.dr.width) && !isNaN_(this.dr.height)) {
+                    this.l.a6 = this.dr.left;
+                    this.l.a7 = this.dr.top;
+                    this.l.a8 = this.dr.width;
+                    this.l.a5 = this.dr.height;
+                }
+                this.c4(this.an, this.dn);
+                this.cw(this.an, this.dm);
+                this.c7(this.an, this.h);
+                this.c0(this.l, this.bt, this.bw);
+            }
+        }
+        c0(a, b, c) {
+            a.svg = null;
+            a.svgPath = null;
+            a.b = null;
+            a.b0 = null;
+            a.bh = null;
+            let d = SvgIconRegistry.instance.getSvgPathString(this.bl, this.bm);
+            if (d != null) {
+                if (stringStartsWith(d, "<svg")) {
+                    a.svg = d;
+                }
+                else {
+                    a.svgPath = d;
+                }
+                return;
+            }
+            let e = SvgIconRegistry.instance.getSvgPathsString(this.bl, this.bm);
+            if (e != null) {
+                a.b = e;
+                return;
+            }
+            let f = SvgIconRegistry.instance.getDataURLString(this.bl, this.bm);
+            if (f != null) {
+                a.b0 = f;
+                return;
+            }
+            let g = SvgIconRegistry.instance.getIconSource(this.bl, this.bm);
+            if (g != null) {
+                a.bh = g;
+            }
+        }
+        b7() {
+            this.az = 10;
+            this.ay = this.bg * 24;
+            this.a0 = 24;
+            if (this.am == null) {
+                this.am = this.ai.createElement("div");
+                this.am.setRawStyleProperty("display", "inline-block");
+                this.am.setRawStyleProperty("vertical-align", "middle");
+                this.am.setRawStyleProperty("width", this.a0 + "px");
+                this.am.setRawStyleProperty("height", this.a0 + "px");
+                this.am.setRawStyleProperty("cursor", "pointer");
+                this.am.setRawStyleProperty("position", "absolute");
+                this.am.setRawXPosition(this.a5 + this.ay);
+                this.am.setRawYPosition(intDivide(this.a1, 2) - intDivide(this.ax, 2));
+            }
+            if (this.j == null) {
+                let a = this.ai.getSubRenderer(this.am);
+                this.j = new GridExpansionIndicator();
+                this.j.ab(a);
+                this.j.y(24, 24);
+            }
+            if (this.am.parent() == null) {
+                this.al.append(this.am);
+            }
+        }
+        cr() {
+            this.a0 = 0;
+            this.az = 0;
+            if (this.am != null) {
+                if (this.am.parent() != null) {
+                    this.am.remove();
+                }
+            }
         }
         get z() {
-            return this.get_z();
-        }
-        b7(a, b, c, d) {
-            this.ax = a;
-            this.az = b;
-            this.ay = c;
-            this.aw = d;
-            this.af.setRawStyleProperty("padding-left", a.toString() + "px");
-            this.af.setRawStyleProperty("padding-top", b.toString() + "px");
-            this.af.setRawStyleProperty("padding-right", c.toString() + "px");
-            this.af.setRawStyleProperty("padding-bottom", d.toString() + "px");
-        }
-        b1(a, b, c, d, e) {
-            this.ak = b;
-            this.am = c;
-            this.al = d;
-            this.aj = e;
-            this.cj = a;
+            return this.r;
+        }
+        set z(a) {
+            this.r = a;
+        }
+        get_ae() {
+            return false;
+        }
+        get ae() {
+            return this.get_ae();
+        }
+        c3(a, b, c, d) {
+            this.a5 = a;
+            this.a7 = b;
+            this.a6 = c;
+            this.a4 = d;
+            this.al.setRawStyleProperty("padding-left", a.toString() + "px");
+            this.al.setRawStyleProperty("padding-top", b.toString() + "px");
+            this.al.setRawStyleProperty("padding-right", c.toString() + "px");
+            this.al.setRawStyleProperty("padding-bottom", d.toString() + "px");
+        }
+        cu(a, b, c, d, e) {
+            this.as = b;
+            this.au = c;
+            this.at = d;
+            this.ar = e;
+            this.di = a;
             if (a == null) {
-                this.af.setRawStyleProperty("border", "");
+                this.al.setRawStyleProperty("border", "");
             }
             else {
-                this.af.setRawStyleProperty("border-color", a._fill);
-                this.af.setRawStyleProperty("border-left-width", b.toString() + "px");
-                this.af.setRawStyleProperty("border-top-width", c.toString() + "px");
-                this.af.setRawStyleProperty("border-right-width", d.toString() + "px");
-                this.af.setRawStyleProperty("border-bottom-width", e.toString() + "px");
-                this.af.setRawStyleProperty("border-style", "solid");
+                this.al.setRawStyleProperty("border-color", a._fill);
+                this.al.setRawStyleProperty("border-left-width", b.toString() + "px");
+                this.al.setRawStyleProperty("border-top-width", c.toString() + "px");
+                this.al.setRawStyleProperty("border-right-width", d.toString() + "px");
+                this.al.setRawStyleProperty("border-bottom-width", e.toString() + "px");
+                this.al.setRawStyleProperty("border-style", "solid");
             }
         }
-        get_x() {
+        get_ac() {
             return false;
         }
-        get x() {
-            return this.get_x();
-        }
-        b3(a, b) {
-            if (this.at != a || this.au != b) {
-                let c = this.at;
-                this.at = a;
-                this.au = b;
-                let d = Math.max(0, this.at - this.au);
-                this.af.setRawStyleProperty("height", a.toString() + "px");
-                this.af.setRawStyleProperty("line-height", d.toString() + "px");
-                if (this.ag != null) {
-                    this.ag.setRawYPosition(intDivide(this.at, 2) - intDivide(this.as, 2));
+        get ac() {
+            return this.get_ac();
+        }
+        get be() {
+            return this.a1;
+        }
+        get bh() {
+            return this.ba;
+        }
+        get bf() {
+            return this.a2;
+        }
+        cy(a, b) {
+            if (this.a1 != a || this.a2 != b) {
+                let c = this.a1;
+                this.a1 = a;
+                this.a2 = b;
+                let d = Math.max(0, this.a1 - this.a2);
+                this.al.setRawStyleProperty("height", a.toString() + "px");
+                if (this.am != null) {
+                    this.am.setRawYPosition(intDivide(this.a1, 2) - intDivide(this.a0, 2));
                 }
-                this.ca(this.a2, this.at, this.a2, c);
+                this.c9(this.ba, this.a1, this.ba, c);
             }
         }
-        b9(a, b) {
-            if (this.a2 != a) {
-                let c = this.a2;
-                this.a2 = a;
-                this.af.setRawStyleProperty("width", a.toString() + "px");
-                this.ca(this.a2, this.at, c, this.at);
+        c8(a, b) {
+            if (this.ba != a) {
+                let c = this.ba;
+                this.ba = a;
+                this.al.setRawStyleProperty("width", a.toString() + "px");
+                this.c9(this.ba, this.a1, c, this.a1);
             }
         }
-        ca(a, b, c, d) {
+        c9(a, b, c, d) {
         }
-        bg() {
-            if (!this.z) {
+        b5() {
+            if (!this.ae) {
                 return;
             }
-            this.n = true;
-            this.j = new PlaceholderView(this.ad);
+            this.r = true;
+            this.k = new PlaceholderView(this.ai);
             this.g = 0;
-            this.h = 1;
-            this.j.l = Color.u(120, 120, 120, 120);
-            this.j.i = 0;
-            this.af.append(this.j.g);
+            this.i = 1;
+            this.k.l = Color.u(120, 120, 120, 120);
+            this.k.i = 0;
+            this.al.append(this.k.g);
+        }
+        ct(a) {
+            this.al.setRawStyleProperty("background-color", a.colorString);
         }
-        b0(a) {
-            this.af.setRawStyleProperty("background-color", a.colorString);
+        c2(a) {
+            this.al.setRawStyleProperty("opacity", a.toString());
         }
-        b6(a) {
-            this.af.setRawStyleProperty("opacity", a.toString());
+        cx(a, b) {
+            if (b == null) {
+                b = FontUtil.getDefaultFont(this.ak);
+            }
+            a.setRawStyleProperty("font", b.fontString);
         }
-        m() {
+        c6(a, b) {
+            let c = Color.u(0, 0, 0, 0);
+            if (b != null) {
+                c = b.color;
+            }
+            a.setRawStyleProperty("color", c.colorString);
+        }
+        c4(a, b) {
+            let c = Color.u(0, 0, 0, 0);
+            if (b != null) {
+                c = b.color;
+            }
+            a.setRawStyleProperty("stroke", c.colorString);
+        }
+        cw(a, b) {
+            let c = Color.u(0, 0, 0, 0);
+            if (b != null) {
+                c = b.color;
+            }
+            a.setRawStyleProperty("fill", c.colorString);
+        }
+        c5(a, b) {
+            if (a != null) {
+                a.setRawText(b);
+            }
+        }
+        q() {
             if (TestRandomness.instance.testRandomnessSource != null) {
                 return TestRandomness.instance.testRandomnessSource;
             }
-            return new DefaultRandomnessSource(1, GridCellBase.a7);
+            return new DefaultRandomnessSource(1, GridCellBase.bi);
         }
-        l() {
-            let a = this.m();
+        p() {
+            let a = this.q();
             return a.getGenerator("PlaceholderWidths");
         }
-        ci(a) {
-            if (!this.z) {
+        dh(a) {
+            if (!this.ae) {
                 return;
             }
-            this.j.i = (a * 0.20000000298023224);
+            this.k.i = (a * 0.20000000298023224);
         }
-        cg(a, b, c, d) {
-            if (this.j != null) {
-                let e = this.ac;
-                let f = this.ab;
-                if (this.h == 1) {
+        df(a, b, c, d) {
+            if (this.k != null) {
+                let e = this.ah;
+                let f = this.ag;
+                if (this.i == 1) {
                     b = truncate((b + (d / 2) - (f / 2)));
                 }
-                else if (this.h == 2) {
+                else if (this.i == 2) {
                     b = truncate((b + (d) - (f)));
                 }
                 if (this.g == 1) {
@@ -317,182 +563,192 @@ export let GridCellBase = /*@__PURE__*/ (() => {
                 else if (this.g == 2) {
                     a = truncate((a + (c) - (e)));
                 }
-                this.j.g.setRawXPosition(a);
-                this.j.g.setRawYPosition(b);
+                this.k.g.setRawXPosition(a);
+                this.k.g.setRawYPosition(b);
             }
         }
-        bq(a, b, c) {
+        cf(a, b, c) {
+        }
+        cl(a) {
+            this.h = a;
+            if (this.ao != null) {
+                this.c7(this.ao, a);
+            }
         }
-        ch(a) {
-            if (!this.z) {
+        dg(a) {
+            if (!this.ae) {
                 return;
             }
             let b = DeviceUtils.f(12);
-            if (a.ag != null && !isNaN_(a.ag.f)) {
-                b = a.ag.f;
+            if (a.aj != null && !isNaN_(a.aj.f)) {
+                b = a.aj.f;
             }
-            if (this.ab != b) {
-                this.ab = b;
-                this.j.d = (b);
+            if (this.ag != b) {
+                this.ag = b;
+                this.k.d = (b);
             }
-            let c = a.he * 0.2;
-            let d = a.fu * 0.6;
-            if (this.ac >= c && this.ac <= d && !this.t) {
+            let c = a.h2 * 0.2;
+            let d = a.f6 * 0.6;
+            if (this.ah >= c && this.ah <= d && !this.y) {
                 return;
             }
-            this.t = false;
-            if (GridCellBase.k == null) {
-                GridCellBase.k = this.l();
+            this.y = false;
+            if (GridCellBase.o == null) {
+                GridCellBase.o = this.p();
             }
-            let e = (GridCellBase.k.nextDouble() * (d - c) + c);
-            if (this.ac != e) {
-                this.ac = e;
-                this.j.e = e;
+            let e = (GridCellBase.o.nextDouble() * (d - c) + c);
+            if (this.ah != e) {
+                this.ah = e;
+                this.k.e = e;
             }
-            this.cg(this.ax + this.aq + this.as, this.az, this.a2 - (this.ax + this.ay), this.at - (this.az + this.aw));
+            this.df(this.a5 + this.ay + this.a0, this.a7, this.ba - (this.a5 + this.a6), this.a1 - (this.a7 + this.a4));
         }
-        ce(a, b) {
-            if (!this.z) {
+        dd(a, b) {
+            if (!this.ae) {
                 return;
             }
             this.g = a;
-            this.h = b;
-            this.t = true;
+            this.i = b;
+            this.y = true;
         }
-        cf(a) {
-            if (!this.z) {
+        de(a) {
+            if (!this.ae) {
                 return;
             }
             if (a != null) {
-                this.j.l = a.color;
+                this.k.l = a.color;
             }
         }
-        bz(a) {
+        cs(a) {
             this.a = a;
         }
-        b5(a) {
+        c1(a) {
             this.e = a;
         }
-        b2(a) {
+        cv(a) {
             this.c = a;
         }
-        b4(a, b) {
+        cz(a, b) {
             switch (b) {
                 case 0:
-                    this.ah.setRawStyleProperty("text-align", "left");
+                    this.ap.setRawStyleProperty("text-align", "left");
                     break;
                 case 1:
-                    this.ah.setRawStyleProperty("text-align", "center");
+                    this.ap.setRawStyleProperty("text-align", "center");
                     break;
                 case 2:
-                    this.ah.setRawStyleProperty("text-align", "right");
+                    this.ap.setRawStyleProperty("text-align", "right");
                     break;
                 case 3:
-                    this.ah.setRawStyleProperty("text-align", "center");
+                    this.ap.setRawStyleProperty("text-align", "center");
                     break;
             }
         }
-        b8(a, b) {
+        c7(a, b) {
             switch (b) {
                 case 0:
                     a.setRawStyleProperty("vertical-align", "top");
+                    a.setRawStyleProperty("align-self", "flex-start");
                     break;
                 case 1:
-                    a.setRawStyleProperty("vertical-align", "center");
+                    a.setRawStyleProperty("vertical-align", "middle");
+                    a.setRawStyleProperty("align-self", "center");
                     break;
                 case 2:
                     a.setRawStyleProperty("vertical-align", "bottom");
+                    a.setRawStyleProperty("align-self", "flex-end");
                     break;
                 case 3:
                     a.setRawStyleProperty("vertical-align", "center");
+                    a.setRawStyleProperty("align-self", "center");
                     break;
             }
         }
-        aa(a) {
+        af(a) {
             return a.isClickActionDesired;
         }
-        bj(a) {
+        b8(a) {
             this.onContactStarted(a, false);
         }
-        bn(a) {
+        cc(a) {
             this.onContactCompleted(a, false);
         }
-        bm(a) {
+        cb(a) {
             this.onContactMoved(a, false);
         }
-        bl(a) {
-            this.bp(a, false);
+        ca(a) {
+            this.ce(a, false);
         }
-        bk(a) {
-            this.bo(a, false);
+        b9(a) {
+            this.cd(a, false);
         }
-        bt(e_) {
+        cm(e_) {
             let a = (e_.originalEvent.pointerType);
             if (a == "touch") {
-                this.cb(e_);
+                this.da(e_);
             }
             else {
-                this.bj(e_);
+                this.b8(e_);
             }
         }
-        bw(e_) {
+        cp(e_) {
             let a = (e_.originalEvent.pointerType);
             if (a == "touch") {
-                this.cc(e_);
+                this.db(e_);
             }
             else {
-                this.bm(e_);
+                this.cb(e_);
             }
         }
-        bx(e_) {
+        cq(e_) {
             let a = (e_.originalEvent.pointerType);
             if (a == "touch") {
-                this.cd(e_);
+                this.dc(e_);
             }
             else {
-                this.bn(e_);
+                this.cc(e_);
             }
         }
-        bv(e_) {
+        co(e_) {
             let a = (e_.originalEvent.pointerType);
             if (a != "touch") {
-                this.bl(e_);
+                this.ca(e_);
             }
         }
-        bu(e_) {
+        cn(e_) {
             let a = (e_.originalEvent.pointerType);
             if (a != "touch") {
-                this.bk(e_);
+                this.b9(e_);
             }
         }
-        cb(a) {
+        da(a) {
             this.onContactStarted(a, true);
         }
-        cc(a) {
+        db(a) {
             this.onContactMoved(a, true);
         }
-        cd(a) {
+        dc(a) {
             this.onContactCompleted(a, true);
         }
         onContactStarted(e_, a) {
             let b = false;
-            if (this.v) {
-                let indicator_ = this.i.q();
+            if (this.aa) {
+                let indicator_ = this.j.q();
                 b = (e_.originalEvent.srcElement === indicator_ || e_.originalEvent.target === indicator_);
             }
-            this.o = false;
+            this.s = false;
             if (b) {
-                this.o = true;
+                this.s = true;
             }
             else {
-                if (this.a != null && this.aa(this.a)) {
-                    this.a8 = e_.pageX;
-                    this.a9 = e_.pageY;
-                    if (this.a1 != e_.which) {
-                        this.an = 0;
+                if (this.a != null && this.af(this.a)) {
+                    this.bj = e_.pageX;
+                    this.bk = e_.pageY;
+                    if (this.a9 != e_.which) {
+                        this.av = 0;
                     }
-                    this.a1 = e_.which;
-                    this.a.mouseDownCell(this.a8, this.a9);
+                    this.a9 = e_.which;
+                    this.a.mouseDownCell(this.bj, this.bk);
                 }
             }
         }
@@ -500,10 +756,10 @@ export let GridCellBase = /*@__PURE__*/ (() => {
             if (this.a != null) {
                 let c = a.pageX;
                 let d = a.pageY;
-                if (this.aa(this.a)) {
+                if (this.af(this.a)) {
                     if (this.a.isMouseDown) {
                         if (b) {
-                            if (PointUtil.equals(this.a.mousePosition, null) || Math.abs(c - this.a.mousePosition.x) > GridCellBase.a0 || Math.abs(d - this.a.mousePosition.y) > GridCellBase.a0) {
+                            if (PointUtil.equals(this.a.mousePosition, null) || Math.abs(c - this.a.mousePosition.x) > GridCellBase.a8 || Math.abs(d - this.a.mousePosition.y) > GridCellBase.a8) {
                                 this.a.mouseUpCell(c, d);
                             }
                             else {
@@ -514,8 +770,8 @@ export let GridCellBase = /*@__PURE__*/ (() => {
                             if (PointUtil.equals(this.a.mousePosition, null)) {
                                 this.a.mouseUpCell(c, d);
                             }
-                            else if (this.a1 == 1) {
-                                if (Math.abs(c - this.a.mousePosition.x) > GridCellBase.ao || Math.abs(d - this.a.mousePosition.y) > GridCellBase.ao) {
+                            else if (this.a9 == 1) {
+                                if (Math.abs(c - this.a.mousePosition.x) > GridCellBase.aw || Math.abs(d - this.a.mousePosition.y) > GridCellBase.aw) {
                                     this.a.isControlPressed = a.ctrlKey;
                                     this.a.dragStarted();
                                 }
@@ -529,28 +785,28 @@ export let GridCellBase = /*@__PURE__*/ (() => {
             }
         }
         onContactCompleted(e_, a) {
-            this.an++;
-            window.setTimeout(() => this.an = 0, 250);
+            this.av++;
+            window.setTimeout(() => this.av = 0, 250);
             let b = false;
-            if (this.v) {
-                let indicator_ = this.i.q();
+            if (this.aa) {
+                let indicator_ = this.j.q();
                 b = (e_.originalEvent.srcElement === indicator_ || e_.originalEvent.target === indicator_);
             }
-            if (this.o && b) {
+            if (this.s && b) {
                 this.b.clickExpansionIndicator();
             }
             else {
-                if (this.a != null && this.aa(this.a)) {
+                if (this.a != null && this.af(this.a)) {
                     let c = e_.pageX;
                     let d = e_.pageY;
-                    if (PointUtil.equals(this.a.mousePosition, null) || Math.abs(c - this.a.mousePosition.x) > GridCellBase.a0 || Math.abs(d - this.a.mousePosition.y) > GridCellBase.a0 || this.a.isDrag) {
+                    if (PointUtil.equals(this.a.mousePosition, null) || Math.abs(c - this.a.mousePosition.x) > GridCellBase.a8 || Math.abs(d - this.a.mousePosition.y) > GridCellBase.a8 || this.a.isDrag) {
                         this.a.mouseUpCell(c, d);
                     }
                     if (this.a.isCellDown()) {
                         this.a.isControlPressed = e_.ctrlKey;
                         this.a.isShiftPressed = e_.shiftKey;
-                        if (this.an > 1) {
-                            switch (this.a1) {
+                        if (this.av > 1) {
+                            switch (this.a9) {
                                 case 1:
                                     this.a.doubleClicked(0);
                                     break;
@@ -585,11 +841,11 @@ export let GridCellBase = /*@__PURE__*/ (() => {
                     }
                 }
             }
-            this.o = false;
+            this.s = false;
         }
-        bp(a, b) {
+        ce(a, b) {
             if (this.a != null) {
-                if (this.aa(this.a)) {
+                if (this.af(this.a)) {
                     if (this.a.isMouseDown) {
                         if (!b && PointUtil.notEquals(this.a.mousePosition, null)) {
                             this.a.isControlPressed = a.ctrlKey;
@@ -604,7 +860,7 @@ export let GridCellBase = /*@__PURE__*/ (() => {
                 }
             }
         }
-        bo(a, b) {
+        cd(a, b) {
             if (this.a != null && this.a.isEnterActionDesired) {
                 let c = a.pageX;
                 let d = a.pageY;
@@ -613,42 +869,56 @@ export let GridCellBase = /*@__PURE__*/ (() => {
         }
         onDoubleClick(a) {
         }
-        bs(a, b, c) {
+        ch(a, b, c) {
             switch (a) {
                 case "Indent":
-                    this.aq = this.a6 * 24;
-                    this.ar = this.a6 > 0 ? 10 : 0;
-                    if (this.ag != null) {
-                        this.ag.setRawXPosition(this.ax + this.aq);
-                        this.ag.setRawYPosition(intDivide(this.at, 2) - intDivide(this.ap, 2));
+                    this.ay = this.bg * 24;
+                    this.az = this.bg > 0 ? 10 : 0;
+                    if (this.am != null) {
+                        this.am.setRawXPosition(this.a5 + this.ay);
+                        this.am.setRawYPosition(intDivide(this.a1, 2) - intDivide(this.ax, 2));
                     }
                     break;
                 case "IsCollapsable":
-                    if (this.v) {
-                        this.bi();
+                    if (this.aa) {
+                        this.b7();
                     }
                     else {
-                        this.by();
+                        this.cr();
                     }
                     break;
                 case "IsExpanded":
-                    if (this.i != null) {
-                        this.i.g = this.w;
+                    if (this.j != null) {
+                        this.j.g = this.ab;
                     }
                     break;
                 case "IsHitTestVisible":
-                    this.ah.setRawStyleProperty("pointer-events", this.y ? "auto" : "none");
+                    this.ap.setRawStyleProperty("pointer-events", this.ad ? "auto" : "none");
+                    break;
+                case "SuffixText":
+                    this.ci();
+                    break;
+                case "SuffixIconName":
+                case "SuffixIconCollectionName":
+                    this.cj();
+                    break;
+                case "SuffixTextColor":
+                case "SuffixTextFont":
+                case "SuffixIconStroke":
+                case "SuffixIconFill":
+                case "SuffixIconViewBox":
+                    this.ck();
                     break;
             }
         }
-        br() {
+        cg() {
         }
-        bh() {
-            this.af.focus(true);
+        b6() {
+            this.al.focus(true);
         }
-        bf() {
+        b4() {
             if (this.a != null) {
-                let a = this.af.clone();
+                let a = this.al.clone();
                 this.a.passCellClone(a);
             }
         }
@@ -656,9 +926,9 @@ export let GridCellBase = /*@__PURE__*/ (() => {
         }
     }
     GridCellBase.$t = markType(GridCellBase, 'GridCellBase', Base.$, [INativeCell_$type]);
-    GridCellBase.k = null;
-    GridCellBase.a7 = new Random(0);
-    GridCellBase.a0 = 10;
-    GridCellBase.ao = 3;
+    GridCellBase.o = null;
+    GridCellBase.bi = new Random(0);
+    GridCellBase.a8 = 10;
+    GridCellBase.aw = 3;
     return GridCellBase;
 })();