@masterteam/client-components 0.0.3 → 0.0.5

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

@@ -1,19 +1,23 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, input, output, effect, untracked, Component } from '@angular/core';
+import { inject, Injectable, signal, computed, input, output, Component, effect, untracked } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Table } from '@masterteam/components/table';
 import { Button } from '@masterteam/components/button';
-import * as i2 from 'primeng/skeleton';
-import { SkeletonModule } from 'primeng/skeleton';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Card } from '@masterteam/components/card';
+import { Table } from '@masterteam/components/table';
+import * as i2 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
+import { EntitiesPreview } from '@masterteam/components/entities';
+import { DashboardViewer } from '@masterteam/dashboard-builder';
 
 class ClientListApiService {
     http = inject(HttpClient);
-    baseUrl = 'data/tables';
+    tablesBaseUrl = 'data/tables';
+    cardsBaseUrl = 'data/modules/cards';
+    informativeBaseUrl = 'Modules';
     getRows(levelId, levelDataId, moduleId, query) {
-        const endpoint = `${this.baseUrl}/level/${levelId}/level-data/${levelDataId}/module/${moduleId}/rows`;
+        const endpoint = `${this.tablesBaseUrl}/level/${levelId}/level-data/${levelDataId}/module/${moduleId}/rows`;
         let params = new HttpParams()
             .set('mode', query.mode)
             .set('skip', query.skip)
@@ -25,6 +29,18 @@ class ClientListApiService {
             params,
         });
     }
+    getCards(levelDataId, moduleId) {
+        const params = new HttpParams()
+            .set('moduleId', moduleId)
+            .set('levelDataId', levelDataId)
+            .append('displayAreas', 'card');
+        return this.http.get(this.cardsBaseUrl, {
+            params,
+        });
+    }
+    getInformativeDashboard(moduleId) {
+        return this.http.get(`${this.informativeBaseUrl}/${moduleId}/dashboard`);
+    }
     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' });
 }
