igniteui-webcomponents-inputs 6.2.2-alpha.3 → 6.3.0

package/esm2015/lib/NativeUIXInputsFactory_combined.js

@@ -35,12 +35,13 @@ import { NativeUIPopup } from "igniteui-webcomponents-core";
 import { XComponentBridge } from "./XComponentBridge";
 import { ColorEditorPanelSelectedValueChangedEventArgs } from "./ColorEditorPanelSelectedValueChangedEventArgs";
 import { NativeUIColorEditorValueChangedEventArgs } from "igniteui-webcomponents-core";
+import { ColorEditorVisualModelExport } from "./ColorEditorVisualModelExport";
+import { Rect } from "igniteui-webcomponents-core";
 import { KeyFrameAnimationFactory } from "igniteui-webcomponents-core";
 import { Size } from "igniteui-webcomponents-core";
 import { NativeUIContent } from "igniteui-webcomponents-core";
 import { truncate, isNaN_, intDivide } from "igniteui-webcomponents-core";
 import { DOMExecutionContext } from "igniteui-webcomponents-core";
-import { Rect } from "igniteui-webcomponents-core";
 import { SRProvider } from "igniteui-webcomponents-core";
 import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
 import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
@@ -50,6 +51,7 @@ import { NativeUIWindow } from "igniteui-webcomponents-core";
 import { ColorEditorPanelClosedEventArgs } from "./ColorEditorPanelClosedEventArgs";
 import { ColorEditorGotFocusEventArgs } from "./ColorEditorGotFocusEventArgs";
 import { ColorEditorLostFocusEventArgs } from "./ColorEditorLostFocusEventArgs";
+import { AppearanceHelper } from "igniteui-webcomponents-core";
 import { Color } from "igniteui-webcomponents-core";
 import { ColorUtil } from "igniteui-webcomponents-core";
 import { Thickness } from "igniteui-webcomponents-core";
@@ -335,6 +337,15 @@ export let ColorEditorBridge = /*@__PURE__*/ (() => {
                     break;
             }
         }
+        exportVisualData(a) {
+            let b = a.as();
+            let c = this.getBoundingRect(a);
+            b.e = c.left;
+            b.f = c.top;
+            b.g = c.width;
+            b.d = c.height;
+            return b;
+        }
     }
     ColorEditorBridge.$t = /*@__PURE__*/ markType(ColorEditorBridge, 'ColorEditorBridge', XComponentBridge.$);
     return ColorEditorBridge;
