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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +3 -3
  2. package/fesm2022/flusys-ng-task-manager.mjs +496 -518
  3. package/fesm2022/flusys-ng-task-manager.mjs.map +1 -1
  4. package/package.json +4 -6
package/fesm2022/flusys-ng-task-manager.mjs CHANGED
@@ -1,38 +1,19 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, inject, signal, DestroyRef, computed, input, output, Component, model, effect, untracked } from '@angular/core';
3
- import { ApiResourceService, TranslatePipe, AngularModule, PrimeModule, TranslateService, UserSelectComponent, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
3
+ import { ApiResourceService, TranslatePipe, AngularModule, TranslateService, UserSelectComponent, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
4
4
  import { firstValueFrom, Subject } from 'rxjs';
5
5
  import { io } from 'socket.io-client';
6
6
  import { APP_CONFIG } from '@flusys/ng-core';
7
7
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
8
- import * as i8 from '@angular/common';
8
+ import * as i3 from '@angular/common';
9
9
  import { DatePipe } from '@angular/common';
10
- import * as i1 from 'primeng/tag';
11
- import { TagModule } from 'primeng/tag';
12
- import * as i2 from 'primeng/tooltip';
13
- import { TooltipModule } from 'primeng/tooltip';
14
- import * as i2$1 from '@angular/forms';
10
+ import * as i1 from '@flusys/ng-ui';
11
+ import { TooltipDirective, UiModule, ConfirmationService, MessageService } from '@flusys/ng-ui';
12
+ import * as i2 from '@angular/forms';
15
13
  import { FormsModule } from '@angular/forms';
16
- import * as i2$2 from 'primeng/button';
17
- import { ButtonModule } from 'primeng/button';
18
- import * as i6 from 'primeng/datepicker';
19
- import { DatePickerModule } from 'primeng/datepicker';
20
- import * as i1$1 from 'primeng/dialog';
21
- import { DialogModule } from 'primeng/dialog';
22
- import * as i3 from 'primeng/inputtext';
23
- import { InputTextModule } from 'primeng/inputtext';
24
- import * as i5 from 'primeng/select';
25
- import { SelectModule } from 'primeng/select';
26
- import * as i4 from 'primeng/textarea';
27
- import { TextareaModule } from 'primeng/textarea';
28
- import * as i1$2 from 'primeng/drawer';
29
- import { DrawerModule } from 'primeng/drawer';
30
14
  import { Router } from '@angular/router';
31
- import * as i5$1 from 'primeng/skeleton';
32
- import * as i1$3 from '@angular/cdk/drag-drop';
15
+ import * as i2$1 from '@angular/cdk/drag-drop';
33
16
  import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
34
- import { ConfirmationService, MessageService } from 'primeng/api';
35
- import * as i8$1 from 'primeng/table';
36
17
 
37
18
  class TaskBoardApiService extends ApiResourceService {
38
19
  constructor() {
@@ -50,10 +31,10 @@ class TaskBoardApiService extends ApiResourceService {
50
31
  userId,
51
32
  }));
52
33
  }
53
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskBoardApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
54
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskBoardApiService, providedIn: 'root' });
34
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
35
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardApiService, providedIn: 'root' });
55
36
  }
56
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskBoardApiService, decorators: [{
37
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardApiService, decorators: [{
57
38
  type: Injectable,
58
39
  args: [{ providedIn: 'root' }]
59
40
  }], ctorParameters: () => [] });
@@ -65,10 +46,10 @@ class TaskApiService extends ApiResourceService {
65
46
  moveTask(dto) {
66
47
  return firstValueFrom(this.http.post(`${this.baseUrl}/move`, dto));
67
48
  }
68
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
69
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskApiService, providedIn: 'root' });
49
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
50
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskApiService, providedIn: 'root' });
70
51
  }
71
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskApiService, decorators: [{
52
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskApiService, decorators: [{
72
53
  type: Injectable,
73
54
  args: [{ providedIn: 'root' }]
74
55
  }], ctorParameters: () => [] });
@@ -82,10 +63,10 @@ class TaskListApiService extends ApiResourceService {
82
63
  reorderLists(dto) {
83
64
  return firstValueFrom(this.http.post(`${this.baseUrl}/reorder`, dto));
84
65
  }
85
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskListApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
86
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskListApiService, providedIn: 'root' });
66
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskListApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
67
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskListApiService, providedIn: 'root' });
87
68
  }
88
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskListApiService, decorators: [{
69
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskListApiService, decorators: [{
89
70
  type: Injectable,
90
71
  args: [{ providedIn: 'root' }]
91
72
  }], ctorParameters: () => [] });
@@ -93,10 +74,10 @@ class TaskLabelApiService extends ApiResourceService {
93
74
  constructor() {
94
75
  super('label', 'taskManager');
95
76
  }
96
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskLabelApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
97
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskLabelApiService, providedIn: 'root' });
77
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskLabelApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
78
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskLabelApiService, providedIn: 'root' });
98
79
  }
99
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskLabelApiService, decorators: [{
80
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskLabelApiService, decorators: [{
100
81
  type: Injectable,
101
82
  args: [{ providedIn: 'root' }]
102
83
  }], ctorParameters: () => [] });
@@ -104,10 +85,10 @@ class TaskCommentApiService extends ApiResourceService {
104
85
  constructor() {
105
86
  super('comment', 'taskManager');
106
87
  }
107
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskCommentApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
108
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskCommentApiService, providedIn: 'root' });
88
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskCommentApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
89
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskCommentApiService, providedIn: 'root' });
109
90
  }
110
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskCommentApiService, decorators: [{
91
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskCommentApiService, decorators: [{
111
92
  type: Injectable,
112
93
  args: [{ providedIn: 'root' }]
113
94
  }], ctorParameters: () => [] });
@@ -155,10 +136,10 @@ class TaskBoardSocketService {
155
136
  const services = this.appConfig.services;
156
137
  return services?.['taskManager']?.socketUrl ?? this.appConfig.apiBaseUrl;
157
138
  }
158
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskBoardSocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
159
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskBoardSocketService, providedIn: 'root' });
139
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardSocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
140
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardSocketService, providedIn: 'root' });
160
141
  }
161
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskBoardSocketService, decorators: [{
142
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardSocketService, decorators: [{
162
143
  type: Injectable,
163
144
  args: [{ providedIn: 'root' }]
164
145
  }] });
@@ -378,10 +359,10 @@ class TaskBoardStateService {
378
359
  }
379
360
  }
380
361
  }
381
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskBoardStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
382
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskBoardStateService, providedIn: 'root' });
362
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
363
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardStateService, providedIn: 'root' });
383
364
  }
384
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskBoardStateService, decorators: [{
365
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskBoardStateService, decorators: [{
385
366
  type: Injectable,
386
367
  args: [{ providedIn: 'root' }]
387
368
  }], ctorParameters: () => [] });
