@foxeltech/angular-ui 0.7.106 → 0.7.124

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;
+  @apply h-[60px] shrink-0 flex items-center gap-[10px] no-underline overflow-hidden;
+  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
@@ -43,8 +51,38 @@
   }
 }
 
+/* Sunken tile behind the mark (reference `.sb-logo`, measured 16/09: 6px pad,
+   radius-control, --og-surface-sunken). The border is declared TRANSPARENT and
+   only takes a colour on hover — declaring it here rather than adding one on
+   :hover is what keeps the row from shifting 1px when the pointer arrives. */
+.drawer-brand-logo {
+  @apply inline-flex items-center justify-center shrink-0;
+  padding: 6px;
+  border-radius: var(--og-radius-control);
+  background: rgb(var(--og-surface-sunken));
+  border: 1px solid transparent;
+  transition:
+    padding 220ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms ease;
+}
+
+/* The whole brand row is one link, so the tile lights up for a hover anywhere
+   on it — the reference's `.sb-logo:hover` sits on a non-clickable span, where
+   pointer-over-the-mark is the only hover there is. */
+.drawer-brand:hover .drawer-brand-logo {
+  border-color: rgb(var(--og-border));
+}
+
+.drawer-brand.is-collapsed .drawer-brand-logo {
+  padding: 4px;
+}
+
 .drawer-brand-mark {
-  @apply h-[20px] w-auto shrink-0;
+  @apply h-[21px] w-auto shrink-0;
+}
+
+.drawer-brand.is-collapsed .drawer-brand-mark {
+  @apply h-[19px];
 }
 
 /* Cột chữ: title + subtitle xếp dọc. min-w-0 để truncate hoạt động khi
@@ -55,21 +93,26 @@
 
 /* Wordmark: dùng CHỮ THẬT chứ không phải ảnh text_logo.png — ảnh đó là
    navy đặc nên chìm hẳn trên theme dark; chữ ăn --og-text nên đúng cả 6. */
+/* Reference: --og-fs-lg / weight 500 / -0.015em / line-height 1 (measured 16/09).
+   It was 600 at -0.01em, which read a notch heavier and wider than the design. */
 .drawer-brand-text {
-  @apply truncate text-[15px] font-semibold text-text-primary select-none;
+  @apply truncate text-[length:var(--og-fs-lg)] font-medium text-text-primary select-none;
   font-family: var(--og-font-display);
-  letter-spacing: -0.01em;
+  letter-spacing: -0.015em;
+  line-height: 1;
 }
 
