@foxeltech/angular-ui 0.7.106 → 0.7.124

package/components.css

@@ -631,6 +631,10 @@ input[type='password'] {
     0 1px 2px rgb(0 0 0 / 0.15);
 }
 .btn-cta:hover {
+  /* The edge darkens a step past the fill — reference `.bi-newbtn:hover`
+     (measured 16/09). Without it the button only changed fill and shadow, so
+     the hover read softer than the design's. */
+  border-color: var(--color-cta-hover-border);
   box-shadow:
     inset 0 1px 0 rgb(255 255 255 / 0.18),
     0 2px 6px rgb(0 0 0 / 0.2);
@@ -849,3 +853,200 @@ input[type='password'] {
 .fx-rs-busy > *:not(fx-ui-route-skeleton) {
   display: none !important;
 }
+
+/* ============================================================================
+   Grid tables, badges and status dots to the reference HTML (Binary
+   Intelligence Dashboard, porcelain) — anh Tú 15/09, moved into the lib in
+   0.7.107 from three identical copies in analyze/knowledge/host styles.scss.
+
+   The reference draws its lists as CSS-grid rows, not <table>: a sunken 10px
+   header in 10.5px/600 tracked faint, 11px rows split by hairlines, hover to
+   surface-sunken, a trailing caret that turns accent and slides 2px. Columns
+   come from the consumer as `--fx-cols` on `.fx-grid-table`.
+
+   Inside layer(components) like the rest of this file, so a Tailwind utility
+   on the same element still wins.
+   ============================================================================ */
+.fx-grid-table {
+  border: 1px solid rgb(var(--og-border));
+  border-radius: var(--og-radius-card);
+  background: rgb(var(--og-surface));
+  overflow: hidden;
+}
+.fx-grid-table__head,
+.fx-grid-table__row {
+  display: grid;
+  grid-template-columns: var(--fx-cols);
+  gap: 12px;
+  align-items: center;
+  padding: 10px 12px;
+}
+.fx-grid-table__head {
+  border-bottom: 1px solid rgb(var(--og-border));
+  background: rgb(var(--og-surface-sunken));
+  font-size: var(--og-fs-2xs);
+  font-weight: 600;
+  letter-spacing: var(--og-tracking-label);
+  color: rgb(var(--og-text-faint));
+}
+.fx-grid-table__row {
+  appearance: none;
+  width: 100%;
+  padding: 11px 12px;
+  border: 0;
+  border-bottom: 1px solid rgb(var(--og-border-subtle));
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  transition: background-color 130ms ease;
+}
+.fx-grid-table__row:last-child {
+  border-bottom: 0;
+}
+.fx-grid-table__row:hover {
+  background: rgb(var(--og-surface-sunken));
+}
+.fx-grid-table__row--on {
+  background: rgb(var(--og-accent-soft-bg));
+}
+.fx-grid-table__row:focus-visible {
+  outline: 2px solid rgb(var(--og-accent));
+  outline-offset: -2px;
+}
+.fx-grid-caret {
+  font-size: 15px;
+  line-height: 1;
+  color: rgb(var(--og-text-faint));
+  justify-self: end;
+  transition:
+    color 130ms ease,
+    transform 130ms ease;
+}
+.fx-grid-table__row:hover .fx-grid-caret {
+  color: rgb(var(--og-accent));
+  transform: translateX(2px);
+}
+.fx-grid-table__num {
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-sm);
+  color: rgb(var(--og-text-body));
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.fx-grid-table__head .fx-grid-table__num {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+.fx-grid-table__strong {
+  font-size: var(--og-fs-sm);
+  font-weight: 600;
+  color: rgb(var(--og-text));
+}
+.fx-grid-table__muted {
+  font-size: var(--og-fs-xs);
+  color: rgb(var(--og-text-muted));
+}
+.fx-grid-table__mono {
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-xs);
+  color: rgb(var(--og-text-faint));
+}
+.fx-grid-empty {
+  padding: 15px;
+  text-align: center;
+  color: rgb(var(--og-text-muted));
+  font-size: var(--og-fs-sm);
+  border: 1px dashed rgb(var(--og-border));
+  border-radius: var(--og-radius-card);
+}
+
+/* `.og-badge`: 3px 10px, pill, 11.5px, soft tint by tone; outline = the
+   neutral "Low" band; solid = Critical. Tone names are the SEMANTIC tokens
+   (`--og-negative`, not the chart ramp) — see the note above `.tone-tint-*`. */
+.fx-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: var(--og-radius-pill);
+  font-size: var(--og-fs-xs);
+  line-height: 1.5;
+  white-space: nowrap;
+  /* 400, per the reference's risk badge ("High · 82", measured 16/09). At 500
+     it sat a step heavier than every other 11.5px label around it. */
+  font-weight: 400;
+}
+.fx-badge--negative {
+  background: rgb(var(--og-negative-soft-bg));
+  color: rgb(var(--og-negative));
+}
+.fx-badge--warning {
+  background: rgb(var(--og-warning-soft-bg));
+  color: rgb(var(--og-warning));
+}
+.fx-badge--positive {
+  background: rgb(var(--og-positive-soft-bg));
+  color: rgb(var(--og-positive));
+}
+.fx-badge--neutral {
+  background: rgb(var(--og-neutral-soft-bg));
+  color: rgb(var(--og-neutral-soft-fg));
+}
+.fx-badge--accent {
+  background: rgb(var(--og-accent-soft-bg));
+  color: rgb(var(--og-accent-soft-fg));
+}
+.fx-badge--outline {
+  background: none;
+  border: 1px solid rgb(var(--og-border));
+  color: rgb(var(--og-text-muted));
+}
+.fx-badge--solid {
+  background: rgb(var(--og-text));
+  color: rgb(var(--og-surface));
+}
+
+/* `.og-statusdot`: a 7px mark and the state's name. */
+.fx-statusdot {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--og-fs-sm);
+  color: rgb(var(--og-text-body));
+  white-space: nowrap;
+}
+.fx-statusdot::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: rgb(var(--og-text-faint));
+  flex: none;
+}
+.fx-statusdot--positive::before {
+  background: rgb(var(--og-positive));
+}
+.fx-statusdot--negative::before {
+  background: rgb(var(--og-negative));
+}
+.fx-statusdot--warning::before {
+  background: rgb(var(--og-warning));
+}
+.fx-statusdot--accent::before {
+  background: rgb(var(--og-accent));
+}
+
+/* A tooltip must never take the pointer. Material gives its overlay pane
+   `pointer-events: auto`, and with the drawer COLLAPSED a nav item's tooltip
+   opens at x≈70..110 while the collapse/expand button sits at 58..82 — the
+   tooltip covered the button's right half and swallowed the click, which is
+   why the toggle "sometimes" did nothing (MEASURED 16/09). Nothing in a
+   tooltip is interactive, so this is safe everywhere. */
+.mat-mdc-tooltip-panel,
+.mat-mdc-tooltip,
+.mat-mdc-tooltip-panel > * {
+  pointer-events: none !important;
+}

