@flusys/ng-iam 1.1.0-beta → 2.0.0-rc.0

package/README.md

@@ -14,6 +14,7 @@
 | Version | 1.0.0 |
 | Dependencies | ng-core, ng-shared, ng-layout (IMenuItem only) |
 | NO dependency on | ng-auth (fully independent via Provider Pattern) |
+| CSS Framework | Tailwind CSS (not PrimeFlex) |
 | Build | `npm run build:ng-iam` |
 | Entry point | `public-api.ts` |
 
@@ -64,21 +65,34 @@ ng-iam requires these provider interfaces:
 
 ### How Components Use Providers
 
+User selection uses `lib-user-select` component from ng-shared (encapsulates USER_PROVIDER):
+
+```html
+<!-- UserActionSelectorComponent / UserRoleSelectorComponent -->
+<lib-user-select
+  [(value)]="selectedUserId"
+  [isEditMode]="true"
+  placeHolder="Select a user"
+/>
+```
+
+Company context is accessed via `LAYOUT_AUTH_STATE`:
+
 ```typescript
-// UserActionSelectorComponent / UserRoleSelectorComponent
-private readonly userProvider = inject(USER_PROVIDER);
 private readonly companyContext = inject(LAYOUT_AUTH_STATE);
 
-async loadUsers() {
-  const response = await firstValueFrom(
-    this.userProvider.getUsers({
-      page: 0,
-      pageSize: MAX_DROPDOWN_ITEMS,
-      companyId: this.companyContext.currentCompanyInfo()?.id || undefined,
-    })
-  );
-  this.users.set(response?.data ?? []);
-}
+// Get current company
+const companyId = this.companyContext.currentCompanyInfo()?.id;
+```
+
+Branch permissions loaded from `USER_PERMISSION_PROVIDER`:
+
+```typescript
+private readonly userPermissionProvider = inject(USER_PERMISSION_PROVIDER);
+
+const response = await this.userPermissionProvider
+  .getUserBranchPermissions(userId)
+  .toPromise();
 ```
 
 ---
@@ -363,12 +377,14 @@ Assigns actions directly to users (DIRECT/FULL mode).
 | Standalone | Yes |
 | Change Detection | OnPush |
 
-**Dependencies:** `APP_CONFIG`, `LAYOUT_AUTH_STATE`, `USER_PROVIDER`, `USER_PERMISSION_PROVIDER`, `ActionApiService`, `ActionPermissionLogicService`, `PermissionApiService`, `MessageService`
+**Dependencies:** `APP_CONFIG`, `LAYOUT_AUTH_STATE`, `USER_PERMISSION_PROVIDER`, `ActionApiService`, `ActionPermissionLogicService`, `PermissionApiService`, `MessageService`
 
 **Features:**
-- User dropdown (loaded from USER_PROVIDER)
+- User dropdown (`lib-user-select` component from ng-shared)
 - Branch selector (conditional, loaded from USER_PERMISSION_PROVIDER)
 - Hierarchical TreeTable with checkboxes
+- Responsive table with `overflow-x-auto` container
+- Responsive columns (Code hidden on mobile, Description hidden until lg)
 - Action type tags (backend/frontend/both)
 - Prerequisite validation with tooltips
 - Change tracking with pending add/remove summary
@@ -387,11 +403,13 @@ Assigns roles to users (RBAC/FULL mode).
 | Standalone | Yes |
 | Change Detection | OnPush |
 
-**Dependencies:** `APP_CONFIG`, `LAYOUT_AUTH_STATE`, `USER_PROVIDER`, `USER_PERMISSION_PROVIDER`, `RoleApiService`, `PermissionApiService`, `MessageService`
+**Dependencies:** `APP_CONFIG`, `LAYOUT_AUTH_STATE`, `USER_PERMISSION_PROVIDER`, `RoleApiService`, `PermissionApiService`, `MessageService`
 
 **Features:**
-- User dropdown with branch selector
-- DataTable with pagination
+- User dropdown (`lib-user-select` component from ng-shared)
+- Branch selector (conditional)
+- DataTable with pagination and `overflow-x-auto` container
+- Responsive columns (Code hidden on mobile, Description hidden until md)
 - Change tracking with pending add/remove summary
 - Select/deselect all
 - No prerequisite validation (roles are simple assignments)
