@masterteam/work-center 0.0.2 → 0.0.4

package/fesm2022/masterteam-work-center.mjs

@@ -1,7 +1,8 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, output, Component } from '@angular/core';
+import { inject, Injectable, computed, input, output, Component, signal, effect, untracked, viewChild } from '@angular/core';
 import { ClientPage } from '@masterteam/components/client-page';
+import { ModalService } from '@masterteam/components/modal';
 import { PropertyFilterBuilder } from '@masterteam/components/property-filter-builder';
 import { StatisticCard } from '@masterteam/components/statistic-card';
 import { Table } from '@masterteam/components/table';
@@ -9,8 +10,21 @@ import * as i1 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { HttpClient } from '@angular/common/http';
-import { handleApiRequest } from '@masterteam/components';
-import { catchError, EMPTY, map } from 'rxjs';
+import { handleApiRequest, ValidatorConfig } from '@masterteam/components';
+import { catchError, EMPTY, map, take } from 'rxjs';
+import { EntitiesPreview } from '@masterteam/components/entities';
+import { Tabs } from '@masterteam/components/tabs';
+import { DiscussionThread } from '@masterteam/discussion';
+import { StructureBuilder } from '@masterteam/structure-builder';
+import { ClientForm } from '@masterteam/forms/client-form';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Drawer } from '@masterteam/components/drawer';
+import { Button } from '@masterteam/components/button';
+import { ToastService } from '@masterteam/components/toast';
+import * as i1$1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ModalRef } from '@masterteam/components/dialog';
+import { DynamicForm } from '@masterteam/forms/dynamic-form';
 
 class EnterArea {
     area;
@@ -150,26 +164,42 @@ function toLabel$1(value) {
         .trim()
         .replace(/\b\w/g, (char) => char.toUpperCase());
 }
-function toColumnType(key) {
-    return key.toLowerCase().includes('date') ? 'date' : 'text';
+function toViewType(viewType, key) {
+    if (viewType?.trim()) {
+        return viewType;
+    }
+    return key.toLowerCase().includes('date') ? 'Date' : 'Text';
+}
+function getValue(record, key) {
+    return key.split('.').reduce((current, part) => {
+        if (!current || typeof current !== 'object') {
+            return undefined;
+        }
+        return current[part];
+    }, record);
 }
-function mapViewTypeToColumnType(viewType, key) {
-    const normalized = viewType?.toLowerCase();
-    if (normalized === 'date' || key.toLowerCase().includes('date')) {
-        return 'date';
+function toDisplayValue(value, column) {
+    if (column.viewType !== 'Text') {
+        return value;
     }
-    return 'text';
+    if (!value || typeof value !== 'object') {
+        return value;
+    }
+    const display = value['display'];
+    return typeof display === 'string' ? display : value;
 }
 function buildColumnsFromProperties(properties) {
     return properties
         .filter((property) => typeof property?.key === 'string' && property.key.length > 0)
         .map((property) => ({
+        ...property,
         key: property.key,
         label: property.name?.display ||
             property.name?.en ||
             property.name?.ar ||
             toLabel$1(property.key),
-        type: mapViewTypeToColumnType(property.viewType, property.key),
+        type: 'entity',
+        viewType: toViewType(property.viewType, property.key),
     }));
 }
 function buildColumns(columnsConfig) {
@@ -181,9 +211,23 @@ function buildColumns(columnsConfig) {
     return keys.map((key) => ({
         key,
         label: toLabel$1(key),
-        type: toColumnType(key),
+        type: 'entity',
+        viewType: toViewType(undefined, key),
     }));
 }
+function toDisplayRows(rows, columns) {
+    return rows.map((row) => {
+        const displayRow = { ...row };
+        for (const column of columns) {
+            const value = getValue(row, column.key);
+            displayRow[column.key] = {
+                ...column,
+                value: toDisplayValue(value, column),
+            };
+        }
+        return displayRow;
+    });
+}
 function buildMenuItems(cards) {
     const mapped = cards.map((card, index) => ({
         key: card.key,
@@ -270,10 +314,14 @@ function buildContextFromInputs(currentContext, area, inputs = {}) {
         templateId: parsedTemplateId ?? currentContext.templateId,
         sort: hasParamValue(inputs.sort)
             ? parseSortInput(inputs.sort)
-            : currentContext.sort,
+            : inputs.sort === null
+                ? []
+                : currentContext.sort,
         runtimeFilters: hasParamValue(inputs.filters)
             ? parseFiltersInput(inputs.filters)
-            : currentContext.runtimeFilters,
+            : inputs.filters === null
+                ? []
+                : currentContext.runtimeFilters,
     });
 }
 function isSameContext(left, right) {
@@ -288,7 +336,6 @@ function isSameContext(left, right) {
 }
 function mapRuntimeResponse(current, response) {
     const selectedCard = response.selectedCard;
-    const rows = selectedCard?.items ?? [];
     const menuItems = buildMenuItems(response.cards);
     const requestedCardKey = selectedCard?.key ?? current.context.selectedCardKey ?? null;
     const selectedCardKey = requestedCardKey &&
@@ -300,6 +347,7 @@ function mapRuntimeResponse(current, response) {
         : null;
     const selectedMenuItem = menuItems.find((item) => item.key === selectedCardKey);
     const columns = buildColumns(selectedCard?.columnsConfig ?? selectedCardFromList?.columnsConfig);
+    const rows = toDisplayRows(selectedCard?.items ?? [], columns);
     const kpis = buildKpis(selectedCard?.stats ?? [], selectedMenuItem?.icon ?? null);
     return {
         ...current,
@@ -716,10 +764,14 @@ function mapAllowedOperators(schema) {
 }
 class WorkCenterPage {
     facade = inject(WorkCenterFacade);
+    modal = inject(ModalService);
     area = input('MyInbox', ...(ngDevMode ? [{ debugName: "area" }] : []));
     pageTitle = input('Work Center', ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
     menuIcon = input('communication.inbox-01', ...(ngDevMode ? [{ debugName: "menuIcon" }] : []));
+    openItemsInModal = input(true, ...(ngDevMode ? [{ debugName: "openItemsInModal" }] : []));
+    itemModal = input(null, ...(ngDevMode ? [{ debugName: "itemModal" }] : []));
     runtimeFiltersChanged = output();
+    itemClicked = output();
     context = this.facade.context;
     menuItems = this.facade.menuItems;
     rows = this.facade.rows;
@@ -759,27 +811,72 @@ class WorkCenterPage {
             allowedOperators: fallbackOperators,
         };
     }, ...(ngDevMode ? [{ debugName: "propertyFilterSchema" }] : []));
+    defaultModalStyleClass = '!w-[96vw] xl:!w-[calc(100%-8rem)] 2xl:!w-[calc(100%-12rem)] !absolute !shadow-none';
     onMenuItemClick(item) {
+        if (item.key === this.context().selectedCardKey) {
+            return;
+        }
         this.facade.selectCardAndLoad(this.area(), item.key);
     }
     onLazyLoad(event) {
         this.facade.applyTableLazyLoadAndLoad(this.area(), event);
     }
     onRuntimeFiltersApplied(filters) {
-        this.runtimeFiltersChanged.emit(filters.map((filter) => ({
+        const mappedFilters = filters.map((filter) => ({
             field: filter.field,
             op: filter.op,
             value: filter.value,
             values: filter.values,
             from: filter.from,
             to: filter.to,
-        })));
+        }));
+        this.facade.applyRuntimeFiltersAndLoad(this.area(), mappedFilters);
+        this.runtimeFiltersChanged.emit(mappedFilters);
     }
     onRuntimeFiltersCleared() {
+        this.facade.applyRuntimeFiltersAndLoad(this.area(), []);
         this.runtimeFiltersChanged.emit([]);
     }
+    onRowClick(row) {
+        const contextKey = this.resolveRowContextKey(row);
+        console.log('[work-center-debug] page row click', {
+            contextKey,
+            row,
+            openItemsInModal: this.openItemsInModal(),
+            hasModalComponent: !!this.itemModal()?.component,
+        });
+        if (!contextKey) {
+            return;
+        }
+        this.itemClicked.emit(contextKey);
+        if (!this.openItemsInModal()) {
+            return;
+        }
+        const modalOptions = this.itemModal();
+        if (!modalOptions?.component) {
+            return;
+        }
+        this.modal.openModal(modalOptions.component, 'drawer', {
+            header: modalOptions?.header ?? 'Item Details',
+            styleClass: modalOptions?.styleClass ?? this.defaultModalStyleClass,
+            position: modalOptions?.position ?? 'end',
+            dismissible: true,
+            modal: true,
+            ...(modalOptions?.appendTo ? { appendTo: modalOptions.appendTo } : {}),
+            inputValues: { contextKey },
+        });
+    }
+    rowsClickable = computed(() => this.openItemsInModal(), ...(ngDevMode ? [{ debugName: "rowsClickable" }] : []));
+    resolveRowContextKey(row) {
+        const value = row['contextKey'];
+        if (typeof value !== 'string') {
+            return null;
+        }
+        const normalized = value.trim();
+        return normalized.length ? normalized : null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged" }, ngImport: i0, template: "    <mt-client-page\r\n      [menuIcon]=\"menuIcon()\"\r\n      [menuTitle]=\"pageTitle()\"\r\n      [menuItems]=\"menuItems()\"\r\n      [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n      [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n      (menuItemClick)=\"onMenuItemClick($event)\"\r\n    >\r\n      <ng-template #headerClientPageEnd>\r\n        <mt-property-filter-builder\r\n          [schema]=\"propertyFilterSchema()\"\r\n          [filters]=\"context().runtimeFilters\"\r\n          (applied)=\"onRuntimeFiltersApplied($event)\"\r\n          (cleared)=\"onRuntimeFiltersCleared()\"\r\n        />\r\n      </ng-template>\r\n\r\n      <div class=\"flex flex-col gap-4\">\r\n        @if (loading()) {\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n        } @else if (kpis().length) {\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n            @for (kpi of kpis(); track $index) {\r\n              <mt-statistic-card [data]=\"kpi\" />\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <mt-table\r\n          [data]=\"rows()\"\r\n          [columns]=\"columns()\"\r\n          [lazy]=\"true\"\r\n          [loading]=\"loading()\"\r\n          [lazyTotalRecords]=\"totalCount()\"\r\n          [showFilters]=\"false\"\r\n          [generalSearch]=\"false\"\r\n          [pageSize]=\"context().pageSize\"\r\n          [currentPage]=\"tableCurrentPage()\"\r\n          [first]=\"tableFirst()\"\r\n          (lazyLoad)=\"onLazyLoad($event)\"\r\n        />\r\n      </div>\r\n    </mt-client-page>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed"], outputs: ["collapsedChange", "menuItemClick"] }, { kind: "component", type: PropertyFilterBuilder, selector: "mt-property-filter-builder", inputs: ["schema", "filters", "title", "buttonLabel", "disabled"], outputs: ["filtersChange", "applied", "cleared"] }, { kind: "component", type: StatisticCard, selector: "mt-statistic-card", inputs: ["data"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, openItemsInModal: { classPropertyName: "openItemsInModal", publicName: "openItemsInModal", isSignal: true, isRequired: false, transformFunction: null }, itemModal: { classPropertyName: "itemModal", publicName: "itemModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked" }, ngImport: i0, template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"pageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <mt-property-filter-builder\r\n      [schema]=\"propertyFilterSchema()\"\r\n      [filters]=\"context().runtimeFilters\"\r\n      (applied)=\"onRuntimeFiltersApplied($event)\"\r\n      (cleared)=\"onRuntimeFiltersCleared()\"\r\n    />\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-4\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [lazy]=\"true\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"tableCurrentPage()\"\r\n      [first]=\"tableFirst()\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed"], outputs: ["collapsedChange", "menuItemClick"] }, { kind: "component", type: PropertyFilterBuilder, selector: "mt-property-filter-builder", inputs: ["schema", "filters", "title", "buttonLabel", "disabled"], outputs: ["filtersChange", "applied", "cleared"] }, { kind: "component", type: StatisticCard, selector: "mt-statistic-card", inputs: ["data"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterPage, decorators: [{
             type: Component,
@@ -790,8 +887,958 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         StatisticCard,
                         Table,
                         SkeletonModule,
-                    ], template: "    <mt-client-page\r\n      [menuIcon]=\"menuIcon()\"\r\n      [menuTitle]=\"pageTitle()\"\r\n      [menuItems]=\"menuItems()\"\r\n      [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n      [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n      (menuItemClick)=\"onMenuItemClick($event)\"\r\n    >\r\n      <ng-template #headerClientPageEnd>\r\n        <mt-property-filter-builder\r\n          [schema]=\"propertyFilterSchema()\"\r\n          [filters]=\"context().runtimeFilters\"\r\n          (applied)=\"onRuntimeFiltersApplied($event)\"\r\n          (cleared)=\"onRuntimeFiltersCleared()\"\r\n        />\r\n      </ng-template>\r\n\r\n      <div class=\"flex flex-col gap-4\">\r\n        @if (loading()) {\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n        } @else if (kpis().length) {\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n            @for (kpi of kpis(); track $index) {\r\n              <mt-statistic-card [data]=\"kpi\" />\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <mt-table\r\n          [data]=\"rows()\"\r\n          [columns]=\"columns()\"\r\n          [lazy]=\"true\"\r\n          [loading]=\"loading()\"\r\n          [lazyTotalRecords]=\"totalCount()\"\r\n          [showFilters]=\"false\"\r\n          [generalSearch]=\"false\"\r\n          [pageSize]=\"context().pageSize\"\r\n          [currentPage]=\"tableCurrentPage()\"\r\n          [first]=\"tableFirst()\"\r\n          (lazyLoad)=\"onLazyLoad($event)\"\r\n        />\r\n      </div>\r\n    </mt-client-page>\r\n\r\n" }]
-        }], 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 }] }], runtimeFiltersChanged: [{ type: i0.Output, args: ["runtimeFiltersChanged"] }] } });
+                    ], template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"pageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <mt-property-filter-builder\r\n      [schema]=\"propertyFilterSchema()\"\r\n      [filters]=\"context().runtimeFilters\"\r\n      (applied)=\"onRuntimeFiltersApplied($event)\"\r\n      (cleared)=\"onRuntimeFiltersCleared()\"\r\n    />\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-4\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [lazy]=\"true\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"tableCurrentPage()\"\r\n      [first]=\"tableFirst()\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n" }]
+        }], 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 }] }], openItemsInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "openItemsInModal", required: false }] }], itemModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemModal", required: false }] }], runtimeFiltersChanged: [{ type: i0.Output, args: ["runtimeFiltersChanged"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+
+function readItemContext(details) {
+    const item = details.item;
+    if (!item || typeof item !== 'object') {
+        return null;
+    }
+    const context = item['context'];
+    return context && typeof context === 'object'
+        ? context
+        : null;
+}
+function readNumber(source, key) {
+    const value = source?.[key];
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : undefined;
+    }
+    if (typeof value === 'string' && value.trim().length) {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : undefined;
+    }
+    return undefined;
+}
+function readString$1(source, key) {
+    const value = source?.[key];
+    return typeof value === 'string' && value.trim().length ? value : undefined;
+}
+
+class WorkCenterEscalationInstanceType {
+    http = inject(HttpClient);
+    loadSub;
+    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
+    activeTab = signal('escalationDetails', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    preview = signal(null, ...(ngDevMode ? [{ debugName: "preview" }] : []));
+    tabOptions = [
+        {
+            label: 'Escalation Details',
+            value: 'escalationDetails',
+        },
+        {
+            label: 'Discussion',
+            value: 'discussion',
+        },
+        {
+            label: 'Schema',
+            value: 'schema',
+        },
+    ];
+    detailEntities = computed(() => {
+        const preview = this.preview();
+        if (!preview) {
+            return [];
+        }
+        return [
+            {
+                key: 'initiatedBy',
+                name: 'Initiated By',
+                value: mapUserValue(preview.initiatedBy),
+                viewType: 'User',
+                order: 1,
+                configuration: { size: 12 },
+            },
+            {
+                key: 'startedAt',
+                name: 'Started At',
+                value: resolveDisplayValue(preview.startedAt),
+                rawValue: resolveRawValue(preview.startedAt),
+                viewType: 'DateTime',
+                order: 2,
+                configuration: { size: 12 },
+            },
+            {
+                key: 'reason',
+                name: 'Reason',
+                value: preview.reason ?? '',
+                viewType: 'LongText',
+                order: 3,
+                configuration: { size: 24 },
+            },
+            {
+                key: 'attachments',
+                name: 'Attachments',
+                value: preview.attachments ?? [],
+                viewType: 'Attachment',
+                order: 4,
+                configuration: { size: 24 },
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "detailEntities" }] : []));
+    schemaNodes = computed(() => resolveSchemaSteps(this.preview()).map((step) => ({
+        id: String(step.id),
+        name: resolveTranslatable(step.name) || `Step ${step.id}`,
+        color: step.isFinal ? '#059669' : step.isInitial ? '#2563eb' : '#0f172a',
+    })), ...(ngDevMode ? [{ debugName: "schemaNodes" }] : []));
+    schemaConnections = computed(() => (this.preview()?.schema?.connections ?? []).map((connection, index) => ({
+        id: String(connection.id ?? `${connection.source}-${connection.target}-${index}`),
+        from: String(connection.source),
+        to: String(connection.target),
+    })), ...(ngDevMode ? [{ debugName: "schemaConnections" }] : []));
+    hasSchema = computed(() => this.schemaNodes().length > 0, ...(ngDevMode ? [{ debugName: "hasSchema" }] : []));
+    itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
+    instanceId = computed(() => readNumber(this.itemContext(), 'escalationInstanceId') ??
+        readNumber(this.itemContext(), 'instanceId'), ...(ngDevMode ? [{ debugName: "instanceId" }] : []));
+    resolvedInstanceId = computed(() => this.instanceId() ?? 0, ...(ngDevMode ? [{ debugName: "resolvedInstanceId" }] : []));
+    canRenderDetails = computed(() => this.resolvedInstanceId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDetails" }] : []));
+    canRenderDiscussion = computed(() => this.resolvedInstanceId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDiscussion" }] : []));
+    constructor() {
+        effect(() => {
+            const instanceId = this.resolvedInstanceId();
+            if (instanceId > 0) {
+                untracked(() => this.loadPreview(instanceId));
+                return;
+            }
+            this.preview.set(null);
+            this.error.set(null);
+        });
+    }
+    ngOnDestroy() {
+        this.loadSub?.unsubscribe();
+    }
+    onDiscussionReadStateChanged(state) {
+        const resolvedUserId = state?.userId?.trim();
+        if (resolvedUserId) {
+            this.currentUserId.set(resolvedUserId);
+        }
+    }
+    loadPreview(instanceId) {
+        this.loadSub?.unsubscribe();
+        this.loading.set(true);
+        this.error.set(null);
+        this.loadSub = this.http
+            .get(`escalations/${instanceId}/preview`)
+            .subscribe({
+            next: (response) => {
+                this.loading.set(false);
+                this.preview.set(response.data ?? null);
+            },
+            error: (error) => {
+                this.loading.set(false);
+                this.preview.set(null);
+                this.error.set(error?.error?.message ??
+                    error?.message ??
+                    'Failed to load escalation preview');
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterEscalationInstanceType, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterEscalationInstanceType, isStandalone: true, selector: "mt-work-center-escalation-instance-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'escalationDetails'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation details...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (preview()) {\n        <mt-entities-preview [entities]=\"detailEntities()\" />\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation details context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'EscalationInstance'\"\n          [recordId]=\"resolvedInstanceId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this escalation yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation schema...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (hasSchema()) {\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\n          <mt-structure-builder\n            class=\"h-full\"\n            [readonly]=\"true\"\n            [nodes]=\"schemaNodes()\"\n            [connections]=\"schemaConnections()\"\n          />\n        </div>\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Escalation schema is not available for this item yet.\n          </p>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation schema context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: DiscussionThread, selector: "mt-discussion-thread", inputs: ["moduleType", "recordId", "title", "subtitle", "placeholder", "pageSize", "currentUserId", "requestContext", "mentionableUsers", "mentionSearchEndpoint", "mentionSearchParam", "mentionSearchDataPath", "allowAttachments", "uploadEndpoint", "attachmentDownloadEndpoint", "showParticipants", "autoMarkRead", "refreshIntervalMs", "styleClass", "disabled"], outputs: ["loaded", "errored", "commentCreated", "commentUpdated", "commentDeleted", "readStateChanged"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "nodeForm", "connectionForm", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "availableTabsClass", "layoutDirection", "nodes", "connections", "nodeTemplate"], outputs: ["nodeActionsEvent", "action", "nodesChange", "connectionsChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterEscalationInstanceType, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-escalation-instance-type', standalone: true, imports: [
+                        CommonModule,
+                        Tabs,
+                        DiscussionThread,
+                        EntitiesPreview,
+                        StructureBuilder,
+                    ], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'escalationDetails'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation details...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (preview()) {\n        <mt-entities-preview [entities]=\"detailEntities()\" />\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation details context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'EscalationInstance'\"\n          [recordId]=\"resolvedInstanceId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this escalation yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation schema...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (hasSchema()) {\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\n          <mt-structure-builder\n            class=\"h-full\"\n            [readonly]=\"true\"\n            [nodes]=\"schemaNodes()\"\n            [connections]=\"schemaConnections()\"\n          />\n        </div>\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Escalation schema is not available for this item yet.\n          </p>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation schema context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
+function mapUserValue(value) {
+    if (!value || typeof value !== 'object') {
+        return {
+            displayName: '',
+            userName: '',
+        };
+    }
+    return {
+        id: readString(value, 'id'),
+        userName: readString(value, 'userName'),
+        displayName: readString(value, 'displayName') ??
+            readString(value, 'fullName') ??
+            readString(value, 'userName') ??
+            '',
+        photoUrl: readString(value, 'photoUrl'),
+        phoneNumber: readString(value, 'phoneNumber') ?? readString(value, 'mobileNumber'),
+        email: readString(value, 'email') ?? readString(value, 'emailAddress'),
+    };
+}
+function resolveSchemaSteps(preview) {
+    return preview?.schema?.stepsSchema ?? preview?.schemaSteps ?? [];
+}
+function resolveTranslatable(value) {
+    if (!value || typeof value !== 'object') {
+        return '';
+    }
+    return value.display ?? value.en ?? value.ar ?? '';
+}
+function resolveDisplayValue(value) {
+    if (!value || typeof value !== 'object') {
+        return typeof value === 'string' ? value : '';
+    }
+    return (readString(value, 'displayValue') ??
+        readString(value, 'display') ??
+        readString(value, 'actualValue') ??
+        '');
+}
+function resolveRawValue(value) {
+    if (!value || typeof value !== 'object') {
+        return typeof value === 'string' ? value : undefined;
+    }
+    return (readString(value, 'actualValue') ??
+        readString(value, 'displayValue') ??
+        undefined);
+}
+function readString(value, key) {
+    if (!value || typeof value !== 'object') {
+        return undefined;
+    }
+    const result = value[key];
+    return typeof result === 'string' && result.length ? result : undefined;
+}
+
+class WorkCenterProcessPreviewJson {
+    http = inject(HttpClient);
+    loadSub;
+    requestId = input(null, ...(ngDevMode ? [{ debugName: "requestId" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    preview = signal(null, ...(ngDevMode ? [{ debugName: "preview" }] : []));
+    canRenderPreview = computed(() => (this.requestId() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "canRenderPreview" }] : []));
+    previewJson = computed(() => {
+        const preview = this.preview();
+        return preview == null ? '' : JSON.stringify(preview, null, 2);
+    }, ...(ngDevMode ? [{ debugName: "previewJson" }] : []));
+    constructor() {
+        effect(() => {
+            const requestId = this.requestId() ?? 0;
+            if (requestId > 0) {
+                untracked(() => this.loadPreview(requestId));
+                return;
+            }
+            this.loadSub?.unsubscribe();
+            this.loading.set(false);
+            this.error.set(null);
+            this.preview.set(null);
+        });
+    }
+    ngOnDestroy() {
+        this.loadSub?.unsubscribe();
+    }
+    loadPreview(requestId) {
+        this.loadSub?.unsubscribe();
+        this.loading.set(true);
+        this.error.set(null);
+        this.loadSub = this.http
+            .get(`processes/${requestId}/preview`)
+            .subscribe({
+            next: (response) => {
+                this.loading.set(false);
+                this.preview.set(response.data ?? null);
+            },
+            error: (error) => {
+                this.loading.set(false);
+                this.preview.set(null);
+                this.error.set(error?.error?.message ??
+                    error?.message ??
+                    'Failed to load process preview');
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessPreviewJson, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterProcessPreviewJson, isStandalone: true, selector: "mt-work-center-process-preview-json", inputs: { requestId: { classPropertyName: "requestId", publicName: "requestId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!canRenderPreview()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\n      Process preview is not available for this item yet.\n    </p>\n  </div>\n} @else if (loading()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"text-sm text-surface-500\">Loading process preview...</p>\n  </div>\n} @else if (error()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-red-600\">{{ error() }}</p>\n  </div>\n} @else if (previewJson()) {\n  <div class=\"overflow-hidden rounded-2xl border border-surface-200 bg-surface-50\">\n    <pre\n      class=\"max-h-[70vh] overflow-auto whitespace-pre-wrap break-all p-4 text-xs leading-6 text-surface-700\"\n    ><code>{{ previewJson() }}</code></pre>\n  </div>\n} @else {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\n      Process preview returned no data.\n    </p>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessPreviewJson, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-process-preview-json', standalone: true, imports: [CommonModule], template: "@if (!canRenderPreview()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\n      Process preview is not available for this item yet.\n    </p>\n  </div>\n} @else if (loading()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"text-sm text-surface-500\">Loading process preview...</p>\n  </div>\n} @else if (error()) {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-red-600\">{{ error() }}</p>\n  </div>\n} @else if (previewJson()) {\n  <div class=\"overflow-hidden rounded-2xl border border-surface-200 bg-surface-50\">\n    <pre\n      class=\"max-h-[70vh] overflow-auto whitespace-pre-wrap break-all p-4 text-xs leading-6 text-surface-700\"\n    ><code>{{ previewJson() }}</code></pre>\n  </div>\n} @else {\n  <div\n    class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n  >\n    <p class=\"max-w-md text-center text-sm text-surface-500\">\n      Process preview returned no data.\n    </p>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { requestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestId", required: false }] }] } });
+
+class WorkCenterProcessRequestType {
+    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
+    activeTab = signal('requestDetails', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    tabOptions = [
+        {
+            label: 'Request Details',
+            value: 'requestDetails',
+        },
+        {
+            label: 'Discussion',
+            value: 'discussion',
+        },
+        {
+            label: 'Preview',
+            value: 'preview',
+        },
+    ];
+    itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
+    requestId = computed(() => readNumber(this.itemContext(), 'requestId') ??
+        readNumber(this.itemContext(), 'draftProcessId'), ...(ngDevMode ? [{ debugName: "requestId" }] : []));
+    discussionRecordId = computed(() => this.requestId() ?? 0, ...(ngDevMode ? [{ debugName: "discussionRecordId" }] : []));
+    canRenderDiscussion = computed(() => this.discussionRecordId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDiscussion" }] : []));
+    canRenderPreview = computed(() => (this.requestId() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "canRenderPreview" }] : []));
+    onDiscussionReadStateChanged(state) {
+        const resolvedUserId = state?.userId?.trim();
+        if (resolvedUserId) {
+            this.currentUserId.set(resolvedUserId);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessRequestType, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterProcessRequestType, isStandalone: true, selector: "mt-work-center-process-request-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'requestDetails'\">\n    <div\n      class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n    >\n      <p class=\"max-w-md text-center text-sm text-surface-500\">\n        Process request details view will be added here.\n      </p>\n    </div>\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this process request yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'preview'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json [requestId]=\"requestId()\" />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process preview is not available for this process request yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: DiscussionThread, selector: "mt-discussion-thread", inputs: ["moduleType", "recordId", "title", "subtitle", "placeholder", "pageSize", "currentUserId", "requestContext", "mentionableUsers", "mentionSearchEndpoint", "mentionSearchParam", "mentionSearchDataPath", "allowAttachments", "uploadEndpoint", "attachmentDownloadEndpoint", "showParticipants", "autoMarkRead", "refreshIntervalMs", "styleClass", "disabled"], outputs: ["loaded", "errored", "commentCreated", "commentUpdated", "commentDeleted", "readStateChanged"] }, { kind: "component", type: WorkCenterProcessPreviewJson, selector: "mt-work-center-process-preview-json", inputs: ["requestId"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessRequestType, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-process-request-type', standalone: true, imports: [CommonModule, Tabs, DiscussionThread, WorkCenterProcessPreviewJson], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'requestDetails'\">\n    <div\n      class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n    >\n      <p class=\"max-w-md text-center text-sm text-surface-500\">\n        Process request details view will be added here.\n      </p>\n    </div>\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this process request yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'preview'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json [requestId]=\"requestId()\" />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process preview is not available for this process request yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
+
+class WorkCenterItemActionContextStore {
+    clientForm = signal(null, ...(ngDevMode ? [{ debugName: "clientForm" }] : []));
+    setClientForm(clientForm) {
+        this.clientForm.set(clientForm);
+    }
+    resolveFormValues() {
+        const values = this.clientForm()?.getSubmitValues();
+        return Array.isArray(values)
+            ? values.map((value) => ({
+                requestPropertyId: value.requestPropertyId,
+                propertyKey: value.propertyKey,
+                value: value.value,
+            }))
+            : [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionContextStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionContextStore });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionContextStore, decorators: [{
+            type: Injectable
+        }] });
+
+class WorkCenterProcessStepType {
+    actionContext = inject(WorkCenterItemActionContextStore, {
+        optional: true,
+    });
+    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
+    clientForm = viewChild(ClientForm, ...(ngDevMode ? [{ debugName: "clientForm" }] : []));
+    activeTab = signal('form', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    tabOptions = [
+        {
+            label: 'Form',
+            value: 'form',
+        },
+        {
+            label: 'Discussion',
+            value: 'discussion',
+        },
+        {
+            label: 'Preview',
+            value: 'preview',
+        },
+    ];
+    itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
+    requestId = computed(() => readNumber(this.itemContext(), 'requestId') ??
+        readNumber(this.itemContext(), 'draftProcessId'), ...(ngDevMode ? [{ debugName: "requestId" }] : []));
+    moduleKey = computed(() => readString$1(this.itemContext(), 'moduleKey') ?? '', ...(ngDevMode ? [{ debugName: "moduleKey" }] : []));
+    operationKey = computed(() => readString$1(this.itemContext(), 'operationKey') ?? '', ...(ngDevMode ? [{ debugName: "operationKey" }] : []));
+    moduleId = computed(() => readNumber(this.itemContext(), 'moduleId'), ...(ngDevMode ? [{ debugName: "moduleId" }] : []));
+    levelId = computed(() => readNumber(this.itemContext(), 'levelId'), ...(ngDevMode ? [{ debugName: "levelId" }] : []));
+    levelDataId = computed(() => readNumber(this.itemContext(), 'levelDataId'), ...(ngDevMode ? [{ debugName: "levelDataId" }] : []));
+    moduleDataId = computed(() => readNumber(this.itemContext(), 'moduleDataId'), ...(ngDevMode ? [{ debugName: "moduleDataId" }] : []));
+    requestSchemaId = computed(() => readNumber(this.itemContext(), 'requestSchemaId'), ...(ngDevMode ? [{ debugName: "requestSchemaId" }] : []));
+    draftProcessId = computed(() => readNumber(this.itemContext(), 'draftProcessId') ??
+        readNumber(this.itemContext(), 'requestId'), ...(ngDevMode ? [{ debugName: "draftProcessId" }] : []));
+    discussionRecordId = computed(() => this.requestId() ?? 0, ...(ngDevMode ? [{ debugName: "discussionRecordId" }] : []));
+    canRenderForm = computed(() => !!this.moduleKey() && !!this.operationKey(), ...(ngDevMode ? [{ debugName: "canRenderForm" }] : []));
+    canRenderDiscussion = computed(() => this.discussionRecordId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDiscussion" }] : []));
+    canRenderPreview = computed(() => (this.requestId() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "canRenderPreview" }] : []));
+    constructor() {
+        effect(() => {
+            this.actionContext?.setClientForm(this.clientForm() ?? null);
+        });
+    }
+    onDiscussionReadStateChanged(state) {
+        const resolvedUserId = state?.userId?.trim();
+        if (resolvedUserId) {
+            this.currentUserId.set(resolvedUserId);
+        }
+    }
+    ngOnDestroy() {
+        this.actionContext?.setClientForm(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessStepType, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterProcessStepType, isStandalone: true, selector: "mt-work-center-process-step-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "clientForm", first: true, predicate: ClientForm, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1 p-4\" [hidden]=\"activeTab() !== 'form'\">\n    <div class=\"flex-1\">\n      @if (canRenderForm()) {\n        <mt-client-form\n          [moduleKey]=\"moduleKey()\"\n          [operationKey]=\"operationKey()\"\n          [moduleId]=\"moduleId()\"\n          [levelId]=\"levelId()\"\n          [levelDataId]=\"levelDataId()\"\n          [moduleDataId]=\"moduleDataId()\"\n          [requestSchemaId]=\"requestSchemaId()\"\n          [draftProcessId]=\"draftProcessId()\"\n        />\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Process form context is not available for this item yet.\n          </p>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this process item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'preview'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json [requestId]=\"requestId()\" />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process preview is not available for this process item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lang", "lookups"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected"] }, { kind: "component", type: DiscussionThread, selector: "mt-discussion-thread", inputs: ["moduleType", "recordId", "title", "subtitle", "placeholder", "pageSize", "currentUserId", "requestContext", "mentionableUsers", "mentionSearchEndpoint", "mentionSearchParam", "mentionSearchDataPath", "allowAttachments", "uploadEndpoint", "attachmentDownloadEndpoint", "showParticipants", "autoMarkRead", "refreshIntervalMs", "styleClass", "disabled"], outputs: ["loaded", "errored", "commentCreated", "commentUpdated", "commentDeleted", "readStateChanged"] }, { kind: "component", type: WorkCenterProcessPreviewJson, selector: "mt-work-center-process-preview-json", inputs: ["requestId"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessStepType, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-process-step-type', standalone: true, imports: [
+                        CommonModule,
+                        Tabs,
+                        ClientForm,
+                        DiscussionThread,
+                        WorkCenterProcessPreviewJson,
+                    ], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1 p-4\" [hidden]=\"activeTab() !== 'form'\">\n    <div class=\"flex-1\">\n      @if (canRenderForm()) {\n        <mt-client-form\n          [moduleKey]=\"moduleKey()\"\n          [operationKey]=\"operationKey()\"\n          [moduleId]=\"moduleId()\"\n          [levelId]=\"levelId()\"\n          [levelDataId]=\"levelDataId()\"\n          [moduleDataId]=\"moduleDataId()\"\n          [requestSchemaId]=\"requestSchemaId()\"\n          [draftProcessId]=\"draftProcessId()\"\n        />\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Process form context is not available for this item yet.\n          </p>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'discussion'\">\n    @if (canRenderDiscussion()) {\n      <div class=\"h-[70vh] min-h-[32rem]\">\n        <mt-discussion-thread\n          [moduleType]=\"'ProcessRequest'\"\n          [recordId]=\"discussionRecordId()\"\n          [currentUserId]=\"currentUserId()\"\n          [mentionSearchEndpoint]=\"'Identity/users'\"\n          [mentionSearchParam]=\"'query'\"\n          [mentionSearchDataPath]=\"'data'\"\n          [uploadEndpoint]=\"'uploader'\"\n          [attachmentDownloadEndpoint]=\"'uploader'\"\n          [showParticipants]=\"true\"\n          [autoMarkRead]=\"true\"\n          [refreshIntervalMs]=\"0\"\n          [styleClass]=\"'h-full'\"\n          (readStateChanged)=\"onDiscussionReadStateChanged($event)\"\n        />\n      </div>\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Discussion context is not available for this process item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'preview'\">\n    @if (canRenderPreview()) {\n      <mt-work-center-process-preview-json [requestId]=\"requestId()\" />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process preview is not available for this process item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }], clientForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClientForm), { isSignal: true }] }] } });
+
+class WorkCenterItemModal {
+    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModal, isStandalone: true, selector: "mt-work-center-item-modal", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (details().type === \"ProcessStep\") {\n  <mt-work-center-process-step-type [details]=\"details()\" />\n} @else if (details().type === \"ProcessRequest\") {\n  <mt-work-center-process-request-type [details]=\"details()\" />\n} @else if (details().type === \"EscalationInstance\") {\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\n} @else {\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WorkCenterProcessStepType, selector: "mt-work-center-process-step-type", inputs: ["details"] }, { kind: "component", type: WorkCenterProcessRequestType, selector: "mt-work-center-process-request-type", inputs: ["details"] }, { kind: "component", type: WorkCenterEscalationInstanceType, selector: "mt-work-center-escalation-instance-type", inputs: ["details"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-item-modal', standalone: true, imports: [
+                        CommonModule,
+                        WorkCenterProcessStepType,
+                        WorkCenterProcessRequestType,
+                        WorkCenterEscalationInstanceType,
+                    ], template: "@if (details().type === \"ProcessStep\") {\n  <mt-work-center-process-step-type [details]=\"details()\" />\n} @else if (details().type === \"ProcessRequest\") {\n  <mt-work-center-process-request-type [details]=\"details()\" />\n} @else if (details().type === \"EscalationInstance\") {\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\n} @else {\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\n  </div>\n}\n" }]
+        }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
+
+class WorkCenterItemActionConfirmDialog {
+    ref = inject(ModalRef);
+    modal = inject(ModalService);
+    action = input.required(...(ngDevMode ? [{ debugName: "action" }] : []));
+    formControl = new FormControl({});
+    actionLabel = computed(() => this.action().actionName?.display || this.action().actionKey, ...(ngDevMode ? [{ debugName: "actionLabel" }] : []));
+    formConfig = computed(() => ({
+        sections: [
+            {
+                key: 'action-confirmation',
+                type: 'none',
+                fields: buildActionFields(this.action().payloadKeys, this.action().requiredPayloadKeys),
+            },
+        ],
+    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    hasFormFields = computed(() => this.formConfig().sections[0]?.fields.length > 0, ...(ngDevMode ? [{ debugName: "hasFormFields" }] : []));
+    onCancel() {
+        this.ref.close(null);
+    }
+    onConfirm() {
+        if (this.formControl.invalid) {
+            this.formControl.markAllAsTouched();
+            return;
+        }
+        this.ref.close(this.formControl.getRawValue() ?? {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemActionConfirmDialog, isStandalone: true, selector: "mt-work-center-item-action-confirm-dialog", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"modal.contentClass +' p-4'\">\n  @if (hasFormFields()) {\n  <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"formControl\" />\n  } @else {\n  <p class=\"text-sm text-surface-500\">\n    Confirm {{ actionLabel() }} for this item.\n  </p>\n  }\n\n</div>\n\n<div [class]=\"modal.footerClass\">\n  <mt-button label=\"Cancel\" severity=\"secondary\" variant=\"outlined\" (onClick)=\"onCancel()\" />\n  <mt-button [label]=\"actionLabel()\" (onClick)=\"onConfirm()\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemActionConfirmDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-item-action-confirm-dialog', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicForm, Button], template: "<div [class]=\"modal.contentClass +' p-4'\">\n  @if (hasFormFields()) {\n  <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"formControl\" />\n  } @else {\n  <p class=\"text-sm text-surface-500\">\n    Confirm {{ actionLabel() }} for this item.\n  </p>\n  }\n\n</div>\n\n<div [class]=\"modal.footerClass\">\n  <mt-button label=\"Cancel\" severity=\"secondary\" variant=\"outlined\" (onClick)=\"onCancel()\" />\n  <mt-button [label]=\"actionLabel()\" (onClick)=\"onConfirm()\" />\n</div>\n" }]
+        }], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: true }] }] } });
+function buildActionFields(payloadKeys, requiredPayloadKeys) {
+    const requestedKeys = new Set(payloadKeys ?? []);
+    const requiredKeys = new Set(requiredPayloadKeys ?? []);
+    const fields = [];
+    if (requestedKeys.has('delegatedUser')) {
+        fields.push({
+            key: 'delegatedUser',
+            type: 'user-search',
+            label: 'Delegated User',
+            placeholder: 'Search user',
+            apiUrl: 'Identity/users',
+            optionLabel: 'displayName',
+            optionValue: 'id',
+            validators: buildRequiredValidators(requiredKeys.has('delegatedUser')),
+            colSpan: 12,
+        });
+    }
+    if (requestedKeys.has('reason')) {
+        fields.push({
+            key: 'reason',
+            type: 'textarea',
+            label: 'Reason',
+            placeholder: 'Enter reason',
+            rows: 4,
+            validators: buildRequiredValidators(requiredKeys.has('reason')),
+            colSpan: 12,
+        });
+    }
+    if (requestedKeys.has('note')) {
+        fields.push({
+            key: 'note',
+            type: 'textarea',
+            label: 'Note',
+            placeholder: 'Enter note',
+            rows: 4,
+            validators: buildRequiredValidators(requiredKeys.has('note')),
+            colSpan: 12,
+        });
+    }
+    if (requestedKeys.has('attachments')) {
+        fields.push({
+            key: 'attachments',
+            type: 'upload-file',
+            label: 'Attachments',
+            endPoint: 'uploader',
+            multiple: true,
+            title: 'Upload Attachment',
+            description: 'Click or drop a file to upload',
+            validators: buildRequiredValidators(requiredKeys.has('attachments')),
+            colSpan: 12,
+        });
+    }
+    return fields;
+}
+function buildRequiredValidators(required) {
+    return required ? [ValidatorConfig.required()] : [];
+}
+
+class WorkCenterItemModalFooterActions {
+    http = inject(HttpClient);
+    modal = inject(ModalService);
+    toast = inject(ToastService);
+    actionContext = inject(WorkCenterItemActionContextStore);
+    loadSub;
+    executeSub;
+    lastContextKey = null;
+    contextKey = input(null, ...(ngDevMode ? [{ debugName: "contextKey" }] : []));
+    actionExecuted = output();
+    visibilityChange = output();
+    reloadTick = signal(0, ...(ngDevMode ? [{ debugName: "reloadTick" }] : []));
+    hasResolvedLoad = signal(false, ...(ngDevMode ? [{ debugName: "hasResolvedLoad" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    actions = signal([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    pendingActionKey = signal(null, ...(ngDevMode ? [{ debugName: "pendingActionKey" }] : []));
+    displayActions = computed(() => this.actions()
+        .filter((action) => action.isAvailable !== false &&
+        !!action.url &&
+        !!normalizeMethod(action.httpMethod))
+        .map((action, index) => ({
+        ...action,
+        label: action.actionName?.display || action.actionKey,
+        severity: resolveActionSeverity(action.actionKey, index),
+        variant: resolveActionVariant(action.actionKey, index),
+    })), ...(ngDevMode ? [{ debugName: "displayActions" }] : []));
+    shouldRender = computed(() => !!this.contextKey() &&
+        (!this.hasResolvedLoad() ||
+            this.loading() ||
+            !!this.error() ||
+            this.displayActions().length > 0 ||
+            !!this.pendingActionKey()), ...(ngDevMode ? [{ debugName: "shouldRender" }] : []));
+    constructor() {
+        effect(() => {
+            const contextKey = this.contextKey();
+            this.reloadTick();
+            this.error.set(null);
+            if (!contextKey) {
+                this.lastContextKey = null;
+                this.actions.set([]);
+                this.loading.set(false);
+                this.hasResolvedLoad.set(false);
+                return;
+            }
+            if (contextKey !== this.lastContextKey) {
+                this.actions.set([]);
+                this.lastContextKey = contextKey;
+            }
+            untracked(() => this.loadActions(contextKey));
+        });
+        effect(() => {
+            this.visibilityChange.emit(this.shouldRender());
+        });
+    }
+    ngOnDestroy() {
+        this.loadSub?.unsubscribe();
+        this.executeSub?.unsubscribe();
+    }
+    executeAction(action) {
+        const contextKey = this.contextKey();
+        const method = normalizeMethod(action.httpMethod);
+        const url = action.url?.trim();
+        if (!contextKey ||
+            !method ||
+            !url ||
+            action.isAvailable === false ||
+            !!this.pendingActionKey()) {
+            return;
+        }
+        if (action.needConfirmation) {
+            this.openConfirmationDialog(action);
+            return;
+        }
+        const payload = this.buildActionPayload(action);
+        if (!this.ensurePayloadIsReady(action, payload)) {
+            return;
+        }
+        this.runActionRequest(action, method, url, payload);
+    }
+    openConfirmationDialog(action) {
+        const ref = this.modal.openModal(WorkCenterItemActionConfirmDialog, 'dialog', {
+            header: action.label,
+            width: '40rem',
+            dismissableMask: true,
+            inputValues: {
+                action,
+            },
+        });
+        ref.onClose
+            .pipe(take(1))
+            .subscribe((formValue) => {
+            if (formValue == null) {
+                return;
+            }
+            const method = normalizeMethod(action.httpMethod);
+            const url = action.url?.trim();
+            if (!method || !url) {
+                return;
+            }
+            const payload = this.buildActionPayload(action, formValue);
+            if (!this.ensurePayloadIsReady(action, payload)) {
+                return;
+            }
+            this.runActionRequest(action, method, url, payload);
+        });
+    }
+    runActionRequest(action, method, url, payload) {
+        this.error.set(null);
+        this.pendingActionKey.set(action.actionKey);
+        this.executeSub?.unsubscribe();
+        this.executeSub = this.http
+            .request(method, url, buildRequestOptions(method, payload))
+            .pipe(map((response) => resolveActionSuccessMessage(response, `${action.label} completed successfully.`)))
+            .subscribe({
+            next: (message) => {
+                this.pendingActionKey.set(null);
+                this.toast.success(message);
+                this.reloadTick.update((value) => value + 1);
+                this.actionExecuted.emit();
+            },
+            error: (error) => {
+                const message = resolveHttpErrorMessage(error, `Failed to execute ${action.label}.`);
+                this.pendingActionKey.set(null);
+                this.error.set(message);
+                this.toast.error(message);
+            },
+        });
+    }
+    buildActionPayload(action, formValue) {
+        const payloadKeys = action.payloadKeys ?? [];
+        if (!payloadKeys.length) {
+            return undefined;
+        }
+        const payload = {};
+        for (const key of payloadKeys) {
+            const formFieldValue = formValue?.[key];
+            if (formFieldValue !== undefined) {
+                payload[key] = normalizePayloadValue(key, formFieldValue);
+                continue;
+            }
+            const externalValue = this.resolveExternalPayloadValue(key, action);
+            if (externalValue !== undefined) {
+                payload[key] = externalValue;
+                continue;
+            }
+            const defaultValue = resolveDefaultPayloadValue(key);
+            if (defaultValue !== undefined) {
+                payload[key] = defaultValue;
+            }
+        }
+        return Object.keys(payload).length ? payload : undefined;
+    }
+    ensurePayloadIsReady(action, payload) {
+        const missingRequiredKeys = (action.requiredPayloadKeys ?? []).filter((key) => isMissingPayloadValue(payload?.[key]));
+        if (!missingRequiredKeys.length) {
+            return true;
+        }
+        const message = `Cannot execute ${action.label}. Missing: ${missingRequiredKeys.join(', ')}.`;
+        this.error.set(message);
+        this.toast.error(message);
+        return false;
+    }
+    resolveExternalPayloadValue(key, action) {
+        switch (key) {
+            case 'stepId':
+                return action.stepIds?.[0];
+            case 'values':
+                return this.actionContext.resolveFormValues();
+            default:
+                return undefined;
+        }
+    }
+    loadActions(contextKey) {
+        this.loadSub?.unsubscribe();
+        this.loading.set(true);
+        this.hasResolvedLoad.set(false);
+        this.loadSub = this.http
+            .get('workcenter/runtime/item-actions', {
+            params: { contextKey },
+        })
+            .pipe(map((response) => {
+            if (response.code === 1) {
+                return response.data.actions ?? [];
+            }
+            throw new Error(resolveEnvelopeErrorMessage(response, 'Failed to load item actions.'));
+        }))
+            .subscribe({
+            next: (actions) => {
+                this.actions.set(actions);
+                this.loading.set(false);
+                this.hasResolvedLoad.set(true);
+            },
+            error: (error) => {
+                this.actions.set([]);
+                this.loading.set(false);
+                this.hasResolvedLoad.set(true);
+                this.error.set(resolveHttpErrorMessage(error, 'Failed to load item actions.'));
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModalFooterActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModalFooterActions, isStandalone: true, selector: "mt-work-center-item-modal-footer-actions", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted", visibilityChange: "visibilityChange" }, host: { classAttribute: "flex w-full flex-1 flex-wrap items-center justify-end gap-2" }, ngImport: i0, template: "@if (shouldRender()) {\n  @if (error(); as error) {\n    <span class=\"me-auto max-w-md text-sm text-red-600\">\n      {{ error }}\n    </span>\n  } @else if (loading() && !displayActions().length) {\n    <span class=\"me-auto text-sm text-surface-500\">Loading actions...</span>\n  }\n\n  @for (action of displayActions(); track action.actionKey + action.url) {\n    <mt-button\n      [label]=\"action.label\"\n      [severity]=\"action.severity\"\n      [variant]=\"action.variant\"\n      [disabled]=\"loading() || !!pendingActionKey()\"\n      [loading]=\"pendingActionKey() === action.actionKey\"\n      (onClick)=\"executeAction(action)\"\n    />\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModalFooterActions, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-item-modal-footer-actions', standalone: true, imports: [CommonModule, Button], host: {
+                        class: 'flex w-full flex-1 flex-wrap items-center justify-end gap-2',
+                    }, template: "@if (shouldRender()) {\n  @if (error(); as error) {\n    <span class=\"me-auto max-w-md text-sm text-red-600\">\n      {{ error }}\n    </span>\n  } @else if (loading() && !displayActions().length) {\n    <span class=\"me-auto text-sm text-surface-500\">Loading actions...</span>\n  }\n\n  @for (action of displayActions(); track action.actionKey + action.url) {\n    <mt-button\n      [label]=\"action.label\"\n      [severity]=\"action.severity\"\n      [variant]=\"action.variant\"\n      [disabled]=\"loading() || !!pendingActionKey()\"\n      [loading]=\"pendingActionKey() === action.actionKey\"\n      (onClick)=\"executeAction(action)\"\n    />\n  }\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { contextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextKey", required: false }] }], actionExecuted: [{ type: i0.Output, args: ["actionExecuted"] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }] } });
+function buildRequestOptions(method, payload) {
+    if (!payload || !methodSupportsBody(method)) {
+        return { observe: 'body' };
+    }
+    return {
+        body: payload,
+        observe: 'body',
+    };
+}
+function methodSupportsBody(method) {
+    return ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method);
+}
+function normalizeMethod(value) {
+    if (!value || typeof value !== 'string') {
+        return null;
+    }
+    const method = value.trim().toUpperCase();
+    return method.length ? method : null;
+}
+function normalizePayloadValue(key, value) {
+    if (key === 'attachments') {
+        if (value == null) {
+            return [];
+        }
+        return Array.isArray(value) ? value : [value];
+    }
+    return value;
+}
+function resolveDefaultPayloadValue(key) {
+    switch (key) {
+        case 'attachments':
+            return [];
+        case 'delegatedUser':
+        case 'note':
+        case 'reason':
+            return null;
+        case 'values':
+            return [];
+        default:
+            return undefined;
+    }
+}
+function isMissingPayloadValue(value) {
+    if (value == null) {
+        return true;
+    }
+    if (typeof value === 'string') {
+        return value.trim().length === 0;
+    }
+    if (Array.isArray(value)) {
+        return value.length === 0;
+    }
+    return false;
+}
+function resolveActionSeverity(actionKey, index) {
+    const normalized = actionKey.trim().toLowerCase();
+    if (normalized === 'close' ||
+        normalized === 'delete' ||
+        normalized === 'reject' ||
+        normalized === 'cancel') {
+        return 'danger';
+    }
+    return index === 0 ? 'primary' : 'secondary';
+}
+function resolveActionVariant(actionKey, index) {
+    const severity = resolveActionSeverity(actionKey, index);
+    return severity === 'primary' ? undefined : 'outlined';
+}
+function resolveEnvelopeErrorMessage(response, fallback) {
+    return (response?.errors?.message ??
+        response?.message ??
+        fallback);
+}
+function resolveActionSuccessMessage(response, fallback) {
+    if (!response || typeof response !== 'object') {
+        return fallback;
+    }
+    const apiResponse = response;
+    if (typeof apiResponse.code === 'number' && apiResponse.code !== 1) {
+        throw new Error(resolveEnvelopeErrorMessage(apiResponse, fallback));
+    }
+    return apiResponse.message?.trim() || fallback;
+}
+function resolveHttpErrorMessage(error, fallback) {
+    if (!error || typeof error !== 'object') {
+        return fallback;
+    }
+    const httpError = error;
+    return httpError.error?.message ?? httpError.message ?? fallback;
+}
+
+class WorkCenterItemModalRoute {
+    http = inject(HttpClient);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    modal = inject(ModalService);
+    contextKey = input(null, ...(ngDevMode ? [{ debugName: "contextKey" }] : []));
+    drawerVisible = signal(true, ...(ngDevMode ? [{ debugName: "drawerVisible" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    details = signal(null, ...(ngDevMode ? [{ debugName: "details" }] : []));
+    detailsReloadTick = signal(0, ...(ngDevMode ? [{ debugName: "detailsReloadTick" }] : []));
+    footerActionsMounted = signal(false, ...(ngDevMode ? [{ debugName: "footerActionsMounted" }] : []));
+    resolvedContextKey = computed(() => this.decodeContextKey(this.contextKey()), ...(ngDevMode ? [{ debugName: "resolvedContextKey" }] : []));
+    drawerTitle = computed(() => this.readDisplayField(this.details()?.item, 'title') ?? 'Item Details', ...(ngDevMode ? [{ debugName: "drawerTitle" }] : []));
+    drawerSubtitle = computed(() => this.readDisplayField(this.details()?.item, 'subtitle') ?? '', ...(ngDevMode ? [{ debugName: "drawerSubtitle" }] : []));
+    constructor() {
+        effect(() => {
+            this.footerActionsMounted.set(!!this.resolvedContextKey());
+        });
+        effect((onCleanup) => {
+            const contextKey = this.resolvedContextKey();
+            const reloadTick = this.detailsReloadTick();
+            console.log('[work-center-debug] modal route load effect', {
+                contextKey,
+                reloadTick,
+            });
+            this.error.set(null);
+            this.details.set(null);
+            if (!contextKey) {
+                this.loading.set(false);
+                console.log('[work-center-debug] modal route load skipped, no context key');
+                return;
+            }
+            this.loading.set(true);
+            console.log('[work-center-debug] modal route fetch start', {
+                endpoint: 'workcenter/runtime/item-basic-info',
+                contextKey,
+            });
+            const subscription = this.http
+                .get('workcenter/runtime/item-basic-info', {
+                params: { contextKey },
+            })
+                .pipe(map((response) => {
+                if (response.code === 1) {
+                    return response.data;
+                }
+                throw new Error(this.resolveErrorMessage(response));
+            }))
+                .subscribe({
+                next: (details) => {
+                    console.log('[work-center-debug] modal route fetch success', {
+                        contextKey,
+                        details,
+                    });
+                    this.details.set(details);
+                    this.loading.set(false);
+                },
+                error: (error) => {
+                    console.error('[work-center-debug] modal route fetch failed', {
+                        contextKey,
+                        error,
+                    });
+                    this.error.set(error instanceof Error
+                        ? error.message
+                        : 'Failed to load item details.');
+                    this.loading.set(false);
+                },
+            });
+            onCleanup(() => subscription.unsubscribe());
+        });
+    }
+    onActionExecuted() {
+        this.detailsReloadTick.update((value) => value + 1);
+    }
+    onFooterVisibilityChange(visible) {
+        this.footerActionsMounted.set(visible);
+    }
+    async onVisibleChange(visible) {
+        this.drawerVisible.set(visible);
+        console.log('[work-center-debug] modal route visible change', { visible });
+        if (visible) {
+            return;
+        }
+        await this.closeRouteOutlet();
+    }
+    closeRouteOutlet() {
+        console.log('[work-center-debug] modal route closing', {
+            outlet: this.route.outlet || 'sidebar',
+            parentUrl: this.route.parent?.snapshot.url.map((segment) => segment.path),
+        });
+        return this.router
+            .navigate([{ outlets: { [this.route.outlet || 'sidebar']: null } }], {
+            relativeTo: this.route.parent,
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        })
+            .then((success) => {
+            console.log('[work-center-debug] modal route close navigate result', {
+                success,
+                currentUrl: this.router.url,
+            });
+            return success;
+        });
+    }
+    decodeContextKey(value) {
+        if (!value) {
+            return null;
+        }
+        try {
+            return decodeURIComponent(value);
+        }
+        catch {
+            return value;
+        }
+    }
+    resolveErrorMessage(response) {
+        const fallbackError = 'Failed to load item details.';
+        return (response.errors?.message ??
+            response.message ??
+            fallbackError);
+    }
+    readDisplayField(item, key) {
+        const field = item?.[key];
+        if (typeof field === 'string' && field.trim().length) {
+            return field;
+        }
+        if (!field || typeof field !== 'object') {
+            return null;
+        }
+        const display = field.display;
+        return typeof display === 'string' && display.trim().length
+            ? display
+            : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModalRoute, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemModalRoute, isStandalone: true, selector: "mt-work-center-item-modal-route", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, providers: [WorkCenterItemActionContextStore], ngImport: i0, template: "<mt-drawer\n  [visible]=\"drawerVisible()\"\n  [loadingHeader]=\"loading()\"\n  [title]=\"drawerTitle()\"\n  [subtitle]=\"drawerSubtitle()\"\n  [appendTo]=\"'system-content'\"\n  styleClass=\"!w-[90%] !absolute \"\n  position=\"right\"\n  (visibleChange)=\"onVisibleChange($event)\"\n>\n  <ng-container content>\n    @if (loading()) {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\n          <div class=\"flex items-center gap-3\">\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\n            <div class=\"flex flex-1 flex-col gap-2\">\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\n            </div>\n          </div>\n\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            @for (_ of [1, 2, 3, 4]; track $index) {\n              <p-skeleton height=\"5rem\" borderRadius=\"1rem\" />\n            }\n          </div>\n\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\n        </div>\n      </div>\n    } @else if (error(); as errorMessage) {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\n            {{ errorMessage }}\n          </p>\n        </div>\n      </div>\n    } @else if (details(); as details) {\n      <mt-work-center-item-modal [details]=\"details\" />\n    } @else {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\n          <p class=\"text-sm font-medium text-surface-500\">No item selected.</p>\n        </div>\n      </div>\n    }\n  </ng-container>\n\n  @if (footerActionsMounted()) {\n    <div footer [class]=\"modal.footerClass\">\n      <mt-work-center-item-modal-footer-actions\n        [contextKey]=\"resolvedContextKey()\"\n        (actionExecuted)=\"onActionExecuted()\"\n        (visibilityChange)=\"onFooterVisibilityChange($event)\"\n      />\n    </div>\n  }\n</mt-drawer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Drawer, selector: "mt-drawer", inputs: ["visible", "position", "fullScreen", "closeOnEscape", "blockScroll", "dismissible", "title", "subtitle", "loadingHeader", "styleClass", "transitionOptions", "appendTo", "modal"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: WorkCenterItemModal, selector: "mt-work-center-item-modal", inputs: ["details"] }, { kind: "component", type: WorkCenterItemModalFooterActions, selector: "mt-work-center-item-modal-footer-actions", inputs: ["contextKey"], outputs: ["actionExecuted", "visibilityChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemModalRoute, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-item-modal-route', standalone: true, imports: [
+                        CommonModule,
+                        Drawer,
+                        SkeletonModule,
+                        WorkCenterItemModal,
+                        WorkCenterItemModalFooterActions,
+                    ], providers: [WorkCenterItemActionContextStore], template: "<mt-drawer\n  [visible]=\"drawerVisible()\"\n  [loadingHeader]=\"loading()\"\n  [title]=\"drawerTitle()\"\n  [subtitle]=\"drawerSubtitle()\"\n  [appendTo]=\"'system-content'\"\n  styleClass=\"!w-[90%] !absolute \"\n  position=\"right\"\n  (visibleChange)=\"onVisibleChange($event)\"\n>\n  <ng-container content>\n    @if (loading()) {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\n          <div class=\"flex items-center gap-3\">\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\n            <div class=\"flex flex-1 flex-col gap-2\">\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\n            </div>\n          </div>\n\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            @for (_ of [1, 2, 3, 4]; track $index) {\n              <p-skeleton height=\"5rem\" borderRadius=\"1rem\" />\n            }\n          </div>\n\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\n        </div>\n      </div>\n    } @else if (error(); as errorMessage) {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\n            {{ errorMessage }}\n          </p>\n        </div>\n      </div>\n    } @else if (details(); as details) {\n      <mt-work-center-item-modal [details]=\"details\" />\n    } @else {\n      <div class=\"p-4\" [class]=\"modal.contentClass\">\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\n          <p class=\"text-sm font-medium text-surface-500\">No item selected.</p>\n        </div>\n      </div>\n    }\n  </ng-container>\n\n  @if (footerActionsMounted()) {\n    <div footer [class]=\"modal.footerClass\">\n      <mt-work-center-item-modal-footer-actions\n        [contextKey]=\"resolvedContextKey()\"\n        (actionExecuted)=\"onActionExecuted()\"\n        (visibilityChange)=\"onFooterVisibilityChange($event)\"\n      />\n    </div>\n  }\n</mt-drawer>\n" }]
+        }], ctorParameters: () => [], propDecorators: { contextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextKey", required: false }] }] } });
 
 const APP_STATES = [WorkCenterState];
 
@@ -799,5 +1846,5 @@ const APP_STATES = [WorkCenterState];
  * Generated bundle index. Do not edit.
  */
 
-export { APP_STATES, EnterArea, HydrateFromContext, LoadRuntime, SetParams, WORK_CENTER_MAX_FILTERS, WORK_CENTER_MAX_PAGE_SIZE, WORK_CENTER_MAX_SORT, WORK_CENTER_QUERY_VERSION, WorkCenterActionKey, WorkCenterFacade, WorkCenterPage, WorkCenterState };
+export { APP_STATES, EnterArea, HydrateFromContext, LoadRuntime, SetParams, WORK_CENTER_MAX_FILTERS, WORK_CENTER_MAX_PAGE_SIZE, WORK_CENTER_MAX_SORT, WORK_CENTER_QUERY_VERSION, WorkCenterActionKey, WorkCenterFacade, WorkCenterItemModal, WorkCenterItemModalRoute, WorkCenterPage, WorkCenterState };
 //# sourceMappingURL=masterteam-work-center.mjs.map