@masterteam/client-components 0.0.6 → 0.0.8

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

@@ -113,6 +113,7 @@ class ClientListStateService {
                 take,
                 totalCount,
                 error: null,
+                rawData: response,
             },
         });
     }
@@ -143,6 +144,7 @@ class ClientListStateService {
                 take: 0,
                 totalCount: cards.length,
                 error: null,
+                rawData: response,
             },
         });
     }
@@ -170,6 +172,7 @@ class ClientListStateService {
                 totalCount: chartsCount,
                 dashboardData,
                 error: null,
+                rawData: response,
             },
         });
     }
@@ -205,6 +208,7 @@ class ClientListStateService {
             take: existing.take,
             expanded: existing.expanded,
             dashboardData: existing.dashboardData,
+            rawData: existing.rawData,
         };
     }
     getVisibleColumns(columns) {
@@ -344,12 +348,22 @@ class ClientListTableView {
     slotGridSpan(span) {
         return `span ${span} / span ${span}`;
     }
+    templateContext(item) {
+        return {
+            $implicit: item,
+            table: item,
+            item,
+            loading: item.loading,
+            error: item.error,
+            data: item.rawData,
+        };
+    }
     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\">\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          [rowActions]=\"rowActions()\"\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"] }] });
+    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"] }] });
 }
 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          [rowActions]=\"rowActions()\"\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" }]
+            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"] }] } });
 
 class ClientListCardsView {
@@ -371,12 +385,22 @@ class ClientListInformativeView {
     slotGridSpan(span) {
         return `span ${span} / span ${span}`;
     }
+    templateContext(item) {
+        return {
+            $implicit: item,
+            table: item,
+            item,
+            loading: item.loading,
+            error: item.error,
+            data: item.rawData,
+        };
+    }
     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"] }] });
+    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"] }] });
 }
 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" }]
+            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" }]
         }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }] } });
 
 const DEFAULT_AREA_TYPE = 'table';
@@ -444,6 +468,10 @@ class ClientList {
         return {
             $implicit: item,
             table: item,
+            item,
+            loading: item.loading,
+            error: item.error,
+            data: item.rawData,
         };
     }
     defaultTitle(item) {
@@ -500,6 +528,7 @@ class ClientList {
                     take: 0,
                     expanded: existing?.expanded ?? config.collapse?.expandedByDefault ?? true,
                     dashboardData: existing?.dashboardData ?? null,
+                    rawData: existing?.rawData ?? null,
                 };
             }
             if (areaType === 'cards') {
@@ -520,6 +549,7 @@ class ClientList {
                     take: 0,
                     expanded: existing?.expanded ?? config.collapse?.expandedByDefault ?? true,
                     dashboardData: null,
+                    rawData: existing?.rawData ?? null,
                 };
             }
             return {
@@ -539,6 +569,7 @@ class ClientList {
                 take,
                 expanded: existing?.expanded ?? config.collapse?.expandedByDefault ?? true,
                 dashboardData: null,
+                rawData: existing?.rawData ?? null,
             };
         });
         this.state.setConfigs(normalized);
@@ -579,10 +610,11 @@ class ClientList {
             .getRows(config.levelId, config.levelDataId, config.moduleId, query)
             .subscribe({
             next: (response) => {
+                let hasLoadedData = false;
                 if (response.data) {
                     this.state.setRowsResult(key, response.data, config, query.skip, query.take);
                     this.fulfilledRequestSignatures.set(key, requestSignature);
-                    this.loaded.emit(key);
+                    hasLoadedData = true;
                 }
                 else {
                     const message = response.message ?? 'Failed to load table rows';
@@ -591,6 +623,10 @@ class ClientList {
                 }
                 this.state.setLoading(key, false);
                 this.inFlightRequestSignatures.delete(key);
+                if (hasLoadedData) {
+                    this.notifyDataLoaded(key);
+                    this.loaded.emit(key);
+                }
             },
             error: (error) => {
                 const message = error?.error?.message ?? error?.message ?? 'Failed to load rows';
@@ -625,10 +661,11 @@ class ClientList {
             .getCards(config.levelDataId, config.moduleId)
             .subscribe({
             next: (response) => {
+                let hasLoadedData = false;
                 if (response.data) {
                     this.state.setCardsResult(key, response.data, config);
                     this.fulfilledRequestSignatures.set(key, requestSignature);
-                    this.loaded.emit(key);
+                    hasLoadedData = true;
                 }
                 else {
                     const message = response.message ?? 'Failed to load cards';
@@ -637,6 +674,10 @@ class ClientList {
                 }
                 this.state.setLoading(key, false);
                 this.inFlightRequestSignatures.delete(key);
+                if (hasLoadedData) {
+                    this.notifyDataLoaded(key);
+                    this.loaded.emit(key);
+                }
             },
             error: (error) => {
                 const message = error?.error?.message ?? error?.message ?? 'Failed to load cards';
@@ -671,17 +712,19 @@ class ClientList {
             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);
+                this.notifyDataLoaded(key);
+                this.loaded.emit(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);
+                    this.notifyDataLoaded(key);
+                    this.loaded.emit(key);
                     return;
                 }
                 const message = error?.error?.message ??
@@ -722,7 +765,9 @@ class ClientList {
             headerEnd: config.headerEnd,
             contentStart: config.contentStart,
             contentEnd: config.contentEnd,
+            templateContent: config.templateContent,
             rowActions: config.rowActions ?? [],
+            dataLoaded: config.dataLoaded,
             collapse: {
                 enabled: collapseEnabled,
                 expandedByDefault: config.collapse?.expandedByDefault ?? true,
@@ -768,6 +813,13 @@ class ClientList {
             }
         }
     }
+    notifyDataLoaded(key) {
+        const item = this.state.itemsByKey()[key];
+        if (!item) {
+            return;
+        }
+        item.config.dataLoaded?.(this.templateContext(item));
+    }
     toTableQuery(config, skip, take) {
         return {
             mode: config.mode,
@@ -825,7 +877,7 @@ class ClientList {
         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 (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            [rowActions]=\"item.config.rowActions\"\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", "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" }, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientList, decorators: [{
             type: Component,
@@ -835,7 +887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         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            [rowActions]=\"item.config.rowActions\"\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" }]
+                    ], 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"] }] } });
 
 /**