-/* Subtitle: 11px muted, cùng cỡ với .drawer-version và caption
-   ADMINISTRATION nên không tự sinh ra một bậc typography mới. */
-/* line-clamp-2 chứ không phải truncate: tagline dài (VD "Binary Exploit
-   Intelligence Platform") không lọt một dòng trong cột chữ ~188px của drawer
-   260px, truncate sẽ cắt mất chữ. Hai dòng vẫn nằm gọn trong 60px của
-   .drawer-brand (18.75 + 1 + 27.5 = 47px). */
+/* Subtitle: 9px / weight 400 / +0.02em / line-height 1.2, --og-text-muted
+   (reference, measured 16/09).
+   MỘT DÒNG truncate chứ không còn line-clamp-2: ở 11px thì "Binary Exploit
+   Intelligence Platform" không lọt cột chữ ~188px nên phải cho xuống hai dòng;
+   ở 9px nó lọt (~157px), và một dòng mới đúng bản gốc. Đổi cỡ mà quên đổi chỗ
+   này thì subtitle lại tự ngắt dòng. */
 .drawer-brand-subtext {
-  @apply line-clamp-2 text-[11px] text-text-placeholder select-none mt-[1px];
-  letter-spacing: var(--og-tracking-label);
+  @apply truncate text-[9px] font-normal select-none mt-[2px];
+  color: rgb(var(--og-text-muted));
+  letter-spacing: 0.02em;
+  line-height: 1.2;
 }
 
 .drawer-container {
@@ -82,14 +125,30 @@
 .toggle-btn {
   @apply absolute top-1/2 -translate-y-1/2 z-50 flex items-center justify-center w-6 h-6 rounded-full bg-bg-primary border border-border-default cursor-pointer shadow-sm;
   right: -12px; /* half of button width to straddle the border */
-  transition: all 200ms ease;
+  transition: background-color 200ms ease, box-shadow 200ms ease;
+
+  /* An invisible 40px hit area over the 24px circle. The visible button is a
+     circle whose CORNERS are dead, and half of it hangs over the content pane,
+     so the reliable target was ~20px across — small enough that an off-centre
+     press missed (anh Tú: "đôi lúc không hoạt động"). The look does not
+     change; only what the pointer can hit. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -8px;
+    border-radius: 9999px;
+  }
 
   &:hover {
     @apply bg-bg-hover shadow-md;
   }
 
+  /* NO scale on :active. Shrinking the button under a pressed pointer moves its
+     edge inward mid-press; a press that started near the rim then released
+     outside the element, and the browser fires no `click` at all for a
+     mousedown/mouseup pair on different targets. Press feedback is the fill. */
   &:active {
-    transform: translateY(-50%) scale(0.9);
+    @apply bg-bg-hover;
   }
 
   &:focus-visible {
@@ -138,14 +197,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 +228,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;
   }
@@ -185,17 +254,65 @@
   @apply outline-none;
 }
 
+/* 9px icon-to-label, per the reference's nav row (measured 16/09). It was
+   `gap-3` = 12px. */
 .item-content {
-  @apply flex items-center gap-3 w-full overflow-hidden;
+  @apply flex items-center gap-[9px] w-full overflow-hidden;
+}
+
+/* 18px, in an 18px box — the reference's glyph is 12.5px inside an 18px span.
+   At 20px the icon alone made the row 32px tall, so the `min-height: 30px` on
+   .drawer-item was never the height that actually shipped. The gap lives on
+   .item-content; do NOT add a margin here as well or the two compound. */
+/* Collapsed the label is gone and the icon is the only thing in the row, so it
+   carries the row on its own and goes back up to 18px (anh Tú 16/09). Expanded
+   it stays at the reference's 13px mark. */
+.drawer-item.is-collapsed .item-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 0;
+}
+
+/* A solid mark: lucide draws outlines, and filling the shape turns the diamond
+   into the reference's filled lozenge.
+   The descendant selector is REQUIRED: lucide renders an <svg> INSIDE the
+   element carrying `.item-icon`, and it is that inner svg that holds
+   `fill="none"` — styling only the outer one left the mark hollow (MEASURED
+   16/09). Paths are named too, for the nesting lucide may skip. */
+.item-icon--solid {
+  fill: currentColor;
+}
+
+/* ::ng-deep is REQUIRED for the descendants, not a shortcut: lucide builds its
+   <svg> (and the `fill="none"` on it) at runtime with Renderer2, so those nodes
+   never carry this component's [_ngcontent] attribute and a scoped selector
+   matches nothing. The host element above is in the template and does get it —
+   which is why the outer fill applied while the mark stayed hollow. */
+:host ::ng-deep .item-icon--solid svg,
+:host ::ng-deep .item-icon--solid path,
+:host ::ng-deep .item-icon--solid polygon {
+  fill: currentColor;
 }
 
 .item-icon {
   @apply flex-shrink-0;
   color: inherit;
+  /* The reference's mark is a 12.5px glyph sitting in an 18px slot, so the
+     ICON is 13px and the 5px below restores the slot: 13 + 5 + the container's
+     9px gap = 27px from the icon's left edge to the label, exactly as in the
+     design. Sizing the icon itself 18px drew it half again too large. */
+  width: 13px;
+  height: 13px;
+  margin-right: 5px;
 }
 
 .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.
