@foxeltech/angular-ui 0.7.108 → 0.7.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.7.108",
+  "version": "0.7.131",
   "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

@@ -361,11 +361,12 @@ input[type='password'] {
     inset 0 0 0 1px rgb(0 0 0 / 0.08),
     0 1px 2px rgb(0 0 0 / 0.12);
 }
-/* Icon-only button (no label): square h-8 × w-8, no side padding, so the
-   glyph sits dead-centre (anh Tú 04/09). Consumers may still size it with
-   utilities (`w-9 h-9`) — those win in the utilities layer. */
+/* Icon-only button (no label): square, no side padding, so the glyph sits
+   dead-centre (anh Tú 04/09). The width tracks `btn-common`'s height — 27px
+   since 17/09 — so it stays square; consumers may still size it with
+   utilities (`w-9 h-9`), which win in the utilities layer. */
 .fx-btn--icon {
-  width: 2rem;
+  width: 27px;
   padding-left: 0;
   padding-right: 0;
 }
@@ -631,6 +632,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);
@@ -971,7 +976,9 @@ input[type='password'] {
   font-size: var(--og-fs-xs);
   line-height: 1.5;
   white-space: nowrap;
-  font-weight: 500;
+  /* 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));
@@ -1032,3 +1039,15 @@ input[type='password'] {
 .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/styles/utilities.css

@@ -8,10 +8,15 @@
 }
 
 @utility btn-common {
-  /* Compact size (anh Tú 29/08): h-8 + 13px label — the pre-V2 h-10 read too
-     large against the V2 density. leading-none: arbitrary text-[13px] inherits
-     lh 1.5 and Archivo's uneven leading floats the ink ~1px above center. */
-  @apply flex text-[13px] leading-none h-8 font-semibold px-large py-small items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
+  /* The demo's `.og-button--sm` (anh Tú 17/09: compact như New Analysis) —
+     27px tall, 11.5px at weight 400, 12px sides, 7px radius. MEASURED off the
+     reference's own `.og-button--sm.bi-newbtn`, which is the topbar CTA: it
+     wore this shape through `!` overrides because the shared button was a size
+     above it. The h-8 / 13px / 600 this replaces was itself a step down from
+     pre-V2 h-10 (29/08); against V2 panel density it still read one notch
+     heavy. leading-none: an arbitrary font-size inherits lh 1.5 and Archivo's
+     uneven leading floats the ink ~1px above centre. */
+  @apply flex text-[length:var(--og-fs-xs)] leading-none h-[27px] font-normal px-[12px] py-[4px] items-center justify-center rounded-control shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
 }
 
 @utility btn-menu-common {

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/button/button.component.html

@@ -14,229 +14,41 @@
   [disabled]="disabled() || loading()"
   (click)="onClick()"
 >
-  @if (loading()) {
-    <div class="flex w-full items-center justify-center" aria-hidden="true">
-      <svg
-        [attr.fill]="
-          buttonVariant() !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'
-        "
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle cx="4" cy="12" r="0">
-          <animate
-            begin="0;spinner_z0Or.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="0;3"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_OLMs.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="4;12"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_UHR2.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="12;20"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_lo66"
-            begin="spinner_Aguh.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="3;0"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_z0Or"
-            begin="spinner_lo66.end"
-            attributeName="cx"
-            dur="0.001s"
-            values="20;4"
-            fill="freeze"
-          />
-        </circle>
-        <circle cx="4" cy="12" r="3">
-          <animate
-            begin="0;spinner_z0Or.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="4;12"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_OLMs.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="12;20"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_JsnR"
-            begin="spinner_UHR2.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="3;0"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_Aguh"
-            begin="spinner_JsnR.end"
-            attributeName="cx"
-            dur="0.001s"
-            values="20;4"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_Aguh.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="0;3"
-            fill="freeze"
-          />
-        </circle>
-        <circle cx="12" cy="12" r="3">
-          <animate
-            begin="0;spinner_z0Or.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="12;20"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_hSjk"
-            begin="spinner_OLMs.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="3;0"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_UHR2"
-            begin="spinner_hSjk.end"
-            attributeName="cx"
-            dur="0.001s"
-            values="20;4"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_UHR2.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="0;3"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_Aguh.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="4;12"
-            fill="freeze"
-          />
-        </circle>
-        <circle cx="20" cy="12" r="3">
-          <animate
-            id="spinner_4v5M"
-            begin="0;spinner_z0Or.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="3;0"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_OLMs"
-            begin="spinner_4v5M.end"
-            attributeName="cx"
-            dur="0.001s"
-            values="20;4"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_OLMs.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="0;3"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_UHR2.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="4;12"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_Aguh.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="12;20"
-            fill="freeze"
-          />
-        </circle>
-      </svg>
-    </div>
-  } @else {
-    <ng-container>
-      <div class="flex items-center justify-center gap-small">
-        @if (icon) {
-          <fx-ui-hero-icon
-            [icon]="icon"
-            [size]="16"
-            class="flex"
-            [ngClass]="{
-              'text-text-inverse': buttonVariant() === 'default',
-              'text-text-primary': buttonVariant() === 'alternative',
-              'text-accent-contrast': buttonVariant() === 'primary',
-              'text-surface': buttonVariant() === 'success',
-              'text-white': buttonVariant() === 'cta',
-            }"
-          ></fx-ui-hero-icon>
-        }
-        @if (label) {
-          <!-- text-box: optical centering — Archivo's leading floats ink up otherwise -->
-          <div class="[text-box:trim-both_cap_alphabetic]">{{ label }}</div>
-        }
-      </div>
-    </ng-container>
-  }
+  <!-- Loading keeps the LABEL, as the sign-in button does: a button that
+       swaps its text for a spinner collapses to a stub, and the row jumps.
+       The ring is that button's `.li-spin`, in the foreground the variant
+       already uses for its icon so it reads on a coloured ground. -->
+  <!-- 6px, the reference button's own gap; `gap-small` is 4px. -->
+  <div class="flex items-center justify-center gap-[6px]">
+    @if (loading()) {
+      <span
+        class="fx-btn__spin"
+        aria-hidden="true"
+        [ngClass]="{
+          'text-text-inverse': buttonVariant() === 'default',
+          'text-text-primary': buttonVariant() === 'alternative',
+          'text-accent-contrast': buttonVariant() === 'primary',
+          'text-surface': buttonVariant() === 'success',
+          'text-white': buttonVariant() === 'cta',
+        }"
+      ></span>
+    } @else if (icon) {
+      <fx-ui-hero-icon
+        [icon]="icon"
+        [size]="13"
+        class="flex"
+        [ngClass]="{
+          'text-text-inverse': buttonVariant() === 'default',
+          'text-text-primary': buttonVariant() === 'alternative',
+          'text-accent-contrast': buttonVariant() === 'primary',
+          'text-surface': buttonVariant() === 'success',
+          'text-white': buttonVariant() === 'cta',
+        }"
+      ></fx-ui-hero-icon>
+    }
+    @if (label) {
+      <!-- text-box: optical centering — Archivo's leading floats ink up otherwise -->
+      <div class="[text-box:trim-both_cap_alphabetic]">{{ label }}</div>
+    }
+  </div>
 </button>

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

@@ -0,0 +1,30 @@
+
+
+/* Loading ring — the sign-in button's `.li-spin`, sized to sit beside a label.
+   `currentColor` so the variant's own foreground class colours it. */
+.fx-btn__spin {
+  display: inline-block;
+  /* 12px, matching the button's 13px icon — 14 crowded the 27px box. */
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  opacity: 0.9;
+  animation: fx-btn-spin 0.8s linear infinite;
+}
+
+@keyframes fx-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* A ring that has stopped still marks the button as busy, and `aria-busy`
+   carries the state regardless. */
+@media (prefers-reduced-motion: reduce) {
+  .fx-btn__spin {
+    animation: none;
+  }
+}

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,6 +92,7 @@
       <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 ? 8 + level * 16 : 16"
@@ -96,7 +102,16 @@
         (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,6 +123,7 @@
       <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 ? 8 + level * 16 : 16"
@@ -117,7 +133,16 @@
         (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>
           }