igniteui-webcomponents-layouts 1.3.3

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

@@ -0,0 +1,3012 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('tslib'), require('igniteui-webcomponents-core')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'tslib', 'igniteui-webcomponents-core'], factory) :
+    (global = global || self, factory(global['igniteui-webcomponents-layouts'] = {}, global.tslib_1, global.igniteuiWebcomponentsCore));
+}(this, (function (exports, tslib_1, igniteuiWebcomponentsCore) { 'use strict';
+
+    /*
+    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 ExpansionPanelUtilities = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(ExpansionPanelUtilities, _super);
+        function ExpansionPanelUtilities() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ExpansionPanelUtilities.a = function (a) {
+            var b = a.getNativeElement();
+            return b.checked;
+        };
+        ExpansionPanelUtilities.b = function (a, b) {
+            var c = a.getNativeElement();
+            c.checked = b;
+        };
+        ExpansionPanelUtilities.c = function (a) {
+            var b = 0;
+            if (a.altKey) {
+                b |= 1;
+            }
+            if (a.shiftKey) {
+                b |= 4;
+            }
+            if (a.ctrlKey) {
+                b |= 2;
+            }
+            return b;
+        };
+        ExpansionPanelUtilities.$t = igniteuiWebcomponentsCore.markType(ExpansionPanelUtilities, 'ExpansionPanelUtilities');
+        return ExpansionPanelUtilities;
+    }(igniteuiWebcomponentsCore.Base));
+
+    /*
+    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 OnCollapsedEventArgs = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(OnCollapsedEventArgs, _super);
+        function OnCollapsedEventArgs() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        OnCollapsedEventArgs.$t = igniteuiWebcomponentsCore.markType(OnCollapsedEventArgs, 'OnCollapsedEventArgs', igniteuiWebcomponentsCore.EventArgs.$);
+        return OnCollapsedEventArgs;
+    }(igniteuiWebcomponentsCore.EventArgs));
+
+    /*
+    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 OnExpandedEventArgs = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(OnExpandedEventArgs, _super);
+        function OnExpandedEventArgs() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        OnExpandedEventArgs.$t = igniteuiWebcomponentsCore.markType(OnExpandedEventArgs, 'OnExpandedEventArgs', igniteuiWebcomponentsCore.EventArgs.$);
+        return OnExpandedEventArgs;
+    }(igniteuiWebcomponentsCore.EventArgs));
+
+    /*
+    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 ExpansionPanelView = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(ExpansionPanelView, _super);
+        function ExpansionPanelView() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.i = null;
+            _this.p = null;
+            _this.g = null;
+            _this.f = null;
+            _this.o = null;
+            _this.k = null;
+            _this.n = null;
+            _this.m = null;
+            _this.l = null;
+            return _this;
+        }
+        Object.defineProperty(ExpansionPanelView.prototype, "q", {
+            get: function () {
+                return this.p;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanelView.prototype, "h", {
+            get: function () {
+                return this.g;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanelView.prototype, "j", {
+            get: function () {
+                return this.i;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ExpansionPanelView.prototype.ab = function () {
+            this.q.setStyleProperty("display", "flex");
+            this.q.setStyleProperty("flexDirection", "column");
+            this.q.setStyleProperty("flexWrap", "no-wrap");
+            this.q.setStyleProperty("alignItems", "left");
+        };
+        ExpansionPanelView.prototype.aj = function () {
+            var a = this.h;
+            var b = igniteuiWebcomponentsCore.ElevationHelper.e(a.q, a.bn, a.bm, a.bi);
+            this.q.setStyleProperty("box-shadow", b);
+        };
+        ExpansionPanelView.prototype.ak = function () {
+            if (null == this.q) {
+                return;
+            }
+            this.aj();
+            this.ah();
+            this.ai();
+            this.ag();
+            if (null != this.o) {
+                igniteuiWebcomponentsCore.NativeUI.j(this.o, this.h.bl);
+            }
+            if (null != this.k) {
+                igniteuiWebcomponentsCore.NativeUI.n(this.k, this.h.bj);
+            }
+            if (null != this.n) {
+                igniteuiWebcomponentsCore.NativeUI.n(this.n, this.h.bk);
+            }
+        };
+        ExpansionPanelView.prototype.a = function (a) {
+            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.k, 0, null, a);
+        };
+        ExpansionPanelView.prototype.b = function (a) {
+            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.n, 0, null, a);
+        };
+        ExpansionPanelView.prototype.c = function (a) {
+            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.o, 0, null, a);
+        };
+        ExpansionPanelView.prototype.d = function (a) {
+            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.l, 0, null, a);
+        };
+        ExpansionPanelView.prototype.e = function (a) {
+            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.m, 0, null, a);
+        };
+        ExpansionPanelView.prototype.u = function () {
+            if (igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h == null) {
+                igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h = this.j;
+            }
+        };
+        ExpansionPanelView.prototype.r = function () {
+            return this.l.outerHeight();
+        };
+        ExpansionPanelView.prototype.ac = function (a) {
+            if (a == null) {
+                this.i = null;
+                return;
+            }
+            this.i = a;
+            var b = a.rootWrapper;
+            this.y(b);
+        };
+        ExpansionPanelView.prototype.ag = function () {
+            if (null == this.f) {
+                return;
+            }
+            var a = this.h.n;
+            if (a) {
+                this.f.svgPath = ExpansionPanelView.s;
+            }
+            else {
+                this.f.svgPath = ExpansionPanelView.t;
+            }
+        };
+        ExpansionPanelView.prototype.ah = function () {
+            if (null != this.k) {
+                var a = this.h.ab;
+                this.k.setRawText(a);
+            }
+        };
+        ExpansionPanelView.prototype.ai = function () {
+            if (null != this.n) {
+                var a = this.h.ah;
+                this.n.setRawText(a);
+            }
+        };
+        ExpansionPanelView.prototype.y = function (a) {
+            this.p = a;
+            this.ab();
+        };
+        ExpansionPanelView.prototype.z = function (a) {
+            this.g = a;
+        };
+        ExpansionPanelView.prototype.aa = function () {
+        };
+        ExpansionPanelView.prototype.af = function (a) {
+            var b = this.j;
+            this.o = a;
+            var c = b.createElement("div");
+            this.o.append(c);
+            this.v(c);
+            var d = b.createElement("div");
+            d.setStyleProperty("display", "flex");
+            d.setStyleProperty("flex-direction", "column");
+            d.setStyleProperty("justify-content", "space-evenly");
+            d.setStyleProperty("align-items", "flex-start");
+            this.o.append(d);
+            var e = b.createElement("div");
+            d.append(e);
+            this.k = b.createElement("label");
+            e.append(this.k);
+            var f = b.createElement("div");
+            d.append(f);
+            this.n = b.createElement("label");
+            f.append(this.n);
+            this.o.setAttribute("tabindex", "0");
+            this.o.setStyleProperty("display", "flex");
+            this.o.setStyleProperty("flex-direction", "row");
+            c.setStyleProperty("display", "flex");
+            c.setStyleProperty("justify-content", "center");
+            c.setStyleProperty("flex-direction", "column");
+            c.setStyleProperty("margin", "0px 10px 0px 10px");
+            c.setStyleProperty("flex", "none | 0 | content");
+            this.ak();
+            this.o.listen("click", igniteuiWebcomponentsCore.runOn(this, this.w));
+            this.o.listen("keydown", igniteuiWebcomponentsCore.runOn(this, this.x));
+        };
+        ExpansionPanelView.prototype.v = function (a) {
+            var _this = this;
+            if (this.f != null) {
+                return;
+            }
+            this.i.getPortal(a, "Icon", function (b) {
+                var c = b.componentRef;
+                _this.f = (c.i);
+                _this.f.fill = ExpansionPanelView.al;
+                _this.ag();
+            }, false);
+        };
+        ExpansionPanelView.prototype.ae = function (a) {
+            var b = this.j;
+            this.m = a;
+            this.m.setAttribute("tabindex", "1");
+            this.m.setStyleProperty("overflow", "hidden");
+        };
+        ExpansionPanelView.prototype.ad = function (a) {
+            var b = this.j;
+            this.l = a;
+        };
+        ExpansionPanelView.prototype.w = function (a) {
+            var b = a.originalEvent;
+            var c = b.target;
+            this.h.a2();
+        };
+        ExpansionPanelView.prototype.x = function (a) {
+            var b = igniteuiWebcomponentsCore.BaseDOMEventProxy.cv(a);
+            var c = ExpansionPanelUtilities.c(a);
+            switch (b) {
+                case 9:
+                case 3:
+                    this.h.a2();
+                    a.preventDefault();
+                    break;
+                case 17:
+                    if (c == 1) {
+                        this.h.au();
+                        a.preventDefault();
+                    }
+                    break;
+                case 15:
+                    if (c == 1) {
+                        this.h.ar();
+                        a.preventDefault();
+                    }
+                    break;
+            }
+        };
+        ExpansionPanelView.$t = igniteuiWebcomponentsCore.markType(ExpansionPanelView, 'ExpansionPanelView');
+        ExpansionPanelView.al = igniteuiWebcomponentsCore.BrushUtil.g(255, 33, 150, 243);
+        ExpansionPanelView.t = "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z";
+        ExpansionPanelView.s = "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z";
+        return ExpansionPanelView;
+    }(igniteuiWebcomponentsCore.Base));
+    /**
+     * @hidden
+     */
+    var ExpansionPanel = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(ExpansionPanel, _super);
+        function ExpansionPanel() {
+            var _this = _super.call(this) || this;
+            _this.c = null;
+            _this.onCollapsed = null;
+            _this.onExpanded = null;
+            _this.propertyChanged = null;
+            _this.g = null;
+            _this.aa = "Caption";
+            _this.bb = null;
+            _this.a4 = ExpansionPanel.bs;
+            _this.a9 = null;
+            _this.ba = null;
+            _this.ag = igniteuiWebcomponentsCore.stringEmpty();
+            _this.be = null;
+            _this.a5 = ExpansionPanel.bt;
+            _this.bc = null;
+            _this.bd = null;
+            _this.p = -1;
+            _this.o = ExpansionPanel.r;
+            _this.m = true;
+            _this.bf = null;
+            _this.a6 = ExpansionPanel.bu;
+            _this.bg = null;
+            _this.bh = null;
+            _this.a8 = ExpansionPanel.bw;
+            _this.a7 = ExpansionPanel.bv;
+            _this.a3 = ExpansionPanel.br;
+            var a = _this.f();
+            _this.g = a;
+            a.z(_this);
+            return _this;
+        }
+        ExpansionPanel.prototype.aw = function (a, b, c) {
+            if (this.propertyChanged != null) {
+                this.propertyChanged(this, new igniteuiWebcomponentsCore.PropertyChangedEventArgs(a));
+            }
+            this.ax(a, b, c);
+        };
+        Object.defineProperty(ExpansionPanel.prototype, "ab", {
+            get: function () {
+                return this.aa;
+            },
+            set: function (a) {
+                if (a == this.aa) {
+                    return;
+                }
+                var b = this.aa;
+                this.aa = a;
+                this.aw("Caption", b, this.aa);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "bq", {
+            get: function () {
+                return this.bb;
+            },
+            set: function (a) {
+                var b = this.bb;
+                this.bb = a;
+                if (b != this.bb) {
+                    this.aw("CaptionTextColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "bj", {
+            get: function () {
+                return this.a4;
+            },
+            set: function (a) {
+                var b = this.a4;
+                this.a4 = a;
+                if (b != this.a4) {
+                    this.aw("ActualCaptionTextColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "bo", {
+            get: function () {
+                return this.a9;
+            },
+            set: function (a) {
+                var b = this.a9;
+                this.a9 = a;
+                if (b != this.a9) {
+                    this.aw("CaptionCollapsedTextColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "bp", {
+            get: function () {
+                return this.ba;
+            },
+            set: function (a) {
+                var b = this.ba;
+                this.ba = a;
+                if (b != this.ba) {
+                    this.aw("CaptionExpandedTextColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "ah", {
+            get: function () {
+                return this.ag;
+            },
+            set: function (a) {
+                if (a == this.ag) {
+                    return;
+                }
+                var b = this.ag;
+                this.ag = a;
+                this.aw("Description", b, this.ag);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "bz", {
+            get: function () {
+                return this.be;
+            },
+            set: function (a) {
+                var b = this.be;
+                this.be = a;
+                if (b != this.be) {
+                    this.aw("DescriptionTextColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "bk", {
+            get: function () {
+                return this.a5;
+            },
+            set: function (a) {
+                var b = this.a5;
+                this.a5 = a;
+                if (b != this.a5) {
+                    this.aw("ActualDescriptionTextColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "bx", {
+            get: function () {
+                return this.bc;
+            },
+            set: function (a) {
+                var b = this.bc;
+                this.bc = a;
+                if (b != this.bc) {
+                    this.aw("DescriptionCollapsedTextColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "by", {
+            get: function () {
+                return this.bd;
+            },
+            set: function (a) {
+                var b = this.bd;
+                this.bd = a;
+                if (b != this.bd) {
+                    this.aw("DescriptionExpandedTextColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "s", {
+            get: function () {
+                return this.p;
+            },
+            set: function (a) {
+                var b = this.p;
+                this.p = a;
+                if (b != this.p) {
+                    this.aw("Elevation", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "q", {
+            get: function () {
+                return this.o;
+            },
+            set: function (a) {
+                var b = this.o;
+                this.o = a;
+                if (b != this.o) {
+                    this.aw("ActualElevation", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "n", {
+            get: function () {
+                return this.m;
+            },
+            set: function (a) {
+                var _this = this;
+                if (a == this.m) {
+                    return;
+                }
+                this.at();
+                var b = this.m;
+                this.m = a;
+                var c = this.h(this.m);
+                var d = this.i(this.m);
+                var e = this.j(this.m);
+                var f = this.k(this.m);
+                var g = this.l(this.m);
+                c.play();
+                d.play();
+                e.play();
+                f.play();
+                g.play();
+                c.finished.f(function (h) { return c.commitStyles(); });
+                d.finished.f(function (h) { return d.commitStyles(); });
+                e.finished.f(function (h) { return e.commitStyles(); });
+                f.finished.f(function (h) { return f.commitStyles(); });
+                g.finished.f(function (h) {
+                    g.commitStyles();
+                    _this.aw("Expanded", b, _this.m);
+                    if (_this.m) {
+                        if (_this.onExpanded != null) {
+                            _this.onExpanded(_this, new OnExpandedEventArgs());
+                        }
+                        else if (_this.onCollapsed != null) {
+                            _this.onCollapsed(_this, new OnCollapsedEventArgs());
+                        }
+                    }
+                });
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "b6", {
+            get: function () {
+                return this.bf;
+            },
+            set: function (a) {
+                var b = this.bf;
+                this.bf = a;
+                if (b != this.bf) {
+                    this.aw("HeaderBackgroundColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "bl", {
+            get: function () {
+                return this.a6;
+            },
+            set: function (a) {
+                var b = this.a6;
+                this.a6 = a;
+                if (b != this.a6) {
+                    this.aw("ActualHeaderBackgroundColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "b7", {
+            get: function () {
+                return this.bg;
+            },
+            set: function (a) {
+                var b = this.bg;
+                this.bg = a;
+                if (b != this.bg) {
+                    this.aw("HeaderCollapsedBackgroundColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "b8", {
+            get: function () {
+                return this.bh;
+            },
+            set: function (a) {
+                var b = this.bh;
+                this.bh = a;
+                if (b != this.bh) {
+                    this.aw("HeaderExpandedBackgroundColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "bn", {
+            get: function () {
+                return this.a8;
+            },
+            set: function (a) {
+                var b = this.a8;
+                this.a8 = a;
+                if (b != this.a8) {
+                    this.aw("ActualUmbraShadowColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "bm", {
+            get: function () {
+                return this.a7;
+            },
+            set: function (a) {
+                var b = this.a7;
+                this.a7 = a;
+                if (b != this.a7) {
+                    this.aw("ActualPenumbraShadowColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExpansionPanel.prototype, "bi", {
+            get: function () {
+                return this.a3;
+            },
+            set: function (a) {
+                var b = this.a3;
+                this.a3 = a;
+                if (b != this.a3) {
+                    this.aw("ActualAmbientShadowColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ExpansionPanel.prototype.f = function () {
+            return new ExpansionPanelView();
+        };
+        ExpansionPanel.prototype.ax = function (a, b, c) {
+            switch (a) {
+                case "CaptionTextColor":
+                case "CaptionExpandedTextColor":
+                case "CaptionCollapsedTextColor":
+                case "DescriptionTextColor":
+                case "DescriptionExpandedTextColor":
+                case "DescriptionCollapsedTextColor":
+                case "HeaderBackgroundColor":
+                case "HeaderCollapsedBackgroundColor":
+                case "HeaderExpandedBackgroundColor":
+                case "Expanded":
+                    var d = this.bl;
+                    var e = this.b4();
+                    var f = this.bj;
+                    var g = this.b0();
+                    var h = this.bk;
+                    var i = this.b2();
+                    var j = (d != e) || (f != g) || (h != i);
+                    if (j) {
+                        this.bl = e;
+                        this.bj = g;
+                        this.bk = i;
+                    }
+                    else if (a == "Expanded") {
+                        this.g.ak();
+                    }
+                    break;
+                case "Elevation":
+                    this.q = this.s == -1 ? ExpansionPanel.r : this.s;
+                    break;
+                case "ActualElevation":
+                case "ActualHeaderBackgroundColor":
+                case "ActualCaptionTextColor":
+                case "ActualDescriptionTextColor":
+                case "ActualUmbraShadowColor":
+                case "ActualPenumbraShadowColor":
+                case "ActualAmbientShadowColor":
+                case "Caption":
+                case "Description":
+                    this.g.ak();
+                    break;
+            }
+        };
+        ExpansionPanel.prototype.h = function (a) {
+            var b = this.bj;
+            var c = this.b1(a);
+            var d = a ? this.b() : this.a();
+            var e = this.g.a(d);
+            var f = [new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(7, b)];
+            var g = [new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(7, c)];
+            e.m.apply(e, tslib_1.__spread(f));
+            e.m.apply(e, tslib_1.__spread(g));
+            return igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(e);
+        };
+        ExpansionPanel.prototype.i = function (a) {
+            var b = this.bk;
+            var c = this.b3(a);
+            var d = a ? this.b() : this.a();
+            var e = this.g.b(d);
+            var f = [new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(7, b)];
+            var g = [new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(7, c)];
+            e.m.apply(e, tslib_1.__spread(f));
+            e.m.apply(e, tslib_1.__spread(g));
+            return igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(e);
+        };
+        ExpansionPanel.prototype.j = function (a) {
+            var b = this.bl;
+            var c = this.b5(a);
+            var d = a ? this.b() : this.a();
+            var e = this.g.c(d);
+            var f = [new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(2, b)];
+            var g = [new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(2, c)];
+            e.m.apply(e, tslib_1.__spread(f));
+            e.m.apply(e, tslib_1.__spread(g));
+            return igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(e);
+        };
+        ExpansionPanel.prototype.k = function (a) {
+            var b = this.g.r();
+            if (b <= 0) {
+                b = 500;
+            }
+            var c = a ? -b : 0;
+            var d = a ? 0 : -b;
+            var e = a ? 0 : 1;
+            var f = a ? 1 : 0;
+            var g = a ? this.b() : this.a();
+            var h = new igniteuiWebcomponentsCore.TranslateTransform();
+            h.k = c;
+            var i = new igniteuiWebcomponentsCore.TranslateTransform();
+            i.k = d;
+            var j = this.g.d(g);
+            var k = [new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(14, h), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, e)];
+            var l = [new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(14, i), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, f)];
+            j.m.apply(j, tslib_1.__spread(k));
+            j.m.apply(j, tslib_1.__spread(l));
+            return igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(j);
+        };
+        ExpansionPanel.prototype.l = function (a) {
+            var b = this.g.r();
+            if (b <= 0) {
+                b = 500;
+            }
+            var c = a ? 0 : b;
+            var d = a ? b : 0;
+            var e = a ? this.b() : this.a();
+            var f = this.g.e(e);
+            var g = [new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(10, c)];
+            var h = [new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(10, d)];
+            f.m.apply(f, tslib_1.__spread(g));
+            f.m.apply(f, tslib_1.__spread(h));
+            return igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(f);
+        };
+        ExpansionPanel.prototype.a = function () {
+            var a = new igniteuiWebcomponentsCore.AnimationKeyFrameEffectTiming();
+            a.g = 300;
+            a.b = 3;
+            return a;
+        };
+        ExpansionPanel.prototype.b = function () {
+            var a = new igniteuiWebcomponentsCore.AnimationKeyFrameEffectTiming();
+            a.g = 300;
+            a.b = 3;
+            return a;
+        };
+        ExpansionPanel.prototype.at = function () {
+            this.g.u();
+        };
+        ExpansionPanel.prototype.b0 = function () {
+            return this.b1(this.n);
+        };
+        ExpansionPanel.prototype.b1 = function (a) {
+            var b;
+            var c = null;
+            c = a ? this.bp : this.bo;
+            if (null != c) {
+                b = c;
+            }
+            else {
+                b = null != this.bq ? this.bq : ExpansionPanel.bs;
+            }
+            return b;
+        };
+        ExpansionPanel.prototype.b2 = function () {
+            return this.b3(this.n);
+        };
+        ExpansionPanel.prototype.b3 = function (a) {
+            var b;
+            var c = null;
+            c = a ? this.by : this.bx;
+            if (null != c) {
+                b = c;
+            }
+            else {
+                b = null != this.bz ? this.bz : ExpansionPanel.bt;
+            }
+            return b;
+        };
+        ExpansionPanel.prototype.b4 = function () {
+            return this.b5(this.n);
+        };
+        ExpansionPanel.prototype.b5 = function (a) {
+            var b;
+            var c = null;
+            c = a ? this.b8 : this.b7;
+            if (null != c) {
+                b = c;
+            }
+            else {
+                b = null != this.b6 ? this.b6 : ExpansionPanel.bu;
+            }
+            return b;
+        };
+        ExpansionPanel.prototype.ar = function () {
+            this.n = false;
+        };
+        ExpansionPanel.prototype.destroy = function () {
+            this.provideRenderer(null);
+        };
+        ExpansionPanel.prototype.au = function () {
+            this.n = true;
+        };
+        ExpansionPanel.prototype.notifySizeChanged = function () {
+        };
+        ExpansionPanel.prototype.provideHeader = function (a) {
+            this.g.af(a);
+        };
+        ExpansionPanel.prototype.provideContentAreaOuter = function (a) {
+            this.g.ae(a);
+        };
+        ExpansionPanel.prototype.provideContentAreaInner = function (a) {
+            this.g.ad(a);
+        };
+        ExpansionPanel.prototype.provideRenderer = function (a) {
+            this.g.ac(a);
+        };
+        ExpansionPanel.prototype.a2 = function () {
+            this.n = !this.n;
+        };
+        ExpansionPanel.$t = igniteuiWebcomponentsCore.markType(ExpansionPanel, 'ExpansionPanel', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type]);
+        ExpansionPanel.bs = igniteuiWebcomponentsCore.BrushUtil.g(188, 0, 0, 0);
+        ExpansionPanel.bt = igniteuiWebcomponentsCore.BrushUtil.g(188, 0, 0, 0);
+        ExpansionPanel.r = 2;
+        ExpansionPanel.bu = igniteuiWebcomponentsCore.BrushUtil.g(255, 245, 245, 245);
+        ExpansionPanel.bw = igniteuiWebcomponentsCore.BrushUtil.g(66, 0, 0, 0);
+        ExpansionPanel.bv = igniteuiWebcomponentsCore.BrushUtil.g(30, 0, 0, 0);
+        ExpansionPanel.br = igniteuiWebcomponentsCore.BrushUtil.g(20, 0, 0, 0);
+        return ExpansionPanel;
+    }(igniteuiWebcomponentsCore.Base));
+
+    /*
+    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.
+    */
+
+    var IgcOnExpandedEventArgs = /** @class */ /*@__PURE__*/ (function () {
+        function IgcOnExpandedEventArgs() {
+            this._implementation = this.createImplementation();
+            this._implementation.externalObject = this;
+            this.onImplementationCreated();
+        }
+        IgcOnExpandedEventArgs.prototype.createImplementation = function () {
+            return new OnExpandedEventArgs();
+        };
+        Object.defineProperty(IgcOnExpandedEventArgs.prototype, "i", {
+            /**
+             * @hidden
+             */
+            get: function () {
+                return this._implementation;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcOnExpandedEventArgs.prototype.onImplementationCreated = function () {
+        };
+        IgcOnExpandedEventArgs.prototype._provideImplementation = function (i) {
+            this._implementation = i;
+            this._implementation.externalObject = this;
+            this.onImplementationCreated();
+        };
+        return IgcOnExpandedEventArgs;
+    }());
+
+    var IgcOnCollapsedEventArgs = /** @class */ /*@__PURE__*/ (function () {
+        function IgcOnCollapsedEventArgs() {
+            this._implementation = this.createImplementation();
+            this._implementation.externalObject = this;
+            this.onImplementationCreated();
+        }
+        IgcOnCollapsedEventArgs.prototype.createImplementation = function () {
+            return new OnCollapsedEventArgs();
+        };
+        Object.defineProperty(IgcOnCollapsedEventArgs.prototype, "i", {
+            /**
+             * @hidden
+             */
+            get: function () {
+                return this._implementation;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcOnCollapsedEventArgs.prototype.onImplementationCreated = function () {
+        };
+        IgcOnCollapsedEventArgs.prototype._provideImplementation = function (i) {
+            this._implementation = i;
+            this._implementation.externalObject = this;
+            this.onImplementationCreated();
+        };
+        return IgcOnCollapsedEventArgs;
+    }());
+
+    var IgcExpansionPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(IgcExpansionPanelComponent, _super);
+        function IgcExpansionPanelComponent() {
+            var _this = _super.call(this) || this;
+            _this._implementation = null;
+            _this._disconnected = false;
+            _this._settingAttributes = false;
+            _this._attached = false;
+            _this._queuedSetAttributes = [];
+            _this._updatingFromAttribute = false;
+            _this.__p = null;
+            _this._hasUserValues = new Set();
+            _this._stylingContainer = null;
+            _this._stylingParent = null;
+            _this._inStyling = false;
+            _this._onCollapsed = null;
+            _this._onCollapsed_wrapped = null;
+            _this._onExpanded = null;
+            _this._onExpanded_wrapped = null;
+            if (_this._styling) {
+                igniteuiWebcomponentsCore.NamePatcher.ensureStylablePatched(Object.getPrototypeOf(_this));
+            }
+            _this._implementation = _this.createImplementation();
+            _this._portalManager = new igniteuiWebcomponentsCore.PortalManager("iconContent");
+            _this._webComponentRenderer = new igniteuiWebcomponentsCore.WebComponentRenderer(_this, document, true, {}, _this._portalManager);
+            _this._mainDiv = _this._webComponentRenderer.createElement("div");
+            _this._webComponentRenderer.updateRoot(_this._mainDiv);
+            var header = _this._webComponentRenderer.createElement("div");
+            header.setAttribute("key", "expansionPanelHeaderArea");
+            var contentOuter = _this._webComponentRenderer.createElement("div");
+            contentOuter.setAttribute("key", "expansionPanelContentAreaOuter");
+            var contentInner = _this._webComponentRenderer.createElement("div");
+            contentInner.setAttribute("key", "expansionPanelContentAreaInner");
+            contentOuter.append(contentInner);
+            _this._mainDiv.append(header);
+            _this._mainDiv.append(contentOuter);
+            var mut = new MutationObserver(function (list) {
+                var e_1, _b;
+                try {
+                    for (var list_1 = tslib_1.__values(list), list_1_1 = list_1.next(); !list_1_1.done; list_1_1 = list_1.next()) {
+                        var mutation = list_1_1.value;
+                        if (mutation.type == 'childList') {
+                            for (var i = 0; i < _this.childNodes.length; i++) {
+                                var child = _this.childNodes[i];
+                                if (child != _this._mainDiv.getNativeElement() &&
+                                    child !== header.getNativeElement() &&
+                                    child !== contentOuter.getNativeElement() &&
+                                    child !== contentInner.getNativeElement()) {
+                                    //TODO: maybe hide and clone this, allow for dynamic removal of content, etc.
+                                    child.remove();
+                                    contentInner.append(_this._webComponentRenderer.getWrapper(child));
+                                }
+                            }
+                        }
+                    }
+                }
+                catch (e_1_1) {
+                    e_1 = { error: e_1_1 };
+                }
+                finally {
+                    try {
+                        if (list_1_1 && !list_1_1.done && (_b = list_1.return))
+                            _b.call(list_1);
+                    }
+                    finally {
+                        if (e_1)
+                            throw e_1.error;
+                    }
+                }
+            });
+            mut.observe(_this, {
+                childList: true
+            });
+            _this.i.provideRenderer(_this._webComponentRenderer);
+            _this.i.provideHeader(_this._webComponentRenderer.getWrapper(header));
+            _this.i.provideContentAreaOuter(_this._webComponentRenderer.getWrapper(contentOuter));
+            _this.i.provideContentAreaInner(_this._webComponentRenderer.getWrapper(contentInner));
+            return _this;
+        }
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "height", {
+            get: function () {
+                return this._height;
+            },
+            set: function (value) {
+                this._height = value;
+                this.style.height = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "width", {
+            get: function () {
+                return this._width;
+            },
+            set: function (value) {
+                this._width = value;
+                this.style.width = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        // supports angular themes or custom properties set in CSS
+        IgcExpansionPanelComponent.prototype.updateStyle = function () {
+            this._styling(this, this);
+        };
+        IgcExpansionPanelComponent.prototype.destroy = function () {
+            this._implementation.destroy();
+            this._webComponentRenderer.destroy();
+        };
+        IgcExpansionPanelComponent.prototype.createImplementation = function () {
+            return new ExpansionPanel();
+        };
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "i", {
+            get: function () {
+                return this._implementation;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcExpansionPanelComponent.prototype.disconnectedCallback = function () {
+            this._disconnected = true;
+        };
+        IgcExpansionPanelComponent.prototype.connectedCallback = function () {
+            if (this._disconnected) {
+                this._disconnected = false;
+                return;
+            }
+            this.classList.add("ig-expansion-panel");
+            this.classList.add("igr-expansion-panel");
+            this.appendChild(this._mainDiv.getNativeElement());
+            this._attached = true;
+            this.style.display = "block";
+            this.style.height = this._height;
+            this.style.width = this._width;
+            this._flushQueuedAttributes();
+            // supports themes or custom properties set in CSS
+            this._styling(this, this);
+            this.afterContentInit();
+        };
+        IgcExpansionPanelComponent.prototype.afterContentInit = function () {
+        };
+        IgcExpansionPanelComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
+            this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
+        };
+        IgcExpansionPanelComponent.prototype._flushQueuedAttributes = function () {
+            this._settingAttributes = true;
+            for (var i = 0; i < this._queuedSetAttributes.length; i++) {
+                this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
+            }
+            this._settingAttributes = false;
+            this._queuedSetAttributes.length = 0;
+        };
+        IgcExpansionPanelComponent.prototype._a = function (attrName, attrValue) {
+            if (this._updatingFromAttribute) {
+                return;
+            }
+            if (attrValue) {
+                attrValue = attrValue.toString();
+            }
+            this._settingAttributes = true;
+            attrName = igniteuiWebcomponentsCore.toSpinal(attrName);
+            if (this._attached) {
+                this.setAttribute(attrName, attrValue);
+            }
+            else {
+                this._enqueueSetAttribute(attrName, attrValue);
+            }
+            this._settingAttributes = false;
+        };
+        Object.defineProperty(IgcExpansionPanelComponent, "observedAttributes", {
+            get: function () {
+                if (IgcExpansionPanelComponent._observedAttributesIgcExpansionPanelComponent == null) {
+                    var names = igniteuiWebcomponentsCore.getAllPropertyNames(IgcExpansionPanelComponent);
+                    for (var i = 0; i < names.length; i++) {
+                        names[i] = igniteuiWebcomponentsCore.toSpinal(names[i]);
+                    }
+                    IgcExpansionPanelComponent._observedAttributesIgcExpansionPanelComponent = names;
+                }
+                return IgcExpansionPanelComponent._observedAttributesIgcExpansionPanelComponent;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcExpansionPanelComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
+            if (this._settingAttributes) {
+                return;
+            }
+            var setName = igniteuiWebcomponentsCore.fromSpinal(name);
+            this._updatingFromAttribute = true;
+            this[setName] = newValue;
+            this._updatingFromAttribute = false;
+        };
+        IgcExpansionPanelComponent.register = function () {
+            if (!IgcExpansionPanelComponent._isElementRegistered) {
+                IgcExpansionPanelComponent._isElementRegistered = true;
+                igniteuiWebcomponentsCore.RegisterElementHelper.registerElement(IgcExpansionPanelComponent.htmlTagName, IgcExpansionPanelComponent);
+            }
+        };
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "caption", {
+            /**
+         * Gets / sets the caption to display in the header area.
+        */
+            get: function () {
+                return this.i.ab;
+            },
+            set: function (v) {
+                this.i.ab = v;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "captionTextColor", {
+            /**
+             * Gets or sets the color to use for the header caption text.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.bq);
+            },
+            set: function (v) {
+                this.i.bq = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("captionTextColor", igniteuiWebcomponentsCore.brushToString(this.i.bq));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "actualCaptionTextColor", {
+            /**
+             * Gets or sets the color to use for the actual header caption text.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.bj);
+            },
+            set: function (v) {
+                this.i.bj = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualCaptionTextColor", igniteuiWebcomponentsCore.brushToString(this.i.bj));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "captionCollapsedTextColor", {
+            /**
+             * Gets or sets the color to use for the header caption text when the panel is collapsed.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.bo);
+            },
+            set: function (v) {
+                this.i.bo = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("captionCollapsedTextColor", igniteuiWebcomponentsCore.brushToString(this.i.bo));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "captionExpandedTextColor", {
+            /**
+             * Gets or sets the color to use for the header caption text when the panel is expanded.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.bp);
+            },
+            set: function (v) {
+                this.i.bp = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("captionExpandedTextColor", igniteuiWebcomponentsCore.brushToString(this.i.bp));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "description", {
+            /**
+             * Gets / sets the description to display in the header area.
+            */
+            get: function () {
+                return this.i.ah;
+            },
+            set: function (v) {
+                this.i.ah = v;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "descriptionTextColor", {
+            /**
+             * Gets or sets the color to use for the header description text.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.bz);
+            },
+            set: function (v) {
+                this.i.bz = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("descriptionTextColor", igniteuiWebcomponentsCore.brushToString(this.i.bz));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "actualDescriptionTextColor", {
+            /**
+             * Gets or sets the color to use for the actual header description text.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.bk);
+            },
+            set: function (v) {
+                this.i.bk = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualDescriptionTextColor", igniteuiWebcomponentsCore.brushToString(this.i.bk));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "descriptionCollapsedTextColor", {
+            /**
+             * Gets or sets the color to use for the header description text when the panel is collapsed.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.bx);
+            },
+            set: function (v) {
+                this.i.bx = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("descriptionCollapsedTextColor", igniteuiWebcomponentsCore.brushToString(this.i.bx));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "descriptionExpandedTextColor", {
+            /**
+             * Gets or sets the color to use for the header description text when the panel is expanded.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.by);
+            },
+            set: function (v) {
+                this.i.by = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("descriptionExpandedTextColor", igniteuiWebcomponentsCore.brushToString(this.i.by));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "elevation", {
+            /**
+             * Gets or sets the elevation to use for the button regardless of type.
+            */
+            get: function () {
+                return this.i.s;
+            },
+            set: function (v) {
+                this.i.s = +v;
+                this._a("elevation", this.i.s);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "actualElevation", {
+            /**
+             * Gets or sets the elevation of the border shadow
+            */
+            get: function () {
+                return this.i.q;
+            },
+            set: function (v) {
+                this.i.q = +v;
+                this._a("actualElevation", this.i.q);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "expanded", {
+            /**
+             * Gets / sets the expanded state of the panel.
+            */
+            get: function () {
+                return this.i.n;
+            },
+            set: function (v) {
+                this.i.n = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("expanded", this.i.n);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "headerBackgroundColor", {
+            /**
+             * Gets or sets the color to use for the background of the header.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.b6);
+            },
+            set: function (v) {
+                this.i.b6 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("headerBackgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.b6));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "actualHeaderBackgroundColor", {
+            /**
+             * Gets or sets the color to use for the actual background of the header.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.bl);
+            },
+            set: function (v) {
+                this.i.bl = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualHeaderBackgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.bl));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "headerCollapsedBackgroundColor", {
+            /**
+             * Gets or sets the color to use for the background of the header when the panel is expanded.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.b7);
+            },
+            set: function (v) {
+                this.i.b7 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("headerCollapsedBackgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.b7));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "headerExpandedBackgroundColor", {
+            /**
+             * Gets or sets the color to use for the background of the header when the panel is expanded.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.b8);
+            },
+            set: function (v) {
+                this.i.b8 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("headerExpandedBackgroundColor", igniteuiWebcomponentsCore.brushToString(this.i.b8));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "actualUmbraShadowColor", {
+            /**
+             * Gets or sets the color to use for the check mark when the checkbox is checked.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.bn);
+            },
+            set: function (v) {
+                this.i.bn = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualUmbraShadowColor", igniteuiWebcomponentsCore.brushToString(this.i.bn));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "actualPenumbraShadowColor", {
+            /**
+             * Gets or sets the color to use for the check mark when the checkbox is checked.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.bm);
+            },
+            set: function (v) {
+                this.i.bm = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualPenumbraShadowColor", igniteuiWebcomponentsCore.brushToString(this.i.bm));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "actualAmbientShadowColor", {
+            /**
+             * Gets or sets the color to use for the check mark when the checkbox is checked.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.bi);
+            },
+            set: function (v) {
+                this.i.bi = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualAmbientShadowColor", igniteuiWebcomponentsCore.brushToString(this.i.bi));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcExpansionPanelComponent.prototype.findByName = function (name) {
+            return null;
+        };
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "hasUserValues", {
+            get: function () {
+                return this._hasUserValues;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcExpansionPanelComponent.prototype.__m = function (propertyName) {
+            if (!this._inStyling) {
+                this._hasUserValues.add(propertyName);
+            }
+        };
+        IgcExpansionPanelComponent.prototype._styling = function (container, component, parent) {
+            if (this._inStyling) {
+                return;
+            }
+            this._inStyling = true;
+            this._stylingContainer = container;
+            this._stylingParent = component;
+            var genericPrefix = "";
+            var typeName = this.i.$type.name;
+            if (typeName.indexOf("Xam") === 0) {
+                typeName = typeName.substring(3);
+            }
+            genericPrefix = igniteuiWebcomponentsCore.toSpinal("ExpansionPanelComponent");
+            var additionalPrefixes = [];
+            var prefix = igniteuiWebcomponentsCore.toSpinal(typeName);
+            additionalPrefixes.push(prefix + "-");
+            var b = this.i.$type.baseType;
+            while (b && b.name != "Object" &&
+                b.name != "Base" &&
+                b.name != "Control" &&
+                b.Name != "DependencyObject" &&
+                b.Name != "FrameworkElement") {
+                typeName = b.name;
+                if (typeName.indexOf("Xam") === 0) {
+                    typeName = typeName.substring(3);
+                }
+                var basePrefix = igniteuiWebcomponentsCore.toSpinal(typeName);
+                additionalPrefixes.push(basePrefix + "-");
+                b = b.baseType;
+            }
+            if (parent) {
+                var parentTypeName = parent.i.$type.name;
+                if (parentTypeName.indexOf("Xam") === 0) {
+                    parentTypeName = parentTypeName.substring(3);
+                }
+                var parentPrefix = igniteuiWebcomponentsCore.toSpinal(parentTypeName);
+                additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
+                additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
+            }
+            igniteuiWebcomponentsCore.initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
+            if (this._otherStyling) {
+                this._otherStyling(container, component, parent);
+            }
+            this._inStyling = false;
+        };
+        /**
+     * Collapses the contents of the expansion panel.
+
+    */
+        IgcExpansionPanelComponent.prototype.collapse = function () {
+            this.i.ar();
+        };
+        /**
+         * Expands the contents of the expansion panel.
+        
+        */
+        IgcExpansionPanelComponent.prototype.expand = function () {
+            this.i.au();
+        };
+        /**
+         * Toggles the expanded state of the expansion panel.
+        
+        */
+        IgcExpansionPanelComponent.prototype.toggle = function () {
+            this.i.a2();
+        };
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "onCollapsed", {
+            /**
+             * Fires when the expansion panel is collapsed.
+            */
+            get: function () {
+                return this._onCollapsed;
+            },
+            set: function (ev) {
+                var _this = this;
+                if (this._onCollapsed_wrapped !== null) {
+                    this.i.onCollapsed = igniteuiWebcomponentsCore.delegateRemove(this.i.onCollapsed, this._onCollapsed_wrapped);
+                    this._onCollapsed_wrapped = null;
+                    this._onCollapsed = null;
+                }
+                this._onCollapsed = ev;
+                this._onCollapsed_wrapped = function (o, e) {
+                    var outerArgs = new IgcOnCollapsedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (_this.beforeOnCollapsed) {
+                        _this.beforeOnCollapsed(_this, outerArgs);
+                    }
+                    if (_this._onCollapsed) {
+                        _this._onCollapsed(_this, outerArgs);
+                    }
+                };
+                this.i.onCollapsed = igniteuiWebcomponentsCore.delegateCombine(this.i.onCollapsed, this._onCollapsed_wrapped);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcExpansionPanelComponent.prototype, "onExpanded", {
+            get: function () {
+                return this._onExpanded;
+            },
+            set: function (ev) {
+                var _this = this;
+                if (this._onExpanded_wrapped !== null) {
+                    this.i.onExpanded = igniteuiWebcomponentsCore.delegateRemove(this.i.onExpanded, this._onExpanded_wrapped);
+                    this._onExpanded_wrapped = null;
+                    this._onExpanded = null;
+                }
+                this._onExpanded = ev;
+                this._onExpanded_wrapped = function (o, e) {
+                    var outerArgs = new IgcOnExpandedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (_this.beforeOnExpanded) {
+                        _this.beforeOnExpanded(_this, outerArgs);
+                    }
+                    if (_this._onExpanded) {
+                        _this._onExpanded(_this, outerArgs);
+                    }
+                };
+                this.i.onExpanded = igniteuiWebcomponentsCore.delegateCombine(this.i.onExpanded, this._onExpanded_wrapped);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcExpansionPanelComponent._observedAttributesIgcExpansionPanelComponent = null;
+        IgcExpansionPanelComponent.htmlTagName = "igc-expansion-panel";
+        IgcExpansionPanelComponent._isElementRegistered = false;
+        return IgcExpansionPanelComponent;
+    }(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.
+    */
+    var IgcExpansionPanelModule = /** @class */ /*@__PURE__*/ (function () {
+        function IgcExpansionPanelModule() {
+        }
+        IgcExpansionPanelModule.register = function () {
+            IgcExpansionPanelComponent.register();
+            igniteuiWebcomponentsCore.TypeRegistrar.registerCons('IgcExpansionPanelComponent', IgcExpansionPanelComponent);
+            igniteuiWebcomponentsCore.TypeRegistrar.registerCons('IgcExpansionPanelComponent', IgcExpansionPanelComponent);
+            igniteuiWebcomponentsCore.TypeRegistrar.register('ExpansionPanel', ExpansionPanel.$type);
+        };
+        return IgcExpansionPanelModule;
+    }());
+
+    /*
+    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 Popup_OuterAnimationInfo = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(Popup_OuterAnimationInfo, _super);
+        function Popup_OuterAnimationInfo() {
+            var _this = _super.call(this) || this;
+            _this.c = 0;
+            _this.d = 0;
+            _this.a = 0;
+            _this.b = 0;
+            return _this;
+        }
+        Popup_OuterAnimationInfo.$t = igniteuiWebcomponentsCore.markStruct(Popup_OuterAnimationInfo, 'Popup_OuterAnimationInfo');
+        return Popup_OuterAnimationInfo;
+    }(igniteuiWebcomponentsCore.ValueType));
+
+    /*
+    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 Popup_InnerAnimationInfo = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(Popup_InnerAnimationInfo, _super);
+        function Popup_InnerAnimationInfo() {
+            var _this = _super.call(this) || this;
+            _this.a = 0;
+            _this.b = 0;
+            return _this;
+        }
+        Popup_InnerAnimationInfo.$t = igniteuiWebcomponentsCore.markStruct(Popup_InnerAnimationInfo, 'Popup_InnerAnimationInfo');
+        return Popup_InnerAnimationInfo;
+    }(igniteuiWebcomponentsCore.ValueType));
+
+    /*
+    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 OnClosedEventArgs = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(OnClosedEventArgs, _super);
+        function OnClosedEventArgs() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        OnClosedEventArgs.$t = igniteuiWebcomponentsCore.markType(OnClosedEventArgs, 'OnClosedEventArgs', igniteuiWebcomponentsCore.EventArgs.$);
+        return OnClosedEventArgs;
+    }(igniteuiWebcomponentsCore.EventArgs));
+
+    /*
+    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 OnPopupEventArgs = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(OnPopupEventArgs, _super);
+        function OnPopupEventArgs() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        OnPopupEventArgs.$t = igniteuiWebcomponentsCore.markType(OnPopupEventArgs, 'OnPopupEventArgs', igniteuiWebcomponentsCore.EventArgs.$);
+        return OnPopupEventArgs;
+    }(igniteuiWebcomponentsCore.EventArgs));
+
+    /*
+    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 PopupVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(PopupVisualModelExport, _super);
+        function PopupVisualModelExport() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.e = 0;
+            _this.d = false;
+            _this.c = null;
+            _this.b = null;
+            _this.a = null;
+            return _this;
+        }
+        PopupVisualModelExport.prototype.f = function () {
+            var a = new igniteuiWebcomponentsCore.StringBuilder(0);
+            a.l("{");
+            a.l("actualElevation : " + this.e + ", ");
+            a.l("isShown : " + this.d + ", ");
+            a.l("actualUmbraShadowColor : " + this.c.serialize() + ", ");
+            a.l("actualPenumbraShadowColor : " + this.b.serialize() + ", ");
+            a.l("actualAmbientShadowColor : " + this.a.serialize() + ", ");
+            a.l("}");
+            return a.toString();
+        };
+        PopupVisualModelExport.$t = igniteuiWebcomponentsCore.markType(PopupVisualModelExport, 'PopupVisualModelExport');
+        return PopupVisualModelExport;
+    }(igniteuiWebcomponentsCore.Base));
+
+    /*
+    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 PopupView = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(PopupView, _super);
+        function PopupView() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.k = null;
+            _this.c = null;
+            _this.o = null;
+            _this.n = null;
+            _this.m = null;
+            _this.p = null;
+            _this.f = false;
+            _this.h = 0;
+            _this.al = new igniteuiWebcomponentsCore.Size(1, 0, 0);
+            _this.e = true;
+            _this.g = false;
+            return _this;
+        }
+        Object.defineProperty(PopupView.prototype, "d", {
+            get: function () {
+                return this.c;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PopupView.prototype, "l", {
+            get: function () {
+                return this.k;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        PopupView.prototype.ab = function () {
+            this.o.setStyleProperty("height", "0%");
+            this.o.setStyleProperty("width", "0%");
+            this.n = this.k.createElement("div");
+            this.n.setStyleProperty("position", "absolute");
+            this.n.setStyleProperty("overflow", "hidden");
+            this.n.setStyleProperty("z-index", "10000");
+            this.n.setAttribute("key", "popupContentAreaOuter");
+            this.m = this.k.createElement("div");
+            this.m.setAttribute("key", "popupContentAreaInner");
+            this.n.append(this.m);
+        };
+        PopupView.prototype.ai = function () {
+            var a = this.d;
+            var b = igniteuiWebcomponentsCore.ElevationHelper.e(a.w, a.a7, a.a6, a.a5);
+            this.n.setStyleProperty("box-shadow", b);
+        };
+        PopupView.prototype.ah = function () {
+            if (this.d.a8 != null) {
+                this.n.setStyleProperty("background-color", this.d.a8._fill);
+            }
+        };
+        PopupView.prototype.aj = function () {
+            if (null == this.o) {
+                return;
+            }
+            this.ai();
+            this.ah();
+        };
+        PopupView.prototype.s = function () {
+            if (null != this.n) {
+                this.aj();
+                this.n.setStyleProperty("height", "0px");
+                var a = this.n.getNativeElement();
+                if (false == this.f) {
+                    document.body.appendChild(a);
+                    this.f = true;
+                    if (this.e) {
+                        this.z();
+                    }
+                }
+            }
+        };
+        PopupView.prototype.t = function (a, b) {
+            this.n.setStyleProperty("top", PopupView.q(a.b));
+            this.n.setStyleProperty("height", PopupView.r(a.d));
+            this.m.setStyleProperty("top", PopupView.r(b.b));
+            this.m.setStyleProperty("opacity", "1");
+            this.m.setStyleProperty("transform", igniteuiWebcomponentsCore.stringEmpty());
+            this.h = 0;
+            if (this.g) {
+                this.ag();
+            }
+            return {
+                p0: a,
+                p1: b
+            };
+        };
+        PopupView.prototype.u = function (a) {
+            this.h = a;
+        };
+        PopupView.prototype.ae = function () {
+            if (null != this.n && this.f) {
+                var a = this.n.getNativeElement();
+                document.body.removeChild(a);
+                this.f = false;
+            }
+        };
+        PopupView.prototype.v = function (a) {
+            this.m.append(a);
+        };
+        PopupView.prototype.a = function (a) {
+            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.m, 0, null, a);
+        };
+        PopupView.prototype.b = function (a) {
+            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.n, 0, null, a);
+        };
+        PopupView.prototype.w = function () {
+            if (igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h == null) {
+                igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h = this.l;
+            }
+        };
+        Object.defineProperty(PopupView.prototype, "am", {
+            get: function () {
+                if (this.e) {
+                    this.z();
+                }
+                return this.al;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        PopupView.prototype.i = function (a, b) {
+            var c;
+            var t1 = b;
+            L0: while (true) {
+                switch (t1) {
+                    case 0:
+                    case 1:
+                        c = a.left;
+                        break;
+                    case 2:
+                        c = a.right - this.am.width;
+                        break;
+                    default:
+                        t1 = 0;
+                        continue L0;
+                }
+                break;
+            }
+            return c;
+        };
+        PopupView.prototype.j = function (a, b) {
+            var c;
+            var t1 = b;
+            L0: while (true) {
+                switch (t1) {
+                    case 0:
+                    case 1:
+                        c = a.bottom;
+                        break;
+                    case 2:
+                        c = a.top - this.am.height;
+                        break;
+                    default:
+                        t1 = 0;
+                        continue L0;
+                }
+                break;
+            }
+            return c;
+        };
+        PopupView.r = function (a) {
+            return igniteuiWebcomponentsCore.stringFormat("{0}px", a);
+        };
+        PopupView.q = function (a) {
+            return igniteuiWebcomponentsCore.stringFormat("{0}px", a);
+        };
+        PopupView.prototype.ak = function (a, b, c) {
+            var d = this.j(a, b);
+            var e = this.i(a, c);
+            this.af(e, d);
+            if (b == 2 || c == 2) {
+                var f = 10;
+                while (f > 0) {
+                    var g = this.j(a, b);
+                    var h = this.i(a, c);
+                    if (g == d && h == e) {
+                        f = 0;
+                        break;
+                    }
+                    d = g;
+                    e = h;
+                    this.af(e, d);
+                    f--;
+                }
+            }
+            return new igniteuiWebcomponentsCore.Rect(0, e, d, this.am.width, this.am.height);
+        };
+        PopupView.prototype.z = function () {
+            if (this.f) {
+                this.n.setStyleProperty("width", igniteuiWebcomponentsCore.stringEmpty());
+                this.n.setStyleProperty("height", igniteuiWebcomponentsCore.stringEmpty());
+                this.al = new igniteuiWebcomponentsCore.Size(1, this.m.outerWidth(), this.m.outerHeight());
+                this.e = false;
+                this.ag();
+            }
+            else {
+                this.e = true;
+            }
+        };
+        PopupView.prototype.af = function (a, b) {
+            var c = igniteuiWebcomponentsCore.stringFormat("{0}px", a);
+            var d = igniteuiWebcomponentsCore.stringFormat("{0}px", b);
+            this.n.setStyleProperty("left", c);
+            this.n.setStyleProperty("top", d);
+        };
+        PopupView.prototype.ac = function (a) {
+            var _this = this;
+            if (a == null) {
+                this.k = null;
+                return;
+            }
+            this.k = a;
+            var b = a.rootWrapper;
+            this.x(b);
+            this.k.getPortal(this.m, "ChildContent", function (c) {
+                var comp_ = c.componentRef;
+                _this.p = comp_;
+            }, true);
+        };
+        PopupView.prototype.ag = function () {
+            var a = new igniteuiWebcomponentsCore.Size(1, this.am.width, this.am.height);
+            if (!this.f || !this.d.t) {
+                a.height = 0;
+            }
+            var b = a.width;
+            var c = a.height;
+            if (this.c.r()) {
+                if (this.h == c) {
+                    return;
+                }
+                this.c.an();
+                this.g = true;
+                return;
+            }
+            this.g = false;
+            var d = igniteuiWebcomponentsCore.stringFormat("{0}px", b);
+            var e = igniteuiWebcomponentsCore.stringFormat("{0}px", c);
+            this.n.setStyleProperty("width", d);
+            this.n.setStyleProperty("height", e);
+        };
+        PopupView.prototype.x = function (a) {
+            this.o = a;
+            this.ab();
+        };
+        PopupView.prototype.y = function (a) {
+            this.c = a;
+        };
+        PopupView.prototype.aa = function () {
+        };
+        PopupView.prototype.ad = function () {
+            this.s();
+            if (this.d.t) {
+                return;
+            }
+            this.ag();
+        };
+        PopupView.$t = igniteuiWebcomponentsCore.markType(PopupView, 'PopupView');
+        return PopupView;
+    }(igniteuiWebcomponentsCore.Base));
+    /**
+     * @hidden
+     */
+    var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(Popup, _super);
+        function Popup() {
+            var _this = _super.call(this) || this;
+            _this.i = 0;
+            _this.h = 0;
+            _this.bc = null;
+            _this.n = null;
+            _this.o = null;
+            _this.onClosed = null;
+            _this.onPopup = null;
+            _this.propertyChanged = null;
+            _this.k = null;
+            _this.x = 50;
+            _this.p = true;
+            _this.v = -1;
+            _this.u = Popup.z;
+            _this.s = false;
+            _this.a3 = Popup.bb;
+            _this.a2 = Popup.ba;
+            _this.a1 = Popup.a9;
+            _this.a4 = null;
+            var a = _this.j();
+            _this.k = a;
+            a.y(_this);
+            return _this;
+        }
+        Popup.prototype.au = function (a, b, c) {
+            if (this.propertyChanged != null) {
+                this.propertyChanged(this, new igniteuiWebcomponentsCore.PropertyChangedEventArgs(a));
+            }
+            this.aw(a, b, c);
+        };
+        Object.defineProperty(Popup.prototype, "y", {
+            get: function () {
+                return this.x;
+            },
+            set: function (a) {
+                var b = this.x;
+                this.x = a;
+                if (b != this.x) {
+                    this.au("AnimationDuration", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Popup.prototype, "q", {
+            get: function () {
+                return this.p;
+            },
+            set: function (a) {
+                var b = this.p;
+                this.p = a;
+                if (b != this.p) {
+                    this.au("AnimationEnabled", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Popup.prototype, "aa", {
+            get: function () {
+                return this.v;
+            },
+            set: function (a) {
+                var b = this.v;
+                this.v = a;
+                if (b != this.v) {
+                    this.au("Elevation", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Popup.prototype, "w", {
+            get: function () {
+                return this.u;
+            },
+            set: function (a) {
+                var b = this.u;
+                this.u = a;
+                if (b != this.u) {
+                    this.au("ActualElevation", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Popup.prototype, "t", {
+            get: function () {
+                return this.s;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Popup.prototype, "a7", {
+            get: function () {
+                return this.a3;
+            },
+            set: function (a) {
+                var b = this.a3;
+                this.a3 = a;
+                if (b != this.a3) {
+                    this.au("ActualUmbraShadowColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Popup.prototype, "a6", {
+            get: function () {
+                return this.a2;
+            },
+            set: function (a) {
+                var b = this.a2;
+                this.a2 = a;
+                if (b != this.a2) {
+                    this.au("ActualPenumbraShadowColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Popup.prototype, "a5", {
+            get: function () {
+                return this.a1;
+            },
+            set: function (a) {
+                var b = this.a1;
+                this.a1 = a;
+                if (b != this.a1) {
+                    this.au("ActualAmbientShadowColor", b, a);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Popup.prototype, "a8", {
+            get: function () {
+                return this.a4;
+            },
+            set: function (a) {
+                var b = this.a4;
+                this.a4 = a;
+                if (b != this.a4) {
+                    this.au("Background", b, this.a4);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Popup.prototype.j = function () {
+            return new PopupView();
+        };
+        Popup.prototype.aw = function (a, b, c) {
+            switch (a) {
+                case "IsShown":
+                    if (false == this.t) {
+                        this.k.ae();
+                    }
+                    break;
+                case "Elevation":
+                    this.w = this.aa == -1 ? Popup.z : this.aa;
+                    break;
+                case "ActualElevation":
+                case "ActualUmbraShadowColor":
+                case "ActualPenumbraShadowColor":
+                case "ActualAmbientShadowColor":
+                case "Background":
+                    this.k.aj();
+                    break;
+                case "AnimationEnabled":
+                    if (false == this.q) {
+                        this.an();
+                    }
+                    break;
+            }
+        };
+        Popup.prototype.an = function () {
+            if (this.r()) {
+                if (null != this.o && this.o.playState == 1) {
+                    this.o.cancel();
+                }
+                if (null != this.n && this.n.playState == 1) {
+                    this.n.cancel();
+                }
+            }
+        };
+        Popup.prototype.l = function (a) {
+            var b = this.f(a);
+            var c = a ? this.b() : this.a();
+            var d = this.k.a(c);
+            var e = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.AnimationKeyFrameProperty.$, 0);
+            var f = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.AnimationKeyFrameProperty.$, 0);
+            var g = new igniteuiWebcomponentsCore.TranslateTransform();
+            g.k = b.a;
+            var h = new igniteuiWebcomponentsCore.TranslateTransform();
+            h.k = b.b;
+            var i = new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(14, g);
+            var j = new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(14, h);
+            e.add(i);
+            f.add(j);
+            d.m.apply(d, tslib_1.__spread(e.toArray()));
+            d.m.apply(d, tslib_1.__spread(f.toArray()));
+            return igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(d);
+        };
+        Popup.prototype.m = function (a) {
+            var b = this.g(a);
+            this.k.u(b.d);
+            var c = a ? this.b() : this.a();
+            var d = this.k.b(c);
+            var e = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.AnimationKeyFrameProperty.$, 0);
+            var f = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.AnimationKeyFrameProperty.$, 0);
+            var g = new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(10, b.c);
+            var h = new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(10, b.d);
+            e.add(g);
+            f.add(h);
+            if (this.i == 2) {
+                var i = b.a;
+                var j = b.b;
+                var k = new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(12, i);
+                var l = new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(12, j);
+                e.add(k);
+                f.add(l);
+            }
+            d.m.apply(d, tslib_1.__spread(e.toArray()));
+            d.m.apply(d, tslib_1.__spread(f.toArray()));
+            return igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(d);
+        };
+        Popup.prototype.a = function () {
+            var a = new igniteuiWebcomponentsCore.AnimationKeyFrameEffectTiming();
+            a.g = this.y;
+            a.b = 3;
+            return a;
+        };
+        Popup.prototype.b = function () {
+            var a = new igniteuiWebcomponentsCore.AnimationKeyFrameEffectTiming();
+            a.g = this.y;
+            a.b = 3;
+            return a;
+        };
+        Popup.prototype.aq = function () {
+            this.k.w();
+        };
+        Popup.prototype.f = function (a) {
+            var b = igniteuiWebcomponentsCore.truncate(this.k.am.height);
+            if (b <= 0) {
+                b = 500;
+            }
+            var c = a ? -b : 0;
+            var d = a ? 0 : -b;
+            if (this.i == 2) {
+                c = 0;
+                d = 0;
+            }
+            var e = ((function () {
+                var $ret = new Popup_InnerAnimationInfo();
+                $ret.a = c;
+                $ret.b = d;
+                return $ret;
+            })());
+            return e;
+        };
+        Popup.prototype.g = function (a) {
+            var b = igniteuiWebcomponentsCore.truncate(this.k.am.height);
+            if (b <= 0) {
+                b = 500;
+            }
+            var c = a ? 0 : b;
+            var d = a ? b : 0;
+            var e;
+            var f;
+            if (this.i == 2) {
+                e = a ? this.bc.bottom : this.bc.top;
+                f = a ? this.bc.top : this.bc.bottom;
+            }
+            else {
+                e = this.bc.top;
+                f = this.bc.top;
+            }
+            var g = ((function () {
+                var $ret = new Popup_OuterAnimationInfo();
+                $ret.c = c;
+                $ret.d = d;
+                $ret.a = e;
+                $ret.b = f;
+                return $ret;
+            })());
+            return g;
+        };
+        Popup.prototype.r = function () {
+            if (null == this.o && null == this.n) {
+                return false;
+            }
+            if (null != this.o && this.o.playState == 1) {
+                return true;
+            }
+            if (null != this.n && this.n.playState == 1) {
+                return true;
+            }
+            return false;
+        };
+        Popup.prototype.ar = function () {
+            this.k.z();
+        };
+        Popup.prototype.av = function (a, b, c) {
+            this.k.ad();
+            this.bc = this.k.ak(a, b, c);
+            this.i = b;
+            this.h = c;
+        };
+        Popup.prototype.ay = function (a, b, c) {
+            if (this.s) {
+                this.s = false;
+                this.au("IsShown", true, this.s);
+            }
+            this.av(a, b, c);
+            this.az(true);
+        };
+        Popup.prototype.az = function (a) {
+            var _this = this;
+            this.an();
+            var b = this.s;
+            this.s = a;
+            var c = this.g(a);
+            var d = this.f(a);
+            if (false == this.q) {
+                var e = this.k.t(c, d);
+                c = e.p0;
+                d = e.p1;
+                return;
+            }
+            this.aq();
+            this.n = this.l(this.s);
+            this.o = this.m(this.s);
+            this.n.play();
+            this.o.play();
+            this.n.finished.f(function (f) { return _this.n.commitStyles(); });
+            this.o.finished.f(function (f) {
+                _this.o.commitStyles();
+                _this.au("IsShown", b, _this.s);
+                if (_this.s) {
+                    if (_this.onPopup != null) {
+                        _this.onPopup(_this, new OnPopupEventArgs());
+                    }
+                }
+                else {
+                    if (_this.onClosed != null) {
+                        _this.onClosed(_this, new OnClosedEventArgs());
+                    }
+                }
+                var g = _this.k.t(c, d);
+                c = g.p0;
+                d = g.p1;
+            });
+        };
+        Popup.prototype.appendPopupContent = function (a) {
+            this.k.v(a);
+        };
+        Popup.prototype.ao = function () {
+            if (!this.s) {
+                return;
+            }
+            this.az(false);
+        };
+        Popup.prototype.destroy = function () {
+            this.provideRenderer(null);
+        };
+        Popup.prototype.showRelativeToExclusionRect = function (a, b, c) {
+            this.ay(a, b, c);
+        };
+        Popup.prototype.as = function (a) {
+            this.bc = this.k.ak(a, this.i, this.h);
+        };
+        Popup.prototype.notifySizeChanged = function () {
+        };
+        Popup.prototype.provideRenderer = function (a) {
+            this.k.ac(a);
+        };
+        Popup.prototype.ab = function () {
+            return this.c();
+        };
+        Popup.prototype.ak = function () {
+            var a = this.c();
+            return a.f();
+        };
+        Popup.prototype.c = function () {
+            var a = new PopupVisualModelExport();
+            a.e = this.w;
+            a.d = this.t;
+            a.c = igniteuiWebcomponentsCore.AppearanceHelper.a(this.a7);
+            a.b = igniteuiWebcomponentsCore.AppearanceHelper.a(this.a6);
+            a.a = igniteuiWebcomponentsCore.AppearanceHelper.a(this.a5);
+            return a;
+        };
+        Popup.$t = igniteuiWebcomponentsCore.markType(Popup, 'Popup', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type]);
+        Popup.z = 2;
+        Popup.bb = igniteuiWebcomponentsCore.BrushUtil.g(66, 0, 0, 0);
+        Popup.ba = igniteuiWebcomponentsCore.BrushUtil.g(30, 0, 0, 0);
+        Popup.a9 = igniteuiWebcomponentsCore.BrushUtil.g(20, 0, 0, 0);
+        return Popup;
+    }(igniteuiWebcomponentsCore.Base));
+
+    /*
+    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.
+    */
+
+    var IgcOnPopupEventArgs = /** @class */ /*@__PURE__*/ (function () {
+        function IgcOnPopupEventArgs() {
+            this._implementation = this.createImplementation();
+            this._implementation.externalObject = this;
+            this.onImplementationCreated();
+        }
+        IgcOnPopupEventArgs.prototype.createImplementation = function () {
+            return new OnPopupEventArgs();
+        };
+        Object.defineProperty(IgcOnPopupEventArgs.prototype, "i", {
+            /**
+             * @hidden
+             */
+            get: function () {
+                return this._implementation;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcOnPopupEventArgs.prototype.onImplementationCreated = function () {
+        };
+        IgcOnPopupEventArgs.prototype._provideImplementation = function (i) {
+            this._implementation = i;
+            this._implementation.externalObject = this;
+            this.onImplementationCreated();
+        };
+        return IgcOnPopupEventArgs;
+    }());
+
+    var IgcOnClosedEventArgs = /** @class */ /*@__PURE__*/ (function () {
+        function IgcOnClosedEventArgs() {
+            this._implementation = this.createImplementation();
+            this._implementation.externalObject = this;
+            this.onImplementationCreated();
+        }
+        IgcOnClosedEventArgs.prototype.createImplementation = function () {
+            return new OnClosedEventArgs();
+        };
+        Object.defineProperty(IgcOnClosedEventArgs.prototype, "i", {
+            /**
+             * @hidden
+             */
+            get: function () {
+                return this._implementation;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcOnClosedEventArgs.prototype.onImplementationCreated = function () {
+        };
+        IgcOnClosedEventArgs.prototype._provideImplementation = function (i) {
+            this._implementation = i;
+            this._implementation.externalObject = this;
+            this.onImplementationCreated();
+        };
+        return IgcOnClosedEventArgs;
+    }());
+
+    var IgcPopupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib_1.__extends(IgcPopupComponent, _super);
+        function IgcPopupComponent() {
+            var _this = _super.call(this) || this;
+            _this._implementation = null;
+            _this._disconnected = false;
+            _this._settingAttributes = false;
+            _this._attached = false;
+            _this._queuedSetAttributes = [];
+            _this._updatingFromAttribute = false;
+            _this.__p = null;
+            _this._hasUserValues = new Set();
+            _this._stylingContainer = null;
+            _this._stylingParent = null;
+            _this._inStyling = false;
+            _this._onClosed = null;
+            _this._onClosed_wrapped = null;
+            _this._onPopup = null;
+            _this._onPopup_wrapped = null;
+            if (_this._styling) {
+                igniteuiWebcomponentsCore.NamePatcher.ensureStylablePatched(Object.getPrototypeOf(_this));
+            }
+            _this._implementation = _this.createImplementation();
+            _this._portalManager = new igniteuiWebcomponentsCore.PortalManager("popupContent");
+            _this._webComponentRenderer = new igniteuiWebcomponentsCore.WebComponentRenderer(_this, document, true, {}, _this._portalManager);
+            _this._mainDiv = _this._webComponentRenderer.createElement("div");
+            _this._webComponentRenderer.updateRoot(_this._mainDiv);
+            _this.i.provideRenderer(_this._webComponentRenderer);
+            var mut = new MutationObserver(function (list) {
+                var e_1, _b;
+                try {
+                    for (var list_1 = tslib_1.__values(list), list_1_1 = list_1.next(); !list_1_1.done; list_1_1 = list_1.next()) {
+                        var mutation = list_1_1.value;
+                        if (mutation.type == 'childList') {
+                            _this._onChildrenChanged();
+                        }
+                    }
+                }
+                catch (e_1_1) {
+                    e_1 = { error: e_1_1 };
+                }
+                finally {
+                    try {
+                        if (list_1_1 && !list_1_1.done && (_b = list_1.return))
+                            _b.call(list_1);
+                    }
+                    finally {
+                        if (e_1)
+                            throw e_1.error;
+                    }
+                }
+            });
+            mut.observe(_this, {
+                childList: true
+            });
+            return _this;
+        }
+        Object.defineProperty(IgcPopupComponent.prototype, "height", {
+            get: function () {
+                return this._height;
+            },
+            set: function (value) {
+                this._height = value;
+                this.style.height = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcPopupComponent.prototype, "width", {
+            get: function () {
+                return this._width;
+            },
+            set: function (value) {
+                this._width = value;
+                this.style.width = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcPopupComponent.prototype._onChildrenChanged = function () {
+            var children = [];
+            for (var i = 0; i < this.childNodes.length; i++) {
+                var child = this.childNodes[i];
+                if (child !== this._mainDiv.getNativeElement()) {
+                    children.push(child);
+                }
+            }
+            this._portalManager.onChildrenChanged(children);
+        };
+        // supports angular themes or custom properties set in CSS
+        IgcPopupComponent.prototype.updateStyle = function () {
+            this._styling(this, this);
+        };
+        IgcPopupComponent.prototype.destroy = function () {
+            this._implementation.destroy();
+            this._webComponentRenderer.destroy();
+        };
+        IgcPopupComponent.prototype.createImplementation = function () {
+            return new Popup();
+        };
+        Object.defineProperty(IgcPopupComponent.prototype, "i", {
+            get: function () {
+                return this._implementation;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcPopupComponent.prototype.disconnectedCallback = function () {
+            this._disconnected = true;
+        };
+        IgcPopupComponent.prototype.connectedCallback = function () {
+            if (this._disconnected) {
+                this._disconnected = false;
+                return;
+            }
+            this.classList.add("ig-popup");
+            this.classList.add("igr-popup");
+            this.appendChild(this._mainDiv.getNativeElement());
+            this._attached = true;
+            this.style.display = "block";
+            this.style.height = this._height;
+            this.style.width = this._width;
+            this._flushQueuedAttributes();
+            // supports themes or custom properties set in CSS
+            this._styling(this, this);
+            this.afterContentInit();
+        };
+        IgcPopupComponent.prototype.afterContentInit = function () {
+        };
+        IgcPopupComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
+            this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
+        };
+        IgcPopupComponent.prototype._flushQueuedAttributes = function () {
+            this._settingAttributes = true;
+            for (var i = 0; i < this._queuedSetAttributes.length; i++) {
+                this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
+            }
+            this._settingAttributes = false;
+            this._queuedSetAttributes.length = 0;
+        };
+        IgcPopupComponent.prototype._a = function (attrName, attrValue) {
+            if (this._updatingFromAttribute) {
+                return;
+            }
+            if (attrValue) {
+                attrValue = attrValue.toString();
+            }
+            this._settingAttributes = true;
+            attrName = igniteuiWebcomponentsCore.toSpinal(attrName);
+            if (this._attached) {
+                this.setAttribute(attrName, attrValue);
+            }
+            else {
+                this._enqueueSetAttribute(attrName, attrValue);
+            }
+            this._settingAttributes = false;
+        };
+        Object.defineProperty(IgcPopupComponent, "observedAttributes", {
+            get: function () {
+                if (IgcPopupComponent._observedAttributesIgcPopupComponent == null) {
+                    var names = igniteuiWebcomponentsCore.getAllPropertyNames(IgcPopupComponent);
+                    for (var i = 0; i < names.length; i++) {
+                        names[i] = igniteuiWebcomponentsCore.toSpinal(names[i]);
+                    }
+                    IgcPopupComponent._observedAttributesIgcPopupComponent = names;
+                }
+                return IgcPopupComponent._observedAttributesIgcPopupComponent;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcPopupComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
+            if (this._settingAttributes) {
+                return;
+            }
+            var setName = igniteuiWebcomponentsCore.fromSpinal(name);
+            this._updatingFromAttribute = true;
+            this[setName] = newValue;
+            this._updatingFromAttribute = false;
+        };
+        IgcPopupComponent.register = function () {
+            if (!IgcPopupComponent._isElementRegistered) {
+                IgcPopupComponent._isElementRegistered = true;
+                igniteuiWebcomponentsCore.RegisterElementHelper.registerElement(IgcPopupComponent.htmlTagName, IgcPopupComponent);
+            }
+        };
+        Object.defineProperty(IgcPopupComponent.prototype, "animationDuration", {
+            /**
+         * Gets or sets the duration of the Popup and Closeup animations in milliseconds.
+        */
+            get: function () {
+                return this.i.y;
+            },
+            set: function (v) {
+                this.i.y = +v;
+                this._a("animationDuration", this.i.y);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcPopupComponent.prototype, "animationEnabled", {
+            /**
+             * Gets or sets whether the popup and closeup animations are animated.
+            */
+            get: function () {
+                return this.i.q;
+            },
+            set: function (v) {
+                this.i.q = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("animationEnabled", this.i.q);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcPopupComponent.prototype, "elevation", {
+            /**
+             * Gets or sets the elevation to use for the button regardless of type.
+            */
+            get: function () {
+                return this.i.aa;
+            },
+            set: function (v) {
+                this.i.aa = +v;
+                this._a("elevation", this.i.aa);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcPopupComponent.prototype, "actualElevation", {
+            /**
+             * Gets or sets the elevation of the border shadow
+            */
+            get: function () {
+                return this.i.w;
+            },
+            set: function (v) {
+                this.i.w = +v;
+                this._a("actualElevation", this.i.w);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcPopupComponent.prototype, "isShown", {
+            /**
+             * Gets / sets the isShown state of the panel.
+            */
+            get: function () {
+                return this.i.t;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcPopupComponent.prototype, "actualUmbraShadowColor", {
+            /**
+             * Gets or sets the color to use for the check mark when the checkbox is checked.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.a7);
+            },
+            set: function (v) {
+                this.i.a7 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualUmbraShadowColor", igniteuiWebcomponentsCore.brushToString(this.i.a7));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcPopupComponent.prototype, "actualPenumbraShadowColor", {
+            /**
+             * Gets or sets the color to use for the check mark when the checkbox is checked.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.a6);
+            },
+            set: function (v) {
+                this.i.a6 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualPenumbraShadowColor", igniteuiWebcomponentsCore.brushToString(this.i.a6));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcPopupComponent.prototype, "actualAmbientShadowColor", {
+            /**
+             * Gets or sets the color to use for the check mark when the checkbox is checked.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.a5);
+            },
+            set: function (v) {
+                this.i.a5 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualAmbientShadowColor", igniteuiWebcomponentsCore.brushToString(this.i.a5));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcPopupComponent.prototype, "background", {
+            /**
+             * Gets or sets the background color of the popup.
+            */
+            get: function () {
+                return igniteuiWebcomponentsCore.brushToString(this.i.a8);
+            },
+            set: function (v) {
+                this.i.a8 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("background", igniteuiWebcomponentsCore.brushToString(this.i.a8));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcPopupComponent.prototype.findByName = function (name) {
+            return null;
+        };
+        Object.defineProperty(IgcPopupComponent.prototype, "hasUserValues", {
+            get: function () {
+                return this._hasUserValues;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcPopupComponent.prototype.__m = function (propertyName) {
+            if (!this._inStyling) {
+                this._hasUserValues.add(propertyName);
+            }
+        };
+        IgcPopupComponent.prototype._styling = function (container, component, parent) {
+            if (this._inStyling) {
+                return;
+            }
+            this._inStyling = true;
+            this._stylingContainer = container;
+            this._stylingParent = component;
+            var genericPrefix = "";
+            var typeName = this.i.$type.name;
+            if (typeName.indexOf("Xam") === 0) {
+                typeName = typeName.substring(3);
+            }
+            genericPrefix = igniteuiWebcomponentsCore.toSpinal("PopupComponent");
+            var additionalPrefixes = [];
+            var prefix = igniteuiWebcomponentsCore.toSpinal(typeName);
+            additionalPrefixes.push(prefix + "-");
+            var b = this.i.$type.baseType;
+            while (b && b.name != "Object" &&
+                b.name != "Base" &&
+                b.name != "Control" &&
+                b.Name != "DependencyObject" &&
+                b.Name != "FrameworkElement") {
+                typeName = b.name;
+                if (typeName.indexOf("Xam") === 0) {
+                    typeName = typeName.substring(3);
+                }
+                var basePrefix = igniteuiWebcomponentsCore.toSpinal(typeName);
+                additionalPrefixes.push(basePrefix + "-");
+                b = b.baseType;
+            }
+            if (parent) {
+                var parentTypeName = parent.i.$type.name;
+                if (parentTypeName.indexOf("Xam") === 0) {
+                    parentTypeName = parentTypeName.substring(3);
+                }
+                var parentPrefix = igniteuiWebcomponentsCore.toSpinal(parentTypeName);
+                additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
+                additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
+            }
+            igniteuiWebcomponentsCore.initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
+            if (this._otherStyling) {
+                this._otherStyling(container, component, parent);
+            }
+            this._inStyling = false;
+        };
+        /**
+     * Closes the popup.
+
+    */
+        IgcPopupComponent.prototype.close = function () {
+            this.i.ao();
+        };
+        IgcPopupComponent.prototype.showRelativeToExclusionRect = function (exclusionRect, popupDirection, popupAlignment) {
+            this.i.showRelativeToExclusionRect(igniteuiWebcomponentsCore.toRect(exclusionRect), (popupDirection == null ? null : popupDirection), (popupAlignment == null ? null : popupAlignment));
+        };
+        /**
+         * Exports visual information about the current state of the grid.
+        
+        */
+        IgcPopupComponent.prototype.exportVisualModel = function () {
+            var iv = this.i.ab();
+            return (iv);
+        };
+        /**
+         * Returns a serialized copy of the exported visual model
+        
+        */
+        IgcPopupComponent.prototype.exportSerializedVisualModel = function () {
+            var iv = this.i.ak();
+            return (iv);
+        };
+        Object.defineProperty(IgcPopupComponent.prototype, "onClosed", {
+            get: function () {
+                return this._onClosed;
+            },
+            set: function (ev) {
+                var _this = this;
+                if (this._onClosed_wrapped !== null) {
+                    this.i.onClosed = igniteuiWebcomponentsCore.delegateRemove(this.i.onClosed, this._onClosed_wrapped);
+                    this._onClosed_wrapped = null;
+                    this._onClosed = null;
+                }
+                this._onClosed = ev;
+                this._onClosed_wrapped = function (o, e) {
+                    var outerArgs = new IgcOnClosedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (_this.beforeOnClosed) {
+                        _this.beforeOnClosed(_this, outerArgs);
+                    }
+                    if (_this._onClosed) {
+                        _this._onClosed(_this, outerArgs);
+                    }
+                };
+                this.i.onClosed = igniteuiWebcomponentsCore.delegateCombine(this.i.onClosed, this._onClosed_wrapped);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(IgcPopupComponent.prototype, "onPopup", {
+            /**
+             * Fires when the popup is shown
+            */
+            get: function () {
+                return this._onPopup;
+            },
+            set: function (ev) {
+                var _this = this;
+                if (this._onPopup_wrapped !== null) {
+                    this.i.onPopup = igniteuiWebcomponentsCore.delegateRemove(this.i.onPopup, this._onPopup_wrapped);
+                    this._onPopup_wrapped = null;
+                    this._onPopup = null;
+                }
+                this._onPopup = ev;
+                this._onPopup_wrapped = function (o, e) {
+                    var outerArgs = new IgcOnPopupEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (_this.beforeOnPopup) {
+                        _this.beforeOnPopup(_this, outerArgs);
+                    }
+                    if (_this._onPopup) {
+                        _this._onPopup(_this, outerArgs);
+                    }
+                };
+                this.i.onPopup = igniteuiWebcomponentsCore.delegateCombine(this.i.onPopup, this._onPopup_wrapped);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        IgcPopupComponent._observedAttributesIgcPopupComponent = null;
+        IgcPopupComponent.htmlTagName = "igc-popup";
+        IgcPopupComponent._isElementRegistered = false;
+        return IgcPopupComponent;
+    }(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.
+    */
+    var IgcPopupModule = /** @class */ /*@__PURE__*/ (function () {
+        function IgcPopupModule() {
+        }
+        IgcPopupModule.register = function () {
+            igniteuiWebcomponentsCore.IgcChildContentModule.register();
+            IgcPopupComponent.register();
+            igniteuiWebcomponentsCore.TypeRegistrar.registerCons('IgcPopupComponent', IgcPopupComponent);
+            igniteuiWebcomponentsCore.TypeRegistrar.registerCons('IgcPopupComponent', IgcPopupComponent);
+            igniteuiWebcomponentsCore.TypeRegistrar.register('Popup', Popup.$type);
+        };
+        return IgcPopupModule;
+    }());
+
+    /*
+    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.
+    */
+
+    /*
+    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.
+    */
+
+    /*
+    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.
+    */
+    /**
+     * Indicates which side of the exclusion rectangle to which the popup is aligned.
+     */
+    var PopupAlignment = /*@__PURE__*/ (function (PopupAlignment) {
+        /**
+         * No specified direction.
+         */
+        PopupAlignment[PopupAlignment["Auto"] = 0] = "Auto";
+        /**
+         * Popup should be aligned to the near side. This usually means left or top.
+         */
+        PopupAlignment[PopupAlignment["Near"] = 1] = "Near";
+        /**
+         * Popup should be aligned to the near far. This usually means right or bottom.
+         */
+        PopupAlignment[PopupAlignment["Far"] = 2] = "Far";
+        return PopupAlignment;
+    })({});
+    /**
+     * @hidden
+     */
+    var PopupAlignment_$type = /*@__PURE__*/ igniteuiWebcomponentsCore.markEnum('PopupAlignment', 'Auto,0|Near,1|Far,2');
+
+    /*
+    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.
+    */
+    /**
+     * Indicates which direction the popup will pop up in relation to the exclusion rectangle.
+     */
+    var PopupDirection = /*@__PURE__*/ (function (PopupDirection) {
+        /**
+         * No specified direction.
+         */
+        PopupDirection[PopupDirection["Auto"] = 0] = "Auto";
+        /**
+         * Popup should be displayed downward.
+         */
+        PopupDirection[PopupDirection["Down"] = 1] = "Down";
+        /**
+         * Popup should be displayed downward.
+         */
+        PopupDirection[PopupDirection["Up"] = 2] = "Up";
+        return PopupDirection;
+    })({});
+    /**
+     * @hidden
+     */
+    var PopupDirection_$type = /*@__PURE__*/ igniteuiWebcomponentsCore.markEnum('PopupDirection', 'Auto,0|Down,1|Up,2');
+
+    exports.ExpansionPanel = ExpansionPanel;
+    exports.ExpansionPanelUtilities = ExpansionPanelUtilities;
+    exports.ExpansionPanelView = ExpansionPanelView;
+    exports.IgcExpansionPanelComponent = IgcExpansionPanelComponent;
+    exports.IgcExpansionPanelModule = IgcExpansionPanelModule;
+    exports.IgcOnClosedEventArgs = IgcOnClosedEventArgs;
+    exports.IgcOnCollapsedEventArgs = IgcOnCollapsedEventArgs;
+    exports.IgcOnExpandedEventArgs = IgcOnExpandedEventArgs;
+    exports.IgcOnPopupEventArgs = IgcOnPopupEventArgs;
+    exports.IgcPopupComponent = IgcPopupComponent;
+    exports.IgcPopupModule = IgcPopupModule;
+    exports.OnClosedEventArgs = OnClosedEventArgs;
+    exports.OnCollapsedEventArgs = OnCollapsedEventArgs;
+    exports.OnExpandedEventArgs = OnExpandedEventArgs;
+    exports.OnPopupEventArgs = OnPopupEventArgs;
+    exports.Popup = Popup;
+    exports.PopupAlignment = PopupAlignment;
+    exports.PopupAlignment_$type = PopupAlignment_$type;
+    exports.PopupDirection = PopupDirection;
+    exports.PopupDirection_$type = PopupDirection_$type;
+    exports.PopupView = PopupView;
+    exports.PopupVisualModelExport = PopupVisualModelExport;
+    exports.Popup_InnerAnimationInfo = Popup_InnerAnimationInfo;
+    exports.Popup_OuterAnimationInfo = Popup_OuterAnimationInfo;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=igniteui-webcomponents-layouts.umd.js.map