@masterteam/work-center 0.0.48 → 0.0.49

package/assets/i18n/ar.json

@@ -4,6 +4,7 @@
       "title": "مركز العمل",
       "new": "جديد",
       "create": "إنشاء",
+      "createGeneralTask": "إنشاء مهمة عامة",
       "itemDetails": "تفاصيل العنصر",
       "records": "سجل"
     },

package/assets/i18n/en.json

@@ -4,6 +4,7 @@
       "title": "Work Center",
       "new": "New",
       "create": "Create",
+      "createGeneralTask": "Create General Task",
       "itemDetails": "Item Details",
       "records": "records"
     },

package/fesm2022/masterteam-work-center.mjs

@@ -34,6 +34,7 @@ class WorkCenterClientFormModal {
     processForm = viewChild.required(ClientForm);
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     operationKey = input('Create', ...(ngDevMode ? [{ debugName: "operationKey" }] : /* istanbul ignore next */ []));
+    closeOnPendingApproval = input(false, ...(ngDevMode ? [{ debugName: "closeOnPendingApproval" }] : /* istanbul ignore next */ []));
     lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : /* istanbul ignore next */ []));
     moduleKey = computed(() => this.data().moduleKey, ...(ngDevMode ? [{ debugName: "moduleKey" }] : /* istanbul ignore next */ []));
     moduleId = computed(() => this.toNumber(this.data().moduleId), ...(ngDevMode ? [{ debugName: "moduleId" }] : /* istanbul ignore next */ []));