+     Leading is 18px, not `leading-5`'s 20px: the label is the tallest thing in
+     the row, so 20 + 6 + 6 padding made every row 32px and the declared
+     `min-height: 30px` never applied. The reference's row is 30. */
+  @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis leading-[18px] text-left;
+  font-size: inherit;
 }
 
 .chevron-icon {

package/src/lib/ui/components/filter-pills/filter-pills.component.html

@@ -3,10 +3,13 @@
     <button
       type="button"
       [attr.aria-pressed]="isActive(option)"
-      class="flex items-center gap-small px-[11px] py-[4px] rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors"
+      class="fx-pill flex items-center rounded-full border cursor-pointer transition-colors"
       [ngClass]="pillClass(option)"
       (click)="valueChange.emit(option.value)"
     >
+      @if (option.icon) {
+        <lucide-icon [img]="option.icon" [size]="14" class="flex shrink-0" />
+      }
       {{ option.label }}
       @if (option.count !== null && option.count !== undefined) {
         <span [ngClass]="countClass(option)" style="font-family: var(--og-font-figure)">{{ option.count }}</span>

package/src/lib/ui/components/filter-pills/filter-pills.component.scss

@@ -0,0 +1,23 @@
+@reference '../../../styles/tailwind.css';
+
+/* Pill metrics to the reference (measured in the browser 16/09): 29px tall,
+   6px/12px padding, --og-fs-xs at weight 600, 7px between label and count.
+   It was 26px at 4px/11px, 12px/700 and a 4px gap — a step smaller, a step
+   heavier and a step tighter than the design at every point. */
+.fx-pill {
+  padding: 6px 12px;
+  gap: 7px;
+  font-size: var(--og-fs-xs);
+  font-weight: 600;
+  /* 15px, not a ratio: 6+6 padding + 2 border + 15 = the reference's 29px.
+     `1.4` on 11.5px renders 16.1 and the pill came out 30. */
+  line-height: 15px;
+}
+
+/* Hover lift, matching the reference's `.bi-filter-pill:hover` — the same
+   0 2px 7px rgba(0,0,0,.12) every other button in that design gets
+   (`.og-button:hover`, which `.btn-alternative` already carries here).
+   Measured 16/09; the pill had no hover affordance at all before. */
+.fx-pill:hover {
+  box-shadow: 0 2px 7px rgb(0 0 0 / 0.12);
+}

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

@@ -1,20 +1,25 @@
 <!-- flex column filling the host: cards in one grid row share a height and a
      projected footer can sit at the bottom with `mt-auto` (design 01). -->
-<div class="card-common bg-surface flex flex-col flex-1 min-h-0">
+<!-- The card itself carries NO padding: the reference pads the header and the
+     body separately (10px 12px 4px / 10px 12px, measured 16/09), which is what
+     lets the header rule sit flush and the body start tight under it. -->
+<div class="card-common fx-section-card bg-surface flex flex-col flex-1 min-h-0">
   @if (titleStyle() === 'eyebrow') {
-    <div class="flex items-baseline justify-between gap-normal mb-large">
+    <div class="fx-section-card__head flex items-baseline justify-between gap-normal">
       <span class="txt-eyebrow">{{ title() }}</span>
       @if (aside()) {
-        <span class="txt-utility-description text-right">{{ aside() }}</span>
+        <span class="fx-section-card__aside text-right">{{ aside() }}</span>
       }
     </div>
   } @else {
-    <div class="flex items-center gap-normal mb-large">
+    <div class="fx-section-card__head flex items-center gap-normal">
       @if (icon) {
         <fx-ui-hero-icon [ngClass]="iconClass" [icon]="icon" [size]="18"></fx-ui-hero-icon>
       }
       <span class="txt-heading-06">{{ title() }}</span>
     </div>
   }
-  <ng-content></ng-content>
+  <div class="fx-section-card__body flex flex-col flex-1 min-h-0">
+    <ng-content></ng-content>
+  </div>
 </div>

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

@@ -0,0 +1,28 @@
+@reference '../../../styles/tailwind.css';
+
+/* Card padding, to the reference (measured in the browser 16/09).
+   `card-common` pads 20px/16px uniformly, which the design never does: there
+   the card has none, the header carries 10px 12px 4px and the body 10px 12px.
+   The uniform 16/20 is what made every panel on the page read roomier than the
+   design and pushed each section's first row 6px further from its title. */
+.fx-section-card {
+  padding: 0;
+}
+
+.fx-section-card__head {
+  padding: 10px 12px 4px;
+}
+
+.fx-section-card__body {
+  padding: 10px 12px;
+}
+
+/* Section caption ("ranked by risk · across all projects"): 11.5px/400 in
+   --og-text-faint. `txt-utility-description` is 12px/300 in --og-text-secondary
+   — a size too large, a weight too light and a shade too dark. */
+.fx-section-card__aside {
+  font-size: var(--og-fs-xs);
+  font-weight: 400;
+  line-height: 1.4;
+  color: rgb(var(--og-text-faint));
+}

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

@@ -16,3 +16,51 @@
     grid-template-columns: minmax(0, 1fr) !important;
   }
 }
