@masterteam/work-center 0.0.55 → 0.0.57

package/fesm2022/masterteam-work-center.mjs

@@ -1,6 +1,7 @@
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, viewChild, input, computed, signal, Component, Injectable, DestroyRef, output, effect, untracked } from '@angular/core';
+import { inject, viewChild, input, computed, signal, Component, Injectable, DestroyRef, effect, untracked, output } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
 import { Button } from '@masterteam/components/button';
@@ -15,17 +16,17 @@ import { catchError, EMPTY, map, take } from 'rxjs';
 import { ModalRef } from '@masterteam/components/dialog';
 import { DrawerController } from '@masterteam/components/dynamic-drawer';
 import { ClientForm } from '@masterteam/forms/client-form';
-import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { HttpClient } from '@angular/common/http';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Drawer } from '@masterteam/components/drawer';
+import { RuntimeActionContextStore, RuntimeActionRunner, resolveActionLabel } from '@masterteam/components/runtime-action';
+import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { handleApiRequest } from '@masterteam/components';
 import { ClientInstancePreview } from '@masterteam/client-components/client-instance-preview';
 import { EntitiesPreview } from '@masterteam/components/entities';
 import { Tabs } from '@masterteam/components/tabs';
 import { DiscussionThread } from '@masterteam/discussion';
 import { StructureBuilder } from '@masterteam/structure-builder';
