@masterteam/work-center 0.0.4 → 0.0.6

package/fesm2022/masterteam-work-center.mjs

@@ -16,6 +16,7 @@ import { EntitiesPreview } from '@masterteam/components/entities';
 import { Tabs } from '@masterteam/components/tabs';
 import { DiscussionThread } from '@masterteam/discussion';
 import { StructureBuilder } from '@masterteam/structure-builder';
+import { ClientInstancePreview } from '@masterteam/client-components/client-instance-preview';
 import { ClientForm } from '@masterteam/forms/client-form';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Drawer } from '@masterteam/components/drawer';
@@ -921,7 +922,6 @@ 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" }] : []));
@@ -973,7 +973,7 @@ class WorkCenterEscalationInstanceType {
             {
                 key: 'attachments',
                 name: 'Attachments',
-                value: preview.attachments ?? [],
+                value: mapAttachments(preview.attachments),
                 viewType: 'Attachment',
                 order: 4,
                 configuration: { size: 24 },
@@ -1011,12 +1011,6 @@ 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);
@@ -1038,7 +1032,7 @@ 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() !== '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"] }] });
+    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\">\r\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'escalationDetails'\">\r\n    @if (canRenderDetails()) {\r\n      @if (loading()) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Loading escalation details...\r\n          </p>\r\n        </div>\r\n      } @else if (error(); as error) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-red-600\">\r\n            {{ error }}\r\n          </p>\r\n        </div>\r\n      } @else if (preview()) {\r\n        <mt-entities-preview [entities]=\"detailEntities()\" />\r\n      }\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Escalation details context is not available for this item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\r\n    @if (canRenderDiscussion()) {\r\n      <div class=\"h-[70vh] min-h-[32rem]\">\r\n        <mt-discussion-thread\n          [moduleType]=\"'EscalationInstance'\"\n          [recordId]=\"resolvedInstanceId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n        />\n      </div>\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Discussion context is not available for this escalation yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderDetails()) {\r\n      @if (loading()) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Loading escalation schema...\r\n          </p>\r\n        </div>\r\n      } @else if (error(); as error) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-red-600\">\r\n            {{ error }}\r\n          </p>\r\n        </div>\r\n      } @else if (hasSchema()) {\r\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\r\n          <mt-structure-builder\r\n            class=\"h-full\"\r\n            [readonly]=\"true\"\r\n            [nodes]=\"schemaNodes()\"\r\n            [connections]=\"schemaConnections()\"\r\n          />\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Escalation schema is not available for this item yet.\r\n          </p>\r\n        </div>\r\n      }\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Escalation schema context is not available for this item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\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,
@@ -1048,7 +1042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         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" }]
+                    ], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\r\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'escalationDetails'\">\r\n    @if (canRenderDetails()) {\r\n      @if (loading()) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Loading escalation details...\r\n          </p>\r\n        </div>\r\n      } @else if (error(); as error) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-red-600\">\r\n            {{ error }}\r\n          </p>\r\n        </div>\r\n      } @else if (preview()) {\r\n        <mt-entities-preview [entities]=\"detailEntities()\" />\r\n      }\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Escalation details context is not available for this item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\r\n    @if (canRenderDiscussion()) {\r\n      <div class=\"h-[70vh] min-h-[32rem]\">\r\n        <mt-discussion-thread\n          [moduleType]=\"'EscalationInstance'\"\n          [recordId]=\"resolvedInstanceId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n        />\n      </div>\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Discussion context is not available for this escalation yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderDetails()) {\r\n      @if (loading()) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Loading escalation schema...\r\n          </p>\r\n        </div>\r\n      } @else if (error(); as error) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-red-600\">\r\n            {{ error }}\r\n          </p>\r\n        </div>\r\n      } @else if (hasSchema()) {\r\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\r\n          <mt-structure-builder\r\n            class=\"h-full\"\r\n            [readonly]=\"true\"\r\n            [nodes]=\"schemaNodes()\"\r\n            [connections]=\"schemaConnections()\"\r\n          />\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Escalation schema is not available for this item yet.\r\n          </p>\r\n        </div>\r\n      }\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Escalation schema context is not available for this item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
 function mapUserValue(value) {
     if (!value || typeof value !== 'object') {
@@ -1069,6 +1063,9 @@ function mapUserValue(value) {
         email: readString(value, 'email') ?? readString(value, 'emailAddress'),
     };
 }
+function mapAttachments(value) {
+    return (value ?? []);
+}
 function resolveSchemaSteps(preview) {
     return preview?.schema?.stepsSchema ?? preview?.schemaSteps ?? [];
 }
@@ -1103,18 +1100,86 @@ function readString(value, key) {
     return typeof result === 'string' && result.length ? result : undefined;
 }
 
-class WorkCenterProcessPreviewJson {
+class WorkCenterModuleType {
+    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
+    activeTab = signal('details', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    tabOptions = [
+        {
+            label: 'Details',
+            value: 'details',
+        },
+        {
+            label: 'Discussion',
+            value: 'discussion',
+        },
+    ];
+    itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
+    instanceId = computed(() => readNumber(this.itemContext(), 'instanceId'), ...(ngDevMode ? [{ debugName: "instanceId" }] : []));
+    moduleId = computed(() => readNumber(this.itemContext(), 'moduleId'), ...(ngDevMode ? [{ debugName: "moduleId" }] : []));
+    levelId = computed(() => readNumber(this.itemContext(), 'levelId'), ...(ngDevMode ? [{ debugName: "levelId" }] : []));
+    resolvedInstanceId = computed(() => this.instanceId() ?? 0, ...(ngDevMode ? [{ debugName: "resolvedInstanceId" }] : []));
+    previewConfig = computed(() => {
+        const instanceId = this.instanceId();
+        const moduleId = this.moduleId();
+        const levelId = this.levelId();
+        if (!instanceId || !moduleId || !levelId) {
+            return null;
+        }
+        return {
+            instanceId,
+            moduleId,
+            levelId,
+            displayAreas: 'card',
+        };
+    }, ...(ngDevMode ? [{ debugName: "previewConfig" }] : []));
+    discussionModuleType = computed(() => readString$1(this.itemContext(), 'moduleKey') ??
+        this.details().sourceType ??
+        this.details().type ??
+        '', ...(ngDevMode ? [{ debugName: "discussionModuleType" }] : []));
+    canRenderDiscussion = computed(() => this.resolvedInstanceId() > 0 && this.discussionModuleType().trim().length > 0, ...(ngDevMode ? [{ debugName: "canRenderDiscussion" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterModuleType, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterModuleType, isStandalone: true, selector: "mt-work-center-module-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() !== 'details'\">\n    @if (previewConfig(); as config) {\n      <mt-client-instance-preview [config]=\"config\" />\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 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]=\"discussionModuleType()\"\n          [recordId]=\"resolvedInstanceId()\"\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        />\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 module 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: ClientInstancePreview, selector: "mt-client-instance-preview", inputs: ["config"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterModuleType, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-module-type', standalone: true, imports: [CommonModule, Tabs, ClientInstancePreview, DiscussionThread], 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() !== 'details'\">\n    @if (previewConfig(); as config) {\n      <mt-client-instance-preview [config]=\"config\" />\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 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]=\"discussionModuleType()\"\n          [recordId]=\"resolvedInstanceId()\"\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        />\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 module yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
+
+class WorkCenterProcessPreview {
     http = inject(HttpClient);
     loadSub;
     requestId = input(null, ...(ngDevMode ? [{ debugName: "requestId" }] : []));
+    view = input('approvals', ...(ngDevMode ? [{ debugName: "view" }] : []));
+    approvalColumns = [
+        { key: 'stepName', label: 'Name' },
+        { key: 'status', label: 'Status' },
+        { key: 'user', label: 'User', type: 'entity' },
+        { key: 'createdAt', label: 'Initiation Date', type: 'entity' },
+        { key: 'actionDate', label: 'Action Date', type: 'entity' },
+    ];
     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" }] : []));
+    approvalRows = computed(() => (this.preview()?.steps ?? []).map((step) => ({
+        stepName: display(step.stepName) || String(step.stepId ?? '--'),
+        status: display(step.status) || '--',
+        user: buildEntity('User', 'User', (step.actionUserInfo ?? step.targetUser ?? null)),
+        createdAt: buildEntity('Initiation Date', 'DateTime', step.createdAt ?? ''),
+        actionDate: buildEntity('Action Date', 'DateTime', step.actionDate ?? ''),
+    })), ...(ngDevMode ? [{ debugName: "approvalRows" }] : []));
+    hasApprovals = computed(() => this.approvalRows().length > 0, ...(ngDevMode ? [{ debugName: "hasApprovals" }] : []));
+    schemaNodes = computed(() => (this.preview()?.schema?.stepsSchema ?? []).map((step) => ({
+        id: String(step.id),
+        name: display(step.name) || String(step.id),
+        color: step.isFinal ? '#059669' : step.isInitial ? '#2563eb' : '#0f172a',
+    })), ...(ngDevMode ? [{ debugName: "schemaNodes" }] : []));
+    schemaConnections = computed(() => (this.preview()?.schema?.connections ?? []).map((connection, index) => ({
+        id: String(connection.id ?? `${connection.source}-${connection.target}-${index}`),
+        from: String(connection.source),
+        to: String(connection.target),
+    })), ...(ngDevMode ? [{ debugName: "schemaConnections" }] : []));
+    hasSchema = computed(() => this.schemaNodes().length > 0, ...(ngDevMode ? [{ debugName: "hasSchema" }] : []));
     constructor() {
         effect(() => {
             const requestId = this.requestId() ?? 0;
@@ -1151,30 +1216,62 @@ class WorkCenterProcessPreviewJson {
             },
         });
     }
-    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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterProcessPreview, isStandalone: true, selector: "mt-work-center-process-preview", inputs: { requestId: { classPropertyName: "requestId", publicName: "requestId", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!canRenderPreview()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n  >\r\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n      Process preview is not available for this item yet.\r\n    </p>\r\n  </div>\r\n} @else if (loading()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n  >\r\n    <p class=\"text-sm text-surface-500\">Loading process preview...</p>\r\n  </div>\r\n} @else if (error()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n  >\r\n    <p class=\"max-w-md text-center text-sm text-red-600\">{{ error() }}</p>\r\n  </div>\r\n} @else {\r\n  @if (view() === \"schema\") {\r\n    @if (hasSchema()) {\r\n      <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\r\n        <mt-structure-builder\r\n          class=\"h-full\"\r\n          [readonly]=\"true\"\r\n          [nodes]=\"schemaNodes()\"\r\n          [connections]=\"schemaConnections()\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process steps are not available for this item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  } @else if (hasApprovals()) {\r\n    <mt-table\r\n      [data]=\"approvalRows()\"\r\n      [columns]=\"approvalColumns\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [clickableRows]=\"false\"\r\n    />\r\n  } @else {\r\n    <div\r\n      class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n    >\r\n      <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n        Process approvals data is not available for this item yet.\r\n      </p>\r\n    </div>\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "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: WorkCenterProcessPreviewJson, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessPreview, 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 }] }] } });
+            args: [{ selector: 'mt-work-center-process-preview', standalone: true, imports: [CommonModule, Table, StructureBuilder], template: "@if (!canRenderPreview()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n  >\r\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n      Process preview is not available for this item yet.\r\n    </p>\r\n  </div>\r\n} @else if (loading()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n  >\r\n    <p class=\"text-sm text-surface-500\">Loading process preview...</p>\r\n  </div>\r\n} @else if (error()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n  >\r\n    <p class=\"max-w-md text-center text-sm text-red-600\">{{ error() }}</p>\r\n  </div>\r\n} @else {\r\n  @if (view() === \"schema\") {\r\n    @if (hasSchema()) {\r\n      <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\r\n        <mt-structure-builder\r\n          class=\"h-full\"\r\n          [readonly]=\"true\"\r\n          [nodes]=\"schemaNodes()\"\r\n          [connections]=\"schemaConnections()\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process steps are not available for this item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  } @else if (hasApprovals()) {\r\n    <mt-table\r\n      [data]=\"approvalRows()\"\r\n      [columns]=\"approvalColumns\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [clickableRows]=\"false\"\r\n    />\r\n  } @else {\r\n    <div\r\n      class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n    >\r\n      <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n        Process approvals data is not available for this item yet.\r\n      </p>\r\n    </div>\r\n  }\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { requestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestId", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }] } });
+function buildEntity(name, viewType, value) {
+    return {
+        name,
+        viewType,
+        value: value ?? '',
+        configuration: {
+            hideName: true,
+        },
+    };
+}
+function display(value) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number' || typeof value === 'boolean') {
+        return String(value);
+    }
+    if (!value || typeof value !== 'object') {
+        return '';
+    }
+    const resolved = value.display;
+    if (typeof resolved === 'string') {
+        return resolved;
+    }
+    if (typeof resolved === 'number' || typeof resolved === 'boolean') {
+        return String(resolved);
+    }
+    return '';
+}
 
 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: 'Approvals',
