@masterteam/work-center 0.0.20 → 0.0.22

package/fesm2022/masterteam-work-center.mjs

@@ -90,7 +90,7 @@ class WorkCenterClientFormModal {
         return undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterClientFormModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterClientFormModal, isStandalone: true, selector: "mt-work-center-client-form-modal", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "processForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  <div [class]=\"modal.contentClass + ' p-5 flex flex-col gap-4'\">\r\n    <mt-client-form\r\n      [moduleKey]=\"moduleKey()\"\r\n      [moduleId]=\"moduleId()\"\r\n      [operationKey]=\"operationKey()\"\r\n      [levelId]=\"levelId()\"\r\n      [levelDataId]=\"levelDataId()\"\r\n      [moduleDataId]=\"moduleDataId()\"\r\n      [formMode]=\"formMode()\"\r\n      [autoLoad]=\"true\"\r\n      [lookups]=\"lookups()\"\r\n      (submitted)=\"onSubmitted($event)\"\r\n      (errored)=\"onErrored($event)\"\r\n    />\r\n\r\n    @if (isSubmitting()) {\r\n      <div class=\"text-sm text-muted-color\">{{ t(\"modal.submitting\") }}</div>\r\n    }\r\n\r\n    @if (validationMessage()) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-700\"\r\n        role=\"alert\"\r\n      >\r\n        {{ validationMessage() }}\r\n      </div>\r\n    }\r\n\r\n    @if (submitError()) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        role=\"alert\"\r\n      >\r\n        {{ submitError() }}\r\n      </div>\r\n    }\r\n\r\n    @if (submitStatus(); as status) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border p-3 text-sm\"\r\n        [class]=\"\r\n          status === 'pending'\r\n            ? 'border-amber-200 bg-amber-50 text-amber-700'\r\n            : 'border-emerald-200 bg-emerald-50 text-emerald-700'\r\n        \"\r\n      >\r\n        @if (status === \"pending\") {\r\n          {{ t(\"modal.requestSubmitted\") }}\r\n        } @else {\r\n          {{ t(\"modal.operationExecuted\") }}\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('modal.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", "defaultValues", "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.2.8", type: WorkCenterClientFormModal, isStandalone: true, selector: "mt-work-center-client-form-modal", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "processForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workCenter'\">\r\n  <div [class]=\"modal.contentClass + ' p-5 flex flex-col gap-4'\">\r\n    <mt-client-form\r\n      [moduleKey]=\"moduleKey()\"\r\n      [moduleId]=\"moduleId()\"\r\n      [operationKey]=\"operationKey()\"\r\n      [levelId]=\"levelId()\"\r\n      [levelDataId]=\"levelDataId()\"\r\n      [moduleDataId]=\"moduleDataId()\"\r\n      [formMode]=\"formMode()\"\r\n      [autoLoad]=\"true\"\r\n      [lookups]=\"lookups()\"\r\n      (submitted)=\"onSubmitted($event)\"\r\n      (errored)=\"onErrored($event)\"\r\n    />\r\n\r\n    @if (isSubmitting()) {\r\n      <div class=\"text-sm text-muted-color\">{{ t(\"modal.submitting\") }}</div>\r\n    }\r\n\r\n    @if (validationMessage()) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-700\"\r\n        role=\"alert\"\r\n      >\r\n        {{ validationMessage() }}\r\n      </div>\r\n    }\r\n\r\n    @if (submitError()) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        role=\"alert\"\r\n      >\r\n        {{ submitError() }}\r\n      </div>\r\n    }\r\n\r\n    @if (submitStatus(); as status) {\r\n      <div\r\n        class=\"mt-2 rounded-lg border p-3 text-sm\"\r\n        [class]=\"\r\n          status === 'pending'\r\n            ? 'border-amber-200 bg-amber-50 text-amber-700'\r\n            : 'border-emerald-200 bg-emerald-50 text-emerald-700'\r\n        \"\r\n      >\r\n        @if (status === \"pending\") {\r\n          {{ t(\"modal.requestSubmitted\") }}\r\n        } @else {\r\n          {{ t(\"modal.operationExecuted\") }}\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('modal.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", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "lookups", "ignoredFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterClientFormModal, decorators: [{
             type: Component,
@@ -1016,7 +1016,7 @@ class WorkCenterPage {
             this.transloco.translate('workCenter.page.title'));
     }, ...(ngDevMode ? [{ debugName: "resolvedPageTitle" }] : /* istanbul ignore next */ []));
     generalTaskButtonIcon = computed(() => this.generalTaskModal()?.buttonIcon?.trim() || 'general.plus', ...(ngDevMode ? [{ debugName: "generalTaskButtonIcon" }] : /* istanbul ignore next */ []));
