@planeasyinc/le-angular 0.0.8 → 0.0.10

package/dist/fesm2022/planeasyinc-le-angular.mjs

@@ -1,14 +1,15 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, Injectable, computed, effect, untracked, Directive, input, ChangeDetectionStrategy, Component, output, forwardRef, ViewContainerRef, Renderer2, ElementRef, DestroyRef, viewChild } from '@angular/core';
+import { InjectionToken, inject, signal, Injectable, computed, effect, untracked, Directive, input, ChangeDetectionStrategy, Component, output, forwardRef, ViewContainerRef, Injector, Renderer2, ElementRef, DestroyRef, viewChild } from '@angular/core';
 import { HttpContextToken, HttpClient, HttpContext, HttpRequest, HttpEventType } from '@angular/common/http';
 import { map, filter, distinctUntilChanged, BehaviorSubject, Subject, takeUntil, firstValueFrom, of, tap, catchError, from, concatMap, finalize, fromEvent, startWith } from 'rxjs';
 import { decodeJwt, UrlFragmentBuilder, normalizeConfig } from '@planeasyinc/le-core';
-import { Location, JsonPipe, ViewportScroller } from '@angular/common';
+import { Location, JsonPipe, DatePipe, ViewportScroller } from '@angular/common';
 import { CdkDrag } from '@angular/cdk/drag-drop';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { DataSource, CdkTable, CdkColumnDef, CdkHeaderCell, CdkHeaderCellDef, CdkCell, CdkCellDef, CdkHeaderRowDef, CdkHeaderRow, CdkRow, CdkRowDef } from '@angular/cdk/table';
+import { DIALOG_DATA, Dialog, DialogModule } from '@angular/cdk/dialog';
 import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
 import { A11yModule } from '@angular/cdk/a11y';
 import { adaptOld } from '@planeasyinc/fe-adapters-old';
@@ -98,10 +99,10 @@ class LEApiService {
             context: new HttpContext().set(IS_LIBRARY_REQUEST, true),
         });
     }