+
+/* The ruled KPI strip, to the reference (`.og-statgrid--ruled`, measured in the
+   browser 16/09): one bordered, rounded, softly-shadowed panel with NO gap,
+   its cells padded 10px 12px and separated by a hairline on every cell but the
+   last. Same treatment the Exploit Intelligence page already hand-rolled. */
+.fx-stat-grid--ruled {
+  gap: 0;
+  border: 1px solid rgb(var(--og-border));
+  border-radius: var(--og-radius-control);
+  background: rgb(var(--og-surface));
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.04),
+    0 3px 8px rgb(0 0 0 / 0.05);
+  overflow: hidden;
+}
+
+.fx-stat-grid--ruled .fx-stat-cell {
+  padding: 10px 12px;
+  border-right: 1px solid rgb(var(--og-border));
+}
+
+.fx-stat-grid--ruled .fx-stat-cell--last {
+  border-right: 0;
+}
+
+/* Cell type: 10.5px faint label, a 32px mono figure 6px below it, an 11.5px
+   muted sub 4px below that. */
+.fx-stat-cell__label {
+  font-size: var(--og-fs-2xs);
+  font-weight: 400;
+  color: rgb(var(--og-text-faint));
+}
+
+.fx-stat-cell__figure {
+  font-family: var(--og-font-figure);
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 1.1;
+  color: rgb(var(--og-text));
+  margin-top: 6px;
+}
+
+.fx-stat-cell__sub {
+  font-size: var(--og-fs-xs);
+  font-weight: 400;
+  color: rgb(var(--og-text-muted));
+  margin-top: 4px;
+}

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

@@ -1,16 +1,25 @@
-<div class="fx-stat-grid grid gap-normal" [ngStyle]="{ 'grid-template-columns': gridColumns }">
-  @for (card of cards(); track card.label) {
+<!-- variant="figure" is ONE ruled panel, not N cards: the reference draws the
+     KPI strip as a single bordered box divided by hairlines (`.og-statgrid
+     --ruled`, measured 16/09). It was four separate `card-common` boxes with an
+     8px gap, which read as four objects where the design has one. The other
+     variant keeps its own cards. -->
+<div
+  class="fx-stat-grid grid"
+  [class.fx-stat-grid--ruled]="variant() === 'figure'"
+  [class.gap-normal]="variant() !== 'figure'"
+  [ngStyle]="{ 'grid-template-columns': gridColumns }"
+>
+  @for (card of cards(); track card.label; let last = $last) {
     @if (variant() === 'figure') {
-      <div class="card-common flex flex-col gap-small min-w-0">
-        <span class="txt-utility-caption text-text-secondary truncate">{{ card.label }}</span>
+      <div class="fx-stat-cell flex flex-col min-w-0" [class.fx-stat-cell--last]="last">
+        <span class="fx-stat-cell__label truncate">{{ card.label }}</span>
         <span
-          class="txt-heading-03"
+          class="fx-stat-cell__figure"
           [ngClass]="numClass(card)"
-          style="font-family: var(--og-font-figure)"
           ><span [fxCountUp]="card.value"></span></span
         >
         @if (card.sub) {
-          <span class="txt-utility-caption" [ngClass]="subClass(card)">{{ card.sub }}</span>
+          <span class="fx-stat-cell__sub" [ngClass]="subClass(card)">{{ card.sub }}</span>
         }
         @if (card.spark?.length) {
           <fx-ui-sparkbar class="mt-xs" [values]="card.spark!" [height]="16" [tone]="card.tone ?? null" />

package/tokens.css

@@ -53,6 +53,9 @@
 
   --color-cta: #c2582a;
   --color-cta-hover: #b34e24;
+  /* Border of the CTA while hovered — the reference's `.bi-newbtn:hover`
+     darkens the edge one more step than the fill (16/09). */
+  --color-cta-hover-border: #a3461f;
 
   /* ---- Legacy colour names (@deprecated — remove after the V2 campaign;
      they resolve through the alias layer in theme.css, so every existing

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>;
 }
 
 /**