@foxeltech/angular-ui 0.0.14 → 0.3.0

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

@@ -0,0 +1,70 @@
+<div class="flex flex-col lg:flex-row items-start gap-xl" [style.--fx-md-list-width]="listWidth">
+  <!-- Master: list pane -->
+  <div class="fx-md-list card-common">
+    <ng-content select="[mdHeader]"></ng-content>
+    <ng-content select="[mdFilters]"></ng-content>
+    <div
+      class="flex flex-col gap-normal overflow-auto pr-xs"
+      [style.maxHeight]="maxListHeight"
+      role="listbox"
+      [attr.aria-label]="listLabel || null"
+    >
+      @if (table.loading) {
+        <fx-ui-skeleton-list [rows]="table.pageSize"></fx-ui-skeleton-list>
+      } @else {
+        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {
+          <button
+            type="button"
+            role="option"
+            [id]="optionId(i)"
+            [attr.aria-selected]="isSelected(row)"
+            [tabindex]="isSelected(row) ? 0 : -1"
+            (click)="table.selectItem(row)"
+            (keydown)="onKeydown($event, i)"
+            class="text-left rounded-lg border p-semi transition-colors"
+            [ngClass]="
+              isSelected(row)
+                ? 'border-gradient-primary-start bg-gradient-primary-start/5'
+                : 'border-border-default hover:border-border-interactive bg-bg-primary'
+            "
+          >
+            <ng-container
+              [ngTemplateOutlet]="rowTemplate"
+              [ngTemplateOutletContext]="{ $implicit: row, selected: isSelected(row) }"
+            ></ng-container>
+          </button>
+        }
+        @if (!table.dataSource.data.length) {
+          <fx-ui-empty-state [message]="emptyMessage"></fx-ui-empty-state>
+        }
+      }
+    </div>
+    <!-- No (page) binding: ngAfterViewInit hands this paginator to the table,
+         whose own BaseTable subscription (running after this child's hook)
+         wires page events — a binding here would double-fetch every change. -->
+    <mat-paginator
+      class="mt-normal"
+      [length]="table.total"
+      [pageSize]="table.pageSize"
+      [pageSizeOptions]="pageSizeOptions"
+    ></mat-paginator>
+  </div>
+
+  <!-- Detail pane -->
+  <div class="w-full lg:flex-1 min-w-0">
+    @if (table.selected) {
+      @if (table.detailBusy) {
+        <fx-ui-skeleton-detail [cards]="skeletonCards"></fx-ui-skeleton-detail>
+      } @else {
+        <ng-container
+          [ngTemplateOutlet]="detailTemplate"
+          [ngTemplateOutletContext]="{ $implicit: table.detail, selected: table.selected }"
+        ></ng-container>
+      }
+    } @else {
+      <div class="card-common flex items-center justify-center h-[300px]">
+        <fx-ui-empty-state [message]="emptyMessage"></fx-ui-empty-state>
+      </div>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+<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"
+    role="progressbar"
+    [attr.aria-valuemin]="0"
+    [attr.aria-valuemax]="max"
+    [attr.aria-valuenow]="value"
+    [attr.aria-label]="label || null"
+  >
+    <div class="h-full rounded-full" [ngClass]="fillClass" [style.width.%]="percent"></div>
+  </div>
+</div>

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

@@ -1,9 +1,15 @@
-<div class="w-full rounded-lg overflow-hidden" [class]="class" role="radiogroup">
+<div
+  class="w-full rounded-lg overflow-hidden"
+  [class]="class"
+  role="radiogroup"
+  [attr.aria-labelledby]="label ? groupId + '-label' : null"
+>
+  <!-- A radiogroup has no single control a <label> could point at — name it via aria-labelledby. -->
   @if (label) {
-    <label class="txt-field-label">
+    <span class="txt-field-label block" [id]="groupId + '-label'">
       {{ label }}
       @if (required) {
-        <span class="txt-required">*</span>
+        <span class="txt-required" aria-hidden="true">*</span>
       }
       @if (tooltip) {
         <fx-ui-hero-icon
@@ -15,7 +21,7 @@
           matTooltipClass="text-text-primary text-xs font-semibold"
         ></fx-ui-hero-icon>
       }
-    </label>
+    </span>
   }
 
   <button

package/src/lib/ui/components/radio-button-toggle/radio-button-toggle.component.html

@@ -1,10 +1,15 @@
 <div class="flex flex-col text-left mb-4 w-full" [class]="class">
-  @if(label){<label class="txt-field-label">
+  <!-- A radiogroup has no single control a <label> could point at — name it via aria-labelledby. -->
+  @if(label){<span class="txt-field-label" [id]="groupId + '-label'">
     {{ label }}
-    @if(required) {<span class="txt-required">*</span>} </label
+    @if(required) {<span class="txt-required" aria-hidden="true">*</span>} </span
   >}
 
-  <div class="inline-flex w-full rounded-lg overflow-hidden" role="radiogroup">
+  <div
+    class="inline-flex w-full rounded-lg overflow-hidden"
+    role="radiogroup"
+    [attr.aria-labelledby]="label ? groupId + '-label' : null"
+  >
     @for(opt of options; track opt){<button
       type="button"
       role="radio"

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

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

@@ -1,9 +1,9 @@
 <div class="mb-4 text-left w-full" [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
@@ -24,6 +24,10 @@
     appearance="fill"
   >
     <mat-select
+      [id]="fieldId"
+      [required]="!!required"
+      [attr.aria-invalid]="invalid || null"
+      [attr.aria-describedby]="invalid ? fieldId + '-error' : null"
       [placeholder]="placeholder"
       [disabled]="disabled"
       [multiple]="multiple"
@@ -36,11 +40,12 @@
         <div class="px-semi w-full">
           <input
             type="text"
+            aria-label="Search"
             [placeholder]="'Search'"
             [(ngModel)]="searchTerm"
             (ngModelChange)="onSearchChange($event)"
             (click)="$event.stopPropagation()"
-            class="text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out"
+            class="text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start focus-visible:ring-2 focus-visible:ring-primary/50 text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out"
           />
         </div>
       }
@@ -51,7 +56,7 @@
   </mat-form-field>
 
   @if (invalid) {
-    <div class="txt-invalid text-left">
+    <div class="txt-invalid text-left" role="alert" [id]="fieldId + '-error'">
       {{ getErrorMessage(label) }}
     </div>
   }

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

@@ -0,0 +1,11 @@
+<div class="flex items-center gap-small">
+  @for (badge of badges; track badge.key) {
+    <button
+      type="button"
+      class="px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50"
+      [ngClass]="badgeClass(badge)"
+      [attr.aria-label]="badge.key + ': ' + badge.label"
+      (click)="badgeClick.emit(badge.key)"
+    >{{ badge.label }}</button>
+  }
+</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-lg border border-border-default p-semi">
+      <div class="flex items-center gap-normal mb-small">
+        <div class="w-8 h-8 rounded-lg 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/slider/slider.component.html

@@ -4,6 +4,8 @@
   [class.opacity-60]="disabled"
   role="group"
 >
+  <!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->
+  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
   <div
     #track
     class="relative touch-none py-4"
@@ -38,6 +40,7 @@
           class="absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary"
           [ngStyle]="thumbStyle()"
           role="slider"
+          aria-label="Slider"
           [attr.aria-valuemin]="min"
           [attr.aria-valuemax]="max"
           [attr.aria-valuenow]="value"

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

@@ -1,5 +1,10 @@
-<div
-  class="relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer"
+<button
+  type="button"
+  role="switch"
+  [attr.aria-checked]="!!value"
+  [attr.aria-label]="ariaLabel || null"
+  [disabled]="disabled"
+  class="relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50"
   [ngClass]="{
     'bg-success': value && !disabled,
     'bg-button-default': !value && !disabled,
@@ -8,14 +13,14 @@
   (click)="toggle()"
 >
   @if(value) {
-    <i style="font-size: 20px;" class="material-symbols-outlined absolute left-0.5 top-0 text-text-inverse">check</i>
-    
+    <i style="font-size: 20px;" class="material-symbols-outlined absolute left-0.5 top-0 text-text-inverse" aria-hidden="true">check</i>
+
   }
   @if(!value) {
-    <i style="font-size: 20px;" class="material-symbols-outlined absolute right-0.5 top-0 text-text-inverse">close</i>
+    <i style="font-size: 20px;" class="material-symbols-outlined absolute right-0.5 top-0 text-text-inverse" aria-hidden="true">close</i>
   }
   <div
     class="absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300"
     [ngClass]="{ 'translate-x-5': value }"
   ></div>
-</div>
+</button>

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

@@ -3,11 +3,15 @@
   <button
     class="left-scroll-button"
     type="button"
+    aria-label="Scroll tabs left"
     (click)="scroll('left')"
     [style.opacity]="canScrollLeft ? 1 : 0"
     [style.pointerEvents]="canScrollLeft ? 'auto' : 'none'"
+    [attr.tabindex]="canScrollLeft ? null : -1"
+    [attr.aria-hidden]="!canScrollLeft"
   >
     <svg
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       class="h-5 w-5 text-text-primary"
       fill="none"
@@ -20,12 +24,18 @@
 
   <div
     #tabList
+    role="tablist"
     class="relative flex overflow-x-auto no-scrollbar scroll-smooth"
     (scroll)="onScroll()"
   >
     <button
       *ngFor="let tab of tabs.toArray(); let i = index"
+      type="button"
+      role="tab"
+      [attr.aria-selected]="i === activeIndex"
+      [tabindex]="i === activeIndex ? 0 : -1"
       (click)="selectTab(i)"
+      (keydown)="onTabKeydown($event, i)"
       class="tab-btn tab-bar-btn"
     >
       <div class="flex flex-row items-center justify-center">
@@ -56,11 +66,15 @@
   <button
     class="right-scroll-button"
     type="button"
+    aria-label="Scroll tabs right"
     (click)="scroll('right')"
     [style.opacity]="canScrollRight ? 1 : 0"
     [style.pointerEvents]="canScrollRight ? 'auto' : 'none'"
+    [attr.tabindex]="canScrollRight ? null : -1"
+    [attr.aria-hidden]="!canScrollRight"
   >
     <svg
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       class="h-5 w-5 text-text-primary"
       fill="none"
@@ -75,7 +89,7 @@
 <!-- Tab content -->
 <div class="transition-all duration-300 ease-in-out mt-4">
   <ng-container *ngFor="let tab of tabs.toArray(); let i = index">
-    <div *ngIf="i === activeIndex" class="animate-fadeIn">
+    <div *ngIf="i === activeIndex" role="tabpanel" class="animate-fadeIn">
       <ng-container *ngTemplateOutlet="tab.content"></ng-container>
     </div>
   </ng-container>

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

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

@@ -1,7 +1,12 @@
+<!-- Interactive semantics only when a (clicked) listener is attached. -->
 <div
   (click)="onClick()"
+  (keydown.enter)="onClick()"
+  (keydown.space)="$event.preventDefault(); onClick()"
+  [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' : ''}`
+    `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) {

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

@@ -1,6 +1,7 @@
 <div
   animate.enter="horizontal-fade-in-animation"
   animate.leave="horizontal-fade-out-animation"
+  [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',
@@ -9,7 +10,7 @@
     'border-information': type === 'info'
   }"
 >
-  <div class="">
+  <div class="" aria-hidden="true">
     @switch (type) { @case('success') {
     <fx-ui-hero-icon
       icon="check-circle"

package/src/lib/ui/dialogs/confirmation/confirmation.component.html

@@ -1,5 +1,5 @@
 <div animate.enter="fade-in-animation" class="dialog-container">
-  <h1 class="txt-heading-05 dialog-header">{{ title }}</h1>
+  <h1 mat-dialog-title class="txt-heading-05 dialog-header">{{ title }}</h1>
   <mat-dialog-content>
     <div class="txt-default">{{ message }}</div>
   </mat-dialog-content>

package/tailwind.css

@@ -1,18 +1,21 @@
+/* fonts.css is NOT imported here: Tailwind v4 inlines imports and rebases
+   font url()s against the entry file, which breaks webpack resolution.
+   Consumers add '@foxeltech/angular-ui/fonts.css' to their styles array. */
+@import 'tailwindcss';
+@import './tokens.css';
+@import './utilities.css';
 @import './theme.css';
-@import './components.css';
-@import './dialogs.css';
-@import './fonts.css';
+@import './components.css' layer(components);
+@import './dialogs.css' layer(components);
 @import './animations.css';
 @import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
-@tailwind base;
-@tailwind component;
-@tailwind utilities;
 
-html, body {
+html,
+body {
   font-family: 'Roboto';
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   background: rgb(var(--bg-primary));
-}
+}