@@ -445,8 +426,8 @@ class TaskCardComponent {
445
426
  initials = memberInitials;
446
427
  isOverdue = isTaskOverdue;
447
428
  memberColor = memberColorFromId;
448
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
449
- 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: `
429
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
430
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TaskCardComponent, isStandalone: true, selector: "tm-task-card", inputs: { task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cardClick: "cardClick", editClick: "editClick", deleteClick: "deleteClick" }, ngImport: i0, template: `
450
431
  <div
451
432
  class="task-card group relative rounded-border border border-surface p-3 cursor-pointer shadow-sm hover:shadow-md transition-shadow"
452
433
  (click)="cardClick.emit(task())"
@@ -454,19 +435,19 @@ class TaskCardComponent {
454
435
  <div class="absolute top-2 right-2 hidden group-hover:flex gap-0.5">
455
436
  <button
456
437
  class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-primary-500 hover:bg-surface-hover transition-colors"
457
- [pTooltip]="'shared.edit' | translate"
438
+ [fTooltip]="'shared.edit' | translate"
458
439
  tooltipPosition="top"
459
440
  (click)="$event.stopPropagation(); editClick.emit(task())"
460
441
  >
461
- <i class="pi pi-pencil text-xs"></i>
442
+ <ui-icon name="pencil" class="text-xs"></ui-icon>
462
443
  </button>
463
444
  <button
464
445
  class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-red-500 hover:bg-surface-hover transition-colors"
465
- [pTooltip]="'shared.delete' | translate"
446
+ [fTooltip]="'shared.delete' | translate"
466
447
  tooltipPosition="top"
467
448
  (click)="$event.stopPropagation(); deleteClick.emit(task())"
468
449
  >
469
- <i class="pi pi-trash text-xs"></i>
450
+ <ui-icon name="trash" class="text-xs"></ui-icon>
470
451
  </button>
471
452
  </div>
472
453
 
@@ -476,7 +457,7 @@ class TaskCardComponent {
476
457
  <span
477
458
  class="inline-block h-1.5 rounded-full w-8"
478
459
  [style.background-color]="label.color"
479
- [pTooltip]="label.name"
460
+ [fTooltip]="label.name"
480
461
  ></span>
481
462
  }
482
463
  </div>
@@ -487,10 +468,10 @@ class TaskCardComponent {
487
468
  </p>
488
469
 
489
470
  <div class="flex items-center justify-between gap-2 mt-auto pt-2">
490
- <p-tag
471
+ <f-tag
491
472
  [value]="task().priority"
492
473
  [severity]="prioritySeverity(task().priority)"
493
- styleClass="text-xs"
474
+ class="text-xs"
494
475
  />
495
476
 
496
477
  @if (task().dueDate) {
@@ -505,32 +486,34 @@ class TaskCardComponent {
505
486
  @if (visibleAssignees().length > 0) {
506
487
  <div class="flex items-center -space-x-1.5">
507
488
  @for (a of visibleAssignees(); track a.userId) {
508
- <span
509
- 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"
510
- [style.background-color]="memberColor(a.userId)"
511
- [pTooltip]="a.userName ?? undefined"
512
- >
513
- {{ initials(a.userName) }}
514
- </span>
489
+ <f-avatar
490
+ shape="circle"
491
+ size="small"
492
+ [label]="initials(a.userName)"
493
+ [color]="memberColor(a.userId)"
494
+ styleClass="!ring-surface-card flex-shrink-0"
495
+ [fTooltip]="a.userName ?? ''"
496
+ />
515
497
  }
516
498
  @if (overflowCount() > 0) {
517
- <span
518
- 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"
519
- >
520
- +{{ overflowCount() }}
521
- </span>
499
+ <f-avatar
500
+ shape="circle"
501
+ size="small"
502
+ [label]="'+' + overflowCount()"
503
+ styleClass="!bg-surface-200 dark:!bg-surface-700 !text-surface-600 dark:!text-surface-300 !ring-surface-card flex-shrink-0"
504
+ />
522
505
  }
523
506
  </div>
524
507
  }
525
508
  </div>
526
509
  </div>
527
- `, 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" }] });
510
+ `, isInline: true, dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.AvatarComponent, selector: "f-avatar", inputs: ["label", "icon", "image", "shape", "size", "color", "styleClass"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
528
511
  }
529
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskCardComponent, decorators: [{
512
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskCardComponent, decorators: [{
530
513
  type: Component,
531
514
  args: [{
532
515
  selector: 'tm-task-card',
533
- imports: [TagModule, TooltipModule, DatePipe, TranslatePipe],
516
+ imports: [DatePipe, TranslatePipe, TooltipDirective, UiModule],
534
517
  template: `
535
518
  <div
536
519
  class="task-card group relative rounded-border border border-surface p-3 cursor-pointer shadow-sm hover:shadow-md transition-shadow"
@@ -539,19 +522,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
539
522
  <div class="absolute top-2 right-2 hidden group-hover:flex gap-0.5">
540
523
  <button
541
524
  class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-primary-500 hover:bg-surface-hover transition-colors"
542
- [pTooltip]="'shared.edit' | translate"
525
+ [fTooltip]="'shared.edit' | translate"
543
526
  tooltipPosition="top"
544
527
  (click)="$event.stopPropagation(); editClick.emit(task())"
545
528
  >
546
- <i class="pi pi-pencil text-xs"></i>
529
+ <ui-icon name="pencil" class="text-xs"></ui-icon>
547
530
  </button>
548
531
  <button
549
532
  class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-red-500 hover:bg-surface-hover transition-colors"
550
- [pTooltip]="'shared.delete' | translate"
533
+ [fTooltip]="'shared.delete' | translate"
551
534
  tooltipPosition="top"
552
535
  (click)="$event.stopPropagation(); deleteClick.emit(task())"
553
536
  >
554
- <i class="pi pi-trash text-xs"></i>
537
+ <ui-icon name="trash" class="text-xs"></ui-icon>
555
538
  </button>
556
539
  </div>
557
540
 
@@ -561,7 +544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
561
544
  <span
562
545
  class="inline-block h-1.5 rounded-full w-8"
563
546
  [style.background-color]="label.color"
564
- [pTooltip]="label.name"
547
+ [fTooltip]="label.name"
565
548
  ></span>
566
549
  }
567
550
  </div>
@@ -572,10 +555,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
572
555
  </p>
573
556
 
574
557
  <div class="flex items-center justify-between gap-2 mt-auto pt-2">
575
- <p-tag
558
+ <f-tag
576
559
  [value]="task().priority"
577
560
  [severity]="prioritySeverity(task().priority)"
578
- styleClass="text-xs"
561
+ class="text-xs"
579
562
  />
580
563
 
581
564
  @if (task().dueDate) {
@@ -590,20 +573,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
590
573
  @if (visibleAssignees().length > 0) {
591
574
  <div class="flex items-center -space-x-1.5">
592
575
  @for (a of visibleAssignees(); track a.userId) {
593
- <span
594
- 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"
595
- [style.background-color]="memberColor(a.userId)"
596
- [pTooltip]="a.userName ?? undefined"
597
- >
598
- {{ initials(a.userName) }}
599
- </span>
576
+ <f-avatar
577
+ shape="circle"
578
+ size="small"
579
+ [label]="initials(a.userName)"
580
+ [color]="memberColor(a.userId)"
581
+ styleClass="!ring-surface-card flex-shrink-0"
582
+ [fTooltip]="a.userName ?? ''"
583
+ />
600
584
  }
601
585
  @if (overflowCount() > 0) {
602
- <span
603
- 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"
604
- >
605
- +{{ overflowCount() }}
606
- </span>
586
+ <f-avatar
587
+ shape="circle"
588
+ size="small"
589
+ [label]="'+' + overflowCount()"
590
+ styleClass="!bg-surface-200 dark:!bg-surface-700 !text-surface-600 dark:!text-surface-300 !ring-surface-card flex-shrink-0"
591
+ />
607
592
  }
608
593
  </div>
609
594
  }
@@ -715,9 +700,9 @@ class TaskFormDialogComponent {
715
700
  this.selectedAssigneeIds = [];
716
701
  this.selectedLabelIds = [];
717
702
  }
718
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskFormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
719
- 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: `
720
- <p-dialog
703
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskFormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
704
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TaskFormDialogComponent, isStandalone: true, selector: "tm-task-form-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: false, transformFunction: null }, boardId: { classPropertyName: "boardId", publicName: "boardId", isSignal: true, isRequired: true, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: true, transformFunction: null }, members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", saved: "saved" }, ngImport: i0, template: `
705
+ <f-dialog
721
706
  [header]="
722
707
  (task() ? 'task.form.title.edit' : 'task.form.title.create') | translate
723
708
  "
@@ -733,7 +718,7 @@ class TaskFormDialogComponent {
733
718
  <span class="text-red-500">*</span></label
734
719
  >
735
720
  <input
736
- pInputText
721
+ fInputText
737
722
  [(ngModel)]="title"
738
723
  [placeholder]="'task.form.title.placeholder' | translate"
739
724
  />
@@ -744,7 +729,7 @@ class TaskFormDialogComponent {
744
729
  'shared.description' | translate
745
730
  }}</label>
746
731
  <textarea
747
- pTextarea
732
+ fTextarea
748
733
  [(ngModel)]="description"
749
734
  rows="3"
750
735
  [placeholder]="'task.form.description.placeholder' | translate"
@@ -756,7 +741,7 @@ class TaskFormDialogComponent {
756
741
  <label class="text-sm font-medium">{{
757
742
  'task.form.priority.label' | translate
758
743
  }}</label>
759
- <p-select
744
+ <f-select
760
745
  [(ngModel)]="priority"
761
746
  [options]="priorityOptions"
762
747
  optionLabel="labelKey"
@@ -769,14 +754,14 @@ class TaskFormDialogComponent {
769
754
  <ng-template #item let-opt>
770
755
  {{ opt.labelKey | translate }}
771
756
  </ng-template>
772
- </p-select>
757
+ </f-select>
773
758
  </div>
774
759
 
775
760
  <div class="flex flex-col gap-1">
776
761
  <label class="text-sm font-medium">{{
777
762
  'task.form.due.date.label' | translate
778
763
  }}</label>
779
- <p-datepicker
764
+ <f-datepicker
780
765
  [(ngModel)]="dueDate"
781
766
  [showClear]="true"
782
767
  [placeholder]="'task.form.due.date.placeholder' | translate"
@@ -788,8 +773,7 @@ class TaskFormDialogComponent {
788
773
  <label class="text-sm font-medium">{{
789
774
  'task.form.assignee.label' | translate
790
775
  }}</label>
791
- <p-select
792
- [multiple]="true"
776
+ <f-multiselect
793
777
  [(ngModel)]="selectedAssigneeIds"
794
778
  [options]="members()"
795
779
  optionLabel="userName"
@@ -803,8 +787,7 @@ class TaskFormDialogComponent {
803
787
  <label class="text-sm font-medium">{{
804
788
  'task.form.labels.label' | translate
805
789
  }}</label>
806
- <p-select
807
- [multiple]="true"
790
+ <f-multiselect
808
791
  [(ngModel)]="selectedLabelIds"
809
792
  [options]="labels()"
810
793
  optionLabel="name"
@@ -816,36 +799,27 @@ class TaskFormDialogComponent {
816
799
 
817
800
  <ng-template #footer>
818
801
  <div class="flex justify-end gap-2 pt-1">
819
- <button pButton severity="secondary" (click)="onClose()">
802
+ <button fButton severity="secondary" (click)="onClose()">
820
803
  <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
821
804
  </button>
822
- <button pButton (click)="onSave()" [disabled]="isSaving()">
805
+ <button fButton (click)="onSave()" [disabled]="isSaving()">
823
806
  @if (isSaving()) {
824
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
807
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
825
808
  }
826
809
  <span pButtonLabel>{{ 'shared.save' | translate }}</span>
827
810
  </button>
828
811
  </div>
829
812
  </ng-template>
830
- </p-dialog>
831
- `, 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" }] });
813
+ </f-dialog>
814
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.DatePickerComponent, selector: "f-datepicker", inputs: ["placeholder", "dateFormat", "disabled", "showTime", "selectionMode", "minDate", "maxDate", "inputId", "invalid", "touched", "showClear", "inputStyleClass", "showIcon", "showButtonBar", "appendTo", "styleClass"], outputs: ["onBlur"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.MultiSelectComponent, selector: "f-multiselect", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "inputId", "invalid", "touched", "showClear", "optionDisabled", "display", "maxSelectedLabels", "selectionLimit", "showToggleAll", "styleClass"], outputs: ["onBlur"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: i1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "dismissableMask", "resizable", "style", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
832
815
  }
833
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskFormDialogComponent, decorators: [{
816
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskFormDialogComponent, decorators: [{
834
817
  type: Component,
835
818
  args: [{
836
819
  selector: 'tm-task-form-dialog',
837
- imports: [
838
- DialogModule,
839
- FormsModule,
840
- InputTextModule,
841
- TextareaModule,
842
- SelectModule,
843
- DatePickerModule,
844
- ButtonModule,
845
- TranslatePipe,
846
- ],
820
+ imports: [UiModule, FormsModule, TranslatePipe],
847
821
  template: `
848
- <p-dialog
822
+ <f-dialog
849
823
  [header]="
850
824
  (task() ? 'task.form.title.edit' : 'task.form.title.create') | translate
851
825
  "
@@ -861,7 +835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
861
835
  <span class="text-red-500">*</span></label
862
836
  >
863
837
  <input
864
- pInputText
838
+ fInputText
865
839
  [(ngModel)]="title"
866
840
  [placeholder]="'task.form.title.placeholder' | translate"
867
841
  />
@@ -872,7 +846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
872
846
  'shared.description' | translate
873
847
  }}</label>
874
848
  <textarea
875
- pTextarea
849
+ fTextarea
876
850
  [(ngModel)]="description"
877
851
  rows="3"
878
852
  [placeholder]="'task.form.description.placeholder' | translate"
@@ -884,7 +858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
884
858
  <label class="text-sm font-medium">{{
885
859
  'task.form.priority.label' | translate
886
860
  }}</label>
887
- <p-select
861
+ <f-select
888
862
  [(ngModel)]="priority"
889
863
  [options]="priorityOptions"
890
864
  optionLabel="labelKey"
@@ -897,14 +871,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
897
871
  <ng-template #item let-opt>
898
872
  {{ opt.labelKey | translate }}
899
873
  </ng-template>
900
- </p-select>
874
+ </f-select>
901
875
  </div>
902
876
 
903
877
  <div class="flex flex-col gap-1">
904
878
  <label class="text-sm font-medium">{{
905
879
  'task.form.due.date.label' | translate
906
880
  }}</label>
907
- <p-datepicker
881
+ <f-datepicker
908
882
  [(ngModel)]="dueDate"
909
883
  [showClear]="true"
910
884
  [placeholder]="'task.form.due.date.placeholder' | translate"
@@ -916,8 +890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
916
890
  <label class="text-sm font-medium">{{
917
891
  'task.form.assignee.label' | translate
918
892
  }}</label>
919
- <p-select
920
- [multiple]="true"
893
+ <f-multiselect
921
894
  [(ngModel)]="selectedAssigneeIds"
922
895
  [options]="members()"
923
896
  optionLabel="userName"
@@ -931,8 +904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
931
904
  <label class="text-sm font-medium">{{
932
905
  'task.form.labels.label' | translate
933
906
  }}</label>
934
- <p-select
935
- [multiple]="true"
907
+ <f-multiselect
936
908
  [(ngModel)]="selectedLabelIds"
937
909
  [options]="labels()"
938
910
  optionLabel="name"
@@ -944,18 +916,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
944
916
 
945
917
  <ng-template #footer>
946
918
  <div class="flex justify-end gap-2 pt-1">
947
- <button pButton severity="secondary" (click)="onClose()">
919
+ <button fButton severity="secondary" (click)="onClose()">
948
920
  <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
949
921
  </button>
950
- <button pButton (click)="onSave()" [disabled]="isSaving()">
922
+ <button fButton (click)="onSave()" [disabled]="isSaving()">
951
923
  @if (isSaving()) {
952
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
924
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
953
925
  }
954
926
  <span pButtonLabel>{{ 'shared.save' | translate }}</span>
955
927
  </button>
956
928
  </div>
957
929
  </ng-template>
958
- </p-dialog>
930
+ </f-dialog>
959
931
  `,
960
932
  }]
961
933
  }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], task: [{ type: i0.Input, args: [{ isSignal: true, alias: "task", required: false }] }], boardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "boardId", required: true }] }], listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: true }] }], members: [{ type: i0.Input, args: [{ isSignal: true, alias: "members", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }] } });
@@ -1061,9 +1033,9 @@ class TaskDetailPanelComponent {
1061
1033
  this.isSendingReply.set(false);
1062
1034
  }
1063
1035
  }
1064
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskDetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1065
- 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: `
1066
- <p-drawer
1036
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskDetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1037
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TaskDetailPanelComponent, isStandalone: true, selector: "tm-task-detail-panel", inputs: { task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", editTask: "editTask" }, ngImport: i0, template: `
1038
+ <f-drawer
1067
1039
  [visible]="!!task()"
1068
1040
  position="right"
1069
1041
  [style]="{ width: '500px' }"
@@ -1074,36 +1046,36 @@ class TaskDetailPanelComponent {
1074
1046
  <div class="flex flex-col gap-6 h-full overflow-y-auto pb-4">
1075
1047
  <div class="flex items-center justify-end gap-1">
1076
1048
  <button
1077
- pButton
1049
+ fButton
1078
1050
  severity="secondary"
1079
1051
  size="small"
1080
1052
  [text]="true"
1081
- [pTooltip]="'task.detail.edit' | translate"
1053
+ [fTooltip]="'task.detail.edit' | translate"
1082
1054
  tooltipPosition="left"
1083
1055
  (click)="editTask.emit(t)"
1084
1056
  >
1085
- <span pButtonIcon class="pi pi-pencil"></span>
1057
+ <ui-icon pButtonIcon name="pencil"></ui-icon>
1086
1058
  </button>
1087
1059
  <button
1088
- pButton
1060
+ fButton
1089
1061
  severity="danger"
1090
1062
  size="small"
1091
1063
  [text]="true"
1092
- [pTooltip]="'task.detail.delete' | translate"
1064
+ [fTooltip]="'task.detail.delete' | translate"
1093
1065
  tooltipPosition="left"
1094
1066
  (click)="deleteTask(t.id)"
1095
1067
  [disabled]="isDeleting()"
1096
1068
  >
1097
1069
  @if (isDeleting()) {
1098
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
1070
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
1099
1071
  } @else {
1100
- <span pButtonIcon class="pi pi-trash"></span>
1072
+ <ui-icon pButtonIcon name="trash"></ui-icon>
1101
1073
  }
1102
1074
  </button>
1103
1075
  </div>
1104
1076
 
1105
1077
  <div class="flex items-center gap-3">
1106
- <p-tag
1078
+ <f-tag
1107
1079
  [value]="t.priority"
1108
1080
  [severity]="prioritySeverity(t.priority)"
1109
1081
  />
@@ -1123,11 +1095,12 @@ class TaskDetailPanelComponent {
1123
1095
  <div class="flex flex-wrap gap-2">
1124
1096
  @for (member of assigneeMembers(); track member.userId) {
1125
1097
  <div class="flex items-center gap-2 px-2 py-1 rounded-full ">
1126
- <span
1127
- class="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 flex items-center justify-center text-xs font-semibold"
1128
- >
1129
- {{ initials(member.userName) }}
1130
- </span>
1098
+ <f-avatar
1099
+ shape="circle"
1100
+ size="small"
1101
+ [label]="initials(member.userName)"
1102
+ styleClass="!bg-primary-100 dark:!bg-primary-900 !text-primary-700 dark:!text-primary-300"
1103
+ />
1131
1104
  <span class="text-sm">{{ member.userName }}</span>
1132
1105
  </div>
1133
1106
  }
@@ -1162,14 +1135,14 @@ class TaskDetailPanelComponent {
1162
1135
  comment.createdAt | date: 'MMM d, y, h:mm a'
1163
1136
  }}</span>
1164
1137
  <button
1165
- pButton
1138
+ fButton
1166
1139
  size="small"
1167
1140
  [text]="true"
1168
1141
  severity="secondary"
1169
1142
  class="opacity-0 group-hover:opacity-100 transition-opacity !py-0.5 !px-1.5 text-xs"
1170
1143
  (click)="toggleReply(comment.id)"
1171
1144
  >
1172
- <span pButtonIcon class="pi pi-reply"></span>
1145
+ <ui-icon pButtonIcon name="reply"></ui-icon>
1173
1146
  <span pButtonLabel>{{ 'task.comment.reply' | translate }}</span>
1174
1147
  </button>
1175
1148
  </div>
@@ -1195,7 +1168,7 @@ class TaskDetailPanelComponent {
1195
1168
  class="mt-2 pl-3 border-l-2 border-primary-300 dark:border-primary-700 flex gap-2"
1196
1169
  >
1197
1170
  <textarea
1198
- pTextarea
1171
+ fTextarea
1199
1172
  [(ngModel)]="replyText"
1200
1173
  rows="2"
1201
1174
  [placeholder]="
@@ -1206,25 +1179,25 @@ class TaskDetailPanelComponent {
1206
1179
  ></textarea>
1207
1180
  <div class="flex flex-col gap-1">
1208
1181
  <button
1209
- pButton
1182
+ fButton
1210
1183
  size="small"
1211
1184
  [disabled]="!replyText.trim() || isSendingReply()"
1212
1185
  (click)="submitReply(t.id, comment.id)"
1213
1186
  >
1214
1187
  @if (isSendingReply()) {
1215
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
1188
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
1216
1189
  } @else {
1217
- <span pButtonIcon class="pi pi-send"></span>
1190
+ <ui-icon pButtonIcon name="send"></ui-icon>
1218
1191
  }
1219
1192
  </button>
1220
1193
  <button
1221
- pButton
1194
+ fButton
1222
1195
  size="small"
1223
1196
  severity="secondary"
1224
1197
  [text]="true"
1225
1198
  (click)="cancelReply()"
1226
1199
  >
1227
- <span pButtonIcon class="pi pi-times"></span>
1200
+ <ui-icon pButtonIcon name="times"></ui-icon>
1228
1201
  </button>
1229
1202
  </div>
1230
1203
  </div>
@@ -1240,46 +1213,39 @@ class TaskDetailPanelComponent {
1240
1213
 
1241
1214
  <div class="flex gap-2 mt-3">
1242
1215
  <textarea
1243
- pTextarea
1216
+ fTextarea
1244
1217
  [(ngModel)]="newComment"
1245
1218
  rows="2"
1246
1219
  [placeholder]="'task.detail.comment.placeholder' | translate"
1247
1220
  class="flex-1 resize-none"
1248
1221
  ></textarea>
1249
1222
  <button
1250
- pButton
1223
+ fButton
1251
1224
  [disabled]="!newComment.trim() || isSendingComment()"
1252
1225
  (click)="addComment(t.id)"
1253
1226
  >
1254
1227
  @if (isSendingComment()) {
1255
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
1228
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
1256
1229
  } @else {
1257
- <span pButtonIcon class="pi pi-send"></span>
1230
+ <ui-icon pButtonIcon name="send"></ui-icon>
1258
1231
  }
1259
1232
  </button>
1260
1233
  </div>
1261
1234
  </div>
1262
1235
  </div>
1263
1236
  }
1264
- </p-drawer>
1265
- `, 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" }] });
1237
+ </f-drawer>
1238
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.AvatarComponent, selector: "f-avatar", inputs: ["label", "icon", "image", "shape", "size", "color", "styleClass"] }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "directive", type: i1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.DrawerComponent, selector: "f-drawer", inputs: ["header", "visible", "position", "fullScreen", "modal", "closable", "closeOnEscape"], outputs: ["visibleChange", "onHide"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
1266
1239
  }
1267
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TaskDetailPanelComponent, decorators: [{
1240
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TaskDetailPanelComponent, decorators: [{
1268
1241
  type: Component,
1269
1242
  args: [{
1270
1243
  selector: 'tm-task-detail-panel',
1271
- imports: [
1272
- DrawerModule,
1273
- ButtonModule,
1274
- TagModule,
1275
- DatePipe,
1244
+ imports: [UiModule, DatePipe,
1276
1245
  FormsModule,
1277
- TextareaModule,
1278
- TooltipModule,
1279
- TranslatePipe,
1280
- ],
1246
+ TranslatePipe,],
1281
1247
  template: `
1282
- <p-drawer
1248
+ <f-drawer
1283
1249
  [visible]="!!task()"
1284
1250
  position="right"
1285
1251
  [style]="{ width: '500px' }"
@@ -1290,36 +1256,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1290
1256
  <div class="flex flex-col gap-6 h-full overflow-y-auto pb-4">
1291
1257
  <div class="flex items-center justify-end gap-1">
1292
1258
  <button
1293
- pButton
1259
+ fButton
1294
1260
  severity="secondary"
1295
1261
  size="small"
1296
1262
  [text]="true"
1297
- [pTooltip]="'task.detail.edit' | translate"
1263
+ [fTooltip]="'task.detail.edit' | translate"
1298
1264
  tooltipPosition="left"
1299
1265
  (click)="editTask.emit(t)"
1300
1266
  >
1301
- <span pButtonIcon class="pi pi-pencil"></span>
1267
+ <ui-icon pButtonIcon name="pencil"></ui-icon>
1302
1268
  </button>
1303
1269
  <button
1304
- pButton
1270
+ fButton
1305
1271
  severity="danger"
1306
1272
  size="small"
1307
1273
  [text]="true"
1308
- [pTooltip]="'task.detail.delete' | translate"
1274
+ [fTooltip]="'task.detail.delete' | translate"
1309
1275
  tooltipPosition="left"
1310
1276
  (click)="deleteTask(t.id)"
1311
1277
  [disabled]="isDeleting()"
1312
1278
  >
1313
1279
  @if (isDeleting()) {
1314
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
1280
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
1315
1281
  } @else {
1316
- <span pButtonIcon class="pi pi-trash"></span>
1282
+ <ui-icon pButtonIcon name="trash"></ui-icon>
1317
1283
  }
1318
1284
  </button>
1319
1285
  </div>
1320
1286
 
1321
1287
  <div class="flex items-center gap-3">
1322
- <p-tag
1288
+ <f-tag
1323
1289
  [value]="t.priority"
1324
1290
  [severity]="prioritySeverity(t.priority)"
1325
1291
  />
@@ -1339,11 +1305,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1339
1305
  <div class="flex flex-wrap gap-2">
1340
1306
  @for (member of assigneeMembers(); track member.userId) {
1341
1307
  <div class="flex items-center gap-2 px-2 py-1 rounded-full ">
1342
- <span
1343
- class="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 flex items-center justify-center text-xs font-semibold"
1344
- >
1345
- {{ initials(member.userName) }}
1346
- </span>
1308
+ <f-avatar
1309
+ shape="circle"
1310
+ size="small"
1311
+ [label]="initials(member.userName)"
1312
+ styleClass="!bg-primary-100 dark:!bg-primary-900 !text-primary-700 dark:!text-primary-300"
1313
+ />
1347
1314
  <span class="text-sm">{{ member.userName }}</span>
1348
1315
  </div>
1349
1316
  }
@@ -1378,14 +1345,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1378
1345
  comment.createdAt | date: 'MMM d, y, h:mm a'
1379
1346
  }}</span>
1380
1347
  <button
1381
- pButton
1348
+ fButton
1382
1349
  size="small"
1383
1350
  [text]="true"
1384
1351
  severity="secondary"
1385
1352
  class="opacity-0 group-hover:opacity-100 transition-opacity !py-0.5 !px-1.5 text-xs"
1386
1353
  (click)="toggleReply(comment.id)"
1387
1354
  >
1388
- <span pButtonIcon class="pi pi-reply"></span>
1355
+ <ui-icon pButtonIcon name="reply"></ui-icon>
1389
1356
  <span pButtonLabel>{{ 'task.comment.reply' | translate }}</span>
1390
1357
  </button>
1391
1358
  </div>
@@ -1411,7 +1378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1411
1378
  class="mt-2 pl-3 border-l-2 border-primary-300 dark:border-primary-700 flex gap-2"
1412
1379
  >
1413
1380
  <textarea
1414
- pTextarea
1381
+ fTextarea
1415
1382
  [(ngModel)]="replyText"
1416
1383
  rows="2"
1417
1384
  [placeholder]="
@@ -1422,25 +1389,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1422
1389
  ></textarea>
1423
1390
  <div class="flex flex-col gap-1">
1424
1391
  <button
1425
- pButton
1392
+ fButton
1426
1393
  size="small"
1427
1394
  [disabled]="!replyText.trim() || isSendingReply()"
1428
1395
  (click)="submitReply(t.id, comment.id)"
1429
1396
  >
1430
1397
  @if (isSendingReply()) {
1431
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
1398
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
1432
1399
  } @else {
1433
- <span pButtonIcon class="pi pi-send"></span>
1400
+ <ui-icon pButtonIcon name="send"></ui-icon>
1434
1401
  }
1435
1402
  </button>
1436
1403
  <button
1437
- pButton
1404
+ fButton
1438
1405
  size="small"
1439
1406
  severity="secondary"
1440
1407
  [text]="true"
1441
1408
  (click)="cancelReply()"
1442
1409
  >
1443
- <span pButtonIcon class="pi pi-times"></span>
1410
+ <ui-icon pButtonIcon name="times"></ui-icon>
1444
1411
  </button>
1445
1412
  </div>
1446
1413
  </div>
@@ -1456,28 +1423,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1456
1423
 
1457
1424
  <div class="flex gap-2 mt-3">
1458
1425
  <textarea
1459
- pTextarea
1426
+ fTextarea
1460
1427
  [(ngModel)]="newComment"
1461
1428
  rows="2"
1462
1429
  [placeholder]="'task.detail.comment.placeholder' | translate"
1463
1430
  class="flex-1 resize-none"
1464
1431
  ></textarea>
1465
1432
  <button
1466
- pButton
1433
+ fButton
1467
1434
  [disabled]="!newComment.trim() || isSendingComment()"
1468
1435
  (click)="addComment(t.id)"
1469
1436
  >
1470
1437
  @if (isSendingComment()) {
1471
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
1438
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
1472
1439
  } @else {
1473
- <span pButtonIcon class="pi pi-send"></span>
1440
+ <ui-icon pButtonIcon name="send"></ui-icon>
1474
1441
  }
1475
1442
  </button>
1476
1443
  </div>
1477
1444
  </div>
1478
1445
  </div>
1479
1446
  }
1480
- </p-drawer>
1447
+ </f-drawer>
1481
1448
  `,
1482
1449
  }]
1483
1450
  }], ctorParameters: () => [], propDecorators: { task: [{ type: i0.Input, args: [{ isSignal: true, alias: "task", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], editTask: [{ type: i0.Output, args: ["editTask"] }] } });
@@ -1492,7 +1459,7 @@ class BoardListPageComponent {
1492
1459
  ...(ngDevMode ? [{ debugName: "isCreating" }] : /* istanbul ignore next */ []));
1493
1460
  newBoardName = '';
1494
1461
  newBoardDescription = '';
1495
- newBoardColor = '#6366f1';
1462
+ newBoardColor = BOARD_COLOR_PALETTE[0];
1496
1463
  boardColors = BOARD_COLOR_PALETTE;
1497
1464
  constructor() {
1498
1465
  this.state.loadBoards();
@@ -1504,7 +1471,7 @@ class BoardListPageComponent {
1504
1471
  this.showCreateDialog.set(false);
1505
1472
  this.newBoardName = '';
1506
1473
  this.newBoardDescription = '';
1507
- this.newBoardColor = '#6366f1';
1474
+ this.newBoardColor = BOARD_COLOR_PALETTE[0];
1508
1475
  }
1509
1476
  async createBoard() {
1510
1477
  if (!this.newBoardName.trim())
@@ -1523,8 +1490,8 @@ class BoardListPageComponent {
1523
1490
  this.isCreating.set(false);
1524
1491
  }
1525
1492
  }
1526
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BoardListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1527
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: BoardListPageComponent, isStandalone: true, selector: "tm-board-list-page", ngImport: i0, template: `
1493
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BoardListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1494
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: BoardListPageComponent, isStandalone: true, selector: "tm-board-list-page", ngImport: i0, template: `
1528
1495
  <div class="p-2 sm:p-4">
1529
1496
  <div
1530
1497
  class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
@@ -1538,10 +1505,10 @@ class BoardListPageComponent {
1538
1505
  </p>
1539
1506
  </div>
1540
1507
  <button
1541
- pButton
1508
+ fButton
1542
1509
  (click)="showCreateDialog.set(true)"
1543
1510
  >
1544
- <span pButtonIcon class="pi pi-plus"></span>
1511
+ <ui-icon pButtonIcon name="plus"></ui-icon>
1545
1512
  <span pButtonLabel>{{ 'task.manager.board.new' | translate }}</span>
1546
1513
  </button>
1547
1514
  </div>
@@ -1550,17 +1517,17 @@ class BoardListPageComponent {
1550
1517
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
1551
1518
  @for (i of [1, 2, 3, 4, 5, 6]; track i) {
1552
1519
  <div class="card !p-0 overflow-hidden">
1553
- <p-skeleton height="4px" borderRadius="0" />
1520
+ <f-skeleton height="4px" borderRadius="0" />
1554
1521
  <div class="p-5">
1555
- <p-skeleton height="18px" width="60%" class="mb-3" />
1556
- <p-skeleton height="13px" class="mb-1" />
1557
- <p-skeleton height="13px" width="70%" class="mb-5" />
1522
+ <f-skeleton height="18px" width="60%" class="mb-3" />
1523
+ <f-skeleton height="13px" class="mb-1" />
1524
+ <f-skeleton height="13px" width="70%" class="mb-5" />
1558
1525
  <div class="flex gap-5 pt-4 border-t border-surface-100">
1559
- <p-skeleton height="14px" width="55px" />
1560
- <p-skeleton height="14px" width="45px" />
1561
- <p-skeleton height="14px" width="50px" />
1526
+ <f-skeleton height="14px" width="55px" />
1527
+ <f-skeleton height="14px" width="45px" />
1528
+ <f-skeleton height="14px" width="50px" />
1562
1529
  </div>
1563
- <p-skeleton height="11px" width="100px" class="mt-2" />
1530
+ <f-skeleton height="11px" width="100px" class="mt-2" />
1564
1531
  </div>
1565
1532
  </div>
1566
1533
  }
@@ -1572,7 +1539,7 @@ class BoardListPageComponent {
1572
1539
  <span
1573
1540
  class="w-16 h-16 rounded-2xl border-2 border-dashed border-surface-300 flex items-center justify-center mb-4"
1574
1541
  >
1575
- <i class="pi pi-th-large text-2xl text-surface-400"></i>
1542
+ <ui-icon name="th-large" class="text-2xl text-surface-400"></ui-icon>
1576
1543
  </span>
1577
1544
  <p class="text-base font-semibold mb-1">
1578
1545
  {{ 'task.manager.board.empty' | translate }}
@@ -1581,11 +1548,11 @@ class BoardListPageComponent {
1581
1548
  {{ 'task.manager.board.empty.hint' | translate }}
1582
1549
  </p>
1583
1550
  <button
1584
- pButton
1551
+ fButton
1585
1552
  size="small"
1586
1553
  (click)="showCreateDialog.set(true)"
1587
1554
  >
1588
- <span pButtonIcon class="pi pi-plus"></span>
1555
+ <ui-icon pButtonIcon name="plus"></ui-icon>
1589
1556
  <span pButtonLabel>{{ 'task.manager.board.new' | translate }}</span>
1590
1557
  </button>
1591
1558
  </div>
@@ -1607,9 +1574,7 @@ class BoardListPageComponent {
1607
1574
  {{ board.name }}
1608
1575
  </h3>
1609
1576
  </div>
1610
- <i
1611
- class="pi pi-arrow-right text-xs text-surface-300 group-hover:text-primary-500 group-hover:translate-x-0.5 transition-all duration-150 flex-shrink-0 mt-1"
1612
- ></i>
1577
+ <ui-icon name="arrow-right" class="text-xs text-surface-300 group-hover:text-primary-500 group-hover:translate-x-0.5 transition-all duration-150 flex-shrink-0 mt-1"></ui-icon>
1613
1578
  </div>
1614
1579
 
1615
1580
  <p
@@ -1623,7 +1588,7 @@ class BoardListPageComponent {
1623
1588
  >
1624
1589
  <div class="flex items-center gap-4">
1625
1590
  <span class="flex items-center gap-1.5">
1626
- <i class="pi pi-users text-[11px] text-muted-color"></i>
1591
+ <ui-icon name="users" class="text-[11px] text-muted-color"></ui-icon>
1627
1592
  <span class="text-sm font-semibold">{{
1628
1593
  board.totalMembers ?? 0
1629
1594
  }}</span>
@@ -1635,7 +1600,7 @@ class BoardListPageComponent {
1635
1600
  class="w-px h-3 bg-surface-200 dark:bg-surface-600"
1636
1601
  ></span>
1637
1602
  <span class="flex items-center gap-1.5">
1638
- <i class="pi pi-list text-[11px] text-muted-color"></i>
1603
+ <ui-icon name="list" class="text-[11px] text-muted-color"></ui-icon>
1639
1604
  <span class="text-sm font-semibold">{{
1640
1605
  board.totalLists ?? 0
1641
1606
  }}</span>
@@ -1647,9 +1612,7 @@ class BoardListPageComponent {
1647
1612
  class="w-px h-3 bg-surface-200 dark:bg-surface-600"
1648
1613
  ></span>
1649
1614
  <span class="flex items-center gap-1.5">
1650
- <i
1651
- class="pi pi-check-square text-[11px] text-muted-color"
1652
- ></i>
1615
+ <ui-icon name="check-square" class="text-[11px] text-muted-color"></ui-icon>
1653
1616
  <span class="text-sm font-semibold">{{
1654
1617
  board.totalTasks ?? 0
1655
1618
  }}</span>
@@ -1661,7 +1624,7 @@ class BoardListPageComponent {
1661
1624
  <div
1662
1625
  class="flex items-center gap-1.5 text-xs text-muted-color"
1663
1626
  >
1664
- <i class="pi pi-clock text-[10px]"></i>
1627
+ <ui-icon name="clock" class="text-[10px]"></ui-icon>
1665
1628
  <span>{{ board.createdAt | date: 'MMM d, yyyy' }}</span>
1666
1629
  </div>
1667
1630
  </div>
@@ -1672,7 +1635,7 @@ class BoardListPageComponent {
1672
1635
  }
1673
1636
  </div>
1674
1637
 
1675
- <p-dialog
1638
+ <f-dialog
1676
1639
  [header]="'task.manager.board.new' | translate"
1677
1640
  [(visible)]="showCreateDialog"
1678
1641
  [modal]="true"
@@ -1685,7 +1648,7 @@ class BoardListPageComponent {
1685
1648
  <span class="text-red-500">*</span></label
1686
1649
  >
1687
1650
  <input
1688
- pInputText
1651
+ fInputText
1689
1652
  [(ngModel)]="newBoardName"
1690
1653
  [placeholder]="'task.manager.board.name.placeholder' | translate"
1691
1654
  />
@@ -1695,7 +1658,7 @@ class BoardListPageComponent {
1695
1658
  'shared.description' | translate
1696
1659
  }}</label>
1697
1660
  <textarea
1698
- pTextarea
1661
+ fTextarea
1699
1662
  [(ngModel)]="newBoardDescription"
1700
1663
  rows="2"
1701
1664
  [placeholder]="
@@ -1716,11 +1679,11 @@ class BoardListPageComponent {
1716
1679
  [class.ring-2]="newBoardColor === c"
1717
1680
  [class.ring-offset-2]="newBoardColor === c"
1718
1681
  [class.ring-surface-900]="newBoardColor === c"
1719
- [pTooltip]="c"
1682
+ [fTooltip]="c"
1720
1683
  (click)="newBoardColor = c"
1721
1684
  >
1722
1685
  @if (newBoardColor === c) {
1723
- <i class="pi pi-check text-white text-xs"></i>
1686
+ <ui-icon name="check" class="text-white text-xs"></ui-icon>
1724
1687
  }
1725
1688
  </button>
1726
1689
  }
@@ -1740,32 +1703,32 @@ class BoardListPageComponent {
1740
1703
  <ng-template #footer>
1741
1704
  <div class="flex justify-end gap-2">
1742
1705
  <button
1743
- pButton
1706
+ fButton
1744
1707
  severity="secondary"
1745
1708
  (click)="closeCreateDialog()"
1746
1709
  >
1747
1710
  <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
1748
1711
  </button>
1749
1712
  <button
1750
- pButton
1713
+ fButton
1751
1714
  (click)="createBoard()"
1752
1715
  [disabled]="isCreating()"
1753
1716
  >
1754
1717
  @if (isCreating()) {
1755
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
1718
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
1756
1719
  }
1757
1720
  <span pButtonLabel>{{ 'shared.create' | translate }}</span>
1758
1721
  </button>
1759
1722
  </div>
1760
1723
  </ng-template>
1761
- </p-dialog>
1762
- `, 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" }] });
1724
+ </f-dialog>
1725
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.SkeletonComponent, selector: "f-skeleton", inputs: ["width", "height", "borderRadius", "shape"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "directive", type: i1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "dismissableMask", "resizable", "style", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
1763
1726
  }
1764
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BoardListPageComponent, decorators: [{
1727
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BoardListPageComponent, decorators: [{
1765
1728
  type: Component,
1766
1729
  args: [{
1767
1730
  selector: 'tm-board-list-page',
1768
- imports: [AngularModule, PrimeModule, TranslatePipe],
1731
+ imports: [AngularModule, UiModule, TranslatePipe],
1769
1732
  template: `
1770
1733
  <div class="p-2 sm:p-4">
1771
1734
  <div
@@ -1780,10 +1743,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1780
1743
  </p>
1781
1744
  </div>
1782
1745
  <button
1783
- pButton
1746
+ fButton
1784
1747
  (click)="showCreateDialog.set(true)"
1785
1748
  >
1786
- <span pButtonIcon class="pi pi-plus"></span>
1749
+ <ui-icon pButtonIcon name="plus"></ui-icon>
1787
1750
  <span pButtonLabel>{{ 'task.manager.board.new' | translate }}</span>
1788
1751
  </button>
1789
1752
  </div>
@@ -1792,17 +1755,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1792
1755
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
1793
1756
  @for (i of [1, 2, 3, 4, 5, 6]; track i) {
1794
1757
  <div class="card !p-0 overflow-hidden">
1795
- <p-skeleton height="4px" borderRadius="0" />
1758
+ <f-skeleton height="4px" borderRadius="0" />
1796
1759
  <div class="p-5">
1797
- <p-skeleton height="18px" width="60%" class="mb-3" />
1798
- <p-skeleton height="13px" class="mb-1" />
1799
- <p-skeleton height="13px" width="70%" class="mb-5" />
1760
+ <f-skeleton height="18px" width="60%" class="mb-3" />
1761
+ <f-skeleton height="13px" class="mb-1" />
1762
+ <f-skeleton height="13px" width="70%" class="mb-5" />
1800
1763
  <div class="flex gap-5 pt-4 border-t border-surface-100">
1801
- <p-skeleton height="14px" width="55px" />
1802
- <p-skeleton height="14px" width="45px" />
1803
- <p-skeleton height="14px" width="50px" />
1764
+ <f-skeleton height="14px" width="55px" />
1765
+ <f-skeleton height="14px" width="45px" />
1766
+ <f-skeleton height="14px" width="50px" />
1804
1767
  </div>
1805
- <p-skeleton height="11px" width="100px" class="mt-2" />
1768
+ <f-skeleton height="11px" width="100px" class="mt-2" />
1806
1769
  </div>
1807
1770
  </div>
1808
1771
  }
@@ -1814,7 +1777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1814
1777
  <span
1815
1778
  class="w-16 h-16 rounded-2xl border-2 border-dashed border-surface-300 flex items-center justify-center mb-4"
1816
1779
  >
1817
- <i class="pi pi-th-large text-2xl text-surface-400"></i>
1780
+ <ui-icon name="th-large" class="text-2xl text-surface-400"></ui-icon>
1818
1781
  </span>
1819
1782
  <p class="text-base font-semibold mb-1">
1820
1783
  {{ 'task.manager.board.empty' | translate }}
@@ -1823,11 +1786,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1823
1786
  {{ 'task.manager.board.empty.hint' | translate }}
1824
1787
  </p>
1825
1788
  <button
1826
- pButton
1789
+ fButton
1827
1790
  size="small"
1828
1791
  (click)="showCreateDialog.set(true)"
1829
1792
  >
1830
- <span pButtonIcon class="pi pi-plus"></span>
1793
+ <ui-icon pButtonIcon name="plus"></ui-icon>
1831
1794
  <span pButtonLabel>{{ 'task.manager.board.new' | translate }}</span>
1832
1795
  </button>
1833
1796
  </div>
@@ -1849,9 +1812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1849
1812
  {{ board.name }}
1850
1813
  </h3>
1851
1814
  </div>
1852
- <i
1853
- class="pi pi-arrow-right text-xs text-surface-300 group-hover:text-primary-500 group-hover:translate-x-0.5 transition-all duration-150 flex-shrink-0 mt-1"
1854
- ></i>
1815
+ <ui-icon name="arrow-right" class="text-xs text-surface-300 group-hover:text-primary-500 group-hover:translate-x-0.5 transition-all duration-150 flex-shrink-0 mt-1"></ui-icon>
1855
1816
  </div>
1856
1817
 
1857
1818
  <p
@@ -1865,7 +1826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1865
1826
  >
1866
1827
  <div class="flex items-center gap-4">
1867
1828
  <span class="flex items-center gap-1.5">
1868
- <i class="pi pi-users text-[11px] text-muted-color"></i>
1829
+ <ui-icon name="users" class="text-[11px] text-muted-color"></ui-icon>
1869
1830
  <span class="text-sm font-semibold">{{
1870
1831
  board.totalMembers ?? 0
1871
1832
  }}</span>
@@ -1877,7 +1838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1877
1838
  class="w-px h-3 bg-surface-200 dark:bg-surface-600"
1878
1839
  ></span>
1879
1840
  <span class="flex items-center gap-1.5">
1880
- <i class="pi pi-list text-[11px] text-muted-color"></i>
1841
+ <ui-icon name="list" class="text-[11px] text-muted-color"></ui-icon>
1881
1842
  <span class="text-sm font-semibold">{{
1882
1843
  board.totalLists ?? 0
1883
1844
  }}</span>
@@ -1889,9 +1850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1889
1850
  class="w-px h-3 bg-surface-200 dark:bg-surface-600"
1890
1851
  ></span>
1891
1852
  <span class="flex items-center gap-1.5">
1892
- <i
1893
- class="pi pi-check-square text-[11px] text-muted-color"
1894
- ></i>
1853
+ <ui-icon name="check-square" class="text-[11px] text-muted-color"></ui-icon>
1895
1854
  <span class="text-sm font-semibold">{{
1896
1855
  board.totalTasks ?? 0
1897
1856
  }}</span>
@@ -1903,7 +1862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1903
1862
  <div
1904
1863
  class="flex items-center gap-1.5 text-xs text-muted-color"
1905
1864
  >
1906
- <i class="pi pi-clock text-[10px]"></i>
1865
+ <ui-icon name="clock" class="text-[10px]"></ui-icon>
1907
1866
  <span>{{ board.createdAt | date: 'MMM d, yyyy' }}</span>
1908
1867
  </div>
1909
1868
  </div>
@@ -1914,7 +1873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1914
1873
  }
1915
1874
  </div>
1916
1875
 
1917
- <p-dialog
1876
+ <f-dialog
1918
1877
  [header]="'task.manager.board.new' | translate"
1919
1878
  [(visible)]="showCreateDialog"
1920
1879
  [modal]="true"
@@ -1927,7 +1886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1927
1886
  <span class="text-red-500">*</span></label
1928
1887
  >
1929
1888
  <input
1930
- pInputText
1889
+ fInputText
1931
1890
  [(ngModel)]="newBoardName"
1932
1891
  [placeholder]="'task.manager.board.name.placeholder' | translate"
1933
1892
  />
@@ -1937,7 +1896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1937
1896
  'shared.description' | translate
1938
1897
  }}</label>
1939
1898
  <textarea
1940
- pTextarea
1899
+ fTextarea
1941
1900
  [(ngModel)]="newBoardDescription"
1942
1901
  rows="2"
1943
1902
  [placeholder]="
@@ -1958,11 +1917,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1958
1917
  [class.ring-2]="newBoardColor === c"
1959
1918
  [class.ring-offset-2]="newBoardColor === c"
1960
1919
  [class.ring-surface-900]="newBoardColor === c"
1961
- [pTooltip]="c"
1920
+ [fTooltip]="c"
1962
1921
  (click)="newBoardColor = c"
1963
1922
  >
1964
1923
  @if (newBoardColor === c) {
1965
- <i class="pi pi-check text-white text-xs"></i>
1924
+ <ui-icon name="check" class="text-white text-xs"></ui-icon>
1966
1925
  }
1967
1926
  </button>
1968
1927
  }
@@ -1982,25 +1941,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
1982
1941
  <ng-template #footer>
1983
1942
  <div class="flex justify-end gap-2">
1984
1943
  <button
1985
- pButton
1944
+ fButton
1986
1945
  severity="secondary"
1987
1946
  (click)="closeCreateDialog()"
1988
1947
  >
1989
1948
  <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
1990
1949
  </button>
1991
1950
  <button
1992
- pButton
1951
+ fButton
1993
1952
  (click)="createBoard()"
1994
1953
  [disabled]="isCreating()"
1995
1954
  >
1996
1955
  @if (isCreating()) {
1997
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
1956
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
1998
1957
  }
1999
1958
  <span pButtonLabel>{{ 'shared.create' | translate }}</span>
2000
1959
  </button>
2001
1960
  </div>
2002
1961
  </ng-template>
2003
- </p-dialog>
1962
+ </f-dialog>
2004
1963
  `,
2005
1964
  }]
2006
1965
  }], ctorParameters: () => [] });
@@ -2055,12 +2014,12 @@ class BoardViewPageComponent {
2055
2014
  ...(ngDevMode ? [{ debugName: "isSavingBoard" }] : /* istanbul ignore next */ []));
2056
2015
  newListName = '';
2057
2016
  newLabelName = '';
2058
- newLabelColor = '#6366F1';
2017
+ newLabelColor = BOARD_COLOR_PALETTE[0];
2059
2018
  selectedMemberUser = null;
2060
2019
  newMemberRole = 'MEMBER';
2061
2020
  editBoardName = '';
2062
2021
  editBoardDescription = '';
2063
- editBoardColor = '#6366F1';
2022
+ editBoardColor = BOARD_COLOR_PALETTE[0];
2064
2023
  boardColorPalette = BOARD_COLOR_PALETTE;
2065
2024
  memberRoleOptions = [
2066
2025
  { labelKey: 'task.manager.member.role.admin', value: 'ADMIN' },
@@ -2096,15 +2055,18 @@ class BoardViewPageComponent {
2096
2055
  name: task.title,
2097
2056
  }),
2098
2057
  header: this.translate('task.detail.delete'),
2099
- icon: 'pi pi-exclamation-triangle',
2058
+ icon: 'exclamation-triangle',
2100
2059
  acceptButtonStyleClass: 'p-button-danger',
2101
2060
  accept: async () => {
2102
- await this.state.deleteTask(task.id);
2103
- this.messageService.add({
2104
- severity: 'success',
2105
- summary: this.translate('shared.success'),
2106
- detail: this.translate('task.delete.success'),
2107
- });
2061
+ try {
2062
+ await this.state.deleteTask(task.id);
2063
+ this.messageService.add({
2064
+ severity: 'success',
2065
+ summary: this.translate('shared.success'),
2066
+ detail: this.translate('task.delete.success'),
2067
+ });
2068
+ }
2069
+ catch { }
2108
2070
  },
2109
2071
  });
