@masterteam/work-center 0.0.3 → 0.0.4

package/fesm2022/masterteam-work-center.mjs

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, output, Component, signal, effect, untracked } from '@angular/core';
+import { inject, Injectable, computed, input, output, Component, signal, effect, untracked, viewChild } from '@angular/core';
 import { ClientPage } from '@masterteam/components/client-page';
 import { ModalService } from '@masterteam/components/modal';
 import { PropertyFilterBuilder } from '@masterteam/components/property-filter-builder';
@@ -10,15 +10,21 @@ import * as i1 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { HttpClient } from '@angular/common/http';
-import { handleApiRequest } from '@masterteam/components';
-import { catchError, EMPTY, map } from 'rxjs';
+import { handleApiRequest, ValidatorConfig } from '@masterteam/components';
+import { catchError, EMPTY, map, take } from 'rxjs';
 import { EntitiesPreview } from '@masterteam/components/entities';
 import { Tabs } from '@masterteam/components/tabs';
+import { DiscussionThread } from '@masterteam/discussion';
 import { StructureBuilder } from '@masterteam/structure-builder';
-import { ClientModulePreview } from '@masterteam/client-components/client-module-preview';
 import { ClientForm } from '@masterteam/forms/client-form';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Drawer } from '@masterteam/components/drawer';
