@masterteam/client-components 0.0.8 → 0.0.10

package/fesm2022/masterteam-client-components-client-list.mjs

@@ -3,7 +3,8 @@ import { inject, Injectable, signal, computed, input, output, Component, effect,
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Button } from '@masterteam/components/button';
-import { HttpClient, HttpParams } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import { switchMap, of, map } from 'rxjs';
 import { Card } from '@masterteam/components/card';
 import { Table } from '@masterteam/components/table';
 import * as i2 from 'primeng/skeleton';
@@ -13,34 +14,81 @@ import { DashboardViewer } from '@masterteam/dashboard-builder';
 
 class ClientListApiService {
     http = inject(HttpClient);
-    tablesBaseUrl = 'data/tables';
-    cardsBaseUrl = 'data/modules/cards';
+    runtimeFetchBaseUrl = 'fetch/query';
+    tableSettingsBaseUrl = 'table-display-settings';
     informativeBaseUrl = 'Modules';
-    getRows(levelId, levelDataId, moduleId, query) {
-        const endpoint = `${this.tablesBaseUrl}/level/${levelId}/level-data/${levelDataId}/module/${moduleId}/rows`;
-        let params = new HttpParams()
-            .set('mode', query.mode)
-            .set('skip', query.skip)
-            .set('take', query.take);
-        (query.columnKeys ?? []).forEach((columnKey) => {
-            params = params.append('columnKeys', columnKey);
-        });
-        return this.http.get(endpoint, {
-            params,
-        });
+    getRows(contextKey, instanceId, query) {
+        return this.resolveTablePropertyKeys(contextKey, query).pipe(switchMap((propertyKeys) => this.queryRuntime({
+            contextKey,
+            projection: 'Table',
+            surfaceKey: 'table',
+            propertyKeys: propertyKeys?.length ? propertyKeys : undefined,
+            filters: this.buildInstanceFilters(instanceId),
+            page: this.toPage(query.skip, query.take),
+            pageSize: query.take,
+        })));
     }
-    getCards(levelDataId, moduleId) {
-        const params = new HttpParams()
-            .set('moduleId', moduleId)
-            .set('levelDataId', levelDataId)
-            .append('displayAreas', 'card');
-        return this.http.get(this.cardsBaseUrl, {
-            params,
+    getCards(contextKey, instanceId) {
+        return this.queryRuntime({
+            contextKey,
+            projection: 'Card',
+            filters: instanceId != null ? this.buildInstanceFilters(instanceId) : undefined,
+            display: { areas: ['card'] },
         });
     }
     getInformativeDashboard(moduleId) {
         return this.http.get(`${this.informativeBaseUrl}/${moduleId}/dashboard`);
     }
+    queryRuntime(payload) {
+        return this.http.post(this.runtimeFetchBaseUrl, payload);
+    }
+    resolveTablePropertyKeys(contextKey, query) {
+        if (query.columnKeys?.length) {
+            return of(query.columnKeys);
+        }
+        const context = this.readTableSettingsContext(contextKey);
+        if (!context) {
+            return of(undefined);
+        }
+        return this.http
+            .get(`${this.tableSettingsBaseUrl}/level/${context.levelId}/module/${context.moduleId}/catalog`)
+            .pipe(map((response) => this.toEffectiveColumnKeys(response.data?.effectiveColumns ?? [])));
+    }
+    buildInstanceFilters(instanceId) {
+        return [
+            {
+                key: 'levelDataId',
+                operator: 'Equals',
+                value: String(instanceId),
+            },
+        ];
+    }
+    toPage(skip, take) {
+        if (take <= 0) {
+            return 1;
+        }
+        return Math.floor(skip / take) + 1;
+    }
+    toEffectiveColumnKeys(columns) {
+        const keys = (columns ?? [])
+            .filter((column) => typeof column === 'string' ? true : column.visible !== false)
+            .sort((a, b) => (typeof a === 'string' ? 0 : (a.order ?? 0)) -
+            (typeof b === 'string' ? 0 : (b.order ?? 0)))
+            .map((column) => typeof column === 'string'
+            ? column
+            : (column.key ?? column.propertyKey ?? ''))
+            .filter((key) => key.length > 0);
+        return keys.length ? keys : undefined;
+    }
+    readTableSettingsContext(contextKey) {
+        const [levelPart, modulePart] = contextKey.split('/');
+        const levelId = levelPart?.split(':')[1];
+        const moduleId = modulePart?.split(':')[1];
+        if (!levelId || !moduleId) {
+            return null;
+        }
+        return { levelId, moduleId };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientListApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientListApiService, providedIn: 'root' });
 }
@@ -52,7 +100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 class ClientListStateService {
     itemsByKey = signal({}, ...(ngDevMode ? [{ debugName: "itemsByKey" }] : []));
     items = computed(() => Object.values(this.itemsByKey()).sort((a, b) => a.config.moduleId === b.config.moduleId
-        ? (a.config.levelDataId ?? 0) - (b.config.levelDataId ?? 0)
+        ? (a.config.instanceId ?? 0) - (b.config.instanceId ?? 0)
         : a.config.moduleId - b.config.moduleId), ...(ngDevMode ? [{ debugName: "items" }] : []));
     setConfigs(configs) {
         const currentItems = this.itemsByKey();
@@ -93,10 +141,31 @@ class ClientListStateService {
             target.areaType !== 'table') {
             return;
         }
-        const visibleColumns = this.getVisibleColumns(response.columns);
-        const columns = this.toColumnDefs(visibleColumns);
-        const rows = this.toDisplayRows(response.rows ?? [], visibleColumns);
-        const title = (config.title ?? '').trim() || response.moduleKey;
+        const columns = (response.projectionMeta?.columns ?? [])
+            .filter((column) => column.visible)
+            .sort((a, b) => a.order - b.order)
+            .map((column) => ({
+            key: column.key,
+            label: column.label,
+            type: 'entity',
+            viewType: column.viewType,
+            order: column.order,
+            visible: column.visible,
+            configuration: column.configuration ?? null,
+        }));
+        const propertiesByKey = new Map((response.catalog?.properties ?? []).map((property) => [
+            property.normalizedKey,
+            property,
+        ]));
+        const rows = (response.records ?? []).map((record) => {
+            const row = { Id: record.id };
+            columns.forEach((column) => {
+                row[column.key] = this.toEntityData(column.key, record.values?.[column.key], propertiesByKey.get(column.key), column.viewType, column.label, column.configuration, record.id);
+            });
+            return row;
+        });
+        const schema = response.schemas?.find((item) => item.id === response.records?.[0]?.schemaId);
+        const title = (config.title ?? '').trim() || schema?.name || schema?.key || '';
         const totalCount = config.isPaginated === false
             ? rows.length
             : (response.pagination?.totalCount ?? rows.length);
@@ -105,7 +174,7 @@ class ClientListStateService {
             [key]: {
                 ...target,
                 title,
-                moduleKey: response.moduleKey ?? '',
+                moduleKey: schema?.key ?? '',
                 columns,
                 rows,
                 cards: [],
@@ -125,10 +194,10 @@ class ClientListStateService {
             return;
         }
         const cards = this.toCards(response);
-        const firstModule = response.details?.[0]?.module;
-        const moduleKey = firstModule?.key ?? target.moduleKey ?? '';
+        const firstCardModule = cards[0]?.module;
+        const moduleKey = firstCardModule?.key ?? target.moduleKey ?? '';
         const title = (config.title ?? '').trim() ||
-            firstModule?.name ||
+            firstCardModule?.name ||
             moduleKey ||
             target.title;
         this.itemsByKey.set({
@@ -157,7 +226,6 @@ class ClientListStateService {
         const dashboardData = response
             ? this.toDashboardData(response, title)
             : null;
-        const chartsCount = dashboardData?.charts?.length ?? 0;
         this.itemsByKey.set({
             ...this.itemsByKey(),
             [key]: {
@@ -169,7 +237,7 @@ class ClientListStateService {
                 cards: [],
                 skip: 0,
                 take: 0,
-                totalCount: chartsCount,
+                totalCount: dashboardData?.charts?.length ?? 0,
                 dashboardData,
                 error: null,
                 rawData: response,
@@ -211,48 +279,92 @@ class ClientListStateService {
             rawData: existing.rawData,
         };
     }
-    getVisibleColumns(columns) {
-        return (columns ?? [])
-            .filter((column) => column.isVisible)
-            .sort((a, b) => a.order - b.order);
-    }
-    toColumnDefs(columns) {
-        return columns.map((column) => ({
-            ...column,
-            key: column.columnKey,
-            label: column.name || this.toLabel(column.columnKey),
-            runtimeType: column.type,
-            type: 'entity',
-        }));
+    toCards(data) {
+        const records = this.orderRecords(data?.records ?? [], data?.projectionMeta?.groups ?? []);
+        const propertiesByKey = new Map((data?.catalog?.properties ?? []).map((property) => [
+            property.normalizedKey,
+            property,
+        ]));
+        const displayOrder = [...(data?.projectionMeta?.displayOrder ?? [])].sort((a, b) => a.order - b.order);
+        return records.map((record) => {
+            const schema = data?.schemas?.find((item) => item.id === record.schemaId);
+            const propertyKeys = displayOrder.length
+                ? displayOrder.map((item) => item.propertyKey)
+                : (data?.catalog?.properties ?? [])
+                    .filter((property) => record.values?.[property.normalizedKey] !== undefined)
+                    .sort((a, b) => a.order - b.order)
+                    .map((property) => property.normalizedKey);
+            const keys = propertyKeys.length
+                ? propertyKeys
+                : Object.keys(record.values ?? {});
+            const properties = keys.map((propertyKey) => {
+                const property = propertiesByKey.get(propertyKey);
+                const displayConfig = displayOrder.find((item) => item.propertyKey === propertyKey);
+                return this.toEntityData(propertyKey, record.values?.[propertyKey], property, property?.viewType, property?.label, displayConfig?.configuration ?? property?.configuration ?? null, record.id);
+            });
+            return {
+                id: record.id,
+                name: record.name ?? `Record ${record.id}`,
+                module: schema
+                    ? {
+                        id: schema.id,
+                        key: schema.key,
+                        name: schema.name,
+                        order: schema.order,
+                        typeGroup: schema.typeGroup,
+                    }
+                    : undefined,
+                instanceId: record.id,
+                properties,
+                entities: properties,
+            };
+        });
     }
-    /**
-     * Enriches each flat API row so that every cell value becomes a
-     * RuntimeTableCell carrying both the original value and the full
-     * column metadata.  The `Id` key is preserved as-is.
-     */
-    toDisplayRows(apiRows, columns) {
-        return apiRows.map((row) => {
-            const displayRow = { Id: row['Id'] };
-            for (const col of columns) {
-                displayRow[col.columnKey] = this.toCell(row[col.columnKey], col);
+    orderRecords(records, groups) {
+        if (!groups.length) {
+            return records;
+        }
+        const recordsById = new Map(records.map((record) => [record.id, record]));
+        const ordered = [];
+        const seen = new Set();
+        groups.forEach((group) => {
+            group.recordIds.forEach((recordId) => {
+                const record = recordsById.get(recordId);
+                if (!record || seen.has(recordId)) {
+                    return;
+                }
+                ordered.push(record);
+                seen.add(recordId);
+            });
+        });
+        records.forEach((record) => {
+            if (!seen.has(record.id)) {
+                ordered.push(record);
             }
-            return displayRow;
         });
+        return ordered;
     }
-    toCell(value, column) {
-        return { ...column, value };
-    }
-    toCards(data) {
-        const details = data?.details ?? [];
-        if (details.length === 0) {
-            return [];
-        }
-        const configurationByKey = this.buildDisplayConfigurationLookup(data?.displayConfigurations ?? []);
-        return details.flatMap((detailsBlock) => (detailsBlock.data ?? []).map((card) => ({
-            ...card,
-            module: card.module ?? detailsBlock.module,
-            entities: this.mapEntities(card.properties ?? [], configurationByKey),
-        })));
+    toEntityData(propertyKey, cell, property, viewType, label, configuration, recordId) {
+        const resolvedViewType = (viewType ?? 'Text');
+        return {
+            id: recordId,
+            propertyId: property?.id,
+            key: property?.key ?? propertyKey,
+            normalizedKey: property?.normalizedKey ?? propertyKey,
+            name: label ?? property?.label ?? propertyKey,
+            rawValue: cell?.raw === null || cell?.raw === undefined
+                ? undefined
+                : String(cell.raw),
+            value: resolvedViewType === 'Status' ||
+                resolvedViewType === 'Lookup' ||
+                resolvedViewType === 'User' ||
+                resolvedViewType === 'Attachment'
+                ? cell?.value
+                : String(cell?.display ?? cell?.value ?? cell?.raw ?? ''),
+            viewType: resolvedViewType,
+            type: property?.source,
+            configuration: configuration,
+        };
     }
     toDashboardData(data, title) {
         const charts = (data.chartLinks ?? []).map((link) => {
@@ -280,55 +392,6 @@ class ClientListStateService {
             filters: [],
         };
     }
-    buildDisplayConfigurationLookup(displayConfigurations) {
-        const configurationsByProperty = new Map();
-        for (const displayConfiguration of displayConfigurations) {
-            for (const propertyConfiguration of displayConfiguration.properties ??
-                []) {
-                if (propertyConfiguration.areaKey !== 'card' ||
-                    !propertyConfiguration.propertyKey) {
-                    continue;
-                }
-                configurationsByProperty.set(propertyConfiguration.propertyKey.toLowerCase(), propertyConfiguration);
-            }
-        }
-        return configurationsByProperty;
-    }
-    mapEntities(properties, configurationByKey) {
-        return properties
-            .map((property, index) => {
-            const propertyConfiguration = this.getPropertyConfiguration(property, configurationByKey);
-            return {
-                ...property,
-                rawValue: property.rawValue ?? undefined,
-                order: propertyConfiguration?.order ?? index + 1,
-                configuration: propertyConfiguration?.configuration ?? { size: 4 },
-            };
-        })
-            .sort((first, second) => (first.order ?? 0) - (second.order ?? 0));
-    }
-    getPropertyConfiguration(property, configurationByKey) {
-        const propertyKeys = [property.normalizedKey, property.key, property.name];
-        for (const propertyKey of propertyKeys) {
-            if (!propertyKey) {
-                continue;
-            }
-            const configuration = configurationByKey.get(propertyKey.toLowerCase());
-            if (configuration) {
-                return configuration;
-            }
-        }
-        return undefined;
-    }
-    toLabel(key) {
-        return key
-            .replace(/([a-z])([A-Z])/g, '$1 $2')
-            .replace(/[_-]+/g, ' ')
-            .split(' ')
-            .filter(Boolean)
-            .map((word) => word[0].toUpperCase() + word.slice(1))
-            .join(' ');
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientListStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientListStateService });
 }
@@ -341,6 +404,7 @@ class ClientListTableView {
     state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
     rowActions = input([], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
     lazyLoad = output();
+    rowClick = output();
     table = computed(() => {
         return this.state();
     }, ...(ngDevMode ? [{ debugName: "table" }] : []));
@@ -359,23 +423,24 @@ class ClientListTableView {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientListTableView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientListTableView, isStandalone: true, selector: "mt-client-list-table-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lazyLoad: "lazyLoad" }, ngImport: i0, template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n  @if (table().config.contentStart) {\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\n      <ng-container\n        [ngTemplateOutlet]=\"table().config.contentStart\"\n        [ngTemplateOutletContext]=\"templateContext(table())\"\n      />\n    </div>\n  }\n\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\n    <mt-card>\n      @if (table().loading && table().rows.length === 0) {\n        <div class=\"flex flex-col gap-3 py-3\">\n          <p-skeleton height=\"3rem\" />\n          <p-skeleton height=\"3rem\" />\n          <p-skeleton height=\"3rem\" />\n        </div>\n      } @else if (table().error) {\n        <div\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\n        >\n          {{ table().error }}\n        </div>\n      } @else {\n        <mt-table\n          [data]=\"table().rows\"\n          [columns]=\"table().columns\"\n          [rowActions]=\"rowActions()\"\n          [loading]=\"table().loading\"\n          [lazy]=\"table().config.isPaginated\"\n          [lazyTotalRecords]=\"table().totalCount\"\n          [pageSize]=\"table().config.isPaginated ? table().take : 10\"\n          (lazyLoad)=\"lazyLoad.emit($event)\"\n        />\n      }\n    </mt-card>\n  </div>\n\n  @if (table().config.contentEnd) {\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\n      <ng-container\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\n        [ngTemplateOutletContext]=\"templateContext(table())\"\n      />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { 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: i2.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: ClientListTableView, isStandalone: true, selector: "mt-client-list-table-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lazyLoad: "lazyLoad", rowClick: "rowClick" }, ngImport: i0, template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (table().config.contentStart) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\r\n    <mt-card>\r\n      @if (table().loading && table().rows.length === 0) {\r\n        <div class=\"flex flex-col gap-3 py-3\">\r\n          <p-skeleton height=\"3rem\" />\r\n          <p-skeleton height=\"3rem\" />\r\n          <p-skeleton height=\"3rem\" />\r\n        </div>\r\n      } @else if (table().error) {\r\n        <div\r\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        >\r\n          {{ table().error }}\r\n        </div>\r\n      } @else {\r\n        <mt-table\r\n          [data]=\"table().rows\"\r\n          [columns]=\"table().columns\"\r\n          [rowActions]=\"rowActions()\"\r\n          [loading]=\"table().loading\"\r\n          [clickableRows]=\"true\"\r\n          [lazy]=\"table().config.isPaginated\"\r\n          [lazyTotalRecords]=\"table().totalCount\"\r\n          [pageSize]=\"table().config.isPaginated ? table().take : 10\"\r\n          (lazyLoad)=\"lazyLoad.emit($event)\"\r\n          (rowClick)=\"rowClick.emit($event)\"\r\n        />\r\n      }\r\n    </mt-card>\r\n  </div>\r\n\r\n  @if (table().config.contentEnd) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { 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: i2.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: ClientListTableView, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-client-list-table-view', standalone: true, imports: [CommonModule, Card, Table, SkeletonModule], template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n  @if (table().config.contentStart) {\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\n      <ng-container\n        [ngTemplateOutlet]=\"table().config.contentStart\"\n        [ngTemplateOutletContext]=\"templateContext(table())\"\n      />\n    </div>\n  }\n\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\n    <mt-card>\n      @if (table().loading && table().rows.length === 0) {\n        <div class=\"flex flex-col gap-3 py-3\">\n          <p-skeleton height=\"3rem\" />\n          <p-skeleton height=\"3rem\" />\n          <p-skeleton height=\"3rem\" />\n        </div>\n      } @else if (table().error) {\n        <div\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\n        >\n          {{ table().error }}\n        </div>\n      } @else {\n        <mt-table\n          [data]=\"table().rows\"\n          [columns]=\"table().columns\"\n          [rowActions]=\"rowActions()\"\n          [loading]=\"table().loading\"\n          [lazy]=\"table().config.isPaginated\"\n          [lazyTotalRecords]=\"table().totalCount\"\n          [pageSize]=\"table().config.isPaginated ? table().take : 10\"\n          (lazyLoad)=\"lazyLoad.emit($event)\"\n        />\n      }\n    </mt-card>\n  </div>\n\n  @if (table().config.contentEnd) {\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\n      <ng-container\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\n        [ngTemplateOutletContext]=\"templateContext(table())\"\n      />\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }] } });
+            args: [{ selector: 'mt-client-list-table-view', standalone: true, imports: [CommonModule, Card, Table, SkeletonModule], template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (table().config.contentStart) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\r\n    <mt-card>\r\n      @if (table().loading && table().rows.length === 0) {\r\n        <div class=\"flex flex-col gap-3 py-3\">\r\n          <p-skeleton height=\"3rem\" />\r\n          <p-skeleton height=\"3rem\" />\r\n          <p-skeleton height=\"3rem\" />\r\n        </div>\r\n      } @else if (table().error) {\r\n        <div\r\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        >\r\n          {{ table().error }}\r\n        </div>\r\n      } @else {\r\n        <mt-table\r\n          [data]=\"table().rows\"\r\n          [columns]=\"table().columns\"\r\n          [rowActions]=\"rowActions()\"\r\n          [loading]=\"table().loading\"\r\n          [clickableRows]=\"true\"\r\n          [lazy]=\"table().config.isPaginated\"\r\n          [lazyTotalRecords]=\"table().totalCount\"\r\n          [pageSize]=\"table().config.isPaginated ? table().take : 10\"\r\n          (lazyLoad)=\"lazyLoad.emit($event)\"\r\n          (rowClick)=\"rowClick.emit($event)\"\r\n        />\r\n      }\r\n    </mt-card>\r\n  </div>\r\n\r\n  @if (table().config.contentEnd) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }] } });
 
 class ClientListCardsView {
     state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
+    cardClick = output();
     cardsState = computed(() => this.state(), ...(ngDevMode ? [{ debugName: "cardsState" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientListCardsView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientListCardsView, isStandalone: true, selector: "mt-client-list-cards-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" borderRadius=\"1rem\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (cardsState().cards.length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">No cards found.</div>\r\n} @else {\r\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (card of cardsState().cards; track card.id) {\r\n      <mt-card class=\"cursor-pointer p-3\">\r\n        <ng-template #headless>\r\n          <mt-entities-preview [entities]=\"card.entities\" />\r\n        </ng-template>\r\n      </mt-card>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.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: ClientListCardsView, isStandalone: true, selector: "mt-client-list-cards-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" borderRadius=\"1rem\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (cardsState().cards.length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">No cards found.</div>\r\n} @else {\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\n    @for (card of cardsState().cards; track card.id) {\n      <mt-card class=\"cursor-pointer p-3\" (click)=\"cardClick.emit(card)\">\n        <ng-template #headless>\n          <mt-entities-preview [entities]=\"card.entities\" />\n        </ng-template>\n      </mt-card>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.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: ClientListCardsView, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-client-list-cards-view', standalone: true, imports: [CommonModule, Card, EntitiesPreview, SkeletonModule], template: "@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" borderRadius=\"1rem\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (cardsState().cards.length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">No cards found.</div>\r\n} @else {\r\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (card of cardsState().cards; track card.id) {\r\n      <mt-card class=\"cursor-pointer p-3\">\r\n        <ng-template #headless>\r\n          <mt-entities-preview [entities]=\"card.entities\" />\r\n        </ng-template>\r\n      </mt-card>\r\n    }\r\n  </div>\r\n}\r\n" }]
-        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }] } });
+            args: [{ selector: 'mt-client-list-cards-view', standalone: true, imports: [CommonModule, Card, EntitiesPreview, SkeletonModule], template: "@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" borderRadius=\"1rem\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (cardsState().cards.length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">No cards found.</div>\r\n} @else {\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\n    @for (card of cardsState().cards; track card.id) {\n      <mt-card class=\"cursor-pointer p-3\" (click)=\"cardClick.emit(card)\">\n        <ng-template #headless>\n          <mt-entities-preview [entities]=\"card.entities\" />\n        </ng-template>\n      </mt-card>\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
 
 const DEFAULT_GRID_COLUMNS$1 = 12;
 class ClientListInformativeView {
@@ -396,11 +461,11 @@ class ClientListInformativeView {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientListInformativeView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientListInformativeView, isStandalone: true, selector: "mt-client-list-informative-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n  @if (informativeState().config.contentStart) {\n    <div\n      [style.gridColumn]=\"\n        slotGridSpan(informativeState().config.layout.startSpan)\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\n      />\n    </div>\n  }\n\n  <div\n    [style.gridColumn]=\"\n      slotGridSpan(informativeState().config.layout.tableSpan)\n    \"\n  >\n    <mt-card>\n      @if (\n        informativeState().loading &&\n        !informativeState().dashboardData?.charts?.length\n      ) {\n        <div class=\"flex flex-col gap-3 py-3\">\n          <p-skeleton height=\"6rem\" />\n          <p-skeleton height=\"12rem\" />\n          <p-skeleton height=\"12rem\" />\n        </div>\n      } @else if (informativeState().error) {\n        <div\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\n        >\n          {{ informativeState().error }}\n        </div>\n      } @else if (!informativeState().dashboardData?.charts?.length) {\n        <div class=\"p-6 text-center text-gray-400\">\n          No informative dashboard found.\n        </div>\n      } @else {\n        <div class=\"min-h-[420px]\">\n          <mt-dashboard-viewer\n            [isPage]=\"false\"\n            [showFilters]=\"false\"\n            [dashboardData]=\"informativeState().dashboardData\"\n          />\n        </div>\n      }\n    </mt-card>\n  </div>\n\n  @if (informativeState().config.contentEnd) {\n    <div\n      [style.gridColumn]=\"\n        slotGridSpan(informativeState().config.layout.endSpan)\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\n      />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DashboardViewer, selector: "mt-dashboard-viewer", inputs: ["isPage", "pageTitle", "backButton", "pageId", "dashboardData", "chartsData", "dialogsData", "filtersData", "showFilters"], outputs: ["pageLoaded", "onBack", "chartClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.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: ClientListInformativeView, isStandalone: true, selector: "mt-client-list-informative-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (informativeState().config.contentStart) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.startSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    [style.gridColumn]=\"\r\n      slotGridSpan(informativeState().config.layout.tableSpan)\r\n    \"\r\n  >\r\n    <mt-card>\r\n      @if (\r\n        informativeState().loading &&\r\n        !informativeState().dashboardData?.charts?.length\r\n      ) {\r\n        <div class=\"flex flex-col gap-3 py-3\">\r\n          <p-skeleton height=\"6rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n        </div>\r\n      } @else if (informativeState().error) {\r\n        <div\r\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        >\r\n          {{ informativeState().error }}\r\n        </div>\r\n      } @else if (!informativeState().dashboardData?.charts?.length) {\r\n        <div class=\"p-6 text-center text-gray-400\">\r\n          No informative dashboard found.\r\n        </div>\r\n      } @else {\r\n        <div class=\"min-h-[420px]\">\r\n          <mt-dashboard-viewer\r\n            [isPage]=\"false\"\r\n            [showFilters]=\"false\"\r\n            [dashboardData]=\"informativeState().dashboardData\"\r\n          />\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  </div>\r\n\r\n  @if (informativeState().config.contentEnd) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.endSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DashboardViewer, selector: "mt-dashboard-viewer", inputs: ["isPage", "pageTitle", "backButton", "pageId", "dashboardData", "chartsData", "dialogsData", "filtersData", "showFilters"], outputs: ["pageLoaded", "onBack", "chartClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.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: ClientListInformativeView, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-client-list-informative-view', standalone: true, imports: [CommonModule, Card, DashboardViewer, SkeletonModule], template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n  @if (informativeState().config.contentStart) {\n    <div\n      [style.gridColumn]=\"\n        slotGridSpan(informativeState().config.layout.startSpan)\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\n      />\n    </div>\n  }\n\n  <div\n    [style.gridColumn]=\"\n      slotGridSpan(informativeState().config.layout.tableSpan)\n    \"\n  >\n    <mt-card>\n      @if (\n        informativeState().loading &&\n        !informativeState().dashboardData?.charts?.length\n      ) {\n        <div class=\"flex flex-col gap-3 py-3\">\n          <p-skeleton height=\"6rem\" />\n          <p-skeleton height=\"12rem\" />\n          <p-skeleton height=\"12rem\" />\n        </div>\n      } @else if (informativeState().error) {\n        <div\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\n        >\n          {{ informativeState().error }}\n        </div>\n      } @else if (!informativeState().dashboardData?.charts?.length) {\n        <div class=\"p-6 text-center text-gray-400\">\n          No informative dashboard found.\n        </div>\n      } @else {\n        <div class=\"min-h-[420px]\">\n          <mt-dashboard-viewer\n            [isPage]=\"false\"\n            [showFilters]=\"false\"\n            [dashboardData]=\"informativeState().dashboardData\"\n          />\n        </div>\n      }\n    </mt-card>\n  </div>\n\n  @if (informativeState().config.contentEnd) {\n    <div\n      [style.gridColumn]=\"\n        slotGridSpan(informativeState().config.layout.endSpan)\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\n      />\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'mt-client-list-informative-view', standalone: true, imports: [CommonModule, Card, DashboardViewer, SkeletonModule], template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (informativeState().config.contentStart) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.startSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    [style.gridColumn]=\"\r\n      slotGridSpan(informativeState().config.layout.tableSpan)\r\n    \"\r\n  >\r\n    <mt-card>\r\n      @if (\r\n        informativeState().loading &&\r\n        !informativeState().dashboardData?.charts?.length\r\n      ) {\r\n        <div class=\"flex flex-col gap-3 py-3\">\r\n          <p-skeleton height=\"6rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n        </div>\r\n      } @else if (informativeState().error) {\r\n        <div\r\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        >\r\n          {{ informativeState().error }}\r\n        </div>\r\n      } @else if (!informativeState().dashboardData?.charts?.length) {\r\n        <div class=\"p-6 text-center text-gray-400\">\r\n          No informative dashboard found.\r\n        </div>\r\n      } @else {\r\n        <div class=\"min-h-[420px]\">\r\n          <mt-dashboard-viewer\r\n            [isPage]=\"false\"\r\n            [showFilters]=\"false\"\r\n            [dashboardData]=\"informativeState().dashboardData\"\r\n          />\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  </div>\r\n\r\n  @if (informativeState().config.contentEnd) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.endSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }] } });
 
 const DEFAULT_AREA_TYPE = 'table';
@@ -419,6 +484,7 @@ class ClientList {
     defaultTake = input(DEFAULT_SERVER_PAGE_SIZE, ...(ngDevMode ? [{ debugName: "defaultTake" }] : []));
     loaded = output();
     errored = output();
+    itemClicked = output();
     items = this.state.items;
     subscriptions = new Map();
     inFlightRequestSignatures = new Map();
@@ -464,6 +530,22 @@ class ClientList {
     toggleExpanded(key) {
         this.state.toggleExpanded(key);
     }
+    onTableRowClick(item, row) {
+        this.itemClicked.emit({
+            key: item.key,
+            areaType: 'table',
+            item: row,
+            state: item,
+        });
+    }
+    onCardClick(item, card) {
+        this.itemClicked.emit({
+            key: item.key,
+            areaType: 'cards',
+            item: card,
+            state: item,
+        });
+    }
     templateContext(item) {
         return {
             $implicit: item,
@@ -488,28 +570,31 @@ class ClientList {
         const previousItems = this.state.itemsByKey();
         const hasMultipleConfigs = (configs ?? []).length > 1;
         const normalized = (configs ?? []).map((config, index) => {
-            const type = this.resolveType(config.type);
+            const type = this.resolveType(config);
             const isInformative = type === 'informative';
+            const formConfig = isInformative ? null : this.asFormConfig(config);
             const areaType = isInformative
                 ? DEFAULT_AREA_TYPE
-                : this.resolveAreaType(config.areaType);
+                : this.resolveAreaType(formConfig?.areaType);
             const mode = isInformative
                 ? DEFAULT_MODE
-                : this.resolveMode(config.mode, config.columnKeys);
+                : this.resolveMode(formConfig?.mode, formConfig?.columnKeys);
             const isPaginated = !isInformative &&
                 areaType === 'table' &&
-                (config.isPaginated ?? true);
+                (formConfig?.isPaginated ?? true);
+            const showHeader = config.showHeader ?? true;
             const take = !isInformative && areaType === 'table'
                 ? isPaginated
-                    ? (config.take ?? this.defaultTake())
+                    ? (formConfig?.take ?? this.defaultTake())
                     : LOCAL_PAGE_SIZE_SOURCE
                 : 0;
-            const collapseEnabled = (config.collapse?.enabled ?? true) && hasMultipleConfigs;
+            const collapseEnabled = showHeader &&
+                (config.collapse?.enabled ?? true) &&
+                hasMultipleConfigs;
             const layout = this.resolveLayout(config);
-            const key = config.key ??
-                `${config.levelId ?? 'x'}-${config.levelDataId ?? 'x'}-${config.moduleId ?? 'x'}-${index}`;
+            const key = config.key ?? this.createItemKey(config, index);
             const existing = previousItems[key];
-            const normalizedConfig = this.toNormalizedConfig(config, type, areaType, mode, isPaginated, take, collapseEnabled, layout);
+            const normalizedConfig = this.toNormalizedConfig(config, type, areaType, mode, isPaginated, take, showHeader, collapseEnabled, layout);
             if (isInformative) {
                 return {
                     key,
@@ -607,7 +692,7 @@ class ClientList {
         this.state.setLoading(key, true);
         this.state.setError(key, null);
         const sub = this.api
-            .getRows(config.levelId, config.levelDataId, config.moduleId, query)
+            .getRows(config.contextKey, config.instanceId, query)
             .subscribe({
             next: (response) => {
                 let hasLoadedData = false;
@@ -658,7 +743,7 @@ class ClientList {
         this.state.setLoading(key, true);
         this.state.setError(key, null);
         const sub = this.api
-            .getCards(config.levelDataId, config.moduleId)
+            .getCards(config.contextKey, config.instanceId)
             .subscribe({
             next: (response) => {
                 let hasLoadedData = false;
@@ -741,26 +826,29 @@ class ClientList {
     resolveAreaType(areaType) {
         return areaType === 'cards' ? 'cards' : DEFAULT_AREA_TYPE;
     }
-    resolveType(type) {
-        return type === 'informative' ? 'informative' : DEFAULT_TYPE;
+    resolveType(config) {
+        return config.type === 'informative' ? 'informative' : DEFAULT_TYPE;
     }
     resolveMode(mode, columnKeys) {
         if (mode !== 'override')
             return DEFAULT_MODE;
         return (columnKeys ?? []).length > 0 ? 'override' : DEFAULT_MODE;
     }
-    toNormalizedConfig(config, type, areaType, mode, isPaginated, take, collapseEnabled, layout) {
+    toNormalizedConfig(config, type, areaType, mode, isPaginated, take, showHeader, collapseEnabled, layout) {
+        const informativeConfig = this.asInformativeConfig(config);
+        const formConfig = this.asFormConfig(config);
         return {
-            levelId: config.levelId,
-            levelDataId: config.levelDataId,
-            moduleId: config.moduleId,
+            contextKey: formConfig?.contextKey ?? null,
+            instanceId: formConfig?.instanceId ?? null,
+            moduleId: informativeConfig?.moduleId ?? 0,
             type,
             areaType,
             mode,
             isPaginated,
             take,
             title: config.title,
-            columnKeys: config.columnKeys ?? [],
+            showHeader,
+            columnKeys: formConfig?.columnKeys ?? [],
             headerStart: config.headerStart,
             headerEnd: config.headerEnd,
             contentStart: config.contentStart,
@@ -777,6 +865,17 @@ class ClientList {
             layout,
         };
     }
+    createItemKey(config, index) {
+        if (this.isInformativeConfig(config)) {
+            return `informative-${config.moduleId}-${index}`;
+        }
+        return [
+            config.contextKey,
+            config.instanceId ?? 'scope',
+            config.areaType ?? DEFAULT_AREA_TYPE,
+            index,
+        ].join('-');
+    }
     resolveLayout(config) {
         const hasStart = !!config.contentStart;
         const hasEnd = !!config.contentEnd;
@@ -832,9 +931,8 @@ class ClientList {
         return [
             config.type,
             config.areaType,
-            config.levelId,
-            config.levelDataId,
-            config.moduleId,
+            config.contextKey ?? 'x',
+            config.instanceId ?? 'scope',
             query.mode,
             query.skip,
             query.take,
@@ -845,9 +943,9 @@ class ClientList {
         return [
             config.type,
             config.areaType,
-            config.levelDataId,
-            config.moduleId,
-            'card',
+            config.contextKey ?? 'x',
+            config.instanceId ?? 'scope',
+            'Card',
         ].join('|');
     }
     createInformativeRequestSignature(config) {
@@ -857,27 +955,34 @@ class ClientList {
         if (config.type === 'informative') {
             return Number.isFinite(config.moduleId) && config.moduleId > 0;
         }
-        const hasLevelDataId = Number.isFinite(config.levelDataId) && config.levelDataId > 0;
-        const hasModuleId = Number.isFinite(config.moduleId) && config.moduleId > 0;
+        if (!config.contextKey?.trim()) {
+            return false;
+        }
         if (config.areaType === 'cards') {
-            return hasLevelDataId && hasModuleId;
+            return true;
         }
-        return (Number.isFinite(config.levelId) &&
-            config.levelId > 0 &&
-            hasLevelDataId &&
-            hasModuleId);
+        const instanceId = config.instanceId;
+        return instanceId != null && Number.isFinite(instanceId) && instanceId > 0;
     }
     getMissingIdentifiersMessage(config) {
         if (config.type === 'informative') {
             return 'Missing identifiers: moduleId is required';
         }
-        if (config.areaType === 'cards') {
-            return 'Missing identifiers: levelDataId and moduleId are required';
-        }
-        return 'Missing identifiers: levelId, levelDataId and moduleId are required';
+        return config.areaType === 'cards'
+            ? 'Missing identifiers: contextKey is required'
+            : 'Missing identifiers: contextKey and instanceId are required';
+    }
+    isInformativeConfig(config) {
+        return config.type === 'informative';
+    }
+    asInformativeConfig(config) {
+        return this.isInformativeConfig(config) ? config : null;
+    }
+    asFormConfig(config) {
+        return this.isInformativeConfig(config) ? null : config;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientList, isStandalone: true, selector: "mt-client-list", inputs: { configurations: { classPropertyName: "configurations", publicName: "configurations", isSignal: true, isRequired: true, transformFunction: null }, defaultTake: { classPropertyName: "defaultTake", publicName: "defaultTake", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", errored: "errored" }, providers: [ClientListStateService], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  @for (item of items(); track item.key) {\n    <section class=\"flex flex-col gap-4\">\n      <div class=\"flex w-full items-center gap-2\">\n        <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n          @if (item.config.collapse.enabled) {\n            <mt-button\n              variant=\"text\"\n              severity=\"secondary\"\n              [icon]=\"\n                item.expanded\n                  ? item.config.collapse.collapseIcon\n                  : item.config.collapse.expandIcon\n              \"\n              (onClick)=\"toggleExpanded(item.key)\"\n            />\n          }\n          <h3 class=\"m-0 text-lg font-bold\">\n            {{ item.title || item.moduleKey || defaultTitle(item) }}\n          </h3>\n          @if (item.config.headerStart) {\n            <div class=\"flex items-center gap-2\">\n              <ng-container\n                [ngTemplateOutlet]=\"item.config.headerStart\"\n                [ngTemplateOutletContext]=\"templateContext(item)\"\n              />\n            </div>\n          }\n        </div>\n        @if (item.config.headerEnd) {\n          <div class=\"ml-auto flex shrink-0 items-center gap-2\">\n            <ng-container\n              [ngTemplateOutlet]=\"item.config.headerEnd\"\n              [ngTemplateOutletContext]=\"templateContext(item)\"\n            />\n          </div>\n        }\n      </div>\n\n      @if (item.expanded || !item.config.collapse.enabled) {\n        @if (item.config.templateContent) {\n          <ng-container\n            [ngTemplateOutlet]=\"item.config.templateContent\"\n            [ngTemplateOutletContext]=\"templateContext(item)\"\n          />\n        } @else if (item.type === \"informative\") {\n          <mt-client-list-informative-view [state]=\"item\" />\n        } @else if (item.areaType === \"table\") {\n          <mt-client-list-table-view\n            [state]=\"item\"\n            [rowActions]=\"item.config.rowActions\"\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\n          />\n        } @else {\n          <mt-client-list-cards-view [state]=\"item\" />\n        }\n      }\n    </section>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ClientListTableView, selector: "mt-client-list-table-view", inputs: ["state", "rowActions"], outputs: ["lazyLoad"] }, { kind: "component", type: ClientListCardsView, selector: "mt-client-list-cards-view", inputs: ["state"] }, { kind: "component", type: ClientListInformativeView, selector: "mt-client-list-informative-view", inputs: ["state"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientList, isStandalone: true, selector: "mt-client-list", inputs: { configurations: { classPropertyName: "configurations", publicName: "configurations", isSignal: true, isRequired: true, transformFunction: null }, defaultTake: { classPropertyName: "defaultTake", publicName: "defaultTake", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", errored: "errored", itemClicked: "itemClicked" }, providers: [ClientListStateService], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\r\n  @for (item of items(); track item.key) {\r\n    <section class=\"flex flex-col gap-4\">\r\n      @if (item.config.showHeader) {\r\n        <div class=\"flex w-full items-center gap-2\">\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            @if (item.config.collapse.enabled) {\r\n              <mt-button\r\n                variant=\"text\"\r\n                severity=\"secondary\"\r\n                [icon]=\"\r\n                  item.expanded\r\n                    ? item.config.collapse.collapseIcon\r\n                    : item.config.collapse.expandIcon\r\n                \"\r\n                (onClick)=\"toggleExpanded(item.key)\"\r\n              />\r\n            }\r\n            <h3 class=\"m-0 text-lg font-bold\">\r\n              {{ item.title || item.moduleKey || defaultTitle(item) }}\r\n            </h3>\r\n            @if (item.config.headerStart) {\r\n              <div class=\"flex items-center gap-2\">\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"item.config.headerStart\"\r\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\r\n                />\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (item.config.headerEnd) {\r\n            <div class=\"ml-auto flex shrink-0 items-center gap-2\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"item.config.headerEnd\"\r\n                [ngTemplateOutletContext]=\"templateContext(item)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (item.expanded || !item.config.collapse.enabled) {\r\n        @if (item.config.templateContent) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"item.config.templateContent\"\r\n            [ngTemplateOutletContext]=\"templateContext(item)\"\r\n          />\r\n        } @else if (item.type === \"informative\") {\r\n          <mt-client-list-informative-view [state]=\"item\" />\r\n        } @else if (item.areaType === \"table\") {\r\n          <mt-client-list-table-view\r\n            [state]=\"item\"\r\n            [rowActions]=\"item.config.rowActions\"\r\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n            (rowClick)=\"onTableRowClick(item, $event)\"\r\n          />\r\n        } @else {\r\n          <mt-client-list-cards-view\r\n            [state]=\"item\"\r\n            (cardClick)=\"onCardClick(item, $event)\"\r\n          />\r\n        }\r\n      }\r\n    </section>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ClientListTableView, selector: "mt-client-list-table-view", inputs: ["state", "rowActions"], outputs: ["lazyLoad", "rowClick"] }, { kind: "component", type: ClientListCardsView, selector: "mt-client-list-cards-view", inputs: ["state"], outputs: ["cardClick"] }, { kind: "component", type: ClientListInformativeView, selector: "mt-client-list-informative-view", inputs: ["state"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientList, decorators: [{
             type: Component,
@@ -887,8 +992,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         ClientListTableView,
                         ClientListCardsView,
                         ClientListInformativeView,
-                    ], providers: [ClientListStateService], template: "<div class=\"flex flex-col gap-4\">\n  @for (item of items(); track item.key) {\n    <section class=\"flex flex-col gap-4\">\n      <div class=\"flex w-full items-center gap-2\">\n        <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n          @if (item.config.collapse.enabled) {\n            <mt-button\n              variant=\"text\"\n              severity=\"secondary\"\n              [icon]=\"\n                item.expanded\n                  ? item.config.collapse.collapseIcon\n                  : item.config.collapse.expandIcon\n              \"\n              (onClick)=\"toggleExpanded(item.key)\"\n            />\n          }\n          <h3 class=\"m-0 text-lg font-bold\">\n            {{ item.title || item.moduleKey || defaultTitle(item) }}\n          </h3>\n          @if (item.config.headerStart) {\n            <div class=\"flex items-center gap-2\">\n              <ng-container\n                [ngTemplateOutlet]=\"item.config.headerStart\"\n                [ngTemplateOutletContext]=\"templateContext(item)\"\n              />\n            </div>\n          }\n        </div>\n        @if (item.config.headerEnd) {\n          <div class=\"ml-auto flex shrink-0 items-center gap-2\">\n            <ng-container\n              [ngTemplateOutlet]=\"item.config.headerEnd\"\n              [ngTemplateOutletContext]=\"templateContext(item)\"\n            />\n          </div>\n        }\n      </div>\n\n      @if (item.expanded || !item.config.collapse.enabled) {\n        @if (item.config.templateContent) {\n          <ng-container\n            [ngTemplateOutlet]=\"item.config.templateContent\"\n            [ngTemplateOutletContext]=\"templateContext(item)\"\n          />\n        } @else if (item.type === \"informative\") {\n          <mt-client-list-informative-view [state]=\"item\" />\n        } @else if (item.areaType === \"table\") {\n          <mt-client-list-table-view\n            [state]=\"item\"\n            [rowActions]=\"item.config.rowActions\"\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\n          />\n        } @else {\n          <mt-client-list-cards-view [state]=\"item\" />\n        }\n      }\n    </section>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { configurations: [{ type: i0.Input, args: [{ isSignal: true, alias: "configurations", required: true }] }], defaultTake: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTake", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], errored: [{ type: i0.Output, args: ["errored"] }] } });
+                    ], providers: [ClientListStateService], template: "<div class=\"flex flex-col gap-4\">\r\n  @for (item of items(); track item.key) {\r\n    <section class=\"flex flex-col gap-4\">\r\n      @if (item.config.showHeader) {\r\n        <div class=\"flex w-full items-center gap-2\">\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            @if (item.config.collapse.enabled) {\r\n              <mt-button\r\n                variant=\"text\"\r\n                severity=\"secondary\"\r\n                [icon]=\"\r\n                  item.expanded\r\n                    ? item.config.collapse.collapseIcon\r\n                    : item.config.collapse.expandIcon\r\n                \"\r\n                (onClick)=\"toggleExpanded(item.key)\"\r\n              />\r\n            }\r\n            <h3 class=\"m-0 text-lg font-bold\">\r\n              {{ item.title || item.moduleKey || defaultTitle(item) }}\r\n            </h3>\r\n            @if (item.config.headerStart) {\r\n              <div class=\"flex items-center gap-2\">\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"item.config.headerStart\"\r\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\r\n                />\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (item.config.headerEnd) {\r\n            <div class=\"ml-auto flex shrink-0 items-center gap-2\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"item.config.headerEnd\"\r\n                [ngTemplateOutletContext]=\"templateContext(item)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (item.expanded || !item.config.collapse.enabled) {\r\n        @if (item.config.templateContent) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"item.config.templateContent\"\r\n            [ngTemplateOutletContext]=\"templateContext(item)\"\r\n          />\r\n        } @else if (item.type === \"informative\") {\r\n          <mt-client-list-informative-view [state]=\"item\" />\r\n        } @else if (item.areaType === \"table\") {\r\n          <mt-client-list-table-view\r\n            [state]=\"item\"\r\n            [rowActions]=\"item.config.rowActions\"\r\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n            (rowClick)=\"onTableRowClick(item, $event)\"\r\n          />\r\n        } @else {\r\n          <mt-client-list-cards-view\r\n            [state]=\"item\"\r\n            (cardClick)=\"onCardClick(item, $event)\"\r\n          />\r\n        }\r\n      }\r\n    </section>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { configurations: [{ type: i0.Input, args: [{ isSignal: true, alias: "configurations", required: true }] }], defaultTake: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTake", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], errored: [{ type: i0.Output, args: ["errored"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
 
 /**
  * Generated bundle index. Do not edit.