@foxeltech/angular-ui 0.7.83 → 0.7.103

package/components.css

@@ -361,6 +361,14 @@ input[type='password'] {
     inset 0 0 0 1px rgb(0 0 0 / 0.08),
     0 1px 2px rgb(0 0 0 / 0.12);
 }
+/* Icon-only button (no label): square h-8 × w-8, no side padding, so the
+   glyph sits dead-centre (anh Tú 04/09). Consumers may still size it with
+   utilities (`w-9 h-9`) — those win in the utilities layer. */
+.fx-btn--icon {
+  width: 2rem;
+  padding-left: 0;
+  padding-right: 0;
+}
 /* Nút hành động chính theo demo (`.bi-newbtn`): màu cố định, không phải accent. */
 /* ---- Tông severity theo ĐÚNG mô hình demo (đo 03/09) -----------------
    Demo KHÔNG tô badge bằng màu rực. Nó dùng token semantic, và bậc nặng
@@ -755,6 +763,17 @@ input[type='password'] {
   max-height: calc(100vh - 315px);
   overflow: auto;
 }
+/* Phones: a data table must not squeeze its columns to a few px per cell —
+   give it a floor and let .table-page-container scroll it sideways
+   (anh Tú 04/09 mobile audit: Name column collapsed to one character/line). */
+@media (max-width: 719px) {
+  /* !important like the other .mat-mdc-table overrides above: this file is
+     imported into a cascade @layer, so an unlayered Material rule
+     (`.mat-mdc-table{min-width:100%}`) beats it whatever the specificity. */
+  .mat-mdc-table {
+    min-width: 640px !important;
+  }
+}
 .table-cell-padding {
   padding-top: 8px !important;
   padding-bottom: 8px !important;
@@ -790,8 +809,28 @@ input[type='password'] {
       rgb(var(--gradient-primary-end))
     ) border-box;
 }
