flexlayout-react 0.5.21 → 0.6.3

package/dist/flexlayout.js

@@ -284,7 +284,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _val
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n/** @hidden @internal */\nvar Attribute = /** @class */ (function () {\n    function Attribute(name, modelName, defaultValue, alwaysWriteJson) {\n        this.name = name;\n        this.modelName = modelName;\n        this.defaultValue = defaultValue;\n        this.alwaysWriteJson = alwaysWriteJson;\n        this.required = false;\n        this.fixed = false;\n        this.type = \"any\";\n    }\n    Attribute.prototype.setType = function (value) {\n        this.type = value;\n        return this;\n    };\n    Attribute.prototype.setRequired = function () {\n        this.required = true;\n        return this;\n    };\n    Attribute.prototype.setFixed = function () {\n        this.fixed = true;\n        return this;\n    };\n    Attribute.NUMBER = \"number\";\n    Attribute.STRING = \"string\";\n    Attribute.BOOLEAN = \"boolean\";\n    return Attribute;\n}());\n/** @hidden @internal */\nexports.default = Attribute;\n\n\n//# sourceURL=webpack://FlexLayout/./src/Attribute.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Attribute = void 0;\n/** @hidden @internal */\nvar Attribute = /** @class */ (function () {\n    function Attribute(name, modelName, defaultValue, alwaysWriteJson) {\n        this.name = name;\n        this.modelName = modelName;\n        this.defaultValue = defaultValue;\n        this.alwaysWriteJson = alwaysWriteJson;\n        this.required = false;\n        this.fixed = false;\n        this.type = \"any\";\n    }\n    Attribute.prototype.setType = function (value) {\n        this.type = value;\n        return this;\n    };\n    Attribute.prototype.setRequired = function () {\n        this.required = true;\n        return this;\n    };\n    Attribute.prototype.setFixed = function () {\n        this.fixed = true;\n        return this;\n    };\n    Attribute.NUMBER = \"number\";\n    Attribute.STRING = \"string\";\n    Attribute.BOOLEAN = \"boolean\";\n    return Attribute;\n}());\nexports.Attribute = Attribute;\n\n\n//# sourceURL=webpack://FlexLayout/./src/Attribute.ts?");
 
 /***/ }),
 
@@ -296,7 +296,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n/** @h
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ./Attribute */ \"./src/Attribute.ts\");\n/** @hidden @internal */\nvar AttributeDefinitions = /** @class */ (function () {\n    function AttributeDefinitions() {\n        this.attributes = [];\n        this.nameToAttribute = {};\n    }\n    AttributeDefinitions.prototype.addWithAll = function (name, modelName, defaultValue, alwaysWriteJson) {\n        var attr = new Attribute_1.default(name, modelName, defaultValue, alwaysWriteJson);\n        this.attributes.push(attr);\n        this.nameToAttribute[name] = attr;\n        return attr;\n    };\n    AttributeDefinitions.prototype.addInherited = function (name, modelName) {\n        return this.addWithAll(name, modelName, undefined, false);\n    };\n    AttributeDefinitions.prototype.add = function (name, defaultValue, alwaysWriteJson) {\n        return this.addWithAll(name, undefined, defaultValue, alwaysWriteJson);\n    };\n    AttributeDefinitions.prototype.getAttributes = function () {\n        return this.attributes;\n    };\n    AttributeDefinitions.prototype.getModelName = function (name) {\n        var conversion = this.nameToAttribute[name];\n        if (conversion !== undefined) {\n            return conversion.modelName;\n        }\n        return undefined;\n    };\n    AttributeDefinitions.prototype.toJson = function (jsonObj, obj) {\n        this.attributes.forEach(function (attr) {\n            var fromValue = obj[attr.name];\n            if (attr.alwaysWriteJson || fromValue !== attr.defaultValue) {\n                jsonObj[attr.name] = fromValue;\n            }\n        });\n    };\n    AttributeDefinitions.prototype.fromJson = function (jsonObj, obj) {\n        this.attributes.forEach(function (attr) {\n            var fromValue = jsonObj[attr.name];\n            if (fromValue === undefined) {\n                obj[attr.name] = attr.defaultValue;\n            }\n            else {\n                obj[attr.name] = fromValue;\n            }\n        });\n    };\n    AttributeDefinitions.prototype.update = function (jsonObj, obj) {\n        this.attributes.forEach(function (attr) {\n            var fromValue = jsonObj[attr.name];\n            if (fromValue !== undefined) {\n                obj[attr.name] = fromValue;\n            }\n        });\n    };\n    AttributeDefinitions.prototype.setDefaults = function (obj) {\n        this.attributes.forEach(function (attr) {\n            obj[attr.name] = attr.defaultValue;\n        });\n    };\n    AttributeDefinitions.prototype.toTypescriptInterface = function (name, parentAttributes) {\n        var lines = [];\n        var sorted = this.attributes.sort(function (a, b) { return a.name.localeCompare(b.name); });\n        // const sorted = this.attributes;\n        lines.push(\"export interface I\" + name + \"Attributes {\");\n        for (var i = 0; i < sorted.length; i++) {\n            var c = sorted[i];\n            var type = c.type;\n            var defaultValue = undefined;\n            var attr = c;\n            var inherited = undefined;\n            if (attr.defaultValue !== undefined) {\n                defaultValue = attr.defaultValue;\n            }\n            else if (attr.modelName !== undefined\n                && parentAttributes !== undefined\n                && parentAttributes.nameToAttribute[attr.modelName] !== undefined) {\n                inherited = attr.modelName;\n                attr = parentAttributes.nameToAttribute[attr.modelName];\n                defaultValue = attr.defaultValue;\n                type = attr.type;\n            }\n            var defValue = JSON.stringify(defaultValue);\n            var required = attr.required || attr.fixed ? \"\" : \"?\";\n            if (c.fixed) {\n                lines.push(\"\\t\" + c.name + \": \" + defValue + \";\");\n            }\n            else {\n                var comment = (defaultValue !== undefined ? \"default: \" + defValue : \"\") +\n                    (inherited !== undefined ? \" - inherited from global \" + inherited : \"\");\n                lines.push(\"\\t\" + c.name + required + \": \" + type + \";\" +\n                    (comment.length > 0 ? \" // \" + comment : \"\"));\n            }\n        }\n        lines.push(\"}\");\n        return lines.join(\"\\n\");\n    };\n    return AttributeDefinitions;\n}());\n/** @hidden @internal */\nexports.default = AttributeDefinitions;\n\n\n//# sourceURL=webpack://FlexLayout/./src/AttributeDefinitions.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.AttributeDefinitions = void 0;\nvar Attribute_1 = __webpack_require__(/*! ./Attribute */ \"./src/Attribute.ts\");\n/** @hidden @internal */\nvar AttributeDefinitions = /** @class */ (function () {\n    function AttributeDefinitions() {\n        this.attributes = [];\n        this.nameToAttribute = {};\n    }\n    AttributeDefinitions.prototype.addWithAll = function (name, modelName, defaultValue, alwaysWriteJson) {\n        var attr = new Attribute_1.Attribute(name, modelName, defaultValue, alwaysWriteJson);\n        this.attributes.push(attr);\n        this.nameToAttribute[name] = attr;\n        return attr;\n    };\n    AttributeDefinitions.prototype.addInherited = function (name, modelName) {\n        return this.addWithAll(name, modelName, undefined, false);\n    };\n    AttributeDefinitions.prototype.add = function (name, defaultValue, alwaysWriteJson) {\n        return this.addWithAll(name, undefined, defaultValue, alwaysWriteJson);\n    };\n    AttributeDefinitions.prototype.getAttributes = function () {\n        return this.attributes;\n    };\n    AttributeDefinitions.prototype.getModelName = function (name) {\n        var conversion = this.nameToAttribute[name];\n        if (conversion !== undefined) {\n            return conversion.modelName;\n        }\n        return undefined;\n    };\n    AttributeDefinitions.prototype.toJson = function (jsonObj, obj) {\n        this.attributes.forEach(function (attr) {\n            var fromValue = obj[attr.name];\n            if (attr.alwaysWriteJson || fromValue !== attr.defaultValue) {\n                jsonObj[attr.name] = fromValue;\n            }\n        });\n    };\n    AttributeDefinitions.prototype.fromJson = function (jsonObj, obj) {\n        this.attributes.forEach(function (attr) {\n            var fromValue = jsonObj[attr.name];\n            if (fromValue === undefined) {\n                obj[attr.name] = attr.defaultValue;\n            }\n            else {\n                obj[attr.name] = fromValue;\n            }\n        });\n    };\n    AttributeDefinitions.prototype.update = function (jsonObj, obj) {\n        this.attributes.forEach(function (attr) {\n            var fromValue = jsonObj[attr.name];\n            if (fromValue !== undefined) {\n                obj[attr.name] = fromValue;\n            }\n        });\n    };\n    AttributeDefinitions.prototype.setDefaults = function (obj) {\n        this.attributes.forEach(function (attr) {\n            obj[attr.name] = attr.defaultValue;\n        });\n    };\n    AttributeDefinitions.prototype.toTypescriptInterface = function (name, parentAttributes) {\n        var lines = [];\n        var sorted = this.attributes.sort(function (a, b) { return a.name.localeCompare(b.name); });\n        // const sorted = this.attributes;\n        lines.push(\"export interface I\" + name + \"Attributes {\");\n        for (var i = 0; i < sorted.length; i++) {\n            var c = sorted[i];\n            var type = c.type;\n            var defaultValue = undefined;\n            var attr = c;\n            var inherited = undefined;\n            if (attr.defaultValue !== undefined) {\n                defaultValue = attr.defaultValue;\n            }\n            else if (attr.modelName !== undefined\n                && parentAttributes !== undefined\n                && parentAttributes.nameToAttribute[attr.modelName] !== undefined) {\n                inherited = attr.modelName;\n                attr = parentAttributes.nameToAttribute[attr.modelName];\n                defaultValue = attr.defaultValue;\n                type = attr.type;\n            }\n            var defValue = JSON.stringify(defaultValue);\n            var required = attr.required || attr.fixed ? \"\" : \"?\";\n            if (c.fixed) {\n                lines.push(\"\\t\" + c.name + \": \" + defValue + \";\");\n            }\n            else {\n                var comment = (defaultValue !== undefined ? \"default: \" + defValue : \"\") +\n                    (inherited !== undefined ? \" - inherited from global \" + inherited : \"\");\n                lines.push(\"\\t\" + c.name + required + \": \" + type + \";\" +\n                    (comment.length > 0 ? \" // \" + comment : \"\"));\n            }\n        }\n        lines.push(\"}\");\n        return lines.join(\"\\n\");\n    };\n    return AttributeDefinitions;\n}());\nexports.AttributeDefinitions = AttributeDefinitions;\n\n\n//# sourceURL=webpack://FlexLayout/./src/AttributeDefinitions.ts?");
 
 /***/ }),
 
@@ -308,7 +308,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar At
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Orientation_1 = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ./Rect */ \"./src/Rect.ts\");\nvar DockLocation = /** @class */ (function () {\n    /** @hidden @internal */\n    function DockLocation(name, orientation, indexPlus) {\n        this._name = name;\n        this._orientation = orientation;\n        this._indexPlus = indexPlus;\n        DockLocation.values[this._name] = this;\n    }\n    /** @hidden @internal */\n    DockLocation.getByName = function (name) {\n        return DockLocation.values[name];\n    };\n    /** @hidden @internal */\n    DockLocation.getLocation = function (rect, x, y) {\n        x = (x - rect.x) / rect.width;\n        y = (y - rect.y) / rect.height;\n        if (x >= 0.25 && x < 0.75 && y >= 0.25 && y < 0.75) {\n            return DockLocation.CENTER;\n        }\n        // Whether or not the point is in the bottom-left half of the rect\n        // +-----+\n        // |\\    |\n        // |x\\   |\n        // |xx\\  |\n        // |xxx\\ |\n        // |xxxx\\|\n        // +-----+\n        var bl = y >= x;\n        // Whether or not the point is in the bottom-right half of the rect\n        // +-----+\n        // |    /|\n        // |   /x|\n        // |  /xx|\n        // | /xxx|\n        // |/xxxx|\n        // +-----+\n        var br = y >= 1 - x;\n        if (bl) {\n            return br ? DockLocation.BOTTOM : DockLocation.LEFT;\n        }\n        else {\n            return br ? DockLocation.RIGHT : DockLocation.TOP;\n        }\n    };\n    DockLocation.prototype.getName = function () {\n        return this._name;\n    };\n    DockLocation.prototype.getOrientation = function () {\n        return this._orientation;\n    };\n    /** @hidden @internal */\n    DockLocation.prototype.getDockRect = function (r) {\n        if (this === DockLocation.TOP) {\n            return new Rect_1.default(r.x, r.y, r.width, r.height / 2);\n        }\n        else if (this === DockLocation.BOTTOM) {\n            return new Rect_1.default(r.x, r.getBottom() - r.height / 2, r.width, r.height / 2);\n        }\n        if (this === DockLocation.LEFT) {\n            return new Rect_1.default(r.x, r.y, r.width / 2, r.height);\n        }\n        else if (this === DockLocation.RIGHT) {\n            return new Rect_1.default(r.getRight() - r.width / 2, r.y, r.width / 2, r.height);\n        }\n        else {\n            return r.clone();\n        }\n    };\n    /** @hidden @internal */\n    DockLocation.prototype.split = function (rect, size) {\n        if (this === DockLocation.TOP) {\n            var r1 = new Rect_1.default(rect.x, rect.y, rect.width, size);\n            var r2 = new Rect_1.default(rect.x, rect.y + size, rect.width, rect.height - size);\n            return { start: r1, end: r2 };\n        }\n        else if (this === DockLocation.LEFT) {\n            var r1 = new Rect_1.default(rect.x, rect.y, size, rect.height);\n            var r2 = new Rect_1.default(rect.x + size, rect.y, rect.width - size, rect.height);\n            return { start: r1, end: r2 };\n        }\n        if (this === DockLocation.RIGHT) {\n            var r1 = new Rect_1.default(rect.getRight() - size, rect.y, size, rect.height);\n            var r2 = new Rect_1.default(rect.x, rect.y, rect.width - size, rect.height);\n            return { start: r1, end: r2 };\n        }\n        else {\n            // if (this === DockLocation.BOTTOM) {\n            var r1 = new Rect_1.default(rect.x, rect.getBottom() - size, rect.width, size);\n            var r2 = new Rect_1.default(rect.x, rect.y, rect.width, rect.height - size);\n            return { start: r1, end: r2 };\n        }\n    };\n    /** @hidden @internal */\n    DockLocation.prototype.reflect = function () {\n        if (this === DockLocation.TOP) {\n            return DockLocation.BOTTOM;\n        }\n        else if (this === DockLocation.LEFT) {\n            return DockLocation.RIGHT;\n        }\n        if (this === DockLocation.RIGHT) {\n            return DockLocation.LEFT;\n        }\n        else {\n            // if (this === DockLocation.BOTTOM) {\n            return DockLocation.TOP;\n        }\n    };\n    DockLocation.prototype.toString = function () {\n        return \"(DockLocation: name=\" + this._name + \", orientation=\" + this._orientation + \")\";\n    };\n    DockLocation.values = {};\n    DockLocation.TOP = new DockLocation(\"top\", Orientation_1.default.VERT, 0);\n    DockLocation.BOTTOM = new DockLocation(\"bottom\", Orientation_1.default.VERT, 1);\n    DockLocation.LEFT = new DockLocation(\"left\", Orientation_1.default.HORZ, 0);\n    DockLocation.RIGHT = new DockLocation(\"right\", Orientation_1.default.HORZ, 1);\n    DockLocation.CENTER = new DockLocation(\"center\", Orientation_1.default.VERT, 0);\n    return DockLocation;\n}());\nexports.default = DockLocation;\n\n\n//# sourceURL=webpack://FlexLayout/./src/DockLocation.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.DockLocation = void 0;\nvar Orientation_1 = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ./Rect */ \"./src/Rect.ts\");\nvar DockLocation = /** @class */ (function () {\n    /** @hidden @internal */\n    function DockLocation(name, orientation, indexPlus) {\n        this._name = name;\n        this._orientation = orientation;\n        this._indexPlus = indexPlus;\n        DockLocation.values[this._name] = this;\n    }\n    /** @hidden @internal */\n    DockLocation.getByName = function (name) {\n        return DockLocation.values[name];\n    };\n    /** @hidden @internal */\n    DockLocation.getLocation = function (rect, x, y) {\n        x = (x - rect.x) / rect.width;\n        y = (y - rect.y) / rect.height;\n        if (x >= 0.25 && x < 0.75 && y >= 0.25 && y < 0.75) {\n            return DockLocation.CENTER;\n        }\n        // Whether or not the point is in the bottom-left half of the rect\n        // +-----+\n        // |\\    |\n        // |x\\   |\n        // |xx\\  |\n        // |xxx\\ |\n        // |xxxx\\|\n        // +-----+\n        var bl = y >= x;\n        // Whether or not the point is in the bottom-right half of the rect\n        // +-----+\n        // |    /|\n        // |   /x|\n        // |  /xx|\n        // | /xxx|\n        // |/xxxx|\n        // +-----+\n        var br = y >= 1 - x;\n        if (bl) {\n            return br ? DockLocation.BOTTOM : DockLocation.LEFT;\n        }\n        else {\n            return br ? DockLocation.RIGHT : DockLocation.TOP;\n        }\n    };\n    DockLocation.prototype.getName = function () {\n        return this._name;\n    };\n    DockLocation.prototype.getOrientation = function () {\n        return this._orientation;\n    };\n    /** @hidden @internal */\n    DockLocation.prototype.getDockRect = function (r) {\n        if (this === DockLocation.TOP) {\n            return new Rect_1.Rect(r.x, r.y, r.width, r.height / 2);\n        }\n        else if (this === DockLocation.BOTTOM) {\n            return new Rect_1.Rect(r.x, r.getBottom() - r.height / 2, r.width, r.height / 2);\n        }\n        if (this === DockLocation.LEFT) {\n            return new Rect_1.Rect(r.x, r.y, r.width / 2, r.height);\n        }\n        else if (this === DockLocation.RIGHT) {\n            return new Rect_1.Rect(r.getRight() - r.width / 2, r.y, r.width / 2, r.height);\n        }\n        else {\n            return r.clone();\n        }\n    };\n    /** @hidden @internal */\n    DockLocation.prototype.split = function (rect, size) {\n        if (this === DockLocation.TOP) {\n            var r1 = new Rect_1.Rect(rect.x, rect.y, rect.width, size);\n            var r2 = new Rect_1.Rect(rect.x, rect.y + size, rect.width, rect.height - size);\n            return { start: r1, end: r2 };\n        }\n        else if (this === DockLocation.LEFT) {\n            var r1 = new Rect_1.Rect(rect.x, rect.y, size, rect.height);\n            var r2 = new Rect_1.Rect(rect.x + size, rect.y, rect.width - size, rect.height);\n            return { start: r1, end: r2 };\n        }\n        if (this === DockLocation.RIGHT) {\n            var r1 = new Rect_1.Rect(rect.getRight() - size, rect.y, size, rect.height);\n            var r2 = new Rect_1.Rect(rect.x, rect.y, rect.width - size, rect.height);\n            return { start: r1, end: r2 };\n        }\n        else {\n            // if (this === DockLocation.BOTTOM) {\n            var r1 = new Rect_1.Rect(rect.x, rect.getBottom() - size, rect.width, size);\n            var r2 = new Rect_1.Rect(rect.x, rect.y, rect.width, rect.height - size);\n            return { start: r1, end: r2 };\n        }\n    };\n    /** @hidden @internal */\n    DockLocation.prototype.reflect = function () {\n        if (this === DockLocation.TOP) {\n            return DockLocation.BOTTOM;\n        }\n        else if (this === DockLocation.LEFT) {\n            return DockLocation.RIGHT;\n        }\n        if (this === DockLocation.RIGHT) {\n            return DockLocation.LEFT;\n        }\n        else {\n            // if (this === DockLocation.BOTTOM) {\n            return DockLocation.TOP;\n        }\n    };\n    DockLocation.prototype.toString = function () {\n        return \"(DockLocation: name=\" + this._name + \", orientation=\" + this._orientation + \")\";\n    };\n    DockLocation.values = {};\n    DockLocation.TOP = new DockLocation(\"top\", Orientation_1.Orientation.VERT, 0);\n    DockLocation.BOTTOM = new DockLocation(\"bottom\", Orientation_1.Orientation.VERT, 1);\n    DockLocation.LEFT = new DockLocation(\"left\", Orientation_1.Orientation.HORZ, 0);\n    DockLocation.RIGHT = new DockLocation(\"right\", Orientation_1.Orientation.HORZ, 1);\n    DockLocation.CENTER = new DockLocation(\"center\", Orientation_1.Orientation.VERT, 0);\n    return DockLocation;\n}());\nexports.DockLocation = DockLocation;\n\n\n//# sourceURL=webpack://FlexLayout/./src/DockLocation.ts?");
 
 /***/ }),
 
@@ -320,7 +320,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Or
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Rect_1 = __webpack_require__(/*! ./Rect */ \"./src/Rect.ts\");\n/** @hidden @internal */\nvar canUseDOM = !!(typeof window !== \"undefined\" && window.document && window.document.createElement);\nvar DragDrop = /** @class */ (function () {\n    /** @hidden @internal */\n    function DragDrop() {\n        /** @hidden @internal */\n        this._manualGlassManagement = false;\n        /** @hidden @internal */\n        this._startX = 0;\n        /** @hidden @internal */\n        this._startY = 0;\n        /** @hidden @internal */\n        this._dragDepth = 0;\n        /** @hidden @internal */\n        this._glassShowing = false;\n        /** @hidden @internal */\n        this._dragging = false;\n        /** @hidden @internal */\n        this._active = false; // drag and drop is in progress, can be used on ios to prevent body scrolling (see demo)\n        if (canUseDOM) {\n            // check for serverside rendering\n            this._glass = document.createElement(\"div\");\n            this._glass.style.zIndex = \"998\";\n            this._glass.style.backgroundColor = \"transparent\";\n            this._glass.style.outline = \"none\";\n        }\n        this._defaultGlassCursor = \"default\";\n        this._onMouseMove = this._onMouseMove.bind(this);\n        this._onMouseUp = this._onMouseUp.bind(this);\n        this._onKeyPress = this._onKeyPress.bind(this);\n        this._onDragCancel = this._onDragCancel.bind(this);\n        this._onDragEnter = this._onDragEnter.bind(this);\n        this._onDragLeave = this._onDragLeave.bind(this);\n        this.resizeGlass = this.resizeGlass.bind(this);\n        this._lastClick = 0;\n        this._clickX = 0;\n        this._clickY = 0;\n    }\n    // if you add the glass pane then you should remove it\n    DragDrop.prototype.addGlass = function (fCancel) {\n        var _a;\n        if (!this._glassShowing) {\n            if (!this._document) {\n                this._document = window.document;\n            }\n            if (!this._rootElement) {\n                this._rootElement = this._document.body;\n            }\n            this.resizeGlass();\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', this.resizeGlass);\n            this._document.body.appendChild(this._glass);\n            this._glass.tabIndex = -1;\n            this._glass.focus();\n            this._glass.addEventListener(\"keydown\", this._onKeyPress);\n            this._glass.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\n            this._glass.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\n            this._glass.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\n            this._glassShowing = true;\n            this._fDragCancel = fCancel;\n            this._manualGlassManagement = false;\n        }\n        else {\n            // second call to addGlass (via dragstart)\n            this._manualGlassManagement = true;\n        }\n    };\n    DragDrop.prototype.resizeGlass = function () {\n        var glassRect = Rect_1.default.fromElement(this._rootElement);\n        glassRect.positionElement(this._glass, \"fixed\");\n    };\n    DragDrop.prototype.hideGlass = function () {\n        var _a;\n        if (this._glassShowing) {\n            this._document.body.removeChild(this._glass);\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', this.resizeGlass);\n            this._glassShowing = false;\n            this._document = undefined;\n            this._rootElement = undefined;\n            this.setGlassCursorOverride(undefined);\n        }\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._updateGlassCursor = function () {\n        var _a;\n        this._glass.style.cursor = (_a = this._glassCursorOverride) !== null && _a !== void 0 ? _a : this._defaultGlassCursor;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._setDefaultGlassCursor = function (cursor) {\n        this._defaultGlassCursor = cursor;\n        this._updateGlassCursor();\n    };\n    DragDrop.prototype.setGlassCursorOverride = function (cursor) {\n        this._glassCursorOverride = cursor;\n        this._updateGlassCursor();\n    };\n    DragDrop.prototype.startDrag = function (event, fDragStart, fDragMove, fDragEnd, fDragCancel, fClick, fDblClick, currentDocument, rootElement) {\n        // prevent 'duplicate' action (mouse event for same action as previous touch event (a fix for ios))\n        if (event && this._lastEvent && this._lastEvent.type.startsWith(\"touch\") && event.type.startsWith(\"mouse\") && event.timeStamp - this._lastEvent.timeStamp < 500) {\n            return;\n        }\n        this._lastEvent = event;\n        if (currentDocument) {\n            this._document = currentDocument;\n        }\n        else {\n            this._document = window.document;\n        }\n        if (rootElement) {\n            this._rootElement = rootElement;\n        }\n        else {\n            this._rootElement = this._document.body;\n        }\n        var posEvent = this._getLocationEvent(event);\n        this.addGlass(fDragCancel);\n        if (this._dragging) {\n            console.warn(\"this._dragging true on startDrag should never happen\");\n        }\n        if (event) {\n            this._startX = posEvent.clientX;\n            this._startY = posEvent.clientY;\n            if (!window.matchMedia || window.matchMedia(\"(pointer: fine)\").matches) {\n                this._setDefaultGlassCursor(getComputedStyle(event.target).cursor);\n            }\n            this._stopPropagation(event);\n            this._preventDefault(event);\n        }\n        else {\n            this._startX = 0;\n            this._startY = 0;\n            this._setDefaultGlassCursor(\"default\");\n        }\n        this._dragging = false;\n        this._fDragStart = fDragStart;\n        this._fDragMove = fDragMove;\n        this._fDragEnd = fDragEnd;\n        this._fDragCancel = fDragCancel;\n        this._fClick = fClick;\n        this._fDblClick = fDblClick;\n        this._active = true;\n        if ((event === null || event === void 0 ? void 0 : event.type) === 'dragenter') {\n            this._dragDepth = 1;\n            this._rootElement.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\n            this._rootElement.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\n            this._rootElement.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\n            this._document.addEventListener(\"dragend\", this._onDragCancel, { passive: false });\n            this._document.addEventListener(\"drop\", this._onMouseUp, { passive: false });\n        }\n        else {\n            this._document.addEventListener(\"mouseup\", this._onMouseUp, { passive: false });\n            this._document.addEventListener(\"mousemove\", this._onMouseMove, { passive: false });\n            this._document.addEventListener(\"touchend\", this._onMouseUp, { passive: false });\n            this._document.addEventListener(\"touchmove\", this._onMouseMove, { passive: false });\n        }\n    };\n    DragDrop.prototype.isDragging = function () {\n        return this._dragging;\n    };\n    DragDrop.prototype.isActive = function () {\n        return this._active;\n    };\n    DragDrop.prototype.toString = function () {\n        var rtn = \"(DragDrop: \" + \"startX=\" + this._startX + \", startY=\" + this._startY + \", dragging=\" + this._dragging + \")\";\n        return rtn;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onKeyPress = function (event) {\n        if (event.keyCode === 27) {\n            // esc\n            this._onDragCancel();\n        }\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onDragCancel = function () {\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\n        this.hideGlass();\n        if (this._fDragCancel !== undefined) {\n            this._fDragCancel(this._dragging);\n        }\n        this._dragging = false;\n        this._active = false;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._getLocationEvent = function (event) {\n        var posEvent = event;\n        if (event && event.touches) {\n            posEvent = event.touches[0];\n        }\n        return posEvent;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._getLocationEventEnd = function (event) {\n        var posEvent = event;\n        if (event.changedTouches) {\n            posEvent = event.changedTouches[0];\n        }\n        return posEvent;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._stopPropagation = function (event) {\n        if (event.stopPropagation) {\n            event.stopPropagation();\n        }\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._preventDefault = function (event) {\n        if (event.preventDefault && event.cancelable) {\n            event.preventDefault();\n        }\n        return event;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onMouseMove = function (event) {\n        this._lastEvent = event;\n        var posEvent = this._getLocationEvent(event);\n        this._stopPropagation(event);\n        this._preventDefault(event);\n        if (!this._dragging && (Math.abs(this._startX - posEvent.clientX) > 5 || Math.abs(this._startY - posEvent.clientY) > 5)) {\n            this._dragging = true;\n            if (this._fDragStart) {\n                this._setDefaultGlassCursor(\"move\");\n                this._dragging = this._fDragStart({ clientX: this._startX, clientY: this._startY });\n            }\n        }\n        if (this._dragging) {\n            if (this._fDragMove) {\n                this._fDragMove(posEvent);\n            }\n        }\n        return false;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onMouseUp = function (event) {\n        this._lastEvent = event;\n        var posEvent = this._getLocationEventEnd(event);\n        this._stopPropagation(event);\n        this._preventDefault(event);\n        this._active = false;\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\n        if (!this._manualGlassManagement) {\n            this.hideGlass();\n        }\n        if (this._dragging) {\n            this._dragging = false;\n            if (this._fDragEnd) {\n                this._fDragEnd(event);\n            }\n            // dump(\"set dragging = false\\n\");\n        }\n        else {\n            if (this._fDragCancel) {\n                this._fDragCancel(this._dragging);\n            }\n            if (Math.abs(this._startX - posEvent.clientX) <= 5 && Math.abs(this._startY - posEvent.clientY) <= 5) {\n                var clickTime = new Date().getTime();\n                // check for double click\n                if (Math.abs(this._clickX - posEvent.clientX) <= 5 && Math.abs(this._clickY - posEvent.clientY) <= 5) {\n                    if (clickTime - this._lastClick < 500) {\n                        if (this._fDblClick) {\n                            this._fDblClick(event);\n                        }\n                    }\n                }\n                if (this._fClick) {\n                    this._fClick(event);\n                }\n                this._lastClick = clickTime;\n                this._clickX = posEvent.clientX;\n                this._clickY = posEvent.clientY;\n            }\n        }\n        return false;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onDragEnter = function (event) {\n        this._preventDefault(event);\n        this._stopPropagation(event);\n        this._dragDepth++;\n        return false;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onDragLeave = function (event) {\n        this._preventDefault(event);\n        this._stopPropagation(event);\n        this._dragDepth--;\n        if (this._dragDepth <= 0) {\n            this._onDragCancel();\n        }\n        return false;\n    };\n    DragDrop.instance = new DragDrop();\n    return DragDrop;\n}());\nexports.default = DragDrop;\n\n\n//# sourceURL=webpack://FlexLayout/./src/DragDrop.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.DragDrop = void 0;\nvar Rect_1 = __webpack_require__(/*! ./Rect */ \"./src/Rect.ts\");\n/** @hidden @internal */\nvar canUseDOM = !!(typeof window !== \"undefined\" && window.document && window.document.createElement);\nvar DragDrop = /** @class */ (function () {\n    /** @hidden @internal */\n    function DragDrop() {\n        /** @hidden @internal */\n        this._manualGlassManagement = false;\n        /** @hidden @internal */\n        this._startX = 0;\n        /** @hidden @internal */\n        this._startY = 0;\n        /** @hidden @internal */\n        this._dragDepth = 0;\n        /** @hidden @internal */\n        this._glassShowing = false;\n        /** @hidden @internal */\n        this._dragging = false;\n        /** @hidden @internal */\n        this._active = false; // drag and drop is in progress, can be used on ios to prevent body scrolling (see demo)\n        if (canUseDOM) {\n            // check for serverside rendering\n            this._glass = document.createElement(\"div\");\n            this._glass.style.zIndex = \"998\";\n            this._glass.style.backgroundColor = \"transparent\";\n            this._glass.style.outline = \"none\";\n        }\n        this._defaultGlassCursor = \"default\";\n        this._onMouseMove = this._onMouseMove.bind(this);\n        this._onMouseUp = this._onMouseUp.bind(this);\n        this._onKeyPress = this._onKeyPress.bind(this);\n        this._onDragCancel = this._onDragCancel.bind(this);\n        this._onDragEnter = this._onDragEnter.bind(this);\n        this._onDragLeave = this._onDragLeave.bind(this);\n        this.resizeGlass = this.resizeGlass.bind(this);\n        this._lastClick = 0;\n        this._clickX = 0;\n        this._clickY = 0;\n    }\n    // if you add the glass pane then you should remove it\n    DragDrop.prototype.addGlass = function (fCancel) {\n        var _a;\n        if (!this._glassShowing) {\n            if (!this._document) {\n                this._document = window.document;\n            }\n            if (!this._rootElement) {\n                this._rootElement = this._document.body;\n            }\n            this.resizeGlass();\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', this.resizeGlass);\n            this._document.body.appendChild(this._glass);\n            this._glass.tabIndex = -1;\n            this._glass.focus();\n            this._glass.addEventListener(\"keydown\", this._onKeyPress);\n            this._glass.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\n            this._glass.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\n            this._glass.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\n            this._glassShowing = true;\n            this._fDragCancel = fCancel;\n            this._manualGlassManagement = false;\n        }\n        else {\n            // second call to addGlass (via dragstart)\n            this._manualGlassManagement = true;\n        }\n    };\n    DragDrop.prototype.resizeGlass = function () {\n        var glassRect = Rect_1.Rect.fromElement(this._rootElement);\n        glassRect.positionElement(this._glass, \"fixed\");\n    };\n    DragDrop.prototype.hideGlass = function () {\n        var _a;\n        if (this._glassShowing) {\n            this._document.body.removeChild(this._glass);\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', this.resizeGlass);\n            this._glassShowing = false;\n            this._document = undefined;\n            this._rootElement = undefined;\n            this.setGlassCursorOverride(undefined);\n        }\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._updateGlassCursor = function () {\n        var _a;\n        this._glass.style.cursor = (_a = this._glassCursorOverride) !== null && _a !== void 0 ? _a : this._defaultGlassCursor;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._setDefaultGlassCursor = function (cursor) {\n        this._defaultGlassCursor = cursor;\n        this._updateGlassCursor();\n    };\n    DragDrop.prototype.setGlassCursorOverride = function (cursor) {\n        this._glassCursorOverride = cursor;\n        this._updateGlassCursor();\n    };\n    DragDrop.prototype.startDrag = function (event, fDragStart, fDragMove, fDragEnd, fDragCancel, fClick, fDblClick, currentDocument, rootElement) {\n        // prevent 'duplicate' action (mouse event for same action as previous touch event (a fix for ios))\n        if (event && this._lastEvent && this._lastEvent.type.startsWith(\"touch\") && event.type.startsWith(\"mouse\") && event.timeStamp - this._lastEvent.timeStamp < 500) {\n            return;\n        }\n        this._lastEvent = event;\n        if (currentDocument) {\n            this._document = currentDocument;\n        }\n        else {\n            this._document = window.document;\n        }\n        if (rootElement) {\n            this._rootElement = rootElement;\n        }\n        else {\n            this._rootElement = this._document.body;\n        }\n        var posEvent = this._getLocationEvent(event);\n        this.addGlass(fDragCancel);\n        if (this._dragging) {\n            console.warn(\"this._dragging true on startDrag should never happen\");\n        }\n        if (event) {\n            this._startX = posEvent.clientX;\n            this._startY = posEvent.clientY;\n            if (!window.matchMedia || window.matchMedia(\"(pointer: fine)\").matches) {\n                this._setDefaultGlassCursor(getComputedStyle(event.target).cursor);\n            }\n            this._stopPropagation(event);\n            this._preventDefault(event);\n        }\n        else {\n            this._startX = 0;\n            this._startY = 0;\n            this._setDefaultGlassCursor(\"default\");\n        }\n        this._dragging = false;\n        this._fDragStart = fDragStart;\n        this._fDragMove = fDragMove;\n        this._fDragEnd = fDragEnd;\n        this._fDragCancel = fDragCancel;\n        this._fClick = fClick;\n        this._fDblClick = fDblClick;\n        this._active = true;\n        if ((event === null || event === void 0 ? void 0 : event.type) === 'dragenter') {\n            this._dragDepth = 1;\n            this._rootElement.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\n            this._rootElement.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\n            this._rootElement.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\n            this._document.addEventListener(\"dragend\", this._onDragCancel, { passive: false });\n            this._document.addEventListener(\"drop\", this._onMouseUp, { passive: false });\n        }\n        else {\n            this._document.addEventListener(\"mouseup\", this._onMouseUp, { passive: false });\n            this._document.addEventListener(\"mousemove\", this._onMouseMove, { passive: false });\n            this._document.addEventListener(\"touchend\", this._onMouseUp, { passive: false });\n            this._document.addEventListener(\"touchmove\", this._onMouseMove, { passive: false });\n        }\n    };\n    DragDrop.prototype.isDragging = function () {\n        return this._dragging;\n    };\n    DragDrop.prototype.isActive = function () {\n        return this._active;\n    };\n    DragDrop.prototype.toString = function () {\n        var rtn = \"(DragDrop: \" + \"startX=\" + this._startX + \", startY=\" + this._startY + \", dragging=\" + this._dragging + \")\";\n        return rtn;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onKeyPress = function (event) {\n        if (event.keyCode === 27) {\n            // esc\n            this._onDragCancel();\n        }\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onDragCancel = function () {\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\n        this.hideGlass();\n        if (this._fDragCancel !== undefined) {\n            this._fDragCancel(this._dragging);\n        }\n        this._dragging = false;\n        this._active = false;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._getLocationEvent = function (event) {\n        var posEvent = event;\n        if (event && event.touches) {\n            posEvent = event.touches[0];\n        }\n        return posEvent;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._getLocationEventEnd = function (event) {\n        var posEvent = event;\n        if (event.changedTouches) {\n            posEvent = event.changedTouches[0];\n        }\n        return posEvent;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._stopPropagation = function (event) {\n        if (event.stopPropagation) {\n            event.stopPropagation();\n        }\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._preventDefault = function (event) {\n        if (event.preventDefault && event.cancelable) {\n            event.preventDefault();\n        }\n        return event;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onMouseMove = function (event) {\n        this._lastEvent = event;\n        var posEvent = this._getLocationEvent(event);\n        this._stopPropagation(event);\n        this._preventDefault(event);\n        if (!this._dragging && (Math.abs(this._startX - posEvent.clientX) > 5 || Math.abs(this._startY - posEvent.clientY) > 5)) {\n            this._dragging = true;\n            if (this._fDragStart) {\n                this._setDefaultGlassCursor(\"move\");\n                this._dragging = this._fDragStart({ clientX: this._startX, clientY: this._startY });\n            }\n        }\n        if (this._dragging) {\n            if (this._fDragMove) {\n                this._fDragMove(posEvent);\n            }\n        }\n        return false;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onMouseUp = function (event) {\n        this._lastEvent = event;\n        var posEvent = this._getLocationEventEnd(event);\n        this._stopPropagation(event);\n        this._preventDefault(event);\n        this._active = false;\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\n        if (!this._manualGlassManagement) {\n            this.hideGlass();\n        }\n        if (this._dragging) {\n            this._dragging = false;\n            if (this._fDragEnd) {\n                this._fDragEnd(event);\n            }\n            // dump(\"set dragging = false\\n\");\n        }\n        else {\n            if (this._fDragCancel) {\n                this._fDragCancel(this._dragging);\n            }\n            if (Math.abs(this._startX - posEvent.clientX) <= 5 && Math.abs(this._startY - posEvent.clientY) <= 5) {\n                var clickTime = new Date().getTime();\n                // check for double click\n                if (Math.abs(this._clickX - posEvent.clientX) <= 5 && Math.abs(this._clickY - posEvent.clientY) <= 5) {\n                    if (clickTime - this._lastClick < 500) {\n                        if (this._fDblClick) {\n                            this._fDblClick(event);\n                        }\n                    }\n                }\n                if (this._fClick) {\n                    this._fClick(event);\n                }\n                this._lastClick = clickTime;\n                this._clickX = posEvent.clientX;\n                this._clickY = posEvent.clientY;\n            }\n        }\n        return false;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onDragEnter = function (event) {\n        this._preventDefault(event);\n        this._stopPropagation(event);\n        this._dragDepth++;\n        return false;\n    };\n    /** @hidden @internal */\n    DragDrop.prototype._onDragLeave = function (event) {\n        this._preventDefault(event);\n        this._stopPropagation(event);\n        this._dragDepth--;\n        if (this._dragDepth <= 0) {\n            this._onDragCancel();\n        }\n        return false;\n    };\n    DragDrop.instance = new DragDrop();\n    return DragDrop;\n}());\nexports.DragDrop = DragDrop;\n\n\n//# sourceURL=webpack://FlexLayout/./src/DragDrop.ts?");
 
 /***/ }),
 
@@ -332,7 +332,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Re
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar DropInfo = /** @class */ (function () {\n    function DropInfo(node, rect, location, index, className) {\n        this.node = node;\n        this.rect = rect;\n        this.location = location;\n        this.index = index;\n        this.className = className;\n    }\n    return DropInfo;\n}());\nexports.default = DropInfo;\n\n\n//# sourceURL=webpack://FlexLayout/./src/DropInfo.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.DropInfo = void 0;\nvar DropInfo = /** @class */ (function () {\n    function DropInfo(node, rect, location, index, className) {\n        this.node = node;\n        this.rect = rect;\n        this.location = location;\n        this.index = index;\n        this.className = className;\n    }\n    return DropInfo;\n}());\nexports.DropInfo = DropInfo;\n\n\n//# sourceURL=webpack://FlexLayout/./src/DropInfo.ts?");
 
 /***/ }),
 
@@ -356,7 +356,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Orientation = /** @class */ (function () {\n    /** @hidden @internal */\n    function Orientation(name) {\n        this._name = name;\n    }\n    Orientation.flip = function (from) {\n        if (from === Orientation.HORZ) {\n            return Orientation.VERT;\n        }\n        else {\n            return Orientation.HORZ;\n        }\n    };\n    Orientation.prototype.getName = function () {\n        return this._name;\n    };\n    Orientation.prototype.toString = function () {\n        return this._name;\n    };\n    Orientation.HORZ = new Orientation(\"horz\");\n    Orientation.VERT = new Orientation(\"vert\");\n    return Orientation;\n}());\nexports.default = Orientation;\n\n\n//# sourceURL=webpack://FlexLayout/./src/Orientation.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Orientation = void 0;\nvar Orientation = /** @class */ (function () {\n    /** @hidden @internal */\n    function Orientation(name) {\n        this._name = name;\n    }\n    Orientation.flip = function (from) {\n        if (from === Orientation.HORZ) {\n            return Orientation.VERT;\n        }\n        else {\n            return Orientation.HORZ;\n        }\n    };\n    Orientation.prototype.getName = function () {\n        return this._name;\n    };\n    Orientation.prototype.toString = function () {\n        return this._name;\n    };\n    Orientation.HORZ = new Orientation(\"horz\");\n    Orientation.VERT = new Orientation(\"vert\");\n    return Orientation;\n}());\nexports.Orientation = Orientation;\n\n\n//# sourceURL=webpack://FlexLayout/./src/Orientation.ts?");
 
 /***/ }),
 
@@ -368,7 +368,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Or
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.showPopup = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar _1 = __webpack_require__(/*! . */ \"./src/index.ts\");\nvar Types_1 = __webpack_require__(/*! ./Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nfunction showPopup(layoutDiv, triggerElement, items, onSelect, classNameMapper) {\n    var currentDocument = triggerElement.ownerDocument;\n    var triggerRect = triggerElement.getBoundingClientRect();\n    var layoutRect = layoutDiv.getBoundingClientRect();\n    var elm = currentDocument.createElement(\"div\");\n    elm.className = classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);\n    if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {\n        elm.style.left = triggerRect.left - layoutRect.left + \"px\";\n    }\n    else {\n        elm.style.right = layoutRect.right - triggerRect.right + \"px\";\n    }\n    if (triggerRect.top < layoutRect.top + layoutRect.height / 2) {\n        elm.style.top = triggerRect.top - layoutRect.top + \"px\";\n    }\n    else {\n        elm.style.bottom = layoutRect.bottom - triggerRect.bottom + \"px\";\n    }\n    _1.DragDrop.instance.addGlass(function () { return onHide(); });\n    _1.DragDrop.instance.setGlassCursorOverride(\"default\");\n    layoutDiv.appendChild(elm);\n    var onHide = function () {\n        _1.DragDrop.instance.hideGlass();\n        layoutDiv.removeChild(elm);\n        ReactDOM.unmountComponentAtNode(elm);\n        elm.removeEventListener(\"mousedown\", onElementMouseDown);\n        currentDocument.removeEventListener(\"mousedown\", onDocMouseDown);\n    };\n    var onElementMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onDocMouseDown = function (event) {\n        onHide();\n    };\n    elm.addEventListener(\"mousedown\", onElementMouseDown);\n    currentDocument.addEventListener(\"mousedown\", onDocMouseDown);\n    ReactDOM.render(React.createElement(PopupMenu, { currentDocument: currentDocument, onSelect: onSelect, onHide: onHide, items: items, classNameMapper: classNameMapper }), elm);\n}\nexports.showPopup = showPopup;\n/** @hidden @internal */\nvar PopupMenu = function (props) {\n    var items = props.items, onHide = props.onHide, onSelect = props.onSelect, classNameMapper = props.classNameMapper;\n    var onItemClick = function (item, event) {\n        onSelect(item);\n        onHide();\n        event.stopPropagation();\n    };\n    var itemElements = items.map(function (item, i) { return (React.createElement(\"div\", { key: item.index, className: classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM), \"data-layout-path\": \"/popup-menu/tb\" + i, onClick: function (event) { return onItemClick(item, event); }, title: item.node.getHelpText() }, item.node._getRenderedName())); });\n    return (React.createElement(\"div\", { className: classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU), \"data-layout-path\": \"/popup-menu\" }, itemElements));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/PopupMenu.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.showPopup = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar _1 = __webpack_require__(/*! . */ \"./src/index.ts\");\nvar Types_1 = __webpack_require__(/*! ./Types */ \"./src/Types.ts\");\nvar TabButtonStamp_1 = __webpack_require__(/*! ./view/TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n/** @hidden @internal */\nfunction showPopup(triggerElement, items, onSelect, layout, iconFactory, titleFactory) {\n    var layoutDiv = layout.getRootDiv();\n    var classNameMapper = layout.getClassName;\n    var currentDocument = triggerElement.ownerDocument;\n    var triggerRect = triggerElement.getBoundingClientRect();\n    var layoutRect = layoutDiv.getBoundingClientRect();\n    var elm = currentDocument.createElement(\"div\");\n    elm.className = classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);\n    if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {\n        elm.style.left = triggerRect.left - layoutRect.left + \"px\";\n    }\n    else {\n        elm.style.right = layoutRect.right - triggerRect.right + \"px\";\n    }\n    if (triggerRect.top < layoutRect.top + layoutRect.height / 2) {\n        elm.style.top = triggerRect.top - layoutRect.top + \"px\";\n    }\n    else {\n        elm.style.bottom = layoutRect.bottom - triggerRect.bottom + \"px\";\n    }\n    _1.DragDrop.instance.addGlass(function () { return onHide(); });\n    _1.DragDrop.instance.setGlassCursorOverride(\"default\");\n    layoutDiv.appendChild(elm);\n    var onHide = function () {\n        layout.hidePortal();\n        _1.DragDrop.instance.hideGlass();\n        layoutDiv.removeChild(elm);\n        elm.removeEventListener(\"mousedown\", onElementMouseDown);\n        currentDocument.removeEventListener(\"mousedown\", onDocMouseDown);\n    };\n    var onElementMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onDocMouseDown = function (event) {\n        onHide();\n    };\n    elm.addEventListener(\"mousedown\", onElementMouseDown);\n    currentDocument.addEventListener(\"mousedown\", onDocMouseDown);\n    layout.showPortal(React.createElement(PopupMenu, { currentDocument: currentDocument, onSelect: onSelect, onHide: onHide, items: items, classNameMapper: classNameMapper, layout: layout, iconFactory: iconFactory, titleFactory: titleFactory }), elm);\n}\nexports.showPopup = showPopup;\n/** @hidden @internal */\nvar PopupMenu = function (props) {\n    var items = props.items, onHide = props.onHide, onSelect = props.onSelect, classNameMapper = props.classNameMapper, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory;\n    var onItemClick = function (item, event) {\n        onSelect(item);\n        onHide();\n        event.stopPropagation();\n    };\n    var itemElements = items.map(function (item, i) { return (React.createElement(\"div\", { key: item.index, className: classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM), \"data-layout-path\": \"/popup-menu/tb\" + i, onClick: function (event) { return onItemClick(item, event); }, title: item.node.getHelpText() }, item.node.getModel().isLegacyOverflowMenu() ?\n        item.node._getNameForOverflowMenu() :\n        React.createElement(TabButtonStamp_1.TabButtonStamp, { node: item.node, layout: layout, iconFactory: iconFactory, titleFactory: titleFactory }))); });\n    return (React.createElement(\"div\", { className: classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU), \"data-layout-path\": \"/popup-menu\" }, itemElements));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/PopupMenu.tsx?");
 
 /***/ }),
 
@@ -380,7 +380,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Orientation_1 = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\nvar Rect = /** @class */ (function () {\n    function Rect(x, y, width, height) {\n        this.x = x;\n        this.y = y;\n        this.width = width;\n        this.height = height;\n    }\n    Rect.empty = function () {\n        return new Rect(0, 0, 0, 0);\n    };\n    Rect.fromElement = function (element) {\n        var _a = element.getBoundingClientRect(), x = _a.x, y = _a.y, width = _a.width, height = _a.height;\n        return new Rect(x, y, width, height);\n    };\n    Rect.prototype.clone = function () {\n        return new Rect(this.x, this.y, this.width, this.height);\n    };\n    Rect.prototype.equals = function (rect) {\n        if (this.x === rect.x && this.y === rect.y && this.width === rect.width && this.height === rect.height) {\n            return true;\n        }\n        else {\n            return false;\n        }\n    };\n    Rect.prototype.getBottom = function () {\n        return this.y + this.height;\n    };\n    Rect.prototype.getRight = function () {\n        return this.x + this.width;\n    };\n    Rect.prototype.getCenter = function () {\n        return { x: this.x + this.width / 2, y: this.y + this.height / 2 };\n    };\n    Rect.prototype.positionElement = function (element, position) {\n        this.styleWithPosition(element.style, position);\n    };\n    Rect.prototype.styleWithPosition = function (style, position) {\n        if (position === void 0) { position = \"absolute\"; }\n        style.left = this.x + \"px\";\n        style.top = this.y + \"px\";\n        style.width = Math.max(0, this.width) + \"px\"; // need Math.max to prevent -ve, cause error in IE\n        style.height = Math.max(0, this.height) + \"px\";\n        style.position = position;\n        return style;\n    };\n    Rect.prototype.contains = function (x, y) {\n        if (this.x <= x && x <= this.getRight() && this.y <= y && y <= this.getBottom()) {\n            return true;\n        }\n        else {\n            return false;\n        }\n    };\n    Rect.prototype.removeInsets = function (insets) {\n        return new Rect(this.x + insets.left, this.y + insets.top, Math.max(0, this.width - insets.left - insets.right), Math.max(0, this.height - insets.top - insets.bottom));\n    };\n    Rect.prototype.centerInRect = function (outerRect) {\n        this.x = (outerRect.width - this.width) / 2;\n        this.y = (outerRect.height - this.height) / 2;\n    };\n    /** @hidden @internal */\n    Rect.prototype._getSize = function (orientation) {\n        var prefSize = this.width;\n        if (orientation === Orientation_1.default.VERT) {\n            prefSize = this.height;\n        }\n        return prefSize;\n    };\n    Rect.prototype.toString = function () {\n        return \"(Rect: x=\" + this.x + \", y=\" + this.y + \", width=\" + this.width + \", height=\" + this.height + \")\";\n    };\n    return Rect;\n}());\nexports.default = Rect;\n\n\n//# sourceURL=webpack://FlexLayout/./src/Rect.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Rect = void 0;\nvar Orientation_1 = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\nvar Rect = /** @class */ (function () {\n    function Rect(x, y, width, height) {\n        this.x = x;\n        this.y = y;\n        this.width = width;\n        this.height = height;\n    }\n    Rect.empty = function () {\n        return new Rect(0, 0, 0, 0);\n    };\n    Rect.fromElement = function (element) {\n        var _a = element.getBoundingClientRect(), x = _a.x, y = _a.y, width = _a.width, height = _a.height;\n        return new Rect(x, y, width, height);\n    };\n    Rect.prototype.clone = function () {\n        return new Rect(this.x, this.y, this.width, this.height);\n    };\n    Rect.prototype.equals = function (rect) {\n        if (this.x === rect.x && this.y === rect.y && this.width === rect.width && this.height === rect.height) {\n            return true;\n        }\n        else {\n            return false;\n        }\n    };\n    Rect.prototype.getBottom = function () {\n        return this.y + this.height;\n    };\n    Rect.prototype.getRight = function () {\n        return this.x + this.width;\n    };\n    Rect.prototype.getCenter = function () {\n        return { x: this.x + this.width / 2, y: this.y + this.height / 2 };\n    };\n    Rect.prototype.positionElement = function (element, position) {\n        this.styleWithPosition(element.style, position);\n    };\n    Rect.prototype.styleWithPosition = function (style, position) {\n        if (position === void 0) { position = \"absolute\"; }\n        style.left = this.x + \"px\";\n        style.top = this.y + \"px\";\n        style.width = Math.max(0, this.width) + \"px\"; // need Math.max to prevent -ve, cause error in IE\n        style.height = Math.max(0, this.height) + \"px\";\n        style.position = position;\n        return style;\n    };\n    Rect.prototype.contains = function (x, y) {\n        if (this.x <= x && x <= this.getRight() && this.y <= y && y <= this.getBottom()) {\n            return true;\n        }\n        else {\n            return false;\n        }\n    };\n    Rect.prototype.removeInsets = function (insets) {\n        return new Rect(this.x + insets.left, this.y + insets.top, Math.max(0, this.width - insets.left - insets.right), Math.max(0, this.height - insets.top - insets.bottom));\n    };\n    Rect.prototype.centerInRect = function (outerRect) {\n        this.x = (outerRect.width - this.width) / 2;\n        this.y = (outerRect.height - this.height) / 2;\n    };\n    /** @hidden @internal */\n    Rect.prototype._getSize = function (orientation) {\n        var prefSize = this.width;\n        if (orientation === Orientation_1.Orientation.VERT) {\n            prefSize = this.height;\n        }\n        return prefSize;\n    };\n    Rect.prototype.toString = function () {\n        return \"(Rect: x=\" + this.x + \", y=\" + this.y + \", width=\" + this.width + \", height=\" + this.height + \")\";\n    };\n    return Rect;\n}());\nexports.Rect = Rect;\n\n\n//# sourceURL=webpack://FlexLayout/./src/Rect.ts?");
 
 /***/ }),
 
@@ -392,7 +392,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Or
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CLASSES = void 0;\nvar CLASSES;\n(function (CLASSES) {\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW\"] = \"flexlayout__border_toolbar_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_\"] = \"flexlayout__border_toolbar_button_overflow_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_TAB\"] = \"flexlayout__floating_window_tab\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT_EDGE\"] = \"flexlayout__outline_rect_edge\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_SIZER\"] = \"flexlayout__tabset_header_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SIZER\"] = \"flexlayout__tabset_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING\"] = \"flexlayout__tab_floating\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING_INNER\"] = \"flexlayout__tab_floating_inner\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_CONTAINER\"] = \"flexlayout__popup_menu_container\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM\"] = \"flexlayout__popup_menu_item\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU\"] = \"flexlayout__popup_menu\";\n})(CLASSES = exports.CLASSES || (exports.CLASSES = {}));\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CLASSES = void 0;\nvar CLASSES;\n(function (CLASSES) {\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW\"] = \"flexlayout__border_toolbar_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_\"] = \"flexlayout__border_toolbar_button_overflow_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_TAB\"] = \"flexlayout__floating_window_tab\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT_EDGE\"] = \"flexlayout__outline_rect_edge\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_SIZER\"] = \"flexlayout__tabset_header_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SIZER\"] = \"flexlayout__tabset_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT\"] = \"flexlayout__tab_button_overflow_count\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_STAMP\"] = \"flexlayout__tab_button_stamp\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING\"] = \"flexlayout__tab_floating\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING_INNER\"] = \"flexlayout__tab_floating_inner\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_CONTAINER\"] = \"flexlayout__popup_menu_container\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM\"] = \"flexlayout__popup_menu_item\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU\"] = \"flexlayout__popup_menu\";\n})(CLASSES = exports.CLASSES || (exports.CLASSES = {}));\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
 
 /***/ }),
 
@@ -404,7 +404,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Rect = exports.DropInfo = exports.DragDrop = exports.Orientation = exports.DockLocation = exports.BorderSet = exports.BorderNode = exports.TabSetNode = exports.TabNode = exports.SplitterNode = exports.RowNode = exports.Node = exports.Model = exports.Action = exports.Actions = exports.I18nLabel = exports.Layout = void 0;\nvar DockLocation_1 = __webpack_require__(/*! ./DockLocation */ \"./src/DockLocation.ts\");\nexports.DockLocation = DockLocation_1.default;\nvar DragDrop_1 = __webpack_require__(/*! ./DragDrop */ \"./src/DragDrop.ts\");\nexports.DragDrop = DragDrop_1.default;\nvar DropInfo_1 = __webpack_require__(/*! ./DropInfo */ \"./src/DropInfo.ts\");\nexports.DropInfo = DropInfo_1.default;\nvar I18nLabel_1 = __webpack_require__(/*! ./I18nLabel */ \"./src/I18nLabel.ts\");\nObject.defineProperty(exports, \"I18nLabel\", { enumerable: true, get: function () { return I18nLabel_1.I18nLabel; } });\nvar Action_1 = __webpack_require__(/*! ./model/Action */ \"./src/model/Action.ts\");\nexports.Action = Action_1.default;\nvar Actions_1 = __webpack_require__(/*! ./model/Actions */ \"./src/model/Actions.ts\");\nexports.Actions = Actions_1.default;\nvar BorderNode_1 = __webpack_require__(/*! ./model/BorderNode */ \"./src/model/BorderNode.ts\");\nexports.BorderNode = BorderNode_1.default;\nvar BorderSet_1 = __webpack_require__(/*! ./model/BorderSet */ \"./src/model/BorderSet.ts\");\nexports.BorderSet = BorderSet_1.default;\nvar Model_1 = __webpack_require__(/*! ./model/Model */ \"./src/model/Model.ts\");\nexports.Model = Model_1.default;\nvar Node_1 = __webpack_require__(/*! ./model/Node */ \"./src/model/Node.ts\");\nexports.Node = Node_1.default;\nvar RowNode_1 = __webpack_require__(/*! ./model/RowNode */ \"./src/model/RowNode.ts\");\nexports.RowNode = RowNode_1.default;\nvar SplitterNode_1 = __webpack_require__(/*! ./model/SplitterNode */ \"./src/model/SplitterNode.ts\");\nexports.SplitterNode = SplitterNode_1.default;\nvar TabNode_1 = __webpack_require__(/*! ./model/TabNode */ \"./src/model/TabNode.ts\");\nexports.TabNode = TabNode_1.default;\nvar TabSetNode_1 = __webpack_require__(/*! ./model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nexports.TabSetNode = TabSetNode_1.default;\nvar Orientation_1 = __webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\");\nexports.Orientation = Orientation_1.default;\nvar Rect_1 = __webpack_require__(/*! ./Rect */ \"./src/Rect.ts\");\nexports.Rect = Rect_1.default;\nvar Layout_1 = __webpack_require__(/*! ./view/Layout */ \"./src/view/Layout.tsx\");\nexports.Layout = Layout_1.default;\nexports.default = {\n    Layout: Layout_1.default,\n    I18nLabel: I18nLabel_1.I18nLabel,\n    Actions: Actions_1.default,\n    Action: Action_1.default,\n    Model: Model_1.default,\n    Node: Node_1.default,\n    RowNode: RowNode_1.default,\n    SplitterNode: SplitterNode_1.default,\n    TabNode: TabNode_1.default,\n    TabSetNode: TabSetNode_1.default,\n    BorderNode: BorderNode_1.default,\n    BorderSet: BorderSet_1.default,\n    DockLocation: DockLocation_1.default,\n    Orientation: Orientation_1.default,\n    DragDrop: DragDrop_1.default,\n    DropInfo: DropInfo_1.default,\n    Rect: Rect_1.default,\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/index.ts?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\n__exportStar(__webpack_require__(/*! ./view/Layout */ \"./src/view/Layout.tsx\"), exports);\n__exportStar(__webpack_require__(/*! ./model/Action */ \"./src/model/Action.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/Actions */ \"./src/model/Actions.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/BorderNode */ \"./src/model/BorderNode.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/BorderSet */ \"./src/model/BorderSet.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/ICloseType */ \"./src/model/ICloseType.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/IDraggable */ \"./src/model/IDraggable.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/IDropTarget */ \"./src/model/IDropTarget.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/IJsonModel */ \"./src/model/IJsonModel.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/Model */ \"./src/model/Model.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/Node */ \"./src/model/Node.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/RowNode */ \"./src/model/RowNode.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/SplitterNode */ \"./src/model/SplitterNode.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/TabNode */ \"./src/model/TabNode.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./model/TabSetNode */ \"./src/model/TabSetNode.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./DockLocation */ \"./src/DockLocation.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./DragDrop */ \"./src/DragDrop.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./DropInfo */ \"./src/DropInfo.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./I18nLabel */ \"./src/I18nLabel.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./Orientation */ \"./src/Orientation.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./Rect */ \"./src/Rect.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./Types */ \"./src/Types.ts\"), exports);\n\n\n//# sourceURL=webpack://FlexLayout/./src/index.ts?");
 
 /***/ }),
 
@@ -416,7 +416,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Action = /** @class */ (function () {\n    function Action(type, data) {\n        this.type = type;\n        this.data = data;\n    }\n    return Action;\n}());\nexports.default = Action;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Action.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Action = void 0;\nvar Action = /** @class */ (function () {\n    function Action(type, data) {\n        this.type = type;\n        this.data = data;\n    }\n    return Action;\n}());\nexports.Action = Action;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Action.ts?");
 
 /***/ }),
 
@@ -428,7 +428,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Ac
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Action_1 = __webpack_require__(/*! ./Action */ \"./src/model/Action.ts\");\n/**\n * The Action creator class for FlexLayout model actions\n */\nvar Actions = /** @class */ (function () {\n    function Actions() {\n    }\n    /**\n     * Adds a tab node to the given tabset node\n     * @param json the json for the new tab node e.g {type:\"tab\", component:\"table\"}\n     * @param toNodeId the new tab node will be added to the tabset with this node id\n     * @param location the location where the new tab will be added, one of the DockLocation enum values.\n     * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.\n     * @param select (optional) whether to select the new tab, overriding autoSelectTab\n     * @returns {Action} the action\n     */\n    Actions.addNode = function (json, toNodeId, location, index, select) {\n        return new Action_1.default(Actions.ADD_NODE, {\n            json: json,\n            toNode: toNodeId,\n            location: location.getName(),\n            index: index,\n            select: select,\n        });\n    };\n    /**\n     * Moves a node (tab or tabset) from one location to another\n     * @param fromNodeId the id of the node to move\n     * @param toNodeId the id of the node to receive the moved node\n     * @param location the location where the moved node will be added, one of the DockLocation enum values.\n     * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.\n     * @param select (optional) whether to select the moved tab(s) in new tabset, overriding autoSelectTab\n     * @returns {Action} the action\n     */\n    Actions.moveNode = function (fromNodeId, toNodeId, location, index, select) {\n        return new Action_1.default(Actions.MOVE_NODE, {\n            fromNode: fromNodeId,\n            toNode: toNodeId,\n            location: location.getName(),\n            index: index,\n            select: select,\n        });\n    };\n    /**\n     * Deletes a tab node from the layout\n     * @param tabsetNodeId the id of the tab node to delete\n     * @returns {Action} the action\n     */\n    Actions.deleteTab = function (tabNodeId) {\n        return new Action_1.default(Actions.DELETE_TAB, { node: tabNodeId });\n    };\n    /**\n     * Deletes a tabset node and all it's child tab nodes from the layout\n     * @param tabsetNodeId the id of the tabset node to delete\n     * @returns {Action} the action\n     */\n    Actions.deleteTabset = function (tabsetNodeId) {\n        return new Action_1.default(Actions.DELETE_TABSET, { node: tabsetNodeId });\n    };\n    /**\n     * Change the given nodes tab text\n     * @param tabNodeId the id of the node to rename\n     * @param text the test of the tab\n     * @returns {Action} the action\n     */\n    Actions.renameTab = function (tabNodeId, text) {\n        return new Action_1.default(Actions.RENAME_TAB, { node: tabNodeId, text: text });\n    };\n    /**\n     * Selects the given tab in its parent tabset\n     * @param tabNodeId the id of the node to set selected\n     * @returns {Action} the action\n     */\n    Actions.selectTab = function (tabNodeId) {\n        return new Action_1.default(Actions.SELECT_TAB, { tabNode: tabNodeId });\n    };\n    /**\n     * Set the given tabset node as the active tabset\n     * @param tabsetNodeId the id of the tabset node to set as active\n     * @returns {Action} the action\n     */\n    Actions.setActiveTabset = function (tabsetNodeId) {\n        return new Action_1.default(Actions.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId });\n    };\n    /**\n     * Adjust the splitter between two tabsets\n     * @example\n     *  Actions.adjustSplit({node1: \"1\", weight1:30, pixelWidth1:300, node2: \"2\", weight2:70, pixelWidth2:700});\n     *\n     * @param splitSpec an object the defines the new split between two tabsets, see example below.\n     * @returns {Action} the action\n     */\n    Actions.adjustSplit = function (splitSpec) {\n        var node1 = splitSpec.node1Id;\n        var node2 = splitSpec.node2Id;\n        return new Action_1.default(Actions.ADJUST_SPLIT, {\n            node1: node1,\n            weight1: splitSpec.weight1,\n            pixelWidth1: splitSpec.pixelWidth1,\n            node2: node2,\n            weight2: splitSpec.weight2,\n            pixelWidth2: splitSpec.pixelWidth2,\n        });\n    };\n    Actions.adjustBorderSplit = function (nodeId, pos) {\n        return new Action_1.default(Actions.ADJUST_BORDER_SPLIT, { node: nodeId, pos: pos });\n    };\n    /**\n     * Maximizes the given tabset\n     * @param tabsetNodeId the id of the tabset to maximize\n     * @returns {Action} the action\n     */\n    Actions.maximizeToggle = function (tabsetNodeId) {\n        return new Action_1.default(Actions.MAXIMIZE_TOGGLE, { node: tabsetNodeId });\n    };\n    /**\n     * Updates the global model jsone attributes\n     * @param attributes the json for the model attributes to update (merge into the existing attributes)\n     * @returns {Action} the action\n     */\n    Actions.updateModelAttributes = function (attributes) {\n        return new Action_1.default(Actions.UPDATE_MODEL_ATTRIBUTES, { json: attributes });\n    };\n    /**\n     * Updates the given nodes json attributes\n     * @param nodeId the id of the node to update\n     * @param attributes the json attributes to update (merge with the existing attributes)\n     * @returns {Action} the action\n     */\n    Actions.updateNodeAttributes = function (nodeId, attributes) {\n        return new Action_1.default(Actions.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });\n    };\n    Actions.floatTab = function (nodeId) {\n        return new Action_1.default(Actions.FLOAT_TAB, { node: nodeId });\n    };\n    Actions.unFloatTab = function (nodeId) {\n        return new Action_1.default(Actions.UNFLOAT_TAB, { node: nodeId });\n    };\n    Actions.ADD_NODE = \"FlexLayout_AddNode\";\n    Actions.MOVE_NODE = \"FlexLayout_MoveNode\";\n    Actions.DELETE_TAB = \"FlexLayout_DeleteTab\";\n    Actions.DELETE_TABSET = \"FlexLayout_DeleteTabset\";\n    Actions.RENAME_TAB = \"FlexLayout_RenameTab\";\n    Actions.SELECT_TAB = \"FlexLayout_SelectTab\";\n    Actions.SET_ACTIVE_TABSET = \"FlexLayout_SetActiveTabset\";\n    Actions.ADJUST_SPLIT = \"FlexLayout_AdjustSplit\";\n    Actions.ADJUST_BORDER_SPLIT = \"FlexLayout_AdjustBorderSplit\";\n    Actions.MAXIMIZE_TOGGLE = \"FlexLayout_MaximizeToggle\";\n    Actions.UPDATE_MODEL_ATTRIBUTES = \"FlexLayout_UpdateModelAttributes\";\n    Actions.UPDATE_NODE_ATTRIBUTES = \"FlexLayout_UpdateNodeAttributes\";\n    Actions.FLOAT_TAB = \"FlexLayout_FloatTab\";\n    Actions.UNFLOAT_TAB = \"FlexLayout_UnFloatTab\";\n    return Actions;\n}());\nexports.default = Actions;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Actions.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Actions = void 0;\nvar Action_1 = __webpack_require__(/*! ./Action */ \"./src/model/Action.ts\");\n/**\n * The Action creator class for FlexLayout model actions\n */\nvar Actions = /** @class */ (function () {\n    function Actions() {\n    }\n    /**\n     * Adds a tab node to the given tabset node\n     * @param json the json for the new tab node e.g {type:\"tab\", component:\"table\"}\n     * @param toNodeId the new tab node will be added to the tabset with this node id\n     * @param location the location where the new tab will be added, one of the DockLocation enum values.\n     * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.\n     * @param select (optional) whether to select the new tab, overriding autoSelectTab\n     * @returns {Action} the action\n     */\n    Actions.addNode = function (json, toNodeId, location, index, select) {\n        return new Action_1.Action(Actions.ADD_NODE, {\n            json: json,\n            toNode: toNodeId,\n            location: location.getName(),\n            index: index,\n            select: select,\n        });\n    };\n    /**\n     * Moves a node (tab or tabset) from one location to another\n     * @param fromNodeId the id of the node to move\n     * @param toNodeId the id of the node to receive the moved node\n     * @param location the location where the moved node will be added, one of the DockLocation enum values.\n     * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.\n     * @param select (optional) whether to select the moved tab(s) in new tabset, overriding autoSelectTab\n     * @returns {Action} the action\n     */\n    Actions.moveNode = function (fromNodeId, toNodeId, location, index, select) {\n        return new Action_1.Action(Actions.MOVE_NODE, {\n            fromNode: fromNodeId,\n            toNode: toNodeId,\n            location: location.getName(),\n            index: index,\n            select: select,\n        });\n    };\n    /**\n     * Deletes a tab node from the layout\n     * @param tabsetNodeId the id of the tab node to delete\n     * @returns {Action} the action\n     */\n    Actions.deleteTab = function (tabNodeId) {\n        return new Action_1.Action(Actions.DELETE_TAB, { node: tabNodeId });\n    };\n    /**\n     * Deletes a tabset node and all it's child tab nodes from the layout\n     * @param tabsetNodeId the id of the tabset node to delete\n     * @returns {Action} the action\n     */\n    Actions.deleteTabset = function (tabsetNodeId) {\n        return new Action_1.Action(Actions.DELETE_TABSET, { node: tabsetNodeId });\n    };\n    /**\n     * Change the given nodes tab text\n     * @param tabNodeId the id of the node to rename\n     * @param text the test of the tab\n     * @returns {Action} the action\n     */\n    Actions.renameTab = function (tabNodeId, text) {\n        return new Action_1.Action(Actions.RENAME_TAB, { node: tabNodeId, text: text });\n    };\n    /**\n     * Selects the given tab in its parent tabset\n     * @param tabNodeId the id of the node to set selected\n     * @returns {Action} the action\n     */\n    Actions.selectTab = function (tabNodeId) {\n        return new Action_1.Action(Actions.SELECT_TAB, { tabNode: tabNodeId });\n    };\n    /**\n     * Set the given tabset node as the active tabset\n     * @param tabsetNodeId the id of the tabset node to set as active\n     * @returns {Action} the action\n     */\n    Actions.setActiveTabset = function (tabsetNodeId) {\n        return new Action_1.Action(Actions.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId });\n    };\n    /**\n     * Adjust the splitter between two tabsets\n     * @example\n     *  Actions.adjustSplit({node1: \"1\", weight1:30, pixelWidth1:300, node2: \"2\", weight2:70, pixelWidth2:700});\n     *\n     * @param splitSpec an object the defines the new split between two tabsets, see example below.\n     * @returns {Action} the action\n     */\n    Actions.adjustSplit = function (splitSpec) {\n        var node1 = splitSpec.node1Id;\n        var node2 = splitSpec.node2Id;\n        return new Action_1.Action(Actions.ADJUST_SPLIT, {\n            node1: node1,\n            weight1: splitSpec.weight1,\n            pixelWidth1: splitSpec.pixelWidth1,\n            node2: node2,\n            weight2: splitSpec.weight2,\n            pixelWidth2: splitSpec.pixelWidth2,\n        });\n    };\n    Actions.adjustBorderSplit = function (nodeId, pos) {\n        return new Action_1.Action(Actions.ADJUST_BORDER_SPLIT, { node: nodeId, pos: pos });\n    };\n    /**\n     * Maximizes the given tabset\n     * @param tabsetNodeId the id of the tabset to maximize\n     * @returns {Action} the action\n     */\n    Actions.maximizeToggle = function (tabsetNodeId) {\n        return new Action_1.Action(Actions.MAXIMIZE_TOGGLE, { node: tabsetNodeId });\n    };\n    /**\n     * Updates the global model jsone attributes\n     * @param attributes the json for the model attributes to update (merge into the existing attributes)\n     * @returns {Action} the action\n     */\n    Actions.updateModelAttributes = function (attributes) {\n        return new Action_1.Action(Actions.UPDATE_MODEL_ATTRIBUTES, { json: attributes });\n    };\n    /**\n     * Updates the given nodes json attributes\n     * @param nodeId the id of the node to update\n     * @param attributes the json attributes to update (merge with the existing attributes)\n     * @returns {Action} the action\n     */\n    Actions.updateNodeAttributes = function (nodeId, attributes) {\n        return new Action_1.Action(Actions.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });\n    };\n    Actions.floatTab = function (nodeId) {\n        return new Action_1.Action(Actions.FLOAT_TAB, { node: nodeId });\n    };\n    Actions.unFloatTab = function (nodeId) {\n        return new Action_1.Action(Actions.UNFLOAT_TAB, { node: nodeId });\n    };\n    Actions.ADD_NODE = \"FlexLayout_AddNode\";\n    Actions.MOVE_NODE = \"FlexLayout_MoveNode\";\n    Actions.DELETE_TAB = \"FlexLayout_DeleteTab\";\n    Actions.DELETE_TABSET = \"FlexLayout_DeleteTabset\";\n    Actions.RENAME_TAB = \"FlexLayout_RenameTab\";\n    Actions.SELECT_TAB = \"FlexLayout_SelectTab\";\n    Actions.SET_ACTIVE_TABSET = \"FlexLayout_SetActiveTabset\";\n    Actions.ADJUST_SPLIT = \"FlexLayout_AdjustSplit\";\n    Actions.ADJUST_BORDER_SPLIT = \"FlexLayout_AdjustBorderSplit\";\n    Actions.MAXIMIZE_TOGGLE = \"FlexLayout_MaximizeToggle\";\n    Actions.UPDATE_MODEL_ATTRIBUTES = \"FlexLayout_UpdateModelAttributes\";\n    Actions.UPDATE_NODE_ATTRIBUTES = \"FlexLayout_UpdateNodeAttributes\";\n    Actions.FLOAT_TAB = \"FlexLayout_FloatTab\";\n    Actions.UNFLOAT_TAB = \"FlexLayout_UnFloatTab\";\n    return Actions;\n}());\nexports.Actions = Actions;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Actions.ts?");
 
 /***/ }),
 
@@ -440,7 +440,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Ac
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ./SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar BorderNode = /** @class */ (function (_super) {\n    __extends(BorderNode, _super);\n    /** @hidden @internal */\n    function BorderNode(location, json, model) {\n        var _this = _super.call(this, model) || this;\n        /** @hidden @internal */\n        _this._adjustedSize = 0;\n        /** @hidden @internal */\n        _this._calculatedBorderBarSize = 0;\n        _this._location = location;\n        _this._drawChildren = [];\n        _this._attributes.id = \"border_\" + location.getName();\n        BorderNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    BorderNode._fromJson = function (json, model) {\n        var location = DockLocation_1.default.getByName(json.location);\n        var border = new BorderNode(location, json, model);\n        if (json.children) {\n            border._children = json.children.map(function (jsonChild) {\n                var child = TabNode_1.default._fromJson(jsonChild, model);\n                child._setParent(border);\n                return child;\n            });\n        }\n        return border;\n    };\n    /** @hidden @internal */\n    BorderNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", BorderNode.TYPE, true).setType(Attribute_1.default.STRING).setFixed();\n        attributeDefinitions.add(\"selected\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"show\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.addInherited(\"barSize\", \"borderBarSize\").setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.addInherited(\"enableDrop\", \"borderEnableDrop\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"className\", \"borderClassName\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.addInherited(\"autoSelectTabWhenOpen\", \"borderAutoSelectTabWhenOpen\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"autoSelectTabWhenClosed\", \"borderAutoSelectTabWhenClosed\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"size\", \"borderSize\").setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.addInherited(\"minSize\", \"borderMinSize\").setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.addInherited(\"enableAutoHide\", \"borderEnableAutoHide\").setType(Attribute_1.default.BOOLEAN);\n        return attributeDefinitions;\n    };\n    BorderNode.prototype.getLocation = function () {\n        return this._location;\n    };\n    BorderNode.prototype.getTabHeaderRect = function () {\n        return this._tabHeaderRect;\n    };\n    BorderNode.prototype.getRect = function () {\n        return this._tabHeaderRect;\n    };\n    BorderNode.prototype.getContentRect = function () {\n        return this._contentRect;\n    };\n    BorderNode.prototype.isEnableDrop = function () {\n        return this._getAttr(\"enableDrop\");\n    };\n    BorderNode.prototype.isAutoSelectTab = function (whenOpen) {\n        if (whenOpen == null) {\n            whenOpen = this.getSelected() !== -1;\n        }\n        if (whenOpen) {\n            return this._getAttr(\"autoSelectTabWhenOpen\");\n        }\n        else {\n            return this._getAttr(\"autoSelectTabWhenClosed\");\n        }\n    };\n    BorderNode.prototype.getClassName = function () {\n        return this._getAttr(\"className\");\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.calcBorderBarSize = function (metrics) {\n        var barSize = this._getAttr(\"barSize\");\n        if (barSize !== 0) {\n            // its defined\n            this._calculatedBorderBarSize = barSize;\n        }\n        else {\n            this._calculatedBorderBarSize = metrics.borderBarSize;\n        }\n    };\n    BorderNode.prototype.getBorderBarSize = function () {\n        return this._calculatedBorderBarSize;\n    };\n    BorderNode.prototype.getSize = function () {\n        var defaultSize = this._getAttr(\"size\");\n        var selected = this.getSelected();\n        if (selected === -1) {\n            return defaultSize;\n        }\n        else {\n            var tabNode = this._children[selected];\n            var tabBorderSize = (this._location._orientation === Orientation_1.default.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n            if (tabBorderSize === -1) {\n                return defaultSize;\n            }\n            else {\n                return tabBorderSize;\n            }\n        }\n    };\n    BorderNode.prototype.getMinSize = function () {\n        return this._getAttr(\"minSize\");\n    };\n    BorderNode.prototype.getSelected = function () {\n        return this._attributes.selected;\n    };\n    BorderNode.prototype.getSelectedNode = function () {\n        if (this.getSelected() !== -1) {\n            return this._children[this.getSelected()];\n        }\n        return undefined;\n    };\n    BorderNode.prototype.getOrientation = function () {\n        return this._location.getOrientation();\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    BorderNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    BorderNode.prototype.isMaximized = function () {\n        return false;\n    };\n    BorderNode.prototype.isShowing = function () {\n        var show = this._attributes.show;\n        if (show) {\n            if (this._model._getShowHiddenBorder() !== this._location && this.isAutoHide() && this._children.length === 0) {\n                return false;\n            }\n            return true;\n        }\n        else {\n            return false;\n        }\n    };\n    BorderNode.prototype.isAutoHide = function () {\n        return this._getAttr(\"enableAutoHide\");\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setSelected = function (index) {\n        this._attributes.selected = index;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setSize = function (pos) {\n        var selected = this.getSelected();\n        if (selected === -1) {\n            this._attributes.size = pos;\n        }\n        else {\n            var tabNode = this._children[selected];\n            var tabBorderSize = (this._location._orientation === Orientation_1.default.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n            if (tabBorderSize === -1) {\n                this._attributes.size = pos;\n            }\n            else {\n                if (this._location._orientation === Orientation_1.default.HORZ) {\n                    tabNode._setBorderWidth(pos);\n                }\n                else {\n                    tabNode._setBorderHeight(pos);\n                }\n            }\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._updateAttrs = function (json) {\n        BorderNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getDrawChildren = function () {\n        return this._drawChildren;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setAdjustedSize = function (size) {\n        this._adjustedSize = size;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getAdjustedSize = function () {\n        return this._adjustedSize;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._layoutBorderOuter = function (outer, metrics) {\n        this.calcBorderBarSize(metrics);\n        var split1 = this._location.split(outer, this.getBorderBarSize()); // split border outer\n        this._tabHeaderRect = split1.start;\n        return split1.end;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._layoutBorderInner = function (inner, metrics) {\n        var _this = this;\n        this._drawChildren = [];\n        var location = this._location;\n        var split1 = location.split(inner, this._adjustedSize + this._model.getSplitterSize()); // split off tab contents\n        var split2 = location.reflect().split(split1.start, this._model.getSplitterSize()); // split contents into content and splitter\n        this._contentRect = split2.end;\n        this._children.forEach(function (child, i) {\n            child._layout(_this._contentRect, metrics);\n            child._setVisible(i === _this.getSelected());\n            _this._drawChildren.push(child);\n        });\n        if (this.getSelected() === -1) {\n            return inner;\n        }\n        else {\n            var newSplitter = new SplitterNode_1.default(this._model);\n            newSplitter._setParent(this);\n            newSplitter._setRect(split2.start);\n            this._drawChildren.push(newSplitter);\n            return split1.end;\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._remove = function (node) {\n        var removedIndex = this._removeChild(node);\n        if (this.getSelected() !== -1) {\n            Utils_1.adjustSelectedIndex(this, removedIndex);\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.canDrop = function (dragNode, x, y) {\n        if (dragNode.getType() !== TabNode_1.default.TYPE) {\n            return undefined;\n        }\n        var dropInfo;\n        var dockLocation = DockLocation_1.default.CENTER;\n        if (this._tabHeaderRect.contains(x, y)) {\n            if (this._location._orientation === Orientation_1.default.VERT) {\n                if (this._children.length > 0) {\n                    var child = this._children[0];\n                    var childRect = child.getTabRect();\n                    var childY = childRect.y;\n                    var childHeight = childRect.height;\n                    var pos = this._tabHeaderRect.x;\n                    var childCenter = 0;\n                    for (var i = 0; i < this._children.length; i++) {\n                        child = this._children[i];\n                        childRect = child.getTabRect();\n                        childCenter = childRect.x + childRect.width / 2;\n                        if (x >= pos && x < childCenter) {\n                            var outlineRect = new Rect_1.default(childRect.x - 2, childY, 3, childHeight);\n                            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                            break;\n                        }\n                        pos = childCenter;\n                    }\n                    if (dropInfo == null) {\n                        var outlineRect = new Rect_1.default(childRect.getRight() - 2, childY, 3, childHeight);\n                        dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                    }\n                }\n                else {\n                    var outlineRect = new Rect_1.default(this._tabHeaderRect.x + 1, this._tabHeaderRect.y + 2, 3, 18);\n                    dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, 0, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                }\n            }\n            else {\n                if (this._children.length > 0) {\n                    var child = this._children[0];\n                    var childRect = child.getTabRect();\n                    var childX = childRect.x;\n                    var childWidth = childRect.width;\n                    var pos = this._tabHeaderRect.y;\n                    var childCenter = 0;\n                    for (var i = 0; i < this._children.length; i++) {\n                        child = this._children[i];\n                        childRect = child.getTabRect();\n                        childCenter = childRect.y + childRect.height / 2;\n                        if (y >= pos && y < childCenter) {\n                            var outlineRect = new Rect_1.default(childX, childRect.y - 2, childWidth, 3);\n                            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                            break;\n                        }\n                        pos = childCenter;\n                    }\n                    if (dropInfo == null) {\n                        var outlineRect = new Rect_1.default(childX, childRect.getBottom() - 2, childWidth, 3);\n                        dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                    }\n                }\n                else {\n                    var outlineRect = new Rect_1.default(this._tabHeaderRect.x + 2, this._tabHeaderRect.y + 1, 18, 3);\n                    dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, 0, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                }\n            }\n            if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                return undefined;\n            }\n        }\n        else if (this.getSelected() !== -1 && this._contentRect.contains(x, y)) {\n            var outlineRect = this._contentRect;\n            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                return undefined;\n            }\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.drop = function (dragNode, location, index, select) {\n        var fromIndex = 0;\n        var dragParent = dragNode.getParent();\n        if (dragParent !== undefined) {\n            fromIndex = dragParent._removeChild(dragNode);\n            Utils_1.adjustSelectedIndex(dragParent, fromIndex);\n        }\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n        if (dragNode.getType() === TabNode_1.default.TYPE && dragParent === this && fromIndex < index && index > 0) {\n            index--;\n        }\n        // simple_bundled dock to existing tabset\n        var insertPos = index;\n        if (insertPos === -1) {\n            insertPos = this._children.length;\n        }\n        if (dragNode.getType() === TabNode_1.default.TYPE) {\n            this._addChild(dragNode, insertPos);\n        }\n        if (select || (select !== false && this.isAutoSelectTab())) {\n            this._setSelected(insertPos);\n        }\n        this._model._tidy();\n    };\n    BorderNode.prototype.toJson = function () {\n        var json = {};\n        BorderNode._attributeDefinitions.toJson(json, this._attributes);\n        json.location = this._location.getName();\n        json.children = this._children.map(function (child) { return child.toJson(); });\n        return json;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getSplitterBounds = function (splitter, useMinSize) {\n        if (useMinSize === void 0) { useMinSize = false; }\n        var pBounds = [0, 0];\n        var minSize = useMinSize ? this.getMinSize() : 0;\n        var outerRect = this._model._getOuterInnerRects().outer;\n        var innerRect = this._model._getOuterInnerRects().inner;\n        var rootRow = this._model.getRoot();\n        if (this._location === DockLocation_1.default.TOP) {\n            pBounds[0] = outerRect.y + minSize;\n            pBounds[1] = Math.max(pBounds[0], innerRect.getBottom() - splitter.getHeight() - rootRow.getMinHeight());\n        }\n        else if (this._location === DockLocation_1.default.LEFT) {\n            pBounds[0] = outerRect.x + minSize;\n            pBounds[1] = Math.max(pBounds[0], innerRect.getRight() - splitter.getWidth() - rootRow.getMinWidth());\n        }\n        else if (this._location === DockLocation_1.default.BOTTOM) {\n            pBounds[1] = outerRect.getBottom() - splitter.getHeight() - minSize;\n            pBounds[0] = Math.min(pBounds[1], innerRect.y + rootRow.getMinHeight());\n        }\n        else if (this._location === DockLocation_1.default.RIGHT) {\n            pBounds[1] = outerRect.getRight() - splitter.getWidth() - minSize;\n            pBounds[0] = Math.min(pBounds[1], innerRect.x + rootRow.getMinWidth());\n        }\n        return pBounds;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._calculateSplit = function (splitter, splitterPos) {\n        var pBounds = this._getSplitterBounds(splitter);\n        if (this._location === DockLocation_1.default.BOTTOM || this._location === DockLocation_1.default.RIGHT) {\n            return Math.max(0, pBounds[1] - splitterPos);\n        }\n        else {\n            return Math.max(0, splitterPos - pBounds[0]);\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getAttributeDefinitions = function () {\n        return BorderNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    BorderNode.getAttributeDefinitions = function () {\n        return BorderNode._attributeDefinitions;\n    };\n    BorderNode.TYPE = \"border\";\n    /** @hidden @internal */\n    BorderNode._attributeDefinitions = BorderNode._createAttributeDefinitions();\n    return BorderNode;\n}(Node_1.default));\nexports.default = BorderNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/BorderNode.ts?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderNode = void 0;\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ./SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar BorderNode = /** @class */ (function (_super) {\n    __extends(BorderNode, _super);\n    /** @hidden @internal */\n    function BorderNode(location, json, model) {\n        var _this = _super.call(this, model) || this;\n        /** @hidden @internal */\n        _this._adjustedSize = 0;\n        /** @hidden @internal */\n        _this._calculatedBorderBarSize = 0;\n        _this._location = location;\n        _this._drawChildren = [];\n        _this._attributes.id = \"border_\" + location.getName();\n        BorderNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    BorderNode._fromJson = function (json, model) {\n        var location = DockLocation_1.DockLocation.getByName(json.location);\n        var border = new BorderNode(location, json, model);\n        if (json.children) {\n            border._children = json.children.map(function (jsonChild) {\n                var child = TabNode_1.TabNode._fromJson(jsonChild, model);\n                child._setParent(border);\n                return child;\n            });\n        }\n        return border;\n    };\n    /** @hidden @internal */\n    BorderNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.AttributeDefinitions();\n        attributeDefinitions.add(\"type\", BorderNode.TYPE, true).setType(Attribute_1.Attribute.STRING).setFixed();\n        attributeDefinitions.add(\"selected\", -1).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"show\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.addInherited(\"barSize\", \"borderBarSize\").setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.addInherited(\"enableDrop\", \"borderEnableDrop\").setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.addInherited(\"className\", \"borderClassName\").setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.addInherited(\"autoSelectTabWhenOpen\", \"borderAutoSelectTabWhenOpen\").setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.addInherited(\"autoSelectTabWhenClosed\", \"borderAutoSelectTabWhenClosed\").setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.addInherited(\"size\", \"borderSize\").setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.addInherited(\"minSize\", \"borderMinSize\").setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.addInherited(\"enableAutoHide\", \"borderEnableAutoHide\").setType(Attribute_1.Attribute.BOOLEAN);\n        return attributeDefinitions;\n    };\n    BorderNode.prototype.getLocation = function () {\n        return this._location;\n    };\n    BorderNode.prototype.getTabHeaderRect = function () {\n        return this._tabHeaderRect;\n    };\n    BorderNode.prototype.getRect = function () {\n        return this._tabHeaderRect;\n    };\n    BorderNode.prototype.getContentRect = function () {\n        return this._contentRect;\n    };\n    BorderNode.prototype.isEnableDrop = function () {\n        return this._getAttr(\"enableDrop\");\n    };\n    BorderNode.prototype.isAutoSelectTab = function (whenOpen) {\n        if (whenOpen == null) {\n            whenOpen = this.getSelected() !== -1;\n        }\n        if (whenOpen) {\n            return this._getAttr(\"autoSelectTabWhenOpen\");\n        }\n        else {\n            return this._getAttr(\"autoSelectTabWhenClosed\");\n        }\n    };\n    BorderNode.prototype.getClassName = function () {\n        return this._getAttr(\"className\");\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.calcBorderBarSize = function (metrics) {\n        var barSize = this._getAttr(\"barSize\");\n        if (barSize !== 0) {\n            // its defined\n            this._calculatedBorderBarSize = barSize;\n        }\n        else {\n            this._calculatedBorderBarSize = metrics.borderBarSize;\n        }\n    };\n    BorderNode.prototype.getBorderBarSize = function () {\n        return this._calculatedBorderBarSize;\n    };\n    BorderNode.prototype.getSize = function () {\n        var defaultSize = this._getAttr(\"size\");\n        var selected = this.getSelected();\n        if (selected === -1) {\n            return defaultSize;\n        }\n        else {\n            var tabNode = this._children[selected];\n            var tabBorderSize = (this._location._orientation === Orientation_1.Orientation.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n            if (tabBorderSize === -1) {\n                return defaultSize;\n            }\n            else {\n                return tabBorderSize;\n            }\n        }\n    };\n    BorderNode.prototype.getMinSize = function () {\n        return this._getAttr(\"minSize\");\n    };\n    BorderNode.prototype.getSelected = function () {\n        return this._attributes.selected;\n    };\n    BorderNode.prototype.getSelectedNode = function () {\n        if (this.getSelected() !== -1) {\n            return this._children[this.getSelected()];\n        }\n        return undefined;\n    };\n    BorderNode.prototype.getOrientation = function () {\n        return this._location.getOrientation();\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    BorderNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    BorderNode.prototype.isMaximized = function () {\n        return false;\n    };\n    BorderNode.prototype.isShowing = function () {\n        var show = this._attributes.show;\n        if (show) {\n            if (this._model._getShowHiddenBorder() !== this._location && this.isAutoHide() && this._children.length === 0) {\n                return false;\n            }\n            return true;\n        }\n        else {\n            return false;\n        }\n    };\n    BorderNode.prototype.isAutoHide = function () {\n        return this._getAttr(\"enableAutoHide\");\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setSelected = function (index) {\n        this._attributes.selected = index;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setSize = function (pos) {\n        var selected = this.getSelected();\n        if (selected === -1) {\n            this._attributes.size = pos;\n        }\n        else {\n            var tabNode = this._children[selected];\n            var tabBorderSize = (this._location._orientation === Orientation_1.Orientation.HORZ) ? tabNode._getAttr(\"borderWidth\") : tabNode._getAttr(\"borderHeight\");\n            if (tabBorderSize === -1) {\n                this._attributes.size = pos;\n            }\n            else {\n                if (this._location._orientation === Orientation_1.Orientation.HORZ) {\n                    tabNode._setBorderWidth(pos);\n                }\n                else {\n                    tabNode._setBorderHeight(pos);\n                }\n            }\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._updateAttrs = function (json) {\n        BorderNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getDrawChildren = function () {\n        return this._drawChildren;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._setAdjustedSize = function (size) {\n        this._adjustedSize = size;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getAdjustedSize = function () {\n        return this._adjustedSize;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._layoutBorderOuter = function (outer, metrics) {\n        this.calcBorderBarSize(metrics);\n        var split1 = this._location.split(outer, this.getBorderBarSize()); // split border outer\n        this._tabHeaderRect = split1.start;\n        return split1.end;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._layoutBorderInner = function (inner, metrics) {\n        var _this = this;\n        this._drawChildren = [];\n        var location = this._location;\n        var split1 = location.split(inner, this._adjustedSize + this._model.getSplitterSize()); // split off tab contents\n        var split2 = location.reflect().split(split1.start, this._model.getSplitterSize()); // split contents into content and splitter\n        this._contentRect = split2.end;\n        this._children.forEach(function (child, i) {\n            child._layout(_this._contentRect, metrics);\n            child._setVisible(i === _this.getSelected());\n            _this._drawChildren.push(child);\n        });\n        if (this.getSelected() === -1) {\n            return inner;\n        }\n        else {\n            var newSplitter = new SplitterNode_1.SplitterNode(this._model);\n            newSplitter._setParent(this);\n            newSplitter._setRect(split2.start);\n            this._drawChildren.push(newSplitter);\n            return split1.end;\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._remove = function (node) {\n        var removedIndex = this._removeChild(node);\n        if (this.getSelected() !== -1) {\n            Utils_1.adjustSelectedIndex(this, removedIndex);\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.canDrop = function (dragNode, x, y) {\n        if (dragNode.getType() !== TabNode_1.TabNode.TYPE) {\n            return undefined;\n        }\n        var dropInfo;\n        var dockLocation = DockLocation_1.DockLocation.CENTER;\n        if (this._tabHeaderRect.contains(x, y)) {\n            if (this._location._orientation === Orientation_1.Orientation.VERT) {\n                if (this._children.length > 0) {\n                    var child = this._children[0];\n                    var childRect = child.getTabRect();\n                    var childY = childRect.y;\n                    var childHeight = childRect.height;\n                    var pos = this._tabHeaderRect.x;\n                    var childCenter = 0;\n                    for (var i = 0; i < this._children.length; i++) {\n                        child = this._children[i];\n                        childRect = child.getTabRect();\n                        childCenter = childRect.x + childRect.width / 2;\n                        if (x >= pos && x < childCenter) {\n                            var outlineRect = new Rect_1.Rect(childRect.x - 2, childY, 3, childHeight);\n                            dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                            break;\n                        }\n                        pos = childCenter;\n                    }\n                    if (dropInfo == null) {\n                        var outlineRect = new Rect_1.Rect(childRect.getRight() - 2, childY, 3, childHeight);\n                        dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                    }\n                }\n                else {\n                    var outlineRect = new Rect_1.Rect(this._tabHeaderRect.x + 1, this._tabHeaderRect.y + 2, 3, 18);\n                    dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, 0, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                }\n            }\n            else {\n                if (this._children.length > 0) {\n                    var child = this._children[0];\n                    var childRect = child.getTabRect();\n                    var childX = childRect.x;\n                    var childWidth = childRect.width;\n                    var pos = this._tabHeaderRect.y;\n                    var childCenter = 0;\n                    for (var i = 0; i < this._children.length; i++) {\n                        child = this._children[i];\n                        childRect = child.getTabRect();\n                        childCenter = childRect.y + childRect.height / 2;\n                        if (y >= pos && y < childCenter) {\n                            var outlineRect = new Rect_1.Rect(childX, childRect.y - 2, childWidth, 3);\n                            dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                            break;\n                        }\n                        pos = childCenter;\n                    }\n                    if (dropInfo == null) {\n                        var outlineRect = new Rect_1.Rect(childX, childRect.getBottom() - 2, childWidth, 3);\n                        dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                    }\n                }\n                else {\n                    var outlineRect = new Rect_1.Rect(this._tabHeaderRect.x + 2, this._tabHeaderRect.y + 1, 18, 3);\n                    dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, 0, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                }\n            }\n            if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                return undefined;\n            }\n        }\n        else if (this.getSelected() !== -1 && this._contentRect.contains(x, y)) {\n            var outlineRect = this._contentRect;\n            dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                return undefined;\n            }\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype.drop = function (dragNode, location, index, select) {\n        var fromIndex = 0;\n        var dragParent = dragNode.getParent();\n        if (dragParent !== undefined) {\n            fromIndex = dragParent._removeChild(dragNode);\n            Utils_1.adjustSelectedIndex(dragParent, fromIndex);\n        }\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n        if (dragNode.getType() === TabNode_1.TabNode.TYPE && dragParent === this && fromIndex < index && index > 0) {\n            index--;\n        }\n        // simple_bundled dock to existing tabset\n        var insertPos = index;\n        if (insertPos === -1) {\n            insertPos = this._children.length;\n        }\n        if (dragNode.getType() === TabNode_1.TabNode.TYPE) {\n            this._addChild(dragNode, insertPos);\n        }\n        if (select || (select !== false && this.isAutoSelectTab())) {\n            this._setSelected(insertPos);\n        }\n        this._model._tidy();\n    };\n    BorderNode.prototype.toJson = function () {\n        var json = {};\n        BorderNode._attributeDefinitions.toJson(json, this._attributes);\n        json.location = this._location.getName();\n        json.children = this._children.map(function (child) { return child.toJson(); });\n        return json;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getSplitterBounds = function (splitter, useMinSize) {\n        if (useMinSize === void 0) { useMinSize = false; }\n        var pBounds = [0, 0];\n        var minSize = useMinSize ? this.getMinSize() : 0;\n        var outerRect = this._model._getOuterInnerRects().outer;\n        var innerRect = this._model._getOuterInnerRects().inner;\n        var rootRow = this._model.getRoot();\n        if (this._location === DockLocation_1.DockLocation.TOP) {\n            pBounds[0] = outerRect.y + minSize;\n            pBounds[1] = Math.max(pBounds[0], innerRect.getBottom() - splitter.getHeight() - rootRow.getMinHeight());\n        }\n        else if (this._location === DockLocation_1.DockLocation.LEFT) {\n            pBounds[0] = outerRect.x + minSize;\n            pBounds[1] = Math.max(pBounds[0], innerRect.getRight() - splitter.getWidth() - rootRow.getMinWidth());\n        }\n        else if (this._location === DockLocation_1.DockLocation.BOTTOM) {\n            pBounds[1] = outerRect.getBottom() - splitter.getHeight() - minSize;\n            pBounds[0] = Math.min(pBounds[1], innerRect.y + rootRow.getMinHeight());\n        }\n        else if (this._location === DockLocation_1.DockLocation.RIGHT) {\n            pBounds[1] = outerRect.getRight() - splitter.getWidth() - minSize;\n            pBounds[0] = Math.min(pBounds[1], innerRect.x + rootRow.getMinWidth());\n        }\n        return pBounds;\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._calculateSplit = function (splitter, splitterPos) {\n        var pBounds = this._getSplitterBounds(splitter);\n        if (this._location === DockLocation_1.DockLocation.BOTTOM || this._location === DockLocation_1.DockLocation.RIGHT) {\n            return Math.max(0, pBounds[1] - splitterPos);\n        }\n        else {\n            return Math.max(0, splitterPos - pBounds[0]);\n        }\n    };\n    /** @hidden @internal */\n    BorderNode.prototype._getAttributeDefinitions = function () {\n        return BorderNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    BorderNode.getAttributeDefinitions = function () {\n        return BorderNode._attributeDefinitions;\n    };\n    BorderNode.TYPE = \"border\";\n    /** @hidden @internal */\n    BorderNode._attributeDefinitions = BorderNode._createAttributeDefinitions();\n    return BorderNode;\n}(Node_1.Node));\nexports.BorderNode = BorderNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/BorderNode.ts?");
 
 /***/ }),
 
@@ -452,7 +452,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar BorderSet = /** @class */ (function () {\n    /** @hidden @internal */\n    function BorderSet(model) {\n        this._model = model;\n        this._borders = [];\n    }\n    /** @hidden @internal */\n    BorderSet._fromJson = function (json, model) {\n        var borderSet = new BorderSet(model);\n        borderSet._borders = json.map(function (borderJson) { return BorderNode_1.default._fromJson(borderJson, model); });\n        return borderSet;\n    };\n    BorderSet.prototype.getBorders = function () {\n        return this._borders;\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._forEachNode = function (fn) {\n        this._borders.forEach(function (borderNode) {\n            fn(borderNode, 0);\n            borderNode.getChildren().forEach(function (node) {\n                node._forEachNode(fn, 1);\n            });\n        });\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._toJson = function () {\n        return this._borders.map(function (borderNode) { return borderNode.toJson(); });\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._layoutBorder = function (outerInnerRects, metrics) {\n        var rect = outerInnerRects.outer;\n        var rootRow = this._model.getRoot();\n        var height = Math.max(0, rect.height - rootRow.getMinHeight());\n        var width = Math.max(0, rect.width - rootRow.getMinWidth());\n        var sumHeight = 0;\n        var sumWidth = 0;\n        var adjustableHeight = 0;\n        var adjustableWidth = 0;\n        var showingBorders = this._borders.filter(function (border) { return border.isShowing(); });\n        // sum size of borders to see they will fit\n        for (var _i = 0, showingBorders_1 = showingBorders; _i < showingBorders_1.length; _i++) {\n            var border = showingBorders_1[_i];\n            border._setAdjustedSize(border.getSize());\n            var visible = border.getSelected() !== -1;\n            if (border.getLocation().getOrientation() === Orientation_1.default.HORZ) {\n                sumWidth += border.getBorderBarSize();\n                if (visible) {\n                    width -= this._model.getSplitterSize();\n                    sumWidth += border.getSize();\n                    adjustableWidth += border.getSize();\n                }\n            }\n            else {\n                sumHeight += border.getBorderBarSize();\n                if (visible) {\n                    height -= this._model.getSplitterSize();\n                    sumHeight += border.getSize();\n                    adjustableHeight += border.getSize();\n                }\n            }\n        }\n        // adjust border sizes if too large\n        var j = 0;\n        var adjusted = false;\n        while ((sumWidth > width && adjustableWidth > 0) || (sumHeight > height && adjustableHeight > 0)) {\n            var border = showingBorders[j];\n            if (border.getSelected() !== -1) {\n                // visible\n                var size = border._getAdjustedSize();\n                if (sumWidth > width && adjustableWidth > 0 && border.getLocation().getOrientation() === Orientation_1.default.HORZ && size > 0\n                    && size > border.getMinSize()) {\n                    border._setAdjustedSize(size - 1);\n                    sumWidth--;\n                    adjustableWidth--;\n                    adjusted = true;\n                }\n                else if (sumHeight > height && adjustableHeight > 0 && border.getLocation().getOrientation() === Orientation_1.default.VERT && size > 0\n                    && size > border.getMinSize()) {\n                    border._setAdjustedSize(size - 1);\n                    sumHeight--;\n                    adjustableHeight--;\n                    adjusted = true;\n                }\n            }\n            j = (j + 1) % showingBorders.length;\n            if (j === 0) {\n                if (adjusted) {\n                    adjusted = false;\n                }\n                else {\n                    break;\n                }\n            }\n        }\n        showingBorders.forEach(function (border) {\n            outerInnerRects.outer = border._layoutBorderOuter(outerInnerRects.outer, metrics);\n        });\n        outerInnerRects.inner = outerInnerRects.outer;\n        showingBorders.forEach(function (border) {\n            outerInnerRects.inner = border._layoutBorderInner(outerInnerRects.inner, metrics);\n        });\n        return outerInnerRects;\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._findDropTargetNode = function (dragNode, x, y) {\n        for (var _i = 0, _a = this._borders; _i < _a.length; _i++) {\n            var border = _a[_i];\n            if (border.isShowing()) {\n                var dropInfo = border.canDrop(dragNode, x, y);\n                if (dropInfo !== undefined) {\n                    return dropInfo;\n                }\n            }\n        }\n        return undefined;\n    };\n    return BorderSet;\n}());\nexports.default = BorderSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/BorderSet.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderSet = void 0;\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar BorderSet = /** @class */ (function () {\n    /** @hidden @internal */\n    function BorderSet(model) {\n        this._model = model;\n        this._borders = [];\n    }\n    /** @hidden @internal */\n    BorderSet._fromJson = function (json, model) {\n        var borderSet = new BorderSet(model);\n        borderSet._borders = json.map(function (borderJson) { return BorderNode_1.BorderNode._fromJson(borderJson, model); });\n        return borderSet;\n    };\n    BorderSet.prototype.getBorders = function () {\n        return this._borders;\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._forEachNode = function (fn) {\n        this._borders.forEach(function (borderNode) {\n            fn(borderNode, 0);\n            borderNode.getChildren().forEach(function (node) {\n                node._forEachNode(fn, 1);\n            });\n        });\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._toJson = function () {\n        return this._borders.map(function (borderNode) { return borderNode.toJson(); });\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._layoutBorder = function (outerInnerRects, metrics) {\n        var rect = outerInnerRects.outer;\n        var rootRow = this._model.getRoot();\n        var height = Math.max(0, rect.height - rootRow.getMinHeight());\n        var width = Math.max(0, rect.width - rootRow.getMinWidth());\n        var sumHeight = 0;\n        var sumWidth = 0;\n        var adjustableHeight = 0;\n        var adjustableWidth = 0;\n        var showingBorders = this._borders.filter(function (border) { return border.isShowing(); });\n        // sum size of borders to see they will fit\n        for (var _i = 0, showingBorders_1 = showingBorders; _i < showingBorders_1.length; _i++) {\n            var border = showingBorders_1[_i];\n            border._setAdjustedSize(border.getSize());\n            var visible = border.getSelected() !== -1;\n            if (border.getLocation().getOrientation() === Orientation_1.Orientation.HORZ) {\n                sumWidth += border.getBorderBarSize();\n                if (visible) {\n                    width -= this._model.getSplitterSize();\n                    sumWidth += border.getSize();\n                    adjustableWidth += border.getSize();\n                }\n            }\n            else {\n                sumHeight += border.getBorderBarSize();\n                if (visible) {\n                    height -= this._model.getSplitterSize();\n                    sumHeight += border.getSize();\n                    adjustableHeight += border.getSize();\n                }\n            }\n        }\n        // adjust border sizes if too large\n        var j = 0;\n        var adjusted = false;\n        while ((sumWidth > width && adjustableWidth > 0) || (sumHeight > height && adjustableHeight > 0)) {\n            var border = showingBorders[j];\n            if (border.getSelected() !== -1) {\n                // visible\n                var size = border._getAdjustedSize();\n                if (sumWidth > width && adjustableWidth > 0 && border.getLocation().getOrientation() === Orientation_1.Orientation.HORZ && size > 0\n                    && size > border.getMinSize()) {\n                    border._setAdjustedSize(size - 1);\n                    sumWidth--;\n                    adjustableWidth--;\n                    adjusted = true;\n                }\n                else if (sumHeight > height && adjustableHeight > 0 && border.getLocation().getOrientation() === Orientation_1.Orientation.VERT && size > 0\n                    && size > border.getMinSize()) {\n                    border._setAdjustedSize(size - 1);\n                    sumHeight--;\n                    adjustableHeight--;\n                    adjusted = true;\n                }\n            }\n            j = (j + 1) % showingBorders.length;\n            if (j === 0) {\n                if (adjusted) {\n                    adjusted = false;\n                }\n                else {\n                    break;\n                }\n            }\n        }\n        showingBorders.forEach(function (border) {\n            outerInnerRects.outer = border._layoutBorderOuter(outerInnerRects.outer, metrics);\n        });\n        outerInnerRects.inner = outerInnerRects.outer;\n        showingBorders.forEach(function (border) {\n            outerInnerRects.inner = border._layoutBorderInner(outerInnerRects.inner, metrics);\n        });\n        return outerInnerRects;\n    };\n    /** @hidden @internal */\n    BorderSet.prototype._findDropTargetNode = function (dragNode, x, y) {\n        for (var _i = 0, _a = this._borders; _i < _a.length; _i++) {\n            var border = _a[_i];\n            if (border.isShowing()) {\n                var dropInfo = border.canDrop(dragNode, x, y);\n                if (dropInfo !== undefined) {\n                    return dropInfo;\n                }\n            }\n        }\n        return undefined;\n    };\n    return BorderSet;\n}());\nexports.BorderSet = BorderSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/BorderSet.ts?");
 
 /***/ }),
 
@@ -468,6 +468,42 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 
 /***/ }),
 
+/***/ "./src/model/IDraggable.ts":
+/*!*********************************!*\
+  !*** ./src/model/IDraggable.ts ***!
+  \*********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/IDraggable.ts?");
+
+/***/ }),
+
+/***/ "./src/model/IDropTarget.ts":
+/*!**********************************!*\
+  !*** ./src/model/IDropTarget.ts ***!
+  \**********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/IDropTarget.ts?");
+
+/***/ }),
+
+/***/ "./src/model/IJsonModel.ts":
+/*!*********************************!*\
+  !*** ./src/model/IJsonModel.ts ***!
+  \*********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/IJsonModel.ts?");
+
+/***/ }),
+
 /***/ "./src/model/Model.ts":
 /*!****************************!*\
   !*** ./src/model/Model.ts ***!
@@ -476,7 +512,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Actions_1 = __webpack_require__(/*! ./Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar BorderSet_1 = __webpack_require__(/*! ./BorderSet */ \"./src/model/BorderSet.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar uuid = __webpack_require__(/*! uuid */ \"./node_modules/uuid/dist/esm-browser/index.js\");\n/**\n * Class containing the Tree of Nodes used by the FlexLayout component\n */\nvar Model = /** @class */ (function () {\n    /**\n     * 'private' constructor. Use the static method Model.fromJson(json) to create a model\n     *  @hidden @internal\n     */\n    function Model() {\n        /** @hidden @internal */\n        this._borderRects = { inner: Rect_1.default.empty(), outer: Rect_1.default.empty() };\n        this._attributes = {};\n        this._idMap = {};\n        this._borders = new BorderSet_1.default(this);\n        this._pointerFine = true;\n        this._showHiddenBorder = DockLocation_1.default.CENTER;\n    }\n    /**\n     * Loads the model from the given json object\n     * @param json the json model to load\n     * @returns {Model} a new Model object\n     */\n    Model.fromJson = function (json) {\n        var model = new Model();\n        Model._attributeDefinitions.fromJson(json.global, model._attributes);\n        if (json.borders) {\n            model._borders = BorderSet_1.default._fromJson(json.borders, model);\n        }\n        model._root = RowNode_1.default._fromJson(json.layout, model);\n        model._tidy(); // initial tidy of node tree\n        return model;\n    };\n    /** @hidden @internal */\n    Model._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        // splitter\n        attributeDefinitions.add(\"splitterSize\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"splitterExtra\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"enableEdgeDock\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"rootOrientationVertical\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"marginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"enableUseVisibility\", false).setType(Attribute_1.default.BOOLEAN);\n        // tab\n        attributeDefinitions.add(\"tabEnableClose\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabCloseType\", 1).setType(\"ICloseType\");\n        attributeDefinitions.add(\"tabEnableFloat\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableDrag\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableRename\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabClassName\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabIcon\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabEnableRenderOnDemand\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabDragSpeed\", 0.3).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabBorderWidth\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabBorderHeight\", -1).setType(Attribute_1.default.NUMBER);\n        // tabset\n        attributeDefinitions.add(\"tabSetEnableDeleteWhenEmpty\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrop\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrag\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDivide\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableMaximize\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableClose\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetAutoSelectTab\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetClassNameTabStrip\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabSetClassNameHeader\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabSetEnableTabStrip\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetHeaderHeight\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetTabStripHeight\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetMarginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetBorderInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetTabLocation\", \"top\").setType(\"ITabLocation\");\n        attributeDefinitions.add(\"tabSetMinWidth\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetMinHeight\", 0).setType(Attribute_1.default.NUMBER);\n        // border\n        attributeDefinitions.add(\"borderSize\", 200).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderMinSize\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderBarSize\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderEnableDrop\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenOpen\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenClosed\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderClassName\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"borderEnableAutoHide\", false).setType(Attribute_1.default.BOOLEAN);\n        return attributeDefinitions;\n    };\n    /** @hidden @internal */\n    Model.prototype._setChangeListener = function (listener) {\n        this._changeListener = listener;\n    };\n    /**\n     * Get the currently active tabset node\n     */\n    Model.prototype.getActiveTabset = function () {\n        if (this._activeTabSet && this.getNodeById(this._activeTabSet.getId())) {\n            return this._activeTabSet;\n        }\n        else {\n            return undefined;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._getShowHiddenBorder = function () {\n        return this._showHiddenBorder;\n    };\n    /** @hidden @internal */\n    Model.prototype._setShowHiddenBorder = function (location) {\n        this._showHiddenBorder = location;\n    };\n    /** @hidden @internal */\n    Model.prototype._setActiveTabset = function (tabsetNode) {\n        this._activeTabSet = tabsetNode;\n    };\n    /**\n     * Get the currently maximized tabset node\n     */\n    Model.prototype.getMaximizedTabset = function () {\n        return this._maximizedTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._setMaximizedTabset = function (tabsetNode) {\n        this._maximizedTabSet = tabsetNode;\n    };\n    /**\n     * Gets the root RowNode of the model\n     * @returns {RowNode}\n     */\n    Model.prototype.getRoot = function () {\n        return this._root;\n    };\n    Model.prototype.isRootOrientationVertical = function () {\n        return this._attributes.rootOrientationVertical;\n    };\n    Model.prototype.isUseVisibility = function () {\n        return this._attributes.enableUseVisibility;\n    };\n    /**\n     * Gets the\n     * @returns {BorderSet|*}\n     */\n    Model.prototype.getBorderSet = function () {\n        return this._borders;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOuterInnerRects = function () {\n        return this._borderRects;\n    };\n    /** @hidden @internal */\n    Model.prototype._getPointerFine = function () {\n        return this._pointerFine;\n    };\n    /** @hidden @internal */\n    Model.prototype._setPointerFine = function (pointerFine) {\n        this._pointerFine = pointerFine;\n    };\n    /**\n     * Visits all the nodes in the model and calls the given function for each\n     * @param fn a function that takes visited node and a integer level as parameters\n     */\n    Model.prototype.visitNodes = function (fn) {\n        this._borders._forEachNode(fn);\n        this._root._forEachNode(fn, 0);\n    };\n    /**\n     * Gets a node by its id\n     * @param id the id to find\n     */\n    Model.prototype.getNodeById = function (id) {\n        return this._idMap[id];\n    };\n    /**\n     * Update the node tree by performing the given action,\n     * Actions should be generated via static methods on the Actions class\n     * @param action the action to perform\n     * @returns added Node for Actions.addNode; undefined otherwise\n     */\n    Model.prototype.doAction = function (action) {\n        var returnVal = undefined;\n        // console.log(action);\n        switch (action.type) {\n            case Actions_1.default.ADD_NODE: {\n                var newNode = new TabNode_1.default(this, action.data.json, true);\n                var toNode = this._idMap[action.data.toNode];\n                if (toNode instanceof TabSetNode_1.default || toNode instanceof BorderNode_1.default || toNode instanceof RowNode_1.default) {\n                    toNode.drop(newNode, DockLocation_1.default.getByName(action.data.location), action.data.index, action.data.select);\n                    returnVal = newNode;\n                }\n                break;\n            }\n            case Actions_1.default.MOVE_NODE: {\n                var fromNode = this._idMap[action.data.fromNode];\n                if (fromNode instanceof TabNode_1.default || fromNode instanceof TabSetNode_1.default) {\n                    var toNode = this._idMap[action.data.toNode];\n                    if (toNode instanceof TabSetNode_1.default || toNode instanceof BorderNode_1.default || toNode instanceof RowNode_1.default) {\n                        toNode.drop(fromNode, DockLocation_1.default.getByName(action.data.location), action.data.index, action.data.select);\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.DELETE_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._delete();\n                }\n                break;\n            }\n            case Actions_1.default.DELETE_TABSET: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.default) {\n                    // first delete all child tabs that are closeable\n                    var children = __spreadArray([], node.getChildren());\n                    children.forEach(function (child, i) {\n                        if (child.isEnableClose()) {\n                            child._delete();\n                        }\n                    });\n                    if (node.getChildren().length === 0) {\n                        node._delete();\n                    }\n                    this._tidy();\n                }\n                break;\n            }\n            case Actions_1.default.FLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setFloating(true);\n                    Utils_1.adjustSelectedIndexAfterFloat(node);\n                }\n                break;\n            }\n            case Actions_1.default.UNFLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setFloating(false);\n                    Utils_1.adjustSelectedIndexAfterDock(node);\n                }\n                break;\n            }\n            case Actions_1.default.RENAME_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setName(action.data.text);\n                }\n                break;\n            }\n            case Actions_1.default.SELECT_TAB: {\n                var tabNode = this._idMap[action.data.tabNode];\n                if (tabNode instanceof TabNode_1.default) {\n                    var parent_1 = tabNode.getParent();\n                    var pos = parent_1.getChildren().indexOf(tabNode);\n                    if (parent_1 instanceof BorderNode_1.default) {\n                        if (parent_1.getSelected() === pos) {\n                            parent_1._setSelected(-1);\n                        }\n                        else {\n                            parent_1._setSelected(pos);\n                        }\n                    }\n                    else if (parent_1 instanceof TabSetNode_1.default) {\n                        if (parent_1.getSelected() !== pos) {\n                            parent_1._setSelected(pos);\n                        }\n                        this._activeTabSet = parent_1;\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.SET_ACTIVE_TABSET: {\n                var tabsetNode = this._idMap[action.data.tabsetNode];\n                if (tabsetNode instanceof TabSetNode_1.default) {\n                    this._activeTabSet = tabsetNode;\n                }\n                break;\n            }\n            case Actions_1.default.ADJUST_SPLIT: {\n                var node1 = this._idMap[action.data.node1];\n                var node2 = this._idMap[action.data.node2];\n                if ((node1 instanceof TabSetNode_1.default || node1 instanceof RowNode_1.default) && (node2 instanceof TabSetNode_1.default || node2 instanceof RowNode_1.default)) {\n                    this._adjustSplitSide(node1, action.data.weight1, action.data.pixelWidth1);\n                    this._adjustSplitSide(node2, action.data.weight2, action.data.pixelWidth2);\n                }\n                break;\n            }\n            case Actions_1.default.ADJUST_BORDER_SPLIT: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof BorderNode_1.default) {\n                    node._setSize(action.data.pos);\n                }\n                break;\n            }\n            case Actions_1.default.MAXIMIZE_TOGGLE: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.default) {\n                    if (node === this._maximizedTabSet) {\n                        this._maximizedTabSet = undefined;\n                    }\n                    else {\n                        this._maximizedTabSet = node;\n                        this._activeTabSet = node;\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.UPDATE_MODEL_ATTRIBUTES: {\n                this._updateAttrs(action.data.json);\n                break;\n            }\n            case Actions_1.default.UPDATE_NODE_ATTRIBUTES: {\n                var node = this._idMap[action.data.node];\n                node._updateAttrs(action.data.json);\n                break;\n            }\n            default:\n                break;\n        }\n        this._updateIdMap();\n        if (this._changeListener !== undefined) {\n            this._changeListener();\n        }\n        return returnVal;\n    };\n    /** @hidden @internal */\n    Model.prototype._updateIdMap = function () {\n        var _this = this;\n        // regenerate idMap to stop it building up\n        this._idMap = {};\n        this.visitNodes(function (node) { return (_this._idMap[node.getId()] = node); });\n        // console.log(JSON.stringify(Object.keys(this._idMap)));\n    };\n    /** @hidden @internal */\n    Model.prototype._adjustSplitSide = function (node, weight, pixels) {\n        node._setWeight(weight);\n        if (node.getWidth() != null && node.getOrientation() === Orientation_1.default.VERT) {\n            node._updateAttrs({ width: pixels });\n        }\n        else if (node.getHeight() != null && node.getOrientation() === Orientation_1.default.HORZ) {\n            node._updateAttrs({ height: pixels });\n        }\n    };\n    /**\n     * Converts the model to a json object\n     * @returns {IJsonModel} json object that represents this model\n     */\n    Model.prototype.toJson = function () {\n        var global = {};\n        Model._attributeDefinitions.toJson(global, this._attributes);\n        // save state of nodes\n        this.visitNodes(function (node) {\n            node._fireEvent(\"save\", undefined);\n        });\n        return { global: global, borders: this._borders._toJson(), layout: this._root.toJson() };\n    };\n    Model.prototype.getSplitterSize = function () {\n        var splitterSize = this._attributes.splitterSize;\n        if (splitterSize === -1) {\n            // use defaults\n            splitterSize = this._pointerFine ? 8 : 12; // larger for mobile\n        }\n        return splitterSize;\n    };\n    Model.prototype.getSplitterExtra = function () {\n        return this._attributes.splitterExtra;\n    };\n    Model.prototype.isEnableEdgeDock = function () {\n        return this._attributes.enableEdgeDock;\n    };\n    /** @hidden @internal */\n    Model.prototype._addNode = function (node) {\n        var id = node.getId();\n        if (this._idMap[id] !== undefined) {\n            throw new Error(\"Error: each node must have a unique id, duplicate id:\" + node.getId());\n        }\n        if (node.getType() !== \"splitter\") {\n            this._idMap[id] = node;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._layout = function (rect, metrics) {\n        var _a;\n        // let start = Date.now();\n        this._borderRects = this._borders._layoutBorder({ outer: rect, inner: rect }, metrics);\n        rect = this._borderRects.inner.removeInsets(this._getAttribute(\"marginInsets\"));\n        (_a = this._root) === null || _a === void 0 ? void 0 : _a.calcMinSize();\n        this._root._layout(rect, metrics);\n        // console.log(\"layout time: \" + (Date.now() - start));\n        return rect;\n    };\n    /** @hidden @internal */\n    Model.prototype._findDropTargetNode = function (dragNode, x, y) {\n        var node = this._root._findDropTargetNode(dragNode, x, y);\n        if (node === undefined) {\n            node = this._borders._findDropTargetNode(dragNode, x, y);\n        }\n        return node;\n    };\n    /** @hidden @internal */\n    Model.prototype._tidy = function () {\n        // console.log(\"before _tidy\", this.toString());\n        this._root._tidy();\n        // console.log(\"after _tidy\", this.toString());\n    };\n    /** @hidden @internal */\n    Model.prototype._updateAttrs = function (json) {\n        Model._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    Model.prototype._nextUniqueId = function () {\n        return '#' + uuid.v4();\n    };\n    /** @hidden @internal */\n    Model.prototype._getAttribute = function (name) {\n        return this._attributes[name];\n    };\n    /**\n     * Sets a function to allow/deny dropping a node\n     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed\n     */\n    Model.prototype.setOnAllowDrop = function (onAllowDrop) {\n        this._onAllowDrop = onAllowDrop;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnAllowDrop = function () {\n        return this._onAllowDrop;\n    };\n    /**\n     * set callback called when a new TabSet is created.\n     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last\n     * tab is deleted, the root tabset can be recreated)\n     * @param onCreateTabSet\n     */\n    Model.prototype.setOnCreateTabSet = function (onCreateTabSet) {\n        this._onCreateTabSet = onCreateTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnCreateTabSet = function () {\n        return this._onCreateTabSet;\n    };\n    Model.toTypescriptInterfaces = function () {\n        console.log(Model._attributeDefinitions.toTypescriptInterface(\"Global\", undefined));\n        console.log(RowNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Row\", Model._attributeDefinitions));\n        console.log(TabSetNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"TabSet\", Model._attributeDefinitions));\n        console.log(TabNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Tab\", Model._attributeDefinitions));\n        console.log(BorderNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Border\", Model._attributeDefinitions));\n    };\n    Model.prototype.toString = function () {\n        return JSON.stringify(this.toJson());\n    };\n    /** @hidden @internal */\n    Model._attributeDefinitions = Model._createAttributeDefinitions();\n    return Model;\n}());\nexports.default = Model;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Model.ts?");
+eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Model = void 0;\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Actions_1 = __webpack_require__(/*! ./Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar BorderSet_1 = __webpack_require__(/*! ./BorderSet */ \"./src/model/BorderSet.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar uuid = __webpack_require__(/*! uuid */ \"./node_modules/uuid/dist/esm-browser/index.js\");\n/**\n * Class containing the Tree of Nodes used by the FlexLayout component\n */\nvar Model = /** @class */ (function () {\n    /**\n     * 'private' constructor. Use the static method Model.fromJson(json) to create a model\n     *  @hidden @internal\n     */\n    function Model() {\n        /** @hidden @internal */\n        this._borderRects = { inner: Rect_1.Rect.empty(), outer: Rect_1.Rect.empty() };\n        this._attributes = {};\n        this._idMap = {};\n        this._borders = new BorderSet_1.BorderSet(this);\n        this._pointerFine = true;\n        this._showHiddenBorder = DockLocation_1.DockLocation.CENTER;\n    }\n    /**\n     * Loads the model from the given json object\n     * @param json the json model to load\n     * @returns {Model} a new Model object\n     */\n    Model.fromJson = function (json) {\n        var model = new Model();\n        Model._attributeDefinitions.fromJson(json.global, model._attributes);\n        if (json.borders) {\n            model._borders = BorderSet_1.BorderSet._fromJson(json.borders, model);\n        }\n        model._root = RowNode_1.RowNode._fromJson(json.layout, model);\n        model._tidy(); // initial tidy of node tree\n        return model;\n    };\n    /** @hidden @internal */\n    Model._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.AttributeDefinitions();\n        attributeDefinitions.add(\"legacyOverflowMenu\", false).setType(Attribute_1.Attribute.BOOLEAN);\n        // splitter\n        attributeDefinitions.add(\"splitterSize\", -1).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"splitterExtra\", 0).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"enableEdgeDock\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"rootOrientationVertical\", false).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"marginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"enableUseVisibility\", false).setType(Attribute_1.Attribute.BOOLEAN);\n        // tab\n        attributeDefinitions.add(\"tabEnableClose\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabCloseType\", 1).setType(\"ICloseType\");\n        attributeDefinitions.add(\"tabEnableFloat\", false).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableDrag\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableRename\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabClassName\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"tabIcon\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"tabEnableRenderOnDemand\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabDragSpeed\", 0.3).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"tabBorderWidth\", -1).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"tabBorderHeight\", -1).setType(Attribute_1.Attribute.NUMBER);\n        // tabset\n        attributeDefinitions.add(\"tabSetEnableDeleteWhenEmpty\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrop\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrag\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDivide\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableMaximize\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableClose\", false).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabSetAutoSelectTab\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabSetClassNameTabStrip\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"tabSetClassNameHeader\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"tabSetEnableTabStrip\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"tabSetHeaderHeight\", 0).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"tabSetTabStripHeight\", 0).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"tabSetMarginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetBorderInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetTabLocation\", \"top\").setType(\"ITabLocation\");\n        attributeDefinitions.add(\"tabSetMinWidth\", 0).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"tabSetMinHeight\", 0).setType(Attribute_1.Attribute.NUMBER);\n        // border\n        attributeDefinitions.add(\"borderSize\", 200).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"borderMinSize\", 0).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"borderBarSize\", 0).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"borderEnableDrop\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenOpen\", true).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenClosed\", false).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.add(\"borderClassName\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"borderEnableAutoHide\", false).setType(Attribute_1.Attribute.BOOLEAN);\n        return attributeDefinitions;\n    };\n    /** @hidden @internal */\n    Model.prototype._setChangeListener = function (listener) {\n        this._changeListener = listener;\n    };\n    /**\n     * Get the currently active tabset node\n     */\n    Model.prototype.getActiveTabset = function () {\n        if (this._activeTabSet && this.getNodeById(this._activeTabSet.getId())) {\n            return this._activeTabSet;\n        }\n        else {\n            return undefined;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._getShowHiddenBorder = function () {\n        return this._showHiddenBorder;\n    };\n    /** @hidden @internal */\n    Model.prototype._setShowHiddenBorder = function (location) {\n        this._showHiddenBorder = location;\n    };\n    /** @hidden @internal */\n    Model.prototype._setActiveTabset = function (tabsetNode) {\n        this._activeTabSet = tabsetNode;\n    };\n    /**\n     * Get the currently maximized tabset node\n     */\n    Model.prototype.getMaximizedTabset = function () {\n        return this._maximizedTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._setMaximizedTabset = function (tabsetNode) {\n        this._maximizedTabSet = tabsetNode;\n    };\n    /**\n     * Gets the root RowNode of the model\n     * @returns {RowNode}\n     */\n    Model.prototype.getRoot = function () {\n        return this._root;\n    };\n    Model.prototype.isRootOrientationVertical = function () {\n        return this._attributes.rootOrientationVertical;\n    };\n    Model.prototype.isUseVisibility = function () {\n        return this._attributes.enableUseVisibility;\n    };\n    /**\n     * Gets the\n     * @returns {BorderSet|*}\n     */\n    Model.prototype.getBorderSet = function () {\n        return this._borders;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOuterInnerRects = function () {\n        return this._borderRects;\n    };\n    /** @hidden @internal */\n    Model.prototype._getPointerFine = function () {\n        return this._pointerFine;\n    };\n    /** @hidden @internal */\n    Model.prototype._setPointerFine = function (pointerFine) {\n        this._pointerFine = pointerFine;\n    };\n    /**\n     * Visits all the nodes in the model and calls the given function for each\n     * @param fn a function that takes visited node and a integer level as parameters\n     */\n    Model.prototype.visitNodes = function (fn) {\n        this._borders._forEachNode(fn);\n        this._root._forEachNode(fn, 0);\n    };\n    /**\n     * Gets a node by its id\n     * @param id the id to find\n     */\n    Model.prototype.getNodeById = function (id) {\n        return this._idMap[id];\n    };\n    /**\n     * Update the node tree by performing the given action,\n     * Actions should be generated via static methods on the Actions class\n     * @param action the action to perform\n     * @returns added Node for Actions.addNode; undefined otherwise\n     */\n    Model.prototype.doAction = function (action) {\n        var returnVal = undefined;\n        // console.log(action);\n        switch (action.type) {\n            case Actions_1.Actions.ADD_NODE: {\n                var newNode = new TabNode_1.TabNode(this, action.data.json, true);\n                var toNode = this._idMap[action.data.toNode];\n                if (toNode instanceof TabSetNode_1.TabSetNode || toNode instanceof BorderNode_1.BorderNode || toNode instanceof RowNode_1.RowNode) {\n                    toNode.drop(newNode, DockLocation_1.DockLocation.getByName(action.data.location), action.data.index, action.data.select);\n                    returnVal = newNode;\n                }\n                break;\n            }\n            case Actions_1.Actions.MOVE_NODE: {\n                var fromNode = this._idMap[action.data.fromNode];\n                if (fromNode instanceof TabNode_1.TabNode || fromNode instanceof TabSetNode_1.TabSetNode) {\n                    var toNode = this._idMap[action.data.toNode];\n                    if (toNode instanceof TabSetNode_1.TabSetNode || toNode instanceof BorderNode_1.BorderNode || toNode instanceof RowNode_1.RowNode) {\n                        toNode.drop(fromNode, DockLocation_1.DockLocation.getByName(action.data.location), action.data.index, action.data.select);\n                    }\n                }\n                break;\n            }\n            case Actions_1.Actions.DELETE_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.TabNode) {\n                    node._delete();\n                }\n                break;\n            }\n            case Actions_1.Actions.DELETE_TABSET: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.TabSetNode) {\n                    // first delete all child tabs that are closeable\n                    var children = __spreadArray([], node.getChildren());\n                    children.forEach(function (child, i) {\n                        if (child.isEnableClose()) {\n                            child._delete();\n                        }\n                    });\n                    if (node.getChildren().length === 0) {\n                        node._delete();\n                    }\n                    this._tidy();\n                }\n                break;\n            }\n            case Actions_1.Actions.FLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.TabNode) {\n                    node._setFloating(true);\n                    Utils_1.adjustSelectedIndexAfterFloat(node);\n                }\n                break;\n            }\n            case Actions_1.Actions.UNFLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.TabNode) {\n                    node._setFloating(false);\n                    Utils_1.adjustSelectedIndexAfterDock(node);\n                }\n                break;\n            }\n            case Actions_1.Actions.RENAME_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.TabNode) {\n                    node._setName(action.data.text);\n                }\n                break;\n            }\n            case Actions_1.Actions.SELECT_TAB: {\n                var tabNode = this._idMap[action.data.tabNode];\n                if (tabNode instanceof TabNode_1.TabNode) {\n                    var parent_1 = tabNode.getParent();\n                    var pos = parent_1.getChildren().indexOf(tabNode);\n                    if (parent_1 instanceof BorderNode_1.BorderNode) {\n                        if (parent_1.getSelected() === pos) {\n                            parent_1._setSelected(-1);\n                        }\n                        else {\n                            parent_1._setSelected(pos);\n                        }\n                    }\n                    else if (parent_1 instanceof TabSetNode_1.TabSetNode) {\n                        if (parent_1.getSelected() !== pos) {\n                            parent_1._setSelected(pos);\n                        }\n                        this._activeTabSet = parent_1;\n                    }\n                }\n                break;\n            }\n            case Actions_1.Actions.SET_ACTIVE_TABSET: {\n                var tabsetNode = this._idMap[action.data.tabsetNode];\n                if (tabsetNode instanceof TabSetNode_1.TabSetNode) {\n                    this._activeTabSet = tabsetNode;\n                }\n                break;\n            }\n            case Actions_1.Actions.ADJUST_SPLIT: {\n                var node1 = this._idMap[action.data.node1];\n                var node2 = this._idMap[action.data.node2];\n                if ((node1 instanceof TabSetNode_1.TabSetNode || node1 instanceof RowNode_1.RowNode) && (node2 instanceof TabSetNode_1.TabSetNode || node2 instanceof RowNode_1.RowNode)) {\n                    this._adjustSplitSide(node1, action.data.weight1, action.data.pixelWidth1);\n                    this._adjustSplitSide(node2, action.data.weight2, action.data.pixelWidth2);\n                }\n                break;\n            }\n            case Actions_1.Actions.ADJUST_BORDER_SPLIT: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof BorderNode_1.BorderNode) {\n                    node._setSize(action.data.pos);\n                }\n                break;\n            }\n            case Actions_1.Actions.MAXIMIZE_TOGGLE: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.TabSetNode) {\n                    if (node === this._maximizedTabSet) {\n                        this._maximizedTabSet = undefined;\n                    }\n                    else {\n                        this._maximizedTabSet = node;\n                        this._activeTabSet = node;\n                    }\n                }\n                break;\n            }\n            case Actions_1.Actions.UPDATE_MODEL_ATTRIBUTES: {\n                this._updateAttrs(action.data.json);\n                break;\n            }\n            case Actions_1.Actions.UPDATE_NODE_ATTRIBUTES: {\n                var node = this._idMap[action.data.node];\n                node._updateAttrs(action.data.json);\n                break;\n            }\n            default:\n                break;\n        }\n        this._updateIdMap();\n        if (this._changeListener !== undefined) {\n            this._changeListener();\n        }\n        return returnVal;\n    };\n    /** @hidden @internal */\n    Model.prototype._updateIdMap = function () {\n        var _this = this;\n        // regenerate idMap to stop it building up\n        this._idMap = {};\n        this.visitNodes(function (node) { return (_this._idMap[node.getId()] = node); });\n        // console.log(JSON.stringify(Object.keys(this._idMap)));\n    };\n    /** @hidden @internal */\n    Model.prototype._adjustSplitSide = function (node, weight, pixels) {\n        node._setWeight(weight);\n        if (node.getWidth() != null && node.getOrientation() === Orientation_1.Orientation.VERT) {\n            node._updateAttrs({ width: pixels });\n        }\n        else if (node.getHeight() != null && node.getOrientation() === Orientation_1.Orientation.HORZ) {\n            node._updateAttrs({ height: pixels });\n        }\n    };\n    /**\n     * Converts the model to a json object\n     * @returns {IJsonModel} json object that represents this model\n     */\n    Model.prototype.toJson = function () {\n        var global = {};\n        Model._attributeDefinitions.toJson(global, this._attributes);\n        // save state of nodes\n        this.visitNodes(function (node) {\n            node._fireEvent(\"save\", undefined);\n        });\n        return { global: global, borders: this._borders._toJson(), layout: this._root.toJson() };\n    };\n    Model.prototype.getSplitterSize = function () {\n        var splitterSize = this._attributes.splitterSize;\n        if (splitterSize === -1) {\n            // use defaults\n            splitterSize = this._pointerFine ? 8 : 12; // larger for mobile\n        }\n        return splitterSize;\n    };\n    Model.prototype.isLegacyOverflowMenu = function () {\n        return this._attributes.legacyOverflowMenu;\n    };\n    Model.prototype.getSplitterExtra = function () {\n        return this._attributes.splitterExtra;\n    };\n    Model.prototype.isEnableEdgeDock = function () {\n        return this._attributes.enableEdgeDock;\n    };\n    /** @hidden @internal */\n    Model.prototype._addNode = function (node) {\n        var id = node.getId();\n        if (this._idMap[id] !== undefined) {\n            throw new Error(\"Error: each node must have a unique id, duplicate id:\" + node.getId());\n        }\n        if (node.getType() !== \"splitter\") {\n            this._idMap[id] = node;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._layout = function (rect, metrics) {\n        var _a;\n        // let start = Date.now();\n        this._borderRects = this._borders._layoutBorder({ outer: rect, inner: rect }, metrics);\n        rect = this._borderRects.inner.removeInsets(this._getAttribute(\"marginInsets\"));\n        (_a = this._root) === null || _a === void 0 ? void 0 : _a.calcMinSize();\n        this._root._layout(rect, metrics);\n        // console.log(\"layout time: \" + (Date.now() - start));\n        return rect;\n    };\n    /** @hidden @internal */\n    Model.prototype._findDropTargetNode = function (dragNode, x, y) {\n        var node = this._root._findDropTargetNode(dragNode, x, y);\n        if (node === undefined) {\n            node = this._borders._findDropTargetNode(dragNode, x, y);\n        }\n        return node;\n    };\n    /** @hidden @internal */\n    Model.prototype._tidy = function () {\n        // console.log(\"before _tidy\", this.toString());\n        this._root._tidy();\n        // console.log(\"after _tidy\", this.toString());\n    };\n    /** @hidden @internal */\n    Model.prototype._updateAttrs = function (json) {\n        Model._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    Model.prototype._nextUniqueId = function () {\n        return '#' + uuid.v4();\n    };\n    /** @hidden @internal */\n    Model.prototype._getAttribute = function (name) {\n        return this._attributes[name];\n    };\n    /**\n     * Sets a function to allow/deny dropping a node\n     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed\n     */\n    Model.prototype.setOnAllowDrop = function (onAllowDrop) {\n        this._onAllowDrop = onAllowDrop;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnAllowDrop = function () {\n        return this._onAllowDrop;\n    };\n    /**\n     * set callback called when a new TabSet is created.\n     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last\n     * tab is deleted, the root tabset can be recreated)\n     * @param onCreateTabSet\n     */\n    Model.prototype.setOnCreateTabSet = function (onCreateTabSet) {\n        this._onCreateTabSet = onCreateTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnCreateTabSet = function () {\n        return this._onCreateTabSet;\n    };\n    Model.toTypescriptInterfaces = function () {\n        console.log(Model._attributeDefinitions.toTypescriptInterface(\"Global\", undefined));\n        console.log(RowNode_1.RowNode.getAttributeDefinitions().toTypescriptInterface(\"Row\", Model._attributeDefinitions));\n        console.log(TabSetNode_1.TabSetNode.getAttributeDefinitions().toTypescriptInterface(\"TabSet\", Model._attributeDefinitions));\n        console.log(TabNode_1.TabNode.getAttributeDefinitions().toTypescriptInterface(\"Tab\", Model._attributeDefinitions));\n        console.log(BorderNode_1.BorderNode.getAttributeDefinitions().toTypescriptInterface(\"Border\", Model._attributeDefinitions));\n    };\n    Model.prototype.toString = function () {\n        return JSON.stringify(this.toJson());\n    };\n    /** @hidden @internal */\n    Model._attributeDefinitions = Model._createAttributeDefinitions();\n    return Model;\n}());\nexports.Model = Model;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Model.ts?");
 
 /***/ }),
 
@@ -488,7 +524,7 @@ eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from)
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Node = /** @class */ (function () {\n    /** @hidden @internal */\n    function Node(model) {\n        /** @hidden @internal */\n        this._dirty = false;\n        /** @hidden @internal */\n        this._tempSize = 0;\n        this._model = model;\n        this._attributes = {};\n        this._children = [];\n        this._fixed = false;\n        this._rect = Rect_1.default.empty();\n        this._visible = false;\n        this._listeners = {};\n    }\n    Node.prototype.getId = function () {\n        var id = this._attributes.id;\n        if (id !== undefined) {\n            return id;\n        }\n        id = this._model._nextUniqueId();\n        this._setId(id);\n        return id;\n    };\n    Node.prototype.getModel = function () {\n        return this._model;\n    };\n    Node.prototype.getType = function () {\n        return this._attributes.type;\n    };\n    Node.prototype.getParent = function () {\n        return this._parent;\n    };\n    Node.prototype.getChildren = function () {\n        return this._children;\n    };\n    Node.prototype.getRect = function () {\n        return this._rect;\n    };\n    Node.prototype.isVisible = function () {\n        return this._visible;\n    };\n    Node.prototype.getOrientation = function () {\n        if (this._parent === undefined) {\n            return this._model.isRootOrientationVertical() ? Orientation_1.default.VERT : Orientation_1.default.HORZ;\n        }\n        else {\n            return Orientation_1.default.flip(this._parent.getOrientation());\n        }\n    };\n    // event can be: resize, visibility, maximize (on tabset), close\n    Node.prototype.setEventListener = function (event, callback) {\n        this._listeners[event] = callback;\n    };\n    Node.prototype.removeEventListener = function (event) {\n        delete this._listeners[event];\n    };\n    /** @hidden @internal */\n    Node.prototype._setId = function (id) {\n        this._attributes.id = id;\n    };\n    /** @hidden @internal */\n    Node.prototype._fireEvent = function (event, params) {\n        // console.log(this._type, \" fireEvent \" + event + \" \" + JSON.stringify(params));\n        if (this._listeners[event] !== undefined) {\n            this._listeners[event](params);\n        }\n    };\n    /** @hidden @internal */\n    Node.prototype._getAttr = function (name) {\n        var val = this._attributes[name];\n        if (val === undefined) {\n            var modelName = this._getAttributeDefinitions().getModelName(name);\n            if (modelName !== undefined) {\n                val = this._model._getAttribute(modelName);\n            }\n        }\n        // console.log(name + \"=\" + val);\n        return val;\n    };\n    /** @hidden @internal */\n    Node.prototype._forEachNode = function (fn, level) {\n        fn(this, level);\n        level++;\n        this._children.forEach(function (node) {\n            node._forEachNode(fn, level);\n        });\n    };\n    /** @hidden @internal */\n    Node.prototype._setVisible = function (visible) {\n        if (visible !== this._visible) {\n            this._fireEvent(\"visibility\", { visible: visible });\n            this._visible = visible;\n        }\n    };\n    /** @hidden @internal */\n    Node.prototype._getDrawChildren = function () {\n        return this._children;\n    };\n    /** @hidden @internal */\n    Node.prototype._setParent = function (parent) {\n        this._parent = parent;\n    };\n    /** @hidden @internal */\n    Node.prototype._setRect = function (rect) {\n        this._rect = rect;\n    };\n    /** @hidden @internal */\n    Node.prototype._setWeight = function (weight) {\n        this._attributes.weight = weight;\n    };\n    /** @hidden @internal */\n    Node.prototype._setSelected = function (index) {\n        this._attributes.selected = index;\n    };\n    /** @hidden @internal */\n    Node.prototype._isFixed = function () {\n        return this._fixed;\n    };\n    /** @hidden @internal */\n    Node.prototype._layout = function (rect, metrics) {\n        this._rect = rect;\n    };\n    /** @hidden @internal */\n    Node.prototype._findDropTargetNode = function (dragNode, x, y) {\n        var rtn;\n        if (this._rect.contains(x, y)) {\n            rtn = this.canDrop(dragNode, x, y);\n            if (rtn === undefined) {\n                if (this._children.length !== 0) {\n                    for (var _i = 0, _a = this._children; _i < _a.length; _i++) {\n                        var child = _a[_i];\n                        rtn = child._findDropTargetNode(dragNode, x, y);\n                        if (rtn !== undefined) {\n                            break;\n                        }\n                    }\n                }\n            }\n        }\n        return rtn;\n    };\n    /** @hidden @internal */\n    Node.prototype.canDrop = function (dragNode, x, y) {\n        return undefined;\n    };\n    /** @hidden @internal */\n    Node.prototype._canDockInto = function (dragNode, dropInfo) {\n        if (dropInfo != null) {\n            if (dropInfo.location === DockLocation_1.default.CENTER && dropInfo.node.isEnableDrop() === false) {\n                return false;\n            }\n            // prevent named tabset docking into another tabset, since this would lose the header\n            if (dropInfo.location === DockLocation_1.default.CENTER && dragNode.getType() === \"tabset\" && dragNode.getName() !== undefined) {\n                return false;\n            }\n            if (dropInfo.location !== DockLocation_1.default.CENTER && dropInfo.node.isEnableDivide() === false) {\n                return false;\n            }\n            // finally check model callback to check if drop allowed\n            if (this._model._getOnAllowDrop()) {\n                return this._model._getOnAllowDrop()(dragNode, dropInfo);\n            }\n        }\n        return true;\n    };\n    /** @hidden @internal */\n    Node.prototype._removeChild = function (childNode) {\n        var pos = this._children.indexOf(childNode);\n        if (pos !== -1) {\n            this._children.splice(pos, 1);\n        }\n        this._dirty = true;\n        return pos;\n    };\n    /** @hidden @internal */\n    Node.prototype._addChild = function (childNode, pos) {\n        if (pos != null) {\n            this._children.splice(pos, 0, childNode);\n        }\n        else {\n            this._children.push(childNode);\n            pos = this._children.length - 1;\n        }\n        childNode._parent = this;\n        this._dirty = true;\n        return pos;\n    };\n    /** @hidden @internal */\n    Node.prototype._removeAll = function () {\n        this._children = [];\n        this._dirty = true;\n    };\n    /** @hidden @internal */\n    Node.prototype._styleWithPosition = function (style) {\n        if (style == null) {\n            style = {};\n        }\n        return this._rect.styleWithPosition(style);\n    };\n    /** @hidden @internal */\n    Node.prototype._getTempSize = function () {\n        return this._tempSize;\n    };\n    /** @hidden @internal */\n    Node.prototype._setTempSize = function (value) {\n        this._tempSize = value;\n    };\n    /** @hidden @internal */\n    Node.prototype.isEnableDivide = function () {\n        return true;\n    };\n    /** @hidden @internal */\n    Node.prototype._toAttributeString = function () {\n        return JSON.stringify(this._attributes, undefined, \"\\t\");\n    };\n    return Node;\n}());\nexports.default = Node;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Node.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Node = void 0;\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Node = /** @class */ (function () {\n    /** @hidden @internal */\n    function Node(model) {\n        /** @hidden @internal */\n        this._dirty = false;\n        /** @hidden @internal */\n        this._tempSize = 0;\n        this._model = model;\n        this._attributes = {};\n        this._children = [];\n        this._fixed = false;\n        this._rect = Rect_1.Rect.empty();\n        this._visible = false;\n        this._listeners = {};\n    }\n    Node.prototype.getId = function () {\n        var id = this._attributes.id;\n        if (id !== undefined) {\n            return id;\n        }\n        id = this._model._nextUniqueId();\n        this._setId(id);\n        return id;\n    };\n    Node.prototype.getModel = function () {\n        return this._model;\n    };\n    Node.prototype.getType = function () {\n        return this._attributes.type;\n    };\n    Node.prototype.getParent = function () {\n        return this._parent;\n    };\n    Node.prototype.getChildren = function () {\n        return this._children;\n    };\n    Node.prototype.getRect = function () {\n        return this._rect;\n    };\n    Node.prototype.isVisible = function () {\n        return this._visible;\n    };\n    Node.prototype.getOrientation = function () {\n        if (this._parent === undefined) {\n            return this._model.isRootOrientationVertical() ? Orientation_1.Orientation.VERT : Orientation_1.Orientation.HORZ;\n        }\n        else {\n            return Orientation_1.Orientation.flip(this._parent.getOrientation());\n        }\n    };\n    // event can be: resize, visibility, maximize (on tabset), close\n    Node.prototype.setEventListener = function (event, callback) {\n        this._listeners[event] = callback;\n    };\n    Node.prototype.removeEventListener = function (event) {\n        delete this._listeners[event];\n    };\n    /** @hidden @internal */\n    Node.prototype._setId = function (id) {\n        this._attributes.id = id;\n    };\n    /** @hidden @internal */\n    Node.prototype._fireEvent = function (event, params) {\n        // console.log(this._type, \" fireEvent \" + event + \" \" + JSON.stringify(params));\n        if (this._listeners[event] !== undefined) {\n            this._listeners[event](params);\n        }\n    };\n    /** @hidden @internal */\n    Node.prototype._getAttr = function (name) {\n        var val = this._attributes[name];\n        if (val === undefined) {\n            var modelName = this._getAttributeDefinitions().getModelName(name);\n            if (modelName !== undefined) {\n                val = this._model._getAttribute(modelName);\n            }\n        }\n        // console.log(name + \"=\" + val);\n        return val;\n    };\n    /** @hidden @internal */\n    Node.prototype._forEachNode = function (fn, level) {\n        fn(this, level);\n        level++;\n        this._children.forEach(function (node) {\n            node._forEachNode(fn, level);\n        });\n    };\n    /** @hidden @internal */\n    Node.prototype._setVisible = function (visible) {\n        if (visible !== this._visible) {\n            this._fireEvent(\"visibility\", { visible: visible });\n            this._visible = visible;\n        }\n    };\n    /** @hidden @internal */\n    Node.prototype._getDrawChildren = function () {\n        return this._children;\n    };\n    /** @hidden @internal */\n    Node.prototype._setParent = function (parent) {\n        this._parent = parent;\n    };\n    /** @hidden @internal */\n    Node.prototype._setRect = function (rect) {\n        this._rect = rect;\n    };\n    /** @hidden @internal */\n    Node.prototype._setWeight = function (weight) {\n        this._attributes.weight = weight;\n    };\n    /** @hidden @internal */\n    Node.prototype._setSelected = function (index) {\n        this._attributes.selected = index;\n    };\n    /** @hidden @internal */\n    Node.prototype._isFixed = function () {\n        return this._fixed;\n    };\n    /** @hidden @internal */\n    Node.prototype._layout = function (rect, metrics) {\n        this._rect = rect;\n    };\n    /** @hidden @internal */\n    Node.prototype._findDropTargetNode = function (dragNode, x, y) {\n        var rtn;\n        if (this._rect.contains(x, y)) {\n            rtn = this.canDrop(dragNode, x, y);\n            if (rtn === undefined) {\n                if (this._children.length !== 0) {\n                    for (var _i = 0, _a = this._children; _i < _a.length; _i++) {\n                        var child = _a[_i];\n                        rtn = child._findDropTargetNode(dragNode, x, y);\n                        if (rtn !== undefined) {\n                            break;\n                        }\n                    }\n                }\n            }\n        }\n        return rtn;\n    };\n    /** @hidden @internal */\n    Node.prototype.canDrop = function (dragNode, x, y) {\n        return undefined;\n    };\n    /** @hidden @internal */\n    Node.prototype._canDockInto = function (dragNode, dropInfo) {\n        if (dropInfo != null) {\n            if (dropInfo.location === DockLocation_1.DockLocation.CENTER && dropInfo.node.isEnableDrop() === false) {\n                return false;\n            }\n            // prevent named tabset docking into another tabset, since this would lose the header\n            if (dropInfo.location === DockLocation_1.DockLocation.CENTER && dragNode.getType() === \"tabset\" && dragNode.getName() !== undefined) {\n                return false;\n            }\n            if (dropInfo.location !== DockLocation_1.DockLocation.CENTER && dropInfo.node.isEnableDivide() === false) {\n                return false;\n            }\n            // finally check model callback to check if drop allowed\n            if (this._model._getOnAllowDrop()) {\n                return this._model._getOnAllowDrop()(dragNode, dropInfo);\n            }\n        }\n        return true;\n    };\n    /** @hidden @internal */\n    Node.prototype._removeChild = function (childNode) {\n        var pos = this._children.indexOf(childNode);\n        if (pos !== -1) {\n            this._children.splice(pos, 1);\n        }\n        this._dirty = true;\n        return pos;\n    };\n    /** @hidden @internal */\n    Node.prototype._addChild = function (childNode, pos) {\n        if (pos != null) {\n            this._children.splice(pos, 0, childNode);\n        }\n        else {\n            this._children.push(childNode);\n            pos = this._children.length - 1;\n        }\n        childNode._parent = this;\n        this._dirty = true;\n        return pos;\n    };\n    /** @hidden @internal */\n    Node.prototype._removeAll = function () {\n        this._children = [];\n        this._dirty = true;\n    };\n    /** @hidden @internal */\n    Node.prototype._styleWithPosition = function (style) {\n        if (style == null) {\n            style = {};\n        }\n        return this._rect.styleWithPosition(style);\n    };\n    /** @hidden @internal */\n    Node.prototype._getTempSize = function () {\n        return this._tempSize;\n    };\n    /** @hidden @internal */\n    Node.prototype._setTempSize = function (value) {\n        this._tempSize = value;\n    };\n    /** @hidden @internal */\n    Node.prototype.isEnableDivide = function () {\n        return true;\n    };\n    /** @hidden @internal */\n    Node.prototype._toAttributeString = function () {\n        return JSON.stringify(this._attributes, undefined, \"\\t\");\n    };\n    return Node;\n}());\nexports.Node = Node;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Node.ts?");
 
 /***/ }),
 
@@ -500,7 +536,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Do
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ./SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar RowNode = /** @class */ (function (_super) {\n    __extends(RowNode, _super);\n    /** @hidden @internal */\n    function RowNode(model, json) {\n        var _this = _super.call(this, model) || this;\n        _this._dirty = true;\n        _this._drawChildren = [];\n        _this.minHeight = 0;\n        _this.minWidth = 0;\n        RowNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    RowNode._fromJson = function (json, model) {\n        var newLayoutNode = new RowNode(model, json);\n        if (json.children != null) {\n            for (var _i = 0, _a = json.children; _i < _a.length; _i++) {\n                var jsonChild = _a[_i];\n                if (jsonChild.type === TabSetNode_1.default.TYPE) {\n                    var child = TabSetNode_1.default._fromJson(jsonChild, model);\n                    newLayoutNode._addChild(child);\n                }\n                else {\n                    var child = RowNode._fromJson(jsonChild, model);\n                    newLayoutNode._addChild(child);\n                }\n            }\n        }\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    RowNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", RowNode.TYPE, true).setType(Attribute_1.default.STRING).setFixed();\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"weight\", 100).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"width\", undefined).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"height\", undefined).setType(Attribute_1.default.NUMBER);\n        return attributeDefinitions;\n    };\n    RowNode.prototype.getWeight = function () {\n        return this._attributes.weight;\n    };\n    RowNode.prototype.getWidth = function () {\n        return this._getAttr(\"width\");\n    };\n    RowNode.prototype.getHeight = function () {\n        return this._getAttr(\"height\");\n    };\n    /** @hidden @internal */\n    RowNode.prototype._setWeight = function (weight) {\n        this._attributes.weight = weight;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._layout = function (rect, metrics) {\n        _super.prototype._layout.call(this, rect, metrics);\n        var pixelSize = this._rect._getSize(this.getOrientation());\n        var totalWeight = 0;\n        var fixedPixels = 0;\n        var prefPixels = 0;\n        var totalPrefWeight = 0;\n        var drawChildren = this._getDrawChildren();\n        for (var _i = 0, drawChildren_1 = drawChildren; _i < drawChildren_1.length; _i++) {\n            var child = drawChildren_1[_i];\n            var prefSize = child._getPrefSize(this.getOrientation());\n            if (child._isFixed()) {\n                if (prefSize !== undefined) {\n                    fixedPixels += prefSize;\n                }\n            }\n            else {\n                if (prefSize === undefined) {\n                    totalWeight += child.getWeight();\n                }\n                else {\n                    prefPixels += prefSize;\n                    totalPrefWeight += child.getWeight();\n                }\n            }\n        }\n        var resizePreferred = false;\n        var availablePixels = pixelSize - fixedPixels - prefPixels;\n        if (availablePixels < 0) {\n            availablePixels = pixelSize - fixedPixels;\n            resizePreferred = true;\n            totalWeight += totalPrefWeight;\n        }\n        // assign actual pixel sizes\n        var totalSizeGiven = 0;\n        var variableSize = 0;\n        for (var _a = 0, drawChildren_2 = drawChildren; _a < drawChildren_2.length; _a++) {\n            var child = drawChildren_2[_a];\n            var prefSize = child._getPrefSize(this.getOrientation());\n            if (child._isFixed()) {\n                if (prefSize !== undefined) {\n                    child._setTempSize(prefSize);\n                }\n            }\n            else {\n                if (prefSize == null || resizePreferred) {\n                    if (totalWeight === 0) {\n                        child._setTempSize(0);\n                    }\n                    else {\n                        var minSize = child.getMinSize(this.getOrientation());\n                        var size = Math.floor(availablePixels * (child.getWeight() / totalWeight));\n                        child._setTempSize(Math.max(minSize, size));\n                    }\n                    variableSize += child._getTempSize();\n                }\n                else {\n                    child._setTempSize(prefSize);\n                }\n            }\n            totalSizeGiven += child._getTempSize();\n        }\n        // adjust sizes to exactly fit\n        if (variableSize > 0) {\n            while (totalSizeGiven < pixelSize) {\n                for (var _b = 0, drawChildren_3 = drawChildren; _b < drawChildren_3.length; _b++) {\n                    var child = drawChildren_3[_b];\n                    if (!(child instanceof SplitterNode_1.default)) {\n                        var prefSize = child._getPrefSize(this.getOrientation());\n                        if (!child._isFixed() && (prefSize === undefined || resizePreferred) && totalSizeGiven < pixelSize) {\n                            child._setTempSize(child._getTempSize() + 1);\n                            totalSizeGiven++;\n                        }\n                    }\n                }\n            }\n            // decrease size using nodes not at there minimum\n            while (totalSizeGiven > pixelSize) {\n                var changed = false;\n                for (var _c = 0, drawChildren_4 = drawChildren; _c < drawChildren_4.length; _c++) {\n                    var child = drawChildren_4[_c];\n                    if (!(child instanceof SplitterNode_1.default)) {\n                        var minSize = child.getMinSize(this.getOrientation());\n                        var size = child._getTempSize();\n                        if (size > minSize && totalSizeGiven > pixelSize) {\n                            child._setTempSize(child._getTempSize() - 1);\n                            totalSizeGiven--;\n                            changed = true;\n                        }\n                    }\n                }\n                if (!changed) {\n                    // all children are at min values\n                    break;\n                }\n            }\n            // if still too big then simply reduce all nodes until fits\n            while (totalSizeGiven > pixelSize) {\n                var changed = false;\n                for (var _d = 0, drawChildren_5 = drawChildren; _d < drawChildren_5.length; _d++) {\n                    var child = drawChildren_5[_d];\n                    if (!(child instanceof SplitterNode_1.default)) {\n                        var size = child._getTempSize();\n                        if (size > 0 && totalSizeGiven > pixelSize) {\n                            child._setTempSize(child._getTempSize() - 1);\n                            totalSizeGiven--;\n                            changed = true;\n                        }\n                    }\n                }\n                if (!changed) {\n                    // all children are at 0 values\n                    break;\n                }\n            }\n        }\n        // layout children\n        var p = 0;\n        for (var _e = 0, drawChildren_6 = drawChildren; _e < drawChildren_6.length; _e++) {\n            var child = drawChildren_6[_e];\n            if (this.getOrientation() === Orientation_1.default.HORZ) {\n                child._layout(new Rect_1.default(this._rect.x + p, this._rect.y, child._getTempSize(), this._rect.height), metrics);\n            }\n            else {\n                child._layout(new Rect_1.default(this._rect.x, this._rect.y + p, this._rect.width, child._getTempSize()), metrics);\n            }\n            p += child._getTempSize();\n        }\n        return true;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getSplitterBounds = function (splitterNode, useMinSize) {\n        if (useMinSize === void 0) { useMinSize = false; }\n        var pBounds = [0, 0];\n        var drawChildren = this._getDrawChildren();\n        var p = drawChildren.indexOf(splitterNode);\n        var node1 = drawChildren[p - 1];\n        var node2 = drawChildren[p + 1];\n        if (this.getOrientation() === Orientation_1.default.HORZ) {\n            var minSize1 = useMinSize ? node1.getMinWidth() : 0;\n            var minSize2 = useMinSize ? node2.getMinWidth() : 0;\n            pBounds[0] = node1.getRect().x + minSize1;\n            pBounds[1] = node2.getRect().getRight() - splitterNode.getWidth() - minSize2;\n        }\n        else {\n            var minSize1 = useMinSize ? node1.getMinHeight() : 0;\n            var minSize2 = useMinSize ? node2.getMinHeight() : 0;\n            pBounds[0] = node1.getRect().y + minSize1;\n            pBounds[1] = node2.getRect().getBottom() - splitterNode.getHeight() - minSize2;\n        }\n        return pBounds;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._calculateSplit = function (splitter, splitterPos) {\n        var rtn;\n        var drawChildren = this._getDrawChildren();\n        var p = drawChildren.indexOf(splitter);\n        var pBounds = this._getSplitterBounds(splitter);\n        var weightedLength = drawChildren[p - 1].getWeight() + drawChildren[p + 1].getWeight();\n        var pixelWidth1 = Math.max(0, splitterPos - pBounds[0]);\n        var pixelWidth2 = Math.max(0, pBounds[1] - splitterPos);\n        if (pixelWidth1 + pixelWidth2 > 0) {\n            var weight1 = (pixelWidth1 * weightedLength) / (pixelWidth1 + pixelWidth2);\n            var weight2 = (pixelWidth2 * weightedLength) / (pixelWidth1 + pixelWidth2);\n            rtn = {\n                node1Id: drawChildren[p - 1].getId(),\n                weight1: weight1,\n                pixelWidth1: pixelWidth1,\n                node2Id: drawChildren[p + 1].getId(),\n                weight2: weight2,\n                pixelWidth2: pixelWidth2,\n            };\n        }\n        return rtn;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getDrawChildren = function () {\n        if (this._dirty) {\n            this._drawChildren = [];\n            for (var i = 0; i < this._children.length; i++) {\n                var child = this._children[i];\n                if (i !== 0) {\n                    var newSplitter = new SplitterNode_1.default(this._model);\n                    newSplitter._setParent(this);\n                    this._drawChildren.push(newSplitter);\n                }\n                this._drawChildren.push(child);\n            }\n            this._dirty = false;\n        }\n        return this._drawChildren;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinSize = function (orientation) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinWidth = function () {\n        return this.minWidth;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinHeight = function () {\n        return this.minHeight;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.calcMinSize = function () {\n        var _this = this;\n        this.minHeight = 0;\n        this.minWidth = 0;\n        var first = true;\n        this._children.forEach(function (child) {\n            var c = child;\n            if (c instanceof RowNode) {\n                c.calcMinSize();\n            }\n            if (_this.getOrientation() === Orientation_1.default.VERT) {\n                _this.minHeight += c.getMinHeight();\n                if (!first) {\n                    _this.minHeight += _this._model.getSplitterSize();\n                }\n                _this.minWidth = Math.max(_this.minWidth, c.getMinWidth());\n            }\n            else {\n                _this.minWidth += c.getMinWidth();\n                if (!first) {\n                    _this.minWidth += _this._model.getSplitterSize();\n                }\n                _this.minHeight = Math.max(_this.minHeight, c.getMinHeight());\n            }\n            first = false;\n        });\n    };\n    /** @hidden @internal */\n    RowNode.prototype._tidy = function () {\n        var i = 0;\n        while (i < this._children.length) {\n            var child = this._children[i];\n            if (child instanceof RowNode) {\n                child._tidy();\n                var childChildren = child.getChildren();\n                if (childChildren.length === 0) {\n                    this._removeChild(child);\n                }\n                else if (childChildren.length === 1) {\n                    // hoist child/children up to this level\n                    var subchild = childChildren[0];\n                    this._removeChild(child);\n                    if (subchild instanceof RowNode) {\n                        var subChildrenTotal = 0;\n                        var subChildChildren = subchild.getChildren();\n                        for (var _i = 0, subChildChildren_1 = subChildChildren; _i < subChildChildren_1.length; _i++) {\n                            var ssc = subChildChildren_1[_i];\n                            var subsubChild = ssc;\n                            subChildrenTotal += subsubChild.getWeight();\n                        }\n                        for (var j = 0; j < subChildChildren.length; j++) {\n                            var subsubChild = subChildChildren[j];\n                            subsubChild._setWeight((child.getWeight() * subsubChild.getWeight()) / subChildrenTotal);\n                            this._addChild(subsubChild, i + j);\n                        }\n                    }\n                    else {\n                        subchild._setWeight(child.getWeight());\n                        this._addChild(subchild, i);\n                    }\n                }\n                else {\n                    i++;\n                }\n            }\n            else if (child instanceof TabSetNode_1.default && child.getChildren().length === 0) {\n                if (child.isEnableDeleteWhenEmpty()) {\n                    this._removeChild(child);\n                    if (child === this._model.getMaximizedTabset()) {\n                        this._model._setMaximizedTabset(undefined);\n                    }\n                }\n                else {\n                    i++;\n                }\n            }\n            else {\n                i++;\n            }\n        }\n        // add tabset into empty root\n        if (this === this._model.getRoot() && this._children.length === 0) {\n            var callback = this._model._getOnCreateTabSet();\n            var attrs = callback ? callback() : {};\n            attrs = __assign(__assign({}, attrs), { selected: -1 });\n            var child = new TabSetNode_1.default(this._model, attrs);\n            this._model._setActiveTabset(child);\n            this._addChild(child);\n        }\n    };\n    /** @hidden @internal */\n    RowNode.prototype.canDrop = function (dragNode, x, y) {\n        var yy = y - this._rect.y;\n        var xx = x - this._rect.x;\n        var w = this._rect.width;\n        var h = this._rect.height;\n        var margin = 10; // height of edge rect\n        var half = 50; // half width of edge rect\n        var dropInfo;\n        if (this._model.isEnableEdgeDock() && this._parent === undefined) {\n            // _root row\n            if (x < this._rect.x + margin && yy > h / 2 - half && yy < h / 2 + half) {\n                var dockLocation = DockLocation_1.default.LEFT;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.width = outlineRect.width / 2;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            else if (x > this._rect.getRight() - margin && yy > h / 2 - half && yy < h / 2 + half) {\n                var dockLocation = DockLocation_1.default.RIGHT;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.width = outlineRect.width / 2;\n                outlineRect.x += outlineRect.width;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            else if (y < this._rect.y + margin && xx > w / 2 - half && xx < w / 2 + half) {\n                var dockLocation = DockLocation_1.default.TOP;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.height = outlineRect.height / 2;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            else if (y > this._rect.getBottom() - margin && xx > w / 2 - half && xx < w / 2 + half) {\n                var dockLocation = DockLocation_1.default.BOTTOM;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.height = outlineRect.height / 2;\n                outlineRect.y += outlineRect.height;\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            if (dropInfo !== undefined) {\n                if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                    return undefined;\n                }\n            }\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.drop = function (dragNode, location, index) {\n        var dockLocation = location;\n        var parent = dragNode.getParent();\n        if (parent) {\n            parent._removeChild(dragNode);\n        }\n        if (parent !== undefined && parent.getType() === TabSetNode_1.default.TYPE) {\n            parent._setSelected(0);\n        }\n        if (parent !== undefined && parent.getType() === BorderNode_1.default.TYPE) {\n            parent._setSelected(-1);\n        }\n        var tabSet;\n        if (dragNode instanceof TabSetNode_1.default) {\n            tabSet = dragNode;\n        }\n        else {\n            var callback = this._model._getOnCreateTabSet();\n            tabSet = new TabSetNode_1.default(this._model, callback ? callback(dragNode) : {});\n            tabSet._addChild(dragNode);\n        }\n        var size = this._children.reduce(function (sum, child) {\n            return sum + child.getWeight();\n        }, 0);\n        if (size === 0) {\n            size = 100;\n        }\n        tabSet._setWeight(size / 3);\n        var horz = !this._model.isRootOrientationVertical();\n        if (horz && dockLocation === DockLocation_1.default.LEFT || !horz && dockLocation === DockLocation_1.default.TOP) {\n            this._addChild(tabSet, 0);\n        }\n        else if (horz && dockLocation === DockLocation_1.default.RIGHT || !horz && dockLocation === DockLocation_1.default.BOTTOM) {\n            this._addChild(tabSet);\n        }\n        else if (horz && dockLocation === DockLocation_1.default.TOP || !horz && dockLocation === DockLocation_1.default.LEFT) {\n            var vrow = new RowNode(this._model, {});\n            var hrow_1 = new RowNode(this._model, {});\n            hrow_1._setWeight(75);\n            tabSet._setWeight(25);\n            this._children.forEach(function (child) {\n                hrow_1._addChild(child);\n            });\n            this._removeAll();\n            vrow._addChild(tabSet);\n            vrow._addChild(hrow_1);\n            this._addChild(vrow);\n        }\n        else if (horz && dockLocation === DockLocation_1.default.BOTTOM || !horz && dockLocation === DockLocation_1.default.RIGHT) {\n            var vrow = new RowNode(this._model, {});\n            var hrow_2 = new RowNode(this._model, {});\n            hrow_2._setWeight(75);\n            tabSet._setWeight(25);\n            this._children.forEach(function (child) {\n                hrow_2._addChild(child);\n            });\n            this._removeAll();\n            vrow._addChild(hrow_2);\n            vrow._addChild(tabSet);\n            this._addChild(vrow);\n        }\n        this._model._setActiveTabset(tabSet);\n        this._model._tidy();\n    };\n    RowNode.prototype.toJson = function () {\n        var json = {};\n        RowNode._attributeDefinitions.toJson(json, this._attributes);\n        json.children = [];\n        this._children.forEach(function (child) {\n            json.children.push(child.toJson());\n        });\n        return json;\n    };\n    RowNode.prototype.isEnableDrop = function () {\n        return true;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getPrefSize = function (orientation) {\n        var prefSize = this.getWidth();\n        if (orientation === Orientation_1.default.VERT) {\n            prefSize = this.getHeight();\n        }\n        return prefSize;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getAttributeDefinitions = function () {\n        return RowNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._updateAttrs = function (json) {\n        RowNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    RowNode.getAttributeDefinitions = function () {\n        return RowNode._attributeDefinitions;\n    };\n    RowNode.TYPE = \"row\";\n    /** @hidden @internal */\n    RowNode._attributeDefinitions = RowNode._createAttributeDefinitions();\n    return RowNode;\n}(Node_1.default));\nexports.default = RowNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/RowNode.ts?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.RowNode = void 0;\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ./SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar RowNode = /** @class */ (function (_super) {\n    __extends(RowNode, _super);\n    /** @hidden @internal */\n    function RowNode(model, json) {\n        var _this = _super.call(this, model) || this;\n        _this._dirty = true;\n        _this._drawChildren = [];\n        _this.minHeight = 0;\n        _this.minWidth = 0;\n        RowNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    RowNode._fromJson = function (json, model) {\n        var newLayoutNode = new RowNode(model, json);\n        if (json.children != null) {\n            for (var _i = 0, _a = json.children; _i < _a.length; _i++) {\n                var jsonChild = _a[_i];\n                if (jsonChild.type === TabSetNode_1.TabSetNode.TYPE) {\n                    var child = TabSetNode_1.TabSetNode._fromJson(jsonChild, model);\n                    newLayoutNode._addChild(child);\n                }\n                else {\n                    var child = RowNode._fromJson(jsonChild, model);\n                    newLayoutNode._addChild(child);\n                }\n            }\n        }\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    RowNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.AttributeDefinitions();\n        attributeDefinitions.add(\"type\", RowNode.TYPE, true).setType(Attribute_1.Attribute.STRING).setFixed();\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"weight\", 100).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"width\", undefined).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"height\", undefined).setType(Attribute_1.Attribute.NUMBER);\n        return attributeDefinitions;\n    };\n    RowNode.prototype.getWeight = function () {\n        return this._attributes.weight;\n    };\n    RowNode.prototype.getWidth = function () {\n        return this._getAttr(\"width\");\n    };\n    RowNode.prototype.getHeight = function () {\n        return this._getAttr(\"height\");\n    };\n    /** @hidden @internal */\n    RowNode.prototype._setWeight = function (weight) {\n        this._attributes.weight = weight;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._layout = function (rect, metrics) {\n        _super.prototype._layout.call(this, rect, metrics);\n        var pixelSize = this._rect._getSize(this.getOrientation());\n        var totalWeight = 0;\n        var fixedPixels = 0;\n        var prefPixels = 0;\n        var totalPrefWeight = 0;\n        var drawChildren = this._getDrawChildren();\n        for (var _i = 0, drawChildren_1 = drawChildren; _i < drawChildren_1.length; _i++) {\n            var child = drawChildren_1[_i];\n            var prefSize = child._getPrefSize(this.getOrientation());\n            if (child._isFixed()) {\n                if (prefSize !== undefined) {\n                    fixedPixels += prefSize;\n                }\n            }\n            else {\n                if (prefSize === undefined) {\n                    totalWeight += child.getWeight();\n                }\n                else {\n                    prefPixels += prefSize;\n                    totalPrefWeight += child.getWeight();\n                }\n            }\n        }\n        var resizePreferred = false;\n        var availablePixels = pixelSize - fixedPixels - prefPixels;\n        if (availablePixels < 0) {\n            availablePixels = pixelSize - fixedPixels;\n            resizePreferred = true;\n            totalWeight += totalPrefWeight;\n        }\n        // assign actual pixel sizes\n        var totalSizeGiven = 0;\n        var variableSize = 0;\n        for (var _a = 0, drawChildren_2 = drawChildren; _a < drawChildren_2.length; _a++) {\n            var child = drawChildren_2[_a];\n            var prefSize = child._getPrefSize(this.getOrientation());\n            if (child._isFixed()) {\n                if (prefSize !== undefined) {\n                    child._setTempSize(prefSize);\n                }\n            }\n            else {\n                if (prefSize == null || resizePreferred) {\n                    if (totalWeight === 0) {\n                        child._setTempSize(0);\n                    }\n                    else {\n                        var minSize = child.getMinSize(this.getOrientation());\n                        var size = Math.floor(availablePixels * (child.getWeight() / totalWeight));\n                        child._setTempSize(Math.max(minSize, size));\n                    }\n                    variableSize += child._getTempSize();\n                }\n                else {\n                    child._setTempSize(prefSize);\n                }\n            }\n            totalSizeGiven += child._getTempSize();\n        }\n        // adjust sizes to exactly fit\n        if (variableSize > 0) {\n            while (totalSizeGiven < pixelSize) {\n                for (var _b = 0, drawChildren_3 = drawChildren; _b < drawChildren_3.length; _b++) {\n                    var child = drawChildren_3[_b];\n                    if (!(child instanceof SplitterNode_1.SplitterNode)) {\n                        var prefSize = child._getPrefSize(this.getOrientation());\n                        if (!child._isFixed() && (prefSize === undefined || resizePreferred) && totalSizeGiven < pixelSize) {\n                            child._setTempSize(child._getTempSize() + 1);\n                            totalSizeGiven++;\n                        }\n                    }\n                }\n            }\n            // decrease size using nodes not at there minimum\n            while (totalSizeGiven > pixelSize) {\n                var changed = false;\n                for (var _c = 0, drawChildren_4 = drawChildren; _c < drawChildren_4.length; _c++) {\n                    var child = drawChildren_4[_c];\n                    if (!(child instanceof SplitterNode_1.SplitterNode)) {\n                        var minSize = child.getMinSize(this.getOrientation());\n                        var size = child._getTempSize();\n                        if (size > minSize && totalSizeGiven > pixelSize) {\n                            child._setTempSize(child._getTempSize() - 1);\n                            totalSizeGiven--;\n                            changed = true;\n                        }\n                    }\n                }\n                if (!changed) {\n                    // all children are at min values\n                    break;\n                }\n            }\n            // if still too big then simply reduce all nodes until fits\n            while (totalSizeGiven > pixelSize) {\n                var changed = false;\n                for (var _d = 0, drawChildren_5 = drawChildren; _d < drawChildren_5.length; _d++) {\n                    var child = drawChildren_5[_d];\n                    if (!(child instanceof SplitterNode_1.SplitterNode)) {\n                        var size = child._getTempSize();\n                        if (size > 0 && totalSizeGiven > pixelSize) {\n                            child._setTempSize(child._getTempSize() - 1);\n                            totalSizeGiven--;\n                            changed = true;\n                        }\n                    }\n                }\n                if (!changed) {\n                    // all children are at 0 values\n                    break;\n                }\n            }\n        }\n        // layout children\n        var p = 0;\n        for (var _e = 0, drawChildren_6 = drawChildren; _e < drawChildren_6.length; _e++) {\n            var child = drawChildren_6[_e];\n            if (this.getOrientation() === Orientation_1.Orientation.HORZ) {\n                child._layout(new Rect_1.Rect(this._rect.x + p, this._rect.y, child._getTempSize(), this._rect.height), metrics);\n            }\n            else {\n                child._layout(new Rect_1.Rect(this._rect.x, this._rect.y + p, this._rect.width, child._getTempSize()), metrics);\n            }\n            p += child._getTempSize();\n        }\n        return true;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getSplitterBounds = function (splitterNode, useMinSize) {\n        if (useMinSize === void 0) { useMinSize = false; }\n        var pBounds = [0, 0];\n        var drawChildren = this._getDrawChildren();\n        var p = drawChildren.indexOf(splitterNode);\n        var node1 = drawChildren[p - 1];\n        var node2 = drawChildren[p + 1];\n        if (this.getOrientation() === Orientation_1.Orientation.HORZ) {\n            var minSize1 = useMinSize ? node1.getMinWidth() : 0;\n            var minSize2 = useMinSize ? node2.getMinWidth() : 0;\n            pBounds[0] = node1.getRect().x + minSize1;\n            pBounds[1] = node2.getRect().getRight() - splitterNode.getWidth() - minSize2;\n        }\n        else {\n            var minSize1 = useMinSize ? node1.getMinHeight() : 0;\n            var minSize2 = useMinSize ? node2.getMinHeight() : 0;\n            pBounds[0] = node1.getRect().y + minSize1;\n            pBounds[1] = node2.getRect().getBottom() - splitterNode.getHeight() - minSize2;\n        }\n        return pBounds;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._calculateSplit = function (splitter, splitterPos) {\n        var rtn;\n        var drawChildren = this._getDrawChildren();\n        var p = drawChildren.indexOf(splitter);\n        var pBounds = this._getSplitterBounds(splitter);\n        var weightedLength = drawChildren[p - 1].getWeight() + drawChildren[p + 1].getWeight();\n        var pixelWidth1 = Math.max(0, splitterPos - pBounds[0]);\n        var pixelWidth2 = Math.max(0, pBounds[1] - splitterPos);\n        if (pixelWidth1 + pixelWidth2 > 0) {\n            var weight1 = (pixelWidth1 * weightedLength) / (pixelWidth1 + pixelWidth2);\n            var weight2 = (pixelWidth2 * weightedLength) / (pixelWidth1 + pixelWidth2);\n            rtn = {\n                node1Id: drawChildren[p - 1].getId(),\n                weight1: weight1,\n                pixelWidth1: pixelWidth1,\n                node2Id: drawChildren[p + 1].getId(),\n                weight2: weight2,\n                pixelWidth2: pixelWidth2,\n            };\n        }\n        return rtn;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getDrawChildren = function () {\n        if (this._dirty) {\n            this._drawChildren = [];\n            for (var i = 0; i < this._children.length; i++) {\n                var child = this._children[i];\n                if (i !== 0) {\n                    var newSplitter = new SplitterNode_1.SplitterNode(this._model);\n                    newSplitter._setParent(this);\n                    this._drawChildren.push(newSplitter);\n                }\n                this._drawChildren.push(child);\n            }\n            this._dirty = false;\n        }\n        return this._drawChildren;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinSize = function (orientation) {\n        if (orientation === Orientation_1.Orientation.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinWidth = function () {\n        return this.minWidth;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.getMinHeight = function () {\n        return this.minHeight;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.calcMinSize = function () {\n        var _this = this;\n        this.minHeight = 0;\n        this.minWidth = 0;\n        var first = true;\n        this._children.forEach(function (child) {\n            var c = child;\n            if (c instanceof RowNode) {\n                c.calcMinSize();\n            }\n            if (_this.getOrientation() === Orientation_1.Orientation.VERT) {\n                _this.minHeight += c.getMinHeight();\n                if (!first) {\n                    _this.minHeight += _this._model.getSplitterSize();\n                }\n                _this.minWidth = Math.max(_this.minWidth, c.getMinWidth());\n            }\n            else {\n                _this.minWidth += c.getMinWidth();\n                if (!first) {\n                    _this.minWidth += _this._model.getSplitterSize();\n                }\n                _this.minHeight = Math.max(_this.minHeight, c.getMinHeight());\n            }\n            first = false;\n        });\n    };\n    /** @hidden @internal */\n    RowNode.prototype._tidy = function () {\n        var i = 0;\n        while (i < this._children.length) {\n            var child = this._children[i];\n            if (child instanceof RowNode) {\n                child._tidy();\n                var childChildren = child.getChildren();\n                if (childChildren.length === 0) {\n                    this._removeChild(child);\n                }\n                else if (childChildren.length === 1) {\n                    // hoist child/children up to this level\n                    var subchild = childChildren[0];\n                    this._removeChild(child);\n                    if (subchild instanceof RowNode) {\n                        var subChildrenTotal = 0;\n                        var subChildChildren = subchild.getChildren();\n                        for (var _i = 0, subChildChildren_1 = subChildChildren; _i < subChildChildren_1.length; _i++) {\n                            var ssc = subChildChildren_1[_i];\n                            var subsubChild = ssc;\n                            subChildrenTotal += subsubChild.getWeight();\n                        }\n                        for (var j = 0; j < subChildChildren.length; j++) {\n                            var subsubChild = subChildChildren[j];\n                            subsubChild._setWeight((child.getWeight() * subsubChild.getWeight()) / subChildrenTotal);\n                            this._addChild(subsubChild, i + j);\n                        }\n                    }\n                    else {\n                        subchild._setWeight(child.getWeight());\n                        this._addChild(subchild, i);\n                    }\n                }\n                else {\n                    i++;\n                }\n            }\n            else if (child instanceof TabSetNode_1.TabSetNode && child.getChildren().length === 0) {\n                if (child.isEnableDeleteWhenEmpty()) {\n                    this._removeChild(child);\n                    if (child === this._model.getMaximizedTabset()) {\n                        this._model._setMaximizedTabset(undefined);\n                    }\n                }\n                else {\n                    i++;\n                }\n            }\n            else {\n                i++;\n            }\n        }\n        // add tabset into empty root\n        if (this === this._model.getRoot() && this._children.length === 0) {\n            var callback = this._model._getOnCreateTabSet();\n            var attrs = callback ? callback() : {};\n            attrs = __assign(__assign({}, attrs), { selected: -1 });\n            var child = new TabSetNode_1.TabSetNode(this._model, attrs);\n            this._model._setActiveTabset(child);\n            this._addChild(child);\n        }\n    };\n    /** @hidden @internal */\n    RowNode.prototype.canDrop = function (dragNode, x, y) {\n        var yy = y - this._rect.y;\n        var xx = x - this._rect.x;\n        var w = this._rect.width;\n        var h = this._rect.height;\n        var margin = 10; // height of edge rect\n        var half = 50; // half width of edge rect\n        var dropInfo;\n        if (this._model.isEnableEdgeDock() && this._parent === undefined) {\n            // _root row\n            if (x < this._rect.x + margin && yy > h / 2 - half && yy < h / 2 + half) {\n                var dockLocation = DockLocation_1.DockLocation.LEFT;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.width = outlineRect.width / 2;\n                dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            else if (x > this._rect.getRight() - margin && yy > h / 2 - half && yy < h / 2 + half) {\n                var dockLocation = DockLocation_1.DockLocation.RIGHT;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.width = outlineRect.width / 2;\n                outlineRect.x += outlineRect.width;\n                dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            else if (y < this._rect.y + margin && xx > w / 2 - half && xx < w / 2 + half) {\n                var dockLocation = DockLocation_1.DockLocation.TOP;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.height = outlineRect.height / 2;\n                dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            else if (y > this._rect.getBottom() - margin && xx > w / 2 - half && xx < w / 2 + half) {\n                var dockLocation = DockLocation_1.DockLocation.BOTTOM;\n                var outlineRect = dockLocation.getDockRect(this._rect);\n                outlineRect.height = outlineRect.height / 2;\n                outlineRect.y += outlineRect.height;\n                dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);\n            }\n            if (dropInfo !== undefined) {\n                if (!dragNode._canDockInto(dragNode, dropInfo)) {\n                    return undefined;\n                }\n            }\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    RowNode.prototype.drop = function (dragNode, location, index) {\n        var dockLocation = location;\n        var parent = dragNode.getParent();\n        if (parent) {\n            parent._removeChild(dragNode);\n        }\n        if (parent !== undefined && parent.getType() === TabSetNode_1.TabSetNode.TYPE) {\n            parent._setSelected(0);\n        }\n        if (parent !== undefined && parent.getType() === BorderNode_1.BorderNode.TYPE) {\n            parent._setSelected(-1);\n        }\n        var tabSet;\n        if (dragNode instanceof TabSetNode_1.TabSetNode) {\n            tabSet = dragNode;\n        }\n        else {\n            var callback = this._model._getOnCreateTabSet();\n            tabSet = new TabSetNode_1.TabSetNode(this._model, callback ? callback(dragNode) : {});\n            tabSet._addChild(dragNode);\n        }\n        var size = this._children.reduce(function (sum, child) {\n            return sum + child.getWeight();\n        }, 0);\n        if (size === 0) {\n            size = 100;\n        }\n        tabSet._setWeight(size / 3);\n        var horz = !this._model.isRootOrientationVertical();\n        if (horz && dockLocation === DockLocation_1.DockLocation.LEFT || !horz && dockLocation === DockLocation_1.DockLocation.TOP) {\n            this._addChild(tabSet, 0);\n        }\n        else if (horz && dockLocation === DockLocation_1.DockLocation.RIGHT || !horz && dockLocation === DockLocation_1.DockLocation.BOTTOM) {\n            this._addChild(tabSet);\n        }\n        else if (horz && dockLocation === DockLocation_1.DockLocation.TOP || !horz && dockLocation === DockLocation_1.DockLocation.LEFT) {\n            var vrow = new RowNode(this._model, {});\n            var hrow_1 = new RowNode(this._model, {});\n            hrow_1._setWeight(75);\n            tabSet._setWeight(25);\n            this._children.forEach(function (child) {\n                hrow_1._addChild(child);\n            });\n            this._removeAll();\n            vrow._addChild(tabSet);\n            vrow._addChild(hrow_1);\n            this._addChild(vrow);\n        }\n        else if (horz && dockLocation === DockLocation_1.DockLocation.BOTTOM || !horz && dockLocation === DockLocation_1.DockLocation.RIGHT) {\n            var vrow = new RowNode(this._model, {});\n            var hrow_2 = new RowNode(this._model, {});\n            hrow_2._setWeight(75);\n            tabSet._setWeight(25);\n            this._children.forEach(function (child) {\n                hrow_2._addChild(child);\n            });\n            this._removeAll();\n            vrow._addChild(hrow_2);\n            vrow._addChild(tabSet);\n            this._addChild(vrow);\n        }\n        this._model._setActiveTabset(tabSet);\n        this._model._tidy();\n    };\n    RowNode.prototype.toJson = function () {\n        var json = {};\n        RowNode._attributeDefinitions.toJson(json, this._attributes);\n        json.children = [];\n        this._children.forEach(function (child) {\n            json.children.push(child.toJson());\n        });\n        return json;\n    };\n    RowNode.prototype.isEnableDrop = function () {\n        return true;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getPrefSize = function (orientation) {\n        var prefSize = this.getWidth();\n        if (orientation === Orientation_1.Orientation.VERT) {\n            prefSize = this.getHeight();\n        }\n        return prefSize;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._getAttributeDefinitions = function () {\n        return RowNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    RowNode.prototype._updateAttrs = function (json) {\n        RowNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    RowNode.getAttributeDefinitions = function () {\n        return RowNode._attributeDefinitions;\n    };\n    RowNode.TYPE = \"row\";\n    /** @hidden @internal */\n    RowNode._attributeDefinitions = RowNode._createAttributeDefinitions();\n    return RowNode;\n}(Node_1.Node));\nexports.RowNode = RowNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/RowNode.ts?");
 
 /***/ }),
 
@@ -512,7 +548,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode = /** @class */ (function (_super) {\n    __extends(SplitterNode, _super);\n    /** @hidden @internal */\n    function SplitterNode(model) {\n        var _this = _super.call(this, model) || this;\n        _this._fixed = true;\n        _this._attributes.type = SplitterNode.TYPE;\n        model._addNode(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    SplitterNode.prototype.getWidth = function () {\n        return this._model.getSplitterSize();\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype.getMinWidth = function () {\n        if (this.getOrientation() === Orientation_1.default.VERT) {\n            return this._model.getSplitterSize();\n        }\n        else {\n            return 0;\n        }\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype.getHeight = function () {\n        return this._model.getSplitterSize();\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype.getMinHeight = function () {\n        if (this.getOrientation() === Orientation_1.default.HORZ) {\n            return this._model.getSplitterSize();\n        }\n        else {\n            return 0;\n        }\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype.getMinSize = function (orientation) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype.getWeight = function () {\n        return 0;\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype._setWeight = function (value) { };\n    /** @hidden @internal */\n    SplitterNode.prototype._getPrefSize = function (orientation) {\n        return this._model.getSplitterSize();\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype._updateAttrs = function (json) { };\n    /** @hidden @internal */\n    SplitterNode.prototype._getAttributeDefinitions = function () {\n        return new AttributeDefinitions_1.default();\n    };\n    SplitterNode.prototype.toJson = function () {\n        return undefined;\n    };\n    SplitterNode.TYPE = \"splitter\";\n    return SplitterNode;\n}(Node_1.default));\nexports.default = SplitterNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/SplitterNode.ts?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.SplitterNode = void 0;\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar SplitterNode = /** @class */ (function (_super) {\n    __extends(SplitterNode, _super);\n    /** @hidden @internal */\n    function SplitterNode(model) {\n        var _this = _super.call(this, model) || this;\n        _this._fixed = true;\n        _this._attributes.type = SplitterNode.TYPE;\n        model._addNode(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    SplitterNode.prototype.getWidth = function () {\n        return this._model.getSplitterSize();\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype.getMinWidth = function () {\n        if (this.getOrientation() === Orientation_1.Orientation.VERT) {\n            return this._model.getSplitterSize();\n        }\n        else {\n            return 0;\n        }\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype.getHeight = function () {\n        return this._model.getSplitterSize();\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype.getMinHeight = function () {\n        if (this.getOrientation() === Orientation_1.Orientation.HORZ) {\n            return this._model.getSplitterSize();\n        }\n        else {\n            return 0;\n        }\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype.getMinSize = function (orientation) {\n        if (orientation === Orientation_1.Orientation.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype.getWeight = function () {\n        return 0;\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype._setWeight = function (value) { };\n    /** @hidden @internal */\n    SplitterNode.prototype._getPrefSize = function (orientation) {\n        return this._model.getSplitterSize();\n    };\n    /** @hidden @internal */\n    SplitterNode.prototype._updateAttrs = function (json) { };\n    /** @hidden @internal */\n    SplitterNode.prototype._getAttributeDefinitions = function () {\n        return new AttributeDefinitions_1.AttributeDefinitions();\n    };\n    SplitterNode.prototype.toJson = function () {\n        return undefined;\n    };\n    SplitterNode.TYPE = \"splitter\";\n    return SplitterNode;\n}(Node_1.Node));\nexports.SplitterNode = SplitterNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/SplitterNode.ts?");
 
 /***/ }),
 
@@ -524,7 +560,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar TabNode = /** @class */ (function (_super) {\n    __extends(TabNode, _super);\n    /** @hidden @internal */\n    function TabNode(model, json, addToModel) {\n        if (addToModel === void 0) { addToModel = true; }\n        var _this = _super.call(this, model) || this;\n        _this._extra = {}; // extra data added to node not saved in json\n        TabNode._attributeDefinitions.fromJson(json, _this._attributes);\n        if (addToModel === true) {\n            model._addNode(_this);\n        }\n        return _this;\n    }\n    /** @hidden @internal */\n    TabNode._fromJson = function (json, model, addToModel) {\n        if (addToModel === void 0) { addToModel = true; }\n        var newLayoutNode = new TabNode(model, json, addToModel);\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    TabNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", TabNode.TYPE, true).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"name\", \"[Unnamed Tab]\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"helpText\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"component\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.add(\"floating\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableClose\", \"tabEnableClose\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"closeType\", \"tabCloseType\").setType(\"ICloseType\");\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabEnableDrag\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableRename\", \"tabEnableRename\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"className\", \"tabClassName\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.addInherited(\"icon\", \"tabIcon\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.addInherited(\"enableRenderOnDemand\", \"tabEnableRenderOnDemand\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableFloat\", \"tabEnableFloat\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"borderWidth\", \"tabBorderWidth\").setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.addInherited(\"borderHeight\", \"tabBorderHeight\").setType(Attribute_1.default.NUMBER);\n        return attributeDefinitions;\n    };\n    TabNode.prototype.getWindow = function () {\n        return this._window;\n    };\n    TabNode.prototype.getTabRect = function () {\n        return this._tabRect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setTabRect = function (rect) {\n        this._tabRect = rect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setRenderedName = function (name) {\n        this._renderedName = name;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._getRenderedName = function () {\n        return this._renderedName;\n    };\n    TabNode.prototype.getName = function () {\n        return this._getAttr(\"name\");\n    };\n    TabNode.prototype.getHelpText = function () {\n        return this._getAttr(\"helpText\");\n    };\n    TabNode.prototype.getComponent = function () {\n        return this._getAttr(\"component\");\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    TabNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    /**\n     * Returns an object that can be used to store transient node specific data that will\n     * NOT be saved in the json.\n     */\n    TabNode.prototype.getExtraData = function () {\n        return this._extra;\n    };\n    TabNode.prototype.isFloating = function () {\n        return this._getAttr(\"floating\");\n    };\n    TabNode.prototype.getIcon = function () {\n        return this._getAttr(\"icon\");\n    };\n    TabNode.prototype.isEnableClose = function () {\n        return this._getAttr(\"enableClose\");\n    };\n    TabNode.prototype.getCloseType = function () {\n        return this._getAttr(\"closeType\");\n    };\n    TabNode.prototype.isEnableFloat = function () {\n        return this._getAttr(\"enableFloat\");\n    };\n    TabNode.prototype.isEnableDrag = function () {\n        return this._getAttr(\"enableDrag\");\n    };\n    TabNode.prototype.isEnableRename = function () {\n        return this._getAttr(\"enableRename\");\n    };\n    TabNode.prototype.getClassName = function () {\n        return this._getAttr(\"className\");\n    };\n    TabNode.prototype.isEnableRenderOnDemand = function () {\n        return this._getAttr(\"enableRenderOnDemand\");\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setName = function (name) {\n        this._attributes.name = name;\n        if (this._window && this._window.document) {\n            this._window.document.title = name;\n        }\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setFloating = function (float) {\n        this._attributes.floating = float;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._layout = function (rect, metrics) {\n        if (!rect.equals(this._rect)) {\n            this._fireEvent(\"resize\", { rect: rect });\n        }\n        this._rect = rect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._delete = function () {\n        this._parent._remove(this);\n        this._fireEvent(\"close\", {});\n    };\n    TabNode.prototype.toJson = function () {\n        var json = {};\n        TabNode._attributeDefinitions.toJson(json, this._attributes);\n        return json;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._updateAttrs = function (json) {\n        TabNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    TabNode.prototype._getAttributeDefinitions = function () {\n        return TabNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setWindow = function (window) {\n        this._window = window;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setBorderWidth = function (width) {\n        this._attributes.borderWidth = width;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setBorderHeight = function (height) {\n        this._attributes.borderHeight = height;\n    };\n    /** @hidden @internal */\n    TabNode.getAttributeDefinitions = function () {\n        return TabNode._attributeDefinitions;\n    };\n    TabNode.TYPE = \"tab\";\n    /** @hidden @internal */\n    TabNode._attributeDefinitions = TabNode._createAttributeDefinitions();\n    return TabNode;\n}(Node_1.default));\nexports.default = TabNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabNode.ts?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabNode = void 0;\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar TabNode = /** @class */ (function (_super) {\n    __extends(TabNode, _super);\n    /** @hidden @internal */\n    function TabNode(model, json, addToModel) {\n        if (addToModel === void 0) { addToModel = true; }\n        var _this = _super.call(this, model) || this;\n        _this._extra = {}; // extra data added to node not saved in json\n        TabNode._attributeDefinitions.fromJson(json, _this._attributes);\n        if (addToModel === true) {\n            model._addNode(_this);\n        }\n        return _this;\n    }\n    /** @hidden @internal */\n    TabNode._fromJson = function (json, model, addToModel) {\n        if (addToModel === void 0) { addToModel = true; }\n        var newLayoutNode = new TabNode(model, json, addToModel);\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    TabNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.AttributeDefinitions();\n        attributeDefinitions.add(\"type\", TabNode.TYPE, true).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"name\", \"[Unnamed Tab]\").setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"altName\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"helpText\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"component\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.add(\"floating\", false).setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableClose\", \"tabEnableClose\").setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.addInherited(\"closeType\", \"tabCloseType\").setType(\"ICloseType\");\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabEnableDrag\").setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableRename\", \"tabEnableRename\").setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.addInherited(\"className\", \"tabClassName\").setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.addInherited(\"icon\", \"tabIcon\").setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.addInherited(\"enableRenderOnDemand\", \"tabEnableRenderOnDemand\").setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableFloat\", \"tabEnableFloat\").setType(Attribute_1.Attribute.BOOLEAN);\n        attributeDefinitions.addInherited(\"borderWidth\", \"tabBorderWidth\").setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.addInherited(\"borderHeight\", \"tabBorderHeight\").setType(Attribute_1.Attribute.NUMBER);\n        return attributeDefinitions;\n    };\n    TabNode.prototype.getWindow = function () {\n        return this._window;\n    };\n    TabNode.prototype.getTabRect = function () {\n        return this._tabRect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setTabRect = function (rect) {\n        this._tabRect = rect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setRenderedName = function (name) {\n        this._renderedName = name;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._getNameForOverflowMenu = function () {\n        var altName = this._getAttr(\"altName\");\n        if (altName !== undefined) {\n            return altName;\n        }\n        return this._renderedName;\n    };\n    TabNode.prototype.getName = function () {\n        return this._getAttr(\"name\");\n    };\n    TabNode.prototype.getHelpText = function () {\n        return this._getAttr(\"helpText\");\n    };\n    TabNode.prototype.getComponent = function () {\n        return this._getAttr(\"component\");\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    TabNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    /**\n     * Returns an object that can be used to store transient node specific data that will\n     * NOT be saved in the json.\n     */\n    TabNode.prototype.getExtraData = function () {\n        return this._extra;\n    };\n    TabNode.prototype.isFloating = function () {\n        return this._getAttr(\"floating\");\n    };\n    TabNode.prototype.getIcon = function () {\n        return this._getAttr(\"icon\");\n    };\n    TabNode.prototype.isEnableClose = function () {\n        return this._getAttr(\"enableClose\");\n    };\n    TabNode.prototype.getCloseType = function () {\n        return this._getAttr(\"closeType\");\n    };\n    TabNode.prototype.isEnableFloat = function () {\n        return this._getAttr(\"enableFloat\");\n    };\n    TabNode.prototype.isEnableDrag = function () {\n        return this._getAttr(\"enableDrag\");\n    };\n    TabNode.prototype.isEnableRename = function () {\n        return this._getAttr(\"enableRename\");\n    };\n    TabNode.prototype.getClassName = function () {\n        return this._getAttr(\"className\");\n    };\n    TabNode.prototype.isEnableRenderOnDemand = function () {\n        return this._getAttr(\"enableRenderOnDemand\");\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setName = function (name) {\n        this._attributes.name = name;\n        if (this._window && this._window.document) {\n            this._window.document.title = name;\n        }\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setFloating = function (float) {\n        this._attributes.floating = float;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._layout = function (rect, metrics) {\n        if (!rect.equals(this._rect)) {\n            this._fireEvent(\"resize\", { rect: rect });\n        }\n        this._rect = rect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._delete = function () {\n        this._parent._remove(this);\n        this._fireEvent(\"close\", {});\n    };\n    TabNode.prototype.toJson = function () {\n        var json = {};\n        TabNode._attributeDefinitions.toJson(json, this._attributes);\n        return json;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._updateAttrs = function (json) {\n        TabNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    TabNode.prototype._getAttributeDefinitions = function () {\n        return TabNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setWindow = function (window) {\n        this._window = window;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setBorderWidth = function (width) {\n        this._attributes.borderWidth = width;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setBorderHeight = function (height) {\n        this._attributes.borderHeight = height;\n    };\n    /** @hidden @internal */\n    TabNode.getAttributeDefinitions = function () {\n        return TabNode._attributeDefinitions;\n    };\n    TabNode.TYPE = \"tab\";\n    /** @hidden @internal */\n    TabNode._attributeDefinitions = TabNode._createAttributeDefinitions();\n    return TabNode;\n}(Node_1.Node));\nexports.TabNode = TabNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabNode.ts?");
 
 /***/ }),
 
@@ -536,7 +572,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar TabSetNode = /** @class */ (function (_super) {\n    __extends(TabSetNode, _super);\n    /** @hidden @internal */\n    function TabSetNode(model, json) {\n        var _this = _super.call(this, model) || this;\n        TabSetNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        _this.calculatedTabBarHeight = 0;\n        _this.calculatedHeaderBarHeight = 0;\n        return _this;\n    }\n    /** @hidden @internal */\n    TabSetNode._fromJson = function (json, model) {\n        var newLayoutNode = new TabSetNode(model, json);\n        if (json.children != null) {\n            json.children.forEach(function (jsonChild) {\n                var child = TabNode_1.default._fromJson(jsonChild, model);\n                newLayoutNode._addChild(child);\n            });\n        }\n        if (newLayoutNode._children.length === 0) {\n            newLayoutNode._setSelected(-1);\n        }\n        if (json.maximized && json.maximized === true) {\n            model._setMaximizedTabset(newLayoutNode);\n        }\n        if (json.active && json.active === true) {\n            model._setActiveTabset(newLayoutNode);\n        }\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    TabSetNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", TabSetNode.TYPE, true).setType(Attribute_1.default.STRING).setFixed();\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"weight\", 100).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"width\", undefined).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"height\", undefined).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"selected\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"name\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.addInherited(\"enableDeleteWhenEmpty\", \"tabSetEnableDeleteWhenEmpty\");\n        attributeDefinitions.addInherited(\"enableDrop\", \"tabSetEnableDrop\");\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabSetEnableDrag\");\n        attributeDefinitions.addInherited(\"enableDivide\", \"tabSetEnableDivide\");\n        attributeDefinitions.addInherited(\"enableMaximize\", \"tabSetEnableMaximize\");\n        attributeDefinitions.addInherited(\"enableClose\", \"tabSetEnableClose\");\n        attributeDefinitions.addInherited(\"classNameTabStrip\", \"tabSetClassNameTabStrip\");\n        attributeDefinitions.addInherited(\"classNameHeader\", \"tabSetClassNameHeader\");\n        attributeDefinitions.addInherited(\"enableTabStrip\", \"tabSetEnableTabStrip\");\n        attributeDefinitions.addInherited(\"borderInsets\", \"tabSetBorderInsets\");\n        attributeDefinitions.addInherited(\"marginInsets\", \"tabSetMarginInsets\");\n        attributeDefinitions.addInherited(\"minWidth\", \"tabSetMinWidth\");\n        attributeDefinitions.addInherited(\"minHeight\", \"tabSetMinHeight\");\n        attributeDefinitions.addInherited(\"headerHeight\", \"tabSetHeaderHeight\");\n        attributeDefinitions.addInherited(\"tabStripHeight\", \"tabSetTabStripHeight\");\n        attributeDefinitions.addInherited(\"tabLocation\", \"tabSetTabLocation\");\n        attributeDefinitions.addInherited(\"autoSelectTab\", \"tabSetAutoSelectTab\").setType(Attribute_1.default.BOOLEAN);\n        return attributeDefinitions;\n    };\n    TabSetNode.prototype.getName = function () {\n        return this._getAttr(\"name\");\n    };\n    TabSetNode.prototype.getSelected = function () {\n        var selected = this._attributes.selected;\n        if (selected !== undefined) {\n            return selected;\n        }\n        return -1;\n    };\n    TabSetNode.prototype.getSelectedNode = function () {\n        var selected = this.getSelected();\n        if (selected !== -1) {\n            return this._children[selected];\n        }\n        return undefined;\n    };\n    TabSetNode.prototype.getWeight = function () {\n        return this._getAttr(\"weight\");\n    };\n    TabSetNode.prototype.getWidth = function () {\n        return this._getAttr(\"width\");\n    };\n    TabSetNode.prototype.getMinWidth = function () {\n        return this._getAttr(\"minWidth\");\n    };\n    TabSetNode.prototype.getHeight = function () {\n        return this._getAttr(\"height\");\n    };\n    TabSetNode.prototype.getMinHeight = function () {\n        return this._getAttr(\"minHeight\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.getMinSize = function (orientation) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    TabSetNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    TabSetNode.prototype.isMaximized = function () {\n        return this._model.getMaximizedTabset() === this;\n    };\n    TabSetNode.prototype.isActive = function () {\n        return this._model.getActiveTabset() === this;\n    };\n    TabSetNode.prototype.isEnableDeleteWhenEmpty = function () {\n        return this._getAttr(\"enableDeleteWhenEmpty\");\n    };\n    TabSetNode.prototype.isEnableDrop = function () {\n        return this._getAttr(\"enableDrop\");\n    };\n    TabSetNode.prototype.isEnableDrag = function () {\n        return this._getAttr(\"enableDrag\");\n    };\n    TabSetNode.prototype.isEnableDivide = function () {\n        return this._getAttr(\"enableDivide\");\n    };\n    TabSetNode.prototype.isEnableMaximize = function () {\n        return this._getAttr(\"enableMaximize\");\n    };\n    TabSetNode.prototype.isEnableClose = function () {\n        return this._getAttr(\"enableClose\");\n    };\n    TabSetNode.prototype.canMaximize = function () {\n        if (this.isEnableMaximize()) {\n            // always allow maximize toggle if already maximized\n            if (this.getModel().getMaximizedTabset() === this) {\n                return true;\n            }\n            // only one tabset, so disable\n            if (this.getParent() === this.getModel().getRoot() && this.getModel().getRoot().getChildren().length === 1) {\n                return false;\n            }\n            return true;\n        }\n        return false;\n    };\n    TabSetNode.prototype.isEnableTabStrip = function () {\n        return this._getAttr(\"enableTabStrip\");\n    };\n    TabSetNode.prototype.isAutoSelectTab = function () {\n        return this._getAttr(\"autoSelectTab\");\n    };\n    TabSetNode.prototype.getClassNameTabStrip = function () {\n        return this._getAttr(\"classNameTabStrip\");\n    };\n    TabSetNode.prototype.getClassNameHeader = function () {\n        return this._getAttr(\"classNameHeader\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.calculateHeaderBarHeight = function (metrics) {\n        var headerBarHeight = this._getAttr(\"headerHeight\");\n        if (headerBarHeight !== 0) {\n            // its defined\n            this.calculatedHeaderBarHeight = headerBarHeight;\n        }\n        else {\n            this.calculatedHeaderBarHeight = metrics.headerBarSize;\n        }\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.calculateTabBarHeight = function (metrics) {\n        var tabBarHeight = this._getAttr(\"tabStripHeight\");\n        if (tabBarHeight !== 0) {\n            // its defined\n            this.calculatedTabBarHeight = tabBarHeight;\n        }\n        else {\n            this.calculatedTabBarHeight = metrics.tabBarSize;\n        }\n    };\n    TabSetNode.prototype.getHeaderHeight = function () {\n        return this.calculatedHeaderBarHeight;\n    };\n    TabSetNode.prototype.getTabStripHeight = function () {\n        return this.calculatedTabBarHeight;\n    };\n    TabSetNode.prototype.getTabLocation = function () {\n        return this._getAttr(\"tabLocation\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._setWeight = function (weight) {\n        this._attributes.weight = weight;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._setSelected = function (index) {\n        this._attributes.selected = index;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.canDrop = function (dragNode, x, y) {\n        var dropInfo;\n        if (dragNode === this) {\n            var dockLocation = DockLocation_1.default.CENTER;\n            var outlineRect = this._tabHeaderRect;\n            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n        }\n        else if (this._contentRect.contains(x, y)) {\n            var dockLocation = DockLocation_1.default.getLocation(this._contentRect, x, y);\n            var outlineRect = dockLocation.getDockRect(this._rect);\n            dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n        }\n        else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {\n            var r = void 0;\n            var yy = void 0;\n            var h = void 0;\n            if (this._children.length === 0) {\n                r = this._tabHeaderRect.clone();\n                yy = r.y + 3;\n                h = r.height - 4;\n                r.width = 2;\n            }\n            else {\n                var child = this._children[0];\n                r = child.getTabRect();\n                yy = r.y;\n                h = r.height;\n                var p = this._tabHeaderRect.x;\n                var childCenter = 0;\n                for (var i = 0; i < this._children.length; i++) {\n                    child = this._children[i];\n                    r = child.getTabRect();\n                    childCenter = r.x + r.width / 2;\n                    if (x >= p && x < childCenter) {\n                        var dockLocation = DockLocation_1.default.CENTER;\n                        var outlineRect = new Rect_1.default(r.x - 2, yy, 3, h);\n                        dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                        break;\n                    }\n                    p = childCenter;\n                }\n            }\n            if (dropInfo == null) {\n                var dockLocation = DockLocation_1.default.CENTER;\n                var outlineRect = new Rect_1.default(r.getRight() - 2, yy, 3, h);\n                dropInfo = new DropInfo_1.default(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            }\n        }\n        if (!dragNode._canDockInto(dragNode, dropInfo)) {\n            return undefined;\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._layout = function (rect, metrics) {\n        var _this = this;\n        this.calculateHeaderBarHeight(metrics);\n        this.calculateTabBarHeight(metrics);\n        if (this.isMaximized()) {\n            rect = this._model.getRoot().getRect();\n        }\n        rect = rect.removeInsets(this._getAttr(\"marginInsets\"));\n        this._rect = rect;\n        rect = rect.removeInsets(this._getAttr(\"borderInsets\"));\n        var showHeader = this.getName() !== undefined;\n        var y = 0;\n        var h = 0;\n        if (showHeader) {\n            y += this.calculatedHeaderBarHeight;\n            h += this.calculatedHeaderBarHeight;\n        }\n        if (this.isEnableTabStrip()) {\n            if (this.getTabLocation() === \"top\") {\n                this._tabHeaderRect = new Rect_1.default(rect.x, rect.y + y, rect.width, this.calculatedTabBarHeight);\n            }\n            else {\n                this._tabHeaderRect = new Rect_1.default(rect.x, rect.y + rect.height - this.calculatedTabBarHeight, rect.width, this.calculatedTabBarHeight);\n            }\n            h += this.calculatedTabBarHeight;\n            if (this.getTabLocation() === \"top\") {\n                y += this.calculatedTabBarHeight;\n            }\n        }\n        this._contentRect = new Rect_1.default(rect.x, rect.y + y, rect.width, rect.height - h);\n        this._children.forEach(function (child, i) {\n            child._layout(_this._contentRect, metrics);\n            child._setVisible(i === _this.getSelected());\n        });\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._delete = function () {\n        this._parent._removeChild(this);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._remove = function (node) {\n        var removedIndex = this._removeChild(node);\n        this._model._tidy();\n        Utils_1.adjustSelectedIndex(this, removedIndex);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.drop = function (dragNode, location, index, select) {\n        var _this = this;\n        var dockLocation = location;\n        if (this === dragNode) {\n            // tabset drop into itself\n            return; // dock back to itself\n        }\n        var dragParent = dragNode.getParent();\n        var fromIndex = 0;\n        if (dragParent !== undefined) {\n            fromIndex = dragParent._removeChild(dragNode);\n            Utils_1.adjustSelectedIndex(dragParent, fromIndex);\n        }\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n        if (dragNode.getType() === TabNode_1.default.TYPE && dragParent === this && fromIndex < index && index > 0) {\n            index--;\n        }\n        // simple_bundled dock to existing tabset\n        if (dockLocation === DockLocation_1.default.CENTER) {\n            var insertPos_1 = index;\n            if (insertPos_1 === -1) {\n                insertPos_1 = this._children.length;\n            }\n            if (dragNode.getType() === TabNode_1.default.TYPE) {\n                this._addChild(dragNode, insertPos_1);\n                if (select || (select !== false && this.isAutoSelectTab())) {\n                    this._setSelected(insertPos_1);\n                }\n                // console.log(\"added child at : \" + insertPos);\n            }\n            else {\n                dragNode.getChildren().forEach(function (child, i) {\n                    _this._addChild(child, insertPos_1);\n                    // console.log(\"added child at : \" + insertPos);\n                    insertPos_1++;\n                });\n            }\n            this._model._setActiveTabset(this);\n        }\n        else {\n            var tabSet = void 0;\n            if (dragNode instanceof TabNode_1.default) {\n                // create new tabset parent\n                // console.log(\"create a new tabset\");\n                var callback = this._model._getOnCreateTabSet();\n                tabSet = new TabSetNode(this._model, callback ? callback(dragNode) : {});\n                tabSet._addChild(dragNode);\n                // console.log(\"added child at end\");\n                dragParent = tabSet;\n            }\n            else {\n                tabSet = dragNode;\n            }\n            var parentRow = this._parent;\n            var pos = parentRow.getChildren().indexOf(this);\n            if (parentRow.getOrientation() === dockLocation._orientation) {\n                tabSet._setWeight(this.getWeight() / 2);\n                this._setWeight(this.getWeight() / 2);\n                // console.log(\"added child 50% size at: \" +  pos + dockLocation.indexPlus);\n                parentRow._addChild(tabSet, pos + dockLocation._indexPlus);\n            }\n            else {\n                // create a new row to host the new tabset (it will go in the opposite direction)\n                // console.log(\"create a new row\");\n                var newRow = new RowNode_1.default(this._model, {});\n                newRow._setWeight(this.getWeight());\n                newRow._addChild(this);\n                this._setWeight(50);\n                tabSet._setWeight(50);\n                // console.log(\"added child 50% size at: \" +  dockLocation.indexPlus);\n                newRow._addChild(tabSet, dockLocation._indexPlus);\n                parentRow._removeChild(this);\n                parentRow._addChild(newRow, pos);\n            }\n            this._model._setActiveTabset(tabSet);\n        }\n        this._model._tidy();\n    };\n    TabSetNode.prototype.toJson = function () {\n        var json = {};\n        TabSetNode._attributeDefinitions.toJson(json, this._attributes);\n        json.children = this._children.map(function (child) { return child.toJson(); });\n        if (this.isActive()) {\n            json.active = true;\n        }\n        if (this.isMaximized()) {\n            json.maximized = true;\n        }\n        return json;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._updateAttrs = function (json) {\n        TabSetNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._getAttributeDefinitions = function () {\n        return TabSetNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._getPrefSize = function (orientation) {\n        var prefSize = this.getWidth();\n        if (orientation === Orientation_1.default.VERT) {\n            prefSize = this.getHeight();\n        }\n        return prefSize;\n    };\n    /** @hidden @internal */\n    TabSetNode.getAttributeDefinitions = function () {\n        return TabSetNode._attributeDefinitions;\n    };\n    TabSetNode.TYPE = \"tabset\";\n    /** @hidden @internal */\n    TabSetNode._attributeDefinitions = TabSetNode._createAttributeDefinitions();\n    return TabSetNode;\n}(Node_1.default));\nexports.default = TabSetNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabSetNode = void 0;\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DropInfo_1 = __webpack_require__(/*! ../DropInfo */ \"./src/DropInfo.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar TabSetNode = /** @class */ (function (_super) {\n    __extends(TabSetNode, _super);\n    /** @hidden @internal */\n    function TabSetNode(model, json) {\n        var _this = _super.call(this, model) || this;\n        TabSetNode._attributeDefinitions.fromJson(json, _this._attributes);\n        model._addNode(_this);\n        _this.calculatedTabBarHeight = 0;\n        _this.calculatedHeaderBarHeight = 0;\n        return _this;\n    }\n    /** @hidden @internal */\n    TabSetNode._fromJson = function (json, model) {\n        var newLayoutNode = new TabSetNode(model, json);\n        if (json.children != null) {\n            json.children.forEach(function (jsonChild) {\n                var child = TabNode_1.TabNode._fromJson(jsonChild, model);\n                newLayoutNode._addChild(child);\n            });\n        }\n        if (newLayoutNode._children.length === 0) {\n            newLayoutNode._setSelected(-1);\n        }\n        if (json.maximized && json.maximized === true) {\n            model._setMaximizedTabset(newLayoutNode);\n        }\n        if (json.active && json.active === true) {\n            model._setActiveTabset(newLayoutNode);\n        }\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    TabSetNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.AttributeDefinitions();\n        attributeDefinitions.add(\"type\", TabSetNode.TYPE, true).setType(Attribute_1.Attribute.STRING).setFixed();\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"weight\", 100).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"width\", undefined).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"height\", undefined).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"selected\", 0).setType(Attribute_1.Attribute.NUMBER);\n        attributeDefinitions.add(\"name\", undefined).setType(Attribute_1.Attribute.STRING);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.addInherited(\"enableDeleteWhenEmpty\", \"tabSetEnableDeleteWhenEmpty\");\n        attributeDefinitions.addInherited(\"enableDrop\", \"tabSetEnableDrop\");\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabSetEnableDrag\");\n        attributeDefinitions.addInherited(\"enableDivide\", \"tabSetEnableDivide\");\n        attributeDefinitions.addInherited(\"enableMaximize\", \"tabSetEnableMaximize\");\n        attributeDefinitions.addInherited(\"enableClose\", \"tabSetEnableClose\");\n        attributeDefinitions.addInherited(\"classNameTabStrip\", \"tabSetClassNameTabStrip\");\n        attributeDefinitions.addInherited(\"classNameHeader\", \"tabSetClassNameHeader\");\n        attributeDefinitions.addInherited(\"enableTabStrip\", \"tabSetEnableTabStrip\");\n        attributeDefinitions.addInherited(\"borderInsets\", \"tabSetBorderInsets\");\n        attributeDefinitions.addInherited(\"marginInsets\", \"tabSetMarginInsets\");\n        attributeDefinitions.addInherited(\"minWidth\", \"tabSetMinWidth\");\n        attributeDefinitions.addInherited(\"minHeight\", \"tabSetMinHeight\");\n        attributeDefinitions.addInherited(\"headerHeight\", \"tabSetHeaderHeight\");\n        attributeDefinitions.addInherited(\"tabStripHeight\", \"tabSetTabStripHeight\");\n        attributeDefinitions.addInherited(\"tabLocation\", \"tabSetTabLocation\");\n        attributeDefinitions.addInherited(\"autoSelectTab\", \"tabSetAutoSelectTab\").setType(Attribute_1.Attribute.BOOLEAN);\n        return attributeDefinitions;\n    };\n    TabSetNode.prototype.getName = function () {\n        return this._getAttr(\"name\");\n    };\n    TabSetNode.prototype.getSelected = function () {\n        var selected = this._attributes.selected;\n        if (selected !== undefined) {\n            return selected;\n        }\n        return -1;\n    };\n    TabSetNode.prototype.getSelectedNode = function () {\n        var selected = this.getSelected();\n        if (selected !== -1) {\n            return this._children[selected];\n        }\n        return undefined;\n    };\n    TabSetNode.prototype.getWeight = function () {\n        return this._getAttr(\"weight\");\n    };\n    TabSetNode.prototype.getWidth = function () {\n        return this._getAttr(\"width\");\n    };\n    TabSetNode.prototype.getMinWidth = function () {\n        return this._getAttr(\"minWidth\");\n    };\n    TabSetNode.prototype.getHeight = function () {\n        return this._getAttr(\"height\");\n    };\n    TabSetNode.prototype.getMinHeight = function () {\n        return this._getAttr(\"minHeight\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.getMinSize = function (orientation) {\n        if (orientation === Orientation_1.Orientation.HORZ) {\n            return this.getMinWidth();\n        }\n        else {\n            return this.getMinHeight();\n        }\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    TabSetNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    TabSetNode.prototype.isMaximized = function () {\n        return this._model.getMaximizedTabset() === this;\n    };\n    TabSetNode.prototype.isActive = function () {\n        return this._model.getActiveTabset() === this;\n    };\n    TabSetNode.prototype.isEnableDeleteWhenEmpty = function () {\n        return this._getAttr(\"enableDeleteWhenEmpty\");\n    };\n    TabSetNode.prototype.isEnableDrop = function () {\n        return this._getAttr(\"enableDrop\");\n    };\n    TabSetNode.prototype.isEnableDrag = function () {\n        return this._getAttr(\"enableDrag\");\n    };\n    TabSetNode.prototype.isEnableDivide = function () {\n        return this._getAttr(\"enableDivide\");\n    };\n    TabSetNode.prototype.isEnableMaximize = function () {\n        return this._getAttr(\"enableMaximize\");\n    };\n    TabSetNode.prototype.isEnableClose = function () {\n        return this._getAttr(\"enableClose\");\n    };\n    TabSetNode.prototype.canMaximize = function () {\n        if (this.isEnableMaximize()) {\n            // always allow maximize toggle if already maximized\n            if (this.getModel().getMaximizedTabset() === this) {\n                return true;\n            }\n            // only one tabset, so disable\n            if (this.getParent() === this.getModel().getRoot() && this.getModel().getRoot().getChildren().length === 1) {\n                return false;\n            }\n            return true;\n        }\n        return false;\n    };\n    TabSetNode.prototype.isEnableTabStrip = function () {\n        return this._getAttr(\"enableTabStrip\");\n    };\n    TabSetNode.prototype.isAutoSelectTab = function () {\n        return this._getAttr(\"autoSelectTab\");\n    };\n    TabSetNode.prototype.getClassNameTabStrip = function () {\n        return this._getAttr(\"classNameTabStrip\");\n    };\n    TabSetNode.prototype.getClassNameHeader = function () {\n        return this._getAttr(\"classNameHeader\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.calculateHeaderBarHeight = function (metrics) {\n        var headerBarHeight = this._getAttr(\"headerHeight\");\n        if (headerBarHeight !== 0) {\n            // its defined\n            this.calculatedHeaderBarHeight = headerBarHeight;\n        }\n        else {\n            this.calculatedHeaderBarHeight = metrics.headerBarSize;\n        }\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.calculateTabBarHeight = function (metrics) {\n        var tabBarHeight = this._getAttr(\"tabStripHeight\");\n        if (tabBarHeight !== 0) {\n            // its defined\n            this.calculatedTabBarHeight = tabBarHeight;\n        }\n        else {\n            this.calculatedTabBarHeight = metrics.tabBarSize;\n        }\n    };\n    TabSetNode.prototype.getHeaderHeight = function () {\n        return this.calculatedHeaderBarHeight;\n    };\n    TabSetNode.prototype.getTabStripHeight = function () {\n        return this.calculatedTabBarHeight;\n    };\n    TabSetNode.prototype.getTabLocation = function () {\n        return this._getAttr(\"tabLocation\");\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._setWeight = function (weight) {\n        this._attributes.weight = weight;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._setSelected = function (index) {\n        this._attributes.selected = index;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.canDrop = function (dragNode, x, y) {\n        var dropInfo;\n        if (dragNode === this) {\n            var dockLocation = DockLocation_1.DockLocation.CENTER;\n            var outlineRect = this._tabHeaderRect;\n            dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n        }\n        else if (this._contentRect.contains(x, y)) {\n            var dockLocation = DockLocation_1.DockLocation.getLocation(this._contentRect, x, y);\n            var outlineRect = dockLocation.getDockRect(this._rect);\n            dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, -1, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n        }\n        else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {\n            var r = void 0;\n            var yy = void 0;\n            var h = void 0;\n            if (this._children.length === 0) {\n                r = this._tabHeaderRect.clone();\n                yy = r.y + 3;\n                h = r.height - 4;\n                r.width = 2;\n            }\n            else {\n                var child = this._children[0];\n                r = child.getTabRect();\n                yy = r.y;\n                h = r.height;\n                var p = this._tabHeaderRect.x;\n                var childCenter = 0;\n                for (var i = 0; i < this._children.length; i++) {\n                    child = this._children[i];\n                    r = child.getTabRect();\n                    childCenter = r.x + r.width / 2;\n                    if (x >= p && x < childCenter) {\n                        var dockLocation = DockLocation_1.DockLocation.CENTER;\n                        var outlineRect = new Rect_1.Rect(r.x - 2, yy, 3, h);\n                        dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, i, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                        break;\n                    }\n                    p = childCenter;\n                }\n            }\n            if (dropInfo == null) {\n                var dockLocation = DockLocation_1.DockLocation.CENTER;\n                var outlineRect = new Rect_1.Rect(r.getRight() - 2, yy, 3, h);\n                dropInfo = new DropInfo_1.DropInfo(this, outlineRect, dockLocation, this._children.length, Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            }\n        }\n        if (!dragNode._canDockInto(dragNode, dropInfo)) {\n            return undefined;\n        }\n        return dropInfo;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._layout = function (rect, metrics) {\n        var _this = this;\n        this.calculateHeaderBarHeight(metrics);\n        this.calculateTabBarHeight(metrics);\n        if (this.isMaximized()) {\n            rect = this._model.getRoot().getRect();\n        }\n        rect = rect.removeInsets(this._getAttr(\"marginInsets\"));\n        this._rect = rect;\n        rect = rect.removeInsets(this._getAttr(\"borderInsets\"));\n        var showHeader = this.getName() !== undefined;\n        var y = 0;\n        var h = 0;\n        if (showHeader) {\n            y += this.calculatedHeaderBarHeight;\n            h += this.calculatedHeaderBarHeight;\n        }\n        if (this.isEnableTabStrip()) {\n            if (this.getTabLocation() === \"top\") {\n                this._tabHeaderRect = new Rect_1.Rect(rect.x, rect.y + y, rect.width, this.calculatedTabBarHeight);\n            }\n            else {\n                this._tabHeaderRect = new Rect_1.Rect(rect.x, rect.y + rect.height - this.calculatedTabBarHeight, rect.width, this.calculatedTabBarHeight);\n            }\n            h += this.calculatedTabBarHeight;\n            if (this.getTabLocation() === \"top\") {\n                y += this.calculatedTabBarHeight;\n            }\n        }\n        this._contentRect = new Rect_1.Rect(rect.x, rect.y + y, rect.width, rect.height - h);\n        this._children.forEach(function (child, i) {\n            child._layout(_this._contentRect, metrics);\n            child._setVisible(i === _this.getSelected());\n        });\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._delete = function () {\n        this._parent._removeChild(this);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._remove = function (node) {\n        var removedIndex = this._removeChild(node);\n        this._model._tidy();\n        Utils_1.adjustSelectedIndex(this, removedIndex);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype.drop = function (dragNode, location, index, select) {\n        var _this = this;\n        var dockLocation = location;\n        if (this === dragNode) {\n            // tabset drop into itself\n            return; // dock back to itself\n        }\n        var dragParent = dragNode.getParent();\n        var fromIndex = 0;\n        if (dragParent !== undefined) {\n            fromIndex = dragParent._removeChild(dragNode);\n            Utils_1.adjustSelectedIndex(dragParent, fromIndex);\n        }\n        // if dropping a tab back to same tabset and moving to forward position then reduce insertion index\n        if (dragNode.getType() === TabNode_1.TabNode.TYPE && dragParent === this && fromIndex < index && index > 0) {\n            index--;\n        }\n        // simple_bundled dock to existing tabset\n        if (dockLocation === DockLocation_1.DockLocation.CENTER) {\n            var insertPos_1 = index;\n            if (insertPos_1 === -1) {\n                insertPos_1 = this._children.length;\n            }\n            if (dragNode.getType() === TabNode_1.TabNode.TYPE) {\n                this._addChild(dragNode, insertPos_1);\n                if (select || (select !== false && this.isAutoSelectTab())) {\n                    this._setSelected(insertPos_1);\n                }\n                // console.log(\"added child at : \" + insertPos);\n            }\n            else {\n                dragNode.getChildren().forEach(function (child, i) {\n                    _this._addChild(child, insertPos_1);\n                    // console.log(\"added child at : \" + insertPos);\n                    insertPos_1++;\n                });\n            }\n            this._model._setActiveTabset(this);\n        }\n        else {\n            var tabSet = void 0;\n            if (dragNode instanceof TabNode_1.TabNode) {\n                // create new tabset parent\n                // console.log(\"create a new tabset\");\n                var callback = this._model._getOnCreateTabSet();\n                tabSet = new TabSetNode(this._model, callback ? callback(dragNode) : {});\n                tabSet._addChild(dragNode);\n                // console.log(\"added child at end\");\n                dragParent = tabSet;\n            }\n            else {\n                tabSet = dragNode;\n            }\n            var parentRow = this._parent;\n            var pos = parentRow.getChildren().indexOf(this);\n            if (parentRow.getOrientation() === dockLocation._orientation) {\n                tabSet._setWeight(this.getWeight() / 2);\n                this._setWeight(this.getWeight() / 2);\n                // console.log(\"added child 50% size at: \" +  pos + dockLocation.indexPlus);\n                parentRow._addChild(tabSet, pos + dockLocation._indexPlus);\n            }\n            else {\n                // create a new row to host the new tabset (it will go in the opposite direction)\n                // console.log(\"create a new row\");\n                var newRow = new RowNode_1.RowNode(this._model, {});\n                newRow._setWeight(this.getWeight());\n                newRow._addChild(this);\n                this._setWeight(50);\n                tabSet._setWeight(50);\n                // console.log(\"added child 50% size at: \" +  dockLocation.indexPlus);\n                newRow._addChild(tabSet, dockLocation._indexPlus);\n                parentRow._removeChild(this);\n                parentRow._addChild(newRow, pos);\n            }\n            this._model._setActiveTabset(tabSet);\n        }\n        this._model._tidy();\n    };\n    TabSetNode.prototype.toJson = function () {\n        var json = {};\n        TabSetNode._attributeDefinitions.toJson(json, this._attributes);\n        json.children = this._children.map(function (child) { return child.toJson(); });\n        if (this.isActive()) {\n            json.active = true;\n        }\n        if (this.isMaximized()) {\n            json.maximized = true;\n        }\n        return json;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._updateAttrs = function (json) {\n        TabSetNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._getAttributeDefinitions = function () {\n        return TabSetNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    TabSetNode.prototype._getPrefSize = function (orientation) {\n        var prefSize = this.getWidth();\n        if (orientation === Orientation_1.Orientation.VERT) {\n            prefSize = this.getHeight();\n        }\n        return prefSize;\n    };\n    /** @hidden @internal */\n    TabSetNode.getAttributeDefinitions = function () {\n        return TabSetNode._attributeDefinitions;\n    };\n    TabSetNode.TYPE = \"tabset\";\n    /** @hidden @internal */\n    TabSetNode._attributeDefinitions = TabSetNode._createAttributeDefinitions();\n    return TabSetNode;\n}(Node_1.Node));\nexports.TabSetNode = TabSetNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabSetNode.ts?");
 
 /***/ }),
 
@@ -548,7 +584,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.adjustSelectedIndex = exports.adjustSelectedIndexAfterDock = exports.adjustSelectedIndexAfterFloat = void 0;\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\n/** @hidden @internal */\nfunction adjustSelectedIndexAfterFloat(node) {\n    var parent = node.getParent();\n    if (parent !== null) {\n        if (parent instanceof TabSetNode_1.default) {\n            var found = false;\n            var newSelected = 0;\n            var children = parent.getChildren();\n            for (var i = 0; i < children.length; i++) {\n                var child = children[i];\n                if (child === node) {\n                    found = true;\n                }\n                else {\n                    if (!child.isFloating()) {\n                        newSelected = i;\n                        if (found)\n                            break;\n                    }\n                }\n            }\n            parent._setSelected(newSelected);\n        }\n        else if (parent instanceof BorderNode_1.default) {\n            parent._setSelected(-1);\n        }\n    }\n}\nexports.adjustSelectedIndexAfterFloat = adjustSelectedIndexAfterFloat;\n/** @hidden @internal */\nfunction adjustSelectedIndexAfterDock(node) {\n    var parent = node.getParent();\n    if (parent !== null && (parent instanceof TabSetNode_1.default || parent instanceof BorderNode_1.default)) {\n        var children = parent.getChildren();\n        for (var i = 0; i < children.length; i++) {\n            var child = children[i];\n            if (child === node) {\n                parent._setSelected(i);\n                return;\n            }\n        }\n    }\n}\nexports.adjustSelectedIndexAfterDock = adjustSelectedIndexAfterDock;\n/** @hidden @internal */\nfunction adjustSelectedIndex(parent, removedIndex) {\n    // for the tabset/border being removed from set the selected index\n    if (parent !== undefined && (parent.getType() === TabSetNode_1.default.TYPE || parent.getType() === BorderNode_1.default.TYPE)) {\n        var selectedIndex = parent.getSelected();\n        if (selectedIndex !== -1) {\n            if (removedIndex === selectedIndex && parent.getChildren().length > 0) {\n                if (removedIndex >= parent.getChildren().length) {\n                    // removed last tab; select new last tab\n                    parent._setSelected(parent.getChildren().length - 1);\n                }\n                else {\n                    // leave selected index as is, selecting next tab after this one\n                }\n            }\n            else if (removedIndex < selectedIndex) {\n                parent._setSelected(selectedIndex - 1);\n            }\n            else if (removedIndex > selectedIndex) {\n                // leave selected index as is\n            }\n            else {\n                parent._setSelected(-1);\n            }\n        }\n    }\n}\nexports.adjustSelectedIndex = adjustSelectedIndex;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Utils.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.adjustSelectedIndex = exports.adjustSelectedIndexAfterDock = exports.adjustSelectedIndexAfterFloat = void 0;\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\n/** @hidden @internal */\nfunction adjustSelectedIndexAfterFloat(node) {\n    var parent = node.getParent();\n    if (parent !== null) {\n        if (parent instanceof TabSetNode_1.TabSetNode) {\n            var found = false;\n            var newSelected = 0;\n            var children = parent.getChildren();\n            for (var i = 0; i < children.length; i++) {\n                var child = children[i];\n                if (child === node) {\n                    found = true;\n                }\n                else {\n                    if (!child.isFloating()) {\n                        newSelected = i;\n                        if (found)\n                            break;\n                    }\n                }\n            }\n            parent._setSelected(newSelected);\n        }\n        else if (parent instanceof BorderNode_1.BorderNode) {\n            parent._setSelected(-1);\n        }\n    }\n}\nexports.adjustSelectedIndexAfterFloat = adjustSelectedIndexAfterFloat;\n/** @hidden @internal */\nfunction adjustSelectedIndexAfterDock(node) {\n    var parent = node.getParent();\n    if (parent !== null && (parent instanceof TabSetNode_1.TabSetNode || parent instanceof BorderNode_1.BorderNode)) {\n        var children = parent.getChildren();\n        for (var i = 0; i < children.length; i++) {\n            var child = children[i];\n            if (child === node) {\n                parent._setSelected(i);\n                return;\n            }\n        }\n    }\n}\nexports.adjustSelectedIndexAfterDock = adjustSelectedIndexAfterDock;\n/** @hidden @internal */\nfunction adjustSelectedIndex(parent, removedIndex) {\n    // for the tabset/border being removed from set the selected index\n    if (parent !== undefined && (parent.getType() === TabSetNode_1.TabSetNode.TYPE || parent.getType() === BorderNode_1.BorderNode.TYPE)) {\n        var selectedIndex = parent.getSelected();\n        if (selectedIndex !== -1) {\n            if (removedIndex === selectedIndex && parent.getChildren().length > 0) {\n                if (removedIndex >= parent.getChildren().length) {\n                    // removed last tab; select new last tab\n                    parent._setSelected(parent.getChildren().length - 1);\n                }\n                else {\n                    // leave selected index as is, selecting next tab after this one\n                }\n            }\n            else if (removedIndex < selectedIndex) {\n                parent._setSelected(selectedIndex - 1);\n            }\n            else if (removedIndex > selectedIndex) {\n                // leave selected index as is\n            }\n            else {\n                parent._setSelected(-1);\n            }\n        }\n    }\n}\nexports.adjustSelectedIndex = adjustSelectedIndex;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Utils.ts?");
 
 /***/ }),
 
@@ -560,7 +596,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/** @hidden @internal */\nvar BorderButton = function (props) {\n    var layout = props.layout, node = props.node, selected = props.selected, border = props.border, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var selfRef = React.useRef(null);\n    var onMouseDown = function (event) {\n        if (!TabSet_1.isAuxMouseEvent(event)) {\n            var message = layout.i18nName(__1.I18nLabel.Move_Tab, node.getName());\n            props.layout.dragStart(event, message, node, node.isEnableDrag(), onClick, function (event2) { return undefined; });\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (TabSet_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.default.selectTab(node.getId()));\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.default.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n    });\n    var updateRect = function () {\n        // record position of tab in border\n        var clientRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.default(r.left - clientRect.left, r.top - clientRect.top, r.width, r.height));\n    };\n    var cm = layout.getClassName;\n    var classNames = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\n    if (selected) {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\n    }\n    else {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var leadingContent = iconFactory ? iconFactory(node) : undefined;\n    var titleContent = node.getName();\n    var name = node.getName();\n    function isTitleObject(obj) {\n        return obj.titleContent !== undefined;\n    }\n    if (titleFactory !== undefined) {\n        var titleObj = titleFactory(node);\n        if (titleObj !== undefined) {\n            if (typeof titleObj === \"string\") {\n                titleContent = titleObj;\n                name = titleObj;\n            }\n            else if (isTitleObject(titleObj)) {\n                titleContent = titleObj.titleContent;\n                name = titleObj.name;\n            }\n            else {\n                titleContent = titleObj;\n            }\n        }\n    }\n    if (leadingContent === undefined && node.getIcon() !== undefined) {\n        leadingContent = React.createElement(\"img\", { src: node.getIcon(), alt: \"leadingContent\" });\n    }\n    var buttons = [];\n    // allow customization of leading contents (icon) and contents\n    var renderState = { leading: leadingContent, content: titleContent, name: name, buttons: buttons };\n    layout.customizeTab(node, renderState);\n    node._setRenderedName(renderState.name);\n    var content = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content);\n    var leading = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading);\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(__1.I18nLabel.Close_Tab);\n        buttons.push(React.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, icons === null || icons === void 0 ? void 0 : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, style: {}, className: classNames, \"data-layout-path\": path, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        buttons));\n};\nexports.BorderButton = BorderButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderButton.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar BorderButton = function (props) {\n    var layout = props.layout, node = props.node, selected = props.selected, border = props.border, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var selfRef = React.useRef(null);\n    var onMouseDown = function (event) {\n        if (!Utils_1.isAuxMouseEvent(event)) {\n            props.layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, function (event2) { return undefined; });\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (Utils_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.Actions.selectTab(node.getId()));\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.Actions.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n    });\n    var updateRect = function () {\n        // record position of tab in border\n        var clientRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.Rect(r.left - clientRect.left, r.top - clientRect.top, r.width, r.height));\n    };\n    var cm = layout.getClassName;\n    var classNames = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\n    if (selected) {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\n    }\n    else {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var renderState = Utils_1.getRenderStateEx(layout, node, iconFactory, titleFactory);\n    var content = renderState.content ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content)) : null;\n    var leading = renderState.leading ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading)) : null;\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(__1.I18nLabel.Close_Tab);\n        renderState.buttons.push(React.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, icons === null || icons === void 0 ? void 0 : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, style: {}, className: classNames, \"data-layout-path\": path, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        renderState.buttons));\n};\nexports.BorderButton = BorderButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderButton.tsx?");
 
 /***/ }),
 
@@ -572,7 +608,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderTabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar BorderButton_1 = __webpack_require__(/*! ./BorderButton */ \"./src/view/BorderButton.tsx\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/** @hidden @internal */\nvar BorderTabSet = function (props) {\n    var border = props.border, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(border, Orientation_1.default.flip(border.getOrientation()), toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel;\n    var onAuxMouseClick = function (event) {\n        if (TabSet_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(border, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(border, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onOverflowClick = function (event) {\n        var element = overflowbuttonRef.current;\n        PopupMenu_1.showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.default.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onFloatTab = function (event) {\n        var selectedTabNode = border.getChildren()[border.getSelected()];\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.default.floatTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    var cm = layout.getClassName;\n    var style = border.getTabHeaderRect().styleWithPosition({});\n    var tabs = [];\n    var layoutTab = function (i) {\n        var isSelected = border.getSelected() === i;\n        var child = border.getChildren()[i];\n        tabs.push(React.createElement(BorderButton_1.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n    };\n    for (var i = 0; i < border.getChildren().length; i++) {\n        layoutTab(i);\n    }\n    var borderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\n    if (border.getClassName() !== undefined) {\n        borderClasses += \" \" + border.getClassName();\n    }\n    // allow customization of tabset right/bottom buttons\n    var buttons = [];\n    var renderState = { headerContent: {}, buttons: buttons, stickyButtons: [], headerButtons: [] };\n    layout.customizeTabSet(border, renderState);\n    buttons = renderState.buttons;\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName()), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 :\n            icons.more,\n            hiddenTabs.length));\n    }\n    var selectedIndex = border.getSelected();\n    if (selectedIndex !== -1) {\n        var selectedTabNode = border.getChildren()[selectedIndex];\n        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n            var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n            buttons.push(React.createElement(\"button\", { key: \"float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }));\n        }\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName()) }, buttons));\n    style = layout.styleFont(style);\n    var innerStyle = {};\n    var borderHeight = border.getBorderBarSize() - 1;\n    if (border.getLocation() === DockLocation_1.default.LEFT) {\n        innerStyle = { right: borderHeight, height: borderHeight, top: position };\n    }\n    else if (border.getLocation() === DockLocation_1.default.RIGHT) {\n        innerStyle = { left: borderHeight, height: borderHeight, top: position };\n    }\n    else {\n        innerStyle = { height: borderHeight, left: position };\n    }\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", style: style, className: borderClasses, \"data-layout-path\": path, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },\n        React.createElement(\"div\", { style: { height: borderHeight }, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()) },\n            React.createElement(\"div\", { style: innerStyle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName()) }, tabs)),\n        toolbar));\n};\nexports.BorderTabSet = BorderTabSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderTabSet.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderTabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar BorderButton_1 = __webpack_require__(/*! ./BorderButton */ \"./src/view/BorderButton.tsx\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar BorderTabSet = function (props) {\n    var border = props.border, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(border, Orientation_1.Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel;\n    var onAuxMouseClick = function (event) {\n        if (Utils_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(border, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(border, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onOverflowClick = function (event) {\n        var callback = layout.getShowOverflowMenu();\n        if (callback !== undefined) {\n            callback(border, event, hiddenTabs, onOverflowItemSelect);\n        }\n        else {\n            var element = overflowbuttonRef.current;\n            PopupMenu_1.showPopup(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\n        }\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.Actions.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onFloatTab = function (event) {\n        var selectedTabNode = border.getChildren()[border.getSelected()];\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.Actions.floatTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    var cm = layout.getClassName;\n    var style = border.getTabHeaderRect().styleWithPosition({});\n    var tabs = [];\n    var layoutTab = function (i) {\n        var isSelected = border.getSelected() === i;\n        var child = border.getChildren()[i];\n        tabs.push(React.createElement(BorderButton_1.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n    };\n    for (var i = 0; i < border.getChildren().length; i++) {\n        layoutTab(i);\n    }\n    var borderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\n    if (border.getClassName() !== undefined) {\n        borderClasses += \" \" + border.getClassName();\n    }\n    // allow customization of tabset right/bottom buttons\n    var buttons = [];\n    var renderState = { headerContent: {}, buttons: buttons, stickyButtons: [], headerButtons: [] };\n    layout.customizeTabSet(border, renderState);\n    buttons = renderState.buttons;\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        var overflowContent = void 0;\n        if (typeof icons.more === \"function\") {\n            overflowContent = icons.more(border, hiddenTabs);\n        }\n        else {\n            overflowContent = (React.createElement(React.Fragment, null,\n                icons.more,\n                React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\n        }\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName()), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\n    }\n    var selectedIndex = border.getSelected();\n    if (selectedIndex !== -1) {\n        var selectedTabNode = border.getChildren()[selectedIndex];\n        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n            var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n            buttons.push(React.createElement(\"button\", { key: \"float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\n        }\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName()) }, buttons));\n    style = layout.styleFont(style);\n    var innerStyle = {};\n    var borderHeight = border.getBorderBarSize() - 1;\n    if (border.getLocation() === DockLocation_1.DockLocation.LEFT) {\n        innerStyle = { right: borderHeight, height: borderHeight, top: position };\n    }\n    else if (border.getLocation() === DockLocation_1.DockLocation.RIGHT) {\n        innerStyle = { left: borderHeight, height: borderHeight, top: position };\n    }\n    else {\n        innerStyle = { height: borderHeight, left: position };\n    }\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", style: style, className: borderClasses, \"data-layout-path\": path, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },\n        React.createElement(\"div\", { style: { height: borderHeight }, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()) },\n            React.createElement(\"div\", { style: innerStyle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName()) }, tabs)),\n        toolbar));\n};\nexports.BorderTabSet = BorderTabSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderTabSet.tsx?");
 
 /***/ }),
 
@@ -612,6 +648,18 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 
 /***/ }),
 
+/***/ "./src/view/Icons.tsx":
+/*!****************************!*\
+  !*** ./src/view/Icons.tsx ***!
+  \****************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.RestoreIcon = exports.PopoutIcon = exports.OverflowIcon = exports.MaximizeIcon = exports.CloseIcon = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar style = { width: \"1em\", height: \"1em\", display: \"flex\", alignItems: \"center\" };\nvar CloseIcon = function () {\n    return (React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\" },\n        React.createElement(\"path\", { fill: \"none\", d: \"M0 0h24v24H0z\" }),\n        React.createElement(\"path\", { stroke: \"gray\", fill: \"gray\", d: \"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" })));\n};\nexports.CloseIcon = CloseIcon;\nvar MaximizeIcon = function () {\n    return (React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"gray\" },\n        React.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\n        React.createElement(\"path\", { stroke: \"gray\", d: \"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\" })));\n};\nexports.MaximizeIcon = MaximizeIcon;\nvar OverflowIcon = function () {\n    return (React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"gray\" },\n        React.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\n        React.createElement(\"path\", { stroke: \"gray\", d: \"M7 10l5 5 5-5z\" })));\n};\nexports.OverflowIcon = OverflowIcon;\nvar PopoutIcon = function () {\n    return (React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"gray\" },\n        React.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\n        React.createElement(\"path\", { stroke: \"gray\", d: \"M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z\" })));\n};\nexports.PopoutIcon = PopoutIcon;\nvar RestoreIcon = function () {\n    return (React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"gray\" },\n        React.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\n        React.createElement(\"path\", { stroke: \"gray\", d: \"M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z\" })));\n};\nexports.RestoreIcon = RestoreIcon;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Icons.tsx?");
+
+/***/ }),
+
 /***/ "./src/view/Layout.tsx":
 /*!*****************************!*\
   !*** ./src/view/Layout.tsx ***!
@@ -620,7 +668,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Layout = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderTabSet_1 = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\nvar Splitter_1 = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\nvar FloatingWindow_1 = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\nvar FloatingWindowTab_1 = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\nvar TabFloating_1 = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\n// not work on any version if IE or the original Edge browser\n// Assume any recent desktop browser not IE or original Edge will work\n/** @hidden @internal */\n// @ts-ignore\nvar isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\n/** @hidden @internal */\nvar isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n/** @hidden @internal */\nvar defaultSupportsPopout = isDesktop && !isIEorEdge;\n/**\n * A React component that hosts a multi-tabbed layout\n */\nvar Layout = /** @class */ (function (_super) {\n    __extends(Layout, _super);\n    function Layout(props) {\n        var _this = _super.call(this, props) || this;\n        /** @hidden @internal */\n        _this.firstMove = false;\n        /** @hidden @internal */\n        _this.dragRectRendered = true;\n        /** @hidden @internal */\n        _this.dragDivText = \"\";\n        /** @hidden @internal */\n        _this.edgeRectLength = 100;\n        /** @hidden @internal */\n        _this.edgeRectWidth = 10;\n        /** @hidden @internal */\n        _this.edgesShown = false;\n        /** @hidden @internal */\n        _this.onModelChange = function () {\n            _this.forceUpdate();\n            if (_this.props.onModelChange) {\n                _this.props.onModelChange(_this.props.model);\n            }\n        };\n        /** @hidden @internal */\n        _this.updateRect = function (domRect) {\n            if (domRect === void 0) { domRect = _this.getDomRect(); }\n            var rect = new Rect_1.default(0, 0, domRect.width, domRect.height);\n            if (!rect.equals(_this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                _this.setState({ rect: rect });\n            }\n        };\n        /** @hidden @internal */\n        _this.updateLayoutMetrics = function () {\n            if (_this.findHeaderBarSizeRef.current) {\n                var headerBarSize = _this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\n                if (headerBarSize !== _this.state.calculatedHeaderBarSize) {\n                    _this.setState({ calculatedHeaderBarSize: headerBarSize });\n                }\n            }\n            if (_this.findTabBarSizeRef.current) {\n                var tabBarSize = _this.findTabBarSizeRef.current.getBoundingClientRect().height;\n                if (tabBarSize !== _this.state.calculatedTabBarSize) {\n                    _this.setState({ calculatedTabBarSize: tabBarSize });\n                }\n            }\n            if (_this.findBorderBarSizeRef.current) {\n                var borderBarSize = _this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== _this.state.calculatedBorderBarSize) {\n                    _this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.getClassName = function (defaultClassName) {\n            if (_this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return _this.props.classNameMapper(defaultClassName);\n            }\n        };\n        /** @hidden @internal */\n        _this.onCloseWindow = function (id) {\n            _this.doAction(Actions_1.default.unFloatTab(id));\n            try {\n                _this.props.model.getNodeById(id)._setWindow(undefined);\n            }\n            catch (e) {\n                // catch incase it was a model change\n            }\n        };\n        /** @hidden @internal */\n        _this.onSetWindow = function (id, window) {\n            _this.props.model.getNodeById(id)._setWindow(window);\n        };\n        /** @hidden @internal */\n        _this.onCancelAdd = function () {\n            var _a, _b;\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            if (_this.fnNewNodeDropped != null) {\n                _this.fnNewNodeDropped();\n                _this.fnNewNodeDropped = undefined;\n            }\n            try {\n                (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n            }\n            catch (e) {\n                console.error(e);\n            }\n            DragDrop_1.default.instance.hideGlass();\n            _this.newTabJson = undefined;\n            _this.customDrop = undefined;\n        };\n        /** @hidden @internal */\n        _this.onCancelDrag = function (wasDragging) {\n            var _a, _b;\n            if (wasDragging) {\n                var rootdiv = _this.selfRef.current;\n                try {\n                    rootdiv.removeChild(_this.outlineDiv);\n                }\n                catch (e) { }\n                try {\n                    rootdiv.removeChild(_this.dragDiv);\n                }\n                catch (e) { }\n                _this.dragDiv = undefined;\n                _this.hideEdges(rootdiv);\n                if (_this.fnNewNodeDropped != null) {\n                    _this.fnNewNodeDropped();\n                    _this.fnNewNodeDropped = undefined;\n                }\n                try {\n                    (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                DragDrop_1.default.instance.hideGlass();\n                _this.newTabJson = undefined;\n                _this.customDrop = undefined;\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.default.CENTER });\n        };\n        /** @hidden @internal */\n        _this.onDragDivMouseDown = function (event) {\n            event.preventDefault();\n            _this.dragStart(event, _this.dragDivText, TabNode_1.default._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);\n        };\n        /** @hidden @internal */\n        _this.dragStart = function (event, dragDivText, node, allowDrag, onClick, onDoubleClick) {\n            if (_this.props.model.getMaximizedTabset() !== undefined || !allowDrag) {\n                DragDrop_1.default.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n            else {\n                _this.dragNode = node;\n                _this.dragDivText = dragDivText;\n                DragDrop_1.default.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n        };\n        /** @hidden @internal */\n        _this.dragRectRender = function (text, node, json, onRendered) {\n            var content = React.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\n            if (_this.props.onRenderDragRect !== undefined) {\n                var customContent = _this.props.onRenderDragRect(text, node, json);\n                if (customContent !== undefined) {\n                    content = customContent;\n                }\n            }\n            // hide div until the render is complete\n            _this.dragDiv.style.visibility = \"hidden\";\n            _this.dragRectRendered = false;\n            ReactDOM.render(React.createElement(DragRectRenderWrapper\n            // wait for it to be rendered\n            , { \n                // wait for it to be rendered\n                onRendered: function () {\n                    _this.dragRectRendered = true;\n                    onRendered === null || onRendered === void 0 ? void 0 : onRendered();\n                } }, content), _this.dragDiv);\n        };\n        /** @hidden @internal */\n        _this.onDragStart = function () {\n            _this.dropInfo = undefined;\n            _this.customDrop = undefined;\n            var rootdiv = _this.selfRef.current;\n            _this.outlineDiv = _this.currentDocument.createElement(\"div\");\n            _this.outlineDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            _this.outlineDiv.style.visibility = \"hidden\";\n            rootdiv.appendChild(_this.outlineDiv);\n            if (_this.dragDiv == null) {\n                _this.dragDiv = _this.currentDocument.createElement(\"div\");\n                _this.dragDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragRectRender(_this.dragDivText, _this.dragNode, _this.newTabJson);\n                rootdiv.appendChild(_this.dragDiv);\n            }\n            // add edge indicators\n            _this.showEdges(rootdiv);\n            if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.default && _this.dragNode.getTabRect() !== undefined) {\n                _this.dragNode.getTabRect().positionElement(_this.outlineDiv);\n            }\n            _this.firstMove = true;\n            return true;\n        };\n        /** @hidden @internal */\n        _this.onDragMove = function (event) {\n            if (_this.firstMove === false) {\n                var speed = _this.props.model._getAttribute(\"tabDragSpeed\");\n                _this.outlineDiv.style.transition = \"top \" + speed + \"s, left \" + speed + \"s, width \" + speed + \"s, height \" + speed + \"s\";\n            }\n            _this.firstMove = false;\n            var clientRect = _this.selfRef.current.getBoundingClientRect();\n            var pos = {\n                x: event.clientX - clientRect.left,\n                y: event.clientY - clientRect.top,\n            };\n            _this.checkForBorderToShow(pos.x, pos.y);\n            // keep it between left & right\n            var dragRect = _this.dragDiv.getBoundingClientRect();\n            var newLeft = pos.x - dragRect.width / 2;\n            if (newLeft + dragRect.width > clientRect.width) {\n                newLeft = clientRect.width - dragRect.width;\n            }\n            newLeft = Math.max(0, newLeft);\n            _this.dragDiv.style.left = newLeft + \"px\";\n            _this.dragDiv.style.top = pos.y + 5 + \"px\";\n            if (_this.dragRectRendered && _this.dragDiv.style.visibility === \"hidden\") {\n                // make visible once the drag rect has been rendered\n                _this.dragDiv.style.visibility = \"visible\";\n            }\n            var dropInfo = _this.props.model._findDropTargetNode(_this.dragNode, pos.x, pos.y);\n            if (dropInfo) {\n                if (_this.props.onTabDrag) {\n                    _this.handleCustomTabDrag(dropInfo, pos, event);\n                }\n                else {\n                    _this.dropInfo = dropInfo;\n                    _this.outlineDiv.className = _this.getClassName(dropInfo.className);\n                    dropInfo.rect.positionElement(_this.outlineDiv);\n                    _this.outlineDiv.style.visibility = \"visible\";\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.onDragEnd = function (event) {\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.outlineDiv);\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            _this.hideEdges(rootdiv);\n            DragDrop_1.default.instance.hideGlass();\n            if (_this.dropInfo) {\n                if (_this.customDrop) {\n                    _this.newTabJson = undefined;\n                    try {\n                        var _a = _this.customDrop, callback = _a.callback, dragging = _a.dragging, over = _a.over, x = _a.x, y = _a.y, location_1 = _a.location;\n                        callback(dragging, over, x, y, location_1);\n                        if (_this.fnNewNodeDropped != null) {\n                            _this.fnNewNodeDropped();\n                            _this.fnNewNodeDropped = undefined;\n                        }\n                    }\n                    catch (e) {\n                        console.error(e);\n                    }\n                }\n                else if (_this.newTabJson !== undefined) {\n                    var newNode = _this.doAction(Actions_1.default.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                    if (_this.fnNewNodeDropped != null) {\n                        _this.fnNewNodeDropped(newNode, event);\n                        _this.fnNewNodeDropped = undefined;\n                    }\n                    _this.newTabJson = undefined;\n                }\n                else if (_this.dragNode !== undefined) {\n                    _this.doAction(Actions_1.default.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                }\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.default.CENTER });\n        };\n        _this.props.model._setChangeListener(_this.onModelChange);\n        _this.tabIds = [];\n        _this.selfRef = React.createRef();\n        _this.findHeaderBarSizeRef = React.createRef();\n        _this.findTabBarSizeRef = React.createRef();\n        _this.findBorderBarSizeRef = React.createRef();\n        _this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        _this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        // For backwards compatibility, prop closeIcon sets prop icons.close:\n        _this.icons = props.closeIcon ? Object.assign({ close: props.closeIcon }, props.icons) : props.icons;\n        _this.firstRender = true;\n        _this.state = {\n            rect: new Rect_1.default(0, 0, 0, 0),\n            calculatedHeaderBarSize: 25,\n            calculatedTabBarSize: 26,\n            calculatedBorderBarSize: 30,\n            editingTab: undefined,\n            showHiddenBorder: DockLocation_1.default.CENTER,\n        };\n        _this.onDragEnter = _this.onDragEnter.bind(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    Layout.prototype.styleFont = function (style) {\n        if (this.props.font) {\n            if (this.props.font.size) {\n                style.fontSize = this.props.font.size;\n            }\n            if (this.props.font.family) {\n                style.fontFamily = this.props.font.family;\n            }\n            if (this.props.font.style) {\n                style.fontStyle = this.props.font.style;\n            }\n            if (this.props.font.weight) {\n                style.fontWeight = this.props.font.weight;\n            }\n        }\n        return style;\n    };\n    /** @hidden @internal */\n    Layout.prototype.doAction = function (action) {\n        if (this.props.onAction !== undefined) {\n            var outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidMount = function () {\n        var _this = this;\n        this.updateRect();\n        this.updateLayoutMetrics();\n        // need to re-render if size changes\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.resizeObserver = new ResizeObserver(function (entries) {\n            _this.updateRect(entries[0].contentRect);\n        });\n        this.resizeObserver.observe(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidUpdate = function () {\n        this.updateLayoutMetrics();\n        if (this.props.model !== this.previousModel) {\n            if (this.previousModel !== undefined) {\n                this.previousModel._setChangeListener(undefined); // stop listening to old model\n            }\n            this.props.model._setChangeListener(this.onModelChange);\n            this.previousModel = this.props.model;\n        }\n        // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\n    };\n    /** @hidden @internal */\n    Layout.prototype.getCurrentDocument = function () {\n        return this.currentDocument;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getDomRect = function () {\n        return this.selfRef.current.getBoundingClientRect();\n    };\n    /** @hidden @internal */\n    Layout.prototype.getRootDiv = function () {\n        return this.selfRef.current;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isSupportsPopout = function () {\n        return this.supportsPopout;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isRealtimeResize = function () {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.onTabDrag = function () {\n        var _a, _b;\n        var args = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            args[_i] = arguments[_i];\n        }\n        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args));\n    };\n    /** @hidden @internal */\n    Layout.prototype.getPopoutURL = function () {\n        return this.popoutURL;\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentWillUnmount = function () {\n        var _a;\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.setEditingTab = function (tabNode) {\n        this.setState({ editingTab: tabNode });\n    };\n    /** @hidden @internal */\n    Layout.prototype.getEditingTab = function () {\n        return this.state.editingTab;\n    };\n    /** @hidden @internal */\n    Layout.prototype.render = function () {\n        var _this = this;\n        // first render will be used to find the size (via selfRef)\n        if (this.firstRender) {\n            this.firstRender = false;\n            return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\n        }\n        this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\n        // this.start = Date.now();\n        var borderComponents = [];\n        var tabSetComponents = [];\n        var floatingWindows = [];\n        var tabComponents = {};\n        var splitterComponents = [];\n        var metrics = {\n            headerBarSize: this.state.calculatedHeaderBarSize,\n            tabBarSize: this.state.calculatedTabBarSize,\n            borderBarSize: this.state.calculatedBorderBarSize,\n        };\n        this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\n        this.centerRect = this.props.model._layout(this.state.rect, metrics);\n        this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\n        this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n        if (this.edgesShown) {\n            this.repositionEdges(this.state.rect);\n        }\n        var nextTopIds = [];\n        var nextTopIdsMap = {};\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        this.tabIds.forEach(function (t) {\n            if (tabComponents[t]) {\n                nextTopIds.push(t);\n                nextTopIdsMap[t] = t;\n            }\n        });\n        this.tabIds = nextTopIds;\n        // Add tabs that have been added to the DOM\n        Object.keys(tabComponents).forEach(function (t) {\n            if (!nextTopIdsMap[t]) {\n                _this.tabIds.push(t);\n            }\n        });\n        // this.layoutTime = (Date.now() - this.start);\n        return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\n            tabSetComponents,\n            this.tabIds.map(function (t) {\n                return tabComponents[t];\n            }),\n            borderComponents,\n            splitterComponents,\n            floatingWindows,\n            this.metricsElements()));\n    };\n    /** @hidden @internal */\n    Layout.prototype.metricsElements = function () {\n        // used to measure the tab and border tab sizes\n        var fontStyle = this.styleFont({ visibility: \"hidden\" });\n        return (React.createElement(React.Fragment, null,\n            React.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\n            React.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\n            React.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderBorder = function (borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\n        for (var _i = 0, _a = borderSet.getBorders(); _i < _a.length; _i++) {\n            var border = _a[_i];\n            var borderPath = \"/border/\" + border.getLocation().getName();\n            if (border.isShowing()) {\n                borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: \"border_\" + border.getLocation().getName(), path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                var drawChildren = border._getDrawChildren();\n                var i = 0;\n                var tabCount = 0;\n                for (var _b = 0, drawChildren_1 = drawChildren; _b < drawChildren_1.length; _b++) {\n                    var child = drawChildren_1[_b];\n                    if (child instanceof SplitterNode_1.default) {\n                        var path = borderPath + \"/s\";\n                        splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\n                    }\n                    else if (child instanceof TabNode_1.default) {\n                        var path = borderPath + \"/t\" + tabCount++;\n                        if (this.supportsPopout && child.isFloating()) {\n                            var rect = this._getScreenRect(child);\n                            floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                                React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                            tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\n                        }\n                        else {\n                            tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\n                        }\n                    }\n                    i++;\n                }\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderChildren = function (path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\n        var drawChildren = node._getDrawChildren();\n        var splitterCount = 0;\n        var tabCount = 0;\n        var rowCount = 0;\n        for (var _i = 0, _a = drawChildren; _i < _a.length; _i++) {\n            var child = _a[_i];\n            if (child instanceof SplitterNode_1.default) {\n                var newPath = path + \"/s\" + (splitterCount++);\n                splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\n            }\n            else if (child instanceof TabSetNode_1.default) {\n                var newPath = path + \"/ts\" + (rowCount++);\n                tabSetComponents.push(React.createElement(TabSet_1.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n            else if (child instanceof TabNode_1.default) {\n                var newPath = path + \"/t\" + (tabCount++);\n                var selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\n                if (selectedTab === undefined) {\n                    // this should not happen!\n                    console.warn(\"undefined selectedTab should not happen\");\n                }\n                if (this.supportsPopout && child.isFloating()) {\n                    var rect = this._getScreenRect(child);\n                    floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                    tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\n                }\n                else {\n                    tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\n                }\n            }\n            else {\n                // is row\n                var newPath = path + ((child.getOrientation() === __1.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype._getScreenRect = function (node) {\n        var rect = node.getRect().clone();\n        var bodyRect = this.selfRef.current.getBoundingClientRect();\n        var navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\n        var navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\n        rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\n        rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\n        return rect;\n    };\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToTabSet = function (tabsetId, json) {\n        var tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.default.addNode(json, tabsetId, DockLocation_1.default.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToActiveTabSet = function (json) {\n        var tabsetNode = this.props.model.getActiveTabset();\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.default.addNode(json, tabsetNode.getId(), DockLocation_1.default.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDrop = function (dragText, json, onDrop) {\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        this.dragStart(undefined, dragText, TabNode_1.default._fromJson(json, this.props.model, false), true, undefined, undefined);\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\n     * mouse down on the panel\n     *\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDropIndirect = function (dragText, json, onDrop) {\n        var _this = this;\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        DragDrop_1.default.instance.addGlass(this.onCancelAdd);\n        this.dragDivText = dragText;\n        this.dragDiv = this.currentDocument.createElement(\"div\");\n        this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n        this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\n        this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown);\n        this.dragRectRender(this.dragDivText, undefined, this.newTabJson, function () {\n            if (_this.dragDiv) {\n                // now it's been rendered into the dom it can be centered\n                _this.dragDiv.style.visibility = \"visible\";\n                var domRect = _this.dragDiv.getBoundingClientRect();\n                var r = new Rect_1.default(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\n                r.centerInRect(_this.state.rect);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragDiv.style.left = r.x + \"px\";\n                _this.dragDiv.style.top = r.y + \"px\";\n            }\n        });\n        var rootdiv = this.selfRef.current;\n        rootdiv.appendChild(this.dragDiv);\n    };\n    /** @hidden @internal */\n    Layout.prototype.handleCustomTabDrag = function (dropInfo, pos, event) {\n        var _this = this;\n        var _a, _b, _c;\n        var invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\n        var currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\n        this.customDrop = undefined;\n        var dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.default ? this.dragNode : undefined);\n        if (dragging && (dropInfo.node instanceof TabSetNode_1.default || dropInfo.node instanceof BorderNode_1.default) && dropInfo.index === -1) {\n            var selected = dropInfo.node.getSelectedNode();\n            var tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\n            if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\n                var customDrop = undefined;\n                try {\n                    var dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, function () { return _this.onDragMove(event); });\n                    if (dest) {\n                        customDrop = {\n                            rect: new Rect_1.default(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\n                            callback: dest.callback,\n                            invalidated: dest.invalidated,\n                            dragging: dragging,\n                            over: selected,\n                            x: pos.x - tabRect.x,\n                            y: pos.y - tabRect.y,\n                            location: dropInfo.location,\n                            cursor: dest.cursor\n                        };\n                    }\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\n                    invalidated = undefined;\n                }\n                this.customDrop = customDrop;\n            }\n        }\n        this.dropInfo = dropInfo;\n        this.outlineDiv.className = this.getClassName(this.customDrop ? Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\n        if (this.customDrop) {\n            this.customDrop.rect.positionElement(this.outlineDiv);\n        }\n        else {\n            dropInfo.rect.positionElement(this.outlineDiv);\n        }\n        DragDrop_1.default.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\n        this.outlineDiv.style.visibility = \"visible\";\n        try {\n            invalidated === null || invalidated === void 0 ? void 0 : invalidated();\n        }\n        catch (e) {\n            console.error(e);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.onDragEnter = function (event) {\n        // DragDrop keeps track of number of dragenters minus the number of\n        // dragleaves. Only start a new drag if there isn't one already.\n        if (DragDrop_1.default.instance.isDragging())\n            return;\n        var drag = this.props.onExternalDrag(event);\n        if (drag) {\n            // Mimic addTabWithDragAndDrop, but pass in DragEvent\n            this.fnNewNodeDropped = drag.onDrop;\n            this.newTabJson = drag.json;\n            this.dragStart(event, drag.dragText, TabNode_1.default._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.checkForBorderToShow = function (x, y) {\n        var r = this.props.model._getOuterInnerRects().outer;\n        var c = r.getCenter();\n        var margin = this.edgeRectWidth;\n        var offset = this.edgeRectLength / 2;\n        var overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.default.CENTER) {\n            if ((y > c.y - offset && y < c.y + offset) ||\n                (x > c.x - offset && x < c.x + offset)) {\n                overEdge = true;\n            }\n        }\n        var location = DockLocation_1.default.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = DockLocation_1.default.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = DockLocation_1.default.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = DockLocation_1.default.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = DockLocation_1.default.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.showEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var length_1 = this.edgeRectLength + \"px\";\n            var radius = \"50px\";\n            var width = this.edgeRectWidth + \"px\";\n            this.edgeTopDiv = this.currentDocument.createElement(\"div\");\n            this.edgeTopDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeTopDiv.style.width = length_1;\n            this.edgeTopDiv.style.height = width;\n            this.edgeTopDiv.style.borderBottomLeftRadius = radius;\n            this.edgeTopDiv.style.borderBottomRightRadius = radius;\n            this.edgeLeftDiv = this.currentDocument.createElement(\"div\");\n            this.edgeLeftDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeLeftDiv.style.width = width;\n            this.edgeLeftDiv.style.height = length_1;\n            this.edgeLeftDiv.style.borderTopRightRadius = radius;\n            this.edgeLeftDiv.style.borderBottomRightRadius = radius;\n            this.edgeBottomDiv = this.currentDocument.createElement(\"div\");\n            this.edgeBottomDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeBottomDiv.style.width = length_1;\n            this.edgeBottomDiv.style.height = width;\n            this.edgeBottomDiv.style.borderTopLeftRadius = radius;\n            this.edgeBottomDiv.style.borderTopRightRadius = radius;\n            this.edgeRightDiv = this.currentDocument.createElement(\"div\");\n            this.edgeRightDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeRightDiv.style.width = width;\n            this.edgeRightDiv.style.height = length_1;\n            this.edgeRightDiv.style.borderTopLeftRadius = radius;\n            this.edgeRightDiv.style.borderBottomLeftRadius = radius;\n            this.repositionEdges(this.state.rect);\n            rootdiv.appendChild(this.edgeTopDiv);\n            rootdiv.appendChild(this.edgeLeftDiv);\n            rootdiv.appendChild(this.edgeBottomDiv);\n            rootdiv.appendChild(this.edgeRightDiv);\n            this.edgesShown = true;\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.repositionEdges = function (domRect) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var r = this.centerRect;\n            this.edgeTopDiv.style.top = r.y + \"px\";\n            this.edgeTopDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.left = r.x + \"px\";\n            this.edgeBottomDiv.style.bottom = domRect.height - r.getBottom() + \"px\";\n            this.edgeBottomDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.right = domRect.width - r.getRight() + \"px\";\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.hideEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            try {\n                rootdiv.removeChild(this.edgeTopDiv);\n                rootdiv.removeChild(this.edgeLeftDiv);\n                rootdiv.removeChild(this.edgeBottomDiv);\n                rootdiv.removeChild(this.edgeRightDiv);\n            }\n            catch (e) { }\n        }\n        this.edgesShown = false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.maximize = function (tabsetNode) {\n        this.doAction(Actions_1.default.maximizeToggle(tabsetNode.getId()));\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTab = function (tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTabSet = function (tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.i18nName = function (id, param) {\n        var message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getOnRenderFloatingTabPlaceholder = function () {\n        return this.props.onRenderFloatingTabPlaceholder;\n    };\n    /** @hidden @internal */\n    Layout.prototype.showContextMenu = function (node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.auxMouseClick = function (node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    };\n    return Layout;\n}(React.Component));\nexports.Layout = Layout;\n/** @hidden @internal */\nvar DragRectRenderWrapper = function (props) {\n    React.useEffect(function () {\n        var _a;\n        (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\n    }, [props]);\n    return (React.createElement(React.Fragment, null, props.children));\n};\nexports.default = Layout;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Layout = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderTabSet_1 = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\nvar Splitter_1 = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\nvar FloatingWindow_1 = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\nvar FloatingWindowTab_1 = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\nvar TabFloating_1 = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\nvar Icons_1 = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\nvar TabButtonStamp_1 = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\nvar defaultIcons = {\n    close: React.createElement(Icons_1.CloseIcon, null),\n    closeTabset: React.createElement(Icons_1.CloseIcon, null),\n    popout: React.createElement(Icons_1.PopoutIcon, null),\n    maximize: React.createElement(Icons_1.MaximizeIcon, null),\n    restore: React.createElement(Icons_1.RestoreIcon, null),\n    more: React.createElement(Icons_1.OverflowIcon, null),\n};\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\n// not work on any version if IE or the original Edge browser\n// Assume any recent desktop browser not IE or original Edge will work\n/** @hidden @internal */\n// @ts-ignore\nvar isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\n/** @hidden @internal */\nvar isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n/** @hidden @internal */\nvar defaultSupportsPopout = isDesktop && !isIEorEdge;\n/**\n * A React component that hosts a multi-tabbed layout\n */\nvar Layout = /** @class */ (function (_super) {\n    __extends(Layout, _super);\n    function Layout(props) {\n        var _this = _super.call(this, props) || this;\n        /** @hidden @internal */\n        _this.firstMove = false;\n        /** @hidden @internal */\n        _this.dragRectRendered = true;\n        /** @hidden @internal */\n        _this.dragDivText = undefined;\n        /** @hidden @internal */\n        _this.edgeRectLength = 100;\n        /** @hidden @internal */\n        _this.edgeRectWidth = 10;\n        /** @hidden @internal */\n        _this.edgesShown = false;\n        /** @hidden @internal */\n        _this.onModelChange = function () {\n            _this.forceUpdate();\n            if (_this.props.onModelChange) {\n                _this.props.onModelChange(_this.props.model);\n            }\n        };\n        /** @hidden @internal */\n        _this.updateRect = function (domRect) {\n            if (domRect === void 0) { domRect = _this.getDomRect(); }\n            var rect = new Rect_1.Rect(0, 0, domRect.width, domRect.height);\n            if (!rect.equals(_this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                _this.setState({ rect: rect });\n            }\n        };\n        /** @hidden @internal */\n        _this.updateLayoutMetrics = function () {\n            if (_this.findHeaderBarSizeRef.current) {\n                var headerBarSize = _this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\n                if (headerBarSize !== _this.state.calculatedHeaderBarSize) {\n                    _this.setState({ calculatedHeaderBarSize: headerBarSize });\n                }\n            }\n            if (_this.findTabBarSizeRef.current) {\n                var tabBarSize = _this.findTabBarSizeRef.current.getBoundingClientRect().height;\n                if (tabBarSize !== _this.state.calculatedTabBarSize) {\n                    _this.setState({ calculatedTabBarSize: tabBarSize });\n                }\n            }\n            if (_this.findBorderBarSizeRef.current) {\n                var borderBarSize = _this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== _this.state.calculatedBorderBarSize) {\n                    _this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.getClassName = function (defaultClassName) {\n            if (_this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return _this.props.classNameMapper(defaultClassName);\n            }\n        };\n        /** @hidden @internal */\n        _this.onCloseWindow = function (id) {\n            _this.doAction(Actions_1.Actions.unFloatTab(id));\n            try {\n                _this.props.model.getNodeById(id)._setWindow(undefined);\n            }\n            catch (e) {\n                // catch incase it was a model change\n            }\n        };\n        /** @hidden @internal */\n        _this.onSetWindow = function (id, window) {\n            _this.props.model.getNodeById(id)._setWindow(window);\n        };\n        /** @hidden @internal */\n        _this.onCancelAdd = function () {\n            var _a, _b;\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            _this.hidePortal();\n            if (_this.fnNewNodeDropped != null) {\n                _this.fnNewNodeDropped();\n                _this.fnNewNodeDropped = undefined;\n            }\n            try {\n                (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n            }\n            catch (e) {\n                console.error(e);\n            }\n            DragDrop_1.DragDrop.instance.hideGlass();\n            _this.newTabJson = undefined;\n            _this.customDrop = undefined;\n        };\n        /** @hidden @internal */\n        _this.onCancelDrag = function (wasDragging) {\n            var _a, _b;\n            if (wasDragging) {\n                var rootdiv = _this.selfRef.current;\n                try {\n                    rootdiv.removeChild(_this.outlineDiv);\n                }\n                catch (e) { }\n                try {\n                    rootdiv.removeChild(_this.dragDiv);\n                }\n                catch (e) { }\n                _this.dragDiv = undefined;\n                _this.hidePortal();\n                _this.hideEdges(rootdiv);\n                if (_this.fnNewNodeDropped != null) {\n                    _this.fnNewNodeDropped();\n                    _this.fnNewNodeDropped = undefined;\n                }\n                try {\n                    (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                DragDrop_1.DragDrop.instance.hideGlass();\n                _this.newTabJson = undefined;\n                _this.customDrop = undefined;\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });\n        };\n        /** @hidden @internal */\n        _this.onDragDivMouseDown = function (event) {\n            event.preventDefault();\n            _this.dragStart(event, _this.dragDivText, TabNode_1.TabNode._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);\n        };\n        /** @hidden @internal */\n        _this.dragStart = function (event, dragDivText, node, allowDrag, onClick, onDoubleClick) {\n            if (_this.props.model.getMaximizedTabset() !== undefined || !allowDrag) {\n                DragDrop_1.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n            else {\n                _this.dragNode = node;\n                _this.dragDivText = dragDivText;\n                DragDrop_1.DragDrop.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n        };\n        /** @hidden @internal */\n        _this.dragRectRender = function (text, node, json, onRendered) {\n            var content;\n            if (text !== undefined) {\n                content = React.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\n            }\n            else {\n                if (node && node instanceof TabNode_1.TabNode) {\n                    content = (React.createElement(TabButtonStamp_1.TabButtonStamp, { node: node, layout: _this, iconFactory: _this.props.iconFactory, titleFactory: _this.props.titleFactory }));\n                }\n            }\n            if (_this.props.onRenderDragRect !== undefined) {\n                var customContent = _this.props.onRenderDragRect(content, node, json);\n                if (customContent !== undefined) {\n                    content = customContent;\n                }\n            }\n            // hide div until the render is complete\n            _this.dragDiv.style.visibility = \"hidden\";\n            _this.dragRectRendered = false;\n            _this.showPortal(React.createElement(DragRectRenderWrapper\n            // wait for it to be rendered\n            , { \n                // wait for it to be rendered\n                onRendered: function () {\n                    _this.dragRectRendered = true;\n                    onRendered === null || onRendered === void 0 ? void 0 : onRendered();\n                } }, content), _this.dragDiv);\n        };\n        /** @hidden @internal */\n        _this.showPortal = function (control, element) {\n            var portal = ReactDOM.createPortal(control, element);\n            _this.setState({ portal: portal });\n        };\n        /** @hidden @internal */\n        _this.hidePortal = function () {\n            _this.setState({ portal: undefined });\n        };\n        /** @hidden @internal */\n        _this.onDragStart = function () {\n            _this.dropInfo = undefined;\n            _this.customDrop = undefined;\n            var rootdiv = _this.selfRef.current;\n            _this.outlineDiv = _this.currentDocument.createElement(\"div\");\n            _this.outlineDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            _this.outlineDiv.style.visibility = \"hidden\";\n            rootdiv.appendChild(_this.outlineDiv);\n            if (_this.dragDiv == null) {\n                _this.dragDiv = _this.currentDocument.createElement(\"div\");\n                _this.dragDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragRectRender(_this.dragDivText, _this.dragNode, _this.newTabJson);\n                rootdiv.appendChild(_this.dragDiv);\n            }\n            // add edge indicators\n            _this.showEdges(rootdiv);\n            if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.TabNode && _this.dragNode.getTabRect() !== undefined) {\n                _this.dragNode.getTabRect().positionElement(_this.outlineDiv);\n            }\n            _this.firstMove = true;\n            return true;\n        };\n        /** @hidden @internal */\n        _this.onDragMove = function (event) {\n            if (_this.firstMove === false) {\n                var speed = _this.props.model._getAttribute(\"tabDragSpeed\");\n                _this.outlineDiv.style.transition = \"top \" + speed + \"s, left \" + speed + \"s, width \" + speed + \"s, height \" + speed + \"s\";\n            }\n            _this.firstMove = false;\n            var clientRect = _this.selfRef.current.getBoundingClientRect();\n            var pos = {\n                x: event.clientX - clientRect.left,\n                y: event.clientY - clientRect.top,\n            };\n            _this.checkForBorderToShow(pos.x, pos.y);\n            // keep it between left & right\n            var dragRect = _this.dragDiv.getBoundingClientRect();\n            var newLeft = pos.x - dragRect.width / 2;\n            if (newLeft + dragRect.width > clientRect.width) {\n                newLeft = clientRect.width - dragRect.width;\n            }\n            newLeft = Math.max(0, newLeft);\n            _this.dragDiv.style.left = newLeft + \"px\";\n            _this.dragDiv.style.top = pos.y + 5 + \"px\";\n            if (_this.dragRectRendered && _this.dragDiv.style.visibility === \"hidden\") {\n                // make visible once the drag rect has been rendered\n                _this.dragDiv.style.visibility = \"visible\";\n            }\n            var dropInfo = _this.props.model._findDropTargetNode(_this.dragNode, pos.x, pos.y);\n            if (dropInfo) {\n                if (_this.props.onTabDrag) {\n                    _this.handleCustomTabDrag(dropInfo, pos, event);\n                }\n                else {\n                    _this.dropInfo = dropInfo;\n                    _this.outlineDiv.className = _this.getClassName(dropInfo.className);\n                    dropInfo.rect.positionElement(_this.outlineDiv);\n                    _this.outlineDiv.style.visibility = \"visible\";\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.onDragEnd = function (event) {\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.outlineDiv);\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            _this.hidePortal();\n            _this.hideEdges(rootdiv);\n            DragDrop_1.DragDrop.instance.hideGlass();\n            if (_this.dropInfo) {\n                if (_this.customDrop) {\n                    _this.newTabJson = undefined;\n                    try {\n                        var _a = _this.customDrop, callback = _a.callback, dragging = _a.dragging, over = _a.over, x = _a.x, y = _a.y, location_1 = _a.location;\n                        callback(dragging, over, x, y, location_1);\n                        if (_this.fnNewNodeDropped != null) {\n                            _this.fnNewNodeDropped();\n                            _this.fnNewNodeDropped = undefined;\n                        }\n                    }\n                    catch (e) {\n                        console.error(e);\n                    }\n                }\n                else if (_this.newTabJson !== undefined) {\n                    var newNode = _this.doAction(Actions_1.Actions.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                    if (_this.fnNewNodeDropped != null) {\n                        _this.fnNewNodeDropped(newNode, event);\n                        _this.fnNewNodeDropped = undefined;\n                    }\n                    _this.newTabJson = undefined;\n                }\n                else if (_this.dragNode !== undefined) {\n                    _this.doAction(Actions_1.Actions.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                }\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });\n        };\n        _this.props.model._setChangeListener(_this.onModelChange);\n        _this.tabIds = [];\n        _this.selfRef = React.createRef();\n        _this.findHeaderBarSizeRef = React.createRef();\n        _this.findTabBarSizeRef = React.createRef();\n        _this.findBorderBarSizeRef = React.createRef();\n        _this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        _this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        _this.icons = __assign(__assign({}, defaultIcons), props.icons);\n        _this.firstRender = true;\n        _this.state = {\n            rect: new Rect_1.Rect(0, 0, 0, 0),\n            calculatedHeaderBarSize: 25,\n            calculatedTabBarSize: 26,\n            calculatedBorderBarSize: 30,\n            editingTab: undefined,\n            showHiddenBorder: DockLocation_1.DockLocation.CENTER,\n        };\n        _this.onDragEnter = _this.onDragEnter.bind(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    Layout.prototype.styleFont = function (style) {\n        if (this.props.font) {\n            if (this.selfRef.current) {\n                if (this.props.font.size) {\n                    this.selfRef.current.style.setProperty(\"--font-size\", this.props.font.size);\n                }\n                if (this.props.font.family) {\n                    this.selfRef.current.style.setProperty(\"--font-family\", this.props.font.family);\n                }\n            }\n            if (this.props.font.style) {\n                style.fontStyle = this.props.font.style;\n            }\n            if (this.props.font.weight) {\n                style.fontWeight = this.props.font.weight;\n            }\n        }\n        return style;\n    };\n    /** @hidden @internal */\n    Layout.prototype.doAction = function (action) {\n        if (this.props.onAction !== undefined) {\n            var outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidMount = function () {\n        var _this = this;\n        this.updateRect();\n        this.updateLayoutMetrics();\n        // need to re-render if size changes\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.resizeObserver = new ResizeObserver(function (entries) {\n            _this.updateRect(entries[0].contentRect);\n        });\n        this.resizeObserver.observe(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidUpdate = function () {\n        this.updateLayoutMetrics();\n        if (this.props.model !== this.previousModel) {\n            if (this.previousModel !== undefined) {\n                this.previousModel._setChangeListener(undefined); // stop listening to old model\n            }\n            this.props.model._setChangeListener(this.onModelChange);\n            this.previousModel = this.props.model;\n        }\n        // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\n    };\n    /** @hidden @internal */\n    Layout.prototype.getCurrentDocument = function () {\n        return this.currentDocument;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getDomRect = function () {\n        return this.selfRef.current.getBoundingClientRect();\n    };\n    /** @hidden @internal */\n    Layout.prototype.getRootDiv = function () {\n        return this.selfRef.current;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isSupportsPopout = function () {\n        return this.supportsPopout;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isRealtimeResize = function () {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.onTabDrag = function () {\n        var _a, _b;\n        var args = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            args[_i] = arguments[_i];\n        }\n        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args));\n    };\n    /** @hidden @internal */\n    Layout.prototype.getPopoutURL = function () {\n        return this.popoutURL;\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentWillUnmount = function () {\n        var _a;\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.setEditingTab = function (tabNode) {\n        this.setState({ editingTab: tabNode });\n    };\n    /** @hidden @internal */\n    Layout.prototype.getEditingTab = function () {\n        return this.state.editingTab;\n    };\n    /** @hidden @internal */\n    Layout.prototype.render = function () {\n        var _this = this;\n        // first render will be used to find the size (via selfRef)\n        if (this.firstRender) {\n            this.firstRender = false;\n            return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\n        }\n        this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\n        // this.start = Date.now();\n        var borderComponents = [];\n        var tabSetComponents = [];\n        var floatingWindows = [];\n        var tabComponents = {};\n        var splitterComponents = [];\n        var metrics = {\n            headerBarSize: this.state.calculatedHeaderBarSize,\n            tabBarSize: this.state.calculatedTabBarSize,\n            borderBarSize: this.state.calculatedBorderBarSize\n        };\n        this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\n        this.centerRect = this.props.model._layout(this.state.rect, metrics);\n        this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\n        this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n        if (this.edgesShown) {\n            this.repositionEdges(this.state.rect);\n        }\n        var nextTopIds = [];\n        var nextTopIdsMap = {};\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        this.tabIds.forEach(function (t) {\n            if (tabComponents[t]) {\n                nextTopIds.push(t);\n                nextTopIdsMap[t] = t;\n            }\n        });\n        this.tabIds = nextTopIds;\n        // Add tabs that have been added to the DOM\n        Object.keys(tabComponents).forEach(function (t) {\n            if (!nextTopIdsMap[t]) {\n                _this.tabIds.push(t);\n            }\n        });\n        // this.layoutTime = (Date.now() - this.start);\n        return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\n            tabSetComponents,\n            this.tabIds.map(function (t) {\n                return tabComponents[t];\n            }),\n            borderComponents,\n            splitterComponents,\n            floatingWindows,\n            this.metricsElements(),\n            this.state.portal));\n    };\n    /** @hidden @internal */\n    Layout.prototype.metricsElements = function () {\n        // used to measure the tab and border tab sizes\n        var fontStyle = this.styleFont({ visibility: \"hidden\" });\n        return (React.createElement(React.Fragment, null,\n            React.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\n            React.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\n            React.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderBorder = function (borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\n        for (var _i = 0, _a = borderSet.getBorders(); _i < _a.length; _i++) {\n            var border = _a[_i];\n            var borderPath = \"/border/\" + border.getLocation().getName();\n            if (border.isShowing()) {\n                borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: \"border_\" + border.getLocation().getName(), path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                var drawChildren = border._getDrawChildren();\n                var i = 0;\n                var tabCount = 0;\n                for (var _b = 0, drawChildren_1 = drawChildren; _b < drawChildren_1.length; _b++) {\n                    var child = drawChildren_1[_b];\n                    if (child instanceof SplitterNode_1.SplitterNode) {\n                        var path = borderPath + \"/s\";\n                        splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\n                    }\n                    else if (child instanceof TabNode_1.TabNode) {\n                        var path = borderPath + \"/t\" + tabCount++;\n                        if (this.supportsPopout && child.isFloating()) {\n                            var rect = this._getScreenRect(child);\n                            floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                                React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                            tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\n                        }\n                        else {\n                            tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\n                        }\n                    }\n                    i++;\n                }\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderChildren = function (path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\n        var drawChildren = node._getDrawChildren();\n        var splitterCount = 0;\n        var tabCount = 0;\n        var rowCount = 0;\n        for (var _i = 0, _a = drawChildren; _i < _a.length; _i++) {\n            var child = _a[_i];\n            if (child instanceof SplitterNode_1.SplitterNode) {\n                var newPath = path + \"/s\" + (splitterCount++);\n                splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\n            }\n            else if (child instanceof TabSetNode_1.TabSetNode) {\n                var newPath = path + \"/ts\" + (rowCount++);\n                tabSetComponents.push(React.createElement(TabSet_1.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n            else if (child instanceof TabNode_1.TabNode) {\n                var newPath = path + \"/t\" + (tabCount++);\n                var selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\n                if (selectedTab === undefined) {\n                    // this should not happen!\n                    console.warn(\"undefined selectedTab should not happen\");\n                }\n                if (this.supportsPopout && child.isFloating()) {\n                    var rect = this._getScreenRect(child);\n                    floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                    tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\n                }\n                else {\n                    tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\n                }\n            }\n            else {\n                // is row\n                var newPath = path + ((child.getOrientation() === __1.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype._getScreenRect = function (node) {\n        var rect = node.getRect().clone();\n        var bodyRect = this.selfRef.current.getBoundingClientRect();\n        var navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\n        var navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\n        rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\n        rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\n        return rect;\n    };\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToTabSet = function (tabsetId, json) {\n        var tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.Actions.addNode(json, tabsetId, DockLocation_1.DockLocation.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToActiveTabSet = function (json) {\n        var tabsetNode = this.props.model.getActiveTabset();\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.Actions.addNode(json, tabsetNode.getId(), DockLocation_1.DockLocation.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDrop = function (dragText, json, onDrop) {\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        this.dragStart(undefined, dragText, TabNode_1.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\n     * mouse down on the panel\n     *\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDropIndirect = function (dragText, json, onDrop) {\n        var _this = this;\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        DragDrop_1.DragDrop.instance.addGlass(this.onCancelAdd);\n        this.dragDivText = dragText;\n        this.dragDiv = this.currentDocument.createElement(\"div\");\n        this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n        this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\n        this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown);\n        this.dragRectRender(this.dragDivText, undefined, this.newTabJson, function () {\n            if (_this.dragDiv) {\n                // now it's been rendered into the dom it can be centered\n                _this.dragDiv.style.visibility = \"visible\";\n                var domRect = _this.dragDiv.getBoundingClientRect();\n                var r = new Rect_1.Rect(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\n                r.centerInRect(_this.state.rect);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragDiv.style.left = r.x + \"px\";\n                _this.dragDiv.style.top = r.y + \"px\";\n            }\n        });\n        var rootdiv = this.selfRef.current;\n        rootdiv.appendChild(this.dragDiv);\n    };\n    /** @hidden @internal */\n    Layout.prototype.handleCustomTabDrag = function (dropInfo, pos, event) {\n        var _this = this;\n        var _a, _b, _c;\n        var invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\n        var currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\n        this.customDrop = undefined;\n        var dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.TabNode ? this.dragNode : undefined);\n        if (dragging && (dropInfo.node instanceof TabSetNode_1.TabSetNode || dropInfo.node instanceof BorderNode_1.BorderNode) && dropInfo.index === -1) {\n            var selected = dropInfo.node.getSelectedNode();\n            var tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\n            if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\n                var customDrop = undefined;\n                try {\n                    var dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, function () { return _this.onDragMove(event); });\n                    if (dest) {\n                        customDrop = {\n                            rect: new Rect_1.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\n                            callback: dest.callback,\n                            invalidated: dest.invalidated,\n                            dragging: dragging,\n                            over: selected,\n                            x: pos.x - tabRect.x,\n                            y: pos.y - tabRect.y,\n                            location: dropInfo.location,\n                            cursor: dest.cursor\n                        };\n                    }\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\n                    invalidated = undefined;\n                }\n                this.customDrop = customDrop;\n            }\n        }\n        this.dropInfo = dropInfo;\n        this.outlineDiv.className = this.getClassName(this.customDrop ? Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\n        if (this.customDrop) {\n            this.customDrop.rect.positionElement(this.outlineDiv);\n        }\n        else {\n            dropInfo.rect.positionElement(this.outlineDiv);\n        }\n        DragDrop_1.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\n        this.outlineDiv.style.visibility = \"visible\";\n        try {\n            invalidated === null || invalidated === void 0 ? void 0 : invalidated();\n        }\n        catch (e) {\n            console.error(e);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.onDragEnter = function (event) {\n        // DragDrop keeps track of number of dragenters minus the number of\n        // dragleaves. Only start a new drag if there isn't one already.\n        if (DragDrop_1.DragDrop.instance.isDragging())\n            return;\n        var drag = this.props.onExternalDrag(event);\n        if (drag) {\n            // Mimic addTabWithDragAndDrop, but pass in DragEvent\n            this.fnNewNodeDropped = drag.onDrop;\n            this.newTabJson = drag.json;\n            this.dragStart(event, drag.dragText, TabNode_1.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.checkForBorderToShow = function (x, y) {\n        var r = this.props.model._getOuterInnerRects().outer;\n        var c = r.getCenter();\n        var margin = this.edgeRectWidth;\n        var offset = this.edgeRectLength / 2;\n        var overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.DockLocation.CENTER) {\n            if ((y > c.y - offset && y < c.y + offset) ||\n                (x > c.x - offset && x < c.x + offset)) {\n                overEdge = true;\n            }\n        }\n        var location = DockLocation_1.DockLocation.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = DockLocation_1.DockLocation.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = DockLocation_1.DockLocation.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = DockLocation_1.DockLocation.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = DockLocation_1.DockLocation.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.showEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var length_1 = this.edgeRectLength + \"px\";\n            var radius = \"50px\";\n            var width = this.edgeRectWidth + \"px\";\n            this.edgeTopDiv = this.currentDocument.createElement(\"div\");\n            this.edgeTopDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeTopDiv.style.width = length_1;\n            this.edgeTopDiv.style.height = width;\n            this.edgeTopDiv.style.borderBottomLeftRadius = radius;\n            this.edgeTopDiv.style.borderBottomRightRadius = radius;\n            this.edgeLeftDiv = this.currentDocument.createElement(\"div\");\n            this.edgeLeftDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeLeftDiv.style.width = width;\n            this.edgeLeftDiv.style.height = length_1;\n            this.edgeLeftDiv.style.borderTopRightRadius = radius;\n            this.edgeLeftDiv.style.borderBottomRightRadius = radius;\n            this.edgeBottomDiv = this.currentDocument.createElement(\"div\");\n            this.edgeBottomDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeBottomDiv.style.width = length_1;\n            this.edgeBottomDiv.style.height = width;\n            this.edgeBottomDiv.style.borderTopLeftRadius = radius;\n            this.edgeBottomDiv.style.borderTopRightRadius = radius;\n            this.edgeRightDiv = this.currentDocument.createElement(\"div\");\n            this.edgeRightDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeRightDiv.style.width = width;\n            this.edgeRightDiv.style.height = length_1;\n            this.edgeRightDiv.style.borderTopLeftRadius = radius;\n            this.edgeRightDiv.style.borderBottomLeftRadius = radius;\n            this.repositionEdges(this.state.rect);\n            rootdiv.appendChild(this.edgeTopDiv);\n            rootdiv.appendChild(this.edgeLeftDiv);\n            rootdiv.appendChild(this.edgeBottomDiv);\n            rootdiv.appendChild(this.edgeRightDiv);\n            this.edgesShown = true;\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.repositionEdges = function (domRect) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var r = this.centerRect;\n            this.edgeTopDiv.style.top = r.y + \"px\";\n            this.edgeTopDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.left = r.x + \"px\";\n            this.edgeBottomDiv.style.bottom = domRect.height - r.getBottom() + \"px\";\n            this.edgeBottomDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.right = domRect.width - r.getRight() + \"px\";\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.hideEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            try {\n                rootdiv.removeChild(this.edgeTopDiv);\n                rootdiv.removeChild(this.edgeLeftDiv);\n                rootdiv.removeChild(this.edgeBottomDiv);\n                rootdiv.removeChild(this.edgeRightDiv);\n            }\n            catch (e) { }\n        }\n        this.edgesShown = false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.maximize = function (tabsetNode) {\n        this.doAction(Actions_1.Actions.maximizeToggle(tabsetNode.getId()));\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTab = function (tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTabSet = function (tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.i18nName = function (id, param) {\n        var message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getOnRenderFloatingTabPlaceholder = function () {\n        return this.props.onRenderFloatingTabPlaceholder;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getShowOverflowMenu = function () {\n        return this.props.onShowOverflowMenu;\n    };\n    /** @hidden @internal */\n    Layout.prototype.showContextMenu = function (node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.auxMouseClick = function (node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    };\n    return Layout;\n}(React.Component));\nexports.Layout = Layout;\n/** @hidden @internal */\nvar DragRectRenderWrapper = function (props) {\n    React.useEffect(function () {\n        var _a;\n        (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\n    }, [props]);\n    return (React.createElement(React.Fragment, null, props.children));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
 
 /***/ }),
 
@@ -632,7 +680,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Splitter = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar Splitter = function (props) {\n    var layout = props.layout, node = props.node, path = props.path;\n    var pBounds = React.useRef([]);\n    var outlineDiv = React.useRef(undefined);\n    var parentNode = node.getParent();\n    var onMouseDown = function (event) {\n        DragDrop_1.default.instance.setGlassCursorOverride(node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\");\n        DragDrop_1.default.instance.startDrag(event, onDragStart, onDragMove, onDragEnd, onDragCancel, undefined, undefined, layout.getCurrentDocument(), layout.getRootDiv());\n        pBounds.current = parentNode._getSplitterBounds(node, true);\n        var rootdiv = layout.getRootDiv();\n        outlineDiv.current = layout.getCurrentDocument().createElement(\"div\");\n        outlineDiv.current.style.position = \"absolute\";\n        outlineDiv.current.className = layout.getClassName(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_DRAG);\n        outlineDiv.current.style.cursor = node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\";\n        var r = node.getRect();\n        if (node.getOrientation() === Orientation_1.default.VERT && r.width < 2) {\n            r.width = 2;\n        }\n        else if (node.getOrientation() === Orientation_1.default.HORZ && r.height < 2) {\n            r.height = 2;\n        }\n        r.positionElement(outlineDiv.current);\n        rootdiv.appendChild(outlineDiv.current);\n    };\n    var onDragCancel = function (wasDragging) {\n        var rootdiv = layout.getRootDiv();\n        rootdiv.removeChild(outlineDiv.current);\n    };\n    var onDragStart = function () {\n        return true;\n    };\n    var onDragMove = function (event) {\n        var clientRect = layout.getDomRect();\n        var pos = {\n            x: event.clientX - clientRect.left,\n            y: event.clientY - clientRect.top,\n        };\n        if (outlineDiv) {\n            if (node.getOrientation() === Orientation_1.default.HORZ) {\n                outlineDiv.current.style.top = getBoundPosition(pos.y - 4) + \"px\";\n            }\n            else {\n                outlineDiv.current.style.left = getBoundPosition(pos.x - 4) + \"px\";\n            }\n        }\n        if (layout.isRealtimeResize()) {\n            updateLayout();\n        }\n    };\n    var updateLayout = function () {\n        var value = 0;\n        if (outlineDiv) {\n            if (node.getOrientation() === Orientation_1.default.HORZ) {\n                value = outlineDiv.current.offsetTop;\n            }\n            else {\n                value = outlineDiv.current.offsetLeft;\n            }\n        }\n        if (parentNode instanceof BorderNode_1.default) {\n            var pos = parentNode._calculateSplit(node, value);\n            layout.doAction(Actions_1.default.adjustBorderSplit(node.getParent().getId(), pos));\n        }\n        else {\n            var splitSpec = parentNode._calculateSplit(node, value);\n            if (splitSpec !== undefined) {\n                layout.doAction(Actions_1.default.adjustSplit(splitSpec));\n            }\n        }\n    };\n    var onDragEnd = function () {\n        updateLayout();\n        var rootdiv = layout.getRootDiv();\n        rootdiv.removeChild(outlineDiv.current);\n    };\n    var getBoundPosition = function (p) {\n        var bounds = pBounds.current;\n        var rtn = p;\n        if (p < bounds[0]) {\n            rtn = bounds[0];\n        }\n        if (p > bounds[1]) {\n            rtn = bounds[1];\n        }\n        return rtn;\n    };\n    var cm = layout.getClassName;\n    var r = node.getRect();\n    var style = r.styleWithPosition({\n        cursor: node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\",\n    });\n    var className = cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_ + node.getOrientation().getName());\n    if (parentNode instanceof BorderNode_1.default) {\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_BORDER);\n    }\n    else {\n        if (node.getModel().getMaximizedTabset() !== undefined) {\n            style.display = \"none\";\n        }\n    }\n    var extra = node.getModel().getSplitterExtra();\n    if (extra === 0) {\n        return (React.createElement(\"div\", { style: style, \"data-layout-path\": path, className: className, onTouchStart: onMouseDown, onMouseDown: onMouseDown }));\n    }\n    else {\n        // add extended transparent div for hit testing\n        // extends forward only, so as not to interfere with scrollbars\n        var r2 = r.clone();\n        r2.x = 0;\n        r2.y = 0;\n        if (node.getOrientation() === Orientation_1.default.VERT) {\n            r2.width += extra;\n        }\n        else {\n            r2.height += extra;\n        }\n        var style2 = r2.styleWithPosition({\n            cursor: node.getOrientation() === Orientation_1.default.HORZ ? \"ns-resize\" : \"ew-resize\"\n        });\n        var className2 = cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_EXTRA);\n        return (React.createElement(\"div\", { style: style, \"data-layout-path\": path, className: className },\n            React.createElement(\"div\", { style: style2, className: className2, onTouchStart: onMouseDown, onMouseDown: onMouseDown })));\n    }\n};\nexports.Splitter = Splitter;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Splitter.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Splitter = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar Splitter = function (props) {\n    var layout = props.layout, node = props.node, path = props.path;\n    var pBounds = React.useRef([]);\n    var outlineDiv = React.useRef(undefined);\n    var parentNode = node.getParent();\n    var onMouseDown = function (event) {\n        DragDrop_1.DragDrop.instance.setGlassCursorOverride(node.getOrientation() === Orientation_1.Orientation.HORZ ? \"ns-resize\" : \"ew-resize\");\n        DragDrop_1.DragDrop.instance.startDrag(event, onDragStart, onDragMove, onDragEnd, onDragCancel, undefined, undefined, layout.getCurrentDocument(), layout.getRootDiv());\n        pBounds.current = parentNode._getSplitterBounds(node, true);\n        var rootdiv = layout.getRootDiv();\n        outlineDiv.current = layout.getCurrentDocument().createElement(\"div\");\n        outlineDiv.current.style.position = \"absolute\";\n        outlineDiv.current.className = layout.getClassName(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_DRAG);\n        outlineDiv.current.style.cursor = node.getOrientation() === Orientation_1.Orientation.HORZ ? \"ns-resize\" : \"ew-resize\";\n        var r = node.getRect();\n        if (node.getOrientation() === Orientation_1.Orientation.VERT && r.width < 2) {\n            r.width = 2;\n        }\n        else if (node.getOrientation() === Orientation_1.Orientation.HORZ && r.height < 2) {\n            r.height = 2;\n        }\n        r.positionElement(outlineDiv.current);\n        rootdiv.appendChild(outlineDiv.current);\n    };\n    var onDragCancel = function (wasDragging) {\n        var rootdiv = layout.getRootDiv();\n        rootdiv.removeChild(outlineDiv.current);\n    };\n    var onDragStart = function () {\n        return true;\n    };\n    var onDragMove = function (event) {\n        var clientRect = layout.getDomRect();\n        var pos = {\n            x: event.clientX - clientRect.left,\n            y: event.clientY - clientRect.top,\n        };\n        if (outlineDiv) {\n            if (node.getOrientation() === Orientation_1.Orientation.HORZ) {\n                outlineDiv.current.style.top = getBoundPosition(pos.y - 4) + \"px\";\n            }\n            else {\n                outlineDiv.current.style.left = getBoundPosition(pos.x - 4) + \"px\";\n            }\n        }\n        if (layout.isRealtimeResize()) {\n            updateLayout();\n        }\n    };\n    var updateLayout = function () {\n        var value = 0;\n        if (outlineDiv) {\n            if (node.getOrientation() === Orientation_1.Orientation.HORZ) {\n                value = outlineDiv.current.offsetTop;\n            }\n            else {\n                value = outlineDiv.current.offsetLeft;\n            }\n        }\n        if (parentNode instanceof BorderNode_1.BorderNode) {\n            var pos = parentNode._calculateSplit(node, value);\n            layout.doAction(Actions_1.Actions.adjustBorderSplit(node.getParent().getId(), pos));\n        }\n        else {\n            var splitSpec = parentNode._calculateSplit(node, value);\n            if (splitSpec !== undefined) {\n                layout.doAction(Actions_1.Actions.adjustSplit(splitSpec));\n            }\n        }\n    };\n    var onDragEnd = function () {\n        updateLayout();\n        var rootdiv = layout.getRootDiv();\n        rootdiv.removeChild(outlineDiv.current);\n    };\n    var getBoundPosition = function (p) {\n        var bounds = pBounds.current;\n        var rtn = p;\n        if (p < bounds[0]) {\n            rtn = bounds[0];\n        }\n        if (p > bounds[1]) {\n            rtn = bounds[1];\n        }\n        return rtn;\n    };\n    var cm = layout.getClassName;\n    var r = node.getRect();\n    var style = r.styleWithPosition({\n        cursor: node.getOrientation() === Orientation_1.Orientation.HORZ ? \"ns-resize\" : \"ew-resize\",\n    });\n    var className = cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_ + node.getOrientation().getName());\n    if (parentNode instanceof BorderNode_1.BorderNode) {\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_BORDER);\n    }\n    else {\n        if (node.getModel().getMaximizedTabset() !== undefined) {\n            style.display = \"none\";\n        }\n    }\n    var extra = node.getModel().getSplitterExtra();\n    if (extra === 0) {\n        return (React.createElement(\"div\", { style: style, \"data-layout-path\": path, className: className, onTouchStart: onMouseDown, onMouseDown: onMouseDown }));\n    }\n    else {\n        // add extended transparent div for hit testing\n        // extends forward only, so as not to interfere with scrollbars\n        var r2 = r.clone();\n        r2.x = 0;\n        r2.y = 0;\n        if (node.getOrientation() === Orientation_1.Orientation.VERT) {\n            r2.width += extra;\n        }\n        else {\n            r2.height += extra;\n        }\n        var style2 = r2.styleWithPosition({\n            cursor: node.getOrientation() === Orientation_1.Orientation.HORZ ? \"ns-resize\" : \"ew-resize\"\n        });\n        var className2 = cm(Types_1.CLASSES.FLEXLAYOUT__SPLITTER_EXTRA);\n        return (React.createElement(\"div\", { style: style, \"data-layout-path\": path, className: className },\n            React.createElement(\"div\", { style: style2, className: className2, onTouchStart: onMouseDown, onMouseDown: onMouseDown })));\n    }\n};\nexports.Splitter = Splitter;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Splitter.tsx?");
 
 /***/ }),
 
@@ -644,7 +692,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.hideElement = exports.Tab = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_1 = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar ErrorBoundary_1 = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\n/** @hidden @internal */\nvar Tab = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node, factory = props.factory, path = props.path;\n    var _a = React.useState(!props.node.isEnableRenderOnDemand() || props.selected), renderComponent = _a[0], setRenderComponent = _a[1];\n    React.useLayoutEffect(function () {\n        if (!renderComponent && selected) {\n            // load on demand\n            // console.log(\"load on demand: \" + node.getName());\n            setRenderComponent(true);\n        }\n    });\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.default.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.default.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var cm = layout.getClassName;\n    var useVisibility = node.getModel().isUseVisibility();\n    var parentNode = node.getParent();\n    var style = node._styleWithPosition();\n    if (!selected) {\n        hideElement(style, useVisibility);\n    }\n    if (parentNode instanceof TabSetNode_1.default) {\n        if (node.getModel().getMaximizedTabset() !== undefined && !parentNode.isMaximized()) {\n            hideElement(style, useVisibility);\n        }\n    }\n    var child;\n    if (renderComponent) {\n        child = factory(node);\n    }\n    var className = cm(Types_1.CLASSES.FLEXLAYOUT__TAB);\n    if (parentNode instanceof __1.BorderNode) {\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER);\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER_ + parentNode.getLocation().getName());\n    }\n    return (React.createElement(\"div\", { className: className, \"data-layout-path\": path, onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n        React.createElement(ErrorBoundary_1.ErrorBoundary, { message: props.layout.i18nName(I18nLabel_1.I18nLabel.Error_rendering_component) },\n            React.createElement(react_1.Fragment, null, child))));\n};\nexports.Tab = Tab;\nfunction hideElement(style, useVisibility) {\n    if (useVisibility) {\n        style.visibility = \"hidden\";\n    }\n    else {\n        style.display = \"none\";\n    }\n}\nexports.hideElement = hideElement;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Tab.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Tab = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_1 = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar ErrorBoundary_1 = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar Tab = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node, factory = props.factory, path = props.path;\n    var _a = React.useState(!props.node.isEnableRenderOnDemand() || props.selected), renderComponent = _a[0], setRenderComponent = _a[1];\n    React.useLayoutEffect(function () {\n        if (!renderComponent && selected) {\n            // load on demand\n            // console.log(\"load on demand: \" + node.getName());\n            setRenderComponent(true);\n        }\n    });\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.TabSetNode.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.Actions.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var cm = layout.getClassName;\n    var useVisibility = node.getModel().isUseVisibility();\n    var parentNode = node.getParent();\n    var style = node._styleWithPosition();\n    if (!selected) {\n        Utils_1.hideElement(style, useVisibility);\n    }\n    if (parentNode instanceof TabSetNode_1.TabSetNode) {\n        if (node.getModel().getMaximizedTabset() !== undefined && !parentNode.isMaximized()) {\n            Utils_1.hideElement(style, useVisibility);\n        }\n    }\n    var child;\n    if (renderComponent) {\n        child = factory(node);\n    }\n    var className = cm(Types_1.CLASSES.FLEXLAYOUT__TAB);\n    if (parentNode instanceof __1.BorderNode) {\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER);\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER_ + parentNode.getLocation().getName());\n    }\n    return (React.createElement(\"div\", { className: className, \"data-layout-path\": path, onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n        React.createElement(ErrorBoundary_1.ErrorBoundary, { message: props.layout.i18nName(I18nLabel_1.I18nLabel.Error_rendering_component) },\n            React.createElement(react_1.Fragment, null, child))));\n};\nexports.Tab = Tab;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Tab.tsx?");
 
 /***/ }),
 
@@ -656,7 +704,19 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/** @hidden @internal */\nvar TabButton = function (props) {\n    var layout = props.layout, node = props.node, selected = props.selected, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var selfRef = React.useRef(null);\n    var contentRef = React.useRef(null);\n    var contentWidth = React.useRef(0);\n    var onMouseDown = function (event) {\n        if (!TabSet_1.isAuxMouseEvent(event) && !layout.getEditingTab()) {\n            var message = layout.i18nName(I18nLabel_1.I18nLabel.Move_Tab, node.getName());\n            layout.dragStart(event, message, node, node.isEnableDrag(), onClick, onDoubleClick);\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (TabSet_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.default.selectTab(node.getId()));\n    };\n    var onDoubleClick = function (event) {\n        if (node.isEnableRename()) {\n            layout.setEditingTab(node);\n            layout.getCurrentDocument().body.addEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.addEventListener(\"touchstart\", onEndEdit);\n        }\n        // else {\n        //     const parentNode = node.getParent() as TabSetNode;\n        //     if (parentNode.canMaximize()) {\n        //         layout.maximize(parentNode);\n        //     }\n        // }\n    };\n    var onEndEdit = function (event) {\n        if (event.target !== contentRef.current) {\n            layout.getCurrentDocument().body.removeEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.removeEventListener(\"touchstart\", onEndEdit);\n            layout.setEditingTab(undefined);\n        }\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.default.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n        if (layout.getEditingTab() === node) {\n            contentRef.current.select();\n        }\n    });\n    var updateRect = function () {\n        // record position of tab in node\n        var layoutRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.default(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));\n        contentWidth.current = contentRef.current.getBoundingClientRect().width;\n    };\n    var onTextBoxMouseDown = function (event) {\n        // console.log(\"onTextBoxMouseDown\");\n        event.stopPropagation();\n    };\n    var onTextBoxKeyPress = function (event) {\n        // console.log(event, event.keyCode);\n        if (event.keyCode === 27) {\n            // esc\n            layout.setEditingTab(undefined);\n        }\n        else if (event.keyCode === 13) {\n            // enter\n            layout.setEditingTab(undefined);\n            layout.doAction(Actions_1.default.renameTab(node.getId(), event.target.value));\n        }\n    };\n    var cm = layout.getClassName;\n    var parentNode = node.getParent();\n    var baseClassName = Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON;\n    var classNames = cm(baseClassName);\n    classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\n    if (selected) {\n        classNames += \" \" + cm(baseClassName + \"--selected\");\n    }\n    else {\n        classNames += \" \" + cm(baseClassName + \"--unselected\");\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var leadingContent = iconFactory ? iconFactory(node) : undefined;\n    var titleContent = node.getName();\n    var name = node.getName();\n    function isTitleObject(obj) {\n        return obj.titleContent !== undefined;\n    }\n    if (titleFactory !== undefined) {\n        var titleObj = titleFactory(node);\n        if (titleObj !== undefined) {\n            if (typeof titleObj === \"string\") {\n                titleContent = titleObj;\n                name = titleObj;\n            }\n            else if (isTitleObject(titleObj)) {\n                titleContent = titleObj.titleContent;\n                name = titleObj.name;\n            }\n            else {\n                titleContent = titleObj;\n            }\n        }\n    }\n    if (leadingContent === undefined && node.getIcon() !== undefined) {\n        leadingContent = React.createElement(\"img\", { src: node.getIcon(), alt: \"leadingContent\" });\n    }\n    var buttons = [];\n    // allow customization of leading contents (icon) and contents\n    var renderState = { leading: leadingContent, content: titleContent, name: name, buttons: buttons };\n    layout.customizeTab(node, renderState);\n    node._setRenderedName(renderState.name);\n    var content = (React.createElement(\"div\", { ref: contentRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content));\n    var leading = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading);\n    if (layout.getEditingTab() === node) {\n        var contentStyle = { width: contentWidth + \"px\" };\n        content = (React.createElement(\"input\", { style: contentStyle, ref: contentRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onMouseDown: onTextBoxMouseDown, onTouchStart: onTextBoxMouseDown }));\n    }\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tab);\n        buttons.push(React.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, icons === null || icons === void 0 ? void 0 : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        buttons));\n};\nexports.TabButton = TabButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButton.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar TabButton = function (props) {\n    var layout = props.layout, node = props.node, selected = props.selected, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var selfRef = React.useRef(null);\n    var contentRef = React.useRef(null);\n    var contentWidth = React.useRef(0);\n    var onMouseDown = function (event) {\n        if (!Utils_1.isAuxMouseEvent(event) && !layout.getEditingTab()) {\n            layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (Utils_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.Actions.selectTab(node.getId()));\n    };\n    var onDoubleClick = function (event) {\n        if (node.isEnableRename()) {\n            layout.setEditingTab(node);\n            layout.getCurrentDocument().body.addEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.addEventListener(\"touchstart\", onEndEdit);\n        }\n        // else {\n        //     const parentNode = node.getParent() as TabSetNode;\n        //     if (parentNode.canMaximize()) {\n        //         layout.maximize(parentNode);\n        //     }\n        // }\n    };\n    var onEndEdit = function (event) {\n        if (event.target !== contentRef.current) {\n            layout.getCurrentDocument().body.removeEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.removeEventListener(\"touchstart\", onEndEdit);\n            layout.setEditingTab(undefined);\n        }\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.Actions.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n        if (layout.getEditingTab() === node) {\n            contentRef.current.select();\n        }\n    });\n    var updateRect = function () {\n        // record position of tab in node\n        var layoutRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.Rect(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));\n        contentWidth.current = selfRef.current.getBoundingClientRect().width;\n    };\n    var onTextBoxMouseDown = function (event) {\n        // console.log(\"onTextBoxMouseDown\");\n        event.stopPropagation();\n    };\n    var onTextBoxKeyPress = function (event) {\n        // console.log(event, event.keyCode);\n        if (event.keyCode === 27) {\n            // esc\n            layout.setEditingTab(undefined);\n        }\n        else if (event.keyCode === 13) {\n            // enter\n            layout.setEditingTab(undefined);\n            layout.doAction(Actions_1.Actions.renameTab(node.getId(), event.target.value));\n        }\n    };\n    var cm = layout.getClassName;\n    var parentNode = node.getParent();\n    var baseClassName = Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON;\n    var classNames = cm(baseClassName);\n    classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\n    if (selected) {\n        classNames += \" \" + cm(baseClassName + \"--selected\");\n    }\n    else {\n        classNames += \" \" + cm(baseClassName + \"--unselected\");\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var renderState = Utils_1.getRenderStateEx(layout, node, iconFactory, titleFactory);\n    var content = renderState.content ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content)) : null;\n    var leading = renderState.leading ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading)) : null;\n    if (layout.getEditingTab() === node) {\n        content = (React.createElement(\"input\", { ref: contentRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onMouseDown: onTextBoxMouseDown, onTouchStart: onTextBoxMouseDown }));\n    }\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tab);\n        renderState.buttons.push(React.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, (typeof icons.close === \"function\") ? icons.close(node) : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        renderState.buttons));\n};\nexports.TabButton = TabButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButton.tsx?");
+
+/***/ }),
+
+/***/ "./src/view/TabButtonStamp.tsx":
+/*!*************************************!*\
+  !*** ./src/view/TabButtonStamp.tsx ***!
+  \*************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabButtonStamp = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar TabButtonStamp = function (props) {\n    var layout = props.layout, node = props.node, iconFactory = props.iconFactory, titleFactory = props.titleFactory;\n    var selfRef = React.useRef(null);\n    var cm = layout.getClassName;\n    var classNames = cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_STAMP);\n    var renderState = Utils_1.getRenderStateEx(layout, node, iconFactory, titleFactory);\n    var content = renderState.content ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content))\n        : node._getNameForOverflowMenu();\n    var leading = renderState.leading ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading)) : null;\n    return (React.createElement(\"div\", { ref: selfRef, className: classNames, title: node.getHelpText() },\n        leading,\n        content));\n};\nexports.TabButtonStamp = TabButtonStamp;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButtonStamp.tsx?");
 
 /***/ }),
 
@@ -668,7 +728,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabFloating = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/** @hidden @internal */\nvar TabFloating = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node, path = props.path;\n    var showPopout = function () {\n        if (node.getWindow()) {\n            node.getWindow().focus();\n        }\n    };\n    var dockPopout = function () {\n        layout.doAction(Actions_1.default.unFloatTab(node.getId()));\n    };\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.default.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.default.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var onClickFocus = function (event) {\n        event.preventDefault();\n        showPopout();\n    };\n    var onClickDock = function (event) {\n        event.preventDefault();\n        dockPopout();\n    };\n    var cm = layout.getClassName;\n    var style = node._styleWithPosition();\n    if (!selected) {\n        Tab_1.hideElement(style, node.getModel().isUseVisibility());\n    }\n    var message = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Message);\n    var showMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Show_Window);\n    var dockMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Dock_Window);\n    var customRenderCallback = layout.getOnRenderFloatingTabPlaceholder();\n    if (customRenderCallback) {\n        return (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING), onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style }, customRenderCallback(dockPopout, showPopout)));\n    }\n    else {\n        return (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING), \"data-layout-path\": path, onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER) },\n                React.createElement(\"div\", null, message),\n                React.createElement(\"div\", null,\n                    React.createElement(\"a\", { href: \"#\", onClick: onClickFocus }, showMessage)),\n                React.createElement(\"div\", null,\n                    React.createElement(\"a\", { href: \"#\", onClick: onClickDock }, dockMessage)))));\n    }\n};\nexports.TabFloating = TabFloating;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabFloating.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabFloating = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar TabFloating = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node, path = props.path;\n    var showPopout = function () {\n        if (node.getWindow()) {\n            node.getWindow().focus();\n        }\n    };\n    var dockPopout = function () {\n        layout.doAction(Actions_1.Actions.unFloatTab(node.getId()));\n    };\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.TabSetNode.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.Actions.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var onClickFocus = function (event) {\n        event.preventDefault();\n        showPopout();\n    };\n    var onClickDock = function (event) {\n        event.preventDefault();\n        dockPopout();\n    };\n    var cm = layout.getClassName;\n    var style = node._styleWithPosition();\n    if (!selected) {\n        Utils_1.hideElement(style, node.getModel().isUseVisibility());\n    }\n    var message = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Message);\n    var showMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Show_Window);\n    var dockMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Dock_Window);\n    var customRenderCallback = layout.getOnRenderFloatingTabPlaceholder();\n    if (customRenderCallback) {\n        return (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING), onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style }, customRenderCallback(dockPopout, showPopout)));\n    }\n    else {\n        return (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING), \"data-layout-path\": path, onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER) },\n                React.createElement(\"div\", null, message),\n                React.createElement(\"div\", null,\n                    React.createElement(\"a\", { href: \"#\", onClick: onClickFocus }, showMessage)),\n                React.createElement(\"div\", null,\n                    React.createElement(\"a\", { href: \"#\", onClick: onClickDock }, dockMessage)))));\n    }\n};\nexports.TabFloating = TabFloating;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabFloating.tsx?");
 
 /***/ }),
 
@@ -680,7 +740,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.useTabOverflow = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/** @hidden @internal */\nvar useTabOverflow = function (node, orientation, toolbarRef, stickyButtonsRef) {\n    var firstRender = React.useRef(true);\n    var tabsTruncated = React.useRef(false);\n    var lastRect = React.useRef(new Rect_1.default(0, 0, 0, 0));\n    var selfRef = React.useRef(null);\n    var _a = React.useState(0), position = _a[0], setPosition = _a[1];\n    var userControlledLeft = React.useRef(false);\n    var _b = React.useState([]), hiddenTabs = _b[0], setHiddenTabs = _b[1];\n    // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)\n    React.useLayoutEffect(function () {\n        userControlledLeft.current = false;\n    }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);\n    React.useLayoutEffect(function () {\n        updateVisibleTabs();\n    });\n    React.useEffect(function () {\n        var instance = selfRef.current;\n        instance.addEventListener('wheel', onWheel);\n        return function () {\n            instance.removeEventListener('wheel', onWheel);\n        };\n    }, []);\n    // needed to prevent default mouse wheel over tabset/border (cannot do with react event?)\n    var onWheel = function (event) {\n        event.preventDefault();\n    };\n    var getNear = function (rect) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return rect.x;\n        }\n        else {\n            return rect.y;\n        }\n    };\n    var getFar = function (rect) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return rect.getRight();\n        }\n        else {\n            return rect.getBottom();\n        }\n    };\n    var getSize = function (rect) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return rect.width;\n        }\n        else {\n            return rect.height;\n        }\n    };\n    var updateVisibleTabs = function () {\n        var tabMargin = 2;\n        if (firstRender.current === true) {\n            tabsTruncated.current = false;\n        }\n        var nodeRect = node instanceof TabSetNode_1.default ? node.getRect() : node.getTabHeaderRect();\n        var lastChild = node.getChildren()[node.getChildren().length - 1];\n        var stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current.getBoundingClientRect());\n        if (firstRender.current === true ||\n            nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second\n            nodeRect.height !== lastRect.current.height) {\n            lastRect.current = nodeRect;\n            var enabled = node instanceof TabSetNode_1.default ? node.isEnableTabStrip() === true : true;\n            var endPos = getFar(nodeRect) - stickyButtonsSize;\n            if (toolbarRef.current !== null) {\n                endPos -= getSize(toolbarRef.current.getBoundingClientRect());\n            }\n            if (enabled && node.getChildren().length > 0) {\n                if (hiddenTabs.length === 0 && position === 0 && getFar(lastChild.getTabRect()) + tabMargin < endPos) {\n                    return; // nothing to do all tabs are shown in available space\n                }\n                endPos -= hiddenTabs.length > 0 ? (orientation === Orientation_1.default.HORZ ? 10 : 0) : 45; // will need hidden tabs\n                var shiftPos = 0;\n                var selectedTab = node.getSelectedNode();\n                if (selectedTab && !userControlledLeft.current) {\n                    var selectedRect = selectedTab.getTabRect();\n                    var selectedStart = getNear(selectedRect) - tabMargin;\n                    var selectedEnd = getFar(selectedRect) + tabMargin;\n                    // when selected tab is larger than available space then align left\n                    if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {\n                        shiftPos = getNear(nodeRect) - selectedStart;\n                    }\n                    else {\n                        if (selectedEnd > endPos || selectedStart < getNear(nodeRect)) {\n                            if (selectedStart < getNear(nodeRect)) {\n                                shiftPos = getNear(nodeRect) - selectedStart;\n                            }\n                            // use second if statement to prevent tab moving back then forwards if not enough space for single tab\n                            if (selectedEnd + shiftPos > endPos) {\n                                shiftPos = endPos - selectedEnd;\n                            }\n                        }\n                    }\n                }\n                var extraSpace = Math.max(0, endPos - (getFar(lastChild.getTabRect()) + tabMargin + shiftPos));\n                var newPosition = Math.min(0, position + shiftPos + extraSpace);\n                // find hidden tabs\n                var diff = newPosition - position;\n                var hidden = [];\n                for (var i = 0; i < node.getChildren().length; i++) {\n                    var child = node.getChildren()[i];\n                    if (getNear(child.getTabRect()) + diff < getNear(nodeRect) || getFar(child.getTabRect()) + diff > endPos) {\n                        hidden.push({ node: child, index: i });\n                    }\n                }\n                if (hidden.length > 0) {\n                    tabsTruncated.current = true;\n                }\n                firstRender.current = false; // need to do a second render\n                setHiddenTabs(hidden);\n                setPosition(newPosition);\n            }\n        }\n        else {\n            firstRender.current = true;\n        }\n    };\n    var onMouseWheel = function (event) {\n        var delta = 0;\n        if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {\n            delta = -event.deltaX;\n        }\n        else {\n            delta = -event.deltaY;\n        }\n        if (event.deltaMode === 1) {\n            // DOM_DELTA_LINE\t0x01\tThe delta values are specified in lines.\n            delta *= 40;\n        }\n        setPosition(position + delta);\n        userControlledLeft.current = true;\n        event.stopPropagation();\n    };\n    return { selfRef: selfRef, position: position, userControlledLeft: userControlledLeft, hiddenTabs: hiddenTabs, onMouseWheel: onMouseWheel, tabsTruncated: tabsTruncated.current };\n};\nexports.useTabOverflow = useTabOverflow;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabOverflowHook.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.useTabOverflow = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/** @hidden @internal */\nvar useTabOverflow = function (node, orientation, toolbarRef, stickyButtonsRef) {\n    var firstRender = React.useRef(true);\n    var tabsTruncated = React.useRef(false);\n    var lastRect = React.useRef(new Rect_1.Rect(0, 0, 0, 0));\n    var selfRef = React.useRef(null);\n    var _a = React.useState(0), position = _a[0], setPosition = _a[1];\n    var userControlledLeft = React.useRef(false);\n    var _b = React.useState([]), hiddenTabs = _b[0], setHiddenTabs = _b[1];\n    var lastHiddenCount = React.useRef(0);\n    // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)\n    React.useLayoutEffect(function () {\n        userControlledLeft.current = false;\n    }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);\n    React.useLayoutEffect(function () {\n        updateVisibleTabs();\n    });\n    React.useEffect(function () {\n        var instance = selfRef.current;\n        instance.addEventListener('wheel', onWheel);\n        return function () {\n            instance.removeEventListener('wheel', onWheel);\n        };\n    }, []);\n    // needed to prevent default mouse wheel over tabset/border (cannot do with react event?)\n    var onWheel = function (event) {\n        event.preventDefault();\n    };\n    var getNear = function (rect) {\n        if (orientation === Orientation_1.Orientation.HORZ) {\n            return rect.x;\n        }\n        else {\n            return rect.y;\n        }\n    };\n    var getFar = function (rect) {\n        if (orientation === Orientation_1.Orientation.HORZ) {\n            return rect.getRight();\n        }\n        else {\n            return rect.getBottom();\n        }\n    };\n    var getSize = function (rect) {\n        if (orientation === Orientation_1.Orientation.HORZ) {\n            return rect.width;\n        }\n        else {\n            return rect.height;\n        }\n    };\n    var updateVisibleTabs = function () {\n        var tabMargin = 2;\n        if (firstRender.current === true) {\n            tabsTruncated.current = false;\n        }\n        var nodeRect = node instanceof TabSetNode_1.TabSetNode ? node.getRect() : node.getTabHeaderRect();\n        var lastChild = node.getChildren()[node.getChildren().length - 1];\n        var stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current.getBoundingClientRect());\n        if (firstRender.current === true ||\n            (lastHiddenCount.current === 0 && hiddenTabs.length !== 0) ||\n            nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second\n            nodeRect.height !== lastRect.current.height) {\n            lastHiddenCount.current = hiddenTabs.length;\n            lastRect.current = nodeRect;\n            var enabled = node instanceof TabSetNode_1.TabSetNode ? node.isEnableTabStrip() === true : true;\n            var endPos = getFar(nodeRect) - stickyButtonsSize;\n            if (toolbarRef.current !== null) {\n                endPos -= getSize(toolbarRef.current.getBoundingClientRect());\n            }\n            if (enabled && node.getChildren().length > 0) {\n                if (hiddenTabs.length === 0 && position === 0 && getFar(lastChild.getTabRect()) + tabMargin < endPos) {\n                    return; // nothing to do all tabs are shown in available space\n                }\n                var shiftPos = 0;\n                var selectedTab = node.getSelectedNode();\n                if (selectedTab && !userControlledLeft.current) {\n                    var selectedRect = selectedTab.getTabRect();\n                    var selectedStart = getNear(selectedRect) - tabMargin;\n                    var selectedEnd = getFar(selectedRect) + tabMargin;\n                    // when selected tab is larger than available space then align left\n                    if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {\n                        shiftPos = getNear(nodeRect) - selectedStart;\n                    }\n                    else {\n                        if (selectedEnd > endPos || selectedStart < getNear(nodeRect)) {\n                            if (selectedStart < getNear(nodeRect)) {\n                                shiftPos = getNear(nodeRect) - selectedStart;\n                            }\n                            // use second if statement to prevent tab moving back then forwards if not enough space for single tab\n                            if (selectedEnd + shiftPos > endPos) {\n                                shiftPos = endPos - selectedEnd;\n                            }\n                        }\n                    }\n                }\n                var extraSpace = Math.max(0, endPos - (getFar(lastChild.getTabRect()) + tabMargin + shiftPos));\n                var newPosition = Math.min(0, position + shiftPos + extraSpace);\n                // find hidden tabs\n                var diff = newPosition - position;\n                var hidden = [];\n                for (var i = 0; i < node.getChildren().length; i++) {\n                    var child = node.getChildren()[i];\n                    if (getNear(child.getTabRect()) + diff < getNear(nodeRect) || getFar(child.getTabRect()) + diff > endPos) {\n                        hidden.push({ node: child, index: i });\n                    }\n                }\n                if (hidden.length > 0) {\n                    tabsTruncated.current = true;\n                }\n                firstRender.current = false; // need to do a second render\n                setHiddenTabs(hidden);\n                setPosition(newPosition);\n            }\n        }\n        else {\n            firstRender.current = true;\n        }\n    };\n    var onMouseWheel = function (event) {\n        var delta = 0;\n        if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {\n            delta = -event.deltaX;\n        }\n        else {\n            delta = -event.deltaY;\n        }\n        if (event.deltaMode === 1) {\n            // DOM_DELTA_LINE\t0x01\tThe delta values are specified in lines.\n            delta *= 40;\n        }\n        setPosition(position + delta);\n        userControlledLeft.current = true;\n        event.stopPropagation();\n    };\n    return { selfRef: selfRef, position: position, userControlledLeft: userControlledLeft, hiddenTabs: hiddenTabs, onMouseWheel: onMouseWheel, tabsTruncated: tabsTruncated.current };\n};\nexports.useTabOverflow = useTabOverflow;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabOverflowHook.tsx?");
 
 /***/ }),
 
@@ -692,7 +752,19 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.isAuxMouseEvent = exports.TabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar TabButton_1 = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/** @hidden @internal */\nvar TabSet = function (props) {\n    var node = props.node, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var tabbarInnerRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(node, Orientation_1.default.HORZ, toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel, tabsTruncated = _a.tabsTruncated;\n    var onOverflowClick = function (event) {\n        var element = overflowbuttonRef.current;\n        PopupMenu_1.showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.default.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onMouseDown = function (event) {\n        if (!isAuxMouseEvent(event)) {\n            var name_1 = node.getName();\n            if (name_1 === undefined) {\n                name_1 = \"\";\n            }\n            else {\n                name_1 = \": \" + name_1;\n            }\n            layout.doAction(Actions_1.default.setActiveTabset(node.getId()));\n            if (!layout.getEditingTab()) {\n                var message = layout.i18nName(I18nLabel_1.I18nLabel.Move_Tabset, name_1);\n                layout.dragStart(event, message, node, node.isEnableDrag(), function (event2) { return undefined; }, onDoubleClick);\n            }\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onMaximizeToggle = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n        event.stopPropagation();\n    };\n    var onClose = function (event) {\n        layout.doAction(Actions_1.default.deleteTabset(node.getId()));\n        event.stopPropagation();\n    };\n    var onFloatTab = function (event) {\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.default.floatTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    var onDoubleClick = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n    };\n    // Start Render\n    var cm = layout.getClassName;\n    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\n    if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\n        tabbarInnerRef.current.scrollLeft = 0;\n    }\n    var selectedTabNode = node.getSelectedNode();\n    var style = node._styleWithPosition();\n    if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\n        Tab_1.hideElement(style, node.getModel().isUseVisibility());\n    }\n    var tabs = [];\n    if (node.isEnableTabStrip()) {\n        for (var i = 0; i < node.getChildren().length; i++) {\n            var child = node.getChildren()[i];\n            var isSelected = node.getSelected() === i;\n            tabs.push(React.createElement(TabButton_1.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, height: node.getTabStripHeight(), iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n        }\n    }\n    var showHeader = node.getName() !== undefined;\n    var stickyButtons = [];\n    var buttons = [];\n    var headerButtons = [];\n    // allow customization of header contents and buttons\n    var renderState = { headerContent: node.getName(), stickyButtons: stickyButtons, buttons: buttons, headerButtons: headerButtons };\n    layout.customizeTabSet(node, renderState);\n    var headerContent = renderState.headerContent;\n    stickyButtons = renderState.stickyButtons;\n    buttons = renderState.buttons;\n    headerButtons = renderState.headerButtons;\n    if (stickyButtons.length > 0) {\n        if (tabsTruncated) {\n            buttons = __spreadArray(__spreadArray([], stickyButtons), buttons);\n        }\n        else {\n            tabs.push(React.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n        }\n    }\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 :\n            icons.more,\n            hiddenTabs.length));\n    }\n    if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n        var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n        buttons.push(React.createElement(\"button\", { key: \"float\", \"data-layout-path\": path + \"/button/float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 : icons.popout));\n    }\n    if (node.canMaximize()) {\n        var minTitle = layout.i18nName(I18nLabel_1.I18nLabel.Restore);\n        var maxTitle = layout.i18nName(I18nLabel_1.I18nLabel.Maximize);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"max\", \"data-layout-path\": path + \"/button/max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ? icons === null || icons === void 0 ? void 0 : icons.restore : icons === null || icons === void 0 ? void 0 : icons.maximize));\n    }\n    if (!node.isMaximized() && node.isEnableClose()) {\n        var title = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tabset);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: title, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: onClose, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 : icons.closeTabset));\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, buttons));\n    var header;\n    var tabStrip;\n    var tabStripClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\n    if (node.getClassNameTabStrip() !== undefined) {\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\n    }\n    tabStripClasses += \" \" + Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\n    if (node.isActive() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n    }\n    if (node.isMaximized() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n    }\n    if (showHeader) {\n        var headerToolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, headerButtons));\n        var tabHeaderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER);\n        if (node.isActive()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n        }\n        if (node.isMaximized()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n        }\n        if (node.getClassNameHeader() !== undefined) {\n            tabHeaderClasses += \" \" + node.getClassNameHeader();\n        }\n        header = (React.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\n            headerToolbar));\n    }\n    var tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\n    if (node.getTabLocation() === \"top\") {\n        var top_1 = showHeader ? node.getHeaderHeight() + \"px\" : \"0px\";\n        tabStripStyle[\"top\"] = top_1;\n    }\n    else {\n        tabStripStyle[\"bottom\"] = \"0px\";\n    }\n    tabStrip = (React.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n        React.createElement(\"div\", { ref: tabbarInnerRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) },\n            React.createElement(\"div\", { style: { left: position }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\n        toolbar));\n    style = layout.styleFont(style);\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel },\n        header,\n        tabStrip));\n};\nexports.TabSet = TabSet;\n/** @hidden @internal */\nfunction isAuxMouseEvent(event) {\n    var auxEvent = false;\n    if (event.nativeEvent instanceof MouseEvent) {\n        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {\n            auxEvent = true;\n        }\n    }\n    return auxEvent;\n}\nexports.isAuxMouseEvent = isAuxMouseEvent;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
+eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar TabButton_1 = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar TabSet = function (props) {\n    var node = props.node, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var tabbarInnerRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(node, Orientation_1.Orientation.HORZ, toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel, tabsTruncated = _a.tabsTruncated;\n    var onOverflowClick = function (event) {\n        var callback = layout.getShowOverflowMenu();\n        if (callback !== undefined) {\n            callback(node, event, hiddenTabs, onOverflowItemSelect);\n        }\n        else {\n            var element = overflowbuttonRef.current;\n            PopupMenu_1.showPopup(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\n        }\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.Actions.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onMouseDown = function (event) {\n        if (!Utils_1.isAuxMouseEvent(event)) {\n            var name_1 = node.getName();\n            if (name_1 === undefined) {\n                name_1 = \"\";\n            }\n            else {\n                name_1 = \": \" + name_1;\n            }\n            layout.doAction(Actions_1.Actions.setActiveTabset(node.getId()));\n            if (!layout.getEditingTab()) {\n                var message = layout.i18nName(I18nLabel_1.I18nLabel.Move_Tabset, name_1);\n                layout.dragStart(event, message, node, node.isEnableDrag(), function (event2) { return undefined; }, onDoubleClick);\n            }\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (Utils_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onMaximizeToggle = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n        event.stopPropagation();\n    };\n    var onClose = function (event) {\n        layout.doAction(Actions_1.Actions.deleteTabset(node.getId()));\n        event.stopPropagation();\n    };\n    var onFloatTab = function (event) {\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.Actions.floatTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    var onDoubleClick = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n    };\n    // Start Render\n    var cm = layout.getClassName;\n    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\n    if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\n        tabbarInnerRef.current.scrollLeft = 0;\n    }\n    var selectedTabNode = node.getSelectedNode();\n    var style = node._styleWithPosition();\n    if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\n        Utils_1.hideElement(style, node.getModel().isUseVisibility());\n    }\n    var tabs = [];\n    if (node.isEnableTabStrip()) {\n        for (var i = 0; i < node.getChildren().length; i++) {\n            var child = node.getChildren()[i];\n            var isSelected = node.getSelected() === i;\n            tabs.push(React.createElement(TabButton_1.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, height: node.getTabStripHeight(), iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n        }\n    }\n    var showHeader = node.getName() !== undefined;\n    var stickyButtons = [];\n    var buttons = [];\n    var headerButtons = [];\n    // allow customization of header contents and buttons\n    var renderState = { headerContent: node.getName(), stickyButtons: stickyButtons, buttons: buttons, headerButtons: headerButtons };\n    layout.customizeTabSet(node, renderState);\n    var headerContent = renderState.headerContent;\n    stickyButtons = renderState.stickyButtons;\n    buttons = renderState.buttons;\n    headerButtons = renderState.headerButtons;\n    if (stickyButtons.length > 0) {\n        if (tabsTruncated) {\n            buttons = __spreadArray(__spreadArray([], stickyButtons), buttons);\n        }\n        else {\n            tabs.push(React.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n        }\n    }\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        var overflowContent = void 0;\n        if (typeof icons.more === \"function\") {\n            overflowContent = icons.more(node, hiddenTabs);\n        }\n        else {\n            overflowContent = (React.createElement(React.Fragment, null,\n                icons.more,\n                React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\n        }\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\n    }\n    if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n        var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n        buttons.push(React.createElement(\"button\", { key: \"float\", \"data-layout-path\": path + \"/button/float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\n    }\n    if (node.canMaximize()) {\n        var minTitle = layout.i18nName(I18nLabel_1.I18nLabel.Restore);\n        var maxTitle = layout.i18nName(I18nLabel_1.I18nLabel.Maximize);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"max\", \"data-layout-path\": path + \"/button/max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ?\n            (typeof icons.restore === \"function\") ? icons.restore(node) : icons.restore :\n            (typeof icons.maximize === \"function\") ? icons.maximize(node) : icons.maximize));\n    }\n    if (!node.isMaximized() && node.isEnableClose()) {\n        var title = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tabset);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: title, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: onClose, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, buttons));\n    var header;\n    var tabStrip;\n    var tabStripClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\n    if (node.getClassNameTabStrip() !== undefined) {\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\n    }\n    tabStripClasses += \" \" + Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\n    if (node.isActive() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n    }\n    if (node.isMaximized() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n    }\n    if (showHeader) {\n        var headerToolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, headerButtons));\n        var tabHeaderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER);\n        if (node.isActive()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n        }\n        if (node.isMaximized()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n        }\n        if (node.getClassNameHeader() !== undefined) {\n            tabHeaderClasses += \" \" + node.getClassNameHeader();\n        }\n        header = (React.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\n            headerToolbar));\n    }\n    var tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\n    if (node.getTabLocation() === \"top\") {\n        var top_1 = showHeader ? node.getHeaderHeight() + \"px\" : \"0px\";\n        tabStripStyle[\"top\"] = top_1;\n    }\n    else {\n        tabStripStyle[\"bottom\"] = \"0px\";\n    }\n    tabStrip = (React.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n        React.createElement(\"div\", { ref: tabbarInnerRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) },\n            React.createElement(\"div\", { style: { left: position }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\n        toolbar));\n    style = layout.styleFont(style);\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel },\n        header,\n        tabStrip));\n};\nexports.TabSet = TabSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
+
+/***/ }),
+
+/***/ "./src/view/Utils.tsx":
+/*!****************************!*\
+  !*** ./src/view/Utils.tsx ***!
+  \****************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.isAuxMouseEvent = exports.hideElement = exports.getRenderStateEx = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\n/** @hidden @internal */\nfunction getRenderStateEx(layout, node, iconFactory, titleFactory) {\n    var leadingContent = iconFactory ? iconFactory(node) : undefined;\n    var titleContent = node.getName();\n    var name = node.getName();\n    function isTitleObject(obj) {\n        return obj.titleContent !== undefined;\n    }\n    if (titleFactory !== undefined) {\n        var titleObj = titleFactory(node);\n        if (titleObj !== undefined) {\n            if (typeof titleObj === \"string\") {\n                titleContent = titleObj;\n                name = titleObj;\n            }\n            else if (isTitleObject(titleObj)) {\n                titleContent = titleObj.titleContent;\n                name = titleObj.name;\n            }\n            else {\n                titleContent = titleObj;\n            }\n        }\n    }\n    if (leadingContent === undefined && node.getIcon() !== undefined) {\n        leadingContent = React.createElement(\"img\", { style: { width: \"1em\", height: \"1em\" }, src: node.getIcon(), alt: \"leadingContent\" });\n    }\n    var buttons = [];\n    // allow customization of leading contents (icon) and contents\n    var renderState = { leading: leadingContent, content: titleContent, name: name, buttons: buttons };\n    layout.customizeTab(node, renderState);\n    node._setRenderedName(renderState.name);\n    return renderState;\n}\nexports.getRenderStateEx = getRenderStateEx;\n/** @hidden @internal */\nfunction hideElement(style, useVisibility) {\n    if (useVisibility) {\n        style.visibility = \"hidden\";\n    }\n    else {\n        style.display = \"none\";\n    }\n}\nexports.hideElement = hideElement;\n/** @hidden @internal */\nfunction isAuxMouseEvent(event) {\n    var auxEvent = false;\n    if (event.nativeEvent instanceof MouseEvent) {\n        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {\n            auxEvent = true;\n        }\n    }\n    return auxEvent;\n}\nexports.isAuxMouseEvent = isAuxMouseEvent;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Utils.tsx?");
 
 /***/ }),