@foxeltech/angular-ui 0.7.44 → 0.7.75

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

@@ -1,17 +1,33 @@
-<div class="flex flex-col lg:flex-row items-start gap-xl" [style.--fx-md-list-width]="listWidth()">
+<!-- 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. -->
+<div
+  class="fx-md-row flex flex-col items-stretch gap-xl"
+  [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" [class.hidden]="!hasFacets">
-    <ng-content select="[mdFacets]"></ng-content>
+  <div
+    class="fx-md-facets card-common bg-surface flex flex-col min-h-0"
+    [class.hidden]="!hasFacets"
+  >
+    <div class="flex-1 min-h-0 overflow-auto pr-xs">
+      <ng-content select="[mdFacets]"></ng-content>
+    </div>
   </div>
 
   <!-- Master: list pane -->
-  <div class="fx-md-list card-common">
+  <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>
     <div
-      class="flex flex-col gap-normal overflow-auto pr-xs"
-      [style.maxHeight]="maxListHeight()"
+      class="flex flex-col gap-normal overflow-auto pr-xs flex-1 min-h-0"
       role="listbox"
       [attr.aria-label]="listLabel() || null"
     >
@@ -83,7 +99,8 @@
   </div>
 
   <!-- Detail pane -->
-  <div class="w-full lg:flex-1 min-w-0">
+  <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>
@@ -94,9 +111,10 @@
         ></ng-container>
       }
     } @else {
-      <div class="card-common flex items-center justify-center h-[300px]">
+      <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>
 </div>

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

@@ -0,0 +1,38 @@
+/* Cùng cơ chế với master-detail: hàng 3 cụm quyết định theo BỀ RỘNG CỦA CHÍNH
+   NÓ (container query), không theo viewport. Nếu chỗ này còn dùng `lg:` thì
+   skeleton và màn thật sẽ lật ở hai ngưỡng khác nhau — xem ghi chú đầu
+   master-detail.component.css. */
+:host {
+  display: block;
+  container-type: inline-size;
+  container-name: fx-rs;
+}
+
+.fx-rs-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl, 1.5rem);
+}
+
+/* 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) {
+  .fx-rs-row {
+    flex-direction: row;
+    align-items: stretch;
+    height: calc(100vh - 300px);
+    min-height: 420px;
+  }
+
+  .fx-rs-facets {
+    flex: 0 1 230px;
+    min-width: 200px;
+    max-width: 260px;
+  }
+
+  .fx-rs-list {
+    flex: 0 1 420px;
+    min-width: 320px;
+    max-width: 420px;
+  }
+}

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

@@ -0,0 +1,184 @@
+<div class="w-full flex flex-col gap-xl">
+  @for (b of blocks(); track $index) {
+    @switch (b.kind) {
+      @case ('heading') {
+        <div data-fx-skel="heading" class="flex flex-col md:flex-row md:items-start justify-between gap-normal">
+          <div class="flex flex-col gap-small">
+            <div class="skeleton-load h-7 w-64"></div>
+            <div class="skeleton-load h-3 w-32"></div>
+          </div>
+          @if (items(b, 2).length) {
+            <div class="flex items-center gap-normal">
+              @for (a of items(b, 2); track a) {
+                <div class="skeleton-load h-9 rounded-lg" [class]="a === 0 ? 'w-28' : 'w-32'"></div>
+              }
+            </div>
+          }
+        </div>
+      }
+
+      @case ('toolbar') {
+        <div data-fx-skel="toolbar" class="flex flex-wrap items-center gap-normal">
+          <div class="skeleton-load h-9 w-72 rounded-lg"></div>
+          @for (f of items(b, 2); track f) {
+            <div class="skeleton-load h-7 rounded-full" [class]="f % 2 ? 'w-24' : 'w-20'"></div>
+          }
+        </div>
+      }
+
+      @case ('table') {
+        <!-- Bảng: mỗi Ô là một `.skeleton-load` riêng, đúng cách
+             `fx-ui-table-cell [loading]` làm trên bảng thật. -->
+        <div data-fx-skel="table" class="card-common overflow-x-auto">
+          <table class="w-full">
+            <thead>
+              <tr class="border-b border-border-default">
+                @for (c of cols(b); track c) {
+                  <th class="px-normal py-semi text-left">
+                    <div class="skeleton-load h-3" [style.width.%]="headWidth(c)"></div>
+                  </th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (r of rows(b); track r) {
+                <tr class="border-b border-border-subtle">
+                  @for (c of cols(b); track c) {
+                    <td class="px-normal py-semi align-middle">
+                      <div class="skeleton-load h-4" [style.width.%]="cellWidth(r, c)"></div>
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+
+      @case ('stat-cards') {
+        <div data-fx-skel="stat-cards" class="grid gap-normal grid-cols-2 md:grid-cols-4">
+          @for (i of items(b, 4); track i) {
+            <div class="card-common flex flex-col gap-normal">
+              <div class="skeleton-load h-3 w-16"></div>
+              <div class="skeleton-load h-8 w-24"></div>
+              <div class="skeleton-load h-3 w-20"></div>
+            </div>
+          }
+        </div>
+      }
+
+      @case ('kpi-strip') {
+        <!-- MỘT card chia cột (kiểu app-dash-kpi-row), không phải các tile rời -->
+        <div data-fx-skel="kpi-strip" class="card-common !p-0">
+          <div class="grid grid-cols-2 md:grid-cols-4">
+            @for (i of items(b, 4); track i) {
+              <div
+                class="flex flex-col gap-normal px-xl py-large border-border-subtle"
+                [class.border-l]="!$first"
+              >
+                <div class="skeleton-load h-3 w-20"></div>
+                <div class="skeleton-load h-9 w-28"></div>
+                <div class="skeleton-load h-3 w-24"></div>
+              </div>
+            }
+          </div>
+        </div>
+      }
+
+      @case ('panels') {
+        <div data-fx-skel="panels" class="grid gap-xl" [class]="gridClass(b)">
+          @for (i of items(b, 2); track i) {
+            <div class="card-common flex flex-col gap-large">
+              <div class="skeleton-load h-4 w-1/3"></div>
+              <div class="flex items-end gap-normal h-40">
+                @for (x of bars; track x) {
+                  <div class="skeleton-load flex-1 rounded-t" [style.height.%]="barHeight(x)"></div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      }
+
+      @case ('cards') {
+        <div data-fx-skel="cards" class="grid gap-xl" [class]="gridClass(b)">
+          @for (i of items(b, 6); track i) {
+            <div class="card-common flex flex-col gap-normal">
+              <div class="flex items-center gap-normal">
+                <div class="skeleton-load w-9 h-9 rounded-lg shrink-0"></div>
+                <div class="flex flex-col gap-small flex-1 min-w-0">
+                  <div class="skeleton-load h-4 w-3/4"></div>
+                  <div class="skeleton-load h-3 w-1/2"></div>
+                </div>
+                <div class="skeleton-load h-5 w-14 rounded-full shrink-0"></div>
+              </div>
+              <div class="grid grid-cols-4 gap-normal pt-normal border-t border-border-subtle">
+                @for (m of [0, 1, 2, 3]; track m) {
+                  <div class="flex flex-col gap-small">
+                    <div class="skeleton-load h-2.5 w-full"></div>
+                    <div class="skeleton-load h-4 w-2/3"></div>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      }
+
+      @case ('card') {
+        <div data-fx-skel="card" class="card-common flex flex-col gap-large">
+          <div class="skeleton-load h-4 w-1/3"></div>
+          <div class="flex flex-col gap-normal">
+            @for (r of [0, 1, 2, 3]; track r) {
+              <div class="skeleton-load h-3" [style.width.%]="cellWidth(r, 1)"></div>
+            }
+          </div>
+        </div>
+      }
+
+      @case ('tabs') {
+        <div data-fx-skel="tabs" class="flex items-center gap-large border-b border-border-default pb-normal">
+          @for (t of items(b, 6); track t) {
+            <div class="flex items-center gap-small">
+              <div class="skeleton-load w-4 h-4"></div>
+              <div class="skeleton-load h-3 w-16"></div>
+            </div>
+          }
+        </div>
+      }
+
+      @case ('facets') {
+        <div data-fx-skel="facets" class="fx-rs-row">
+          <div class="fx-rs-facets card-common overflow-hidden">
+            <fx-ui-skeleton-facets />
+          </div>
+          <div class="fx-rs-list card-common overflow-hidden">
+            <fx-ui-skeleton-list [rows]="6" />
+          </div>
+          <div class="flex-1 min-w-0 overflow-hidden">
+            <fx-ui-skeleton-detail />
+          </div>
+        </div>
+      }
+
+      @case ('detail') {
+        <fx-ui-skeleton-detail data-fx-skel="detail" />
+      }
+
+      @case ('form') {
+        <div data-fx-skel="form" class="card-common flex flex-col gap-large">
+          @for (r of [0, 1, 2, 3]; track r) {
+            <div class="flex flex-col gap-small">
+              <div class="skeleton-load h-3 w-24"></div>
+              <div class="skeleton-load h-9 w-full rounded-lg"></div>
+            </div>
+          }
+          <div class="flex justify-end gap-normal">
+            <div class="skeleton-load h-9 w-24 rounded-lg"></div>
+            <div class="skeleton-load h-9 w-28 rounded-lg"></div>
+          </div>
+        </div>
+      }
+    }
+  }
+</div>

package/src/lib/ui/components/section-card/section-card.component.html

@@ -1,11 +1,7 @@
 <div class="card-common">
   @if (titleStyle() === 'eyebrow') {
     <div class="flex items-baseline justify-between gap-normal mb-large">
-      <span
-        class="txt-table-header uppercase"
-        style="letter-spacing: var(--og-tracking-label)"
-        >{{ title() }}</span
-      >
+      <span class="txt-eyebrow">{{ title() }}</span>
       @if (aside()) {
         <span class="txt-utility-description text-right">{{ aside() }}</span>
       }

package/src/lib/ui/components/skeleton-dashboard/skeleton-dashboard.component.html

@@ -0,0 +1,24 @@
+<div class="flex flex-col gap-xl">
+  <div class="grid gap-xl grid-cols-2 md:grid-cols-4">
+    @for (k of kpiList(); track k) {
+      <div class="card-common flex flex-col gap-normal">
+        <div class="h-3 w-16 rounded skeleton-load"></div>
+        <div class="h-7 w-24 rounded skeleton-load"></div>
+        <div class="h-3 w-20 rounded skeleton-load"></div>
+      </div>
+    }
+  </div>
+
+  <div class="grid gap-xl grid-cols-1 md:grid-cols-2">
+    @for (p of panelList(); track p) {
+      <div class="card-common flex flex-col gap-large">
+        <div class="h-4 w-1/3 rounded skeleton-load"></div>
+        <div class="flex items-end gap-normal h-40">
+          @for (b of barList(); track b) {
+            <div class="flex-1 rounded-t skeleton-load" [style.height.%]="barHeight(b)"></div>
+          }
+        </div>
+      </div>
+    }
+  </div>
+</div>

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

@@ -1,20 +1,20 @@
-<div class="flex flex-col gap-xl animate-pulse">
+<div class="flex flex-col gap-xl">
   <div class="card-common">
     <div class="flex items-start gap-normal">
-      <div class="w-10 h-10 rounded-lg bg-bg-hover shrink-0"></div>
+      <div class="w-10 h-10 rounded-lg skeleton-load shrink-0"></div>
       <div class="flex-1 min-w-0 flex flex-col gap-normal">
-        <div class="h-5 w-1/2 rounded bg-bg-hover"></div>
-        <div class="h-3 w-3/4 rounded bg-bg-hover"></div>
+        <div class="h-5 w-1/2 rounded skeleton-load"></div>
+        <div class="h-3 w-3/4 rounded skeleton-load"></div>
       </div>
     </div>
   </div>
 
-  @for (c of range(cards()); track c) {
+  @for (c of cardList(); track c) {
     <div class="card-common flex flex-col gap-large">
-      <div class="h-4 w-1/3 rounded bg-bg-hover"></div>
+      <div class="h-4 w-1/3 rounded skeleton-load"></div>
       <div class="flex flex-col gap-normal">
-        @for (r of range(rows()); track r) {
-          <div class="h-3 rounded bg-bg-hover" [style.width.%]="rowWidth(r)"></div>
+        @for (r of rowList(); track r) {
+          <div class="h-3 rounded skeleton-load" [style.width.%]="rowWidth(r)"></div>
         }
       </div>
     </div>

package/src/lib/ui/components/skeleton-facets/skeleton-facets.component.html

@@ -0,0 +1,15 @@
+<div class="flex flex-col gap-xl">
+  @for (g of groupList(); track g) {
+    <div class="flex flex-col gap-normal">
+      <div class="h-3 w-20 rounded skeleton-load"></div>
+      <div class="flex flex-col gap-small">
+        @for (r of rowList(); track r) {
+          <div class="flex items-center gap-normal">
+            <div class="w-3.5 h-3.5 rounded skeleton-load shrink-0"></div>
+            <div class="h-3 rounded skeleton-load" [style.width.%]="rowWidth(r)"></div>
+          </div>
+        }
+      </div>
+    </div>
+  }
+</div>

package/src/lib/ui/components/skeleton-frame/skeleton-frame.component.html

@@ -0,0 +1,59 @@
+<div class="flex h-screen w-full overflow-hidden bg-bg-primary">
+  <!-- drawer -->
+  <div
+    class="hidden md:flex w-[260px] shrink-0 flex-col gap-xl border-r border-border-subtle p-semi"
+  >
+    <div class="flex items-center gap-normal">
+      <div class="w-6 h-6 rounded skeleton-load shrink-0"></div>
+      <div class="flex flex-col gap-small flex-1 min-w-0">
+        <div class="h-3.5 w-20 rounded skeleton-load"></div>
+        <div class="h-2.5 w-full rounded skeleton-load"></div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-small">
+      @for (n of navList(); track n) {
+        <div class="flex items-center gap-normal py-1">
+          <div class="w-4 h-4 rounded skeleton-load shrink-0"></div>
+          <div class="h-3 rounded skeleton-load" [style.width.%]="navWidth(n)"></div>
+        </div>
+      }
+    </div>
+
+    <div class="mt-auto flex items-center gap-normal border-t border-border-subtle pt-semi">
+      <div class="w-8 h-8 rounded-full skeleton-load shrink-0"></div>
+      <div class="flex flex-col gap-small flex-1 min-w-0">
+        <div class="h-3 w-24 rounded skeleton-load"></div>
+        <div class="h-2.5 w-32 rounded skeleton-load"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex flex-1 min-w-0 flex-col">
+    <!-- topbar -->
+    <div
+      class="flex h-14 shrink-0 items-center gap-normal border-b border-border-subtle px-semi"
+    >
+      <div class="h-3.5 w-40 rounded skeleton-load"></div>
+      <div class="ml-auto h-8 w-32 rounded-lg skeleton-load"></div>
+    </div>
+
+    <!-- content: dựng đúng composition của route đích nếu đã biết -->
+    <div class="flex-1 min-h-0 overflow-hidden p-semi">
+      @if (contentHint(); as hint) {
+        <fx-ui-route-skeleton [hint]="hint" />
+      } @else {
+        <div class="flex flex-col gap-xl">
+          <div class="h-6 w-1/4 rounded skeleton-load"></div>
+          <div class="grid gap-xl grid-cols-2 md:grid-cols-4">
+            <div class="h-24 rounded-lg skeleton-load"></div>
+            <div class="h-24 rounded-lg skeleton-load"></div>
+            <div class="h-24 rounded-lg skeleton-load"></div>
+            <div class="h-24 rounded-lg skeleton-load"></div>
+          </div>
+          <div class="h-64 rounded-lg skeleton-load"></div>
+        </div>
+      }
+    </div>
+  </div>
+</div>

package/src/lib/ui/components/skeleton-list/skeleton-list.component.html

@@ -1,12 +1,12 @@
-<div class="flex flex-col gap-normal animate-pulse">
-  @for (r of range(rows()); track r) {
+<div class="flex flex-col gap-normal">
+  @for (r of rowList(); track r) {
     <div class="rounded-lg border border-border-default p-semi">
       <div class="flex items-center gap-normal mb-small">
-        <div class="w-8 h-8 rounded-lg bg-bg-hover shrink-0"></div>
-        <div class="h-4 flex-1 rounded bg-bg-hover"></div>
-        <div class="h-5 w-12 rounded-full bg-bg-hover shrink-0"></div>
+        <div class="w-8 h-8 rounded-lg skeleton-load shrink-0"></div>
+        <div class="h-4 flex-1 rounded skeleton-load"></div>
+        <div class="h-5 w-12 rounded-full skeleton-load shrink-0"></div>
       </div>
-      <div class="h-3 w-3/4 rounded bg-bg-hover"></div>
+      <div class="h-3 w-3/4 rounded skeleton-load"></div>
     </div>
   }
 </div>

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

@@ -6,7 +6,7 @@
   [disabled]="disabled"
   class="relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50"
   [ngClass]="{
-    'bg-success': value && !disabled,
+    'tone-solid-success': value && !disabled,
     'bg-button-default': !value && !disabled,
     'bg-bg-hover': disabled
   }"

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

@@ -4,8 +4,8 @@
   [attr.role]="type() === 'error' ? 'alert' : 'status'"
   class="flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0"
   [ngClass]="{
-    'border-success': type() === 'success',
-    'border-critical': type() === 'error',
+    'tone-border-success': type() === 'success',
+    'tone-border-danger': type() === 'error',
     'border-warning': type() === 'warning',
     'border-information': type() === 'info'
   }"
@@ -16,28 +16,28 @@
         icon="check-circle"
         [solid]="true"
         [size]="30"
-        class="text-success"
+        class="tone-fg-success"
       ></fx-ui-hero-icon>
       } @case('error') {
       <fx-ui-hero-icon
         icon="exclamation-circle"
         [solid]="true"
         [size]="30"
-        class="text-critical"
+        class="tone-fg-danger"
       ></fx-ui-hero-icon>
       } @case('warning') {
       <fx-ui-hero-icon
         icon="exclamation-triangle"
         [solid]="true"
         [size]="30"
-        class="text-warning"
+        class="tone-fg-warning"
       ></fx-ui-hero-icon>
       } @default {
       <fx-ui-hero-icon
         icon="information-circle"
         [solid]="true"
         [size]="30"
-        class="text-information"
+        class="tone-fg-information"
       ></fx-ui-hero-icon>
       } }
     </div>

package/tailwind.css

@@ -18,3 +18,15 @@ body {
   width: 100%;
   background: rgb(var(--bg-primary));
 }
+
+/* Typography nền lấy từ design demo: 13.5px / 1.45 / antialiased.
+   ⚠️ ĐẶT TRÊN `body`, TUYỆT ĐỐI KHÔNG ĐẶT TRÊN `html`. `rem` luôn quy chiếu
+   về phần tử gốc (`html`), nên set font-size ở `html` sẽ đổi gốc rem
+   16px → 13.5px và làm CO 15,6% toàn bộ thang spacing (--spacing-* tính
+   bằng rem) lẫn mọi cỡ chữ text-* — chứ không chỉ chữ thừa hưởng.
+   Demo cũng đặt trên một DIV (.og-root), giữ rem = 16px. */
+body {
+  font-size: var(--og-fs-md);
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+}