@planeasyinc/le-angular 0.0.14 → 0.0.16

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

@@ -0,0 +1,2531 @@
+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 { decodeJwt, UrlFragmentBuilder, normalizeConfig } from '@planeasyinc/le-core';
+import { Location, JsonPipe, UpperCasePipe, DatePipe, ViewportScroller } from '@angular/common';
+import { CdkDrag } from '@angular/cdk/drag-drop';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { ComponentPortal, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
+import { DataSource, CdkTable, CdkColumnDef, CdkHeaderCell, CdkHeaderCellDef, CdkCell, CdkCellDef, CdkHeaderRowDef, CdkHeaderRow, CdkRow, CdkRowDef } from '@angular/cdk/table';
+import { DialogModule } from '@angular/cdk/dialog';
+import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { A11yModule } from '@angular/cdk/a11y';
+import { Overlay } from '@angular/cdk/overlay';
+import { NestedTreeControl, CdkTree, CdkNestedTreeNode, CdkTreeNodeDef, CdkTreeNodeOutlet, CdkTreeNodeToggle } from '@angular/cdk/tree';
+import { ArrayDataSource, SelectionModel } from '@angular/cdk/collections';
+import { adaptOld } from '@planeasyinc/fe-adapters-old';
+import { adaptSections } from '@planeasyinc/fe-adapters-sections';
+import { createEngine } from '@planeasyinc/fe-core';
+import { FeFieldHost } from '@planeasyinc/fe-angular';
+import * as i1 from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+const IS_LIBRARY_REQUEST = new HttpContextToken(() => false);
+
+const defaultConfig = {
+    apiUrl: '',
+    withRouting: false,
+    rootPath: '/',
+    messages: {
+        tokenEmpty: 'No token provided',
+        tokenExpired: 'Your session has expired for security reasons. Please log in again to continue where you left off.',
+    },
+};
+
+const CONFIG_TOKEN = new InjectionToken('CONFIG', {
+    factory: () => defaultConfig,
+});
+
+const SECOND_IN_MS = 1000;
+class LEAuthService {
+    config = inject(CONFIG_TOKEN);
+    _token = signal(null);
+    _apiUrl = signal(this.config.apiUrl);
+    _isGuest = signal(false);
+    token = this._token.asReadonly();
+    apiUrl = this._apiUrl.asReadonly();
+    isGuest = this._isGuest.asReadonly();
+    setApiUrl(apiUrl) {
+        this._apiUrl.set(apiUrl);
+    }
+    setToken(token) {
+        this._token.set(token);
+    }
+    setGuestLogin(isGuest = true) {
+        this._isGuest.set(true);
+    }
+    validateToken() {
+        const token = this._token();
+        if (!token) {
+            throw new Error(this.config.messages.tokenEmpty);
+        }
+        const decoded = decodeJwt(token);
+        if (decoded.exp * SECOND_IN_MS < Date.now()) {
+            throw new Error(this.config.messages.tokenExpired);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEAuthService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEAuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class LEApiService {
+    http = inject(HttpClient);
+    authService = inject(LEAuthService);
+    apiUrl = computed(() => {
+        return this.normalizeApiUrl(this.authService.apiUrl());
+    });
+    getConfig() {
+        const url = new UrlFragmentBuilder(this.apiUrl())
+            .setFragment('api/contrib/frontend-config/dashboard/config')
+            .build();
+        return this.http.get(url, { context: new HttpContext().set(IS_LIBRARY_REQUEST, true) });
+    }
+    getObject(className, query = '') {
+        const url = new UrlFragmentBuilder(this.apiUrl())
+            .setFragment('api/objects/')
+            .setQuery(`class_name=${className}`)
+            .setQuery('include_metadata=true&include_subclasses=true&load_references=false&file_optimized=true')
+            .setQuery(query)
+            .build();
+        return this.http.get(url, {
+            context: new HttpContext().set(IS_LIBRARY_REQUEST, true),
+        });
+    }
+    getObjectByAddress(address, params) {
+        const url = new UrlFragmentBuilder(this.apiUrl())
+            .setFragment(`api/objects/${address}/`)
+            .setQuery(`all_versions=${params.includeVersions ?? false}&include_metadata=${params.includeMeta ?? false}&load_references=${params.loadReferences ?? false}&file_optimized=${params.fileOptimized ?? true}`)
+            .build();
+        return this.http.get(url, {
+            context: new HttpContext().set(IS_LIBRARY_REQUEST, true),
+        });
+    }
+    executeTransaction(name, body, query = '') {
+        const url = new UrlFragmentBuilder(this.apiUrl())
+            .setFragment(`api/transactions/${name}/`)
+            .setQuery(query)
+            .build();
+        return this.http.post(url, body ?? {}, {
+            context: new HttpContext().set(IS_LIBRARY_REQUEST, true),
+        });
+    }
+    request(method, path, body) {
+        const url = new UrlFragmentBuilder(this.apiUrl()).setFragment(path).build();
+        const request = new HttpRequest(method, url, body, {
+            responseType: 'json',
+            context: new HttpContext().set(IS_LIBRARY_REQUEST, true),
+        });
+        return this.http.request(request);
+    }
+    getBlob(path) {
+        return this.http
+            .get(path, { responseType: 'blob', context: new HttpContext().set(IS_LIBRARY_REQUEST, true) })
+            .pipe(map((blob) => URL.createObjectURL(blob)));
+    }
+    normalizeApiUrl(url) {
+        if (url.endsWith('/')) {
+            return url.slice(0, -1);
+        }
+        return url;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEApiService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEApiService, decorators: [{
+            type: Injectable
+        }] });
+
+class LeNavigationService {
+    location = inject(Location);
+    config = inject(CONFIG_TOKEN);
+    _node = signal(null);
+    node = this._node.asReadonly();
+    constructor() {
+        effect((onCleanup) => {
+            if (!this.config.withRouting)
+                return;
+            const unregister = this.location.onUrlChange((url, state) => {
+                this._node.set(state.node ?? null);
+            });
+            onCleanup(() => {
+                unregister();
+            });
+        });
+    }
+    navigate(node) {
+        if (!this.config.withRouting)
+            return;
+        const path = this.mapNodeToLocationPath(node);
+        this.location.go(`/v2/${path}`, undefined, { node });
+    }
+    mapNodeToLocationPath(node) {
+        let pathChunks = [];
+        let query = '';
+        if (node.type === 'table') {
+            pathChunks.push(node?.title || node?.dataSource?.entity);
+            if (node?.dataSource?.params) {
+                query = Object.entries(node.dataSource.params).map(entry => entry.join('=')).join('&');
+            }
+        }
+        if (node.type === 'form') {
+            pathChunks.push('details', node.controlSource?.kind, node.controlSource?.entity, node.controlSource?.params?.className, node.controlSource?.params?.address, node.controlSource?.params?.mode);
+        }
+        const path = pathChunks.filter(v => !!v).join('/');
+        return query ? `${path}?${query}` : path;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeNavigationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class LEDataService {
+    apiService = inject(LEApiService);
+    leNavigationService = inject(LeNavigationService);
+    _config = signal(null);
+    _view = signal(null);
+    _parentPath = signal([]);
+    _customCss = signal(null);
+    view = this._view.asReadonly();
+    parentPath = this._parentPath.asReadonly();
+    config = this._config.asReadonly();
+    customCss = this._customCss.asReadonly();
+    registerEffects() {
+        effect(() => {
+            const node = this.leNavigationService.node();
+            if (!node)
+                return;
+            untracked(() => {
+                const view = this.view();
+                if (node.id === view?.id)
+                    return;
+                this._view.set(node);
+            });
+        });
+    }
+    setView(node, skipLocationChange) {
+        this._view.set(node);
+        if (!skipLocationChange) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+            this.leNavigationService.navigate(node);
+        }
+    }
+    requestConfig(force) {
+        if (this._config() && !force) {
+            return;
+        }
+        this.apiService.getConfig().subscribe({
+            next: (config) => {
+                const normalizedConfig = normalizeConfig({ type: 'section', ...config });
+                this._config.set(normalizedConfig);
+                this._customCss.set(config.custom_css);
+                const initialView = this.getInitialView(normalizedConfig);
+                this.setView(initialView.node);
+                this._parentPath.set(initialView.path);
+            },
+            error: (err) => {
+                console.error(err);
+            },
+        });
+    }
+    request(method, url, body) {
+        return this.apiService
+            .request(method, url, body)
+            .pipe(filter((event) => HttpEventType.Response === event.type));
+    }
+    getObjectByClassName(className) {
+        return this.apiService.getObject(className);
+    }
+    navigateByNodeId(id) {
+        const node = this.getNodeById(id);
+        if (node) {
+            this._view.set(node);
+        }
+    }
+    getNodeById(id, node = this._config()) {
+        if (!node)
+            return null;
+        if (node.id === id) {
+            return node;
+        }
+        if ('children' in node && node.children.length) {
+            for (const child of node.children) {
+                const target = this.getNodeById(id, child);
+                if (target) {
+                    return target;
+                }
+            }
+        }
+        return null;
+    }
+    getInitialView(node, path = []) {
+        if ('children' in node) {
+            const child = node.children[0];
+            const _path = [...path, node];
+            if ('isParentMenu' in child && child.isParentMenu) {
+                return this.getInitialView(child, _path);
+            }
+            else {
+                return {
+                    node: child,
+                    path: _path,
+                };
+            }
+        }
+        throw new Error(`${node.type} is not a section`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEDataService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEDataService, decorators: [{
+            type: Injectable
+        }] });
+
+class LEFiltersService {
+    _shown = signal(false);
+    _options = signal([], {
+        equal: (a, b) => this.isEqual(a, b),
+    });
+    _selection = signal({}, {
+        equal: (a, b) => this.isEqual(a, b),
+    });
+    shown = this._shown.asReadonly();
+    options = this._options.asReadonly();
+    selection = this._selection.asReadonly();
+    open() {
+        this._shown.set(true);
+    }
+    close() {
+        this._shown.set(false);
+    }
+    updateSelection(value) {
+        this._selection.set(this.filterValues(value));
+    }
+    setOptions(options) {
+        this._options.set(options);
+    }
+    filterValues(value) {
+        const clone = Object.assign({}, value);
+        for (const key in clone) {
+            if (!clone[key]) {
+                delete clone[key];
+            }
+        }
+        return clone;
+    }
+    isEqual(a, b) {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEFiltersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEFiltersService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEFiltersService, decorators: [{
+            type: Injectable
+        }] });
+
+class DrawerContentDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: DrawerContentDirective, isStandalone: true, selector: "[leDrawerContent]", host: { properties: { "class.le-drawer-content": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DrawerContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[leDrawerContent]',
+                    host: {
+                        '[class.le-drawer-content]': 'true',
+                    }
+                }]
+        }] });
+
+class DrawerContainerDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DrawerContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: DrawerContainerDirective, isStandalone: true, selector: "[leDrawerContainer]", host: { properties: { "class.le-drawer-container": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DrawerContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[leDrawerContainer]',
+                    host: {
+                        '[class.le-drawer-container]': 'true'
+                    }
+                }]
+        }] });
+
+const DRAWER_OPENED_WIDTH = 300;
+const DRAWER_CLOSED_WIDTH = 60;
+class LeDrawerDirective {
+    opened = input(false);
+    width = input(DRAWER_OPENED_WIDTH);
+    hideOnClose = input(false);
+    type = input('side');
+    _width = computed(() => {
+        if (this.opened()) {
+            return this.width();
+        }
+        if (this.hideOnClose()) {
+            return 0;
+        }
+        return DRAWER_CLOSED_WIDTH;
+    });
+    _position = computed(() => {
+        return this.type() === 'over' ? 'absolute' : 'relative';
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeDrawerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: LeDrawerDirective, isStandalone: true, selector: "[leDrawer]", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hideOnClose: { classPropertyName: "hideOnClose", publicName: "hideOnClose", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.le-drawer": "true", "class.le-drawer--open": "opened()", "style.width.px": "_width()", "style.position": "_position()", "style.min-height": "\"100%\"", "style.left": "0", "style.top": "0" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeDrawerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[leDrawer]',
+                    host: {
+                        '[class.le-drawer]': 'true',
+                        '[class.le-drawer--open]': 'opened()',
+                        '[style.width.px]': '_width()',
+                        '[style.position]': '_position()',
+                        '[style.min-height]': '"100%"',
+                        '[style.left]': '0',
+                        '[style.top]': '0',
+                    },
+                }]
+        }] });
+
+const close = {
+    name: 'close',
+    viewBox: '0 -960 960 960',
+    content: [
+        'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',
+    ],
+};
+
+const arrowDown = {
+    name: 'arrow-down',
+    viewBox: '0 -960 960 960',
+    content: [
+        'M480-360 280-560h400L480-360Z'
+    ]
+};
+
+const sort = {
+    name: 'sort',
+    viewBox: '0 -960 960 960',
+    content: [
+        'M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z'
+    ]
+};
+
+const chevron = {
+    name: 'chevron',
+    viewBox: '0 -960 960 960',
+    content: [
+        'M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'
+    ]
+};
+
+const info = {
+    name: 'info',
+    viewBox: '0 -960 960 960',
+    content: [
+        'M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z',
+    ],
+};
+
+const ICONS_MAP = {
+    chevron: chevron,
+    'arrow-down': arrowDown,
+    sort: sort,
+    close: close,
+    info: info
+};
+
+class LeIconComponent {
+    name = input.required();
+    size = input(24);
+    icon = computed(() => {
+        return {
+            ...ICONS_MAP[this.name()],
+            size: coerceNumberProperty(this.size()),
+        };
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LeIconComponent, isStandalone: true, selector: "le-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.px": "size()", "style.height.px": "size()", "style.display": "\"flex\"" } }, ngImport: i0, template: `
+    @if (icon(); as icon) {
+      <svg
+        [attr.viewBox]="icon.viewBox"
+        [style.width.px]="icon.size"
+        [style.height.px]="icon.size"
+        fill="currentColor"
+      >
+        @for (path of icon.content; track path) {
+          <path [attr.d]="path"></path>
+        }
+      </svg>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'le-icon',
+                    template: `
+    @if (icon(); as icon) {
+      <svg
+        [attr.viewBox]="icon.viewBox"
+        [style.width.px]="icon.size"
+        [style.height.px]="icon.size"
+        fill="currentColor"
+      >
+        @for (path of icon.content; track path) {
+          <path [attr.d]="path"></path>
+        }
+      </svg>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[style.width.px]': 'size()',
+                        '[style.height.px]': 'size()',
+                        '[style.display]': '"flex"',
+                    }
+                }]
+        }] });
+
+class SidebarComponent {
+    breakpointObserver = inject(BreakpointObserver);
+    config = input.required();
+    view = input.required();
+    selectionChange = output();
+    _expanded = signal(new Set());
+    _width = signal(300);
+    _isDrawerOpen = signal(true);
+    _isSmallScreen = signal(false);
+    menu = computed(() => {
+        const config = this.config();
+        return 'children' in config ? config.children : [];
+    });
+    expanded = this._expanded.asReadonly();
+    width = this._width.asReadonly();
+    isDrawerOpen = this._isDrawerOpen.asReadonly();
+    isSmallScreen = this._isSmallScreen.asReadonly();
+    constructor() {
+        this.breakpointObserver
+            .observe([Breakpoints.XSmall])
+            .pipe(map((state) => state.matches), distinctUntilChanged(), takeUntilDestroyed())
+            .subscribe({
+            next: (matches) => {
+                this._isSmallScreen.set(matches);
+                this._isDrawerOpen.set(!matches);
+            },
+        });
+    }
+    isSection(item) {
+        return item.type === 'section' && item.isParentMenu;
+    }
+    toggleExpanded(event, item) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._expanded.update((expanded) => {
+            if (expanded.has(item)) {
+                expanded.delete(item);
+            }
+            else {
+                expanded.add(item);
+            }
+            return new Set(expanded);
+        });
+    }
+    setExpanded(item) {
+        this._expanded.update((expanded) => {
+            expanded.add(item);
+            return new Set(expanded);
+        });
+    }
+    onSidebarItemClick(event, item) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.selectionChange.emit(item);
+    }
+    onDrawerToggleClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._isDrawerOpen.update((val) => !val);
+    }
+    onDragMoved(event) {
+        this._width.set(event.pointerPosition.x);
+        const element = event.source.element.nativeElement;
+        element.style.transform = 'none';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarComponent, isStandalone: true, selector: "le-sidebar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<div leDrawerContainer>\n  <aside leDrawer [opened]=\"isDrawerOpen()\" [width]=\"width()\" [hideOnClose]=\"isSmallScreen()\">\n    <h3 class=\"le-sidebar-title\">\n      <button\n        class=\"le-sidebar-toggle\"\n        (click)=\"onDrawerToggleClick($event)\"\n        (keydown.enter)=\"onDrawerToggleClick($event)\"\n      >\n        @if (isDrawerOpen()) {\n          {{ config().title }}\n        }\n\n        <le-icon name=\"chevron\"></le-icon>\n      </button>\n    </h3>\n\n    @if (isDrawerOpen()) {\n      <menu>\n        @for (item of menu(); track item) {\n          @if (isSection(item)) {\n            <a\n              class=\"le-menu-item\"\n              tabindex=\"0\"\n              [class.le-menu-item--expanded]=\"expanded().has(item)\"\n              (click)=\"toggleExpanded($event, item)\"\n              (keydown.enter)=\"toggleExpanded($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n\n              <le-icon class=\"le-menu-chevron\" name=\"chevron\"></le-icon>\n            </a>\n\n            <div class=\"le-menu-group\" [class.le-menu-group--expanded]=\"expanded().has(item)\">\n              @for (child of item.children; track child) {\n                @if (isSection(child)) {\n                  <a\n                    class=\"le-menu-item\"\n                    [tabindex]=\"expanded().has(item) ? 0 : -1\"\n                    [class.le-menu-item--expanded]=\"expanded().has(child)\"\n                    (click)=\"toggleExpanded($event, child)\"\n                    (keydown.enter)=\"toggleExpanded($event, child)\"\n                  >\n                    <div class=\"le-menu-title\">\n                      {{ child.title }}\n                    </div>\n\n                    <le-icon class=\"le-menu-chevron\" name=\"chevron\"></le-icon>\n                  </a>\n\n                  <div class=\"le-menu-group\" [class.le-menu-group--expanded]=\"expanded().has(child)\">\n                    @for (grandchild of child.children; track grandchild) {\n                      <a\n                        [tabindex]=\"expanded().has(child) ? 0 : -1\"\n                        class=\"le-menu-item\"\n                        [class.le-menu-item--selected]=\"view().id === grandchild.id\"\n                        (click)=\"onSidebarItemClick($event, grandchild)\"\n                        (keydown.enter)=\"onSidebarItemClick($event, grandchild)\"\n                      >\n                        <div class=\"le-menu-title\">\n                          {{ grandchild.title }}\n                        </div>\n                      </a>\n                    }\n                  </div>\n                } @else {\n                  <a\n                    [tabindex]=\"expanded().has(item) ? 0 : -1\"\n                    class=\"le-menu-item\"\n                    [class.le-menu-item--selected]=\"view().id === child.id\"\n                    (click)=\"onSidebarItemClick($event, child)\"\n                    (keydown.enter)=\"onSidebarItemClick($event, child)\"\n                  >\n                    <div class=\"le-menu-title\">\n                      {{ child.title }}\n                    </div>\n                  </a>\n                }\n              }\n            </div>\n          } @else {\n            <a\n              tabindex=\"0\"\n              class=\"le-menu-item\"\n              [class.le-menu-item--selected]=\"view().id === item.id\"\n              (click)=\"onSidebarItemClick($event, item)\"\n              (keydown.enter)=\"onSidebarItemClick($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n            </a>\n          }\n        }\n      </menu>\n\n      <div class=\"le-drawer-resizer\" cdkDrag (cdkDragMoved)=\"onDragMoved($event)\">\n        <span class=\"le-drag-icon\">\u283F</span>\n      </div>\n    }\n  </aside>\n\n  <main leDrawerContent>\n    <ng-content></ng-content>\n  </main>\n</div>\n", dependencies: [{ kind: "directive", type: DrawerContentDirective, selector: "[leDrawerContent]" }, { kind: "directive", type: DrawerContainerDirective, selector: "[leDrawerContainer]" }, { kind: "directive", type: LeDrawerDirective, selector: "[leDrawer]", inputs: ["opened", "width", "hideOnClose", "type"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-sidebar', imports: [DrawerContentDirective, DrawerContainerDirective, LeDrawerDirective, CdkDrag, LeIconComponent], template: "<div leDrawerContainer>\n  <aside leDrawer [opened]=\"isDrawerOpen()\" [width]=\"width()\" [hideOnClose]=\"isSmallScreen()\">\n    <h3 class=\"le-sidebar-title\">\n      <button\n        class=\"le-sidebar-toggle\"\n        (click)=\"onDrawerToggleClick($event)\"\n        (keydown.enter)=\"onDrawerToggleClick($event)\"\n      >\n        @if (isDrawerOpen()) {\n          {{ config().title }}\n        }\n\n        <le-icon name=\"chevron\"></le-icon>\n      </button>\n    </h3>\n\n    @if (isDrawerOpen()) {\n      <menu>\n        @for (item of menu(); track item) {\n          @if (isSection(item)) {\n            <a\n              class=\"le-menu-item\"\n              tabindex=\"0\"\n              [class.le-menu-item--expanded]=\"expanded().has(item)\"\n              (click)=\"toggleExpanded($event, item)\"\n              (keydown.enter)=\"toggleExpanded($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n\n              <le-icon class=\"le-menu-chevron\" name=\"chevron\"></le-icon>\n            </a>\n\n            <div class=\"le-menu-group\" [class.le-menu-group--expanded]=\"expanded().has(item)\">\n              @for (child of item.children; track child) {\n                @if (isSection(child)) {\n                  <a\n                    class=\"le-menu-item\"\n                    [tabindex]=\"expanded().has(item) ? 0 : -1\"\n                    [class.le-menu-item--expanded]=\"expanded().has(child)\"\n                    (click)=\"toggleExpanded($event, child)\"\n                    (keydown.enter)=\"toggleExpanded($event, child)\"\n                  >\n                    <div class=\"le-menu-title\">\n                      {{ child.title }}\n                    </div>\n\n                    <le-icon class=\"le-menu-chevron\" name=\"chevron\"></le-icon>\n                  </a>\n\n                  <div class=\"le-menu-group\" [class.le-menu-group--expanded]=\"expanded().has(child)\">\n                    @for (grandchild of child.children; track grandchild) {\n                      <a\n                        [tabindex]=\"expanded().has(child) ? 0 : -1\"\n                        class=\"le-menu-item\"\n                        [class.le-menu-item--selected]=\"view().id === grandchild.id\"\n                        (click)=\"onSidebarItemClick($event, grandchild)\"\n                        (keydown.enter)=\"onSidebarItemClick($event, grandchild)\"\n                      >\n                        <div class=\"le-menu-title\">\n                          {{ grandchild.title }}\n                        </div>\n                      </a>\n                    }\n                  </div>\n                } @else {\n                  <a\n                    [tabindex]=\"expanded().has(item) ? 0 : -1\"\n                    class=\"le-menu-item\"\n                    [class.le-menu-item--selected]=\"view().id === child.id\"\n                    (click)=\"onSidebarItemClick($event, child)\"\n                    (keydown.enter)=\"onSidebarItemClick($event, child)\"\n                  >\n                    <div class=\"le-menu-title\">\n                      {{ child.title }}\n                    </div>\n                  </a>\n                }\n              }\n            </div>\n          } @else {\n            <a\n              tabindex=\"0\"\n              class=\"le-menu-item\"\n              [class.le-menu-item--selected]=\"view().id === item.id\"\n              (click)=\"onSidebarItemClick($event, item)\"\n              (keydown.enter)=\"onSidebarItemClick($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n            </a>\n          }\n        }\n      </menu>\n\n      <div class=\"le-drawer-resizer\" cdkDrag (cdkDragMoved)=\"onDragMoved($event)\">\n        <span class=\"le-drag-icon\">\u283F</span>\n      </div>\n    }\n  </aside>\n\n  <main leDrawerContent>\n    <ng-content></ng-content>\n  </main>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+class ChartViewComponent {
+    node = input.required();
+    config = input();
+    event = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChartViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: ChartViewComponent, isStandalone: true, selector: "chart-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, ngImport: i0, template: "<h2>{{ node()?.title }}</h2>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ChartViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chart-view', template: "<h2>{{ node()?.title }}</h2>\n" }]
+        }] });
+
+class GridComponent {
+    node = input.required();
+    config = input();
+    event = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: GridComponent, isStandalone: true, selector: "grid-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, host: { properties: { "class.le-gird-view": "true", "style.grid-template-columns": "node().layout.columns ?? 1" } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\" (event)=\"event.emit($event)\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'grid-view', imports: [forwardRef(() => NodeComponent)], host: {
+                        '[class.le-gird-view]': 'true',
+                        '[style.grid-template-columns]': 'node().layout.columns ?? 1',
+                    }, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\" (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;
+    }
+    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 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 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 {
+            text: this.generateText(ref),
+            href: this.generateLink(ref),
+        };
+    });
+    onClick(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.clicked.emit(this.data());
+    }
+    generateText(ref) {
+        if (ref) {
+            return ref.display_name || ref.object_id;
+        }
+        return '';
+    }
+    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;
+        }
+    }
+    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 type = this.type();
+            const data = this.data();
+            const column = this.column();
+            const metadata = this.metadata();
+            untracked(() => {
+                const component = (type && TABLE_CELL_TEMPLATES[type]) || TABLE_CELL_TEMPLATES['StringTemplate'];
+                if (this.componentRef) {
+                    this.componentRef.destroy();
+                }
+                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());
+                }
+            });
+        });
+    }
+    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 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" }]
+        }] });
+
+class BlockViewComponent {
+    data = input.required();
+    columns = input.required();
+    event = output();
+    onCellClicked(data) {
+        this.event.emit({ type: 'cell_clicked', data });
+        this.event.emit({ type: 'close' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BlockViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: BlockViewComponent, isStandalone: true, selector: "le-block-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { event: "event" }, ngImport: i0, template: "<div class=\"block-view\">\n  @for (column of columns(); track column) {\n    <div class=\"block-view-item\">\n      <div class=\"block-view-label\">\n        {{column.label}}\n      </div>\n\n      <div class=\"block-view-value\">\n        @if (data(); as row) {\n          <ng-template\n            tableViewCell\n            [data]=\"row[column.key]\"\n            [type]=\"column.column_format?.cellTemplate\"\n            [column]=\"column\"\n            [metadata]=\"row._metadata\"\n            (clicked)=\"onCellClicked($event)\"\n          ></ng-template>\n        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: TableViewCellDirective, selector: "[tableViewCell]", inputs: ["type", "data", "column", "metadata"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: BlockViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-block-view', imports: [TableViewCellDirective], template: "<div class=\"block-view\">\n  @for (column of columns(); track column) {\n    <div class=\"block-view-item\">\n      <div class=\"block-view-label\">\n        {{column.label}}\n      </div>\n\n      <div class=\"block-view-value\">\n        @if (data(); as row) {\n          <ng-template\n            tableViewCell\n            [data]=\"row[column.key]\"\n            [type]=\"column.column_format?.cellTemplate\"\n            [column]=\"column\"\n            [metadata]=\"row._metadata\"\n            (clicked)=\"onCellClicked($event)\"\n          ></ng-template>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }] });
+
+class SidePanelComponent {
+    dataService = inject(LEDataService);
+    _selectedTab = signal(0);
+    data = input.required();
+    config = input();
+    event = output();
+    node = this.dataService.view;
+    tabs = computed(() => {
+        const data = this.data();
+        return data.tabs.length ? data.tabs : undefined;
+    });
+    selectedTabIndex = this._selectedTab.asReadonly();
+    selectedTab = computed(() => {
+        return this.tabs()?.[this.selectedTabIndex()];
+    });
+    constructor() {
+        effect(() => {
+            const data = this.data();
+            untracked(() => {
+                if (data.node) {
+                    this.dataService.setView(data.node, true);
+                }
+            });
+        });
+    }
+    onEvent(event) {
+        this.event.emit(event);
+    }
+    onTabClick(index) {
+        this._selectedTab.set(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidePanelComponent, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, host: { properties: { "style.width": "\"100%\"", "style.overflow": "\"auto\"", "style.padding": "\"0 16px\"" } }, providers: [LEDataService, LEFiltersService], ngImport: i0, template: "@if (node(); as node) {\n  <le-node [node]=\"node\" [config]=\"data()?.config\" (event)=\"onEvent($event)\"></le-node>\n}\n\n@if (tabs(); as tabs) {\n  <div class=\"le-tabs-nav\">\n    @for (tab of tabs; track tab.type; let idx = $index) {\n      <button\n        class=\"le-button le-button-flat le-button--success\"\n        [attr.aria-label]=\"'Select ' + tab.type\"\n        [class.le-button--success]=\"selectedTabIndex() === idx\"\n        (click)=\"onTabClick(idx)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n    <span class=\"spacer\"></span>\n\n    <button\n      aria-label=\"Close side panel\"\n      class=\"le-button le-button-flat\"\n      (click)=\"event.emit({ type: 'close' })\"\n    >Close</button>\n  </div>\n}\n\n@if (selectedTab(); as selectedTab) {\n  <div class=\"le-tabs-content\">\n    @switch (selectedTab.type) {\n      @case ('tree') {\n        <le-tree-view [data]=\"selectedTab.data\"></le-tree-view>\n      }\n      @case ('table') {\n        <le-node\n          [node]=\"selectedTab.data\"\n          [config]=\"data()?.config\"\n          (event)=\"onEvent($event)\"\n        ></le-node>\n      }\n      @case ('block') {\n        <le-block-view\n          [data]=\"selectedTab.data\"\n          [columns]=\"selectedTab.columns\"\n          (event)=\"onEvent($event)\"\n        ></le-block-view>\n      }\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }, { kind: "component", type: i0.forwardRef(() => TreeViewComponent), selector: "le-tree-view", inputs: ["data"] }, { kind: "component", type: i0.forwardRef(() => BlockViewComponent), selector: "le-block-view", inputs: ["data", "columns"], outputs: ["event"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ host: {
+                        '[style.width]': '"100%"',
+                        '[style.overflow]': '"auto"',
+                        '[style.padding]': '"0 16px"',
+                    }, imports: [forwardRef(() => NodeComponent), TreeViewComponent, BlockViewComponent], providers: [LEDataService, LEFiltersService], template: "@if (node(); as node) {\n  <le-node [node]=\"node\" [config]=\"data()?.config\" (event)=\"onEvent($event)\"></le-node>\n}\n\n@if (tabs(); as tabs) {\n  <div class=\"le-tabs-nav\">\n    @for (tab of tabs; track tab.type; let idx = $index) {\n      <button\n        class=\"le-button le-button-flat le-button--success\"\n        [attr.aria-label]=\"'Select ' + tab.type\"\n        [class.le-button--success]=\"selectedTabIndex() === idx\"\n        (click)=\"onTabClick(idx)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n    <span class=\"spacer\"></span>\n\n    <button\n      aria-label=\"Close side panel\"\n      class=\"le-button le-button-flat\"\n      (click)=\"event.emit({ type: 'close' })\"\n    >Close</button>\n  </div>\n}\n\n@if (selectedTab(); as selectedTab) {\n  <div class=\"le-tabs-content\">\n    @switch (selectedTab.type) {\n      @case ('tree') {\n        <le-tree-view [data]=\"selectedTab.data\"></le-tree-view>\n      }\n      @case ('table') {\n        <le-node\n          [node]=\"selectedTab.data\"\n          [config]=\"data()?.config\"\n          (event)=\"onEvent($event)\"\n        ></le-node>\n      }\n      @case ('block') {\n        <le-block-view\n          [data]=\"selectedTab.data\"\n          [columns]=\"selectedTab.columns\"\n          (event)=\"onEvent($event)\"\n        ></le-block-view>\n      }\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+const positionMap = {
+    right: (position) => position.right().top('0'),
+    left: (position) => position.left().top('0'),
+    top: (position) => position.top('0'),
+    bottom: (position) => position.bottom('0'),
+};
+class LeSidePanelService {
+    overlay = inject(Overlay);
+    breakpointObserver = inject(BreakpointObserver);
+    overlayRef;
+    output = new Subject();
+    show(data, config) {
+        if (this.overlayRef)
+            this.hide();
+        const destroy$ = new Subject();
+        this.overlayRef = this.overlay.create({
+            width: this.getWidth(config),
+            height: this.getHeight(config),
+            panelClass: 'le-side-panel',
+            hasBackdrop: config.hasBackdrop ?? true,
+            positionStrategy: this.getPositionStrategy(config),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        this.overlayRef.addPanelClass(this.getClosedClass(config));
+        this.overlayRef?.outsidePointerEvents().subscribe({
+            next: () => {
+                this.overlayRef?.addPanelClass(this.getClosedClass(config));
+                this.delayed(() => this.hide());
+            },
+        });
+        const componentRef = this.overlayRef.attach(new ComponentPortal(SidePanelComponent, null, config.injector));
+        componentRef.setInput('data', data);
+        this.delayed(() => this.overlayRef?.removePanelClass(this.getClosedClass(config)));
+        const sub = componentRef.instance.event.subscribe((event) => {
+            this.output.next(event);
+            if (event.type === 'close') {
+                this.overlayRef?.addPanelClass(this.getClosedClass(config));
+                this.delayed(() => this.hide());
+            }
+        });
+        componentRef.onDestroy(() => {
+            sub.unsubscribe();
+            destroy$.next();
+            destroy$.complete();
+        });
+        return this.output.pipe(takeUntil(destroy$));
+    }
+    hide() {
+        this.overlayRef?.dispose();
+        this.overlayRef = undefined;
+    }
+    delayed(fn) {
+        setTimeout(() => fn(), 300);
+    }
+    getHeight(config) {
+        if (config.height) {
+            return config.height;
+        }
+        if (config.position === 'top' || config.position === 'bottom') {
+            if (this.breakpointObserver.isMatched(Breakpoints.XSmall)) {
+                return '80vh';
+            }
+            else if (this.breakpointObserver.isMatched(Breakpoints.Small)) {
+                return '60vh';
+            }
+            else {
+                return '40vh';
+            }
+        }
+        return '100vh';
+    }
+    getWidth(config) {
+        if (config.width) {
+            return config.width;
+        }
+        if (config.position === 'left' || config.position === 'right') {
+            if (this.breakpointObserver.isMatched(Breakpoints.XSmall)) {
+                return '80vw';
+            }
+            else if (this.breakpointObserver.isMatched(Breakpoints.Small)) {
+                return '60vw';
+            }
+            else {
+                return '40vw';
+            }
+        }
+        else {
+            return '100vw';
+        }
+    }
+    getClosedClass(config) {
+        return `le-side-panel--${config.position}`;
+    }
+    getPositionStrategy({ position }) {
+        let positionStrategy = this.overlay.position().global();
+        if (positionMap[position]) {
+            return positionMap[position](positionStrategy);
+        }
+        return positionStrategy;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeSidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeSidePanelService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeSidePanelService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class TableViewComponent {
+    apiService = inject(LEApiService);
+    dataService = inject(LEDataService);
+    filtersService = inject(LEFiltersService);
+    sidePanelService = inject(LeSidePanelService);
+    injector = inject(Injector);
+    node = input.required();
+    config = input();
+    event = output();
+    _columns = signal([]);
+    _data = signal(new TableDataSource());
+    _total = signal(0);
+    _isLoading = signal(false);
+    _pageIndex = signal(0);
+    _pageSize = signal(0);
+    _pageSizeOptions = signal([]);
+    _sortConfig = signal(null);
+    _sortMap = signal(new Map());
+    _sortOrder = signal(new Map());
+    _cancelRequest$ = new Subject();
+    columns = this._columns.asReadonly();
+    data = this._data.asReadonly();
+    displayedColumns = computed(() => {
+        const result = [];
+        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) {
+            result.push('info');
+        }
+        result.push(...columnKeys);
+        if (hasVersion) {
+            result.push('modified');
+        }
+        return result;
+    });
+    isLoading = this._isLoading.asReadonly();
+    pageIndex = this._pageIndex.asReadonly();
+    pageSize = this._pageSize.asReadonly();
+    pageSizeOptions = this._pageSizeOptions.asReadonly();
+    entriesCount = this._total.asReadonly();
+    sortMap = this._sortMap.asReadonly();
+    sortOrder = this._sortOrder.asReadonly();
+    isSortingEnabled = computed(() => {
+        return !!this._sortConfig()?.fields.length;
+    });
+    sortColumnKeys = computed(() => {
+        return new Set(this._sortConfig()?.fields ?? []);
+    });
+    hasRowClickAction = computed(() => {
+        return !!this.node()?.actions?.onRowClick?.length;
+    });
+    filters = this.filtersService.options;
+    constructor() {
+        this.setEffects();
+    }
+    ngOnDestroy() {
+        this._cancelRequest$.next();
+        this._cancelRequest$.complete();
+    }
+    onPageChange(pageChange) {
+        this._pageSize.set(pageChange.pageSize);
+        this._pageIndex.set(pageChange.pageIndex);
+    }
+    onSortClick(event, column) {
+        event.stopPropagation();
+        this._sortMap.update((sortMap) => {
+            const direction = sortMap.get(column.key);
+            if (direction === 'desc') {
+                sortMap.delete(column.key);
+            }
+            else if (direction === 'asc') {
+                sortMap.set(column.key, 'desc');
+            }
+            else {
+                sortMap.set(column.key, 'asc');
+            }
+            return new Map(sortMap);
+        });
+    }
+    onFiltersClick(event) {
+        event.stopPropagation();
+        this.filtersService.open();
+    }
+    onToolbarActionClick({ actions }) {
+        actions.forEach((action) => this.processTableAction(action));
+    }
+    onRowClick(row) {
+        const actions = this.node().actions?.onRowClick ?? [];
+        actions.forEach((action) => this.processRowClickAction(action, row));
+    }
+    onRowInfoClick(event, row) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        const node = {
+            id: row._metadata.lakehouse_address,
+            type: 'table',
+            dataSource: {
+                kind: 'object',
+                entity: row._metadata.lakehouse_address,
+                params: {
+                    includeVersions: true,
+                    includeMeta: true,
+                    loadReferences: false,
+                    fileOptimized: true,
+                },
+            },
+        };
+        this.sidePanelService
+            .show({
+            tabs: [
+                { type: 'block', label: 'Object', data: row, columns: this._columns() },
+                { type: 'tree', label: 'Metadata', data: row._metadata },
+                { type: 'table', label: 'Versions', data: node },
+            ],
+            config: {
+                hasCloseButton: true,
+                skipLocationChange: true,
+                hideFilters: true,
+                hideInfo: true,
+            },
+        }, {
+            position: 'bottom',
+            injector: this.injector,
+        })
+            .subscribe({
+            next: event => {
+                if (event.type === 'cell_clicked') {
+                    this.onCellClicked(event.data);
+                }
+            }
+        });
+    }
+    onCellClicked(data) {
+        const path = `${data.ref.resource}%23${data.ref.class_name}%3A${data.ref.class_version}%3A${data.ref.object_id}%3A${data.ref.object_version}`;
+        this.setView({
+            id: path,
+            type: 'form',
+            controlSource: {
+                kind: 'object',
+                entity: path,
+            },
+        });
+    }
+    processRowClickAction(action, row) {
+        const { type, node } = action;
+        const clone = JSON.parse(JSON.stringify(node));
+        if (type === 'open_sidebar' && 'controlSource' in clone) {
+            if (clone.controlSource?.params) {
+                clone.controlSource.params = this.interpolateRowValues(clone.controlSource.params, row);
+            }
+            this.sidePanelService
+                .show({
+                node: clone,
+                tabs: [],
+                config: { hasCloseButton: true, skipLocationChange: true },
+            }, {
+                position: 'right',
+                injector: this.injector,
+            })
+                .subscribe((event) => {
+                if (event.type === 'refresh') {
+                    this.forceFetch();
+                }
+            });
+        }
+    }
+    processTableAction(action) {
+        if (action.type === 'update_form') {
+            const dataSource = action.dataSource;
+            this.setView({
+                id: action.type,
+                type: 'form',
+                controlSource: {
+                    kind: dataSource.kind,
+                    entity: dataSource.entity,
+                    params: dataSource?.params,
+                },
+            });
+        }
+    }
+    setView(node) {
+        this.dataService.setView(node, !!this.config()?.skipLocationChange);
+    }
+    setPagination(pagination) {
+        this._pageSize.set(pagination?.pageSize ?? 0);
+        this._pageSizeOptions.set(pagination?.options ?? []);
+    }
+    getTableData(node, ctx) {
+        this._isLoading.set(true);
+        this._cancelRequest$.next();
+        this.buildRequest(node, ctx)
+            .pipe(takeUntil(this._cancelRequest$))
+            .subscribe({
+            next: (response) => {
+                this.handleTableDataSuccessResponse(response);
+            },
+            error: (error) => {
+                this.handleTableDataErrorResponse(error);
+            },
+        });
+    }
+    buildRequest(node, ctx) {
+        if (node.dataSource?.kind === 'class') {
+            const query = buildQueryString(ctx);
+            return this.apiService.getObject(node.dataSource.entity, query);
+        }
+        if (node.dataSource?.kind === 'transaction') {
+            const body = Object.assign({}, node.dataSource.params, buildRequestBody(ctx));
+            this.apiService.executeTransaction(node.dataSource.entity, body);
+        }
+        if (node.dataSource?.kind === 'object') {
+            return this.apiService.getObjectByAddress(node.dataSource.entity, node.dataSource.params ?? {});
+        }
+        throw new Error(`Datasource type should be class or transaction. Received: ${node.dataSource?.kind}`);
+    }
+    handleTableDataSuccessResponse(response) {
+        this._columns.set(response.columns);
+        this._data.set(new TableDataSource(response.rows));
+        this._total.set(response.total ?? response.rows.length);
+        this._isLoading.set(false);
+        const showFilters = !this.config()?.hideFilters;
+        if (showFilters) {
+            this.filtersService.setOptions(this.getFilters(response.columns));
+        }
+    }
+    handleTableDataErrorResponse(error) {
+        console.error(error);
+        this._columns.set([]);
+        this._data.set(new TableDataSource());
+        this._total.set(0);
+        this._isLoading.set(false);
+    }
+    getFilters(columns) {
+        return columns.reduce((acc, column) => {
+            if (column.filters) {
+                acc.push(column.filters);
+            }
+            return acc;
+        }, []);
+    }
+    interpolateRowValues(body, row = {}) {
+        const result = {};
+        Object.entries(body).forEach(([key, value]) => {
+            if (typeof value === 'string' && isPlaceholder$1(value)) {
+                const valueKey = value.replace(/\{row\.(\w+)\}/g, '$1');
+                if (row[valueKey]) {
+                    result[key] = row[valueKey];
+                }
+            }
+            else {
+                result[key] = value;
+            }
+        });
+        return result;
+    }
+    setEffects() {
+        effect(() => {
+            const node = this.node();
+            untracked(() => {
+                this.filtersService.updateSelection({});
+                this.filtersService.setOptions([]);
+                this.setPagination(node.ui?.pagination);
+                this._sortConfig.set(node?.ui?.sort ?? null);
+                this._sortMap.set(mapSortStringListToSortMap(node?.ui?.sort?.default ?? []));
+            });
+        });
+        effect(() => {
+            const node = this.node();
+            const pageSize = this.pageSize();
+            const pageIndex = this.pageIndex();
+            const sort = this._sortMap();
+            const filters = this.filtersService.selection();
+            untracked(() => {
+                if (node?.dataSource) {
+                    const ctx = buildRequestContext({
+                        pageSize,
+                        pageIndex,
+                        sort: mapSortMapToSortStringList(sort),
+                        filters,
+                    }, {
+                        isSortable: this.isSortingEnabled(),
+                        hasPagination: !!this.pageSize(),
+                    });
+                    this.getTableData(node, ctx);
+                }
+            });
+        });
+        effect(() => {
+            const sortMap = this._sortMap();
+            untracked(() => {
+                this._sortOrder.update(() => {
+                    return [...sortMap].reduce((acc, item, index) => {
+                        return acc.set(item[0], index + 1);
+                    }, new Map());
+                });
+            });
+        });
+    }
+    forceFetch() {
+        const node = this.node();
+        const pageSize = this.pageSize();
+        const pageIndex = this.pageIndex();
+        const sort = this._sortMap();
+        const filters = this.filtersService.selection();
+        if (node?.dataSource) {
+            const ctx = buildRequestContext({
+                pageSize,
+                pageIndex,
+                sort: mapSortMapToSortStringList(sort),
+                filters,
+            }, {
+                isSortable: this.isSortingEnabled(),
+                hasPagination: !!this.pageSize(),
+            });
+            this.getTableData(node, ctx);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewComponent, isStandalone: true, selector: "table-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, ngImport: i0, template: "@if (node()?.title || node()?.actions || filters().length) {\n  <div class=\"le-toolbar\">\n    @if (node(); as node) {\n      <h2>{{ node?.title }}</h2>\n\n      <span class=\"spacer\"></span>\n\n      @if (filters().length) {\n        <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n      }\n\n      @if (node.actions?.tableActions) {\n        <table-view-actions\n          [actions]=\"node.actions!.tableActions\"\n          (actionClicked)=\"onToolbarActionClick($event)\"\n        ></table-view-actions>\n      }\n    }\n  </div>\n}\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      <!--   Info column   -->\n      <ng-container cdkColumnDef=\"info\">\n        <th class=\"le-table-header-cell le-table-icon-cell\" cdk-header-cell *cdkHeaderCellDef>\n          <le-icon size=\"16\" class=\"le-icon\" name=\"info\"></le-icon>\n        </th>\n\n        <td class=\"le-table-cell le-table-icon-cell\" cdk-cell *cdkCellDef=\"let row\">\n          <button class=\"le-button le-button-basic le-button--success\" aria-label=\"View info\" (click)=\"onRowInfoClick($event, row)\">\n            <le-icon size=\"16\" class=\"le-icon\" name=\"info\"></le-icon>\n          </button>\n        </td>\n      </ng-container>\n      <!--   Modified column   -->\n      <ng-container cdkColumnDef=\"modified\">\n        <th class=\"le-table-header-cell\" cdk-header-cell *cdkHeaderCellDef>\n          <div class=\"le-cell-content\">\n            Modified\n          </div>\n        </th>\n\n        <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n          <span class=\"le-table-template le-template-string\">\n            {{ row._metadata.updated_at | date:'medium' }}\n          </span>\n        </td>\n      </ng-container>\n\n      <!--   Columns   -->\n      @for (column of columns(); track column) {\n        <ng-container [cdkColumnDef]=\"column.key\">\n          <th\n            class=\"le-table-header-cell\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n            [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n            (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n          >\n            <div class=\"le-cell-content\">\n              <ng-template\n                tableViewCell\n                [data]=\"column.label\"\n                [type]=\"column.column_format?.headerTemplate\"\n              ></ng-template>\n\n              @if (sortColumnKeys().has(column.key)) {\n                <div class=\"le-sort-container\">\n                  @if (sortMap().has(column.key)) {\n                    <div class=\"le-sort-icon\">\n                      <i\n                        class=\"le-sort-arrow\"\n                        [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n                        [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n                      ></i>\n                    </div>\n\n                    <div class=\"le-sort-order\">\n                      @if (sortOrder().has(column.key)) {\n                        <span>\n                          {{ sortOrder().get(column.key) }}\n                        </span>\n                      }\n                    </div>\n                  } @else {\n                    <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n                  }\n                </div>\n              }\n            </div>\n          </th>\n\n          <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n            <ng-template\n              tableViewCell\n              [data]=\"row[column.key]\"\n              [type]=\"column.column_format?.cellTemplate\"\n              [column]=\"column\"\n              [metadata]=\"row._metadata\"\n              (clicked)=\"onCellClicked($event)\"\n            ></ng-template>\n          </td>\n        </ng-container>\n      }\n\n      <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n      <tr\n        cdk-row\n        class=\"le-table-row\"\n        [tabindex]=\"0\"\n        [class.le-table-row--clickable]=\"hasRowClickAction()\"\n        *cdkRowDef=\"let row; columns: displayedColumns()\"\n        (click)=\"onRowClick(row)\"\n      ></tr>\n    </table>\n  }\n</div>\n\n@if (data().count === 0) {\n  @if (isLoading()) {\n    <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n  } @else {\n    <div class=\"no-entities\">\n      <span>No Entities</span>\n    </div>\n  }\n}\n", dependencies: [{ kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: TableViewPaginationComponent, selector: "table-view-pagination", inputs: ["pageSize", "pageSizeOptions", "entriesCount"], outputs: ["pageChange"] }, { kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: TableViewActions, selector: "table-view-actions", inputs: ["actions"], outputs: ["actionClicked"] }, { kind: "directive", type: TableViewCellDirective, selector: "[tableViewCell]", inputs: ["type", "data", "column", "metadata"], outputs: ["clicked"] }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: DialogModule }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'table-view', imports: [
+                        CdkTable,
+                        CdkColumnDef,
+                        CdkHeaderCell,
+                        CdkHeaderCellDef,
+                        CdkCell,
+                        CdkCellDef,
+                        CdkHeaderRowDef,
+                        CdkHeaderRow,
+                        CdkRow,
+                        CdkRowDef,
+                        TableViewPaginationComponent,
+                        LoadingViewComponent,
+                        TableViewActions,
+                        TableViewCellDirective,
+                        LeIconComponent,
+                        DialogModule,
+                        DatePipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (node()?.title || node()?.actions || filters().length) {\n  <div class=\"le-toolbar\">\n    @if (node(); as node) {\n      <h2>{{ node?.title }}</h2>\n\n      <span class=\"spacer\"></span>\n\n      @if (filters().length) {\n        <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n      }\n\n      @if (node.actions?.tableActions) {\n        <table-view-actions\n          [actions]=\"node.actions!.tableActions\"\n          (actionClicked)=\"onToolbarActionClick($event)\"\n        ></table-view-actions>\n      }\n    }\n  </div>\n}\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      <!--   Info column   -->\n      <ng-container cdkColumnDef=\"info\">\n        <th class=\"le-table-header-cell le-table-icon-cell\" cdk-header-cell *cdkHeaderCellDef>\n          <le-icon size=\"16\" class=\"le-icon\" name=\"info\"></le-icon>\n        </th>\n\n        <td class=\"le-table-cell le-table-icon-cell\" cdk-cell *cdkCellDef=\"let row\">\n          <button class=\"le-button le-button-basic le-button--success\" aria-label=\"View info\" (click)=\"onRowInfoClick($event, row)\">\n            <le-icon size=\"16\" class=\"le-icon\" name=\"info\"></le-icon>\n          </button>\n        </td>\n      </ng-container>\n      <!--   Modified column   -->\n      <ng-container cdkColumnDef=\"modified\">\n        <th class=\"le-table-header-cell\" cdk-header-cell *cdkHeaderCellDef>\n          <div class=\"le-cell-content\">\n            Modified\n          </div>\n        </th>\n\n        <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n          <span class=\"le-table-template le-template-string\">\n            {{ row._metadata.updated_at | date:'medium' }}\n          </span>\n        </td>\n      </ng-container>\n\n      <!--   Columns   -->\n      @for (column of columns(); track column) {\n        <ng-container [cdkColumnDef]=\"column.key\">\n          <th\n            class=\"le-table-header-cell\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n            [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n            (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n          >\n            <div class=\"le-cell-content\">\n              <ng-template\n                tableViewCell\n                [data]=\"column.label\"\n                [type]=\"column.column_format?.headerTemplate\"\n              ></ng-template>\n\n              @if (sortColumnKeys().has(column.key)) {\n                <div class=\"le-sort-container\">\n                  @if (sortMap().has(column.key)) {\n                    <div class=\"le-sort-icon\">\n                      <i\n                        class=\"le-sort-arrow\"\n                        [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n                        [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n                      ></i>\n                    </div>\n\n                    <div class=\"le-sort-order\">\n                      @if (sortOrder().has(column.key)) {\n                        <span>\n                          {{ sortOrder().get(column.key) }}\n                        </span>\n                      }\n                    </div>\n                  } @else {\n                    <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n                  }\n                </div>\n              }\n            </div>\n          </th>\n\n          <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n            <ng-template\n              tableViewCell\n              [data]=\"row[column.key]\"\n              [type]=\"column.column_format?.cellTemplate\"\n              [column]=\"column\"\n              [metadata]=\"row._metadata\"\n              (clicked)=\"onCellClicked($event)\"\n            ></ng-template>\n          </td>\n        </ng-container>\n      }\n\n      <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n      <tr\n        cdk-row\n        class=\"le-table-row\"\n        [tabindex]=\"0\"\n        [class.le-table-row--clickable]=\"hasRowClickAction()\"\n        *cdkRowDef=\"let row; columns: displayedColumns()\"\n        (click)=\"onRowClick(row)\"\n      ></tr>\n    </table>\n  }\n</div>\n\n@if (data().count === 0) {\n  @if (isLoading()) {\n    <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n  } @else {\n    <div class=\"no-entities\">\n      <span>No Entities</span>\n    </div>\n  }\n}\n" }]
+        }], ctorParameters: () => [] });
+
+const isSectionsSchema = (raw) => {
+    if (!raw || typeof raw !== 'object')
+        return false;
+    const r = raw;
+    return Boolean(r.sections || // direct sections array
+        r.control?.type === 'sections' || // control.type === 'sections'
+        r.control?.sections || // control.sections
+        r.meta?.sections);
+};
+const adaptForm = (raw) => {
+    if (isSectionsSchema(raw)) {
+        return adaptSections(raw);
+    }
+    return adaptOld(raw);
+};
+
+class FormRendererComponent {
+    renderer = inject(Renderer2);
+    ref = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    styleRef = this.renderer.createElement('style');
+    engine = input.required();
+    sections = input.required();
+    topLevelControls = input([]);
+    customCss = input();
+    config = input();
+    event = output();
+    constructor() {
+        this.renderer.appendChild(this.ref.nativeElement, this.styleRef);
+        this.destroyRef.onDestroy(() => {
+            this.renderer.removeChild(this.ref.nativeElement, this.styleRef);
+        });
+        effect(() => {
+            this.styleRef.textContent = this.customCss() ?? '';
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FormRendererComponent, isStandalone: true, selector: "le-form-renderer", inputs: { engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, topLevelControls: { classPropertyName: "topLevelControls", publicName: "topLevelControls", isSignal: true, isRequired: false, transformFunction: null }, customCss: { classPropertyName: "customCss", publicName: "customCss", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, ngImport: i0, template: "<div class=\"le-form-container\">\n  @for (section of sections(); track section.id) {\n    <section class=\"le-section\">\n      <div class=\"le-toolbar\">\n        @if (section.label) {\n          <h3>{{ section.label }}</h3>\n        }\n\n        <span class=\"spacer\"></span>\n\n        @if (config()?.hasCloseButton) {\n          <button class=\"le-button\" aria-label=\"Close side panel\" (click)=\"event.emit({ type: 'close'})\">Close</button>\n        }\n      </div>\n\n      <div class=\"le-section-controls\">\n        @for (control of section.controls; track control) {\n          <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n        }\n      </div>\n    </section>\n  }\n\n  @if (topLevelControls()?.length) {\n    <section class=\"le-top-level-controls\">\n      @for (control of topLevelControls(); track control) {\n        <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n      }\n    </section>\n  }\n</div>\n", dependencies: [{ kind: "component", type: FeFieldHost, selector: "fe-field", inputs: ["engine", "control"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-form-renderer', imports: [FeFieldHost], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-form-container\">\n  @for (section of sections(); track section.id) {\n    <section class=\"le-section\">\n      <div class=\"le-toolbar\">\n        @if (section.label) {\n          <h3>{{ section.label }}</h3>\n        }\n\n        <span class=\"spacer\"></span>\n\n        @if (config()?.hasCloseButton) {\n          <button class=\"le-button\" aria-label=\"Close side panel\" (click)=\"event.emit({ type: 'close'})\">Close</button>\n        }\n      </div>\n\n      <div class=\"le-section-controls\">\n        @for (control of section.controls; track control) {\n          <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n        }\n      </div>\n    </section>\n  }\n\n  @if (topLevelControls()?.length) {\n    <section class=\"le-top-level-controls\">\n      @for (control of topLevelControls(); track control) {\n        <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n      }\n    </section>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+const isPlaceholder = (value) => {
+    return typeof value === 'string' && value.startsWith('{') && value.endsWith('}');
+};
+const isObject = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+/**
+ * @param value "{email_verification_code_field}"
+ * @returns "email_verification_code_field"
+ */
+const getPlaceholderValue = (value) => {
+    return value.slice(1, -1);
+};
+/**
+ * @param body {"email_verification_code": "{email_verification_code_field}"}
+ * @returns ["email_verification_code_field"]
+ */
+const mapActionBodyToFieldsArray = (body) => {
+    const result = [];
+    for (const placeholder of Object.values(body)) {
+        if (isPlaceholder(placeholder)) {
+            result.push(getPlaceholderValue(placeholder));
+        }
+    }
+    return result;
+};
+/**
+ * @param body {"email_verification_code": "{email_verification_code_field}"}
+ * @param errors {"email_verification_code": "Invalid email verification code"}
+ * @returns true if body fields have errors
+ */
+const isErrorCorrespondActionBody = (body, errors) => {
+    const bodyFields = mapActionBodyToFieldsArray(body);
+    return bodyFields.some((field) => errors[field] !== undefined);
+};
+const getValueByPath = (obj = {}, path) => {
+    if (path.includes('.')) {
+        return path.split('.').reduce((acc, key) => acc && acc[key], obj);
+    }
+    return obj[path];
+};
+const parseLooseJSON = (str) => {
+    const clean = str.trim().replace(/,\s*([}\]])/g, '$1');
+    try {
+        return JSON.parse(clean);
+    }
+    catch {
+        return str;
+    }
+};
+const mapBodyStringModelToRequestBody = (bodyModel, values = {}) => {
+    if (isPlaceholder(bodyModel)) {
+        const path = getPlaceholderValue(bodyModel);
+        const value = getValueByPath(values, path);
+        if (value !== null && value !== undefined && value !== '') {
+            try {
+                return parseLooseJSON(value);
+            }
+            catch {
+                return value;
+            }
+        }
+        else {
+            return null;
+        }
+    }
+    else {
+        return bodyModel;
+    }
+};
+const mapBodyObjectModelToRequestBody = (bodyModel = {}, values = {}) => {
+    const result = {};
+    for (const { 0: key, 1: placeholder } of Object.entries(bodyModel)) {
+        if (isPlaceholder(placeholder)) {
+            const path = getPlaceholderValue(placeholder);
+            const value = getValueByPath(values, path);
+            if (value !== null && value !== undefined && value !== '') {
+                result[key] = value;
+            }
+            else {
+                result[key] = null;
+            }
+        }
+        else if (isObject(placeholder)) {
+            result[key] = mapBodyObjectModelToRequestBody(placeholder, values);
+        }
+        else {
+            result[key] = placeholder;
+        }
+    }
+    return result;
+};
+const mapBodyModelToRequestBody = (bodyModel, values) => {
+    if (typeof bodyModel === 'string') {
+        return mapBodyStringModelToRequestBody(bodyModel, values);
+    }
+    return mapBodyObjectModelToRequestBody(bodyModel, values);
+};
+
+class ToastListComponent {
+    toastService = inject(LeToastService);
+    toasts = this.toastService.toasts;
+    onButtonClick(actions) {
+        actions.forEach((action) => this.toastService.processAction(action));
+    }
+    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" });
+}
+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" }]
+        }] });
+
+let ID = 100_000_000;
+class LeToastService {
+    overlayRef;
+    overlay = inject(Overlay);
+    _toasts = signal([]);
+    toasts = this._toasts.asReadonly();
+    constructor() {
+        effect(() => {
+            const toasts = this._toasts();
+            if (toasts.length > 0) {
+                this.show();
+            }
+            else {
+                this.hide();
+            }
+        });
+    }
+    notify(toast) {
+        this._toasts.update((toasts) => [...toasts, toast]);
+    }
+    warn(...messages) {
+        this.notify(this.buildToast('warning', messages));
+    }
+    info(...messages) {
+        this.notify(this.buildToast('info', messages));
+    }
+    success(...messages) {
+        this.notify(this.buildToast('success', messages));
+    }
+    error(...messages) {
+        this.notify(this.buildToast('error', messages));
+    }
+    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;
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay.position().global().right().top(),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        this.overlayRef.attach(new ComponentPortal(ToastListComponent));
+    }
+    hide() {
+        this.overlayRef?.dispose();
+        this.overlayRef = undefined;
+    }
+    buildToast(type, messages) {
+        const id = `${type}_${ID++}`;
+        const textControls = messages.map((message) => ({
+            type: 'text',
+            value: message,
+        }));
+        const buttonControl = {
+            type: 'button',
+            label: 'Ok',
+            actions: [{ type: 'close_popup', target: id }],
+        };
+        return {
+            id,
+            type,
+            controls: [...textControls, buttonControl],
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Add or update URL parameter
+ */
+const addUrlParameter = (url, paramName, paramValue) => {
+    try {
+        const urlObj = new URL(url);
+        urlObj.searchParams.set(paramName, paramValue);
+        return urlObj.toString();
+    }
+    catch {
+        // If URL parsing fails, try simple string manipulation
+        const separator = url.includes('?') ? '&' : '?';
+        return `${url}${separator}${paramName}=${encodeURIComponent(paramValue)}`;
+    }
+};
+/**
+ * Get preview URL for image (with disposition_type=inline)
+ */
+const getPreviewUrl = (downloadUrl) => {
+    return addUrlParameter(downloadUrl, 'disposition_type', 'inline');
+};
+/**
+ * Clear file data from 'unsafe:' prefix
+ */
+const clearFileData = (data) => {
+    return data.startsWith('unsafe:') ? data.substring(7) : data;
+};
+/**
+ * If attachment is an image
+ */
+const isImageAttachment = (attachment) => {
+    return !!(attachment.mimetype && attachment.mimetype.toLowerCase().includes('image'));
+};
+const isDownloadFileString = (str) => {
+    return isUrlString(str) && str.includes('/download-file/');
+};
+const isUrlString = (str) => {
+    return str.startsWith('http://') || str.startsWith('https://');
+};
+const isBase64String = (str) => {
+    return str.startsWith('base64,');
+};
+const isDataUrlString = (str) => {
+    return str.startsWith('data:');
+};
+/**
+ * Is attachment reference
+ */
+const isAttachmentRef = (attachment) => {
+    return (!!attachment.ref &&
+        !!attachment.ref.resource &&
+        !!attachment.ref.class_name &&
+        !!attachment.ref.object_id &&
+        !!attachment.ref.object_version);
+};
+/**
+ * Get attachment url
+ */
+const getAttachmentUrl = (attachment) => {
+    return `${attachment.ref.resource}%23${attachment.ref.class_name}%3A${attachment.ref.class_version}%3A${attachment.ref.object_id}%3A${attachment.ref.object_version}`;
+};
+
+class FormViewAttachmentService {
+    apiService = inject(LEApiService);
+    _cache = new Map();
+    async resolve(attachment) {
+        if (!attachment.ref)
+            return '';
+        const objectId = attachment.ref.object_id;
+        if (!this._cache.has(objectId)) {
+            const fileInfo = await this.fetchAttachmentData(attachment);
+            if (typeof fileInfo?.data === 'string') {
+                const normalized = await this.normalizeFileData(fileInfo.data, fileInfo.filename, attachment);
+                this._cache.set(objectId, normalized);
+            }
+        }
+        return this._cache.get(objectId)?.data ?? '';
+    }
+    async download(attachment) {
+        const fileInfo = await this.resolveAttachmentData(attachment);
+        if (!fileInfo)
+            return;
+        const file = await firstValueFrom(this.apiService.getBlob(fileInfo.data));
+        this.downloadWithAnchor(file, fileInfo.filename);
+    }
+    async resolveAttachmentData(attachment) {
+        if (!attachment?.ref?.object_id)
+            return null;
+        if (this._cache.has(attachment.ref.object_id)) {
+            const cached = this._cache.get(attachment.ref.object_id);
+            return {
+                data: cached.originalUrl || cached.data,
+                filename: cached.filename,
+            };
+        }
+        if (isAttachmentRef(attachment)) {
+            return this.fetchAttachmentData(attachment);
+        }
+        return null;
+    }
+    async fetchAttachmentData(attachment) {
+        const response = await firstValueFrom(this.apiService.getObjectByAddress(getAttachmentUrl(attachment), {
+            includeVersions: false,
+            includeMeta: false,
+        }));
+        const row = response?.rows?.[0];
+        if (!row?.data)
+            return null;
+        return {
+            data: row.data,
+            filename: row.filename || attachment.filename || 'file',
+        };
+    }
+    async normalizeFileData(data, filename, attachment) {
+        const cleanData = clearFileData(data);
+        const result = {
+            data: '',
+            filename: filename,
+            isUrl: false,
+        };
+        if (isDownloadFileString(cleanData) && isImageAttachment(attachment)) {
+            // For images with download-file URLs, create preview URL with disposition_type=inline
+            result.data = await firstValueFrom(this.apiService.getBlob(getPreviewUrl(cleanData)));
+            result.isUrl = true;
+            result.originalUrl = cleanData;
+        }
+        else if (isUrlString(cleanData)) {
+            // Regular URL (not download-file) - use directly
+            result.data = cleanData;
+            result.originalUrl = cleanData;
+            result.isUrl = true;
+        }
+        else if (isDataUrlString(cleanData)) {
+            // Already a data URL
+            result.data = cleanData;
+        }
+        else if (isBase64String(cleanData)) {
+            // Legacy format "base64,actualdata" (for backward compatibility)
+            result.data = `data:${attachment.mimetype ?? 'application/octet-stream'};${cleanData}`;
+        }
+        else {
+            // New format: pure base64 data without prefix (like in old integration)
+            result.data = `data:${attachment.mimetype ?? 'application/octet-stream'};base64,${cleanData}`;
+        }
+        return result;
+    }
+    downloadWithAnchor(file, filename) {
+        const anchor = document.createElement('a');
+        anchor.href = file;
+        anchor.download = filename || 'File';
+        anchor.click();
+        URL.revokeObjectURL(file);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormViewAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormViewAttachmentService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormViewAttachmentService, decorators: [{
+            type: Injectable
+        }] });
+
+class FormViewComponent {
+    apiService = inject(LEApiService);
+    dataService = inject(LEDataService);
+    attachmentService = inject(FormViewAttachmentService);
+    viewportScroller = inject(ViewportScroller);
+    toastService = inject(LeToastService);
+    _isLoading = signal(false);
+    _form = signal(null);
+    _sections = signal([]);
+    _topLevelControls = signal([]);
+    _engine = signal(null);
+    _cancelRequest$ = new Subject();
+    _actionHandlers = {
+        invoke: (action) => {
+            const engine = this._engine();
+            let body = {};
+            if (!engine) {
+                return of(null);
+            }
+            if (!action.async) {
+                engine.markAllTouched();
+            }
+            engine.validate();
+            const hasError = isErrorCorrespondActionBody(action.body ?? {}, engine.status.errors);
+            if (hasError) {
+                return of(null);
+            }
+            if (action.body) {
+                body = mapBodyModelToRequestBody(action.body, engine.values.getAll());
+            }
+            if (!action.async) {
+                this._isLoading.set(true);
+            }
+            return this.dataService
+                .request(action.method, action.url, body)
+                .pipe(tap((response) => {
+                if (action.onSuccess && response.ok) {
+                    this.processActionList(action.onSuccess, response.body);
+                }
+                else if (action.onError && !response.ok) {
+                    this.processActionList(action.onError);
+                }
+                else {
+                    this._isLoading.set(false);
+                }
+                this.event.emit({ type: 'refresh' });
+                this.event.emit({ type: 'close' });
+            }), map(() => null), catchError(() => {
+                if (action.onError) {
+                    this.processActionList(action.onError);
+                }
+                return of(null);
+            }));
+        },
+        update_form: (action) => {
+            const node = this.mapUpdateFormActionToFormNode(action.control_source);
+            if (node) {
+                this.setView(node);
+            }
+            return of(null);
+        },
+        update_table: (action) => {
+            const node = this.mapUpdateTableActionToTableNode(action.data_source);
+            this.event.emit({ type: 'refresh' });
+            this.event.emit({ type: 'close' });
+            this.setView(node);
+            return of(null);
+        },
+        update_value: (action, response) => {
+            return of(action).pipe(filter((action) => isPlaceholder(action.value)), map((action) => mapBodyObjectModelToRequestBody({ [action.field_id]: action.value }, { response })), tap((result) => {
+                if (result[action.field_id]) {
+                    this._engine()?.values.set(action.field_id, result[action.field_id]);
+                }
+            }), map(() => null));
+        },
+        scroll_top: () => {
+            this.viewportScroller.scrollToPosition([0, 0]);
+            return of(null);
+        },
+        show_popup: (action) => {
+            this.toastService.notify({
+                ...action.item,
+                type: 'success',
+            });
+            return of(null);
+        },
+        open_url: (action) => {
+            window.open(action.url, '_blank');
+            return of(null);
+        },
+        download: (action) => {
+            this.attachmentService.download(action.payload);
+            return of(null);
+        },
+        navigate_to_section: (action) => {
+            this.dataService.navigateByNodeId(action.section_id);
+            return of(null);
+        },
+    };
+    node = input.required();
+    config = input();
+    event = output();
+    isLoading = this._isLoading.asReadonly();
+    data = computed(() => {
+        const engine = this._engine();
+        const sections = this._sections();
+        const topLevelControls = this._topLevelControls();
+        const customCss = this.dataService.customCss() ?? '';
+        if (!engine || !sections)
+            return null;
+        return {
+            engine,
+            sections,
+            customCss,
+            topLevelControls,
+        };
+    });
+    constructor() {
+        effect((onCleanup) => {
+            const node = this.node();
+            if (node) {
+                this.getFormData(node).pipe(takeUntil(this._cancelRequest$)).subscribe();
+            }
+            onCleanup(() => {
+                this._cancelRequest$.next();
+            });
+        });
+        effect(() => {
+            const form = this._form();
+            if (!form)
+                return;
+            untracked(() => {
+                this.init(form);
+            });
+        });
+    }
+    init(form) {
+        this._sections.set(this.sortSections(form.sections));
+        this._topLevelControls.set(form.controls ?? []);
+        const resolvers = {
+            attachment: (value) => this.attachmentService.resolve(value),
+            objectLatest: (className) => firstValueFrom(this.dataService.getObjectByClassName(className)),
+        };
+        this._engine.set(createEngine(form, {}, resolvers));
+        // this._engine()?.on('valueChanges', (value) => {
+        //   console.log('Value Changes', value);
+        //   // this.cdr.markForCheck();
+        // });
+        // this._engine()?.on('fieldStateChanges', (state) => {
+        //   console.log('Field State Changes', state);
+        //   // this.cdr.markForCheck();
+        // });
+        this._engine()?.on('action', ({ action }) => {
+            this.processActionList(action.actions);
+        });
+    }
+    setView(node) {
+        this.dataService.setView(node, !!this.config()?.skipLocationChange);
+    }
+    processAction(action, response) {
+        return this._actionHandlers[action.type](action, response);
+    }
+    sortSections(sections) {
+        return [...sections].sort((a, b) => {
+            const orderA = a.order ?? 0;
+            const orderB = b.order ?? 0;
+            return orderA - orderB;
+        });
+    }
+    getFormData(node) {
+        if (node.controlSource?.kind === 'transaction') {
+            this._isLoading.set(true);
+            return this.apiService
+                .executeTransaction(node.controlSource.entity, node.controlSource.params ?? {})
+                .pipe(tap((response) => {
+                this._form.set(adaptForm(response));
+                this._isLoading.set(false);
+            }), map(() => null), catchError((error) => {
+                console.error(error);
+                this._isLoading.set(false);
+                return of(null);
+            }));
+        }
+        if (node.controlSource?.kind === 'object') {
+            this._isLoading.set(true);
+            return this.apiService
+                .getObjectByAddress(node.controlSource.entity, node.controlSource.params ?? {})
+                .pipe(tap((response) => {
+                this._form.set(adaptForm(response.control));
+                this._isLoading.set(false);
+            }), map(() => null), catchError((error) => {
+                console.error(error);
+                this._isLoading.set(false);
+                return of(null);
+            }));
+        }
+        throw new Error(`Unsupported control source kind ${node.controlSource?.kind}`);
+    }
+    mapUpdateFormActionToFormNode(source) {
+        if (source.dynamic_value) {
+            return {
+                id: source.dynamic_value.entity_name,
+                type: 'form',
+                controlSource: {
+                    kind: source.dynamic_value.type,
+                    entity: source.dynamic_value.entity_name,
+                    params: source.dynamic_value.body ?? {},
+                },
+            };
+        }
+        return null;
+    }
+    mapUpdateTableActionToTableNode(source) {
+        return {
+            id: source.entity_name,
+            title: source.entity_name,
+            type: 'table',
+            dataSource: {
+                kind: source.type,
+                entity: source.entity_name,
+            },
+        };
+    }
+    processActionList(items, response) {
+        from(items)
+            .pipe(concatMap((a) => this.processAction(a, response)), finalize(() => {
+            this._isLoading.set(false);
+        }))
+            .subscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FormViewComponent, isStandalone: true, selector: "form-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, providers: [FormViewAttachmentService], ngImport: i0, template: "<h2>{{ node()?.title }}</h2>\n\n@if (isLoading()) {\n  <app-loading-view [rowCount]=\"5\"></app-loading-view>\n} @else {\n  @if (data(); as data) {\n    <le-form-renderer\n      [config]=\"config()\"\n      [engine]=\"data.engine\"\n      [sections]=\"data.sections\"\n      [customCss]=\"data.customCss\"\n      [topLevelControls]=\"data.topLevelControls\"\n      (event)=\"event.emit($event)\"\n    ></le-form-renderer>\n  }\n}\n", dependencies: [{ kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: FormRendererComponent, selector: "le-form-renderer", inputs: ["engine", "sections", "topLevelControls", "customCss", "config"], outputs: ["event"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'form-view', imports: [LoadingViewComponent, FormRendererComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [FormViewAttachmentService], template: "<h2>{{ node()?.title }}</h2>\n\n@if (isLoading()) {\n  <app-loading-view [rowCount]=\"5\"></app-loading-view>\n} @else {\n  @if (data(); as data) {\n    <le-form-renderer\n      [config]=\"config()\"\n      [engine]=\"data.engine\"\n      [sections]=\"data.sections\"\n      [customCss]=\"data.customCss\"\n      [topLevelControls]=\"data.topLevelControls\"\n      (event)=\"event.emit($event)\"\n    ></le-form-renderer>\n  }\n}\n" }]
+        }], ctorParameters: () => [] });
+
+class SectionComponent {
+    node = input.required();
+    config = input();
+    event = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SectionComponent, isStandalone: true, selector: "section-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\" (event)=\"event.emit($event)\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'section-view', imports: [forwardRef(() => NodeComponent)], template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\" (event)=\"event.emit($event)\"></le-node>\n}\n" }]
+        }] });
+
+class GridColViewComponent {
+    node = input.required();
+    config = input();
+    event = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GridColViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: GridColViewComponent, isStandalone: true, selector: "grid-col-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\" (event)=\"event.emit($event)\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GridColViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'grid-col-view', imports: [forwardRef(() => NodeComponent)], template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\" [config]=\"config()\" (event)=\"event.emit($event)\"></le-node>\n}\n" }]
+        }] });
+
+const NODE_COMPONENTS = {
+    section: SectionComponent,
+    grid: GridComponent,
+    grid_col: GridColViewComponent,
+    form: FormViewComponent,
+    table: TableViewComponent,
+    chart: ChartViewComponent,
+};
+class NodeComponent {
+    node = input.required();
+    config = input();
+    event = output();
+    componentPortal;
+    constructor() {
+        effect(() => {
+            this.componentPortal = new ComponentPortal(NODE_COMPONENTS[this.node().type]);
+        });
+    }
+    onPortalAttached(ref) {
+        const componentRef = ref;
+        componentRef.setInput('node', this.node());
+        componentRef.setInput('config', this.config());
+        const sub = componentRef.instance.event.subscribe((event) => {
+            this.event.emit(event);
+        });
+        componentRef.onDestroy(() => {
+            sub.unsubscribe();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: NodeComponent, isStandalone: true, selector: "le-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, ngImport: i0, template: "<ng-template\n  [cdkPortalOutlet]=\"componentPortal\"\n  (attached)=\"onPortalAttached($event)\">\n</ng-template>\n\n<!--@if (node(); as node) {-->\n<!--  @switch (node.type) {-->\n<!--    @case ('section') {-->\n<!--      <section-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></section-view>-->\n<!--    }-->\n<!--    @case ('grid') {-->\n<!--      <grid-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></grid-view>-->\n<!--    }-->\n<!--    @case ('grid_col') {-->\n<!--      <grid-col-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></grid-col-view>-->\n<!--    }-->\n<!--    @case ('table') {-->\n<!--      <table-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></table-view>-->\n<!--    }-->\n<!--    @case ('chart') {-->\n<!--      <chart-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></chart-view>-->\n<!--    }-->\n<!--    @case ('form') {-->\n<!--      <form-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></form-view>-->\n<!--    }-->\n<!--  }-->\n<!--}-->\n", dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-node', imports: [CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template\n  [cdkPortalOutlet]=\"componentPortal\"\n  (attached)=\"onPortalAttached($event)\">\n</ng-template>\n\n<!--@if (node(); as node) {-->\n<!--  @switch (node.type) {-->\n<!--    @case ('section') {-->\n<!--      <section-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></section-view>-->\n<!--    }-->\n<!--    @case ('grid') {-->\n<!--      <grid-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></grid-view>-->\n<!--    }-->\n<!--    @case ('grid_col') {-->\n<!--      <grid-col-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></grid-col-view>-->\n<!--    }-->\n<!--    @case ('table') {-->\n<!--      <table-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></table-view>-->\n<!--    }-->\n<!--    @case ('chart') {-->\n<!--      <chart-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></chart-view>-->\n<!--    }-->\n<!--    @case ('form') {-->\n<!--      <form-view [node]=\"node\" [config]=\"config()\" (event)=\"event.emit($event)\"></form-view>-->\n<!--    }-->\n<!--  }-->\n<!--}-->\n" }]
+        }], ctorParameters: () => [] });
+
+class FiltersComponent {
+    filtersService = inject(LEFiltersService);
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    _filteredOptions = signal([]);
+    _isDropdownOpened = signal(false);
+    overlayRef = null;
+    destroy$ = new Subject();
+    isOpened = this.filtersService.shown;
+    options = this.filtersService.options;
+    filteredOptions = this._filteredOptions.asReadonly();
+    isDropdownOpened = this._isDropdownOpened.asReadonly();
+    inputEl = viewChild('inputEl');
+    inputContainerEl = viewChild('inputContainerEl');
+    dropdownTpl = viewChild('autocompleteDropdownTpl');
+    contentTpl = viewChild('contentEl');
+    search = new FormControl();
+    selectedFilters = new SelectionModel(true);
+    filtersForm = new FormGroup({});
+    constructor() {
+        this.initFilters();
+        this.listenSearchChanges();
+        this.listenSelectionChanges();
+        this.listenDropdownState();
+    }
+    ngAfterViewInit() {
+        fromEvent(this.contentTpl().nativeElement, 'click')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: () => this.filtersService.close()
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onApplyClick(event) {
+        event.stopPropagation();
+        this.filtersService.updateSelection(this.filtersForm.getRawValue());
+    }
+    onResetClick(event) {
+        event.stopPropagation();
+        this.clearSelection();
+    }
+    onCloseClick(event) {
+        event.stopPropagation();
+        this.closeDropdown();
+        this.filtersService.close();
+    }
+    onInput(event) {
+        event.stopPropagation();
+        this.search.setValue(event.target.value);
+    }
+    onInputClearClick(event) {
+        event.stopPropagation();
+        this.search.setValue('');
+    }
+    onFocus(event) {
+        event.stopPropagation();
+        this.showDropdown();
+    }
+    onBlur(event) {
+        event.stopPropagation();
+    }
+    onOptionClick(control) {
+        this.selectedFilters.toggle(control);
+        this.closeDropdown();
+        this.search.setValue('');
+    }
+    onFilterRemoveClick(control) {
+        this.selectedFilters.toggle(control);
+    }
+    closePanel() {
+        this.overlayRef?.detach();
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+    }
+    openPanel() {
+        if (this.overlayRef !== null)
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.inputContainerEl())
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ])
+            .withPush(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            width: this.inputContainerEl().nativeElement.offsetWidth,
+            hasBackdrop: false,
+        });
+        this.overlayRef.attach(new TemplatePortal(this.dropdownTpl(), this.viewContainerRef));
+        this.overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            if (!this.inputContainerEl().nativeElement.contains(event.target)) {
+                this.closeDropdown();
+            }
+        });
+    }
+    showDropdown() {
+        this._isDropdownOpened.set(true);
+    }
+    closeDropdown() {
+        this._isDropdownOpened.set(false);
+    }
+    clearSelection() {
+        this.selectedFilters.clear();
+        this.filtersService.updateSelection({});
+    }
+    initFilters() {
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                this._filteredOptions.set(options);
+                this.selectedFilters.clear();
+            });
+        });
+    }
+    listenSearchChanges() {
+        this.search.valueChanges
+            .pipe(startWith(''), map((value) => this.filter(value)), takeUntilDestroyed())
+            .subscribe((filters) => {
+            this._filteredOptions.set(filters);
+        });
+    }
+    listenSelectionChanges() {
+        this.selectedFilters.changed.pipe(takeUntilDestroyed()).subscribe(({ added, removed }) => {
+            added.forEach((option) => {
+                this.filtersForm.addControl(option.key, new FormControl(''));
+            });
+            removed.forEach((option) => {
+                this.filtersForm.removeControl(option.key);
+            });
+        });
+    }
+    listenDropdownState() {
+        effect(() => {
+            const isDropdownOpened = this.isDropdownOpened();
+            untracked(() => {
+                if (isDropdownOpened) {
+                    this.openPanel();
+                }
+                else {
+                    this.closePanel();
+                }
+            });
+        });
+    }
+    filter(value) {
+        const options = this.options();
+        try {
+            const filterValue = value.toLowerCase();
+            return options.reduce((acc, option) => {
+                const filters = option.filters.filter((filter) => {
+                    return filter.control.label.toLowerCase().includes(filterValue.toLowerCase());
+                });
+                if (filters.length) {
+                    acc.push({ ...option, filters });
+                }
+                return acc;
+            }, []);
+        }
+        catch {
+            return options;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FiltersComponent, isStandalone: true, selector: "le-filters", viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "inputContainerEl", first: true, predicate: ["inputContainerEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["autocompleteDropdownTpl"], descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["contentEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div leDrawerContainer>\n  <div leDrawer type=\"over\" [opened]=\"isOpened()\" [width]=\"320\" [hideOnClose]=\"true\" [style.z-index]=\"100\">\n    <div class=\"le-filters-container\">\n      <div class=\"le-filters-title\">Filters</div>\n\n      <div class=\"le-divider le-divider-horizontal\"></div>\n\n      <div class=\"le-filters-actions\">\n        <button class=\"le-button le-button-flat le-button--success\" (click)=\"onApplyClick($event)\">Apply</button>\n\n        <button class=\"le-button le-button-basic\" (click)=\"onResetClick($event)\">Reset</button>\n\n        <button class=\"le-button le-button-basic\" (click)=\"onCloseClick($event)\">Close</button>\n      </div>\n\n      <div #inputContainerEl class=\"le-autocomplete-container\">\n        <input\n          #inputEl\n          class=\"le-autocomplete-input\"\n          type=\"text\"\n          placeholder=\"Select filters\"\n          [value]=\"search.value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          [attr.aria-expanded]=\"isDropdownOpened()\"\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n        >\n\n        <button type=\"button\" class=\"le-button-icon\" (click)=\"onInputClearClick($event)\">\n          <le-icon size=\"16\" class=\"le-icon-clear\" name=\"close\"></le-icon>\n        </button>\n      </div>\n\n      <div>\n        <form [formGroup]=\"filtersForm\" class=\"le-filters-list\">\n          @for (control of selectedFilters.selected; track control.key) {\n            <div class=\"le-filters-list-item\">\n              <label class=\"le-filters-list-label\" [for]=\"control.key\">{{control.label}}</label>\n\n              <div class=\"le-filters-list-input\">\n                @switch (control.type) {\n                  @case ('single_select') {\n                    <select [id]=\"control.key\" [formControlName]=\"control.key\">\n                      @for (option of control.options; track option) {\n                        <option [value]=\"option\">{{option}}</option>\n                      }\n                    </select>\n                  }\n                  @case ('multi_select') {\n                    <select [id]=\"control.key\" [formControlName]=\"control.key\" multiple>\n                      @for (option of control.options; track option) {\n                        <option [value]=\"option\">{{option}}</option>\n                      }\n                    </select>\n                  }\n                  @case ('dateTime') {\n                    <input type=\"datetime-local\" [id]=\"control.key\" [formControlName]=\"control.key\">\n                  }\n                  @case ('date') {\n                    <input type=\"date\" [id]=\"control.key\"  [formControlName]=\"control.key\">\n                  }\n                  @default {\n                    <input\n                      type=\"text\"\n                      [id]=\"control.key\"\n                      [formControlName]=\"control.key\"\n                      (keydown.enter)=\"onApplyClick($event)\"\n                    >\n                  }\n                }\n\n                <button type=\"button\" class=\"le-button-icon\" (click)=\"onFilterRemoveClick(control)\">\n                  <le-icon size=\"16\" class=\"le-icon-clear\" name=\"close\"></le-icon>\n                </button>\n              </div>\n            </div>\n          }\n        </form>\n      </div>\n    </div>\n  </div>\n\n  <div #contentEl leDrawerContent>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n\n<ng-template #autocompleteDropdownTpl>\n  <div class=\"le-autocomplete-panel\" role=\"listbox\">\n    @for (option of filteredOptions(); track option) {\n      <div class=\"le-autocomplete-label\">{{option.label}}</div>\n\n      <div>\n        @for (item of option.filters; track item) {\n          <div\n            role=\"option\"\n            class=\"le-autocomplete-option\"\n            [class.le-autocomplete-option--selected]=\"selectedFilters.isSelected(item.control)\"\n            [attr.aria-selected]=\"selectedFilters.isSelected(item.control)\"\n            (click)=\"onOptionClick(item.control)\"\n          >{{item.control.label}}</div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: DrawerContentDirective, selector: "[leDrawerContent]" }, { kind: "directive", type: DrawerContainerDirective, selector: "[leDrawerContainer]" }, { kind: "directive", type: LeDrawerDirective, selector: "[leDrawer]", inputs: ["opened", "width", "hideOnClose", "type"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: FiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-filters', imports: [
+                        DrawerContentDirective,
+                        DrawerContainerDirective,
+                        LeDrawerDirective,
+                        ReactiveFormsModule,
+                        LeIconComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div leDrawerContainer>\n  <div leDrawer type=\"over\" [opened]=\"isOpened()\" [width]=\"320\" [hideOnClose]=\"true\" [style.z-index]=\"100\">\n    <div class=\"le-filters-container\">\n      <div class=\"le-filters-title\">Filters</div>\n\n      <div class=\"le-divider le-divider-horizontal\"></div>\n\n      <div class=\"le-filters-actions\">\n        <button class=\"le-button le-button-flat le-button--success\" (click)=\"onApplyClick($event)\">Apply</button>\n\n        <button class=\"le-button le-button-basic\" (click)=\"onResetClick($event)\">Reset</button>\n\n        <button class=\"le-button le-button-basic\" (click)=\"onCloseClick($event)\">Close</button>\n      </div>\n\n      <div #inputContainerEl class=\"le-autocomplete-container\">\n        <input\n          #inputEl\n          class=\"le-autocomplete-input\"\n          type=\"text\"\n          placeholder=\"Select filters\"\n          [value]=\"search.value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          [attr.aria-expanded]=\"isDropdownOpened()\"\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n        >\n\n        <button type=\"button\" class=\"le-button-icon\" (click)=\"onInputClearClick($event)\">\n          <le-icon size=\"16\" class=\"le-icon-clear\" name=\"close\"></le-icon>\n        </button>\n      </div>\n\n      <div>\n        <form [formGroup]=\"filtersForm\" class=\"le-filters-list\">\n          @for (control of selectedFilters.selected; track control.key) {\n            <div class=\"le-filters-list-item\">\n              <label class=\"le-filters-list-label\" [for]=\"control.key\">{{control.label}}</label>\n\n              <div class=\"le-filters-list-input\">\n                @switch (control.type) {\n                  @case ('single_select') {\n                    <select [id]=\"control.key\" [formControlName]=\"control.key\">\n                      @for (option of control.options; track option) {\n                        <option [value]=\"option\">{{option}}</option>\n                      }\n                    </select>\n                  }\n                  @case ('multi_select') {\n                    <select [id]=\"control.key\" [formControlName]=\"control.key\" multiple>\n                      @for (option of control.options; track option) {\n                        <option [value]=\"option\">{{option}}</option>\n                      }\n                    </select>\n                  }\n                  @case ('dateTime') {\n                    <input type=\"datetime-local\" [id]=\"control.key\" [formControlName]=\"control.key\">\n                  }\n                  @case ('date') {\n                    <input type=\"date\" [id]=\"control.key\"  [formControlName]=\"control.key\">\n                  }\n                  @default {\n                    <input\n                      type=\"text\"\n                      [id]=\"control.key\"\n                      [formControlName]=\"control.key\"\n                      (keydown.enter)=\"onApplyClick($event)\"\n                    >\n                  }\n                }\n\n                <button type=\"button\" class=\"le-button-icon\" (click)=\"onFilterRemoveClick(control)\">\n                  <le-icon size=\"16\" class=\"le-icon-clear\" name=\"close\"></le-icon>\n                </button>\n              </div>\n            </div>\n          }\n        </form>\n      </div>\n    </div>\n  </div>\n\n  <div #contentEl leDrawerContent>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n\n<ng-template #autocompleteDropdownTpl>\n  <div class=\"le-autocomplete-panel\" role=\"listbox\">\n    @for (option of filteredOptions(); track option) {\n      <div class=\"le-autocomplete-label\">{{option.label}}</div>\n\n      <div>\n        @for (item of option.filters; track item) {\n          <div\n            role=\"option\"\n            class=\"le-autocomplete-option\"\n            [class.le-autocomplete-option--selected]=\"selectedFilters.isSelected(item.control)\"\n            [attr.aria-selected]=\"selectedFilters.isSelected(item.control)\"\n            (click)=\"onOptionClick(item.control)\"\n          >{{item.control.label}}</div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
+
+class LeContainerComponent {
+    auth = inject(LEAuthService);
+    dataService = inject(LEDataService);
+    sidebar = viewChild(SidebarComponent);
+    data = computed(() => {
+        const config = this.dataService.config();
+        const view = this.dataService.view();
+        if (!config || !view)
+            return null;
+        return {
+            config,
+            view,
+        };
+    });
+    constructor() {
+        this.listenAuthState();
+        this.listenPageInit();
+        this.dataService.registerEffects();
+    }
+    onSelectionChange(view) {
+        this.dataService.setView(view);
+    }
+    listenAuthState() {
+        effect(() => {
+            const token = this.auth.token();
+            const isGuest = this.auth.isGuest();
+            if (!token && !isGuest)
+                return;
+            untracked(() => {
+                this.dataService.requestConfig();
+            });
+        });
+    }
+    listenPageInit() {
+        effect(() => {
+            const path = this.dataService.parentPath();
+            const sidebar = this.sidebar();
+            if (!(path.length && sidebar))
+                return;
+            untracked(() => {
+                path.forEach((node) => {
+                    sidebar.setExpanded(node);
+                });
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LeContainerComponent, isStandalone: true, selector: "le-container", providers: [LEDataService, LEApiService, LEFiltersService, LeNavigationService], viewQueries: [{ propertyName: "sidebar", first: true, predicate: SidebarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-filters>\n      <le-node [node]=\"data.view\"></le-node>\n    </le-filters>\n  </le-sidebar>\n}\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "le-sidebar", inputs: ["config", "view"], outputs: ["selectionChange"] }, { kind: "component", type: NodeComponent, selector: "le-node", inputs: ["node", "config"], outputs: ["event"] }, { kind: "component", type: FiltersComponent, selector: "le-filters" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-container', imports: [SidebarComponent, NodeComponent, FiltersComponent], providers: [LEDataService, LEApiService, LEFiltersService, LeNavigationService], template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-filters>\n      <le-node [node]=\"data.view\"></le-node>\n    </le-filters>\n  </le-sidebar>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+const provideConfig = (config) => {
+    return {
+        provide: CONFIG_TOKEN,
+        useValue: {
+            ...defaultConfig,
+            ...config,
+        },
+    };
+};
+
+const LEAuthInterceptor = (req, next) => {
+    const authService = inject(LEAuthService);
+    if (authService.isGuest()) {
+        return next(req);
+    }
+    if (req.context.get(IS_LIBRARY_REQUEST)) {
+        try {
+            authService.validateToken();
+            return next(req.clone({ setHeaders: { Authorization: authService.token() } }));
+        }
+        catch (e) {
+            inject(LeToastService).error(e.message);
+            console.error(e);
+        }
+    }
+    return next(req);
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CONFIG_TOKEN, LEAuthInterceptor, LEAuthService, LeContainerComponent, LeToastService, provideConfig };
+//# sourceMappingURL=planeasyinc-le-angular.mjs.map