2110
2072
  }
@@ -2220,7 +2182,7 @@ class BoardViewPageComponent {
2220
2182
  try {
2221
2183
  await this.state.addLabel(this.boardId(), this.newLabelName.trim(), this.newLabelColor);
2222
2184
  this.newLabelName = '';
2223
- this.newLabelColor = '#6366F1';
2185
+ this.newLabelColor = BOARD_COLOR_PALETTE[0];
2224
2186
  }
2225
2187
  finally {
2226
2188
  this.isAddingLabel.set(false);
@@ -2267,8 +2229,8 @@ class BoardViewPageComponent {
2267
2229
  this.isAddingList.set(false);
2268
2230
  }
2269
2231
  }
2270
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BoardViewPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2271
- 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: `
2232
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BoardViewPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2233
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: BoardViewPageComponent, isStandalone: true, selector: "tm-board-view-page", inputs: { boardId: { classPropertyName: "boardId", publicName: "boardId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
2272
2234
  <div class="flex flex-col h-full">
2273
2235
  <div class="flex flex-col">
2274
2236
  <div class="flex items-center justify-between px-5 py-2.5 gap-4">
@@ -2282,16 +2244,16 @@ class BoardViewPageComponent {
2282
2244
  {{ board.name }}
2283
2245
  </h1>
2284
2246
  <button
2285
- pButton
2247
+ fButton
2286
2248
  [text]="true"
2287
2249
  size="small"
2288
2250
  severity="secondary"
2289
2251
  class="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
2290
- [pTooltip]="'task.manager.board.edit' | translate"
2252
+ [fTooltip]="'task.manager.board.edit' | translate"
2291
2253
  tooltipPosition="bottom"
2292
2254
  (click)="openEditBoardDialog(board)"
2293
2255
  >
2294
- <span pButtonIcon class="pi pi-pencil"></span>
2256
+ <ui-icon pButtonIcon name="pencil"></ui-icon>
2295
2257
  </button>
2296
2258
  </div>
2297
2259
  @if (board.description) {
@@ -2310,23 +2272,25 @@ class BoardViewPageComponent {
2310
2272
  <div
2311
2273
  class="flex items-center -space-x-2 cursor-pointer mr-1"
2312
2274
  (click)="showMembersDialog.set(true)"
2313
- [pTooltip]="'task.manager.board.manage.members' | translate"
2275
+ [fTooltip]="'task.manager.board.manage.members' | translate"
2314
2276
  tooltipPosition="bottom"
2315
2277
  >
2316
2278
  @for (member of state.members().slice(0, 4); track member.id) {
2317
- <div
2318
- 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"
2319
- [style.background-color]="memberColor(member)"
2320
- >
2321
- {{ memberInitials(member) }}
2322
- </div>
2279
+ <f-avatar
2280
+ shape="circle"
2281
+ size="small"
2282
+ [label]="memberInitials(member)"
2283
+ [color]="memberColor(member)"
2284
+ styleClass="!border-2 !border-surface-card ring-1 ring-surface flex-shrink-0"
2285
+ />
2323
2286
  }
2324
2287
  @if (state.members().length > 4) {
2325
- <div
2326
- 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"
2327
- >
2328
- +{{ state.members().length - 4 }}
2329
- </div>
2288
+ <f-avatar
2289
+ shape="circle"
2290
+ size="small"
2291
+ [label]="'+' + (state.members().length - 4)"
2292
+ styleClass="!border-2 !border-surface-card !bg-surface-200 dark:!bg-surface-700 !text-surface-600 dark:!text-surface-300 flex-shrink-0"
2293
+ />
2330
2294
  }
2331
2295
  </div>
2332
2296
  }
@@ -2339,8 +2303,8 @@ class BoardViewPageComponent {
2339
2303
  class="flex rounded-border overflow-hidden border border-surface"
2340
2304
  >
2341
2305
  <button
2342
- pButton
2343
- [pTooltip]="'task.manager.view.board' | translate"
2306
+ fButton
2307
+ [fTooltip]="'task.manager.view.board' | translate"
2344
2308
  tooltipPosition="bottom"
2345
2309
  size="small"
2346
2310
  [severity]="viewMode() === 'board' ? 'primary' : 'secondary'"
@@ -2348,11 +2312,11 @@ class BoardViewPageComponent {
2348
2312
  class="!rounded-none !border-0"
2349
2313
  (click)="viewMode.set('board')"
2350
2314
  >
2351
- <span pButtonIcon class="pi pi-th-large"></span>
2315
+ <ui-icon pButtonIcon name="th-large"></ui-icon>
2352
2316
  </button>
2353
2317
  <button
2354
- pButton
2355
- [pTooltip]="'task.manager.view.list' | translate"
2318
+ fButton
2319
+ [fTooltip]="'task.manager.view.list' | translate"
2356
2320
  tooltipPosition="bottom"
2357
2321
  size="small"
2358
2322
  [severity]="viewMode() === 'list' ? 'primary' : 'secondary'"
@@ -2360,7 +2324,7 @@ class BoardViewPageComponent {
2360
2324
  class="!rounded-none !border-0"
2361
2325
  (click)="viewMode.set('list')"
2362
2326
  >
2363
- <span pButtonIcon class="pi pi-list"></span>
2327
+ <ui-icon pButtonIcon name="list"></ui-icon>
2364
2328
  </button>
2365
2329
  </div>
2366
2330
 
@@ -2369,28 +2333,28 @@ class BoardViewPageComponent {
2369
2333
  ></div>
2370
2334
 
2371
2335
  <button
2372
- pButton
2336
+ fButton
2373
2337
  [text]="true"
2374
2338
  severity="secondary"
2375
2339
  size="small"
2376
2340
  class="!w-8 !h-8"
2377
- [pTooltip]="'task.manager.board.manage.members' | translate"
2341
+ [fTooltip]="'task.manager.board.manage.members' | translate"
2378
2342
  tooltipPosition="bottom"
2379
2343
  (click)="showMembersDialog.set(true)"
2380
2344
  >
2381
- <span pButtonIcon class="pi pi-users"></span>
2345
+ <ui-icon pButtonIcon name="users"></ui-icon>
2382
2346
  </button>
2383
2347
  <button
2384
- pButton
2348
+ fButton
2385
2349
  [text]="true"
2386
2350
  severity="secondary"
2387
2351
  size="small"
2388
2352
  class="!w-8 !h-8"
2389
- [pTooltip]="'task.manager.board.manage.labels' | translate"
2353
+ [fTooltip]="'task.manager.board.manage.labels' | translate"
2390
2354
  tooltipPosition="bottom"
2391
2355
  (click)="showLabelsDialog.set(true)"
2392
2356
  >
2393
- <span pButtonIcon class="pi pi-tag"></span>
2357
+ <ui-icon pButtonIcon name="tag"></ui-icon>
2394
2358
  </button>
2395
2359
 
2396
2360
  @if (viewMode() === 'board') {
@@ -2398,11 +2362,11 @@ class BoardViewPageComponent {
2398
2362
  class="h-5 w-px bg-surface-300 dark:bg-surface-600 mx-0.5"
2399
2363
  ></div>
2400
2364
  <button
2401
- pButton
2365
+ fButton
2402
2366
  size="small"
2403
2367
  (click)="showAddListDialog.set(true)"
2404
2368
  >
2405
- <span pButtonIcon class="pi pi-plus"></span>
2369
+ <ui-icon pButtonIcon name="plus"></ui-icon>
2406
2370
  <span pButtonLabel>{{
2407
2371
  'task.manager.board.add.list' | translate
2408
2372
  }}</span>
@@ -2424,9 +2388,9 @@ class BoardViewPageComponent {
2424
2388
  <div class="flex gap-4 p-6 overflow-x-auto">
2425
2389
  @for (i of [1, 2, 3]; track i) {
2426
2390
  <div class="flex-shrink-0 w-72">
2427
- <p-skeleton height="36px" class="mb-3" />
2391
+ <f-skeleton height="36px" class="mb-3" />
2428
2392
  @for (j of [1, 2, 3]; track j) {
2429
- <p-skeleton height="90px" class="mb-2" />
2393
+ <f-skeleton height="90px" class="mb-2" />
2430
2394
  }
2431
2395
  </div>
2432
2396
  }
@@ -2434,7 +2398,7 @@ class BoardViewPageComponent {
2434
2398
  } @else {
2435
2399
  <div class="p-6">
2436
2400
  @for (i of [1, 2, 3, 4, 5]; track i) {
2437
- <p-skeleton height="48px" class="mb-2" />
2401
+ <f-skeleton height="48px" class="mb-2" />
2438
2402
  }
2439
2403
  </div>
2440
2404
  }
@@ -2454,15 +2418,16 @@ class BoardViewPageComponent {
2454
2418
  <div
2455
2419
  class="flex items-center gap-1 px-2.5 py-2.5 border-b border-surface"
2456
2420
  >
2457
- <i
2421
+ <ui-icon
2458
2422
  cdkDragHandle
2459
- class="pi pi-bars text-muted-color text-xs cursor-grab flex-shrink-0 px-1"
2460
- ></i>
2423
+ name="bars"
2424
+ class="text-muted-color text-xs cursor-grab flex-shrink-0 px-1"
2425
+ ></ui-icon>
2461
2426
 
2462
2427
  <div class="flex items-center gap-2 min-w-0 flex-1">
2463
2428
  @if (editingListId() === list.id) {
2464
2429
  <input
2465
- pInputText
2430
+ fInputText
2466
2431
  class="text-sm font-semibold !h-6 !py-0 !px-1 w-full"
2467
2432
  [ngModel]="editingListNameValue()"
2468
2433
  (ngModelChange)="editingListNameValue.set($event)"
@@ -2487,7 +2452,7 @@ class BoardViewPageComponent {
2487
2452
 
2488
2453
  @if (editingListId() === list.id) {
2489
2454
  <button
2490
- pButton
2455
+ fButton
2491
2456
  [text]="true"
2492
2457
  size="small"
2493
2458
  severity="success"
@@ -2495,10 +2460,10 @@ class BoardViewPageComponent {
2495
2460
  (mousedown)="$event.preventDefault()"
2496
2461
  (click)="saveRenameList(); $event.stopPropagation()"
2497
2462
  >
2498
- <span pButtonIcon class="pi pi-check"></span>
2463
+ <ui-icon pButtonIcon name="check"></ui-icon>
2499
2464
  </button>
2500
2465
  <button
2501
- pButton
2466
+ fButton
2502
2467
  [text]="true"
2503
2468
  size="small"
2504
2469
  severity="secondary"
@@ -2506,20 +2471,20 @@ class BoardViewPageComponent {
2506
2471
  (mousedown)="$event.preventDefault()"
2507
2472
  (click)="cancelRenameList(); $event.stopPropagation()"
2508
2473
  >
2509
- <span pButtonIcon class="pi pi-times"></span>
2474
+ <ui-icon pButtonIcon name="times"></ui-icon>
2510
2475
  </button>
2511
2476
  } @else {
2512
2477
  <button
2513
- pButton
2478
+ fButton
2514
2479
  [text]="true"
2515
2480
  size="small"
2516
2481
  severity="secondary"
2517
2482
  class="!w-6 !h-6 flex-shrink-0"
2518
- [pTooltip]="'task.manager.list.rename' | translate"
2483
+ [fTooltip]="'task.manager.list.rename' | translate"
2519
2484
  tooltipPosition="bottom"
2520
2485
  (click)="startRenameList(list); $event.stopPropagation()"
2521
2486
  >
2522
- <span pButtonIcon class="pi pi-pencil"></span>
2487
+ <ui-icon pButtonIcon name="pencil"></ui-icon>
2523
2488
  </button>
2524
2489
  }
2525
2490
  </div>
@@ -2555,14 +2520,14 @@ class BoardViewPageComponent {
2555
2520
 
2556
2521
  <div class="border-t border-surface p-1.5">
2557
2522
  <button
2558
- pButton
2523
+ fButton
2559
2524
  severity="secondary"
2560
2525
  [text]="true"
2561
2526
  size="small"
2562
2527
  class="w-full !justify-start"
2563
2528
  (click)="openAddTask(list)"
2564
2529
  >
2565
- <span pButtonIcon class="pi pi-plus"></span>
2530
+ <ui-icon pButtonIcon name="plus"></ui-icon>
2566
2531
  <span pButtonLabel>{{
2567
2532
  'task.manager.board.add.task' | translate
2568
2533
  }}</span>
@@ -2577,19 +2542,22 @@ class BoardViewPageComponent {
2577
2542
  <div
2578
2543
  class="w-16 h-16 rounded-2xl border-2 border-dashed border-surface flex items-center justify-center mx-auto mb-4"
2579
2544
  >
2580
- <i class="pi pi-list text-3xl text-muted-color"></i>
2545
+ <ui-icon
2546
+ name="list"
2547
+ class="text-3xl text-muted-color"
2548
+ ></ui-icon>
2581
2549
  </div>
2582
2550
  <p class="font-medium text-muted-color">
2583
2551
  {{ 'task.manager.board.list.empty' | translate }}
2584
2552
  </p>
2585
2553
  <button
2586
- pButton
2554
+ fButton
2587
2555
  severity="secondary"
2588
2556
  size="small"
2589
2557
  class="mt-3"
2590
2558
  (click)="showAddListDialog.set(true)"
2591
2559
  >
2592
- <span pButtonIcon class="pi pi-plus"></span>
2560
+ <ui-icon pButtonIcon name="plus"></ui-icon>
2593
2561
  <span pButtonLabel>{{
2594
2562
  'task.manager.board.add.list' | translate
2595
2563
  }}</span>
@@ -2602,35 +2570,34 @@ class BoardViewPageComponent {
2602
2570
  <div class="p-4 sm:p-6 flex-1 overflow-auto">
2603
2571
  <div class="card">
2604
2572
  <div class="overflow-x-auto -mx-4 sm:mx-0">
2605
- <p-table
2573
+ <f-table
2606
2574
  [value]="allTasksFlat()"
2607
2575
  [paginator]="allTasksFlat().length > 20"
2608
2576
  [rows]="20"
2609
2577
  [rowsPerPageOptions]="[10, 20, 50]"
2610
2578
  [scrollable]="true"
2611
- class="p-datatable-sm"
2612
2579
  [tableStyle]="{ 'min-width': '700px' }"
2613
2580
  >
2614
2581
  <ng-template #header>
2615
2582
  <tr>
2616
- <th pSortableColumn="title" class="min-w-[240px]">
2583
+ <th fSortableColumn="title" class="min-w-[240px]">
2617
2584
  {{ 'task.manager.table.title' | translate }}
2618
- <p-sorticon field="title" />
2585
+ <f-sorticon field="title" />
2619
2586
  </th>
2620
- <th pSortableColumn="listName" class="w-40">
2587
+ <th fSortableColumn="listName" class="w-40">
2621
2588
  {{ 'task.manager.table.list' | translate }}
2622
- <p-sorticon field="listName" />
2589
+ <f-sorticon field="listName" />
2623
2590
  </th>
2624
- <th pSortableColumn="priority" class="w-32">
2591
+ <th fSortableColumn="priority" class="w-32">
2625
2592
  {{ 'task.manager.table.priority' | translate }}
2626
- <p-sorticon field="priority" />
2593
+ <f-sorticon field="priority" />
2627
2594
  </th>
2628
2595
  <th class="w-36">
2629
2596
  {{ 'task.manager.table.assignee' | translate }}
2630
2597
  </th>
2631
- <th pSortableColumn="dueDate" class="w-32">
2598
+ <th fSortableColumn="dueDate" class="w-32">
2632
2599
  {{ 'task.manager.table.due.date' | translate }}
2633
- <p-sorticon field="dueDate" />
2600
+ <f-sorticon field="dueDate" />
2634
2601
  </th>
2635
2602
  <th class="w-[100px]">
2636
2603
  {{ 'shared.actions' | translate }}
@@ -2656,7 +2623,7 @@ class BoardViewPageComponent {
2656
2623
  </span>
2657
2624
  </td>
2658
2625
  <td>
2659
- <p-tag
2626
+ <f-tag
2660
2627
  [value]="task.priority"
2661
2628
  [severity]="prioritySeverity(task.priority)"
2662
2629
  />
@@ -2668,22 +2635,22 @@ class BoardViewPageComponent {
2668
2635
  a of task.assignees!.slice(0, 3);
2669
2636
  track a.userId
2670
2637
  ) {
2671
- <span
2672
- 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"
2673
- [style.background-color]="
2674
- memberColorById(a.userId)
2675
- "
2676
- [pTooltip]="a.userName ?? ''"
2677
- >
2678
- {{ getMemberInitials(a.userId) }}
2679
- </span>
2638
+ <f-avatar
2639
+ shape="circle"
2640
+ size="small"
2641
+ [label]="getMemberInitials(a.userId)"
2642
+ [color]="memberColorById(a.userId)"
2643
+ styleClass="!ring-surface-card flex-shrink-0"
2644
+ [fTooltip]="a.userName ?? ''"
2645
+ />
2680
2646
  }
2681
2647
  @if (task.assignees!.length > 3) {
2682
- <span
2683
- 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"
2684
- >
2685
- +{{ task.assignees!.length - 3 }}
2686
- </span>
2648
+ <f-avatar
2649
+ shape="circle"
2650
+ size="small"
2651
+ [label]="'+' + (task.assignees!.length - 3)"
2652
+ styleClass="!bg-surface-200 dark:!bg-surface-700 !text-surface-600 !ring-surface-card flex-shrink-0"
2653
+ />
2687
2654
  }
2688
2655
  </div>
2689
2656
  } @else {
@@ -2705,24 +2672,24 @@ class BoardViewPageComponent {
2705
2672
  <td>
2706
2673
  <div class="flex gap-1">
2707
2674
  <button
2708
- pButton
2675
+ fButton
2709
2676
  [text]="true"
2710
2677
  severity="secondary"
2711
2678
  size="small"
2712
- [pTooltip]="'shared.edit' | translate"
2679
+ [fTooltip]="'shared.edit' | translate"
2713
2680
  (click)="onEditTask(task)"
2714
2681
  >
2715
- <span pButtonIcon class="pi pi-pencil"></span>
2682
+ <ui-icon pButtonIcon name="pencil"></ui-icon>
2716
2683
  </button>
2717
2684
  <button
2718
- pButton
2685
+ fButton
2719
2686
  [text]="true"
2720
2687
  severity="danger"
2721
2688
  size="small"
2722
- [pTooltip]="'shared.delete' | translate"
2689
+ [fTooltip]="'shared.delete' | translate"
2723
2690
  (click)="onDeleteTask(task)"
2724
2691
  >
2725
- <span pButtonIcon class="pi pi-trash"></span>
2692
+ <ui-icon pButtonIcon name="trash"></ui-icon>
2726
2693
  </button>
2727
2694
  </div>
2728
2695
  </td>
@@ -2731,12 +2698,15 @@ class BoardViewPageComponent {
2731
2698
  <ng-template #emptymessage>
2732
2699
  <tr>
2733
2700
  <td colspan="6" class="text-center text-muted-color py-8">
2734
- <i class="pi pi-inbox text-4xl block mb-3"></i>
2701
+ <ui-icon
2702
+ name="inbox"
2703
+ class="text-4xl block mb-3"
2704
+ ></ui-icon>
2735
2705
  {{ 'task.manager.table.empty' | translate }}
2736
2706
  </td>
2737
2707
  </tr>
2738
2708
  </ng-template>
2739
- </p-table>
2709
+ </f-table>
2740
2710
  </div>
2741
2711
  </div>
2742
2712
  </div>
@@ -2759,12 +2729,12 @@ class BoardViewPageComponent {
2759
2729
  (editTask)="onEditTask($event)"
2760
2730
  />
2761
2731
 
2762
- <p-dialog
2732
+ <f-dialog
2763
2733
  [header]="'task.manager.label.manage.title' | translate"
2764
2734
  [(visible)]="showLabelsDialog"
2765
2735
  [modal]="true"
2766
2736
  [style]="{ width: '420px' }"
2767
- (onHide)="newLabelName = ''; newLabelColor = '#6366F1'"
2737
+ (onHide)="newLabelName = ''; newLabelColor = boardColorPalette[0]"
2768
2738
  >
2769
2739
  <div class="flex flex-col gap-4 py-2">
2770
2740
  <div class="flex gap-2 items-end">
@@ -2773,7 +2743,7 @@ class BoardViewPageComponent {
2773
2743
  'task.manager.label.name.label' | translate
2774
2744
  }}</label>
2775
2745
  <input
2776
- pInputText
2746
+ fInputText
2777
2747
  [(ngModel)]="newLabelName"
2778
2748
  [placeholder]="'task.manager.label.name.placeholder' | translate"
2779
2749
  />
@@ -2789,15 +2759,15 @@ class BoardViewPageComponent {
2789
2759
  />
2790
2760
  </div>
2791
2761
  <button
2792
- pButton
2762
+ fButton
2793
2763
  size="small"
2794
2764
  (click)="addLabel()"
2795
2765
  [disabled]="isAddingLabel()"
2796
2766
  >
2797
2767
  @if (isAddingLabel()) {
2798
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
2768
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
2799
2769
  } @else {
2800
- <span pButtonIcon class="pi pi-plus"></span>
2770
+ <ui-icon pButtonIcon name="plus"></ui-icon>
2801
2771
  }
2802
2772
  <span pButtonLabel>{{ 'task.manager.label.add' | translate }}</span>
2803
2773
  </button>
@@ -2821,21 +2791,21 @@ class BoardViewPageComponent {
2821
2791
  <span class="text-sm font-medium">{{ label.name }}</span>
2822
2792
  </div>
2823
2793
  <button
2824
- pButton
2794
+ fButton
2825
2795
  severity="danger"
2826
2796
  size="small"
2827
2797
  [text]="true"
2828
2798
  (click)="removeLabel(label.id)"
2829
2799
  >
2830
- <span pButtonIcon class="pi pi-trash"></span>
2800
+ <ui-icon pButtonIcon name="trash"></ui-icon>
2831
2801
  </button>
2832
2802
  </div>
2833
2803
  }
2834
2804
  </div>
2835
2805
  </div>
2836
- </p-dialog>
2806
+ </f-dialog>
2837
2807
 
2838
- <p-dialog
2808
+ <f-dialog
2839
2809
  [header]="'task.manager.member.manage.title' | translate"
2840
2810
  [(visible)]="showMembersDialog"
2841
2811
  [modal]="true"
@@ -2860,7 +2830,7 @@ class BoardViewPageComponent {
2860
2830
  <label class="text-sm font-medium">{{
2861
2831
  'task.manager.member.role.label' | translate
2862
2832
  }}</label>
2863
- <p-select
2833
+ <f-select
2864
2834
  [(ngModel)]="newMemberRole"
2865
2835
  [options]="memberRoleOptions"
2866
2836
  optionValue="value"
@@ -2875,18 +2845,18 @@ class BoardViewPageComponent {
2875
2845
  <ng-template #item let-opt>
2876
2846
  {{ opt.labelKey | translate }}
2877
2847
  </ng-template>
2878
- </p-select>
2848
+ </f-select>
2879
2849
  </div>
2880
2850
  <button
2881
- pButton
2851
+ fButton
2882
2852
  size="small"
2883
2853
  [disabled]="!selectedMemberUser || isAddingMember()"
2884
2854
  (click)="addMember()"
2885
2855
  >
2886
2856
  @if (isAddingMember()) {
2887
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
2857
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
2888
2858
  } @else {
2889
- <span pButtonIcon class="pi pi-plus"></span>
2859
+ <ui-icon pButtonIcon name="plus"></ui-icon>
2890
2860
  }
2891
2861
  <span pButtonLabel>{{
2892
2862
  'task.manager.member.add' | translate
@@ -2906,12 +2876,12 @@ class BoardViewPageComponent {
2906
2876
  class="flex items-center justify-between px-3 py-2.5 rounded-border border border-surface"
2907
2877
  >
2908
2878
  <div class="flex items-center gap-3">
2909
- <div
2910
- class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white flex-shrink-0"
2911
- [style.background-color]="memberColor(member)"
2912
- >
2913
- {{ memberInitials(member) }}
2914
- </div>
2879
+ <f-avatar
2880
+ shape="circle"
2881
+ [label]="memberInitials(member)"
2882
+ [color]="memberColor(member)"
2883
+ styleClass="!text-[11px] flex-shrink-0"
2884
+ />
2915
2885
  <div>
2916
2886
  <div class="text-sm font-medium ">
2917
2887
  {{ member.userName ?? member.userId }}
@@ -2935,13 +2905,13 @@ class BoardViewPageComponent {
2935
2905
  </span>
2936
2906
  @if (member.role !== 'OWNER') {
2937
2907
  <button
2938
- pButton
2908
+ fButton
2939
2909
  severity="danger"
2940
2910
  size="small"
2941
2911
  [text]="true"
2942
2912
  (click)="removeMember(member.userId)"
2943
2913
  >
2944
- <span pButtonIcon class="pi pi-trash"></span>
2914
+ <ui-icon pButtonIcon name="trash"></ui-icon>
2945
2915
  </button>
2946
2916
  }
2947
2917
  </div>
@@ -2949,9 +2919,9 @@ class BoardViewPageComponent {
2949
2919
  }
2950
2920
  </div>
2951
2921
  </div>
2952
- </p-dialog>
2922
+ </f-dialog>
2953
2923
 
2954
- <p-dialog
2924
+ <f-dialog
2955
2925
  [header]="'task.manager.list.new' | translate"
2956
2926
  [(visible)]="showAddListDialog"
2957
2927
  [modal]="true"
@@ -2964,7 +2934,7 @@ class BoardViewPageComponent {
2964
2934
  <span class="text-red-500">*</span>
2965
2935
  </label>
2966
2936
  <input
2967
- pInputText
2937
+ fInputText
2968
2938
  [(ngModel)]="newListName"
2969
2939
  [placeholder]="'task.manager.list.name.placeholder' | translate"
2970
2940
  />
@@ -2972,23 +2942,23 @@ class BoardViewPageComponent {
2972
2942
  <ng-template #footer>
2973
2943
  <div class="flex justify-end gap-2">
2974
2944
  <button
2975
- pButton
2945
+ fButton
2976
2946
  severity="secondary"
2977
2947
  (click)="showAddListDialog.set(false)"
2978
2948
  >
2979
2949
  <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
2980
2950
  </button>
2981
- <button pButton (click)="addList()" [disabled]="isAddingList()">
2951
+ <button fButton (click)="addList()" [disabled]="isAddingList()">
2982
2952
  @if (isAddingList()) {
2983
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
2953
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
2984
2954
  }
2985
2955
  <span pButtonLabel>{{ 'shared.create' | translate }}</span>
2986
2956
  </button>
2987
2957
  </div>
2988
2958
  </ng-template>
2989
- </p-dialog>
2959
+ </f-dialog>
2990
2960
 
2991
- <p-dialog
2961
+ <f-dialog
2992
2962
  [header]="'task.manager.board.edit' | translate"
2993
2963
  [(visible)]="showEditBoardDialog"
2994
2964
  [modal]="true"
@@ -3000,14 +2970,14 @@ class BoardViewPageComponent {
3000
2970
  {{ 'task.manager.board.name.label' | translate }}
3001
2971
  <span class="text-red-500">*</span>
3002
2972
  </label>
3003
- <input pInputText [(ngModel)]="editBoardName" />
2973
+ <input fInputText [(ngModel)]="editBoardName" />
3004
2974
  </div>
3005
2975
  <div class="flex flex-col gap-1">
3006
2976
  <label class="text-sm font-medium">{{
3007
2977
  'task.manager.board.description.label' | translate
3008
2978
  }}</label>
3009
2979
  <textarea
3010
- pTextarea
2980
+ fTextarea
3011
2981
  [(ngModel)]="editBoardDescription"
3012
2982
  [rows]="3"
3013
2983
  [placeholder]="
@@ -3043,35 +3013,35 @@ class BoardViewPageComponent {
3043
3013
  <ng-template #footer>
3044
3014
  <div class="flex justify-end gap-2">
3045
3015
  <button
3046
- pButton
3016
+ fButton
3047
3017
  severity="secondary"
3048
3018
  (click)="showEditBoardDialog.set(false)"
3049
3019
  >
3050
3020
  <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
3051
3021
  </button>
3052
3022
  <button
3053
- pButton
3023
+ fButton
3054
3024
  [disabled]="!editBoardName.trim() || isSavingBoard()"
3055
3025
  (click)="saveBoard()"
3056
3026
  >
3057
3027
  @if (isSavingBoard()) {
3058
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
3028
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
3059
3029
  }
3060
3030
  <span pButtonLabel>{{ 'shared.save' | translate }}</span>
3061
3031
  </button>
3062
3032
  </div>
3063
3033
  </ng-template>
3064
- </p-dialog>
3065
- `, 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" }] });
3034
+ </f-dialog>
3035
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.AvatarComponent, selector: "f-avatar", inputs: ["label", "icon", "image", "shape", "size", "color", "styleClass"] }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.SkeletonComponent, selector: "f-skeleton", inputs: ["width", "height", "borderRadius", "shape"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: i1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "dismissableMask", "resizable", "style", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "component", type: i1.SortIconComponent, selector: "f-sorticon", inputs: ["field"] }, { kind: "directive", type: i1.SortableColumnDirective, selector: "[fSortableColumn]", inputs: ["fSortableColumn"] }, { kind: "component", type: i1.TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "sortField", "sortOrder"], outputs: ["sortFieldChange", "sortOrderChange", "onLazyLoad", "onSort"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TaskCardComponent, selector: "tm-task-card", inputs: ["task"], outputs: ["cardClick", "editClick", "deleteClick"] }, { kind: "component", type: TaskFormDialogComponent, selector: "tm-task-form-dialog", inputs: ["visible", "task", "boardId", "listId", "members", "labels"], outputs: ["visibleChange", "saved"] }, { kind: "component", type: TaskDetailPanelComponent, selector: "tm-task-detail-panel", inputs: ["task"], outputs: ["closePanel", "editTask"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
3066
3036
  }
3067
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BoardViewPageComponent, decorators: [{
3037
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BoardViewPageComponent, decorators: [{
3068
3038
  type: Component,
3069
3039
  args: [{
3070
3040
  selector: 'tm-board-view-page',
3071
3041
  imports: [
3042
+ UiModule,
3072
3043
  DragDropModule,
3073
3044
  AngularModule,
3074
- PrimeModule,
3075
3045
  TaskCardComponent,
3076
3046
  TaskFormDialogComponent,
3077
3047
  TaskDetailPanelComponent,
@@ -3092,16 +3062,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3092
3062
  {{ board.name }}
3093
3063
  </h1>
3094
3064
  <button
3095
- pButton
3065
+ fButton
3096
3066
  [text]="true"
3097
3067
  size="small"
3098
3068
  severity="secondary"
3099
3069
  class="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
3100
- [pTooltip]="'task.manager.board.edit' | translate"
3070
+ [fTooltip]="'task.manager.board.edit' | translate"
3101
3071
  tooltipPosition="bottom"
3102
3072
  (click)="openEditBoardDialog(board)"
3103
3073
  >
3104
- <span pButtonIcon class="pi pi-pencil"></span>
3074
+ <ui-icon pButtonIcon name="pencil"></ui-icon>
3105
3075
  </button>
3106
3076
  </div>
3107
3077
  @if (board.description) {
@@ -3120,23 +3090,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3120
3090
  <div
3121
3091
  class="flex items-center -space-x-2 cursor-pointer mr-1"
3122
3092
  (click)="showMembersDialog.set(true)"
3123
- [pTooltip]="'task.manager.board.manage.members' | translate"
3093
+ [fTooltip]="'task.manager.board.manage.members' | translate"
3124
3094
  tooltipPosition="bottom"
3125
3095
  >
3126
3096
  @for (member of state.members().slice(0, 4); track member.id) {
3127
- <div
3128
- 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"
3129
- [style.background-color]="memberColor(member)"
3130
- >
3131
- {{ memberInitials(member) }}
3132
- </div>
3097
+ <f-avatar
3098
+ shape="circle"
3099
+ size="small"
3100
+ [label]="memberInitials(member)"
3101
+ [color]="memberColor(member)"
3102
+ styleClass="!border-2 !border-surface-card ring-1 ring-surface flex-shrink-0"
3103
+ />
3133
3104
  }
3134
3105
  @if (state.members().length > 4) {
3135
- <div
3136
- 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"
3137
- >
3138
- +{{ state.members().length - 4 }}
3139
- </div>
3106
+ <f-avatar
3107
+ shape="circle"
3108
+ size="small"
3109
+ [label]="'+' + (state.members().length - 4)"
3110
+ styleClass="!border-2 !border-surface-card !bg-surface-200 dark:!bg-surface-700 !text-surface-600 dark:!text-surface-300 flex-shrink-0"
3111
+ />
3140
3112
  }
3141
3113
  </div>
3142
3114
  }
@@ -3149,8 +3121,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3149
3121
  class="flex rounded-border overflow-hidden border border-surface"
3150
3122
  >
3151
3123
  <button
3152
- pButton
3153
- [pTooltip]="'task.manager.view.board' | translate"
3124
+ fButton
3125
+ [fTooltip]="'task.manager.view.board' | translate"
3154
3126
  tooltipPosition="bottom"
3155
3127
  size="small"
3156
3128
  [severity]="viewMode() === 'board' ? 'primary' : 'secondary'"
@@ -3158,11 +3130,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3158
3130
  class="!rounded-none !border-0"
3159
3131
  (click)="viewMode.set('board')"
3160
3132
  >
3161
- <span pButtonIcon class="pi pi-th-large"></span>
3133
+ <ui-icon pButtonIcon name="th-large"></ui-icon>
3162
3134
  </button>
3163
3135
  <button
3164
- pButton
3165
- [pTooltip]="'task.manager.view.list' | translate"
3136
+ fButton
3137
+ [fTooltip]="'task.manager.view.list' | translate"
3166
3138
  tooltipPosition="bottom"
3167
3139
  size="small"
3168
3140
  [severity]="viewMode() === 'list' ? 'primary' : 'secondary'"
@@ -3170,7 +3142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3170
3142
  class="!rounded-none !border-0"
3171
3143
  (click)="viewMode.set('list')"
3172
3144
  >
3173
- <span pButtonIcon class="pi pi-list"></span>
3145
+ <ui-icon pButtonIcon name="list"></ui-icon>
3174
3146
  </button>
3175
3147
  </div>
3176
3148
 
@@ -3179,28 +3151,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3179
3151
  ></div>
3180
3152
 
3181
3153
  <button
3182
- pButton
3154
+ fButton
3183
3155
  [text]="true"
3184
3156
  severity="secondary"
3185
3157
  size="small"
3186
3158
  class="!w-8 !h-8"
3187
- [pTooltip]="'task.manager.board.manage.members' | translate"
3159
+ [fTooltip]="'task.manager.board.manage.members' | translate"
3188
3160
  tooltipPosition="bottom"
3189
3161
  (click)="showMembersDialog.set(true)"
3190
3162
  >
3191
- <span pButtonIcon class="pi pi-users"></span>
3163
+ <ui-icon pButtonIcon name="users"></ui-icon>
3192
3164
  </button>
3193
3165
  <button
3194
- pButton
3166
+ fButton
3195
3167
  [text]="true"
3196
3168
  severity="secondary"
3197
3169
  size="small"
3198
3170
  class="!w-8 !h-8"
3199
- [pTooltip]="'task.manager.board.manage.labels' | translate"
3171
+ [fTooltip]="'task.manager.board.manage.labels' | translate"
3200
3172
  tooltipPosition="bottom"
3201
3173
  (click)="showLabelsDialog.set(true)"
3202
3174
  >
3203
- <span pButtonIcon class="pi pi-tag"></span>
3175
+ <ui-icon pButtonIcon name="tag"></ui-icon>
3204
3176
  </button>
3205
3177
 
3206
3178
  @if (viewMode() === 'board') {
@@ -3208,11 +3180,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3208
3180
  class="h-5 w-px bg-surface-300 dark:bg-surface-600 mx-0.5"
3209
3181
  ></div>
3210
3182
  <button
3211
- pButton
3183
+ fButton
3212
3184
  size="small"
3213
3185
  (click)="showAddListDialog.set(true)"
3214
3186
  >
3215
- <span pButtonIcon class="pi pi-plus"></span>
3187
+ <ui-icon pButtonIcon name="plus"></ui-icon>
3216
3188
  <span pButtonLabel>{{
3217
3189
  'task.manager.board.add.list' | translate
3218
3190
  }}</span>
@@ -3234,9 +3206,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3234
3206
  <div class="flex gap-4 p-6 overflow-x-auto">
3235
3207
  @for (i of [1, 2, 3]; track i) {
3236
3208
  <div class="flex-shrink-0 w-72">
3237
- <p-skeleton height="36px" class="mb-3" />
3209
+ <f-skeleton height="36px" class="mb-3" />
3238
3210
  @for (j of [1, 2, 3]; track j) {
3239
- <p-skeleton height="90px" class="mb-2" />
3211
+ <f-skeleton height="90px" class="mb-2" />
3240
3212
  }
3241
3213
  </div>
3242
3214
  }
@@ -3244,7 +3216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3244
3216
  } @else {
3245
3217
  <div class="p-6">
3246
3218
  @for (i of [1, 2, 3, 4, 5]; track i) {
3247
- <p-skeleton height="48px" class="mb-2" />
3219
+ <f-skeleton height="48px" class="mb-2" />
3248
3220
  }
3249
3221
  </div>
3250
3222
  }
@@ -3264,15 +3236,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3264
3236
  <div
3265
3237
  class="flex items-center gap-1 px-2.5 py-2.5 border-b border-surface"
3266
3238
  >
3267
- <i
3239
+ <ui-icon
3268
3240
  cdkDragHandle
3269
- class="pi pi-bars text-muted-color text-xs cursor-grab flex-shrink-0 px-1"
3270
- ></i>
3241
+ name="bars"
3242
+ class="text-muted-color text-xs cursor-grab flex-shrink-0 px-1"
3243
+ ></ui-icon>
3271
3244
 
3272
3245
  <div class="flex items-center gap-2 min-w-0 flex-1">
3273
3246
  @if (editingListId() === list.id) {
3274
3247
  <input
3275
- pInputText
3248
+ fInputText
3276
3249
  class="text-sm font-semibold !h-6 !py-0 !px-1 w-full"
3277
3250
  [ngModel]="editingListNameValue()"
3278
3251
  (ngModelChange)="editingListNameValue.set($event)"
@@ -3297,7 +3270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3297
3270
 
3298
3271
  @if (editingListId() === list.id) {
3299
3272
  <button
3300
- pButton
3273
+ fButton
3301
3274
  [text]="true"
3302
3275
  size="small"
3303
3276
  severity="success"
@@ -3305,10 +3278,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3305
3278
  (mousedown)="$event.preventDefault()"
3306
3279
  (click)="saveRenameList(); $event.stopPropagation()"
3307
3280
  >
3308
- <span pButtonIcon class="pi pi-check"></span>
3281
+ <ui-icon pButtonIcon name="check"></ui-icon>
3309
3282
  </button>
3310
3283
  <button
3311
- pButton
3284
+ fButton
3312
3285
  [text]="true"
3313
3286
  size="small"
3314
3287
  severity="secondary"
@@ -3316,20 +3289,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3316
3289
  (mousedown)="$event.preventDefault()"
3317
3290
  (click)="cancelRenameList(); $event.stopPropagation()"
3318
3291
  >
3319
- <span pButtonIcon class="pi pi-times"></span>
3292
+ <ui-icon pButtonIcon name="times"></ui-icon>
3320
3293
  </button>
3321
3294
  } @else {
3322
3295
  <button
3323
- pButton
3296
+ fButton
3324
3297
  [text]="true"
3325
3298
  size="small"
3326
3299
  severity="secondary"
3327
3300
  class="!w-6 !h-6 flex-shrink-0"
3328
- [pTooltip]="'task.manager.list.rename' | translate"
3301
+ [fTooltip]="'task.manager.list.rename' | translate"
3329
3302
  tooltipPosition="bottom"
3330
3303
  (click)="startRenameList(list); $event.stopPropagation()"
3331
3304
  >
3332
- <span pButtonIcon class="pi pi-pencil"></span>
3305
+ <ui-icon pButtonIcon name="pencil"></ui-icon>
3333
3306
  </button>
3334
3307
  }
3335
3308
  </div>
@@ -3365,14 +3338,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3365
3338
 
3366
3339
  <div class="border-t border-surface p-1.5">
3367
3340
  <button
3368
- pButton
3341
+ fButton
3369
3342
  severity="secondary"
3370
3343
  [text]="true"
3371
3344
  size="small"
3372
3345
  class="w-full !justify-start"
3373
3346
  (click)="openAddTask(list)"
3374
3347
  >
3375
- <span pButtonIcon class="pi pi-plus"></span>
3348
+ <ui-icon pButtonIcon name="plus"></ui-icon>
3376
3349
  <span pButtonLabel>{{
3377
3350
  'task.manager.board.add.task' | translate
3378
3351
  }}</span>
@@ -3387,19 +3360,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3387
3360
  <div
3388
3361
  class="w-16 h-16 rounded-2xl border-2 border-dashed border-surface flex items-center justify-center mx-auto mb-4"
3389
3362
  >
3390
- <i class="pi pi-list text-3xl text-muted-color"></i>
3363
+ <ui-icon
3364
+ name="list"
3365
+ class="text-3xl text-muted-color"
3366
+ ></ui-icon>
3391
3367
  </div>
3392
3368
  <p class="font-medium text-muted-color">
3393
3369
  {{ 'task.manager.board.list.empty' | translate }}
3394
3370
  </p>
3395
3371
  <button
3396
- pButton
3372
+ fButton
3397
3373
  severity="secondary"
3398
3374
  size="small"
3399
3375
  class="mt-3"
3400
3376
  (click)="showAddListDialog.set(true)"
3401
3377
  >
3402
- <span pButtonIcon class="pi pi-plus"></span>
3378
+ <ui-icon pButtonIcon name="plus"></ui-icon>
3403
3379
  <span pButtonLabel>{{
3404
3380
  'task.manager.board.add.list' | translate
3405
3381
  }}</span>
@@ -3412,35 +3388,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3412
3388
  <div class="p-4 sm:p-6 flex-1 overflow-auto">
3413
3389
  <div class="card">
3414
3390
  <div class="overflow-x-auto -mx-4 sm:mx-0">
3415
- <p-table
3391
+ <f-table
3416
3392
  [value]="allTasksFlat()"
3417
3393
  [paginator]="allTasksFlat().length > 20"
3418
3394
  [rows]="20"
3419
3395
  [rowsPerPageOptions]="[10, 20, 50]"
3420
3396
  [scrollable]="true"
3421
- class="p-datatable-sm"
3422
3397
  [tableStyle]="{ 'min-width': '700px' }"
3423
3398
  >
3424
3399
  <ng-template #header>
3425
3400
  <tr>
3426
- <th pSortableColumn="title" class="min-w-[240px]">
3401
+ <th fSortableColumn="title" class="min-w-[240px]">
3427
3402
  {{ 'task.manager.table.title' | translate }}
3428
- <p-sorticon field="title" />
3403
+ <f-sorticon field="title" />
3429
3404
  </th>
3430
- <th pSortableColumn="listName" class="w-40">
3405
+ <th fSortableColumn="listName" class="w-40">
3431
3406
  {{ 'task.manager.table.list' | translate }}
3432
- <p-sorticon field="listName" />
3407
+ <f-sorticon field="listName" />
3433
3408
  </th>
3434
- <th pSortableColumn="priority" class="w-32">
3409
+ <th fSortableColumn="priority" class="w-32">
3435
3410
  {{ 'task.manager.table.priority' | translate }}
3436
- <p-sorticon field="priority" />
3411
+ <f-sorticon field="priority" />
3437
3412
  </th>
3438
3413
  <th class="w-36">
3439
3414
  {{ 'task.manager.table.assignee' | translate }}
3440
3415
  </th>
3441
- <th pSortableColumn="dueDate" class="w-32">
3416
+ <th fSortableColumn="dueDate" class="w-32">
3442
3417
  {{ 'task.manager.table.due.date' | translate }}
3443
- <p-sorticon field="dueDate" />
3418
+ <f-sorticon field="dueDate" />
3444
3419
  </th>
3445
3420
  <th class="w-[100px]">
3446
3421
  {{ 'shared.actions' | translate }}
@@ -3466,7 +3441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3466
3441
  </span>
3467
3442
  </td>
3468
3443
  <td>
3469
- <p-tag
3444
+ <f-tag
3470
3445
  [value]="task.priority"
3471
3446
  [severity]="prioritySeverity(task.priority)"
3472
3447
  />
@@ -3478,22 +3453,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3478
3453
  a of task.assignees!.slice(0, 3);
3479
3454
  track a.userId
3480
3455
  ) {
3481
- <span
3482
- 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"
3483
- [style.background-color]="
3484
- memberColorById(a.userId)
3485
- "
3486
- [pTooltip]="a.userName ?? ''"
3487
- >
3488
- {{ getMemberInitials(a.userId) }}
3489
- </span>
3456
+ <f-avatar
3457
+ shape="circle"
3458
+ size="small"
3459
+ [label]="getMemberInitials(a.userId)"
3460
+ [color]="memberColorById(a.userId)"
3461
+ styleClass="!ring-surface-card flex-shrink-0"
3462
+ [fTooltip]="a.userName ?? ''"
3463
+ />
3490
3464
  }
3491
3465
  @if (task.assignees!.length > 3) {
3492
- <span
3493
- 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"
3494
- >
3495
- +{{ task.assignees!.length - 3 }}
3496
- </span>
3466
+ <f-avatar
3467
+ shape="circle"
3468
+ size="small"
3469
+ [label]="'+' + (task.assignees!.length - 3)"
3470
+ styleClass="!bg-surface-200 dark:!bg-surface-700 !text-surface-600 !ring-surface-card flex-shrink-0"
3471
+ />
3497
3472
  }
3498
3473
  </div>
3499
3474
  } @else {
@@ -3515,24 +3490,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3515
3490
  <td>
3516
3491
  <div class="flex gap-1">
3517
3492
  <button
3518
- pButton
3493
+ fButton
3519
3494
  [text]="true"
3520
3495
  severity="secondary"
3521
3496
  size="small"
3522
- [pTooltip]="'shared.edit' | translate"
3497
+ [fTooltip]="'shared.edit' | translate"
3523
3498
  (click)="onEditTask(task)"
3524
3499
  >
3525
- <span pButtonIcon class="pi pi-pencil"></span>
3500
+ <ui-icon pButtonIcon name="pencil"></ui-icon>
3526
3501
  </button>
3527
3502
  <button
3528
- pButton
3503
+ fButton
3529
3504
  [text]="true"
3530
3505
  severity="danger"
3531
3506
  size="small"
3532
- [pTooltip]="'shared.delete' | translate"
3507
+ [fTooltip]="'shared.delete' | translate"
3533
3508
  (click)="onDeleteTask(task)"
3534
3509
  >
3535
- <span pButtonIcon class="pi pi-trash"></span>
3510
+ <ui-icon pButtonIcon name="trash"></ui-icon>
3536
3511
  </button>
3537
3512
  </div>
3538
3513
  </td>
@@ -3541,12 +3516,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3541
3516
  <ng-template #emptymessage>
3542
3517
  <tr>
3543
3518
  <td colspan="6" class="text-center text-muted-color py-8">
3544
- <i class="pi pi-inbox text-4xl block mb-3"></i>
3519
+ <ui-icon
3520
+ name="inbox"
3521
+ class="text-4xl block mb-3"
3522
+ ></ui-icon>
3545
3523
  {{ 'task.manager.table.empty' | translate }}
3546
3524
  </td>
3547
3525
  </tr>
3548
3526
  </ng-template>
3549
- </p-table>
3527
+ </f-table>
3550
3528
  </div>
3551
3529
  </div>
3552
3530
  </div>
@@ -3569,12 +3547,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3569
3547
  (editTask)="onEditTask($event)"
3570
3548
  />
3571
3549
 
3572
- <p-dialog
3550
+ <f-dialog
3573
3551
  [header]="'task.manager.label.manage.title' | translate"
3574
3552
  [(visible)]="showLabelsDialog"
3575
3553
  [modal]="true"
3576
3554
  [style]="{ width: '420px' }"
3577
- (onHide)="newLabelName = ''; newLabelColor = '#6366F1'"
3555
+ (onHide)="newLabelName = ''; newLabelColor = boardColorPalette[0]"
3578
3556
  >
3579
3557
  <div class="flex flex-col gap-4 py-2">
3580
3558
  <div class="flex gap-2 items-end">
@@ -3583,7 +3561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3583
3561
  'task.manager.label.name.label' | translate
3584
3562
  }}</label>
3585
3563
  <input
3586
- pInputText
3564
+ fInputText
3587
3565
  [(ngModel)]="newLabelName"
3588
3566
  [placeholder]="'task.manager.label.name.placeholder' | translate"
3589
3567
  />
@@ -3599,15 +3577,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3599
3577
  />
3600
3578
  </div>
3601
3579
  <button
3602
- pButton
3580
+ fButton
3603
3581
  size="small"
3604
3582
  (click)="addLabel()"
3605
3583
  [disabled]="isAddingLabel()"
3606
3584
  >
3607
3585
  @if (isAddingLabel()) {
3608
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
3586
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
3609
3587
  } @else {
3610
- <span pButtonIcon class="pi pi-plus"></span>
3588
+ <ui-icon pButtonIcon name="plus"></ui-icon>
3611
3589
  }
3612
3590
  <span pButtonLabel>{{ 'task.manager.label.add' | translate }}</span>
3613
3591
  </button>
@@ -3631,21 +3609,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3631
3609
  <span class="text-sm font-medium">{{ label.name }}</span>
3632
3610
  </div>
3633
3611
  <button
3634
- pButton
3612
+ fButton
3635
3613
  severity="danger"
3636
3614
  size="small"
3637
3615
  [text]="true"
3638
3616
  (click)="removeLabel(label.id)"
3639
3617
  >
3640
- <span pButtonIcon class="pi pi-trash"></span>
3618
+ <ui-icon pButtonIcon name="trash"></ui-icon>
3641
3619
  </button>
3642
3620
  </div>
3643
3621
  }
3644
3622
  </div>
3645
3623
  </div>
3646
- </p-dialog>
3624
+ </f-dialog>
3647
3625
 
3648
- <p-dialog
3626
+ <f-dialog
3649
3627
  [header]="'task.manager.member.manage.title' | translate"
3650
3628
  [(visible)]="showMembersDialog"
3651
3629
  [modal]="true"
@@ -3670,7 +3648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3670
3648
  <label class="text-sm font-medium">{{
3671
3649
  'task.manager.member.role.label' | translate
3672
3650
  }}</label>
3673
- <p-select
3651
+ <f-select
3674
3652
  [(ngModel)]="newMemberRole"
3675
3653
  [options]="memberRoleOptions"
3676
3654
  optionValue="value"
@@ -3685,18 +3663,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3685
3663
  <ng-template #item let-opt>
3686
3664
  {{ opt.labelKey | translate }}
3687
3665
  </ng-template>
3688
- </p-select>
3666
+ </f-select>
3689
3667
  </div>
3690
3668
  <button
3691
- pButton
3669
+ fButton
3692
3670
  size="small"
3693
3671
  [disabled]="!selectedMemberUser || isAddingMember()"
3694
3672
  (click)="addMember()"
3695
3673
  >
3696
3674
  @if (isAddingMember()) {
3697
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
3675
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
3698
3676
  } @else {
3699
- <span pButtonIcon class="pi pi-plus"></span>
3677
+ <ui-icon pButtonIcon name="plus"></ui-icon>
3700
3678
  }
3701
3679
  <span pButtonLabel>{{
3702
3680
  'task.manager.member.add' | translate
@@ -3716,12 +3694,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3716
3694
  class="flex items-center justify-between px-3 py-2.5 rounded-border border border-surface"
3717
3695
  >
3718
3696
  <div class="flex items-center gap-3">
3719
- <div
3720
- class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white flex-shrink-0"
3721
- [style.background-color]="memberColor(member)"
3722
- >
3723
- {{ memberInitials(member) }}
3724
- </div>
3697
+ <f-avatar
3698
+ shape="circle"
3699
+ [label]="memberInitials(member)"
3700
+ [color]="memberColor(member)"
3701
+ styleClass="!text-[11px] flex-shrink-0"
3702
+ />
3725
3703
  <div>
3726
3704
  <div class="text-sm font-medium ">
3727
3705
  {{ member.userName ?? member.userId }}
@@ -3745,13 +3723,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3745
3723
  </span>
3746
3724
  @if (member.role !== 'OWNER') {
3747
3725
  <button
3748
- pButton
3726
+ fButton
3749
3727
  severity="danger"
3750
3728
  size="small"
3751
3729
  [text]="true"
3752
3730
  (click)="removeMember(member.userId)"
3753
3731
  >
3754
- <span pButtonIcon class="pi pi-trash"></span>
3732
+ <ui-icon pButtonIcon name="trash"></ui-icon>
3755
3733
  </button>
3756
3734
  }
3757
3735
  </div>
@@ -3759,9 +3737,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3759
3737
  }
3760
3738
  </div>
3761
3739
  </div>
3762
- </p-dialog>
3740
+ </f-dialog>
3763
3741
 
3764
- <p-dialog
3742
+ <f-dialog
3765
3743
  [header]="'task.manager.list.new' | translate"
3766
3744
  [(visible)]="showAddListDialog"
3767
3745
  [modal]="true"
@@ -3774,7 +3752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3774
3752
  <span class="text-red-500">*</span>
3775
3753
  </label>
3776
3754
  <input
3777
- pInputText
3755
+ fInputText
3778
3756
  [(ngModel)]="newListName"
3779
3757
  [placeholder]="'task.manager.list.name.placeholder' | translate"
3780
3758
  />
@@ -3782,23 +3760,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3782
3760
  <ng-template #footer>
3783
3761
  <div class="flex justify-end gap-2">
3784
3762
  <button
3785
- pButton
3763
+ fButton
3786
3764
  severity="secondary"
3787
3765
  (click)="showAddListDialog.set(false)"
3788
3766
  >
3789
3767
  <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
3790
3768
  </button>
3791
- <button pButton (click)="addList()" [disabled]="isAddingList()">
3769
+ <button fButton (click)="addList()" [disabled]="isAddingList()">
3792
3770
  @if (isAddingList()) {
3793
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
3771
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
3794
3772
  }
3795
3773
  <span pButtonLabel>{{ 'shared.create' | translate }}</span>
3796
3774
  </button>
3797
3775
  </div>
3798
3776
  </ng-template>
3799
- </p-dialog>
3777
+ </f-dialog>
3800
3778
 
3801
- <p-dialog
3779
+ <f-dialog
3802
3780
  [header]="'task.manager.board.edit' | translate"
3803
3781
  [(visible)]="showEditBoardDialog"
3804
3782
  [modal]="true"
@@ -3810,14 +3788,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3810
3788
  {{ 'task.manager.board.name.label' | translate }}
3811
3789
  <span class="text-red-500">*</span>
3812
3790
  </label>
3813
- <input pInputText [(ngModel)]="editBoardName" />
3791
+ <input fInputText [(ngModel)]="editBoardName" />
3814
3792
  </div>
3815
3793
  <div class="flex flex-col gap-1">
3816
3794
  <label class="text-sm font-medium">{{
3817
3795
  'task.manager.board.description.label' | translate
3818
3796
  }}</label>
3819
3797
  <textarea
3820
- pTextarea
3798
+ fTextarea
3821
3799
  [(ngModel)]="editBoardDescription"
3822
3800
  [rows]="3"
3823
3801
  [placeholder]="
@@ -3853,25 +3831,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
3853
3831
  <ng-template #footer>
3854
3832
  <div class="flex justify-end gap-2">
3855
3833
  <button
3856
- pButton
3834
+ fButton
3857
3835
  severity="secondary"
3858
3836
  (click)="showEditBoardDialog.set(false)"
3859
3837
  >
3860
3838
  <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
3861
3839
  </button>
3862
3840
  <button
3863
- pButton
3841
+ fButton
3864
3842
  [disabled]="!editBoardName.trim() || isSavingBoard()"
3865
3843
  (click)="saveBoard()"
3866
3844
  >
3867
3845
  @if (isSavingBoard()) {
3868
- <span pButtonIcon class="pi pi-spinner pi-spin"></span>
3846
+ <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
3869
3847
  }
3870
3848
  <span pButtonLabel>{{ 'shared.save' | translate }}</span>
3871
3849
  </button>
3872
3850
  </div>
3873
3851
  </ng-template>
3874
- </p-dialog>
3852
+ </f-dialog>
3875
3853
  `,
3876
3854
  }]
3877
3855
  }], ctorParameters: () => [], propDecorators: { boardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "boardId", required: true }] }] } });