+            value: 'approvals',
         },
         {
-            label: 'Preview',
-            value: 'preview',
+            label: 'Steps',
+            value: 'schema',
+        },
+        {
+            label: 'Discussion',
+            value: 'discussion',
         },
     ];
     itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
@@ -1183,18 +1280,12 @@ class WorkCenterProcessRequestType {
     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.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"] }] });
+    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\">\r\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'requestDetails'\">\r\n    <div\r\n      class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n    >\r\n      <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n        Process request details view will be added here.\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'approvals'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'approvals'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process request yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process request yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\r\n    @if (canRenderDiscussion()) {\r\n      <div class=\"h-[70vh] min-h-[32rem]\">\r\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n        />\n      </div>\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Discussion context is not available for this process request yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\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: WorkCenterProcessPreview, selector: "mt-work-center-process-preview", inputs: ["requestId", "view"] }] });
 }
 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, 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" }]
+            args: [{ selector: 'mt-work-center-process-request-type', standalone: true, imports: [CommonModule, Tabs, DiscussionThread, WorkCenterProcessPreview], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\r\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'requestDetails'\">\r\n    <div\r\n      class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n    >\r\n      <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n        Process request details view will be added here.\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'approvals'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'approvals'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process request yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process request yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\r\n    @if (canRenderDiscussion()) {\r\n      <div class=\"h-[70vh] min-h-[32rem]\">\r\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n        />\n      </div>\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Discussion context is not available for this process request yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
 
 class WorkCenterItemActionContextStore {
@@ -1226,19 +1317,22 @@ class WorkCenterProcessStepType {
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
     clientForm = viewChild(ClientForm, ...(ngDevMode ? [{ debugName: "clientForm" }] : []));
     activeTab = signal('form', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
-    currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
     tabOptions = [
         {
             label: 'Form',
             value: 'form',
         },
         {
-            label: 'Discussion',
-            value: 'discussion',
+            label: 'Approvals',
+            value: 'approvals',
+        },
+        {
+            label: 'Steps',
+            value: 'schema',
         },
         {
-            label: 'Preview',
-            value: 'preview',
+            label: 'Discussion',
+            value: 'discussion',
         },
     ];
     itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
@@ -1262,17 +1356,11 @@ class WorkCenterProcessStepType {
             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 } }, 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"] }] });
+    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\">\r\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n\r\n  <div class=\"flex-1 p-4\" [hidden]=\"activeTab() !== 'form'\">\r\n    <div class=\"flex-1\">\r\n      @if (canRenderForm()) {\r\n        <mt-client-form\r\n          [moduleKey]=\"moduleKey()\"\r\n          [operationKey]=\"operationKey()\"\r\n          [moduleId]=\"moduleId()\"\r\n          [levelId]=\"levelId()\"\r\n          [levelDataId]=\"levelDataId()\"\r\n          [moduleDataId]=\"moduleDataId()\"\r\n          [requestSchemaId]=\"requestSchemaId()\"\r\n          [draftProcessId]=\"draftProcessId()\"\r\n        />\r\n      } @else {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Process form context is not available for this item yet.\r\n          </p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'approvals'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'approvals'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\r\n    @if (canRenderDiscussion()) {\r\n      <div class=\"h-[70vh] min-h-[32rem]\">\r\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n        />\n      </div>\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Discussion context is not available for this process item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\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: WorkCenterProcessPreview, selector: "mt-work-center-process-preview", inputs: ["requestId", "view"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessStepType, decorators: [{
             type: Component,
@@ -1281,14 +1369,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         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" }]
+                        WorkCenterProcessPreview,
+                    ], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\r\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n\r\n  <div class=\"flex-1 p-4\" [hidden]=\"activeTab() !== 'form'\">\r\n    <div class=\"flex-1\">\r\n      @if (canRenderForm()) {\r\n        <mt-client-form\r\n          [moduleKey]=\"moduleKey()\"\r\n          [operationKey]=\"operationKey()\"\r\n          [moduleId]=\"moduleId()\"\r\n          [levelId]=\"levelId()\"\r\n          [levelDataId]=\"levelDataId()\"\r\n          [moduleDataId]=\"moduleDataId()\"\r\n          [requestSchemaId]=\"requestSchemaId()\"\r\n          [draftProcessId]=\"draftProcessId()\"\r\n        />\r\n      } @else {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Process form context is not available for this item yet.\r\n          </p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'approvals'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'approvals'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\r\n    @if (canRenderDiscussion()) {\r\n      <div class=\"h-[70vh] min-h-[32rem]\">\r\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n        />\n      </div>\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Discussion context is not available for this process item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\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 WorkCenterItemModal {
     details = input.required(...(ngDevMode ? [{ debugName: "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"] }] });
+    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\") {\r\n  <mt-work-center-process-step-type [details]=\"details()\" />\r\n} @else if (details().type === \"ProcessRequest\") {\r\n  <mt-work-center-process-request-type [details]=\"details()\" />\r\n} @else if (details().type === \"EscalationInstance\") {\r\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\r\n} @else if (details().type === \"Module\") {\r\n  <mt-work-center-module-type [details]=\"details()\" />\r\n} @else {\r\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\r\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\r\n  </div>\r\n}\r\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"] }, { kind: "component", type: WorkCenterModuleType, selector: "mt-work-center-module-type", inputs: ["details"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModal, decorators: [{
             type: Component,
@@ -1297,7 +1385,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         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" }]
+                        WorkCenterModuleType,
+                    ], template: "@if (details().type === \"ProcessStep\") {\r\n  <mt-work-center-process-step-type [details]=\"details()\" />\r\n} @else if (details().type === \"ProcessRequest\") {\r\n  <mt-work-center-process-request-type [details]=\"details()\" />\r\n} @else if (details().type === \"EscalationInstance\") {\r\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\r\n} @else if (details().type === \"Module\") {\r\n  <mt-work-center-module-type [details]=\"details()\" />\r\n} @else {\r\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\r\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\r\n  </div>\r\n}\r\n" }]
         }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
 
 class WorkCenterItemActionConfirmDialog {
@@ -1327,11 +1416,11 @@ class WorkCenterItemActionConfirmDialog {
         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"] }] });
+    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'\">\r\n  @if (hasFormFields()) {\r\n    <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"formControl\" />\r\n  } @else {\r\n    <p class=\"text-sm text-surface-500\">\r\n      Confirm {{ actionLabel() }} for this item.\r\n    </p>\r\n  }\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass\">\r\n  <mt-button\r\n    label=\"Cancel\"\r\n    severity=\"secondary\"\r\n    variant=\"outlined\"\r\n    (onClick)=\"onCancel()\"\r\n  />\r\n  <mt-button [label]=\"actionLabel()\" (onClick)=\"onConfirm()\" />\r\n</div>\r\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" }]
+            args: [{ selector: 'mt-work-center-item-action-confirm-dialog', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicForm, Button], template: "<div [class]=\"modal.contentClass + ' p-4'\">\r\n  @if (hasFormFields()) {\r\n    <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"formControl\" />\r\n  } @else {\r\n    <p class=\"text-sm text-surface-500\">\r\n      Confirm {{ actionLabel() }} for this item.\r\n    </p>\r\n  }\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass\">\r\n  <mt-button\r\n    label=\"Cancel\"\r\n    severity=\"secondary\"\r\n    variant=\"outlined\"\r\n    (onClick)=\"onCancel()\"\r\n  />\r\n  <mt-button [label]=\"actionLabel()\" (onClick)=\"onConfirm()\" />\r\n</div>\r\n" }]
         }], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: true }] }] } });
 function buildActionFields(payloadKeys, requiredPayloadKeys) {
     const requestedKeys = new Set(payloadKeys ?? []);
@@ -1593,13 +1682,13 @@ class WorkCenterItemModalFooterActions {
         });
     }
     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"] }] });