@@ -695,7 +706,7 @@ export let ColorEditorView = /*@__PURE__*/ (() => {
                 this.a.a = new DOMExecutionContext(a);
             }
             this.h = a;
-            this.a.bg();
+            this.a.bj();
         }
         m() {
             if (KeyFrameAnimationFactory.h == null) {
@@ -755,54 +766,54 @@ export let ColorEditor = /*@__PURE__*/ (() => {
     class ColorEditor extends Base {
         constructor() {
             super();
-            this.g = null;
+            this.h = null;
+            this.s = null;
             this.r = null;
-            this.q = null;
-            this.d = null;
-            this.v = false;
-            this.af = false;
-            this.ad = false;
-            this.cj = BrushUtil.j(0, 0, 0, 0);
+            this.e = null;
             this.w = false;
+            this.ag = false;
+            this.ae = false;
+            this.cm = BrushUtil.j(0, 0, 0, 0);
+            this.x = false;
             this.propertyChanged = null;
             this.valueChanged = null;
             this.valueChanging = null;
-            this.s = null;
+            this.t = null;
             this.a = null;
-            this.cl = BrushUtil.j(255, 0, 0, 255);
-            this.ar = "";
-            this.ci = BrushUtil.j(255, 24, 29, 31);
-            this.l = null;
-            this.j = 2;
-            this.h = 1;
+            this.co = BrushUtil.j(255, 0, 0, 255);
+            this.at = "";
+            this.cl = BrushUtil.j(255, 24, 29, 31);
             this.m = null;
-            this.ck = BrushUtil.j(255, 24, 29, 31);
-            this.ch = BrushUtil.j(255, 163, 172, 184);
+            this.k = 2;
+            this.i = 1;
+            this.n = null;
+            this.cn = BrushUtil.j(255, 24, 29, 31);
+            this.ck = BrushUtil.j(255, 163, 172, 184);
+            this.ad = true;
+            this.v = true;
             this.ac = true;
-            this.u = true;
-            this.ab = true;
-            this.x = false;
-            this.ap = 0;
             this.y = false;
-            this.aa = false;
-            this.ae = false;
+            this.aq = 0;
             this.z = false;
+            this.ab = false;
+            this.af = false;
+            this.aa = false;
             this.gotFocus = null;
             this.lostFocus = null;
             NativeUIInputsFactory.n();
             NativeUIXInputsFactory.m();
             let a = new ColorEditorView();
             a.a = this;
-            this.g = a;
-            this.g.q();
+            this.h = a;
+            this.h.q();
         }
         onAttachedToUI() {
-            this.g.n();
+            this.h.n();
         }
         onDetachedFromUI() {
-            this.g.p();
+            this.h.p();
         }
-        b1(a, b) {
+        b4(a, b) {
             if (this.valueChanging != null) {
                 this.valueChanging(this, ((() => {
                     let $ret = new ColorEditorPanelSelectedValueChangedEventArgs();
@@ -811,7 +822,7 @@ export let ColorEditor = /*@__PURE__*/ (() => {
                     return $ret;
                 })()));
             }
-            if (this.w) {
+            if (this.x) {
             }
         }
         notifySizeChanged() {
@@ -820,74 +831,44 @@ export let ColorEditor = /*@__PURE__*/ (() => {
             this.provideContainer(null);
         }
         provideContainer(a) {
-            this.g.o(a);
+            this.h.o(a);
         }
-        get t() {
-            if (this.s == null) {
-                this.s = new SRProvider(this.g.h);
-                this.s.cb("ColorEditor");
+        get u() {
+            if (this.t == null) {
+                this.t = new SRProvider(this.h.h);
+                this.t.cb("ColorEditor");
             }
-            return this.s;
+            return this.t;
         }
         get value() {
-            return this.cl;
+            return this.co;
         }
         set value(a) {
-            let b = this.cl;
-            this.cj = b;
-            this.cl = a;
-            if (b != this.cl) {
-                this.b0("Value", b, this.cl);
+            let b = this.co;
+            this.cm = b;
+            this.co = a;
+            if (b != this.co) {
+                this.b3("Value", b, this.co);
             }
         }
-        get az() {
-            return this.ar;
+        get a2() {
+            return this.at;
         }
-        set az(a) {
-            let b = this.ar;
-            this.ar = a;
-            if (b != this.ar) {
-                this.b0("Label", b, this.ar);
+        set a2(a) {
+            let b = this.at;
+            this.at = a;
+            if (b != this.at) {
+                this.b3("Label", b, this.at);
             }
         }
-        get cn() {
-            return this.ci;
-        }
-        set cn(a) {
-            let b = this.ci;
-            this.ci = a;
-            if (b != this.ci) {
-                this.b0("LabelTextColor", b, a);
-            }
-        }
-        get o() {
-            return this.l;
-        }
-        set o(a) {
-            let b = this.l;
-            this.l = a;
-            if (b != this.l) {
-                this.b0("LabelTextStyle", b, this.l);
-            }
-        }
-        get k() {
-            return this.j;
-        }
-        set k(a) {
-            let b = this.j;
-            this.j = a;
-            if (b != this.j) {
-                this.b0("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.j));
-            }
-        }
-        get i() {
-            return this.h;
+        get cq() {
+            return this.cl;
         }
-        set i(a) {
-            let b = this.h;
-            this.h = a;
-            if (b != this.h) {
-                this.b0("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.h));
+        set cq(a) {
+            let b = this.cl;
+            this.cl = a;
+            if (b != this.cl) {
+                this.b3("LabelTextColor", b, a);
             }
         }
         get p() {
@@ -897,77 +878,87 @@ export let ColorEditor = /*@__PURE__*/ (() => {
             let b = this.m;
             this.m = a;
             if (b != this.m) {
-                this.b0("TextStyle", b, this.m);
+                this.b3("LabelTextStyle", b, this.m);
             }
         }
-        get co() {
-            return this.ck;
+        get l() {
+            return this.k;
         }
-        set co(a) {
-            let b = this.ck;
-            this.ck = a;
-            if (b != this.ck) {
-                this.b0("TextColor", b, this.ck);
+        set l(a) {
+            let b = this.k;
+            this.k = a;
+            if (b != this.k) {
+                this.b3("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.k));
             }
         }
-        get cm() {
-            return this.ch;
+        get j() {
+            return this.i;
         }
-        set cm(a) {
-            let b = this.ch;
-            this.ch = a;
-            if (b != this.ch) {
-                this.b0("IconColor", b, this.ch);
+        set j(a) {
+            let b = this.i;
+            this.i = a;
+            if (b != this.i) {
+                this.b3("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.i));
             }
         }
-        get am() {
-            return this.ac;
+        get q() {
+            return this.n;
         }
-        set am(a) {
-            let b = this.ac;
-            this.ac = a;
-            if (b != this.ac) {
-                this.b0("ShowClearButton", b, this.ac);
+        set q(a) {
+            let b = this.n;
+            this.n = a;
+            if (b != this.n) {
+                this.b3("TextStyle", b, this.n);
             }
         }
-        get ag() {
-            return this.u;
+        get cr() {
+            return this.cn;
         }
-        set ag(a) {
-            let b = this.u;
-            this.u = a;
-            if (b != this.u) {
-                this.b0("AllowTextInput", b, this.u);
+        set cr(a) {
+            let b = this.cn;
+            this.cn = a;
+            if (b != this.cn) {
+                this.b3("TextColor", b, this.cn);
             }
         }
-        get ak() {
-            return this.ab;
+        get cp() {
+            return this.ck;
         }
-        set ak(a) {
-            let b = this.ab;
-            this.ab = a;
-            if (b != this.ab) {
-                this.b0("OpenOnFocus", b, this.ab);
+        set cp(a) {
+            let b = this.ck;
+            this.ck = a;
+            if (b != this.ck) {
+                this.b3("IconColor", b, this.ck);
+            }
+        }
+        get an() {
+            return this.ad;
+        }
+        set an(a) {
+            let b = this.ad;
+            this.ad = a;
+            if (b != this.ad) {
+                this.b3("ShowClearButton", b, this.ad);
             }
         }
         get ah() {
-            return this.x;
+            return this.v;
         }
         set ah(a) {
-            let b = this.x;
-            this.x = a;
-            if (b != this.x) {
-                this.b0("IsDisabled", b, this.x);
+            let b = this.v;
+            this.v = a;
+            if (b != this.v) {
+                this.b3("AllowTextInput", b, this.v);
             }
         }
-        get aq() {
-            return this.ap;
+        get al() {
+            return this.ac;
         }
-        set aq(a) {
-            let b = this.ap;
-            this.ap = a;
-            if (b != this.ap) {
-                this.b0("TabIndex", b, this.ap);
+        set al(a) {
+            let b = this.ac;
+            this.ac = a;
+            if (b != this.ac) {
+                this.b3("OpenOnFocus", b, this.ac);
             }
         }
         get ai() {
@@ -977,61 +968,81 @@ export let ColorEditor = /*@__PURE__*/ (() => {
             let b = this.y;
             this.y = a;
             if (b != this.y) {
-                this.b0("IsFixed", b, this.y);
+                this.b3("IsDisabled", b, this.y);
+            }
+        }
+        get ar() {
+            return this.aq;
+        }
+        set ar(a) {
+            let b = this.aq;
+            this.aq = a;
+            if (b != this.aq) {
+                this.b3("TabIndex", b, this.aq);
             }
         }
         get aj() {
-            return this.aa;
+            return this.z;
         }
         set aj(a) {
-            let b = this.aa;
-            this.aa = a;
-            if (b != this.aa) {
-                this.b0("OpenAsChild", b, this.aa);
+            let b = this.z;
+            this.z = a;
+            if (b != this.z) {
+                this.b3("IsFixed", b, this.z);
             }
         }
-        get an() {
-            return this.ae;
+        get ak() {
+            return this.ab;
         }
-        set an(a) {
-            let b = this.ae;
-            this.ae = a;
-            if (b != this.ae) {
-                this.b0("UseTopLayer", b, this.ae);
+        set ak(a) {
+            let b = this.ab;
+            this.ab = a;
+            if (b != this.ab) {
+                this.b3("OpenAsChild", b, this.ab);
             }
         }
-        b0(a, b, c) {
+        get ao() {
+            return this.af;
+        }
+        set ao(a) {
+            let b = this.af;
+            this.af = a;
+            if (b != this.af) {
+                this.b3("UseTopLayer", b, this.af);
+            }
+        }
+        b3(a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new PropertyChangedEventArgs(a));
             }
-            this.b6(a, b, c);
+            this.b9(a, b, c);
         }
-        b6(a, b, c) {
+        b9(a, b, c) {
             switch (a) {
                 case "Density":
-                    this.b9();
+                    this.cc();
                     break;
                 case "BaseTheme":
-                    this.ca();
+                    this.cd();
                     break;
                 case "Value":
-                    this.b1(this.cj, this.value);
-                    this.cj = this.value;
-                    if (this.d != null && !this.w) {
-                        this.d.value = this.value;
+                    this.b4(this.cm, this.value);
+                    this.cm = this.value;
+                    if (this.e != null && !this.x) {
+                        this.e.value = this.value;
                     }
                     break;
                 case "Label":
-                    if (this.q != null) {
-                        this.q.b5 = this.az;
+                    if (this.r != null) {
+                        this.r.b5 = this.a2;
                     }
                     break;
                 case "TextStyle":
-                    this.cf();
+                    this.ci();
                     break;
                 case "ShowClearButton":
-                    if (this.q != null) {
-                        if (this.q.b7 != "") {
+                    if (this.r != null) {
+                        if (this.r.b7 != "") {
                         }
                     }
                     break;
@@ -1039,269 +1050,283 @@ export let ColorEditor = /*@__PURE__*/ (() => {
                 case "LabelTextStyle":
                 case "TextColor":
                 case "IconColor":
-                    this.cg();
+                    this.cj();
                     break;
                 case "AllowTextInput":
-                    if (this.q != null) {
-                        this.q.b0 = this.al();
+                    if (this.r != null) {
+                        this.r.b0 = this.am();
                     }
                     break;
                 case "OpenOnFocus": break;
                 case "IsDisabled":
                     {
-                        if (this.q != null) {
-                            this.q.b0 = this.al();
+                        if (this.r != null) {
+                            this.r.b0 = this.am();
                         }
                     }
                     break;
             }
         }
-        al() {
-            return this.ah || !this.ag;
+        am() {
+            return this.ai || !this.ah;
         }
-        cg() {
-            if (this.q != null) {
-                this.q.ce = this.co;
+        cj() {
+            if (this.r != null) {
+                this.r.ce = this.cr;
             }
         }
-        ce() {
-            if (this.q != null) {
+        ch() {
+            if (this.r != null) {
             }
         }
-        cf() {
-            if (this.m != null) {
-                this.q.bk = this.m;
+        ci() {
+            if (this.n != null) {
+                this.r.bk = this.n;
             }
         }
-        be() {
-            if (this.ah == true) {
+        bh() {
+            if (this.ai == true) {
                 return;
             }
-            if (this.q != null) {
-                this.q.b7 = "";
+            if (this.r != null) {
+                this.r.b7 = "";
             }
             this.value = BrushUtil.j(0, 0, 0, 0);
-            this.d.ax();
-            this.z = false;
+            this.e.ax();
+            this.aa = false;
         }
-        by() {
-            this.z = true;
+        b1() {
+            this.aa = true;
         }
-        bz() {
-            this.z = false;
+        b2() {
+            this.aa = false;
         }
-        bo() {
-            NativeUIWindow.h(15, runOn(this, this.b4), this.g.h);
-            NativeUIWindow.h(9, runOn(this, this.b3), this.g.h);
+        br() {
+            NativeUIWindow.h(15, runOn(this, this.b7), this.h.h);
+            NativeUIWindow.h(9, runOn(this, this.b6), this.h.h);
         }
-        bs() {
-            NativeUIWindow.i(15, runOn(this, this.b4));
-            NativeUIWindow.i(9, runOn(this, this.b3));
+        bv() {
+            NativeUIWindow.i(15, runOn(this, this.b7));
+            NativeUIWindow.i(9, runOn(this, this.b6));
         }
-        b3(a) {
+        b6(a) {
             let b = a;
-            if (this.q != null) {
-                if (this.r.b6 && !this.r.t(b.b) && !this.q.t(b.b)) {
-                    this.bf();
+            if (this.r != null) {
+                if (this.s.b6 && !this.s.t(b.b) && !this.r.t(b.b)) {
+                    this.bi();
                 }
             }
         }
-        b4(a) {
-            if (this.q != null) {
-                let b = this.q.be();
-                this.r.ce(b);
+        b7(a) {
+            if (this.r != null) {
+                let b = this.r.be();
+                this.s.ce(b);
             }
         }
-        bg() {
-            NativeUIComponent.av(this.g.j(), [12, 2, 7, 0], [2, 2, 2, 2], (a) => {
+        bj() {
+            NativeUIComponent.av(this.h.j(), [12, 2, 7, 0], [2, 2, 2, 2], (a) => {
                 let b = a[0];
                 let c = a[1];
                 let d = a[2];
                 let e = a[3];
-                let f = this.g.i();
-                this.g.k(e, f);
+                let f = this.h.i();
+                this.h.k(e, f);
                 b.bn(d);
                 d.bn(e);
-                this.g.l(c);
+                this.h.l(c);
                 b.ch = BrushUtil.j(255, 255, 255, 255);
                 b.ca = 150;
                 b.b8 = 8;
                 b.cb = 4;
                 b.b1 = true;
-                this.q = c;
-                this.q.c = this.i;
-                this.q.bp = this.k;
-                this.q.b6 = ColorEditor.a5;
-                this.q.cc = BrushUtil.j(255, 255, 255, 255);
-                this.q.cd = BrushUtil.j(255, 0, 0, 0);
-                this.q.bn = runOn(this, this.cc);
-                this.q.n = runOn(this, this.bv);
-                this.q.o = runOn(this, this.bx);
-                this.q.cb = BrushUtil.j(255, 0, 0, 255);
-                this.r = b;
-                this.d = this.g.c(f);
-                this.d.value = this.value;
-                let g = this.d;
-                g.closed = delegateCombine(g.closed, runOn(this, this.bc));
-                let h = this.d;
-                h.valueChanged = delegateCombine(h.valueChanged, runOn(this, this.bd));
-                d.o = runOn(this, this.bx);
-                let i = this.d;
-                i.valueChanged = delegateCombine(i.valueChanged, runOn(this, this.bj));
+                this.r = c;
+                this.r.c = this.j;
+                this.r.bp = this.l;
+                this.r.b6 = ColorEditor.a8;
+                this.r.cc = BrushUtil.j(255, 255, 255, 255);
+                this.r.cd = BrushUtil.j(255, 0, 0, 0);
+                this.r.bn = runOn(this, this.cf);
+                this.r.n = runOn(this, this.by);
+                this.r.o = runOn(this, this.b0);
+                this.r.cb = BrushUtil.j(255, 0, 0, 255);
+                this.s = b;
+                this.e = this.h.c(f);
+                this.e.value = this.value;
+                let g = this.e;
+                g.closed = delegateCombine(g.closed, runOn(this, this.bf));
+                let h = this.e;
+                h.valueChanged = delegateCombine(h.valueChanged, runOn(this, this.bg));
+                d.o = runOn(this, this.b0);
+                let i = this.e;
+                i.valueChanged = delegateCombine(i.valueChanged, runOn(this, this.bm));
             });
         }
-        bd(a, b) {
+        bg(a, b) {
             if (this.valueChanged != null) {
                 this.valueChanged(this, b);
             }
         }
-        bc(a, b) {
-            this.bi(a);
+        bf(a, b) {
+            this.bl(a);
         }
-        bx(a, b) {
-            if (!this.r.t(b.b) && !this.q.t(b.b) && !(this.q.an == b.b)) {
-                this.bm();
+        b0(a, b) {
+            if (!this.s.t(b.b) && !this.r.t(b.b) && !(this.r.an == b.b)) {
+                this.bp();
             }
         }
-        bv(a, b) {
+        by(a, b) {
             this.focus();
         }
-        cc(a, b) {
-            this.cd();
+        cf(a, b) {
+            this.cg();
         }
-        bj(a, b) {
-            this.w = true;
+        bm(a, b) {
+            this.x = true;
             this.value = b.newValue;
-            this.w = false;
-            this.b2(b.oldValue, b.newValue);
+            this.x = false;
+            this.b5(b.oldValue, b.newValue);
         }
-        b2(a, b) {
-            if (this.q != null) {
-                this.q.cb = b;
+        b5(a, b) {
+            if (this.r != null) {
+                this.r.cb = b;
             }
         }
-        bi(a) {
-            if (this.r.b6) {
-                this.v = true;
-                this.bf();
+        bl(a) {
+            if (this.s.b6) {
+                this.w = true;
+                this.bi();
             }
         }
-        cd() {
-            if (this.v == false) {
-                if (this.r.b6) {
-                    this.bf();
+        cg() {
+            if (this.w == false) {
+                if (this.s.b6) {
+                    this.bi();
                 }
                 else {
-                    this.b5();
+                    this.b8();
                 }
             }
             else {
-                this.v = false;
+                this.w = false;
             }
         }
-        b5() {
-            if (this.ah) {
+        b8() {
+            if (this.ai) {
                 return;
             }
-            if (this.r != null) {
-                let a = this.g.r(false);
-                let b = this.g.s();
+            if (this.s != null) {
+                let a = this.h.r(false);
+                let b = this.h.s();
                 let c = b.height;
                 let d = 240;
                 let e = a.bottom + d;
                 if (!isNaN_(c) && c < e) {
                     let f = a.top - d;
                     if (f < 0) {
-                        this.cb(1, 0);
+                        this.ce(1, 0);
                     }
                     else {
-                        this.cb(2, 0);
+                        this.ce(2, 0);
                     }
                 }
                 else {
-                    this.cb(1, 0);
+                    this.ce(1, 0);
                 }
             }
         }
-        cb(a, b) {
+        ce(a, b) {
             {
-                let c = this.g.r(true);
-                this.r.cf(c, a, b);
+                let c = this.h.r(true);
+                this.s.cf(c, a, b);
             }
         }
-        bf() {
-            if (this.r != null) {
-                this.a.executeDelayed(() => this.r.cc(), 0);
+        bi() {
+            if (this.s != null) {
+                this.a.executeDelayed(() => this.s.cc(), 0);
             }
-            if (this.d != null) {
-                this.d.bg();
+            if (this.e != null) {
+                this.e.bg();
             }
-            this.v = false;
+            this.w = false;
         }
         focus(a = false) {
-            if (this.q != null) {
-                this.q.a0();
+            if (this.r != null) {
+                this.r.a0();
             }
-            if (!this.r.b6 && this.ak == true) {
-                if (this.v == false) {
-                    if (this.z) {
+            if (!this.s.b6 && this.al == true) {
+                if (this.w == false) {
+                    if (this.aa) {
                         return;
                     }
-                    if (this.ag == false) {
-                        this.b5();
-                        this.v = true;
-                        this.a.executeDelayed(() => this.bl(), 0);
+                    if (this.ah == false) {
+                        this.b8();
+                        this.w = true;
+                        this.a.executeDelayed(() => this.bo(), 0);
                     }
                     else {
-                        if (this.ak == true && this.ad == false) {
-                            this.b5();
-                            this.v = true;
-                            this.a.executeDelayed(() => this.bl(), 0);
+                        if (this.al == true && this.ae == false) {
+                            this.b8();
+                            this.w = true;
+                            this.a.executeDelayed(() => this.bo(), 0);
                         }
                     }
                 }
                 else {
-                    this.v = false;
+                    this.w = false;
                 }
             }
         }
-        bm() {
-            this.v = false;
+        bp() {
+            this.w = false;
         }
-        b8() {
-            if (this.q != null) {
-                this.q.b9();
+        cb() {
+            if (this.r != null) {
+                this.r.b9();
             }
         }
-        bl() {
-            this.d.a3();
+        bo() {
+            this.e.a3();
         }
-        bq() {
+        bt() {
             let a = new ColorEditorGotFocusEventArgs();
-            this.bu(a);
+            this.bx(a);
         }
-        br() {
+        bu() {
             let a = new ColorEditorLostFocusEventArgs();
-            this.bw(a);
+            this.bz(a);
+        }
+        cd() {
+        }
+        cc() {
+        }
+        as() {
+            return this.b();
         }
-        ca() {
+        ay() {
+            let a = this.b();
+            return a.h();
         }
-        b9() {
+        b() {
+            let a = new ColorEditorVisualModelExport();
+            a.b = this.j;
+            a.a = AppearanceHelper.a(this.value);
+            a.c = this.ai;
+            return a;
         }
-        bu(a) {
+        bx(a) {
             if (null != this.gotFocus) {
                 this.gotFocus(this, a);
             }
         }
-        bw(a) {
+        bz(a) {
             if (null != this.lostFocus) {
                 this.lostFocus(this, a);
             }
         }
     }
     ColorEditor.$t = /*@__PURE__*/ markType(ColorEditor, 'ColorEditor', Base.$, [INotifyPropertyChanged_$type]);
-    ColorEditor.a5 = "M13.093 6.743a1.074 1.074 0 011.306.251l.237.237-6.4 6.4-.242-.231a1.074 1.074 0 01-.251-1.306c.446-.693 1.553-2.516.515-3.554-1.584-1.585-2.225-.94-3.809-2.528S2.714 3 3.354 2.354s2.073-.489 3.658 1.095.943 2.225 2.527 3.809c1.038 1.042 2.861-.069 3.554-.515zm6.93 5.874L15.31 7.9 8.9 14.31l4.433 4.433c-.039.159-.084.327-.137.508 0 0-.8 2.749.8 2.749s.8-2.749.8-2.749a10.75 10.75 0 01-.272-1.14L16.2 16.44a8.944 8.944 0 00-2.072-3.314s.555-.545 3.323 2.063l.811-.811-1.54-2.5 2.5 1.539z";
-    ColorEditor.n = null;
+    ColorEditor.a8 = "M13.093 6.743a1.074 1.074 0 011.306.251l.237.237-6.4 6.4-.242-.231a1.074 1.074 0 01-.251-1.306c.446-.693 1.553-2.516.515-3.554-1.584-1.585-2.225-.94-3.809-2.528S2.714 3 3.354 2.354s2.073-.489 3.658 1.095.943 2.225 2.527 3.809c1.038 1.042 2.861-.069 3.554-.515zm6.93 5.874L15.31 7.9 8.9 14.31l4.433 4.433c-.039.159-.084.327-.137.508 0 0-.8 2.749.8 2.749s.8-2.749.8-2.749a10.75 10.75 0 01-.272-1.14L16.2 16.44a8.944 8.944 0 00-2.072-3.314s.555-.545 3.323 2.063l.811-.811-1.54-2.5 2.5 1.539z";
+    ColorEditor.o = null;
     return ColorEditor;
 })();
 /**