@@ -411,12 +429,13 @@ Assigns actions to roles (RBAC/FULL mode).
 **Dependencies:** `RoleApiService`, `ActionApiService`, `PermissionApiService`, `MessageService`, `ActionPermissionLogicService`
 
 **Features:**
-- Role dropdown
-- Hierarchical TreeTable with checkboxes
+- Role dropdown with filter
+- Hierarchical TreeTable with checkboxes and `overflow-x-auto` container
+- Responsive columns (Code hidden until md, Requirements hidden until lg)
 - Prerequisite validation with smart dependency handling
 - Request cancellation with AbortController
 - Pre-save validation with auto-fix dialog
-- Change tracking
+- Change tracking with pending add/remove summary
 
 ---
 
@@ -433,11 +452,14 @@ Manages company action whitelisting (when company feature enabled).
 **Dependencies:** `COMPANY_API_PROVIDER`, `ActionApiService`, `PermissionApiService`, `MessageService`, `ConfirmationService`, `ActionPermissionLogicService`
 
 **Features:**
-- Company dropdown (loaded from COMPANY_API_PROVIDER)
+- Company dropdown with filter (loaded from COMPANY_API_PROVIDER)
 - Full action tree (not filtered by company whitelist)
-- Prerequisite validation
+- Hierarchical TreeTable with `overflow-x-auto` container
+- Responsive columns (Code hidden until md, Description hidden until lg)
+- Prerequisite validation with tooltips
 - Backend prerequisite error handling with auto-fix
 - Request cancellation with AbortController
+- Change tracking with pending whitelist/remove summary
 
 ---
 
@@ -453,8 +475,34 @@ Tabbed navigation container for IAM pages.
 |----------|-------|
 | Selector | `lib-iam-container` |
 | Tabs | Actions (always), Roles (RBAC/FULL), Permissions (always) |
+| Change Detection | OnPush |
+
+**Features:**
+- Responsive page title (`text-xl sm:text-2xl`)
+- Horizontally scrollable tabs on mobile (hidden scrollbar)
+- Uses `RouterLink` and `RouterLinkActive` for navigation
+- Tab visibility based on permission mode
 
-Uses `RouterLink` and `RouterLinkActive` for navigation. Tab visibility based on permission mode.
+**Responsive Patterns:**
+
+```html
+<!-- Page title -->
+<h1 class="text-xl sm:text-2xl font-bold m-0">Identity & Access Management</h1>
+
+<!-- Horizontally scrollable tabs (hidden scrollbar) -->
+<div class="scrollbar-hide flex gap-1 overflow-x-auto flex-nowrap">
+  <!-- tabs -->
+</div>
+```
+
+**Scrollbar hide CSS:**
+```css
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
+}
+```
 
 ---
 
@@ -467,6 +515,11 @@ Hierarchical action list with CRUD operations.
 | Selector | `lib-action-list-page` |
 | Features | TreeTable display, create/edit/delete, read-only indicators, company context awareness |
 
+**Responsive features:**
+- TreeTable with `overflow-x-auto -mx-4 sm:mx-0` container
+- Responsive columns: Code (hidden until md), Active (hidden until sm), Read Only (hidden until lg)
+- Responsive header with stacked layout on mobile
+
 Reloads actions when company context changes via effect.
 
 ---
@@ -493,6 +546,11 @@ Paginated role list with CRUD operations.
 | Selector | `lib-role-list-page` |
 | Features | Paginated table (10/25/50), create/edit/delete, company context filtering, read-only indicators |
 
+**Responsive features:**
+- Table with `overflow-x-auto -mx-4 sm:mx-0` container
+- Responsive columns: Description (hidden until md), Read Only (hidden until sm)
+- Conditional paginator (only shown when data exists)
+
 ---
 
 ### RoleFormPageComponent
@@ -883,6 +941,96 @@ GET  /iam/permissions/company-actions/:id     # Get company's whitelisted action
 
 ---
 
