@fusedashlabs/widgets 0.3.1 → 0.4.1

package/dist/components/sankey-chart/element/styles.js

@@ -1,8 +1,7 @@
 import { css } from "lit";
 const sankeyStyles = css`
   :host {
-    display: flex;
-    flex-direction: column;
+    display: block;
     position: relative;
     width: 100%;
     height: 100%;
@@ -11,45 +10,26 @@ const sankeyStyles = css`
     font-family: var(--ui9000-font-family, system-ui, sans-serif);
     box-sizing: border-box;
   }
+
+  /* Client BlockLabelAxe / LabelAxe — source | target above the plot. */
   .axis-labels {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    flex-shrink: 0;
     margin: 0 3px 8px 3px;
     font-size: 12px;
     font-weight: 500;
     line-height: 14px;
-    color: var(--ui9000-color-text-muted, #6c7584);
+    color: var(--ui9000-color-text, #111827);
   }
+
   .chart-root {
     flex: 1 1 auto;
     min-height: 0;
     width: 100%;
   }
-  .legend {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding-top: 8px;
-    font-size: 12px;
-    color: var(--ui9000-color-text-muted, #6c7584);
-  }
-  .swatches {
-    display: flex;
-    align-items: center;
-  }
-  .swatch {
-    width: 14px;
-    height: 8px;
-  }
-  .swatch:first-child {
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-  }
-  .swatch:last-child {
-    border-top-right-radius: 8px;
-    border-bottom-right-radius: 8px;
-  }
+
   .tooltip {
     position: absolute;
     pointer-events: none;

package/dist/components/sankey-chart/element/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/sankey-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const sankeyStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 220px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n  .axis-labels {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    margin: 0 3px 8px 3px;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 14px;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n  .chart-root {\n    flex: 1 1 auto;\n    min-height: 0;\n    width: 100%;\n  }\n  .legend {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding-top: 8px;\n    font-size: 12px;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n  .swatches {\n    display: flex;\n    align-items: center;\n  }\n  .swatch {\n    width: 14px;\n    height: 8px;\n  }\n  .swatch:first-child {\n    border-top-left-radius: 8px;\n    border-bottom-left-radius: 8px;\n  }\n  .swatch:last-child {\n    border-top-right-radius: 8px;\n    border-bottom-right-radius: 8px;\n  }\n  .tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 2;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 12px;\n    line-height: 1.35;\n    background: var(--ui9000-color-text, #111827);\n    color: #fff;\n    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);\n    transform: translate(-50%, calc(-100% - 10px));\n    white-space: nowrap;\n  }\n  .tooltip .key {\n    font-weight: 600;\n  }\n  .empty {\n    display: grid;\n    place-items: center;\n    flex: 1 1 auto;\n    padding: 20px;\n    text-align: center;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 0.875rem;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/sankey-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const sankeyStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 220px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n\n  /* Client BlockLabelAxe / LabelAxe — source | target above the plot. */\n  .axis-labels {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    flex-shrink: 0;\n    margin: 0 3px 8px 3px;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 14px;\n    color: var(--ui9000-color-text, #111827);\n  }\n\n  .chart-root {\n    flex: 1 1 auto;\n    min-height: 0;\n    width: 100%;\n  }\n\n  .tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 2;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 12px;\n    line-height: 1.35;\n    background: var(--ui9000-color-text, #111827);\n    color: #fff;\n    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);\n    transform: translate(-50%, calc(-100% - 10px));\n    white-space: nowrap;\n  }\n  .tooltip .key {\n    font-weight: 600;\n  }\n  .empty {\n    display: grid;\n    place-items: center;\n    flex: 1 1 auto;\n    padding: 20px;\n    text-align: center;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 0.875rem;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/sankey-chart/element/ui9000-sankey-chart.d.ts

@@ -1,8 +1,7 @@
-import { LitElement, PropertyValues } from 'lit';
-export declare class Ui9000SankeyChart extends LitElement {
-    static styles: import('lit').CSSResult;
-    /** JSON: FuseDash widget payload | { nodes?, links } | SankeyLink[] */
-    dataJson: string;
+import { PropertyValues } from 'lit';
+import { Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';
+export declare class Ui9000SankeyChart extends Ui9000ChartElement {
+    static styles: import('lit').CSSResult[];
     showLegend: boolean;
     showTooltip: boolean;
     /** Overrides the header above the left column. */
@@ -18,6 +17,7 @@ export declare class Ui9000SankeyChart extends LitElement {
     updated(changed: PropertyValues): void;
     private scheduleDraw;
     private parseData;
+    private renderLegend;
     private draw;
     private setTooltip;
     private clearTooltip;

package/dist/components/sankey-chart/element/ui9000-sankey-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-sankey-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/sankey-chart/element/ui9000-sankey-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAuCrE,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAgB;IAEtC,uEAAuE;IAEvE,QAAQ,SAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAEnB,kDAAkD;IAElD,WAAW,SAAM;IAEjB,mDAAmD;IAEnD,WAAW,SAAM;IAGjB,OAAO,CAAC,QAAQ,CAA6D;IAG7E,OAAO,CAAC,KAAK,CAA0B;IAEvC,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,IAAI;IAiDZ,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAIX,MAAM;CAmDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAI1C"}
+{"version":3,"file":"ui9000-sankey-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/sankey-chart/element/ui9000-sankey-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAoC7F,qBACa,iBAAkB,SAAQ,kBAAkB;IACvD,OAAgB,MAAM,4BAAoC;IAG1D,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAEnB,kDAAkD;IAElD,WAAW,SAAM;IAEjB,mDAAmD;IAEnD,WAAW,SAAM;IAGjB,OAAO,CAAC,QAAQ,CAA6D;IAG7E,OAAO,CAAC,KAAK,CAA0B;IAEvC,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,IAAI;IAiDZ,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAIX,MAAM;CA6ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAI1C"}

package/dist/components/sankey-chart/element/ui9000-sankey-chart.js

@@ -1,6 +1,8 @@
-import { LitElement, nothing, html } from "lit";
+import { nothing, html } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import { readThemeFromElement } from "../../../context/widget-context.js";
+import { renderPaletteLegend } from "../../../element/chart-legend-render.js";
+import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
 import { parseJsonAttr, getSankeyDimensions } from "../../../utils/chart-helpers.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
 import { renderSankeyChart } from "../render/draw.js";
@@ -9,6 +11,7 @@ import { normalizeSankeyData } from "../lib/normalize.js";
 import { buildColorRanges } from "../lib/domain.js";
 import { formatCapitalizedWords } from "../../../utils/format-text.js";
 import { formatSankeyValue } from "../lib/format.js";
+import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -26,10 +29,9 @@ const EMPTY_VIEW = {
   targetLabel: "",
   colorRanges: []
 };
-let Ui9000SankeyChart = class extends LitElement {
+let Ui9000SankeyChart = class extends Ui9000ChartElement {
   constructor() {
     super(...arguments);
-    this.dataJson = "[]";
     this.showLegend = true;
     this.showTooltip = true;
     this.sourceLabel = "";
@@ -59,6 +61,12 @@ let Ui9000SankeyChart = class extends LitElement {
   parseData() {
     return normalizeSankeyData(parseJsonAttr(this.dataJson, []));
   }
+  renderLegend() {
+    if (!this.showLegend || this._view.empty || !this._view.colorRanges.length) {
+      return nothing;
+    }
+    return renderPaletteLegend(this._view.colorRanges.map((range) => range.color));
+  }
   draw() {
     var _a;
     const root = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chart-root");
@@ -111,48 +119,42 @@ let Ui9000SankeyChart = class extends LitElement {
     this._tooltip = null;
   }
   render() {
-    const { empty, circular, sourceLabel, targetLabel, colorRanges } = this._view;
+    const { empty, circular, sourceLabel, targetLabel } = this._view;
     const showHeaders = !empty && Boolean(sourceLabel || targetLabel);
     return html`
-      ${showHeaders ? html`<div class="axis-labels" part="axis-labels">
-            <div>${sourceLabel}</div>
-            <div>${targetLabel}</div>
-          </div>` : nothing}
+      <div class="widget-shell" part="shell">
+        ${this.renderShellHeader(this.headerTitle())}
+        <div class="widget-body">
+          ${this.renderLegend()}
+          ${showHeaders ? html`<div class="axis-labels" part="axis-labels">
+                <div>${sourceLabel}</div>
+                <div>${targetLabel}</div>
+              </div>` : nothing}
 
-      <div class="chart-root" part="chart" ?hidden=${empty}></div>
+          <div class="chart-root" part="chart" ?hidden=${empty}></div>
 
-      ${empty ? html`<div class="empty" part="empty">
-            ${circular ? "Circular dependency detected in the data — this cannot be drawn as a Sankey." : "No data"}
-          </div>` : nothing}
+          ${empty ? html`<div class="empty" part="empty">
+                ${circular ? "Circular dependency detected in the data — this cannot be drawn as a Sankey." : "No data"}
+              </div>` : nothing}
 
-      ${!empty && this.showLegend && colorRanges.length ? html`<div class="legend" part="legend">
-            <span>Low</span>
-            <div class="swatches">
-              ${colorRanges.map(
-      (range) => html`<div class="swatch" style="background-color:${range.color}"></div>`
-    )}
-            </div>
-            <span>High</span>
-          </div>` : nothing}
-
-      ${this._tooltip ? html`<div
-            class="tooltip"
-            part="tooltip"
-            style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
-          >
-            ${this._tooltip.rows.map(
+          ${this._tooltip ? html`<div
+                class="tooltip"
+                part="tooltip"
+                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
+              >
+                ${this._tooltip.rows.map(
       (row) => html`<div>
-                  ${row.key ? html`<span class="key">${row.key}:</span> ` : nothing}${row.value}
-                </div>`
+                      ${row.key ? html`<span class="key">${row.key}:</span> ` : nothing}${row.value}
+                    </div>`
     )}
-          </div>` : nothing}
+              </div>` : nothing}
+          ${this.renderShellLabelTooltip()}
+        </div>
+      </div>
     `;
   }
 };
-Ui9000SankeyChart.styles = sankeyStyles;
-__decorateClass([
-  property({ type: String, attribute: "data" })
-], Ui9000SankeyChart.prototype, "dataJson", 2);
+Ui9000SankeyChart.styles = [sankeyStyles, chartShellStyles];
 __decorateClass([
   property({ type: Boolean, attribute: "show-legend" })
 ], Ui9000SankeyChart.prototype, "showLegend", 2);

package/dist/components/sankey-chart/element/ui9000-sankey-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-sankey-chart.js","sources":["../../../../src/components/sankey-chart/element/ui9000-sankey-chart.ts"],"sourcesContent":["import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport { getSankeyDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  buildColorRanges,\n  formatCapitalizedWords,\n  formatSankeyValue,\n  normalizeSankeyData,\n  type SankeyColorRange,\n  type SankeyInput,\n  type SankeyModel,\n} from '../lib/index.js';\nimport { renderSankeyChart } from '../render/draw.js';\nimport { sankeyStyles } from './styles.js';\n\ninterface TooltipRow {\n  key: string;\n  value: string;\n}\n\ninterface SankeyView {\n  empty: boolean;\n  circular: boolean;\n  sourceLabel: string;\n  targetLabel: string;\n  colorRanges: SankeyColorRange[];\n}\n\nconst EMPTY_VIEW: SankeyView = {\n  empty: true,\n  circular: false,\n  sourceLabel: '',\n  targetLabel: '',\n  colorRanges: [],\n};\n\n@customElement('ui9000-sankey-chart')\nexport class Ui9000SankeyChart extends LitElement {\n  static override styles = sankeyStyles;\n\n  /** JSON: FuseDash widget payload | { nodes?, links } | SankeyLink[] */\n  @property({ type: String, attribute: 'data' })\n  dataJson = '[]';\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  /** Overrides the header above the left column. */\n  @property({ type: String, attribute: 'source-label' })\n  sourceLabel = '';\n\n  /** Overrides the header above the right column. */\n  @property({ type: String, attribute: 'target-label' })\n  targetLabel = '';\n\n  @state()\n  private _tooltip: { x: number; y: number; rows: TooltipRow[] } | null = null;\n\n  @state()\n  private _view: SankeyView = EMPTY_VIEW;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): SankeyModel {\n    return normalizeSankeyData(parseJsonAttr<SankeyInput>(this.dataJson, []));\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!root) return;\n\n    const model = this.parseData();\n    const colorRanges = buildColorRanges(\n      model.links.map((l) => l.value),\n      model.colors,\n    );\n\n    this._view = {\n      empty: model.links.length === 0,\n      circular: model.circular,\n      sourceLabel: this.sourceLabel || model.sourceLabel,\n      targetLabel: this.targetLabel || model.targetLabel,\n      colorRanges,\n    };\n\n    if (!model.links.length) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height } = getSankeyDimensions(root);\n\n    renderSankeyChart(root, {\n      model,\n      colorRanges,\n      width,\n      height,\n      theme,\n      onLinkHover: this.showTooltip\n        ? ({ sourceLabel, targetLabel, value, event }) => {\n            this.setTooltip(event, [\n              { key: this._view.sourceLabel, value: formatCapitalizedWords(sourceLabel) },\n              { key: model.valueLabel, value: formatSankeyValue(value) },\n              { key: this._view.targetLabel, value: formatCapitalizedWords(targetLabel) },\n            ]);\n          }\n        : undefined,\n      onLinkLeave: this.showTooltip ? () => this.clearTooltip() : undefined,\n      onLabelHover: this.showTooltip\n        ? ({ label, event }) => this.setTooltip(event, [{ key: '', value: label }])\n        : undefined,\n      onLabelLeave: this.showTooltip ? () => this.clearTooltip() : undefined,\n    });\n  }\n\n  private setTooltip(event: MouseEvent, rows: TooltipRow[]): void {\n    const rect = this.getBoundingClientRect();\n    this._tooltip = {\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n      rows,\n    };\n  }\n\n  private clearTooltip(): void {\n    this._tooltip = null;\n  }\n\n  override render() {\n    const { empty, circular, sourceLabel, targetLabel, colorRanges } = this._view;\n    const showHeaders = !empty && Boolean(sourceLabel || targetLabel);\n\n    return html`\n      ${showHeaders\n        ? html`<div class=\"axis-labels\" part=\"axis-labels\">\n            <div>${sourceLabel}</div>\n            <div>${targetLabel}</div>\n          </div>`\n        : nothing}\n\n      <div class=\"chart-root\" part=\"chart\" ?hidden=${empty}></div>\n\n      ${empty\n        ? html`<div class=\"empty\" part=\"empty\">\n            ${circular\n              ? 'Circular dependency detected in the data — this cannot be drawn as a Sankey.'\n              : 'No data'}\n          </div>`\n        : nothing}\n\n      ${!empty && this.showLegend && colorRanges.length\n        ? html`<div class=\"legend\" part=\"legend\">\n            <span>Low</span>\n            <div class=\"swatches\">\n              ${colorRanges.map(\n                (range) =>\n                  html`<div class=\"swatch\" style=\"background-color:${range.color}\"></div>`,\n              )}\n            </div>\n            <span>High</span>\n          </div>`\n        : nothing}\n\n      ${this._tooltip\n        ? html`<div\n            class=\"tooltip\"\n            part=\"tooltip\"\n            style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n          >\n            ${this._tooltip.rows.map(\n              (row) =>\n                html`<div>\n                  ${row.key ? html`<span class=\"key\">${row.key}:</span> ` : nothing}${row.value}\n                </div>`,\n            )}\n          </div>`\n        : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-sankey-chart': Ui9000SankeyChart;\n  }\n}\n\nexport function registerSankeyChart(): void {\n  if (!customElements.get('ui9000-sankey-chart')) {\n    customElements.define('ui9000-sankey-chart', Ui9000SankeyChart);\n  }\n}\n\nregisterSankeyChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-sankey-chart.js","sources":["../../../../src/components/sankey-chart/element/ui9000-sankey-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport { renderPaletteLegend } from '../../../element/chart-legend-render.js';\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { getSankeyDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  buildColorRanges,\n  formatCapitalizedWords,\n  formatSankeyValue,\n  normalizeSankeyData,\n  type SankeyColorRange,\n  type SankeyInput,\n  type SankeyModel,\n} from '../lib/index.js';\nimport { renderSankeyChart } from '../render/draw.js';\nimport { sankeyStyles } from './styles.js';\n\ninterface TooltipRow {\n  key: string;\n  value: string;\n}\n\ninterface SankeyView {\n  empty: boolean;\n  circular: boolean;\n  sourceLabel: string;\n  targetLabel: string;\n  colorRanges: SankeyColorRange[];\n}\n\nconst EMPTY_VIEW: SankeyView = {\n  empty: true,\n  circular: false,\n  sourceLabel: '',\n  targetLabel: '',\n  colorRanges: [],\n};\n\n@customElement('ui9000-sankey-chart')\nexport class Ui9000SankeyChart extends Ui9000ChartElement {\n  static override styles = [sankeyStyles, chartShellStyles];\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  /** Overrides the header above the left column. */\n  @property({ type: String, attribute: 'source-label' })\n  sourceLabel = '';\n\n  /** Overrides the header above the right column. */\n  @property({ type: String, attribute: 'target-label' })\n  targetLabel = '';\n\n  @state()\n  private _tooltip: { x: number; y: number; rows: TooltipRow[] } | null = null;\n\n  @state()\n  private _view: SankeyView = EMPTY_VIEW;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): SankeyModel {\n    return normalizeSankeyData(parseJsonAttr<SankeyInput>(this.dataJson, []));\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || this._view.empty || !this._view.colorRanges.length) {\n      return nothing;\n    }\n    return renderPaletteLegend(this._view.colorRanges.map((range) => range.color));\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!root) return;\n\n    const model = this.parseData();\n    const colorRanges = buildColorRanges(\n      model.links.map((l) => l.value),\n      model.colors,\n    );\n\n    this._view = {\n      empty: model.links.length === 0,\n      circular: model.circular,\n      sourceLabel: this.sourceLabel || model.sourceLabel,\n      targetLabel: this.targetLabel || model.targetLabel,\n      colorRanges,\n    };\n\n    if (!model.links.length) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height } = getSankeyDimensions(root);\n\n    renderSankeyChart(root, {\n      model,\n      colorRanges,\n      width,\n      height,\n      theme,\n      onLinkHover: this.showTooltip\n        ? ({ sourceLabel, targetLabel, value, event }) => {\n            this.setTooltip(event, [\n              { key: this._view.sourceLabel, value: formatCapitalizedWords(sourceLabel) },\n              { key: model.valueLabel, value: formatSankeyValue(value) },\n              { key: this._view.targetLabel, value: formatCapitalizedWords(targetLabel) },\n            ]);\n          }\n        : undefined,\n      onLinkLeave: this.showTooltip ? () => this.clearTooltip() : undefined,\n      onLabelHover: this.showTooltip\n        ? ({ label, event }) => this.setTooltip(event, [{ key: '', value: label }])\n        : undefined,\n      onLabelLeave: this.showTooltip ? () => this.clearTooltip() : undefined,\n    });\n  }\n\n  private setTooltip(event: MouseEvent, rows: TooltipRow[]): void {\n    const rect = this.getBoundingClientRect();\n    this._tooltip = {\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n      rows,\n    };\n  }\n\n  private clearTooltip(): void {\n    this._tooltip = null;\n  }\n\n  override render() {\n    const { empty, circular, sourceLabel, targetLabel } = this._view;\n    const showHeaders = !empty && Boolean(sourceLabel || targetLabel);\n\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          ${this.renderLegend()}\n          ${showHeaders\n            ? html`<div class=\"axis-labels\" part=\"axis-labels\">\n                <div>${sourceLabel}</div>\n                <div>${targetLabel}</div>\n              </div>`\n            : nothing}\n\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${empty}></div>\n\n          ${empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                ${circular\n                  ? 'Circular dependency detected in the data — this cannot be drawn as a Sankey.'\n                  : 'No data'}\n              </div>`\n            : nothing}\n\n          ${this._tooltip\n            ? html`<div\n                class=\"tooltip\"\n                part=\"tooltip\"\n                style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n              >\n                ${this._tooltip.rows.map(\n                  (row) =>\n                    html`<div>\n                      ${row.key ? html`<span class=\"key\">${row.key}:</span> ` : nothing}${row.value}\n                    </div>`,\n                )}\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-sankey-chart': Ui9000SankeyChart;\n  }\n}\n\nexport function registerSankeyChart(): void {\n  if (!customElements.get('ui9000-sankey-chart')) {\n    customElements.define('ui9000-sankey-chart', Ui9000SankeyChart);\n  }\n}\n\nregisterSankeyChart();\n"],"names":[],"mappings":"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"}

package/dist/components/treemap-chart/element/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const treemapChartStyles: import('lit').CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/treemap-chart/element/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/treemap-chart/element/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBAuI9B,CAAC"}

package/dist/components/treemap-chart/element/styles.js

@@ -0,0 +1,141 @@
+import { css } from "lit";
+const treemapChartStyles = css`
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 220px;
+    color: var(--ui9000-color-text, #111827);
+    font-family: var(--ui9000-font-family, system-ui, sans-serif);
+    box-sizing: border-box;
+  }
+
+  .chart-root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .chart-root[hidden] {
+    display: none;
+  }
+
+  /* Grouped mode — client TreemapGroupsContainer */
+  .treemap-groups {
+    display: grid;
+    gap: 8px;
+    margin-top: 10px;
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    overflow: auto;
+  }
+
+  .treemap-card {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    padding: 8px;
+    border-radius: 8px;
+    background: var(--ui9000-color-surface-muted, #f7f8fa);
+  }
+
+  .treemap-card-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    padding-bottom: 8px;
+    flex-shrink: 0;
+  }
+
+  .treemap-card-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* The group name owns the header — the field caption gives up space first. */
+  .treemap-card-subtitle {
+    flex: 0 100 auto;
+    min-width: 0;
+    font-size: 12px;
+    line-height: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .treemap-card-plot {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+  }
+
+  /* Tile label — client TextBox / TextName / TextValue */
+  .tile-label {
+    padding: 4px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .tile-name {
+    display: block;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tile-value {
+    display: block;
+    font-size: 12px;
+    line-height: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    line-height: 1.35;
+    background: var(--ui9000-color-text, #111827);
+    color: #fff;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
+    transform: translate(-50%, calc(-100% - 10px));
+    white-space: nowrap;
+  }
+
+  .tooltip-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+  }
+
+  .empty {
+    display: grid;
+    place-items: center;
+    height: 100%;
+    min-height: inherit;
+    color: var(--ui9000-color-text-muted, #6b7280);
+    font-size: 0.875rem;
+  }
+`;
+export {
+  treemapChartStyles
+};
+//# sourceMappingURL=styles.js.map

package/dist/components/treemap-chart/element/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/treemap-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const treemapChartStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 220px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n\n  .chart-root {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .chart-root[hidden] {\n    display: none;\n  }\n\n  /* Grouped mode — client TreemapGroupsContainer */\n  .treemap-groups {\n    display: grid;\n    gap: 8px;\n    margin-top: 10px;\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    overflow: auto;\n  }\n\n  .treemap-card {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    min-height: 0;\n    padding: 8px;\n    border-radius: 8px;\n    background: var(--ui9000-color-surface-muted, #f7f8fa);\n  }\n\n  .treemap-card-header {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 8px;\n    padding-bottom: 8px;\n    flex-shrink: 0;\n  }\n\n  .treemap-card-title {\n    flex: 1 1 auto;\n    min-width: 0;\n    font-size: 14px;\n    line-height: 20px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* The group name owns the header — the field caption gives up space first. */\n  .treemap-card-subtitle {\n    flex: 0 100 auto;\n    min-width: 0;\n    font-size: 12px;\n    line-height: 16px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .treemap-card-plot {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n  }\n\n  /* Tile label — client TextBox / TextName / TextValue */\n  .tile-label {\n    padding: 4px;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  .tile-name {\n    display: block;\n    font-size: 14px;\n    line-height: 20px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .tile-value {\n    display: block;\n    font-size: 12px;\n    line-height: 16px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 2;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 12px;\n    line-height: 1.35;\n    background: var(--ui9000-color-text, #111827);\n    color: #fff;\n    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);\n    transform: translate(-50%, calc(-100% - 10px));\n    white-space: nowrap;\n  }\n\n  .tooltip-title {\n    font-weight: 600;\n    margin-bottom: 2px;\n  }\n\n  .empty {\n    display: grid;\n    place-items: center;\n    height: 100%;\n    min-height: inherit;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 0.875rem;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/treemap-chart/element/ui9000-treemap-chart.d.ts

@@ -0,0 +1,35 @@
+import { PropertyValues } from 'lit';
+import { Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';
+export declare class Ui9000TreemapChart extends Ui9000ChartElement {
+    static styles: import('lit').CSSResult[];
+    showLegend: boolean;
+    showTooltip: boolean;
+    private _tooltip;
+    private _empty;
+    private _rangeColors;
+    private _resizeObserver?;
+    private _raf;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * The palette legend only appears once the data is known, which shortens the
+     * plot — observing the plot box (not just the host) redraws it at the size it
+     * actually got.
+     */
+    firstUpdated(): void;
+    updated(changed: PropertyValues): void;
+    private scheduleDraw;
+    private parseData;
+    /** Client tooltip: `Value` plus the dimension the tile encodes. */
+    private tooltipFor;
+    private draw;
+    private renderLegend;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui9000-treemap-chart': Ui9000TreemapChart;
+    }
+}
+export declare function registerTreemapChart(): void;
+//# sourceMappingURL=ui9000-treemap-chart.d.ts.map

package/dist/components/treemap-chart/element/ui9000-treemap-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui9000-treemap-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/treemap-chart/element/ui9000-treemap-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAa7F,qBACa,kBAAmB,SAAQ,kBAAkB;IACxD,OAAgB,MAAM,4BAA0C;IAGhE,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,QAAQ,CAA6E;IAG7F,OAAO,CAAC,MAAM,CAAS;IAGvB,OAAO,CAAC,YAAY,CAAgB;IAEpC,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC;;;;OAIG;IACM,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAKjB,mEAAmE;IACnE,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,IAAI;IAyCZ,OAAO,CAAC,YAAY;IAKX,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C"}

package/dist/components/treemap-chart/element/ui9000-treemap-chart.js

@@ -0,0 +1,177 @@
+import { nothing, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { readThemeFromElement } from "../../../context/widget-context.js";
+import { renderPaletteLegend } from "../../../element/chart-legend-render.js";
+import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
+import { parseJsonAttr, getTreemapDimensions } from "../../../utils/chart-helpers.js";
+import { chartPropsChanged } from "../../../utils/lit-draw.js";
+import { formatValueWithUnit } from "../../../utils/axis-units.js";
+import { formatCapitalizedText, formatCapitalizedWords } from "../../../utils/format-text.js";
+import { formatTreemapValue } from "../lib/format.js";
+import { normalizeTreemapData } from "../lib/normalize.js";
+import { renderTreemapChart } from "../render/draw.js";
+import { treemapChartStyles } from "./styles.js";
+import { chartShellStyles } from "../../../element/chart-shell-styles.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let Ui9000TreemapChart = class extends Ui9000ChartElement {
+  constructor() {
+    super(...arguments);
+    this.showLegend = true;
+    this.showTooltip = true;
+    this._tooltip = null;
+    this._empty = false;
+    this._rangeColors = [];
+    this._raf = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());
+    this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    cancelAnimationFrame(this._raf);
+    super.disconnectedCallback();
+  }
+  /**
+   * The palette legend only appears once the data is known, which shortens the
+   * plot — observing the plot box (not just the host) redraws it at the size it
+   * actually got.
+   */
+  firstUpdated() {
+    var _a, _b;
+    const root = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chart-root");
+    if (root) (_b = this._resizeObserver) == null ? void 0 : _b.observe(root);
+  }
+  updated(changed) {
+    if (chartPropsChanged(changed)) this.scheduleDraw();
+  }
+  scheduleDraw() {
+    cancelAnimationFrame(this._raf);
+    this._raf = requestAnimationFrame(() => this.draw());
+  }
+  parseData() {
+    const raw = parseJsonAttr(this.dataJson, null);
+    return normalizeTreemapData(raw);
+  }
+  /** Client tooltip: `Value` plus the dimension the tile encodes. */
+  tooltipFor(model, payload) {
+    var _a;
+    const { tile, group } = payload;
+    const rows = [
+      { key: "Value", value: formatTreemapValue(tile.value, model.mode) }
+    ];
+    if (model.mode === "grouped") {
+      if (group && model.categoryField) {
+        rows.push({ key: formatCapitalizedText(model.categoryField), value: group.label });
+      }
+      return { title: formatCapitalizedWords(tile.label), rows };
+    }
+    if (model.categoryField) {
+      const detail = (_a = model.axisDetails) == null ? void 0 : _a[model.categoryField];
+      rows.push({
+        key: (detail == null ? void 0 : detail.label) ?? model.categoryField,
+        value: formatValueWithUnit(tile.label, detail)
+      });
+    }
+    return { rows };
+  }
+  draw() {
+    var _a;
+    const root = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chart-root");
+    if (!root) return;
+    const model = this.parseData();
+    this._empty = model.mode === "single" ? !model.tiles.length : !model.groups.length;
+    this._rangeColors = !this._empty && model.mode === "single" ? model.rangeColors : [];
+    if (this._empty) {
+      root.replaceChildren();
+      return;
+    }
+    const theme = readThemeFromElement(this);
+    const { width, height } = getTreemapDimensions(root);
+    renderTreemapChart(root, {
+      model,
+      width,
+      height,
+      theme,
+      showTooltip: this.showTooltip,
+      onHover: this.showTooltip ? (payload) => {
+        const rect = this.getBoundingClientRect();
+        this._tooltip = {
+          x: payload.event.clientX - rect.left,
+          y: payload.event.clientY - rect.top,
+          ...this.tooltipFor(model, payload)
+        };
+      } : void 0,
+      onLeave: this.showTooltip ? () => {
+        this._tooltip = null;
+      } : void 0
+    });
+  }
+  renderLegend() {
+    if (!this.showLegend || !this._rangeColors.length) return nothing;
+    return renderPaletteLegend(this._rangeColors);
+  }
+  render() {
+    const title = this.headerTitle();
+    return html`
+      <div class="widget-shell" part="shell">
+        ${this.renderShellHeader(title)}
+        <div class="widget-body">
+          ${this.renderLegend()}
+          <div class="chart-root" part="chart" ?hidden=${this._empty}></div>
+          ${this._empty ? html`<div class="empty" part="empty">No data</div>` : nothing}
+          ${this._tooltip ? html`<div
+                class="tooltip"
+                part="tooltip"
+                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
+              >
+                ${this._tooltip.title ? html`<div class="tooltip-title">${this._tooltip.title}</div>` : nothing}
+                ${this._tooltip.rows.map((row) => html`<div>${row.key}: ${row.value}</div>`)}
+              </div>` : nothing}
+          ${this.renderShellLabelTooltip()}
+        </div>
+      </div>
+    `;
+  }
+};
+Ui9000TreemapChart.styles = [treemapChartStyles, chartShellStyles];
+__decorateClass([
+  property({ type: Boolean, attribute: "show-legend" })
+], Ui9000TreemapChart.prototype, "showLegend", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-tooltip" })
+], Ui9000TreemapChart.prototype, "showTooltip", 2);
+__decorateClass([
+  state()
+], Ui9000TreemapChart.prototype, "_tooltip", 2);
+__decorateClass([
+  state()
+], Ui9000TreemapChart.prototype, "_empty", 2);
+__decorateClass([
+  state()
+], Ui9000TreemapChart.prototype, "_rangeColors", 2);
+Ui9000TreemapChart = __decorateClass([
+  customElement("ui9000-treemap-chart")
+], Ui9000TreemapChart);
+function registerTreemapChart() {
+  if (!customElements.get("ui9000-treemap-chart")) {
+    customElements.define("ui9000-treemap-chart", Ui9000TreemapChart);
+  }
+}
+registerTreemapChart();
+export {
+  Ui9000TreemapChart,
+  registerTreemapChart
+};
+//# sourceMappingURL=ui9000-treemap-chart.js.map