+/* Skeleton block = the design's `.bi-sk` shimmer ("Loading States", 04/09):
+   text at 7% → 13% → 7% sweeping left→right over 1.15 s, 6px radius. One
+   rule for every skeleton in the product — route skeleton, table cells,
+   dashboard cards — so the boot splash, route and in-panel states match. */
 .skeleton-load {
-  @apply rounded bg-track animate-pulse motion-reduce:animate-none;
+  display: block;
+  border-radius: 6px;
+  background: linear-gradient(
+    90deg,
+    rgb(var(--og-text) / 0.07) 0px,
+    rgb(var(--og-text) / 0.13) 90px,
+    rgb(var(--og-text) / 0.07) 180px
+  );
+  background-size: 400px 100%;
+  animation: fx-shimmer 1.15s linear infinite;
+}
+@keyframes fx-shimmer {
+  0% { background-position: -260px 0; }
+  100% { background-position: 260px 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-load { animation: none; background: rgb(var(--og-text) / 0.08); }
 }
 
 /* ============================================================================

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

@@ -41,6 +41,8 @@ class ChartComponent {
      * dom.". Chỉ dựng directive khi đã có options thật ⇒ đúng một lần init.
      */
     hasOptions = false;
+    /** Heights (%) of the pre-init placeholder bars — a fixed, calm silhouette. */
+    placeholderBars = [34, 52, 44, 66, 58, 78, 70, 88, 62, 74];
     labelFontSize = 12;
     chartInstance;
     resizeObserver;
@@ -66,6 +68,24 @@ class ChartComponent {
     pendingFrames = new Set();
     isMobile = false;
     containerWidth = 0;
+    containerHeight = 0;
+    /**
+     * Mốc (performance.now) mà animation "xuất hiện" của lần setOption gần nhất
+     * chắc chắn đã xong. ECharts mặc định animationDuration 1000ms; trong khoảng
+     * này KHÔNG được `resize()` — resize nhảy thẳng tới trạng thái cuối và giết
+     * animation (đo 05/09: chart PM bị cắt ở ~800ms khi thanh cuộn xuất hiện
+     * lúc lưới card nạp xong làm bề rộng đổi 720→710).
+     */
+    appearUntil = 0;
+    static APPEAR_MS = 1100;
+    deferTimer;
+    /**
+     * Thay đổi kích thước ghi nhận TRONG cửa sổ appear, chờ áp sau. `measure()`
+     * đã cập nhật containerWidth/Height ngay lúc đo, nên lần gọi hoãn không thể
+     * dựa vào "có đổi không" nữa — phải nhớ bằng cờ.
+     */
+    pendingResize = false;
+    pendingMobile = false;
     constructor(ref, cdr) {
         this.ref = ref;
         this.cdr = cdr;
@@ -76,24 +96,27 @@ class ChartComponent {
         this.intersectionObserver = new IntersectionObserver(([entry]) => {
             if (entry.isIntersecting && !this.canInit && !this.destroyed) {
                 this.canInit = true;
-                this.updateResponsiveState();
+                this.measure();
                 this.rebuildChart();
                 this.cdr.detectChanges();
             }
         }, { threshold: 0.1 });
         this.intersectionObserver.observe(this.ref.nativeElement);
-        // Resize-safe (tabs, flex, async layout)
+        // Resize-safe (tabs, flex, async layout). Đây là ĐƯỜNG RESIZE DUY NHẤT:
+        // `autoResize` của NgxEchartsDirective đã tắt trong template — nó
+        // 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).
         this.resizeObserver = new ResizeObserver(() => {
             if (!this.canInit || this.destroyed)
                 return;
-            // forceMediaRecalc tự đo lại và chỉ dựng lại khi kích thước đổi.
             this.forceMediaRecalc();
         });
         this.resizeObserver.observe(this.ref.nativeElement);
     }
     ngOnChanges() {
         if (this.canInit && !this.destroyed) {
-            this.updateResponsiveState();
+            this.measure();
             this.rebuildChart();
         }
     }
@@ -106,6 +129,9 @@ class ChartComponent {
         for (const id of this.pendingFrames)
             cancelAnimationFrame(id);
         this.pendingFrames.clear();
+        if (this.deferTimer !== undefined)
+            clearTimeout(this.deferTimer);
+        this.deferTimer = undefined;
         this.resizeObserver?.disconnect();
         this.intersectionObserver?.disconnect();
         this.resizeObserver = undefined;
@@ -209,63 +235,91 @@ class ChartComponent {
                 chart.setOption(options, true);
             }
         }
+        // Lần vẽ đầu (directive setOption lúc init) cũng có animation xuất hiện.
+        this.markAppear();
         this.chartInit.emit(chart);
         this.schedule(() => this.forceMediaRecalc());
     }
     /* ================= CORE FIX ================= */
     /**
-     * @returns true nếu trạng thái responsive THỰC SỰ đổi (nên dựng lại options).
-     *
-     * Trả về boolean là điều then chốt cho animation lúc chart xuất hiện — xem
-     * ghi chú ở `forceMediaRecalc`.
+     * Đo host và ghi lại; trả về CÁI GÌ đổi so với lần đo trước.
+     * Khi bị ẩn (0×0) thì KHÔNG ghi — giữ kích thước hiển thị cuối, để lúc hiện
+     * lại cùng cỡ thì coi như không đổi (không resize, không cắt animation).
      */
-    updateResponsiveState() {
-        const { width } = this.ref.nativeElement.getBoundingClientRect();
-        if (width <= 0)
-            return false;
+    measure() {
+        const { width, height } = this.ref.nativeElement.getBoundingClientRect();
+        if (width <= 0 || height <= 0)
+            return { size: false, mobile: false };
         const isMobile = width < this.mobileWidth();
-        const changed = width !== this.containerWidth || isMobile !== this.isMobile;
+        const size = width !== this.containerWidth || height !== this.containerHeight;
+        const mobile = isMobile !== this.isMobile;
         this.containerWidth = width;
+        this.containerHeight = height;
         this.isMobile = isMobile;
-        return changed;
+        return { size, mobile };
+    }
+    /** Animation xuất hiện vừa bắt đầu — khoá resize tới khi nó xong. */
+    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. */
+    needsLayoutRebuild() {
+        const type = this.detectType();
+        return type === 'pie' || type === 'sunburst';
+    }
+    deferResize(ms) {
+        if (this.deferTimer !== undefined)
+            clearTimeout(this.deferTimer);
+        this.deferTimer = setTimeout(() => {
+            this.deferTimer = undefined;
+            if (!this.destroyed)
+                this.forceMediaRecalc();
+        }, ms);
     }
     /**
-     * ⚠️ CHỈ dựng lại options khi kích thước thật sự đổi — nếu không thì
-     * **animation lúc chart xuất hiện bị giết**.
-     *
-     * Đường đi: `onChartInit` → schedule(forceMediaRecalc) → chạy ở frame KẾ
-     * TIẾP. Nếu chỗ này vô điều kiện `rebuildChart()` (clear + setOption notMerge)
-     * thì nó xoá sạch và vẽ lại từ đầu ~16ms sau lần vẽ đầu, trong khi animation
-     * xuất hiện dài ~1000ms ⇒ người dùng thấy chart hiện ra đứng im.
-     *
-     * Đo được: lần xuất hiện đầu 1/12 frame khác nhau (đứng yên) trong khi vẽ lại
-     * bằng `theme-changed` cho 9/12 → animation của ECharts vẫn bật, chỉ lần đầu
-     * bị cắt.
-     *
-     * Trước Pha 0 lỗi này bị che: lần init đầu dùng `chartOptions = {}` nên
-     * animation xuất hiện xảy ra ở lần cập nhật SAU, tức sau khi forceMediaRecalc
-     * đã chạy xong. Cổng `hasOptions` đưa options thật về ngay lần init nên lộ ra.
+     * Phản ứng với kích thước host (RO, sau init, sau khi hiện lại).
      *
-     * `resize()` thì luôn gọi được — nó không cắt animation.
+     * Ba quy tắc, đều đo được (0.7.75 và 05/09):
+     * 1. **Ẩn (0×H) thì không làm gì** — không resize canvas về 0. Chart hiện
+     *    lại cùng cỡ thì animation đã bắt đầu lúc ẩn (setOption khi resolver về,
+     *    ngay trước NavigationEnd) chạy tiếp bình thường.
+     * 2. **`resize()` nhảy thẳng tới trạng thái cuối** ⇒ trong cửa sổ appear
+     *    (`appearUntil`) thì HOÃN, đo lại và xử lý sau khi animation xong. Không
+     *    dựng lại (clear + setOption) lúc đó vì đó là "vẽ 2 lần" theo cách khác.
+     * 3. Ngoài cửa sổ: `resize()` trước, rồi chỉ dựng lại khi preset đổi (mobile)
+     *    hoặc loại chart đặt layout theo px (pie/sunburst). Thứ tự này quan
+     *    trọng: resize SAU rebuild sẽ cắt ngay animation vừa bắt đầu.
      */
     forceMediaRecalc(retry = 0) {
         if (!this.liveChart)
             return;
         const { width, height } = this.ref.nativeElement.getBoundingClientRect();
-        if ((width === 0 || height === 0) && retry < 10) {
-            this.schedule(() => this.forceMediaRecalc(retry + 1));
+        if (width === 0 || height === 0) {
+            // Chưa layout xong (ngay sau init) thì thử lại vài frame; đang ẩn thì thôi.
+            if (retry < 10)
+                this.schedule(() => this.forceMediaRecalc(retry + 1));
             return;
         }
-        // ⚠️ `resize()` cũng phải CÓ ĐIỀU KIỆN. ECharts nhảy thẳng tới trạng thái
-        // cuối khi resize, nên gọi nó ở frame ngay sau init sẽ CẮT animation lúc
-        // chart xuất hiện — đo được: 3 lần đổi khung trong 200ms rồi đứng im, dù
-        // đã đặt animationDuration 3000ms.
-        // Không cần resize ở lần đầu: ECharts tự lấy kích thước khi init, và vòng
-        // retry ở trên đã lo ca width/height = 0.
-        if (!this.updateResponsiveState())
+        const change = this.measure();
+        const size = change.size || this.pendingResize;
+        const mobile = change.mobile || this.pendingMobile;
+        if (!size && !mobile)
             return;
-        this.rebuildChart();
-        this.liveChart?.resize();
+        const remaining = this.appearUntil - performance.now();
+        if (remaining > 0) {
+            this.pendingResize = size;
+            this.pendingMobile = mobile;
+            this.deferResize(remaining + 30);
+            return;
+        }
+        this.pendingResize = false;
+        this.pendingMobile = false;
+        const chart = this.liveChart;
+        if (!chart)
+            return;
+        chart.resize();
+        if (mobile || this.needsLayoutRebuild())
+            this.rebuildChart();
     }
     rebuildChart() {
         if (this.destroyed)
@@ -293,6 +347,7 @@ class ChartComponent {
         this.hasOptions = true;
         chart.clear();
         chart.setOption(options, true);
+        this.markAppear();
     }
     checkEmpty() {
         const type = this.detectType();
@@ -715,19 +770,47 @@ 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 }, 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 if (hasOptions) {\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 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      [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"] }]
+            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 }] }], 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']
             }] } });
 
