@foxeltech/angular-ui 0.7.75 → 0.7.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.7.75",
+  "version": "0.7.101",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -14,7 +14,8 @@
     "@angular/material": "^20.2.7 || ^21.0.0",
     "@angular/cdk": "^20.2.7 || ^21.0.0",
     "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^7.0.0"
+    "@ngx-translate/http-loader": "^7.0.0",
+    "gsap": "^3.12.0"
   },
   "dependencies": {
     "tslib": "^2.3.0",

package/src/lib/styles/components.css

@@ -339,14 +339,35 @@ input[type='password'] {
   @apply font-mono text-sm text-text-primary tracking-normal;
 }
 
+/* ---- Nút: viền hairline + bóng mờ ở MỌI biến thể (anh Tú 04/09) --------
+   Demo `.og-button`: border `--og-rule`, hover `0 2px 7px rgba(0,0,0,.12)`;
+   `.bi-newbtn`: viền tối hơn nền 1 bậc + `0 1px 2px rgba(0,0,0,.15)`. Nút nền
+   đặc dùng viền inset tối 8% để không phải khai màu viền riêng cho gradient. */
 .btn-default {
   @apply btn-common bg-button-default hover:opacity-75 text-text-inverse;
+  box-shadow:
+    inset 0 0 0 1px rgb(0 0 0 / 0.08),
+    0 1px 2px rgb(0 0 0 / 0.12);
 }
 .btn-primary {
   @apply btn-common bg-gradient-primary hover:opacity-75 text-text-focus;
+  box-shadow:
+    inset 0 0 0 1px rgb(0 0 0 / 0.08),
+    0 1px 2px rgb(0 0 0 / 0.12);
 }
 .btn-success {
   @apply btn-common bg-gradient-success hover:opacity-75 text-surface;
+  box-shadow:
+    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. */
+.fx-btn--icon {
+  width: 2rem;
+  padding-left: 0;
+  padding-right: 0;
 }
 /* Nút hành động chính theo demo (`.bi-newbtn`): màu cố định, không phải accent. */
 /* ---- Tông severity theo ĐÚNG mô hình demo (đo 03/09) -----------------
@@ -604,13 +625,24 @@ input[type='password'] {
 }
 
 .btn-cta {
-  @apply btn-common bg-cta hover:bg-cta-hover text-white;
+  @apply btn-common bg-cta hover:bg-cta-hover text-white border border-cta-hover;
   box-shadow:
     inset 0 1px 0 rgb(255 255 255 / 0.18),
     0 1px 2px rgb(0 0 0 / 0.15);
 }
+.btn-cta:hover {
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.18),
+    0 2px 6px rgb(0 0 0 / 0.2);
+}
+/* Outline = `.og-button--outline`: nền surface, viền --og-border, bóng 1px;
+   hover nổi lên 0 2px 7px như demo. */
 .btn-alternative {
-  @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
+  @apply btn-common bg-surface hover:bg-bg-hover text-text-primary border border-border-default;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+}
+.btn-alternative:hover {
+  box-shadow: 0 2px 7px rgb(0 0 0 / 0.12);
 }
 .btn-menu-top {
   @apply btn-menu-common border-b border-border-default pt-small pb-semi;
@@ -731,6 +763,17 @@ input[type='password'] {
   max-height: calc(100vh - 315px);
   overflow: auto;
 }
+/* Phones: a data table must not squeeze its columns to a few px per cell —
+   give it a floor and let .table-page-container scroll it sideways
+   (anh Tú 04/09 mobile audit: Name column collapsed to one character/line). */
+@media (max-width: 719px) {
+  /* !important like the other .mat-mdc-table overrides above: this file is
+     imported into a cascade @layer, so an unlayered Material rule
+     (`.mat-mdc-table{min-width:100%}`) beats it whatever the specificity. */
+  .mat-mdc-table {
+    min-width: 640px !important;
+  }
+}
 .table-cell-padding {
   padding-top: 8px !important;
   padding-bottom: 8px !important;
@@ -766,8 +809,28 @@ input[type='password'] {
       rgb(var(--gradient-primary-end))
     ) border-box;
 }
+/* Skeleton block = the design's `.bi-sk` shimmer ("Loading States", 04/09):
+   text at 7% → 13% → 7% sweeping left→right over 1.15 s, 6px radius. One
+   rule for every skeleton in the product — route skeleton, table cells,
+   dashboard cards — so the boot splash, route and in-panel states match. */
 .skeleton-load {
-  @apply rounded bg-track animate-pulse motion-reduce:animate-none;
+  display: block;
+  border-radius: 6px;
+  background: linear-gradient(
+    90deg,
+    rgb(var(--og-text) / 0.07) 0px,
+    rgb(var(--og-text) / 0.13) 90px,
+    rgb(var(--og-text) / 0.07) 180px
+  );
+  background-size: 400px 100%;
+  animation: fx-shimmer 1.15s linear infinite;
+}
+@keyframes fx-shimmer {
+  0% { background-position: -260px 0; }
+  100% { background-position: 260px 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-load { animation: none; background: rgb(var(--og-text) / 0.08); }
 }
 
 /* ============================================================================

package/src/lib/styles/utilities.css

@@ -31,9 +31,15 @@
 }
 
 @utility card-common {
-  @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
+  @apply text-left px-xl py-large border border-border-default rounded-lg transition-colors duration-500 ease-in-out;
+  /* Demo `.og-panel` / `.og-statgrid`: hairline border + two soft layers.
+     Replaces Tailwind shadow-sm, which reads harder at the edges. */
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.04),
+    0 3px 8px rgb(0 0 0 / 0.05);
 }
 
 @utility tag-common {
-  @apply flex min-w-7 px-[10px] py-[2px] leading-5 hover:opacity-70 items-center justify-center;
+  /* design .og-badge: 3px 10px (anh Tú 04/09: pills read too thin at 2px) */
+  @apply flex min-w-7 px-[10px] py-[3px] leading-5 hover:opacity-70 items-center justify-center;
 }

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

@@ -0,0 +1,262 @@
+/* Demo topbar breadcrumb, measured 04/09 (getComputedStyle on the preview):
+   nav gap 7px · plain crumb 12.5px/500 muted · chip 11.5px/600, 1px border,
+   radius-control, 0 1px 2px .04 shadow, padding 4px 12px · listbox 220px min,
+   radius-card, 0 10px 28px .14 shadow. Plain CSS on tokens so the component
+   does not depend on the consuming app's Tailwind scan. */
+:host {
+  display: block;
+  min-width: 0;
+}
+
+.fx-crumbs {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.fx-crumb-sep {
+  flex: 0 0 auto;
+  padding: 0 2px;
+  font-size: 13px;
+  color: rgb(var(--og-text-faint));
+}
+
+.fx-crumb-link {
+  flex: 0 0 auto;
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--og-fs-sm);
+  font-weight: 500;
+  letter-spacing: 0.005em;
+  color: rgb(var(--og-text-muted));
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.fx-crumb-link:hover {
+  color: rgb(var(--og-text));
+}
+
+.fx-crumb-current {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--og-fs-sm);
+  font-weight: 600;
+  color: rgb(var(--og-text));
+}
+
+.fx-crumb-chip {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: 320px;
+  padding: 4px 12px;
+  line-height: 1.5;
+  border: 1px solid rgb(var(--og-border));
+  border-radius: var(--og-radius-control);
+  background: rgb(var(--og-surface));
+  font-size: var(--og-fs-xs);
+  font-weight: 600;
+  color: rgb(var(--og-text));
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: box-shadow 0.12s, border-color 0.12s;
+}
+.fx-crumb-chip:hover,
+.fx-crumb-chip[aria-expanded='true'] {
+  box-shadow: 0 2px 7px rgb(0 0 0 / 0.1);
+}
+.fx-crumb-chip--mono {
+  font-family: var(--og-font-mono);
+}
+
+/* ---- switcher panel ---------------------------------------------------- */
+.fx-crumb-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 60;
+  min-width: 240px;
+  max-width: min(380px, 90vw);
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+  background: rgb(var(--og-surface));
+  border: 1px solid rgb(var(--og-border));
+  border-radius: var(--og-radius-card);
+  box-shadow: 0 10px 28px rgb(0 0 0 / 0.14);
+  text-align: left;
+  white-space: nowrap;
+  animation: fx-crumb-panel-in 0.16s ease-out;
+}
+@keyframes fx-crumb-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fx-crumb-panel {
+    animation: none;
+  }
+}
+
+.fx-crumb-panel__title {
+  padding: 6px 12px 8px;
+  margin-bottom: 4px;
+  font-size: var(--og-fs-2xs);
+  letter-spacing: 0.02em;
+  color: rgb(var(--og-text-faint));
+  border-bottom: 1px solid rgb(var(--og-border-subtle));
+}
+
+.fx-crumb-panel__filter {
+  margin: 2px 6px 6px;
+  padding: 6px 10px;
+  border: 1px solid rgb(var(--og-border));
+  border-radius: var(--og-radius-control);
+  background: rgb(var(--og-surface-sunken));
+  color: rgb(var(--og-text));
+  font-family: var(--og-font-body);
+  font-size: var(--og-fs-xs);
+  outline: none;
+}
+.fx-crumb-panel__filter:focus {
+  border-color: rgb(var(--og-accent));
+}
+
+.fx-crumb-panel__opt {
+  appearance: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 0;
+  border-radius: var(--og-radius-control);
+  background: transparent;
+  font-family: var(--og-font-body);
+  font-size: var(--og-fs-sm);
+  font-weight: 400;
+  color: rgb(var(--og-text-muted));
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.fx-crumb-panel--mono .fx-crumb-panel__opt {
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-xs);
+}
+.fx-crumb-panel__opt:hover {
+  background: rgb(var(--og-surface-sunken));
+}
+.fx-crumb-panel__opt--on {
+  font-weight: 600;
+  color: rgb(var(--og-text));
+}
+.fx-crumb-panel__meta {
+  margin-left: auto;
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-2xs);
+  color: rgb(var(--og-text-faint));
+}
+.fx-crumb-panel__opt > fx-ui-hero-icon:last-child {
+  margin-left: auto;
+}
+.fx-crumb-panel__opt > .fx-crumb-panel__meta + fx-ui-hero-icon {
+  margin-left: 0;
+}
+
+.fx-crumb-panel__empty {
+  padding: 8px 12px;
+  font-size: var(--og-fs-xs);
+  color: rgb(var(--og-text-faint));
+}
+
+.fx-crumb-panel__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 12px;
+}
+.fx-crumb-panel__skeleton span {
+  display: block;
+  height: 10px;
+  border-radius: 4px;
+  background: rgb(var(--og-border-subtle));
+  animation: fx-crumb-pulse 1.2s ease-in-out infinite;
+}
+.fx-crumb-panel__skeleton span:nth-child(1) { width: 62%; }
+.fx-crumb-panel__skeleton span:nth-child(2) { width: 48%; animation-delay: 0.15s; }
+.fx-crumb-panel__skeleton span:nth-child(3) { width: 55%; animation-delay: 0.3s; }
+@keyframes fx-crumb-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+
+.fx-crumb-panel__rule {
+  margin: 4px 0;
+  border-top: 1px solid rgb(var(--og-border-subtle));
+}
+
+.fx-crumb-panel__more {
+  appearance: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  border: 0;
+  border-radius: var(--og-radius-control);
+  background: transparent;
+  font-family: var(--og-font-body);
+  font-size: var(--og-fs-xs);
+  color: rgb(var(--og-text-muted));
+  text-align: left;
+  cursor: pointer;
+}
+.fx-crumb-panel__more:hover {
+  background: rgb(var(--og-surface-sunken));
+  color: rgb(var(--og-text));
+}
+
+.fx-crumb-panel__create {
+  appearance: none;
+  width: calc(100% - 12px);
+  margin: 4px 6px 2px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px;
+  border: 0;
+  border-radius: var(--og-radius-control);
+  background: rgb(var(--og-accent-soft-bg));
+  color: rgb(var(--og-accent-soft-fg));
+  font-family: var(--og-font-body);
+  font-size: var(--og-fs-sm);
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.fx-crumb-panel__create:hover {
+  background: rgb(var(--og-accent));
+  color: rgb(var(--og-accent-contrast));
+}
+
+/* Text utilities used in the template — kept local so the chip renders the
+   same in every consumer regardless of its Tailwind scan. */
+.text-accent { color: rgb(var(--og-accent)); }
+.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; }

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

