@flusys/ng-iam 0.1.0-beta.3 → 1.0.0-rc

package/fesm2022/flusys-ng-iam-iam-container.component-Bn4kQtxW.mjs

@@ -0,0 +1,92 @@
+import * as i0 from '@angular/core';
+import { inject, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+import { APP_CONFIG, getPermissionMode } from '@flusys/ng-core';
+
+/**
+ * IAM Container Component
+ *
+ * Main container for IAM module with tab navigation
+ * Routes: Actions | Roles (conditional) | Users (permission assignment)
+ */
+class IamContainerComponent {
+    appConfig = inject(APP_CONFIG);
+    /** All available tabs */
+    allTabs = [
+        {
+            id: 'actions',
+            label: 'Actions',
+            icon: 'pi pi-bolt',
+            route: 'actions',
+        },
+        {
+            id: 'roles',
+            label: 'Roles',
+            icon: 'pi pi-shield',
+            route: 'roles',
+            requiresRBAC: true,
+        },
+        {
+            id: 'permissions',
+            label: 'Permissions',
+            icon: 'pi pi-key',
+            route: 'permissions',
+        },
+    ];
+    /** Visible tabs based on permission mode */
+    visibleTabs = computed(() => {
+        const permissionMode = getPermissionMode(this.appConfig);
+        return this.allTabs.filter((tab) => !tab.requiresRBAC || permissionMode === 'rbac' || permissionMode === 'full');
+    }, ...(ngDevMode ? [{ debugName: "visibleTabs" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: IamContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: IamContainerComponent, isStandalone: true, selector: "lib-iam-container", ngImport: i0, template: `
+    <div class="p-4">
+      <div class="mb-4">
+        <h1 class="text-xl sm:text-2xl font-bold m-0">Identity & Access Management</h1>
+        <p class="text-muted-color mt-1">Manage actions, roles, and user permissions</p>
+      </div>
+
+      <div class="scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto flex-nowrap">
+        @for (tab of visibleTabs(); track tab.id) {
+          <a
+            [routerLink]="tab.route"
+            routerLinkActive="tab-active"
+            class="flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors text-muted-color no-underline border-b-2 border-transparent -mb-px hover:bg-surface-hover [&.tab-active]:text-primary [&.tab-active]:border-primary [&.tab-active]:bg-surface-ground whitespace-nowrap shrink-0">
+            <i [class]="tab.icon"></i>
+            <span>{{ tab.label }}</span>
+          </a>
+        }
+      </div>
+
+      <router-outlet />
+    </div>
+  `, isInline: true, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: IamContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-iam-container', standalone: true, imports: [RouterOutlet, RouterLink, RouterLinkActive], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="p-4">
+      <div class="mb-4">
+        <h1 class="text-xl sm:text-2xl font-bold m-0">Identity & Access Management</h1>
+        <p class="text-muted-color mt-1">Manage actions, roles, and user permissions</p>
+      </div>
+
+      <div class="scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto flex-nowrap">
+        @for (tab of visibleTabs(); track tab.id) {
+          <a
+            [routerLink]="tab.route"
+            routerLinkActive="tab-active"
+            class="flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors text-muted-color no-underline border-b-2 border-transparent -mb-px hover:bg-surface-hover [&.tab-active]:text-primary [&.tab-active]:border-primary [&.tab-active]:bg-surface-ground whitespace-nowrap shrink-0">
+            <i [class]="tab.icon"></i>
+            <span>{{ tab.label }}</span>
+          </a>
+        }
+      </div>
+
+      <router-outlet />
+    </div>
+  `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"] }]
+        }] });
+
+export { IamContainerComponent };
+//# sourceMappingURL=flusys-ng-iam-iam-container.component-Bn4kQtxW.mjs.map

package/fesm2022/flusys-ng-iam-iam-container.component-Bn4kQtxW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flusys-ng-iam-iam-container.component-Bn4kQtxW.mjs","sources":["../../../projects/ng-iam/pages/iam-container/iam-container.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';\nimport { APP_CONFIG, getPermissionMode } from '@flusys/ng-core';\n\ninterface ITab {\n  id: string;\n  label: string;\n  icon: string;\n  route: string;\n  requiresRBAC?: boolean;\n}\n\n/**\n * IAM Container Component\n *\n * Main container for IAM module with tab navigation\n * Routes: Actions | Roles (conditional) | Users (permission assignment)\n */\n@Component({\n  selector: 'lib-iam-container',\n  standalone: true,\n  imports: [RouterOutlet, RouterLink, RouterLinkActive],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styles: `\n    .scrollbar-hide {\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar { display: none; }\n    }\n  `,\n  template: `\n    <div class=\"p-4\">\n      <div class=\"mb-4\">\n        <h1 class=\"text-xl sm:text-2xl font-bold m-0\">Identity & Access Management</h1>\n        <p class=\"text-muted-color mt-1\">Manage actions, roles, and user permissions</p>\n      </div>\n\n      <div class=\"scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto flex-nowrap\">\n        @for (tab of visibleTabs(); track tab.id) {\n          <a\n            [routerLink]=\"tab.route\"\n            routerLinkActive=\"tab-active\"\n            class=\"flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors text-muted-color no-underline border-b-2 border-transparent -mb-px hover:bg-surface-hover [&.tab-active]:text-primary [&.tab-active]:border-primary [&.tab-active]:bg-surface-ground whitespace-nowrap shrink-0\">\n            <i [class]=\"tab.icon\"></i>\n            <span>{{ tab.label }}</span>\n          </a>\n        }\n      </div>\n\n      <router-outlet />\n    </div>\n  `,\n})\nexport class IamContainerComponent {\n  private readonly appConfig = inject(APP_CONFIG);\n\n  /** All available tabs */\n  private readonly allTabs: ITab[] = [\n    {\n      id: 'actions',\n      label: 'Actions',\n      icon: 'pi pi-bolt',\n      route: 'actions',\n    },\n    {\n      id: 'roles',\n      label: 'Roles',\n      icon: 'pi pi-shield',\n      route: 'roles',\n      requiresRBAC: true,\n    },\n    {\n      id: 'permissions',\n      label: 'Permissions',\n      icon: 'pi pi-key',\n      route: 'permissions',\n    },\n  ];\n\n  /** Visible tabs based on permission mode */\n  readonly visibleTabs = computed(() => {\n    const permissionMode = getPermissionMode(this.appConfig);\n    return this.allTabs.filter(\n      (tab) => !tab.requiresRBAC || permissionMode === 'rbac' || permissionMode === 'full'\n    );\n  });\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/{flusys-ng-iam-permission-page.component-C0yLMdW5.mjs → flusys-ng-iam-permission-page.component-CmxOBJPu.mjs}

@@ -1,12 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Component } from '@angular/core';
-import { AngularModule, PrimeModule } from '@flusys/ng-shared';
+import { inject, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { COMPANY_ACTION_PERMISSIONS, USER_ACTION_PERMISSIONS, USER_ROLE_PERMISSIONS, ROLE_ACTION_PERMISSIONS, AngularModule, PrimeModule, HasPermissionDirective } from '@flusys/ng-shared';
 import { APP_CONFIG, getPermissionMode, isCompanyFeatureEnabled } from '@flusys/ng-core';
-import * as i3 from 'primeng/button';
+import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { TabsModule } from 'primeng/tabs';
-import { b as RoleActionSelectorComponent, C as CompanyActionSelectorComponent, U as UserRoleSelectorComponent, d as UserActionSelectorComponent } from './flusys-ng-iam-flusys-ng-iam-D_i24Gub.mjs';
+import { b as RoleActionSelectorComponent, C as CompanyActionSelectorComponent, U as UserRoleSelectorComponent, d as UserActionSelectorComponent } from './flusys-ng-iam-flusys-ng-iam-BPIpfrjN.mjs';
 
+/** Permission codes for each tab */
+const TAB_PERMISSIONS = {
+    'role-actions': ROLE_ACTION_PERMISSIONS.READ,
+    'user-roles': USER_ROLE_PERMISSIONS.READ,
+    'user-actions': USER_ACTION_PERMISSIONS.READ,
+    'company-actions': COMPANY_ACTION_PERMISSIONS.READ,
+};
 /**
  * Permission Page Component
  *
@@ -18,9 +25,9 @@ import { b as RoleActionSelectorComponent, C as CompanyActionSelectorComponent,
  */
 class PermissionPageComponent {
     appConfig = inject(APP_CONFIG);
-    activeTab = signal('role-actions', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    activeTab = signal('', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
     /**
-     * Available tabs based on configuration
+     * All possible tabs based on permission mode (directive handles action permissions)
      */
     availableTabs = computed(() => {
         const permissionMode = getPermissionMode(this.appConfig);
@@ -31,10 +38,12 @@ class PermissionPageComponent {
                 id: 'role-actions',
                 label: 'Role-Actions',
                 icon: 'pi pi-shield',
+                permission: TAB_PERMISSIONS['role-actions'],
             }, {
                 id: 'user-roles',
                 label: 'User-Roles',
                 icon: 'pi pi-user',
+                permission: TAB_PERMISSIONS['user-roles'],
             });
         }
         // User-Action direct assignment (DIRECT or FULL mode)
@@ -43,6 +52,7 @@ class PermissionPageComponent {
                 id: 'user-actions',
                 label: 'User-Actions',
                 icon: 'pi pi-key',
+                permission: TAB_PERMISSIONS['user-actions'],
             });
         }
         // Company-Action whitelist (if company feature enabled)
@@ -51,25 +61,41 @@ class PermissionPageComponent {
                 id: 'company-actions',
                 label: 'Company-Actions',
                 icon: 'pi pi-building',
+                permission: TAB_PERMISSIONS['company-actions'],
             });
         }
         return tabs;
     }, ...(ngDevMode ? [{ debugName: "availableTabs" }] : []));
+    constructor() {
+        // Set default tab to first available tab
+        effect(() => {
+            const tabs = this.availableTabs();
+            const currentTab = untracked(() => this.activeTab());
+            // Only set if no active tab or current tab is not in available tabs
+            if (!currentTab || !tabs.some((t) => t.id === currentTab)) {
+                if (tabs.length > 0) {
+                    this.activeTab.set(tabs[0].id);
+                }
+            }
+        });
+    }
     setActiveTab(tabId) {
         this.activeTab.set(tabId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PermissionPageComponent, isStandalone: true, selector: "lib-permission-page", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: PermissionPageComponent, isStandalone: true, selector: "lib-permission-page", ngImport: i0, template: `
     <div class="card">
       <h3 class="text-xl font-semibold mb-4">Permission Management</h3>
 
-      <div class="flex gap-2 mb-4">
+      <div class="scrollbar-hide flex gap-2 mb-4 overflow-x-auto flex-nowrap">
         @for (tab of availableTabs(); track tab.id) {
           <p-button
+            *hasPermission="tab.permission"
             [label]="tab.label"
             [icon]="tab.icon"
             [outlined]="activeTab() !== tab.id"
             size="small"
+            styleClass="shrink-0"
             (onClick)="setActiveTab(tab.id)" />
         }
       </div>
@@ -91,15 +117,16 @@ class PermissionPageComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: RoleActionSelectorComponent, selector: "flusys-role-action-selector" }, { kind: "component", type: CompanyActionSelectorComponent, selector: "flusys-company-action-selector" }, { kind: "component", type: UserRoleSelectorComponent, selector: "flusys-user-role-selector" }, { kind: "component", type: UserActionSelectorComponent, selector: "flusys-user-action-selector" }] });
+  `, isInline: true, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { 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: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TabsModule }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "component", type: RoleActionSelectorComponent, selector: "flusys-role-action-selector" }, { kind: "component", type: CompanyActionSelectorComponent, selector: "flusys-company-action-selector" }, { kind: "component", type: UserRoleSelectorComponent, selector: "flusys-user-role-selector" }, { kind: "component", type: UserActionSelectorComponent, selector: "flusys-user-action-selector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-permission-page', standalone: true, imports: [
+            args: [{ selector: 'lib-permission-page', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AngularModule,
                         PrimeModule,
                         ButtonModule,
                         TabsModule,
+                        HasPermissionDirective,
                         RoleActionSelectorComponent,
                         CompanyActionSelectorComponent,
                         UserRoleSelectorComponent,
@@ -108,13 +135,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
     <div class="card">
       <h3 class="text-xl font-semibold mb-4">Permission Management</h3>
 
-      <div class="flex gap-2 mb-4">
+      <div class="scrollbar-hide flex gap-2 mb-4 overflow-x-auto flex-nowrap">
         @for (tab of availableTabs(); track tab.id) {
           <p-button
+            *hasPermission="tab.permission"
             [label]="tab.label"
             [icon]="tab.icon"
             [outlined]="activeTab() !== tab.id"
             size="small"
+            styleClass="shrink-0"
             (onClick)="setActiveTab(tab.id)" />
         }
       </div>
@@ -136,8 +165,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         }
       </div>
     </div>
-  `, styles: [":host{display:block}\n"] }]
-        }] });
+  `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"] }]
+        }], ctorParameters: () => [] });
 
 export { PermissionPageComponent };
-//# sourceMappingURL=flusys-ng-iam-permission-page.component-C0yLMdW5.mjs.map
+//# sourceMappingURL=flusys-ng-iam-permission-page.component-CmxOBJPu.mjs.map

package/fesm2022/flusys-ng-iam-permission-page.component-CmxOBJPu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flusys-ng-iam-permission-page.component-CmxOBJPu.mjs","sources":["../../../projects/ng-iam/pages/permission/permission-page.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, effect, inject, signal, untracked } from '@angular/core';\nimport {\n  AngularModule,\n  HasPermissionDirective,\n  PrimeModule,\n  ROLE_ACTION_PERMISSIONS,\n  USER_ROLE_PERMISSIONS,\n  USER_ACTION_PERMISSIONS,\n  COMPANY_ACTION_PERMISSIONS,\n} from '@flusys/ng-shared';\nimport { APP_CONFIG, getPermissionMode, isCompanyFeatureEnabled } from '@flusys/ng-core';\nimport { ButtonModule } from 'primeng/button';\nimport { TabsModule } from 'primeng/tabs';\nimport { RoleActionSelectorComponent } from '../../components/role-action-selector.component';\nimport { CompanyActionSelectorComponent } from '../../components/company-action-selector.component';\nimport { UserRoleSelectorComponent } from '../../components/user-role-selector.component';\nimport { UserActionSelectorComponent } from '../../components/user-action-selector.component';\n\n/** Permission codes for each tab */\nconst TAB_PERMISSIONS = {\n  'role-actions': ROLE_ACTION_PERMISSIONS.READ,\n  'user-roles': USER_ROLE_PERMISSIONS.READ,\n  'user-actions': USER_ACTION_PERMISSIONS.READ,\n  'company-actions': COMPANY_ACTION_PERMISSIONS.READ,\n} as const;\n\n/**\n * Permission Page Component\n *\n * Main permission management interface with tabs for:\n * - Role-Action Assignment (RBAC/FULL mode) - WITH LOGIC BUILDER\n * - User-Role Assignment (RBAC/FULL mode)\n * - User-Action Assignment (DIRECT/FULL mode)\n * - Company-Action Whitelist (if company feature enabled)\n */\n@Component({\n  selector: 'lib-permission-page',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    AngularModule,\n    PrimeModule,\n    ButtonModule,\n    TabsModule,\n    HasPermissionDirective,\n    RoleActionSelectorComponent,\n    CompanyActionSelectorComponent,\n    UserRoleSelectorComponent,\n    UserActionSelectorComponent\n  ],\n  styles: `\n    .scrollbar-hide {\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar { display: none; }\n    }\n  `,\n  template: `\n    <div class=\"card\">\n      <h3 class=\"text-xl font-semibold mb-4\">Permission Management</h3>\n\n      <div class=\"scrollbar-hide flex gap-2 mb-4 overflow-x-auto flex-nowrap\">\n        @for (tab of availableTabs(); track tab.id) {\n          <p-button\n            *hasPermission=\"tab.permission\"\n            [label]=\"tab.label\"\n            [icon]=\"tab.icon\"\n            [outlined]=\"activeTab() !== tab.id\"\n            size=\"small\"\n            styleClass=\"shrink-0\"\n            (onClick)=\"setActiveTab(tab.id)\" />\n        }\n      </div>\n\n      <div class=\"mt-4\">\n        @switch (activeTab()) {\n          @case ('role-actions') {\n            <flusys-role-action-selector />\n          }\n          @case ('user-roles') {\n            <flusys-user-role-selector />\n          }\n          @case ('user-actions') {\n            <flusys-user-action-selector />\n          }\n          @case ('company-actions') {\n            <flusys-company-action-selector />\n          }\n        }\n      </div>\n    </div>\n  `,\n})\nexport class PermissionPageComponent {\n  private readonly appConfig = inject(APP_CONFIG);\n\n  readonly activeTab = signal<string>('');\n\n  /**\n   * All possible tabs based on permission mode (directive handles action permissions)\n   */\n  readonly availableTabs = computed(() => {\n    const permissionMode = getPermissionMode(this.appConfig);\n    const tabs: Array<{ id: string; label: string; icon: string; permission: string }> = [];\n\n    // Role-Action assignment (RBAC or FULL mode)\n    if (permissionMode === 'rbac' || permissionMode === 'full') {\n      tabs.push(\n        {\n          id: 'role-actions',\n          label: 'Role-Actions',\n          icon: 'pi pi-shield',\n          permission: TAB_PERMISSIONS['role-actions'],\n        },\n        {\n          id: 'user-roles',\n          label: 'User-Roles',\n          icon: 'pi pi-user',\n          permission: TAB_PERMISSIONS['user-roles'],\n        }\n      );\n    }\n\n    // User-Action direct assignment (DIRECT or FULL mode)\n    if (permissionMode === 'direct' || permissionMode === 'full') {\n      tabs.push({\n        id: 'user-actions',\n        label: 'User-Actions',\n        icon: 'pi pi-key',\n        permission: TAB_PERMISSIONS['user-actions'],\n      });\n    }\n\n    // Company-Action whitelist (if company feature enabled)\n    if (isCompanyFeatureEnabled(this.appConfig)) {\n      tabs.push({\n        id: 'company-actions',\n        label: 'Company-Actions',\n        icon: 'pi pi-building',\n        permission: TAB_PERMISSIONS['company-actions'],\n      });\n    }\n\n    return tabs;\n  });\n\n  constructor() {\n    // Set default tab to first available tab\n    effect(() => {\n      const tabs = this.availableTabs();\n      const currentTab = untracked(() => this.activeTab());\n\n      // Only set if no active tab or current tab is not in available tabs\n      if (!currentTab || !tabs.some((t) => t.id === currentTab)) {\n        if (tabs.length > 0) {\n          this.activeTab.set(tabs[0].id);\n        }\n      }\n    });\n  }\n\n  setActiveTab(tabId: string): void {\n    this.activeTab.set(tabId);\n  }\n}\n"],"names":["i1"],"mappings":"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"}

package/fesm2022/{flusys-ng-iam-role-form-page.component-Co6bbHik.mjs → flusys-ng-iam-role-form-page.component-ByNueI1a.mjs}

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, ChangeDetectionStrategy, Component } 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 { APP_CONFIG, isCompanyFeatureEnabled } from '@flusys/ng-core';
@@ -7,10 +8,11 @@ import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
 import { AngularModule, PrimeModule } from '@flusys/ng-shared';
 import { MessageService } from 'primeng/api';
 import { firstValueFrom } from 'rxjs';
-import { R as RoleApiService } from './flusys-ng-iam-flusys-ng-iam-D_i24Gub.mjs';
+import { R as RoleApiService } from './flusys-ng-iam-flusys-ng-iam-BPIpfrjN.mjs';
 import * as i1 from '@angular/forms';
-import * as i2 from 'primeng/inputtext';
-import * as i3 from 'primeng/button';
+import * as i2 from 'primeng/button';
+import * as i3 from 'primeng/checkbox';
+import * as i4 from 'primeng/inputtext';
 
 /**
  * Role Form Page Component
@@ -23,6 +25,8 @@ class RoleFormPageComponent {
     companyContext = inject(LAYOUT_AUTH_STATE);
     roleApi = inject(RoleApiService);
     messageService = inject(MessageService);
+    routeParams = toSignal(this.route.paramMap);
+    initialized = false;
     /** Loading state */
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     /** Existing role data when editing */
@@ -49,11 +53,17 @@ class RoleFormPageComponent {
         const model = this.formModel();
         return model.name.trim().length > 0;
     }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
-    ngOnInit() {
-        const id = this.route.snapshot.paramMap.get('id');
-        if (id && id !== 'new') {
-            this.loadRole(id);
-        }
+    constructor() {
+        effect(() => {
+            const params = this.routeParams();
+            if (!params || this.initialized)
+                return;
+            this.initialized = true;
+            const id = params.get('id');
+            if (id && id !== 'new') {
+                this.loadRole(id);
+            }
+        });
     }
     async loadRole(id) {
         this.isLoading.set(true);
@@ -71,20 +81,12 @@ class RoleFormPageComponent {
                 });
             }
             else {
-                this.messageService.add({
-                    severity: 'error',
-                    summary: 'Error',
-                    detail: 'Role not found.',
-                });
+                // Error toast handled by global interceptor
                 this.router.navigate(['/iam/roles']);
             }
         }
-        catch (error) {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: 'Failed to load role.',
-            });
+        catch {
+            // Error toast handled by global interceptor
             this.router.navigate(['/iam/roles']);
         }
         finally {
@@ -132,12 +134,8 @@ class RoleFormPageComponent {
             }
             this.router.navigate(['/iam/roles']);
         }
