@foxeltech/angular-ui 0.0.14 → 0.2.0

package/src/lib/ui/components/dnd-upload/dnd-upload.component.scss

@@ -0,0 +1,87 @@
+:host {
+  --dnd-accent: rgba(var(--gradient-primary-start) / 1);
+}
+
+.dnd-wrapper {
+  display: block;
+  width: 100%;
+}
+
+.dnd-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-height: 160px;
+  padding: 32px 24px;
+  border: 2px dashed color-mix(in srgb, var(--dnd-accent) 40%, transparent);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--dnd-accent) 4%, transparent);
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.dnd-area:hover {
+  border-color: color-mix(in srgb, var(--dnd-accent) 70%, transparent);
+  background: color-mix(in srgb, var(--dnd-accent) 8%, transparent);
+}
+
+.dnd-area:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dnd-accent) 20%, transparent);
+}
+
+.dnd-area.drag-over {
+  border-color: var(--dnd-accent);
+  background: color-mix(in srgb, var(--dnd-accent) 10%, transparent);
+}
+
+.dnd-icon {
+  color: var(--dnd-accent);
+}
+
+.dnd-text {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.dnd-link {
+  color: var(--dnd-accent);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.dnd-or {
+  color: rgba(var(--text-secondary) / 1);
+}
+
+.dnd-hint {
+  font-size: 12px;
+  color: rgba(var(--text-secondary) / 0.7);
+}
+
+.dnd-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .dnd-area {
+    min-height: 120px;
+    padding: 24px 16px;
+  }
+
+  .dnd-text {
+    font-size: 13px;
+  }
+}

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

@@ -0,0 +1,131 @@
+:host {
+  @apply block h-full;
+}
+
+.drawer-host-wrapper {
+  @apply relative h-full border-r border-border-default;
+}
+
+.drawer-container {
+  @apply px-2 h-full bg-bg-primary flex flex-col overflow-auto;
+  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Floating toggle button — sits on the right border, vertically centered */
+.toggle-btn {
+  @apply absolute top-1/2 -translate-y-1/2 z-50 flex items-center justify-center w-6 h-6 rounded-full bg-bg-primary border border-border-default cursor-pointer shadow-sm;
+  right: -12px; /* half of button width to straddle the border */
+  transition: all 200ms ease;
+
+  &:hover {
+    @apply bg-bg-hover shadow-md;
+  }
+
+  &:active {
+    transform: translateY(-50%) scale(0.9);
+  }
+
+  &:focus-visible {
+    @apply outline-2 outline-primary outline-offset-2;
+  }
+}
+
+.drawer-nav {
+  @apply flex-1 overflow-y-auto overflow-x-hidden py-2;
+
+  /* Custom scrollbar */
+  &::-webkit-scrollbar {
+    @apply w-1.5;
+  }
+
+  &::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @apply bg-border-default rounded-sm;
+
+    &:hover {
+      @apply bg-text-placeholder;
+    }
+  }
+}
+
+.drawer-item-wrapper {
+  @apply relative;
+}
+
+.drawer-item {
+  @apply flex items-center mt-1 w-full min-h-8 py-2 px-large border-none bg-transparent cursor-pointer no-underline text-text-primary relative rounded;
+  transition: all 200ms ease;
+
+  &:hover {
+    @apply bg-bg-hover text-text-primary scale-95;
+  }
+
+  &.active {
+    @apply bg-gradient-primary text-white font-medium;
+
+    .item-icon {
+      @apply text-white;
+    }
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &:focus-visible {
+    @apply outline-2 outline-primary outline-offset-2;
+  }
+
+  -webkit-tap-highlight-color: transparent;
+  @apply outline-none;
+}
+
+.item-content {
+  @apply flex items-center gap-3 w-full overflow-hidden;
+}
+
+.item-icon {
+  @apply flex-shrink-0;
+  color: inherit;
+}
+
+.item-label {
+  @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis text-[13px] leading-5 text-left;
+}
+
+.chevron-icon {
+  @apply flex-shrink-0 ml-auto text-text-primary;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.rotated {
+    transform: rotate(180deg);
+  }
+}
+
+.accordion-children {
+  @apply overflow-hidden;
+}
+
+.drawer-version {
+  @apply flex items-center justify-center py-3 px-4 text-text-placeholder text-[11px] border-t border-border-default select-none;
+  font-family: 'Roboto', monospace;
+}
+
+.drawer-version-dot {
+  @apply block w-1.5 h-1.5 rounded-full bg-text-placeholder;
+}
+
+/* Collapsed mode: center the icons */
+.drawer-container[style*='width: 64px'] {
+  .drawer-item {
+    @apply justify-center;
+    padding-left: 16px !important;
+  }
+
+  .item-content {
+    @apply justify-center;
+  }
+}

package/src/lib/ui/components/empty-state/empty-state.component.html

@@ -0,0 +1,9 @@
+<div
+  class="flex flex-col items-center justify-center gap-small w-full"
+  [style.minHeight]="height"
+>
+  @if (icon) {
+    <fx-ui-hero-icon class="text-text-placeholder" [icon]="icon" [size]="24"></fx-ui-hero-icon>
+  }
+  <div class="txt-default text-text-placeholder">{{ message }}</div>
+</div>

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

@@ -0,0 +1,12 @@
+<div class="flex flex-wrap items-center gap-small">
+  @for (option of options; track option.value) {
+    <button
+      type="button"
+      class="px-3 py-1 rounded-full txt-utility-caption font-medium transition-colors cursor-pointer"
+      [ngClass]="chipClass(option)"
+      (click)="select(option)"
+    >
+      {{ option.label }}
+    </button>
+  }
+</div>

package/src/lib/ui/components/info-field/info-field.component.html

@@ -0,0 +1,4 @@
+<div class="flex flex-col gap-small min-w-0">
+  <span class="txt-field-label !mb-0">{{ label }}</span>
+  <span class="txt-default" [ngClass]="valueClass">{{ displayValue }}</span>
+</div>

package/src/lib/ui/components/kanban-board/kanban-board.component.scss

@@ -0,0 +1,67 @@
+.kanban-board {
+  @apply w-full h-full overflow-x-auto;
+}
+
+.kanban-columns {
+  @apply flex gap-4 p-4 min-h-full;
+}
+
+.kanban-column {
+  @apply flex flex-col min-w-[300px] bg-gray-50 dark:bg-gray-800 rounded-lg;
+  flex-shrink: 0;
+}
+
+.kanban-column-header {
+  @apply flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700;
+}
+
+.kanban-column-title {
+  @apply text-lg font-semibold text-gray-900 dark:text-gray-100 m-0;
+}
+
+.kanban-column-count {
+  @apply px-2 py-1 text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full;
+}
+
+.kanban-column-content {
+  @apply flex-1 p-4 space-y-3 overflow-y-auto;
+  min-height: 200px;
+}
+
+.kanban-item {
+  @apply bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600;
+  @apply transition-shadow duration-200;
+  cursor: move;
+
+  &:hover {
+    @apply shadow-md;
+  }
+}
+
+.kanban-item-default {
+  @apply p-4 text-gray-900 dark:text-gray-100;
+}
+
+.kanban-item-placeholder {
+  @apply bg-gray-200 dark:bg-gray-600 rounded-lg border-2 border-dashed border-gray-400 dark:border-gray-500;
+  @apply opacity-50;
+  min-height: 60px;
+}
+
+.kanban-column-empty {
+  @apply flex items-center justify-center h-32 text-gray-400 dark:text-gray-500 text-sm;
+  @apply border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg;
+}
+
+// CDK Drag and Drop Styles
+.cdk-drag-preview {
+  @apply opacity-80 shadow-lg rounded-lg;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.kanban-column-content.cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

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

@@ -0,0 +1,15 @@
+<div class="flex flex-col gap-small w-full">
+  @if (label || caption) {
+    <div class="flex items-center justify-between gap-normal">
+      @if (label) {
+        <span class="txt-field-label !mb-0">{{ label }}</span>
+      }
+      @if (caption) {
+        <span class="txt-utility-caption text-text-secondary">{{ caption }}</span>
+      }
+    </div>
+  }
+  <div class="h-2 rounded-full bg-bg-hover overflow-hidden">
+    <div class="h-full rounded-full" [ngClass]="fillClass" [style.width.%]="percent"></div>
+  </div>
+</div>

package/src/lib/ui/components/rich-text-area/rich-text-area.component.scss

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+}
+
+.ql-toolbar {
+  @apply border-b border-border-default rounded-t p-2;
+}
+
+.ql-container {
+  @apply rounded-b;
+}
+
+.ql-editor {
+  @apply min-h-[200px] p-3 text-base;
+}

package/src/lib/ui/components/section-card/section-card.component.html

@@ -0,0 +1,9 @@
+<div class="card-common">
+  <div class="flex items-center gap-normal mb-large">
+    @if (icon) {
+      <fx-ui-hero-icon [ngClass]="iconClass" [icon]="icon" [size]="18"></fx-ui-hero-icon>
+    }
+    <span class="txt-heading-06">{{ title }}</span>
+  </div>
+  <ng-content></ng-content>
+</div>

package/src/lib/ui/components/severity-badges/severity-badges.component.html

@@ -0,0 +1,10 @@
+<div class="flex items-center gap-small">
+  @for (badge of badges; track badge.key) {
+    <span
+      class="px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer"
+      [ngClass]="badgeClass(badge)"
+      (click)="badgeClick.emit(badge.key)"
+      >{{ badge.label }}</span
+    >
+  }
+</div>

package/src/lib/ui/components/skeleton-detail/skeleton-detail.component.html

@@ -0,0 +1,22 @@
+<div class="flex flex-col gap-xl animate-pulse">
+  <div class="card-common">
+    <div class="flex items-start gap-normal">
+      <div class="w-10 h-10 rounded-lg bg-bg-hover shrink-0"></div>
+      <div class="flex-1 min-w-0 flex flex-col gap-normal">
+        <div class="h-5 w-1/2 rounded bg-bg-hover"></div>
+        <div class="h-3 w-3/4 rounded bg-bg-hover"></div>
+      </div>
+    </div>
+  </div>
+
+  @for (c of range(cards); track c) {
+    <div class="card-common flex flex-col gap-large">
+      <div class="h-4 w-1/3 rounded bg-bg-hover"></div>
+      <div class="flex flex-col gap-normal">
+        @for (r of range(rows); track r) {
+          <div class="h-3 rounded bg-bg-hover" [style.width.%]="rowWidth(r)"></div>
+        }
+      </div>
+    </div>
+  }
+</div>

package/src/lib/ui/components/skeleton-list/skeleton-list.component.html

@@ -0,0 +1,12 @@
+<div class="flex flex-col gap-normal animate-pulse">
+  @for (r of range(rows); track r) {
+    <div class="rounded-normal border border-border-default p-semi">
+      <div class="flex items-center gap-normal mb-small">
+        <div class="w-8 h-8 rounded-normal bg-bg-hover shrink-0"></div>
+        <div class="h-4 flex-1 rounded bg-bg-hover"></div>
+        <div class="h-5 w-12 rounded-full bg-bg-hover shrink-0"></div>
+      </div>
+      <div class="h-3 w-3/4 rounded bg-bg-hover"></div>
+    </div>
+  }
+</div>

package/src/lib/ui/components/stat-cards/stat-cards.component.html

@@ -0,0 +1,18 @@
+<div class="grid gap-normal" [ngStyle]="{ 'grid-template-columns': gridColumns }">
+  @for (card of cards; track card.label) {
+    <div class="card-common flex items-center gap-normal">
+      @if (card.icon) {
+        <div
+          class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
+          [ngClass]="boxClass(card)"
+        >
+          <fx-ui-hero-icon [icon]="card.icon" [size]="20"></fx-ui-hero-icon>
+        </div>
+      }
+      <div class="flex flex-col min-w-0">
+        <span class="txt-heading-04" [ngClass]="numClass(card)">{{ card.value }}</span>
+        <span class="txt-utility-caption text-text-secondary truncate">{{ card.label }}</span>
+      </div>
+    </div>
+  }
+</div>

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

@@ -0,0 +1,48 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.28s ease-in-out;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.underline {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background-color: rgb(var(--gradient-primary-start));
+  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;
+  transform: translateX(0);
+  width: 0;
+  margin-left: 32px;
+  margin-right: 32px;
+}
+
+.left-scroll-button {
+  @apply absolute left-0 top-0 h-full px-normal z-10 flex items-center bg-bg-primary transition-opacity duration-200;
+}
+
+.right-scroll-button {
+  @apply absolute right-0 top-0 h-full px-normal z-10 flex items-center bg-bg-primary transition-opacity duration-200;
+}
+
+.tab-bar-btn {
+  @apply relative px-large py-normal text-sm whitespace-nowrap transition-colors duration-200;
+}

package/tailwind.config.js

@@ -1,4 +1,22 @@
 module.exports = {
+  // Tone utilities are built dynamically (`text-${tone}`) by value-tone.util
+  // and fx-ui components, so content scanning can't see them — safelist keeps
+  // them generated in every host app.
+  safelist: [
+    { pattern: /^(text|bg)-(critical|danger|warning|success|information)$/ },
+    ...['critical', 'danger', 'warning', 'success', 'information'].map((t) => `bg-${t}/10`),
+    // Classes emitted from fx-ui component TypeScript (not scannable content):
+    'text-text-secondary',
+    'text-text-primary',
+    'text-text-focus',
+    'bg-bg-hover',
+    'bg-text-primary',
+    'hover:bg-gradient-primary-start/10',
+    'hover:text-gradient-primary-start',
+    'hover:opacity-50',
+    'font-mono',
+    'break-all',
+  ],
   theme: {
     extend: {
       colors: {

package/tailwind.css

@@ -5,7 +5,7 @@
 @import './animations.css';
 @import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
 @tailwind base;
-@tailwind component;
+@tailwind components;
 @tailwind utilities;
 
 html, body {