+import { Button } from '@masterteam/components/button';
+import { ToastService } from '@masterteam/components/toast';
+import * as i1$1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ModalRef } from '@masterteam/components/dialog';
+import { DynamicForm } from '@masterteam/forms/dynamic-form';
 
 class EnterArea {
     area;
@@ -762,8 +768,8 @@ class WorkCenterPage {
     area = input('MyInbox', ...(ngDevMode ? [{ debugName: "area" }] : []));
     pageTitle = input('Work Center', ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
     menuIcon = input('communication.inbox-01', ...(ngDevMode ? [{ debugName: "menuIcon" }] : []));
-    openItemsInDrawer = input(true, ...(ngDevMode ? [{ debugName: "openItemsInDrawer" }] : []));
-    itemDrawer = input(null, ...(ngDevMode ? [{ debugName: "itemDrawer" }] : []));
+    openItemsInModal = input(true, ...(ngDevMode ? [{ debugName: "openItemsInModal" }] : []));
+    itemModal = input(null, ...(ngDevMode ? [{ debugName: "itemModal" }] : []));
     runtimeFiltersChanged = output();
     itemClicked = output();
     context = this.facade.context;
@@ -805,8 +811,11 @@ class WorkCenterPage {
             allowedOperators: fallbackOperators,
         };
     }, ...(ngDevMode ? [{ debugName: "propertyFilterSchema" }] : []));
-    defaultDrawerStyleClass = '!w-[96vw] xl:!w-[calc(100%-8rem)] 2xl:!w-[calc(100%-12rem)] !absolute !shadow-none';
+    defaultModalStyleClass = '!w-[96vw] xl:!w-[calc(100%-8rem)] 2xl:!w-[calc(100%-12rem)] !absolute !shadow-none';
     onMenuItemClick(item) {
+        if (item.key === this.context().selectedCardKey) {
+            return;
+        }
         this.facade.selectCardAndLoad(this.area(), item.key);
     }
     onLazyLoad(event) {
@@ -833,31 +842,31 @@ class WorkCenterPage {
         console.log('[work-center-debug] page row click', {
             contextKey,
             row,
-            openItemsInDrawer: this.openItemsInDrawer(),
-            hasDrawerComponent: !!this.itemDrawer()?.component,
+            openItemsInModal: this.openItemsInModal(),
+            hasModalComponent: !!this.itemModal()?.component,
         });
         if (!contextKey) {
             return;
         }
         this.itemClicked.emit(contextKey);
-        if (!this.openItemsInDrawer()) {
+        if (!this.openItemsInModal()) {
             return;
         }
-        const drawerOptions = this.itemDrawer();
-        if (!drawerOptions?.component) {
+        const modalOptions = this.itemModal();
+        if (!modalOptions?.component) {
             return;
         }
-        this.modal.openModal(drawerOptions.component, 'drawer', {
-            header: drawerOptions?.header ?? 'Item Details',
-            styleClass: drawerOptions?.styleClass ?? this.defaultDrawerStyleClass,
-            position: drawerOptions?.position ?? 'end',
+        this.modal.openModal(modalOptions.component, 'drawer', {
+            header: modalOptions?.header ?? 'Item Details',
+            styleClass: modalOptions?.styleClass ?? this.defaultModalStyleClass,
+            position: modalOptions?.position ?? 'end',
             dismissible: true,
             modal: true,
-            ...(drawerOptions?.appendTo ? { appendTo: drawerOptions.appendTo } : {}),
+            ...(modalOptions?.appendTo ? { appendTo: modalOptions.appendTo } : {}),
             inputValues: { contextKey },
         });
     }
-    rowsClickable = computed(() => this.openItemsInDrawer(), ...(ngDevMode ? [{ debugName: "rowsClickable" }] : []));
+    rowsClickable = computed(() => this.openItemsInModal(), ...(ngDevMode ? [{ debugName: "rowsClickable" }] : []));
     resolveRowContextKey(row) {
         const value = row['contextKey'];
         if (typeof value !== 'string') {
@@ -867,7 +876,7 @@ class WorkCenterPage {
         return normalized.length ? normalized : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, openItemsInDrawer: { classPropertyName: "openItemsInDrawer", publicName: "openItemsInDrawer", isSignal: true, isRequired: false, transformFunction: null }, itemDrawer: { classPropertyName: "itemDrawer", publicName: "itemDrawer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked" }, ngImport: i0, template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"pageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <mt-property-filter-builder\r\n      [schema]=\"propertyFilterSchema()\"\r\n      [filters]=\"context().runtimeFilters\"\r\n      (applied)=\"onRuntimeFiltersApplied($event)\"\r\n      (cleared)=\"onRuntimeFiltersCleared()\"\r\n    />\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-4\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [lazy]=\"true\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"tableCurrentPage()\"\r\n      [first]=\"tableFirst()\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed"], outputs: ["collapsedChange", "menuItemClick"] }, { kind: "component", type: PropertyFilterBuilder, selector: "mt-property-filter-builder", inputs: ["schema", "filters", "title", "buttonLabel", "disabled"], outputs: ["filtersChange", "applied", "cleared"] }, { kind: "component", type: StatisticCard, selector: "mt-statistic-card", inputs: ["data"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, openItemsInModal: { classPropertyName: "openItemsInModal", publicName: "openItemsInModal", isSignal: true, isRequired: false, transformFunction: null }, itemModal: { classPropertyName: "itemModal", publicName: "itemModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked" }, ngImport: i0, template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"pageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <mt-property-filter-builder\r\n      [schema]=\"propertyFilterSchema()\"\r\n      [filters]=\"context().runtimeFilters\"\r\n      (applied)=\"onRuntimeFiltersApplied($event)\"\r\n      (cleared)=\"onRuntimeFiltersCleared()\"\r\n    />\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-4\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [lazy]=\"true\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"tableCurrentPage()\"\r\n      [first]=\"tableFirst()\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed"], outputs: ["collapsedChange", "menuItemClick"] }, { kind: "component", type: PropertyFilterBuilder, selector: "mt-property-filter-builder", inputs: ["schema", "filters", "title", "buttonLabel", "disabled"], outputs: ["filtersChange", "applied", "cleared"] }, { kind: "component", type: StatisticCard, selector: "mt-statistic-card", inputs: ["data"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterPage, decorators: [{
             type: Component,
@@ -879,7 +888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         Table,
                         SkeletonModule,
                     ], template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"pageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <mt-property-filter-builder\r\n      [schema]=\"propertyFilterSchema()\"\r\n      [filters]=\"context().runtimeFilters\"\r\n      (applied)=\"onRuntimeFiltersApplied($event)\"\r\n      (cleared)=\"onRuntimeFiltersCleared()\"\r\n    />\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-4\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [lazy]=\"true\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"tableCurrentPage()\"\r\n      [first]=\"tableFirst()\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n" }]
-        }], propDecorators: { area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], openItemsInDrawer: [{ type: i0.Input, args: [{ isSignal: true, alias: "openItemsInDrawer", required: false }] }], itemDrawer: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDrawer", required: false }] }], runtimeFiltersChanged: [{ type: i0.Output, args: ["runtimeFiltersChanged"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+        }], propDecorators: { area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], openItemsInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "openItemsInModal", required: false }] }], itemModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemModal", required: false }] }], runtimeFiltersChanged: [{ type: i0.Output, args: ["runtimeFiltersChanged"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
 
 function readItemContext(details) {
     const item = details.item;
@@ -912,6 +921,7 @@ class WorkCenterEscalationInstanceType {
     loadSub;
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
     activeTab = signal('escalationDetails', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     preview = signal(null, ...(ngDevMode ? [{ debugName: "preview" }] : []));
@@ -920,6 +930,10 @@ class WorkCenterEscalationInstanceType {
             label: 'Escalation Details',
             value: 'escalationDetails',
         },
+        {
+            label: 'Discussion',
+            value: 'discussion',
+        },
         {
             label: 'Schema',
             value: 'schema',
@@ -959,7 +973,7 @@ class WorkCenterEscalationInstanceType {
             {
                 key: 'attachments',
                 name: 'Attachments',
-                value: mapAttachments(preview.attachments),
+                value: preview.attachments ?? [],
                 viewType: 'Attachment',
                 order: 4,
                 configuration: { size: 24 },
@@ -982,6 +996,7 @@ class WorkCenterEscalationInstanceType {
         readNumber(this.itemContext(), 'instanceId'), ...(ngDevMode ? [{ debugName: "instanceId" }] : []));
     resolvedInstanceId = computed(() => this.instanceId() ?? 0, ...(ngDevMode ? [{ debugName: "resolvedInstanceId" }] : []));
     canRenderDetails = computed(() => this.resolvedInstanceId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDetails" }] : []));
+    canRenderDiscussion = computed(() => this.resolvedInstanceId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDiscussion" }] : []));
     constructor() {
         effect(() => {
             const instanceId = this.resolvedInstanceId();
@@ -996,6 +1011,12 @@ class WorkCenterEscalationInstanceType {
     ngOnDestroy() {
         this.loadSub?.unsubscribe();
     }
+    onDiscussionReadStateChanged(state) {
+        const resolvedUserId = state?.userId?.trim();
+        if (resolvedUserId) {
+            this.currentUserId.set(resolvedUserId);
+        }
+    }
     loadPreview(instanceId) {
         this.loadSub?.unsubscribe();
         this.loading.set(true);
@@ -1017,11 +1038,17 @@ class WorkCenterEscalationInstanceType {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterEscalationInstanceType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterEscalationInstanceType, isStandalone: true, selector: "mt-work-center-escalation-instance-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'escalationDetails'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation details...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (preview()) {\n        <mt-entities-preview [entities]=\"detailEntities()\" />\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation details context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation schema...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (hasSchema()) {\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\n          <mt-structure-builder\n            class=\"h-full\"\n            [readonly]=\"true\"\n            [nodes]=\"schemaNodes()\"\n            [connections]=\"schemaConnections()\"\n          />\n        </div>\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Escalation schema is not available for this item yet.\n          </p>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation schema context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "nodeForm", "connectionForm", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "availableTabsClass", "layoutDirection", "nodes", "connections", "nodeTemplate"], outputs: ["nodeActionsEvent", "action", "nodesChange", "connectionsChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterEscalationInstanceType, isStandalone: true, selector: "mt-work-center-escalation-instance-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'escalationDetails'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation details...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (preview()) {\n        <mt-entities-preview [entities]=\"detailEntities()\" />\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation details context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'EscalationInstance'\"\n          [recordId]=\"resolvedInstanceId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this escalation yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation schema...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (hasSchema()) {\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\n          <mt-structure-builder\n            class=\"h-full\"\n            [readonly]=\"true\"\n            [nodes]=\"schemaNodes()\"\n            [connections]=\"schemaConnections()\"\n          />\n        </div>\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Escalation schema is not available for this item yet.\n          </p>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation schema context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: DiscussionThread, selector: "mt-discussion-thread", inputs: ["moduleType", "recordId", "title", "subtitle", "placeholder", "pageSize", "currentUserId", "requestContext", "mentionableUsers", "mentionSearchEndpoint", "mentionSearchParam", "mentionSearchDataPath", "allowAttachments", "uploadEndpoint", "attachmentDownloadEndpoint", "showParticipants", "autoMarkRead", "refreshIntervalMs", "styleClass", "disabled"], outputs: ["loaded", "errored", "commentCreated", "commentUpdated", "commentDeleted", "readStateChanged"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "nodeForm", "connectionForm", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "availableTabsClass", "layoutDirection", "nodes", "connections", "nodeTemplate"], outputs: ["nodeActionsEvent", "action", "nodesChange", "connectionsChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterEscalationInstanceType, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-work-center-escalation-instance-type', standalone: true, imports: [CommonModule, Tabs, EntitiesPreview, StructureBuilder], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'escalationDetails'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation details...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (preview()) {\n        <mt-entities-preview [entities]=\"detailEntities()\" />\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation details context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation schema...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (hasSchema()) {\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\n          <mt-structure-builder\n            class=\"h-full\"\n            [readonly]=\"true\"\n            [nodes]=\"schemaNodes()\"\n            [connections]=\"schemaConnections()\"\n          />\n        </div>\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Escalation schema is not available for this item yet.\n          </p>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation schema context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mt-work-center-escalation-instance-type', standalone: true, imports: [
+                        CommonModule,
+                        Tabs,
+                        DiscussionThread,
+                        EntitiesPreview,
+                        StructureBuilder,
+                    ], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'escalationDetails'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation details...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (preview()) {\n        <mt-entities-preview [entities]=\"detailEntities()\" />\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation details context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'EscalationInstance'\"\n          [recordId]=\"resolvedInstanceId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this escalation yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation schema...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (hasSchema()) {\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\n          <mt-structure-builder\n            class=\"h-full\"\n            [readonly]=\"true\"\n            [nodes]=\"schemaNodes()\"\n            [connections]=\"schemaConnections()\"\n          />\n        </div>\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Escalation schema is not available for this item yet.\n          </p>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation schema context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
 function mapUserValue(value) {
     if (!value || typeof value !== 'object') {
@@ -1042,16 +1069,6 @@ function mapUserValue(value) {
         email: readString(value, 'email') ?? readString(value, 'emailAddress'),
     };
 }
-function mapAttachments(attachments) {
-    return (attachments ?? []).map((attachment) => ({
-        id: attachment.id,
-        name: attachment.name,
-        fileName: attachment.fileName,
-        contentType: attachment.contentType,
-        extension: attachment.extension,
-        size: attachment.size,
-    }));
-}
 function resolveSchemaSteps(preview) {
     return preview?.schema?.stepsSchema ?? preview?.schemaSteps ?? [];
 }
@@ -1086,30 +1103,147 @@ function readString(value, key) {
     return typeof result === 'string' && result.length ? result : undefined;
 }
 
+class WorkCenterProcessPreviewJson {
+    http = inject(HttpClient);
+    loadSub;
+    requestId = input(null, ...(ngDevMode ? [{ debugName: "requestId" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    preview = signal(null, ...(ngDevMode ? [{ debugName: "preview" }] : []));
+    canRenderPreview = computed(() => (this.requestId() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "canRenderPreview" }] : []));
+    previewJson = computed(() => {
+        const preview = this.preview();
+        return preview == null ? '' : JSON.stringify(preview, null, 2);
+    }, ...(ngDevMode ? [{ debugName: "previewJson" }] : []));
+    constructor() {
+        effect(() => {
+            const requestId = this.requestId() ?? 0;
+            if (requestId > 0) {
+                untracked(() => this.loadPreview(requestId));
+                return;
+            }
+            this.loadSub?.unsubscribe();
+            this.loading.set(false);
+            this.error.set(null);
+            this.preview.set(null);
+        });
+    }
+    ngOnDestroy() {
+        this.loadSub?.unsubscribe();
+    }
+    loadPreview(requestId) {
+        this.loadSub?.unsubscribe();
+        this.loading.set(true);
+        this.error.set(null);
+        this.loadSub = this.http
+            .get(`processes/${requestId}/preview`)
+            .subscribe({
+            next: (response) => {
+                this.loading.set(false);
+                this.preview.set(response.data ?? null);
+            },
+            error: (error) => {
+                this.loading.set(false);
+                this.preview.set(null);
+                this.error.set(error?.error?.message ??
+                    error?.message ??
+                    'Failed to load process preview');
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessPreviewJson, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterProcessPreviewJson, isStandalone: true, selector: "mt-work-center-process-preview-json", inputs: { requestId: { classPropertyName: "requestId", publicName: "requestId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!canRenderPreview()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\n      Process preview is not available for this item yet.\n    </p>\n  </div>\n} @else if (loading()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"text-sm text-surface-500\">Loading process preview...</p>\n  </div>\n} @else if (error()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-red-600\">{{ error() }}</p>\n  </div>\n} @else if (previewJson()) {\n  <div class=\"overflow-hidden rounded-2xl border border-surface-200 bg-surface-50\">\n    <pre\n      class=\"max-h-[70vh] overflow-auto whitespace-pre-wrap break-all p-4 text-xs leading-6 text-surface-700\"\n    ><code>{{ previewJson() }}</code></pre>\n  </div>\n} @else {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\n      Process preview returned no data.\n    </p>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessPreviewJson, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-process-preview-json', standalone: true, imports: [CommonModule], template: "@if (!canRenderPreview()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\n      Process preview is not available for this item yet.\n    </p>\n  </div>\n} @else if (loading()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"text-sm text-surface-500\">Loading process preview...</p>\n  </div>\n} @else if (error()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-red-600\">{{ error() }}</p>\n  </div>\n} @else if (previewJson()) {\n  <div class=\"overflow-hidden rounded-2xl border border-surface-200 bg-surface-50\">\n    <pre\n      class=\"max-h-[70vh] overflow-auto whitespace-pre-wrap break-all p-4 text-xs leading-6 text-surface-700\"\n    ><code>{{ previewJson() }}</code></pre>\n  </div>\n} @else {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\n      Process preview returned no data.\n    </p>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { requestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestId", required: false }] }] } });
+
 class WorkCenterProcessRequestType {
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
+    activeTab = signal('requestDetails', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    tabOptions = [
+        {
+            label: 'Request Details',
+            value: 'requestDetails',
+        },
+        {
+            label: 'Discussion',
+            value: 'discussion',
+        },
+        {
+            label: 'Preview',
+            value: 'preview',
+        },
+    ];
+    itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
+    requestId = computed(() => readNumber(this.itemContext(), 'requestId') ??
+        readNumber(this.itemContext(), 'draftProcessId'), ...(ngDevMode ? [{ debugName: "requestId" }] : []));
+    discussionRecordId = computed(() => this.requestId() ?? 0, ...(ngDevMode ? [{ debugName: "discussionRecordId" }] : []));
+    canRenderDiscussion = computed(() => this.discussionRecordId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDiscussion" }] : []));
+    canRenderPreview = computed(() => (this.requestId() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "canRenderPreview" }] : []));
+    onDiscussionReadStateChanged(state) {
+        const resolvedUserId = state?.userId?.trim();
+        if (resolvedUserId) {
+            this.currentUserId.set(resolvedUserId);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessRequestType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: WorkCenterProcessRequestType, isStandalone: true, selector: "mt-work-center-process-request-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n  <p class=\"text-sm text-surface-500\">\n    Process request content will be added here.\n  </p>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterProcessRequestType, isStandalone: true, selector: "mt-work-center-process-request-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'requestDetails'\">\n    <div\n      class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n    >\n      <p class=\"max-w-md text-center text-sm text-surface-500\">\n        Process request details view will be added here.\n      </p>\n    </div>\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this process request yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'preview'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json [requestId]=\"requestId()\" />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process preview is not available for this process request yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: DiscussionThread, selector: "mt-discussion-thread", inputs: ["moduleType", "recordId", "title", "subtitle", "placeholder", "pageSize", "currentUserId", "requestContext", "mentionableUsers", "mentionSearchEndpoint", "mentionSearchParam", "mentionSearchDataPath", "allowAttachments", "uploadEndpoint", "attachmentDownloadEndpoint", "showParticipants", "autoMarkRead", "refreshIntervalMs", "styleClass", "disabled"], outputs: ["loaded", "errored", "commentCreated", "commentUpdated", "commentDeleted", "readStateChanged"] }, { kind: "component", type: WorkCenterProcessPreviewJson, selector: "mt-work-center-process-preview-json", inputs: ["requestId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessRequestType, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-work-center-process-request-type', standalone: true, imports: [CommonModule], template: "<div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n  <p class=\"text-sm text-surface-500\">\n    Process request content will be added here.\n  </p>\n</div>\n" }]
+            args: [{ selector: 'mt-work-center-process-request-type', standalone: true, imports: [CommonModule, Tabs, DiscussionThread, WorkCenterProcessPreviewJson], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'requestDetails'\">\n    <div\n      class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n    >\n      <p class=\"max-w-md text-center text-sm text-surface-500\">\n        Process request details view will be added here.\n      </p>\n    </div>\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this process request yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'preview'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json [requestId]=\"requestId()\" />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process preview is not available for this process request yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
 
+class WorkCenterItemActionContextStore {
+    clientForm = signal(null, ...(ngDevMode ? [{ debugName: "clientForm" }] : []));
+    setClientForm(clientForm) {
+        this.clientForm.set(clientForm);
+    }
+    resolveFormValues() {
+        const values = this.clientForm()?.getSubmitValues();
+        return Array.isArray(values)
+            ? values.map((value) => ({
+                requestPropertyId: value.requestPropertyId,
+                propertyKey: value.propertyKey,
+                value: value.value,
+            }))
+            : [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionContextStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionContextStore });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionContextStore, decorators: [{
+            type: Injectable
+        }] });
+
 class WorkCenterProcessStepType {
+    actionContext = inject(WorkCenterItemActionContextStore, {
+        optional: true,
+    });
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
-    activeTab = signal('processForm', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    clientForm = viewChild(ClientForm, ...(ngDevMode ? [{ debugName: "clientForm" }] : []));
+    activeTab = signal('form', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
     tabOptions = [
         {
-            label: 'Process Form',
-            value: 'processForm',
+            label: 'Form',
+            value: 'form',
+        },
+        {
+            label: 'Discussion',
+            value: 'discussion',
         },
         {
-            label: 'Module Preview',
-            value: 'modulePreview',
+            label: 'Preview',
+            value: 'preview',
         },
     ];
     itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
+    requestId = computed(() => readNumber(this.itemContext(), 'requestId') ??
+        readNumber(this.itemContext(), 'draftProcessId'), ...(ngDevMode ? [{ debugName: "requestId" }] : []));
     moduleKey = computed(() => readString$1(this.itemContext(), 'moduleKey') ?? '', ...(ngDevMode ? [{ debugName: "moduleKey" }] : []));
     operationKey = computed(() => readString$1(this.itemContext(), 'operationKey') ?? '', ...(ngDevMode ? [{ debugName: "operationKey" }] : []));
     moduleId = computed(() => readNumber(this.itemContext(), 'moduleId'), ...(ngDevMode ? [{ debugName: "moduleId" }] : []));
@@ -1119,70 +1253,480 @@ class WorkCenterProcessStepType {
     requestSchemaId = computed(() => readNumber(this.itemContext(), 'requestSchemaId'), ...(ngDevMode ? [{ debugName: "requestSchemaId" }] : []));
     draftProcessId = computed(() => readNumber(this.itemContext(), 'draftProcessId') ??
         readNumber(this.itemContext(), 'requestId'), ...(ngDevMode ? [{ debugName: "draftProcessId" }] : []));
+    discussionRecordId = computed(() => this.requestId() ?? 0, ...(ngDevMode ? [{ debugName: "discussionRecordId" }] : []));
     canRenderForm = computed(() => !!this.moduleKey() && !!this.operationKey(), ...(ngDevMode ? [{ debugName: "canRenderForm" }] : []));
-    canRenderPreview = computed(() => !!this.moduleKey() && !!this.operationKey(), ...(ngDevMode ? [{ debugName: "canRenderPreview" }] : []));
+    canRenderDiscussion = computed(() => this.discussionRecordId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDiscussion" }] : []));
+    canRenderPreview = computed(() => (this.requestId() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "canRenderPreview" }] : []));
+    constructor() {
+        effect(() => {
+            this.actionContext?.setClientForm(this.clientForm() ?? null);
+        });
+    }
+    onDiscussionReadStateChanged(state) {
+        const resolvedUserId = state?.userId?.trim();
+        if (resolvedUserId) {
+            this.currentUserId.set(resolvedUserId);
+        }
+    }
+    ngOnDestroy() {
+        this.actionContext?.setClientForm(null);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessStepType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterProcessStepType, isStandalone: true, selector: "mt-work-center-process-step-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'processForm'\">\n    @if (canRenderForm()) {\n      <mt-client-form\n        [moduleKey]=\"moduleKey()\"\n        [operationKey]=\"operationKey()\"\n        [moduleId]=\"moduleId()\"\n        [levelId]=\"levelId()\"\n        [levelDataId]=\"levelDataId()\"\n        [moduleDataId]=\"moduleDataId()\"\n        [requestSchemaId]=\"requestSchemaId()\"\n        [draftProcessId]=\"draftProcessId()\"\n        [renderMode]=\"'steps'\"\n      />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process form context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'modulePreview'\">\n    @if (canRenderPreview()) {\n      <mt-client-module-preview\n        [moduleKey]=\"moduleKey()\"\n        [operationKey]=\"operationKey()\"\n        [moduleId]=\"moduleId()\"\n        [levelId]=\"levelId()\"\n        [levelDataId]=\"levelDataId()\"\n        [moduleDataId]=\"moduleDataId()\"\n        [requestSchemaId]=\"requestSchemaId()\"\n        [draftProcessId]=\"draftProcessId()\"\n        [formMode]=\"'edit'\"\n      />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Module preview context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lang", "lookups"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected"] }, { kind: "component", type: ClientModulePreview, selector: "mt-client-module-preview", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "autoLoad", "lang", "formMode"], outputs: ["loaded", "errored"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterProcessStepType, isStandalone: true, selector: "mt-work-center-process-step-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1 p-4\" [hidden]=\"activeTab() !== 'form'\">\n    <div class=\"flex-1\">\n      @if (canRenderForm()) {\n        <mt-client-form\n          [moduleKey]=\"moduleKey()\"\n          [operationKey]=\"operationKey()\"\n          [moduleId]=\"moduleId()\"\n          [levelId]=\"levelId()\"\n          [levelDataId]=\"levelDataId()\"\n          [moduleDataId]=\"moduleDataId()\"\n          [requestSchemaId]=\"requestSchemaId()\"\n          [draftProcessId]=\"draftProcessId()\"\n        />\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Process form context is not available for this item yet.\n          </p>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this process item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'preview'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json [requestId]=\"requestId()\" />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process preview is not available for this process item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lang", "lookups"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected"] }, { kind: "component", type: DiscussionThread, selector: "mt-discussion-thread", inputs: ["moduleType", "recordId", "title", "subtitle", "placeholder", "pageSize", "currentUserId", "requestContext", "mentionableUsers", "mentionSearchEndpoint", "mentionSearchParam", "mentionSearchDataPath", "allowAttachments", "uploadEndpoint", "attachmentDownloadEndpoint", "showParticipants", "autoMarkRead", "refreshIntervalMs", "styleClass", "disabled"], outputs: ["loaded", "errored", "commentCreated", "commentUpdated", "commentDeleted", "readStateChanged"] }, { kind: "component", type: WorkCenterProcessPreviewJson, selector: "mt-work-center-process-preview-json", inputs: ["requestId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessStepType, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-work-center-process-step-type', standalone: true, imports: [CommonModule, Tabs, ClientForm, ClientModulePreview], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'processForm'\">\n    @if (canRenderForm()) {\n      <mt-client-form\n        [moduleKey]=\"moduleKey()\"\n        [operationKey]=\"operationKey()\"\n        [moduleId]=\"moduleId()\"\n        [levelId]=\"levelId()\"\n        [levelDataId]=\"levelDataId()\"\n        [moduleDataId]=\"moduleDataId()\"\n        [requestSchemaId]=\"requestSchemaId()\"\n        [draftProcessId]=\"draftProcessId()\"\n        [renderMode]=\"'steps'\"\n      />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process form context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'modulePreview'\">\n    @if (canRenderPreview()) {\n      <mt-client-module-preview\n        [moduleKey]=\"moduleKey()\"\n        [operationKey]=\"operationKey()\"\n        [moduleId]=\"moduleId()\"\n        [levelId]=\"levelId()\"\n        [levelDataId]=\"levelDataId()\"\n        [moduleDataId]=\"moduleDataId()\"\n        [requestSchemaId]=\"requestSchemaId()\"\n        [draftProcessId]=\"draftProcessId()\"\n        [formMode]=\"'edit'\"\n      />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Module preview context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
-        }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
+            args: [{ selector: 'mt-work-center-process-step-type', standalone: true, imports: [
+                        CommonModule,
+                        Tabs,
+                        ClientForm,
+                        DiscussionThread,
+                        WorkCenterProcessPreviewJson,
+                    ], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1 p-4\" [hidden]=\"activeTab() !== 'form'\">\n    <div class=\"flex-1\">\n      @if (canRenderForm()) {\n        <mt-client-form\n          [moduleKey]=\"moduleKey()\"\n          [operationKey]=\"operationKey()\"\n          [moduleId]=\"moduleId()\"\n          [levelId]=\"levelId()\"\n          [levelDataId]=\"levelDataId()\"\n          [moduleDataId]=\"moduleDataId()\"\n          [requestSchemaId]=\"requestSchemaId()\"\n          [draftProcessId]=\"draftProcessId()\"\n        />\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Process form context is not available for this item yet.\n          </p>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this process item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'preview'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json [requestId]=\"requestId()\" />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process preview is not available for this process item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
 
-class WorkCenterItemDrawer {
+class WorkCenterItemModal {
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemDrawer, isStandalone: true, selector: "mt-work-center-item-drawer", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (details().type === 'ProcessStep') {\n  <mt-work-center-process-step-type [details]=\"details()\" />\n} @else if (details().type === 'ProcessRequest') {\n  <mt-work-center-process-request-type [details]=\"details()\" />\n} @else if (details().type === 'EscalationInstance') {\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\n} @else {\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WorkCenterProcessStepType, selector: "mt-work-center-process-step-type", inputs: ["details"] }, { kind: "component", type: WorkCenterProcessRequestType, selector: "mt-work-center-process-request-type", inputs: ["details"] }, { kind: "component", type: WorkCenterEscalationInstanceType, selector: "mt-work-center-escalation-instance-type", inputs: ["details"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModal, isStandalone: true, selector: "mt-work-center-item-modal", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (details().type === \"ProcessStep\") {\n  <mt-work-center-process-step-type [details]=\"details()\" />\n} @else if (details().type === \"ProcessRequest\") {\n  <mt-work-center-process-request-type [details]=\"details()\" />\n} @else if (details().type === \"EscalationInstance\") {\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\n} @else {\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WorkCenterProcessStepType, selector: "mt-work-center-process-step-type", inputs: ["details"] }, { kind: "component", type: WorkCenterProcessRequestType, selector: "mt-work-center-process-request-type", inputs: ["details"] }, { kind: "component", type: WorkCenterEscalationInstanceType, selector: "mt-work-center-escalation-instance-type", inputs: ["details"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModal, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-work-center-item-drawer', standalone: true, imports: [
+            args: [{ selector: 'mt-work-center-item-modal', standalone: true, imports: [
                         CommonModule,
                         WorkCenterProcessStepType,
                         WorkCenterProcessRequestType,
                         WorkCenterEscalationInstanceType,
-                    ], template: "@if (details().type === 'ProcessStep') {\n  <mt-work-center-process-step-type [details]=\"details()\" />\n} @else if (details().type === 'ProcessRequest') {\n  <mt-work-center-process-request-type [details]=\"details()\" />\n} @else if (details().type === 'EscalationInstance') {\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\n} @else {\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\n  </div>\n}\n" }]
+                    ], template: "@if (details().type === \"ProcessStep\") {\n  <mt-work-center-process-step-type [details]=\"details()\" />\n} @else if (details().type === \"ProcessRequest\") {\n  <mt-work-center-process-request-type [details]=\"details()\" />\n} @else if (details().type === \"EscalationInstance\") {\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\n} @else {\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\n  </div>\n}\n" }]
         }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
 
-class WorkCenterItemDrawerRoute {
+class WorkCenterItemActionConfirmDialog {
+    ref = inject(ModalRef);
+    modal = inject(ModalService);
+    action = input.required(...(ngDevMode ? [{ debugName: "action" }] : []));
+    formControl = new FormControl({});
+    actionLabel = computed(() => this.action().actionName?.display || this.action().actionKey, ...(ngDevMode ? [{ debugName: "actionLabel" }] : []));
+    formConfig = computed(() => ({
+        sections: [
+            {
+                key: 'action-confirmation',
+                type: 'none',
+                fields: buildActionFields(this.action().payloadKeys, this.action().requiredPayloadKeys),
+            },
+        ],
+    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    hasFormFields = computed(() => this.formConfig().sections[0]?.fields.length > 0, ...(ngDevMode ? [{ debugName: "hasFormFields" }] : []));
+    onCancel() {
+        this.ref.close(null);
+    }
+    onConfirm() {
+        if (this.formControl.invalid) {
+            this.formControl.markAllAsTouched();
+            return;
+        }
+        this.ref.close(this.formControl.getRawValue() ?? {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemActionConfirmDialog, isStandalone: true, selector: "mt-work-center-item-action-confirm-dialog", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"modal.contentClass +' p-4'\">\n  @if (hasFormFields()) {\n  <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"formControl\" />\n  } @else {\n  <p class=\"text-sm text-surface-500\">\n    Confirm {{ actionLabel() }} for this item.\n  </p>\n  }\n\n</div>\n\n<div [class]=\"modal.footerClass\">\n  <mt-button label=\"Cancel\" severity=\"secondary\" variant=\"outlined\" (onClick)=\"onCancel()\" />\n  <mt-button [label]=\"actionLabel()\" (onClick)=\"onConfirm()\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionConfirmDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-item-action-confirm-dialog', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicForm, Button], template: "<div [class]=\"modal.contentClass +' p-4'\">\n  @if (hasFormFields()) {\n  <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"formControl\" />\n  } @else {\n  <p class=\"text-sm text-surface-500\">\n    Confirm {{ actionLabel() }} for this item.\n  </p>\n  }\n\n</div>\n\n<div [class]=\"modal.footerClass\">\n  <mt-button label=\"Cancel\" severity=\"secondary\" variant=\"outlined\" (onClick)=\"onCancel()\" />\n  <mt-button [label]=\"actionLabel()\" (onClick)=\"onConfirm()\" />\n</div>\n" }]
+        }], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: true }] }] } });
+function buildActionFields(payloadKeys, requiredPayloadKeys) {
+    const requestedKeys = new Set(payloadKeys ?? []);
+    const requiredKeys = new Set(requiredPayloadKeys ?? []);
+    const fields = [];
+    if (requestedKeys.has('delegatedUser')) {
+        fields.push({
+            key: 'delegatedUser',
+            type: 'user-search',
+            label: 'Delegated User',
+            placeholder: 'Search user',
+            apiUrl: 'Identity/users',
+            optionLabel: 'displayName',
+            optionValue: 'id',
+            validators: buildRequiredValidators(requiredKeys.has('delegatedUser')),
+            colSpan: 12,
+        });
+    }
+    if (requestedKeys.has('reason')) {
+        fields.push({
+            key: 'reason',
+            type: 'textarea',
+            label: 'Reason',
+            placeholder: 'Enter reason',
+            rows: 4,
+            validators: buildRequiredValidators(requiredKeys.has('reason')),
+            colSpan: 12,
+        });
+    }
+    if (requestedKeys.has('note')) {
+        fields.push({
+            key: 'note',
+            type: 'textarea',
+            label: 'Note',
+            placeholder: 'Enter note',
+            rows: 4,
+            validators: buildRequiredValidators(requiredKeys.has('note')),
+            colSpan: 12,
+        });
+    }
+    if (requestedKeys.has('attachments')) {
+        fields.push({
+            key: 'attachments',
+            type: 'upload-file',
+            label: 'Attachments',
+            endPoint: 'uploader',
+            multiple: true,
+            title: 'Upload Attachment',
+            description: 'Click or drop a file to upload',
+            validators: buildRequiredValidators(requiredKeys.has('attachments')),
+            colSpan: 12,
+        });
+    }
+    return fields;
+}
+function buildRequiredValidators(required) {
+    return required ? [ValidatorConfig.required()] : [];
+}
+
+class WorkCenterItemModalFooterActions {
+    http = inject(HttpClient);
+    modal = inject(ModalService);
+    toast = inject(ToastService);
+    actionContext = inject(WorkCenterItemActionContextStore);
+    loadSub;
+    executeSub;
+    lastContextKey = null;
+    contextKey = input(null, ...(ngDevMode ? [{ debugName: "contextKey" }] : []));
+    actionExecuted = output();
+    visibilityChange = output();
+    reloadTick = signal(0, ...(ngDevMode ? [{ debugName: "reloadTick" }] : []));
+    hasResolvedLoad = signal(false, ...(ngDevMode ? [{ debugName: "hasResolvedLoad" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    actions = signal([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    pendingActionKey = signal(null, ...(ngDevMode ? [{ debugName: "pendingActionKey" }] : []));
+    displayActions = computed(() => this.actions()
+        .filter((action) => action.isAvailable !== false &&
+        !!action.url &&
+        !!normalizeMethod(action.httpMethod))
+        .map((action, index) => ({
+        ...action,
+        label: action.actionName?.display || action.actionKey,
+        severity: resolveActionSeverity(action.actionKey, index),
+        variant: resolveActionVariant(action.actionKey, index),
+    })), ...(ngDevMode ? [{ debugName: "displayActions" }] : []));
+    shouldRender = computed(() => !!this.contextKey() &&
+        (!this.hasResolvedLoad() ||
+            this.loading() ||
+            !!this.error() ||
+            this.displayActions().length > 0 ||
+            !!this.pendingActionKey()), ...(ngDevMode ? [{ debugName: "shouldRender" }] : []));
+    constructor() {
+        effect(() => {
+            const contextKey = this.contextKey();
+            this.reloadTick();
+            this.error.set(null);
+            if (!contextKey) {
+                this.lastContextKey = null;
+                this.actions.set([]);
+                this.loading.set(false);
+                this.hasResolvedLoad.set(false);
+                return;
+            }
+            if (contextKey !== this.lastContextKey) {
+                this.actions.set([]);
+                this.lastContextKey = contextKey;
+            }
+            untracked(() => this.loadActions(contextKey));
+        });
+        effect(() => {
+            this.visibilityChange.emit(this.shouldRender());
+        });
+    }
+    ngOnDestroy() {
+        this.loadSub?.unsubscribe();
+        this.executeSub?.unsubscribe();
+    }
+    executeAction(action) {
+        const contextKey = this.contextKey();
+        const method = normalizeMethod(action.httpMethod);
+        const url = action.url?.trim();
+        if (!contextKey ||
+            !method ||
+            !url ||
+            action.isAvailable === false ||
+            !!this.pendingActionKey()) {
+            return;
+        }
+        if (action.needConfirmation) {
+            this.openConfirmationDialog(action);
+            return;
+        }
+        const payload = this.buildActionPayload(action);
+        if (!this.ensurePayloadIsReady(action, payload)) {
+            return;
+        }
+        this.runActionRequest(action, method, url, payload);
+    }
+    openConfirmationDialog(action) {
+        const ref = this.modal.openModal(WorkCenterItemActionConfirmDialog, 'dialog', {
+            header: action.label,
+            width: '40rem',
+            dismissableMask: true,
+            inputValues: {
+                action,
+            },
+        });
+        ref.onClose
+            .pipe(take(1))
+            .subscribe((formValue) => {
+            if (formValue == null) {
+                return;
+            }
+            const method = normalizeMethod(action.httpMethod);
+            const url = action.url?.trim();
+            if (!method || !url) {
+                return;
+            }
+            const payload = this.buildActionPayload(action, formValue);
+            if (!this.ensurePayloadIsReady(action, payload)) {
+                return;
+            }
+            this.runActionRequest(action, method, url, payload);
+        });
+    }
+    runActionRequest(action, method, url, payload) {
+        this.error.set(null);
+        this.pendingActionKey.set(action.actionKey);
+        this.executeSub?.unsubscribe();
+        this.executeSub = this.http
+            .request(method, url, buildRequestOptions(method, payload))
+            .pipe(map((response) => resolveActionSuccessMessage(response, `${action.label} completed successfully.`)))
+            .subscribe({
+            next: (message) => {
+                this.pendingActionKey.set(null);
+                this.toast.success(message);
+                this.reloadTick.update((value) => value + 1);
+                this.actionExecuted.emit();
+            },
+            error: (error) => {
+                const message = resolveHttpErrorMessage(error, `Failed to execute ${action.label}.`);
+                this.pendingActionKey.set(null);
+                this.error.set(message);
+                this.toast.error(message);
+            },
+        });
+    }
+    buildActionPayload(action, formValue) {
+        const payloadKeys = action.payloadKeys ?? [];
+        if (!payloadKeys.length) {
+            return undefined;
+        }
+        const payload = {};
+        for (const key of payloadKeys) {
+            const formFieldValue = formValue?.[key];
+            if (formFieldValue !== undefined) {
+                payload[key] = normalizePayloadValue(key, formFieldValue);
+                continue;
+            }
+            const externalValue = this.resolveExternalPayloadValue(key, action);
+            if (externalValue !== undefined) {
+                payload[key] = externalValue;
+                continue;
+            }
+            const defaultValue = resolveDefaultPayloadValue(key);
+            if (defaultValue !== undefined) {
+                payload[key] = defaultValue;
+            }
+        }
+        return Object.keys(payload).length ? payload : undefined;
+    }
+    ensurePayloadIsReady(action, payload) {
+        const missingRequiredKeys = (action.requiredPayloadKeys ?? []).filter((key) => isMissingPayloadValue(payload?.[key]));
+        if (!missingRequiredKeys.length) {
+            return true;
+        }
+        const message = `Cannot execute ${action.label}. Missing: ${missingRequiredKeys.join(', ')}.`;
+        this.error.set(message);
+        this.toast.error(message);
+        return false;
+    }
+    resolveExternalPayloadValue(key, action) {
+        switch (key) {
+            case 'stepId':
+                return action.stepIds?.[0];
+            case 'values':
+                return this.actionContext.resolveFormValues();
+            default:
+                return undefined;
+        }
+    }
+    loadActions(contextKey) {
+        this.loadSub?.unsubscribe();
+        this.loading.set(true);
+        this.hasResolvedLoad.set(false);
+        this.loadSub = this.http
+            .get('workcenter/runtime/item-actions', {
+            params: { contextKey },
+        })
+            .pipe(map((response) => {
+            if (response.code === 1) {
+                return response.data.actions ?? [];
+            }
+            throw new Error(resolveEnvelopeErrorMessage(response, 'Failed to load item actions.'));
+        }))
+            .subscribe({
+            next: (actions) => {
+                this.actions.set(actions);
+                this.loading.set(false);
+                this.hasResolvedLoad.set(true);
+            },
+            error: (error) => {
+                this.actions.set([]);
+                this.loading.set(false);
+                this.hasResolvedLoad.set(true);
+                this.error.set(resolveHttpErrorMessage(error, 'Failed to load item actions.'));
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModalFooterActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModalFooterActions, isStandalone: true, selector: "mt-work-center-item-modal-footer-actions", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted", visibilityChange: "visibilityChange" }, host: { classAttribute: "flex w-full flex-1 flex-wrap items-center justify-end gap-2" }, ngImport: i0, template: "@if (shouldRender()) {\n  @if (error(); as error) {\n    <span class=\"me-auto max-w-md text-sm text-red-600\">\n      {{ error }}\n    </span>\n  } @else if (loading() && !displayActions().length) {\n    <span class=\"me-auto text-sm text-surface-500\">Loading actions...</span>\n  }\n\n  @for (action of displayActions(); track action.actionKey + action.url) {\n    <mt-button\n      [label]=\"action.label\"\n      [severity]=\"action.severity\"\n      [variant]=\"action.variant\"\n      [disabled]=\"loading() || !!pendingActionKey()\"\n      [loading]=\"pendingActionKey() === action.actionKey\"\n      (onClick)=\"executeAction(action)\"\n    />\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModalFooterActions, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-item-modal-footer-actions', standalone: true, imports: [CommonModule, Button], host: {
+                        class: 'flex w-full flex-1 flex-wrap items-center justify-end gap-2',
+                    }, template: "@if (shouldRender()) {\n  @if (error(); as error) {\n    <span class=\"me-auto max-w-md text-sm text-red-600\">\n      {{ error }}\n    </span>\n  } @else if (loading() && !displayActions().length) {\n    <span class=\"me-auto text-sm text-surface-500\">Loading actions...</span>\n  }\n\n  @for (action of displayActions(); track action.actionKey + action.url) {\n    <mt-button\n      [label]=\"action.label\"\n      [severity]=\"action.severity\"\n      [variant]=\"action.variant\"\n      [disabled]=\"loading() || !!pendingActionKey()\"\n      [loading]=\"pendingActionKey() === action.actionKey\"\n      (onClick)=\"executeAction(action)\"\n    />\n  }\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { contextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextKey", required: false }] }], actionExecuted: [{ type: i0.Output, args: ["actionExecuted"] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }] } });
+function buildRequestOptions(method, payload) {
+    if (!payload || !methodSupportsBody(method)) {
+        return { observe: 'body' };
+    }
+    return {
+        body: payload,
+        observe: 'body',
+    };
+}
+function methodSupportsBody(method) {
+    return ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method);
+}
+function normalizeMethod(value) {
+    if (!value || typeof value !== 'string') {
+        return null;
+    }
+    const method = value.trim().toUpperCase();
+    return method.length ? method : null;
+}
+function normalizePayloadValue(key, value) {
+    if (key === 'attachments') {
+        if (value == null) {
+            return [];
+        }
+        return Array.isArray(value) ? value : [value];
+    }
+    return value;
+}
+function resolveDefaultPayloadValue(key) {
+    switch (key) {
+        case 'attachments':
+            return [];
+        case 'delegatedUser':
+        case 'note':
+        case 'reason':
+            return null;
+        case 'values':
+            return [];
+        default:
+            return undefined;
+    }
+}
+function isMissingPayloadValue(value) {
+    if (value == null) {
+        return true;
+    }
+    if (typeof value === 'string') {
+        return value.trim().length === 0;
+    }
+    if (Array.isArray(value)) {
+        return value.length === 0;
+    }
+    return false;
+}
+function resolveActionSeverity(actionKey, index) {
+    const normalized = actionKey.trim().toLowerCase();
+    if (normalized === 'close' ||
+        normalized === 'delete' ||
+        normalized === 'reject' ||
+        normalized === 'cancel') {
+        return 'danger';
+    }
+    return index === 0 ? 'primary' : 'secondary';
+}
+function resolveActionVariant(actionKey, index) {
+    const severity = resolveActionSeverity(actionKey, index);
+    return severity === 'primary' ? undefined : 'outlined';
+}
+function resolveEnvelopeErrorMessage(response, fallback) {
+    return (response?.errors?.message ??
+        response?.message ??
+        fallback);
+}
+function resolveActionSuccessMessage(response, fallback) {
+    if (!response || typeof response !== 'object') {
+        return fallback;
+    }
+    const apiResponse = response;
+    if (typeof apiResponse.code === 'number' && apiResponse.code !== 1) {
+        throw new Error(resolveEnvelopeErrorMessage(apiResponse, fallback));
+    }
+    return apiResponse.message?.trim() || fallback;
+}
+function resolveHttpErrorMessage(error, fallback) {
+    if (!error || typeof error !== 'object') {
+        return fallback;
+    }
+    const httpError = error;
+    return httpError.error?.message ?? httpError.message ?? fallback;
+}
+
+class WorkCenterItemModalRoute {
     http = inject(HttpClient);
     router = inject(Router);
     route = inject(ActivatedRoute);
+    modal = inject(ModalService);
     contextKey = input(null, ...(ngDevMode ? [{ debugName: "contextKey" }] : []));
     drawerVisible = signal(true, ...(ngDevMode ? [{ debugName: "drawerVisible" }] : []));
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     details = signal(null, ...(ngDevMode ? [{ debugName: "details" }] : []));
+    detailsReloadTick = signal(0, ...(ngDevMode ? [{ debugName: "detailsReloadTick" }] : []));
+    footerActionsMounted = signal(false, ...(ngDevMode ? [{ debugName: "footerActionsMounted" }] : []));
     resolvedContextKey = computed(() => this.decodeContextKey(this.contextKey()), ...(ngDevMode ? [{ debugName: "resolvedContextKey" }] : []));
     drawerTitle = computed(() => this.readDisplayField(this.details()?.item, 'title') ?? 'Item Details', ...(ngDevMode ? [{ debugName: "drawerTitle" }] : []));
     drawerSubtitle = computed(() => this.readDisplayField(this.details()?.item, 'subtitle') ?? '', ...(ngDevMode ? [{ debugName: "drawerSubtitle" }] : []));
     constructor() {
         effect(() => {
-            console.log('[work-center-debug] drawer route state', {
-                rawContextKey: this.contextKey(),
-                resolvedContextKey: this.resolvedContextKey(),
-                visible: this.drawerVisible(),
-                loading: this.loading(),
-                hasDetails: !!this.details(),
-                error: this.error(),
-                currentUrl: this.router.url,
-                outlet: this.route.outlet,
-            });
+            this.footerActionsMounted.set(!!this.resolvedContextKey());
         });
         effect((onCleanup) => {
             const contextKey = this.resolvedContextKey();
-            console.log('[work-center-debug] drawer route load effect', {
+            const reloadTick = this.detailsReloadTick();
+            console.log('[work-center-debug] modal route load effect', {
                 contextKey,
+                reloadTick,
             });
             this.error.set(null);
             this.details.set(null);
             if (!contextKey) {
                 this.loading.set(false);
-                console.log('[work-center-debug] drawer route load skipped, no context key');
+                console.log('[work-center-debug] modal route load skipped, no context key');
                 return;
             }
             this.loading.set(true);
-            console.log('[work-center-debug] drawer route fetch start', {
+            console.log('[work-center-debug] modal route fetch start', {
                 endpoint: 'workcenter/runtime/item-basic-info',
                 contextKey,
             });
@@ -1198,7 +1742,7 @@ class WorkCenterItemDrawerRoute {
             }))
                 .subscribe({
                 next: (details) => {
-                    console.log('[work-center-debug] drawer route fetch success', {
+                    console.log('[work-center-debug] modal route fetch success', {
                         contextKey,
                         details,
                     });
@@ -1206,7 +1750,7 @@ class WorkCenterItemDrawerRoute {
                     this.loading.set(false);
                 },
                 error: (error) => {
-                    console.error('[work-center-debug] drawer route fetch failed', {
+                    console.error('[work-center-debug] modal route fetch failed', {
                         contextKey,
                         error,
                     });
@@ -1219,16 +1763,22 @@ class WorkCenterItemDrawerRoute {
             onCleanup(() => subscription.unsubscribe());
         });
     }
+    onActionExecuted() {
+        this.detailsReloadTick.update((value) => value + 1);
+    }
+    onFooterVisibilityChange(visible) {
+        this.footerActionsMounted.set(visible);
+    }
     async onVisibleChange(visible) {
         this.drawerVisible.set(visible);
-        console.log('[work-center-debug] drawer visible change', { visible });
+        console.log('[work-center-debug] modal route visible change', { visible });
         if (visible) {
             return;
         }
-        await this.closeDrawer();
+        await this.closeRouteOutlet();
     }
-    closeDrawer() {
-        console.log('[work-center-debug] drawer closing', {
+    closeRouteOutlet() {
+        console.log('[work-center-debug] modal route closing', {
             outlet: this.route.outlet || 'sidebar',
             parentUrl: this.route.parent?.snapshot.url.map((segment) => segment.path),
         });
@@ -1239,7 +1789,7 @@ class WorkCenterItemDrawerRoute {
             replaceUrl: true,
         })
             .then((success) => {
-            console.log('[work-center-debug] drawer close navigate result', {
+            console.log('[work-center-debug] modal route close navigate result', {
                 success,
                 currentUrl: this.router.url,
             });
@@ -1276,12 +1826,18 @@ class WorkCenterItemDrawerRoute {
             ? display
             : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemDrawerRoute, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemDrawerRoute, isStandalone: true, selector: "mt-work-center-item-drawer-route", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-drawer\r\n  [visible]=\"drawerVisible()\"\r\n  [loadingHeader]=\"loading()\"\r\n  [title]=\"drawerTitle()\"\r\n  [subtitle]=\"drawerSubtitle()\"\r\n  [appendTo]=\"'system-content'\"\r\n  styleClass=\"!w-[84%] !absolute !shadow-none\"\r\n  position=\"right\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\r\n          <div class=\"flex items-center gap-3\">\r\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\r\n            <div class=\"flex flex-1 flex-col gap-2\">\r\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\r\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid gap-3 md:grid-cols-2\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"5rem\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <mt-work-center-item-drawer [details]=\"details\" />\r\n    } @else {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"text-sm font-medium text-surface-500\">No item selected.</p>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n</mt-drawer>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Drawer, selector: "mt-drawer", inputs: ["visible", "position", "fullScreen", "closeOnEscape", "blockScroll", "dismissible", "title", "subtitle", "loadingHeader", "styleClass", "transitionOptions", "appendTo", "modal"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: WorkCenterItemDrawer, selector: "mt-work-center-item-drawer", inputs: ["details"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModalRoute, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModalRoute, isStandalone: true, selector: "mt-work-center-item-modal-route", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, providers: [WorkCenterItemActionContextStore], ngImport: i0, template: "<mt-drawer\n  [visible]=\"drawerVisible()\"\n  [loadingHeader]=\"loading()\"\n  [title]=\"drawerTitle()\"\n  [subtitle]=\"drawerSubtitle()\"\n  [appendTo]=\"'system-content'\"\n  styleClass=\"!w-[90%] !absolute \"\n  position=\"right\"\n  (visibleChange)=\"onVisibleChange($event)\"\n>\n  <ng-container content>\n    @if (loading()) {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\n          <div class=\"flex items-center gap-3\">\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\n            <div class=\"flex flex-1 flex-col gap-2\">\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\n            </div>\n          </div>\n\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            @for (_ of [1, 2, 3, 4]; track $index) {\n              <p-skeleton height=\"5rem\" borderRadius=\"1rem\" />\n            }\n          </div>\n\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\n        </div>\n      </div>\n    } @else if (error(); as errorMessage) {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\n            {{ errorMessage }}\n          </p>\n        </div>\n      </div>\n    } @else if (details(); as details) {\n      <mt-work-center-item-modal [details]=\"details\" />\n    } @else {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\n          <p class=\"text-sm font-medium text-surface-500\">No item selected.</p>\n        </div>\n      </div>\n    }\n  </ng-container>\n\n  @if (footerActionsMounted()) {\n    <div footer [class]=\"modal.footerClass\">\n      <mt-work-center-item-modal-footer-actions\n        [contextKey]=\"resolvedContextKey()\"\n        (actionExecuted)=\"onActionExecuted()\"\n        (visibilityChange)=\"onFooterVisibilityChange($event)\"\n      />\n    </div>\n  }\n</mt-drawer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Drawer, selector: "mt-drawer", inputs: ["visible", "position", "fullScreen", "closeOnEscape", "blockScroll", "dismissible", "title", "subtitle", "loadingHeader", "styleClass", "transitionOptions", "appendTo", "modal"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: WorkCenterItemModal, selector: "mt-work-center-item-modal", inputs: ["details"] }, { kind: "component", type: WorkCenterItemModalFooterActions, selector: "mt-work-center-item-modal-footer-actions", inputs: ["contextKey"], outputs: ["actionExecuted", "visibilityChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemDrawerRoute, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModalRoute, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-work-center-item-drawer-route', standalone: true, imports: [CommonModule, Drawer, SkeletonModule, WorkCenterItemDrawer], template: "<mt-drawer\r\n  [visible]=\"drawerVisible()\"\r\n  [loadingHeader]=\"loading()\"\r\n  [title]=\"drawerTitle()\"\r\n  [subtitle]=\"drawerSubtitle()\"\r\n  [appendTo]=\"'system-content'\"\r\n  styleClass=\"!w-[84%] !absolute !shadow-none\"\r\n  position=\"right\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\r\n          <div class=\"flex items-center gap-3\">\r\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\r\n            <div class=\"flex flex-1 flex-col gap-2\">\r\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\r\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid gap-3 md:grid-cols-2\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"5rem\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <mt-work-center-item-drawer [details]=\"details\" />\r\n    } @else {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"text-sm font-medium text-surface-500\">No item selected.</p>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n</mt-drawer>\r\n" }]
+            args: [{ selector: 'mt-work-center-item-modal-route', standalone: true, imports: [
+                        CommonModule,
+                        Drawer,
+                        SkeletonModule,
+                        WorkCenterItemModal,
+                        WorkCenterItemModalFooterActions,
+                    ], providers: [WorkCenterItemActionContextStore], template: "<mt-drawer\n  [visible]=\"drawerVisible()\"\n  [loadingHeader]=\"loading()\"\n  [title]=\"drawerTitle()\"\n  [subtitle]=\"drawerSubtitle()\"\n  [appendTo]=\"'system-content'\"\n  styleClass=\"!w-[90%] !absolute \"\n  position=\"right\"\n  (visibleChange)=\"onVisibleChange($event)\"\n>\n  <ng-container content>\n    @if (loading()) {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\n          <div class=\"flex items-center gap-3\">\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\n            <div class=\"flex flex-1 flex-col gap-2\">\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\n            </div>\n          </div>\n\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            @for (_ of [1, 2, 3, 4]; track $index) {\n              <p-skeleton height=\"5rem\" borderRadius=\"1rem\" />\n            }\n          </div>\n\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\n        </div>\n      </div>\n    } @else if (error(); as errorMessage) {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\n            {{ errorMessage }}\n          </p>\n        </div>\n      </div>\n    } @else if (details(); as details) {\n      <mt-work-center-item-modal [details]=\"details\" />\n    } @else {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\n          <p class=\"text-sm font-medium text-surface-500\">No item selected.</p>\n        </div>\n      </div>\n    }\n  </ng-container>\n\n  @if (footerActionsMounted()) {\n    <div footer [class]=\"modal.footerClass\">\n      <mt-work-center-item-modal-footer-actions\n        [contextKey]=\"resolvedContextKey()\"\n        (actionExecuted)=\"onActionExecuted()\"\n        (visibilityChange)=\"onFooterVisibilityChange($event)\"\n      />\n    </div>\n  }\n</mt-drawer>\n" }]
         }], ctorParameters: () => [], propDecorators: { contextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextKey", required: false }] }] } });
 
 const APP_STATES = [WorkCenterState];
@@ -1290,5 +1846,5 @@ const APP_STATES = [WorkCenterState];
  * Generated bundle index. Do not edit.
  */
 
-export { APP_STATES, EnterArea, HydrateFromContext, LoadRuntime, SetParams, WORK_CENTER_MAX_FILTERS, WORK_CENTER_MAX_PAGE_SIZE, WORK_CENTER_MAX_SORT, WORK_CENTER_QUERY_VERSION, WorkCenterActionKey, WorkCenterFacade, WorkCenterItemDrawer, WorkCenterItemDrawerRoute, WorkCenterPage, WorkCenterState };
+export { APP_STATES, EnterArea, HydrateFromContext, LoadRuntime, SetParams, WORK_CENTER_MAX_FILTERS, WORK_CENTER_MAX_PAGE_SIZE, WORK_CENTER_MAX_SORT, WORK_CENTER_QUERY_VERSION, WorkCenterActionKey, WorkCenterFacade, WorkCenterItemModal, WorkCenterItemModalRoute, WorkCenterPage, WorkCenterState };
 //# sourceMappingURL=masterteam-work-center.mjs.map