-    getObjectByAddress(address, includeVersions, includeMeta) {
+    getObjectByAddress(address, params) {
         const url = new UrlFragmentBuilder(this.apiUrl())
             .setFragment(`api/objects/${address}/`)
-            .setQuery(`all_versions=${includeVersions}&include_metadata=${includeMeta}&load_references=false&file_optimized=true`)
+            .setQuery(`all_versions=${params.includeVersions ?? false}&include_metadata=${params.includeMeta ?? false}&load_references=${params.loadReferences ?? false}&file_optimized=${params.fileOptimized ?? true}`)
             .build();
         return this.http.get(url, {
             context: new HttpContext().set(IS_LIBRARY_REQUEST, true),
@@ -392,12 +393,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
-const chevron = {
-    name: 'chevron',
+const history = {
+    name: 'history',
     viewBox: '0 -960 960 960',
     content: [
-        'M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'
-    ]
+        'M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z',
+    ],
+};
+
+const close = {
+    name: 'close',
+    viewBox: '0 -960 960 960',
+    content: [
+        'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',
+    ],
 };
 
 const arrowDown = {
@@ -416,12 +425,12 @@ const sort = {
     ]
 };
 
-const close = {
-    name: 'close',
+const chevron = {
+    name: 'chevron',
     viewBox: '0 -960 960 960',
     content: [
-        'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',
-    ],
+        'M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'
+    ]
 };
 
 const ICONS_MAP = {
@@ -429,6 +438,7 @@ const ICONS_MAP = {
     'arrow-down': arrowDown,
     sort: sort,
     close: close,
+    history: history,
 };
 
 class LeIconComponent {
@@ -558,8 +568,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 
 class ChartViewComponent {
     node = input.required();
+    config = input();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChartViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: ChartViewComponent, isStandalone: true, selector: "chart-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<h2>{{ node()?.title }}</h2>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: ChartViewComponent, isStandalone: true, selector: "chart-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h2>{{ node()?.title }}</h2>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChartViewComponent, decorators: [{
             type: Component,
@@ -568,15 +579,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 
 class GridComponent {
     node = input.required();
+    config = input();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: GridComponent, isStandalone: true, selector: "grid-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.le-gird-view": "true", "style.grid-template-columns": "node().layout.columns ?? 1" } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: GridComponent, isStandalone: true, selector: "grid-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.le-gird-view": "true", "style.grid-template-columns": "node().layout.columns ?? 1" } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'grid-view', imports: [forwardRef(() => NodeComponent)], host: {
                         '[class.le-gird-view]': 'true',
                         '[style.grid-template-columns]': 'node().layout.columns ?? 1',
-                    }, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n" }]
+                    }, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\"></le-node>\n}\n" }]
         }] });
 
 class TableDataSource extends DataSource {
@@ -588,6 +600,9 @@ class TableDataSource extends DataSource {
         super();
         this.data = new BehaviorSubject(data);
     }
+    getValueByIndex(index) {
+        return this.data.value[index];
+    }
     connect() {
         return this.data;
     }
@@ -833,30 +848,34 @@ class ReferenceTemplate {
     data = input.required();
     attribute = input.required();
     metadata = input.required();
+    clicked = output();
     reference = computed(() => {
-        const data = this.data();
+        const ref = this.data()?.ref;
         return {
-            text: this.generateText(data),
-            href: this.generateLink(data),
+            text: this.generateText(ref),
+            href: this.generateLink(ref),
         };
     });
     onClick(event) {
+        event.preventDefault();
         event.stopImmediatePropagation();
+        this.clicked.emit(this.data());
     }
-    generateText(data) {
-        if (data && data.ref) {
-            return data.ref.display_name || data.ref.object_id;
+    generateText(ref) {
+        if (ref) {
+            return ref.display_name || ref.object_id;
         }
         return '';
     }
-    generateLink(data) {
-        if (data && data.ref) {
-            const href = `/details/object/${data.ref.class_name}/${data.ref.resource}%2523${data.ref.class_name}%253A${data.ref.class_version}%253A${data.ref.object_id}%253A${data.ref.object_version}`;
-            return data.ref?.address ? `${href}?address=${data.ref.address}` : href;
+    generateLink(ref) {
+        if (ref) {
+            // statedb%23Tag%3ALATEST%3Atag_01%3ALATEST
+            const href = `/details/object/${ref.class_name}/${ref.resource}%2523${ref.class_name}%253A${ref.class_version}%253A${ref.object_id}%253A${ref.object_version}`;
+            return ref?.address ? `${href}?address=${ref.address}` : href;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReferenceTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ReferenceTemplate, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, attribute: { classPropertyName: "attribute", publicName: "attribute", isSignal: true, isRequired: true, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ReferenceTemplate, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, attribute: { classPropertyName: "attribute", publicName: "attribute", isSignal: true, isRequired: true, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
     <span class="le-table-template le-template-reference">
       @if (reference(); as reference) {
         @if (reference.href) {
@@ -932,6 +951,7 @@ class TableViewCellDirective {
     data = input.required();
     column = input();
     metadata = input();
+    clicked = output();
     constructor() {
         this.setEffects();
     }
@@ -955,12 +975,16 @@ class TableViewCellDirective {
                     if (metadata) {
                         this.componentRef?.setInput('metadata', metadata);
                     }
+                    const sub = (this.componentRef?.instance).clicked.subscribe(data => {
+                        this.clicked.emit(data);
+                    });
+                    this.componentRef?.onDestroy(() => sub.unsubscribe());
                 }
             });
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TableViewCellDirective, isStandalone: true, selector: "[tableViewCell]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TableViewCellDirective, isStandalone: true, selector: "[tableViewCell]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewCellDirective, decorators: [{
             type: Directive,
@@ -969,11 +993,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+class DialogComponent {
+    data = inject(DIALOG_DATA);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: DialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n  <div>{{ data.title }}</div>\n}\n\n@if (data.node) {\n  <le-node [node]=\"data.node\" [config]=\"data.config\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [forwardRef(() => NodeComponent)], template: "@if (data.title) {\n  <div>{{ data.title }}</div>\n}\n\n@if (data.node) {\n  <le-node [node]=\"data.node\" [config]=\"data.config\"></le-node>\n}\n" }]
+        }] });
+
+class LeDialogService {
+    dialog = inject(Dialog);
+    open(data, config = {}) {
+        const dialogRef = this.dialog.open(DialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vw',
+            minWidth: '40vw',
+            panelClass: 'le-dialog-container',
+            data,
+            injector: config?.injector,
+        });
+        return dialogRef.closed;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class TableViewComponent {
     apiService = inject(LEApiService);
     dataService = inject(LEDataService);
     filtersService = inject(LEFiltersService);
+    dialogService = inject(LeDialogService);
+    injector = inject(Injector);
     node = input.required();
+    config = input();
     _columns = signal([]);
     _data = signal(new TableDataSource());
     _total = signal(0);
@@ -988,7 +1048,18 @@ class TableViewComponent {
     columns = this._columns.asReadonly();
     data = this._data.asReadonly();
     displayedColumns = computed(() => {
-        return this.columns().map((column) => column.key);
+        const result = [];
+        const firstRow = this.data().getValueByIndex(0);
+        const columnKeys = this.columns().map((column) => column.key);
+        const hasVersion = !!(firstRow && firstRow._metadata && firstRow._metadata.object_version);
+        if (!this.config()?.hideMetadata && hasVersion) {
+            result.push('versions');
+        }
+        result.push(...columnKeys);
+        if (hasVersion) {
+            result.push('modified');
+        }
+        return result;
     });
     isLoading = this._isLoading.asReadonly();
     pageIndex = this._pageIndex.asReadonly();
@@ -1045,6 +1116,39 @@ class TableViewComponent {
         const actions = this.node().actions?.onRowClick ?? [];
         actions.forEach((action) => this.processTableAction(action, row));
     }
+    onRowVersionClick(event, row) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        const node = {
+            id: row._metadata.lakehouse_address,
+            type: 'table',
+            title: 'Versions',
+            dataSource: {
+                kind: 'object',
+                entity: row._metadata.lakehouse_address,
+                params: {
+                    includeVersions: true,
+                    includeMeta: true,
+                    loadReferences: false,
+                    fileOptimized: true,
+                },
+            },
+        };
+        this.dialogService
+            .open({ node, config: { hideFilters: true, hideMetadata: true, showCloseButton: true } }, { injector: this.injector })
+            .subscribe();
+    }
+    onCellClicked(data) {
+        const path = `${data.ref.resource}%23${data.ref.class_name}%3A${data.ref.class_version}%3A${data.ref.object_id}%3A${data.ref.object_version}`;
+        this.dataService.setView({
+            id: path,
+            type: 'form',
+            controlSource: {
+                kind: 'object',
+                entity: path,
+            },
+        });
+    }
     processTableAction(action, row) {
         if (action.type === 'update_form') {
             const dataSource = action.dataSource;
@@ -1088,6 +1192,9 @@ class TableViewComponent {
             const body = Object.assign({}, node.dataSource.params, buildRequestBody(ctx));
             this.apiService.executeTransaction(node.dataSource.entity, body);
         }
+        if (node.dataSource?.kind === 'object') {
+            return this.apiService.getObjectByAddress(node.dataSource.entity, node.dataSource.params ?? {});
+        }
         throw new Error(`Datasource type should be class or transaction. Received: ${node.dataSource?.kind}`);
     }
     handleTableDataSuccessResponse(response) {
@@ -1095,7 +1202,10 @@ class TableViewComponent {
         this._data.set(new TableDataSource(response.rows));
         this._total.set(response.total ?? response.rows.length);
         this._isLoading.set(false);
-        this.filtersService.setOptions(this.getFilters(response.columns));
+        const showFilters = !this.config()?.hideFilters;
+        if (showFilters) {
+            this.filtersService.setOptions(this.getFilters(response.columns));
+        }
     }
     handleTableDataErrorResponse(error) {
         console.error(error);
@@ -1103,7 +1213,6 @@ class TableViewComponent {
         this._data.set(new TableDataSource());
         this._total.set(0);
         this._isLoading.set(false);
-        // this.filtersService.setOptions(this.getFilters([]));
     }
     getFilters(columns) {
         return columns.reduce((acc, column) => {
@@ -1172,7 +1281,7 @@ class TableViewComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewComponent, isStandalone: true, selector: "table-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"le-toolbar\">\n  @if (node(); as node) {\n    <h2>{{ node?.title }}</h2>\n\n\n    <span class=\"spacer\"></span>\n\n    @if (filters().length) {\n      <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n    }\n\n    @if (node.actions?.tableActions) {\n      <table-view-actions\n        [actions]=\"node.actions!.tableActions\"\n        (actionClicked)=\"onToolbarActionClick($event)\"\n      ></table-view-actions>\n    }\n  }\n</div>\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      @for (column of columns(); track column) {\n        <ng-container [cdkColumnDef]=\"column.key\">\n          <th\n            class=\"le-table-header-cell\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n            [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n            (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n          >\n            <div class=\"le-cell-content\">\n              <ng-template\n                tableViewCell\n                [data]=\"column.label\"\n                [type]=\"column.column_format?.headerTemplate\"\n              ></ng-template>\n\n              @if (sortColumnKeys().has(column.key)) {\n                <div class=\"le-sort-container\">\n                  @if (sortMap().has(column.key)) {\n                    <div class=\"le-sort-icon\">\n                      <i\n                        class=\"le-sort-arrow\"\n                        [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n                        [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n                      ></i>\n                    </div>\n\n                    <div class=\"le-sort-order\">\n                      @if (sortOrder().has(column.key)) {\n                        <span>\n                          {{ sortOrder().get(column.key) }}\n                        </span>\n                      }\n                    </div>\n                  } @else {\n                    <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n                  }\n                </div>\n              }\n            </div>\n          </th>\n\n          <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n            <ng-template\n              tableViewCell\n              [data]=\"row[column.key]\"\n              [type]=\"column.column_format?.cellTemplate\"\n              [column]=\"column\"\n              [metadata]=\"row._metadata\"\n            ></ng-template>\n          </td>\n        </ng-container>\n      }\n\n      <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n      <tr\n        cdk-row\n        class=\"le-table-row\"\n        [tabindex]=\"0\"\n        [class.le-table-row--clickable]=\"hasRowClickAction()\"\n        *cdkRowDef=\"let row; columns: displayedColumns()\"\n        (click)=\"onRowClick(row)\"\n      ></tr>\n    </table>\n  }\n</div>\n\n@if (data().count === 0) {\n  @if (isLoading()) {\n    <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n  } @else {\n    <div class=\"no-entities\">\n      <span>No Entities</span>\n    </div>\n  }\n}\n", dependencies: [{ kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: TableViewPaginationComponent, selector: "table-view-pagination", inputs: ["pageSize", "pageSizeOptions", "entriesCount"], outputs: ["pageChange"] }, { kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: TableViewActions, selector: "table-view-actions", inputs: ["actions"], outputs: ["actionClicked"] }, { kind: "directive", type: TableViewCellDirective, selector: "[tableViewCell]", inputs: ["type", "data", "column", "metadata"] }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewComponent, isStandalone: true, selector: "table-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"le-toolbar\">\n  @if (node(); as node) {\n    <h2>{{ node?.title }}</h2>\n\n\n    <span class=\"spacer\"></span>\n\n    @if (filters().length) {\n      <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n    }\n\n    @if (node.actions?.tableActions) {\n      <table-view-actions\n        [actions]=\"node.actions!.tableActions\"\n        (actionClicked)=\"onToolbarActionClick($event)\"\n      ></table-view-actions>\n    }\n  }\n</div>\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      <!--   Version column   -->\n      <ng-container cdkColumnDef=\"versions\">\n        <th class=\"le-table-header-cell le-table-icon-cell\" cdk-header-cell *cdkHeaderCellDef>\n          <le-icon size=\"16\" class=\"le-icon\" name=\"history\"></le-icon>\n        </th>\n\n        <td class=\"le-table-cell le-table-icon-cell\" cdk-cell *cdkCellDef=\"let row\">\n          <button class=\"le-button le-button-basic le-button--success\" aria-label=\"View versions\" (click)=\"onRowVersionClick($event, row)\">\n            <le-icon size=\"16\" class=\"le-icon\" name=\"history\"></le-icon>\n          </button>\n        </td>\n      </ng-container>\n      <!--   Modified column   -->\n      <ng-container cdkColumnDef=\"modified\">\n        <th class=\"le-table-header-cell\" cdk-header-cell *cdkHeaderCellDef>\n          <div class=\"le-cell-content\">\n            Modified\n          </div>\n        </th>\n\n        <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n          <span class=\"le-table-template le-template-string\">\n            {{ row._metadata.updated_at | date:'medium' }}\n          </span>\n        </td>\n      </ng-container>\n\n      <!--   Columns   -->\n      @for (column of columns(); track column) {\n        <ng-container [cdkColumnDef]=\"column.key\">\n          <th\n            class=\"le-table-header-cell\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n            [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n            (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n          >\n            <div class=\"le-cell-content\">\n              <ng-template\n                tableViewCell\n                [data]=\"column.label\"\n                [type]=\"column.column_format?.headerTemplate\"\n              ></ng-template>\n\n              @if (sortColumnKeys().has(column.key)) {\n                <div class=\"le-sort-container\">\n                  @if (sortMap().has(column.key)) {\n                    <div class=\"le-sort-icon\">\n                      <i\n                        class=\"le-sort-arrow\"\n                        [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n                        [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n                      ></i>\n                    </div>\n\n                    <div class=\"le-sort-order\">\n                      @if (sortOrder().has(column.key)) {\n                        <span>\n                          {{ sortOrder().get(column.key) }}\n                        </span>\n                      }\n                    </div>\n                  } @else {\n                    <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n                  }\n                </div>\n              }\n            </div>\n          </th>\n\n          <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n            <ng-template\n              tableViewCell\n              [data]=\"row[column.key]\"\n              [type]=\"column.column_format?.cellTemplate\"\n              [column]=\"column\"\n              [metadata]=\"row._metadata\"\n              (clicked)=\"onCellClicked($event)\"\n            ></ng-template>\n          </td>\n        </ng-container>\n      }\n\n      <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n      <tr\n        cdk-row\n        class=\"le-table-row\"\n        [tabindex]=\"0\"\n        [class.le-table-row--clickable]=\"hasRowClickAction()\"\n        *cdkRowDef=\"let row; columns: displayedColumns()\"\n        (click)=\"onRowClick(row)\"\n      ></tr>\n    </table>\n  }\n</div>\n\n@if (data().count === 0) {\n  @if (isLoading()) {\n    <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n  } @else {\n    <div class=\"no-entities\">\n      <span>No Entities</span>\n    </div>\n  }\n}\n", dependencies: [{ kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: TableViewPaginationComponent, selector: "table-view-pagination", inputs: ["pageSize", "pageSizeOptions", "entriesCount"], outputs: ["pageChange"] }, { kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: TableViewActions, selector: "table-view-actions", inputs: ["actions"], outputs: ["actionClicked"] }, { kind: "directive", type: TableViewCellDirective, selector: "[tableViewCell]", inputs: ["type", "data", "column", "metadata"], outputs: ["clicked"] }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: DialogModule }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewComponent, decorators: [{
             type: Component,
@@ -1192,7 +1301,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         TableViewActions,
                         TableViewCellDirective,
                         LeIconComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-toolbar\">\n  @if (node(); as node) {\n    <h2>{{ node?.title }}</h2>\n\n\n    <span class=\"spacer\"></span>\n\n    @if (filters().length) {\n      <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n    }\n\n    @if (node.actions?.tableActions) {\n      <table-view-actions\n        [actions]=\"node.actions!.tableActions\"\n        (actionClicked)=\"onToolbarActionClick($event)\"\n      ></table-view-actions>\n    }\n  }\n</div>\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      @for (column of columns(); track column) {\n        <ng-container [cdkColumnDef]=\"column.key\">\n          <th\n            class=\"le-table-header-cell\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n            [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n            (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n          >\n            <div class=\"le-cell-content\">\n              <ng-template\n                tableViewCell\n                [data]=\"column.label\"\n                [type]=\"column.column_format?.headerTemplate\"\n              ></ng-template>\n\n              @if (sortColumnKeys().has(column.key)) {\n                <div class=\"le-sort-container\">\n                  @if (sortMap().has(column.key)) {\n                    <div class=\"le-sort-icon\">\n                      <i\n                        class=\"le-sort-arrow\"\n                        [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n                        [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n                      ></i>\n                    </div>\n\n                    <div class=\"le-sort-order\">\n                      @if (sortOrder().has(column.key)) {\n                        <span>\n                          {{ sortOrder().get(column.key) }}\n                        </span>\n                      }\n                    </div>\n                  } @else {\n                    <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n                  }\n                </div>\n              }\n            </div>\n          </th>\n\n          <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n            <ng-template\n              tableViewCell\n              [data]=\"row[column.key]\"\n              [type]=\"column.column_format?.cellTemplate\"\n              [column]=\"column\"\n              [metadata]=\"row._metadata\"\n            ></ng-template>\n          </td>\n        </ng-container>\n      }\n\n      <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n      <tr\n        cdk-row\n        class=\"le-table-row\"\n        [tabindex]=\"0\"\n        [class.le-table-row--clickable]=\"hasRowClickAction()\"\n        *cdkRowDef=\"let row; columns: displayedColumns()\"\n        (click)=\"onRowClick(row)\"\n      ></tr>\n    </table>\n  }\n</div>\n\n@if (data().count === 0) {\n  @if (isLoading()) {\n    <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n  } @else {\n    <div class=\"no-entities\">\n      <span>No Entities</span>\n    </div>\n  }\n}\n" }]
+                        DialogModule,
+                        DatePipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-toolbar\">\n  @if (node(); as node) {\n    <h2>{{ node?.title }}</h2>\n\n\n    <span class=\"spacer\"></span>\n\n    @if (filters().length) {\n      <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n    }\n\n    @if (node.actions?.tableActions) {\n      <table-view-actions\n        [actions]=\"node.actions!.tableActions\"\n        (actionClicked)=\"onToolbarActionClick($event)\"\n      ></table-view-actions>\n    }\n  }\n</div>\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      <!--   Version column   -->\n      <ng-container cdkColumnDef=\"versions\">\n        <th class=\"le-table-header-cell le-table-icon-cell\" cdk-header-cell *cdkHeaderCellDef>\n          <le-icon size=\"16\" class=\"le-icon\" name=\"history\"></le-icon>\n        </th>\n\n        <td class=\"le-table-cell le-table-icon-cell\" cdk-cell *cdkCellDef=\"let row\">\n          <button class=\"le-button le-button-basic le-button--success\" aria-label=\"View versions\" (click)=\"onRowVersionClick($event, row)\">\n            <le-icon size=\"16\" class=\"le-icon\" name=\"history\"></le-icon>\n          </button>\n        </td>\n      </ng-container>\n      <!--   Modified column   -->\n      <ng-container cdkColumnDef=\"modified\">\n        <th class=\"le-table-header-cell\" cdk-header-cell *cdkHeaderCellDef>\n          <div class=\"le-cell-content\">\n            Modified\n          </div>\n        </th>\n\n        <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n          <span class=\"le-table-template le-template-string\">\n            {{ row._metadata.updated_at | date:'medium' }}\n          </span>\n        </td>\n      </ng-container>\n\n      <!--   Columns   -->\n      @for (column of columns(); track column) {\n        <ng-container [cdkColumnDef]=\"column.key\">\n          <th\n            class=\"le-table-header-cell\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n            [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n            (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n          >\n            <div class=\"le-cell-content\">\n              <ng-template\n                tableViewCell\n                [data]=\"column.label\"\n                [type]=\"column.column_format?.headerTemplate\"\n              ></ng-template>\n\n              @if (sortColumnKeys().has(column.key)) {\n                <div class=\"le-sort-container\">\n                  @if (sortMap().has(column.key)) {\n                    <div class=\"le-sort-icon\">\n                      <i\n                        class=\"le-sort-arrow\"\n                        [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n                        [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n                      ></i>\n                    </div>\n\n                    <div class=\"le-sort-order\">\n                      @if (sortOrder().has(column.key)) {\n                        <span>\n                          {{ sortOrder().get(column.key) }}\n                        </span>\n                      }\n                    </div>\n                  } @else {\n                    <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n                  }\n                </div>\n              }\n            </div>\n          </th>\n\n          <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n            <ng-template\n              tableViewCell\n              [data]=\"row[column.key]\"\n              [type]=\"column.column_format?.cellTemplate\"\n              [column]=\"column\"\n              [metadata]=\"row._metadata\"\n              (clicked)=\"onCellClicked($event)\"\n            ></ng-template>\n          </td>\n        </ng-container>\n      }\n\n      <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n      <tr\n        cdk-row\n        class=\"le-table-row\"\n        [tabindex]=\"0\"\n        [class.le-table-row--clickable]=\"hasRowClickAction()\"\n        *cdkRowDef=\"let row; columns: displayedColumns()\"\n        (click)=\"onRowClick(row)\"\n      ></tr>\n    </table>\n  }\n</div>\n\n@if (data().count === 0) {\n  @if (isLoading()) {\n    <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n  } @else {\n    <div class=\"no-entities\">\n      <span>No Entities</span>\n    </div>\n  }\n}\n" }]
         }], ctorParameters: () => [] });
 
 const isSectionsSchema = (raw) => {
@@ -1496,7 +1607,10 @@ class FormViewAttachmentService {
         return null;
     }
     async fetchAttachmentData(attachment) {
-        const response = await firstValueFrom(this.apiService.getObjectByAddress(getAttachmentUrl(attachment), false, false));
+        const response = await firstValueFrom(this.apiService.getObjectByAddress(getAttachmentUrl(attachment), {
+            includeVersions: false,
+            includeMeta: false,
+        }));
         const row = response?.rows?.[0];
         if (!row?.data)
             return null;
@@ -1648,6 +1762,7 @@ class FormViewComponent {
         },
     };
     node = input.required();
+    config = input();
     isLoading = this._isLoading.asReadonly();
     data = computed(() => {
         const engine = this._engine();
@@ -1726,6 +1841,19 @@ class FormViewComponent {
                 return of(null);
             }));
         }
+        if (node.controlSource?.kind === 'object') {
+            this._isLoading.set(true);
+            return this.apiService
+                .getObjectByAddress(node.controlSource.entity, node.controlSource.params ?? {})
+                .pipe(tap((response) => {
+                this._form.set(adaptForm(response.control));
+                this._isLoading.set(false);
+            }), map(() => null), catchError((error) => {
+                console.error(error);
+                this._isLoading.set(false);
+                return of(null);
+            }));
+        }
         throw new Error(`Unsupported control source kind ${node.controlSource?.kind}`);
     }
     mapUpdateFormActionToFormNode(source) {
@@ -1761,7 +1889,7 @@ class FormViewComponent {
             .subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FormViewComponent, isStandalone: true, selector: "form-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, providers: [FormViewAttachmentService], ngImport: i0, template: "<h2>{{ node()?.title }}</h2>\n\n@if (isLoading()) {\n  <app-loading-view [rowCount]=\"5\"></app-loading-view>\n} @else {\n  @if (data(); as data) {\n    <le-form-renderer\n      [engine]=\"data.engine\"\n      [sections]=\"data.sections\"\n      [customCss]=\"data.customCss\"\n      [topLevelControls]=\"data.topLevelControls\"\n    ></le-form-renderer>\n  }\n}\n", dependencies: [{ kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: FormRendererComponent, selector: "le-form-renderer", inputs: ["engine", "sections", "topLevelControls", "customCss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FormViewComponent, isStandalone: true, selector: "form-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, providers: [FormViewAttachmentService], ngImport: i0, template: "<h2>{{ node()?.title }}</h2>\n\n@if (isLoading()) {\n  <app-loading-view [rowCount]=\"5\"></app-loading-view>\n} @else {\n  @if (data(); as data) {\n    <le-form-renderer\n      [engine]=\"data.engine\"\n      [sections]=\"data.sections\"\n      [customCss]=\"data.customCss\"\n      [topLevelControls]=\"data.topLevelControls\"\n    ></le-form-renderer>\n  }\n}\n", dependencies: [{ kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: FormRendererComponent, selector: "le-form-renderer", inputs: ["engine", "sections", "topLevelControls", "customCss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormViewComponent, decorators: [{
             type: Component,
@@ -1770,28 +1898,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 
 class SectionComponent {
     node = input.required();
+    config = input();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SectionComponent, isStandalone: true, selector: "section-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SectionComponent, isStandalone: true, selector: "section-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'section-view', imports: [forwardRef(() => NodeComponent)], template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n" }]
+            args: [{ selector: 'section-view', imports: [forwardRef(() => NodeComponent)], template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\"></le-node>\n}\n" }]
         }] });
 
 class GridColViewComponent {
     node = input.required();
+    config = input();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GridColViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: GridColViewComponent, isStandalone: true, selector: "grid-col-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: GridColViewComponent, isStandalone: true, selector: "grid-col-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GridColViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'grid-col-view', imports: [forwardRef(() => NodeComponent)], template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n" }]
+            args: [{ selector: 'grid-col-view', imports: [forwardRef(() => NodeComponent)], template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\"></le-node>\n}\n" }]
         }] });
 
 class NodeComponent {
     node = input.required();
+    config = input();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: NodeComponent, isStandalone: true, selector: "le-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (node(); as node) {\n  @switch (node.type) {\n    @case ('section') {\n      <section-view [node]=\"node\"></section-view>\n    }\n    @case ('grid') {\n      <grid-view [node]=\"node\"></grid-view>\n    }\n    @case ('grid_col') {\n      <grid-col-view [node]=\"node\"></grid-col-view>\n    }\n    @case ('table') {\n      <table-view [node]=\"node\"></table-view>\n    }\n    @case ('chart') {\n      <chart-view [node]=\"node\"></chart-view>\n    }\n    @case ('form') {\n      <form-view [node]=\"node\"></form-view>\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => ChartViewComponent), selector: "chart-view", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => GridComponent), selector: "grid-view", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => TableViewComponent), selector: "table-view", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => FormViewComponent), selector: "form-view", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => GridColViewComponent), selector: "grid-col-view", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => SectionComponent), selector: "section-view", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: NodeComponent, isStandalone: true, selector: "le-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (node(); as node) {\n  @switch (node.type) {\n    @case ('section') {\n      <section-view [node]=\"node\" [config]=\"config()\"></section-view>\n    }\n    @case ('grid') {\n      <grid-view [node]=\"node\" [config]=\"config()\"></grid-view>\n    }\n    @case ('grid_col') {\n      <grid-col-view [node]=\"node\" [config]=\"config()\"></grid-col-view>\n    }\n    @case ('table') {\n      <table-view [node]=\"node\" [config]=\"config()\"></table-view>\n    }\n    @case ('chart') {\n      <chart-view [node]=\"node\" [config]=\"config()\"></chart-view>\n    }\n    @case ('form') {\n      <form-view [node]=\"node\" [config]=\"config()\"></form-view>\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => ChartViewComponent), selector: "chart-view", inputs: ["node", "config"] }, { kind: "component", type: i0.forwardRef(() => GridComponent), selector: "grid-view", inputs: ["node", "config"] }, { kind: "component", type: i0.forwardRef(() => TableViewComponent), selector: "table-view", inputs: ["node", "config"] }, { kind: "component", type: i0.forwardRef(() => FormViewComponent), selector: "form-view", inputs: ["node", "config"] }, { kind: "component", type: i0.forwardRef(() => GridColViewComponent), selector: "grid-col-view", inputs: ["node", "config"] }, { kind: "component", type: i0.forwardRef(() => SectionComponent), selector: "section-view", inputs: ["node", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
@@ -1802,7 +1933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         FormViewComponent,
                         GridColViewComponent,
                         forwardRef(() => SectionComponent),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (node(); as node) {\n  @switch (node.type) {\n    @case ('section') {\n      <section-view [node]=\"node\"></section-view>\n    }\n    @case ('grid') {\n      <grid-view [node]=\"node\"></grid-view>\n    }\n    @case ('grid_col') {\n      <grid-col-view [node]=\"node\"></grid-col-view>\n    }\n    @case ('table') {\n      <table-view [node]=\"node\"></table-view>\n    }\n    @case ('chart') {\n      <chart-view [node]=\"node\"></chart-view>\n    }\n    @case ('form') {\n      <form-view [node]=\"node\"></form-view>\n    }\n  }\n}\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (node(); as node) {\n  @switch (node.type) {\n    @case ('section') {\n      <section-view [node]=\"node\" [config]=\"config()\"></section-view>\n    }\n    @case ('grid') {\n      <grid-view [node]=\"node\" [config]=\"config()\"></grid-view>\n    }\n    @case ('grid_col') {\n      <grid-col-view [node]=\"node\" [config]=\"config()\"></grid-col-view>\n    }\n    @case ('table') {\n      <table-view [node]=\"node\" [config]=\"config()\"></table-view>\n    }\n    @case ('chart') {\n      <chart-view [node]=\"node\" [config]=\"config()\"></chart-view>\n    }\n    @case ('form') {\n      <form-view [node]=\"node\" [config]=\"config()\"></form-view>\n    }\n  }\n}\n" }]
         }] });
 
 class FiltersComponent {
@@ -2036,7 +2167,7 @@ class LeContainerComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LeContainerComponent, isStandalone: true, selector: "le-container", providers: [LEDataService, LEApiService, LEFiltersService, LeNavigationService], viewQueries: [{ propertyName: "sidebar", first: true, predicate: SidebarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-filters>\n      <le-node [node]=\"data.view\"></le-node>\n    </le-filters>\n  </le-sidebar>\n}\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "le-sidebar", inputs: ["config", "view"], outputs: ["selectionChange"] }, { kind: "component", type: NodeComponent, selector: "le-node", inputs: ["node"] }, { kind: "component", type: FiltersComponent, selector: "le-filters" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LeContainerComponent, isStandalone: true, selector: "le-container", providers: [LEDataService, LEApiService, LEFiltersService, LeNavigationService], viewQueries: [{ propertyName: "sidebar", first: true, predicate: SidebarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-filters>\n      <le-node [node]=\"data.view\"></le-node>\n    </le-filters>\n  </le-sidebar>\n}\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "le-sidebar", inputs: ["config", "view"], outputs: ["selectionChange"] }, { kind: "component", type: NodeComponent, selector: "le-node", inputs: ["node", "config"] }, { kind: "component", type: FiltersComponent, selector: "le-filters" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeContainerComponent, decorators: [{
             type: Component,