@flusys/ng-iam 5.4.1 → 6.0.0-beta.1

package/fesm2022/{flusys-ng-iam-flusys-ng-iam-Bb39q1Bu.mjs → flusys-ng-iam-flusys-ng-iam-DzIO0zsO.mjs}

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, signal, input, output, effect, Component, computed, DestroyRef } from '@angular/core';
-import { ApiResourceService, TranslateService, PermissionValidatorService, AngularModule, PrimeModule, TranslatePipe, ROLE_ACTION_PERMISSIONS, HasPermissionDirective, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, USER_ROLE_PERMISSIONS, USER_PERMISSION_PROVIDER, UserSelectComponent, USER_ACTION_PERMISSIONS, PROFILE_PERMISSION_PROVIDER, permissionGuard, ACTION_PERMISSIONS, ROLE_PERMISSIONS, anyPermissionGuard, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
+import { ApiResourceService, TranslateService, PermissionValidatorService, AngularModule, TranslatePipe, ROLE_ACTION_PERMISSIONS, HasPermissionDirective, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, USER_ROLE_PERMISSIONS, USER_PERMISSION_PROVIDER, UserSelectComponent, USER_ACTION_PERMISSIONS, PROFILE_PERMISSION_PROVIDER, permissionGuard, ACTION_PERMISSIONS, ROLE_PERMISSIONS, anyPermissionGuard, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
 import { APP_CONFIG, getServiceUrl, BaseApiService, isCompanyFeatureEnabled } from '@flusys/ng-core';
-import { ConfirmationService, MessageService } from 'primeng/api';
+import * as i2 from '@flusys/ng-ui';
+import { ConfirmationService, MessageService, UiModule } from '@flusys/ng-ui';
 import { HttpClient } from '@angular/common/http';
 import { of, firstValueFrom, map as map$1 } from 'rxjs';
 import { tap, catchError, map } from 'rxjs/operators';
@@ -10,14 +11,7 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i2 from 'primeng/button';
-import * as i6 from 'primeng/tooltip';
-import * as i3 from 'primeng/checkbox';
-import * as i4 from 'primeng/select';
-import * as i5 from 'primeng/tag';
-import * as i7 from 'primeng/treetable';
 import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
-import * as i5$1 from 'primeng/table';
 
 /** Must match backend ActionType enum */
 var ActionType;
@@ -227,10 +221,10 @@ class RoleApiService extends ApiResourceService {
     constructor() {
         super('roles', 'iam');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RoleApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RoleApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RoleApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -257,10 +251,10 @@ class ActionApiService extends ApiResourceService {
         const iamBaseUrl = getServiceUrl(this.appConfig, 'iam');
         return this.http.post(`${iamBaseUrl}/actions/tree`, body);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ActionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ActionApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ActionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -403,11 +397,11 @@ class ActionPermissionLogicService {
         this.confirmationService.confirm({
             header: this.t('iam.logic.validation.failed'),
             message: `${this.t('iam.logic.validation.failed.message')}<br/><br/><ul class="pl-4">${errorList}</ul><br/>${this.t('iam.logic.validation.failed.prompt')}`,
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptLabel: this.t('iam.logic.auto.fix'),
             rejectLabel: this.t('shared.cancel'),
-            acceptIcon: 'pi pi-trash',
-            rejectIcon: 'pi pi-times',
+            acceptIcon: 'trash',
+            rejectIcon: 'times',
             acceptButtonStyleClass: 'p-button-warning',
             closeOnEscape: false,
             closable: false,
@@ -419,7 +413,7 @@ class ActionPermissionLogicService {
                 });
                 onUpdate(selMap);
                 this.messageService.add({
-                    severity: 'warning',
+                    severity: 'warn',
                     summary: this.t('iam.logic.invalid.actions.removed'),
                     detail: this.t('iam.logic.removed.actions.detail', {
                         count: invalidActions.length,
@@ -532,11 +526,11 @@ class ActionPermissionLogicService {
         this.confirmationService.confirm({
             header: this.t('iam.logic.missing.prerequisites'),
             message: `<strong>${sanitizedActionName}</strong> ${this.t('iam.logic.requires.conditions')}<br/><br/>${logicMessage}<br/><br/><strong>${autoSelectPrompt}</strong><br/>${this.t('iam.logic.would.you.continue')}`,
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptLabel,
             rejectLabel: this.t('shared.cancel'),
-            acceptIcon: 'pi pi-check',
-            rejectIcon: 'pi pi-times',
+            acceptIcon: 'check',
+            rejectIcon: 'times',
             closeOnEscape: false,
             closable: false,
             accept: () => {
@@ -584,13 +578,13 @@ class ActionPermissionLogicService {
         this.confirmationService.confirm({
             header: this.t('iam.logic.dependency.warning'),
             message,
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptLabel: alternatives.length > 0
                 ? this.t('iam.logic.use.alternatives')
                 : this.t('iam.logic.remove.all'),
             rejectLabel: this.t('shared.cancel'),
-            acceptIcon: 'pi pi-check',
-            rejectIcon: 'pi pi-times',
+            acceptIcon: 'check',
+            rejectIcon: 'times',
             closeOnEscape: false,
             closable: false,
             accept: () => {
@@ -794,10 +788,10 @@ class ActionPermissionLogicService {
         }
         return `${indent}${this.t('iam.logic.invalid')}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ActionPermissionLogicService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ActionPermissionLogicService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionPermissionLogicService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionPermissionLogicService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ActionPermissionLogicService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ActionPermissionLogicService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -830,10 +824,10 @@ class PermissionApiService extends BaseApiService {
     getCompanyActions(companyId) {
         return this.http.post(this.getUrl('permissions/get-company-actions'), { companyId });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -857,10 +851,10 @@ class MyPermissionsApiService {
     getMyPermissions(dto = {}) {
         return this.http.post(`${this.baseUrl}/my-permissions`, dto);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MyPermissionsApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MyPermissionsApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MyPermissionsApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MyPermissionsApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MyPermissionsApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MyPermissionsApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -870,9 +864,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class PermissionStateService {
     permissionApi = inject(MyPermissionsApiService);
     permissionValidator = inject(PermissionValidatorService);
-    _permissions = signal(null, ...(ngDevMode ? [{ debugName: "_permissions" }] : []));
+    _permissions = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_permissions" }] : /* istanbul ignore next */ []));
     permissions = this._permissions.asReadonly();
-    _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
+    _isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
     isLoading = this._isLoading.asReadonly();
     loadPermissions(dto) {
         this._isLoading.set(true);
@@ -891,10 +887,10 @@ class PermissionStateService {
     isLoaded() {
         return this._permissions() !== null && this.permissionValidator.isPermissionsLoaded();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionStateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -928,11 +924,14 @@ function createActionNode(actionId = '') {
 }
 /** Visual builder for AND/OR permission logic trees */
 class LogicBuilderComponent {
-    logic = input(null, ...(ngDevMode ? [{ debugName: "logic" }] : []));
-    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    logic = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logic" }] : /* istanbul ignore next */ []));
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
     logicChange = output();
     /** Internal builder tree state (private writable + public readonly pattern) */
-    _builderTree = signal(null, ...(ngDevMode ? [{ debugName: "_builderTree" }] : []));
+    _builderTree = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_builderTree" }] : /* istanbul ignore next */ []));
     builderLogic = this._builderTree.asReadonly();
     constructor() {
         effect(() => {
@@ -943,7 +942,7 @@ class LogicBuilderComponent {
             else if (!this._builderTree()) {
                 this._builderTree.set(toBuilderNode(logic));
             }
-        }, { allowSignalWrites: true });
+        });
     }
     initializeLogic() {
         this.updateTreeAndEmit(createGroupNode());
@@ -1010,29 +1009,33 @@ class LogicBuilderComponent {
                 .map((child) => this.removeNodeFromTree(child, targetId)),
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LogicBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LogicBuilderComponent, isStandalone: true, selector: "lib-logic-builder", inputs: { logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logicChange: "logicChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LogicBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: LogicBuilderComponent, isStandalone: true, selector: "lib-logic-builder", inputs: { logic: { classPropertyName: "logic", publicName: "logic", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logicChange: "logicChange" }, ngImport: i0, template: `
     <div class="logic-builder">
       <div class="flex justify-between items-center mb-3">
         <h4 class="text-sm font-semibold m-0">
           {{ 'iam.logic.title' | translate }}
         </h4>
         @if (!builderLogic()) {
-          <p-button
-            [label]="'iam.logic.add.logic' | translate"
-            icon="pi pi-plus"
+          <button
+            fButton
             size="small"
-            (onClick)="initializeLogic()"
-          />
+            (click)="initializeLogic()"
+          >
+            <ui-icon pButtonIcon name="plus"></ui-icon>
+            <span pButtonLabel>{{ 'iam.logic.add.logic' | translate }}</span>
+          </button>
         } @else {
-          <p-button
-            [label]="'iam.logic.clear.logic' | translate"
-            icon="pi pi-trash"
+          <button
+            fButton
             size="small"
             severity="danger"
             [outlined]="true"
-            (onClick)="clearLogic()"
-          />
+            (click)="clearLogic()"
+          >
+            <ui-icon pButtonIcon name="trash"></ui-icon>
+            <span pButtonLabel>{{ 'iam.logic.clear.logic' | translate }}</span>
+          </button>
         }
       </div>
 
@@ -1059,21 +1062,26 @@ class LogicBuilderComponent {
     <ng-template #nodeTemplate let-node let-depth="depth">
       <div
         class="p-3 border-b border-surface"
-        [ngClass]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'"
+        [class.bg-surface-0]="depth % 2 === 0"
+        [class.bg-surface-50]="depth % 2 !== 0"
       >
         <div class="flex items-center gap-3 mb-2">
-          <span class="node-type" [ngClass]="node.type">{{
-            node.type.toUpperCase()
-          }}</span>
+          <span
+            class="node-type"
+            [class.group]="node.type === 'group'"
+            [class.action]="node.type === 'action'"
+            >{{ node.type.toUpperCase() }}</span
+          >
 
           <div class="flex-1 flex items-center gap-2">
             @if (node.type === 'group') {
               <!-- Group: show operator toggle -->
               <span
                 class="operator-badge"
-                [ngClass]="node.operator === 'AND' ? 'and' : 'or'"
+                [class.and]="node.operator === 'AND'"
+                [class.or]="node.operator !== 'AND'"
                 (click)="toggleOperator(node.id)"
-                [title]="'iam.logic.click.to.toggle' | translate"
+                [fTooltip]="'iam.logic.click.to.toggle' | translate"
               >
                 {{ node.operator }}
               </span>
@@ -1086,34 +1094,30 @@ class LogicBuilderComponent {
             }
 
             @if (node.type === 'action') {
-              <!-- Action: show action selector -->
-              <select
-                class="action-select flex-1 p-2 border border-surface rounded text-sm"
+              <f-select
+                class="flex-1"
+                [options]="actions()"
+                optionLabel="name"
+                optionValue="id"
                 [ngModel]="node.actionId"
                 (ngModelChange)="updateActionId(node.id, $event)"
-              >
-                <option [value]="null">
-                  {{ 'iam.logic.select.action' | translate }} ({{
-                    'iam.logic.actions.available'
-                      | translate: { count: actions().length }
-                  }})
-                </option>
-                @for (action of actions(); track action.id) {
-                  <option [ngValue]="action.id">{{ action.name }}</option>
-                }
-              </select>
+                [placeholder]="'iam.logic.select.action' | translate"
+                [filter]="true"
+              />
             }
           </div>
 
           <div class="flex gap-1">
-            <p-button
-              icon="pi pi-trash"
+            <button
+              fButton
               [text]="true"
               severity="danger"
               size="small"
-              (onClick)="removeNode(node.id)"
-              [pTooltip]="'shared.remove' | translate"
-            />
+              (click)="removeNode(node.id)"
+              [fTooltip]="'shared.remove' | translate"
+            >
+              <ui-icon pButtonIcon name="trash"></ui-icon>
+            </button>
           </div>
         </div>
 
@@ -1142,52 +1146,60 @@ class LogicBuilderComponent {
               {{ 'iam.logic.add.condition' | translate }}
             </div>
             <div class="flex gap-2 flex-wrap">
-              <p-button
-                [label]="'iam.logic.group' | translate"
-                icon="pi pi-sitemap"
+              <button
+                fButton
                 size="small"
                 [outlined]="true"
-                (onClick)="addChildNode(node.id, 'group')"
-              />
-              <p-button
-                [label]="'iam.logic.action' | translate"
-                icon="pi pi-bolt"
+                (click)="addChildNode(node.id, 'group')"
+              >
+                <ui-icon pButtonIcon name="sitemap"></ui-icon>
+                <span pButtonLabel>{{ 'iam.logic.group' | translate }}</span>
+              </button>
+              <button
+                fButton
                 size="small"
                 severity="success"
                 [outlined]="true"
-                (onClick)="addChildNode(node.id, 'action')"
-              />
+                (click)="addChildNode(node.id, 'action')"
+              >
+                <ui-icon pButtonIcon name="bolt"></ui-icon>
+                <span pButtonLabel>{{ 'iam.logic.action' | translate }}</span>
+              </button>
             </div>
           </div>
         }
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--p-blue-100, #dbeafe);color:var(--p-blue-700, #1e40af)}.node-type.action{background-color:var(--p-green-100, #d1fae5);color:var(--p-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--p-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--p-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--p-yellow-100, #fef3c7);color:var(--p-yellow-700, #92400e)}.operator-badge.or{background-color:var(--p-indigo-100, #e0e7ff);color:var(--p-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--p-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--p-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--p-surface-0, #ffffff);color:var(--p-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--p-surface-900, #1f2937);color:var(--p-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--p-primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--f-blue-100, #dbeafe);color:var(--f-blue-700, #1e40af)}.node-type.action{background-color:var(--f-green-100, #d1fae5);color:var(--f-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--f-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--f-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--f-yellow-100, #fef3c7);color:var(--f-yellow-700, #92400e)}.operator-badge.or{background-color:var(--f-indigo-100, #e0e7ff);color:var(--f-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--f-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--f-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--f-surface-0, #ffffff);color:var(--f-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--f-surface-900, #1f2937);color:var(--f-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--f-primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.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: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LogicBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LogicBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-logic-builder', imports: [AngularModule, PrimeModule, TranslatePipe], template: `
+            args: [{ selector: 'lib-logic-builder', imports: [AngularModule, UiModule, TranslatePipe], template: `
     <div class="logic-builder">
       <div class="flex justify-between items-center mb-3">
         <h4 class="text-sm font-semibold m-0">
           {{ 'iam.logic.title' | translate }}
         </h4>
         @if (!builderLogic()) {
-          <p-button
-            [label]="'iam.logic.add.logic' | translate"
-            icon="pi pi-plus"
+          <button
+            fButton
             size="small"
-            (onClick)="initializeLogic()"
-          />
+            (click)="initializeLogic()"
+          >
+            <ui-icon pButtonIcon name="plus"></ui-icon>
+            <span pButtonLabel>{{ 'iam.logic.add.logic' | translate }}</span>
+          </button>
         } @else {
-          <p-button
-            [label]="'iam.logic.clear.logic' | translate"
-            icon="pi pi-trash"
+          <button
+            fButton
             size="small"
             severity="danger"
             [outlined]="true"
-            (onClick)="clearLogic()"
-          />
+            (click)="clearLogic()"
+          >
+            <ui-icon pButtonIcon name="trash"></ui-icon>
+            <span pButtonLabel>{{ 'iam.logic.clear.logic' | translate }}</span>
+          </button>
         }
       </div>
 
@@ -1214,21 +1226,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     <ng-template #nodeTemplate let-node let-depth="depth">
       <div
         class="p-3 border-b border-surface"
-        [ngClass]="depth % 2 === 0 ? 'bg-surface-0' : 'bg-surface-50'"
+        [class.bg-surface-0]="depth % 2 === 0"
+        [class.bg-surface-50]="depth % 2 !== 0"
       >
         <div class="flex items-center gap-3 mb-2">
-          <span class="node-type" [ngClass]="node.type">{{
-            node.type.toUpperCase()
-          }}</span>
+          <span
+            class="node-type"
+            [class.group]="node.type === 'group'"
+            [class.action]="node.type === 'action'"
+            >{{ node.type.toUpperCase() }}</span
+          >
 
           <div class="flex-1 flex items-center gap-2">
             @if (node.type === 'group') {
               <!-- Group: show operator toggle -->
               <span
                 class="operator-badge"
-                [ngClass]="node.operator === 'AND' ? 'and' : 'or'"
+                [class.and]="node.operator === 'AND'"
+                [class.or]="node.operator !== 'AND'"
                 (click)="toggleOperator(node.id)"
-                [title]="'iam.logic.click.to.toggle' | translate"
+                [fTooltip]="'iam.logic.click.to.toggle' | translate"
               >
                 {{ node.operator }}
               </span>
@@ -1241,34 +1258,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             }
 
             @if (node.type === 'action') {
-              <!-- Action: show action selector -->
-              <select
-                class="action-select flex-1 p-2 border border-surface rounded text-sm"
+              <f-select
+                class="flex-1"
+                [options]="actions()"
+                optionLabel="name"
+                optionValue="id"
                 [ngModel]="node.actionId"
                 (ngModelChange)="updateActionId(node.id, $event)"
-              >
-                <option [value]="null">
-                  {{ 'iam.logic.select.action' | translate }} ({{
-                    'iam.logic.actions.available'
-                      | translate: { count: actions().length }
-                  }})
-                </option>
-                @for (action of actions(); track action.id) {
-                  <option [ngValue]="action.id">{{ action.name }}</option>
-                }
-              </select>
+                [placeholder]="'iam.logic.select.action' | translate"
+                [filter]="true"
+              />
             }
           </div>
 
           <div class="flex gap-1">
-            <p-button
-              icon="pi pi-trash"
+            <button
+              fButton
               [text]="true"
               severity="danger"
               size="small"
-              (onClick)="removeNode(node.id)"
-              [pTooltip]="'shared.remove' | translate"
-            />
+              (click)="removeNode(node.id)"
+              [fTooltip]="'shared.remove' | translate"
+            >
+              <ui-icon pButtonIcon name="trash"></ui-icon>
+            </button>
           </div>
         </div>
 
@@ -1297,27 +1310,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               {{ 'iam.logic.add.condition' | translate }}
             </div>
             <div class="flex gap-2 flex-wrap">
-              <p-button
-                [label]="'iam.logic.group' | translate"
-                icon="pi pi-sitemap"
+              <button
+                fButton
                 size="small"
                 [outlined]="true"
-                (onClick)="addChildNode(node.id, 'group')"
-              />
-              <p-button
-                [label]="'iam.logic.action' | translate"
-                icon="pi pi-bolt"
+                (click)="addChildNode(node.id, 'group')"
+              >
+                <ui-icon pButtonIcon name="sitemap"></ui-icon>
+                <span pButtonLabel>{{ 'iam.logic.group' | translate }}</span>
+              </button>
+              <button
+                fButton
                 size="small"
                 severity="success"
                 [outlined]="true"
-                (onClick)="addChildNode(node.id, 'action')"
-              />
+                (click)="addChildNode(node.id, 'action')"
+              >
+                <ui-icon pButtonIcon name="bolt"></ui-icon>
+                <span pButtonLabel>{{ 'iam.logic.action' | translate }}</span>
+              </button>
             </div>
           </div>
         }
       </div>
     </ng-template>
-  `, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--p-blue-100, #dbeafe);color:var(--p-blue-700, #1e40af)}.node-type.action{background-color:var(--p-green-100, #d1fae5);color:var(--p-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--p-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--p-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--p-yellow-100, #fef3c7);color:var(--p-yellow-700, #92400e)}.operator-badge.or{background-color:var(--p-indigo-100, #e0e7ff);color:var(--p-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--p-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--p-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--p-surface-0, #ffffff);color:var(--p-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--p-surface-900, #1f2937);color:var(--p-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--p-primary-color, #3b82f6)}\n"] }]
+  `, styles: [":host{display:block}.node-type{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.75rem;text-transform:uppercase}.node-type.group{background-color:var(--f-blue-100, #dbeafe);color:var(--f-blue-700, #1e40af)}.node-type.action{background-color:var(--f-green-100, #d1fae5);color:var(--f-green-700, #065f46)}:host-context(.p-dark) .node-type.group{background-color:#3b82f633;color:var(--f-blue-400, #60a5fa)}:host-context(.p-dark) .node-type.action{background-color:#22c55e33;color:var(--f-green-400, #4ade80)}.operator-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;font-weight:600;font-size:.75rem;cursor:pointer;transition:opacity .2s}.operator-badge.and{background-color:var(--f-yellow-100, #fef3c7);color:var(--f-yellow-700, #92400e)}.operator-badge.or{background-color:var(--f-indigo-100, #e0e7ff);color:var(--f-indigo-700, #3730a3)}:host-context(.p-dark) .operator-badge.and{background-color:#eab30833;color:var(--f-yellow-400, #facc15)}:host-context(.p-dark) .operator-badge.or{background-color:#6366f133;color:var(--f-indigo-400, #818cf8)}.operator-badge:hover{opacity:.8}.action-select{background-color:var(--f-surface-0, #ffffff);color:var(--f-text-color, #1f2937)}:host-context(.p-dark) .action-select{background-color:var(--f-surface-900, #1f2937);color:var(--f-text-color, #f9fafb)}.action-select:focus{outline:none;border-color:var(--f-primary-color, #3b82f6)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { logic: [{ type: i0.Input, args: [{ isSignal: true, alias: "logic", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], logicChange: [{ type: i0.Output, args: ["logicChange"] }] } });
 
 function flattenTree(tree) {
@@ -1384,24 +1401,32 @@ class BaseActionSelectorComponent {
     translateAdapter = inject(TranslateService, {
         optional: true,
     });
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : []));
-    _actions = signal([], ...(ngDevMode ? [{ debugName: "_actions" }] : []));
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    saving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+    _actions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_actions" }] : /* istanbul ignore next */ []));
     actions = this._actions.asReadonly();
-    _actionsTree = signal([], ...(ngDevMode ? [{ debugName: "_actionsTree" }] : []));
+    _actionsTree = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_actionsTree" }] : /* istanbul ignore next */ []));
     actionsTree = this._actionsTree.asReadonly();
-    _selectionMap = signal({}, ...(ngDevMode ? [{ debugName: "_selectionMap" }] : []));
+    _selectionMap = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectionMap" }] : /* istanbul ignore next */ []));
     selectionMap = this._selectionMap.asReadonly();
-    _initialSelection = signal({}, ...(ngDevMode ? [{ debugName: "_initialSelection" }] : []));
+    _initialSelection = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_initialSelection" }] : /* istanbul ignore next */ []));
     initialSelection = this._initialSelection.asReadonly();
-    treeNodes = computed(() => convertActionToTreeNode(this.actionsTree()), ...(ngDevMode ? [{ debugName: "treeNodes" }] : []));
+    treeNodes = computed(() => convertActionToTreeNode(this.actionsTree()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeNodes" }] : /* istanbul ignore next */ []));
     allSelected = computed(() => {
         const selMap = this.selectionMap();
         const total = this.actions().length;
         if (total === 0)
             return false;
         return Object.values(selMap).filter((v) => v).length === total;
-    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
     hasChanges = computed(() => {
         const current = this.selectionMap();
         const initial = this.initialSelection();
@@ -1409,7 +1434,8 @@ class BaseActionSelectorComponent {
         if (currentKeys.length !== Object.keys(initial).length)
             return true;
         return currentKeys.some((key) => current[key] !== initial[key]);
-    }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChanges" }] : /* istanbul ignore next */ []));
     actionsWithUnmetPrerequisites = computed(() => {
         const selMap = this.selectionMap();
         const allActions = this.actions();
@@ -1421,19 +1447,24 @@ class BaseActionSelectorComponent {
             }
         }
         return unmetSet;
-    }, ...(ngDevMode ? [{ debugName: "actionsWithUnmetPrerequisites" }] : []));
-    invalidActionsCount = computed(() => this.actionsWithUnmetPrerequisites().size, ...(ngDevMode ? [{ debugName: "invalidActionsCount" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsWithUnmetPrerequisites" }] : /* istanbul ignore next */ []));
+    invalidActionsCount = computed(() => this.actionsWithUnmetPrerequisites().size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidActionsCount" }] : /* istanbul ignore next */ []));
     pendingAdd = computed(() => {
         const current = this.selectionMap();
         const initial = this.initialSelection();
         return this.actions().filter((a) => current[a.id] && !initial[a.id]);
-    }, ...(ngDevMode ? [{ debugName: "pendingAdd" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingAdd" }] : /* istanbul ignore next */ []));
     pendingRemove = computed(() => {
         const current = this.selectionMap();
         const initial = this.initialSelection();
         return this.actions().filter((a) => !current[a.id] && initial[a.id]);
-    }, ...(ngDevMode ? [{ debugName: "pendingRemove" }] : []));
-    canSave = computed(() => this.hasChanges() && !this.saving() && this.invalidActionsCount() === 0, ...(ngDevMode ? [{ debugName: "canSave" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingRemove" }] : /* istanbul ignore next */ []));
+    canSave = computed(() => this.hasChanges() && !this.saving() && this.invalidActionsCount() === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
     translate(key, vars) {
         return this.translateAdapter?.translate(key, vars) ?? key;
     }
@@ -1508,8 +1539,10 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
     actionApi = inject(ActionApiService);
     permissionApi = inject(PermissionApiService);
     messageService = inject(MessageService);
-    selectedRoleId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedRoleId" }] : []));
-    roles = signal([], ...(ngDevMode ? [{ debugName: "roles" }] : []));
+    selectedRoleId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedRoleId" }] : /* istanbul ignore next */ []));
+    roles = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roles" }] : /* istanbul ignore next */ []));
     loadDataAbortController = null;
     constructor() {
         super();
@@ -1605,8 +1638,8 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
             this.saving.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RoleActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RoleActionSelectorComponent, isStandalone: true, selector: "flusys-role-action-selector", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RoleActionSelectorComponent, isStandalone: true, selector: "flusys-role-action-selector", usesInheritance: true, ngImport: i0, template: `
     <div class="role-action-selector">
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -1614,7 +1647,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
             <label class="block font-semibold mb-2">{{
               'iam.permission.select.role' | translate
             }}</label>
-            <p-select
+            <f-select
               [ngModel]="selectedRoleId()"
               (ngModelChange)="selectedRoleId.set($event)"
               [options]="roles()"
@@ -1636,7 +1669,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -1657,38 +1690,47 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
-                <p-button
-                  [label]="'shared.select.all' | translate"
-                  icon="pi pi-check"
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="selectAll()"
-                />
-                <p-button
-                  [label]="'shared.deselect.all' | translate"
-                  icon="pi pi-times"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="deselectAll()"
-                />
-                <p-button
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
-                  [label]="'shared.save.changes' | translate"
-                  icon="pi pi-save"
-                  [disabled]="!canSave()"
-                  [loading]="saving()"
+                  [disabled]="!canSave() || saving()"
                   size="small"
-                  (onClick)="saveChanges()"
-                />
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
               </div>
             </div>
 
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -1707,20 +1749,19 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -1739,27 +1780,24 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                   @let tooltip = getTooltip(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="tooltip"
+                        [fTooltip]="tooltip"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -1767,7 +1805,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -1789,7 +1827,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -1797,14 +1835,14 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                     </td>
                   </tr>
                 </ng-template>
-              </p-treeTable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -1813,7 +1851,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.add' | translate }} ({{
                           pendingAdd().length
@@ -1830,7 +1868,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -1851,9 +1889,7 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.role' | translate }}
             </p>
@@ -1861,11 +1897,11 @@ class RoleActionSelectorComponent extends BaseActionSelectorComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.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: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i2.TreeTableComponent, selector: "f-treetable", inputs: ["value", "loading", "dataKey", "styleClass", "tableStyle", "scrollable"] }, { kind: "component", type: i2.TreeTableTogglerComponent, selector: "f-treetabletoggler", inputs: ["rowNode"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RoleActionSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-role-action-selector', imports: [FormsModule, PrimeModule, HasPermissionDirective, TranslatePipe], template: `
+            args: [{ selector: 'flusys-role-action-selector', imports: [FormsModule, UiModule, HasPermissionDirective, TranslatePipe], template: `
     <div class="role-action-selector">
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -1873,7 +1909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <label class="block font-semibold mb-2">{{
               'iam.permission.select.role' | translate
             }}</label>
-            <p-select
+            <f-select
               [ngModel]="selectedRoleId()"
               (ngModelChange)="selectedRoleId.set($event)"
               [options]="roles()"
@@ -1895,7 +1931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -1916,38 +1952,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
-                <p-button
-                  [label]="'shared.select.all' | translate"
-                  icon="pi pi-check"
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="selectAll()"
-                />
-                <p-button
-                  [label]="'shared.deselect.all' | translate"
-                  icon="pi pi-times"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="deselectAll()"
-                />
-                <p-button
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   *hasPermission="ROLE_ACTION_PERMISSIONS.ASSIGN"
-                  [label]="'shared.save.changes' | translate"
-                  icon="pi pi-save"
-                  [disabled]="!canSave()"
-                  [loading]="saving()"
+                  [disabled]="!canSave() || saving()"
                   size="small"
-                  (onClick)="saveChanges()"
-                />
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
               </div>
             </div>
 
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -1966,20 +2011,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -1998,27 +2042,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   @let tooltip = getTooltip(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="tooltip"
+                        [fTooltip]="tooltip"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -2026,7 +2067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -2048,7 +2089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -2056,14 +2097,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     </td>
                   </tr>
                 </ng-template>
-              </p-treeTable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -2072,7 +2113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.add' | translate }} ({{
                           pendingAdd().length
@@ -2089,7 +2130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -2110,9 +2151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.role' | translate }}
             </p>
@@ -2120,7 +2159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         }
       }
     </div>
-  `, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
+  `, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
@@ -2131,8 +2170,10 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
     messageService = inject(MessageService);
     confirmationService = inject(ConfirmationService);
     destroyRef = inject(DestroyRef);
-    selectedCompanyId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedCompanyId" }] : []));
-    companies = signal([], ...(ngDevMode ? [{ debugName: "companies" }] : []));
+    selectedCompanyId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedCompanyId" }] : /* istanbul ignore next */ []));
+    companies = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "companies" }] : /* istanbul ignore next */ []));
     loadDataAbortController = null;
     constructor() {
         super();
@@ -2246,11 +2287,11 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
         this.confirmationService.confirm({
             header: this.translate('iam.permission.prerequisite.validation.failed'),
             message: `${this.translate('iam.permission.prerequisite.error.message')}\n\n${errorList}\n\n${this.translate('iam.permission.auto.select.prompt')}`,
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptLabel: this.translate('iam.permission.auto.select.required'),
             rejectLabel: this.translate('shared.cancel'),
-            acceptIcon: 'pi pi-check',
-            rejectIcon: 'pi pi-times',
+            acceptIcon: 'check',
+            rejectIcon: 'times',
             accept: () => {
                 const selMap = { ...this.selectionMap() };
                 prerequisiteErrors.forEach((error) => {
@@ -2275,8 +2316,8 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CompanyActionSelectorComponent, isStandalone: true, selector: "flusys-company-action-selector", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CompanyActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CompanyActionSelectorComponent, isStandalone: true, selector: "flusys-company-action-selector", usesInheritance: true, ngImport: i0, template: `
     <div class="company-action-selector">
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -2284,7 +2325,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
             <label class="block font-semibold mb-2">{{
               'iam.permission.select.company' | translate
             }}</label>
-            <p-select
+            <f-select
               [ngModel]="selectedCompanyId()"
               (ngModelChange)="selectedCompanyId.set($event)"
               [options]="companies()"
@@ -2306,7 +2347,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -2327,38 +2368,47 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
-                <p-button
-                  [label]="'shared.select.all' | translate"
-                  icon="pi pi-check"
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="selectAll()"
-                />
-                <p-button
-                  [label]="'shared.deselect.all' | translate"
-                  icon="pi pi-times"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="deselectAll()"
-                />
-                <p-button
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
-                  [label]="'shared.save.changes' | translate"
-                  icon="pi pi-save"
-                  [disabled]="!canSave()"
-                  [loading]="saving()"
+                  [disabled]="!canSave() || saving()"
                   size="small"
-                  (onClick)="saveChanges()"
-                />
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
               </div>
             </div>
 
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -2377,20 +2427,19 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -2408,27 +2457,24 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                   @let hasUnmet = hasUnmetPrerequisites(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="getTooltip(rowData)"
+                        [fTooltip]="getTooltip(rowData)"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -2436,7 +2482,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -2452,7 +2498,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -2460,14 +2506,14 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                     </td>
                   </tr>
                 </ng-template>
-              </p-treeTable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -2476,7 +2522,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.whitelist' | translate }} ({{
                           pendingAdd().length
@@ -2493,7 +2539,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -2514,9 +2560,7 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.company' | translate }}
             </p>
@@ -2524,11 +2568,11 @@ class CompanyActionSelectorComponent extends BaseActionSelectorComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.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: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i2.TreeTableComponent, selector: "f-treetable", inputs: ["value", "loading", "dataKey", "styleClass", "tableStyle", "scrollable"] }, { kind: "component", type: i2.TreeTableTogglerComponent, selector: "f-treetabletoggler", inputs: ["rowNode"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CompanyActionSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CompanyActionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'flusys-company-action-selector', imports: [FormsModule, PrimeModule, HasPermissionDirective, TranslatePipe], template: `
+            args: [{ selector: 'flusys-company-action-selector', imports: [UiModule, FormsModule, HasPermissionDirective, TranslatePipe], template: `
     <div class="company-action-selector">
       <div class="mb-4">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -2536,7 +2580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <label class="block font-semibold mb-2">{{
               'iam.permission.select.company' | translate
             }}</label>
-            <p-select
+            <f-select
               [ngModel]="selectedCompanyId()"
               (ngModelChange)="selectedCompanyId.set($event)"
               [options]="companies()"
@@ -2558,7 +2602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -2579,38 +2623,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
-                <p-button
-                  [label]="'shared.select.all' | translate"
-                  icon="pi pi-check"
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="selectAll()"
-                />
-                <p-button
-                  [label]="'shared.deselect.all' | translate"
-                  icon="pi pi-times"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="deselectAll()"
-                />
-                <p-button
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   *hasPermission="COMPANY_ACTION_PERMISSIONS.ASSIGN"
-                  [label]="'shared.save.changes' | translate"
-                  icon="pi pi-save"
-                  [disabled]="!canSave()"
-                  [loading]="saving()"
+                  [disabled]="!canSave() || saving()"
                   size="small"
-                  (onClick)="saveChanges()"
-                />
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
               </div>
             </div>
 
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -2629,20 +2682,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -2660,27 +2712,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   @let hasUnmet = hasUnmetPrerequisites(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="getTooltip(rowData)"
+                        [fTooltip]="getTooltip(rowData)"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -2688,7 +2737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -2704,7 +2753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -2712,14 +2761,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     </td>
                   </tr>
                 </ng-template>
-              </p-treeTable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -2728,7 +2777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.whitelist' | translate }} ({{
                           pendingAdd().length
@@ -2745,7 +2794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -2766,9 +2815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.company' | translate }}
             </p>
@@ -2776,7 +2823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         }
       }
     </div>
-  `, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
+  `, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -2825,28 +2872,38 @@ class UserRoleSelectorComponent {
         return this.translateAdapter?.translate(key, vars) ?? key;
     }
     // State - User/Branch Selection
-    selectedUserId = signal(null, ...(ngDevMode ? [{ debugName: "selectedUserId" }] : []));
-    selectedBranchId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : []));
-    branches = signal([], ...(ngDevMode ? [{ debugName: "branches" }] : []));
+    selectedUserId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedUserId" }] : /* istanbul ignore next */ []));
+    selectedBranchId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : /* istanbul ignore next */ []));
+    branches = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "branches" }] : /* istanbul ignore next */ []));
     // State - Loading/Saving
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : []));
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    saving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
     // State - Roles (Business Logic)
-    _roles = signal([], ...(ngDevMode ? [{ debugName: "_roles" }] : []));
+    _roles = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_roles" }] : /* istanbul ignore next */ []));
     roles = this._roles.asReadonly();
     // State - Selection
-    _selectionMap = signal({}, ...(ngDevMode ? [{ debugName: "_selectionMap" }] : []));
+    _selectionMap = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectionMap" }] : /* istanbul ignore next */ []));
     selectionMap = this._selectionMap.asReadonly();
-    _initialSelection = signal({}, ...(ngDevMode ? [{ debugName: "_initialSelection" }] : []));
+    _initialSelection = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_initialSelection" }] : /* istanbul ignore next */ []));
     initialSelection = this._initialSelection.asReadonly();
     // Computed - UI Flags
-    showBranchSelector = computed(() => isCompanyFeatureEnabled(this.appConfig) === true, ...(ngDevMode ? [{ debugName: "showBranchSelector" }] : []));
+    showBranchSelector = computed(() => isCompanyFeatureEnabled(this.appConfig) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showBranchSelector" }] : /* istanbul ignore next */ []));
     filteredBranches = computed(() => {
         const currentCompanyId = this.companyContext.currentCompanyInfo()?.id || undefined;
         if (!currentCompanyId)
             return this.branches();
         return this.branches().filter((b) => b.companyId === currentCompanyId);
-    }, ...(ngDevMode ? [{ debugName: "filteredBranches" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredBranches" }] : /* istanbul ignore next */ []));
     // Computed - Selection State
     allSelected = computed(() => {
         const selMap = this.selectionMap();
@@ -2855,7 +2912,8 @@ class UserRoleSelectorComponent {
             return false;
         const selected = Object.values(selMap).filter((v) => v).length;
         return selected === total;
-    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
     // Computed - Change Detection
     hasChanges = computed(() => {
         const current = this.selectionMap();
@@ -2865,24 +2923,28 @@ class UserRoleSelectorComponent {
         if (currentKeys.length !== initialKeys.length)
             return true;
         return currentKeys.some((key) => current[key] !== initial[key]);
-    }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChanges" }] : /* istanbul ignore next */ []));
     // Computed - Pending Changes
     pendingAdd = computed(() => {
         const current = this.selectionMap();
         const initial = this.initialSelection();
         const allRoles = this.roles();
         return allRoles.filter((role) => current[role.id] && !initial[role.id]);
-    }, ...(ngDevMode ? [{ debugName: "pendingAdd" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingAdd" }] : /* istanbul ignore next */ []));
     pendingRemove = computed(() => {
         const current = this.selectionMap();
         const initial = this.initialSelection();
         const allRoles = this.roles();
         return allRoles.filter((role) => !current[role.id] && initial[role.id]);
-    }, ...(ngDevMode ? [{ debugName: "pendingRemove" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingRemove" }] : /* istanbul ignore next */ []));
     // Computed - Save Button State
     canSave = computed(() => {
         return this.hasChanges() && !this.saving();
-    }, ...(ngDevMode ? [{ debugName: "canSave" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
     constructor() {
         // Effect: Load user branches and data when user changes
         effect(() => {
@@ -3081,15 +3143,15 @@ class UserRoleSelectorComponent {
         this._selectionMap.set({});
         this._initialSelection.set({});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserRoleSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UserRoleSelectorComponent, isStandalone: true, selector: "flusys-user-role-selector", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserRoleSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: UserRoleSelectorComponent, isStandalone: true, selector: "flusys-user-role-selector", ngImport: i0, template: `
     <div class="user-role-selector">
       <!-- User and Branch Selectors -->
       <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
           <div>
             <label class="block font-semibold mb-2">
-              <i class="pi pi-user mr-2 text-primary"></i>
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
               {{ 'iam.permission.select.user' | translate }}
             </label>
             <lib-user-select
@@ -3105,10 +3167,10 @@ class UserRoleSelectorComponent {
           @if (showBranchSelector()) {
             <div>
               <label class="block font-semibold mb-2">
-                <i class="pi pi-building mr-2 text-primary"></i>
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
                 {{ 'iam.permission.select.branch' | translate }}
               </label>
-              <p-select
+              <f-select
                 [ngModel]="selectedBranchId()"
                 (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
@@ -3124,18 +3186,18 @@ class UserRoleSelectorComponent {
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
                     <div class="flex items-center gap-2">
-                      <i class="pi pi-building text-primary"></i>
+                      <ui-icon name="building" class="text-primary"></ui-icon>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
                   <div class="flex items-center gap-2">
-                    <i class="pi pi-building text-muted-color"></i>
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
-              </p-select>
+              </f-select>
               <small class="text-muted-color block mt-1">
                 {{
                   (filteredBranches().length !== 1
@@ -3155,7 +3217,7 @@ class UserRoleSelectorComponent {
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -3177,37 +3239,46 @@ class UserRoleSelectorComponent {
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
-                <p-button
-                  [label]="'shared.select.all' | translate"
-                  icon="pi pi-check"
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="selectAll()"
-                />
-                <p-button
-                  [label]="'shared.deselect.all' | translate"
-                  icon="pi pi-times"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="deselectAll()"
-                />
-                <p-button
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
-                  [label]="'shared.save.changes' | translate"
-                  icon="pi pi-save"
-                  [disabled]="!canSave()"
-                  [loading]="saving()"
+                  [disabled]="!canSave() || saving()"
                   size="small"
-                  (onClick)="saveChanges()"
-                />
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
               </div>
             </div>
 
             <!-- Role Table -->
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-table
+              <f-table
                 [value]="roles()"
                 [rows]="10"
                 [paginator]="roles().length > 10"
@@ -3217,17 +3288,16 @@ class UserRoleSelectorComponent {
                 [currentPageReportTemplate]="
                   'iam.pagination.roles.template' | translate
                 "
-                styleClass="p-datatable-sm"
                 [tableStyle]="{ 'min-width': '35rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th style="width: 3rem">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -3243,11 +3313,11 @@ class UserRoleSelectorComponent {
                 <ng-template #body let-role>
                   <tr>
                     <td>
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[role.id]"
                         [binary]="true"
                         (ngModelChange)="onRoleToggle(role, $event)"
-                        [pTooltip]="getTooltip(role)"
+                        [fTooltip]="getTooltip(role)"
                         tooltipPosition="top"
                       />
                     </td>
@@ -3262,7 +3332,7 @@ class UserRoleSelectorComponent {
                   <tr>
                     <td colspan="4" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.roles' | translate }}
                       } @else {
                         {{ 'iam.permission.no.roles.available' | translate }}
@@ -3270,7 +3340,7 @@ class UserRoleSelectorComponent {
                     </td>
                   </tr>
                 </ng-template>
-              </p-table>
+              </f-table>
             </div>
           </div>
 
@@ -3278,7 +3348,7 @@ class UserRoleSelectorComponent {
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -3287,7 +3357,7 @@ class UserRoleSelectorComponent {
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.assign' | translate }} ({{
                           pendingAdd().length
@@ -3304,7 +3374,7 @@ class UserRoleSelectorComponent {
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -3325,9 +3395,7 @@ class UserRoleSelectorComponent {
 
         @if (!loading() && roles().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.roles.for.user' | translate }}
             </p>
@@ -3335,14 +3403,14 @@ class UserRoleSelectorComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.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: "component", type: i2.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: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserRoleSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserRoleSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'flusys-user-role-selector', imports: [
                         CommonModule,
                         FormsModule,
-                        PrimeModule,
+                        UiModule,
                         HasPermissionDirective,
                         UserSelectComponent,
                         TranslatePipe,
@@ -3353,7 +3421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
           <div>
             <label class="block font-semibold mb-2">
-              <i class="pi pi-user mr-2 text-primary"></i>
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
               {{ 'iam.permission.select.user' | translate }}
             </label>
             <lib-user-select
@@ -3369,10 +3437,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           @if (showBranchSelector()) {
             <div>
               <label class="block font-semibold mb-2">
-                <i class="pi pi-building mr-2 text-primary"></i>
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
                 {{ 'iam.permission.select.branch' | translate }}
               </label>
-              <p-select
+              <f-select
                 [ngModel]="selectedBranchId()"
                 (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
@@ -3388,18 +3456,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
                     <div class="flex items-center gap-2">
-                      <i class="pi pi-building text-primary"></i>
+                      <ui-icon name="building" class="text-primary"></ui-icon>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
                   <div class="flex items-center gap-2">
-                    <i class="pi pi-building text-muted-color"></i>
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
-              </p-select>
+              </f-select>
               <small class="text-muted-color block mt-1">
                 {{
                   (filteredBranches().length !== 1
@@ -3419,7 +3487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <div
             class="surface-card p-5 rounded-border shadow-sm flex justify-center"
           >
-            <i class="pi pi-spin pi-spinner text-primary text-5xl"></i>
+            <ui-icon name="loader-circle" spin class="text-primary text-5xl"></ui-icon>
           </div>
         }
 
@@ -3441,37 +3509,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
-                <p-button
-                  [label]="'shared.select.all' | translate"
-                  icon="pi pi-check"
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="selectAll()"
-                />
-                <p-button
-                  [label]="'shared.deselect.all' | translate"
-                  icon="pi pi-times"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="deselectAll()"
-                />
-                <p-button
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
-                  [label]="'shared.save.changes' | translate"
-                  icon="pi pi-save"
-                  [disabled]="!canSave()"
-                  [loading]="saving()"
+                  [disabled]="!canSave() || saving()"
                   size="small"
-                  (onClick)="saveChanges()"
-                />
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
               </div>
             </div>
 
             <!-- Role Table -->
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-table
+              <f-table
                 [value]="roles()"
                 [rows]="10"
                 [paginator]="roles().length > 10"
@@ -3481,17 +3558,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 [currentPageReportTemplate]="
                   'iam.pagination.roles.template' | translate
                 "
-                styleClass="p-datatable-sm"
                 [tableStyle]="{ 'min-width': '35rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th style="width: 3rem">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -3507,11 +3583,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 <ng-template #body let-role>
                   <tr>
                     <td>
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[role.id]"
                         [binary]="true"
                         (ngModelChange)="onRoleToggle(role, $event)"
-                        [pTooltip]="getTooltip(role)"
+                        [fTooltip]="getTooltip(role)"
                         tooltipPosition="top"
                       />
                     </td>
@@ -3526,7 +3602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   <tr>
                     <td colspan="4" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.roles' | translate }}
                       } @else {
                         {{ 'iam.permission.no.roles.available' | translate }}
@@ -3534,7 +3610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     </td>
                   </tr>
                 </ng-template>
-              </p-table>
+              </f-table>
             </div>
           </div>
 
@@ -3542,7 +3618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -3551,7 +3627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.assign' | translate }} ({{
                           pendingAdd().length
@@ -3568,7 +3644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -3589,9 +3665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         @if (!loading() && roles().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.roles.for.user' | translate }}
             </p>
@@ -3610,17 +3684,22 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
     actionApi = inject(ActionApiService);
     permissionApi = inject(PermissionApiService);
     messageService = inject(MessageService);
-    selectedUserId = signal(null, ...(ngDevMode ? [{ debugName: "selectedUserId" }] : []));
-    selectedBranchId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : []));
-    branches = signal([], ...(ngDevMode ? [{ debugName: "branches" }] : []));
-    isCompanyFeatureActive = computed(() => isCompanyFeatureEnabled(this.appConfig) === true, ...(ngDevMode ? [{ debugName: "isCompanyFeatureActive" }] : []));
+    selectedUserId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedUserId" }] : /* istanbul ignore next */ []));
+    selectedBranchId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : /* istanbul ignore next */ []));
+    branches = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "branches" }] : /* istanbul ignore next */ []));
+    isCompanyFeatureActive = computed(() => isCompanyFeatureEnabled(this.appConfig) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCompanyFeatureActive" }] : /* istanbul ignore next */ []));
     showBranchSelector = this.isCompanyFeatureActive;
     filteredBranches = computed(() => {
         const currentCompanyId = this.companyContext.currentCompanyInfo()?.id || undefined;
         if (!currentCompanyId)
             return this.branches();
         return this.branches().filter((b) => b.companyId === currentCompanyId);
-    }, ...(ngDevMode ? [{ debugName: "filteredBranches" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredBranches" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         effect(() => {
@@ -3740,14 +3819,14 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
             this.saving.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UserActionSelectorComponent, isStandalone: true, selector: "flusys-user-action-selector", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserActionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: UserActionSelectorComponent, isStandalone: true, selector: "flusys-user-action-selector", usesInheritance: true, ngImport: i0, template: `
     <div class="user-action-selector">
       <div class="surface-card p-4 rounded-border mb-4 shadow-sm">
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
           <div>
             <label class="block font-semibold mb-2">
-              <i class="pi pi-user mr-2 text-primary"></i>
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
               {{ 'iam.permission.select.user' | translate }}
             </label>
             <lib-user-select
@@ -3763,10 +3842,10 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
           @if (showBranchSelector()) {
             <div>
               <label class="block font-semibold mb-2">
-                <i class="pi pi-building mr-2 text-primary"></i>
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
                 {{ 'iam.permission.select.branch' | translate }}
               </label>
-              <p-select
+              <f-select
                 [ngModel]="selectedBranchId()"
                 (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
@@ -3782,18 +3861,18 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
                     <div class="flex items-center gap-2">
-                      <i class="pi pi-building text-primary"></i>
+                      <ui-icon name="building" class="text-primary"></ui-icon>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
                   <div class="flex items-center gap-2">
-                    <i class="pi pi-building text-muted-color"></i>
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
-              </p-select>
+              </f-select>
               <small class="text-muted-color block mt-1">
                 {{
                   (filteredBranches().length !== 1
@@ -3810,7 +3889,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
       @if (selectedUserId()) {
         @if (loading()) {
           <div class="flex justify-center p-5">
-            <i class="pi pi-spin pi-spinner text-4xl"></i>
+            <ui-icon name="loader-circle" spin class="text-4xl"></ui-icon>
           </div>
         }
 
@@ -3831,38 +3910,47 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
-                <p-button
-                  [label]="'shared.select.all' | translate"
-                  icon="pi pi-check"
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="selectAll()"
-                />
-                <p-button
-                  [label]="'shared.deselect.all' | translate"
-                  icon="pi pi-times"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="deselectAll()"
-                />
-                <p-button
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
-                  [label]="'shared.save.changes' | translate"
-                  icon="pi pi-save"
-                  [disabled]="!canSave()"
-                  [loading]="saving()"
+                  [disabled]="!canSave() || saving()"
                   size="small"
-                  (onClick)="saveChanges()"
-                />
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
               </div>
             </div>
 
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -3881,20 +3969,19 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -3913,27 +4000,24 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                   @let tooltip = getTooltip(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="tooltip"
+                        [fTooltip]="tooltip"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -3941,7 +4025,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -3957,7 +4041,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -3965,14 +4049,14 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                     </td>
                   </tr>
                 </ng-template>
-              </p-treeTable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -3981,7 +4065,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.assign' | translate }} ({{
                           pendingAdd().length
@@ -3998,7 +4082,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -4019,9 +4103,7 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.user' | translate }}
             </p>
@@ -4029,13 +4111,13 @@ class UserActionSelectorComponent extends BaseActionSelectorComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i7.TreeTableToggler, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: ["rowNode"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i2.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: i2.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i2.TreeTableComponent, selector: "f-treetable", inputs: ["value", "loading", "dataKey", "styleClass", "tableStyle", "scrollable"] }, { kind: "component", type: i2.TreeTableTogglerComponent, selector: "f-treetabletoggler", inputs: ["rowNode"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserActionSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserActionSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'flusys-user-action-selector', imports: [
                         FormsModule,
-                        PrimeModule,
+                        UiModule,
                         HasPermissionDirective,
                         UserSelectComponent,
                         TranslatePipe,
@@ -4045,7 +4127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
           <div>
             <label class="block font-semibold mb-2">
-              <i class="pi pi-user mr-2 text-primary"></i>
+              <ui-icon name="user" class="mr-2 text-primary"></ui-icon>
               {{ 'iam.permission.select.user' | translate }}
             </label>
             <lib-user-select
@@ -4061,10 +4143,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           @if (showBranchSelector()) {
             <div>
               <label class="block font-semibold mb-2">
-                <i class="pi pi-building mr-2 text-primary"></i>
+                <ui-icon name="building" class="mr-2 text-primary"></ui-icon>
                 {{ 'iam.permission.select.branch' | translate }}
               </label>
-              <p-select
+              <f-select
                 [ngModel]="selectedBranchId()"
                 (ngModelChange)="selectedBranchId.set($event)"
                 [options]="filteredBranches()"
@@ -4080,18 +4162,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 <ng-template #selectedItem let-branch>
                   @if (branch) {
                     <div class="flex items-center gap-2">
-                      <i class="pi pi-building text-primary"></i>
+                      <ui-icon name="building" class="text-primary"></ui-icon>
                       <span class="font-semibold">{{ branch.name }}</span>
                     </div>
                   }
                 </ng-template>
                 <ng-template #item let-branch>
                   <div class="flex items-center gap-2">
-                    <i class="pi pi-building text-muted-color"></i>
+                    <ui-icon name="building" class="text-muted-color"></ui-icon>
                     <span>{{ branch.name }}</span>
                   </div>
                 </ng-template>
-              </p-select>
+              </f-select>
               <small class="text-muted-color block mt-1">
                 {{
                   (filteredBranches().length !== 1
@@ -4108,7 +4190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       @if (selectedUserId()) {
         @if (loading()) {
           <div class="flex justify-center p-5">
-            <i class="pi pi-spin pi-spinner text-4xl"></i>
+            <ui-icon name="loader-circle" spin class="text-4xl"></ui-icon>
           </div>
         }
 
@@ -4129,38 +4211,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 </p>
               </div>
               <div class="flex flex-wrap gap-2">
-                <p-button
-                  [label]="'shared.select.all' | translate"
-                  icon="pi pi-check"
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="selectAll()"
-                />
-                <p-button
-                  [label]="'shared.deselect.all' | translate"
-                  icon="pi pi-times"
+                  (click)="selectAll()"
+                >
+                  <ui-icon pButtonIcon name="check"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.select.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   [outlined]="true"
                   size="small"
                   severity="secondary"
-                  (onClick)="deselectAll()"
-                />
-                <p-button
+                  (click)="deselectAll()"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                  <span pButtonLabel>{{ 'shared.deselect.all' | translate }}</span>
+                </button>
+                <button
+                  fButton
                   *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
-                  [label]="'shared.save.changes' | translate"
-                  icon="pi pi-save"
-                  [disabled]="!canSave()"
-                  [loading]="saving()"
+                  [disabled]="!canSave() || saving()"
                   size="small"
-                  (onClick)="saveChanges()"
-                />
+                  (click)="saveChanges()"
+                >
+                  @if (saving()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  } @else {
+                    <ui-icon pButtonIcon name="save"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'shared.save.changes' | translate }}</span>
+                </button>
               </div>
             </div>
 
             @if (invalidActionsCount() > 0) {
               <div class="validation-warning rounded-border p-3 mb-4">
                 <div class="flex items-start gap-2">
-                  <i class="pi pi-exclamation-triangle text-xl"></i>
+                  <ui-icon name="exclamation-triangle" class="text-xl"></ui-icon>
                   <div class="flex-1">
                     <span class="font-semibold"
                       >{{ 'iam.validation.warning.title' | translate }}:</span
@@ -4179,20 +4270,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             }
 
             <div class="overflow-x-auto -mx-4 sm:mx-0">
-              <p-treeTable
+              <f-treetable
                 [value]="treeNodes()"
                 dataKey="id"
-                class="p-treetable-sm"
                 [tableStyle]="{ 'min-width': '50rem' }"
               >
                 <ng-template #header>
                   <tr>
                     <th class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="allSelected()"
                         [binary]="true"
                         (ngModelChange)="toggleAll()"
-                        [pTooltip]="'shared.select.deselect.all' | translate"
+                        [fTooltip]="'shared.select.deselect.all' | translate"
                         tooltipPosition="top"
                       />
                     </th>
@@ -4211,27 +4301,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   @let tooltip = getTooltip(rowData);
                   <tr [class.highlight-warning]="hasUnmet">
                     <td class="w-12">
-                      <p-checkbox
+                      <f-checkbox
                         [ngModel]="selectionMap()[rowData.id]"
                         [binary]="true"
                         (ngModelChange)="onActionToggle(rowData, $event)"
-                        [pTooltip]="tooltip"
+                        [fTooltip]="tooltip"
                         tooltipPosition="top"
                       />
                     </td>
                     <td>
-                      <p-treeTableToggler [rowNode]="rowNode" />
+                      <f-treetabletoggler [rowNode]="rowNode" />
                       <span class="inline-flex items-center gap-2">
                         {{ rowData.name }}
                         @if (hasUnmet) {
-                          <i
-                            class="pi pi-exclamation-triangle text-orange-500"
-                            [pTooltip]="
+                          <ui-icon name="exclamation-triangle" class="text-orange-500" [fTooltip]="
                               'iam.validation.unmet.prerequisites.tooltip'
                                 | translate
                             "
-                            tooltipPosition="top"
-                          ></i>
+                            tooltipPosition="top"></ui-icon>
                         }
                       </span>
                     </td>
@@ -4239,7 +4326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       {{ rowData.code || '-' }}
                     </td>
                     <td>
-                      <p-tag
+                      <f-tag
                         [value]="rowData.actionType"
                         [severity]="
                           rowData.actionType === 'backend' ? 'info' : 'success'
@@ -4255,7 +4342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   <tr>
                     <td colspan="5" class="text-center p-4 text-muted-color">
                       @if (loading()) {
-                        <i class="pi pi-spin pi-spinner"></i>
+                        <ui-icon name="loader-circle" spin></ui-icon>
                         {{ 'shared.loading.actions' | translate }}
                       } @else {
                         {{ 'iam.permission.no.actions.available' | translate }}
@@ -4263,14 +4350,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     </td>
                   </tr>
                 </ng-template>
-              </p-treeTable>
+              </f-treetable>
             </div>
           </div>
 
           @if (hasChanges()) {
             <div class="border border-surface rounded-border p-3 mt-4">
               <div class="flex items-center gap-2 mb-3">
-                <i class="pi pi-info-circle text-primary"></i>
+                <ui-icon name="info-circle" class="text-primary"></ui-icon>
                 <span class="font-bold">{{
                   'shared.pending.changes' | translate
                 }}</span>
@@ -4279,7 +4366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 @if (pendingAdd().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-plus-circle text-green-500"></i>
+                      <ui-icon name="plus-circle" class="text-green-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.assign' | translate }} ({{
                           pendingAdd().length
@@ -4296,7 +4383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 @if (pendingRemove().length > 0) {
                   <div>
                     <div class="flex items-center gap-2 mb-2">
-                      <i class="pi pi-minus-circle text-red-500"></i>
+                      <ui-icon name="minus-circle" class="text-red-500"></ui-icon>
                       <strong class="text-sm"
                         >{{ 'shared.to.remove' | translate }} ({{
                           pendingRemove().length
@@ -4317,9 +4404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         @if (!loading() && actions().length === 0) {
           <div class="surface-card p-5 rounded-border shadow-sm text-center">
-            <i
-              class="pi pi-info-circle text-muted-color mb-3 block text-5xl"
-            ></i>
+            <ui-icon name="info-circle" class="text-muted-color mb-3 block text-5xl"></ui-icon>
             <p class="text-muted-color m-0">
               {{ 'iam.permission.no.actions.for.user' | translate }}
             </p>
@@ -4327,7 +4412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         }
       }
     </div>
-  `, styles: [":host{display:block}.validation-warning{background-color:var(--p-yellow-50, #fefce8);border-left:4px solid var(--p-yellow-500, #eab308);color:var(--p-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--p-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--p-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
+  `, styles: [":host{display:block}.validation-warning{background-color:var(--f-yellow-50, #fefce8);border-left:4px solid var(--f-yellow-500, #eab308);color:var(--f-yellow-700, #a16207)}:host-context(.p-dark) .validation-warning{background-color:#eab3081a;color:var(--f-yellow-400, #facc15)}:host ::ng-deep tr.highlight-warning{background-color:var(--f-red-50, rgba(239, 68, 68, .1))!important}:host-context(.p-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
         }], ctorParameters: () => [] });
 
 // Logic Builder Component
@@ -4377,10 +4462,10 @@ class ProfilePermissionProviderAdapter {
             })),
         })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePermissionProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePermissionProviderAdapter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProfilePermissionProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProfilePermissionProviderAdapter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePermissionProviderAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProfilePermissionProviderAdapter, decorators: [{
             type: Injectable
         }] });
 
@@ -4403,7 +4488,7 @@ const IAM_ROUTES = [
     {
         path: '',
         resolve: { translations: resolveTranslationModule({ modules: ['iam'], fallbackMessages: { ...IAM_MESSAGES, ...SHARED_MESSAGES } }) },
-        loadComponent: () => import('./flusys-ng-iam-iam-container.component-DAiS1Mtk.mjs').then((m) => m.IamContainerComponent),
+        loadComponent: () => import('./flusys-ng-iam-iam-container.component-D0m8u6nu.mjs').then((m) => m.IamContainerComponent),
         children: [
             // Actions Management
             {
@@ -4412,15 +4497,15 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-BJ-tu6vu.mjs').then((m) => m.ActionListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-B1hUE4lD.mjs').then((m) => m.ActionListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-BQJkl9pU.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-DTJT8Dc-.mjs').then((m) => m.ActionFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-BQJkl9pU.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-DTJT8Dc-.mjs').then((m) => m.ActionFormPageComponent),
                     },
                 ],
             },
@@ -4431,15 +4516,15 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-CNOsO-gH.mjs').then((m) => m.RoleListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-BcS9_ysT.mjs').then((m) => m.RoleListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-CX8LxsdO.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-DrUQ0taO.mjs').then((m) => m.RoleFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-CX8LxsdO.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-DrUQ0taO.mjs').then((m) => m.RoleFormPageComponent),
                     },
                 ],
             },
@@ -4454,7 +4539,7 @@ const IAM_ROUTES = [
                         COMPANY_ACTION_PERMISSIONS.READ,
                     ]),
                 ],
-                loadComponent: () => import('./flusys-ng-iam-permission-page.component-D4IHueFW.mjs').then((m) => m.PermissionPageComponent),
+                loadComponent: () => import('./flusys-ng-iam-permission-page.component-rcijgKmE.mjs').then((m) => m.PermissionPageComponent),
             },
             // Default redirect to actions
             {
@@ -4473,4 +4558,4 @@ const IAM_ROUTES = [
  */
 
 export { ActionApiService as A, CompanyActionSelectorComponent as C, IAM_MESSAGES as I, LogicBuilderComponent as L, MAX_DROPDOWN_ITEMS as M, PermissionApiService as P, RoleApiService as R, UserRoleSelectorComponent as U, ActionType as a, RoleActionSelectorComponent as b, convertActionToTreeNode as c, UserActionSelectorComponent as d, ActionPermissionLogicService as e, IAM_ROUTES as f, MyPermissionsApiService as g, PermissionStateService as h, ProfilePermissionProviderAdapter as i, provideIamProviders as p };
-//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-Bb39q1Bu.mjs.map
+//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-DzIO0zsO.mjs.map