@masterteam/work-center 0.0.14 → 0.0.16

package/fesm2022/masterteam-work-center.mjs

@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, viewChild, input, computed, signal, Component, Injectable, output, effect, untracked } from '@angular/core';
+import { inject, viewChild, input, computed, signal, Component, Injectable, DestroyRef, output, effect, untracked } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
 import { Button } from '@masterteam/components/button';
 import { ClientPage } from '@masterteam/components/client-page';
 import { ModalService } from '@masterteam/components/modal';
@@ -32,6 +34,7 @@ class WorkCenterClientFormModal {
     modal = inject(ModalService);
     ref = inject(ModalRef);
     drawerController = inject(DrawerController, { optional: true });
+    transloco = inject(TranslocoService);
     processForm = viewChild.required(ClientForm);
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
     operationKey = input('Create', ...(ngDevMode ? [{ debugName: "operationKey" }] : []));
@@ -54,7 +57,7 @@ class WorkCenterClientFormModal {
         this.submitError.set(null);
         this.submitStatus.set(null);
         if (!this.processForm().isValid()) {
-            this.validationMessage.set('Please fill in all required fields before submitting.');
+            this.validationMessage.set(this.transloco.translate('workCenter.validation.fillRequiredFields'));
             return;
         }
         this.isSubmitting.set(true);
@@ -71,7 +74,8 @@ class WorkCenterClientFormModal {
     }
     onErrored(error) {
         this.isSubmitting.set(false);
-        this.submitError.set(error ?? 'Failed to submit form');
+        this.submitError.set(error ??
+            this.transloco.translate('workCenter.error.failedSubmit'));
     }
     toNumber(value) {
         if (typeof value === 'number' && Number.isFinite(value)) {
@@ -86,11 +90,11 @@ class WorkCenterClientFormModal {
         return undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterClientFormModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: "<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\">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        Request submitted for approval.\r\n      } @else {\r\n        Operation executed successfully.\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=\"Submit\"\r\n    icon=\"general.check\"\r\n    [disabled]=\"isSubmitting()\"\r\n    (onClick)=\"onSubmit()\"\r\n  />\r\n</div>\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: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lookups", "ignoredFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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.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", "returnUrl", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lookups", "ignoredFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterClientFormModal, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-work-center-client-form-modal', standalone: true, imports: [Button, ClientForm], template: "<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\">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        Request submitted for approval.\r\n      } @else {\r\n        Operation executed successfully.\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=\"Submit\"\r\n    icon=\"general.check\"\r\n    [disabled]=\"isSubmitting()\"\r\n    (onClick)=\"onSubmit()\"\r\n  />\r\n</div>\r\n" }]
+            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.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 }] }] } });
 
 class EnterArea {
@@ -856,13 +860,13 @@ function mapAllowedFields(schema) {
         label: toLabel(field),
     }));
 }