@@ -0,0 +1,91 @@
+<nav aria-label="Breadcrumb" class="fx-crumbs">
+  @for (crumb of crumbs(); track $index; let last = $last; let i = $index) {
+    @if (i > 0) {
+      <span aria-hidden="true" class="fx-crumb-sep">/</span>
+    }
+    @if (isChip(crumb)) {
+      <span class="relative inline-flex min-w-0">
+        <button
+          type="button"
+          class="fx-crumb-chip"
+          [class.fx-crumb-chip--mono]="crumb.mono"
+          [attr.aria-haspopup]="crumb.switcher ? 'listbox' : null"
+          [attr.aria-expanded]="crumb.switcher ? openIndex() === i : null"
+          [attr.title]="crumb.switcher?.title || crumb.label"
+          (click)="onChipClick(crumb, i, $event)"
+        >
+          @if (crumb.icon) {
+            <fx-ui-hero-icon [icon]="crumb.icon" [size]="13" class="flex shrink-0 text-accent" />
+          }
+          <span class="truncate">{{ crumb.label }}</span>
+          @if (crumb.switcher) {
+            <fx-ui-hero-icon icon="chevron-down" [size]="10" class="flex shrink-0 text-faint" />
+          }
+        </button>
+
+        @if (crumb.switcher; as sw) {
+          @if (openIndex() === i) {
+            <div role="listbox" class="fx-crumb-panel" [class.fx-crumb-panel--mono]="sw.mono">
+              <div class="fx-crumb-panel__title">{{ sw.title }}</div>
+              @if (sw.filterPlaceholder) {
+                <input
+                  type="search"
+                  class="fx-crumb-panel__filter"
+                  [placeholder]="sw.filterPlaceholder"
+                  [attr.aria-label]="sw.filterPlaceholder"
+                  [value]="keyword()"
+                  (input)="onFilter(crumb, $any($event.target).value)"
+                  (click)="$event.stopPropagation()"
+                />
+              }
+              @if (loading() && options().length === 0) {
+                <div class="fx-crumb-panel__skeleton" aria-busy="true">
+                  <span></span><span></span><span></span>
+                </div>
+              } @else if (options().length === 0) {
+                <div class="fx-crumb-panel__empty">{{ sw.emptyLabel || '—' }}</div>
+              }
+              @for (opt of options(); track opt.value) {
+                <button
+                  type="button"
+                  role="option"
+                  class="fx-crumb-panel__opt"
+                  [class.fx-crumb-panel__opt--on]="opt.value === sw.selected"
+                  [attr.aria-selected]="opt.value === sw.selected"
+                  (click)="pick(opt, $event)"
+                >
+                  <span class="truncate">{{ opt.label }}</span>
+                  @if (opt.meta) {
+                    <span class="fx-crumb-panel__meta">{{ opt.meta }}</span>
+                  }
+                  @if (opt.value === sw.selected) {
+                    <fx-ui-hero-icon icon="check" [size]="13" class="flex shrink-0 text-strong" />
+                  }
+                </button>
+              }
+              @if (sw.viewAll || sw.create) {
+                <div class="fx-crumb-panel__rule"></div>
+              }
+              @if (sw.viewAll; as more) {
+                <button type="button" class="fx-crumb-panel__more" (click)="go($event, more.url)">
+                  <fx-ui-hero-icon icon="ellipsis-horizontal" [size]="13" class="flex shrink-0 text-faint" />
+                  {{ more.label }}
+                </button>
+              }
+              @if (sw.create; as create) {
+                <button type="button" class="fx-crumb-panel__create" (click)="go($event, create.url)">
+                  <fx-ui-hero-icon icon="plus" [size]="14" class="flex shrink-0" />
+                  {{ create.label }}
+                </button>
+              }
+            </div>
+          }
+        }
+      </span>
+    } @else if (!last && crumb.url) {
+      <a class="fx-crumb-link" [href]="crumb.url" (click)="go($event, crumb.url)">{{ crumb.label }}</a>
+    } @else {
+      <span class="fx-crumb-current">{{ crumb.label }}</span>
+    }
+  }
+</nav>

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

