@foxeltech/angular-ui 0.7.106 → 0.7.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.7.106",
+  "version": "0.7.108",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/lib/styles/components.css

@@ -849,3 +849,186 @@ input[type='password'] {
 .fx-rs-busy > *:not(fx-ui-route-skeleton) {
   display: none !important;
 }
+
+/* ============================================================================
+   Grid tables, badges and status dots to the reference HTML (Binary
+   Intelligence Dashboard, porcelain) — anh Tú 15/09, moved into the lib in
+   0.7.107 from three identical copies in analyze/knowledge/host styles.scss.
+
+   The reference draws its lists as CSS-grid rows, not <table>: a sunken 10px
+   header in 10.5px/600 tracked faint, 11px rows split by hairlines, hover to
+   surface-sunken, a trailing caret that turns accent and slides 2px. Columns
+   come from the consumer as `--fx-cols` on `.fx-grid-table`.
+
+   Inside layer(components) like the rest of this file, so a Tailwind utility
+   on the same element still wins.
+   ============================================================================ */
+.fx-grid-table {
+  border: 1px solid rgb(var(--og-border));
+  border-radius: var(--og-radius-card);
+  background: rgb(var(--og-surface));
+  overflow: hidden;
+}
+.fx-grid-table__head,
+.fx-grid-table__row {
+  display: grid;
+  grid-template-columns: var(--fx-cols);
+  gap: 12px;
+  align-items: center;
+  padding: 10px 12px;
+}
+.fx-grid-table__head {
+  border-bottom: 1px solid rgb(var(--og-border));
+  background: rgb(var(--og-surface-sunken));
+  font-size: var(--og-fs-2xs);
+  font-weight: 600;
+  letter-spacing: var(--og-tracking-label);
+  color: rgb(var(--og-text-faint));
+}
+.fx-grid-table__row {
+  appearance: none;
+  width: 100%;
+  padding: 11px 12px;
+  border: 0;
+  border-bottom: 1px solid rgb(var(--og-border-subtle));
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  transition: background-color 130ms ease;
+}
+.fx-grid-table__row:last-child {
+  border-bottom: 0;
+}
+.fx-grid-table__row:hover {
+  background: rgb(var(--og-surface-sunken));
+}
+.fx-grid-table__row--on {
+  background: rgb(var(--og-accent-soft-bg));
+}
+.fx-grid-table__row:focus-visible {
+  outline: 2px solid rgb(var(--og-accent));
+  outline-offset: -2px;
+}
+.fx-grid-caret {
+  font-size: 15px;
+  line-height: 1;
+  color: rgb(var(--og-text-faint));
+  justify-self: end;
+  transition:
+    color 130ms ease,
+    transform 130ms ease;
+}
+.fx-grid-table__row:hover .fx-grid-caret {
+  color: rgb(var(--og-accent));
+  transform: translateX(2px);
+}
+.fx-grid-table__num {
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-sm);
+  color: rgb(var(--og-text-body));
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.fx-grid-table__head .fx-grid-table__num {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+.fx-grid-table__strong {
+  font-size: var(--og-fs-sm);
+  font-weight: 600;
+  color: rgb(var(--og-text));
+}
+.fx-grid-table__muted {
+  font-size: var(--og-fs-xs);
+  color: rgb(var(--og-text-muted));
+}
+.fx-grid-table__mono {
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-xs);
+  color: rgb(var(--og-text-faint));
+}
+.fx-grid-empty {
+  padding: 15px;
+  text-align: center;
+  color: rgb(var(--og-text-muted));
+  font-size: var(--og-fs-sm);
+  border: 1px dashed rgb(var(--og-border));
+  border-radius: var(--og-radius-card);
+}
+
+/* `.og-badge`: 3px 10px, pill, 11.5px, soft tint by tone; outline = the
+   neutral "Low" band; solid = Critical. Tone names are the SEMANTIC tokens
+   (`--og-negative`, not the chart ramp) — see the note above `.tone-tint-*`. */
+.fx-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: var(--og-radius-pill);
+  font-size: var(--og-fs-xs);
+  line-height: 1.5;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.fx-badge--negative {
+  background: rgb(var(--og-negative-soft-bg));
+  color: rgb(var(--og-negative));
+}
+.fx-badge--warning {
+  background: rgb(var(--og-warning-soft-bg));
+  color: rgb(var(--og-warning));
+}
+.fx-badge--positive {
+  background: rgb(var(--og-positive-soft-bg));
+  color: rgb(var(--og-positive));
+}
+.fx-badge--neutral {
+  background: rgb(var(--og-neutral-soft-bg));
+  color: rgb(var(--og-neutral-soft-fg));
+}
+.fx-badge--accent {
+  background: rgb(var(--og-accent-soft-bg));
+  color: rgb(var(--og-accent-soft-fg));
+}
+.fx-badge--outline {
+  background: none;
+  border: 1px solid rgb(var(--og-border));
+  color: rgb(var(--og-text-muted));
+}
+.fx-badge--solid {
+  background: rgb(var(--og-text));
+  color: rgb(var(--og-surface));
+}
+
+/* `.og-statusdot`: a 7px mark and the state's name. */
+.fx-statusdot {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--og-fs-sm);
+  color: rgb(var(--og-text-body));
+  white-space: nowrap;
+}
+.fx-statusdot::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: rgb(var(--og-text-faint));
+  flex: none;
+}
+.fx-statusdot--positive::before {
+  background: rgb(var(--og-positive));
+}
+.fx-statusdot--negative::before {
+  background: rgb(var(--og-negative));
+}
+.fx-statusdot--warning::before {
+  background: rgb(var(--og-warning));
+}
+.fx-statusdot--accent::before {
+  background: rgb(var(--og-accent));
+}

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

