@foxeltech/angular-ui 0.3.1 → 0.7.44

package/src/lib/ui/components/tab-group/tab-group.component.html

@@ -26,9 +26,15 @@
     #tabList
     role="tablist"
     class="relative flex overflow-x-auto no-scrollbar scroll-smooth"
+    [class.fx-tabs-frame]="variant() === 'page'"
     (scroll)="onScroll()"
     >
-    @for (tab of tabs.toArray(); track tab; let i = $index) {
+    <!-- 'page' variant: one raised pill that SLIDES to the active tab
+         (anh Tú 29/08 — same motion as fx-ui-segmented) -->
+    @if (variant() === 'page') {
+      <span #pagePill aria-hidden="true" class="fx-tabs-pill"></span>
+    }
+    @for (tab of tabs(); track tab; let i = $index) {
       <button
         type="button"
         role="tab"
@@ -37,31 +43,54 @@
         (click)="selectTab(i)"
         (keydown)="onTabKeydown($event, i)"
         class="tab-btn tab-bar-btn"
+        [class.tab-bar-btn-page]="variant() === 'page'"
         >
-        <div class="flex flex-row items-center justify-center">
+        <div class="flex flex-row items-center justify-center gap-xs">
           @if (tab.icon) {
             <fx-ui-hero-icon
               [icon]="tab.icon"
-              [size]="20"
+              [size]="variant() === 'page' ? 14 : 20"
               class="flex mr-[2px]"
-            [ngClass]="{
-              'text-gradient-primary-start mb-small': i === activeIndex,
-              'text-text-placeholder': i !== activeIndex,
-            }"
+              [ngClass]="
+                variant() === 'page'
+                  ? i === activeIndex
+                    ? 'text-strong'
+                    : 'text-text-placeholder'
+                  : i === activeIndex
+                    ? 'text-accent-fg mb-small'
+                    : 'text-text-placeholder'
+              "
             ></fx-ui-hero-icon>
           }
           <div
           [ngClass]="
-            i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'
+            variant() === 'page'
+              ? i === activeIndex
+                ? 'text-[13px] leading-none font-semibold text-strong [text-box:trim-both_cap_alphabetic]'
+                : 'text-[13px] leading-none font-medium text-muted [text-box:trim-both_cap_alphabetic]'
+              : i === activeIndex
+                ? 'txt-field-label text-accent-fg'
+                : 'txt-placeholder'
           "
             >
-            {{ tab.label }}
+            {{ tab.label() }}
           </div>
+          @if (tab.count() !== null) {
+            <span
+              class="txt-tag-label px-normal py-[1px] rounded-pill"
+              [ngClass]="badgeClass(tab)"
+              style="font-family: var(--og-font-figure)"
+              >
+              {{ tab.count() }}
+            </span>
+          }
         </div>
       </button>
     }
 
-    <span #underline class="underline" style="width: 0; transform: translateX(0)"></span>
+    @if (variant() !== 'page') {
+      <span #underline class="underline" style="width: 0; transform: translateX(0)"></span>
+    }
   </div>
 
   <button
@@ -89,10 +118,10 @@
 
 <!-- Tab content -->
 <div class="transition-all duration-300 ease-in-out mt-4">
-  @for (tab of tabs.toArray(); track tab; let i = $index) {
+  @for (tab of tabs(); track tab; let i = $index) {
     @if (i === activeIndex) {
       <div role="tabpanel" class="animate-fadeIn">
-        <ng-container *ngTemplateOutlet="tab.content"></ng-container>
+        <ng-container *ngTemplateOutlet="tab.content()"></ng-container>
       </div>
     }
   }

package/src/lib/ui/components/tab-group/tab-group.component.scss

@@ -28,7 +28,7 @@
   position: absolute;
   bottom: 0;
   height: 2px;
-  background-color: rgb(var(--gradient-primary-start));
+  background-color: rgb(var(--og-accent));
   transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1),
     width 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
   will-change: transform, width;
