@foxeltech/angular-ui 0.4.0 → 0.7.44

package/components.css

@@ -77,7 +77,7 @@
   margin-right: 0px !important;
 }
 .mat-mdc-tooltip {
-  border-radius: 6px !important;
+  border-radius: var(--og-radius-control) !important;
   background-color: rgb(var(--bg-primary)) !important;
   --mdc-plain-tooltip-container-color: rgb(var(--bg-primary));
   --mdc-plain-tooltip-supporting-text-color: rgb(var(--text-primary));
@@ -88,7 +88,7 @@
 
 .mat-mdc-table {
   border: 1px solid rgb(var(--border-default)) !important;
-  border-radius: 12px !important;
+  border-radius: var(--og-radius-card) !important;
   overflow: hidden !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
@@ -106,7 +106,7 @@
   padding-top: 8px !important;
   padding-bottom: 8px !important;
   line-height: 24px !important;
-  font-family: 'Roboto';
+  font-family: var(--og-font-body);
 }
 
 .mdc-data-table__row {
@@ -122,7 +122,7 @@
 .mdc-data-table__cell {
   border-bottom: 1px solid rgb(var(--border-default)) !important;
   background-color: rgb(var(--bg-primary)) !important;
-  font-family: 'Roboto';
+  font-family: var(--og-font-body);
 }
 
 .mat-mdc-row:last-child .mdc-data-table__cell {
@@ -136,7 +136,7 @@
 .mat-mdc-select-panel {
   background-color: rgb(var(--bg-primary)) !important;
   border: 1px solid rgb(var(--border-default)) !important;
-  border-radius: 0.5rem !important;
+  border-radius: var(--og-radius-card) !important;
   box-shadow: 0 2px 4px rgb(var(--shadow-color) / 0.1) !important;
 }
 
@@ -145,11 +145,11 @@
 }
 
 .mat-mdc-menu-panel {
-  border-radius: 6px !important;
+  border-radius: var(--og-radius-card) !important;
   border-color: rgb(var(--border-default)) !important;
 }
 .mat-mdc-menu-panel .mat-mdc-menu-content {
-  @apply bg-bg-primary shadow-none border rounded-[6px] border-border-default flex flex-col;
+  @apply bg-bg-primary shadow-none border rounded-card border-border-default flex flex-col;
 }
 
 .mat-mdc-option .mat-pseudo-checkbox {
@@ -158,7 +158,7 @@
 
 .mat-mdc-dialog-surface {
   background-color: rgb(var(--bg-primary)) !important;
-  border-radius: 8px !important;
+  border-radius: var(--og-radius-card) !important;
 }
 .mat-mdc-dialog-container .mat-mdc-dialog-content {
   letter-spacing: 0 !important;
@@ -203,7 +203,7 @@ input[type='password'] {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
 }
 .txt-heading-table {
-  @apply text-base font-roboto font-semibold text-text-primary tracking-tight;
+  @apply text-base font-body font-semibold text-text-primary tracking-tight;
 }
 .txt-heading-compact-02 {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
@@ -334,7 +334,7 @@ input[type='password'] {
   @apply btn-common bg-gradient-primary hover:opacity-75 text-text-focus;
 }
 .btn-success {
-  @apply btn-common bg-gradient-success hover:opacity-75 text-white;
+  @apply btn-common bg-gradient-success hover:opacity-75 text-surface;
 }
 .btn-alternative {
   @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
@@ -474,7 +474,7 @@ input[type='password'] {
 .border-gradient-primary {
   border: 1px solid transparent;
   background:
-    linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box,
+    linear-gradient(rgb(var(--og-surface)), rgb(var(--og-surface))) padding-box,
     linear-gradient(
       135deg,
       rgb(var(--gradient-primary-start)),
@@ -482,5 +482,5 @@ input[type='password'] {
     ) border-box;
 }
 .skeleton-load {
-  @apply rounded bg-gray-200 animate-pulse motion-reduce:animate-none;
+  @apply rounded bg-track animate-pulse motion-reduce:animate-none;
 }

package/dialogs.css

@@ -1,6 +1,6 @@
 .fx-dialog {
   max-width: unset !important;
-  border-radius: 8px !important;
+  border-radius: var(--og-radius-card) !important;
   .mat-dialog-actions {
     border-top: 1px solid rgb(var(--border-default)) !important;
     margin-left: -24px;
@@ -40,7 +40,7 @@
 
     .mat-dialog-title {
       background-color: rgb(var(--bg-primary));
-      box-shadow: 0px 4px 8px rgba(26, 28, 38, 0.15);
+      box-shadow: 0px 4px 8px rgb(var(--shadow-color) / 0.15);
       color: rgb(var(--text-primary));
       padding: 12px 20px;
       min-height: 24px;

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

@@ -17,8 +17,14 @@ class ChartComponent {
     pieLegendAlign = input('10%', ...(ngDevMode ? [{ debugName: "pieLegendAlign" }] : /* istanbul ignore next */ []));
     pieLegendPosition = input('middle', ...(ngDevMode ? [{ debugName: "pieLegendPosition" }] : /* istanbul ignore next */ []));
     showPieLabel = input(true, ...(ngDevMode ? [{ debugName: "showPieLabel" }] : /* istanbul ignore next */ []));
+    /** Hide the built-in legend (panels that render their own legend beside the
+        donut); the donut then centres in the container. */
+    showPieLegend = input(true, ...(ngDevMode ? [{ debugName: "showPieLegend" }] : /* istanbul ignore next */ []));
+    /** Caption under the donut's centre total (design: "42 / confirmed"). */
+    pieCenterLabel = input('', ...(ngDevMode ? [{ debugName: "pieCenterLabel" }] : /* istanbul ignore next */ []));
     mobileWidth = input(350, ...(ngDevMode ? [{ debugName: "mobileWidth" }] : /* istanbul ignore next */ []));
-    labelFontFamily = input('Roboto', ...(ngDevMode ? [{ debugName: "labelFontFamily" }] : /* istanbul ignore next */ []));
+    /** Override font for canvas text; empty = follow the theme's --og-font-figure. */
+    labelFontFamily = input('', ...(ngDevMode ? [{ debugName: "labelFontFamily" }] : /* istanbul ignore next */ []));
     emptyText = input('No data available', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
     /* ================= OUTPUTS ================= */
     chartClick = output();
@@ -123,6 +129,14 @@ class ChartComponent {
             const values = data?.values;
             return !categories?.length || !values?.length;
         }
+        if (type === 'line') {
+            const data = this.data();
+            return !data?.categories?.length || !data?.values?.length;
+        }
+        if (type === 'area-trend') {
+            const data = this.data();
+            return !data?.categories?.length || !data?.current?.length;
+        }
         if (type === 'pie') {
             const data = this.data();
             if (!Array.isArray(data) || data.length === 0)
@@ -146,7 +160,7 @@ class ChartComponent {
                     width: 80,
                     overflow: 'truncate',
                     ellipsis: '…',
-                    fontFamily: this.labelFontFamily(),
+                    fontFamily: this.resolvedFontFamily(),
                     fontSize: this.labelFontSize,
                     color: FxUtils.convertColorFromVariable('--text-secondary'),
                 },
@@ -159,7 +173,7 @@ class ChartComponent {
             yAxis: {
                 type: 'value',
                 axisLabel: {
-                    fontFamily: this.labelFontFamily(),
+                    fontFamily: this.resolvedFontFamily(),
                     fontSize: this.labelFontSize,
                     color: FxUtils.convertColorFromVariable('--text-secondary'),
                 },
@@ -185,7 +199,7 @@ class ChartComponent {
                     label: {
                         show: true,
                         position: 'top',
-                        fontFamily: this.labelFontFamily(),
+                        fontFamily: this.resolvedFontFamily(),
                         fontSize: this.labelFontSize,
                         color: FxUtils.convertColorFromVariable('--text-primary'),
                     },
@@ -199,6 +213,7 @@ class ChartComponent {
                 color: colors,
                 tooltip: { trigger: 'item' },
                 legend: {
+                    show: this.showPieLegend(),
                     type: 'scroll',
                     orient: layout.legendOrient,
                     icon: 'circle',
@@ -213,7 +228,7 @@ class ChartComponent {
                         return item ? `${name}: ${item.value}` : name;
                     },
                     textStyle: {
-                        fontFamily: this.labelFontFamily(),
+                        fontFamily: this.resolvedFontFamily(),
                         fontSize: 13,
                         fontWeight: 500,
                         color: FxUtils.convertColorFromVariable('--text-primary'),
@@ -231,7 +246,7 @@ class ChartComponent {
                             position: 'outside',
                             formatter: '{d}%',
                             fontSize: this.labelFontSize,
-                            fontFamily: this.labelFontFamily(),
+                            fontFamily: this.resolvedFontFamily(),
                             color: FxUtils.convertColorFromVariable('--text-primary'),
                             textBorderWidth: 0,
                             textBorderColor: 'transparent',
@@ -243,26 +258,124 @@ class ChartComponent {
                         },
                     },
                 ],
-                graphic: {
-                    type: 'group',
-                    left: layout.graphicLeft,
-                    top: layout.graphicTop,
-                    bounding: 'raw',
-                    children: [
+                // 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).
+                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);
+                    return [
                         {
                             type: 'text',
+                            // Shift the total up when a caption sits under it.
+                            x: cx,
+                            y: cy + (this.pieCenterLabel() ? -9 : 0),
                             style: {
                                 text: total.toString(),
                                 fontSize: 24,
                                 fontWeight: 600,
-                                fontFamily: this.labelFontFamily(),
+                                fontFamily: this.resolvedFontFamily(),
                                 fill: FxUtils.convertColorFromVariable('--text-primary'),
                                 align: 'center',
                                 verticalAlign: 'middle',
                             },
                         },
-                    ],
+                        ...(this.pieCenterLabel()
+                            ? [
+                                {
+                                    type: 'text',
+                                    x: cx,
+                                    y: cy + 12,
+                                    style: {
+                                        text: this.pieCenterLabel(),
+                                        fontSize: 11,
+                                        fontFamily: this.resolvedFontFamily(),
+                                        fill: FxUtils.convertColorFromVariable('--text-secondary'),
+                                        align: 'center',
+                                        verticalAlign: 'middle',
+                                    },
+                                },
+                            ]
+                            : []),
+                    ];
+                })(),
+            };
+        },
+        // V2 preset: single line, accent-coloured — "risk score by release".
+        line: (data) => ({
+            tooltip: { trigger: 'axis' },
+            grid: { left: '3%', right: '4%', bottom: '8%', top: '8%', containLabel: true },
+            xAxis: this.categoryAxis(data?.categories || []),
+            yAxis: this.valueAxis(),
+            series: [
+                {
+                    type: 'line',
+                    data: data?.values || [],
+                    smooth: false,
+                    symbol: 'circle',
+                    symbolSize: 7,
+                    lineStyle: { width: 2, color: FxUtils.convertColorFromVariable('--og-accent', 1, { legacyCommaSyntax: true }) },
+                    itemStyle: { color: FxUtils.convertColorFromVariable('--og-accent', 1, { legacyCommaSyntax: true }) },
+                    label: {
+                        show: true,
+                        position: 'top',
+                        fontFamily: this.resolvedFontFamily(),
+                        fontSize: this.labelFontSize,
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                    },
+                },
+            ],
+        }),
+        // V2 preset: weekly trend — accent gradient fill + gray comparison line.
+        // data: { categories: string[], current: number[], previous?: number[] }
+        'area-trend': (data) => {
+            // legacyCommaSyntax: zrender's colour parser chokes on CSS4 space syntax.
+            const accent = FxUtils.convertColorFromVariable('--og-accent', 1, { legacyCommaSyntax: true });
+            const accentSoft = FxUtils.convertColorFromVariable('--og-accent', 0.25, { legacyCommaSyntax: true });
+            const accentFade = FxUtils.convertColorFromVariable('--og-accent', 0.02, { legacyCommaSyntax: true });
+            const series = [
+                {
+                    type: 'line',
+                    name: data?.currentLabel || 'Current',
+                    data: data?.current || [],
+                    smooth: true,
+                    symbol: 'none',
+                    lineStyle: { width: 2, color: accent },
+                    itemStyle: { color: accent },
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, y: 0, x2: 0, y2: 1,
+                            colorStops: [
+                                { offset: 0, color: accentSoft },
+                                { offset: 1, color: accentFade },
+                            ],
+                        },
+                    },
                 },
+            ];
+            if (data?.previous?.length) {
+                series.push({
+                    type: 'line',
+                    name: data?.previousLabel || 'Previous',
+                    data: data.previous,
+                    smooth: true,
+                    symbol: 'none',
+                    lineStyle: {
+                        width: 1.5,
+                        type: 'dashed',
+                        color: FxUtils.convertColorFromVariable('--text-placeholder', 1, { legacyCommaSyntax: true }),
+                    },
+                    itemStyle: { color: FxUtils.convertColorFromVariable('--text-placeholder', 1, { legacyCommaSyntax: true }) },
+                });
+            }
+            return {
+                tooltip: { trigger: 'axis' },
+                grid: { left: '3%', right: '4%', bottom: '8%', top: '10%', containLabel: true },
+                xAxis: { ...this.categoryAxis(data?.categories || []), boundaryGap: false },
+                yAxis: this.valueAxis(),
+                series,
             };
         },
         sunburst: (data, colors) => ({
@@ -279,7 +392,7 @@ class ChartComponent {
                     label: {
                         rotate: 'tangential',
                         fontSize: this.labelFontSize,
-                        fontFamily: this.labelFontFamily(),
+                        fontFamily: this.resolvedFontFamily(),
                         color: FxUtils.convertColorFromVariable('--text-primary'),
                         textBorderWidth: 0,
                         textBorderColor: 'transparent',
@@ -291,6 +404,19 @@ class ChartComponent {
     /* ================= PIE LAYOUT ================= */
     calcPieLayout(data) {
         const cw = this.containerWidth || 400;
+        if (!this.showPieLegend()) {
+            return {
+                legendOrient: 'vertical',
+                legendLeft: undefined,
+                legendRight: undefined,
+                legendTop: undefined,
+                legendBottom: undefined,
+                legendWidth: undefined,
+                pieCenter: ['50%', '50%'],
+                graphicLeft: '50%',
+                graphicTop: '50%',
+            };
+        }
         if (this.isMobile) {
             return {
                 legendOrient: 'horizontal',
@@ -351,6 +477,48 @@ class ChartComponent {
             ...this.options(),
         };
     }
+    categoryAxis(categories) {
+        return {
+            type: 'category',
+            data: categories,
+            axisLabel: {
+                fontFamily: this.resolvedFontFamily(),
+                fontSize: this.labelFontSize,
+                color: FxUtils.convertColorFromVariable('--text-secondary'),
+            },
+            axisLine: {
+                lineStyle: { color: FxUtils.convertColorFromVariable('--border-strong') },
+            },
+        };
+    }
+    valueAxis() {
+        return {
+            type: 'value',
+            axisLabel: {
+                fontFamily: this.resolvedFontFamily(),
+                fontSize: this.labelFontSize,
+                color: FxUtils.convertColorFromVariable('--text-secondary'),
+            },
+            splitLine: {
+                lineStyle: { color: FxUtils.convertColorFromVariable('--border-default') },
+            },
+        };
+    }
+    /** Canvas không ăn var() — resolve font stack thật tại render; chart đã
+        rebuild theo event theme-changed nên tự đổi font khi đổi theme
+        (blueprint/terminal dùng mono qua --og-font-figure). */
+    resolvedFontFamily() {
+        const override = this.labelFontFamily();
+        if (override)
+            return override;
+        // Dev-mode CSS pretty-printer bẻ dòng giá trị dài — normalize whitespace
+        // trước khi chuỗi này vào ctx.font của canvas.
+        const figure = getComputedStyle(document.body)
+            .getPropertyValue('--og-font-figure')
+            .replace(/\s+/g, ' ')
+            .trim();
+        return figure || 'Archivo, system-ui, sans-serif';
+    }
     resolvePalette() {
         const defaults = [
             'rgba(var(--success) / 1)',
@@ -374,12 +542,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 }, 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 } }, 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 {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  }\n</div>\n", styles: [":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}\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 }, 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 } }, 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 {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  }\n</div>\n", styles: [":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}\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 {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  }\n</div>\n", styles: [":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}\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 }] }], 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 }] }], 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 }] }], 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 }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }], chartInit: [{ type: i0.Output, args: ["chartInit"] }], onThemeChange: [{
                 type: HostListener,
                 args: ['window:theme-changed']
             }] } });