@acorex/modules 20.0.5 → 20.0.6

package/fesm2022/acorex-modules-security-management.mjs

@@ -1,19 +1,40 @@
 import { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXPSearchCommandProvider, AXPRefreshEvent, AXP_MENU_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex/platform/common';
 import * as i2 from '@acorex/platform/layout/builder';
-import { AXPWidgetsCatalog, AXPWidgetGroupEnum, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import { AXPWidgetsCatalog, AXPWidgetGroupEnum, AXPLayoutBuilderModule, AXPValueWidgetComponent, AXPColumnWidgetComponent, AXPLayoutWidgetComponent } from '@acorex/platform/layout/builder';
 import { AXMEntityCrudServiceImpl, AXPEntityService, AXPEntityResolver, AXPEntityDefinitionRegistryService, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import * as i0 from '@angular/core';
-import { Injectable, NgModule, inject, Injector } from '@angular/core';
+import { Injectable, NgModule, inject, Injector, signal, input, output, computed, ViewEncapsulation, Component, ViewChild, effect, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@acorex/platform/workflow';
-import { createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
+import { createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowModule, AXPWorkflowService } from '@acorex/platform/workflow';
 import { AXPSessionService, AXPPermissionDefinitionService } from '@acorex/platform/auth';
 import { AXDataSource } from '@acorex/cdk/common';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
-import { AXTranslationService } from '@acorex/core/translation';
-import { AXP_USER_AVATAR_PROVIDER } from '@acorex/platform/layout/components';
+import * as i3$1 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXP_USER_AVATAR_PROVIDER, AXPThemeLayoutBlockComponent } from '@acorex/platform/layout/components';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY } from '@acorex/platform/widgets';
 import { AXPopupService } from '@acorex/components/popup';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { AXFormModule } from '@acorex/components/form';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXTextBoxModule } from '@acorex/components/text-box';
+import * as i4 from '@acorex/components/check-box';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
+import * as i3 from '@acorex/components/label';
+import { AXLabelModule } from '@acorex/components/label';
+import * as i6 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i5 from '@acorex/components/tabs';
+import { AXTabsModule } from '@acorex/components/tabs';
+import * as i7 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { AXTooltipModule } from '@acorex/components/tooltip';
+import { AXPPopupLayoutBaseComponent, AXPPopupLayoutComponent, AXPPopupLayoutBase } from '@acorex/platform/layout/views';
+import { castArray } from 'lodash-es';
 
 const config = {
     i18n: 'security-management',
@@ -1613,15 +1634,13 @@ async function factory(injector) {
                 groupId: 'info',
                 schema: {
                     dataType: 'string',
-                    interface: {
-                        type: AXPWidgetsCatalog.text,
+                    hidden: true,
+                    nullable: false,
+                    readonly: true,
+                    unique: {
+                        enabled: true,
                     },
                 },
-                validations: [
-                    {
-                        rule: 'required',
-                    },
-                ],
             },
             {
                 name: 'title',
@@ -1671,54 +1690,6 @@ async function factory(injector) {
                     },
                 },
             },
-            // {
-            //   name: 'disabled',
-            //   title: `t("active", {scope:"${i18n}"})`,
-            //   groupId: 'info',
-            //   options: {
-            //     filter: {
-            //       advance: {
-            //         enabled: true,
-            //       },
-            //     },
-            //   },
-            //   schema: {
-            //     dataType: 'boolean',
-            //     interface: {
-            //       type: AXPWidgetsCatalog.checkbox,
-            //       options: {
-            //         negative: true,
-            //       },
-            //     },
-            //   },
-            // },
-            // {
-            //   name: 'permissions',
-            //   title: `t("permissions", { scope: "${i18n}" })`,
-            //   groupId: 'permissions',
-            //   schema: {
-            //     dataType: 'string',
-            //     interface: {
-            //       type: AXPWidgetsCatalog.select,
-            //       options: {
-            //         dataSource: new AXDataSource({
-            //           load: async () => {
-            //             const permissions = await permissionService.getPermissions();
-            //             return {
-            //               items: permissions,
-            //               total: permissions.length,
-            //             };
-            //           },
-            //           pageSize: 1000,
-            //           key: 'name',
-            //         }),
-            //         valueField: 'name',
-            //         textField: 'title',
-            //         multiple: true,
-            //       },
-            //     },
-            //   },
-            // },
             {
                 name: 'permissions',
                 title: `t("permissions", { scope: "${i18n}" })`,
@@ -1853,7 +1824,7 @@ async function factory(injector) {
                             },
                         },
                         {
-                            name: 'permissions',
+                            name: 'description',
                             layout: {
                                 positions: {
                                     lg: {
@@ -1863,7 +1834,7 @@ async function factory(injector) {
                             },
                         },
                         {
-                            name: 'description',
+                            name: 'permissions',
                             layout: {
                                 positions: {
                                     lg: {
@@ -1922,6 +1893,9 @@ async function factory(injector) {
                         {
                             name: 'permissions',
                             layout: {
+                                label: {
+                                    visible: false,
+                                },
                                 positions: {
                                     lg: {
                                         colSpan: 12,
@@ -1979,6 +1953,28 @@ async function factory(injector) {
                             type: 'view',
                             scope: AXPEntityCommandScope.Individual,
                         },
+                        {
+                            title: '@activity-log:actions.view-history',
+                            command: {
+                                name: 'show-version-history-popup',
+                                options: {
+                                    refId: '{{ context.eval("id") }}',
+                                    refType: RootConfig.module.name + '.' + RootConfig.entities.roles.name,
+                                }
+                            },
+                            priority: 'secondary',
+                            type: 'version-history',
+                            scope: AXPEntityCommandScope.Individual,
+                        },
+                        {
+                            title: 'Compare',
+                            command: {
+                                name: 'show-entity-records-compare',
+                            },
+                            priority: 'secondary',
+                            type: 'version-history',
+                            scope: AXPEntityCommandScope.Selected
+                        }
                     ],
                     views: [
                         {
@@ -2180,11 +2176,11 @@ class AXMUserAvatarProvider {
 const AXPPermissionsWidget = {
     name: "permissions-editor",
     title: "Permissions Editor",
-    description: '',
+    description: 'Widget for managing permissions with full editor interface',
     type: 'view',
     categories: [],
     groups: [AXPWidgetGroupEnum.EntityWidget],
-    icon: "fa-solid fa-square",
+    icon: "fa-solid fa-user-shield",
     properties: [
         AXP_NAME_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
@@ -2192,19 +2188,19 @@ const AXPPermissionsWidget = {
     ],
     components: {
         view: {
-            component: () => import('./acorex-modules-security-management-permissions-widget-view.component-CYQqerAX.mjs').then((c) => c.AXPPermissionsWidgetViewComponent),
+            component: () => Promise.resolve().then(function () { return permissionsWidgetView_component; }).then((c) => c.AXPPermissionsWidgetViewComponent),
         },
         edit: {
-            component: () => import('./acorex-modules-security-management-permissions-widget-edit.component-GTmDlgWW.mjs').then((c) => c.AXPPermissionsWidgetEditComponent),
+            component: () => Promise.resolve().then(function () { return permissionsWidgetEdit_component; }).then((c) => c.AXPPermissionsWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-modules-security-management-permissions-widget-column.component-DTMj6gxb.mjs').then((c) => c.AXPPermissionsWidgetColumnComponent),
+            component: () => Promise.resolve().then(function () { return permissionsWidgetColumn_component; }).then((c) => c.AXPPermissionsWidgetColumnComponent),
         },
         print: {
-            component: () => import('./acorex-modules-security-management-permissions-widget-print.component-BZ75aI18.mjs').then((c) => c.AXPPermissionsWidgetPrintComponent),
+            component: () => Promise.resolve().then(function () { return permissionsWidgetPrint_component; }).then((c) => c.AXPPermissionsWidgetPrintComponent),
         },
         designer: {
-            component: () => import('./acorex-modules-security-management-permissions-widget-designer.component-BJdbKpRQ.mjs').then((c) => c.AXPPermissionsWidgetDesignerComponent),
+            component: () => Promise.resolve().then(function () { return permissionsWidgetDesigner_component; }).then((c) => c.AXPPermissionsWidgetDesignerComponent),
         },
     }
 };
@@ -2217,15 +2213,18 @@ class AXMOpenPermissionsEditorAction extends AXPWorkflowAction {
     }
     async execute(context) {
         const role = context.getVariable('data');
-        const component = await import('./acorex-modules-security-management-permissions-editor.component-B4TdyHtv.mjs').then(m => m.AXPPermissionsEditorComponent);
+        const component = await Promise.resolve().then(function () { return permissionsEditorPopup_component; }).then(m => m.AXPPermissionsEditorPopupComponent);
         const title = await this.translateService.translateAsync("@security-management:features.permissions.terms.permissions-editor");
         const result = await this.modalService.open(component, {
             title: `${title} - ${role.title}`,
             size: 'md',
             data: {
-                initialPermissions: role['permissions'] ?? []
+                initialPermissions: role['permissions'] ?? [],
             }
         });
+        //
+        context.setVariable('entity', `${RootConfig.module.name}.${RootConfig.entities.roles.name}`);
+        //
         const permissions = result.data;
         if (permissions) {
             context.setVariable('data.permissions', permissions);
@@ -2404,9 +2403,520 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
+// #region ----------------   Imports   ----------------
+// #endregion
+class AXPPermissionsEditorComponent {
+    constructor() {
+        // #region ----------------   Class Properties   ----------------
+        /** Service for fetching permission groups and definitions */
+        this.permissionService = inject(AXPPermissionDefinitionService);
+        /** Currently selected permission group */
+        this.selectedGroup = signal(null);
+        /** All available permission groups */
+        this.groups = signal([]);
+        /** Initial permissions to be selected - exposed as signal input */
+        this.initialPermissions = input([]);
+        /** Whether the editor is in read-only mode */
+        this.readOnly = input(false);
+        /** List of selected permission names */
+        this.selectedPermissions = signal([]);
+        /** Event emitted when permissions selection changes */
+        this.permissionsChanged = output();
+        /** Event emitted when permissions are applied/selected */
+        this.permissionsSelected = output();
+        /**
+         * Computed: Returns mapped permissions for the selected group.
+         */
+        this.items = computed(() => {
+            const permissions = this.selectedGroup()?.permissions || [];
+            return this.mapPermissions(permissions);
+        });
+        /**
+         * Computed: Returns groups with badge counts.
+         */
+        this.groupsWithBadge = computed(() => {
+            const groups = this.groups();
+            const result = groups.map(group => {
+                return {
+                    ...group,
+                    badge: this.getBadge(group) || ''
+                };
+            });
+            return result;
+        });
+    }
+    // #endregion
+    // #region ----------------   Computed Properties   ----------------
+    /**
+     * Recursively maps permissions to include selection state and children.
+     */
+    mapPermissions(items) {
+        return (items || []).map(item => {
+            const hasChild = Array.isArray(item.children) && item.children.length > 0;
+            return {
+                ...item,
+                isSelected: this.isSelected(item.name),
+                children: hasChild ? this.mapPermissions(item.children) : null
+            };
+        });
+    }
+    // #endregion
+    // #region ----------------   Utility Methods   ----------------
+    /**
+     * Recursively collects all permission names (parents and children) from an array.
+     */
+    collectAllPermissionNames(permissions) {
+        let names = [];
+        for (const item of permissions) {
+            names.push(item.name);
+            if (Array.isArray(item.children) && item.children.length > 0) {
+                names = names.concat(this.collectAllPermissionNames(item.children));
+            }
+        }
+        return names;
+    }
+    /**
+     * Returns the badge count for a group (all selected permissions, including parents).
+     */
+    getBadge(group) {
+        const allNames = this.collectAllPermissionNames(group.permissions || []);
+        const selectedPermissions = this.selectedPermissions();
+        const count = allNames.filter(name => selectedPermissions.includes(name)).length;
+        return count.toString();
+    }
+    /**
+     * Checks if a permission is selected.
+     */
+    isSelected(name) {
+        return this.selectedPermissions().includes(name);
+    }
+    /**
+     * Recursively collects all descendant permission names for a single item (including itself).
+     */
+    collectPermissionNames(item) {
+        let names = [item.name];
+        if (Array.isArray(item.children) && item.children.length > 0) {
+            for (const child of item.children) {
+                names = names.concat(this.collectPermissionNames(child));
+            }
+        }
+        return names;
+    }
+    /**
+     * Gets the current selected permissions.
+     */
+    getSelectedPermissions() {
+        return this.selectedPermissions();
+    }
+    /**
+     * Sets the selected permissions.
+     */
+    setSelectedPermissions(permissions) {
+        this.selectedPermissions.set(permissions || []);
+        this.permissionsChanged.emit(this.selectedPermissions());
+    }
+    /**
+     * Applies/selects the current permissions.
+     */
+    selectPermissions() {
+        this.permissionsSelected.emit(this.selectedPermissions());
+    }
+    // #endregion
+    // #region ----------------   Lifecycle Methods   ----------------
+    /**
+     * Initializes the component and loads permission groups.
+     */
+    async ngOnInit() {
+        const groups = await this.permissionService.getGroups();
+        this.groups.set(groups);
+        this.selectedGroup.set(groups[0]);
+        this.selectedPermissions.set(this.initialPermissions());
+    }
+    // #endregion
+    // #region ----------------   UI Handlers   ----------------
+    /**
+     * Handles group tab/menu item click.
+     */
+    handleMenuItemClick(item) {
+        this.selectedGroup.set(item);
+    }
+    /**
+     * Handles permission checkbox toggle (checks/unchecks all children recursively).
+     */
+    onPermissionToggle(item, e) {
+        // Don't allow changes in read-only mode
+        if (this.readOnly()) {
+            return;
+        }
+        const names = this.collectPermissionNames(item);
+        if (e.value) {
+            // Add all names (parent + children), avoiding duplicates
+            const set = new Set([...this.selectedPermissions(), ...names]);
+            this.selectedPermissions.set(Array.from(set));
+        }
+        else {
+            // Remove all names (parent + children)
+            this.selectedPermissions.set(this.selectedPermissions().filter(name => !names.includes(name)));
+        }
+        this.permissionsChanged.emit(this.selectedPermissions());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPPermissionsEditorComponent, isStandalone: true, selector: "axm-permissions-editor", inputs: { initialPermissions: { classPropertyName: "initialPermissions", publicName: "initialPermissions", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { permissionsChanged: "permissionsChanged", permissionsSelected: "permissionsSelected" }, ngImport: i0, template: "<div class=\"axm-permissions-editor\">\n\n    <div class=\"ax-flex ax-min-h-96\">\n\n        <div class=\"__groups ax-p-4 ax-min-h-full ax-overflow-auto ax-w-2/5\">\n\n            <ax-tabs location=\"start\" look=\"with-line-color\" class=\"ax-h-full\">\n                @for (group of groupsWithBadge(); track $index) {\n                <ax-tab-item [active]=\"group.name === selectedGroup()?.name\" [text]=\"group.title\"\n                    (onClick)=\"handleMenuItemClick(group)\">\n                    <ax-suffix>\n                        <ax-badge color=\"primary\" [text]=\"group.badge\"></ax-badge>\n                    </ax-suffix>\n                </ax-tab-item>\n                }\n            </ax-tabs>\n\n        </div>\n\n        <div class=\"__permissions ax-flex ax-h-full ax-overflow-auto ax-flex-col ax-w-3/5 ax-border-s\">\n\n            <div class=\"__header ax-p-4 ax-border-b ax-border-lightest\">\n                <span class=\"ax-h6\">{{ selectedGroup()?.title! }}</span>\n            </div>\n\n            <div class=\"__content ax-flex ax-p-4\">\n\n                <ul class=\"__list\">\n                    <ng-template #recursiveList let-items>\n                        @for (item of items; track $index) {\n                        <li class=\"__item ax-py-1 ax-ps-2\">\n\n                            <ax-check-box [ngModel]=\"item.isSelected\" [readonly]=\"readOnly()\"\n                                (onValueChanged)=\"onPermissionToggle(item, $event)\">\n                                <ax-label>\n                                    {{ item.title }}\n                                    @if (item.description) {\n                                    <i class=\"ax-ps-2 ax-text-xs fa-light fa-circle-info\"\n                                        [title]=\"item.description\"></i>\n                                    }\n                                </ax-label>\n                            </ax-check-box>\n\n                            @if (item.children && item.children.length > 0) {\n                            <ul class=\"__children ax-p-2 ax-mt-1 ax-ms-1\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"recursiveList; context: { $implicit: item.children }\"></ng-container>\n                            </ul>\n                            }\n\n                        </li>\n                        }\n                    </ng-template>\n                    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items() }\"></ng-container>\n                </ul>\n\n            </div>\n\n        </div>\n\n    </div>\n\n</div>", styles: [".axm-permissions-editor{display:flex;height:100%;flex-direction:column}.axm-permissions-editor .__groups .__tabs{height:100%}.axm-permissions-editor .__permissions .__header .__title{font-size:1rem;font-weight:500;line-height:1rem}.axm-permissions-editor .__permissions .__content .__list{width:100%}.axm-permissions-editor .__permissions .__content .__list .__item .__children{margin-left:.5rem;border-left-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lighter-surface),var(--tw-border-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Angular
+                CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
+                // ACoreX
+                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i6.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i7.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTooltipModule }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-permissions-editor', imports: [
+                        // Angular
+                        CommonModule,
+                        FormsModule,
+                        // ACoreX
+                        AXFormModule,
+                        AXTextBoxModule,
+                        AXButtonModule,
+                        AXLabelModule,
+                        AXCheckBoxModule,
+                        AXTabsModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXBadgeModule,
+                        AXCheckBoxModule,
+                        AXTooltipModule,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"axm-permissions-editor\">\n\n    <div class=\"ax-flex ax-min-h-96\">\n\n        <div class=\"__groups ax-p-4 ax-min-h-full ax-overflow-auto ax-w-2/5\">\n\n            <ax-tabs location=\"start\" look=\"with-line-color\" class=\"ax-h-full\">\n                @for (group of groupsWithBadge(); track $index) {\n                <ax-tab-item [active]=\"group.name === selectedGroup()?.name\" [text]=\"group.title\"\n                    (onClick)=\"handleMenuItemClick(group)\">\n                    <ax-suffix>\n                        <ax-badge color=\"primary\" [text]=\"group.badge\"></ax-badge>\n                    </ax-suffix>\n                </ax-tab-item>\n                }\n            </ax-tabs>\n\n        </div>\n\n        <div class=\"__permissions ax-flex ax-h-full ax-overflow-auto ax-flex-col ax-w-3/5 ax-border-s\">\n\n            <div class=\"__header ax-p-4 ax-border-b ax-border-lightest\">\n                <span class=\"ax-h6\">{{ selectedGroup()?.title! }}</span>\n            </div>\n\n            <div class=\"__content ax-flex ax-p-4\">\n\n                <ul class=\"__list\">\n                    <ng-template #recursiveList let-items>\n                        @for (item of items; track $index) {\n                        <li class=\"__item ax-py-1 ax-ps-2\">\n\n                            <ax-check-box [ngModel]=\"item.isSelected\" [readonly]=\"readOnly()\"\n                                (onValueChanged)=\"onPermissionToggle(item, $event)\">\n                                <ax-label>\n                                    {{ item.title }}\n                                    @if (item.description) {\n                                    <i class=\"ax-ps-2 ax-text-xs fa-light fa-circle-info\"\n                                        [title]=\"item.description\"></i>\n                                    }\n                                </ax-label>\n                            </ax-check-box>\n\n                            @if (item.children && item.children.length > 0) {\n                            <ul class=\"__children ax-p-2 ax-mt-1 ax-ms-1\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"recursiveList; context: { $implicit: item.children }\"></ng-container>\n                            </ul>\n                            }\n\n                        </li>\n                        }\n                    </ng-template>\n                    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items() }\"></ng-container>\n                </ul>\n\n            </div>\n\n        </div>\n\n    </div>\n\n</div>", styles: [".axm-permissions-editor{display:flex;height:100%;flex-direction:column}.axm-permissions-editor .__groups .__tabs{height:100%}.axm-permissions-editor .__permissions .__header .__title{font-size:1rem;font-weight:500;line-height:1rem}.axm-permissions-editor .__permissions .__content .__list{width:100%}.axm-permissions-editor .__permissions .__content .__list .__item .__children{margin-left:.5rem;border-left-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lighter-surface),var(--tw-border-opacity, 1))}\n"] }]
+        }] });
+
+// #region ----------------   Imports   ----------------
+// #endregion
+class AXPPermissionsEditorPopupComponent extends AXPPopupLayoutBaseComponent {
+    constructor() {
+        super(...arguments);
+        /** Initial permissions to be selected */
+        this.initialPermissions = [];
+    }
+    // #endregion
+    // #region ----------------   Lifecycle Methods   ----------------
+    /**
+     * Initializes the component.
+     */
+    async ngOnInit() {
+        super.ngOnInit();
+        // Any popup-specific initialization can go here
+    }
+    // #endregion
+    // #region ----------------   UI Handlers   ----------------
+    /**
+     * Returns the primary menu items for the popup layout.
+     */
+    getPrimaryMenuItems() {
+        return [
+            {
+                title: 't("select")',
+                icon: 'fa-solid fa-check',
+                command: {
+                    name: 'select'
+                }
+            }
+        ];
+    }
+    /**
+     * Handles permission selection changes from the editor component.
+     */
+    onPermissionsChanged(permissions) {
+        // Handle permission changes if needed for popup-specific logic
+    }
+    /**
+     * Handles when permissions are selected from the editor component.
+     */
+    onPermissionsSelected(permissions) {
+        this.close(permissions);
+    }
+    /**
+     * Executes popup commands.
+     */
+    execute(command) {
+        if (command.name === 'select') {
+            const selectedPermissions = this.permissionEditor.getSelectedPermissions();
+            this.close(selectedPermissions);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsEditorPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPPermissionsEditorPopupComponent, isStandalone: true, selector: "axm-permissions-editor-popup", providers: [
+            {
+                provide: AXPPopupLayoutBase,
+                useExisting: AXPPermissionsEditorPopupComponent
+            }
+        ], viewQueries: [{ propertyName: "permissionEditor", first: true, predicate: AXPPermissionsEditorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<axp-popup-layout>\n    <axp-page-content>\n        <axm-permissions-editor [initialPermissions]=\"initialPermissions\"\n            (permissionsChanged)=\"onPermissionsChanged($event)\" (permissionsSelected)=\"onPermissionsSelected($event)\">\n        </axm-permissions-editor>\n    </axp-page-content>\n</axp-popup-layout>", dependencies: [{ kind: "ngmodule", type: 
+                // Angular
+                CommonModule }, { kind: "ngmodule", type: 
+                // ACoreX
+                AXTranslationModule }, { kind: "component", type: 
+                // Platform
+                AXPPopupLayoutComponent, selector: "axp-popup-layout" }, { kind: "component", type: 
+                // Local
+                AXPPermissionsEditorComponent, selector: "axm-permissions-editor", inputs: ["initialPermissions", "readOnly"], outputs: ["permissionsChanged", "permissionsSelected"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsEditorPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-permissions-editor-popup', imports: [
+                        // Angular
+                        CommonModule,
+                        // ACoreX
+                        AXTranslationModule,
+                        // Platform
+                        AXPPopupLayoutComponent,
+                        // Local
+                        AXPPermissionsEditorComponent,
+                        AXPThemeLayoutBlockComponent
+                    ], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: AXPPopupLayoutBase,
+                            useExisting: AXPPermissionsEditorPopupComponent
+                        }
+                    ], template: "<axp-popup-layout>\n    <axp-page-content>\n        <axm-permissions-editor [initialPermissions]=\"initialPermissions\"\n            (permissionsChanged)=\"onPermissionsChanged($event)\" (permissionsSelected)=\"onPermissionsSelected($event)\">\n        </axm-permissions-editor>\n    </axp-page-content>\n</axp-popup-layout>" }]
+        }], propDecorators: { permissionEditor: [{
+                type: ViewChild,
+                args: [AXPPermissionsEditorComponent]
+            }] } });
+
+var permissionsEditorPopup_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPPermissionsEditorPopupComponent: AXPPermissionsEditorPopupComponent
+});
+
+class AXPPermissionsWidgetViewComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.permissionService = inject(AXPPermissionDefinitionService);
+        this.workflowService = inject(AXPWorkflowService);
+        this.groups = signal([]);
+        this.loadGroupsEffect = effect(async () => {
+            // Load groups when component initializes
+            if (this.groups().length === 0) {
+                const groupsData = await this.permissionService.getGroups();
+                this.groups.set(groupsData);
+            }
+        });
+        this.selectedPermissionsByGroup = computed(() => {
+            const selected = new Set(this.getValue() ?? []);
+            const result = {};
+            for (const group of this.groups()) {
+                const permPaths = [];
+                const findPermissionPaths = (items, path = []) => {
+                    for (const item of items) {
+                        const currentPath = [...path, item];
+                        if (selected.has(item.name)) {
+                            const displayPath = currentPath.map(p => p.title).join(' > ');
+                            permPaths.push({
+                                group,
+                                path: currentPath,
+                                displayPath
+                            });
+                        }
+                        if (item.children?.length) {
+                            findPermissionPaths(item.children, currentPath);
+                        }
+                    }
+                };
+                findPermissionPaths(group.permissions);
+                result[group.name] = permPaths;
+            }
+            return result;
+        });
+        this.isEmpty = computed(() => {
+            return Object.values(this.selectedPermissionsByGroup()).every(arr => !arr.length);
+        });
+    }
+    async openPermissionsEditor() {
+        await this.workflowService.execute('assign-permissions', {
+            data: this.contextService.data(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPPermissionsWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <!-- <axm-permissions-editor
+      [initialPermissions]="getValue() || []"
+      [readOnly]="true">
+    </axm-permissions-editor> -->
+    <div class="ax-flex ax-flex-col ax-gap-2">
+      @for (group of groups(); track group.name) {
+        <div *ngIf="selectedPermissionsByGroup()[group.name]?.length">
+          <div class="ax-text-xs ax-font-semibold ax-mb-2 ax-text-muted">{{ group.title }}</div>
+          <div class="ax-flex ax-gap-1 ax-flex-wrap">
+            @for (permPath of selectedPermissionsByGroup()[group.name]; track permPath.path[permPath.path.length - 1].name) {
+              <ax-badge [text]="permPath.displayPath" color="primary" size="sm"></ax-badge>
+            }
+          </div>
+        </div>
+      }
+      @if (isEmpty()) {
+        <div class="ax-text-muted">{{'@security-management:features.permissions.no-permissions' | translate | async}}</div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i7.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <!-- <axm-permissions-editor
+      [initialPermissions]="getValue() || []"
+      [readOnly]="true">
+    </axm-permissions-editor> -->
+    <div class="ax-flex ax-flex-col ax-gap-2">
+      @for (group of groups(); track group.name) {
+        <div *ngIf="selectedPermissionsByGroup()[group.name]?.length">
+          <div class="ax-text-xs ax-font-semibold ax-mb-2 ax-text-muted">{{ group.title }}</div>
+          <div class="ax-flex ax-gap-1 ax-flex-wrap">
+            @for (permPath of selectedPermissionsByGroup()[group.name]; track permPath.path[permPath.path.length - 1].name) {
+              <ax-badge [text]="permPath.displayPath" color="primary" size="sm"></ax-badge>
+            }
+          </div>
+        </div>
+      }
+      @if (isEmpty()) {
+        <div class="ax-text-muted">{{'@security-management:features.permissions.no-permissions' | translate | async}}</div>
+      }
+    </div>
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXBadgeModule, AXTranslationModule]
+                }]
+        }] });
+
+var permissionsWidgetView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPPermissionsWidgetViewComponent: AXPPermissionsWidgetViewComponent
+});
+
+class AXPPermissionsWidgetEditComponent extends AXPValueWidgetComponent {
+    // #region ----------------   UI Handlers   ----------------
+    /**
+     * Handles permissions changes from the editor.
+     */
+    onPermissionsChanged(permissions) {
+        this.setValue(permissions);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPPermissionsWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <axm-permissions-editor
+      [initialPermissions]="getValue() || []"
+      [readOnly]="false"
+      (permissionsChanged)="onPermissionsChanged($event)">
+    </axm-permissions-editor>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: 
+                // Angular
+                CommonModule }, { kind: "component", type: 
+                // Local
+                AXPPermissionsEditorComponent, selector: "axm-permissions-editor", inputs: ["initialPermissions", "readOnly"], outputs: ["permissionsChanged", "permissionsSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <axm-permissions-editor
+      [initialPermissions]="getValue() || []"
+      [readOnly]="false"
+      (permissionsChanged)="onPermissionsChanged($event)">
+    </axm-permissions-editor>
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        // Angular
+                        CommonModule,
+                        // Local
+                        AXPPermissionsEditorComponent
+                    ]
+                }]
+        }] });
+
+var permissionsWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPPermissionsWidgetEditComponent: AXPPermissionsWidgetEditComponent
+});
+
+class AXPPermissionsWidgetColumnComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.count = computed(() => castArray(this.rawValue).length);
+        this.workflowService = inject(AXPWorkflowService);
+    }
+    async openPermissionsEditor() {
+        await this.workflowService.execute('assign-permissions', {
+            data: this.rowData
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPPermissionsWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
+    <span class="ax-cursor-pointer ax-text-primary ax-underline" (click)="openPermissionsEditor()">{{count()}}  {{'@security-management:features.permissions.terms.permissions' | translate | async}}</span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsWidgetColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <span class="ax-cursor-pointer ax-text-primary ax-underline" (click)="openPermissionsEditor()">{{count()}}  {{'@security-management:features.permissions.terms.permissions' | translate | async}}</span>
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXTranslationModule],
+                    inputs: ['rawValue', 'rowData']
+                }]
+        }] });
+
+var permissionsWidgetColumn_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPPermissionsWidgetColumnComponent: AXPPermissionsWidgetColumnComponent
+});
+
+class AXPPermissionsWidgetPrintComponent extends AXPLayoutWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPPermissionsWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsWidgetPrintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [],
+                    inputs: []
+                }]
+        }] });
+
+var permissionsWidgetPrint_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPPermissionsWidgetPrintComponent: AXPPermissionsWidgetPrintComponent
+});
+
+class AXPPermissionsWidgetDesignerComponent extends AXPLayoutWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPPermissionsWidgetDesignerComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPermissionsWidgetDesignerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: []
+                }]
+        }] });
+
+var permissionsWidgetDesigner_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPPermissionsWidgetDesignerComponent: AXPPermissionsWidgetDesignerComponent
+});
+
+// Permission Editor Components
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXMDeviceSessionsService, AXMDeviceSessionsServiceImpl, AXMSecurityManagementDeviceSessionsEntityModule, AXMSecurityManagementModule, AXMSecurityManagementRolesEntityService, AXMSecurityManagementRolesEntityServiceImpl, AXMSessionStatusTypes, AXMUsersEntityService, AXMUsersEntityServiceImpl, AXPSecurityManagementMenuKeys, RootConfig, factory$3 as factory };
+export { AXMDeviceSessionsService, AXMDeviceSessionsServiceImpl, AXMPermissionsModule, AXMSecurityManagementDeviceSessionsEntityModule, AXMSecurityManagementModule, AXMSecurityManagementRolesEntityService, AXMSecurityManagementRolesEntityServiceImpl, AXMSessionStatusTypes, AXMUsersEntityService, AXMUsersEntityServiceImpl, AXPPermissionsEditorComponent, AXPPermissionsEditorPopupComponent, AXPPermissionsWidget, AXPPermissionsWidgetColumnComponent, AXPPermissionsWidgetDesignerComponent, AXPPermissionsWidgetEditComponent, AXPPermissionsWidgetPrintComponent, AXPPermissionsWidgetViewComponent, AXPSecurityManagementMenuKeys, RootConfig, factory$3 as factory };
 //# sourceMappingURL=acorex-modules-security-management.mjs.map