@foxeltech/angular-ui 0.0.14 → 0.3.0

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

@@ -1,4 +1,7 @@
 <button
+  [attr.type]="type"
+  [attr.aria-label]="ariaLabel || null"
+  [attr.aria-busy]="loading || null"
   [class]="class"
   [ngClass]="{
     'btn-default': buttonVariant === 'default',
@@ -10,7 +13,7 @@
   (click)="onClick()"
 >
   @if (loading) {
-    <div class="flex w-full items-center justify-center">
+    <div class="flex w-full items-center justify-center" aria-hidden="true">
       <svg
         [attr.fill]="
           buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'

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

@@ -0,0 +1,49 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+
+.chart-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(var(--bg-primary-hover) / 0.6);
+  font-weight: 500;
+  font-size: 1.1rem;
+  z-index: 2;
+  border-radius: 4px;
+}
+
+.chart-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 12px;
+  color: rgba(var(--text-secondary) / 1);
+}
+
+.chart-empty-icon {
+  width: 48px;
+  height: 48px;
+  opacity: 0.4;
+}
+
+.chart-empty-text {
+  font-size: 14px;
+  font-weight: 500;
+}

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

@@ -3,16 +3,17 @@
   [class.opacity-50]="disabled"
   [class.cursor-not-allowed]="disabled"
 >
+  <!-- sr-only (not `hidden`): keeps the input focusable and in the a11y tree -->
   <input
     type="checkbox"
-    class="hidden"
+    class="peer sr-only"
     [checked]="value"
     [disabled]="disabled"
     (change)="onInputChange($event)"
     (blur)="onTouched()"
   />
   <span
-    class="relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0"
+    class="relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0 peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50"
     [ngClass]="{
       'rounded-full': rounded,
       'rounded-sm': !rounded,

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

@@ -1,13 +1,14 @@
 <div class="flex flex-col mb-4 w-full text-left">
   @if (label) {
-    <label class="txt-field-label">
+    <label class="txt-field-label" [attr.for]="fieldId">
       {{ label }}
-      <span *ngIf="required" class="txt-required">*</span>
+      <span *ngIf="required" class="txt-required" aria-hidden="true">*</span>
     </label>
   }
 
   <div class="relative">
     <input
+      [id]="fieldId"
       [owlDateTimeTrigger]="picker"
       [owlDateTime]="picker"
       [placeholder]="placeholder"

package/src/lib/ui/components/datetime-picker/datetime-picker.component.scss

