@acorex/modules 18.1.0 → 18.1.2

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

@@ -1,16 +1,15 @@
-import { AXPEntityDetailViewModelResolver, AXPEntityDefinitionRegistryService } from '@acorex/platform/layout/entity';
-import { AXPRootLayoutComponent } from '@acorex/platform/themes/default';
+import { AXPEntityDefinitionRegistryService, AXP_ENTITY_CONFIG_TOKEN, AXPEntityMasterUpdateViewModelFactory, AXPEntityDetailViewModelResolver } from '@acorex/platform/layout/entity';
+import { AXPEntityDetailListViewComponent, AXPRootLayoutComponent } from '@acorex/platform/themes/default';
 import * as i1$1 from '@acorex/platform/workflow';
-import { AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
+import { AXPWorkflowService, AXPWorkflowAction, createWorkFlowEvent, AXPWorkflowModule } from '@acorex/platform/workflow';
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, Component, ChangeDetectionStrategy, Injector, NgModule, Optional, Inject } from '@angular/core';
+import { inject, signal, Component, ChangeDetectionStrategy, Injectable, Injector, NgModule, Optional, Inject } from '@angular/core';
 import * as i2 from '@angular/router';
 import { ActivatedRoute, RouterModule } from '@angular/router';
-import { AXPWorkflowNavigateAction, isSmallScreen, getChildDrawer, AXPStickyDirective, AXPGridLayoutDirective, AXPDataGenerator, AXPStorageService, AXPEntityDataProviderImpl, AXPEntityQueryType, AXPEntityCommandScope } from '@acorex/platform/common';
 import { AXActionSheetModule } from '@acorex/components/action-sheet';
-import * as i7 from '@acorex/components/breadcrumbs';
+import * as i8 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
-import * as i6 from '@acorex/components/button';
+import * as i7 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
@@ -22,59 +21,64 @@ import * as i5 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXPopoverModule } from '@acorex/components/popover';
+import * as i6 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXTranslationModule } from '@acorex/core/translation';
-import * as i8 from '@acorex/platform/layout/builder';
+import { isSmallScreen, getChildDrawer, AXPStickyDirective, AXPGridLayoutDirective, AXPWorkflowNavigateAction, AXPDataGenerator, AXPStorageService, AXPEntityDataProviderImpl, AXPEntityQueryType, AXPEntityCommandScope } from '@acorex/platform/common';
+import * as i9 from '@acorex/platform/layout/builder';
 import { AXPLayoutBuilderModule, AXPWidgetsCatalog } from '@acorex/platform/layout/builder';
 import { AXPWidgetsModule } from '@acorex/platform/widgets';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Store } from '@ngrx/store';