-import { RuntimeActionContextStore, RuntimeActionRunner, resolveActionLabel } from '@masterteam/components/runtime-action';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Drawer } from '@masterteam/components/drawer';
 
 class WorkCenterClientFormModal {
     modal = inject(ModalService);
@@ -452,6 +453,7 @@ function createDefaultContext(area) {
     return {
         area,
         templateId: null,
+        levelDataId: null,
         selectedCardKey: null,
         page: 1,
         pageSize: WORK_CENTER_LOCAL_FETCH_SIZE,
@@ -499,6 +501,7 @@ const WORK_CENTER_DEFAULT_STATE = {
     byArea: {
         MyInbox: createDefaultAreaState('MyInbox'),
         TasksCenter: createDefaultAreaState('TasksCenter'),
+        Workspace: createDefaultAreaState('Workspace'),
     },
     lookups: [],
     loadingActive: [],
@@ -516,6 +519,7 @@ function normalizeContext(context) {
 function buildContextFromInputs(currentContext, area, inputs = {}) {
     const parsedCardKey = toSelectedCardKey(inputs.card);
     const parsedTemplateId = toOptionalInt(inputs.templateId);
+    const parsedLevelDataId = toOptionalInt(inputs.levelDataId);
     const hasPageInput = hasParamValue(inputs.page);
     const parsedPage = hasPageInput ? toOptionalInt(inputs.page) : null;
     const parsedPageSize = toOptionalInt(inputs.pageSize);
@@ -526,6 +530,7 @@ function buildContextFromInputs(currentContext, area, inputs = {}) {
         page: hasPageInput ? (parsedPage ?? 1) : 1,
         pageSize: parsedPageSize ?? currentContext.pageSize,
         templateId: parsedTemplateId ?? currentContext.templateId,
+        levelDataId: parsedLevelDataId ?? currentContext.levelDataId,
         sort: hasParamValue(inputs.sort)
             ? parseSortInput(inputs.sort)
             : inputs.sort === null
@@ -541,6 +546,7 @@ function buildContextFromInputs(currentContext, area, inputs = {}) {
 function isSameContext(left, right) {
     return (left.area === right.area &&
         left.templateId === right.templateId &&
+        left.levelDataId === right.levelDataId &&
         left.selectedCardKey === right.selectedCardKey &&
         left.page === right.page &&
         left.pageSize === right.pageSize &&
@@ -1030,489 +1036,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 }]
         }] });
 
-const OPERATOR_LABELS = {
-    Eq: 'Equals',
-    Neq: 'Not equal',
-    In: 'In',
-    Contains: 'Contains',
-    StartsWith: 'Starts with',
-    Gt: 'Greater than',
-    Gte: 'Greater than or equal',
-    Lt: 'Less than',
-    Lte: 'Less than or equal',
-    Between: 'Between',
-    IsNull: 'Is empty',
-    IsNotNull: 'Is not empty',
-};
-const OPERATOR_VALUE_MODE = {
-    In: 'multi',
-    Between: 'range',
-    IsNull: 'none',
-    IsNotNull: 'none',
-};
-const GENERAL_TASK_CARD_KEYS = new Set([
-    'mygeneraltasks',
-    'generaltask',
-    'generaltasks',
-]);
-function toLabel(value) {
-    const normalized = value.split('.').pop() ?? value;
-    return normalized
-        .replace(/[_-]/g, ' ')
-        .replace(/([a-z])([A-Z])/g, '$1 $2')
-        .trim()
-        .replace(/\b\w/g, (char) => char.toUpperCase());
-}
-function columnTypeToViewType(type) {
-    if (type === 'date')
-        return 'Date';
-    return undefined;
-}
-function normalizeCardKey(value) {
-    if (typeof value !== 'string') {
-        return '';
-    }
-    return value
-        .trim()
-        .replace(/[\s_-]/g, '')
-        .toLowerCase();
-}
-/**
- * Strips the user envelope used by `mt-table` user filters down to the
- * scalar id that the BE rule payload accepts. Falls back to the original
- * value for non-user shapes (e.g. simple string in a select filter).
- */
-function extractIdScalar(value) {
-    if (value !== null &&
-        typeof value === 'object' &&
-        'id' in value) {
-        return value['id'];
-    }
-    return value;
-}
-function toIsoDate(value) {
-    if (value instanceof Date)
-        return value.toISOString();
-    return value;
-}
-/**
- * Translates one in-table column filter value into a `WorkCenterFilterRule`.
- *
- * The shape of `raw` depends on the column's filter type — see
- * `mt-table` `table-filter-field` outputs:
- * - text     → string                              → `Contains`
- * - select   → scalar | scalar[]                   → `Eq` | `In`
- * - boolean  → boolean                             → `Eq`
- * - date     → `{ from?, to?, value? }` (Date|null)→ `Between`/`Gte`/`Lte`/`Eq`
- * - user     → `{ id, ... }` | `{ id, ... }[]`    → `Eq` (id) | `In` (ids)
- *
- * Returns `null` when the value is empty / nothing to send.
- */
-function toRuntimeFilterRule(field, raw, column) {
-    if (raw === null || raw === undefined || raw === '')
+function readItemContext(details) {
+    const item = details.item;
+    if (!item || typeof item !== 'object') {
         return null;
-    if (typeof raw === 'boolean') {
-        return { field, op: 'Eq', value: raw };
-    }
-    if (typeof raw === 'number') {
-        return { field, op: 'Eq', value: raw };
-    }
-    if (typeof raw === 'string') {
-        if (!raw.trim().length)
-            return null;
-        return { field, op: 'Contains', value: raw };
-    }
-    if (Array.isArray(raw)) {
-        const values = raw
-            .map(extractIdScalar)
-            .filter((v) => v !== null && v !== undefined && v !== '');
-        if (!values.length)
-            return null;
-        return { field, op: 'In', values };
-    }
-    if (typeof raw === 'object') {
-        const obj = raw;
-        // User filter envelope -> single-id Eq.
-        if (obj.id !== undefined && obj.id !== null && obj.id !== '') {
-            return { field, op: 'Eq', value: obj.id };
-        }
-        const hasFrom = obj.from !== undefined && obj.from !== null;
-        const hasTo = obj.to !== undefined && obj.to !== null;
-        if (hasFrom && hasTo) {
-            return {
-                field,
-                op: 'Between',
-                from: toIsoDate(obj.from),
-                to: toIsoDate(obj.to),
-            };
-        }
-        if (hasFrom) {
-            return { field, op: 'Gte', value: toIsoDate(obj.from) };
-        }
-        if (hasTo) {
-            return { field, op: 'Lte', value: toIsoDate(obj.to) };
-        }
-        if (obj.value !== undefined && obj.value !== null && obj.value !== '') {
-            const treatAsContains = column?.type === 'text' ||
-                (column?.filterConfig?.type === 'text' &&
-                    typeof obj.value === 'string');
-            if (treatAsContains) {
-                return { field, op: 'Contains', value: obj.value };
-            }
-            return { field, op: 'Eq', value: extractIdScalar(obj.value) };
-        }
     }
-    return null;
+    const context = item['context'];
+    return context && typeof context === 'object'
+        ? context
+        : null;
 }
-/**
- * Walks `mt-table`'s filter map and produces the `WorkCenterFilterRule[]`
- * sent on the BE column-filter slice. The synthetic `generalSearch` key is
- * skipped because the page keeps general search local-only.
- */
-function buildColumnRuntimeFilters(filters, columns, allowedFields) {
-    if (!filters)
-        return [];
-    const allowed = allowedFields && allowedFields.length ? new Set(allowedFields) : null;
-    const columnByKey = new Map(columns.map((col) => [col.key, col]));
-    const rules = [];
-    for (const [key, raw] of Object.entries(filters)) {
-        if (key === 'generalSearch')
-            continue;
-        if (allowed && !allowed.has(key))
-            continue;
-        const rule = toRuntimeFilterRule(key, raw, columnByKey.get(key));
-        if (rule)
-            rules.push(rule);
+function readNumber(source, key) {
+    const value = source?.[key];
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : undefined;
     }
-    return rules;
-}
-function areFilterRulesEqual(left, right) {
-    return JSON.stringify(left) === JSON.stringify(right);
-}
-function mapAllowedFields(schema) {
-    const properties = schema.properties ?? [];
-    const fromProperties = properties
-        .filter((property) => typeof property?.key === 'string' && property.key.length > 0)
-        .map((property) => ({
-        key: property.key,
-        label: property.name?.display ||
-            property.name?.en ||
-            property.name?.ar ||
-            toLabel(property.key),
-        viewType: property.viewType,
-    }));
-    if (fromProperties.length) {
-        return fromProperties;
+    if (typeof value === 'string' && value.trim().length) {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : undefined;
     }
-    return (schema.allowedFields ?? []).map((field) => ({
-        key: field,
-        label: toLabel(field),
-    }));
+    return undefined;
 }
-function mapAllowedOperators(schema, getLabel) {
-    const options = [];
-    for (const operator of schema.allowedOperators ?? []) {
-        if (typeof operator === 'string') {
-            options.push({
-                key: operator,
-                label: getLabel(operator),
-                valueMode: OPERATOR_VALUE_MODE[operator] ?? 'single',
-            });
-            continue;
-        }
-        const key = operator?.value;
-        if (!key) {
-            continue;
-        }
-        options.push({
-            key,
-            label: operator.display?.display ||
-                operator.display?.en ||
-                operator.display?.ar ||
-                getLabel(key),
-            valueMode: OPERATOR_VALUE_MODE[key] ?? 'single',
-        });
-    }
-    return options;
+function readString$1(source, key) {
+    const value = source?.[key];
+    return typeof value === 'string' && value.trim().length ? value : undefined;
 }
-class WorkCenterPage {
-    facade = inject(WorkCenterFacade);
-    modal = inject(ModalService);
+
+class WorkCenterEscalationInstanceType {
+    http = inject(HttpClient);
     transloco = inject(TranslocoService);
     destroyRef = inject(DestroyRef);
+    loadSub;
+    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    activeTab = signal('escalationDetails', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : /* istanbul ignore next */ []));
-    area = input('MyInbox', ...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
-    pageTitle = input('', ...(ngDevMode ? [{ debugName: "pageTitle" }] : /* istanbul ignore next */ []));
-    menuIcon = input('communication.inbox-01', ...(ngDevMode ? [{ debugName: "menuIcon" }] : /* istanbul ignore next */ []));
-    lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : /* istanbul ignore next */ []));
-    openItemsInModal = input(true, ...(ngDevMode ? [{ debugName: "openItemsInModal" }] : /* istanbul ignore next */ []));
-    itemModal = input(null, ...(ngDevMode ? [{ debugName: "itemModal" }] : /* istanbul ignore next */ []));
-    generalTaskModal = input(null, ...(ngDevMode ? [{ debugName: "generalTaskModal" }] : /* istanbul ignore next */ []));
-    runtimeFiltersChanged = output();
-    itemClicked = output();
-    cardSelected = output();
-    context = this.facade.context;
-    headerFilters = this.facade.headerFilters;
-    tableFilters = signal({}, ...(ngDevMode ? [{ debugName: "tableFilters" }] : /* istanbul ignore next */ []));
-    _menuItems = this.facade.menuItems;
-    menuItems = computed(() => {
-        this.activeLang();
-        return this._menuItems().map((item) => ({
-            ...item,
-            subtitle: `${item.count} ${item.title}`,
-        }));
-    }, ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
-    rows = this.facade.rows;
-    columns = this.facade.columns;
-    kpis = this.facade.kpis;
-    runtimeFilterSchema = this.facade.runtimeFilterSchema;
-    totalCount = this.facade.totalCount;
-    columnFilters = this.facade.columnFilters;
-    loading = this.facade.loading;
-    tableColumns = computed(() => this.columns().map((column) => ({
-        ...column,
-        sortable: true,
-    })), ...(ngDevMode ? [{ debugName: "tableColumns" }] : /* istanbul ignore next */ []));
-    /**
-     * Maps each status/group display label to its total count from the KPI
-     * summary cards so the group header shows the real backend total rather than
-     * the current-page row count.
-     */
-    statusGroupCountMap = computed(() => {
-        const map = new Map();
-        for (const kpi of this.kpis()) {
-            const label = kpi.subTitle;
-            const count = Number(kpi.title);
-            if (label && !isNaN(count)) {
-                map.set(label, count);
-            }
-        }
-        return map;
-    }, ...(ngDevMode ? [{ debugName: "statusGroupCountMap" }] : /* istanbul ignore next */ []));
-    propertyFilterSchema = computed(() => {
-        this.activeLang();
-        const schema = this.runtimeFilterSchema();
-        if (schema) {
-            const allowedFields = mapAllowedFields(schema);
-            const allowedOperators = mapAllowedOperators(schema, (key) => this.getOpLabel(key));
-            if (allowedFields.length && allowedOperators.length) {
-                return { allowedFields, allowedOperators };
-            }
-        }
-        const fallbackFields = this.columns()
-            .filter((column) => typeof column?.key === 'string' && column.key.length > 0)
-            .map((column) => ({
-            key: column.key,
-            label: column.label || toLabel(column.key),
-            viewType: columnTypeToViewType(column.type),
-        }));
-        if (!fallbackFields.length) {
-            return null;
-        }
-        const fallbackOperators = Object.keys(OPERATOR_LABELS).map((key) => ({
-            key,
-            label: this.getOpLabel(key),
-            valueMode: OPERATOR_VALUE_MODE[key] ?? 'single',
-        }));
-        return {
-            allowedFields: fallbackFields,
-            allowedOperators: fallbackOperators,
-        };
-    }, ...(ngDevMode ? [{ debugName: "propertyFilterSchema" }] : /* istanbul ignore next */ []));
-    showGeneralTaskCreateButton = computed(() => GENERAL_TASK_CARD_KEYS.has(normalizeCardKey(this.context().selectedCardKey)), ...(ngDevMode ? [{ debugName: "showGeneralTaskCreateButton" }] : /* istanbul ignore next */ []));
-    generalTaskButtonLabel = computed(() => {
-        this.activeLang();
-        return (this.generalTaskModal()?.buttonLabel?.trim() ||
-            this.transloco.translate('workCenter.page.new'));
-    }, ...(ngDevMode ? [{ debugName: "generalTaskButtonLabel" }] : /* istanbul ignore next */ []));
-    resolvedPageTitle = computed(() => {
-        this.activeLang();
-        return (this.pageTitle() ||
-            this.transloco.translate('workCenter.page.title'));
-    }, ...(ngDevMode ? [{ debugName: "resolvedPageTitle" }] : /* istanbul ignore next */ []));
-    generalTaskButtonIcon = computed(() => this.generalTaskModal()?.buttonIcon?.trim() || 'general.plus', ...(ngDevMode ? [{ debugName: "generalTaskButtonIcon" }] : /* istanbul ignore next */ []));
-    defaultModalStyleClass = '!w-[96vw] md:!w-[84vw] xl:!w-[70vw] !shadow-none';
-    defaultGeneralTaskModalStyleClass = '!w-[70vw] !h-[90vh]';
-    constructor() {
-        this.transloco.langChanges$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((lang) => this.activeLang.set(lang));
-        effect(() => {
-            this.facade.setLookups(this.lookups());
-        });
-    }
-    onMenuItemClick(item) {
-        if (item.key === this.context().selectedCardKey) {
-            return;
-        }
-        this.facade.selectCardAndLoad(this.area(), item.key);
-        this.cardSelected.emit(item.key);
-    }
-    onRuntimeFiltersApplied(filters) {
-        const mappedFilters = filters.map((filter) => ({
-            field: filter.field,
-            op: filter.op,
-            value: filter.value,
-            values: filter.values,
-            from: filter.from,
-            to: filter.to,
-        }));
-        this.facade.applyHeaderFiltersAndLoad(this.area(), mappedFilters);
-        this.runtimeFiltersChanged.emit(mappedFilters);
-    }
-    onRuntimeFiltersCleared() {
-        this.facade.clearAllFiltersAndLoad(this.area());
-        this.tableFilters.set({});
-        this.runtimeFiltersChanged.emit([]);
-    }
-    /**
-     * Single entry point for `mt-table` (`lazy=true`) — handles both column
-     * filters and pagination/sort. Filter changes always reset the page to 1
-     * (handled by `applyColumnFiltersAndLoad`); when only paging/sort changed
-     * we fall through to `applyTableLazyLoadAndLoad`.
-     */
-    onTableLazyLoad(event) {
-        const schema = this.runtimeFilterSchema();
-        const propertyKeys = (schema?.properties ?? [])
-            .map((p) => p?.key)
-            .filter((k) => typeof k === 'string' && k.length > 0);
-        const allowedKeys = schema?.allowedFields ?? [];
-        const allowedFields = propertyKeys.length ? propertyKeys : allowedKeys;
-        const nextColumnFilters = buildColumnRuntimeFilters(event?.filters, this.columns(), allowedFields.length ? allowedFields : undefined);
-        if (!areFilterRulesEqual(nextColumnFilters, this.columnFilters())) {
-            this.facade.applyColumnFiltersAndLoad(this.area(), nextColumnFilters);
-            return;
-        }
-        this.facade.applyTableLazyLoadAndLoad(this.area(), event);
-    }
-    onGeneralTaskCreateClick() {
-        const modalOptions = this.generalTaskModal();
-        const modalData = {
-            moduleKey: 'GeneralTask',
-            ...(modalOptions?.data ?? {}),
-        };
-        const modalHeader = modalOptions?.header ??
-            this.transloco.translate('workCenter.page.createGeneralTask');
-        const modalStyleClass = modalOptions?.styleClass ?? this.defaultGeneralTaskModalStyleClass;
-        const operationKey = modalOptions?.operationKey ?? 'Create';
-        const closeOnPendingApproval = modalOptions?.closeOnPendingApproval ?? true;
-        const lookups = modalOptions?.lookups ?? this.lookups();
-        const ref = this.modal.openModal(WorkCenterClientFormModal, 'dialog', {
-            header: modalHeader,
-            styleClass: modalStyleClass,
-            position: 'end',
-            dismissableMask: true,
-            inputValues: {
-                data: modalData,
-                operationKey,
-                closeOnPendingApproval,
-                lookups,
-            },
-        });
-        ref.onClose.pipe(take(1)).subscribe((result) => {
-            if (result) {
-                this.facade.loadRuntime(this.area(), 'refresh');
-            }
-        });
-    }
-    onRowClick(row) {
-        const contextKey = this.resolveRowContextKey(row);
-        console.log('[work-center-debug] page row click', {
-            contextKey,
-            row,
-            openItemsInModal: this.openItemsInModal(),
-            hasModalComponent: !!this.itemModal()?.component,
-        });
-        if (!contextKey) {
-            return;
-        }
-        this.itemClicked.emit(contextKey);
-        if (!this.openItemsInModal()) {
-            return;
-        }
-        const modalOptions = this.itemModal();
-        if (!modalOptions?.component) {
-            return;
-        }
-        const ref = this.modal.openModal(modalOptions.component, 'drawer', {
-            header: modalOptions?.header ??
-                this.transloco.translate('workCenter.page.itemDetails'),
-            styleClass: modalOptions?.styleClass ?? this.defaultModalStyleClass,
-            position: modalOptions?.position ?? 'end',
-            dismissible: true,
-            modal: true,
-            ...(modalOptions?.appendTo ? { appendTo: modalOptions.appendTo } : {}),
-            inputValues: { contextKey },
-        });
-        ref.onClose.pipe(take(1)).subscribe(() => {
-            this.facade.loadRuntime(this.area(), 'refresh');
-        });
-    }
-    rowsClickable = computed(() => this.openItemsInModal(), ...(ngDevMode ? [{ debugName: "rowsClickable" }] : /* istanbul ignore next */ []));
-    getOpLabel(key) {
-        return (this.transloco.translate('workCenter.operator.' + key) ||
-            OPERATOR_LABELS[key] ||
-            toLabel(key));
-    }
-    resolveRowContextKey(row) {
-        const value = row['contextKey'];
-        if (typeof value !== 'string') {
-            return null;
-        }
-        const normalized = value.trim();
-        return normalized.length ? normalized : null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 }, lookups: { classPropertyName: "lookups", publicName: "lookups", 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 }, generalTaskModal: { classPropertyName: "generalTaskModal", publicName: "generalTaskModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked", cardSelected: "cardSelected" }, ngImport: i0, template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"resolvedPageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  storageKey=\"work-center-client-page\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n      <mt-property-filter-builder\r\n        [schema]=\"propertyFilterSchema()\"\r\n        [filters]=\"headerFilters()\"\r\n        (applied)=\"onRuntimeFiltersApplied($event)\"\r\n        (cleared)=\"onRuntimeFiltersCleared()\"\r\n      />\r\n\r\n      @if (showGeneralTaskCreateButton()) {\r\n        <mt-button\r\n          [label]=\"generalTaskButtonLabel()\"\r\n          [icon]=\"generalTaskButtonIcon()\"\r\n          size=\"small\"\r\n          (onClick)=\"onGeneralTaskCreateClick()\"\r\n        />\r\n      }\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-8\">\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\" class=\"rounded-lg\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div class=\"gap-3 flex flex-wrap\">\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" class=\"min-w-[200px]\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      noCard\r\n      [data]=\"rows()\"\r\n      [columns]=\"tableColumns()\"\r\n      tableLayout=\"auto\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [showFilters]=\"true\"\r\n      filterMode=\"column\"\r\n      [cellClickFilter]=\"true\"\r\n      [generalSearch]=\"true\"\r\n      [exportable]=\"true\"\r\n      [printable]=\"true\"\r\n      [groupable]=\"true\"\r\n      [freezeActions]=\"true\"\r\n      [lazy]=\"true\"\r\n      [lazyLocalSearch]=\"true\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"context().page - 1\"\r\n      [first]=\"(context().page - 1) * context().pageSize\"\r\n      [rowsPerPageOptions]=\"[10, 20, 50, 100]\"\r\n      [groupCountMap]=\"statusGroupCountMap()\"\r\n      storageKey=\"work-center-page-table\"\r\n      [filters]=\"tableFilters()\"\r\n      (filtersChange)=\"tableFilters.set($event)\"\r\n      (lazyLoad)=\"onTableLazyLoad($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: 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"] }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed", "resizable", "storageKey", "storageMode", "minSidebarWidth", "maxSidebarWidth", "defaultSidebarWidth"], outputs: ["collapsedChange", "menuItemClick", "loadChildren"] }, { 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", "cardClass"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { 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.2.8", ngImport: i0, type: WorkCenterPage, decorators: [{
-            type: Component,
-            args: [{ selector: 'mt-work-center-page', standalone: true, imports: [
-                        CommonModule,
-                        Button,
-                        ClientPage,
-                        PropertyFilterBuilder,
-                        StatisticCard,
-                        Table,
-                        SkeletonModule,
-                    ], template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"resolvedPageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  storageKey=\"work-center-client-page\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n      <mt-property-filter-builder\r\n        [schema]=\"propertyFilterSchema()\"\r\n        [filters]=\"headerFilters()\"\r\n        (applied)=\"onRuntimeFiltersApplied($event)\"\r\n        (cleared)=\"onRuntimeFiltersCleared()\"\r\n      />\r\n\r\n      @if (showGeneralTaskCreateButton()) {\r\n        <mt-button\r\n          [label]=\"generalTaskButtonLabel()\"\r\n          [icon]=\"generalTaskButtonIcon()\"\r\n          size=\"small\"\r\n          (onClick)=\"onGeneralTaskCreateClick()\"\r\n        />\r\n      }\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-8\">\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\" class=\"rounded-lg\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div class=\"gap-3 flex flex-wrap\">\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" class=\"min-w-[200px]\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      noCard\r\n      [data]=\"rows()\"\r\n      [columns]=\"tableColumns()\"\r\n      tableLayout=\"auto\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [showFilters]=\"true\"\r\n      filterMode=\"column\"\r\n      [cellClickFilter]=\"true\"\r\n      [generalSearch]=\"true\"\r\n      [exportable]=\"true\"\r\n      [printable]=\"true\"\r\n      [groupable]=\"true\"\r\n      [freezeActions]=\"true\"\r\n      [lazy]=\"true\"\r\n      [lazyLocalSearch]=\"true\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"context().page - 1\"\r\n      [first]=\"(context().page - 1) * context().pageSize\"\r\n      [rowsPerPageOptions]=\"[10, 20, 50, 100]\"\r\n      [groupCountMap]=\"statusGroupCountMap()\"\r\n      storageKey=\"work-center-page-table\"\r\n      [filters]=\"tableFilters()\"\r\n      (filtersChange)=\"tableFilters.set($event)\"\r\n      (lazyLoad)=\"onTableLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], openItemsInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "openItemsInModal", required: false }] }], itemModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemModal", required: false }] }], generalTaskModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "generalTaskModal", required: false }] }], runtimeFiltersChanged: [{ type: i0.Output, args: ["runtimeFiltersChanged"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], cardSelected: [{ type: i0.Output, args: ["cardSelected"] }] } });
-
-function readItemContext(details) {
-    const item = details.item;
-    if (!item || typeof item !== 'object') {
-        return null;
-    }
-    const context = item['context'];
-    return context && typeof context === 'object'
-        ? context
-        : null;
-}
-function readNumber(source, key) {
-    const value = source?.[key];
-    if (typeof value === 'number') {
-        return Number.isFinite(value) ? value : undefined;
-    }
-    if (typeof value === 'string' && value.trim().length) {
-        const parsed = Number(value);
-        return Number.isFinite(parsed) ? parsed : undefined;
-    }
-    return undefined;
-}
-function readString$1(source, key) {
-    const value = source?.[key];
-    return typeof value === 'string' && value.trim().length ? value : undefined;
-}
-
-class WorkCenterEscalationInstanceType {
-    http = inject(HttpClient);
-    transloco = inject(TranslocoService);
-    destroyRef = inject(DestroyRef);
-    loadSub;
-    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []));
-    activeTab = signal('escalationDetails', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
-    activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : /* istanbul ignore next */ []));
-    tabOptions = computed(() => {
+    tabOptions = computed(() => {
         this.activeLang();
         return [
             {
@@ -1534,11 +1093,15 @@ class WorkCenterEscalationInstanceType {
                 value: 'schema',
                 icon: 'custom.flow-chart',
             },
-            {
-                label: this.transloco.translate('workCenter.tabs.discussion'),
-                value: 'discussion',
-                icon: 'custom.discussion-area',
-            },
+            ...(!this.readOnly()
+                ? [
+                    {
+                        label: this.transloco.translate('workCenter.tabs.discussion'),
+                        value: 'discussion',
+                        icon: 'custom.discussion-area',
+                    },
+                ]
+                : []),
         ];
     }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : /* istanbul ignore next */ []));
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
@@ -1721,7 +1284,7 @@ class WorkCenterEscalationInstanceType {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterEscalationInstanceType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'escalationDetails'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderDetails()) {\r\n            @if (loading()) {\r\n              <div\r\n                class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                  {{ t(\"loading.escalationDetails\") }}\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-lg 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-lg 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                {{ t(\"context.escalationDetailsUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'moduleDetails'\"\r\n      >\r\n        @if (moduleDetailsConfig(); as moduleDetailsConfig) {\r\n          <div\r\n            class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n          >\r\n            <mt-client-instance-preview [config]=\"moduleDetailsConfig\" />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\r\n        @if (canRenderDetails()) {\r\n          @if (loading()) {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"loading.escalationSchema\") }}\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-lg 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            <!--\r\n              Only mount the flow once the schema tab is actually active. The\r\n              structure-builder fits the diagram to the host size on load\r\n              (fLoaded -> fitToScreen) and never re-fits, so mounting it inside\r\n              the [hidden] (display:none, zero-size) container produces a blank\r\n              canvas that doesn't recover when the tab is shown.\r\n            -->\r\n            @if (activeTab() === \"schema\") {\r\n              <!--\r\n                Use a concrete height (not lg:h-full). The diagram has no\r\n                intrinsic height, and the tab's ancestor chain is block (not\r\n                flex) on lg, so `h-full` collapses to 0 and the canvas renders\r\n                blank. Mirrors the process preview's `h-[70vh]`.\r\n              -->\r\n              <div class=\"h-[70vh] min-h-[22rem] overflow-hidden rounded-lg\">\r\n                <mt-structure-builder\r\n                  class=\"h-full\"\r\n                  [layoutDirection]=\"'LR'\"\r\n                  [readonly]=\"true\"\r\n                  [structureMode]=\"'workflow'\"\r\n                  [nodeFields]=\"previewNodeFields\"\r\n                  [nodes]=\"schemaNodes()\"\r\n                  [connections]=\"schemaConnections()\"\r\n                />\r\n              </div>\r\n            }\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.escalationSchemaUnavailable\") }}\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-lg 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              {{ t(\"context.escalationSchemaContextUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\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-lg 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              {{ t(\"context.escalationDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], 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", "attachmentShape", "stackOnNarrow", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { kind: "component", type: ClientInstancePreview, selector: "mt-client-instance-preview", inputs: ["config", "hideEmptyState", "stackOnNarrow"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "availableNodesLabel", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "connectionGuard", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "structureMode", "nodeStyle", "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.2.8", type: WorkCenterEscalationInstanceType, isStandalone: true, selector: "mt-work-center-escalation-instance-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\n  *transloco=\"let t; prefix: 'workCenter'\"\n>\n  <div\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\n  >\n    @if (tabOptions().length > 1) {\n      <mt-tabs\n        [(active)]=\"activeTab\"\n        [options]=\"tabOptions()\"\n        mode=\"vertical\"\n        size=\"small\"\n      />\n    }\n\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'escalationDetails'\"\n      >\n        <div\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n        >\n          @if (canRenderDetails()) {\n            @if (loading()) {\n              <div\n                class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                  {{ t(\"loading.escalationDetails\") }}\n                </p>\n              </div>\n            } @else if (error(); as error) {\n              <div\n                class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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-lg 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                {{ t(\"context.escalationDetailsUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'moduleDetails'\"\n      >\n        @if (moduleDetailsConfig(); as moduleDetailsConfig) {\n          <div\n            class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n          >\n            <mt-client-instance-preview [config]=\"moduleDetailsConfig\" />\n          </div>\n        }\n      </div>\n\n      <div\n        class=\"flex-1 min-h-0 overflow-auto\"\n        [hidden]=\"activeTab() !== 'schema'\"\n      >\n        @if (canRenderDetails()) {\n          @if (loading()) {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"loading.escalationSchema\") }}\n              </p>\n            </div>\n          } @else if (error(); as error) {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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            <!--\n              Only mount the flow once the schema tab is actually active. The\n              structure-builder fits the diagram to the host size on load\n              (fLoaded -> fitToScreen) and never re-fits, so mounting it inside\n              the [hidden] (display:none, zero-size) container produces a blank\n              canvas that doesn't recover when the tab is shown.\n            -->\n            @if (activeTab() === \"schema\") {\n              <!--\n                Use a concrete height (not lg:h-full). The diagram has no\n                intrinsic height, and the tab's ancestor chain is block (not\n                flex) on lg, so `h-full` collapses to 0 and the canvas renders\n                blank. Mirrors the process preview's `h-[70vh]`.\n              -->\n              <div class=\"h-[70vh] min-h-[22rem] overflow-hidden rounded-lg\">\n                <mt-structure-builder\n                  class=\"h-full\"\n                  [layoutDirection]=\"'LR'\"\n                  [readonly]=\"true\"\n                  [structureMode]=\"'workflow'\"\n                  [nodeFields]=\"previewNodeFields\"\n                  [nodes]=\"schemaNodes()\"\n                  [connections]=\"schemaConnections()\"\n                />\n              </div>\n            }\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.escalationSchemaUnavailable\") }}\n              </p>\n            </div>\n          }\n        } @else {\n          <div\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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              {{ t(\"context.escalationSchemaContextUnavailable\") }}\n            </p>\n          </div>\n        }\n      </div>\n\n      @if (!readOnly()) {\n        <div\n          class=\"h-full min-h-0 overflow-hidden\"\n          [hidden]=\"activeTab() !== 'discussion'\"\n        >\n          @if (canRenderDiscussion()) {\n            <div\n              class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\n            >\n              <mt-discussion-thread\n                [moduleType]=\"'EscalationInstance'\"\n                [recordId]=\"resolvedInstanceId()\"\n                [mentionSearchEndpoint]=\"'Identity/users'\"\n                [mentionSearchParam]=\"'query'\"\n                [mentionSearchDataPath]=\"'data'\"\n                [uploadEndpoint]=\"'uploader'\"\n                [attachmentDownloadEndpoint]=\"'uploader'\"\n                [showParticipants]=\"true\"\n                [autoMarkRead]=\"true\"\n                [refreshIntervalMs]=\"0\"\n                [styleClass]=\"'h-full'\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.escalationDiscussionUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], 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", "attachmentShape", "stackOnNarrow", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { kind: "component", type: ClientInstancePreview, selector: "mt-client-instance-preview", inputs: ["config", "hideEmptyState", "stackOnNarrow"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "availableNodesLabel", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "structureMode", "nodeStyle", "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.2.8", ngImport: i0, type: WorkCenterEscalationInstanceType, decorators: [{
             type: Component,
@@ -1733,8 +1296,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         EntitiesPreview,
                         ClientInstancePreview,
                         StructureBuilder,
-                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'escalationDetails'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderDetails()) {\r\n            @if (loading()) {\r\n              <div\r\n                class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                  {{ t(\"loading.escalationDetails\") }}\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-lg 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-lg 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                {{ t(\"context.escalationDetailsUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'moduleDetails'\"\r\n      >\r\n        @if (moduleDetailsConfig(); as moduleDetailsConfig) {\r\n          <div\r\n            class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n          >\r\n            <mt-client-instance-preview [config]=\"moduleDetailsConfig\" />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\r\n        @if (canRenderDetails()) {\r\n          @if (loading()) {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"loading.escalationSchema\") }}\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-lg 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            <!--\r\n              Only mount the flow once the schema tab is actually active. The\r\n              structure-builder fits the diagram to the host size on load\r\n              (fLoaded -> fitToScreen) and never re-fits, so mounting it inside\r\n              the [hidden] (display:none, zero-size) container produces a blank\r\n              canvas that doesn't recover when the tab is shown.\r\n            -->\r\n            @if (activeTab() === \"schema\") {\r\n              <!--\r\n                Use a concrete height (not lg:h-full). The diagram has no\r\n                intrinsic height, and the tab's ancestor chain is block (not\r\n                flex) on lg, so `h-full` collapses to 0 and the canvas renders\r\n                blank. Mirrors the process preview's `h-[70vh]`.\r\n              -->\r\n              <div class=\"h-[70vh] min-h-[22rem] overflow-hidden rounded-lg\">\r\n                <mt-structure-builder\r\n                  class=\"h-full\"\r\n                  [layoutDirection]=\"'LR'\"\r\n                  [readonly]=\"true\"\r\n                  [structureMode]=\"'workflow'\"\r\n                  [nodeFields]=\"previewNodeFields\"\r\n                  [nodes]=\"schemaNodes()\"\r\n                  [connections]=\"schemaConnections()\"\r\n                />\r\n              </div>\r\n            }\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.escalationSchemaUnavailable\") }}\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-lg 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              {{ t(\"context.escalationSchemaContextUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\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-lg 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              {{ t(\"context.escalationDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
+                    ], template: "<div\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\n  *transloco=\"let t; prefix: 'workCenter'\"\n>\n  <div\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\n  >\n    @if (tabOptions().length > 1) {\n      <mt-tabs\n        [(active)]=\"activeTab\"\n        [options]=\"tabOptions()\"\n        mode=\"vertical\"\n        size=\"small\"\n      />\n    }\n\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'escalationDetails'\"\n      >\n        <div\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n        >\n          @if (canRenderDetails()) {\n            @if (loading()) {\n              <div\n                class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                  {{ t(\"loading.escalationDetails\") }}\n                </p>\n              </div>\n            } @else if (error(); as error) {\n              <div\n                class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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-lg 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                {{ t(\"context.escalationDetailsUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'moduleDetails'\"\n      >\n        @if (moduleDetailsConfig(); as moduleDetailsConfig) {\n          <div\n            class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n          >\n            <mt-client-instance-preview [config]=\"moduleDetailsConfig\" />\n          </div>\n        }\n      </div>\n\n      <div\n        class=\"flex-1 min-h-0 overflow-auto\"\n        [hidden]=\"activeTab() !== 'schema'\"\n      >\n        @if (canRenderDetails()) {\n          @if (loading()) {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"loading.escalationSchema\") }}\n              </p>\n            </div>\n          } @else if (error(); as error) {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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            <!--\n              Only mount the flow once the schema tab is actually active. The\n              structure-builder fits the diagram to the host size on load\n              (fLoaded -> fitToScreen) and never re-fits, so mounting it inside\n              the [hidden] (display:none, zero-size) container produces a blank\n              canvas that doesn't recover when the tab is shown.\n            -->\n            @if (activeTab() === \"schema\") {\n              <!--\n                Use a concrete height (not lg:h-full). The diagram has no\n                intrinsic height, and the tab's ancestor chain is block (not\n                flex) on lg, so `h-full` collapses to 0 and the canvas renders\n                blank. Mirrors the process preview's `h-[70vh]`.\n              -->\n              <div class=\"h-[70vh] min-h-[22rem] overflow-hidden rounded-lg\">\n                <mt-structure-builder\n                  class=\"h-full\"\n                  [layoutDirection]=\"'LR'\"\n                  [readonly]=\"true\"\n                  [structureMode]=\"'workflow'\"\n                  [nodeFields]=\"previewNodeFields\"\n                  [nodes]=\"schemaNodes()\"\n                  [connections]=\"schemaConnections()\"\n                />\n              </div>\n            }\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.escalationSchemaUnavailable\") }}\n              </p>\n            </div>\n          }\n        } @else {\n          <div\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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              {{ t(\"context.escalationSchemaContextUnavailable\") }}\n            </p>\n          </div>\n        }\n      </div>\n\n      @if (!readOnly()) {\n        <div\n          class=\"h-full min-h-0 overflow-hidden\"\n          [hidden]=\"activeTab() !== 'discussion'\"\n        >\n          @if (canRenderDiscussion()) {\n            <div\n              class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\n            >\n              <mt-discussion-thread\n                [moduleType]=\"'EscalationInstance'\"\n                [recordId]=\"resolvedInstanceId()\"\n                [mentionSearchEndpoint]=\"'Identity/users'\"\n                [mentionSearchParam]=\"'query'\"\n                [mentionSearchDataPath]=\"'data'\"\n                [uploadEndpoint]=\"'uploader'\"\n                [attachmentDownloadEndpoint]=\"'uploader'\"\n                [showParticipants]=\"true\"\n                [autoMarkRead]=\"true\"\n                [refreshIntervalMs]=\"0\"\n                [styleClass]=\"'h-full'\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.escalationDiscussionUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
 // The endpoint returns the escalation payload directly, but tolerate the
 // shared `{ data: ... }` envelope used by the other escalation endpoints.
 function extractPreviewData(response) {
@@ -1825,6 +1388,7 @@ class WorkCenterModuleType {
     destroyRef = inject(DestroyRef);
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []));
     lookups = input(null, ...(ngDevMode ? [{ debugName: "lookups" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
     clientForm = viewChild(ClientForm, ...(ngDevMode ? [{ debugName: "clientForm" }] : /* istanbul ignore next */ []));
     formLookups = computed(() => this.lookups() ?? this.facade.lookups(), ...(ngDevMode ? [{ debugName: "formLookups" }] : /* istanbul ignore next */ []));
     activeTab = signal('details', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
@@ -1837,12 +1401,16 @@ class WorkCenterModuleType {
                 value: 'details',
                 icon: 'file.folder',
             },
-            {
-                label: this.transloco.translate('workCenter.tabs.discussion'),
-                value: 'discussion',
-                icon: 'custom.discussion-area',
-            },
-        ];
+            ...(!this.readOnly()
+                ? [
+                    {
+                        label: this.transloco.translate('workCenter.tabs.discussion'),
+                        value: 'discussion',
+                        icon: 'custom.discussion-area',
+                    },
+                ]
+                : []),
+        ];
     }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : /* istanbul ignore next */ []));
     itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : /* istanbul ignore next */ []));
     instanceId = computed(() => readNumber(this.itemContext(), 'instanceId'), ...(ngDevMode ? [{ debugName: "instanceId" }] : /* istanbul ignore next */ []));
@@ -1871,14 +1439,14 @@ class WorkCenterModuleType {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((lang) => this.activeLang.set(lang));
         effect(() => {
-            this.actionContext?.setFormSource(this.clientForm() ?? null);
+            this.actionContext?.setFormSource(this.readOnly() ? null : (this.clientForm() ?? null));
         });
     }
     ngOnDestroy() {
         this.actionContext?.setFormSource(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterModuleType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterModuleType, isStandalone: true, selector: "mt-work-center-module-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'details'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderForm()) {\r\n            <mt-client-form\r\n              [moduleKey]=\"moduleKey()\"\r\n              [operationKey]=\"operationKey()\"\r\n              [moduleId]=\"formModuleId()\"\r\n              [levelId]=\"formLevelId()\"\r\n              [levelDataId]=\"formLevelDataId()\"\r\n              [moduleDataId]=\"moduleDataId()\"\r\n              [readonly]=\"true\"\r\n              [lookups]=\"formLookups()\"\r\n            />\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.moduleFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\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-lg 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              {{ t(\"context.moduleDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "templateId", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "disabledFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterModuleType, isStandalone: true, selector: "mt-work-center-module-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\n  *transloco=\"let t; prefix: 'workCenter'\"\n>\n  <div\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\n  >\n    @if (tabOptions().length > 1) {\n      <mt-tabs\n        [(active)]=\"activeTab\"\n        [options]=\"tabOptions()\"\n        mode=\"vertical\"\n        size=\"small\"\n      />\n    }\n\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'details'\"\n      >\n        <div\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n        >\n          @if (canRenderForm()) {\n            <mt-client-form\n              [moduleKey]=\"moduleKey()\"\n              [operationKey]=\"operationKey()\"\n              [moduleId]=\"formModuleId()\"\n              [levelId]=\"formLevelId()\"\n              [levelDataId]=\"formLevelDataId()\"\n              [moduleDataId]=\"moduleDataId()\"\n              [readonly]=\"true\"\n              [lookups]=\"formLookups()\"\n            />\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.moduleFormUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n\n      @if (!readOnly()) {\n        <div\n          class=\"h-full min-h-0 overflow-hidden\"\n          [hidden]=\"activeTab() !== 'discussion'\"\n        >\n          @if (canRenderDiscussion()) {\n            <div\n              class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\n            >\n              <mt-discussion-thread\n                [moduleType]=\"discussionModuleType()\"\n                [recordId]=\"resolvedInstanceId()\"\n                [mentionSearchEndpoint]=\"'Identity/users'\"\n                [mentionSearchParam]=\"'query'\"\n                [mentionSearchDataPath]=\"'data'\"\n                [uploadEndpoint]=\"'uploader'\"\n                [attachmentDownloadEndpoint]=\"'uploader'\"\n                [showParticipants]=\"true\"\n                [autoMarkRead]=\"true\"\n                [refreshIntervalMs]=\"0\"\n                [styleClass]=\"'h-full'\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.moduleDiscussionUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "templateId", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "disabledFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }, { 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.2.8", ngImport: i0, type: WorkCenterModuleType, decorators: [{
             type: Component,
@@ -1888,8 +1456,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Tabs,
                         ClientForm,
                         DiscussionThread,
-                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'details'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderForm()) {\r\n            <mt-client-form\r\n              [moduleKey]=\"moduleKey()\"\r\n              [operationKey]=\"operationKey()\"\r\n              [moduleId]=\"formModuleId()\"\r\n              [levelId]=\"formLevelId()\"\r\n              [levelDataId]=\"formLevelDataId()\"\r\n              [moduleDataId]=\"moduleDataId()\"\r\n              [readonly]=\"true\"\r\n              [lookups]=\"formLookups()\"\r\n            />\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.moduleFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\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-lg 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              {{ t(\"context.moduleDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
+                    ], template: "<div\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\n  *transloco=\"let t; prefix: 'workCenter'\"\n>\n  <div\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\n  >\n    @if (tabOptions().length > 1) {\n      <mt-tabs\n        [(active)]=\"activeTab\"\n        [options]=\"tabOptions()\"\n        mode=\"vertical\"\n        size=\"small\"\n      />\n    }\n\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'details'\"\n      >\n        <div\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n        >\n          @if (canRenderForm()) {\n            <mt-client-form\n              [moduleKey]=\"moduleKey()\"\n              [operationKey]=\"operationKey()\"\n              [moduleId]=\"formModuleId()\"\n              [levelId]=\"formLevelId()\"\n              [levelDataId]=\"formLevelDataId()\"\n              [moduleDataId]=\"moduleDataId()\"\n              [readonly]=\"true\"\n              [lookups]=\"formLookups()\"\n            />\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.moduleFormUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n\n      @if (!readOnly()) {\n        <div\n          class=\"h-full min-h-0 overflow-hidden\"\n          [hidden]=\"activeTab() !== 'discussion'\"\n        >\n          @if (canRenderDiscussion()) {\n            <div\n              class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\n            >\n              <mt-discussion-thread\n                [moduleType]=\"discussionModuleType()\"\n                [recordId]=\"resolvedInstanceId()\"\n                [mentionSearchEndpoint]=\"'Identity/users'\"\n                [mentionSearchParam]=\"'query'\"\n                [mentionSearchDataPath]=\"'data'\"\n                [uploadEndpoint]=\"'uploader'\"\n                [attachmentDownloadEndpoint]=\"'uploader'\"\n                [showParticipants]=\"true\"\n                [autoMarkRead]=\"true\"\n                [refreshIntervalMs]=\"0\"\n                [styleClass]=\"'h-full'\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.moduleDiscussionUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
 
 class WorkCenterProcessPreview {
     http = inject(HttpClient);
@@ -2110,7 +1678,7 @@ class WorkCenterProcessPreview {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterProcessPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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-lg 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-lg 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-lg 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=\"wc-process-preview-schema h-[70vh] overflow-hidden\">\r\n        <mt-structure-builder\r\n          class=\"h-full\"\r\n          [layoutDirection]=\"'LR'\"\r\n          [readonly]=\"true\"\r\n          [structureMode]=\"'workflow'\"\r\n          [nodeFields]=\"previewNodeFields\"\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-lg 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    <div class=\"max-h-[70vh] overflow-y-auto\">\r\n      <mt-table\r\n        noCard\r\n        [data]=\"approvalRows()\"\r\n        [columns]=\"approvalColumns()\"\r\n        storageKey=\"work-center-process-preview-table\"\r\n        [showFilters]=\"false\"\r\n        [generalSearch]=\"false\"\r\n        [clickableRows]=\"false\"\r\n      />\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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", styles: [":host ::ng-deep .wc-process-preview-schema .wf-detail-row{align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "availableNodesLabel", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "connectionGuard", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "structureMode", "nodeStyle", "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.2.8", 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-lg 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-lg 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-lg 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=\"wc-process-preview-schema h-[70vh] overflow-hidden\">\r\n        <mt-structure-builder\r\n          class=\"h-full\"\r\n          [layoutDirection]=\"'LR'\"\r\n          [readonly]=\"true\"\r\n          [structureMode]=\"'workflow'\"\r\n          [nodeFields]=\"previewNodeFields\"\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-lg 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    <div class=\"max-h-[70vh] overflow-y-auto\">\r\n      <mt-table\r\n        noCard\r\n        [data]=\"approvalRows()\"\r\n        [columns]=\"approvalColumns()\"\r\n        storageKey=\"work-center-process-preview-table\"\r\n        [showFilters]=\"false\"\r\n        [generalSearch]=\"false\"\r\n        [clickableRows]=\"false\"\r\n      />\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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", styles: [":host ::ng-deep .wc-process-preview-schema .wf-detail-row{align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "availableNodesLabel", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "structureMode", "nodeStyle", "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.2.8", ngImport: i0, type: WorkCenterProcessPreview, decorators: [{
             type: Component,
@@ -2136,6 +1704,7 @@ class WorkCenterProcessRequestType {
     destroyRef = inject(DestroyRef);
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []));
     lookups = input(null, ...(ngDevMode ? [{ debugName: "lookups" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
     clientForm = viewChild(ClientForm, ...(ngDevMode ? [{ debugName: "clientForm" }] : /* istanbul ignore next */ []));
     formLookups = computed(() => this.lookups() ?? this.facade.lookups(), ...(ngDevMode ? [{ debugName: "formLookups" }] : /* istanbul ignore next */ []));
     activeTab = signal('requestDetails', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
@@ -2158,11 +1727,15 @@ class WorkCenterProcessRequestType {
                 value: 'schema',
                 icon: 'custom.flow-chart',
             },
-            {
-                label: this.transloco.translate('workCenter.tabs.discussion'),
-                value: 'discussion',
-                icon: 'custom.discussion-area',
-            },
+            ...(!this.readOnly()
+                ? [
+                    {
+                        label: this.transloco.translate('workCenter.tabs.discussion'),
+                        value: 'discussion',
+                        icon: 'custom.discussion-area',
+                    },
+                ]
+                : []),
         ];
     }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : /* istanbul ignore next */ []));
     itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : /* istanbul ignore next */ []));
@@ -2179,6 +1752,9 @@ class WorkCenterProcessRequestType {
         readNumber(this.itemContext(), 'requestId'), ...(ngDevMode ? [{ debugName: "draftProcessId" }] : /* istanbul ignore next */ []));
     discussionRecordId = computed(() => this.requestId() ?? 0, ...(ngDevMode ? [{ debugName: "discussionRecordId" }] : /* istanbul ignore next */ []));
     isReadonly = computed(() => {
+        if (this.readOnly()) {
+            return true;
+        }
         const item = this.details().item;
         const status = item?.['status'];
         return status?.key !== 'Returned';
@@ -2191,14 +1767,14 @@ class WorkCenterProcessRequestType {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((lang) => this.activeLang.set(lang));
         effect(() => {
-            this.actionContext?.setFormSource(this.clientForm() ?? null);
+            this.actionContext?.setFormSource(this.readOnly() ? null : (this.clientForm() ?? null));
         });
     }
     ngOnDestroy() {
         this.actionContext?.setFormSource(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterProcessRequestType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterProcessRequestType, isStandalone: true, selector: "mt-work-center-process-request-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'requestDetails'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\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              [readonly]=\"isReadonly()\"\r\n              [lookups]=\"formLookups()\"\r\n            />\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.requestFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'approvals'\"\r\n      >\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-lg 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              {{ t(\"context.requestPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\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-lg 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              {{ t(\"context.requestPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\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-lg 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              {{ t(\"context.requestDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "templateId", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "disabledFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterProcessRequestType, isStandalone: true, selector: "mt-work-center-process-request-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\n  *transloco=\"let t; prefix: 'workCenter'\"\n>\n  <div\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\n  >\n    @if (tabOptions().length > 1) {\n      <mt-tabs\n        [(active)]=\"activeTab\"\n        [options]=\"tabOptions()\"\n        mode=\"vertical\"\n        size=\"small\"\n      />\n    }\n\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'requestDetails'\"\n      >\n        <div\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n        >\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              [readonly]=\"isReadonly()\"\n              [lookups]=\"formLookups()\"\n            />\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.requestFormUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div\n        class=\"flex-1 min-h-0 overflow-auto\"\n        [hidden]=\"activeTab() !== 'approvals'\"\n      >\n        @if (canRenderPreview()) {\n          <mt-work-center-process-preview\n            [requestId]=\"requestId()\"\n            [view]=\"'approvals'\"\n          />\n        } @else {\n          <div\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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              {{ t(\"context.requestPreviewUnavailable\") }}\n            </p>\n          </div>\n        }\n      </div>\n\n      <div\n        class=\"flex-1 min-h-0 overflow-auto\"\n        [hidden]=\"activeTab() !== 'schema'\"\n      >\n        @if (canRenderPreview()) {\n          <mt-work-center-process-preview\n            [requestId]=\"requestId()\"\n            [view]=\"'schema'\"\n          />\n        } @else {\n          <div\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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              {{ t(\"context.requestPreviewUnavailable\") }}\n            </p>\n          </div>\n        }\n      </div>\n\n      @if (!readOnly()) {\n        <div\n          class=\"h-full min-h-0 overflow-hidden\"\n          [hidden]=\"activeTab() !== 'discussion'\"\n        >\n          @if (canRenderDiscussion()) {\n            <div\n              class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\n            >\n              <mt-discussion-thread\n                [moduleType]=\"'ProcessRequest'\"\n                [recordId]=\"discussionRecordId()\"\n                [mentionSearchEndpoint]=\"'Identity/users'\"\n                [mentionSearchParam]=\"'query'\"\n                [mentionSearchDataPath]=\"'data'\"\n                [uploadEndpoint]=\"'uploader'\"\n                [attachmentDownloadEndpoint]=\"'uploader'\"\n                [showParticipants]=\"true\"\n                [autoMarkRead]=\"true\"\n                [refreshIntervalMs]=\"0\"\n                [styleClass]=\"'h-full'\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.requestDiscussionUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "templateId", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "disabledFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }, { 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.2.8", ngImport: i0, type: WorkCenterProcessRequestType, decorators: [{
             type: Component,
@@ -2209,8 +1785,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ClientForm,
                         DiscussionThread,
                         WorkCenterProcessPreview,
-                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'requestDetails'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\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              [readonly]=\"isReadonly()\"\r\n              [lookups]=\"formLookups()\"\r\n            />\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.requestFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'approvals'\"\r\n      >\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-lg 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              {{ t(\"context.requestPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\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-lg 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              {{ t(\"context.requestPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\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-lg 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              {{ t(\"context.requestDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
+                    ], template: "<div\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\n  *transloco=\"let t; prefix: 'workCenter'\"\n>\n  <div\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\n  >\n    @if (tabOptions().length > 1) {\n      <mt-tabs\n        [(active)]=\"activeTab\"\n        [options]=\"tabOptions()\"\n        mode=\"vertical\"\n        size=\"small\"\n      />\n    }\n\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'requestDetails'\"\n      >\n        <div\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n        >\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              [readonly]=\"isReadonly()\"\n              [lookups]=\"formLookups()\"\n            />\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.requestFormUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div\n        class=\"flex-1 min-h-0 overflow-auto\"\n        [hidden]=\"activeTab() !== 'approvals'\"\n      >\n        @if (canRenderPreview()) {\n          <mt-work-center-process-preview\n            [requestId]=\"requestId()\"\n            [view]=\"'approvals'\"\n          />\n        } @else {\n          <div\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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              {{ t(\"context.requestPreviewUnavailable\") }}\n            </p>\n          </div>\n        }\n      </div>\n\n      <div\n        class=\"flex-1 min-h-0 overflow-auto\"\n        [hidden]=\"activeTab() !== 'schema'\"\n      >\n        @if (canRenderPreview()) {\n          <mt-work-center-process-preview\n            [requestId]=\"requestId()\"\n            [view]=\"'schema'\"\n          />\n        } @else {\n          <div\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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              {{ t(\"context.requestPreviewUnavailable\") }}\n            </p>\n          </div>\n        }\n      </div>\n\n      @if (!readOnly()) {\n        <div\n          class=\"h-full min-h-0 overflow-hidden\"\n          [hidden]=\"activeTab() !== 'discussion'\"\n        >\n          @if (canRenderDiscussion()) {\n            <div\n              class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\n            >\n              <mt-discussion-thread\n                [moduleType]=\"'ProcessRequest'\"\n                [recordId]=\"discussionRecordId()\"\n                [mentionSearchEndpoint]=\"'Identity/users'\"\n                [mentionSearchParam]=\"'query'\"\n                [mentionSearchDataPath]=\"'data'\"\n                [uploadEndpoint]=\"'uploader'\"\n                [attachmentDownloadEndpoint]=\"'uploader'\"\n                [showParticipants]=\"true\"\n                [autoMarkRead]=\"true\"\n                [refreshIntervalMs]=\"0\"\n                [styleClass]=\"'h-full'\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.requestDiscussionUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
 
 class WorkCenterProcessStepType {
     facade = inject(WorkCenterFacade);
@@ -2221,6 +1797,7 @@ class WorkCenterProcessStepType {
     destroyRef = inject(DestroyRef);
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []));
     lookups = input(null, ...(ngDevMode ? [{ debugName: "lookups" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
     clientForm = viewChild(ClientForm, ...(ngDevMode ? [{ debugName: "clientForm" }] : /* istanbul ignore next */ []));
     formLookups = computed(() => this.lookups() ?? this.facade.lookups(), ...(ngDevMode ? [{ debugName: "formLookups" }] : /* istanbul ignore next */ []));
     activeTab = signal('form', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
@@ -2252,11 +1829,15 @@ class WorkCenterProcessStepType {
                 value: 'schema',
                 icon: 'custom.flow-chart',
             },
-            {
-                label: this.transloco.translate('workCenter.tabs.discussion'),
-                value: 'discussion',
-                icon: 'custom.discussion-area',
-            },
+            ...(!this.readOnly()
+                ? [
+                    {
+                        label: this.transloco.translate('workCenter.tabs.discussion'),
+                        value: 'discussion',
+                        icon: 'custom.discussion-area',
+                    },
+                ]
+                : []),
         ];
     }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : /* istanbul ignore next */ []));
     itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : /* istanbul ignore next */ []));
@@ -2295,14 +1876,14 @@ class WorkCenterProcessStepType {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((lang) => this.activeLang.set(lang));
         effect(() => {
-            this.actionContext?.setFormSource(this.clientForm() ?? null);
+            this.actionContext?.setFormSource(this.readOnly() ? null : (this.clientForm() ?? null));
         });
     }
     ngOnDestroy() {
         this.actionContext?.setFormSource(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterProcessStepType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterProcessStepType, isStandalone: true, selector: "mt-work-center-process-step-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'form'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\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              [lookups]=\"formLookups()\"\r\n            />\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.processFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'levelDetails'\"\r\n      >\r\n        @if (levelDetailsConfig(); as levelDetailsConfig) {\r\n          <div\r\n            class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n          >\r\n            <mt-client-instance-preview [config]=\"levelDetailsConfig\" />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'approvals'\"\r\n      >\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-lg 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              {{ t(\"context.processPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\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-lg 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              {{ t(\"context.processPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\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-lg 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              {{ t(\"context.processDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "templateId", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "disabledFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }, { kind: "component", type: ClientInstancePreview, selector: "mt-client-instance-preview", inputs: ["config", "hideEmptyState", "stackOnNarrow"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterProcessStepType, isStandalone: true, selector: "mt-work-center-process-step-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\n  *transloco=\"let t; prefix: 'workCenter'\"\n>\n  <div\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\n  >\n    @if (tabOptions().length > 1) {\n      <mt-tabs\n        [(active)]=\"activeTab\"\n        [options]=\"tabOptions()\"\n        mode=\"vertical\"\n        size=\"small\"\n      />\n    }\n\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'form'\"\n      >\n        <div\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n        >\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              [readonly]=\"readOnly()\"\n              [lookups]=\"formLookups()\"\n            />\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.processFormUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'levelDetails'\"\n      >\n        @if (levelDetailsConfig(); as levelDetailsConfig) {\n          <div\n            class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n          >\n            <mt-client-instance-preview [config]=\"levelDetailsConfig\" />\n          </div>\n        }\n      </div>\n\n      <div\n        class=\"flex-1 min-h-0 overflow-auto\"\n        [hidden]=\"activeTab() !== 'approvals'\"\n      >\n        @if (canRenderPreview()) {\n          <mt-work-center-process-preview\n            [requestId]=\"requestId()\"\n            [view]=\"'approvals'\"\n          />\n        } @else {\n          <div\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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              {{ t(\"context.processPreviewUnavailable\") }}\n            </p>\n          </div>\n        }\n      </div>\n\n      <div\n        class=\"flex-1 min-h-0 overflow-auto\"\n        [hidden]=\"activeTab() !== 'schema'\"\n      >\n        @if (canRenderPreview()) {\n          <mt-work-center-process-preview\n            [requestId]=\"requestId()\"\n            [view]=\"'schema'\"\n          />\n        } @else {\n          <div\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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              {{ t(\"context.processPreviewUnavailable\") }}\n            </p>\n          </div>\n        }\n      </div>\n\n      @if (!readOnly()) {\n        <div\n          class=\"h-full min-h-0 overflow-hidden\"\n          [hidden]=\"activeTab() !== 'discussion'\"\n        >\n          @if (canRenderDiscussion()) {\n            <div\n              class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\n            >\n              <mt-discussion-thread\n                [moduleType]=\"'ProcessRequest'\"\n                [recordId]=\"discussionRecordId()\"\n                [mentionSearchEndpoint]=\"'Identity/users'\"\n                [mentionSearchParam]=\"'query'\"\n                [mentionSearchDataPath]=\"'data'\"\n                [uploadEndpoint]=\"'uploader'\"\n                [attachmentDownloadEndpoint]=\"'uploader'\"\n                [showParticipants]=\"true\"\n                [autoMarkRead]=\"true\"\n                [refreshIntervalMs]=\"0\"\n                [styleClass]=\"'h-full'\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.processDiscussionUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "templateId", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "disabledFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }, { kind: "component", type: ClientInstancePreview, selector: "mt-client-instance-preview", inputs: ["config", "hideEmptyState", "stackOnNarrow"] }, { 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.2.8", ngImport: i0, type: WorkCenterProcessStepType, decorators: [{
             type: Component,
@@ -2314,14 +1895,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ClientInstancePreview,
                         DiscussionThread,
                         WorkCenterProcessPreview,
-                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'form'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\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              [lookups]=\"formLookups()\"\r\n            />\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.processFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'levelDetails'\"\r\n      >\r\n        @if (levelDetailsConfig(); as levelDetailsConfig) {\r\n          <div\r\n            class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n          >\r\n            <mt-client-instance-preview [config]=\"levelDetailsConfig\" />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'approvals'\"\r\n      >\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-lg 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              {{ t(\"context.processPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\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-lg 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              {{ t(\"context.processPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\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-lg 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              {{ t(\"context.processDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
+                    ], template: "<div\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\n  *transloco=\"let t; prefix: 'workCenter'\"\n>\n  <div\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\n  >\n    @if (tabOptions().length > 1) {\n      <mt-tabs\n        [(active)]=\"activeTab\"\n        [options]=\"tabOptions()\"\n        mode=\"vertical\"\n        size=\"small\"\n      />\n    }\n\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'form'\"\n      >\n        <div\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n        >\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              [readonly]=\"readOnly()\"\n              [lookups]=\"formLookups()\"\n            />\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.processFormUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div\n        class=\"h-full min-h-0 lg:overflow-hidden\"\n        [hidden]=\"activeTab() !== 'levelDetails'\"\n      >\n        @if (levelDetailsConfig(); as levelDetailsConfig) {\n          <div\n            class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\n          >\n            <mt-client-instance-preview [config]=\"levelDetailsConfig\" />\n          </div>\n        }\n      </div>\n\n      <div\n        class=\"flex-1 min-h-0 overflow-auto\"\n        [hidden]=\"activeTab() !== 'approvals'\"\n      >\n        @if (canRenderPreview()) {\n          <mt-work-center-process-preview\n            [requestId]=\"requestId()\"\n            [view]=\"'approvals'\"\n          />\n        } @else {\n          <div\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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              {{ t(\"context.processPreviewUnavailable\") }}\n            </p>\n          </div>\n        }\n      </div>\n\n      <div\n        class=\"flex-1 min-h-0 overflow-auto\"\n        [hidden]=\"activeTab() !== 'schema'\"\n      >\n        @if (canRenderPreview()) {\n          <mt-work-center-process-preview\n            [requestId]=\"requestId()\"\n            [view]=\"'schema'\"\n          />\n        } @else {\n          <div\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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              {{ t(\"context.processPreviewUnavailable\") }}\n            </p>\n          </div>\n        }\n      </div>\n\n      @if (!readOnly()) {\n        <div\n          class=\"h-full min-h-0 overflow-hidden\"\n          [hidden]=\"activeTab() !== 'discussion'\"\n        >\n          @if (canRenderDiscussion()) {\n            <div\n              class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\n            >\n              <mt-discussion-thread\n                [moduleType]=\"'ProcessRequest'\"\n                [recordId]=\"discussionRecordId()\"\n                [mentionSearchEndpoint]=\"'Identity/users'\"\n                [mentionSearchParam]=\"'query'\"\n                [mentionSearchDataPath]=\"'data'\"\n                [uploadEndpoint]=\"'uploader'\"\n                [attachmentDownloadEndpoint]=\"'uploader'\"\n                [showParticipants]=\"true\"\n                [autoMarkRead]=\"true\"\n                [refreshIntervalMs]=\"0\"\n                [styleClass]=\"'h-full'\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg 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                {{ t(\"context.processDiscussionUnavailable\") }}\n              </p>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
 
 class WorkCenterItemModal {
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []));
     lookups = input(null, ...(ngDevMode ? [{ debugName: "lookups" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterItemModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterItemModal, isStandalone: true, selector: "mt-work-center-item-modal", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  @if (details().type === \"ProcessStep\") {\r\n    <mt-work-center-process-step-type\r\n      [details]=\"details()\"\r\n      [lookups]=\"lookups()\"\r\n    />\r\n  } @else if (details().type === \"ProcessRequest\") {\r\n    <mt-work-center-process-request-type\r\n      [details]=\"details()\"\r\n      [lookups]=\"lookups()\"\r\n    />\r\n  } @else if (details().type === \"EscalationInstance\") {\r\n    <mt-work-center-escalation-instance-type [details]=\"details()\" />\r\n  } @else if (details().type === \"Module\" || details().type === \"GeneralTask\") {\r\n    <mt-work-center-module-type [details]=\"details()\" [lookups]=\"lookups()\" />\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\">{{ t(\"modal.unsupportedType\") }}</p>\r\n    </div>\r\n  }\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: WorkCenterProcessStepType, selector: "mt-work-center-process-step-type", inputs: ["details", "lookups"] }, { kind: "component", type: WorkCenterProcessRequestType, selector: "mt-work-center-process-request-type", inputs: ["details", "lookups"] }, { 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", "lookups"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterItemModal, isStandalone: true, selector: "mt-work-center-item-modal", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\n  @if (details().type === \"ProcessStep\") {\n    <mt-work-center-process-step-type\n      [details]=\"details()\"\n      [lookups]=\"lookups()\"\n      [readOnly]=\"readOnly()\"\n    />\n  } @else if (details().type === \"ProcessRequest\") {\n    <mt-work-center-process-request-type\n      [details]=\"details()\"\n      [lookups]=\"lookups()\"\n      [readOnly]=\"readOnly()\"\n    />\n  } @else if (details().type === \"EscalationInstance\") {\n    <mt-work-center-escalation-instance-type\n      [details]=\"details()\"\n      [readOnly]=\"readOnly()\"\n    />\n  } @else if (details().type === \"Module\" || details().type === \"GeneralTask\") {\n    <mt-work-center-module-type\n      [details]=\"details()\"\n      [lookups]=\"lookups()\"\n      [readOnly]=\"readOnly()\"\n    />\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\">{{ t(\"modal.unsupportedType\") }}</p>\n    </div>\n  }\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: WorkCenterProcessStepType, selector: "mt-work-center-process-step-type", inputs: ["details", "lookups", "readOnly"] }, { kind: "component", type: WorkCenterProcessRequestType, selector: "mt-work-center-process-request-type", inputs: ["details", "lookups", "readOnly"] }, { kind: "component", type: WorkCenterEscalationInstanceType, selector: "mt-work-center-escalation-instance-type", inputs: ["details", "readOnly"] }, { kind: "component", type: WorkCenterModuleType, selector: "mt-work-center-module-type", inputs: ["details", "lookups", "readOnly"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterItemModal, decorators: [{
             type: Component,
@@ -2334,8 +1916,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         WorkCenterModuleType,
                     ], host: {
                         class: 'block h-full min-h-0',
-                    }, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  @if (details().type === \"ProcessStep\") {\r\n    <mt-work-center-process-step-type\r\n      [details]=\"details()\"\r\n      [lookups]=\"lookups()\"\r\n    />\r\n  } @else if (details().type === \"ProcessRequest\") {\r\n    <mt-work-center-process-request-type\r\n      [details]=\"details()\"\r\n      [lookups]=\"lookups()\"\r\n    />\r\n  } @else if (details().type === \"EscalationInstance\") {\r\n    <mt-work-center-escalation-instance-type [details]=\"details()\" />\r\n  } @else if (details().type === \"Module\" || details().type === \"GeneralTask\") {\r\n    <mt-work-center-module-type [details]=\"details()\" [lookups]=\"lookups()\" />\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\">{{ t(\"modal.unsupportedType\") }}</p>\r\n    </div>\r\n  }\r\n</ng-container>\r\n" }]
-        }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }] } });
+                    }, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\n  @if (details().type === \"ProcessStep\") {\n    <mt-work-center-process-step-type\n      [details]=\"details()\"\n      [lookups]=\"lookups()\"\n      [readOnly]=\"readOnly()\"\n    />\n  } @else if (details().type === \"ProcessRequest\") {\n    <mt-work-center-process-request-type\n      [details]=\"details()\"\n      [lookups]=\"lookups()\"\n      [readOnly]=\"readOnly()\"\n    />\n  } @else if (details().type === \"EscalationInstance\") {\n    <mt-work-center-escalation-instance-type\n      [details]=\"details()\"\n      [readOnly]=\"readOnly()\"\n    />\n  } @else if (details().type === \"Module\" || details().type === \"GeneralTask\") {\n    <mt-work-center-module-type\n      [details]=\"details()\"\n      [lookups]=\"lookups()\"\n      [readOnly]=\"readOnly()\"\n    />\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\">{{ t(\"modal.unsupportedType\") }}</p>\n    </div>\n  }\n</ng-container>\n" }]
+        }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
 
 const DEFAULT_GENERAL_TASK_MODAL_STYLE_CLASS = '!w-[70vw] !h-[90vh]';
 class WorkCenterItemModalFooterActions {
@@ -2693,7 +2275,13 @@ class WorkCenterItemModalRoute {
     modal = inject(ModalService);
     lookups = this.facade.lookups;
     contextKey = input(null, ...(ngDevMode ? [{ debugName: "contextKey" }] : /* istanbul ignore next */ []));
+    manageRouteOutlet = input(true, ...(ngDevMode ? [{ debugName: "manageRouteOutlet" }] : /* istanbul ignore next */ []));
+    showPreviewLevelAction = input(true, ...(ngDevMode ? [{ debugName: "showPreviewLevelAction" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    appendTo = input('self', ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    drawerStyleClass = input('mt-work-center-item-drawer !absolute !w-[96vw] md:!w-[84vw] xl:!w-[70vw]', ...(ngDevMode ? [{ debugName: "drawerStyleClass" }] : /* istanbul ignore next */ []));
     previewLevel = output();
+    closed = output();
     drawerVisible = signal(true, ...(ngDevMode ? [{ debugName: "drawerVisible" }] : /* istanbul ignore next */ []));
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
@@ -2705,6 +2293,7 @@ class WorkCenterItemModalRoute {
         this.transloco.translate('workCenter.page.itemDetails'), ...(ngDevMode ? [{ debugName: "drawerTitle" }] : /* istanbul ignore next */ []));
     drawerSubtitle = computed(() => this.readDisplayField(this.details()?.item, 'subtitle') ?? '', ...(ngDevMode ? [{ debugName: "drawerSubtitle" }] : /* istanbul ignore next */ []));
     previewLevelTarget = computed(() => this.resolvePreviewLevelTarget(this.details()), ...(ngDevMode ? [{ debugName: "previewLevelTarget" }] : /* istanbul ignore next */ []));
+    displayedPreviewLevelTarget = computed(() => this.showPreviewLevelAction() ? this.previewLevelTarget() : null, ...(ngDevMode ? [{ debugName: "displayedPreviewLevelTarget" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             this.footerActionsMounted.set(!!this.resolvedContextKey());
@@ -2766,7 +2355,7 @@ class WorkCenterItemModalRoute {
         // menu/KPI counters are stale regardless of whether the dialog closes.
         this.facade.loadRuntime(this.facade.activeArea(), 'refresh');
         if (result.afterSuccess === 'close') {
-            void this.closeRouteOutlet();
+            void this.close();
             return;
         }
         this.detailsReloadTick.update((value) => value + 1);
@@ -2783,7 +2372,14 @@ class WorkCenterItemModalRoute {
         if (visible) {
             return;
         }
-        await this.closeRouteOutlet();
+        await this.close();
+    }
+    close() {
+        if (!this.manageRouteOutlet()) {
+            this.closed.emit();
+            return Promise.resolve(true);
+        }
+        return this.closeRouteOutlet();
     }
     closeRouteOutlet() {
         console.log('[work-center-debug] modal route closing', {
@@ -2845,7 +2441,7 @@ class WorkCenterItemModalRoute {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterItemModalRoute, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterItemModalRoute, isStandalone: true, selector: "mt-work-center-item-modal-route", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previewLevel: "previewLevel" }, providers: [RuntimeActionContextStore], ngImport: i0, template: "<mt-drawer\r\n  [visible]=\"drawerVisible()\"\r\n  [loadingHeader]=\"loading()\"\r\n  [title]=\"drawerTitle()\"\r\n  styleClass=\"mt-work-center-item-drawer !absolute !w-[96vw] md:!w-[84vw] xl:!w-[70vw]\"\r\n  position=\"right\"\r\n  [modal]=\"true\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\r\n          <div class=\"flex items-center gap-3\">\r\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\r\n            <div class=\"flex flex-1 flex-col gap-2\">\r\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\r\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid gap-3 md:grid-cols-2\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"5rem\" class=\"rounded-lg\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" class=\"rounded-lg\" />\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      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\r\n        <mt-work-center-item-modal [details]=\"details\" [lookups]=\"lookups()\" />\r\n      </div>\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\">\r\n            {{ t(\"modal.noItemSelected\") }}\r\n          </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        [previewLevelTarget]=\"previewLevelTarget()\"\r\n        (actionExecuted)=\"onActionExecuted($event)\"\r\n        (previewLevelSelected)=\"onPreviewLevelSelected($event)\"\r\n        (visibilityChange)=\"onFooterVisibilityChange($event)\"\r\n      />\r\n    </div>\r\n  }\r\n</mt-drawer>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Drawer, selector: "mt-drawer", inputs: ["visible", "position", "fullScreen", "closeOnEscape", "blockScroll", "dismissible", "title", "subtitle", "loadingHeader", "styleClass", "transitionOptions", "appendTo", "modal", "showMaximizeToggle", "maximizeTooltip", "restoreTooltip", "maximized"], outputs: ["visibleChange", "onShow", "onHide", "maximizedChange"] }, { 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", "lookups"] }, { kind: "component", type: WorkCenterItemModalFooterActions, selector: "mt-work-center-item-modal-footer-actions", inputs: ["contextKey", "previewLevelTarget"], outputs: ["actionExecuted", "previewLevelSelected", "visibilityChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterItemModalRoute, isStandalone: true, selector: "mt-work-center-item-modal-route", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null }, manageRouteOutlet: { classPropertyName: "manageRouteOutlet", publicName: "manageRouteOutlet", isSignal: true, isRequired: false, transformFunction: null }, showPreviewLevelAction: { classPropertyName: "showPreviewLevelAction", publicName: "showPreviewLevelAction", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, drawerStyleClass: { classPropertyName: "drawerStyleClass", publicName: "drawerStyleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previewLevel: "previewLevel", closed: "closed" }, providers: [RuntimeActionContextStore], ngImport: i0, template: "<mt-drawer\n  [visible]=\"drawerVisible()\"\n  [loadingHeader]=\"loading()\"\n  [title]=\"drawerTitle()\"\n  [styleClass]=\"drawerStyleClass()\"\n  [appendTo]=\"appendTo()\"\n  position=\"right\"\n  [modal]=\"true\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  *transloco=\"let t; prefix: 'workCenter'\"\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\" class=\"rounded-lg\" />\n            }\n          </div>\n\n          <p-skeleton height=\"16rem\" class=\"rounded-lg\" />\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      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\n        <mt-work-center-item-modal\n          [details]=\"details\"\n          [lookups]=\"lookups()\"\n          [readOnly]=\"readOnly()\"\n        />\n      </div>\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\">\n            {{ t(\"modal.noItemSelected\") }}\n          </p>\n        </div>\n      </div>\n    }\n  </ng-container>\n\n  @if (!readOnly() && footerActionsMounted()) {\n    <div footer [class]=\"modal.footerClass\">\n      <mt-work-center-item-modal-footer-actions\n        [contextKey]=\"resolvedContextKey()\"\n        [previewLevelTarget]=\"displayedPreviewLevelTarget()\"\n        (actionExecuted)=\"onActionExecuted($event)\"\n        (previewLevelSelected)=\"onPreviewLevelSelected($event)\"\n        (visibilityChange)=\"onFooterVisibilityChange($event)\"\n      />\n    </div>\n  }\n</mt-drawer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Drawer, selector: "mt-drawer", inputs: ["visible", "position", "fullScreen", "closeOnEscape", "blockScroll", "dismissible", "title", "subtitle", "loadingHeader", "styleClass", "transitionOptions", "appendTo", "modal", "showMaximizeToggle", "maximizeTooltip", "restoreTooltip", "maximized"], outputs: ["visibleChange", "onShow", "onHide", "maximizedChange"] }, { 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", "lookups", "readOnly"] }, { kind: "component", type: WorkCenterItemModalFooterActions, selector: "mt-work-center-item-modal-footer-actions", inputs: ["contextKey", "previewLevelTarget"], outputs: ["actionExecuted", "previewLevelSelected", "visibilityChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterItemModalRoute, decorators: [{
             type: Component,
@@ -2856,8 +2452,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         SkeletonModule,
                         WorkCenterItemModal,
                         WorkCenterItemModalFooterActions,
-                    ], providers: [RuntimeActionContextStore], template: "<mt-drawer\r\n  [visible]=\"drawerVisible()\"\r\n  [loadingHeader]=\"loading()\"\r\n  [title]=\"drawerTitle()\"\r\n  styleClass=\"mt-work-center-item-drawer !absolute !w-[96vw] md:!w-[84vw] xl:!w-[70vw]\"\r\n  position=\"right\"\r\n  [modal]=\"true\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\r\n          <div class=\"flex items-center gap-3\">\r\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\r\n            <div class=\"flex flex-1 flex-col gap-2\">\r\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\r\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid gap-3 md:grid-cols-2\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"5rem\" class=\"rounded-lg\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" class=\"rounded-lg\" />\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      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\r\n        <mt-work-center-item-modal [details]=\"details\" [lookups]=\"lookups()\" />\r\n      </div>\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\">\r\n            {{ t(\"modal.noItemSelected\") }}\r\n          </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        [previewLevelTarget]=\"previewLevelTarget()\"\r\n        (actionExecuted)=\"onActionExecuted($event)\"\r\n        (previewLevelSelected)=\"onPreviewLevelSelected($event)\"\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 }] }], previewLevel: [{ type: i0.Output, args: ["previewLevel"] }] } });
+                    ], providers: [RuntimeActionContextStore], template: "<mt-drawer\n  [visible]=\"drawerVisible()\"\n  [loadingHeader]=\"loading()\"\n  [title]=\"drawerTitle()\"\n  [styleClass]=\"drawerStyleClass()\"\n  [appendTo]=\"appendTo()\"\n  position=\"right\"\n  [modal]=\"true\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  *transloco=\"let t; prefix: 'workCenter'\"\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\" class=\"rounded-lg\" />\n            }\n          </div>\n\n          <p-skeleton height=\"16rem\" class=\"rounded-lg\" />\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      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\n        <mt-work-center-item-modal\n          [details]=\"details\"\n          [lookups]=\"lookups()\"\n          [readOnly]=\"readOnly()\"\n        />\n      </div>\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\">\n            {{ t(\"modal.noItemSelected\") }}\n          </p>\n        </div>\n      </div>\n    }\n  </ng-container>\n\n  @if (!readOnly() && footerActionsMounted()) {\n    <div footer [class]=\"modal.footerClass\">\n      <mt-work-center-item-modal-footer-actions\n        [contextKey]=\"resolvedContextKey()\"\n        [previewLevelTarget]=\"displayedPreviewLevelTarget()\"\n        (actionExecuted)=\"onActionExecuted($event)\"\n        (previewLevelSelected)=\"onPreviewLevelSelected($event)\"\n        (visibilityChange)=\"onFooterVisibilityChange($event)\"\n      />\n    </div>\n  }\n</mt-drawer>\n" }]
+        }], ctorParameters: () => [], propDecorators: { contextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextKey", required: false }] }], manageRouteOutlet: [{ type: i0.Input, args: [{ isSignal: true, alias: "manageRouteOutlet", required: false }] }], showPreviewLevelAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreviewLevelAction", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], drawerStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerStyleClass", required: false }] }], previewLevel: [{ type: i0.Output, args: ["previewLevel"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 // Accepts either a plain string (e.g. `moduleKey`) or a localized
 // `{ display, en, ar }` translatable, returning the display string.
 function normalizeDisplayName(value) {
@@ -2885,6 +2481,470 @@ function normalizeRouteId(value) {
     return null;
 }
 
+const OPERATOR_LABELS = {
+    Eq: 'Equals',
+    Neq: 'Not equal',
+    In: 'In',
+    Contains: 'Contains',
+    StartsWith: 'Starts with',
+    Gt: 'Greater than',
+    Gte: 'Greater than or equal',
+    Lt: 'Less than',
+    Lte: 'Less than or equal',
+    Between: 'Between',
+    IsNull: 'Is empty',
+    IsNotNull: 'Is not empty',
+};
+const OPERATOR_VALUE_MODE = {
+    In: 'multi',
+    Between: 'range',
+    IsNull: 'none',
+    IsNotNull: 'none',
+};
+const GENERAL_TASK_CARD_KEYS = new Set([
+    'mygeneraltasks',
+    'generaltask',
+    'generaltasks',
+]);
+function toLabel(value) {
+    const normalized = value.split('.').pop() ?? value;
+    return normalized
+        .replace(/[_-]/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .trim()
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+function columnTypeToViewType(type) {
+    if (type === 'date')
+        return 'Date';
+    return undefined;
+}
+function normalizeCardKey(value) {
+    if (typeof value !== 'string') {
+        return '';
+    }
+    return value
+        .trim()
+        .replace(/[\s_-]/g, '')
+        .toLowerCase();
+}
+/**
+ * Strips the user envelope used by `mt-table` user filters down to the
+ * scalar id that the BE rule payload accepts. Falls back to the original
+ * value for non-user shapes (e.g. simple string in a select filter).
+ */
+function extractIdScalar(value) {
+    if (value !== null &&
+        typeof value === 'object' &&
+        'id' in value) {
+        return value['id'];
+    }
+    return value;
+}
+function toIsoDate(value) {
+    if (value instanceof Date)
+        return value.toISOString();
+    return value;
+}
+/**
+ * Translates one in-table column filter value into a `WorkCenterFilterRule`.
+ *
+ * The shape of `raw` depends on the column's filter type — see
+ * `mt-table` `table-filter-field` outputs:
+ * - text     → string                              → `Contains`
+ * - select   → scalar | scalar[]                   → `Eq` | `In`
+ * - boolean  → boolean                             → `Eq`
+ * - date     → `{ from?, to?, value? }` (Date|null)→ `Between`/`Gte`/`Lte`/`Eq`
+ * - user     → `{ id, ... }` | `{ id, ... }[]`    → `Eq` (id) | `In` (ids)
+ *
+ * Returns `null` when the value is empty / nothing to send.
+ */
+function toRuntimeFilterRule(field, raw, column) {
+    if (raw === null || raw === undefined || raw === '')
+        return null;
+    if (typeof raw === 'boolean') {
+        return { field, op: 'Eq', value: raw };
+    }
+    if (typeof raw === 'number') {
+        return { field, op: 'Eq', value: raw };
+    }
+    if (typeof raw === 'string') {
+        if (!raw.trim().length)
+            return null;
+        return { field, op: 'Contains', value: raw };
+    }
+    if (Array.isArray(raw)) {
+        const values = raw
+            .map(extractIdScalar)
+            .filter((v) => v !== null && v !== undefined && v !== '');
+        if (!values.length)
+            return null;
+        return { field, op: 'In', values };
+    }
+    if (typeof raw === 'object') {
+        const obj = raw;
+        // User filter envelope -> single-id Eq.
+        if (obj.id !== undefined && obj.id !== null && obj.id !== '') {
+            return { field, op: 'Eq', value: obj.id };
+        }
+        const hasFrom = obj.from !== undefined && obj.from !== null;
+        const hasTo = obj.to !== undefined && obj.to !== null;
+        if (hasFrom && hasTo) {
+            return {
+                field,
+                op: 'Between',
+                from: toIsoDate(obj.from),
+                to: toIsoDate(obj.to),
+            };
+        }
+        if (hasFrom) {
+            return { field, op: 'Gte', value: toIsoDate(obj.from) };
+        }
+        if (hasTo) {
+            return { field, op: 'Lte', value: toIsoDate(obj.to) };
+        }
+        if (obj.value !== undefined && obj.value !== null && obj.value !== '') {
+            const treatAsContains = column?.type === 'text' ||
+                (column?.filterConfig?.type === 'text' &&
+                    typeof obj.value === 'string');
+            if (treatAsContains) {
+                return { field, op: 'Contains', value: obj.value };
+            }
+            return { field, op: 'Eq', value: extractIdScalar(obj.value) };
+        }
+    }
+    return null;
+}
+/**
+ * Walks `mt-table`'s filter map and produces the `WorkCenterFilterRule[]`
+ * sent on the BE column-filter slice. The synthetic `generalSearch` key is
+ * skipped because the page keeps general search local-only.
+ */
+function buildColumnRuntimeFilters(filters, columns, allowedFields) {
+    if (!filters)
+        return [];
+    const allowed = allowedFields && allowedFields.length ? new Set(allowedFields) : null;
+    const columnByKey = new Map(columns.map((col) => [col.key, col]));
+    const rules = [];
+    for (const [key, raw] of Object.entries(filters)) {
+        if (key === 'generalSearch')
+            continue;
+        if (allowed && !allowed.has(key))
+            continue;
+        const rule = toRuntimeFilterRule(key, raw, columnByKey.get(key));
+        if (rule)
+            rules.push(rule);
+    }
+    return rules;
+}
+function areFilterRulesEqual(left, right) {
+    return JSON.stringify(left) === JSON.stringify(right);
+}
+function mapAllowedFields(schema) {
+    const properties = schema.properties ?? [];
+    const fromProperties = properties
+        .filter((property) => typeof property?.key === 'string' && property.key.length > 0)
+        .map((property) => ({
+        key: property.key,
+        label: property.name?.display ||
+            property.name?.en ||
+            property.name?.ar ||
+            toLabel(property.key),
+        viewType: property.viewType,
+    }));
+    if (fromProperties.length) {
+        return fromProperties;
+    }
+    return (schema.allowedFields ?? []).map((field) => ({
+        key: field,
+        label: toLabel(field),
+    }));
+}
+function mapAllowedOperators(schema, getLabel) {
+    const options = [];
+    for (const operator of schema.allowedOperators ?? []) {
+        if (typeof operator === 'string') {
+            options.push({
+                key: operator,
+                label: getLabel(operator),
+                valueMode: OPERATOR_VALUE_MODE[operator] ?? 'single',
+            });
+            continue;
+        }
+        const key = operator?.value;
+        if (!key) {
+            continue;
+        }
+        options.push({
+            key,
+            label: operator.display?.display ||
+                operator.display?.en ||
+                operator.display?.ar ||
+                getLabel(key),
+            valueMode: OPERATOR_VALUE_MODE[key] ?? 'single',
+        });
+    }
+    return options;
+}
+class WorkCenterPage {
+    facade = inject(WorkCenterFacade);
+    modal = inject(ModalService);
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
+    activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : /* istanbul ignore next */ []));
+    area = input('MyInbox', ...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
+    pageTitle = input('', ...(ngDevMode ? [{ debugName: "pageTitle" }] : /* istanbul ignore next */ []));
+    menuIcon = input('communication.inbox-01', ...(ngDevMode ? [{ debugName: "menuIcon" }] : /* istanbul ignore next */ []));
+    lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : /* istanbul ignore next */ []));
+    showSidebar = input(true, ...(ngDevMode ? [{ debugName: "showSidebar" }] : /* istanbul ignore next */ []));
+    bootstrapInputs = input(null, ...(ngDevMode ? [{ debugName: "bootstrapInputs" }] : /* istanbul ignore next */ []));
+    openItemDrawer = input(false, ...(ngDevMode ? [{ debugName: "openItemDrawer" }] : /* istanbul ignore next */ []));
+    itemReadOnly = input(false, ...(ngDevMode ? [{ debugName: "itemReadOnly" }] : /* istanbul ignore next */ []));
+    openItemsInModal = input(true, ...(ngDevMode ? [{ debugName: "openItemsInModal" }] : /* istanbul ignore next */ []));
+    itemModal = input(null, ...(ngDevMode ? [{ debugName: "itemModal" }] : /* istanbul ignore next */ []));
+    generalTaskModal = input(null, ...(ngDevMode ? [{ debugName: "generalTaskModal" }] : /* istanbul ignore next */ []));
+    runtimeFiltersChanged = output();
+    itemClicked = output();
+    cardSelected = output();
+    context = this.facade.context;
+    headerFilters = this.facade.headerFilters;
+    tableFilters = signal({}, ...(ngDevMode ? [{ debugName: "tableFilters" }] : /* istanbul ignore next */ []));
+    selectedItemContextKey = signal(null, ...(ngDevMode ? [{ debugName: "selectedItemContextKey" }] : /* istanbul ignore next */ []));
+    _menuItems = this.facade.menuItems;
+    menuItems = computed(() => {
+        this.activeLang();
+        return this._menuItems().map((item) => ({
+            ...item,
+            subtitle: `${item.count} ${item.title}`,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+    rows = this.facade.rows;
+    columns = this.facade.columns;
+    kpis = this.facade.kpis;
+    runtimeFilterSchema = this.facade.runtimeFilterSchema;
+    totalCount = this.facade.totalCount;
+    columnFilters = this.facade.columnFilters;
+    loading = this.facade.loading;
+    tableColumns = computed(() => this.columns().map((column) => ({
+        ...column,
+        sortable: true,
+    })), ...(ngDevMode ? [{ debugName: "tableColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * Maps each status/group display label to its total count from the KPI
+     * summary cards so the group header shows the real backend total rather than
+     * the current-page row count.
+     */
+    statusGroupCountMap = computed(() => {
+        const map = new Map();
+        for (const kpi of this.kpis()) {
+            const label = kpi.subTitle;
+            const count = Number(kpi.title);
+            if (label && !isNaN(count)) {
+                map.set(label, count);
+            }
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "statusGroupCountMap" }] : /* istanbul ignore next */ []));
+    propertyFilterSchema = computed(() => {
+        this.activeLang();
+        const schema = this.runtimeFilterSchema();
+        if (schema) {
+            const allowedFields = mapAllowedFields(schema);
+            const allowedOperators = mapAllowedOperators(schema, (key) => this.getOpLabel(key));
+            if (allowedFields.length && allowedOperators.length) {
+                return { allowedFields, allowedOperators };
+            }
+        }
+        const fallbackFields = this.columns()
+            .filter((column) => typeof column?.key === 'string' && column.key.length > 0)
+            .map((column) => ({
+            key: column.key,
+            label: column.label || toLabel(column.key),
+            viewType: columnTypeToViewType(column.type),
+        }));
+        if (!fallbackFields.length) {
+            return null;
+        }
+        const fallbackOperators = Object.keys(OPERATOR_LABELS).map((key) => ({
+            key,
+            label: this.getOpLabel(key),
+            valueMode: OPERATOR_VALUE_MODE[key] ?? 'single',
+        }));
+        return {
+            allowedFields: fallbackFields,
+            allowedOperators: fallbackOperators,
+        };
+    }, ...(ngDevMode ? [{ debugName: "propertyFilterSchema" }] : /* istanbul ignore next */ []));
+    showGeneralTaskCreateButton = computed(() => GENERAL_TASK_CARD_KEYS.has(normalizeCardKey(this.context().selectedCardKey)), ...(ngDevMode ? [{ debugName: "showGeneralTaskCreateButton" }] : /* istanbul ignore next */ []));
+    generalTaskButtonLabel = computed(() => {
+        this.activeLang();
+        return (this.generalTaskModal()?.buttonLabel?.trim() ||
+            this.transloco.translate('workCenter.page.new'));
+    }, ...(ngDevMode ? [{ debugName: "generalTaskButtonLabel" }] : /* istanbul ignore next */ []));
+    resolvedPageTitle = computed(() => {
+        this.activeLang();
+        return (this.pageTitle() ||
+            this.transloco.translate('workCenter.page.title'));
+    }, ...(ngDevMode ? [{ debugName: "resolvedPageTitle" }] : /* istanbul ignore next */ []));
+    generalTaskButtonIcon = computed(() => this.generalTaskModal()?.buttonIcon?.trim() || 'general.plus', ...(ngDevMode ? [{ debugName: "generalTaskButtonIcon" }] : /* istanbul ignore next */ []));
+    defaultModalStyleClass = '!w-[96vw] md:!w-[84vw] xl:!w-[70vw] !shadow-none';
+    defaultGeneralTaskModalStyleClass = '!w-[70vw] !h-[90vh]';
+    constructor() {
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((lang) => this.activeLang.set(lang));
+        effect(() => {
+            this.facade.setLookups(this.lookups());
+        });
+        effect(() => {
+            const inputs = this.bootstrapInputs();
+            if (inputs) {
+                this.facade.setParams(this.area(), inputs);
+            }
+        });
+    }
+    onMenuItemClick(item) {
+        if (item.key === this.context().selectedCardKey) {
+            return;
+        }
+        this.facade.selectCardAndLoad(this.area(), item.key);
+        this.cardSelected.emit(item.key);
+    }
+    onRuntimeFiltersApplied(filters) {
+        const mappedFilters = filters.map((filter) => ({
+            field: filter.field,
+            op: filter.op,
+            value: filter.value,
+            values: filter.values,
+            from: filter.from,
+            to: filter.to,
+        }));
+        this.facade.applyHeaderFiltersAndLoad(this.area(), mappedFilters);
+        this.runtimeFiltersChanged.emit(mappedFilters);
+    }
+    onRuntimeFiltersCleared() {
+        this.facade.clearAllFiltersAndLoad(this.area());
+        this.tableFilters.set({});
+        this.runtimeFiltersChanged.emit([]);
+    }
+    /**
+     * Single entry point for `mt-table` (`lazy=true`) — handles both column
+     * filters and pagination/sort. Filter changes always reset the page to 1
+     * (handled by `applyColumnFiltersAndLoad`); when only paging/sort changed
+     * we fall through to `applyTableLazyLoadAndLoad`.
+     */
+    onTableLazyLoad(event) {
+        const schema = this.runtimeFilterSchema();
+        const propertyKeys = (schema?.properties ?? [])
+            .map((p) => p?.key)
+            .filter((k) => typeof k === 'string' && k.length > 0);
+        const allowedKeys = schema?.allowedFields ?? [];
+        const allowedFields = propertyKeys.length ? propertyKeys : allowedKeys;
+        const nextColumnFilters = buildColumnRuntimeFilters(event?.filters, this.columns(), allowedFields.length ? allowedFields : undefined);
+        if (!areFilterRulesEqual(nextColumnFilters, this.columnFilters())) {
+            this.facade.applyColumnFiltersAndLoad(this.area(), nextColumnFilters);
+            return;
+        }
+        this.facade.applyTableLazyLoadAndLoad(this.area(), event);
+    }
+    onGeneralTaskCreateClick() {
+        const modalOptions = this.generalTaskModal();
+        const modalData = {
+            moduleKey: 'GeneralTask',
+            ...(modalOptions?.data ?? {}),
+        };
+        const modalHeader = modalOptions?.header ??
+            this.transloco.translate('workCenter.page.createGeneralTask');
+        const modalStyleClass = modalOptions?.styleClass ?? this.defaultGeneralTaskModalStyleClass;
+        const operationKey = modalOptions?.operationKey ?? 'Create';
+        const closeOnPendingApproval = modalOptions?.closeOnPendingApproval ?? true;
+        const lookups = modalOptions?.lookups ?? this.lookups();
+        const ref = this.modal.openModal(WorkCenterClientFormModal, 'dialog', {
+            header: modalHeader,
+            styleClass: modalStyleClass,
+            position: 'end',
+            dismissableMask: true,
+            inputValues: {
+                data: modalData,
+                operationKey,
+                closeOnPendingApproval,
+                lookups,
+            },
+        });
+        ref.onClose.pipe(take(1)).subscribe((result) => {
+            if (result) {
+                this.facade.loadRuntime(this.area(), 'refresh');
+            }
+        });
+    }
+    onRowClick(row) {
+        const contextKey = this.resolveRowContextKey(row);
+        console.log('[work-center-debug] page row click', {
+            contextKey,
+            row,
+            openItemsInModal: this.openItemsInModal(),
+            hasModalComponent: !!this.itemModal()?.component,
+        });
+        if (!contextKey) {
+            return;
+        }
+        this.itemClicked.emit(contextKey);
+        if (this.openItemDrawer()) {
+            this.selectedItemContextKey.set(contextKey);
+            return;
+        }
+        if (!this.openItemsInModal()) {
+            return;
+        }
+        const modalOptions = this.itemModal();
+        if (!modalOptions?.component) {
+            return;
+        }
+        const ref = this.modal.openModal(modalOptions.component, 'drawer', {
+            header: modalOptions?.header ??
+                this.transloco.translate('workCenter.page.itemDetails'),
+            styleClass: modalOptions?.styleClass ?? this.defaultModalStyleClass,
+            position: modalOptions?.position ?? 'end',
+            dismissible: true,
+            modal: true,
+            ...(modalOptions?.appendTo ? { appendTo: modalOptions.appendTo } : {}),
+            inputValues: { contextKey },
+        });
+        ref.onClose.pipe(take(1)).subscribe(() => {
+            this.facade.loadRuntime(this.area(), 'refresh');
+        });
+    }
+    rowsClickable = computed(() => this.openItemDrawer() || this.openItemsInModal(), ...(ngDevMode ? [{ debugName: "rowsClickable" }] : /* istanbul ignore next */ []));
+    getOpLabel(key) {
+        return (this.transloco.translate('workCenter.operator.' + key) ||
+            OPERATOR_LABELS[key] ||
+            toLabel(key));
+    }
+    resolveRowContextKey(row) {
+        const value = row['contextKey'];
+        if (typeof value !== 'string') {
+            return null;
+        }
+        const normalized = value.trim();
+        return normalized.length ? normalized : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, showSidebar: { classPropertyName: "showSidebar", publicName: "showSidebar", isSignal: true, isRequired: false, transformFunction: null }, bootstrapInputs: { classPropertyName: "bootstrapInputs", publicName: "bootstrapInputs", isSignal: true, isRequired: false, transformFunction: null }, openItemDrawer: { classPropertyName: "openItemDrawer", publicName: "openItemDrawer", isSignal: true, isRequired: false, transformFunction: null }, itemReadOnly: { classPropertyName: "itemReadOnly", publicName: "itemReadOnly", 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 }, generalTaskModal: { classPropertyName: "generalTaskModal", publicName: "generalTaskModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked", cardSelected: "cardSelected" }, ngImport: i0, template: "<ng-template #headerActions>\n  <div class=\"flex flex-wrap items-center justify-end gap-2\">\n    <mt-property-filter-builder\n      [schema]=\"propertyFilterSchema()\"\n      [filters]=\"headerFilters()\"\n      (applied)=\"onRuntimeFiltersApplied($event)\"\n      (cleared)=\"onRuntimeFiltersCleared()\"\n    />\n\n    @if (showGeneralTaskCreateButton()) {\n      <mt-button\n        [label]=\"generalTaskButtonLabel()\"\n        [icon]=\"generalTaskButtonIcon()\"\n        size=\"small\"\n        (onClick)=\"onGeneralTaskCreateClick()\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template #pageContent>\n  <div class=\"flex flex-col gap-8\">\n    @if (loading()) {\n      <div\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\n      >\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\n          <p-skeleton height=\"6.5rem\" class=\"rounded-lg\" />\n        }\n      </div>\n    } @else if (kpis().length) {\n      <div class=\"gap-3 flex flex-wrap\">\n        @for (kpi of kpis(); track $index) {\n          <mt-statistic-card [data]=\"kpi\" class=\"min-w-[200px]\" />\n        }\n      </div>\n    }\n\n    <mt-table\n      noCard\n      [data]=\"rows()\"\n      [columns]=\"tableColumns()\"\n      tableLayout=\"auto\"\n      [clickableRows]=\"rowsClickable()\"\n      [loading]=\"loading()\"\n      [showFilters]=\"true\"\n      filterMode=\"column\"\n      [cellClickFilter]=\"true\"\n      [generalSearch]=\"true\"\n      [exportable]=\"true\"\n      [printable]=\"true\"\n      [groupable]=\"true\"\n      [freezeActions]=\"true\"\n      [lazy]=\"true\"\n      [lazyLocalSearch]=\"true\"\n      [lazyTotalRecords]=\"totalCount()\"\n      [pageSize]=\"context().pageSize\"\n      [currentPage]=\"context().page - 1\"\n      [first]=\"(context().page - 1) * context().pageSize\"\n      [rowsPerPageOptions]=\"[10, 20, 50, 100]\"\n      [groupCountMap]=\"statusGroupCountMap()\"\n      storageKey=\"work-center-page-table\"\n      [filters]=\"tableFilters()\"\n      (filtersChange)=\"tableFilters.set($event)\"\n      (lazyLoad)=\"onTableLazyLoad($event)\"\n      (rowClick)=\"onRowClick($event)\"\n    />\n  </div>\n</ng-template>\n\n@if (showSidebar()) {\n  <mt-client-page\n    [menuIcon]=\"menuIcon()\"\n    [menuTitle]=\"resolvedPageTitle()\"\n    [menuItems]=\"menuItems()\"\n    [menuItemsLoading]=\"loading() && !menuItems().length\"\n    [activeItem]=\"context().selectedCardKey ?? undefined\"\n    storageKey=\"work-center-client-page\"\n    (menuItemClick)=\"onMenuItemClick($event)\"\n  >\n    <ng-template #headerClientPageEnd>\n      <ng-container [ngTemplateOutlet]=\"headerActions\" />\n    </ng-template>\n\n    <ng-container [ngTemplateOutlet]=\"pageContent\" />\n  </mt-client-page>\n} @else {\n  <div class=\"flex h-full min-h-0 flex-col bg-surface-0\">\n    <div\n      class=\"flex shrink-0 items-center justify-end border-b border-surface px-7 py-4\"\n    >\n      <ng-container [ngTemplateOutlet]=\"headerActions\" />\n    </div>\n    <div class=\"min-h-0 flex-1 overflow-y-auto px-7 py-5\">\n      <ng-container [ngTemplateOutlet]=\"pageContent\" />\n    </div>\n  </div>\n}\n\n@if (selectedItemContextKey(); as contextKey) {\n  <mt-work-center-item-modal-route\n    [contextKey]=\"contextKey\"\n    [manageRouteOutlet]=\"false\"\n    [showPreviewLevelAction]=\"false\"\n    [readOnly]=\"itemReadOnly()\"\n    appendTo=\"body\"\n    drawerStyleClass=\"mt-work-center-item-drawer !w-[96vw] md:!w-[84vw] xl:!w-[70vw]\"\n    (closed)=\"selectedItemContextKey.set(null)\"\n  />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed", "resizable", "storageKey", "storageMode", "minSidebarWidth", "maxSidebarWidth", "defaultSidebarWidth"], outputs: ["collapsedChange", "menuItemClick", "loadChildren"] }, { 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", "cardClass"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "component", type: WorkCenterItemModalRoute, selector: "mt-work-center-item-modal-route", inputs: ["contextKey", "manageRouteOutlet", "showPreviewLevelAction", "readOnly", "appendTo", "drawerStyleClass"], outputs: ["previewLevel", "closed"] }, { 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.2.8", ngImport: i0, type: WorkCenterPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-page', standalone: true, imports: [
+                        CommonModule,
+                        Button,
+                        ClientPage,
+                        PropertyFilterBuilder,
+                        StatisticCard,
+                        Table,
+                        WorkCenterItemModalRoute,
+                        SkeletonModule,
+                    ], template: "<ng-template #headerActions>\n  <div class=\"flex flex-wrap items-center justify-end gap-2\">\n    <mt-property-filter-builder\n      [schema]=\"propertyFilterSchema()\"\n      [filters]=\"headerFilters()\"\n      (applied)=\"onRuntimeFiltersApplied($event)\"\n      (cleared)=\"onRuntimeFiltersCleared()\"\n    />\n\n    @if (showGeneralTaskCreateButton()) {\n      <mt-button\n        [label]=\"generalTaskButtonLabel()\"\n        [icon]=\"generalTaskButtonIcon()\"\n        size=\"small\"\n        (onClick)=\"onGeneralTaskCreateClick()\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template #pageContent>\n  <div class=\"flex flex-col gap-8\">\n    @if (loading()) {\n      <div\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\n      >\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\n          <p-skeleton height=\"6.5rem\" class=\"rounded-lg\" />\n        }\n      </div>\n    } @else if (kpis().length) {\n      <div class=\"gap-3 flex flex-wrap\">\n        @for (kpi of kpis(); track $index) {\n          <mt-statistic-card [data]=\"kpi\" class=\"min-w-[200px]\" />\n        }\n      </div>\n    }\n\n    <mt-table\n      noCard\n      [data]=\"rows()\"\n      [columns]=\"tableColumns()\"\n      tableLayout=\"auto\"\n      [clickableRows]=\"rowsClickable()\"\n      [loading]=\"loading()\"\n      [showFilters]=\"true\"\n      filterMode=\"column\"\n      [cellClickFilter]=\"true\"\n      [generalSearch]=\"true\"\n      [exportable]=\"true\"\n      [printable]=\"true\"\n      [groupable]=\"true\"\n      [freezeActions]=\"true\"\n      [lazy]=\"true\"\n      [lazyLocalSearch]=\"true\"\n      [lazyTotalRecords]=\"totalCount()\"\n      [pageSize]=\"context().pageSize\"\n      [currentPage]=\"context().page - 1\"\n      [first]=\"(context().page - 1) * context().pageSize\"\n      [rowsPerPageOptions]=\"[10, 20, 50, 100]\"\n      [groupCountMap]=\"statusGroupCountMap()\"\n      storageKey=\"work-center-page-table\"\n      [filters]=\"tableFilters()\"\n      (filtersChange)=\"tableFilters.set($event)\"\n      (lazyLoad)=\"onTableLazyLoad($event)\"\n      (rowClick)=\"onRowClick($event)\"\n    />\n  </div>\n</ng-template>\n\n@if (showSidebar()) {\n  <mt-client-page\n    [menuIcon]=\"menuIcon()\"\n    [menuTitle]=\"resolvedPageTitle()\"\n    [menuItems]=\"menuItems()\"\n    [menuItemsLoading]=\"loading() && !menuItems().length\"\n    [activeItem]=\"context().selectedCardKey ?? undefined\"\n    storageKey=\"work-center-client-page\"\n    (menuItemClick)=\"onMenuItemClick($event)\"\n  >\n    <ng-template #headerClientPageEnd>\n      <ng-container [ngTemplateOutlet]=\"headerActions\" />\n    </ng-template>\n\n    <ng-container [ngTemplateOutlet]=\"pageContent\" />\n  </mt-client-page>\n} @else {\n  <div class=\"flex h-full min-h-0 flex-col bg-surface-0\">\n    <div\n      class=\"flex shrink-0 items-center justify-end border-b border-surface px-7 py-4\"\n    >\n      <ng-container [ngTemplateOutlet]=\"headerActions\" />\n    </div>\n    <div class=\"min-h-0 flex-1 overflow-y-auto px-7 py-5\">\n      <ng-container [ngTemplateOutlet]=\"pageContent\" />\n    </div>\n  </div>\n}\n\n@if (selectedItemContextKey(); as contextKey) {\n  <mt-work-center-item-modal-route\n    [contextKey]=\"contextKey\"\n    [manageRouteOutlet]=\"false\"\n    [showPreviewLevelAction]=\"false\"\n    [readOnly]=\"itemReadOnly()\"\n    appendTo=\"body\"\n    drawerStyleClass=\"mt-work-center-item-drawer !w-[96vw] md:!w-[84vw] xl:!w-[70vw]\"\n    (closed)=\"selectedItemContextKey.set(null)\"\n  />\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], showSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSidebar", required: false }] }], bootstrapInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "bootstrapInputs", required: false }] }], openItemDrawer: [{ type: i0.Input, args: [{ isSignal: true, alias: "openItemDrawer", required: false }] }], itemReadOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemReadOnly", required: false }] }], openItemsInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "openItemsInModal", required: false }] }], itemModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemModal", required: false }] }], generalTaskModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "generalTaskModal", required: false }] }], runtimeFiltersChanged: [{ type: i0.Output, args: ["runtimeFiltersChanged"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], cardSelected: [{ type: i0.Output, args: ["cardSelected"] }] } });
+
 const APP_STATES = [WorkCenterState];
 
 /**