@planeasyinc/le-angular 0.0.19 → 0.0.21

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, ChangeDetectorRef, viewChild } from '@angular/core';
+import { InjectionToken, inject, signal, Injectable, computed, effect, untracked, Directive, input, ChangeDetectionStrategy, Component, output, forwardRef, ViewContainerRef, Injector, Renderer2, ElementRef, DestroyRef, viewChild } from '@angular/core';
 import { HttpContextToken, HttpClient, HttpContext, HttpRequest, HttpEventType } from '@angular/common/http';
-import { map, filter, distinctUntilChanged, BehaviorSubject, Subject, takeUntil, firstValueFrom, of, tap, catchError, from, concatMap, finalize, fromEvent, startWith } from 'rxjs';
+import { map, filter, distinctUntilChanged, Subject, takeUntil, BehaviorSubject, firstValueFrom, of, tap, catchError, 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,245 +599,50 @@ 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];
-    }
-    connect() {
-        return this.data;
-    }
-    disconnect() { }
-}
-
-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 pageSize = this.pageSize();
-            untracked(() => {
-                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);
-                }
-                else {
-                    this.pageChange.emit({
-                        pageSize: pageSize,
-                        pageIndex: pageIndex,
-                    });
-                }
-            });
-        });
-        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 });
-}
-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: () => [] });
-
-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;
+const flattenNodes = (nodes) => {
+    const flattenedNodes = [];
+    for (const node of nodes) {
+        flattenedNodes.push(node);
+        if (node.leafs) {
+            flattenedNodes.push(...flattenNodes(node.leafs));
+        }
     }
-    return requestContext;
+    return flattenedNodes;
 };
-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;
+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 body;
+    return { label, value: obj };
 };
-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('&');
+const mapObjectToTree = (data) => {
+    return Object.entries(data).map((item) => toTree(item[1], item[0]));
 };
 
-class LoadingViewComponent {
-    headerHeight = input(0);
-    rowHeight = input(40);
-    rowCount = input(1);
-    rows = computed(() => {
-        return new Array(this.rowCount()).fill(null).map((_, i) => i);
+class TreeViewComponent {
+    treeControl = new NestedTreeControl((node) => node.leafs);
+    data = input();
+    source = computed(() => {
+        return new ArrayDataSource(mapObjectToTree(this.data() ?? {}));
     });
-    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: LoadingViewComponent, 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"] }]
-        }] });
-
-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>
-    }
-  `, isInline: true });
+    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: TableViewActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TreeViewComponent, 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>
-    }
-  `,
-                    host: {
-                        '[class.le-table-view-actions]': 'true',
-                    },
-                }]
+            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 StringTemplate {
@@ -995,57 +800,11 @@ class TableViewCellDirective {
     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 flattenedNodes;
-};
-const toTree = (obj, label) => {
-    if (obj !== null && typeof obj === 'object') {
-        const entries = Array.isArray(obj)
-            ? obj.map((v, i) => toTree(v, String(i)))
-            : Object.entries(obj).map((item) => toTree(item[1], item[0]));
-        return { label, leafs: entries };
-    }
-    return { label, value: obj };
-};
-const mapObjectToTree = (data) => {
-    return Object.entries(data).map((item) => toTree(item[1], item[0]));
-};
-
-class TreeViewComponent {
-    treeControl = new NestedTreeControl((node) => node.leafs);
-    data = input();
-    source = computed(() => {
-        return new ArrayDataSource(mapObjectToTree(this.data() ?? {}));
-    });
-    hasChild = (_, node) => !!node.leafs && node.leafs.length > 0;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: TreeViewComponent, isStandalone: true, selector: "le-tree-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<cdk-tree [dataSource]=\"source()\" [treeControl]=\"treeControl\">\n  <!-- Tree node template for leaf nodes -->\n  <cdk-nested-tree-node *cdkTreeNodeDef=\"let node\" class=\"le-tree-node\">\n    <div class=\"le-tree-row\">\n      <b>{{node.label | uppercase}}</b>: &nbsp;&nbsp;&nbsp; {{node.value}}\n    </div>\n  </cdk-nested-tree-node>\n\n  <!-- Tree node template for expandable nodes -->\n  <cdk-nested-tree-node *cdkTreeNodeDef=\"let node; when: hasChild\" class=\"le-tree-node\">\n\n    <a class=\"le-tree-row\" [class.le-tree-row--expanded]=\"treeControl.isExpanded(node)\" [attr.aria-label]=\"'Toggle ' + node.label\" cdkTreeNodeToggle>\n      <b>{{node.label | uppercase}}</b>:\n\n      <le-icon class=\"le-tree-chevron\" name=\"chevron\"></le-icon>\n    </a>\n\n    <div [class.le-tree-invisible]=\"!treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n", dependencies: [{ kind: "component", type: CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }, { kind: "directive", type: CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: 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" }]
-        }] });
+            type: Directive,
+            args: [{
+                    selector: '[tableViewCell]',
+                }]
+        }], ctorParameters: () => [] });
 
 class BlockViewComponent {
     data = input.required();
@@ -1216,6 +975,247 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
+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 pageSize = this.pageSize();
+            untracked(() => {
+                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);
+                }
+                else {
+                    this.pageChange.emit({
+                        pageSize: pageSize,
+                        pageIndex: pageIndex,
+                    });
+                }
+            });
+        });
+        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 });
+}
+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 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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LoadingViewComponent, 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"] }]
+        }] });
+
+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>
+    }
+  `, 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>
+    }
+  `,
+                    host: {
+                        '[class.le-table-view-actions]': 'true',
+                    },
+                }]
+        }] });
+
+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];
+    }
+    connect() {
+        return this.data;
+    }
+    disconnect() { }
+}
+
+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));
+    }
+    return query.filter((item) => !!item).join('&');
+};
+
 class TableViewComponent {
     apiService = inject(LEApiService);
     dataService = inject(LEDataService);
@@ -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);
@@ -1727,12 +1727,13 @@ const isTabJSON = (control) => {
 };
 /**
  *
- * @param source Control Config
- * @param target Control Config
+ * @param source Control Config with nested controls
+ * @param target Control Config with json value
  * @param engine Form Engine
  *
- * @description traverse source control tree, get latest value from state,
- * if no value found in state, set target control initial value
+ * @description
+ * Traverse source Control Config tree, get latest value from state.
+ * If no value found in state, set target Control Config initial value
  */
 const getTabFormValues = (source, target, engine) => {
     const result = {};
@@ -1741,7 +1742,10 @@ const getTabFormValues = (source, target, engine) => {
         if (!ctrl.id) {
             return;
         }
-        const value = engine.values.get(ctrl.id) ?? targetValueObject[ctrl.id];
+        let value = engine.values.get(ctrl.id);
+        if (value === undefined) {
+            value = targetValueObject[ctrl.id];
+        }
         if (value === undefined) {
             return;
         }
@@ -1753,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');
+        }
     }
-    throw new Error('The `json` parameter is not a 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 object');
 };
 const getTabJSONControl = (control, engine) => {
     let result;
@@ -2031,7 +2045,6 @@ class FormViewComponent {
     attachmentService = inject(FormViewAttachmentService);
     viewportScroller = inject(ViewportScroller);
     toastService = inject(LeToastService);
-    cdr = inject(ChangeDetectorRef);
     _isLoading = signal(false);
     _form = signal(null);
     _sections = signal([]);
@@ -2128,15 +2141,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) {