@hpcc-js/composite/dist/index.umd.cjs.map

hpcc-js - Viz Composite

{"version":3,"file":"index.umd.cjs","sources":["../../layout/dist/index.js","../src/Utility.ts","../src/MultiChart.ts","../src/ChartPanel.ts","../src/Dermatology.ts","../src/MegaChart.ts","../src/Persist.ts","../src/__package__.ts"],"sourcesContent":["var __defProp = Object.defineProperty;\nvar __name = (target, value) => __defProp(target, \"name\", { value, configurable: true });\nimport { HTMLWidget, FAChar, select, selectAll, Utility, d3Event, Platform, drag, scaleLinear, dispatch, formatPrefix, format, formatLocale, formatSpecifier, sum, SVGWidget, Database, Palette, scaleOrdinal, ProgressBar, ToggleButton, Text, Button, Spacer, TitleBar, IconBar } from \"@hpcc-js/common\";\nimport { Table } from \"@hpcc-js/dgrid\";\nimport { instanceOfIHighlight } from \"@hpcc-js/api\";\nfunction _mergeNamespaces(n, m) {\n  for (var i = 0; i < m.length; i++) {\n    const e = m[i];\n    if (typeof e !== \"string\" && !Array.isArray(e)) {\n      for (const k2 in e) {\n        if (k2 !== \"default\" && !(k2 in n)) {\n          const d = Object.getOwnPropertyDescriptor(e, k2);\n          if (d) {\n            Object.defineProperty(n, k2, d.get ? d : {\n              enumerable: true,\n              get: /* @__PURE__ */ __name(() => e[k2], \"get\")\n            });\n          }\n        }\n      }\n    }\n  }\n  return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: \"Module\" }));\n}\n__name(_mergeNamespaces, \"_mergeNamespaces\");\nconst PKG_NAME = \"@hpcc-js/layout\";\nconst PKG_VERSION = \"3.1.1\";\nconst BUILD_VERSION = \"3.2.1\";\nconst _AbsoluteSurface = class _AbsoluteSurface extends HTMLWidget {\n  constructor() {\n    super();\n    this._tag = \"div\";\n  }\n  enter(domNode, element) {\n    super.enter(domNode, element);\n  }\n  update(domNode, element) {\n    super.update(domNode, element);\n    let xPos = 0;\n    let yPos = 0;\n    let width = this.clientWidth();\n    let height = this.clientHeight();\n    switch (this.units()) {\n      case \"pixels\":\n        xPos = this.widgetX();\n        yPos = this.widgetY();\n        width = this.widgetWidth() === \"\" ? width - xPos : Number(this.widgetWidth());\n        height = this.widgetHeight() === \"\" ? height - yPos : Number(this.widgetHeight());\n        break;\n      case \"percent\":\n        xPos = this.widgetX() * width / 100;\n        yPos = this.widgetY() * height / 100;\n        width = this.widgetWidth() === \"\" ? width - xPos : Number(this.widgetWidth()) * width / 100;\n        height = this.widgetHeight() === \"\" ? height - yPos : Number(this.widgetHeight()) * height / 100;\n        break;\n    }\n    element.style(\"opacity\", this.opacity());\n    const widgets = element.selectAll(\"#\" + this._id + \" > .placeholder\").data(this.widget() ? [this.widget()] : [], function(d) {\n      return d._id;\n    });\n    widgets.enter().append(\"div\").attr(\"class\", \"placeholder\").each(function(d) {\n      d.target(this);\n    }).merge(widgets).style(\"left\", xPos + \"px\").style(\"top\", yPos + \"px\").style(\"width\", width + \"px\").style(\"bottom\", height + \"px\").each(function(d) {\n      d.resize({ width, height });\n    });\n    widgets.exit().each(function(d) {\n      d.target(null);\n    }).remove();\n  }\n  exit(domNode, element) {\n    if (this.widget()) {\n      this.widget().target(null);\n    }\n    super.exit(domNode, element);\n  }\n};\n__name(_AbsoluteSurface, \"AbsoluteSurface\");\nlet AbsoluteSurface = _AbsoluteSurface;\nAbsoluteSurface.prototype._class += \" layout_AbsoluteSurface\";\nAbsoluteSurface.prototype.publish(\"units\", \"percent\", \"set\", \"Units\", [\"pixels\", \"percent\"]);\nAbsoluteSurface.prototype.publish(\"widgetX\", 0, \"number\", \"Widget XPos\");\nAbsoluteSurface.prototype.publish(\"widgetY\", 0, \"number\", \"Widget YPos\");\nAbsoluteSurface.prototype.publish(\"widgetWidth\", \"100\", \"string\", \"Widget Width, omit for full\");\nAbsoluteSurface.prototype.publish(\"widgetHeight\", \"100\", \"string\", \"Widget Height, omit for full\");\nAbsoluteSurface.prototype.publish(\"widget\", null, \"widget\", \"Widget\", null, { tags: [\"Private\"] });\nAbsoluteSurface.prototype.publish(\"opacity\", 1, \"number\", \"Opacity\");\nconst _Accordion = class _Accordion extends HTMLWidget {\n  _isClosed;\n  titleSpan;\n  iconDiv;\n  ul;\n  icon;\n  constructor() {\n    super();\n    this._tag = \"div\";\n    this._isClosed = false;\n  }\n  pushListItem(widget, prepend = false, protect = false) {\n    const contentArr = this.content();\n    widget._protected = protect;\n    if (prepend) {\n      contentArr.unshift(widget);\n    } else {\n      contentArr.push(widget);\n    }\n    this.content(contentArr);\n    return this;\n  }\n  clearListItems() {\n    const arr = [];\n    for (const i in this.content()) {\n      if (this.content()[i]._protected) {\n        arr.push(this.content()[i]);\n      }\n    }\n    this.content(arr);\n    return this;\n  }\n  collapseClick(element) {\n    if (element.classed(\"closed\")) {\n      this._isClosed = false;\n      element.classed(\"open\", true);\n      element.classed(\"closed\", false);\n    } else {\n      this._isClosed = true;\n      element.classed(\"open\", false);\n      element.classed(\"closed\", true);\n    }\n  }\n  enter(domNode, element) {\n    super.enter(domNode, element);\n    const context = this;\n    this._isClosed = this.defaultCollapsed();\n    element.classed(this._isClosed ? \"closed\" : \"open\", true);\n    this.titleSpan = element.append(\"span\").classed(\"collapsible-title\", true);\n    this.iconDiv = element.append(\"div\").classed(\"collapsible-icon\", true);\n    this.ul = element.append(\"ul\");\n    this.icon = new FAChar().size({ height: 24, width: 24 }).target(this.iconDiv.node());\n    this.iconDiv.on(\"click\", function() {\n      context.collapseClick(element);\n      context.render();\n    });\n    this.titleSpan.on(\"click\", function() {\n      context.collapseClick(element);\n      context.render();\n    });\n  }\n  update(domNode, element) {\n    super.update(domNode, element);\n    const context = this;\n    const this_id = \"\";\n    this.titleSpan.text(context.title().length > 0 ? context.title() + this_id : \"Accordion [\" + context._id + \"]\" + this_id);\n    const rows = this.ul.selectAll(\"#\" + context._id + \" > ul > li\").data(this.content(), function(d) {\n      return d._id;\n    });\n    rows.enter().append(function(widget) {\n      const li = document.createElement(\"li\");\n      if (widget._target === null) {\n        const wSize = widget.size();\n        if (wSize.width === 0 || wSize.height === 0) {\n          const cSize = context.size();\n          widget.size({\n            width: cSize.width,\n            height: cSize.width\n          });\n        }\n        widget.target(li);\n      } else {\n        return widget._target;\n      }\n      return li;\n    });\n    rows.exit().remove();\n    this.icon.text_colorFill(this.titleFontColor()).char(this._isClosed ? this.closedIcon() : this.openIcon()).render();\n  }\n  exit(domNode, element) {\n    super.exit(domNode, element);\n  }\n};\n__name(_Accordion, \"Accordion\");\nlet Accordion = _Accordion;\nAccordion.prototype._class += \" layout_Accordion\";\nAccordion.prototype.publish(\"content\", [], \"widgetArray\", \"Array of widgets\", null, { tags: [\"Basic\"] });\nAccordion.prototype.publish(\"title\", \"\", \"string\", \"Title of collapsible section\", null, { tags: [\"Private\"] });\nAccordion.prototype.publish(\"openIcon\", \"\", \"string\", \"Icon to display when list is open\", null, { tags: [\"Private\"] });\nAccordion.prototype.publish(\"closedIcon\", \"\", \"string\", \"Icon to display when list is closed\", null, { tags: [\"Private\"] });\nAccordion.prototype.publish(\"titleFontColor\", \"#FFFFFF\", \"html-color\", \"Title font color\", null, { tags: [\"Private\"] });\nAccordion.prototype.publish(\"titleBackgroundColor\", \"#333333\", \"html-color\", \"Title background color\", null, { tags: [\"Private\"] });\nAccordion.prototype.publish(\"defaultCollapsed\", false, \"boolean\", \"Collapsed by default if true\", null, { tags: [\"Private\"] });\nconst _Surface = class _Surface extends HTMLWidget {\n  _surfaceButtons;\n  constructor() {\n    super();\n    this._tag = \"div\";\n    this._surfaceButtons = [];\n  }\n  widgetSize(titleDiv, widgetDiv) {\n    let width = this.clientWidth();\n    let height = this.clientHeight();\n    if (this.title()) {\n      height -= this.calcHeight(titleDiv);\n    }\n    height -= this.calcFrameHeight(widgetDiv);\n    width -= this.calcFrameWidth(widgetDiv);\n    return { width, height };\n  }\n  enter(domNode, element) {\n    super.enter(domNode, element);\n  }\n  update(domNode, element2) {\n    super.update(domNode, element2);\n    const context = this;\n    element2.classed(\"shadow2\", this.surfaceShadow()).style(\"border-width\", this.surfaceBorderWidth_exists() ? this.surfaceBorderWidth() + \"px\" : null).style(\"border-color\", this.surfaceBorderColor()).style(\"border-radius\", this.surfaceBorderRadius_exists() ? this.surfaceBorderRadius() + \"px\" : null).style(\"background-color\", this.surfaceBackgroundColor());\n    const titles = element2.selectAll(\".surfaceTitle\").data(this.title() ? [this.title()] : []);\n    titles.enter().insert(\"h3\", \"div\").attr(\"class\", \"surfaceTitle\").merge(titles).text(function(d) {\n      return d;\n    }).style(\"text-align\", this.surfaceTitleAlignment()).style(\"color\", this.surfaceTitleFontColor()).style(\"font-size\", this.surfaceTitleFontSize_exists() ? this.surfaceTitleFontSize() + \"px\" : null).style(\"font-family\", this.surfaceTitleFontFamily()).style(\"font-weight\", this.surfaceTitleFontBold() ? \"bold\" : \"normal\").style(\"background-color\", this.surfaceTitleBackgroundColor()).style(\"padding\", this.surfaceTitlePadding_exists() ? this.surfaceTitlePadding() + \"px\" : null).style(\"title\", this.altText_exists() ? this.altText() : null);\n    titles.exit().remove();\n    const surfaceTitle = element2.select(\".surfaceTitle\");\n    const surfaceButtons = surfaceTitle.append(\"div\").attr(\"class\", \"html-button-container\").selectAll(\".surface-button\").data(this.buttonAnnotations());\n    surfaceButtons.enter().append(\"button\").classed(\"surface-button\", true).each(function(button, idx) {\n      const el = context._surfaceButtons[idx] = select(this).attr(\"class\", \"surface-button\" + (button.class ? \" \" + button.class : \"\")).attr(\"id\", button.id).style(\"padding\", button.padding).style(\"width\", button.width).style(\"height\", button.height).style(\"cursor\", \"pointer\");\n      if (button.font === \"FontAwesome\") {\n        el.style(\"background\", \"transparent\").style(\"border\", \"none\").on(\"click\", function(d) {\n          context.click(d);\n        }).append(\"i\").attr(\"class\", \"fa\").text(function() {\n          return button.label;\n        });\n      } else {\n        el.text(function() {\n          return button.label;\n        }).on(\"click\", function(d) {\n          context.click(d);\n        });\n      }\n    });\n    surfaceButtons.exit().each(function(_d, idx) {\n      const element = select(this);\n      delete context._surfaceButtons[idx];\n      element.remove();\n    });\n    const widgets = element2.selectAll(\"#\" + this._id + \" > .surfaceWidget\").data(this.widget() ? [this.widget()] : [], function(d) {\n      return d._id;\n    });\n    widgets.enter().append(\"div\").attr(\"class\", \"surfaceWidget\").each(function(d) {\n      select(context.element().node().parentElement).classed(\"content-icon content-icon-\" + d.classID().split(\"_\")[1], true);\n      d.target(this);\n    }).merge(widgets).style(\"padding\", this.surfacePadding_exists() ? this.surfacePadding() + \"px\" : null).each(function(d) {\n      const widgetSize = context.widgetSize(element2.select(\"h3\"), select(this));\n      if (widgetSize.width < 0) widgetSize.width = 0;\n      if (widgetSize.height < 0) widgetSize.height = 0;\n      d.resize({ width: widgetSize.width, height: widgetSize.height });\n    });\n    widgets.exit().each(function(d) {\n      d.target(null);\n    }).remove();\n  }\n  exit(domNode, element) {\n    if (this.widget()) {\n      this.widget().target(null);\n    }\n    super.exit(domNode, element);\n  }\n  //  Events  ---\n  click(obj) {\n  }\n};\n__name(_Surface, \"Surface\");\nlet Surface = _Surface;\nSurface.prototype._class += \" layout_Surface\";\nSurface.prototype.publish(\"title\", \"\", \"string\", \"Title\", null, { tags: [\"Intermediate\"] });\nSurface.prototype.publish(\"altText\", null, \"string\", \"Alt text\", null, { optional: true });\nSurface.prototype.publish(\"surfaceTitlePadding\", null, \"number\", \"Title Padding (px)\", null, { tags: [\"Advanced\"], disable: /* @__PURE__ */ __name((w) => !w.title(), \"disable\") });\nSurface.prototype.publish(\"surfaceTitleFontSize\", null, \"number\", \"Title Font Size (px)\", null, { tags: [\"Advanced\"], disable: /* @__PURE__ */ __name((w) => !w.title(), \"disable\") });\nSurface.prototype.publish(\"surfaceTitleFontColor\", null, \"html-color\", \"Title Font Color\", null, { tags: [\"Advanced\"], disable: /* @__PURE__ */ __name((w) => !w.title(), \"disable\") });\nSurface.prototype.publish(\"surfaceTitleFontFamily\", null, \"string\", \"Title Font Family\", null, { tags: [\"Advanced\"], disable: /* @__PURE__ */ __name((w) => !w.title(), \"disable\") });\nSurface.prototype.publish(\"surfaceTitleFontBold\", true, \"boolean\", \"Enable Bold Title Font\", null, { tags: [\"Advanced\"], disable: /* @__PURE__ */ __name((w) => !w.title(), \"disable\") });\nSurface.prototype.publish(\"surfaceTitleBackgroundColor\", null, \"html-color\", \"Title Background Color\", null, { tags: [\"Advanced\"], disable: /* @__PURE__ */ __name((w) => !w.title(), \"disable\") });\nSurface.prototype.publish(\"surfaceTitleAlignment\", \"center\", \"set\", \"Title Alignment\", [\"left\", \"right\", \"center\"], { tags: [\"Basic\"], disable: /* @__PURE__ */ __name((w) => !w.title(), \"disable\") });\nSurface.prototype.publish(\"surfaceShadow\", false, \"boolean\", \"3D Shadow\");\nSurface.prototype.publish(\"surfacePadding\", null, \"string\", \"Surface Padding (px)\", null, { tags: [\"Intermediate\"] });\nSurface.prototype.publish(\"surfaceBackgroundColor\", null, \"html-color\", \"Surface Background Color\", null, { tags: [\"Advanced\"] });\nSurface.prototype.publish(\"surfaceBorderWidth\", null, \"number\", \"Surface Border Width (px)\", null, { tags: [\"Advanced\"] });\nSurface.prototype.publish(\"surfaceBorderColor\", null, \"html-color\", \"Surface Border Color\", null, { tags: [\"Advanced\"] });\nSurface.prototype.publish(\"surfaceBorderRadius\", null, \"number\", \"Surface Border Radius (px)\", null, { tags: [\"Advanced\"] });\nSurface.prototype.publish(\"buttonAnnotations\", [], \"array\", \"Button Array\", null, { tags: [\"Private\"] });\nSurface.prototype.publish(\"widget\", null, \"widget\", \"Widget\", null, { tags: [\"Basic\"] });\nconst _Cell = class _Cell extends Surface {\n  _indicateTheseIds;\n  constructor() {\n    super();\n    this._indicateTheseIds = [];\n  }\n  indicateTheseIds(_) {\n    if (!arguments.length) return this._indicateTheseIds;\n    this._indicateTheseIds = _;\n    return this;\n  }\n  enter(domNode, element) {\n    super.enter(domNode, element);\n    const context = this;\n    element.classed(\"layout_Surface\", true).on(\"mouseenter\", function() {\n      context.onMouseEnter();\n    }).on(\"mouseleave\", function() {\n      context.onMouseLeave();\n    });\n  }\n  update(domNode, element) {\n    super.update(domNode, element);\n  }\n  onMouseEnter() {\n    const arr = this.indicateTheseIds();\n    const opacity = this.indicatorOpacity();\n    const indicatorBorderColor = this.indicatorBorderColor();\n    const indicatorGlowColor = this.indicatorGlowColor();\n    for (let i = 0; i < arr.length; i++) {\n      const otherElement = select(\"#\" + arr[i]);\n      const otherWidget = otherElement.datum();\n      if (otherElement && otherWidget) {\n        otherElement.append(\"div\").attr(\"class\", \"update-indicator\").style(\"width\", otherWidget.width() + \"px\").style(\"height\", otherWidget.height() + \"px\").style(\"opacity\", opacity).style(\"border-color\", indicatorBorderColor).style(\"-webkit-box-shadow\", \"inset 0px 0px 30px 0px \" + indicatorGlowColor).style(\"-moz-box-shadow\", \"inset 0px 0px 30px 0px \" + indicatorGlowColor).style(\"box-shadow\", \"inset 0px 0px 30px 0px \" + indicatorGlowColor);\n      }\n    }\n  }\n  onMouseLeave() {\n    const arr = this.indicateTheseIds();\n    for (let i = 0; i < arr.length; i++) {\n      selectAll(\"#\" + arr[i] + \" > div.update-indicator\").remove();\n    }\n  }\n};\n__name(_Cell, \"Cell\");\nlet Cell = _Cell;\nCell.prototype._class += \" layout_Cell\";\nCell.prototype.publish(\"gridRow\", 0, \"number\", \"Grid Row Position\", null, { tags: [\"Private\"] });\nCell.prototype.publish(\"gridCol\", 0, \"number\", \"Grid Column Position\", null, { tags: [\"Private\"] });\nCell.prototype.publish(\"gridRowSpan\", 1, \"number\", \"Grid Row Span\", null, { tags: [\"Private\"] });\nCell.prototype.publish(\"gridColSpan\", 1, \"number\", \"Grid Column Span\", null, { tags: [\"Private\"] });\nCell.prototype.publish(\"indicatorGlowColor\", \"#EEEE11\", \"html-color\", \"Glow color of update-indicator\", null, { tags: [\"Basic\"] });\nCell.prototype.publish(\"indicatorBorderColor\", \"#F48A00\", \"html-color\", \"Border color of update-indicator\", null, { tags: [\"Basic\"] });\nCell.prototype.publish(\"indicatorOpacity\", 0.8, \"number\", \"Opacity of update-indicator\", null, { tags: [\"Basic\"] });\nconst _Border = class _Border extends HTMLWidget {\n  _colCount;\n  _rowCount;\n  _colSize;\n  _rowSize;\n  _shrinkWrapBoxes;\n  _watch;\n  _offsetX;\n  _offsetY;\n  _dragCell;\n  _dragCellSize;\n  _dragCellStartSize;\n  _handleTop;\n  _handleLeft;\n  _dragPrevX;\n  _dragPrevY;\n  _cellSizes;\n  contentDiv;\n  _scrollBarWidth;\n  _borderHandles;\n  _sectionTypeArr;\n  constructor() {\n    super();\n    this._tag = \"div\";\n    this._colCount = 0;\n    this._rowCount = 0;\n    this._colSize = 0;\n    this._rowSize = 0;\n    this._shrinkWrapBoxes = {};\n    this.content([]);\n    this.sectionTypes([]);\n  }\n  watchWidget(widget) {\n    if (this._watch === void 0) {\n      this._watch = {};\n    }\n    if (this._watch[widget.id()]) {\n      this._watch[widget.id()].remove();\n      delete this._watch[widget.id()];\n    }\n    if (widget) {\n      const context = this;\n      this._watch[widget.id()] = widget.monitor(function(paramId, newVal, oldVal) {\n        if (oldVal !== newVal) {\n          context.lazyPostUpdate();\n        }\n      });\n    }\n  }\n  lazyPostUpdate = Utility.debounce(function() {\n    this.postUpdate();\n  }, 100);\n  applyLayoutType() {\n    const layoutObj = this.borderLayoutObject();\n    this.content().forEach(function(cell, i) {\n      cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left;\n      cell._fixedTop = layoutObj[this.sectionTypes()[i]].top;\n      cell._fixedWidth = layoutObj[this.sectionTypes()[i]].width;\n      cell._fixedHeight = layoutObj[this.sectionTypes()[i]].height;\n      cell._dragHandles = this.cellSpecificDragHandles(this.sectionTypes()[i]);\n    }, this);\n  }\n  cellSpecificDragHandles(sectionType) {\n    switch (sectionType) {\n      case \"top\":\n        return [\"s\"];\n      case \"right\":\n        return [\"w\"];\n      case \"bottom\":\n        return [\"n\"];\n      case \"left\":\n        return [\"e\"];\n      case \"center\":\n        return [];\n    }\n  }\n  borderLayoutObject(layoutType) {\n    const retObj = {};\n    const context = this;\n    let topSize;\n    let topPerc;\n    let bottomSize;\n    let bottomPerc;\n    let leftSize;\n    let leftPerc;\n    let rightSize;\n    let rightPerc;\n    const bcRect = this.target().getBoundingClientRect();\n    bcRect.top;\n    bcRect.left;\n    bcRect.bottom;\n    bcRect.right;\n    if (this.target() instanceof SVGElement) {\n      parseFloat(this.target().getAttribute(\"width\"));\n      parseFloat(this.target().getAttribute(\"height\"));\n    } else {\n      bcRect.width;\n      bcRect.height;\n    }\n    if (this.sectionTypes().indexOf(\"top\") !== -1) {\n      topSize = this.topSize();\n      topPerc = this.topPercentage();\n      if (typeof this._shrinkWrapBoxes[\"top\"] !== \"undefined\") {\n        topSize = this._shrinkWrapBoxes[\"top\"].height + this.gutter();\n        topPerc = 0;\n      }\n    }\n    if (this.sectionTypes().indexOf(\"bottom\") !== -1) {\n      bottomSize = this.bottomSize();\n      bottomPerc = this.bottomPercentage();\n      if (typeof this._shrinkWrapBoxes[\"bottom\"] !== \"undefined\") {\n        bottomSize = this._shrinkWrapBoxes[\"bottom\"].height + this.gutter();\n        bottomPerc = 0;\n      }\n    }\n    if (this.sectionTypes().indexOf(\"left\") !== -1) {\n      leftSize = this.leftSize();\n      leftPerc = this.leftPercentage();\n      if (typeof this._shrinkWrapBoxes[\"left\"] !== \"undefined\") {\n        leftSize = this._shrinkWrapBoxes[\"left\"].width + this.gutter();\n        leftPerc = 0;\n      }\n    }\n    if (this.sectionTypes().indexOf(\"right\") !== -1) {\n      rightSize = this.rightSize();\n      rightPerc = this.rightPercentage();\n      if (typeof this._shrinkWrapBoxes[\"right\"] !== \"undefined\") {\n        rightSize = this._shrinkWrapBoxes[\"right\"].width + this.gutter();\n        rightPerc = 0;\n      }\n    }\n    const t = _sectionPlacementObject({\n      width: { \"px\": 0, \"%\": 100 },\n      height: { \"px\": topSize, \"%\": topPerc },\n      top: { \"px\": 0, \"%\": 0 },\n      left: { \"px\": 0, \"%\": 0 }\n    });\n    const b = _sectionPlacementObject({\n      width: { \"px\": 0, \"%\": 100 },\n      height: { \"px\": bottomSize, \"%\": bottomPerc },\n      top: { \"px\": 0, \"%\": 100 },\n      left: { \"px\": 0, \"%\": 0 }\n    });\n    b.top -= b.height;\n    const l = _sectionPlacementObject({\n      width: { \"px\": leftSize, \"%\": leftPerc },\n      height: { \"px\": -t.height - b.height, \"%\": 100 },\n      top: { \"px\": t.height, \"%\": 0 },\n      left: { \"px\": 0, \"%\": 0 }\n    });\n    const r = _sectionPlacementObject({\n      width: { \"px\": rightSize, \"%\": rightPerc },\n      height: { \"px\": -t.height - b.height, \"%\": 100 },\n      top: { \"px\": t.height, \"%\": 0 },\n      left: { \"px\": 0, \"%\": 100 }\n    });\n    r.left -= r.width;\n    const c2 = _sectionPlacementObject({\n      width: { \"px\": -r.width - l.width, \"%\": 100 },\n      height: { \"px\": -t.height - b.height, \"%\": 100 },\n      top: { \"px\": t.height, \"%\": 0 },\n      left: { \"px\": l.width, \"%\": 0 }\n    });\n    retObj[\"top\"] = t;\n    retObj[\"bottom\"] = b;\n    retObj[\"right\"] = r;\n    retObj[\"left\"] = l;\n    retObj[\"center\"] = c2;\n    return retObj;\n    function _sectionPlacementObject(obj) {\n      obj.width[\"px\"] = typeof obj.width[\"px\"] !== \"undefined\" ? obj.width[\"px\"] : 0;\n      obj.width[\"%\"] = typeof obj.width[\"%\"] !== \"undefined\" ? obj.width[\"%\"] : 0;\n      obj.height[\"px\"] = typeof obj.height[\"px\"] !== \"undefined\" ? obj.height[\"px\"] : 0;\n      obj.height[\"%\"] = typeof obj.height[\"%\"] !== \"undefined\" ? obj.height[\"%\"] : 0;\n      const ret = {\n        width: obj.width[\"px\"] + obj.width[\"%\"] / 100 * context.width(),\n        height: obj.height[\"px\"] + obj.height[\"%\"] / 100 * context.height(),\n        top: obj.top[\"px\"] + obj.top[\"%\"] / 100 * context.height() + context.gutter() / 2,\n        left: obj.left[\"px\"] + obj.left[\"%\"] / 100 * context.width() + context.gutter() / 2\n      };\n      return ret;\n    }\n    __name(_sectionPlacementObject, \"_sectionPlacementObject\");\n  }\n  clearContent(sectionType) {\n    if (!sectionType) {\n      this.content().forEach(function(contentWidget) {\n        contentWidget.target(null);\n        return false;\n      });\n      select(\"#\" + this.id() + \" > div.borderHandle\").classed(\"borderHandleDisabled\", true);\n      delete this._watch;\n      this.content([]);\n      this.sectionTypes([]);\n    } else {\n      const idx = this.sectionTypes().indexOf(sectionType);\n      if (idx >= 0) {\n        if (this._watch && this.content()[idx]) {\n          delete this._watch[this.content()[idx].id()];\n        }\n        this.content()[idx].target(null);\n        select(\"#\" + this.id() + \" > div.borderHandle_\" + sectionType).classed(\"borderHandleDisabled\", true);\n        this.content().splice(idx, 1);\n        this.sectionTypes().splice(idx, 1);\n      }\n    }\n  }\n  hasContent(sectionType, widget, title) {\n    return this.sectionTypes().indexOf(sectionType) >= 0;\n  }\n  setContent(sectionType, widget, title) {\n    this.clearContent(sectionType);\n    title = typeof title !== \"undefined\" ? title : \"\";\n    if (widget) {\n      const cell = new Cell().surfaceBorderWidth(0).widget(widget).title(title);\n      this.watchWidget(widget);\n      this.content().push(cell);\n      this.sectionTypes().push(sectionType);\n    }\n    return this;\n  }\n  getCell(id) {\n    const idx = this.sectionTypes().indexOf(id);\n    if (idx >= 0) {\n      return this.content()[idx];\n    }\n    return null;\n  }\n  getContent(id) {\n    const idx = this.sectionTypes().indexOf(id);\n    if (idx >= 0) {\n      return this.content()[idx].widget();\n    }\n    return null;\n  }\n  setLayoutOffsets() {\n    this._offsetX = this._element.node().getBoundingClientRect().left + this.gutter() / 2;\n    this._offsetY = this._element.node().getBoundingClientRect().top + this.gutter() / 2;\n  }\n  dragStart(handle) {\n    const event = d3Event();\n    event.sourceEvent.stopPropagation();\n    const context = this;\n    this._dragCell = handle;\n    this._dragCellStartSize = this[handle + \"Size\"]();\n    if (this[handle + \"ShrinkWrap\"]()) {\n      this[handle + \"Percentage\"](0);\n      this[handle + \"ShrinkWrap\"](false);\n    }\n    const handleElm = select(\"#\" + context.id() + \" > div.borderHandle_\" + handle);\n    context._handleTop = parseFloat(handleElm.style(\"top\").split(\"px\")[0]);\n    context._handleLeft = parseFloat(handleElm.style(\"left\").split(\"px\")[0]);\n    this._dragPrevX = event.sourceEvent.clientX;\n    this._dragPrevY = event.sourceEvent.clientY;\n  }\n  dragTick(handle) {\n    const context = this;\n    const event = d3Event();\n    const xDelta = this._dragPrevX - event.sourceEvent.clientX;\n    const yDelta = this._dragPrevY - event.sourceEvent.clientY;\n    switch (handle) {\n      case \"top\":\n      case \"bottom\":\n        _moveHandles(handle, yDelta);\n        break;\n      case \"right\":\n      case \"left\":\n        _moveHandles(handle, xDelta);\n        break;\n    }\n    function _moveHandles(handle2, delta) {\n      if (delta === 0) return;\n      const handles = selectAll(\"#\" + context.id() + \" > div.borderHandle\");\n      const grabbedHandle = select(\"#\" + context.id() + \" > div.borderHandle_\" + handle2);\n      if (grabbedHandle.classed(\"borderHandle_top\")) {\n        grabbedHandle.style(\"top\", context._handleTop - delta + \"px\");\n        context._cellSizes.topHeight = context._handleTop - delta;\n        context._cellSizes.leftHeight = context._cellSizes.height;\n        context._cellSizes.leftHeight -= context._cellSizes.topHeight;\n        context._cellSizes.leftHeight -= context._cellSizes.bottomHeight;\n        context._cellSizes.rightHeight = context._cellSizes.leftHeight;\n      } else if (grabbedHandle.classed(\"borderHandle_right\")) {\n        grabbedHandle.style(\"left\", context._handleLeft - delta + \"px\");\n        context._cellSizes.rightWidth = context._cellSizes.width - context._handleLeft + delta;\n      } else if (grabbedHandle.classed(\"borderHandle_bottom\")) {\n        grabbedHandle.style(\"top\", context._handleTop - delta + \"px\");\n        context._cellSizes.bottomHeight = context._cellSizes.height - context._handleTop + delta;\n        context._cellSizes.leftHeight = context._cellSizes.height;\n        context._cellSizes.leftHeight -= context._cellSizes.bottomHeight;\n        context._cellSizes.leftHeight -= context._cellSizes.topHeight;\n        context._cellSizes.rightHeight = context._cellSizes.leftHeight;\n      } else if (grabbedHandle.classed(\"borderHandle_left\")) {\n        grabbedHandle.style(\"left\", context._handleLeft - delta + \"px\");\n        context._cellSizes.leftWidth = context._handleLeft - delta;\n      }\n      handles.each(function() {\n        const handle3 = select(this);\n        if (handle3.classed(\"borderHandle_top\")) {\n          handle3.style(\"width\", context._cellSizes.width + \"px\");\n          handle3.style(\"top\", context._cellSizes.topHeight - 3 + \"px\");\n        } else if (handle3.classed(\"borderHandle_right\")) {\n          handle3.style(\"left\", context._cellSizes.width - context._cellSizes.rightWidth + \"px\");\n          handle3.style(\"top\", context._cellSizes.topHeight + 3 + \"px\");\n          handle3.style(\"height\", context._cellSizes.rightHeight + \"px\");\n        } else if (handle3.classed(\"borderHandle_bottom\")) {\n          handle3.style(\"width\", context._cellSizes.width + \"px\");\n          handle3.style(\"top\", context._cellSizes.height - context._cellSizes.bottomHeight - 3 + \"px\");\n        } else if (handle3.classed(\"borderHandle_left\")) {\n          handle3.style(\"left\", context._cellSizes.leftWidth + \"px\");\n          handle3.style(\"height\", context._cellSizes.leftHeight + \"px\");\n          handle3.style(\"top\", context._cellSizes.topHeight + 3 + \"px\");\n        }\n      });\n    }\n    __name(_moveHandles, \"_moveHandles\");\n  }\n  dragEnd(handle) {\n    if (handle) {\n      const event = d3Event();\n      const xDelta = this._dragPrevX - event.sourceEvent.clientX;\n      const yDelta = this._dragPrevY - event.sourceEvent.clientY;\n      switch (handle) {\n        case \"top\":\n          if (yDelta !== 0) {\n            this.topPercentage(0);\n            this.topSize(this.topSize() === 0 ? this.getContent(\"top\").getBBox().height - yDelta : this.topSize() - yDelta);\n          }\n          break;\n        case \"right\":\n          if (xDelta !== 0) {\n            this.rightPercentage(0);\n            this.rightSize(this.rightSize() === 0 ? this.getContent(\"right\").getBBox().width + xDelta : this.rightSize() + xDelta);\n          }\n          break;\n        case \"bottom\":\n          if (yDelta !== 0) {\n            this.bottomPercentage(0);\n            this.bottomSize(this.bottomSize() === 0 ? this.getContent(\"bottom\").getBBox().height + yDelta : this.bottomSize() + yDelta);\n          }\n          break;\n        case \"left\":\n          if (xDelta !== 0) {\n            this.leftPercentage(0);\n            this.leftSize(this.leftSize() === 0 ? this.getContent(\"left\").getBBox().width - xDelta : this.leftSize() - xDelta);\n          }\n          break;\n      }\n      this._dragPrevX = event.sourceEvent.clientX;\n      this._dragPrevY = event.sourceEvent.clientY;\n    }\n    this.render();\n  }\n  size(_) {\n    const retVal = HTMLWidget.prototype.size.apply(this, arguments);\n    if (arguments.length && this.contentDiv) {\n      this.contentDiv.style(\"width\", this._size.width + \"px\").style(\"height\", this._size.height + \"px\");\n    }\n    return retVal;\n  }\n  enter(domNode, element) {\n    super.enter(domNode, element);\n    const context = this;\n    element.style(\"position\", \"relative\");\n    this.contentDiv = element.append(\"div\").classed(\"border-content\", true);\n    this._scrollBarWidth = Platform.getScrollbarWidth();\n    this._borderHandles = [\"top\", \"left\", \"right\", \"bottom\"];\n    const handles = element.selectAll(\"div.borderHandle\").data(this._borderHandles);\n    handles.enter().append(\"div\").classed(\"borderHandle\", true).each(function(handle) {\n      const h = select(this);\n      h.classed(\"borderHandle_\" + handle, true).classed(\"borderHandleDisabled\", context.getContent(handle) === null);\n    });\n  }\n  update(domNode, element) {\n    super.update(domNode, element);\n    this._sectionTypeArr = this.sectionTypes();\n    const context = this;\n    element.classed(\"design-mode\", this.designMode());\n    this.setLayoutOffsets();\n    const rows = this.contentDiv.selectAll(\".cell_\" + this._id).data(this.content(), function(d) {\n      return d._id;\n    });\n    const rowsUpdate = rows.enter().append(\"div\").classed(\"cell_\" + this._id, true).style(\"position\", \"absolute\").each(function(d, i) {\n      select(this).classed(\"border-cell border-cell-\" + context._sectionTypeArr[i], true);\n      d.target(this);\n      select(\"#\" + context.id() + \" > div.borderHandle_\" + context._sectionTypeArr[i]).classed(\"borderHandleDisabled\", false);\n    }).merge(rows);\n    rowsUpdate.each(function(d, idx) {\n      const sectionType = context.sectionTypes()[idx];\n      if (typeof context[sectionType + \"ShrinkWrap\"] !== \"undefined\" && context[sectionType + \"ShrinkWrap\"]()) {\n        d.render();\n        context._shrinkWrapBoxes[sectionType] = d.widget().getBBox(true);\n      } else {\n        delete context._shrinkWrapBoxes[sectionType];\n      }\n    });\n    const drag$1 = drag().on(\"start\", function(d, i) {\n      context.dragStart.call(context, d, i);\n    }).on(\"drag\", function(d, i) {\n      context.dragTick.call(context, d, i);\n    }).on(\"end\", function(d, i) {\n      context.dragEnd.call(context, d, i);\n    });\n    if (this.designMode()) {\n      element.selectAll(\"#\" + this.id() + \" > div.borderHandle\").call(drag$1);\n    } else {\n      element.selectAll(\"#\" + this.id() + \" > div.borderHandle\").on(\".drag\", null);\n    }\n    const layoutObj = this.borderLayoutObject();\n    this.content().forEach(function(cell, i) {\n      cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left;\n      cell._fixedTop = layoutObj[this.sectionTypes()[i]].top;\n      cell._fixedWidth = layoutObj[this.sectionTypes()[i]].width;\n      cell._fixedHeight = layoutObj[this.sectionTypes()[i]].height;\n      cell._dragHandles = [];\n    }, this);\n    rowsUpdate.style(\"left\", function(d) {\n      return d._fixedLeft + \"px\";\n    }).style(\"top\", function(d) {\n      return d._fixedTop + \"px\";\n    }).style(\"width\", function(d) {\n      return d._fixedWidth - context.gutter() + \"px\";\n    }).style(\"height\", function(d) {\n      return d._fixedHeight - context.gutter() + \"px\";\n    }).each(function(d) {\n      d._placeholderElement.attr(\"draggable\", context.designMode()).selectAll(\".dragHandle\").attr(\"draggable\", context.designMode());\n      d.surfacePadding(context.surfacePadding()).resize();\n    });\n    rows.exit().each(function(d) {\n      d.target(null);\n    }).remove();\n    this.getCellSizes();\n    element.selectAll(\"#\" + this.id() + \" > div.borderHandle\").each(function() {\n      const handle = select(this);\n      if (handle.classed(\"borderHandle_top\")) {\n        handle.style(\"width\", context._cellSizes.width + \"px\");\n        handle.style(\"top\", context._cellSizes.topHeight - 3 + \"px\");\n      } else if (handle.classed(\"borderHandle_right\")) {\n        handle.style(\"left\", context._cellSizes.width - context._cellSizes.rightWidth + \"px\");\n        handle.style(\"top\", context._cellSizes.topHeight + 3 + \"px\");\n        handle.style(\"height\", context._cellSizes.rightHeight + \"px\");\n      } else if (handle.classed(\"borderHandle_bottom\")) {\n        handle.style(\"width\", context._cellSizes.width + \"px\");\n        handle.style(\"top\", context._cellSizes.height - context._cellSizes.bottomHeight - 3 + \"px\");\n      } else if (handle.classed(\"borderHandle_left\")) {\n        handle.style(\"left\", context._cellSizes.leftWidth + \"px\");\n        handle.style(\"height\", context._cellSizes.leftHeight + \"px\");\n        handle.style(\"top\", context._cellSizes.topHeight + 3 + \"px\");\n      }\n    });\n  }\n  getCellSizes() {\n    const context = this;\n    context._cellSizes = {};\n    const contentRect = this.element().node().getBoundingClientRect();\n    context._cellSizes.width = contentRect.width;\n    context._cellSizes.height = contentRect.height;\n    this.element().selectAll(\"#\" + this.id() + \" > div > div.border-cell\").each(function() {\n      const cell = select(this);\n      if (typeof cell.node === \"function\") {\n        const rect = cell.node().getBoundingClientRect();\n        if (cell.classed(\"border-cell-top\")) {\n          context._cellSizes.topHeight = rect.height;\n        } else if (cell.classed(\"border-cell-left\")) {\n          context._cellSizes.leftWidth = rect.width;\n          context._cellSizes.leftHeight = rect.height;\n        } else if (cell.classed(\"border-cell-right\")) {\n          context._cellSizes.rightWidth = rect.width;\n          context._cellSizes.rightHeight = rect.height;\n        } else if (cell.classed(\"border-cell-bottom\")) {\n          context._cellSizes.bottomHeight = rect.height;\n        }\n      }\n    });\n    const sizes = [\"height\", \"width\", \"topHeight\", \"bottomHeight\", \"leftHeight\", \"rightHeight\", \"leftWidth\", \"rightWidth\"];\n    sizes.forEach(function(size) {\n      context._cellSizes[size] = context._cellSizes[size] === void 0 ? 0 : context._cellSizes[size];\n    });\n  }\n  postUpdate(domNode, element) {\n    const context = this;\n    this.content().forEach(function(n) {\n      if (n._element.node() !== null && n.widget()) {\n        const prevBox = n.widget().getBBox(false, true);\n        const currBox = n.widget().getBBox(true, true);\n        if (prevBox.width !== currBox.width || prevBox.height !== currBox.height) {\n          context.lazyRender();\n        }\n      }\n    });\n  }\n  exit(domNode, element) {\n    this.content().forEach((w) => w.target(null));\n    super.exit(domNode, element);\n  }\n};\n__name(_Border, \"Border\");\nlet Border = _Border;\nBorder.prototype._class += \" layout_Border\";\nBorder.prototype.publish(\"designMode\", false, \"boolean\", \"Design Mode\", null, { tags: [\"Basic\"] });\nBorder.prototype.publish(\"content\", [], \"widgetArray\", \"widgets\", null, { tags: [\"Intermediate\"] });\nBorder.prototype.publish(\"gutter\", 0, \"number\", \"Gap Between Widgets\", null, { tags: [\"Basic\"] });\nBorder.prototype.publish(\"topShrinkWrap\", false, \"boolean\", \"'Top' Cell shrinks to fit content\", null, { tags: [\"Intermediate\"] });\nBorder.prototype.publish(\"leftShrinkWrap\", false, \"boolean\", \"'Left' Cell shrinks to fit content\", null, { tags: [\"Intermediate\"] });\nBorder.prototype.publish(\"rightShrinkWrap\", false, \"boolean\", \"'Right' Cell shrinks to fit content\", null, { tags: [\"Intermediate\"] });\nBorder.prototype.publish(\"bottomShrinkWrap\", false, \"boolean\", \"'Bottom' Cell shrinks to fit content\", null, { tags: [\"Intermediate\"] });\nBorder.prototype.publish(\"topSize\", 0, \"number\", \"Height of the 'Top' Cell (px)\", null, { tags: [\"Private\"] });\nBorder.prototype.publish(\"leftSize\", 0, \"number\", \"Width of the 'Left' Cell (px)\", null, { tags: [\"Private\"] });\nBorder.prototype.publish(\"rightSize\", 0, \"number\", \"Width of the 'Right' Cell (px)\", null, { tags: [\"Private\"] });\nBorder.prototype.publish(\"bottomSize\", 0, \"number\", \"Height of the 'Bottom' Cell (px)\", null, { tags: [\"Private\"] });\nBorder.prototype.publish(\"topPercentage\", 20, \"number\", \"Percentage (of parent) Height of the 'Top' Cell\", null, { tags: [\"Private\"] });\nBorder.prototype.publish(\"leftPercentage\", 20, \"number\", \"Percentage (of parent) Width of the 'Left' Cell\", null, { tags: [\"Private\"] });\nBorder.prototype.publish(\"rightPercentage\", 20, \"number\", \"Percentage (of parent) Width of the 'Right' Cell\", null, { tags: [\"Private\"] });\nBorder.prototype.publish(\"bottomPercentage\", 20, \"number\", \"Percentage (of parent) Height of the 'Bottom' Cell\", null, { tags: [\"Private\"] });\nBorder.prototype.publish(\"surfacePadding\", 0, \"number\", \"Cell Padding (px)\", null, { tags: [\"Intermediate\"] });\nBorder.prototype.publish(\"sectionTypes\", [], \"array\", \"Section Types sharing an index with 'content' - Used to determine position/size.\", null, { tags: [\"Private\"] });\nconst _WidgetDiv = class _WidgetDiv {\n  _div;\n  _overlay = false;\n  _overflowX = \"visible\";\n  _overflowY = \"visible\";\n  _widget;\n  constructor(div) {\n    this._div = div;\n  }\n  overlay(_) {\n    if (!arguments.length) return this._overlay;\n    this._overlay = _;\n    return this;\n  }\n  overflowX(_) {\n    if (!arguments.length) return this._overflowX;\n    this._overflowX = _;\n    this._div.style(\"overflow-x\", _);\n    return this;\n  }\n  overflowY(_) {\n    if (!arguments.length) return this._overflowY;\n    this._overflowY = _;\n    this._div.style(\"overflow-y\", _);\n    return this;\n  }\n  element() {\n    return this._div;\n  }\n  node() {\n    return this._div.node();\n  }\n  widget(_) {\n    if (!arguments.length) return this._widget;\n    if (this._widget !== _) {\n      if (this._widget) {\n        this._widget.target(null);\n      }\n      this._widget = _;\n      if (this._widget) {\n        this._widget.target(this._div.node());\n      }\n    }\n    return this;\n  }\n  resize(size) {\n    if (this._widget) {\n      this._div.style(\"width\", `${size.width}px`).style(\"height\", `${size.height}px`);\n      this._widget.resize(size);\n    }\n    return this;\n  }\n  async render(getBBox, availableHeight, availableWidth) {\n    let overflowX = this.overflowX();\n    if (!this.overlay() && overflowX === \"visible\") {\n      overflowX = null;\n    }\n    let overflowY = this.overflowY();\n    if (!this.overlay() && overflowY === \"visible\") {\n      overflowY = null;\n    }\n    this._div.style(\"height\", this.overlay() ? \"0px\" : null).style(\"overflow-x\", overflowX).style(\"overflow-y\", overflowY);\n    if (this._widget) {\n      return this._widget.renderPromise().then((w) => {\n        if (getBBox && this._widget.visible()) {\n          const retVal = this._widget.getBBox();\n          retVal.width += 8;\n          if (availableHeight !== void 0 && retVal.height > availableHeight) {\n            retVal.width += Platform.getScrollbarWidth();\n          }\n          if (availableWidth !== void 0 && retVal.width > availableWidth) {\n            retVal.height += Platform.getScrollbarWidth();\n          }\n          if (this.overlay()) {\n            retVal.height = 0;\n          } else {\n            retVal.height += 4;\n          }\n          return retVal;\n        }\n        return getBBox ? { x: 0, y: 0, width: 0, height: 0 } : void 0;\n      });\n    } else {\n      return Promise.resolve(getBBox ? { x: 0, y: 0, width: 0, height: 0 } : void 0);\n    }\n  }\n};\n__name(_WidgetDiv, \"WidgetDiv\");\nlet WidgetDiv = _WidgetDiv;\nconst _Border2 = class _Border2 extends HTMLWidget {\n  _bodyElement;\n  _topWA;\n  _leftWA;\n  _centerWA;\n  _rightWA;\n  _bottomWA;\n  _topPrevOverflow;\n  _leftPrevOverflow;\n  _rightPrevOverflow;\n  _bottomPrevOverflow;\n  constructor() {\n    super();\n    this._tag = \"div\";\n  }\n  enter(domNode, element) {\n    super.enter(domNode, element);\n    const topElement = element.append(\"header\");\n    this._bodyElement = element.append(\"div\").attr(\"class\", \"body\");\n    const centerElement = this._bodyElement.append(\"div\").attr(\"class\", \"center\");\n    const leftElement = this._bodyElement.append(\"div\").attr(\"class\", \"lhs\");\n    const rightElement = this._bodyElement.append(\"div\").attr(\"class\", \"rhs\");\n    const bottomElement = element.append(\"div\").attr(\"class\", \"footer\");\n    this._topWA = new WidgetDiv(topElement);\n    this._centerWA = new WidgetDiv(centerElement);\n    this._leftWA = new WidgetDiv(leftElement);\n    this._rightWA = new WidgetDiv(rightElement);\n    this._bottomWA = new WidgetDiv(bottomElement);\n  }\n  update(domNode, element) {\n    super.update(domNode, element);\n    this._topWA.element().style(\"display\", this.showTop() ? null : \"none\");\n    this._rightWA.element().style(\"display\", this.showRight() ? null : \"none\");\n    this._bottomWA.element().style(\"display\", this.showBottom() ? null : \"none\");\n    this._leftWA.element().style(\"display\", this.showLeft() ? null : \"none\");\n    if (this.topOverflowX() !== this._topWA.overflowX()) {\n      this._topWA.overflowX(this.topOverflowX());\n    }\n    if (this.rightOverflowX() !== this._rightWA.overflowX()) {\n      this._rightWA.overflowX(this.rightOverflowX());\n    }\n    if (this.bottomOverflowX() !== this._bottomWA.overflowX()) {\n      this._bottomWA.overflowX(this.bottomOverflowX());\n    }\n    if (this.leftOverflowX() !== this._leftWA.overflowX()) {\n      this._leftWA.overflowX(this.leftOverflowX());\n    }\n    if (this.topOverflowY() !== this._topWA.overflowY()) {\n      this._topWA.overflowY(this.topOverflowY());\n    }\n    if (this.rightOverflowY() !== this._rightWA.overflowY()) {\n      this._rightWA.overflowY(this.rightOverflowY());\n    }\n    if (this.bottomOverflowY() !== this._bottomWA.overflowY()) {\n      this._bottomWA.overflowY(this.bottomOverflowY());\n    }\n    if (this.leftOverflowY() !== this._leftWA.overflowY()) {\n      this._leftWA.overflowY(this.leftOverflowY());\n    }\n    this.element().style(\"width\", `${this.width()}px`).style(\"height\", `${this.height()}px`);\n  }\n  targetNull(w) {\n    if (w) {\n      w.target(null);\n    }\n  }\n  exit(domNode, element) {\n    this.targetNull(this.center());\n    this.targetNull(this.bottom());\n    this.targetNull(this.right());\n    this.targetNull(this.left());\n    this.targetNull(this.top());\n    super.exit(domNode, element);\n  }\n  swap(sectionA, sectionB) {\n    const a2 = this[sectionA]();\n    const b = this[sectionB]();\n    this.targetNull(a2);\n    this.targetNull(b);\n    this[`_${sectionA}WA`].widget(null);\n    this[`_${sectionB}WA`].widget(null);\n    this[sectionA](b);\n    this[sectionB](a2);\n    return this;\n  }\n  render(callback) {\n    const retVal = super.render((w) => {\n      if (this._topWA) {\n        this._topWA.widget(this.top()).overlay(this.topOverlay()).render(true).then(async (topBBox) => {\n          const bottomBBox = await this._bottomWA.widget(this.bottom()).render(true, void 0, this.width());\n          const availableHeight = this.height() - (topBBox.height + bottomBBox.height);\n          const leftBBox = await this._leftWA.widget(this.left()).render(true, availableHeight);\n          const rightBBox = await this._rightWA.widget(this.right()).render(true, availableHeight);\n          if (this.bottomHeight_exists()) {\n            bottomBBox.height = this.bottomHeight();\n          }\n          const bodyWidth = this.width() - (leftBBox.width + rightBBox.width);\n          const bodyHeight = this.height() - (topBBox.height + bottomBBox.height);\n          const centerOverflowX = this.centerOverflowX();\n          const centerOverflowY = this.centerOverflowY();\n          const scrollCenterX = [\"auto\", \"scroll\"].indexOf(centerOverflowX) !== -1;\n          const scrollCenterY = [\"auto\", \"scroll\"].indexOf(centerOverflowY) !== -1;\n          if (scrollCenterX || scrollCenterY) {\n            this._centerWA.overflowX(this.centerOverflowX()).overflowY(this.centerOverflowY()).widget(this.center()).resize({\n              width: bodyWidth,\n              height: bodyHeight\n            }).render();\n          }\n          this._bodyElement.style(\"height\", `${bodyHeight}px`);\n          const promises = [\n            this._topWA.overflowX(this.topOverflowX()).overflowY(this.topOverflowY()).resize({\n              width: this.width(),\n              height: topBBox.height\n            }).render(),\n            this._leftWA.overflowX(this.leftOverflowX()).overflowY(this.leftOverflowY()).resize({\n              width: leftBBox.width,\n              height: bodyHeight\n            }).render(),\n            this._rightWA.overflowX(this.rightOverflowX()).overflowY(this.rightOverflowY()).resize({\n              width: rightBBox.width,\n              height: bodyHeight\n            }).render(),\n            this._centerWA.overflowX(this.centerOverflowX()).overflowY(this.centerOverflowY()).widget(this.center()).resize({\n              width: bodyWidth,\n              height: bodyHeight\n            }).render(),\n            this._bottomWA.overflowX(this.bottomOverflowX()).overflowY(this.bottomOverflowY()).resize({\n              width: this.width(),\n              height: bottomBBox.height\n            }).render()\n          ];\n          Promise.all(promises).then((promises2) => {\n            if (callback) {\n              callback(this);\n            }\n          });\n        });\n      } else {\n        if (callback) {\n          callback(this);\n        }\n      }\n    });\n    return retVal;\n  }\n};\n__name(_Border2, \"Border2\");\nlet Border2 = _Border2;\nBorder2.prototype._class += \" layout_Border2\";\nBorder2.prototype.publish(\"showTop\", true, \"boolean\", \"If true, top widget adapter will display\");\nBorder2.prototype.publish(\"showRight\", true, \"boolean\", \"If true, right widget adapter will display\");\nBorder2.prototype.publish(\"showBottom\", true, \"boolean\", \"If true, bottom widget adapter will display\");\nBorder2.prototype.publish(\"showLeft\", true, \"boolean\", \"If true, left widget adapter will display\");\nBorder2.prototype.publish(\"topOverflowX\", \"visible\", \"set\", \"Sets the overflow-x css style for the top widget adapter\", [\"hidden\", \"scroll\", \"visible\", \"auto\"]);\nBorder2.prototype.publish(\"rightOverflowX\", \"visible\", \"set\", \"Sets th