@@ -4,6 +4,7 @@
   [attr.aria-busy]="loading() || null"
   [class]="class()"
   [ngClass]="{
+    'fx-btn--icon': !!icon && !label,
     'btn-default': buttonVariant() === 'default',
     'btn-primary': buttonVariant() === 'primary',
     'btn-success': buttonVariant() === 'success',

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

@@ -3,7 +3,7 @@
     <button
       type="button"
       [attr.aria-pressed]="isActive(option)"
-      class="flex items-center gap-small px-semi py-xs rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors"
+      class="flex items-center gap-small px-[11px] py-[4px] rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors"
       [ngClass]="pillClass(option)"
       (click)="valueChange.emit(option.value)"
     >

package/src/lib/ui/components/load-status/load-status.component.css

@@ -0,0 +1,96 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fx-load-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-2xs);
+  color: rgb(var(--og-text-muted));
+  white-space: nowrap;
+}
+.fx-load-status--idle {
+  color: rgb(var(--og-text-faint));
+}
+.fx-load-dot {
+  color: rgb(var(--og-positive));
+}
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.fx-load-spinner {
+  display: inline-block;
+  flex: none;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  border: 2px solid rgb(var(--og-text) / 0.14);
+  border-top-color: rgb(var(--og-accent));
+  animation: fx-load-spin 0.8s linear infinite;
+}
+@keyframes fx-load-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.fx-load-reload {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--og-radius-control);
+  background: transparent;
+  color: rgb(var(--og-text-muted));
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+.fx-load-reload:hover {
+  background: rgb(var(--og-surface-sunken));
+  color: rgb(var(--og-text));
+}
+
+/* 2px indeterminate bar along the top edge of the positioned ancestor */
+.fx-load-bar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 2px;
+  overflow: hidden;
+  background: rgb(var(--og-accent) / 0.18);
+  pointer-events: none;
+}
+.fx-load-bar__run {
+  width: 38%;
+  height: 100%;
+  border-radius: 2px;
+  background: rgb(var(--og-accent));
+  animation: fx-load-indet 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+@keyframes fx-load-indet {
+  0% { transform: translateX(-100%); }
+  60% { transform: translateX(160%); }
+  100% { transform: translateX(160%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fx-load-spinner,
+  .fx-load-bar__run {
+    animation: none;
+  }
+}

package/src/lib/ui/components/load-status/load-status.component.html

@@ -0,0 +1,20 @@
+@if (bar() && status.loading()) {
+  <div class="fx-load-bar" aria-hidden="true"><div class="fx-load-bar__run"></div></div>
+}
+<div class="fx-load-status" role="status" aria-live="polite" [class.fx-load-status--idle]="!status.loading()">
+  @if (status.loading()) {
+    <span class="fx-load-spinner" aria-hidden="true"></span>
+    <span class="truncate">{{ loadingText() }}</span>
+  } @else {
+    <span class="fx-load-dot" aria-hidden="true">●</span>
+    <span class="truncate">{{ idleText() }}</span>
+  }
+</div>
+@if (showReload()) {
+  <button type="button" class="fx-load-reload" [attr.aria-label]="reloadLabel()" [title]="reloadLabel()" (click)="onReload()">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M21 12a9 9 0 1 1-3.1-6.8" />
+      <path d="M21 3v6h-6" />
+    </svg>
+  </button>
+}