-function mapAllowedOperators(schema) {
+function mapAllowedOperators(schema, getLabel) {
     const options = [];
     for (const operator of schema.allowedOperators ?? []) {
         if (typeof operator === 'string') {
             options.push({
                 key: operator,
-                label: OPERATOR_LABELS[operator] ?? toLabel(operator),
+                label: getLabel(operator),
                 valueMode: OPERATOR_VALUE_MODE[operator] ?? 'single',
             });
             continue;
@@ -876,8 +880,7 @@ function mapAllowedOperators(schema) {
             label: operator.display?.display ||
                 operator.display?.en ||
                 operator.display?.ar ||
-                OPERATOR_LABELS[key] ||
-                toLabel(key),
+                getLabel(key),
             valueMode: OPERATOR_VALUE_MODE[key] ?? 'single',
         });
     }
@@ -886,8 +889,11 @@ function mapAllowedOperators(schema) {
 class WorkCenterPage {
     facade = inject(WorkCenterFacade);
     modal = inject(ModalService);
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
+    activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
     area = input('MyInbox', ...(ngDevMode ? [{ debugName: "area" }] : []));
-    pageTitle = input('Work Center', ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
+    pageTitle = input('', ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
     menuIcon = input('communication.inbox-01', ...(ngDevMode ? [{ debugName: "menuIcon" }] : []));
     lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : []));
     openItemsInModal = input(true, ...(ngDevMode ? [{ debugName: "openItemsInModal" }] : []));
@@ -910,10 +916,11 @@ class WorkCenterPage {
         sortable: true,
     })), ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
     propertyFilterSchema = computed(() => {
+        this.activeLang();
         const schema = this.runtimeFilterSchema();
         if (schema) {
             const allowedFields = mapAllowedFields(schema);
-            const allowedOperators = mapAllowedOperators(schema);
+            const allowedOperators = mapAllowedOperators(schema, (key) => this.getOpLabel(key));
             if (allowedFields.length && allowedOperators.length) {
                 return { allowedFields, allowedOperators };
             }
@@ -930,7 +937,7 @@ class WorkCenterPage {
         }
         const fallbackOperators = Object.keys(OPERATOR_LABELS).map((key) => ({
             key,
-            label: OPERATOR_LABELS[key] ?? toLabel(key),
+            label: this.getOpLabel(key),
             valueMode: OPERATOR_VALUE_MODE[key] ?? 'single',
         }));
         return {
@@ -939,11 +946,23 @@ class WorkCenterPage {
         };
     }, ...(ngDevMode ? [{ debugName: "propertyFilterSchema" }] : []));
     showGeneralTaskCreateButton = computed(() => GENERAL_TASK_CARD_KEYS.has(normalizeCardKey(this.context().selectedCardKey)), ...(ngDevMode ? [{ debugName: "showGeneralTaskCreateButton" }] : []));
-    generalTaskButtonLabel = computed(() => this.generalTaskModal()?.buttonLabel?.trim() || 'New', ...(ngDevMode ? [{ debugName: "generalTaskButtonLabel" }] : []));
+    generalTaskButtonLabel = computed(() => {
+        this.activeLang();
+        return (this.generalTaskModal()?.buttonLabel?.trim() ||
+            this.transloco.translate('workCenter.page.new'));
+    }, ...(ngDevMode ? [{ debugName: "generalTaskButtonLabel" }] : []));
+    resolvedPageTitle = computed(() => {
+        this.activeLang();
+        return (this.pageTitle() ||
+            this.transloco.translate('workCenter.page.title'));
+    }, ...(ngDevMode ? [{ debugName: "resolvedPageTitle" }] : []));
     generalTaskButtonIcon = computed(() => this.generalTaskModal()?.buttonIcon?.trim() || 'general.plus', ...(ngDevMode ? [{ debugName: "generalTaskButtonIcon" }] : []));
     defaultModalStyleClass = '!w-[96vw] xl:!w-[calc(100%-8rem)] 2xl:!w-[calc(100%-12rem)] !shadow-none';
     defaultGeneralTaskModalStyleClass = '!w-[70vw] !h-[90vh]';
     constructor() {
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((lang) => this.activeLang.set(lang));
         effect(() => {
             this.facade.setLookups(this.lookups());
         });
@@ -979,7 +998,8 @@ class WorkCenterPage {
             moduleKey: 'GeneralTask',
             ...(modalOptions?.data ?? {}),
         };
-        const modalHeader = modalOptions?.header ?? 'Create';
+        const modalHeader = modalOptions?.header ??
+            this.transloco.translate('workCenter.page.create');
         const modalStyleClass = modalOptions?.styleClass ?? this.defaultGeneralTaskModalStyleClass;
         const operationKey = modalOptions?.operationKey ?? 'Create';
         const lookups = modalOptions?.lookups ?? this.lookups();
@@ -1020,7 +1040,8 @@ class WorkCenterPage {
             return;
         }
         this.modal.openModal(modalOptions.component, 'drawer', {
-            header: modalOptions?.header ?? 'Item Details',
+            header: modalOptions?.header ??
+                this.transloco.translate('workCenter.page.itemDetails'),
             styleClass: modalOptions?.styleClass ?? this.defaultModalStyleClass,
             position: modalOptions?.position ?? 'end',
             dismissible: true,
@@ -1030,6 +1051,11 @@ class WorkCenterPage {
         });
     }
     rowsClickable = computed(() => this.openItemsInModal(), ...(ngDevMode ? [{ debugName: "rowsClickable" }] : []));
+    getOpLabel(key) {
+        return (this.transloco.translate('workCenter.operator.' + key) ||
+            OPERATOR_LABELS[key] ||
+            toLabel(key));
+    }
     resolveRowContextKey(row) {
         const value = row['contextKey'];
         if (typeof value !== 'string') {
@@ -1039,7 +1065,7 @@ class WorkCenterPage {
         return normalized.length ? normalized : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, openItemsInModal: { classPropertyName: "openItemsInModal", publicName: "openItemsInModal", isSignal: true, isRequired: false, transformFunction: null }, itemModal: { classPropertyName: "itemModal", publicName: "itemModal", isSignal: true, isRequired: false, transformFunction: null }, generalTaskModal: { classPropertyName: "generalTaskModal", publicName: "generalTaskModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked" }, ngImport: i0, template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"pageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n      <mt-property-filter-builder\r\n        [schema]=\"propertyFilterSchema()\"\r\n        [filters]=\"context().runtimeFilters\"\r\n        (applied)=\"onRuntimeFiltersApplied($event)\"\r\n        (cleared)=\"onRuntimeFiltersCleared()\"\r\n      />\r\n\r\n      @if (showGeneralTaskCreateButton()) {\r\n        <mt-button\r\n          [label]=\"generalTaskButtonLabel()\"\r\n          [icon]=\"generalTaskButtonIcon()\"\r\n          size=\"small\"\r\n          (onClick)=\"onGeneralTaskCreateClick()\"\r\n        />\r\n      }\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-8\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" cardClass=\"shadow-sm\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"tableColumns()\"\n      [lazy]=\"true\"\n      [lazyLocalSearch]=\"true\"\n      [lazyLocalSort]=\"true\"\n      [clickableRows]=\"rowsClickable()\"\n      [loading]=\"loading()\"\n      [lazyTotalRecords]=\"totalCount()\"\n      [showFilters]=\"false\"\n      [generalSearch]=\"true\"\n      [exportable]=\"true\"\n      [pageSize]=\"context().pageSize\"\n      [currentPage]=\"tableCurrentPage()\"\n      [first]=\"tableFirst()\"\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed"], outputs: ["collapsedChange", "menuItemClick"] }, { kind: "component", type: PropertyFilterBuilder, selector: "mt-property-filter-builder", inputs: ["schema", "filters", "title", "buttonLabel", "disabled"], outputs: ["filtersChange", "applied", "cleared"] }, { kind: "component", type: StatisticCard, selector: "mt-statistic-card", inputs: ["data", "cardClass"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "actionShape", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, openItemsInModal: { classPropertyName: "openItemsInModal", publicName: "openItemsInModal", isSignal: true, isRequired: false, transformFunction: null }, itemModal: { classPropertyName: "itemModal", publicName: "itemModal", isSignal: true, isRequired: false, transformFunction: null }, generalTaskModal: { classPropertyName: "generalTaskModal", publicName: "generalTaskModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked" }, ngImport: i0, template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"resolvedPageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n      <mt-property-filter-builder\r\n        [schema]=\"propertyFilterSchema()\"\r\n        [filters]=\"context().runtimeFilters\"\r\n        (applied)=\"onRuntimeFiltersApplied($event)\"\r\n        (cleared)=\"onRuntimeFiltersCleared()\"\r\n      />\r\n\r\n      @if (showGeneralTaskCreateButton()) {\r\n        <mt-button\r\n          [label]=\"generalTaskButtonLabel()\"\r\n          [icon]=\"generalTaskButtonIcon()\"\r\n          size=\"small\"\r\n          (onClick)=\"onGeneralTaskCreateClick()\"\r\n        />\r\n      }\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-8\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" cardClass=\"shadow-sm\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"tableColumns()\"\r\n      [lazy]=\"true\"\r\n      [lazyLocalSearch]=\"true\"\r\n      [lazyLocalSort]=\"true\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"true\"\r\n      [exportable]=\"true\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"tableCurrentPage()\"\r\n      [first]=\"tableFirst()\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed"], outputs: ["collapsedChange", "menuItemClick"] }, { kind: "component", type: PropertyFilterBuilder, selector: "mt-property-filter-builder", inputs: ["schema", "filters", "title", "buttonLabel", "disabled"], outputs: ["filtersChange", "applied", "cleared"] }, { kind: "component", type: StatisticCard, selector: "mt-statistic-card", inputs: ["data", "cardClass"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "actionShape", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterPage, decorators: [{
             type: Component,
@@ -1051,7 +1077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         StatisticCard,
                         Table,
                         SkeletonModule,
-                    ], template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"pageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n      <mt-property-filter-builder\r\n        [schema]=\"propertyFilterSchema()\"\r\n        [filters]=\"context().runtimeFilters\"\r\n        (applied)=\"onRuntimeFiltersApplied($event)\"\r\n        (cleared)=\"onRuntimeFiltersCleared()\"\r\n      />\r\n\r\n      @if (showGeneralTaskCreateButton()) {\r\n        <mt-button\r\n          [label]=\"generalTaskButtonLabel()\"\r\n          [icon]=\"generalTaskButtonIcon()\"\r\n          size=\"small\"\r\n          (onClick)=\"onGeneralTaskCreateClick()\"\r\n        />\r\n      }\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-8\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" cardClass=\"shadow-sm\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"tableColumns()\"\n      [lazy]=\"true\"\n      [lazyLocalSearch]=\"true\"\n      [lazyLocalSort]=\"true\"\n      [clickableRows]=\"rowsClickable()\"\n      [loading]=\"loading()\"\n      [lazyTotalRecords]=\"totalCount()\"\n      [showFilters]=\"false\"\n      [generalSearch]=\"true\"\n      [exportable]=\"true\"\n      [pageSize]=\"context().pageSize\"\n      [currentPage]=\"tableCurrentPage()\"\n      [first]=\"tableFirst()\"\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n" }]
+                    ], template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"resolvedPageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n      <mt-property-filter-builder\r\n        [schema]=\"propertyFilterSchema()\"\r\n        [filters]=\"context().runtimeFilters\"\r\n        (applied)=\"onRuntimeFiltersApplied($event)\"\r\n        (cleared)=\"onRuntimeFiltersCleared()\"\r\n      />\r\n\r\n      @if (showGeneralTaskCreateButton()) {\r\n        <mt-button\r\n          [label]=\"generalTaskButtonLabel()\"\r\n          [icon]=\"generalTaskButtonIcon()\"\r\n          size=\"small\"\r\n          (onClick)=\"onGeneralTaskCreateClick()\"\r\n        />\r\n      }\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-8\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" cardClass=\"shadow-sm\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"tableColumns()\"\r\n      [lazy]=\"true\"\r\n      [lazyLocalSearch]=\"true\"\r\n      [lazyLocalSort]=\"true\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"true\"\r\n      [exportable]=\"true\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"tableCurrentPage()\"\r\n      [first]=\"tableFirst()\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], openItemsInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "openItemsInModal", required: false }] }], itemModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemModal", required: false }] }], generalTaskModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "generalTaskModal", required: false }] }], runtimeFiltersChanged: [{ type: i0.Output, args: ["runtimeFiltersChanged"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
 
 function readItemContext(details) {
@@ -1082,23 +1108,30 @@ function readString$1(source, key) {
 
 class WorkCenterEscalationInstanceType {
     http = inject(HttpClient);
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
     loadSub;
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
     activeTab = signal('escalationDetails', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
+    tabOptions = computed(() => {
+        this.activeLang();
+        return [
+            {
+                label: this.transloco.translate('workCenter.tabs.escalationDetails'),
+                value: 'escalationDetails',
+            },
+            {
+                label: this.transloco.translate('workCenter.tabs.schema'),
+                value: 'schema',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : []));
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     preview = signal(null, ...(ngDevMode ? [{ debugName: "preview" }] : []));
-    tabOptions = [
-        {
-            label: 'Escalation Details',
-            value: 'escalationDetails',
-        },
-        {
-            label: 'Schema',
-            value: 'schema',
-        },
-    ];
     detailEntities = computed(() => {
+        this.activeLang();
         const preview = this.preview();
         if (!preview) {
             return [];
@@ -1106,7 +1139,7 @@ class WorkCenterEscalationInstanceType {
         return [
             {
                 key: 'initiatedBy',
-                name: 'Initiated By',
+                name: this.transloco.translate('workCenter.entity.initiatedBy'),
                 value: mapUserValue(preview.initiatedBy),
                 viewType: 'User',
                 order: 1,
@@ -1114,7 +1147,7 @@ class WorkCenterEscalationInstanceType {
             },
             {
                 key: 'startedAt',
-                name: 'Started At',
+                name: this.transloco.translate('workCenter.entity.startedAt'),
                 value: resolveDisplayValue(preview.startedAt),
                 rawValue: resolveRawValue(preview.startedAt),
                 viewType: 'DateTime',
@@ -1123,7 +1156,7 @@ class WorkCenterEscalationInstanceType {
             },
             {
                 key: 'reason',
-                name: 'Reason',
+                name: this.transloco.translate('workCenter.entity.reason'),
                 value: preview.reason ?? '',
                 viewType: 'LongText',
                 order: 3,
@@ -1131,7 +1164,7 @@ class WorkCenterEscalationInstanceType {
             },
             {
                 key: 'attachments',
-                name: 'Attachments',
+                name: this.transloco.translate('workCenter.entity.attachments'),
                 value: mapAttachments(preview.attachments),
                 viewType: 'Attachment',
                 order: 4,
@@ -1139,11 +1172,15 @@ class WorkCenterEscalationInstanceType {
             },
         ];
     }, ...(ngDevMode ? [{ debugName: "detailEntities" }] : []));
-    schemaNodes = computed(() => resolveSchemaSteps(this.preview()).map((step) => ({
-        id: String(step.id),
-        name: resolveTranslatable(step.name) || `Step ${step.id}`,
-        color: step.isFinal ? '#059669' : step.isInitial ? '#2563eb' : '#0f172a',
-    })), ...(ngDevMode ? [{ debugName: "schemaNodes" }] : []));
+    schemaNodes = computed(() => {
+        this.activeLang();
+        return resolveSchemaSteps(this.preview()).map((step) => ({
+            id: String(step.id),
+            name: resolveTranslatable(step.name) ||
+                `${this.transloco.translate('workCenter.entity.step')} ${step.id}`,
+            color: step.isFinal ? '#059669' : step.isInitial ? '#2563eb' : '#0f172a',
+        }));
+    }, ...(ngDevMode ? [{ debugName: "schemaNodes" }] : []));
     schemaConnections = computed(() => (this.preview()?.schema?.connections ?? []).map((connection, index) => ({
         id: String(connection.id ?? `${connection.source}-${connection.target}-${index}`),
         from: String(connection.source),
@@ -1157,6 +1194,9 @@ class WorkCenterEscalationInstanceType {
     canRenderDetails = computed(() => this.resolvedInstanceId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDetails" }] : []));
     canRenderDiscussion = computed(() => this.resolvedInstanceId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDiscussion" }] : []));
     constructor() {
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((lang) => this.activeLang.set(lang));
         effect(() => {
             const instanceId = this.resolvedInstanceId();
             if (instanceId > 0) {
@@ -1186,22 +1226,23 @@ class WorkCenterEscalationInstanceType {
                 this.preview.set(null);
                 this.error.set(error?.error?.message ??
                     error?.message ??
-                    'Failed to load escalation preview');
+                    this.transloco.translate('workCenter.error.failedLoadEscalation'));
             },
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterEscalationInstanceType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterEscalationInstanceType, isStandalone: true, selector: "mt-work-center-escalation-instance-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n>\r\n  @if (tabOptions.length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'escalationDetails'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                Loading escalation details...\r\n              </p>\r\n            </div>\r\n          } @else if (error(); as error) {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-red-600\">\r\n                {{ error }}\r\n              </p>\r\n            </div>\r\n          } @else if (preview()) {\r\n            <mt-entities-preview [entities]=\"detailEntities()\" />\r\n          }\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Escalation details context is not available for this item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Discussion context is not available for this escalation yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderDetails()) {\r\n      @if (loading()) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Loading escalation schema...\r\n          </p>\r\n        </div>\r\n      } @else if (error(); as error) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-red-600\">\r\n            {{ error }}\r\n          </p>\r\n        </div>\r\n      } @else if (hasSchema()) {\r\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\r\n          <mt-structure-builder\r\n            class=\"h-full\"\r\n            [readonly]=\"true\"\r\n            [nodes]=\"schemaNodes()\"\r\n            [connections]=\"schemaConnections()\"\r\n          />\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Escalation schema is not available for this item yet.\r\n          </p>\r\n        </div>\r\n      }\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Escalation schema context is not available for this item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: DiscussionThread, selector: "mt-discussion-thread", inputs: ["moduleType", "recordId", "title", "subtitle", "placeholder", "pageSize", "currentUserId", "requestContext", "mentionableUsers", "mentionSearchEndpoint", "mentionSearchParam", "mentionSearchDataPath", "allowAttachments", "uploadEndpoint", "attachmentDownloadEndpoint", "showParticipants", "autoMarkRead", "refreshIntervalMs", "styleClass", "disabled"], outputs: ["loaded", "errored", "commentCreated", "commentUpdated", "commentDeleted", "readStateChanged"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "availableTabsClass", "layoutDirection", "nodes", "connections", "nodeTemplate"], outputs: ["nodeActionsEvent", "action", "nodesChange", "connectionsChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterEscalationInstanceType, isStandalone: true, selector: "mt-work-center-escalation-instance-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\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  @if (tabOptions().length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions()\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'escalationDetails'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ 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-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-red-600\">\r\n                {{ error }}\r\n              </p>\r\n            </div>\r\n          } @else if (preview()) {\r\n            <mt-entities-preview [entities]=\"detailEntities()\" />\r\n          }\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationDetailsUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderDetails()) {\r\n      @if (loading()) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            {{ 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-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-red-600\">\r\n            {{ error }}\r\n          </p>\r\n        </div>\r\n      } @else if (hasSchema()) {\r\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\r\n          <mt-structure-builder\r\n            class=\"h-full\"\r\n            [readonly]=\"true\"\r\n            [nodes]=\"schemaNodes()\"\r\n            [connections]=\"schemaConnections()\"\r\n          />\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            {{ 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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.escalationSchemaContextUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\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", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: DiscussionThread, selector: "mt-discussion-thread", inputs: ["moduleType", "recordId", "title", "subtitle", "placeholder", "pageSize", "currentUserId", "requestContext", "mentionableUsers", "mentionSearchEndpoint", "mentionSearchParam", "mentionSearchDataPath", "allowAttachments", "uploadEndpoint", "attachmentDownloadEndpoint", "showParticipants", "autoMarkRead", "refreshIntervalMs", "styleClass", "disabled"], outputs: ["loaded", "errored", "commentCreated", "commentUpdated", "commentDeleted", "readStateChanged"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "availableTabsClass", "layoutDirection", "nodes", "connections", "nodeTemplate"], outputs: ["nodeActionsEvent", "action", "nodesChange", "connectionsChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterEscalationInstanceType, decorators: [{
             type: Component,
             args: [{ selector: 'mt-work-center-escalation-instance-type', standalone: true, imports: [
                         CommonModule,
+                        TranslocoDirective,
                         Tabs,
                         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>\r\n  @if (tabOptions.length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'escalationDetails'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                Loading escalation details...\r\n              </p>\r\n            </div>\r\n          } @else if (error(); as error) {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-red-600\">\r\n                {{ error }}\r\n              </p>\r\n            </div>\r\n          } @else if (preview()) {\r\n            <mt-entities-preview [entities]=\"detailEntities()\" />\r\n          }\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Escalation details context is not available for this item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Discussion context is not available for this escalation yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderDetails()) {\r\n      @if (loading()) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Loading escalation schema...\r\n          </p>\r\n        </div>\r\n      } @else if (error(); as error) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-red-600\">\r\n            {{ error }}\r\n          </p>\r\n        </div>\r\n      } @else if (hasSchema()) {\r\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\r\n          <mt-structure-builder\r\n            class=\"h-full\"\r\n            [readonly]=\"true\"\r\n            [nodes]=\"schemaNodes()\"\r\n            [connections]=\"schemaConnections()\"\r\n          />\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            Escalation schema is not available for this item yet.\r\n          </p>\r\n        </div>\r\n      }\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Escalation schema context is not available for this item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+                    ], 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  @if (tabOptions().length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions()\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'escalationDetails'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ 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-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-red-600\">\r\n                {{ error }}\r\n              </p>\r\n            </div>\r\n          } @else if (preview()) {\r\n            <mt-entities-preview [entities]=\"detailEntities()\" />\r\n          }\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationDetailsUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderDetails()) {\r\n      @if (loading()) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            {{ 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-2xl border border-dashed border-red-300 bg-red-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-red-600\">\r\n            {{ error }}\r\n          </p>\r\n        </div>\r\n      } @else if (hasSchema()) {\r\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\r\n          <mt-structure-builder\r\n            class=\"h-full\"\r\n            [readonly]=\"true\"\r\n            [nodes]=\"schemaNodes()\"\r\n            [connections]=\"schemaConnections()\"\r\n          />\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            {{ 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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.escalationSchemaContextUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
 function mapUserValue(value) {
     if (!value || typeof value !== 'object') {
@@ -1286,16 +1327,22 @@ class WorkCenterModuleType {
     actionContext = inject(WorkCenterItemActionContextStore, {
         optional: true,
     });
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
     clientForm = viewChild(ClientForm, ...(ngDevMode ? [{ debugName: "clientForm" }] : []));
     lookups = this.facade.lookups;
     activeTab = signal('details', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
-    tabOptions = [
-        {
-            label: 'Details',
-            value: 'details',
-        },
-    ];
+    activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
+    tabOptions = computed(() => {
+        this.activeLang();
+        return [
+            {
+                label: this.transloco.translate('workCenter.tabs.details'),
+                value: 'details',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : []));
     itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
     instanceId = computed(() => readNumber(this.itemContext(), 'instanceId'), ...(ngDevMode ? [{ debugName: "instanceId" }] : []));
     moduleId = computed(() => readNumber(this.itemContext(), 'moduleId'), ...(ngDevMode ? [{ debugName: "moduleId" }] : []));
@@ -1313,6 +1360,9 @@ class WorkCenterModuleType {
     canRenderDiscussion = computed(() => this.resolvedInstanceId() > 0 &&
         this.discussionModuleType().trim().length > 0, ...(ngDevMode ? [{ debugName: "canRenderDiscussion" }] : []));
     constructor() {
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((lang) => this.activeLang.set(lang));
         effect(() => {
             this.actionContext?.setClientForm(this.clientForm() ?? null);
         });
@@ -1321,11 +1371,17 @@ class WorkCenterModuleType {
         this.actionContext?.setClientForm(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterModuleType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterModuleType, isStandalone: true, selector: "mt-work-center-module-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, 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>\r\n  @if (tabOptions.length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'details'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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            [readonly]=\"true\"\r\n            [lookups]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Module form context is not available for this item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\r\n            <mt-discussion-thread\r\n              [moduleType]=\"discussionModuleType()\"\r\n              [recordId]=\"resolvedInstanceId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Discussion context is not available for this module yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lookups", "ignoredFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }, { kind: "component", type: DiscussionThread, selector: "mt-discussion-thread", inputs: ["moduleType", "recordId", "title", "subtitle", "placeholder", "pageSize", "currentUserId", "requestContext", "mentionableUsers", "mentionSearchEndpoint", "mentionSearchParam", "mentionSearchDataPath", "allowAttachments", "uploadEndpoint", "attachmentDownloadEndpoint", "showParticipants", "autoMarkRead", "refreshIntervalMs", "styleClass", "disabled"], outputs: ["loaded", "errored", "commentCreated", "commentUpdated", "commentDeleted", "readStateChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterModuleType, isStandalone: true, selector: "mt-work-center-module-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div\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  @if (tabOptions().length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions()\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'details'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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            [readonly]=\"true\"\r\n            [lookups]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.moduleFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\r\n            <mt-discussion-thread\r\n              [moduleType]=\"discussionModuleType()\"\r\n              [recordId]=\"resolvedInstanceId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.moduleDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lookups", "ignoredFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }, { kind: "component", type: DiscussionThread, selector: "mt-discussion-thread", inputs: ["moduleType", "recordId", "title", "subtitle", "placeholder", "pageSize", "currentUserId", "requestContext", "mentionableUsers", "mentionSearchEndpoint", "mentionSearchParam", "mentionSearchDataPath", "allowAttachments", "uploadEndpoint", "attachmentDownloadEndpoint", "showParticipants", "autoMarkRead", "refreshIntervalMs", "styleClass", "disabled"], outputs: ["loaded", "errored", "commentCreated", "commentUpdated", "commentDeleted", "readStateChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterModuleType, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-work-center-module-type', standalone: true, imports: [CommonModule, Tabs, ClientForm, DiscussionThread], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n>\r\n  @if (tabOptions.length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'details'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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            [readonly]=\"true\"\r\n            [lookups]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Module form context is not available for this item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\r\n            <mt-discussion-thread\r\n              [moduleType]=\"discussionModuleType()\"\r\n              [recordId]=\"resolvedInstanceId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Discussion context is not available for this module yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-work-center-module-type', standalone: true, imports: [
+                        CommonModule,
+                        TranslocoDirective,
+                        Tabs,
+                        ClientForm,
+                        DiscussionThread,
+                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  @if (tabOptions().length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions()\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'details'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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            [readonly]=\"true\"\r\n            [lookups]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.moduleFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\r\n            <mt-discussion-thread\r\n              [moduleType]=\"discussionModuleType()\"\r\n              [recordId]=\"resolvedInstanceId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.moduleDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
 
 class WorkCenterProcessPreview {
@@ -1441,24 +1497,30 @@ class WorkCenterProcessRequestType {
     actionContext = inject(WorkCenterItemActionContextStore, {
         optional: true,
     });
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
     clientForm = viewChild(ClientForm, ...(ngDevMode ? [{ debugName: "clientForm" }] : []));
     lookups = this.facade.lookups;
     activeTab = signal('requestDetails', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
-    tabOptions = [
-        {
-            label: 'Request Details',
-            value: 'requestDetails',
-        },
-        {
-            label: 'Approvals',
-            value: 'approvals',
-        },
-        {
-            label: 'Steps',
-            value: 'schema',
-        },
-    ];
+    activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
+    tabOptions = computed(() => {
+        this.activeLang();
+        return [
+            {
+                label: this.transloco.translate('workCenter.tabs.requestDetails'),
+                value: 'requestDetails',
+            },
+            {
+                label: this.transloco.translate('workCenter.tabs.approvals'),
+                value: 'approvals',
+            },
+            {
+                label: this.transloco.translate('workCenter.tabs.steps'),
+                value: 'schema',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : []));
     itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
     requestId = computed(() => readNumber(this.itemContext(), 'requestId') ??
         readNumber(this.itemContext(), 'draftProcessId'), ...(ngDevMode ? [{ debugName: "requestId" }] : []));
@@ -1476,6 +1538,9 @@ class WorkCenterProcessRequestType {
     canRenderDiscussion = computed(() => this.discussionRecordId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDiscussion" }] : []));
     canRenderPreview = computed(() => (this.requestId() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "canRenderPreview" }] : []));
     constructor() {
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((lang) => this.activeLang.set(lang));
         effect(() => {
             this.actionContext?.setClientForm(this.clientForm() ?? null);
         });
@@ -1484,17 +1549,18 @@ class WorkCenterProcessRequestType {
         this.actionContext?.setClientForm(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessRequestType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterProcessRequestType, isStandalone: true, selector: "mt-work-center-process-request-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, 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>\r\n  @if (tabOptions.length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'requestDetails'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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]=\"true\"\r\n            [lookups]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Process form context is not available for this item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Discussion context is not available for this process request yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process request yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process request yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lookups", "ignoredFieldKeys"], 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.0.3", type: WorkCenterProcessRequestType, isStandalone: true, selector: "mt-work-center-process-request-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, 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  @if (tabOptions().length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions()\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'requestDetails'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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]=\"true\"\r\n            [lookups]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Process form context is not available for this item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.requestFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.requestPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.requestPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\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", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lookups", "ignoredFieldKeys"], 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.0.3", ngImport: i0, type: WorkCenterProcessRequestType, decorators: [{
             type: Component,
             args: [{ selector: 'mt-work-center-process-request-type', standalone: true, imports: [
                         CommonModule,
+                        TranslocoDirective,
                         Tabs,
                         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>\r\n  @if (tabOptions.length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'requestDetails'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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]=\"true\"\r\n            [lookups]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Process form context is not available for this item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Discussion context is not available for this process request yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process request yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process request yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</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  @if (tabOptions().length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions()\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'requestDetails'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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]=\"true\"\r\n            [lookups]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Process form context is not available for this item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.requestFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.requestPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.requestPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
 
 class WorkCenterProcessStepType {
@@ -1502,24 +1568,30 @@ class WorkCenterProcessStepType {
     actionContext = inject(WorkCenterItemActionContextStore, {
         optional: true,
     });
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
     clientForm = viewChild(ClientForm, ...(ngDevMode ? [{ debugName: "clientForm" }] : []));
     lookups = this.facade.lookups;
     activeTab = signal('form', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
-    tabOptions = [
-        {
-            label: 'Form',
-            value: 'form',
-        },
-        {
-            label: 'Approvals',
-            value: 'approvals',
-        },
-        {
-            label: 'Steps',
-            value: 'schema',
-        },
-    ];
+    activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
+    tabOptions = computed(() => {
+        this.activeLang();
+        return [
+            {
+                label: this.transloco.translate('workCenter.tabs.form'),
+                value: 'form',
+            },
+            {
+                label: this.transloco.translate('workCenter.tabs.approvals'),
+                value: 'approvals',
+            },
+            {
+                label: this.transloco.translate('workCenter.tabs.steps'),
+                value: 'schema',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : []));
     itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
     requestId = computed(() => readNumber(this.itemContext(), 'requestId') ??
         readNumber(this.itemContext(), 'draftProcessId'), ...(ngDevMode ? [{ debugName: "requestId" }] : []));
@@ -1537,6 +1609,9 @@ class WorkCenterProcessStepType {
     canRenderDiscussion = computed(() => this.discussionRecordId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDiscussion" }] : []));
     canRenderPreview = computed(() => (this.requestId() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "canRenderPreview" }] : []));
     constructor() {
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((lang) => this.activeLang.set(lang));
         effect(() => {
             this.actionContext?.setClientForm(this.clientForm() ?? null);
         });
@@ -1545,53 +1620,66 @@ class WorkCenterProcessStepType {
         this.actionContext?.setClientForm(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessStepType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterProcessStepType, isStandalone: true, selector: "mt-work-center-process-step-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n>\r\n  @if (tabOptions.length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'form'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Process form context is not available for this item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Discussion context is not available for this process item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lookups", "ignoredFieldKeys"], 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.0.3", type: WorkCenterProcessStepType, isStandalone: true, selector: "mt-work-center-process-step-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div\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  @if (tabOptions().length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions()\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'form'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.processPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.processPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\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", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lookups", "ignoredFieldKeys"], 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.0.3", ngImport: i0, type: WorkCenterProcessStepType, decorators: [{
             type: Component,
             args: [{ selector: 'mt-work-center-process-step-type', standalone: true, imports: [
                         CommonModule,
+                        TranslocoDirective,
                         Tabs,
                         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>\r\n  @if (tabOptions.length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'form'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Process form context is not available for this item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Discussion context is not available for this process item yet.\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process preview is not available for this process item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</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  @if (tabOptions().length > 1) {\r\n    <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions()\" />\r\n  }\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 lg:overflow-hidden\"\r\n    [hidden]=\"activeTab() !== 'form'\"\r\n  >\r\n    <div\r\n      class=\"grid gap-4 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)] lg:items-stretch xl:grid-cols-[minmax(0,1fr)_28rem]\"\r\n    >\r\n      <div\r\n        class=\"min-w-0 lg: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]=\"lookups()\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-2xl border border-surface-200 bg-surface-50 lg:min-h-0\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div class=\"h-[32rem] min-h-[22rem] lg:h-full lg:min-h-0\">\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 h-full min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\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-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.processPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1 min-h-0 overflow-auto\" [hidden]=\"activeTab() !== 'schema'\">\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'schema'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.processPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
 
 class WorkCenterItemModal {
     details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModal, isStandalone: true, selector: "mt-work-center-item-modal", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: "@if (details().type === \"ProcessStep\") {\r\n  <mt-work-center-process-step-type [details]=\"details()\" />\r\n} @else if (details().type === \"ProcessRequest\") {\r\n  <mt-work-center-process-request-type [details]=\"details()\" />\r\n} @else if (details().type === \"EscalationInstance\") {\r\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\r\n} @else if (details().type === \"Module\") {\r\n  <mt-work-center-module-type [details]=\"details()\" />\r\n} @else {\r\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\r\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WorkCenterProcessStepType, selector: "mt-work-center-process-step-type", inputs: ["details"] }, { kind: "component", type: WorkCenterProcessRequestType, selector: "mt-work-center-process-request-type", inputs: ["details"] }, { kind: "component", type: WorkCenterEscalationInstanceType, selector: "mt-work-center-escalation-instance-type", inputs: ["details"] }, { kind: "component", type: WorkCenterModuleType, selector: "mt-work-center-module-type", inputs: ["details"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModal, isStandalone: true, selector: "mt-work-center-item-modal", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  @if (details().type === \"ProcessStep\") {\r\n    <mt-work-center-process-step-type [details]=\"details()\" />\r\n  } @else if (details().type === \"ProcessRequest\") {\r\n    <mt-work-center-process-request-type [details]=\"details()\" />\r\n  } @else if (details().type === \"EscalationInstance\") {\r\n    <mt-work-center-escalation-instance-type [details]=\"details()\" />\r\n  } @else if (details().type === \"Module\") {\r\n    <mt-work-center-module-type [details]=\"details()\" />\r\n  } @else {\r\n    <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\r\n      <p class=\"text-sm text-surface-500\">{{ t(\"modal.unsupportedType\") }}</p>\r\n    </div>\r\n  }\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: WorkCenterProcessStepType, selector: "mt-work-center-process-step-type", inputs: ["details"] }, { kind: "component", type: WorkCenterProcessRequestType, selector: "mt-work-center-process-request-type", inputs: ["details"] }, { kind: "component", type: WorkCenterEscalationInstanceType, selector: "mt-work-center-escalation-instance-type", inputs: ["details"] }, { kind: "component", type: WorkCenterModuleType, selector: "mt-work-center-module-type", inputs: ["details"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModal, decorators: [{
             type: Component,
             args: [{ selector: 'mt-work-center-item-modal', standalone: true, imports: [
                         CommonModule,
+                        TranslocoDirective,
                         WorkCenterProcessStepType,
                         WorkCenterProcessRequestType,
                         WorkCenterEscalationInstanceType,
                         WorkCenterModuleType,
                     ], host: {
                         class: 'block h-full min-h-0',
-                    }, template: "@if (details().type === \"ProcessStep\") {\r\n  <mt-work-center-process-step-type [details]=\"details()\" />\r\n} @else if (details().type === \"ProcessRequest\") {\r\n  <mt-work-center-process-request-type [details]=\"details()\" />\r\n} @else if (details().type === \"EscalationInstance\") {\r\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\r\n} @else if (details().type === \"Module\") {\r\n  <mt-work-center-module-type [details]=\"details()\" />\r\n} @else {\r\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\r\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\r\n  </div>\r\n}\r\n" }]
+                    }, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  @if (details().type === \"ProcessStep\") {\r\n    <mt-work-center-process-step-type [details]=\"details()\" />\r\n  } @else if (details().type === \"ProcessRequest\") {\r\n    <mt-work-center-process-request-type [details]=\"details()\" />\r\n  } @else if (details().type === \"EscalationInstance\") {\r\n    <mt-work-center-escalation-instance-type [details]=\"details()\" />\r\n  } @else if (details().type === \"Module\") {\r\n    <mt-work-center-module-type [details]=\"details()\" />\r\n  } @else {\r\n    <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\r\n      <p class=\"text-sm text-surface-500\">{{ t(\"modal.unsupportedType\") }}</p>\r\n    </div>\r\n  }\r\n</ng-container>\r\n" }]
         }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
 
 class WorkCenterItemActionConfirmDialog {
     ref = inject(ModalRef);
     modal = inject(ModalService);
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
+    activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
     action = input.required(...(ngDevMode ? [{ debugName: "action" }] : []));
     formControl = new FormControl({});
     actionLabel = computed(() => this.action().actionName?.display || this.action().actionKey, ...(ngDevMode ? [{ debugName: "actionLabel" }] : []));
-    formConfig = computed(() => ({
-        sections: [
-            {
-                key: 'action-confirmation',
-                type: 'none',
-                fields: buildActionFields(this.action()),
-            },
-        ],
-    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    formConfig = computed(() => {
+        this.activeLang();
+        return {
+            sections: [
+                {
+                    key: 'action-confirmation',
+                    type: 'none',
+                    fields: buildActionFields(this.action(), (key) => this.transloco.translate(key)),
+                },
+            ],
+        };
+    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     hasFormFields = computed(() => this.formConfig().sections[0]?.fields.length > 0, ...(ngDevMode ? [{ debugName: "hasFormFields" }] : []));
+    constructor() {
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((lang) => this.activeLang.set(lang));
+    }
     onCancel() {
         this.ref.close(null);
     }
@@ -1603,13 +1691,19 @@ class WorkCenterItemActionConfirmDialog {
         this.ref.close(this.formControl.getRawValue() ?? {});
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemActionConfirmDialog, isStandalone: true, selector: "mt-work-center-item-action-confirm-dialog", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"modal.contentClass + ' p-4'\">\r\n  @if (hasFormFields()) {\r\n    <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"formControl\" />\r\n  } @else {\r\n    <p class=\"text-sm text-surface-500\">\r\n      Confirm {{ actionLabel() }} for this item.\r\n    </p>\r\n  }\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass\">\r\n  <mt-button\r\n    label=\"Cancel\"\r\n    severity=\"secondary\"\r\n    variant=\"outlined\"\r\n    (onClick)=\"onCancel()\"\r\n  />\r\n  <mt-button [label]=\"actionLabel()\" (onClick)=\"onConfirm()\" />\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemActionConfirmDialog, isStandalone: true, selector: "mt-work-center-item-action-confirm-dialog", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  <div [class]=\"modal.contentClass + ' p-4'\">\r\n    @if (hasFormFields()) {\r\n      <mt-dynamic-form\r\n        [formConfig]=\"formConfig()\"\r\n        [formControl]=\"formControl\"\r\n      />\r\n    } @else {\r\n      <p class=\"text-sm text-surface-500\">\r\n        {{ t(\"modal.confirmAction\", { action: actionLabel() }) }}\r\n      </p>\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      severity=\"secondary\"\r\n      variant=\"outlined\"\r\n      (onClick)=\"onCancel()\"\r\n    />\r\n    <mt-button [label]=\"actionLabel()\" (onClick)=\"onConfirm()\" />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionConfirmDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-work-center-item-action-confirm-dialog', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicForm, Button], template: "<div [class]=\"modal.contentClass + ' p-4'\">\r\n  @if (hasFormFields()) {\r\n    <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"formControl\" />\r\n  } @else {\r\n    <p class=\"text-sm text-surface-500\">\r\n      Confirm {{ actionLabel() }} for this item.\r\n    </p>\r\n  }\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass\">\r\n  <mt-button\r\n    label=\"Cancel\"\r\n    severity=\"secondary\"\r\n    variant=\"outlined\"\r\n    (onClick)=\"onCancel()\"\r\n  />\r\n  <mt-button [label]=\"actionLabel()\" (onClick)=\"onConfirm()\" />\r\n</div>\r\n" }]
-        }], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: true }] }] } });
-function buildActionFields(action) {
+            args: [{ selector: 'mt-work-center-item-action-confirm-dialog', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        DynamicForm,
+                        Button,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  <div [class]=\"modal.contentClass + ' p-4'\">\r\n    @if (hasFormFields()) {\r\n      <mt-dynamic-form\r\n        [formConfig]=\"formConfig()\"\r\n        [formControl]=\"formControl\"\r\n      />\r\n    } @else {\r\n      <p class=\"text-sm text-surface-500\">\r\n        {{ t(\"modal.confirmAction\", { action: actionLabel() }) }}\r\n      </p>\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      severity=\"secondary\"\r\n      variant=\"outlined\"\r\n      (onClick)=\"onCancel()\"\r\n    />\r\n    <mt-button [label]=\"actionLabel()\" (onClick)=\"onConfirm()\" />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: true }] }] } });
+function buildActionFields(action, t) {
     const requestedKeys = new Set(action.payloadKeys ?? []);
     const requiredKeys = new Set(action.requiredPayloadKeys ?? []);
     const fields = [];
@@ -1618,7 +1712,7 @@ function buildActionFields(action) {
         fields.push({
             key: 'progress',
             type: 'slider',
-            label: 'Progress',
+            label: t('workCenter.field.progress'),
             min: 0,
             max: 100,
             step: 1,
@@ -1632,8 +1726,8 @@ function buildActionFields(action) {
         fields.push({
             key: 'delegatedUser',
             type: 'user-search',
-            label: 'Delegated User',
-            placeholder: 'Search user',
+            label: t('workCenter.field.delegatedUser'),
+            placeholder: t('workCenter.field.delegatedUserPlaceholder'),
             apiUrl: 'Identity/users',
             optionLabel: 'displayName',
             optionValue: 'id',
@@ -1645,8 +1739,8 @@ function buildActionFields(action) {
         fields.push({
             key: 'reason',
             type: 'textarea',
-            label: 'Reason',
-            placeholder: 'Enter reason',
+            label: t('workCenter.field.reason'),
+            placeholder: t('workCenter.field.reasonPlaceholder'),
             rows: 4,
             validators: buildRequiredValidators(requiredKeys.has('reason')),
             colSpan: 12,
@@ -1656,8 +1750,8 @@ function buildActionFields(action) {
         fields.push({
             key: 'note',
             type: 'textarea',
-            label: 'Note',
-            placeholder: 'Enter note',
+            label: t('workCenter.field.note'),
+            placeholder: t('workCenter.field.notePlaceholder'),
             rows: 4,
             validators: buildRequiredValidators(requiredKeys.has('note')),
             colSpan: 12,
@@ -1667,11 +1761,11 @@ function buildActionFields(action) {
         fields.push({
             key: 'attachments',
             type: 'upload-file',
-            label: 'Attachments',
+            label: t('workCenter.field.attachments'),
             endPoint: 'uploader',
             multiple: true,
-            title: 'Upload Attachment',
-            description: 'Click or drop a file to upload',
+            title: t('workCenter.field.uploadTitle'),
+            description: t('workCenter.field.uploadDescription'),
             validators: buildRequiredValidators(requiredKeys.has('attachments')),
             colSpan: 12,
         });
@@ -1983,13 +2077,13 @@ class WorkCenterItemModalFooterActions {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModalFooterActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModalFooterActions, isStandalone: true, selector: "mt-work-center-item-modal-footer-actions", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted", visibilityChange: "visibilityChange" }, host: { classAttribute: "flex w-full flex-1 flex-wrap items-center justify-end gap-2" }, ngImport: i0, template: "@if (shouldRender()) {\r\n  @if (error(); as error) {\r\n    <span class=\"me-auto max-w-md text-sm text-red-600\">\r\n      {{ error }}\r\n    </span>\r\n  } @else if (loading() && !displayActions().length) {\r\n    <span class=\"me-auto text-sm text-surface-500\">Loading actions...</span>\r\n  }\r\n\r\n  @for (action of displayActions(); track action.actionKey + action.url) {\r\n    <mt-button\r\n      [label]=\"action.label\"\r\n      [severity]=\"action.severity\"\r\n      [variant]=\"action.variant\"\r\n      [disabled]=\"loading() || !!pendingActionKey()\"\r\n      [loading]=\"pendingActionKey() === action.actionKey\"\r\n      (onClick)=\"executeAction(action)\"\r\n    />\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModalFooterActions, isStandalone: true, selector: "mt-work-center-item-modal-footer-actions", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted", visibilityChange: "visibilityChange" }, host: { classAttribute: "flex w-full flex-1 flex-wrap items-center justify-end gap-2" }, ngImport: i0, template: "<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    @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.0.3", ngImport: i0, type: WorkCenterItemModalFooterActions, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-work-center-item-modal-footer-actions', standalone: true, imports: [CommonModule, Button], host: {
+            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: "@if (shouldRender()) {\r\n  @if (error(); as error) {\r\n    <span class=\"me-auto max-w-md text-sm text-red-600\">\r\n      {{ error }}\r\n    </span>\r\n  } @else if (loading() && !displayActions().length) {\r\n    <span class=\"me-auto text-sm text-surface-500\">Loading actions...</span>\r\n  }\r\n\r\n  @for (action of displayActions(); track action.actionKey + action.url) {\r\n    <mt-button\r\n      [label]=\"action.label\"\r\n      [severity]=\"action.severity\"\r\n      [variant]=\"action.variant\"\r\n      [disabled]=\"loading() || !!pendingActionKey()\"\r\n      [loading]=\"pendingActionKey() === action.actionKey\"\r\n      (onClick)=\"executeAction(action)\"\r\n    />\r\n  }\r\n}\r\n" }]
+                    }, 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    @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 }] }], actionExecuted: [{ type: i0.Output, args: ["actionExecuted"] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }] } });
 function buildRequestOptions(method, payload) {
     if (!payload || !methodSupportsBody(method)) {
@@ -2125,6 +2219,7 @@ class WorkCenterItemModalRoute {
     http = inject(HttpClient);
     router = inject(Router);
     route = inject(ActivatedRoute);
+    transloco = inject(TranslocoService);
     modal = inject(ModalService);
     contextKey = input(null, ...(ngDevMode ? [{ debugName: "contextKey" }] : []));
     drawerVisible = signal(true, ...(ngDevMode ? [{ debugName: "drawerVisible" }] : []));
@@ -2134,7 +2229,8 @@ class WorkCenterItemModalRoute {
     detailsReloadTick = signal(0, ...(ngDevMode ? [{ debugName: "detailsReloadTick" }] : []));
     footerActionsMounted = signal(false, ...(ngDevMode ? [{ debugName: "footerActionsMounted" }] : []));
     resolvedContextKey = computed(() => this.decodeContextKey(this.contextKey()), ...(ngDevMode ? [{ debugName: "resolvedContextKey" }] : []));
-    drawerTitle = computed(() => this.readDisplayField(this.details()?.item, 'title') ?? 'Item Details', ...(ngDevMode ? [{ debugName: "drawerTitle" }] : []));
+    drawerTitle = computed(() => this.readDisplayField(this.details()?.item, 'title') ||
+        this.transloco.translate('workCenter.page.itemDetails'), ...(ngDevMode ? [{ debugName: "drawerTitle" }] : []));
     drawerSubtitle = computed(() => this.readDisplayField(this.details()?.item, 'subtitle') ?? '', ...(ngDevMode ? [{ debugName: "drawerSubtitle" }] : []));
     constructor() {
         effect(() => {
@@ -2185,7 +2281,7 @@ class WorkCenterItemModalRoute {
                     });
                     this.error.set(error instanceof Error
                         ? error.message
-                        : 'Failed to load item details.');
+                        : this.transloco.translate('workCenter.error.failedLoadDetails'));
                     this.loading.set(false);
                 },
             });
@@ -2260,17 +2356,18 @@ class WorkCenterItemModalRoute {
             : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModalRoute, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModalRoute, isStandalone: true, selector: "mt-work-center-item-modal-route", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, providers: [WorkCenterItemActionContextStore], ngImport: i0, template: "<mt-drawer\r\n  [visible]=\"drawerVisible()\"\r\n  [loadingHeader]=\"loading()\"\r\n  [title]=\"drawerTitle()\"\r\n  [subtitle]=\"drawerSubtitle()\"\r\n  styleClass=\"mt-work-center-item-drawer !absolute !w-[90%]\"\r\n  position=\"right\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\r\n          <div class=\"flex items-center gap-3\">\r\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\r\n            <div class=\"flex flex-1 flex-col gap-2\">\r\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\r\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid gap-3 md:grid-cols-2\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"5rem\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\r\n        <mt-work-center-item-modal [details]=\"details\" />\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\">No item selected.</p>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n\r\n  @if (footerActionsMounted()) {\r\n    <div footer [class]=\"modal.footerClass\">\r\n      <mt-work-center-item-modal-footer-actions\r\n        [contextKey]=\"resolvedContextKey()\"\r\n        (actionExecuted)=\"onActionExecuted($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: "component", type: Drawer, selector: "mt-drawer", inputs: ["visible", "position", "fullScreen", "closeOnEscape", "blockScroll", "dismissible", "title", "subtitle", "loadingHeader", "styleClass", "transitionOptions", "appendTo", "modal"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: WorkCenterItemModal, selector: "mt-work-center-item-modal", inputs: ["details"] }, { kind: "component", type: WorkCenterItemModalFooterActions, selector: "mt-work-center-item-modal-footer-actions", inputs: ["contextKey"], outputs: ["actionExecuted", "visibilityChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModalRoute, isStandalone: true, selector: "mt-work-center-item-modal-route", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, providers: [WorkCenterItemActionContextStore], ngImport: i0, template: "<mt-drawer\r\n  [visible]=\"drawerVisible()\"\r\n  [loadingHeader]=\"loading()\"\r\n  [title]=\"drawerTitle()\"\r\n  [subtitle]=\"drawerSubtitle()\"\r\n  styleClass=\"mt-work-center-item-drawer !absolute !w-[90%]\"\r\n  position=\"right\"\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\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\r\n        <mt-work-center-item-modal [details]=\"details\" />\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        (actionExecuted)=\"onActionExecuted($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"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: WorkCenterItemModal, selector: "mt-work-center-item-modal", inputs: ["details"] }, { kind: "component", type: WorkCenterItemModalFooterActions, selector: "mt-work-center-item-modal-footer-actions", inputs: ["contextKey"], outputs: ["actionExecuted", "visibilityChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModalRoute, decorators: [{
             type: Component,
             args: [{ selector: 'mt-work-center-item-modal-route', standalone: true, imports: [
                         CommonModule,
+                        TranslocoDirective,
                         Drawer,
                         SkeletonModule,
                         WorkCenterItemModal,
                         WorkCenterItemModalFooterActions,
-                    ], providers: [WorkCenterItemActionContextStore], template: "<mt-drawer\r\n  [visible]=\"drawerVisible()\"\r\n  [loadingHeader]=\"loading()\"\r\n  [title]=\"drawerTitle()\"\r\n  [subtitle]=\"drawerSubtitle()\"\r\n  styleClass=\"mt-work-center-item-drawer !absolute !w-[90%]\"\r\n  position=\"right\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\r\n          <div class=\"flex items-center gap-3\">\r\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\r\n            <div class=\"flex flex-1 flex-col gap-2\">\r\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\r\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid gap-3 md:grid-cols-2\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"5rem\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\r\n        <mt-work-center-item-modal [details]=\"details\" />\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\">No item selected.</p>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n\r\n  @if (footerActionsMounted()) {\r\n    <div footer [class]=\"modal.footerClass\">\r\n      <mt-work-center-item-modal-footer-actions\r\n        [contextKey]=\"resolvedContextKey()\"\r\n        (actionExecuted)=\"onActionExecuted($event)\"\r\n        (visibilityChange)=\"onFooterVisibilityChange($event)\"\r\n      />\r\n    </div>\r\n  }\r\n</mt-drawer>\r\n" }]
+                    ], providers: [WorkCenterItemActionContextStore], template: "<mt-drawer\r\n  [visible]=\"drawerVisible()\"\r\n  [loadingHeader]=\"loading()\"\r\n  [title]=\"drawerTitle()\"\r\n  [subtitle]=\"drawerSubtitle()\"\r\n  styleClass=\"mt-work-center-item-drawer !absolute !w-[90%]\"\r\n  position=\"right\"\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\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\r\n        <mt-work-center-item-modal [details]=\"details\" />\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        (actionExecuted)=\"onActionExecuted($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 }] }] } });
 
 const APP_STATES = [WorkCenterState];