@foxeltech/angular-ui 0.7.83 → 0.7.103

package/src/lib/ui/components/master-detail/master-detail.component.html

@@ -1,40 +1,67 @@
-<!-- 3 cụm CHUNG chiều cao, mỗi cụm SCROLL RIÊNG (anh Tú chốt 03/09).
-     `items-stretch` + chiều cao đặt trên hàng (xem .fx-md-row trong CSS) để
-     cả ba pane bằng nhau; mỗi pane là flex-col + min-h-0 và chỉ phần thân
-     `overflow-auto flex-1` cuộn — header/filter/paginator đứng yên.
-     ⚠️ Hướng hàng + chiều cao do CONTAINER QUERY trong CSS quyết định (theo
-     bề rộng của chính hàng), KHÔNG phải `lg:flex-row`. Đừng thêm lại class
-     `lg:*` ở đây — `lg` trong lib là 1080px và viewport là proxy sai; xem
-     ghi chú đầu master-detail.component.css. -->
+<!-- ONE frame, three columns (designs 11/14/17): facets rail · list · detail,
+     separated by hairlines, sharing one height; only each pane's body scrolls.
+     Row direction / height come from the CONTAINER QUERY in the CSS (the row's
+     own width), never from `lg:*` — see the note at the top of the .css. -->
 <div
-  class="fx-md-row flex flex-col items-stretch gap-xl"
+  class="fx-md-row flex flex-col items-stretch"
+  [class.fx-md-row--rail-open]="railOpen()"
   [style.--fx-md-list-width]="listWidth()"
   [style.--fx-md-pane-h]="paneHeight()"
 >
-  <!-- Facets rail (V2 3-column lookup) — wrapper always rendered so ng-content
-       stays unconditional; hidden when the host projects nothing. -->
-  <div
-    class="fx-md-facets card-common bg-surface flex flex-col min-h-0"
+  <!-- Facets rail — collapsible (» / «), collapsed = 40px strip with the label
+       set vertically. The [mdFacets] projection is unconditional (hasFacets is
+       detected by querying it) and only hidden while collapsed. -->
+  <aside
+    class="fx-md-facets flex flex-col min-h-0 min-w-0"
     [class.hidden]="!hasFacets"
+    [class.fx-md-facets--open]="railOpen()"
   >
-    <div class="flex-1 min-h-0 overflow-auto pr-xs">
+    <div class="fx-md-rail-head flex items-center gap-small px-normal py-semi border-b border-border-subtle shrink-0" [class.hidden]="!railOpen()">
+      <button
+        type="button"
+        class="flex items-center justify-center w-6 h-6 rounded-control text-muted hover:bg-bg-hover shrink-0"
+        [attr.aria-label]="collapseFacetsLabel()"
+        (click)="railOpen.set(false)"
+      >
+        <fx-ui-hero-icon icon="chevron-double-left" [size]="14" class="flex" />
+      </button>
+      <span class="txt-eyebrow truncate">{{ facetsLabel() }}</span>
+    </div>
+    <div class="flex-1 min-h-0 overflow-auto px-normal py-normal" [class.hidden]="!railOpen()">
       <ng-content select="[mdFacets]"></ng-content>
     </div>
-  </div>
+    <button
+      type="button"
+      class="fx-md-rail-toggle flex items-center gap-normal text-muted hover:bg-bg-hover transition-colors"
+      [class.hidden]="railOpen()"
+      [attr.aria-label]="expandFacetsLabel()"
+      [attr.aria-expanded]="false"
+      (click)="railOpen.set(true)"
+    >
+      <fx-ui-hero-icon icon="chevron-double-right" [size]="14" class="flex shrink-0" />
+      <span class="fx-md-rail-label txt-eyebrow whitespace-nowrap">{{ facetsLabel() }}</span>
+    </button>
+  </aside>
 
   <!-- Master: list pane -->