@@ -49,3 +49,43 @@
 .tab-bar-btn {
   @apply relative px-large py-normal text-sm whitespace-nowrap transition-colors duration-200;
 }
+
+/* V2 'page' variant: workspace tab strip — pills inside a rounded frame
+   (design refs 02..04), active pill lifted on the raised surface. */
+.fx-tabs-frame {
+  /* w-fit: the frame hugs its tabs (design refs 02..04) instead of spanning the
+     page; max-w-full keeps the inner scroll working when tabs overflow.
+     rounded-full: the design strip is a capsule in every theme, not the
+     theme control radius (refs 02..04 — anh Tú 28/08). */
+  @apply gap-xs p-[3px] w-fit max-w-full bg-surface-sunken border border-border rounded-full;
+}
+
+.tab-bar-btn-page {
+  /* py 5px: the design strip is slim (~36px capsule) — anh Tú 28/08.
+     The active background lives on .fx-tabs-pill (sliding thumb), so the
+     button itself only switches text colour. z-index keeps it above the pill. */
+  @apply px-semi py-[5px] rounded-full border border-transparent text-muted z-[1];
+
+  &[aria-selected='false']:hover {
+    @apply text-strong;
+  }
+}
+
+/* Sliding active pill for the 'page' variant — positioned from the active
+   tab's offsetLeft/offsetWidth (tabs hug content, widths differ), so it
+   scrolls with the strip and needs no scroll-time recompute. */
+.fx-tabs-pill {
+  @apply absolute rounded-full bg-surface-raised border border-border shadow-sm pointer-events-none;
+  top: 3px; /* frame p-[3px] inset */
+  bottom: 3px;
+  left: 0;
+  width: 0;
+  transform: translateX(0);
+  transition:
+    transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1),
+    width 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
+  will-change: transform, width;
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}

package/src/lib/ui/components/table-cell/table-cell.component.html

@@ -1,7 +1,7 @@
-@if (!loading) {
+@if (!loading()) {
   <div animate.enter="fade-in-animation" class="inline-block my-normal">
     <ng-content />
   </div>
 } @else {
-  <div animate.enter="fade-in-animation" class="skeleton-load my-semi" [class]="skeletonClass"></div>
+  <div animate.enter="fade-in-animation" class="skeleton-load my-semi" [class]="skeletonClass()"></div>
 }

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

@@ -6,18 +6,18 @@
   [attr.role]="clicked.observed ? 'button' : null"
   [attr.tabindex]="clicked.observed ? 0 : null"
   [class]="
-    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`
+    `flex flex-row gap-small ${rounded() ? 'tag-round' : 'tag-square'} tag-${type()}${solid() ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`
   "
 >
   @if (icon) {
     <fx-ui-hero-icon
-      [class]="`flex txt-tag-${type} ${solid && type !== 'default' ? 'text-white' : ''}`"
+      [class]="`flex txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-surface' : ''}`"
       [icon]="icon"
       [size]="18"
     ></fx-ui-hero-icon>
   }
 
-  <div [class]="`txt-tag-${type} ${solid && type !== 'default' ? 'text-white font-medium' : ''}`">
-    {{ label }}
+  <div [class]="`txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-surface font-medium' : ''}`">
+    {{ label() }}
   </div>
 </div>

package/src/lib/ui/components/theme-picker/theme-picker.component.html

@@ -0,0 +1,44 @@
+<button
+  type="button"
+  [matMenuTriggerFor]="themeMenu"
+  class="flex items-center gap-small px-normal py-small rounded-control border border-border-default bg-transparent cursor-pointer hover:bg-bg-hover transition-colors"
+  aria-label="Change theme"
+>
+  <span
+    class="w-4 h-4 rounded-full border border-border-strong/30 shrink-0"
+    [style.background]="
+      'linear-gradient(135deg, ' +
+      currentMeta().accent +
+      ' 50%, ' +
+      currentMeta().pageBg +
+      ' 50%)'
+    "
+  ></span>
+  <span class="txt-body-01 hidden md:inline">{{ currentMeta().label }}</span>
+  <fx-ui-hero-icon icon="chevron-down" [size]="14" class="flex text-text-secondary" />
+</button>
+
+<mat-menu #themeMenu="matMenu">
+  @for (theme of themes; track theme.name) {
+    <button
+      mat-menu-item
+      type="button"
+      (click)="select(theme.name)"
+      [attr.aria-current]="theme.name === current() ? 'true' : null"
+    >
+      <div class="flex items-center gap-normal min-w-40">
+        <span
+          class="w-5 h-5 rounded-full border border-border-strong/30 shrink-0"
+          [style.background]="
+            'linear-gradient(135deg, ' + theme.accent + ' 50%, ' + theme.pageBg + ' 50%)'
+          "
+        ></span>
+        <span class="txt-body-01 flex-1">{{ theme.label }}</span>
+        <span class="txt-utility-description">{{ theme.dark ? 'Dark' : 'Light' }}</span>
+        @if (theme.name === current()) {
+          <fx-ui-hero-icon icon="check" [size]="16" class="flex text-text-selected" />
+        }
+      </div>
+    </button>
+  }
+</mat-menu>

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

@@ -1,17 +1,17 @@
 <div
   animate.enter="horizontal-fade-in-animation"
   animate.leave="horizontal-fade-out-animation"
-  [attr.role]="type === 'error' ? 'alert' : 'status'"
+  [attr.role]="type() === 'error' ? 'alert' : 'status'"
   class="flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0"
   [ngClass]="{
-    'border-success': type === 'success',
-    'border-critical': type === 'error',
-    'border-warning': type === 'warning',
-    'border-information': type === 'info'
+    'border-success': type() === 'success',
+    'border-critical': type() === 'error',
+    'border-warning': type() === 'warning',
+    'border-information': type() === 'info'
   }"
   >
   <div class="" aria-hidden="true">