+let pending;
+/**
+ * Warm the echarts chunk before any chart is on screen.
+ *
+ * `fx-ui-chart` loads echarts lazily (`provideEchartsCore({ echarts: () =>
+ * import('echarts') })`), so the FIRST chart of a session pays the chunk
+ * download right when the user is looking at an empty panel. Call this once
+ * from an idle callback when the app's env injector is created (e.g. a
+ * `provideEnvironmentInitializer` in the remote's root route) and the dashboard
+ * charts appear on the frame they mount. Same module URL as the directive's
+ * import ⇒ one shared instance, no double load.
+ */
+function preloadEcharts() {
+    return (pending ??= import('echarts'));
+}
+/** Schedule `preloadEcharts()` when the main thread is idle (SSR/tests: no-op). */
+function preloadEchartsWhenIdle(timeoutMs = 3000) {
+    if (typeof window === 'undefined')
+        return;
+    const w = window;
+    if (typeof w.requestIdleCallback === 'function') {
+        w.requestIdleCallback(() => void preloadEcharts(), { timeout: timeoutMs });
+    }
+    else {
+        setTimeout(() => void preloadEcharts(), 1500);
+    }
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ChartComponent };
+export { ChartComponent, preloadEcharts, preloadEchartsWhenIdle };
 //# sourceMappingURL=foxeltech-angular-ui-chart.mjs.map