@flusys/ng-task-manager 5.4.1 → 5.5.0

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

@@ -5,37 +5,34 @@ 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 i8 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 i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i9 from 'primeng/button';
+import * as i2$2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i7 from 'primeng/datepicker';
+import * as i6 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 * as i3 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 * as i5 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import * as i2$1 from 'primeng/api';
-import { ConfirmationService, MessageService } from 'primeng/api';
+import * as i4 from 'primeng/textarea';
+import { TextareaModule } from 'primeng/textarea';
 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 i5$1 from 'primeng/skeleton';
 import * as i1$3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i9$2 from 'primeng/table';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import * as i8$1 from 'primeng/table';
 
 class TaskBoardApiService extends ApiResourceService {
     constructor() {
@@ -53,10 +50,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.5", ngImport: i0, type: TaskBoardApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", 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.5", ngImport: i0, type: TaskBoardApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -68,10 +65,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.5", ngImport: i0, type: TaskApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", 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.5", ngImport: i0, type: TaskApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -85,10 +82,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.5", ngImport: i0, type: TaskListApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", 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.5", ngImport: i0, type: TaskListApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -96,10 +93,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.5", ngImport: i0, type: TaskLabelApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", 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.5", ngImport: i0, type: TaskLabelApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -107,10 +104,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.5", ngImport: i0, type: TaskCommentApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", 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.5", ngImport: i0, type: TaskCommentApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -118,7 +115,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 +155,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.5", ngImport: i0, type: TaskBoardSocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", 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.5", ngImport: i0, type: TaskBoardSocketService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -172,15 +170,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 +205,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 +378,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.5", ngImport: i0, type: TaskBoardStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", 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.5", ngImport: i0, type: TaskBoardStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -421,26 +431,29 @@ 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.5", ngImport: i0, type: TaskCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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: `
     <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"
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-primary-500 hover:bg-surface-hover transition-colors"
           [pTooltip]="'shared.edit' | translate"
           tooltipPosition="top"
           (click)="$event.stopPropagation(); editClick.emit(task())"
@@ -448,7 +461,7 @@ class TaskCardComponent {
           <i class="pi pi-pencil text-xs"></i>
         </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"
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-red-500 hover:bg-surface-hover transition-colors"
           [pTooltip]="'shared.delete' | translate"
           tooltipPosition="top"
           (click)="$event.stopPropagation(); deleteClick.emit(task())"
@@ -482,7 +495,7 @@ class TaskCardComponent {
 
         @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' }}
@@ -493,7 +506,7 @@ class TaskCardComponent {
           <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"
+                class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-surface-card"
                 [style.background-color]="memberColor(a.userId)"
                 [pTooltip]="a.userName ?? undefined"
               >
@@ -502,7 +515,7 @@ class TaskCardComponent {
             }
             @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"
+                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-surface-card"
               >
                 +{{ overflowCount() }}
               </span>
@@ -511,21 +524,21 @@ class TaskCardComponent {
         }
       </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: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["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", "pTooltipPT", "pTooltipUnstyled"] }, { 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.5", ngImport: i0, type: TaskCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tm-task-card',
                     imports: [TagModule, TooltipModule, DatePipe, TranslatePipe],
                     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"
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-primary-500 hover:bg-surface-hover transition-colors"
           [pTooltip]="'shared.edit' | translate"
           tooltipPosition="top"
           (click)="$event.stopPropagation(); editClick.emit(task())"
@@ -533,7 +546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <i class="pi pi-pencil text-xs"></i>
         </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"
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-red-500 hover:bg-surface-hover transition-colors"
           [pTooltip]="'shared.delete' | translate"
           tooltipPosition="top"
           (click)="$event.stopPropagation(); deleteClick.emit(task())"
@@ -567,7 +580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         @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' }}
@@ -578,7 +591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <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"
+                class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-surface-card"
                 [style.background-color]="memberColor(a.userId)"
                 [pTooltip]="a.userName ?? undefined"
               >
@@ -587,7 +600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             }
             @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"
+                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-surface-card"
               >
                 +{{ overflowCount() }}
               </span>
@@ -601,21 +614,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,8 +715,8 @@ 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskFormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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
       [header]="
         (task() ? 'task.form.title.edit' : 'task.form.title.create') | translate
@@ -739,15 +759,15 @@ class TaskFormDialogComponent {
             <p-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>
           </div>
@@ -768,12 +788,12 @@ class TaskFormDialogComponent {
           <label class="text-sm font-medium">{{
             'task.form.assignee.label' | translate
           }}</label>
-          <p-multiselect
+          <p-select
+            [multiple]="true"
             [(ngModel)]="selectedAssigneeIds"
             [options]="members()"
             optionLabel="userName"
             optionValue="userId"
-            appendTo="body"
             [placeholder]="'task.form.assignee.placeholder' | translate"
             [showClear]="true"
           />
@@ -783,35 +803,34 @@ class TaskFormDialogComponent {
           <label class="text-sm font-medium">{{
             'task.form.labels.label' | translate
           }}</label>
-          <p-multiselect
+          <p-select
+            [multiple]="true"
             [(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 pButton severity="secondary" (click)="onClose()">
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button pButton (click)="onSave()" [disabled]="isSaving()">
+            @if (isSaving()) {
+              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+            }
+            <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" }] });
+  `, 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", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo"], outputs: ["visibleChange", "onShow", "onHide", "onResizeInit", "onResizeEnd", "onDragStart", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["hostName", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "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", "multiple", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i6.DatePicker, selector: "p-datepicker, p-date-picker", inputs: ["iconDisplay", "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", "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: ButtonModule }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2$2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2$2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { 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.5", ngImport: i0, type: TaskFormDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tm-task-form-dialog',
@@ -822,7 +841,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         TextareaModule,
                         SelectModule,
                         DatePickerModule,
-                        MultiSelectModule,
                         ButtonModule,
                         TranslatePipe,
                     ],
@@ -869,15 +887,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <p-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>
           </div>
@@ -898,12 +916,12 @@ 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
+          <p-select
+            [multiple]="true"
             [(ngModel)]="selectedAssigneeIds"
             [options]="members()"
             optionLabel="userName"
             optionValue="userId"
-            appendTo="body"
             [placeholder]="'task.form.assignee.placeholder' | translate"
             [showClear]="true"
           />
@@ -913,29 +931,28 @@ 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
+          <p-select
+            [multiple]="true"
             [(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 pButton severity="secondary" (click)="onClose()">
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button pButton (click)="onSave()" [disabled]="isSaving()">
+            @if (isSaving()) {
+              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+            }
+            <span pButtonLabel>{{ 'shared.save' | translate }}</span>
+          </button>
         </div>
       </ng-template>
     </p-dialog>
@@ -946,18 +963,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,8 +1061,8 @@ 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskDetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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
       [visible]="!!task()"
       position="right"
@@ -1048,25 +1073,33 @@ 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
+              pButton
               severity="secondary"
               size="small"
               [text]="true"
               [pTooltip]="'task.detail.edit' | translate"
               tooltipPosition="left"
-              (onClick)="editTask.emit(t)"
-            />
-            <p-button
-              icon="pi pi-trash"
+              (click)="editTask.emit(t)"
+            >
+              <span pButtonIcon class="pi pi-pencil"></span>
+            </button>
+            <button
+              pButton
               severity="danger"
               size="small"
               [text]="true"
-              [loading]="isDeleting()"
               [pTooltip]="'task.detail.delete' | translate"
               tooltipPosition="left"
-              (onClick)="deleteTask(t.id)"
-            />
+              (click)="deleteTask(t.id)"
+              [disabled]="isDeleting()"
+            >
+              @if (isDeleting()) {
+                <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+              } @else {
+                <span pButtonIcon class="pi pi-trash"></span>
+              }
+            </button>
           </div>
 
           <div class="flex items-center gap-3">
@@ -1075,7 +1108,7 @@ class TaskDetailPanelComponent {
               [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>
@@ -1106,9 +1139,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 +1155,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
+                    pButton
                     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)"
+                  >
+                    <span pButtonIcon class="pi pi-reply"></span>
+                    <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>
@@ -1172,20 +1205,27 @@ class TaskDetailPanelComponent {
                       autoResize="true"
                     ></textarea>
                     <div class="flex flex-col gap-1">
-                      <p-button
-                        icon="pi pi-send"
+                      <button
+                        pButton
                         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()) {
+                          <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                        } @else {
+                          <span pButtonIcon class="pi pi-send"></span>
+                        }
+                      </button>
+                      <button
+                        pButton
                         size="small"
                         severity="secondary"
                         [text]="true"
-                        (onClick)="cancelReply()"
-                      />
+                        (click)="cancelReply()"
+                      >
+                        <span pButtonIcon class="pi pi-times"></span>
+                      </button>
                     </div>
                   </div>
                 }
@@ -1193,7 +1233,7 @@ 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>
             }
@@ -1206,20 +1246,25 @@ class TaskDetailPanelComponent {
                 [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
+                pButton
+                [disabled]="!newComment.trim() || isSendingComment()"
+                (click)="addComment(t.id)"
+              >
+                @if (isSendingComment()) {
+                  <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                } @else {
+                  <span pButtonIcon class="pi pi-send"></span>
+                }
+              </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" }] });
+  `, 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", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2$2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2$2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.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", "pTooltipPT", "pTooltipUnstyled"] }, { 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.5", ngImport: i0, type: TaskDetailPanelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tm-task-detail-panel',
@@ -1244,25 +1289,33 @@ 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
+              pButton
               severity="secondary"
               size="small"
               [text]="true"
               [pTooltip]="'task.detail.edit' | translate"
               tooltipPosition="left"
-              (onClick)="editTask.emit(t)"
-            />
-            <p-button
-              icon="pi pi-trash"
+              (click)="editTask.emit(t)"
+            >
+              <span pButtonIcon class="pi pi-pencil"></span>
+            </button>
+            <button
+              pButton
               severity="danger"
               size="small"
               [text]="true"
-              [loading]="isDeleting()"
               [pTooltip]="'task.detail.delete' | translate"
               tooltipPosition="left"
-              (onClick)="deleteTask(t.id)"
-            />
+              (click)="deleteTask(t.id)"
+              [disabled]="isDeleting()"
+            >
+              @if (isDeleting()) {
+                <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+              } @else {
+                <span pButtonIcon class="pi pi-trash"></span>
+              }
+            </button>
           </div>
 
           <div class="flex items-center gap-3">
@@ -1271,7 +1324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               [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>
@@ -1302,9 +1355,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 +1371,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
+                    pButton
                     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)"
+                  >
+                    <span pButtonIcon class="pi pi-reply"></span>
+                    <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>
@@ -1368,20 +1421,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
+                        pButton
                         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()) {
+                          <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                        } @else {
+                          <span pButtonIcon class="pi pi-send"></span>
+                        }
+                      </button>
+                      <button
+                        pButton
                         size="small"
                         severity="secondary"
                         [text]="true"
-                        (onClick)="cancelReply()"
-                      />
+                        (click)="cancelReply()"
+                      >
+                        <span pButtonIcon class="pi pi-times"></span>
+                      </button>
                     </div>
                   </div>
                 }
@@ -1389,7 +1449,7 @@ 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>
             }
@@ -1402,12 +1462,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 [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
+                pButton
+                [disabled]="!newComment.trim() || isSendingComment()"
+                (click)="addComment(t.id)"
+              >
+                @if (isSendingComment()) {
+                  <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+                } @else {
+                  <span pButtonIcon class="pi pi-send"></span>
+                }
+              </button>
             </div>
           </div>
         </div>
@@ -1421,8 +1486,10 @@ 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';
@@ -1456,8 +1523,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.5", ngImport: i0, type: BoardListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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,11 +1537,13 @@ 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
+          pButton
+          (click)="showCreateDialog.set(true)"
+        >
+          <span pButtonIcon class="pi pi-plus"></span>
+          <span pButtonLabel>{{ 'task.manager.board.new' | translate }}</span>
+        </button>
       </div>
 
       @if (state.isLoading()) {
@@ -1511,12 +1580,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
+            pButton
             size="small"
-            (onClick)="showCreateDialog.set(true)"
-          />
+            (click)="showCreateDialog.set(true)"
+          >
+            <span pButtonIcon class="pi pi-plus"></span>
+            <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">
@@ -1548,7 +1619,7 @@ 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">
@@ -1666,24 +1737,31 @@ 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
+            pButton
             severity="secondary"
-            (onClick)="closeCreateDialog()"
-          />
-          <p-button
-            [label]="'shared.create' | translate"
-            [loading]="isCreating()"
-            (onClick)="createBoard()"
-          />
+            (click)="closeCreateDialog()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            pButton
+            (click)="createBoard()"
+            [disabled]="isCreating()"
+          >
+            @if (isCreating()) {
+              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+            }
+            <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" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2$2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2$2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { 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", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo"], outputs: ["visibleChange", "onShow", "onHide", "onResizeInit", "onResizeEnd", "onDragStart", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["hostName", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.Skeleton, selector: "p-skeleton", inputs: ["shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4.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", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: i8.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.5", ngImport: i0, type: BoardListPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tm-board-list-page',
@@ -1701,11 +1779,13 @@ 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
+          pButton
+          (click)="showCreateDialog.set(true)"
+        >
+          <span pButtonIcon class="pi pi-plus"></span>
+          <span pButtonLabel>{{ 'task.manager.board.new' | translate }}</span>
+        </button>
       </div>
 
       @if (state.isLoading()) {
@@ -1742,12 +1822,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
+            pButton
             size="small"
-            (onClick)="showCreateDialog.set(true)"
-          />
+            (click)="showCreateDialog.set(true)"
+          >
+            <span pButtonIcon class="pi pi-plus"></span>
+            <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">
@@ -1779,7 +1861,7 @@ 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">
@@ -1897,18 +1979,25 @@ 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
+            pButton
             severity="secondary"
-            (onClick)="closeCreateDialog()"
-          />
-          <p-button
-            [label]="'shared.create' | translate"
-            [loading]="isCreating()"
-            (onClick)="createBoard()"
-          />
+            (click)="closeCreateDialog()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            pButton
+            (click)="createBoard()"
+            [disabled]="isCreating()"
+          >
+            @if (isCreating()) {
+              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+            }
+            <span pButtonLabel>{{ 'shared.create' | translate }}</span>
+          </button>
         </div>
       </ng-template>
     </p-dialog>
@@ -1927,26 +2016,43 @@ 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';
@@ -1965,10 +2071,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,7 +2092,9 @@ 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',
             acceptButtonStyleClass: 'p-button-danger',
@@ -2002,7 +2115,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));
@@ -2153,8 +2267,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.5", ngImport: i0, type: BoardViewPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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: `
     <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 +2276,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
+                    pButton
                     [text]="true"
                     size="small"
                     severity="secondary"
-                    styleClass="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                    class="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
                     [pTooltip]="'task.manager.board.edit' | translate"
                     tooltipPosition="bottom"
-                    (onClick)="openEditBoardDialog(board)"
-                  />
+                    (click)="openEditBoardDialog(board)"
+                  >
+                    <span pButtonIcon class="pi pi-pencil"></span>
+                  </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>
                 }
@@ -2195,7 +2315,7 @@ class BoardViewPageComponent {
               >
                 @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"
+                    class="w-6 h-6 rounded-full border-2 border-surface-card flex items-center justify-center text-[9px] font-bold text-white flex-shrink-0 ring-1 ring-surface"
                     [style.background-color]="memberColor(member)"
                   >
                     {{ memberInitials(member) }}
@@ -2203,7 +2323,7 @@ class BoardViewPageComponent {
                 }
                 @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"
+                    class="w-6 h-6 rounded-full border-2 border-surface-card 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>
@@ -2211,68 +2331,91 @@ class BoardViewPageComponent {
               </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"
+            <div
+              class="flex rounded-border overflow-hidden border border-surface"
+            >
+              <button
+                pButton
                 [pTooltip]="'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"
+                class="!rounded-none !border-0"
+                (click)="viewMode.set('board')"
+              >
+                <span pButtonIcon class="pi pi-th-large"></span>
+              </button>
+              <button
+                pButton
                 [pTooltip]="'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')"
+              >
+                <span pButtonIcon class="pi pi-list"></span>
+              </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
+              pButton
               [text]="true"
               severity="secondary"
               size="small"
-              styleClass="!w-8 !h-8"
+              class="!w-8 !h-8"
               [pTooltip]="'task.manager.board.manage.members' | translate"
               tooltipPosition="bottom"
-              (onClick)="showMembersDialog.set(true)"
-            />
-            <p-button
-              icon="pi pi-tag"
+              (click)="showMembersDialog.set(true)"
+            >
+              <span pButtonIcon class="pi pi-users"></span>
+            </button>
+            <button
+              pButton
               [text]="true"
               severity="secondary"
               size="small"
-              styleClass="!w-8 !h-8"
+              class="!w-8 !h-8"
               [pTooltip]="'task.manager.board.manage.labels' | translate"
               tooltipPosition="bottom"
-              (onClick)="showLabelsDialog.set(true)"
-            />
+              (click)="showLabelsDialog.set(true)"
+            >
+              <span pButtonIcon class="pi pi-tag"></span>
+            </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
+                pButton
                 size="small"
-                (onClick)="showAddListDialog.set(true)"
-              />
+                (click)="showAddListDialog.set(true)"
+              >
+                <span pButtonIcon class="pi pi-plus"></span>
+                <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>
 
@@ -2295,7 +2438,6 @@ class BoardViewPageComponent {
             }
           </div>
         }
-
       } @else if (viewMode() === 'board') {
         <div
           class="flex gap-4 p-5 overflow-x-auto flex-1"
@@ -2307,15 +2449,14 @@ 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
                   cdkDragHandle
-                  class="pi pi-bars text-surface-300 dark:text-surface-600 text-xs cursor-grab flex-shrink-0 px-1"
+                  class="pi pi-bars text-muted-color text-xs cursor-grab flex-shrink-0 px-1"
                 ></i>
 
                 <div class="flex items-center gap-2 min-w-0 flex-1">
@@ -2332,7 +2473,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 +2486,41 @@ class BoardViewPageComponent {
                 </div>
 
                 @if (editingListId() === list.id) {
-                  <p-button
-                    icon="pi pi-check"
+                  <button
+                    pButton
                     [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"
+                  >
+                    <span pButtonIcon class="pi pi-check"></span>
+                  </button>
+                  <button
+                    pButton
                     [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()"
-                  />
+                  >
+                    <span pButtonIcon class="pi pi-times"></span>
+                  </button>
                 } @else {
-                  <p-button
-                    icon="pi pi-pencil"
+                  <button
+                    pButton
                     [text]="true"
                     size="small"
                     severity="secondary"
-                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    class="!w-6 !h-6 flex-shrink-0"
                     [pTooltip]="'task.manager.list.rename' | translate"
                     tooltipPosition="bottom"
                     (click)="startRenameList(list); $event.stopPropagation()"
-                  />
+                  >
+                    <span pButtonIcon class="pi pi-pencil"></span>
+                  </button>
                 }
               </div>
 
@@ -2381,7 +2530,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,56 +2544,60 @@ 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
+                  pButton
                   severity="secondary"
+                  [text]="true"
                   size="small"
-                  styleClass="w-full !justify-start"
-                  (onClick)="openAddTask(list)"
-                />
+                  class="w-full !justify-start"
+                  (click)="openAddTask(list)"
+                >
+                  <span pButtonIcon class="pi pi-plus"></span>
+                  <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>
+                  <i class="pi pi-list text-3xl text-muted-color"></i>
                 </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
+                  pButton
                   severity="secondary"
                   size="small"
                   class="mt-3"
-                  (onClick)="showAddListDialog.set(true)"
-                />
+                  (click)="showAddListDialog.set(true)"
+                >
+                  <span pButtonIcon class="pi pi-plus"></span>
+                  <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">
@@ -2462,24 +2615,26 @@ class BoardViewPageComponent {
                   <tr>
                     <th pSortableColumn="title" class="min-w-[240px]">
                       {{ 'task.manager.table.title' | translate }}
-                      <p-sortIcon field="title" />
+                      <p-sorticon field="title" />
                     </th>
                     <th pSortableColumn="listName" class="w-40">
                       {{ 'task.manager.table.list' | translate }}
-                      <p-sortIcon field="listName" />
+                      <p-sorticon field="listName" />
                     </th>
                     <th pSortableColumn="priority" class="w-32">
                       {{ 'task.manager.table.priority' | translate }}
-                      <p-sortIcon field="priority" />
+                      <p-sorticon field="priority" />
                     </th>
                     <th class="w-36">
                       {{ 'task.manager.table.assignee' | translate }}
                     </th>
                     <th pSortableColumn="dueDate" class="w-32">
                       {{ 'task.manager.table.due.date' | translate }}
-                      <p-sortIcon field="dueDate" />
+                      <p-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 +2643,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">
@@ -2508,10 +2664,15 @@ 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) {
+                          @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)"
+                              class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-surface-card"
+                              [style.background-color]="
+                                memberColorById(a.userId)
+                              "
                               [pTooltip]="a.userName ?? ''"
                             >
                               {{ getMemberInitials(a.userId) }}
@@ -2519,7 +2680,7 @@ class BoardViewPageComponent {
                           }
                           @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"
+                              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-surface-card flex-shrink-0"
                             >
                               +{{ task.assignees!.length - 3 }}
                             </span>
@@ -2543,22 +2704,26 @@ class BoardViewPageComponent {
                     </td>
                     <td>
                       <div class="flex gap-1">
-                        <p-button
-                          icon="pi pi-pencil"
+                        <button
+                          pButton
                           [text]="true"
                           severity="secondary"
                           size="small"
                           [pTooltip]="'shared.edit' | translate"
-                          (onClick)="onEditTask(task)"
-                        />
-                        <p-button
-                          icon="pi pi-trash"
+                          (click)="onEditTask(task)"
+                        >
+                          <span pButtonIcon class="pi pi-pencil"></span>
+                        </button>
+                        <button
+                          pButton
                           [text]="true"
                           severity="danger"
                           size="small"
                           [pTooltip]="'shared.delete' | translate"
-                          (onClick)="onDeleteTask(task)"
-                        />
+                          (click)="onDeleteTask(task)"
+                        >
+                          <span pButtonIcon class="pi pi-trash"></span>
+                        </button>
                       </div>
                     </td>
                   </tr>
@@ -2623,24 +2788,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
+            pButton
             size="small"
-            [loading]="isAddingLabel()"
-            (onClick)="addLabel()"
-          />
+            (click)="addLabel()"
+            [disabled]="isAddingLabel()"
+          >
+            @if (isAddingLabel()) {
+              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+            } @else {
+              <span pButtonIcon class="pi pi-plus"></span>
+            }
+            <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,13 +2820,15 @@ class BoardViewPageComponent {
                 ></span>
                 <span class="text-sm font-medium">{{ label.name }}</span>
               </div>
-              <p-button
-                icon="pi pi-trash"
+              <button
+                pButton
                 severity="danger"
                 size="small"
                 [text]="true"
-                (onClick)="removeLabel(label.id)"
-              />
+                (click)="removeLabel(label.id)"
+              >
+                <span pButtonIcon class="pi pi-trash"></span>
+              </button>
             </div>
           }
         </div>
@@ -2695,7 +2868,6 @@ class BoardViewPageComponent {
                   'task.manager.member.role.placeholder' | translate
                 "
                 class="w-full"
-                appendTo="body"
               >
                 <ng-template #selectedItem let-opt>
                   {{ opt.labelKey | translate }}
@@ -2705,26 +2877,33 @@ class BoardViewPageComponent {
                 </ng-template>
               </p-select>
             </div>
-            <p-button
-              icon="pi pi-plus"
-              [label]="'task.manager.member.add' | translate"
+            <button
+              pButton
               size="small"
-              [loading]="isAddingMember()"
-              [disabled]="!selectedMemberUser"
-              (onClick)="addMember()"
-            />
+              [disabled]="!selectedMemberUser || isAddingMember()"
+              (click)="addMember()"
+            >
+              @if (isAddingMember()) {
+                <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+              } @else {
+                <span pButtonIcon class="pi pi-plus"></span>
+              }
+              <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
@@ -2738,7 +2917,7 @@ class BoardViewPageComponent {
                     {{ 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,16 +2928,21 @@ 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
+                    pButton
                     severity="danger"
                     size="small"
                     [text]="true"
-                    (onClick)="removeMember(member.userId)"
-                  />
+                    (click)="removeMember(member.userId)"
+                  >
+                    <span pButtonIcon class="pi pi-trash"></span>
+                  </button>
                 }
               </div>
             </div>
@@ -2785,18 +2969,21 @@ class BoardViewPageComponent {
           [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
+            pButton
             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 pButton (click)="addList()" [disabled]="isAddingList()">
+            @if (isAddingList()) {
+              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+            }
+            <span pButtonLabel>{{ 'shared.create' | translate }}</span>
+          </button>
         </div>
       </ng-template>
     </p-dialog>
@@ -2823,7 +3010,9 @@ class BoardViewPageComponent {
             pTextarea
             [(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,25 +3040,31 @@ 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
+            pButton
             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
+            pButton
+            [disabled]="!editBoardName.trim() || isSavingBoard()"
+            (click)="saveBoard()"
+          >
+            @if (isSavingBoard()) {
+              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+            }
+            <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" }] });
+  `, 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: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2$2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2$2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { 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", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo"], outputs: ["visibleChange", "onShow", "onHide", "onResizeInit", "onResizeEnd", "onDragStart", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["hostName", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "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", "multiple", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.Skeleton, selector: "p-skeleton", inputs: ["shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i8$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "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", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "firstChange", "rowsChange", "totalRecordsChange", "selectionChange", "selectAllChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i8$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8$1.SortIcon, selector: "p-sort-icon, p-sorticon", inputs: ["field"] }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["severity", "value", "icon", "rounded"] }, { kind: "directive", type: i4.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", "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: i8.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.5", ngImport: i0, type: BoardViewPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tm-board-view-page',
@@ -2891,22 +3086,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
+                    pButton
                     [text]="true"
                     size="small"
                     severity="secondary"
-                    styleClass="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                    class="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
                     [pTooltip]="'task.manager.board.edit' | translate"
                     tooltipPosition="bottom"
-                    (onClick)="openEditBoardDialog(board)"
-                  />
+                    (click)="openEditBoardDialog(board)"
+                  >
+                    <span pButtonIcon class="pi pi-pencil"></span>
+                  </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>
                 }
@@ -2924,7 +3125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               >
                 @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"
+                    class="w-6 h-6 rounded-full border-2 border-surface-card flex items-center justify-center text-[9px] font-bold text-white flex-shrink-0 ring-1 ring-surface"
                     [style.background-color]="memberColor(member)"
                   >
                     {{ memberInitials(member) }}
@@ -2932,7 +3133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }
                 @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"
+                    class="w-6 h-6 rounded-full border-2 border-surface-card 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>
@@ -2940,68 +3141,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               </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"
+            <div
+              class="flex rounded-border overflow-hidden border border-surface"
+            >
+              <button
+                pButton
                 [pTooltip]="'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"
+                class="!rounded-none !border-0"
+                (click)="viewMode.set('board')"
+              >
+                <span pButtonIcon class="pi pi-th-large"></span>
+              </button>
+              <button
+                pButton
                 [pTooltip]="'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')"
+              >
+                <span pButtonIcon class="pi pi-list"></span>
+              </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
+              pButton
               [text]="true"
               severity="secondary"
               size="small"
-              styleClass="!w-8 !h-8"
+              class="!w-8 !h-8"
               [pTooltip]="'task.manager.board.manage.members' | translate"
               tooltipPosition="bottom"
-              (onClick)="showMembersDialog.set(true)"
-            />
-            <p-button
-              icon="pi pi-tag"
+              (click)="showMembersDialog.set(true)"
+            >
+              <span pButtonIcon class="pi pi-users"></span>
+            </button>
+            <button
+              pButton
               [text]="true"
               severity="secondary"
               size="small"
-              styleClass="!w-8 !h-8"
+              class="!w-8 !h-8"
               [pTooltip]="'task.manager.board.manage.labels' | translate"
               tooltipPosition="bottom"
-              (onClick)="showLabelsDialog.set(true)"
-            />
+              (click)="showLabelsDialog.set(true)"
+            >
+              <span pButtonIcon class="pi pi-tag"></span>
+            </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
+                pButton
                 size="small"
-                (onClick)="showAddListDialog.set(true)"
-              />
+                (click)="showAddListDialog.set(true)"
+              >
+                <span pButtonIcon class="pi pi-plus"></span>
+                <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>
 
@@ -3024,7 +3248,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             }
           </div>
         }
-
       } @else if (viewMode() === 'board') {
         <div
           class="flex gap-4 p-5 overflow-x-auto flex-1"
@@ -3036,15 +3259,14 @@ 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
                   cdkDragHandle
-                  class="pi pi-bars text-surface-300 dark:text-surface-600 text-xs cursor-grab flex-shrink-0 px-1"
+                  class="pi pi-bars text-muted-color text-xs cursor-grab flex-shrink-0 px-1"
                 ></i>
 
                 <div class="flex items-center gap-2 min-w-0 flex-1">
@@ -3061,7 +3283,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 +3296,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 </div>
 
                 @if (editingListId() === list.id) {
-                  <p-button
-                    icon="pi pi-check"
+                  <button
+                    pButton
                     [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"
+                  >
+                    <span pButtonIcon class="pi pi-check"></span>
+                  </button>
+                  <button
+                    pButton
                     [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()"
-                  />
+                  >
+                    <span pButtonIcon class="pi pi-times"></span>
+                  </button>
                 } @else {
-                  <p-button
-                    icon="pi pi-pencil"
+                  <button
+                    pButton
                     [text]="true"
                     size="small"
                     severity="secondary"
-                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    class="!w-6 !h-6 flex-shrink-0"
                     [pTooltip]="'task.manager.list.rename' | translate"
                     tooltipPosition="bottom"
                     (click)="startRenameList(list); $event.stopPropagation()"
-                  />
+                  >
+                    <span pButtonIcon class="pi pi-pencil"></span>
+                  </button>
                 }
               </div>
 
@@ -3110,7 +3340,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,56 +3354,60 @@ 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
+                  pButton
                   severity="secondary"
+                  [text]="true"
                   size="small"
-                  styleClass="w-full !justify-start"
-                  (onClick)="openAddTask(list)"
-                />
+                  class="w-full !justify-start"
+                  (click)="openAddTask(list)"
+                >
+                  <span pButtonIcon class="pi pi-plus"></span>
+                  <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>
+                  <i class="pi pi-list text-3xl text-muted-color"></i>
                 </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
+                  pButton
                   severity="secondary"
                   size="small"
                   class="mt-3"
-                  (onClick)="showAddListDialog.set(true)"
-                />
+                  (click)="showAddListDialog.set(true)"
+                >
+                  <span pButtonIcon class="pi pi-plus"></span>
+                  <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">
@@ -3191,24 +3425,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   <tr>
                     <th pSortableColumn="title" class="min-w-[240px]">
                       {{ 'task.manager.table.title' | translate }}
-                      <p-sortIcon field="title" />
+                      <p-sorticon field="title" />
                     </th>
                     <th pSortableColumn="listName" class="w-40">
                       {{ 'task.manager.table.list' | translate }}
-                      <p-sortIcon field="listName" />
+                      <p-sorticon field="listName" />
                     </th>
                     <th pSortableColumn="priority" class="w-32">
                       {{ 'task.manager.table.priority' | translate }}
-                      <p-sortIcon field="priority" />
+                      <p-sorticon field="priority" />
                     </th>
                     <th class="w-36">
                       {{ 'task.manager.table.assignee' | translate }}
                     </th>
                     <th pSortableColumn="dueDate" class="w-32">
                       {{ 'task.manager.table.due.date' | translate }}
-                      <p-sortIcon field="dueDate" />
+                      <p-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 +3453,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">
@@ -3237,10 +3474,15 @@ 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) {
+                          @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)"
+                              class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-surface-card"
+                              [style.background-color]="
+                                memberColorById(a.userId)
+                              "
                               [pTooltip]="a.userName ?? ''"
                             >
                               {{ getMemberInitials(a.userId) }}
@@ -3248,7 +3490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                           }
                           @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"
+                              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-surface-card flex-shrink-0"
                             >
                               +{{ task.assignees!.length - 3 }}
                             </span>
@@ -3272,22 +3514,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
+                          pButton
                           [text]="true"
                           severity="secondary"
                           size="small"
                           [pTooltip]="'shared.edit' | translate"
-                          (onClick)="onEditTask(task)"
-                        />
-                        <p-button
-                          icon="pi pi-trash"
+                          (click)="onEditTask(task)"
+                        >
+                          <span pButtonIcon class="pi pi-pencil"></span>
+                        </button>
+                        <button
+                          pButton
                           [text]="true"
                           severity="danger"
                           size="small"
                           [pTooltip]="'shared.delete' | translate"
-                          (onClick)="onDeleteTask(task)"
-                        />
+                          (click)="onDeleteTask(task)"
+                        >
+                          <span pButtonIcon class="pi pi-trash"></span>
+                        </button>
                       </div>
                     </td>
                   </tr>
@@ -3352,24 +3598,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
+            pButton
             size="small"
-            [loading]="isAddingLabel()"
-            (onClick)="addLabel()"
-          />
+            (click)="addLabel()"
+            [disabled]="isAddingLabel()"
+          >
+            @if (isAddingLabel()) {
+              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+            } @else {
+              <span pButtonIcon class="pi pi-plus"></span>
+            }
+            <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,13 +3630,15 @@ 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
+                pButton
                 severity="danger"
                 size="small"
                 [text]="true"
-                (onClick)="removeLabel(label.id)"
-              />
+                (click)="removeLabel(label.id)"
+              >
+                <span pButtonIcon class="pi pi-trash"></span>
+              </button>
             </div>
           }
         </div>
@@ -3424,7 +3678,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 }}
@@ -3434,26 +3687,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 </ng-template>
               </p-select>
             </div>
-            <p-button
-              icon="pi pi-plus"
-              [label]="'task.manager.member.add' | translate"
+            <button
+              pButton
               size="small"
-              [loading]="isAddingMember()"
-              [disabled]="!selectedMemberUser"
-              (onClick)="addMember()"
-            />
+              [disabled]="!selectedMemberUser || isAddingMember()"
+              (click)="addMember()"
+            >
+              @if (isAddingMember()) {
+                <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+              } @else {
+                <span pButtonIcon class="pi pi-plus"></span>
+              }
+              <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
@@ -3467,7 +3727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     {{ 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,16 +3738,21 @@ 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
+                    pButton
                     severity="danger"
                     size="small"
                     [text]="true"
-                    (onClick)="removeMember(member.userId)"
-                  />
+                    (click)="removeMember(member.userId)"
+                  >
+                    <span pButtonIcon class="pi pi-trash"></span>
+                  </button>
                 }
               </div>
             </div>
@@ -3514,18 +3779,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           [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
+            pButton
             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 pButton (click)="addList()" [disabled]="isAddingList()">
+            @if (isAddingList()) {
+              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+            }
+            <span pButtonLabel>{{ 'shared.create' | translate }}</span>
+          </button>
         </div>
       </ng-template>
     </p-dialog>
@@ -3552,7 +3820,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             pTextarea
             [(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,19 +3850,25 @@ 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
+            pButton
             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
+            pButton
+            [disabled]="!editBoardName.trim() || isSavingBoard()"
+            (click)="saveBoard()"
+          >
+            @if (isSavingBoard()) {
+              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+            }
+            <span pButtonLabel>{{ 'shared.save' | translate }}</span>
+          </button>
         </div>
       </ng-template>
     </p-dialog>