@@ -34,36 +50,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
         }] });
 
 class ClientListStateService {
-    tablesByKey = signal({}, ...(ngDevMode ? [{ debugName: "tablesByKey" }] : []));
-    tables = computed(() => Object.values(this.tablesByKey()).sort((a, b) => a.config.moduleId === b.config.moduleId
-        ? a.config.levelDataId - b.config.levelDataId
-        : a.config.moduleId - b.config.moduleId), ...(ngDevMode ? [{ debugName: "tables" }] : []));
+    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.moduleId - b.config.moduleId), ...(ngDevMode ? [{ debugName: "items" }] : []));
     setConfigs(configs) {
+        const currentItems = this.itemsByKey();
         const next = {};
-        configs.forEach((table) => {
-            const current = this.tablesByKey()[table.key];
-            next[table.key] = {
-                ...table,
-                loading: current?.loading ?? false,
-                error: current?.error ?? null,
-                title: current?.title ?? table.title,
-                moduleKey: current?.moduleKey ?? table.moduleKey,
-                columns: current?.columns ?? table.columns,
-                rows: current?.rows ?? table.rows,
-                skip: current?.skip ?? table.skip,
-                take: current?.take ?? table.take,
-                totalCount: current?.totalCount ?? table.totalCount,
-                expanded: current?.expanded ?? table.expanded,
-            };
+        configs.forEach((item) => {
+            next[item.key] = this.mergeItemState(item, currentItems[item.key]);
         });
-        this.tablesByKey.set(next);
+        this.itemsByKey.set(next);
     }
     setLoading(key, loading) {
-        const target = this.tablesByKey()[key];
+        const target = this.itemsByKey()[key];
         if (!target)
             return;
-        this.tablesByKey.set({
-            ...this.tablesByKey(),
+        this.itemsByKey.set({
+            ...this.itemsByKey(),
             [key]: {
                 ...target,
                 loading,
@@ -71,11 +75,11 @@ class ClientListStateService {
         });
     }
     setError(key, message) {
-        const target = this.tablesByKey()[key];
+        const target = this.itemsByKey()[key];
         if (!target)
             return;
-        this.tablesByKey.set({
-            ...this.tablesByKey(),
+        this.itemsByKey.set({
+            ...this.itemsByKey(),
             [key]: {
                 ...target,
                 error: message,
@@ -83,23 +87,28 @@ class ClientListStateService {
         });
     }
     setRowsResult(key, response, config, skip, take) {
-        const target = this.tablesByKey()[key];
-        if (!target)
+        const target = this.itemsByKey()[key];
+        if (!target ||
+            target.type === 'informative' ||
+            target.areaType !== 'table') {
             return;
-        const columns = this.toColumnDefs(response.columns);
-        const rows = response.rows ?? [];
+        }
+        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 totalCount = config.isPaginated === false
             ? rows.length
             : (response.pagination?.totalCount ?? rows.length);
-        this.tablesByKey.set({
-            ...this.tablesByKey(),
+        this.itemsByKey.set({
+            ...this.itemsByKey(),
             [key]: {
                 ...target,
                 title,
                 moduleKey: response.moduleKey ?? '',
                 columns,
                 rows,
+                cards: [],
                 skip,
                 take,
                 totalCount,
@@ -107,27 +116,206 @@ class ClientListStateService {
             },
         });
     }
+    setCardsResult(key, response, config) {
+        const target = this.itemsByKey()[key];
+        if (!target ||
+            target.type === 'informative' ||
+            target.areaType !== 'cards') {
+            return;
+        }
+        const cards = this.toCards(response);
+        const firstModule = response.details?.[0]?.module;
+        const moduleKey = firstModule?.key ?? target.moduleKey ?? '';
+        const title = (config.title ?? '').trim() ||
+            firstModule?.name ||
+            moduleKey ||
+            target.title;
+        this.itemsByKey.set({
+            ...this.itemsByKey(),
+            [key]: {
+                ...target,
+                title,
+                moduleKey,
+                columns: [],
+                rows: [],
+                cards,
+                skip: 0,
+                take: 0,
+                totalCount: cards.length,
+                error: null,
+            },
+        });
+    }
+    setInformativeResult(key, response, config) {
+        const target = this.itemsByKey()[key];
+        if (!target || target.type !== 'informative')
+            return;
+        const moduleKey = target.moduleKey || `Module ${config.moduleId}`;
+        const title = (config.title ?? '').trim() || target.title || 'Informative Dashboard';
+        const dashboardData = response
+            ? this.toDashboardData(response, title)
+            : null;
+        const chartsCount = dashboardData?.charts?.length ?? 0;
+        this.itemsByKey.set({
+            ...this.itemsByKey(),
+            [key]: {
+                ...target,
+                title,
+                moduleKey,
+                columns: [],
+                rows: [],
+                cards: [],
+                skip: 0,
+                take: 0,
+                totalCount: chartsCount,
+                dashboardData,
+                error: null,
+            },
+        });
+    }
     toggleExpanded(key) {
-        const target = this.tablesByKey()[key];
+        const target = this.itemsByKey()[key];
         if (!target)
             return;
-        this.tablesByKey.set({
-            ...this.tablesByKey(),
+        this.itemsByKey.set({
+            ...this.itemsByKey(),
             [key]: {
                 ...target,
                 expanded: !target.expanded,
             },
         });
     }
-    toColumnDefs(columns) {
+    mergeItemState(item, existing) {
+        if (!existing ||
+            existing.type !== item.type ||
+            existing.areaType !== item.areaType) {
+            return item;
+        }
+        return {
+            ...item,
+            loading: existing.loading,
+            error: existing.error,
+            title: item.title || existing.title,
+            moduleKey: existing.moduleKey || item.moduleKey,
+            totalCount: existing.totalCount,
+            columns: existing.columns,
+            rows: existing.rows,
+            cards: existing.cards,
+            skip: existing.skip,
+            take: existing.take,
+            expanded: existing.expanded,
+            dashboardData: existing.dashboardData,
+        };
+    }
+    getVisibleColumns(columns) {
         return (columns ?? [])
             .filter((column) => column.isVisible)
-            .sort((a, b) => a.order - b.order)
-            .map((column) => ({
+            .sort((a, b) => a.order - b.order);
+    }
+    toColumnDefs(columns) {
+        return columns.map((column) => ({
+            ...column,
             key: column.columnKey,
-            label: this.toLabel(column.columnKey),
+            label: column.name || this.toLabel(column.columnKey),
+            runtimeType: column.type,
+            type: 'entity',
         }));
     }
+    /**
+     * 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);
+            }
+            return displayRow;
+        });
+    }
+    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),
+        })));
+    }
+    toDashboardData(data, title) {
+        const charts = (data.chartLinks ?? []).map((link) => {
+            const configuration = link.configuration ?? {};
+            return {
+                ...configuration,
+                id: link.id,
+                chartComponentId: link.chartComponentId,
+            };
+        });
+        return {
+            page: {
+                id: data.moduleId,
+                name: { en: title, ar: title },
+                type: 'Dashboard',
+                dashboardConfig: {
+                    ignoreQueryFilter: data.ignoreQueryFilter,
+                    filters: data.filters,
+                    versionNumber: data.versionNumber,
+                    extraInfo: data.extraInfo,
+                },
+            },
+            charts,
+            dialogs: [],
+            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')
@@ -144,7 +332,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
             type: Injectable
         }] });
 
+const DEFAULT_GRID_COLUMNS$2 = 12;
+class ClientListTableView {
+    state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
+    lazyLoad = output();
+    table = computed(() => {
+        return this.state();
+    }, ...(ngDevMode ? [{ debugName: "table" }] : []));
+    gridTemplateColumns = `repeat(${DEFAULT_GRID_COLUMNS$2}, minmax(0, 1fr))`;
+    slotGridSpan(span) {
+        return `span ${span} / span ${span}`;
+    }
+    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 } }, outputs: { lazyLoad: "lazyLoad" }, 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]=\"{\r\n          $implicit: table(),\r\n          table: table(),\r\n        }\"\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          [loading]=\"table().loading\"\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        />\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]=\"{\r\n          $implicit: table(),\r\n          table: table(),\r\n        }\"\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\">\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]=\"{\r\n          $implicit: table(),\r\n          table: table(),\r\n        }\"\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          [loading]=\"table().loading\"\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        />\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]=\"{\r\n          $implicit: table(),\r\n          table: table(),\r\n        }\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }] } });
+
+class ClientListCardsView {
+    state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
+    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"] }] });
+}
+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 }] }] } });
+
+const DEFAULT_GRID_COLUMNS$1 = 12;
+class ClientListInformativeView {
+    state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
+    informativeState = computed(() => this.state(), ...(ngDevMode ? [{ debugName: "informativeState" }] : []));
+    gridTemplateColumns = `repeat(${DEFAULT_GRID_COLUMNS$1}, minmax(0, 1fr))`;
+    slotGridSpan(span) {
+        return `span ${span} / span ${span}`;
+    }
+    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\">\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]=\"{\r\n          $implicit: informativeState(),\r\n          table: informativeState(),\r\n        }\"\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]=\"{\r\n          $implicit: informativeState(),\r\n          table: informativeState(),\r\n        }\"\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\">\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]=\"{\r\n          $implicit: informativeState(),\r\n          table: informativeState(),\r\n        }\"\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]=\"{\r\n          $implicit: informativeState(),\r\n          table: informativeState(),\r\n        }\"\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';
 const DEFAULT_MODE = 'auto';
+const DEFAULT_TYPE = 'form';
 const DEFAULT_SERVER_PAGE_SIZE = 50;
 const LOCAL_PAGE_SIZE_SOURCE = 100000;
 const DEFAULT_COLLAPSE_ICON = 'arrow.chevron-up';
@@ -158,101 +394,174 @@ class ClientList {
     defaultTake = input(DEFAULT_SERVER_PAGE_SIZE, ...(ngDevMode ? [{ debugName: "defaultTake" }] : []));
     loaded = output();
     errored = output();
-    tables = this.state.tables;
-    gridTemplateColumns = `repeat(${DEFAULT_GRID_COLUMNS}, minmax(0, 1fr))`;
+    items = this.state.items;
     subscriptions = new Map();
     inFlightRequestSignatures = new Map();
     fulfilledRequestSignatures = new Map();
     constructor() {
         effect(() => {
             const configs = this.configurations();
-            untracked(() => this.configureTables(configs));
+            untracked(() => this.configureItems(configs));
             untracked(() => {
-                this.state.tables().forEach((table) => {
-                    this.loadTable(table.key, table.config, table.skip, table.take);
+                this.state.items().forEach((item) => {
+                    this.loadItem(item);
                 });
             });
         });
     }
-    onLazyLoad(tableKey, event) {
-        const table = this.state.tablesByKey()[tableKey];
-        if (!table || !table.config.isPaginated)
+    onLazyLoad(itemKey, event) {
+        const item = this.state.itemsByKey()[itemKey];
+        if (!item ||
+            item.type === 'informative' ||
+            item.areaType !== 'table' ||
+            !item.config.isPaginated) {
             return;
-        const take = Number(event.pageSize ?? table.take);
+        }
+        const take = Number(event.pageSize ?? item.take);
         const skip = Number(event.first ?? 0);
-        this.loadTable(table.key, table.config, skip, take);
+        this.loadTable(item.key, item.config, skip, take);
     }
-    reload(tableKey) {
-        if (tableKey) {
-            this.reloadByKey(tableKey);
+    reload(itemKey) {
+        if (itemKey) {
+            this.reloadByKey(itemKey);
             return;
         }
-        this.tables().forEach((table) => {
-            this.loadTable(table.key, table.config, table.skip, table.take, true);
+        this.items().forEach((item) => {
+            this.loadItem(item, true);
         });
     }
-    reloadByKey(tableKey) {
-        const table = this.state.tablesByKey()[tableKey];
-        if (!table)
+    reloadByKey(itemKey) {
+        const item = this.state.itemsByKey()[itemKey];
+        if (!item)
             return;
-        this.loadTable(table.key, table.config, table.skip, table.take, true);
+        this.loadItem(item, true);
     }
     toggleExpanded(key) {
         this.state.toggleExpanded(key);
     }
-    slotGridSpan(span) {
-        return `span ${span} / span ${span}`;
-    }
-    templateContext(table) {
+    templateContext(item) {
         return {
-            $implicit: table,
-            table,
+            $implicit: item,
+            table: item,
         };
     }
+    defaultTitle(item) {
+        if (item.type === 'informative') {
+            return 'Informative Dashboard';
+        }
+        return item.areaType === 'cards' ? 'Cards' : 'Table';
+    }
     ngOnDestroy() {
         this.subscriptions.forEach((sub) => sub.unsubscribe());
         this.subscriptions.clear();
     }
-    configureTables(configs) {
-        const previousTables = this.state.tablesByKey();
+    configureItems(configs) {
+        const previousItems = this.state.itemsByKey();
         const hasMultipleConfigs = (configs ?? []).length > 1;
         const normalized = (configs ?? []).map((config, index) => {
-            const mode = this.resolveMode(config.mode, config.columnKeys);
-            const isPaginated = config.isPaginated ?? true;
-            const take = isPaginated
-                ? (config.take ?? this.defaultTake())
-                : LOCAL_PAGE_SIZE_SOURCE;
+            const type = this.resolveType(config.type);
+            const isInformative = type === 'informative';
+            const areaType = isInformative
+                ? DEFAULT_AREA_TYPE
+                : this.resolveAreaType(config.areaType);
+            const mode = isInformative
+                ? DEFAULT_MODE
+                : this.resolveMode(config.mode, config.columnKeys);
+            const isPaginated = !isInformative &&
+                areaType === 'table' &&
+                (config.isPaginated ?? true);
+            const take = !isInformative && areaType === 'table'
+                ? isPaginated
+                    ? (config.take ?? this.defaultTake())
+                    : LOCAL_PAGE_SIZE_SOURCE
+                : 0;
             const collapseEnabled = (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 current = previousTables[key];
+            const existing = previousItems[key];
+            const normalizedConfig = this.toNormalizedConfig(config, type, areaType, mode, isPaginated, take, collapseEnabled, layout);
+            if (isInformative) {
+                return {
+                    key,
+                    config: normalizedConfig,
+                    type: 'informative',
+                    areaType: 'table',
+                    loading: false,
+                    error: null,
+                    title: config.title?.trim() || '',
+                    moduleKey: '',
+                    totalCount: 0,
+                    columns: [],
+                    rows: [],
+                    cards: [],
+                    skip: 0,
+                    take: 0,
+                    expanded: existing?.expanded ?? config.collapse?.expandedByDefault ?? true,
+                    dashboardData: existing?.dashboardData ?? null,
+                };
+            }
+            if (areaType === 'cards') {
+                return {
+                    key,
+                    config: normalizedConfig,
+                    type: 'form',
+                    areaType: 'cards',
+                    loading: false,
+                    error: null,
+                    title: config.title?.trim() || '',
+                    moduleKey: '',
+                    totalCount: 0,
+                    columns: [],
+                    rows: [],
+                    cards: [],
+                    skip: 0,
+                    take: 0,
+                    expanded: existing?.expanded ?? config.collapse?.expandedByDefault ?? true,
+                    dashboardData: null,
+                };
+            }
             return {
                 key,
-                config: this.toNormalizedConfig(config, mode, isPaginated, take, collapseEnabled, layout),
+                config: normalizedConfig,
+                type: 'form',
+                areaType: 'table',
                 loading: false,
                 error: null,
                 title: config.title?.trim() || '',
                 moduleKey: '',
+                totalCount: 0,
                 columns: [],
                 rows: [],
-                skip: current?.skip ?? 0,
+                cards: [],
+                skip: existing?.areaType === 'table' ? existing.skip : 0,
                 take,
-                totalCount: 0,
-                expanded: config.collapse?.expandedByDefault ?? true,
+                expanded: existing?.expanded ?? config.collapse?.expandedByDefault ?? true,
+                dashboardData: null,
             };
         });
         this.state.setConfigs(normalized);
-        this.cleanupStaleResources(new Set(normalized.map((table) => table.key)));
+        this.cleanupStaleResources(new Set(normalized.map((item) => item.key)));
+    }
+    loadItem(item, force = false) {
+        if (item.type === 'informative') {
+            this.loadInformative(item.key, item.config, force);
+            return;
+        }
+        if (item.areaType === 'cards') {
+            this.loadCards(item.key, item.config, force);
+            return;
+        }
+        this.loadTable(item.key, item.config, item.skip, item.take, force);
     }
     loadTable(key, config, skip, take, force = false) {
         if (!this.hasValidIdentifiers(config)) {
             this.state.setLoading(key, false);
-            this.state.setError(key, 'Missing identifiers: levelId, levelDataId and moduleId are required');
+            this.state.setError(key, this.getMissingIdentifiersMessage(config));
             return;
         }
-        const query = this.toQuery(config, skip, take);
-        const requestSignature = this.createRequestSignature(config, query);
+        const query = this.toTableQuery(config, skip, take);
+        const requestSignature = this.createTableRequestSignature(config, query);
         if (force) {
             this.inFlightRequestSignatures.delete(key);
             this.fulfilledRequestSignatures.delete(key);
@@ -292,16 +601,117 @@ class ClientList {
         });
         this.subscriptions.set(key, sub);
     }
+    loadCards(key, config, force = false) {
+        if (!this.hasValidIdentifiers(config)) {
+            this.state.setLoading(key, false);
+            this.state.setError(key, this.getMissingIdentifiersMessage(config));
+            return;
+        }
+        const requestSignature = this.createCardsRequestSignature(config);
+        if (force) {
+            this.inFlightRequestSignatures.delete(key);
+            this.fulfilledRequestSignatures.delete(key);
+        }
+        else if (this.inFlightRequestSignatures.get(key) === requestSignature ||
+            this.fulfilledRequestSignatures.get(key) === requestSignature) {
+            return;
+        }
+        this.subscriptions.get(key)?.unsubscribe();
+        this.inFlightRequestSignatures.set(key, requestSignature);
+        this.state.setLoading(key, true);
+        this.state.setError(key, null);
+        const sub = this.api
+            .getCards(config.levelDataId, config.moduleId)
+            .subscribe({
+            next: (response) => {
+                if (response.data) {
+                    this.state.setCardsResult(key, response.data, config);
+                    this.fulfilledRequestSignatures.set(key, requestSignature);
+                    this.loaded.emit(key);
+                }
+                else {
+                    const message = response.message ?? 'Failed to load cards';
+                    this.state.setError(key, message);
+                    this.errored.emit({ key, message });
+                }
+                this.state.setLoading(key, false);
+                this.inFlightRequestSignatures.delete(key);
+            },
+            error: (error) => {
+                const message = error?.error?.message ?? error?.message ?? 'Failed to load cards';
+                this.state.setError(key, message);
+                this.state.setLoading(key, false);
+                this.inFlightRequestSignatures.delete(key);
+                this.errored.emit({ key, message });
+            },
+        });
+        this.subscriptions.set(key, sub);
+    }
+    loadInformative(key, config, force = false) {
+        if (!this.hasValidIdentifiers(config)) {
+            this.state.setLoading(key, false);
+            this.state.setError(key, this.getMissingIdentifiersMessage(config));
+            return;
+        }
+        const requestSignature = this.createInformativeRequestSignature(config);
+        if (force) {
+            this.inFlightRequestSignatures.delete(key);
+            this.fulfilledRequestSignatures.delete(key);
+        }
+        else if (this.inFlightRequestSignatures.get(key) === requestSignature ||
+            this.fulfilledRequestSignatures.get(key) === requestSignature) {
+            return;
+        }
+        this.subscriptions.get(key)?.unsubscribe();
+        this.inFlightRequestSignatures.set(key, requestSignature);
+        this.state.setLoading(key, true);
+        this.state.setError(key, null);
+        const sub = this.api.getInformativeDashboard(config.moduleId).subscribe({
+            next: (response) => {
+                this.state.setInformativeResult(key, response.data ?? null, config);
+                this.fulfilledRequestSignatures.set(key, requestSignature);
+                this.loaded.emit(key);
+                this.state.setLoading(key, false);
+                this.inFlightRequestSignatures.delete(key);
+            },
+            error: (error) => {
+                if (error?.status === 404) {
+                    this.state.setInformativeResult(key, null, config);
+                    this.fulfilledRequestSignatures.set(key, requestSignature);
+                    this.loaded.emit(key);
+                    this.state.setLoading(key, false);
+                    this.inFlightRequestSignatures.delete(key);
+                    return;
+                }
+                const message = error?.error?.message ??
+                    error?.message ??
+                    'Failed to load informative dashboard';
+                this.state.setError(key, message);
+                this.state.setLoading(key, false);
+                this.inFlightRequestSignatures.delete(key);
+                this.errored.emit({ key, message });
+            },
+        });
+        this.subscriptions.set(key, sub);
+    }
+    resolveAreaType(areaType) {
+        return areaType === 'cards' ? 'cards' : DEFAULT_AREA_TYPE;
+    }
+    resolveType(type) {
+        return type === 'informative' ? 'informative' : DEFAULT_TYPE;
+    }
     resolveMode(mode, columnKeys) {
         if (mode !== 'override')
             return DEFAULT_MODE;
         return (columnKeys ?? []).length > 0 ? 'override' : DEFAULT_MODE;
     }
-    toNormalizedConfig(config, mode, isPaginated, take, collapseEnabled, layout) {
+    toNormalizedConfig(config, type, areaType, mode, isPaginated, take, collapseEnabled, layout) {
         return {
             levelId: config.levelId,
             levelDataId: config.levelDataId,
             moduleId: config.moduleId,
+            type,
+            areaType,
             mode,
             isPaginated,
             take,
@@ -356,7 +766,7 @@ class ClientList {
             }
         }
     }
-    toQuery(config, skip, take) {
+    toTableQuery(config, skip, take) {
         return {
             mode: config.mode,
             columnKeys: config.mode === 'override' ? config.columnKeys : undefined,
@@ -364,8 +774,10 @@ class ClientList {
             take: config.isPaginated ? take : LOCAL_PAGE_SIZE_SOURCE,
         };
     }
-    createRequestSignature(config, query) {
+    createTableRequestSignature(config, query) {
         return [
+            config.type,
+            config.areaType,
             config.levelId,
             config.levelDataId,
             config.moduleId,
@@ -375,20 +787,53 @@ class ClientList {
             ...(query.columnKeys ?? []),
         ].join('|');
     }
+    createCardsRequestSignature(config) {
+        return [
+            config.type,
+            config.areaType,
+            config.levelDataId,
+            config.moduleId,
+            'card',
+        ].join('|');
+    }
+    createInformativeRequestSignature(config) {
+        return [config.type, config.moduleId, 'dashboard'].join('|');
+    }
     hasValidIdentifiers(config) {
+        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.areaType === 'cards') {
+            return hasLevelDataId && hasModuleId;
+        }
         return (Number.isFinite(config.levelId) &&
             config.levelId > 0 &&
-            Number.isFinite(config.levelDataId) &&
-            config.levelDataId > 0 &&
-            Number.isFinite(config.moduleId) &&
-            config.moduleId > 0);
+            hasLevelDataId &&
+            hasModuleId);
+    }
+    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';
     }
     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\">\r\n  @for (table of tables(); track table.key) {\r\n    <section class=\"flex flex-col gap-4\">\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 (table.config.collapse.enabled) {\r\n            <mt-button\r\n              variant=\"text\"\r\n              severity=\"secondary\"\r\n              [icon]=\"\r\n                table.expanded\r\n                  ? table.config.collapse.collapseIcon\r\n                  : table.config.collapse.expandIcon\r\n              \"\r\n              (onClick)=\"toggleExpanded(table.key)\"\r\n            />\r\n          }\r\n          <h3 class=\"m-0 text-lg font-bold\">\r\n            {{ table.title || table.moduleKey || \"Table\" }}\r\n          </h3>\r\n          @if (table.config.headerStart) {\r\n            <div class=\"flex items-center gap-2\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"table.config.headerStart\"\r\n                [ngTemplateOutletContext]=\"templateContext(table)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (table.config.headerEnd) {\r\n          <div class=\"ml-auto flex shrink-0 items-center gap-2\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"table.config.headerEnd\"\r\n              [ngTemplateOutletContext]=\"templateContext(table)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      @if (table.expanded || !table.config.collapse.enabled) {\r\n        <div\r\n          class=\"grid gap-4\"\r\n          [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n        >\r\n          @if (table.config.contentStart) {\r\n            <div\r\n              [style.gridColumn]=\"slotGridSpan(table.config.layout.startSpan)\"\r\n            >\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=\"p-3 rounded-lg bg-red-50 text-red-700 border border-red-200 text-sm\"\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                  [loading]=\"table.loading\"\r\n                  [lazy]=\"table.config.isPaginated\"\r\n                  [lazyTotalRecords]=\"table.totalCount\"\r\n                  [pageSize]=\"table.config.isPaginated ? table.take : 10\"\r\n                  (lazyLoad)=\"onLazyLoad(table.key, $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      }\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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { 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: "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: "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: 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\">\r\n  @for (item of items(); track item.key) {\r\n    <section class=\"flex flex-col gap-4\">\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      @if (item.expanded || !item.config.collapse.enabled) {\r\n        @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            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n          />\r\n        } @else {\r\n          <mt-client-list-cards-view [state]=\"item\" />\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"], 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientList, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-client-list', standalone: true, imports: [CommonModule, Card, Table, Button, SkeletonModule], providers: [ClientListStateService], template: "<div class=\"flex flex-col gap-4\">\r\n  @for (table of tables(); track table.key) {\r\n    <section class=\"flex flex-col gap-4\">\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 (table.config.collapse.enabled) {\r\n            <mt-button\r\n              variant=\"text\"\r\n              severity=\"secondary\"\r\n              [icon]=\"\r\n                table.expanded\r\n                  ? table.config.collapse.collapseIcon\r\n                  : table.config.collapse.expandIcon\r\n              \"\r\n              (onClick)=\"toggleExpanded(table.key)\"\r\n            />\r\n          }\r\n          <h3 class=\"m-0 text-lg font-bold\">\r\n            {{ table.title || table.moduleKey || \"Table\" }}\r\n          </h3>\r\n          @if (table.config.headerStart) {\r\n            <div class=\"flex items-center gap-2\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"table.config.headerStart\"\r\n                [ngTemplateOutletContext]=\"templateContext(table)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (table.config.headerEnd) {\r\n          <div class=\"ml-auto flex shrink-0 items-center gap-2\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"table.config.headerEnd\"\r\n              [ngTemplateOutletContext]=\"templateContext(table)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      @if (table.expanded || !table.config.collapse.enabled) {\r\n        <div\r\n          class=\"grid gap-4\"\r\n          [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n        >\r\n          @if (table.config.contentStart) {\r\n            <div\r\n              [style.gridColumn]=\"slotGridSpan(table.config.layout.startSpan)\"\r\n            >\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=\"p-3 rounded-lg bg-red-50 text-red-700 border border-red-200 text-sm\"\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                  [loading]=\"table.loading\"\r\n                  [lazy]=\"table.config.isPaginated\"\r\n                  [lazyTotalRecords]=\"table.totalCount\"\r\n                  [pageSize]=\"table.config.isPaginated ? table.take : 10\"\r\n                  (lazyLoad)=\"onLazyLoad(table.key, $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      }\r\n    </section>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-client-list', standalone: true, imports: [
+                        CommonModule,
+                        Button,
+                        ClientListTableView,
+                        ClientListCardsView,
+                        ClientListInformativeView,
+                    ], 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      <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      @if (item.expanded || !item.config.collapse.enabled) {\r\n        @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            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n          />\r\n        } @else {\r\n          <mt-client-list-cards-view [state]=\"item\" />\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"] }] } });
 
 /**