@planeasyinc/le-angular 0.0.11 → 0.0.12

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

@@ -8,16 +8,16 @@ 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 { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
 import { A11yModule } from '@angular/cdk/a11y';
+import { Overlay } from '@angular/cdk/overlay';
 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 +199,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);
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+        if (!skipLocationChange) {
+            this.leNavigationService.navigate(node);
+        }
     }
     requestConfig(force) {
         if (this._config() && !force) {
@@ -249,6 +252,8 @@ class LEDataService {
         }
     }
     getNodeById(id, node = this._config()) {
+        if (!node)
+            return null;
         if (node.id === id) {
             return node;
         }
@@ -283,7 +288,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);
@@ -569,8 +574,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 +586,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 {
@@ -996,11 +1003,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: DialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    @if (data.node) {
+      <le-node [node]="data.node" [config]="data.config"></le-node>
+    }
+  `, isInline: true, 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: 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" }]
+            args: [{
+                    template: `
+    @if (data.node) {
+      <le-node [node]="data.node" [config]="data.config"></le-node>
+    }
+  `,
+                    imports: [forwardRef(() => NodeComponent)],
+                }]
         }] });
 
 class LeDialogService {
@@ -1026,14 +1044,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
+class SidePanelComponent {
+    dataService = inject(LEDataService);
+    data = input.required();
+    config = input();
+    event = output();
+    node = this.dataService.view;
+    constructor() {
+        effect(() => {
+            const data = this.data();
+            untracked(() => {
+                if (!data.node)
+                    return;
+                this.dataService.setView(data.node, true);
+            });
+        });
+    }
+    onEvent(event) {
+        this.event.emit(event);
+    }
+    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], ngImport: i0, template: `
+    @if (node(); as node) {
+      <le-node [node]="node" [config]="data()?.config" (event)="onEvent($event)"></le-node>
+    }
+  `, isInline: true, 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: SidePanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    @if (node(); as node) {
+      <le-node [node]="node" [config]="data()?.config" (event)="onEvent($event)"></le-node>
+    }
+  `,
+                    host: {
+                        '[style.width]': '"100%"',
+                        '[style.overflow]': '"auto"',
+                        '[style.padding]': '"0 16px"',
+                    },
+                    imports: [forwardRef(() => NodeComponent)],
+                    providers: [LEDataService],
+                }]
+        }], 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(),
+        });
+        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((value) => {
+            this.output.next(value);
+            if (value === '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;
+        }
+        return '100vh';
+    }
+    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: LeSidePanelService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 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);
@@ -1114,7 +1277,7 @@ 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) {
         event.preventDefault();
@@ -1140,7 +1303,7 @@ class TableViewComponent {
     }
     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 +1312,41 @@ 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, config: { hasCloseButton: true, skipLocationChange: true } }, {
+                position: 'right',
+                injector: this.injector,
+            })
+                .subscribe((value) => {
+                if (value === '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 +1462,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: "<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,
@@ -1331,6 +1532,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 +1544,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('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('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 +1924,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('refresh');
+            this.event.emit('close');
+            this.setView(node);
             return of(null);
         },
         update_value: (action, response) => {
@@ -1763,6 +1968,7 @@ class FormViewComponent {
     };
     node = input.required();
     config = input();
+    event = output();
     isLoading = this._isLoading.asReadonly();
     data = computed(() => {
         const engine = this._engine();
@@ -1817,6 +2023,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 +2098,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 +2368,7 @@ class LeContainerComponent {
     constructor() {
         this.listenAuthState();
         this.listenPageInit();
+        this.dataService.registerEffects();
     }
     onSelectionChange(view) {
         this.dataService.setView(view);
@@ -2167,7 +2398,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,