igniteui-webcomponents-grids 5.1.0 → 5.1.1-beta.0

package/esm5/lib/igc-definition-base-component.js

@@ -1,4 +1,4 @@
-import { __extends } from "tslib";
+import { __extends, __values } from "tslib";
 import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
 import { CellContentHorizontalAlignment_$type } from "./CellContentHorizontalAlignment";
 import { CellContentVerticalAlignment_$type } from "./CellContentVerticalAlignment";
@@ -6,10 +6,13 @@ import { TextCellLineBreakMode_$type } from "./TextCellLineBreakMode";
 import { IgcDataBindingEventArgs } from "./igc-data-binding-event-args";
 import { IgcCellStyleRequestedEventArgs } from "./igc-cell-style-requested-event-args";
 import { TypeRegistrar } from "igniteui-webcomponents-core";
-import { NamePatcher, getAllPropertyNames, fromSpinal, toSpinal, brushToString, stringToBrush, ensureEnum, enumToString, initializePropertiesFromCss } from "igniteui-webcomponents-core";
+import { ensureBool, NamePatcher, getAllPropertyNames, fromSpinal, toSpinal, brushToString, stringToBrush, ensureEnum, enumToString, initializePropertiesFromCss, CollectionAdapter } from "igniteui-webcomponents-core";
 import { FontInfo } from "igniteui-webcomponents-core";
 import { ColumnPropertyUpdatingAnimationMode } from "./ColumnPropertyUpdatingAnimationMode";
 import { IgcHTMLElement } from "igniteui-webcomponents-core";
+import { IgcGridConditionalStyleCollection } from './igc-grid-conditional-style-collection';
+import { IgcGridConditionalStyleComponent } from './igc-grid-conditional-style-component';
+import { NotifyCollectionChangedAction } from "igniteui-webcomponents-core";
 /**
  * Base class for various definition types for the grid.
 */
@@ -27,6 +30,7 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
         _this._attached = false;
         _this._queuedSetAttributes = [];
         _this._updatingFromAttribute = false;
+        _this._conditionalStyles = null;
         _this._dataBinding = null;
         _this._dataBinding_wrapped = null;
         _this._dataBound = null;
@@ -39,6 +43,9 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
         _this._implementation = _this.createImplementation();
         _this._implementation.externalObject = _this;
         _this.onImplementationCreated();
+        if (_this._initializeAdapters) {
+            _this._initializeAdapters();
+        }
         return _this;
     }
     IgcDefinitionBaseComponent.prototype.createImplementation = function () {
@@ -72,6 +79,70 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
     };
     IgcDefinitionBaseComponent.prototype.onImplementationCreated = function () {
     };
