npm - @foxeltech/angular-ui - Versions diffs - 0.4.0 → 0.7.75 - Mend

@foxeltech/angular-ui 0.4.0 → 0.7.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

package/tokens.css CHANGED Viewed

@@ -3,16 +3,60 @@
  * Replaces the old JS preset (tailwind.config.js / lodash.merge sharing).
  *
  * Colour tokens point at the runtime RGB-triplet variables from theme.css
- * (dark default on :root, light via .light_theme) so theme switching keeps
- * working; opacity modifiers like bg-critical/10 are handled by v4's
- * color-mix() and need no <alpha-value> plumbing.
+ * (OgeniumDashboards --og-* per [data-og-theme] on <html>, porcelain default)
+ * so theme switching keeps working; opacity modifiers like bg-critical/10 are
+ * handled by v4's color-mix() and need no <alpha-value> plumbing.
  */
 /* `inline` is load-bearing: without it the rgb(var(--x)) values are baked
-   into :root once, so .light_theme's runtime triplet overrides never reach
+   into :root once, so [data-og-theme]'s runtime triplet overrides never reach
    the utilities. inline makes every utility carry rgb(var(--x)) itself and
    resolve at the element that uses it — same behavior as v3. */
 @theme inline {
-  /* Colours (names match the v3 preset so every existing class keeps working) */
+  /* ---- OG palette — use these in new/restyled markup ---- */
+  --color-page: rgb(var(--og-page-bg));
+  --color-surface: rgb(var(--og-surface));
+  --color-surface-raised: rgb(var(--og-surface-raised));
+  --color-surface-sunken: rgb(var(--og-surface-sunken));
+  --color-border: rgb(var(--og-border));
+  --color-border-subtle: rgb(var(--og-border-subtle));
+  --color-strong: rgb(var(--og-text));
+  --color-body: rgb(var(--og-text-body));
+  --color-muted: rgb(var(--og-text-muted));
+  --color-faint: rgb(var(--og-text-faint));
+  --color-accent: rgb(var(--og-accent));
+  --color-accent-fg: rgb(var(--og-accent-fg));
+  --color-accent-contrast: rgb(var(--og-accent-contrast));
+  --color-accent-soft: rgb(var(--og-accent-soft-bg));
+  --color-accent-soft-fg: rgb(var(--og-accent-soft-fg));
+  --color-positive: rgb(var(--og-positive));
+  --color-positive-soft: rgb(var(--og-positive-soft-bg));
+  --color-negative: rgb(var(--og-negative));
+  --color-negative-soft: rgb(var(--og-negative-soft-bg));
+  --color-warning-soft: rgb(var(--og-warning-soft-bg));
+  --color-neutral-soft: rgb(var(--og-neutral-soft-bg));
+  --color-neutral-soft-fg: rgb(var(--og-neutral-soft-fg));
+  --color-track: rgb(var(--og-track));
+  /* ---- CTA (New Analysis / New Scan) ----
+     Demo dùng một màu CỐ ĐỊNH cho nút hành động chính (`.bi-newbtn`), không
+     đổi theo theme và KHÔNG phải accent — nên để literal ở đây thay vì thành
+     token theme. Nguồn: lớp override của design, #c2582a / hover #b34e24. */
+  /* ---- Severity ramp CHO CHART ----
+     Màu literal đo trên demo (Critical #7f1d1d · High #dc2626 · Medium
+     #f59e0b · Low #16a34a; bộ dark nâng L cho đủ tương phản). TÁCH khỏi
+     `--color-critical/danger/warning/success` — mấy tên đó trỏ vào bộ LEGACY
+     `--og-tone-*` dùng cho text/nền, không phải màu chart của design. */
+  --color-sev-critical: rgb(var(--og-sev-critical));
+  --color-sev-danger: rgb(var(--og-sev-danger));
+  --color-sev-warning: rgb(var(--og-sev-warning));
+  --color-sev-success: rgb(var(--og-sev-success));
+  --color-cta: #c2582a;
+  --color-cta-hover: #b34e24;
+  /* ---- Legacy colour names (@deprecated — remove after the V2 campaign;
+     they resolve through the alias layer in theme.css, so every existing
+     class already renders the OG palette) ---- */
   --color-gradient-primary-start: rgb(var(--gradient-primary-start));
   --color-gradient-primary-end: rgb(var(--gradient-primary-end));
   --color-gradient-success-start: rgb(var(--gradient-success-start));
@@ -46,6 +90,14 @@
   --color-button-primary: rgb(var(--button-primary));
   /* Breakpoints (v3 custom screens) */
+  /* ⚠️ THANG NÀY KHÔNG PHẢI MẶC ĐỊNH CỦA TAILWIND (640/768/1024/1280).
+     `lg` ở đây là **1080px**, không phải 1024px — đã gây lỗi "màn lg mà render
+     layout sm" (03/09): mọi viewport 1024-1079 (rất dễ gặp khi OS scaling
+     125-150% hoặc browser zoom) rơi xuống layout nhỏ. Anh Tú chốt GIỮ thang
+     này; đổi nó sẽ dịch ngưỡng của mọi `lg:`/`xl:` trong 5 app.
+     👉 Layout nào cần biết "có đủ chỗ thật hay không" thì dùng CONTAINER QUERY
+     theo bề rộng của chính nó (xem master-detail.component.css), đừng bám `lg:`.
+     `xl` là 1920px nên màn 1900px KHÔNG BAO GIỜ đạt `xl:`. */
   --breakpoint-sm: 480px;
   --breakpoint-md: 720px;
   --breakpoint-lg: 1080px;
@@ -61,14 +113,22 @@
   --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color) / 0.25);
   --inset-shadow-sm: inset 0 2px 4px 0 rgb(var(--shadow-color) / 0.05);