-        catch (error) {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: error.message || 'Failed to save role.',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
         finally {
             this.isLoading.set(false);
@@ -146,69 +144,56 @@ class RoleFormPageComponent {
     onBack() {
         this.router.navigate(['/iam/roles']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RoleFormPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: RoleFormPageComponent, isStandalone: true, selector: "lib-role-form-page", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoleFormPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: RoleFormPageComponent, isStandalone: true, selector: "lib-role-form-page", ngImport: i0, template: `
     <div class="card">
-      <div class="flex justify-between items-center mb-4">
-        <h3 class="text-xl font-semibold">
-          {{ isEditMode() ? 'Edit Role' : 'New Role' }}
-        </h3>
-        <p-button
-          label="Back"
-          icon="pi pi-arrow-left"
-          [outlined]="true"
-          (onClick)="onBack()" />
-      </div>
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{ isEditMode() ? 'Edit Role' : 'New Role' }}
+      </h3>
 
-      <form (ngSubmit)="onSubmit()">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <!-- Name -->
-          <div class="md:col-span-2">
-            <label for="name" class="block font-medium mb-2">Name *</label>
-            <input
-              pInputText
-              id="name"
-              [formField]="roleForm.name"
-              class="w-full"
-              placeholder="Enter role name" />
-          </div>
+      <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]="roleForm.name"
+            placeholder="Enter role name" />
+        </div>
 
-          <!-- Description -->
-          <div class="md:col-span-2">
-            <label for="description" class="block font-medium mb-2">Description</label>
-            <input
-              pInputText
-              id="description"
-              [formField]="roleForm.description"
-              class="w-full"
-              placeholder="Enter description" />
-          </div>
+        <!-- Description -->
+        <div class="flex flex-col gap-2">
+          <label for="description" class="font-medium">Description</label>
+          <input
+            pInputText
+            id="description"
+            [formField]="roleForm.description"
+            placeholder="Enter description" />
+        </div>
 
-          <!-- Order -->
-          <div>
-            <label for="serial" class="block font-medium mb-2">Display Order</label>
-            <input
-              pInputText
-              id="serial"
-              type="number"
-              [formField]="roleForm.serial"
-              class="w-full"
-              placeholder="Enter display order" />
-          </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]="roleForm.serial"
+            placeholder="Enter display order" />
+        </div>
 
-          <!-- Is Active -->
-          <div class="flex items-center pt-6">
-            <label class="p-checkbox-native">
-              <input
-                type="checkbox"
-                [formField]="roleForm.isActive" />
-              <span>Active</span>
-            </label>
-          </div>
+        <!-- Is Active -->
+        <div class="flex items-end gap-2 pb-1">
+          <p-checkbox
+            [formField]="roleForm.isActive"
+            [binary]="true"
+            inputId="isActive" />
+          <label for="isActive">Active</label>
         </div>
 
         <!-- Actions -->
-        <div class="flex justify-end gap-2 mt-6">
+        <div class="flex justify-end gap-2 md:col-span-2 pt-4">
           <p-button
             label="Cancel"
             severity="secondary"
@@ -222,9 +207,9 @@ class RoleFormPageComponent {
         </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.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: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.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: FormField, selector: "[formField]", inputs: ["formField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RoleFormPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoleFormPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-role-form-page',
@@ -233,66 +218,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <div class="card">
-      <div class="flex justify-between items-center mb-4">
-        <h3 class="text-xl font-semibold">
-          {{ isEditMode() ? 'Edit Role' : 'New Role' }}
-        </h3>
-        <p-button
-          label="Back"
-          icon="pi pi-arrow-left"
-          [outlined]="true"
-          (onClick)="onBack()" />
-      </div>
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{ isEditMode() ? 'Edit Role' : 'New Role' }}
+      </h3>
 
-      <form (ngSubmit)="onSubmit()">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <!-- Name -->
-          <div class="md:col-span-2">
-            <label for="name" class="block font-medium mb-2">Name *</label>
-            <input
-              pInputText
-              id="name"
-              [formField]="roleForm.name"
-              class="w-full"
-              placeholder="Enter role name" />
-          </div>
+      <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]="roleForm.name"
+            placeholder="Enter role name" />
+        </div>
 
-          <!-- Description -->
-          <div class="md:col-span-2">
-            <label for="description" class="block font-medium mb-2">Description</label>
-            <input
-              pInputText
-              id="description"
-              [formField]="roleForm.description"
-              class="w-full"
-              placeholder="Enter description" />
-          </div>
+        <!-- Description -->
+        <div class="flex flex-col gap-2">
+          <label for="description" class="font-medium">Description</label>
+          <input
+            pInputText
+            id="description"
+            [formField]="roleForm.description"
+            placeholder="Enter description" />
+        </div>
 
-          <!-- Order -->
-          <div>
-            <label for="serial" class="block font-medium mb-2">Display Order</label>
-            <input
-              pInputText
-              id="serial"
-              type="number"
-              [formField]="roleForm.serial"
-              class="w-full"
-              placeholder="Enter display order" />
-          </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]="roleForm.serial"
+            placeholder="Enter display order" />
+        </div>
 
-          <!-- Is Active -->
-          <div class="flex items-center pt-6">
-            <label class="p-checkbox-native">
-              <input
-                type="checkbox"
-                [formField]="roleForm.isActive" />
-              <span>Active</span>
-            </label>
-          </div>
+        <!-- Is Active -->
+        <div class="flex items-end gap-2 pb-1">
+          <p-checkbox
+            [formField]="roleForm.isActive"
+            [binary]="true"
+            inputId="isActive" />
+          <label for="isActive">Active</label>
         </div>
 
         <!-- Actions -->
-        <div class="flex justify-end gap-2 mt-6">
+        <div class="flex justify-end gap-2 md:col-span-2 pt-4">
           <p-button
             label="Cancel"
             severity="secondary"
@@ -308,7 +280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
     </div>
   `,
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 export { RoleFormPageComponent };
-//# sourceMappingURL=flusys-ng-iam-role-form-page.component-Co6bbHik.mjs.map
+//# sourceMappingURL=flusys-ng-iam-role-form-page.component-ByNueI1a.mjs.map