@foxeltech/angular-ui 0.7.106 → 0.7.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.7.106",
+  "version": "0.7.124",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,8 @@
     "@microsoft/signalr": "^10.0.0",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0"
+    "d3-zoom": "^3.0.0",
+    "lucide-angular": "^1.0.0"
   },
   "exports": {
     "./tailwind.css": "./tailwind.css",

package/src/lib/styles/components.css

@@ -631,6 +631,10 @@ input[type='password'] {
     0 1px 2px rgb(0 0 0 / 0.15);
 }
 .btn-cta:hover {
+  /* The edge darkens a step past the fill — reference `.bi-newbtn:hover`
+     (measured 16/09). Without it the button only changed fill and shadow, so
+     the hover read softer than the design's. */
+  border-color: var(--color-cta-hover-border);
   box-shadow:
     inset 0 1px 0 rgb(255 255 255 / 0.18),
     0 2px 6px rgb(0 0 0 / 0.2);
@@ -849,3 +853,200 @@ 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;
+  /* 400, per the reference's risk badge ("High · 82", measured 16/09). At 500
+     it sat a step heavier than every other 11.5px label around it. */
+  font-weight: 400;
+}
+.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));
+}
+
+/* A tooltip must never take the pointer. Material gives its overlay pane
+   `pointer-events: auto`, and with the drawer COLLAPSED a nav item's tooltip
+   opens at x≈70..110 while the collapse/expand button sits at 58..82 — the
+   tooltip covered the button's right half and swallowed the click, which is
+   why the toggle "sometimes" did nothing (MEASURED 16/09). Nothing in a
+   tooltip is interactive, so this is safe everywhere. */
+.mat-mdc-tooltip-panel,
+.mat-mdc-tooltip,
+.mat-mdc-tooltip-panel > * {
+  pointer-events: none !important;
+}

package/src/lib/styles/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/src/lib/ui/components/bar-list/bar-list.component.html

@@ -1,29 +1,30 @@
-<div class="flex flex-col gap-small">
-  @for (item of items(); track item.label) {
+<!-- Ranked list, to the reference's "Top projects by risk" (measured in the
+     browser 16/09): the SCORE leads, right-aligned in a 70px column, then the
+     label in a 150px column, then a 3px track taking the rest. It used to be
+     label-left / score-right with a 5px full-width track underneath, which is a
+     different object — two lines per row instead of one. -->
+<div class="fx-barlist flex flex-col">
+  @for (item of items(); track item.label; let first = $first) {
     <button
       type="button"
-      class="text-left rounded-control px-normal py-small -mx-normal transition-colors"
+      class="fx-barlist__row text-left flex items-center"
       [class.hover:bg-surface-sunken]="interactive()"
       [class.cursor-default]="!interactive()"
       [tabindex]="interactive() ? 0 : -1"
       (click)="onSelect(item)"
     >
-      <div class="flex items-baseline justify-between gap-normal">
-        <span class="txt-body-medium-01 truncate">{{ item.label }}</span>
-        <span class="text-sm font-semibold text-strong shrink-0" style="font-family: var(--og-font-figure)">
-          {{ item.valueLabel ?? item.value }}
-        </span>
-      </div>
-      @if (item.meta) {
-        <div class="txt-utility-description truncate">{{ item.meta }}</div>
-      }
-      <div class="mt-xs h-[var(--og-track-h)] rounded-pill bg-track overflow-hidden">
-        <div
-          class="h-full rounded-pill transition-all duration-500"
-          [ngClass]="barClass(item)"
+      <span class="fx-barlist__score shrink-0">{{ item.valueLabel ?? item.value }}</span>
+      <span class="fx-barlist__label shrink-0 truncate">{{ item.label }}</span>
+      <span class="fx-barlist__track flex-1">
+        <span
+          class="fx-barlist__fill block"
+          [class.fx-barlist__fill--lead]="first"
           [style.width.%]="widthOf(item)"
-        ></div>
-      </div>
+        ></span>
+      </span>
     </button>
+    @if (item.meta) {
+      <div class="fx-barlist__meta truncate">{{ item.meta }}</div>
+    }
   }
 </div>

package/src/lib/ui/components/bar-list/bar-list.component.scss

@@ -0,0 +1,63 @@
+@reference '../../../styles/tailwind.css';
+
+/* Metrics from the reference (measured 16/09): rows 8px apart, each 18px tall
+   with a 10px gap between its three cells. */
+.fx-barlist {
+  gap: 8px;
+}
+
+.fx-barlist__row {
+  gap: 10px;
+  min-height: 18px;
+  /* A right gutter so the bar stops short of the panel edge (anh Tú 16/09).
+     The reference's row is 387px wide and its 147px track happens to end level
+     with the card's padding; this panel is twice that, so a track that fills
+     the remainder runs right up to the edge and reads as an overflow. */
+  padding: 0 24px 0 0;
+  background: transparent;
+  border: 0;
+}
+
+/* Score first, right-aligned in its own column — that alignment is what makes
+   the numbers read as a ranked column rather than trailing labels. */
+.fx-barlist__score {
+  width: 70px;
+  text-align: right;
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-sm);
+  font-weight: 400;
+  color: rgb(var(--og-text));
+}
+
+.fx-barlist__label {
+  width: 150px;
+  font-size: var(--og-fs-sm);
+  font-weight: 400;
+  color: rgb(var(--og-text-muted));
+}
+
+/* A 3px hairline track, square ends — not the 5px pill it was. */
+.fx-barlist__track {
+  height: 3px;
+  background: rgb(var(--og-track));
+  overflow: hidden;
+}
+
+/* Every bar is muted EXCEPT the leader, which takes the accent. The reference
+   ranks by one colour and highlights the top row; tone-per-row turned the
+   panel into a severity chart, which is the donut's job, not this one. */
+.fx-barlist__fill {
+  height: 100%;
+  background: rgb(var(--og-text-muted));
+  transition: width 500ms ease;
+}
+
+.fx-barlist__fill--lead {
+  background: rgb(var(--og-accent));
+}
+
+.fx-barlist__meta {
+  font-size: var(--og-fs-2xs);
+  color: rgb(var(--og-text-faint));
+  padding-left: 80px;
+}