+## Responsive Table Patterns
+
+All IAM tables and tree tables use consistent responsive patterns with Tailwind CSS.
+
+### Table Container Pattern
+
+```html
+<!-- Wrapper enables horizontal scroll on mobile, full-width on desktop -->
+<div class="overflow-x-auto -mx-4 sm:mx-0">
+  <p-treeTable
+    [value]="treeNodes()"
+    dataKey="id"
+    styleClass="p-treetable-sm"
+    [tableStyle]="{ 'min-width': '50rem' }"
+  >
+    <!-- ... -->
+  </p-treeTable>
+</div>
+```
+
+**Key properties:**
+- `overflow-x-auto` - Enables horizontal scroll when content exceeds container
+- `-mx-4 sm:mx-0` - Edge-to-edge on mobile, normal margins on desktop
+- `[tableStyle]="{ 'min-width': '50rem' }"` - Minimum width ensures consistent layout
+
+### Responsive Column Visibility
+
+```html
+<ng-template #header>
+  <tr>
+    <th class="w-12"><!-- checkbox --></th>
+    <th>Name</th>                           <!-- Always visible -->
+    <th class="hidden sm:table-cell">Code</th>     <!-- Hidden on xs -->
+    <th>Type</th>                           <!-- Always visible -->
+    <th class="hidden md:table-cell">Status</th>   <!-- Hidden until md -->
+    <th class="hidden lg:table-cell">Description</th> <!-- Hidden until lg -->
+  </tr>
+</ng-template>
+```
+
+**Breakpoint classes:**
+| Class | Visibility |
+|-------|------------|
+| (none) | Always visible |
+| `hidden sm:table-cell` | Visible at 640px+ |
+| `hidden md:table-cell` | Visible at 768px+ |
+| `hidden lg:table-cell` | Visible at 1024px+ |
+
+### Header Layout Pattern
+
+```html
+<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-4">
+  <div>
+    <h5 class="m-0 mb-1">Section Title</h5>
+    <p class="text-sm text-muted-color m-0">{{ count }} items available</p>
+  </div>
+  <div class="flex flex-wrap gap-2">
+    <!-- Action buttons -->
+  </div>
+</div>
+```
+
+### Dark Mode Styling
+
+```css
+/* Light mode */
+.validation-warning {
+  background-color: var(--p-yellow-50, #fefce8);
+  border-left: 4px solid var(--p-yellow-500, #eab308);
+  color: var(--p-yellow-700, #a16207);
+}
+
+/* Dark mode */
+:host-context(.p-dark) .validation-warning {
+  background-color: rgba(234, 179, 8, 0.1);
+  color: var(--p-yellow-400, #facc15);
+}
+```
+
+**Color classes (Tailwind):**
+| Purpose | Class |
+|---------|-------|
+| Muted text | `text-muted-color` |
+| Success | `text-green-500` |
+| Danger | `text-red-500` |
+| Warning | `text-orange-500` |
+| Primary | `text-primary` |
+
+---
+
 ## Best Practices
 
 ### Permission Loading
