igniteui-webcomponents-layouts 5.2.0 → 5.3.0

package/esm5/lib/igc-tool-panel-component.js

@@ -16,6 +16,7 @@ import { IgcToolActionCollection } from "./igc-tool-action-collection";
 import { IgcToolPanelContentRefreshedEventArgs } from "./igc-tool-panel-content-refreshed-event-args";
 import { IgcToolCommandEventArgs } from './igc-tool-command-event-args';
 import { NestedActionMode_$type } from './NestedActionMode';
+import { ScrollbarStyle_$type } from "igniteui-webcomponents-core";
 var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(IgcToolPanelComponent, _super);
     function IgcToolPanelComponent() {
@@ -275,11 +276,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
      * Gets or sets if the tool actions should display their submenus on mouse hover.
     */
         get: function () {
-            return this.i.ay;
+            return this.i.a1;
         },
         set: function (v) {
-            this.i.ay = ensureBool(v);
-            this._a("showOnHover", this.i.ay);
+            this.i.a1 = ensureBool(v);
+            this._a("showOnHover", this.i.a1);
         },
         enumerable: false,
         configurable: true
@@ -289,11 +290,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets if the tool action icon buttons should display their tooltips on mouse hover.
         */
         get: function () {
-            return this.i.az;
+            return this.i.a2;
         },
         set: function (v) {
-            this.i.az = ensureBool(v);
-            this._a("showTooltipOnHover", this.i.az);
+            this.i.a2 = ensureBool(v);
+            this._a("showTooltipOnHover", this.i.a2);
         },
         enumerable: false,
         configurable: true
@@ -305,11 +306,25 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * always keep the dropdown open during a hover open and will require an extra click to close.
         */
         get: function () {
-            return this.i.cp;
+            return this.i.ct;
         },
         set: function (v) {
-            this.i.cp = +v;
-            this._a("dropdownClickBuffer", this.i.cp);
+            this.i.ct = +v;
+            this._a("dropdownClickBuffer", this.i.ct);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcToolPanelComponent.prototype, "stopPropagation", {
+        /**
+         * Prevents clicks on the tool actions from bubbling.
+        */
+        get: function () {
+            return this.i.a3;
+        },
+        set: function (v) {
+            this.i.a3 = ensureBool(v);
+            this._a("stopPropagation", this.i.a3);
         },
         enumerable: false,
         configurable: true
@@ -319,16 +334,16 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the text style for the panel.
         */
         get: function () {
-            if (this.i.ak == null) {
+            if (this.i.am == null) {
                 return null;
             }
-            return this.i.ak.fontString;
+            return this.i.am.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.ak = fi;
-            this._a("cellTextStyle", this.i.ak != null ? this.i.ak.fontString : "");
+            this.i.am = fi;
+            this._a("cellTextStyle", this.i.am != null ? this.i.am.fontString : "");
         },
         enumerable: false,
         configurable: true
@@ -338,16 +353,16 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the subtitle text style for the panel.
         */
         get: function () {
-            if (this.i.am == null) {
+            if (this.i.ao == null) {
                 return null;
             }
-            return this.i.am.fontString;
+            return this.i.ao.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.am = fi;
-            this._a("subtitleTextStyle", this.i.am != null ? this.i.am.fontString : "");
+            this.i.ao = fi;
+            this._a("subtitleTextStyle", this.i.ao != null ? this.i.ao.fontString : "");
         },
         enumerable: false,
         configurable: true
@@ -357,11 +372,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the base built in theme to use for the checkbox.
         */
         get: function () {
-            return this.i.x;
+            return this.i.z;
         },
         set: function (v) {
-            this.i.x = ensureEnum(BaseControlTheme_$type, v);
-            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.x));
+            this.i.z = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.z));
         },
         enumerable: false,
         configurable: true
@@ -371,11 +386,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the display density to use for the toolbar.
         */
         get: function () {
-            return this.i.ac;
+            return this.i.ae;
         },
         set: function (v) {
-            this.i.ac = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.ac));
+            this.i.ae = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.ae));
         },
         enumerable: false,
         configurable: true
@@ -385,11 +400,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the resolved display density to use for the toolbar.
         */
         get: function () {
-            return this.i.ab;
+            return this.i.ad;
         },
         set: function (v) {
-            this.i.ab = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.ab));
+            this.i.ad = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.ad));
         },
         enumerable: false,
         configurable: true