-  <div class="fx-md-list card-common flex flex-col min-h-0">
-    <ng-content select="[mdHeader]"></ng-content>
-    <ng-content select="[mdFilters]"></ng-content>
+  <section class="fx-md-list flex flex-col min-h-0 min-w-0">
+    <div class="fx-md-list-head px-large pt-large pb-small border-b border-border-subtle shrink-0">
+      <ng-content select="[mdHeader]"></ng-content>
+      <ng-content select="[mdFilters]"></ng-content>
+    </div>
     <div
-      class="flex flex-col gap-normal overflow-auto pr-xs flex-1 min-h-0"
+      class="flex flex-col overflow-auto flex-1 min-h-0"
       role="listbox"
       [attr.aria-label]="listLabel() || null"
     >
       @if (table.loading) {
-        <fx-ui-skeleton-list [rows]="table.pageSize"></fx-ui-skeleton-list>
+        <div class="px-large py-normal">
+          <fx-ui-skeleton-list [rows]="table.pageSize"></fx-ui-skeleton-list>
+        </div>
       } @else {
         @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {
+          <!-- Hairline rows; the selected one is tinted with an accent bar on
+               the left (design 11/14 selected finding / component). -->
           <button
             type="button"
             role="option"
@@ -43,11 +70,11 @@
             [tabindex]="isSelected(row) ? 0 : -1"
             (click)="table.selectItem(row)"
             (keydown)="onKeydown($event, i)"
-            class="text-left rounded-lg border p-semi transition-colors"
+            class="text-left px-large py-semi border-l-2 border-b border-b-border-subtle transition-colors"
             [ngClass]="
               isSelected(row)
-                ? 'border-accent bg-accent-soft/60'
-                : 'border-border-default hover:border-border-interactive bg-bg-primary'
+                ? 'border-l-accent bg-accent-soft/60'
+                : 'border-l-transparent hover:bg-surface-sunken'
             "
           >
             <ng-container
@@ -57,7 +84,9 @@
           </button>
         }
         @if (!table.dataSource.data.length) {
-          <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
+          <div class="px-large py-large">
+            <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
+          </div>
         }
       }
     </div>