-  /* v3 default border radii, incl. DEFAULT so bare `rounded` keeps working */
-  --radius-sm: 0.125rem;
-  --radius: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-3xl: 1.5rem;
+  /* Radius is a THEME variable in V2 (blueprint/terminal are square, ivory
+     controls are pills) — never hardcode border-radius in components. */
+  --radius-frame: var(--og-radius-frame);
+  --radius-card: var(--og-radius-card);
+  --radius-control: var(--og-radius-control);
+  --radius-pill: var(--og-radius-pill);
+  /* Legacy fixed scale remapped onto the theme radii so blueprint/terminal go
+     square with zero template edits. `rounded-full` stays Tailwind-native
+     9999px — avatars/dots must remain circular in every theme. */
+  --radius-sm: var(--og-radius-control);
+  --radius: var(--og-radius-control);
+  --radius-md: var(--og-radius-control);
+  --radius-lg: var(--og-radius-card);
+  --radius-xl: var(--og-radius-card);
+  --radius-2xl: var(--og-radius-card);
+  --radius-3xl: var(--og-radius-frame);
   /* Named spacing scale (gap-small, p-semi, mb-large, …) */
   --spacing-xs: 0.125rem;
@@ -79,12 +139,14 @@
   --spacing-xl: 1.25rem;
   --spacing-2xl: 1.5rem;
