npm - @flusys/ng-iam - Versions diffs - 1.0.0-beta → 1.0.0-rc - Mend

@flusys/ng-iam 1.0.0-beta → 1.0.0-rc

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

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

@@ -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 ADDED Viewed

@@ -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-e_RX5mky.mjs → flusys-ng-iam-permission-page.component-CmxOBJPu.mjs} RENAMED Viewed

@@ -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-C-MQjakK.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,10 +61,24 @@ 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);
     }
@@ -63,13 +87,15 @@ class PermissionPageComponent {
     <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.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.3", 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.3", 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-e_RX5mky.mjs.map
+//# sourceMappingURL=flusys-ng-iam-permission-page.component-CmxOBJPu.mjs.map

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

@@ -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-eZM1EPps.mjs → flusys-ng-iam-role-form-page.component-ByNueI1a.mjs} RENAMED Viewed

@@ -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-C-MQjakK.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);
@@ -149,66 +147,53 @@ class RoleFormPageComponent {
     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,7 +207,7 @@ 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.3", ngImport: i0, type: RoleFormPageComponent, decorators: [{
             type: Component,
@@ -233,66 +218,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", 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.3", ngImpor
     </div>
   `,
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 export { RoleFormPageComponent };
-//# sourceMappingURL=flusys-ng-iam-role-form-page.component-eZM1EPps.mjs.map
+//# sourceMappingURL=flusys-ng-iam-role-form-page.component-ByNueI1a.mjs.map