@flusys/ng-iam 8.0.0-beta.1 → 8.0.0

package/fesm2022/{flusys-ng-iam-flusys-ng-iam--WniMPhV.mjs → flusys-ng-iam-flusys-ng-iam-CjLr3bfY.mjs}

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Service, inject, signal, input, output, effect, Component, computed, DestroyRef, viewChild } from '@angular/core';
-import { ApiResourceService, TranslateService, PermissionValidatorService, TranslatePipe, ROLE_ACTION_PERMISSIONS, HasPermissionDirective, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, USER_ROLE_PERMISSIONS, USER_PERMISSION_PROVIDER, UserSelectComponent, USER_ACTION_PERMISSIONS, PROFILE_PERMISSION_PROVIDER, ACTION_PERMISSIONS, ROLE_PERMISSIONS, permissionGuard, anyPermissionGuard, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
+import { ApiResourceService, TranslateService, PermissionValidatorService, TranslatePipe, ROLE_ACTION_PERMISSIONS, HasPermissionDirective, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, USER_ROLE_PERMISSIONS, USER_PERMISSION_PROVIDER, UserSelectComponent, USER_ACTION_PERMISSIONS, USER_PROVIDER, PROFILE_PERMISSION_PROVIDER, ACTION_PERMISSIONS, ROLE_PERMISSIONS, permissionGuard, anyPermissionGuard, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
 import { APP_CONFIG, getServiceUrl, BaseApiService, isCompanyFeatureEnabled, getPermissionMode } from '@flusys/ng-core';
-import { ConfirmationService, MessageService, FButtonDirective, SelectComponent, TooltipDirective, UiIconComponent, CheckboxComponent, TagComponent, TreeTableComponent, TreeTableTogglerComponent, TableComponent } from '@flusys/ng-ui';
+import { ConfirmationService, MessageService, FButtonDirective, SelectComponent, TooltipDirective, UiIconComponent, CheckboxComponent, TagComponent, TreeTableComponent, TreeTableTogglerComponent, TableComponent, DialogComponent, ProgressSpinnerComponent } 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';
@@ -83,6 +83,11 @@ const IAM_MESSAGES = {
     'iam.action.type.backend': 'Backend',
     'iam.action.type.frontend': 'Frontend',
     'iam.action.type.both': 'Both',
+    // components/role-permitted-users-dialog.component.ts, components/action-permitted-users-dialog.component.ts
+    'iam.permission.view.users': 'View Users',
+    'iam.permission.no.users': 'No users found',
+    'iam.permission.remove': 'Remove Access',
+    'iam.permission.remove.confirm': 'Remove access for {{name}}?',
     'iam.action.delete.title': 'Delete Action',
     // pages/action/action-form-page.component.ts
     'iam.action.edit': 'Edit Action',
@@ -831,6 +836,14 @@ class PermissionApiService extends BaseApiService {
     getRoleActions(roleId) {
         return this.http.post(this.getUrl('permissions/get-role-actions'), { roleId });
     }
+    /** Reverse lookup: users assigned to a role */
+    getRoleUsers(roleId) {
+        return this.http.post(this.getUrl('permissions/get-role-users'), { roleId });
+    }
+    /** Reverse lookup: users directly assigned an action */
+    getActionUsers(actionId) {
+        return this.http.post(this.getUrl('permissions/get-action-users'), { actionId });
+    }
     assignCompanyActions(data) {
         return this.http.post(this.getUrl('permissions/company-actions/assign'), data);
     }
@@ -4696,6 +4709,530 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
   `, styles: [":host{display:block}.empty-state-icon{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background-color:var(--f-primary-50, rgba(59, 130, 246, .08))}:host-context(.app-dark) .empty-state-icon{background-color:#60a5fa1f}.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(.app-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(.app-dark) ::ng-deep tr.highlight-warning{background-color:#ef444426!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { userSelectRef: [{ type: i0.ViewChild, args: ['userSelect', { isSignal: true }] }] } });
 
+/**
+ * Read-only viewer for users assigned to a role, with a remove-only action
+ * per user. Assigning new users stays on the user-centric
+ * `UserRoleSelectorComponent` flow — this dialog intentionally has no "add"
+ * affordance. Since IAM stays independent of the auth package, user display
+ * info is resolved via the `USER_PROVIDER` injection token rather than a
+ * direct join.
+ */
+class RolePermittedUsersDialogComponent {
+    USER_ROLE_PERMISSIONS = USER_ROLE_PERMISSIONS;
+    permissionApi = inject(PermissionApiService);
+    userProvider = inject(USER_PROVIDER);
+    confirmationService = inject(ConfirmationService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    t(key, params) {
+        return this.translateAdapter?.translate(key, params) ?? key;
+    }
+    visible = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    role = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    closed = output();
+    isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    isRemoving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRemoving" }] : /* istanbul ignore next */ []));
+    users = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "users" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (this.visible() && this.role()) {
+                this.loadUsers();
+            }
+        });
+    }
+    async loadUsers() {
+        const role = this.role();
+        if (!role)
+            return;
+        this.isLoading.set(true);
+        try {
+            const response = await firstValueFrom(this.permissionApi.getRoleUsers(role.id));
+            const rows = response.data ?? [];
+            const userIds = rows.map((r) => r.userId);
+            const userInfoMap = await this.resolveUserInfo(userIds);
+            this.users.set(rows.map((r) => {
+                const info = userInfoMap.get(r.userId);
+                return {
+                    id: r.id,
+                    userId: r.userId,
+                    userName: info?.name ?? r.userId,
+                    userEmail: info?.email ?? '',
+                };
+            }));
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    async resolveUserInfo(userIds) {
+        if (userIds.length === 0 || !this.userProvider.getUsersByIds) {
+            return new Map();
+        }
+        try {
+            const response = await firstValueFrom(this.userProvider.getUsersByIds(userIds));
+            return new Map((response.data ?? []).map((u) => [u.id, u]));
+        }
+        catch {
+            return new Map();
+        }
+    }
+    onRemove(user) {
+        const role = this.role();
+        if (!role)
+            return;
+        this.confirmationService.confirm({
+            message: this.t('iam.permission.remove.confirm', { name: user.userName }),
+            header: this.t('iam.permission.remove'),
+            icon: 'exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: async () => {
+                this.isRemoving.set(true);
+                try {
+                    const response = await firstValueFrom(this.permissionApi.assignUserRoles({
+                        userId: user.userId,
+                        items: [{ id: role.id, action: 'remove' }],
+                    }));
+                    if (response.success) {
+                        this.users.update((list) => list.filter((u) => u.id !== user.id));
+                        this.messageService.add({
+                            severity: 'success',
+                            summary: this.t('shared.success'),
+                            detail: response?.messageKey
+                                ? this.t(response.messageKey, response.messageVariables)
+                                : (response?.message ?? ''),
+                        });
+                    }
+                }
+                catch {
+                    // Error toast handled by global interceptor
+                }
+                finally {
+                    this.isRemoving.set(false);
+                }
+            },
+        });
+    }
+    onClose() {
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: RolePermittedUsersDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: RolePermittedUsersDialogComponent, isStandalone: true, selector: "flusys-role-permitted-users-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: `
+    <f-dialog
+      [visible]="visible()"
+      [modal]="true"
+      [closable]="true"
+      [breakpoints]="{ '960px': '90vw', '640px': '95vw' }"
+      [style]="{ width: '50vw', maxWidth: '600px' }"
+      [header]="'iam.permission.view.users' | translate"
+      (onHide)="onClose()"
+    >
+      <div class="mb-4">
+        <p class="text-sm text-muted-color">
+          {{ 'iam.role.name' | translate }}:
+          <strong>{{ role()?.name }}</strong>
+        </p>
+      </div>
+
+      @if (isLoading()) {
+        <div class="flex justify-center items-center py-8">
+          <f-progressspinner />
+        </div>
+      } @else {
+        <div class="flex flex-col gap-3">
+          @for (user of users(); track user.id) {
+            <div
+              class="flex items-center justify-between p-3 border border-surface rounded"
+            >
+              <div>
+                <div class="font-semibold">{{ user.userName }}</div>
+                <div class="text-sm text-muted-color">{{ user.userEmail }}</div>
+              </div>
+              <button
+                fButton
+                *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
+                [text]="true"
+                severity="danger"
+                size="small"
+                [disabled]="isRemoving()"
+                [fTooltip]="'shared.remove' | translate"
+                (click)="onRemove(user)"
+              >
+                <ui-icon pButtonIcon name="trash"></ui-icon>
+              </button>
+            </div>
+          } @empty {
+            <div class="text-center py-4 text-muted-color">
+              {{ 'iam.permission.no.users' | translate }}
+            </div>
+          }
+        </div>
+      }
+
+      <ng-template #footer>
+        <button
+          fButton
+          severity="secondary"
+          [outlined]="true"
+          (click)="onClose()"
+        >
+          <span pButtonLabel>{{ 'shared.close' | translate }}</span>
+        </button>
+      </ng-template>
+    </f-dialog>
+  `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "closeOnEscape", "dismissableMask", "resizable", "draggable", "maximizable", "blockScroll", "returnFocusOnClose", "position", "style", "styleClass", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide", "onMaximize"] }, { kind: "directive", type: FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "f-progressspinner", inputs: ["size", "strokeWidth", "animationDuration", "styleClass", "ariaLabel"] }, { kind: "directive", type: TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: RolePermittedUsersDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'flusys-role-permitted-users-dialog',
+                    imports: [
+                        DialogComponent,
+                        FButtonDirective,
+                        ProgressSpinnerComponent,
+                        TooltipDirective,
+                        UiIconComponent,
+                        HasPermissionDirective,
+                        TranslatePipe,
+                    ],
+                    template: `
+    <f-dialog
+      [visible]="visible()"
+      [modal]="true"
+      [closable]="true"
+      [breakpoints]="{ '960px': '90vw', '640px': '95vw' }"
+      [style]="{ width: '50vw', maxWidth: '600px' }"
+      [header]="'iam.permission.view.users' | translate"
+      (onHide)="onClose()"
+    >
+      <div class="mb-4">
+        <p class="text-sm text-muted-color">
+          {{ 'iam.role.name' | translate }}:
+          <strong>{{ role()?.name }}</strong>
+        </p>
+      </div>
+
+      @if (isLoading()) {
+        <div class="flex justify-center items-center py-8">
+          <f-progressspinner />
+        </div>
+      } @else {
+        <div class="flex flex-col gap-3">
+          @for (user of users(); track user.id) {
+            <div
+              class="flex items-center justify-between p-3 border border-surface rounded"
+            >
+              <div>
+                <div class="font-semibold">{{ user.userName }}</div>
+                <div class="text-sm text-muted-color">{{ user.userEmail }}</div>
+              </div>
+              <button
+                fButton
+                *hasPermission="USER_ROLE_PERMISSIONS.ASSIGN"
+                [text]="true"
+                severity="danger"
+                size="small"
+                [disabled]="isRemoving()"
+                [fTooltip]="'shared.remove' | translate"
+                (click)="onRemove(user)"
+              >
+                <ui-icon pButtonIcon name="trash"></ui-icon>
+              </button>
+            </div>
+          } @empty {
+            <div class="text-center py-4 text-muted-color">
+              {{ 'iam.permission.no.users' | translate }}
+            </div>
+          }
+        </div>
+      }
+
+      <ng-template #footer>
+        <button
+          fButton
+          severity="secondary"
+          [outlined]="true"
+          (click)="onClose()"
+        >
+          <span pButtonLabel>{{ 'shared.close' | translate }}</span>
+        </button>
+      </ng-template>
+    </f-dialog>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: true }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: true }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Read-only viewer for users directly assigned an action, with a remove-only
+ * action per user. Assigning new users stays on the user-centric
+ * `UserActionSelectorComponent` flow — this dialog intentionally has no
+ * "add" affordance. Since IAM stays independent of the auth package, user
+ * display info is resolved via the `USER_PROVIDER` injection token rather
+ * than a direct join.
+ */
+class ActionPermittedUsersDialogComponent {
+    USER_ACTION_PERMISSIONS = USER_ACTION_PERMISSIONS;
+    permissionApi = inject(PermissionApiService);
+    userProvider = inject(USER_PROVIDER);
+    confirmationService = inject(ConfirmationService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    t(key, params) {
+        return this.translateAdapter?.translate(key, params) ?? key;
+    }
+    visible = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    action = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+    closed = output();
+    isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    isRemoving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRemoving" }] : /* istanbul ignore next */ []));
+    users = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "users" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (this.visible() && this.action()) {
+                this.loadUsers();
+            }
+        });
+    }
+    async loadUsers() {
+        const action = this.action();
+        if (!action)
+            return;
+        this.isLoading.set(true);
+        try {
+            const response = await firstValueFrom(this.permissionApi.getActionUsers(action.id));
+            const rows = response.data ?? [];
+            const userIds = rows.map((r) => r.userId);
+            const userInfoMap = await this.resolveUserInfo(userIds);
+            this.users.set(rows.map((r) => {
+                const info = userInfoMap.get(r.userId);
+                return {
+                    id: r.id,
+                    userId: r.userId,
+                    userName: info?.name ?? r.userId,
+                    userEmail: info?.email ?? '',
+                };
+            }));
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    async resolveUserInfo(userIds) {
+        if (userIds.length === 0 || !this.userProvider.getUsersByIds) {
+            return new Map();
+        }
+        try {
+            const response = await firstValueFrom(this.userProvider.getUsersByIds(userIds));
+            return new Map((response.data ?? []).map((u) => [u.id, u]));
+        }
+        catch {
+            return new Map();
+        }
+    }
+    onRemove(user) {
+        const action = this.action();
+        if (!action)
+            return;
+        this.confirmationService.confirm({
+            message: this.t('iam.permission.remove.confirm', { name: user.userName }),
+            header: this.t('iam.permission.remove'),
+            icon: 'exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: async () => {
+                this.isRemoving.set(true);
+                try {
+                    const response = await firstValueFrom(this.permissionApi.assignUserActions({
+                        userId: user.userId,
+                        items: [{ id: action.id, action: 'remove' }],
+                    }));
+                    if (response.success) {
+                        this.users.update((list) => list.filter((u) => u.id !== user.id));
+                        this.messageService.add({
+                            severity: 'success',
+                            summary: this.t('shared.success'),
+                            detail: response?.messageKey
+                                ? this.t(response.messageKey, response.messageVariables)
+                                : (response?.message ?? ''),
+                        });
+                    }
+                }
+                catch {
+                    // Error toast handled by global interceptor
+                }
+                finally {
+                    this.isRemoving.set(false);
+                }
+            },
+        });
+    }
+    onClose() {
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ActionPermittedUsersDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ActionPermittedUsersDialogComponent, isStandalone: true, selector: "flusys-action-permitted-users-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: `
+    <f-dialog
+      [visible]="visible()"
+      [modal]="true"
+      [closable]="true"
+      [breakpoints]="{ '960px': '90vw', '640px': '95vw' }"
+      [style]="{ width: '50vw', maxWidth: '600px' }"
+      [header]="'iam.permission.view.users' | translate"
+      (onHide)="onClose()"
+    >
+      <div class="mb-4">
+        <p class="text-sm text-muted-color">
+          {{ 'iam.action.name' | translate }}:
+          <strong>{{ action()?.name }}</strong>
+        </p>
+      </div>
+
+      @if (isLoading()) {
+        <div class="flex justify-center items-center py-8">
+          <f-progressspinner />
+        </div>
+      } @else {
+        <div class="flex flex-col gap-3">
+          @for (user of users(); track user.id) {
+            <div
+              class="flex items-center justify-between p-3 border border-surface rounded"
+            >
+              <div>
+                <div class="font-semibold">{{ user.userName }}</div>
+                <div class="text-sm text-muted-color">{{ user.userEmail }}</div>
+              </div>
+              <button
+                fButton
+                *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
+                [text]="true"
+                severity="danger"
+                size="small"
+                [disabled]="isRemoving()"
+                [fTooltip]="'shared.remove' | translate"
+                (click)="onRemove(user)"
+              >
+                <ui-icon pButtonIcon name="trash"></ui-icon>
+              </button>
+            </div>
+          } @empty {
+            <div class="text-center py-4 text-muted-color">
+              {{ 'iam.permission.no.users' | translate }}
+            </div>
+          }
+        </div>
+      }
+
+      <ng-template #footer>
+        <button
+          fButton
+          severity="secondary"
+          [outlined]="true"
+          (click)="onClose()"
+        >
+          <span pButtonLabel>{{ 'shared.close' | translate }}</span>
+        </button>
+      </ng-template>
+    </f-dialog>
+  `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "closeOnEscape", "dismissableMask", "resizable", "draggable", "maximizable", "blockScroll", "returnFocusOnClose", "position", "style", "styleClass", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide", "onMaximize"] }, { kind: "directive", type: FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "f-progressspinner", inputs: ["size", "strokeWidth", "animationDuration", "styleClass", "ariaLabel"] }, { kind: "directive", type: TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ActionPermittedUsersDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'flusys-action-permitted-users-dialog',
+                    imports: [
+                        DialogComponent,
+                        FButtonDirective,
+                        ProgressSpinnerComponent,
+                        TooltipDirective,
+                        UiIconComponent,
+                        HasPermissionDirective,
+                        TranslatePipe,
+                    ],
+                    template: `
+    <f-dialog
+      [visible]="visible()"
+      [modal]="true"
+      [closable]="true"
+      [breakpoints]="{ '960px': '90vw', '640px': '95vw' }"
+      [style]="{ width: '50vw', maxWidth: '600px' }"
+      [header]="'iam.permission.view.users' | translate"
+      (onHide)="onClose()"
+    >
+      <div class="mb-4">
+        <p class="text-sm text-muted-color">
+          {{ 'iam.action.name' | translate }}:
+          <strong>{{ action()?.name }}</strong>
+        </p>
+      </div>
+
+      @if (isLoading()) {
+        <div class="flex justify-center items-center py-8">
+          <f-progressspinner />
+        </div>
+      } @else {
+        <div class="flex flex-col gap-3">
+          @for (user of users(); track user.id) {
+            <div
+              class="flex items-center justify-between p-3 border border-surface rounded"
+            >
+              <div>
+                <div class="font-semibold">{{ user.userName }}</div>
+                <div class="text-sm text-muted-color">{{ user.userEmail }}</div>
+              </div>
+              <button
+                fButton
+                *hasPermission="USER_ACTION_PERMISSIONS.ASSIGN"
+                [text]="true"
+                severity="danger"
+                size="small"
+                [disabled]="isRemoving()"
+                [fTooltip]="'shared.remove' | translate"
+                (click)="onRemove(user)"
+              >
+                <ui-icon pButtonIcon name="trash"></ui-icon>
+              </button>
+            </div>
+          } @empty {
+            <div class="text-center py-4 text-muted-color">
+              {{ 'iam.permission.no.users' | translate }}
+            </div>
+          }
+        </div>
+      }
+
+      <ng-template #footer>
+        <button
+          fButton
+          severity="secondary"
+          [outlined]="true"
+          (click)="onClose()"
+        >
+          <span pButtonLabel>{{ 'shared.close' | translate }}</span>
+        </button>
+      </ng-template>
+    </f-dialog>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: true }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: true }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
 // Logic Builder Component
 
 /**
@@ -4809,15 +5346,15 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-DfRFkfPh.mjs').then((m) => m.ActionListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-list-page.component-BveT0xT6.mjs').then((m) => m.ActionListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-O7XSRAVo.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-CF_ixS-r.mjs').then((m) => m.ActionFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-O7XSRAVo.mjs').then((m) => m.ActionFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-action-form-page.component-CF_ixS-r.mjs').then((m) => m.ActionFormPageComponent),
                     },
                 ],
             },
@@ -4828,15 +5365,15 @@ const IAM_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-CvJrtElJ.mjs').then((m) => m.RoleListPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-list-page.component-vFHxd3Q-.mjs').then((m) => m.RoleListPageComponent),
                     },
                     {
                         path: 'new',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-BIgs_ePw.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-Cfc8za3D.mjs').then((m) => m.RoleFormPageComponent),
                     },
                     {
                         path: ':id',
-                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-BIgs_ePw.mjs').then((m) => m.RoleFormPageComponent),
+                        loadComponent: () => import('./flusys-ng-iam-role-form-page.component-Cfc8za3D.mjs').then((m) => m.RoleFormPageComponent),
                     },
                 ],
             },
@@ -4851,7 +5388,7 @@ const IAM_ROUTES = [
                         COMPANY_ACTION_PERMISSIONS.READ,
                     ]),
                 ],
-                loadComponent: () => import('./flusys-ng-iam-permission-page.component-DhfA39qe.mjs').then((m) => m.PermissionPageComponent),
+                loadComponent: () => import('./flusys-ng-iam-permission-page.component-CGtj1EiO.mjs').then((m) => m.PermissionPageComponent),
             },
             // Default redirect to the first tab the user has permission to see
             {
@@ -4869,5 +5406,5 @@ const IAM_ROUTES = [
  * Generated bundle index. Do not edit.
  */
 
-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, buildActionParentTree as b, convertActionToTreeNode as c, RoleActionSelectorComponent as d, UserActionSelectorComponent as e, ActionPermissionLogicService as f, IAM_ROUTES as g, MyPermissionsApiService as h, PermissionStateService as i, ProfilePermissionProviderAdapter as j, provideIamProviders as p };
-//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam--WniMPhV.mjs.map
+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, ActionPermittedUsersDialogComponent as b, convertActionToTreeNode as c, buildActionParentTree as d, RolePermittedUsersDialogComponent as e, RoleActionSelectorComponent as f, UserActionSelectorComponent as g, ActionPermissionLogicService as h, IAM_ROUTES as i, MyPermissionsApiService as j, PermissionStateService as k, ProfilePermissionProviderAdapter as l, provideIamProviders as p };
+//# sourceMappingURL=flusys-ng-iam-flusys-ng-iam-CjLr3bfY.mjs.map