@flusys/ng-iam 1.1.0 → 1.2.0-rc.1

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

@@ -0,0 +1,105 @@
+import * as i0 from '@angular/core';
+import { inject, computed, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { APP_CONFIG, getPermissionMode } from '@flusys/ng-core';
+import { PermissionValidatorService, TranslateService, ACTION_PERMISSIONS, ROLE_PERMISSIONS, ROLE_ACTION_PERMISSIONS, USER_ROLE_PERMISSIONS, USER_ACTION_PERMISSIONS, COMPANY_ACTION_PERMISSIONS, RouterTabsComponent, TranslatePipe } from '@flusys/ng-shared';
+
+/**
+ * IAM Container Component
+ *
+ * Main container for IAM module with tab navigation
+ * Routes: Actions | Roles (conditional) | Users (permission assignment)
+ */
+class IamContainerComponent {
+    appConfig = inject(APP_CONFIG);
+    permissionValidator = inject(PermissionValidatorService);
+    translateService = inject(TranslateService);
+    /** All available tabs */
+    allTabs = [
+        {
+            id: 'actions',
+            labelKey: 'iam.action.title',
+            icon: 'bolt',
+            route: 'actions',
+            permission: [ACTION_PERMISSIONS.READ],
+        },
+        {
+            id: 'roles',
+            labelKey: 'iam.role.title',
+            icon: 'shield',
+            route: 'roles',
+            requiresRBAC: true,
+            permission: [ROLE_PERMISSIONS.READ],
+        },
+        {
+            id: 'permissions',
+            labelKey: 'iam.permission.title',
+            icon: 'key',
+            route: 'permissions',
+            permission: [
+                ROLE_ACTION_PERMISSIONS.READ,
+                USER_ROLE_PERMISSIONS.READ,
+                USER_ACTION_PERMISSIONS.READ,
+                COMPANY_ACTION_PERMISSIONS.READ,
+            ],
+        },
+    ];
+    /** Visible tabs based on permission mode */
+    visibleTabs = computed(() => {
+        const permissionMode = getPermissionMode(this.appConfig);
+        return this.allTabs
+            .filter((tab) => {
+            const hasPermission = this.permissionValidator.hasAnyPermission(tab.permission);
+            return (hasPermission &&
+                (!tab.requiresRBAC ||
+                    permissionMode === 'rbac' ||
+                    permissionMode === 'full'));
+        })
+            .map((tab) => ({
+            id: tab.id,
+            label: this.translateService.translate(tab.labelKey),
+            icon: tab.icon,
+            route: tab.route,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: IamContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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">
+          {{ 'iam.title' | translate }}
+        </h1>
+        <p class="text-muted-color mt-1">{{ 'iam.subtitle' | translate }}</p>
+      </div>
+
+      <lib-router-tabs [tabs]="visibleTabs()" class="mb-4" />
+
+      <router-outlet />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: RouterTabsComponent, selector: "lib-router-tabs", inputs: ["tabs"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: IamContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-iam-container',
+                    imports: [RouterOutlet, TranslatePipe, RouterTabsComponent],
+                    template: `
+    <div class="p-4">
+      <div class="mb-4">
+        <h1 class="text-xl sm:text-2xl font-bold m-0">
+          {{ 'iam.title' | translate }}
+        </h1>
+        <p class="text-muted-color mt-1">{{ 'iam.subtitle' | translate }}</p>
+      </div>
+
+      <lib-router-tabs [tabs]="visibleTabs()" class="mb-4" />
+
+      <router-outlet />
+    </div>
+  `,
+                }]
+        }] });
+
+export { IamContainerComponent };
+//# sourceMappingURL=flusys-ng-iam-iam-container.component-D0m8u6nu.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flusys-ng-iam-iam-container.component-D0m8u6nu.mjs","sources":["../../../projects/ng-iam/pages/iam-container/iam-container.component.ts"],"sourcesContent":["import { Component, computed, inject } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport { APP_CONFIG, getPermissionMode } from '@flusys/ng-core';\nimport {\n  ACTION_PERMISSIONS,\n  COMPANY_ACTION_PERMISSIONS,\n  PermissionValidatorService,\n  ROLE_ACTION_PERMISSIONS,\n  ROLE_PERMISSIONS,\n  RouterTabItem,\n  RouterTabsComponent,\n  TranslatePipe,\n  TranslateService,\n  USER_ACTION_PERMISSIONS,\n  USER_ROLE_PERMISSIONS,\n} from '@flusys/ng-shared';\n\ninterface ITab {\n  id: string;\n  labelKey: string;\n  icon: string;\n  route: string;\n  requiresRBAC?: boolean;\n  permission: string[];\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  imports: [RouterOutlet, TranslatePipe, RouterTabsComponent],\n  template: `\n    <div class=\"p-4\">\n      <div class=\"mb-4\">\n        <h1 class=\"text-xl sm:text-2xl font-bold m-0\">\n          {{ 'iam.title' | translate }}\n        </h1>\n        <p class=\"text-muted-color mt-1\">{{ 'iam.subtitle' | translate }}</p>\n      </div>\n\n      <lib-router-tabs [tabs]=\"visibleTabs()\" class=\"mb-4\" />\n\n      <router-outlet />\n    </div>\n  `,\n})\nexport class IamContainerComponent {\n  private readonly appConfig = inject(APP_CONFIG);\n\n  private readonly permissionValidator = inject(PermissionValidatorService);\n  private readonly translateService = inject(TranslateService);\n\n  /** All available tabs */\n  private readonly allTabs: ITab[] = [\n    {\n      id: 'actions',\n      labelKey: 'iam.action.title',\n      icon: 'bolt',\n      route: 'actions',\n      permission: [ACTION_PERMISSIONS.READ],\n    },\n    {\n      id: 'roles',\n      labelKey: 'iam.role.title',\n      icon: 'shield',\n      route: 'roles',\n      requiresRBAC: true,\n      permission: [ROLE_PERMISSIONS.READ],\n    },\n    {\n      id: 'permissions',\n      labelKey: 'iam.permission.title',\n      icon: 'key',\n      route: 'permissions',\n      permission: [\n        ROLE_ACTION_PERMISSIONS.READ,\n        USER_ROLE_PERMISSIONS.READ,\n        USER_ACTION_PERMISSIONS.READ,\n        COMPANY_ACTION_PERMISSIONS.READ,\n      ],\n    },\n  ];\n\n  /** Visible tabs based on permission mode */\n  readonly visibleTabs = computed<RouterTabItem[]>(() => {\n    const permissionMode = getPermissionMode(this.appConfig);\n    return this.allTabs\n      .filter((tab) => {\n        const hasPermission = this.permissionValidator.hasAnyPermission(\n          tab.permission,\n        );\n        return (\n          hasPermission &&\n          (!tab.requiresRBAC ||\n            permissionMode === 'rbac' ||\n            permissionMode === 'full')\n        );\n      })\n      .map((tab) => ({\n        id: tab.id,\n        label: this.translateService.translate(tab.labelKey),\n        icon: tab.icon,\n        route: tab.route,\n      }));\n  });\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/{flusys-ng-iam-permission-page.component-DcgT7L3_.mjs → flusys-ng-iam-permission-page.component-x88X4AgJ.mjs}

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-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 { inject, signal, computed, effect, untracked, Component } from '@angular/core';
+import { COMPANY_ACTION_PERMISSIONS, USER_ACTION_PERMISSIONS, USER_ROLE_PERMISSIONS, ROLE_ACTION_PERMISSIONS, AngularModule, HasPermissionDirective, TranslatePipe } from '@flusys/ng-shared';
 import { APP_CONFIG, getPermissionMode, isCompanyFeatureEnabled } from '@flusys/ng-core';
-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-CJAQT60K.mjs';
+import { b as RoleActionSelectorComponent, C as CompanyActionSelectorComponent, U as UserRoleSelectorComponent, d as UserActionSelectorComponent } from './flusys-ng-iam-flusys-ng-iam-CrycDULz.mjs';
+import * as i2 from '@flusys/ng-ui';
+import { UiModule } from '@flusys/ng-ui';
 
 /** Permission codes for each tab */
 const TAB_PERMISSIONS = {
@@ -17,22 +16,24 @@ const TAB_PERMISSIONS = {
 /** Main permission management interface with tabs for role/user/company permission assignment */
 class PermissionPageComponent {
     appConfig = inject(APP_CONFIG);
-    activeTab = signal('', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    activeTab = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     /** Available tabs based on permission mode */
     availableTabs = computed(() => {
         const permissionMode = getPermissionMode(this.appConfig);
         const tabs = [];
         if (permissionMode === 'rbac' || permissionMode === 'full') {
-            tabs.push({ 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'] });
+            tabs.push({ id: 'role-actions', labelKey: 'iam.permission.role.actions', icon: 'shield', permission: TAB_PERMISSIONS['role-actions'] }, { id: 'user-roles', labelKey: 'iam.permission.user.roles', icon: 'user', permission: TAB_PERMISSIONS['user-roles'] });
         }
         if (permissionMode === 'direct' || permissionMode === 'full') {
-            tabs.push({ id: 'user-actions', label: 'User-Actions', icon: 'pi pi-key', permission: TAB_PERMISSIONS['user-actions'] });
+            tabs.push({ id: 'user-actions', labelKey: 'iam.permission.user.actions', icon: 'key', permission: TAB_PERMISSIONS['user-actions'] });
         }
         if (isCompanyFeatureEnabled(this.appConfig)) {
-            tabs.push({ id: 'company-actions', label: 'Company-Actions', icon: 'pi pi-building', permission: TAB_PERMISSIONS['company-actions'] });
+            tabs.push({ id: 'company-actions', labelKey: 'iam.permission.company.actions', icon: 'building', permission: TAB_PERMISSIONS['company-actions'] });
         }
         return tabs;
-    }, ...(ngDevMode ? [{ debugName: "availableTabs" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "availableTabs" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const tabs = this.availableTabs();
@@ -47,21 +48,24 @@ class PermissionPageComponent {
     setActiveTab(tabId) {
         this.activeTab.set(tabId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PermissionPageComponent, isStandalone: true, selector: "lib-permission-page", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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>
+      <h3 class="text-xl font-semibold mb-4">{{ 'iam.permission.title' | translate }}</h3>
 
       <div class="scrollbar-hide flex gap-2 mb-4 overflow-x-auto flex-nowrap">
         @for (tab of availableTabs(); track tab.id) {
-          <p-button
+          <button
+            fButton
             *hasPermission="tab.permission"
-            [label]="tab.label"
-            [icon]="tab.icon"
             [outlined]="activeTab() !== tab.id"
             size="small"
-            styleClass="shrink-0"
-            (onClick)="setActiveTab(tab.id)" />
+            class="shrink-0"
+            (click)="setActiveTab(tab.id)"
+          >
+            <ui-icon pButtonIcon [name]="tab.icon"></ui-icon>
+            <span pButtonLabel>{{ tab.labelKey | translate }}</span>
+          </button>
         }
       </div>
 
@@ -82,34 +86,36 @@ class PermissionPageComponent {
         }
       </div>
     </div>
-  `, 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 });
+  `, 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: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { 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" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-permission-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'lib-permission-page', imports: [
                         AngularModule,
-                        PrimeModule,
-                        ButtonModule,
-                        TabsModule,
+                        UiModule,
                         HasPermissionDirective,
+                        TranslatePipe,
                         RoleActionSelectorComponent,
                         CompanyActionSelectorComponent,
                         UserRoleSelectorComponent,
                         UserActionSelectorComponent
                     ], template: `
     <div class="card">
-      <h3 class="text-xl font-semibold mb-4">Permission Management</h3>
+      <h3 class="text-xl font-semibold mb-4">{{ 'iam.permission.title' | translate }}</h3>
 
       <div class="scrollbar-hide flex gap-2 mb-4 overflow-x-auto flex-nowrap">
         @for (tab of availableTabs(); track tab.id) {
-          <p-button
+          <button
+            fButton
             *hasPermission="tab.permission"
-            [label]="tab.label"
-            [icon]="tab.icon"
             [outlined]="activeTab() !== tab.id"
             size="small"
-            styleClass="shrink-0"
-            (onClick)="setActiveTab(tab.id)" />
+            class="shrink-0"
+            (click)="setActiveTab(tab.id)"
+          >
+            <ui-icon pButtonIcon [name]="tab.icon"></ui-icon>
+            <span pButtonLabel>{{ tab.labelKey | translate }}</span>
+          </button>
         }
       </div>
 
@@ -134,4 +140,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         }], ctorParameters: () => [] });
 
 export { PermissionPageComponent };
-//# sourceMappingURL=flusys-ng-iam-permission-page.component-DcgT7L3_.mjs.map
+//# sourceMappingURL=flusys-ng-iam-permission-page.component-x88X4AgJ.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flusys-ng-iam-permission-page.component-x88X4AgJ.mjs","sources":["../../../projects/ng-iam/pages/permission/permission-page.component.ts"],"sourcesContent":["import { Component, computed, effect, inject, signal, untracked } from '@angular/core';\nimport {\n  AngularModule,\n  HasPermissionDirective,\n  ROLE_ACTION_PERMISSIONS,\n  USER_ROLE_PERMISSIONS,\n  USER_ACTION_PERMISSIONS,\n  COMPANY_ACTION_PERMISSIONS,\n  TranslatePipe,\n} from '@flusys/ng-shared';\nimport { APP_CONFIG, getPermissionMode, isCompanyFeatureEnabled } from '@flusys/ng-core';\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';\nimport { UiModule } from '@flusys/ng-ui';\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/** Main permission management interface with tabs for role/user/company permission assignment */\n@Component({\n  selector: 'lib-permission-page',\n  imports: [\n    AngularModule,\n    UiModule,\n    HasPermissionDirective,\n    TranslatePipe,\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\">{{ 'iam.permission.title' | translate }}</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          <button\n            fButton\n            *hasPermission=\"tab.permission\"\n            [outlined]=\"activeTab() !== tab.id\"\n            size=\"small\"\n            class=\"shrink-0\"\n            (click)=\"setActiveTab(tab.id)\"\n          >\n            <ui-icon pButtonIcon [name]=\"tab.icon\"></ui-icon>\n            <span pButtonLabel>{{ tab.labelKey | translate }}</span>\n          </button>\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  /** Available tabs based on permission mode */\n  readonly availableTabs = computed(() => {\n    const permissionMode = getPermissionMode(this.appConfig);\n    const tabs: Array<{ id: string; labelKey: string; icon: string; permission: string }> = [];\n\n    if (permissionMode === 'rbac' || permissionMode === 'full') {\n      tabs.push(\n        { id: 'role-actions', labelKey: 'iam.permission.role.actions', icon: 'shield', permission: TAB_PERMISSIONS['role-actions'] },\n        { id: 'user-roles', labelKey: 'iam.permission.user.roles', icon: 'user', permission: TAB_PERMISSIONS['user-roles'] }\n      );\n    }\n\n    if (permissionMode === 'direct' || permissionMode === 'full') {\n      tabs.push({ id: 'user-actions', labelKey: 'iam.permission.user.actions', icon: 'key', permission: TAB_PERMISSIONS['user-actions'] });\n    }\n\n    if (isCompanyFeatureEnabled(this.appConfig)) {\n      tabs.push({ id: 'company-actions', labelKey: 'iam.permission.company.actions', icon: 'building', permission: TAB_PERMISSIONS['company-actions'] });\n    }\n\n    return tabs;\n  });\n\n  constructor() {\n    effect(() => {\n      const tabs = this.availableTabs();\n      const currentTab = untracked(() => this.activeTab());\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-InsxdriD.mjs

@@ -0,0 +1,335 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, effect, 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';
+import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
+import * as i2 from '@flusys/ng-ui';
+import { MessageService, UiModule } from '@flusys/ng-ui';
+import { TranslateService, AngularModule, TranslatePipe } from '@flusys/ng-shared';
+import { R as RoleApiService } from './flusys-ng-iam-flusys-ng-iam-CrycDULz.mjs';
+import * as i1 from '@angular/forms';
+
+class RoleFormPageComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    appConfig = inject(APP_CONFIG);
+    companyContext = inject(LAYOUT_AUTH_STATE);
+    roleApi = inject(RoleApiService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    routeParams = toSignal(this.route.paramMap);
+    initialized = false;
+    translate(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
+    }
+    isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    existingRole = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "existingRole" }] : /* istanbul ignore next */ []));
+    isEditMode = computed(() => !!this.existingRole(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
+    formModel = signal({
+        id: '',
+        name: '',
+        description: '',
+        serial: '',
+        isActive: true,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []));
+    roleForm = form(this.formModel, (f) => {
+        required(f.name, {
+            message: this.translate('shared.validation.required', {
+                field: this.translate('iam.role.name'),
+            }),
+        });
+    });
+    isFormValid = computed(() => {
+        const model = this.formModel();
+        return model.name.trim().length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
+    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);
+        try {
+            const response = await this.roleApi.findById(id);
+            const role = response?.data;
+            if (role) {
+                this.existingRole.set(role);
+                this.formModel.set({
+                    id: role.id,
+                    name: role.name,
+                    description: role.description ?? '',
+                    serial: role.serial?.toString() ?? '',
+                    isActive: role.isActive,
+                });
+            }
+            else {
+                // Error toast handled by global interceptor
+                this.router.navigate(['/iam/roles']);
+            }
+        }
+        catch {
+            // Error toast handled by global interceptor
+            this.router.navigate(['/iam/roles']);
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    async onSubmit() {
+        if (!this.isFormValid()) {
+            this.messageService.add({
+                severity: 'error',
+                summary: this.translate('shared.validation.error'),
+                detail: this.translate('shared.fill.required.fields'),
+            });
+            return;
+        }
+        this.isLoading.set(true);
+        try {
+            const formValue = this.formModel();
+            // Get company context if feature enabled
+            const companyId = isCompanyFeatureEnabled(this.appConfig)
+                ? this.companyContext.currentCompanyInfo()?.id || undefined
+                : undefined;
+            // Convert empty strings to undefined for DTO compatibility
+            const dto = {
+                ...formValue,
+                description: formValue.description || undefined,
+                serial: formValue.serial ? parseInt(formValue.serial, 10) : undefined,
+                companyId: this.isEditMode() ? undefined : companyId,
+            };
+            const response = this.isEditMode()
+                ? await this.roleApi.update(dto)
+                : await this.roleApi.insert(dto);
+            this.messageService.add({
+                severity: 'success',
+                summary: this.translate('shared.success'),
+                detail: response.messageKey
+                    ? this.translate(response.messageKey, response.messageVariables)
+                    : (response.message ?? ''),
+            });
+            this.router.navigate(['/iam/roles']);
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    onBack() {
+        this.router.navigate(['/iam/roles']);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleFormPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RoleFormPageComponent, isStandalone: true, selector: "lib-role-form-page", ngImport: i0, template: `
+    <div class="card">
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{
+          isEditMode()
+            ? ('iam.role.edit' | translate)
+            : ('iam.role.new' | translate)
+        }}
+      </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"
+            >{{ 'iam.role.name' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="name"
+            [formField]="roleForm.name"
+            [placeholder]="'iam.role.name.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Description -->
+        <div class="flex flex-col gap-2">
+          <label for="description" class="font-medium">{{
+            'shared.description' | translate
+          }}</label>
+          <input
+            fInputText
+            id="description"
+            [formField]="roleForm.description"
+            [placeholder]="'shared.description.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Order -->
+        <div class="flex flex-col gap-2">
+          <label for="serial" class="font-medium">{{
+            'shared.display.order' | translate
+          }}</label>
+          <input
+            fInputText
+            id="serial"
+            type="number"
+            [formField]="roleForm.serial"
+            [placeholder]="'shared.display.order.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Is Active -->
+        <div class="flex items-end gap-2 pb-1">
+          <f-checkbox
+            [formField]="roleForm.isActive"
+            [binary]="true"
+            inputId="isActive"
+          />
+          <label for="isActive">{{ 'shared.active' | translate }}</label>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-2 md:col-span-2 pt-4">
+          <button
+            fButton
+            severity="secondary"
+            [outlined]="true"
+            (click)="onBack()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isLoading()"
+          >
+            @if (isLoading()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
+              isEditMode()
+                ? ('shared.update' | translate)
+                : ('shared.create' | translate)
+             }}</span>
+          </button>
+        </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: UiModule }, { kind: "directive", type: i2.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i2.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "directive", type: i2.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i2.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RoleFormPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-role-form-page',
+                    imports: [AngularModule, UiModule, FormField, TranslatePipe],
+                    template: `
+    <div class="card">
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{
+          isEditMode()
+            ? ('iam.role.edit' | translate)
+            : ('iam.role.new' | translate)
+        }}
+      </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"
+            >{{ 'iam.role.name' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="name"
+            [formField]="roleForm.name"
+            [placeholder]="'iam.role.name.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Description -->
+        <div class="flex flex-col gap-2">
+          <label for="description" class="font-medium">{{
+            'shared.description' | translate
+          }}</label>
+          <input
+            fInputText
+            id="description"
+            [formField]="roleForm.description"
+            [placeholder]="'shared.description.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Order -->
+        <div class="flex flex-col gap-2">
+          <label for="serial" class="font-medium">{{
+            'shared.display.order' | translate
+          }}</label>
+          <input
+            fInputText
+            id="serial"
+            type="number"
+            [formField]="roleForm.serial"
+            [placeholder]="'shared.display.order.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Is Active -->
+        <div class="flex items-end gap-2 pb-1">
+          <f-checkbox
+            [formField]="roleForm.isActive"
+            [binary]="true"
+            inputId="isActive"
+          />
+          <label for="isActive">{{ 'shared.active' | translate }}</label>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-2 md:col-span-2 pt-4">
+          <button
+            fButton
+            severity="secondary"
+            [outlined]="true"
+            (click)="onBack()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isLoading()"
+          >
+            @if (isLoading()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
+              isEditMode()
+                ? ('shared.update' | translate)
+                : ('shared.create' | translate)
+             }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+export { RoleFormPageComponent };
+//# sourceMappingURL=flusys-ng-iam-role-form-page.component-InsxdriD.mjs.map