@planeasyinc/le-angular 0.0.12 → 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 { SelectionModel } from '@angular/cdk/collections';
 import * as i1 from '@angular/forms';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
@@ -214,8 +215,8 @@ class LEDataService {
     }
     setView(node, skipLocationChange) {
         this._view.set(node);
-        window.scrollTo({ top: 0, behavior: 'smooth' });
         if (!skipLocationChange) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
             this.leNavigationService.navigate(node);
         }
     }
@@ -398,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',
@@ -438,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 {
@@ -1000,92 +1001,109 @@ 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.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"] }] });
+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: [{
-                    template: `
-    @if (data.node) {
-      <le-node [node]="data.node" [config]="data.config"></le-node>
-    }
-  `,
-                    imports: [forwardRef(() => NodeComponent)],
-                }]
+            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,
-        });
-        return dialogRef.closed;
+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: LeDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeDialogService, providedIn: 'root' });
+    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: LeDialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+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)
-                    return;
-                this.dataService.setView(data.node, true);
+                if (data.node) {
+                    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>
+    onTabClick(index) {
+        this._selectedTab.set(index);
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["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, 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: [{
-                    template: `
-    @if (node(); as node) {
-      <le-node [node]="node" [config]="data()?.config" (event)="onEvent($event)"></le-node>
-    }
-  `,
-                    host: {
+            args: [{ host: {
                         '[style.width]': '"100%"',
                         '[style.overflow]': '"auto"',
                         '[style.padding]': '"0 16px"',
-                    },
-                    imports: [forwardRef(() => NodeComponent)],
-                    providers: [LEDataService],
-                }]
+                    }, 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 = {
@@ -1116,14 +1134,14 @@ class LeSidePanelService {
             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') {
+        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());
             }
@@ -1146,6 +1164,17 @@ class LeSidePanelService {
         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';
     }
     getWidth(config) {
@@ -1191,7 +1220,6 @@ class TableViewComponent {
     apiService = inject(LEApiService);
     dataService = inject(LEDataService);
     filtersService = inject(LEFiltersService);
-    dialogService = inject(LeDialogService);
     sidePanelService = inject(LeSidePanelService);
     injector = inject(Injector);
     node = input.required();
@@ -1215,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) {
@@ -1279,13 +1307,12 @@ class TableViewComponent {
         const actions = this.node().actions?.onRowClick ?? [];
         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,
@@ -1297,9 +1324,30 @@ 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}`;
@@ -1319,12 +1367,16 @@ class TableViewComponent {
                 node.controlSource.params = this.interpolateRowValues(node.controlSource.params, row);
             }
             this.sidePanelService
-                .show({ node, config: { hasCloseButton: true, skipLocationChange: true } }, {
+                .show({
+                node,
+                tabs: [],
+                config: { hasCloseButton: true, skipLocationChange: true },
+            }, {
                 position: 'right',
                 injector: this.injector,
             })
-                .subscribe((value) => {
-                if (value === 'refresh') {
+                .subscribe((event) => {
+                if (event.type === 'refresh') {
                     this.forceFetch();
                 }
             });
@@ -1482,7 +1534,7 @@ class TableViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewComponent, isStandalone: true, selector: "table-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, 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 });
+    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,
@@ -1504,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) => {
@@ -1544,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 }, 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 });
+    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-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" }]
+            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) => {
@@ -1930,8 +1982,8 @@ class FormViewComponent {
         },
         update_table: (action) => {
             const node = this.mapUpdateTableActionToTableNode(action.data_source);
-            this.event.emit('refresh');
-            this.event.emit('close');
+            this.event.emit({ type: 'refresh' });
+            this.event.emit({ type: 'close' });
             this.setView(node);
             return of(null);
         },