igniteui-webcomponents-inputs 7.1.0-alpha.3 → 7.1.0-beta.0

package/fesm2015/igniteui-webcomponents-inputs.js

@@ -32877,18 +32877,19 @@ let ColorEditorView = /*@__PURE__*/ (() => {
         constructor() {
             super();
             this.a = null;
-            this.h = null;
+            this.i = null;
             this.d = null;
             this.g = new List$1(Delegate_$type, 0);
             this.e = true;
+            this._createColorEditorPanel = null;
             this.b = null;
         }
-        q() {
+        r() {
         }
         f() {
             return true;
         }
-        o(a) {
+        p(a) {
             if (a == null) {
                 for (let b of fromEnum(this.g)) {
                     b();
@@ -32899,45 +32900,57 @@ let ColorEditorView = /*@__PURE__*/ (() => {
             if (this.a.a == null) {
                 this.a.a = new DOMExecutionContext(a);
             }
-            this.h = a;
+            this.i = a;
             this.a.bj();
         }
-        m() {
+        n() {
             if (KeyFrameAnimationFactory.h == null) {
-                KeyFrameAnimationFactory.h = this.h;
+                KeyFrameAnimationFactory.h = this.i;
             }
         }
-        n() {
+        o() {
             this.e = true;
         }
-        p() {
+        q() {
             this.e = false;
         }
-        j() {
-            return this.h;
+        k() {
+            return this.i;
         }
-        i() {
-            let a = new ColorEditorPanel();
-            this.b = a;
-            let b = this.h.createElement("div");
-            let c = this.h.getSubRenderer(b);
-            a.provideContainer(c);
-            let d = this.h.getExternal(a, null, null);
-            return b;
+        get createColorEditorPanel() {
+            return this._createColorEditorPanel;
         }
-        k(a, b) {
+        set createColorEditorPanel(a) {
+            this._createColorEditorPanel = a;
+        }
+        j() {
+            if (this.createColorEditorPanel != null) {
+                let a = this.createColorEditorPanel();
+                let b = this.i.getWrapper(a);
+                this.b = (a.i);
+                return a;
+            }
+            let c = new ColorEditorPanel();
+            this.b = c;
+            let d = this.i.createElement("div");
+            let e = this.i.getSubRenderer(d);
+            c.provideContainer(e);
+            let f = this.i.getExternal(c, null, null);
+            return d;
+        }
+        l(a, b) {
             let c = a.ao;
-            c.append(this.h.getWrapper(b));
+            c.append(this.i.getWrapper(b));
         }
-        l(a) {
-            this.h.append(this.h.getWrapper(a.ao));
+        m(a) {
+            this.i.append(this.i.getWrapper(a.ao));
         }
         c(a) {
             return this.b;
         }
-        r(a) {
-            if (this.h != null) {
-                let b = this.h.rootWrapper.getNativeElement();
+        s(a) {
+            if (this.i != null) {
+                let b = this.i.rootWrapper.getNativeElement();
                 let c = (b.getBoundingClientRect());
                 if (a) {
                     c = new Rect(0, c.left + window.pageXOffset, c.top + window.pageYOffset, c.width, c.height);
@@ -32946,7 +32959,7 @@ let ColorEditorView = /*@__PURE__*/ (() => {
             }
             return null;
         }
-        s() {
+        t() {
             return new Size(1, NaN, NaN);
         }
     }
@@ -32955,9 +32968,15 @@ let ColorEditorView = /*@__PURE__*/ (() => {
 })();
 let ColorEditor = /*@__PURE__*/ (() => {
     class ColorEditor extends Base {
+        get view() {
+            return this._view;
+        }
+        set view(a) {
+            this._view = a;
+        }
         constructor() {
             super();
-            this.h = null;
+            this._view = null;
             this.s = null;
             this.r = null;
             this.e = null;
@@ -32995,14 +33014,14 @@ let ColorEditor = /*@__PURE__*/ (() => {
             NativeUIXInputsFactory.m();
             let a = new ColorEditorView();
             a.a = this;
-            this.h = a;
-            this.h.q();
+            this.view = a;
+            this.view.r();
         }
         onAttachedToUI() {
-            this.h.n();
+            this.view.o();
         }
         onDetachedFromUI() {
-            this.h.p();
+            this.view.q();
         }
         b4(a, b) {
             if (this.valueChanging != null) {
@@ -33022,11 +33041,11 @@ let ColorEditor = /*@__PURE__*/ (() => {
             this.provideContainer(null);
         }
         provideContainer(a) {
-            this.h.o(a);
+            this.view.p(a);
         }
         get u() {
             if (this.t == null) {
-                this.t = new SRProvider(this.h.h);
+                this.t = new SRProvider(this.view.i);
                 this.t.cb("ColorEditor");
             }
             return this.t;
@@ -33293,8 +33312,8 @@ let ColorEditor = /*@__PURE__*/ (() => {
             this.aa = false;
         }
         br() {
-            NativeUIWindow.h(15, runOn(this, this.b7), this.h.h);
-            NativeUIWindow.h(9, runOn(this, this.b6), this.h.h);
+            NativeUIWindow.h(15, runOn(this, this.b7), this.view.i);
+            NativeUIWindow.h(9, runOn(this, this.b6), this.view.i);
         }
         bv() {
             NativeUIWindow.i(15, runOn(this, this.b7));
@@ -33315,16 +33334,16 @@ let ColorEditor = /*@__PURE__*/ (() => {
             }
         }
         bj() {
-            NativeUIComponent.aw(this.h.j(), [12, 2, 7, 0], [2, 2, 2, 2], (a) => {
+            NativeUIComponent.aw(this.view.k(), [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.h.i();
-                this.h.k(e, f);
+                let f = this.view.j();
+                this.view.l(e, f);
                 b.bo(d);
                 d.bo(e);
-                this.h.l(c);
+                this.view.m(c);
                 b.ci = BrushUtil.l(255, 255, 255, 255);
                 b.cb = 150;
                 b.b9 = 8;
@@ -33341,7 +33360,7 @@ let ColorEditor = /*@__PURE__*/ (() => {
                 this.r.o = runOn(this, this.b0);
                 this.r.cc = BrushUtil.l(255, 0, 0, 255);
                 this.s = b;
-                this.e = this.h.c(f);
+                this.e = this.view.c(f);
                 this.e.value = this.value;
                 let g = this.e;
                 g.closed = delegateCombine(g.closed, runOn(this, this.bf));
@@ -33406,8 +33425,8 @@ let ColorEditor = /*@__PURE__*/ (() => {
                 return;
             }
             if (this.s != null) {
-                let a = this.h.r(false);
-                let b = this.h.s();
+                let a = this.view.s(false);
+                let b = this.view.t();
                 let c = b.height;
                 let d = 240;
                 let e = a.bottom + d;
@@ -33427,7 +33446,7 @@ let ColorEditor = /*@__PURE__*/ (() => {
         }
         ce(a, b) {
             {
-                let c = this.h.r(true);
+                let c = this.view.s(true);
                 this.s.cg(c, a, b);
             }
         }
@@ -34475,6 +34494,9 @@ let IgcColorEditorComponent = /*@__PURE__*/ (() => {
             this._wrapper = this._renderer;
             var colorEditor = this.i;
             this._colorEditor = colorEditor;
+            colorEditor.view.createColorEditorPanel = () => {
+                return document.createElement("igc-color-editor-panel");
+            };
             colorEditor.provideContainer(this._renderer);
             this._onChildrenChanged();
             //Checkbox.notifySizeChanged();

package/fesm5/igniteui-webcomponents-inputs.js

@@ -38992,19 +38992,20 @@ var ColorEditorView = /** @class */ /*@__PURE__*/ (function (_super) {
     function ColorEditorView() {
         var _this = _super.call(this) || this;
         _this.a = null;
-        _this.h = null;
+        _this.i = null;
         _this.d = null;
         _this.g = new List$1(Delegate_$type, 0);
         _this.e = true;
+        _this._createColorEditorPanel = null;
         _this.b = null;
         return _this;
     }
-    ColorEditorView.prototype.q = function () {
+    ColorEditorView.prototype.r = function () {
     };
     ColorEditorView.prototype.f = function () {
         return true;
     };
-    ColorEditorView.prototype.o = function (a) {
+    ColorEditorView.prototype.p = function (a) {
         var e_2, _a;
         if (a == null) {
             try {
@@ -39032,45 +39033,61 @@ var ColorEditorView = /** @class */ /*@__PURE__*/ (function (_super) {
         if (this.a.a == null) {
             this.a.a = new DOMExecutionContext(a);
         }
-        this.h = a;
+        this.i = a;
         this.a.bj();
     };
-    ColorEditorView.prototype.m = function () {
+    ColorEditorView.prototype.n = function () {
         if (KeyFrameAnimationFactory.h == null) {
-            KeyFrameAnimationFactory.h = this.h;
+            KeyFrameAnimationFactory.h = this.i;
         }
     };
-    ColorEditorView.prototype.n = function () {
+    ColorEditorView.prototype.o = function () {
         this.e = true;
     };
-    ColorEditorView.prototype.p = function () {
+    ColorEditorView.prototype.q = function () {
         this.e = false;
     };
-    ColorEditorView.prototype.j = function () {
-        return this.h;
+    ColorEditorView.prototype.k = function () {
+        return this.i;
     };
-    ColorEditorView.prototype.i = function () {
-        var a = new ColorEditorPanel();
-        this.b = a;
-        var b = this.h.createElement("div");
-        var c = this.h.getSubRenderer(b);
-        a.provideContainer(c);
-        var d = this.h.getExternal(a, null, null);
-        return b;
+    Object.defineProperty(ColorEditorView.prototype, "createColorEditorPanel", {
+        get: function () {
+            return this._createColorEditorPanel;
+        },
+        set: function (a) {
+            this._createColorEditorPanel = a;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ColorEditorView.prototype.j = function () {
+        if (this.createColorEditorPanel != null) {
+            var a = this.createColorEditorPanel();
+            var b = this.i.getWrapper(a);
+            this.b = (a.i);
+            return a;
+        }
+        var c = new ColorEditorPanel();
+        this.b = c;
+        var d = this.i.createElement("div");
+        var e = this.i.getSubRenderer(d);
+        c.provideContainer(e);
+        var f = this.i.getExternal(c, null, null);
+        return d;
     };
-    ColorEditorView.prototype.k = function (a, b) {
+    ColorEditorView.prototype.l = function (a, b) {
         var c = a.ao;
-        c.append(this.h.getWrapper(b));
+        c.append(this.i.getWrapper(b));
     };
-    ColorEditorView.prototype.l = function (a) {
-        this.h.append(this.h.getWrapper(a.ao));
+    ColorEditorView.prototype.m = function (a) {
+        this.i.append(this.i.getWrapper(a.ao));
     };
     ColorEditorView.prototype.c = function (a) {
         return this.b;
     };
-    ColorEditorView.prototype.r = function (a) {
-        if (this.h != null) {
-            var b = this.h.rootWrapper.getNativeElement();
+    ColorEditorView.prototype.s = function (a) {
+        if (this.i != null) {
+            var b = this.i.rootWrapper.getNativeElement();
             var c = (b.getBoundingClientRect());
             if (a) {
                 c = new Rect(0, c.left + window.pageXOffset, c.top + window.pageYOffset, c.width, c.height);
@@ -39079,7 +39096,7 @@ var ColorEditorView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         return null;
     };
-    ColorEditorView.prototype.s = function () {
+    ColorEditorView.prototype.t = function () {
         return new Size(1, NaN, NaN);
     };
     ColorEditorView.$t = markType(ColorEditorView, 'ColorEditorView');
@@ -39092,7 +39109,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(ColorEditor, _super);
     function ColorEditor() {
         var _this = _super.call(this) || this;
-        _this.h = null;
+        _this._view = null;
         _this.s = null;
         _this.r = null;
         _this.e = null;
@@ -39130,15 +39147,25 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
         NativeUIXInputsFactory.m();
         var a = new ColorEditorView();
         a.a = _this;
-        _this.h = a;
-        _this.h.q();
+        _this.view = a;
+        _this.view.r();
         return _this;
     }
+    Object.defineProperty(ColorEditor.prototype, "view", {
+        get: function () {
+            return this._view;
+        },
+        set: function (a) {
+            this._view = a;
+        },
+        enumerable: false,
+        configurable: true
+    });
     ColorEditor.prototype.onAttachedToUI = function () {
-        this.h.n();
+        this.view.o();
     };
     ColorEditor.prototype.onDetachedFromUI = function () {
-        this.h.p();
+        this.view.q();
     };
     ColorEditor.prototype.b4 = function (a, b) {
         if (this.valueChanging != null) {
@@ -39158,12 +39185,12 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
         this.provideContainer(null);
     };
     ColorEditor.prototype.provideContainer = function (a) {
-        this.h.o(a);
+        this.view.p(a);
     };
     Object.defineProperty(ColorEditor.prototype, "u", {
         get: function () {
             if (this.t == null) {
-                this.t = new SRProvider(this.h.h);
+                this.t = new SRProvider(this.view.i);
                 this.t.cb("ColorEditor");
             }
             return this.t;
@@ -39501,8 +39528,8 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
         this.aa = false;
     };
     ColorEditor.prototype.br = function () {
-        NativeUIWindow.h(15, runOn(this, this.b7), this.h.h);
-        NativeUIWindow.h(9, runOn(this, this.b6), this.h.h);
+        NativeUIWindow.h(15, runOn(this, this.b7), this.view.i);
+        NativeUIWindow.h(9, runOn(this, this.b6), this.view.i);
     };
     ColorEditor.prototype.bv = function () {
         NativeUIWindow.i(15, runOn(this, this.b7));
@@ -39524,16 +39551,16 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     ColorEditor.prototype.bj = function () {
         var _this = this;
-        NativeUIComponent.aw(this.h.j(), [12, 2, 7, 0], [2, 2, 2, 2], function (a) {
+        NativeUIComponent.aw(this.view.k(), [12, 2, 7, 0], [2, 2, 2, 2], function (a) {
             var b = a[0];
             var c = a[1];
             var d = a[2];
             var e = a[3];
-            var f = _this.h.i();
-            _this.h.k(e, f);
+            var f = _this.view.j();
+            _this.view.l(e, f);
             b.bo(d);
             d.bo(e);
-            _this.h.l(c);
+            _this.view.m(c);
             b.ci = BrushUtil.l(255, 255, 255, 255);
             b.cb = 150;
             b.b9 = 8;
@@ -39550,7 +39577,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
             _this.r.o = runOn(_this, _this.b0);
             _this.r.cc = BrushUtil.l(255, 0, 0, 255);
             _this.s = b;
-            _this.e = _this.h.c(f);
+            _this.e = _this.view.c(f);
             _this.e.value = _this.value;
             var g = _this.e;
             g.closed = delegateCombine(g.closed, runOn(_this, _this.bf));
@@ -39615,8 +39642,8 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
             return;
         }
         if (this.s != null) {
-            var a = this.h.r(false);
-            var b = this.h.s();
+            var a = this.view.s(false);
+            var b = this.view.t();
             var c = b.height;
             var d = 240;
             var e = a.bottom + d;
@@ -39636,7 +39663,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     ColorEditor.prototype.ce = function (a, b) {
         {
-            var c = this.h.r(true);
+            var c = this.view.s(true);
             this.s.cg(c, a, b);
         }
     };
@@ -40772,6 +40799,9 @@ var IgcColorEditorComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         _this._wrapper = _this._renderer;
         var colorEditor = _this.i;
         _this._colorEditor = colorEditor;
+        colorEditor.view.createColorEditorPanel = function () {
+            return document.createElement("igc-color-editor-panel");
+        };
         colorEditor.provideContainer(_this._renderer);
         _this._onChildrenChanged();
         //Checkbox.notifySizeChanged();

package/lib/NativeUIXInputsFactory_combined.d.ts

@@ -154,31 +154,36 @@ export declare class ColorEditorView extends Base {
     static $t: Type;
     constructor();
     a: ColorEditor;
-    q(): void;
+    r(): void;
     f(): boolean;
-    h: DomRenderer;
+    i: DomRenderer;
     private d;
     private g;
-    o(a: DomRenderer): void;
-    m(): void;
-    private e;
+    p(a: DomRenderer): void;
     n(): void;
-    p(): void;
-    j(): any;
+    private e;
+    o(): void;
+    q(): void;
+    k(): any;
+    private _createColorEditorPanel;
+    get createColorEditorPanel(): () => any;
+    set createColorEditorPanel(a: () => any);
     private b;
-    i(): any;
-    k(a: NativeUIContent, b: any): void;
-    l(a: NativeUIComponent): void;
+    j(): any;
+    l(a: NativeUIContent, b: any): void;
+    m(a: NativeUIComponent): void;
     c(a: any): ColorEditorPanel;
-    r(a: boolean): Rect;
-    s(): Size;
+    s(a: boolean): Rect;
+    t(): Size;
 }
 /**
  * @hidden
  */
 export declare class ColorEditor extends Base implements INotifyPropertyChanged {
     static $t: Type;
-    h: ColorEditorView;
+    private _view;
+    get view(): ColorEditorView;
+    set view(a: ColorEditorView);
     private static readonly a8;
     private s;
     private r;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents-inputs",
-  "version": "7.1.0-alpha.3",
+  "version": "7.1.0-beta.0",
   "description": "Ignite UI Web Components inputs components.",
   "homepage": "https://github.com/IgniteUI/igniteui-webcomponents-inputs",
   "keywords": [
@@ -14,7 +14,7 @@
     "tslib": "^2.3.1"
   },
   "peerDependencies": {
-    "igniteui-webcomponents-core": "7.1.0-alpha.3"
+    "igniteui-webcomponents-core": "7.1.0-beta.0"
   },
   "sideEffects": false,
   "typings": "igniteui-webcomponents-inputs.d.ts",