@@ -986,6 +1134,9 @@ const logic: ILogicNode = {
 | 401 on IAM endpoints with external auth | Auth token not forwarded | Ensure your auth interceptor adds `Authorization` header to IAM requests |
 | Provider not configured error | Missing DI registration | Add required providers to `app.config.ts` (USER_PROVIDER, LAYOUT_AUTH_STATE) |
 | Empty user/company dropdowns | API response format mismatch | Ensure adapters return `IListResponse<T>` format with `data` array |
+| TreeTable has excessive whitespace | Using `scrollHeight="flex"` without fixed-height parent | Remove `scrollHeight="flex"` and `[scrollable]="true"`, use `overflow-x-auto` container instead |
+| Table not horizontally scrollable on mobile | Missing responsive wrapper | Add `<div class="overflow-x-auto -mx-4 sm:mx-0">` around table |
+| Columns visible on mobile causing overflow | Missing responsive column classes | Add `hidden sm:table-cell` or `hidden md:table-cell` to non-essential columns |
 
 ---
 
@@ -1074,5 +1225,5 @@ if (this.permissionProvider) {
 
 ---
 
-**Last Updated:** 2026-02-16
+**Last Updated:** 2026-02-21
 **Angular Version:** 21

package/fesm2022/flusys-ng-iam-action-form-page.component-CVN8sV-c.mjs

@@ -0,0 +1,389 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { form, required, FormField } from '@angular/forms/signals';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AngularModule, PrimeModule } from '@flusys/ng-shared';
+import { MessageService } from 'primeng/api';
+import { firstValueFrom } from 'rxjs';
+import { A as ActionApiService, a as ActionType, L as LogicBuilderComponent } from './flusys-ng-iam-flusys-ng-iam-DrGHlTiz.mjs';
+import * as i1 from '@angular/forms';
+import * as i2 from 'primeng/button';
+import * as i3 from 'primeng/checkbox';
+import * as i4 from 'primeng/inputtext';
+
+class ActionFormPageComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    actionApi = inject(ActionApiService);
+    messageService = inject(MessageService);
+    routeParams = toSignal(this.route.paramMap);
+    initialized = false;
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    existingAction = signal(null, ...(ngDevMode ? [{ debugName: "existingAction" }] : []));
+    isEditMode = computed(() => !!this.existingAction(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    allActionsForLogic = signal([], ...(ngDevMode ? [{ debugName: "allActionsForLogic" }] : []));
+    allActions = signal([], ...(ngDevMode ? [{ debugName: "allActions" }] : []));
+    availableActions = computed(() => {
+        const actions = this.allActions();
+        const currentId = this.existingAction()?.id;
+        return currentId ? actions.filter((a) => a.id !== currentId) : actions;
+    }, ...(ngDevMode ? [{ debugName: "availableActions" }] : []));
+    formModel = signal({
+        id: '',
+        name: '',
+        description: '',
+        code: '',
+        actionType: ActionType.BACKEND,
+        permissionLogic: null,
+        parentId: '',
+        serial: '',
+        isActive: true,
+        metadata: null,
+    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    actionTypes = [
+        { label: 'Backend (API Endpoints)', value: ActionType.BACKEND },
+        { label: 'Frontend (UI Features)', value: ActionType.FRONTEND },
+        { label: 'Both (Backend + Frontend)', value: ActionType.BOTH },
+    ];
+    actionForm = form(this.formModel, (f) => {
+        required(f.name, { message: 'Name is required' });
+    });
+    isFormValid = computed(() => {
+        const model = this.formModel();
+        return model.name.trim().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    constructor() {
+        effect(() => {
+            const params = this.routeParams();
+            if (!params || this.initialized)
+                return;
+            this.initialized = true;
+            this.initializeForm(params.get('id'));
+        });
+    }
+    async initializeForm(id) {
+        try {
+            const response = await firstValueFrom(this.actionApi.getAll('', {
+                pagination: { currentPage: 0, pageSize: 10000 },
+                select: ['id', 'name', 'code', 'actionType', 'permissionLogic'],
+            }));
+            if (response?.success && response.data) {
+                this.allActionsForLogic.set(response.data.map((a) => ({ id: a.id, name: a.name ?? 'Unnamed' })));
+                this.allActions.set(response.data);
+            }
+        }
+        catch {
+            // Ignored - form will show empty parent dropdown
+        }
+        if (id && id !== 'new') {
+            await this.loadAction(id);
+        }
+    }
+    async loadAction(id) {
+        this.isLoading.set(true);
+        try {
+            const response = await this.actionApi.findByIdAsync(id, [
+                'id', 'name', 'description', 'code', 'actionType',
+                'permissionLogic', 'parentId', 'serial', 'isActive', 'metadata',
+            ]);
+            if (response?.success && response.data) {
+                const action = response.data;
+                this.existingAction.set(action);
+                this.formModel.set({
+                    id: action.id ?? '',
+                    name: action.name ?? '',
+                    description: action.description ?? '',
+                    code: action.code ?? '',
+                    actionType: action.actionType ?? ActionType.BACKEND,
+                    permissionLogic: action.permissionLogic ?? null,
+                    parentId: action.parentId ?? '',
+                    serial: action.serial?.toString() ?? '',
+                    isActive: action.isActive ?? true,
+                    metadata: action.metadata ?? null,
+                });
+            }
+            else {
+                this.router.navigate(['/iam/actions']);
+            }
+        }
+        catch {
+            this.router.navigate(['/iam/actions']);
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    async onSubmit() {
+        if (!this.isFormValid()) {
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Validation Error',
+                detail: 'Please fill in all required fields.',
+            });
+            return;
+        }
+        this.isLoading.set(true);
+        try {
+            const formValue = this.formModel();
+            const dto = {
+                ...formValue,
+                description: formValue.description || undefined,
+                code: formValue.code || undefined,
+                parentId: formValue.parentId || undefined,
+                serial: formValue.serial ? parseInt(formValue.serial, 10) : undefined,
+                metadata: formValue.metadata ?? undefined,
+                permissionLogic: formValue.permissionLogic ?? undefined,
+            };
+            if (this.isEditMode()) {
+                await this.actionApi.updateAsync(dto);
+                this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Action updated successfully.' });
+            }
+            else {
+                await this.actionApi.insertAsync(dto);
+                this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Action created successfully.' });
+            }
+            this.router.navigate(['/iam/actions']);
+        }
+        catch {
+            // Handled by global interceptor
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    onBack() {
+        this.router.navigate(['/iam/actions']);
+    }
+    onLogicChange(logic) {
+        this.formModel.update((model) => ({ ...model, permissionLogic: logic }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionFormPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ActionFormPageComponent, isStandalone: true, selector: "lib-action-form-page", ngImport: i0, template: `
+    <div class="card">
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{ isEditMode() ? 'Edit Action' : 'New Action' }}
+      </h3>
+
+      <form (ngSubmit)="onSubmit()" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <!-- Name -->
+        <div class="flex flex-col gap-2">
+          <label for="name" class="font-medium">Name *</label>
+          <input
+            pInputText
+            id="name"
+            [formField]="actionForm.name"
+            placeholder="Enter action name" />
+        </div>
+
+        <!-- Code -->
+        <div class="flex flex-col gap-2">
+          <label for="code" class="font-medium">Code</label>
+          <input
+            pInputText
+            id="code"
+            [formField]="actionForm.code"
+            placeholder="Enter action code" />
+        </div>
+
+        <!-- Description -->
+        <div class="flex flex-col gap-2">
+          <label for="description" class="font-medium">Description</label>
+          <input
+            pInputText
+            id="description"
+            [formField]="actionForm.description"
+            placeholder="Enter description" />
+        </div>
+
+        <!-- Action Type -->
+        <div class="flex flex-col gap-2">
+          <label for="actionType" class="font-medium">Action Type *</label>
+          <select
+            id="actionType"
+            class="p-inputtext w-full"
+            [formField]="actionForm.actionType">
+            @for (type of actionTypes; track type.value) {
+              <option [value]="type.value">{{ type.label }}</option>
+            }
+          </select>
+        </div>
+
+        <!-- Parent Action -->
+        <div class="flex flex-col gap-2">
+          <label for="parentId" class="font-medium">Parent Action</label>
+          <select
+            id="parentId"
+            class="p-inputtext w-full"
+            [formField]="actionForm.parentId">
+            <option value="">Select parent action</option>
+            @for (action of availableActions(); track action.id) {
+              <option [value]="action.id">{{ action.name }}</option>
+            }
+          </select>
+        </div>
+
+        <!-- Order -->
+        <div class="flex flex-col gap-2">
+          <label for="serial" class="font-medium">Display Order</label>
+          <input
+            pInputText
+            id="serial"
+            type="number"
+            [formField]="actionForm.serial"
+            placeholder="Enter display order" />
+        </div>
+
+        <!-- Is Active -->
+        <div class="flex items-end gap-2 pb-1 md:col-span-2">
+          <p-checkbox
+            [formField]="actionForm.isActive"
+            [binary]="true"
+            inputId="isActive" />
+          <label for="isActive">Active</label>
+        </div>
+
+        <!-- Permission Logic Builder -->
+        <div class="md:col-span-2">
+          <lib-logic-builder
+            [logic]="formModel().permissionLogic"
+            [actions]="allActionsForLogic()"
+            (logicChange)="onLogicChange($event)" />
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-2 md:col-span-2 pt-4">
+          <p-button
+            label="Cancel"
+            severity="secondary"
+            [outlined]="true"
+            (onClick)="onBack()" />
+          <p-button
+            [label]="isEditMode() ? 'Update' : 'Create'"
+            type="submit"
+            [loading]="isLoading()"
+            [disabled]="!isFormValid() || isLoading()" />
+        </div>
+      </form>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: LogicBuilderComponent, selector: "lib-logic-builder", inputs: ["logic", "actions"], outputs: ["logicChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ActionFormPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-action-form-page',
+                    imports: [AngularModule, PrimeModule, FormField, LogicBuilderComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="card">
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{ isEditMode() ? 'Edit Action' : 'New Action' }}
+      </h3>
+
+      <form (ngSubmit)="onSubmit()" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <!-- Name -->
+        <div class="flex flex-col gap-2">
+          <label for="name" class="font-medium">Name *</label>
+          <input
+            pInputText
+            id="name"
+            [formField]="actionForm.name"
+            placeholder="Enter action name" />
+        </div>
+
+        <!-- Code -->
+        <div class="flex flex-col gap-2">
+          <label for="code" class="font-medium">Code</label>
+          <input
+            pInputText
+            id="code"
+            [formField]="actionForm.code"
+            placeholder="Enter action code" />
+        </div>
+
+        <!-- Description -->
+        <div class="flex flex-col gap-2">
+          <label for="description" class="font-medium">Description</label>
+          <input
+            pInputText
+            id="description"
+            [formField]="actionForm.description"
+            placeholder="Enter description" />
+        </div>
+
+        <!-- Action Type -->
+        <div class="flex flex-col gap-2">
+          <label for="actionType" class="font-medium">Action Type *</label>
+          <select
+            id="actionType"
+            class="p-inputtext w-full"
+            [formField]="actionForm.actionType">
+            @for (type of actionTypes; track type.value) {
+              <option [value]="type.value">{{ type.label }}</option>
+            }
+          </select>
+        </div>
+
+        <!-- Parent Action -->
+        <div class="flex flex-col gap-2">
+          <label for="parentId" class="font-medium">Parent Action</label>
+          <select
+            id="parentId"
+            class="p-inputtext w-full"
+            [formField]="actionForm.parentId">
+            <option value="">Select parent action</option>
+            @for (action of availableActions(); track action.id) {
+              <option [value]="action.id">{{ action.name }}</option>
+            }
+          </select>
+        </div>
+
+        <!-- Order -->
+        <div class="flex flex-col gap-2">
+          <label for="serial" class="font-medium">Display Order</label>
+          <input
+            pInputText
+            id="serial"
+            type="number"
+            [formField]="actionForm.serial"
+            placeholder="Enter display order" />
+        </div>
+
+        <!-- Is Active -->
+        <div class="flex items-end gap-2 pb-1 md:col-span-2">
+          <p-checkbox
+            [formField]="actionForm.isActive"
+            [binary]="true"
+            inputId="isActive" />
+          <label for="isActive">Active</label>
+        </div>
+
+        <!-- Permission Logic Builder -->
+        <div class="md:col-span-2">
+          <lib-logic-builder
+            [logic]="formModel().permissionLogic"
+            [actions]="allActionsForLogic()"
+            (logicChange)="onLogicChange($event)" />
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-2 md:col-span-2 pt-4">
+          <p-button
+            label="Cancel"
+            severity="secondary"
+            [outlined]="true"
+            (onClick)="onBack()" />
+          <p-button
+            [label]="isEditMode() ? 'Update' : 'Create'"
+            type="submit"
+            [loading]="isLoading()"
+            [disabled]="!isFormValid() || isLoading()" />
+        </div>
+      </form>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+export { ActionFormPageComponent };
+//# sourceMappingURL=flusys-ng-iam-action-form-page.component-CVN8sV-c.mjs.map