@planeasyinc/le-angular 0.0.20 → 0.0.22

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, signal, Injectable, computed, effect, untracked, Directive, input, ChangeDetectionStrategy, Component, output, forwardRef, ViewContainerRef, Injector, Renderer2, ElementRef, DestroyRef, viewChild } from '@angular/core';
 import { HttpContextToken, HttpClient, HttpContext, HttpRequest, HttpEventType } from '@angular/common/http';
-import { map, filter, distinctUntilChanged, BehaviorSubject, Subject, takeUntil, firstValueFrom, of, tap, catchError, from, concatMap, finalize, fromEvent, startWith } from 'rxjs';
+import { map, filter, distinctUntilChanged, Subject, takeUntil, BehaviorSubject, firstValueFrom, of, tap, catchError, switchMap, from, concatMap, finalize, fromEvent, startWith } from 'rxjs';
 import { decodeJwt, UrlFragmentBuilder, normalizeConfig } from '@planeasyinc/le-core';
-import { Location, JsonPipe, UpperCasePipe, DatePipe, ViewportScroller } from '@angular/common';
+import { Location, UpperCasePipe, JsonPipe, DatePipe, ViewportScroller } from '@angular/common';
 import { CdkDrag } from '@angular/cdk/drag-drop';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -11,11 +11,11 @@ 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 { 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 { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { A11yModule } from '@angular/cdk/a11y';
 import { adaptOld } from '@planeasyinc/fe-adapters-old';
 import { adaptSections } from '@planeasyinc/fe-adapters-sections';
 import { createEngine } from '@planeasyinc/fe-core';
@@ -599,622 +599,622 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     }, 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 {
-    data;
-    get count() {
-        return this.data.value.length;
-    }
-    constructor(data = []) {
-        super();
-        this.data = new BehaviorSubject(data);
-    }
-    getValueByIndex(index) {
-        return this.data.value[index];
+const flattenNodes = (nodes) => {
+    const flattenedNodes = [];
+    for (const node of nodes) {
+        flattenedNodes.push(node);
+        if (node.leafs) {
+            flattenedNodes.push(...flattenNodes(node.leafs));
+        }
     }
-    connect() {
-        return this.data;
+    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 };
     }
-    disconnect() { }
+    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: TreeViewComponent, decorators: [{
+            type: Component,
+            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 TableViewPaginationComponent {
-    pageSize = input.required();
-    pageSizeOptions = input.required();
-    entriesCount = input.required();
-    pageChange = output();
-    selectedPageSize = signal(0);
-    selectedPageIndex = signal(0);
-    entriesRange = computed(() => {
-        const selectedPageIndex = this.selectedPageIndex();
-        const pageSize = this.pageSize();
-        const count = this.entriesCount();
-        const rangeStart = selectedPageIndex * pageSize;
-        const rangeEnd = rangeStart + pageSize;
+class StringTemplate {
+    data = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: StringTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: StringTemplate, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<span class="le-table-template le-template-string">{{ data() ?? '–' }}</span>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: StringTemplate, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<span class="le-table-template le-template-string">{{ data() ?? '–' }}</span>`,
+                }]
+        }] });
+
+class ReferenceTemplate {
+    data = input.required();
+    attribute = input.required();
+    metadata = input.required();
+    clicked = output();
+    reference = computed(() => {
+        const ref = this.data()?.ref;
         return {
-            start: rangeStart,
-            end: rangeEnd > count ? count : rangeEnd,
+            text: this.generateText(ref),
+            href: this.generateLink(ref),
         };
     });
-    constructor() {
-        this.setEffects();
-    }
-    onPageSizeChange(option) {
-        this.selectedPageSize.set(option);
+    onClick(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.clicked.emit(this.data());
     }
-    onNavigateClick(param) {
-        this.selectedPageIndex.update((index) => {
-            if (param === 'prev' && this.canNavigatePrev(index)) {
-                return index - 1;
-            }
-            if (param === 'next' && this.canNavigateNext(index)) {
-                return index + 1;
-            }
-            return index;
-        });
+    generateText(ref) {
+        if (ref) {
+            return ref.display_name || ref.object_id;
+        }
+        return '';
     }
-    canNavigatePrev(index = this.selectedPageIndex()) {
-        return index > 0;
+    generateLink(ref) {
+        if (ref) {
+            // statedb%23Tag%3ALATEST%3Atag_01%3ALATEST
+            const href = `/details/object/${ref.class_name}/${ref.resource}%2523${ref.class_name}%253A${ref.class_version}%253A${ref.object_id}%253A${ref.object_version}`;
+            return ref?.address ? `${href}?address=${ref.address}` : href;
+        }
     }
-    canNavigateNext(index = this.selectedPageIndex()) {
-        return index < this.getLastPageIndex();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReferenceTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ReferenceTemplate, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, attribute: { classPropertyName: "attribute", publicName: "attribute", isSignal: true, isRequired: true, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    <span class="le-table-template le-template-reference">
+      @if (reference(); as reference) {
+        @if (reference.href) {
+          <a
+            [href]="reference.href"
+            [attr.aria-label]="reference.text"
+            (click)="onClick($event)"
+            target="_blank"
+            >{{ reference.text }}</a
+          >
+        } @else {
+          {{ reference.text }}
+        }
+      }
+    </span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReferenceTemplate, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <span class="le-table-template le-template-reference">
+      @if (reference(); as reference) {
+        @if (reference.href) {
+          <a
+            [href]="reference.href"
+            [attr.aria-label]="reference.text"
+            (click)="onClick($event)"
+            target="_blank"
+            >{{ reference.text }}</a
+          >
+        } @else {
+          {{ reference.text }}
+        }
+      }
+    </span>
+  `,
+                }]
+        }] });
+
+class JSONTemplate {
+    data = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: JSONTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: JSONTemplate, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<pre class="le-table-template le-template-json">{{
+    data() ? (data() | json) : '–'
+  }}</pre>`, isInline: true, dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: JSONTemplate, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<pre class="le-table-template le-template-json">{{
+    data() ? (data() | json) : '–'
+  }}</pre>`,
+                    imports: [JsonPipe],
+                }]
+        }] });
+
+const TABLE_SELL_TEMPLATE_NAMES = {
+    StringTemplate: 'StringTemplate',
+    ReferenceTemplate: 'ReferenceTemplate',
+    JsonTemplate: 'JsonTemplate',
+};
+const TABLE_CELL_TEMPLATES = {
+    StringTemplate: StringTemplate,
+    ReferenceTemplate: ReferenceTemplate,
+    JsonTemplate: JSONTemplate,
+};
+
+class TableViewCellDirective {
+    vcr = inject(ViewContainerRef);
+    componentRef;
+    type = input();
+    data = input.required();
+    column = input();
+    metadata = input();
+    clicked = output();
+    constructor() {
+        this.setEffects();
     }
     setEffects() {
         effect(() => {
-            const pageSize = this.pageSize();
-            untracked(() => {
-                this.selectedPageSize.set(pageSize);
-            });
-        });
-        effect(() => {
-            const pageSize = this.selectedPageSize();
+            const type = this.type();
+            const data = this.data();
+            const column = this.column();
+            const metadata = this.metadata();
             untracked(() => {
-                const selectedPageIndex = this.selectedPageIndex();
-                const pageIndex = this.getPageIndexOnPageSizeChange();
-                if (selectedPageIndex !== pageIndex) {
-                    this.selectedPageIndex.set(pageIndex);
+                const component = (type && TABLE_CELL_TEMPLATES[type]) || TABLE_CELL_TEMPLATES['StringTemplate'];
+                if (this.componentRef) {
+                    this.componentRef.destroy();
                 }
-                else {
-                    this.pageChange.emit({
-                        pageSize: pageSize,
-                        pageIndex: pageIndex,
+                this.componentRef = this.vcr.createComponent(component);
+                this.componentRef?.setInput('data', data);
+                if (type === 'ReferenceTemplate') {
+                    if (column) {
+                        this.componentRef?.setInput('attribute', column);
+                    }
+                    if (metadata) {
+                        this.componentRef?.setInput('metadata', metadata);
+                    }
+                    const sub = (this.componentRef?.instance).clicked.subscribe(data => {
+                        this.clicked.emit(data);
                     });
+                    this.componentRef?.onDestroy(() => sub.unsubscribe());
                 }
             });
         });
-        effect(() => {
-            const index = this.selectedPageIndex();
-            untracked(() => {
-                this.pageChange.emit({
-                    pageSize: this.selectedPageSize(),
-                    pageIndex: index,
-                });
-            });
-        });
     }
-    /**
-     * @return page index or last available page index for selected page size
-     */
-    getPageIndexOnPageSizeChange() {
-        const selectedPageIndex = this.selectedPageIndex();
-        const lasPageIndex = this.getLastPageIndex();
-        return selectedPageIndex > lasPageIndex ? lasPageIndex : selectedPageIndex;
-    }
-    /**
-     * @return last available page index
-     */
-    getLastPageIndex() {
-        const count = this.entriesCount();
-        if (count === 0)
-            return 0;
-        return Math.ceil(count / this.selectedPageSize()) - 1;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewPaginationComponent, isStandalone: true, selector: "table-view-pagination", inputs: { pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: true, transformFunction: null }, entriesCount: { classPropertyName: "entriesCount", publicName: "entriesCount", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"le-pagination\">\n  <div class=\"le-pagination-options\">\n    <span>Items per page:</span>\n\n    <button [cdkMenuTriggerFor]=\"optionsMenu\" class=\"le-button\">\n      {{ selectedPageSize() }}\n\n      <le-icon name=\"arrow-down\"></le-icon>\n    </button>\n\n    <ng-template #optionsMenu>\n      <div class=\"le-pagination-option-list\" cdkMenu>\n        @for (option of pageSizeOptions(); track option) {\n          <button cdkMenuItem class=\"le-pagination-option-item\" (click)=\"onPageSizeChange(option)\">\n            {{ option }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"spacer\"></div>\n\n  <div class=\"le-pagination-range\">\n    {{ entriesRange().start }} - {{ entriesRange().end }} of {{ entriesCount() }}\n  </div>\n\n  <div class=\"le-pagination-navigation\">\n    <button\n      class=\"le-navigation le-navigation-prev\"\n      [tabindex]=\"canNavigatePrev() ? 0 : -1\"\n      [disabled]=\"!canNavigatePrev()\"\n      (click)=\"onNavigateClick('prev')\"\n    >\n      <le-icon class=\"le-chevron le-chevron--left\" name=\"chevron\"></le-icon>\n    </button>\n\n    <button\n      class=\"le-navigation le-navigation-next\"\n      [tabindex]=\"canNavigateNext() ? 0 : -1\"\n      [disabled]=\"!canNavigateNext()\"\n      (click)=\"onNavigateClick('next')\"\n    >\n      <le-icon class=\"le-chevron le-chevron--right\" name=\"chevron\"></le-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TableViewCellDirective, isStandalone: true, selector: "[tableViewCell]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewPaginationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'table-view-pagination', imports: [CdkMenuTrigger, CdkMenu, CdkMenuItem, A11yModule, LeIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-pagination\">\n  <div class=\"le-pagination-options\">\n    <span>Items per page:</span>\n\n    <button [cdkMenuTriggerFor]=\"optionsMenu\" class=\"le-button\">\n      {{ selectedPageSize() }}\n\n      <le-icon name=\"arrow-down\"></le-icon>\n    </button>\n\n    <ng-template #optionsMenu>\n      <div class=\"le-pagination-option-list\" cdkMenu>\n        @for (option of pageSizeOptions(); track option) {\n          <button cdkMenuItem class=\"le-pagination-option-item\" (click)=\"onPageSizeChange(option)\">\n            {{ option }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"spacer\"></div>\n\n  <div class=\"le-pagination-range\">\n    {{ entriesRange().start }} - {{ entriesRange().end }} of {{ entriesCount() }}\n  </div>\n\n  <div class=\"le-pagination-navigation\">\n    <button\n      class=\"le-navigation le-navigation-prev\"\n      [tabindex]=\"canNavigatePrev() ? 0 : -1\"\n      [disabled]=\"!canNavigatePrev()\"\n      (click)=\"onNavigateClick('prev')\"\n    >\n      <le-icon class=\"le-chevron le-chevron--left\" name=\"chevron\"></le-icon>\n    </button>\n\n    <button\n      class=\"le-navigation le-navigation-next\"\n      [tabindex]=\"canNavigateNext() ? 0 : -1\"\n      [disabled]=\"!canNavigateNext()\"\n      (click)=\"onNavigateClick('next')\"\n    >\n      <le-icon class=\"le-chevron le-chevron--right\" name=\"chevron\"></le-icon>\n    </button>\n  </div>\n</div>\n" }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tableViewCell]',
+                }]
         }], ctorParameters: () => [] });
 