@@ -64,7 +65,7 @@ class WorkCenterClientFormModal {
         this.submitError.set(null);
         const status = response.status === 'PendingApproval' ? 'pending' : 'executed';
         this.submitStatus.set(status);
-        if (status === 'executed') {
+        if (status === 'executed' || this.closeOnPendingApproval()) {
             this.ref.close(true);
         }
     }
@@ -86,12 +87,12 @@ class WorkCenterClientFormModal {
         return undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterClientFormModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterClientFormModal, isStandalone: true, selector: "mt-work-center-client-form-modal", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "processForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  <div [class]=\"modal.contentClass + ' p-5 flex flex-col gap-4'\">\r\n    <mt-client-form\r\n      [moduleKey]=\"moduleKey()\"\r\n      [moduleId]=\"moduleId()\"\r\n      [operationKey]=\"operationKey()\"\r\n      [levelId]=\"levelId()\"\r\n      [levelDataId]=\"levelDataId()\"\r\n      [moduleDataId]=\"moduleDataId()\"\r\n      [formMode]=\"formMode()\"\r\n      [autoLoad]=\"true\"\r\n      [lookups]=\"lookups()\"\r\n      (submitted)=\"onSubmitted($event)\"\r\n      (errored)=\"onErrored($event)\"\r\n    />\r\n\r\n    @if (isSubmitting()) {\r\n      <div class=\"text-sm text-muted-color\">{{ t(\"modal.submitting\") }}</div>\r\n    }\r\n\r\n    @if (validationMessage()) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-700\"\r\n        role=\"alert\"\r\n      >\r\n        {{ validationMessage() }}\r\n      </div>\r\n    }\r\n\r\n    @if (submitError()) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        role=\"alert\"\r\n      >\r\n        {{ submitError() }}\r\n      </div>\r\n    }\r\n\r\n    @if (submitStatus(); as status) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border p-3 text-sm\"\r\n        [class]=\"\r\n          status === 'pending'\r\n            ? 'border-amber-200 bg-amber-50 text-amber-700'\r\n            : 'border-emerald-200 bg-emerald-50 text-emerald-700'\r\n        \"\r\n      >\r\n        @if (status === \"pending\") {\r\n          {{ t(\"modal.requestSubmitted\") }}\r\n        } @else {\r\n          {{ t(\"modal.operationExecuted\") }}\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('modal.cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"isSubmitting()\"\r\n      (onClick)=\"ref.close(false)\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('modal.submit')\"\r\n      icon=\"general.check\"\r\n      [disabled]=\"isSubmitting()\"\r\n      (onClick)=\"onSubmit()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ 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: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterClientFormModal, isStandalone: true, selector: "mt-work-center-client-form-modal", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: false, transformFunction: null }, closeOnPendingApproval: { classPropertyName: "closeOnPendingApproval", publicName: "closeOnPendingApproval", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "processForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  <div [class]=\"modal.contentClass + ' p-5 flex flex-col gap-4'\">\r\n    <mt-client-form\r\n      [moduleKey]=\"moduleKey()\"\r\n      [moduleId]=\"moduleId()\"\r\n      [operationKey]=\"operationKey()\"\r\n      [levelId]=\"levelId()\"\r\n      [levelDataId]=\"levelDataId()\"\r\n      [moduleDataId]=\"moduleDataId()\"\r\n      [formMode]=\"formMode()\"\r\n      [autoLoad]=\"true\"\r\n      [lookups]=\"lookups()\"\r\n      (submitted)=\"onSubmitted($event)\"\r\n      (errored)=\"onErrored($event)\"\r\n    />\r\n\r\n    @if (isSubmitting()) {\r\n      <div class=\"text-sm text-muted-color\">{{ t(\"modal.submitting\") }}</div>\r\n    }\r\n\r\n    @if (validationMessage()) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-700\"\r\n        role=\"alert\"\r\n      >\r\n        {{ validationMessage() }}\r\n      </div>\r\n    }\r\n\r\n    @if (submitError()) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        role=\"alert\"\r\n      >\r\n        {{ submitError() }}\r\n      </div>\r\n    }\r\n\r\n    @if (submitStatus(); as status) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border p-3 text-sm\"\r\n        [class]=\"\r\n          status === 'pending'\r\n            ? 'border-amber-200 bg-amber-50 text-amber-700'\r\n            : 'border-emerald-200 bg-emerald-50 text-emerald-700'\r\n        \"\r\n      >\r\n        @if (status === \"pending\") {\r\n          {{ t(\"modal.requestSubmitted\") }}\r\n        } @else {\r\n          {{ t(\"modal.operationExecuted\") }}\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('modal.cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"isSubmitting()\"\r\n      (onClick)=\"ref.close(false)\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('modal.submit')\"\r\n      icon=\"general.check\"\r\n      [disabled]=\"isSubmitting()\"\r\n      (onClick)=\"onSubmit()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ 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: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterClientFormModal, decorators: [{
             type: Component,
             args: [{ selector: 'mt-work-center-client-form-modal', standalone: true, imports: [Button, TranslocoDirective, ClientForm], template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  <div [class]=\"modal.contentClass + ' p-5 flex flex-col gap-4'\">\r\n    <mt-client-form\r\n      [moduleKey]=\"moduleKey()\"\r\n      [moduleId]=\"moduleId()\"\r\n      [operationKey]=\"operationKey()\"\r\n      [levelId]=\"levelId()\"\r\n      [levelDataId]=\"levelDataId()\"\r\n      [moduleDataId]=\"moduleDataId()\"\r\n      [formMode]=\"formMode()\"\r\n      [autoLoad]=\"true\"\r\n      [lookups]=\"lookups()\"\r\n      (submitted)=\"onSubmitted($event)\"\r\n      (errored)=\"onErrored($event)\"\r\n    />\r\n\r\n    @if (isSubmitting()) {\r\n      <div class=\"text-sm text-muted-color\">{{ t(\"modal.submitting\") }}</div>\r\n    }\r\n\r\n    @if (validationMessage()) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-700\"\r\n        role=\"alert\"\r\n      >\r\n        {{ validationMessage() }}\r\n      </div>\r\n    }\r\n\r\n    @if (submitError()) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        role=\"alert\"\r\n      >\r\n        {{ submitError() }}\r\n      </div>\r\n    }\r\n\r\n    @if (submitStatus(); as status) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border p-3 text-sm\"\r\n        [class]=\"\r\n          status === 'pending'\r\n            ? 'border-amber-200 bg-amber-50 text-amber-700'\r\n            : 'border-emerald-200 bg-emerald-50 text-emerald-700'\r\n        \"\r\n      >\r\n        @if (status === \"pending\") {\r\n          {{ t(\"modal.requestSubmitted\") }}\r\n        } @else {\r\n          {{ t(\"modal.operationExecuted\") }}\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('modal.cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"isSubmitting()\"\r\n      (onClick)=\"ref.close(false)\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('modal.submit')\"\r\n      icon=\"general.check\"\r\n      [disabled]=\"isSubmitting()\"\r\n      (onClick)=\"onSubmit()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
-        }], propDecorators: { processForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], operationKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationKey", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }] } });
+        }], propDecorators: { processForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], operationKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationKey", required: false }] }], closeOnPendingApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnPendingApproval", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }] } });
 
 class EnterArea {
     area;
@@ -1387,9 +1388,10 @@ class WorkCenterPage {
             ...(modalOptions?.data ?? {}),
         };
         const modalHeader = modalOptions?.header ??
-            this.transloco.translate('workCenter.page.create');
+            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,
@@ -1399,6 +1401,7 @@ class WorkCenterPage {
             inputValues: {
                 data: modalData,
                 operationKey,
+                closeOnPendingApproval,
                 lookups,
             },
         });