+import { AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/designer';
+import { AXPopupService } from '@acorex/components/popup';
+import { AXPlatform } from '@acorex/core/platform';
+import { cloneDeep } from 'lodash-es';
 import { applySortArray, applyFilterArray } from '@acorex/platform/core';
 
-class AXPShowModuleEntityDetailViewAction extends AXPWorkflowAction {
-    constructor() {
-        super(...arguments);
-        this.navigation = inject(AXPWorkflowNavigateAction);
-    }
-    async execute(context) {
-        const [module, entity] = context.getVariable('entity').split('.');
-        const { id } = context.getVariable('data');
-        const newPayload = {
-            commands: `/console/module-designer/m/${module}/e/${entity}/${id}/view`,
-        };
-        context.setVariable('payload', newPayload);
-        this.navigation.execute(context);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowModuleEntityDetailViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowModuleEntityDetailViewAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowModuleEntityDetailViewAction, decorators: [{
-            type: Injectable
-        }] });
-
 class AXPModuleEntityDetailViewComponent {
     constructor() {
         this.activeRoute = inject(ActivatedRoute);
+        this.workflow = inject(AXPWorkflowService);
         this.vm = this.activeRoute.snapshot.data['vm'];
         //
         this.store = inject((Store));
         this.isSM = this.store.select(isSmallScreen());
         this.isOpen = this.store.select(getChildDrawer());
+        this.selectedRelatedIEntityTabIndex = signal(0);
         this.selectedDetailTabIndex = signal(0);
     }
+    handleActiveRelatedEntityChanged(e) {
+        this.selectedRelatedIEntityTabIndex.set(e.index);
+        this.vm.sections;
+    }
     handleActiveDetailTabChanged(e) {
         this.selectedDetailTabIndex.set(e.index);
     }
+    handleEditSection(section) {
+        if (section.group.id === 'interface') {
+            this.workflow.execute('modify-property-interface', {
+                entity: 'application.property',
+                data: {
+                    id: this.vm.context().id,
+                    properties: section.editableProps().map((m) => m.name()),
+                },
+            });
+        }
+        else {
+            this.vm.executeCommand('modify-entity-section', section);
+        }
+    }
     ngOnDestroy() {
         this.vm.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPModuleEntityDetailViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPModuleEntityDetailViewComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div\n  class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\"\n>\n  <div\n    class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n    #sticky=\"axpSticky\"\n    [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\"\n    [stickyOffset]=\"30\"\n  >\n    <!-------- Begin Toolbar  -------->\n    <div class=\"ax-flex ax-justify-between ax-items-center\">\n      <!-------- Begin Title  -------->\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-transition\">\n          <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ vm.title() }}</div>\n          @if(vm.description()) {\n          <div class=\"ax-text-sm ax-text-neutral-600\" [class.ax-hidden]=\"sticky.isSticky\">\n            {{ vm.description() }}\n          </div>\n          }\n          <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\" [class.ax-hidden]=\"isSM | async\">\n            <ng-template #divider>\n              <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\n            </ng-template>\n            @for(b of vm.beardcrumbs();track $index;let last=$last) {\n            <ax-breadcrumbs-item\n              [active]=\"last\"\n              [class.!ax-font-semibold]=\"last\"\n              [class.!ax-text-neutral-600]=\"last\"\n              [routerLink]=\"b.url\"\n            >\n              @if(b.icon) {\n              <i [class]=\"b.icon\"></i>\n              }\n              {{ b.title }}\n            </ax-breadcrumbs-item>\n            }\n          </ax-breadcrumbs>\n        </div>\n      </div>\n      <!-------- Finish Title  -------->\n      <!--------------------------------------------------------------->\n      <!-- Begin Action Menu  -->\n      <div class=\"ax-flex ax-items-center ax-gap-3\">\n        @for(tr of vm.primaryActions();track $index) {\n        <ax-button [text]=\"tr.title\" [color]=\"tr.color\" (onClick)=\"vm.executeCommand(tr.name)\">\n          <ax-prefix>\n            <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n          </ax-prefix>\n        </ax-button>\n        } @if(vm.secondaryActions().length) {\n        <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\n          <ax-prefix>\n            <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n          </ax-prefix>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for(tr of vm.secondaryActions();track $index) {\n              <ng-container>\n                @if(tr.separated) {\n                <ax-divider></ax-divider>\n                }\n                <ax-button-item\n                  [text]=\"tr.title\"\n                  class=\"ax-font-semibold ax-text-{{ tr.color }}\"\n                  (onClick)=\"vm.executeCommand(tr.name)\"\n                >\n                  <ax-prefix>\n                    <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ng-container>\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n        }\n      </div>\n      <!-- Finish Action Menu  -->\n    </div>\n    <!-- Start Sections  -->\n    <div class=\"ax-grid ax-grid-cols-12 ax-gap-4\">\n      @for(section of vm.sections(); track section.name()) {\n      <div class=\"ax-card ax-shadow-md ax-mt-2\" [gridLayout]=\"section.layout()\">\n        <ax-form #form>\n          <axp-widgets-container [context]=\"vm.context()\">\n            <div class=\"ax-card-header !ax-py-2 !ax-px-4\">\n              <p>\n                <span class=\"!ax-text-lg ax-font-semibold\">{{ section.title() }}</span>\n                <br />\n                @if(section.description()) {\n                <span class=\"ax-text-sm ax-font-normal ax-text-gray-500\">{{ section.description() }}</span>\n                }\n              </p>\n              @if(section.editable()) {\n              <ax-button\n                class=\"ax-xs\"\n                color=\"ghost\"\n                [look]=\"'blank'\"\n                (onClick)=\"vm.executeCommand('modify-entity-section', section)\"\n              >\n                <ax-icon class=\"fa-solid fa-pen ax-text-gray-600\"> </ax-icon>\n              </ax-button>\n              }\n            </div>\n            <div class=\"ax-card-body !ax-grid !ax-grid-cols-12 !ax-gap-4\">\n              @for(attr of section.props(); track $index) {\n              <div class=\"ax-flex ax-flex-col ax-gap-1\" [gridLayout]=\"attr.layout()\">\n                <div>\n                  <div>\n                    <span class=\"ax-font-semibold\">{{ attr.title() }}</span>\n                  </div>\n                </div>\n                <div class=\"ax-text-neutral-500\">\n                  <axp-widget-renderer [node]=\"attr.node()\" [mode]=\"'view'\"> </axp-widget-renderer>\n                </div>\n              </div>\n              }\n            </div>\n          </axp-widgets-container>\n        </ax-form>\n      </div>\n      }\n    </div>\n    <!-- Finish Sections  -->\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i5.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i6.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i6.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i7.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i7.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPModuleEntityDetailViewComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div\n  class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\"\n>\n  <div\n    class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n    #sticky=\"axpSticky\"\n    [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\"\n    [stickyOffset]=\"30\"\n  >\n    <!-------- Begin Toolbar  -------->\n    <div class=\"ax-flex ax-justify-between ax-items-center\">\n      <!-------- Begin Title  -------->\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-transition\">\n          <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ vm.title() }}</div>\n          @if(vm.description()) {\n          <div class=\"ax-text-sm ax-text-neutral-600\" [class.ax-hidden]=\"sticky.isSticky\">\n            {{ vm.description() }}\n          </div>\n          }\n          <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\" [class.ax-hidden]=\"isSM | async\">\n            <ng-template #divider>\n              <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\n            </ng-template>\n            @for(b of vm.beardcrumbs();track $index;let last=$last) {\n            <ax-breadcrumbs-item\n              [active]=\"last\"\n              [class.!ax-font-semibold]=\"last\"\n              [class.!ax-text-neutral-600]=\"last\"\n              [routerLink]=\"b.url\"\n            >\n              @if(b.icon) {\n              <i [class]=\"b.icon\"></i>\n              }\n              {{ b.title }}\n            </ax-breadcrumbs-item>\n            }\n          </ax-breadcrumbs>\n        </div>\n      </div>\n      <!-------- Finish Title  -------->\n      <!--------------------------------------------------------------->\n      <!-- Begin Action Menu  -->\n      <div class=\"ax-flex ax-items-center ax-gap-3\">\n        @for(tr of vm.primaryActions();track $index) {\n        <ax-button [text]=\"tr.title\" [color]=\"tr.color\" (onClick)=\"vm.executeCommand(tr.name)\">\n          <ax-prefix>\n            <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n          </ax-prefix>\n        </ax-button>\n        } @if(vm.secondaryActions().length) {\n        <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\n          <ax-prefix>\n            <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n          </ax-prefix>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for(tr of vm.secondaryActions();track $index) {\n              <ng-container>\n                @if(tr.separated) {\n                <ax-divider></ax-divider>\n                }\n                <ax-button-item\n                  [text]=\"tr.title\"\n                  class=\"ax-font-semibold ax-text-{{ tr.color }}\"\n                  (onClick)=\"vm.executeCommand(tr.name)\"\n                >\n                  <ax-prefix>\n                    <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ng-container>\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n        }\n      </div>\n      <!-- Finish Action Menu  -->\n    </div>\n    <!-- Start Sections  -->\n    <div class=\"ax-grid ax-grid-cols-12 ax-gap-4\">\n      @for(section of vm.sections(); track section.name()) {\n      <div class=\"ax-card ax-mt-4\" [gridLayout]=\"section.layout()\">\n        <ax-form #form>\n          <axp-widgets-container [context]=\"vm.context()\">\n            <div class=\"ax-card-header !ax-py-2 !ax-px-4\">\n              <p>\n                <span class=\"!ax-text-lg ax-font-semibold\">{{ section.title() }}</span>\n                <br />\n                @if(section.description()) {\n                <span class=\"ax-text-sm ax-font-normal ax-text-gray-500\">{{ section.description() }}</span>\n                }\n              </p>\n              @if(section.editable()) {\n              <ax-button\n                class=\"ax-xs\"\n                color=\"ghost\"\n                [look]=\"'blank'\"\n                (onClick)=\"handleEditSection(section)\"\n              >\n                <ax-icon class=\"fa-solid fa-pen ax-text-gray-600\"> </ax-icon>\n              </ax-button>\n              }\n            </div>\n            <div class=\"ax-card-body !ax-grid !ax-grid-cols-12 !ax-gap-4\">\n              @for(attr of section.props(); track $index) {\n              <div class=\"ax-flex ax-flex-col ax-gap-1\" [gridLayout]=\"attr.layout()\">\n                <div>\n                  <div>\n                    <span class=\"ax-font-semibold\">{{ attr.title() }}</span>\n                  </div>\n                </div>\n                <div class=\"ax-text-neutral-500\">\n                  <axp-widget-renderer [node]=\"attr.node()\" [mode]=\"'view'\"> </axp-widget-renderer>\n                </div>\n              </div>\n              }\n            </div>\n          </axp-widgets-container>\n        </ax-form>\n      </div>\n      }\n    </div>\n    <!-- Finish Sections  -->\n    @if(vm.relatedEntities().length) {\n    <ax-tabs\n      [look]=\"'with-line'\"\n      class=\"ax-mt-2 ax-font-semibold\"\n      #tab\n      (onActiveTabChanged)=\"handleActiveRelatedEntityChanged($event)\"\n    >\n      @for(e of vm.relatedEntities();track $index;let index= $index){\n      <ax-tab-item [text]=\"e.title()\" [key]=\"index.toString()\"> </ax-tab-item>\n      }\n    </ax-tabs>\n    @for(e of vm.relatedEntities();track $index;let index= $index){\n    <div [class.ax-hidden]=\"$index !== selectedRelatedIEntityTabIndex()\">\n      <axp-entity-detail-list-view [viewModel]=\"e\"></axp-entity-detail-list-view>\n    </div>\n    } }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i5.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i7.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i7.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i7.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i8.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i8.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: 
                 //
-                AXPLayoutBuilderModule }, { kind: "component", type: i8.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "component", type: i8.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[gridLayout]", inputs: ["gridLayout"] }, { kind: "ngmodule", type: 
+                AXPLayoutBuilderModule }, { kind: "component", type: i9.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["onChanged", "contextChange"] }, { kind: "component", type: i9.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node", "mode", "parentNode", "index"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[gridLayout]", inputs: ["gridLayout"] }, { kind: "ngmodule", type: 
                 //
-                AXTranslationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                AXTranslationModule }, { kind: "component", type: AXPEntityDetailListViewComponent, selector: "axp-entity-detail-list-view", inputs: ["viewModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPModuleEntityDetailViewComponent, decorators: [{
             type: Component,
@@ -99,9 +103,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXPGridLayoutDirective,
                         //
                         AXTranslationModule,
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\"\n>\n  <div\n    class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n    #sticky=\"axpSticky\"\n    [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\"\n    [stickyOffset]=\"30\"\n  >\n    <!-------- Begin Toolbar  -------->\n    <div class=\"ax-flex ax-justify-between ax-items-center\">\n      <!-------- Begin Title  -------->\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-transition\">\n          <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ vm.title() }}</div>\n          @if(vm.description()) {\n          <div class=\"ax-text-sm ax-text-neutral-600\" [class.ax-hidden]=\"sticky.isSticky\">\n            {{ vm.description() }}\n          </div>\n          }\n          <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\" [class.ax-hidden]=\"isSM | async\">\n            <ng-template #divider>\n              <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\n            </ng-template>\n            @for(b of vm.beardcrumbs();track $index;let last=$last) {\n            <ax-breadcrumbs-item\n              [active]=\"last\"\n              [class.!ax-font-semibold]=\"last\"\n              [class.!ax-text-neutral-600]=\"last\"\n              [routerLink]=\"b.url\"\n            >\n              @if(b.icon) {\n              <i [class]=\"b.icon\"></i>\n              }\n              {{ b.title }}\n            </ax-breadcrumbs-item>\n            }\n          </ax-breadcrumbs>\n        </div>\n      </div>\n      <!-------- Finish Title  -------->\n      <!--------------------------------------------------------------->\n      <!-- Begin Action Menu  -->\n      <div class=\"ax-flex ax-items-center ax-gap-3\">\n        @for(tr of vm.primaryActions();track $index) {\n        <ax-button [text]=\"tr.title\" [color]=\"tr.color\" (onClick)=\"vm.executeCommand(tr.name)\">\n          <ax-prefix>\n            <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n          </ax-prefix>\n        </ax-button>\n        } @if(vm.secondaryActions().length) {\n        <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\n          <ax-prefix>\n            <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n          </ax-prefix>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for(tr of vm.secondaryActions();track $index) {\n              <ng-container>\n                @if(tr.separated) {\n                <ax-divider></ax-divider>\n                }\n                <ax-button-item\n                  [text]=\"tr.title\"\n                  class=\"ax-font-semibold ax-text-{{ tr.color }}\"\n                  (onClick)=\"vm.executeCommand(tr.name)\"\n                >\n                  <ax-prefix>\n                    <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ng-container>\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n        }\n      </div>\n      <!-- Finish Action Menu  -->\n    </div>\n    <!-- Start Sections  -->\n    <div class=\"ax-grid ax-grid-cols-12 ax-gap-4\">\n      @for(section of vm.sections(); track section.name()) {\n      <div class=\"ax-card ax-shadow-md ax-mt-2\" [gridLayout]=\"section.layout()\">\n        <ax-form #form>\n          <axp-widgets-container [context]=\"vm.context()\">\n            <div class=\"ax-card-header !ax-py-2 !ax-px-4\">\n              <p>\n                <span class=\"!ax-text-lg ax-font-semibold\">{{ section.title() }}</span>\n                <br />\n                @if(section.description()) {\n                <span class=\"ax-text-sm ax-font-normal ax-text-gray-500\">{{ section.description() }}</span>\n                }\n              </p>\n              @if(section.editable()) {\n              <ax-button\n                class=\"ax-xs\"\n                color=\"ghost\"\n                [look]=\"'blank'\"\n                (onClick)=\"vm.executeCommand('modify-entity-section', section)\"\n              >\n                <ax-icon class=\"fa-solid fa-pen ax-text-gray-600\"> </ax-icon>\n              </ax-button>\n              }\n            </div>\n            <div class=\"ax-card-body !ax-grid !ax-grid-cols-12 !ax-gap-4\">\n              @for(attr of section.props(); track $index) {\n              <div class=\"ax-flex ax-flex-col ax-gap-1\" [gridLayout]=\"attr.layout()\">\n                <div>\n                  <div>\n                    <span class=\"ax-font-semibold\">{{ attr.title() }}</span>\n                  </div>\n                </div>\n                <div class=\"ax-text-neutral-500\">\n                  <axp-widget-renderer [node]=\"attr.node()\" [mode]=\"'view'\"> </axp-widget-renderer>\n                </div>\n              </div>\n              }\n            </div>\n          </axp-widgets-container>\n        </ax-form>\n      </div>\n      }\n    </div>\n    <!-- Finish Sections  -->\n  </div>\n</div>\n" }]
+                        AXPEntityDetailListViewComponent,
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\"\n>\n  <div\n    class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n    #sticky=\"axpSticky\"\n    [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\"\n    [stickyOffset]=\"30\"\n  >\n    <!-------- Begin Toolbar  -------->\n    <div class=\"ax-flex ax-justify-between ax-items-center\">\n      <!-------- Begin Title  -------->\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-transition\">\n          <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ vm.title() }}</div>\n          @if(vm.description()) {\n          <div class=\"ax-text-sm ax-text-neutral-600\" [class.ax-hidden]=\"sticky.isSticky\">\n            {{ vm.description() }}\n          </div>\n          }\n          <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\" [class.ax-hidden]=\"isSM | async\">\n            <ng-template #divider>\n              <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\n            </ng-template>\n            @for(b of vm.beardcrumbs();track $index;let last=$last) {\n            <ax-breadcrumbs-item\n              [active]=\"last\"\n              [class.!ax-font-semibold]=\"last\"\n              [class.!ax-text-neutral-600]=\"last\"\n              [routerLink]=\"b.url\"\n            >\n              @if(b.icon) {\n              <i [class]=\"b.icon\"></i>\n              }\n              {{ b.title }}\n            </ax-breadcrumbs-item>\n            }\n          </ax-breadcrumbs>\n        </div>\n      </div>\n      <!-------- Finish Title  -------->\n      <!--------------------------------------------------------------->\n      <!-- Begin Action Menu  -->\n      <div class=\"ax-flex ax-items-center ax-gap-3\">\n        @for(tr of vm.primaryActions();track $index) {\n        <ax-button [text]=\"tr.title\" [color]=\"tr.color\" (onClick)=\"vm.executeCommand(tr.name)\">\n          <ax-prefix>\n            <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n          </ax-prefix>\n        </ax-button>\n        } @if(vm.secondaryActions().length) {\n        <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\n          <ax-prefix>\n            <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n          </ax-prefix>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for(tr of vm.secondaryActions();track $index) {\n              <ng-container>\n                @if(tr.separated) {\n                <ax-divider></ax-divider>\n                }\n                <ax-button-item\n                  [text]=\"tr.title\"\n                  class=\"ax-font-semibold ax-text-{{ tr.color }}\"\n                  (onClick)=\"vm.executeCommand(tr.name)\"\n                >\n                  <ax-prefix>\n                    <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ng-container>\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n        }\n      </div>\n      <!-- Finish Action Menu  -->\n    </div>\n    <!-- Start Sections  -->\n    <div class=\"ax-grid ax-grid-cols-12 ax-gap-4\">\n      @for(section of vm.sections(); track section.name()) {\n      <div class=\"ax-card ax-mt-4\" [gridLayout]=\"section.layout()\">\n        <ax-form #form>\n          <axp-widgets-container [context]=\"vm.context()\">\n            <div class=\"ax-card-header !ax-py-2 !ax-px-4\">\n              <p>\n                <span class=\"!ax-text-lg ax-font-semibold\">{{ section.title() }}</span>\n                <br />\n                @if(section.description()) {\n                <span class=\"ax-text-sm ax-font-normal ax-text-gray-500\">{{ section.description() }}</span>\n                }\n              </p>\n              @if(section.editable()) {\n              <ax-button\n                class=\"ax-xs\"\n                color=\"ghost\"\n                [look]=\"'blank'\"\n                (onClick)=\"handleEditSection(section)\"\n              >\n                <ax-icon class=\"fa-solid fa-pen ax-text-gray-600\"> </ax-icon>\n              </ax-button>\n              }\n            </div>\n            <div class=\"ax-card-body !ax-grid !ax-grid-cols-12 !ax-gap-4\">\n              @for(attr of section.props(); track $index) {\n              <div class=\"ax-flex ax-flex-col ax-gap-1\" [gridLayout]=\"attr.layout()\">\n                <div>\n                  <div>\n                    <span class=\"ax-font-semibold\">{{ attr.title() }}</span>\n                  </div>\n                </div>\n                <div class=\"ax-text-neutral-500\">\n                  <axp-widget-renderer [node]=\"attr.node()\" [mode]=\"'view'\"> </axp-widget-renderer>\n                </div>\n              </div>\n              }\n            </div>\n          </axp-widgets-container>\n        </ax-form>\n      </div>\n      }\n    </div>\n    <!-- Finish Sections  -->\n    @if(vm.relatedEntities().length) {\n    <ax-tabs\n      [look]=\"'with-line'\"\n      class=\"ax-mt-2 ax-font-semibold\"\n      #tab\n      (onActiveTabChanged)=\"handleActiveRelatedEntityChanged($event)\"\n    >\n      @for(e of vm.relatedEntities();track $index;let index= $index){\n      <ax-tab-item [text]=\"e.title()\" [key]=\"index.toString()\"> </ax-tab-item>\n      }\n    </ax-tabs>\n    @for(e of vm.relatedEntities();track $index;let index= $index){\n    <div [class.ax-hidden]=\"$index !== selectedRelatedIEntityTabIndex()\">\n      <axp-entity-detail-list-view [viewModel]=\"e\"></axp-entity-detail-list-view>\n    </div>\n    } }\n  </div>\n</div>\n" }]
         }] });
 
+class AXPModifyPropertyInterfaceComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPModifyPropertyInterfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPModifyPropertyInterfaceComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "MODIFY\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: 
+                //
+                AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "ngmodule", type: 
+                //
+                AXTranslationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPModifyPropertyInterfaceComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        CommonModule,
+                        RouterModule,
+                        AXDecoratorModule,
+                        AXDropdownModule,
+                        AXPopoverModule,
+                        AXFormModule,
+                        AXActionSheetModule,
+                        AXDrawerModule,
+                        AXDialogModule,
+                        AXLoadingModule,
+                        AXTabsModule,
+                        AXButtonModule,
+                        AXBreadcrumbsModule,
+                        //
+                        AXPLayoutBuilderModule,
+                        AXPWidgetsModule,
+                        AXPStickyDirective,
+                        AXPGridLayoutDirective,
+                        AXPWidgetPropertyViewerComponent,
+                        //
+                        AXTranslationModule,
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "MODIFY\n" }]
+        }] });
+
+class AXPShowModuleEntityDetailViewAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.navigation = inject(AXPWorkflowNavigateAction);
+    }
+    async execute(context) {
+        const [module, entity] = context.getVariable('entity').split('.');
+        const { id } = context.getVariable('data');
+        const newPayload = {
+            commands: `/console/module-designer/m/${module}/e/${entity}/${id}/view`,
+        };
+        context.setVariable('payload', newPayload);
+        this.navigation.execute(context);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowModuleEntityDetailViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowModuleEntityDetailViewAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowModuleEntityDetailViewAction, decorators: [{
+            type: Injectable
+        }] });
 const AXPCreateModuleEntityWorkflow = {
     startStepId: 'show-popup',
     steps: {
@@ -144,6 +204,78 @@ const AXPCreateModuleEntityWorkflow = {
     },
 };
 
+const AXPEntityModifyEvent = createWorkFlowEvent('[Entity] Modified');
+class AXPEntityModifyPropertyInterfacePopupAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.popupService = inject(AXPopupService);
+        this.platform = inject(AXPlatform);
+        this.entityRegistery = inject(AXPEntityDefinitionRegistryService);
+        this.config = inject(AXP_ENTITY_CONFIG_TOKEN);
+        this.factory = inject(AXPEntityMasterUpdateViewModelFactory);
+    }
+    async execute(context) {
+        const [moduleName, entityName] = context.getVariable('entity').split('.');
+        const { properties, id, title } = context.getVariable('data');
+        const entityRef = await this.entityRegistery.resolve(moduleName, entityName);
+        const vm = await this.factory.create(moduleName, entityName, id, properties);
+        const com = await this.config.viewers.master.modify();
+        const popup = await this.popupService.open(com, {
+            title: title ?? `Modify ${entityRef.formats.individual}`,
+            size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
+            data: {
+                vm,
+                properties,
+                entity: entityRef,
+            },
+        });
+        context.setOutput('result', false);
+        if (popup.data?.result == true) {
+            context.setOutput('result', true);
+            context.setVariable('data', cloneDeep(popup.data.context));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyPropertyInterfacePopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyPropertyInterfacePopupAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyPropertyInterfacePopupAction, decorators: [{
+            type: Injectable
+        }] });
+const AXPModifyPropertyInterfaceWorkflow = {
+    startStepId: 'modifyPopup',
+    steps: {
+        modifyPopup: {
+            id: 'modifyPopup',
+            action: 'AXPEntityModifyPropertyInterfacePopupAction',
+            nextSteps: [
+                {
+                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("result") == true' }],
+                    nextStepId: 'successToast',
+                },
+            ],
+        },
+        successToast: {
+            id: 'successToast',
+            action: 'AXPToastAction',
+            input: {
+                color: 'success',
+                title: 'Entity Modified',
+                content: 'Record has been successfully updated.',
+            },
+            nextSteps: [
+                {
+                    conditions: [],
+                    nextStepId: 'modifyConfirmed',
+                },
+            ],
+        },
+        modifyConfirmed: {
+            id: 'modifyConfirmed',
+            action: 'AXPEntityModifyConfirmedAction',
+        },
+    },
+};
+
 const AXPShowModuleEntityDetailsViewWorkflow = {
     startStepId: 'showDetailView',
     steps: {
@@ -160,7 +292,7 @@ const routes = [
         children: [
             {
                 path: 'module-designer',
-                loadComponent: () => import('./acorex-modules-application-management-module-designer.component-CDZZ-5pF.mjs').then((c) => c.AXMModuleDesignerComponent),
+                loadComponent: () => import('./acorex-modules-application-management-module-designer.component-CRPUuYUe.mjs').then((c) => c.AXMModuleDesignerComponent),
                 children: [
                     {
                         path: 'm/:module',
@@ -212,10 +344,12 @@ class AXMApplicationManagementModule {
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMApplicationManagementModule, imports: [AXPWorkflowModule.forChild({
                 actions: {
                     AXPShowModuleEntityDetailViewAction,
+                    AXPEntityModifyPropertyInterfacePopupAction,
                 },
                 workflows: {
                     'create-module-entity': AXPCreateModuleEntityWorkflow,
                     'show-module-entity-details': AXPShowModuleEntityDetailsViewWorkflow,
+                    'modify-property-interface': AXPModifyPropertyInterfaceWorkflow,
                 },
             }),
             RouterModule.forChild(routes)] }); }
@@ -227,10 +361,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXPWorkflowModule.forChild({
                             actions: {
                                 AXPShowModuleEntityDetailViewAction,
+                                AXPEntityModifyPropertyInterfacePopupAction,
                             },
                             workflows: {
                                 'create-module-entity': AXPCreateModuleEntityWorkflow,
                                 'show-module-entity-details': AXPShowModuleEntityDetailsViewWorkflow,
+                                'modify-property-interface': AXPModifyPropertyInterfaceWorkflow,
                             },
                         }),
                         RouterModule.forChild(routes),
@@ -332,6 +468,26 @@ const PERMISSIONS = Array.from({ length: 5 }).map((_, i) => {
         isArchived: AXPDataGenerator.boolean(),
     };
 });
+const PROPERTIES = Array.from({ length: 10 }).map((_, i) => {
+    const source = [
+        'property1',
+        'property2',
+        'property3',
+        'property4',
+        'property5',
+        'property6',
+        'property7',
+        'property8',
+    ];
+    const name = AXPDataGenerator.pick(source);
+    return {
+        id: AXPDataGenerator.uuid(),
+        entityId: AXPDataGenerator.pick(ENTITIES).id,
+        name: name,
+        title: name,
+        path: name,
+    };
+});
 
 class AXPApplicationManagementService {
     constructor(injector) {
@@ -356,7 +512,7 @@ class AXPApplicationManagementService {
         this._entityDataProvider.initial(ENTITIES);
         //
         this._propertyDataProvider = new AXPEntityDataProviderImpl(storageService, 'properties');
-        this._propertyDataProvider.initial([]);
+        this._propertyDataProvider.initial(PROPERTIES);
         //
         this._permissionDataProvider = new AXPEntityDataProviderImpl(storageService, 'permissions');
         this._permissionDataProvider.initial(PERMISSIONS);
@@ -681,7 +837,7 @@ async function applicationEntityFactory(injector) {
                 columns: ['application.title', 'module.title'],
                 conditions: [
                     {
-                        name: 'application.id',
+                        name: 'applicationId',
                         operator: {
                             type: 'equal',
                         },
@@ -694,7 +850,7 @@ async function applicationEntityFactory(injector) {
                 columns: ['name', 'title', 'isArchived'],
                 conditions: [
                     {
-                        name: 'application.id',
+                        name: 'applicationId',
                         operator: {
                             type: 'equal',
                         },
@@ -1262,7 +1418,21 @@ async function entityEntityFactory(injector) {
             individual: 'Entity',
             plural: 'Entities',
         },
-        relatedEntities: [],
+        relatedEntities: [
+            {
+                entity: 'application-management.property',
+                columns: ['entity.title', 'name', 'title', 'isArchived'],
+                conditions: [
+                    {
+                        name: 'entityId',
+                        operator: {
+                            type: 'equal',
+                        },
+                        value: 'id',
+                    },
+                ],
+            },
+        ],
         groups: [
             {
                 id: 'entity',
@@ -1838,7 +2008,7 @@ async function modulesEntityFactory(injector) {
                 columns: ['module.title', 'name', 'title', 'isArchived'],
                 conditions: [
                     {
-                        name: 'module.id',
+                        name: 'moduleId',
                         operator: {
                             type: 'equal',
                         },
@@ -1851,7 +2021,7 @@ async function modulesEntityFactory(injector) {
                 columns: ['module.title', 'name', 'title', 'isArchived'],
                 conditions: [
                     {
-                        name: 'module.id',
+                        name: 'moduleId',
                         operator: {
                             type: 'equal',
                         },
@@ -1864,7 +2034,7 @@ async function modulesEntityFactory(injector) {
                 columns: ['module.title', 'name', 'title', 'isArchived'],
                 conditions: [
                     {
-                        name: 'module.id',
+                        name: 'moduleId',
                         operator: {
                             type: 'equal',
                         },
@@ -2521,6 +2691,10 @@ async function propertyEntityFactory(injector) {
                     dataType: 'boolean',
                     interface: {
                         type: AXPWidgetsCatalog.toggle,
+                        options: {
+                            falsyText: 'False',
+                            trulyText: 'True',
+                        },
                     },
                 },
             },
@@ -2744,7 +2918,7 @@ async function propertyEntityFactory(injector) {
                             layout: {
                                 positions: {
                                     lg: {
-                                        colSpan: 6,
+                                        colSpan: 12,
                                     },
                                 },
                             },
@@ -2820,7 +2994,7 @@ async function propertyEntityFactory(injector) {
                             layout: {
                                 positions: {
                                     lg: {
-                                        colSpan: 6,
+                                        colSpan: 12,
                                     },
                                 },
                             },