@@ -399,22 +414,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the color to use for the background of the component.
         */
         get: function () {
-            return brushToString(this.i.iu);
+            return brushToString(this.i.i3);
         },
         set: function (v) {
-            this.i.iu = stringToBrush(v);
-            this._a("backgroundColor", brushToString(this.i.iu));
+            this.i.i3 = stringToBrush(v);
+            this._a("backgroundColor", brushToString(this.i.i3));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualBackgroundColor", {
         get: function () {
-            return brushToString(this.i.h7);
+            return brushToString(this.i.ih);
         },
         set: function (v) {
-            this.i.h7 = stringToBrush(v);
-            this._a("actualBackgroundColor", brushToString(this.i.h7));
+            this.i.ih = stringToBrush(v);
+            this._a("actualBackgroundColor", brushToString(this.i.ih));
         },
         enumerable: false,
         configurable: true
@@ -424,22 +439,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the background color for submenus.
         */
         get: function () {
-            return brushToString(this.i.ja);
+            return brushToString(this.i.jj);
         },
         set: function (v) {
-            this.i.ja = stringToBrush(v);
-            this._a("submenuBackgroundColor", brushToString(this.i.ja));
+            this.i.jj = stringToBrush(v);
+            this._a("submenuBackgroundColor", brushToString(this.i.jj));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualSubmenuBackgroundColor", {
         get: function () {
-            return brushToString(this.i.im);
+            return brushToString(this.i.iw);
         },
         set: function (v) {
-            this.i.im = stringToBrush(v);
-            this._a("actualSubmenuBackgroundColor", brushToString(this.i.im));
+            this.i.iw = stringToBrush(v);
+            this._a("actualSubmenuBackgroundColor", brushToString(this.i.iw));
         },
         enumerable: false,
         configurable: true
@@ -449,22 +464,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the group header background color.
         */
         get: function () {
-            return brushToString(this.i.i0);
+            return brushToString(this.i.i9);
         },
         set: function (v) {
-            this.i.i0 = stringToBrush(v);
-            this._a("groupHeaderBackgroundColor", brushToString(this.i.i0));
+            this.i.i9 = stringToBrush(v);
+            this._a("groupHeaderBackgroundColor", brushToString(this.i.i9));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualGroupHeaderBackgroundColor", {
         get: function () {
-            return brushToString(this.i.ib);
+            return brushToString(this.i.il);
         },
         set: function (v) {
-            this.i.ib = stringToBrush(v);
-            this._a("actualGroupHeaderBackgroundColor", brushToString(this.i.ib));
+            this.i.il = stringToBrush(v);
+            this._a("actualGroupHeaderBackgroundColor", brushToString(this.i.il));
         },
         enumerable: false,
         configurable: true
@@ -474,22 +489,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the separator background color.
         */
         get: function () {
-            return brushToString(this.i.i9);
+            return brushToString(this.i.ji);
         },
         set: function (v) {
-            this.i.i9 = stringToBrush(v);
-            this._a("separatorBackgroundColor", brushToString(this.i.i9));
+            this.i.ji = stringToBrush(v);
+            this._a("separatorBackgroundColor", brushToString(this.i.ji));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualSeparatorBackgroundColor", {
         get: function () {
-            return brushToString(this.i.il);
+            return brushToString(this.i.iv);
         },
         set: function (v) {
-            this.i.il = stringToBrush(v);
-            this._a("actualSeparatorBackgroundColor", brushToString(this.i.il));
+            this.i.iv = stringToBrush(v);
+            this._a("actualSeparatorBackgroundColor", brushToString(this.i.iv));
         },
         enumerable: false,
         configurable: true
@@ -499,22 +514,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the group header separator background color.
         */
         get: function () {
-            return brushToString(this.i.i1);
+            return brushToString(this.i.ja);
         },
         set: function (v) {
-            this.i.i1 = stringToBrush(v);
-            this._a("groupHeaderSeparatorBackgroundColor", brushToString(this.i.i1));
+            this.i.ja = stringToBrush(v);
+            this._a("groupHeaderSeparatorBackgroundColor", brushToString(this.i.ja));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualGroupHeaderSeparatorBackgroundColor", {
         get: function () {
-            return brushToString(this.i.ic);
+            return brushToString(this.i.im);
         },
         set: function (v) {
-            this.i.ic = stringToBrush(v);
-            this._a("actualGroupHeaderSeparatorBackgroundColor", brushToString(this.i.ic));
+            this.i.im = stringToBrush(v);
+            this._a("actualGroupHeaderSeparatorBackgroundColor", brushToString(this.i.im));
         },
         enumerable: false,
         configurable: true
@@ -524,22 +539,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the hover background color.
         */
         get: function () {
-            return brushToString(this.i.i5);
+            return brushToString(this.i.je);
         },
         set: function (v) {
-            this.i.i5 = stringToBrush(v);
-            this._a("hoverBackgroundColor", brushToString(this.i.i5));
+            this.i.je = stringToBrush(v);
+            this._a("hoverBackgroundColor", brushToString(this.i.je));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualHoverBackgroundColor", {
         get: function () {
-            return brushToString(this.i.ih);
+            return brushToString(this.i.ir);
         },
         set: function (v) {
-            this.i.ih = stringToBrush(v);
-            this._a("actualHoverBackgroundColor", brushToString(this.i.ih));
+            this.i.ir = stringToBrush(v);
+            this._a("actualHoverBackgroundColor", brushToString(this.i.ir));
         },
         enumerable: false,
         configurable: true
@@ -549,33 +564,33 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the color to use for the text of the component.
         */
         get: function () {
-            return brushToString(this.i.jc);
+            return brushToString(this.i.jl);
         },
         set: function (v) {
-            this.i.jc = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.jc));
+            this.i.jl = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.jl));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualTextColor", {
         get: function () {
-            return brushToString(this.i.ip);
+            return brushToString(this.i.iy);
         },
         set: function (v) {
-            this.i.ip = stringToBrush(v);
-            this._a("actualTextColor", brushToString(this.i.ip));
+            this.i.iy = stringToBrush(v);
+            this._a("actualTextColor", brushToString(this.i.iy));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualSubtitleTextColor", {
         get: function () {
-            return brushToString(this.i.io);
+            return brushToString(this.i.ix);
         },
         set: function (v) {
-            this.i.io = stringToBrush(v);
-            this._a("actualSubtitleTextColor", brushToString(this.i.io));
+            this.i.ix = stringToBrush(v);
+            this._a("actualSubtitleTextColor", brushToString(this.i.ix));
         },
         enumerable: false,
         configurable: true
@@ -585,11 +600,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the color to use for the subtitle of the component.
         */
         get: function () {
-            return brushToString(this.i.jb);
+            return brushToString(this.i.jk);
         },
         set: function (v) {
-            this.i.jb = stringToBrush(v);
-            this._a("subtitleTextColor", brushToString(this.i.jb));
+            this.i.jk = stringToBrush(v);
+            this._a("subtitleTextColor", brushToString(this.i.jk));
         },
         enumerable: false,
         configurable: true
@@ -599,22 +614,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the color to use for the text in disabled tool actions.
         */
         get: function () {
-            return brushToString(this.i.ix);
+            return brushToString(this.i.i6);
         },
         set: function (v) {
-            this.i.ix = stringToBrush(v);
-            this._a("disabledTextColor", brushToString(this.i.ix));
+            this.i.i6 = stringToBrush(v);
+            this._a("disabledTextColor", brushToString(this.i.i6));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualDisabledTextColor", {
         get: function () {
-            return brushToString(this.i.ia);
+            return brushToString(this.i.ik);
         },
         set: function (v) {
-            this.i.ia = stringToBrush(v);
-            this._a("actualDisabledTextColor", brushToString(this.i.ia));
+            this.i.ik = stringToBrush(v);
+            this._a("actualDisabledTextColor", brushToString(this.i.ik));
         },
         enumerable: false,
         configurable: true
@@ -624,22 +639,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the text color for group header tool actions.
         */
         get: function () {
-            return brushToString(this.i.i3);
+            return brushToString(this.i.jc);
         },
         set: function (v) {
-            this.i.i3 = stringToBrush(v);
-            this._a("groupHeaderTextColor", brushToString(this.i.i3));
+            this.i.jc = stringToBrush(v);
+            this._a("groupHeaderTextColor", brushToString(this.i.jc));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualGroupHeaderTextColor", {
         get: function () {
-            return brushToString(this.i.ie);
+            return brushToString(this.i.ip);
         },
         set: function (v) {
-            this.i.ie = stringToBrush(v);
-            this._a("actualGroupHeaderTextColor", brushToString(this.i.ie));
+            this.i.ip = stringToBrush(v);
+            this._a("actualGroupHeaderTextColor", brushToString(this.i.ip));
         },
         enumerable: false,
         configurable: true
@@ -649,22 +664,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the text color for group header subtitle.
         */
         get: function () {
-            return brushToString(this.i.i2);
+            return brushToString(this.i.jb);
         },
         set: function (v) {
-            this.i.i2 = stringToBrush(v);
-            this._a("groupHeaderSubtitleTextColor", brushToString(this.i.i2));
+            this.i.jb = stringToBrush(v);
+            this._a("groupHeaderSubtitleTextColor", brushToString(this.i.jb));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualGroupHeaderSubtitleTextColor", {
         get: function () {
-            return brushToString(this.i.id);
+            return brushToString(this.i.io);
         },
         set: function (v) {
-            this.i.id = stringToBrush(v);
-            this._a("actualGroupHeaderSubtitleTextColor", brushToString(this.i.id));
+            this.i.io = stringToBrush(v);
+            this._a("actualGroupHeaderSubtitleTextColor", brushToString(this.i.io));
         },
         enumerable: false,
         configurable: true
@@ -674,22 +689,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the tooltip text color.
         */
         get: function () {
-            return brushToString(this.i.je);
+            return brushToString(this.i.jn);
         },
         set: function (v) {
-            this.i.je = stringToBrush(v);
-            this._a("toolTipTextColor", brushToString(this.i.je));
+            this.i.jn = stringToBrush(v);
+            this._a("toolTipTextColor", brushToString(this.i.jn));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualToolTipTextColor", {
         get: function () {
-            return brushToString(this.i.ir);
+            return brushToString(this.i.i0);
         },
         set: function (v) {
-            this.i.ir = stringToBrush(v);
-            this._a("actualToolTipTextColor", brushToString(this.i.ir));
+            this.i.i0 = stringToBrush(v);
+            this._a("actualToolTipTextColor", brushToString(this.i.i0));
         },
         enumerable: false,
         configurable: true
@@ -699,11 +714,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the tooltip background color.
         */
         get: function () {
-            return brushToString(this.i.jd);
+            return brushToString(this.i.jm);
         },
         set: function (v) {
-            this.i.jd = stringToBrush(v);
-            this._a("toolTipBackgroundColor", brushToString(this.i.jd));
+            this.i.jm = stringToBrush(v);
+            this._a("toolTipBackgroundColor", brushToString(this.i.jm));
         },
         enumerable: false,
         configurable: true
@@ -713,11 +728,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual tooltip background color.
         */
         get: function () {
-            return brushToString(this.i.iq);
+            return brushToString(this.i.iz);
         },
         set: function (v) {
-            this.i.iq = stringToBrush(v);
-            this._a("actualToolTipBackgroundColor", brushToString(this.i.iq));
+            this.i.iz = stringToBrush(v);
+            this._a("actualToolTipBackgroundColor", brushToString(this.i.iz));
         },
         enumerable: false,
         configurable: true
@@ -727,11 +742,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the tooltip corner radius.
         */
         get: function () {
-            return this.i.ci;
+            return this.i.cm;
         },
         set: function (v) {
-            this.i.ci = +v;
-            this._a("toolTipCornerRadius", this.i.ci);
+            this.i.cm = +v;
+            this._a("toolTipCornerRadius", this.i.cm);
         },
         enumerable: false,
         configurable: true
@@ -741,11 +756,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual tooltip corner radius.
         */
         get: function () {
-            return this.i.b4;
+            return this.i.b8;
         },
         set: function (v) {
-            this.i.b4 = +v;
-            this._a("actualToolTipCornerRadius", this.i.b4);
+            this.i.b8 = +v;
+            this._a("actualToolTipCornerRadius", this.i.b8);
         },
         enumerable: false,
         configurable: true
@@ -755,11 +770,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the shadow elevation for the tooltip.
         */
         get: function () {
-            return this.i.cj;
+            return this.i.cn;
         },
         set: function (v) {
-            this.i.cj = +v;
-            this._a("toolTipElevation", this.i.cj);
+            this.i.cn = +v;
+            this._a("toolTipElevation", this.i.cn);
         },
         enumerable: false,
         configurable: true
@@ -769,11 +784,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual shadow elevation used by the tooltip.
         */
         get: function () {
-            return this.i.b5;
+            return this.i.b9;
         },
         set: function (v) {
-            this.i.b5 = +v;
-            this._a("actualToolTipElevation", this.i.b5);
+            this.i.b9 = +v;
+            this._a("actualToolTipElevation", this.i.b9);
         },
         enumerable: false,
         configurable: true
@@ -783,11 +798,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the fill color of icons in the ToolPanel.
         */
         get: function () {
-            return brushToString(this.i.i6);
+            return brushToString(this.i.jf);
         },
         set: function (v) {
-            this.i.i6 = stringToBrush(v);
-            this._a("iconFill", brushToString(this.i.i6));
+            this.i.jf = stringToBrush(v);
+            this._a("iconFill", brushToString(this.i.jf));
         },
         enumerable: false,
         configurable: true
@@ -797,11 +812,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual icon fill color.
         */
         get: function () {
-            return brushToString(this.i.ii);
+            return brushToString(this.i.is);
         },
         set: function (v) {
-            this.i.ii = stringToBrush(v);
-            this._a("actualIconFill", brushToString(this.i.ii));
+            this.i.is = stringToBrush(v);
+            this._a("actualIconFill", brushToString(this.i.is));
         },
         enumerable: false,
         configurable: true
@@ -811,11 +826,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the stroke color of icons in the ToolPanel.
         */
         get: function () {
-            return brushToString(this.i.i7);
+            return brushToString(this.i.jg);
         },
         set: function (v) {
-            this.i.i7 = stringToBrush(v);
-            this._a("iconStroke", brushToString(this.i.i7));
+            this.i.jg = stringToBrush(v);
+            this._a("iconStroke", brushToString(this.i.jg));
         },
         enumerable: false,
         configurable: true
@@ -825,11 +840,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual icon stroke color.
         */
         get: function () {
-            return brushToString(this.i.ij);
+            return brushToString(this.i.it);
         },
         set: function (v) {
-            this.i.ij = stringToBrush(v);
-            this._a("actualIconStroke", brushToString(this.i.ij));
+            this.i.it = stringToBrush(v);
+            this._a("actualIconStroke", brushToString(this.i.it));
         },
         enumerable: false,
         configurable: true
@@ -839,22 +854,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the left padding for separators in the vertical orientation.
         */
         get: function () {
-            return this.i.cf;
+            return this.i.cj;
         },
         set: function (v) {
-            this.i.cf = +v;
-            this._a("separatorVerticalPaddingLeft", this.i.cf);
+            this.i.cj = +v;
+            this._a("separatorVerticalPaddingLeft", this.i.cj);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualSeparatorVerticalPaddingLeft", {
         get: function () {
-            return this.i.b1;
+            return this.i.b5;
         },
         set: function (v) {
-            this.i.b1 = +v;
-            this._a("actualSeparatorVerticalPaddingLeft", this.i.b1);
+            this.i.b5 = +v;
+            this._a("actualSeparatorVerticalPaddingLeft", this.i.b5);
         },
         enumerable: false,
         configurable: true
@@ -864,22 +879,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the right padding for separators in the vertical orientation.
         */
         get: function () {
-            return this.i.cg;
+            return this.i.ck;
         },
         set: function (v) {
-            this.i.cg = +v;
-            this._a("separatorVerticalPaddingRight", this.i.cg);
+            this.i.ck = +v;
+            this._a("separatorVerticalPaddingRight", this.i.ck);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualSeparatorVerticalPaddingRight", {
         get: function () {
-            return this.i.b2;
+            return this.i.b6;
         },
         set: function (v) {
-            this.i.b2 = +v;
-            this._a("actualSeparatorVerticalPaddingRight", this.i.b2);
+            this.i.b6 = +v;
+            this._a("actualSeparatorVerticalPaddingRight", this.i.b6);
         },
         enumerable: false,
         configurable: true
@@ -889,22 +904,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the top padding for separators in the vertical orientation.
         */
         get: function () {
-            return this.i.ch;
+            return this.i.cl;
         },
         set: function (v) {
-            this.i.ch = +v;
-            this._a("separatorVerticalPaddingTop", this.i.ch);
+            this.i.cl = +v;
+            this._a("separatorVerticalPaddingTop", this.i.cl);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualSeparatorVerticalPaddingTop", {
         get: function () {
-            return this.i.b3;
+            return this.i.b7;
         },
         set: function (v) {
-            this.i.b3 = +v;
-            this._a("actualSeparatorVerticalPaddingTop", this.i.b3);
+            this.i.b7 = +v;
+            this._a("actualSeparatorVerticalPaddingTop", this.i.b7);
         },
         enumerable: false,
         configurable: true
@@ -914,22 +929,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the bottom padding for separators in the vertical orientation.
         */
         get: function () {
-            return this.i.ce;
+            return this.i.ci;
         },
         set: function (v) {
-            this.i.ce = +v;
-            this._a("separatorVerticalPaddingBottom", this.i.ce);
+            this.i.ci = +v;
+            this._a("separatorVerticalPaddingBottom", this.i.ci);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualSeparatorVerticalPaddingBottom", {
         get: function () {
-            return this.i.b0;
+            return this.i.b4;
         },
         set: function (v) {
-            this.i.b0 = +v;
-            this._a("actualSeparatorVerticalPaddingBottom", this.i.b0);
+            this.i.b4 = +v;
+            this._a("actualSeparatorVerticalPaddingBottom", this.i.b4);
         },
         enumerable: false,
         configurable: true
@@ -939,22 +954,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the left padding for separators in the horizontal orientation.
         */
         get: function () {
-            return this.i.cb;
+            return this.i.cf;
         },
         set: function (v) {
-            this.i.cb = +v;
-            this._a("separatorHorizontalPaddingLeft", this.i.cb);
+            this.i.cf = +v;
+            this._a("separatorHorizontalPaddingLeft", this.i.cf);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualSeparatorHorizontalPaddingLeft", {
         get: function () {
-            return this.i.bx;
+            return this.i.b1;
         },
         set: function (v) {
-            this.i.bx = +v;
-            this._a("actualSeparatorHorizontalPaddingLeft", this.i.bx);
+            this.i.b1 = +v;
+            this._a("actualSeparatorHorizontalPaddingLeft", this.i.b1);
         },
         enumerable: false,
         configurable: true
@@ -964,22 +979,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the right padding for separators in the horizontal orientation.
         */
         get: function () {
-            return this.i.cc;
+            return this.i.cg;
         },
         set: function (v) {
-            this.i.cc = +v;
-            this._a("separatorHorizontalPaddingRight", this.i.cc);
+            this.i.cg = +v;
+            this._a("separatorHorizontalPaddingRight", this.i.cg);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualSeparatorHorizontalPaddingRight", {
         get: function () {
-            return this.i.by;
+            return this.i.b2;
         },
         set: function (v) {
-            this.i.by = +v;
-            this._a("actualSeparatorHorizontalPaddingRight", this.i.by);
+            this.i.b2 = +v;
+            this._a("actualSeparatorHorizontalPaddingRight", this.i.b2);
         },
         enumerable: false,
         configurable: true
@@ -989,22 +1004,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the top padding for separators in the horizontal orientation.
         */
         get: function () {
-            return this.i.cd;
+            return this.i.ch;
         },
         set: function (v) {
-            this.i.cd = +v;
-            this._a("separatorHorizontalPaddingTop", this.i.cd);
+            this.i.ch = +v;
+            this._a("separatorHorizontalPaddingTop", this.i.ch);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualSeparatorHorizontalPaddingTop", {
         get: function () {
-            return this.i.bz;
+            return this.i.b3;
         },
         set: function (v) {
-            this.i.bz = +v;
-            this._a("actualSeparatorHorizontalPaddingTop", this.i.bz);
+            this.i.b3 = +v;
+            this._a("actualSeparatorHorizontalPaddingTop", this.i.b3);
         },
         enumerable: false,
         configurable: true
@@ -1014,22 +1029,22 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the bottom padding for separators in the horizontal orientation.
         */
         get: function () {
-            return this.i.ca;
+            return this.i.ce;
         },
         set: function (v) {
-            this.i.ca = +v;
-            this._a("separatorHorizontalPaddingBottom", this.i.ca);
+            this.i.ce = +v;
+            this._a("separatorHorizontalPaddingBottom", this.i.ce);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualSeparatorHorizontalPaddingBottom", {
         get: function () {
-            return this.i.bw;
+            return this.i.b0;
         },
         set: function (v) {
-            this.i.bw = +v;
-            this._a("actualSeparatorHorizontalPaddingBottom", this.i.bw);
+            this.i.b0 = +v;
+            this._a("actualSeparatorHorizontalPaddingBottom", this.i.b0);
         },
         enumerable: false,
         configurable: true
@@ -1053,11 +1068,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the row height for the panel.
         */
         get: function () {
-            return this.i.ct;
+            return this.i.cx;
         },
         set: function (v) {
-            this.i.ct = +v;
-            this._a("rowHeight", this.i.ct);
+            this.i.cx = +v;
+            this._a("rowHeight", this.i.cx);
         },
         enumerable: false,
         configurable: true
@@ -1067,73 +1082,73 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual row height used by the panel.
         */
         get: function () {
-            return this.i.bv;
+            return this.i.bz;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "highlightWidth", {
         get: function () {
-            return this.i.b9;
+            return this.i.cd;
         },
         set: function (v) {
-            this.i.b9 = +v;
-            this._a("highlightWidth", this.i.b9);
+            this.i.cd = +v;
+            this._a("highlightWidth", this.i.cd);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualHighlightWidth", {
         get: function () {
-            return this.i.bu;
+            return this.i.by;
         },
         set: function (v) {
-            this.i.bu = +v;
-            this._a("actualHighlightWidth", this.i.bu);
+            this.i.by = +v;
+            this._a("actualHighlightWidth", this.i.by);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "highlightRadius", {
         get: function () {
-            return this.i.b8;
+            return this.i.cc;
         },
         set: function (v) {
-            this.i.b8 = +v;
-            this._a("highlightRadius", this.i.b8);
+            this.i.cc = +v;
+            this._a("highlightRadius", this.i.cc);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualHighlightRadius", {
         get: function () {
-            return this.i.bt;
+            return this.i.bx;
         },
         set: function (v) {
-            this.i.bt = +v;
-            this._a("actualHighlightRadius", this.i.bt);
+            this.i.bx = +v;
+            this._a("actualHighlightRadius", this.i.bx);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "highlightColor", {
         get: function () {
-            return brushToString(this.i.i4);
+            return brushToString(this.i.jd);
         },
         set: function (v) {
-            this.i.i4 = stringToBrush(v);
-            this._a("highlightColor", brushToString(this.i.i4));
+            this.i.jd = stringToBrush(v);
+            this._a("highlightColor", brushToString(this.i.jd));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "actualHighlightColor", {
         get: function () {
-            return brushToString(this.i.ig);
+            return brushToString(this.i.iq);
         },
         set: function (v) {
-            this.i.ig = stringToBrush(v);
-            this._a("actualHighlightColor", brushToString(this.i.ig));
+            this.i.iq = stringToBrush(v);
+            this._a("actualHighlightColor", brushToString(this.i.iq));
         },
         enumerable: false,
         configurable: true
@@ -1143,11 +1158,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the stroke color for all icon menu dropdown arrows.
         */
         get: function () {
-            return brushToString(this.i.i8);
+            return brushToString(this.i.jh);
         },
         set: function (v) {
-            this.i.i8 = stringToBrush(v);
-            this._a("menuArrowStroke", brushToString(this.i.i8));
+            this.i.jh = stringToBrush(v);
+            this._a("menuArrowStroke", brushToString(this.i.jh));
         },
         enumerable: false,
         configurable: true
@@ -1157,11 +1172,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual stroke color for all icon menu dropdown arrows.
         */
         get: function () {
-            return brushToString(this.i.ik);
+            return brushToString(this.i.iu);
         },
         set: function (v) {
-            this.i.ik = stringToBrush(v);
-            this._a("actualMenuArrowStroke", brushToString(this.i.ik));
+            this.i.iu = stringToBrush(v);
+            this._a("actualMenuArrowStroke", brushToString(this.i.iu));
         },
         enumerable: false,
         configurable: true
@@ -1171,11 +1186,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the background color of the radio when in the unchecked state.
         */
         get: function () {
-            return brushToString(this.i.jf);
+            return brushToString(this.i.jo);
         },
         set: function (v) {
-            this.i.jf = stringToBrush(v);
-            this._a("uncheckedBackgroundColor", brushToString(this.i.jf));
+            this.i.jo = stringToBrush(v);
+            this._a("uncheckedBackgroundColor", brushToString(this.i.jo));
         },
         enumerable: false,
         configurable: true
@@ -1185,11 +1200,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual background color of the radio when in the unchecked state.
         */
         get: function () {
-            return brushToString(this.i.is);
+            return brushToString(this.i.i1);
         },
         set: function (v) {
-            this.i.is = stringToBrush(v);
-            this._a("actualUncheckedBackgroundColor", brushToString(this.i.is));
+            this.i.i1 = stringToBrush(v);
+            this._a("actualUncheckedBackgroundColor", brushToString(this.i.i1));
         },
         enumerable: false,
         configurable: true
@@ -1199,11 +1214,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the background color of the radio when in the checked state.
         */
         get: function () {
-            return brushToString(this.i.iv);
+            return brushToString(this.i.i4);
         },
         set: function (v) {
-            this.i.iv = stringToBrush(v);
-            this._a("checkedBackgroundColor", brushToString(this.i.iv));
+            this.i.i4 = stringToBrush(v);
+            this._a("checkedBackgroundColor", brushToString(this.i.i4));
         },
         enumerable: false,
         configurable: true
@@ -1213,11 +1228,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual background color of the radio when in the checked state.
         */
         get: function () {
-            return brushToString(this.i.h8);
+            return brushToString(this.i.ii);
         },
         set: function (v) {
-            this.i.h8 = stringToBrush(v);
-            this._a("actualCheckedBackgroundColor", brushToString(this.i.h8));
+            this.i.ii = stringToBrush(v);
+            this._a("actualCheckedBackgroundColor", brushToString(this.i.ii));
         },
         enumerable: false,
         configurable: true
@@ -1227,11 +1242,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the border color of the radio when in the unchecked state.
         */
         get: function () {
-            return brushToString(this.i.jg);
+            return brushToString(this.i.jp);
         },
         set: function (v) {
-            this.i.jg = stringToBrush(v);
-            this._a("uncheckedBorderColor", brushToString(this.i.jg));
+            this.i.jp = stringToBrush(v);
+            this._a("uncheckedBorderColor", brushToString(this.i.jp));
         },
         enumerable: false,
         configurable: true
@@ -1241,11 +1256,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual border color of the radio when in the unchecked state.
         */
         get: function () {
-            return brushToString(this.i.it);
+            return brushToString(this.i.i2);
         },
         set: function (v) {
-            this.i.it = stringToBrush(v);
-            this._a("actualUncheckedBorderColor", brushToString(this.i.it));
+            this.i.i2 = stringToBrush(v);
+            this._a("actualUncheckedBorderColor", brushToString(this.i.i2));
         },
         enumerable: false,
         configurable: true
@@ -1255,11 +1270,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the border color of the radio when in the checked state.
         */
         get: function () {
-            return brushToString(this.i.iw);
+            return brushToString(this.i.i5);
         },
         set: function (v) {
-            this.i.iw = stringToBrush(v);
-            this._a("checkedBorderColor", brushToString(this.i.iw));
+            this.i.i5 = stringToBrush(v);
+            this._a("checkedBorderColor", brushToString(this.i.i5));
         },
         enumerable: false,
         configurable: true
@@ -1269,11 +1284,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual border color of the radio when in the checked state.
         */
         get: function () {
-            return brushToString(this.i.h9);
+            return brushToString(this.i.ij);
         },
         set: function (v) {
-            this.i.h9 = stringToBrush(v);
-            this._a("actualCheckedBorderColor", brushToString(this.i.h9));
+            this.i.ij = stringToBrush(v);
+            this._a("actualCheckedBorderColor", brushToString(this.i.ij));
         },
         enumerable: false,
         configurable: true
@@ -1283,11 +1298,11 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the dropdown delay time in milliseconds.
         */
         get: function () {
-            return this.i.cq;
+            return this.i.cu;
         },
         set: function (v) {
-            this.i.cq = +v;
-            this._a("dropdownDelay", this.i.cq);
+            this.i.cu = +v;
+            this._a("dropdownDelay", this.i.cu);
         },
         enumerable: false,
         configurable: true
@@ -1297,11 +1312,25 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual dropdown delay.
         */
         get: function () {
-            return this.i.co;
+            return this.i.cs;
+        },
+        set: function (v) {
+            this.i.cs = +v;
+            this._a("actualDropdownDelay", this.i.cs);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcToolPanelComponent.prototype, "scrollbarStyle", {
+        /**
+         * Gets or sets the style of scrollbar.
+        */
+        get: function () {
+            return this.i.x;
         },
         set: function (v) {
-            this.i.co = +v;
-            this._a("actualDropdownDelay", this.i.co);
+            this.i.x = ensureEnum(ScrollbarStyle_$type, v);
+            this._a("scrollbarStyle", enumToString(ScrollbarStyle_$type, this.i.x));
         },
         enumerable: false,
         configurable: true
@@ -1322,7 +1351,7 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     Object.defineProperty(IgcToolPanelComponent.prototype, "isOpen", {
         get: function () {
-            return this.i.ax;
+            return this.i.a0;
         },
         enumerable: false,
         configurable: true
@@ -1396,84 +1425,84 @@ var IgcToolPanelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this._inStyling = false;
     };
     IgcToolPanelComponent.prototype.refresh = function () {
-        this.i.f9();
+        this.i.gi();
     };
     IgcToolPanelComponent.prototype.getDesiredSize = function () {
-        var iv = this.i.jj();
+        var iv = this.i.js();
         return fromSize(iv);
     };
     IgcToolPanelComponent.prototype.flushRefresh = function () {
-        this.i.fr();
+        this.i.fz();
     };
     /**
      * Forces any open sub menus to close.
     
     */
     IgcToolPanelComponent.prototype.closeSubmenus = function () {
-        this.i.fm();
+        this.i.fu();
     };
     IgcToolPanelComponent.prototype.exportVisualData = function () {
-        var iv = this.i.cu();
+        var iv = this.i.cy();
         return (iv);
     };
     IgcToolPanelComponent.prototype.exportSerializedVisualData = function () {
-        var iv = this.i.ee();
+        var iv = this.i.ei();
         return (iv);
     };
     IgcToolPanelComponent.prototype.setBrushContextItem = function (key, value) {
-        this.i.gi(key, stringToBrush(value));
+        this.i.gr(key, stringToBrush(value));
     };
     IgcToolPanelComponent.prototype.getBrushContextItem = function (key) {
-        var iv = this.i.iy(key);
+        var iv = this.i.i7(key);
         return brushToString(iv);
     };
     IgcToolPanelComponent.prototype.setBrushCollectionContextItem = function (key, value) {
-        this.i.gg(key, toBrushCollection(value));
+        this.i.gp(key, toBrushCollection(value));
     };
     IgcToolPanelComponent.prototype.getBrushCollectionContextItem = function (key) {
         var iv = this.i.a(key);
         return fromBrushCollection(iv);
     };
     IgcToolPanelComponent.prototype.setDoubleContextItem = function (key, value) {
-        this.i.gq(key, value);
+        this.i.gz(key, value);
     };
     IgcToolPanelComponent.prototype.getDoubleContextItem = function (key) {
-        var iv = this.i.b6(key);
+        var iv = this.i.ca(key);
         return (iv);
     };
     IgcToolPanelComponent.prototype.setIntContextItem = function (key, value) {
-        this.i.gs(key, value);
+        this.i.g1(key, value);
     };
     IgcToolPanelComponent.prototype.getIntContextItem = function (key) {
-        var iv = this.i.cr(key);
+        var iv = this.i.cv(key);
         return (iv);
     };
     IgcToolPanelComponent.prototype.setStringContextItem = function (key, value) {
-        this.i.gu(key, value);
+        this.i.g3(key, value);
     };
     IgcToolPanelComponent.prototype.getStringContextItem = function (key) {
-        var iv = this.i.ef(key);
+        var iv = this.i.ej(key);
         return (iv);
     };
     IgcToolPanelComponent.prototype.setBoolContextItem = function (key, value) {
-        this.i.ge(key, value);
+        this.i.gn(key, value);
     };
     IgcToolPanelComponent.prototype.getBoolContextItem = function (key) {
-        var iv = this.i.au(key);
+        var iv = this.i.ax(key);
         return (iv);
     };
     IgcToolPanelComponent.prototype.setColorContextItem = function (key, value) {
-        this.i.gk(key, stringToColor(value));
+        this.i.gt(key, stringToColor(value));
     };
     IgcToolPanelComponent.prototype.getColorContextItem = function (key) {
-        var iv = this.i.jh(key);
+        var iv = this.i.jq(key);
         return colorToString(iv);
     };
     IgcToolPanelComponent.prototype.setDataContextItem = function (key, value) {
-        this.i.go(key, value);
+        this.i.gx(key, value);
     };
     IgcToolPanelComponent.prototype.getDataContextItem = function (key) {
-        var iv = this.i.cx(key);
+        var iv = this.i.c1(key);
         return (iv);
     };
     Object.defineProperty(IgcToolPanelComponent.prototype, "contentRefreshed", {