@@ -1590,20 +1593,35 @@ class WorkCenterEscalationInstanceType {
     schemaNodes = computed(() => {
         this.activeLang();
         const currentIds = this.currentSchemaStepIds();
-        return resolveSchemaSteps(this.preview()).map((step) => {
+        const preview = this.preview();
+        const closedStepIds = new Set((preview?.steps ?? [])
+            .filter((step) => isClosedStep(step))
+            .map((step) => step.escalationStepSchemaId)
+            .filter((schemaId) => schemaId != null)
+            .map(String));
+        return resolveSchemaSteps(preview).map((step) => {
             const isInitial = step.isInitial === true;
             const isFinal = step.isFinal === true;
+            const isClosed = closedStepIds.has(String(step.id));
             return {
                 id: String(step.id),
                 name: resolveTranslatable(step.name) ||
                     `${this.transloco.translate('workCenter.entity.step')} ${step.id}`,
-                color: isFinal ? '#059669' : isInitial ? '#2563eb' : '#0369A1',
-                icon: isInitial || isFinal ? 'map.flag-04' : 'file.clipboard-check',
-                badge: isInitial
-                    ? this.transloco.translate('workCenter.preview.initial')
+                color: isClosed
+                    ? '#dc2626'
                     : isFinal
-                        ? this.transloco.translate('workCenter.preview.final')
-                        : null,
+                        ? '#059669'
+                        : isInitial
+                            ? '#2563eb'
+                            : '#0369A1',
+                icon: isInitial || isFinal ? 'map.flag-04' : 'file.clipboard-check',
+                badge: isClosed
+                    ? 'Closed'
+                    : isInitial
+                        ? this.transloco.translate('workCenter.preview.initial')
+                        : isFinal
+                            ? this.transloco.translate('workCenter.preview.final')
+                            : null,
                 style: 'detail',
                 current: currentIds.has(String(step.id)),
             };
@@ -1670,7 +1688,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=\"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: 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"] }] });
+    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\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=\"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      <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    </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: 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,
@@ -1681,7 +1699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         DiscussionThread,
                         EntitiesPreview,
                         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=\"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" }]
+                    ], 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=\"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      <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    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
 // The endpoint returns the escalation payload directly, but tolerate the
 // shared `{ data: ... }` envelope used by the other escalation endpoints.