-    @switch (type) { @case('success') {
+    @switch (type()) { @case('success') {
       <fx-ui-hero-icon
         icon="check-circle"
         [solid]="true"
@@ -46,6 +46,6 @@
       @if (title) {
         <strong class="txt-field-label">{{ title }}</strong>
       }
-      <p class="txt-default">{{ message }}</p>
+      <p class="txt-default">{{ message() }}</p>
     </div>
   </div>

package/src/lib/ui/components/toast-container/toast-container.component.html

@@ -4,6 +4,7 @@
   @for (toast of toasts; track toast) {
     <fx-ui-toast
       class="pointer-events-auto"
+      [toastId]="toast.id"
       [message]="toast.message"
       [title]="toast.title"
       [type]="toast.type"

package/src/lib/ui/components/tree-diagram/tree-diagram.component.html

@@ -3,17 +3,17 @@
   <!-- ROOT -->
   <div
     #root
-    class="mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center"
+    class="mx-auto w-fit bg-accent text-accent-contrast px-7 py-3 rounded-md font-semibold text-center"
     >
-    {{ data.label }}
+    {{ data().label }}
   </div>
 
   <!-- CHILDREN -->
   <div class="mt-16 flex justify-center gap-16">
-    @for (child of data.children; track child) {
+    @for (child of data().children; track child) {
       <div
         #child
-        class="w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center"
+        class="w-48 bg-surface-raised text-strong border border-border px-4 py-4 rounded-lg text-center"
         >
         <div class="font-semibold text-lg">{{ child.label }}</div>
         <div class="mt-1 text-sm opacity-90">{{ child.status }}</div>
@@ -33,7 +33,7 @@
         [attr.y1]="line.y1"
         [attr.x2]="line.x2"
         [attr.y2]="line.y2"
-        stroke="#1f2937"
+        stroke="rgb(var(--og-border-strong))"
         stroke-width="2"
         />
     }

package/tailwind.css

@@ -8,11 +8,10 @@
 @import './components.css' layer(components);
 @import './dialogs.css' layer(components);
 @import './animations.css';
-@import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
 
 html,
 body {
-  font-family: 'Roboto';
+  font-family: var(--og-font-body);
   margin: 0;
   padding: 0;
   height: 100%;