@planeasyinc/le-angular 0.0.11 → 0.0.13

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

@@ -3,22 +3,23 @@ import { InjectionToken, inject, signal, Injectable, computed, effect, untracked
 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, DatePipe, ViewportScroller } from '@angular/common';
+import { Location, JsonPipe, UpperCasePipe, 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 { ComponentPortal, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
 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 { DialogModule } from '@angular/cdk/dialog';
 import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
 import { A11yModule } from '@angular/cdk/a11y';
+import { Overlay } from '@angular/cdk/overlay';
+import { NestedTreeControl, CdkTree, CdkNestedTreeNode, CdkTreeNodeDef, CdkTreeNodeOutlet, CdkTreeNodeToggle } from '@angular/cdk/tree';
+import { ArrayDataSource, SelectionModel } from '@angular/cdk/collections';
 import { adaptOld } from '@planeasyinc/fe-adapters-old';
 import { adaptSections } from '@planeasyinc/fe-adapters-sections';
 import { createEngine } from '@planeasyinc/fe-core';
 import { FeFieldHost } from '@planeasyinc/fe-angular';
-import { Overlay } from '@angular/cdk/overlay';
-import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
-import { SelectionModel } from '@angular/cdk/collections';
 import * as i1 from '@angular/forms';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
@@ -199,22 +200,25 @@ class LEDataService {
     parentPath = this._parentPath.asReadonly();
     config = this._config.asReadonly();
     customCss = this._customCss.asReadonly();
-    constructor() {
+    registerEffects() {
         effect(() => {
             const node = this.leNavigationService.node();
             if (!node)
                 return;
             untracked(() => {
                 const view = this.view();
-                if (node.id === view.id)
+                if (node.id === view?.id)
                     return;
                 this._view.set(node);
             });
         });
     }
-    setView(node) {
+    setView(node, skipLocationChange) {
         this._view.set(node);
-        this.leNavigationService.navigate(node);
+        if (!skipLocationChange) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+            this.leNavigationService.navigate(node);
+        }
     }
     requestConfig(force) {
         if (this._config() && !force) {
@@ -249,6 +253,8 @@ class LEDataService {
         }
     }
     getNodeById(id, node = this._config()) {
+        if (!node)
+            return null;
         if (node.id === id) {
             return node;
         }
@@ -283,7 +289,7 @@ class LEDataService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEDataService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }] });
 
 class LEFiltersService {
     _shown = signal(false);
@@ -393,14 +399,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
-const history = {
-    name: 'history',
-    viewBox: '0 -960 960 960',
-    content: [
-        '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',
@@ -433,12 +431,20 @@ const chevron = {
     ]
 };
 
+const info = {
+    name: 'info',
+    viewBox: '0 -960 960 960',
+    content: [
+        'M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z',
+    ],
+};
+
 const ICONS_MAP = {
     chevron: chevron,
     'arrow-down': arrowDown,
     sort: sort,
     close: close,
-    history: history,
+    info: info
 };
 
 class LeIconComponent {
@@ -569,8 +575,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class ChartViewComponent {
     node = input.required();
     config = input();
+    event = output();
     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 }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, 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 } }, outputs: { event: "event" }, 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,
@@ -580,15 +587,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class GridComponent {
     node = input.required();
     config = input();
+    event = output();
     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 }, 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"] }] });
+    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 } }, outputs: { event: "event" }, 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()\" (event)=\"event.emit($event)\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }] });
 }
 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\" [config]=\"config()\"></le-node>\n}\n" }]
