jsl-ui 9.5.0 → 9.8.0

package/lib/components/auto-suggest/AutoSuggestComponent.js

@@ -8,7 +8,7 @@ var AutoSuggestComponent = /** @class */ (function () {
         var _a;
         return {
             tag: "input",
-            attr: { value: this.options.value, class: this.options.class, style: this.options.style, placeholder: (_a = this.options.placeholder, (_a !== null && _a !== void 0 ? _a : "")) }
+            attr: { value: this.options.value, class: this.options.class, style: this.options.style, placeholder: (_a = this.options.placeholder) !== null && _a !== void 0 ? _a : "" }
         };
     };
     AutoSuggestComponent.prototype.getRef = function () {

package/lib/components/button/ButtonComponent.js

@@ -19,7 +19,7 @@ var ButtonComponent = /** @class */ (function () {
         get: function () {
             return this.options.click;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     ButtonComponent.prototype.isEqual = function (node) {

package/lib/components/checkbox/CheckBoxComponent.js

@@ -30,7 +30,7 @@ var CheckBoxComponent = /** @class */ (function () {
         get: function () {
             return this.options.onChange;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     // public isEqual(node: IJSLComponent): boolean {

package/lib/components/date/DateComponent.js

@@ -28,7 +28,7 @@ var DateComponent = /** @class */ (function () {
         get: function () {
             return this.options.onChange;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     DateComponent.prototype.render = function () {

package/lib/components/date-range/DateRangeComponent.js

@@ -65,7 +65,7 @@ var DateRangeComponent = /** @class */ (function () {
     DateRangeComponent.prototype.render = function () {
         var _a;
         return {
-            tag: "div", attr: { style: this.options.style, class: "date-range-comp " + (_a = this.options.class, (_a !== null && _a !== void 0 ? _a : "")) }, children: [
+            tag: "div", attr: { style: this.options.style, class: "date-range-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") }, children: [
                 {
                     tag: "div", children: [
                         this.minDate,

package/lib/components/dialog/DialogComponent.js

@@ -34,7 +34,7 @@ var DialogComponent = /** @class */ (function () {
         var _a, _b, _c;
         var res = {
             tag: "button", attr: {
-                class: "jsl-button " + (_a = options.class, (_a !== null && _a !== void 0 ? _a : "")),
+                class: "jsl-button " + ((_a = options.class) !== null && _a !== void 0 ? _a : ""),
                 click: function () {
                     if (options.onClick != null && options.onClick() === false) {
                         return;
@@ -43,7 +43,7 @@ var DialogComponent = /** @class */ (function () {
                         DialogComponent.lastRenderedDlg.getRef().close();
                     }
                 }
-            }, content: (_b = options.content, (_b !== null && _b !== void 0 ? _b : "OK")), raw: (_c = options.raw, (_c !== null && _c !== void 0 ? _c : false))
+            }, content: (_b = options.content) !== null && _b !== void 0 ? _b : "OK", raw: (_c = options.raw) !== null && _c !== void 0 ? _c : false
         };
         return res;
     };

package/lib/components/expander/ExpanderComponent.js

@@ -5,11 +5,11 @@ var ExpanderComponent = /** @class */ (function () {
         this.State = { expanded: false, waitingForAnimation: false };
         if (body != null) {
             // old syntax
-            this.options = { header: optionsOrHeader, body: body, expanded: (expanded !== null && expanded !== void 0 ? expanded : true) };
+            this.options = { header: optionsOrHeader, body: body, expanded: expanded !== null && expanded !== void 0 ? expanded : true };
         }
         else {
             this.options = optionsOrHeader;
-            this.options.expanded = (_a = this.options.expanded, (_a !== null && _a !== void 0 ? _a : true));
+            this.options.expanded = (_a = this.options.expanded) !== null && _a !== void 0 ? _a : true;
         }
         this.State.expanded = this.options.expanded;
     }
@@ -21,8 +21,8 @@ var ExpanderComponent = /** @class */ (function () {
             },
             raw: true,
             content: "<svg style='" +
-                "min-width:" + (_a = this.options.iconSize, (_a !== null && _a !== void 0 ? _a : "1.5rem")) + "; min-height:" + (_b = this.options.iconSize, (_b !== null && _b !== void 0 ? _b : "1.5rem")) +
-                ";max-width:" + (_c = this.options.iconSize, (_c !== null && _c !== void 0 ? _c : "1.5rem")) + "; max-height:" + (_d = this.options.iconSize, (_d !== null && _d !== void 0 ? _d : "1.5rem")) + ";' " +
+                "min-width:" + ((_a = this.options.iconSize) !== null && _a !== void 0 ? _a : "1.5rem") + "; min-height:" + ((_b = this.options.iconSize) !== null && _b !== void 0 ? _b : "1.5rem") +
+                ";max-width:" + ((_c = this.options.iconSize) !== null && _c !== void 0 ? _c : "1.5rem") + "; max-height:" + ((_d = this.options.iconSize) !== null && _d !== void 0 ? _d : "1.5rem") + ";' " +
                 "xml:space='preserve' width='1024px' height='1024px' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='nonzero' clip-rule='evenodd' viewBox='0 0 10240 10240'>" +
                 (expanded
                     ? "<path id='curve0' fill='#FFFFFF' d='M1273 3989l3621 3620c124,125 328,125 452,0l3621 -3620c124,-125 124,-328 0,-453l-905 -905c-125,-125 -328,-125 -453,0l-2489 2489 -2489 -2489c-125,-125 -328,-125 -453,0l-905 905c-124,125 -124,328 0,453z'/>"
@@ -39,11 +39,11 @@ var ExpanderComponent = /** @class */ (function () {
         var animate = this.State.waitingForAnimation;
         this.State.waitingForAnimation = false;
         return {
-            tag: "div", attr: { class: "expander-comp " + (this.options.class || ""), style: (_a = this.options.style, (_a !== null && _a !== void 0 ? _a : "")) }, children: [
+            tag: "div", attr: { class: "expander-comp " + (this.options.class || ""), style: (_a = this.options.style) !== null && _a !== void 0 ? _a : "" }, children: [
                 {
                     tag: "div", attr: {
                         class: "header",
-                        click: function (evt) { var _a; if (_a = _this.options.isToggleOnHeader, (_a !== null && _a !== void 0 ? _a : true)) {
+                        click: function (evt) { var _a; if ((_a = _this.options.isToggleOnHeader) !== null && _a !== void 0 ? _a : true) {
                             evt.stopPropagation();
                             _this.toggleExpand();
                         } },
@@ -52,8 +52,8 @@ var ExpanderComponent = /** @class */ (function () {
                         {
                             tag: "span", attr: { class: "toggler", click: function (evt) { evt.stopPropagation(); _this.toggleExpand(); } },
                             children: [this.State.expanded
-                                    ? (_b = this.options.expandedIcon, (_b !== null && _b !== void 0 ? _b : this.getIcon(true)))
-                                    : (_c = this.options.collapsedIcon, (_c !== null && _c !== void 0 ? _c : this.getIcon(false)))
+                                    ? ((_b = this.options.expandedIcon) !== null && _b !== void 0 ? _b : this.getIcon(true))
+                                    : ((_c = this.options.collapsedIcon) !== null && _c !== void 0 ? _c : this.getIcon(false))
                             ]
                         },
                         { tag: "span", attr: { class: "content" }, children: [this.toNode(this.options.header)] }

package/lib/components/form-field/FormFieldComponent.js

@@ -13,7 +13,7 @@ var FormFieldComponent = /** @class */ (function () {
         var _a, _b;
         return {
             tag: "div",
-            attr: { class: "form-field " + (this.options.value ? "form-field--is-filled " : "") + (_a = this.options.class, (_a !== null && _a !== void 0 ? _a : "")) },
+            attr: { class: "form-field " + (this.options.value ? "form-field--is-filled " : "") + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") },
             children: [{
                     tag: "div",
                     attr: { class: "form-field__control" + (this.validationMessage ? " failed__valid" : "") },
@@ -23,7 +23,7 @@ var FormFieldComponent = /** @class */ (function () {
                             attr: { for: this.id, class: "form-field__label" },
                             content: this.options.label +
                                 (this.options.required ? " *" : "") +
-                                (this.validationMessage ? (" " + (_b = this.validationMessage, (_b !== null && _b !== void 0 ? _b : ""))) : "")
+                                (this.validationMessage ? (" " + ((_b = this.validationMessage) !== null && _b !== void 0 ? _b : "")) : "")
                         },
                         {
                             tag: "input",

package/lib/components/grid/GridComponent.js

@@ -18,7 +18,7 @@ var GridComponent = /** @class */ (function () {
         };
         var style = "";
         if (!options.autoHeight) {
-            style = "height:" + ((height !== null && height !== void 0 ? height : "400px"));
+            style = "height:" + (height !== null && height !== void 0 ? height : "400px");
         }
         this.rootTag = {
             tag: "div",

package/lib/components/input/InputComponent.js

@@ -30,14 +30,14 @@ var InputComponent = /** @class */ (function () {
         get: function () {
             return this.options.onChange;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(InputComponent.prototype, "onInput", {
         get: function () {
             return this.options.onInput;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     // public isEqual(node: IJSLComponent): boolean {
@@ -57,7 +57,7 @@ var InputComponent = /** @class */ (function () {
             if (newVal !== current) {
                 val = newVal;
                 if (this.currentDom != null) {
-                    this.currentDom.value = (val !== null && val !== void 0 ? val : "");
+                    this.currentDom.value = val !== null && val !== void 0 ? val : "";
                 }
             }
         }

package/lib/components/navigation/NavigationComponent.js

@@ -9,12 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import "./NavigationStyle.scss";
 var NavigationComponent = /** @class */ (function () {
@@ -29,19 +31,19 @@ var NavigationComponent = /** @class */ (function () {
         var _a, _b;
         return {
             tag: "header",
-            attr: { style: this.options.style, class: "nav-comp " + (_a = this.options.class, (_a !== null && _a !== void 0 ? _a : "")) },
+            attr: { style: this.options.style, class: "nav-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") },
             children: [
                 { tag: "div", attr: { class: "luxbar luxbar-" + this.options.position },
                     children: [
                         { tag: "input", attr: { type: "checkbox", class: "luxbar-checkbox", id: this.options.id } },
                         { tag: "div", attr: { class: "luxbar-menu luxbar-menu-" + this.options.alignment + " luxbar-menu-light" },
-                            children: [{ tag: "ul", attr: { class: "luxbar-navigation" }, children: __spreadArrays([
+                            children: [{ tag: "ul", attr: { class: "luxbar-navigation" }, children: __spreadArray([
                                         { tag: "li", attr: { class: "luxbar-header" }, children: [
-                                                { tag: "a", attr: { href: (_b = this.options.titleLink, (_b !== null && _b !== void 0 ? _b : "#")), class: "luxbar-brand" }, children: [this.toNode(this.options.title)] },
+                                                { tag: "a", attr: { href: (_b = this.options.titleLink) !== null && _b !== void 0 ? _b : "#", class: "luxbar-brand" }, children: [this.toNode(this.options.title)] },
                                                 { tag: "label", attr: { class: "luxbar-hamburger luxbar-hamburger-spin", for: this.options.id },
                                                     children: [{ tag: "span" }] },
                                             ] }
-                                    ], this.options.data.map(function (x) { return _this.itemToNode(x); })) }] }
+                                    ], this.options.data.map(function (x) { return _this.itemToNode(x); }), true) }] }
                     ] }
             ]
         };
@@ -50,7 +52,7 @@ var NavigationComponent = /** @class */ (function () {
         var _this = this;
         var _a, _b, _c;
         return { tag: "li", attr: { class: "luxbar-item" + (((_a = x.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? " dropdown" : "") + (this.isActive(x.link) ? " active" : "") }, children: [
-                { tag: "a", attr: { href: (_b = x.link, (_b !== null && _b !== void 0 ? _b : "#")), target: x.target, click: x.click }, children: [this.toNode(x.content)] },
+                { tag: "a", attr: { href: (_b = x.link) !== null && _b !== void 0 ? _b : "#", target: x.target, click: x.click }, children: [this.toNode(x.content)] },
                 (((_c = x.children) === null || _c === void 0 ? void 0 : _c.length) > 0 ? { tag: "ul", children: x.children.map(function (c) { return _this.itemToNode(c); }) } : undefined)
             ] };
     };

package/lib/components/notification/Notification.js

@@ -30,7 +30,7 @@ var Notification = /** @class */ (function () {
                 Notification.renderer.refresh();
             }, options.timeOut);
         }
-        if ((_a = options.closeOnClick, (_a !== null && _a !== void 0 ? _a : true)) === true) {
+        if (((_a = options.closeOnClick) !== null && _a !== void 0 ? _a : true) === true) {
             notification.attr.click = function () {
                 var idx = Notification.containerVNode.children.indexOf(notification);
                 if (idx >= 0) {

package/lib/components/number/NumberComponent.js

@@ -29,7 +29,7 @@ var NumberComponent = /** @class */ (function () {
         get: function () {
             return this.options.onChange;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     NumberComponent.prototype.render = function () {

package/lib/components/progress/ProgressComponent.js

@@ -19,11 +19,11 @@ var ProgressComponent = /** @class */ (function () {
         }
         var content = "";
         if ((_c = this.options) === null || _c === void 0 ? void 0 : _c.showPercent) {
-            content = numeric.format(this.progress, (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.percentFormat, (_e !== null && _e !== void 0 ? _e : "0. %")));
+            content = numeric.format(this.progress, (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.percentFormat) !== null && _e !== void 0 ? _e : "0. %");
         }
         return {
             tag: "div",
-            attr: { class: "progress-comp " + (_g = (_f = this.options) === null || _f === void 0 ? void 0 : _f.class, (_g !== null && _g !== void 0 ? _g : "")) },
+            attr: { class: "progress-comp " + ((_g = (_f = this.options) === null || _f === void 0 ? void 0 : _f.class) !== null && _g !== void 0 ? _g : "") },
             children: [{
                     tag: "div",
                     attr: { class: "bar", style: style },

package/lib/components/ribbon-menu/RibbonMenuComponent.js

@@ -1,9 +1,11 @@
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import "./RibbonMenuStyle.scss";
 var RibbonMenuComponent = /** @class */ (function () {
@@ -22,7 +24,7 @@ var RibbonMenuComponent = /** @class */ (function () {
                 var _a;
                 return {
                     tag: "div", attr: { class: "ribbon-group" },
-                    children: __spreadArrays([{ tag: "div", attr: { class: "ribbon-legend" }, content: (_a = g.title, (_a !== null && _a !== void 0 ? _a : "")) }], g.children)
+                    children: __spreadArray([{ tag: "div", attr: { class: "ribbon-legend" }, content: (_a = g.title) !== null && _a !== void 0 ? _a : "" }], g.children, true)
                 };
             })
         };

package/lib/components/select/SelectComponent.js

@@ -51,7 +51,7 @@ var SelectComponent = /** @class */ (function () {
             } : function (args) {
                 args.node.content = args.data[_this.options.textColumn];
             },
-            matchSearch: function (data, term) { var _a; return ((_a = data[_this.options.textColumn], (_a !== null && _a !== void 0 ? _a : "")).toString().toLowerCase().indexOf(term.toLowerCase()) >= 0); }
+            matchSearch: function (data, term) { var _a; return (((_a = data[_this.options.textColumn]) !== null && _a !== void 0 ? _a : "").toString().toLowerCase().indexOf(term.toLowerCase()) >= 0); }
         };
         this.options = __assign(__assign({}, defaultOptions), o);
         this.options.onChange = EventHandler.Create(o.onChange);
@@ -84,7 +84,7 @@ var SelectComponent = /** @class */ (function () {
         return {
             tag: "div", attr: {
                 style: this.options.style,
-                class: "select-comp " + (this.expanded ? "expanded " : "") + (!this.options.enabled ? "disabled " : "") + (_b = this.options.class, (_b !== null && _b !== void 0 ? _b : "")),
+                class: "select-comp " + (this.expanded ? "expanded " : "") + (!this.options.enabled ? "disabled " : "") + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
                 mousedown: function (e) { if (_this.expanded || e.which === 3) {
                     return;
                 } {
@@ -150,7 +150,7 @@ var SelectComponent = /** @class */ (function () {
         var left = Math.round(dimension.left + window.pageXOffset);
         var top = Math.round(dimension.top + window.pageYOffset);
         this.dropdownArea = document.createElement("div");
-        this.dropdownArea.className = "sel-comp-dd " + (_a = this.options.dropdownClass, (_a !== null && _a !== void 0 ? _a : ""));
+        this.dropdownArea.className = "sel-comp-dd " + ((_a = this.options.dropdownClass) !== null && _a !== void 0 ? _a : "");
         this.dropdownArea.style.width = this.options.dropdownWidth || (Math.round(dimension.width) + "px");
         this.dropdownArea.style.height = this.options.dropdownHeight;
         this.dropdownArea.style.left = left + "px";

package/lib/components/select/SelectDDAreaComponent.js

@@ -1,9 +1,11 @@
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { VirtualRenderComponent } from "../virtual-render/VirtualRenderComponent";
 import { EventHandler } from "../../interaction/eventhandler";
@@ -33,7 +35,7 @@ var SelectDDAreaComponent = /** @class */ (function () {
                 item = item[0];
             }
             if (item != null) {
-                var d = (_b = (_a = this.renderedData, (_a !== null && _a !== void 0 ? _a : this.filteredData)), (_b !== null && _b !== void 0 ? _b : this.options.data));
+                var d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
                 var idx = d.indexOf(item);
                 this.scrollContainer.scrollTop = this.options.rowHeight * idx;
             }
@@ -61,9 +63,9 @@ var SelectDDAreaComponent = /** @class */ (function () {
     SelectDDAreaComponent.prototype.render = function () {
         var _this = this;
         var _a;
-        var data = (_a = this.filteredData, (_a !== null && _a !== void 0 ? _a : this.options.data));
+        var data = (_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data;
         if (this.options.groupProperty != null) {
-            var sortedData = __spreadArrays(data);
+            var sortedData = __spreadArray([], data, true);
             sortedData.sort(function (a, b) {
                 return a[_this.options.groupProperty] < b[_this.options.groupProperty] ? -1
                     : a[_this.options.groupProperty] > b[_this.options.groupProperty] ? 1 : (data.indexOf(a) - data.indexOf(b) // preserve order if it is for same group
@@ -132,7 +134,7 @@ var SelectDDAreaComponent = /** @class */ (function () {
                                         var focus_1 = _this.component.getFocus();
                                         if (focus_1 == null) {
                                             // if only 1 result is left then auto select this entry
-                                            var d = (_a = _this.filteredData, (_a !== null && _a !== void 0 ? _a : _this.options.data));
+                                            var d = (_a = _this.filteredData) !== null && _a !== void 0 ? _a : _this.options.data;
                                             if (d.length === 1) {
                                                 focus_1 = d[0];
                                             }
@@ -166,7 +168,8 @@ var SelectDDAreaComponent = /** @class */ (function () {
                     ]
                 },
                 new VirtualRenderComponent({
-                    class: "sel-dd-items" + (this.options.multiple ? " multiple" : ""), data: data,
+                    class: "sel-dd-items" + (this.options.multiple ? " multiple" : ""),
+                    data: data,
                     style: this.options.enableSearch ? "height:calc(100% - 1.8rem)" : "height:100%",
                     viewportSizeInPX: this.args.renderHeight + 20,
                     bufferSizeInPx: 20,
@@ -176,7 +179,8 @@ var SelectDDAreaComponent = /** @class */ (function () {
                             result.attr.class += " sel-dd-group";
                             var groupValue = args.rowData.__groupValue;
                             var groupArgs = {
-                                groupValue: groupValue, node: result
+                                groupValue: groupValue,
+                                node: result
                             };
                             var resGroup = _this.options.onRenderGroup(groupArgs);
                             if (resGroup != null) {
@@ -236,8 +240,8 @@ var SelectDDAreaComponent = /** @class */ (function () {
     };
     SelectDDAreaComponent.prototype.navigateDown = function () {
         var _a, _b, _c;
-        var d = (_b = (_a = this.renderedData, (_a !== null && _a !== void 0 ? _a : this.filteredData)), (_b !== null && _b !== void 0 ? _b : this.options.data));
-        var selItem = (_c = this.component.getFocus(), (_c !== null && _c !== void 0 ? _c : this.component.getSelected()));
+        var d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
+        var selItem = (_c = this.component.getFocus()) !== null && _c !== void 0 ? _c : this.component.getSelected();
         if (selItem == null) {
             this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
             return;
@@ -262,8 +266,8 @@ var SelectDDAreaComponent = /** @class */ (function () {
     };
     SelectDDAreaComponent.prototype.navigateUp = function () {
         var _a, _b, _c;
-        var d = (_b = (_a = this.renderedData, (_a !== null && _a !== void 0 ? _a : this.filteredData)), (_b !== null && _b !== void 0 ? _b : this.options.data));
-        var selItem = (_c = this.component.getFocus(), (_c !== null && _c !== void 0 ? _c : this.component.getSelected()));
+        var d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
+        var selItem = (_c = this.component.getFocus()) !== null && _c !== void 0 ? _c : this.component.getSelected();
         if (selItem == null) {
             this.component.setFocus(d.filter(function (x) { return !x.__isGroup; })[0]);
             return;
@@ -285,9 +289,9 @@ var SelectDDAreaComponent = /** @class */ (function () {
     SelectDDAreaComponent.prototype.search = function (term) {
         var _this = this;
         var _a, _b, _c, _d;
-        var oldLen = (_b = (_a = this.filteredData) === null || _a === void 0 ? void 0 : _a.length, (_b !== null && _b !== void 0 ? _b : 0));
+        var oldLen = (_b = (_a = this.filteredData) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
         this.filteredData = this.options.data.filter(function (d) { return _this.options.matchSearch(d, term); });
-        var newLen = (_d = (_c = this.filteredData) === null || _c === void 0 ? void 0 : _c.length, (_d !== null && _d !== void 0 ? _d : 0));
+        var newLen = (_d = (_c = this.filteredData) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
         if (oldLen !== newLen && this.scrollContainer != null) {
             this.scrollContainer.scrollTop = 0;
         }
@@ -300,7 +304,7 @@ var SelectDDAreaComponent = /** @class */ (function () {
     SelectDDAreaComponent.prototype.focusFirst = function () {
         var _a;
         if (this.options.focusFirstItem && (this.component.getSelected() == null || this.component.getSelected().length === 0)) /* TODO multiselect */ {
-            this.component.setFocus((_a = this.filteredData, (_a !== null && _a !== void 0 ? _a : this.options.data))[0]);
+            this.component.setFocus(((_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data)[0]);
         }
     };
     SelectDDAreaComponent.ESCAPE_KEY = 27;

package/lib/components/stack-panel/SplitterComponent.js

@@ -3,7 +3,7 @@ var SplitterComponent = /** @class */ (function () {
     function SplitterComponent(options) {
         // tslint:disable-next-line: variable-name
         this._is_splitter = true;
-        this.options = (options !== null && options !== void 0 ? options : {});
+        this.options = options !== null && options !== void 0 ? options : {};
         if (this.options.minSizesInPX == null) {
             this.options.minSizesInPX = [];
         }

package/lib/components/tabs/TabsComponent.d.ts

@@ -12,6 +12,7 @@ export interface ITabItemOption {
 export interface ITabOptions {
     tabs?: ITabItemOption[];
     contentClass?: string;
+    class?: string;
     style?: string;
     selectedIndex?: number;
     onSelect?: (index?: number) => boolean | void;
@@ -34,4 +35,5 @@ export declare class TabsComponent implements IJSLComponent {
     onInit(renderer: JSLRender): void;
     SetSelectedTab(index: number): void;
     private toNode;
+    private checkForDuplicateIds;
 }

package/lib/components/tabs/TabsComponent.js

@@ -1,9 +1,11 @@
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import "./TabsStyle.scss";
 import { helper } from "../../core/helper";
@@ -12,15 +14,16 @@ var TabsComponent = /** @class */ (function () {
         var _a, _b, _c;
         this.options = options;
         this.State = { selectedIndex: null };
-        this.options = (_a = this.options, (_a !== null && _a !== void 0 ? _a : {}));
-        this.options.tabs = (_b = this.options.tabs, (_b !== null && _b !== void 0 ? _b : []));
-        this.options.selectedIndex = (_c = this.options.selectedIndex, (_c !== null && _c !== void 0 ? _c : 0));
+        this.options = (_a = this.options) !== null && _a !== void 0 ? _a : {};
+        this.checkForDuplicateIds();
+        this.options.tabs = (_b = this.options.tabs) !== null && _b !== void 0 ? _b : [];
+        this.options.selectedIndex = (_c = this.options.selectedIndex) !== null && _c !== void 0 ? _c : 0;
     }
     TabsComponent.prototype.render = function () {
         var _this = this;
         var _a, _b, _c, _d, _e;
         var index = -1;
-        var activeIndex = (_a = this.State.selectedIndex, (_a !== null && _a !== void 0 ? _a : this.options.selectedIndex));
+        var activeIndex = (_a = this.State.selectedIndex) !== null && _a !== void 0 ? _a : this.options.selectedIndex;
         if (activeIndex > -1 &&
             this.options.tabs[activeIndex].content == null &&
             this.options.tabs[activeIndex].onCreate) {
@@ -34,8 +37,8 @@ var TabsComponent = /** @class */ (function () {
             if (idx === activeIndex) {
                 tabs.push({
                     tag: "div", attr: {
-                        class: "tab-content " + (_b = this.options.contentClass, (_b !== null && _b !== void 0 ? _b : "")),
-                        style: { "max-height": (_c = this.options.maxHeight, (_c !== null && _c !== void 0 ? _c : "100%")) },
+                        class: "tab-content " + ((_b = this.options.contentClass) !== null && _b !== void 0 ? _b : ""),
+                        style: { "max-height": ((_c = this.options.maxHeight) !== null && _c !== void 0 ? _c : "100%") },
                         id: this.options.tabs[idx].id
                     },
                     children: [this.toNode(this.options.tabs[idx].content)]
@@ -44,8 +47,8 @@ var TabsComponent = /** @class */ (function () {
             else if (this.options.preserveContent) {
                 tabs.push({
                     tag: "div", attr: {
-                        class: "tab-content tab-hidden " + (_d = this.options.contentClass, (_d !== null && _d !== void 0 ? _d : "")),
-                        style: { "max-height": (_e = this.options.maxHeight, (_e !== null && _e !== void 0 ? _e : "100%")) },
+                        class: "tab-content tab-hidden " + ((_d = this.options.contentClass) !== null && _d !== void 0 ? _d : ""),
+                        style: { "max-height": ((_e = this.options.maxHeight) !== null && _e !== void 0 ? _e : "100%") },
                         id: this.options.tabs[idx].id
                     },
                     children: [this.toNode(this.options.tabs[idx].content)]
@@ -53,7 +56,7 @@ var TabsComponent = /** @class */ (function () {
             }
         }
         return {
-            tag: "div", attr: { class: "stabcomponent", style: this.options.style }, children: __spreadArrays([
+            tag: "div", attr: { class: "stabcomponent" + (this.options.class || ""), style: this.options.style }, children: __spreadArray([
                 {
                     tag: "div", attr: { class: "tab-header-row" }, children: this.options.tabs.map(function (x) {
                         index++;
@@ -63,7 +66,7 @@ var TabsComponent = /** @class */ (function () {
                                 class: "tab-item " + (index === activeIndex ? "active " : "") + (_this.options.tabs[currIndex].enabled === false ? "disabled " : ""),
                                 click: function (evt) {
                                     var _a;
-                                    if (_a = _this.options.tabs[currIndex].enabled, (_a !== null && _a !== void 0 ? _a : true)) {
+                                    if ((_a = _this.options.tabs[currIndex].enabled) !== null && _a !== void 0 ? _a : true) {
                                         _this.SetSelectedTab(currIndex);
                                         if (_this.options.onSelect) {
                                             _this.options.onSelect(currIndex);
@@ -78,7 +81,7 @@ var TabsComponent = /** @class */ (function () {
                                             tag: "div", attr: {
                                                 class: "close-button", click: function (evt) {
                                                     var _a;
-                                                    if (_a = _this.options.tabs[currIndex].enabled, (_a !== null && _a !== void 0 ? _a : true)) {
+                                                    if ((_a = _this.options.tabs[currIndex].enabled) !== null && _a !== void 0 ? _a : true) {
                                                         evt.stopPropagation();
                                                         _this.closeTabIndex(currIndex);
                                                     }
@@ -91,13 +94,14 @@ var TabsComponent = /** @class */ (function () {
                         };
                     })
                 }
-            ], tabs)
+            ], tabs, true)
         };
     };
     TabsComponent.prototype.AddTab = function (tabItem) {
         var _a;
-        tabItem.enabled = (_a = tabItem.enabled, (_a !== null && _a !== void 0 ? _a : true));
+        tabItem.enabled = (_a = tabItem.enabled) !== null && _a !== void 0 ? _a : true;
         this.options.tabs.push(tabItem);
+        this.checkForDuplicateIds();
         return this.options.tabs.length - 1;
     };
     TabsComponent.prototype.EnableAll = function () {
@@ -125,8 +129,8 @@ var TabsComponent = /** @class */ (function () {
         }
         var currIdx = 0;
         this.options.tabs = this.options.tabs.filter(function (x) { return currIdx++ !== index; });
-        if (this.options.tabs.length <= (_a = this.State.selectedIndex, (_a !== null && _a !== void 0 ? _a : this.options.selectedIndex))) {
-            this.SetSelectedTab((_b = this.State.selectedIndex, (_b !== null && _b !== void 0 ? _b : this.options.selectedIndex)) - 1);
+        if (this.options.tabs.length <= ((_a = this.State.selectedIndex) !== null && _a !== void 0 ? _a : this.options.selectedIndex)) {
+            this.SetSelectedTab(((_b = this.State.selectedIndex) !== null && _b !== void 0 ? _b : this.options.selectedIndex) - 1);
         }
     };
     // public onCreate(node: IJSLVNode) {
@@ -152,10 +156,22 @@ var TabsComponent = /** @class */ (function () {
             return undefined;
         }
         if (typeof content === "string") {
-            return { tag: (tag !== null && tag !== void 0 ? tag : "div"), content: content };
+            return { tag: tag !== null && tag !== void 0 ? tag : "div", content: content };
         }
         return content;
     };
+    TabsComponent.prototype.checkForDuplicateIds = function () {
+        if (this.options.tabs == null || this.options.tabs.length === 0) {
+            return;
+        }
+        var ids = {};
+        for (var _i = 0, _a = this.options.tabs; _i < _a.length; _i++) {
+            var tab = _a[_i];
+            if (tab.id && ids[tab.id] !== undefined) {
+                throw new Error("Tab Control has duplicate id " + tab.id);
+            }
+        }
+    };
     return TabsComponent;
 }());
 export { TabsComponent };