-    defaultModalStyleClass = '!w-[96vw] xl:!w-[calc(100%-8rem)] 2xl:!w-[calc(100%-12rem)] !shadow-none';
+    defaultModalStyleClass = '!w-[96vw] md:!w-[84vw] xl:!w-[70vw] !shadow-none';
     defaultGeneralTaskModalStyleClass = '!w-[70vw] !h-[90vh]';
     constructor() {
         this.transloco.langChanges$
@@ -1121,7 +1121,7 @@ class WorkCenterPage {
         return normalized.length ? normalized : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, openItemsInModal: { classPropertyName: "openItemsInModal", publicName: "openItemsInModal", isSignal: true, isRequired: false, transformFunction: null }, itemModal: { classPropertyName: "itemModal", publicName: "itemModal", isSignal: true, isRequired: false, transformFunction: null }, generalTaskModal: { classPropertyName: "generalTaskModal", publicName: "generalTaskModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked" }, ngImport: i0, template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"resolvedPageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  storageKey=\"work-center-client-page\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n      <mt-property-filter-builder\r\n        [schema]=\"propertyFilterSchema()\"\r\n        [filters]=\"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\" class=\"rounded-lg\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div class=\"gap-3 flex flex-wrap\">\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" class=\"min-w-1/5\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"tableColumns()\"\r\n      tableLayout=\"auto\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"true\"\r\n      [exportable]=\"true\"\r\n      [pageSize]=\"5\"\r\n      [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\r\n      storageKey=\"work-center-page-table\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed", "resizable", "storageKey", "storageMode", "minSidebarWidth", "maxSidebarWidth", "defaultSidebarWidth"], outputs: ["collapsedChange", "menuItemClick"] }, { 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", "storageKey", "storageMode", "exportable", "exportFilename", "actionShape", "tableLayout", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "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.2.8", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, openItemsInModal: { classPropertyName: "openItemsInModal", publicName: "openItemsInModal", isSignal: true, isRequired: false, transformFunction: null }, itemModal: { classPropertyName: "itemModal", publicName: "itemModal", isSignal: true, isRequired: false, transformFunction: null }, generalTaskModal: { classPropertyName: "generalTaskModal", publicName: "generalTaskModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked" }, ngImport: i0, template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"resolvedPageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  storageKey=\"work-center-client-page\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n      <mt-property-filter-builder\r\n        [schema]=\"propertyFilterSchema()\"\r\n        [filters]=\"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\" class=\"rounded-lg\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div class=\"gap-3 flex flex-wrap\">\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" class=\"min-w-1/5\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      noCard\r\n      [data]=\"rows()\"\r\n      [columns]=\"tableColumns()\"\r\n      tableLayout=\"auto\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"true\"\r\n      [exportable]=\"true\"\r\n      [pageSize]=\"5\"\r\n      [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\r\n      storageKey=\"work-center-page-table\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed", "resizable", "storageKey", "storageMode", "minSidebarWidth", "maxSidebarWidth", "defaultSidebarWidth"], outputs: ["collapsedChange", "menuItemClick"] }, { 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", "storageKey", "storageMode", "exportable", "exportFilename", "actionShape", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "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.2.8", ngImport: i0, type: WorkCenterPage, decorators: [{
             type: Component,
@@ -1133,7 +1133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         StatisticCard,
                         Table,
                         SkeletonModule,
-                    ], template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"resolvedPageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  storageKey=\"work-center-client-page\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n      <mt-property-filter-builder\r\n        [schema]=\"propertyFilterSchema()\"\r\n        [filters]=\"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\" class=\"rounded-lg\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div class=\"gap-3 flex flex-wrap\">\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" class=\"min-w-1/5\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"tableColumns()\"\r\n      tableLayout=\"auto\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"true\"\r\n      [exportable]=\"true\"\r\n      [pageSize]=\"5\"\r\n      [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\r\n      storageKey=\"work-center-page-table\"\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  storageKey=\"work-center-client-page\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n      <mt-property-filter-builder\r\n        [schema]=\"propertyFilterSchema()\"\r\n        [filters]=\"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\" class=\"rounded-lg\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div class=\"gap-3 flex flex-wrap\">\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" class=\"min-w-1/5\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      noCard\r\n      [data]=\"rows()\"\r\n      [columns]=\"tableColumns()\"\r\n      tableLayout=\"auto\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"true\"\r\n      [exportable]=\"true\"\r\n      [pageSize]=\"5\"\r\n      [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\r\n      storageKey=\"work-center-page-table\"\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) {
@@ -1176,10 +1176,17 @@ class WorkCenterEscalationInstanceType {
             {
                 label: this.transloco.translate('workCenter.tabs.escalationDetails'),
                 value: 'escalationDetails',
+                icon: 'alert.notification-message',
             },
             {
                 label: this.transloco.translate('workCenter.tabs.schema'),
                 value: 'schema',
+                icon: 'custom.flow-chart',
+            },
+            {
+                label: this.transloco.translate('workCenter.tabs.discussion'),
+                value: 'discussion',
+                icon: 'custom.discussion-area',
             },
         ];
     }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : /* istanbul ignore next */ []));