@@ -1720,6 +1738,9 @@ function mapAttachments(value) {
 function resolveSchemaSteps(preview) {
     return preview?.schema?.stepsSchema ?? preview?.schemaSteps ?? [];
 }
+function isClosedStep(step) {
+    return (step.statusKey ?? step.status?.key ?? '').toLowerCase() === 'closed';
+}
 function resolveTranslatable(value) {
     if (!value || typeof value !== 'object') {
         return '';
@@ -2133,7 +2154,7 @@ class WorkCenterProcessRequestType {
         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()\"\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", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "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 } }, 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", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "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,
@@ -2144,7 +2165,7 @@ 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()\"\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" }]
+                    ], 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 }] }] } });
 
 class WorkCenterProcessStepType {
@@ -2213,7 +2234,7 @@ class WorkCenterProcessStepType {
         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()\"\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=\"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", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "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: 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=\"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", "preview", "forceOriginalForm", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "readonlyFieldDisplayMode", "lookups", "statuses", "ignoredFieldKeys", "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: WorkCenterProcessStepType, decorators: [{
             type: Component,
@@ -2224,7 +2245,7 @@ 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() !== '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()\"\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=\"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" }]
+                    ], 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=\"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 }] }] } });
 
 class WorkCenterItemModal {
@@ -2379,13 +2400,13 @@ class WorkCenterItemModalFooterActions {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterItemModalFooterActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterItemModalFooterActions, isStandalone: true, selector: "mt-work-center-item-modal-footer-actions", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null }, previewLevelTarget: { classPropertyName: "previewLevelTarget", publicName: "previewLevelTarget", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted", previewLevelSelected: "previewLevelSelected", visibilityChange: "visibilityChange" }, host: { classAttribute: "flex w-full flex-1 flex-wrap items-center justify-end gap-2" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\n  @if (shouldRender()) {\n    @if (error(); as error) {\n      <span class=\"me-auto max-w-md text-sm text-red-600\">\n        {{ error }}\n      </span>\n    } @else if (loading() && !displayActions().length) {\n      <span class=\"me-auto text-sm text-surface-500\">{{\n        t(\"modal.loadingActions\")\n      }}</span>\n    }\n\n    @if (previewLevelTarget(); as previewLevelTarget) {\n      <mt-button\n        [label]=\"t('modal.previewLevel')\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        [disabled]=\"loading() || !!pendingActionKey()\"\n        (onClick)=\"previewLevelSelected.emit(previewLevelTarget)\"\n      />\n    }\n\n    @for (action of displayActions(); track action.actionKey + action.url) {\n      <mt-button\n        [label]=\"action.label\"\n        [severity]=\"action.severity\"\n        [variant]=\"action.variant\"\n        [disabled]=\"loading() || !!pendingActionKey()\"\n        [loading]=\"pendingActionKey() === action.actionKey\"\n        (onClick)=\"executeAction(action)\"\n      />\n    }\n  }\n</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: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterItemModalFooterActions, isStandalone: true, selector: "mt-work-center-item-modal-footer-actions", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null }, previewLevelTarget: { classPropertyName: "previewLevelTarget", publicName: "previewLevelTarget", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted", previewLevelSelected: "previewLevelSelected", visibilityChange: "visibilityChange" }, host: { classAttribute: "flex w-full flex-1 flex-wrap items-center justify-end gap-2" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  @if (shouldRender()) {\r\n    @if (error(); as error) {\r\n      <span class=\"me-auto max-w-md text-sm text-red-600\">\r\n        {{ error }}\r\n      </span>\r\n    } @else if (loading() && !displayActions().length) {\r\n      <span class=\"me-auto text-sm text-surface-500\">{{\r\n        t(\"modal.loadingActions\")\r\n      }}</span>\r\n    }\r\n\r\n    @if (previewLevelTarget(); as previewLevelTarget) {\r\n      <mt-button\r\n        [label]=\"t('modal.previewLevel')\"\r\n        severity=\"secondary\"\r\n        variant=\"outlined\"\r\n        [disabled]=\"loading() || !!pendingActionKey()\"\r\n        (onClick)=\"previewLevelSelected.emit(previewLevelTarget)\"\r\n      />\r\n    }\r\n\r\n    @for (action of displayActions(); track action.actionKey + action.url) {\r\n      <mt-button\r\n        [label]=\"action.label\"\r\n        [severity]=\"action.severity\"\r\n        [variant]=\"action.variant\"\r\n        [disabled]=\"loading() || !!pendingActionKey()\"\r\n        [loading]=\"pendingActionKey() === action.actionKey\"\r\n        (onClick)=\"executeAction(action)\"\r\n      />\r\n    }\r\n  }\r\n</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: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterItemModalFooterActions, decorators: [{
             type: Component,
             args: [{ selector: 'mt-work-center-item-modal-footer-actions', standalone: true, imports: [CommonModule, TranslocoDirective, Button], host: {
                         class: 'flex w-full flex-1 flex-wrap items-center justify-end gap-2',
-                    }, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\n  @if (shouldRender()) {\n    @if (error(); as error) {\n      <span class=\"me-auto max-w-md text-sm text-red-600\">\n        {{ error }}\n      </span>\n    } @else if (loading() && !displayActions().length) {\n      <span class=\"me-auto text-sm text-surface-500\">{{\n        t(\"modal.loadingActions\")\n      }}</span>\n    }\n\n    @if (previewLevelTarget(); as previewLevelTarget) {\n      <mt-button\n        [label]=\"t('modal.previewLevel')\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        [disabled]=\"loading() || !!pendingActionKey()\"\n        (onClick)=\"previewLevelSelected.emit(previewLevelTarget)\"\n      />\n    }\n\n    @for (action of displayActions(); track action.actionKey + action.url) {\n      <mt-button\n        [label]=\"action.label\"\n        [severity]=\"action.severity\"\n        [variant]=\"action.variant\"\n        [disabled]=\"loading() || !!pendingActionKey()\"\n        [loading]=\"pendingActionKey() === action.actionKey\"\n        (onClick)=\"executeAction(action)\"\n      />\n    }\n  }\n</ng-container>\n" }]
+                    }, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  @if (shouldRender()) {\r\n    @if (error(); as error) {\r\n      <span class=\"me-auto max-w-md text-sm text-red-600\">\r\n        {{ error }}\r\n      </span>\r\n    } @else if (loading() && !displayActions().length) {\r\n      <span class=\"me-auto text-sm text-surface-500\">{{\r\n        t(\"modal.loadingActions\")\r\n      }}</span>\r\n    }\r\n\r\n    @if (previewLevelTarget(); as previewLevelTarget) {\r\n      <mt-button\r\n        [label]=\"t('modal.previewLevel')\"\r\n        severity=\"secondary\"\r\n        variant=\"outlined\"\r\n        [disabled]=\"loading() || !!pendingActionKey()\"\r\n        (onClick)=\"previewLevelSelected.emit(previewLevelTarget)\"\r\n      />\r\n    }\r\n\r\n    @for (action of displayActions(); track action.actionKey + action.url) {\r\n      <mt-button\r\n        [label]=\"action.label\"\r\n        [severity]=\"action.severity\"\r\n        [variant]=\"action.variant\"\r\n        [disabled]=\"loading() || !!pendingActionKey()\"\r\n        [loading]=\"pendingActionKey() === action.actionKey\"\r\n        (onClick)=\"executeAction(action)\"\r\n      />\r\n    }\r\n  }\r\n</ng-container>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { contextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextKey", required: false }] }], previewLevelTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewLevelTarget", required: false }] }], actionExecuted: [{ type: i0.Output, args: ["actionExecuted"] }], previewLevelSelected: [{ type: i0.Output, args: ["previewLevelSelected"] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }] } });
 function normalizeMethod(value) {
     if (!value || typeof value !== 'string') {
@@ -2630,7 +2651,7 @@ class WorkCenterItemModalRoute {
             : null;
     }
     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\n  [visible]=\"drawerVisible()\"\n  [loadingHeader]=\"loading()\"\n  [title]=\"drawerTitle()\"\n  styleClass=\"mt-work-center-item-drawer !absolute !w-[96vw] md:!w-[84vw] xl:!w-[70vw]\"\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 [details]=\"details\" [lookups]=\"lookups()\" />\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 (footerActionsMounted()) {\n    <div footer [class]=\"modal.footerClass\">\n      <mt-work-center-item-modal-footer-actions\n        [contextKey]=\"resolvedContextKey()\"\n        [previewLevelTarget]=\"previewLevelTarget()\"\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"] }, { 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 } }, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterItemModalRoute, decorators: [{
             type: Component,
@@ -2641,7 +2662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         SkeletonModule,
                         WorkCenterItemModal,
                         WorkCenterItemModalFooterActions,
-                    ], providers: [RuntimeActionContextStore], template: "<mt-drawer\n  [visible]=\"drawerVisible()\"\n  [loadingHeader]=\"loading()\"\n  [title]=\"drawerTitle()\"\n  styleClass=\"mt-work-center-item-drawer !absolute !w-[96vw] md:!w-[84vw] xl:!w-[70vw]\"\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 [details]=\"details\" [lookups]=\"lookups()\" />\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 (footerActionsMounted()) {\n    <div footer [class]=\"modal.footerClass\">\n      <mt-work-center-item-modal-footer-actions\n        [contextKey]=\"resolvedContextKey()\"\n        [previewLevelTarget]=\"previewLevelTarget()\"\n        (actionExecuted)=\"onActionExecuted($event)\"\n        (previewLevelSelected)=\"onPreviewLevelSelected($event)\"\n        (visibilityChange)=\"onFooterVisibilityChange($event)\"\n      />\n    </div>\n  }\n</mt-drawer>\n" }]
+                    ], 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"] }] } });
 function normalizeRouteId(value) {
     if (typeof value === 'number' && Number.isFinite(value)) {