package/src/lib/ui/components/breadcrumb/breadcrumb.component.css

@@ -260,3 +260,34 @@
 .text-faint { color: rgb(var(--og-text-faint)); }
 .text-strong { color: rgb(var(--og-text)); }
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+
+/* CTA crumb — the reference's "＋ Create project" at the end of the Project
+   Management trail (measured 16/09: 24px tall, 4px 10px 4px 8px, gap 5,
+   10.5px/600, radius 7, a light accent fill with an accent border).
+   The exact demo colours are #eaf1fa / #b9cde6 / #2a4f7c; the accent-soft
+   TOKENS are used instead so the pill follows the theme in all six — they sit
+   within ~3 of those values in light mode, and the border is mixed from the
+   accent rather than hard-coded because no token matches it. */
+.fx-crumb-cta {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  padding: 4px 10px 4px 8px;
+  line-height: 1.5;
+  border: 1px solid color-mix(in srgb, rgb(var(--og-accent)) 35%, transparent);
+  border-radius: var(--og-radius-control);
+  background: rgb(var(--og-accent-soft-bg));
+  color: rgb(var(--og-accent-soft-fg));
+  font-size: var(--og-fs-2xs);
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 130ms ease, border-color 130ms ease;
+}
+
+.fx-crumb-cta:hover {
+  background: color-mix(in srgb, rgb(var(--og-accent)) 16%, rgb(var(--og-accent-soft-bg)));
+  border-color: color-mix(in srgb, rgb(var(--og-accent)) 55%, transparent);
+}

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

@@ -3,7 +3,12 @@
     @if (i > 0) {
       <span aria-hidden="true" class="fx-crumb-sep">/</span>
     }
-    @if (isChip(crumb)) {
+    @if (crumb.cta) {
+      <button type="button" class="fx-crumb-cta" (click)="go($event, crumb.url || '')">
+        <fx-ui-hero-icon [icon]="crumb.icon || 'plus'" [size]="13" class="flex shrink-0" />
+        <span class="truncate">{{ crumb.label }}</span>
+      </button>
+    } @else if (isChip(crumb)) {
       <span class="relative inline-flex min-w-0">
         <button
           type="button"

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

@@ -1,10 +1,15 @@
 <div class="drawer-host-wrapper">
   <a href="/" class="drawer-brand" [class.is-collapsed]="!isExpanded">
-    @if (logo) {
-      <img [src]="logo" alt="Home" class="drawer-brand-mark" />
-    } @else {
-      <div class="drawer-brand-mark"></div>
-    }
+    <!-- Logo sits in its own sunken tile (reference `.sb-logo`, measured 16/09):
+         the tile is what carries the hover border, so the mark keeps its own
+         size and nothing shifts by a pixel when that border appears. -->
+    <span class="drawer-brand-logo">
+      @if (logo) {
+        <img [src]="logo" alt="Home" class="drawer-brand-mark" />
+      } @else {
+        <span class="drawer-brand-mark"></span>
+      }
+    </span>
     @if (isExpanded && (logoText || logoSubtext)) {
       <span class="drawer-brand-copy">
         @if (logoText) {
@@ -87,16 +92,26 @@
       <a
         [routerLink]="item.route"
         class="drawer-item"
+        [class.is-collapsed]="!isExpanded"
         [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"
         (click)="onItemClick(item, $event)"
         >
         <div class="item-content">
-          <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
+          @if (item.iconData) {
+            <lucide-icon
+              [img]="item.iconData"
+              [size]="isExpanded ? 13 : 18"
+              class="item-icon"
+              [class.item-icon--solid]="item.iconSolid"
+            />
+          } @else {
+            <fx-ui-hero-icon [icon]="item.icon" [size]="isExpanded ? 13 : 18" class="item-icon"></fx-ui-hero-icon>
+          }
           @if (isExpanded) {
             <span class="item-label">{{ item.label }}</span>
           }
@@ -108,16 +123,26 @@
       <button
         type="button"
         class="drawer-item"
+        [class.is-collapsed]="!isExpanded"
         [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"
         (click)="onItemClick(item, $event)"
         >
         <div class="item-content">
-          <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
+          @if (item.iconData) {
+            <lucide-icon
+              [img]="item.iconData"
+              [size]="isExpanded ? 13 : 18"
+              class="item-icon"
+              [class.item-icon--solid]="item.iconSolid"
+            />
+          } @else {
+            <fx-ui-hero-icon [icon]="item.icon" [size]="isExpanded ? 13 : 18" class="item-icon"></fx-ui-hero-icon>
+          }
           @if (isExpanded) {
             <span class="item-label">{{ item.label }}</span>
           }