@@ -1287,7 +1294,7 @@ class WorkCenterEscalationInstanceType {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterEscalationInstanceType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterEscalationInstanceType, isStandalone: true, selector: "mt-work-center-escalation-instance-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  @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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"loading.escalationDetails\") }}\r\n              </p>\r\n            </div>\r\n          } @else if (error(); as error) {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-red-300 bg-red-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-red-600\">\r\n                {{ error }}\r\n              </p>\r\n            </div>\r\n          } @else if (preview()) {\r\n            <mt-entities-preview [entities]=\"detailEntities()\" />\r\n          }\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationDetailsUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-lg 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            {{ t(\"loading.escalationSchema\") }}\r\n          </p>\r\n        </div>\r\n      } @else if (error(); as error) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-red-300 bg-red-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-red-600\">\r\n            {{ error }}\r\n          </p>\r\n        </div>\r\n      } @else if (hasSchema()) {\r\n        <div class=\"h-[70vh] overflow-hidden rounded-lg\">\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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            {{ t(\"context.escalationSchemaUnavailable\") }}\r\n          </p>\r\n        </div>\r\n      }\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.escalationSchemaContextUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterEscalationInstanceType, isStandalone: true, selector: "mt-work-center-escalation-instance-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'escalationDetails'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderDetails()) {\r\n            @if (loading()) {\r\n              <div\r\n                class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n              >\r\n                <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                  {{ t(\"loading.escalationDetails\") }}\r\n                </p>\r\n              </div>\r\n            } @else if (error(); as error) {\r\n              <div\r\n                class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-red-300 bg-red-50 p-6\"\r\n              >\r\n                <p class=\"max-w-md text-center text-sm text-red-600\">\r\n                  {{ error }}\r\n                </p>\r\n              </div>\r\n            } @else if (preview()) {\r\n              <mt-entities-preview [entities]=\"detailEntities()\" />\r\n            }\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"context.escalationDetailsUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\r\n        @if (canRenderDetails()) {\r\n          @if (loading()) {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"loading.escalationSchema\") }}\r\n              </p>\r\n            </div>\r\n          } @else if (error(); as error) {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-red-300 bg-red-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-red-600\">\r\n                {{ error }}\r\n              </p>\r\n            </div>\r\n          } @else if (hasSchema()) {\r\n            <div\r\n              class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg lg:h-full lg:min-h-0\"\r\n            >\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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"context.escalationSchemaUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationSchemaContextUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\r\n            <mt-discussion-thread\r\n              [moduleType]=\"'EscalationInstance'\"\r\n              [recordId]=\"resolvedInstanceId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "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.2.8", ngImport: i0, type: WorkCenterEscalationInstanceType, decorators: [{
             type: Component,
@@ -1298,7 +1305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         DiscussionThread,
                         EntitiesPreview,
                         StructureBuilder,
-                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  @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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"loading.escalationDetails\") }}\r\n              </p>\r\n            </div>\r\n          } @else if (error(); as error) {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-red-300 bg-red-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-red-600\">\r\n                {{ error }}\r\n              </p>\r\n            </div>\r\n          } @else if (preview()) {\r\n            <mt-entities-preview [entities]=\"detailEntities()\" />\r\n          }\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationDetailsUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-lg 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            {{ t(\"loading.escalationSchema\") }}\r\n          </p>\r\n        </div>\r\n      } @else if (error(); as error) {\r\n        <div\r\n          class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-red-300 bg-red-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-red-600\">\r\n            {{ error }}\r\n          </p>\r\n        </div>\r\n      } @else if (hasSchema()) {\r\n        <div class=\"h-[70vh] overflow-hidden rounded-lg\">\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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n        >\r\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n            {{ t(\"context.escalationSchemaUnavailable\") }}\r\n          </p>\r\n        </div>\r\n      }\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.escalationSchemaContextUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'escalationDetails'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderDetails()) {\r\n            @if (loading()) {\r\n              <div\r\n                class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n              >\r\n                <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                  {{ t(\"loading.escalationDetails\") }}\r\n                </p>\r\n              </div>\r\n            } @else if (error(); as error) {\r\n              <div\r\n                class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-red-300 bg-red-50 p-6\"\r\n              >\r\n                <p class=\"max-w-md text-center text-sm text-red-600\">\r\n                  {{ error }}\r\n                </p>\r\n              </div>\r\n            } @else if (preview()) {\r\n              <mt-entities-preview [entities]=\"detailEntities()\" />\r\n            }\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"context.escalationDetailsUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\r\n        @if (canRenderDetails()) {\r\n          @if (loading()) {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"loading.escalationSchema\") }}\r\n              </p>\r\n            </div>\r\n          } @else if (error(); as error) {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-red-300 bg-red-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-red-600\">\r\n                {{ error }}\r\n              </p>\r\n            </div>\r\n          } @else if (hasSchema()) {\r\n            <div\r\n              class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg lg:h-full lg:min-h-0\"\r\n            >\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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"context.escalationSchemaUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationSchemaContextUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\r\n            <mt-discussion-thread\r\n              [moduleType]=\"'EscalationInstance'\"\r\n              [recordId]=\"resolvedInstanceId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.escalationDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
 function mapUserValue(value) {
     if (!value || typeof value !== 'object') {
@@ -1396,6 +1403,12 @@ class WorkCenterModuleType {
             {
                 label: this.transloco.translate('workCenter.tabs.details'),
                 value: 'details',
+                icon: 'file.folder',
+            },
+            {
+                label: this.transloco.translate('workCenter.tabs.discussion'),
+                value: 'discussion',
+                icon: 'custom.discussion-area',
             },
         ];
     }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : /* istanbul ignore next */ []));
@@ -1427,7 +1440,7 @@ class WorkCenterModuleType {
         this.actionContext?.setClientForm(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterModuleType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterModuleType, isStandalone: true, selector: "mt-work-center-module-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.moduleFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-lg 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.moduleDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "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", "defaultValues", "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.2.8", 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  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'details'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderForm()) {\r\n            <mt-client-form\r\n              [moduleKey]=\"moduleKey()\"\r\n              [operationKey]=\"operationKey()\"\r\n              [moduleId]=\"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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"context.moduleFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\r\n            <mt-discussion-thread\r\n              [moduleType]=\"discussionModuleType()\"\r\n              [recordId]=\"resolvedInstanceId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.moduleDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "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", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "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.2.8", ngImport: i0, type: WorkCenterModuleType, decorators: [{
             type: Component,
@@ -1437,7 +1450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Tabs,
                         ClientForm,
                         DiscussionThread,
-                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  @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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.moduleFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-lg 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.moduleDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'details'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderForm()) {\r\n            <mt-client-form\r\n              [moduleKey]=\"moduleKey()\"\r\n              [operationKey]=\"operationKey()\"\r\n              [moduleId]=\"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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"context.moduleFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\r\n            <mt-discussion-thread\r\n              [moduleType]=\"discussionModuleType()\"\r\n              [recordId]=\"resolvedInstanceId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.moduleDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
 
 class WorkCenterProcessPreview {
@@ -1512,7 +1525,7 @@ class WorkCenterProcessPreview {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterProcessPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterProcessPreview, isStandalone: true, selector: "mt-work-center-process-preview", inputs: { requestId: { classPropertyName: "requestId", publicName: "requestId", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!canRenderPreview()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n  >\r\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n      Process preview is not available for this item yet.\r\n    </p>\r\n  </div>\r\n} @else if (loading()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n  >\r\n    <p class=\"text-sm text-surface-500\">Loading process preview...</p>\r\n  </div>\r\n} @else if (error()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-red-300 bg-red-50 p-6\"\r\n  >\r\n    <p class=\"max-w-md text-center text-sm text-red-600\">{{ error() }}</p>\r\n  </div>\r\n} @else {\r\n  @if (view() === \"schema\") {\r\n    @if (hasSchema()) {\r\n      <div class=\"h-[70vh] overflow-hidden rounded-lg\">\r\n        <mt-structure-builder\r\n          class=\"h-full\"\r\n          [layoutDirection]=\"'LR'\"\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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process steps are not available for this item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  } @else if (hasApprovals()) {\r\n    <mt-table\r\n      [data]=\"approvalRows()\"\r\n      [columns]=\"approvalColumns\"\r\n      storageKey=\"work-center-process-preview-table\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [clickableRows]=\"false\"\r\n    />\r\n  } @else {\r\n    <div\r\n      class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n    >\r\n      <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n        Process approvals data is not available for this item yet.\r\n      </p>\r\n    </div>\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "exportFilename", "actionShape", "tableLayout", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "nodeForm", "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.2.8", type: WorkCenterProcessPreview, isStandalone: true, selector: "mt-work-center-process-preview", inputs: { requestId: { classPropertyName: "requestId", publicName: "requestId", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!canRenderPreview()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n  >\r\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n      Process preview is not available for this item yet.\r\n    </p>\r\n  </div>\r\n} @else if (loading()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n  >\r\n    <p class=\"text-sm text-surface-500\">Loading process preview...</p>\r\n  </div>\r\n} @else if (error()) {\r\n  <div\r\n    class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-red-300 bg-red-50 p-6\"\r\n  >\r\n    <p class=\"max-w-md text-center text-sm text-red-600\">{{ error() }}</p>\r\n  </div>\r\n} @else {\r\n  @if (view() === \"schema\") {\r\n    @if (hasSchema()) {\r\n      <div class=\"h-[70vh] overflow-hidden rounded-lg\">\r\n        <mt-structure-builder\r\n          class=\"h-full\"\r\n          [layoutDirection]=\"'LR'\"\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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          Process steps are not available for this item yet.\r\n        </p>\r\n      </div>\r\n    }\r\n  } @else if (hasApprovals()) {\r\n    <mt-table\r\n      [data]=\"approvalRows()\"\r\n      [columns]=\"approvalColumns\"\r\n      storageKey=\"work-center-process-preview-table\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [clickableRows]=\"false\"\r\n    />\r\n  } @else {\r\n    <div\r\n      class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n    >\r\n      <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n        Process approvals data is not available for this item yet.\r\n      </p>\r\n    </div>\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "exportFilename", "actionShape", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "nodeForm", "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.2.8", ngImport: i0, type: WorkCenterProcessPreview, decorators: [{
             type: Component,
@@ -1566,14 +1579,22 @@ class WorkCenterProcessRequestType {
             {
                 label: this.transloco.translate('workCenter.tabs.requestDetails'),
                 value: 'requestDetails',
+                icon: 'file.file-03',
             },
             {
                 label: this.transloco.translate('workCenter.tabs.approvals'),
                 value: 'approvals',
+                icon: 'custom.document-approval',
             },
             {
                 label: this.transloco.translate('workCenter.tabs.steps'),
                 value: 'schema',
+                icon: 'custom.flow-chart',
+            },
+            {
+                label: this.transloco.translate('workCenter.tabs.discussion'),
+                value: 'discussion',
+                icon: 'custom.discussion-area',
             },
         ];
     }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : /* istanbul ignore next */ []));
@@ -1605,7 +1626,7 @@ class WorkCenterProcessRequestType {
         this.actionContext?.setClientForm(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterProcessRequestType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterProcessRequestType, isStandalone: true, selector: "mt-work-center-process-request-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Process 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-lg 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.requestFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 overflow-auto\"\r\n    [hidden]=\"activeTab() !== 'approvals'\"\r\n  >\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'approvals'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.requestPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.requestPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</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", "defaultValues", "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.2.8", type: WorkCenterProcessRequestType, isStandalone: true, selector: "mt-work-center-process-request-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'requestDetails'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderForm()) {\r\n            <mt-client-form\r\n              [moduleKey]=\"moduleKey()\"\r\n              [operationKey]=\"operationKey()\"\r\n              [moduleId]=\"moduleId()\"\r\n              [levelId]=\"levelId()\"\r\n              [levelDataId]=\"levelDataId()\"\r\n              [moduleDataId]=\"moduleDataId()\"\r\n              [requestSchemaId]=\"requestSchemaId()\"\r\n              [draftProcessId]=\"draftProcessId()\"\r\n              [readonly]=\"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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"context.requestFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'approvals'\"\r\n      >\r\n        @if (canRenderPreview()) {\r\n          <mt-work-center-process-preview\r\n            [requestId]=\"requestId()\"\r\n            [view]=\"'approvals'\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.requestPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\r\n        @if (canRenderPreview()) {\r\n          <mt-work-center-process-preview\r\n            [requestId]=\"requestId()\"\r\n            [view]=\"'schema'\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.requestPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\r\n            <mt-discussion-thread\r\n              [moduleType]=\"'ProcessRequest'\"\r\n              [recordId]=\"discussionRecordId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.requestDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "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", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "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.2.8", ngImport: i0, type: WorkCenterProcessRequestType, decorators: [{
             type: Component,
@@ -1616,7 +1637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ClientForm,
                         DiscussionThread,
                         WorkCenterProcessPreview,
-                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  @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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              Process 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-lg 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.requestFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 overflow-auto\"\r\n    [hidden]=\"activeTab() !== 'approvals'\"\r\n  >\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'approvals'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.requestPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.requestPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'requestDetails'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderForm()) {\r\n            <mt-client-form\r\n              [moduleKey]=\"moduleKey()\"\r\n              [operationKey]=\"operationKey()\"\r\n              [moduleId]=\"moduleId()\"\r\n              [levelId]=\"levelId()\"\r\n              [levelDataId]=\"levelDataId()\"\r\n              [moduleDataId]=\"moduleDataId()\"\r\n              [requestSchemaId]=\"requestSchemaId()\"\r\n              [draftProcessId]=\"draftProcessId()\"\r\n              [readonly]=\"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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"context.requestFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'approvals'\"\r\n      >\r\n        @if (canRenderPreview()) {\r\n          <mt-work-center-process-preview\r\n            [requestId]=\"requestId()\"\r\n            [view]=\"'approvals'\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.requestPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\r\n        @if (canRenderPreview()) {\r\n          <mt-work-center-process-preview\r\n            [requestId]=\"requestId()\"\r\n            [view]=\"'schema'\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.requestPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\r\n            <mt-discussion-thread\r\n              [moduleType]=\"'ProcessRequest'\"\r\n              [recordId]=\"discussionRecordId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.requestDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
 
 class WorkCenterProcessStepType {
@@ -1637,14 +1658,22 @@ class WorkCenterProcessStepType {
             {
                 label: this.transloco.translate('workCenter.tabs.form'),
                 value: 'form',
+                icon: 'file.file-03',
             },
             {
                 label: this.transloco.translate('workCenter.tabs.approvals'),
                 value: 'approvals',
+                icon: 'custom.document-approval',
             },
             {
                 label: this.transloco.translate('workCenter.tabs.steps'),
                 value: 'schema',
+                icon: 'custom.flow-chart',
+            },
+            {
+                label: this.transloco.translate('workCenter.tabs.discussion'),
+                value: 'discussion',
+                icon: 'custom.discussion-area',
             },
         ];
     }, ...(ngDevMode ? [{ debugName: "tabOptions" }] : /* istanbul ignore next */ []));
@@ -1676,7 +1705,7 @@ class WorkCenterProcessStepType {
         this.actionContext?.setClientForm(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterProcessStepType, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterProcessStepType, isStandalone: true, selector: "mt-work-center-process-step-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-lg 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 overflow-auto\"\r\n    [hidden]=\"activeTab() !== 'approvals'\"\r\n  >\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'approvals'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.processPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.processPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</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", "defaultValues", "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.2.8", type: WorkCenterProcessStepType, isStandalone: true, selector: "mt-work-center-process-step-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'form'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderForm()) {\r\n            <mt-client-form\r\n              [moduleKey]=\"moduleKey()\"\r\n              [operationKey]=\"operationKey()\"\r\n              [moduleId]=\"moduleId()\"\r\n              [levelId]=\"levelId()\"\r\n              [levelDataId]=\"levelDataId()\"\r\n              [moduleDataId]=\"moduleDataId()\"\r\n              [requestSchemaId]=\"requestSchemaId()\"\r\n              [draftProcessId]=\"draftProcessId()\"\r\n              [lookups]=\"lookups()\"\r\n            />\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"context.processFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'approvals'\"\r\n      >\r\n        @if (canRenderPreview()) {\r\n          <mt-work-center-process-preview\r\n            [requestId]=\"requestId()\"\r\n            [view]=\"'approvals'\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\r\n        @if (canRenderPreview()) {\r\n          <mt-work-center-process-preview\r\n            [requestId]=\"requestId()\"\r\n            [view]=\"'schema'\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\r\n            <mt-discussion-thread\r\n              [moduleType]=\"'ProcessRequest'\"\r\n              [recordId]=\"discussionRecordId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "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", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "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.2.8", ngImport: i0, type: WorkCenterProcessStepType, decorators: [{
             type: Component,
@@ -1687,7 +1716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ClientForm,
                         DiscussionThread,
                         WorkCenterProcessPreview,
-                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  @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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processFormUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"min-w-0 overflow-hidden rounded-lg 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"flex-1 min-h-0 overflow-auto\"\r\n    [hidden]=\"activeTab() !== 'approvals'\"\r\n  >\r\n    @if (canRenderPreview()) {\r\n      <mt-work-center-process-preview\r\n        [requestId]=\"requestId()\"\r\n        [view]=\"'approvals'\"\r\n      />\r\n    } @else {\r\n      <div\r\n        class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.processPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div 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-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n      >\r\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n          {{ t(\"context.processPreviewUnavailable\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  class=\"mt-modal-content flex h-full min-h-0 flex-col gap-4 p-4 lg:overflow-hidden\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <div\r\n    class=\"flex flex-1 min-h-0 flex-col gap-4 lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-6\"\r\n  >\r\n    @if (tabOptions().length > 1) {\r\n      <mt-tabs\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        mode=\"vertical\"\r\n        size=\"small\"\r\n      />\r\n    }\r\n\r\n    <div class=\"min-w-0 flex-1 min-h-0 lg:overflow-hidden\">\r\n      <div\r\n        class=\"h-full min-h-0 lg:overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'form'\"\r\n      >\r\n        <div\r\n          class=\"min-w-0 h-full min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pr-2\"\r\n        >\r\n          @if (canRenderForm()) {\r\n            <mt-client-form\r\n              [moduleKey]=\"moduleKey()\"\r\n              [operationKey]=\"operationKey()\"\r\n              [moduleId]=\"moduleId()\"\r\n              [levelId]=\"levelId()\"\r\n              [levelDataId]=\"levelDataId()\"\r\n              [moduleDataId]=\"moduleDataId()\"\r\n              [requestSchemaId]=\"requestSchemaId()\"\r\n              [draftProcessId]=\"draftProcessId()\"\r\n              [lookups]=\"lookups()\"\r\n            />\r\n          } @else {\r\n            <div\r\n              class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n            >\r\n              <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n                {{ t(\"context.processFormUnavailable\") }}\r\n              </p>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'approvals'\"\r\n      >\r\n        @if (canRenderPreview()) {\r\n          <mt-work-center-process-preview\r\n            [requestId]=\"requestId()\"\r\n            [view]=\"'approvals'\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"flex-1 min-h-0 overflow-auto\"\r\n        [hidden]=\"activeTab() !== 'schema'\"\r\n      >\r\n        @if (canRenderPreview()) {\r\n          <mt-work-center-process-preview\r\n            [requestId]=\"requestId()\"\r\n            [view]=\"'schema'\"\r\n          />\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processPreviewUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div\r\n        class=\"h-full min-h-0 overflow-hidden\"\r\n        [hidden]=\"activeTab() !== 'discussion'\"\r\n      >\r\n        @if (canRenderDiscussion()) {\r\n          <div\r\n            class=\"h-[32rem] min-h-[22rem] overflow-hidden rounded-lg border border-surface-200 bg-surface-50 lg:h-full lg:min-h-0\"\r\n          >\r\n            <mt-discussion-thread\r\n              [moduleType]=\"'ProcessRequest'\"\r\n              [recordId]=\"discussionRecordId()\"\r\n              [mentionSearchEndpoint]=\"'Identity/users'\"\r\n              [mentionSearchParam]=\"'query'\"\r\n              [mentionSearchDataPath]=\"'data'\"\r\n              [uploadEndpoint]=\"'uploader'\"\r\n              [attachmentDownloadEndpoint]=\"'uploader'\"\r\n              [showParticipants]=\"true\"\r\n              [autoMarkRead]=\"true\"\r\n              [refreshIntervalMs]=\"0\"\r\n              [styleClass]=\"'h-full'\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[22rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-6\"\r\n          >\r\n            <p class=\"max-w-md text-center text-sm text-surface-500\">\r\n              {{ t(\"context.processDiscussionUnavailable\") }}\r\n            </p>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
 
 class WorkCenterItemModal {
@@ -2412,7 +2441,7 @@ class WorkCenterItemModalRoute {
             : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkCenterItemModalRoute, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterItemModalRoute, isStandalone: true, selector: "mt-work-center-item-modal-route", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, 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\" class=\"rounded-lg\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\r\n        <mt-work-center-item-modal [details]=\"details\" />\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkCenterItemModalRoute, isStandalone: true, selector: "mt-work-center-item-modal-route", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, 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-[96vw] md:!w-[84vw] xl:!w-[70vw]\"\r\n  position=\"right\"\r\n  [modal]=\"true\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\r\n          <div class=\"flex items-center gap-3\">\r\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\r\n            <div class=\"flex flex-1 flex-col gap-2\">\r\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\r\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid gap-3 md:grid-cols-2\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"5rem\" class=\"rounded-lg\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\r\n        <mt-work-center-item-modal [details]=\"details\" />\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.2.8", ngImport: i0, type: WorkCenterItemModalRoute, decorators: [{
             type: Component,
@@ -2423,7 +2452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         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  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\r\n          <div class=\"flex items-center gap-3\">\r\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\r\n            <div class=\"flex flex-1 flex-col gap-2\">\r\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\r\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid gap-3 md:grid-cols-2\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"5rem\" class=\"rounded-lg\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\r\n        <mt-work-center-item-modal [details]=\"details\" />\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" }]
+                    ], 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-[96vw] md:!w-[84vw] xl:!w-[70vw]\"\r\n  position=\"right\"\r\n  [modal]=\"true\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n  *transloco=\"let t; prefix: 'workCenter'\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\r\n          <div class=\"flex items-center gap-3\">\r\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\r\n            <div class=\"flex flex-1 flex-col gap-2\">\r\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\r\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid gap-3 md:grid-cols-2\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"5rem\" class=\"rounded-lg\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <div [class]=\"modal.contentClass + ' h-full min-h-0'\">\r\n        <mt-work-center-item-modal [details]=\"details\" />\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];