@@ -65,14 +94,14 @@
          whose own BaseTable subscription (running after this child's hook)
          wires page events — a binding here would double-fetch every change. -->
     <mat-paginator
-      class="mt-normal"
+      class="fx-md-paginator"
       [class.fx-md-paginator-hidden]="paginationStyle() === 'prevnext'"
       [length]="table.total"
       [pageSize]="table.pageSize"
       [pageSizeOptions]="pageSizeOptions()"
     ></mat-paginator>
     @if (paginationStyle() === 'prevnext') {
-      <div class="flex items-center justify-between mt-normal">
+      <div class="flex items-center justify-between gap-normal px-large py-normal border-t border-border-subtle shrink-0">
         <span class="txt-utility-description" style="font-family: var(--og-font-figure)">
           {{ rangeText() }}
         </span>
@@ -96,25 +125,25 @@
         </div>
       </div>
     }
-  </div>
+  </section>
 
   <!-- Detail pane -->
-  <div class="fx-md-detail w-full min-w-0 flex flex-col min-h-0">
-    <div class="flex-1 min-h-0 overflow-auto">
-    @if (table.selected) {
-      @if (table.detailBusy) {
-        <fx-ui-skeleton-detail [cards]="skeletonCards()"></fx-ui-skeleton-detail>
+  <section class="fx-md-detail w-full min-w-0 flex flex-col min-h-0">
+    <div class="flex-1 min-h-0 overflow-auto px-large py-large">
+      @if (table.selected) {
+        @if (table.detailBusy) {
+          <fx-ui-skeleton-detail [cards]="skeletonCards()"></fx-ui-skeleton-detail>
+        } @else {
+          <ng-container
+            [ngTemplateOutlet]="detailTemplate()"
+            [ngTemplateOutletContext]="{ $implicit: table.detail, selected: table.selected }"
+          ></ng-container>
+        }
       } @else {
-        <ng-container
-          [ngTemplateOutlet]="detailTemplate()"
-          [ngTemplateOutletContext]="{ $implicit: table.detail, selected: table.selected }"
-        ></ng-container>
+        <div class="flex items-center justify-center h-full min-h-[300px]">
+          <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
+        </div>
       }
-    } @else {
-      <div class="card-common flex items-center justify-center h-full min-h-[300px]">
-        <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
-      </div>
-    }
     </div>
-  </div>
+  </section>
 </div>

package/src/lib/ui/components/route-skeleton/route-skeleton.component.css

@@ -16,7 +16,7 @@
 
 /* Ngưỡng + bề rộng panes giữ y hệt master-detail để skeleton không nhảy hình
    khi dữ liệu về. */
-@container fx-rs (min-width: 968px) {
+@container fx-rs (min-width: 720px) {
   .fx-rs-row {
     flex-direction: row;
     align-items: stretch;

package/src/lib/ui/components/segmented/segmented.component.html

@@ -14,6 +14,8 @@
       [style.transform]="thumbTransform()"
     ></span>
   }
+  <!-- option 30px tall (7px × 18px padding): the text-box trim below collapses the
+       glyph box to ~8px, so padding alone left the pill at 22px (anh Tú 04/09) -->
   @for (option of options(); track option.value) {
     <button
       #opt
@@ -21,7 +23,7 @@
       (click)="select(option)"
       [disabled]="option.disabled"
       [attr.aria-pressed]="option.value === value()"
-      class="relative z-[1] flex min-w-0 items-center justify-center gap-xs px-semi py-[5px] rounded-full text-[13px] leading-none font-medium whitespace-nowrap transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="relative z-[1] flex min-w-0 min-h-[30px] items-center justify-center gap-xs px-[18px] py-[7px] rounded-full text-[13px] leading-none font-medium whitespace-nowrap transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
       [class]="optionClass(option)"
     >
       @if (option.icon) {

package/src/lib/ui/components/severity-badges/severity-badges.component.html

@@ -2,7 +2,7 @@
   @for (badge of badges; track badge.key) {
     <button
       type="button"
-      class="px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50"
+      class="px-2 py-[3px] rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50"
       [ngClass]="badgeClass(badge)"
       [attr.aria-label]="badge.key + ': ' + badge.label"
       (click)="badgeClick.emit(badge.key)"

package/src/lib/ui/components/stat-cards/stat-cards.component.css

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+  container-type: inline-size;
+}
+
+/* Explicit `cols` only holds from md (720px) up; narrower containers fall back
+   to 2-up, then 1-up — figures stay readable on phones (anh Tú 04/09). The
+   inline style carries the wide layout, so the overrides need !important. */
+@container (width < 720px) {
+  .fx-stat-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+}
+@container (width < 360px) {
+  .fx-stat-grid {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+}

package/src/lib/ui/components/stat-cards/stat-cards.component.html

@@ -1,4 +1,4 @@
-<div class="grid gap-normal" [ngStyle]="{ 'grid-template-columns': gridColumns }">
+<div class="fx-stat-grid grid gap-normal" [ngStyle]="{ 'grid-template-columns': gridColumns }">
   @for (card of cards(); track card.label) {
     @if (variant() === 'figure') {
       <div class="card-common flex flex-col gap-small min-w-0">
@@ -7,7 +7,7 @@
           class="txt-heading-03"
           [ngClass]="numClass(card)"
           style="font-family: var(--og-font-figure)"
-          >{{ card.value }}</span
+          ><span [fxCountUp]="card.value"></span></span
         >
         @if (card.sub) {
           <span class="txt-utility-caption" [ngClass]="subClass(card)">{{ card.sub }}</span>
@@ -32,7 +32,7 @@
               class="txt-heading-04"
               [ngClass]="numClass(card)"
               style="font-family: var(--og-font-figure)"
-              >{{ card.value }}</span
+              ><span [fxCountUp]="card.value"></span></span
             >
             @if (card.delta) {
               <span class="text-xs font-semibold" [ngClass]="deltaClass(card)">

package/types/foxeltech-angular-ui-chart.d.ts

@@ -37,6 +37,8 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
      * dom.". Chỉ dựng directive khi đã có options thật ⇒ đúng một lần init.
      */
     hasOptions: boolean;
+    /** Heights (%) of the pre-init placeholder bars — a fixed, calm silhouette. */
+    readonly placeholderBars: number[];
     labelFontSize: number;
     private chartInstance?;
     private resizeObserver?;
@@ -62,6 +64,24 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     private pendingFrames;
     private isMobile;
     private containerWidth;
+    private containerHeight;
+    /**
+     * 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).
+     */
+    private appearUntil;
+    private static readonly APPEAR_MS;
+    private 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ờ.
+     */
+    private pendingResize;
+    private pendingMobile;
     constructor(ref: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnChanges(): void;
@@ -93,30 +113,29 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     onChartClick(event: any): void;
     onChartInit(raw: any): void;
     /**
-     * @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).
      */
-    private updateResponsiveState;
+    private measure;
+    /** Animation xuất hiện vừa bắt đầu — khoá resize tới khi nó xong. */
+    private markAppear;
+    /** Pie/sunburst đặt legend + số giữa theo px của containerWidth → phải dựng lại. */
+    private needsLayoutRebuild;
+    private deferResize;
     /**
-     * ⚠️ 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**.
+     * Phản ứng với kích thước host (RO, sau init, sau khi hiện lại).
      *
-     * Đườ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.
-     *
-     * `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.
      */
     private forceMediaRecalc;
     private rebuildChart;
@@ -136,5 +155,20 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartComponent, "fx-ui-chart", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "pieLegendAlign": { "alias": "pieLegendAlign"; "required": false; "isSignal": true; }; "pieLegendPosition": { "alias": "pieLegendPosition"; "required": false; "isSignal": true; }; "showPieLabel": { "alias": "showPieLabel"; "required": false; "isSignal": true; }; "showPieLegend": { "alias": "showPieLegend"; "required": false; "isSignal": true; }; "pieCenterLabel": { "alias": "pieCenterLabel"; "required": false; "isSignal": true; }; "mobileWidth": { "alias": "mobileWidth"; "required": false; "isSignal": true; }; "labelFontFamily": { "alias": "labelFontFamily"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, { "chartClick": "chartClick"; "chartInit": "chartInit"; }, never, never, true, never>;
 }
 
-export { ChartComponent };
+/**
+ * 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.
+ */
+declare function preloadEcharts(): Promise<unknown>;
+/** Schedule `preloadEcharts()` when the main thread is idle (SSR/tests: no-op). */
+declare function preloadEchartsWhenIdle(timeoutMs?: number): void;
+
+export { ChartComponent, preloadEcharts, preloadEchartsWhenIdle };
 export type { IChartType };

package/types/foxeltech-angular-ui-flow.d.ts

@@ -52,6 +52,13 @@ declare class FlowCanvasComponent {
     /** Caller-translated hint shown when the graph is empty. */
     readonly emptyText: _angular_core.InputSignal<string>;
     readonly nodeClick: _angular_core.OutputEmitterRef<string>;
+    private readonly flow;
+    private readonly host;
+    private readonly destroyRef;
+    constructor();
+    private fitHandle;
+    /** Coalesces fit requests into one frame after vflow has measured its nodes. */
+    private scheduleFit;
     /** Column index per node: pinned value, else longest path from a source. */
     private readonly columns;
     /** ngx-vflow nodes: html-template cards positioned by the derived layout. */