-  /* Font families */
-  --font-spmono: 'SpaceMonoRegular', monospace;
-  --font-dmsans: 'DMSans', sans-serif;
-  --font-orbitron: 'Orbitron', sans-serif;
-  --font-bevn: 'BeVietnamPro', sans-serif;
-  --font-roboto: 'Roboto', sans-serif;
+  /* Font families — theme variables (blueprint/terminal switch to mono).
+     V2 set: Archivo (body/display), JetBrains Mono / IBM Plex Mono (mono),
+     Source Serif 4 (prose), Newsreader (ivory/blueprint display). */
+  --font-body: var(--og-font-body);
+  --font-display: var(--og-font-display);
+  --font-mono: var(--og-font-mono);
+  --font-prose: var(--og-font-prose);
+  --font-figure: var(--og-font-figure);
   /* Font-size overrides (v3 preset values) */
   --text-xs: 0.75rem;

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

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 import { OnChanges, AfterViewInit, OnDestroy, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { EChartsOption, ECharts } from 'echarts';
-type IChartType = 'bar' | 'pie' | 'sunburst' | 'auto';
+type IChartType = 'bar' | 'pie' | 'sunburst' | 'line' | 'area-trend' | 'auto';
 declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     private ref;
     private cdr;
@@ -15,28 +15,109 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     readonly pieLegendAlign: _angular_core.InputSignal<string | number>;
     readonly pieLegendPosition: _angular_core.InputSignal<string | number>;
     readonly showPieLabel: _angular_core.InputSignal<boolean>;
+    /** Hide the built-in legend (panels that render their own legend beside the
+        donut); the donut then centres in the container. */
+    readonly showPieLegend: _angular_core.InputSignal<boolean>;
+    /** Caption under the donut's centre total (design: "42 / confirmed"). */
+    readonly pieCenterLabel: _angular_core.InputSignal<string>;
     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>;
     readonly emptyText: _angular_core.InputSignal<string>;
     readonly chartClick: _angular_core.OutputEmitterRef<any>;
     readonly chartInit: _angular_core.OutputEmitterRef<ECharts>;
     chartOptions: EChartsOption;
     isEmpty: boolean;
+    /**
+     * ⚠️ Cổng cho `<div echarts>` trong template. Trước đây div render NGAY với
+     * `chartOptions = {}`, nên NgxEchartsDirective khởi tạo chart bằng options
+     * RỖNG; options thật gán vào giữa lúc `await createChart()` của lần đó ⇒
+     * onOptionsChange() thấy `chart == null` và createChart() LẦN HAI trên cùng
+     * DOM node ⇒ "[ECharts] There is a chart instance already initialized on the
+     * dom.". Chỉ dựng directive khi đã có options thật ⇒ đúng một lần init.
+     */
+    hasOptions: boolean;
     labelFontSize: number;
     private chartInstance?;
     private resizeObserver?;
     private intersectionObserver?;
     private canInit;
+    private destroyed;
+    /**
+     * ⚠️ Đang chờ init đầu tiên của directive hoàn tất?
+     *
+     * NgxEchartsDirective đăng ký `changeFilter.notFirstAndEmpty('options', …)`:
+     * lần gán `options` ĐẦU bị bỏ qua (ngAfterViewInit lo), lần gán THỨ HAI gọi
+     * onOptionsChange(). Mà onOptionsChange() chỉ createChart() khi `this.chart`
+     * còn null — và nó null suốt thời gian `await createChart()` của lần đầu.
+     * Nên nếu ta gán `chartOptions` (object mới) trong khoảng await đó thì
+     * init() chạy HAI LẦN trên cùng DOM node ⇒
+     * "[ECharts] There is a chart instance already initialized on the dom."
+     *
+     * Cách chặn: trong khoảng chờ, giữ options ở `deferredOptions` chứ không đụng
+     * vào property đang bind; init xong thì áp một lần qua instance.
+     */
+    private awaitingFirstInit;
+    private deferredOptions?;
+    private pendingFrames;
     private isMobile;
     private containerWidth;
     constructor(ref: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;
+    /**
+     * ⚠️ RACE TRONG NGX-ECHARTS v20 — nguồn của
+     * "[ECharts] There is a chart instance already initialized on the dom."
+     *
+     * NgxEchartsDirective.onOptionsChange() làm:
+     *   this.chart = await this.createChart();   // ← destroy có thể rơi vào đây
+     *   this.chart$.next(this.chart);
+     *   this.chartInit.emit(this.chart);
+     *
+     * Destroy đúng lúc đang await thì ngOnDestroy → dispose() thấy `this.chart == null`
+     * nên KHÔNG dispose gì. Sau đó await resolve, gán một instance ECharts còn sống cho
+     * directive đã chết → instance MỒ CÔI, vẫn nằm trong registry của echarts gắn với
+     * DOM node đó. Angular tái dùng node ⇒ init() lần sau báo "already initialized".
+     *
+     * Không thể bắt qua (chartInit): Angular v20 TỪ CHỐI emit trên OutputRef đã destroy
+     * (chỉ log NG0953, listener không hề được gọi). Nên đường duy nhất là hỏi thẳng
+     * echarts xem node còn instance nào không, ở các macrotask SAU destroy.
+     */
+    private sweepOrphanInstance;
+    /** rAF có thể huỷ được khi destroy — tránh chạm instance đã dispose. */
+    private schedule;
+    /** Instance còn dùng được? (đã dispose thì mọi API echarts đều ném lỗi) */
+    private get liveChart();
     onThemeChange(): void;
     onChartClick(event: any): void;
-    onChartInit(chart: 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`.
+     */
     private updateResponsiveState;
+    /**
+     * ⚠️ 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.
+     *
+     * `resize()` thì luôn gọi được — nó không cắt animation.
+     */
     private forceMediaRecalc;
     private rebuildChart;
     private checkEmpty;
@@ -44,9 +125,15 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     private calcPieLayout;
     private detectType;
     private buildOptions;
+    private categoryAxis;
+    private valueAxis;
+    /** Canvas không ăn var() — resolve font stack thật tại render; chart đã
+        rebuild theo event theme-changed nên tự đổi font khi đổi theme
+        (blueprint/terminal dùng mono qua --og-font-figure). */
+    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; }; "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>;
+    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 };

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

@@ -1,6 +1,87 @@
 import * as _angular_core from '@angular/core';
 import { Node, Edge, Connection } from 'ngx-vflow';
+/**
+ * What a chain node represents. Structural kinds (`entry`, `convergence`,
+ * `impact`, `stage`) can be derived from the graph itself; the validation kinds
+ * (`mitigation`, `review`, `not-reproduced`) come from an analyst verdict.
+ */
+type FxChainNodeKind = 'entry' | 'convergence' | 'mitigation' | 'review' | 'not-reproduced' | 'impact' | 'stage';
+interface FxChainNode {
+    id: string;
+    /** Node title — rendered in the figure/mono face. */
+    label: string;
+    kind: FxChainNodeKind;
+    /** Caller-translated kind eyebrow; falls back to the raw kind key. */
+    kindLabel?: string;
+    /** Caller-translated muted subtitle. */
+    caption?: string;
+    /** true = verified badge, false = unverified badge, null/undefined = no badge. */
+    verified?: boolean | null;
+    /** Explicit column (0 = leftmost); omit to derive depth from the edges. */
+    column?: number;
+    /** Explicit row inside the column; omit to stack in declaration order. */
+    row?: number;
+}
+interface FxChainEdge {
+    source: string;
+    target: string;
+}
+/** Kind → severity token. Exported so callers can tint matching chips (the
+    stage list beside the canvas) from the same source of truth. */
+declare const FX_CHAIN_KIND_TONE: Record<FxChainNodeKind, string>;
+/**
+ * V2 exploit-chain canvas — the attack-path graph of design refs 04..07:
+ * kind-tinted node cards laid out left→right, curved edges, draggable nodes on
+ * a pannable/zoomable surface.
+ *
+ * Presentational: it takes a graph plus the currently selected node and emits
+ * clicks. Layout is derived from the edges (longest path from a source) unless
+ * a node pins its own column/row, so callers can hand over a plain chain.
+ *
+ *   <fx-ui-flow-canvas [nodes]="chainNodes" [edges]="chainEdges"
+ *                      [activeId]="stageId()" (nodeClick)="selectStage($event)" />
+ */
+declare class FlowCanvasComponent {
+    readonly nodes: _angular_core.InputSignal<FxChainNode[]>;
+    readonly edges: _angular_core.InputSignal<FxChainEdge[]>;
+    /** Selected/current node: full opacity + accent border; the rest dim. */
+    readonly activeId: _angular_core.InputSignal<string | null>;
+    /** Explicit canvas height; omit to size it from the number of stacked rows. */
+    readonly height: _angular_core.InputSignal<string>;
+    /** Caller-translated hint shown when the graph is empty. */
+    readonly emptyText: _angular_core.InputSignal<string>;
+    readonly nodeClick: _angular_core.OutputEmitterRef<string>;
+    /** 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. */
+    readonly flowNodes: _angular_core.Signal<Node[]>;
+    /**
+     * Edges stay identity-stable across selections: state lives in the template
+     * (read off `activeId`), so selecting a stage never re-creates them.
+     */
+    readonly flowEdges: _angular_core.Signal<Edge<unknown>[]>;
+    /** Nodes one hop from the selection — they stay lit alongside it. */
+    private readonly relatedIds;
+    readonly isEmpty: _angular_core.Signal<boolean>;
+    /**
+     * A linear chain needs one row, the design's converging entries need three —
+     * sizing from the layout keeps the card from leaving a tall empty band.
+     */
+    readonly resolvedHeight: _angular_core.Signal<string>;
+    kindTone(kind: FxChainNodeKind): string;
+    isActive(node: FxChainNode): boolean;
+    /** One hop from the selection: lit, but without the selected accent frame. */
+    isRelated(node: FxChainNode): boolean;
+    /** Nothing selected → every node reads at full strength. */
+    isDimmed(node: FxChainNode): boolean;
+    /** An edge touching the selection is part of the step being read. */
+    isEdgeActive(edge: Edge): boolean;
+    isEdgeDimmed(edge: Edge): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FlowCanvasComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlowCanvasComponent, "fx-ui-flow-canvas", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; }, never, never, true, never>;
+}
 declare class FlowConnection {
     readonly nodes: _angular_core.InputSignal<Node[]>;
     edges: Edge[];
@@ -11,4 +92,5 @@ declare class FlowConnection {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlowConnection, "fx-ui-flow-connection", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-export { FlowConnection };
+export { FX_CHAIN_KIND_TONE, FlowCanvasComponent, FlowConnection };
+export type { FxChainEdge, FxChainNode, FxChainNodeKind };