@planeasyinc/le-angular 0.0.1

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

@@ -0,0 +1,1640 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, Injectable, computed, Directive, input, ChangeDetectionStrategy, Component, output, forwardRef, effect, untracked, ViewContainerRef, Renderer2, ElementRef, DestroyRef, viewChild } from '@angular/core';
+import { HttpContextToken, HttpClient, HttpContext, HttpRequest, HttpEventType } from '@angular/common/http';
+import { map, filter, distinctUntilChanged, BehaviorSubject, Subject, firstValueFrom, of, tap, catchError, from, concatMap, finalize } from 'rxjs';
+import { decodeJwt, UrlFragmentBuilder, normalizeConfig } from '@planeasyinc/le-core';
+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 { DataSource, CdkTable, CdkColumnDef, CdkHeaderCell, CdkHeaderCellDef, CdkCell, CdkCellDef, CdkHeaderRowDef, CdkHeaderRow, CdkRow, CdkRowDef } from '@angular/cdk/table';
+import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { A11yModule } from '@angular/cdk/a11y';
+import { JsonPipe, ViewportScroller } from '@angular/common';
+import { adaptOld } from '@planeasyinc/fe-adapters-old';
+import { adaptSections } from '@planeasyinc/fe-adapters-sections';
+import { createEngine } from '@planeasyinc/fe-core';
+import { FeFieldHost } from '@planeasyinc/fe-angular';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+
+const IS_LIBRARY_REQUEST = new HttpContextToken(() => false);
+
+const defaultConfig = {
+    apiUrl: '',
+    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, includeVersions, includeMeta) {
+        const url = new UrlFragmentBuilder(this.apiUrl())
+            .setFragment(`api/objects/${address}/`)
+            .setQuery(`all_versions=${includeVersions}&include_metadata=${includeMeta}&load_references=false&file_optimized=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 LEDataService {
+    apiService = inject(LEApiService);
+    _config = signal(null);
+    _view = signal(null);
+    _parentMenu = signal(null);
+    _customCss = signal(null);
+    view = this._view.asReadonly();
+    parentMenu = this._parentMenu.asReadonly();
+    config = this._config.asReadonly();
+    customCss = this._customCss.asReadonly();
+    setView(node) {
+        this._view.set(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._view.set(initialView.node);
+                this._parentMenu.set(initialView.parent);
+            },
+            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?.id) {
+            if (node.id === id) {
+                return node;
+            }
+            if ('children' in node) {
+                for (const child of node.children) {
+                    const childNode = this.getNodeById(id, child);
+                    if (childNode) {
+                        return childNode;
+                    }
+                }
+            }
+        }
+        return null;
+    }
+    getInitialView(node) {
+        if ('children' in node) {
+            const child = node.children[0];
+            if ('isParentMenu' in child && child.isParentMenu) {
+                return this.getInitialView(child);
+            }
+            else {
+                return {
+                    node: child,
+                    parent: node
+                };
+            }
+        }
+        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 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);
+    _width = computed(() => {
+        if (this.opened()) {
+            return this.width();
+        }
+        if (this.hideOnClose()) {
+            return 0;
+        }
+        return DRAWER_CLOSED_WIDTH;
+    });
+    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 } }, host: { properties: { "class.le-drawer": "true", "class.le-drawer--open": "opened()", "style.width.px": "_width()" } }, 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()'
+                    },
+                }]
+        }] });
+
+const chevron = {
+    name: 'chevron',
+    viewBox: '0 -960 960 960',
+    content: [
+        'M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'
+    ]
+};
+
+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 ICONS_MAP = {
+    'chevron': chevron,
+    'arrow-down': arrowDown,
+    'sort': sort
+};
+
+class LeIconComponent {
+    name = input.required();
+    size = input(24);
+    icon = computed(() => ({
+        ...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": "\"block\"" } }, 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]': '"block"',
+                    }
+                }]
+        }] });
+
+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                <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            </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"] }, { 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                <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            </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();
+    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 } }, 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();
+    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 } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'grid-view', imports: [forwardRef(() => NodeComponent)], template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n" }]
+        }] });
+
+class TableDataSource extends DataSource {
+    data;
+    get count() {
+        return this.data.value.length;
+    }
+    constructor(data = []) {
+        super();
+        this.data = new BehaviorSubject(data);
+    }
+    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();
+    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.1.0", version: "19.2.21", type: ReferenceTemplate, 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-reference"></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"></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();
+    constructor() {
+        this.setEffects();
+    }
+    setEffects() {
+        effect(() => {
+            const type = this.type();
+            const data = this.data();
+            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);
+            });
+        });
+    }
+    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 } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tableViewCell]',
+                }]
+        }], ctorParameters: () => [] });
+
+class TableViewComponent {
+    apiService = inject(LEApiService);
+    dataService = inject(LEDataService);
+    node = input.required();
+    _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(() => {
+        return this.columns().map((column) => column.key);
+    });
+    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;
+    });
+    constructor() {
+        this.setEffects();
+    }
+    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);
+        });
+    }
+    onToolbarActionClick({ actions }) {
+        actions.forEach((action) => this.processTableAction(action));
+    }
+    onRowClick(row) {
+        const actions = this.node().actions?.onRowClick ?? [];
+        actions.forEach((action) => this.processTableAction(action, row));
+    }
+    processTableAction(action, row) {
+        if (action.type === 'update_form') {
+            const dataSource = action.dataSource;
+            this.dataService.setView({
+                id: action.type,
+                type: 'form',
+                controlSource: {
+                    kind: dataSource.kind,
+                    entity: dataSource.entity,
+                    params: dataSource?.params
+                        ? this.interpolateRowValues(dataSource.params, row)
+                        : undefined,
+                },
+            });
+        }
+    }
+    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).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);
+        }
+        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);
+    }
+    handleTableDataErrorResponse(error) {
+        console.error(error);
+        this._columns.set([]);
+        this._data.set(new TableDataSource());
+        this._total.set(0);
+        this._isLoading.set(false);
+    }
+    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();
+            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();
+            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());
+                });
+            });
+        });
+    }
+    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 } }, ngImport: i0, template: "<div class=\"le-toolbar\">\n  @if (node(); as node) {\n    <h2>{{ node?.title }}</h2>\n\n    @if (node.actions?.tableActions) {\n      <table-view-actions\n        [actions]=\"node.actions!.tableActions\"\n        (actionClicked)=\"onToolbarActionClick($event)\"\n      ></table-view-actions>\n    }\n  }\n</div>\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      @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<!--                    <div class=\"le-sort-icon le-sort-icon&#45;&#45;unfold\">-->\n<!--                      <span>&#8645;</span>-->\n<!--                    </div>-->\n\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            ></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"] }, { 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: TableViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'table-view', imports: [
+                        CdkTable,
+                        CdkColumnDef,
+                        CdkHeaderCell,
+                        CdkHeaderCellDef,
+                        CdkCell,
+                        CdkCellDef,
+                        CdkHeaderRowDef,
+                        CdkHeaderRow,
+                        CdkRow,
+                        CdkRowDef,
+                        TableViewPaginationComponent,
+                        LoadingViewComponent,
+                        TableViewActions,
+                        TableViewCellDirective,
+                        LeIconComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-toolbar\">\n  @if (node(); as node) {\n    <h2>{{ node?.title }}</h2>\n\n    @if (node.actions?.tableActions) {\n      <table-view-actions\n        [actions]=\"node.actions!.tableActions\"\n        (actionClicked)=\"onToolbarActionClick($event)\"\n      ></table-view-actions>\n    }\n  }\n</div>\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      @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<!--                    <div class=\"le-sort-icon le-sort-icon&#45;&#45;unfold\">-->\n<!--                      <span>&#8645;</span>-->\n<!--                    </div>-->\n\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            ></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();
+    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 } }, ngImport: i0, template: "<div class=\"le-form-container\">\n  @for (section of sections(); track section.id) {\n    <section class=\"le-section\">\n      <div class=\"le-section-title\">\n        @if (section.label) {\n          <h3>{{ section.label }}</h3>\n        }\n      </div>\n\n      <div class=\"le-section-controls\">\n        @for (control of section.controls; track control) {\n          <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n        }\n      </div>\n    </section>\n  }\n\n  @if (topLevelControls()?.length) {\n    <section class=\"le-top-level-controls\">\n      @for (control of topLevelControls(); track control) {\n        <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n      }\n    </section>\n  }\n</div>\n", dependencies: [{ kind: "component", type: FeFieldHost, selector: "fe-field", inputs: ["engine", "control"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-form-renderer', imports: [FeFieldHost], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-form-container\">\n  @for (section of sections(); track section.id) {\n    <section class=\"le-section\">\n      <div class=\"le-section-title\">\n        @if (section.label) {\n          <h3>{{ section.label }}</h3>\n        }\n      </div>\n\n      <div class=\"le-section-controls\">\n        @for (control of section.controls; track control) {\n          <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n        }\n      </div>\n    </section>\n  }\n\n  @if (topLevelControls()?.length) {\n    <section class=\"le-top-level-controls\">\n      @for (control of topLevelControls(); track control) {\n        <fe-field [engine]=\"engine()\" [control]=\"control\"></fe-field>\n      }\n    </section>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Handle placeholders in onSuccess callback.
+ */
+const isPlaceholder = (value) => {
+    return typeof value === 'string' && value.startsWith('{') && value.endsWith('}');
+};
+/**
+ * @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 mapResponseToRequestBody = (bodyModel = {}, values = {}) => {
+    const result = {};
+    for (const [key, 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] = placeholder;
+        }
+    }
+    return result;
+};
+
+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), false, 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);
+    _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 = mapResponseToRequestBody(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);
+                }
+            }), 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.dataService.setView(node);
+            }
+            return of(null);
+        },
+        update_value: (action, response) => {
+            return of(action).pipe(filter((action) => isPlaceholder(action.value)), map((action) => mapResponseToRequestBody({ [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();
+    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(() => {
+            const node = this.node();
+            if (node) {
+                this.getFormData(node).subscribe();
+            }
+        });
+        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);
+        });
+    }
+    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);
+            }));
+        }
+        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;
+    }
+    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 } }, providers: [FormViewAttachmentService], ngImport: i0, template: "<h2>{{ node()?.title }}</h2>\n\n@if (isLoading()) {\n  <app-loading-view [rowCount]=\"5\"></app-loading-view>\n} @else {\n  @if (data(); as data) {\n    <le-form-renderer\n      [engine]=\"data.engine\"\n      [sections]=\"data.sections\"\n      [customCss]=\"data.customCss\"\n      [topLevelControls]=\"data.topLevelControls\"\n    ></le-form-renderer>\n  }\n}\n", dependencies: [{ kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: FormRendererComponent, selector: "le-form-renderer", inputs: ["engine", "sections", "topLevelControls", "customCss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'form-view', imports: [LoadingViewComponent, FormRendererComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [FormViewAttachmentService], template: "<h2>{{ node()?.title }}</h2>\n\n@if (isLoading()) {\n  <app-loading-view [rowCount]=\"5\"></app-loading-view>\n} @else {\n  @if (data(); as data) {\n    <le-form-renderer\n      [engine]=\"data.engine\"\n      [sections]=\"data.sections\"\n      [customCss]=\"data.customCss\"\n      [topLevelControls]=\"data.topLevelControls\"\n    ></le-form-renderer>\n  }\n}\n" }]
+        }], ctorParameters: () => [] });
+
+class SectionComponent {
+    node = input.required();
+    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 } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node"] }] });
+}
+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\"></le-node>\n}\n" }]
+        }] });
+
+class GridColViewComponent {
+    node = input.required();
+    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 } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node"] }] });
+}
+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\"></le-node>\n}\n" }]
+        }] });
+
+class NodeComponent {
+    node = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: NodeComponent, isStandalone: true, selector: "le-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (node(); as node) {\n  @switch (node.type) {\n    @case ('section') {\n      <section-view [node]=\"node\"></section-view>\n    }\n    @case ('grid') {\n      <grid-view [node]=\"node\"></grid-view>\n    }\n    @case ('grid_col') {\n      <grid-col-view [node]=\"node\"></grid-col-view>\n    }\n    @case ('table') {\n      <table-view [node]=\"node\"></table-view>\n    }\n    @case ('chart') {\n      <chart-view [node]=\"node\"></chart-view>\n    }\n    @case ('form') {\n      <form-view [node]=\"node\"></form-view>\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => ChartViewComponent), selector: "chart-view", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => GridComponent), selector: "grid-view", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => TableViewComponent), selector: "table-view", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => FormViewComponent), selector: "form-view", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => GridColViewComponent), selector: "grid-col-view", inputs: ["node"] }, { kind: "component", type: i0.forwardRef(() => SectionComponent), selector: "section-view", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: NodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-node', imports: [
+                        ChartViewComponent,
+                        GridComponent,
+                        TableViewComponent,
+                        FormViewComponent,
+                        GridColViewComponent,
+                        forwardRef(() => SectionComponent),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (node(); as node) {\n  @switch (node.type) {\n    @case ('section') {\n      <section-view [node]=\"node\"></section-view>\n    }\n    @case ('grid') {\n      <grid-view [node]=\"node\"></grid-view>\n    }\n    @case ('grid_col') {\n      <grid-col-view [node]=\"node\"></grid-col-view>\n    }\n    @case ('table') {\n      <table-view [node]=\"node\"></table-view>\n    }\n    @case ('chart') {\n      <chart-view [node]=\"node\"></chart-view>\n    }\n    @case ('form') {\n      <form-view [node]=\"node\"></form-view>\n    }\n  }\n}\n" }]
+        }] });
+
+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.setEffects();
+    }
+    onSelectionChange(view) {
+        this.dataService.setView(view);
+    }
+    setEffects() {
+        effect(() => {
+            const token = this.auth.token();
+            const isGuest = this.auth.isGuest();
+            if (!token && !isGuest)
+                return;
+            untracked(() => {
+                this.dataService.requestConfig();
+            });
+        });
+        effect(() => {
+            const parentMenu = this.dataService.parentMenu();
+            const sidebar = this.sidebar();
+            if (!(parentMenu && sidebar))
+                return;
+            untracked(() => {
+                sidebar.setExpanded(parentMenu);
+            });
+        });
+    }
+    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], 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-node [node]=\"data.view\"></le-node>\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-container', imports: [SidebarComponent, NodeComponent], providers: [LEDataService, LEApiService], template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-node [node]=\"data.view\"></le-node>\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