+    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()) {\r\n  @if (error(); as error) {\r\n    <span class=\"me-auto max-w-md text-sm text-red-600\">\r\n      {{ error }}\r\n    </span>\r\n  } @else if (loading() && !displayActions().length) {\r\n    <span class=\"me-auto text-sm text-surface-500\">Loading actions...</span>\r\n  }\r\n\r\n  @for (action of displayActions(); track action.actionKey + action.url) {\r\n    <mt-button\r\n      [label]=\"action.label\"\r\n      [severity]=\"action.severity\"\r\n      [variant]=\"action.variant\"\r\n      [disabled]=\"loading() || !!pendingActionKey()\"\r\n      [loading]=\"pendingActionKey() === action.actionKey\"\r\n      (onClick)=\"executeAction(action)\"\r\n    />\r\n  }\r\n}\r\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" }]
+                    }, template: "@if (shouldRender()) {\r\n  @if (error(); as error) {\r\n    <span class=\"me-auto max-w-md text-sm text-red-600\">\r\n      {{ error }}\r\n    </span>\r\n  } @else if (loading() && !displayActions().length) {\r\n    <span class=\"me-auto text-sm text-surface-500\">Loading actions...</span>\r\n  }\r\n\r\n  @for (action of displayActions(); track action.actionKey + action.url) {\r\n    <mt-button\r\n      [label]=\"action.label\"\r\n      [severity]=\"action.severity\"\r\n      [variant]=\"action.variant\"\r\n      [disabled]=\"loading() || !!pendingActionKey()\"\r\n      [loading]=\"pendingActionKey() === action.actionKey\"\r\n      (onClick)=\"executeAction(action)\"\r\n    />\r\n  }\r\n}\r\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)) {
@@ -1827,7 +1916,7 @@ class WorkCenterItemModalRoute {
             : null;
     }
     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"] }] });
