@masterteam/work-center 0.0.5 → 0.0.7

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';
@@ -811,7 +812,7 @@ class WorkCenterPage {
             allowedOperators: fallbackOperators,
         };
     }, ...(ngDevMode ? [{ debugName: "propertyFilterSchema" }] : []));
-    defaultModalStyleClass = '!w-[96vw] xl:!w-[calc(100%-8rem)] 2xl:!w-[calc(100%-12rem)] !absolute !shadow-none';
+    defaultModalStyleClass = '!w-[96vw] xl:!w-[calc(100%-8rem)] 2xl:!w-[calc(100%-12rem)] !shadow-none';
     onMenuItemClick(item) {
         if (item.key === this.context().selectedCardKey) {
             return;
@@ -876,7 +877,7 @@ class WorkCenterPage {
         return normalized.length ? normalized : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, openItemsInModal: { classPropertyName: "openItemsInModal", publicName: "openItemsInModal", isSignal: true, isRequired: false, transformFunction: null }, itemModal: { classPropertyName: "itemModal", publicName: "itemModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked" }, ngImport: i0, template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"pageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <mt-property-filter-builder\r\n      [schema]=\"propertyFilterSchema()\"\r\n      [filters]=\"context().runtimeFilters\"\r\n      (applied)=\"onRuntimeFiltersApplied($event)\"\r\n      (cleared)=\"onRuntimeFiltersCleared()\"\r\n    />\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-4\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [lazy]=\"true\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"tableCurrentPage()\"\r\n      [first]=\"tableFirst()\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed"], outputs: ["collapsedChange", "menuItemClick"] }, { kind: "component", type: PropertyFilterBuilder, selector: "mt-property-filter-builder", inputs: ["schema", "filters", "title", "buttonLabel", "disabled"], outputs: ["filtersChange", "applied", "cleared"] }, { kind: "component", type: StatisticCard, selector: "mt-statistic-card", inputs: ["data"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, openItemsInModal: { classPropertyName: "openItemsInModal", publicName: "openItemsInModal", isSignal: true, isRequired: false, transformFunction: null }, itemModal: { classPropertyName: "itemModal", publicName: "itemModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked" }, ngImport: i0, template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"pageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <mt-property-filter-builder\r\n      [schema]=\"propertyFilterSchema()\"\r\n      [filters]=\"context().runtimeFilters\"\r\n      (applied)=\"onRuntimeFiltersApplied($event)\"\r\n      (cleared)=\"onRuntimeFiltersCleared()\"\r\n    />\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-4\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [lazy]=\"true\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"tableCurrentPage()\"\r\n      [first]=\"tableFirst()\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed"], outputs: ["collapsedChange", "menuItemClick"] }, { kind: "component", type: PropertyFilterBuilder, selector: "mt-property-filter-builder", inputs: ["schema", "filters", "title", "buttonLabel", "disabled"], outputs: ["filtersChange", "applied", "cleared"] }, { kind: "component", type: StatisticCard, selector: "mt-statistic-card", inputs: ["data"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "actionShape", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterPage, decorators: [{
             type: Component,
@@ -911,7 +912,7 @@ function readNumber(source, key) {
     }
     return undefined;
 }
-function readString$2(source, key) {
+function readString$1(source, key) {
     const value = source?.[key];
     return typeof value === 'string' && value.trim().length ? value : undefined;
 }
@@ -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\r\n          [moduleType]=\"'EscalationInstance'\"\r\n          [recordId]=\"resolvedInstanceId()\"\r\n          [mentionSearchEndpoint]=\"'Identity/users'\"\r\n          [mentionSearchParam]=\"'query'\"\r\n          [mentionSearchDataPath]=\"'data'\"\r\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\r\n          [autoMarkRead]=\"true\"\r\n          [refreshIntervalMs]=\"0\"\r\n          [styleClass]=\"'h-full'\"\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          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", "connectionFormulaSchemaId", "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\r\n          [moduleType]=\"'EscalationInstance'\"\r\n          [recordId]=\"resolvedInstanceId()\"\r\n          [mentionSearchEndpoint]=\"'Identity/users'\"\r\n          [mentionSearchParam]=\"'query'\"\r\n          [mentionSearchDataPath]=\"'data'\"\r\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\r\n          [autoMarkRead]=\"true\"\r\n          [refreshIntervalMs]=\"0\"\r\n          [styleClass]=\"'h-full'\"\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          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') {
@@ -1058,17 +1052,20 @@ function mapUserValue(value) {
         };
     }
     return {
-        id: readString$1(value, 'id'),
-        userName: readString$1(value, 'userName'),
-        displayName: readString$1(value, 'displayName') ??
-            readString$1(value, 'fullName') ??
-            readString$1(value, 'userName') ??
+        id: readString(value, 'id'),
+        userName: readString(value, 'userName'),
+        displayName: readString(value, 'displayName') ??
+            readString(value, 'fullName') ??
+            readString(value, 'userName') ??
             '',
-        photoUrl: readString$1(value, 'photoUrl'),
-        phoneNumber: readString$1(value, 'phoneNumber') ?? readString$1(value, 'mobileNumber'),
-        email: readString$1(value, 'email') ?? readString$1(value, 'emailAddress'),
+        photoUrl: readString(value, 'photoUrl'),
+        phoneNumber: readString(value, 'phoneNumber') ?? readString(value, 'mobileNumber'),
+        email: readString(value, 'email') ?? readString(value, 'emailAddress'),
     };
 }
+function mapAttachments(value) {
+    return (value ?? []);
+}
 function resolveSchemaSteps(preview) {
     return preview?.schema?.stepsSchema ?? preview?.schemaSteps ?? [];
 }
@@ -1082,20 +1079,20 @@ function resolveDisplayValue(value) {
     if (!value || typeof value !== 'object') {
         return typeof value === 'string' ? value : '';
     }
-    return (readString$1(value, 'displayValue') ??
-        readString$1(value, 'display') ??
-        readString$1(value, 'actualValue') ??
+    return (readString(value, 'displayValue') ??
+        readString(value, 'display') ??
+        readString(value, 'actualValue') ??
         '');
 }
 function resolveRawValue(value) {
     if (!value || typeof value !== 'object') {
         return typeof value === 'string' ? value : undefined;
     }
-    return (readString$1(value, 'actualValue') ??
-        readString$1(value, 'displayValue') ??
+    return (readString(value, 'actualValue') ??
+        readString(value, 'displayValue') ??
         undefined);
 }
-function readString$1(value, key) {
+function readString(value, key) {
     if (!value || typeof value !== 'object') {
         return undefined;
     }
@@ -1103,7 +1100,52 @@ function readString$1(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,
+            contextKey: `level:${levelId}/module:${moduleId}`,
+            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\">\r\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'details'\">\r\n    @if (previewConfig(); as config) {\r\n      <mt-client-instance-preview [config]=\"config\" />\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          Module preview 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\r\n          [moduleType]=\"discussionModuleType()\"\r\n          [recordId]=\"resolvedInstanceId()\"\r\n          [mentionSearchEndpoint]=\"'Identity/users'\"\r\n          [mentionSearchParam]=\"'query'\"\r\n          [mentionSearchDataPath]=\"'data'\"\r\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\r\n          [autoMarkRead]=\"true\"\r\n          [refreshIntervalMs]=\"0\"\r\n          [styleClass]=\"'h-full'\"\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          Discussion context is not available for this module 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: 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\">\r\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n\r\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'details'\">\r\n    @if (previewConfig(); as config) {\r\n      <mt-client-instance-preview [config]=\"config\" />\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          Module preview 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\r\n          [moduleType]=\"discussionModuleType()\"\r\n          [recordId]=\"resolvedInstanceId()\"\r\n          [mentionSearchEndpoint]=\"'Identity/users'\"\r\n          [mentionSearchParam]=\"'query'\"\r\n          [mentionSearchDataPath]=\"'data'\"\r\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\r\n          [autoMarkRead]=\"true\"\r\n          [refreshIntervalMs]=\"0\"\r\n          [styleClass]=\"'h-full'\"\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          Discussion context is not available for this module 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 WorkCenterProcessPreview {
     http = inject(HttpClient);
     loadSub;
     requestId = input(null, ...(ngDevMode ? [{ debugName: "requestId" }] : []));
@@ -1120,8 +1162,8 @@ class WorkCenterProcessPreviewJson {
     preview = signal(null, ...(ngDevMode ? [{ debugName: "preview" }] : []));
     canRenderPreview = computed(() => (this.requestId() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "canRenderPreview" }] : []));
     approvalRows = computed(() => (this.preview()?.steps ?? []).map((step) => ({
-        stepName: readDisplay(step.stepName) || String(step.stepId ?? '--'),
-        status: readDisplay(step.status) || '--',
+        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 ?? ''),
@@ -1129,7 +1171,7 @@ class WorkCenterProcessPreviewJson {
     hasApprovals = computed(() => this.approvalRows().length > 0, ...(ngDevMode ? [{ debugName: "hasApprovals" }] : []));
     schemaNodes = computed(() => (this.preview()?.schema?.stepsSchema ?? []).map((step) => ({
         id: String(step.id),
-        name: readDisplay(step.name) || 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) => ({
@@ -1174,12 +1216,12 @@ 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 }, view: { classPropertyName: "view", publicName: "view", 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 {\n  @if (view() === 'schema') {\n    @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          Process steps are not available for this item yet.\n        </p>\n      </div>\n    }\n  } @else if (hasApprovals()) {\n    <mt-table\n      [data]=\"approvalRows()\"\n      [columns]=\"approvalColumns\"\n      [showFilters]=\"false\"\n      [generalSearch]=\"false\"\n      [clickableRows]=\"false\"\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 approvals data is not available for this item yet.\n      </p>\n    </div>\n  }\n}\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"] }] });
+    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", "actionShape", "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", "connectionFormulaSchemaId", "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, Table, StructureBuilder], 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 {\n  @if (view() === 'schema') {\n    @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          Process steps are not available for this item yet.\n        </p>\n      </div>\n    }\n  } @else if (hasApprovals()) {\n    <mt-table\n      [data]=\"approvalRows()\"\n      [columns]=\"approvalColumns\"\n      [showFilters]=\"false\"\n      [generalSearch]=\"false\"\n      [clickableRows]=\"false\"\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 approvals data is not available for this item yet.\n      </p>\n    </div>\n  }\n}\n" }]
+            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 {
@@ -1191,30 +1233,29 @@ function buildEntity(name, viewType, value) {
         },
     };
 }
-function readDisplay(value) {
+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 (readString(value, 'display') ??
-            readString(value, 'en') ??
-            readString(value, 'ar') ??
-            '');
+    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 '';
 }
-function readString(source, key) {
-    const value = source[key];
-    return typeof value === 'string' ? value : undefined;
-}
 
 class WorkCenterProcessRequestType {
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
     activeTab = signal('requestDetails', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
-    currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
     tabOptions = [
         {
             label: 'Request Details',
@@ -1239,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() !== 'approvals'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json\n        [requestId]=\"requestId()\"\n        [view]=\"'approvals'\"\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 preview is not available for this process request yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json\n        [requestId]=\"requestId()\"\n        [view]=\"'schema'\"\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 preview is not available for this process request 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]=\"'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</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", "view"] }] });
+    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\r\n          [moduleType]=\"'ProcessRequest'\"\r\n          [recordId]=\"discussionRecordId()\"\r\n          [mentionSearchEndpoint]=\"'Identity/users'\"\r\n          [mentionSearchParam]=\"'query'\"\r\n          [mentionSearchDataPath]=\"'data'\"\r\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\r\n          [autoMarkRead]=\"true\"\r\n          [refreshIntervalMs]=\"0\"\r\n          [styleClass]=\"'h-full'\"\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          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() !== 'approvals'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json\n        [requestId]=\"requestId()\"\n        [view]=\"'approvals'\"\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 preview is not available for this process request yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json\n        [requestId]=\"requestId()\"\n        [view]=\"'schema'\"\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 preview is not available for this process request 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]=\"'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</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\r\n          [moduleType]=\"'ProcessRequest'\"\r\n          [recordId]=\"discussionRecordId()\"\r\n          [mentionSearchEndpoint]=\"'Identity/users'\"\r\n          [mentionSearchParam]=\"'query'\"\r\n          [mentionSearchDataPath]=\"'data'\"\r\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\r\n          [autoMarkRead]=\"true\"\r\n          [refreshIntervalMs]=\"0\"\r\n          [styleClass]=\"'h-full'\"\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          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 {
@@ -1282,7 +1317,6 @@ 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',
@@ -1304,8 +1338,8 @@ class WorkCenterProcessStepType {
     itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
     requestId = computed(() => readNumber(this.itemContext(), 'requestId') ??
         readNumber(this.itemContext(), 'draftProcessId'), ...(ngDevMode ? [{ debugName: "requestId" }] : []));
-    moduleKey = computed(() => readString$2(this.itemContext(), 'moduleKey') ?? '', ...(ngDevMode ? [{ debugName: "moduleKey" }] : []));
-    operationKey = computed(() => readString$2(this.itemContext(), 'operationKey') ?? '', ...(ngDevMode ? [{ debugName: "operationKey" }] : []));
+    moduleKey = computed(() => readString$1(this.itemContext(), 'moduleKey') ?? '', ...(ngDevMode ? [{ debugName: "moduleKey" }] : []));
+    operationKey = computed(() => readString$1(this.itemContext(), 'operationKey') ?? '', ...(ngDevMode ? [{ debugName: "operationKey" }] : []));
     moduleId = computed(() => readNumber(this.itemContext(), 'moduleId'), ...(ngDevMode ? [{ debugName: "moduleId" }] : []));
     levelId = computed(() => readNumber(this.itemContext(), 'levelId'), ...(ngDevMode ? [{ debugName: "levelId" }] : []));
     levelDataId = computed(() => readNumber(this.itemContext(), 'levelDataId'), ...(ngDevMode ? [{ debugName: "levelDataId" }] : []));
@@ -1322,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() !== 'approvals'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json\n        [requestId]=\"requestId()\"\n        [view]=\"'approvals'\"\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 preview is not available for this process item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json\n        [requestId]=\"requestId()\"\n        [view]=\"'schema'\"\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 preview is not available for this process 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]=\"'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</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", "view"] }] });
+    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\r\n          [moduleType]=\"'ProcessRequest'\"\r\n          [recordId]=\"discussionRecordId()\"\r\n          [mentionSearchEndpoint]=\"'Identity/users'\"\r\n          [mentionSearchParam]=\"'query'\"\r\n          [mentionSearchDataPath]=\"'data'\"\r\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\r\n          [autoMarkRead]=\"true\"\r\n          [refreshIntervalMs]=\"0\"\r\n          [styleClass]=\"'h-full'\"\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          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,
@@ -1341,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() !== 'approvals'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json\n        [requestId]=\"requestId()\"\n        [view]=\"'approvals'\"\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 preview is not available for this process item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json\n        [requestId]=\"requestId()\"\n        [view]=\"'schema'\"\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 preview is not available for this process 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]=\"'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</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\r\n          [moduleType]=\"'ProcessRequest'\"\r\n          [recordId]=\"discussionRecordId()\"\r\n          [mentionSearchEndpoint]=\"'Identity/users'\"\r\n          [mentionSearchParam]=\"'query'\"\r\n          [mentionSearchDataPath]=\"'data'\"\r\n          [uploadEndpoint]=\"'uploader'\"\r\n          [attachmentDownloadEndpoint]=\"'uploader'\"\r\n          [showParticipants]=\"true\"\r\n          [autoMarkRead]=\"true\"\r\n          [refreshIntervalMs]=\"0\"\r\n          [styleClass]=\"'h-full'\"\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          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,
@@ -1357,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 {
@@ -1387,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</div>\n\n<div [class]=\"modal.footerClass\">\n  <mt-button\n    label=\"Cancel\"\n    severity=\"secondary\"\n    variant=\"outlined\"\n    (onClick)=\"onCancel()\"\n  />\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</div>\n\n<div [class]=\"modal.footerClass\">\n  <mt-button\n    label=\"Cancel\"\n    severity=\"secondary\"\n    variant=\"outlined\"\n    (onClick)=\"onCancel()\"\n  />\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 ?? []);
@@ -1653,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)) {
@@ -1887,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()\"\n  [subtitle]=\"drawerSubtitle()\"\n  [appendTo]=\"'system-content'\"\n  styleClass=\"!w-[90%]\"\n  position=\"right\"\n  (visibleChange)=\"onVisibleChange($event)\"\n>\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,
@@ -1897,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()\"\n  [subtitle]=\"drawerSubtitle()\"\n  [appendTo]=\"'system-content'\"\n  styleClass=\"!w-[90%]\"\n  position=\"right\"\n  (visibleChange)=\"onVisibleChange($event)\"\n>\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];