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

@foxeltech/angular-ui 0.4.0 → 0.7.44

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 (165) hide show

package/tokens.css CHANGED Viewed

@@ -3,16 +3,43 @@
  * 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));
+  /* ---- 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));
@@ -61,14 +88,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 +114,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,7 +15,13 @@ 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>;
@@ -44,9 +50,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 };