+    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\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-[90%] !absolute \"\r\n  position=\"right\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\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=\"p-4\" [class]=\"modal.contentClass\">\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-modal [details]=\"details\" />\r\n    } @else {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\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\r\n  @if (footerActionsMounted()) {\r\n    <div footer [class]=\"modal.footerClass\">\r\n      <mt-work-center-item-modal-footer-actions\r\n        [contextKey]=\"resolvedContextKey()\"\r\n        (actionExecuted)=\"onActionExecuted()\"\r\n        (visibilityChange)=\"onFooterVisibilityChange($event)\"\r\n      />\r\n    </div>\r\n  }\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: 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: WorkCenterItemModalRoute, decorators: [{
             type: Component,
@@ -1837,7 +1926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         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" }]
+                    ], providers: [WorkCenterItemActionContextStore], 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-[90%] !absolute \"\r\n  position=\"right\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\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=\"p-4\" [class]=\"modal.contentClass\">\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-modal [details]=\"details\" />\r\n    } @else {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\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\r\n  @if (footerActionsMounted()) {\r\n    <div footer [class]=\"modal.footerClass\">\r\n      <mt-work-center-item-modal-footer-actions\r\n        [contextKey]=\"resolvedContextKey()\"\r\n        (actionExecuted)=\"onActionExecuted()\"\r\n        (visibilityChange)=\"onFooterVisibilityChange($event)\"\r\n      />\r\n    </div>\r\n  }\r\n</mt-drawer>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { contextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextKey", required: false }] }] } });
 
 const APP_STATES = [WorkCenterState];