@@ -0,0 +1,147 @@
+/* Tailwind v4: component styles compile in isolation — @reference pulls in the theme for @apply without re-emitting it. */
+@reference '../../../styles/tailwind.css';
+
+// ─── Owl DateTime Picker Custom Styles ───────────────────────────────────────
+
+// Container
+::ng-deep .owl-dt-container {
+  @apply bg-bg-primary rounded-xl shadow-xl border border-border-default;
+  width: 320px !important;
+}
+
+// Calendar table base
+::ng-deep .owl-dt-calendar-table {
+  @apply w-full border-collapse;
+}
+
+// Default cell hover — override red debug color
+::ng-deep .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected) {
+  @apply bg-bg-hover;
+}
+
+// ── Current-month cell text color ─────────────────────────────────────────────
+// No !important here — lets out-month and disabled !important overrides win.
+// A direct declaration still beats the library's inherited rgba(0,0,0,.85).
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content {
+  color: rgb(var(--text-primary));
+}
+
+// Selected cell
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected {
+  background-color: rgb(var(--primary)) !important;
+  color: #fff !important;
+}
+
+// Today highlight (not selected)
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected) {
+  border-color: rgb(var(--primary)) !important;
+}
+
+// ── Disabled dates: text-text-placeholder ────────────────────────────────────
+// owl-dt-calendar-cell-disabled is on the <td>, content span is a direct child
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-disabled > .owl-dt-calendar-cell-content {
+  color: rgb(var(--text-placeholder)) !important;
+  opacity: 0.6 !important;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+// ── Other-month dates: text-text-secondary ────────────────────────────────────
+// In v20, owl-dt-calendar-cell-out is applied ON the <span.owl-dt-calendar-cell-content>
+// itself (via [ngClass]), NOT on the parent <td>. So target it directly.
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content.owl-dt-calendar-cell-out {
+  color: rgb(var(--text-secondary)) !important;
+  opacity: 0.6 !important;
+}
+
+// ── Timer input ───────────────────────────────────────────────────────────────
+::ng-deep .owl-dt-timer-content .owl-dt-timer-input {
+  @apply bg-bg-primary border border-border-strong text-text-primary rounded-lg;
+}
+
+// ── Period button (hide arrow) ────────────────────────────────────────────────
+::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow {
+  display: none;
+}
+
+// ── Set / Cancel footer buttons ───────────────────────────────────────────────
+// Library sets .owl-dt-container-buttons { height: 2em; color: #3f51b5 } — override both
+::ng-deep .owl-dt-container-buttons {
+  height: auto !important;
+  color: rgb(var(--text-primary)) !important; // reset inherited primary color on text
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid rgb(var(--border-default));
+}
+
+// Both buttons — explicit 32px height so inner height:100% resolves correctly
+::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button {
+  width: auto !important;
+  height: 32px !important;
+  border-radius: 6px !important;
+  width: 60px !important;
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  border: 1px solid rgb(var(--border-default)) !important;
+  background-color: rgb(var(--bg-primary)) !important;
+  color: rgb(var(--text-primary)) !important;
+  cursor: pointer;
+  transition: opacity 150ms ease;
+
+  &:hover {
+    background-color: rgb(var(--bg-hover)) !important;
+  }
+}
+
+// "Set" = last button — primary fill
+::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child {
+  background-color: rgb(var(--primary)) !important;
+  border-color: rgb(var(--primary)) !important;
+  color: #fff !important;
+  
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+// Inner content: height:100% now resolves against fixed 32px button, and
+// background must be transparent so the button's own bg shows through
+::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button .owl-dt-control-button-content {
+  height: 100% !important;
+  width: 100% !important;
+  padding: 0 !important;
+  background-color: transparent !important;
+  color: inherit !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+// ── Header / navigation ───────────────────────────────────────────────────────
+::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content {
+  @apply text-text-primary font-medium;
+}
+
+::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content {
+  @apply text-text-primary;
+}
+
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header {
+  @apply text-text-secondary;
+}
+
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th {
+  @apply text-text-secondary font-medium;
+}
+
+// ── Popup container border ────────────────────────────────────────────────────
+::ng-deep .owl-dt-inline-container,
+::ng-deep .owl-dt-popup-container {
+  @apply rounded-xl shadow-lg border border-border-strong;
+}

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.html

@@ -7,6 +7,7 @@
     @if (logo) {
       <img
         [src]="logo"
+        alt="Home"
         class="h-[20px] w-auto transition-all duration-300 ease-in-out"
         [ngClass]="{ 'scale-90': !isExpanded, 'ml-5': isExpanded }"
       />
@@ -35,6 +36,8 @@
   <button
     type="button"
     class="toggle-btn"
+    [attr.aria-label]="isExpanded ? 'Collapse navigation' : 'Expand navigation'"
+    [attr.aria-expanded]="isExpanded"
     (click)="toggleDrawer()"
     [matTooltip]="isExpanded ? 'Collapse' : 'Expand'"
     matTooltipClass="text-text-primary text-xs font-semibold"

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

@@ -0,0 +1,134 @@
+/* Tailwind v4: component styles compile in isolation — @reference pulls in the theme for @apply without re-emitting it. */
+@reference '../../../styles/tailwind.css';
+
+: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/input/input.component.html

@@ -1,9 +1,9 @@
 <div class="mb-4 text-left w-full text-text-primary" [class]="class">
   @if (label) {
-    <label class="block txt-field-label">
+    <label class="block txt-field-label" [attr.for]="fieldId">
       {{ label }}
       @if (required) {
-        <span class="txt-required">*</span>
+        <span class="txt-required" aria-hidden="true">*</span>
       }
       @if (tooltip) {
         <fx-ui-hero-icon
@@ -22,6 +22,7 @@
     <input
       appTrimOnBlur
       [appTrimOnBlurCollapse]="true"
+      [id]="fieldId"
       [type]="displayType"
       [placeholder]="placeholder"
       [disabled]="disabled"
@@ -30,6 +31,9 @@
       (blur)="onBlur()"
       (focus)="onFocus()"
       [attr.maxlength]="maxlength"
+      [attr.aria-invalid]="invalid || null"
+      [attr.aria-describedby]="invalid ? fieldId + '-error' : null"
+      [attr.aria-required]="required ? true : null"
       [class]="type === 'otp' ? 'input-otp' : 'input-default'"
       [class.input-invalid]="invalid"
       [class.pr-8]="type === 'password' || suffixIcon"
@@ -41,18 +45,26 @@
         class="absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary"
         (click)="onSuffixClick()"
         [disabled]="disabled"
+        [attr.aria-label]="
+          type === 'password'
+            ? (showPassword ? 'Hide password' : 'Show password')
+            : (suffixAriaLabel || null)
+        "
+        [attr.aria-pressed]="type === 'password' ? showPassword : null"
       >
         @if (type === 'password') {
           <fx-ui-hero-icon
             [icon]="showPassword ? 'eye-slash' : 'eye'"
             [size]="18"
             class="text-text-primary"
+            aria-hidden="true"
           ></fx-ui-hero-icon>
         } @else if (suffixIcon) {
           <fx-ui-hero-icon
             [icon]="suffixIcon"
             [size]="18"
             class="text-text-primary"
+            aria-hidden="true"
           ></fx-ui-hero-icon>
         }
       </button>
@@ -60,7 +72,7 @@
   </div>
 
   @if (invalid) {
-    <div class="txt-invalid">
+    <div class="txt-invalid" role="alert" [id]="fieldId + '-error'">
       {{ getErrorMessage(label) }}
     </div>
   }

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

@@ -0,0 +1,70 @@
+/* Tailwind v4: component styles compile in isolation — @reference pulls in the theme for @apply without re-emitting it. */
+@reference '../../../styles/tailwind.css';
+
+.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/master-detail/master-detail.component.css

@@ -0,0 +1,11 @@
+/* Full-width when stacked; fixed width beside the detail pane on lg+ (1080px). */
+.fx-md-list {
+  width: 100%;
+}
+
+@media (min-width: 1080px) {
+  .fx-md-list {
+    width: var(--fx-md-list-width, 420px);
+    flex-shrink: 0;
+  }
+}