@flusys/ng-task-manager 5.4.1 → 6.0.0-beta.1

package/fesm2022/flusys-ng-task-manager.mjs

@@ -1,41 +1,19 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, signal, DestroyRef, computed, input, output, Component, model, effect, untracked } from '@angular/core';
-import { ApiResourceService, TranslatePipe, AngularModule, PrimeModule, TranslateService, UserSelectComponent, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
+import { ApiResourceService, TranslatePipe, AngularModule, TranslateService, UserSelectComponent, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
 import { firstValueFrom, Subject } from 'rxjs';
 import { io } from 'socket.io-client';
 import { APP_CONFIG } from '@flusys/ng-core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i9$1 from '@angular/common';
+import * as i3 from '@angular/common';
 import { DatePipe } from '@angular/common';
-import * as i1 from 'primeng/tag';
-import { TagModule } from 'primeng/tag';
-import * as i2 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
-import * as i3 from '@angular/forms';
+import * as i1 from '@flusys/ng-ui';
+import { TooltipDirective, UiModule, ConfirmationService, MessageService } from '@flusys/ng-ui';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i9 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import * as i7 from 'primeng/datepicker';
-import { DatePickerModule } from 'primeng/datepicker';
-import * as i1$1 from 'primeng/dialog';
-import { DialogModule } from 'primeng/dialog';
-import * as i4 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
-import * as i8 from 'primeng/multiselect';
-import { MultiSelectModule } from 'primeng/multiselect';
-import * as i5 from 'primeng/textarea';
-import { TextareaModule } from 'primeng/textarea';
-import * as i6 from 'primeng/select';
-import { SelectModule } from 'primeng/select';
-import * as i2$1 from 'primeng/api';
-import { ConfirmationService, MessageService } from 'primeng/api';
-import * as i1$2 from 'primeng/drawer';
-import { DrawerModule } from 'primeng/drawer';
 import { Router } from '@angular/router';
-import * as i6$1 from 'primeng/skeleton';
-import * as i1$3 from '@angular/cdk/drag-drop';
+import * as i2$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i9$2 from 'primeng/table';
 
 class TaskBoardApiService extends ApiResourceService {
     constructor() {
@@ -53,10 +31,10 @@ class TaskBoardApiService extends ApiResourceService {
             userId,
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -68,10 +46,10 @@ class TaskApiService extends ApiResourceService {
     moveTask(dto) {
         return firstValueFrom(this.http.post(`${this.baseUrl}/move`, dto));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -85,10 +63,10 @@ class TaskListApiService extends ApiResourceService {
     reorderLists(dto) {
         return firstValueFrom(this.http.post(`${this.baseUrl}/reorder`, dto));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskListApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskListApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskListApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskListApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskListApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskListApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -96,10 +74,10 @@ class TaskLabelApiService extends ApiResourceService {
     constructor() {
         super('label', 'taskManager');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskLabelApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskLabelApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskLabelApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskLabelApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskLabelApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskLabelApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -107,10 +85,10 @@ class TaskCommentApiService extends ApiResourceService {
     constructor() {
         super('comment', 'taskManager');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskCommentApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskCommentApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskCommentApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskCommentApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskCommentApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskCommentApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -118,7 +96,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class TaskBoardSocketService {
     socket = null;
     appConfig = inject(APP_CONFIG);
-    _isConnected = signal(false, ...(ngDevMode ? [{ debugName: "_isConnected" }] : []));
+    _isConnected = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isConnected" }] : /* istanbul ignore next */ []));
     isConnected = this._isConnected.asReadonly();
     boardEvent$ = new Subject();
     onBoardEvent = this.boardEvent$.asObservable();
@@ -157,10 +136,10 @@ class TaskBoardSocketService {
         const services = this.appConfig.services;
         return services?.['taskManager']?.socketUrl ?? this.appConfig.apiBaseUrl;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardSocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardSocketService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardSocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardSocketService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardSocketService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardSocketService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -172,15 +151,24 @@ class TaskBoardStateService {
     labelApi = inject(TaskLabelApiService);
     socketService = inject(TaskBoardSocketService);
     destroyRef = inject(DestroyRef);
-    _boards = signal([], ...(ngDevMode ? [{ debugName: "_boards" }] : []));
-    _activeBoard = signal(null, ...(ngDevMode ? [{ debugName: "_activeBoard" }] : []));
-    _lists = signal([], ...(ngDevMode ? [{ debugName: "_lists" }] : []));
-    _tasks = signal([], ...(ngDevMode ? [{ debugName: "_tasks" }] : []));
-    _labels = signal([], ...(ngDevMode ? [{ debugName: "_labels" }] : []));
-    _members = signal([], ...(ngDevMode ? [{ debugName: "_members" }] : []));
-    _selectedTask = signal(null, ...(ngDevMode ? [{ debugName: "_selectedTask" }] : []));
-    _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
-    _isBoardLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isBoardLoading" }] : []));
+    _boards = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_boards" }] : /* istanbul ignore next */ []));
+    _activeBoard = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_activeBoard" }] : /* istanbul ignore next */ []));
+    _lists = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lists" }] : /* istanbul ignore next */ []));
+    _tasks = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tasks" }] : /* istanbul ignore next */ []));
+    _labels = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_labels" }] : /* istanbul ignore next */ []));
+    _members = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_members" }] : /* istanbul ignore next */ []));
+    _selectedTask = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectedTask" }] : /* istanbul ignore next */ []));
+    _isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
+    _isBoardLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isBoardLoading" }] : /* istanbul ignore next */ []));
     boards = this._boards.asReadonly();
     activeBoard = this._activeBoard.asReadonly();
     lists = this._lists.asReadonly();
@@ -198,15 +186,18 @@ class TaskBoardStateService {
             map.set(task.listId, list);
         }
         return map;
-    }, ...(ngDevMode ? [{ debugName: "tasksByList" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tasksByList" }] : /* istanbul ignore next */ []));
     listsWithTasks = computed(() => this._lists()
         .slice()
         .sort((a, b) => a.position - b.position)
         .map((list) => ({
         ...list,
         tasks: (this.tasksByList().get(list.id) ?? []).slice().sort((a, b) => a.position - b.position),
-    })), ...(ngDevMode ? [{ debugName: "listsWithTasks" }] : []));
-    hasActiveBoard = computed(() => this._activeBoard() !== null, ...(ngDevMode ? [{ debugName: "hasActiveBoard" }] : []));
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listsWithTasks" }] : /* istanbul ignore next */ []));
+    hasActiveBoard = computed(() => this._activeBoard() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActiveBoard" }] : /* istanbul ignore next */ []));
     isSocketConnected = this.socketService.isConnected;
     constructor() {
         this.socketService.onBoardEvent
@@ -368,10 +359,10 @@ class TaskBoardStateService {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardStateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -421,39 +412,42 @@ function memberColorFromId(userId) {
 }
 
 class TaskCardComponent {
-    task = input.required(...(ngDevMode ? [{ debugName: "task" }] : []));
+    task = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "task" }] : /* istanbul ignore next */ []));
     cardClick = output();
     editClick = output();
     deleteClick = output();
     MAX_VISIBLE = 3;
-    visibleAssignees = computed(() => (this.task().assignees ?? []).slice(0, this.MAX_VISIBLE), ...(ngDevMode ? [{ debugName: "visibleAssignees" }] : []));
-    overflowCount = computed(() => Math.max(0, (this.task().assignees ?? []).length - this.MAX_VISIBLE), ...(ngDevMode ? [{ debugName: "overflowCount" }] : []));
+    visibleAssignees = computed(() => (this.task().assignees ?? []).slice(0, this.MAX_VISIBLE), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleAssignees" }] : /* istanbul ignore next */ []));
+    overflowCount = computed(() => Math.max(0, (this.task().assignees ?? []).length - this.MAX_VISIBLE), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []));
     prioritySeverity = taskPrioritySeverity;
     initials = memberInitials;
     isOverdue = isTaskOverdue;
     memberColor = memberColorFromId;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TaskCardComponent, isStandalone: true, selector: "tm-task-card", inputs: { task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cardClick: "cardClick", editClick: "editClick", deleteClick: "deleteClick" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TaskCardComponent, isStandalone: true, selector: "tm-task-card", inputs: { task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cardClick: "cardClick", editClick: "editClick", deleteClick: "deleteClick" }, ngImport: i0, template: `
     <div
-      class="task-card group relative rounded-lg border border-surface-200 dark:border-surface-700 p-3 cursor-pointer shadow-sm hover:shadow-md transition-shadow"
+      class="task-card group relative rounded-border border border-surface p-3 cursor-pointer shadow-sm hover:shadow-md transition-shadow"
       (click)="cardClick.emit(task())"
     >
       <div class="absolute top-2 right-2 hidden group-hover:flex gap-0.5">
         <button
-          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-primary-500 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors"
-          [pTooltip]="'shared.edit' | translate"
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-primary-500 hover:bg-surface-hover transition-colors"
+          [fTooltip]="'shared.edit' | translate"
           tooltipPosition="top"
           (click)="$event.stopPropagation(); editClick.emit(task())"
         >
-          <i class="pi pi-pencil text-xs"></i>
+          <ui-icon name="pencil" class="text-xs"></ui-icon>
         </button>
         <button
-          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-red-500 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors"
-          [pTooltip]="'shared.delete' | translate"
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-red-500 hover:bg-surface-hover transition-colors"
+          [fTooltip]="'shared.delete' | translate"
           tooltipPosition="top"
           (click)="$event.stopPropagation(); deleteClick.emit(task())"
         >
-          <i class="pi pi-trash text-xs"></i>
+          <ui-icon name="trash" class="text-xs"></ui-icon>
         </button>
       </div>
 
@@ -463,7 +457,7 @@ class TaskCardComponent {
             <span
               class="inline-block h-1.5 rounded-full w-8"
               [style.background-color]="label.color"
-              [pTooltip]="label.name"
+              [fTooltip]="label.name"
             ></span>
           }
         </div>
@@ -474,15 +468,15 @@ class TaskCardComponent {
       </p>
 
       <div class="flex items-center justify-between gap-2 mt-auto pt-2">
-        <p-tag
+        <f-tag
           [value]="task().priority"
           [severity]="prioritySeverity(task().priority)"
-          styleClass="text-xs"
+          class="text-xs"
         />
 
         @if (task().dueDate) {
           <span
-            class="text-xs text-surface-500"
+            class="text-xs text-muted-color"
             [class.text-red-500]="isOverdue(task().dueDate!)"
           >
             {{ task().dueDate | date: 'MMM d' }}
@@ -492,53 +486,55 @@ class TaskCardComponent {
         @if (visibleAssignees().length > 0) {
           <div class="flex items-center -space-x-1.5">
             @for (a of visibleAssignees(); track a.userId) {
-              <span
-                class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
-                [style.background-color]="memberColor(a.userId)"
-                [pTooltip]="a.userName ?? undefined"
-              >
-                {{ initials(a.userName) }}
-              </span>
+              <f-avatar
+                shape="circle"
+                size="small"
+                [label]="initials(a.userName)"
+                [color]="memberColor(a.userId)"
+                styleClass="!ring-surface-card flex-shrink-0"
+                [fTooltip]="a.userName ?? ''"
+              />
             }
             @if (overflowCount() > 0) {
-              <span
-                class="w-6 h-6 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-300 flex items-center justify-center text-[10px] font-bold flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
-              >
-                +{{ overflowCount() }}
-              </span>
+              <f-avatar
+                shape="circle"
+                size="small"
+                [label]="'+' + overflowCount()"
+                styleClass="!bg-surface-200 dark:!bg-surface-700 !text-surface-600 dark:!text-surface-300 !ring-surface-card flex-shrink-0"
+              />
             }
           </div>
         }
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.AvatarComponent, selector: "f-avatar", inputs: ["label", "icon", "image", "shape", "size", "color", "styleClass"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tm-task-card',
-                    imports: [TagModule, TooltipModule, DatePipe, TranslatePipe],
+                    imports: [DatePipe, TranslatePipe, TooltipDirective, UiModule],
                     template: `
     <div
-      class="task-card group relative rounded-lg border border-surface-200 dark:border-surface-700 p-3 cursor-pointer shadow-sm hover:shadow-md transition-shadow"
+      class="task-card group relative rounded-border border border-surface p-3 cursor-pointer shadow-sm hover:shadow-md transition-shadow"
       (click)="cardClick.emit(task())"
     >
       <div class="absolute top-2 right-2 hidden group-hover:flex gap-0.5">
         <button
-          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-primary-500 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors"
-          [pTooltip]="'shared.edit' | translate"
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-primary-500 hover:bg-surface-hover transition-colors"
+          [fTooltip]="'shared.edit' | translate"
           tooltipPosition="top"
           (click)="$event.stopPropagation(); editClick.emit(task())"
         >
-          <i class="pi pi-pencil text-xs"></i>
+          <ui-icon name="pencil" class="text-xs"></ui-icon>
         </button>
         <button
-          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-red-500 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors"
-          [pTooltip]="'shared.delete' | translate"
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-red-500 hover:bg-surface-hover transition-colors"
+          [fTooltip]="'shared.delete' | translate"
           tooltipPosition="top"
           (click)="$event.stopPropagation(); deleteClick.emit(task())"
         >
-          <i class="pi pi-trash text-xs"></i>
+          <ui-icon name="trash" class="text-xs"></ui-icon>
         </button>
       </div>
 
@@ -548,7 +544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <span
               class="inline-block h-1.5 rounded-full w-8"
               [style.background-color]="label.color"
-              [pTooltip]="label.name"
+              [fTooltip]="label.name"
             ></span>
           }
         </div>
@@ -559,15 +555,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       </p>
 
       <div class="flex items-center justify-between gap-2 mt-auto pt-2">
-        <p-tag
+        <f-tag
           [value]="task().priority"
           [severity]="prioritySeverity(task().priority)"
-          styleClass="text-xs"
+          class="text-xs"
         />
 
         @if (task().dueDate) {
           <span
-            class="text-xs text-surface-500"
+            class="text-xs text-muted-color"
             [class.text-red-500]="isOverdue(task().dueDate!)"
           >
             {{ task().dueDate | date: 'MMM d' }}
@@ -577,20 +573,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         @if (visibleAssignees().length > 0) {
           <div class="flex items-center -space-x-1.5">
             @for (a of visibleAssignees(); track a.userId) {
-              <span
-                class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
-                [style.background-color]="memberColor(a.userId)"
-                [pTooltip]="a.userName ?? undefined"
-              >
-                {{ initials(a.userName) }}
-              </span>
+              <f-avatar
+                shape="circle"
+                size="small"
+                [label]="initials(a.userName)"
+                [color]="memberColor(a.userId)"
+                styleClass="!ring-surface-card flex-shrink-0"
+                [fTooltip]="a.userName ?? ''"
+              />
             }
             @if (overflowCount() > 0) {
-              <span
-                class="w-6 h-6 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-300 flex items-center justify-center text-[10px] font-bold flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
-              >
-                +{{ overflowCount() }}
-              </span>
+              <f-avatar
+                shape="circle"
+                size="small"
+                [label]="'+' + overflowCount()"
+                styleClass="!bg-surface-200 dark:!bg-surface-700 !text-surface-600 dark:!text-surface-300 !ring-surface-card flex-shrink-0"
+              />
             }
           </div>
         }
@@ -601,21 +599,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         }], propDecorators: { task: [{ type: i0.Input, args: [{ isSignal: true, alias: "task", required: true }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], editClick: [{ type: i0.Output, args: ["editClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }] } });
 
 const PRIORITY_OPTIONS = [
-    { label: 'task.priority.LOW', value: 'LOW' },
-    { label: 'task.priority.MEDIUM', value: 'MEDIUM' },
-    { label: 'task.priority.HIGH', value: 'HIGH' },
-    { label: 'task.priority.URGENT', value: 'URGENT' },
+    { labelKey: 'task.priority.LOW', value: 'LOW' },
+    { labelKey: 'task.priority.MEDIUM', value: 'MEDIUM' },
+    { labelKey: 'task.priority.HIGH', value: 'HIGH' },
+    { labelKey: 'task.priority.URGENT', value: 'URGENT' },
 ];
 class TaskFormDialogComponent {
     taskApi = inject(TaskApiService);
-    visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
-    task = input(null, ...(ngDevMode ? [{ debugName: "task" }] : []));
-    boardId = input.required(...(ngDevMode ? [{ debugName: "boardId" }] : []));
-    listId = input.required(...(ngDevMode ? [{ debugName: "listId" }] : []));
-    members = input([], ...(ngDevMode ? [{ debugName: "members" }] : []));
-    labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : []));
+    visible = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    task = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "task" }] : /* istanbul ignore next */ []));
+    boardId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boardId" }] : /* istanbul ignore next */ []));
+    listId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listId" }] : /* istanbul ignore next */ []));
+    members = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []));
+    labels = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
     saved = output();
-    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+    isSaving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
     priorityOptions = PRIORITY_OPTIONS;
     title = '';
     description = '';
@@ -695,9 +700,9 @@ class TaskFormDialogComponent {
         this.selectedAssigneeIds = [];
         this.selectedLabelIds = [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskFormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: TaskFormDialogComponent, isStandalone: true, selector: "tm-task-form-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: false, transformFunction: null }, boardId: { classPropertyName: "boardId", publicName: "boardId", isSignal: true, isRequired: true, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: true, transformFunction: null }, members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", saved: "saved" }, ngImport: i0, template: `
-    <p-dialog
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskFormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TaskFormDialogComponent, isStandalone: true, selector: "tm-task-form-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: false, transformFunction: null }, boardId: { classPropertyName: "boardId", publicName: "boardId", isSignal: true, isRequired: true, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: true, transformFunction: null }, members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", saved: "saved" }, ngImport: i0, template: `
+    <f-dialog
       [header]="
         (task() ? 'task.form.title.edit' : 'task.form.title.create') | translate
       "
@@ -713,7 +718,7 @@ class TaskFormDialogComponent {
             <span class="text-red-500">*</span></label
           >
           <input
-            pInputText
+            fInputText
             [(ngModel)]="title"
             [placeholder]="'task.form.title.placeholder' | translate"
           />
@@ -724,7 +729,7 @@ class TaskFormDialogComponent {
             'shared.description' | translate
           }}</label>
           <textarea
-            pTextarea
+            fTextarea
             [(ngModel)]="description"
             rows="3"
             [placeholder]="'task.form.description.placeholder' | translate"
@@ -736,27 +741,27 @@ class TaskFormDialogComponent {
             <label class="text-sm font-medium">{{
               'task.form.priority.label' | translate
             }}</label>
-            <p-select
+            <f-select
               [(ngModel)]="priority"
               [options]="priorityOptions"
-              optionLabel="label"
+              optionLabel="labelKey"
               optionValue="value"
               [placeholder]="'task.form.priority.placeholder' | translate"
             >
               <ng-template #selectedItem let-opt>
-                {{ opt.label | translate }}
+                {{ opt.labelKey | translate }}
               </ng-template>
               <ng-template #item let-opt>
-                {{ opt.label | translate }}
+                {{ opt.labelKey | translate }}
               </ng-template>
-            </p-select>
+            </f-select>
           </div>
 
           <div class="flex flex-col gap-1">
             <label class="text-sm font-medium">{{
               'task.form.due.date.label' | translate
             }}</label>
-            <p-datepicker
+            <f-datepicker
               [(ngModel)]="dueDate"
               [showClear]="true"
               [placeholder]="'task.form.due.date.placeholder' | translate"
@@ -768,12 +773,11 @@ class TaskFormDialogComponent {
           <label class="text-sm font-medium">{{
             'task.form.assignee.label' | translate
           }}</label>
-          <p-multiselect
+          <f-multiselect
             [(ngModel)]="selectedAssigneeIds"
             [options]="members()"
             optionLabel="userName"
             optionValue="userId"
-            appendTo="body"
             [placeholder]="'task.form.assignee.placeholder' | translate"
             [showClear]="true"
           />
@@ -783,51 +787,39 @@ class TaskFormDialogComponent {
           <label class="text-sm font-medium">{{
             'task.form.labels.label' | translate
           }}</label>
-          <p-multiselect
+          <f-multiselect
             [(ngModel)]="selectedLabelIds"
             [options]="labels()"
             optionLabel="name"
             optionValue="id"
-            appendTo="body"
             [placeholder]="'task.form.labels.placeholder' | translate"
           />
         </div>
       </div>
 
-      <ng-template pTemplate="footer">
+      <ng-template #footer>
         <div class="flex justify-end gap-2 pt-1">
-          <p-button
-            [label]="'shared.cancel' | translate"
-            severity="secondary"
-            (onClick)="onClose()"
-          />
-          <p-button
-            [label]="'shared.save' | translate"
-            [loading]="isSaving()"
-            (onClick)="onSave()"
-          />
+          <button fButton severity="secondary" (click)="onClose()">
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button fButton (click)="onSave()" [disabled]="isSaving()">
+            @if (isSaving()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'shared.save' | translate }}</span>
+          </button>
         </div>
       </ng-template>
-    </p-dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i9.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    </f-dialog>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.DatePickerComponent, selector: "f-datepicker", inputs: ["placeholder", "dateFormat", "disabled", "showTime", "selectionMode", "minDate", "maxDate", "inputId", "invalid", "touched", "showClear", "inputStyleClass", "showIcon", "showButtonBar", "appendTo", "styleClass"], outputs: ["onBlur"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.MultiSelectComponent, selector: "f-multiselect", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "inputId", "invalid", "touched", "showClear", "optionDisabled", "display", "maxSelectedLabels", "selectionLimit", "showToggleAll", "styleClass"], outputs: ["onBlur"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: i1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "dismissableMask", "resizable", "style", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskFormDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskFormDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tm-task-form-dialog',
-                    imports: [
-                        DialogModule,
-                        FormsModule,
-                        InputTextModule,
-                        TextareaModule,
-                        SelectModule,
-                        DatePickerModule,
-                        MultiSelectModule,
-                        ButtonModule,
-                        TranslatePipe,
-                    ],
+                    imports: [UiModule, FormsModule, TranslatePipe],
                     template: `
-    <p-dialog
+    <f-dialog
       [header]="
         (task() ? 'task.form.title.edit' : 'task.form.title.create') | translate
       "
@@ -843,7 +835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <span class="text-red-500">*</span></label
           >
           <input
-            pInputText
+            fInputText
             [(ngModel)]="title"
             [placeholder]="'task.form.title.placeholder' | translate"
           />
@@ -854,7 +846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             'shared.description' | translate
           }}</label>
           <textarea
-            pTextarea
+            fTextarea
             [(ngModel)]="description"
             rows="3"
             [placeholder]="'task.form.description.placeholder' | translate"
@@ -866,27 +858,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <label class="text-sm font-medium">{{
               'task.form.priority.label' | translate
             }}</label>
-            <p-select
+            <f-select
               [(ngModel)]="priority"
               [options]="priorityOptions"
-              optionLabel="label"
+              optionLabel="labelKey"
               optionValue="value"
               [placeholder]="'task.form.priority.placeholder' | translate"
             >
               <ng-template #selectedItem let-opt>
-                {{ opt.label | translate }}
+                {{ opt.labelKey | translate }}
               </ng-template>
               <ng-template #item let-opt>
-                {{ opt.label | translate }}
+                {{ opt.labelKey | translate }}
               </ng-template>
-            </p-select>
+            </f-select>
           </div>
 
           <div class="flex flex-col gap-1">
             <label class="text-sm font-medium">{{
               'task.form.due.date.label' | translate
             }}</label>
-            <p-datepicker
+            <f-datepicker
               [(ngModel)]="dueDate"
               [showClear]="true"
               [placeholder]="'task.form.due.date.placeholder' | translate"
@@ -898,12 +890,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <label class="text-sm font-medium">{{
             'task.form.assignee.label' | translate
           }}</label>
-          <p-multiselect
+          <f-multiselect
             [(ngModel)]="selectedAssigneeIds"
             [options]="members()"
             optionLabel="userName"
             optionValue="userId"
-            appendTo="body"
             [placeholder]="'task.form.assignee.placeholder' | translate"
             [showClear]="true"
           />
@@ -913,32 +904,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <label class="text-sm font-medium">{{
             'task.form.labels.label' | translate
           }}</label>
-          <p-multiselect
+          <f-multiselect
             [(ngModel)]="selectedLabelIds"
             [options]="labels()"
             optionLabel="name"
             optionValue="id"
-            appendTo="body"
             [placeholder]="'task.form.labels.placeholder' | translate"
           />
         </div>
       </div>
 
-      <ng-template pTemplate="footer">
+      <ng-template #footer>
         <div class="flex justify-end gap-2 pt-1">
-          <p-button
-            [label]="'shared.cancel' | translate"
-            severity="secondary"
-            (onClick)="onClose()"
-          />
-          <p-button
-            [label]="'shared.save' | translate"
-            [loading]="isSaving()"
-            (onClick)="onSave()"
-          />
+          <button fButton severity="secondary" (click)="onClose()">
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button fButton (click)="onSave()" [disabled]="isSaving()">
+            @if (isSaving()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'shared.save' | translate }}</span>
+          </button>
         </div>
       </ng-template>
-    </p-dialog>
+    </f-dialog>
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], task: [{ type: i0.Input, args: [{ isSignal: true, alias: "task", required: false }] }], boardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "boardId", required: true }] }], listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: true }] }], members: [{ type: i0.Input, args: [{ isSignal: true, alias: "members", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }] } });
@@ -946,18 +935,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class TaskDetailPanelComponent {
     commentApi = inject(TaskCommentApiService);
     state = inject(TaskBoardStateService);
-    task = input(null, ...(ngDevMode ? [{ debugName: "task" }] : []));
+    task = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "task" }] : /* istanbul ignore next */ []));
     closePanel = output();
     editTask = output();
-    comments = signal([], ...(ngDevMode ? [{ debugName: "comments" }] : []));
-    isSendingComment = signal(false, ...(ngDevMode ? [{ debugName: "isSendingComment" }] : []));
-    isSendingReply = signal(false, ...(ngDevMode ? [{ debugName: "isSendingReply" }] : []));
-    replyingToId = signal(null, ...(ngDevMode ? [{ debugName: "replyingToId" }] : []));
-    isDeleting = signal(false, ...(ngDevMode ? [{ debugName: "isDeleting" }] : []));
+    comments = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "comments" }] : /* istanbul ignore next */ []));
+    isSendingComment = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSendingComment" }] : /* istanbul ignore next */ []));
+    isSendingReply = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSendingReply" }] : /* istanbul ignore next */ []));
+    replyingToId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "replyingToId" }] : /* istanbul ignore next */ []));
+    isDeleting = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDeleting" }] : /* istanbul ignore next */ []));
     newComment = '';
     replyText = '';
-    assigneeMembers = computed(() => this.task()?.assignees ?? [], ...(ngDevMode ? [{ debugName: "assigneeMembers" }] : []));
-    rootComments = computed(() => this.comments().filter((c) => !c.parentCommentId), ...(ngDevMode ? [{ debugName: "rootComments" }] : []));
+    assigneeMembers = computed(() => this.task()?.assignees ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "assigneeMembers" }] : /* istanbul ignore next */ []));
+    rootComments = computed(() => this.comments().filter((c) => !c.parentCommentId), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootComments" }] : /* istanbul ignore next */ []));
     repliesFor(parentId) {
         return this.comments().filter((c) => c.parentCommentId === parentId);
     }
@@ -1036,9 +1033,9 @@ class TaskDetailPanelComponent {
             this.isSendingReply.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskDetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TaskDetailPanelComponent, isStandalone: true, selector: "tm-task-detail-panel", inputs: { task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", editTask: "editTask" }, ngImport: i0, template: `
-    <p-drawer
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskDetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TaskDetailPanelComponent, isStandalone: true, selector: "tm-task-detail-panel", inputs: { task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", editTask: "editTask" }, ngImport: i0, template: `
+    <f-drawer
       [visible]="!!task()"
       position="right"
       [style]="{ width: '500px' }"
@@ -1048,34 +1045,42 @@ class TaskDetailPanelComponent {
       @if (task(); as t) {
         <div class="flex flex-col gap-6 h-full overflow-y-auto pb-4">
           <div class="flex items-center justify-end gap-1">
-            <p-button
-              icon="pi pi-pencil"
+            <button
+              fButton
               severity="secondary"
               size="small"
               [text]="true"
-              [pTooltip]="'task.detail.edit' | translate"
+              [fTooltip]="'task.detail.edit' | translate"
               tooltipPosition="left"
-              (onClick)="editTask.emit(t)"
-            />
-            <p-button
-              icon="pi pi-trash"
+              (click)="editTask.emit(t)"
+            >
+              <ui-icon pButtonIcon name="pencil"></ui-icon>
+            </button>
+            <button
+              fButton
               severity="danger"
               size="small"
               [text]="true"
-              [loading]="isDeleting()"
-              [pTooltip]="'task.detail.delete' | translate"
+              [fTooltip]="'task.detail.delete' | translate"
               tooltipPosition="left"
-              (onClick)="deleteTask(t.id)"
-            />
+              (click)="deleteTask(t.id)"
+              [disabled]="isDeleting()"
+            >
+              @if (isDeleting()) {
+                <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+              } @else {
+                <ui-icon pButtonIcon name="trash"></ui-icon>
+              }
+            </button>
           </div>
 
           <div class="flex items-center gap-3">
-            <p-tag
+            <f-tag
               [value]="t.priority"
               [severity]="prioritySeverity(t.priority)"
             />
             @if (t.dueDate) {
-              <span class="text-sm text-surface-500">
+              <span class="text-sm text-muted-color">
                 {{ 'task.detail.due.label' | translate }}:
                 {{ t.dueDate | date: 'mediumDate' }}
               </span>
@@ -1090,11 +1095,12 @@ class TaskDetailPanelComponent {
               <div class="flex flex-wrap gap-2">
                 @for (member of assigneeMembers(); track member.userId) {
                   <div class="flex items-center gap-2 px-2 py-1 rounded-full ">
-                    <span
-                      class="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 flex items-center justify-center text-xs font-semibold"
-                    >
-                      {{ initials(member.userName) }}
-                    </span>
+                    <f-avatar
+                      shape="circle"
+                      size="small"
+                      [label]="initials(member.userName)"
+                      styleClass="!bg-primary-100 dark:!bg-primary-900 !text-primary-700 dark:!text-primary-300"
+                    />
                     <span class="text-sm">{{ member.userName }}</span>
                   </div>
                 }
@@ -1106,9 +1112,7 @@ class TaskDetailPanelComponent {
             <h4 class="text-sm font-semibold mb-2">
               {{ 'shared.description' | translate }}
             </h4>
-            <p
-              class="text-sm text-surface-600 dark:text-surface-400 whitespace-pre-wrap"
-            >
+            <p class="text-sm text-color whitespace-pre-wrap">
               {{
                 t.description || ('task.detail.description.empty' | translate)
               }}
@@ -1124,31 +1128,33 @@ class TaskDetailPanelComponent {
 
             @for (comment of rootComments(); track comment.id) {
               <div
-                class="group flex flex-col gap-1 py-2 border-b border-surface-100 dark:border-surface-800 last:border-0"
+                class="group flex flex-col gap-1 py-2 border-b border-surface last:border-0"
               >
                 <div class="flex items-center justify-between">
-                  <span class="text-xs text-surface-400">{{
+                  <span class="text-xs text-muted-color">{{
                     comment.createdAt | date: 'MMM d, y, h:mm a'
                   }}</span>
-                  <p-button
-                    [label]="'task.comment.reply' | translate"
-                    icon="pi pi-reply"
+                  <button
+                    fButton
                     size="small"
                     [text]="true"
                     severity="secondary"
-                    styleClass="opacity-0 group-hover:opacity-100 transition-opacity !py-0.5 !px-1.5 text-xs"
-                    (onClick)="toggleReply(comment.id)"
-                  />
+                    class="opacity-0 group-hover:opacity-100 transition-opacity !py-0.5 !px-1.5 text-xs"
+                    (click)="toggleReply(comment.id)"
+                  >
+                    <ui-icon pButtonIcon name="reply"></ui-icon>
+                    <span pButtonLabel>{{ 'task.comment.reply' | translate }}</span>
+                  </button>
                 </div>
                 <p class="text-sm">{{ comment.content }}</p>
 
                 @if (repliesFor(comment.id).length > 0) {
                   <div
-                    class="mt-1 pl-3 border-l-2 border-surface-200 dark:border-surface-700 flex flex-col gap-2"
+                    class="mt-1 pl-3 border-l-2 border-surface flex flex-col gap-2"
                   >
                     @for (reply of repliesFor(comment.id); track reply.id) {
                       <div class="flex flex-col gap-0.5">
-                        <span class="text-xs text-surface-400">{{
+                        <span class="text-xs text-muted-color">{{
                           reply.createdAt | date: 'MMM d, y, h:mm a'
                         }}</span>
                         <p class="text-sm">{{ reply.content }}</p>
@@ -1162,7 +1168,7 @@ class TaskDetailPanelComponent {
                     class="mt-2 pl-3 border-l-2 border-primary-300 dark:border-primary-700 flex gap-2"
                   >
                     <textarea
-                      pTextarea
+                      fTextarea
                       [(ngModel)]="replyText"
                       rows="2"
                       [placeholder]="
@@ -1172,20 +1178,27 @@ class TaskDetailPanelComponent {
                       autoResize="true"
                     ></textarea>
                     <div class="flex flex-col gap-1">
-                      <p-button
-                        icon="pi pi-send"
+                      <button
+                        fButton
                         size="small"
-                        [loading]="isSendingReply()"
-                        [disabled]="!replyText.trim()"
-                        (onClick)="submitReply(t.id, comment.id)"
-                      />
-                      <p-button
-                        icon="pi pi-times"
+                        [disabled]="!replyText.trim() || isSendingReply()"
+                        (click)="submitReply(t.id, comment.id)"
+                      >
+                        @if (isSendingReply()) {
+                          <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                        } @else {
+                          <ui-icon pButtonIcon name="send"></ui-icon>
+                        }
+                      </button>
+                      <button
+                        fButton
                         size="small"
                         severity="secondary"
                         [text]="true"
-                        (onClick)="cancelReply()"
-                      />
+                        (click)="cancelReply()"
+                      >
+                        <ui-icon pButtonIcon name="times"></ui-icon>
+                      </button>
                     </div>
                   </div>
                 }
@@ -1193,48 +1206,46 @@ class TaskDetailPanelComponent {
             }
 
             @if (rootComments().length === 0) {
-              <p class="text-sm text-surface-400 py-2">
+              <p class="text-sm text-muted-color py-2">
                 {{ 'task.detail.comments.empty' | translate }}
               </p>
             }
 
             <div class="flex gap-2 mt-3">
               <textarea
-                pTextarea
+                fTextarea
                 [(ngModel)]="newComment"
                 rows="2"
                 [placeholder]="'task.detail.comment.placeholder' | translate"
                 class="flex-1 resize-none"
               ></textarea>
-              <p-button
-                icon="pi pi-send"
-                [loading]="isSendingComment()"
-                [disabled]="!newComment.trim()"
-                (onClick)="addComment(t.id)"
-              />
+              <button
+                fButton
+                [disabled]="!newComment.trim() || isSendingComment()"
+                (click)="addComment(t.id)"
+              >
+                @if (isSendingComment()) {
+                  <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                } @else {
+                  <ui-icon pButtonIcon name="send"></ui-icon>
+                }
+              </button>
             </div>
           </div>
         </div>
       }
-    </p-drawer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i9.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    </f-drawer>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.AvatarComponent, selector: "f-avatar", inputs: ["label", "icon", "image", "shape", "size", "color", "styleClass"] }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "directive", type: i1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.DrawerComponent, selector: "f-drawer", inputs: ["header", "visible", "position", "fullScreen", "modal", "closable", "closeOnEscape"], outputs: ["visibleChange", "onHide"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskDetailPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskDetailPanelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tm-task-detail-panel',
-                    imports: [
-                        DrawerModule,
-                        ButtonModule,
-                        TagModule,
-                        DatePipe,
+                    imports: [UiModule, DatePipe,
                         FormsModule,
-                        TextareaModule,
-                        TooltipModule,
-                        TranslatePipe,
-                    ],
+                        TranslatePipe,],
                     template: `
-    <p-drawer
+    <f-drawer
       [visible]="!!task()"
       position="right"
       [style]="{ width: '500px' }"
@@ -1244,34 +1255,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       @if (task(); as t) {
         <div class="flex flex-col gap-6 h-full overflow-y-auto pb-4">
           <div class="flex items-center justify-end gap-1">
-            <p-button
-              icon="pi pi-pencil"
+            <button
+              fButton
               severity="secondary"
               size="small"
               [text]="true"
-              [pTooltip]="'task.detail.edit' | translate"
+              [fTooltip]="'task.detail.edit' | translate"
               tooltipPosition="left"
-              (onClick)="editTask.emit(t)"
-            />
-            <p-button
-              icon="pi pi-trash"
+              (click)="editTask.emit(t)"
+            >
+              <ui-icon pButtonIcon name="pencil"></ui-icon>
+            </button>
+            <button
+              fButton
               severity="danger"
               size="small"
               [text]="true"
-              [loading]="isDeleting()"
-              [pTooltip]="'task.detail.delete' | translate"
+              [fTooltip]="'task.detail.delete' | translate"
               tooltipPosition="left"
-              (onClick)="deleteTask(t.id)"
-            />
+              (click)="deleteTask(t.id)"
+              [disabled]="isDeleting()"
+            >
+              @if (isDeleting()) {
+                <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+              } @else {
+                <ui-icon pButtonIcon name="trash"></ui-icon>
+              }
+            </button>
           </div>
 
           <div class="flex items-center gap-3">
-            <p-tag
+            <f-tag
               [value]="t.priority"
               [severity]="prioritySeverity(t.priority)"
             />
             @if (t.dueDate) {
-              <span class="text-sm text-surface-500">
+              <span class="text-sm text-muted-color">
                 {{ 'task.detail.due.label' | translate }}:
                 {{ t.dueDate | date: 'mediumDate' }}
               </span>
@@ -1286,11 +1305,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               <div class="flex flex-wrap gap-2">
                 @for (member of assigneeMembers(); track member.userId) {
                   <div class="flex items-center gap-2 px-2 py-1 rounded-full ">
-                    <span
-                      class="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 flex items-center justify-center text-xs font-semibold"
-                    >
-                      {{ initials(member.userName) }}
-                    </span>
+                    <f-avatar
+                      shape="circle"
+                      size="small"
+                      [label]="initials(member.userName)"
+                      styleClass="!bg-primary-100 dark:!bg-primary-900 !text-primary-700 dark:!text-primary-300"
+                    />
                     <span class="text-sm">{{ member.userName }}</span>
                   </div>
                 }
@@ -1302,9 +1322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <h4 class="text-sm font-semibold mb-2">
               {{ 'shared.description' | translate }}
             </h4>
-            <p
-              class="text-sm text-surface-600 dark:text-surface-400 whitespace-pre-wrap"
-            >
+            <p class="text-sm text-color whitespace-pre-wrap">
               {{
                 t.description || ('task.detail.description.empty' | translate)
               }}
@@ -1320,31 +1338,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
             @for (comment of rootComments(); track comment.id) {
               <div
-                class="group flex flex-col gap-1 py-2 border-b border-surface-100 dark:border-surface-800 last:border-0"
+                class="group flex flex-col gap-1 py-2 border-b border-surface last:border-0"
               >
                 <div class="flex items-center justify-between">
-                  <span class="text-xs text-surface-400">{{
+                  <span class="text-xs text-muted-color">{{
                     comment.createdAt | date: 'MMM d, y, h:mm a'
                   }}</span>
-                  <p-button
-                    [label]="'task.comment.reply' | translate"
-                    icon="pi pi-reply"
+                  <button
+                    fButton
                     size="small"
                     [text]="true"
                     severity="secondary"
-                    styleClass="opacity-0 group-hover:opacity-100 transition-opacity !py-0.5 !px-1.5 text-xs"
-                    (onClick)="toggleReply(comment.id)"
-                  />
+                    class="opacity-0 group-hover:opacity-100 transition-opacity !py-0.5 !px-1.5 text-xs"
+                    (click)="toggleReply(comment.id)"
+                  >
+                    <ui-icon pButtonIcon name="reply"></ui-icon>
+                    <span pButtonLabel>{{ 'task.comment.reply' | translate }}</span>
+                  </button>
                 </div>
                 <p class="text-sm">{{ comment.content }}</p>
 
                 @if (repliesFor(comment.id).length > 0) {
                   <div
-                    class="mt-1 pl-3 border-l-2 border-surface-200 dark:border-surface-700 flex flex-col gap-2"
+                    class="mt-1 pl-3 border-l-2 border-surface flex flex-col gap-2"
                   >
                     @for (reply of repliesFor(comment.id); track reply.id) {
                       <div class="flex flex-col gap-0.5">
-                        <span class="text-xs text-surface-400">{{
+                        <span class="text-xs text-muted-color">{{
                           reply.createdAt | date: 'MMM d, y, h:mm a'
                         }}</span>
                         <p class="text-sm">{{ reply.content }}</p>
@@ -1358,7 +1378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     class="mt-2 pl-3 border-l-2 border-primary-300 dark:border-primary-700 flex gap-2"
                   >
                     <textarea
-                      pTextarea
+                      fTextarea
                       [(ngModel)]="replyText"
                       rows="2"
                       [placeholder]="
@@ -1368,20 +1388,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       autoResize="true"
                     ></textarea>
                     <div class="flex flex-col gap-1">
-                      <p-button
-                        icon="pi pi-send"
+                      <button
+                        fButton
                         size="small"
-                        [loading]="isSendingReply()"
-                        [disabled]="!replyText.trim()"
-                        (onClick)="submitReply(t.id, comment.id)"
-                      />
-                      <p-button
-                        icon="pi pi-times"
+                        [disabled]="!replyText.trim() || isSendingReply()"
+                        (click)="submitReply(t.id, comment.id)"
+                      >
+                        @if (isSendingReply()) {
+                          <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                        } @else {
+                          <ui-icon pButtonIcon name="send"></ui-icon>
+                        }
+                      </button>
+                      <button
+                        fButton
                         size="small"
                         severity="secondary"
                         [text]="true"
-                        (onClick)="cancelReply()"
-                      />
+                        (click)="cancelReply()"
+                      >
+                        <ui-icon pButtonIcon name="times"></ui-icon>
+                      </button>
                     </div>
                   </div>
                 }
@@ -1389,30 +1416,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             }
 
             @if (rootComments().length === 0) {
-              <p class="text-sm text-surface-400 py-2">
+              <p class="text-sm text-muted-color py-2">
                 {{ 'task.detail.comments.empty' | translate }}
               </p>
             }
 
             <div class="flex gap-2 mt-3">
               <textarea
-                pTextarea
+                fTextarea
                 [(ngModel)]="newComment"
                 rows="2"
                 [placeholder]="'task.detail.comment.placeholder' | translate"
                 class="flex-1 resize-none"
               ></textarea>
-              <p-button
-                icon="pi pi-send"
-                [loading]="isSendingComment()"
-                [disabled]="!newComment.trim()"
-                (onClick)="addComment(t.id)"
-              />
+              <button
+                fButton
+                [disabled]="!newComment.trim() || isSendingComment()"
+                (click)="addComment(t.id)"
+              >
+                @if (isSendingComment()) {
+                  <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                } @else {
+                  <ui-icon pButtonIcon name="send"></ui-icon>
+                }
+              </button>
             </div>
           </div>
         </div>
       }
-    </p-drawer>
+    </f-drawer>
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { task: [{ type: i0.Input, args: [{ isSignal: true, alias: "task", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], editTask: [{ type: i0.Output, args: ["editTask"] }] } });
@@ -1421,11 +1453,13 @@ class BoardListPageComponent {
     state = inject(TaskBoardStateService);
     boardApi = inject(TaskBoardApiService);
     router = inject(Router);
-    showCreateDialog = signal(false, ...(ngDevMode ? [{ debugName: "showCreateDialog" }] : []));
-    isCreating = signal(false, ...(ngDevMode ? [{ debugName: "isCreating" }] : []));
+    showCreateDialog = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCreateDialog" }] : /* istanbul ignore next */ []));
+    isCreating = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCreating" }] : /* istanbul ignore next */ []));
     newBoardName = '';
     newBoardDescription = '';
-    newBoardColor = '#6366f1';
+    newBoardColor = BOARD_COLOR_PALETTE[0];
     boardColors = BOARD_COLOR_PALETTE;
     constructor() {
         this.state.loadBoards();
@@ -1437,7 +1471,7 @@ class BoardListPageComponent {
         this.showCreateDialog.set(false);
         this.newBoardName = '';
         this.newBoardDescription = '';
-        this.newBoardColor = '#6366f1';
+        this.newBoardColor = BOARD_COLOR_PALETTE[0];
     }
     async createBoard() {
         if (!this.newBoardName.trim())
@@ -1456,8 +1490,8 @@ class BoardListPageComponent {
             this.isCreating.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BoardListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BoardListPageComponent, isStandalone: true, selector: "tm-board-list-page", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BoardListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: BoardListPageComponent, isStandalone: true, selector: "tm-board-list-page", ngImport: i0, template: `
     <div class="p-2 sm:p-4">
       <div
         class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
@@ -1470,28 +1504,30 @@ class BoardListPageComponent {
             {{ 'task.manager.boards.subtitle' | translate }}
           </p>
         </div>
-        <p-button
-          [label]="'task.manager.board.new' | translate"
-          icon="pi pi-plus"
-          (onClick)="showCreateDialog.set(true)"
-        />
+        <button
+          fButton
+          (click)="showCreateDialog.set(true)"
+        >
+          <ui-icon pButtonIcon name="plus"></ui-icon>
+          <span pButtonLabel>{{ 'task.manager.board.new' | translate }}</span>
+        </button>
       </div>
 
       @if (state.isLoading()) {
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
           @for (i of [1, 2, 3, 4, 5, 6]; track i) {
             <div class="card !p-0 overflow-hidden">
-              <p-skeleton height="4px" borderRadius="0" />
+              <f-skeleton height="4px" borderRadius="0" />
               <div class="p-5">
-                <p-skeleton height="18px" width="60%" class="mb-3" />
-                <p-skeleton height="13px" class="mb-1" />
-                <p-skeleton height="13px" width="70%" class="mb-5" />
+                <f-skeleton height="18px" width="60%" class="mb-3" />
+                <f-skeleton height="13px" class="mb-1" />
+                <f-skeleton height="13px" width="70%" class="mb-5" />
                 <div class="flex gap-5 pt-4 border-t border-surface-100">
-                  <p-skeleton height="14px" width="55px" />
-                  <p-skeleton height="14px" width="45px" />
-                  <p-skeleton height="14px" width="50px" />
+                  <f-skeleton height="14px" width="55px" />
+                  <f-skeleton height="14px" width="45px" />
+                  <f-skeleton height="14px" width="50px" />
                 </div>
-                <p-skeleton height="11px" width="100px" class="mt-2" />
+                <f-skeleton height="11px" width="100px" class="mt-2" />
               </div>
             </div>
           }
@@ -1503,7 +1539,7 @@ class BoardListPageComponent {
           <span
             class="w-16 h-16 rounded-2xl border-2 border-dashed border-surface-300 flex items-center justify-center mb-4"
           >
-            <i class="pi pi-th-large text-2xl text-surface-400"></i>
+            <ui-icon name="th-large" class="text-2xl text-surface-400"></ui-icon>
           </span>
           <p class="text-base font-semibold mb-1">
             {{ 'task.manager.board.empty' | translate }}
@@ -1511,12 +1547,14 @@ class BoardListPageComponent {
           <p class="text-sm text-muted-color mb-5">
             {{ 'task.manager.board.empty.hint' | translate }}
           </p>
-          <p-button
-            [label]="'task.manager.board.new' | translate"
-            icon="pi pi-plus"
+          <button
+            fButton
             size="small"
-            (onClick)="showCreateDialog.set(true)"
-          />
+            (click)="showCreateDialog.set(true)"
+          >
+            <ui-icon pButtonIcon name="plus"></ui-icon>
+            <span pButtonLabel>{{ 'task.manager.board.new' | translate }}</span>
+          </button>
         </div>
       } @else {
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -1536,9 +1574,7 @@ class BoardListPageComponent {
                       {{ board.name }}
                     </h3>
                   </div>
-                  <i
-                    class="pi pi-arrow-right text-xs text-surface-300 group-hover:text-primary-500 group-hover:translate-x-0.5 transition-all duration-150 flex-shrink-0 mt-1"
-                  ></i>
+                  <ui-icon name="arrow-right" class="text-xs text-surface-300 group-hover:text-primary-500 group-hover:translate-x-0.5 transition-all duration-150 flex-shrink-0 mt-1"></ui-icon>
                 </div>
 
                 <p
@@ -1548,11 +1584,11 @@ class BoardListPageComponent {
                 </p>
 
                 <div
-                  class="border-t border-surface-100 dark:border-surface-700 mt-4 pt-4 space-y-2.5"
+                  class="border-t border-surface mt-4 pt-4 space-y-2.5"
                 >
                   <div class="flex items-center gap-4">
                     <span class="flex items-center gap-1.5">
-                      <i class="pi pi-users text-[11px] text-muted-color"></i>
+                      <ui-icon name="users" class="text-[11px] text-muted-color"></ui-icon>
                       <span class="text-sm font-semibold">{{
                         board.totalMembers ?? 0
                       }}</span>
@@ -1564,7 +1600,7 @@ class BoardListPageComponent {
                       class="w-px h-3 bg-surface-200 dark:bg-surface-600"
                     ></span>
                     <span class="flex items-center gap-1.5">
-                      <i class="pi pi-list text-[11px] text-muted-color"></i>
+                      <ui-icon name="list" class="text-[11px] text-muted-color"></ui-icon>
                       <span class="text-sm font-semibold">{{
                         board.totalLists ?? 0
                       }}</span>
@@ -1576,9 +1612,7 @@ class BoardListPageComponent {
                       class="w-px h-3 bg-surface-200 dark:bg-surface-600"
                     ></span>
                     <span class="flex items-center gap-1.5">
-                      <i
-                        class="pi pi-check-square text-[11px] text-muted-color"
-                      ></i>
+                      <ui-icon name="check-square" class="text-[11px] text-muted-color"></ui-icon>
                       <span class="text-sm font-semibold">{{
                         board.totalTasks ?? 0
                       }}</span>
@@ -1590,7 +1624,7 @@ class BoardListPageComponent {
                   <div
                     class="flex items-center gap-1.5 text-xs text-muted-color"
                   >
-                    <i class="pi pi-clock text-[10px]"></i>
+                    <ui-icon name="clock" class="text-[10px]"></ui-icon>
                     <span>{{ board.createdAt | date: 'MMM d, yyyy' }}</span>
                   </div>
                 </div>
@@ -1601,7 +1635,7 @@ class BoardListPageComponent {
       }
     </div>
 
-    <p-dialog
+    <f-dialog
       [header]="'task.manager.board.new' | translate"
       [(visible)]="showCreateDialog"
       [modal]="true"
@@ -1614,7 +1648,7 @@ class BoardListPageComponent {
             <span class="text-red-500">*</span></label
           >
           <input
-            pInputText
+            fInputText
             [(ngModel)]="newBoardName"
             [placeholder]="'task.manager.board.name.placeholder' | translate"
           />
@@ -1624,7 +1658,7 @@ class BoardListPageComponent {
             'shared.description' | translate
           }}</label>
           <textarea
-            pTextarea
+            fTextarea
             [(ngModel)]="newBoardDescription"
             rows="2"
             [placeholder]="
@@ -1645,11 +1679,11 @@ class BoardListPageComponent {
                 [class.ring-2]="newBoardColor === c"
                 [class.ring-offset-2]="newBoardColor === c"
                 [class.ring-surface-900]="newBoardColor === c"
-                [pTooltip]="c"
+                [fTooltip]="c"
                 (click)="newBoardColor = c"
               >
                 @if (newBoardColor === c) {
-                  <i class="pi pi-check text-white text-xs"></i>
+                  <ui-icon name="check" class="text-white text-xs"></ui-icon>
                 }
               </button>
             }
@@ -1666,28 +1700,35 @@ class BoardListPageComponent {
         </div>
       </div>
 
-      <ng-template pTemplate="footer">
+      <ng-template #footer>
         <div class="flex justify-end gap-2">
-          <p-button
-            [label]="'shared.cancel' | translate"
+          <button
+            fButton
             severity="secondary"
-            (onClick)="closeCreateDialog()"
-          />
-          <p-button
-            [label]="'shared.create' | translate"
-            [loading]="isCreating()"
-            (onClick)="createBoard()"
-          />
+            (click)="closeCreateDialog()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            (click)="createBoard()"
+            [disabled]="isCreating()"
+          >
+            @if (isCreating()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'shared.create' | translate }}</span>
+          </button>
         </div>
       </ng-template>
-    </p-dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i1$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: i9$1.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    </f-dialog>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.SkeletonComponent, selector: "f-skeleton", inputs: ["width", "height", "borderRadius", "shape"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "directive", type: i1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "dismissableMask", "resizable", "style", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BoardListPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BoardListPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tm-board-list-page',
-                    imports: [AngularModule, PrimeModule, TranslatePipe],
+                    imports: [AngularModule, UiModule, TranslatePipe],
                     template: `
     <div class="p-2 sm:p-4">
       <div
@@ -1701,28 +1742,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             {{ 'task.manager.boards.subtitle' | translate }}
           </p>
         </div>
-        <p-button
-          [label]="'task.manager.board.new' | translate"
-          icon="pi pi-plus"
-          (onClick)="showCreateDialog.set(true)"
-        />
+        <button
+          fButton
+          (click)="showCreateDialog.set(true)"
+        >
+          <ui-icon pButtonIcon name="plus"></ui-icon>
+          <span pButtonLabel>{{ 'task.manager.board.new' | translate }}</span>
+        </button>
       </div>
 
       @if (state.isLoading()) {
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
           @for (i of [1, 2, 3, 4, 5, 6]; track i) {
             <div class="card !p-0 overflow-hidden">
-              <p-skeleton height="4px" borderRadius="0" />
+              <f-skeleton height="4px" borderRadius="0" />
               <div class="p-5">
-                <p-skeleton height="18px" width="60%" class="mb-3" />
-                <p-skeleton height="13px" class="mb-1" />
-                <p-skeleton height="13px" width="70%" class="mb-5" />
+                <f-skeleton height="18px" width="60%" class="mb-3" />
+                <f-skeleton height="13px" class="mb-1" />
+                <f-skeleton height="13px" width="70%" class="mb-5" />
                 <div class="flex gap-5 pt-4 border-t border-surface-100">
-                  <p-skeleton height="14px" width="55px" />
-                  <p-skeleton height="14px" width="45px" />
-                  <p-skeleton height="14px" width="50px" />
+                  <f-skeleton height="14px" width="55px" />
+                  <f-skeleton height="14px" width="45px" />
+                  <f-skeleton height="14px" width="50px" />
                 </div>
-                <p-skeleton height="11px" width="100px" class="mt-2" />
+                <f-skeleton height="11px" width="100px" class="mt-2" />
               </div>
             </div>
           }
@@ -1734,7 +1777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <span
             class="w-16 h-16 rounded-2xl border-2 border-dashed border-surface-300 flex items-center justify-center mb-4"
           >
-            <i class="pi pi-th-large text-2xl text-surface-400"></i>
+            <ui-icon name="th-large" class="text-2xl text-surface-400"></ui-icon>
           </span>
           <p class="text-base font-semibold mb-1">
             {{ 'task.manager.board.empty' | translate }}
@@ -1742,12 +1785,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <p class="text-sm text-muted-color mb-5">
             {{ 'task.manager.board.empty.hint' | translate }}
           </p>
-          <p-button
-            [label]="'task.manager.board.new' | translate"
-            icon="pi pi-plus"
+          <button
+            fButton
             size="small"
-            (onClick)="showCreateDialog.set(true)"
-          />
+            (click)="showCreateDialog.set(true)"
+          >
+            <ui-icon pButtonIcon name="plus"></ui-icon>
+            <span pButtonLabel>{{ 'task.manager.board.new' | translate }}</span>
+          </button>
         </div>
       } @else {
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -1767,9 +1812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       {{ board.name }}
                     </h3>
                   </div>
-                  <i
-                    class="pi pi-arrow-right text-xs text-surface-300 group-hover:text-primary-500 group-hover:translate-x-0.5 transition-all duration-150 flex-shrink-0 mt-1"
-                  ></i>
+                  <ui-icon name="arrow-right" class="text-xs text-surface-300 group-hover:text-primary-500 group-hover:translate-x-0.5 transition-all duration-150 flex-shrink-0 mt-1"></ui-icon>
                 </div>
 
                 <p
@@ -1779,11 +1822,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 </p>
 
                 <div
-                  class="border-t border-surface-100 dark:border-surface-700 mt-4 pt-4 space-y-2.5"
+                  class="border-t border-surface mt-4 pt-4 space-y-2.5"
                 >
                   <div class="flex items-center gap-4">
                     <span class="flex items-center gap-1.5">
-                      <i class="pi pi-users text-[11px] text-muted-color"></i>
+                      <ui-icon name="users" class="text-[11px] text-muted-color"></ui-icon>
                       <span class="text-sm font-semibold">{{
                         board.totalMembers ?? 0
                       }}</span>
@@ -1795,7 +1838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       class="w-px h-3 bg-surface-200 dark:bg-surface-600"
                     ></span>
                     <span class="flex items-center gap-1.5">
-                      <i class="pi pi-list text-[11px] text-muted-color"></i>
+                      <ui-icon name="list" class="text-[11px] text-muted-color"></ui-icon>
                       <span class="text-sm font-semibold">{{
                         board.totalLists ?? 0
                       }}</span>
@@ -1807,9 +1850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       class="w-px h-3 bg-surface-200 dark:bg-surface-600"
                     ></span>
                     <span class="flex items-center gap-1.5">
-                      <i
-                        class="pi pi-check-square text-[11px] text-muted-color"
-                      ></i>
+                      <ui-icon name="check-square" class="text-[11px] text-muted-color"></ui-icon>
                       <span class="text-sm font-semibold">{{
                         board.totalTasks ?? 0
                       }}</span>
@@ -1821,7 +1862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   <div
                     class="flex items-center gap-1.5 text-xs text-muted-color"
                   >
-                    <i class="pi pi-clock text-[10px]"></i>
+                    <ui-icon name="clock" class="text-[10px]"></ui-icon>
                     <span>{{ board.createdAt | date: 'MMM d, yyyy' }}</span>
                   </div>
                 </div>
@@ -1832,7 +1873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       }
     </div>
 
-    <p-dialog
+    <f-dialog
       [header]="'task.manager.board.new' | translate"
       [(visible)]="showCreateDialog"
       [modal]="true"
@@ -1845,7 +1886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <span class="text-red-500">*</span></label
           >
           <input
-            pInputText
+            fInputText
             [(ngModel)]="newBoardName"
             [placeholder]="'task.manager.board.name.placeholder' | translate"
           />
@@ -1855,7 +1896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             'shared.description' | translate
           }}</label>
           <textarea
-            pTextarea
+            fTextarea
             [(ngModel)]="newBoardDescription"
             rows="2"
             [placeholder]="
@@ -1876,11 +1917,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 [class.ring-2]="newBoardColor === c"
                 [class.ring-offset-2]="newBoardColor === c"
                 [class.ring-surface-900]="newBoardColor === c"
-                [pTooltip]="c"
+                [fTooltip]="c"
                 (click)="newBoardColor = c"
               >
                 @if (newBoardColor === c) {
-                  <i class="pi pi-check text-white text-xs"></i>
+                  <ui-icon name="check" class="text-white text-xs"></ui-icon>
                 }
               </button>
             }
@@ -1897,21 +1938,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         </div>
       </div>
 
-      <ng-template pTemplate="footer">
+      <ng-template #footer>
         <div class="flex justify-end gap-2">
-          <p-button
-            [label]="'shared.cancel' | translate"
+          <button
+            fButton
             severity="secondary"
-            (onClick)="closeCreateDialog()"
-          />
-          <p-button
-            [label]="'shared.create' | translate"
-            [loading]="isCreating()"
-            (onClick)="createBoard()"
-          />
+            (click)="closeCreateDialog()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            (click)="createBoard()"
+            [disabled]="isCreating()"
+          >
+            @if (isCreating()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'shared.create' | translate }}</span>
+          </button>
         </div>
       </ng-template>
-    </p-dialog>
+    </f-dialog>
   `,
                 }]
         }], ctorParameters: () => [] });
@@ -1927,34 +1975,51 @@ class BoardViewPageComponent {
     listApi = inject(TaskListApiService);
     confirmationService = inject(ConfirmationService);
     messageService = inject(MessageService);
-    translateAdapter = inject(TranslateService, { optional: true });
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
     destroyRef = inject(DestroyRef);
     translate(key, vars) {
         return this.translateAdapter?.translate(key, vars) ?? key;
     }
-    boardId = input.required(...(ngDevMode ? [{ debugName: "boardId" }] : []));
-    viewMode = signal('board', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
-    showTaskForm = signal(false, ...(ngDevMode ? [{ debugName: "showTaskForm" }] : []));
-    editingTask = signal(null, ...(ngDevMode ? [{ debugName: "editingTask" }] : []));
-    activeListId = signal('', ...(ngDevMode ? [{ debugName: "activeListId" }] : []));
-    showAddListDialog = signal(false, ...(ngDevMode ? [{ debugName: "showAddListDialog" }] : []));
-    isAddingList = signal(false, ...(ngDevMode ? [{ debugName: "isAddingList" }] : []));
-    showLabelsDialog = signal(false, ...(ngDevMode ? [{ debugName: "showLabelsDialog" }] : []));
-    isAddingLabel = signal(false, ...(ngDevMode ? [{ debugName: "isAddingLabel" }] : []));
-    showMembersDialog = signal(false, ...(ngDevMode ? [{ debugName: "showMembersDialog" }] : []));
-    isAddingMember = signal(false, ...(ngDevMode ? [{ debugName: "isAddingMember" }] : []));
-    editingListId = signal(null, ...(ngDevMode ? [{ debugName: "editingListId" }] : []));
-    editingListNameValue = signal('', ...(ngDevMode ? [{ debugName: "editingListNameValue" }] : []));
-    showEditBoardDialog = signal(false, ...(ngDevMode ? [{ debugName: "showEditBoardDialog" }] : []));
-    isSavingBoard = signal(false, ...(ngDevMode ? [{ debugName: "isSavingBoard" }] : []));
+    boardId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boardId" }] : /* istanbul ignore next */ []));
+    viewMode = signal('board', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
+    showTaskForm = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTaskForm" }] : /* istanbul ignore next */ []));
+    editingTask = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editingTask" }] : /* istanbul ignore next */ []));
+    activeListId = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeListId" }] : /* istanbul ignore next */ []));
+    showAddListDialog = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAddListDialog" }] : /* istanbul ignore next */ []));
+    isAddingList = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAddingList" }] : /* istanbul ignore next */ []));
+    showLabelsDialog = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabelsDialog" }] : /* istanbul ignore next */ []));
+    isAddingLabel = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAddingLabel" }] : /* istanbul ignore next */ []));
+    showMembersDialog = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMembersDialog" }] : /* istanbul ignore next */ []));
+    isAddingMember = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAddingMember" }] : /* istanbul ignore next */ []));
+    editingListId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editingListId" }] : /* istanbul ignore next */ []));
+    editingListNameValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editingListNameValue" }] : /* istanbul ignore next */ []));
+    showEditBoardDialog = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEditBoardDialog" }] : /* istanbul ignore next */ []));
+    isSavingBoard = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSavingBoard" }] : /* istanbul ignore next */ []));
     newListName = '';
     newLabelName = '';
-    newLabelColor = '#6366F1';
+    newLabelColor = BOARD_COLOR_PALETTE[0];
     selectedMemberUser = null;
     newMemberRole = 'MEMBER';
     editBoardName = '';
     editBoardDescription = '';
-    editBoardColor = '#6366F1';
+    editBoardColor = BOARD_COLOR_PALETTE[0];
     boardColorPalette = BOARD_COLOR_PALETTE;
     memberRoleOptions = [
         { labelKey: 'task.manager.member.role.admin', value: 'ADMIN' },
@@ -1965,10 +2030,15 @@ class BoardViewPageComponent {
         ...task,
         listName: list.name,
         listColor: list.color,
-    }))), ...(ngDevMode ? [{ debugName: "allTasksFlat" }] : []));
-    listDropIds = computed(() => this.state.listsWithTasks().map((l) => l.id), ...(ngDevMode ? [{ debugName: "listDropIds" }] : []));
+    }))), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allTasksFlat" }] : /* istanbul ignore next */ []));
+    listDropIds = computed(() => this.state.listsWithTasks().map((l) => l.id), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listDropIds" }] : /* istanbul ignore next */ []));
     constructor() {
-        effect(() => { const id = this.boardId(); untracked(() => this.state.openBoard(id)); });
+        effect(() => {
+            const id = this.boardId();
+            untracked(() => this.state.openBoard(id));
+        });
         this.destroyRef.onDestroy(() => this.state.closeBoard());
     }
     openAddTask(list) {
@@ -1981,17 +2051,22 @@ class BoardViewPageComponent {
     }
     onDeleteTask(task) {
         this.confirmationService.confirm({
-            message: this.translate('shared.confirm.delete.item', { name: task.title }),
+            message: this.translate('shared.confirm.delete.item', {
+                name: task.title,
+            }),
             header: this.translate('task.detail.delete'),
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptButtonStyleClass: 'p-button-danger',
             accept: async () => {
-                await this.state.deleteTask(task.id);
-                this.messageService.add({
-                    severity: 'success',
-                    summary: this.translate('shared.success'),
-                    detail: this.translate('task.delete.success'),
-                });
+                try {
+                    await this.state.deleteTask(task.id);
+                    this.messageService.add({
+                        severity: 'success',
+                        summary: this.translate('shared.success'),
+                        detail: this.translate('task.delete.success'),
+                    });
+                }
+                catch { }
             },
         });
     }
@@ -2002,7 +2077,8 @@ class BoardViewPageComponent {
         this.state.selectTask(null);
     }
     getMemberName(assigneeId) {
-        return this.state.members().find((m) => m.userId === assigneeId)?.userName ?? null;
+        return (this.state.members().find((m) => m.userId === assigneeId)?.userName ??
+            null);
     }
     getMemberInitials(assigneeId) {
         return memberInitials(this.getMemberName(assigneeId));
@@ -2106,7 +2182,7 @@ class BoardViewPageComponent {
         try {
             await this.state.addLabel(this.boardId(), this.newLabelName.trim(), this.newLabelColor);
             this.newLabelName = '';
-            this.newLabelColor = '#6366F1';
+            this.newLabelColor = BOARD_COLOR_PALETTE[0];
         }
         finally {
             this.isAddingLabel.set(false);
@@ -2153,8 +2229,8 @@ class BoardViewPageComponent {
             this.isAddingList.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BoardViewPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BoardViewPageComponent, isStandalone: true, selector: "tm-board-view-page", inputs: { boardId: { classPropertyName: "boardId", publicName: "boardId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BoardViewPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: BoardViewPageComponent, isStandalone: true, selector: "tm-board-view-page", inputs: { boardId: { classPropertyName: "boardId", publicName: "boardId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <div class="flex flex-col h-full">
       <div class="flex flex-col">
         <div class="flex items-center justify-between px-5 py-2.5 gap-4">
@@ -2162,22 +2238,28 @@ class BoardViewPageComponent {
             <div class="flex items-center gap-2.5 min-w-0 flex-1 group">
               <div class="flex flex-col min-w-0">
                 <div class="flex items-center gap-1.5 min-w-0">
-                  <h1 class="text-base font-bold text-surface-900 dark:text-surface-0 truncate leading-snug">
+                  <h1
+                    class="text-base font-bold text-surface-900 dark:text-surface-0 truncate leading-snug"
+                  >
                     {{ board.name }}
                   </h1>
-                  <p-button
-                    icon="pi pi-pencil"
+                  <button
+                    fButton
                     [text]="true"
                     size="small"
                     severity="secondary"
-                    styleClass="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
-                    [pTooltip]="'task.manager.board.edit' | translate"
+                    class="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                    [fTooltip]="'task.manager.board.edit' | translate"
                     tooltipPosition="bottom"
-                    (onClick)="openEditBoardDialog(board)"
-                  />
+                    (click)="openEditBoardDialog(board)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
                 </div>
                 @if (board.description) {
-                  <span class="text-xs text-surface-400 truncate max-w-sm hidden md:block leading-snug">
+                  <span
+                    class="text-xs text-muted-color truncate max-w-sm hidden md:block leading-snug"
+                  >
                     {{ board.description }}
                   </span>
                 }
@@ -2190,89 +2272,114 @@ class BoardViewPageComponent {
               <div
                 class="flex items-center -space-x-2 cursor-pointer mr-1"
                 (click)="showMembersDialog.set(true)"
-                [pTooltip]="'task.manager.board.manage.members' | translate"
+                [fTooltip]="'task.manager.board.manage.members' | translate"
                 tooltipPosition="bottom"
               >
                 @for (member of state.members().slice(0, 4); track member.id) {
-                  <div
-                    class="w-6 h-6 rounded-full border-2 border-white dark:border-surface-900 flex items-center justify-center text-[9px] font-bold text-white flex-shrink-0 ring-1 ring-surface-100 dark:ring-surface-800"
-                    [style.background-color]="memberColor(member)"
-                  >
-                    {{ memberInitials(member) }}
-                  </div>
+                  <f-avatar
+                    shape="circle"
+                    size="small"
+                    [label]="memberInitials(member)"
+                    [color]="memberColor(member)"
+                    styleClass="!border-2 !border-surface-card ring-1 ring-surface flex-shrink-0"
+                  />
                 }
                 @if (state.members().length > 4) {
-                  <div
-                    class="w-6 h-6 rounded-full border-2 border-white dark:border-surface-900 bg-surface-200 dark:bg-surface-700 flex items-center justify-center text-[9px] font-bold text-surface-600 dark:text-surface-300 flex-shrink-0"
-                  >
-                    +{{ state.members().length - 4 }}
-                  </div>
+                  <f-avatar
+                    shape="circle"
+                    size="small"
+                    [label]="'+' + (state.members().length - 4)"
+                    styleClass="!border-2 !border-surface-card !bg-surface-200 dark:!bg-surface-700 !text-surface-600 dark:!text-surface-300 flex-shrink-0"
+                  />
                 }
               </div>
             }
 
-            <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
+            <div
+              class="h-5 w-px bg-surface-300 dark:bg-surface-600 mx-0.5"
+            ></div>
 
-            <div class="flex rounded-lg overflow-hidden border border-surface-200 dark:border-surface-700">
-              <p-button
-                icon="pi pi-th-large"
-                [pTooltip]="'task.manager.view.board' | translate"
+            <div
+              class="flex rounded-border overflow-hidden border border-surface"
+            >
+              <button
+                fButton
+                [fTooltip]="'task.manager.view.board' | translate"
                 tooltipPosition="bottom"
                 size="small"
                 [severity]="viewMode() === 'board' ? 'primary' : 'secondary'"
                 [outlined]="viewMode() !== 'board'"
-                styleClass="!rounded-none !border-0"
-                (onClick)="viewMode.set('board')"
-              />
-              <p-button
-                icon="pi pi-list"
-                [pTooltip]="'task.manager.view.list' | translate"
+                class="!rounded-none !border-0"
+                (click)="viewMode.set('board')"
+              >
+                <ui-icon pButtonIcon name="th-large"></ui-icon>
+              </button>
+              <button
+                fButton
+                [fTooltip]="'task.manager.view.list' | translate"
                 tooltipPosition="bottom"
                 size="small"
                 [severity]="viewMode() === 'list' ? 'primary' : 'secondary'"
                 [outlined]="viewMode() !== 'list'"
-                styleClass="!rounded-none !border-0"
-                (onClick)="viewMode.set('list')"
-              />
+                class="!rounded-none !border-0"
+                (click)="viewMode.set('list')"
+              >
+                <ui-icon pButtonIcon name="list"></ui-icon>
+              </button>
             </div>
 
-            <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
+            <div
+              class="h-5 w-px bg-surface-300 dark:bg-surface-600 mx-0.5"
+            ></div>
 
-            <p-button
-              icon="pi pi-users"
+            <button
+              fButton
               [text]="true"
               severity="secondary"
               size="small"
-              styleClass="!w-8 !h-8"
-              [pTooltip]="'task.manager.board.manage.members' | translate"
+              class="!w-8 !h-8"
+              [fTooltip]="'task.manager.board.manage.members' | translate"
               tooltipPosition="bottom"
-              (onClick)="showMembersDialog.set(true)"
-            />
-            <p-button
-              icon="pi pi-tag"
+              (click)="showMembersDialog.set(true)"
+            >
+              <ui-icon pButtonIcon name="users"></ui-icon>
+            </button>
+            <button
+              fButton
               [text]="true"
               severity="secondary"
               size="small"
-              styleClass="!w-8 !h-8"
-              [pTooltip]="'task.manager.board.manage.labels' | translate"
+              class="!w-8 !h-8"
+              [fTooltip]="'task.manager.board.manage.labels' | translate"
               tooltipPosition="bottom"
-              (onClick)="showLabelsDialog.set(true)"
-            />
+              (click)="showLabelsDialog.set(true)"
+            >
+              <ui-icon pButtonIcon name="tag"></ui-icon>
+            </button>
 
             @if (viewMode() === 'board') {
-              <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
-              <p-button
-                icon="pi pi-plus"
-                [label]="'task.manager.board.add.list' | translate"
+              <div
+                class="h-5 w-px bg-surface-300 dark:bg-surface-600 mx-0.5"
+              ></div>
+              <button
+                fButton
                 size="small"
-                (onClick)="showAddListDialog.set(true)"
-              />
+                (click)="showAddListDialog.set(true)"
+              >
+                <ui-icon pButtonIcon name="plus"></ui-icon>
+                <span pButtonLabel>{{
+                  'task.manager.board.add.list' | translate
+                }}</span>
+              </button>
             }
           </div>
         </div>
 
         @if (state.activeBoard(); as board) {
-          <div class="h-0.5 w-full flex-shrink-0" [style.background-color]="board.color"></div>
+          <div
+            class="h-0.5 w-full flex-shrink-0"
+            [style.background-color]="board.color"
+          ></div>
         }
       </div>
 
@@ -2281,9 +2388,9 @@ class BoardViewPageComponent {
           <div class="flex gap-4 p-6 overflow-x-auto">
             @for (i of [1, 2, 3]; track i) {
               <div class="flex-shrink-0 w-72">
-                <p-skeleton height="36px" class="mb-3" />
+                <f-skeleton height="36px" class="mb-3" />
                 @for (j of [1, 2, 3]; track j) {
-                  <p-skeleton height="90px" class="mb-2" />
+                  <f-skeleton height="90px" class="mb-2" />
                 }
               </div>
             }
@@ -2291,11 +2398,10 @@ class BoardViewPageComponent {
         } @else {
           <div class="p-6">
             @for (i of [1, 2, 3, 4, 5]; track i) {
-              <p-skeleton height="48px" class="mb-2" />
+              <f-skeleton height="48px" class="mb-2" />
             }
           </div>
         }
-
       } @else if (viewMode() === 'board') {
         <div
           class="flex gap-4 p-5 overflow-x-auto flex-1"
@@ -2307,21 +2413,21 @@ class BoardViewPageComponent {
           @for (list of state.listsWithTasks(); track list.id) {
             <div
               cdkDrag
-              class="flex-shrink-0 w-72 flex flex-col max-h-[calc(100vh-140px)] self-start"
+              class="flex-shrink-0 w-72 flex flex-col max-h-[calc(100vh-140px)] self-start rounded-border border border-surface shadow-sm overflow-hidden"
             >
               <div
-                class="flex items-center gap-1 px-2 py-2.5 rounded-t-xl border border-b-0 border-surface-200 dark:border-surface-700"
-                [style.border-top]="'3px solid ' + list.color"
+                class="flex items-center gap-1 px-2.5 py-2.5 border-b border-surface"
               >
-                <i
+                <ui-icon
                   cdkDragHandle
-                  class="pi pi-bars text-surface-300 dark:text-surface-600 text-xs cursor-grab flex-shrink-0 px-1"
-                ></i>
+                  name="bars"
+                  class="text-muted-color text-xs cursor-grab flex-shrink-0 px-1"
+                ></ui-icon>
 
                 <div class="flex items-center gap-2 min-w-0 flex-1">
                   @if (editingListId() === list.id) {
                     <input
-                      pInputText
+                      fInputText
                       class="text-sm font-semibold !h-6 !py-0 !px-1 w-full"
                       [ngModel]="editingListNameValue()"
                       (ngModelChange)="editingListNameValue.set($event)"
@@ -2332,7 +2438,9 @@ class BoardViewPageComponent {
                       autofocus
                     />
                   } @else {
-                    <span class="font-semibold text-sm truncate">{{ list.name }}</span>
+                    <span class="font-semibold text-sm truncate">{{
+                      list.name
+                    }}</span>
                     <span
                       class="text-[11px] font-semibold px-1.5 py-0.5 rounded-full text-white flex-shrink-0"
                       [style.background-color]="list.color"
@@ -2343,35 +2451,41 @@ class BoardViewPageComponent {
                 </div>
 
                 @if (editingListId() === list.id) {
-                  <p-button
-                    icon="pi pi-check"
+                  <button
+                    fButton
                     [text]="true"
                     size="small"
                     severity="success"
-                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    class="!w-6 !h-6 flex-shrink-0"
                     (mousedown)="$event.preventDefault()"
                     (click)="saveRenameList(); $event.stopPropagation()"
-                  />
-                  <p-button
-                    icon="pi pi-times"
+                  >
+                    <ui-icon pButtonIcon name="check"></ui-icon>
+                  </button>
+                  <button
+                    fButton
                     [text]="true"
                     size="small"
                     severity="secondary"
-                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    class="!w-6 !h-6 flex-shrink-0"
                     (mousedown)="$event.preventDefault()"
                     (click)="cancelRenameList(); $event.stopPropagation()"
-                  />
+                  >
+                    <ui-icon pButtonIcon name="times"></ui-icon>
+                  </button>
                 } @else {
-                  <p-button
-                    icon="pi pi-pencil"
+                  <button
+                    fButton
                     [text]="true"
                     size="small"
                     severity="secondary"
-                    styleClass="!w-6 !h-6 flex-shrink-0"
-                    [pTooltip]="'task.manager.list.rename' | translate"
+                    class="!w-6 !h-6 flex-shrink-0"
+                    [fTooltip]="'task.manager.list.rename' | translate"
                     tooltipPosition="bottom"
                     (click)="startRenameList(list); $event.stopPropagation()"
-                  />
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
                 }
               </div>
 
@@ -2381,7 +2495,7 @@ class BoardViewPageComponent {
                 [cdkDropListData]="list.tasks"
                 [cdkDropListConnectedTo]="listDropIds()"
                 (cdkDropListDropped)="onTaskDrop($event)"
-                class="flex flex-col gap-2 p-2 overflow-y-auto flex-1 min-h-[60px] border border-t-0 border-b-0 border-surface-200 dark:border-surface-700"
+                class="flex flex-col gap-2 p-2 overflow-y-auto flex-1 min-h-[60px]"
               >
                 @for (task of list.tasks; track task.id) {
                   <div cdkDrag>
@@ -2395,91 +2509,99 @@ class BoardViewPageComponent {
                 }
                 @if (list.tasks.length === 0) {
                   <div
-                    class="flex items-center justify-center h-14 border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-lg"
+                    class="flex items-center justify-center h-14 border-2 border-dashed border-surface rounded-border"
                   >
-                    <span class="text-xs text-surface-400">{{
+                    <span class="text-xs text-muted-color">{{
                       'task.manager.board.drop.tasks.here' | translate
                     }}</span>
                   </div>
                 }
               </div>
 
-              <div
-                class="rounded-b-xl border border-t-0 border-surface-200 dark:border-surface-700 p-1.5"
-              >
-                <p-button
-                  icon="pi pi-plus"
-                  [label]="'task.manager.board.add.task' | translate"
+              <div class="border-t border-surface p-1.5">
+                <button
+                  fButton
                   severity="secondary"
+                  [text]="true"
                   size="small"
-                  styleClass="w-full !justify-start"
-                  (onClick)="openAddTask(list)"
-                />
+                  class="w-full !justify-start"
+                  (click)="openAddTask(list)"
+                >
+                  <ui-icon pButtonIcon name="plus"></ui-icon>
+                  <span pButtonLabel>{{
+                    'task.manager.board.add.task' | translate
+                  }}</span>
+                </button>
               </div>
             </div>
           }
 
           @if (state.listsWithTasks().length === 0) {
             <div class="flex-1 flex items-center justify-center">
-              <div class="text-center text-surface-400">
+              <div class="text-center text-muted-color">
                 <div
-                  class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4"
+                  class="w-16 h-16 rounded-2xl border-2 border-dashed border-surface flex items-center justify-center mx-auto mb-4"
                 >
-                  <i
-                    class="pi pi-list text-3xl text-surface-300 dark:text-surface-600"
-                  ></i>
+                  <ui-icon
+                    name="list"
+                    class="text-3xl text-muted-color"
+                  ></ui-icon>
                 </div>
-                <p class="font-medium text-surface-500">
+                <p class="font-medium text-muted-color">
                   {{ 'task.manager.board.list.empty' | translate }}
                 </p>
-                <p-button
-                  icon="pi pi-plus"
-                  [label]="'task.manager.board.add.list' | translate"
+                <button
+                  fButton
                   severity="secondary"
                   size="small"
                   class="mt-3"
-                  (onClick)="showAddListDialog.set(true)"
-                />
+                  (click)="showAddListDialog.set(true)"
+                >
+                  <ui-icon pButtonIcon name="plus"></ui-icon>
+                  <span pButtonLabel>{{
+                    'task.manager.board.add.list' | translate
+                  }}</span>
+                </button>
               </div>
             </div>
           }
         </div>
-
       } @else {
         <div class="p-4 sm:p-6 flex-1 overflow-auto">
           <div class="card">
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-table
+              <f-table
                 [value]="allTasksFlat()"
                 [paginator]="allTasksFlat().length > 20"
                 [rows]="20"
                 [rowsPerPageOptions]="[10, 20, 50]"
                 [scrollable]="true"
-                class="p-datatable-sm"
                 [tableStyle]="{ 'min-width': '700px' }"
               >
                 <ng-template #header>
                   <tr>
-                    <th pSortableColumn="title" class="min-w-[240px]">
+                    <th fSortableColumn="title" class="min-w-[240px]">
                       {{ 'task.manager.table.title' | translate }}
-                      <p-sortIcon field="title" />
+                      <f-sorticon field="title" />
                     </th>
-                    <th pSortableColumn="listName" class="w-40">
+                    <th fSortableColumn="listName" class="w-40">
                       {{ 'task.manager.table.list' | translate }}
-                      <p-sortIcon field="listName" />
+                      <f-sorticon field="listName" />
                     </th>
-                    <th pSortableColumn="priority" class="w-32">
+                    <th fSortableColumn="priority" class="w-32">
                       {{ 'task.manager.table.priority' | translate }}
-                      <p-sortIcon field="priority" />
+                      <f-sorticon field="priority" />
                     </th>
                     <th class="w-36">
                       {{ 'task.manager.table.assignee' | translate }}
                     </th>
-                    <th pSortableColumn="dueDate" class="w-32">
+                    <th fSortableColumn="dueDate" class="w-32">
                       {{ 'task.manager.table.due.date' | translate }}
-                      <p-sortIcon field="dueDate" />
+                      <f-sorticon field="dueDate" />
+                    </th>
+                    <th class="w-[100px]">
+                      {{ 'shared.actions' | translate }}
                     </th>
-                    <th class="w-[100px]">{{ 'shared.actions' | translate }}</th>
                   </tr>
                 </ng-template>
                 <ng-template #body let-task>
@@ -2488,7 +2610,8 @@ class BoardViewPageComponent {
                       <span
                         class="font-medium text-sm cursor-pointer hover:text-primary-500 transition-colors"
                         (click)="state.selectTask(task)"
-                      >{{ task.title }}</span>
+                        >{{ task.title }}</span
+                      >
                     </td>
                     <td>
                       <span class="inline-flex items-center gap-1.5 text-sm">
@@ -2500,7 +2623,7 @@ class BoardViewPageComponent {
                       </span>
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="task.priority"
                         [severity]="prioritySeverity(task.priority)"
                       />
@@ -2508,21 +2631,26 @@ class BoardViewPageComponent {
                     <td>
                       @if (task.assignees?.length) {
                         <div class="flex items-center -space-x-1.5">
-                          @for (a of task.assignees!.slice(0, 3); track a.userId) {
-                            <span
-                              class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
-                              [style.background-color]="memberColorById(a.userId)"
-                              [pTooltip]="a.userName ?? ''"
-                            >
-                              {{ getMemberInitials(a.userId) }}
-                            </span>
+                          @for (
+                            a of task.assignees!.slice(0, 3);
+                            track a.userId
+                          ) {
+                            <f-avatar
+                              shape="circle"
+                              size="small"
+                              [label]="getMemberInitials(a.userId)"
+                              [color]="memberColorById(a.userId)"
+                              styleClass="!ring-surface-card flex-shrink-0"
+                              [fTooltip]="a.userName ?? ''"
+                            />
                           }
                           @if (task.assignees!.length > 3) {
-                            <span
-                              class="w-6 h-6 rounded-full bg-surface-200 dark:bg-surface-700 flex items-center justify-center text-[10px] font-bold text-surface-600 ring-2 ring-white dark:ring-surface-800 flex-shrink-0"
-                            >
-                              +{{ task.assignees!.length - 3 }}
-                            </span>
+                            <f-avatar
+                              shape="circle"
+                              size="small"
+                              [label]="'+' + (task.assignees!.length - 3)"
+                              styleClass="!bg-surface-200 dark:!bg-surface-700 !text-surface-600 !ring-surface-card flex-shrink-0"
+                            />
                           }
                         </div>
                       } @else {
@@ -2543,22 +2671,26 @@ class BoardViewPageComponent {
                     </td>
                     <td>
                       <div class="flex gap-1">
-                        <p-button
-                          icon="pi pi-pencil"
+                        <button
+                          fButton
                           [text]="true"
                           severity="secondary"
                           size="small"
-                          [pTooltip]="'shared.edit' | translate"
-                          (onClick)="onEditTask(task)"
-                        />
-                        <p-button
-                          icon="pi pi-trash"
+                          [fTooltip]="'shared.edit' | translate"
+                          (click)="onEditTask(task)"
+                        >
+                          <ui-icon pButtonIcon name="pencil"></ui-icon>
+                        </button>
+                        <button
+                          fButton
                           [text]="true"
                           severity="danger"
                           size="small"
-                          [pTooltip]="'shared.delete' | translate"
-                          (onClick)="onDeleteTask(task)"
-                        />
+                          [fTooltip]="'shared.delete' | translate"
+                          (click)="onDeleteTask(task)"
+                        >
+                          <ui-icon pButtonIcon name="trash"></ui-icon>
+                        </button>
                       </div>
                     </td>
                   </tr>
@@ -2566,12 +2698,15 @@ class BoardViewPageComponent {
                 <ng-template #emptymessage>
                   <tr>
                     <td colspan="6" class="text-center text-muted-color py-8">
-                      <i class="pi pi-inbox text-4xl block mb-3"></i>
+                      <ui-icon
+                        name="inbox"
+                        class="text-4xl block mb-3"
+                      ></ui-icon>
                       {{ 'task.manager.table.empty' | translate }}
                     </td>
                   </tr>
                 </ng-template>
-              </p-table>
+              </f-table>
             </div>
           </div>
         </div>
@@ -2594,12 +2729,12 @@ class BoardViewPageComponent {
       (editTask)="onEditTask($event)"
     />
 
-    <p-dialog
+    <f-dialog
       [header]="'task.manager.label.manage.title' | translate"
       [(visible)]="showLabelsDialog"
       [modal]="true"
       [style]="{ width: '420px' }"
-      (onHide)="newLabelName = ''; newLabelColor = '#6366F1'"
+      (onHide)="newLabelName = ''; newLabelColor = boardColorPalette[0]"
     >
       <div class="flex flex-col gap-4 py-2">
         <div class="flex gap-2 items-end">
@@ -2608,7 +2743,7 @@ class BoardViewPageComponent {
               'task.manager.label.name.label' | translate
             }}</label>
             <input
-              pInputText
+              fInputText
               [(ngModel)]="newLabelName"
               [placeholder]="'task.manager.label.name.placeholder' | translate"
             />
@@ -2623,24 +2758,30 @@ class BoardViewPageComponent {
               class="w-10 h-10 rounded cursor-pointer border border-surface-300"
             />
           </div>
-          <p-button
-            icon="pi pi-plus"
-            [label]="'task.manager.label.add' | translate"
+          <button
+            fButton
             size="small"
-            [loading]="isAddingLabel()"
-            (onClick)="addLabel()"
-          />
+            (click)="addLabel()"
+            [disabled]="isAddingLabel()"
+          >
+            @if (isAddingLabel()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            } @else {
+              <ui-icon pButtonIcon name="plus"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'task.manager.label.add' | translate }}</span>
+          </button>
         </div>
 
         <div class="flex flex-col gap-2 max-h-64 overflow-y-auto">
           @if (state.labels().length === 0) {
-            <p class="text-sm text-surface-400 text-center py-4">
+            <p class="text-sm text-muted-color text-center py-4">
               {{ 'task.manager.label.no.labels' | translate }}
             </p>
           }
           @for (label of state.labels(); track label.id) {
             <div
-              class="flex items-center justify-between px-3 py-2 rounded-lg border border-surface-200 dark:border-surface-700"
+              class="flex items-center justify-between px-3 py-2 rounded-border border border-surface"
             >
               <div class="flex items-center gap-2">
                 <span
@@ -2649,20 +2790,22 @@ class BoardViewPageComponent {
                 ></span>
                 <span class="text-sm font-medium">{{ label.name }}</span>
               </div>
-              <p-button
-                icon="pi pi-trash"
+              <button
+                fButton
                 severity="danger"
                 size="small"
                 [text]="true"
-                (onClick)="removeLabel(label.id)"
-              />
+                (click)="removeLabel(label.id)"
+              >
+                <ui-icon pButtonIcon name="trash"></ui-icon>
+              </button>
             </div>
           }
         </div>
       </div>
-    </p-dialog>
+    </f-dialog>
 
-    <p-dialog
+    <f-dialog
       [header]="'task.manager.member.manage.title' | translate"
       [(visible)]="showMembersDialog"
       [modal]="true"
@@ -2687,7 +2830,7 @@ class BoardViewPageComponent {
               <label class="text-sm font-medium">{{
                 'task.manager.member.role.label' | translate
               }}</label>
-              <p-select
+              <f-select
                 [(ngModel)]="newMemberRole"
                 [options]="memberRoleOptions"
                 optionValue="value"
@@ -2695,7 +2838,6 @@ class BoardViewPageComponent {
                   'task.manager.member.role.placeholder' | translate
                 "
                 class="w-full"
-                appendTo="body"
               >
                 <ng-template #selectedItem let-opt>
                   {{ opt.labelKey | translate }}
@@ -2703,42 +2845,49 @@ class BoardViewPageComponent {
                 <ng-template #item let-opt>
                   {{ opt.labelKey | translate }}
                 </ng-template>
-              </p-select>
+              </f-select>
             </div>
-            <p-button
-              icon="pi pi-plus"
-              [label]="'task.manager.member.add' | translate"
+            <button
+              fButton
               size="small"
-              [loading]="isAddingMember()"
-              [disabled]="!selectedMemberUser"
-              (onClick)="addMember()"
-            />
+              [disabled]="!selectedMemberUser || isAddingMember()"
+              (click)="addMember()"
+            >
+              @if (isAddingMember()) {
+                <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+              } @else {
+                <ui-icon pButtonIcon name="plus"></ui-icon>
+              }
+              <span pButtonLabel>{{
+                'task.manager.member.add' | translate
+              }}</span>
+            </button>
           </div>
         </div>
 
         <div class="flex flex-col gap-2 max-h-72 overflow-y-auto">
           @if (state.members().length === 0) {
-            <p class="text-sm text-surface-400 text-center py-4">
+            <p class="text-sm text-muted-color text-center py-4">
               {{ 'task.manager.member.no.members' | translate }}
             </p>
           }
           @for (member of state.members(); track member.id) {
             <div
-              class="flex items-center justify-between px-3 py-2.5 rounded-lg border border-surface-200 dark:border-surface-700"
+              class="flex items-center justify-between px-3 py-2.5 rounded-border border border-surface"
             >
               <div class="flex items-center gap-3">
-                <div
-                  class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white flex-shrink-0"
-                  [style.background-color]="memberColor(member)"
-                >
-                  {{ memberInitials(member) }}
-                </div>
+                <f-avatar
+                  shape="circle"
+                  [label]="memberInitials(member)"
+                  [color]="memberColor(member)"
+                  styleClass="!text-[11px] flex-shrink-0"
+                />
                 <div>
                   <div class="text-sm font-medium ">
                     {{ member.userName ?? member.userId }}
                   </div>
                   @if (member.userEmail) {
-                    <div class="text-xs text-surface-400">
+                    <div class="text-xs text-muted-color">
                       {{ member.userEmail }}
                     </div>
                   }
@@ -2749,25 +2898,30 @@ class BoardViewPageComponent {
                   class="text-[10px] font-semibold px-2 py-0.5 rounded-full"
                   [class]="roleBadgeClass(member.role)"
                 >
-                  {{ ('task.manager.member.role.' + member.role.toLowerCase()) | translate }}
+                  {{
+                    'task.manager.member.role.' + member.role.toLowerCase()
+                      | translate
+                  }}
                 </span>
                 @if (member.role !== 'OWNER') {
-                  <p-button
-                    icon="pi pi-trash"
+                  <button
+                    fButton
                     severity="danger"
                     size="small"
                     [text]="true"
-                    (onClick)="removeMember(member.userId)"
-                  />
+                    (click)="removeMember(member.userId)"
+                  >
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
+                  </button>
                 }
               </div>
             </div>
           }
         </div>
       </div>
-    </p-dialog>
+    </f-dialog>
 
-    <p-dialog
+    <f-dialog
       [header]="'task.manager.list.new' | translate"
       [(visible)]="showAddListDialog"
       [modal]="true"
@@ -2780,28 +2934,31 @@ class BoardViewPageComponent {
           <span class="text-red-500">*</span>
         </label>
         <input
-          pInputText
+          fInputText
           [(ngModel)]="newListName"
           [placeholder]="'task.manager.list.name.placeholder' | translate"
         />
       </div>
-      <ng-template pTemplate="footer">
+      <ng-template #footer>
         <div class="flex justify-end gap-2">
-          <p-button
-            [label]="'shared.cancel' | translate"
+          <button
+            fButton
             severity="secondary"
-            (onClick)="showAddListDialog.set(false)"
-          />
-          <p-button
-            [label]="'shared.create' | translate"
-            [loading]="isAddingList()"
-            (onClick)="addList()"
-          />
+            (click)="showAddListDialog.set(false)"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button fButton (click)="addList()" [disabled]="isAddingList()">
+            @if (isAddingList()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'shared.create' | translate }}</span>
+          </button>
         </div>
       </ng-template>
-    </p-dialog>
+    </f-dialog>
 
-    <p-dialog
+    <f-dialog
       [header]="'task.manager.board.edit' | translate"
       [(visible)]="showEditBoardDialog"
       [modal]="true"
@@ -2813,17 +2970,19 @@ class BoardViewPageComponent {
             {{ 'task.manager.board.name.label' | translate }}
             <span class="text-red-500">*</span>
           </label>
-          <input pInputText [(ngModel)]="editBoardName" />
+          <input fInputText [(ngModel)]="editBoardName" />
         </div>
         <div class="flex flex-col gap-1">
           <label class="text-sm font-medium">{{
             'task.manager.board.description.label' | translate
           }}</label>
           <textarea
-            pTextarea
+            fTextarea
             [(ngModel)]="editBoardDescription"
             [rows]="3"
-            [placeholder]="'task.manager.board.description.placeholder' | translate"
+            [placeholder]="
+              'task.manager.board.description.placeholder' | translate
+            "
           ></textarea>
         </div>
         <div class="flex flex-col gap-1">
@@ -2851,32 +3010,38 @@ class BoardViewPageComponent {
           </div>
         </div>
       </div>
-      <ng-template pTemplate="footer">
+      <ng-template #footer>
         <div class="flex justify-end gap-2">
-          <p-button
-            [label]="'shared.cancel' | translate"
+          <button
+            fButton
             severity="secondary"
-            (onClick)="showEditBoardDialog.set(false)"
-          />
-          <p-button
-            [label]="'shared.save' | translate"
-            [loading]="isSavingBoard()"
-            [disabled]="!editBoardName.trim()"
-            (onClick)="saveBoard()"
-          />
+            (click)="showEditBoardDialog.set(false)"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            [disabled]="!editBoardName.trim() || isSavingBoard()"
+            (click)="saveBoard()"
+          >
+            @if (isSavingBoard()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'shared.save' | translate }}</span>
+          </button>
         </div>
       </ng-template>
-    </p-dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i1$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i9$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i9$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: TaskCardComponent, selector: "tm-task-card", inputs: ["task"], outputs: ["cardClick", "editClick", "deleteClick"] }, { kind: "component", type: TaskFormDialogComponent, selector: "tm-task-form-dialog", inputs: ["visible", "task", "boardId", "listId", "members", "labels"], outputs: ["visibleChange", "saved"] }, { kind: "component", type: TaskDetailPanelComponent, selector: "tm-task-detail-panel", inputs: ["task"], outputs: ["closePanel", "editTask"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: i9$1.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    </f-dialog>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.AvatarComponent, selector: "f-avatar", inputs: ["label", "icon", "image", "shape", "size", "color", "styleClass"] }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.SkeletonComponent, selector: "f-skeleton", inputs: ["width", "height", "borderRadius", "shape"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: i1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "dismissableMask", "resizable", "style", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "component", type: i1.SortIconComponent, selector: "f-sorticon", inputs: ["field"] }, { kind: "directive", type: i1.SortableColumnDirective, selector: "[fSortableColumn]", inputs: ["fSortableColumn"] }, { kind: "component", type: i1.TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "sortField", "sortOrder"], outputs: ["sortFieldChange", "sortOrderChange", "onLazyLoad", "onSort"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TaskCardComponent, selector: "tm-task-card", inputs: ["task"], outputs: ["cardClick", "editClick", "deleteClick"] }, { kind: "component", type: TaskFormDialogComponent, selector: "tm-task-form-dialog", inputs: ["visible", "task", "boardId", "listId", "members", "labels"], outputs: ["visibleChange", "saved"] }, { kind: "component", type: TaskDetailPanelComponent, selector: "tm-task-detail-panel", inputs: ["task"], outputs: ["closePanel", "editTask"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BoardViewPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BoardViewPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tm-board-view-page',
                     imports: [
+                        UiModule,
                         DragDropModule,
                         AngularModule,
-                        PrimeModule,
                         TaskCardComponent,
                         TaskFormDialogComponent,
                         TaskDetailPanelComponent,
@@ -2891,22 +3056,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <div class="flex items-center gap-2.5 min-w-0 flex-1 group">
               <div class="flex flex-col min-w-0">
                 <div class="flex items-center gap-1.5 min-w-0">
-                  <h1 class="text-base font-bold text-surface-900 dark:text-surface-0 truncate leading-snug">
+                  <h1
+                    class="text-base font-bold text-surface-900 dark:text-surface-0 truncate leading-snug"
+                  >
                     {{ board.name }}
                   </h1>
-                  <p-button
-                    icon="pi pi-pencil"
+                  <button
+                    fButton
                     [text]="true"
                     size="small"
                     severity="secondary"
-                    styleClass="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
-                    [pTooltip]="'task.manager.board.edit' | translate"
+                    class="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                    [fTooltip]="'task.manager.board.edit' | translate"
                     tooltipPosition="bottom"
-                    (onClick)="openEditBoardDialog(board)"
-                  />
+                    (click)="openEditBoardDialog(board)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
                 </div>
                 @if (board.description) {
-                  <span class="text-xs text-surface-400 truncate max-w-sm hidden md:block leading-snug">
+                  <span
+                    class="text-xs text-muted-color truncate max-w-sm hidden md:block leading-snug"
+                  >
                     {{ board.description }}
                   </span>
                 }
@@ -2919,89 +3090,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               <div
                 class="flex items-center -space-x-2 cursor-pointer mr-1"
                 (click)="showMembersDialog.set(true)"
-                [pTooltip]="'task.manager.board.manage.members' | translate"
+                [fTooltip]="'task.manager.board.manage.members' | translate"
                 tooltipPosition="bottom"
               >
                 @for (member of state.members().slice(0, 4); track member.id) {
-                  <div
-                    class="w-6 h-6 rounded-full border-2 border-white dark:border-surface-900 flex items-center justify-center text-[9px] font-bold text-white flex-shrink-0 ring-1 ring-surface-100 dark:ring-surface-800"
-                    [style.background-color]="memberColor(member)"
-                  >
-                    {{ memberInitials(member) }}
-                  </div>
+                  <f-avatar
+                    shape="circle"
+                    size="small"
+                    [label]="memberInitials(member)"
+                    [color]="memberColor(member)"
+                    styleClass="!border-2 !border-surface-card ring-1 ring-surface flex-shrink-0"
+                  />
                 }
                 @if (state.members().length > 4) {
-                  <div
-                    class="w-6 h-6 rounded-full border-2 border-white dark:border-surface-900 bg-surface-200 dark:bg-surface-700 flex items-center justify-center text-[9px] font-bold text-surface-600 dark:text-surface-300 flex-shrink-0"
-                  >
-                    +{{ state.members().length - 4 }}
-                  </div>
+                  <f-avatar
+                    shape="circle"
+                    size="small"
+                    [label]="'+' + (state.members().length - 4)"
+                    styleClass="!border-2 !border-surface-card !bg-surface-200 dark:!bg-surface-700 !text-surface-600 dark:!text-surface-300 flex-shrink-0"
+                  />
                 }
               </div>
             }
 
-            <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
+            <div
+              class="h-5 w-px bg-surface-300 dark:bg-surface-600 mx-0.5"
+            ></div>
 
-            <div class="flex rounded-lg overflow-hidden border border-surface-200 dark:border-surface-700">
-              <p-button
-                icon="pi pi-th-large"
-                [pTooltip]="'task.manager.view.board' | translate"
+            <div
+              class="flex rounded-border overflow-hidden border border-surface"
+            >
+              <button
+                fButton
+                [fTooltip]="'task.manager.view.board' | translate"
                 tooltipPosition="bottom"
                 size="small"
                 [severity]="viewMode() === 'board' ? 'primary' : 'secondary'"
                 [outlined]="viewMode() !== 'board'"
-                styleClass="!rounded-none !border-0"
-                (onClick)="viewMode.set('board')"
-              />
-              <p-button
-                icon="pi pi-list"
-                [pTooltip]="'task.manager.view.list' | translate"
+                class="!rounded-none !border-0"
+                (click)="viewMode.set('board')"
+              >
+                <ui-icon pButtonIcon name="th-large"></ui-icon>
+              </button>
+              <button
+                fButton
+                [fTooltip]="'task.manager.view.list' | translate"
                 tooltipPosition="bottom"
                 size="small"
                 [severity]="viewMode() === 'list' ? 'primary' : 'secondary'"
                 [outlined]="viewMode() !== 'list'"
-                styleClass="!rounded-none !border-0"
-                (onClick)="viewMode.set('list')"
-              />
+                class="!rounded-none !border-0"
+                (click)="viewMode.set('list')"
+              >
+                <ui-icon pButtonIcon name="list"></ui-icon>
+              </button>
             </div>
 
-            <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
+            <div
+              class="h-5 w-px bg-surface-300 dark:bg-surface-600 mx-0.5"
+            ></div>
 
-            <p-button
-              icon="pi pi-users"
+            <button
+              fButton
               [text]="true"
               severity="secondary"
               size="small"
-              styleClass="!w-8 !h-8"
-              [pTooltip]="'task.manager.board.manage.members' | translate"
+              class="!w-8 !h-8"
+              [fTooltip]="'task.manager.board.manage.members' | translate"
               tooltipPosition="bottom"
-              (onClick)="showMembersDialog.set(true)"
-            />
-            <p-button
-              icon="pi pi-tag"
+              (click)="showMembersDialog.set(true)"
+            >
+              <ui-icon pButtonIcon name="users"></ui-icon>
+            </button>
+            <button
+              fButton
               [text]="true"
               severity="secondary"
               size="small"
-              styleClass="!w-8 !h-8"
-              [pTooltip]="'task.manager.board.manage.labels' | translate"
+              class="!w-8 !h-8"
+              [fTooltip]="'task.manager.board.manage.labels' | translate"
               tooltipPosition="bottom"
-              (onClick)="showLabelsDialog.set(true)"
-            />
+              (click)="showLabelsDialog.set(true)"
+            >
+              <ui-icon pButtonIcon name="tag"></ui-icon>
+            </button>
 
             @if (viewMode() === 'board') {
-              <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
-              <p-button
-                icon="pi pi-plus"
-                [label]="'task.manager.board.add.list' | translate"
+              <div
+                class="h-5 w-px bg-surface-300 dark:bg-surface-600 mx-0.5"
+              ></div>
+              <button
+                fButton
                 size="small"
-                (onClick)="showAddListDialog.set(true)"
-              />
+                (click)="showAddListDialog.set(true)"
+              >
+                <ui-icon pButtonIcon name="plus"></ui-icon>
+                <span pButtonLabel>{{
+                  'task.manager.board.add.list' | translate
+                }}</span>
+              </button>
             }
           </div>
         </div>
 
         @if (state.activeBoard(); as board) {
-          <div class="h-0.5 w-full flex-shrink-0" [style.background-color]="board.color"></div>
+          <div
+            class="h-0.5 w-full flex-shrink-0"
+            [style.background-color]="board.color"
+          ></div>
         }
       </div>
 
@@ -3010,9 +3206,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <div class="flex gap-4 p-6 overflow-x-auto">
             @for (i of [1, 2, 3]; track i) {
               <div class="flex-shrink-0 w-72">
-                <p-skeleton height="36px" class="mb-3" />
+                <f-skeleton height="36px" class="mb-3" />
                 @for (j of [1, 2, 3]; track j) {
-                  <p-skeleton height="90px" class="mb-2" />
+                  <f-skeleton height="90px" class="mb-2" />
                 }
               </div>
             }
@@ -3020,11 +3216,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         } @else {
           <div class="p-6">
             @for (i of [1, 2, 3, 4, 5]; track i) {
-              <p-skeleton height="48px" class="mb-2" />
+              <f-skeleton height="48px" class="mb-2" />
             }
           </div>
         }
-
       } @else if (viewMode() === 'board') {
         <div
           class="flex gap-4 p-5 overflow-x-auto flex-1"
@@ -3036,21 +3231,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           @for (list of state.listsWithTasks(); track list.id) {
             <div
               cdkDrag
-              class="flex-shrink-0 w-72 flex flex-col max-h-[calc(100vh-140px)] self-start"
+              class="flex-shrink-0 w-72 flex flex-col max-h-[calc(100vh-140px)] self-start rounded-border border border-surface shadow-sm overflow-hidden"
             >
               <div
-                class="flex items-center gap-1 px-2 py-2.5 rounded-t-xl border border-b-0 border-surface-200 dark:border-surface-700"
-                [style.border-top]="'3px solid ' + list.color"
+                class="flex items-center gap-1 px-2.5 py-2.5 border-b border-surface"
               >
-                <i
+                <ui-icon
                   cdkDragHandle
-                  class="pi pi-bars text-surface-300 dark:text-surface-600 text-xs cursor-grab flex-shrink-0 px-1"
-                ></i>
+                  name="bars"
+                  class="text-muted-color text-xs cursor-grab flex-shrink-0 px-1"
+                ></ui-icon>
 
                 <div class="flex items-center gap-2 min-w-0 flex-1">
                   @if (editingListId() === list.id) {
                     <input
-                      pInputText
+                      fInputText
                       class="text-sm font-semibold !h-6 !py-0 !px-1 w-full"
                       [ngModel]="editingListNameValue()"
                       (ngModelChange)="editingListNameValue.set($event)"
@@ -3061,7 +3256,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       autofocus
                     />
                   } @else {
-                    <span class="font-semibold text-sm truncate">{{ list.name }}</span>
+                    <span class="font-semibold text-sm truncate">{{
+                      list.name
+                    }}</span>
                     <span
                       class="text-[11px] font-semibold px-1.5 py-0.5 rounded-full text-white flex-shrink-0"
                       [style.background-color]="list.color"
@@ -3072,35 +3269,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 </div>
 
                 @if (editingListId() === list.id) {
-                  <p-button
-                    icon="pi pi-check"
+                  <button
+                    fButton
                     [text]="true"
                     size="small"
                     severity="success"
-                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    class="!w-6 !h-6 flex-shrink-0"
                     (mousedown)="$event.preventDefault()"
                     (click)="saveRenameList(); $event.stopPropagation()"
-                  />
-                  <p-button
-                    icon="pi pi-times"
+                  >
+                    <ui-icon pButtonIcon name="check"></ui-icon>
+                  </button>
+                  <button
+                    fButton
                     [text]="true"
                     size="small"
                     severity="secondary"
-                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    class="!w-6 !h-6 flex-shrink-0"
                     (mousedown)="$event.preventDefault()"
                     (click)="cancelRenameList(); $event.stopPropagation()"
-                  />
+                  >
+                    <ui-icon pButtonIcon name="times"></ui-icon>
+                  </button>
                 } @else {
-                  <p-button
-                    icon="pi pi-pencil"
+                  <button
+                    fButton
                     [text]="true"
                     size="small"
                     severity="secondary"
-                    styleClass="!w-6 !h-6 flex-shrink-0"
-                    [pTooltip]="'task.manager.list.rename' | translate"
+                    class="!w-6 !h-6 flex-shrink-0"
+                    [fTooltip]="'task.manager.list.rename' | translate"
                     tooltipPosition="bottom"
                     (click)="startRenameList(list); $event.stopPropagation()"
-                  />
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
                 }
               </div>
 
@@ -3110,7 +3313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 [cdkDropListData]="list.tasks"
                 [cdkDropListConnectedTo]="listDropIds()"
                 (cdkDropListDropped)="onTaskDrop($event)"
-                class="flex flex-col gap-2 p-2 overflow-y-auto flex-1 min-h-[60px] border border-t-0 border-b-0 border-surface-200 dark:border-surface-700"
+                class="flex flex-col gap-2 p-2 overflow-y-auto flex-1 min-h-[60px]"
               >
                 @for (task of list.tasks; track task.id) {
                   <div cdkDrag>
@@ -3124,91 +3327,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }
                 @if (list.tasks.length === 0) {
                   <div
-                    class="flex items-center justify-center h-14 border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-lg"
+                    class="flex items-center justify-center h-14 border-2 border-dashed border-surface rounded-border"
                   >
-                    <span class="text-xs text-surface-400">{{
+                    <span class="text-xs text-muted-color">{{
                       'task.manager.board.drop.tasks.here' | translate
                     }}</span>
                   </div>
                 }
               </div>
 
-              <div
-                class="rounded-b-xl border border-t-0 border-surface-200 dark:border-surface-700 p-1.5"
-              >
-                <p-button
-                  icon="pi pi-plus"
-                  [label]="'task.manager.board.add.task' | translate"
+              <div class="border-t border-surface p-1.5">
+                <button
+                  fButton
                   severity="secondary"
+                  [text]="true"
                   size="small"
-                  styleClass="w-full !justify-start"
-                  (onClick)="openAddTask(list)"
-                />
+                  class="w-full !justify-start"
+                  (click)="openAddTask(list)"
+                >
+                  <ui-icon pButtonIcon name="plus"></ui-icon>
+                  <span pButtonLabel>{{
+                    'task.manager.board.add.task' | translate
+                  }}</span>
+                </button>
               </div>
             </div>
           }
 
           @if (state.listsWithTasks().length === 0) {
             <div class="flex-1 flex items-center justify-center">
-              <div class="text-center text-surface-400">
+              <div class="text-center text-muted-color">
                 <div
-                  class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4"
+                  class="w-16 h-16 rounded-2xl border-2 border-dashed border-surface flex items-center justify-center mx-auto mb-4"
                 >
-                  <i
-                    class="pi pi-list text-3xl text-surface-300 dark:text-surface-600"
-                  ></i>
+                  <ui-icon
+                    name="list"
+                    class="text-3xl text-muted-color"
+                  ></ui-icon>
                 </div>
-                <p class="font-medium text-surface-500">
+                <p class="font-medium text-muted-color">
                   {{ 'task.manager.board.list.empty' | translate }}
                 </p>
-                <p-button
-                  icon="pi pi-plus"
-                  [label]="'task.manager.board.add.list' | translate"
+                <button
+                  fButton
                   severity="secondary"
                   size="small"
                   class="mt-3"
-                  (onClick)="showAddListDialog.set(true)"
-                />
+                  (click)="showAddListDialog.set(true)"
+                >
+                  <ui-icon pButtonIcon name="plus"></ui-icon>
+                  <span pButtonLabel>{{
+                    'task.manager.board.add.list' | translate
+                  }}</span>
+                </button>
               </div>
             </div>
           }
         </div>
-
       } @else {
         <div class="p-4 sm:p-6 flex-1 overflow-auto">
           <div class="card">
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-table
+              <f-table
                 [value]="allTasksFlat()"
                 [paginator]="allTasksFlat().length > 20"
                 [rows]="20"
                 [rowsPerPageOptions]="[10, 20, 50]"
                 [scrollable]="true"
-                class="p-datatable-sm"
                 [tableStyle]="{ 'min-width': '700px' }"
               >
                 <ng-template #header>
                   <tr>
-                    <th pSortableColumn="title" class="min-w-[240px]">
+                    <th fSortableColumn="title" class="min-w-[240px]">
                       {{ 'task.manager.table.title' | translate }}
-                      <p-sortIcon field="title" />
+                      <f-sorticon field="title" />
                     </th>
-                    <th pSortableColumn="listName" class="w-40">
+                    <th fSortableColumn="listName" class="w-40">
                       {{ 'task.manager.table.list' | translate }}
-                      <p-sortIcon field="listName" />
+                      <f-sorticon field="listName" />
                     </th>
-                    <th pSortableColumn="priority" class="w-32">
+                    <th fSortableColumn="priority" class="w-32">
                       {{ 'task.manager.table.priority' | translate }}
-                      <p-sortIcon field="priority" />
+                      <f-sorticon field="priority" />
                     </th>
                     <th class="w-36">
                       {{ 'task.manager.table.assignee' | translate }}
                     </th>
-                    <th pSortableColumn="dueDate" class="w-32">
+                    <th fSortableColumn="dueDate" class="w-32">
                       {{ 'task.manager.table.due.date' | translate }}
-                      <p-sortIcon field="dueDate" />
+                      <f-sorticon field="dueDate" />
+                    </th>
+                    <th class="w-[100px]">
+                      {{ 'shared.actions' | translate }}
                     </th>
-                    <th class="w-[100px]">{{ 'shared.actions' | translate }}</th>
                   </tr>
                 </ng-template>
                 <ng-template #body let-task>
@@ -3217,7 +3428,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       <span
                         class="font-medium text-sm cursor-pointer hover:text-primary-500 transition-colors"
                         (click)="state.selectTask(task)"
-                      >{{ task.title }}</span>
+                        >{{ task.title }}</span
+                      >
                     </td>
                     <td>
                       <span class="inline-flex items-center gap-1.5 text-sm">
@@ -3229,7 +3441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       </span>
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="task.priority"
                         [severity]="prioritySeverity(task.priority)"
                       />
@@ -3237,21 +3449,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     <td>
                       @if (task.assignees?.length) {
                         <div class="flex items-center -space-x-1.5">
-                          @for (a of task.assignees!.slice(0, 3); track a.userId) {
-                            <span
-                              class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
-                              [style.background-color]="memberColorById(a.userId)"
-                              [pTooltip]="a.userName ?? ''"
-                            >
-                              {{ getMemberInitials(a.userId) }}
-                            </span>
+                          @for (
+                            a of task.assignees!.slice(0, 3);
+                            track a.userId
+                          ) {
+                            <f-avatar
+                              shape="circle"
+                              size="small"
+                              [label]="getMemberInitials(a.userId)"
+                              [color]="memberColorById(a.userId)"
+                              styleClass="!ring-surface-card flex-shrink-0"
+                              [fTooltip]="a.userName ?? ''"
+                            />
                           }
                           @if (task.assignees!.length > 3) {
-                            <span
-                              class="w-6 h-6 rounded-full bg-surface-200 dark:bg-surface-700 flex items-center justify-center text-[10px] font-bold text-surface-600 ring-2 ring-white dark:ring-surface-800 flex-shrink-0"
-                            >
-                              +{{ task.assignees!.length - 3 }}
-                            </span>
+                            <f-avatar
+                              shape="circle"
+                              size="small"
+                              [label]="'+' + (task.assignees!.length - 3)"
+                              styleClass="!bg-surface-200 dark:!bg-surface-700 !text-surface-600 !ring-surface-card flex-shrink-0"
+                            />
                           }
                         </div>
                       } @else {
@@ -3272,22 +3489,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     </td>
                     <td>
                       <div class="flex gap-1">
-                        <p-button
-                          icon="pi pi-pencil"
+                        <button
+                          fButton
                           [text]="true"
                           severity="secondary"
                           size="small"
-                          [pTooltip]="'shared.edit' | translate"
-                          (onClick)="onEditTask(task)"
-                        />
-                        <p-button
-                          icon="pi pi-trash"
+                          [fTooltip]="'shared.edit' | translate"
+                          (click)="onEditTask(task)"
+                        >
+                          <ui-icon pButtonIcon name="pencil"></ui-icon>
+                        </button>
+                        <button
+                          fButton
                           [text]="true"
                           severity="danger"
                           size="small"
-                          [pTooltip]="'shared.delete' | translate"
-                          (onClick)="onDeleteTask(task)"
-                        />
+                          [fTooltip]="'shared.delete' | translate"
+                          (click)="onDeleteTask(task)"
+                        >
+                          <ui-icon pButtonIcon name="trash"></ui-icon>
+                        </button>
                       </div>
                     </td>
                   </tr>
@@ -3295,12 +3516,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 <ng-template #emptymessage>
                   <tr>
                     <td colspan="6" class="text-center text-muted-color py-8">
-                      <i class="pi pi-inbox text-4xl block mb-3"></i>
+                      <ui-icon
+                        name="inbox"
+                        class="text-4xl block mb-3"
+                      ></ui-icon>
                       {{ 'task.manager.table.empty' | translate }}
                     </td>
                   </tr>
                 </ng-template>
-              </p-table>
+              </f-table>
             </div>
           </div>
         </div>
@@ -3323,12 +3547,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       (editTask)="onEditTask($event)"
     />
 
-    <p-dialog
+    <f-dialog
       [header]="'task.manager.label.manage.title' | translate"
       [(visible)]="showLabelsDialog"
       [modal]="true"
       [style]="{ width: '420px' }"
-      (onHide)="newLabelName = ''; newLabelColor = '#6366F1'"
+      (onHide)="newLabelName = ''; newLabelColor = boardColorPalette[0]"
     >
       <div class="flex flex-col gap-4 py-2">
         <div class="flex gap-2 items-end">
@@ -3337,7 +3561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               'task.manager.label.name.label' | translate
             }}</label>
             <input
-              pInputText
+              fInputText
               [(ngModel)]="newLabelName"
               [placeholder]="'task.manager.label.name.placeholder' | translate"
             />
@@ -3352,24 +3576,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               class="w-10 h-10 rounded cursor-pointer border border-surface-300"
             />
           </div>
-          <p-button
-            icon="pi pi-plus"
-            [label]="'task.manager.label.add' | translate"
+          <button
+            fButton
             size="small"
-            [loading]="isAddingLabel()"
-            (onClick)="addLabel()"
-          />
+            (click)="addLabel()"
+            [disabled]="isAddingLabel()"
+          >
+            @if (isAddingLabel()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            } @else {
+              <ui-icon pButtonIcon name="plus"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'task.manager.label.add' | translate }}</span>
+          </button>
         </div>
 
         <div class="flex flex-col gap-2 max-h-64 overflow-y-auto">
           @if (state.labels().length === 0) {
-            <p class="text-sm text-surface-400 text-center py-4">
+            <p class="text-sm text-muted-color text-center py-4">
               {{ 'task.manager.label.no.labels' | translate }}
             </p>
           }
           @for (label of state.labels(); track label.id) {
             <div
-              class="flex items-center justify-between px-3 py-2 rounded-lg border border-surface-200 dark:border-surface-700"
+              class="flex items-center justify-between px-3 py-2 rounded-border border border-surface"
             >
               <div class="flex items-center gap-2">
                 <span
@@ -3378,20 +3608,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 ></span>
                 <span class="text-sm font-medium">{{ label.name }}</span>
               </div>
-              <p-button
-                icon="pi pi-trash"
+              <button
+                fButton
                 severity="danger"
                 size="small"
                 [text]="true"
-                (onClick)="removeLabel(label.id)"
-              />
+                (click)="removeLabel(label.id)"
+              >
+                <ui-icon pButtonIcon name="trash"></ui-icon>
+              </button>
             </div>
           }
         </div>
       </div>
-    </p-dialog>
+    </f-dialog>
 
-    <p-dialog
+    <f-dialog
       [header]="'task.manager.member.manage.title' | translate"
       [(visible)]="showMembersDialog"
       [modal]="true"
@@ -3416,7 +3648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               <label class="text-sm font-medium">{{
                 'task.manager.member.role.label' | translate
               }}</label>
-              <p-select
+              <f-select
                 [(ngModel)]="newMemberRole"
                 [options]="memberRoleOptions"
                 optionValue="value"
@@ -3424,7 +3656,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   'task.manager.member.role.placeholder' | translate
                 "
                 class="w-full"
-                appendTo="body"
               >
                 <ng-template #selectedItem let-opt>
                   {{ opt.labelKey | translate }}
@@ -3432,42 +3663,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 <ng-template #item let-opt>
                   {{ opt.labelKey | translate }}
                 </ng-template>
-              </p-select>
+              </f-select>
             </div>
-            <p-button
-              icon="pi pi-plus"
-              [label]="'task.manager.member.add' | translate"
+            <button
+              fButton
               size="small"
-              [loading]="isAddingMember()"
-              [disabled]="!selectedMemberUser"
-              (onClick)="addMember()"
-            />
+              [disabled]="!selectedMemberUser || isAddingMember()"
+              (click)="addMember()"
+            >
+              @if (isAddingMember()) {
+                <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+              } @else {
+                <ui-icon pButtonIcon name="plus"></ui-icon>
+              }
+              <span pButtonLabel>{{
+                'task.manager.member.add' | translate
+              }}</span>
+            </button>
           </div>
         </div>
 
         <div class="flex flex-col gap-2 max-h-72 overflow-y-auto">
           @if (state.members().length === 0) {
-            <p class="text-sm text-surface-400 text-center py-4">
+            <p class="text-sm text-muted-color text-center py-4">
               {{ 'task.manager.member.no.members' | translate }}
             </p>
           }
           @for (member of state.members(); track member.id) {
             <div
-              class="flex items-center justify-between px-3 py-2.5 rounded-lg border border-surface-200 dark:border-surface-700"
+              class="flex items-center justify-between px-3 py-2.5 rounded-border border border-surface"
             >
               <div class="flex items-center gap-3">
-                <div
-                  class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white flex-shrink-0"
-                  [style.background-color]="memberColor(member)"
-                >
-                  {{ memberInitials(member) }}
-                </div>
+                <f-avatar
+                  shape="circle"
+                  [label]="memberInitials(member)"
+                  [color]="memberColor(member)"
+                  styleClass="!text-[11px] flex-shrink-0"
+                />
                 <div>
                   <div class="text-sm font-medium ">
                     {{ member.userName ?? member.userId }}
                   </div>
                   @if (member.userEmail) {
-                    <div class="text-xs text-surface-400">
+                    <div class="text-xs text-muted-color">
                       {{ member.userEmail }}
                     </div>
                   }
@@ -3478,25 +3716,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   class="text-[10px] font-semibold px-2 py-0.5 rounded-full"
                   [class]="roleBadgeClass(member.role)"
                 >
-                  {{ ('task.manager.member.role.' + member.role.toLowerCase()) | translate }}
+                  {{
+                    'task.manager.member.role.' + member.role.toLowerCase()
+                      | translate
+                  }}
                 </span>
                 @if (member.role !== 'OWNER') {
-                  <p-button
-                    icon="pi pi-trash"
+                  <button
+                    fButton
                     severity="danger"
                     size="small"
                     [text]="true"
-                    (onClick)="removeMember(member.userId)"
-                  />
+                    (click)="removeMember(member.userId)"
+                  >
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
+                  </button>
                 }
               </div>
             </div>
           }
         </div>
       </div>
-    </p-dialog>
+    </f-dialog>
 
-    <p-dialog
+    <f-dialog
       [header]="'task.manager.list.new' | translate"
       [(visible)]="showAddListDialog"
       [modal]="true"
@@ -3509,28 +3752,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <span class="text-red-500">*</span>
         </label>
         <input
-          pInputText
+          fInputText
           [(ngModel)]="newListName"
           [placeholder]="'task.manager.list.name.placeholder' | translate"
         />
       </div>
-      <ng-template pTemplate="footer">
+      <ng-template #footer>
         <div class="flex justify-end gap-2">
-          <p-button
-            [label]="'shared.cancel' | translate"
+          <button
+            fButton
             severity="secondary"
-            (onClick)="showAddListDialog.set(false)"
-          />
-          <p-button
-            [label]="'shared.create' | translate"
-            [loading]="isAddingList()"
-            (onClick)="addList()"
-          />
+            (click)="showAddListDialog.set(false)"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button fButton (click)="addList()" [disabled]="isAddingList()">
+            @if (isAddingList()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'shared.create' | translate }}</span>
+          </button>
         </div>
       </ng-template>
-    </p-dialog>
+    </f-dialog>
 
-    <p-dialog
+    <f-dialog
       [header]="'task.manager.board.edit' | translate"
       [(visible)]="showEditBoardDialog"
       [modal]="true"
@@ -3542,17 +3788,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             {{ 'task.manager.board.name.label' | translate }}
             <span class="text-red-500">*</span>
           </label>
-          <input pInputText [(ngModel)]="editBoardName" />
+          <input fInputText [(ngModel)]="editBoardName" />
         </div>
         <div class="flex flex-col gap-1">
           <label class="text-sm font-medium">{{
             'task.manager.board.description.label' | translate
           }}</label>
           <textarea
-            pTextarea
+            fTextarea
             [(ngModel)]="editBoardDescription"
             [rows]="3"
-            [placeholder]="'task.manager.board.description.placeholder' | translate"
+            [placeholder]="
+              'task.manager.board.description.placeholder' | translate
+            "
           ></textarea>
         </div>
         <div class="flex flex-col gap-1">
@@ -3580,22 +3828,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           </div>
         </div>
       </div>
-      <ng-template pTemplate="footer">
+      <ng-template #footer>
         <div class="flex justify-end gap-2">
-          <p-button
-            [label]="'shared.cancel' | translate"
+          <button
+            fButton
             severity="secondary"
-            (onClick)="showEditBoardDialog.set(false)"
-          />
-          <p-button
-            [label]="'shared.save' | translate"
-            [loading]="isSavingBoard()"
-            [disabled]="!editBoardName.trim()"
-            (onClick)="saveBoard()"
-          />
+            (click)="showEditBoardDialog.set(false)"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            [disabled]="!editBoardName.trim() || isSavingBoard()"
+            (click)="saveBoard()"
+          >
+            @if (isSavingBoard()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 'shared.save' | translate }}</span>
+          </button>
         </div>
       </ng-template>
-    </p-dialog>
+    </f-dialog>
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { boardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "boardId", required: true }] }] } });