-const isPlaceholder$1 = (value) => {
-    return value.startsWith('{') && value.endsWith('}');
-};
-const mapSortStringToSort = (sort) => {
-    return sort.startsWith('-') ? [sort.slice(1), 'desc'] : [sort, 'desc'];
-};
-const mapSortStringListToSortMap = (sortList) => {
-    return sortList.reduce((acc, sort) => {
-        const { 0: key, 1: value } = mapSortStringToSort(sort);
-        acc.set(key, value);
-        return acc;
-    }, new Map());
-};
-const mapSortMapToSortStringList = (sortMap) => {
-    return [...sortMap].reduce((acc, sort) => {
-        const prefix = sort[1] === 'asc' ? '' : '-';
-        acc.push(`${prefix}${sort[0]}`);
-        return acc;
-    }, []);
-};
-const mapFiltersToFilterString = (filters) => {
-    return Object.entries(filters)
-        .reduce((acc, filter) => {
-        return acc.concat(`filter[${filter[0]}]=${filter[1]}`);
-    }, [])
-        .join('&');
-};
-const buildRequestContext = (params, ctx) => {
-    const requestContext = {};
-    if (ctx.hasPagination && params.pageIndex !== undefined) {
-        requestContext['pageIndex'] = params.pageIndex;
-        requestContext['pageSize'] = params.pageSize;
-    }
-    if (ctx.isSortable && params.sort) {
-        requestContext['sort'] = params.sort;
-    }
-    if (params.filters && Object.keys(params.filters).length > 0) {
-        requestContext['filters'] = params.filters;
-    }
-    return requestContext;
-};
-const buildRequestBody = (params) => {
-    const body = {};
-    if (params.sort?.length) {
-        body['ordering'] = params.sort;
-    }
-    if (params.filters && Object.keys(params.filters).length > 0) {
-        body['filters'] = params.filters;
-    }
-    if (params.pageIndex !== undefined) {
-        body['page'] = params.pageIndex + 1;
-    }
-    if (params.pageSize) {
-        body['page_size'] = params.pageSize;
-    }
-    return body;
-};
-const buildQueryString = (params) => {
-    const query = [];
-    if (params.pageIndex !== undefined) {
-        query.push(`page=${params.pageIndex + 1}`);
-    }
-    if (params.pageSize) {
-        query.push(`page_size=${params.pageSize}`);
-    }
-    if (params.sort?.length) {
-        query.push(`ordering=${params.sort.join(',')}`);
-    }
-    if (params.filters && Object.keys(params.filters).length > 0) {
-        query.push(mapFiltersToFilterString(params.filters));
+class BlockViewComponent {
+    data = input.required();
+    columns = input.required();
+    event = output();
+    onCellClicked(data) {
+        this.event.emit({ type: 'cell_clicked', data });
+        this.event.emit({ type: 'close' });
     }
-    return query.filter((item) => !!item).join('&');
-};
-
-class LoadingViewComponent {
-    headerHeight = input(0);
-    rowHeight = input(40);
-    rowCount = input(1);
-    rows = computed(() => {
-        return new Array(this.rowCount()).fill(null).map((_, i) => i);
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LoadingViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LoadingViewComponent, isStandalone: true, selector: "app-loading-view", inputs: { headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"preloader\">\n  @if (headerHeight()) {\n    <div class=\"preloader-row\" [style.height.px]=\"headerHeight()\"></div>\n  }\n\n  @for (row of rows(); track row) {\n    <div class=\"preloader-row\" [style.height.px]=\"rowHeight()\"></div>\n  }\n</div>\n", styles: [".preloader{display:flex;flex-direction:column;width:100%;gap:8px}.preloader-row{background:#f5f5f5 no-repeat;animation:pulse 1.5s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}\n"] });
+    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: LoadingViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BlockViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loading-view', template: "<div class=\"preloader\">\n  @if (headerHeight()) {\n    <div class=\"preloader-row\" [style.height.px]=\"headerHeight()\"></div>\n  }\n\n  @for (row of rows(); track row) {\n    <div class=\"preloader-row\" [style.height.px]=\"rowHeight()\"></div>\n  }\n</div>\n", styles: [".preloader{display:flex;flex-direction:column;width:100%;gap:8px}.preloader-row{background:#f5f5f5 no-repeat;animation:pulse 1.5s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}\n"] }]
+            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 TableViewActions {
-    actions = input();
-    actionClicked = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewActions, isStandalone: true, selector: "table-view-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { properties: { "class.le-table-view-actions": "true" } }, ngImport: i0, template: `
-    @for (action of actions(); track action) {
-      <button
-        class="le-button le-button-flat le-button--success"
-        (click)="actionClicked.emit(action)"
-      >
-        {{ action.label }}
-      </button>
+class SidePanelComponent {
+    dataService = inject(LEDataService);
+    _selectedTab = signal(0);
+    data = input.required();
+    config = input();
+    event = output();
+    node = this.dataService.view;
+    tabs = computed(() => {
+        const data = this.data();
+        return data.tabs.length ? data.tabs : undefined;
+    });
+    selectedTabIndex = this._selectedTab.asReadonly();
+    selectedTab = computed(() => {
+        return this.tabs()?.[this.selectedTabIndex()];
+    });
+    constructor() {
+        effect(() => {
+            const data = this.data();
+            untracked(() => {
+                if (data.node) {
+                    this.dataService.setView(data.node, true);
+                }
+            });
+        });
     }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewActions, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'table-view-actions',
-                    template: `
-    @for (action of actions(); track action) {
-      <button
-        class="le-button le-button-flat le-button--success"
-        (click)="actionClicked.emit(action)"
-      >
-        {{ action.label }}
-      </button>
+    onEvent(event) {
+        this.event.emit(event);
     }
-  `,
-                    host: {
-                        '[class.le-table-view-actions]': 'true',
-                    },
-                }]
-        }] });
-
-class StringTemplate {
-    data = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: StringTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: StringTemplate, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<span class="le-table-template le-template-string">{{ data() ?? '–' }}</span>`, isInline: true });
+    onTabClick(index) {
+        this._selectedTab.set(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidePanelComponent, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, host: { properties: { "style.width": "\"100%\"", "style.overflow": "\"auto\"", "style.padding": "\"0 16px\"" } }, providers: [LEDataService, LEFiltersService], ngImport: i0, template: "@if (node(); as node) {\n  <le-node [node]=\"node\" [config]=\"data()?.config\" (event)=\"onEvent($event)\"></le-node>\n}\n\n@if (tabs(); as tabs) {\n  <div class=\"le-tabs-nav\">\n    @for (tab of tabs; track tab.type; let idx = $index) {\n      <button\n        class=\"le-button le-button-flat le-button--success\"\n        [attr.aria-label]=\"'Select ' + tab.type\"\n        [class.le-button--success]=\"selectedTabIndex() === idx\"\n        (click)=\"onTabClick(idx)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n    <span class=\"spacer\"></span>\n\n    <button\n      aria-label=\"Close side panel\"\n      class=\"le-button le-button-flat\"\n      (click)=\"event.emit({ type: 'close' })\"\n    >Close</button>\n  </div>\n}\n\n@if (selectedTab(); as selectedTab) {\n  <div class=\"le-tabs-content\">\n    @switch (selectedTab.type) {\n      @case ('tree') {\n        <le-tree-view [data]=\"selectedTab.data\"></le-tree-view>\n      }\n      @case ('table') {\n        <le-node\n          [node]=\"selectedTab.data\"\n          [config]=\"data()?.config\"\n          (event)=\"onEvent($event)\"\n        ></le-node>\n      }\n      @case ('block') {\n        <le-block-view\n          [data]=\"selectedTab.data\"\n          [columns]=\"selectedTab.columns\"\n          (event)=\"onEvent($event)\"\n        ></le-block-view>\n      }\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }, { kind: "component", type: i0.forwardRef(() => TreeViewComponent), selector: "le-tree-view", inputs: ["data"] }, { kind: "component", type: i0.forwardRef(() => BlockViewComponent), selector: "le-block-view", inputs: ["data", "columns"], outputs: ["event"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: StringTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidePanelComponent, decorators: [{
             type: Component,
-            args: [{
-                    template: `<span class="le-table-template le-template-string">{{ data() ?? '–' }}</span>`,
-                }]
-        }] });
+            args: [{ host: {
+                        '[style.width]': '"100%"',
+                        '[style.overflow]': '"auto"',
+                        '[style.padding]': '"0 16px"',
+                    }, imports: [forwardRef(() => NodeComponent), TreeViewComponent, BlockViewComponent], providers: [LEDataService, LEFiltersService], template: "@if (node(); as node) {\n  <le-node [node]=\"node\" [config]=\"data()?.config\" (event)=\"onEvent($event)\"></le-node>\n}\n\n@if (tabs(); as tabs) {\n  <div class=\"le-tabs-nav\">\n    @for (tab of tabs; track tab.type; let idx = $index) {\n      <button\n        class=\"le-button le-button-flat le-button--success\"\n        [attr.aria-label]=\"'Select ' + tab.type\"\n        [class.le-button--success]=\"selectedTabIndex() === idx\"\n        (click)=\"onTabClick(idx)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n    <span class=\"spacer\"></span>\n\n    <button\n      aria-label=\"Close side panel\"\n      class=\"le-button le-button-flat\"\n      (click)=\"event.emit({ type: 'close' })\"\n    >Close</button>\n  </div>\n}\n\n@if (selectedTab(); as selectedTab) {\n  <div class=\"le-tabs-content\">\n    @switch (selectedTab.type) {\n      @case ('tree') {\n        <le-tree-view [data]=\"selectedTab.data\"></le-tree-view>\n      }\n      @case ('table') {\n        <le-node\n          [node]=\"selectedTab.data\"\n          [config]=\"data()?.config\"\n          (event)=\"onEvent($event)\"\n        ></le-node>\n      }\n      @case ('block') {\n        <le-block-view\n          [data]=\"selectedTab.data\"\n          [columns]=\"selectedTab.columns\"\n          (event)=\"onEvent($event)\"\n        ></le-block-view>\n      }\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
 
-class ReferenceTemplate {
-    data = input.required();
-    attribute = input.required();
-    metadata = input.required();
-    clicked = output();
-    reference = computed(() => {
-        const ref = this.data()?.ref;
-        return {
-            text: this.generateText(ref),
-            href: this.generateLink(ref),
-        };
-    });
-    onClick(event) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        this.clicked.emit(this.data());
+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((event) => {
+            this.output.next(event);
+            if (event.type === 'close') {
+                this.overlayRef?.addPanelClass(this.getClosedClass(config));
+                this.delayed(() => this.hide());
+            }
+        });
+        componentRef.onDestroy(() => {
+            sub.unsubscribe();
+            destroy$.next();
+            destroy$.complete();
+        });
+        return this.output.pipe(takeUntil(destroy$));
     }
-    generateText(ref) {
-        if (ref) {
-            return ref.display_name || ref.object_id;
-        }
-        return '';
+    hide() {
+        this.overlayRef?.dispose();
+        this.overlayRef = undefined;
     }
-    generateLink(ref) {
-        if (ref) {
-            // statedb%23Tag%3ALATEST%3Atag_01%3ALATEST
-            const href = `/details/object/${ref.class_name}/${ref.resource}%2523${ref.class_name}%253A${ref.class_version}%253A${ref.object_id}%253A${ref.object_version}`;
-            return ref?.address ? `${href}?address=${ref.address}` : href;
+    delayed(fn) {
+        setTimeout(() => fn(), 300);
+    }
+    getHeight(config) {
+        if (config.height) {
+            return config.height;
+        }
+        if (config.position === 'top' || config.position === 'bottom') {
+            if (this.breakpointObserver.isMatched(Breakpoints.XSmall)) {
+                return '80vh';
+            }
+            else if (this.breakpointObserver.isMatched(Breakpoints.Small)) {
+                return '60vh';
+            }
+            else {
+                return '40vh';
+            }
         }
+        return '100vh';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReferenceTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ReferenceTemplate, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, attribute: { classPropertyName: "attribute", publicName: "attribute", isSignal: true, isRequired: true, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
-    <span class="le-table-template le-template-reference">
-      @if (reference(); as reference) {
-        @if (reference.href) {
-          <a
-            [href]="reference.href"
-            [attr.aria-label]="reference.text"
-            (click)="onClick($event)"
-            target="_blank"
-            >{{ reference.text }}</a
-          >
-        } @else {
-          {{ reference.text }}
+    getWidth(config) {
+        if (config.width) {
+            return config.width;
         }
-      }
-    </span>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReferenceTemplate, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-    <span class="le-table-template le-template-reference">
-      @if (reference(); as reference) {
-        @if (reference.href) {
-          <a
-            [href]="reference.href"
-            [attr.aria-label]="reference.text"
-            (click)="onClick($event)"
-            target="_blank"
-            >{{ reference.text }}</a
-          >
-        } @else {
-          {{ reference.text }}
+        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';
+            }
         }
-      }
-    </span>
-  `,
-                }]
-        }] });
-
-class JSONTemplate {
-    data = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: JSONTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: JSONTemplate, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<pre class="le-table-template le-template-json">{{
-    data() ? (data() | json) : '–'
-  }}</pre>`, isInline: true, dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }] });
+        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: JSONTemplate, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeSidePanelService, decorators: [{
+            type: Injectable,
             args: [{
-                    template: `<pre class="le-table-template le-template-json">{{
-    data() ? (data() | json) : '–'
-  }}</pre>`,
-                    imports: [JsonPipe],
+                    providedIn: 'root',
                 }]
         }] });
 
-const TABLE_SELL_TEMPLATE_NAMES = {
-    StringTemplate: 'StringTemplate',
-    ReferenceTemplate: 'ReferenceTemplate',
-    JsonTemplate: 'JsonTemplate',
-};
-const TABLE_CELL_TEMPLATES = {
-    StringTemplate: StringTemplate,
-    ReferenceTemplate: ReferenceTemplate,
-    JsonTemplate: JSONTemplate,
-};
-
-class TableViewCellDirective {
-    vcr = inject(ViewContainerRef);
-    componentRef;
-    type = input();
-    data = input.required();
-    column = input();
-    metadata = input();
-    clicked = output();
+class TableViewPaginationComponent {
+    pageSize = input.required();
+    pageSizeOptions = input.required();
+    entriesCount = input.required();
+    pageChange = output();
+    selectedPageSize = signal(0);
+    selectedPageIndex = signal(0);
+    entriesRange = computed(() => {
+        const selectedPageIndex = this.selectedPageIndex();
+        const pageSize = this.pageSize();
+        const count = this.entriesCount();
+        const rangeStart = selectedPageIndex * pageSize;
+        const rangeEnd = rangeStart + pageSize;
+        return {
+            start: rangeStart,
+            end: rangeEnd > count ? count : rangeEnd,
+        };
+    });
     constructor() {
         this.setEffects();
     }
+    onPageSizeChange(option) {
+        this.selectedPageSize.set(option);
+    }
+    onNavigateClick(param) {
+        this.selectedPageIndex.update((index) => {
+            if (param === 'prev' && this.canNavigatePrev(index)) {
+                return index - 1;
+            }
+            if (param === 'next' && this.canNavigateNext(index)) {
+                return index + 1;
+            }
+            return index;
+        });
+    }
+    canNavigatePrev(index = this.selectedPageIndex()) {
+        return index > 0;
+    }
+    canNavigateNext(index = this.selectedPageIndex()) {
+        return index < this.getLastPageIndex();
+    }
     setEffects() {
         effect(() => {
-            const type = this.type();
-            const data = this.data();
-            const column = this.column();
-            const metadata = this.metadata();
+            const pageSize = this.pageSize();
             untracked(() => {
-                const component = (type && TABLE_CELL_TEMPLATES[type]) || TABLE_CELL_TEMPLATES['StringTemplate'];
-                if (this.componentRef) {
-                    this.componentRef.destroy();
+                this.selectedPageSize.set(pageSize);
+            });
+        });
+        effect(() => {
+            const pageSize = this.selectedPageSize();
+            untracked(() => {
+                const selectedPageIndex = this.selectedPageIndex();
+                const pageIndex = this.getPageIndexOnPageSizeChange();
+                if (selectedPageIndex !== pageIndex) {
+                    this.selectedPageIndex.set(pageIndex);
                 }
-                this.componentRef = this.vcr.createComponent(component);
-                this.componentRef?.setInput('data', data);
-                if (type === 'ReferenceTemplate') {
-                    if (column) {
-                        this.componentRef?.setInput('attribute', column);
-                    }
-                    if (metadata) {
-                        this.componentRef?.setInput('metadata', metadata);
-                    }
-                    const sub = (this.componentRef?.instance).clicked.subscribe(data => {
-                        this.clicked.emit(data);
+                else {
+                    this.pageChange.emit({
+                        pageSize: pageSize,
+                        pageIndex: pageIndex,
                     });
-                    this.componentRef?.onDestroy(() => sub.unsubscribe());
                 }
             });
         });
+        effect(() => {
+            const index = this.selectedPageIndex();
+            untracked(() => {
+                this.pageChange.emit({
+                    pageSize: this.selectedPageSize(),
+                    pageIndex: index,
+                });
+            });
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TableViewCellDirective, isStandalone: true, selector: "[tableViewCell]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewCellDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tableViewCell]',
-                }]
-        }], ctorParameters: () => [] });
-
-const flattenNodes = (nodes) => {
-    const flattenedNodes = [];
-    for (const node of nodes) {
-        flattenedNodes.push(node);
-        if (node.leafs) {
-            flattenedNodes.push(...flattenNodes(node.leafs));
-        }
+    /**
+     * @return page index or last available page index for selected page size
+     */
+    getPageIndexOnPageSizeChange() {
+        const selectedPageIndex = this.selectedPageIndex();
+        const lasPageIndex = this.getLastPageIndex();
+        return selectedPageIndex > lasPageIndex ? lasPageIndex : selectedPageIndex;
     }
-    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 last available page index
+     */
+    getLastPageIndex() {
+        const count = this.entriesCount();
+        if (count === 0)
+            return 0;
+        return Math.ceil(count / this.selectedPageSize()) - 1;
     }
-    return { label, value: obj };
-};
-const mapObjectToTree = (data) => {
-    return Object.entries(data).map((item) => toTree(item[1], item[0]));
-};
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewPaginationComponent, isStandalone: true, selector: "table-view-pagination", inputs: { pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: true, transformFunction: null }, entriesCount: { classPropertyName: "entriesCount", publicName: "entriesCount", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"le-pagination\">\n  <div class=\"le-pagination-options\">\n    <span>Items per page:</span>\n\n    <button [cdkMenuTriggerFor]=\"optionsMenu\" class=\"le-button\">\n      {{ selectedPageSize() }}\n\n      <le-icon name=\"arrow-down\"></le-icon>\n    </button>\n\n    <ng-template #optionsMenu>\n      <div class=\"le-pagination-option-list\" cdkMenu>\n        @for (option of pageSizeOptions(); track option) {\n          <button cdkMenuItem class=\"le-pagination-option-item\" (click)=\"onPageSizeChange(option)\">\n            {{ option }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"spacer\"></div>\n\n  <div class=\"le-pagination-range\">\n    {{ entriesRange().start }} - {{ entriesRange().end }} of {{ entriesCount() }}\n  </div>\n\n  <div class=\"le-pagination-navigation\">\n    <button\n      class=\"le-navigation le-navigation-prev\"\n      [tabindex]=\"canNavigatePrev() ? 0 : -1\"\n      [disabled]=\"!canNavigatePrev()\"\n      (click)=\"onNavigateClick('prev')\"\n    >\n      <le-icon class=\"le-chevron le-chevron--left\" name=\"chevron\"></le-icon>\n    </button>\n\n    <button\n      class=\"le-navigation le-navigation-next\"\n      [tabindex]=\"canNavigateNext() ? 0 : -1\"\n      [disabled]=\"!canNavigateNext()\"\n      (click)=\"onNavigateClick('next')\"\n    >\n      <le-icon class=\"le-chevron le-chevron--right\" name=\"chevron\"></le-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'table-view-pagination', imports: [CdkMenuTrigger, CdkMenu, CdkMenuItem, A11yModule, LeIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-pagination\">\n  <div class=\"le-pagination-options\">\n    <span>Items per page:</span>\n\n    <button [cdkMenuTriggerFor]=\"optionsMenu\" class=\"le-button\">\n      {{ selectedPageSize() }}\n\n      <le-icon name=\"arrow-down\"></le-icon>\n    </button>\n\n    <ng-template #optionsMenu>\n      <div class=\"le-pagination-option-list\" cdkMenu>\n        @for (option of pageSizeOptions(); track option) {\n          <button cdkMenuItem class=\"le-pagination-option-item\" (click)=\"onPageSizeChange(option)\">\n            {{ option }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"spacer\"></div>\n\n  <div class=\"le-pagination-range\">\n    {{ entriesRange().start }} - {{ entriesRange().end }} of {{ entriesCount() }}\n  </div>\n\n  <div class=\"le-pagination-navigation\">\n    <button\n      class=\"le-navigation le-navigation-prev\"\n      [tabindex]=\"canNavigatePrev() ? 0 : -1\"\n      [disabled]=\"!canNavigatePrev()\"\n      (click)=\"onNavigateClick('prev')\"\n    >\n      <le-icon class=\"le-chevron le-chevron--left\" name=\"chevron\"></le-icon>\n    </button>\n\n    <button\n      class=\"le-navigation le-navigation-next\"\n      [tabindex]=\"canNavigateNext() ? 0 : -1\"\n      [disabled]=\"!canNavigateNext()\"\n      (click)=\"onNavigateClick('next')\"\n    >\n      <le-icon class=\"le-chevron le-chevron--right\" name=\"chevron\"></le-icon>\n    </button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [] });
 
-class TreeViewComponent {
-    treeControl = new NestedTreeControl((node) => node.leafs);
-    data = input();
-    source = computed(() => {
-        return new ArrayDataSource(mapObjectToTree(this.data() ?? {}));
+class LoadingViewComponent {
+    headerHeight = input(0);
+    rowHeight = input(40);
+    rowCount = input(1);
+    rows = computed(() => {
+        return new Array(this.rowCount()).fill(null).map((_, i) => i);
     });
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LoadingViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LoadingViewComponent, isStandalone: true, selector: "app-loading-view", inputs: { headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"preloader\">\n  @if (headerHeight()) {\n    <div class=\"preloader-row\" [style.height.px]=\"headerHeight()\"></div>\n  }\n\n  @for (row of rows(); track row) {\n    <div class=\"preloader-row\" [style.height.px]=\"rowHeight()\"></div>\n  }\n</div>\n", styles: [".preloader{display:flex;flex-direction:column;width:100%;gap:8px}.preloader-row{background:#f5f5f5 no-repeat;animation:pulse 1.5s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TreeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LoadingViewComponent, decorators: [{
             type: Component,
-            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" }]
+            args: [{ selector: 'app-loading-view', template: "<div class=\"preloader\">\n  @if (headerHeight()) {\n    <div class=\"preloader-row\" [style.height.px]=\"headerHeight()\"></div>\n  }\n\n  @for (row of rows(); track row) {\n    <div class=\"preloader-row\" [style.height.px]=\"rowHeight()\"></div>\n  }\n</div>\n", styles: [".preloader{display:flex;flex-direction:column;width:100%;gap:8px}.preloader-row{background:#f5f5f5 no-repeat;animation:pulse 1.5s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}\n"] }]
         }] });
 
-class BlockViewComponent {
-    data = input.required();
-    columns = input.required();
-    event = output();
-    onCellClicked(data) {
-        this.event.emit({ type: 'cell_clicked', data });
-        this.event.emit({ type: 'close' });
+class TableViewActions {
+    actions = input();
+    actionClicked = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewActions, isStandalone: true, selector: "table-view-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { properties: { "class.le-table-view-actions": "true" } }, ngImport: i0, template: `
+    @for (action of actions(); track action) {
+      <button
+        class="le-button le-button-flat le-button--success"
+        (click)="actionClicked.emit(action)"
+      >
+        {{ action.label }}
+      </button>
     }
-    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"] }] });
+  `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BlockViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewActions, decorators: [{
             type: Component,
-            args: [{ selector: 'le-block-view', imports: [TableViewCellDirective], template: "<div class=\"block-view\">\n  @for (column of columns(); track column) {\n    <div class=\"block-view-item\">\n      <div class=\"block-view-label\">\n        {{column.label}}\n      </div>\n\n      <div class=\"block-view-value\">\n        @if (data(); as row) {\n          <ng-template\n            tableViewCell\n            [data]=\"row[column.key]\"\n            [type]=\"column.column_format?.cellTemplate\"\n            [column]=\"column\"\n            [metadata]=\"row._metadata\"\n            (clicked)=\"onCellClicked($event)\"\n          ></ng-template>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
-        }] });
-
-class SidePanelComponent {
-    dataService = inject(LEDataService);
-    _selectedTab = signal(0);
-    data = input.required();
-    config = input();
-    event = output();
-    node = this.dataService.view;
-    tabs = computed(() => {
-        const data = this.data();
-        return data.tabs.length ? data.tabs : undefined;
-    });
-    selectedTabIndex = this._selectedTab.asReadonly();
-    selectedTab = computed(() => {
-        return this.tabs()?.[this.selectedTabIndex()];
-    });
-    constructor() {
-        effect(() => {
-            const data = this.data();
-            untracked(() => {
-                if (data.node) {
-                    this.dataService.setView(data.node, true);
-                }
-            });
-        });
+            args: [{
+                    selector: 'table-view-actions',
+                    template: `
+    @for (action of actions(); track action) {
+      <button
+        class="le-button le-button-flat le-button--success"
+        (click)="actionClicked.emit(action)"
+      >
+        {{ action.label }}
+      </button>
     }
-    onEvent(event) {
-        this.event.emit(event);
+  `,
+                    host: {
+                        '[class.le-table-view-actions]': 'true',
+                    },
+                }]
+        }] });
+
+class TableDataSource extends DataSource {
+    data;
+    get count() {
+        return this.data.value.length;
     }
-    onTabClick(index) {
-        this._selectedTab.set(index);
+    constructor(data = []) {
+        super();
+        this.data = new BehaviorSubject(data);
     }
-    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"] }] });
+    getValueByIndex(index) {
+        return this.data.value[index];
+    }
+    connect() {
+        return this.data;
+    }
+    disconnect() { }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidePanelComponent, decorators: [{
-            type: Component,
-            args: [{ host: {
-                        '[style.width]': '"100%"',
-                        '[style.overflow]': '"auto"',
-                        '[style.padding]': '"0 16px"',
-                    }, imports: [forwardRef(() => NodeComponent), TreeViewComponent, BlockViewComponent], providers: [LEDataService, LEFiltersService], template: "@if (node(); as node) {\n  <le-node [node]=\"node\" [config]=\"data()?.config\" (event)=\"onEvent($event)\"></le-node>\n}\n\n@if (tabs(); as tabs) {\n  <div class=\"le-tabs-nav\">\n    @for (tab of tabs; track tab.type; let idx = $index) {\n      <button\n        class=\"le-button le-button-flat le-button--success\"\n        [attr.aria-label]=\"'Select ' + tab.type\"\n        [class.le-button--success]=\"selectedTabIndex() === idx\"\n        (click)=\"onTabClick(idx)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n    <span class=\"spacer\"></span>\n\n    <button\n      aria-label=\"Close side panel\"\n      class=\"le-button le-button-flat\"\n      (click)=\"event.emit({ type: 'close' })\"\n    >Close</button>\n  </div>\n}\n\n@if (selectedTab(); as selectedTab) {\n  <div class=\"le-tabs-content\">\n    @switch (selectedTab.type) {\n      @case ('tree') {\n        <le-tree-view [data]=\"selectedTab.data\"></le-tree-view>\n      }\n      @case ('table') {\n        <le-node\n          [node]=\"selectedTab.data\"\n          [config]=\"data()?.config\"\n          (event)=\"onEvent($event)\"\n        ></le-node>\n      }\n      @case ('block') {\n        <le-block-view\n          [data]=\"selectedTab.data\"\n          [columns]=\"selectedTab.columns\"\n          (event)=\"onEvent($event)\"\n        ></le-block-view>\n      }\n    }\n  </div>\n}\n" }]
-        }], ctorParameters: () => [] });
 
-const positionMap = {
-    right: (position) => position.right().top('0'),
-    left: (position) => position.left().top('0'),
-    top: (position) => position.top('0'),
-    bottom: (position) => position.bottom('0'),
+const isPlaceholder$1 = (value) => {
+    return value.startsWith('{') && value.endsWith('}');
 };
-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((event) => {
-            this.output.next(event);
-            if (event.type === 'close') {
-                this.overlayRef?.addPanelClass(this.getClosedClass(config));
-                this.delayed(() => this.hide());
-            }
-        });
-        componentRef.onDestroy(() => {
-            sub.unsubscribe();
-            destroy$.next();
-            destroy$.complete();
-        });
-        return this.output.pipe(takeUntil(destroy$));
+const mapSortStringToSort = (sort) => {
+    return sort.startsWith('-') ? [sort.slice(1), 'desc'] : [sort, 'desc'];
+};
+const mapSortStringListToSortMap = (sortList) => {
+    return sortList.reduce((acc, sort) => {
+        const { 0: key, 1: value } = mapSortStringToSort(sort);
+        acc.set(key, value);
+        return acc;
+    }, new Map());
+};
+const mapSortMapToSortStringList = (sortMap) => {
+    return [...sortMap].reduce((acc, sort) => {
+        const prefix = sort[1] === 'asc' ? '' : '-';
+        acc.push(`${prefix}${sort[0]}`);
+        return acc;
+    }, []);
+};
+const mapFiltersToFilterString = (filters) => {
+    return Object.entries(filters)
+        .reduce((acc, filter) => {
+        return acc.concat(`filter[${filter[0]}]=${filter[1]}`);
+    }, [])
+        .join('&');
+};
+const buildRequestContext = (params, ctx) => {
+    const requestContext = {};
+    if (ctx.hasPagination && params.pageIndex !== undefined) {
+        requestContext['pageIndex'] = params.pageIndex;
+        requestContext['pageSize'] = params.pageSize;
     }
-    hide() {
-        this.overlayRef?.dispose();
-        this.overlayRef = undefined;
+    if (ctx.isSortable && params.sort) {
+        requestContext['sort'] = params.sort;
     }
-    delayed(fn) {
-        setTimeout(() => fn(), 300);
+    if (params.filters && Object.keys(params.filters).length > 0) {
+        requestContext['filters'] = params.filters;
     }
-    getHeight(config) {
-        if (config.height) {
-            return config.height;
-        }
-        if (config.position === 'top' || config.position === 'bottom') {
-            if (this.breakpointObserver.isMatched(Breakpoints.XSmall)) {
-                return '80vh';
-            }
-            else if (this.breakpointObserver.isMatched(Breakpoints.Small)) {
-                return '60vh';
-            }
-            else {
-                return '40vh';
-            }
-        }
-        return '100vh';
+    return requestContext;
+};
+const buildRequestBody = (params) => {
+    const body = {};
+    if (params.sort?.length) {
+        body['ordering'] = params.sort;
     }
-    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';
-        }
+    if (params.filters && Object.keys(params.filters).length > 0) {
+        body['filters'] = params.filters;
     }
-    getClosedClass(config) {
-        return `le-side-panel--${config.position}`;
+    if (params.pageIndex !== undefined) {
+        body['page'] = params.pageIndex + 1;
     }
-    getPositionStrategy({ position }) {
-        let positionStrategy = this.overlay.position().global();
-        if (positionMap[position]) {
-            return positionMap[position](positionStrategy);
-        }
-        return positionStrategy;
+    if (params.pageSize) {
+        body['page_size'] = params.pageSize;
     }
-    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',
-                }]
-        }] });
+    return body;
+};
+const buildQueryString = (params) => {
+    const query = [];
+    if (params.pageIndex !== undefined) {
+        query.push(`page=${params.pageIndex + 1}`);
+    }
+    if (params.pageSize) {
+        query.push(`page_size=${params.pageSize}`);
+    }
+    if (params.sort?.length) {
+        query.push(`ordering=${params.sort.join(',')}`);
+    }
+    if (params.filters && Object.keys(params.filters).length > 0) {
+        query.push(mapFiltersToFilterString(params.filters));
+    }
+    return query.filter((item) => !!item).join('&');
+};
 
 class TableViewComponent {
     apiService = inject(LEApiService);
@@ -1243,7 +1243,7 @@ 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()?.hideInfo) {
+        if (firstRow && !this.config()?.hideInfo) {
             result.push('info');
         }
         result.push(...columnKeys);
@@ -1757,10 +1757,20 @@ const mapFormValuesToJSON = (values) => {
     return JSON.stringify(values, null, 2);
 };
 const mapJSONToFormValues = (json) => {
+    // Check if it's a string and try to parse it
     if (typeof json === 'string') {
-        return JSON.parse(json);
+        try {
+            return JSON.parse(json);
+        }
+        catch {
+            throw new Error('The json string is not valid JSON');
+        }
+    }
+    // Check if it's a plain object (not null, not array, not other types)
+    if (json !== null && typeof json === 'object' && !Array.isArray(json)) {
+        return json;
     }
-    throw new Error('The `json` parameter is not a valid JSON');
+    throw new Error('The json parameter is not a valid JSON object');
 };
 const getTabJSONControl = (control, engine) => {
     let result;
@@ -1774,19 +1784,69 @@ const getTabJSONControl = (control, engine) => {
     });
     return result;
 };
+const mapValueToString = (value) => {
+    if (typeof value === 'object' && value !== null) {
+        if (Array.isArray(value)) {
+            return value.map((chunk) => mapValueToString(chunk)).join('\n');
+        }
+        else {
+            return mapValueToString(Object.entries(value));
+        }
+    }
+    return `${value}`;
+};
+
+class ToastListItemComponent {
+    _engine = signal(null);
+    _sections = signal([]);
+    controls = input.required();
+    actions = output();
+    engine = this._engine.asReadonly();
+    sections = this._sections.asReadonly();
+    constructor() {
+        effect((onCleanup) => {
+            const controls = this.controls();
+            const form = adaptForm(controls);
+            const engine = createEngine(form);
+            let cleanup = () => { };
+            untracked(() => {
+                this._engine.set(engine);
+                this._sections.set(form.sections ?? []);
+                cleanup = engine.on('action', ({ action }) => {
+                    const actionObj = action;
+                    this.actions.emit(actionObj.actions);
+                });
+            });
+            onCleanup(() => {
+                cleanup();
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToastListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ToastListItemComponent, isStandalone: true, selector: "le-toast-list-item", inputs: { controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actions: "actions" }, ngImport: i0, template: "@if (engine(); as engine) {\n  @for (section of sections(); track section) {\n    @for (control of section.controls; track control) {\n      <fe-field [engine]=\"engine\" [control]=\"control\"></fe-field>\n    }\n  }\n}\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: ToastListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-toast-list-item', imports: [FeFieldHost], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (engine(); as engine) {\n  @for (section of sections(); track section) {\n    @for (control of section.controls; track control) {\n      <fe-field [engine]=\"engine\" [control]=\"control\"></fe-field>\n    }\n  }\n}\n" }]
+        }], ctorParameters: () => [] });
 
 class ToastListComponent {
     toastService = inject(LeToastService);
     toasts = this.toastService.toasts;
-    onButtonClick(actions) {
-        actions.forEach((action) => this.toastService.processAction(action));
+    onActions(actions) {
+        actions.forEach((action) => {
+            this.toastService.action$.next(action);
+            if (action.type === 'close_popup') {
+                this.toastService.remove(action.target_id);
+            }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToastListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ToastListComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <div class=\"le-toast-text-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'text') {\n              <p class=\"le-toast-text\">\n                {{ control.value }}\n              </p>\n            }\n          }\n        </div>\n\n        <div class=\"le-toast-button-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'button') {\n              <button\n                class=\"le-button le-button-stroked\"\n                [class.le-button--success]=\"toast.type === 'success'\"\n                [class.le-button--info]=\"toast.type === 'info'\"\n                [class.le-button--warning]=\"toast.type === 'warning'\"\n                [class.le-button--error]=\"toast.type === 'error'\"\n                (click)=\"onButtonClick(control.actions)\"\n              >\n                {{ control.label }}\n              </button>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ToastListComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <le-toast-list-item\n          [controls]=\"toast.controls\"\n          (actions)=\"onActions($event)\"\n        ></le-toast-list-item>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: ToastListItemComponent, selector: "le-toast-list-item", inputs: ["controls"], outputs: ["actions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToastListComponent, decorators: [{
             type: Component,
-            args: [{ template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <div class=\"le-toast-text-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'text') {\n              <p class=\"le-toast-text\">\n                {{ control.value }}\n              </p>\n            }\n          }\n        </div>\n\n        <div class=\"le-toast-button-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'button') {\n              <button\n                class=\"le-button le-button-stroked\"\n                [class.le-button--success]=\"toast.type === 'success'\"\n                [class.le-button--info]=\"toast.type === 'info'\"\n                [class.le-button--warning]=\"toast.type === 'warning'\"\n                [class.le-button--error]=\"toast.type === 'error'\"\n                (click)=\"onButtonClick(control.actions)\"\n              >\n                {{ control.label }}\n              </button>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n" }]
+            args: [{ imports: [ToastListItemComponent], template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <le-toast-list-item\n          [controls]=\"toast.controls\"\n          (actions)=\"onActions($event)\"\n        ></le-toast-list-item>\n      </div>\n    }\n  </div>\n}\n" }]
         }] });
 
 let ID = 100_000_000;
@@ -1795,6 +1855,7 @@ class LeToastService {
     overlay = inject(Overlay);
     _toasts = signal([]);
     toasts = this._toasts.asReadonly();
+    action$ = new Subject();
     constructor() {
         effect(() => {
             const toasts = this._toasts();
@@ -1824,11 +1885,6 @@ class LeToastService {
     remove(id) {
         this._toasts.update((toasts) => toasts.filter((toast) => toast.id !== id));
     }
-    processAction(action) {
-        if (action.type === 'close_popup') {
-            this.remove(action.target);
-        }
-    }
     show() {
         if (this.overlayRef)
             return;
@@ -1844,19 +1900,26 @@ class LeToastService {
     }
     buildToast(type, messages) {
         const id = `${type}_${ID++}`;
-        const textControls = messages.map((message) => ({
-            type: 'text',
+        return {
+            id,
+            type,
+            controls: [...this.buildTextControls(id, messages), this.buildButtonControl(id)],
+        };
+    }
+    buildTextControls(id, messages) {
+        return messages.map((message, index) => ({
+            type: 'paragraph',
             value: message,
+            name: `${id}_${index}`
         }));
-        const buttonControl = {
+    }
+    buildButtonControl(id) {
+        return {
             type: 'button',
             label: 'Ok',
-            actions: [{ type: 'close_popup', target: id }],
-        };
-        return {
-            id,
-            type,
-            controls: [...textControls, buttonControl],
+            hideLabel: true,
+            name: `${id}_button`,
+            actions: [{ type: 'close_popup', target_id: id }],
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -2108,13 +2171,18 @@ class FormViewComponent {
             this.viewportScroller.scrollToPosition([0, 0]);
             return of(null);
         },
-        show_popup: (action) => {
+        show_popup: (action, response) => {
             this.toastService.notify({
-                ...action.item,
+                controls: this.populatePopupControlsWithResponse(action.controls, response),
+                id: action.id,
                 type: 'success',
             });
             return of(null);
         },
+        close_popup: (action) => {
+            this.toastService.remove(action.target_id);
+            return of(null);
+        },
         open_url: (action) => {
             window.open(action.url, '_blank');
             return of(null);
@@ -2131,15 +2199,20 @@ class FormViewComponent {
             const engine = this._engine();
             try {
                 if (isTabJSON(action.source)) {
-                    const values = mapJSONToFormValues(getTabJSONControl(action.source, engine).value);
-                    Object.entries(values).forEach(({ 0: key, 1: value }) => {
-                        engine.values.set(key, value);
-                    });
+                    const jsonTabControl = getTabJSONControl(action.source, engine);
+                    if (jsonTabControl) {
+                        const values = mapJSONToFormValues(jsonTabControl.value);
+                        Object.entries(values).forEach(({ 0: key, 1: value }) => {
+                            engine.values.set(key, value);
+                        });
+                    }
                 }
                 else {
-                    const target = getTabJSONControl(action.target, engine);
-                    const value = mapFormValuesToJSON(getTabFormValues(action.source, target, engine));
-                    engine.values.set(target.id, value);
+                    const jsonTabControl = getTabJSONControl(action.target, engine);
+                    if (jsonTabControl) {
+                        const value = mapFormValuesToJSON(getTabFormValues(action.source, jsonTabControl, engine));
+                        engine.values.set(jsonTabControl.id, value);
+                    }
                 }
             }
             catch (e) {
@@ -2184,6 +2257,9 @@ class FormViewComponent {
                 this.init(form);
             });
         });
+        this.toastService.action$
+            .pipe(switchMap((action) => this.processAction(action)), takeUntilDestroyed())
+            .subscribe();
     }
     init(form) {
         this._sections.set(this.sortSections(form.sections));
@@ -2279,6 +2355,19 @@ class FormViewComponent {
         }))
             .subscribe();
     }
+    populatePopupControlsWithResponse(controls, response) {
+        return controls.map((control) => {
+            if (isPlaceholder(control.value)) {
+                const path = getPlaceholderValue(control.value);
+                const value = mapValueToString(getValueByPath({ response }, path));
+                return {
+                    ...control,
+                    value,
+                };
+            }
+            return control;
+        });
+    }
     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 } }, 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 });
 }