+    IgcDefinitionBaseComponent.prototype._initializeAdapters = function () {
+        var _this = this;
+        if (!this.__observingChildren) {
+            this.__observingChildren = true;
+            var mut = new MutationObserver(function (list) {
+                var e_1, _b;
+                try {
+                    for (var list_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') {
+                            if (_this.updateContentChildren) {
+                                _this.updateContentChildren();
+                            }
+                            else if (_this._initializeAdapters) {
+                                _this.initializeAdapters();
+                            }
+                        }
+                    }
+                }
+                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._conditionalStylesAdapter = new CollectionAdapter([], this.i.conditionalStyles, this.actualConditionalStyles, function (c) { return c.i; }, function (i) {
+            if (_this._initializeElement) {
+                _this._initializeElement(i);
+            }
+        }, function (i) {
+            if (_this._destroyElement) {
+                _this._destroyElement(i);
+            }
+        });
+        if (_super.prototype["_initializeAdapters"]) {
+            _super.prototype["_initializeAdapters"].call(this);
+        }
+    };
+    IgcDefinitionBaseComponent.prototype._updateAdapters = function () {
+        if (_super.prototype["_updateAdapters"]) {
+            _super.prototype["_updateAdapters"].call(this);
+        }
+        this.contentConditionalStyles.length = 0;
+        for (var i = 0; i < this.children.length; i++) {
+            if (this.children[i] instanceof IgcGridConditionalStyleComponent) {
+                this.contentConditionalStyles.push(this.children[i]);
+            }
+        }
+        if (this._conditionalStylesAdapter != null) {
+            this._conditionalStylesAdapter.notifyContentChanged();
+        }
+    };
     IgcDefinitionBaseComponent.prototype._provideRenderer = function (renderer) {
         this._renderer = renderer;
     };
@@ -180,6 +251,12 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
         if (this.i.connectedCallback) {
             this.i.connectedCallback();
         }
+        if (this.updateContentChildren) {
+            this.updateContentChildren();
+        }
+        else if (this._updateAdapters) {
+            this._updateAdapters();
+        }
         if (!this._attached) {
             this._attached = true;
             this._flushQueuedAttributes();
@@ -224,11 +301,65 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
      * Gets or sets the background color to use.
     */
         get: function () {
-            return brushToString(this.i.d8);
+            return brushToString(this.i.ge);
         },
         set: function (v) {
-            this.i.d8 = stringToBrush(v);
-            this._a("background", brushToString(this.i.d8));
+            this.i.ge = stringToBrush(v);
+            this._a("background", brushToString(this.i.ge));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "actualConditionalStyles", {
+        get: function () {
+            if (!this._actualConditionalStyles) {
+                this._actualConditionalStyles = [];
+            }
+            return this._actualConditionalStyles;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "contentConditionalStyles", {
+        get: function () {
+            if (!this._contentConditionalStyles) {
+                this._contentConditionalStyles = [];
+            }
+            return this._contentConditionalStyles;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "conditionalStyles", {
+        /**
+         * Gets the style key information to use for judging when a property will be set later by a style
+        */
+        get: function () {
+            var _this = this;
+            if (this._conditionalStyles === null) {
+                var coll = new IgcGridConditionalStyleCollection();
+                var inner = coll._innerColl;
+                this._conditionalStyles = coll;
+                inner.addListener(function (sender, e) {
+                    switch (e.action) {
+                        case NotifyCollectionChangedAction.Add:
+                            _this._conditionalStylesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
+                            break;
+                        case NotifyCollectionChangedAction.Remove:
+                            _this._conditionalStylesAdapter.removeManualItemAt(e.oldStartingIndex);
+                            break;
+                        case NotifyCollectionChangedAction.Replace:
+                            _this._conditionalStylesAdapter.removeManualItemAt(e.oldStartingIndex);
+                            _this._conditionalStylesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
+                            break;
+                        case NotifyCollectionChangedAction.Reset:
+                            _this._conditionalStylesAdapter.clearManualItems();
+                            break;
+                    }
+                });
+                ;
+            }
+            return this._conditionalStyles;
         },
         enumerable: false,
         configurable: true
@@ -238,11 +369,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the background color to use.
         */
         get: function () {
-            return brushToString(this.i.d9);
+            return brushToString(this.i.gh);
         },
         set: function (v) {
-            this.i.d9 = stringToBrush(v);
-            this._a("border", brushToString(this.i.d9));
+            this.i.gh = stringToBrush(v);
+            this._a("border", brushToString(this.i.gh));
         },
         enumerable: false,
         configurable: true
@@ -252,11 +383,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the background color to use.
         */
         get: function () {
-            return brushToString(this.i.dz);
+            return brushToString(this.i.f3);
         },
         set: function (v) {
-            this.i.dz = stringToBrush(v);
-            this._a("activationBorder", brushToString(this.i.dz));
+            this.i.f3 = stringToBrush(v);
+            this._a("activationBorder", brushToString(this.i.f3));
         },
         enumerable: false,
         configurable: true
@@ -266,11 +397,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the error border color to use.
         */
         get: function () {
-            return brushToString(this.i.ea);
+            return brushToString(this.i.gi);
         },
         set: function (v) {
-            this.i.ea = stringToBrush(v);
-            this._a("errorBorder", brushToString(this.i.ea));
+            this.i.gi = stringToBrush(v);
+            this._a("errorBorder", brushToString(this.i.gi));
         },
         enumerable: false,
         configurable: true
@@ -280,11 +411,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual border color that will be used.
         */
         get: function () {
-            return brushToString(this.i.d2);
+            return brushToString(this.i.f8);
         },
         set: function (v) {
-            this.i.d2 = stringToBrush(v);
-            this._a("actualBorder", brushToString(this.i.d2));
+            this.i.f8 = stringToBrush(v);
+            this._a("actualBorder", brushToString(this.i.f8));
         },
         enumerable: false,
         configurable: true
@@ -294,11 +425,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of left border to use for the cell content for this column.
         */
         get: function () {
-            return this.i.be;
+            return this.i.cc;
         },
         set: function (v) {
-            this.i.be = +v;
-            this._a("borderLeftWidth", this.i.be);
+            this.i.cc = +v;
+            this._a("borderLeftWidth", this.i.cc);
         },
         enumerable: false,
         configurable: true
@@ -308,11 +439,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of top border to use for the cell content for this column.
         */
         get: function () {
-            return this.i.bg;
+            return this.i.ce;
         },
         set: function (v) {
-            this.i.bg = +v;
-            this._a("borderTopWidth", this.i.bg);
+            this.i.ce = +v;
+            this._a("borderTopWidth", this.i.ce);
         },
         enumerable: false,
         configurable: true
@@ -322,11 +453,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of right border to use for the cell content of this column.
         */
         get: function () {
-            return this.i.bf;
+            return this.i.cd;
         },
         set: function (v) {
-            this.i.bf = +v;
-            this._a("borderRightWidth", this.i.bf);
+            this.i.cd = +v;
+            this._a("borderRightWidth", this.i.cd);
         },
         enumerable: false,
         configurable: true
@@ -336,11 +467,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of bottom border to use for the cell content of this column.
         */
         get: function () {
-            return this.i.bd;
+            return this.i.cb;
         },
         set: function (v) {
-            this.i.bd = +v;
-            this._a("borderBottomWidth", this.i.bd);
+            this.i.cb = +v;
+            this._a("borderBottomWidth", this.i.cb);
         },
         enumerable: false,
         configurable: true
@@ -350,11 +481,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of left activation border to use for the cell content for this column.
         */
         get: function () {
-            return this.i.ba;
+            return this.i.b4;
         },
         set: function (v) {
-            this.i.ba = +v;
-            this._a("activationBorderLeftWidth", this.i.ba);
+            this.i.b4 = +v;
+            this._a("activationBorderLeftWidth", this.i.b4);
         },
         enumerable: false,
         configurable: true
@@ -364,11 +495,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of top activation border to use for the cell content for this column.
         */
         get: function () {
-            return this.i.bc;
+            return this.i.b6;
         },
         set: function (v) {
-            this.i.bc = +v;
-            this._a("activationBorderTopWidth", this.i.bc);
+            this.i.b6 = +v;
+            this._a("activationBorderTopWidth", this.i.b6);
         },
         enumerable: false,
         configurable: true
@@ -378,11 +509,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of right activation border to use for the cell content of this column.
         */
         get: function () {
-            return this.i.bb;
+            return this.i.b5;
         },
         set: function (v) {
-            this.i.bb = +v;
-            this._a("activationBorderRightWidth", this.i.bb);
+            this.i.b5 = +v;
+            this._a("activationBorderRightWidth", this.i.b5);
         },
         enumerable: false,
         configurable: true
@@ -392,55 +523,55 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of bottom activation border to use for the cell content of this column.
         */
         get: function () {
-            return this.i.a9;
+            return this.i.b3;
         },
         set: function (v) {
-            this.i.a9 = +v;
-            this._a("activationBorderBottomWidth", this.i.a9);
+            this.i.b3 = +v;
+            this._a("activationBorderBottomWidth", this.i.b3);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDefinitionBaseComponent.prototype, "errorBorderLeftWidth", {
         get: function () {
-            return this.i.bi;
+            return this.i.cg;
         },
         set: function (v) {
-            this.i.bi = +v;
-            this._a("errorBorderLeftWidth", this.i.bi);
+            this.i.cg = +v;
+            this._a("errorBorderLeftWidth", this.i.cg);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDefinitionBaseComponent.prototype, "errorBorderTopWidth", {
         get: function () {
-            return this.i.bk;
+            return this.i.ci;
         },
         set: function (v) {
-            this.i.bk = +v;
-            this._a("errorBorderTopWidth", this.i.bk);
+            this.i.ci = +v;
+            this._a("errorBorderTopWidth", this.i.ci);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDefinitionBaseComponent.prototype, "errorBorderRightWidth", {
         get: function () {
-            return this.i.bj;
+            return this.i.ch;
         },
         set: function (v) {
-            this.i.bj = +v;
-            this._a("errorBorderRightWidth", this.i.bj);
+            this.i.ch = +v;
+            this._a("errorBorderRightWidth", this.i.ch);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDefinitionBaseComponent.prototype, "errorBorderBottomWidth", {
         get: function () {
-            return this.i.bh;
+            return this.i.cf;
         },
         set: function (v) {
-            this.i.bh = +v;
-            this._a("errorBorderBottomWidth", this.i.bh);
+            this.i.cf = +v;
+            this._a("errorBorderBottomWidth", this.i.cf);
         },
         enumerable: false,
         configurable: true
@@ -450,11 +581,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual background color that will be used.
         */
         get: function () {
-            return brushToString(this.i.d1);
+            return brushToString(this.i.f5);
         },
         set: function (v) {
-            this.i.d1 = stringToBrush(v);
-            this._a("actualBackground", brushToString(this.i.d1));
+            this.i.f5 = stringToBrush(v);
+            this._a("actualBackground", brushToString(this.i.f5));
         },
         enumerable: false,
         configurable: true
@@ -464,11 +595,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual background color that will be used.
         */
         get: function () {
-            return brushToString(this.i.d0);
+            return brushToString(this.i.f4);
         },
         set: function (v) {
-            this.i.d0 = stringToBrush(v);
-            this._a("actualActivationBorder", brushToString(this.i.d0));
+            this.i.f4 = stringToBrush(v);
+            this._a("actualActivationBorder", brushToString(this.i.f4));
         },
         enumerable: false,
         configurable: true
@@ -478,11 +609,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual error border color that will be used.
         */
         get: function () {
-            return brushToString(this.i.d3);
+            return brushToString(this.i.f9);
         },
         set: function (v) {
-            this.i.d3 = stringToBrush(v);
-            this._a("actualErrorBorder", brushToString(this.i.d3));
+            this.i.f9 = stringToBrush(v);
+            this._a("actualErrorBorder", brushToString(this.i.f9));
         },
         enumerable: false,
         configurable: true
@@ -492,11 +623,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the background color for content that sticks to the top of the grid.
         */
         get: function () {
-            return brushToString(this.i.ek);
+            return brushToString(this.i.gw);
         },
         set: function (v) {
-            this.i.ek = stringToBrush(v);
-            this._a("stickyRowBackground", brushToString(this.i.ek));
+            this.i.gw = stringToBrush(v);
+            this._a("stickyRowBackground", brushToString(this.i.gw));
         },
         enumerable: false,
         configurable: true
@@ -506,11 +637,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual background color for content that sticks to the top of the grid.
         */
         get: function () {
-            return brushToString(this.i.d6);
+            return brushToString(this.i.gc);
         },
         set: function (v) {
-            this.i.d6 = stringToBrush(v);
-            this._a("actualStickyRowBackground", brushToString(this.i.d6));
+            this.i.gc = stringToBrush(v);
+            this._a("actualStickyRowBackground", brushToString(this.i.gc));
         },
         enumerable: false,
         configurable: true
@@ -520,11 +651,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the background color for cells belonging to rows marked as pinned.
         */
         get: function () {
-            return brushToString(this.i.ej);
+            return brushToString(this.i.gv);
         },
         set: function (v) {
-            this.i.ej = stringToBrush(v);
-            this._a("pinnedRowBackground", brushToString(this.i.ej));
+            this.i.gv = stringToBrush(v);
+            this._a("pinnedRowBackground", brushToString(this.i.gv));
         },
         enumerable: false,
         configurable: true
@@ -534,11 +665,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual background color for cells belonging to rows marked as pinned.
         */
         get: function () {
-            return brushToString(this.i.d5);
+            return brushToString(this.i.gb);
         },
         set: function (v) {
-            this.i.d5 = stringToBrush(v);
-            this._a("actualPinnedRowBackground", brushToString(this.i.d5));
+            this.i.gb = stringToBrush(v);
+            this._a("actualPinnedRowBackground", brushToString(this.i.gb));
         },
         enumerable: false,
         configurable: true
@@ -548,11 +679,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the color for the last row in the sticky row area.
         */
         get: function () {
-            return brushToString(this.i.ei);
+            return brushToString(this.i.gu);
         },
         set: function (v) {
-            this.i.ei = stringToBrush(v);
-            this._a("lastStickyRowBackground", brushToString(this.i.ei));
+            this.i.gu = stringToBrush(v);
+            this._a("lastStickyRowBackground", brushToString(this.i.gu));
         },
         enumerable: false,
         configurable: true
@@ -562,11 +693,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual color for the last row in the sticky row area.
         */
         get: function () {
-            return brushToString(this.i.d4);
+            return brushToString(this.i.ga);
         },
         set: function (v) {
-            this.i.d4 = stringToBrush(v);
-            this._a("actualLastStickyRowBackground", brushToString(this.i.d4));
+            this.i.ga = stringToBrush(v);
+            this._a("actualLastStickyRowBackground", brushToString(this.i.ga));
         },
         enumerable: false,
         configurable: true
@@ -576,11 +707,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the opacity of the content.
         */
         get: function () {
-            return this.i.au;
+            return this.i.bh;
         },
         set: function (v) {
-            this.i.au = +v;
-            this._a("contentOpacity", this.i.au);
+            this.i.bh = +v;
+            this._a("contentOpacity", this.i.bh);
         },
         enumerable: false,
         configurable: true
@@ -590,11 +721,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the horizontal alignment to use for the cell content.
         */
         get: function () {
-            return this.i.e;
+            return this.i.g;
         },
         set: function (v) {
-            this.i.e = ensureEnum(CellContentHorizontalAlignment_$type, v);
-            this._a("horizontalAlignment", enumToString(CellContentHorizontalAlignment_$type, this.i.e));
+            this.i.g = ensureEnum(CellContentHorizontalAlignment_$type, v);
+            this._a("horizontalAlignment", enumToString(CellContentHorizontalAlignment_$type, this.i.g));
         },
         enumerable: false,
         configurable: true
@@ -604,11 +735,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the vertical alignment to use for the cell content.
         */
         get: function () {
-            return this.i.j;
+            return this.i.l;
         },
         set: function (v) {
-            this.i.j = ensureEnum(CellContentVerticalAlignment_$type, v);
-            this._a("verticalAlignment", enumToString(CellContentVerticalAlignment_$type, this.i.j));
+            this.i.l = ensureEnum(CellContentVerticalAlignment_$type, v);
+            this._a("verticalAlignment", enumToString(CellContentVerticalAlignment_$type, this.i.l));
         },
         enumerable: false,
         configurable: true
@@ -618,11 +749,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the line breaking mode to use if text is present in the cell.
         */
         get: function () {
-            return this.i.y;
+            return this.i.ac;
         },
         set: function (v) {
-            this.i.y = ensureEnum(TextCellLineBreakMode_$type, v);
-            this._a("lineBreakMode", enumToString(TextCellLineBreakMode_$type, this.i.y));
+            this.i.ac = ensureEnum(TextCellLineBreakMode_$type, v);
+            this._a("lineBreakMode", enumToString(TextCellLineBreakMode_$type, this.i.ac));
         },
         enumerable: false,
         configurable: true
@@ -632,11 +763,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual line break mode which will be used if text is present in the cell.
         */
         get: function () {
-            return this.i.x;
+            return this.i.ab;
         },
         set: function (v) {
-            this.i.x = ensureEnum(TextCellLineBreakMode_$type, v);
-            this._a("actualLineBreakMode", enumToString(TextCellLineBreakMode_$type, this.i.x));
+            this.i.ab = ensureEnum(TextCellLineBreakMode_$type, v);
+            this._a("actualLineBreakMode", enumToString(TextCellLineBreakMode_$type, this.i.ab));
         },
         enumerable: false,
         configurable: true
@@ -646,11 +777,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the color to use for displaying text.
         */
         get: function () {
-            return brushToString(this.i.el);
+            return brushToString(this.i.gx);
         },
         set: function (v) {
-            this.i.el = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.el));
+            this.i.gx = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.gx));
         },
         enumerable: false,
         configurable: true
@@ -660,11 +791,137 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual color used for displaying text.
         */
         get: function () {
-            return brushToString(this.i.d7);
+            return brushToString(this.i.gd);
+        },
+        set: function (v) {
+            this.i.gd = stringToBrush(v);
+            this._a("actualTextColor", brushToString(this.i.gd));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "isBarSupported", {
+        /**
+         * Gets or sets whether the bar is supported.
+        */
+        get: function () {
+            return this.i.ar;
+        },
+        set: function (v) {
+            this.i.ar = ensureBool(v);
+            this._a("isBarSupported", this.i.ar);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "barBackground", {
+        /**
+         * Gets or sets the color to use for value bars.
+        */
+        get: function () {
+            return brushToString(this.i.gf);
+        },
+        set: function (v) {
+            this.i.gf = stringToBrush(v);
+            this._a("barBackground", brushToString(this.i.gf));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "actualBarBackground", {
+        /**
+         * Gets the actual color used for value bars.
+        */
+        get: function () {
+            return brushToString(this.i.f6);
+        },
+        set: function (v) {
+            this.i.f6 = stringToBrush(v);
+            this._a("actualBarBackground", brushToString(this.i.f6));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "barOutline", {
+        /**
+         * Gets or sets the Outline color to use for value bars.
+        */
+        get: function () {
+            return brushToString(this.i.gg);
+        },
+        set: function (v) {
+            this.i.gg = stringToBrush(v);
+            this._a("barOutline", brushToString(this.i.gg));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "actualBarOutline", {
+        /**
+         * Gets the actual Outline color used for value bars.
+        */
+        get: function () {
+            return brushToString(this.i.f7);
+        },
+        set: function (v) {
+            this.i.f7 = stringToBrush(v);
+            this._a("actualBarOutline", brushToString(this.i.f7));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "barStrokeThickness", {
+        /**
+         * Gets or sets the stroke thickness to use for value bars.
+        */
+        get: function () {
+            return this.i.ca;
+        },
+        set: function (v) {
+            this.i.ca = +v;
+            this._a("barStrokeThickness", this.i.ca);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "actualBarStrokeThickness", {
+        /**
+         * Gets the actual stroke thickness used for value bars.
+        */
+        get: function () {
+            return this.i.b8;
+        },
+        set: function (v) {
+            this.i.b8 = +v;
+            this._a("actualBarStrokeThickness", this.i.b8);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "barCornerRadius", {
+        /**
+         * Gets or sets the stroke thickness to use for value bars.
+        */
+        get: function () {
+            return this.i.b9;
+        },
+        set: function (v) {
+            this.i.b9 = +v;
+            this._a("barCornerRadius", this.i.b9);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "actualBarCornerRadius", {
+        /**
+         * Gets the actual stroke thickness used for value bars.
+        */
+        get: function () {
+            return this.i.b7;
         },
         set: function (v) {
-            this.i.d7 = stringToBrush(v);
-            this._a("actualTextColor", brushToString(this.i.d7));
+            this.i.b7 = +v;
+            this._a("actualBarCornerRadius", this.i.b7);
         },
         enumerable: false,
         configurable: true
@@ -674,11 +931,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the color to use for displaying text.
         */
         get: function () {
-            return this.i.aw;
+            return this.i.bm;
         },
         set: function (v) {
-            this.i.aw = +v;
-            this._a("pinnedRowOpacity", this.i.aw);
+            this.i.bm = +v;
+            this._a("pinnedRowOpacity", this.i.bm);
         },
         enumerable: false,
         configurable: true
@@ -688,11 +945,11 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the color to use for displaying text.
         */
         get: function () {
-            return this.i.at;
+            return this.i.bf;
         },
         set: function (v) {
-            this.i.at = +v;
-            this._a("actualPinnedRowOpacity", this.i.at);
+            this.i.bf = +v;
+            this._a("actualPinnedRowOpacity", this.i.bf);
         },
         enumerable: false,
         configurable: true
@@ -713,23 +970,43 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDefinitionBaseComponent.prototype, "isBarRequired", {
+        get: function () {
+            return this.i.aq;
+        },
+        enumerable: false,
+        configurable: true
+    });
     IgcDefinitionBaseComponent.prototype.findByName = function (name) {
         if (this.findEphemera) {
             if (name && name.indexOf("@@e:") == 0) {
                 return this.findEphemera(name);
             }
         }
+        if (this.conditionalStyles != null && this.conditionalStyles.findByName && this.conditionalStyles.findByName(name)) {
+            return this.conditionalStyles.findByName(name);
+        }
         return null;
     };
+    IgcDefinitionBaseComponent.prototype.transitionStyleOut = function (style) {
+        this.i.e3((style == null ? null : style.i));
+    };
+    IgcDefinitionBaseComponent.prototype.transitionStyleIn = function (style) {
+        this.i.e2((style == null ? null : style.i));
+    };
+    IgcDefinitionBaseComponent.prototype.isStyleTransitioningOut = function (style) {
+        var iv = this.i.as((style == null ? null : style.i));
+        return (iv);
+    };
     IgcDefinitionBaseComponent.prototype.setNamedValue = function (valueName, animationType, value) {
-        this.i.c7(valueName, (animationType == null ? null : animationType), value);
+        this.i.e1(valueName, (animationType == null ? null : animationType), value);
     };
     /**
      * Returns if this definition has named value.
     
     */
     IgcDefinitionBaseComponent.prototype.hasNamedValues = function () {
-        var iv = this.i.ai();
+        var iv = this.i.ap();
         return (iv);
     };
     /**
@@ -738,7 +1015,7 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
     * @param valueName  * The named value name to check for.
     */
     IgcDefinitionBaseComponent.prototype.hasNamedValue = function (valueName) {
-        var iv = this.i.ah(valueName);
+        var iv = this.i.ao(valueName);
         return (iv);
     };
     /**
@@ -747,7 +1024,7 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
     * @param valueName  * The named value name to remove.
     */
     IgcDefinitionBaseComponent.prototype.removeNamedValue = function (valueName) {
-        this.i.c5(valueName);
+        this.i.ew(valueName);
     };
     /**
      * Gets the value for a named value from this definition.
@@ -755,7 +1032,7 @@ var IgcDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function (_super)
     * @param valueName  * The named value name to check for.
     */
     IgcDefinitionBaseComponent.prototype.getNamedValue = function (valueName) {
-        var iv = this.i.bn(valueName);
+        var iv = this.i.co(valueName);
         return (iv);
     };
     Object.defineProperty(IgcDefinitionBaseComponent.prototype, "dataBinding", {