package/fesm2022/foxeltech-angular-ui-chart.mjs

@@ -28,6 +28,14 @@ class ChartComponent {
      * rather than an annotation.
      */
     pieCenterValueSize = input(24, ...(ngDevMode ? [{ debugName: "pieCenterValueSize" }] : /* istanbul ignore next */ []));
+    /**
+     * The donut's [inner, outer] radius — ECharts' own vocabulary, so either a
+     * percentage of the shorter side or a pixel count. The default is what the
+     * ring has always been. The reference dashboard draws a 140px ring with a
+     * 22px stroke, i.e. `[48, 70]` at `height="140px"` — the panel that wants it
+     * says so; the other pies keep their proportions.
+     */
+    pieRadius = input(['40%', '70%'], ...(ngDevMode ? [{ debugName: "pieRadius" }] : /* istanbul ignore next */ []));
     mobileWidth = input(350, ...(ngDevMode ? [{ debugName: "mobileWidth" }] : /* istanbul ignore next */ []));
     /** Override font for canvas text; empty = follow the theme's --og-font-figure. */
     labelFontFamily = input('', ...(ngDevMode ? [{ debugName: "labelFontFamily" }] : /* istanbul ignore next */ []));
@@ -94,6 +102,8 @@ class ChartComponent {
      */
     appearUntil = 0;
     static APPEAR_MS = 1100;
+    /** Quiet time a host size has to hold before a resize is acted on. */
+    static RESIZE_SETTLE_MS = 120;
     deferTimer;
     /**
      * Thay đổi kích thước ghi nhận TRONG cửa sổ appear, chờ áp sau. `measure()`
@@ -123,10 +133,15 @@ class ChartComponent {
         // resize() mù sau throttle 100ms, kể cả về 0×H khi phần tử display:none
         // (skeleton route ẩn nội dung cũ) rồi resize lại khi hiện → animation
         // xuất hiện bị giết (đo 05/09 khi đổi project trên chip breadcrumb).
+        // Coalesced: a host that is being ANIMATED (the drawer's 300ms width
+        // tween, a panel sliding open) fires one RO event per frame, and acting
+        // on each one resized + rebuilt the pie ~18 times and replayed its appear
+        // animation twice (anh Tú 15/09, donut on sidebar toggle). Wait until the
+        // size has been still for RESIZE_SETTLE_MS, then act once.
         this.resizeObserver = new ResizeObserver(() => {
             if (!this.canInit || this.destroyed)
                 return;
-            this.forceMediaRecalc();
+            this.deferResize(ChartComponent.RESIZE_SETTLE_MS);
         });
         this.resizeObserver.observe(this.ref.nativeElement);
     }
@@ -285,10 +300,18 @@ class ChartComponent {
     markAppear() {
         this.appearUntil = performance.now() + ChartComponent.APPEAR_MS;
     }
-    /** Pie/sunburst đặt legend + số giữa theo px của containerWidth → phải dựng lại. */
+    /**
+     * Sunburst, and a pie WITH its built-in legend, place things in px of
+     * containerWidth → must rebuild on resize. A legend-less pie centres its
+     * ring at 50%/50% and its total in a `left: 'center' / top: 'middle'`
+     * graphic group, so `resize()` alone re-centres it — no rebuild, no
+     * second appear animation (15/09, donut on sidebar toggle).
+     */
     needsLayoutRebuild() {
         const type = this.detectType();
-        return type === 'pie' || type === 'sunburst';
+        if (type === 'sunburst')
+            return true;
+        return type === 'pie' && this.showPieLegend();
     }
     deferResize(ms) {
         if (this.deferTimer !== undefined)
@@ -341,10 +364,19 @@ class ChartComponent {
         if (!chart)
             return;
         chart.resize();
-        if (mobile || this.needsLayoutRebuild())
+        // A rebuild forced by GEOMETRY draws the same data at a new size: no
+        // appear animation, or the panel visibly redraws (that was the "renders
+        // twice" of 15/09). Only a preset change (mobile) keeps the animation.
+        if (mobile)
             this.rebuildChart();
+        else if (this.needsLayoutRebuild())
+            this.rebuildChart(true);
     }
-    rebuildChart() {
+    /**
+     * @param silent redraw for a new size only — same data, no appear animation,
+     *   and the appear window is not re-armed.
+     */
+    rebuildChart(silent = false) {
         if (this.destroyed)
             return;
         this.isEmpty = this.checkEmpty();
@@ -352,7 +384,7 @@ class ChartComponent {
             this.liveChart?.clear();
             return;
         }
-        const options = this.buildOptions();
+        const options = silent ? { ...this.buildOptions(), animation: false } : this.buildOptions();
         const chart = this.liveChart;
         if (!chart) {
             if (this.awaitingFirstInit) {
@@ -370,7 +402,8 @@ class ChartComponent {
         this.hasOptions = true;
         chart.clear();
         chart.setOption(options, true);
-        this.markAppear();
+        if (!silent)
+            this.markAppear();
     }
     checkEmpty() {
         const type = this.detectType();
@@ -489,7 +522,7 @@ class ChartComponent {
                 series: [
                     {
                         type: 'pie',
-                        radius: ['40%', '70%'],
+                        radius: this.pieRadius(),
                         center: layout.pieCenter,
                         data,
                         label: {
@@ -509,46 +542,62 @@ class ChartComponent {
                         },
                     },
                 ],
-                // Centre figure: positioned by x/y in pixels — graphic left/top
-                // percentages place the element's bounding-box EDGE, which shifted the
-                // total right/down by half its own size (mis-centred, caption clipped).
+                // Centre figure. With the built-in legend the ring sits off-centre
+                // (layout.pieCenter in px of containerWidth), so the texts are placed
+                // by x/y in pixels — graphic left/top PERCENTAGES place the element's
+                // bounding-box EDGE and mis-centred the total. Without the legend the
+                // ring is at 50%/50% and the pair goes in a group with the KEYWORDS
+                // left: 'center' / top: 'middle', which ECharts re-lays out on
+                // `resize()` — so a legend-less donut never needs a rebuild to stay
+                // centred (15/09).
                 graphic: (() => {
-                    const cx = (this.containerWidth || 400) * (parseFloat(layout.pieCenter[0]) / 100);
-                    const ch = this.ref.nativeElement.clientHeight || 300;
-                    const cy = ch * (parseFloat(layout.pieCenter[1]) / 100);
                     const centre = this.pieCentreAnchors();
-                    return [
-                        {
+                    const font = this.resolvedFontFamily();
+                    const totalText = {
+                        type: 'text',
+                        style: {
+                            text: total.toString(),
+                            fontSize: this.pieCenterValueSize(),
+                            fontWeight: 600,
+                            fontFamily: font,
+                            fill: FxUtils.convertColorFromVariable('--text-primary'),
+                            align: 'center',
+                            verticalAlign: 'middle',
+                        },
+                    };
+                    const captionText = this.pieCenterLabel()
+                        ? {
                             type: 'text',
-                            x: cx,
-                            y: cy + centre.total,
                             style: {
-                                text: total.toString(),
-                                fontSize: this.pieCenterValueSize(),
-                                fontWeight: 600,
-                                fontFamily: this.resolvedFontFamily(),
-                                fill: FxUtils.convertColorFromVariable('--text-primary'),
+                                text: this.pieCenterLabel(),
+                                fontSize: 11,
+                                fontFamily: font,
+                                fill: FxUtils.convertColorFromVariable('--text-secondary'),
                                 align: 'center',
                                 verticalAlign: 'middle',
                             },
-                        },
-                        ...(this.pieCenterLabel()
-                            ? [
-                                {
-                                    type: 'text',
-                                    x: cx,
-                                    y: cy + centre.caption,
-                                    style: {
-                                        text: this.pieCenterLabel(),
-                                        fontSize: 11,
-                                        fontFamily: this.resolvedFontFamily(),
-                                        fill: FxUtils.convertColorFromVariable('--text-secondary'),
-                                        align: 'center',
-                                        verticalAlign: 'middle',
-                                    },
-                                },
-                            ]
-                            : []),
+                        }
+                        : undefined;
+                    if (!this.showPieLegend()) {
+                        return [
+                            {
+                                type: 'group',
+                                left: 'center',
+                                top: 'middle',
+                                silent: true,
+                                children: [
+                                    { ...totalText, x: 0, y: centre.total },
+                                    ...(captionText ? [{ ...captionText, x: 0, y: centre.caption }] : []),
+                                ],
+                            },
+                        ];
+                    }
+                    const cx = (this.containerWidth || 400) * (parseFloat(layout.pieCenter[0]) / 100);
+                    const ch = this.ref.nativeElement.clientHeight || 300;
+                    const cy = ch * (parseFloat(layout.pieCenter[1]) / 100);
+                    return [
+                        { ...totalText, x: cx, y: cy + centre.total },
+                        ...(captionText ? [{ ...captionText, x: cx, y: cy + centre.caption }] : []),
                     ];
                 })(),
             };
@@ -623,9 +672,33 @@ class ChartComponent {
                     itemStyle: { color: FxUtils.convertColorFromVariable('--text-placeholder', 1, { legacyCommaSyntax: true }) },
                 });
             }
+            const faint = FxUtils.convertColorFromVariable('--og-text-faint', 1, { legacyCommaSyntax: true });
             return {
                 tooltip: { trigger: 'axis' },
-                grid: { left: '3%', right: '4%', bottom: '8%', top: '10%', containLabel: true },
+                // The reference labels the two lines under the chart ("Analyses run /
+                // Findings opened"); the series already carry those names, they were
+                // simply never drawn. Only shown when there ARE two lines — a lone
+                // series needs no key. NOTE the row sits BELOW the date axis here,
+                // where the reference draws it just above: ECharts pins axis labels to
+                // the grid edge, so the two cannot swap without hand-placing both.
+                legend: {
+                    show: series.length > 1,
+                    data: series.map((serie) => serie.name),
+                    left: '3%',
+                    bottom: 0,
+                    icon: 'roundRect',
+                    itemWidth: 12,
+                    itemHeight: 2,
+                    itemGap: 14,
+                    textStyle: { fontSize: 10.5, color: faint, fontFamily: this.resolvedFontFamily() },
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: series.length > 1 ? 28 : '8%',
+                    top: '10%',
+                    containLabel: true,
+                },
                 xAxis: { ...this.categoryAxis(data?.categories || []), boundaryGap: false },
                 yAxis: this.valueAxis(),
                 series,
@@ -858,12 +931,12 @@ class ChartComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ChartComponent, isStandalone: true, selector: "fx-ui-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pieLegendAlign: { classPropertyName: "pieLegendAlign", publicName: "pieLegendAlign", isSignal: true, isRequired: false, transformFunction: null }, pieLegendPosition: { classPropertyName: "pieLegendPosition", publicName: "pieLegendPosition", isSignal: true, isRequired: false, transformFunction: null }, showPieLabel: { classPropertyName: "showPieLabel", publicName: "showPieLabel", isSignal: true, isRequired: false, transformFunction: null }, showPieLegend: { classPropertyName: "showPieLegend", publicName: "showPieLegend", isSignal: true, isRequired: false, transformFunction: null }, pieCenterLabel: { classPropertyName: "pieCenterLabel", publicName: "pieCenterLabel", isSignal: true, isRequired: false, transformFunction: null }, pieCenterValueSize: { classPropertyName: "pieCenterValueSize", publicName: "pieCenterValueSize", isSignal: true, isRequired: false, transformFunction: null }, mobileWidth: { classPropertyName: "mobileWidth", publicName: "mobileWidth", isSignal: true, isRequired: false, transformFunction: null }, labelFontFamily: { classPropertyName: "labelFontFamily", publicName: "labelFontFamily", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, showPointLabels: { classPropertyName: "showPointLabels", publicName: "showPointLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, providers: [provideEchartsCore({ echarts: () => import('echarts') })], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height()\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText() }}</span>\n    </div>\n  } @else if (hasOptions) {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [autoResize]=\"false\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  } @else {\n    <!-- Until echarts is loaded + initialised (or the element scrolls into view)\n         the panel keeps the chart's footprint with a quiet pulsing sketch\n         instead of an empty box (anh T\u00FA 04/09: \"the page is too blank\"). -->\n    <div class=\"chart-placeholder\" aria-hidden=\"true\">\n      @for (h of placeholderBars; track $index) {\n        <span class=\"chart-placeholder__bar\" [style.height.%]=\"h\"></span>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}.chart-placeholder{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px;padding:12px 8px 22px;animation:chart-placeholder-pulse 1.6s ease-in-out infinite}.chart-placeholder__bar{flex:1;border-radius:3px 3px 0 0;background:rgb(var(--og-track))}@keyframes chart-placeholder-pulse{0%,to{opacity:1}50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.chart-placeholder{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ChartComponent, isStandalone: true, selector: "fx-ui-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pieLegendAlign: { classPropertyName: "pieLegendAlign", publicName: "pieLegendAlign", isSignal: true, isRequired: false, transformFunction: null }, pieLegendPosition: { classPropertyName: "pieLegendPosition", publicName: "pieLegendPosition", isSignal: true, isRequired: false, transformFunction: null }, showPieLabel: { classPropertyName: "showPieLabel", publicName: "showPieLabel", isSignal: true, isRequired: false, transformFunction: null }, showPieLegend: { classPropertyName: "showPieLegend", publicName: "showPieLegend", isSignal: true, isRequired: false, transformFunction: null }, pieCenterLabel: { classPropertyName: "pieCenterLabel", publicName: "pieCenterLabel", isSignal: true, isRequired: false, transformFunction: null }, pieCenterValueSize: { classPropertyName: "pieCenterValueSize", publicName: "pieCenterValueSize", isSignal: true, isRequired: false, transformFunction: null }, pieRadius: { classPropertyName: "pieRadius", publicName: "pieRadius", isSignal: true, isRequired: false, transformFunction: null }, mobileWidth: { classPropertyName: "mobileWidth", publicName: "mobileWidth", isSignal: true, isRequired: false, transformFunction: null }, labelFontFamily: { classPropertyName: "labelFontFamily", publicName: "labelFontFamily", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, showPointLabels: { classPropertyName: "showPointLabels", publicName: "showPointLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, providers: [provideEchartsCore({ echarts: () => import('echarts') })], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height()\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText() }}</span>\n    </div>\n  } @else if (hasOptions) {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [autoResize]=\"false\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  } @else {\n    <!-- Until echarts is loaded + initialised (or the element scrolls into view)\n         the panel keeps the chart's footprint with a quiet pulsing sketch\n         instead of an empty box (anh T\u00FA 04/09: \"the page is too blank\"). -->\n    <div class=\"chart-placeholder\" aria-hidden=\"true\">\n      @for (h of placeholderBars; track $index) {\n        <span class=\"chart-placeholder__bar\" [style.height.%]=\"h\"></span>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}.chart-placeholder{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px;padding:12px 8px 22px;animation:chart-placeholder-pulse 1.6s ease-in-out infinite}.chart-placeholder__bar{flex:1;border-radius:3px 3px 0 0;background:rgb(var(--og-track))}@keyframes chart-placeholder-pulse{0%,to{opacity:1}50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.chart-placeholder{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fx-ui-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxEchartsDirective, InputComponent], providers: [provideEchartsCore({ echarts: () => import('echarts') })], template: "<div class=\"chart-wrapper\" [style.height]=\"height()\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText() }}</span>\n    </div>\n  } @else if (hasOptions) {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [autoResize]=\"false\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  } @else {\n    <!-- Until echarts is loaded + initialised (or the element scrolls into view)\n         the panel keeps the chart's footprint with a quiet pulsing sketch\n         instead of an empty box (anh T\u00FA 04/09: \"the page is too blank\"). -->\n    <div class=\"chart-placeholder\" aria-hidden=\"true\">\n      @for (h of placeholderBars; track $index) {\n        <span class=\"chart-placeholder__bar\" [style.height.%]=\"h\"></span>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}.chart-placeholder{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px;padding:12px 8px 22px;animation:chart-placeholder-pulse 1.6s ease-in-out infinite}.chart-placeholder__bar{flex:1;border-radius:3px 3px 0 0;background:rgb(var(--og-track))}@keyframes chart-placeholder-pulse{0%,to{opacity:1}50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.chart-placeholder{animation:none}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pieLegendAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieLegendAlign", required: false }] }], pieLegendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieLegendPosition", required: false }] }], showPieLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPieLabel", required: false }] }], showPieLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPieLegend", required: false }] }], pieCenterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieCenterLabel", required: false }] }], pieCenterValueSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieCenterValueSize", required: false }] }], mobileWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileWidth", required: false }] }], labelFontFamily: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFontFamily", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], showPointLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPointLabels", required: false }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }], chartInit: [{ type: i0.Output, args: ["chartInit"] }], onThemeChange: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pieLegendAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieLegendAlign", required: false }] }], pieLegendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieLegendPosition", required: false }] }], showPieLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPieLabel", required: false }] }], showPieLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPieLegend", required: false }] }], pieCenterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieCenterLabel", required: false }] }], pieCenterValueSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieCenterValueSize", required: false }] }], pieRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieRadius", required: false }] }], mobileWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileWidth", required: false }] }], labelFontFamily: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFontFamily", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], showPointLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPointLabels", required: false }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }], chartInit: [{ type: i0.Output, args: ["chartInit"] }], onThemeChange: [{
                 type: HostListener,
                 args: ['window:theme-changed']
             }] } });