@@ -89,7 +89,7 @@
         class="drawer-item"
         [class.active]="isActiveRoute(item.route)"
         [class.has-children]="item.children && item.children.length > 0"
-        [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
+        [style.paddingLeft.px]="isExpanded ? 8 + level * 16 : 16"
         [matTooltip]="!isExpanded ? item.label : ''"
         matTooltipPosition="right"
         matTooltipClass="text-text-primary text-xs font-semibold"
@@ -110,7 +110,7 @@
         class="drawer-item"
         [class.active]="isActiveRoute(item.route)"
         [class.has-children]="item.children && item.children.length > 0"
-        [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
+        [style.paddingLeft.px]="isExpanded ? 8 + level * 16 : 16"
         [matTooltip]="!isExpanded ? item.label : ''"
         matTooltipPosition="right"
         matTooltipClass="text-text-primary text-sm font-semibold"

package/src/lib/ui/components/drawer/drawer.component.scss

@@ -14,16 +14,24 @@
      hàng brand nằm ngoài container, nếu tô ở container thì 60px trên cùng
      lộ nền của trang. Sáng: drawer xám, nội dung trắng; tối: drawer tối hơn
      surface — đúng quy ước sidebar của cả hai chiều. */
-  @apply relative h-full border-r border-border-default flex flex-col bg-page;
+  /* 0.7.107 (anh Tú 15/09, reference HTML "Binary Intelligence Dashboard"):
+     the demo's `.og-sidebar` is `--og-surface-sunken` (#fbfbfa on porcelain)
+     with a `--og-border-subtle` right edge — not the page's `--og-page-bg`
+     (#f2f2f1). Was overridden from platform-host's styles.scss with doubled
+     selectors; it lives here now so all five apps agree. */
+  @apply relative h-full flex flex-col;
+  background: rgb(var(--og-surface-sunken));
+  border-right: 1px solid rgb(var(--og-border-subtle));
 }
 
 /* Brand row — phải thẳng hàng với icon của nav item.
-   Icon nav nằm ở 24px tính từ mép drawer: 8px của .drawer-container (px-2)
-   + 16px padding-left inline của .drawer-item. Brand nằm NGOÀI container
-   nên phải tự cộng đủ 24px (trước đây p-4 + ml-5 = 36px → lệch 12px). */
+   Icon nav nằm ở 16px tính từ mép drawer (0.7.107, theo reference: 8px của
+   .drawer-container (px-2) + 8px padding-left inline của .drawer-item —
+   trước đó là 16px, tức 24px tổng). Brand nằm NGOÀI container nên phải tự
+   cộng đủ 16px. */
 .drawer-brand {
   @apply h-[60px] shrink-0 flex items-center gap-3 no-underline overflow-hidden;
-  padding-left: 24px;
+  padding-left: 16px;
   padding-right: 8px;
   transition: padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
   /* max-width là BẮT BUỘC: .drawer-host-wrapper là flex column có width auto
@@ -138,14 +146,25 @@
 }
 
 .drawer-item {
-  @apply flex items-center mt-1 w-full min-h-8 py-2 px-large border-none bg-transparent cursor-pointer no-underline text-text-primary relative rounded;
-  transition: all 200ms ease;
-
-  /* Hover = glass mờ hơn: chỉ translucent, chưa có viền/shadow, để không
-     nhầm với hàng đang chọn. */
+  /* Row geometry to the reference (0.7.107): 6px 8px padding, 30px min
+     height, 12.5px, 7px control radius, 1px between rows, text-body at rest.
+     The container's px-2 supplies the 8px inset from the drawer's edge, so
+     the row itself carries no horizontal margin — the reference's rows sit
+     8px in, not 16. */
+  @apply flex items-center w-full border-none bg-transparent cursor-pointer no-underline relative;
+  margin-top: 1px;
+  min-height: 30px;
+  padding: 6px 8px;
+  font-size: var(--og-fs-sm);
+  color: rgb(var(--og-text-body));
+  border-radius: var(--og-radius-control);
+  transition: background-color 130ms ease, color 130ms ease;
+
+  /* Hover: an 8% tint of the text colour — the reference does not move or
+     scale the row. */
   &:hover {
-    @apply text-text-primary scale-95;
-    background: rgb(var(--og-surface-raised) / 0.5);
+    color: rgb(var(--og-text));
+    background: color-mix(in srgb, rgb(var(--og-text)) 8%, transparent);
   }
 
   /* Hàng đang chọn = GLASS, KHÔNG dùng màu primary (anh Tú chốt 31/08):
@@ -158,25 +177,24 @@
        khai border-none, thêm border thật sẽ đẩy layout 1px.
      - backdrop-blur chỉ có tác dụng khi nền sau có hoạ tiết/gradient; nền
        phẳng thì hiệu ứng đến từ độ trong + viền + shadow. */
+  /* Active (0.7.107, reference `.og-sidebar__item.is-active`): a 6% tint of
+     the text colour with a 7% inset hairline, weight 500. Replaces the glass
+     tile (surface-raised/0.8 + blur + shadow) of 31/08 — the reference's
+     selected row is a flat tint, and the tint is token-driven so charcoal
+     gets a light-on-dark ring where porcelain gets dark-on-light.
+     Viền vẽ bằng inset box-shadow chứ không phải `border`: .drawer-item
+     khai border-none, thêm border thật sẽ đẩy layout 1px. */
   &.active {
-    @apply text-text-primary font-medium;
-    background: rgb(var(--og-surface-raised) / 0.8);
-    backdrop-filter: blur(12px);
-    /* shadow viết literal chứ không dùng var(--shadow-sm): biến đó do @theme
-       của Tailwind sinh, không chắc có mặt trong scope của component SCSS. */
-    box-shadow:
-      inset 0 0 0 1px rgb(var(--og-border)),
-      0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
+    color: rgb(var(--og-text));
+    font-weight: 500;
+    background: color-mix(in srgb, rgb(var(--og-text)) 6%, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, rgb(var(--og-text)) 7%, transparent);
 
     &:hover {
-      background: rgb(var(--og-surface-raised) / 0.95);
+      background: color-mix(in srgb, rgb(var(--og-text)) 9%, transparent);
     }
   }
 
-  &:active {
-    transform: scale(0.98);
-  }
-
   &:focus-visible {
     @apply outline-2 outline-primary outline-offset-2;
   }
@@ -195,7 +213,9 @@
 }
 
 .item-label {
-  @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis text-[13px] leading-5 text-left;
+  /* Size comes from .drawer-item (12.5px, 0.7.107) — no second scale here. */
+  @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis leading-5 text-left;
+  font-size: inherit;
 }
 
 .chevron-icon {

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

@@ -26,6 +26,14 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
      * rather than an annotation.
      */
     readonly pieCenterValueSize: _angular_core.InputSignal<number>;
+    /**
+     * The donut's [inner, outer] radius — ECharts' own vocabulary, so either a
+     * percentage of the shorter side or a pixel count. The default is what the
+     * ring has always been. The reference dashboard draws a 140px ring with a
+     * 22px stroke, i.e. `[48, 70]` at `height="140px"` — the panel that wants it
+     * says so; the other pies keep their proportions.
+     */
+    readonly pieRadius: _angular_core.InputSignal<[string | number, string | number]>;
     readonly mobileWidth: _angular_core.InputSignal<number>;
     /** Override font for canvas text; empty = follow the theme's --og-font-figure. */
     readonly labelFontFamily: _angular_core.InputSignal<string>;
@@ -89,6 +97,8 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
      */
     private appearUntil;
     private static readonly APPEAR_MS;
+    /** Quiet time a host size has to hold before a resize is acted on. */
+    private static readonly RESIZE_SETTLE_MS;
     private deferTimer?;
     /**
      * Thay đổi kích thước ghi nhận TRONG cửa sổ appear, chờ áp sau. `measure()`
@@ -135,7 +145,13 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     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. */
+    /**
+     * Sunburst, and a pie WITH its built-in legend, place things in px of
+     * containerWidth → must rebuild on resize. A legend-less pie centres its
+     * ring at 50%/50% and its total in a `left: 'center' / top: 'middle'`
+     * graphic group, so `resize()` alone re-centres it — no rebuild, no
+     * second appear animation (15/09, donut on sidebar toggle).
+     */
     private needsLayoutRebuild;
     private deferResize;
     /**
@@ -153,6 +169,10 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
      *    trọng: resize SAU rebuild sẽ cắt ngay animation vừa bắt đầu.
      */
     private forceMediaRecalc;
+    /**
+     * @param silent redraw for a new size only — same data, no appear animation,
+     *   and the appear window is not re-armed.
+     */
     private rebuildChart;
     private checkEmpty;
     private registry;
@@ -195,7 +215,7 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     private resolvedFontFamily;
     private resolvePalette;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartComponent, never>;
-    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; }; "pieCenterValueSize": { "alias": "pieCenterValueSize"; "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; }; "showPointLabels": { "alias": "showPointLabels"; "required": false; "isSignal": true; }; }, { "chartClick": "chartClick"; "chartInit": "chartInit"; }, never, never, true, never>;
+    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; }; "pieCenterValueSize": { "alias": "pieCenterValueSize"; "required": false; "isSignal": true; }; "pieRadius": { "alias": "pieRadius"; "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; }; "showPointLabels": { "alias": "showPointLabels"; "required": false; "isSignal": true; }; }, { "chartClick": "chartClick"; "chartInit": "chartInit"; }, never, never, true, never>;
 }
 
 /**