+                    }, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\" (event)=\"event.emit($event)\"></le-node>\n}\n" }]
         }] });
 
 class TableDataSource extends DataSource {
@@ -993,33 +1001,215 @@ 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"] }] });
+const flattenNodes = (nodes) => {
+    const flattenedNodes = [];
+    for (const node of nodes) {
+        flattenedNodes.push(node);
+        if (node.leafs) {
+            flattenedNodes.push(...flattenNodes(node.leafs));
+        }
+    }
+    return flattenedNodes;
+};
+const toTree = (obj, label) => {
+    if (obj !== null && typeof obj === 'object') {
+        const entries = Array.isArray(obj)
+            ? obj.map((v, i) => toTree(v, String(i)))
+            : Object.entries(obj).map((item) => toTree(item[1], item[0]));
+        return { label, leafs: entries };
+    }
+    return { label, value: obj };
+};
+const mapObjectToTree = (data) => {
+    return Object.entries(data).map((item) => toTree(item[1], item[0]));
+};
+
+class TreeViewComponent {
+    treeControl = new NestedTreeControl((node) => node.leafs);
+    data = input();
+    source = computed(() => {
+        return new ArrayDataSource(mapObjectToTree(this.data() ?? {}));
+    });
+    hasChild = (_, node) => !!node.leafs && node.leafs.length > 0;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: TreeViewComponent, isStandalone: true, selector: "le-tree-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<cdk-tree [dataSource]=\"source()\" [treeControl]=\"treeControl\">\n  <!-- Tree node template for leaf nodes -->\n  <cdk-nested-tree-node *cdkTreeNodeDef=\"let node\" class=\"le-tree-node\">\n    <div class=\"le-tree-row\">\n      <b>{{node.label | uppercase}}</b>: &nbsp;&nbsp;&nbsp; {{node.value}}\n    </div>\n  </cdk-nested-tree-node>\n\n  <!-- Tree node template for expandable nodes -->\n  <cdk-nested-tree-node *cdkTreeNodeDef=\"let node; when: hasChild\" class=\"le-tree-node\">\n\n    <a class=\"le-tree-row\" [class.le-tree-row--expanded]=\"treeControl.isExpanded(node)\" [attr.aria-label]=\"'Toggle ' + node.label\" cdkTreeNodeToggle>\n      <b>{{node.label | uppercase}}</b>:\n\n      <le-icon class=\"le-tree-chevron\" name=\"chevron\"></le-icon>\n    </a>\n\n    <div [class.le-tree-invisible]=\"!treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n", dependencies: [{ kind: "component", type: CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }, { kind: "directive", type: CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TreeViewComponent, 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" }]
+            args: [{ selector: 'le-tree-view', imports: [
+                        CdkTree,
+                        CdkNestedTreeNode,
+                        CdkTreeNodeDef,
+                        CdkTreeNodeOutlet,
+                        LeIconComponent,
+                        CdkTreeNodeToggle,
+                        UpperCasePipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-tree [dataSource]=\"source()\" [treeControl]=\"treeControl\">\n  <!-- Tree node template for leaf nodes -->\n  <cdk-nested-tree-node *cdkTreeNodeDef=\"let node\" class=\"le-tree-node\">\n    <div class=\"le-tree-row\">\n      <b>{{node.label | uppercase}}</b>: &nbsp;&nbsp;&nbsp; {{node.value}}\n    </div>\n  </cdk-nested-tree-node>\n\n  <!-- Tree node template for expandable nodes -->\n  <cdk-nested-tree-node *cdkTreeNodeDef=\"let node; when: hasChild\" class=\"le-tree-node\">\n\n    <a class=\"le-tree-row\" [class.le-tree-row--expanded]=\"treeControl.isExpanded(node)\" [attr.aria-label]=\"'Toggle ' + node.label\" cdkTreeNodeToggle>\n      <b>{{node.label | uppercase}}</b>:\n\n      <le-icon class=\"le-tree-chevron\" name=\"chevron\"></le-icon>\n    </a>\n\n    <div [class.le-tree-invisible]=\"!treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n" }]
         }] });
 
-class LeDialogService {
-    dialog = inject(Dialog);
-    open(data, config = {}) {
-        const dialogRef = this.dialog.open(DialogComponent, {
-            maxWidth: '80vw',
-            maxHeight: '80vh',
-            minWidth: '40vw',
-            panelClass: 'le-dialog-container',
-            data,
-            injector: config?.injector,
+class BlockViewComponent {
+    data = input.required();
+    columns = input.required();
+    event = output();
+    onCellClicked(data) {
+        this.event.emit({ type: 'cell_clicked', data });
+        this.event.emit({ type: 'close' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BlockViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: BlockViewComponent, isStandalone: true, selector: "le-block-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { event: "event" }, ngImport: i0, template: "<div class=\"block-view\">\n  @for (column of columns(); track column) {\n    <div class=\"block-view-item\">\n      <div class=\"block-view-label\">\n        {{column.label}}\n      </div>\n\n      <div class=\"block-view-value\">\n        @if (data(); as 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        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: TableViewCellDirective, selector: "[tableViewCell]", inputs: ["type", "data", "column", "metadata"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BlockViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-block-view', imports: [TableViewCellDirective], template: "<div class=\"block-view\">\n  @for (column of columns(); track column) {\n    <div class=\"block-view-item\">\n      <div class=\"block-view-label\">\n        {{column.label}}\n      </div>\n\n      <div class=\"block-view-value\">\n        @if (data(); as 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        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }] });
+
+class SidePanelComponent {
+    dataService = inject(LEDataService);
+    _selectedTab = signal(0);
+    data = input.required();
+    config = input();
+    event = output();
+    node = this.dataService.view;
+    tabs = computed(() => {
+        const data = this.data();
+        return data.tabs.length ? data.tabs : undefined;
+    });
+    selectedTabIndex = this._selectedTab.asReadonly();
+    selectedTab = computed(() => {
+        return this.tabs()?.[this.selectedTabIndex()];
+    });
+    constructor() {
+        effect(() => {
+            const data = this.data();
+            untracked(() => {
+                if (data.node) {
+                    this.dataService.setView(data.node, true);
+                }
+            });
+        });
+    }
+    onEvent(event) {
+        this.event.emit(event);
+    }
+    onTabClick(index) {
+        this._selectedTab.set(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidePanelComponent, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, host: { properties: { "style.width": "\"100%\"", "style.overflow": "\"auto\"", "style.padding": "\"0 16px\"" } }, providers: [LEDataService, LEFiltersService], ngImport: i0, template: "@if (node(); as node) {\n  <le-node [node]=\"node\" [config]=\"data()?.config\" (event)=\"onEvent($event)\"></le-node>\n}\n\n@if (tabs(); as tabs) {\n  <div class=\"le-tabs-nav\">\n    @for (tab of tabs; track tab.type; let idx = $index) {\n      <button\n        class=\"le-button le-button-flat le-button--success\"\n        [attr.aria-label]=\"'Select ' + tab.type\"\n        [class.le-button--success]=\"selectedTabIndex() === idx\"\n        (click)=\"onTabClick(idx)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n    <span class=\"spacer\"></span>\n\n    <button\n      aria-label=\"Close side panel\"\n      class=\"le-button le-button-flat\"\n      (click)=\"event.emit({ type: 'close' })\"\n    >Close</button>\n  </div>\n}\n\n@if (selectedTab(); as selectedTab) {\n  <div class=\"le-tabs-content\">\n    @switch (selectedTab.type) {\n      @case ('tree') {\n        <le-tree-view [data]=\"selectedTab.data\"></le-tree-view>\n      }\n      @case ('table') {\n        <le-node\n          [node]=\"selectedTab.data\"\n          [config]=\"data()?.config\"\n          (event)=\"onEvent($event)\"\n        ></le-node>\n      }\n      @case ('block') {\n        <le-block-view\n          [data]=\"selectedTab.data\"\n          [columns]=\"selectedTab.columns\"\n          (event)=\"onEvent($event)\"\n        ></le-block-view>\n      }\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }, { kind: "component", type: i0.forwardRef(() => TreeViewComponent), selector: "le-tree-view", inputs: ["data"] }, { kind: "component", type: i0.forwardRef(() => BlockViewComponent), selector: "le-block-view", inputs: ["data", "columns"], outputs: ["event"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ host: {
+                        '[style.width]': '"100%"',
+                        '[style.overflow]': '"auto"',
+                        '[style.padding]': '"0 16px"',
+                    }, imports: [forwardRef(() => NodeComponent), TreeViewComponent, BlockViewComponent], providers: [LEDataService, LEFiltersService], template: "@if (node(); as node) {\n  <le-node [node]=\"node\" [config]=\"data()?.config\" (event)=\"onEvent($event)\"></le-node>\n}\n\n@if (tabs(); as tabs) {\n  <div class=\"le-tabs-nav\">\n    @for (tab of tabs; track tab.type; let idx = $index) {\n      <button\n        class=\"le-button le-button-flat le-button--success\"\n        [attr.aria-label]=\"'Select ' + tab.type\"\n        [class.le-button--success]=\"selectedTabIndex() === idx\"\n        (click)=\"onTabClick(idx)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n    <span class=\"spacer\"></span>\n\n    <button\n      aria-label=\"Close side panel\"\n      class=\"le-button le-button-flat\"\n      (click)=\"event.emit({ type: 'close' })\"\n    >Close</button>\n  </div>\n}\n\n@if (selectedTab(); as selectedTab) {\n  <div class=\"le-tabs-content\">\n    @switch (selectedTab.type) {\n      @case ('tree') {\n        <le-tree-view [data]=\"selectedTab.data\"></le-tree-view>\n      }\n      @case ('table') {\n        <le-node\n          [node]=\"selectedTab.data\"\n          [config]=\"data()?.config\"\n          (event)=\"onEvent($event)\"\n        ></le-node>\n      }\n      @case ('block') {\n        <le-block-view\n          [data]=\"selectedTab.data\"\n          [columns]=\"selectedTab.columns\"\n          (event)=\"onEvent($event)\"\n        ></le-block-view>\n      }\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+const positionMap = {
+    right: (position) => position.right().top('0'),
+    left: (position) => position.left().top('0'),
+    top: (position) => position.top('0'),
+    bottom: (position) => position.bottom('0'),
+};
+class LeSidePanelService {
+    overlay = inject(Overlay);
+    breakpointObserver = inject(BreakpointObserver);
+    overlayRef;
+    output = new Subject();
+    show(data, config) {
+        if (this.overlayRef)
+            this.hide();
+        const destroy$ = new Subject();
+        this.overlayRef = this.overlay.create({
+            width: this.getWidth(config),
+            height: this.getHeight(config),
+            panelClass: 'le-side-panel',
+            hasBackdrop: config.hasBackdrop ?? true,
+            positionStrategy: this.getPositionStrategy(config),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
         });
-        return dialogRef.closed;
+        this.overlayRef.addPanelClass(this.getClosedClass(config));
+        this.overlayRef?.outsidePointerEvents().subscribe({
+            next: () => {
+                this.overlayRef?.addPanelClass(this.getClosedClass(config));
+                this.delayed(() => this.hide());
+            },
+        });
+        const componentRef = this.overlayRef.attach(new ComponentPortal(SidePanelComponent, null, config.injector));
+        componentRef.setInput('data', data);
+        this.delayed(() => this.overlayRef?.removePanelClass(this.getClosedClass(config)));
+        const sub = componentRef.instance.event.subscribe((event) => {
+            this.output.next(event);
+            if (event.type === 'close') {
+                this.overlayRef?.addPanelClass(this.getClosedClass(config));
+                this.delayed(() => this.hide());
+            }
+        });
+        componentRef.onDestroy(() => {
+            sub.unsubscribe();
+            destroy$.next();
+            destroy$.complete();
+        });
+        return this.output.pipe(takeUntil(destroy$));
+    }
+    hide() {
+        this.overlayRef?.dispose();
+        this.overlayRef = undefined;
+    }
+    delayed(fn) {
+        setTimeout(() => fn(), 300);
+    }
+    getHeight(config) {
+        if (config.height) {
+            return config.height;
+        }
+        if (config.position === 'top' || config.position === 'bottom') {
+            if (this.breakpointObserver.isMatched(Breakpoints.XSmall)) {
+                return '80vh';
+            }
+            else if (this.breakpointObserver.isMatched(Breakpoints.Small)) {
+                return '60vh';
+            }
+            else {
+                return '40vh';
+            }
+        }
+        return '100vh';
     }
-    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' });
+    getWidth(config) {
+        if (config.width) {
+            return config.width;
+        }
+        if (config.position === 'left' || config.position === 'right') {
+            if (this.breakpointObserver.isMatched(Breakpoints.XSmall)) {
+                return '80vw';
+            }
+            else if (this.breakpointObserver.isMatched(Breakpoints.Small)) {
+                return '60vw';
+            }
+            else {
+                return '40vw';
+            }
+        }
+        else {
+            return '100vw';
+        }
+    }
+    getClosedClass(config) {
+        return `le-side-panel--${config.position}`;
+    }
+    getPositionStrategy({ position }) {
+        let positionStrategy = this.overlay.position().global();
+        if (positionMap[position]) {
+            return positionMap[position](positionStrategy);
+        }
+        return positionStrategy;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeSidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeSidePanelService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeSidePanelService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1030,10 +1220,11 @@ class TableViewComponent {
     apiService = inject(LEApiService);
     dataService = inject(LEDataService);
     filtersService = inject(LEFiltersService);
-    dialogService = inject(LeDialogService);
+    sidePanelService = inject(LeSidePanelService);
     injector = inject(Injector);
     node = input.required();
     config = input();
+    event = output();
     _columns = signal([]);
     _data = signal(new TableDataSource());
     _total = signal(0);
@@ -1052,8 +1243,8 @@ class TableViewComponent {
         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');
+        if (!this.config()?.hideInfo) {
+            result.push('info');
         }
         result.push(...columnKeys);
         if (hasVersion) {
@@ -1114,15 +1305,14 @@ class TableViewComponent {
     }
     onRowClick(row) {
         const actions = this.node().actions?.onRowClick ?? [];
-        actions.forEach((action) => this.processTableAction(action, row));
+        actions.forEach((action) => this.processRowClickAction(action, row));
     }
-    onRowVersionClick(event, row) {
+    onRowInfoClick(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,
@@ -1134,13 +1324,34 @@ class TableViewComponent {
                 },
             },
         };
-        this.dialogService
-            .open({ node, config: { hideFilters: true, hideMetadata: true, showCloseButton: true } }, { injector: this.injector })
-            .subscribe();
+        this.sidePanelService
+            .show({
+            tabs: [
+                { type: 'block', label: 'Object', data: row, columns: this._columns() },
+                { type: 'tree', label: 'Metadata', data: row._metadata },
+                { type: 'table', label: 'Versions', data: node },
+            ],
+            config: {
+                hasCloseButton: true,
+                skipLocationChange: true,
+                hideFilters: true,
+                hideInfo: true,
+            },
+        }, {
+            position: 'bottom',
+            injector: this.injector,
+        })
+            .subscribe({
+            next: event => {
+                if (event.type === 'cell_clicked') {
+                    this.onCellClicked(event.data);
+                }
+            }
+        });
     }
     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({
+        this.setView({
             id: path,
             type: 'form',
             controlSource: {
@@ -1149,22 +1360,45 @@ class TableViewComponent {
             },
         });
     }
-    processTableAction(action, row) {
+    processRowClickAction(action, row) {
+        const { type, node } = action;
+        if (type === 'open_sidebar' && 'controlSource' in node) {
+            if (node.controlSource?.params) {
+                node.controlSource.params = this.interpolateRowValues(node.controlSource.params, row);
+            }
+            this.sidePanelService
+                .show({
+                node,
+                tabs: [],
+                config: { hasCloseButton: true, skipLocationChange: true },
+            }, {
+                position: 'right',
+                injector: this.injector,
+            })
+                .subscribe((event) => {
+                if (event.type === 'refresh') {
+                    this.forceFetch();
+                }
+            });
+        }
+    }
+    processTableAction(action) {
         if (action.type === 'update_form') {
             const dataSource = action.dataSource;
-            this.dataService.setView({
+            this.setView({
                 id: action.type,
                 type: 'form',
                 controlSource: {
                     kind: dataSource.kind,
                     entity: dataSource.entity,
-                    params: dataSource?.params
-                        ? this.interpolateRowValues(dataSource.params, row)
-                        : undefined,
+                    params: dataSource?.params,
                 },
             });
         }
     }
+    setView(node) {
+        this.dataService.setView(node, !!this.config()?.skipLocationChange);
+    }
     setPagination(pagination) {
         this._pageSize.set(pagination?.pageSize ?? 0);
         this._pageSizeOptions.set(pagination?.options ?? []);
@@ -1280,8 +1514,27 @@ class TableViewComponent {
             });
         });
     }
+    forceFetch() {
+        const node = this.node();
+        const pageSize = this.pageSize();
+        const pageIndex = this.pageIndex();
+        const sort = this._sortMap();
+        const filters = this.filtersService.selection();
+        if (node?.dataSource) {
+            const ctx = buildRequestContext({
+                pageSize,
+                pageIndex,
+                sort: mapSortMapToSortStringList(sort),
+                filters,
+            }, {
+                isSortable: this.isSortingEnabled(),
+                hasPagination: !!this.pageSize(),
+            });
+            this.getTableData(node, ctx);
+        }
+    }
     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 }, 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 });
+    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 } }, outputs: { event: "event" }, ngImport: i0, template: "@if (node()?.title || node()?.actions || filters().length) {\n  <div class=\"le-toolbar\">\n    @if (node(); as node) {\n      <h2>{{ node?.title }}</h2>\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\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      <!--   Info column   -->\n      <ng-container cdkColumnDef=\"info\">\n        <th class=\"le-table-header-cell le-table-icon-cell\" cdk-header-cell *cdkHeaderCellDef>\n          <le-icon size=\"16\" class=\"le-icon\" name=\"info\"></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 info\" (click)=\"onRowInfoClick($event, row)\">\n            <le-icon size=\"16\" class=\"le-icon\" name=\"info\"></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,
@@ -1303,7 +1556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         LeIconComponent,
                         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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (node()?.title || node()?.actions || filters().length) {\n  <div class=\"le-toolbar\">\n    @if (node(); as node) {\n      <h2>{{ node?.title }}</h2>\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\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      <!--   Info column   -->\n      <ng-container cdkColumnDef=\"info\">\n        <th class=\"le-table-header-cell le-table-icon-cell\" cdk-header-cell *cdkHeaderCellDef>\n          <le-icon size=\"16\" class=\"le-icon\" name=\"info\"></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 info\" (click)=\"onRowInfoClick($event, row)\">\n            <le-icon size=\"16\" class=\"le-icon\" name=\"info\"></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) => {
@@ -1331,6 +1584,8 @@ class FormRendererComponent {
     sections = input.required();
     topLevelControls = input([]);
     customCss = input();
+    config = input();
+    event = output();
     constructor() {
         this.renderer.appendChild(this.ref.nativeElement, this.styleRef);
         this.destroyRef.onDestroy(() => {
@@ -1341,11 +1596,11 @@ class FormRendererComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FormRendererComponent, isStandalone: true, selector: "le-form-renderer", inputs: { engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, topLevelControls: { classPropertyName: "topLevelControls", publicName: "topLevelControls", isSignal: true, isRequired: false, transformFunction: null }, customCss: { classPropertyName: "customCss", publicName: "customCss", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"le-form-container\">\n  @for (section of sections(); track section.id) {\n    <section class=\"le-section\">\n      <div class=\"le-section-title\">\n        @if (section.label) {\n          <h3>{{ section.label }}</h3>\n        }\n      </div>\n\n      <div class=\"le-section-controls\">\n        @for (control of section.controls; track control) {\n          <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n        }\n      </div>\n    </section>\n  }\n\n  @if (topLevelControls()?.length) {\n    <section class=\"le-top-level-controls\">\n      @for (control of topLevelControls(); track control) {\n        <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n      }\n    </section>\n  }\n</div>\n", dependencies: [{ kind: "component", type: FeFieldHost, selector: "fe-field", inputs: ["engine", "control"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FormRendererComponent, isStandalone: true, selector: "le-form-renderer", inputs: { engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, topLevelControls: { classPropertyName: "topLevelControls", publicName: "topLevelControls", isSignal: true, isRequired: false, transformFunction: null }, customCss: { classPropertyName: "customCss", publicName: "customCss", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, ngImport: i0, template: "<div class=\"le-form-container\">\n  @for (section of sections(); track section.id) {\n    <section class=\"le-section\">\n      <div class=\"le-toolbar\">\n        @if (section.label) {\n          <h3>{{ section.label }}</h3>\n        }\n\n        <span class=\"spacer\"></span>\n\n        @if (config()?.hasCloseButton) {\n          <button class=\"le-button\" aria-label=\"Close side panel\" (click)=\"event.emit({ type: 'close'})\">Close</button>\n        }\n      </div>\n\n      <div class=\"le-section-controls\">\n        @for (control of section.controls; track control) {\n          <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n        }\n      </div>\n    </section>\n  }\n\n  @if (topLevelControls()?.length) {\n    <section class=\"le-top-level-controls\">\n      @for (control of topLevelControls(); track control) {\n        <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n      }\n    </section>\n  }\n</div>\n", dependencies: [{ kind: "component", type: FeFieldHost, selector: "fe-field", inputs: ["engine", "control"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'le-form-renderer', imports: [FeFieldHost], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-form-container\">\n  @for (section of sections(); track section.id) {\n    <section class=\"le-section\">\n      <div class=\"le-section-title\">\n        @if (section.label) {\n          <h3>{{ section.label }}</h3>\n        }\n      </div>\n\n      <div class=\"le-section-controls\">\n        @for (control of section.controls; track control) {\n          <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n        }\n      </div>\n    </section>\n  }\n\n  @if (topLevelControls()?.length) {\n    <section class=\"le-top-level-controls\">\n      @for (control of topLevelControls(); track control) {\n        <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n      }\n    </section>\n  }\n</div>\n" }]
+            args: [{ selector: 'le-form-renderer', imports: [FeFieldHost], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-form-container\">\n  @for (section of sections(); track section.id) {\n    <section class=\"le-section\">\n      <div class=\"le-toolbar\">\n        @if (section.label) {\n          <h3>{{ section.label }}</h3>\n        }\n\n        <span class=\"spacer\"></span>\n\n        @if (config()?.hasCloseButton) {\n          <button class=\"le-button\" aria-label=\"Close side panel\" (click)=\"event.emit({ type: 'close'})\">Close</button>\n        }\n      </div>\n\n      <div class=\"le-section-controls\">\n        @for (control of section.controls; track control) {\n          <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n        }\n      </div>\n    </section>\n  }\n\n  @if (topLevelControls()?.length) {\n    <section class=\"le-top-level-controls\">\n      @for (control of topLevelControls(); track control) {\n        <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n      }\n    </section>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 const isPlaceholder = (value) => {
@@ -1721,13 +1976,15 @@ class FormViewComponent {
         update_form: (action) => {
             const node = this.mapUpdateFormActionToFormNode(action.control_source);
             if (node) {
-                this.dataService.setView(node);
+                this.setView(node);
             }
             return of(null);
         },
         update_table: (action) => {
             const node = this.mapUpdateTableActionToTableNode(action.data_source);
-            this.dataService.setView(node);
+            this.event.emit({ type: 'refresh' });
+            this.event.emit({ type: 'close' });
+            this.setView(node);
             return of(null);
         },
         update_value: (action, response) => {
@@ -1763,6 +2020,7 @@ class FormViewComponent {
     };
     node = input.required();
     config = input();
+    event = output();
     isLoading = this._isLoading.asReadonly();
     data = computed(() => {
         const engine = this._engine();
@@ -1817,6 +2075,9 @@ class FormViewComponent {
             this.processActionList(action.actions);
         });
     }
+    setView(node) {
+        this.dataService.setView(node, !!this.config()?.skipLocationChange);
+    }
     processAction(action, response) {
         return this._actionHandlers[action.type](action, response);
     }
@@ -1889,52 +2150,73 @@ 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 }, 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 });
+    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 } }, outputs: { event: "event" }, 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      [config]=\"config()\"\n      [engine]=\"data.engine\"\n      [sections]=\"data.sections\"\n      [customCss]=\"data.customCss\"\n      [topLevelControls]=\"data.topLevelControls\"\n      (event)=\"event.emit($event)\"\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", "config"], outputs: ["event"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'form-view', imports: [LoadingViewComponent, FormRendererComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [FormViewAttachmentService], 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" }]
+            args: [{ selector: 'form-view', imports: [LoadingViewComponent, FormRendererComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [FormViewAttachmentService], 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      [config]=\"config()\"\n      [engine]=\"data.engine\"\n      [sections]=\"data.sections\"\n      [customCss]=\"data.customCss\"\n      [topLevelControls]=\"data.topLevelControls\"\n      (event)=\"event.emit($event)\"\n    ></le-form-renderer>\n  }\n}\n" }]
         }], ctorParameters: () => [] });
 
 class SectionComponent {
     node = input.required();
     config = input();
+    event = output();
     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 }, 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"] }] });
+    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 } }, outputs: { event: "event" }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\" (event)=\"event.emit($event)\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }] });
 }
 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\" [config]=\"config()\"></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()\" (event)=\"event.emit($event)\"></le-node>\n}\n" }]
         }] });
 
 class GridColViewComponent {
     node = input.required();
     config = input();
+    event = output();
     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 }, 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"] }] });
+    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 } }, outputs: { event: "event" }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\" (event)=\"event.emit($event)\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }] });
 }
 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\" [config]=\"config()\"></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()\" (event)=\"event.emit($event)\"></le-node>\n}\n" }]
         }] });
 
+const NODE_COMPONENTS = {
+    section: SectionComponent,
+    grid: GridComponent,
+    grid_col: GridColViewComponent,
+    form: FormViewComponent,
+    table: TableViewComponent,
+    chart: ChartViewComponent,
+};
 class NodeComponent {
     node = input.required();
     config = input();
+    event = output();
+    componentPortal;
+    constructor() {
+        effect(() => {
+            this.componentPortal = new ComponentPortal(NODE_COMPONENTS[this.node().type]);
+        });
+    }
+    onPortalAttached(ref) {
+        const componentRef = ref;
+        componentRef.setInput('node', this.node());
+        componentRef.setInput('config', this.config());
+        const sub = componentRef.instance.event.subscribe((event) => {
+            this.event.emit(event);
+        });
+        componentRef.onDestroy(() => {
+            sub.unsubscribe();
+        });
+    }
     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 }, 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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 } }, outputs: { event: "event" }, ngImport: i0, template: "<ng-template\n  [cdkPortalOutlet]=\"componentPortal\"\n  (attached)=\"onPortalAttached($event)\">\n</ng-template>\n\n<!--@if (node(); as node) {-->\n<!--  @switch (node.type) {-->\n<!--    @case ('section') {-->\n<!--      <section-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></section-view>-->\n<!--    }-->\n<!--    @case ('grid') {-->\n<!--      <grid-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></grid-view>-->\n<!--    }-->\n<!--    @case ('grid_col') {-->\n<!--      <grid-col-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></grid-col-view>-->\n<!--    }-->\n<!--    @case ('table') {-->\n<!--      <table-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></table-view>-->\n<!--    }-->\n<!--    @case ('chart') {-->\n<!--      <chart-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></chart-view>-->\n<!--    }-->\n<!--    @case ('form') {-->\n<!--      <form-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></form-view>-->\n<!--    }-->\n<!--  }-->\n<!--}-->\n", dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'le-node', imports: [
-                        ChartViewComponent,
-                        GridComponent,
-                        TableViewComponent,
-                        FormViewComponent,
-                        GridColViewComponent,
-                        forwardRef(() => SectionComponent),
-                    ], 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" }]
-        }] });
+            args: [{ selector: 'le-node', imports: [CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template\n  [cdkPortalOutlet]=\"componentPortal\"\n  (attached)=\"onPortalAttached($event)\">\n</ng-template>\n\n<!--@if (node(); as node) {-->\n<!--  @switch (node.type) {-->\n<!--    @case ('section') {-->\n<!--      <section-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></section-view>-->\n<!--    }-->\n<!--    @case ('grid') {-->\n<!--      <grid-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></grid-view>-->\n<!--    }-->\n<!--    @case ('grid_col') {-->\n<!--      <grid-col-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></grid-col-view>-->\n<!--    }-->\n<!--    @case ('table') {-->\n<!--      <table-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></table-view>-->\n<!--    }-->\n<!--    @case ('chart') {-->\n<!--      <chart-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></chart-view>-->\n<!--    }-->\n<!--    @case ('form') {-->\n<!--      <form-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></form-view>-->\n<!--    }-->\n<!--  }-->\n<!--}-->\n" }]
+        }], ctorParameters: () => [] });
 
 class FiltersComponent {
     filtersService = inject(LEFiltersService);
@@ -2138,6 +2420,7 @@ class LeContainerComponent {
     constructor() {
         this.listenAuthState();
         this.listenPageInit();
+        this.dataService.registerEffects();
     }
     onSelectionChange(view) {
         this.dataService.setView(view);
@@ -2167,7 +2450,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", "config"] }, { 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"], outputs: ["event"] }, { kind: "component", type: FiltersComponent, selector: "le-filters" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeContainerComponent, decorators: [{
             type: Component,