@hpcc-js/html 3.1.0 → 3.2.0

package/dist/index.js

@@ -1,93 +1,658 @@
-var B=Object.defineProperty;var s=(n,t)=>B(n,"name",{value:t,configurable:!0});var K="@hpcc-js/html",q="3.1.0",Q="3.2.0";import{HTMLWidget as D,select as I}from"@hpcc-js/common";import{scopedLogger as P}from"@hpcc-js/util";var c=class extends D{static{s(this,"HTMLTooltip")}_triggerElement;_contentNode;_prevContentNode;_tooltipElement;_arrowElement;_tooltipHTMLCallback=s(t=>"<b>_tooltipHTMLCallback is undefined</b>","_tooltipHTMLCallback");_logger=P("html/HTMLTooltip");constructor(){super(),this.visible(!1)}tooltipHTML(t){return this._tooltipHTMLCallback=t,this}tooltipContent(t){return arguments.length?(this._contentNode=t,this):this._contentNode}triggerElement(t){return this._triggerElement=t,this}enter(t,e){super.enter(t,e);let o=I("body");this._tooltipElement=o.append("div").attr("class","tooltip-div").style("z-index","2147483638").style("position","fixed"),this._arrowElement=o.append("div").attr("class","arrow-div").style("z-index","2147483638").style("position","fixed")}update(t,e){if(super.update(t,e),this._contentNode!==this._prevContentNode){let o=this._tooltipElement.node();[...o.querySelectorAll("*")].map(i=>i.__data__).filter(i=>i).forEach(i=>{typeof i.target=="function"&&i.target(null),typeof i.exit=="function"&&i.exit()}),o.innerHTML="",o.appendChild(this._contentNode),this._prevContentNode=this._contentNode}if(this._contentNode?this.onShowContent(this._contentNode):this._tooltipElement.html(()=>this._tooltipHTMLCallback(this.data())),this.fitContent()){this._tooltipElement.style("width","auto").style("height","auto").style("padding","0px").style("box-sizing","content-box");let o=this._tooltipElement.node().getBoundingClientRect();this.tooltipWidth_default(o.width),this.tooltipHeight_default(o.height)}this._closing=!1,this._tooltipElement.style("background-color",this.tooltipColor()).style("color",this.fontColor()).style("width",this.tooltipWidth()+"px").style("height",this.tooltipHeight()+"px").style("opacity",1).style("padding",this.padding()+"px").style("pointer-events",this.enablePointerEvents()?"all":"none").style("box-sizing","content-box"),this._arrowElement.style("opacity",1).style("pointer-events","none"),this.updateTooltipPosition()}onShowContent(t){}updateTooltipPosition(){let t=this.calcReferenceBBox(),e=this.calcTooltipDirection(t),o=t[e];return this._tooltipElement.style("top",o.y+"px").style("left",o.x+"px"),this.setArrowPosition(o,e),o}calcTooltipDirection(t){let e=Object.keys(t),o=this.direction();e.sort((r,l)=>r===o?-1:1);let i={top:0,left:0,width:window.innerWidth,height:window.innerHeight};for(let r=0;r<e.length;r++){let l={top:t[e[r]].y,left:t[e[r]].x,width:this.tooltipWidth(),height:this.tooltipHeight()};if(this.rectFits(l,i))return e[r]}return this._logger.warning(`Tooltip doesn't fit in the window for any of the directions. Defaulting to '${o}'`),this._logger.debug(i),this._logger.debug({top:t[o].y,left:t[o].x,width:this.tooltipWidth(),height:this.tooltipHeight()}),o}rectFits(t,e){return t.top>=e.top&&t.left>=e.left&&t.width+t.left<=e.width+e.left&&t.height+t.top<=e.height+e.top}setArrowPosition(t,e){let o,i,r="border-top-color";switch(this._arrowElement.style("border",`${this.arrowHeight()}px solid ${this.tooltipColor()}`).style("border-top-color","transparent").style("border-right-color","transparent").style("border-bottom-color","transparent").style("border-left-color","transparent"),e){case"n":o=t.y+this.tooltipHeight()+this.padding()*2,i=t.x+this.tooltipWidth()/2-this.arrowWidth()/2+this.padding(),r="border-top-color",this._arrowElement.style("border-top-width",`${this.arrowHeight()}px`).style("border-bottom-width","0px").style("border-left-width",`${this.arrowWidth()/2}px`).style("border-right-width",`${this.arrowWidth()/2}px`);break;case"s":o=t.y-this.arrowHeight(),i=t.x+this.padding()+this.tooltipWidth()/2-this.arrowWidth()/2,r="border-bottom-color",this._arrowElement.style("border-top-width","0px").style("border-bottom-width",`${this.arrowHeight()}px`).style("border-left-width",`${this.arrowWidth()/2}px`).style("border-right-width",`${this.arrowWidth()/2}px`);break;case"e":o=t.y+this.tooltipHeight()/2+this.padding()-this.arrowWidth()/2,i=t.x-this.arrowHeight(),r="border-right-color",this._arrowElement.style("border-top-width",`${this.arrowWidth()/2}px`).style("border-bottom-width",`${this.arrowWidth()/2}px`).style("border-left-width","0px").style("border-right-width",`${this.arrowHeight()}px`);break;case"w":o=t.y+this.tooltipHeight()/2-this.arrowWidth()/2+this.padding(),i=t.x+this.tooltipWidth()+this.padding()*2,r="border-left-color",this._arrowElement.style("border-top-width",`${this.arrowWidth()/2}px`).style("border-bottom-width",`${this.arrowWidth()/2}px`).style("border-left-width",`${this.arrowHeight()}px`).style("border-right-width","0px");break}return typeof o<"u"&&typeof i<"u"?this._arrowElement.style("top",o+"px").style("left",i+"px").style(r,this.tooltipColor()).style("opacity",1):this._arrowElement.style("opacity",0),t}getReferenceNode(){return this._triggerElement?this._triggerElement.node():this.element().node().parentNode.parentNode}_cursorLoc;calcReferenceBBox(){let t=this.getReferenceNode(),{top:e,left:o,width:i,height:r}=t.getBoundingClientRect(),l=this.tooltipWidth(),p=this.tooltipHeight(),h=l/2,d=p/2,f=this.arrowHeight(),b=this.padding(),u=b*2;return this.followCursor()&&this._cursorLoc&&(o=this._cursorLoc[0],e=this._cursorLoc[1],i=1,r=1),{n:{x:o+i/2-h-b,y:e-p-f-u},e:{x:o+i+f,y:e+r/2-d-b},s:{x:o+i/2-h-b,y:e+r+f},w:{x:o-l-f-u,y:e+r/2-d-b},nw:{x:o-l-u,y:e-p-u},ne:{x:o+i,y:e-p-u},se:{x:o+i,y:e+r},sw:{x:o-l-u,y:e+r}}}_closing=!1;mouseout(){this._closing=!0,this._tooltipElement.on("mouseover",()=>{this._closing=!1}),this._tooltipElement.on("mouseout",()=>{this.mouseout()}),setTimeout(()=>{this._closing&&this.visible(!1)},this.closeDelay())}visible(t){return arguments.length?(this._arrowElement&&(this._arrowElement.style("visibility",t?"visible":"hidden"),this._tooltipElement.style("visibility",t?"visible":"hidden")),super.visible(t),this):super.visible()}exit(t,e){this._arrowElement&&(this._arrowElement.remove(),this._tooltipElement.remove()),super.exit(t,e)}};c.prototype._class+=" html_HTMLTooltip";c.prototype.publish("fitContent",!1,"boolean","If true, tooltip will grow to fit its html content");c.prototype.publish("followCursor",!1,"boolean","If true, tooltip will display relative to cursor location");c.prototype.publish("closeDelay",400,"number","Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)");c.prototype.publish("direction","n","set","Direction in which to display the tooltip",["n","s","e","w","ne","nw","se","sw"]);c.prototype.publish("padding",8,"number","Padding (pixels)");c.prototype.publish("arrowWidth",16,"number","Width (or height depending on direction) of the tooltip arrow (pixels)");c.prototype.publish("arrowHeight",8,"number","Height (or width depending on direction) of the tooltip arrow (pixels)");c.prototype.publish("fontColor","#FFF","html-color","The default font color for text in the tooltip");c.prototype.publish("tooltipColor","#000000EE","html-color","Background color of the tooltip");c.prototype.publish("tooltipWidth",200,"number","Width of the tooltip (not including arrow) (pixels)");c.prototype.publish("tooltipHeight",200,"number","Height of the tooltip (not including arrow) (pixels)");c.prototype.publish("enablePointerEvents",!1,"boolean","If true, the 'pointer-events: all' style will be used");import{HTMLWidget as N,select as M}from"@hpcc-js/common";var w=class extends N{static{s(this,"SimpleTable")}_table;_tbody;_thead;_theadRow;constructor(){super()}transformData(){return this.data()}enter(t,e){super.enter(t,e),this._table=e.append("table"),this._thead=this._table.append("thead"),this._theadRow=this._thead.append("tr"),this._tbody=this._table.append("tbody")}update(t,e){super.update(t,e),this._table.style("width",this.autoWidth()?"auto":"100%");let o=this._theadRow.selectAll("th").data(this.columns());o.enter().append("th").attr("class",(r,l)=>`th-${l}`).merge(o).text(r=>r.toString()),o.exit().remove();let i=this._tbody.selectAll("tr").data(this.transformData());i.enter().append("tr").merge(i).each(function(r){let p=M(this).selectAll("td").data(r);p.enter().append("td").attr("class",(h,d)=>`col-${d}`).merge(p).text(h=>h.toString()),p.exit().remove()}),i.exit().remove()}};w.prototype._class+=" html_SimpleTable";w.prototype.publish("autoWidth",!1,"boolean","If true, table width will be set to 'auto'. If false, the width is set to '100%'");var g=class extends w{static{s(this,"StyledTable")}constructor(){super()}applyStyleObject(t,e){Object.keys(e).forEach(o=>{t.style(o,e[o])})}update(t,e){super.update(t,e),e.selectAll("tr,th,td").attr("style","").style("font-family",this.fontFamily()).style("color",this.fontColor()),this.theadColumnStyles().forEach((l,p)=>{this.applyStyleObject(e.select(`.th-${p}`),l)}),this.tbodyColumnStyles().forEach((l,p)=>{this.applyStyleObject(e.selectAll(`.col-${p}`),l)});let o=Object.keys(this.evenRowStyles()).length>0,i=Object.keys(this.lastRowStyles()).length>0,r=e.selectAll("tbody > tr");if(o){let l=r.select(function(p,h){return h%2?this:null});this.applyStyleObject(l,this.evenRowStyles())}if(i){let l=r.select(function(p,h,d){return h===d.length-1?this:null});this.applyStyleObject(l,this.lastRowStyles())}}};g.prototype._class+=" html_StyledTable";g.prototype.publish("fontFamily","Verdana","string","Base font-family used within the table");g.prototype.publish("fontColor","#333","string","Base font color used within the table");g.prototype.publish("theadColumnStyles",[],"array",'Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])');g.prototype.publish("tbodyColumnStyles",[],"array",'Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])');g.prototype.publish("lastRowStyles",{},"object",'Object containing styles for the last row (ex: {"color":"red"})');g.prototype.publish("evenRowStyles",{},"object",'Object containing styles for even rows (ex: {"background-color":"#AAA"})');var a=class extends g{static{s(this,"BreakdownTable")}_tooltip;constructor(){super()}transformData(){let t=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount();return this.breakdownData(t)}breakdownData(t){let e=this.data().length,o=this.data().reduce((h,d)=>h+d[1],0),i=[],r=0;this.data().sort((h,d)=>h[1]>d[1]?-1:1);let p=e-t>0;if(this.data().filter((h,d)=>p?d<t-1:!0).forEach(h=>{let d=Math.round(h[1]/o*100);r+=d,i.push([h[0],d+"%"])}),p){let h=`${this.otherLabel()} (${e-t+1})`,d="~"+(100-r)+"%";i.push([h,d])}return i}calculateRowCount(){let t=this.columns().length>0?this.thFontSize()+5:0,e=this.fontSize()+5,o=this.height()-t;return Math.floor(o/e)}enter(t,e){super.enter(t,e),this._tooltip=new c().target(t),this._tooltip.tooltipHTML(o=>{let i=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount(),r=Math.max(...o.map(u=>this.textSize(u[0],this.fontFamily(),this.fontSize()).height))??this.fontSize(),l=Math.max(...o.map(u=>this.textSize(u[0],this.fontFamily(),this.fontSize()).width)),p=30,h=2,d=h*(l+p)+this._tooltip.padding()*2,f=r*Math.ceil((o.length-i)/h)+this._tooltip.padding()*2;this._tooltip.tooltipWidth(d),this._tooltip.tooltipHeight(f);let b=this.breakdownData(this.data().length).slice(i-1);return`<div style="
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode("#wrap{width:100%}#left,#right{padding:5px}#left{background-color:red;text-align:left;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#right{background-color:orange;float:right;text-align:right;white-space:nowrap}.html_TitleBar>.main{width:100%;display:block}.html_TitleBar .title{padding:4px;text-align:left;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:20px;font-weight:700}.html_TitleBar .icon-bar{padding:4px;float:right;text-align:right;white-space:nowrap;line-height:28px}.html_TitleBar .icon-bar-item{display:inline}.html_TitleBar .icon-bar-item>div{display:inline}.html_TitleBar .icon-bar a{text-align:center;padding-top:4px;padding-bottom:4px;transition:all .3s ease;color:#a9a9a9}.html_TitleBar .icon-bar a:hover{background-color:#f5f5f5}.html_TitleBar .icon-bar a.selected{background-color:#efe5e5}.html_TitleBar .icon-bar a.spacer{text-align:center;padding-top:2px;padding-left:8px;padding-bottom:0;color:none}.html_TitleBar .icon-bar a.spacer:hover{background-color:transparent}.html_TitleBar .icon-bar .active{background-color:#4caf50}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
+import { HTMLWidget, select, format } from "@hpcc-js/common";
+import { scopedLogger } from "@hpcc-js/util";
+import { React } from "@hpcc-js/react";
+const PKG_NAME = "@hpcc-js/html", PKG_VERSION = "3.1.1", BUILD_VERSION = "3.2.1";
+class HTMLTooltip extends HTMLWidget {
+  constructor() {
+    super();
+    __publicField(this, "_triggerElement");
+    __publicField(this, "_contentNode");
+    __publicField(this, "_prevContentNode");
+    __publicField(this, "_tooltipElement");
+    __publicField(this, "_arrowElement");
+    __publicField(this, "_tooltipHTMLCallback", (data) => "<b>_tooltipHTMLCallback is undefined</b>");
+    __publicField(this, "_logger", scopedLogger("html/HTMLTooltip"));
+    __publicField(this, "_cursorLoc");
+    __publicField(this, "_closing", !1);
+    this.visible(!1);
+  }
+  tooltipHTML(_) {
+    return this._tooltipHTMLCallback = _, this;
+  }
+  tooltipContent(_) {
+    return arguments.length ? (this._contentNode = _, this) : this._contentNode;
+  }
+  triggerElement(_) {
+    return this._triggerElement = _, this;
+  }
+  enter(domNode, element) {
+    super.enter(domNode, element);
+    const body = select("body");
+    this._tooltipElement = body.append("div").attr("class", "tooltip-div").style("z-index", "2147483638").style("position", "fixed"), this._arrowElement = body.append("div").attr("class", "arrow-div").style("z-index", "2147483638").style("position", "fixed");
+  }
+  update(domNode, element) {
+    if (super.update(domNode, element), this._contentNode !== this._prevContentNode) {
+      const node = this._tooltipElement.node();
+      [...node.querySelectorAll("*")].map((n) => n.__data__).filter((n) => n).forEach((w) => {
+        typeof w.target == "function" && w.target(null), typeof w.exit == "function" && w.exit();
+      }), node.innerHTML = "", node.appendChild(this._contentNode), this._prevContentNode = this._contentNode;
+    }
+    if (this._contentNode ? this.onShowContent(this._contentNode) : this._tooltipElement.html(() => this._tooltipHTMLCallback(this.data())), this.fitContent()) {
+      this._tooltipElement.style("width", "auto").style("height", "auto").style("padding", "0px").style("box-sizing", "content-box");
+      const rect = this._tooltipElement.node().getBoundingClientRect();
+      this.tooltipWidth_default(rect.width), this.tooltipHeight_default(rect.height);
+    }
+    this._closing = !1, this._tooltipElement.style("background-color", this.tooltipColor()).style("color", this.fontColor()).style("width", this.tooltipWidth() + "px").style("height", this.tooltipHeight() + "px").style("opacity", 1).style("padding", this.padding() + "px").style("pointer-events", this.enablePointerEvents() ? "all" : "none").style("box-sizing", "content-box"), this._arrowElement.style("opacity", 1).style("pointer-events", "none"), this.updateTooltipPosition();
+  }
+  onShowContent(node) {
+  }
+  updateTooltipPosition() {
+    const bbox = this.calcReferenceBBox(), direction = this.calcTooltipDirection(bbox), box = bbox[direction];
+    return this._tooltipElement.style("top", box.y + "px").style("left", box.x + "px"), this.setArrowPosition(box, direction), box;
+  }
+  calcTooltipDirection(bbox) {
+    const directions = Object.keys(bbox), defaultDirection = this.direction();
+    directions.sort((a, b) => a === defaultDirection ? -1 : 1);
+    const windowRect = {
+      top: 0,
+      left: 0,
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+    for (let i = 0; i < directions.length; i++) {
+      const tooltipRect = {
+        top: bbox[directions[i]].y,
+        left: bbox[directions[i]].x,
+        width: this.tooltipWidth(),
+        height: this.tooltipHeight()
+      };
+      if (this.rectFits(tooltipRect, windowRect))
+        return directions[i];
+    }
+    return this._logger.warning(`Tooltip doesn't fit in the window for any of the directions. Defaulting to '${defaultDirection}'`), this._logger.debug(windowRect), this._logger.debug({
+      top: bbox[defaultDirection].y,
+      left: bbox[defaultDirection].x,
+      width: this.tooltipWidth(),
+      height: this.tooltipHeight()
+    }), defaultDirection;
+  }
+  rectFits(innerRect, outerRect) {
+    return innerRect.top >= outerRect.top && innerRect.left >= outerRect.left && innerRect.width + innerRect.left <= outerRect.width + outerRect.left && innerRect.height + innerRect.top <= outerRect.height + outerRect.top;
+  }
+  setArrowPosition(point, direction) {
+    let top, left, visibleBorderStyle = "border-top-color";
+    switch (this._arrowElement.style("border", `${this.arrowHeight()}px solid ${this.tooltipColor()}`).style("border-top-color", "transparent").style("border-right-color", "transparent").style("border-bottom-color", "transparent").style("border-left-color", "transparent"), direction) {
+      case "n":
+        top = point.y + this.tooltipHeight() + this.padding() * 2, left = point.x + this.tooltipWidth() / 2 - this.arrowWidth() / 2 + this.padding(), visibleBorderStyle = "border-top-color", this._arrowElement.style("border-top-width", `${this.arrowHeight()}px`).style("border-bottom-width", "0px").style("border-left-width", `${this.arrowWidth() / 2}px`).style("border-right-width", `${this.arrowWidth() / 2}px`);
+        break;
+      case "s":
+        top = point.y - this.arrowHeight(), left = point.x + this.padding() + this.tooltipWidth() / 2 - this.arrowWidth() / 2, visibleBorderStyle = "border-bottom-color", this._arrowElement.style("border-top-width", "0px").style("border-bottom-width", `${this.arrowHeight()}px`).style("border-left-width", `${this.arrowWidth() / 2}px`).style("border-right-width", `${this.arrowWidth() / 2}px`);
+        break;
+      case "e":
+        top = point.y + this.tooltipHeight() / 2 + this.padding() - this.arrowWidth() / 2, left = point.x - this.arrowHeight(), visibleBorderStyle = "border-right-color", this._arrowElement.style("border-top-width", `${this.arrowWidth() / 2}px`).style("border-bottom-width", `${this.arrowWidth() / 2}px`).style("border-left-width", "0px").style("border-right-width", `${this.arrowHeight()}px`);
+        break;
+      case "w":
+        top = point.y + this.tooltipHeight() / 2 - this.arrowWidth() / 2 + this.padding(), left = point.x + this.tooltipWidth() + this.padding() * 2, visibleBorderStyle = "border-left-color", this._arrowElement.style("border-top-width", `${this.arrowWidth() / 2}px`).style("border-bottom-width", `${this.arrowWidth() / 2}px`).style("border-left-width", `${this.arrowHeight()}px`).style("border-right-width", "0px");
+        break;
+    }
+    return typeof top < "u" && typeof left < "u" ? this._arrowElement.style("top", top + "px").style("left", left + "px").style(visibleBorderStyle, this.tooltipColor()).style("opacity", 1) : this._arrowElement.style("opacity", 0), point;
+  }
+  getReferenceNode() {
+    return this._triggerElement ? this._triggerElement.node() : this.element().node().parentNode.parentNode;
+  }
+  calcReferenceBBox() {
+    const node = this.getReferenceNode();
+    let { top, left, width, height } = node.getBoundingClientRect();
+    const wholeW = this.tooltipWidth(), wholeH = this.tooltipHeight(), halfW = wholeW / 2, halfH = wholeH / 2, arrowH = this.arrowHeight(), p = this.padding(), p2 = p * 2;
+    return this.followCursor() && this._cursorLoc && (left = this._cursorLoc[0], top = this._cursorLoc[1], width = 1, height = 1), {
+      n: {
+        x: left + width / 2 - halfW - p,
+        y: top - wholeH - arrowH - p2
+      },
+      e: {
+        x: left + width + arrowH,
+        y: top + height / 2 - halfH - p
+      },
+      s: {
+        x: left + width / 2 - halfW - p,
+        y: top + height + arrowH
+      },
+      w: {
+        x: left - wholeW - arrowH - p2,
+        y: top + height / 2 - halfH - p
+      },
+      nw: {
+        x: left - wholeW - p2,
+        y: top - wholeH - p2
+      },
+      ne: {
+        x: left + width,
+        y: top - wholeH - p2
+      },
+      se: {
+        x: left + width,
+        y: top + height
+      },
+      sw: {
+        x: left - wholeW - p2,
+        y: top + height
+      }
+    };
+  }
+  mouseout() {
+    this._closing = !0, this._tooltipElement.on("mouseover", () => {
+      this._closing = !1;
+    }), this._tooltipElement.on("mouseout", () => {
+      this.mouseout();
+    }), setTimeout(() => {
+      this._closing && this.visible(!1);
+    }, this.closeDelay());
+  }
+  visible(_) {
+    return arguments.length ? (this._arrowElement && (this._arrowElement.style("visibility", _ ? "visible" : "hidden"), this._tooltipElement.style("visibility", _ ? "visible" : "hidden")), super.visible(_), this) : super.visible();
+  }
+  exit(domNode, element) {
+    this._arrowElement && (this._arrowElement.remove(), this._tooltipElement.remove()), super.exit(domNode, element);
+  }
+}
+HTMLTooltip.prototype._class += " html_HTMLTooltip";
+HTMLTooltip.prototype.publish("fitContent", !1, "boolean", "If true, tooltip will grow to fit its html content");
+HTMLTooltip.prototype.publish("followCursor", !1, "boolean", "If true, tooltip will display relative to cursor location");
+HTMLTooltip.prototype.publish("closeDelay", 400, "number", "Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)");
+HTMLTooltip.prototype.publish("direction", "n", "set", "Direction in which to display the tooltip", ["n", "s", "e", "w", "ne", "nw", "se", "sw"]);
+HTMLTooltip.prototype.publish("padding", 8, "number", "Padding (pixels)");
+HTMLTooltip.prototype.publish("arrowWidth", 16, "number", "Width (or height depending on direction) of the tooltip arrow (pixels)");
+HTMLTooltip.prototype.publish("arrowHeight", 8, "number", "Height (or width depending on direction) of the tooltip arrow (pixels)");
+HTMLTooltip.prototype.publish("fontColor", "#FFF", "html-color", "The default font color for text in the tooltip");
+HTMLTooltip.prototype.publish("tooltipColor", "#000000EE", "html-color", "Background color of the tooltip");
+HTMLTooltip.prototype.publish("tooltipWidth", 200, "number", "Width of the tooltip (not including arrow) (pixels)");
+HTMLTooltip.prototype.publish("tooltipHeight", 200, "number", "Height of the tooltip (not including arrow) (pixels)");
+HTMLTooltip.prototype.publish("enablePointerEvents", !1, "boolean", "If true, the 'pointer-events: all' style will be used");
+class SimpleTable extends HTMLWidget {
+  constructor() {
+    super();
+    __publicField(this, "_table");
+    __publicField(this, "_tbody");
+    __publicField(this, "_thead");
+    __publicField(this, "_theadRow");
+  }
+  transformData() {
+    return this.data();
+  }
+  enter(domNode, element) {
+    super.enter(domNode, element), this._table = element.append("table"), this._thead = this._table.append("thead"), this._theadRow = this._thead.append("tr"), this._tbody = this._table.append("tbody");
+  }
+  update(domNode, element) {
+    super.update(domNode, element), this._table.style("width", this.autoWidth() ? "auto" : "100%");
+    const theadTrSelection = this._theadRow.selectAll("th").data(this.columns());
+    theadTrSelection.enter().append("th").attr("class", (n, i) => `th-${i}`).merge(theadTrSelection).text((_d) => _d.toString()), theadTrSelection.exit().remove();
+    const trSelection = this._tbody.selectAll("tr").data(this.transformData());
+    trSelection.enter().append("tr").merge(trSelection).each(function(d) {
+      const tdSelection = select(this).selectAll("td").data(d);
+      tdSelection.enter().append("td").attr("class", (n, i) => `col-${i}`).merge(tdSelection).text((_d) => _d.toString()), tdSelection.exit().remove();
+    }), trSelection.exit().remove();
+  }
+}
+SimpleTable.prototype._class += " html_SimpleTable";
+SimpleTable.prototype.publish("autoWidth", !1, "boolean", "If true, table width will be set to 'auto'. If false, the width is set to '100%'");
+class StyledTable extends SimpleTable {
+  constructor() {
+    super();
+  }
+  applyStyleObject(selection, styleObject) {
+    Object.keys(styleObject).forEach((styleName) => {
+      selection.style(styleName, styleObject[styleName]);
+    });
+  }
+  update(domNode, element) {
+    super.update(domNode, element), element.selectAll("tr,th,td").attr("style", "").style("font-family", this.fontFamily()).style("color", this.fontColor()), this.theadColumnStyles().forEach((styleObj, i) => {
+      this.applyStyleObject(element.select(`.th-${i}`), styleObj);
+    }), this.tbodyColumnStyles().forEach((styleObj, i) => {
+      this.applyStyleObject(element.selectAll(`.col-${i}`), styleObj);
+    });
+    const evenRowStylesExist = Object.keys(this.evenRowStyles()).length > 0, lastRowStylesExist = Object.keys(this.lastRowStyles()).length > 0, tbodyRows = element.selectAll("tbody > tr");
+    if (evenRowStylesExist) {
+      const tbodyEvenRows = tbodyRows.select(function(d, i) {
+        return i % 2 ? this : null;
+      });
+      this.applyStyleObject(tbodyEvenRows, this.evenRowStyles());
+    }
+    if (lastRowStylesExist) {
+      const tbodyLastRow = tbodyRows.select(function(d, i, arr) {
+        return i === arr.length - 1 ? this : null;
+      });
+      this.applyStyleObject(tbodyLastRow, this.lastRowStyles());
+    }
+  }
+}
+StyledTable.prototype._class += " html_StyledTable";
+StyledTable.prototype.publish("fontFamily", "Verdana", "string", "Base font-family used within the table");
+StyledTable.prototype.publish("fontColor", "#333", "string", "Base font color used within the table");
+StyledTable.prototype.publish("theadColumnStyles", [], "array", 'Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])');
+StyledTable.prototype.publish("tbodyColumnStyles", [], "array", 'Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])');
+StyledTable.prototype.publish("lastRowStyles", {}, "object", 'Object containing styles for the last row (ex: {"color":"red"})');
+StyledTable.prototype.publish("evenRowStyles", {}, "object", 'Object containing styles for even rows (ex: {"background-color":"#AAA"})');
+class BreakdownTable extends StyledTable {
+  constructor() {
+    super();
+    // protected _table;
+    // protected _tbody;
+    __publicField(this, "_tooltip");
+  }
+  transformData() {
+    const rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
+    return this.breakdownData(rowCount);
+  }
+  breakdownData(limit) {
+    const len = this.data().length, sum = this.data().reduce((acc, row) => acc + row[1], 0), data = [];
+    let percSum = 0;
+    this.data().sort((a, b) => a[1] > b[1] ? -1 : 1);
+    const showOther = len - limit > 0;
+    if (this.data().filter((_, i) => showOther ? i < limit - 1 : !0).forEach((row) => {
+      const perc = Math.round(row[1] / sum * 100);
+      percSum += perc, data.push([row[0], perc + "%"]);
+    }), showOther) {
+      const otherLabel = `${this.otherLabel()} (${len - limit + 1})`, otherPercentage = "~" + (100 - percSum) + "%";
+      data.push([otherLabel, otherPercentage]);
+    }
+    return data;
+  }
+  calculateRowCount() {
+    const theadRowHeight = this.columns().length > 0 ? this.thFontSize() + 5 : 0, tbodyRowHeight = this.fontSize() + 5, tbodyAvailableHeight = this.height() - theadRowHeight;
+    return Math.floor(tbodyAvailableHeight / tbodyRowHeight);
+  }
+  enter(domNode, element) {
+    super.enter(domNode, element), this._tooltip = new HTMLTooltip().target(domNode), this._tooltip.tooltipHTML((data) => {
+      const rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount(), rowHeight = Math.max(...data.map((row) => this.textSize(row[0], this.fontFamily(), this.fontSize()).height)) ?? this.fontSize(), widestLabel = Math.max(...data.map((row) => this.textSize(row[0], this.fontFamily(), this.fontSize()).width)), widestPerc = 30, colCount = 2, w = colCount * (widestLabel + widestPerc) + this._tooltip.padding() * 2, h = rowHeight * Math.ceil((data.length - rowCount) / colCount) + this._tooltip.padding() * 2;
+      this._tooltip.tooltipWidth(w), this._tooltip.tooltipHeight(h);
+      const otherData = this.breakdownData(this.data().length).slice(rowCount - 1);
+      return `<div style="
                     width: 100%;
                     height: 100%;
                     font-size: ${this.fontSize()}px;
-                ">${b.map(u=>`<div style="
+                ">${otherData.map(
+        (row) => `<div style="
                         float:left;
-                        width:${Math.floor(99/h)}%;
-                    ">${u[0]}: ${u[1]}</div>`).join("")}</div>`})}update(t,e){if(this.theadColumnStyles_default([{color:this.thFirstColor(),"font-size":this.thFontSize()+"px","font-weight":this.thFontWeight(),"text-align":this.labelAlignment(),width:"auto",padding:"0px"},{width:"1%","font-size":this.thFontSize()+"px","font-weight":this.thFontWeight(),"text-align":this.percentageAlignment(),padding:"0px"}]),this.tbodyColumnStyles_default([{color:this.topLabelColor(),"font-size":this.fontSize()+"px","font-weight":"normal","text-align":this.labelAlignment(),width:"auto",padding:"0px"},{color:this.topPercentageColor(),"font-size":this.fontSize()+"px","font-weight":"normal","text-align":this.percentageAlignment(),width:"1%",padding:"0px"}]),this.lastRowStyles_default([{color:this.otherLabelColor(),"font-size":this.fontSize()+"px","font-weight":this.otherLabelBold()?"bold":"normal","text-align":this.labelAlignment(),width:"auto",padding:"0px"},{color:this.otherLabelColor(),"font-size":this.fontSize()+"px","font-weight":this.otherPercentageBold()?"bold":"normal","text-align":this.percentageAlignment(),width:"1%",padding:"0px"}]),super.update(t,e),(this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount())<this.data().length){let i=e.select("tbody > tr:last-child"),r=this;i.on("mouseout.tooltip",l=>{r._tooltip._triggerElement=i,r._tooltip.visible(!1).render()}).on("mouseenter.tooltip",l=>{r._tooltip._triggerElement=i,r._tooltip.direction("n").data(r.data()).visible(!0).render()})}}};a.prototype._class+=" html_BreakdownTable";a.prototype.publish("useCalculatedRowCount",!0,"boolean","If true, rowCount will be calculated and its default will be overwritten");a.prototype.publish("rowCount",5,"number","Number of total rows to display (including the 'other' row)",void 0,{disable:s(n=>n.useCalculatedRowCount(),"disable")});a.prototype.publish("fontSize",14,"number","Font size (pixels)");a.prototype.publish("labelAlignment","left","set","Alignment of the label column text",["left","center","right"]);a.prototype.publish("percentageAlignment","center","set","Alignment of the percentage column text",["left","center","right"]);a.prototype.publish("topLabelColor","#333","html-color","Color of displayed 'top' labels");a.prototype.publish("topPercentageColor","#1A99D5","html-color","Color of displayed 'top' percentages");a.prototype.publish("topPercentageBold",!0,"html-color","If true, the 'top' percentages will be bold");a.prototype.publish("otherLabel","Other","string","Label text for the 'other' row");a.prototype.publish("otherLabelColor","#AAA","html-color","Color of the 'other' label");a.prototype.publish("otherLabelBold",!1,"html-color","If true, the 'other' label will be bold");a.prototype.publish("otherPercentageColor","#AAA","html-color","Color of the 'other' percentage");a.prototype.publish("otherPercentageBold",!1,"html-color","If true, the 'other' percentage will be bold");a.prototype.publish("thFontWeight","bold","string","Font weight for th elements");a.prototype.publish("thFontSize",26,"number","Font size for th elements");a.prototype.publish("thFirstColor","#333","html-color","Text color of the first th element");a.prototype.publish("thLastColor","#333","html-color","Text color of the last th element");import R from"react";import{render as z}from"react-dom";import{HTMLWidget as $}from"@hpcc-js/common";var y=class extends ${static{s(this,"JSXWidget")}static Component=R.Component;static createElement=R.createElement;rootNode;jsxRender(t,e){this.rootNode=z(t,e,this.rootNode)}};y.prototype._class+=" html_JSXWidget";import{select as k}from"@hpcc-js/common";var _=class{static{s(this,"VNode")}_attrs;_children;constructor(t,e){this._attrs=t,this._children=e}type(){return"div"}attrs(){return this._attrs}attr(t){return this._attrs[t]}children(){return this._children}update(t){for(let e in this._attrs)t.attr(e,this._attrs[e])}render(t){let e=t.selectAll(`${t.node().tagName} > *`).data([this]);return e.exit().remove(),e.enter().append(this.type()).attr("reactd3",0).merge(e).each(function(o){let i=k(this);o.update(i),o.renderChildren(i)})}renderChildren(t){let e=t.selectAll(`${t.node().tagName} > *`).data(this._children);return e.exit().remove(),e.enter().append(o=>document.createElement(o.type())).attr("reactd3",(o,i)=>i).merge(e).each(function(o){let i=k(this);o.update(i),o.renderChildren(i)})}},W=class extends _{static{s(this,"ConstVNode")}_type;constructor(t,e,o){super(e,o),this._type=t}type(){return this._type}},E=class extends _{static{s(this,"TextVNode")}_text;constructor(t){super({},[]),this._text=t}type(){return"span"}update(t){super.update(t),t.text(this._text)}};function V(n){return typeof n=="function"}s(V,"isReactFn");function j(n){return n.prototype&&n.prototype instanceof _}s(j,"isIVNode");var T=class{static{s(this,"ReactD3")}static createElement(t,e,...o){return j(t)?new t(e):V(t)?t(e):new W(t,e,o.map(i=>typeof i=="string"?new E(i):i))}static render(t,e){t.render(e)}};import O from"react";var F=class extends y.Component{static{s(this,"VizComponent")}widget;refreshProps(){for(let t in this.props)this.widget[t]&&typeof this.widget[t]=="function"&&this.widget[t](this.props[t])}componentDidMount(){this.widget=new this.props.type().target(this.base),this.refreshProps(),this.widget.render()}componentWillUnmount(){this.widget.target(null).render()}render(){return O.createElement("div",{style:this.props.style})}componentDidUpdate(){this.refreshProps(),this.widget.render()}};import U from"react";var L=class extends y.Component{static{s(this,"VizInstance")}widget;refreshProps(){for(let t in this.props)this.widget[t]&&typeof this.widget[t]=="function"&&this.widget[t](this.props[t])}componentDidMount(){this.widget=this.props.instance.target(this.base),this.refreshProps(),this.widget.render()}componentWillUnmount(){this.widget.target(null).render()}render(){return U.createElement("div",{style:this.props.style})}componentDidUpdate(){this.refreshProps(),this.widget.render()}};import{format as A}from"@hpcc-js/common";var m=class extends g{static{s(this,"StatsTable")}transformData(){let t=[["Total",0,0]],e=this.data();return e.forEach(o=>{t[0][1]+=o[1],t[0][2]+=o[2]}),e.concat(t).map(o=>[o[0],this.secondColumnFormat_exists()?A(this.secondColumnFormat())(o[1]):o[1],this.thirdColumnFormat_exists()?A(this.thirdColumnFormat())(o[2]):o[2]])}update(t,e){this.tbodyColumnStyles_default([{"font-weight":"bold",width:this.firstColumnWidth(),"text-align":"left"},{width:this.secondColumnWidth(),"text-align":"right"},{width:this.thirdColumnWidth(),"text-align":"right"}]),this.evenRowStyles_default([{"font-weight":"bold",width:this.firstColumnWidth(),"text-align":"left","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()},{width:this.secondColumnWidth(),"text-align":"right","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()},{width:this.thirdColumnWidth(),"text-align":"right","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()}]),this.lastRowStyles_default({"font-weight":"bold"}),super.update(t,e)}};m.prototype._class+=" html_StatsTable";m.prototype.publish("labelColor","#333","html-color","Color of the text in the first column");m.prototype.publish("primaryValueColor","#333","html-color","Color of the text in the second column");m.prototype.publish("secondaryValueColor","#333","html-color","Color of the text in the third column");m.prototype.publish("evenRowBackgroundColor","#333","html-color","Background color of the even rows");m.prototype.publish("evenRowFontColor","#333","html-color","Font color of the even rows");m.prototype.publish("firstColumnWidth","auto","string","CSS style applied as the 'width' for the first column (ex: 40px)");m.prototype.publish("secondColumnWidth","1%","string","CSS style applied as the 'width' for the second column (ex: 40px)");m.prototype.publish("thirdColumnWidth","1%","string","CSS style applied as the 'width' for the third column (ex: 40px)");m.prototype.publish("secondColumnFormat","$,.0f","string","d3-format specifier applied to the second column's values",void 0,{optional:!0});m.prototype.publish("thirdColumnFormat",null,"string","d3-format specifier applied to the third column's values",void 0,{optional:!0});import{HTMLWidget as J}from"@hpcc-js/common";(function(){if(!document.getElementById("f5fc3b48")){var n=document.createElement("style");n.id="f5fc3b48",n.textContent=`#wrap
-{
-    width: 100%;
-}
-#left, #right {padding:5px;}
-
-#left {
-    background-color:red;
-    text-align:left;
-    display: block;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-#right {
-    background-color:orange;
-    float:right;
-    text-align:right;
-    white-space: nowrap;
-}
-
-.html_TitleBar > .main {
-    width: 100%;
-    display: block;
-}
-
-.html_TitleBar .title {
-    padding:4px;
-    text-align:left;
-    display: block;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    font-size:20px;
-    font-weight: bold;
-}
-
-.html_TitleBar .icon-bar {
-    padding:4px;
-    float: right;
-    text-align:right;
-    white-space: nowrap;
-    line-height: 28px;
-}
-
-.html_TitleBar .icon-bar-item {
-    display: inline;    
-}
-
-.html_TitleBar .icon-bar-item > div {
-    display: inline;    
-}
-
-.html_TitleBar .icon-bar a {
-    text-align: center; /* Center-align text */
-    padding-top: 4px;
-    padding-bottom: 4px;
-    transition: all 0.3s ease; /* Add transition for hover effects */
-    color: darkgray; /* White text color */
-}
-
-.html_TitleBar .icon-bar a:hover {
-    background-color: whitesmoke; /* Add a hover color */
-}
-
-.html_TitleBar .icon-bar a.selected {
-    background-color: #efe5e5; /* Add a hover color */
-}
-
-.html_TitleBar .icon-bar a.spacer {
-    text-align: center; /* Center-align text */
-    padding-top: 2px;
-    padding-left: 8px;
-    padding-bottom: 0px;
-    color: none;
-}
-
-.html_TitleBar .icon-bar a.spacer:hover {
-    background-color: transparent;
-}
-
-.html_TitleBar .icon-bar .active {
-    background-color: #4CAF50; /* Add an active/current color */
-}`,document.head.appendChild(n)}})();var x=class extends J{static{s(this,"Item")}_owner;constructor(t){super(),this._owner=t,this._tag="a"}};x.prototype._class+=" html_Item";var v=class extends x{static{s(this,"Button")}_icon;constructor(t,e){super(t),this._icon=e}icon(){return this._icon}enter(t,e){super.enter(t,e),e.attr("href","#").on("click",(o,i,r)=>this._owner.titleBarClick(this,o,i,r)).append("i").attr("class",`fa ${this._icon} fa-lg fa-fw`)}};v.prototype._class+=" html_Button";var S=class extends v{static{s(this,"ToggleButton")}enter(t,e){e.on("click.sel",(o,i,r)=>{this.selected(!this.selected()),this.render()}),super.enter(t,e)}update(t,e){super.update(t,e),this._element.classed("selected",this.selected())}};S.prototype._class+=" html_ToggleButton";S.prototype.publish("selected",!1,"boolean");var H=class extends x{static{s(this,"Spacer")}enter(t,e){super.enter(t,e),e.attr("class","spacer").attr("href","#").append("i")}};H.prototype._class+=" html_Spacer";var C=class extends y{static{s(this,"TitleBar")}_divMain;_divIconBar;_divTitle;constructor(){super()}enter(t,e){super.enter(t,e),this._divMain=e.append("div").attr("class","main"),this._divIconBar=this._divMain.append("div").attr("class","icon-bar"),this._divTitle=this._divMain.append("div").attr("class","title")}update(t,e){super.update(t,e),this._divTitle.text(this.title());let o=this._divIconBar.selectAll(".icon-bar-item").data(this.buttons());o.enter().append("div").attr("class","icon-bar-item").each(function(i){i.target(this)}).merge(o).each(function(i){i.render()}),o.exit().each(function(i){i.target(null)}).remove(),o.order()}};C.prototype._class+=" html_TitleBar";C.prototype.publish("title","","string");C.prototype.publish("buttons",[],"widgetArray");export{Q as BUILD_VERSION,a as BreakdownTable,v as Button,c as HTMLTooltip,x as Item,y as JSXWidget,K as PKG_NAME,q as PKG_VERSION,T as ReactD3,w as SimpleTable,H as Spacer,m as StatsTable,g as StyledTable,C as TitleBar,S as ToggleButton,_ as VNode,F as VizComponent,L as VizInstance};
+                        width:${Math.floor(99 / colCount)}%;
+                    ">${row[0]}: ${row[1]}</div>`
+      ).join("")}</div>`;
+    });
+  }
+  update(domNode, element) {
+    if (this.theadColumnStyles_default([
+      {
+        color: this.thFirstColor(),
+        "font-size": this.thFontSize() + "px",
+        "font-weight": this.thFontWeight(),
+        "text-align": this.labelAlignment(),
+        width: "auto",
+        padding: "0px"
+      },
+      {
+        width: "1%",
+        "font-size": this.thFontSize() + "px",
+        "font-weight": this.thFontWeight(),
+        "text-align": this.percentageAlignment(),
+        padding: "0px"
+      }
+    ]), this.tbodyColumnStyles_default([
+      {
+        color: this.topLabelColor(),
+        "font-size": this.fontSize() + "px",
+        "font-weight": "normal",
+        "text-align": this.labelAlignment(),
+        width: "auto",
+        padding: "0px"
+      },
+      {
+        color: this.topPercentageColor(),
+        "font-size": this.fontSize() + "px",
+        "font-weight": "normal",
+        "text-align": this.percentageAlignment(),
+        width: "1%",
+        padding: "0px"
+      }
+    ]), this.lastRowStyles_default([
+      {
+        color: this.otherLabelColor(),
+        "font-size": this.fontSize() + "px",
+        "font-weight": this.otherLabelBold() ? "bold" : "normal",
+        "text-align": this.labelAlignment(),
+        width: "auto",
+        padding: "0px"
+      },
+      {
+        color: this.otherLabelColor(),
+        "font-size": this.fontSize() + "px",
+        "font-weight": this.otherPercentageBold() ? "bold" : "normal",
+        "text-align": this.percentageAlignment(),
+        width: "1%",
+        padding: "0px"
+      }
+    ]), super.update(domNode, element), (this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount()) < this.data().length) {
+      const lastRow = element.select("tbody > tr:last-child"), context = this;
+      lastRow.on("mouseout.tooltip", (d) => {
+        context._tooltip._triggerElement = lastRow, context._tooltip.visible(!1).render();
+      }).on("mouseenter.tooltip", (d) => {
+        context._tooltip._triggerElement = lastRow, context._tooltip.direction("n").data(context.data()).visible(!0).render();
+      });
+    }
+  }
+}
+BreakdownTable.prototype._class += " html_BreakdownTable";
+BreakdownTable.prototype.publish("useCalculatedRowCount", !0, "boolean", "If true, rowCount will be calculated and its default will be overwritten");
+BreakdownTable.prototype.publish("rowCount", 5, "number", "Number of total rows to display (including the 'other' row)", void 0, { disable: (w) => w.useCalculatedRowCount() });
+BreakdownTable.prototype.publish("fontSize", 14, "number", "Font size (pixels)");
+BreakdownTable.prototype.publish("labelAlignment", "left", "set", "Alignment of the label column text", ["left", "center", "right"]);
+BreakdownTable.prototype.publish("percentageAlignment", "center", "set", "Alignment of the percentage column text", ["left", "center", "right"]);
+BreakdownTable.prototype.publish("topLabelColor", "#333", "html-color", "Color of displayed 'top' labels");
+BreakdownTable.prototype.publish("topPercentageColor", "#1A99D5", "html-color", "Color of displayed 'top' percentages");
+BreakdownTable.prototype.publish("topPercentageBold", !0, "html-color", "If true, the 'top' percentages will be bold");
+BreakdownTable.prototype.publish("otherLabel", "Other", "string", "Label text for the 'other' row");
+BreakdownTable.prototype.publish("otherLabelColor", "#AAA", "html-color", "Color of the 'other' label");
+BreakdownTable.prototype.publish("otherLabelBold", !1, "html-color", "If true, the 'other' label will be bold");
+BreakdownTable.prototype.publish("otherPercentageColor", "#AAA", "html-color", "Color of the 'other' percentage");
+BreakdownTable.prototype.publish("otherPercentageBold", !1, "html-color", "If true, the 'other' percentage will be bold");
+BreakdownTable.prototype.publish("thFontWeight", "bold", "string", "Font weight for th elements");
+BreakdownTable.prototype.publish("thFontSize", 26, "number", "Font size for th elements");
+BreakdownTable.prototype.publish("thFirstColor", "#333", "html-color", "Text color of the first th element");
+BreakdownTable.prototype.publish("thLastColor", "#333", "html-color", "Text color of the last th element");
+class JSXWidget extends HTMLWidget {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "rootNode");
+  }
+  jsxRender(jsx, domNode) {
+    this.rootNode = React.render(jsx, domNode, this.rootNode);
+  }
+}
+__publicField(JSXWidget, "Component", React.Component), __publicField(JSXWidget, "createElement", React.createElement);
+JSXWidget.prototype._class += " html_JSXWidget";
+class VNode {
+  constructor(attrs, children) {
+    __publicField(this, "_attrs");
+    __publicField(this, "_children");
+    this._attrs = attrs, this._children = children;
+  }
+  type() {
+    return "div";
+  }
+  attrs() {
+    return this._attrs;
+  }
+  attr(key) {
+    return this._attrs[key];
+  }
+  children() {
+    return this._children;
+  }
+  update(targetElement) {
+    for (const key in this._attrs)
+      targetElement.attr(key, this._attrs[key]);
+  }
+  render(targetElement) {
+    const thisElement = targetElement.selectAll(`${targetElement.node().tagName} > *`).data([this]);
+    return thisElement.exit().remove(), thisElement.enter().append(this.type()).attr("reactd3", 0).merge(thisElement).each(function(d) {
+      const element = select(this);
+      d.update(element), d.renderChildren(element);
+    });
+  }
+  renderChildren(targetElement) {
+    const thisElement = targetElement.selectAll(`${targetElement.node().tagName} > *`).data(this._children);
+    return thisElement.exit().remove(), thisElement.enter().append((d) => document.createElement(d.type())).attr("reactd3", (_d, i) => i).merge(thisElement).each(function(d) {
+      const element = select(this);
+      d.update(element), d.renderChildren(element);
+    });
+  }
+}
+class ConstVNode extends VNode {
+  constructor(type, attrs, children) {
+    super(attrs, children);
+    __publicField(this, "_type");
+    this._type = type;
+  }
+  type() {
+    return this._type;
+  }
+}
+class TextVNode extends VNode {
+  constructor(text) {
+    super({}, []);
+    __publicField(this, "_text");
+    this._text = text;
+  }
+  type() {
+    return "span";
+  }
+  update(targetElement) {
+    super.update(targetElement), targetElement.text(this._text);
+  }
+}
+function isReactFn(_) {
+  return typeof _ == "function";
+}
+function isIVNode(_) {
+  return _.prototype && _.prototype instanceof VNode;
+}
+class ReactD3 {
+  // static createElementXXX(type: string | ReactFn | IVNode, attrs: { [key: string]: string }, ...children: Array<string | VNode>): VNode {
+  static createElement(type, attrs, ...children) {
+    return isIVNode(type) ? new type(attrs) : isReactFn(type) ? type(attrs) : new ConstVNode(type, attrs, children.map((child) => typeof child == "string" ? new TextVNode(child) : child));
+  }
+  static render(vdom, targetElement) {
+    vdom.render(targetElement);
+  }
+}
+var l;
+l = { __e: function(n, l2, u2, t) {
+  for (var i, o, r; l2 = l2.__; ) if ((i = l2.__c) && !i.__) try {
+    if ((o = i.constructor) && o.getDerivedStateFromError != null && (i.setState(o.getDerivedStateFromError(n)), r = i.__d), i.componentDidCatch != null && (i.componentDidCatch(n, t || {}), r = i.__d), r) return i.__E = i;
+  } catch (l3) {
+    n = l3;
+  }
+  throw n;
+} }, typeof Promise == "function" && Promise.prototype.then.bind(Promise.resolve());
+var f = 0;
+function u(e, t, n, o, i, u2) {
+  t || (t = {});
+  var a, l$1 = t;
+  "ref" in t && (a = t.ref, delete t.ref);
+  var p = { type: e, props: l$1, key: n, ref: a, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, constructor: void 0, __v: --f, __i: -1, __u: 0, __source: i, __self: u2 };
+  return l.vnode && l.vnode(p), p;
+}
+class VizComponent extends JSXWidget.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "widget");
+  }
+  refreshProps() {
+    for (const key in this.props)
+      this.widget[key] && typeof this.widget[key] == "function" && this.widget[key](this.props[key]);
+  }
+  componentDidMount() {
+    this.widget = new this.props.type().target(this.base), this.refreshProps(), this.widget.render();
+  }
+  componentWillUnmount() {
+    this.widget.target(null).render();
+  }
+  render() {
+    return /* @__PURE__ */ u("div", { style: this.props.style });
+  }
+  componentDidUpdate() {
+    this.refreshProps(), this.widget.render();
+  }
+}
+class VizInstance extends JSXWidget.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "widget");
+  }
+  refreshProps() {
+    for (const key in this.props)
+      this.widget[key] && typeof this.widget[key] == "function" && this.widget[key](this.props[key]);
+  }
+  componentDidMount() {
+    this.widget = this.props.instance.target(this.base), this.refreshProps(), this.widget.render();
+  }
+  componentWillUnmount() {
+    this.widget.target(null).render();
+  }
+  render() {
+    return /* @__PURE__ */ u("div", { style: this.props.style });
+  }
+  componentDidUpdate() {
+    this.refreshProps(), this.widget.render();
+  }
+}
+class StatsTable extends StyledTable {
+  transformData() {
+    const totalRow = [["Total", 0, 0]], data = this.data();
+    return data.forEach((row) => {
+      totalRow[0][1] += row[1], totalRow[0][2] += row[2];
+    }), data.concat(totalRow).map((row) => [
+      row[0],
+      this.secondColumnFormat_exists() ? format(this.secondColumnFormat())(row[1]) : row[1],
+      this.thirdColumnFormat_exists() ? format(this.thirdColumnFormat())(row[2]) : row[2]
+    ]);
+  }
+  update(domNode, element) {
+    this.tbodyColumnStyles_default([
+      {
+        "font-weight": "bold",
+        width: this.firstColumnWidth(),
+        "text-align": "left"
+      },
+      {
+        width: this.secondColumnWidth(),
+        "text-align": "right"
+      },
+      {
+        width: this.thirdColumnWidth(),
+        "text-align": "right"
+      }
+    ]), this.evenRowStyles_default([
+      {
+        "font-weight": "bold",
+        width: this.firstColumnWidth(),
+        "text-align": "left",
+        "font-color": this.evenRowFontColor(),
+        "background-color": this.evenRowBackgroundColor()
+      },
+      {
+        width: this.secondColumnWidth(),
+        "text-align": "right",
+        "font-color": this.evenRowFontColor(),
+        "background-color": this.evenRowBackgroundColor()
+      },
+      {
+        width: this.thirdColumnWidth(),
+        "text-align": "right",
+        "font-color": this.evenRowFontColor(),
+        "background-color": this.evenRowBackgroundColor()
+      }
+    ]), this.lastRowStyles_default({
+      "font-weight": "bold"
+    }), super.update(domNode, element);
+  }
+}
+StatsTable.prototype._class += " html_StatsTable";
+StatsTable.prototype.publish("labelColor", "#333", "html-color", "Color of the text in the first column");
+StatsTable.prototype.publish("primaryValueColor", "#333", "html-color", "Color of the text in the second column");
+StatsTable.prototype.publish("secondaryValueColor", "#333", "html-color", "Color of the text in the third column");
+StatsTable.prototype.publish("evenRowBackgroundColor", "#333", "html-color", "Background color of the even rows");
+StatsTable.prototype.publish("evenRowFontColor", "#333", "html-color", "Font color of the even rows");
+StatsTable.prototype.publish("firstColumnWidth", "auto", "string", "CSS style applied as the 'width' for the first column (ex: 40px)");
+StatsTable.prototype.publish("secondColumnWidth", "1%", "string", "CSS style applied as the 'width' for the second column (ex: 40px)");
+StatsTable.prototype.publish("thirdColumnWidth", "1%", "string", "CSS style applied as the 'width' for the third column (ex: 40px)");
+StatsTable.prototype.publish("secondColumnFormat", "$,.0f", "string", "d3-format specifier applied to the second column's values", void 0, { optional: !0 });
+StatsTable.prototype.publish("thirdColumnFormat", null, "string", "d3-format specifier applied to the third column's values", void 0, { optional: !0 });
+class Item extends HTMLWidget {
+  constructor(owner) {
+    super();
+    __publicField(this, "_owner");
+    this._owner = owner, this._tag = "a";
+  }
+}
+Item.prototype._class += " html_Item";
+class Button extends Item {
+  constructor(owner, icon) {
+    super(owner);
+    __publicField(this, "_icon");
+    this._icon = icon;
+  }
+  icon() {
+    return this._icon;
+  }
+  enter(domNode, element) {
+    super.enter(domNode, element), element.attr("href", "#").on("click", (d, idx, groups) => this._owner.titleBarClick(this, d, idx, groups)).append("i").attr("class", `fa ${this._icon} fa-lg fa-fw`);
+  }
+}
+Button.prototype._class += " html_Button";
+class ToggleButton extends Button {
+  enter(domNode, element) {
+    element.on("click.sel", (d, idx, groups) => {
+      this.selected(!this.selected()), this.render();
+    }), super.enter(domNode, element);
+  }
+  update(domNode, element) {
+    super.update(domNode, element), this._element.classed("selected", this.selected());
+  }
+}
+ToggleButton.prototype._class += " html_ToggleButton";
+ToggleButton.prototype.publish("selected", !1, "boolean");
+class Spacer extends Item {
+  enter(domNode, element) {
+    super.enter(domNode, element), element.attr("class", "spacer").attr("href", "#").append("i");
+  }
+}
+Spacer.prototype._class += " html_Spacer";
+class TitleBar extends JSXWidget {
+  constructor() {
+    super();
+    __publicField(this, "_divMain");
+    __publicField(this, "_divIconBar");
+    __publicField(this, "_divTitle");
+  }
+  enter(domNode, element) {
+    super.enter(domNode, element), this._divMain = element.append("div").attr("class", "main"), this._divIconBar = this._divMain.append("div").attr("class", "icon-bar"), this._divTitle = this._divMain.append("div").attr("class", "title");
+  }
+  update(domNode, element) {
+    super.update(domNode, element), this._divTitle.text(this.title());
+    const icons = this._divIconBar.selectAll(".icon-bar-item").data(this.buttons());
+    icons.enter().append("div").attr("class", "icon-bar-item").each(function(d) {
+      d.target(this);
+    }).merge(icons).each(function(d) {
+      d.render();
+    }), icons.exit().each(function(d) {
+      d.target(null);
+    }).remove(), icons.order();
+  }
+}
+TitleBar.prototype._class += " html_TitleBar";
+TitleBar.prototype.publish("title", "", "string");
+TitleBar.prototype.publish("buttons", [], "widgetArray");
+export {
+  BUILD_VERSION,
+  BreakdownTable,
+  Button,
+  HTMLTooltip,
+  Item,
+  JSXWidget,
+  PKG_NAME,
+  PKG_VERSION,
+  ReactD3,
+  SimpleTable,
+  Spacer,
+  StatsTable,
+  StyledTable,
+  TitleBar,
+  ToggleButton,
+  VNode,
+  VizComponent,
+  VizInstance
+};
 //# sourceMappingURL=index.js.map